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

package/dist/collection/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.examples.stories.js

@@ -1,33 +0,0 @@
-import { html } from "lit";
-const renderRadio = (idx) => html `<ds-radio-button ds-value="${idx + 1}" ds-text="Value text ${idx + 1}"></ds-radio-button>`;
-const renderGroup = args => html `
-  <ds-radio-button-group ds-label="${args.dsLabel}" ds-assistive-text="${args.dsAssistiveText}" ds-direction="${args.dsDirection}">
-    ${Array.from(new Array(args.count)).map((_, i) => renderRadio(i))}
-  </ds-radio-button-group>
-`;
-const meta = {
-    title: 'Base Components/RadioButtonGroup/Examples',
-    component: 'ds-radio-button-group',
-    render: args => renderGroup(args),
-};
-export default meta;
-export const WithVariableRadioButtonsCount = {
-    args: {
-        dsLabel: 'Group label',
-        dsAssistiveText: 'Use storybook controls to change the count of radio buttons shown',
-        dsDirection: 'vertical',
-        count: 1,
-    },
-};
-export const SomeRadioButtonsDisabled = {
-    args: {
-        dsLabel: 'Group label',
-        dsDirection: 'vertical',
-    },
-    render: args => html ` <ds-radio-button-group ds-label="${args.dsLabel}" ds-assistive-text="${args.dsAssistiveText}" ds-direction="${args.dsDirection}">
-      <ds-radio-button ds-value="1" ds-text="Value text 1"></ds-radio-button>
-      <ds-radio-button ds-value="2" ds-text="Value text 2"></ds-radio-button>
-      <ds-radio-button ds-disabled="true" ds-value="3" ds-text="Value text 3"></ds-radio-button>
-      <ds-radio-button ds-value="4" ds-text="Value text 4"></ds-radio-button>
-    </ds-radio-button-group>`,
-};

package/dist/collection/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.features.stories.js

@@ -1,97 +0,0 @@
-import { html } from "lit";
-const meta = {
-    title: 'Base Components/RadioButtonGroup/Features',
-    component: 'ds-radio-button-group',
-    render: args => html `
-    <ds-radio-button-group
-      ds-label=${args.dsLabel}
-      ds-assistive-text=${args.dsAssistiveText}
-      ds-direction=${args.dsDirection}
-      ds-error-text=${args.dsErrorText}
-      ds-value=${args.dsValue}
-      ?ds-required=${args.dsRequired}
-    >
-      <ds-radio-button ds-value="1" ds-text="Value text 1"></ds-radio-button>
-      <ds-radio-button ds-value="2" ds-text="Value text 2"></ds-radio-button>
-      <ds-radio-button ds-value="3" ds-text="Value text 3"></ds-radio-button>
-      <ds-radio-button ds-value="4" ds-text="Value text 4"></ds-radio-button>
-    </ds-radio-button-group>
-  `,
-};
-export default meta;
-export const Vertical = {
-    args: {
-        dsLabel: 'Group label',
-        dsAssistiveText: 'Assistive text',
-        dsDirection: 'vertical',
-        dsRequired: false,
-    },
-};
-export const Horizontal = {
-    args: {
-        dsLabel: 'Group label',
-        dsAssistiveText: 'Assistive text',
-        dsDirection: 'horizontal',
-        dsRequired: false,
-    },
-};
-export const Invalid = {
-    args: {
-        dsLabel: 'Group label',
-        dsAssistiveText: 'Assistive text',
-        dsDirection: 'vertical',
-        dsErrorText: 'Error text',
-        dsRequired: false,
-    },
-};
-export const HorizontalInvalid = {
-    args: {
-        dsLabel: 'Group label',
-        dsAssistiveText: 'Assistive text',
-        dsDirection: 'horizontal',
-        dsErrorText: 'Error text',
-        dsRequired: false,
-    },
-};
-export const Required = {
-    args: {
-        dsLabel: 'Group label',
-        dsAssistiveText: 'Assistive text',
-        dsRequired: true,
-    },
-};
-export const WithDefaultValue = {
-    args: {
-        dsLabel: 'Group label',
-        dsAssistiveText: 'Assistive text',
-        dsDirection: 'horizontal',
-        dsValue: '2',
-        dsRequired: false,
-    },
-};
-export const Slots = {
-    render: () => html `
-    <ds-radio-button-group>
-      <ds-radio-button ds-value="1" ds-text="Default slot 1"></ds-radio-button>
-      <ds-radio-button ds-value="2" ds-text="Default slot 2"></ds-radio-button>
-      <ds-radio-button ds-value="3" ds-text="Default slot 3"></ds-radio-button>
-    </ds-radio-button-group>
-  `,
-};
-export const CustomTagName = {
-    render: args => html `
-    <custom-ds-radio-button-group
-      ds-label=${args.dsLabel}
-      ds-assistive-text=${args.dsAssistiveText}
-      ds-direction=${args.dsDirection}
-      ds-error-text=${args.dsErrorText}
-      ds-value=${args.dsValue}
-      ?ds-required=${args.dsRequired}
-    >
-      <custom-ds-radio-button ds-value="1" ds-text="Value text 1"></custom-ds-radio-button>
-      <custom-ds-radio-button ds-value="2" ds-text="Value text 2"></custom-ds-radio-button>
-      <custom-ds-radio-button ds-value="3" ds-text="Value text 3"></custom-ds-radio-button>
-      <custom-ds-radio-button ds-value="4" ds-text="Value text 4"></custom-ds-radio-button>
-    </custom-ds-radio-button-group>
-  `,
-};

package/dist/collection/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.stories.js

@@ -1,141 +0,0 @@
-import { expect, userEvent, waitFor } from "@storybook/test";
-import { html } from "lit";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { getEventsStoryStyles } from "../../../../utils/storybook/storybookUtils";
-import { getDsElem } from "../../../../utils/tests/testUtils";
-const meta = {
-    title: 'Base Components/RadioButtonGroup',
-    component: 'ds-radio-button-group',
-    render: args => html `
-    <ds-radio-button-group
-      ds-label=${args.dsLabel}
-      ds-assistive-text=${args.dsAssistiveText}
-      ds-direction=${args.dsDirection}
-      ds-value=${args.dsValue}
-      ds-error-text=${args.dsErrorText}
-      ?ds-required=${args.dsRequired}
-      ds-name=${args.dsName}
-      ds-form=${ifDefined(args.dsForm)}
-    >
-      <ds-radio-button ds-text="Value text 1"></ds-radio-button>
-      <ds-radio-button ds-text="Value text 2"></ds-radio-button>
-      <ds-radio-button ds-text="Value text 3"></ds-radio-button>
-      <ds-radio-button ds-text="Value text 4"></ds-radio-button>
-    </ds-radio-button-group>
-  `,
-};
-export default meta;
-export const Default = {
-    args: {
-        dsLabel: 'Group label',
-        dsAssistiveText: 'Assistive text',
-        dsRequired: false,
-    },
-    play: async ({ canvasElement, step }) => {
-        const dsElem = (await getDsElem(canvasElement, 'ds-radio-button-group'));
-        let radioButtons = [];
-        await waitFor(() => {
-            radioButtons = Array.from(dsElem.querySelectorAll('ds-radio-button'));
-            expect(radioButtons[0].querySelector('input')).not.toBeNull();
-        });
-        await step('Clicking radio button should select it', async () => {
-            userEvent.click(radioButtons[1].querySelector('input'));
-            await waitFor(() => {
-                expect(radioButtons[1].dsChecked).toBe(true);
-            });
-        });
-        await step('Clicking another button should select it and unselect previous selected item', async () => {
-            userEvent.click(radioButtons[0].querySelector('input'));
-            await waitFor(() => {
-                expect(radioButtons[1].dsChecked).toBe(false);
-                expect(radioButtons[0].dsChecked).toBe(true);
-            });
-        });
-        await step('Clicking body should remove focus from radio button', async () => {
-            userEvent.click(canvasElement);
-            await waitFor(() => {
-                expect(radioButtons[0].querySelector('input')).not.toHaveFocus();
-            });
-        });
-    },
-};
-export const Playground = {
-    args: {
-        dsLabel: 'Group label',
-        dsAssistiveText: '',
-        dsDirection: 'vertical',
-        dsErrorText: '',
-        dsValue: '',
-        dsRequired: false,
-        dsName: 'playground-name',
-    },
-};
-export const Events = {
-    args: {
-        dsId: 'events-radio-group',
-        dsLabel: 'Group label',
-        dsAssistiveText: 'Assistive text',
-        dsRequired: false,
-    },
-    render: args => html `
-    <style>
-      ${getEventsStoryStyles()}
-    </style>
-    <ds-grid>
-      <ds-grid>
-        <ds-card
-          ds-link-type="none"
-          ds-heading="Events"
-          ds-description="Use the radio button group to observe the events it triggers. Change events are emitted only on user interaction."
-        >
-          <ul slot="content" id="radio-group-output" class="ds-bodytext-sm ds-m-sm">
-            <li id="radio-group-output__value">Selected value: <span id="radio-group-output__value-text">None</span></li>
-            <li id="radio-group-output__programmatic">Programmatic value: <span id="radio-group-output__programmatic-text">None</span></li>
-          </ul>
-        </ds-card>
-      </ds-grid>
-      <ds-grid>
-        <div class="ds-sb-events">
-          <ds-radio-button-group
-            id=${args.dsId}
-            ds-label=${args.dsLabel}
-            ds-assistive-text=${args.dsAssistiveText}
-            ?ds-required=${args.dsRequired}
-            @dsChange=${(event) => {
-        const output = document.getElementById('radio-group-output__value-text');
-        if (output) {
-            output.textContent = event.detail.value || 'None';
-        }
-    }}
-          >
-            <ds-radio-button ds-value="value-1" ds-text="Value text 1"></ds-radio-button>
-            <ds-radio-button ds-value="value-2" ds-text="Value text 2"></ds-radio-button>
-            <ds-radio-button ds-value="value-3" ds-text="Value text 3"></ds-radio-button>
-          </ds-radio-button-group>
-          <div class="ds-sb-events-buttons">
-            <button
-              type="button"
-              class="ds-sb-events-button"
-              @click=${() => {
-        const group = document.getElementById(args.dsId);
-        if (!group)
-            return;
-        group.dsValue = group.dsValue === 'value-2' ? 'value-1' : 'value-2';
-        const valueOutput = document.getElementById('radio-group-output__value-text');
-        const output = document.getElementById('radio-group-output__programmatic-text');
-        if (valueOutput) {
-            valueOutput.textContent = group.dsValue || 'None';
-        }
-        if (output) {
-            output.textContent = group.dsValue || 'None';
-        }
-    }}
-            >
-              Programmatic select
-            </button>
-          </div>
-        </div>
-      </ds-grid>
-    </ds-grid>
-  `,
-};

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

@@ -1,89 +0,0 @@
-import { html } from "lit";
-import { appData } from "../../../..";
-import { convertToRibbonLinks } from "../../../../utils/ribbon/ribbonUtils";
-const { ribbon: ribbonData } = appData.v1;
-const meta = {
-    title: 'Base Components/Ribbon/Internationalization',
-    component: 'ds-ribbon',
-    parameters: {
-        docs: {
-            description: {
-                component: 'Ribbon component with internationalization support. Links and texts automatically adapt based on the language set in ds-store component. Default links are provided for University of Helsinki.',
-            },
-        },
-    },
-};
-export default meta;
-export const Finnish = {
-    render: () => html `
-    <ds-store ds-language="fi"></ds-store>
-    <ds-ribbon
-      ds-icon="${ribbonData.config.dsIcon}"
-      ds-site-name="${ribbonData.siteNames.fi}"
-      ds-sites-text="${ribbonData.uiTexts.sites.fi}"
-      ds-close-text="${ribbonData.uiTexts.close.fi}"
-      ds-nav-aria-label="${ribbonData.uiTexts.navigationLabel.fi}"
-      ds-logo-aria-label="${ribbonData.uiTexts.logoLabel.fi}"
-      .dsLinks="${convertToRibbonLinks(ribbonData.links.fi, ribbonData, 'fi')}"
-      .dsBrandingUrls="${ribbonData.brandingUrls}"
-    ></ds-ribbon>
-  `,
-};
-export const Swedish = {
-    render: () => html `
-    <ds-store ds-language="sv"></ds-store>
-    <ds-ribbon
-      ds-icon="${ribbonData.config.dsIcon}"
-      ds-site-name="${ribbonData.siteNames.sv}"
-      ds-sites-text="${ribbonData.uiTexts.sites.sv}"
-      ds-close-text="${ribbonData.uiTexts.close.sv}"
-      ds-nav-aria-label="${ribbonData.uiTexts.navigationLabel.sv}"
-      ds-logo-aria-label="${ribbonData.uiTexts.logoLabel.sv}"
-      .dsLinks="${convertToRibbonLinks(ribbonData.links.sv, ribbonData, 'sv')}"
-      .dsBrandingUrls="${ribbonData.brandingUrls}"
-    ></ds-ribbon>
-  `,
-};
-export const English = {
-    render: () => html `
-    <ds-store ds-language="en"></ds-store>
-    <ds-ribbon
-      ds-icon="${ribbonData.config.dsIcon}"
-      ds-site-name="${ribbonData.siteNames.en}"
-      ds-sites-text="${ribbonData.uiTexts.sites.en}"
-      ds-close-text="${ribbonData.uiTexts.close.en}"
-      ds-nav-aria-label="${ribbonData.uiTexts.navigationLabel.en}"
-      ds-logo-aria-label="${ribbonData.uiTexts.logoLabel.en}"
-      .dsLinks="${convertToRibbonLinks(ribbonData.links.en, ribbonData, 'en')}"
-      .dsBrandingUrls="${ribbonData.brandingUrls}"
-    ></ds-ribbon>
-  `,
-};
-export const LanguageSwitcher = {
-    args: {
-        language: 'fi',
-    },
-    argTypes: {
-        language: {
-            control: 'select',
-            options: ['fi', 'sv', 'en'],
-            description: 'Select language to see the ribbon content change',
-        },
-    },
-    render: args => {
-        const lang = args.language;
-        return html `
-      <ds-store ds-language="${lang}"></ds-store>
-      <ds-ribbon
-        ds-icon="${ribbonData.config.dsIcon}"
-        ds-site-name="${ribbonData.siteNames[lang]}"
-        ds-sites-text="${ribbonData.uiTexts.sites[lang]}"
-        ds-close-text="${ribbonData.uiTexts.close[lang]}"
-        ds-nav-aria-label="${ribbonData.uiTexts.navigationLabel[lang]}"
-        ds-logo-aria-label="${ribbonData.uiTexts.logoLabel[lang]}"
-        .dsLinks="${convertToRibbonLinks(ribbonData.links[lang], ribbonData, lang)}"
-        .dsBrandingUrls="${ribbonData.brandingUrls}"
-      ></ds-ribbon>
-    `;
-    },
-};

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

@@ -1,139 +0,0 @@
-import { html } from "lit";
-import { appData } from "../../../..";
-import { convertToRibbonLinks } from "../../../../utils/ribbon/ribbonUtils";
-const { ribbon: ribbonData } = appData.v1;
-const meta = {
-    title: 'Base Components/Ribbon',
-    component: 'ds-ribbon',
-    parameters: {
-        docs: {
-            description: {
-                component: 'Navigation ribbon that appears at the top of the site as a banner. Shows logo and site name on the left, navigation links that adapt based on screen size. Links and texts are automatically translated based on the current language. **Note: This component renders as a <nav> element and can be placed inside a <header> element in your application.**',
-            },
-        },
-    },
-};
-export default meta;
-export const Default = {
-    args: {
-        ...ribbonData.config,
-        dsSiteName: ribbonData.siteNames.en,
-        dsLinks: convertToRibbonLinks(ribbonData.links.en, ribbonData),
-        dsBrandingUrls: ribbonData.brandingUrls,
-        dsMobileToggleText: ribbonData.uiTexts.sites.en,
-        dsCloseButtonText: ribbonData.uiTexts.close.en,
-        dsNavAriaLabel: ribbonData.uiTexts.navigationLabel.en,
-        dsLogoAriaLabel: ribbonData.uiTexts.logoLabel.en,
-    },
-    render: args => html `
-    <ds-ribbon
-      ds-icon="${args.dsIcon}"
-      ds-site-name="${args.dsSiteName}"
-      ds-mobile-toggle-text="${args.dsMobileToggleText}"
-      ds-close-button-text="${args.dsCloseButtonText}"
-      ds-nav-aria-label="${args.dsNavAriaLabel}"
-      ds-logo-aria-label="${args.dsLogoAriaLabel}"
-      .dsLinks="${args.dsLinks}"
-      .dsBrandingUrls="${args.dsBrandingUrls}"
-    ></ds-ribbon>
-  `,
-};
-export const WithoutBranding = {
-    args: {
-        ...ribbonData.config,
-        dsSiteName: ribbonData.siteNames.en,
-        dsHideBranding: true,
-        dsLinks: convertToRibbonLinks(ribbonData.links.en, ribbonData),
-        dsBrandingUrls: ribbonData.brandingUrls,
-        dsMobileToggleText: ribbonData.uiTexts.sites.en,
-        dsCloseButtonText: ribbonData.uiTexts.close.en,
-        dsNavAriaLabel: ribbonData.uiTexts.navigationLabel.en,
-        dsLogoAriaLabel: ribbonData.uiTexts.logoLabel.en,
-    },
-    render: args => html `
-    <ds-ribbon
-      ds-icon="${args.dsIcon}"
-      ds-site-name="${args.dsSiteName}"
-      ds-mobile-toggle-text="${args.dsMobileToggleText}"
-      ds-close-button-text="${args.dsCloseButtonText}"
-      ds-nav-aria-label="${args.dsNavAriaLabel}"
-      ds-logo-aria-label="${args.dsLogoAriaLabel}"
-      ?ds-hide-branding="${args.dsHideBranding}"
-      .dsLinks="${args.dsLinks}"
-      .dsBrandingUrls="${args.dsBrandingUrls}"
-    ></ds-ribbon>
-  `,
-};
-export const CustomTagName = {
-    args: {
-        ...ribbonData.config,
-        dsSiteName: ribbonData.siteNames.en,
-        dsLinks: convertToRibbonLinks(ribbonData.links.en, ribbonData),
-        dsBrandingUrls: ribbonData.brandingUrls,
-        dsMobileToggleText: ribbonData.uiTexts.sites.en,
-        dsCloseButtonText: ribbonData.uiTexts.close.en,
-        dsNavAriaLabel: ribbonData.uiTexts.navigationLabel.en,
-        dsLogoAriaLabel: ribbonData.uiTexts.logoLabel.en,
-    },
-    render: args => html `
-    <custom-ds-ribbon
-      ds-icon="${args.dsIcon}"
-      ds-site-name="${args.dsSiteName}"
-      ds-mobile-toggle-text="${args.dsMobileToggleText}"
-      ds-close-button-text="${args.dsCloseButtonText}"
-      ds-nav-aria-label="${args.dsNavAriaLabel}"
-      ds-logo-aria-label="${args.dsLogoAriaLabel}"
-      .dsLinks="${args.dsLinks}"
-      .dsBrandingUrls="${args.dsBrandingUrls}"
-    ></custom-ds-ribbon>
-  `,
-};
-export const WithExternalData = {
-    args: {
-        dsDataUrl: 'https://cdn.jsdelivr.net/npm/@uh-design-system/component-library@1.1.0/dist/data.json',
-    },
-    argTypes: {
-        dsDataUrl: { control: 'text' },
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Ribbon component that fetches data from an external JSON file using the dsDataUrl property. You can change the URL in the controls to test with different data sources.',
-            },
-        },
-    },
-    render: args => html ` <ds-ribbon ds-data-url="${args.dsDataUrl}"></ds-ribbon> `,
-};
-export const Playground = {
-    args: {
-        ...ribbonData.config,
-        dsSiteName: ribbonData.siteNames.en,
-        dsLinks: convertToRibbonLinks(ribbonData.links.en, ribbonData),
-        dsMobileToggleText: ribbonData.uiTexts.sites.en,
-        dsCloseButtonText: ribbonData.uiTexts.close.en,
-        dsNavAriaLabel: ribbonData.uiTexts.navigationLabel.en,
-        dsLogoAriaLabel: ribbonData.uiTexts.logoLabel.en,
-    },
-    argTypes: {
-        dsIcon: { control: 'text' },
-        dsSiteName: { control: 'text' },
-        dsHideBranding: { control: 'boolean' },
-        dsLinks: { control: 'object' },
-        dsMobileToggleText: { control: 'text' },
-        dsCloseButtonText: { control: 'text' },
-        dsNavAriaLabel: { control: 'text' },
-        dsLogoAriaLabel: { control: 'text' },
-    },
-    render: args => html `
-    <ds-ribbon
-      ds-icon="${args.dsIcon}"
-      ds-site-name="${args.dsSiteName}"
-      ds-mobile-toggle-text="${args.dsMobileToggleText}"
-      ds-close-button-text="${args.dsCloseButtonText}"
-      ds-nav-aria-label="${args.dsNavAriaLabel}"
-      ds-logo-aria-label="${args.dsLogoAriaLabel}"
-      ?ds-hide-branding="${args.dsHideBranding}"
-      .dsLinks="${args.dsLinks}"
-    ></ds-ribbon>
-  `,
-};

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

@@ -1,138 +0,0 @@
-import { useArgs } from "@storybook/preview-api";
-import { html } from "lit";
-import { ref, createRef } from "lit/directives/ref.js";
-const meta = {
-    title: 'Base Components/Select/Examples',
-    component: 'ds-select',
-};
-export default meta;
-const options = [
-    { value: 'cat', label: 'Cat' },
-    { value: 'wildcat', label: 'Wildcat' },
-    { value: 'bobcat', label: 'Bobcat' },
-    { value: 'catfish', label: 'Catfish' },
-    { value: 'housecat', label: 'Housecat' },
-];
-const optionsMap = new Map(options.map(option => [option.value, option.label]));
-const findClosestFocusableChipValue = (removedValue, dsValue) => {
-    if (typeof dsValue === 'string' || dsValue.length === 0) {
-        return undefined;
-    }
-    const removedIndex = options.findIndex(option => option.value === removedValue);
-    for (let i = removedIndex - 1; i >= 0; i--) {
-        if (dsValue.includes(options[i].value)) {
-            return options[i].value;
-        }
-    }
-    for (let i = removedIndex + 1; i < options.length; i++) {
-        if (dsValue.includes(options[i].value)) {
-            return options[i].value;
-        }
-    }
-    return undefined;
-};
-let prevValueCount = 0;
-let wasLastChipClick = false;
-let wasClearSelectionsClick = false;
-let closestFocusableChipValue;
-const allSelectionsClearedRef = createRef();
-const chipGroupRef = createRef();
-const renderOptions = () => options.map(option => html `<ds-option ds-variant="multiple" ds-value=${option.value}>${option.label}</ds-option>`);
-const renderChips = (dsValue) => {
-    if (typeof dsValue === 'string') {
-        return null;
-    }
-    return dsValue.map(value => html `<ds-chip key=${value} role="listitem" ds-variant="removable" ds-value=${value}>${optionsMap.get(value)}</ds-chip>`);
-};
-const renderSelect = () => {
-    const [{ dsValue }, updateArgs] = useArgs();
-    const showClearedMessage = prevValueCount > 0 && (dsValue === '' || dsValue.length === 0);
-    if (showClearedMessage && allSelectionsClearedRef.value && (wasLastChipClick || wasClearSelectionsClick)) {
-        setTimeout(() => {
-            allSelectionsClearedRef.value.classList.remove('ds-sb-hidden');
-            allSelectionsClearedRef.value.classList.add('ds-sb-focusable-paragraph');
-            allSelectionsClearedRef.value?.focus();
-            wasLastChipClick = false;
-            wasClearSelectionsClick = false;
-        }, 0);
-    }
-    if (closestFocusableChipValue && chipGroupRef.value && !showClearedMessage) {
-        setTimeout(() => {
-            chipGroupRef.value?.querySelector(`ds-chip[ds-value="${closestFocusableChipValue}"]`)?.setFocus();
-            closestFocusableChipValue = undefined;
-        }, 0);
-    }
-    return html `
-    <style>
-      .ds-sb-hidden {
-        display: none;
-      }
-      .ds-sb-focusable-paragraph:focus {
-        display: inline;
-        outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
-        outline-offset: var(--ds-borderWidth-thin);
-      }
-    </style>
-    <ds-select
-      ds-label="Multiple select with chips"
-      ds-placeholder="Select one or more options"
-      ds-variant="multiple"
-      .dsValue=${dsValue}
-      @dsMultipleChange=${(event) => {
-        prevValueCount = dsValue?.length || 0;
-        updateArgs({ dsValue: event.detail.values });
-    }}
-    >
-      ${renderOptions()}
-    </ds-select>
-    ${dsValue?.length
-        ? html `<div style="display: flex; align-items: flex-start; flex-direction: column; gap: var(--ds-spacing-md);">
-          <ds-chip-group
-            ${ref(chipGroupRef)}
-            ds-aria-label="Selected options"
-            @dsChipClick=${(event) => {
-            const value = event.detail;
-            const newValue = dsValue.filter(v => v !== value);
-            prevValueCount = dsValue?.length || 0;
-            wasLastChipClick = prevValueCount === 1;
-            if (newValue.length > 0) {
-                closestFocusableChipValue = findClosestFocusableChipValue(value, dsValue);
-            }
-            updateArgs({ dsValue: newValue.length ? newValue : '' });
-        }}
-          >
-            ${renderChips(dsValue)}
-          </ds-chip-group>
-          <ds-button
-            ds-icon="delete"
-            ds-variant="supplementary"
-            ds-text="Clear selections"
-            @click=${() => {
-            wasClearSelectionsClick = true;
-            updateArgs({ dsValue: '' });
-        }}
-          ></ds-button>
-        </div>`
-        : null}
-    <div class="ds-mt-sm">
-      <p
-        ${ref(allSelectionsClearedRef)}
-        tabindex="0"
-        class="ds-sb-hidden"
-        @focusout=${() => {
-        allSelectionsClearedRef.value?.classList.remove('ds-sb-focusable-paragraph');
-        allSelectionsClearedRef.value?.classList.add('ds-sb-hidden');
-    }}
-      >
-        All selections have been cleared. Set focus to a meaningful target.<br />
-        This could be for instance a heading, another interactive element, or the select component.
-      </p>
-    </div>
-  `;
-};
-export const MultipleWithChips = {
-    args: {
-        dsValue: '',
-    },
-    render: renderSelect,
-};