@uh-design-system/component-library 0.5.0 → 0.5.2

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

@@ -6,6 +6,12 @@
   --ds-breakpoint-xLarge: 90rem;
 }
 
+.no-style-leak *, :host * {
+  all: unset;
+  box-sizing: border-box;
+  display: block;
+}
+
 :host {
   display: block;
   width: 288px;

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

@@ -3,6 +3,7 @@ import classNames from "classnames";
 import { getOptionalText, getRequiredText } from "../../../utils/controls/controlUtils";
 import { isValidation } from "../../../store";
 import { idGenerator, getAriaLabel } from "../../../utils/utils";
+import { inheritAttributes } from "../../../utils/attributes/attributes";
 const INPUT_TYPE_ICONS_MAP = {
     search: 'search',
 };
@@ -12,6 +13,7 @@ const INPUT_TYPE_ACTION_BUTTON_ICON_MAP = {
 };
 const inputIdGenerator = idGenerator('ds-input');
 export class DsTextInput {
+    inheritedAttributes = {};
     suffixButtonElement;
     inputElement;
     assistiveTextId;
@@ -48,7 +50,7 @@ export class DsTextInput {
     icon = '';
     type = 'text';
     ariaLabel;
-    ariaLabelledBy;
+    ariaLabelledby;
     ariaDescribedby;
     hasFocus = false;
     clearButtonVisible = false;
@@ -81,6 +83,9 @@ export class DsTextInput {
         return this.label;
     };
     componentWillLoad() {
+        this.inheritedAttributes = {
+            ...inheritAttributes(this, this.el),
+        };
         this.setIds();
         this.hasPrefixSlot = !!this.el.querySelector('[slot="prefix"]');
         this.hasSuffixSlot = !!this.el.querySelector('[slot="suffix"]');
@@ -147,18 +152,18 @@ export class DsTextInput {
     }
     render() {
         const inputType = this.type === 'password' && this.passwordInputVisible ? 'text' : this.type;
-        return (h(Fragment, { key: 'efb783f742bb82b01fd6807a628eb693666a819b' }, h("div", { key: 'dde260b136af4b68de1fa15928529f5e57f54c3a', class: "ds-input--label-container" }, h("slot", { key: 'e7ba428a8b8202c9b3e4d9a9c6d4257b0b48d83a', name: "label" }, h("label", { key: '1f28c5fd53249068de50c6d0ea0aa88ccf65a1ec', htmlFor: this.identifier }, this.getLabelText())), h("slot", { key: 'e3c1ea925cfc7f9599ee651da0aeaab98fa806bb', name: "help-text" }, h("small", { key: '671ab99029e2775d964feb012beb8a20912be5e3', id: this.assistiveTextId }, this.assistiveText), h("ds-visually-hidden", { key: '8eb744be9b95ddceb1dd5bed0274d29a26e7ec1d', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), h("div", { key: 'b7fa7067a52d176b810eb88777423adf50dfd8b9', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('ds-input--container', {
+        return (h(Fragment, { key: '6b5cc3e8f7fe00df47392eade88010d1f9faf7e1' }, h("div", { key: 'c5e72b94f444c3923a3d72fb08615a97a9a174c2', class: "ds-input--label-container" }, h("slot", { key: 'a27efdf7b2311fdf310ce5340adccac015c906b1', name: "label" }, h("label", { key: '3a0241a9c572eb4403c5d46eb6761b5121726bf9', htmlFor: this.identifier }, this.getLabelText())), h("slot", { key: '8ffec65634da10f44ea145d1efec86147c6dc296', name: "help-text" }, h("small", { key: 'a45d970a13bae23f2f488a969ee9184cc521680e', id: this.assistiveTextId }, this.assistiveText), h("ds-visually-hidden", { key: 'abea8540ddeed9f797cd28c63aabbc734b7bf083', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), h("div", { key: '9f162c62ee86782abb60344074544feb643c3c8b', 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,
+                invalid: !!this.validationMessage,
                 focus: this.hasFocus,
                 active: !!this.inputActive,
-            }) }, this.renderPrefixContent(), h("input", { key: 'f619722a0c088fbd99d851b4cc49a220538da0ae', ref: e => (this.inputElement = e), id: this.identifier, name: this.name, "aria-label": getAriaLabel(this.label, this.ariaLabel), "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedby ||
+            }) }, this.renderPrefixContent(), h("input", { key: '1c7c944a70012444caa83f7f0104f6e1992d3acb', ref: e => (this.inputElement = e), id: this.identifier, name: this.name, "aria-label": getAriaLabel(this.label, this.ariaLabel), "aria-labelledby": this.ariaLabelledby, "aria-describedby": this.ariaDescribedby ||
                 classNames(this.assistiveTextId, this.visuallyHiddenAssistiveTextId, {
                     [this.errorTextId]: Boolean(this.validationMessage),
                     [this.successTextId]: Boolean(this.successText),
-                }), "aria-invalid": Boolean(this.validationMessage) ? 'true' : 'false', disabled: this.disabled, required: this.required, readonly: this.readonly, value: this.value, type: inputType, min: this.min, max: this.max, maxlength: this.maxlength, pattern: this.pattern, placeholder: this.placeholder, autocomplete: this.autocomplete, onInput: this.handleInput, onFocus: () => (this.hasFocus = true), onBlur: this.handleBlur }), this.renderSuffixContent()), h("slot", { key: 'b70c638ad0de13e0bfa1c2f0ec366e748ab8e4e2', name: "input-validity" }, h("ds-input-validity", { key: '7c1da6ba8d42add8de43f4926c24c8a64bbe32e2', id: this.errorTextId, text: this.validationMessage, type: "error", role: "alert" }), h("ds-input-validity", { key: '46258021c17e3461ea4a0c2ae720fb44305550c5', id: this.successTextId, text: this.successText, type: "success", role: "status" }))));
+                }), "aria-invalid": Boolean(this.validationMessage) ? 'true' : 'false', disabled: this.disabled, required: this.required, readonly: this.readonly, value: this.value, type: inputType, min: this.min, max: this.max, maxlength: this.maxlength, pattern: this.pattern, placeholder: this.placeholder, autocomplete: this.autocomplete, onInput: this.handleInput, onFocus: () => (this.hasFocus = true), onBlur: this.handleBlur, ...this.inheritedAttributes }), this.renderSuffixContent()), h("slot", { key: 'bdc4bbc3a0abe3668bcf18f719d50974ad12e1c4', name: "input-validity" }, h("ds-input-validity", { key: 'a392691fed93056f22673e5d20c6c4c099481181', id: this.errorTextId, text: this.validationMessage, type: "error", role: "alert" }), h("ds-input-validity", { key: '7e3b45928cdefed2c65b8c50fb4245527bae758e', id: this.successTextId, text: this.successText, type: "success", role: "status" }))));
     }
     static get is() { return "ds-text-input"; }
     static get encapsulation() { return "scoped"; }
@@ -659,7 +664,7 @@ export class DsTextInput {
                 "attribute": "aria-label",
                 "reflect": false
             },
-            "ariaLabelledBy": {
+            "ariaLabelledby": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {

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

@@ -41,7 +41,7 @@ export const Playground = {
             options: textInputTypes,
         },
         ariaLabel: { name: 'aria-label', control: 'text' },
-        ariaLabelledBy: { name: 'aria-labelledby', control: 'text' },
+        ariaLabelledby: { name: 'aria-labelledby', control: 'text' },
         ariaDescribedby: { name: 'aria-describedby', control: 'text' },
         autocomplete: { control: 'text' },
     },
@@ -66,7 +66,7 @@ export const Playground = {
         type: 'text',
         autocomplete: '',
         ariaLabel: '',
-        ariaLabelledBy: '',
+        ariaLabelledby: '',
         ariaDescribedby: '',
     }
 };

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

@@ -1,4 +1,4 @@
-:host {
+.ds-visually-hidden {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;

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: '083eaed9210a85360479b367769c8904a6089f64' }));
+        return (h("div", { key: 'f488f0f134c76c308763d47c57360e54ae299a06', class: "ds-visually-hidden" }, h("slot", { key: '20d5cdef8c333e5421c670e2558b511b1f235e7f' })));
     }
     static get is() { return "ds-visually-hidden"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/attributes/attributes.js

@@ -1,4 +1,5 @@
-export const inheritAttributes = (el, attributes = []) => {
+const kebabToCamelCase = (str) => str.replace(/-./g, x => x[1].toUpperCase());
+export const inheritSpecifiedAttributes = (el, attributes = []) => {
     const attributeObject = {};
     attributes.forEach(attr => {
         if (el.hasAttribute(attr)) {
@@ -64,12 +65,22 @@ export const ariaAttributes = [
     'aria-valuenow',
     'aria-valuetext',
 ];
-const kebabToCamelCase = (attr) => attr.replace(/-./g, x => x[1].toUpperCase());
 export const getAriaAttributeArgTypes = (attrs) => attrs.reduce((acc, curr) => ((acc[kebabToCamelCase(curr)] = { control: 'text', name: curr }), acc), {});
 export const inheritAriaAttributes = (el, ignoreList) => {
     let attributesToInherit = [...ariaAttributes];
     if (ignoreList && ignoreList.length > 0) {
         attributesToInherit = attributesToInherit.filter(attr => !ignoreList.includes(attr));
     }
-    return inheritAttributes(el, attributesToInherit);
+    return inheritSpecifiedAttributes(el, attributesToInherit);
+};
+export const inheritAttributes = (component, elem) => {
+    const attributesToIgnore = new Set(['class', 'style', ...ariaAttributes]);
+    const propsToIgnore = new Set(Object.keys(component));
+    const attributes = {};
+    for (const attr of elem.attributes) {
+        if (!propsToIgnore.has(kebabToCamelCase(attr.name)) && !attributesToIgnore.has(attr.name)) {
+            attributes[attr.name] = attr.value;
+        }
+    }
+    return attributes;
 };

package/dist/component-library/component-library.esm.js

@@ -1 +1 @@
-import{p as e,b as i}from"./index-434995e1.js";export{s as setNonce}from"./index-434995e1.js";import{g as t}from"./app-globals-0f993ce5.js";(()=>{const i=import.meta.url,t={};return""!==i&&(t.resourcesUrl=new URL(".",i).href),e(t)})().then((async e=>(await t(),i([["ds-accordion_3",[[1,"ds-accordion",{variant:[1],borderAligned:[4,"border-aligned"],openByDefault:[4,"open-by-default"],accordionId:[1,"accordion-id"],headingLevel:[2,"heading-level"],useCloseButton:[4,"use-close-button"],closeButtonLabel:[1,"close-button-label"],hideTopBorder:[4,"hide-top-border"],isExpanded:[32]},null,{isExpanded:["watchHandler"]}],[6,"ds-button",{value:[1],variant:[1],colour:[1],size:[1],fontWeight:[1,"font-weight"],icon:[1],iconPosition:[1,"icon-position"],type:[1],disabled:[4],fullWidth:[4,"full-width"],ariaDisabled:[1,"aria-disabled"]}],[1,"ds-icon",{name:[1],colour:[1],size:[1],dsTitle:[1,"title"],role:[1],hidden:[4],message:[32]}]]],["ds-input-validity",[[0,"ds-input-validity",{text:[1],type:[1],validityRole:[1,"role"],identifier:[32]}]]],["ds-text-input",[[70,"ds-text-input",{label:[1],placeholder:[1],identifier:[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],validationMessage:[32],togglePasswordVisibility:[64],clearInput:[64]}]]],["ds-checkbox",[[65,"ds-checkbox",{identifier:[1,"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:[1,"aria-label"],value:[32],validationMessage:[32]}]]],["ds-checkbox-group",[[1,"ds-checkbox-group",{legend:[1],assistiveText:[1,"assistive-text"],direction:[1],errorText:[1,"error-text"],text:[1],checked:[4],disabled:[4],childElementsCount:[32],checkedChildElementCount:[32],isIndeterminate:[32],indeterminateChildCheckboxCount:[32],setChecked:[64]},[[0,"dsCheckboxGroupIndeterminateChildChange","listenIndeterminateChildChange"],[0,"dsCheckboxInput","listenCheckboxChange"],[0,"dsCheckboxGroupChange","listenCheckboxGroupChange"]],{disabled:["watchCheckboxDisabledChange"],checked:["watchCheckedChange"],isIndeterminate:["watchIndeterminateChange"],checkedChildElementCount:["watchCheckedChildElementCountChange"]}]]],["ds-visually-hidden",[[1,"ds-visually-hidden"]]],["ds-link",[[1,"ds-link",{text:[1],size:[1],variant:[1],weight:[1],icon:[1025],iconPosition:[1025,"icon-position"],iconTitle:[1,"icon-title"],iconHidden:[4,"icon-hidden"],href:[1],target:[1],download:[4],language:[1,"lang"],ariaLabel:[1,"aria-label"]}]]],["ds-link-with-arrow",[[1,"ds-link-with-arrow",{text:[1],iconPosition:[1,"icon-position"],href:[1],target:[1],language:[1,"lang"],ariaLabel:[1,"aria-label"]}]]]],e))));
+import{p as e,b as i}from"./index-434995e1.js";export{s as setNonce}from"./index-434995e1.js";import{g as t}from"./app-globals-0f993ce5.js";(()=>{const i=import.meta.url,t={};return""!==i&&(t.resourcesUrl=new URL(".",i).href),e(t)})().then((async e=>(await t(),i([["ds-accordion_3",[[1,"ds-accordion",{variant:[1],borderAligned:[4,"border-aligned"],openByDefault:[4,"open-by-default"],accordionId:[1,"accordion-id"],headingLevel:[2,"heading-level"],useCloseButton:[4,"use-close-button"],closeButtonLabel:[1,"close-button-label"],hideTopBorder:[4,"hide-top-border"],isExpanded:[32]},null,{isExpanded:["watchHandler"]}],[6,"ds-button",{value:[1],variant:[1],colour:[1],size:[1],fontWeight:[1,"font-weight"],icon:[1],iconPosition:[1,"icon-position"],type:[1],disabled:[4],fullWidth:[4,"full-width"],ariaDisabled:[1,"aria-disabled"]}],[1,"ds-icon",{name:[1],colour:[1],size:[1],dsTitle:[1,"title"],role:[1],hidden:[4],message:[32]}]]],["ds-input-validity",[[0,"ds-input-validity",{text:[1],type:[1],validityRole:[1,"role"],identifier:[32]}]]],["ds-text-input",[[70,"ds-text-input",{label:[1],placeholder:[1],identifier:[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],validationMessage:[32],togglePasswordVisibility:[64],clearInput:[64]}]]],["ds-checkbox",[[65,"ds-checkbox",{identifier:[1,"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:[1,"aria-label"],value:[32],validationMessage:[32]}]]],["ds-checkbox-group",[[1,"ds-checkbox-group",{legend:[1],assistiveText:[1,"assistive-text"],direction:[1],errorText:[1,"error-text"],text:[1],checked:[4],disabled:[4],childElementsCount:[32],checkedChildElementCount:[32],isIndeterminate:[32],indeterminateChildCheckboxCount:[32],setChecked:[64]},[[0,"dsCheckboxGroupIndeterminateChildChange","listenIndeterminateChildChange"],[0,"dsCheckboxInput","listenCheckboxChange"],[0,"dsCheckboxGroupChange","listenCheckboxGroupChange"]],{disabled:["watchCheckboxDisabledChange"],checked:["watchCheckedChange"],isIndeterminate:["watchIndeterminateChange"],checkedChildElementCount:["watchCheckedChildElementCountChange"]}]]],["ds-visually-hidden",[[1,"ds-visually-hidden"]]],["ds-link",[[1,"ds-link",{text:[1],size:[1],variant:[1],weight:[1],icon:[1025],iconPosition:[1025,"icon-position"],iconTitle:[1,"icon-title"],iconHidden:[4,"icon-hidden"],href:[1],target:[1],download:[4],language:[1,"lang"],ariaLabel:[1,"aria-label"]}]]],["ds-link-with-arrow",[[1,"ds-link-with-arrow",{text:[1],iconPosition:[1,"icon-position"],href:[1],target:[1],language:[1,"lang"],ariaLabel:[1,"aria-label"]}]]]],e))));