@ds-mo/ui 2.8.0 → 2.9.0

package/dist/components/p-DUDppafq.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["buttonCss","ICON_SIZE","xs","sm","md","lg","TEXT_CLASS","Button","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","intent","size","rounded","fullWidth","contrast","dropdown","loading","inactive","type","hasIcon","handleClick","e","dsClick","emit","componentWillLoad","el","querySelector","effectiveElevation","elevation","render","Tag","href","iconSize","textClass","elev","hasLabel","label","showLeading","isIconOnly","isLabelOnly","isIconAndLabel","bg","background","btnCls","btn","cap","toUpperCase","iconOnly","labelOnly","iconAndLabel","onMedium","onBold","onStrong","onAlwaysDark","extraProps","disabled","target","h","Host","key","class","style","width","undefined","ariaLabel","ariaLabelledby","onClick","onMouseEnter","dsMouseEnter","onMouseLeave","dsMouseLeave","fontSize","display","name","height","viewBox","fill","d","stroke","badgeCount","s","charAt","slice"],"sources":["src/wc/components/Button/Button.css?tag=ds-button&encapsulation=scoped","src/wc/components/Button/Button.tsx"],"sourcesContent":["/* ── Host wrapper ─────────────────────────────────────────────────────────── */\n\n.btn-host {\n  display: inline-block;\n}\n\n.btn-host--full {\n  display: block;\n  width: 100%;\n}\n\n/* ── Base button ──────────────────────────────────────────────────────────── */\n\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: var(--dimension-radius-050);\n  cursor: pointer;\n  position: relative;\n  transition: transform var(--effect-motion-short-2);\n  height: var(--dimension-size-400);\n  font-family: inherit;\n  color: var(--color-foreground-primary);\n  background: transparent;\n  box-sizing: border-box;\n  text-decoration: none;\n  user-select: none;\n  outline: none;\n  width: 100%;\n\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n  --_border: var(--color-border-tertiary);\n}\n\n.btn:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.btn:hover:not(.inactive) {\n  background-color: var(--_hover-bg);\n}\n\n.btn:active:not(.inactive) {\n  background-color: var(--_pressed-bg);\n  transform: scale(var(--dimension-scale-subtle));\n}\n\n/* ── Background context ───────────────────────────────────────────────────── */\n\n.onMedium {\n  --_hover-bg: var(--color-interaction-on-medium-background-hover);\n  --_pressed-bg: var(--color-interaction-on-medium-background-pressed);\n  --_border: var(--color-border-on-medium-background-tertiary);\n}\n\n.onBold {\n  --_hover-bg: var(--color-interaction-on-bold-background-hover);\n  --_pressed-bg: var(--color-interaction-on-bold-background-pressed);\n  --_border: var(--color-border-on-bold-background-tertiary);\n}\n\n.onStrong {\n  --_hover-bg: var(--color-interaction-on-strong-background-hover);\n  --_pressed-bg: var(--color-interaction-on-strong-background-pressed);\n  --_border: var(--color-border-on-strong-background-tertiary);\n}\n\n.onAlwaysDark {\n  --_hover-bg: var(--color-always-dark-interaction-hover);\n  --_pressed-bg: var(--color-always-dark-interaction-pressed);\n  --_border: var(--color-always-dark-border-tertiary);\n}\n\n/* ── Primary variant ──────────────────────────────────────────────────────── */\n\n.primary {\n  color: var(--color-foreground-on-bold-background-primary);\n}\n\n.primary.intentNone {\n  background-color: var(--color-inverted-background);\n  color: var(--color-inverted-foreground-primary);\n  --_hover-bg: color-mix(in oklch, var(--color-inverted-background) 90%, var(--color-inverted-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--color-inverted-background) 85%, var(--color-inverted-foreground-primary));\n  --_border: var(--color-inverted-border-tertiary);\n}\n\n.primary:not(.intentNone) {\n  background-color: var(--_bg);\n  --_hover-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-on-bold-background-primary));\n  --_pressed-bg: color-mix(in oklch, var(--_bg) 80%, var(--color-foreground-on-bold-background-primary));\n}\n\n/* Bold contrast (default) */\n.primary.intentBrand    { --_bg: var(--color-background-bold-brand);    color: var(--color-foreground-faint-brand); }\n.primary.intentNeutral  { --_bg: var(--color-background-bold-neutral);  color: var(--color-foreground-faint-neutral); }\n.primary.intentPositive { --_bg: var(--color-background-bold-positive); color: var(--color-foreground-faint-positive); }\n.primary.intentNegative { --_bg: var(--color-background-bold-negative); color: var(--color-foreground-faint-negative); }\n.primary.intentWarning  { --_bg: var(--color-background-bold-warning);  color: var(--color-foreground-faint-warning); }\n.primary.intentCaution  { --_bg: var(--color-background-bold-caution);  color: var(--color-foreground-faint-caution); }\n.primary.intentAi       { --_bg: var(--color-background-bold-ai);       color: var(--color-foreground-faint-ai); }\n\n/* Medium contrast */\n.primary.contrastMedium {\n  --_hover-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--_bg) 80%, var(--color-foreground-primary));\n}\n.primary.contrastMedium.intentBrand    { --_bg: var(--color-background-medium-brand);    color: var(--color-foreground-strong-brand); }\n.primary.contrastMedium.intentNeutral  { --_bg: var(--color-background-medium-neutral);  color: var(--color-foreground-strong-neutral); }\n.primary.contrastMedium.intentPositive { --_bg: var(--color-background-medium-positive); color: var(--color-foreground-strong-positive); }\n.primary.contrastMedium.intentNegative { --_bg: var(--color-background-medium-negative); color: var(--color-foreground-strong-negative); }\n.primary.contrastMedium.intentWarning  { --_bg: var(--color-background-medium-warning);  color: var(--color-foreground-strong-warning); }\n.primary.contrastMedium.intentCaution  { --_bg: var(--color-background-medium-caution);  color: var(--color-foreground-strong-caution); }\n.primary.contrastMedium.intentAi       { --_bg: var(--color-background-medium-ai);       color: var(--color-foreground-strong-ai); }\n\n/* Strong contrast */\n.primary.contrastStrong {\n  --_hover-bg: color-mix(in oklch, var(--_bg) 90%, var(--color-foreground-on-bold-background-primary));\n  --_pressed-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-on-bold-background-primary));\n}\n.primary.contrastStrong.intentBrand    { --_bg: var(--color-background-strong-brand);    color: var(--color-foreground-medium-brand); }\n.primary.contrastStrong.intentNeutral  { --_bg: var(--color-background-strong-neutral);  color: var(--color-foreground-medium-neutral); }\n.primary.contrastStrong.intentPositive { --_bg: var(--color-background-strong-positive); color: var(--color-foreground-medium-positive); }\n.primary.contrastStrong.intentNegative { --_bg: var(--color-background-strong-negative); color: var(--color-foreground-medium-negative); }\n.primary.contrastStrong.intentWarning  { --_bg: var(--color-background-strong-warning);  color: var(--color-foreground-medium-warning); }\n.primary.contrastStrong.intentCaution  { --_bg: var(--color-background-strong-caution);  color: var(--color-foreground-medium-caution); }\n.primary.contrastStrong.intentAi       { --_bg: var(--color-background-strong-ai);       color: var(--color-foreground-medium-ai); }\n\n/* Faint contrast */\n.primary.contrastFaint {\n  --_hover-bg: color-mix(in oklch, var(--_bg) 90%, var(--color-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-primary));\n}\n.primary.contrastFaint.intentBrand    { --_bg: var(--color-background-faint-brand);    color: var(--color-foreground-bold-brand); }\n.primary.contrastFaint.intentNeutral  { --_bg: var(--color-background-faint-neutral);  color: var(--color-foreground-bold-neutral); }\n.primary.contrastFaint.intentPositive { --_bg: var(--color-background-faint-positive); color: var(--color-foreground-bold-positive); }\n.primary.contrastFaint.intentNegative { --_bg: var(--color-background-faint-negative); color: var(--color-foreground-bold-negative); }\n.primary.contrastFaint.intentWarning  { --_bg: var(--color-background-faint-warning);  color: var(--color-foreground-bold-warning); }\n.primary.contrastFaint.intentCaution  { --_bg: var(--color-background-faint-caution);  color: var(--color-foreground-bold-caution); }\n.primary.contrastFaint.intentAi       { --_bg: var(--color-background-faint-ai);       color: var(--color-foreground-bold-ai); }\n\n/* intentNone on strong/always-dark */\n.primary.intentNone.onStrong,\n.primary.intentNone.onAlwaysDark {\n  background-color: var(--color-background-primary);\n  color: var(--color-foreground-primary);\n  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));\n  --_border: var(--color-border-tertiary);\n}\n\n/* ── Secondary variant ────────────────────────────────────────────────────── */\n\n.secondary {\n  background-color: transparent;\n  color: var(--color-foreground-secondary);\n}\n\n.secondary.intentBrand    { color: var(--color-foreground-bold-brand); }\n.secondary.intentNeutral  { color: var(--color-foreground-bold-neutral); }\n.secondary.intentPositive { color: var(--color-foreground-bold-positive); }\n.secondary.intentNegative { color: var(--color-foreground-bold-negative); }\n.secondary.intentWarning  { color: var(--color-foreground-bold-warning); }\n.secondary.intentCaution  { color: var(--color-foreground-bold-caution); }\n.secondary.intentAi       { color: var(--color-foreground-bold-ai); }\n\n.secondary.onMedium { color: var(--color-foreground-primary); }\n.secondary.onMedium.intentBrand    { color: var(--color-foreground-strong-brand); }\n.secondary.onMedium.intentNeutral  { color: var(--color-foreground-strong-neutral); }\n.secondary.onMedium.intentPositive { color: var(--color-foreground-strong-positive); }\n.secondary.onMedium.intentNegative { color: var(--color-foreground-strong-negative); }\n.secondary.onMedium.intentWarning  { color: var(--color-foreground-strong-warning); }\n.secondary.onMedium.intentCaution  { color: var(--color-foreground-strong-caution); }\n.secondary.onMedium.intentAi       { color: var(--color-foreground-strong-ai); }\n\n.secondary.onBold { color: var(--color-foreground-on-bold-background-secondary); }\n.secondary.onBold.intentBrand    { color: var(--color-foreground-faint-brand); }\n.secondary.onBold.intentNeutral  { color: var(--color-foreground-faint-neutral); }\n.secondary.onBold.intentPositive { color: var(--color-foreground-faint-positive); }\n.secondary.onBold.intentNegative { color: var(--color-foreground-faint-negative); }\n.secondary.onBold.intentWarning  { color: var(--color-foreground-faint-warning); }\n.secondary.onBold.intentCaution  { color: var(--color-foreground-faint-caution); }\n.secondary.onBold.intentAi       { color: var(--color-foreground-faint-ai); }\n\n.secondary.onAlwaysDark { color: var(--color-always-dark-foreground-secondary); }\n.secondary.onAlwaysDark.intentBrand    { color: var(--color-always-dark-foreground-brand); }\n.secondary.onAlwaysDark.intentNeutral  { color: var(--color-always-dark-foreground-neutral); }\n.secondary.onAlwaysDark.intentPositive { color: var(--color-always-dark-foreground-positive); }\n.secondary.onAlwaysDark.intentNegative { color: var(--color-always-dark-foreground-negative); }\n.secondary.onAlwaysDark.intentWarning  { color: var(--color-always-dark-foreground-warning); }\n.secondary.onAlwaysDark.intentCaution  { color: var(--color-always-dark-foreground-caution); }\n.secondary.onAlwaysDark.intentAi       { color: var(--color-always-dark-foreground-ai); }\n\n.secondary.onStrong { color: var(--color-foreground-on-bold-background-secondary); }\n.secondary.onStrong.intentBrand    { color: var(--color-foreground-faint-brand); }\n.secondary.onStrong.intentNeutral  { color: var(--color-foreground-faint-neutral); }\n.secondary.onStrong.intentPositive { color: var(--color-foreground-faint-positive); }\n.secondary.onStrong.intentNegative { color: var(--color-foreground-faint-negative); }\n.secondary.onStrong.intentWarning  { color: var(--color-foreground-faint-warning); }\n.secondary.onStrong.intentCaution  { color: var(--color-foreground-faint-caution); }\n.secondary.onStrong.intentAi       { color: var(--color-foreground-faint-ai); }\n\n/* ── Elevation ────────────────────────────────────────────────────────────── */\n\n.secondary.elevationFlat {\n  box-shadow: inset 0 0 0 1px var(--_border);\n}\n\n.secondary.elevationElevated {\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));\n}\n\n.secondary.elevationFloating {\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));\n}\n\n.primary.elevationElevated { box-shadow: var(--effect-elevation-elevated-sm); }\n.primary.elevationNone     { box-shadow: none; }\n.primary.elevationFlat     { box-shadow: inset 0 0 0 1px var(--_border); }\n.primary.intentNone.elevationFlat { --_border: var(--color-border-tertiary); }\n.primary.elevationFloating { box-shadow: var(--effect-elevation-elevated-floating) !important; }\n\n/* ── Layout modes ─────────────────────────────────────────────────────────── */\n\n.iconOnly    { padding: 0; width: var(--dimension-size-400); min-width: var(--dimension-size-400); }\n.labelOnly   { padding: 0 var(--dimension-space-100); }\n.iconAndLabel { padding: 0 var(--dimension-space-100) 0 var(--dimension-space-075); gap: var(--dimension-space-025); }\n.dropdown    { gap: var(--dimension-space-050); }\n\n/* ── Sizes ────────────────────────────────────────────────────────────────── */\n\n.sizeSM { height: var(--dimension-size-300); }\n.sizeSM.iconOnly   { width: var(--dimension-size-300); min-width: var(--dimension-size-300); }\n.sizeSM.labelOnly  { padding: 0 var(--dimension-space-075); }\n.sizeSM.iconAndLabel { padding: 0 var(--dimension-space-075) 0 var(--dimension-space-050); gap: 1px; }\n\n.sizeXS { height: var(--dimension-size-200); }\n.sizeXS.iconOnly   { width: var(--dimension-size-200); min-width: var(--dimension-size-200); }\n.sizeXS.labelOnly, .sizeXS.iconAndLabel { padding: 0 var(--dimension-space-025); gap: 0; }\n\n.sizeLG { height: var(--dimension-size-500); }\n.sizeLG.iconOnly   { width: var(--dimension-size-500); min-width: var(--dimension-size-500); }\n.sizeLG.labelOnly  { padding: 0 var(--dimension-space-150); }\n.sizeLG.iconAndLabel { padding: 0 var(--dimension-space-150) 0 var(--dimension-space-100); gap: var(--dimension-space-075); }\n\n/* ── Rounded ──────────────────────────────────────────────────────────────── */\n\n.rounded { border-radius: var(--dimension-radius-half); }\n.rounded.labelOnly   { padding-left: calc(var(--dimension-space-100) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-100) + var(--dimension-space-050)); }\n.rounded.iconAndLabel { padding-left: calc(var(--dimension-space-075) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-100) + var(--dimension-space-050)); }\n.rounded.sizeSM.labelOnly   { padding-left: calc(var(--dimension-space-075) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-075) + var(--dimension-space-050)); }\n.rounded.sizeSM.iconAndLabel { padding-left: calc(var(--dimension-space-050) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-075) + var(--dimension-space-050)); }\n.rounded.sizeLG.labelOnly   { padding-left: calc(var(--dimension-space-150) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-150) + var(--dimension-space-050)); }\n.rounded.sizeLG.iconAndLabel { padding-left: calc(var(--dimension-space-100) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-150) + var(--dimension-space-050)); }\n\n/* ── Disabled ─────────────────────────────────────────────────────────────── */\n\n.inactive { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n\n/* ── Full width ───────────────────────────────────────────────────────────── */\n\n.fullWidth { display: flex; width: 100%; }\n\n/* ── Inner slots ──────────────────────────────────────────────────────────── */\n\n.btn__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  line-height: 0;\n}\n\n.btn__label {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.btn__chevron {\n  flex-shrink: 0;\n}\n\n.btn__badge {\n  position: absolute;\n  top: var(--dimension-space-025);\n  right: var(--dimension-space-025);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-semibold);\n  line-height: var(--typography-lineheight-xs);\n  color: var(--color-foreground-secondary);\n  pointer-events: none;\n  z-index: 10;\n}\n","import { Component, Prop, Event, EventEmitter, Element, State, h, Host } from '@stencil/core';\n\nexport type ButtonVariant   = 'primary' | 'secondary';\nexport type ButtonElevation = 'none' | 'flat' | 'elevated' | 'floating';\nexport type ButtonIntent    = 'none' | 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';\nexport type ButtonSize      = 'xs' | 'sm' | 'md' | 'lg';\nexport type ButtonContrast  = 'strong' | 'bold' | 'medium' | 'faint';\nexport type ButtonBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\nconst ICON_SIZE: Record<ButtonSize, number> = { xs: 12, sm: 16, md: 20, lg: 24 };\nconst TEXT_CLASS: Record<ButtonSize, string> = {\n  xs: 'text-caption-emphasis',\n  sm: 'text-body-small-emphasis',\n  md: 'text-body-medium-emphasis',\n  lg: 'text-body-large-emphasis',\n};\n\n@Component({\n  tag: 'ds-button',\n  styleUrl: 'Button.css',\n  scoped: true,\n})\nexport class Button {\n  @Element() el!: HTMLElement;\n\n  @Prop() variant: ButtonVariant = 'primary';\n  @Prop() intent: ButtonIntent = 'brand';\n  @Prop() size: ButtonSize = 'md';\n  @Prop() label: string | undefined;\n  @Prop() rounded: boolean = false;\n  @Prop() fullWidth: boolean = false;\n  @Prop() width: string | undefined;\n  @Prop() contrast: ButtonContrast = 'bold';\n  @Prop() background: ButtonBackground | undefined;\n  @Prop() dropdown: boolean = false;\n  @Prop() badgeCount: number | undefined;\n  @Prop() elevation: ButtonElevation | undefined;\n  @Prop() loading: boolean = false;\n  @Prop() inactive: boolean = false;\n  @Prop() href: string | undefined;\n  @Prop() target: string | undefined;\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  @State() private hasIcon: boolean = false;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n  @Event() dsMouseEnter!: EventEmitter<MouseEvent>;\n  @Event() dsMouseLeave!: EventEmitter<MouseEvent>;\n\n  componentWillLoad() {\n    this.hasIcon = !!this.el.querySelector('[slot=\"icon\"]');\n  }\n\n  private handleClick = (e: MouseEvent) => {\n    if (this.inactive || this.loading) return;\n    this.dsClick.emit(e);\n  };\n\n  private get effectiveElevation(): ButtonElevation {\n    return this.elevation ?? (this.variant === 'primary' ? 'none' : 'flat');\n  }\n\n  render() {\n    const Tag = this.href ? 'a' : 'button';\n    const size = this.size;\n    const iconSize = ICON_SIZE[size];\n    const textClass = TEXT_CLASS[size];\n    const elev = this.effectiveElevation;\n    const hasLabel = !!this.label;\n    const showLeading = this.hasIcon || this.loading;\n    const isIconOnly = showLeading && !hasLabel;\n    const isLabelOnly = hasLabel && !showLeading;\n    const isIconAndLabel = showLeading && hasLabel;\n    const bg = this.background;\n\n    const btnCls: Record<string, boolean> = {\n      btn: true,\n      [this.variant]: true,\n      [`intent${cap(this.intent)}`]: true,\n      [`size${size.toUpperCase()}`]: size !== 'md',\n      rounded: this.rounded,\n      inactive: this.inactive || this.loading,\n      iconOnly: isIconOnly,\n      labelOnly: isLabelOnly,\n      iconAndLabel: isIconAndLabel,\n      dropdown: this.dropdown,\n      [`contrast${cap(this.contrast)}`]: this.variant === 'primary' && this.intent !== 'none' && this.contrast !== 'bold',\n      [`elevation${cap(elev)}`]: true,\n      onMedium: bg === 'medium',\n      onBold: bg === 'bold',\n      onStrong: bg === 'strong',\n      onAlwaysDark: bg === 'always-dark',\n      fullWidth: this.fullWidth,\n    };\n\n    const extraProps: Record<string, unknown> = {};\n    if (Tag === 'button') {\n      extraProps.type = this.type;\n      extraProps.disabled = this.inactive || this.loading;\n    }\n    if (this.href) extraProps.href = this.href;\n    if (this.target) extraProps.target = this.target;\n\n    return (\n      <Host class={{ 'btn-host': true, 'btn-host--full': this.fullWidth }}>\n        <Tag\n          class={btnCls}\n          style={this.width ? { width: this.width } : undefined}\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.inactive || this.loading || undefined}\n          aria-busy={this.loading || undefined}\n          onClick={this.handleClick}\n          onMouseEnter={(e: MouseEvent) => !this.inactive && !this.loading && this.dsMouseEnter.emit(e)}\n          onMouseLeave={(e: MouseEvent) => !this.inactive && !this.loading && this.dsMouseLeave.emit(e)}\n          {...extraProps}\n        >\n          {/* Leading icon / loader */}\n          <span class=\"btn__icon\" style={{ fontSize: `${iconSize}px`, display: showLeading ? undefined : 'none' }}>\n            {this.loading\n              ? <ds-loader size={iconSize} />\n              : <slot name=\"icon\" />\n            }\n          </span>\n          {/* Label */}\n          {hasLabel && (\n            <span class={`btn__label ${textClass}`}>{this.label}</span>\n          )}\n          {/* Trailing chevron */}\n          {this.dropdown && (\n            <svg\n              class=\"btn__chevron\"\n              width={iconSize}\n              height={iconSize}\n              viewBox=\"0 0 20 20\"\n              fill=\"none\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          )}\n          {/* Badge */}\n          {this.badgeCount != null && this.badgeCount > 0 && (\n            <span class=\"btn__badge\">\n              {this.badgeCount > 9 ? '+' : this.badgeCount}\n            </span>\n          )}\n        </Tag>\n      </Host>\n    );\n  }\n}\n\nfunction cap(s: string) {\n  return s.charAt(0).toUpperCase() + s.slice(1);\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-DgDSRPSP.js

@@ -1,2 +0,0 @@
-import{p as s,H as e,h as t,t as i}from"./index.js";import{T as r}from"./p-BPMJx63I.js";import{r as n}from"./p-BWUTr_XN.js";const a=()=>`:host{display:inline-flex;align-items:center;flex-shrink:0}.spinner{flex-shrink:0;animation:spin 0.75s linear infinite}.status{display:inline-flex;align-items:center}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;const o=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.__attachShadow();this.size=r.iconographyMd}get sizePx(){return n(this.size,r.iconographyMd)}render(){const s=`${this.sizePx}px`;const e=t("svg",{style:{width:s,height:s},viewBox:"0 0 16 16",fill:"none",class:"spinner","aria-hidden":"true"},t("circle",{cx:"8",cy:"8",r:"5",stroke:"currentColor","stroke-width":"1","stroke-linecap":"round","stroke-dasharray":"23.6 7.9"}));if(!this.label)return e;return t("span",{role:"status","aria-live":"polite",class:"status"},e,t("span",{class:"visually-hidden"},this.label))}static get style(){return a()}},[1,"ds-loader",{size:[8],label:[1]}]);function l(){if(typeof customElements==="undefined"){return}const s=["ds-loader"];s.forEach((s=>{switch(s){case"ds-loader":if(!customElements.get(i(s))){customElements.define(i(s),o)}break}}))}l();export{o as L,l as d};
-//# sourceMappingURL=p-DgDSRPSP.js.map

package/dist/components/p-DgDSRPSP.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["loaderCss","Loader","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","TOKEN_DEFAULTS","iconographyMd","sizePx","resolveCssLengthPx","render","px","svg","h","style","width","height","viewBox","fill","class","cx","cy","r","stroke","label","role"],"sources":["src/wc/components/Loader/Loader.css?tag=ds-loader&encapsulation=shadow","src/wc/components/Loader/Loader.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.spinner {\n  flex-shrink: 0;\n  animation: spin 0.75s linear infinite;\n}\n\n.status {\n  display: inline-flex;\n  align-items: center;\n}\n\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(360deg); }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';\n\n@Component({\n  tag: 'ds-loader',\n  styleUrl: 'Loader.css',\n  shadow: true,\n})\nexport class Loader {\n  /** Render size — number (px) or TokoMo length (`var(--dimension-iconography-md)`, etc.). */\n  @Prop() size: number | string = TOKEN_DEFAULTS.iconographyMd;\n  /**\n   * Accessible label for standalone usage. Wraps the spinner in a live region\n   * and renders the label visually-hidden. Omit when the host element already\n   * conveys busy state via aria-busy.\n   */\n  @Prop() label: string | undefined;\n\n  private get sizePx(): number {\n    return resolveCssLengthPx(this.size, TOKEN_DEFAULTS.iconographyMd);\n  }\n\n  render() {\n    const px = `${this.sizePx}px`;\n    const svg = (\n      <svg\n        style={{ width: px, height: px }}\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        class=\"spinner\"\n        aria-hidden=\"true\"\n      >\n        <circle\n          cx=\"8\" cy=\"8\" r=\"5\"\n          stroke=\"currentColor\"\n          stroke-width=\"1\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"23.6 7.9\"\n        />\n      </svg>\n    );\n\n    if (!this.label) return svg;\n\n    return (\n      <span role=\"status\" aria-live=\"polite\" class=\"status\">\n        {svg}\n        <span class=\"visually-hidden\">{this.label}</span>\n      </span>\n    );\n  }\n}\n"],"mappings":"4HAAA,MAAMA,EAAY,IAAM,kY,MCQXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,kEAOUC,KAAAC,KAAwBC,EAAeC,aAyChD,CAjCC,UAAYC,GACV,OAAOC,EAAmBL,KAAKC,KAAMC,EAAeC,c,CAGtD,MAAAG,GACE,MAAMC,EAAK,GAAGP,KAAKI,WACnB,MAAMI,EACJC,EAAA,OACEC,MAAO,CAAEC,MAAOJ,EAAIK,OAAQL,GAC5BM,QAAQ,YACRC,KAAK,OACLC,MAAM,UAAS,cACH,QAEZN,EAAA,UACEO,GAAG,IAAIC,GAAG,IAAIC,EAAE,IAChBC,OAAO,eAAc,eACR,IAAG,iBACD,QAAO,mBACL,cAKvB,IAAKnB,KAAKoB,MAAO,OAAOZ,EAExB,OACEC,EAAA,QAAMY,KAAK,SAAQ,YAAW,SAASN,MAAM,UAC1CP,EACDC,EAAA,QAAMM,MAAM,mBAAmBf,KAAKoB,O","ignoreList":[]}

package/dist/types/components/Button/Button.d.ts

@@ -1,38 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export type ButtonVariant = 'primary' | 'secondary';
-export type ButtonElevation = 'none' | 'flat' | 'elevated' | 'floating';
-export type ButtonIntent = 'none' | 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
-export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
-export type ButtonContrast = 'strong' | 'bold' | 'medium' | 'faint';
-export type ButtonBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
-export declare class Button {
-    el: HTMLElement;
-    variant: ButtonVariant;
-    intent: ButtonIntent;
-    size: ButtonSize;
-    label: string | undefined;
-    rounded: boolean;
-    fullWidth: boolean;
-    width: string | undefined;
-    contrast: ButtonContrast;
-    background: ButtonBackground | undefined;
-    dropdown: boolean;
-    badgeCount: number | undefined;
-    elevation: ButtonElevation | undefined;
-    loading: boolean;
-    inactive: boolean;
-    href: string | undefined;
-    target: string | undefined;
-    type: 'button' | 'submit' | 'reset';
-    ariaLabel: string | undefined;
-    ariaLabelledby: string | undefined;
-    private hasIcon;
-    dsClick: EventEmitter<MouseEvent>;
-    dsMouseEnter: EventEmitter<MouseEvent>;
-    dsMouseLeave: EventEmitter<MouseEvent>;
-    componentWillLoad(): void;
-    private handleClick;
-    private get effectiveElevation();
-    render(): any;
-}
-//# sourceMappingURL=Button.d.ts.map

package/dist/types/components/Button/index.d.ts

@@ -1,2 +0,0 @@
-export type { ButtonVariant, ButtonElevation, ButtonIntent, ButtonSize, ButtonContrast, ButtonBackground } from './Button';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/components/ButtonGroup/ButtonGroup.d.ts

@@ -1,29 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export type ButtonGroupElevation = 'none' | 'flat' | 'elevated' | 'floating';
-export type ButtonGroupSize = 'xs' | 'sm' | 'md' | 'lg';
-export interface ButtonGroupItem {
-    label?: string;
-    /** Icon name for <ds-icon>. Set via JS property. */
-    icon?: string;
-    variant?: 'primary' | 'secondary';
-    intent?: 'none' | 'neutral' | 'brand' | 'negative' | 'warning' | 'positive';
-    inactive?: boolean;
-    href?: string;
-}
-export declare class ButtonGroup {
-    /**
-     * Array of button descriptors. Set via JS property.
-     * @example el.items = [{ label: 'Filter', icon: 'Filter' }, { label: 'Sort' }];
-     */
-    items: ButtonGroupItem[];
-    /** Chrome level for the group container. */
-    elevation: ButtonGroupElevation;
-    /** Size passed to each ds-button. */
-    size: ButtonGroupSize;
-    /** Pill shape for group + buttons. */
-    rounded: boolean;
-    /** Emits the index of the clicked item. */
-    dsClick: EventEmitter<number>;
-    render(): any;
-}
-//# sourceMappingURL=ButtonGroup.d.ts.map

package/dist/types/components/ToggleButton/ToggleButton.d.ts

@@ -1,37 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export type ToggleButtonElevation = 'none' | 'flat' | 'elevated' | 'floating';
-export type ToggleButtonSize = 'md' | 'sm' | 'xs';
-export type ToggleButtonBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
-export declare class ToggleButton {
-    /**
-     * Chrome level.
-     *   none     — ghost (transparent, no border, no shadow)
-     *   flat     — border only, transparent bg
-     *   elevated — bg-primary + shadow  [default]
-     *   floating — bg-primary + FAB-strength shadow
-     */
-    elevation: ToggleButtonElevation;
-    /** Label text. */
-    label: string | undefined;
-    /**
-     * Icon name for <ds-icon>. Set via JS property.
-     * @example el.icon = 'GridView';
-     */
-    icon: string | undefined;
-    /** Size: md (32px), sm (24px), xs (16px). */
-    size: ToggleButtonSize;
-    /** Pill shape. */
-    rounded: boolean;
-    /** Parent surface context — adjusts hover tokens for colored backgrounds. */
-    background: ToggleButtonBackground | undefined;
-    /** Controlled pressed state. */
-    pressed: boolean;
-    /** Disables interaction. */
-    inactive: boolean;
-    ariaLabel: string | undefined;
-    /** Emits the new pressed value (!pressed) on click. */
-    dsChange: EventEmitter<boolean>;
-    private handleClick;
-    render(): any;
-}
-//# sourceMappingURL=ToggleButton.d.ts.map

package/dist/types/components/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -1,33 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export type ToggleGroupElevation = 'none' | 'flat' | 'elevated' | 'floating';
-export type ToggleGroupSize = 'md' | 'sm' | 'xs';
-export type ToggleGroupBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
-export interface ToggleGroupItem {
-    id: string;
-    label?: string;
-    /** Icon name for <ds-icon>. */
-    icon?: string;
-    inactive?: boolean;
-}
-export declare class ToggleButtonGroup {
-    /**
-     * Array of item descriptors. Set via JS property.
-     * @example el.items = [{ id: 'list', label: 'List' }, { id: 'grid', icon: 'GridView' }];
-     */
-    items: ToggleGroupItem[];
-    /** ID of the currently selected / pressed item. */
-    value: string;
-    /** Chrome level for the group container. */
-    elevation: ToggleGroupElevation;
-    /** Size passed to each ds-toggle-button. */
-    size: ToggleGroupSize;
-    /** Pill shape for group + buttons. */
-    rounded: boolean;
-    /** Parent surface context. */
-    background: ToggleGroupBackground | undefined;
-    /** Emits the id of the newly selected item. */
-    dsChange: EventEmitter<string>;
-    private handleItemChange;
-    render(): any;
-}
-//# sourceMappingURL=ToggleButtonGroup.d.ts.map

package/src/react/ds-button-group.ts

@@ -1,27 +0,0 @@
-'use client';
-
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-
-/* eslint-disable */
-
-import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { createComponent } from '@stencil/react-output-target/runtime';
-import React from 'react';
-
-import { type DsButtonGroupCustomEvent } from "@ds-mo/ui";
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsButtonGroup as DsButtonGroupElement, defineCustomElement as defineDsButtonGroup } from "@ds-mo/ui/dist/components/ds-button-group.js";
-
-export type DsButtonGroupEvents = { onDsClick: EventName<DsButtonGroupCustomEvent<number>> };
-
-export const DsButtonGroup: StencilReactComponent<DsButtonGroupElement, DsButtonGroupEvents, Components.DsButtonGroup> = /*@__PURE__*/ createComponent<DsButtonGroupElement, DsButtonGroupEvents, Components.DsButtonGroup>({
-    tagName: 'ds-button-group',
-    elementClass: DsButtonGroupElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onDsClick: 'dsClick' } as DsButtonGroupEvents,
-    defineCustomElement: defineDsButtonGroup
-});

package/src/react/ds-button.ts

@@ -1,35 +0,0 @@
-'use client';
-
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-
-/* eslint-disable */
-
-import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { createComponent } from '@stencil/react-output-target/runtime';
-import React from 'react';
-
-import { type DsButtonCustomEvent } from "@ds-mo/ui";
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsButton as DsButtonElement, defineCustomElement as defineDsButton } from "@ds-mo/ui/dist/components/ds-button.js";
-
-export type DsButtonEvents = {
-    onDsClick: EventName<DsButtonCustomEvent<MouseEvent>>,
-    onDsMouseEnter: EventName<DsButtonCustomEvent<MouseEvent>>,
-    onDsMouseLeave: EventName<DsButtonCustomEvent<MouseEvent>>
-};
-
-export const DsButton: StencilReactComponent<DsButtonElement, DsButtonEvents, Components.DsButton> = /*@__PURE__*/ createComponent<DsButtonElement, DsButtonEvents, Components.DsButton>({
-    tagName: 'ds-button',
-    elementClass: DsButtonElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onDsClick: 'dsClick',
-        onDsMouseEnter: 'dsMouseEnter',
-        onDsMouseLeave: 'dsMouseLeave'
-    } as DsButtonEvents,
-    defineCustomElement: defineDsButton
-});

package/src/react/ds-toggle-button-group.ts

@@ -1,27 +0,0 @@
-'use client';
-
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-
-/* eslint-disable */
-
-import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { createComponent } from '@stencil/react-output-target/runtime';
-import React from 'react';
-
-import { type DsToggleButtonGroupCustomEvent } from "@ds-mo/ui";
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsToggleButtonGroup as DsToggleButtonGroupElement, defineCustomElement as defineDsToggleButtonGroup } from "@ds-mo/ui/dist/components/ds-toggle-button-group.js";
-
-export type DsToggleButtonGroupEvents = { onDsChange: EventName<DsToggleButtonGroupCustomEvent<string>> };
-
-export const DsToggleButtonGroup: StencilReactComponent<DsToggleButtonGroupElement, DsToggleButtonGroupEvents, Components.DsToggleButtonGroup> = /*@__PURE__*/ createComponent<DsToggleButtonGroupElement, DsToggleButtonGroupEvents, Components.DsToggleButtonGroup>({
-    tagName: 'ds-toggle-button-group',
-    elementClass: DsToggleButtonGroupElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onDsChange: 'dsChange' } as DsToggleButtonGroupEvents,
-    defineCustomElement: defineDsToggleButtonGroup
-});

package/src/react/ds-toggle-button.ts

@@ -1,27 +0,0 @@
-'use client';
-
-/**
- * This file was automatically generated by the Stencil React Output Target.
- * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
- */
-
-/* eslint-disable */
-
-import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { createComponent } from '@stencil/react-output-target/runtime';
-import React from 'react';
-
-import { type DsToggleButtonCustomEvent } from "@ds-mo/ui";
-import type { Components } from "@ds-mo/ui/dist/components";
-import { DsToggleButton as DsToggleButtonElement, defineCustomElement as defineDsToggleButton } from "@ds-mo/ui/dist/components/ds-toggle-button.js";
-
-export type DsToggleButtonEvents = { onDsChange: EventName<DsToggleButtonCustomEvent<boolean>> };
-
-export const DsToggleButton: StencilReactComponent<DsToggleButtonElement, DsToggleButtonEvents, Components.DsToggleButton> = /*@__PURE__*/ createComponent<DsToggleButtonElement, DsToggleButtonEvents, Components.DsToggleButton>({
-    tagName: 'ds-toggle-button',
-    elementClass: DsToggleButtonElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onDsChange: 'dsChange' } as DsToggleButtonEvents,
-    defineCustomElement: defineDsToggleButton
-});

package/src/wc/components/Button/Button.tsx

@@ -1,158 +0,0 @@
-import { Component, Prop, Event, EventEmitter, Element, State, h, Host } from '@stencil/core';
-
-export type ButtonVariant   = 'primary' | 'secondary';
-export type ButtonElevation = 'none' | 'flat' | 'elevated' | 'floating';
-export type ButtonIntent    = 'none' | 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
-export type ButtonSize      = 'xs' | 'sm' | 'md' | 'lg';
-export type ButtonContrast  = 'strong' | 'bold' | 'medium' | 'faint';
-export type ButtonBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
-
-const ICON_SIZE: Record<ButtonSize, number> = { xs: 12, sm: 16, md: 20, lg: 24 };
-const TEXT_CLASS: Record<ButtonSize, string> = {
-  xs: 'text-caption-emphasis',
-  sm: 'text-body-small-emphasis',
-  md: 'text-body-medium-emphasis',
-  lg: 'text-body-large-emphasis',
-};
-
-@Component({
-  tag: 'ds-button',
-  styleUrl: 'Button.css',
-  scoped: true,
-})
-export class Button {
-  @Element() el!: HTMLElement;
-
-  @Prop() variant: ButtonVariant = 'primary';
-  @Prop() intent: ButtonIntent = 'brand';
-  @Prop() size: ButtonSize = 'md';
-  @Prop() label: string | undefined;
-  @Prop() rounded: boolean = false;
-  @Prop() fullWidth: boolean = false;
-  @Prop() width: string | undefined;
-  @Prop() contrast: ButtonContrast = 'bold';
-  @Prop() background: ButtonBackground | undefined;
-  @Prop() dropdown: boolean = false;
-  @Prop() badgeCount: number | undefined;
-  @Prop() elevation: ButtonElevation | undefined;
-  @Prop() loading: boolean = false;
-  @Prop() inactive: boolean = false;
-  @Prop() href: string | undefined;
-  @Prop() target: string | undefined;
-  @Prop() type: 'button' | 'submit' | 'reset' = 'button';
-  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;
-  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;
-
-  @State() private hasIcon: boolean = false;
-
-  @Event() dsClick!: EventEmitter<MouseEvent>;
-  @Event() dsMouseEnter!: EventEmitter<MouseEvent>;
-  @Event() dsMouseLeave!: EventEmitter<MouseEvent>;
-
-  componentWillLoad() {
-    this.hasIcon = !!this.el.querySelector('[slot="icon"]');
-  }
-
-  private handleClick = (e: MouseEvent) => {
-    if (this.inactive || this.loading) return;
-    this.dsClick.emit(e);
-  };
-
-  private get effectiveElevation(): ButtonElevation {
-    return this.elevation ?? (this.variant === 'primary' ? 'none' : 'flat');
-  }
-
-  render() {
-    const Tag = this.href ? 'a' : 'button';
-    const size = this.size;
-    const iconSize = ICON_SIZE[size];
-    const textClass = TEXT_CLASS[size];
-    const elev = this.effectiveElevation;
-    const hasLabel = !!this.label;
-    const showLeading = this.hasIcon || this.loading;
-    const isIconOnly = showLeading && !hasLabel;
-    const isLabelOnly = hasLabel && !showLeading;
-    const isIconAndLabel = showLeading && hasLabel;
-    const bg = this.background;
-
-    const btnCls: Record<string, boolean> = {
-      btn: true,
-      [this.variant]: true,
-      [`intent${cap(this.intent)}`]: true,
-      [`size${size.toUpperCase()}`]: size !== 'md',
-      rounded: this.rounded,
-      inactive: this.inactive || this.loading,
-      iconOnly: isIconOnly,
-      labelOnly: isLabelOnly,
-      iconAndLabel: isIconAndLabel,
-      dropdown: this.dropdown,
-      [`contrast${cap(this.contrast)}`]: this.variant === 'primary' && this.intent !== 'none' && this.contrast !== 'bold',
-      [`elevation${cap(elev)}`]: true,
-      onMedium: bg === 'medium',
-      onBold: bg === 'bold',
-      onStrong: bg === 'strong',
-      onAlwaysDark: bg === 'always-dark',
-      fullWidth: this.fullWidth,
-    };
-
-    const extraProps: Record<string, unknown> = {};
-    if (Tag === 'button') {
-      extraProps.type = this.type;
-      extraProps.disabled = this.inactive || this.loading;
-    }
-    if (this.href) extraProps.href = this.href;
-    if (this.target) extraProps.target = this.target;
-
-    return (
-      <Host class={{ 'btn-host': true, 'btn-host--full': this.fullWidth }}>
-        <Tag
-          class={btnCls}
-          style={this.width ? { width: this.width } : undefined}
-          aria-label={this.ariaLabel}
-          aria-labelledby={this.ariaLabelledby}
-          aria-disabled={this.inactive || this.loading || undefined}
-          aria-busy={this.loading || undefined}
-          onClick={this.handleClick}
-          onMouseEnter={(e: MouseEvent) => !this.inactive && !this.loading && this.dsMouseEnter.emit(e)}
-          onMouseLeave={(e: MouseEvent) => !this.inactive && !this.loading && this.dsMouseLeave.emit(e)}
-          {...extraProps}
-        >
-          {/* Leading icon / loader */}
-          <span class="btn__icon" style={{ fontSize: `${iconSize}px`, display: showLeading ? undefined : 'none' }}>
-            {this.loading
-              ? <ds-loader size={iconSize} />
-              : <slot name="icon" />
-            }
-          </span>
-          {/* Label */}
-          {hasLabel && (
-            <span class={`btn__label ${textClass}`}>{this.label}</span>
-          )}
-          {/* Trailing chevron */}
-          {this.dropdown && (
-            <svg
-              class="btn__chevron"
-              width={iconSize}
-              height={iconSize}
-              viewBox="0 0 20 20"
-              fill="none"
-              aria-hidden="true"
-            >
-              <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-            </svg>
-          )}
-          {/* Badge */}
-          {this.badgeCount != null && this.badgeCount > 0 && (
-            <span class="btn__badge">
-              {this.badgeCount > 9 ? '+' : this.badgeCount}
-            </span>
-          )}
-        </Tag>
-      </Host>
-    );
-  }
-}
-
-function cap(s: string) {
-  return s.charAt(0).toUpperCase() + s.slice(1);
-}

package/src/wc/components/Button/index.ts

@@ -1 +0,0 @@
-export type { ButtonVariant, ButtonElevation, ButtonIntent, ButtonSize, ButtonContrast, ButtonBackground } from './Button';

package/src/wc/components/ButtonGroup/ButtonGroup.tsx

@@ -1,110 +0,0 @@
-import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
-
-export type ButtonGroupElevation = 'none' | 'flat' | 'elevated' | 'floating';
-export type ButtonGroupSize      = 'xs' | 'sm' | 'md' | 'lg';
-
-export interface ButtonGroupItem {
-  label?: string;
-  /** Icon name for <ds-icon>. Set via JS property. */
-  icon?: string;
-  variant?: 'primary' | 'secondary';
-  intent?: 'none' | 'neutral' | 'brand' | 'negative' | 'warning' | 'positive';
-  inactive?: boolean;
-  href?: string;
-}
-
-@Component({
-  tag: 'ds-button-group',
-  styleUrl: 'ButtonGroup.css',
-  scoped: true,
-})
-export class ButtonGroup {
-  /**
-   * Array of button descriptors. Set via JS property.
-   * @example el.items = [{ label: 'Filter', icon: 'Filter' }, { label: 'Sort' }];
-   */
-  @Prop() items: ButtonGroupItem[] = [];
-
-  /** Chrome level for the group container. */
-  @Prop() elevation: ButtonGroupElevation = 'flat';
-
-  /** Size passed to each ds-button. */
-  @Prop() size: ButtonGroupSize = 'md';
-
-  /** Pill shape for group + buttons. */
-  @Prop() rounded: boolean = false;
-
-  /** Emits the index of the clicked item. */
-  @Event() dsClick!: EventEmitter<number>;
-
-  render() {
-    const items = this.items;
-    const count = items.length;
-    const elev = this.elevation;
-    const elevKey = elev.charAt(0).toUpperCase() + elev.slice(1);
-    const isGhost = elev === 'none';
-
-    const groupCls: Record<string, boolean> = {
-      group: true,
-      [`group${elevKey}`]: true,
-      groupRounded: this.rounded,
-    };
-
-    return (
-      <Host>
-        <div class={groupCls} role="group">
-          {items.map((item, i) => {
-            const isFirst = i === 0;
-            const isLast = i === count - 1;
-            const isMid = !isFirst && !isLast;
-            const variant = item.variant ?? 'secondary';
-            const isIconOnly = !!item.icon && !item.label;
-            const needsRoundedCorrection = this.rounded && !isIconOnly && this.size !== 'xs';
-            const sizeKey = this.size.toUpperCase() as 'MD' | 'SM' | 'LG' | 'XS';
-
-            const itemCls: Record<string, boolean> = {
-              item: true,
-              first: isFirst,
-              last: isLast,
-              middle: isMid,
-              itemShort: isGhost && variant === 'secondary',
-              [`roundedFirst${sizeKey}`]: !!(needsRoundedCorrection && isFirst),
-              [`roundedLast${sizeKey}`]: !!(needsRoundedCorrection && isLast),
-              [`roundedMid${sizeKey}`]: !!(needsRoundedCorrection && isMid),
-            };
-
-            const dividerCls: Record<string, boolean> = {
-              divider: true,
-              dividerGhost: isGhost,
-              dividerGhostXS: isGhost && this.size === 'xs',
-              dividerGhostSM: isGhost && this.size === 'sm',
-              dividerGhostLG: isGhost && this.size === 'lg',
-            };
-
-            return [
-              i > 0 && (
-                <div class={dividerCls} aria-hidden="true" />
-              ),
-              <ds-button
-                class={itemCls}
-                variant={variant}
-                intent={item.intent ?? 'none'}
-                elevation={elev}
-                size={this.size}
-                label={item.label}
-                rounded={this.rounded}
-                inactive={item.inactive}
-                href={item.href}
-                onDsClick={() => this.dsClick.emit(i)}
-              >
-                {item.icon && (
-                  <ds-icon slot="icon" name={item.icon} />
-                )}
-              </ds-button>,
-            ];
-          })}
-        </div>
-      </Host>
-    );
-  }
-}