@uh-design-system/component-library 1.5.2-rc.1 → 1.6.0-rc.0

package/dist/collection/components/01-base-components/ds-action-menu/stories/ds-action-menu.stories.js

@@ -0,0 +1,304 @@
+import { html } from "lit";
+import { icons } from "../../../00-foundations/icons/iconList";
+const meta = {
+    title: 'Base Components/ActionMenu',
+    component: 'ds-action-menu',
+    parameters: {
+        a11y: {
+            config: {
+                rules: [
+                    {
+                        id: 'aria-required-parent',
+                        enabled: false,
+                    },
+                ],
+            },
+        },
+        docs: {
+            description: {
+                component: `
+# ActionMenu Component
+
+A dropdown menu triggered by a button. Combines a configurable trigger button with a floating action list that supports keyboard navigation and full ARIA menu semantics.
+
+## Child Components
+
+- \`ds-action-list\` — A group of menu items (\`role="group"\`). Place multiple inside \`ds-action-menu\` to create separated groups. Handles full keyboard navigation across all groups.
+- \`ds-action-list-item\` — Individual menu item. Four variants:
+  - \`action\` — Standard action (\`role="menuitem"\`), closes menu on select
+  - \`action-danger\` — Destructive action (\`role="menuitem"\`), closes menu on select
+  - \`single-select\` — Radio selection (\`role="menuitemradio"\`), closes menu on select
+  - \`multi-select\` — Checkbox selection (\`role="menuitemcheckbox"\`), menu stays open
+- \`ds-action-list-divider\` — Visual separator between \`ds-action-list\` groups. Must be added manually between each pair of adjacent lists.
+- \`ds-action-list-group-title\` — Optional visible group label. When present inside a \`ds-action-list\`, its text is used as the accessible name of the group via \`aria-labelledby\`.
+
+## Keyboard Navigation
+
+| Key | Behaviour |
+|-----|-----------|
+| Enter / Space | Opens menu (on trigger), activates item |
+| Arrow Down | Opens menu and focuses first item (on trigger); moves to next item (in menu, wraps across groups) |
+| Arrow Up | Opens menu and focuses last item (on trigger); moves to previous item (in menu, wraps across groups) |
+| Home / End | Jump to first / last item across all groups |
+| Any character | Jump to next item whose label starts with that character |
+| Escape | Close menu, return focus to trigger |
+| Tab | Close menu, move focus naturally |
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| \`dsOpen\` | — | Emitted when the menu opens |
+| \`dsClose\` | — | Emitted when the menu closes |
+| \`dsSelect\` | \`{ label, selected, variant }\` | Emitted by \`ds-action-list-item\` on activation |
+
+## Positioning
+
+The menu uses **CSS Anchor Positioning** (\`anchor-name\` / \`position-anchor\`) with \`position: fixed\`,
+so it escapes any \`overflow: hidden\` ancestor. Set \`ds-placement="auto"\` (default) and the browser
+automatically flips above the trigger when there is not enough space below.
+        `,
+            },
+        },
+    },
+    argTypes: {
+        dsButtonVariant: {
+            control: 'select',
+            options: ['primary', 'secondary', 'supplementary'],
+        },
+        dsButtonColour: {
+            control: 'select',
+            options: ['blue', 'black', 'white', 'danger'],
+        },
+        dsButtonSize: {
+            control: 'select',
+            options: ['small', 'medium'],
+        },
+        dsAlign: {
+            control: 'select',
+            options: ['start', 'center', 'end'],
+        },
+        dsPlacement: {
+            control: 'select',
+            options: ['bottom', 'top', 'auto'],
+        },
+        dsIcon: {
+            control: 'select',
+            options: ['', ...icons.map(icon => icon.name)],
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        dsButtonText: 'Actions',
+        dsButtonVariant: 'secondary',
+        dsButtonColour: 'blue',
+        dsButtonSize: 'medium',
+        dsIconOnly: false,
+        dsAlign: 'start',
+        dsPlacement: 'auto',
+        dsDisabled: false,
+    },
+    render: args => {
+        const el = document.createElement('ds-action-menu');
+        Object.assign(el, args);
+        el.innerHTML = `
+      <ds-action-list>
+        <ds-action-list-item ds-variant="action" ds-label="Add..." ds-icon="add"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="Edit" ds-icon="edit"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="Share" ds-icon="share"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="Download" ds-icon="download"></ds-action-list-item>
+      </ds-action-list>
+    `;
+        return el;
+    },
+};
+export const Playground = {
+    args: {
+        dsButtonText: 'Actions',
+        dsButtonVariant: 'secondary',
+        dsButtonColour: 'blue',
+        dsButtonSize: 'medium',
+        dsIconOnly: false,
+        dsIcon: '',
+        dsAlign: 'start',
+        dsPlacement: 'auto',
+        dsMenuWidth: '',
+        dsMenuMaxHeight: '',
+        dsDisabled: false,
+        slotContent: `<ds-action-list>
+  <ds-action-list-group-title ds-title="Basic actions"></ds-action-list-group-title>
+  <ds-action-list-item ds-variant="action" ds-label="Add..." ds-icon="add"></ds-action-list-item>
+  <ds-action-list-item ds-variant="action" ds-label="Edit" ds-icon="edit"></ds-action-list-item>
+  <ds-action-list-item ds-variant="action" ds-label="Share" ds-icon="share"></ds-action-list-item>
+  <ds-action-list-item ds-variant="action" ds-label="Download" ds-icon="download"></ds-action-list-item>
+</ds-action-list>
+<ds-action-list-divider></ds-action-list-divider>
+<ds-action-list>
+  <ds-action-list-group-title ds-title="Single select actions"></ds-action-list-group-title>
+  <ds-action-list-item ds-variant="single-select" ds-label="Email" ds-icon="mail" ds-selected="true"></ds-action-list-item>
+  <ds-action-list-item ds-variant="single-select" ds-label="Phone" ds-icon="call"></ds-action-list-item>
+  <ds-action-list-item ds-variant="single-select" ds-label="Text message" ds-icon="chat"></ds-action-list-item>
+</ds-action-list>
+<ds-action-list-divider></ds-action-list-divider>
+<ds-action-list>
+  <ds-action-list-group-title ds-title="Multi select actions"></ds-action-list-group-title>
+  <ds-action-list-item ds-variant="multi-select" ds-label="Student number" ds-selected="true"></ds-action-list-item>
+  <ds-action-list-item ds-variant="multi-select" ds-label="Study programme"></ds-action-list-item>
+  <ds-action-list-item ds-variant="multi-select" ds-label="Study track"></ds-action-list-item>
+</ds-action-list>
+<ds-action-list-divider></ds-action-list-divider>
+<ds-action-list>
+  <ds-action-list-item ds-variant="action" ds-label="Archive" ds-icon="archive"></ds-action-list-item>
+  <ds-action-list-item ds-variant="action-danger" ds-label="Delete" ds-icon="delete"></ds-action-list-item>
+</ds-action-list>`,
+    },
+    argTypes: {
+        slotContent: {
+            control: 'text',
+            description: 'Slot content HTML. Use ds-action-list elements as groups, separated by ds-action-list-divider elements.',
+        },
+    },
+    render: args => {
+        const { slotContent, ...menuArgs } = args;
+        const el = document.createElement('ds-action-menu');
+        Object.assign(el, menuArgs);
+        el.innerHTML = slotContent;
+        return el;
+    },
+};
+export const Events = {
+    name: 'Events',
+    parameters: {
+        docs: {
+            source: {
+                code: `
+<ds-action-menu ds-button-text="Actions" id="my-action-menu">
+  <ds-action-list>
+    <ds-action-list-item ds-variant="action" ds-label="Edit" ds-icon="edit"></ds-action-list-item>
+    <ds-action-list-item ds-variant="action-danger" ds-label="Delete" ds-icon="delete"></ds-action-list-item>
+  </ds-action-list>
+  <ds-action-list>
+    <ds-action-list-item ds-variant="multi-select" ds-label="Student number" ds-selected="true"></ds-action-list-item>
+    <ds-action-list-item ds-variant="single-select" ds-label="Email" ds-icon="mail" ds-selected="true"></ds-action-list-item>
+  </ds-action-list>
+</ds-action-menu>
+
+<script>
+  const menu = document.getElementById('my-action-menu');
+
+  menu.addEventListener('dsOpen', () => { /* menu opened */ });
+  menu.addEventListener('dsClose', () => { /* menu closed */ });
+
+  menu.querySelectorAll('ds-action-list-item').forEach(item => {
+    item.addEventListener('dsSelect', (event) => {
+      const { label, selected, variant } = event.detail;
+    });
+  });
+</script>
+        `,
+            },
+        },
+    },
+    render: () => html `
+    <ds-grid>
+      <ds-grid>
+        <ds-card ds-heading="Events" ds-description="Open the menu and interact with items to observe the events. For implementation details, view 'Show code' in the Docs.">
+          <ul slot="content" class="ds-bodytext-sm ds-m-sm" style="list-style: none; padding: var(--ds-spacing-small, 16px); margin: 0;">
+            <li>Menu open: <strong id="am-output-open">No</strong></li>
+            <li style="margin-top: var(--ds-spacing-3xSmall, 4px);">Last select — label: <strong id="am-output-label">–</strong></li>
+            <li style="margin-top: var(--ds-spacing-3xSmall, 4px);">Last select — variant: <strong id="am-output-variant">–</strong></li>
+            <li style="margin-top: var(--ds-spacing-3xSmall, 4px);">Last select — selected: <strong id="am-output-selected">–</strong></li>
+          </ul>
+        </ds-card>
+      </ds-grid>
+      <ds-grid>
+        <ds-action-menu
+          ds-button-text="Actions"
+          @dsOpen=${() => {
+        const el = document.getElementById('am-output-open');
+        if (el)
+            el.textContent = 'Yes';
+    }}
+          @dsClose=${() => {
+        const el = document.getElementById('am-output-open');
+        if (el)
+            el.textContent = 'No';
+    }}
+        >
+          <ds-action-list>
+            <ds-action-list-item
+              ds-variant="action"
+              ds-label="Edit"
+              ds-icon="edit"
+              @dsSelect=${(e) => {
+        const label = document.getElementById('am-output-label');
+        const variant = document.getElementById('am-output-variant');
+        const selected = document.getElementById('am-output-selected');
+        if (label)
+            label.textContent = e.detail.label;
+        if (variant)
+            variant.textContent = e.detail.variant;
+        if (selected)
+            selected.textContent = String(e.detail.selected);
+    }}
+            ></ds-action-list-item>
+            <ds-action-list-item
+              ds-variant="action-danger"
+              ds-label="Delete"
+              ds-icon="delete"
+              @dsSelect=${(e) => {
+        const label = document.getElementById('am-output-label');
+        const variant = document.getElementById('am-output-variant');
+        const selected = document.getElementById('am-output-selected');
+        if (label)
+            label.textContent = e.detail.label;
+        if (variant)
+            variant.textContent = e.detail.variant;
+        if (selected)
+            selected.textContent = String(e.detail.selected);
+    }}
+            ></ds-action-list-item>
+          </ds-action-list>
+          <ds-action-list-divider></ds-action-list-divider>
+          <ds-action-list>
+            <ds-action-list-item
+              ds-variant="multi-select"
+              ds-label="Student number"
+              ds-selected="true"
+              @dsSelect=${(e) => {
+        const label = document.getElementById('am-output-label');
+        const variant = document.getElementById('am-output-variant');
+        const selected = document.getElementById('am-output-selected');
+        if (label)
+            label.textContent = e.detail.label;
+        if (variant)
+            variant.textContent = e.detail.variant;
+        if (selected)
+            selected.textContent = String(e.detail.selected);
+    }}
+            ></ds-action-list-item>
+            <ds-action-list-item
+              ds-variant="single-select"
+              ds-label="Email"
+              ds-icon="mail"
+              ds-selected="true"
+              @dsSelect=${(e) => {
+        const label = document.getElementById('am-output-label');
+        const variant = document.getElementById('am-output-variant');
+        const selected = document.getElementById('am-output-selected');
+        if (label)
+            label.textContent = e.detail.label;
+        if (variant)
+            variant.textContent = e.detail.variant;
+        if (selected)
+            selected.textContent = String(e.detail.selected);
+    }}
+            ></ds-action-list-item>
+          </ds-action-list>
+        </ds-action-menu>
+      </ds-grid>
+    </ds-grid>
+  `,
+};

package/dist/collection/components/01-base-components/ds-assistive-text/ds-assistive-text.css

@@ -1,4 +1,4 @@
-.ds-assistive-text__m9sbXh {
+.ds-assistive-text__cpPWV0 {
   display: inline-block;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);

package/dist/collection/components/01-base-components/ds-backdrop/ds-backdrop.css

@@ -1,30 +1,30 @@
-.ds-backdrop__m9sbXh {
+.ds-backdrop__cpPWV0 {
   z-index: var(--ds-backdrop-z-index);
   max-width: 100vw;
   max-height: 100vh;
   max-height: 100dvh;
 }
-.ds-backdrop__m9sbXh::backdrop {
+.ds-backdrop__cpPWV0::backdrop {
   background-color: var(--ds-bgColor-transparent-onLight);
   transition: display var(--ds-backdrop-transition-out-duration) allow-discrete, overlay var(--ds-backdrop-transition-out-duration) allow-discrete, background-color var(--ds-backdrop-transition-out-duration) ease;
 }
 @starting-style {
-  .ds-backdrop__m9sbXh::backdrop {
+  .ds-backdrop__cpPWV0::backdrop {
     background-color: var(--ds-bgColor-transparent-onLight);
   }
 }
-.ds-backdrop__m9sbXh--in::backdrop {
+.ds-backdrop__cpPWV0--in::backdrop {
   transition: display var(--ds-backdrop-transition-in-duration) allow-discrete, overlay var(--ds-backdrop-transition-in-duration) allow-discrete, background-color var(--ds-backdrop-transition-in-duration) ease;
 }
-.ds-backdrop__m9sbXh--open::backdrop {
+.ds-backdrop__cpPWV0--open::backdrop {
   background-color: var(--ds-bgColor-backdrop);
 }
 @media (prefers-reduced-motion: reduce) {
-  .ds-backdrop__m9sbXh::backdrop {
+  .ds-backdrop__cpPWV0::backdrop {
     transition: none;
   }
 }
 
-html:has(.ds-modal__m9sbXh--open) {
+html:has(.ds-modal__cpPWV0--open) {
   overflow: hidden;
 }

package/dist/collection/components/01-base-components/ds-backdrop/stories/ds-backdrop.features.stories.js

@@ -0,0 +1,80 @@
+import { useArgs } from "@storybook/preview-api";
+import { html, render } from "lit";
+const meta = {
+    title: 'Base Components/Backdrop/Features',
+    component: 'ds-backdrop',
+};
+export default meta;
+export const Closeable = {
+    parameters: {
+        docs: {
+            source: {
+                code: `
+          <ds-backdrop>...</ds-backdrop>
+          <script>
+            const backdrop = document.querySelector('ds-backdrop');
+
+            backdrop.addEventListener('dsBackdropClose', () => {
+              backdrop.dsOpen = false;
+            });
+
+            backdrop.dsOpen = true;
+          </script>
+        `,
+            },
+            story: {
+                height: '10rem',
+            },
+        },
+    },
+    args: {
+        dsOpen: false,
+    },
+    render: args => {
+        const [, updateArgs] = useArgs();
+        let isOpen = args.dsOpen;
+        let isTransitioning = false;
+        const wrapper = document.createElement('div');
+        const renderContent = () => {
+            let text = 'Click on backdrop or press the "Esc" key to close the backdrop.';
+            if (isTransitioning) {
+                text = 'Closing the backdrop is disabled during transition...';
+            }
+            render(html `<style>
+            .ds-sb-backdrop-content {
+              position: relative;
+              display: inline-block;
+              background-color: var(--ds-palette-white);
+            }
+          </style>
+          <ds-button
+            ds-text="Show backdrop"
+            @click=${() => {
+                isTransitioning = true;
+                isOpen = true;
+                renderContent();
+            }}
+          ></ds-button>
+          <ds-backdrop
+            ds-open=${isOpen}
+            @dsTransition=${(event) => {
+                isTransitioning = event.detail.status === 'on';
+                if (!isTransitioning) {
+                    updateArgs({ dsOpen: isOpen });
+                }
+                renderContent();
+            }}
+            @dsBackdropClose=${() => {
+                if (isOpen) {
+                    isTransitioning = true;
+                }
+                isOpen = false;
+                renderContent();
+            }}
+            ><div class="ds-bodytext-lg ds-sb-backdrop-content"><span>${text}</span><br /></div
+          ></ds-backdrop>`, wrapper);
+        };
+        renderContent();
+        return wrapper;
+    },
+};

package/dist/collection/components/01-base-components/ds-backdrop/stories/ds-backdrop.stories.js

@@ -0,0 +1,133 @@
+import { useArgs } from "@storybook/preview-api";
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/Backdrop',
+    component: 'ds-backdrop',
+    parameters: {
+        docs: {
+            source: {
+                code: `<ds-backdrop ds-open="true/false">...</ds-backdrop>`,
+            },
+            story: {
+                height: '10rem',
+                inline: false,
+            },
+            description: {
+                component: `
+> **IMPORTANT**: The \`ds-backdrop\` component is meant to be used as a part of other components, such as \`ds-modal\`. When using it in isolation, stylize the \`<dialog>\` element using the \`dsDialogClasses\` property.
+
+Backdrop component for displaying an overlay behind content. It uses a \`<dialog>\` element internally and stylizes the \`::backdrop\` pseudo-element.`,
+            },
+        },
+    },
+    args: {
+        dsOpen: false,
+    },
+    render: (args) => {
+        const [, updateArgs] = useArgs();
+        return html `
+      <ds-button ds-text="Show backdrop" @click=${() => updateArgs({ dsOpen: true })}></ds-button>
+      <ds-backdrop ds-open=${args.dsOpen}
+        ><div class="ds-bodytext-lg" style="position: relative; display: block; background-color: #fff;">
+          <ds-button ds-text="Hide backdrop" @click=${() => updateArgs({ dsOpen: false })}></ds-button></div
+      ></ds-backdrop>
+    `;
+    },
+};
+export default meta;
+export const Default = {};
+export const Events = {
+    args: {
+        dsOpen: false,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `
+          <ul id="backdrop-output">
+            <li id="backdrop-output__status">
+              State: <span id="backdrop-output__status-text">open/closed</span>
+            </li>
+            <li id="backdrop-output__transition-status">
+              Transition status: <span id="backdrop-output__transition-status-text">off</span>
+            </li>
+            <li id="backdrop-output__transition-direction">
+              Transition direction: <span id="backdrop-output__transition-direction-text">-</span>
+            </li>
+          </ul>
+          <script>
+            document.addEventListener('dsTransition', (event: CustomEvent<DsBackdropTransitionEvent>) => {
+              const statusOutput = document.getElementById('backdrop-output__transition-status-text');
+              if (statusOutput) {
+                statusOutput.textContent = event.detail.status;
+              }
+              const directionOutput = document.getElementById('backdrop-output__transition-direction-text');
+              if (directionOutput) {
+                directionOutput.textContent = event.detail.direction;
+              }
+            });
+            document.addEventListener('dsBackdropClose', () => {
+              const backdrop = document.querySelector('ds-backdrop');
+              if (backdrop) {
+                backdrop.dsOpen = false;
+              }
+            });
+          </script>
+        `,
+            },
+        },
+    },
+    render: args => {
+        const [, updateArgs] = useArgs();
+        return html `
+      <ds-grid>
+        <ds-grid>
+          <ds-card
+            ds-link-type="none"
+            ds-heading="Events"
+            ds-description="Interact with the controls to observe the events it triggers. For implementation details, view 'Show code' in the Docs."
+          >
+            <ul slot="content" id="backdrop-output" class="ds-bodytext-sm ds-m-sm">
+              <li id="backdrop-output__status">State: <span id="backdrop-output__status-text">${args.dsOpen ? 'open' : 'closed'}</span></li>
+              <li id="backdrop-output__transition-status">Transition status: <span id="backdrop-output__transition-status-text">off</span></li>
+              <li id="backdrop-output__transition-direction">Transition direction: <span id="backdrop-output__transition-direction-text">-</span></li>
+            </ul>
+          </ds-card>
+        </ds-grid>
+        <ds-grid>
+          <ds-button
+            ds-value="Show backdrop"
+            @click=${() => {
+            updateArgs({ dsOpen: true });
+        }}
+          ></ds-button>
+        </ds-grid>
+        <ds-grid>
+          <ds-backdrop
+            ds-open=${args.dsOpen}
+            ds-transition-in-duration=${args.dsTransitionInDuration}
+            ds-transition-out-duration=${args.dsTransitionOutDuration}
+            @dsTransition=${(event) => {
+            const statusOutput = document.getElementById('backdrop-output__transition-status-text');
+            if (statusOutput) {
+                statusOutput.textContent = event.detail.status;
+            }
+            const directionOutput = document.getElementById('backdrop-output__transition-direction-text');
+            if (directionOutput) {
+                directionOutput.textContent = event.detail.direction;
+            }
+        }}
+            @dsBackdropClose=${() => {
+            updateArgs({ dsOpen: false });
+        }}
+          >
+            <div class="ds-bodytext-lg" style="position: relative; display: inline-block; background-color: #fff;">Backdrop content</div>
+          </ds-backdrop>
+        </ds-grid>
+      </ds-grid>
+    `;
+    },
+};
+export const Playground = {
+    tags: ['!autodocs'],
+};

package/dist/collection/components/01-base-components/ds-badge/ds-badge.css

@@ -1,4 +1,4 @@
-.ds-badge__m9sbXh {
+.ds-badge__cpPWV0 {
   display: flex;
   width: fit-content;
   min-width: 24px;
@@ -9,39 +9,39 @@
   gap: var(--ds-spacing-3xSmall, 4px);
   border-radius: 12px;
 }
-.ds-badge__m9sbXh--default {
+.ds-badge__cpPWV0--default {
   background-color: var(--ds-overlay-black-10);
   color: var(--ds-textColor-default);
 }
-.ds-badge__m9sbXh--success {
+.ds-badge__cpPWV0--success {
   background-color: var(--ds-bgColor-success);
   color: var(--ds-textColor-success);
 }
-.ds-badge__m9sbXh--attention {
+.ds-badge__cpPWV0--attention {
   background-color: var(--ds-bgColor-attention);
   color: var(--ds-textColor-attention);
 }
-.ds-badge__m9sbXh--danger {
+.ds-badge__cpPWV0--danger {
   background-color: var(--ds-bgColor-danger);
   color: var(--ds-textColor-danger);
 }
-.ds-badge__m9sbXh--info {
+.ds-badge__cpPWV0--info {
   background-color: var(--ds-bgColor-info);
   color: var(--ds-textColor-info);
 }
-.ds-badge__m9sbXh--notification {
+.ds-badge__cpPWV0--notification {
   background-color: var(--ds-palette-red-50);
   color: var(--ds-textColor-white);
 }
-.ds-badge__m9sbXh--primary {
+.ds-badge__cpPWV0--primary {
   background-color: var(--ds-bgColor-primary);
   color: var(--ds-textColor-white);
 }
-.ds-badge__m9sbXh--disabled {
+.ds-badge__cpPWV0--disabled {
   background-color: var(--ds-overlay-black-10);
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-badge__m9sbXh__content {
+.ds-badge__cpPWV0__content {
   display: flex;
   padding: 0 var(--ds-spacing-3xSmall, 4px);
   flex-direction: column;
@@ -49,6 +49,6 @@
   align-items: center;
   gap: var(--ds-spacing-2xSmall, 8px);
 }
-.ds-badge__m9sbXh__content__text {
+.ds-badge__cpPWV0__content__text {
   white-space: nowrap;
 }

package/dist/collection/components/01-base-components/ds-badge/stories/ds-badge.features.stories.js

@@ -0,0 +1,62 @@
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/Badge/Features',
+    component: 'ds-badge',
+    args: {
+        dsVariant: 'default',
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        dsText: '8',
+    },
+};
+export const Success = {
+    args: {
+        dsVariant: 'success',
+        dsText: '+53%',
+    },
+};
+export const Attention = {
+    args: {
+        dsVariant: 'attention',
+        dsText: '500+',
+    },
+};
+export const Danger = {
+    args: {
+        dsVariant: 'danger',
+        dsText: '500+',
+    },
+};
+export const Info = {
+    args: {
+        dsVariant: 'info',
+        dsText: '500+',
+    },
+};
+export const Notification = {
+    args: {
+        dsVariant: 'notification',
+        dsText: '15',
+    },
+};
+export const Primary = {
+    args: {
+        dsVariant: 'primary',
+        dsText: '15',
+    },
+};
+export const Disabled = {
+    args: {
+        dsVariant: 'disabled',
+        dsText: '8',
+    },
+};
+export const Slots = {
+    args: {
+        dsText: '',
+    },
+    render: args => html ` <ds-badge ds-variant="${args.dsVariant}"> Default slot </ds-badge> `,
+};