@planningcenter/tapestry 1.2.0-rc.0 → 1.2.0-rc.10

package/dist/packages/tapestry-wc/dist/components/tds-sidenav.js.map

@@ -1 +1 @@
-{"version":3,"file":"tds-sidenav.js","sources":["../../../../../../tapestry-wc/dist/components/tds-sidenav.js"],"sourcesContent":["/*!\n * Planning Center Tapestry Web Components\n * Version: 1.1.1-rc.3\n */\nimport { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';\nimport { r as removeSSRSlot } from './index2.js';\nimport { d as defineCustomElement$4 } from './popover-container.js';\nimport { d as defineCustomElement$3 } from './sidenav-popover.js';\nimport { d as defineCustomElement$2 } from './sidenav-responsive-header.js';\n\nlet sidenavMenuId = 0;\nconst Sidenav = /*@__PURE__*/ proxyCustomElement(class Sidenav extends HTMLElement {\n    constructor() {\n        super();\n        this.__registerHost();\n        this.sidenavMenuId = `tds-sidenav-menu-${sidenavMenuId++}`;\n        /**\n         * The label for the sidenav, used for accessibility.\n         */\n        this.label = \"Secondary\";\n    }\n    // --------------------------------------------------------------------------\n    //\n    //  Lifecycle\n    //\n    // --------------------------------------------------------------------------\n    componentDidLoad() {\n        removeSSRSlot(this.el);\n    }\n    // --------------------------------------------------------------------------\n    //\n    //  Render Methods\n    //\n    // --------------------------------------------------------------------------\n    render() {\n        return (h(Host, { key: '1e459bceead4531bace6d26d2742b4cbe68755fa' }, h(\"nav\", { key: '37bac08078cc34536e24571d817600e45cba1f18', id: this.sidenavMenuId, class: \"tds-sidenav\", \"aria-label\": this.label }, h(\"tds-sidenav-responsive-header\", { key: '3b717dfd822a8cc4fe928bddbac559e623ada2de', label: this.selectedItemLabel }), h(\"tds-sidenav-popover\", { key: 'df132d2ba09ef44ac65a4dc5019e5a45def16da6' }, h(\"slot\", { key: 'dbd56edde827fe59116145b5e6c3540afb7e2978' })))));\n    }\n    get el() { return this; }\n}, [6, \"tds-sidenav\", {\n        \"label\": [1],\n        \"selectedItemLabel\": [1, \"selected-item-label\"]\n    }]);\nfunction defineCustomElement$1() {\n    if (typeof customElements === \"undefined\") {\n        return;\n    }\n    const components = [\"tds-sidenav\", \"tds-popover-container\", \"tds-sidenav-popover\", \"tds-sidenav-responsive-header\"];\n    components.forEach(tagName => { switch (tagName) {\n        case \"tds-sidenav\":\n            if (!customElements.get(tagName)) {\n                customElements.define(tagName, Sidenav);\n            }\n            break;\n        case \"tds-popover-container\":\n            if (!customElements.get(tagName)) {\n                defineCustomElement$4();\n            }\n            break;\n        case \"tds-sidenav-popover\":\n            if (!customElements.get(tagName)) {\n                defineCustomElement$3();\n            }\n            break;\n        case \"tds-sidenav-responsive-header\":\n            if (!customElements.get(tagName)) {\n                defineCustomElement$2();\n            }\n            break;\n    } });\n}\n\nconst TdsSidenav = Sidenav;\nconst defineCustomElement = defineCustomElement$1;\n\nexport { TdsSidenav, defineCustomElement };\n//# sourceMappingURL=tds-sidenav.js.map\n\n//# sourceMappingURL=tds-sidenav.js.map"],"names":["HTMLElement"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAMA;AACA,IAAI,aAAa,GAAG,CAAC,CAAC;AACtB,MAAM,OAAO,iBAAiB,kBAAkB,CAAC,MAAM,OAAO,SAASA,CAAW,CAAC;AACnF,IAAI,WAAW,GAAG;AAClB,QAAQ,KAAK,EAAE,CAAC;AAChB,QAAQ,IAAI,CAAC,cAAc,EAAE,CAAC;AAC9B,QAAQ,IAAI,CAAC,aAAa,GAAG,CAAC,iBAAiB,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC;AACnE;AACA;AACA;AACA,QAAQ,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;AACjC,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,IAAI,gBAAgB,GAAG;AACvB,QAAQ,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/B,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,IAAI,MAAM,GAAG;AACb,QAAQ,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,EAAE,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,+BAA+B,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,CAAC,EAAE,CAAC,CAAC,qBAAqB,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE;AAC5d,KAAK;AACL,IAAI,IAAI,EAAE,GAAG,EAAE,OAAO,IAAI,CAAC,EAAE;AAC7B,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,EAAE;AACtB,QAAQ,OAAO,EAAE,CAAC,CAAC,CAAC;AACpB,QAAQ,mBAAmB,EAAE,CAAC,CAAC,EAAE,qBAAqB,CAAC;AACvD,KAAK,CAAC,CAAC,CAAC;AACR,SAAS,qBAAqB,GAAG;AACjC,IAAI,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE;AAC/C,QAAQ,OAAO;AACf,KAAK;AACL,IAAI,MAAM,UAAU,GAAG,CAAC,aAAa,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,+BAA+B,CAAC,CAAC;AACxH,IAAI,UAAU,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,QAAQ,OAAO;AACnD,QAAQ,KAAK,aAAa;AAC1B,YAAY,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;AAC9C,gBAAgB,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;AACxD,aAAa;AACb,YAAY,MAAM;AAClB,QAAQ,KAAK,uBAAuB;AACpC,YAAY,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;AAC9C,gBAAgB,qBAAqB,EAAE,CAAC;AACxC,aAAa;AACb,YAAY,MAAM;AAClB,QAAQ,KAAK,qBAAqB;AAClC,YAAY,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;AAC9C,gBAAgB,qBAAqB,EAAE,CAAC;AACxC,aAAa;AACb,YAAY,MAAM;AAClB,QAAQ,KAAK,+BAA+B;AAC5C,YAAY,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;AAC9C,gBAAgB,qBAAqB,EAAE,CAAC;AACxC,aAAa;AACb,YAAY,MAAM;AAClB,KAAK,EAAE,CAAC,CAAC;AACT,CAAC;AAGI,MAAC,mBAAmB,GAAG;;;;"}
+{"version":3,"file":"tds-sidenav.js","sources":["../../../../../../tapestry-wc/dist/components/tds-sidenav.js"],"sourcesContent":["/*!\n * Planning Center Tapestry Web Components\n * Version: 1.2.0-rc.9\n */\nimport { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';\nimport { r as removeSSRSlot } from './index2.js';\nimport { d as defineCustomElement$4 } from './popover-container.js';\nimport { d as defineCustomElement$3 } from './sidenav-popover.js';\nimport { d as defineCustomElement$2 } from './sidenav-responsive-header.js';\n\nlet sidenavMenuId = 0;\nconst Sidenav = /*@__PURE__*/ proxyCustomElement(class Sidenav extends HTMLElement {\n    constructor() {\n        super();\n        this.__registerHost();\n        this.sidenavMenuId = `tds-sidenav-menu-${sidenavMenuId++}`;\n        /**\n         * The label for the sidenav, used for accessibility.\n         */\n        this.label = \"Secondary\";\n    }\n    // --------------------------------------------------------------------------\n    //\n    //  Lifecycle\n    //\n    // --------------------------------------------------------------------------\n    componentDidLoad() {\n        removeSSRSlot(this.el);\n    }\n    // --------------------------------------------------------------------------\n    //\n    //  Render Methods\n    //\n    // --------------------------------------------------------------------------\n    render() {\n        return (h(Host, { key: '5af4fb0b2fb9d4d413f1645fa5fd3522f7e693f6', class: \"tds-sidenav\" }, h(\"nav\", { key: 'ee250c210b390dc1938a1c9da6cc8e0a6387907f', id: this.sidenavMenuId, class: \"tds-sidenav-nav\", \"aria-label\": this.label }, h(\"tds-sidenav-responsive-header\", { key: '554e9dfdf5452b3ab831980ad2352f9fb4eb9b6f', label: this.selectedItemLabel }), h(\"tds-sidenav-popover\", { key: 'd1eb2fe89776300f0aeba4a5c0b16ed7c5d7ff3b' }, h(\"slot\", { key: '5591be2278123ce8924b47150fe76ac306831b63' })))));\n    }\n    get el() { return this; }\n}, [6, \"tds-sidenav\", {\n        \"label\": [1],\n        \"selectedItemLabel\": [1, \"selected-item-label\"]\n    }]);\nfunction defineCustomElement$1() {\n    if (typeof customElements === \"undefined\") {\n        return;\n    }\n    const components = [\"tds-sidenav\", \"tds-popover-container\", \"tds-sidenav-popover\", \"tds-sidenav-responsive-header\"];\n    components.forEach(tagName => { switch (tagName) {\n        case \"tds-sidenav\":\n            if (!customElements.get(tagName)) {\n                customElements.define(tagName, Sidenav);\n            }\n            break;\n        case \"tds-popover-container\":\n            if (!customElements.get(tagName)) {\n                defineCustomElement$4();\n            }\n            break;\n        case \"tds-sidenav-popover\":\n            if (!customElements.get(tagName)) {\n                defineCustomElement$3();\n            }\n            break;\n        case \"tds-sidenav-responsive-header\":\n            if (!customElements.get(tagName)) {\n                defineCustomElement$2();\n            }\n            break;\n    } });\n}\n\nconst TdsSidenav = Sidenav;\nconst defineCustomElement = defineCustomElement$1;\n\nexport { TdsSidenav, defineCustomElement };\n//# sourceMappingURL=tds-sidenav.js.map\n\n//# sourceMappingURL=tds-sidenav.js.map"],"names":["HTMLElement"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAMA;AACA,IAAI,aAAa,GAAG,CAAC,CAAC;AACtB,MAAM,OAAO,iBAAiB,kBAAkB,CAAC,MAAM,OAAO,SAASA,CAAW,CAAC;AACnF,IAAI,WAAW,GAAG;AAClB,QAAQ,KAAK,EAAE,CAAC;AAChB,QAAQ,IAAI,CAAC,cAAc,EAAE,CAAC;AAC9B,QAAQ,IAAI,CAAC,aAAa,GAAG,CAAC,iBAAiB,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC;AACnE;AACA;AACA;AACA,QAAQ,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;AACjC,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,IAAI,gBAAgB,GAAG;AACvB,QAAQ,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/B,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,IAAI,MAAM,GAAG;AACb,QAAQ,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,EAAE,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,+BAA+B,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,CAAC,EAAE,CAAC,CAAC,qBAAqB,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE;AACtf,KAAK;AACL,IAAI,IAAI,EAAE,GAAG,EAAE,OAAO,IAAI,CAAC,EAAE;AAC7B,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,EAAE;AACtB,QAAQ,OAAO,EAAE,CAAC,CAAC,CAAC;AACpB,QAAQ,mBAAmB,EAAE,CAAC,CAAC,EAAE,qBAAqB,CAAC;AACvD,KAAK,CAAC,CAAC,CAAC;AACR,SAAS,qBAAqB,GAAG;AACjC,IAAI,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE;AAC/C,QAAQ,OAAO;AACf,KAAK;AACL,IAAI,MAAM,UAAU,GAAG,CAAC,aAAa,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,+BAA+B,CAAC,CAAC;AACxH,IAAI,UAAU,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,QAAQ,OAAO;AACnD,QAAQ,KAAK,aAAa;AAC1B,YAAY,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;AAC9C,gBAAgB,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;AACxD,aAAa;AACb,YAAY,MAAM;AAClB,QAAQ,KAAK,uBAAuB;AACpC,YAAY,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;AAC9C,gBAAgB,qBAAqB,EAAE,CAAC;AACxC,aAAa;AACb,YAAY,MAAM;AAClB,QAAQ,KAAK,qBAAqB;AAClC,YAAY,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;AAC9C,gBAAgB,qBAAqB,EAAE,CAAC;AACxC,aAAa;AACb,YAAY,MAAM;AAClB,QAAQ,KAAK,+BAA+B;AAC5C,YAAY,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;AAC9C,gBAAgB,qBAAqB,EAAE,CAAC;AACxC,aAAa;AACb,YAAY,MAAM;AAClB,KAAK,EAAE,CAAC,CAAC;AACT,CAAC;AAGI,MAAC,mBAAmB,GAAG;;;;"}

package/dist/unstable.css

@@ -1,305 +1,5 @@
 @layer t-critical, t-component;
 
-
-  @media (prefers-reduced-motion: no-preference) {
-
-:root {
-    interpolate-size: allow-keywords;
-}
-  }
-
-.tds-sidenav {
-  --tds-sidenav-indent: 12px;
-  --tds-sidenav-item-depth: 0;
-
-  --tds-sidenav-item-transition: background-color .2s cubic-bezier(.19, .91, .38, 1);
-
-  --tds-sidenav-item-background-hover: var(--t-fill-color-neutral-080);
-  --tds-sidenav-item-background-active: var(--t-fill-color-neutral-070);
-  --tds-sidenav-item-background-selected: var(--t-fill-color-neutral-050);
-
-  --tds-sidenav-item-nested-border-color: var(--t-fill-color-neutral-050);
-  --tds-sidenav-item-nested-border-color-hover: var(--t-fill-color-neutral-010);
-  --tds-sidenav-item-nested-border-color-selected: var(--t-fill-color-neutral-010);
-}
-
-.tds-sidenav :where(nav,ul,.tds-sidenav-section) {
-    display: flex;
-  }
-
-.tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse) {
-    flex-direction: column;
-    gap: 4px;
-    align-items: start;
-    width: 100%;
-  }
-
-.tds-sidenav-section-list {
-  width: 100%;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.tds-sidenav-section-header {
-  margin: var(--t-spacing-2) 0 0 0;
-  font-size: var(--t-font-size-sm);
-  font-weight: var(--t-font-weight-semibold);
-  color: var(--t-text-color-default-secondary);
-  text-transform: uppercase;
-}
-
-.tds-sidenav-section:first-of-type .tds-sidenav-section-header {
-    margin-top: 0;
-  }
-
-.tds-sidenav-section-list,
-.tds-sidenav-item {
-  width: 100%;
-  padding: 0;
-  margin: 0;
-}
-
-.tds-sidenav-item :is(a,button) {
-    position: relative;
-    display: flex;
-    gap: 12px;
-    align-items: center;
-    width: 100%;
-    padding: 12px;
-    overflow: hidden;
-    font-size: var(--t-font-size-sm);
-    line-height: 18px;
-    color: var(--t-text-color-default-headline);
-    white-space: nowrap;
-    text-decoration: none;
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
-    cursor: pointer;
-    outline: 0;
-    background-color: var(--tds-sidenav-item-background, transparent);
-    border: 0;
-    border-radius: 4px;
-    transition: var(--tds-sidenav-item-transition);
-  }
-
-:is(.tds-sidenav-item :is(a,button)):not(:has([slot="prefix"],.prefix,[slot="suffix"],.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not([slot="prefix"],.prefix,[slot="suffix"],.suffix)) {
-      display: block;
-      flex: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      text-align: left;
-      white-space: nowrap;
-    }
-
-:is(.tds-sidenav-item :is(a,button)):hover {
-      background-color: var(--tds-sidenav-item-background-hover);
-    }
-
-:is(.tds-sidenav-item :is(a,button)):active {
-      background-color: var(--tds-sidenav-item-background-active);
-    }
-
-:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]) {
-      display: block;
-      width: 16px;
-      height: 16px;
-      overflow: hidden;
-      color: var(--t-icon-color-default-secondary);
-    }
-
-:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg {
-        display: block;
-        width: 16px;
-        height: 16px;
-      }
-
-:is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section {
-      --tds-sidenav-indent: 19px;
-    }
-
-[aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list {
-      visibility: visible;
-      block-size: auto;
-      opacity: 1;
-    }
-
-.tds-sidenav-item.selected :is(a,button) {
-    --tds-sidenav-item-nested-background: transparent;
-    --tds-sidenav-item-nested-border-color: var(--tds-sidenav-item-nested-border-color-selected);
-    --tds-sidenav-item-background: var(--tds-sidenav-item-background-selected);
-    font-weight: 600;
-  }
-
-:is(.tds-sidenav-item.selected :is(a,button)) .prefix,:is(.tds-sidenav-item.selected :is(a,button)) [slot="prefix"] {
-      color: var(--t-icon-color-default-primary);
-    }
-
-.tds-sidenav-item .tds-sidenav-section-list {
-    --tds-sidenav-item-depth: 1;
-    gap: 0;
-  }
-
-.tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list) {
-      visibility: hidden;
-      block-size: 0;
-      overflow-y: clip;
-      opacity: 0;
-      transition: content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
-    }
-
-:is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list {
-      --tds-sidenav-item-depth: 2;
-    }
-
-:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button) {
-      height: 32px;
-      padding-block: 9px;
-      padding-left: calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + 2px);
-      line-height: 1;
-      background-color: transparent;
-    }
-
-:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
-        width: 2px;
-        content: "";
-        background-color: var(--tds-sidenav-item-nested-border-color);
-        transition: var(--tds-sidenav-item-transition);
-      }
-
-:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after {
-        position: absolute;
-        inset: 0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
-        z-index: -1;
-        height: 100%;
-        content: "";
-        background-color: var(--tds-sidenav-item-nested-background);
-        border-radius: 0 4px 4px 0;
-        transition: var(--tds-sidenav-item-transition);
-      }
-
-.selected:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) {
-        background-color: transparent;
-      }
-
-.selected:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before {
-          background-color: var(--tds-sidenav-item-nested-border-color-selected);
-        }
-
-.selected:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after {
-          background-color: var(--tds-sidenav-item-background-selected);
-        }
-
-:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover {
-        background-color: transparent;
-      }
-
-:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover::before {
-          background-color: var(--tds-sidenav-item-nested-border-color-hover);
-        }
-
-:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover::after {
-          background-color: var(--tds-sidenav-item-background-hover);
-        }
-
-.tds-sidenav-responsive-header {
-  display: flex;
-  gap: var(--t-spacing-2);
-  align-items: center;
-  width: 100%;
-}
-
-.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    order: 0;
-    height: var(--t-container-size-md);
-    padding: 3px var(--t-spacing-1);
-    background-color: var(--t-fill-color-button-neutral-outline-dim-default);
-    border: 1px solid var(--t-border-color-button-neutral);
-    border-radius: var(--t-border-radius-md);
-  }
-
-:is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):focus,:is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):focus-visible,:is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):hover {
-      background-color: var(--t-fill-color-button-neutral-outline-dim-hover);
-    }
-
-:is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):active {
-      background-color: var(--t-fill-color-button-neutral-outline-dim-active);
-    }
-
-.tds-sidenav-responsive-header .tds-sidenav-responsive-header-label {
-    flex: 1;
-    order: 1;
-    margin: 0;
-    font-size: var(--t-font-size-lg);
-    font-weight: var(--t-font-weight-medium);
-    color: var(--t-text-color-default-headline);
-  }
-
-@media (max-width: 719px) {
-  .tds-sidenav-collapse {
-    position: absolute;
-    z-index: 10001;
-    display: none;
-    max-width: min(448px, calc(100vw - 48px));
-    padding: 0;
-    margin: 12px 0;
-    overflow: hidden;
-    outline: 0;
-    background: var(--t-surface-color-card);
-    border: 0;
-    border-radius: 6px;
-    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .25);
-    will-change: transform;
-    position-area: bottom span-right;
-  }
-
-  .tds-sidenav-collapse:popover-open,
-  .tds-sidenav-collapse.\:popover-open {
-    display: flex;
-  }
-
-  .tds-sidenav-scroll-container {
-    --webkit-overflow-scrolling: touch;
-    display: block;
-    width: 100%;
-    height: -moz-fit-content;
-    height: fit-content;
-    padding: var(--t-spacing-2);
-    overflow-y: auto;
-  }
-
-  .tds-sidenav-item :is(a, button) :is(.prefix, [slot="prefix"]) {
-    display: none;
-  }
-}
-
-@media (min-width: 720px) {
-  .tds-sidenav-responsive-header {
-    display: none;
-  }
-}
-
-:is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated)  > :not([slot="ssr"]) {
-      display: none;
-    }
-
-:is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated)  > [slot="ssr"] {
-      display: block;
-    }
-
-tds-sidenav-section:not(.hydrated)  > [slot="ssr"] {
-      display: flex;
-      flex-direction: column;
-    }
-
 @layer t-critical {
   tds-page-header:not(.hydrated) {
     display: none;
@@ -579,6 +279,298 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"] {
   }
 }
 
+
+  @media (prefers-reduced-motion: no-preference) {
+
+:root {
+    interpolate-size: allow-keywords;
+}
+  }
+
+@layer tds-component {
+  tds-sidenav {
+    --tds-sidenav-indent: 12px;
+    --tds-sidenav-item-depth: 0;
+
+    --tds-sidenav-item-transition: background-color .2s cubic-bezier(.19, .91, .38, 1);
+
+    --tds-sidenav-item-background-hover: var(--t-fill-color-button-interaction-ghost-hover);
+    --tds-sidenav-item-background-active: var(--t-fill-color-button-interaction-ghost-active);
+    --tds-sidenav-item-background-selected: var(--t-fill-color-button-interaction-ghost-active);
+
+    --tds-sidenav-item-nested-border-color: var(--t-fill-color-neutral-050);
+    --tds-sidenav-item-nested-border-color-hover: var(--t-fill-color-neutral-050);
+    --tds-sidenav-item-nested-border-color-selected: var(--t-border-color-status-info);
+
+    --tds-sidenav-item-icon-color: var(--t-icon-color-default-secondary);
+    --tds-sidenav-item-icon-color-selected: var(--t-icon-color-default-primary);
+  }
+
+  .is-classic tds-sidenav,
+  .tds-sidenav--theme-gray {
+    --tds-sidenav-item-background-hover: var(--t-fill-color-neutral-080);
+    --tds-sidenav-item-background-active: var(--t-fill-color-neutral-070);
+    --tds-sidenav-item-background-selected: var(--t-fill-color-neutral-050);
+    --tds-sidenav-item-nested-border-color-hover: var(--t-fill-color-neutral-050);
+    --tds-sidenav-item-nested-border-color-selected: var(--t-fill-color-neutral-010);
+  }
+}
+
+.tds-sidenav :where(nav,ul,.tds-sidenav-section) {
+    display: flex;
+  }
+
+.tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse) {
+    flex-direction: column;
+    gap: var(--t-spacing-half);
+    width: 100%;
+  }
+
+.tds-sidenav-section-list {
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.tds-sidenav-section-header {
+  margin: var(--t-spacing-2) 0 0 0;
+  font-size: var(--t-font-size-sm);
+  font-weight: var(--t-font-weight-semibold);
+  color: var(--t-text-color-default-secondary);
+  text-transform: uppercase;
+}
+
+.tds-sidenav-section:first-of-type .tds-sidenav-section-header {
+    margin-top: 0;
+  }
+
+.tds-sidenav-section-list,
+.tds-sidenav-item {
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.tds-sidenav-item :is(a,button) {
+    position: relative;
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    width: 100%;
+    padding: 12px;
+    overflow: hidden;
+    font-size: var(--t-font-size-sm);
+    line-height: 18px;
+    color: var(--t-text-color-default-headline);
+    white-space: nowrap;
+    text-decoration: none;
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    cursor: pointer;
+    background-color: var(--tds-sidenav-item-background, transparent);
+    border: 0;
+    border-radius: var(--t-border-radius-default);
+    transition: var(--tds-sidenav-item-transition);
+  }
+
+:is(.tds-sidenav-item :is(a,button)):not(:has([slot="prefix"],.prefix,[slot="suffix"],.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not([slot="prefix"],.prefix,[slot="suffix"],.suffix)) {
+      display: block;
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-align: left;
+      white-space: nowrap;
+    }
+
+:is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible {
+      --tds-sidenav-item-background: var(--tds-sidenav-item-background-hover);
+      color: var(--t-text-color-default-headline);
+      text-decoration: none;
+    }
+
+:is(.tds-sidenav-item :is(a,button)):active {
+      --tds-sidenav-item-background: var(--tds-sidenav-item-background-active);
+    }
+
+:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]) {
+      overflow: hidden;
+      color: var(--tds-sidenav-item-icon-color);
+    }
+
+:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg {
+        display: block;
+        width: var(--t-element-size-md);
+        height: var(--t-element-size-md);
+      }
+
+:is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section {
+      --tds-sidenav-indent: 19px;
+    }
+
+[aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list {
+      visibility: visible;
+      block-size: auto;
+      opacity: 1;
+    }
+
+.tds-sidenav-item.selected :is(a,button) {
+    --tds-sidenav-item-nested-background: transparent;
+    --tds-sidenav-item-background: var(--tds-sidenav-item-background-selected);
+    --tds-sidenav-item-icon-color: var(--tds-sidenav-item-icon-color-selected);
+    font-weight: 600;
+  }
+
+.tds-sidenav-item .tds-sidenav-section-list {
+    --tds-sidenav-item-depth: 1;
+    gap: 0;
+  }
+
+.tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list) {
+      visibility: hidden;
+      block-size: 0;
+      overflow-y: clip;
+      opacity: 0;
+      transition: content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
+    }
+
+:is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list {
+      --tds-sidenav-item-depth: 2;
+    }
+
+:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button) {
+      height: 32px;
+      padding-block: 9px;
+      padding-left: calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + 2px);
+      line-height: 1;
+      background-color: transparent;
+    }
+
+:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
+        width: 2px;
+        content: "";
+        background-color: var(--tds-sidenav-item-nested-border-color);
+        transition: var(--tds-sidenav-item-transition);
+      }
+
+:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after {
+        position: absolute;
+        inset: 0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
+        z-index: -1;
+        height: 100%;
+        content: "";
+        background-color: var(--tds-sidenav-item-background);
+        border-radius: 0 var(--t-border-radius-default) var(--t-border-radius-default) 0;
+        transition: var(--tds-sidenav-item-transition);
+      }
+
+:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible {
+        --tds-sidenav-item-nested-border-color: var(--tds-sidenav-item-nested-border-color-hover);
+        --tds-sidenav-item-background: var(--tds-sidenav-item-background-hover);
+      }
+
+.selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button) {
+      --tds-sidenav-item-nested-border-color: var(--tds-sidenav-item-nested-border-color-selected);
+    }
+
+.tds-sidenav-responsive-header {
+  display: flex;
+  gap: var(--t-spacing-2);
+  align-items: center;
+  width: 100%;
+}
+
+.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    order: 0;
+    height: var(--t-container-size-md);
+    padding: 3px var(--t-spacing-1);
+    background-color: var(--t-fill-color-button-neutral-outline-dim-default);
+    border: 1px solid var(--t-border-color-button-neutral);
+    border-radius: var(--t-border-radius-md);
+  }
+
+:is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):focus,:is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):focus-visible,:is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):hover {
+      background-color: var(--t-fill-color-button-neutral-outline-dim-hover);
+    }
+
+:is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):active {
+      background-color: var(--t-fill-color-button-neutral-outline-dim-active);
+    }
+
+.tds-sidenav-responsive-header .tds-sidenav-responsive-header-label {
+    flex: 1;
+    order: 1;
+    margin: 0;
+    font-size: var(--t-font-size-lg);
+    font-weight: var(--t-font-weight-medium);
+    color: var(--t-text-color-default-headline);
+  }
+
+@media (max-width: 719px) {
+  .tds-sidenav-collapse {
+    position: absolute;
+    z-index: 10001;
+    display: none;
+    max-width: min(448px, calc(100vw - 48px));
+    padding: 0;
+    margin: 12px 0;
+    overflow: hidden;
+    outline: 0;
+    background: var(--t-surface-color-card);
+    border: 0;
+    border-radius: 6px;
+    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .25);
+    will-change: transform;
+    position-area: bottom span-right;
+  }
+
+  .tds-sidenav-collapse:popover-open,
+  .tds-sidenav-collapse.\:popover-open {
+    display: flex;
+  }
+
+  .tds-sidenav-scroll-container {
+    --webkit-overflow-scrolling: touch;
+    display: block;
+    width: 100%;
+    height: -moz-fit-content;
+    height: fit-content;
+    padding: var(--t-spacing-2);
+    overflow-y: auto;
+  }
+
+  .tds-sidenav-item :is(a, button) :is(.prefix, [slot="prefix"]) {
+    display: none;
+  }
+}
+
+@media (min-width: 720px) {
+  .tds-sidenav-responsive-header {
+    display: none;
+  }
+}
+
+:is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated)  > :not([slot="ssr"]) {
+      display: none;
+    }
+
+:is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated)  > [slot="ssr"] {
+      display: block;
+    }
+
+tds-sidenav-section:not(.hydrated)  > [slot="ssr"] {
+      display: flex;
+      flex-direction: column;
+    }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */