@uh-design-system/component-library 1.0.1 → 1.0.2-rc.0

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

@@ -1,4 +1,4 @@
-.ds-checkbox__1vtSAV-fieldset {
+.ds-checkbox__rhSGFS-fieldset {
   display: inline-flex;
   flex-direction: column;
   border: none;
@@ -6,21 +6,21 @@
   margin: 0;
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-checkbox__1vtSAV-fieldset__legend {
+.ds-checkbox__rhSGFS-fieldset__legend {
   padding-inline: 0;
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-semibold);
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
 }
-.ds-checkbox__1vtSAV-fieldset__assistive-text {
+.ds-checkbox__rhSGFS-fieldset__assistive-text {
   display: inline;
   font-size: var(--ds-fontSize-14);
   color: var(--ds-textColor-secondary);
   line-height: var(--ds-lineHeight-large);
 }
 
-.ds-checkbox__1vtSAV {
+.ds-checkbox__rhSGFS {
   box-sizing: border-box;
   color: var(--ds-textColor-default);
   display: inline-flex;
@@ -39,7 +39,7 @@
   font-weight: var(--ds-fontWeight-regular);
   line-height: var(--ds-lineHeight-large);
 }
-.ds-checkbox__1vtSAV__input {
+.ds-checkbox__rhSGFS__input {
   cursor: pointer;
   /* hide the default checkbox */
   appearance: none;
@@ -60,48 +60,48 @@
   /** checked and indeterminate **/
   /** checkmark **/
 }
-.ds-checkbox__1vtSAV__input:focus-visible {
+.ds-checkbox__rhSGFS__input:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-checkbox__1vtSAV__input:hover, .ds-checkbox__1vtSAV__input:active {
+.ds-checkbox__rhSGFS__input:hover, .ds-checkbox__rhSGFS__input:active {
   border-color: var(--ds-borderColor-default);
 }
-.ds-checkbox__1vtSAV__input:hover {
+.ds-checkbox__rhSGFS__input:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-checkbox__1vtSAV__input:active {
+.ds-checkbox__rhSGFS__input:active {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-checkbox__1vtSAV__input:disabled {
+.ds-checkbox__rhSGFS__input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
 @media (forced-colors: active) {
-  .ds-checkbox__1vtSAV__input:disabled {
+  .ds-checkbox__rhSGFS__input:disabled {
     border-color: GrayText;
   }
 }
-.ds-checkbox__1vtSAV__input--invalid, .ds-checkbox__1vtSAV__input--invalid:checked, .ds-checkbox__1vtSAV__input--invalid:indeterminate {
+.ds-checkbox__rhSGFS__input--invalid, .ds-checkbox__rhSGFS__input--invalid:checked, .ds-checkbox__rhSGFS__input--invalid:indeterminate {
   border-color: var(--ds-borderColor-danger);
 }
-.ds-checkbox__1vtSAV__input:checked, .ds-checkbox__1vtSAV__input:indeterminate {
+.ds-checkbox__rhSGFS__input:checked, .ds-checkbox__rhSGFS__input:indeterminate {
   background-color: var(--ds-bgColor-primary);
   border-color: var(--ds-borderColor-transparent);
 }
-.ds-checkbox__1vtSAV__input:checked:hover, .ds-checkbox__1vtSAV__input:indeterminate:hover {
+.ds-checkbox__rhSGFS__input:checked:hover, .ds-checkbox__rhSGFS__input:indeterminate:hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-checkbox__1vtSAV__input:checked:active, .ds-checkbox__1vtSAV__input:indeterminate:active {
+.ds-checkbox__rhSGFS__input:checked:active, .ds-checkbox__rhSGFS__input:indeterminate:active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-checkbox__1vtSAV__input:checked:disabled, .ds-checkbox__1vtSAV__input:indeterminate:disabled {
+.ds-checkbox__rhSGFS__input:checked:disabled, .ds-checkbox__rhSGFS__input:indeterminate:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
 }
-.ds-checkbox__1vtSAV__input::before {
+.ds-checkbox__rhSGFS__input::before {
   content: "";
   display: block;
   height: 1em;
@@ -110,36 +110,36 @@
   background-repeat: no-repeat;
   background-position: center;
 }
-.ds-checkbox__1vtSAV__input:checked::before {
+.ds-checkbox__rhSGFS__input:checked::before {
   background-image: url("data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23ffffff' /></svg>");
 }
-.ds-checkbox__1vtSAV__input:indeterminate::before {
+.ds-checkbox__rhSGFS__input:indeterminate::before {
   background-image: url("data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23ffffff' /></svg>");
 }
-.ds-checkbox__1vtSAV__input:checked:disabled::before {
+.ds-checkbox__rhSGFS__input:checked:disabled::before {
   background-image: url("data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>");
 }
-.ds-checkbox__1vtSAV__input:indeterminate:disabled::before {
+.ds-checkbox__rhSGFS__input:indeterminate:disabled::before {
   background-image: url("data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23999999' /></svg>");
 }
-.ds-checkbox__1vtSAV--no-margin .ds-checkbox__1vtSAV__input {
+.ds-checkbox__rhSGFS--no-margin .ds-checkbox__rhSGFS__input {
   margin-right: 0;
 }
-.ds-checkbox__1vtSAV--disabled {
+.ds-checkbox__rhSGFS--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-checkbox__1vtSAV__span--optional {
+.ds-checkbox__rhSGFS__span--optional {
   color: var(--ds-textColor-secondary);
   font-size: var(--ds-fontSize-14);
 }
-.ds-checkbox__1vtSAV:has(.ds-checkbox__1vtSAV__input:disabled) {
+.ds-checkbox__rhSGFS:has(.ds-checkbox__rhSGFS__input:disabled) {
   cursor: not-allowed;
 }
 
-.ds-checkbox__1vtSAV-error {
+.ds-checkbox__rhSGFS-error {
   display: flex;
 }
-.ds-checkbox__1vtSAV-error--visible {
+.ds-checkbox__rhSGFS-error--visible {
   padding-top: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }

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

@@ -19,7 +19,16 @@ export class DsCheckbox {
     dsSubmitInvalid;
     dsValidity;
     dsId = checkboxIdGenerator.next().value;
-    dsName = this.dsId;
+    name = this.dsId;
+    async setName(newValue) {
+        this.name = this.checkboxGroup?.dsName || newValue || this.name;
+    }
+    get dsName() {
+        return this.name;
+    }
+    set dsName(value) {
+        this.setName(value);
+    }
     dsValue = this.dsId;
     dsChecked = false;
     dsLabel;
@@ -118,6 +127,7 @@ export class DsCheckbox {
     };
     componentWillLoad() {
         this.setIds();
+        this.setName();
         this.inheritedAttributes = {
             ...inheritAriaAttributes(this.el, ['aria-describedby', 'aria-hidden', 'aria-invalid']),
             ...inheritAttributes(this, this.el, ['value', 'name', 'id']),
@@ -251,13 +261,13 @@ export class DsCheckbox {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Passed to the `name` attribute of the `input` element of the rendered checkbox."
+                    "text": "Passed to the `name` attribute of the `input` element of the rendered checkbox.\nIf checkbox is part of a named checkbox group, the name is inherited from the group and\nthe property set on the checkbox is ignored."
                 },
-                "getter": false,
-                "setter": false,
+                "getter": true,
+                "setter": true,
                 "reflect": false,
                 "defaultValue": "this.dsId"
             },

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

@@ -25,5 +25,6 @@ export const Playground = {
         dsLabel: '',
         dsAssistiveText: '',
         dsOptionalText: '',
+        dsName: 'playground-name',
     },
 };

package/dist/collection/components/01-base-components/ds-checkbox-group/ds-checkbox-group.css

@@ -1,11 +1,11 @@
-.ds-checkbox-group__1vtSAV {
+.ds-checkbox-group__rhSGFS {
   display: inline-flex;
   flex-direction: column;
   border: none;
   padding: 0;
   margin: 0;
 }
-.ds-checkbox-group__1vtSAV__legend {
+.ds-checkbox-group__rhSGFS__legend {
   color: var(--ds-textColor-default);
   padding-inline: 0;
   font-size: var(--ds-fontSize-16);
@@ -13,27 +13,27 @@
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
 }
-.ds-checkbox-group__1vtSAV__assistive-text {
+.ds-checkbox-group__rhSGFS__assistive-text {
   font-size: var(--ds-fontSize-14);
   color: var(--ds-textColor-secondary);
   line-height: var(--ds-lineHeight-large);
   margin-bottom: var(--ds-spacing-2xSmall);
 }
-.ds-checkbox-group__1vtSAV__error {
+.ds-checkbox-group__rhSGFS__error {
   display: flex;
 }
-.ds-checkbox-group__1vtSAV__error--visible {
+.ds-checkbox-group__rhSGFS__error--visible {
   padding-top: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }
-.ds-checkbox-group__1vtSAV > .ds-checkbox-group__1vtSAV__checkboxes {
+.ds-checkbox-group__rhSGFS > .ds-checkbox-group__rhSGFS__checkboxes {
   display: inline-flex;
   flex-direction: column;
 }
-.ds-checkbox-group__1vtSAV--inset {
+.ds-checkbox-group__rhSGFS--inset {
   margin-left: var(--ds-spacing-medium);
 }
-.ds-checkbox-group__1vtSAV--horizontal > .ds-checkbox-group__1vtSAV__checkboxes {
+.ds-checkbox-group__rhSGFS--horizontal > .ds-checkbox-group__rhSGFS__checkboxes {
   flex-flow: row wrap;
   gap: var(--ds-spacing-small);
 }

package/dist/collection/components/01-base-components/ds-checkbox-group/ds-checkbox-group.js

@@ -9,6 +9,7 @@ export class DsCheckboxGroup {
     checkboxElem;
     fieldsetId = fieldsetIdGenerator.next().value;
     checkboxId = `${this.fieldsetId}-checkbox`;
+    legendId = `${this.fieldsetId}-legend`;
     errorTextId = `${this.fieldsetId}-error`;
     assistiveTextId = `${this.fieldsetId}-assistive-text`;
     nestedId = `${this.fieldsetId}-nested`;
@@ -32,6 +33,10 @@ export class DsCheckboxGroup {
     dsAllRequired = false;
     dsOptional = false;
     dsOptionalText;
+    dsName;
+    get dsId() {
+        return this.checkboxId;
+    }
     childElementsCount = 1;
     checkedChildElementCount = 0;
     isIndeterminate = false;
@@ -109,6 +114,11 @@ export class DsCheckboxGroup {
     dsErrorTextObserver(newValue) {
         this.dsCheckboxGroupInvalidStateChange.emit(newValue);
     }
+    dsNameObserver(newValue) {
+        this.getChildCheckboxElements().forEach(checkbox => {
+            checkbox.dsName = newValue;
+        });
+    }
     listenIndeterminateChildChange(event) {
         this.indeterminateChildCheckboxCount = event.detail.indeterminate ? this.indeterminateChildCheckboxCount + 1 : this.indeterminateChildCheckboxCount - 1;
     }
@@ -251,10 +261,9 @@ export class DsCheckboxGroup {
         });
         const nestedClasses = classNames(`${baseClass}`, `${baseClass}--inset`);
         const checkboxesClasses = classNames(`${baseClass}__checkboxes`);
-        const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId, !!this.dsErrorText && this.errorTextId].filter(Boolean).join(' ');
         const DsCheckbox = transformTagName('ds-checkbox', 'ds-checkbox-group', this.el);
         const DsInputValidity = transformTagName('ds-input-validity', 'ds-checkbox-group', this.el);
-        return (h("fieldset", { key: '1f69e3d517320c14ab8cf89817d947443e00846a', id: this.fieldsetId, class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, this.dsLabel && h("legend", { key: '547fca2a8f82a9ecab2ae81517ca81418d2f8531', class: legendClasses }, this.getLegendText()), this.dsAssistiveText && (h("small", { key: '6e8503708e46ccb66e6d2ea6e087bcb700e41a41', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.dsText ? (h(Fragment, null, h(DsCheckbox, { ref: checkboxElem => (this.checkboxElem = checkboxElem), dsId: this.checkboxId, dsText: this.dsText, dsChecked: this.checkedChildElementCount === this.childElementsCount, dsDisabled: this.dsDisabled, dsIndeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate, dsErrorText: this.dsErrorText, dsErrorsDisabled: true }), h("fieldset", { id: this.nestedId, "aria-label": this.dsText, class: nestedClasses }, h("slot", null)))) : (h("div", { class: checkboxesClasses }, h("slot", null))), !!this.dsErrorText && (h("div", { key: '3fec4eb8db1aa8eb63b94a1e7b455f12f2f8edae', class: errorClasses }, h(DsInputValidity, { key: '9c099ae84bbf0078be0474d420f58c2e4ec11b75', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))));
+        return (h("fieldset", { key: '4ade201074c288f93fdd494ddfbf26572a1ae33e', id: this.fieldsetId, class: classes, "aria-labelledby": `${this.legendId} ${this.dsErrorText && this.errorTextId}`, ...this.inheritedAttributes }, this.dsLabel && h("legend", { key: '116676605f4bbf20eeb548532939432ee1b23fb9', id: this.legendId, class: legendClasses }, this.getLegendText()), this.dsAssistiveText && (h("small", { key: 'b7248d5338d9bac406bcf5b1efa1e5e644a28e2b', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.dsText ? (h(Fragment, null, h(DsCheckbox, { ref: checkboxElem => (this.checkboxElem = checkboxElem), dsId: this.checkboxId, dsText: this.dsText, dsChecked: this.checkedChildElementCount === this.childElementsCount, dsDisabled: this.dsDisabled, dsIndeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate, dsErrorText: this.dsErrorText, dsErrorsDisabled: true }), h("fieldset", { id: this.nestedId, "aria-label": this.dsText, class: nestedClasses }, h("slot", null)))) : (h("div", { class: checkboxesClasses }, h("slot", null))), !!this.dsErrorText && (h("div", { key: 'c351108e8f6f89682154d243fa346a4ed0e879fe', class: errorClasses }, h(DsInputValidity, { key: '9160cb8e8283d943eb6966b2a4d3c0a16135b866', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))));
     }
     static get is() { return "ds-checkbox-group"; }
     static get encapsulation() { return "shadow"; }
@@ -488,6 +497,45 @@ export class DsCheckboxGroup {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "dsName": {
+                "type": "string",
+                "attribute": "ds-name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the checkbox group, passed to the `name` attribute of the `input` of child checkbox elements."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsId": {
+                "type": "string",
+                "attribute": "ds-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `id` attribute of the `input` of parent checkbox element. Read-only."
+                },
+                "getter": true,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "`${this.fieldsetId}-checkbox`"
             }
         };
     }
@@ -688,6 +736,9 @@ export class DsCheckboxGroup {
             }, {
                 "propName": "dsErrorText",
                 "methodName": "dsErrorTextObserver"
+            }, {
+                "propName": "dsName",
+                "methodName": "dsNameObserver"
             }, {
                 "propName": "checkedChildElementCount",
                 "methodName": "checkedChildElementCountObserver"

package/dist/collection/components/01-base-components/ds-checkbox-group/stories/ds-checkbox-group.features.stories.js

@@ -70,6 +70,7 @@ export const Required = {
         dsDirection: 'horizontal',
         dsRequired: true,
         dsAllRequired: false,
+        dsOptional: false,
     },
 };
 export const AllRequired = {
@@ -79,6 +80,7 @@ export const AllRequired = {
         dsDirection: 'horizontal',
         dsRequired: false,
         dsAllRequired: true,
+        dsOptional: false,
     },
 };
 export const Optional = {
@@ -97,9 +99,10 @@ export const Nested = {
         dsText: 'Parent checkbox',
         dsChecked: false,
         dsDisabled: false,
+        dsName: 'nested-name',
     },
     render: args => html `
-    <ds-checkbox-group ds-text=${args.dsText} ?ds-checked=${args.dsChecked} ?ds-disabled=${args.dsDisabled}>
+    <ds-checkbox-group ds-text=${args.dsText} ?ds-checked=${args.dsChecked} ?ds-disabled=${args.dsDisabled} ds-name=${args.dsName}>
       <ds-checkbox ds-text="Child checkbox"></ds-checkbox>
       <ds-checkbox ds-text="Child checkbox"></ds-checkbox>
       <ds-checkbox ds-text="Child checkbox"></ds-checkbox>
@@ -112,9 +115,10 @@ export const DeeplyNested = {
       ds-label="Grandparent legend"
       ds-assistive-text="Grandparent assistive text"
       ds-text="Grandparent checkbox"
+      ds-name="deeply-nested-grand-parent-name"
     >
       <ds-checkbox ds-text="Parent checkbox"></ds-checkbox>
-      <ds-checkbox-group id="parent-checkbox-group" ds-text="Parent checkbox">
+      <ds-checkbox-group id="parent-checkbox-group" ds-text="Parent checkbox" ds-name="deeply-nested-parent-name">
         <ds-checkbox ds-text="Child checkbox"></ds-checkbox>
         <ds-checkbox ds-text="Child checkbox"></ds-checkbox>
         <ds-checkbox ds-text="Child checkbox"></ds-checkbox>

package/dist/collection/components/01-base-components/ds-checkbox-group/stories/ds-checkbox-group.stories.js

@@ -15,6 +15,7 @@ const meta = {
       ?ds-all-required=${args.dsAllRequired}
       ?ds-optional=${args.dsOptional}
       ds-optional-text=${args.dsOptionalText}
+      ds-name=${args.dsName}
     >
       <ds-checkbox ds-text="Value text"></ds-checkbox>
       <ds-checkbox ds-text="Value text"></ds-checkbox>
@@ -37,6 +38,7 @@ export const Playground = {
     args: {
         dsLabel: 'Group legend',
         dsAssistiveText: 'Assistive text',
+        dsName: 'playground-name',
         dsDirection: 'vertical',
         dsErrorText: '',
         dsText: '',
@@ -44,6 +46,6 @@ export const Playground = {
         dsDisabled: false,
         dsRequired: false,
         dsAllRequired: false,
-        dsOptional: false
+        dsOptional: false,
     },
 };

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

@@ -1,4 +1,4 @@
-.ds-chip__1vtSAV {
+.ds-chip__rhSGFS {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -13,17 +13,17 @@
   border: var(--ds-borderWidth-thin) solid var(--ds-borderColor-primary);
   border-radius: 1rem;
 }
-.ds-chip__1vtSAV:focus-visible {
+.ds-chip__rhSGFS:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-chip__1vtSAV:hover {
+.ds-chip__rhSGFS:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-chip__1vtSAV:active {
+.ds-chip__rhSGFS:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-chip__1vtSAV__text {
+.ds-chip__rhSGFS__text {
   padding: 0 var(--ds-spacing-3xSmall);
 }

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

@@ -2,7 +2,7 @@ import { Fragment, h, forceUpdate } from "@stencil/core";
 import { removeSelection } from "../../../utils/controls/controlUtils";
 import { declareComponentDependencies, idGenerator, transformTagName } from "../../../utils/utils";
 import { cx } from "../../../utils/cx";
-import { inheritSpecifiedAttributes, inheritAriaAttributes } from "../../../utils/attributes/attributes";
+import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 const chipIdGenerator = idGenerator('ds-chip');
 export class DsChip {
     buttonEl;
@@ -11,23 +11,25 @@ export class DsChip {
     dsClick;
     dsId = chipIdGenerator.next().value;
     dsName = this.dsId;
+    attrName;
     dsValue = 0;
     dsText;
     dsIcon;
     dsType = 'button';
+    attrType;
     async setFocus() {
         this.buttonEl?.focus();
     }
     componentWillLoad() {
         this.inheritedAttributes = {
+            ...inheritAttributes(this, this.el, ['name', 'type']),
             ...inheritAriaAttributes(this.el),
-            ...inheritSpecifiedAttributes(this.el),
         };
     }
-    onRoleChange(newValue) {
+    ariaAttributeObserver(newValue, _oldValue, propName) {
         this.inheritedAttributes = {
             ...this.inheritedAttributes,
-            role: newValue,
+            [propName]: newValue,
         };
         forceUpdate(this);
     }
@@ -39,7 +41,8 @@ export class DsChip {
         const DsIcon = transformTagName('ds-icon', 'ds-chip', this.el);
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-chip', this.el);
         const Elem = this.inheritedAttributes.role ? 'div' : Fragment;
-        return (h(Elem, { key: '07e60c72f8cbcfa41b78bb3ab2f7df74512a301a', role: this.inheritedAttributes.role }, h("button", { key: 'a796afef85cae135729775dc1aa8096ac27d37b9', ref: el => (this.buttonEl = el), id: this.dsId, name: this.dsName, type: this.dsType, class: baseClass }, h("slot", { key: 'a730bed96a197eb37b2e990b3bb77f1a2b8a0d10', name: "prefix" }, this.dsIcon && h(DsIcon, { key: '685df9d7628935c262452e21cf7cb617c13c227b', dsName: this.dsIcon, dsSize: "1rem" })), h("span", { key: '5514fe7c66f7b945303d59a6ad235873769d5040', class: `${baseClass}__text` }, h("slot", { key: 'ce07a78f92530c01ba4c91c1acf3037b346e5a6a' }, this.dsText), h(DsVisuallyHidden, { key: 'dc489e439afae11e52296e3c4db1c48a4d32eca2', "ds-tag": "span" }, ", ", removeSelection())), h(DsIcon, { key: '539ea59afbc32dbc44a44d6f3e2310028e6f03c7', dsName: "close", dsSize: "1rem" }))));
+        const { role, ...buttonAttributes } = this.inheritedAttributes;
+        return (h(Elem, { key: '5317e1571144046021bf1844d79de37f7ee2ac2b', role: role }, h("button", { key: 'c1235e9602cce448452603146978131a77be92d7', ref: el => (this.buttonEl = el), id: this.dsId, name: this.attrName || this.dsName, type: this.attrType || this.dsType, class: baseClass, ...buttonAttributes }, h("slot", { key: '06af8b637965f800da64df5d1233e8476d38f2e3', name: "prefix" }, this.dsIcon && h(DsIcon, { key: 'ce9be35ffd230b7ef64d767c62774eb203559e9a', dsName: this.dsIcon, dsSize: "1rem" })), h("span", { key: '8a0c34ae040569b829fdbbbb72c9909ad2434523', class: `${baseClass}__text` }, h("slot", { key: 'ab55c261c5f68da898eee6a76d25d63a84d5f92d' }, this.dsText), h(DsVisuallyHidden, { key: '5a0f4a59c6d43d27f007551cb2d89430a9e82d24', "ds-tag": "span" }, ", ", removeSelection())), h(DsIcon, { key: '9f4f0e7f4afcbf13ff939a2413de69607ce248e0', dsName: "close", dsSize: "1rem" }))));
     }
     static get is() { return "ds-chip"; }
     static get originalStyleUrls() {
@@ -87,13 +90,35 @@ export class DsChip {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Passed to the `name` attribute of the `button` element."
+                    "text": "Passed to the `name` attribute of the `button` element.\n\n**@deprecated** Use `name` instead."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "this.dsId"
             },
+            "attrName": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "dsValue": {
                 "type": "any",
                 "attribute": "ds-value",
@@ -163,20 +188,52 @@ export class DsChip {
                 "attribute": "ds-type",
                 "mutable": false,
                 "complexType": {
-                    "original": "'button' | 'submit' | 'reset'",
+                    "original": "DsType",
                     "resolved": "\"button\" | \"reset\" | \"submit\"",
-                    "references": {}
+                    "references": {
+                        "DsType": {
+                            "location": "global",
+                            "id": "global::DsType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Passed to the `type` attribute of the `button` element"
+                    "text": "Passed to the `type` attribute of the `button` element.\n\n**@deprecated** Use `type` instead."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "'button'"
+            },
+            "attrType": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": false,
+                "complexType": {
+                    "original": "DsType",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {
+                        "DsType": {
+                            "location": "global",
+                            "id": "global::DsType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }
@@ -229,7 +286,10 @@ export class DsChip {
     static get watchers() {
         return [{
                 "propName": "role",
-                "methodName": "onRoleChange"
+                "methodName": "ariaAttributeObserver"
+            }, {
+                "propName": "aria-label",
+                "methodName": "ariaAttributeObserver"
             }];
     }
     static get listeners() {

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

@@ -7,7 +7,16 @@ const meta = {
         dsValue: {
             control: 'text',
         },
-        ...getAriaAttributeArgTypes(['role']),
+        attrName: {
+            name: 'name',
+            control: 'text',
+        },
+        attrType: {
+            name: 'type',
+            control: 'select',
+            options: ['button', 'submit', 'reset'],
+        },
+        ...getAriaAttributeArgTypes(['role', 'aria-label']),
     },
 };
 export default meta;

package/dist/collection/components/01-base-components/ds-chip-group/ds-chip-group.css

@@ -1,4 +1,4 @@
-.ds-chip-group__1vtSAV__chips {
+.ds-chip-group__rhSGFS__chips {
   display: inline-flex;
   flex-flow: row wrap;
   gap: var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);