@ds-autonomie/web-components 2.4.0 → 2.5.0

package/dist/chunks/{chunk.KENYJWWA.js → chunk.6NGHRQYD.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.ISWFROYZ.js";
 import {
   LocalizeController
-} from "./chunk.YWHYMKYI.js";
+} from "./chunk.QADAWCTI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.4UC4W5Q5.js → chunk.6XCFILBM.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.YWHYMKYI.js";
+} from "./chunk.QADAWCTI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";
@@ -65,6 +65,21 @@ var DSATableContainer = class extends LoadingStateElement {
       this.showTableActions = true;
     }
   }
+  handleCaptionSlotChange() {
+    this.linkCaptionAndTable();
+  }
+  handleTableSlotChange() {
+    this.linkCaptionAndTable();
+  }
+  linkCaptionAndTable() {
+    const tableCaption = this.querySelector("dsa-table-caption");
+    const tableElement = this.querySelector("dsa-table");
+    if (!tableCaption || !tableElement || tableCaption.id || tableElement.getAttribute("aria-labelledby"))
+      return;
+    const randomId = Math.floor(Math.random() * 999999999).toString();
+    tableCaption.id = randomId;
+    tableElement.setAttribute("aria-labelledby", randomId);
+  }
   handleShowTableActions() {
     const actionBar = this.querySelector("dsa-table-action");
     const toolbar = this.querySelector("dsa-table-toolbar");
@@ -120,7 +135,11 @@ var DSATableContainer = class extends LoadingStateElement {
     const hasToolbar = this.hasSlotController.test("toolbar");
     const hasAction = this.hasSlotController.test("action");
     return html`
-      <slot part="caption" name="caption"></slot>
+      <slot
+        part="caption"
+        name="caption"
+        @slotchange=${this.handleCaptionSlotChange}
+      ></slot>
       <slot part="export" name="export"></slot>
       <div
         part="bar-container"
@@ -132,7 +151,11 @@ var DSATableContainer = class extends LoadingStateElement {
         <slot part="toolbar" name="toolbar"></slot>
         <slot part="action" name="action"></slot>
       </div>
-      <slot part="table" name="table"></slot>
+      <slot
+        part="table"
+        name="table"
+        @slotchange=${this.handleTableSlotChange}
+      ></slot>
       <slot part="pagination" name="pagination"></slot>
       <dsa-visually-hidden aria-live="polite" aria-atomic="true">
         ${this.showTableActions ? html`<span

package/dist/chunks/{chunk.UKZA4PJB.js → chunk.AATHH5ZK.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.HGR7A5FK.js";
 import {
   LocalizeController
-} from "./chunk.YWHYMKYI.js";
+} from "./chunk.QADAWCTI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.X4HFQ4MT.js → chunk.AB7T3PSN.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.HRIAHWFV.js";
 import {
   LocalizeController
-} from "./chunk.YWHYMKYI.js";
+} from "./chunk.QADAWCTI.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";

package/dist/chunks/chunk.ADUUYLJY.js

@@ -0,0 +1,79 @@
+import {
+  card_nav_item_styles_default
+} from "./chunk.3XTO3LV5.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
+import {
+  ShoelaceElement
+} from "./chunk.XZ5FE34T.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/card-nav-item/card-nav-item.ts
+import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { html, literal } from "lit/static-html.js";
+var DSACardNavItem = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "[default]");
+    this.href = "";
+    this.rel = "noreferrer noopener";
+    this.role = "listitem";
+  }
+  isLink() {
+    return this.href ? true : false;
+  }
+  render() {
+    const isLink = this.isLink();
+    const tag = isLink ? literal`a` : literal`button`;
+    if (!this.hasSlotController.test("[default]")) {
+      a11yWarning(
+        "<dsa-card-nav-item> requires slotted content for accessibility"
+      );
+    }
+    return html`
+      <${tag}
+        part="base"
+        class="card-nav-item"
+        href=${ifDefined(isLink ? this.href : void 0)}
+        target=${ifDefined(isLink ? this.target : void 0)}
+        download=${ifDefined(isLink ? this.download : void 0)}
+        rel=${ifDefined(isLink ? this.rel : void 0)}
+      >
+        <div class="card-nav-item__body">
+          <slot></slot>
+          <dsa-icon name="arrow_forward" class="card-nav-item__icon"></dsa-icon>
+      </div>
+      </${tag}>
+    `;
+  }
+};
+DSACardNavItem.styles = card_nav_item_styles_default;
+__decorateClass([
+  property()
+], DSACardNavItem.prototype, "href", 2);
+__decorateClass([
+  property()
+], DSACardNavItem.prototype, "target", 2);
+__decorateClass([
+  property()
+], DSACardNavItem.prototype, "rel", 2);
+__decorateClass([
+  property()
+], DSACardNavItem.prototype, "download", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSACardNavItem.prototype, "role", 2);
+DSACardNavItem = __decorateClass([
+  customElement("dsa-card-nav-item")
+], DSACardNavItem);
+
+export {
+  DSACardNavItem
+};

package/dist/chunks/{chunk.JRJB2DFE.js → chunk.AJCLNOPZ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.DX25IW4S.js";
 import {
   LocalizeController
-} from "./chunk.YWHYMKYI.js";
+} from "./chunk.QADAWCTI.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";

package/dist/chunks/{chunk.4SVX6VCY.js → chunk.ARDX2RVR.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk.DQI2JTKU.js";
 import {
   FilterBase
-} from "./chunk.MWWI3AU2.js";
+} from "./chunk.4VHQEXSY.js";
 import {
   getDateFromISO,
   getISOFormattedDate,

package/dist/chunks/{chunk.V4U5XMU7.js → chunk.B7LEFGX4.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.YWHYMKYI.js";
+} from "./chunk.QADAWCTI.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";

package/dist/chunks/{chunk.INFNQBQD.js → chunk.CPBWQ6BE.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.JA7YFGLI.js";
 import {
   LocalizeController
-} from "./chunk.YWHYMKYI.js";
+} from "./chunk.QADAWCTI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.VJJQFEZ2.js → chunk.DRFXWCPL.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk.7OLEA3GQ.js";
 import {
   FormControlLayout
-} from "./chunk.RVCSQIWF.js";
+} from "./chunk.MKTUAWNS.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
@@ -17,7 +17,7 @@ import {
 } from "./chunk.JA7YFGLI.js";
 import {
   LocalizeController
-} from "./chunk.YWHYMKYI.js";
+} from "./chunk.QADAWCTI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.IW4EYF6Z.js → chunk.DZVHKOGO.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.2LWUWDHO.js";
 import {
   LocalizeController
-} from "./chunk.YWHYMKYI.js";
+} from "./chunk.QADAWCTI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.QG62LWYX.js → chunk.EEK6ZGS2.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.S3NI7NKU.js";
 
 // src/components/card/card.ts
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { html, literal } from "lit/static-html.js";
@@ -69,9 +69,6 @@ var DSACard = class extends ShoelaceElement {
   }
 };
 DSACard.styles = card_styles_default;
-__decorateClass([
-  state()
-], DSACard.prototype, "tag", 2);
 __decorateClass([
   property()
 ], DSACard.prototype, "href", 2);

package/dist/chunks/{chunk.G3UE6SMI.js → chunk.EQDAZLA2.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.O4MZVDWB.js";
 import {
   FormControlLayout
-} from "./chunk.RVCSQIWF.js";
+} from "./chunk.MKTUAWNS.js";
 import {
   combobox_styles_default
 } from "./chunk.YJEHKLDJ.js";
@@ -29,7 +29,7 @@ import {
 } from "./chunk.HGR7A5FK.js";
 import {
   LocalizeController
-} from "./chunk.YWHYMKYI.js";
+} from "./chunk.QADAWCTI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";
@@ -218,7 +218,6 @@ var DSACombobox = class extends FormControlLayout {
     }
   }
   handleDefaultSlotChange() {
-    this.resetDisplayedOptionsCount();
     if (customElements.get(OPTION_TAG)) {
       this.allOptions = this.getAllOptions();
       this.filterOptions(this.displayLabel);
@@ -232,6 +231,7 @@ var DSACombobox = class extends FormControlLayout {
     } else {
       customElements.whenDefined(OPTION_TAG).then(() => this.handleDefaultSlotChange());
     }
+    this.resetDisplayedOptionsCount();
   }
   handleTagRemove(event, option) {
     event.stopPropagation();
@@ -434,8 +434,11 @@ var DSACombobox = class extends FormControlLayout {
         else if (currentOptionIndex < this.displayedOptionsCount - 1) {
           this.setCurrentOption(this.filteredOptions[currentOptionIndex + 1]);
         } else if (this.filteredOptions.length > this.displayedOptionsCount) {
-          this.setCurrentOption(void 0);
-          if (this.seeMoreOption) this.seeMoreOption.current = true;
+          if (this.seeMoreOption) {
+            this.setCurrentOption(this.seeMoreOption);
+          } else {
+            this.setCurrentOption(void 0);
+          }
         }
         break;
       case "ArrowUp":

package/dist/chunks/{chunk.E7S4C6P7.js → chunk.ETG5DAHF.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.HGR7A5FK.js";
 import {
   LocalizeController
-} from "./chunk.YWHYMKYI.js";
+} from "./chunk.QADAWCTI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.SA7GMM2I.js → chunk.EWOJ3XVB.js}

@@ -1,9 +1,9 @@
-import {
-  FilterBase
-} from "./chunk.MWWI3AU2.js";
 import {
   filter_counter_styles_default
 } from "./chunk.WODSQYKQ.js";
+import {
+  FilterBase
+} from "./chunk.4VHQEXSY.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.DR3IPTYE.js → chunk.EY2LRNGD.js}

@@ -3,14 +3,14 @@ import {
 } from "./chunk.H7ZLX7SO.js";
 import {
   FormControlLayout
-} from "./chunk.RVCSQIWF.js";
+} from "./chunk.MKTUAWNS.js";
+import {
+  defaultValue
+} from "./chunk.CMJ2SRTL.js";
 import {
   getDateFromISO,
   getISOFormattedDate
 } from "./chunk.YBWQADCH.js";
-import {
-  defaultValue
-} from "./chunk.CMJ2SRTL.js";
 import {
   FormControlController
 } from "./chunk.JA7YFGLI.js";
@@ -27,7 +27,7 @@ import {
 } from "./chunk.HGR7A5FK.js";
 import {
   LocalizeController
-} from "./chunk.YWHYMKYI.js";
+} from "./chunk.QADAWCTI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.6SDBUBGE.js → chunk.FKOYZI2V.js}

@@ -64,6 +64,8 @@ var header_styles_default = css`
   }
   .logo-link {
     display: inline-flex;
+    width: 100%;
+    height: 100%;
   }
   .logo-link:focus-visible {
     outline: var(--dsa-wc-focus-ring);

package/dist/chunks/{chunk.IHTWK22H.js → chunk.G5ZFFB2V.js}

@@ -1,12 +1,15 @@
 import {
   menu_item_styles_default
-} from "./chunk.LUPOBRAQ.js";
+} from "./chunk.SDT5BB26.js";
 import {
   getTextContent
 } from "./chunk.YIY5RM53.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";
@@ -93,11 +96,8 @@ var DSAMenuItem = class extends ShoelaceElement {
         target=${ifDefined(this.type === "link" ? this.target : void 0)}
         rel=${ifDefined(this.type === "link" ? this.rel : void 0)}
         download=${ifDefined(this.type === "link" ? this.download : void 0)}
-        aria-current=${ifDefined(
-      this.type === "link" ? this.current : void 0
-    )}
+        aria-current=${ifDefinedAndNotEmpty(this.current)}
         tabindex=${ifDefined(this.disabled ? "-1" : void 0)}
-    
       >
         <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
 

package/dist/chunks/{chunk.XNVSET6H.js → chunk.I4XFUHWM.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.YWHYMKYI.js";
+} from "./chunk.QADAWCTI.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";

package/dist/chunks/{chunk.O4HVYU6G.js → chunk.IE7IGJZB.js}

@@ -1,17 +1,17 @@
+import {
+  defaultValue
+} from "./chunk.CMJ2SRTL.js";
 import {
   getDateFromISO,
   isValidDate,
   monthLength
 } from "./chunk.YBWQADCH.js";
-import {
-  defaultValue
-} from "./chunk.CMJ2SRTL.js";
 import {
   FormControlController
 } from "./chunk.JA7YFGLI.js";
 import {
   LocalizeController
-} from "./chunk.YWHYMKYI.js";
+} from "./chunk.QADAWCTI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.TRQQN4AO.js → chunk.IICLN6L3.js}

@@ -5,10 +5,10 @@ import {
 } from "./chunk.IONY2GZF.js";
 import {
   input_time_styles_default
-} from "./chunk.M4H37WUH.js";
+} from "./chunk.54CFE45F.js";
 import {
   FormControlLayout
-} from "./chunk.RVCSQIWF.js";
+} from "./chunk.MKTUAWNS.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
@@ -31,7 +31,7 @@ import {
 } from "./chunk.HGR7A5FK.js";
 import {
   LocalizeController
-} from "./chunk.YWHYMKYI.js";
+} from "./chunk.QADAWCTI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";
@@ -62,6 +62,7 @@ var DSAInputTime = class extends FormControlLayout {
     this.clearable = false;
     this.min = "00:00";
     this.max = "23:59";
+    this.step = 60;
   }
   /** Gets the validity state object */
   get validity() {
@@ -258,6 +259,16 @@ var DSAInputTime = class extends FormControlLayout {
     this.isTimePickerOpen = false;
     return await waitForEvent(this, "dsa-after-hide");
   }
+  /** Passes the stepUp method to the native input element */
+  stepUp(stepNumber) {
+    this.nativeInput.stepUp(stepNumber);
+    this.value = this.nativeInput.value;
+  }
+  /** Passes the stepDown method to the native input element */
+  stepDown(stepNumber) {
+    this.nativeInput.stepDown(stepNumber);
+    this.value = this.nativeInput.value;
+  }
   /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
   checkValidity() {
     return this.nativeInput.checkValidity();
@@ -365,20 +376,18 @@ var DSAInputTime = class extends FormControlLayout {
     var _a;
     const minTimeValues = timeStringToObject(this.min);
     const maxTimeValues = timeStringToObject(this.max);
-    const timeStepValue = this.step ? this.step : 60;
     if (!minTimeValues || !maxTimeValues) {
       throw new Error("Invalid min or max time values");
     }
     const selectedTimeObject = (_a = timeStringToObject(this.value)) != null ? _a : minTimeValues;
-    const hoursStep = timeStepValue > 3600 ? Math.floor(timeStepValue / 3600) : 1;
-    const minutesStep = timeStepValue > 60 ? Math.floor(timeStepValue % 3600 / 60) : 1;
-    const secondsStep = timeStepValue % 60;
+    const hoursStep = this.step > 3600 ? Math.floor(this.step / 3600) : 1;
     const displayedHours = Array.from(
       { length: 24 },
       (_, index) => index
     ).filter((index) => {
       return index >= minTimeValues.hours && index <= maxTimeValues.hours && index % hoursStep === 0;
     });
+    const minutesStep = this.step > 60 ? Math.floor(this.step % 3600 / 60) : 1;
     const displayedMinutes = Array.from(
       { length: 60 },
       (_, index) => index
@@ -389,8 +398,10 @@ var DSAInputTime = class extends FormControlLayout {
       if (selectedTimeObject.hours === (maxTimeValues == null ? void 0 : maxTimeValues.hours)) {
         return index <= (maxTimeValues == null ? void 0 : maxTimeValues.minutes) && index % minutesStep === 0;
       }
-      return timeStepValue > 60 ? index % minutesStep === 0 : true;
+      return this.step > 60 ? index % minutesStep === 0 : true;
     });
+    if (displayedMinutes.length === 0) displayedMinutes[0] = 0;
+    const secondsStep = this.step % 60;
     const displayedSeconds = Array.from(
       { length: 60 },
       (_, index) => index
@@ -455,12 +466,12 @@ var DSAInputTime = class extends FormControlLayout {
     `;
   }
   renderInput() {
+    var _a;
     const hasLabelSlot = this.hasSlotController.test("label");
     const hasPrefixIcon = this.hasSlotController.test("prefix");
     const hasSuffixIcon = this.hasSlotController.test("suffix");
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasClearIcon = this.clearable && !this.disabled && !this.readonly && this.value.length > 0;
-    const hasSeconds = this.step < 60;
     const { displayedHours, displayedMinutes, displayedSeconds } = this.generateTimeUnitArrays();
     const hoursElement = this.generateTimeUnitList("hours", displayedHours);
     const minutesElement = this.generateTimeUnitList(
@@ -471,6 +482,7 @@ var DSAInputTime = class extends FormControlLayout {
       "seconds",
       displayedSeconds
     );
+    const selectedTimeLabel = `${this.localize.term("selectedTime")}${this.value}`;
     return html`
       <div
         part="base"
@@ -511,7 +523,7 @@ var DSAInputTime = class extends FormControlLayout {
           ?required=${this.required}
           min=${ifDefined(this.min)}
           max=${ifDefined(this.max)}
-          step=${ifDefined(this.step)}
+          step=${this.step}
           .value=${live(this.value)}
           autocomplete=${ifDefined(this.autocomplete)}
           ?autofocus=${this.autofocus}
@@ -560,11 +572,14 @@ var DSAInputTime = class extends FormControlLayout {
               part="picker-button"
               class="input__action-button icon-button--time"
               name="schedule"
-              label=${this.localize.term("selectATime")}
+              label=${`${this.localize.term("selectATime")} - ${(_a = this.label) != null ? _a : this.title}`}
               @click=${this.toggleTimePicker}
               library="system"
               size=${this.size}
               ?disabled=${this.disabled || this.readonly}
+              description=${ifDefined(
+      this.value !== "" ? selectedTimeLabel : void 0
+    )}
             ></dsa-icon-button>
           </div>
 
@@ -574,11 +589,13 @@ var DSAInputTime = class extends FormControlLayout {
             @keydown=${this.handlePanelKeydown}
             @click=${this.handlePanelClick}
           >
-            ${hoursElement} ${minutesElement}
-            ${hasSeconds ? secondsElement : ""}
+            ${hoursElement} ${minutesElement} ${secondsElement}
           </div>
         </dsa-popup>
       </div>
+      <p id="selected-value" class="input--time-description">
+        ${this.localize.term("selectedTime")}${this.value}
+      </p>
     `;
   }
 };
@@ -614,7 +631,14 @@ __decorateClass([
   property()
 ], DSAInputTime.prototype, "max", 2);
 __decorateClass([
-  property()
+  property({
+    converter: {
+      fromAttribute: (value) => {
+        if (value === "any") return 60;
+        else return Number(value);
+      }
+    }
+  })
 ], DSAInputTime.prototype, "step", 2);
 __decorateClass([
   property()

package/dist/chunks/{chunk.U2RG7USD.js → chunk.IR5ZDNLY.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.YWHYMKYI.js";
+} from "./chunk.QADAWCTI.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/chunk.J4QE6NJC.js

@@ -0,0 +1,70 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/card-nav/card-nav.styles.ts
+import { css } from "lit";
+var card_nav_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: inline-block;
+  }
+
+  .card-nav {
+    border-radius: var(--dsa-radius-8);
+    border: 1px solid var(--dsa-wc-card-nav-border-color);
+    background-color: var(--dsa-wc-card-nav-background-color);
+    overflow: hidden;
+    color: var(--dsa-wc-card-nav-color);
+  }
+
+  .card-nav__media::slotted(img) {
+    display: block;
+    width: 100%;
+  }
+
+  /* Title block */
+  .card-nav__title-block {
+    display: flex;
+    align-items: center;
+    gap: var(--dsa-spacing-12);
+    padding: 1.25rem 1rem;
+  }
+  .title-block-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-spacing-8);
+  }
+  .title-block-text .title {
+    font: var(--dsa-font-large-bold);
+  }
+  .title-block-text .subtitle {
+    font: var(--dsa-font-medium-bold);
+    color: var(--dsa-wc-card-nav-subtitle-color);
+  }
+  .card-nav__title_icon::slotted(*) {
+    color: var(--dsa-wc-card-nav-icon-color);
+    flex-shrink: 0;
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .card-content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  ::slotted(*:last-child) {
+    --card-nav-item-border-width: 0px;
+    --card-nav-accordion-border-color: transparent;
+    --card-nav-accordion-border-color-hover: transparent;
+    --card-nav-accordion-border-color-transition-delay: var(
+      --dsa-wc-transition-medium
+    );
+  }
+`;
+
+export {
+  card_nav_styles_default
+};