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

package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.css

@@ -6,144 +6,6 @@
   --ds-breakpoint-xLarge: 90rem;
 }
 
-: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-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;
-  }
-}
-:root {
-  --ds-breakpoint-xSmall: 20rem;
-  --ds-breakpoint-small: 30rem;
-  --ds-breakpoint-medium: 60rem;
-  --ds-breakpoint-large: 75rem;
-  --ds-breakpoint-xLarge: 90rem;
-}
-
-/* Body text styles */
-.ds-bodyText--2xLarge {
-  color: var(--ds-textColor-default);
-  font-family: var(--ds-fontFamily-body);
-  font-size: var(--ds-fontSize-20);
-  font-weight: var(--ds-fontWeight-regular);
-  letter-spacing: var(--ds-letterSpacing-wide);
-  line-height: var(--ds-lineHeight-large);
-}
-@media (min-width: 30rem) {
-  .ds-bodyText--2xLarge {
-    font-size: var(--ds-fontSize-22);
-  }
-}
-
-.ds-bodyText--xLarge {
-  color: var(--ds-textColor-default);
-  font-family: var(--ds-fontFamily-body);
-  font-size: var(--ds-fontSize-18);
-  font-weight: var(--ds-fontWeight-regular);
-  letter-spacing: var(--ds-letterSpacing-wide);
-  line-height: var(--ds-lineHeight-large);
-}
-@media (min-width: 30rem) {
-  .ds-bodyText--xLarge {
-    font-size: var(--ds-fontSize-20);
-  }
-}
-
-.ds-bodyText--large {
-  color: var(--ds-textColor-default);
-  font-family: var(--ds-fontFamily-body);
-  font-size: var(--ds-fontSize-16);
-  font-weight: var(--ds-fontWeight-regular);
-  letter-spacing: var(--ds-letterSpacing-wide);
-  line-height: var(--ds-lineHeight-large);
-}
-@media (min-width: 30rem) {
-  .ds-bodyText--large {
-    font-size: var(--ds-fontSize-18);
-  }
-}
-
-.ds-bodyText--medium {
-  color: var(--ds-textColor-default);
-  font-family: var(--ds-fontFamily-body);
-  font-size: var(--ds-fontSize-14);
-  font-weight: var(--ds-fontWeight-regular);
-  letter-spacing: var(--ds-letterSpacing-wide);
-  line-height: var(--ds-lineHeight-large);
-}
-@media (min-width: 30rem) {
-  .ds-bodyText--medium {
-    font-size: var(--ds-fontSize-16);
-  }
-}
-
-.ds-bodyText--small {
-  color: var(--ds-textColor-default);
-  font-family: var(--ds-fontFamily-body);
-  font-size: var(--ds-fontSize-12);
-  font-weight: var(--ds-fontWeight-regular);
-  letter-spacing: var(--ds-letterSpacing-wide);
-  line-height: var(--ds-lineHeight-large);
-}
-@media (min-width: 30rem) {
-  .ds-bodyText--small {
-    font-size: var(--ds-fontSize-14);
-  }
-}
-
 :host {
   display: inline-block;
 }
@@ -157,7 +19,7 @@
   font-size: var(--ds-fontSize-16);
   text-decoration-line: none;
 }
-.ds-link-with-arrow:focus-visible, .ds-link-with-arrow:focus-within {
+.ds-link-with-arrow: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-link-with-arrow/ds-link-with-arrow.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 import classNames from "classnames";
-import { inheritAriaAttributes } from "../../../utils/attributes";
-import { idGenerator } from "../ds-text-input/utils";
-import { opensInNewTab, visuallyHiddenAssistiveText } from "../../../utils/link/linkUtils";
+import { inheritAriaAttributes } from "../../../utils/attributes/attributes";
+import { getAriaLabel, opensInNewTab, visuallyHiddenAssistiveText } from "../../../utils/link/linkUtils";
+import { idGenerator } from "../../../utils/utils";
 const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
 export class DsLinkWithArrow {
     inheritedAttributes = {};
@@ -15,8 +15,9 @@ export class DsLinkWithArrow {
     href;
     target;
     language;
+    linkAriaLabel;
     componentWillLoad() {
-        this.inheritedAttributes = inheritAriaAttributes(this.el);
+        this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-label']);
         if (opensInNewTab(this.target)) {
             this.icon = 'arrow_outward';
             this.rel = 'noopener noreferrer';
@@ -28,7 +29,7 @@ export class DsLinkWithArrow {
             'ds-link-with-arrow__icon--start': this.iconPosition === 'start',
             'ds-link-with-arrow__icon--end': this.iconPosition === 'end',
         });
-        return (h("a", { key: 'aa1a1272c0323f286e590f1a366f2101410a58c3', href: this.href, class: classes, rel: this.rel, target: this.target, ...this.inheritedAttributes }, h("slot", { key: 'e348b24c8c5418cf0f33e18c5337066b6eb579a2', name: "iconStart" }, this.iconPosition === 'start' && h("ds-icon", { key: 'e523092b3dc32f936139c53e74195b927a219c0f', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, h("slot", { key: '0ec9d65ee348aa75108f9d87474551b6b3c4a0bb', name: "iconStart" }, this.iconPosition === 'end' && h("ds-icon", { key: '55b5ef6cc061bea9f68d784e4e9fb0ebdac0002c', name: this.icon, class: iconClasses, size: "1.4em" })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: '8c92b801ac0a1d52e12fead3c89703d41f90fa6a', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
+        return (h("a", { key: '5f43cc989011db22bd8f547957c76289e7bbbf45', href: this.href, class: classes, rel: this.rel, target: this.target, "aria-label": getAriaLabel(this.text, this.linkAriaLabel), ...this.inheritedAttributes }, h("slot", { key: '26615467438d0ae98a8138165cf5152796f2ab00', name: "iconStart" }, this.iconPosition === 'start' && h("ds-icon", { key: 'f34a2d05ed9c991e98aaa89f547bde0c1b677115', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, h("slot", { key: 'be1ccadeaca632961ed3d44d1d94a26bf35d2963', name: "iconStart" }, this.iconPosition === 'end' && h("ds-icon", { key: '7bccce249754d661d9faeddbad2f9c4d8c207cfb', name: this.icon, class: iconClasses, size: "1.4em" })), opensInNewTab(this.target) && (h("ds-visually-hidden", { key: '4e864244ee939591f435715889e2f9a240f86d36', id: this.visuallyHiddenAssistiveTextId }, visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
     }
     static get is() { return "ds-link-with-arrow"; }
     static get encapsulation() { return "shadow"; }
@@ -154,6 +155,25 @@ export class DsLinkWithArrow {
                 "setter": false,
                 "attribute": "lang",
                 "reflect": false
+            },
+            "linkAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-label",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/01-base-components/ds-link-with-arrow/stories/{ds-arrow-link.examples.stories.js → ds-link-with-arrow.examples.stories.js}

@@ -1,6 +1,7 @@
 import { expect } from "@storybook/test";
 import { html } from "lit";
 import { getShadowRoot } from "../../../../utils/tests/testUtils";
+import { litTemplateResultToString } from "../../../../utils/utils";
 const meta = {
     title: 'Base Components/LinkWithArrow/Examples',
     component: 'ds-link-with-arrow',
@@ -24,10 +25,32 @@ export const OpenInANewTab = {
         });
     }
 };
+const iconAtTheEndDOM = html `
+  <div class="ds-sb-icon-at-the-end">
+    <ds-link-with-arrow text="Link with arrow icon" href="#" icon-position="end"></ds-link-with-arrow>
+  </div>
+`;
 export const IconAtTheEnd = {
+    parameters: {
+        docs: {
+            source: {
+                code: litTemplateResultToString(iconAtTheEndDOM),
+            },
+        },
+    },
     render: () => html `
-    <div style="display: flex; background-color: #F7F7F7; justify-content: end; align-items: end; outline: 1px solid; padding: 1em 0.6em; height: 200px; width: 100%;">
-      <ds-link-with-arrow text="Link with arrow icon" href="#" icon-position="end"></ds-link-with-arrow>
-    </div>
+    <style>
+      .ds-sb-icon-at-the-end {
+        display: flex;
+        background-color: #f7f7f7;
+        justify-content: end;
+        align-items: end;
+        outline: 1px solid;
+        padding: 1em 0.6em;
+        height: 200px;
+        width: 100%;
+      }
+    </style>
+    ${iconAtTheEndDOM}
   `
 };

package/dist/collection/components/01-base-components/ds-link-with-arrow/stories/{ds-arrow-link.stories.js → ds-link-with-arrow.stories.js}

@@ -1,10 +1,7 @@
-import { getAriaAttributeArgTypes } from "../../../../utils/attributes";
+import { getAriaAttributeArgTypes } from "../../../../utils/attributes/attributes";
 const anchorAriaAttributes = [
     'aria-current',
-    'aria-describedby',
     'aria-haspopup',
-    'aria-label',
-    'aria-labelledby'
 ];
 const anchorAriaAttributeArgTypes = getAriaAttributeArgTypes(anchorAriaAttributes);
 const meta = {
@@ -35,6 +32,10 @@ export const Playground = {
             control: 'text',
             description: 'ISO 639 language code. Known languages are: "en", "fi", "sv". When undefined will use browser\'s language.',
         },
+        linkAriaLabel: {
+            name: 'aria-label',
+            control: 'text',
+        },
         ...anchorAriaAttributeArgTypes,
     },
 };

package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.css

@@ -27,16 +27,6 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-default);
 }
-.ds-input--label-container label.required::after {
-  content: " *";
-  color: var(--ds-textColor-secondary);
-}
-.ds-input--label-container label.optional::after {
-  content: " (" attr(data-optional-text, "optional") ")";
-  color: var(--ds-textColor-secondary);
-  font-size: var(--ds-fontSize-14);
-  font-weight: var(--ds-fontWeight-regular);
-}
 .ds-input--label-container small {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
@@ -58,7 +48,14 @@
   border-color: var(--ds-borderColor-default);
   padding-inline: var(--ds-spacing-xSmall);
 }
-.ds-input--container:focus-visible, .ds-input--container:focus-within {
+.ds-input--container: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);
+  outline-style: solid;
+  outline-width: var(--ds-borderWidth-thin);
+}
+.ds-input--container:focus-within {
   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-text-input/ds-text-input.js

@@ -1,6 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 import classNames from "classnames";
-import { idGenerator } from "./utils";
+import { idGenerator } from "../../../utils/utils";
+import { getOptionalText, getRequiredText } from "../../../utils/controls/controlUtils";
 const INPUT_TYPE_ICONS_MAP = {
     search: 'search',
 };
@@ -8,6 +9,7 @@ const INPUT_TYPE_ACTION_BUTTON_ICON_MAP = {
     search: ({ clearButtonVisible }) => (clearButtonVisible ? 'cancel_fill' : ''),
     password: ({ passwordInputVisible }) => (passwordInputVisible ? 'visibility_off_fill' : 'visibility_fill'),
 };
+const inputIdGenerator = idGenerator('ds-input');
 const assistiveTextIdGenerator = idGenerator('ds-assistive-text');
 const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
 const successTextIdGenerator = idGenerator('success-text');
@@ -19,9 +21,12 @@ export class DsTextInput {
     visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
     successTextId = successTextIdGenerator.next().value;
     errorTextId = errorTextIdGenerator.next().value;
+    hasPrefixSlot = false;
+    hasSuffixSlot = false;
+    el;
     label;
     placeholder;
-    dsId = 'input';
+    dsId = inputIdGenerator.next().value;
     name;
     disabled;
     optional;
@@ -58,6 +63,19 @@ export class DsTextInput {
         this.inputElement.focus();
         this.clearButtonVisible = false;
     }
+    getLabelText = () => {
+        if (this.required) {
+            return getRequiredText(this.label);
+        }
+        if (this.optional) {
+            return getOptionalText(this.label, this.optionalText);
+        }
+        return this.label;
+    };
+    componentWillLoad() {
+        this.hasPrefixSlot = !!this.el.querySelector('[slot="prefix"]');
+        this.hasSuffixSlot = !!this.el.querySelector('[slot="suffix"]');
+    }
     onActionButtonClicked = (e) => {
         e.stopPropagation();
         switch (this.type) {
@@ -77,6 +95,9 @@ export class DsTextInput {
         return (h("slot", { name: className }, text && (h("div", { class: `${className}--container` }, h("ds-icon", { name: icon }), h("small", { id: textId, class: className }, text)))));
     }
     renderPrefixContent() {
+        if (this.hasPrefixSlot) {
+            return h("slot", { name: "prefix" });
+        }
         if (this.prefixText) {
             return (h("slot", { name: "prefix" }, h("span", { class: "prefix" }, this.prefixText)));
         }
@@ -87,6 +108,9 @@ export class DsTextInput {
         return null;
     }
     renderSuffixContent() {
+        if (this.hasSuffixSlot) {
+            return h("slot", { name: "suffix" });
+        }
         if (this.suffixText) {
             return (h("slot", { name: "suffix" }, h("span", { class: "suffix" }, this.suffixText)));
         }
@@ -104,14 +128,14 @@ export class DsTextInput {
     }
     render() {
         const inputType = this.type === 'password' && this.passwordInputVisible ? 'text' : this.type;
-        return (h(Fragment, { key: 'fe9d038685d4912e0b760bed83e21a6ae8582535' }, h("div", { key: '4c4a662fcbcbf2c9a04986ad44b018736c8ba0d7', class: "ds-input--label-container" }, h("slot", { key: '8fea3c6a05e3f5314eae43c2f2eeedc47735278a', name: "label" }, h("label", { key: '33aa9fa1ab0eba6c36b0e882d8a71000a2a2ff40', "data-optional-text": this.optionalText, class: classNames({ required: this.required, optional: this.optional }), htmlFor: this.dsId }, this.label)), h("slot", { key: '13f7adf5a85a2f2d8d5f3e7b829ff86707f75a3d', name: "help-text" }, h("small", { key: '3595ee7deb43919aeabb938a2f0cc0ce78ca181d', id: this.assistiveTextId }, this.assistiveText), h("ds-visually-hidden", { key: '001fd7a38ef2034f7e650e86d00d5a30ee217c17', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), h("div", { key: 'ec9f2c0d6ff40bd6c8a4618ec238e966a0756c19', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('ds-input--container', {
+        return (h(Fragment, { key: '4d3ad7cc3f0d7c6aba4bcb8e5b05d0794b614f32' }, h("div", { key: '1cad6e50d1a9c0f4214824d1ff46a8418a095790', class: "ds-input--label-container" }, h("slot", { key: '67d096bb1eecd6ac492a5dcd14bd6f9bda21eb2c', name: "label" }, h("label", { key: 'cfffb9b06f2122dd80e4ad94831ca69b71e5a0de', htmlFor: this.dsId }, this.getLabelText())), h("slot", { key: '2256dfda0cf19eae50307b9badc2a2a97d9e190b', name: "help-text" }, h("small", { key: 'b9496a9afec60a4a64a0ff66505a7572362387ac', id: this.assistiveTextId }, this.assistiveText), h("ds-visually-hidden", { key: '23026b2453728e607802aabb7760f07229edeb7c', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), h("div", { key: '161a4d4eed706c5fd6ba2af90029e68b1c6b95c9', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('ds-input--container', {
                 disabled: this.disabled,
                 readonly: this.readonly,
                 valid: !!this.successText,
                 invalid: !!this.errorText,
                 focus: this.hasFocus,
                 active: !!this.inputActive,
-            }) }, this.renderPrefixContent(), h("input", { key: '1cd22b415c330cb50c4c9663f6dec3a1e99e256b', ref: e => (this.inputElement = e), id: this.dsId, name: this.name, "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedby ||
+            }) }, this.renderPrefixContent(), h("input", { key: 'a04e9ed4de86a65290206ca62efde1c27d76aa80', ref: e => (this.inputElement = e), id: this.dsId, name: this.name, "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedby ||
                 classNames(this.assistiveTextId, this.visuallyHiddenAssistiveTextId, {
                     [this.successTextId]: this.successText,
                     [this.errorTextId]: this.errorText,
@@ -187,7 +211,7 @@ export class DsTextInput {
                 "setter": false,
                 "attribute": "id",
                 "reflect": false,
-                "defaultValue": "'input'"
+                "defaultValue": "inputIdGenerator.next().value as string"
             },
             "name": {
                 "type": "string",
@@ -701,4 +725,5 @@ export class DsTextInput {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/01-base-components/ds-text-input/stories/ds-text-input.examples.stories.js

@@ -5,10 +5,20 @@ const meta = {
 };
 export default meta;
 export const CustomWidth = {
-    render: () => html `<div>
-    <ds-text-input label='Smaller input' style='width: 150px; margin-bottom: 1rem'></ds-text-input>
-    <ds-text-input label='Full width input' style='width: 100%'></ds-text-input>
-  </div>`,
+    render: () => html `
+    <style>
+      .ds-sb-custom-width {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+    </style>
+    <div class="ds-sb-custom-width">
+      <ds-text-input label='Smaller input' style='width: 150px'></ds-text-input>
+      <ds-text-input label='Full width input' style='width: 100%'></ds-text-input>
+      <!You can set any custom styles to the input element>
+    </div>
+  `,
 };
 export const UsingSlots = {
     render: () => html `
@@ -16,7 +26,7 @@ export const UsingSlots = {
       <label ds-id='label' slot='label'><b>Slotted label</b></label>
       <p slot='help-text'>Lorem ipsum</p>
       <ds-icon name='archive' slot='prefix'></ds-icon>
-      <small slot='suffix' style='margin-right: var(--spacing-2xSmall)'>Suffix</small>
+      <small slot='suffix'>Suffix</small>
       <div slot='error-text'>Error text slot</div>
       <div slot='success-text'>Success text slot</div>
     </ds-text-input>
@@ -24,14 +34,26 @@ export const UsingSlots = {
 };
 export const FormValidation = {
     render: () => html `
-    <form>
+    <style>
+      .ds-sb-form-validation {
+        display: inline-flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+      .ds-sb-form-validation .ds-sb-form-validation__buttons {
+        align-self: flex-end;
+      }
+    </style>
+    <form class="ds-sb-form-validation">
       <ds-text-input type="number" label="Minimum value" id="min" name="min" min="5" required></ds-text-input>
       <ds-text-input type="number" label="Maximum value" id="max" name="max" min="100" required></ds-text-input>
       <ds-text-input type="email" label="Email" id="email" name="email" required></ds-text-input>
       <ds-text-input type="tel" label="Telephone" id="tel" name="tel" required></ds-text-input>
       <ds-text-input type="password" label="Password" id="password" name="password" required action-button-aria-label="password toggle"></ds-text-input>
       <ds-text-input type="url" label="Url" id="url" name="url" required></ds-text-input>
-      <ds-button style="margin-top: 0.5rem" type="submit" value="Submit"></ds-button>
+      <div class="button-group ds-sb-form-validation__buttons">
+        <ds-button type="submit" value="Submit"></ds-button>
+      </div>
     </form>
   `,
 };

package/dist/collection/components/01-base-components/ds-text-input/utils.js

@@ -8,9 +8,3 @@ export const textInputTypes = [
     'url',
     'number',
 ];
-export function* idGenerator(id) {
-    let currentId = 1;
-    while (true) {
-        yield `${id}-${currentId++}`;
-    }
-}

package/dist/collection/components/01-base-components/ds-visually-hidden/ds-visually-hidden.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class DsVisuallyHidden {
     render() {
-        return (h("slot", { key: '3a7edab043d1612c06a4eb6fedacec27216f3be3' }));
+        return (h("slot", { key: '4307602964aa15c8d3f4fb0f4b89188cf0a8b55e' }));
     }
     static get is() { return "ds-visually-hidden"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/controls/controlUtils.js

@@ -0,0 +1,2 @@
+export const getOptionalText = (text, optionalText) => [text, Boolean(optionalText) ? optionalText : '(optional)'].join(' ');
+export const getRequiredText = (text) => [text, '*'].join(' ');

package/dist/collection/utils/link/linkUtils.js

@@ -9,3 +9,12 @@ export const visuallyHiddenAssistiveText = (lang) => {
             return 'Opens in a new tab';
     }
 };
+export const getAriaLabel = (text, ariaLabel) => {
+    if (!ariaLabel) {
+        return undefined;
+    }
+    if (ariaLabel.startsWith(text)) {
+        return ariaLabel;
+    }
+    return [text, ariaLabel].join(' ');
+};

package/dist/collection/utils/typography/typographyUtils.js

@@ -104,3 +104,42 @@ export const getCSSClasses = (prefix) => {
     }
     return classNames;
 };
+const getCSSVariableValue = (value) => {
+    if (value.startsWith('var(--')) {
+        const varName = value.slice(4, -1).trim();
+        return getComputedStyle(document.documentElement).getPropertyValue(varName);
+    }
+    return value;
+};
+const extractVariablesFromRule = (rule, variables) => {
+    for (const style of rule.style) {
+        variables[style] = getCSSVariableValue(rule.style.getPropertyValue(style));
+    }
+};
+export const headingSizes = ['2xLarge', 'xLarge', 'large', 'medium', 'small', 'xSmall'];
+export const getHeadingVariables = (size, isDesktop) => {
+    const className = `ds-heading--${size}`;
+    const variables = {};
+    for (const sheet of document.styleSheets) {
+        try {
+            const rules = sheet.cssRules;
+            for (const rule of rules) {
+                if (rule instanceof CSSStyleRule && rule.selectorText.includes(className)) {
+                    extractVariablesFromRule(rule, variables);
+                }
+                else if (isDesktop && rule instanceof CSSMediaRule && rule.conditionText.includes('(min-width: 30rem)')) {
+                    const mediaRules = rule.cssRules;
+                    for (const mediaRule of mediaRules) {
+                        if (mediaRule instanceof CSSStyleRule && mediaRule.selectorText.includes(className)) {
+                            extractVariablesFromRule(mediaRule, variables);
+                        }
+                    }
+                }
+            }
+        }
+        catch (e) {
+            console.warn('Unable to access stylesheet:', sheet.href, e);
+        }
+    }
+    return variables;
+};

package/dist/collection/utils/utils.js

@@ -1,4 +1,4 @@
-export function generateLoremIpsum({ paragraphs = 1, wordsPerParagraph = 50, startWithLorem = true, consistent = false } = {}) {
+export const generateLoremIpsum = ({ paragraphs = 1, wordsPerParagraph = 50, startWithLorem = true, consistent = false } = {}) => {
     const loremWords = [
         'lorem', 'ipsum', 'dolor', 'sit', 'amet', 'consectetur', 'adipiscing', 'elit',
         'sed', 'do', 'eiusmod', 'tempor', 'incididunt', 'ut', 'labore', 'et', 'dolore',
@@ -17,13 +17,13 @@ export function generateLoremIpsum({ paragraphs = 1, wordsPerParagraph = 50, sta
             };
         })()
         : () => Math.floor(Math.random() * loremWords.length);
-    function generateParagraph(length) {
+    const generateParagraph = (length) => {
         const words = [];
         for (let i = 0; i < length; i++) {
             words.push(loremWords[randomGenerator()]);
         }
         return words.join(' ') + '.';
-    }
+    };
     const generatedText = [];
     if (startWithLorem && paragraphs > 0) {
         generatedText.push('Lorem ipsum dolor sit amet');
@@ -32,9 +32,27 @@ export function generateLoremIpsum({ paragraphs = 1, wordsPerParagraph = 50, sta
         generatedText.push(generateParagraph(wordsPerParagraph));
     }
     return generatedText.join('\n\n');
-}
-export function remToPx(remString) {
+};
+export const formatAs = (value, suffix) => value.endsWith(suffix) ? value : `${value}${suffix}`;
+export const formatAsRem = (value) => formatAs(value, 'rem');
+export const formatAsPx = (value) => formatAs(value, 'px');
+export const remToPx = (remString) => {
     const rootFontSize = 16;
     const rem = parseFloat(remString);
-    return `${rem * rootFontSize}px`;
+    return formatAsPx(`${rem * rootFontSize}`);
+};
+export const pxToRem = (pxString) => {
+    const rootFontSize = 16;
+    const px = parseFloat(pxString);
+    return formatAsRem(`${px / rootFontSize}`);
+};
+export const litTemplateResultToString = (data) => {
+    const { strings, values } = data;
+    return strings.reduce((acc, s, i) => acc + s + [...values, ''][i], '');
+};
+export function* idGenerator(id) {
+    let currentId = 1;
+    while (true) {
+        yield `${id}-${currentId++}`;
+    }
 }