@uh-design-system/component-library 0.5.2 → 0.6.0

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

@@ -1,12 +1,11 @@
-type InputValidityType = 'error' | 'success';
-type InputValidityRole = 'alert' | 'status';
 export declare class DsInputValidity {
     el: HTMLElement;
-    text: string;
-    type: InputValidityType;
-    validityRole?: InputValidityRole;
+    dsText: string;
+    dsType: 'error' | 'success';
+    dsValidityRole?: 'alert' | 'status';
+    dsAriaLive?: 'assertive' | 'polite';
+    dsAriaAtomic?: 'true' | 'false';
     identifier?: string;
     componentDidLoad(): void;
     render(): any;
 }
-export {};

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

@@ -3,25 +3,24 @@ type LinkVariant = 'inline' | 'standalone';
 type LinkWeight = 'regular' | 'semibold' | 'bold';
 type LinkIconPosition = 'start' | 'end';
 type LinkTarget = '_blank' | '_self' | '_parent' | '_top' | '_unfencedTop';
-type LinkLang = 'fi' | 'sv' | 'en';
 export declare class DsLink {
     private inheritedAttributes;
     private rel?;
     private readonly visuallyHiddenAssistiveTextId;
     el: HTMLElement;
-    text: string;
-    size?: LinkSize;
-    variant: LinkVariant;
-    weight: LinkWeight;
-    icon: string;
-    iconPosition: LinkIconPosition;
-    iconTitle?: string;
-    iconHidden?: boolean;
-    href: string;
-    target?: LinkTarget;
-    download?: boolean;
-    language?: LinkLang;
-    ariaLabel: string;
+    dsText: string;
+    dsSize?: LinkSize;
+    dsVariant: LinkVariant;
+    dsWeight: LinkWeight;
+    dsIcon: string;
+    dsIconPosition: LinkIconPosition;
+    dsIconTitle?: string;
+    dsIconHidden?: boolean;
+    dsHref: string;
+    dsTarget?: LinkTarget;
+    dsDownload?: boolean;
+    dsAriaLabel: string;
+    dsColour?: 'black' | 'white';
     componentWillLoad(): void;
     render(): any;
 }

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

@@ -7,5 +7,7 @@ export declare const Inline: Story;
 export declare const Standalone: Story;
 export declare const Size: Story;
 export declare const Weight: Story;
+export declare const Black: Story;
+export declare const White: Story;
 export declare const OpensInANewTab: Story;
 export declare const IconPosition: Story;

package/dist/types/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.d.ts

@@ -1,18 +1,16 @@
 type LinkIconPosition = 'start' | 'end';
 type LinkTarget = '_blank' | '_self' | '_parent' | '_top' | '_unfencedTop';
-type LinkLang = 'fi' | 'sv' | 'en';
 export declare class DsLinkWithArrow {
     private inheritedAttributes;
     private icon;
     private rel?;
     private readonly visuallyHiddenAssistiveTextId;
     el: HTMLElement;
-    text?: string;
-    iconPosition: LinkIconPosition;
-    href: string;
-    target?: LinkTarget;
-    language?: LinkLang;
-    ariaLabel: string;
+    dsText?: string;
+    dsIconPosition: LinkIconPosition;
+    dsHref: string;
+    dsTarget?: LinkTarget;
+    dsAriaLabel: string;
     componentWillLoad(): void;
     render(): any;
 }

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;
+    dsChange: EventEmitter<boolean>;
+    dsRadioButtonChecked: EventEmitter<void>;
+    el: HTMLElement;
+    internals: ElementInternals;
+    dsId?: string;
+    dsErrorsDisabled: boolean;
+    dsValue?: string;
+    dsLegend?: string;
+    dsAssistiveText?: string;
+    dsText?: string;
+    dsRequired: boolean;
+    dsDisabled: boolean;
+    dsChecked: boolean;
+    dsErrorText: string;
+    focusable: boolean;
+    invalid: boolean;
+    initialChecked: boolean;
+    validationMessage?: string;
+    private readonly errorTextId;
+    private readonly assistiveTextId;
+    dsFocus(): Promise<void>;
+    setFocusable(flag: boolean): Promise<void>;
+    setChecked(): Promise<void>;
+    dsCheckedObserver(isChecked: boolean): 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 WithLegendAndAssistiveText: Story;
+export declare const Focused: 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,34 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export declare class DsRadioButtonGroup {
+    private readonly fieldsetId;
+    private readonly errorTextId;
+    private readonly assistiveTextId;
+    private inheritedAttributes;
+    el: HTMLElement;
+    internals: ElementInternals;
+    dsLegend?: string;
+    dsAssistiveText?: string;
+    dsValue?: string;
+    dsDirection: 'horizontal' | 'vertical';
+    dsErrorText: string;
+    dsRequired: boolean;
+    showInternalsValidationMessage: boolean;
+    dsRadioGroupValueChange: EventEmitter<string | undefined>;
+    dsRadioGroupInvalidStateChange: EventEmitter<boolean>;
+    dsChange: EventEmitter<string>;
+    private getLegendText;
+    private getValidationMessage;
+    private getRadios;
+    private getEnabledRadios;
+    private updateRadios;
+    private updateFocusableRadioButton;
+    formResetCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    getValue(): Promise<string>;
+    errorTextObserver(errorText: string): void;
+    dsValueObserver(value: 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,11 @@
+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 Required: 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;
+    dsText: string;
+    dsSize: SpinnerSize;
+    dsSpinnerTextPosition: SpinnerTextPosition;
+    dsSpinnerColor: SpinnerColor;
+    dsUseRoleAlert: boolean;
+    dsUseAriaLive: boolean;
+    dsHiddenAssistiveText: 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

@@ -1,7 +1,9 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { DsEvent } from '../../00-foundations/types';
 import { DsTextInputType } from './utils';
-export type DsTextInputClearEvent = DsEvent;
+export type DsTextInputEvent<T extends Event = Event> = {
+    event: T;
+    value: string;
+};
 export declare class DsTextInput {
     private inheritedAttributes;
     private suffixButtonElement;
@@ -14,34 +16,36 @@ export declare class DsTextInput {
     private hasSuffixSlot;
     el: HTMLElement;
     internals: ElementInternals;
-    clear: EventEmitter<DsTextInputClearEvent>;
-    label?: string;
-    placeholder?: string;
-    identifier?: string;
-    name: string;
-    disabled?: boolean;
-    optional?: boolean;
-    required?: boolean;
-    readonly?: boolean;
-    value?: string;
-    min?: number;
-    max?: number;
-    maxlength?: number;
-    pattern?: string;
-    autocomplete?: string;
-    optionalText?: string;
-    errorText?: string;
-    successText?: string;
-    assistiveText?: string;
-    actionButtonAriaLabel?: string;
-    hiddenAssistiveText?: string;
-    prefixText?: string;
-    suffixText?: string;
-    icon: string;
-    type: DsTextInputType;
-    ariaLabel: string;
-    ariaLabelledby?: string;
-    ariaDescribedby?: string;
+    dsChange: EventEmitter<Omit<DsTextInputEvent, 'event'>>;
+    dsInput: EventEmitter<DsTextInputEvent<InputEvent>>;
+    dsClear: EventEmitter<DsTextInputEvent>;
+    dsLabel?: string;
+    dsPlaceholder?: string;
+    dsId?: string;
+    dsName: string;
+    dsDisabled?: boolean;
+    dsOptional?: boolean;
+    dsRequired?: boolean;
+    dsReadonly?: boolean;
+    dsValue?: string;
+    dsMin?: number;
+    dsMax?: number;
+    dsMaxLength?: number;
+    dsPattern?: string;
+    dsAutocomplete?: string;
+    dsOptionalText?: string;
+    dsErrorText?: string;
+    dsSuccessText?: string;
+    dsAssistiveText?: string;
+    dsActionButtonAriaLabel?: string;
+    dsHiddenAssistiveText?: string;
+    dsPrefixText?: string;
+    dsSuffixText?: string;
+    dsIcon: string;
+    dsType: DsTextInputType;
+    dsAriaLabel: string;
+    dsAriaLabelledby?: string;
+    dsAriaDescribedby?: string;
     hasFocus: boolean;
     clearButtonVisible: boolean;
     passwordInputVisible: boolean;
@@ -50,10 +54,11 @@ export declare class DsTextInput {
     private setIds;
     private getValidationMessage;
     togglePasswordVisibility(): Promise<boolean>;
-    clearInput(): Promise<void>;
+    clearInput(e: Event): Promise<void>;
+    valueObserver(value?: string): void;
     private getLabelText;
     componentWillLoad(): void;
-    handleInput: (e: Event) => void;
+    handleInput: (e: InputEvent) => void;
     handleBlur: () => void;
     private onActionButtonClicked;
     private renderPrefixContent;