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

package/dist/hydrate/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@uh-design-system/component-library/hydrate",
+  "description": "ComponentLibrary component hydration app.",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./index.js",
+      "import": "./index.mjs"
+    }
+  }
+}

package/dist/styles/helpers.css

@@ -1,4 +1,12 @@
-.dsNoStyleLeak * {
+/*
+ * This file is used to import helper styles and make them available for use
+ * in other SCSS files independently.
+ *
+ * This file will be preprocessed and copied to the dist folder in the build process.
+ *
+ * See the build script in package.json for more details.
+ */
+.ds-no-style-leak * {
   all: unset;
   box-sizing: border-box;
   display: block;

package/dist/styles/helpers.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/00-foundations/helpers/_no-style-leak.scss"],"names":[],"mappings":"AACE;EACE;EACA;EACA","file":"helpers.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/styles/helpers.scss","../../src/components/00-foundations/helpers/_no-style-leak.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACCE;EACE;EACA;EACA","file":"helpers.css"}

package/dist/styles/mixins/_breakpoints.scss

@@ -8,7 +8,6 @@
       @content;
     }
   } @else {
-    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
-        + "Available breakpoints are: #{map-keys($breakpoints)}.";
+    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. Available breakpoints are: #{map-keys($breakpoints)}.";
   }
 }

package/dist/styles/mixins/_focus.scss

@@ -3,10 +3,8 @@
 
 @mixin dsFocusStyles($focusInset, $focusBoxShadowColor, $focusOutlineColor, $inset, $offsetMultiplier) {
   box-shadow: string.unquote($focusInset) 0 0 0 if($inset, var(--ds-borderWidth-thick), var(--ds-borderWidth-thin)) $focusBoxShadowColor;
-  outline-color: $focusOutlineColor;
+  outline: var(--ds-borderWidth-thin) solid $focusOutlineColor;
   outline-offset: calc(if($inset, calc(var(--ds-borderWidth-thin) * -1), var(--ds-borderWidth-thin)) * $offsetMultiplier);
-  outline-style: solid;
-  outline-width: var(--ds-borderWidth-thin);
 }
 
 @mixin dsFocusRing($inverted: false, $inset: false, $focusVisible: true, $focusWithin: false, $offsetMultiplier: 1) {
@@ -14,13 +12,13 @@
   $focusBoxShadowColor: if($inverted, colours.$dsBorderColorBlack, colours.$dsBorderColorWhite);
   $focusInset: if($inset, inset, '');
 
-  @if ($focusVisible) {
+  @if $focusVisible {
     &:focus-visible {
       @include dsFocusStyles($focusInset, $focusBoxShadowColor, $focusOutlineColor, $inset, $offsetMultiplier);
     }
   }
 
-  @if ($focusWithin) {
+  @if $focusWithin {
     &:focus-within {
       @include dsFocusStyles($focusInset, $focusBoxShadowColor, $focusOutlineColor, $inset, $offsetMultiplier);
     }

package/dist/styles/mixins.scss

@@ -1,9 +1,11 @@
-// 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.
+/*
+ * 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';

package/dist/styles/variables.css

@@ -1,3 +1,11 @@
+/*
+ * This file is used to import css variables and make them available for use
+ * in other SCSS files independently.
+ *
+ * This file will be preprocessed and copied to the dist folder in the build process.
+ *
+ * See the build script in package.json for more details.
+ */
 :root {
   --ds-borderWidth-none: 0px;
   --ds-borderWidth-hairline: 1px;
@@ -16,36 +24,36 @@
 }
 
 :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-overlay-black-00: rgb(0 0 0 / 0%);
+  --ds-overlay-black-05: rgb(0 0 0 / 5%);
+  --ds-overlay-black-10: rgb(0 0 0 / 10%);
+  --ds-overlay-black-15: rgb(0 0 0 / 15%);
+  --ds-overlay-black-30: rgb(0 0 0 / 30%);
+  --ds-overlay-black-40: rgb(0 0 0 / 40%);
+  --ds-overlay-black-50: rgb(0 0 0 / 50%);
+  --ds-overlay-black-70: rgb(0 0 0 / 70%);
+  --ds-overlay-black-80: rgb(0 0 0 / 80%);
+  --ds-overlay-white-00: rgb(255 255 255 / 0%);
+  --ds-overlay-white-05: rgb(255 255 255 / 5%);
+  --ds-overlay-white-10: rgb(255 255 255 / 10%);
+  --ds-overlay-white-15: rgb(255 255 255 / 15%);
+  --ds-overlay-white-30: rgb(255 255 255 / 30%);
+  --ds-overlay-white-40: rgb(255 255 255 / 40%);
+  --ds-overlay-white-50: rgb(255 255 255 / 50%);
+  --ds-overlay-white-70: rgb(255 255 255 / 70%);
+  --ds-overlay-white-80: rgb(255 255 255 / 80%);
+  --ds-palette-black: #000;
+  --ds-palette-white: #fff;
   --ds-palette-black-03: #f7f7f7;
   --ds-palette-black-05: #f2f2f2;
   --ds-palette-black-10: #e6e6e6;
-  --ds-palette-black-20: #cccccc;
+  --ds-palette-black-20: #ccc;
   --ds-palette-black-30: #b3b3b3;
-  --ds-palette-black-40: #999999;
+  --ds-palette-black-40: #999;
   --ds-palette-black-50: #808080;
-  --ds-palette-black-60: #666666;
+  --ds-palette-black-60: #666;
   --ds-palette-black-70: #4d4d4d;
-  --ds-palette-black-80: #333333;
+  --ds-palette-black-80: #333;
   --ds-palette-black-90: #1a1a1a;
   --ds-palette-black-95: #0c0c0c;
   --ds-palette-blue-05: #e5f8ff;

package/dist/styles/variables.css.map

@@ -1 +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"}
+{"version":3,"sourceRoot":"","sources":["../../src/styles/variables.scss","../../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":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACEA;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-accordion/ds-accordion.d.ts

@@ -1,14 +1,17 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class DsAccordion {
-    variant: 'default' | 'compact';
-    borderAligned: boolean;
-    openByDefault: boolean;
-    accordionId: string;
-    headingLevel: number;
-    useCloseButton: boolean;
-    closeButtonLabel: string;
-    hideTopBorder: boolean;
+    dsVariant: 'default' | 'compact';
+    dsBorderAligned: boolean;
+    dsOpenByDefault: boolean;
+    dsAccordionId: string;
+    dsHeadingLevel: number;
+    dsUseCloseButton: boolean;
+    dsCloseButtonLabel: string;
+    dsHideTopBorder: boolean;
+    dsHideBottomBorder: boolean;
     isExpanded: boolean;
     host: HTMLElement;
+    dsToggle: EventEmitter<boolean>;
     private headerButtonRef?;
     private shouldMoveFocus;
     componentWillLoad(): void;

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

@@ -3,20 +3,20 @@ export declare class DsButton {
     private buttonEl;
     private pressedKeys;
     el: HTMLElement;
-    value: string;
-    variant: 'primary' | 'secondary' | 'supplementary';
-    colour: 'blue' | 'black' | 'white';
-    size: 'small' | 'medium';
-    fontWeight: string;
-    icon: string;
-    iconPosition: 'start' | 'end';
-    type: 'button' | 'submit' | 'reset';
-    disabled: boolean;
-    isLoading: boolean;
-    useSpinner: boolean;
-    spinnerHiddenText: string;
-    fullWidth: boolean;
-    ariaDisabled: string;
+    dsValue: string;
+    dsVariant: 'primary' | 'secondary' | 'supplementary';
+    dsColour: 'blue' | 'black' | 'white';
+    dsSize: 'small' | 'medium';
+    dsIcon: string;
+    dsIconPosition: 'start' | 'end';
+    dsType: 'button' | 'submit' | 'reset';
+    dsDisabled: boolean;
+    dsIsLoading: boolean;
+    dsUseSpinner: boolean;
+    dsSpinnerHiddenText: string;
+    dsFullWidth: boolean;
+    dsAriaDisabled: string;
+    dsFocus(): Promise<void>;
     componentWillLoad(): void;
     private handleKeyDown;
     private handleKeyUp;

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

@@ -20,3 +20,4 @@ export declare const IconOnly: Story;
 export declare const FullWidth: Story;
 export declare const FullWidthWithStartIcon: Story;
 export declare const FullWidthWithEndIcon: Story;
+export declare const ProgrammaticFocus: Story;

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

@@ -0,0 +1,20 @@
+type DsCardUrlTarget = '_blank' | '_self' | '_parent' | '_top' | '_unfencedTop';
+type DsCardVariant = 'filled' | 'outlined';
+export declare class DsCard {
+    dsVariant: DsCardVariant;
+    dsHeading: string;
+    dsHeadingLevel: number;
+    dsDescription?: string;
+    dsUrl?: string;
+    dsUrlTarget: DsCardUrlTarget;
+    dsImageUrl?: string;
+    dsImageAlt?: string;
+    dsEyebrow?: string;
+    dsSubtitle?: string;
+    dsShowArrow?: boolean;
+    el: HTMLElement;
+    handleClick(e: MouseEvent): void;
+    handleKeydown(e: KeyboardEvent): void;
+    render(): any;
+}
+export {};

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

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsCard } from '../ds-card';
+declare const meta: Meta<typeof DsCard.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const AsLink: Story;
+export declare const WithSlotContent: Story;
+export declare const CourseExample: Story;

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

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { DsCard } from '../ds-card';
+declare const meta: Meta<typeof DsCard.prototype>;
+export default meta;
+type Story = StoryObj;
+export declare const Outlined: Story;
+export declare const Filled: Story;
+export declare const WithSlotContent: Story;

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

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

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class DsCheckbox {
     private checkboxGroup;
     private inputElem;
@@ -8,19 +9,20 @@ export declare class DsCheckbox {
     private labelClicked;
     el: HTMLElement;
     internals: ElementInternals;
-    identifier?: 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;
+    dsId?: string;
+    dsChecked: boolean;
+    dsLegend?: string;
+    dsAssistiveText?: string;
+    dsText?: string;
+    dsIndeterminate: boolean;
+    dsDisabled: boolean;
+    dsErrorText: string;
+    dsErrorsDisabled: boolean;
+    dsRequired: boolean;
+    dsOptional: boolean;
+    dsOptionalText?: string;
+    dsAriaLabel: string;
+    dsChange: EventEmitter<boolean>;
     invalid: boolean;
     initialChecked: boolean;
     validationMessage?: string;
@@ -34,6 +36,7 @@ export declare class DsCheckbox {
     disconnectedCallback(): void;
     private updateInvalidState;
     componentWillLoad(): void;
+    dsCheckedObserver(isChecked: boolean): void;
     handleInput: (e: Event) => void;
     handleKeyUp: (event: KeyboardEvent) => void;
     handleBlur: () => void;

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

@@ -15,24 +15,32 @@ export declare class DsCheckboxGroup {
     private readonly nestedId;
     private inheritedAttributes;
     el: HTMLElement;
+    internals: ElementInternals;
     dsCheckboxGroupChange: EventEmitter<DsCheckboxGroupChangeEvent>;
     dsCheckboxGroupIndeterminateChildChange: EventEmitter<DsCheckboxGroupIndeterminateChildChangeEvent>;
     dsCheckboxGroupInvalidStateChange: EventEmitter<boolean>;
-    legend?: string;
-    assistiveText?: string;
-    direction: 'horizontal' | 'vertical';
-    errorText: string;
-    text: string;
-    checked: boolean;
-    disabled: boolean;
+    dsLegend?: string;
+    dsAssistiveText?: string;
+    dsDirection: 'horizontal' | 'vertical';
+    dsErrorText: string;
+    dsText: string;
+    dsChecked: boolean;
+    dsDisabled: boolean;
+    dsRequired: boolean;
+    dsAllRequired: boolean;
+    dsOptional: boolean;
+    dsOptionalText?: string;
     childElementsCount: number;
     checkedChildElementCount: number;
     isIndeterminate: boolean;
     indeterminateChildCheckboxCount: number;
+    showInternalsValidationMessage: boolean;
     private elementIs;
     private elementIsCheckbox;
     private elementIsCheckboxGroup;
+    private getLegendText;
     private getAriaDescribedBy;
+    private getValidationMessage;
     private getChildElements;
     private getChildCheckboxElements;
     private updateChildElements;
@@ -48,6 +56,7 @@ export declare class DsCheckboxGroup {
     private updateCheckedChildElementCount;
     listenCheckboxChange(event: Event): void;
     listenCheckboxGroupChange(event: CustomEvent<DsCheckboxGroupChangeEvent>): void;
+    formResetCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;

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

@@ -7,5 +7,8 @@ export declare const Vertical: Story;
 export declare const VerticalInvalid: Story;
 export declare const Horizontal: Story;
 export declare const HorizontalInvalid: Story;
+export declare const Required: Story;
+export declare const AllRequired: Story;
+export declare const Optional: Story;
 export declare const Nested: Story;
 export declare const DeeplyNested: Story;

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

@@ -1,10 +1,11 @@
+type Size = '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem';
 export declare class DsIcon {
-    name: string;
-    colour: string;
-    size: string;
+    dsName: string;
+    dsColour: string;
+    dsSize: Size;
     dsTitle: string;
-    role: string;
-    hidden: boolean;
+    dsRole: string;
+    dsHidden: boolean;
     message: string;
     private getIcon;
     private parseSvg;
@@ -12,3 +13,4 @@ export declare class DsIcon {
     private setIconAttributes;
     render(): any;
 }
+export {};

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

@@ -2,30 +2,30 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class DsRadioButton {
     private radioGroup;
     private inputElem;
-    dsRadioButtonChecked: EventEmitter;
+    dsChange: EventEmitter<boolean>;
+    dsRadioButtonChecked: EventEmitter<void>;
     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;
+    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;
-    setFocus(): Promise<void>;
+    dsFocus(): Promise<void>;
     setFocusable(flag: boolean): Promise<void>;
     setChecked(): Promise<void>;
+    dsCheckedObserver(isChecked: boolean): void;
     private inheritedAttributes;
     private getValidationMessage;
     componentWillLoad(): void;

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

@@ -11,5 +11,5 @@ 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;
+export declare const Focused: Story;

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

@@ -5,19 +5,29 @@ export declare class DsRadioButtonGroup {
     private readonly assistiveTextId;
     private inheritedAttributes;
     el: HTMLElement;
-    legend?: string;
-    assistiveText?: string;
-    initialValue?: string;
-    direction: 'horizontal' | 'vertical';
-    errorText: string;
-    value?: string;
+    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.features.stories.d.ts

@@ -7,4 +7,5 @@ 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-spinner/ds-spinner.d.ts

@@ -4,13 +4,13 @@ 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;
+    dsText: string;
+    dsSize: SpinnerSize;
+    dsSpinnerTextPosition: SpinnerTextPosition;
+    dsSpinnerColor: SpinnerColor;
+    dsUseRoleAlert: boolean;
+    dsUseAriaLive: boolean;
+    dsHiddenAssistiveText: string;
     componentWillLoad(): void;
     render(): any;
 }