@uh-design-system/component-library 0.5.1 → 0.5.3

package/dist/styles/mixins/tokens/_semantic-colours.scss

@@ -0,0 +1,75 @@
+// src/components/00-foundations/colours/_semantic_colours.scss
+
+// Text colours
+$dsTextColorDefault: var(--ds-palette-black-95);
+$dsTextColorPrimary: var(--ds-palette-mainBlue-70);
+$dsTextColorSecondary: var(--ds-palette-black-70);
+$dsTextColorWhite: var(--ds-palette-white);
+$dsTextColorDanger: var(--ds-palette-red-70);
+$dsTextColorSuccess: var(--ds-palette-green-70);
+$dsTextColorDisabledOnLight: var(--ds-palette-black-40);
+$dsTextColorDisabledOnDark: var(--ds-overlay-white-40);
+$dsTextColorLink: var(--ds-palette-mainBlue-70);
+$dsTextColorLinkHover: var(--ds-palette-mainBlue-80);
+$dsTextColorLinkActive: var(--ds-palette-mainBlue-90);
+$dsTextColorLinkVisited: #551a8b; // ? Should be added to _colours.scss
+$dsTextColorLinkStandalone: var(--ds-palette-black-70);
+$dsTextColorLinkStandaloneHover: var(--ds-palette-black-80);
+$dsTextColorLinkStandaloneActive: var(--ds-palette-black-95);
+$dsTextColorLinkStandaloneFocus: var(--ds-palette-black-70);
+$dsTextColorInfo: var(--ds-palette-blue-70);
+$dsTextColorAttention: var(--ds-palette-yellow-70);
+
+// Background colours
+$dsBgColorPrimary: var(--ds-palette-mainBlue-70);
+$dsBgColorPrimaryHover: var(--ds-palette-mainBlue-80);
+$dsBgColorPrimaryActive: var(--ds-palette-mainBlue-90);
+$dsBgColorSecondary: var(--ds-palette-white);
+$dsBgColorSecondaryHover: var(--ds-palette-mainBlue-05);
+$dsBgColorSecondaryActive: var(--ds-palette-mainBlue-10);
+$dsBgColorWhite: var(--ds-palette-white);
+$dsBgColorWhiteHover: var(--ds-palette-black-10);
+$dsBgColorWhiteActive: var(--ds-palette-black-20);
+$dsBgColorBlack: var(--ds-palette-black-95);
+$dsBgColorBlackHover: var(--ds-palette-black-80);
+$dsBgColorBlackActive: var(--ds-palette-white-70);
+$dsBgColorDanger: var(--ds-palette-red-05);
+$dsBgColorDangerHover: var(--ds-palette-red-10);
+$dsBgColorDangerActive: var(--ds-palette-red-20);
+$dsBgColorSuccess: var(--ds-palette-green-05);
+$dsBgColorSuccessHover: var(--ds-palette-green-10);
+$dsBgColorSuccessActive: var(--ds-palette-green-20);
+$dsBgColorTransparentOnLight: var(--ds-overlay-black-00);
+$dsBgColorTransparentOnLightHover: var(--ds-overlay-black-10);
+$dsBgColorTransparentOnLightActive: var(--ds-overlay-black-15);
+$dsBgColorTransparentOnDark: var(--ds-overlay-white-00);
+$dsBgColorTransparentOnDarkHover: var(--ds-overlay-white-30);
+$dsBgColorTransparentOnDarkActive: var(--ds-overlay-white-40);
+$dsBgColorDisabledOnLight: var(--ds-overlay-black-10);
+$dsBgColorDisabledOnDark: var(--ds-overlay-white-10);
+$dsBgColorInfo: var(--ds-palette-blue-05);
+$dsBgColorInfoHover: var(--ds-palette-blue-10);
+$dsBgColorInfoActive: var(--ds-palette-blue-20);
+$dsBgColorNeutral: var(--ds-palette-black-05);
+$dsBgColorNeutralHover: var(--ds-palette-black-10);
+$dsBgColorNeutralActive: var(--ds-palette-black-20);
+$dsBgColorNeutralLight: var(--ds-palette-black-03);
+$dsBgColorNeutralLightHover: var(--ds-palette-black-05);
+$dsBgColorNeutralLightActive: var(--ds-palette-black-10);
+$dsBgColorAttention: var(--ds-palette-yellow-05);
+$dsBgColorAttentionHover: var(--ds-palette-yellow-10);
+$dsBgColorAttentionActive: var(--ds-palette-yellow-20);
+
+// Border colours
+$dsBorderColorDefault: var(--ds-palette-black-50);
+$dsBorderColorPrimary: var(--ds-palette-mainBlue-70);
+$dsBorderColorBlack: var(--ds-palette-black-95);
+$dsBorderColorWhite: var(--ds-palette-white);
+$dsBorderColorDanger: var(--ds-palette-red-50);
+$dsBorderColorSuccess: var(--ds-palette-green-50);
+$dsBorderColorTransparent: var(--ds-overlay-black-00);
+$dsBorderColorDisabledOnLight: var(--ds-overlay-black-15);
+$dsBorderColorDisabledOnDark: var(--ds-overlay-white-15);
+$dsBorderColorLight: var(--ds-palette-black-20);
+$dsBorderColorInfo: var(--ds-palette-blue-50);
+$dsBorderColorAttention: var(--ds-palette-yellow-50);

package/dist/styles/mixins.scss

@@ -0,0 +1,10 @@
+// This file is used to import all mixins and make them available for use
+// in other SCSS files independently.
+//
+// This file will be copied to the dist folder in the build process.
+//
+// See the build script in stencil.config.ts for more details.
+
+@forward 'mixins/breakpoints';
+@forward 'mixins/focus';
+@forward 'mixins/wrapper';

package/dist/styles/variables.css

@@ -0,0 +1,168 @@
+:root {
+  --ds-borderWidth-none: 0px;
+  --ds-borderWidth-hairline: 1px;
+  --ds-borderWidth-thin: 2px;
+  --ds-borderWidth-thick: 4px;
+  --ds-borderWidth-xThick: 8px;
+  --ds-borderRadius-none: 0px;
+}
+
+:root {
+  --ds-breakpoint-xSmall: 20rem;
+  --ds-breakpoint-small: 30rem;
+  --ds-breakpoint-medium: 60rem;
+  --ds-breakpoint-large: 75rem;
+  --ds-breakpoint-xLarge: 90rem;
+}
+
+:root {
+  --ds-overlay-black-00: rgb(0 0 0 / 0);
+  --ds-overlay-black-05: rgb(0 0 0 / 0.05);
+  --ds-overlay-black-10: rgb(0 0 0 / 0.1);
+  --ds-overlay-black-15: rgb(0 0 0 / 0.15);
+  --ds-overlay-black-30: rgb(0 0 0 / 0.3);
+  --ds-overlay-black-40: rgb(0 0 0 / 0.4);
+  --ds-overlay-black-50: rgb(0 0 0 / 0.5);
+  --ds-overlay-black-70: rgb(0 0 0 / 0.7);
+  --ds-overlay-black-80: rgb(0 0 0 / 0.8);
+  --ds-overlay-white-00: rgb(255 255 255 / 0);
+  --ds-overlay-white-05: rgb(255 255 255 / 0.05);
+  --ds-overlay-white-10: rgb(255 255 255 / 0.1);
+  --ds-overlay-white-15: rgb(255 255 255 / 0.15);
+  --ds-overlay-white-30: rgb(255 255 255 / 0.3);
+  --ds-overlay-white-40: rgb(255 255 255 / 0.4);
+  --ds-overlay-white-50: rgb(255 255 255 / 0.5);
+  --ds-overlay-white-70: rgb(255 255 255 / 0.7);
+  --ds-overlay-white-80: rgb(255 255 255 / 0.8);
+  --ds-palette-black: #000000;
+  --ds-palette-white: #ffffff;
+  --ds-palette-black-03: #f7f7f7;
+  --ds-palette-black-05: #f2f2f2;
+  --ds-palette-black-10: #e6e6e6;
+  --ds-palette-black-20: #cccccc;
+  --ds-palette-black-30: #b3b3b3;
+  --ds-palette-black-40: #999999;
+  --ds-palette-black-50: #808080;
+  --ds-palette-black-60: #666666;
+  --ds-palette-black-70: #4d4d4d;
+  --ds-palette-black-80: #333333;
+  --ds-palette-black-90: #1a1a1a;
+  --ds-palette-black-95: #0c0c0c;
+  --ds-palette-blue-05: #e5f8ff;
+  --ds-palette-blue-10: #c2eeff;
+  --ds-palette-blue-20: #8adeff;
+  --ds-palette-blue-30: #5cd1ff;
+  --ds-palette-blue-40: #1abeff;
+  --ds-palette-blue-50: #009ad6;
+  --ds-palette-blue-60: #0084b8;
+  --ds-palette-blue-70: #005b80;
+  --ds-palette-blue-80: #053c52;
+  --ds-palette-blue-90: #032330;
+  --ds-palette-green-05: #dffbe1;
+  --ds-palette-green-10: #bef4c1;
+  --ds-palette-green-20: #85e08a;
+  --ds-palette-green-30: #66cc6b;
+  --ds-palette-green-40: #43b149;
+  --ds-palette-green-50: #279b2d;
+  --ds-palette-green-60: #257e29;
+  --ds-palette-green-70: #216325;
+  --ds-palette-green-80: #183f19;
+  --ds-palette-green-90: #0f2410;
+  --ds-palette-mainBlue-05: #e5f5ff;
+  --ds-palette-mainBlue-10: #cdebff;
+  --ds-palette-mainBlue-20: #99d7ff;
+  --ds-palette-mainBlue-30: #70c7ff;
+  --ds-palette-mainBlue-40: #3db3ff;
+  --ds-palette-mainBlue-50: #009bff;
+  --ds-palette-mainBlue-60: #007fd1;
+  --ds-palette-mainBlue-70: #005a94;
+  --ds-palette-mainBlue-80: #003152;
+  --ds-palette-mainBlue-90: #001929;
+  --ds-palette-red-05: #ffeceb;
+  --ds-palette-red-10: #ffd8d6;
+  --ds-palette-red-20: #fdb7b4;
+  --ds-palette-red-30: #f87c77;
+  --ds-palette-red-40: #f0514c;
+  --ds-palette-red-50: #d71f19;
+  --ds-palette-red-60: #bd2828;
+  --ds-palette-red-70: #8b2623;
+  --ds-palette-red-80: #602220;
+  --ds-palette-red-90: #321c1b;
+  --ds-palette-yellow-05: #fff1db;
+  --ds-palette-yellow-10: #ffe7c2;
+  --ds-palette-yellow-20: #ffd799;
+  --ds-palette-yellow-30: #fbc05f;
+  --ds-palette-yellow-40: #eea22b;
+  --ds-palette-yellow-50: #ce8103;
+  --ds-palette-yellow-60: #b26d00;
+  --ds-palette-yellow-70: #7a4b00;
+  --ds-palette-yellow-80: #4e3104;
+  --ds-palette-yellow-90: #282115;
+}
+
+:root {
+  --ds-spacing-4xSmall: 0.125rem;
+  --ds-spacing-3xSmall: 0.25rem;
+  --ds-spacing-2xSmall: 0.5rem;
+  --ds-spacing-xSmall: 0.75rem;
+  --ds-spacing-small: 1rem;
+  --ds-spacing-medium: 1.5rem;
+  --ds-spacing-large: 2rem;
+  --ds-spacing-xLarge: 2.5rem;
+  --ds-spacing-2xLarge: 3rem;
+  --ds-spacing-3xLarge: 3.5rem;
+  --ds-spacing-4xLarge: 4rem;
+  --ds-spacing-5xLarge: 4.5rem;
+  --ds-spacing-layout-2xSmall: 1rem;
+  --ds-spacing-layout-xSmall: 1.5rem;
+  --ds-spacing-layout-small: 2rem;
+  --ds-spacing-layout-medium: 3rem;
+  --ds-spacing-layout-large: 4rem;
+  --ds-spacing-layout-xLarge: 6rem;
+  --ds-spacing-layout-2xLarge: 8rem;
+}
+
+:root {
+  --ds-fontFamily-heading: "Open Sans", sans-serif;
+  --ds-fontFamily-body: "Open Sans", sans-serif;
+  --ds-fontSize-12: 12px; /* 0.75rem */
+  --ds-fontSize-14: 14px; /* 0.875rem */
+  --ds-fontSize-16: 16px; /* 1rem */
+  --ds-fontSize-18: 18px; /* 1.125rem */
+  --ds-fontSize-20: 20px; /* 1.25rem */
+  --ds-fontSize-22: 22px; /* 1.375rem */
+  --ds-fontSize-24: 24px; /* 1.5rem */
+  --ds-fontSize-26: 26px; /* 1.625rem */
+  --ds-fontSize-30: 30px; /* 1.875rem */
+  --ds-fontSize-32: 32px; /* 2rem */
+  --ds-fontSize-36: 36px; /* 2.25rem */
+  --ds-fontSize-40: 40px; /* 2.5rem */
+  --ds-fontSize-48: 48px; /* 3rem */
+  --ds-fontSize-56: 56px; /* 3.5rem */
+  --ds-fontSize-64: 64px; /* 4rem */
+  --ds-fontWeight-regular: 400;
+  --ds-fontWeight-semibold: 600;
+  --ds-fontWeight-semiboldPlus: 650;
+  --ds-fontWeight-bold: 700;
+  --ds-letterSpacing-xTight: -2;
+  --ds-letterSpacing-tight: -1.4;
+  --ds-letterSpacing-normal: -0.4;
+  --ds-letterSpacing-wide: 0;
+  --ds-letterSpacing-xWide: 0.4;
+  --ds-lineHeight-small: 1;
+  --ds-lineHeight-medium: 1.2;
+  --ds-lineHeight-large: 1.5;
+  --ds-lineHeight-xLarge: 1.75;
+  --ds-fontWidth-normal: 100;
+  --ds-fontWidth-condense: 90;
+  --ds-number-style: proportional-figures; /* Varying spacing */
+}
+
+@supports (font-variation-settings: normal) {
+  :root {
+    --ds-fontFamily-heading: "Open Sans Variable", sans-serif;
+    --ds-fontFamily-body: "Open Sans Variable", sans-serif;
+  }
+}
+
+/*# sourceMappingURL=variables.css.map */

package/dist/styles/variables.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/components/00-foundations/borders/_borders.scss","../../src/components/00-foundations/breakpoints/_breakpoints.scss","../../src/components/00-foundations/colours/_colours.scss","../../src/components/00-foundations/spacing/_spacing.scss","../../src/components/00-foundations/typography/_typography.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;ACAF;EAEI;EAAA;EAAA;EAAA;EAAA;;;ACRJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AClFF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AClBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA","file":"variables.css"}

package/dist/types/components/01-base-components/ds-button/ds-button.d.ts

@@ -12,10 +12,15 @@ export declare class DsButton {
     iconPosition: 'start' | 'end';
     type: 'button' | 'submit' | 'reset';
     disabled: boolean;
+    isLoading: boolean;
+    useSpinner: boolean;
+    spinnerHiddenText: string;
     fullWidth: boolean;
     ariaDisabled: string;
     componentWillLoad(): void;
     private handleKeyDown;
     private handleKeyUp;
+    private getSpinnerColour;
+    private renderButton;
     render(): any;
 }

package/dist/types/components/01-base-components/ds-button/stories/ds-button.examples.stories.d.ts

@@ -7,3 +7,4 @@ export declare const ButtonGroupSmall: StoryObj;
 export declare const ButtonGroupIcon: StoryObj;
 export declare const ResetAndSubmitButton: StoryObj;
 export declare const FullWidthWithIconsUsingSlots: StoryObj;
+export declare const ButtonWithLoadingAnimation: StoryObj;

package/dist/types/components/01-base-components/ds-checkbox/ds-checkbox.d.ts

@@ -1,19 +1,13 @@
-import { EventEmitter } from '../../../stencil-public-runtime';
-import { DsEvent } from '../../00-foundations/types';
-export interface DsCheckboxInputEvent extends DsEvent {
-    checked: boolean;
-}
 export declare class DsCheckbox {
+    private checkboxGroup;
     private inputElem;
     private labelId;
     private inputValidityId;
     private assistiveTextId;
     private inheritedAttributes;
-    private initialChecked?;
     private labelClicked;
     el: HTMLElement;
     internals: ElementInternals;
-    dsCheckboxInput: EventEmitter<DsCheckboxInputEvent>;
     identifier?: string;
     checked: boolean;
     legend?: string;
@@ -27,16 +21,18 @@ export declare class DsCheckbox {
     optional: boolean;
     optionalText?: string;
     ariaLabel: string;
-    value: string;
+    invalid: boolean;
+    initialChecked: boolean;
     validationMessage?: string;
     private setIds;
     private getValidationMessage;
     private getLegendText;
     private getCheckboxText;
     private getAriaDescribedBy;
-    private restoreInitialState;
-    private setInitialState;
     formResetCallback(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private updateInvalidState;
     componentWillLoad(): void;
     handleInput: (e: Event) => void;
     handleKeyUp: (event: KeyboardEvent) => void;

package/dist/types/components/01-base-components/ds-checkbox-group/ds-checkbox-group.d.ts

@@ -1,5 +1,4 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { DsCheckboxInputEvent } from '../ds-checkbox/ds-checkbox';
 import { DsEvent } from '../../00-foundations/types';
 export interface DsCheckboxGroupChangeEvent extends DsEvent {
     checked: boolean;
@@ -8,6 +7,7 @@ export interface DsCheckboxGroupIndeterminateChildChangeEvent extends DsEvent {
     indeterminate: boolean;
 }
 export declare class DsCheckboxGroup {
+    private checkboxElem;
     private readonly fieldsetId;
     private readonly checkboxId;
     private readonly errorTextId;
@@ -17,6 +17,7 @@ export declare class DsCheckboxGroup {
     el: HTMLElement;
     dsCheckboxGroupChange: EventEmitter<DsCheckboxGroupChangeEvent>;
     dsCheckboxGroupIndeterminateChildChange: EventEmitter<DsCheckboxGroupIndeterminateChildChangeEvent>;
+    dsCheckboxGroupInvalidStateChange: EventEmitter<boolean>;
     legend?: string;
     assistiveText?: string;
     direction: 'horizontal' | 'vertical';
@@ -41,12 +42,12 @@ export declare class DsCheckboxGroup {
     watchCheckboxDisabledChange(newValue: boolean): void;
     watchCheckedChange(newValue: boolean): void;
     watchIndeterminateChange(newValue: boolean): void;
+    errorTextObserver(errorText: string): void;
     listenIndeterminateChildChange(event: CustomEvent<DsCheckboxGroupIndeterminateChildChangeEvent>): void;
-    watchCheckedChildElementCountChange(newValue: number, oldValue: number): void;
+    watchCheckedChildElementCountChange(): void;
     private updateCheckedChildElementCount;
-    listenCheckboxChange(event: CustomEvent<DsCheckboxInputEvent>): void;
+    listenCheckboxChange(event: Event): void;
     listenCheckboxGroupChange(event: CustomEvent<DsCheckboxGroupChangeEvent>): void;
-    private setChildElementCount;
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;

package/dist/types/components/01-base-components/ds-radio-button/ds-radio-button.d.ts

@@ -0,0 +1,44 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export declare class DsRadioButton {
+    private radioGroup;
+    private inputElem;
+    dsRadioButtonChecked: EventEmitter;
+    el: HTMLElement;
+    internals: ElementInternals;
+    identifier?: string;
+    errorsDisabled: boolean;
+    value?: string;
+    legend?: string;
+    assistiveText?: string;
+    text?: string;
+    required: boolean;
+    disabled: boolean;
+    optional: boolean;
+    checked: boolean;
+    optionalText?: string;
+    errorText: string;
+    focusable: boolean;
+    invalid: boolean;
+    initialChecked: boolean;
+    validationMessage?: string;
+    private readonly errorTextId;
+    private readonly assistiveTextId;
+    setFocus(): Promise<void>;
+    setFocusable(flag: boolean): Promise<void>;
+    setChecked(): Promise<void>;
+    private inheritedAttributes;
+    private getValidationMessage;
+    componentWillLoad(): void;
+    formResetCallback(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private updateCheckedState;
+    private updateInvalidState;
+    handleInput: () => void;
+    handleBlur: () => void;
+    private getLegendText;
+    renderRadioIcon(): any;
+    renderRadioButton(): any;
+    renderFieldset(): any;
+    render(): any;
+}

package/dist/types/components/01-base-components/ds-radio-button/stories/ds-radio-button.features.stories.d.ts

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsRadioButton } from '../ds-radio-button';
+declare const meta: Meta<typeof DsRadioButton>;
+export default meta;
+type Story = StoryObj;
+export declare const Unchecked: Story;
+export declare const Checked: Story;
+export declare const Disabled: Story;
+export declare const CheckedDisabled: Story;
+export declare const Invalid: Story;
+export declare const InvalidChecked: Story;
+export declare const WithLegend: Story;
+export declare const RequiredWithLegend: Story;
+export declare const OptionalWithLegend: Story;
+export declare const WithLegendAndAssistiveText: Story;

package/dist/types/components/01-base-components/ds-radio-button/stories/ds-radio-button.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsRadioButton } from '../ds-radio-button';
+declare const meta: Meta<typeof DsRadioButton.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Playground: Story;

package/dist/types/components/01-base-components/ds-radio-button-group/ds-radio-button-group.d.ts

@@ -0,0 +1,24 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export declare class DsRadioButtonGroup {
+    private readonly fieldsetId;
+    private readonly errorTextId;
+    private readonly assistiveTextId;
+    private inheritedAttributes;
+    el: HTMLElement;
+    legend?: string;
+    assistiveText?: string;
+    initialValue?: string;
+    direction: 'horizontal' | 'vertical';
+    errorText: string;
+    value?: string;
+    dsRadioGroupValueChange: EventEmitter<string | undefined>;
+    dsRadioGroupInvalidStateChange: EventEmitter<boolean>;
+    private getRadios;
+    private updateFocusableRadioButton;
+    componentWillLoad(): void;
+    getValue(): Promise<string>;
+    errorTextObserver(errorText: string): void;
+    onInputChange(e: CustomEvent): void;
+    onKeyDown(e: KeyboardEvent): void;
+    render(): any;
+}

package/dist/types/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.examples.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const WithVariableRadioButtonsCount: Story;
+export declare const SomeRadioButtonsDisabled: Story;

package/dist/types/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.features.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsRadioButtonGroup } from '../ds-radio-button-group';
+declare const meta: Meta<typeof DsRadioButtonGroup.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const Vertical: Story;
+export declare const Horizontal: Story;
+export declare const Invalid: Story;
+export declare const HorizontalInvalid: Story;
+export declare const WithDefaultValue: Story;

package/dist/types/components/01-base-components/ds-radio-button-group/stories/ds-radio-button-group.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsRadioButtonGroup } from '../ds-radio-button-group';
+declare const meta: Meta<typeof DsRadioButtonGroup.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Playground: Story;

package/dist/types/components/01-base-components/ds-spinner/ds-spinner.d.ts

@@ -0,0 +1,17 @@
+type SpinnerColor = 'blue' | 'black' | 'white';
+type SpinnerSize = 'small' | 'medium' | 'large' | 'xLarge' | '2xLarge';
+type SpinnerTextPosition = 'below' | 'side';
+export declare class DsSpinner {
+    private inheritedAttributes;
+    el: HTMLElement;
+    text: string;
+    size: SpinnerSize;
+    spinnerTextPosition: SpinnerTextPosition;
+    spinnerColor: SpinnerColor;
+    useRoleAlert: boolean;
+    useAriaLive: boolean;
+    hiddenAssistiveText: string;
+    componentWillLoad(): void;
+    render(): any;
+}
+export {};

package/dist/types/components/01-base-components/ds-spinner/stories/ds-spinner.examples.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsSpinner } from '../ds-spinner';
+declare const meta: Meta<typeof DsSpinner.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const WithText: Story;
+export declare const SpinnerLoadExample: StoryObj;

package/dist/types/components/01-base-components/ds-spinner/stories/ds-spinner.features.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsSpinner } from '../ds-spinner';
+declare const meta: Meta<typeof DsSpinner.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const Colours: Story;
+export declare const Sizes: Story;

package/dist/types/components/01-base-components/ds-spinner/stories/ds-spinner.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsSpinner } from '../ds-spinner';
+declare const meta: Meta<typeof DsSpinner.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Playground: Story;

package/dist/types/components/01-base-components/ds-text-input/ds-text-input.d.ts

@@ -3,6 +3,7 @@ import { DsEvent } from '../../00-foundations/types';
 import { DsTextInputType } from './utils';
 export type DsTextInputClearEvent = DsEvent;
 export declare class DsTextInput {
+    private inheritedAttributes;
     private suffixButtonElement;
     private inputElement;
     private assistiveTextId;
@@ -39,7 +40,7 @@ export declare class DsTextInput {
     icon: string;
     type: DsTextInputType;
     ariaLabel: string;
-    ariaLabelledBy?: string;
+    ariaLabelledby?: string;
     ariaDescribedby?: string;
     hasFocus: boolean;
     clearButtonVisible: boolean;