@ds-autonomie/web-components 1.5.0 → 1.6.0

package/dist/chunks/{chunk.P7QMP76I.js → chunk.HDSA2CY2.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.BNJQHJKO.js → chunk.KFZV2L7L.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.2DGAEK66.js";
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.CWD6PMVD.js → chunk.KGPFHLUW.js}

@@ -17,7 +17,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/chunk.KUXAIXES.js

@@ -0,0 +1,69 @@
+// src/components/error-message-panel/error-message-panel.styles.ts
+import { css } from "lit";
+var error_message_panel_styles_default = css`
+  [part~='base'] {
+    padding: 0 var(--dsa-wc-error-message-panel-container-x-padding);
+    background: var(--dsa-wc-error-message-panel-container-background-color);
+  }
+
+  .error-message-panel {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--dsa-wc-error-message-panel-y-padding) 0;
+    text-align: center;
+    gap: var(--dsa-spacing-24);
+  }
+
+  .top-left-quarter-circle {
+    display: flex;
+    justify-content: flex-start;
+  }
+
+  .bottom-right-quarter-circle {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  [part~='title'],
+  [part~='title']::slotted(*) {
+    font: var(--dsa-wc-error-message-panel-title-font);
+    color: var(--dsa-wc-error-message-panel-title-color);
+    margin: 0 !important;
+  }
+
+  [part~='error-code'] {
+    display: none;
+  }
+
+  .error-message-panel--has-error-code [part~='error-code'] {
+    display: block;
+    font: var(--dsa-wc-error-message-panel-error-code-font);
+    color: var(--dsa-wc-error-message-panel-error-code-color);
+    margin: 0;
+  }
+
+  [part~='action'] {
+    display: none;
+  }
+
+  .error-message-panel--has-action [part~='action'] {
+    display: block;
+  }
+
+  [part~='description'] {
+    display: none;
+  }
+
+  .error-message-panel--has-description [part~='description'] {
+    display: block;
+    font: var(--dsa-wc-error-message-panel-description-font);
+    color: var(--dsa-wc-error-message-panel-description-color);
+    margin: 0;
+  }
+`;
+
+export {
+  error_message_panel_styles_default
+};

package/dist/chunks/{chunk.VRU3XH45.js → chunk.M3FN3PFT.js}

@@ -2,7 +2,7 @@ import {
   getIconLibrary,
   unwatchIcon,
   watchIcon
-} from "./chunk.7J7CS3BK.js";
+} from "./chunk.O2PIWM25.js";
 import {
   requestIcon
 } from "./chunk.23TOS4ZE.js";

package/dist/chunks/{chunk.SCNCYZ35.js → chunk.M7UZ33WG.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.IGYXUK7A.js";
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.IH3JU5S6.js → chunk.NMOENRSD.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.ZI2RZQPZ.js → chunk.NQSQUH4H.js}

@@ -1,15 +1,15 @@
-import {
-  getStepIcon
-} from "./chunk.CCTWXABH.js";
 import {
   step_styles_default
 } from "./chunk.DQNPP74X.js";
+import {
+  getStepIcon
+} from "./chunk.CCTWXABH.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.7J7CS3BK.js → chunk.O2PIWM25.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.RDGMZ5XB.js";
 import {
   library_system_default
-} from "./chunk.I33L3NO6.js";
+} from "./chunk.RB6TMBWW.js";
 
 // src/components/icon/library.ts
 var registry = [library_default_default, library_system_default];

package/dist/chunks/chunk.Q62BRBYD.js

@@ -0,0 +1,68 @@
+import {
+  download_card_styles_default
+} from "./chunk.WI3DWLXW.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/download-card/download-card.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var DSADownloadCard = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.href = "";
+  }
+  handleFocus() {
+    this.emit("dsa-focus");
+  }
+  handleBlur() {
+    this.emit("dsa-blur");
+  }
+  render() {
+    return html`
+      <div part="base">
+        <slot name="image" part="image"></slot>
+        <div part="content">
+          <a
+            part="link"
+            download
+            href=${this.href}
+            @focus=${this.handleFocus}
+            @blur=${this.handleBlur}
+          >
+            <slot></slot>
+          </a>
+          ${this.description ? html` <p part="description">${this.description}</p> ` : ""}
+          <p part="document-info">
+            ${this.format}${this.format && this.documentSize ? " - " : ""}${this.documentSize}
+          </p>
+        </div>
+        <dsa-icon part="icon" name="download" library="system"></dsa-icon>
+      </div>
+    `;
+  }
+};
+DSADownloadCard.styles = download_card_styles_default;
+__decorateClass([
+  property()
+], DSADownloadCard.prototype, "href", 2);
+__decorateClass([
+  property()
+], DSADownloadCard.prototype, "description", 2);
+__decorateClass([
+  property()
+], DSADownloadCard.prototype, "format", 2);
+__decorateClass([
+  property({ attribute: "documentsize" })
+], DSADownloadCard.prototype, "documentSize", 2);
+DSADownloadCard = __decorateClass([
+  customElement("dsa-download-card")
+], DSADownloadCard);
+
+export {
+  DSADownloadCard
+};

package/dist/chunks/{chunk.I33L3NO6.js → chunk.RB6TMBWW.js}

@@ -104,6 +104,11 @@ var icons = {
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
       <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"></path>
     </svg>
+  `,
+  download: `
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M18 15V18H6V15H4V18C4 19.1 4.9 20 6 20H18C19.1 20 20 19.1 20 18V15H18ZM17 11L15.59 9.59L13 12.17V4H11V12.17L8.41 9.59L7 11L12 16L17 11Z" fill="currentColor"/>
+</svg>
   `
 };
 var systemLibrary = {

package/dist/chunks/{chunk.D2QVNPSR.js → chunk.RJBMUBMI.js}

@@ -1,6 +1,3 @@
-import {
-  dialog_styles_default
-} from "./chunk.PQWQ42E2.js";
 import {
   Modal
 } from "./chunk.ISAFRNR2.js";
@@ -8,6 +5,9 @@ import {
   lockBodyScrolling,
   unlockBodyScrolling
 } from "./chunk.EMIT7S33.js";
+import {
+  dialog_styles_default
+} from "./chunk.PQWQ42E2.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -24,7 +24,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.T4H7RAXS.js → chunk.RV652CSU.js}

@@ -1,12 +1,12 @@
+import {
+  DSATreeItem
+} from "./chunk.6DSM44NV.js";
 import {
   tree_styles_default
 } from "./chunk.73T7TU6S.js";
-import {
-  DSATreeItem
-} from "./chunk.XV2S7PIY.js";
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.5QKVQDMN.js → chunk.RXBDBWWT.js}

@@ -10,7 +10,7 @@ import {
 
 // src/components/skip-link-item/skip-link-item.ts
 import { html } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, query } from "lit/decorators.js";
 var DSASkipLinkItem = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
@@ -22,6 +22,14 @@ var DSASkipLinkItem = class extends ShoelaceElement {
   handleBlur() {
     this.emit("dsa-blur");
   }
+  /** Sets focus on the anchor. */
+  focus(options) {
+    this.anchor.focus(options);
+  }
+  /** Removes focus from the anchor. */
+  blur() {
+    this.anchor.blur();
+  }
   render() {
     return html`
       <a
@@ -37,6 +45,9 @@ var DSASkipLinkItem = class extends ShoelaceElement {
   }
 };
 DSASkipLinkItem.styles = skip_link_item_styles_default;
+__decorateClass([
+  query("[part~='base']")
+], DSASkipLinkItem.prototype, "anchor", 2);
 __decorateClass([
   property()
 ], DSASkipLinkItem.prototype, "href", 2);

package/dist/chunks/{chunk.PCT24AYO.js → chunk.VLRL3RJT.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.SGIGGO5M.js";
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";

package/dist/chunks/chunk.WI3DWLXW.js

@@ -0,0 +1,99 @@
+// src/components/download-card/download-card.styles.ts
+import { css } from "lit";
+var download_card_styles_default = css`
+  [part~='base'] {
+    position: relative;
+    display: flex;
+    background-color: var(--dsa-wc-download-card-background-color);
+    border: var(--dsa-wc-download-card-border-width) solid
+      var(--dsa-wc-download-card-border-color);
+    border-left: 0;
+    padding-left: var(--dsa-wc-download-card-left-bar-width);
+    padding-right: var(--dsa-spacing-24);
+  }
+  [part~='base']:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: -1px;
+    bottom: -1px;
+    width: var(--dsa-wc-download-card-left-bar-width);
+    background: var(--dsa-wc-download-card-left-bar-color);
+  }
+  [part~='base']:hover {
+    border-color: var(--dsa-wc-download-card-border-color-hover);
+    box-shadow: var(--dsa-wc-download-card-box-shadow-hover);
+  }
+
+  [part~='image']::slotted(img) {
+    display: none;
+  }
+  @media only screen and (min-width: 600px) {
+    [part~='image']::slotted(img) {
+      display: unset;
+      width: 120px;
+    }
+  }
+
+  [part~='content'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-spacing-8);
+    padding: var(--dsa-spacing-24) var(--dsa-spacing-16);
+  }
+
+  [part~='link'] {
+    font: var(--dsa-wc-download-card-link-font);
+    color: var(--dsa-wc-download-card-link-color);
+    text-decoration: none;
+    outline: none;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+  [part~='link']:after {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+  [part~='link']:focus-visible:after {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+    border-radius: var(--dsa-wc-focus-ring-radius);
+  }
+
+  [part~='base']:has([part~='link']:active) {
+    border-color: var(--dsa-wc-download-card-border-color-active);
+  }
+
+  [part~='description'] {
+    font: var(--dsa-wc-download-card-description-font);
+    color: var(--dsa-wc-download-card-description-color);
+    margin: 0;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+  [part~='document-info'] {
+    font: var(--dsa-wc-download-card-document-info-font);
+    color: var(--dsa-wc-download-card-document-info-color);
+    margin: 0;
+  }
+
+  [part~='icon'] {
+    flex-shrink: 0;
+    align-self: center;
+    width: var(--dsa-wc-download-card-icon-size);
+    height: var(--dsa-wc-download-card-icon-size);
+    margin-inline-start: auto;
+    color: var(--dsa-wc-download-card-icon-color);
+  }
+`;
+
+export {
+  download_card_styles_default
+};

package/dist/chunks/{chunk.BGNHUCCD.js → chunk.WK3IHF2A.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

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

@@ -26,7 +26,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/chunk.X3FXKNLH.js

@@ -0,0 +1,92 @@
+import {
+  download_link_styles_default
+} from "./chunk.EVHNFCQF.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/download-link/download-link.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DSADownloadLink = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "base";
+    this.size = "medium";
+  }
+  handleFocus() {
+    this.emit("dsa-focus");
+  }
+  handleBlur() {
+    this.emit("dsa-blur");
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "document-link--x-large": this.size === "xlarge",
+      "document-link--large": this.size === "large",
+      "document-link--small": this.size === "small",
+      "document-link--x-small": this.size === "xsmall",
+      "document-link--2x-small": this.size === "2xsmall"
+    })}
+      >
+        <a
+          part="link"
+          class=${classMap({
+      link: true,
+      "link--on-layer": this.variant === "layer",
+      "link--on-contrasted": this.variant === "contrasted",
+      "link--floating-menu": this.variant === "floating"
+    })}
+          download
+          href=${this.href}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        >
+          <slot></slot>
+          <dsa-icon name="download" library="system"></dsa-icon>
+        </a>
+        <p
+          id="document-info"
+          class=${classMap({
+      "document-info": true,
+      "document-info--on-layer": this.variant === "layer",
+      "document-info--on-contrasted": this.variant === "contrasted",
+      "document-info--floating-menu": this.variant === "floating"
+    })}
+        >
+          ${this.format}${this.format && this.documentSize ? " - " : ""}${this.documentSize}
+        </p>
+      </div>
+    `;
+  }
+};
+DSADownloadLink.styles = download_link_styles_default;
+__decorateClass([
+  property()
+], DSADownloadLink.prototype, "href", 2);
+__decorateClass([
+  property()
+], DSADownloadLink.prototype, "format", 2);
+__decorateClass([
+  property({ attribute: "documentsize" })
+], DSADownloadLink.prototype, "documentSize", 2);
+__decorateClass([
+  property()
+], DSADownloadLink.prototype, "variant", 2);
+__decorateClass([
+  property()
+], DSADownloadLink.prototype, "size", 2);
+DSADownloadLink = __decorateClass([
+  customElement("dsa-download-link")
+], DSADownloadLink);
+
+export {
+  DSADownloadLink
+};

package/dist/chunks/{chunk.4XH7INOL.js → chunk.XQZX6LVO.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.BHLKMLHB.js → chunk.YS2LUMKB.js}

@@ -1,6 +1,6 @@
 import {
   accordion_styles_default
-} from "./chunk.LC54322H.js";
+} from "./chunk.FYTGBKGY.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.7BYKP4SA.js";
+} from "./chunk.CKDL37GT.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
@@ -30,6 +30,7 @@ import {
 import { html } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 var DSAAccordion = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
@@ -49,7 +50,7 @@ var DSAAccordion = class extends ShoelaceElement {
       } else {
         this.show();
       }
-      this.header.focus();
+      this.headerButton.focus();
     }
   }
   handleSummaryKeyDown(event) {
@@ -143,29 +144,35 @@ var DSAAccordion = class extends ShoelaceElement {
         <header
           part="header"
           id="header"
+          aria-level=${ifDefined(this.headerLevel)}
+          role=${this.headerLevel ? "heading" : "banner"}
           class="accordion__header"
-          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}
         >
-          <slot name="summary" part="summary" class="accordion__summary"
-            >${this.summary}</slot
+          <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 part="summary-icon" class="accordion__summary-icon">
-            <dsa-icon
-              class="accordion__expand-icon"
-              name=${expandIconName}
-            ></dsa-icon>
+            <span part="summary-icon" class="accordion__summary-icon">
+              <dsa-icon
+                class="accordion__expand-icon"
+                name=${expandIconName}
+              ></dsa-icon>
 
-            <dsa-icon
-              class="accordion__collapse-icon"
-              name=${collapseIconName}
-            ></dsa-icon>
+              <dsa-icon
+                class="accordion__collapse-icon"
+                name=${collapseIconName}
+              ></dsa-icon>
+            </span>
           </span>
         </header>
 
@@ -187,8 +194,8 @@ __decorateClass([
   query(".accordion")
 ], DSAAccordion.prototype, "accordion", 2);
 __decorateClass([
-  query(".accordion__header")
-], DSAAccordion.prototype, "header", 2);
+  query(".accordion__header-button")
+], DSAAccordion.prototype, "headerButton", 2);
 __decorateClass([
   query(".accordion__body")
 ], DSAAccordion.prototype, "body", 2);
@@ -198,6 +205,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], DSAAccordion.prototype, "summary", 2);
+__decorateClass([
+  property({ attribute: "header-level", reflect: true })
+], DSAAccordion.prototype, "headerLevel", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSAAccordion.prototype, "disabled", 2);

package/dist/chunks/{chunk.N5ZXUW7H.js → chunk.Z7QPOCQO.js}

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

package/dist/chunks/{chunk.DX25IW4S.js → chunk.ZC74GTBL.js}

@@ -28,6 +28,10 @@ var skip_links_styles_default = css`
     align-items: center;
     gap: var(--dsa-wc-skip-link-list-gap);
   }
+
+  .slot_links {
+    display: none;
+  }
 `;
 
 export {