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

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

@@ -1,301 +0,0 @@
-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-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-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-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-backdrop/stories/ds-backdrop.features.stories.js

@@ -1,80 +0,0 @@
-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

@@ -1,133 +0,0 @@
-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/stories/ds-badge.features.stories.js

@@ -1,62 +0,0 @@
-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> `,
-};

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

@@ -1,11 +0,0 @@
-const meta = {
-    title: 'Base Components/Badge',
-    component: 'ds-badge',
-    args: {
-        dsText: '8',
-        dsVariant: 'default',
-    },
-};
-export default meta;
-export const Default = {};
-export const Playground = {};

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

@@ -1,67 +0,0 @@
-import { html } from "lit";
-import { icons } from "../../../../00-foundations/icons/iconList";
-const meta = {
-    title: 'Base Components/Breadcrumbs/Breadcrumb/Features',
-    component: 'ds-breadcrumb',
-    argTypes: {
-        dsSeparatorIcon: {
-            control: 'select',
-            options: icons.map(icon => icon.name).sort(),
-        },
-    },
-    args: {
-        dsText: 'Breadcrumb',
-        dsIsCurrentPage: false,
-        dsHasSeparator: true,
-        dsIsHidden: false,
-    },
-};
-export default meta;
-export const CurrentPage = {
-    args: {
-        dsIsCurrentPage: true,
-    },
-    decorators: [story => html `<div role="list">${story()}</div>`],
-};
-export const NoSeparator = {
-    args: {
-        dsHasSeparator: false,
-    },
-    decorators: [story => html `<div role="list">${story()}</div>`],
-};
-export const SeparatorIcon = {
-    args: {
-        dsSeparatorIcon: 'home',
-    },
-    decorators: [story => html `<div role="list">${story()}</div>`],
-};
-export const Hidden = {
-    args: {
-        dsIsHidden: true,
-    },
-    decorators: [story => html `<div role="list">${story()}</div>`],
-};
-export const CustomLink = {
-    render: () => html `
-    <p class="ds-bodytext-lg">Use the default slot to provide a custom link element, such as a React Router <code>&lt;Link&gt;</code>, inside the breadcrumb.</p>
-    <div role="list">
-      <ds-breadcrumb>
-        <ds-link ds-href="#custom-link" ds-text="Custom Link"></ds-link>
-      </ds-breadcrumb>
-    </div>
-  `,
-};
-export const Slots = {
-    render: () => html `
-    <div role="list">
-      <ds-breadcrumb><span>Default slot</span></ds-breadcrumb>
-    </div>
-  `,
-};
-export const CustomTagName = {
-    render: () => html `
-    <div role="list">
-      <custom-ds-breadcrumb ds-text="Breadcrumb"></custom-ds-breadcrumb>
-    </div>
-  `,
-};

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

@@ -1,24 +0,0 @@
-import { html } from "lit";
-import { icons } from "../../../../00-foundations/icons/iconList";
-const meta = {
-    title: 'Base Components/Breadcrumbs/Breadcrumb',
-    component: 'ds-breadcrumb',
-    argTypes: {
-        dsSeparatorIcon: {
-            control: 'select',
-            options: icons.map(icon => icon.name).sort(),
-        },
-    },
-    args: {
-        dsText: 'Breadcrumb',
-        dsIsCurrentPage: false,
-        dsHasSeparator: true,
-        dsSeparatorIcon: 'chevron_forward',
-        dsIsHidden: false,
-        dsHref: '',
-    },
-    decorators: [story => html `<div role="list">${story()}</div>`],
-};
-export default meta;
-export const Default = {};
-export const Playground = {};