@marioschmidt/design-system-components 1.0.74 → 1.0.76

package/README.md

@@ -4,6 +4,10 @@
 
 Stencil-based Web Components for the BILD Design System. Components consume design tokens via CSS Custom Properties and work in any framework.
 
+**Framework-specific wrappers available:**
+- [React Wrappers](../react/README.md) - `@marioschmidt/design-system-react`
+- [Vue 3 Wrappers](../vue/README.md) - `@marioschmidt/design-system-vue`
+
 [![npm version](https://img.shields.io/npm/v/@marioschmidt/design-system-components.svg)](https://www.npmjs.com/package/@marioschmidt/design-system-components)
 [![Build Status](https://github.com/UXWizard25/vv-token-test-v3/workflows/Build%20Design%20Tokens/badge.svg)](https://github.com/UXWizard25/vv-token-test-v3/actions)
 
@@ -13,6 +17,7 @@ Stencil-based Web Components for the BILD Design System. Components consume desi
 
 - [📦 Installation](#-installation)
 - [🚀 Usage](#-usage)
+- [⚛️ React & Vue](#️-react--vue)
 - [🧩 Available Components](#-available-components)
 - [🎨 Theming](#-theming)
 - [🌓 Shadow DOM](#-shadow-dom)
@@ -89,6 +94,61 @@ import { DsButton, DsCard } from '@marioschmidt/design-system-components';
 
 ---
 
+## ⚛️ React & Vue
+
+For better framework integration, use our auto-generated wrapper packages:
+
+### React
+
+```bash
+npm install @marioschmidt/design-system-react
+```
+
+```tsx
+import { DsButton, DsCard } from '@marioschmidt/design-system-react';
+import '@marioschmidt/design-system-tokens/css/bundles/bild.css';
+
+function App() {
+  return (
+    <div data-color-brand="bild" data-theme="light">
+      <DsButton variant="primary" onClick={() => console.log('clicked')}>
+        Click me
+      </DsButton>
+    </div>
+  );
+}
+```
+
+[📖 Full React Documentation](../react/README.md)
+
+### Vue 3
+
+```bash
+npm install @marioschmidt/design-system-vue
+```
+
+```vue
+<script setup>
+import { DsButton, DsCard } from '@marioschmidt/design-system-vue';
+</script>
+
+<template>
+  <div data-color-brand="bild" data-theme="light">
+    <DsButton variant="primary" @click="handleClick">
+      Click me
+    </DsButton>
+  </div>
+</template>
+
+<style>
+@import '@marioschmidt/design-system-tokens/css/bundles/bild.css';
+</style>
+```
+
+[📖 Full Vue Documentation](../vue/README.md)
+
+---
+
 ## 🧩 Available Components
 
 | Component | Tag | Variants | Description |
@@ -380,6 +440,8 @@ export const Primary: StoryObj = {
 | Document | Description |
 |----------|-------------|
 | [📖 Main README](../../README.md) | Project overview |
+| [📖 React Wrappers](../react/README.md) | React wrapper components |
+| [📖 Vue Wrappers](../vue/README.md) | Vue 3 wrapper components |
 | [📖 Tokens README](../tokens/README.md) | Design tokens documentation |
 | [📖 Icons README](../icons/README.md) | Icon library documentation |
 | [📖 CSS Documentation](../tokens/docs/css.md) | CSS Custom Properties & Shadow DOM |
@@ -401,3 +463,5 @@ MIT
 | 4-Axis Theming | ✅ |
 | TypeScript | ✅ |
 | Storybook | ✅ |
+| React Wrappers | ✅ |
+| Vue 3 Wrappers | ✅ |

package/dist/bds/bds.esm.js

@@ -1,2 +1,2 @@
-import{p as a,g as t,b as r}from"./p-BZlqvv5e.js";export{s as setNonce}from"./p-BZlqvv5e.js";var e=()=>{const t=import.meta.url;const r={};if(t!==""){r.resourcesUrl=new URL(".",t).href}return a(r)};e().then((async a=>{await t();return r([["p-6e235cf2",[[257,"ds-button",{variant:[1],disabled:[4]}],[257,"ds-card",{surface:[1],cardTitle:[1,"card-title"]}]]]],a)}));
+import{p as a,g as t,b as r}from"./p-BZlqvv5e.js";export{s as setNonce}from"./p-BZlqvv5e.js";var e=()=>{const t=import.meta.url;const r={};if(t!==""){r.resourcesUrl=new URL(".",t).href}return a(r)};e().then((async a=>{await t();return r([["p-04d33bb6",[[257,"ds-button",{variant:[1],disabled:[4]}],[257,"ds-card",{surface:[1],cardTitle:[1,"card-title"]}]]]],a)}));
 //# sourceMappingURL=bds.esm.js.map

package/dist/bds/ds-button.ds-card.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ds-button.ds-card.entry.esm.js","sources":["../../packages/components/src/ds-button/ds-button.css?tag=ds-button&encapsulation=shadow","../../packages/components/src/ds-button/ds-button.tsx","../../packages/components/src/ds-card/ds-card.css?tag=ds-card&encapsulation=shadow","../../packages/components/src/ds-card/ds-card.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  transition: background-color 0.2s ease, border-color 0.2s ease;\n\n  /* Token-based styling */\n  padding: var(--button-stack-space, 6px) var(--button-inline-space, 16px);\n  border-radius: var(--button-border-radius, 4px);\n  font-family: var(--font-family-gotham-xnarrow, sans-serif);\n  font-weight: var(--font-weight-bold, 700);\n  font-size: var(--button-label-font-size, 15px);\n  line-height: var(--button-label-line-height, 15px);\n}\n\n/* Primary Variant */\n.ds-button--primary {\n  background-color: var(--button-primary-brand-bg-color-idle, #DD0000);\n  color: var(--button-primary-label-color, #FFFFFF);\n}\n\n.ds-button--primary:hover:not(:disabled) {\n  background-color: var(--button-primary-brand-bg-color-hover, #B80000);\n}\n\n/* Secondary Variant */\n.ds-button--secondary {\n  background-color: var(--button-secondary-bg-color-idle, #E9ECEF);\n  color: var(--button-secondary-label-color, #4B525A);\n}\n\n.ds-button--secondary:hover:not(:disabled) {\n  background-color: var(--button-secondary-bg-color-hover, #CED4DA);\n}\n\n/* Tertiary Variant */\n.ds-button--tertiary {\n  background-color: transparent;\n  color: var(--button-tertiary-label-color, #4B525A);\n  border: 1px solid var(--button-tertiary-border-color-idle, #CED4DA);\n}\n\n.ds-button--tertiary:hover:not(:disabled) {\n  border-color: var(--button-tertiary-border-color-hover, #4B525A);\n}\n\n/* Disabled State */\n.ds-button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.ds-button__label {\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'ds-button',\n  styleUrl: 'ds-button.css',\n  shadow: true,\n})\nexport class DsButton {\n  /**\n   * Button variant: primary, secondary, or tertiary\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * Disabled state\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <button\n        class={{\n          'ds-button': true,\n          [`ds-button--${this.variant}`]: true,\n          'ds-button--disabled': this.disabled,\n        }}\n        disabled={this.disabled}\n      >\n        <span class=\"ds-button__label\">\n          <slot></slot>\n        </span>\n      </button>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\n.ds-card {\n  border-radius: var(--border-radius-lg, 8px);\n  overflow: hidden;\n  transition: box-shadow 0.2s ease;\n}\n\n/* Primary Surface */\n.ds-card--primary {\n  background-color: var(--card-surface-bg-color, var(--surface-color-primary, #FFFFFF));\n  box-shadow: var(--shadow-soft-md, 0 2px 8px rgba(0, 0, 0, 0.1));\n}\n\n/* Secondary Surface */\n.ds-card--secondary {\n  background-color: var(--surface-color-secondary, #F8F9FA);\n  box-shadow: var(--shadow-soft-sm, 0 1px 4px rgba(0, 0, 0, 0.08));\n}\n\n.ds-card__header {\n  padding: var(--space-2-x, 16px) var(--space-2-x, 16px) 0;\n}\n\n.ds-card__title {\n  margin: 0;\n  font-family: var(--font-family-gotham-narrow, sans-serif);\n  font-weight: var(--font-weight-bold, 700);\n  font-size: var(--headline-3-font-size, 20px);\n  line-height: var(--headline-3-line-height, 24px);\n  color: var(--text-color-primary, #232629);\n}\n\n.ds-card__content {\n  padding: var(--space-2-x, 16px);\n}\n\n/* Hover effect */\n.ds-card--primary:hover {\n  box-shadow: var(--shadow-soft-lg, 0 4px 16px rgba(0, 0, 0, 0.12));\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'ds-card',\n  styleUrl: 'ds-card.css',\n  shadow: true,\n})\nexport class DsCard {\n  /**\n   * Card surface variant: primary or secondary\n   */\n  @Prop() surface: 'primary' | 'secondary' = 'primary';\n\n  /**\n   * Optional card title\n   */\n  @Prop() cardTitle?: string;\n\n  render() {\n    return (\n      <div\n        class={{\n          'ds-card': true,\n          [`ds-card--${this.surface}`]: true,\n        }}\n      >\n        {this.cardTitle && (\n          <div class=\"ds-card__header\">\n            <h3 class=\"ds-card__title\">{this.cardTitle}</h3>\n          </div>\n        )}\n        <div class=\"ds-card__content\">\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,22CAA22C;;MCOl3C,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAyC,SAAS;AAEjE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAkBlC;IAhBC,MAAM,GAAA;QACJ,QACE,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AACjB,gBAAA,CAAC,cAAc,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;gBACpC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;AACrC,aAAA,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC5B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR,CACA;;;;;AC/Bf,MAAM,SAAS,GAAG,g4BAAg4B;;MCOr4B,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAA4B,SAAS;AA0BrD;IAnBC,MAAM,GAAA;QACJ,QACE,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,CAAC,YAAY,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACnC,aAAA,EAAA,EAEA,IAAI,CAAC,SAAS,KACb,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,SAAS,CAAM,CAC5C,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACF;;;;;;;"}
+{"version":3,"file":"ds-button.ds-card.entry.esm.js","sources":["../../packages/components/src/ds-button/ds-button.css?tag=ds-button&encapsulation=shadow","../../packages/components/src/ds-button/ds-button.tsx","../../packages/components/src/ds-card/ds-card.css?tag=ds-card&encapsulation=shadow","../../packages/components/src/ds-card/ds-card.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  transition: background-color 0.2s ease, border-color 0.2s ease;\n\n  /* Token-based styling */\n  padding: var(--button-stack-space, 6px) var(--button-inline-space, 16px);\n  border-radius: var(--button-border-radius, 4px);\n  font-family: var(--button-label-font-family);\n  font-weight: var(--font-weight-bold, 700);\n  font-size: var(--button-label-font-size, 15px);\n  line-height: var(--button-label-line-height, 15px);\n}\n\n/* Primary Variant */\n.ds-button--primary {\n  background-color: var(--button-primary-brand-bg-color-idle, #DD0000);\n  color: var(--button-primary-label-color, #FFFFFF);\n}\n\n.ds-button--primary:hover:not(:disabled) {\n  background-color: var(--button-primary-brand-bg-color-hover, #B80000);\n}\n\n/* Secondary Variant */\n.ds-button--secondary {\n  background-color: var(--button-secondary-bg-color-idle, #E9ECEF);\n  color: var(--button-secondary-label-color, #4B525A);\n}\n\n.ds-button--secondary:hover:not(:disabled) {\n  background-color: var(--button-secondary-bg-color-hover, #CED4DA);\n}\n\n/* Tertiary Variant */\n.ds-button--tertiary {\n  background-color: transparent;\n  color: var(--button-tertiary-label-color, #4B525A);\n  border: 1px solid var(--button-tertiary-border-color-idle, #CED4DA);\n}\n\n.ds-button--tertiary:hover:not(:disabled) {\n  border-color: var(--button-tertiary-border-color-hover, #4B525A);\n}\n\n/* Disabled State */\n.ds-button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.ds-button__label {\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'ds-button',\n  styleUrl: 'ds-button.css',\n  shadow: true,\n})\nexport class DsButton {\n  /**\n   * Button variant: primary, secondary, or tertiary\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * Disabled state\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <button\n        class={{\n          'ds-button': true,\n          [`ds-button--${this.variant}`]: true,\n          'ds-button--disabled': this.disabled,\n        }}\n        disabled={this.disabled}\n      >\n        <span class=\"ds-button__label\">\n          <slot></slot>\n        </span>\n      </button>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\n.ds-card {\n  border-radius: var(--border-radius-lg, 8px);\n  overflow: hidden;\n  transition: box-shadow 0.2s ease;\n}\n\n/* Primary Surface */\n.ds-card--primary {\n  background-color: var(--card-surface-bg-color, var(--surface-color-primary, #FFFFFF));\n  box-shadow: var(--shadow-soft-md, 0 2px 8px rgba(0, 0, 0, 0.1));\n}\n\n/* Secondary Surface */\n.ds-card--secondary {\n  background-color: var(--surface-color-secondary, #F8F9FA);\n  box-shadow: var(--shadow-soft-sm, 0 1px 4px rgba(0, 0, 0, 0.08));\n}\n\n.ds-card__header {\n  padding: var(--space-2-x, 16px) var(--space-2-x, 16px) 0;\n}\n\n.ds-card__title {\n  margin: 0;\n  font-family: var(--font-family-gotham-narrow, sans-serif);\n  font-weight: var(--font-weight-bold, 700);\n  font-size: var(--headline-3-font-size, 20px);\n  line-height: var(--headline-3-line-height, 24px);\n  color: var(--text-color-primary, #232629);\n}\n\n.ds-card__content {\n  padding: var(--space-2-x, 16px);\n}\n\n/* Hover effect */\n.ds-card--primary:hover {\n  box-shadow: var(--shadow-soft-lg, 0 4px 16px rgba(0, 0, 0, 0.12));\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'ds-card',\n  styleUrl: 'ds-card.css',\n  shadow: true,\n})\nexport class DsCard {\n  /**\n   * Card surface variant: primary or secondary\n   */\n  @Prop() surface: 'primary' | 'secondary' = 'primary';\n\n  /**\n   * Optional card title\n   */\n  @Prop() cardTitle?: string;\n\n  render() {\n    return (\n      <div\n        class={{\n          'ds-card': true,\n          [`ds-card--${this.surface}`]: true,\n        }}\n      >\n        {this.cardTitle && (\n          <div class=\"ds-card__header\">\n            <h3 class=\"ds-card__title\">{this.cardTitle}</h3>\n          </div>\n        )}\n        <div class=\"ds-card__content\">\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,61CAA61C;;MCOp2C,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAyC,SAAS;AAEjE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAkBlC;IAhBC,MAAM,GAAA;QACJ,QACE,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AACjB,gBAAA,CAAC,cAAc,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;gBACpC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;AACrC,aAAA,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC5B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR,CACA;;;;;AC/Bf,MAAM,SAAS,GAAG,g4BAAg4B;;MCOr4B,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAA4B,SAAS;AA0BrD;IAnBC,MAAM,GAAA;QACJ,QACE,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,CAAC,YAAY,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACnC,aAAA,EAAA,EAEA,IAAI,CAAC,SAAS,KACb,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,SAAS,CAAM,CAC5C,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACF;;;;;;;"}

package/dist/bds/p-04d33bb6.entry.js

@@ -0,0 +1,2 @@
+import{r,h as o}from"./p-BZlqvv5e.js";const a=":host{display:inline-block}.ds-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;transition:background-color 0.2s ease, border-color 0.2s ease;padding:var(--button-stack-space, 6px) var(--button-inline-space, 16px);border-radius:var(--button-border-radius, 4px);font-family:var(--button-label-font-family);font-weight:var(--font-weight-bold, 700);font-size:var(--button-label-font-size, 15px);line-height:var(--button-label-line-height, 15px)}.ds-button--primary{background-color:var(--button-primary-brand-bg-color-idle, #DD0000);color:var(--button-primary-label-color, #FFFFFF)}.ds-button--primary:hover:not(:disabled){background-color:var(--button-primary-brand-bg-color-hover, #B80000)}.ds-button--secondary{background-color:var(--button-secondary-bg-color-idle, #E9ECEF);color:var(--button-secondary-label-color, #4B525A)}.ds-button--secondary:hover:not(:disabled){background-color:var(--button-secondary-bg-color-hover, #CED4DA)}.ds-button--tertiary{background-color:transparent;color:var(--button-tertiary-label-color, #4B525A);border:1px solid var(--button-tertiary-border-color-idle, #CED4DA)}.ds-button--tertiary:hover:not(:disabled){border-color:var(--button-tertiary-border-color-hover, #4B525A)}.ds-button--disabled{opacity:0.5;cursor:not-allowed}.ds-button__label{text-transform:uppercase;letter-spacing:0.02em}";const t=class{constructor(o){r(this,o);this.variant="primary";this.disabled=false}render(){return o("button",{key:"9cdec7f2d8913050c2f934f9b006113a73e52fe9",class:{"ds-button":true,[`ds-button--${this.variant}`]:true,"ds-button--disabled":this.disabled},disabled:this.disabled},o("span",{key:"0939f9a53d3c9c0d76f19edec687f1c869ebb9d9",class:"ds-button__label"},o("slot",{key:"adf41ca5922e4fab4dbb176a21134c9cb52937c1"})))}};t.style=a;const e=":host{display:block}.ds-card{border-radius:var(--border-radius-lg, 8px);overflow:hidden;transition:box-shadow 0.2s ease}.ds-card--primary{background-color:var(--card-surface-bg-color, var(--surface-color-primary, #FFFFFF));box-shadow:var(--shadow-soft-md, 0 2px 8px rgba(0, 0, 0, 0.1))}.ds-card--secondary{background-color:var(--surface-color-secondary, #F8F9FA);box-shadow:var(--shadow-soft-sm, 0 1px 4px rgba(0, 0, 0, 0.08))}.ds-card__header{padding:var(--space-2-x, 16px) var(--space-2-x, 16px) 0}.ds-card__title{margin:0;font-family:var(--font-family-gotham-narrow, sans-serif);font-weight:var(--font-weight-bold, 700);font-size:var(--headline-3-font-size, 20px);line-height:var(--headline-3-line-height, 24px);color:var(--text-color-primary, #232629)}.ds-card__content{padding:var(--space-2-x, 16px)}.ds-card--primary:hover{box-shadow:var(--shadow-soft-lg, 0 4px 16px rgba(0, 0, 0, 0.12))}";const d=class{constructor(o){r(this,o);this.surface="primary"}render(){return o("div",{key:"545dfb7389201a046b465e96723fdc8ad5cd1160",class:{"ds-card":true,[`ds-card--${this.surface}`]:true}},this.cardTitle&&o("div",{key:"63523222100e039098a941c2125df63a7bc8a0ee",class:"ds-card__header"},o("h3",{key:"7e60906b0aeb4d8d20fc09a85d06f4d0bd4a95ae",class:"ds-card__title"},this.cardTitle)),o("div",{key:"544d6b4e6ac95745261ee73c81f2d01c2806afd3",class:"ds-card__content"},o("slot",{key:"9102bcc585687daf5d954059a138ad7bac27b640"})))}};d.style=e;export{t as ds_button,d as ds_card};
+//# sourceMappingURL=p-04d33bb6.entry.js.map

package/dist/bds/{p-6e235cf2.entry.js.map → p-04d33bb6.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["registerInstance","h","dsButtonCss","DsButton","constructor","hostRef","this","variant","disabled","render","key","class","style","dsCardCss","DsCard","surface","cardTitle"],"sources":["0"],"mappings":"OAAcA,OAAkBC,MAAS,kBAEzC,MAAMC,EAAc,42CAEpB,MAAMC,EAAW,MACb,WAAAC,CAAYC,GACRL,EAAiBM,KAAMD,GAIvBC,KAAKC,QAAU,UAIfD,KAAKE,SAAW,KACpB,CACA,MAAAC,GACI,OAAQR,EAAE,SAAU,CAAES,IAAK,2CAA4CC,MAAO,CACtE,YAAa,KACb,CAAC,cAAcL,KAAKC,WAAY,KAChC,sBAAuBD,KAAKE,UAC7BA,SAAUF,KAAKE,UAAYP,EAAE,OAAQ,CAAES,IAAK,2CAA4CC,MAAO,oBAAsBV,EAAE,OAAQ,CAAES,IAAK,8CACjJ,GAEJP,EAASS,MAAQV,EAEjB,MAAMW,EAAY,i4BAElB,MAAMC,EAAS,MACX,WAAAV,CAAYC,GACRL,EAAiBM,KAAMD,GAIvBC,KAAKS,QAAU,SACnB,CACA,MAAAN,GACI,OAAQR,EAAE,MAAO,CAAES,IAAK,2CAA4CC,MAAO,CACnE,UAAW,KACX,CAAC,YAAYL,KAAKS,WAAY,OAC7BT,KAAKU,WAAcf,EAAE,MAAO,CAAES,IAAK,2CAA4CC,MAAO,mBAAqBV,EAAE,KAAM,CAAES,IAAK,2CAA4CC,MAAO,kBAAoBL,KAAKU,YAAcf,EAAE,MAAO,CAAES,IAAK,2CAA4CC,MAAO,oBAAsBV,EAAE,OAAQ,CAAES,IAAK,8CAC3U,GAEJI,EAAOF,MAAQC,SAENV,eAAuBW","ignoreList":[]}
+{"version":3,"names":["registerInstance","h","dsButtonCss","DsButton","constructor","hostRef","this","variant","disabled","render","key","class","style","dsCardCss","DsCard","surface","cardTitle"],"sources":["0"],"mappings":"OAAcA,OAAkBC,MAAS,kBAEzC,MAAMC,EAAc,81CAEpB,MAAMC,EAAW,MACb,WAAAC,CAAYC,GACRL,EAAiBM,KAAMD,GAIvBC,KAAKC,QAAU,UAIfD,KAAKE,SAAW,KACpB,CACA,MAAAC,GACI,OAAQR,EAAE,SAAU,CAAES,IAAK,2CAA4CC,MAAO,CACtE,YAAa,KACb,CAAC,cAAcL,KAAKC,WAAY,KAChC,sBAAuBD,KAAKE,UAC7BA,SAAUF,KAAKE,UAAYP,EAAE,OAAQ,CAAES,IAAK,2CAA4CC,MAAO,oBAAsBV,EAAE,OAAQ,CAAES,IAAK,8CACjJ,GAEJP,EAASS,MAAQV,EAEjB,MAAMW,EAAY,i4BAElB,MAAMC,EAAS,MACX,WAAAV,CAAYC,GACRL,EAAiBM,KAAMD,GAIvBC,KAAKS,QAAU,SACnB,CACA,MAAAN,GACI,OAAQR,EAAE,MAAO,CAAES,IAAK,2CAA4CC,MAAO,CACnE,UAAW,KACX,CAAC,YAAYL,KAAKS,WAAY,OAC7BT,KAAKU,WAAcf,EAAE,MAAO,CAAES,IAAK,2CAA4CC,MAAO,mBAAqBV,EAAE,KAAM,CAAES,IAAK,2CAA4CC,MAAO,kBAAoBL,KAAKU,YAAcf,EAAE,MAAO,CAAES,IAAK,2CAA4CC,MAAO,oBAAsBV,EAAE,OAAQ,CAAES,IAAK,8CAC3U,GAEJI,EAAOF,MAAQC,SAENV,eAAuBW","ignoreList":[]}

package/dist/cjs/ds-button.ds-card.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ds-button.ds-card.entry.cjs.js","sources":["../../packages/components/src/ds-button/ds-button.css?tag=ds-button&encapsulation=shadow","../../packages/components/src/ds-button/ds-button.tsx","../../packages/components/src/ds-card/ds-card.css?tag=ds-card&encapsulation=shadow","../../packages/components/src/ds-card/ds-card.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  transition: background-color 0.2s ease, border-color 0.2s ease;\n\n  /* Token-based styling */\n  padding: var(--button-stack-space, 6px) var(--button-inline-space, 16px);\n  border-radius: var(--button-border-radius, 4px);\n  font-family: var(--font-family-gotham-xnarrow, sans-serif);\n  font-weight: var(--font-weight-bold, 700);\n  font-size: var(--button-label-font-size, 15px);\n  line-height: var(--button-label-line-height, 15px);\n}\n\n/* Primary Variant */\n.ds-button--primary {\n  background-color: var(--button-primary-brand-bg-color-idle, #DD0000);\n  color: var(--button-primary-label-color, #FFFFFF);\n}\n\n.ds-button--primary:hover:not(:disabled) {\n  background-color: var(--button-primary-brand-bg-color-hover, #B80000);\n}\n\n/* Secondary Variant */\n.ds-button--secondary {\n  background-color: var(--button-secondary-bg-color-idle, #E9ECEF);\n  color: var(--button-secondary-label-color, #4B525A);\n}\n\n.ds-button--secondary:hover:not(:disabled) {\n  background-color: var(--button-secondary-bg-color-hover, #CED4DA);\n}\n\n/* Tertiary Variant */\n.ds-button--tertiary {\n  background-color: transparent;\n  color: var(--button-tertiary-label-color, #4B525A);\n  border: 1px solid var(--button-tertiary-border-color-idle, #CED4DA);\n}\n\n.ds-button--tertiary:hover:not(:disabled) {\n  border-color: var(--button-tertiary-border-color-hover, #4B525A);\n}\n\n/* Disabled State */\n.ds-button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.ds-button__label {\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'ds-button',\n  styleUrl: 'ds-button.css',\n  shadow: true,\n})\nexport class DsButton {\n  /**\n   * Button variant: primary, secondary, or tertiary\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * Disabled state\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <button\n        class={{\n          'ds-button': true,\n          [`ds-button--${this.variant}`]: true,\n          'ds-button--disabled': this.disabled,\n        }}\n        disabled={this.disabled}\n      >\n        <span class=\"ds-button__label\">\n          <slot></slot>\n        </span>\n      </button>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\n.ds-card {\n  border-radius: var(--border-radius-lg, 8px);\n  overflow: hidden;\n  transition: box-shadow 0.2s ease;\n}\n\n/* Primary Surface */\n.ds-card--primary {\n  background-color: var(--card-surface-bg-color, var(--surface-color-primary, #FFFFFF));\n  box-shadow: var(--shadow-soft-md, 0 2px 8px rgba(0, 0, 0, 0.1));\n}\n\n/* Secondary Surface */\n.ds-card--secondary {\n  background-color: var(--surface-color-secondary, #F8F9FA);\n  box-shadow: var(--shadow-soft-sm, 0 1px 4px rgba(0, 0, 0, 0.08));\n}\n\n.ds-card__header {\n  padding: var(--space-2-x, 16px) var(--space-2-x, 16px) 0;\n}\n\n.ds-card__title {\n  margin: 0;\n  font-family: var(--font-family-gotham-narrow, sans-serif);\n  font-weight: var(--font-weight-bold, 700);\n  font-size: var(--headline-3-font-size, 20px);\n  line-height: var(--headline-3-line-height, 24px);\n  color: var(--text-color-primary, #232629);\n}\n\n.ds-card__content {\n  padding: var(--space-2-x, 16px);\n}\n\n/* Hover effect */\n.ds-card--primary:hover {\n  box-shadow: var(--shadow-soft-lg, 0 4px 16px rgba(0, 0, 0, 0.12));\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'ds-card',\n  styleUrl: 'ds-card.css',\n  shadow: true,\n})\nexport class DsCard {\n  /**\n   * Card surface variant: primary or secondary\n   */\n  @Prop() surface: 'primary' | 'secondary' = 'primary';\n\n  /**\n   * Optional card title\n   */\n  @Prop() cardTitle?: string;\n\n  render() {\n    return (\n      <div\n        class={{\n          'ds-card': true,\n          [`ds-card--${this.surface}`]: true,\n        }}\n      >\n        {this.cardTitle && (\n          <div class=\"ds-card__header\">\n            <h3 class=\"ds-card__title\">{this.cardTitle}</h3>\n          </div>\n        )}\n        <div class=\"ds-card__content\">\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,22CAA22C;;MCOl3C,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAyC,SAAS;AAEjE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAkBlC;IAhBC,MAAM,GAAA;QACJ,QACEA,OACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AACjB,gBAAA,CAAC,cAAc,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;gBACpC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;AACrC,aAAA,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC5BA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR,CACA;;;;;AC/Bf,MAAM,SAAS,GAAG,g4BAAg4B;;MCOr4B,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAA4B,SAAS;AA0BrD;IAnBC,MAAM,GAAA;QACJ,QACEA,OACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,CAAC,YAAY,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACnC,aAAA,EAAA,EAEA,IAAI,CAAC,SAAS,KACbA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,SAAS,CAAM,CAC5C,CACP,EACDA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3BA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACF;;;;;;;;"}
+{"version":3,"file":"ds-button.ds-card.entry.cjs.js","sources":["../../packages/components/src/ds-button/ds-button.css?tag=ds-button&encapsulation=shadow","../../packages/components/src/ds-button/ds-button.tsx","../../packages/components/src/ds-card/ds-card.css?tag=ds-card&encapsulation=shadow","../../packages/components/src/ds-card/ds-card.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  transition: background-color 0.2s ease, border-color 0.2s ease;\n\n  /* Token-based styling */\n  padding: var(--button-stack-space, 6px) var(--button-inline-space, 16px);\n  border-radius: var(--button-border-radius, 4px);\n  font-family: var(--button-label-font-family);\n  font-weight: var(--font-weight-bold, 700);\n  font-size: var(--button-label-font-size, 15px);\n  line-height: var(--button-label-line-height, 15px);\n}\n\n/* Primary Variant */\n.ds-button--primary {\n  background-color: var(--button-primary-brand-bg-color-idle, #DD0000);\n  color: var(--button-primary-label-color, #FFFFFF);\n}\n\n.ds-button--primary:hover:not(:disabled) {\n  background-color: var(--button-primary-brand-bg-color-hover, #B80000);\n}\n\n/* Secondary Variant */\n.ds-button--secondary {\n  background-color: var(--button-secondary-bg-color-idle, #E9ECEF);\n  color: var(--button-secondary-label-color, #4B525A);\n}\n\n.ds-button--secondary:hover:not(:disabled) {\n  background-color: var(--button-secondary-bg-color-hover, #CED4DA);\n}\n\n/* Tertiary Variant */\n.ds-button--tertiary {\n  background-color: transparent;\n  color: var(--button-tertiary-label-color, #4B525A);\n  border: 1px solid var(--button-tertiary-border-color-idle, #CED4DA);\n}\n\n.ds-button--tertiary:hover:not(:disabled) {\n  border-color: var(--button-tertiary-border-color-hover, #4B525A);\n}\n\n/* Disabled State */\n.ds-button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.ds-button__label {\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'ds-button',\n  styleUrl: 'ds-button.css',\n  shadow: true,\n})\nexport class DsButton {\n  /**\n   * Button variant: primary, secondary, or tertiary\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * Disabled state\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <button\n        class={{\n          'ds-button': true,\n          [`ds-button--${this.variant}`]: true,\n          'ds-button--disabled': this.disabled,\n        }}\n        disabled={this.disabled}\n      >\n        <span class=\"ds-button__label\">\n          <slot></slot>\n        </span>\n      </button>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\n.ds-card {\n  border-radius: var(--border-radius-lg, 8px);\n  overflow: hidden;\n  transition: box-shadow 0.2s ease;\n}\n\n/* Primary Surface */\n.ds-card--primary {\n  background-color: var(--card-surface-bg-color, var(--surface-color-primary, #FFFFFF));\n  box-shadow: var(--shadow-soft-md, 0 2px 8px rgba(0, 0, 0, 0.1));\n}\n\n/* Secondary Surface */\n.ds-card--secondary {\n  background-color: var(--surface-color-secondary, #F8F9FA);\n  box-shadow: var(--shadow-soft-sm, 0 1px 4px rgba(0, 0, 0, 0.08));\n}\n\n.ds-card__header {\n  padding: var(--space-2-x, 16px) var(--space-2-x, 16px) 0;\n}\n\n.ds-card__title {\n  margin: 0;\n  font-family: var(--font-family-gotham-narrow, sans-serif);\n  font-weight: var(--font-weight-bold, 700);\n  font-size: var(--headline-3-font-size, 20px);\n  line-height: var(--headline-3-line-height, 24px);\n  color: var(--text-color-primary, #232629);\n}\n\n.ds-card__content {\n  padding: var(--space-2-x, 16px);\n}\n\n/* Hover effect */\n.ds-card--primary:hover {\n  box-shadow: var(--shadow-soft-lg, 0 4px 16px rgba(0, 0, 0, 0.12));\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'ds-card',\n  styleUrl: 'ds-card.css',\n  shadow: true,\n})\nexport class DsCard {\n  /**\n   * Card surface variant: primary or secondary\n   */\n  @Prop() surface: 'primary' | 'secondary' = 'primary';\n\n  /**\n   * Optional card title\n   */\n  @Prop() cardTitle?: string;\n\n  render() {\n    return (\n      <div\n        class={{\n          'ds-card': true,\n          [`ds-card--${this.surface}`]: true,\n        }}\n      >\n        {this.cardTitle && (\n          <div class=\"ds-card__header\">\n            <h3 class=\"ds-card__title\">{this.cardTitle}</h3>\n          </div>\n        )}\n        <div class=\"ds-card__content\">\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,61CAA61C;;MCOp2C,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAyC,SAAS;AAEjE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAkBlC;IAhBC,MAAM,GAAA;QACJ,QACEA,OACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AACjB,gBAAA,CAAC,cAAc,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;gBACpC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;AACrC,aAAA,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC5BA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR,CACA;;;;;AC/Bf,MAAM,SAAS,GAAG,g4BAAg4B;;MCOr4B,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAA4B,SAAS;AA0BrD;IAnBC,MAAM,GAAA;QACJ,QACEA,OACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,CAAC,YAAY,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACnC,aAAA,EAAA,EAEA,IAAI,CAAC,SAAS,KACbA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,SAAS,CAAM,CAC5C,CACP,EACDA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3BA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACF;;;;;;;;"}

package/dist/cjs/ds-button_2.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-DYTqo0CI.js');
 
-const dsButtonCss = ":host{display:inline-block}.ds-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;transition:background-color 0.2s ease, border-color 0.2s ease;padding:var(--button-stack-space, 6px) var(--button-inline-space, 16px);border-radius:var(--button-border-radius, 4px);font-family:var(--font-family-gotham-xnarrow, sans-serif);font-weight:var(--font-weight-bold, 700);font-size:var(--button-label-font-size, 15px);line-height:var(--button-label-line-height, 15px)}.ds-button--primary{background-color:var(--button-primary-brand-bg-color-idle, #DD0000);color:var(--button-primary-label-color, #FFFFFF)}.ds-button--primary:hover:not(:disabled){background-color:var(--button-primary-brand-bg-color-hover, #B80000)}.ds-button--secondary{background-color:var(--button-secondary-bg-color-idle, #E9ECEF);color:var(--button-secondary-label-color, #4B525A)}.ds-button--secondary:hover:not(:disabled){background-color:var(--button-secondary-bg-color-hover, #CED4DA)}.ds-button--tertiary{background-color:transparent;color:var(--button-tertiary-label-color, #4B525A);border:1px solid var(--button-tertiary-border-color-idle, #CED4DA)}.ds-button--tertiary:hover:not(:disabled){border-color:var(--button-tertiary-border-color-hover, #4B525A)}.ds-button--disabled{opacity:0.5;cursor:not-allowed}.ds-button__label{text-transform:uppercase;letter-spacing:0.02em}";
+const dsButtonCss = ":host{display:inline-block}.ds-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;transition:background-color 0.2s ease, border-color 0.2s ease;padding:var(--button-stack-space, 6px) var(--button-inline-space, 16px);border-radius:var(--button-border-radius, 4px);font-family:var(--button-label-font-family);font-weight:var(--font-weight-bold, 700);font-size:var(--button-label-font-size, 15px);line-height:var(--button-label-line-height, 15px)}.ds-button--primary{background-color:var(--button-primary-brand-bg-color-idle, #DD0000);color:var(--button-primary-label-color, #FFFFFF)}.ds-button--primary:hover:not(:disabled){background-color:var(--button-primary-brand-bg-color-hover, #B80000)}.ds-button--secondary{background-color:var(--button-secondary-bg-color-idle, #E9ECEF);color:var(--button-secondary-label-color, #4B525A)}.ds-button--secondary:hover:not(:disabled){background-color:var(--button-secondary-bg-color-hover, #CED4DA)}.ds-button--tertiary{background-color:transparent;color:var(--button-tertiary-label-color, #4B525A);border:1px solid var(--button-tertiary-border-color-idle, #CED4DA)}.ds-button--tertiary:hover:not(:disabled){border-color:var(--button-tertiary-border-color-hover, #4B525A)}.ds-button--disabled{opacity:0.5;cursor:not-allowed}.ds-button__label{text-transform:uppercase;letter-spacing:0.02em}";
 
 const DsButton = class {
     constructor(hostRef) {

package/dist/collection/ds-button/ds-button.css

@@ -13,7 +13,7 @@
   /* Token-based styling */
   padding: var(--button-stack-space, 6px) var(--button-inline-space, 16px);
   border-radius: var(--button-border-radius, 4px);
-  font-family: var(--font-family-gotham-xnarrow, sans-serif);
+  font-family: var(--button-label-font-family);
   font-weight: var(--font-weight-bold, 700);
   font-size: var(--button-label-font-size, 15px);
   line-height: var(--button-label-line-height, 15px);

package/dist/components/ds-button.js

@@ -1,8 +1,8 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h } from './index.js';
 
-const dsButtonCss = ":host{display:inline-block}.ds-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;transition:background-color 0.2s ease, border-color 0.2s ease;padding:var(--button-stack-space, 6px) var(--button-inline-space, 16px);border-radius:var(--button-border-radius, 4px);font-family:var(--font-family-gotham-xnarrow, sans-serif);font-weight:var(--font-weight-bold, 700);font-size:var(--button-label-font-size, 15px);line-height:var(--button-label-line-height, 15px)}.ds-button--primary{background-color:var(--button-primary-brand-bg-color-idle, #DD0000);color:var(--button-primary-label-color, #FFFFFF)}.ds-button--primary:hover:not(:disabled){background-color:var(--button-primary-brand-bg-color-hover, #B80000)}.ds-button--secondary{background-color:var(--button-secondary-bg-color-idle, #E9ECEF);color:var(--button-secondary-label-color, #4B525A)}.ds-button--secondary:hover:not(:disabled){background-color:var(--button-secondary-bg-color-hover, #CED4DA)}.ds-button--tertiary{background-color:transparent;color:var(--button-tertiary-label-color, #4B525A);border:1px solid var(--button-tertiary-border-color-idle, #CED4DA)}.ds-button--tertiary:hover:not(:disabled){border-color:var(--button-tertiary-border-color-hover, #4B525A)}.ds-button--disabled{opacity:0.5;cursor:not-allowed}.ds-button__label{text-transform:uppercase;letter-spacing:0.02em}";
+const dsButtonCss = ":host{display:inline-block}.ds-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;transition:background-color 0.2s ease, border-color 0.2s ease;padding:var(--button-stack-space, 6px) var(--button-inline-space, 16px);border-radius:var(--button-border-radius, 4px);font-family:var(--button-label-font-family);font-weight:var(--font-weight-bold, 700);font-size:var(--button-label-font-size, 15px);line-height:var(--button-label-line-height, 15px)}.ds-button--primary{background-color:var(--button-primary-brand-bg-color-idle, #DD0000);color:var(--button-primary-label-color, #FFFFFF)}.ds-button--primary:hover:not(:disabled){background-color:var(--button-primary-brand-bg-color-hover, #B80000)}.ds-button--secondary{background-color:var(--button-secondary-bg-color-idle, #E9ECEF);color:var(--button-secondary-label-color, #4B525A)}.ds-button--secondary:hover:not(:disabled){background-color:var(--button-secondary-bg-color-hover, #CED4DA)}.ds-button--tertiary{background-color:transparent;color:var(--button-tertiary-label-color, #4B525A);border:1px solid var(--button-tertiary-border-color-idle, #CED4DA)}.ds-button--tertiary:hover:not(:disabled){border-color:var(--button-tertiary-border-color-hover, #4B525A)}.ds-button--disabled{opacity:0.5;cursor:not-allowed}.ds-button__label{text-transform:uppercase;letter-spacing:0.02em}";
 
-const DsButton$1 = /*@__PURE__*/ proxyCustomElement(class DsButton extends HTMLElement {
+const DsButton$1 = /*@__PURE__*/ proxyCustomElement(class DsButton extends H {
     constructor(registerHost) {
         super();
         if (registerHost !== false) {

package/dist/components/ds-button.js.map

@@ -1 +1 @@
-{"file":"ds-button.js","mappings":";;AAAA,MAAM,WAAW,GAAG,22CAA22C;;MCOl3CA,UAAQ,iBAAAC,kBAAA,CAAA,MAAA,QAAA,SAAA,WAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAyC,SAAS;AAEjE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAkBlC;IAhBC,MAAM,GAAA;QACJ,QACE,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AACjB,gBAAA,CAAC,cAAc,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;gBACpC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;AACrC,aAAA,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC5B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DsButton","__stencil_proxyCustomElement"],"sources":["../../packages/components/src/ds-button/ds-button.css?tag=ds-button&encapsulation=shadow","../../packages/components/src/ds-button/ds-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  transition: background-color 0.2s ease, border-color 0.2s ease;\n\n  /* Token-based styling */\n  padding: var(--button-stack-space, 6px) var(--button-inline-space, 16px);\n  border-radius: var(--button-border-radius, 4px);\n  font-family: var(--font-family-gotham-xnarrow, sans-serif);\n  font-weight: var(--font-weight-bold, 700);\n  font-size: var(--button-label-font-size, 15px);\n  line-height: var(--button-label-line-height, 15px);\n}\n\n/* Primary Variant */\n.ds-button--primary {\n  background-color: var(--button-primary-brand-bg-color-idle, #DD0000);\n  color: var(--button-primary-label-color, #FFFFFF);\n}\n\n.ds-button--primary:hover:not(:disabled) {\n  background-color: var(--button-primary-brand-bg-color-hover, #B80000);\n}\n\n/* Secondary Variant */\n.ds-button--secondary {\n  background-color: var(--button-secondary-bg-color-idle, #E9ECEF);\n  color: var(--button-secondary-label-color, #4B525A);\n}\n\n.ds-button--secondary:hover:not(:disabled) {\n  background-color: var(--button-secondary-bg-color-hover, #CED4DA);\n}\n\n/* Tertiary Variant */\n.ds-button--tertiary {\n  background-color: transparent;\n  color: var(--button-tertiary-label-color, #4B525A);\n  border: 1px solid var(--button-tertiary-border-color-idle, #CED4DA);\n}\n\n.ds-button--tertiary:hover:not(:disabled) {\n  border-color: var(--button-tertiary-border-color-hover, #4B525A);\n}\n\n/* Disabled State */\n.ds-button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.ds-button__label {\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'ds-button',\n  styleUrl: 'ds-button.css',\n  shadow: true,\n})\nexport class DsButton {\n  /**\n   * Button variant: primary, secondary, or tertiary\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * Disabled state\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <button\n        class={{\n          'ds-button': true,\n          [`ds-button--${this.variant}`]: true,\n          'ds-button--disabled': this.disabled,\n        }}\n        disabled={this.disabled}\n      >\n        <span class=\"ds-button__label\">\n          <slot></slot>\n        </span>\n      </button>\n    );\n  }\n}\n"],"version":3}
+{"file":"ds-button.js","mappings":";;AAAA,MAAM,WAAW,GAAG,61CAA61C;;MCOp2CA,UAAQ,iBAAAC,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAyC,SAAS;AAEjE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAkBlC;IAhBC,MAAM,GAAA;QACJ,QACE,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AACjB,gBAAA,CAAC,cAAc,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;gBACpC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;AACrC,aAAA,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC5B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DsButton","__stencil_proxyCustomElement","HTMLElement"],"sources":["../../packages/components/src/ds-button/ds-button.css?tag=ds-button&encapsulation=shadow","../../packages/components/src/ds-button/ds-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  transition: background-color 0.2s ease, border-color 0.2s ease;\n\n  /* Token-based styling */\n  padding: var(--button-stack-space, 6px) var(--button-inline-space, 16px);\n  border-radius: var(--button-border-radius, 4px);\n  font-family: var(--button-label-font-family);\n  font-weight: var(--font-weight-bold, 700);\n  font-size: var(--button-label-font-size, 15px);\n  line-height: var(--button-label-line-height, 15px);\n}\n\n/* Primary Variant */\n.ds-button--primary {\n  background-color: var(--button-primary-brand-bg-color-idle, #DD0000);\n  color: var(--button-primary-label-color, #FFFFFF);\n}\n\n.ds-button--primary:hover:not(:disabled) {\n  background-color: var(--button-primary-brand-bg-color-hover, #B80000);\n}\n\n/* Secondary Variant */\n.ds-button--secondary {\n  background-color: var(--button-secondary-bg-color-idle, #E9ECEF);\n  color: var(--button-secondary-label-color, #4B525A);\n}\n\n.ds-button--secondary:hover:not(:disabled) {\n  background-color: var(--button-secondary-bg-color-hover, #CED4DA);\n}\n\n/* Tertiary Variant */\n.ds-button--tertiary {\n  background-color: transparent;\n  color: var(--button-tertiary-label-color, #4B525A);\n  border: 1px solid var(--button-tertiary-border-color-idle, #CED4DA);\n}\n\n.ds-button--tertiary:hover:not(:disabled) {\n  border-color: var(--button-tertiary-border-color-hover, #4B525A);\n}\n\n/* Disabled State */\n.ds-button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.ds-button__label {\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'ds-button',\n  styleUrl: 'ds-button.css',\n  shadow: true,\n})\nexport class DsButton {\n  /**\n   * Button variant: primary, secondary, or tertiary\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * Disabled state\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <button\n        class={{\n          'ds-button': true,\n          [`ds-button--${this.variant}`]: true,\n          'ds-button--disabled': this.disabled,\n        }}\n        disabled={this.disabled}\n      >\n        <span class=\"ds-button__label\">\n          <slot></slot>\n        </span>\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ds-card.js

@@ -1,8 +1,8 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h } from './index.js';
 
 const dsCardCss = ":host{display:block}.ds-card{border-radius:var(--border-radius-lg, 8px);overflow:hidden;transition:box-shadow 0.2s ease}.ds-card--primary{background-color:var(--card-surface-bg-color, var(--surface-color-primary, #FFFFFF));box-shadow:var(--shadow-soft-md, 0 2px 8px rgba(0, 0, 0, 0.1))}.ds-card--secondary{background-color:var(--surface-color-secondary, #F8F9FA);box-shadow:var(--shadow-soft-sm, 0 1px 4px rgba(0, 0, 0, 0.08))}.ds-card__header{padding:var(--space-2-x, 16px) var(--space-2-x, 16px) 0}.ds-card__title{margin:0;font-family:var(--font-family-gotham-narrow, sans-serif);font-weight:var(--font-weight-bold, 700);font-size:var(--headline-3-font-size, 20px);line-height:var(--headline-3-line-height, 24px);color:var(--text-color-primary, #232629)}.ds-card__content{padding:var(--space-2-x, 16px)}.ds-card--primary:hover{box-shadow:var(--shadow-soft-lg, 0 4px 16px rgba(0, 0, 0, 0.12))}";
 
-const DsCard$1 = /*@__PURE__*/ proxyCustomElement(class DsCard extends HTMLElement {
+const DsCard$1 = /*@__PURE__*/ proxyCustomElement(class DsCard extends H {
     constructor(registerHost) {
         super();
         if (registerHost !== false) {

package/dist/components/ds-card.js.map

@@ -1 +1 @@
-{"file":"ds-card.js","mappings":";;AAAA,MAAM,SAAS,GAAG,g4BAAg4B;;MCOr4BA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAA,WAAA,CAAA;AALnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAA4B,SAAS;AA0BrD;IAnBC,MAAM,GAAA;QACJ,QACE,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,CAAC,YAAY,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACnC,aAAA,EAAA,EAEA,IAAI,CAAC,SAAS,KACb,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,SAAS,CAAM,CAC5C,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DsCard","__stencil_proxyCustomElement"],"sources":["../../packages/components/src/ds-card/ds-card.css?tag=ds-card&encapsulation=shadow","../../packages/components/src/ds-card/ds-card.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.ds-card {\n  border-radius: var(--border-radius-lg, 8px);\n  overflow: hidden;\n  transition: box-shadow 0.2s ease;\n}\n\n/* Primary Surface */\n.ds-card--primary {\n  background-color: var(--card-surface-bg-color, var(--surface-color-primary, #FFFFFF));\n  box-shadow: var(--shadow-soft-md, 0 2px 8px rgba(0, 0, 0, 0.1));\n}\n\n/* Secondary Surface */\n.ds-card--secondary {\n  background-color: var(--surface-color-secondary, #F8F9FA);\n  box-shadow: var(--shadow-soft-sm, 0 1px 4px rgba(0, 0, 0, 0.08));\n}\n\n.ds-card__header {\n  padding: var(--space-2-x, 16px) var(--space-2-x, 16px) 0;\n}\n\n.ds-card__title {\n  margin: 0;\n  font-family: var(--font-family-gotham-narrow, sans-serif);\n  font-weight: var(--font-weight-bold, 700);\n  font-size: var(--headline-3-font-size, 20px);\n  line-height: var(--headline-3-line-height, 24px);\n  color: var(--text-color-primary, #232629);\n}\n\n.ds-card__content {\n  padding: var(--space-2-x, 16px);\n}\n\n/* Hover effect */\n.ds-card--primary:hover {\n  box-shadow: var(--shadow-soft-lg, 0 4px 16px rgba(0, 0, 0, 0.12));\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'ds-card',\n  styleUrl: 'ds-card.css',\n  shadow: true,\n})\nexport class DsCard {\n  /**\n   * Card surface variant: primary or secondary\n   */\n  @Prop() surface: 'primary' | 'secondary' = 'primary';\n\n  /**\n   * Optional card title\n   */\n  @Prop() cardTitle?: string;\n\n  render() {\n    return (\n      <div\n        class={{\n          'ds-card': true,\n          [`ds-card--${this.surface}`]: true,\n        }}\n      >\n        {this.cardTitle && (\n          <div class=\"ds-card__header\">\n            <h3 class=\"ds-card__title\">{this.cardTitle}</h3>\n          </div>\n        )}\n        <div class=\"ds-card__content\">\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"ds-card.js","mappings":";;AAAA,MAAM,SAAS,GAAG,g4BAAg4B;;MCOr4BA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AALnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAA4B,SAAS;AA0BrD;IAnBC,MAAM,GAAA;QACJ,QACE,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,CAAC,YAAY,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACnC,aAAA,EAAA,EAEA,IAAI,CAAC,SAAS,KACb,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,SAAS,CAAM,CAC5C,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DsCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["../../packages/components/src/ds-card/ds-card.css?tag=ds-card&encapsulation=shadow","../../packages/components/src/ds-card/ds-card.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.ds-card {\n  border-radius: var(--border-radius-lg, 8px);\n  overflow: hidden;\n  transition: box-shadow 0.2s ease;\n}\n\n/* Primary Surface */\n.ds-card--primary {\n  background-color: var(--card-surface-bg-color, var(--surface-color-primary, #FFFFFF));\n  box-shadow: var(--shadow-soft-md, 0 2px 8px rgba(0, 0, 0, 0.1));\n}\n\n/* Secondary Surface */\n.ds-card--secondary {\n  background-color: var(--surface-color-secondary, #F8F9FA);\n  box-shadow: var(--shadow-soft-sm, 0 1px 4px rgba(0, 0, 0, 0.08));\n}\n\n.ds-card__header {\n  padding: var(--space-2-x, 16px) var(--space-2-x, 16px) 0;\n}\n\n.ds-card__title {\n  margin: 0;\n  font-family: var(--font-family-gotham-narrow, sans-serif);\n  font-weight: var(--font-weight-bold, 700);\n  font-size: var(--headline-3-font-size, 20px);\n  line-height: var(--headline-3-line-height, 24px);\n  color: var(--text-color-primary, #232629);\n}\n\n.ds-card__content {\n  padding: var(--space-2-x, 16px);\n}\n\n/* Hover effect */\n.ds-card--primary:hover {\n  box-shadow: var(--shadow-soft-lg, 0 4px 16px rgba(0, 0, 0, 0.12));\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'ds-card',\n  styleUrl: 'ds-card.css',\n  shadow: true,\n})\nexport class DsCard {\n  /**\n   * Card surface variant: primary or secondary\n   */\n  @Prop() surface: 'primary' | 'secondary' = 'primary';\n\n  /**\n   * Optional card title\n   */\n  @Prop() cardTitle?: string;\n\n  render() {\n    return (\n      <div\n        class={{\n          'ds-card': true,\n          [`ds-card--${this.surface}`]: true,\n        }}\n      >\n        {this.cardTitle && (\n          <div class=\"ds-card__header\">\n            <h3 class=\"ds-card__title\">{this.cardTitle}</h3>\n          </div>\n        )}\n        <div class=\"ds-card__content\">\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}