dap-design-system 0.60.2 → 0.61.0

package/dist/components/sidenav/sidenav-group.component.js

@@ -0,0 +1,104 @@
+import { clsx as i } from "../../node_modules/clsx/dist/clsx.js";
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import { property as o } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { html as p } from "../../node_modules/lit-html/static.js";
+import { DdsElement as c } from "../../internal/dds-hu-element.js";
+import f from "../icons/arrows/arrows-arrow-right-s-line/arrows-arrow-right-s-line.component.js";
+import h from "./sidenav-group.scss.js";
+import { unsafeCSS as m } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var g = Object.defineProperty, n = (l, t, u, v) => {
+  for (var s = void 0, a = l.length - 1, d; a >= 0; a--)
+    (d = l[a]) && (s = d(t, u, s) || s);
+  return s && g(t, u, s), s;
+};
+const r = class r extends c {
+  constructor() {
+    super(...arguments), this.active = !1, this.spacing = "none", this.open = !1, this.size = "xs";
+  }
+  render() {
+    return p`
+      <div
+        part="base"
+        role="listitem"
+        class=${i(
+      "sidenav-group",
+      `sidenav-group--spacing-${this.spacing}`
+    )}>
+        <div
+          class=${i(
+      "sidenav-group__item",
+      `sidenav-group__item--${this.size}`,
+      {
+        "sidenav-group__item--active": this.active
+      }
+    )}>
+          <div
+            class=${i("sidenav-group__title")}
+            part="title"
+            id="title"
+            @click=${(t) => {
+      t.preventDefault(), t.stopPropagation(), this.open ? this.open && !this.href && (this.open = !1) : this.open = !0;
+    }}>
+            ${this.href ? p`<a
+                  href=${this.href}
+                  class="sidenav-group__link"
+                  part="link">
+                  <slot></slot>
+                  <slot name="suffix"></slot>
+                </a>` : p`<slot></slot>`}
+          </div>
+          <button
+            part="toggle"
+            type="button"
+            class=${i("sidenav-group__toggle", {
+      "sidenav-group__toggle--open": this.open
+    })}
+            aria-labelledby="title"
+            aria-expanded=${this.open ? "true" : "false"}
+            aria-controls="submenu"
+            @click=${(t) => {
+      t.preventDefault(), t.stopPropagation(), this.open = !this.open;
+    }}>
+            <dap-ds-icon-arrow-right-s-line
+              part="icon"
+              aria-hidden="true"></dap-ds-icon-arrow-right-s-line>
+          </button>
+        </div>
+        <ul
+          part="submenu"
+          id="submenu"
+          role="list"
+          class=${i("sidenav-group__submenu", {
+      "sidenav-group__submenu--open": this.open
+    })}>
+          <slot name="submenu"></slot>
+        </ul>
+      </div>
+    `;
+  }
+};
+r.tagName = "dap-ds-sidenav-group", r.dependencies = {
+  "dap-ds-icon-arrow-right-s-line": f
+}, r.styles = m(h);
+let e = r;
+n([
+  o({ reflect: !0 })
+], e.prototype, "href");
+n([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "active");
+n([
+  o({ reflect: !0 })
+], e.prototype, "spacing");
+n([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "open");
+n([
+  o({ reflect: !0, type: String })
+], e.prototype, "size");
+export {
+  e as default
+};
+//# sourceMappingURL=sidenav-group.component.js.map

package/dist/components/sidenav/sidenav-group.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidenav-group.component.js","sources":["../../../src/components/sidenav/sidenav-group.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport ArrowsArrowRightSLine from '../icons/arrows/arrows-arrow-right-s-line/arrows-arrow-right-s-line.component'\nimport styles from './sidenav-group.scss?inline'\n\nexport type Spacing = 'top' | 'bottom' | 'both' | 'none'\n\n/**\n * `dap-ds-sidenav-group`\n * @summary Side navigation group\n * @element dap-ds-sidenav-group\n * @title - Side navigation group\n * @group side-navigation\n *\n * @slot - The content of the side navigation group.\n * @slot submenu - The submenu of the side navigation group.\n * @slot suffix - The suffix of the side navigation group.\n *\n * @csspart base - The main side navigation group container.\n * @csspart title - The title of the side navigation group.\n * @csspart link - The link of the side navigation group.\n * @csspart toggle - The toggle button of the side navigation group.\n * @csspart submenu - The submenu of the side navigation group.\n *\n * @cssproperty --dds-sidenav-group-margin-bottom - Default bottom margin of the sidenav group (default: var(--dds-spacing-100))\n * @cssproperty --dds-sidenav-group-border-radius - Border radius of the sidenav group (default: var(--dds-radius-base))\n * @cssproperty --dds-sidenav-group-spacing-margin - Margin used for spacing variants (default: var(--dds-spacing-400))\n * @cssproperty --dds-sidenav-group-item-min-height-xs - Minimum height of the sidenav group item (default: var(--dds-spacing-800))\n * @cssproperty --dds-sidenav-group-item-min-height-sm - Minimum height of the sidenav group item (default: var(--dds-spacing-1000))\n * @cssproperty --dds-sidenav-group-item-min-height-lg - Minimum height of the sidenav group item (default: var(--dds-spacing-1200))\n * @cssproperty --dds-sidenav-group-item-padding-xs - Padding of the sidenav group item (default: var(--dds-spacing-100) var(--dds-spacing-300))\n * @cssproperty --dds-sidenav-group-item-padding-sm - Padding of the sidenav group item (default: var(--dds-spacing-200) var(--dds-spacing-400))\n * @cssproperty --dds-sidenav-group-item-padding-lg - Padding of the sidenav group item (default: var(--dds-spacing-300) var(--dds-spacing-500))\n * @cssproperty --dds-sidenav-group-item-color - Text color of the sidenav group item (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-sidenav-group-item-font-size-xs - Font size of the sidenav group item (default: var(--dds-font-sm))\n * @cssproperty --dds-sidenav-group-item-font-size-sm - Font size of the sidenav group item (default: var(--dds-font-base))\n * @cssproperty --dds-sidenav-group-item-font-size-lg - Font size of the sidenav group item (default: var(--dds-font-lg))\n * @cssproperty --dds-sidenav-group-item-font-weight - Font weight of the sidenav group item (default: var(--dds-font-weight-medium))\n * @cssproperty --dds-sidenav-group-item-bg-active - Background color when the item is active (default: var(--dds-transparent-black-subtle))\n * @cssproperty --dds-sidenav-group-item-bg-hover - Background color on hover and active states (default: var(--dds-transparent-black-base))\n * @cssproperty --dds-sidenav-group-toggle-margin - Margin for the toggle button (default: var(--dds-spacing-300))\n * @cssproperty --dds-sidenav-group-submenu-padding - Padding for the submenu (default: var(--dds-spacing-300) 0)\n */\nexport default class DapDSSideNavGroup extends DdsElement {\n  static tagName = 'dap-ds-sidenav-group'\n\n  static dependencies = {\n    'dap-ds-icon-arrow-right-s-line': ArrowsArrowRightSLine,\n  }\n\n  /** The href of the side navigation item */\n  @property({ reflect: true }) href: string\n\n  /** Whether the side navigation item is active */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /** The spacing of the side navigation item\n   * @type {'top' | 'bottom' | 'both' | 'none'}\n   */\n  @property({ reflect: true }) spacing: Spacing = 'none'\n\n  /** Whether the side navigation group is open */\n  @property({ type: Boolean, reflect: true }) open = false\n\n  /** The size of the side navigation group */\n  @property({ reflect: true, type: String }) size: 'xs' | 'sm' | 'lg' = 'xs'\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        role=\"listitem\"\n        class=${clsx(\n          'sidenav-group',\n          `sidenav-group--spacing-${this.spacing}`,\n        )}>\n        <div\n          class=${clsx(\n            'sidenav-group__item',\n            `sidenav-group__item--${this.size}`,\n            {\n              'sidenav-group__item--active': this.active,\n            },\n          )}>\n          <div\n            class=${clsx('sidenav-group__title')}\n            part=\"title\"\n            id=\"title\"\n            @click=${(e: any) => {\n              e.preventDefault()\n              e.stopPropagation()\n              if (!this.open) {\n                this.open = true\n              } else if (this.open && !this.href) {\n                this.open = false\n              }\n            }}>\n            ${this.href\n              ? html`<a\n                  href=${this.href}\n                  class=\"sidenav-group__link\"\n                  part=\"link\">\n                  <slot></slot>\n                  <slot name=\"suffix\"></slot>\n                </a>`\n              : html`<slot></slot>`}\n          </div>\n          <button\n            part=\"toggle\"\n            type=\"button\"\n            class=${clsx('sidenav-group__toggle', {\n              'sidenav-group__toggle--open': this.open,\n            })}\n            aria-labelledby=\"title\"\n            aria-expanded=${this.open ? 'true' : 'false'}\n            aria-controls=\"submenu\"\n            @click=${(e: any) => {\n              e.preventDefault()\n              e.stopPropagation()\n              this.open = !this.open\n            }}>\n            <dap-ds-icon-arrow-right-s-line\n              part=\"icon\"\n              aria-hidden=\"true\"></dap-ds-icon-arrow-right-s-line>\n          </button>\n        </div>\n        <ul\n          part=\"submenu\"\n          id=\"submenu\"\n          role=\"list\"\n          class=${clsx('sidenav-group__submenu', {\n            'sidenav-group__submenu--open': this.open,\n          })}>\n          <slot name=\"submenu\"></slot>\n        </ul>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSSideNavGroup","DdsElement","html","clsx","e","ArrowsArrowRightSLine","unsafeCSS","styles","DapDSSideNavGroup","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;AA+CA,MAAqBA,IAArB,MAAqBA,UAA0BC,EAAW;AAAA,EAA1D,cAAA;AAAA,UAAA,GAAA,SAAA,GAWuD,KAAA,SAAA,IAKL,KAAA,UAAA,QAGG,KAAA,OAAA,IAGmB,KAAA,OAAA;AAAA,EAAA;AAAA,EAItE,SAAS;AACA,WAAAC;AAAAA;AAAAA;AAAAA;AAAAA,gBAIKC;AAAA,MACN;AAAA,MACA,0BAA0B,KAAK,OAAO;AAAA,IAAA,CACvC;AAAA;AAAA,kBAESA;AAAA,MACN;AAAA,MACA,wBAAwB,KAAK,IAAI;AAAA,MACjC;AAAA,QACE,+BAA+B,KAAK;AAAA,MAAA;AAAA,IACtC,CACD;AAAA;AAAA,oBAESA,EAAK,sBAAsB,CAAC;AAAA;AAAA;AAAA,qBAG3B,CAACC,MAAW;AACnB,MAAAA,EAAE,eAAe,GACjBA,EAAE,gBAAgB,GACb,KAAK,OAEC,KAAK,QAAQ,CAAC,KAAK,SAC5B,KAAK,OAAO,MAFZ,KAAK,OAAO;AAAA,IAGd,CACD;AAAA,cACC,KAAK,OACHF;AAAAA,yBACS,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMlBA,gBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKfC,EAAK,yBAAyB;AAAA,MACpC,+BAA+B,KAAK;AAAA,IAAA,CACrC,CAAC;AAAA;AAAA,4BAEc,KAAK,OAAO,SAAS,OAAO;AAAA;AAAA,qBAEnC,CAACC,MAAW;AACnB,MAAAA,EAAE,eAAe,GACjBA,EAAE,gBAAgB,GACb,KAAA,OAAO,CAAC,KAAK;AAAA,IAAA,CACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAUKD,EAAK,0BAA0B;AAAA,MACrC,gCAAgC,KAAK;AAAA,IAAA,CACtC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMZ;AAhGEH,EAAO,UAAU,wBAEjBA,EAAO,eAAe;AAAA,EACpB,kCAAkCK;AACpC,GAmBgBL,EAAA,SAASM,EAAUC,CAAM;AAxB3C,IAAqBC,IAArBR;AAQ+BS,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GARRF,EAQU,WAAA,MAAA;AAGeC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAXvBF,EAWyB,WAAA,QAAA;AAKfC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAhBRF,EAgBU,WAAA,SAAA;AAGeC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAnBvBF,EAmByB,WAAA,MAAA;AAGDC,EAAA;AAAA,EAA1CC,EAAS,EAAE,SAAS,IAAM,MAAM,OAAQ,CAAA;AAAA,GAtBtBF,EAsBwB,WAAA,MAAA;"}

package/dist/components/sidenav/sidenav-group.d.ts

@@ -0,0 +1,8 @@
+import { default as DapDSSideNavGroup } from './sidenav-group.component';
+export * from './sidenav-group.component';
+export default DapDSSideNavGroup;
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-sidenav-group': DapDSSideNavGroup;
+    }
+}

package/dist/components/sidenav/sidenav-group.js

@@ -0,0 +1,6 @@
+import e from "./sidenav-group.component.js";
+e.define();
+export {
+  e as default
+};
+//# sourceMappingURL=sidenav-group.js.map

package/dist/components/sidenav/sidenav-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidenav-group.js","sources":["../../../src/components/sidenav/sidenav-group.ts"],"sourcesContent":["import DapDSSideNavGroup from './sidenav-group.component'\n\nexport * from './sidenav-group.component'\nexport default DapDSSideNavGroup\n\nDapDSSideNavGroup.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-sidenav-group': DapDSSideNavGroup\n  }\n}\n"],"names":["DapDSSideNavGroup"],"mappings":";AAKAA,EAAkB,OAAO;"}

package/dist/components/sidenav/sidenav-group.scss.js

@@ -0,0 +1,5 @@
+const i = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{--dds-sidenav-group-margin-bottom: var(--dds-spacing-100);--dds-sidenav-group-border-radius: var(--dds-radius-base);--dds-sidenav-group-spacing-margin: var(--dds-spacing-400);--dds-sidenav-group-item-min-height-xs: var(--dds-spacing-800);--dds-sidenav-group-item-min-height-sm: var(--dds-spacing-1000);--dds-sidenav-group-item-min-height-lg: var(--dds-spacing-1200);--dds-sidenav-group-item-padding-xs: var(--dds-spacing-100) var(--dds-spacing-300);--dds-sidenav-group-item-padding-sm: var(--dds-spacing-200) var(--dds-spacing-400);--dds-sidenav-group-item-padding-lg: var(--dds-spacing-300) var(--dds-spacing-500);--dds-sidenav-group-item-color: var(--dds-text-neutral-base);--dds-sidenav-group-item-font-size-xs: var(--dds-font-sm);--dds-sidenav-group-item-font-size-sm: var(--dds-font-base);--dds-sidenav-group-item-font-size-lg: var(--dds-font-lg);--dds-sidenav-group-item-font-weight: var(--dds-font-weight-medium);--dds-sidenav-group-item-bg-active: var(--dds-transparent-black-subtle);--dds-sidenav-group-item-bg-hover: var(--dds-transparent-black-base);--dds-sidenav-group-toggle-margin: var(--dds-spacing-300);--dds-sidenav-group-submenu-padding: var(--dds-spacing-300) 0}ul{margin-block:0;padding-inline:var(--dds-spacing-300) 0}.sidenav-group{transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);display:inline-flex;position:relative;flex-direction:column;width:100%;margin-bottom:var(--dds-sidenav-group-margin-bottom);border-width:0;border-radius:var(--dds-sidenav-group-border-radius);cursor:pointer}.sidenav-group:has(:focus-visible){outline-style:solid}.sidenav-group--spacing-bottom{margin-bottom:var(--dds-sidenav-group-spacing-margin)}.sidenav-group--spacing-top{margin-top:var(--dds-sidenav-group-spacing-margin)}.sidenav-group--spacing-both{margin-top:var(--dds-sidenav-group-spacing-margin);margin-bottom:var(--dds-sidenav-group-spacing-margin)}.sidenav-group__item{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:0;border-width:0;border-radius:var(--dds-sidenav-group-border-radius);background-color:transparent;color:var(--dds-sidenav-group-item-color);font-weight:var(--dds-sidenav-group-item-font-weight)}.sidenav-group__item--active{background-color:var(--dds-sidenav-group-item-bg-active)}.sidenav-group__item--xs{min-height:var(--dds-sidenav-group-item-min-height-xs);padding:var(--dds-sidenav-group-item-padding-xs);font-size:var(--dds-sidenav-group-item-font-size-xs)}.sidenav-group__item--sm{min-height:var(--dds-sidenav-group-item-min-height-sm);padding:var(--dds-sidenav-group-item-padding-sm);font-size:var(--dds-sidenav-group-item-font-size-sm)}.sidenav-group__item--lg{min-height:var(--dds-sidenav-group-item-min-height-lg);padding:var(--dds-sidenav-group-item-padding-lg);font-size:var(--dds-sidenav-group-item-font-size-lg)}.sidenav-group__item:active,.sidenav-group__item:hover{background-color:var(--dds-sidenav-group-item-bg-hover)}.sidenav-group__title{display:inline-flex;justify-content:space-between;width:100%}.sidenav-group__link{display:inline-flex;align-items:center;justify-content:space-between;width:100%;color:var(--dds-sidenav-group-item-color);text-decoration:none;text-overflow:ellipsis;word-break:break-word;hyphens:auto;cursor:pointer}.sidenav-group__toggle{transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);display:inline-flex;align-items:center;justify-content:center;margin-left:var(--dds-sidenav-group-toggle-margin);border-width:0;border-radius:var(--dds-sidenav-group-border-radius);background-color:transparent;cursor:pointer}.sidenav-group__toggle:focus-visible{outline-style:solid}.sidenav-group__toggle--open{transform:rotate(90deg)}.sidenav-group__submenu{display:none}.sidenav-group__submenu--open{display:block}";
+export {
+  i as default
+};
+//# sourceMappingURL=sidenav-group.scss.js.map

package/dist/components/sidenav/sidenav-group.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidenav-group.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/sidenav/sidenav-item.component.d.ts

@@ -31,6 +31,7 @@ import { DdsElement } from '../../internal/dds-hu-element';
  * @cssproperty --dds-sidenav-item-bg-hover - Background color on hover and active states (default: var(--dds-transparent-black-base))
  */
 export default class DapDSSideNavItem extends DdsElement {
+    static tagName: string;
     /** The href of the side navigation item */
     href: string;
     /** Whether the side navigation item is active */

package/dist/components/sidenav/sidenav-item.component.js

@@ -0,0 +1,67 @@
+import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import { property as r } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { ifDefined as a } from "../../node_modules/lit-html/directives/if-defined.js";
+import { html as c } from "../../node_modules/lit-html/static.js";
+import { DdsElement as h } from "../../internal/dds-hu-element.js";
+import u from "./sidenav-item.scss.js";
+import { unsafeCSS as d } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var v = Object.defineProperty, i = (n, p, f, y) => {
+  for (var e = void 0, o = n.length - 1, l; o >= 0; o--)
+    (l = n[o]) && (e = l(p, f, e) || e);
+  return e && v(p, f, e), e;
+};
+const s = class s extends h {
+  constructor() {
+    super(...arguments), this.active = !1, this.current = "page", this.spacing = "none", this.size = "xs";
+  }
+  render() {
+    return c`
+      <li
+        part="base"
+        role="listitem"
+        class=${m(
+      "sidenav-item",
+      `sidenav-item--spacing-${this.spacing}`,
+      `sidenav-item--${this.size}`,
+      {
+        "sidenav-item--active": this.active
+      }
+    )}>
+        <a
+          part="link"
+          href=${this.href}
+          class="sidenav-item__link"
+          aria-current=${a(this.active ? this.current : void 0)}
+          target=${a(this.href ? "_self" : void 0)}
+          rel=${a(this.href ? "noreferrer noopener" : void 0)}>
+          <slot></slot>
+          <slot name="suffix"></slot>
+        </a>
+      </li>
+    `;
+  }
+};
+s.tagName = "dap-ds-sidenav-item", s.styles = d(u);
+let t = s;
+i([
+  r()
+], t.prototype, "href");
+i([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "active");
+i([
+  r({ reflect: !0 })
+], t.prototype, "current");
+i([
+  r({ reflect: !0 })
+], t.prototype, "spacing");
+i([
+  r({ reflect: !0, type: String })
+], t.prototype, "size");
+export {
+  t as default
+};
+//# sourceMappingURL=sidenav-item.component.js.map

package/dist/components/sidenav/sidenav-item.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidenav-item.component.js","sources":["../../../src/components/sidenav/sidenav-item.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport type { AriaCurrent, SidenavSpacing } from '@/common/types'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './sidenav-item.scss?inline'\n\n/**\n * `dap-ds-sidenav-item`\n * @summary Side navigation item\n * @element dap-ds-sidenav-item\n * @title - Side navigation item\n * @group side-navigation\n *\n * @slot - The content of the side navigation item.\n * @slot suffix - The suffix of the side navigation item.\n *\n * @csspart base - The main side navigation item container.\n * @csspart link - The link of the side navigation item.\n *\n * @cssproperty --dds-sidenav-item-min-height-xs - Minimum height of the sidenav item (default: var(--dds-spacing-800))\n * @cssproperty --dds-sidenav-item-min-height-sm - Minimum height of the sidenav item (default: var(--dds-spacing-1000))\n * @cssproperty --dds-sidenav-item-min-height-lg - Minimum height of the sidenav item (default: var(--dds-spacing-1200))\n * @cssproperty --dds-sidenav-item-margin-bottom - Default bottom margin of the sidenav item (default: var(--dds-spacing-100))\n * @cssproperty --dds-sidenav-item-padding-xs - Padding of the sidenav item (default: var(--dds-spacing-100) var(--dds-spacing-300))\n * @cssproperty --dds-sidenav-item-padding-sm - Padding of the sidenav item (default: var(--dds-spacing-200) var(--dds-spacing-400))\n * @cssproperty --dds-sidenav-item-padding-lg - Padding of the sidenav item (default: var(--dds-spacing-300) var(--dds-spacing-500))\n * @cssproperty --dds-sidenav-item-radius - Border radius of the sidenav item (default: var(--dds-radius-base))\n * @cssproperty --dds-sidenav-item-color - Text color of the sidenav item (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-sidenav-item-font-size-xs - Font size of the sidenav item (default: var(--dds-font-sm))\n * @cssproperty --dds-sidenav-item-font-size-sm - Font size of the sidenav item (default: var(--dds-font-base))\n * @cssproperty --dds-sidenav-item-font-size-lg - Font size of the sidenav item (default: var(--dds-font-lg))\n * @cssproperty --dds-sidenav-item-font-weight - Font weight of the sidenav item (default: var(--dds-font-weight-medium))\n * @cssproperty --dds-sidenav-item-spacing-margin - Margin used for spacing variants (default: var(--dds-spacing-400))\n * @cssproperty --dds-sidenav-item-bg-active - Background color when the item is active (default: var(--dds-transparent-black-subtle))\n * @cssproperty --dds-sidenav-item-bg-hover - Background color on hover and active states (default: var(--dds-transparent-black-base))\n */\nexport default class DapDSSideNavItem extends DdsElement {\n  static tagName = 'dap-ds-sidenav-item'\n\n  /** The href of the side navigation item */\n  @property() href: string\n\n  /** Whether the side navigation item is active */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * Which `aria-current` token to expose on the link when `active` is set.\n   *\n   * `aria-current` has to sit on the anchor that assistive technology actually\n   * exposes. Setting it on this host does nothing: the host is a role-less custom\n   * element, so the attribute is stranded there and screen-reader users cannot tell\n   * which item is current. Use `current=\"step\"` inside a stepper.\n   *\n   * @type {'page' | 'step' | 'location' | 'date' | 'time' | 'true'}\n   */\n  @property({ reflect: true }) current: AriaCurrent = 'page'\n\n  /** The spacing of the side navigation item\n   * @type {'top' | 'bottom' | 'both' | 'none'}\n   */\n  @property({ reflect: true }) spacing: SidenavSpacing = 'none'\n\n  /** The size of the side navigation item */\n  @property({ reflect: true, type: String }) size: 'xs' | 'sm' | 'lg' = 'xs'\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return html`\n      <li\n        part=\"base\"\n        role=\"listitem\"\n        class=${clsx(\n          'sidenav-item',\n          `sidenav-item--spacing-${this.spacing}`,\n          `sidenav-item--${this.size}`,\n          {\n            'sidenav-item--active': this.active,\n          },\n        )}>\n        <a\n          part=\"link\"\n          href=${this.href}\n          class=\"sidenav-item__link\"\n          aria-current=${ifDefined(this.active ? this.current : undefined)}\n          target=${ifDefined(this.href ? '_self' : undefined)}\n          rel=${ifDefined(this.href ? 'noreferrer noopener' : undefined)}>\n          <slot></slot>\n          <slot name=\"suffix\"></slot>\n        </a>\n      </li>\n    `\n  }\n}\n"],"names":["_DapDSSideNavItem","DdsElement","html","clsx","ifDefined","unsafeCSS","styles","DapDSSideNavItem","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;AAyCA,MAAqBA,IAArB,MAAqBA,UAAyBC,EAAW;AAAA,EAAzD,cAAA;AAAA,UAAA,GAAA,SAAA,GAOuD,KAAA,SAAA,IAYD,KAAA,UAAA,QAKG,KAAA,UAAA,QAGe,KAAA,OAAA;AAAA,EAAA;AAAA,EAItE,SAAS;AACA,WAAAC;AAAAA;AAAAA;AAAAA;AAAAA,gBAIKC;AAAA,MACN;AAAA,MACA,yBAAyB,KAAK,OAAO;AAAA,MACrC,iBAAiB,KAAK,IAAI;AAAA,MAC1B;AAAA,QACE,wBAAwB,KAAK;AAAA,MAAA;AAAA,IAC/B,CACD;AAAA;AAAA;AAAA,iBAGQ,KAAK,IAAI;AAAA;AAAA,yBAEDC,EAAU,KAAK,SAAS,KAAK,UAAU,MAAS,CAAC;AAAA,mBACvDA,EAAU,KAAK,OAAO,UAAU,MAAS,CAAC;AAAA,gBAC7CA,EAAU,KAAK,OAAO,wBAAwB,MAAS,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAOxE;AAxDEJ,EAAO,UAAU,uBA4BDA,EAAA,SAASK,EAAUC,CAAM;AA7B3C,IAAqBC,IAArBP;AAIcQ,EAAA;AAAA,EAAXC,EAAS;AAAA,GAJSF,EAIP,WAAA,MAAA;AAGgCC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAPvBF,EAOyB,WAAA,QAAA;AAYfC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAnBRF,EAmBU,WAAA,SAAA;AAKAC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAxBRF,EAwBU,WAAA,SAAA;AAGcC,EAAA;AAAA,EAA1CC,EAAS,EAAE,SAAS,IAAM,MAAM,OAAQ,CAAA;AAAA,GA3BtBF,EA2BwB,WAAA,MAAA;"}

package/dist/components/sidenav/sidenav-item.d.ts

@@ -0,0 +1,8 @@
+import { default as DapDSSideNavItem } from './sidenav-item.component';
+export * from './sidenav-item.component';
+export default DapDSSideNavItem;
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-sidenav-item': DapDSSideNavItem;
+    }
+}

package/dist/components/sidenav/sidenav-item.js

@@ -0,0 +1,6 @@
+import e from "./sidenav-item.component.js";
+e.define();
+export {
+  e as default
+};
+//# sourceMappingURL=sidenav-item.js.map

package/dist/components/sidenav/sidenav-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidenav-item.js","sources":["../../../src/components/sidenav/sidenav-item.ts"],"sourcesContent":["import DapDSSideNavItem from './sidenav-item.component'\n\nexport * from './sidenav-item.component'\nexport default DapDSSideNavItem\n\nDapDSSideNavItem.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-sidenav-item': DapDSSideNavItem\n  }\n}\n"],"names":["DapDSSideNavItem"],"mappings":";AAKAA,EAAiB,OAAO;"}

package/dist/components/sidenav/sidenav-item.scss.js

@@ -0,0 +1,5 @@
+const i = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{--dds-sidenav-item-min-height-xs: var(--dds-spacing-800);--dds-sidenav-item-min-height-sm: var(--dds-spacing-1000);--dds-sidenav-item-min-height-lg: var(--dds-spacing-1200);--dds-sidenav-item-margin-bottom: var(--dds-spacing-100);--dds-sidenav-item-padding-xs: var(--dds-spacing-100) var(--dds-spacing-300);--dds-sidenav-item-padding-sm: var(--dds-spacing-200) var(--dds-spacing-400);--dds-sidenav-item-padding-lg: var(--dds-spacing-300) var(--dds-spacing-500);--dds-sidenav-item-radius: var(--dds-radius-base);--dds-sidenav-item-color: var(--dds-text-neutral-base);--dds-sidenav-item-font-size-xs: var(--dds-font-sm);--dds-sidenav-item-font-size-sm: var(--dds-font-base);--dds-sidenav-item-font-size-lg: var(--dds-font-lg);--dds-sidenav-item-font-weight: var(--dds-font-weight-medium);--dds-sidenav-item-spacing-margin: var(--dds-spacing-400);--dds-sidenav-item-bg-active: var(--dds-transparent-black-subtle);--dds-sidenav-item-bg-hover: var(--dds-transparent-black-base)}.sidenav-item{transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);display:inline-flex;position:relative;box-sizing:border-box;justify-content:flex-start;width:100%;margin-bottom:var(--dds-sidenav-item-margin-bottom);border-width:0;border-radius:var(--dds-sidenav-item-radius);background-color:transparent;color:var(--dds-sidenav-item-color);font-weight:var(--dds-sidenav-item-font-weight)}.sidenav-item:has(:focus-visible){outline-style:solid}.sidenav-item--xs{min-height:var(--dds-sidenav-item-min-height-xs);padding:var(--dds-sidenav-item-padding-xs);font-size:var(--dds-sidenav-item-font-size-xs)}.sidenav-item--sm{min-height:var(--dds-sidenav-item-min-height-sm);padding:var(--dds-sidenav-item-padding-sm);font-size:var(--dds-sidenav-item-font-size-sm)}.sidenav-item--lg{min-height:var(--dds-sidenav-item-min-height-lg);padding:var(--dds-sidenav-item-padding-lg);font-size:var(--dds-sidenav-item-font-size-lg)}.sidenav-item--spacing-bottom{margin-bottom:var(--dds-sidenav-item-spacing-margin)}.sidenav-item--spacing-top{margin-top:var(--dds-sidenav-item-spacing-margin)}.sidenav-item--spacing-both{margin-top:var(--dds-sidenav-item-spacing-margin);margin-bottom:var(--dds-sidenav-item-spacing-margin)}.sidenav-item--active{background-color:var(--dds-sidenav-item-bg-active)}.sidenav-item:active,.sidenav-item:hover{background-color:var(--dds-sidenav-item-bg-hover)}.sidenav-item__link{display:inline-flex;align-items:center;justify-content:space-between;width:100%;color:var(--dds-sidenav-item-color);text-decoration:none;text-overflow:ellipsis;word-break:break-word;hyphens:auto;cursor:pointer}";
+export {
+  i as default
+};
+//# sourceMappingURL=sidenav-item.scss.js.map

package/dist/components/sidenav/sidenav-item.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidenav-item.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/sidenav/sidenav.component.d.ts

@@ -19,6 +19,7 @@ export type SideNavLandmark = keyof typeof LANDMARK_TAGS;
  * @csspart menu - The menu of the side navigation.
  */
 export default class DapDSSideNav extends DdsElement {
+    static tagName: string;
     /** The label of the side navigation, if aria label is not provided, it will be used as aria label */
     label: string;
     /** The active href of the side navigation, to explicitly set the active item, if not provided, it will be set based on the current location */

package/dist/components/sidenav/sidenav.component.js

@@ -0,0 +1,102 @@
+import { clsx as h } from "../../node_modules/clsx/dist/clsx.js";
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import { property as n } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { literal as p, html as u } from "../../node_modules/lit-html/static.js";
+import { DdsElement as m } from "../../internal/dds-hu-element.js";
+import v from "./sidenav.scss.js";
+import { unsafeCSS as A } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var b = Object.defineProperty, c = (l, e, t, r) => {
+  for (var s = void 0, i = l.length - 1, d; i >= 0; i--)
+    (d = l[i]) && (s = d(e, t, s) || s);
+  return s && b(e, t, s), s;
+};
+const f = {
+  aside: p`aside`,
+  nav: p`nav`
+}, o = class o extends m {
+  constructor() {
+    super(...arguments), this.size = "xs", this.landmark = "aside";
+  }
+  firstUpdated(e) {
+    const t = this.querySelector(
+      `[href="${this.activeHref ? this.activeHref : window.location.pathname}"]`
+    );
+    t && (this.removeActive(), this.setActive(t));
+    const r = t == null ? void 0 : t.closest("dap-ds-sidenav-group");
+    r && r.setAttribute("open", "true"), this.querySelectorAll("dap-ds-sidenav-item, dap-ds-sidenav-group").forEach(
+      (s) => {
+        s.size = this.size;
+      }
+    );
+  }
+  attributeChangedCallback(e, t, r) {
+    if (super.attributeChangedCallback(e, t, r), e === "activehref") {
+      this.removeActive();
+      const s = this.querySelector(`[href="${r}"]`);
+      this.setActive(s);
+    }
+  }
+  removeActive() {
+    this.querySelectorAll("dap-ds-sidenav-item, dap-ds-sidenav-group").forEach(
+      (e) => {
+        e.removeAttribute("active");
+      }
+    );
+  }
+  setActive(e) {
+    if (e) {
+      e.setAttribute("active", "true");
+      const t = e.closest("dap-ds-sidenav-group");
+      t && t.setAttribute("open", "true");
+    }
+  }
+  // Emits `dds-item-click` when an item (or a group acting as a link) is
+  // activated. The event is cancelable: consumers doing client-side routing can
+  // call `event.preventDefault()` to suppress the item's native anchor
+  // navigation. When nobody prevents it, the anchor navigates as before.
+  handleClick(e) {
+    const t = e.composedPath().find(
+      (i) => i instanceof HTMLElement && (i.tagName === "DAP-DS-SIDENAV-ITEM" || i.tagName === "DAP-DS-SIDENAV-GROUP")
+    ), r = (t == null ? void 0 : t.href) || (t == null ? void 0 : t.getAttribute("href"));
+    if (!r) return;
+    this.emit(
+      "dds-item-click",
+      { href: r, event: e },
+      { cancelable: !0 }
+    ).defaultPrevented && e.preventDefault();
+  }
+  render() {
+    var t, r;
+    const e = (t = f[this.landmark]) != null ? t : f.aside;
+    return u`
+      <${e}
+        part="base"
+        class=${h("sidenav", `sidenav--${this.size}`)}
+        aria-label=${(r = this.ariaLabel) != null ? r : this.label}>
+        <menu part="menu" @click=${this.handleClick}>
+          <slot></slot>
+        </menu>
+      </${e}>
+    `;
+  }
+};
+o.tagName = "dap-ds-sidenav", o.styles = A(v);
+let a = o;
+c([
+  n({ reflect: !0 })
+], a.prototype, "label");
+c([
+  n()
+], a.prototype, "activeHref");
+c([
+  n({ type: String })
+], a.prototype, "size");
+c([
+  n({ reflect: !0, type: String })
+], a.prototype, "landmark");
+export {
+  a as default
+};
+//# sourceMappingURL=sidenav.component.js.map

package/dist/components/sidenav/sidenav.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidenav.component.js","sources":["../../../src/components/sidenav/sidenav.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html, literal } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './sidenav.scss?inline'\n\n// Mapped rather than interpolated straight into the static template: `landmark` is a\n// plain attribute, so any string can reach it from markup, and `unsafeStatic` would\n// render that string as a tag name. Unknown values fall back to `aside`.\nconst LANDMARK_TAGS = {\n  aside: literal`aside`,\n  nav: literal`nav`,\n} as const\n\nexport type SideNavLandmark = keyof typeof LANDMARK_TAGS\n\n/**\n * `dap-ds-sidenav`\n * @summary Side navigation is a list of links that are used to navigate to different sections of a page.\n * @element dap-ds-sidenav\n * @title - Side navigation\n *\n * @event {{ href: string, event: Event }} dds-item-click - Event fired when the side navigation item is clicked.\n *\n * @slot - The content of the side navigation.\n *\n * @csspart base - The main side navigation container.\n * @csspart menu - The menu of the side navigation.\n */\nexport default class DapDSSideNav extends DdsElement {\n  static tagName = 'dap-ds-sidenav'\n\n  /** The label of the side navigation, if aria label is not provided, it will be used as aria label */\n  @property({ reflect: true }) label: string\n\n  /** The active href of the side navigation, to explicitly set the active item, if not provided, it will be set based on the current location */\n  @property() activeHref: string\n\n  /** The size of the side navigation */\n  @property({ type: String }) size: 'xs' | 'sm' | 'lg' = 'xs'\n\n  /**\n   * The landmark element to render. `aside` exposes a complementary landmark; `nav`\n   * exposes a navigation landmark, so the sidenav is listed when a screen-reader user\n   * asks for the page's navigation.\n   *\n   * Defaults to `aside` because that is what this component has always rendered, and\n   * changing the landmark of every existing sidenav is not this component's call: a\n   * sidenav that is genuinely a sidebar should stay complementary. Set `nav` when the\n   * sidenav is the primary way to move around the view.\n   * @type {'aside' | 'nav'}\n   */\n  @property({ reflect: true, type: String }) landmark: SideNavLandmark = 'aside'\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    const activeItem = this.querySelector(\n      `[href=\"${this.activeHref ? this.activeHref : window.location.pathname}\"]`,\n    )\n\n    if (activeItem) {\n      this.removeActive()\n      this.setActive(activeItem)\n    }\n\n    const activeGroup = activeItem?.closest('dap-ds-sidenav-group')\n    if (activeGroup) {\n      activeGroup.setAttribute('open', 'true')\n    }\n\n    // go through all the items and and groups and set the size\n    this.querySelectorAll('dap-ds-sidenav-item, dap-ds-sidenav-group').forEach(\n      item => {\n        ;(item as any).size = this.size\n      },\n    )\n  }\n\n  attributeChangedCallback(\n    name: string,\n    _old: string | null,\n    value: string | null,\n  ): void {\n    super.attributeChangedCallback(name, _old, value)\n\n    if (name === 'activehref') {\n      this.removeActive()\n\n      const activeItem = this.querySelector(`[href=\"${value}\"]`)\n      this.setActive(activeItem)\n    }\n  }\n\n  private removeActive(): void {\n    this.querySelectorAll('dap-ds-sidenav-item, dap-ds-sidenav-group').forEach(\n      item => {\n        item.removeAttribute('active')\n      },\n    )\n  }\n\n  private setActive(activeItem?: Element | null): void {\n    if (activeItem) {\n      activeItem.setAttribute('active', 'true')\n\n      const activeGroup = activeItem.closest('dap-ds-sidenav-group')\n      if (activeGroup) {\n        activeGroup.setAttribute('open', 'true')\n      }\n    }\n  }\n\n  // Emits `dds-item-click` when an item (or a group acting as a link) is\n  // activated. The event is cancelable: consumers doing client-side routing can\n  // call `event.preventDefault()` to suppress the item's native anchor\n  // navigation. When nobody prevents it, the anchor navigates as before.\n  private handleClick(event: MouseEvent): void {\n    const item = event\n      .composedPath()\n      .find(\n        (el): el is HTMLElement =>\n          el instanceof HTMLElement &&\n          (el.tagName === 'DAP-DS-SIDENAV-ITEM' ||\n            el.tagName === 'DAP-DS-SIDENAV-GROUP'),\n      )\n\n    // `href` is a non-reflecting reactive property, so a framework that sets it\n    // as a DOM property (e.g. React 19 for custom elements) leaves no `href`\n    // attribute. Read the property first, then fall back to the attribute.\n    const href =\n      (item as (HTMLElement & { href?: string }) | undefined)?.href ||\n      item?.getAttribute('href')\n    if (!href) return\n\n    const itemClick = this.emit(\n      'dds-item-click',\n      { href, event },\n      { cancelable: true },\n    )\n\n    if (itemClick.defaultPrevented) {\n      event.preventDefault()\n    }\n  }\n\n  render() {\n    const tag = LANDMARK_TAGS[this.landmark] ?? LANDMARK_TAGS.aside\n\n    return html`\n      <${tag}\n        part=\"base\"\n        class=${clsx('sidenav', `sidenav--${this.size}`)}\n        aria-label=${this.ariaLabel ?? this.label}>\n        <menu part=\"menu\" @click=${this.handleClick}>\n          <slot></slot>\n        </menu>\n      </${tag}>\n    `\n  }\n}\n"],"names":["LANDMARK_TAGS","literal","_DapDSSideNav","DdsElement","_changedProperties","activeItem","activeGroup","item","name","_old","value","event","el","href","tag","_a","html","clsx","_b","unsafeCSS","styles","DapDSSideNav","__decorateClass","property"],"mappings":"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"}

package/dist/components/sidenav/sidenav.d.ts

@@ -1,11 +1,8 @@
-import { default as DapDSSideNav } from './sidenav.component.js';
-import { default as DapDSSideNavItem } from './sidenav-item.component.js';
-export * from './sidenav.component.js';
-export * from './sidenav-item.component.js';
+import { default as DapDSSideNav } from './sidenav.component';
+export * from './sidenav.component';
 export default DapDSSideNav;
 declare global {
     interface HTMLElementTagNameMap {
         'dap-ds-sidenav': DapDSSideNav;
-        'dap-ds-sidenav-item': DapDSSideNavItem;
     }
 }

package/dist/components/sidenav/sidenav.js

@@ -0,0 +1,6 @@
+import e from "./sidenav.component.js";
+e.define();
+export {
+  e as default
+};
+//# sourceMappingURL=sidenav.js.map

package/dist/components/sidenav/sidenav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidenav.js","sources":["../../../src/components/sidenav/sidenav.ts"],"sourcesContent":["import DapDSSideNav from './sidenav.component'\n\nexport * from './sidenav.component'\nexport default DapDSSideNav\n\nDapDSSideNav.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-sidenav': DapDSSideNav\n  }\n}\n"],"names":["DapDSSideNav"],"mappings":";AAKAA,EAAa,OAAO;"}

package/dist/components/sidenav/sidenav.scss.js

@@ -0,0 +1,5 @@
+const a = "menu{margin:0;padding:0}";
+export {
+  a as default
+};
+//# sourceMappingURL=sidenav.scss.js.map

package/dist/components/sidenav/sidenav.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidenav.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/skeleton/skeleton.component.d.ts

@@ -26,6 +26,7 @@ export type SkeletonAnimation = 'wave' | 'pulse' | 'custom';
  * @cssprop --dds-skeleton-animation-timing-function - Timing function for the loading animation (default: ease-in-out)
  */
 export default class DapDSSkeleton extends DdsElement {
+    static tagName: string;
     /**
      * The variant of the skeleton.
      * @type {"text" | "circular" | "rectangular"}

package/dist/components/skeleton/skeleton.component.js

@@ -0,0 +1,89 @@
+import { clsx as u } from "../../node_modules/clsx/dist/clsx.js";
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as y } from "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import { property as r } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import "../../localization/localization.js";
+import { DdsElement as p } from "../../internal/dds-hu-element.js";
+import f from "./skeleton.scss.js";
+import { t as d } from "../../node_modules/i18next/dist/esm/i18next.js";
+import { unsafeCSS as c } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var S = Object.defineProperty, a = (l, t, e, o) => {
+  for (var s = void 0, m = l.length - 1, h; m >= 0; m--)
+    (h = l[m]) && (s = h(t, e, s) || s);
+  return s && S(t, e, s), s;
+};
+const n = class n extends p {
+  constructor() {
+    super(...arguments), this.variant = "text", this.noAnimation = !1, this.animation = "wave";
+  }
+  _generateKeyframesCSS() {
+    if (this.animation === "custom" && this.customKeyframes)
+      return `
+        @keyframes custom-skeleton-animation {
+          ${this.customKeyframes}
+        }
+        .skeleton--custom::before {
+          animation: custom-skeleton-animation var(--dds-skeleton-animation-duration) var(--dds-skeleton-animation-timing-function) infinite;
+        }
+      `;
+  }
+  _updateMergedStyles() {
+    const t = this._generateKeyframesCSS(), e = [];
+    t && e.push(t), this._userCustomStyles && e.push(this._userCustomStyles);
+    const o = e.length > 0 ? e.join(`
+`) : void 0;
+    if (o !== this.customStyles) {
+      const s = this.customStyles;
+      this.customStyles = o, this.requestUpdate("customStyles", s);
+    }
+  }
+  updated(t) {
+    if (super.updated(t), t.has("customStyles")) {
+      const e = this.customStyles || "", o = this._generateKeyframesCSS();
+      o && e.includes(o) ? this._userCustomStyles = e.replace(o, "").trim() || void 0 : this._userCustomStyles = e || void 0;
+    }
+    (t.has("animation") || t.has("customKeyframes")) && this._updateMergedStyles();
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this._userCustomStyles = this.customStyles || void 0, this._updateMergedStyles();
+  }
+  render() {
+    var t;
+    return this.width ? this.style.setProperty("--skeleton-width", this.width) : this.style.removeProperty("--skeleton-width"), this.height ? this.style.setProperty("--skeleton-height", this.height) : this.style.removeProperty("--skeleton-height"), y`
+      <div
+        part="base"
+        class="${u("skeleton", {
+      [`skeleton--${this.variant}`]: this.variant,
+      "skeleton--animate": !this.noAnimation,
+      [`skeleton--${this.animation}`]: !this.noAnimation && this.animation
+    })}"
+        role="status"
+        aria-label=${(t = this.ariaLabel) != null ? t : d("loading")}></div>
+    `;
+  }
+};
+n.tagName = "dap-ds-skeleton", n.styles = c(f);
+let i = n;
+a([
+  r({ type: String, reflect: !0 })
+], i.prototype, "variant");
+a([
+  r({ type: String })
+], i.prototype, "width");
+a([
+  r({ type: String })
+], i.prototype, "height");
+a([
+  r({ type: Boolean, reflect: !0 })
+], i.prototype, "noAnimation");
+a([
+  r({ type: String, reflect: !0 })
+], i.prototype, "animation");
+a([
+  r({ type: String, attribute: "custom-keyframes" })
+], i.prototype, "customKeyframes");
+export {
+  i as default
+};
+//# sourceMappingURL=skeleton.component.js.map

package/dist/components/skeleton/skeleton.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.component.js","sources":["../../../src/components/skeleton/skeleton.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { t } from '@/localization/localization'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './skeleton.scss?inline'\n\nexport type SkeletonVariant = 'text' | 'circular' | 'rectangular'\nexport type SkeletonAnimation = 'wave' | 'pulse' | 'custom'\n\n/**\n * `dap-ds-skeleton`\n * @summary A skeleton loader component for displaying placeholder content while loading.\n * @element dap-ds-skeleton\n * @title - Skeleton\n *\n * @example Basic Usage\n * ```html\n * <dap-ds-skeleton></dap-ds-skeleton>\n * <dap-ds-skeleton variant=\"circular\"></dap-ds-skeleton>\n * <dap-ds-skeleton variant=\"rectangular\" width=\"200px\" height=\"100px\"></dap-ds-skeleton>\n * <dap-ds-skeleton animation=\"custom\" custom-keyframes=\"0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }\"></dap-ds-skeleton>\n * ```\n *\n * @csspart base - The main skeleton container.\n *\n * @cssprop --dds-skeleton-base-color - Solid background color always visible (default: rgb(0 0 0 / 11%)); shown as a static block when prefers-reduced-motion is active\n * @cssprop --dds-skeleton-color - The shimmer overlay gradient (default: linear-gradient(90deg, transparent, rgb(0 0 0 / 10%), transparent))\n * @cssprop --dds-skeleton-animation-duration - Duration of the loading animation (default: 1.5s)\n * @cssprop --dds-skeleton-border-radius - Border radius for rectangular skeletons (default: var(--dds-radius-small))\n * @cssprop --dds-skeleton-text-spacing - Spacing between text lines in text variant (default: var(--dds-spacing-100))\n * @cssprop --dds-skeleton-animation-timing-function - Timing function for the loading animation (default: ease-in-out)\n */\nexport default class DapDSSkeleton extends DdsElement {\n  static tagName = 'dap-ds-skeleton'\n\n  /**\n   * The variant of the skeleton.\n   * @type {\"text\" | \"circular\" | \"rectangular\"}\n   */\n  @property({ type: String, reflect: true }) variant: SkeletonVariant = 'text'\n\n  /**\n   * The width of the skeleton. Can be any valid CSS width value.\n   */\n  @property({ type: String }) width?: string\n\n  /**\n   * The height of the skeleton. Can be any valid CSS height value.\n   */\n  @property({ type: String }) height?: string\n\n  /**\n   * Whether to animate the skeleton.\n   */\n  @property({ type: Boolean, reflect: true }) noAnimation = false\n\n  /**\n   * The animation type for the skeleton.\n   * @type {\"wave\" | \"pulse\" | \"custom\"}\n   */\n  @property({ type: String, reflect: true }) animation: SkeletonAnimation =\n    'wave'\n\n  /**\n   * Custom keyframes for the animation when animation=\"custom\".\n   * Should be a valid CSS keyframes string without the @keyframes wrapper.\n   * @example \"0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }\"\n   */\n  @property({ type: String, attribute: 'custom-keyframes' })\n  customKeyframes?: string\n\n  static readonly styles = unsafeCSS(styles)\n\n  private _userCustomStyles?: string\n\n  private _generateKeyframesCSS(): string | undefined {\n    if (this.animation === 'custom' && this.customKeyframes) {\n      return `\n        @keyframes custom-skeleton-animation {\n          ${this.customKeyframes}\n        }\n        .skeleton--custom::before {\n          animation: custom-skeleton-animation var(--dds-skeleton-animation-duration) var(--dds-skeleton-animation-timing-function) infinite;\n        }\n      `\n    }\n    return undefined\n  }\n\n  private _updateMergedStyles() {\n    const keyframesCSS = this._generateKeyframesCSS()\n    const parts: string[] = []\n\n    if (keyframesCSS) {\n      parts.push(keyframesCSS)\n    }\n\n    if (this._userCustomStyles) {\n      parts.push(this._userCustomStyles)\n    }\n\n    const mergedStyles = parts.length > 0 ? parts.join('\\n') : undefined\n\n    // Only update if different to avoid infinite loops\n    if (mergedStyles !== this.customStyles) {\n      // Use requestUpdate to properly trigger Lit's update cycle\n      const oldValue = this.customStyles\n      ;(this as any).customStyles = mergedStyles\n      this.requestUpdate('customStyles', oldValue)\n    }\n  }\n\n  protected updated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(changedProperties)\n\n    // Track user-provided customStyles (separate from generated keyframes)\n    if (changedProperties.has('customStyles')) {\n      const currentStyles = this.customStyles || ''\n      const keyframesCSS = this._generateKeyframesCSS()\n\n      if (keyframesCSS && currentStyles.includes(keyframesCSS)) {\n        // Extract user's styles by removing our generated CSS\n        this._userCustomStyles =\n          currentStyles.replace(keyframesCSS, '').trim() || undefined\n      } else {\n        // No keyframes CSS, so all styles are user-provided\n        this._userCustomStyles = currentStyles || undefined\n      }\n    }\n\n    // Update merged styles when animation-related properties change\n    if (\n      changedProperties.has('animation') ||\n      changedProperties.has('customKeyframes')\n    ) {\n      this._updateMergedStyles()\n    }\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    // Initialize user custom styles\n    this._userCustomStyles = this.customStyles || undefined\n    // Generate and set merged styles\n    this._updateMergedStyles()\n  }\n\n  render() {\n    if (this.width) {\n      this.style.setProperty('--skeleton-width', this.width)\n    } else {\n      this.style.removeProperty('--skeleton-width')\n    }\n\n    if (this.height) {\n      this.style.setProperty('--skeleton-height', this.height)\n    } else {\n      this.style.removeProperty('--skeleton-height')\n    }\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"${clsx('skeleton', {\n          [`skeleton--${this.variant}`]: this.variant,\n          'skeleton--animate': !this.noAnimation,\n          [`skeleton--${this.animation}`]: !this.noAnimation && this.animation,\n        })}\"\n        role=\"status\"\n        aria-label=${this.ariaLabel ?? t('loading')}></div>\n    `\n  }\n}\n"],"names":["_DapDSSkeleton","DdsElement","keyframesCSS","parts","mergedStyles","oldValue","changedProperties","currentStyles","_changedProperties","html","clsx","_a","t","unsafeCSS","styles","DapDSSkeleton","__decorateClass","property"],"mappings":"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"}

package/dist/components/skeleton/skeleton.d.ts

@@ -1,5 +1,5 @@
-import { default as DapDSSkeleton } from './skeleton.component.js';
-export * from './skeleton.component.js';
+import { default as DapDSSkeleton } from './skeleton.component';
+export * from './skeleton.component';
 export default DapDSSkeleton;
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,6 @@
+import e from "./skeleton.component.js";
+e.define();
+export {
+  e as default
+};
+//# sourceMappingURL=skeleton.js.map

package/dist/components/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sources":["../../../src/components/skeleton/skeleton.ts"],"sourcesContent":["import DapDSSkeleton from './skeleton.component'\n\nexport * from './skeleton.component'\nexport default DapDSSkeleton\n\nDapDSSkeleton.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-skeleton': DapDSSkeleton\n  }\n}\n"],"names":["DapDSSkeleton"],"mappings":";AAKAA,EAAc,OAAO;"}

package/dist/components/skeleton/skeleton.scss.js

@@ -0,0 +1,5 @@
+const t = '*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{display:inline-block;width:var(--skeleton-width, auto);height:var(--skeleton-height, auto);--dds-skeleton-border-radius: var(--dds-radius-small);--dds-skeleton-animation-duration: 1.5s;--dds-skeleton-text-spacing: var(--dds-spacing-100);--dds-skeleton-animation-timing-function: ease-in-out;--dds-skeleton-base-color: rgb(0 0 0 / 11%);--dds-skeleton-color: linear-gradient( 90deg, transparent, rgb(0 0 0 / 10%), transparent )}:host([variant=text]){width:var(--skeleton-width, 100%);height:var(--skeleton-height, 1rem)}:host([variant=circular]){width:var(--skeleton-width, 2.5rem);height:var(--skeleton-height, 2.5rem)}:host([variant=rectangular]){width:var(--skeleton-width, 100%);height:var(--skeleton-height, 4rem)}.skeleton{display:block;position:relative;width:100%;height:100%;overflow:hidden;border-radius:var(--dds-skeleton-border-radius);background-color:var(--dds-skeleton-base-color)}.skeleton:before{content:"";position:absolute;inset:0;background:var(--dds-skeleton-color)}.skeleton--animate:before{animation:skeleton-loading var(--dds-skeleton-animation-duration) var(--dds-skeleton-animation-timing-function) infinite}.skeleton--wave:before{transform:translate(-100%);animation:skeleton-loading var(--dds-skeleton-animation-duration) var(--dds-skeleton-animation-timing-function) infinite}.skeleton--pulse:before{transform:none;animation:skeleton-pulse var(--dds-skeleton-animation-duration) var(--dds-skeleton-animation-timing-function) infinite;background:var(rgba(0, 0, 0, .1))}.skeleton--text:not(:last-child){margin-bottom:var(--dds-skeleton-text-spacing)}.skeleton--circular{border-radius:50%}@keyframes skeleton-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@media (prefers-reduced-motion: reduce){.skeleton:before{display:none}}';
+export {
+  t as default
+};
+//# sourceMappingURL=skeleton.scss.js.map

package/dist/components/skeleton/skeleton.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}