@marioschmidt/design-system-components 1.2.0 → 1.2.2

package/dist/cjs/loader.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0IsCEmC.js');
+var index = require('./index-Bg-5nAHg.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

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

@@ -1,62 +1,208 @@
+/* =============================================================================
+   DS-BUTTON Component Styles
+
+   Token-based styling for all button variants and states.
+   All values reference design system tokens for consistency across brands,
+   themes, and density modes.
+   ============================================================================= */
+
 :host {
   display: inline-block;
 }
 
+/* =============================================================================
+   BASE STYLES
+   ============================================================================= */
+
 .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;
+  background: transparent;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;
+
+  /* Spacing (reference density tokens automatically) */
+  padding: var(--button-stack-space) var(--button-inline-space);
+  min-height: var(--button-height-size);
+  gap: var(--button-content-gap-space);
 
-  /* Token-based styling */
-  padding: var(--button-stack-space, 6px) var(--button-inline-space, 16px);
-  border-radius: var(--button-border-radius, 4px);
+  /* Sizing */
+  border-radius: var(--button-border-radius);
+
+  /* Typography (from composite .button-label token) */
   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);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--button-label-font-size);
+  line-height: var(--button-label-line-height);
+  letter-spacing: var(--letter-space-0-p-5);
+  text-transform: uppercase;
+}
+
+.ds-button__label {
+  display: inline-flex;
+  align-items: center;
+  gap: inherit;
+}
+
+/* =============================================================================
+   PRIMARY BRAND VARIANT
+   Main call-to-action with brand color (BILD red, SportBILD blue)
+   ============================================================================= */
+
+.ds-button--primary-brand {
+  background-color: var(--button-primary-brand-bg-color-idle);
+  color: var(--button-primary-brand-label-color);
+}
+
+.ds-button--primary-brand:hover:not(:disabled) {
+  background-color: var(--button-primary-brand-bg-color-hover);
+}
+
+.ds-button--primary-brand:active:not(:disabled) {
+  background-color: var(--button-primary-brand-bg-color-active);
+}
+
+/* =============================================================================
+   PRIMARY NEUTRAL VARIANT
+   Primary action with neutral/dark background
+   ============================================================================= */
+
+.ds-button--primary-neutral {
+  background-color: var(--button-primary-neutral-bg-color-idle);
+  color: var(--button-primary-neutral-label-color);
+}
+
+.ds-button--primary-neutral:hover:not(:disabled) {
+  background-color: var(--button-primary-neutral-bg-color-hover);
+}
+
+.ds-button--primary-neutral:active:not(:disabled) {
+  background-color: var(--button-primary-neutral-bg-color-active);
+}
+
+/* =============================================================================
+   PRIMARY SUCCESS VARIANT
+   Positive/confirmation action with success color
+   ============================================================================= */
+
+.ds-button--primary-success {
+  background-color: var(--button-primary-success-bg-color-idle);
+  color: var(--button-primary-success-label-color);
 }
 
-/* Primary Variant */
-.ds-button--primary {
-  background-color: var(--button-primary-brand-bg-color-idle, #DD0000);
-  color: var(--button-primary-label-color, #FFFFFF);
+.ds-button--primary-success:hover:not(:disabled) {
+  background-color: var(--button-primary-success-bg-color-hover);
 }
 
-.ds-button--primary:hover:not(:disabled) {
-  background-color: var(--button-primary-brand-bg-color-hover, #B80000);
+.ds-button--primary-success:active:not(:disabled) {
+  background-color: var(--button-primary-success-bg-color-active);
 }
 
-/* Secondary Variant */
+/* =============================================================================
+   SECONDARY VARIANT
+   Secondary action with neutral gray background
+   ============================================================================= */
+
 .ds-button--secondary {
-  background-color: var(--button-secondary-bg-color-idle, #E9ECEF);
-  color: var(--button-secondary-label-color, #4B525A);
+  background-color: var(--button-secondary-bg-color-idle);
+  color: var(--button-secondary-label-color);
 }
 
 .ds-button--secondary:hover:not(:disabled) {
-  background-color: var(--button-secondary-bg-color-hover, #CED4DA);
+  background-color: var(--button-secondary-bg-color-hover);
+}
+
+.ds-button--secondary:active:not(:disabled) {
+  background-color: var(--button-secondary-bg-color-active);
+}
+
+/* =============================================================================
+   TERTIARY NEUTRAL VARIANT
+   Low-emphasis outlined style with neutral border
+   ============================================================================= */
+
+.ds-button--tertiary-neutral {
+  background-color: transparent;
+  color: var(--button-tertiary-neutral-label-color);
+  border: var(--button-border-width-size) solid var(--button-tertiary-neutral-border-color-idle);
+}
+
+.ds-button--tertiary-neutral:hover:not(:disabled) {
+  background-color: var(--button-tertiary-neutral-bg-color-hover);
+  border-color: var(--button-tertiary-neutral-border-color-hover);
 }
 
-/* Tertiary Variant */
-.ds-button--tertiary {
+.ds-button--tertiary-neutral:active:not(:disabled) {
+  background-color: var(--button-tertiary-neutral-bg-color-active);
+}
+
+/* =============================================================================
+   TERTIARY SUCCESS VARIANT
+   Low-emphasis outlined style with success color
+   ============================================================================= */
+
+.ds-button--tertiary-success {
   background-color: transparent;
-  color: var(--button-tertiary-label-color, #4B525A);
-  border: 1px solid var(--button-tertiary-border-color-idle, #CED4DA);
+  color: var(--button-tertiary-success-label-color);
+  border: var(--button-border-width-size) solid var(--button-tertiary-success-border-color);
 }
 
-.ds-button--tertiary:hover:not(:disabled) {
-  border-color: var(--button-tertiary-border-color-hover, #4B525A);
+.ds-button--tertiary-success:hover:not(:disabled) {
+  background-color: var(--button-tertiary-success-bg-color-hover);
 }
 
-/* Disabled State */
-.ds-button--disabled {
-  opacity: 0.5;
+/* =============================================================================
+   GHOST VARIANT
+   Text-only button without background or border
+   ============================================================================= */
+
+.ds-button--ghost {
+  background-color: transparent;
+  color: var(--button-ghost-label-color);
+}
+
+.ds-button--ghost:hover:not(:disabled) {
+  background-color: var(--button-ghost-bg-color-hover);
+}
+
+.ds-button--ghost:active:not(:disabled) {
+  background-color: var(--button-ghost-bg-color-active);
+}
+
+/* =============================================================================
+   DISABLED STATE
+   Applies to all variants when disabled
+   ============================================================================= */
+
+.ds-button--disabled,
+.ds-button:disabled {
   cursor: not-allowed;
+  background-color: var(--button-disabled-bg-color);
+  color: var(--button-disabled-label-color);
+  border-color: var(--button-disabled-border-color);
 }
 
-.ds-button__label {
-  text-transform: uppercase;
-  letter-spacing: 0.02em;
+/* Override any variant-specific hover/active for disabled */
+.ds-button--disabled:hover,
+.ds-button--disabled:active,
+.ds-button:disabled:hover,
+.ds-button:disabled:active {
+  background-color: var(--button-disabled-bg-color);
+  color: var(--button-disabled-label-color);
+  border-color: var(--button-disabled-border-color);
+}
+
+/* =============================================================================
+   FOCUS STATE
+   Keyboard navigation accessibility
+   ============================================================================= */
+
+.ds-button:focus-visible {
+  outline: 2px solid var(--core-color-primary);
+  outline-offset: 2px;
 }

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

@@ -2,20 +2,22 @@ import { h } from "@stencil/core";
 export class DsButton {
     constructor() {
         /**
-         * Button variant: primary, secondary, or tertiary
+         * Button variant determining visual style.
+         * @default 'primary-brand'
          */
-        this.variant = 'primary';
+        this.variant = 'primary-brand';
         /**
-         * Disabled state
+         * Disables the button interaction and applies disabled styling.
+         * @default false
          */
         this.disabled = false;
     }
     render() {
-        return (h("button", { key: '9cdec7f2d8913050c2f934f9b006113a73e52fe9', class: {
+        return (h("button", { key: 'b2c29af56fa84e6274900496d1a57bf7be6070e0', class: {
                 'ds-button': true,
                 [`ds-button--${this.variant}`]: true,
                 'ds-button--disabled': this.disabled,
-            }, disabled: this.disabled }, h("span", { key: '0939f9a53d3c9c0d76f19edec687f1c869ebb9d9', class: "ds-button__label" }, h("slot", { key: 'adf41ca5922e4fab4dbb176a21134c9cb52937c1' }))));
+            }, disabled: this.disabled }, h("span", { key: '8d7cd171306ed6e7b3507fea53e54df4d886d1a0', class: "ds-button__label" }, h("slot", { key: 'c040145f092daf57dd086a9991bcb5d0dc4f97dc' }))));
     }
     static get is() { return "ds-button"; }
     static get encapsulation() { return "shadow"; }
@@ -35,21 +37,30 @@ export class DsButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'tertiary'",
-                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
-                    "references": {}
+                    "original": "ButtonVariant",
+                    "resolved": "\"ghost\" | \"primary-brand\" | \"primary-neutral\" | \"primary-success\" | \"secondary\" | \"tertiary-neutral\" | \"tertiary-success\"",
+                    "references": {
+                        "ButtonVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/vv-token-test-v3/vv-token-test-v3/packages/components/core/src/ds-button/ds-button.tsx",
+                            "id": "../../packages/components/core/src/ds-button/ds-button.tsx::ButtonVariant"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Button variant: primary, secondary, or tertiary"
+                    "tags": [{
+                            "name": "default",
+                            "text": "'primary-brand'"
+                        }],
+                    "text": "Button variant determining visual style."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "variant",
-                "defaultValue": "'primary'"
+                "defaultValue": "'primary-brand'"
             },
             "disabled": {
                 "type": "boolean",
@@ -62,8 +73,11 @@ export class DsButton {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Disabled state"
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Disables the button interaction and applies disabled styling."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1 +1 @@
-{"version":3,"file":"ds-button.js","sourceRoot":"","sources":["../../../../packages/components/core/src/ds-button/ds-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,QAAQ;IALrB;QAME;;WAEG;QACK,YAAO,GAAyC,SAAS,CAAC;QAElE;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;KAkBnC;IAhBC,MAAM;QACJ,OAAO,CACL,+DACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,CAAC,cAAc,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBACpC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;aACrC,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,6DAAM,KAAK,EAAC,kBAAkB;gBAC5B,8DAAa,CACR,CACA,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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","sourceRoot":"","sources":["../../../../packages/components/core/src/ds-button/ds-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAuBnD,MAAM,OAAO,QAAQ;IALrB;QAME;;;WAGG;QACK,YAAO,GAAkB,eAAe,CAAC;QAEjD;;;WAGG;QACK,aAAQ,GAAY,KAAK,CAAC;KAkBnC;IAhBC,MAAM;QACJ,OAAO,CACL,+DACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,CAAC,cAAc,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBACpC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;aACrC,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,6DAAM,KAAK,EAAC,kBAAkB;gBAC5B,8DAAa,CACR,CACA,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\n/**\n * Button variants matching the design system specification.\n * - Primary variants: Filled background (brand, neutral, success)\n * - Secondary: Neutral filled background\n * - Tertiary variants: Outlined style (neutral, success)\n * - Ghost: Text only, no background/border\n */\nexport type ButtonVariant =\n  | 'primary-brand'\n  | 'primary-neutral'\n  | 'primary-success'\n  | 'secondary'\n  | 'tertiary-neutral'\n  | 'tertiary-success'\n  | 'ghost';\n\n@Component({\n  tag: 'ds-button',\n  styleUrl: 'ds-button.css',\n  shadow: true,\n})\nexport class DsButton {\n  /**\n   * Button variant determining visual style.\n   * @default 'primary-brand'\n   */\n  @Prop() variant: ButtonVariant = 'primary-brand';\n\n  /**\n   * Disables the button interaction and applies disabled styling.\n   * @default false\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"]}

package/dist/components/ds-button.js

@@ -1,6 +1,8 @@
 import { t as transformTag, 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(--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 dsButtonCss = () => `:host{display:inline-block}.ds-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:transparent;transition:background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;padding:var(--button-stack-space) var(--button-inline-space);min-height:var(--button-height-size);gap:var(--button-content-gap-space);border-radius:var(--button-border-radius);font-family:var(--button-label-font-family);font-weight:var(--font-weight-bold);font-size:var(--button-label-font-size);line-height:var(--button-label-line-height);letter-spacing:var(--letter-space-0-p-5);text-transform:uppercase}.ds-button__label{display:inline-flex;align-items:center;gap:inherit}.ds-button--primary-brand{background-color:var(--button-primary-brand-bg-color-idle);color:var(--button-primary-brand-label-color)}.ds-button--primary-brand:hover:not(:disabled){background-color:var(--button-primary-brand-bg-color-hover)}.ds-button--primary-brand:active:not(:disabled){background-color:var(--button-primary-brand-bg-color-active)}.ds-button--primary-neutral{background-color:var(--button-primary-neutral-bg-color-idle);color:var(--button-primary-neutral-label-color)}.ds-button--primary-neutral:hover:not(:disabled){background-color:var(--button-primary-neutral-bg-color-hover)}.ds-button--primary-neutral:active:not(:disabled){background-color:var(--button-primary-neutral-bg-color-active)}.ds-button--primary-success{background-color:var(--button-primary-success-bg-color-idle);color:var(--button-primary-success-label-color)}.ds-button--primary-success:hover:not(:disabled){background-color:var(--button-primary-success-bg-color-hover)}.ds-button--primary-success:active:not(:disabled){background-color:var(--button-primary-success-bg-color-active)}.ds-button--secondary{background-color:var(--button-secondary-bg-color-idle);color:var(--button-secondary-label-color)}.ds-button--secondary:hover:not(:disabled){background-color:var(--button-secondary-bg-color-hover)}.ds-button--secondary:active:not(:disabled){background-color:var(--button-secondary-bg-color-active)}.ds-button--tertiary-neutral{background-color:transparent;color:var(--button-tertiary-neutral-label-color);border:var(--button-border-width-size) solid var(--button-tertiary-neutral-border-color-idle)}.ds-button--tertiary-neutral:hover:not(:disabled){background-color:var(--button-tertiary-neutral-bg-color-hover);border-color:var(--button-tertiary-neutral-border-color-hover)}.ds-button--tertiary-neutral:active:not(:disabled){background-color:var(--button-tertiary-neutral-bg-color-active)}.ds-button--tertiary-success{background-color:transparent;color:var(--button-tertiary-success-label-color);border:var(--button-border-width-size) solid var(--button-tertiary-success-border-color)}.ds-button--tertiary-success:hover:not(:disabled){background-color:var(--button-tertiary-success-bg-color-hover)}.ds-button--ghost{background-color:transparent;color:var(--button-ghost-label-color)}.ds-button--ghost:hover:not(:disabled){background-color:var(--button-ghost-bg-color-hover)}.ds-button--ghost:active:not(:disabled){background-color:var(--button-ghost-bg-color-active)}.ds-button--disabled,.ds-button:disabled{cursor:not-allowed;background-color:var(--button-disabled-bg-color);color:var(--button-disabled-label-color);border-color:var(--button-disabled-border-color)}.ds-button--disabled:hover,.ds-button--disabled:active,.ds-button:disabled:hover,.ds-button:disabled:active{background-color:var(--button-disabled-bg-color);color:var(--button-disabled-label-color);border-color:var(--button-disabled-border-color)}.ds-button:focus-visible{outline:2px solid var(--core-color-primary);outline-offset:2px}`;
 
 const DsButton$1 = /*@__PURE__*/ proxyCustomElement(class DsButton extends H {
     constructor(registerHost) {
@@ -10,20 +12,22 @@ const DsButton$1 = /*@__PURE__*/ proxyCustomElement(class DsButton extends H {
         }
         this.__attachShadow();
         /**
-         * Button variant: primary, secondary, or tertiary
+         * Button variant determining visual style.
+         * @default 'primary-brand'
          */
-        this.variant = 'primary';
+        this.variant = 'primary-brand';
         /**
-         * Disabled state
+         * Disables the button interaction and applies disabled styling.
+         * @default false
          */
         this.disabled = false;
     }
     render() {
-        return (h("button", { key: '9cdec7f2d8913050c2f934f9b006113a73e52fe9', class: {
+        return (h("button", { key: 'b2c29af56fa84e6274900496d1a57bf7be6070e0', class: {
                 'ds-button': true,
                 [`ds-button--${this.variant}`]: true,
                 'ds-button--disabled': this.disabled,
-            }, disabled: this.disabled }, h("span", { key: '0939f9a53d3c9c0d76f19edec687f1c869ebb9d9', class: "ds-button__label" }, h("slot", { key: 'adf41ca5922e4fab4dbb176a21134c9cb52937c1' }))));
+            }, disabled: this.disabled }, h("span", { key: '8d7cd171306ed6e7b3507fea53e54df4d886d1a0', class: "ds-button__label" }, h("slot", { key: 'c040145f092daf57dd086a9991bcb5d0dc4f97dc' }))));
     }
     static get style() { return dsButtonCss(); }
 }, [257, "ds-button", {

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

@@ -1 +1 @@
-{"file":"ds-button.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,21CAA21C,CAAC;;MCO12CA,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/core/src/ds-button/ds-button.css?tag=ds-button&encapsulation=shadow","../../packages/components/core/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}
+{"file":"ds-button.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC;AAC3B;AACA,+5GAA+5G,CAAC;;MCqBn5GA,UAAQ,iBAAAC,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAkB,eAAe;AAEhD;;;AAGG;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/core/src/ds-button/ds-button.css?tag=ds-button&encapsulation=shadow","../../packages/components/core/src/ds-button/ds-button.tsx"],"sourcesContent":["/* =============================================================================\n   DS-BUTTON Component Styles\n\n   Token-based styling for all button variants and states.\n   All values reference design system tokens for consistency across brands,\n   themes, and density modes.\n   ============================================================================= */\n\n:host {\n  display: inline-block;\n}\n\n/* =============================================================================\n   BASE STYLES\n   ============================================================================= */\n\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  transition:\n    background-color 0.2s ease,\n    border-color 0.2s ease,\n    color 0.2s ease;\n\n  /* Spacing (reference density tokens automatically) */\n  padding: var(--button-stack-space) var(--button-inline-space);\n  min-height: var(--button-height-size);\n  gap: var(--button-content-gap-space);\n\n  /* Sizing */\n  border-radius: var(--button-border-radius);\n\n  /* Typography (from composite .button-label token) */\n  font-family: var(--button-label-font-family);\n  font-weight: var(--font-weight-bold);\n  font-size: var(--button-label-font-size);\n  line-height: var(--button-label-line-height);\n  letter-spacing: var(--letter-space-0-p-5);\n  text-transform: uppercase;\n}\n\n.ds-button__label {\n  display: inline-flex;\n  align-items: center;\n  gap: inherit;\n}\n\n/* =============================================================================\n   PRIMARY BRAND VARIANT\n   Main call-to-action with brand color (BILD red, SportBILD blue)\n   ============================================================================= */\n\n.ds-button--primary-brand {\n  background-color: var(--button-primary-brand-bg-color-idle);\n  color: var(--button-primary-brand-label-color);\n}\n\n.ds-button--primary-brand:hover:not(:disabled) {\n  background-color: var(--button-primary-brand-bg-color-hover);\n}\n\n.ds-button--primary-brand:active:not(:disabled) {\n  background-color: var(--button-primary-brand-bg-color-active);\n}\n\n/* =============================================================================\n   PRIMARY NEUTRAL VARIANT\n   Primary action with neutral/dark background\n   ============================================================================= */\n\n.ds-button--primary-neutral {\n  background-color: var(--button-primary-neutral-bg-color-idle);\n  color: var(--button-primary-neutral-label-color);\n}\n\n.ds-button--primary-neutral:hover:not(:disabled) {\n  background-color: var(--button-primary-neutral-bg-color-hover);\n}\n\n.ds-button--primary-neutral:active:not(:disabled) {\n  background-color: var(--button-primary-neutral-bg-color-active);\n}\n\n/* =============================================================================\n   PRIMARY SUCCESS VARIANT\n   Positive/confirmation action with success color\n   ============================================================================= */\n\n.ds-button--primary-success {\n  background-color: var(--button-primary-success-bg-color-idle);\n  color: var(--button-primary-success-label-color);\n}\n\n.ds-button--primary-success:hover:not(:disabled) {\n  background-color: var(--button-primary-success-bg-color-hover);\n}\n\n.ds-button--primary-success:active:not(:disabled) {\n  background-color: var(--button-primary-success-bg-color-active);\n}\n\n/* =============================================================================\n   SECONDARY VARIANT\n   Secondary action with neutral gray background\n   ============================================================================= */\n\n.ds-button--secondary {\n  background-color: var(--button-secondary-bg-color-idle);\n  color: var(--button-secondary-label-color);\n}\n\n.ds-button--secondary:hover:not(:disabled) {\n  background-color: var(--button-secondary-bg-color-hover);\n}\n\n.ds-button--secondary:active:not(:disabled) {\n  background-color: var(--button-secondary-bg-color-active);\n}\n\n/* =============================================================================\n   TERTIARY NEUTRAL VARIANT\n   Low-emphasis outlined style with neutral border\n   ============================================================================= */\n\n.ds-button--tertiary-neutral {\n  background-color: transparent;\n  color: var(--button-tertiary-neutral-label-color);\n  border: var(--button-border-width-size) solid var(--button-tertiary-neutral-border-color-idle);\n}\n\n.ds-button--tertiary-neutral:hover:not(:disabled) {\n  background-color: var(--button-tertiary-neutral-bg-color-hover);\n  border-color: var(--button-tertiary-neutral-border-color-hover);\n}\n\n.ds-button--tertiary-neutral:active:not(:disabled) {\n  background-color: var(--button-tertiary-neutral-bg-color-active);\n}\n\n/* =============================================================================\n   TERTIARY SUCCESS VARIANT\n   Low-emphasis outlined style with success color\n   ============================================================================= */\n\n.ds-button--tertiary-success {\n  background-color: transparent;\n  color: var(--button-tertiary-success-label-color);\n  border: var(--button-border-width-size) solid var(--button-tertiary-success-border-color);\n}\n\n.ds-button--tertiary-success:hover:not(:disabled) {\n  background-color: var(--button-tertiary-success-bg-color-hover);\n}\n\n/* =============================================================================\n   GHOST VARIANT\n   Text-only button without background or border\n   ============================================================================= */\n\n.ds-button--ghost {\n  background-color: transparent;\n  color: var(--button-ghost-label-color);\n}\n\n.ds-button--ghost:hover:not(:disabled) {\n  background-color: var(--button-ghost-bg-color-hover);\n}\n\n.ds-button--ghost:active:not(:disabled) {\n  background-color: var(--button-ghost-bg-color-active);\n}\n\n/* =============================================================================\n   DISABLED STATE\n   Applies to all variants when disabled\n   ============================================================================= */\n\n.ds-button--disabled,\n.ds-button:disabled {\n  cursor: not-allowed;\n  background-color: var(--button-disabled-bg-color);\n  color: var(--button-disabled-label-color);\n  border-color: var(--button-disabled-border-color);\n}\n\n/* Override any variant-specific hover/active for disabled */\n.ds-button--disabled:hover,\n.ds-button--disabled:active,\n.ds-button:disabled:hover,\n.ds-button:disabled:active {\n  background-color: var(--button-disabled-bg-color);\n  color: var(--button-disabled-label-color);\n  border-color: var(--button-disabled-border-color);\n}\n\n/* =============================================================================\n   FOCUS STATE\n   Keyboard navigation accessibility\n   ============================================================================= */\n\n.ds-button:focus-visible {\n  outline: 2px solid var(--core-color-primary);\n  outline-offset: 2px;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * Button variants matching the design system specification.\n * - Primary variants: Filled background (brand, neutral, success)\n * - Secondary: Neutral filled background\n * - Tertiary variants: Outlined style (neutral, success)\n * - Ghost: Text only, no background/border\n */\nexport type ButtonVariant =\n  | 'primary-brand'\n  | 'primary-neutral'\n  | 'primary-success'\n  | 'secondary'\n  | 'tertiary-neutral'\n  | 'tertiary-success'\n  | 'ghost';\n\n@Component({\n  tag: 'ds-button',\n  styleUrl: 'ds-button.css',\n  shadow: true,\n})\nexport class DsButton {\n  /**\n   * Button variant determining visual style.\n   * @default 'primary-brand'\n   */\n  @Prop() variant: ButtonVariant = 'primary-brand';\n\n  /**\n   * Disables the button interaction and applies disabled styling.\n   * @default false\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}