@ds-autonomie/web-components 2.5.1 → 2.7.0

package/cdn/chunks/chunk.5HO72MU3.js

@@ -0,0 +1,189 @@
+import {
+  component_styles_default
+} from "./chunk.B5IB4265.js";
+import {
+  i
+} from "./chunk.R7BJEFEU.js";
+
+// src/components/accordion/accordion.styles.ts
+var accordion_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  .accordion {
+    border: solid 1px var(--dsa-wc-accordion-border-color);
+    border-radius: var(--dsa-wc-accordion-border-radius);
+    background-color: var(--dsa-wc-accordion-background-color);
+    font: var(--dsa-wc-accordion-font);
+    color: var(--dsa-wc-accordion-color);
+    overflow-anchor: none;
+  }
+
+  .accordion--disabled {
+    color: var(--dsa-wc-accordion-disabled-color);
+    border-color: var(--dsa-color-accordion-disabled-border);
+  }
+
+  .accordion--filled {
+    background-color: var(--dsa-wc-accordion-filled-background-color);
+    border-color: transparent;
+  }
+
+  .accordion--disabled.accordion--filled {
+    color: var(--dsa-wc-accordion-filled-disabled-color);
+    background-color: var(--dsa-wc-accordion-filled-disabled-background-color);
+  }
+
+  /* Header */
+  .accordion__header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    border-radius: var(--dsa-wc-accordion-header-border-radius);
+  }
+
+  .accordion__header-button {
+    margin-right: auto;
+    padding: var(--dsa-wc-accordion-padding);
+    user-select: none;
+    cursor: pointer;
+    z-index: 5;
+  }
+  .accordion__header-button::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+
+  .accordion--disabled .accordion__header-button {
+    cursor: not-allowed;
+  }
+
+  /* Hover and focus states */
+  .accordion:not(.accordion--disabled, .accordion--filled):has(
+      .accordion__header-button:hover
+    ) {
+    border-color: var(--dsa-wc-accordion-hover-border-color);
+  }
+
+  .accordion:not(.accordion--open):not(.accordion--disabled)
+    .accordion__header:has(.accordion__header-button:hover),
+  .accordion:not(.accordion--open)
+    .accordion__header:has(.accordion__header-button:focus-visible) {
+    border-radius: var(--dsa-wc-accordion-closed-header-hover-border-radius);
+  }
+
+  .accordion:not(.accordion--disabled)
+    .accordion__header:has(.accordion__header-button:hover),
+  .accordion__header:has(.accordion__header-button:focus-visible) {
+    border-radius: var(--dsa-wc-accordion-header-hover-border-radius);
+    background-color: var(--dsa-wc-accordion-header-hover-background-color);
+  }
+
+  .accordion__header:has(.accordion__header-button:focus-visible) {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+
+  .accordion__header-button:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+
+  /* Summary */
+  .accordion__summary-container {
+    display: contents;
+  }
+
+  .accordion__summary {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    font: var(--dsa-wc-accordion-summary-font);
+    padding: var(--dsa-wc-accordion-summary-padding);
+  }
+
+  .accordion--small .accordion__summary {
+    font: var(--dsa-wc-accordion-small-summary-font);
+    padding: 0;
+  }
+
+  .accordion__actions {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--dsa-spacing-12);
+    z-index: 10;
+  }
+
+  /* Summary icon */
+  .accordion__summary-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    color: var(--dsa-wc-accordion-icon-color);
+    transition: var(--dsa-wc-transition-medium) rotate ease;
+    font-size: var(--dsa-wc-accordion-icon-size);
+    padding: var(--dsa-wc-accordion-padding);
+    color: inherit;
+  }
+
+  .accordion--small .accordion__summary-icon {
+    font-size: var(--dsa-wc-accordion-small-icon-size);
+  }
+
+  .accordion--disabled .accordion__summary-icon {
+    color: var(--dsa-wc-accordion-disabled-icon-color);
+  }
+
+  .accordion--chevron .accordion__summary-icon {
+    rotate: 90deg;
+  }
+
+  .accordion--rtl.accordion--chevron .accordion__summary-icon {
+    rotate: -90deg;
+  }
+
+  .accordion--open.accordion--chevron .accordion__summary-icon {
+    rotate: -90deg;
+  }
+
+  .accordion--open.accordion--rtl.accordion--chevron .accordion__summary-icon {
+    rotate: 90deg;
+  }
+
+  .accordion--open .accordion__expand-icon,
+  .accordion:not(.accordion--open) .accordion__collapse-icon {
+    display: none;
+  }
+
+  /* Body */
+  .accordion:not(.accordion--disabled):has(.accordion__header-button:hover)
+    .accordion__body {
+    border-color: transparent;
+  }
+
+  .accordion__body {
+    overflow: hidden;
+    border-top: solid 1px var(--dsa-wc-accordion-border-color);
+  }
+
+  .accordion--disabled .accordion__body {
+    border-color: var(--dsa-color-accordion-disabled-border);
+  }
+
+  .accordion--filled .accordion__body {
+    border-color: transparent;
+  }
+
+  .accordion__content {
+    display: block;
+    padding: var(--dsa-wc-accordion-padding);
+  }
+`;
+
+export {
+  accordion_styles_default
+};

package/cdn/chunks/chunk.5JPERG6R.js

@@ -0,0 +1,46 @@
+import {
+  component_styles_default
+} from "./chunk.B5IB4265.js";
+import {
+  i
+} from "./chunk.R7BJEFEU.js";
+
+// src/components/footer-sitemap-item/footer-sitemap-item.styles.ts
+var footer_sitemap_item_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  :host ::slotted(*) {
+    font: inherit;
+    font-size: inherit;
+    color: var(--dsa-color-text-on-layer-primary);
+    text-decoration: none;
+  }
+
+  ::slotted(*:hover) {
+    border-bottom-style: solid;
+    border-bottom-width: var(--dsa-wc-link-underline-thickness);
+    color: var(--dsa-color-text-on-layer-primary);
+  }
+
+  ::slotted(*:visited) {
+    color: var(--dsa-wc-link-visited-on-base-color);
+  }
+
+  ::slotted(*:active) {
+    color: var(--dsa-wc-link-active-on-base-color);
+  }
+  
+  ::slotted(*:focus-visible) {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+    border-radius: var(--dsa-wc-focus-ring-radius);
+  })
+`;
+
+export {
+  footer_sitemap_item_styles_default
+};

package/cdn/chunks/chunk.5X7YKTAF.js

@@ -0,0 +1,216 @@
+import {
+  component_styles_default
+} from "./chunk.B5IB4265.js";
+import {
+  i
+} from "./chunk.R7BJEFEU.js";
+
+// src/components/header/header.styles.ts
+var header_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+    --internal-header-padding-inline: var(
+      --header-padding-inline,
+      var(--dsa-wc-header-padding-x)
+    );
+  }
+
+  [part~='base'] {
+    background: var(--dsa-wc-header-background);
+    box-shadow: var(--dsa-wc-header-box-shadow);
+  }
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  .external-links__container {
+    display: none;
+    justify-content: center;
+    padding-inline: var(--internal-header-padding-inline);
+  }
+  .header-main__container {
+    display: flex;
+    justify-content: center;
+    padding-inline: var(--internal-header-padding-inline);
+  }
+
+  [part~='external-links'],
+  [part~='main'] {
+    width: 100%;
+    /* stylelint-disable-next-line */
+    max-width: var(--header-max-width);
+  }
+
+  [part~='main'] {
+    width: 100%;
+    display: grid;
+    grid-template:
+      'firstLogo actions'
+      / var(--dsa-wc-header-logo-width-mobile) auto;
+    grid-row-gap: var(--dsa-spacing-8);
+    grid-column-gap: var(--dsa-spacing-16);
+    padding-block: var(--dsa-wc-header-main-padding-y);
+  }
+  .has-brand {
+    grid-template:
+      'firstLogo actions'
+      'brand brand'
+      / var(--dsa-wc-header-logo-width-mobile) auto;
+  }
+
+  [part~='first-logo'] {
+    grid-area: firstLogo;
+  }
+  .logo-link {
+    display: inline-flex;
+    width: 100%;
+    height: 100%;
+  }
+  .logo-link:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+    border-radius: var(--dsa-wc-focus-ring-radius);
+  }
+
+  [part~='brand'] {
+    display: none;
+  }
+  .has-brand [part~='brand'] {
+    display: flex;
+    align-items: center;
+    gap: var(--dsa-spacing-16);
+    padding-top: var(--dsa-spacing-8);
+    border-top: 1px solid var(--dsa-color-divider-background);
+    grid-area: brand;
+    flex-shrink: 0;
+  }
+
+  .logo {
+    display: flex;
+    justify-content: center;
+    width: var(--dsa-wc-header-logo-width-mobile);
+    height: var(--dsa-wc-header-logo-height-mobile);
+  }
+
+  .site-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--dsa-spacing-2);
+    min-height: var(--dsa-wc-header-logo-height-mobile);
+  }
+
+  [part~='site-name']::slotted(*) {
+    color: var(--dsa-wc-header-sitename-color);
+    font: var(--dsa-wc-header-sitename-font-mobile);
+    margin: 0;
+  }
+  [part~='baseline']::slotted(*) {
+    color: var(--dsa-wc-header-baseline-color);
+    font: var(--dsa-wc-header-baseline-font-mobile);
+    margin: 0;
+  }
+
+  [part~='actions'] {
+    grid-area: actions;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--dsa-spacing-16);
+    min-height: var(--dsa-wc-header-logo-height-mobile);
+  }
+
+  [part~='search'] {
+    flex: 1;
+  }
+
+  .header--search-expanded [part~='navigation'] {
+    display: none;
+  }
+
+  /* Mobile-specific styles */
+
+  .header--mobile .header--search-expanded {
+    display: block;
+  }
+
+  .header--mobile .header--search-expanded [part~='first-logo'],
+  .header--mobile .header--search-expanded [part~='brand'] {
+    display: none;
+  }
+
+  /* Desktop-specific styles */
+
+  .header--desktop {
+    --internal-header-padding-inline: var(
+      --header-padding-inline,
+      var(--dsa-wc-header-medium-padding-x)
+    );
+  }
+
+  .header--desktop .external-links__container {
+    display: flex;
+    border-bottom: 1px solid var(--dsa-color-divider-background);
+  }
+
+  .header--desktop [part~='external-links'] {
+    display: flex;
+    justify-content: end;
+    padding-block: var(--dsa-wc-header-external-links-padding-y);
+  }
+
+  .header--desktop [part~='main'] {
+    padding-block: var(--dsa-wc-header-main-medium-padding-y);
+    display: flex;
+    align-items: center;
+  }
+
+  .header--desktop .has-brand [part~='brand'] {
+    gap: var(--dsa-spacing-32);
+    padding-top: 0;
+    border: none;
+  }
+
+  .header--desktop .logo {
+    width: var(--dsa-wc-header-logo-width-desktop);
+    height: var(--dsa-wc-header-logo-height-desktop);
+  }
+
+  .header--desktop .logo.logo-large {
+    width: var(--dsa-wc-header-logo-width-desktop-large);
+    height: var(--dsa-wc-header-logo-height-desktop-large);
+  }
+
+  .header--desktop .site-info {
+    gap: var(--dsa-spacing-4);
+  }
+
+  .header--desktop [part~='site-name']::slotted(*) {
+    font: var(--dsa-wc-header-sitename-font-desktop);
+  }
+
+  .header--desktop [part~='baseline']::slotted(*) {
+    font: var(--dsa-wc-header-baseline-font-desktop);
+  }
+
+  .header--desktop [part~='actions'] {
+    gap: var(--dsa-spacing-32);
+  }
+
+  @media only screen and (min-width: 1440px) {
+    :host {
+      --internal-header-padding-inline: var(
+        --header-padding-inline,
+        var(--dsa-wc-header-x-large-padding-x)
+      );
+    }
+  }
+`;
+
+export {
+  header_styles_default
+};

package/cdn/chunks/chunk.63KH72XK.js

@@ -0,0 +1,122 @@
+import {
+  navbar_styles_default
+} from "./chunk.U6CQ6QM3.js";
+import {
+  watch
+} from "./chunk.4FQJ3QJK.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  r,
+  t
+} from "./chunk.JIQUSHGZ.js";
+import {
+  x
+} from "./chunk.7HUC6BF3.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/navbar/navbar.ts
+var MENU_TAG = "dsa-navbar-menu";
+var LINK_TAG = "dsa-navbar-link";
+var DSANavbar = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.currentOpenMenu = null;
+    this.mobile = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  handleSlotChange() {
+    this.getAllChildren().forEach((el) => {
+      el.mobile = this.mobile;
+    });
+  }
+  handleMobileChange() {
+    this.getAllChildren().forEach((el) => {
+      el.mobile = this.mobile;
+      el.classList.remove("hidden");
+      if (this.isNavbarMenu(el)) {
+        el.open = false;
+      }
+    });
+  }
+  handleMenuShow(event) {
+    if (!this.mobile) return;
+    const target = event.target;
+    const menu = target.closest(MENU_TAG);
+    if (menu) {
+      this.currentOpenMenu = menu;
+    }
+  }
+  handleMenuHide() {
+    if (!this.mobile) return;
+    if (!this.getAllMenus().some((el) => el.open)) {
+      this.currentOpenMenu = null;
+    }
+  }
+  getAllChildren() {
+    return [
+      ...this.querySelectorAll(MENU_TAG),
+      ...this.querySelectorAll(LINK_TAG)
+    ];
+  }
+  getAllMenus() {
+    return [...this.querySelectorAll(MENU_TAG)];
+  }
+  isNavbarMenu(el) {
+    return el.tagName.toLowerCase() === MENU_TAG;
+  }
+  render() {
+    if (this.mobile) {
+      this.getAllChildren().forEach((el) => {
+        if (this.currentOpenMenu === null || el === this.currentOpenMenu) {
+          el.classList.remove("hidden");
+        } else {
+          el.classList.add("hidden");
+          if (this.isNavbarMenu(el)) {
+            el.open = false;
+          }
+        }
+      });
+    }
+    return x`
+      <slot
+        role="list"
+        class="navbar__list"
+        @slotchange=${this.handleSlotChange}
+        @dsa-show=${this.handleMenuShow}
+        @dsa-hide=${this.handleMenuHide}
+      ></slot>
+    `;
+  }
+};
+DSANavbar.styles = navbar_styles_default;
+__decorateClass([
+  e("nav")
+], DSANavbar.prototype, "navbar", 2);
+__decorateClass([
+  e("slot")
+], DSANavbar.prototype, "defaultSlot", 2);
+__decorateClass([
+  r()
+], DSANavbar.prototype, "allMenus", 2);
+__decorateClass([
+  r()
+], DSANavbar.prototype, "currentOpenMenu", 2);
+__decorateClass([
+  n({ type: Boolean })
+], DSANavbar.prototype, "mobile", 2);
+__decorateClass([
+  watch("mobile")
+], DSANavbar.prototype, "handleMobileChange", 1);
+DSANavbar = __decorateClass([
+  t("dsa-navbar")
+], DSANavbar);
+
+export {
+  DSANavbar
+};