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

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

@@ -1,207 +0,0 @@
-import { html, render } from "lit";
-import { ifDefined } from "lit/directives/if-defined.js";
-const meta = {
-    title: 'Base Components/Datepicker',
-    component: 'ds-datepicker',
-    argTypes: {
-        dsVariant: {
-            control: 'select',
-            options: ['native', 'simple', 'custom'],
-        },
-        dsMin: {
-            control: 'text',
-            name: 'dsMin (YYYY-MM-DD)',
-        },
-        dsMax: {
-            control: 'text',
-            name: 'dsMax (YYYY-MM-DD)',
-        },
-        dsYearRangeStart: {
-            control: 'number',
-            name: 'dsYearRangeStart',
-        },
-        dsYearRangeEnd: {
-            control: 'number',
-            name: 'dsYearRangeEnd',
-        },
-        dsDisabledDates: {
-            control: 'object',
-            name: 'dsDisabledDates (YYYY-MM-DD[])',
-        },
-    },
-};
-export default meta;
-const renderDatepicker = (args) => {
-    const wrapper = document.createElement('div');
-    const renderContent = () => {
-        render(html `
-        <ds-datepicker
-          ds-label=${args.dsLabel}
-          ds-placeholder=${ifDefined(args.dsPlaceholder)}
-          ds-variant=${args.dsVariant}
-          ?ds-disabled=${args.dsDisabled}
-          ?ds-readonly=${args.dsReadonly}
-          ds-error-text=${ifDefined(args.dsErrorText)}
-          ds-assistive-text=${ifDefined(args.dsAssistiveText)}
-          ds-hidden-assistive-text=${ifDefined(args.dsHiddenAssistiveText)}
-          ds-value=${ifDefined(args.dsValue)}
-          ?ds-required=${args.dsRequired}
-          ?ds-optional=${args.dsOptional}
-          ds-optional-text=${ifDefined(args.dsOptionalText)}
-          ds-min=${ifDefined(args.dsMin)}
-          ds-max=${ifDefined(args.dsMax)}
-          ds-year-range-start=${ifDefined(args.dsYearRangeStart)}
-          ds-year-range-end=${ifDefined(args.dsYearRangeEnd)}
-          .dsDisabledDates=${args.dsDisabledDates}
-        >
-        </ds-datepicker>
-      `, wrapper);
-    };
-    renderContent();
-    return wrapper;
-};
-export const Default = {
-    args: {
-        dsLabel: 'Select a date',
-        dsVariant: 'custom',
-    },
-    render: args => renderDatepicker(args),
-};
-const renderEventsStory = (args) => html `
-  <style>
-    .ds-sb-datepicker {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      gap: var(--ds-spacing-sm, 16px);
-
-      @media (min-width: 75rem) {
-        flex-direction: row;
-      }
-    }
-    .ds-sb-datepicker-buttons {
-      display: flex;
-      margin-block-start: var(--ds-spacing-large, 32px);
-      margin-block-end: var(--ds-spacing-large, 32px);
-      gap: var(--ds-spacing-2xSmall, 8px);
-    }
-  </style>
-  <ds-grid>
-    <ds-grid>
-      <ds-card
-        ds-heading="Events"
-        ds-description="Use the datepicker and the other controls to observe the events it triggers. For implementation details, view 'Show code' in the Docs."
-      >
-        <ul slot="content" id="datepicker-output" class="ds-bodytext-sm ds-m-sm">
-          <li id="datepicker-output__selected-value">Selected value: <span id="datepicker-output__selected-value-text">None</span></li>
-          <li id="datepicker-output__is-focused">Datepicker has focus: <span id="datepicker-output__is-focused-text">No</span></li>
-          <li id="datepicker-output__validity">Datepicker is valid: <span id="datepicker-output__validity-text">No</span></li>
-        </ul>
-      </ds-card>
-    </ds-grid>
-    <ds-grid>
-      <form @submit=${(event) => event.preventDefault()}>
-        <div class="ds-sb-datepicker">
-          <ds-datepicker
-            ds-id=${args.dsId}
-            ds-label=${args.dsLabel}
-            ds-variant=${args.dsVariant}
-            ds-required=${args.dsRequired}
-            @dsChange=${(event) => {
-    const output = document.getElementById('datepicker-output__selected-value-text');
-    if (output) {
-        output.textContent = event.detail || 'None';
-    }
-    if (event.detail) {
-        const datepicker = document.getElementById(args.dsId)?.closest('ds-datepicker');
-        if (datepicker)
-            datepicker.dsValue = event.detail;
-    }
-}}
-            @dsBlur=${() => {
-    const output = document.getElementById('datepicker-output__is-focused-text');
-    if (output) {
-        output.textContent = 'No';
-    }
-}}
-            @dsFocus=${() => {
-    const output = document.getElementById('datepicker-output__is-focused-text');
-    if (output) {
-        output.textContent = 'Yes';
-    }
-}}
-            @dsValidity=${(event) => {
-    const output = document.getElementById('datepicker-output__validity-text');
-    if (output) {
-        output.textContent = event.detail.flag === 'valid' ? 'Yes' : `No, "${event.detail.message}"`;
-    }
-}}
-            @dsSubmitInvalid=${(event) => {
-    const output = document.getElementById('datepicker-output__validity-text');
-    if (output) {
-        output.textContent = `No, "${event.detail.message}"`;
-    }
-}}
-          >
-          </ds-datepicker>
-          <div class="ds-sb-datepicker-buttons">
-            <ds-button ds-value="Submit" ds-type="submit"></ds-button>
-          </div>
-        </div>
-      </form>
-    </ds-grid>
-  </ds-grid>
-`;
-export const Events = {
-    args: {
-        dsId: 'events-datepicker',
-        dsLabel: 'Select a date',
-        dsVariant: 'custom',
-        dsRequired: true,
-    },
-    render: args => renderEventsStory(args),
-};
-export const EventsNative = {
-    name: 'Events (Native)',
-    args: {
-        dsId: 'events-datepicker-native',
-        dsLabel: 'Select a date',
-        dsVariant: 'native',
-        dsRequired: true,
-    },
-    render: args => renderEventsStory(args),
-};
-export const EventsSimple = {
-    name: 'Events (Simple)',
-    args: {
-        dsId: 'events-datepicker-simple',
-        dsLabel: 'Select a date',
-        dsVariant: 'simple',
-        dsRequired: true,
-    },
-    render: args => renderEventsStory(args),
-};
-export const Playground = {
-    args: {
-        dsLabel: 'Playground',
-        dsPlaceholder: '',
-        dsId: 'playground-id',
-        dsName: 'playground-name',
-        dsVariant: 'custom',
-        dsDisabled: false,
-        dsReadonly: false,
-        dsErrorText: '',
-        dsAssistiveText: '',
-        dsHiddenAssistiveText: '',
-        dsValue: '',
-        dsRequired: false,
-        dsOptional: false,
-        dsOptionalText: '',
-        dsMin: '',
-        dsMax: '',
-        dsYearRangeStart: undefined,
-        dsYearRangeEnd: undefined,
-        dsDisabledDates: [],
-    },
-    render: args => renderDatepicker(args),
-};

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

@@ -1,55 +0,0 @@
-import { html, render } from "lit";
-import { debounce } from "../../../../utils/utils";
-import { FEEDBACK_RESET_TIMEOUT } from "../../../../constants";
-const meta = {
-    title: 'Base Components/Feedback/Examples',
-    component: 'ds-feedback',
-};
-export default meta;
-export const Combobox = {
-    args: {
-        errorText: '',
-    },
-    render: args => {
-        let showOptions = true;
-        let isLoading = false;
-        const wrapper = document.createElement('div');
-        const options = [
-            { value: 'option-1', label: 'Option 1' },
-            { value: 'option-2', label: 'Option 2' },
-            { value: 'option-3', label: 'Option 3' },
-        ];
-        const resetLoadingState = debounce((combobox) => {
-            if (!wrapper.isConnected)
-                return;
-            isLoading = false;
-            combobox.dsLoading = isLoading;
-            renderContent();
-        }, FEEDBACK_RESET_TIMEOUT);
-        const renderContent = () => {
-            render(html `
-          <ds-combobox
-            id="combobox"
-            ds-filtering-strategy="static"
-            ds-error-text=${args.errorText}
-            @dsFilterChange=${(e) => {
-                const combobox = document.querySelector('ds-combobox#combobox');
-                showOptions = !(e.detail === 'error' || e.detail === 'none');
-                isLoading = e.detail.length > 0 && showOptions;
-                combobox.dsLoading = isLoading;
-                combobox.dsOptionsError = e.detail === 'error';
-                combobox.dsNoResults = e.detail === 'none';
-                resetLoadingState(combobox);
-                renderContent();
-            }}
-          >
-            ${showOptions && !isLoading ? html ` ${options.map(option => html ` <ds-option ds-value=${option.value}>${option.label}</ds-option> `)} ` : ''}
-          </ds-combobox>
-          <p class="ds-bodytext-md">Search with "none" to return an empty set.</p>
-          <p class="ds-bodytext-md">Search with "error" to simulate an error.</p>
-        `, wrapper);
-        };
-        renderContent();
-        return wrapper;
-    },
-};

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

@@ -1,49 +0,0 @@
-import { html } from "lit";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-const meta = {
-    title: 'Base Components/Feedback',
-    component: 'ds-feedback',
-    argTypes: {
-        dsRole: {
-            control: 'select',
-            options: ['alert', 'status', undefined],
-        },
-        dsAriaLive: {
-            control: 'select',
-            options: ['assertive', 'polite', undefined],
-        },
-        dsAriaAtomic: {
-            control: 'select',
-            options: [true, false],
-        },
-    },
-    args: {
-        defaultSlot: `
-      <div class="ds-heading-xl">Hello, World!</div>
-      <p class="ds-bodytext-lg">This is a feedback message.</p>
-    `,
-        dsTag: 'div',
-        dsAriaLive: 'polite',
-        dsAriaAtomic: false,
-        dsRole: undefined,
-        dsSrOnly: false,
-        dsSrOnlyTag: 'div',
-    },
-    render: args => html `
-    <p class="ds-bodytext-lg">Renders a ARIA live region for accessible announcements.</p>
-    <ds-feedback
-      ds-tag=${ifDefined(args.dsTag)}
-      ds-role=${ifDefined(args.dsRole)}
-      ds-aria-live=${ifDefined(args.dsAriaLive)}
-      ds-aria-atomic=${ifDefined(args.dsAriaAtomic)}
-      ?ds-sr-only=${args.dsSrOnly}
-      ds-sr-only-tag=${ifDefined(args.dsSrOnlyTag)}
-    >
-      ${unsafeHTML(args.defaultSlot)}
-    </ds-feedback>
-  `,
-};
-export default meta;
-export const Default = {};
-export const Playground = {};

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

@@ -1,146 +0,0 @@
-import { html } from "lit";
-const meta = {
-    title: 'Base Components/Grid/Features',
-    component: 'ds-grid',
-    parameters: {
-        layout: 'fullscreen',
-    },
-};
-export default meta;
-const gridStyles = html `
-  <style>
-    .ds-sb-box {
-      background-color: var(--ds-palette-black-10);
-      padding: var(--ds-spacing-2xSmall);
-      position: relative;
-      width: 100%;
-      height: 100%;
-    }
-
-    ds-grid .ds-sb-box::after {
-      display: inline-block;
-      position: absolute;
-      top: 0%;
-      right: 0%;
-      transform: translate(50%, -50%);
-      width: var(--ds-spacing-large);
-      height: var(--ds-spacing-large);
-      text-align: center;
-      align-content: center;
-      background-color: var(--ds-bgColor-attention);
-      color: var(--ds-textColor-attention);
-      font-weight: var(--ds-fontWeight-bold);
-      border-radius: 50%;
-      box-shadow: 0px 1px 4px var(--ds-overlay-black-10);
-      counter-reset: variable var(--ds-size-mobile);
-      content: counter(variable);
-    }
-
-    @media (min-width: 480px) {
-      ds-grid .ds-sb-box::after {
-        counter-reset: variable var(--ds-size-tablet);
-        content: counter(variable);
-      }
-    }
-
-    @media (min-width: 1200px) {
-      ds-grid .ds-sb-box::after {
-        counter-reset: variable var(--ds-size-desktop);
-        content: counter(variable);
-      }
-    }
-  </style>
-`;
-export const TypeGrid = {
-    render: () => html `
-    ${gridStyles}
-    <ds-grid ds-type="grid" ds-container="true" ds-columns-mobile="2" ds-columns-tablet="4" ds-columns-desktop="12">
-      <ds-grid ds-type="grid" ds-size-mobile="-1" ds-size-tablet="-1" ds-size-desktop="-1">
-        <div class="ds-sb-box">ds-grid<br /><small>All breakpoints: -1</small></div>
-      </ds-grid>
-      <ds-grid ds-type="grid" ds-size-mobile="-1" ds-size-tablet="1" ds-size-desktop="3" ds-row-span-desktop="4">
-        <div class="ds-sb-box">
-          ds-grid<br /><small>Mobile: -1<br />Tablet: 1<br />Desktop: 3</small><br /><small>Row span: 4 (desktop)</small>
-        </div>
-      </ds-grid>
-      <ds-grid ds-type="grid" ds-size-mobile="-1" ds-size-tablet="2" ds-size-desktop="6">
-        <div class="ds-sb-box">
-          ds-grid<br /><small>Mobile: -1<br />Tablet: 2<br />Desktop: 6</small>
-        </div>
-      </ds-grid>
-      <ds-grid ds-type="grid" ds-size-mobile="-1" ds-size-tablet="1" ds-size-desktop="3">
-        <div class="ds-sb-box">
-          ds-grid<br /><small>Mobile: -1<br />Tablet: 1<br />Desktop: 3</small>
-        </div>
-      </ds-grid>
-      <ds-grid ds-type="grid" ds-size-mobile="1" ds-size-tablet="1" ds-size-desktop="1" ds-row-span-desktop="2">
-        <div class="ds-sb-box">
-          ds-grid<br /><small>Mobile: 1<br />Tablet: 1<br />Desktop: 1</small><br /><small>Row span: 2 (desktop)</small>
-        </div>
-      </ds-grid>
-      <ds-grid ds-type="grid" ds-size-mobile="1" ds-size-tablet="1" ds-size-desktop="1" ds-row-span-desktop="2">
-        <div class="ds-sb-box">
-          ds-grid<br /><small>Mobile: 1<br />Tablet: 1<br />Desktop: 1</small><br /><small>Row span: 2 (desktop)</small>
-        </div>
-      </ds-grid>
-      <ds-grid ds-type="grid" ds-size-mobile="1" ds-size-tablet="1" ds-size-desktop="1" ds-row-span-desktop="2">
-        <div class="ds-sb-box">
-          ds-grid<br /><small>Mobile: 1<br />Tablet: 1<br />Desktop: 1</small><br /><small>Row span: 2 (desktop)</small>
-        </div>
-      </ds-grid>
-      <ds-grid ds-type="grid" ds-size-mobile="1" ds-size-tablet="1" ds-size-desktop="3">
-        <div class="ds-sb-box">
-          ds-grid<br /><small>Mobile: 1<br />Tablet: 1<br />Desktop: 3</small>
-        </div>
-      </ds-grid>
-      <ds-grid ds-type="grid" ds-size-mobile="1" ds-size-tablet="2" ds-size-desktop="3">
-        <div class="ds-sb-box">
-          ds-grid<br /><small>Mobile: 1<br />Tablet: 2<br />Desktop: 3</small>
-        </div>
-      </ds-grid>
-      <ds-grid ds-type="grid" ds-size-mobile="1" ds-size-tablet="2" ds-size-desktop="6">
-        <div class="ds-sb-box">
-          ds-grid<br /><small>Mobile: 1<br />Tablet: 2<br />Desktop: 6</small>
-        </div>
-      </ds-grid>
-      <ds-grid ds-type="grid" ds-size-mobile="-1" ds-size-tablet="2" ds-size-desktop="6">
-        <div class="ds-sb-box">
-          ds-grid<br /><small>Mobile: -1<br />Tablet: 2<br />Desktop: 6</small>
-        </div>
-      </ds-grid>
-      <ds-grid ds-type="grid" ds-size-mobile="-1" ds-size-tablet="2" ds-size-desktop="3">
-        <div class="ds-sb-box">
-          ds-grid<br /><small>Mobile: -1<br />Tablet: 2<br />Desktop: 3</small>
-        </div>
-      </ds-grid>
-      <ds-grid ds-type="grid" ds-size-mobile="-1" ds-size-tablet="-1" ds-size-desktop="-1">
-        <div class="ds-sb-box">ds-grid<br /><small>All breakpoints: -1</small></div>
-      </ds-grid>
-    </ds-grid>
-  `,
-};
-export const CustomTagName = {
-    render: () => html `
-    ${gridStyles}
-    <custom-ds-grid ds-container="true">
-      <custom-ds-grid ds-size="8">
-        <div class="ds-sb-box">custom-ds-grid (Size 8)</div>
-      </custom-ds-grid>
-      <custom-ds-grid ds-size="4">
-        <div class="ds-sb-box">custom-ds-grid (Size 4)</div>
-      </custom-ds-grid>
-      <custom-ds-grid ds-size="4">
-        <div class="ds-sb-box">custom-ds-grid (Size 4)</div>
-      </custom-ds-grid>
-      <custom-ds-grid ds-size="8">
-        <div class="ds-sb-box">custom-ds-grid (Size 8)</div>
-      </custom-ds-grid>
-      <custom-ds-grid ds-size="6">
-        <div class="ds-sb-box">custom-ds-grid (Size 6)</div>
-      </custom-ds-grid>
-      <custom-ds-grid ds-size="6">
-        <div class="ds-sb-box">custom-ds-grid (Size 6)</div>
-      </custom-ds-grid>
-    </custom-ds-grid>
-  `,
-};

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

@@ -1,167 +0,0 @@
-import { html } from "lit";
-const gridStyles = html `
-  <style>
-    .ds-sb-box {
-      background-color: var(--ds-palette-black-10);
-      padding: var(--ds-spacing-2xSmall);
-      width: 100%;
-    }
-    ds-grid[ds-type='grid'] .ds-sb-box {
-      height: 100%;
-    }
-    .ds-sb-full-width {
-      width: 100%;
-    }
-  </style>
-`;
-const meta = {
-    title: 'Base Components/Grid',
-    component: 'ds-grid',
-    parameters: {
-        layout: 'fullscreen',
-    },
-    render: () => html `
-    ${gridStyles}
-    <ds-grid ds-container="true">
-      <div class="ds-sb-full-width">
-        <h2 class="ds-heading-lg">Fixed</h2>
-      </div>
-      <ds-grid ds-size="8">
-        <div class="ds-sb-box">Size 8</div>
-      </ds-grid>
-      <ds-grid ds-size="4">
-        <div class="ds-sb-box">Size 4</div>
-      </ds-grid>
-      <ds-grid ds-size="4">
-        <div class="ds-sb-box">Size 4</div>
-      </ds-grid>
-      <ds-grid ds-size="8">
-        <div class="ds-sb-box">Size 8</div>
-      </ds-grid>
-      <ds-grid ds-size="6">
-        <div class="ds-sb-box">Size 6</div>
-      </ds-grid>
-      <ds-grid ds-size="6">
-        <ds-grid ds-size="3">
-          <div class="ds-sb-box">Size 3</div>
-        </ds-grid>
-        <ds-grid ds-size="3">
-          <div class="ds-sb-box">Size 3</div>
-        </ds-grid>
-        <div class="ds-sb-box">Size 6</div>
-      </ds-grid>
-      <div class="ds-sb-full-width">
-        <h2 class="ds-heading-lg">Responsive</h2>
-      </div>
-      <ds-grid ds-size-mobile="4" ds-size-tablet="4" ds-size-desktop="4">
-        <div class="ds-sb-box">
-          <div>Mobile 4</div>
-          <div>Tablet 4</div>
-          <div>Desktop 4</div>
-        </div>
-      </ds-grid>
-      <ds-grid ds-size-mobile="4" ds-size-tablet="2" ds-size-desktop="8">
-        <div class="ds-sb-box">
-          <div>Mobile 4</div>
-          <div>Tablet 2</div>
-          <div>Desktop 8</div>
-        </div>
-      </ds-grid>
-      <ds-grid ds-size-mobile="4" ds-size-tablet="2" ds-size-desktop="8">
-        <div class="ds-sb-box">
-          <div>Mobile 4</div>
-          <div>Tablet 2</div>
-          <div>Desktop 8</div>
-        </div>
-      </ds-grid>
-      <ds-grid ds-size-mobile="4" ds-size-tablet="4" ds-size-desktop="4">
-        <div class="ds-sb-box">
-          <div>Mobile 4</div>
-          <div>Tablet 4</div>
-          <div>Desktop 4</div>
-        </div>
-      </ds-grid>
-      <ds-grid ds-size-mobile="4" ds-size-tablet="6" ds-size-desktop="6">
-        <div class="ds-sb-box">
-          <div>Mobile 4</div>
-          <div>Tablet 6</div>
-          <div>Desktop 6</div>
-        </div>
-      </ds-grid>
-      <ds-grid ds-size-mobile="4" ds-size-tablet="6" ds-size-desktop="6">
-        <ds-grid ds-size-mobile="4" ds-size-tablet="3" ds-size-desktop="3">
-          <div class="ds-sb-box">
-            <div>Mobile 4</div>
-            <div>Tablet 3</div>
-            <div>Desktop 3</div>
-          </div>
-        </ds-grid>
-        <ds-grid ds-size-mobile="4" ds-size-tablet="3" ds-size-desktop="3">
-          <div class="ds-sb-box">
-            <div>Mobile 4</div>
-            <div>Tablet 3</div>
-            <div>Desktop 3</div>
-          </div>
-        </ds-grid>
-        <div class="ds-sb-box">Size 6</div>
-      </ds-grid>
-    </ds-grid>
-  `,
-};
-export default meta;
-export const Default = {};
-export const Playground = {
-    args: {
-        dsType: 'flex',
-        dsContainer: true,
-        dsSize: 12,
-        dsSizeMobile: 4,
-        dsSizeTablet: 6,
-        dsSizeDesktop: 12,
-        dsColumnsMobile: 2,
-        dsColumnsTablet: 4,
-        dsColumnsDesktop: 12,
-        children: Array(12)
-            .fill(null)
-            .map(() => ({
-            dsSize: 12,
-            dsSizeMobile: 1,
-            dsSizeTablet: 1,
-            dsSizeDesktop: 1,
-            dsRowSpanMobile: 1,
-            dsRowSpanTablet: 1,
-            dsRowSpanDesktop: 1,
-        })),
-    },
-    render: args => html `
-    ${gridStyles}
-    <ds-grid
-      ds-type=${args.dsType}
-      ds-container=${args.dsContainer}
-      ds-size=${args.dsSize}
-      ds-size-mobile=${args.dsSizeMobile}
-      ds-size-tablet=${args.dsSizeTablet}
-      ds-size-desktop=${args.dsSizeDesktop}
-      ds-columns-mobile=${args.dsColumnsMobile}
-      ds-columns-tablet=${args.dsColumnsTablet}
-      ds-columns-desktop=${args.dsColumnsDesktop}
-    >
-      ${args.children.map(child => html `
-          <ds-grid
-            ds-type=${args.dsType}
-            ds-size=${child.dsSize}
-            ds-size-mobile=${child.dsSizeMobile}
-            ds-size-tablet=${child.dsSizeTablet}
-            ds-size-desktop=${child.dsSizeDesktop}
-            ds-row-span-mobile=${child.dsRowSpanMobile}
-            ds-row-span-tablet=${child.dsRowSpanTablet}
-            ds-row-span-desktop=${child.dsRowSpanDesktop}
-          >
-            <div class="ds-sb-box">
-              <small class="ds-text-regular-xs">Item</small>
-            </div>
-          </ds-grid>
-        `)}
-    </ds-grid>
-  `,
-};

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

@@ -1,32 +0,0 @@
-import { html } from "lit";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-const meta = {
-    title: 'Base Components/Labels/Group Label/Features',
-    component: 'ds-group-label',
-};
-export default meta;
-export const Empty = {
-    render: () => html `
-    <p>
-      When no content is provided (neither slots nor properties), the component renders as a hidden <code>div</code>. This behaviour is necessary to avoid flickering and an extra
-      rendering cycle for detecting a slots presence.
-    </p>
-    <ds-group-label></ds-group-label>
-    <p><em>Note: The component above is present but hidden due to having no content.</em></p>
-  `,
-};
-export const Slots = {
-    args: {
-        labelSlot: 'Label slot',
-        assistiveTextSlot: 'Assistive text slot',
-    },
-    render: args => html `
-    <ds-group-label>
-      <div slot="label">${unsafeHTML(args.labelSlot)}</div>
-      <ds-assistive-text slot="assistiveText" ds-id="slots-assistive-text">${unsafeHTML(args.assistiveTextSlot)}</ds-assistive-text>
-    </ds-group-label>
-  `,
-};
-export const CustomTagName = {
-    render: () => html ` <custom-ds-group-label ds-label="custom-ds-group-label" ds-assistive-text="custom-ds-group-assistive-text"></custom-ds-group-label> `,
-};