@ds-autonomie/web-components 2.1.0 → 2.2.0

package/dist/chunks/{chunk.VOOE2BQV.js → chunk.6HR34L7E.js}

@@ -15,22 +15,6 @@ var checkbox_group_styles_default = css`
     display: block;
   }
 
-  .visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-
-  .checkbox-group__default-slot {
-    display: none;
-  }
-
   .checkbox-group__list-container {
     display: inline-block;
   }
@@ -38,18 +22,14 @@ var checkbox_group_styles_default = css`
     gap: var(--dsa-spacing-8);
   }
 
-  :not(.form-control--options-horizontal)
+  .form-control:not(.form-control--options-horizontal)
     .checkbox-group__list--checkbox-buttons {
     flex-wrap: wrap;
     min-width: 120px;
     max-width: 400px;
   }
 
-  .checkbox-group__listitem {
-    display: contents;
-  }
-
-  :not(form-control--options-horizontal) dsa-checkbox-button {
+  .form-control:not(.form-control--options-horizontal) dsa-checkbox-button {
     max-width: 400px;
   }
 `;

package/dist/chunks/{chunk.Y72CHU6D.js → chunk.6JHM36KH.js}

@@ -334,7 +334,11 @@ var DSAInternalDateField = class extends ShoelaceElement {
     this.formControlController.setValidity(this.disabled);
   }
   async handleValueChange() {
-    if (this.value !== "") {
+    if (this.value === "") {
+      this.selectedDay = "";
+      this.selectedMonth = "";
+      this.selectedYear = "";
+    } else {
       this.selectedDay = `${new Date(this.value).getDate()}`.padStart(2, "0");
       this.selectedMonth = `${new Date(this.value).getMonth() + 1}`.padStart(
         2,

package/dist/chunks/{chunk.LKCPAJMF.js → chunk.B6LMEZTV.js}

@@ -4,6 +4,9 @@ import {
 import {
   getStepIcon
 } from "./chunk.CCTWXABH.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -88,8 +91,8 @@ var DSAStep = class extends ShoelaceElement {
     const isButton = this.clickable && !this.href;
     const tag = this.getTag();
     if (this.clickable && !hasTitle) {
-      console.warn(
-        "(DSA) When clickable, the `dsa-step` element must have either a `step-title` attribute or an elemennt in its `title` slot"
+      a11yWarning(
+        "When clickable, the `dsa-step` element must have either a `step-title` attribute or an elemennt in its `title` slot"
       );
     }
     return html`

package/dist/chunks/{chunk.OHPSPLZO.js → chunk.DDDHV2NU.js}

@@ -1,6 +1,9 @@
 import {
   DSASelect
-} from "./chunk.6GN2WDDT.js";
+} from "./chunk.Y52TCF24.js";
+import {
+  getPhoneConfig
+} from "./chunk.65HTBW2L.js";
 import {
   input_phone_styles_default
 } from "./chunk.6QAB5TYJ.js";
@@ -13,12 +16,9 @@ import {
   rawValueToMaskedValue,
   stripSpecialChars
 } from "./chunk.7OLEA3GQ.js";
-import {
-  getPhoneConfig
-} from "./chunk.65HTBW2L.js";
 import {
   FormControlLayout
-} from "./chunk.T4BUHP4L.js";
+} from "./chunk.I5HR7JYK.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";

package/dist/chunks/{chunk.P4HRQ2D7.js → chunk.DHDRABMZ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.IPUOJRFA.js";
 import {
   FormControlLayout
-} from "./chunk.T4BUHP4L.js";
+} from "./chunk.I5HR7JYK.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";

package/dist/chunks/chunk.F7NUIVDV.js

@@ -0,0 +1,10 @@
+// src/components/input-otp/input-otp.utils.ts
+var REGEXP_ONLY_DIGITS = "^\\d*$";
+var REGEXP_ONLY_LETTERS = "^[a-zA-Z]*$";
+var REGEXP_ONLY_DIGITS_AND_LETTERS = "^[a-zA-Z0-9]*$";
+
+export {
+  REGEXP_ONLY_DIGITS,
+  REGEXP_ONLY_LETTERS,
+  REGEXP_ONLY_DIGITS_AND_LETTERS
+};

package/dist/chunks/{chunk.D3SHMAJT.js → chunk.H3FSR35C.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk.VNFFOE7Z.js";
 import {
   FormControlLayout
-} from "./chunk.T4BUHP4L.js";
+} from "./chunk.I5HR7JYK.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";

package/dist/chunks/{chunk.T4BUHP4L.js → chunk.I5HR7JYK.js}

@@ -1,3 +1,6 @@
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   renderFormElementErrors
 } from "./chunk.IZBHR7GP.js";
@@ -15,6 +18,7 @@ import {
 import { html } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 var FormControlLayout = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
@@ -51,6 +55,11 @@ var FormControlLayout = class extends ShoelaceElement {
     const hasHelpTextSlot = this.hasSlotController.test("help-text");
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    if (!hasLabel) {
+      a11yWarning(
+        "Form controls require a label attribute or a label slot for accessibility"
+      );
+    }
     return html`
         <div
           part="form-control"
@@ -69,7 +78,7 @@ var FormControlLayout = class extends ShoelaceElement {
             part="form-control-label"
             class='form-control__label'
             for="input"
-            aria-hidden=${hasLabel ? "false" : "true"}
+            aria-hidden=${ifDefined(hasLabel ? void 0 : "true")}
           >
             ${this.required ? html`<span class="form-control__label-required">*</span>` : ""}
             <slot name="label">${this.label}</slot>

package/dist/chunks/{chunk.NCECJWN7.js → chunk.KN6RQWYN.js}

@@ -1,6 +1,6 @@
 import {
   DSARadioGroup
-} from "./chunk.JX7OISYA.js";
+} from "./chunk.KUYI27GJ.js";
 import {
   FormToggleButton
 } from "./chunk.GGXJ2MP3.js";

package/dist/chunks/{chunk.JX7OISYA.js → chunk.KUYI27GJ.js}

@@ -1,9 +1,12 @@
+import {
+  radio_group_styles_default
+} from "./chunk.3XIJ443Y.js";
 import {
   wrapIndex
 } from "./chunk.HV63L5BF.js";
 import {
-  radio_group_styles_default
-} from "./chunk.3XIJ443Y.js";
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   renderFormElementErrors
 } from "./chunk.IZBHR7GP.js";
@@ -19,17 +22,170 @@ import {
 import {
   watch
 } from "./chunk.NOMN6DGD.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
 
 // src/components/radio-group/radio-group.ts
+import { html as html2 } from "lit";
+import { customElement as customElement2, property as property2, query as query2, state as state2 } from "lit/decorators.js";
+import { classMap as classMap2 } from "lit/directives/class-map.js";
+
+// src/internal/components/button-group/button-group.ts
 import { html } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+
+// src/internal/components/button-group/button-group.styles.ts
+import { css } from "lit";
+var button_group_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: inline-block;
+  }
+
+  .button-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--dsa-spacing-8);
+  }
+
+  .button-group--squeezed {
+    gap: 0;
+  }
+
+  .button-group--vertical {
+    flex-direction: column;
+    min-width: 120px;
+    max-width: 400px;
+  }
+
+  .button-group--horizontal {
+    flex-direction: row;
+  }
+`;
+
+// src/internal/components/button-group/button-group.ts
+var DSAInternalButtonGroup = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.disableRole = false;
+    this.label = "";
+    this.squeezed = false;
+    this.horizontal = false;
+  }
+  handleFocus(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.add("dsa-button-group__button--focus");
+  }
+  handleBlur(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.remove("dsa-button-group__button--focus");
+  }
+  handleMouseOver(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.add("dsa-button-group__button--hover");
+  }
+  handleMouseOut(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.remove("dsa-button-group__button--hover");
+  }
+  handleSlotChange() {
+    const slottedElements = [
+      ...this.defaultSlot.assignedElements({ flatten: true })
+    ];
+    slottedElements.forEach((el) => {
+      const index = slottedElements.indexOf(el);
+      const button = findButton(el);
+      if (button !== null) {
+        button.classList.add("dsa-button-group__button");
+        if (this.squeezed) {
+          button.classList.toggle(
+            "dsa-button-group__button--first",
+            index === 0
+          );
+          button.classList.toggle(
+            "dsa-button-group__button--inner",
+            index > 0 && index < slottedElements.length - 1
+          );
+          button.classList.toggle(
+            "dsa-button-group__button--last",
+            index === slottedElements.length - 1
+          );
+        }
+        button.classList.toggle(
+          "dsa-button-group__button--radio",
+          button.tagName.toLowerCase() === "dsa-radio-button"
+        );
+        button.classList.toggle(
+          "dsa-button-group__button--checkbox",
+          button.tagName.toLowerCase() === "dsa-checkbox-button"
+        );
+        button.classList.toggle(
+          "dsa-button-group__button--vertical",
+          !this.horizontal
+        );
+      }
+    });
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "button-group": true,
+      "button-group--squeezed": this.squeezed,
+      "button-group--vertical": !this.horizontal,
+      "button-group--horizontal": this.horizontal
+    })}
+        role="${this.disableRole ? "presentation" : "group"}"
+        aria-label=${ifDefinedAndNotEmpty(this.label)}
+        @focusout=${this.handleBlur}
+        @focusin=${this.handleFocus}
+        @mouseover=${this.handleMouseOver}
+        @mouseout=${this.handleMouseOut}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+DSAInternalButtonGroup.styles = button_group_styles_default;
+__decorateClass([
+  query("slot")
+], DSAInternalButtonGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  state()
+], DSAInternalButtonGroup.prototype, "disableRole", 2);
+__decorateClass([
+  property()
+], DSAInternalButtonGroup.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAInternalButtonGroup.prototype, "squeezed", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAInternalButtonGroup.prototype, "horizontal", 2);
+DSAInternalButtonGroup = __decorateClass([
+  customElement("dsa-internal-button-group")
+], DSAInternalButtonGroup);
+function findButton(el) {
+  var _a;
+  const selector = "dsa-button, dsa-radio-button, dsa-checkbox-button, dsa-pagination-button";
+  return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
+}
+
+// src/components/radio-group/radio-group.ts
 var DSARadioGroup = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
@@ -307,14 +463,14 @@ var DSARadioGroup = class extends ShoelaceElement {
     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"
+      a11yWarning(
+        "<dsa-radio-group> requires a label attribute or a label slot for accessibility"
       );
     }
-    return html`
+    return html2`
       <fieldset
         part="form-control"
-        class=${classMap({
+        class=${classMap2({
       "form-control": true,
       "form-control--error": this.error,
       "form-control--medium": true,
@@ -329,9 +485,9 @@ var DSARadioGroup = class extends ShoelaceElement {
         aria-describedby=${this.error ? "error-text help-text" : "help-text"}
         aria-invalid=${this.error}
       >
-        ${this.hideLabel ? html`<dsa-visually-hidden id="label"
+        ${this.hideLabel ? html2`<dsa-visually-hidden id="label"
               ><slot name="label">${this.label}</slot></dsa-visually-hidden
-            >` : html`
+            >` : html2`
               <span
                 part="form-control-label"
                 id="label"
@@ -339,7 +495,7 @@ var DSARadioGroup = class extends ShoelaceElement {
                 aria-hidden=${hasLabel ? "false" : "true"}
                 @click=${this.handleLabelClick}
               >
-                ${this.required ? html`<span class="form-control__label-required">*</span>` : ""}
+                ${this.required ? html2`<span class="form-control__label-required">*</span>` : ""}
                 <slot name="label">${this.label}</slot>
               </span>
             `}
@@ -363,7 +519,7 @@ var DSARadioGroup = class extends ShoelaceElement {
             </label>
           </div>
 
-          ${this.hasRadioButtons ? html`
+          ${this.hasRadioButtons ? html2`
                 <dsa-internal-button-group
                   part="button-group"
                   exportparts="base:button-group__base"
@@ -375,7 +531,7 @@ var DSARadioGroup = class extends ShoelaceElement {
                 >
                   <slot></slot>
                 </dsa-internal-button-group>
-              ` : html`
+              ` : html2`
                 <slot
                   @click=${this.handleRadioClick}
                   @keydown=${this.handleKeyDown}
@@ -404,55 +560,55 @@ var DSARadioGroup = class extends ShoelaceElement {
 };
 DSARadioGroup.styles = radio_group_styles_default;
 __decorateClass([
-  query("slot:not([name])")
+  query2("slot:not([name])")
 ], DSARadioGroup.prototype, "defaultSlot", 2);
 __decorateClass([
-  query(".radio-group__validation-input")
+  query2(".radio-group__validation-input")
 ], DSARadioGroup.prototype, "validationInput", 2);
 __decorateClass([
-  state()
+  state2()
 ], DSARadioGroup.prototype, "hasRadioButtons", 2);
 __decorateClass([
-  state()
+  state2()
 ], DSARadioGroup.prototype, "readonlyRadioButtonValue", 2);
 __decorateClass([
-  state()
+  state2()
 ], DSARadioGroup.prototype, "defaultValue", 2);
 __decorateClass([
-  property()
+  property2()
 ], DSARadioGroup.prototype, "label", 2);
 __decorateClass([
-  property({ attribute: "help-text" })
+  property2({ attribute: "help-text" })
 ], DSARadioGroup.prototype, "helpText", 2);
 __decorateClass([
-  property()
+  property2()
 ], DSARadioGroup.prototype, "name", 2);
 __decorateClass([
-  property({ reflect: true })
+  property2({ reflect: true })
 ], DSARadioGroup.prototype, "value", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
+  property2({ type: Boolean, reflect: true })
 ], DSARadioGroup.prototype, "deselectable", 2);
 __decorateClass([
-  property({ reflect: true })
+  property2({ reflect: true })
 ], DSARadioGroup.prototype, "form", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
+  property2({ type: Boolean, reflect: true })
 ], DSARadioGroup.prototype, "required", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
+  property2({ type: Boolean, reflect: true })
 ], DSARadioGroup.prototype, "disabled", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
+  property2({ type: Boolean, reflect: true })
 ], DSARadioGroup.prototype, "readonly", 2);
 __decorateClass([
-  property({ type: Boolean })
+  property2({ type: Boolean })
 ], DSARadioGroup.prototype, "horizontal", 2);
 __decorateClass([
-  property({ type: Boolean })
+  property2({ type: Boolean })
 ], DSARadioGroup.prototype, "error", 2);
 __decorateClass([
-  property({
+  property2({
     attribute: "error-message",
     converter: {
       fromAttribute: (value) => value ? value.split("|") : "",
@@ -467,7 +623,7 @@ __decorateClass([
   })
 ], DSARadioGroup.prototype, "errorMessage", 2);
 __decorateClass([
-  property({ type: Boolean, attribute: "hide-label" })
+  property2({ type: Boolean, attribute: "hide-label" })
 ], DSARadioGroup.prototype, "hideLabel", 2);
 __decorateClass([
   watch("value")
@@ -482,7 +638,7 @@ __decorateClass([
   watch("readonly")
 ], DSARadioGroup.prototype, "handleReadonlyChange", 1);
 DSARadioGroup = __decorateClass([
-  customElement("dsa-radio-group")
+  customElement2("dsa-radio-group")
 ], DSARadioGroup);
 
 export {

package/dist/chunks/{chunk.ZGQUBAEK.js → chunk.L3LZ4MKX.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.O4MZVDWB.js";
 import {
   FormControlLayout
-} from "./chunk.T4BUHP4L.js";
+} from "./chunk.I5HR7JYK.js";
 import {
   combobox_styles_default
 } from "./chunk.FQMS24GI.js";

package/dist/chunks/{chunk.BXOGG3JO.js → chunk.LTCZARVI.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.RWGL6D5U.js";
 import {
   FormControlLayout
-} from "./chunk.T4BUHP4L.js";
+} from "./chunk.I5HR7JYK.js";
 import {
   getDateFromISO,
   getISOFormattedDate

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

@@ -20,7 +20,7 @@ var errorArgTypes = {
 };
 var errorMessageArgTypes = {
   name: "error-message",
-  description: 'An error message that is shown when `error` is set to true. If there are several messages, must be a string of messages separated by a pipe, e.g. "Error 1|Error 2|Error 3"',
+  description: 'The error message or messages that are shown when \u201Cerror\u201D is set to \u201Ctrue\u201D. To display several messages, they must be separated by a pipe character, e.g. "Error 1|Error 2|Error 3\u201D',
   table: {
     defaultValue: { summary: "''" },
     type: {

package/dist/chunks/chunk.PWL7QCVG.js

@@ -0,0 +1,9 @@
+// src/internal/a11y-warning.ts
+var A11Y_WARNING_START = "(DSA a11y) ";
+function a11yWarning(message) {
+  console.warn(`${A11Y_WARNING_START}${message}`);
+}
+
+export {
+  a11yWarning
+};