@ds-autonomie/web-components 2.7.1 → 2.8.0

package/dist/chunks/{chunk.C7BO57Z2.js → chunk.AZSX7X74.js}

@@ -1,6 +1,6 @@
 import {
   FormControlLayout
-} from "./chunk.4H63REQH.js";
+} from "./chunk.PFEA4LHL.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";

package/dist/chunks/{chunk.X2YGBYH3.js → chunk.B2VWC53K.js}

@@ -1,6 +1,6 @@
 import {
   menu_accordion_styles_default
-} from "./chunk.JGDAZAC5.js";
+} from "./chunk.UCEUZIH3.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -21,7 +21,7 @@ import {
 } from "./chunk.PWL7QCVG.js";
 import {
   LocalizeController
-} from "./chunk.SK3KWU2I.js";
+} from "./chunk.N3JDTZGM.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";
@@ -40,19 +40,23 @@ var DSAMenuAccordion = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
     this.localize = new LocalizeController(this);
-    this.hasSlotController = new HasSlotController(this, "summary");
+    this.hasSlotController = new HasSlotController(
+      this,
+      "prefix",
+      "summary"
+    );
     this.open = false;
+    this.size = "medium";
     this.level = 1;
+    this.collapsed = false;
   }
   connectedCallback() {
     super.connectedCallback();
-    if (this.level === 2) {
-      const menuNavigation = this.querySelector(
-        "dsa-menu-navigation"
-      );
-      if (menuNavigation !== null) {
-        menuNavigation == null ? void 0 : menuNavigation.classList.add("level-2");
-      }
+    const menuNavigation = this.querySelector(
+      "dsa-menu-navigation"
+    );
+    if (menuNavigation !== null) {
+      menuNavigation == null ? void 0 : menuNavigation.classList.add(this.level === 2 ? "level-2" : "level-1");
     }
   }
   firstUpdated() {
@@ -85,6 +89,16 @@ var DSAMenuAccordion = class extends ShoelaceElement {
       this.show();
     }
   }
+  /** Returns a text label based on the contents of the summary slot. */
+  getTextSummary() {
+    var _a, _b;
+    const nodes = (_b = (_a = this.summarySlot) == null ? void 0 : _a.assignedNodes({ flatten: true })) != null ? _b : [];
+    let text = "";
+    [...nodes].forEach((node) => {
+      text += node.textContent;
+    });
+    return text;
+  }
   async handleOpenChange() {
     if (this.open) {
       const slShow = this.emit("dsa-show", { cancelable: true });
@@ -94,6 +108,7 @@ var DSAMenuAccordion = class extends ShoelaceElement {
       }
       await stopAnimations(this.body);
       this.body.hidden = false;
+      await this.updateComplete;
       const { keyframes, options } = getAnimation(this, "accordion.show", {
         dir: this.localize.dir()
       });
@@ -136,6 +151,10 @@ var DSAMenuAccordion = class extends ShoelaceElement {
       }
     }
   }
+  async handleExpandedChange() {
+    await this.updateComplete;
+    this.firstUpdated();
+  }
   /** Shows the accordion. */
   async show() {
     if (this.open) {
@@ -152,7 +171,17 @@ var DSAMenuAccordion = class extends ShoelaceElement {
     this.open = false;
     return await waitForEvent(this, "dsa-after-hide");
   }
+  focus(options) {
+    this.headerButton.focus(options);
+  }
+  blur() {
+    this.headerButton.blur();
+  }
+  click() {
+    this.headerButton.click();
+  }
   render() {
+    var _a;
     if (!this.summary && !this.hasSlotController.test("summary")) {
       a11yWarning(
         "<dsa-menu-accordion> requires a summary attribute or a summary slot for accessibility"
@@ -165,31 +194,47 @@ var DSAMenuAccordion = class extends ShoelaceElement {
       "menu-accordion": true,
       "menu-accordion--open": this.open,
       "menu-accordion--chevron": true,
-      "menu-accordion--level-2": this.level === 2
+      "menu-accordion--small": this.size === "small",
+      "menu-accordion--medium": this.size === "medium",
+      "menu-accordion--large": this.size === "large",
+      "menu-accordion--level-2": this.level === 2,
+      "menu-accordion--collapsed": this.collapsed
     })}
       >
         <div part="header" id="header" class="menu-accordion__header">
-          <span
-            role="button"
-            aria-expanded=${this.open ? "true" : "false"}
-            aria-controls="content"
-            @click=${this.handleSummaryClick}
-            @keydown=${this.handleSummaryKeyDown}
-            class="menu-accordion__header-button"
-            tabindex="0"
+          <dsa-tooltip
+            placement="right"
+            ?disabled=${!this.collapsed}
+            content=${(_a = this.getTextSummary()) != null ? _a : this.summary}
           >
-            <slot name="summary" class="menu-accordion__summary"
-              >${this.summary}</slot
+            <span
+              role="button"
+              aria-expanded=${this.open ? "true" : "false"}
+              aria-controls="content"
+              @click=${this.handleSummaryClick}
+              @keydown=${this.handleSummaryKeyDown}
+              class="menu-accordion__header-button"
+              tabindex="0"
             >
+              <slot
+                name="prefix"
+                part="prefix"
+                class="menu-accordion__prefix"
+              ></slot>
+              <slot name="summary" class="menu-accordion__summary"
+                >${this.summary}</slot
+              >
+              <slot name="badge" class="menu-accordion__badge"></slot>
 
-            <span part="summary-icon" class="menu-accordion__summary-icon">
-              <dsa-icon
-                class="menu-accordion__expand-icon"
-                name="expand_more"
-                library="system"
-              ></dsa-icon>
+              <span part="summary-icon" class="menu-accordion__summary-icon">
+                <dsa-icon
+                  class="menu-accordion__expand-icon"
+                  name="expand_more"
+                  library="system"
+                ></dsa-icon>
+              </span>
             </span>
-          </span>
+          </dsa-tooltip>
         </div>
 
         <div class="menu-accordion__body">
@@ -205,6 +250,9 @@ var DSAMenuAccordion = class extends ShoelaceElement {
   }
 };
 DSAMenuAccordion.styles = menu_accordion_styles_default;
+__decorateClass([
+  query("slot[name=summary]")
+], DSAMenuAccordion.prototype, "summarySlot", 2);
 __decorateClass([
   query(".menu-accordion")
 ], DSAMenuAccordion.prototype, "accordion", 2);
@@ -220,15 +268,24 @@ __decorateClass([
 __decorateClass([
   property()
 ], DSAMenuAccordion.prototype, "summary", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAMenuAccordion.prototype, "size", 2);
 __decorateClass([
   property({ type: Number })
 ], DSAMenuAccordion.prototype, "level", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAMenuAccordion.prototype, "collapsed", 2);
 __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], DSAMenuAccordion.prototype, "handleOpenChange", 1);
 __decorateClass([
   watch("level", { waitUntilFirstUpdate: true })
 ], DSAMenuAccordion.prototype, "handleLevelChange", 1);
+__decorateClass([
+  watch("expanded", { waitUntilFirstUpdate: true })
+], DSAMenuAccordion.prototype, "handleExpandedChange", 1);
 DSAMenuAccordion = __decorateClass([
   customElement("dsa-menu-accordion")
 ], DSAMenuAccordion);

package/dist/chunks/{chunk.WQ2FYG4C.js → chunk.BGECKQA7.js}

@@ -1,16 +1,16 @@
+import {
+  DSATableRow
+} from "./chunk.OALTSDOF.js";
 import {
   table_header_row_styles_default
 } from "./chunk.GI3JNOHH.js";
-import {
-  DSATableRow
-} from "./chunk.OXYSNELC.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
 
 // src/components/table-header-row/table-header-row.ts
 import { html } from "lit";
-import { customElement } from "lit/decorators.js";
+import { customElement, query } from "lit/decorators.js";
 var DSATableHeaderRow = class extends DSATableRow {
   handleCheckboxChange() {
     this.selected = this.checkbox.checked;
@@ -52,6 +52,9 @@ var DSATableHeaderRow = class extends DSATableRow {
   }
 };
 DSATableHeaderRow.styles = table_header_row_styles_default;
+__decorateClass([
+  query(".checkbox")
+], DSATableHeaderRow.prototype, "selectAllCheckbox", 2);
 DSATableHeaderRow = __decorateClass([
   customElement("dsa-table-header-row")
 ], DSATableHeaderRow);

package/dist/chunks/{chunk.F5ZP4HRG.js → chunk.BIOPGPFI.js}

@@ -1,9 +1,9 @@
-import {
-  getStepIcon
-} from "./chunk.CCTWXABH.js";
 import {
   step_styles_default
 } from "./chunk.Q35Y6PN4.js";
+import {
+  getStepIcon
+} from "./chunk.CCTWXABH.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -12,7 +12,7 @@ import {
 } from "./chunk.PWL7QCVG.js";
 import {
   LocalizeController
-} from "./chunk.SK3KWU2I.js";
+} from "./chunk.N3JDTZGM.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";

package/dist/chunks/{chunk.S6U34E3B.js → chunk.BKVGENKT.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.44PC44MV.js";
 import {
   FilterBase
-} from "./chunk.7APL3BFH.js";
+} from "./chunk.NJPFD5VP.js";
 import {
   formatDateRange,
   getDateFromISO,

package/dist/chunks/{chunk.5R6YK6UH.js → chunk.BN2N444O.js}

@@ -63,6 +63,7 @@ var badge_styles_default = css`
     font: var(--dsa-wc-badge-small-font);
     padding: var(--dsa-wc-badge-text-small-padding);
     min-width: var(--dsa-wc-badge-text-small-min-width);
+    line-height: 1;
   }
 
   .badge--medium {
@@ -72,6 +73,7 @@ var badge_styles_default = css`
     font: var(--dsa-wc-badge-medium-font);
     padding: var(--dsa-wc-badge-text-medium-padding);
     min-width: var(--dsa-wc-badge-text-medium-min-width);
+    line-height: 1;
   }
 
   /* Pulse modifier */

package/dist/chunks/{chunk.YJFPZYLA.js → chunk.BOVPSNQV.js}

@@ -6,16 +6,16 @@ import {
 } from "./chunk.ODOHKR6J.js";
 import {
   input_amount_styles_default
-} from "./chunk.XE4ZWLIV.js";
+} from "./chunk.A3C6TXYJ.js";
 import {
   InputBase
-} from "./chunk.C7BO57Z2.js";
+} from "./chunk.AZSX7X74.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.SK3KWU2I.js";
+} from "./chunk.N3JDTZGM.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";

package/dist/chunks/{chunk.Q5LSLQYU.js → chunk.CISPPQE6.js}

@@ -90,8 +90,11 @@ var card_content_styles_default = css`
     -webkit-overflow-scrolling: touch;
     font: var(--dsa-wc-card-body-font);
   }
+  .card-content--medium .card-content__body {
+  padding: var(--dsa-wc-card-content-medium-body-padding);
+  }
   .card-content--small .card-content__body {
-  padding: var(--dsa-wc-card-small-content-body-padding);
+  padding: var(--dsa-wc-card-content-small-body-padding);
   }
 
   .card-content__header {
@@ -111,6 +114,9 @@ var card_content_styles_default = css`
     display: flex;
     gap: var(--dsa-spacing-12);
   }
+  .card-content--medium .card-content__title_block, .card-content--small .card-content__title_block {
+    gap: var(--dsa-spacing-8);
+  }
 
   /* Title text block */
   .card-content__title-block-text {
@@ -128,6 +134,9 @@ var card_content_styles_default = css`
     font: var(--dsa-wc-card-content-large-title-font);
   }
 
+  .card-content--medium .card-content__title-block-text .card-content__title {
+    font: var(--dsa-wc-card-content-medium-title-font);
+  }
   .card-content--small .card-content__title-block-text .card-content__title {
     font: var(--dsa-wc-card-content-small-title-font);
   }
@@ -137,6 +146,9 @@ var card_content_styles_default = css`
     font: var(--dsa-wc-card-content-subtitle-font);
     color: var(--dsa-wc-card-content-subtitle-text-color);
   }
+  .card-content--small .card-content__title-block-text .card-content__subtitle {
+    font: var(--dsa-wc-card-content-small-subtitle-font);
+  }
 
   /* Title icon */
   .card-content__title-icon::slotted(*) {
@@ -144,6 +156,10 @@ var card_content_styles_default = css`
     width: var(--dsa-wc-card-content-title-icon-size);
     height: var(--dsa-wc-card-content-title-icon-size);
   }
+  .card-content--medium .card-content__title-icon::slotted(*) {
+    width: var(--dsa-wc-card-content-medium-title-icon-size);
+    height: var(--dsa-wc-card-content-medium-title-icon-size);
+  }
   .card-content--small .card-content__title-icon::slotted(*) {
     width: var(--dsa-wc-card-content-small-title-icon-size);
     height: var(--dsa-wc-card-content-small-title-icon-size);
@@ -158,6 +174,9 @@ var card_content_styles_default = css`
     color: var(--dsa-wc-card-content-content-color);
     font: var(--dsa-wc-card-content-content-font)
   }
+  .card-content--small .card-content__content {
+    font: var(--dsa-wc-card-content-small-content-font)
+  }
 
   /* Footer */
   .card-content__footer {
@@ -180,6 +199,10 @@ var card_content_styles_default = css`
     padding: var(--dsa-wc-card-content-link-icon-padding);
     color: var(--dsa-wc-card-content-chevron-color);
   }
+  .card-content--medium .card-content__link-icon {
+    width: var(--dsa-wc-card-content-link-medium-icon-size);
+    height: var(--dsa-wc-card-content-link-medium-icon-size);
+  }
   .card-content--small .card-content__link-icon {
     width: var(--dsa-wc-card-content-link-small-icon-size);
     height: var(--dsa-wc-card-content-link-small-icon-size);

package/dist/chunks/{chunk.WKVCQRI3.js → chunk.DAJGCL4G.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.6KQTEZWQ.js";
+} from "./chunk.EHTCYJUT.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";
@@ -128,7 +128,7 @@ var file_upload_styles_default = css`
     position: relative;
   }
 
-  /* Button (Copy of button primary styles) */
+  /* Button (Copy of button secondary styles) */
   .button {
     display: inline-flex;
     align-items: stretch;
@@ -148,9 +148,9 @@ var file_upload_styles_default = css`
       var(--dsa-wc-transition-x-fast) border,
       var(--dsa-wc-transition-x-fast) box-shadow;
     cursor: pointer;
-    background-color: var(--dsa-wc-button-primary-on-base-color);
-    border-color: var(--dsa-wc-button-primary-on-base-color);
-    color: var(--dsa-wc-button-primary-on-base-font-color);
+    background-color: var(--dsa-wc-button-secondary-on-base-color);
+    border-color: var(--dsa-wc-button-secondary-on-base-color);
+    color: var(--dsa-wc-button-secondary-on-base-font-color);
   }
 
   .button::-moz-focus-inner {
@@ -175,19 +175,19 @@ var file_upload_styles_default = css`
   }
 
   .button:hover:not(.button--disabled) {
-    background-color: var(--dsa-wc-button-primary-on-base-hover-color);
-    border-color: var(--dsa-wc-button-primary-on-base-hover-color);
-    color: var(--dsa-wc-button-primary-on-base-hover-font-color);
+    background-color: var(--dsa-wc-button-secondary-on-base-hover-color);
+    border-color: var(--dsa-wc-button-secondary-on-base-hover-color);
+    color: var(--dsa-wc-button-secondary-on-base-hover-font-color);
   }
   .button:active:not(.button--disabled) {
-    background-color: var(--dsa-wc-button-primary-on-base-active-color);
-    border-color: var(--dsa-wc-button-primary-on-base-active-color);
-    color: var(--dsa-wc-button-primary-on-base-active-font-color);
+    background-color: var(--dsa-wc-button-secondary-on-base-active-color);
+    border-color: var(--dsa-wc-button-secondary-on-base-active-color);
+    color: var(--dsa-wc-button-secondary-on-base-active-font-color);
   }
   .button.button--disabled {
-    background-color: var(--dsa-wc-button-primary-on-base-disabled-color);
-    border-color: var(--dsa-wc-button-primary-on-base-disabled-color);
-    color: var(--dsa-wc-button-primary-on-base-disabled-font-color);
+    background-color: var(--dsa-wc-button-secondary-on-base-disabled-color);
+    border-color: var(--dsa-wc-button-secondary-on-base-disabled-color);
+    color: var(--dsa-wc-button-secondary-on-base-disabled-font-color);
   }
 
   .button--small {

package/dist/chunks/{chunk.TRF5X2OX.js → chunk.DNAC7QQY.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.SK3KWU2I.js";
+} from "./chunk.N3JDTZGM.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.DRDLQHBU.js → chunk.DRR77YKL.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.6KQTEZWQ.js";
+} from "./chunk.EHTCYJUT.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";
@@ -133,8 +133,13 @@ var select_styles_default = css`
     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/dist/chunks/{chunk.HLW42LP2.js → chunk.EH4P2PAK.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.N54TKSON.js";
 import {
   LocalizeController
-} from "./chunk.SK3KWU2I.js";
+} from "./chunk.N3JDTZGM.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";

package/dist/chunks/{chunk.6KQTEZWQ.js → chunk.EHTCYJUT.js}

@@ -196,6 +196,17 @@ var form_control_styles_default = css`
     animation-duration: 1s;
   }
 
+  /* On Floating Menu */
+  .form-control--on-floating-menu .form-control__label {
+    color: var(--dsa-wc-input-on-floating-label-color);
+  }
+  .form-control--on-floating-menu.form-control--error .form-control__label {
+    color: var(--dsa-wc-input-on-floating-label-color-error);
+  }
+  .form-control--on-floating-menu .form-control__help-text {
+    color: var(--dsa-wc-input-on-floating-helper);
+  }
+
   /* Description text for screen readers */
   .form-control__description {
     display: none;

package/dist/chunks/{chunk.TZTE7NZH.js → chunk.EVZPPU4T.js}

@@ -1,9 +1,9 @@
 import {
   header_search_styles_default
-} from "./chunk.HRIAHWFV.js";
+} from "./chunk.S55U4A2J.js";
 import {
   LocalizeController
-} from "./chunk.SK3KWU2I.js";
+} from "./chunk.N3JDTZGM.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";
@@ -13,14 +13,13 @@ import {
 
 // src/components/header-search/header-search.ts
 import { html } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
+import { customElement, property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { live } from "lit/directives/live.js";
 var DSAHeaderSearch = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
     this.localize = new LocalizeController(this);
-    this.hasFocus = false;
     this.value = "";
     this.expanded = false;
     this.alwaysOpen = false;
@@ -37,42 +36,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");
@@ -80,6 +47,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) {
@@ -100,7 +76,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>
@@ -117,48 +92,12 @@ var DSAHeaderSearch = class extends ShoelaceElement {
       "search-bar--desktop": !this.mobile
     })}
       >
-        <div
-          class=${classMap({ input: true, "input--focused": this.hasFocus })}
-        >
-          <input
-            class=${classMap({
-      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=${live(this.value)}
-            @change=${this.handleChange}
-            @input=${this.handleInput}
-            @focus=${this.handleInputFocus}
-            @blur=${this.handleInputBlur}
-            @keydown=${this.handleKeyDown}
-          />
-          ${this.value.length > 0 ? html`
-                <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=${live(this.value)}
+          @dsa-change=${this.handleChange}
+          @dsa-input=${this.handleInput}
+        ></dsa-search>
 
         ${!this.alwaysOpen ? html`
               <dsa-button
@@ -176,23 +115,14 @@ var DSAHeaderSearch = class extends ShoelaceElement {
 };
 DSAHeaderSearch.styles = header_search_styles_default;
 __decorateClass([
-  query(".input__control")
-], DSAHeaderSearch.prototype, "input", 2);
+  query("dsa-search")
+], DSAHeaderSearch.prototype, "search", 2);
 __decorateClass([
   query("#expand-button")
 ], DSAHeaderSearch.prototype, "expandButton", 2);
-__decorateClass([
-  query("#submit-button")
-], DSAHeaderSearch.prototype, "submitButton", 2);
 __decorateClass([
   query("#cancel-button")
 ], DSAHeaderSearch.prototype, "cancelButton", 2);
-__decorateClass([
-  query("#clear-button")
-], DSAHeaderSearch.prototype, "clearButton", 2);
-__decorateClass([
-  state()
-], DSAHeaderSearch.prototype, "hasFocus", 2);
 __decorateClass([
   property()
 ], DSAHeaderSearch.prototype, "value", 2);