@ds-autonomie/web-components 2.5.0 → 2.5.1

package/cdn/chunks/chunk.CAWNJ57J.js

@@ -0,0 +1,291 @@
+import {
+  DSAInputTime
+} from "./chunk.7CBNLWGC.js";
+import {
+  DSAInputDate
+} from "./chunk.T6APUNAB.js";
+import {
+  InputBase
+} from "./chunk.YGJ3KERC.js";
+import {
+  watch
+} from "./chunk.4FQJ3QJK.js";
+import {
+  o
+} from "./chunk.YQLIIKLI.js";
+import {
+  e,
+  n,
+  t
+} from "./chunk.DZB6XUZ7.js";
+import {
+  x
+} from "./chunk.7HUC6BF3.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/input/input.ts
+var DSAInput = class extends InputBase {
+  /**
+   * Connect methods to underlying input element
+   */
+  /** Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. */
+  get valueAsDate() {
+    return this.inputElement.valueAsDate;
+  }
+  set valueAsDate(newValue) {
+    this.inputElement.valueAsDate = newValue;
+    this.value = this.inputElement.value;
+  }
+  /** Gets or sets the current value as a number. Returns `NaN` if the value can't be converted. */
+  get valueAsNumber() {
+    return this.inputElement.valueAsNumber;
+  }
+  set valueAsNumber(newValue) {
+    this.inputElement.valueAsNumber = newValue;
+    this.value = this.inputElement.value;
+  }
+  /** Gets the validity state object */
+  get validity() {
+    return this.inputElement.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.inputElement.validationMessage;
+  }
+  handleChange() {
+    this.value = this.inputElement.value;
+  }
+  handleInput() {
+    this.value = this.inputElement.value;
+  }
+  handleStepChange() {
+    this.inputElement.step = this.step;
+    this.formControlController.updateValidity();
+  }
+  /** Sets focus on the input. */
+  focus(options) {
+    this.inputElement.focus(options);
+  }
+  /** Removes focus from the input. */
+  blur() {
+    this.inputElement.blur();
+  }
+  /** Selects all the text in the input. */
+  select() {
+    this.inputElement.select();
+  }
+  /** Sets the start and end positions of the text selection (0-based). */
+  setSelectionRange(selectionStart, selectionEnd, selectionDirection = "none") {
+    this.inputElement.setSelectionRange(
+      selectionStart,
+      selectionEnd,
+      selectionDirection
+    );
+  }
+  /** Replaces a range of text with a new string. */
+  setRangeText(replacement, start, end, selectMode) {
+    this.inputElement.setRangeText(replacement, start, end, selectMode);
+    if (this.value !== this.inputElement.value) {
+      this.value = this.inputElement.value;
+    }
+  }
+  async showTimePicker() {
+    if (this.inputElement instanceof DSAInputTime) {
+      await this.inputElement.showTimePicker();
+    }
+  }
+  async hideTimePicker() {
+    if (this.inputElement instanceof DSAInputTime) {
+      await this.inputElement.hideTimePicker();
+    }
+  }
+  async showDatepicker() {
+    if (this.inputElement instanceof DSAInputDate) {
+      await this.inputElement.showDatepicker();
+    }
+  }
+  async hideDatepicker() {
+    if (this.inputElement instanceof DSAInputDate) {
+      await this.inputElement.hideDatepicker();
+    }
+  }
+  /** Increments the value of a numeric or time input type by the value of the step attribute, multiplied by an optional number parameter. */
+  stepUp(stepNumber) {
+    this.inputElement.stepUp(stepNumber);
+    if (this.value !== this.inputElement.value) {
+      this.value = this.inputElement.value;
+    }
+  }
+  /** Decrements the value of a numeric or time input type by the value of the step attribute, multiplied by an optional number parameter.  */
+  stepDown(stepNumber) {
+    this.inputElement.stepDown(stepNumber);
+    if (this.value !== this.inputElement.value) {
+      this.value = this.inputElement.value;
+    }
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.inputElement.checkValidity();
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.inputElement.reportValidity();
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    this.inputElement.setCustomValidity(message);
+  }
+  async getUpdateComplete() {
+    if (!this.inputElement) return false;
+    return await this.inputElement.updateComplete;
+  }
+  render() {
+    if (this.type === "date") {
+      return x`
+        <dsa-input-date
+          class="input-element"
+          name=${o(this.name)}
+          title=${o(this.title)}
+          value=${this.value}
+          .defaultValue=${o(this.defaultValue)}
+          size=${o(this.size)}
+          variant=${o(this.variant)}
+          label=${o(this.label)}
+          help-text=${o(this.helpText)}
+          ?clearable=${this.clearable}
+          ?disabled=${this.disabled}
+          lang=${o(this.lang)}
+          placeholder=${o(this.placeholder)}
+          ?readonly=${this.readonly}
+          ?error=${this.error}
+          .errorMessage=${o(this.errorMessage)}
+          form=${o(this.form)}
+          .formControlController=${this.formControlController}
+          ?required=${this.required}
+          min=${o(this.min)}
+          max=${o(this.max)}
+          calendar-start-date=${o(this.calendarStartDate)}
+          ?autofocus=${this.autofocus}
+          enterkeyhint=${o(this.enterkeyhint)}
+          @dsa-change=${this.handleChange}
+          @dsa-input=${this.handleInput}
+          description=${o(this.description)}
+        >
+          ${this.hasSlotController.test("label") ? x` <slot name="label" slot="label"></slot> ` : ""}
+          ${this.hasSlotController.test("prefix") ? x` <slot name="prefix" slot="prefix"></slot> ` : ""}
+          ${this.hasSlotController.test("help-text") ? x` <slot name="help-text" slot="help-text"></slot> ` : ""}
+          ${this.hasSlotController.test("tooltip") ? x` <slot name="tooltip" slot="tooltip"></slot> ` : ""}
+        </dsa-input-date>
+      `;
+    } else if (this.type === "time") {
+      return x`
+        <dsa-input-time
+          class="input-element"
+          name=${o(this.name)}
+          title=${o(this.title)}
+          value=${this.value}
+          .defaultValue=${o(this.defaultValue)}
+          size=${o(this.size)}
+          variant=${o(this.variant)}
+          label=${o(this.label)}
+          help-text=${o(this.helpText)}
+          ?clearable=${this.clearable}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?error=${this.error}
+          .errorMessage=${o(this.errorMessage)}
+          form=${o(this.form)}
+          .formControlController=${this.formControlController}
+          ?required=${this.required}
+          min=${o(this.min)}
+          max=${o(this.max)}
+          step=${o(this.step)}
+          ?autofocus=${this.autofocus}
+          enterkeyhint=${o(this.enterkeyhint)}
+          @dsa-change=${this.handleChange}
+          @dsa-input=${this.handleInput}
+          description=${o(this.description)}
+        >
+          ${this.hasSlotController.test("label") ? x` <slot name="label" slot="label"></slot> ` : ""}
+          ${this.hasSlotController.test("prefix") ? x` <slot name="prefix" slot="prefix"></slot> ` : ""}
+          ${this.hasSlotController.test("suffix") ? x` <slot name="suffix" slot="suffix"></slot> ` : ""}
+          ${this.hasSlotController.test("help-text") ? x` <slot name="help-text" slot="help-text"></slot> ` : ""}
+          ${this.hasSlotController.test("tooltip") ? x` <slot name="tooltip" slot="tooltip"></slot> ` : ""}
+        </dsa-input-time>
+      `;
+    } else {
+      return x`
+        <dsa-input-native
+          class="input-element"
+          title=${o(this.title)}
+          name=${o(this.name)}
+          size=${o(this.size)}
+          variant=${o(this.variant)}
+          label=${o(this.label)}
+          help-text=${o(this.helpText)}
+          ?disabled=${this.disabled}
+          placeholder=${o(this.placeholder)}
+          ?readonly=${this.readonly}
+          ?error=${this.error}
+          .errorMessage=${o(this.errorMessage)}
+          form=${o(this.form)}
+          .formControlController=${this.formControlController}
+          ?required=${this.required}
+          description=${o(this.description)}
+          type=${this.type}
+          value=${this.value}
+          .defaultValue=${o(this.defaultValue)}
+          ?clearable=${this.clearable}
+          ?passwordVisible=${this.passwordVisible}
+          pattern=${o(this.pattern)}
+          minlength=${o(this.minlength)}
+          maxlength=${o(this.maxlength)}
+          ?counter=${this.counter}
+          min=${o(this.min)}
+          max=${o(this.max)}
+          step=${o(this.step)}
+          autocapitalize=${o(this.autocapitalize)}
+          autocorrect=${o(this.autocorrect)}
+          autocomplete=${o(this.autocomplete)}
+          ?autofocus=${this.autofocus}
+          enterkeyhint=${o(this.enterkeyhint)}
+          spellcheck=${this.spellcheck}
+          inputmode=${o(this.inputmode)}
+          @dsa-change=${this.handleChange}
+          @dsa-input=${this.handleInput}
+        >
+          ${this.hasSlotController.test("label") ? x` <slot name="label" slot="label"></slot> ` : ""}
+          ${this.hasSlotController.test("prefix") ? x` <slot name="prefix" slot="prefix"></slot> ` : ""}
+          ${this.hasSlotController.test("suffix") ? x` <slot name="suffix" slot="suffix"></slot> ` : ""}
+          ${this.hasSlotController.test("help-text") ? x` <slot name="help-text" slot="help-text"></slot> ` : ""}
+          ${this.hasSlotController.test("tooltip") ? x` <slot name="tooltip" slot="tooltip"></slot> ` : ""}
+        </dsa-input-native>
+      `;
+    }
+  }
+};
+__decorateClass([
+  e(".input-element")
+], DSAInput.prototype, "inputElement", 2);
+__decorateClass([
+  n()
+], DSAInput.prototype, "lang", 2);
+__decorateClass([
+  n({ attribute: "calendar-start-date" })
+], DSAInput.prototype, "calendarStartDate", 2);
+__decorateClass([
+  watch("step", { waitUntilFirstUpdate: true })
+], DSAInput.prototype, "handleStepChange", 1);
+DSAInput = __decorateClass([
+  t("dsa-input")
+], DSAInput);
+
+export {
+  DSAInput
+};

package/cdn/chunks/{chunk.URME4YZI.js → chunk.E2ERJT5L.js}

@@ -2,17 +2,11 @@ import {
   input_otp_styles_default
 } from "./chunk.W6JXBJWF.js";
 import {
-  FormControlLayout
-} from "./chunk.E73QKLNL.js";
+  InputBase
+} from "./chunk.YGJ3KERC.js";
 import {
   l
 } from "./chunk.7PPSHHT2.js";
-import {
-  defaultValue
-} from "./chunk.YY5FKN3H.js";
-import {
-  FormControlController
-} from "./chunk.3NWILHZZ.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";
@@ -39,38 +33,12 @@ import {
 } from "./chunk.4ZGVANML.js";
 
 // src/components/input-otp/input-otp.ts
-var DSAInputOTP = class extends FormControlLayout {
+var DSAInputOTP = class extends InputBase {
   constructor() {
     super(...arguments);
-    this.formControlController = new FormControlController(this, {
-      assumeInteractionOn: ["dsa-blur", "dsa-input"]
-    });
-    this.hasFocus = false;
     this.currentIndex = 0;
-    this.value = "";
-    this.defaultValue = "";
     this.length = 6;
   }
-  /** Gets the validity state object */
-  get validity() {
-    return this.input.validity;
-  }
-  /** Gets the validation message */
-  get validationMessage() {
-    return this.input.validationMessage;
-  }
-  async firstUpdated() {
-    await this.updateComplete;
-    this.formControlController.updateValidity();
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.emit("dsa-blur");
-  }
-  handleChange() {
-    this.value = this.input.value;
-    this.emit("dsa-change");
-  }
   handleFocus() {
     this.currentIndex = this.value ? -1 : 0;
     this.hasFocus = true;
@@ -111,19 +79,8 @@ var DSAInputOTP = class extends FormControlLayout {
       this.currentIndex = -1;
     }
   }
-  handleInvalid(event) {
-    this.formControlController.setValidity(false);
-    this.formControlController.emitInvalidEvent(event);
-  }
   handleKeyDown(event) {
-    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
-    if (event.key === "Enter" && !hasModifier) {
-      setTimeout(() => {
-        if (!event.defaultPrevented && !event.isComposing) {
-          this.formControlController.submit();
-        }
-      });
-    }
+    super.handleKeyDown(event);
     if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) {
       event.preventDefault();
       switch (event.key) {
@@ -156,12 +113,6 @@ var DSAInputOTP = class extends FormControlLayout {
   getLastIndex() {
     return this.value.length > 0 ? Math.min(this.value.length, this.length - 1) : 0;
   }
-  getDescriptionIds() {
-    let ids = [];
-    if (this.error) ids = ["error-text"];
-    ids = [...ids, "help-text", "description"];
-    return ids.join(" ");
-  }
   handleCurrentIndexChange() {
     if (this.currentIndex === -1) {
       this.input.setSelectionRange(0, this.input.value.length);
@@ -169,47 +120,9 @@ var DSAInputOTP = class extends FormControlLayout {
       this.input.setSelectionRange(this.currentIndex, this.currentIndex + 1);
     }
   }
-  handleDisabledChange() {
-    this.formControlController.setValidity(this.disabled);
-  }
-  async handleValueChange() {
-    await this.updateComplete;
-    this.formControlController.updateValidity();
-  }
   handlePatterChange() {
     this.patternRegexp = new RegExp(this.pattern);
   }
-  /** Removes focus from the input. */
-  blur() {
-    this.input.blur();
-  }
-  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
-  checkValidity() {
-    return this.input.checkValidity();
-  }
-  /** Sets focus on the input. */
-  focus(options) {
-    this.input.focus(options);
-  }
-  /** Gets the associated form, if one exists. */
-  getForm() {
-    return this.formControlController.getForm();
-  }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity() {
-    return this.input.reportValidity();
-  }
-  /** Selects all the text in the input. */
-  select() {
-    if (this.input instanceof HTMLInputElement) {
-      this.input.select();
-    }
-  }
-  /** Sets a custom validation message. Pass an empty string to restore validity. */
-  setCustomValidity(message) {
-    this.input.setCustomValidity(message);
-    this.formControlController.updateValidity();
-  }
   async getUpdateComplete() {
     const result = await super.getUpdateComplete();
     return result;
@@ -296,48 +209,18 @@ DSAInputOTP.styles = input_otp_styles_default;
 __decorateClass([
   e("input")
 ], DSAInputOTP.prototype, "input", 2);
-__decorateClass([
-  r()
-], DSAInputOTP.prototype, "hasFocus", 2);
 __decorateClass([
   r()
 ], DSAInputOTP.prototype, "currentIndex", 2);
 __decorateClass([
   r()
 ], DSAInputOTP.prototype, "patternRegexp", 2);
-__decorateClass([
-  n()
-], DSAInputOTP.prototype, "value", 2);
-__decorateClass([
-  defaultValue()
-], DSAInputOTP.prototype, "defaultValue", 2);
-__decorateClass([
-  n()
-], DSAInputOTP.prototype, "pattern", 2);
 __decorateClass([
   n({ type: Number })
 ], DSAInputOTP.prototype, "length", 2);
-__decorateClass([
-  n()
-], DSAInputOTP.prototype, "autocapitalize", 2);
-__decorateClass([
-  n({ type: Boolean })
-], DSAInputOTP.prototype, "autofocus", 2);
-__decorateClass([
-  n()
-], DSAInputOTP.prototype, "enterkeyhint", 2);
-__decorateClass([
-  n()
-], DSAInputOTP.prototype, "inputmode", 2);
 __decorateClass([
   watch("currentIndex", { waitUntilFirstUpdate: true })
 ], DSAInputOTP.prototype, "handleCurrentIndexChange", 1);
-__decorateClass([
-  watch("disabled", { waitUntilFirstUpdate: true })
-], DSAInputOTP.prototype, "handleDisabledChange", 1);
-__decorateClass([
-  watch("value", { waitUntilFirstUpdate: true })
-], DSAInputOTP.prototype, "handleValueChange", 1);
 __decorateClass([
   watch("pattern")
 ], DSAInputOTP.prototype, "handlePatterChange", 1);

package/cdn/chunks/{chunk.CMRQV2SO.js → chunk.EVV7CPIX.js}

@@ -1,13 +1,13 @@
 import {
-  input_styles_default
-} from "./chunk.L3ZYNSI3.js";
+  input_base_styles_default
+} from "./chunk.OCDDQJHV.js";
 import {
   i
 } from "./chunk.4KHZQZ3M.js";
 
 // src/components/input-date/input-date.styles.ts
 var input_date_styles_default = i`
-  ${input_styles_default}
+  ${input_base_styles_default}
 
   .input--date {
     overflow: visible;

package/cdn/chunks/{chunk.2N65UIM6.js → chunk.IPKU2NK6.js}

@@ -178,6 +178,11 @@ var DSAInternalDateField = class extends ShoelaceElement {
     input.valueAsDate = newValue;
     this.value = input.value;
   }
+  /** Gets or sets the current value as a number. Returns `NaN` if the value can't be converted. */
+  get valueAsNumber() {
+    var _a;
+    return (_a = this.hiddenInput.valueAsNumber) != null ? _a : parseFloat(this.value);
+  }
   /** Gets the validity state object */
   get validity() {
     return this.hiddenInput.validity;
@@ -284,7 +289,6 @@ var DSAInternalDateField = class extends ShoelaceElement {
       this.focusNextSpinbutton(currentInput);
     }
     if (event.key === "Enter") {
-      event.preventDefault();
       this.handleChange();
     }
   }
@@ -396,6 +400,20 @@ var DSAInternalDateField = class extends ShoelaceElement {
     var _a;
     (_a = this.focusedInput[0]) == null ? void 0 : _a.blur();
   }
+  /** Increments the value of a numeric or time input type by the value of the step attribute, multiplied by an optional number parameter. */
+  stepUp(stepNumber) {
+    this.hiddenInput.stepUp(stepNumber);
+    if (this.value !== this.hiddenInput.value) {
+      this.value = this.hiddenInput.value;
+    }
+  }
+  /** Decrements the value of a numeric or time input type by the value of the step attribute, multiplied by an optional number parameter.  */
+  stepDown(stepNumber) {
+    this.hiddenInput.stepDown(stepNumber);
+    if (this.value !== this.hiddenInput.value) {
+      this.value = this.hiddenInput.value;
+    }
+  }
   /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
   checkValidity() {
     return this.hiddenInput.checkValidity();
@@ -507,6 +525,7 @@ var DSAInternalDateField = class extends ShoelaceElement {
         ?required=${this.required}
         min=${o(this.min)}
         max=${o(this.max)}
+        step=${o(this.step)}
         .value=${l(this.value)}
         tabindex="-1"
         aria-hidden="true"
@@ -593,6 +612,9 @@ __decorateClass([
 __decorateClass([
   n()
 ], DSAInternalDateField.prototype, "max", 2);
+__decorateClass([
+  n()
+], DSAInternalDateField.prototype, "step", 2);
 __decorateClass([
   n({ type: Boolean })
 ], DSAInternalDateField.prototype, "autofocus", 2);

package/cdn/chunks/{chunk.UM64ZD3C.js → chunk.JUCW3BPM.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.II42H5RK.js";
 import {
   DSACheckboxGroup
-} from "./chunk.5UVKMYSG.js";
+} from "./chunk.BQX4GGIU.js";
 import {
   renderFormElementErrors
 } from "./chunk.EY4WUNAJ.js";

package/cdn/chunks/{chunk.EF2VOGBL.js → chunk.LYIECKOK.js}

@@ -481,7 +481,7 @@ P.valueOf = function() {
 var Big = _Big_();
 var big_default = Big;
 
-// src/components/input/input.utils.ts
+// src/components/input-native/input-native.utils.ts
 function isPrefixIconOverriden(type) {
   return ["email", "password", "search"].includes(type);
 }

package/cdn/chunks/{chunk.WLND36JK.js → chunk.MMT7DZQU.js}

@@ -41,10 +41,6 @@ var DSATabGroup = class extends ShoelaceElement {
     this.belowPageHeader = false;
   }
   connectedCallback() {
-    const whenAllDefined = Promise.all([
-      customElements.whenDefined("dsa-tab"),
-      customElements.whenDefined("dsa-tab-panel")
-    ]);
     super.connectedCallback();
     this.resizeObserver = new ResizeObserver(() => {
       this.repositionIndicator();
@@ -79,14 +75,14 @@ var DSATabGroup = class extends ShoelaceElement {
       }
     });
     this.updateComplete.then(() => {
-      this.syncTabsAndPanels();
       this.mutationObserver.observe(this, {
         attributes: true,
         childList: true,
         subtree: true
       });
       this.resizeObserver.observe(this.nav);
-      whenAllDefined.then(() => {
+      this.awaitAllElementsDefined().then(() => {
+        this.syncTabsAndPanels();
         const intersectionObserver = new IntersectionObserver(
           (entries, observer) => {
             var _a;
@@ -107,6 +103,12 @@ var DSATabGroup = class extends ShoelaceElement {
     this.mutationObserver.disconnect();
     this.resizeObserver.unobserve(this.nav);
   }
+  awaitAllElementsDefined() {
+    return Promise.all([
+      customElements.whenDefined("dsa-tab"),
+      customElements.whenDefined("dsa-tab-panel")
+    ]);
+  }
   getAllTabs(options = { includeDisabled: true }) {
     const slot = this.shadowRoot.querySelector('slot[name="nav"]');
     return [...slot.assignedElements()].filter((el) => {
@@ -284,7 +286,7 @@ var DSATabGroup = class extends ShoelaceElement {
         break;
     }
   }
-  // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.
+  // This caches tabs and panels, and synchronizes active states with the interface
   syncTabsAndPanels() {
     this.tabs = this.getAllTabs({ includeDisabled: false });
     this.panels = this.getAllPanels();
@@ -306,6 +308,11 @@ var DSATabGroup = class extends ShoelaceElement {
     this.syncIndicator();
     this.updateComplete.then(() => this.updateScrollControls());
   }
+  handleSlotChange() {
+    this.awaitAllElementsDefined().then(() => {
+      this.syncTabsAndPanels();
+    });
+  }
   updateScrollControls() {
     this.hasScrollControls = ["top", "bottom"].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;
   }
@@ -354,16 +361,17 @@ var DSATabGroup = class extends ShoelaceElement {
                     @click=${this.handleScrollToStart}
                     library="system"
                     size="xlarge"
+                    tabindex="-1"
                   ></dsa-icon-button>
                 ` : ""}
 
-            <div class="tab-group__nav">
+            <div class="tab-group__nav" tabindex="-1">
               <div part="tabs" class="tab-group__tabs" role="tablist">
                 <div
                   part="active-tab-indicator"
                   class="tab-group__indicator"
                 ></div>
-                <slot name="nav" @slotchange=${this.syncTabsAndPanels}></slot>
+                <slot name="nav" @slotchange=${this.handleSlotChange}></slot>
               </div>
             </div>
 
@@ -377,6 +385,7 @@ var DSATabGroup = class extends ShoelaceElement {
                     @click=${this.handleScrollToEnd}
                     library="system"
                     size="xlarge"
+                    tabindex="-1"
                   ></dsa-icon-button>
                 ` : ""}
           </div>
@@ -386,7 +395,7 @@ var DSATabGroup = class extends ShoelaceElement {
           <slot
             part="body"
             class="tab-group__body"
-            @slotchange=${this.syncTabsAndPanels}
+            @slotchange=${this.handleSlotChange}
           ></slot>
         </div>
       </div>

package/cdn/chunks/{chunk.BKVL3A5I.js → chunk.MRBMS4RB.js}

@@ -270,8 +270,12 @@ var DSATree = class extends ShoelaceElement {
     }
   }
   handleSlotChange() {
-    const items = this.getAllTreeItems();
-    items.forEach(this.initTreeItem);
+    if (customElements.get("dsa-tree-item")) {
+      const items = this.getAllTreeItems();
+      items.forEach(this.initTreeItem);
+    } else {
+      customElements.whenDefined("dsa-tree-item").then(() => this.handleSlotChange());
+    }
   }
   async handleSelectionChange() {
     const isSelectionMultiple = this.selection === "multiple";