@uh-design-system/component-library 0.5.2 → 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

@@ -0,0 +1,15 @@
+/*
+ * 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;
+}
+
+/*# sourceMappingURL=helpers.css.map */

package/dist/styles/helpers.css.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use 'imports-default/imports' as breakpoints;
+
+// Mixin for media queries
+@mixin dsBreakpointUpFrom($breakpoint) {
+  @if map.has-key(breakpoints.$breakpoints, $breakpoint) {
+    @media (min-width: map.get(breakpoints.$breakpoints, $breakpoint)) {
+      @content;
+    }
+  } @else {
+    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. Available breakpoints are: #{map-keys($breakpoints)}.";
+  }
+}

package/dist/styles/mixins/_focus.scss

@@ -0,0 +1,26 @@
+@use 'sass:string';
+@use 'imports-default/imports' as colours;
+
+@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: var(--ds-borderWidth-thin) solid $focusOutlineColor;
+  outline-offset: calc(if($inset, calc(var(--ds-borderWidth-thin) * -1), var(--ds-borderWidth-thin)) * $offsetMultiplier);
+}
+
+@mixin dsFocusRing($inverted: false, $inset: false, $focusVisible: true, $focusWithin: false, $offsetMultiplier: 1) {
+  $focusOutlineColor: if($inverted, colours.$dsBorderColorWhite, colours.$dsBorderColorBlack);
+  $focusBoxShadowColor: if($inverted, colours.$dsBorderColorBlack, colours.$dsBorderColorWhite);
+  $focusInset: if($inset, inset, '');
+
+  @if $focusVisible {
+    &:focus-visible {
+      @include dsFocusStyles($focusInset, $focusBoxShadowColor, $focusOutlineColor, $inset, $offsetMultiplier);
+    }
+  }
+
+  @if $focusWithin {
+    &:focus-within {
+      @include dsFocusStyles($focusInset, $focusBoxShadowColor, $focusOutlineColor, $inset, $offsetMultiplier);
+    }
+  }
+}

package/dist/styles/mixins/_wrapper.scss

@@ -0,0 +1,5 @@
+@mixin dsWrapper($gap: var(--ds-spacing-xSmall)) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $gap;
+}

package/dist/styles/mixins/imports-default/_imports.scss

@@ -0,0 +1,2 @@
+@forward '../tokens/breakpoints';
+@forward '../tokens/semantic-colours';

package/dist/styles/mixins/tokens/_breakpoints.scss

@@ -0,0 +1,13 @@
+$breakpoints: (
+  'xSmall': 20rem, // 320px
+  'small': 30rem,  // 480px
+  'medium': 60rem, // 960px
+  'large': 75rem,  // 1200px
+  'xLarge': 90rem, // 1440px
+);
+
+:root {
+  @each $name, $value in $breakpoints {
+    --ds-breakpoint-#{$name}: #{$value};
+  }
+}

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,12 @@
+/*
+ * 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,176 @@
+/*
+ * 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;
+  --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 / 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: #ccc;
+  --ds-palette-black-30: #b3b3b3;
+  --ds-palette-black-40: #999;
+  --ds-palette-black-50: #808080;
+  --ds-palette-black-60: #666;
+  --ds-palette-black-70: #4d4d4d;
+  --ds-palette-black-80: #333;
+  --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/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,19 +3,24 @@ 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;
-    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;
+    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-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,43 +1,42 @@
 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;
-    assistiveText?: string;
-    text?: string;
-    indeterminate: boolean;
-    disabled: boolean;
-    errorText: string;
-    errorsDisabled: boolean;
-    required: boolean;
-    optional: boolean;
-    optionalText?: string;
-    ariaLabel: string;
-    value: 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;
     private setIds;
     private getValidationMessage;
     private getLegendText;
     private getCheckboxText;
     private getAriaDescribedBy;
-    private restoreInitialState;
-    private setInitialState;
     formResetCallback(): void;
+    connectedCallback(): void;
+    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

@@ -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;
@@ -15,23 +15,32 @@ export declare class DsCheckboxGroup {
     private readonly nestedId;
     private inheritedAttributes;
     el: HTMLElement;
+    internals: ElementInternals;
     dsCheckboxGroupChange: EventEmitter<DsCheckboxGroupChangeEvent>;
     dsCheckboxGroupIndeterminateChildChange: EventEmitter<DsCheckboxGroupIndeterminateChildChangeEvent>;
-    legend?: string;
-    assistiveText?: string;
-    direction: 'horizontal' | 'vertical';
-    errorText: string;
-    text: string;
-    checked: boolean;
-    disabled: boolean;
+    dsCheckboxGroupInvalidStateChange: EventEmitter<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;
@@ -41,12 +50,13 @@ 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;
+    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 {};