@ds-autonomie/web-components 1.0.1 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @ds-autonomie/web-components
 
+## 1.2.0
+
+### Minor Changes
+
+- b63aa59: `stepper`, `step`: implémentation des composants stepper et step
+
+### Patch Changes
+
+- Updated dependencies [b63aa59]
+  - @ds-autonomie/assets@1.1.1
+
+## 1.1.0
+
+### Minor Changes
+
+- 8ee2a50: `combobox`: implementation du composant combobox avec selection simple
+- 8ee2a50: `combobox`: ajout de la selection multiple pour le composant combobox
+- 8ee2a50: `combobox`: ajout du support clavier pour le composant combobox
+- 1454ca4: `tag`: ajustement accessibilité
+- 8e1f790: `option`: Mise à jour graphique du composant option
+
+### Patch Changes
+
+- e8223e1: `icon-button`: documentation
+- d0e871e: `checkbox-group`,`textarea`,`input`,`input-mask`,`input-phone`,`select`: documentation du slot tooltip
+- 46e7f52: `tests`: ajout d'un alias pour les fichiers statique dans les tests
+- 98c11b1: `spinner`: documentation
+- 9f8f02c: `input`: le type date utilise maintenant l'icône natif
+- 060a3a5: `input-phone`: mise en conformité d'accessibilité
+- a5079b4: `divider`: documentation
+- e0b265a: `input-mask`: retour d'accessibilité
+- ff81d71: `avatar`: retour d'accessibilité pour le composant avatar
+- 6c2b585: `tokens`: ajustement des tokens interne pour l'état read-only
+- f7926ce: `avatar`,`avatar-group`: documentation
+- 0ec1b1b: `button`, `input`, `checkbox`, `progress-bar`, `textarea`: correction des attributs laissés à vide
+- 9d06b7f: `input`: les icônes héritent la taille
+- 88c6359: `skeleton`: documentation
+- 99239a0: `progress-ring`: documentation
+- 6c2b585: `select`: implémentation de l'état read-only
+- ce2e57f: `card`: ajustement du header dans la story du composant card
+- 9d9d8e6: `progress-ring`,`progress-bar`: mise en conformité d'accessibilité
+- 5c676ec: `select`: retour d'accessibilité
+- 061867c: `progress-bar`: documentation
+- ff6b2e1: `radio-group`: mise en conformité d'accessibilité
+- a5c8c68: `tab`,`tab-group`,`tab-panel`: documentation
+- f1d87fd: `tree`,`tree-item`: documentation
+- 9e87e96: `menu`,`menu-label`,`menu-item`: documentation
+- 5cbf567: `badge`: documentation
+
 ## 1.0.1
 
 ### Patch Changes

package/dist/chunks/{chunk.HH63FIEF.js → chunk.2DGAEK66.js}

@@ -55,7 +55,7 @@ var option_styles_default = css`
     font-size: var(--dsa-wc-option-large-icon-size);
   }
 
-  .option--hover:not(.option--current):not(.option--disabled) {
+  .option--hover:not(.option--selected):not(.option--disabled) {
     background-color: var(--dsa-wc-option-hover-color);
   }
 
@@ -64,8 +64,12 @@ var option_styles_default = css`
   }
   .option--current,
   .option--current.option--disabled {
-    background-color: var(--dsa-wc-option-active-background-color);
-    color: var(--dsa-wc-option-active-color);
+    background-color: var(--dsa-wc-option-hover-color);
+  }
+
+  .option--selected.option--current,
+  .option--selected.option--hover {
+    background-color: var(--dsa-wc-option-active-hover-background-color);
     opacity: 1;
   }
 
@@ -93,6 +97,11 @@ var option_styles_default = css`
     visibility: visible;
   }
 
+  .option--selected {
+    background-color: var(--dsa-wc-option-active-background-color);
+    color: var(--dsa-wc-option-active-color);
+  }
+
   .option__prefix,
   .option__suffix {
     flex: 0 0 auto;

package/dist/chunks/{chunk.O73OYTYJ.js → chunk.2HV2U4RQ.js}

@@ -121,8 +121,8 @@ var input_mask_styles_default = css`
     cursor: not-allowed;
   }
   .input-mask--on-base.input-mask--readonly {
-    background-color: var(--dsa-wc-input-on-base-locked-background-color);
-    border-color: var(--dsa-wc-input-on-base-locked-border-color);
+    background-color: var(--dsa-wc-input-on-base-read-only-background-color);
+    border-color: var(--dsa-wc-input-on-base-read-only-border-color);
   }
 
   .input-mask--on-base .input-mask__placeholder {
@@ -266,7 +266,6 @@ var input_mask_styles_default = css`
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    font-size: 1.25rem;
     color: var(--dsa-color-input-icon-on-base-enabled);
     border: none;
     background: none;
@@ -291,7 +290,6 @@ var input_mask_styles_default = css`
   .input-mask__prefix {
     color: var(--dsa-wc-input-icon-color);
     cursor: pointer;
-    font-size: 1.25rem;
   }
 
   .input-mask--empty .input-mask__clear {

package/dist/chunks/{chunk.EHVJT7BH.js → chunk.2R6P5TGQ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.TJOP7HQP.js";
 import {
   watch
-} from "./chunk.D7CATJYB.js";
+} from "./chunk.6IH66JBY.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/chunk.2WSMYCPC.js

@@ -0,0 +1,24 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/stepper/stepper.styles.ts
+import { css } from "lit";
+var stepper_styles_default = css`
+  ${component_styles_default}
+
+  .stepper {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    list-style-type: none;
+  }
+
+  .slot_steps {
+    display: none;
+  }
+`;
+
+export {
+  stepper_styles_default
+};

package/dist/chunks/{chunk.LT7JMZ3T.js → chunk.3HI3T5R2.js}

@@ -14,10 +14,10 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.5XL2LZLC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   watch
-} from "./chunk.D7CATJYB.js";
+} from "./chunk.6IH66JBY.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/chunk.3I2KXA35.js

@@ -0,0 +1,126 @@
+import {
+  step_styles_default
+} from "./chunk.YRBTSDUN.js";
+import {
+  getStepIcon
+} from "./chunk.CCTWXABH.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  LocalizeController
+} from "./chunk.NBPVVWJU.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/step/step.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DSAStep = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "title",
+      "content"
+    );
+    this.localize = new LocalizeController(this);
+    this.status = "default";
+    this.title = "";
+    this.content = "";
+  }
+  getStepLabel() {
+    switch (this.status) {
+      case "default":
+        return this.localize.term("step");
+      case "complete":
+        return this.localize.term("stepCompleted");
+      case "in-progress":
+        return this.localize.term("stepInProgress");
+      case "active":
+        return this.localize.term("stepActive");
+      case "error":
+        return this.localize.term("stepError");
+    }
+    return this.localize.term("step");
+  }
+  render() {
+    const hasTitleSlot = this.hasSlotController.test("title");
+    const hasContentSlot = this.hasSlotController.test("content");
+    const hasTitle = this.title ? true : !!hasTitleSlot;
+    const hasContent = this.content ? true : !!hasContentSlot;
+    const stepIconName = this.status !== "in-progress" && this.status !== "active" ? getStepIcon(this.status) : void 0;
+    const stepLabel = this.getStepLabel();
+    return html`
+      <div
+        role="listitem"
+        part="step"
+        class=${classMap({
+      "step-container": true,
+      "step-container--has-title": hasTitle,
+      "step-container--has-content": hasContent
+    })}
+      >
+        <div
+          class=${classMap({
+      step: true,
+      "step--default": this.status === "default",
+      "step--complete": this.status === "complete",
+      "step--in-progress": this.status === "in-progress" || this.status === "active",
+      "step--error": this.status === "error"
+    })}
+        >
+          ${this.status === "in-progress" || this.status === "active" ? html`<span class="step-icon--in-progress"
+                ><dsa-visually-hidden>${stepLabel}</dsa-visually-hidden></span
+              >` : html`<dsa-icon
+                class="step-icon"
+                name="${stepIconName}"
+                label=${stepLabel}
+              ></dsa-icon>`}
+        </div>
+
+        ${this.index !== void 0 ? html`
+              <p class="step-index">
+                ${this.localize.term("step")} ${this.index + 1}
+              </p>
+            ` : html``}
+
+        <div class="step-title-container">
+          <slot
+            name="title"
+            class="step-title"
+            aria-hidden=${hasTitle ? "false" : "true"}
+            >${this.title}</slot
+          >
+          <slot name="tooltip" class="step-tooltip"></slot>
+        </div>
+        <slot name="content" class="step-content">${this.content}</slot>
+      </div>
+    `;
+  }
+};
+DSAStep.styles = step_styles_default;
+__decorateClass([
+  property()
+], DSAStep.prototype, "status", 2);
+__decorateClass([
+  property()
+], DSAStep.prototype, "title", 2);
+__decorateClass([
+  property()
+], DSAStep.prototype, "content", 2);
+__decorateClass([
+  property()
+], DSAStep.prototype, "index", 2);
+DSAStep = __decorateClass([
+  customElement("dsa-step")
+], DSAStep);
+
+export {
+  DSAStep
+};

package/dist/chunks/{chunk.7NWAYDYI.js → chunk.4DWONP4W.js}

@@ -1,12 +1,12 @@
 import {
   option_styles_default
-} from "./chunk.HH63FIEF.js";
+} from "./chunk.2DGAEK66.js";
 import {
   LocalizeController
-} from "./chunk.5XL2LZLC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   watch
-} from "./chunk.D7CATJYB.js";
+} from "./chunk.6IH66JBY.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.BLPP3Q5H.js → chunk.5324JGM4.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   watch
-} from "./chunk.D7CATJYB.js";
+} from "./chunk.6IH66JBY.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
@@ -340,14 +340,21 @@ var DSARadioGroup = class extends ShoelaceElement {
   }
   updateCheckedRadio() {
     const radios = this.getAllRadios();
-    radios.forEach((radio) => {
+    radios.forEach((radio, index) => {
       radio.checked = radio.value === this.value;
+      const shouldFocus = this.value === "" && index === 0;
       if (this.hasRadioButtons) {
         const radioButton = radio;
-        radioButton.button.tabIndex = radio.checked ? 0 : -1;
+        radioButton.button.tabIndex = shouldFocus || radio.checked ? 0 : -1;
         radio.disabled = this.readonlyRadioButtonValue.get(this.value) || radioButton.readonly;
+        if (shouldFocus) {
+          radioButton.button.focus();
+        }
       } else {
-        radio.tabIndex = radio.checked ? 0 : -1;
+        radio.tabIndex = shouldFocus || radio.checked ? 0 : -1;
+        if (shouldFocus) {
+          radio.focus();
+        }
       }
     });
     this.formControlController.setValidity(this.validity.valid);

package/dist/chunks/{chunk.BEB47LM2.js → chunk.5BTJP6HC.js}

@@ -15,10 +15,10 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.5XL2LZLC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   watch
-} from "./chunk.D7CATJYB.js";
+} from "./chunk.6IH66JBY.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.D7CATJYB.js → chunk.6IH66JBY.js}

@@ -10,7 +10,7 @@ function watch(propertyName, options) {
   return (proto, decoratedFnName) => {
     const { update } = proto;
     const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
-    proto.update = function(changedProps) {
+    proto.update = function updateFn(changedProps) {
       watchedProperties.forEach((property) => {
         const key = property;
         if (changedProps.has(key)) {