@ds-autonomie/web-components 2.0.1 → 2.1.0

package/dist/chunks/{chunk.TB3WT3D4.js → chunk.6QAB5TYJ.js}

@@ -298,6 +298,9 @@ var input_phone_styles_default = css`
       var(--dsa-wc-input-phone-height) - var(--dsa-wc-input-border-width) * 2
     );
   }
+  .form-control--medium .input-phone__flag {
+    width: 1.25rem;
+  }
 
   .form-control--large {
     --input-phone__select__min-width: 68px;
@@ -314,6 +317,9 @@ var input_phone_styles_default = css`
         2
     );
   }
+  .form-control--large .input-phone__flag {
+    width: 1.5rem;
+  }
 
   /*
    *  Clearable

package/dist/chunks/{chunk.IAL72I44.js → chunk.AF5WMYR2.js}

@@ -126,6 +126,9 @@ var filtersDrawerDecorator = (story) => {
     </dsa-drawer>
   `;
 };
+var fullScreenDecorator = (story) => {
+  return html` <div style="height: 100vh">${story()}</div>`;
+};
 
 export {
   updateCompleteArgTypes,
@@ -136,5 +139,6 @@ export {
   withOnLayerOnBaseDecorator,
   withOnFloatingMenuOnBaseDecorator,
   withBackgroundDecorator,
-  filtersDrawerDecorator
+  filtersDrawerDecorator,
+  fullScreenDecorator
 };

package/dist/chunks/{chunk.6RJLT24F.js → chunk.EGH3AVD7.js}

@@ -81,7 +81,7 @@ var DSATab = class extends ShoelaceElement {
                 part="close-button"
                 exportparts="base:close-button__base"
                 name="close"
-                label=${this.localize.term("close")}
+                label=${this.closeButtonLabel !== "" ? this.closeButtonLabel : this.localize.term("close")}
                 class="tab__close-button"
                 @click=${this.handleCloseClick}
                 library="system"
@@ -110,6 +110,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], DSATab.prototype, "closable", 2);
+__decorateClass([
+  property({ attribute: "close-button-label" })
+], DSATab.prototype, "closeButtonLabel", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSATab.prototype, "disabled", 2);

package/dist/chunks/{chunk.JDG6WH3B.js → chunk.EQZ4YFRU.js}

@@ -1,6 +1,6 @@
 import {
   header_search_styles_default
-} from "./chunk.2T66U3QC.js";
+} from "./chunk.HRIAHWFV.js";
 import {
   LocalizeController
 } from "./chunk.QLA2JXR7.js";
@@ -23,6 +23,8 @@ var DSAHeaderSearch = class extends ShoelaceElement {
     this.hasFocus = false;
     this.value = "";
     this.expanded = false;
+    this.alwaysOpen = false;
+    this.mobile = false;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -79,64 +81,96 @@ var DSAHeaderSearch = class extends ShoelaceElement {
     this.expandButton.focus();
   }
   render() {
-    if (!this.expanded) {
-      return html`
-        <button
-          aria-label=${this.localize.term("search")}
-          id="expand-button"
-          class="button button--navigation"
-          @click=${this.handleExpandClick}
-        >
-          <dsa-icon name="search" library="system"></dsa-icon>
-          <span class="expand-button__label"
-            >${this.localize.term("search")}</span
+    if (!this.expanded && !this.alwaysOpen) {
+      if (this.mobile) {
+        return html`
+          <dsa-icon-button
+            id="expand-button"
+            part="button button--navigation"
+            name="search"
+            library="system"
+            size="large"
+            label=${this.localize.term("search")}
+            @click=${this.handleExpandClick}
+          ></dsa-icon-button>
+        `;
+      } else {
+        return html`
+          <dsa-button
+            id="expand-button"
+            variant="navigation"
+            part="button button--navigation"
+            }
+            @click=${this.handleExpandClick}
           >
-        </button>
-      `;
+            <dsa-icon name="search" library="system"></dsa-icon>
+            <span>${this.localize.term("search")}</span>
+          </dsa-button>
+        `;
+      }
     }
     return html`
-      <div class=${classMap({ input: true, "input--focused": this.hasFocus })}>
-        <input
-          class="input__control"
-          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>
-
-      <button
-        class="icon-button icon-button--primary"
-        id="submit-button"
-        @click=${this.handleSubmitClick}
-        aria-label=${this.localize.term("search")}
+      <div
+        class=${classMap({
+      "search-bar": true,
+      "search-bar--mobile": this.mobile,
+      "search-bar--desktop": !this.mobile
+    })}
       >
-        <dsa-icon name="search" library="system"></dsa-icon>
-      </button>
+        <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>
 
-      <button
-        class="button button--tertiary"
-        id="cancel-button"
-        @click=${this.handleCancelClick}
-      >
-        ${this.localize.term("cancel")}
-      </button>
+        <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>
+
+        ${!this.alwaysOpen ? html`
+              <dsa-button
+                id="cancel-button"
+                variant="tertiary"
+                size=${this.mobile ? "small" : "medium"}
+                @click=${this.handleCancelClick}
+              >
+                ${this.localize.term("cancel")}
+              </dsa-button>
+            ` : ""}
+      </div>
     `;
   }
 };
@@ -165,6 +199,12 @@ __decorateClass([
 __decorateClass([
   property({ reflect: true, type: Boolean })
 ], DSAHeaderSearch.prototype, "expanded", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "always-open" })
+], DSAHeaderSearch.prototype, "alwaysOpen", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAHeaderSearch.prototype, "mobile", 2);
 DSAHeaderSearch = __decorateClass([
   customElement("dsa-header-search")
 ], DSAHeaderSearch);

package/dist/chunks/{chunk.CWVZX3HL.js → chunk.FKXOTDTY.js}

@@ -8,7 +8,7 @@ import {
   getIconLibrary,
   unwatchIcon,
   watchIcon
-} from "./chunk.3E6XVTWL.js";
+} from "./chunk.P45DWAWT.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.35M6DDPF.js → chunk.G422H4DZ.js}

@@ -54,7 +54,6 @@ var DSACheckbox = class extends ShoelaceElement {
     this.errorMessage = "";
     this.form = "";
     this.required = false;
-    this.ariaLabel = "";
   }
   /** Gets the validity state object */
   get validity() {
@@ -182,14 +181,16 @@ var DSACheckbox = class extends ShoelaceElement {
             id="input"
             class="checkbox__input"
             type="checkbox"
-            title=${ifDefinedAndNotEmpty(this.title)}
+            title=${this.title}
             name=${ifDefinedAndNotEmpty(this.name)}
             value=${ifDefined(this.value)}
             .indeterminate=${live(this.indeterminate)}
             .checked=${live(this.checked)}
             .disabled=${this.disabled}
             .required=${this.required}
-            aria-label=${ifDefinedAndNotEmpty(this.ariaLabel)}
+            aria-label=${ifDefinedAndNotEmpty(
+      this.accessibleName || this.ariaLabel
+    )}
             aria-checked=${this.checked ? "true" : "false"}
             aria-describedby=${ifDefined(this.error ? "error-text" : void 0)}
             aria-disabled=${ifDefined(
@@ -296,6 +297,9 @@ __decorateClass([
 __decorateClass([
   property({ attribute: "aria-label", reflect: true })
 ], DSACheckbox.prototype, "ariaLabel", 2);
+__decorateClass([
+  property({ attribute: "accessible-name", reflect: true })
+], DSACheckbox.prototype, "accessibleName", 2);
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], DSACheckbox.prototype, "handleDisabledChange", 1);

package/dist/chunks/chunk.HRIAHWFV.js

@@ -0,0 +1,89 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/header-search/header-search.styles.ts
+import { css } from "lit";
+var header_search_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: contents;
+  }
+
+  .search-bar {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex: 1;
+    width: 100%;
+  }
+  .search-bar--mobile {
+    gap: var(--dsa-spacing-8);
+  }
+  .search-bar--desktop {
+    gap: var(--dsa-spacing-16);
+  }
+
+  /* Input */
+  .input {
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    vertical-align: middle;
+    width: 100%;
+    min-width: 0;
+    font: var(--dsa-wc-input-text-field-font);
+    border-bottom: 1px solid var(--dsa-wc-header-search-input-color);
+  }
+
+  .input--focused {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+
+  .input__control {
+    display: inline-flex;
+    flex-direction: row;
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 100%;
+    border: none;
+    background: none;
+    box-shadow: none;
+    margin: 0;
+    cursor: inherit;
+    -webkit-appearance: none;
+    color: var(--dsa-wc-header-search-input-color);
+    padding: 8px 0 8px 8px;
+  }
+
+  .input__control--mobile {
+    height: 34px;
+    font: var(--dsa-wc-header-search-mobile-input-font);
+  }
+  .input__control--desktop {
+    height: 40px;
+    font: var(--dsa-wc-header-search-input-font);
+  }
+
+  .input__control::placeholder {
+    color: var(--dsa-wc-input-on-layer-text-field-placeholder-color);
+    opacity: 1;
+  }
+
+  .input__control::-webkit-search-decoration,
+  .input__control::-webkit-search-cancel-button,
+  .input__control::-webkit-search-results-button,
+  .input__control::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+  .input__control:focus {
+    outline: none;
+  }
+`;
+
+export {
+  header_search_styles_default
+};

package/dist/chunks/{chunk.4FP4K3F5.js → chunk.JDIBYGPL.js}

@@ -143,11 +143,20 @@ var option_styles_default = css`
 
   .option__prefix::slotted(*),
   .option--error .option__error-icon {
-    margin-inline-end: var(--dsa-wc-option-check-icon-horizontal-padding);
+    margin-inline-end: var(--dsa-wc-option-prefix-suffix-inline-padding);
+  }
+  .option--large .option__prefix::slotted(*),
+  .option--large .option--error .option__error-icon {
+    margin-inline-end: var(--dsa-wc-option-large-prefix-suffix-inline-padding);
   }
 
   .option__suffix::slotted(*) {
-    margin-inline-start: var(--dsa-wc-option-check-icon-horizontal-padding);
+    margin-inline-start: var(--dsa-wc-option-prefix-suffix-inline-padding);
+  }
+  .option--large .option__suffix::slotted(*) {
+    margin-inline-start: var(
+      --dsa-wc-option-large-prefix-suffix-inline-padding
+    );
   }
 
   @media (forced-colors: active) {

package/dist/chunks/{chunk.2DJFK3E6.js → chunk.JX7OISYA.js}

@@ -56,6 +56,7 @@ var DSARadioGroup = class extends ShoelaceElement {
     this.horizontal = false;
     this.error = false;
     this.errorMessage = "";
+    this.hideLabel = false;
   }
   /** Gets the validity state object */
   get validity() {
@@ -305,6 +306,11 @@ var DSARadioGroup = class extends ShoelaceElement {
     const hasHelpTextSlot = this.hasSlotController.test("help-text");
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    if (!hasLabel) {
+      console.warn(
+        "(a11y) <dsa-radio-group> requires a label attribute or a label slot for accessibility"
+      );
+    }
     return html`
       <fieldset
         part="form-control"
@@ -323,16 +329,21 @@ var DSARadioGroup = class extends ShoelaceElement {
         aria-describedby=${this.error ? "error-text help-text" : "help-text"}
         aria-invalid=${this.error}
       >
-        <span
-          part="form-control-label"
-          id="label"
-          class="form-control__label"
-          aria-hidden=${hasLabel ? "false" : "true"}
-          @click=${this.handleLabelClick}
-        >
-          ${this.required ? html`<span class="form-control__label-required">*</span>` : ""}
-          <slot name="label">${this.label}</slot>
-        </span>
+        ${this.hideLabel ? html`<dsa-visually-hidden id="label"
+              ><slot name="label">${this.label}</slot></dsa-visually-hidden
+            >` : html`
+              <span
+                part="form-control-label"
+                id="label"
+                class="form-control__label"
+                aria-hidden=${hasLabel ? "false" : "true"}
+                @click=${this.handleLabelClick}
+              >
+                ${this.required ? html`<span class="form-control__label-required">*</span>` : ""}
+                <slot name="label">${this.label}</slot>
+              </span>
+            `}
+
         <slot name="tooltip" class="form-control__tooltip"></slot>
 
         <div
@@ -455,6 +466,9 @@ __decorateClass([
     }
   })
 ], DSARadioGroup.prototype, "errorMessage", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-label" })
+], DSARadioGroup.prototype, "hideLabel", 2);
 __decorateClass([
   watch("value")
 ], DSARadioGroup.prototype, "handleValueChange", 1);

package/dist/chunks/{chunk.QEFQHCEK.js → chunk.KFRR2I2P.js}

@@ -149,9 +149,8 @@ var DSAAlert = class extends ShoelaceElement {
     });
   }
   render() {
-    var _a;
     return html`
-      <div aria-live="assertive" aria-atomic="true">
+      <div aria-live="polite" aria-atomic="true">
         <div
           part="base"
           class=${classMap({
@@ -173,7 +172,7 @@ var DSAAlert = class extends ShoelaceElement {
             library="system"
           ></dsa-icon>
           <div class="alert__text">
-            ${this.title !== "" || this.alertTitle !== "" ? html`
+            ${this.title || this.alertTitle ? html`
                   <div
                     part="header"
                     id="header"
@@ -181,7 +180,7 @@ var DSAAlert = class extends ShoelaceElement {
                     role=${ifDefined(this.headerLevel ? "heading" : void 0)}
                     class="alert__title"
                   >
-                    ${(_a = this.alertTitle) != null ? _a : this.title}
+                    ${this.alertTitle || this.title}
                   </div>
                 ` : ""}
             <slot part="message" class="alert__message"></slot>

package/dist/chunks/{chunk.5LBJAKDG.js → chunk.LB54GRRB.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk.JSNVYESF.js";
 import {
   header_styles_default
-} from "./chunk.N5DO55QO.js";
+} from "./chunk.2EDNCADP.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -39,6 +39,7 @@ var DSAHeader = class extends ShoelaceElement {
     this.localize = new LocalizeController(this);
     this.firstLogo = "public";
     this.logoHref = "/";
+    this.logoSize = "default";
     this.searchExpanded = false;
     this.mobile = false;
   }
@@ -68,6 +69,14 @@ var DSAHeader = class extends ShoelaceElement {
       }
     }
   }
+  handleMobile() {
+    if (this.hasSlotController.test("search")) {
+      const search = this.querySelector("dsa-header-search");
+      if (search !== null && this.mobile !== void 0) {
+        search.mobile = this.mobile;
+      }
+    }
+  }
   render() {
     const hasBrand = this.hasSlotController.test("second-logo") || this.hasSlotController.test("site-name");
     return html`
@@ -92,11 +101,22 @@ var DSAHeader = class extends ShoelaceElement {
       "header--search-expanded": this.hasSlotController.test("search") && this.searchExpanded
     })}
           >
-            <a href=${this.logoHref} part="first-logo" class="logo dsa-link">
-              ${this.firstLogo === "public" ? dsaLogoSvg(this.localize.term("dsaGoToHomepage")) : cnsaLogoSvg(this.localize.term("cnsaGoToHomepage"))}
-            </a>
+            <slot
+              name="first-logo"
+              part="first-logo"
+              class="logo ${this.logoSize === "large" && "logo-large"}"
+            >
+              <a href=${this.logoHref} class="logo-link">
+                ${this.firstLogo === "public" ? dsaLogoSvg(this.localize.term("dsaGoToHomepage")) : cnsaLogoSvg(this.localize.term("cnsaGoToHomepage"))}
+              </a>
+            </slot>
             <div part="brand">
-              ${this.hasSlotController.test("second-logo") ? html` <slot name="second-logo" class="logo"></slot> ` : ""}
+              ${this.hasSlotController.test("second-logo") ? html`
+                    <slot
+                      name="second-logo"
+                      class="logo ${this.logoSize === "large" && "logo-large"}"
+                    ></slot>
+                  ` : ""}
               ${this.hasSlotController.test("site-name") || this.hasSlotController.test("baseline") ? html`
                     <div class="site-info">
                       <slot name="site-name" part="site-name"></slot>
@@ -124,6 +144,9 @@ __decorateClass([
 __decorateClass([
   property({ reflect: true, attribute: "logo-href" })
 ], DSAHeader.prototype, "logoHref", 2);
+__decorateClass([
+  property({ attribute: "logo-size" })
+], DSAHeader.prototype, "logoSize", 2);
 __decorateClass([
   property({ reflect: true, type: Boolean, attribute: "search-expanded" })
 ], DSAHeader.prototype, "searchExpanded", 2);
@@ -133,6 +156,9 @@ __decorateClass([
 __decorateClass([
   watch("searchExpanded")
 ], DSAHeader.prototype, "handleSearchExpanded", 1);
+__decorateClass([
+  watch("mobile")
+], DSAHeader.prototype, "handleMobile", 1);
 DSAHeader = __decorateClass([
   customElement("dsa-header")
 ], DSAHeader);

package/dist/chunks/{chunk.CQG7MKTO.js → chunk.LDXGSIJP.js}

@@ -17,6 +17,7 @@ var DSACallout = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
     this.title = "";
+    this.calloutTitle = "";
   }
   render() {
     return html`
@@ -27,7 +28,7 @@ var DSACallout = class extends ShoelaceElement {
     })}
       >
         <div class="callout__text">
-          ${this.title !== "" && this.headerLevel ? html`
+          ${this.calloutTitle || this.title ? html`
                 <div
                   part="header"
                   id="header"
@@ -35,7 +36,7 @@ var DSACallout = class extends ShoelaceElement {
                   role=${ifDefined(this.headerLevel ? "heading" : void 0)}
                   class="callout__title"
                 >
-                  ${this.title}
+                  ${this.calloutTitle || this.title}
                 </div>
               ` : ""}
           <slot part="message" class="callout__message"></slot>
@@ -51,6 +52,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], DSACallout.prototype, "title", 2);
+__decorateClass([
+  property({ attribute: "callout-title" })
+], DSACallout.prototype, "calloutTitle", 2);
 __decorateClass([
   property({ attribute: "header-level", reflect: true })
 ], DSACallout.prototype, "headerLevel", 2);