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

package/dist/cjs/{linkUtils-695da37c.js → linkUtils-e911e899.js}

@@ -11,6 +11,16 @@ 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(' ');
+};
 
+exports.getAriaLabel = getAriaLabel;
 exports.opensInNewTab = opensInNewTab;
 exports.visuallyHiddenAssistiveText = visuallyHiddenAssistiveText;

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bfa0f441.js');
+const index = require('./index-b2bddcf4.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["ds-visually-hidden.cjs",[[1,"ds-visually-hidden"]]],["ds-accordion_3.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[1,"ds-link-with-arrow",{"text":[1],"iconPosition":[1,"icon-position"],"href":[1],"target":[1],"language":[1,"lang"]}]]]], options);
+  return index.bootstrapLazy([["ds-accordion_3.cjs",[[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.cjs",[[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.cjs",[[1,"ds-visually-hidden"]]],["ds-text-input.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[0,"ds-input-validity",{"text":[1],"type":[1],"validityRole":[1,"role"],"identifier":[32]}]]],["ds-checkbox.cjs",[[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);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/utils-c9113835.js

@@ -0,0 +1,18 @@
+'use strict';
+
+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++}`;
+    }
+}
+
+exports.idGenerator = idGenerator;
+exports.remToPx = remToPx;

package/dist/collection/accessibility/accessibility.stories.js

@@ -0,0 +1,10 @@
+import AccessibilityDocs from "./Accessibility.mdx";
+const meta = {
+    title: 'Accessibility',
+    parameters: {
+        docs: {
+            page: AccessibilityDocs,
+        },
+    },
+};
+export default meta;

package/dist/collection/accessibility/stories/ariaLabel.stories.js

@@ -0,0 +1,19 @@
+import { html } from "lit";
+const meta = {
+    title: 'Accessibility/aria-label',
+};
+export default meta;
+export const HowToAriaLabel = {
+    name: 'How to "aria-label"',
+    render: () => html `
+    <ds-button aria-label="My profile Some other relevant thing" value="My profile"></ds-button>
+    <!This is a good example.>
+  `,
+};
+export const HowNotToAriaLabel = {
+    name: 'How not to "aria-label"',
+    render: () => html `
+    <ds-button aria-label="this will override the visible name of the button" value="My profile"></ds-button>
+    <!Think of this as a very bad example.>
+  `,
+};

package/dist/collection/accessibility/stories/ariaLabelledBy.stories.js

@@ -0,0 +1,49 @@
+import { html } from "lit";
+import { litTemplateResultToString } from "../../utils/utils";
+const meta = {
+    title: 'Accessibility/aria-labelledby',
+};
+export default meta;
+const howToAriaLabelledByDOM = html `
+  <div class="ds-sb-how-to-aria-labelled-by">
+    <div class="ds-sb-how-to-aria-labelled-by__card">
+      <h3 id="stu_1">Student 1</h3>
+      <p>Faculty of Science</p>
+      <ds-button id="button1" aria-labelledby="button1 stu_1" value="Add"></ds-button>
+    </div>
+    <div class="ds-sb-how-to-aria-labelled-by__card">
+      <h3 id="stu_2">Student 2</h3>
+      <p>Faculty of Arts</p>
+      <ds-button id="button2" aria-labelledby="button2 stu_2" value="Add"></ds-button>
+    </div>
+  </div>
+`;
+export const HowToAriaLabelledBy = {
+    name: 'How to "aria-labelledby"',
+    parameters: {
+        docs: {
+            source: {
+                code: litTemplateResultToString(howToAriaLabelledByDOM),
+            },
+        },
+    },
+    render: () => html `
+    <style>
+      .ds-sb-how-to-aria-labelled-by {
+        display: grid;
+        gap: 1rem;
+        grid-template-columns: 1fr;
+
+        @media (min-width: 60rem) {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+      .ds-sb-how-to-aria-labelled-by .ds-sb-how-to-aria-labelled-by__card {
+        padding: 1em;
+        background-color: #f7f7f7;
+        outline: 1px solid;
+      }
+    </style>
+    ${howToAriaLabelledByDOM}
+  `,
+};

package/dist/collection/accessibility/stories/naming.stories.js

@@ -0,0 +1,39 @@
+import { html } from "lit";
+import { litTemplateResultToString } from "../../utils/utils";
+const meta = {
+    title: 'Accessibility/Naming',
+};
+export default meta;
+const howNamingWorksDOM = html `
+  <div class="ds-sb-how-naming-works">
+    <div>
+      <ds-button value="Continue"></ds-button>
+      <!The button gets it's accessible name from its text content>
+    </div>
+
+    <ds-text-input type="text" label="First name"></ds-text-input>
+    <!The text input gets its accessible name from the label/for structure>
+
+    <ds-link href="#" text="Apply to University of Helsinki"></ds-link>
+    <!The link gets it's accessible name from its text content>
+  </div>
+`;
+export const HowNamingWorks = {
+    parameters: {
+        docs: {
+            source: {
+                code: litTemplateResultToString(howNamingWorksDOM)
+            }
+        },
+    },
+    render: () => html `
+    <style>
+      .ds-sb-how-naming-works {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+    </style>
+    ${howNamingWorksDOM}
+  `,
+};

package/dist/collection/collection-manifest.json

@@ -1,8 +1,11 @@
 {
   "entries": [
+    "components/01-base-components/ds-checkbox/ds-checkbox.js",
+    "components/01-base-components/ds-checkbox-group/ds-checkbox-group.js",
     "components/01-base-components/ds-accordion/ds-accordion.js",
     "components/01-base-components/ds-button/ds-button.js",
     "components/01-base-components/ds-icon/ds-icon.js",
+    "components/01-base-components/ds-input-validity/ds-input-validity.js",
     "components/01-base-components/ds-link/ds-link.js",
     "components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.js",
     "components/01-base-components/ds-text-input/ds-text-input.js",
@@ -10,7 +13,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.26.0",
+    "version": "4.27.2",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],

package/dist/collection/components/00-foundations/icons/categories/information.js

@@ -49,6 +49,8 @@ import PieChartIcon from "@material-symbols/svg-700/sharp/pie_chart.svg";
 import PieChartFillIcon from "@material-symbols/svg-700/sharp/pie_chart-fill.svg";
 import TableIcon from "@material-symbols/svg-700/sharp/table.svg";
 import TableFillIcon from "@material-symbols/svg-700/sharp/table-fill.svg";
+import DSCheckSmall from "../../../../../custom-icons/check_small.svg";
+import DSCheckIndeterminateSmall from "../../../../../custom-icons/check_indeterminate_small.svg";
 export const icons = [
     { name: 'calendar_month', component: CalendarMonthIcon, category: category },
     { name: 'calendar_month_fill', component: CalendarMonthFillIcon, category: category },
@@ -100,4 +102,6 @@ export const icons = [
     { name: 'pie_chart_fill', component: PieChartFillIcon, category: category },
     { name: 'table', component: TableIcon, category: category },
     { name: 'table_fill', component: TableFillIcon, category: category },
+    { name: 'ds_check_small', component: DSCheckSmall, category: category },
+    { name: 'ds_check_indeterminate_small', component: DSCheckIndeterminateSmall, category: category },
 ];

package/dist/collection/components/00-foundations/typography/stories/typography.stories.js

@@ -2,9 +2,9 @@ import "../_typography.scss";
 import "../_base.scss";
 import "../_headings.scss";
 import "../_bodyText.scss";
-import { getTypographyVariables, createCategorySection, categories } from "../../../../utils/typography/typographyUtils";
+import { getTypographyVariables, createCategorySection, categories, getHeadingVariables, headingSizes } from "../../../../utils/typography/typographyUtils";
 import { html } from "lit";
-import { generateLoremIpsum } from "../../../../utils/utils";
+import { formatAsPx, generateLoremIpsum, pxToRem } from "../../../../utils/utils";
 const meta = {
     title: 'Foundations/Typography',
 };
@@ -27,61 +27,61 @@ export const TokenClasses = {
     render: ({ headingExample, textExample }) => html `
     <div>
       <h2>Heading styles</h2>
-      <div class="ds-heading--2xLarge">${headingExample} </div>
-      <div class="ds-heading--xLarge">${headingExample} </div>
-      <div class="ds-heading--large">${headingExample} </div>
-      <div class="ds-heading--medium">${headingExample} </div>
-      <div class="ds-heading--small">${headingExample} </div>
-      <div class="ds-heading--xSmall">${headingExample} </div>
-      
+      <div class="ds-heading--2xLarge">${headingExample}</div>
+      <div class="ds-heading--xLarge">${headingExample}</div>
+      <div class="ds-heading--large">${headingExample}</div>
+      <div class="ds-heading--medium">${headingExample}</div>
+      <div class="ds-heading--small">${headingExample}</div>
+      <div class="ds-heading--xSmall">${headingExample}</div>
+
       <h2>Text Styles</h2>
       <h3>Regular</h3>
-      <p class="ds-text--2xl-regular">${textExample} (2XL Regular) </p>
-      <p class="ds-text--xl-regular">${textExample} (XL Regular) </p>
-      <p class="ds-text--lg-regular">${textExample} (Large Regular) </p>
-      <p class="ds-text--md-regular">${textExample} (Medium Regular) </p>
-      <p class="ds-text--sm-regular">${textExample} (Small Regular) </p>
-      <p class="ds-text--xs-regular">${textExample} (XS Regular) </p>
+      <p class="ds-text--2xl-regular">${textExample} (2XL Regular)</p>
+      <p class="ds-text--xl-regular">${textExample} (XL Regular)</p>
+      <p class="ds-text--lg-regular">${textExample} (Large Regular)</p>
+      <p class="ds-text--md-regular">${textExample} (Medium Regular)</p>
+      <p class="ds-text--sm-regular">${textExample} (Small Regular)</p>
+      <p class="ds-text--xs-regular">${textExample} (XS Regular)</p>
       <h3>SemiBold</h3>
-      <p class="ds-text--2xl-semibold">${textExample} (2XL Semibold) </p>
-      <p class="ds-text--xl-semibold">${textExample} (XL Semibold) </p>
-      <p class="ds-text--lg-semibold">${textExample} (Large Semibold) </p>
-      <p class="ds-text--md-semibold">${textExample} (Medium Semibold) </p>
-      <p class="ds-text--sm-semibold">${textExample} (Small Semibold) </p>
-      <p class="ds-text--xs-semibold">${textExample} (XS Semibold) </p>
+      <p class="ds-text--2xl-semibold">${textExample} (2XL Semibold)</p>
+      <p class="ds-text--xl-semibold">${textExample} (XL Semibold)</p>
+      <p class="ds-text--lg-semibold">${textExample} (Large Semibold)</p>
+      <p class="ds-text--md-semibold">${textExample} (Medium Semibold)</p>
+      <p class="ds-text--sm-semibold">${textExample} (Small Semibold)</p>
+      <p class="ds-text--xs-semibold">${textExample} (XS Semibold)</p>
       <h3>Bold</h3>
-      <p class="ds-text--2xl-bold">${textExample} (2XL Bold) </p>
-      <p class="ds-text--xl-bold">${textExample} (XL Bold) </p>
-      <p class="ds-text--lg-bold">${textExample} (Large Bold) </p>
-      <p class="ds-text--md-bold">${textExample} (Medium Bold) </p>
-      <p class="ds-text--sm-bold">${textExample} (Small Bold) </p>
-      <p class="ds-text--xs-bold">${textExample} (XS Bold) </p>
+      <p class="ds-text--2xl-bold">${textExample} (2XL Bold)</p>
+      <p class="ds-text--xl-bold">${textExample} (XL Bold)</p>
+      <p class="ds-text--lg-bold">${textExample} (Large Bold)</p>
+      <p class="ds-text--md-bold">${textExample} (Medium Bold)</p>
+      <p class="ds-text--sm-bold">${textExample} (Small Bold)</p>
+      <p class="ds-text--xs-bold">${textExample} (XS Bold)</p>
 
       <h2>Bodytext</h2>
-      <p class="ds-bodyText--2xLarge">${textExample} (2xLarge) </p>
-      <p class="ds-bodyText--xLarge">${textExample} (xLarge) </p>
-      <p class="ds-bodyText--large">${textExample} (large) </p>
-      <p class="ds-bodyText--medium">${textExample} (medium) </p>
-      <p class="ds-bodyText--small">${textExample} (small) </p>
-      
+      <p class="ds-bodyText--2xLarge">${textExample} (2xLarge)</p>
+      <p class="ds-bodyText--xLarge">${textExample} (xLarge)</p>
+      <p class="ds-bodyText--large">${textExample} (large)</p>
+      <p class="ds-bodyText--medium">${textExample} (medium)</p>
+      <p class="ds-bodyText--small">${textExample} (small)</p>
+
       <h2>Fontweight</h2>
-      <p class="ds-font--regular">${textExample} (Regular) </p>
-      <p class="ds-font--semibold">${textExample} (Semibold) </p>
-      <p class="ds-font--semibold-plus">${textExample} (SemiboldPlus) </p>
-      <p class="ds-font--bold">${textExample} (Bold) </p>
-      
+      <p class="ds-font--regular">${textExample} (Regular)</p>
+      <p class="ds-font--semibold">${textExample} (Semibold)</p>
+      <p class="ds-font--semibold-plus">${textExample} (SemiboldPlus)</p>
+      <p class="ds-font--bold">${textExample} (Bold)</p>
+
       <h2>LetterSpacing</h2>
-      <p class="ds-tracking--xtight">${textExample} (xTight Spacing) </p>
-      <p class="ds-tracking--tight">${textExample} (Tight Spacing) </p>
-      <p class="ds-tracking--normal">${textExample} (Normal Spacing) </p>
-      <p class="ds-tracking--wide">${textExample} (Wide Spacing) </p>
-      <p class="ds-tracking--xwide">${textExample} (xWide Spacing) </p>
-      
+      <p class="ds-tracking--xtight">${textExample} (xTight Spacing)</p>
+      <p class="ds-tracking--tight">${textExample} (Tight Spacing)</p>
+      <p class="ds-tracking--normal">${textExample} (Normal Spacing)</p>
+      <p class="ds-tracking--wide">${textExample} (Wide Spacing)</p>
+      <p class="ds-tracking--xwide">${textExample} (xWide Spacing)</p>
+
       <h2>Lineheight</h2>
-      <p class="ds-leading--small">${textExample} (Small Line Height) </p>
-      <p class="ds-leading--medium">${textExample} (Medium Line Height) </p>
-      <p class="ds-leading--large">${textExample} (Large Line Height) </p>
-      <p class="ds-leading--xLarge">${textExample} (xLarge Line Height) </p>
+      <p class="ds-leading--small">${textExample} (Small Line Height)</p>
+      <p class="ds-leading--medium">${textExample} (Medium Line Height)</p>
+      <p class="ds-leading--large">${textExample} (Large Line Height)</p>
+      <p class="ds-leading--xLarge">${textExample} (xLarge Line Height)</p>
     </div>
   `,
 };
@@ -108,3 +108,88 @@ export const Typography = {
     },
     render: renderTypography,
 };
+const renderHeadingDetails = (size, heading) => {
+    const variables = getHeadingVariables(size, heading === 'desktop');
+    return html `
+    <style>
+      .ds-sb-heading__details__content {
+        display: grid;
+        gap: 0 1rem;
+        grid-template-columns: auto auto 1fr;
+      }
+      .ds-sb-heading__details__content span.ds-sb-heading__details__content__two-col {
+        grid-column: span 2;
+      }
+    </style>
+    <div>
+      <h4 class="ds-heading-xSmall">${heading}</h4>
+      <div class="ds-text--sm-regular ds-sb-heading__details__content">
+        <span class="ds-text--sm-regular">Family</span>
+        <span class="ds-text--sm-semibold ds-sb-heading__details__content__two-col">${variables['font-family']}</span>
+
+        <span class="ds-text--sm-regular">Size</span>
+        <span class="ds-text--sm-semibold">${formatAsPx(variables['font-size'])}</span>
+        <span class="ds-text--sm-semibold">${pxToRem(variables['font-size'])}</span>
+
+        <span class="ds-text--sm-regular">Line height</span>
+        <span class="ds-text--sm-semibold">${formatAsPx(variables['line-height'])}</span>
+        <span class="ds-text--sm-semibold">${pxToRem(variables['line-height'])}</span>
+
+        <span class="ds-text--sm-regular">Letter spacing</span>
+        <span class="ds-text--sm-semibold ds-sb-heading__details__content__two-col">${formatAsPx(variables['letter-spacing'])}</span>
+
+        <span class="ds-text--sm-regular">Font weight</span>
+        <span class="ds-text--sm-semibold ds-sb-heading__details__content__two-col">${variables['font-weight']}</span>
+      </div>
+    </div>
+  `;
+};
+const renderHeadingDetailsDesktop = (size) => renderHeadingDetails(size, 'desktop');
+const renderHeadingDetailsMobile = (size) => renderHeadingDetails(size, 'mobile');
+const renderHeading = (size) => {
+    return html `
+    <style>
+      .ds-sb-heading {
+        border-bottom: 1px solid #c0c0c0;
+        padding-bottom: 2em;
+        margin-bottom: 0.5em;
+      }
+      .ds-sb-heading div.ds-sb-heading__details {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 2rem 0;
+
+        @media (min-width: 60rem) {
+          grid-template-columns: 1fr 1fr;
+          gap: 0 2rem;
+        }
+      }
+    </style>
+    <div class="ds-sb-heading">
+      <h3 class="ds-heading--small">${size}</h3>
+      <div class="ds-sb-heading__details">
+        <div>${renderHeadingDetailsDesktop(size)} ${renderHeadingDetailsMobile(size)}</div>
+        <div>
+          <div class="ds-heading--${size}">${generateLoremIpsum()}</div>
+        </div>
+      </div>
+    </div>
+  `;
+};
+export const Headings = {
+    parameters: {
+        docs: {
+            source: {
+                code: `
+          ${headingSizes.map(size => `<div class="ds-heading--${size}">${generateLoremIpsum()}</div>`).join('\n')}
+        `
+            },
+        },
+    },
+    render: () => html `
+    <div>
+      <h2>Headings</h2>
+      ${headingSizes.map(size => renderHeading(size))}
+    </div>
+  `,
+};

package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.css

@@ -20,7 +20,7 @@
   position: relative;
   width: 100%;
 }
-.ds-accordion__open-button:focus-visible, .ds-accordion__open-button:focus-within {
+.ds-accordion__open-button:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline-color: var(--ds-borderColor-black);
   outline-offset: var(--ds-borderWidth-thin);

package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.js

@@ -43,18 +43,18 @@ export class DsAccordion {
     render() {
         const iconSize = this.variant === 'compact' ? '1.5rem' : '2rem';
         const buttonSize = this.variant === 'compact' ? 'small' : 'medium';
-        return (h("div", { key: '830fb0965ea8904b662280b775a159528d7ddc03', class: classNames('ds-accordion', `ds-accordion--${this.variant}`, {
+        return (h("div", { key: '4ab62a504c68a926d59d2b4753aaf3a5b0ebd39d', class: classNames('ds-accordion', `ds-accordion--${this.variant}`, {
                 'ds-accordion--border-aligned': this.borderAligned
-            }), role: "presentation" }, h("div", { key: 'a3d6e538dda9513bfb578379cced370be686ce62', class: "ds-accordion__item" }, h("div", { key: '7c7819bf62cdffb9ac4a8c4f7b1609b31efcdd68', role: "heading", "aria-level": this.headingLevel, class: "ds-accordion__title" }, h("button", { key: '2e2a9fdfced241b23bdcfb444777cdd2fd0a764c', class: classNames('ds-accordion__open-button', `ds-accordion--${this.variant}`, {
+            }), role: "presentation" }, h("div", { key: 'f98a24462b341c86d4a9ba71eff5d7b5ffbb2eb0', class: "ds-accordion__item" }, h("div", { key: '0da3c96376007d4b597e55ac54cb90de9a4788c7', role: "heading", "aria-level": this.headingLevel, class: "ds-accordion__title" }, h("button", { key: '98885f42ecad0aaf00ea736d147fd7838685f1d0', class: classNames('ds-accordion__open-button', `ds-accordion--${this.variant}`, {
                 'ds-accordion--border-aligned': this.borderAligned,
                 'ds-accordion--hide-top-border': this.hideTopBorder
-            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.accordionId}-panel`, id: this.accordionId, ref: (el) => this.headerButtonRef = el }, h("span", { key: 'eca6297dd43b58849c8b46f66034ec51bb20bf1e', class: "ds-accordion__icon", "aria-hidden": "true" }, this.isExpanded ?
+            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.accordionId}-panel`, id: this.accordionId, ref: (el) => this.headerButtonRef = el }, h("span", { key: '8f5ee7d3c251b0b34f9b57f74c2fb87ceb7266d3', class: "ds-accordion__icon", "aria-hidden": "true" }, this.isExpanded ?
             h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_up" })
-            : h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_down" })), h("slot", { key: '9ddb913b968b8bbbe47d4be341766503fdcf4df7', name: "header" }))), h("div", { key: '21cee953529ccd21487b7ac0001aac10bf3d563e', id: `${this.accordionId}-panel`, role: "region", "aria-labelledby": this.accordionId, class: classNames('ds-accordion__panel', `ds-accordion__panel--${this.variant}`, {
+            : h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_down" })), h("slot", { key: 'a9b391fd0bba7055c68e3995bafbf07d4b069038', name: "header" }))), h("div", { key: '551a044a61152ab1799d519fcf9331eb29b428e2', id: `${this.accordionId}-panel`, role: "region", "aria-labelledby": this.accordionId, class: classNames('ds-accordion__panel', `ds-accordion__panel--${this.variant}`, {
                 'ds-accordion__panel--border-aligned': this.borderAligned,
                 'ds-accordion__panel--expanded': this.isExpanded
-            }), hidden: !this.isExpanded }, h("div", { key: 'a9d5dfdbf190936156b0b37b6ef2b877741f6ae1', class: "ds-accordion__content" }, h("slot", { key: '34ca29ec15581a470fe2c740fceea9fcdc7cb64a', name: "content" })), this.useCloseButton &&
-            h("ds-button", { key: '1dfa2fad990fc6651a620efd8b3169346bb08648', "aria-labelledby": `${this.accordionId}-close-button ${this.accordionId}`, id: `${this.accordionId}-close-button`, class: classNames('ds-accordion__close-button', `ds-accordion--${this.variant}`, {
+            }), hidden: !this.isExpanded }, h("div", { key: '455ab200c7febf67028a6ec2ef27eeeaa8bff6ae', class: "ds-accordion__content" }, h("slot", { key: '31af185bd1680cf70ba81ed7826f977d9620372a', name: "content" })), this.useCloseButton &&
+            h("ds-button", { key: 'fdeeae0f9e3c866a1f851a18fe2524afa92124d5', "aria-labelledby": `${this.accordionId}-close-button ${this.accordionId}`, id: `${this.accordionId}-close-button`, class: classNames('ds-accordion__close-button', `ds-accordion--${this.variant}`, {
                     'ds-accordion--border-aligned': this.borderAligned
                 }), fontWeight: 'semiBold', variant: 'supplementary', colour: 'black', icon: 'keyboard_arrow_up', iconPosition: 'start', onClick: this.handleClick, onKeyDown: this.handleKeyDown, value: this.closeButtonLabel, size: buttonSize, type: 'button' })))));
     }

package/dist/collection/components/01-base-components/ds-button/ds-button.css

@@ -70,7 +70,7 @@
   border-color: transparent;
   color: var(--ds-textColor-white);
 }
-.ds-button.primary.blue:focus-visible, .ds-button.primary.blue:focus-within {
+.ds-button.primary.blue:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline-color: var(--ds-borderColor-black);
   outline-offset: var(--ds-borderWidth-thin);
@@ -93,7 +93,7 @@
   border-color: transparent;
   color: var(--ds-textColor-white);
 }
-.ds-button.primary.black:focus-visible, .ds-button.primary.black:focus-within {
+.ds-button.primary.black:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline-color: var(--ds-borderColor-black);
   outline-offset: var(--ds-borderWidth-thin);
@@ -116,7 +116,7 @@
   border-color: transparent;
   color: var(--ds-textColor-default);
 }
-.ds-button.primary.white:focus-visible, .ds-button.primary.white:focus-within {
+.ds-button.primary.white:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
   outline-color: var(--ds-borderColor-white);
   outline-offset: var(--ds-borderWidth-thin);
@@ -139,7 +139,7 @@
   border-color: var(--ds-borderColor-primary);
   color: var(--ds-textColor-primary);
 }
-.ds-button.secondary.blue:focus-visible, .ds-button.secondary.blue:focus-within {
+.ds-button.secondary.blue:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline-color: var(--ds-borderColor-black);
   outline-offset: var(--ds-borderWidth-thin);
@@ -162,7 +162,7 @@
   border-color: var(--ds-borderColor-black);
   color: var(--ds-textColor-default);
 }
-.ds-button.secondary.black:focus-visible, .ds-button.secondary.black:focus-within {
+.ds-button.secondary.black:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline-color: var(--ds-borderColor-black);
   outline-offset: var(--ds-borderWidth-thin);
@@ -185,7 +185,7 @@
   border-color: var(--ds-borderColor-white);
   color: var(--ds-textColor-white);
 }
-.ds-button.secondary.white:focus-visible, .ds-button.secondary.white:focus-within {
+.ds-button.secondary.white:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
   outline-color: var(--ds-borderColor-white);
   outline-offset: var(--ds-borderWidth-thin);
@@ -208,7 +208,7 @@
   border-color: transparent;
   color: var(--ds-textColor-primary);
 }
-.ds-button.supplementary.blue:focus-visible, .ds-button.supplementary.blue:focus-within {
+.ds-button.supplementary.blue:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline-color: var(--ds-borderColor-black);
   outline-offset: var(--ds-borderWidth-thin);
@@ -239,7 +239,7 @@
   border-color: transparent;
   color: var(--ds-textColor-default);
 }
-.ds-button.supplementary.black:focus-visible, .ds-button.supplementary.black:focus-within {
+.ds-button.supplementary.black:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline-color: var(--ds-borderColor-black);
   outline-offset: var(--ds-borderWidth-thin);
@@ -270,7 +270,7 @@
   border-color: transparent;
   color: var(--ds-textColor-white);
 }
-.ds-button.supplementary.white:focus-visible, .ds-button.supplementary.white:focus-within {
+.ds-button.supplementary.white:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
   outline-color: var(--ds-borderColor-white);
   outline-offset: var(--ds-borderWidth-thin);

package/dist/collection/components/01-base-components/ds-button/ds-button.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import classNames from "classnames";
-import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes";
+import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 export class DsButton {
     inheritedAttributes = {};
     buttonEl;
@@ -65,7 +65,7 @@ export class DsButton {
         });
         const iconSize = this.size === 'small' ? '1rem' : undefined;
         const isDisabled = this.disabled || this.ariaDisabled === 'true';
-        return (h("button", { key: '57b49111cb6e4957d1cd69cdfd09b99fe620b614', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false', ...this.inheritedAttributes }, h("slot", { key: '56532d67c5a1df5e831025422db0c886bd731db0', name: "prefix" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '6028ee6b589400340f21411b252c7ba85732fa1c', name: this.icon, size: iconSize })), this.value && h("span", { key: '8b98003443f13f88f76b9a9a611eb1abc4daee74', class: "button-value" }, this.value), h("slot", { key: '35ad0a3aa154b8afba9bd50ffe30c1e25a37f382', name: "suffix" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: '7eebd8b5754c0dd1d3d6a435234728518a16a405', name: this.icon, size: iconSize }))));
+        return (h("button", { key: '493f90c0fb16bd412af413f08ee5a1d2cdb178eb', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false', ...this.inheritedAttributes }, h("slot", { key: '949f90e3355f81064e60d792ea7ecb2340001dc8', name: "prefix" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: 'ac90509ba952a69c58749f4e41f6df5390a0709a', name: this.icon, size: iconSize })), this.value && h("span", { key: '8b3ac1d3fbcf5e22cde0dc6edd189dc697446d06', class: "button-value" }, this.value), h("slot", { key: '7b3ca23198eecb75454b2d46b6db504d456223a6', name: "suffix" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: '3ddeb9b6c4678fb239ddfc34fda24f3c35b9905e', name: this.icon, size: iconSize }))));
     }
     static get is() { return "ds-button"; }
     static get encapsulation() { return "scoped"; }