@planningcenter/tapestry 1.1.0-rc.3 → 1.1.0-rc.5

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

@@ -0,0 +1 @@
+{"version":3,"file":"tds-sidenav-section.js","sources":["../../../../../../tapestry-wc/dist/components/tds-sidenav-section.js"],"sourcesContent":["/*!\n * Planning Center Tapestry Web Components\n * Version: 1.1.0-rc.4\n */\nimport { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';\n\nlet sidenavSectionId = 0;\nconst SidenavSection = /*@__PURE__*/ proxyCustomElement(class SidenavSection extends HTMLElement {\n    constructor() {\n        super();\n        this.__registerHost();\n        this.componentId = `sidenav-section-header-${sidenavSectionId++}`;\n    }\n    // --------------------------------------------------------------------------\n    //\n    //  Render Methods\n    //\n    // --------------------------------------------------------------------------\n    render() {\n        return (h(Host, { key: 'd6927841b03512afa5f72c382461cf0b84d037e3', class: \"tds-sidenav-section\" }, this.label && (h(\"h2\", { key: '4287b5ff6eb3e0ff7c31b5f8f393ce4b2a7b57b6', id: `${this.componentId}`, class: \"tds-sidenav-section-header\" }, this.label)), h(\"ul\", { key: 'aa6d707a4982c6c7b1bbece15a65dd90a11a7fa5', class: \"tds-sidenav-section-list\", \"aria-labelledby\": this.label ? `${this.componentId}` : undefined }, h(\"slot\", { key: 'b3754036903248516b095e89b55e1f1fb1c545d8' }))));\n    }\n    get el() { return this; }\n}, [4, \"tds-sidenav-section\", {\n        \"label\": [1]\n    }]);\nfunction defineCustomElement$1() {\n    if (typeof customElements === \"undefined\") {\n        return;\n    }\n    const components = [\"tds-sidenav-section\"];\n    components.forEach(tagName => { switch (tagName) {\n        case \"tds-sidenav-section\":\n            if (!customElements.get(tagName)) {\n                customElements.define(tagName, SidenavSection);\n            }\n            break;\n    } });\n}\n\nconst TdsSidenavSection = SidenavSection;\nconst defineCustomElement = defineCustomElement$1;\n\nexport { TdsSidenavSection, defineCustomElement };\n//# sourceMappingURL=tds-sidenav-section.js.map\n\n//# sourceMappingURL=tds-sidenav-section.js.map"],"names":["HTMLElement"],"mappings":";;AAAA;AACA;AACA;AACA;AAEA;AACA,IAAI,gBAAgB,GAAG,CAAC,CAAC;AACzB,MAAM,cAAc,iBAAiB,kBAAkB,CAAC,MAAM,cAAc,SAASA,CAAW,CAAC;AACjG,IAAI,WAAW,GAAG;AAClB,QAAQ,KAAK,EAAE,CAAC;AAChB,QAAQ,IAAI,CAAC,cAAc,EAAE,CAAC;AAC9B,QAAQ,IAAI,CAAC,WAAW,GAAG,CAAC,uBAAuB,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC;AAC1E,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,IAAI,MAAM,GAAG;AACb,QAAQ,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,qBAAqB,EAAE,EAAE,IAAI,CAAC,KAAK,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,4BAA4B,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,0BAA0B,EAAE,iBAAiB,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,GAAG,SAAS,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,CAAC,CAAC,CAAC,EAAE;AAC1e,KAAK;AACL,IAAI,IAAI,EAAE,GAAG,EAAE,OAAO,IAAI,CAAC,EAAE;AAC7B,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,EAAE;AAC9B,QAAQ,OAAO,EAAE,CAAC,CAAC,CAAC;AACpB,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,qBAAqB,CAAC,CAAC;AAC/C,IAAI,UAAU,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,QAAQ,OAAO;AACnD,QAAQ,KAAK,qBAAqB;AAClC,YAAY,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;AAC9C,gBAAgB,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;AAC/D,aAAa;AACb,YAAY,MAAM;AAClB,KAAK,EAAE,CAAC,CAAC;AACT,CAAC;AAGI,MAAC,mBAAmB,GAAG;;;;"}

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

@@ -0,0 +1,44 @@
+import { proxyCustomElement, H, h, Host } from './../../../../ext/@stencil/core/internal/client/index.js';
+
+/*!
+ * Planning Center Tapestry Web Components
+ * Version: 1.1.0-rc.4
+ */
+
+const Sidenav = /*@__PURE__*/ proxyCustomElement(class Sidenav extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * The label for the sidenav, used for accessibility.
+         */
+        this.label = "Secondary Navigation";
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    // --------------------------------------------------------------------------
+    render() {
+        return (h(Host, { key: '53e44587f254a6462074e0a024317a8fbfc0d872' }, h("nav", { key: '82969d4f130b9e4cc1212265108e620d9f55e016', class: "tds-sidenav", "aria-label": this.label }, h("slot", { key: 'e5ec09b2b55ec233fc43db92d9ce922d900c52e1', name: "mobile" }), h("div", { key: '12257308ffbc2256a14831cff36ca79dc18196ae', class: "tds-sidenav-collapse" }, h("slot", { key: '67e55dacd4a8684fb18b2703ed498068dd2dc4a4' })))));
+    }
+}, [4, "tds-sidenav", {
+        "label": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-sidenav"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-sidenav":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Sidenav);
+            }
+            break;
+    } });
+}
+const defineCustomElement = defineCustomElement$1;
+
+export { defineCustomElement };
+//# sourceMappingURL=tds-sidenav.js.map

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

@@ -0,0 +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.0-rc.4\n */\nimport { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';\n\nconst Sidenav = /*@__PURE__*/ proxyCustomElement(class Sidenav extends HTMLElement {\n    constructor() {\n        super();\n        this.__registerHost();\n        /**\n         * The label for the sidenav, used for accessibility.\n         */\n        this.label = \"Secondary Navigation\";\n    }\n    // --------------------------------------------------------------------------\n    //\n    //  Render Methods\n    //\n    // --------------------------------------------------------------------------\n    render() {\n        return (h(Host, { key: '53e44587f254a6462074e0a024317a8fbfc0d872' }, h(\"nav\", { key: '82969d4f130b9e4cc1212265108e620d9f55e016', class: \"tds-sidenav\", \"aria-label\": this.label }, h(\"slot\", { key: 'e5ec09b2b55ec233fc43db92d9ce922d900c52e1', name: \"mobile\" }), h(\"div\", { key: '12257308ffbc2256a14831cff36ca79dc18196ae', class: \"tds-sidenav-collapse\" }, h(\"slot\", { key: '67e55dacd4a8684fb18b2703ed498068dd2dc4a4' })))));\n    }\n}, [4, \"tds-sidenav\", {\n        \"label\": [1]\n    }]);\nfunction defineCustomElement$1() {\n    if (typeof customElements === \"undefined\") {\n        return;\n    }\n    const components = [\"tds-sidenav\"];\n    components.forEach(tagName => { switch (tagName) {\n        case \"tds-sidenav\":\n            if (!customElements.get(tagName)) {\n                customElements.define(tagName, Sidenav);\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;AAEA;AACA,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;AACA;AACA;AACA,QAAQ,IAAI,CAAC,KAAK,GAAG,sBAAsB,CAAC;AAC5C,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,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,KAAK,EAAE,sBAAsB,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,0CAA0C,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE;AAC3a,KAAK;AACL,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,EAAE;AACtB,QAAQ,OAAO,EAAE,CAAC,CAAC,CAAC;AACpB,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,CAAC,CAAC;AACvC,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,KAAK,EAAE,CAAC,CAAC;AACT,CAAC;AAGI,MAAC,mBAAmB,GAAG;;;;"}

package/dist/unstable.css

@@ -1,5 +1,227 @@
 @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,.tds-sidenav-collapse) {
+    display: flex;
+    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;
+    appearance: none;
+    cursor: pointer;
+    outline: 0;
+    background-color: 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;
+    }
+
+.selected > :is(.tds-sidenav-item :is(a,button)) {
+      --tds-sidenav-item-nested-background: transparent;
+      --tds-sidenav-item-nested-border-color: var(--tds-sidenav-item-nested-border-color-selected);
+      font-weight: 600;
+      background-color: var(--tds-sidenav-item-background-selected);
+    }
+
+:is(.selected > :is(.tds-sidenav-item :is(a,button))) .prefix,:is(.selected > :is(.tds-sidenav-item :is(a,button))) [slot="prefix"] {
+        color: var(--t-icon-color-default-primary);
+      }
+
+: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;
+      }
+
+: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 .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);
+        }
+
+/* @media (max-width: 767px) {
+  .tds-sidenav-collapse {
+    position: absolute;
+    z-index: 7000;
+    max-width: 448px;
+    padding: 16px;
+    background: #fff;
+    border-radius: 6px;
+    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .25);
+
+    &:not(.show) {
+      display: none;
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  .tds-sidenav-header {
+    display: none;
+  }
+} */
+
 @layer t-critical {
   tds-page-header:not(.hydrated) {
     display: none;
@@ -847,4 +1069,295 @@
   --t-banner-spacing: calc(var(--t-spacing-half) + var(--t-spacing-1));
 }
 
+.tds-btn {
+  --tds-btn-padding-x: 12px;
+  --tds-btn-padding-truncated-x: 8px;
+  --tds-btn-padding-y: 3px;
+  --tds-btn-font-size: 16px;
+  --tds-btn-font-weight: 400;
+  --tds-btn-line-height: 1.5;
+  --tds-btn-color: var(--t-text-color-default-headline);
+  --tds-btn-bg: transparent;
+  --tds-btn-border-width: var(--t-border-width-default);
+  --tds-btn-border-color: transparent;
+  --tds-btn-border-radius: var(--t-border-radius-md);
+  --tds-btn-border-color-hover: transparent;
+  --tds-btn-disabled-opacity: 1;
+  --tds-btn-min-height: 32px;
+  display: inline-flex;
+  gap: 1ex;
+  align-items: center;
+  min-height: var(--tds-btn-min-height);
+  padding: var(--tds-btn-padding-y) var(--tds-btn-padding-x);
+  font-size: var(--tds-btn-font-size);
+  font-weight: var(--tds-btn-font-weight);
+  line-height: var(--tds-btn-line-height);
+  vertical-align: middle;
+  color: var(--tds-btn-color);
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  background-color: var(--tds-btn-bg);
+  border: var(--tds-btn-border-width) solid var(--tds-btn-border-color);
+  border-radius: var(--tds-btn-border-radius);
+  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+}
+
+.tds-btn:where(.tds-btn--icononly,:has(.prefix,svg:not(.suffix))) {
+    padding-left: var(--tds-btn-padding-truncated-x);
+  }
+
+.tds-btn:where(.tds-btn--icononly,:has(.suffix,svg:not(.prefix))) {
+    padding-right: var(--tds-btn-padding-truncated-x);
+  }
+
+.tds-btn:hover {
+    color: var(--tds-btn-color-hover);
+    background-color: var(--tds-btn-bg-hover);
+    border-color: var(--tds-btn-border-color-hover);
+  }
+
+.tds-btn:focus-visible {
+    color: var(--tds-btn-color-hover);
+    outline: solid 3px var(--t-border-color-status-info);
+    outline-offset: 1px;
+    background-color: var(--tds-btn-bg-hover);
+    border-color: var(--tds-btn-border-color-hover);
+  }
+
+.tds-btn:active,.tds-btn.active {
+    color: var(--tds-btn-color-active);
+    background-color: var(--tds-btn-bg-active);
+    border-color: var(--tds-btn-border-color-active);
+  }
+
+.tds-btn:disabled,.tds-btn.disabled {
+    color: var(--tds-btn-color-disabled);
+    pointer-events: none;
+    background-color: var(--tds-btn-bg-disabled);
+    border-color: var(--tds-btn-border-color-disabled);
+    opacity: var(--tds-btn-disabled-opacity);
+  }
+
+.tds-btn svg {
+    display: block;
+    inline-size: auto;
+    max-inline-size: 100%;
+    block-size: auto;
+    max-block-size: .66666667lh;
+    color: var(--tds-btn-icon-color, currentColor);
+  }
+
+@media (prefers-reduced-motion: reduce) {
+
+.tds-btn {
+    transition: none;
+}
+  }
+
+/* Effective height 48px */
+
+.tds-btn--xl {
+  --tds-btn-padding-y: 11px;
+  --tds-btn-padding-x: 18px;
+  --tds-btn-padding-truncated-x: 12px;
+  --tds-btn-min-height: 48px;
+}
+
+/* Effective height 40px */
+
+.tds-btn--lg {
+  --tds-btn-padding-y: 7px;
+  --tds-btn-padding-x: 14px;
+  --tds-btn-min-height: 40px;
+}
+
+/* Effective height 24px */
+
+.tds-btn--sm {
+  --tds-btn-padding-y: .5px;
+  --tds-btn-padding-x: 7px;
+  --tds-btn-padding-truncated-x: 4px;
+  --tds-btn-min-height: 24px;
+  --tds-btn-font-size: var(--t-font-size-sm);
+}
+
+/* Effective height 20px */
+
+.tds-btn--xs {
+  --tds-btn-padding-y: 0;
+  --tds-btn-padding-x: 5px;
+  --tds-btn-padding-truncated-x: 5px;
+  --tds-btn-min-height: 20px;
+  --tds-btn-font-size: var(--t-font-size-xs);
+}
+
+.tds-btn--neutral {
+  --tds-btn-color: var(--t-text-color-default-inverted);
+  --tds-btn-bg: var(--t-fill-color-button-neutral-solid-default);
+  --tds-btn-border-color: var(--t-fill-color-button-neutral-solid-default);
+  --tds-btn-color-hover: var(--t-text-color-default-inverted);
+  --tds-btn-bg-hover: var(--t-fill-color-button-neutral-solid-hover);
+  --tds-btn-border-color-hover: var(--t-fill-color-button-neutral-solid-hover);
+  --tds-btn-color-active: var(--t-text-color-default-inverted);
+  --tds-btn-bg-active: var(--t-fill-color-button-neutral-solid-active);
+  --tds-btn-border-color-active: var(--t-fill-color-button-neutral-solid-active);
+  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
+  --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-solid-disabled);
+  --tds-btn-border-color-disabled: var(--t-fill-color-button-neutral-solid-disabled);
+}
+
+.tds-btn--interaction {
+  --tds-btn-color: var(--t-text-color-default-inverted);
+  --tds-btn-bg: var(--t-fill-color-button-interaction-solid-default);
+  --tds-btn-border-color: var(--t-fill-color-button-interaction-solid-default);
+  --tds-btn-color-hover: var(--t-text-color-default-inverted);
+  --tds-btn-bg-hover: var(--t-fill-color-button-interaction-solid-hover);
+  --tds-btn-border-color-hover: var(--t-fill-color-button-interaction-solid-hover);
+  --tds-btn-color-active: var(--t-text-color-default-inverted);
+  --tds-btn-bg-active: var(--t-fill-color-button-interaction-solid-active);
+  --tds-btn-border-color-active: var(--t-fill-color-button-interaction-solid-active);
+  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
+  --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
+  --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
+}
+
+.tds-btn--delete {
+  --tds-btn-color: var(--t-text-color-default-inverted);
+  --tds-btn-bg: var(--t-fill-color-button-delete-solid-default);
+  --tds-btn-border-color: var(--t-fill-color-button-delete-solid-default);
+  --tds-btn-color-hover: var(--t-text-color-default-inverted);
+  --tds-btn-bg-hover: var(--t-fill-color-button-delete-solid-hover);
+  --tds-btn-border-color-hover: var(--t-fill-color-button-delete-solid-hover);
+  --tds-btn-color-active: var(--t-text-color-default-inverted);
+  --tds-btn-bg-active: var(--t-fill-color-button-delete-solid-active);
+  --tds-btn-border-color-active: var(--t-fill-color-button-delete-solid-active);
+  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
+  --tds-btn-bg-disabled: var(--t-fill-color-button-delete-solid-disabled);
+  --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
+}
+
+.tds-btn--outline-neutral {
+  --tds-btn-color: var(--t-text-color-status-neutral);
+  --tds-btn-border-color: var(--t-border-color-button-neutral);
+  --tds-btn-color-hover: var(--tds-btn-color);
+  --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
+  --tds-btn-border-color-hover: var(--t-border-color-button-neutral);
+  --tds-btn-color-active: var(--tds-btn-color);
+  --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
+  --tds-btn-border-color-active: var(--t-border-color-button-neutral);
+  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
+  --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-outline-dim-disabled);
+  --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
+}
+
+.tds-btn--outline-interaction {
+  --tds-btn-color: var(--t-text-color-status-info);
+  --tds-btn-border-color: var(--t-border-color-button-info);
+  --tds-btn-color-hover: var(--tds-btn-color);
+  --tds-btn-bg-hover: var(--t-fill-color-button-interaction-outline-dim-hover);
+  --tds-btn-border-color-hover: var(--tds-btn-border-color);
+  --tds-btn-color-active: var(--tds-btn-color);
+  --tds-btn-bg-active: var(--t-fill-color-button-interaction-outline-dim-active);
+  --tds-btn-border-color-active: var(--tds-btn-border-color);
+  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
+  --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-outline-dim-disabled);
+  --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
+}
+
+.tds-btn--outline-delete {
+  --tds-btn-color: var(--t-text-color-status-error);
+  --tds-btn-border-color: var(--t-border-color-button-delete);
+  --tds-btn-color-hover: var(--tds-btn-color);
+  --tds-btn-bg-hover: var(--t-fill-color-button-delete-outline-dim-hover);
+  --tds-btn-border-color-hover: var(--tds-btn-border-color);
+  --tds-btn-color-active: var(--tds-btn-color);
+  --tds-btn-bg-active: var(--t-fill-color-button-delete-outline-dim-active);
+  --tds-btn-border-color-active: var(--tds-btn-border-color);
+  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
+  --tds-btn-bg-disabled: var(--t-fill-color-button-delete-outline-dim-disabled);
+  --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
+}
+
+.tds-btn--ghost-neutral {
+  --tds-btn-color: var(--t-text-color-status-neutral);
+  --tds-btn-border-color: transparent;
+  --tds-btn-color-hover: var(--tds-btn-color);
+  --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
+  --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
+  --tds-btn-color-active: var(--tds-btn-color);
+  --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
+  --tds-btn-border-color-active: var(--tds-btn-bg-active);
+  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
+  --tds-btn-bg-disabled: transparent;
+  --tds-btn-border-color-disabled: transparent;
+}
+
+.tds-btn--ghost-interaction {
+  --tds-btn-color: var(--t-text-color-status-info);
+  --tds-btn-border-color: transparent;
+  --tds-btn-color-hover: var(--tds-btn-color);
+  --tds-btn-bg-hover: var(--t-fill-color-button-interaction-outline-dim-hover);
+  --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
+  --tds-btn-color-active: var(--tds-btn-color);
+  --tds-btn-bg-active: var(--t-fill-color-button-interaction-outline-dim-active);
+  --tds-btn-border-color-active: var(--tds-btn-bg-active);
+  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
+  --tds-btn-bg-disabled: transparent;
+  --tds-btn-border-color-disabled: transparent;
+}
+
+.tds-btn--ghost-delete {
+  --tds-btn-color: var(--t-text-color-status-error);
+  --tds-btn-border-color: transparent;
+  --tds-btn-color-hover: var(--tds-btn-color);
+  --tds-btn-bg-hover: var(--t-fill-color-button-delete-outline-dim-hover);
+  --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
+  --tds-btn-color-active: var(--tds-btn-color);
+  --tds-btn-bg-active: var(--t-fill-color-button-delete-outline-dim-active);
+  --tds-btn-border-color-active: var(--tds-btn-bg-active);
+  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
+  --tds-btn-bg-disabled: transparent;
+  --tds-btn-border-color-disabled: transparent;
+}
+
+.tds-btn--pill {
+  --tds-btn-border-radius: 999px;
+  --tds-btn-padding-y: 4px;
+  --tds-btn-padding-x: 13px;
+
+  --tds-btn-color: var(--t-text-color-default-primary);
+  --tds-btn-bg: var(--t-fill-color-button-pill-default);
+  --tds-btn-border-color: var(--tds-btn-bg);
+  --tds-btn-color-hover: var(--tds-btn-color);
+  --tds-btn-bg-hover: var(--t-fill-color-button-pill-hover);
+  --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
+
+  --tds-btn-color-active: var(--tds-btn-color);
+  --tds-btn-bg-active: var(--t-fill-color-button-pill-active);
+  --tds-btn-border-color-active: var(--tds-btn-bg-active);
+  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
+  --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-solid-disabled);
+  --tds-btn-border-color-disabled: var(--t-fill-color-button-neutral-solid-disabled);
+  --tds-btn-icon-color: var(--t-icon-color-default-secondary);
+  --tds-btn-min-height: 32px;
+}
+
+.tds-btn--pill:is(.tds-btn--sm) {
+    --tds-btn-padding-y: 1px;
+    --tds-btn-padding-x: 7px;
+    --tds-btn-min-height: auto;
+  }
+
+.tds-btn--pill:is(.tds-btn--xs) {
+    --tds-btn-padding-y: 1px;
+    --tds-btn-padding-x: 9px;
+    --tds-btn-min-height: auto;
+  }
+
+.tds-btn--pill:disabled,.tds-btn--pill.disabled {
+    --tds-btn-icon-color: inherit;
+  }
+
 /*# sourceMappingURL=unstable.css.map */