@uh-design-system/component-library 0.4.0 → 0.4.2

package/dist/esm/{linkUtils-3d1b28cf.js → linkUtils-fe63ff72.js}

@@ -9,5 +9,14 @@ const visuallyHiddenAssistiveText = (lang) => {
             return 'Opens in a new tab';
     }
 };
+const getAriaLabel = (text, ariaLabel) => {
+    if (!ariaLabel) {
+        return undefined;
+    }
+    if (ariaLabel.startsWith(text)) {
+        return ariaLabel;
+    }
+    return [text, ariaLabel].join(' ');
+};
 
-export { opensInNewTab as o, visuallyHiddenAssistiveText as v };
+export { getAriaLabel as g, opensInNewTab as o, visuallyHiddenAssistiveText as v };

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-42701395.js';
-export { s as setNonce } from './index-42701395.js';
+import { b as bootstrapLazy } from './index-50783b0c.js';
+export { s as setNonce } from './index-50783b0c.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["ds-visually-hidden",[[1,"ds-visually-hidden"]]],["ds-accordion_3",[[1,"ds-accordion",{"variant":[1],"borderAligned":[4,"border-aligned"],"openByDefault":[4,"open-by-default"],"accordionId":[1,"accordion-id"],"headingLevel":[2,"heading-level"],"useCloseButton":[4,"use-close-button"],"closeButtonLabel":[1,"close-button-label"],"hideTopBorder":[4,"hide-top-border"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}],[6,"ds-button",{"value":[1],"variant":[1],"colour":[1],"size":[1],"fontWeight":[1,"font-weight"],"icon":[1],"iconPosition":[1,"icon-position"],"type":[1],"disabled":[4],"fullWidth":[4,"full-width"],"ariaDisabled":[1,"aria-disabled"]}],[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"dsTitle":[1,"title"],"role":[1],"hidden":[4],"message":[32]}]]],["ds-text-input",[[6,"ds-text-input",{"label":[1],"placeholder":[1],"dsId":[1,"id"],"name":[1],"disabled":[4],"optional":[4],"required":[4],"readonly":[4],"value":[1],"min":[2],"max":[2],"maxlength":[2],"pattern":[1],"autocomplete":[1],"optionalText":[1,"optional-text"],"errorText":[1,"error-text"],"successText":[1,"success-text"],"assistiveText":[1,"assistive-text"],"actionButtonAriaLabel":[1,"action-button-aria-label"],"hiddenAssistiveText":[1,"hidden-assistive-text"],"prefixText":[1,"prefix-text"],"suffixText":[1,"suffix-text"],"icon":[1],"type":[1],"ariaLabel":[1,"aria-label"],"ariaLabelledBy":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"hasFocus":[32],"clearButtonVisible":[32],"passwordInputVisible":[32],"inputActive":[32],"togglePasswordVisibility":[64],"clearInput":[64]}]]],["ds-link",[[1,"ds-link",{"text":[1],"size":[1],"variant":[1],"weight":[1],"icon":[1025],"iconPosition":[1025,"icon-position"],"href":[1],"target":[1],"download":[4],"language":[1,"lang"]}]]],["ds-link-with-arrow",[[1,"ds-link-with-arrow",{"text":[1],"iconPosition":[1,"icon-position"],"href":[1],"target":[1],"language":[1,"lang"]}]]]], options);
+  return bootstrapLazy([["ds-accordion_3",[[1,"ds-accordion",{"variant":[1],"borderAligned":[4,"border-aligned"],"openByDefault":[4,"open-by-default"],"accordionId":[1,"accordion-id"],"headingLevel":[2,"heading-level"],"useCloseButton":[4,"use-close-button"],"closeButtonLabel":[1,"close-button-label"],"hideTopBorder":[4,"hide-top-border"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}],[6,"ds-button",{"value":[1],"variant":[1],"colour":[1],"size":[1],"fontWeight":[1,"font-weight"],"icon":[1],"iconPosition":[1,"icon-position"],"type":[1],"disabled":[4],"fullWidth":[4,"full-width"],"ariaDisabled":[1,"aria-disabled"]}],[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"dsTitle":[1,"title"],"role":[1],"hidden":[4],"message":[32]}]]],["ds-checkbox-group",[[1,"ds-checkbox-group",{"legend":[1],"assistiveText":[1,"assistive-text"],"direction":[1],"errorText":[1,"error-text"],"text":[1],"checked":[1028],"checkedChildElementCount":[1026,"checked-child-element-count"],"disabled":[4],"parentCheckedCount":[2,"parent-checked-count"],"childElementsCount":[32],"isIndeterminate":[32],"indeterminateChildCheckboxCount":[32],"setChecked":[64]},[[0,"dsCheckboxGroupIndeterminateChildChange","handleIndeterminateChildChange"],[0,"dsCheckboxChange","handleCheckboxChange"],[0,"dsCheckboxGroupChange","handleCheckboxGroupChange"]],{"disabled":["handleCheckboxDisabledChange"],"checked":["handleCheckedChange"],"isIndeterminate":["handleIndeterminateChange"],"checkedChildElementCount":["handleCheckedChildElementCountChange"]}]]],["ds-visually-hidden",[[1,"ds-visually-hidden"]]],["ds-text-input",[[6,"ds-text-input",{"label":[1],"placeholder":[1],"dsId":[1,"id"],"name":[1],"disabled":[4],"optional":[4],"required":[4],"readonly":[4],"value":[1],"min":[2],"max":[2],"maxlength":[2],"pattern":[1],"autocomplete":[1],"optionalText":[1,"optional-text"],"errorText":[1,"error-text"],"successText":[1,"success-text"],"assistiveText":[1,"assistive-text"],"actionButtonAriaLabel":[1,"action-button-aria-label"],"hiddenAssistiveText":[1,"hidden-assistive-text"],"prefixText":[1,"prefix-text"],"suffixText":[1,"suffix-text"],"icon":[1],"type":[1],"ariaLabel":[1,"aria-label"],"ariaLabelledBy":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"hasFocus":[32],"clearButtonVisible":[32],"passwordInputVisible":[32],"inputActive":[32],"togglePasswordVisibility":[64],"clearInput":[64]}]]],["ds-link",[[1,"ds-link",{"text":[1],"size":[1],"variant":[1],"weight":[1],"icon":[1025],"iconPosition":[1025,"icon-position"],"iconTitle":[1,"icon-title"],"iconHidden":[4,"icon-hidden"],"href":[1],"target":[1],"download":[4],"language":[1,"lang"],"linkAriaLabel":[1,"aria-label"]}]]],["ds-link-with-arrow",[[1,"ds-link-with-arrow",{"text":[1],"iconPosition":[1,"icon-position"],"href":[1],"target":[1],"language":[1,"lang"],"linkAriaLabel":[1,"aria-label"]}]]],["ds-input-validity",[[0,"ds-input-validity",{"text":[1],"type":[1],"validityRole":[1,"role"],"identifier":[32]}]]],["ds-checkbox",[[65,"ds-checkbox",{"checkboxId":[1025,"id"],"checked":[1028],"legend":[1],"assistiveText":[1,"assistive-text"],"text":[1],"indeterminate":[4],"disabled":[4],"errorText":[1,"error-text"],"errorsDisabled":[4,"data-errors-disabled"],"required":[4],"optional":[4],"optionalText":[1,"optional-text"],"ariaLabel":[32],"value":[32],"validationMessage":[32]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/esm/utils-b5843ae1.js

@@ -0,0 +1,15 @@
+const formatAs = (value, suffix) => value.endsWith(suffix) ? value : `${value}${suffix}`;
+const formatAsPx = (value) => formatAs(value, 'px');
+const remToPx = (remString) => {
+    const rootFontSize = 16;
+    const rem = parseFloat(remString);
+    return formatAsPx(`${rem * rootFontSize}`);
+};
+function* idGenerator(id) {
+    let currentId = 1;
+    while (true) {
+        yield `${id}-${currentId++}`;
+    }
+}
+
+export { idGenerator as i, remToPx as r };

package/dist/types/accessibility/accessibility.stories.d.ts

@@ -0,0 +1,3 @@
+import { Meta } from '@storybook/web-components';
+declare const meta: Meta<typeof HTMLElement.prototype>;
+export default meta;

package/dist/types/accessibility/stories/ariaLabel.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta<typeof HTMLElement.prototype>;
+export default meta;
+export declare const HowToAriaLabel: StoryObj;
+export declare const HowNotToAriaLabel: StoryObj;

package/dist/types/accessibility/stories/ariaLabelledBy.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta<typeof HTMLElement.prototype>;
+export default meta;
+export declare const HowToAriaLabelledBy: StoryObj;

package/dist/types/accessibility/stories/naming.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta<typeof HTMLElement.prototype>;
+export default meta;
+export declare const HowNamingWorks: StoryObj;

package/dist/types/components/00-foundations/typography/stories/typography.stories.d.ts

@@ -7,3 +7,4 @@ declare const meta: Meta;
 export default meta;
 export declare const TokenClasses: StoryObj;
 export declare const Typography: StoryObj;
+export declare const Headings: StoryObj;

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

@@ -3,5 +3,7 @@ import { DsButton } from '../ds-button';
 declare const meta: Meta<typeof DsButton.prototype>;
 export default meta;
 export declare const ButtonGroup: StoryObj;
+export declare const ButtonGroupSmall: StoryObj;
+export declare const ButtonGroupIcon: StoryObj;
 export declare const ResetAndSubmitButton: StoryObj;
 export declare const FullWidthWithIconsUsingSlots: StoryObj;

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

@@ -10,10 +10,13 @@ export declare const Blue: Story;
 export declare const Black: Story;
 export declare const White: Story;
 export declare const Medium: Story;
-export declare const Small: Story;
+export declare const SmallPrimary: Story;
+export declare const SmallSecondary: Story;
+export declare const SmallSupplementary: Story;
 export declare const Disabled: Story;
 export declare const IconStart: Story;
 export declare const IconEnd: Story;
+export declare const IconOnly: Story;
 export declare const FullWidth: Story;
 export declare const FullWidthWithStartIcon: Story;
 export declare const FullWidthWithEndIcon: Story;

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

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export interface CheckboxChangeEvent {
+    id: string;
+    checked: boolean;
+}
+export declare class DsCheckbox {
+    private labelId;
+    private errorTextId;
+    private assistiveTextId;
+    private inheritedAttributes;
+    private initialChecked?;
+    private inputElem;
+    el: HTMLElement;
+    internals: ElementInternals;
+    dsCheckboxChange: EventEmitter<CheckboxChangeEvent>;
+    dsCheckboxError: EventEmitter<string>;
+    checkboxId?: string;
+    checked: boolean;
+    legend?: string;
+    assistiveText?: string;
+    text?: string;
+    indeterminate: boolean;
+    disabled: boolean;
+    errorText: string;
+    errorsDisabled: boolean;
+    required: boolean;
+    optional: boolean;
+    optionalText?: string;
+    ariaLabel?: string;
+    value: string;
+    validationMessage: string;
+    private setIds;
+    private getErrorText;
+    private getLegendText;
+    private getCheckboxText;
+    private getAriaDescribedBy;
+    private restoreInitialState;
+    private setInitialState;
+    private emitCheckboxError;
+    formResetCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    handleChange: () => void;
+    handleKeyUp: (event: KeyboardEvent) => void;
+    renderCheckbox(): any;
+    renderFieldset(): any;
+    render(): any;
+}

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

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsCheckbox } from '../ds-checkbox';
+declare const meta: Meta<typeof DsCheckbox.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const Unchecked: Story;
+export declare const Checked: Story;
+export declare const Indeterminate: Story;
+export declare const Disabled: Story;
+export declare const Invalid: Story;
+export declare const WithoutValueText: Story;
+export declare const RequiredAndOptional: Story;
+export declare const WithLegendAndAssistiveText: Story;

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsCheckbox } from '../ds-checkbox';
+declare const meta: Meta<typeof DsCheckbox.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-checkbox-group/ds-checkbox-group.d.ts

@@ -0,0 +1,56 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { CheckboxChangeEvent } from '../ds-checkbox/ds-checkbox';
+export interface CheckboxGroupChangeEvent {
+    id: string;
+    checked: boolean;
+}
+export interface CheckboxGroupIndeterminateChildChangeEvent {
+    id: string;
+    indeterminate: boolean;
+}
+export declare class DsCheckboxGroup {
+    private readonly fieldsetId;
+    private readonly checkboxId;
+    private readonly errorTextId;
+    private readonly assistiveTextId;
+    private readonly nestedId;
+    private inheritedAttributes;
+    el: HTMLElement;
+    dsCheckboxGroupChange: EventEmitter<CheckboxGroupChangeEvent>;
+    dsCheckboxGroupIndeterminateChildChange: EventEmitter<CheckboxGroupIndeterminateChildChangeEvent>;
+    legend?: string;
+    assistiveText?: string;
+    direction: 'horizontal' | 'vertical';
+    errorText: string;
+    text: string;
+    checked: boolean;
+    checkedChildElementCount: number;
+    disabled: boolean;
+    parentCheckedCount: number;
+    childElementsCount: number;
+    isIndeterminate: boolean;
+    indeterminateChildCheckboxCount: number;
+    private elementIs;
+    private elementIsCheckbox;
+    private elementIsCheckboxGroup;
+    private getAriaDescribedBy;
+    private getChildElements;
+    private getChildCheckboxElements;
+    private updateChildElements;
+    private updateChildCheckboxes;
+    private updateChildElementsChecked;
+    setChecked(newValue: boolean): Promise<void>;
+    handleCheckboxDisabledChange(newValue: boolean): void;
+    handleCheckedChange(newValue: boolean): void;
+    handleIndeterminateChange(newValue: boolean): void;
+    handleIndeterminateChildChange(event: CustomEvent<CheckboxGroupIndeterminateChildChangeEvent>): void;
+    handleCheckedChildElementCountChange(newValue: number, oldValue: number): void;
+    private updateCheckedChildElementCount;
+    handleCheckboxChange(event: CustomEvent<CheckboxChangeEvent>): void;
+    handleCheckboxGroupChange(event: CustomEvent<CheckboxGroupChangeEvent>): void;
+    private setChildElementCount;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    render(): any;
+}

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

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsCheckboxGroup } from '../ds-checkbox-group';
+declare const meta: Meta<typeof DsCheckboxGroup.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const Vertical: Story;
+export declare const VerticalInvalid: Story;
+export declare const Horizontal: Story;
+export declare const HorizontalInvalid: Story;
+export declare const Nested: Story;
+export declare const DeeplyNested: Story;

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsCheckboxGroup } from '../ds-checkbox-group';
+declare const meta: Meta<typeof DsCheckboxGroup.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-icon/{ds-icon.stories.d.ts → stories/ds-icon.stories.d.ts}

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/web-components';
-import { DsIcon } from './ds-icon';
+import { DsIcon } from '../ds-icon';
 declare const meta: Meta<typeof DsIcon.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-input-validity/ds-input-validity.d.ts

@@ -0,0 +1,12 @@
+type InputValidityType = 'error' | 'success';
+type InputValidityRole = 'alert' | 'status';
+export declare class DsInputValidity {
+    el: HTMLElement;
+    text: string;
+    type: InputValidityType;
+    validityRole?: InputValidityRole;
+    identifier?: string;
+    componentDidLoad(): void;
+    render(): any;
+}
+export {};

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsInputValidity } from '../ds-input-validity';
+declare const meta: Meta<typeof DsInputValidity.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const Error: Story;
+export declare const Success: Story;

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsInputValidity } from '../ds-input-validity';
+declare const meta: Meta<typeof DsInputValidity.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-link/ds-link.d.ts

@@ -9,16 +9,19 @@ export declare class DsLink {
     private rel?;
     private readonly visuallyHiddenAssistiveTextId;
     el: HTMLElement;
-    text?: string;
+    text: string;
     size?: LinkSize;
     variant: LinkVariant;
     weight: LinkWeight;
     icon: string;
     iconPosition: LinkIconPosition;
+    iconTitle?: string;
+    iconHidden?: boolean;
     href: string;
     target?: LinkTarget;
     download?: boolean;
     language?: LinkLang;
+    linkAriaLabel?: string;
     componentWillLoad(): void;
     render(): any;
 }

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

@@ -12,6 +12,7 @@ export declare class DsLinkWithArrow {
     href: string;
     target?: LinkTarget;
     language?: LinkLang;
+    linkAriaLabel?: string;
     componentWillLoad(): void;
     render(): any;
 }

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

@@ -6,6 +6,9 @@ export declare class DsTextInput {
     private readonly visuallyHiddenAssistiveTextId;
     private readonly successTextId;
     private readonly errorTextId;
+    private hasPrefixSlot;
+    private hasSuffixSlot;
+    el: HTMLElement;
     label?: string;
     placeholder?: string;
     dsId?: string;
@@ -39,6 +42,8 @@ export declare class DsTextInput {
     inputActive: boolean;
     togglePasswordVisibility(): Promise<boolean>;
     clearInput(): Promise<void>;
+    private getLabelText;
+    componentWillLoad(): void;
     private onActionButtonClicked;
     private renderValidityMessage;
     private renderPrefixContent;

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

@@ -1,3 +1,2 @@
 export declare const textInputTypes: readonly ["text", "password", "search", "loading", "tel", "email", "url", "number"];
 export type TextInputType = typeof textInputTypes[number];
-export declare function idGenerator(id: string): Generator<string, void, unknown>;

package/dist/types/components.d.ts

@@ -5,7 +5,11 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { CheckboxChangeEvent } from "./components/01-base-components/ds-checkbox/ds-checkbox";
+import { CheckboxGroupChangeEvent, CheckboxGroupIndeterminateChildChangeEvent } from "./components/01-base-components/ds-checkbox-group/ds-checkbox-group";
 import { TextInputType } from "./components/01-base-components/ds-text-input/utils";
+export { CheckboxChangeEvent } from "./components/01-base-components/ds-checkbox/ds-checkbox";
+export { CheckboxGroupChangeEvent, CheckboxGroupIndeterminateChildChangeEvent } from "./components/01-base-components/ds-checkbox-group/ds-checkbox-group";
 export { TextInputType } from "./components/01-base-components/ds-text-input/utils";
 export namespace Components {
     interface DsAccordion {
@@ -37,6 +41,36 @@ export namespace Components {
         "value": string;
         "variant": 'primary' | 'secondary' | 'supplementary';
     }
+    interface DsCheckbox {
+        "assistiveText"?: string;
+        "checkboxId"?: string;
+        "checked": boolean;
+        "disabled": boolean;
+        "errorText": string;
+        "errorsDisabled": boolean;
+        "indeterminate": boolean;
+        "legend"?: string;
+        "optional": boolean;
+        "optionalText"?: string;
+        "required": boolean;
+        "text"?: string;
+    }
+    interface DsCheckboxGroup {
+        "assistiveText"?: string;
+        "checked": boolean;
+        "checkedChildElementCount": number;
+        "direction": 'horizontal' | 'vertical';
+        "disabled": boolean;
+        "errorText": string;
+        "legend"?: string;
+        "parentCheckedCount": number;
+        /**
+          * Updates child elements' checked state.
+          * @param newValue New checked state.
+         */
+        "setChecked": (newValue: boolean) => Promise<void>;
+        "text": string;
+    }
     interface DsIcon {
         "colour": string;
         "dsTitle": string;
@@ -45,15 +79,23 @@ export namespace Components {
         "role": string;
         "size": string;
     }
+    interface DsInputValidity {
+        "text": string;
+        "type": InputValidityType;
+        "validityRole"?: InputValidityRole;
+    }
     interface DsLink {
         "download"?: boolean;
         "href": string;
         "icon": string;
+        "iconHidden"?: boolean;
         "iconPosition": LinkIconPosition;
+        "iconTitle"?: string;
         "language"?: LinkLang;
+        "linkAriaLabel"?: string;
         "size"?: LinkSize;
         "target"?: LinkTarget;
-        "text"?: string;
+        "text": string;
         "variant": LinkVariant;
         "weight": LinkWeight;
     }
@@ -61,6 +103,7 @@ export namespace Components {
         "href": string;
         "iconPosition": LinkIconPosition;
         "language"?: LinkLang;
+        "linkAriaLabel"?: string;
         "target"?: LinkTarget;
         "text"?: string;
     }
@@ -98,6 +141,14 @@ export namespace Components {
     interface DsVisuallyHidden {
     }
 }
+export interface DsCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsCheckboxElement;
+}
+export interface DsCheckboxGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsCheckboxGroupElement;
+}
 declare global {
     interface HTMLDsAccordionElement extends Components.DsAccordion, HTMLStencilElement {
     }
@@ -111,12 +162,54 @@ declare global {
         prototype: HTMLDsButtonElement;
         new (): HTMLDsButtonElement;
     };
+    interface HTMLDsCheckboxElementEventMap {
+        "dsCheckboxChange": CheckboxChangeEvent;
+        "dsCheckboxError": string;
+    }
+    interface HTMLDsCheckboxElement extends Components.DsCheckbox, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsCheckboxElementEventMap>(type: K, listener: (this: HTMLDsCheckboxElement, ev: DsCheckboxCustomEvent<HTMLDsCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsCheckboxElementEventMap>(type: K, listener: (this: HTMLDsCheckboxElement, ev: DsCheckboxCustomEvent<HTMLDsCheckboxElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsCheckboxElement: {
+        prototype: HTMLDsCheckboxElement;
+        new (): HTMLDsCheckboxElement;
+    };
+    interface HTMLDsCheckboxGroupElementEventMap {
+        "dsCheckboxGroupChange": CheckboxGroupChangeEvent;
+        "dsCheckboxGroupIndeterminateChildChange": CheckboxGroupIndeterminateChildChangeEvent;
+    }
+    interface HTMLDsCheckboxGroupElement extends Components.DsCheckboxGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsCheckboxGroupElementEventMap>(type: K, listener: (this: HTMLDsCheckboxGroupElement, ev: DsCheckboxGroupCustomEvent<HTMLDsCheckboxGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsCheckboxGroupElementEventMap>(type: K, listener: (this: HTMLDsCheckboxGroupElement, ev: DsCheckboxGroupCustomEvent<HTMLDsCheckboxGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsCheckboxGroupElement: {
+        prototype: HTMLDsCheckboxGroupElement;
+        new (): HTMLDsCheckboxGroupElement;
+    };
     interface HTMLDsIconElement extends Components.DsIcon, HTMLStencilElement {
     }
     var HTMLDsIconElement: {
         prototype: HTMLDsIconElement;
         new (): HTMLDsIconElement;
     };
+    interface HTMLDsInputValidityElement extends Components.DsInputValidity, HTMLStencilElement {
+    }
+    var HTMLDsInputValidityElement: {
+        prototype: HTMLDsInputValidityElement;
+        new (): HTMLDsInputValidityElement;
+    };
     interface HTMLDsLinkElement extends Components.DsLink, HTMLStencilElement {
     }
     var HTMLDsLinkElement: {
@@ -144,7 +237,10 @@ declare global {
     interface HTMLElementTagNameMap {
         "ds-accordion": HTMLDsAccordionElement;
         "ds-button": HTMLDsButtonElement;
+        "ds-checkbox": HTMLDsCheckboxElement;
+        "ds-checkbox-group": HTMLDsCheckboxGroupElement;
         "ds-icon": HTMLDsIconElement;
+        "ds-input-validity": HTMLDsInputValidityElement;
         "ds-link": HTMLDsLinkElement;
         "ds-link-with-arrow": HTMLDsLinkWithArrowElement;
         "ds-text-input": HTMLDsTextInputElement;
@@ -181,6 +277,35 @@ declare namespace LocalJSX {
         "value"?: string;
         "variant"?: 'primary' | 'secondary' | 'supplementary';
     }
+    interface DsCheckbox {
+        "assistiveText"?: string;
+        "checkboxId"?: string;
+        "checked"?: boolean;
+        "disabled"?: boolean;
+        "errorText"?: string;
+        "errorsDisabled"?: boolean;
+        "indeterminate"?: boolean;
+        "legend"?: string;
+        "onDsCheckboxChange"?: (event: DsCheckboxCustomEvent<CheckboxChangeEvent>) => void;
+        "onDsCheckboxError"?: (event: DsCheckboxCustomEvent<string>) => void;
+        "optional"?: boolean;
+        "optionalText"?: string;
+        "required"?: boolean;
+        "text"?: string;
+    }
+    interface DsCheckboxGroup {
+        "assistiveText"?: string;
+        "checked"?: boolean;
+        "checkedChildElementCount"?: number;
+        "direction"?: 'horizontal' | 'vertical';
+        "disabled"?: boolean;
+        "errorText"?: string;
+        "legend"?: string;
+        "onDsCheckboxGroupChange"?: (event: DsCheckboxGroupCustomEvent<CheckboxGroupChangeEvent>) => void;
+        "onDsCheckboxGroupIndeterminateChildChange"?: (event: DsCheckboxGroupCustomEvent<CheckboxGroupIndeterminateChildChangeEvent>) => void;
+        "parentCheckedCount"?: number;
+        "text"?: string;
+    }
     interface DsIcon {
         "colour"?: string;
         "dsTitle"?: string;
@@ -189,15 +314,23 @@ declare namespace LocalJSX {
         "role"?: string;
         "size"?: string;
     }
+    interface DsInputValidity {
+        "text"?: string;
+        "type"?: InputValidityType;
+        "validityRole"?: InputValidityRole;
+    }
     interface DsLink {
         "download"?: boolean;
         "href": string;
         "icon"?: string;
+        "iconHidden"?: boolean;
         "iconPosition"?: LinkIconPosition;
+        "iconTitle"?: string;
         "language"?: LinkLang;
+        "linkAriaLabel"?: string;
         "size"?: LinkSize;
         "target"?: LinkTarget;
-        "text"?: string;
+        "text": string;
         "variant"?: LinkVariant;
         "weight"?: LinkWeight;
     }
@@ -205,6 +338,7 @@ declare namespace LocalJSX {
         "href": string;
         "iconPosition"?: LinkIconPosition;
         "language"?: LinkLang;
+        "linkAriaLabel"?: string;
         "target"?: LinkTarget;
         "text"?: string;
     }
@@ -242,7 +376,10 @@ declare namespace LocalJSX {
     interface IntrinsicElements {
         "ds-accordion": DsAccordion;
         "ds-button": DsButton;
+        "ds-checkbox": DsCheckbox;
+        "ds-checkbox-group": DsCheckboxGroup;
         "ds-icon": DsIcon;
+        "ds-input-validity": DsInputValidity;
         "ds-link": DsLink;
         "ds-link-with-arrow": DsLinkWithArrow;
         "ds-text-input": DsTextInput;
@@ -255,7 +392,10 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "ds-accordion": LocalJSX.DsAccordion & JSXBase.HTMLAttributes<HTMLDsAccordionElement>;
             "ds-button": LocalJSX.DsButton & JSXBase.HTMLAttributes<HTMLDsButtonElement>;
+            "ds-checkbox": LocalJSX.DsCheckbox & JSXBase.HTMLAttributes<HTMLDsCheckboxElement>;
+            "ds-checkbox-group": LocalJSX.DsCheckboxGroup & JSXBase.HTMLAttributes<HTMLDsCheckboxGroupElement>;
             "ds-icon": LocalJSX.DsIcon & JSXBase.HTMLAttributes<HTMLDsIconElement>;
+            "ds-input-validity": LocalJSX.DsInputValidity & JSXBase.HTMLAttributes<HTMLDsInputValidityElement>;
             "ds-link": LocalJSX.DsLink & JSXBase.HTMLAttributes<HTMLDsLinkElement>;
             "ds-link-with-arrow": LocalJSX.DsLinkWithArrow & JSXBase.HTMLAttributes<HTMLDsLinkWithArrowElement>;
             "ds-text-input": LocalJSX.DsTextInput & JSXBase.HTMLAttributes<HTMLDsTextInputElement>;

package/dist/types/utils/controls/controlUtils.d.ts

@@ -0,0 +1,2 @@
+export declare const getOptionalText: (text: string, optionalText?: string) => string;
+export declare const getRequiredText: (text: string) => string;

package/dist/types/utils/link/linkUtils.d.ts

@@ -1,2 +1,3 @@
 export declare const opensInNewTab: (target: string) => target is "_blank";
 export declare const visuallyHiddenAssistiveText: (lang: string) => "Avautuu uuteen välilehteen" | "Öppnas i en ny flik" | "Opens in a new tab";
+export declare const getAriaLabel: (text: string, ariaLabel?: string) => string;

package/dist/types/utils/typography/typographyUtils.d.ts

@@ -15,3 +15,8 @@ export declare const createCategorySection: (category: string, fonts: {
     value: string;
 }[], renderedCategories: Set<string>) => HTMLDivElement;
 export declare const getCSSClasses: (prefix: string) => string[];
+export declare const headingSizes: readonly ["2xLarge", "xLarge", "large", "medium", "small", "xSmall"];
+export type HeadingSize = typeof headingSizes[number];
+export declare const getHeadingVariables: (size: HeadingSize, isDesktop: boolean) => {
+    [key: string]: string;
+};