@marioschmidt/design-system-components 1.2.2 → 1.3.0

package/dist/cjs/index.cjs.js.map

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

package/dist/cjs/loader.cjs.js.map

@@ -1 +0,0 @@
-{"file":"loader.cjs.js","mappings":";;;;AAGY,MAAC,oBAAoB,GAAG,OAAO,GAAG,EAAE,OAAO,KAAK;AAC5D,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,SAAS;AACrD,EAAE,MAAMA,mBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D;;;;;","names":["globalScripts","bootstrapLazy"],"sources":["@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = async (win, options) => {\n  if (typeof window === 'undefined') return undefined;\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n};\n"],"version":3}

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

@@ -1 +0,0 @@
-{"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/collection/ds-card/ds-card.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ds-card.js","sourceRoot":"","sources":["../../../../packages/components/core/src/ds-card/ds-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,MAAM;IALnB;QAME;;WAEG;QACK,YAAO,GAA4B,SAAS,CAAC;KA0BtD;IAnBC,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,CAAC,YAAY,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;aACnC;YAEA,IAAI,CAAC,SAAS,IAAI,CACjB,4DAAK,KAAK,EAAC,iBAAiB;gBAC1B,2DAAI,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,SAAS,CAAM,CAC5C,CACP;YACD,4DAAK,KAAK,EAAC,kBAAkB;gBAC3B,8DAAa,CACT,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -1 +0,0 @@
-{"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}

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

@@ -1 +0,0 @@
-{"file":"ds-card.js","mappings":";;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,83BAA83B,CAAC;;MCO34BA,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/core/src/ds-card/ds-card.css?tag=ds-card&encapsulation=shadow","../../packages/components/core/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}