@ds-autonomie/web-components 2.7.0 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @ds-autonomie/web-components
 
+## 2.8.0
+
+### Minor Changes
+
+- f90bad2: `search` : ajout du composant recherche
+- 941ea97: `sidenav` : ajout du composant ;
+  `menu-accordion` : ajout de l'attribut `size`, ajout des slots `prefix` et `badge` ;
+  `menu-label` : ajustement rendu ;
+- f2aa551: `page-header` : ajout de la propriété `reduced` pour l'affichage limité
+- 388c7ba: `card-content` : ajout/modification des tailles `medium`/`small`
+
+### Patch Changes
+
+- 674f38d: `input-date`, `input-time` : dans un drawer, empêcher l'appui sur Echap pour fermer la popup de fermer également le drawer
+- 263d113: `table-action` : mise à jour du style
+- fcf11b5: `table-container` : (a11y) Empecher d'atteindre la barre d'outil avec le lecteur d'écran si la barre d'action est affichée; `table-actions` : (a11y) empêcher d'atteindre la barre d'action au lecteur d'écran lorsqu'elle est cachée; `select`, `combobox`: désactivation des tags lorsque l'élément est désactivé
+- 8f68653: `fieldset` : modification pour permettre aux champs enfants d'être désactivé de manière individuelle
+- 6e512ce: `combobox`, `dialog`, `drawer`, `navbar-menu`, `select` : suppression d'attributs tabindex inutiles
+- feec186: `file-upload` : changement du style du bouton de `primary` à `secondary`
+- 99c1894: `tag` : ajout des variantes `neutral`, et ajustement des couleurs disponibles (100 à 400)
+- a59c265: `switch` : renommage des attributs pour les libéllés des états on et off
+- 180407a: `accordion` : résolution du problème de z-index dans le slot "actions"
+- 5a60230: `tree-item` : séparation des comportement d'ouverture et de sélection, ajout d'un icone check pour la sélection simple
+- Updated dependencies [263d113]
+- Updated dependencies [99c1894]
+- Updated dependencies [0ff990d]
+  - @ds-autonomie/assets@1.4.9
+
+## 2.7.1
+
+### Patch Changes
+
+- 090de99: `header`, `page-header`, `table-container`, `table-toolbar`, `tree-item`: amélioration du rendu avec un zoom important
+- 4a34419: Mise à jour des couleurs du brandbook
+- 2d0aa8a: `step`: correction de la couleur de la barre de progrès en mode horizontal
+- 4b161f0: `accordion`: ajout d'un divider entre les actions et le chevron
+- f70d4e3: `input-date`, `input-time`: ajout de l'attribut 'hoist' contrant certains problèmes d'affichage
+- Updated dependencies [4a34419]
+  - @ds-autonomie/assets@1.4.8
+
 ## 2.7.0
 
 ### Minor Changes

package/cdn/chunks/chunk.2AGKTM6V.js

@@ -0,0 +1,157 @@
+import {
+  component_styles_default
+} from "./chunk.MQAAYEM3.js";
+import {
+  i
+} from "./chunk.UKK3NS3L.js";
+
+// src/components/menu-item/menu-item.styles.ts
+var menu_item_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  :host([inert]) {
+    display: none;
+  }
+
+  .menu-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    color: var(--dsa-wc-menu-item-color);
+    transition: var(--dsa-wc-transition-fast) fill;
+    user-select: none;
+    cursor: pointer;
+  }
+
+  .menu-item[aria-current] {
+    color: var(--dsa-wc-menu-navigation-item-current-color);
+    background-color: var(
+      --dsa-wc-menu-navigation-item-current-background-color
+    );
+  }
+  .menu-item[aria-current]::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 4px;
+    background-color: var(--dsa-wc-menu-navigation-item-current-color);
+  }
+
+  .menu-item--button {
+    background: none;
+    border: none;
+    margin: 0;
+    width: 100%;
+  }
+  .menu-item--link {
+    text-decoration: none;
+  }
+  .menu-item.menu-item--small {
+    font: var(--dsa-wc-menu-item-small-font);
+    padding: var(--dsa-wc-menu-item-small-padding);
+    min-height: var(--dsa-wc-menu-item-small-min-height);
+  }
+  .menu-item.menu-item--small[aria-current] {
+    font: var(--dsa-wc-menu-item-small-font-current);
+  }
+  .menu-item.menu-item--medium {
+    font: var(--dsa-wc-menu-item-font);
+    padding: var(--dsa-wc-menu-item-padding);
+    min-height: var(--dsa-wc-menu-item-min-height);
+  }
+  .menu-item.menu-item--medium[aria-current] {
+    font: var(--dsa-wc-menu-item-font-current);
+  }
+  .menu-item.menu-item--large {
+    font: var(--dsa-wc-menu-item-large-font);
+    padding: var(--dsa-wc-menu-item-large-padding);
+    min-height: var(--dsa-wc-menu-item-large-min-height);
+  }
+  .menu-item.menu-item--large[aria-current] {
+    font: var(--dsa-wc-menu-item-large-font-current);
+  }
+
+  .menu-item.menu-item--disabled {
+    color: var(--dsa-wc-menu-item-disabled-color);
+    outline: none;
+    cursor: not-allowed;
+  }
+
+  .menu-item .menu-item__label {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+
+  .menu-item .menu-item__prefix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-item .menu-item__prefix::slotted(*) {
+    margin-inline-end: var(--dsa-wc-menu-item-margin-inline-end);
+    display: inherit;
+    height: 1.25em;
+    width: 1.25em;
+  }
+
+  .menu-item .menu-item__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-item .menu-item__suffix::slotted(*) {
+    margin-inline-start: var(--dsa-wc-menu-item-margin-inline-start);
+    display: inherit;
+  }
+
+  :host(:focus-visible) {
+    outline: none;
+  }
+
+  :host(:hover:not([aria-disabled='true'])) .menu-item {
+    background-color: var(--dsa-wc-menu-item-hover-background-color);
+    color: var(--dsa-wc-menu-item-hover-color);
+  }
+
+  :host(:focus-visible) .menu-item,
+  .menu-item--button:focus-visible,
+  .menu-item--link:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-menu-item-focus-ring-offset);
+    opacity: 1;
+  }
+
+  :host(.level-1) .menu-item {
+    padding-inline-start: var(--dsa-wc-menu-item-padding-left-level-1);
+  }
+  :host(.level-2) .menu-item {
+    padding-inline-start: var(--dsa-wc-menu-item-padding-left-level-2);
+  }
+
+  @media (forced-colors: active) {
+    :host(:hover:not([aria-disabled='true'])) .menu-item,
+    :host(:focus-visible) .menu-item {
+      outline: var(--dsa-wc-focus-ring);
+      outline-offset: var(--dsa-wc-menu-item-focus-ring-offset);
+    }
+  }
+
+  /*
+  * Collapsed
+  */
+  .menu-item--collapsed .menu-item__label {
+    display: none;
+  }
+`;
+
+export {
+  menu_item_styles_default
+};

package/cdn/chunks/chunk.2FU56VWP.js

@@ -0,0 +1,44 @@
+import {
+  table_single_cell_row_styles_default
+} from "./chunk.JJBI3ZYI.js";
+import {
+  ShoelaceElement,
+  n,
+  t
+} from "./chunk.EW5LC4ZI.js";
+import {
+  x
+} from "./chunk.JXF4O366.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/table-single-cell-row/table-single-cell-row.ts
+var DSATableSingleCellRow = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.role = "row";
+    this.colSpan = 1;
+  }
+  render() {
+    return x`
+      <td class="single-cell-row" colspan=${this.colSpan}>
+        <slot></slot>
+      </td>
+    `;
+  }
+};
+DSATableSingleCellRow.styles = table_single_cell_row_styles_default;
+__decorateClass([
+  n({ reflect: true })
+], DSATableSingleCellRow.prototype, "role", 2);
+__decorateClass([
+  n({ type: Number, attribute: "colspan" })
+], DSATableSingleCellRow.prototype, "colSpan", 2);
+DSATableSingleCellRow = __decorateClass([
+  t("dsa-table-single-cell-row")
+], DSATableSingleCellRow);
+
+export {
+  DSATableSingleCellRow
+};

package/cdn/chunks/chunk.2MMASCIR.js

@@ -0,0 +1,284 @@
+import {
+  accordion_styles_default
+} from "./chunk.ZI6HZEZQ.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  shimKeyframesHeightAuto,
+  stopAnimations
+} from "./chunk.UBKKXGSV.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.2WRFDMKN.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
+import {
+  LocalizeController
+} from "./chunk.57JI3UNH.js";
+import {
+  o
+} from "./chunk.XED65RH5.js";
+import {
+  e2
+} from "./chunk.JY4LUWQC.js";
+import {
+  watch
+} from "./chunk.4FQJ3QJK.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  t
+} from "./chunk.EW5LC4ZI.js";
+import {
+  x
+} from "./chunk.JXF4O366.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/accordion/accordion.ts
+var DSAAccordion = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "summary",
+      "actions"
+    );
+    this.open = false;
+    this.disabled = false;
+    this.icon = "chevron";
+    this.variant = "outlined";
+    this.size = "medium";
+  }
+  firstUpdated() {
+    this.body.hidden = !this.open;
+    this.body.style.height = this.open ? "auto" : "0";
+  }
+  handleSummaryClick() {
+    if (!this.disabled) {
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+      this.headerButton.focus();
+    }
+  }
+  handleSummaryKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }
+    if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.hide();
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+      event.preventDefault();
+      this.show();
+    }
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      const slShow = this.emit("dsa-show", { cancelable: true });
+      if (slShow.defaultPrevented) {
+        this.open = false;
+        return;
+      }
+      await stopAnimations(this.body);
+      this.body.hidden = false;
+      const { keyframes, options } = getAnimation(this, "accordion.show", {
+        dir: this.localize.dir()
+      });
+      await animateTo(
+        this.body,
+        shimKeyframesHeightAuto(keyframes, this.body.scrollHeight),
+        options
+      );
+      this.body.style.height = "auto";
+      this.emit("dsa-after-show");
+    } else {
+      const slHide = this.emit("dsa-hide", { cancelable: true });
+      if (slHide.defaultPrevented) {
+        this.open = true;
+        return;
+      }
+      await stopAnimations(this.body);
+      const { keyframes, options } = getAnimation(this, "accordion.hide", {
+        dir: this.localize.dir()
+      });
+      await animateTo(
+        this.body,
+        shimKeyframesHeightAuto(keyframes, this.body.scrollHeight),
+        options
+      );
+      this.body.hidden = true;
+      this.body.style.height = "auto";
+      this.emit("dsa-after-hide");
+    }
+  }
+  /** Shows the accordion. */
+  async show() {
+    if (this.open || this.disabled) {
+      return void 0;
+    }
+    this.open = true;
+    return await waitForEvent(this, "dsa-after-show");
+  }
+  /** Hides the accordion */
+  async hide() {
+    if (!this.open || this.disabled) {
+      return void 0;
+    }
+    this.open = false;
+    return await waitForEvent(this, "dsa-after-hide");
+  }
+  render() {
+    if (!this.summary && !this.hasSlotController.test("summary")) {
+      a11yWarning(
+        "<dsa-accordion> requires a summary attribute or a summary slot for accessibility"
+      );
+    }
+    const isRtl = this.localize.dir() === "rtl";
+    const expandIconName = this.icon === "box" ? "add_box" : isRtl ? "chevron_left" : "chevron_right";
+    const collapseIconName = this.icon === "box" ? "indeterminate_check_box" : isRtl ? "chevron_left" : "chevron_right";
+    return x`
+      <div
+        part="base"
+        class=${e2({
+      accordion: true,
+      "accordion--open": this.open,
+      "accordion--disabled": this.disabled,
+      "accordion--rtl": isRtl,
+      "accordion--chevron": this.icon === "chevron",
+      "accordion--filled": this.variant === "filled",
+      "accordion--small": this.size === "small",
+      "accordion--medium": this.size === "medium"
+    })}
+      >
+        <div part="header" id="header" class="accordion__header">
+          <div
+            class="accordion__summary-container"
+            aria-level=${o(this.headerLevel)}
+            role=${o(this.headerLevel ? "heading" : void 0)}
+          >
+            <span
+              role="button"
+              aria-expanded=${this.open ? "true" : "false"}
+              aria-controls="content"
+              aria-disabled=${this.disabled ? "true" : "false"}
+              tabindex=${this.disabled ? "-1" : "0"}
+              @click=${this.handleSummaryClick}
+              @keydown=${this.handleSummaryKeyDown}
+              class="accordion__header-button"
+            >
+              <slot name="summary" part="summary" class="accordion__summary"
+                >${this.summary}</slot
+              >
+            </span>
+          </div>
+          <div class="accordion__actions">
+            <slot name="actions"></slot>
+            ${this.hasSlotController.test("actions") ? x`<div class="accordion__actions-divider-container">
+                  <dsa-divider
+                    vertical
+                    class="accordion__actions-divider"
+                  ></dsa-divider>
+                </div>` : ""}
+          </div>
+          <div part="summary-icon" class="accordion__summary-icon">
+            <dsa-icon
+              class="accordion__expand-icon"
+              name=${expandIconName}
+              library="system"
+            ></dsa-icon>
+
+            <dsa-icon
+              class="accordion__collapse-icon"
+              name=${collapseIconName}
+              library="system"
+            ></dsa-icon>
+          </div>
+        </div>
+
+        <div class="accordion__body">
+          <slot
+            part="content"
+            id="content"
+            class="accordion__content"
+            aria-labelledby="header"
+          ></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+DSAAccordion.styles = accordion_styles_default;
+__decorateClass([
+  e(".accordion")
+], DSAAccordion.prototype, "accordion", 2);
+__decorateClass([
+  e(".accordion__header-button")
+], DSAAccordion.prototype, "headerButton", 2);
+__decorateClass([
+  e(".accordion__body")
+], DSAAccordion.prototype, "body", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSAAccordion.prototype, "open", 2);
+__decorateClass([
+  n()
+], DSAAccordion.prototype, "summary", 2);
+__decorateClass([
+  n({ attribute: "header-level", reflect: true })
+], DSAAccordion.prototype, "headerLevel", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSAAccordion.prototype, "disabled", 2);
+__decorateClass([
+  n({ reflect: true })
+], DSAAccordion.prototype, "icon", 2);
+__decorateClass([
+  n({ reflect: true })
+], DSAAccordion.prototype, "variant", 2);
+__decorateClass([
+  n({ reflect: true })
+], DSAAccordion.prototype, "size", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], DSAAccordion.prototype, "handleOpenChange", 1);
+DSAAccordion = __decorateClass([
+  t("dsa-accordion")
+], DSAAccordion);
+setDefaultAnimation("accordion.show", {
+  keyframes: [
+    { height: "0", opacity: "0" },
+    { height: "auto", opacity: "1" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+setDefaultAnimation("accordion.hide", {
+  keyframes: [
+    { height: "auto", opacity: "1" },
+    { height: "0", opacity: "0" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+
+export {
+  DSAAccordion
+};

package/cdn/chunks/chunk.2PCPJ2O2.js

@@ -0,0 +1,67 @@
+import {
+  component_styles_default
+} from "./chunk.MQAAYEM3.js";
+import {
+  i
+} from "./chunk.UKK3NS3L.js";
+
+// src/components/navbar-link/navbar-link.styles.ts
+var navbar_link_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  .navbar-link {
+    display: flex;
+    align-items: center;
+    gap: var(--dsa-spacing-4);
+    border-radius: 0;
+    background-color: var(--dsa-wc-button-navigation-on-base-color);
+    border: none;
+    font: var(--dsa-wc-navbar-font);
+    color: var(--dsa-wc-button-navigation-on-base-font-color);
+    text-decoration: none;
+  }
+  .navbar-link:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: -3px;
+  }
+  .navbar-link:hover {
+    background-color: var(--dsa-wc-navbar-button-background-hover);
+  }
+
+  /*
+   * Desktop 
+   */
+  .navbar-link--desktop {
+    height: var(--dsa-wc-navbar-button-height-desktop);
+    border-bottom: 1px solid transparent;
+    padding: var(--dsa-wc-navbar-button-padding-desktop);
+  }
+  .navbar-link--desktop[aria-current] {
+    border-bottom: var(--dsa-wc-navbar-button-border-bottom-active);
+  }
+
+  /* 
+  * Mobile 
+  */
+  .navbar-link--mobile {
+    width: 100%;
+    min-height: var(--dsa-wc-navbar-button-height-mobile);
+    padding: var(--dsa-wc-navbar-link-padding-mobile);
+  }
+  /* On mobile, imitate menu navigation item */
+  .navbar-link--mobile[aria-current] {
+    color: var(--dsa-wc-menu-navigation-item-current-color);
+    background-color: var(
+      --dsa-wc-menu-navigation-item-current-background-color
+    );
+    font: var(--dsa-wc-menu-item-font-current);
+  }
+`;
+
+export {
+  navbar_link_styles_default
+};

package/cdn/chunks/chunk.2UTZVF2R.js

@@ -0,0 +1,51 @@
+import {
+  component_styles_default
+} from "./chunk.MQAAYEM3.js";
+import {
+  i
+} from "./chunk.UKK3NS3L.js";
+
+// src/components/callout/callout.styles.ts
+var callout_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: contents;
+
+    /* For better DX, we'll reset the margin here so the base part can inherit it */
+    margin: 0;
+  }
+
+  .callout {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    border-left: var(--dsa-wc-callout-border-left);
+    border-radius: var(--dsa-wc-callout-border-radius);
+    font: var(--dsa-wc-callout-message-font);
+    color: var(--dsa-wc-callout-message-color);
+    padding: var(--dsa-wc-callout-padding);
+    margin: inherit;
+    background-color: var(--dsa-wc-callout-default-background-color);
+  }
+
+  .callout__title {
+    font: var(--dsa-wc-callout-title-font);
+    word-wrap: break-word;
+    color: var(--dsa-wc-callout-title-color);
+  }
+
+  .callout__message {
+    word-wrap: break-word;
+  }
+
+  .callout__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-wc-callout-text-gap);
+  }
+`;
+
+export {
+  callout_styles_default
+};