@ds-autonomie/web-components 2.2.0 → 2.3.0

package/CHANGELOG.md

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

@@ -1,6 +1,6 @@
 import {
   input_mask_styles_default
-} from "./chunk.P5N74W74.js";
+} from "./chunk.THMGZ3JS.js";
 import {
   maskedValueToRawValue,
   rawValueToMaskedValue,
@@ -8,7 +8,7 @@ import {
 } from "./chunk.7OLEA3GQ.js";
 import {
   FormControlLayout
-} from "./chunk.XQAKSW3W.js";
+} from "./chunk.SF3YU6PZ.js";
 import {
   l
 } from "./chunk.7PPSHHT2.js";
@@ -20,7 +20,7 @@ import {
 } from "./chunk.3NWILHZZ.js";
 import {
   LocalizeController
-} from "./chunk.ZLWLHLBC.js";
+} from "./chunk.LICWCBKN.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.MJLKYERJ.js → chunk.2T2ABKP4.js}

@@ -1,9 +1,9 @@
 import {
   input_otp_styles_default
-} from "./chunk.KELDA33H.js";
+} from "./chunk.ZTXQFGQX.js";
 import {
   FormControlLayout
-} from "./chunk.XQAKSW3W.js";
+} from "./chunk.SF3YU6PZ.js";
 import {
   l
 } from "./chunk.7PPSHHT2.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.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.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.YS6XV3LD.js → chunk.5AKIIMXP.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk.O4MZVDWB.js";
 import {
   FormControlLayout
-} from "./chunk.XQAKSW3W.js";
+} from "./chunk.SF3YU6PZ.js";
 import {
   combobox_styles_default
-} from "./chunk.I7XP2UMV.js";
+} from "./chunk.7FRA5H32.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
@@ -29,7 +29,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.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
+};