web: provide storybook demos and docs for existing tests (#11651)

* Added tests and refinements as tests indicate.

* Building out the test suite.

* web: test the simple things. Fix what the tests revealed.

- Move `EmptyState.test.ts` into the `./tests` folder.
- Provide unit tests for:
  - Alert
  - Divider
  - Expand
  - Label
  - LoadingOverlay
- Give all tested items an Interface and a functional variant for rendering
- Give Label an alternative syntax for declaring alert levels
- Remove the slot name in LoadingOverlay
  - Change the slot call in `./enterprise/rac/index.ts` to not need the slot name as well
- Change the attribute names `topMost`, `textOpen`, and `textClosed` to `topmost`, `text-open`, and
  `text-closed`, respectively.
  - Change locations in the code where those are used to correspond

** Why interfaces: **

Provides another check on the input/output boundaries of our elements, gives Storybook and
WebdriverIO another validation to check, and guarantees any rendering functions cannot be passed
invalid property names.

** Why functions for rendering: **

Providing functions for rendering gets us one step closer to dynamically defining our forms-in-code
at runtime without losing any type safety.

** Why rename the attributes: **

A *very* subtle bug:
[Element:setAttribute()](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute)
automatically "converts an attribute name to all lower-case when called on an HTML element in an
HTML document." The three attributes renamed are all treated *as* attributes, either classic boolean
or stringly-typed attributes, and attempting to manipulate them with `setAttribute()` will fail.

All of these attributes are presentational; none of them end up in a transaction with the back-end,
so kebab-to-camel conversions are not a concern.

Also, ["topmost" is one word](https://www.merriam-webster.com/dictionary/topmost).

** Why remove the slot name: **

Because there was only one slot.  A name is not needed.

* Fix minor spelling error.

* First pass at a custom, styled input object.

* .

* web: Demo the simple things. Fix things the Demo says need fixing.

- Move the Element's stories into a `./stories` folder
- Provide stories for (these are the same ones "provided tests for" in the [previous
  PR](https://github.com/goauthentik/authentik/pull/11633))
  - Alert
  - Divider
  - Expand
  - Label
  - LoadingOverlay
- Provide Storybook documentation for:
  - AppIcon
  - ActionButton
  - AggregateCard
  - AggregatePromiseCard
  - QuickActionsCard
  - Alert
  - Divider
  - EmptyState
  - Expand
  - Label
  - LoadingOverlay
  - ApplicationEmptyState
- Fix a bug in LoadingOverlay; naming error in nested slots caused any message attached to the
  overlay to not sow up correctly.
- Revise AppIcon to be independent of authentik; it just cares if the data has a name or an icon
  reference, it does not need to know about `Application` objects. As such, it's an *element*, not a
  *component*, and I've moved it into the right location, and updated the few places it is used to
  match.

* Prettier has opinions with which I sometimes diverge.

* Found a bug! Although pf-m-xl was defined as a legal size, there was no code to handle drawing something XL!

* Found a few typos and incorrect API descriptions.

web/src/elements/cards/stories/AggregateCard.docs.mdx

@@ -0,0 +1,24 @@
+import { Canvas, Description, Meta, Story, Title } from "@storybook/blocks";
+
+import * as AggregateCardStories from "./AggregateCard.stories";
+
+<Meta of={AggregateCardStories} />
+
+# Aggregate Cards
+
+Aggregate Cards are in-page elements to display isolated elements in a consistent, card-like format.
+Cards are used in dashboards and as asides for specific information.
+
+## Usage
+
+```Typescript
+import "@goauthentik/elements/cards/AggregateCard.js";
+```
+
+```html
+<ak-aggregate-card header="Some title"><p>This is the content of your card!</p></ak-aggregate-card>
+```
+
+## Demo
+
+<Story of={AggregateCardStories.DefaultStory} />

web/src/elements/cards/stories/AggregatePromiseCard.docs.mdx

@@ -0,0 +1,35 @@
+import { Canvas, Description, Meta, Story, Title } from "@storybook/blocks";
+
+import * as AggregatePromiseCardStories from "./AggregatePromiseCard.stories";
+
+<Meta of={AggregatePromiseCardStories} />
+
+# Aggregate Promise Cards
+
+Aggregate Promise Cards are Aggregate Cards that take a promise from client code and either display
+the contents of that promise or a pre-configured failure notice. The contents must be compliant with
+and produce a meaningful result via the `.toString()` API. HTML in the string will currently be
+escaped.
+
+## Usage
+
+```Typescript
+import "@goauthentik/elements/cards/AggregatePromiseCard.js";
+```
+
+```html
+<ak-aggregate-card-promise
+    header="Some title"
+    .promise="${somePromise}"
+></ak-aggregate-card-promise>
+```
+
+## Demo
+
+### Success
+
+<Story of={AggregatePromiseCardStories.DefaultStory} />
+
+### Failure
+
+<Story of={AggregatePromiseCardStories.PromiseRejected} />

web/src/elements/cards/stories/QuickActionsCard.docs.mdx

@@ -0,0 +1,36 @@
+import { Canvas, Description, Meta, Story, Title } from "@storybook/blocks";
+
+import * as QuickActionsCardStories from "./QuickActionsCard.stories";
+
+<Meta of={QuickActionsCardStories} />
+
+# Quick Action Cards
+
+A Quick Action Card displays a list of navigation links. It is used on our dashboards to provide
+easy access to basic operations implied by the dashboard. The example here is from the home page
+dashboard.
+
+The QuickAction type has three fields: the string to display, the URL to navigate to, and a flag
+indicating if the browser should open the link in a new tab.
+
+## Usage
+
+```Typescript
+import "@goauthentik/elements/cards/QuickActionsCard.js";
+
+const ACTIONS: QuickAction[] = [
+    ["Create a new application", "/core/applications"],
+    ["Check the logs", "/events/log"],
+    ["Explore integrations", "https://goauthentik.io/integrations/", true],
+    ["Manage users", "/identity/users"],
+    ["Check the release notes", "https://goauthentik.io/docs/releases/", true],
+];
+```
+
+```html
+<ak-quick-actions-card title="Some title" .actions=${ACTIONS}></ak-aggregate-card>
+```
+
+## Demo
+
+<Story of={QuickActionsCardStories.DefaultStory} />