@ds-autonomie/web-components 1.0.1 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @ds-autonomie/web-components
 
+## 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.K6WCEYZI.js → chunk.2CCKS3CP.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.S4ATPBQN.js";
 import {
   LocalizeController
-} from "./chunk.5XL2LZLC.js";
+} from "./chunk.IQ7SDYSC.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

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.KOH5V4C6.js → chunk.4MC32HP7.js}

@@ -1,6 +1,12 @@
 import {
   DSASelect
-} from "./chunk.PWWER3ZK.js";
+} from "./chunk.GJCVGGCP.js";
+import {
+  frenchFlag,
+  frenchNumberPrefix,
+  phoneInputValidityRegex,
+  phonePrefixOptions
+} from "./chunk.6ZQ4OQ2C.js";
 import {
   getMaskedValue,
   stripSpecialChars
@@ -10,25 +16,22 @@ import {
 } from "./chunk.DRGGQ4WL.js";
 import {
   input_phone_styles_default
-} from "./chunk.HC5BO5YV.js";
-import {
-  frenchFlag,
-  frenchNumberPrefix,
-  phoneInputValidityRegex,
-  phonePrefixOptions
-} from "./chunk.6ZQ4OQ2C.js";
+} from "./chunk.NHYFVEGM.js";
 import {
   defaultValue
-} from "./chunk.GI7VDIWX.js";
+} from "./chunk.CMJ2SRTL.js";
 import {
   FormControlController
 } from "./chunk.KIFBWPW5.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
 import {
   watch
-} from "./chunk.D7CATJYB.js";
+} from "./chunk.6IH66JBY.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
@@ -367,7 +370,7 @@ var DSAInputPhone = class extends ShoelaceElement {
       "input-phone--empty": this.phoneNumber === ""
     })}
       >
-      <slot name="prefix" part="prefix" class="input-phone__prefix"></slot>
+     
 
 
 
@@ -390,8 +393,8 @@ var DSAInputPhone = class extends ShoelaceElement {
       "input-phone__control-with-prefix": hasPrefixIcon
     })}
           type="text"
-          title=${this.title}
-          name=${ifDefined(this.name)}
+          title=${ifDefinedAndNotEmpty(this.title)}
+          name=${ifDefinedAndNotEmpty(this.name)}
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
           ?required=${this.required}
@@ -407,8 +410,8 @@ var DSAInputPhone = class extends ShoelaceElement {
           spellcheck=${this.spellcheck}
           enterkeyhint=${ifDefined(this.enterkeyhint)}
           inputmode='tel'
-          aria-label=${hasLabel ? this.label : this.title}
-          aria-describedby=${this.error ? "error-text help-text" : "help-text"}
+          aria-label=${ifDefinedAndNotEmpty(hasLabel ? this.label : this.title)}
+          aria-describedby=${this.error ? "input-phone error-text help-text" : "input-phone help-text"}
           @change=${this.handleChange}
           @input=${this.handleInput}
           @keydown=${this.handleKeyDown}
@@ -422,10 +425,11 @@ var DSAInputPhone = class extends ShoelaceElement {
                 <dsa-icon-button
                   part="clear-button"
                   class="input-phone__clear"
-                  aria-label=${this.localize.term("clearEntry")}
+                  label=${this.localize.term("clearEntry")}
                   @click=${this.handleClearIconClick}
                   name="close"
-                ></dsa-icon-button>
+                >
+                </dsa-icon-button>
               ` : ""}
 
 

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.WIEJJS3W.js → chunk.6BJBVSW4.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.5XL2LZLC.js";
+} from "./chunk.IQ7SDYSC.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)) {

package/dist/chunks/{chunk.YS7MY5CH.js → chunk.7EWUWW3E.js}

@@ -1,25 +1,28 @@
-import {
-  input_styles_default
-} from "./chunk.WNHQYL5W.js";
 import {
   getOverridenIconDetails,
   isPrefixIconOverriden
 } from "./chunk.KBT2EKLF.js";
+import {
+  input_styles_default
+} from "./chunk.MTZZV3NB.js";
 import {
   defaultValue
-} from "./chunk.GI7VDIWX.js";
+} from "./chunk.CMJ2SRTL.js";
 import {
   FormControlController
 } from "./chunk.KIFBWPW5.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.5XL2LZLC.js";
+} from "./chunk.IQ7SDYSC.js";
 import {
   watch
-} from "./chunk.D7CATJYB.js";
+} from "./chunk.6IH66JBY.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
@@ -141,16 +144,6 @@ var DSAInput = class extends ShoelaceElement {
   handlePasswordToggle() {
     this.passwordVisible = !this.passwordVisible;
   }
-  getPickerIcon() {
-    switch (this.type) {
-      case "date":
-        return "calendar_today";
-      case "time":
-        return "schedule";
-      default:
-        return void 0;
-    }
-  }
   handleErrorChange() {
     if (this.error) {
       this.setAttribute("aria-invalid", "true");
@@ -242,7 +235,6 @@ var DSAInput = class extends ShoelaceElement {
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
     const hasClearIcon = this.clearable && !this.disabled && !this.readonly && (typeof this.value === "number" || this.value.length > 0);
     const hasHideIcon = this.type === "password" && !this.disabled;
-    const pickerIcon = this.getPickerIcon();
     return html`
       <div
         part="form-control"
@@ -303,8 +295,8 @@ var DSAInput = class extends ShoelaceElement {
               id="input"
               class="input__control"
               type=${this.type === "password" && this.passwordVisible ? "text" : this.type}
-              title=${hasLabel ? void 0 : this.title}
-              name=${ifDefined(this.name)}
+              title=${ifDefinedAndNotEmpty(hasLabel ? void 0 : this.title)}
+              name=${ifDefinedAndNotEmpty(this.name)}
               ?disabled=${this.disabled}
               ?readonly=${this.readonly}
               ?required=${this.required}
@@ -323,7 +315,9 @@ var DSAInput = class extends ShoelaceElement {
               pattern=${ifDefined(this.pattern)}
               enterkeyhint=${ifDefined(this.enterkeyhint)}
               inputmode=${ifDefined(this.inputmode)}
-              aria-label=${hasLabel ? void 0 : this.title}
+              aria-label=${ifDefinedAndNotEmpty(
+      hasLabel ? void 0 : this.title
+    )}
               aria-describedby=${this.error ? "error-text help-text" : "help-text"}
               @change=${this.handleChange}
               @input=${this.handleInput}
@@ -338,7 +332,7 @@ var DSAInput = class extends ShoelaceElement {
                       part="clear-button"
                       class="input__action-button"
                       name="clear"
-                      aria-label=${this.localize.term("clearEntry")}
+                      label=${this.localize.term("clearEntry")}
                       @click=${this.handleClearClick}
                     ></dsa-icon-button>
                   ` : ""}
@@ -351,12 +345,12 @@ var DSAInput = class extends ShoelaceElement {
                     name=${this.passwordVisible ? "visibility_off" : "visibility"}
                     @click=${this.handlePasswordToggle}
                   ></dsa-icon-button>` : ""}
-            ${pickerIcon !== void 0 ? html`
+            ${this.type === "time" ? html`
                     <dsa-icon-button
                       part="picker-button"
                       class="input__action-button"
-                      name=${pickerIcon}
-                      aria-label=${this.localize.term("clearEntry")}
+                      name="schedule"
+                      label=${this.localize.term("selectATime")}
                       @click=${this.showPicker}
                     ></dsa-icon-button>
                   ` : ""}