@cumulus-ui/components 0.5.1 → 0.5.3

package/dist/index.js

@@ -9068,7 +9068,7 @@ __decorateClass([
   property24({ type: Boolean, reflect: true })
 ], CsPaginationInternal.prototype, "disabled", 2);
 __decorateClass([
-  property24({ type: Object })
+  property24({ attribute: false })
 ], CsPaginationInternal.prototype, "ariaLabels", 2);
 
 // src/pagination/index.ts
@@ -12447,6 +12447,7 @@ var CsSliderInternal = class extends CsBaseElement {
     this.step = 1;
     this.disabled = false;
     this.ariaLabel = null;
+    this.ariaDescription = null;
     this._onInput = (e) => {
       if (this.disabled) return;
       const input = e.target;
@@ -12497,6 +12498,7 @@ var CsSliderInternal = class extends CsBaseElement {
             step=${this.step}
             ?disabled=${this.disabled}
             aria-label=${ifDefined17(this.ariaLabel || void 0)}
+            aria-description=${ifDefined17(this.ariaDescription || void 0)}
             aria-valuemin=${this.min}
             aria-valuemax=${this.max}
             aria-valuenow=${this.value}
@@ -12529,6 +12531,9 @@ __decorateClass([
 __decorateClass([
   property34({ type: String })
 ], CsSliderInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property34({ type: String })
+], CsSliderInternal.prototype, "ariaDescription", 2);
 
 // src/slider/index.ts
 var CsSlider = class extends CsSliderInternal {
@@ -13123,6 +13128,7 @@ var CsFileInputInternal = class extends CsBaseElement {
     this.multiple = false;
     this.variant = "button";
     this.ariaLabel = "Choose file";
+    this.ariaRequired = null;
     this.disabled = false;
     this._onButtonClick = () => {
       if (this.disabled) return;
@@ -13170,6 +13176,7 @@ var CsFileInputInternal = class extends CsBaseElement {
           icon-name=${isIconOnly ? "upload" : ""}
           ?disabled=${this.disabled}
           aria-label=${label}
+          aria-required=${ifDefined19(this.ariaRequired || void 0)}
           @click=${this._onButtonClick}
         >${!isIconOnly ? html38`<slot>${label}</slot>` : ""}</cs-button>
       </span>
@@ -13188,6 +13195,9 @@ __decorateClass([
 __decorateClass([
   property37({ type: String })
 ], CsFileInputInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property37({ type: Boolean })
+], CsFileInputInternal.prototype, "ariaRequired", 2);
 __decorateClass([
   property37({ type: Boolean, reflect: true })
 ], CsFileInputInternal.prototype, "disabled", 2);
@@ -13201,6 +13211,7 @@ customElements.define("cs-file-input", CsFileInput);
 import { css as css84, html as html39, nothing as nothing16 } from "lit";
 import { property as property38, state as state9 } from "lit/decorators.js";
 import { classMap as classMap34 } from "lit/directives/class-map.js";
+import { ifDefined as ifDefined20 } from "lit/directives/if-defined.js";
 
 // src/tabs/styles.ts
 import { css as css83 } from "lit";
@@ -13528,6 +13539,8 @@ var CsTabsInternal = class extends CsBaseElement {
     this.variant = "default";
     this.disableContentPaddings = false;
     this.fitHeight = false;
+    this.ariaLabel = null;
+    this.ariaLabelledby = null;
     this._internalActiveTabId = "";
     this._onTabKeyDown = (e) => {
       const enabledTabs = this.tabs.filter((t) => !t.disabled);
@@ -13643,7 +13656,9 @@ var CsTabsInternal = class extends CsBaseElement {
       <div class=${classMap34(rootClasses)}>
         <div class=${classMap34(headerClasses)}>
           <div class="tab-header-scroll-container">
-            <ul class="tabs-header-list" role="tablist">
+            <ul class="tabs-header-list" role="tablist"
+              aria-label=${ifDefined20(this.ariaLabel || void 0)}
+              aria-labelledby=${ifDefined20(!this.ariaLabel && this.ariaLabelledby ? this.ariaLabelledby : void 0)}>
               ${this.tabs.map((tab) => this._renderTab(tab))}
             </ul>
           </div>
@@ -13700,6 +13715,12 @@ __decorateClass([
 __decorateClass([
   property38({ type: Boolean, reflect: true })
 ], CsTabsInternal.prototype, "fitHeight", 2);
+__decorateClass([
+  property38({ type: String })
+], CsTabsInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property38({ type: String })
+], CsTabsInternal.prototype, "ariaLabelledby", 2);
 __decorateClass([
   state9()
 ], CsTabsInternal.prototype, "_internalActiveTabId", 2);
@@ -14199,7 +14220,7 @@ customElements.define("cs-expandable-section", CsExpandableSection);
 import { css as css89, html as html41, nothing as nothing18 } from "lit";
 import { property as property40, state as state11, query as query3 } from "lit/decorators.js";
 import { classMap as classMap36 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined20 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined21 } from "lit/directives/if-defined.js";
 
 // src/button-dropdown/styles.ts
 import { css as css87 } from "lit";
@@ -14693,8 +14714,8 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
           type="button"
           aria-haspopup="true"
           aria-expanded=${this._open}
-          aria-label=${ifDefined20(this.ariaLabel || "Actions")}
-          aria-disabled=${ifDefined20(ariaDisabled)}
+          aria-label=${ifDefined21(this.ariaLabel || "Actions")}
+          aria-disabled=${ifDefined21(ariaDisabled)}
           tabindex=${tabIndex}
           @click=${this._onTriggerClick}
         >
@@ -14712,8 +14733,8 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
         type="button"
         aria-haspopup="true"
         aria-expanded=${this._open}
-        aria-label=${ifDefined20(this.ariaLabel || void 0)}
-        aria-disabled=${ifDefined20(ariaDisabled)}
+        aria-label=${ifDefined21(this.ariaLabel || void 0)}
+        aria-disabled=${ifDefined21(ariaDisabled)}
         tabindex=${tabIndex}
         @click=${this._onTriggerClick}
       >
@@ -14823,7 +14844,7 @@ customElements.define("cs-button-dropdown", CsButtonDropdown);
 // src/button-group/internal.ts
 import { css as css91, html as html42 } from "lit";
 import { property as property41 } from "lit/decorators.js";
-import { ifDefined as ifDefined21 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined22 } from "lit/directives/if-defined.js";
 
 // src/button-group/styles.ts
 import { css as css90 } from "lit";
@@ -14908,9 +14929,9 @@ var CsButtonGroupInternal = class extends CsBaseElement {
             data-item-id=${item.id}
             ?pressed=${item.pressed}
             ?disabled=${!!item.disabled}
-            icon-name=${ifDefined21(item.iconName)}
-            pressed-icon-name=${ifDefined21(item.pressedIconName)}
-            aria-label=${ifDefined21(item.text)}
+            icon-name=${ifDefined22(item.iconName)}
+            pressed-icon-name=${ifDefined22(item.pressedIconName)}
+            aria-label=${ifDefined22(item.text)}
             @change=${() => this._onToggleButtonChange(item)}
           ></cs-toggle-button>
         </div>
@@ -14924,8 +14945,8 @@ var CsButtonGroupInternal = class extends CsBaseElement {
             data-item-id=${item.id}
             ?disabled=${!!item.disabled}
             ?loading=${!!item.loading}
-            icon-name=${ifDefined21(item.iconName)}
-            aria-label=${ifDefined21(item.text)}
+            icon-name=${ifDefined22(item.iconName)}
+            aria-label=${ifDefined22(item.text)}
             @click=${(e) => {
         if (e instanceof CustomEvent) {
           this._onIconButtonClick(item);
@@ -14947,13 +14968,13 @@ var CsButtonGroupInternal = class extends CsBaseElement {
       <div
         class="root"
         role="toolbar"
-        aria-label=${ifDefined21(this.ariaLabel || void 0)}
+        aria-label=${ifDefined22(this.ariaLabel || void 0)}
       >
         ${this.items.map((itemOrGroup, groupIndex) => {
       if (isGroup(itemOrGroup)) {
         return html42`
               ${groupIndex > 0 ? html42`<div class="divider" role="separator"></div>` : ""}
-              <div class="group" role="group" aria-label=${ifDefined21(itemOrGroup.text)}>
+              <div class="group" role="group" aria-label=${ifDefined22(itemOrGroup.text)}>
                 ${this._renderGroupItems(itemOrGroup.items)}
               </div>
             `;
@@ -14987,7 +15008,7 @@ customElements.define("cs-button-group", CsButtonGroup);
 import { css as css94, html as html43 } from "lit";
 import { property as property42 } from "lit/decorators.js";
 import { classMap as classMap37 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined22 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined23 } from "lit/directives/if-defined.js";
 
 // src/breadcrumb-group/styles.ts
 import { css as css92 } from "lit";
@@ -15289,7 +15310,7 @@ var CsBreadcrumbGroupInternal = class extends CsBaseElement {
     return html43`
       <nav
         class="breadcrumb-group"
-        aria-label=${ifDefined22(this.ariaLabel || "Breadcrumbs")}
+        aria-label=${ifDefined23(this.ariaLabel || "Breadcrumbs")}
       >
         <ol class="breadcrumb-group-list">
           ${this.items.map((item, i) => this._renderItem(item, i))}
@@ -15314,7 +15335,7 @@ customElements.define("cs-breadcrumb-group", CsBreadcrumbGroup);
 import { css as css97, html as html44, nothing as nothing19 } from "lit";
 import { property as property43, state as state12, query as query4 } from "lit/decorators.js";
 import { classMap as classMap38 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined23 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined24 } from "lit/directives/if-defined.js";
 
 // src/select/styles.ts
 import { css as css95 } from "lit";
@@ -15628,6 +15649,8 @@ var CsSelectInternal = class extends Base6 {
     this.filteringType = "none";
     this.placeholder = "";
     this.ariaLabel = null;
+    this.ariaRequired = null;
+    this.ariaLabelledby = null;
     this.invalid = false;
     this.filteringPlaceholder = "";
     this.selectedAriaLabel = "";
@@ -15845,7 +15868,7 @@ var CsSelectInternal = class extends Base6 {
         class=${classMap38(classes)}
         role="option"
         aria-selected=${isSelected}
-        aria-disabled=${ifDefined23(opt.disabled ? "true" : void 0)}
+        aria-disabled=${ifDefined24(opt.disabled ? "true" : void 0)}
         @click=${(e) => this._onOptionClick(opt, e)}
         @mouseenter=${() => {
       if (!opt.disabled) this._highlightedIndex = index;
@@ -15891,7 +15914,7 @@ var CsSelectInternal = class extends Base6 {
           />
         </div>
       ` : nothing19}
-      <ul class="option-list" role="listbox" aria-label=${ifDefined23(this.ariaLabel || void 0)}>
+      <ul class="option-list" role="listbox" aria-label=${ifDefined24(this.ariaLabel || void 0)}>
         ${items}
       </ul>
     `;
@@ -15912,8 +15935,9 @@ var CsSelectInternal = class extends Base6 {
           type="button"
           aria-haspopup="listbox"
           aria-expanded=${this._open}
-          aria-label=${ifDefined23(this.ariaLabel || void 0)}
-          aria-disabled=${ifDefined23(this.disabled ? "true" : void 0)}
+          aria-label=${ifDefined24(this.ariaLabel || void 0)}
+          aria-required=${ifDefined24(this.ariaRequired || void 0)}
+          aria-disabled=${ifDefined24(this.disabled ? "true" : void 0)}
           ?disabled=${false}
           tabindex=${this.disabled ? -1 : 0}
           @click=${this._onTriggerClick}
@@ -15949,6 +15973,12 @@ __decorateClass([
 __decorateClass([
   property43({ type: String })
 ], CsSelectInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property43({ type: String })
+], CsSelectInternal.prototype, "ariaRequired", 2);
+__decorateClass([
+  property43({ type: String })
+], CsSelectInternal.prototype, "ariaLabelledby", 2);
 __decorateClass([
   property43({ type: Boolean })
 ], CsSelectInternal.prototype, "invalid", 2);
@@ -15986,7 +16016,7 @@ customElements.define("cs-select", CsSelect);
 import { css as css99, html as html45, nothing as nothing20 } from "lit";
 import { property as property44, state as state13, query as query5 } from "lit/decorators.js";
 import { classMap as classMap39 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined24 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined25 } from "lit/directives/if-defined.js";
 
 // src/multiselect/styles.ts
 import { css as css98 } from "lit";
@@ -16461,7 +16491,7 @@ var CsMultiselectInternal = class extends Base7 {
         class=${classMap39(classes)}
         role="option"
         aria-selected=${isSelected}
-        aria-disabled=${ifDefined24(opt.disabled ? "true" : void 0)}
+        aria-disabled=${ifDefined25(opt.disabled ? "true" : void 0)}
         @click=${(e) => this._onOptionClick(opt, e)}
         @mouseenter=${() => {
       if (!opt.disabled) this._highlightedIndex = index;
@@ -16506,7 +16536,7 @@ var CsMultiselectInternal = class extends Base7 {
           />
         </div>
       ` : nothing20}
-      <ul class="option-list" role="listbox" aria-multiselectable="true" aria-label=${ifDefined24(this.ariaLabel || void 0)}>
+      <ul class="option-list" role="listbox" aria-multiselectable="true" aria-label=${ifDefined25(this.ariaLabel || void 0)}>
         ${items}
       </ul>
     `;
@@ -16545,8 +16575,8 @@ var CsMultiselectInternal = class extends Base7 {
           type="button"
           aria-haspopup="listbox"
           aria-expanded=${this._open}
-          aria-label=${ifDefined24(this.ariaLabel || void 0)}
-          aria-disabled=${ifDefined24(this.disabled ? "true" : void 0)}
+          aria-label=${ifDefined25(this.ariaLabel || void 0)}
+          aria-disabled=${ifDefined25(this.disabled ? "true" : void 0)}
           ?disabled=${false}
           tabindex=${this.disabled ? -1 : 0}
           @click=${this._onTriggerClick}
@@ -16629,7 +16659,7 @@ customElements.define("cs-multiselect", CsMultiselect);
 import { css as css102, html as html46, nothing as nothing21 } from "lit";
 import { property as property45, state as state14, query as query6 } from "lit/decorators.js";
 import { classMap as classMap40 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined25 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined26 } from "lit/directives/if-defined.js";
 
 // src/autosuggest/styles.ts
 import { css as css100 } from "lit";
@@ -17029,14 +17059,14 @@ var CsAutosuggestInternal = class extends Base8 {
             class=${classMap40(inputClasses)}
             type="text"
             .value=${this.value}
-            placeholder=${ifDefined25(this.placeholder || void 0)}
+            placeholder=${ifDefined26(this.placeholder || void 0)}
             ?disabled=${this.disabled}
             ?readonly=${this.readOnly}
-            aria-label=${ifDefined25(this.ariaLabel || void 0)}
+            aria-label=${ifDefined26(this.ariaLabel || void 0)}
             aria-autocomplete="list"
             aria-expanded=${showDropdown ? "true" : "false"}
-            aria-controls=${ifDefined25(showDropdown ? this._listboxId : void 0)}
-            aria-activedescendant=${ifDefined25(
+            aria-controls=${ifDefined26(showDropdown ? this._listboxId : void 0)}
+            aria-activedescendant=${ifDefined26(
       showDropdown && this._highlightedIndex >= 0 ? `${this._listboxId}-option-${this._highlightedIndex}` : void 0
     )}
             role="combobox"
@@ -17074,7 +17104,7 @@ var CsAutosuggestInternal = class extends Base8 {
         id=${`${this._listboxId}-option-${index}`}
         role="option"
         aria-selected=${isHighlighted ? "true" : "false"}
-        aria-disabled=${ifDefined25(isDisabled ? "true" : void 0)}
+        aria-disabled=${ifDefined26(isDisabled ? "true" : void 0)}
         @click=${() => this._onOptionClick(option)}
       >
         ${option.label || option.value || ""}
@@ -17128,7 +17158,7 @@ customElements.define("cs-autosuggest", CsAutosuggest);
 import { css as css104, html as html47 } from "lit";
 import { property as property46 } from "lit/decorators.js";
 import { classMap as classMap41 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined26 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined27 } from "lit/directives/if-defined.js";
 
 // src/segmented-control/styles.ts
 import { css as css103 } from "lit";
@@ -17401,8 +17431,8 @@ var CsSegmentedControlInternal = class extends CsBaseElement {
         <div
           class=${classMap41({ "segment-part": true, [segmentCountClass]: true })}
           role="group"
-          aria-label=${ifDefined26(this.label || void 0)}
-          aria-labelledby=${ifDefined26(!this.label && this.ariaLabelledby ? this.ariaLabelledby : void 0)}
+          aria-label=${ifDefined27(this.label || void 0)}
+          aria-labelledby=${ifDefined27(!this.label && this.ariaLabelledby ? this.ariaLabelledby : void 0)}
         >
           ${this.options.map((option, index) => this._renderSegment(option, index))}
         </div>
@@ -17423,7 +17453,7 @@ var CsSegmentedControlInternal = class extends CsBaseElement {
         type="button"
         ?disabled=${isDisabled}
         aria-pressed=${isSelected ? "true" : "false"}
-        aria-label=${ifDefined26(option.iconName && !option.text ? option.iconAlt || void 0 : void 0)}
+        aria-label=${ifDefined27(option.iconName && !option.text ? option.iconAlt || void 0 : void 0)}
         tabindex=${this._getTabIndex(index)}
         @click=${() => this._onSegmentClick(option)}
         @focus=${() => this._onSegmentFocus(index)}
@@ -20100,7 +20130,7 @@ customElements.define("cs-form", CsForm);
 import { css as css122, html as html56 } from "lit";
 import { property as property55 } from "lit/decorators.js";
 import { classMap as classMap46 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined27 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined28 } from "lit/directives/if-defined.js";
 
 // src/modal/styles.ts
 import { css as css121 } from "lit";
@@ -20443,7 +20473,7 @@ var CsModalInternal = class extends CsBaseElement {
             class=${classMap46(dialogClasses)}
             role="dialog"
             aria-modal="true"
-            aria-label=${ifDefined27(this.header || void 0)}
+            aria-label=${ifDefined28(this.header || void 0)}
           >
             <div class="container">
               <div class="header">
@@ -20500,7 +20530,7 @@ customElements.define("cs-modal", CsModal);
 import { css as css124, html as html57, nothing as nothing30 } from "lit";
 import { property as property56 } from "lit/decorators.js";
 import { classMap as classMap47 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined28 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined29 } from "lit/directives/if-defined.js";
 
 // src/file-upload/styles.ts
 import { css as css123 } from "lit";
@@ -20617,6 +20647,7 @@ var CsFileUploadInternal = class extends CsBaseElement {
     this.errorText = "";
     this.constraintText = "";
     this.ariaLabel = null;
+    this.ariaRequired = null;
     this.label = "";
     this.fileTokenAlignment = "vertical";
     this._thumbnailUrls = /* @__PURE__ */ new Map();
@@ -20728,10 +20759,11 @@ var CsFileUploadInternal = class extends CsBaseElement {
 
         <cs-file-input
           variant="button"
-          accept=${ifDefined28(this.accept || void 0)}
+          accept=${ifDefined29(this.accept || void 0)}
           ?multiple=${this.multiple}
           ?disabled=${this.disabled}
           aria-label=${this.ariaLabel || uploadButtonText}
+          aria-required=${ifDefined29(this.ariaRequired || void 0)}
           @change=${this._onFileInputChange}
         >${uploadButtonText}</cs-file-input>
 
@@ -20781,6 +20813,9 @@ __decorateClass([
 __decorateClass([
   property56({ type: String })
 ], CsFileUploadInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property56({ type: Boolean })
+], CsFileUploadInternal.prototype, "ariaRequired", 2);
 __decorateClass([
   property56({ type: String })
 ], CsFileUploadInternal.prototype, "label", 2);
@@ -20800,7 +20835,7 @@ customElements.define("cs-file-upload", CsFileUpload);
 import { css as css126, html as html58, nothing as nothing31 } from "lit";
 import { property as property57, state as state18 } from "lit/decorators.js";
 import { classMap as classMap48 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined29 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined30 } from "lit/directives/if-defined.js";
 
 // src/calendar/styles.ts
 import { css as css125 } from "lit";
@@ -21233,11 +21268,11 @@ var CsCalendarInternal = class extends CsBaseElement {
       <div
         class="calendar"
         role="group"
-        aria-label=${ifDefined29(this.ariaLabel || void 0)}
-        aria-labelledby=${ifDefined29(
+        aria-label=${ifDefined30(this.ariaLabel || void 0)}
+        aria-labelledby=${ifDefined30(
       !this.ariaLabel ? this.ariaLabelledby || void 0 : void 0
     )}
-        aria-describedby=${ifDefined29(this.ariaDescribedby || void 0)}
+        aria-describedby=${ifDefined30(this.ariaDescribedby || void 0)}
       >
         <div class="calendar-inner">
           <div class="calendar-header">
@@ -21360,7 +21395,7 @@ customElements.define("cs-calendar", CsCalendar);
 import { css as css128, html as html59 } from "lit";
 import { property as property58 } from "lit/decorators.js";
 import { classMap as classMap49 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined30 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined31 } from "lit/directives/if-defined.js";
 import { consume as consume2 } from "@lit/context";
 
 // src/date-input/styles.ts
@@ -21443,17 +21478,17 @@ var CsDateInputInternal = class extends Base9 {
             class=${classMap49(inputClasses)}
             type="text"
             .value=${this.value}
-            placeholder=${ifDefined30(this.placeholder || void 0)}
+            placeholder=${ifDefined31(this.placeholder || void 0)}
             ?disabled=${this.disabled}
             ?readonly=${this.readOnly}
             ?autofocus=${this.autoFocus}
-            id=${ifDefined30(controlId)}
-            aria-label=${ifDefined30(this.ariaLabel || void 0)}
-            aria-labelledby=${ifDefined30(
+            id=${ifDefined31(controlId)}
+            aria-label=${ifDefined31(this.ariaLabel || void 0)}
+            aria-labelledby=${ifDefined31(
       !this.ariaLabel ? ariaLabelledby : void 0
     )}
-            aria-describedby=${ifDefined30(this._resolvedAriaDescribedby)}
-            aria-invalid=${ifDefined30(this._isInvalid ? "true" : void 0)}
+            aria-describedby=${ifDefined31(this._resolvedAriaDescribedby)}
+            aria-invalid=${ifDefined31(this._isInvalid ? "true" : void 0)}
             @input=${this._onInput}
             @blur=${this._onBlur}
             @focus=${this._onFocus}
@@ -21499,7 +21534,7 @@ customElements.define("cs-date-input", CsDateInput);
 // src/date-picker/internal.ts
 import { css as css130, html as html60, nothing as nothing32 } from "lit";
 import { property as property59, state as state19, query as query7 } from "lit/decorators.js";
-import { ifDefined as ifDefined31 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined32 } from "lit/directives/if-defined.js";
 import { consume as consume3 } from "@lit/context";
 
 // src/date-picker/styles.ts
@@ -21578,6 +21613,7 @@ var CsDatePickerInternal = class extends Base10 {
     this.warning = false;
     this.autoFocus = false;
     this.ariaLabel = null;
+    this.ariaRequired = null;
     this._open = false;
     this._cleanupOutsideClick = null;
     this._onInputChange = (e) => {
@@ -21707,7 +21743,8 @@ var CsDatePickerInternal = class extends Base10 {
                 ?read-only=${this.readOnly}
                 ?invalid=${this._isInvalid}
                 ?warning=${this._isWarning}
-                aria-label=${ifDefined31(this.ariaLabel || void 0)}
+                aria-label=${ifDefined32(this.ariaLabel || void 0)}
+                aria-required=${ifDefined32(this.ariaRequired || void 0)}
                 @change=${this._onInputChange}
               ></cs-date-input>
             </div>
@@ -21729,7 +21766,7 @@ var CsDatePickerInternal = class extends Base10 {
                       start-of-week=${this.startOfWeek}
                       .isDateEnabled=${this.isDateEnabled}
                       .i18nStrings=${this.i18nStrings}
-                      aria-label=${ifDefined31(this.ariaLabel || void 0)}
+                      aria-label=${ifDefined32(this.ariaLabel || void 0)}
                       @change=${this._onCalendarChange}
                     ></cs-calendar>
                   </div>
@@ -21779,6 +21816,9 @@ __decorateClass([
 __decorateClass([
   property59({ type: String })
 ], CsDatePickerInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property59({ type: Boolean })
+], CsDatePickerInternal.prototype, "ariaRequired", 2);
 __decorateClass([
   property59({ attribute: false })
 ], CsDatePickerInternal.prototype, "i18nStrings", 2);
@@ -21801,7 +21841,7 @@ customElements.define("cs-date-picker", CsDatePicker);
 import { css as css133, html as html61, nothing as nothing33 } from "lit";
 import { property as property60, state as state20, query as query8 } from "lit/decorators.js";
 import { classMap as classMap50 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined32 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined33 } from "lit/directives/if-defined.js";
 
 // src/date-range-picker/styles.ts
 import { css as css131 } from "lit";
@@ -22533,8 +22573,8 @@ var CsDateRangePickerInternal = class extends Base11 {
             type="button"
             aria-haspopup="dialog"
             aria-expanded=${this._open ? "true" : "false"}
-            aria-label=${ifDefined32(this.ariaLabel || void 0)}
-            aria-disabled=${ifDefined32(this.disabled ? "true" : void 0)}
+            aria-label=${ifDefined33(this.ariaLabel || void 0)}
+            aria-disabled=${ifDefined33(this.disabled ? "true" : void 0)}
             ?disabled=${false}
             tabindex=${this.disabled ? -1 : 0}
             @click=${this._onTriggerClick}
@@ -22551,7 +22591,7 @@ var CsDateRangePickerInternal = class extends Base11 {
         </div>
         ${this._open ? html61`
           <div class=${classMap50(dropdownClasses)} role="dialog"
-            aria-label=${ifDefined32(this.ariaLabel || "Date range picker")}
+            aria-label=${ifDefined33(this.ariaLabel || "Date range picker")}
             aria-modal="true">
             ${this._renderModeSwitch()}
             <div class="dropdown-body">
@@ -22771,7 +22811,7 @@ var componentStyles60 = css134`
 import { css as css135, html as html62, nothing as nothing34 } from "lit";
 import { property as property61 } from "lit/decorators.js";
 import { classMap as classMap51 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined33 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined34 } from "lit/directives/if-defined.js";
 import { consume as consume4 } from "@lit/context";
 var Base12 = FormAssociatedMixin(CsBaseElement);
 var hostStyles61 = css135`:host { display: block; }`;
@@ -22788,6 +22828,7 @@ var CsInputInternal = class extends Base12 {
     this.autoFocus = false;
     this.inputMode = "";
     this.ariaLabel = null;
+    this.ariaRequired = null;
     this.ariaDescribedby = null;
     this.clearAriaLabel = "";
     this._onInput = (e) => {
@@ -22886,17 +22927,18 @@ var CsInputInternal = class extends Base12 {
             class=${classMap51(inputClasses)}
             type=${this.type}
             .value=${this.value}
-            placeholder=${ifDefined33(this.placeholder || void 0)}
+            placeholder=${ifDefined34(this.placeholder || void 0)}
             ?disabled=${this.disabled}
             ?readonly=${this.readOnly}
             ?autofocus=${this.autoFocus}
-            inputmode=${ifDefined33(this.inputMode || void 0)}
-            step=${ifDefined33(this.step)}
-            id=${ifDefined33(controlId)}
-            aria-label=${ifDefined33(this.ariaLabel || void 0)}
-            aria-labelledby=${ifDefined33(!this.ariaLabel ? ariaLabelledby : void 0)}
-            aria-describedby=${ifDefined33(this._resolvedAriaDescribedby)}
-            aria-invalid=${ifDefined33(this._isInvalid ? "true" : void 0)}
+            inputmode=${ifDefined34(this.inputMode || void 0)}
+            step=${ifDefined34(this.step)}
+            id=${ifDefined34(controlId)}
+            aria-label=${ifDefined34(this.ariaLabel || void 0)}
+            aria-labelledby=${ifDefined34(!this.ariaLabel ? ariaLabelledby : void 0)}
+            aria-describedby=${ifDefined34(this._resolvedAriaDescribedby)}
+            aria-required=${ifDefined34(this.ariaRequired || void 0)}
+            aria-invalid=${ifDefined34(this._isInvalid ? "true" : void 0)}
             @input=${this._onInput}
             @blur=${this._onBlur}
             @focus=${this._onFocus}
@@ -22952,6 +22994,9 @@ __decorateClass([
 __decorateClass([
   property61({ type: String })
 ], CsInputInternal.prototype, "ariaLabel", 2);
+__decorateClass([
+  property61({ type: Boolean })
+], CsInputInternal.prototype, "ariaRequired", 2);
 __decorateClass([
   property61({ type: String })
 ], CsInputInternal.prototype, "ariaDescribedby", 2);
@@ -24383,7 +24428,7 @@ customElements.define("cs-code-editor", CsCodeEditor);
 import { css as css144, html as html67, nothing as nothing38 } from "lit";
 import { property as property66 } from "lit/decorators.js";
 import { classMap as classMap55 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined34 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined35 } from "lit/directives/if-defined.js";
 
 // src/top-navigation/styles.ts
 import { css as css143 } from "lit";
@@ -24791,10 +24836,10 @@ var CsTopNavigationInternal = class extends CsBaseElement {
       <div class=${classMap55(identityClasses)}>
         <a
           class="identity-link"
-          href=${ifDefined34(this.identity.href)}
+          href=${ifDefined35(this.identity.href)}
           @click=${(e) => this._onIdentityClick(e)}
         >
-          ${hasLogo ? html67`<img class="logo" src=${this.identity.logo.src} alt=${ifDefined34(this.identity.logo.alt)} />` : nothing38}
+          ${hasLogo ? html67`<img class="logo" src=${this.identity.logo.src} alt=${ifDefined35(this.identity.logo.alt)} />` : nothing38}
           ${this.identity.title ? html67`<span class="title">${this.identity.title}</span>` : nothing38}
         </a>
       </div>
@@ -24813,9 +24858,9 @@ var CsTopNavigationInternal = class extends CsBaseElement {
           <a
             class="overflow-menu-control overflow-menu-control-link"
             href=${utility.href}
-            target=${ifDefined34(utility.target)}
-            rel=${ifDefined34(utility.rel || (utility.target === "_blank" ? "noopener noreferrer" : void 0))}
-            aria-label=${ifDefined34(utility.ariaLabel)}
+            target=${ifDefined35(utility.target)}
+            rel=${ifDefined35(utility.rel || (utility.target === "_blank" ? "noopener noreferrer" : void 0))}
+            aria-label=${ifDefined35(utility.ariaLabel)}
             @click=${(e) => this._onUtilityButtonClick(utility, e)}
           >
             ${utility.iconName ? html67`<span class="utility-link-icon"><cs-icon name=${utility.iconName}></cs-icon></span>` : nothing38}
@@ -24830,7 +24875,7 @@ var CsTopNavigationInternal = class extends CsBaseElement {
         <button
           type="button"
           class="overflow-menu-control"
-          aria-label=${ifDefined34(utility.ariaLabel)}
+          aria-label=${ifDefined35(utility.ariaLabel)}
           @click=${(e) => this._onUtilityButtonClick(utility, e)}
         >
           ${utility.iconName ? html67`<span class="utility-link-icon"><cs-icon name=${utility.iconName}></cs-icon></span>` : nothing38}
@@ -24849,7 +24894,7 @@ var CsTopNavigationInternal = class extends CsBaseElement {
         <cs-button-dropdown
           .items=${utility.items}
           variant="normal"
-          aria-label=${ifDefined34(utility.ariaLabel)}
+          aria-label=${ifDefined35(utility.ariaLabel)}
         >
           ${utility.iconName ? html67`<cs-icon name=${utility.iconName}></cs-icon>` : nothing38}
           ${utility.text ?? ""}
@@ -24865,7 +24910,7 @@ var CsTopNavigationInternal = class extends CsBaseElement {
   }
   render() {
     return html67`
-      <nav class="top-navigation" aria-label=${ifDefined34(this.ariaLabel || "Site")}>
+      <nav class="top-navigation" aria-label=${ifDefined35(this.ariaLabel || "Site")}>
         <div class="padding-box">
           ${this._renderIdentity()}
           <div class="inputs">
@@ -24900,7 +24945,7 @@ customElements.define("cs-top-navigation", CsTopNavigation);
 import { css as css146, html as html68, nothing as nothing39 } from "lit";
 import { property as property67, state as state21 } from "lit/decorators.js";
 import { classMap as classMap56 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined35 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined36 } from "lit/directives/if-defined.js";
 
 // src/side-navigation/styles.ts
 import { css as css145 } from "lit";
@@ -25229,7 +25274,7 @@ var CsSideNavigationInternal = class extends CsBaseElement {
       e
     )}
         >
-          ${hasLogo ? html68`<img class="header-logo" src=${this.header.logo.src} alt=${ifDefined35(this.header.logo.alt)} />` : nothing39}
+          ${hasLogo ? html68`<img class="header-logo" src=${this.header.logo.src} alt=${ifDefined36(this.header.logo.alt)} />` : nothing39}
           ${this.header.text ? html68`<span class="header-link-text">${this.header.text}</span>` : nothing39}
         </a>
       </div>
@@ -25371,7 +25416,7 @@ var CsSideNavigationInternal = class extends CsBaseElement {
   }
   render() {
     return html68`
-      <nav class="root" aria-label=${ifDefined35(this.ariaLabel || "Side navigation")}>
+      <nav class="root" aria-label=${ifDefined36(this.ariaLabel || "Side navigation")}>
         ${this._renderHeader()}
         <slot name="itemsControl"></slot>
         <div class="list-container">
@@ -26248,6 +26293,7 @@ var CsSplitPanelInternal = class extends CsBaseElement {
   constructor() {
     super(...arguments);
     this.header = "";
+    this.ariaLabel = null;
     this.hidePreferencesButton = false;
     this.closeBehavior = "collapse";
     this.size = 250;
@@ -26272,7 +26318,7 @@ var CsSplitPanelInternal = class extends CsBaseElement {
     this.styles = [sharedStyles, componentStyles68, hostStyles70];
   }
   get _regionLabel() {
-    return this.panelAriaLabel || this.header;
+    return this.ariaLabel || this.panelAriaLabel || this.header;
   }
   render() {
     const closeLabel = this.i18nStrings?.closeButtonAriaLabel ?? "Close";
@@ -26421,6 +26467,9 @@ var CsSplitPanelInternal = class extends CsBaseElement {
 __decorateClass([
   property70({ type: String })
 ], CsSplitPanelInternal.prototype, "header", 2);
+__decorateClass([
+  property70({ type: String })
+], CsSplitPanelInternal.prototype, "ariaLabel", 2);
 __decorateClass([
   property70({ type: Boolean, reflect: true })
 ], CsSplitPanelInternal.prototype, "hidePreferencesButton", 2);
@@ -26508,7 +26557,7 @@ customElements.define("cs-annotation-context", CsAnnotationContext);
 import { css as css154, html as html73 } from "lit";
 import { property as property72 } from "lit/decorators.js";
 import { classMap as classMap59 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined36 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined37 } from "lit/directives/if-defined.js";
 import { consume as consume5 } from "@lit/context";
 
 // src/textarea/styles.ts
@@ -26702,16 +26751,16 @@ var CsTextareaInternal = class extends Base13 {
         <textarea
           class=${classMap59(textareaClasses)}
           .value=${this.value}
-          placeholder=${ifDefined36(this.placeholder || void 0)}
+          placeholder=${ifDefined37(this.placeholder || void 0)}
           rows=${this.rows}
           ?disabled=${this.disabled}
           ?readonly=${this.readOnly}
           ?autofocus=${this.autoFocus}
-          id=${ifDefined36(controlId)}
-          aria-label=${ifDefined36(this.ariaLabel || void 0)}
-          aria-labelledby=${ifDefined36(!this.ariaLabel ? ariaLabelledby : void 0)}
-          aria-describedby=${ifDefined36(this._resolvedAriaDescribedby)}
-          aria-invalid=${ifDefined36(this._isInvalid ? "true" : void 0)}
+          id=${ifDefined37(controlId)}
+          aria-label=${ifDefined37(this.ariaLabel || void 0)}
+          aria-labelledby=${ifDefined37(!this.ariaLabel ? ariaLabelledby : void 0)}
+          aria-describedby=${ifDefined37(this._resolvedAriaDescribedby)}
+          aria-invalid=${ifDefined37(this._isInvalid ? "true" : void 0)}
           @input=${this._onInput}
           @blur=${this._onBlur}
           @focus=${this._onFocus}
@@ -26883,7 +26932,7 @@ customElements.define("cs-text-filter", CsTextFilter);
 import { css as css158, html as html75 } from "lit";
 import { property as property74 } from "lit/decorators.js";
 import { classMap as classMap60 } from "lit/directives/class-map.js";
-import { ifDefined as ifDefined37 } from "lit/directives/if-defined.js";
+import { ifDefined as ifDefined38 } from "lit/directives/if-defined.js";
 import { consume as consume6 } from "@lit/context";
 
 // src/time-input/styles.ts
@@ -26962,11 +27011,11 @@ var CsTimeInputInternal = class extends Base14 {
             ?disabled=${this.disabled}
             ?readonly=${this.readOnly}
             ?autofocus=${this.autoFocus}
-            id=${ifDefined37(controlId)}
-            aria-label=${ifDefined37(this.ariaLabel || void 0)}
-            aria-labelledby=${ifDefined37(!this.ariaLabel ? ariaLabelledby : void 0)}
-            aria-describedby=${ifDefined37(this._resolvedAriaDescribedby)}
-            aria-invalid=${ifDefined37(this._isInvalid ? "true" : void 0)}
+            id=${ifDefined38(controlId)}
+            aria-label=${ifDefined38(this.ariaLabel || void 0)}
+            aria-labelledby=${ifDefined38(!this.ariaLabel ? ariaLabelledby : void 0)}
+            aria-describedby=${ifDefined38(this._resolvedAriaDescribedby)}
+            aria-invalid=${ifDefined38(this._isInvalid ? "true" : void 0)}
             @input=${this._onInput}
             @blur=${this._onBlur}
             @focus=${this._onFocus}