@ds-autonomie/web-components 1.4.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @ds-autonomie/web-components
 
+## 1.5.0
+
+### Minor Changes
+
+- 2b16f19: `icon-button`: ajout de l'attribut variant sur le composant icon-button
+- 3509713: `skip-link`, `skip-link-item`: implémentation des composants skip-link et skip-link-item
+- bf441fa: `stepper`: ajout du mode vertical sur le composant stepper
+- 7cc2433: `checkbox-group`, `checkbox-button`, `radio-group`, `radio-button`: ajout de l'option verticale pour les `checkbox-button` et `radio-button`, et uniformisation de la disposition par défaut à verticale.
+  Afin de garder la disposition de vos `checkbox-button` et `radio-button` à l'horizontale, il faut ajouter l'attribut `horizontal="true"` à leur parent `checkbox-group` ou `radio-group`.
+- 6cfe8f7: montée de version majeure de la dépendance Typescript (version 5.x)
+- bcef624: `input`, `textarea`: ajout de l'attribut `counter` pour afficher le compteur de caractères
+
+### Patch Changes
+
+- 487b6f4: `combobox`: correction sur l'utilisation du slot par défaut sur le composant combobox
+  - @ds-autonomie/assets@1.1.1
+
 ## 1.4.0
 
 ### Minor Changes

package/dist/chunks/{chunk.N7ZCXHGU.js → chunk.2FVPNPAG.js}

@@ -1,6 +1,6 @@
 import {
   checkbox_button_styles_default
-} from "./chunk.A3UKO7AU.js";
+} from "./chunk.7WQVFO44.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -90,6 +90,7 @@ var DSACheckboxButton = class extends ShoelaceElement {
           @blur=${this.handleBlur}
           @focus=${this.handleFocus}
           @click=${this.handleClick}
+          title="${this.innerText}"
         >
           ${this.readonly ? html`<dsa-icon
                 name="lock"

package/dist/chunks/{chunk.F6FCZQ67.js → chunk.2PVIV5ZH.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.CMJ2SRTL.js";
 import {
   checkbox_styles_default
-} from "./chunk.WE6IG5XG.js";
+} from "./chunk.R4PCVUXB.js";
 import {
   FormControlController
 } from "./chunk.KIFBWPW5.js";
@@ -194,7 +194,7 @@ var DSACheckbox = class extends ShoelaceElement {
             ${this.required ? html`<span class="checkbox__label-required">*</span>` : ""}
           </div>
         </label>
-        ${this.error && !this.disabled ? html`<dsa-error-text
+        ${this.error && !this.disabled && this.errorMessage ? html`<dsa-error-text
               id="error-text"
               class=${classMap({
       "form-control__error-text": true,

package/dist/chunks/{chunk.C7CCBBLF.js → chunk.3QQPH6YB.js}

@@ -1,6 +1,6 @@
 import {
   button_styles_default
-} from "./chunk.3GJ3KGGY.js";
+} from "./chunk.DXQY7NLW.js";
 
 // src/components/radio-button/radio-button.styles.ts
 import { css } from "lit";
@@ -18,6 +18,7 @@ var radio_button_styles_default = css`
   .button--toggle {
     display: inline-flex;
     align-items: center;
+    justify-content: start;
     background-color: var(--dsa-wc-toggle-button-background-color);
     border-color: var(--dsa-wc-toggle-button-border-color);
     color: var(--dsa-wc-toggle-button-color);
@@ -80,6 +81,7 @@ var radio_button_styles_default = css`
 
   .button--toggle .button__icon-readonly {
     margin-inline-end: var(--dsa-wc-toggle-button-icon-spacing);
+    flex-shrink: 0;
   }
 
   /* We use a hidden input so constraint validation errors work, since they don't appear to show when used with buttons.

package/dist/chunks/chunk.5QKVQDMN.js

@@ -0,0 +1,49 @@
+import {
+  skip_link_item_styles_default
+} from "./chunk.U24CXNHC.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/skip-link-item/skip-link-item.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var DSASkipLinkItem = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.href = "";
+  }
+  handleFocus() {
+    this.emit("dsa-focus");
+  }
+  handleBlur() {
+    this.emit("dsa-blur");
+  }
+  render() {
+    return html`
+      <a
+        part="base"
+        class="skip-link-item"
+        href=${this.href}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+      >
+        <slot part="label"></slot>
+      </a>
+    `;
+  }
+};
+DSASkipLinkItem.styles = skip_link_item_styles_default;
+__decorateClass([
+  property()
+], DSASkipLinkItem.prototype, "href", 2);
+DSASkipLinkItem = __decorateClass([
+  customElement("dsa-skip-link-item")
+], DSASkipLinkItem);
+
+export {
+  DSASkipLinkItem
+};

package/dist/chunks/{chunk.A3UKO7AU.js → chunk.7WQVFO44.js}

@@ -1,6 +1,6 @@
 import {
   button_styles_default
-} from "./chunk.3GJ3KGGY.js";
+} from "./chunk.DXQY7NLW.js";
 
 // src/components/checkbox-button/checkbox-button.styles.ts
 import { css } from "lit";
@@ -18,6 +18,7 @@ var checkbox_button_styles_default = css`
   .button--toggle {
     display: inline-flex;
     align-items: center;
+    justify-content: start;
     background-color: var(--dsa-wc-toggle-button-background-color);
     border-color: var(--dsa-wc-toggle-button-border-color);
     color: var(--dsa-wc-toggle-button-color);
@@ -84,11 +85,14 @@ var checkbox_button_styles_default = css`
   }
 
   .button--toggle .button__icon-check {
-    margin-inline-start: var(--dsa-wc-toggle-button-icon-spacing);
+    padding-inline-start: var(--dsa-wc-toggle-button-icon-spacing);
+    flex-shrink: 0;
+    margin-inline-start: auto;
   }
 
   .button--toggle .button__icon-readonly {
-    margin-inline-end: var(--dsa-wc-toggle-button-icon-spacing);
+    padding-inline-end: var(--dsa-wc-toggle-button-icon-spacing);
+    flex-shrink: 0;
   }
 
   /* We use a hidden input so constraint validation errors work, since they don't appear to show when used with buttons.
@@ -104,6 +108,23 @@ var checkbox_button_styles_default = css`
     opacity: 0;
     z-index: -1;
   }
+
+  /* Add padding to keep check icon space if in vertical checkbox-group */
+  :host(.dsa-button-group__button--vertical)
+    .button--small:not(.button--checked)
+    .button__label {
+    padding-right: 16px;
+  }
+  :host(.dsa-button-group__button--vertical)
+    .button--medium:not(.button--checked)
+    .button__label {
+    padding-right: 18px;
+  }
+  :host(.dsa-button-group__button--vertical)
+    .button--large:not(.button--checked)
+    .button__label {
+    padding-right: 20px;
+  }
 `;
 
 export {

package/dist/chunks/{chunk.MTZZV3NB.js → chunk.AQC66RY2.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.3RBCYA4F.js";
+} from "./chunk.AXG2LFB3.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";

package/dist/chunks/{chunk.3RBCYA4F.js → chunk.AXG2LFB3.js}

@@ -7,7 +7,7 @@ var form_control_styles_default = css`
     grid-template:
       'label tooltip .'
       'field field field' 1fr
-      'helpText helpText helpText'
+      'helpText helpText counter'
       'errorText errorText errorText'
       / auto auto minmax(0, 1fr);
     border: none;
@@ -45,6 +45,12 @@ var form_control_styles_default = css`
     display: none;
   }
 
+  .form-control .form-control__counter {
+    grid-area: counter;
+    display: none;
+    margin-inline-start: auto;
+  }
+
   .form-control .form-control__error-text {
     grid-area: errorText;
   }
@@ -62,6 +68,12 @@ var form_control_styles_default = css`
     color: var(--dsa-color-input-label-on-base-helper);
   }
 
+  .form-control--has-counter .form-control__counter {
+    display: block;
+    color: var(--dsa-color-input-label-on-base-helper);
+    animation-delay: 0s;
+  }
+
   .form-control--error .form-control__label {
     color: var(--dsa-wc-error-text-color);
   }
@@ -79,11 +91,13 @@ var form_control_styles_default = css`
   }
 
   .form-control--small .form-control__help-text,
+  .form-control--small .form-control__counter,
   .form-control--small .form-control__error-text {
     font: var(--dsa-wc-error-text-font-small);
   }
 
-  .form-control.form-control--small .form-control__help-text {
+  .form-control.form-control--small .form-control__help-text,
+  .form-control.form-control--small .form-control__counter {
     padding-top: var(--dsa-spacing-4);
   }
 
@@ -104,11 +118,13 @@ var form_control_styles_default = css`
   }
 
   .form-control--medium .form-control__help-text,
+  .form-control--medium .form-control__counter,
   .form-control--medium .form-control__error-text {
     font: var(--dsa-wc-error-text-font);
   }
 
-  .form-control.form-control--medium .form-control__help-text {
+  .form-control.form-control--medium .form-control__help-text,
+  .form-control.form-control--medium .form-control__counter {
     padding-top: var(--dsa-spacing-8);
   }
 
@@ -129,17 +145,52 @@ var form_control_styles_default = css`
   }
 
   .form-control--large .form-control__help-text,
+  .form-control--large .form-control__counter,
   .form-control--large .form-control__error-text {
     font: var(--dsa-wc-error-text-font-large);
   }
 
-  .form-control.form-control--large .form-control__help-text {
+  .form-control.form-control--large .form-control__help-text,
+  .form-control.form-control--large .form-control__counter {
     padding-top: var(--dsa-spacing-8);
   }
 
   .form-control.form-control--large .form-control__error-text {
     padding-top: var(--dsa-spacing-12);
   }
+
+  .form-control__counter--animated {
+    animation-name: tada;
+    animation-duration: 1s;
+  }
+
+  @keyframes tada {
+    from {
+      transform: scale3d(1, 1, 1);
+    }
+
+    10%,
+    20% {
+      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+    }
+
+    30%,
+    50%,
+    70%,
+    90% {
+      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+    }
+
+    40%,
+    60%,
+    80% {
+      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+    }
+
+    to {
+      transform: scale3d(1, 1, 1);
+    }
+  }
 `;
 
 export {

package/dist/chunks/{chunk.O4XPNLT4.js → chunk.B6CXFMFM.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.3RBCYA4F.js";
+} from "./chunk.AXG2LFB3.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";

package/dist/chunks/{chunk.4TRQBTMY.js → chunk.CWD6PMVD.js}

@@ -1,6 +1,6 @@
 import {
   input_mask_styles_default
-} from "./chunk.2HV2U4RQ.js";
+} from "./chunk.XRHDURFE.js";
 import {
   maskedValueToRawValue,
   rawValueToMaskedValue,

package/dist/chunks/{chunk.YRBTSDUN.js → chunk.DQNPP74X.js}

@@ -7,7 +7,7 @@ import { css } from "lit";
 var step_styles_default = css`
   ${component_styles_default}
 
-  :host(:first-of-type) .step:before {
+  :host(:last-of-type) .step:after {
     content: unset;
   }
 
@@ -15,22 +15,63 @@ var step_styles_default = css`
     display: grid;
     position: relative;
     align-content: start;
-    grid-template:
-      'icon .'
-      'index .'
-      'title title'
-      'content content' 1fr
-      / auto minmax(0, 1fr);
     padding-right: var(--dsa-spacing-24);
   }
 
-  .step-container .step-title-container {
-    grid-area: title;
+  .step-container__vertical {
+    grid-template: auto auto / auto 1fr;
+  }
+
+  .step {
+    height: var(--dsa-wc-stepper-icon-size);
+    width: var(--dsa-wc-stepper-icon-size);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--dsa-radius-32);
+    margin-bottom: var(--dsa-spacing-16);
+    border-width: var(--dsa-wc-stepper-icon-border-width);
+    border-style: var(--dsa-wc-stepper-icon-border-style);
+  }
+
+  .step-container .step {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .step:after {
+    content: '';
+    position: absolute;
+    background-color: var(--dsa-wc-stepper-color-progress-default);
+    z-index: -1;
+  }
+
+  .step-container__horizontal .step:after {
+    height: 1.4px;
+    right: var(--dsa-spacing-4);
+    width: calc(100% - calc(var(--dsa-spacing-4) + var(--dsa-spacing-32)));
+  }
+
+  .step-container__vertical .step:after {
+    width: 1.4px;
+    top: calc(var(--dsa-wc-stepper-icon-size) + var(--dsa-spacing-4));
+    height: calc(100% - calc(var(--dsa-spacing-4) + var(--dsa-spacing-32)));
+  }
+
+  .step-container__horizontal .step-title-container {
     display: none;
   }
 
+  .step-container__vertical .step-content-container {
+    grid-column: 2;
+    grid-row: 1;
+    padding-bottom: 16px;
+    padding-left: 16px;
+    max-width: 300px;
+  }
+
   .step-container--has-title .step-title-container {
-    display: inline-flex;
+    display: flex;
   }
 
   .step-title {
@@ -39,40 +80,18 @@ var step_styles_default = css`
   }
 
   .step-tooltip {
+    --dsa-wc-internal-icon-button-padding: var(--dsa-spacing-2);
+
     display: inline-block;
     margin-left: auto;
     position: relative;
     top: 2px;
   }
 
-  .step:before {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 1.4px;
-    background-color: var(--dsa-wc-stepper-color-progress-default);
-    right: calc(100% + var(--dsa-spacing-4));
-    width: calc(100% - calc(var(--dsa-spacing-4) + var(--dsa-spacing-32)));
-    z-index: -1;
-  }
-
   .step--complete:before {
     background-color: var(--dsa-wc-stepper-color-progress-complete);
   }
 
-  .step {
-    grid-area: icon;
-    height: var(--dsa-wc-stepper-icon-size);
-    width: var(--dsa-wc-stepper-icon-size);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: var(--dsa-radius-32);
-    border-width: var(--dsa-wc-stepper-icon-border-width);
-    border-style: var(--dsa-wc-stepper-icon-border-style);
-    margin-bottom: var(--dsa-spacing-16);
-  }
-
   .step--default {
     border-color: var(--dsa-wc-stepper-color-tag-blocked-base);
   }
@@ -107,7 +126,6 @@ var step_styles_default = css`
   }
 
   .step-container .step-content {
-    grid-area: content;
     display: none;
   }
 
@@ -120,7 +138,6 @@ var step_styles_default = css`
   }
 
   .step-index {
-    grid-area: index;
     margin: 0;
     margin-bottom: var(--dsa-spacing-4);
     text-transform: uppercase;

package/dist/chunks/chunk.DX25IW4S.js

@@ -0,0 +1,35 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/skip-links/skip-links.styles.ts
+import { css } from "lit";
+var skip_links_styles_default = css`
+  ${component_styles_default}
+
+  .skip-links {
+    position: absolute;
+    left: -9999px;
+    overflow: hidden;
+  }
+
+  .skip-links:focus-within {
+    position: static;
+    background: var(--dsa-wc-skip-link-on-layer-background);
+    padding: var(--dsa-wc-skip-link-padding-y) var(--dsa-wc-skip-link-padding-x);
+  }
+
+  .skip-links__list {
+    list-style-type: none;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: var(--dsa-wc-skip-link-list-padding);
+    align-items: center;
+    gap: var(--dsa-wc-skip-link-list-gap);
+  }
+`;
+
+export {
+  skip_links_styles_default
+};

package/dist/chunks/{chunk.3GJ3KGGY.js → chunk.DXQY7NLW.js}

@@ -242,6 +242,9 @@ var button_styles_default = css`
   }
 
   /* Tertiary */
+  .button--tertiary {
+    padding: 0;
+  }
   /* Tertiary/On Base */
   .button--on-base.button--tertiary {
     background-color: var(--dsa-wc-button-tertiary-on-base-color);
@@ -312,6 +315,9 @@ var button_styles_default = css`
   }
 
   /* Navigation */
+  .button--navigation {
+    padding: 0;
+  }
   /* Navigation/On Base */
   .button--on-base.button--navigation {
     background-color: var(--dsa-wc-button-navigation-on-base-color);
@@ -669,6 +675,7 @@ var button_styles_default = css`
       .dsa-button-group__button:not(
           .dsa-button-group__button--first,
           .dsa-button-group__button--radio,
+          .dsa-button-group__button--checkbox,
           [variant='default']
         ):not(:hover)
     )
@@ -692,6 +699,16 @@ var button_styles_default = css`
   :host(.dsa-button-group__button[checked]) {
     z-index: 2;
   }
+
+  /* Limit width if inside a vertical button-group */
+  :host(.dsa-button-group__button--vertical) {
+    max-width: 400px;
+  }
+  :host(.dsa-button-group__button--vertical) .button__label {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 `;
 
 export {

package/dist/chunks/{chunk.YY6AEXJK.js → chunk.HXH4JLAN.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.3RBCYA4F.js";
+} from "./chunk.AXG2LFB3.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";

package/dist/chunks/{chunk.XCG5TV7T.js → chunk.INCMVGXU.js}

@@ -1,6 +1,6 @@
 import {
   select_styles_default
-} from "./chunk.D6DEGG4H.js";
+} from "./chunk.Z2QW2HUR.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";

package/dist/chunks/{chunk.EXIGM5NV.js → chunk.K2ICEURU.js}

@@ -1,6 +1,6 @@
 import {
   icon_button_styles_default
-} from "./chunk.QFJA3MTV.js";
+} from "./chunk.YDCBGMSA.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";
@@ -23,6 +23,7 @@ var DSAIconButton = class extends ShoelaceElement {
     this.disableTabIndex = false;
     this.label = "";
     this.disabled = false;
+    this.variant = "default";
   }
   handleBlur() {
     this.hasFocus = false;
@@ -58,6 +59,11 @@ var DSAIconButton = class extends ShoelaceElement {
         part="base"
         class=${classMap({
       "icon-button": true,
+      "icon-button--default": this.variant === "default",
+      "icon-button--primary": this.variant === "primary",
+      "icon-button--secondary": this.variant === "secondary",
+      "icon-button--tertiary": this.variant === "tertiary",
+      "icon-button--danger": this.variant === "danger",
       "icon-button--disabled": !isLink && this.disabled,
       "icon-button--focused": this.hasFocus
     })}
@@ -121,6 +127,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSAIconButton.prototype, "disabled", 2);
+__decorateClass([
+  property()
+], DSAIconButton.prototype, "variant", 2);
 DSAIconButton = __decorateClass([
   customElement("dsa-icon-button")
 ], DSAIconButton);

package/dist/chunks/chunk.KTY3ESVG.js

@@ -0,0 +1,88 @@
+import {
+  stepper_styles_default
+} from "./chunk.QATKXCGU.js";
+import {
+  watch
+} from "./chunk.6IH66JBY.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/stepper/stepper.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var STEP_TAG = "dsa-step";
+var DSAStepper = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hideLabel = false;
+    this.vertical = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  // Gets an array of all <dsa-step> elements
+  getAllSteps() {
+    return [...this.querySelectorAll(STEP_TAG)];
+  }
+  handleDefaultSlotChange() {
+    const allSteps = this.getAllSteps();
+    if (customElements.get(STEP_TAG)) {
+      allSteps.forEach((step, index) => {
+        step.index = this.hideLabel ? void 0 : index;
+        step.vertical = this.vertical;
+      });
+    } else {
+      customElements.whenDefined(STEP_TAG).then(() => this.handleDefaultSlotChange());
+    }
+  }
+  handleHideLabelChange() {
+    const allSteps = this.getAllSteps();
+    allSteps.forEach((step, index) => {
+      step.index = this.hideLabel ? void 0 : index;
+    });
+  }
+  handleVerticalChange() {
+    const allSteps = this.getAllSteps();
+    allSteps.forEach((step) => {
+      step.vertical = this.vertical;
+    });
+  }
+  render() {
+    return html`
+      <div
+        role="list"
+        class=${classMap({
+      stepper: true,
+      stepper__vertical: this.vertical
+    })}
+      >
+        <slot @slotchange=${this.handleDefaultSlotChange}> </slot>
+      </div>
+    `;
+  }
+};
+DSAStepper.styles = stepper_styles_default;
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-label" })
+], DSAStepper.prototype, "hideLabel", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAStepper.prototype, "vertical", 2);
+__decorateClass([
+  watch("hideLabel", { waitUntilFirstUpdate: true })
+], DSAStepper.prototype, "handleHideLabelChange", 1);
+__decorateClass([
+  watch("vertical", { waitUntilFirstUpdate: true })
+], DSAStepper.prototype, "handleVerticalChange", 1);
+DSAStepper = __decorateClass([
+  customElement("dsa-stepper")
+], DSAStepper);
+
+export {
+  DSAStepper
+};