@ds-autonomie/web-components 2.2.0 → 2.3.1

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @ds-autonomie/web-components
 
+## 2.3.1
+
+### Patch Changes
+
+- a10fedd: `tree-item`, `progress-circle`, `table-of-contents` : amélioration du cycle de vie
+- 1810325: `input` : résolution du bug du type="date" avec les fuseaux horaires
+- 4678044: `radio` : amélioration de l'affichage en mode contraste élevé
+- 98a161a: Mise à jour des dépendances
+- de9d030: `input-time`: retrait de la scrollbar verticale sur la page
+
+## 2.3.0
+
+### Minor Changes
+
+- 81ebb10: `checkbox` ajout des attributs parentDisabled et parentReadonly
+  `checkbox-button` ajout des attributs parentDisabled et parentReadonly
+  `checkbox-group` modification de la gestion des attributs readonly et disabled
+  `radio` ajout des attributs parentDisabled et parentReadonly
+  `radio-button` ajout des attributs parentDisabled et parentReadonly
+  `radio-group` modification de la gestion des attributs readonly et disabled
+- 2afaa9a: `switch` : ajout du composant
+- 23bc7f7: `input` : harmonisation du comportement du type time sur les différents navigateurs
+- 7b8f634: `radio-card` : ajout du composant carte radio
+  `checkbox-card` : ajout du composant carte checkbox
+- c72b2c6: `dialog`: ajout d'un attribut permettant de retirer le bouton de fermeture
+
+### Patch Changes
+
+- 1795414: `input` : correction de l'état de validité du type date
+- bfa9182: `button` : ajout de la variante `tertiary-with-outline`
+- 80a235e: `dialog`: ajustements graphiques
+- bdd4606: `radio-button` : amélioration de la visibilité de l'état coché en mode contraste élevé
+  `radio-group` : possibilité de tabuler sur la première option si la valeur du groupe n'est pas valide
+- 9db287c: `input-date` : focus sur le champ au clic sur le label
+- Updated dependencies [33ff2b9]
+  - @ds-autonomie/assets@1.4.4
+
 ## 2.2.0
 
 ### Minor Changes

package/cdn/chunks/{chunk.CZHOLGSR.js → chunk.27YOIDOY.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.NC6BC5GU.js";
+} from "./chunk.W2B6WXUI.js";
 import {
   component_styles_default
 } from "./chunk.PSQJDSB2.js";

package/cdn/chunks/{chunk.2DJERWBI.js → chunk.2P3IVRMK.js}

@@ -1,12 +1,12 @@
 import {
   DSASelect
-} from "./chunk.LNBAAP45.js";
+} from "./chunk.QEPPYDSN.js";
 import {
   getPhoneConfig
 } from "./chunk.65HTBW2L.js";
 import {
   input_phone_styles_default
-} from "./chunk.77CWRZEL.js";
+} from "./chunk.WY2HI4TL.js";
 import {
   frenchNumberPrefix,
   phonePrefixOptions
@@ -18,7 +18,7 @@ import {
 } from "./chunk.7OLEA3GQ.js";
 import {
   FormControlLayout
-} from "./chunk.XQAKSW3W.js";
+} from "./chunk.TOWWOPMH.js";
 import {
   l
 } from "./chunk.7PPSHHT2.js";
@@ -377,6 +377,7 @@ var DSAInputPhone = class extends FormControlLayout {
               name=${ifDefinedAndNotEmpty(this.name)}
               ?disabled=${this.disabled}
               ?readonly=${this.readonly}
+              aria-disabled=${o(this.readonly ? "true" : void 0)}
               ?required=${this.required}
               minlength=${o(this.placeholder.length)}
               maxlength=${o(this.placeholder.length)}

package/cdn/chunks/{chunk.YD6XEMWC.js → chunk.2Q6V7LT2.js}

@@ -1,6 +1,6 @@
 import {
   button_styles_default
-} from "./chunk.FA2HQBM6.js";
+} from "./chunk.TENBZ64C.js";
 import {
   i
 } from "./chunk.4KHZQZ3M.js";

package/cdn/chunks/chunk.35PPY25N.js

@@ -0,0 +1,92 @@
+import {
+  component_styles_default
+} from "./chunk.PSQJDSB2.js";
+import {
+  i
+} from "./chunk.4KHZQZ3M.js";
+
+// src/components/radio/radio.styles.ts
+var radio_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  :host(:focus-visible) {
+    outline: 0px;
+  }
+
+  .radio {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    font: var(--dsa-wc-radio-label-font);
+    color: var(--dsa-wc-radio-label-color);
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .radio--small {
+    --toggle-size: var(--dsa-wc-radio-size-small);
+    font: var(--dsa-wc-radio-label-font-small);
+  }
+
+  .radio--medium {
+    --toggle-size: var(--dsa-wc-radio-size);
+    font: var(--dsa-wc-radio-label-font);
+  }
+
+  .radio--large {
+    --toggle-size: var(--dsa-wc-radio-size-large);
+    font: var(--dsa-wc-radio-label-font-large);
+  }
+
+  .radio__input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  /* Checked + focus */
+  :host(:focus-visible) dsa-internal-radio-icon::part(control) {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+
+  .radio__label {
+    display: inline-flex;
+    color: var(--dsa-wc-radio-label-color);
+    line-height: var(--toggle-size);
+    justify-content: center;
+    align-items: center;
+    margin-inline-start: 0.5em;
+    user-select: none;
+  }
+
+  /* Disabled */
+
+  .radio--disabled {
+    cursor: not-allowed;
+  }
+
+  .radio--disabled .radio__label {
+    color: var(--dsa-wc-radio-label-color-disabled);
+  }
+
+  /* Error */
+  .radio__label.radio__label--error {
+    color: var(--dsa-wc-input-label-color-error) !important;
+  }
+
+  /* Readonly */
+  .radio--readonly {
+    cursor: not-allowed;
+  }
+`;
+
+export {
+  radio_styles_default
+};

package/cdn/chunks/{chunk.EARU4CHS.js → chunk.3AT66TOX.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.7M6TBOTT.js";
 import {
   DSAIcon
-} from "./chunk.BE7PKTJW.js";
+} from "./chunk.D5IL5KN6.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.WJ2QJ5NF.js → chunk.3CRRJ74Q.js}

@@ -1,15 +1,15 @@
-import {
-  footer_styles_default
-} from "./chunk.XSXBXWVS.js";
 import {
   footerLogoSvg
 } from "./chunk.SSQ53AGL.js";
+import {
+  footer_styles_default
+} from "./chunk.QFP2EIRS.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.ZLWLHLBC.js";
+} from "./chunk.LICWCBKN.js";
 import {
   e
 } from "./chunk.IKHG7XGO.js";

package/cdn/chunks/chunk.3OSWL542.js

@@ -0,0 +1,163 @@
+import {
+  u
+} from "./chunk.VIVOXZF6.js";
+import {
+  e
+} from "./chunk.IKHG7XGO.js";
+import {
+  ShoelaceElement,
+  n,
+  t
+} from "./chunk.DZB6XUZ7.js";
+import {
+  i
+} from "./chunk.4KHZQZ3M.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/internal/components/radio-icon/radio-icon.styles.ts
+var radio_icon_styles_default = i`
+  :host {
+    display: contents;
+  }
+
+  :host::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+
+  .radio__control--small {
+    --toggle-size: var(--dsa-wc-radio-size-small);
+    --toggle-inner-size: var(--dsa-wc-radio-inner-size-small);
+  }
+
+  .radio__control--medium {
+    --toggle-size: var(--dsa-wc-radio-size);
+    --toggle-inner-size: var(--dsa-wc-radio-inner-size);
+  }
+
+  .radio__control--large {
+    --toggle-size: var(--dsa-wc-radio-size-large);
+    --toggle-inner-size: var(--dsa-wc-radio-inner-size-large);
+  }
+
+  .radio__control {
+    flex: 0 0 auto;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--toggle-size);
+    height: var(--toggle-size);
+    border: solid var(--dsa-wc-radio-border-width) var(--dsa-wc-radio-color);
+    border-radius: 50%;
+    background-color: none;
+    color: var(--dsa-wc-radio-color);
+    transition: var(--dsa-wc-transition-fast) border-color,
+      var(--dsa-wc-transition-fast) background-color,
+      var(--dsa-wc-transition-fast) color,
+      var(--dsa-wc-transition-fast) box-shadow;
+    box-sizing: border-box;
+  }
+
+  .radio__control.radio--small {
+    border-width: var(--dsa-wc-radio-border-width-small);
+  }
+
+  /* Hover */
+  :host(:hover)
+    .radio__control:not(.radio__control--checked):not(
+      .radio__control--disabled
+    ):not(.radio__control--readonly) {
+    border-color: var(--dsa-wc-radio-color-hover);
+  }
+
+  /* Checked */
+  .radio__control--checked {
+    border-color: var(--dsa-wc-radio-color-active);
+  }
+  .radio__control--checked .radio__inner {
+    border-radius: 50%;
+    background-color: var(--dsa-wc-radio-color-active);
+    width: var(--toggle-inner-size);
+    height: var(--toggle-inner-size);
+  }
+
+  /* Disabled */
+  .radio__control--disabled {
+    border-color: var(--dsa-wc-radio-color-disabled);
+  }
+  .radio__control--checked.radio__control--disabled .radio__inner {
+    background-color: var(--dsa-wc-radio-color-disabled);
+  }
+
+  /* Readonly */
+  .radio__control--readonly {
+    border-color: var(--dsa-wc-radio-border-color-readonly);
+  }
+  .radio__control--checked.radio__control--readonly .radio__inner {
+    border-color: var(--dsa-wc-radio-border-color-readonly);
+    background-color: var(--dsa-wc-radio-color-readonly);
+  }
+
+  @media (forced-colors: active) {
+    .radio__control--checked {
+      border-color: Highlight;
+    }
+    .radio__control--checked .radio__inner {
+      background-color: Highlight;
+    }
+  }
+`;
+
+// src/internal/components/radio-icon/radio-icon.ts
+var DSAInternalRadioIcon = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.checked = false;
+    this.size = "medium";
+    this.disabled = false;
+    this.readonly = false;
+    this.error = false;
+  }
+  render() {
+    return u`
+      <span
+        part="control"
+        class=${e({
+      radio__control: true,
+      "radio__control--checked": this.checked,
+      "radio__control--disabled": this.disabled,
+      "radio__control--readonly": this.readonly,
+      "radio__control--error": this.error,
+      "radio__control--small": this.size === "small",
+      "radio__control--medium": this.size === "medium",
+      "radio__control--large": this.size === "large"
+    })}
+      >
+        ${this.checked ? u` <span class="radio__inner"></span> ` : ""}
+      </span>
+    `;
+  }
+};
+DSAInternalRadioIcon.styles = radio_icon_styles_default;
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSAInternalRadioIcon.prototype, "checked", 2);
+__decorateClass([
+  n({ reflect: true })
+], DSAInternalRadioIcon.prototype, "size", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSAInternalRadioIcon.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSAInternalRadioIcon.prototype, "readonly", 2);
+__decorateClass([
+  n({ type: Boolean })
+], DSAInternalRadioIcon.prototype, "error", 2);
+DSAInternalRadioIcon = __decorateClass([
+  t("dsa-internal-radio-icon")
+], DSAInternalRadioIcon);

package/cdn/chunks/{chunk.SW4US4PJ.js → chunk.4AMHKT45.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.ZLWLHLBC.js";
+} from "./chunk.LICWCBKN.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.BCLU5KXE.js → chunk.4VWDJUDJ.js}

@@ -1,6 +1,6 @@
 import {
   DSATableRow
-} from "./chunk.6CF6SXDF.js";
+} from "./chunk.U5Q3HCRP.js";
 import {
   table_header_row_styles_default
 } from "./chunk.JEWSMUZM.js";

package/cdn/chunks/{chunk.6QTMZJGH.js → chunk.55Y4QE5R.js}

@@ -1,15 +1,15 @@
 import {
   DSAOption
-} from "./chunk.5BF76EO7.js";
+} from "./chunk.YA7ZX7VM.js";
+import {
+  DSAInput
+} from "./chunk.AATBJDAH.js";
 import {
   filter_select_styles_default
 } from "./chunk.57V66KCM.js";
-import {
-  DSAInput
-} from "./chunk.3JMBGIZN.js";
 import {
   FilterBase
-} from "./chunk.SW4US4PJ.js";
+} from "./chunk.4AMHKT45.js";
 import {
   normalizeStr
 } from "./chunk.O4MZVDWB.js";

package/cdn/chunks/{chunk.6H5KLQNT.js → chunk.57JBB4UL.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.DTSCRQ4P.js";
 import {
   LocalizeController
-} from "./chunk.ZLWLHLBC.js";
+} from "./chunk.LICWCBKN.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.THD27VRI.js → chunk.57UCUSPU.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.MML6GY5Y.js";
 import {
   LocalizeController
-} from "./chunk.ZLWLHLBC.js";
+} from "./chunk.LICWCBKN.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.T4RXUUPV.js → chunk.5BWMYJNC.js}

@@ -7,13 +7,13 @@ import {
 } from "./chunk.DQI2JTKU.js";
 import {
   FilterBase
-} from "./chunk.SW4US4PJ.js";
+} from "./chunk.4AMHKT45.js";
 import {
   getDateFromISO,
   getISOFormattedDate,
   getLocaleDateFromISO,
   isValidDate
-} from "./chunk.IPZC55RV.js";
+} from "./chunk.6YEPFMKU.js";
 import {
   l
 } from "./chunk.7PPSHHT2.js";

package/cdn/chunks/{chunk.7CIXFYLV.js → chunk.5EYEXU6M.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.ZLWLHLBC.js";
+} from "./chunk.LICWCBKN.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/chunk.5IFHMXXG.js

@@ -0,0 +1,229 @@
+import {
+  i
+} from "./chunk.4KHZQZ3M.js";
+
+// src/components/switch/switch.styles.ts
+var switch_styles_default = i`
+  :host {
+    display: inline-block;
+  }
+
+  :host([size='small']) {
+    --height: var(--dsa-wc-switch-size-small);
+    --thumb-size: calc(var(--dsa-wc-switch-size-small) - 8px);
+    --width: calc(var(--height) * 2);
+
+    font: var(--dsa-wc-switch-font-small);
+  }
+
+  :host([size='medium']) {
+    --height: var(--dsa-wc-switch-size-medium);
+    --thumb-size: calc(var(--dsa-wc-switch-size-medium) - 8px);
+    --width: calc(var(--height) * 2);
+
+    font: var(--dsa-wc-switch-font-medium);
+  }
+
+  :host([size='large']) {
+    --height: var(--dsa-wc-switch-size-large);
+    --thumb-size: calc(var(--dsa-wc-switch-size-large) - 8px);
+    --width: calc(var(--height) * 2);
+
+    font: var(--dsa-wc-switch-font-large);
+  }
+
+  .switch {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--dsa-spacing-32);
+    color: var(--dsa-wc-switch-label-color);
+    vertical-align: middle;
+    cursor: pointer;
+    padding: var(--dsa-switch-padding);
+    border: 1px solid transparent;
+    border-radius: var(--dsa-radius-4);
+    grid-area: field;
+    justify-content: space-between;
+  }
+
+  .switch__indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--dsa-spacing-8);
+  }
+
+  .switch__control {
+    flex: 0 0 auto;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--width);
+    height: var(--height);
+    background-color: var(--dsa-wc-switch-control-background-color);
+    border: solid var(--dsa-wc-switch-control-border-width)
+      var(--dsa-wc-switch-control-border-color);
+    color: var(--dsa-wc-switch-control-border-color);
+    border-radius: var(--height);
+    transition: var(--dsa-wc-transition-fast) border-color,
+      var(--dsa-wc-transition-fast) background-color;
+  }
+
+  .switch__control .switch__thumb {
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    background-color: var(--dsa-wc-switch-thumb-background-color);
+    border-radius: 50%;
+    border: solid var(--dsa-wc-switch-control-border-width)
+      var(--dsa-wc-switch-control-border-color);
+    translate: calc((var(--width) - var(--height)) / -2);
+    transition: var(--dsa-wc-transition-fast) translate ease,
+      var(--dsa-wc-transition-fast) background-color,
+      var(--dsa-wc-transition-fast) border-color,
+      var(--dsa-wc-transition-fast) box-shadow;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .switch__checked-icon {
+    opacity: 0;
+  }
+
+  .switch__state {
+    user-select: none;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .switch__state-placeholder {
+    visibility: hidden;
+    height: 0px;
+  }
+
+  .switch__input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  /* Hover */
+  .switch:not(.switch--disabled):not(.switch--readonly):hover {
+    background-color: var(--dsa-wc-switch-background-color-hover);
+    border-color: var(--dsa-wc-switch-border-color-hover);
+  }
+  .switch:not(.switch--checked):not(.switch--disabled):not(
+      .switch--readonly
+    ):hover
+    .switch__control {
+    background-color: var(--dsa-wc-switch-control-background-color-hover);
+  }
+
+  /* Focus */
+  .switch--focused {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+  .switch--focused:not(.switch--disabled):not(.switch--readonly) {
+    background-color: var(--dsa-wc-switch-background-color-hover);
+    border-color: var(--dsa-wc-switch-border-color-hover);
+  }
+
+  .switch--focused:not(.switch--checked):not(.switch--disabled):not(
+      .switch--readonly
+    )
+    .switch__control {
+    background-color: var(--dsa-wc-switch-control-background-color-hover);
+  }
+
+  /* Checked */
+  .switch--checked:not(.switch--disabled):not(.switch--readonly)
+    .switch__control {
+    background-color: var(--dsa-wc-switch-control-background-color-active);
+  }
+
+  .switch--checked .switch__control .switch__thumb {
+    translate: calc((var(--width) - var(--height)) / 2);
+  }
+  .switch--checked:not(.switch--disabled):not(.switch--readonly)
+    .switch__control
+    .switch__thumb {
+    background-color: var(--dsa-wc-switch-thumb-background-color-active);
+    border-color: transparent;
+  }
+  .switch--checked .switch__checked-icon {
+    opacity: 1;
+    transition: var(--dsa-wc-transition-fast) opacity ease
+      var(--dsa-wc-transition-x-fast);
+  }
+
+  /* Checked + hover */
+  .switch.switch--checked:not(.switch--disabled):not(.switch--readonly):hover
+    .switch__control {
+    background-color: var(
+      --dsa-wc-switch-control-background-color-active-hover
+    );
+    border-color: var(--dsa-wc-switch-control-background-color-active-hover);
+    color: var(--dsa-wc-switch-control-background-color-active-hover);
+  }
+
+  /* Checked + focus */
+  .switch--focused.switch--checked:not(.switch--disabled):not(.switch--readonly)
+    .switch__control {
+    background-color: var(
+      --dsa-wc-switch-control-background-color-active-hover
+    );
+    border-color: var(--dsa-wc-switch-control-background-color-active-hover);
+    color: var(--dsa-wc-switch-control-background-color-active-hover);
+  }
+
+  /* Disabled */
+  .switch--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .switch--disabled .switch__control {
+    border-color: var(--dsa-wc-switch-control-border-color-disabled);
+    color: var(--dsa-wc-switch-control-border-color-disabled);
+  }
+  .switch--disabled .switch__thumb {
+    border-color: var(--dsa-wc-switch-control-border-color-disabled);
+  }
+
+  /* Readonly */
+  .switch--readonly {
+    cursor: not-allowed;
+  }
+  .switch--readonly .switch__control {
+    border-color: var(--dsa-wc-switch-control-border-color-readonly);
+    color: var(--dsa-wc-switch-control-border-color-readonly);
+  }
+  .switch--readonly .switch__thumb {
+    border-color: var(--dsa-wc-switch-control-border-color-readonly);
+  }
+
+  /* Readonly + Checked */
+  .switch--checked.switch--readonly .switch__control {
+    background-color: var(
+      --dsa-wc-switch-control-background-color-active-readonly
+    );
+  }
+
+  .switch__label {
+    display: inline-block;
+    line-height: var(--height);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .switch__label-required {
+    color: var(--dsa-wc-form-required-content-color);
+  }
+`;
+
+export {
+  switch_styles_default
+};