@cumulus-ui/components 0.1.2 → 0.1.3

package/dist/checkbox/internal.d.ts

@@ -8,6 +8,7 @@ export declare class CsCheckboxInternal extends Base {
     readOnly: boolean;
     description: string;
     ariaLabel: string;
+    ariaRequired: string | null;
     private readonly _labelId;
     private readonly _descriptionId;
     connectedCallback(): void;

package/dist/checkbox/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../src/checkbox/internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAQ5D,QAAA,MAAM,IAAI,qHAAqC,CAAC;AAwChD,qBAAa,kBAAmB,SAAQ,IAAI;IAC1C,OAAgB,MAAM,4BAAqE;IAG3F,OAAO,UAAS;IAGhB,aAAa,UAAS;IAGtB,QAAQ,UAAS;IAGjB,WAAW,SAAM;IAGjB,SAAS,SAAM;IAEf,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAsC;IAC/D,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAqC;IAE3D,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAK5B,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAQlD,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,OAAO;IAaN,MAAM;CAmEhB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../src/checkbox/internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAQ5D,QAAA,MAAM,IAAI,qHAAqC,CAAC;AAuChD,qBAAa,kBAAmB,SAAQ,IAAI;IAC1C,OAAgB,MAAM,4BAAqE;IAG3F,OAAO,UAAS;IAGhB,aAAa,UAAS;IAGtB,QAAQ,UAAS;IAGjB,WAAW,SAAM;IAGjB,SAAS,SAAM;IAGN,YAAY,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE5C,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAsC;IAC/D,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAqC;IAE3D,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAK5B,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAQlD,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,OAAO;IAaN,MAAM;CAsEhB"}

package/dist/index.js

@@ -291,7 +291,6 @@ var abstractSwitchStyles = css3`
 var Base = FormAssociatedMixin(CsBaseElement);
 var hostStyles = css4`
   :host { display: block; }
-  .label-wrapper { flex-direction: column; }
   .checkbox-icon {
     position: absolute;
     inline-size: 100%;
@@ -334,6 +333,7 @@ var CsCheckboxInternal = class extends Base {
     this.readOnly = false;
     this.description = "";
     this.ariaLabel = "";
+    this.ariaRequired = null;
     this._labelId = generateUniqueId("checkbox-label");
     this._descriptionId = generateUniqueId("checkbox-desc");
     this._onHostClick = () => {
@@ -390,43 +390,46 @@ var CsCheckboxInternal = class extends Base {
     const ariaDescribedBy = hasDescription ? this._descriptionId : void 0;
     return html`
       <label class="root wrapper" @click=${this._preventNativeToggle}>
-        <span class=${classMap({
+        <span class="label-wrapper">
+          <span class=${classMap({
       "control": true,
       "checkbox-control": true,
       "checkbox-control--checked": this.checked && !this.indeterminate,
       "checkbox-control--indeterminate": this.indeterminate
     })}>
-          <input
-            type="checkbox"
-            class="native-input"
-            .checked=${this.checked}
-            .indeterminate=${this.indeterminate}
-            ?disabled=${this.disabled}
-            ?readonly=${this.readOnly}
-            aria-label=${ifDefined(this.ariaLabel || void 0)}
-            aria-describedby=${ifDefined(ariaDescribedBy)}
-            aria-checked=${this.indeterminate ? "mixed" : this.checked}
-            @click=${this._preventNativeToggle}
-          />
-          <svg class="checkbox-icon" viewBox="0 0 16 16" aria-hidden="true"><rect class=${classMap(styledBoxClasses)} x="0.5" y="0.5" width="15" height="15" rx="3" ry="3" />${this.checked && !this.indeterminate ? svg`<polyline class=${classMap(styledLineClasses)} points="3.5,8 7,11 12,4" />` : this.indeterminate ? svg`<polyline class=${classMap(styledLineClasses)} points="3.5,8 12.5,8" />` : ""}</svg>
-          <span class="outline"></span>
-        </span>
-        <span class="label-wrapper">
-          <span id=${this._labelId} class=${classMap({
+            <svg class="checkbox-icon" viewBox="0 0 16 16" aria-hidden="true"><rect class=${classMap(styledBoxClasses)} x="0.5" y="0.5" width="15" height="15" rx="3" ry="3" />${this.checked && !this.indeterminate ? svg`<polyline class=${classMap(styledLineClasses)} points="3.5,8 7,11 12,4" />` : this.indeterminate ? svg`<polyline class=${classMap(styledLineClasses)} points="3.5,8 12.5,8" />` : ""}</svg>
+            <input
+              type="checkbox"
+              class="native-input"
+              .checked=${this.checked}
+              .indeterminate=${this.indeterminate}
+              ?disabled=${this.disabled}
+              ?readonly=${this.readOnly}
+              aria-label=${ifDefined(this.ariaLabel || void 0)}
+              aria-required=${ifDefined(this.ariaRequired || void 0)}
+              aria-describedby=${ifDefined(ariaDescribedBy)}
+              aria-checked=${this.indeterminate ? "mixed" : this.checked}
+              @click=${this._preventNativeToggle}
+            />
+            <span class="outline"></span>
+          </span>
+          <span class="content">
+            <span id=${this._labelId} class=${classMap({
       "label": true,
       "label-disabled": this.disabled
     })}>
-            <slot></slot>
-          </span>
-          ${hasDescription ? html`
-            <span id=${this._descriptionId} class=${classMap({
+              <slot></slot>
+            </span>
+            ${hasDescription ? html`
+              <span id=${this._descriptionId} class=${classMap({
       "description": true,
       "description-bottom-padding": true,
       "description-disabled": this.disabled
     })}>
-              ${this.description}
-            </span>
-          ` : ""}
+                ${this.description}
+              </span>
+            ` : ""}
+          </span>
         </span>
       </label>
     `;
@@ -447,6 +450,9 @@ __decorateClass([
 __decorateClass([
   property2({ type: String })
 ], CsCheckboxInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property2({ type: String })
+], CsCheckboxInternal.prototype, "ariaRequired", 2);
 
 // src/checkbox/index.ts
 var CsCheckbox = class extends CsCheckboxInternal {
@@ -1256,7 +1262,7 @@ __decorateClass([
   property7({ type: String })
 ], CsIconInternal.prototype, "alt", 2);
 __decorateClass([
-  property7({ type: String, attribute: "arialabel" })
+  property7({ type: String })
 ], CsIconInternal.prototype, "ariaLabel", 2);
 __decorateClass([
   consume({ context: iconProviderContext, subscribe: true })
@@ -1524,16 +1530,13 @@ var CsRadioGroupInternal = class extends Base2 {
     const descId = item.description ? `${itemId}-desc` : void 0;
     const itemClasses = {
       "radio": true,
+      "wrapper": true,
       "radio--has-description": !!item.description,
-      "horizontal": this.direction === "horizontal",
-      "radio--checked": isChecked,
-      "radio--disabled": isDisabled,
-      "radio--readonly": this.readOnly
+      "horizontal": this.direction === "horizontal"
     };
     const controlClasses = {
-      "radio-control": true,
-      "radio-control--checked": isChecked,
-      "radio-control--disabled": isDisabled
+      "control": true,
+      "radio-control": true
     };
     return html7`
       <label
@@ -1543,40 +1546,55 @@ var CsRadioGroupInternal = class extends Base2 {
       this._onItemClick(item);
     }}
       >
-        <input
-          type="radio"
-          class="native-input"
-          name=${groupName}
-          .value=${item.value}
-          .checked=${isChecked}
-          ?disabled=${isDisabled}
-          ?readonly=${this.readOnly}
-          tabindex=${this._getTabIndex(index)}
-          aria-describedby=${ifDefined3(descId)}
-          @click=${(e) => e.preventDefault()}
-          @focus=${() => this._onFocus(index)}
-        />
-        <span class=${classMap6(controlClasses)}>
-          <span class="radio-dot"></span>
-        </span>
-        <span class="radio-content">
-          <span class=${classMap6({
-      "radio-label": true,
-      "radio-label--disabled": isDisabled
-    })}>
-            ${item.label}
+        <span class="label-wrapper">
+          <span class=${classMap6(controlClasses)}>
+            <svg viewBox="0 0 100 100" aria-hidden="true">
+              <circle class=${classMap6({
+      "styled-circle-border": true,
+      "styled-circle-disabled": isDisabled,
+      "styled-circle-readonly": this.readOnly
+    })} stroke-width="6.25" cx="50" cy="50" r="46" />
+              <circle class=${classMap6({
+      "styled-circle-fill": true,
+      "styled-circle-checked": isChecked,
+      "styled-circle-disabled": isDisabled,
+      "styled-circle-readonly": this.readOnly
+    })} stroke-width="30" cx="50" cy="50" r="35" />
+            </svg>
+            <input
+              type="radio"
+              class="native-input"
+              name=${groupName}
+              .value=${item.value}
+              .checked=${isChecked}
+              ?disabled=${isDisabled}
+              ?readonly=${this.readOnly}
+              tabindex=${this._getTabIndex(index)}
+              aria-describedby=${ifDefined3(descId)}
+              @click=${(e) => e.preventDefault()}
+              @focus=${() => this._onFocus(index)}
+            />
+            <span class="outline"></span>
           </span>
-          ${item.description ? html7`
-            <span
-              id=${descId}
-              class=${classMap6({
-      "radio-description": true,
-      "radio-description--disabled": isDisabled
-    })}
-            >
-              ${item.description}
+          <span class="content">
+            <span class=${classMap6({
+      "label": true,
+      "label-disabled": isDisabled
+    })}>
+              ${item.label}
             </span>
-          ` : ""}
+            ${item.description ? html7`
+              <span
+                id=${descId}
+                class=${classMap6({
+      "description": true,
+      "description-disabled": isDisabled
+    })}
+              >
+                ${item.description}
+              </span>
+            ` : ""}
+          </span>
         </span>
       </label>
     `;
@@ -1589,13 +1607,13 @@ __decorateClass([
   property8({ type: Array })
 ], CsRadioGroupInternal.prototype, "items", 2);
 __decorateClass([
-  property8({ type: String, attribute: "arialabel" })
+  property8({ type: String, attribute: "aria-label" })
 ], CsRadioGroupInternal.prototype, "controlAriaLabel", 2);
 __decorateClass([
-  property8({ type: Boolean, attribute: "ariarequired" })
+  property8({ type: Boolean, attribute: "aria-required" })
 ], CsRadioGroupInternal.prototype, "controlAriaRequired", 2);
 __decorateClass([
-  property8({ type: String, attribute: "ariacontrols" })
+  property8({ type: String, attribute: "aria-controls" })
 ], CsRadioGroupInternal.prototype, "controlAriaControls", 2);
 __decorateClass([
   property8({ type: Boolean, reflect: true })
@@ -2056,10 +2074,11 @@ var CsTilesInternal = class extends Base3 {
     const tileClasses = {
       "tile-container": true,
       "refresh": true,
+      "breakpoint-xxs": true,
       "selected": isSelected,
       "disabled": isDisabled,
       "readonly": this.readOnly,
-      "has-metadata": !!item.image
+      "has-metadata": !!item.description || !!item.image
     };
     const controlClasses = {
       "control": true,
@@ -2074,40 +2093,61 @@ var CsTilesInternal = class extends Base3 {
     }}
       >
         <div class=${classMap7(controlClasses)}>
-          <input
-            type="radio"
-            class="native-input"
-            name=${groupName}
-            .value=${item.value}
-            .checked=${isSelected}
-            ?disabled=${isDisabled}
-            ?readonly=${this.readOnly}
-            tabindex=${this._getTabIndex(index)}
-            aria-labelledby=${labelId}
-            aria-describedby=${ifDefined4(descId)}
-            @click=${(e) => e.preventDefault()}
-            @focus=${() => this._onFocus(index)}
-          />
-          <span class="tile-label-wrapper">
-            <span
-              id=${labelId}
-              class=${classMap7({
-      "tile-label": true,
-      "tile-label--disabled": isDisabled
-    })}>
-              ${item.label}
-            </span>
-            ${item.description ? html8`
-              <span
-                id=${descId}
-                class=${classMap7({
-      "tile-description": true,
-      "tile-description--disabled": isDisabled
+          <span class="wrapper">
+            <span class="label-wrapper">
+              <span class="control radio-control">
+                <svg viewBox="0 0 100 100" aria-hidden="true">
+                  <circle class=${classMap7({
+      "styled-circle-border": true,
+      "styled-circle-disabled": isDisabled,
+      "styled-circle-readonly": this.readOnly
+    })} stroke-width="6.25" cx="50" cy="50" r="46" />
+                  <circle class=${classMap7({
+      "styled-circle-fill": true,
+      "styled-circle-checked": isSelected,
+      "styled-circle-disabled": isDisabled,
+      "styled-circle-readonly": this.readOnly
+    })} stroke-width="30" cx="50" cy="50" r="35" />
+                </svg>
+                <input
+                  type="radio"
+                  class="native-input"
+                  name=${groupName}
+                  .value=${item.value}
+                  .checked=${isSelected}
+                  ?disabled=${isDisabled}
+                  ?readonly=${this.readOnly}
+                  tabindex=${this._getTabIndex(index)}
+                  aria-labelledby=${labelId}
+                  aria-describedby=${ifDefined4(descId)}
+                  @click=${(e) => e.preventDefault()}
+                  @focus=${() => this._onFocus(index)}
+                />
+                <span class="outline"></span>
+              </span>
+              <span class="content">
+                <span
+                  id=${labelId}
+                  class=${classMap7({
+      "label": true,
+      "label-disabled": isDisabled
     })}
-              >
-                ${item.description}
+                >
+                  ${item.label}
+                </span>
+                ${item.description ? html8`
+                  <span
+                    id=${descId}
+                    class=${classMap7({
+      "description": true,
+      "description-disabled": isDisabled
+    })}
+                  >
+                    ${item.description}
+                  </span>
+                ` : ""}
               </span>
-            ` : ""}
+            </span>
           </span>
         </div>
         ${item.image ? html8`
@@ -2129,13 +2169,13 @@ __decorateClass([
   property9({ type: Array })
 ], CsTilesInternal.prototype, "items", 2);
 __decorateClass([
-  property9({ type: String, attribute: "arialabel" })
+  property9({ type: String, attribute: "aria-label" })
 ], CsTilesInternal.prototype, "controlAriaLabel", 2);
 __decorateClass([
-  property9({ type: Boolean, attribute: "ariarequired" })
+  property9({ type: Boolean, attribute: "aria-required" })
 ], CsTilesInternal.prototype, "controlAriaRequired", 2);
 __decorateClass([
-  property9({ type: String, attribute: "ariacontrols" })
+  property9({ type: String, attribute: "aria-controls" })
 ], CsTilesInternal.prototype, "controlAriaControls", 2);
 __decorateClass([
   property9({ type: Number })
@@ -2258,9 +2298,9 @@ var CsListInternal = class extends CsBaseElement {
   constructor() {
     super(...arguments);
     this.items = [];
-    this.listLabel = "";
-    this.listLabelledby = "";
-    this.listDescribedby = "";
+    this.controlAriaLabel = "";
+    this.controlAriaLabelledby = "";
+    this.controlAriaDescribedby = "";
     this.sortable = false;
     this.sortDisabled = false;
     this.disableItemPaddings = false;
@@ -2304,9 +2344,9 @@ var CsListInternal = class extends CsBaseElement {
         <ol
           class=${classMap8(listClasses)}
           role="list"
-          aria-label=${ifDefined5(this.listLabel || void 0)}
-          aria-labelledby=${ifDefined5(this.listLabelledby || void 0)}
-          aria-describedby=${ifDefined5(this.listDescribedby || void 0)}
+          aria-label=${ifDefined5(this.controlAriaLabel || void 0)}
+          aria-labelledby=${ifDefined5(this.controlAriaLabelledby || void 0)}
+          aria-describedby=${ifDefined5(this.controlAriaDescribedby || void 0)}
         >${content}</ol>
       `;
     }
@@ -2314,9 +2354,9 @@ var CsListInternal = class extends CsBaseElement {
       <ul
         class=${classMap8(listClasses)}
         role="list"
-        aria-label=${ifDefined5(this.listLabel || void 0)}
-        aria-labelledby=${ifDefined5(this.listLabelledby || void 0)}
-        aria-describedby=${ifDefined5(this.listDescribedby || void 0)}
+        aria-label=${ifDefined5(this.controlAriaLabel || void 0)}
+        aria-labelledby=${ifDefined5(this.controlAriaLabelledby || void 0)}
+        aria-describedby=${ifDefined5(this.controlAriaDescribedby || void 0)}
       >${content}</ul>
     `;
   }
@@ -2331,14 +2371,14 @@ __decorateClass([
   property10({ type: String })
 ], CsListInternal.prototype, "tagOverride", 2);
 __decorateClass([
-  property10({ type: String, attribute: "label" })
-], CsListInternal.prototype, "listLabel", 2);
+  property10({ type: String, attribute: "aria-label" })
+], CsListInternal.prototype, "controlAriaLabel", 2);
 __decorateClass([
-  property10({ type: String, attribute: "labelledby" })
-], CsListInternal.prototype, "listLabelledby", 2);
+  property10({ type: String, attribute: "aria-labelledby" })
+], CsListInternal.prototype, "controlAriaLabelledby", 2);
 __decorateClass([
-  property10({ type: String, attribute: "describedby" })
-], CsListInternal.prototype, "listDescribedby", 2);
+  property10({ type: String, attribute: "aria-describedby" })
+], CsListInternal.prototype, "controlAriaDescribedby", 2);
 __decorateClass([
   property10({ type: Boolean })
 ], CsListInternal.prototype, "sortable", 2);
@@ -2399,9 +2439,9 @@ var CsTreeViewInternal = class extends CsBaseElement {
   constructor() {
     super(...arguments);
     this.items = [];
-    this.treeLabel = "";
-    this.treeLabelledby = "";
-    this.treeDescribedby = "";
+    this.controlAriaLabel = "";
+    this.controlAriaLabelledby = "";
+    this.controlAriaDescribedby = "";
     this._expandedSet = /* @__PURE__ */ new Set();
   }
   static {
@@ -2488,9 +2528,9 @@ var CsTreeViewInternal = class extends CsBaseElement {
       <ul
         class=${classMap9(rootClasses)}
         role="tree"
-        aria-label=${ifDefined6(this.treeLabel || void 0)}
-        aria-labelledby=${ifDefined6(this.treeLabelledby || void 0)}
-        aria-describedby=${ifDefined6(this.treeDescribedby || void 0)}
+        aria-label=${ifDefined6(this.controlAriaLabel || void 0)}
+        aria-labelledby=${ifDefined6(this.controlAriaLabelledby || void 0)}
+        aria-describedby=${ifDefined6(this.controlAriaDescribedby || void 0)}
       >
         ${this.items.map((item, i) => this._renderNode(item, i, 0))}
       </ul>
@@ -2513,14 +2553,14 @@ __decorateClass([
   property11({ attribute: false })
 ], CsTreeViewInternal.prototype, "expandedItems", 2);
 __decorateClass([
-  property11({ type: String, attribute: "label" })
-], CsTreeViewInternal.prototype, "treeLabel", 2);
+  property11({ type: String, attribute: "aria-label" })
+], CsTreeViewInternal.prototype, "controlAriaLabel", 2);
 __decorateClass([
-  property11({ type: String, attribute: "labelledby" })
-], CsTreeViewInternal.prototype, "treeLabelledby", 2);
+  property11({ type: String, attribute: "aria-labelledby" })
+], CsTreeViewInternal.prototype, "controlAriaLabelledby", 2);
 __decorateClass([
-  property11({ type: String, attribute: "describedby" })
-], CsTreeViewInternal.prototype, "treeDescribedby", 2);
+  property11({ type: String, attribute: "aria-describedby" })
+], CsTreeViewInternal.prototype, "controlAriaDescribedby", 2);
 __decorateClass([
   property11({ type: String })
 ], CsTreeViewInternal.prototype, "connectorLines", 2);

package/dist/list/internal.d.ts

@@ -14,9 +14,9 @@ export declare class CsListInternal<T = any> extends CsBaseElement {
     items: ReadonlyArray<T>;
     renderItem: ((item: T) => RenderedItem) | undefined;
     tagOverride?: 'ol' | 'ul';
-    listLabel: string;
-    listLabelledby: string;
-    listDescribedby: string;
+    controlAriaLabel: string;
+    controlAriaLabelledby: string;
+    controlAriaDescribedby: string;
     sortable: boolean;
     sortDisabled: boolean;
     disableItemPaddings: boolean;

package/dist/list/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../src/list/internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAO5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,UAAU,YAAY;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAID,qBAAa,cAAc,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,aAAa;IACxD,OAAgB,MAAM,4BAAqE;IAG3F,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAM;IAG7B,UAAU,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,YAAY,CAAC,GAAG,SAAS,CAAC;IAGpD,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAG1B,SAAS,SAAM;IAGf,cAAc,SAAM;IAGpB,eAAe,SAAM;IAGrB,QAAQ,UAAS;IAGjB,YAAY,UAAS;IAGrB,mBAAmB,UAAS;IAG5B,eAAe,UAAS;IAGxB,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;IAEpC,OAAO,CAAC,eAAe;IAqBd,MAAM;CAuChB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../src/list/internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAO5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,UAAU,YAAY;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAID,qBAAa,cAAc,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,aAAa;IACxD,OAAgB,MAAM,4BAAqE;IAG3F,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAM;IAG7B,UAAU,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,YAAY,CAAC,GAAG,SAAS,CAAC;IAGpD,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAG1B,gBAAgB,SAAM;IAGtB,qBAAqB,SAAM;IAG3B,sBAAsB,SAAM;IAG5B,QAAQ,UAAS;IAGjB,YAAY,UAAS;IAGrB,mBAAmB,UAAS;IAG5B,eAAe,UAAS;IAGxB,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;IAEpC,OAAO,CAAC,eAAe;IAqBd,MAAM;CAuChB"}

package/dist/radio-group/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../src/radio-group/internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAO5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,QAAA,MAAM,IAAI,qHAAqC,CAAC;AAIhD,qBAAa,oBAAqB,SAAQ,IAAI;IAC5C,OAAgB,MAAM,4BAAwF;IAGrG,KAAK,SAAM;IAGpB,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAM;IAGjE,gBAAgB,SAAM;IAGtB,mBAAmB,UAAS;IAG5B,mBAAmB,SAAM;IAGzB,QAAQ,UAAS;IAGjB,SAAS,EAAE,YAAY,GAAG,UAAU,CAAc;IAElD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA6B;IACxD,OAAO,CAAC,aAAa,CAAM;IAElB,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAQlD,KAAK,IAAI,IAAI;IAWb,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,UAAU,CAuChB;IAEF,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,YAAY;IAUX,MAAM,IAAI,cAAc;IAuBjC,OAAO,CAAC,WAAW;CAuEpB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../src/radio-group/internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAO5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,QAAA,MAAM,IAAI,qHAAqC,CAAC;AAIhD,qBAAa,oBAAqB,SAAQ,IAAI;IAC5C,OAAgB,MAAM,4BAAwF;IAGrG,KAAK,SAAM;IAGpB,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAM;IAGjE,gBAAgB,SAAM;IAGtB,mBAAmB,UAAS;IAG5B,mBAAmB,SAAM;IAGzB,QAAQ,UAAS;IAGjB,SAAS,EAAE,YAAY,GAAG,UAAU,CAAc;IAElD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA6B;IACxD,OAAO,CAAC,aAAa,CAAM;IAElB,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAQlD,KAAK,IAAI,IAAI;IAWb,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,UAAU,CAuChB;IAEF,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,YAAY;IAUX,MAAM,IAAI,cAAc;IAuBjC,OAAO,CAAC,WAAW;CAmFpB"}

package/dist/tiles/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../src/tiles/internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAO5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,QAAA,MAAM,IAAI,qHAAqC,CAAC;AAIhD,qBAAa,eAAgB,SAAQ,IAAI;IACvC,OAAgB,MAAM,4BAAwF;IAGrG,KAAK,SAAM;IAGpB,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC,CAAM;IAGtD,gBAAgB,SAAM;IAGtB,mBAAmB,UAAS;IAG5B,mBAAmB,SAAM;IAGzB,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,QAAQ,UAAS;IAEjB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA6B;IACxD,OAAO,CAAC,aAAa,CAAM;IAElB,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAQlD,KAAK,IAAI,IAAI;IAWb,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,UAAU,CAiChB;IAEF,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,YAAY;IASX,MAAM,IAAI,cAAc;IAwBjC,OAAO,CAAC,WAAW;CAiFpB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../src/tiles/internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAO5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,QAAA,MAAM,IAAI,qHAAqC,CAAC;AAIhD,qBAAa,eAAgB,SAAQ,IAAI;IACvC,OAAgB,MAAM,4BAAwF;IAGrG,KAAK,SAAM;IAGpB,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC,CAAM;IAGtD,gBAAgB,SAAM;IAGtB,mBAAmB,UAAS;IAG5B,mBAAmB,SAAM;IAGzB,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,QAAQ,UAAS;IAEjB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA6B;IACxD,OAAO,CAAC,aAAa,CAAM;IAElB,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAQlD,KAAK,IAAI,IAAI;IAWb,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,UAAU,CAiChB;IAEF,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,YAAY;IASX,MAAM,IAAI,cAAc;IAwBjC,OAAO,CAAC,WAAW;CAuGpB"}

package/dist/tree-view/internal.d.ts

@@ -8,9 +8,9 @@ export declare class CsTreeViewInternal<T = any> extends CsBaseElement {
     getItemId: ((item: T, index: number) => string) | undefined;
     getItemChildren: ((item: T, index: number) => ReadonlyArray<T> | undefined) | undefined;
     expandedItems?: ReadonlyArray<string>;
-    treeLabel: string;
-    treeLabelledby: string;
-    treeDescribedby: string;
+    controlAriaLabel: string;
+    controlAriaLabelledby: string;
+    controlAriaDescribedby: string;
     connectorLines?: TreeViewProps.ConnectorLinesVariant;
     i18nStrings?: TreeViewProps.I18nStrings<T>;
     renderItemToggleIcon?: (data: TreeViewProps.ItemToggleRenderIconData) => unknown;

package/dist/tree-view/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../src/tree-view/internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAM5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIrD,qBAAa,kBAAkB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,aAAa;IAC5D,OAAgB,MAAM,4BAA+C;IAGrE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAM;IAG7B,UAAU,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,aAAa,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IAG7E,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IAG5D,eAAe,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,aAAa,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;IAGxF,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAGtC,SAAS,SAAM;IAGf,cAAc,SAAM;IAGpB,eAAe,SAAM;IAGrB,cAAc,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC;IAGrD,WAAW,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IAG3C,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,wBAAwB,KAAK,OAAO,CAAC;IAEjF,OAAO,CAAC,YAAY,CAAqB;IAEhC,UAAU,CAAC,OAAO,EAAE,OAAO,KAAK,EAAE,cAAc,GAAG,IAAI;IAMhE,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,iBAAiB;IAiBzB,OAAO,CAAC,WAAW;IAqDV,MAAM;CAqBhB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../src/tree-view/internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAM5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIrD,qBAAa,kBAAkB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,aAAa;IAC5D,OAAgB,MAAM,4BAA+C;IAGrE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAM;IAG7B,UAAU,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,aAAa,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IAG7E,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IAG5D,eAAe,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,aAAa,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;IAGxF,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAGtC,gBAAgB,SAAM;IAGtB,qBAAqB,SAAM;IAG3B,sBAAsB,SAAM;IAG5B,cAAc,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC;IAGrD,WAAW,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IAG3C,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,wBAAwB,KAAK,OAAO,CAAC;IAEjF,OAAO,CAAC,YAAY,CAAqB;IAEhC,UAAU,CAAC,OAAO,EAAE,OAAO,KAAK,EAAE,cAAc,GAAG,IAAI;IAMhE,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,iBAAiB;IAiBzB,OAAO,CAAC,WAAW;IAqDV,MAAM;CAqBhB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cumulus-ui/components",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Web components inspired by Cloudscape Design System",
   "type": "module",
   "main": "./dist/index.js",
@@ -23,7 +23,7 @@
     "build:demo": "node scripts/build-demo.mjs",
     "dev": "npx vite --port 3000",
     "test": "npm run build:cdn && npx playwright test",
-    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.demo.json",
+    "typecheck": "tsc --noEmit",
     "clean": "rm -rf dist",
     "generate:interfaces": "tsx scripts/generate-interfaces.ts",
     "generate:styles": "tsx scripts/generate-styles.ts",
@@ -49,6 +49,7 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.11.1",
+    "@cloudscape-design/components": "^3.0.1267",
     "@playwright/test": "^1.59.1",
     "@types/node": "^25.5.2",
     "@types/pngjs": "^6.0.5",
@@ -57,6 +58,6 @@
     "pngjs": "^7.0.0",
     "tsx": "^4.21.0",
     "typescript": "~5.9.3",
-    "vite": "^8.0.6"
+    "vite": "^8.0.7"
   }
 }