@ds-autonomie/web-components 1.4.0 → 1.6.0

package/dist/chunks/{chunk.UQYPPFBJ.js → chunk.TMG7TJJO.js}

@@ -1,6 +1,6 @@
 import {
   checkbox_group_styles_default
-} from "./chunk.YY6AEXJK.js";
+} from "./chunk.HXH4JLAN.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -274,6 +274,7 @@ var DSACheckboxGroup = class extends ShoelaceElement {
                   @click=${this.handleCheckboxClick}
                   @slotchange=${this.handleSlotChange}
                   role="presentation"
+                  ?horizontal=${this.horizontal}
                 >
                   <slot></slot>
                 </dsa-internal-button-group>

package/dist/chunks/chunk.U24CXNHC.js

@@ -0,0 +1,38 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/skip-link-item/skip-link-item.styles.ts
+import { css } from "lit";
+var skip_link_item_styles_default = css`
+  ${component_styles_default}
+
+  .skip-link-item {
+    font: var(--dsa-wc-skip-link-item-font);
+    color: var(--dsa-wc-skip-link-item-color);
+    text-decoration: none;
+    padding: var(--dsa-wc-skip-link-item-padding);
+    border-radius: var(--dsa-wc-skip-link-item-radius);
+  }
+
+  .skip-link-item:focus {
+    outline: none;
+  }
+
+  .skip-link-item:active {
+    color: var(---dsa-wc-skip-link-item-color-active);
+  }
+
+  .skip-link-item:hover {
+    color: var(---dsa-wc-skip-link-item-color-hover);
+  }
+
+  .skip-link-item:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+`;
+
+export {
+  skip_link_item_styles_default
+};

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.XCG5TV7T.js → chunk.WLJH2IWB.js}

@@ -1,6 +1,6 @@
 import {
   select_styles_default
-} from "./chunk.D6DEGG4H.js";
+} from "./chunk.Z2QW2HUR.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.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.2HV2U4RQ.js → chunk.XRHDURFE.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.YDCBGMSA.js

@@ -0,0 +1,161 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/icon-button/icon-button.styles.ts
+import { css } from "lit";
+var icon_button_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    --padding: var(
+      --dsa-wc-internal-icon-button-padding,
+      var(--dsa-wc-icon-button-padding)
+    );
+    display: inline-block;
+  }
+
+  .icon-button {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    border: none;
+    border-radius: var(--dsa-wc-icon-button-border-radius);
+    font-size: inherit;
+    padding: var(--padding);
+    cursor: pointer;
+    transition: var(--dsa-wc-transition-x-fast) color;
+    -webkit-appearance: none;
+  }
+
+  .icon-button:focus {
+    outline: none;
+  }
+
+  .icon-button--disabled {
+    cursor: not-allowed;
+  }
+
+  .icon-button:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+    border-radius: var(--dsa-wc-focus-ring-radius);
+  }
+
+  .icon-button__icon {
+    pointer-events: none;
+  }
+
+  /*
+  * Primary
+  */
+  .icon-button--primary {
+    background-color: var(--dsa-wc-button-primary-on-base-color);
+    border-color: var(--dsa-wc-button-primary-on-base-color);
+    color: var(--dsa-wc-button-primary-on-base-font-color);
+  }
+  .icon-button--primary:hover:not(.icon-button--disabled) {
+    background-color: var(--dsa-wc-button-primary-on-base-hover-color);
+    border-color: var(--dsa-wc-button-primary-on-base-hover-color);
+    color: var(--dsa-wc-button-primary-on-base-hover-font-color);
+  }
+  .icon-button--primary:active:not(.icon-button--disabled) {
+    background-color: var(--dsa-wc-button-primary-on-base-active-color);
+    border-color: var(--dsa-wc-button-primary-on-base-active-color);
+    color: var(--dsa-wc-button-primary-on-base-active-font-color);
+  }
+  .icon-button--primary.icon-button--disabled {
+    background-color: var(--dsa-wc-button-primary-on-base-disabled-color);
+    border-color: var(--dsa-wc-button-primary-on-base-disabled-color);
+    color: var(--dsa-wc-button-primary-on-base-disabled-font-color);
+  }
+
+  /* Secondary */
+  .icon-button--secondary {
+    background-color: var(--dsa-wc-button-secondary-on-base-color);
+    border-color: var(--dsa-wc-button-secondary-on-base-color);
+    color: var(--dsa-wc-button-secondary-on-base-font-color);
+  }
+  .icon-button--secondary:hover:not(.icon-button--disabled) {
+    background-color: var(--dsa-wc-button-secondary-on-base-hover-color);
+    border-color: var(--dsa-wc-button-secondary-on-base-hover-color);
+    color: var(--dsa-wc-button-secondary-on-base-hover-font-color);
+  }
+  .icon-button--secondary:active:not(.icon-button--disabled) {
+    background-color: var(--dsa-wc-button-secondary-on-base-active-color);
+    border-color: var(--dsa-wc-button-secondary-on-base-active-color);
+    color: var(--dsa-wc-button-secondary-on-base-active-font-color);
+  }
+  .icon-button--secondary.icon-button--disabled {
+    background-color: var(--dsa-wc-button-secondary-on-base-disabled-color);
+    border-color: var(--dsa-wc-button-secondary-on-base-disabled-color);
+    color: var(--dsa-wc-button-secondary-on-base-disabled-font-color);
+  }
+
+  /* Tertiary */
+  .icon-button--tertiary {
+    background-color: var(--dsa-wc-button-tertiary-on-base-color);
+    border: none;
+    color: var(--dsa-wc-button-tertiary-on-base-font-color);
+  }
+  .icon-button--tertiary:hover:not(.icon-button--disabled) {
+    background-color: var(--dsa-wc-button-tertiary-on-base-hover-color);
+    color: var(--dsa-wc-button-tertiary-on-base-hover-font-color);
+  }
+  .icon-button--tertiary:active:not(.icon-button--disabled) {
+    background-color: var(--dsa-wc-button-tertiary-on-base-active-color);
+    color: var(--dsa-wc-button-tertiary-on-base-active-font-color);
+  }
+  .icon-button--tertiary.icon-button--disabled {
+    background-color: var(--dsa-wc-button-tertiary-on-base-disabled-color);
+    color: var(--dsa-wc-button-tertiary-on-base-disabled-font-color);
+  }
+
+  /* Danger */
+  .icon-button--danger {
+    background-color: var(--dsa-wc-button-danger-on-base-color);
+    border-color: var(--dsa-wc-button-danger-on-base-color);
+    color: var(--dsa-wc-button-danger-on-base-font-color);
+  }
+  .icon-button--danger:hover:not(.icon-button--disabled) {
+    background-color: var(--dsa-wc-button-danger-on-base-hover-color);
+    border-color: var(--dsa-wc-button-danger-on-base-hover-color);
+    color: var(--dsa-wc-button-danger-on-base-hover-font-color);
+  }
+  .icon-button--danger:active:not(.icon-button--disabled) {
+    background-color: var(--dsa-wc-button-danger-on-base-active-color);
+    border-color: var(--dsa-wc-button-danger-on-base-active-color);
+    color: var(--dsa-wc-button-danger-on-base-active-font-color);
+  }
+  .icon-button--danger.icon-button--disabled {
+    background-color: var(--dsa-wc-button-danger-on-base-disabled-color);
+    border-color: var(--dsa-wc-button-danger-on-base-disabled-color);
+    color: var(--dsa-wc-button-danger-on-base-disabled-font-color);
+  }
+
+  /* Default */
+  .icon-button--default {
+    background-color: var(--dsa-wc-button-navigation-on-base-color);
+    border-color: transparent;
+    color: var(--dsa-wc-button-navigation-on-base-font-color);
+  }
+  .icon-button--default:hover:not(.button--disabled) {
+    background-color: var(--dsa-wc-button-navigation-on-base-hover-color);
+    border-color: transparent;
+    color: var(--dsa-wc-button-navigation-on-base-hover-font-color);
+  }
+  .icon-button--default:active:not(.button--disabled) {
+    background-color: var(--dsa-wc-button-navigation-on-base-active-color);
+    border-color: transparent;
+    color: var(--dsa-wc-button-navigation-on-base-active-font-color);
+  }
+  .icon-button--default.button--disabled {
+    background-color: var(--dsa-wc-button-navigation-on-base-disabled-color);
+    border-color: transparent;
+    color: var(--dsa-wc-button-navigation-on-base-disabled-font-color);
+  }
+`;
+
+export {
+  icon_button_styles_default
+};

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.VRY3E2XG.js → chunk.YZ66DKLU.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.D6DEGG4H.js → chunk.Z2QW2HUR.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.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.ZC74GTBL.js

@@ -0,0 +1,39 @@
+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);
+  }
+
+  .slot_links {
+    display: none;
+  }
+`;
+
+export {
+  skip_links_styles_default
+};

package/dist/chunks/{chunk.NHYFVEGM.js → chunk.ZR7AGQFC.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/components/accordion/accordion.d.ts

@@ -19,7 +19,7 @@ export default class DSAAccordion extends ShoelaceElement {
     static styles: CSSResultGroup;
     private readonly localize;
     accordion: HTMLElement;
-    header: HTMLElement;
+    headerButton: HTMLElement;
     body: HTMLElement;
     /**
      * Indicates whether or not the accordion is open. You can toggle this attribute to show and hide the accordion, or you
@@ -28,6 +28,8 @@ export default class DSAAccordion extends ShoelaceElement {
     open: boolean;
     /** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */
     summary: string;
+    /** Optional aria-level of the accordion header */
+    headerLevel: 1 | 2 | 3 | 4 | 5 | 6;
     /** Disables the accordion so it can't be toggled. */
     disabled: boolean;
     /** The accordion's expand/collapse icon variant */