@ds-autonomie/web-components 2.7.1 → 2.8.0

package/cdn/chunks/{chunk.XUO4ROFZ.js → chunk.CVZBPG2A.js}

@@ -1,7 +1,8 @@
 import {
   menu_item_styles_default
-} from "./chunk.X7VTIYF4.js";
+} from "./chunk.2AGKTM6V.js";
 import {
+  HasSlotController,
   getTextContent
 } from "./chunk.YIY5RM53.js";
 import {
@@ -34,17 +35,21 @@ import {
 var DSAMenuItem = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "prefix");
     this.type = "button";
     this.size = "medium";
     this.disabled = false;
     this.href = "";
     this.rel = "noreferrer noopener";
+    this.collapsed = false;
   }
   connectedCallback() {
     super.connectedCallback();
     this.handleHostClick = this.handleHostClick.bind(this);
     this.addEventListener("click", this.handleHostClick);
-    this.setAttribute("role", "listitem");
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "listitem");
+    }
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -89,35 +94,41 @@ var DSAMenuItem = class extends ShoelaceElement {
   }
   render() {
     const tag = this.type === "link" ? i`a` : i`button`;
+    if (this.collapsed && !this.hasSlotController.test("prefix")) {
+      return u``;
+    }
     return u`
-      <${tag}
-        part="base"
-        class=${e2({
+      <dsa-tooltip placement="right" hoist content=${this.getTextLabel()} ?disabled=${!this.collapsed}>
+        <${tag}
+          part="base"
+          class=${e2({
       "menu-item": true,
       "menu-item--small": this.size === "small",
       "menu-item--medium": this.size === "medium",
       "menu-item--large": this.size === "large",
       "menu-item--disabled": this.disabled,
       "menu-item--button": this.type === "button",
-      "menu-item--link": this.type === "link"
+      "menu-item--link": this.type === "link",
+      "menu-item--collapsed": this.collapsed
     })}
-        href=${o(this.type === "link" ? this.href : void 0)}
-        target=${o(this.type === "link" ? this.target : void 0)}
-        rel=${o(this.type === "link" ? this.rel : void 0)}
-        download=${o(this.type === "link" ? this.download : void 0)}
-        aria-current=${ifDefinedAndNotEmpty(this.current)}
-        tabindex=${o(this.disabled ? "-1" : void 0)}
-      >
-        <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
+          href=${o(this.type === "link" ? this.href : void 0)}
+          target=${o(this.type === "link" ? this.target : void 0)}
+          rel=${o(this.type === "link" ? this.rel : void 0)}
+          download=${o(this.type === "link" ? this.download : void 0)}
+          aria-current=${ifDefinedAndNotEmpty(this.current)}
+          tabindex=${o(this.disabled ? "-1" : void 0)}
+        >
+          <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
 
-        <slot
-          part="label"
-          class="menu-item__label"
-          @slotchange=${this.handleDefaultSlotChange}
-        ></slot>
+          <slot
+            part="label"
+            class="menu-item__label"
+            @slotchange=${this.handleDefaultSlotChange}
+          ></slot>
 
-        <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
-      </${tag}>
+          <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
+        </${tag}>          
+      </dsa-tooltip>
     `;
   }
 };
@@ -152,6 +163,9 @@ __decorateClass([
 __decorateClass([
   n()
 ], DSAMenuItem.prototype, "current", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSAMenuItem.prototype, "collapsed", 2);
 __decorateClass([
   watch("disabled")
 ], DSAMenuItem.prototype, "handleDisabledChange", 1);

package/cdn/chunks/{chunk.U22AXFTO.js → chunk.CWY2H4ZC.js}

@@ -1,6 +1,6 @@
 import {
   menu_label_styles_default
-} from "./chunk.3LYWE5F4.js";
+} from "./chunk.CDM7VX7Q.js";
 import {
   ShoelaceElement,
   t

package/cdn/chunks/{chunk.YZL5RFYO.js → chunk.DBSXHLX2.js}

@@ -1,6 +1,6 @@
 import {
   page_header_styles_default
-} from "./chunk.GJ6NPBI5.js";
+} from "./chunk.B2BEAIE7.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -34,6 +34,7 @@ var DSAPageHeader = class extends ShoelaceElement {
       "secondary-text"
     );
     this.mobile = false;
+    this.reduced = false;
   }
   render() {
     return x`
@@ -42,11 +43,12 @@ var DSAPageHeader = class extends ShoelaceElement {
         class=${e({
       "page-header": true,
       "page-header--mobile": this.mobile === true,
-      "page-header--desktop": this.mobile === false
+      "page-header--desktop": this.mobile === false,
+      "page-header--reduced": this.reduced === true
     })}
       >
         <div class="page-header__container">
-          <slot name="breadcrumb"></slot>
+          <slot name="breadcrumb" class="breadcrumb"></slot>
           <slot
             name="backlink"
             class=${ifDefinedAndNotEmpty(
@@ -84,6 +86,9 @@ DSAPageHeader.styles = page_header_styles_default;
 __decorateClass([
   n({ type: Boolean })
 ], DSAPageHeader.prototype, "mobile", 2);
+__decorateClass([
+  n({ type: Boolean })
+], DSAPageHeader.prototype, "reduced", 2);
 DSAPageHeader = __decorateClass([
   t("dsa-page-header")
 ], DSAPageHeader);

package/cdn/chunks/{chunk.MUUNZVY6.js → chunk.DRVOJTJS.js}

@@ -1,10 +1,11 @@
+import {
+  DSATableRow
+} from "./chunk.DUANMGYF.js";
 import {
   table_header_row_styles_default
 } from "./chunk.FH62MZVI.js";
 import {
-  DSATableRow
-} from "./chunk.WY73AW7H.js";
-import {
+  e,
   t
 } from "./chunk.EW5LC4ZI.js";
 import {
@@ -34,7 +35,7 @@ var DSATableHeaderRow = class extends DSATableRow {
             accessible-name=${this.selectionLabel !== "" ? this.selectionLabel : this.localize.term("selectAllTableRows")}
             value=${this.selectionValue}
             ?checked=${this.selected}
-            @click=${(e) => e.stopPropagation()}
+            @click=${(e2) => e2.stopPropagation()}
             @dsa-change=${this.handleCheckboxChange}
             ?disabled=${this.loading}
           ></dsa-checkbox>
@@ -56,6 +57,9 @@ var DSATableHeaderRow = class extends DSATableRow {
   }
 };
 DSATableHeaderRow.styles = table_header_row_styles_default;
+__decorateClass([
+  e(".checkbox")
+], DSATableHeaderRow.prototype, "selectAllCheckbox", 2);
 DSATableHeaderRow = __decorateClass([
   t("dsa-table-header-row")
 ], DSATableHeaderRow);

package/cdn/chunks/{chunk.JJVGZ76D.js → chunk.DSXA7V54.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   ShoelaceElement,
   n,

package/cdn/chunks/{chunk.WY73AW7H.js → chunk.DUANMGYF.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.3V2OP5OV.js";
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   e2
 } from "./chunk.JY4LUWQC.js";

package/cdn/chunks/{chunk.K6UN4I5Q.js → chunk.EP2LR57N.js}

@@ -1,12 +1,12 @@
 import {
   header_search_styles_default
-} from "./chunk.4NTCF65I.js";
+} from "./chunk.B6A5AGBJ.js";
 import {
   l
 } from "./chunk.LDYYA5WE.js";
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   e2
 } from "./chunk.JY4LUWQC.js";
@@ -14,7 +14,6 @@ import {
   ShoelaceElement,
   e,
   n,
-  r,
   t
 } from "./chunk.EW5LC4ZI.js";
 import {
@@ -29,7 +28,6 @@ var DSAHeaderSearch = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
     this.localize = new LocalizeController(this);
-    this.hasFocus = false;
     this.value = "";
     this.expanded = false;
     this.alwaysOpen = false;
@@ -46,42 +44,10 @@ var DSAHeaderSearch = class extends ShoelaceElement {
     this.input.focus();
   }
   handleChange() {
-    this.value = this.input.value;
-    this.emit("dsa-change");
+    this.value = this.search.value;
   }
   handleInput() {
-    this.value = this.input.value;
-    this.emit("dsa-input");
-  }
-  handleInputFocus() {
-    this.hasFocus = true;
-    this.emit("dsa-focus");
-  }
-  handleInputBlur() {
-    this.hasFocus = false;
-    this.emit("dsa-blur");
-  }
-  handleClearClick(event) {
-    this.value = "";
-    this.emit("dsa-clear");
-    this.emit("dsa-input");
-    this.emit("dsa-change");
-    this.input.focus();
-    event.stopPropagation();
-  }
-  handleKeyDown(event) {
-    event.stopPropagation();
-    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
-    if (event.key === "Enter" && !hasModifier) {
-      setTimeout(() => {
-        if (!event.defaultPrevented && !event.isComposing) {
-          this.handleSubmitClick();
-        }
-      });
-    }
-  }
-  handleSubmitClick() {
-    this.emit("dsa-submit");
+    this.value = this.search.value;
   }
   async handleCancelClick() {
     this.emit("dsa-collapse");
@@ -89,6 +55,15 @@ var DSAHeaderSearch = class extends ShoelaceElement {
     await this.updateComplete;
     this.expandButton.focus();
   }
+  get input() {
+    return this.search.input;
+  }
+  get submitButton() {
+    return this.search.submitButton;
+  }
+  get clearButton() {
+    return this.search.clearButton;
+  }
   render() {
     if (!this.expanded && !this.alwaysOpen) {
       if (this.mobile) {
@@ -109,7 +84,6 @@ var DSAHeaderSearch = class extends ShoelaceElement {
             id="expand-button"
             variant="navigation"
             part="button button--navigation"
-            }
             @click=${this.handleExpandClick}
           >
             <dsa-icon name="search" library="system"></dsa-icon>
@@ -126,48 +100,12 @@ var DSAHeaderSearch = class extends ShoelaceElement {
       "search-bar--desktop": !this.mobile
     })}
       >
-        <div
-          class=${e2({ input: true, "input--focused": this.hasFocus })}
-        >
-          <input
-            class=${e2({
-      input__control: true,
-      "input__control--mobile": this.mobile,
-      "input__control--desktop": !this.mobile
-    })}
-            type="search"
-            placeholder=${this.localize.term("search")}
-            aria-label=${this.localize.term("search")}
-            title=${this.localize.term("search")}
-            .value=${l(this.value)}
-            @change=${this.handleChange}
-            @input=${this.handleInput}
-            @focus=${this.handleInputFocus}
-            @blur=${this.handleInputBlur}
-            @keydown=${this.handleKeyDown}
-          />
-          ${this.value.length > 0 ? x`
-                <dsa-icon-button
-                  id="clear-button"
-                  part="clear-button"
-                  name="cancel"
-                  label=${this.localize.term("clearEntry")}
-                  @click=${this.handleClearClick}
-                  library="system"
-                ></dsa-icon-button>
-              ` : ""}
-        </div>
-
-        <dsa-icon-button
-          id="submit-button"
-          name="search"
-          library="system"
-          label=${this.localize.term("search")}
-          variant="primary"
-          size=${this.mobile ? "large" : "xlarge"}
-          @click=${this.handleSubmitClick}
-        >
-        </dsa-icon-button>
+        <dsa-search
+          size=${this.mobile ? "small" : "medium"}
+          .value=${l(this.value)}
+          @dsa-change=${this.handleChange}
+          @dsa-input=${this.handleInput}
+        ></dsa-search>
 
         ${!this.alwaysOpen ? x`
               <dsa-button
@@ -185,23 +123,14 @@ var DSAHeaderSearch = class extends ShoelaceElement {
 };
 DSAHeaderSearch.styles = header_search_styles_default;
 __decorateClass([
-  e(".input__control")
-], DSAHeaderSearch.prototype, "input", 2);
+  e("dsa-search")
+], DSAHeaderSearch.prototype, "search", 2);
 __decorateClass([
   e("#expand-button")
 ], DSAHeaderSearch.prototype, "expandButton", 2);
-__decorateClass([
-  e("#submit-button")
-], DSAHeaderSearch.prototype, "submitButton", 2);
 __decorateClass([
   e("#cancel-button")
 ], DSAHeaderSearch.prototype, "cancelButton", 2);
-__decorateClass([
-  e("#clear-button")
-], DSAHeaderSearch.prototype, "clearButton", 2);
-__decorateClass([
-  r()
-], DSAHeaderSearch.prototype, "hasFocus", 2);
 __decorateClass([
   n()
 ], DSAHeaderSearch.prototype, "value", 2);

package/cdn/chunks/{chunk.727KD4JC.js → chunk.EXKO4BNS.js}

@@ -1,6 +1,6 @@
 import {
   renderFormElementErrors
-} from "./chunk.RPE5DQV3.js";
+} from "./chunk.PZK4ARTY.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.PWL7QCVG.js";
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.JDMH5Z5K.js → chunk.EXPTHDVJ.js}

@@ -1,6 +1,6 @@
 import {
   input_base_styles_default
-} from "./chunk.6GRHC4QP.js";
+} from "./chunk.S442ESGW.js";
 import {
   i
 } from "./chunk.UKK3NS3L.js";

package/cdn/chunks/{chunk.5CO3IOJ7.js → chunk.F4WG4HCT.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.LQLCDMCQ.js";
 import {
   renderFormElementErrors
-} from "./chunk.RPE5DQV3.js";
+} from "./chunk.PZK4ARTY.js";
 import {
   a11yWarning
 } from "./chunk.PWL7QCVG.js";

package/cdn/chunks/{chunk.AYE3T37E.js → chunk.FBMGDNRV.js}

@@ -1,12 +1,9 @@
 import {
   table_action_styles_default
-} from "./chunk.UMMRTTO5.js";
+} from "./chunk.C43CVKBG.js";
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
-import {
-  watch
-} from "./chunk.4FQJ3QJK.js";
+} from "./chunk.57JI3UNH.js";
 import {
   ShoelaceElement,
   e,
@@ -31,13 +28,6 @@ var DSATableAction = class extends ShoelaceElement {
     this.emit("dsa-table-actions-close");
     this.show = false;
   }
-  handleShowChange() {
-    if (this.show) {
-      this.removeAttribute("tabindex");
-    } else {
-      this.setAttribute("tabindex", "-1");
-    }
-  }
   render() {
     return x`
       <slot part="label" name="label"></slot>
@@ -47,7 +37,6 @@ var DSATableAction = class extends ShoelaceElement {
         id="closeButton"
         variant="tertiary"
         contrasted
-        size="small"
         @click=${this.handleClose}
       >
         <dsa-icon slot="prefix" name="close" library="system"></dsa-icon>
@@ -63,9 +52,6 @@ __decorateClass([
 __decorateClass([
   n({ type: Boolean, reflect: true })
 ], DSATableAction.prototype, "show", 2);
-__decorateClass([
-  watch("show")
-], DSATableAction.prototype, "handleShowChange", 1);
 DSATableAction = __decorateClass([
   t("dsa-table-action")
 ], DSATableAction);

package/cdn/chunks/{chunk.XWXOKQFC.js → chunk.FRO6GRVS.js}

@@ -1,6 +1,6 @@
 import {
   table_container_styles_default
-} from "./chunk.7JJC4KJM.js";
+} from "./chunk.UMGPQSGY.js";
 import {
   LoadingStateElement
 } from "./chunk.PBUOYITV.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   e2 as e
 } from "./chunk.JY4LUWQC.js";
@@ -94,8 +94,10 @@ var DSATableContainer = class extends LoadingStateElement {
     if (toolbar !== null) {
       if (this.showTableActions) {
         toolbar.setAttribute("tabindex", "-1");
+        toolbar.setAttribute("aria-hidden", "true");
       } else {
         toolbar.removeAttribute("tabindex");
+        toolbar.removeAttribute("aria-hidden");
       }
     }
   }

package/cdn/chunks/{chunk.TY7XK6UL.js → chunk.FSMUXFAQ.js}

@@ -232,6 +232,26 @@ var tag_styles_default = i`
     color: var(--dsa-wc-tag-green-700-on-base);
   }
 
+  .tag--neutral-100 {
+    background: var(--dsa-wc-tag-neutral-100-base);
+    color: var(--dsa-wc-tag-neutral-100-on-base);
+  }
+
+  .tag--neutral-200 {
+    background: var(--dsa-wc-tag-neutral-200-base);
+    color: var(--dsa-wc-tag-neutral-200-on-base);
+  }
+
+  .tag--neutral-300 {
+    background: var(--dsa-wc-tag-neutral-300-base);
+    color: var(--dsa-wc-tag-neutral-300-on-base);
+  }
+
+  .tag--neutral-400 {
+    background: var(--dsa-wc-tag-neutral-400-base);
+    color: var(--dsa-wc-tag-neutral-400-on-base);
+  }
+
   /*
    * Size modifiers
    */

package/cdn/chunks/{chunk.DAZARNOY.js → chunk.FVXLPV3C.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   e2
 } from "./chunk.JY4LUWQC.js";

package/cdn/chunks/{chunk.DDR5VWG6.js → chunk.FWUVNYIG.js}

@@ -1,6 +1,6 @@
 import {
   FormControlLayout
-} from "./chunk.OSDQDIQK.js";
+} from "./chunk.SI2RABQ3.js";
 import {
   defaultValue
 } from "./chunk.APSWEF5D.js";

package/cdn/chunks/{chunk.DR5NYTMX.js → chunk.FZ6I3S7V.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.YJWQEKVT.js";
 import {
   DSACheckboxGroup
-} from "./chunk.NFK3HLNV.js";
+} from "./chunk.PO2MPDC4.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.YCM23TDI.js → chunk.G5AZGI3C.js}

@@ -18,7 +18,7 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.EM2CIX7W.js";
+} from "./chunk.57JI3UNH.js";
 import {
   o
 } from "./chunk.XED65RH5.js";

package/cdn/chunks/{chunk.WYJYCTJH.js → chunk.HE4K2YDO.js}

@@ -1,12 +1,12 @@
 import {
   DSAInputTime
-} from "./chunk.DHNNNXA5.js";
+} from "./chunk.O23T7ACS.js";
 import {
   DSAInputDate
-} from "./chunk.7RUDZBEW.js";
+} from "./chunk.SJYXVRVE.js";
 import {
   InputBase
-} from "./chunk.DDR5VWG6.js";
+} from "./chunk.FWUVNYIG.js";
 import {
   o
 } from "./chunk.XED65RH5.js";

package/cdn/chunks/{chunk.NYPRGHOM.js → chunk.HPXPJRHP.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.Z67R2PEC.js";
+} from "./chunk.VCFEF4I5.js";
 import {
   component_styles_default
 } from "./chunk.MQAAYEM3.js";
@@ -138,8 +138,13 @@ var combobox_styles_default = i`
     padding: 0 var(--dsa-wc-multiselect-tag-padding-inline);
   }
 
-  .select--disabled .select__tags,
-  .select--disabled .select__tags::slotted(dsa-tag) {
+  .select--disabled .select__tags dsa-tag::part(base) {
+    background: var(--dsa-wc-multiselect-tag-disabled-background) !important;
+    color: var(--dsa-wc-multiselect-tag-disabled-color) !important;
+    border: solid 1px var(--dsa-wc-multiselect-tag-disabled-border-color);
+    cursor: not-allowed !important;
+  }
+  .select--readonly .select__tags dsa-tag::part(base) {
     cursor: not-allowed !important;
   }
 

package/cdn/chunks/{chunk.SJ2AWS22.js → chunk.HPYTPVEB.js}

@@ -31,6 +31,11 @@ var error_text_styles_default = i`
     color: var(--dsa-wc-error-text-icon-color);
     font-size: var(--dsa-wc-error-text-icon-size);
   }
+
+  .error-text--on-floating .error-text__slot,
+  .error-text--on-floating .error-text__icon {
+    color: var(--dsa-wc-error-text-on-floating-menu-color);
+  }
 `;
 
 export {

package/cdn/chunks/{chunk.HSIGEKL5.js → chunk.IIGRYD5Y.js}

@@ -1,11 +1,12 @@
 import {
   error_text_styles_default
-} from "./chunk.SJ2AWS22.js";
+} from "./chunk.HPYTPVEB.js";
 import {
   e2 as e
 } from "./chunk.JY4LUWQC.js";
 import {
   ShoelaceElement,
+  n,
   t
 } from "./chunk.EW5LC4ZI.js";
 import {
@@ -17,10 +18,15 @@ import {
 
 // src/components/error-text/error-text.ts
 var DSAErrorText = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "base";
+  }
   render() {
     return x`<div
       class=${e({
-      "error-text": true
+      "error-text": true,
+      "error-text--on-floating": this.variant === "floating"
     })}
     >
       <dsa-icon
@@ -33,6 +39,9 @@ var DSAErrorText = class extends ShoelaceElement {
   }
 };
 DSAErrorText.styles = error_text_styles_default;
+__decorateClass([
+  n({ reflect: true })
+], DSAErrorText.prototype, "variant", 2);
 DSAErrorText = __decorateClass([
   t("dsa-error-text")
 ], DSAErrorText);