@ds-mo/ui 0.9.3 → 0.10.0

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

@@ -1 +1 @@
-{"version":3,"names":["bannerCss","FADE_OUT_MS","AUTO_DISMISS_MS","Banner","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","intent","contrast","message","header","floating","showDismiss","dismissLabel","closing","dismissTimer","closeTimer","componentDidLoad","scheduleDismiss","onMessageChange","newVal","disconnectedCallback","clearTimers","clearTimeout","setTimeout","beginClose","dsDismiss","emit","getContentColor","c","getBg","getElevation","render","contentColor","isAssertive","bannerEl","h","class","style","role","undefined","backgroundColor","boxShadow","type","onClick","Host","display","zIndex"],"sources":["src/wc/components/Banner/Banner.css?tag=ds-banner&encapsulation=scoped","src/wc/components/Banner/Banner.tsx"],"sourcesContent":[".banner-surface {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  border-radius: var(--dimension-radius-075);\n}\n\n.banner-header-surface {\n  width: 100%;\n  height: var(--dimension-space-100);\n  flex-shrink: 0;\n  overflow: hidden;\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n\n.banner-header {\n  width: 100%;\n  height: 100%;\n  background: repeating-linear-gradient(\n    -45deg,\n    var(--banner-content),\n    var(--banner-content) var(--dimension-size-100),\n    transparent var(--dimension-size-100),\n    transparent var(--dimension-size-200)\n  );\n}\n\n.banner-body {\n  padding: var(--dimension-space-075);\n  min-height: var(--dimension-size-400);\n  display: flex;\n  align-items: flex-start;\n  gap: var(--dimension-space-075);\n}\n\n.banner-message {\n  color: var(--banner-content);\n  line-height: var(--typography-lineheight-md);\n  display: block;\n  flex: 1;\n  min-width: 0;\n}\n\n.banner-dismiss {\n  background: none;\n  border: none;\n  margin: 0;\n  padding: var(--dimension-space-025);\n  color: var(--banner-content);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  border-radius: var(--dimension-radius-050);\n  position: relative;\n  font-size: 18px;\n  line-height: 1;\n}\n\n.banner-dismiss::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: transparent;\n  transition: var(--effect-transition-interaction-background-short-2, background-color var(--effect-motion-short-2));\n  pointer-events: none;\n}\n\n.banner-dismiss:hover::before  { background-color: var(--color-interaction-hover); }\n.banner-dismiss:active::before { background-color: var(--color-interaction-pressed); }\n\n.banner-dismiss:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-stroke-width-015);\n}\n\n/* ─── Floating ──────────────────────────────────────────────────────────────── */\n\n.floating-position {\n  position: fixed;\n  top: var(--dimension-space-200);\n  left: 50%;\n  transform: translateX(-50%);\n  pointer-events: none;\n}\n\n.floating-toast {\n  pointer-events: auto;\n  animation: bannerFadeIn var(--effect-motion-short-2, 150ms) forwards;\n}\n\n.floating-toast--closing {\n  animation: bannerFadeOut var(--effect-motion-short-3, 200ms) forwards;\n}\n\n@keyframes bannerFadeIn {\n  from { opacity: 0; transform: translateY(-8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes bannerFadeOut {\n  from { opacity: 1; transform: translateY(0); }\n  to   { opacity: 0; transform: translateY(-4px); }\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\n\nexport type BannerIntent =\n  | 'brand' | 'positive' | 'negative' | 'warning' | 'caution'\n  | 'ai' | 'neutral' | 'walkthrough' | 'guide';\n\nexport type BannerContrast = 'faint' | 'medium' | 'bold' | 'strong';\n\nconst FADE_OUT_MS = 200;\nconst AUTO_DISMISS_MS = 4000;\n\n@Component({\n  tag: 'ds-banner',\n  styleUrl: 'Banner.css',\n  scoped: true,\n})\nexport class Banner {\n  @Prop() intent: BannerIntent = 'neutral';\n  @Prop() contrast: BannerContrast = 'medium';\n  @Prop() message: string = '';\n  /** Renders the diagonal-stripe accent bar above the body. */\n  @Prop() header: boolean = false;\n  /** Renders at a fixed position (centered top) and auto-dismisses after 4 s. */\n  @Prop() floating: boolean = false;\n  @Prop() showDismiss: boolean = false;\n  @Prop() dismissLabel: string = 'Dismiss';\n\n  @State() private closing: boolean = false;\n\n  @Event() dsDismiss!: EventEmitter<void>;\n\n  private dismissTimer: ReturnType<typeof setTimeout> | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n  componentDidLoad() {\n    if (this.floating && this.message) this.scheduleDismiss();\n  }\n\n  @Watch('message')\n  onMessageChange(newVal: string) {\n    if (this.floating && newVal) {\n      this.closing = false;\n      this.scheduleDismiss();\n    }\n  }\n\n  disconnectedCallback() {\n    this.clearTimers();\n  }\n\n  private clearTimers() {\n    if (this.dismissTimer) { clearTimeout(this.dismissTimer); this.dismissTimer = null; }\n    if (this.closeTimer)   { clearTimeout(this.closeTimer);   this.closeTimer = null; }\n  }\n\n  private scheduleDismiss() {\n    this.clearTimers();\n    this.dismissTimer = setTimeout(() => {\n      this.dismissTimer = null;\n      this.beginClose();\n    }, AUTO_DISMISS_MS);\n  }\n\n  private beginClose() {\n    this.clearTimers();\n    if (this.floating) {\n      this.closing = true;\n      this.closeTimer = setTimeout(() => {\n        this.closing = false;\n        this.closeTimer = null;\n        this.dsDismiss.emit();\n      }, FADE_OUT_MS);\n    } else {\n      this.dsDismiss.emit();\n    }\n  }\n\n  private getContentColor(): string {\n    if (this.contrast === 'bold') return 'var(--color-foreground-on-bold-background-primary)';\n    const c = this.contrast === 'faint' ? 'bold' : this.contrast === 'medium' ? 'strong' : 'medium';\n    return `var(--color-foreground-${c}-${this.intent})`;\n  }\n\n  private getBg(): string {\n    return `var(--color-background-${this.contrast}-${this.intent})`;\n  }\n\n  private getElevation(): string {\n    return this.floating\n      ? 'var(--effect-elevation-elevated-floating, var(--effect-elevation-floating))'\n      : 'var(--effect-elevation-elevated)';\n  }\n\n  render() {\n    const contentColor = this.getContentColor();\n    const isAssertive = this.intent === 'negative';\n\n    const bannerEl = (\n      <div\n        class={{ 'banner-wrapper': true }}\n        style={{ '--banner-content': contentColor } as any}\n        role={isAssertive ? 'alert' : 'status'}\n        aria-live={isAssertive ? undefined : 'polite'}\n      >\n        <div\n          class=\"banner-surface\"\n          style={{\n            backgroundColor: this.getBg(),\n            boxShadow: this.getElevation(),\n          }}\n        >\n          {this.header && (\n            <div class=\"banner-header-surface\">\n              <div class=\"banner-header\" />\n            </div>\n          )}\n          <div class=\"banner-body\">\n            <span class=\"text-body-medium banner-message\">{this.message}</span>\n            {this.showDismiss && (\n              <button\n                type=\"button\"\n                class=\"banner-dismiss\"\n                onClick={() => this.beginClose()}\n                aria-label={this.dismissLabel}\n              >\n                &times;\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n\n    if (this.floating) {\n      return (\n        <Host style={{ display: 'contents' }}>\n          <div class=\"floating-position\" style={{ zIndex: '9998' }}>\n            <div class={{ 'floating-toast': true, 'floating-toast--closing': this.closing }}>\n              {bannerEl}\n            </div>\n          </div>\n        </Host>\n      );\n    }\n\n    return <Host style={{ display: 'contents' }}>{bannerEl}</Host>;\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAY,IAAM,41ECQxB,MAAMC,EAAc,IACpB,MAAMC,EAAkB,I,MAOXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,+EAMUC,KAAAC,OAAuB,UACvBD,KAAAE,SAA2B,SAC3BF,KAAAG,QAAkB,GAElBH,KAAAI,OAAkB,MAElBJ,KAAAK,SAAoB,MACpBL,KAAAM,YAAuB,MACvBN,KAAAO,aAAuB,UAEdP,KAAAQ,QAAmB,MAI5BR,KAAAS,aAAqD,KACrDT,KAAAU,WAAmD,IAmH5D,CAjHC,gBAAAC,GACE,GAAIX,KAAKK,UAAYL,KAAKG,QAASH,KAAKY,iB,CAI1C,eAAAC,CAAgBC,GACd,GAAId,KAAKK,UAAYS,EAAQ,CAC3Bd,KAAKQ,QAAU,MACfR,KAAKY,iB,EAIT,oBAAAG,GACEf,KAAKgB,a,CAGC,WAAAA,GACN,GAAIhB,KAAKS,aAAc,CAAEQ,aAAajB,KAAKS,cAAeT,KAAKS,aAAe,I,CAC9E,GAAIT,KAAKU,WAAc,CAAEO,aAAajB,KAAKU,YAAeV,KAAKU,WAAa,I,EAGtE,eAAAE,GACNZ,KAAKgB,cACLhB,KAAKS,aAAeS,YAAW,KAC7BlB,KAAKS,aAAe,KACpBT,KAAKmB,YAAY,GAChBzB,E,CAGG,UAAAyB,GACNnB,KAAKgB,cACL,GAAIhB,KAAKK,SAAU,CACjBL,KAAKQ,QAAU,KACfR,KAAKU,WAAaQ,YAAW,KAC3BlB,KAAKQ,QAAU,MACfR,KAAKU,WAAa,KAClBV,KAAKoB,UAAUC,MAAM,GACpB5B,E,KACE,CACLO,KAAKoB,UAAUC,M,EAIX,eAAAC,GACN,GAAItB,KAAKE,WAAa,OAAQ,MAAO,qDACrC,MAAMqB,EAAIvB,KAAKE,WAAa,QAAU,OAASF,KAAKE,WAAa,SAAW,SAAW,SACvF,MAAO,0BAA0BqB,KAAKvB,KAAKC,S,CAGrC,KAAAuB,GACN,MAAO,0BAA0BxB,KAAKE,YAAYF,KAAKC,S,CAGjD,YAAAwB,GACN,OAAOzB,KAAKK,SACR,8EACA,kC,CAGN,MAAAqB,GACE,MAAMC,EAAe3B,KAAKsB,kBAC1B,MAAMM,EAAc5B,KAAKC,SAAW,WAEpC,MAAM4B,EACJC,EAAA,OACEC,MAAO,CAAE,iBAAkB,MAC3BC,MAAO,CAAE,mBAAoBL,GAC7BM,KAAML,EAAc,QAAU,SAAQ,YAC3BA,EAAcM,UAAY,UAErCJ,EAAA,OACEC,MAAM,iBACNC,MAAO,CACLG,gBAAiBnC,KAAKwB,QACtBY,UAAWpC,KAAKyB,iBAGjBzB,KAAKI,QACJ0B,EAAA,OAAKC,MAAM,yBACTD,EAAA,OAAKC,MAAM,mBAGfD,EAAA,OAAKC,MAAM,eACTD,EAAA,QAAMC,MAAM,mCAAmC/B,KAAKG,SACnDH,KAAKM,aACJwB,EAAA,UACEO,KAAK,SACLN,MAAM,iBACNO,QAAS,IAAMtC,KAAKmB,aAAY,aACpBnB,KAAKO,cAAY,QAUzC,GAAIP,KAAKK,SAAU,CACjB,OACEyB,EAACS,EAAI,CAACP,MAAO,CAAEQ,QAAS,aACtBV,EAAA,OAAKC,MAAM,oBAAoBC,MAAO,CAAES,OAAQ,SAC9CX,EAAA,OAAKC,MAAO,CAAE,iBAAkB,KAAM,0BAA2B/B,KAAKQ,UACnEqB,I,CAOX,OAAOC,EAACS,EAAI,CAACP,MAAO,CAAEQ,QAAS,aAAeX,E","ignoreList":[]}
+{"version":3,"names":["bannerCss","FADE_OUT_MS","AUTO_DISMISS_MS","Banner","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","intent","contrast","message","header","floating","showDismiss","dismissLabel","closing","dismissTimer","closeTimer","componentDidLoad","scheduleDismiss","onMessageChange","newVal","disconnectedCallback","clearTimers","clearTimeout","setTimeout","beginClose","dsDismiss","emit","getContentColor","c","getBg","getElevation","render","contentColor","isAssertive","bannerEl","h","class","style","role","undefined","backgroundColor","boxShadow","type","onClick","Host","display","zIndex"],"sources":["src/wc/components/Banner/Banner.css?tag=ds-banner&encapsulation=scoped","src/wc/components/Banner/Banner.tsx"],"sourcesContent":[".banner-surface {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  border-radius: var(--dimension-radius-075);\n}\n\n.banner-header-surface {\n  width: 100%;\n  height: var(--dimension-space-100);\n  flex-shrink: 0;\n  overflow: hidden;\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n\n.banner-header {\n  width: 100%;\n  height: 100%;\n  background: repeating-linear-gradient(\n    -45deg,\n    var(--banner-content),\n    var(--banner-content) var(--dimension-size-100),\n    transparent var(--dimension-size-100),\n    transparent var(--dimension-size-200)\n  );\n}\n\n.banner-body {\n  padding: var(--dimension-space-075);\n  min-height: var(--dimension-size-400);\n  display: flex;\n  align-items: flex-start;\n  gap: var(--dimension-space-075);\n}\n\n.banner-message {\n  color: var(--banner-content);\n  line-height: var(--typography-lineheight-md);\n  display: block;\n  flex: 1;\n  min-width: 0;\n}\n\n.banner-dismiss {\n  background: none;\n  border: none;\n  margin: 0;\n  padding: var(--dimension-space-025);\n  color: var(--banner-content);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  border-radius: var(--dimension-radius-050);\n  position: relative;\n  font-size: 18px;\n  line-height: 1;\n}\n\n.banner-dismiss::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: transparent;\n  transition: var(--effect-transition-interaction-background-short-2, background-color var(--effect-motion-short-2));\n  pointer-events: none;\n}\n\n.banner-dismiss:hover::before  { background-color: var(--color-interaction-hover); }\n.banner-dismiss:active::before { background-color: var(--color-interaction-pressed); }\n\n.banner-dismiss:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-stroke-width-015);\n}\n\n/* ─── Floating ──────────────────────────────────────────────────────────────── */\n\n.floating-position {\n  position: fixed;\n  top: var(--dimension-space-200);\n  left: 50%;\n  transform: translateX(-50%);\n  pointer-events: none;\n}\n\n.floating-toast {\n  pointer-events: auto;\n  animation: bannerFadeIn var(--effect-motion-short-2, 150ms) forwards;\n}\n\n.floating-toast--closing {\n  animation: bannerFadeOut var(--effect-motion-short-3, 200ms) forwards;\n}\n\n@keyframes bannerFadeIn {\n  from { opacity: 0; transform: translateY(-8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes bannerFadeOut {\n  from { opacity: 1; transform: translateY(0); }\n  to   { opacity: 0; transform: translateY(-4px); }\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\n\nexport type BannerIntent =\n  | 'brand' | 'positive' | 'negative' | 'warning' | 'caution'\n  | 'ai' | 'neutral' | 'walkthrough' | 'guide';\n\nexport type BannerContrast = 'faint' | 'medium' | 'bold' | 'strong';\n\nconst FADE_OUT_MS = 200;\nconst AUTO_DISMISS_MS = 4000;\n\n@Component({\n  tag: 'ds-banner',\n  styleUrl: 'Banner.css',\n  scoped: true,\n})\nexport class Banner {\n  @Prop() intent: BannerIntent = 'neutral';\n  @Prop() contrast: BannerContrast = 'medium';\n  @Prop() message: string = '';\n  /** Renders the diagonal-stripe accent bar above the body. */\n  @Prop() header: boolean = false;\n  /** Renders at a fixed position (centered top) and auto-dismisses after 4 s. */\n  @Prop() floating: boolean = false;\n  @Prop() showDismiss: boolean = false;\n  @Prop() dismissLabel: string = 'Dismiss';\n\n  @State() private closing: boolean = false;\n\n  @Event() dsDismiss!: EventEmitter<void>;\n\n  private dismissTimer: ReturnType<typeof setTimeout> | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n  componentDidLoad() {\n    if (this.floating && this.message) this.scheduleDismiss();\n  }\n\n  @Watch('message')\n  onMessageChange(newVal: string) {\n    if (this.floating && newVal) {\n      this.closing = false;\n      this.scheduleDismiss();\n    }\n  }\n\n  disconnectedCallback() {\n    this.clearTimers();\n  }\n\n  private clearTimers() {\n    if (this.dismissTimer) { clearTimeout(this.dismissTimer); this.dismissTimer = null; }\n    if (this.closeTimer)   { clearTimeout(this.closeTimer);   this.closeTimer = null; }\n  }\n\n  private scheduleDismiss() {\n    this.clearTimers();\n    this.dismissTimer = setTimeout(() => {\n      this.dismissTimer = null;\n      this.beginClose();\n    }, AUTO_DISMISS_MS);\n  }\n\n  private beginClose() {\n    this.clearTimers();\n    if (this.floating) {\n      this.closing = true;\n      this.closeTimer = setTimeout(() => {\n        this.closing = false;\n        this.closeTimer = null;\n        this.dsDismiss.emit();\n      }, FADE_OUT_MS);\n    } else {\n      this.dsDismiss.emit();\n    }\n  }\n\n  private getContentColor(): string {\n    if (this.contrast === 'bold') return 'var(--color-foreground-on-bold-background-primary)';\n    const c = this.contrast === 'faint' ? 'bold' : this.contrast === 'medium' ? 'strong' : 'medium';\n    return `var(--color-foreground-${c}-${this.intent})`;\n  }\n\n  private getBg(): string {\n    return `var(--color-background-${this.contrast}-${this.intent})`;\n  }\n\n  private getElevation(): string {\n    return this.floating\n      ? 'var(--effect-elevation-elevated-floating, var(--effect-elevation-floating))'\n      : 'var(--effect-elevation-elevated)';\n  }\n\n  render() {\n    const contentColor = this.getContentColor();\n    const isAssertive = this.intent === 'negative';\n\n    const bannerEl = (\n      <div\n        class={{ 'banner-wrapper': true }}\n        style={{ '--banner-content': contentColor } as { [key: string]: string }}\n        role={isAssertive ? 'alert' : 'status'}\n        aria-live={isAssertive ? undefined : 'polite'}\n      >\n        <div\n          class=\"banner-surface\"\n          style={{\n            backgroundColor: this.getBg(),\n            boxShadow: this.getElevation(),\n          }}\n        >\n          {this.header && (\n            <div class=\"banner-header-surface\">\n              <div class=\"banner-header\" />\n            </div>\n          )}\n          <div class=\"banner-body\">\n            <span class=\"text-body-medium banner-message\">{this.message}</span>\n            {this.showDismiss && (\n              <button\n                type=\"button\"\n                class=\"banner-dismiss\"\n                onClick={() => this.beginClose()}\n                aria-label={this.dismissLabel}\n              >\n                &times;\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n\n    if (this.floating) {\n      return (\n        <Host style={{ display: 'contents' }}>\n          <div class=\"floating-position\" style={{ zIndex: '9998' }}>\n            <div class={{ 'floating-toast': true, 'floating-toast--closing': this.closing }}>\n              {bannerEl}\n            </div>\n          </div>\n        </Host>\n      );\n    }\n\n    return <Host style={{ display: 'contents' }}>{bannerEl}</Host>;\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAY,IAAM,41ECQxB,MAAMC,EAAc,IACpB,MAAMC,EAAkB,I,MAOXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,+EAMUC,KAAAC,OAAuB,UACvBD,KAAAE,SAA2B,SAC3BF,KAAAG,QAAkB,GAElBH,KAAAI,OAAkB,MAElBJ,KAAAK,SAAoB,MACpBL,KAAAM,YAAuB,MACvBN,KAAAO,aAAuB,UAEdP,KAAAQ,QAAmB,MAI5BR,KAAAS,aAAqD,KACrDT,KAAAU,WAAmD,IAmH5D,CAjHC,gBAAAC,GACE,GAAIX,KAAKK,UAAYL,KAAKG,QAASH,KAAKY,iB,CAI1C,eAAAC,CAAgBC,GACd,GAAId,KAAKK,UAAYS,EAAQ,CAC3Bd,KAAKQ,QAAU,MACfR,KAAKY,iB,EAIT,oBAAAG,GACEf,KAAKgB,a,CAGC,WAAAA,GACN,GAAIhB,KAAKS,aAAc,CAAEQ,aAAajB,KAAKS,cAAeT,KAAKS,aAAe,I,CAC9E,GAAIT,KAAKU,WAAc,CAAEO,aAAajB,KAAKU,YAAeV,KAAKU,WAAa,I,EAGtE,eAAAE,GACNZ,KAAKgB,cACLhB,KAAKS,aAAeS,YAAW,KAC7BlB,KAAKS,aAAe,KACpBT,KAAKmB,YAAY,GAChBzB,E,CAGG,UAAAyB,GACNnB,KAAKgB,cACL,GAAIhB,KAAKK,SAAU,CACjBL,KAAKQ,QAAU,KACfR,KAAKU,WAAaQ,YAAW,KAC3BlB,KAAKQ,QAAU,MACfR,KAAKU,WAAa,KAClBV,KAAKoB,UAAUC,MAAM,GACpB5B,E,KACE,CACLO,KAAKoB,UAAUC,M,EAIX,eAAAC,GACN,GAAItB,KAAKE,WAAa,OAAQ,MAAO,qDACrC,MAAMqB,EAAIvB,KAAKE,WAAa,QAAU,OAASF,KAAKE,WAAa,SAAW,SAAW,SACvF,MAAO,0BAA0BqB,KAAKvB,KAAKC,S,CAGrC,KAAAuB,GACN,MAAO,0BAA0BxB,KAAKE,YAAYF,KAAKC,S,CAGjD,YAAAwB,GACN,OAAOzB,KAAKK,SACR,8EACA,kC,CAGN,MAAAqB,GACE,MAAMC,EAAe3B,KAAKsB,kBAC1B,MAAMM,EAAc5B,KAAKC,SAAW,WAEpC,MAAM4B,EACJC,EAAA,OACEC,MAAO,CAAE,iBAAkB,MAC3BC,MAAO,CAAE,mBAAoBL,GAC7BM,KAAML,EAAc,QAAU,SAAQ,YAC3BA,EAAcM,UAAY,UAErCJ,EAAA,OACEC,MAAM,iBACNC,MAAO,CACLG,gBAAiBnC,KAAKwB,QACtBY,UAAWpC,KAAKyB,iBAGjBzB,KAAKI,QACJ0B,EAAA,OAAKC,MAAM,yBACTD,EAAA,OAAKC,MAAM,mBAGfD,EAAA,OAAKC,MAAM,eACTD,EAAA,QAAMC,MAAM,mCAAmC/B,KAAKG,SACnDH,KAAKM,aACJwB,EAAA,UACEO,KAAK,SACLN,MAAM,iBACNO,QAAS,IAAMtC,KAAKmB,aAAY,aACpBnB,KAAKO,cAAY,QAUzC,GAAIP,KAAKK,SAAU,CACjB,OACEyB,EAACS,EAAI,CAACP,MAAO,CAAEQ,QAAS,aACtBV,EAAA,OAAKC,MAAM,oBAAoBC,MAAO,CAAES,OAAQ,SAC9CX,EAAA,OAAKC,MAAO,CAAE,iBAAkB,KAAM,0BAA2B/B,KAAKQ,UACnEqB,I,CAOX,OAAOC,EAACS,EAAI,CAACP,MAAO,CAAEQ,QAAS,aAAeX,E","ignoreList":[]}

package/dist/components/ds-bar-nav-action.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsBarNavAction extends Components.DsBarNavAction, HTMLElement {}
+export const DsBarNavAction: {
+    prototype: DsBarNavAction;
+    new (): DsBarNavAction;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-bar-nav-action.js

@@ -0,0 +1,2 @@
+import{B as s,d as o}from"./p-ByTsF1H6.js";const t=s;const p=o;export{t as DsBarNavAction,p as defineCustomElement};
+//# sourceMappingURL=ds-bar-nav-action.js.map

package/dist/components/ds-bar-nav-action.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/dist/components/ds-bar-nav.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsBarNav extends Components.DsBarNav, HTMLElement {}
+export const DsBarNav: {
+    prototype: DsBarNav;
+    new (): DsBarNav;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-bar-nav.js

@@ -0,0 +1,2 @@
+import{p as a,H as s,c as e,h as r,a as n,t}from"./index.js";import{d as o}from"./p-ByTsF1H6.js";import{d as i}from"./p-CkBXHj0e.js";import{d as c}from"./p-B7OGjJYj.js";const d=()=>`.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{display:flex;align-items:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100);box-sizing:border-box;border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.bg-primary.sc-ds-bar-nav{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-bar-nav{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-bar-nav{background-color:transparent}.bg-translucent.sc-ds-bar-nav{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.bar-nav__left.sc-ds-bar-nav{flex:1;min-width:0;display:flex;align-items:center}.bar-nav__left.sc-ds-bar-nav ds-tab-group.sc-ds-bar-nav{flex:1;min-width:0}.bar-nav__heading.sc-ds-bar-nav{color:var(--color-foreground-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-nav__actions.sc-ds-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-050);flex-shrink:0}`;const b=a(class a extends s{constructor(a){super();if(a!==false){this.__registerHost()}this.dsTabChange=e(this,"dsTabChange");this.dsActionChange=e(this,"dsActionChange");this.tabs=[];this.value="";this.actions=[];this.background="secondary"}handleTabChange(a){const s=a.detail;this.value=s;this.dsTabChange.emit(s)}handleActionChange(a,s){const e=s.detail;this.dsActionChange.emit({id:a,selected:e})}render(){const a=this.tabs.length>0;const s={};const e=s[this.background];return r(n,{key:"61eb9ee05c1f6943f110d7e4777da3ca73239830"},r("header",{key:"a8910fc6c153d628f26e4de40aead2952e8f4706",class:{"bar-nav":true,[`bg-${this.background}`]:true}},r("div",{key:"7d7dfffaef40818965ed6fdf9a78aa3674928f95",class:"bar-nav__left"},a?r("ds-tab-group",{tabs:this.tabs,value:this.value,onDsChange:a=>this.handleTabChange(a)}):this.heading&&r("span",{class:"bar-nav__heading text-title-small"},this.heading)),this.actions.length>0&&r("div",{key:"4aa180be79f312a1d4dabdcc41220fcc1888fc98",class:"bar-nav__actions"},this.actions.map((a=>r("ds-bar-nav-action",{key:a.id,icon:a.icon,selected:a.selected??false,dot:a.dot??false,inactive:a.inactive,"aria-label":a.ariaLabel??a.id,background:e,onDsChange:s=>this.handleActionChange(a.id,s)}))))))}static get style(){return d()}},[2,"ds-bar-nav",{tabs:[16],value:[1025],actions:[16],heading:[1],background:[1]}]);function l(){if(typeof customElements==="undefined"){return}const a=["ds-bar-nav","ds-bar-nav-action","ds-icon","ds-tab-group"];a.forEach((a=>{switch(a){case"ds-bar-nav":if(!customElements.get(t(a))){customElements.define(t(a),b)}break;case"ds-bar-nav-action":if(!customElements.get(t(a))){o()}break;case"ds-icon":if(!customElements.get(t(a))){i()}break;case"ds-tab-group":if(!customElements.get(t(a))){c()}break}}))}l();const f=b;const h=l;export{f as DsBarNav,h as defineCustomElement};
+//# sourceMappingURL=ds-bar-nav.js.map

package/dist/components/ds-bar-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["barNavCss","BarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","tabs","value","actions","background","handleTabChange","e","id","detail","dsTabChange","emit","handleActionChange","actionId","selected","dsActionChange","render","hasTabs","length","bgToActionBg","actionBg","h","Host","key","class","onDsChange","heading","map","action","icon","dot","inactive","ariaLabel"],"sources":["src/wc/components/BarNav/BarNav.css?tag=ds-bar-nav&encapsulation=scoped","src/wc/components/BarNav/BarNav.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.bar-nav {\n  display: flex;\n  align-items: center;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  gap: var(--dimension-space-100);\n  box-sizing: border-box;\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n}\n\n/* Background variants — mirrors ds-header pattern */\n.bg-primary     { background-color: var(--color-background-primary); }\n.bg-secondary   { background-color: var(--color-background-secondary); }\n.bg-transparent { background-color: transparent; }\n.bg-translucent {\n  background-color: var(--color-background-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n}\n\n/* Left zone — tabs fill available space */\n.bar-nav__left {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n}\n\n.bar-nav__left ds-tab-group {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Fallback heading when no tabs */\n.bar-nav__heading {\n  color: var(--color-foreground-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Right zone — action buttons, hugging right */\n.bar-nav__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  flex-shrink: 0;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport type { BarNavActionBackground } from '../BarNavAction/BarNavAction';\nimport type { TabItem } from '../TabGroup/TabGroup';\n\nexport type BarNavBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';\n\nexport interface BarNavTab {\n  id: string;\n  label: string;\n  disabled?: boolean;\n  /** Notification dot on this tab. */\n  dot?: boolean;\n}\n\nexport interface BarNavActionItem {\n  id: string;\n  /** Icon name for <ds-icon>. */\n  icon: string;\n  /** Whether this action button is currently pressed/active. */\n  selected?: boolean;\n  /** Show a notification dot. */\n  dot?: boolean;\n  inactive?: boolean;\n  ariaLabel?: string;\n}\n\n@Component({\n  tag: 'ds-bar-nav',\n  styleUrl: 'BarNav.css',\n  scoped: true,\n})\nexport class BarNav {\n  /**\n   * Tab items for the left section.\n   * Set via JS property: `el.tabs = [...]`\n   */\n  @Prop() tabs: BarNavTab[] = [];\n\n  /** ID of the currently active tab. */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Action items rendered in the right section.\n   * Set via JS property: `el.actions = [...]`\n   */\n  @Prop() actions: BarNavActionItem[] = [];\n\n  /**\n   * Fallback heading shown when no tabs are provided.\n   * When tabs are present the heading is hidden.\n   */\n  @Prop() heading: string | undefined;\n\n  /** Surface background variant. */\n  @Prop() background: BarNavBackground = 'secondary';\n\n  /** Emitted when the active tab changes. Detail = tab id. */\n  @Event() dsTabChange!: EventEmitter<string>;\n\n  /** Emitted when an action button is toggled. Detail = { id, selected }. */\n  @Event() dsActionChange!: EventEmitter<{ id: string; selected: boolean }>;\n\n  private handleTabChange(e: Event) {\n    const id = (e as CustomEvent<string>).detail;\n    this.value = id;\n    this.dsTabChange.emit(id);\n  }\n\n  private handleActionChange(actionId: string, e: Event) {\n    const selected = (e as CustomEvent<boolean>).detail;\n    this.dsActionChange.emit({ id: actionId, selected });\n  }\n\n  render() {\n    const hasTabs = this.tabs.length > 0;\n\n    // Map BarNavBackground → BarNavActionBackground for context pass-through.\n    // primary/secondary/transparent/translucent are all light — no override needed.\n    const bgToActionBg: Partial<Record<BarNavBackground, BarNavActionBackground>> = {};\n    const actionBg: BarNavActionBackground | undefined = bgToActionBg[this.background];\n\n    return (\n      <Host>\n        <header class={{ 'bar-nav': true, [`bg-${this.background}`]: true }}>\n\n          <div class=\"bar-nav__left\">\n            {hasTabs\n              ? (\n                <ds-tab-group\n                  tabs={this.tabs as TabItem[]}\n                  value={this.value}\n                  onDsChange={(e: Event) => this.handleTabChange(e)}\n                />\n              )\n              : this.heading && (\n                <span class=\"bar-nav__heading text-title-small\">{this.heading}</span>\n              )\n            }\n          </div>\n\n          {this.actions.length > 0 && (\n            <div class=\"bar-nav__actions\">\n              {this.actions.map(action => (\n                <ds-bar-nav-action\n                  key={action.id}\n                  icon={action.icon}\n                  selected={action.selected ?? false}\n                  dot={action.dot ?? false}\n                  inactive={action.inactive}\n                  aria-label={action.ariaLabel ?? action.id}\n                  background={actionBg}\n                  onDsChange={(e: Event) => this.handleActionChange(action.id, e)}\n                />\n              ))}\n            </div>\n          )}\n\n        </header>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yKAAA,MAAMA,EAAY,IAAM,qjC,MC+BXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,gIAUUC,KAAAC,KAAoB,GAGHD,KAAAE,MAAgB,GAMjCF,KAAAG,QAA8B,GAS9BH,KAAAI,WAA+B,WAmExC,CA3DS,eAAAC,CAAgBC,GACtB,MAAMC,EAAMD,EAA0BE,OACtCR,KAAKE,MAAQK,EACbP,KAAKS,YAAYC,KAAKH,E,CAGhB,kBAAAI,CAAmBC,EAAkBN,GAC3C,MAAMO,EAAYP,EAA2BE,OAC7CR,KAAKc,eAAeJ,KAAK,CAAEH,GAAIK,EAAUC,Y,CAG3C,MAAAE,GACE,MAAMC,EAAUhB,KAAKC,KAAKgB,OAAS,EAInC,MAAMC,EAA0E,GAChF,MAAMC,EAA+CD,EAAalB,KAAKI,YAEvE,OACEgB,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CAAQC,MAAO,CAAE,UAAW,KAAM,CAAC,MAAMvB,KAAKI,cAAe,OAE3DgB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,iBACRP,EAEGI,EAAA,gBACEnB,KAAMD,KAAKC,KACXC,MAAOF,KAAKE,MACZsB,WAAalB,GAAaN,KAAKK,gBAAgBC,KAGjDN,KAAKyB,SACLL,EAAA,QAAMG,MAAM,qCAAqCvB,KAAKyB,UAK3DzB,KAAKG,QAAQc,OAAS,GACrBG,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACRvB,KAAKG,QAAQuB,KAAIC,GAChBP,EAAA,qBACEE,IAAKK,EAAOpB,GACZqB,KAAMD,EAAOC,KACbf,SAAUc,EAAOd,UAAY,MAC7BgB,IAAKF,EAAOE,KAAO,MACnBC,SAAUH,EAAOG,SAAQ,aACbH,EAAOI,WAAaJ,EAAOpB,GACvCH,WAAYe,EACZK,WAAalB,GAAaN,KAAKW,mBAAmBgB,EAAOpB,GAAID,S","ignoreList":[]}

package/dist/components/ds-breadcrumb.js

@@ -1,2 +1,2 @@
-import{p as e,H as r,c as s,h as a,a as i,t as c}from"./index.js";const n=()=>`.breadcrumb.sc-ds-breadcrumb{display:flex;align-items:center}.list.sc-ds-breadcrumb{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:var(--dimension-space-050)}.item.sc-ds-breadcrumb{display:flex;align-items:center;gap:var(--dimension-space-050)}.item-inner.sc-ds-breadcrumb{display:flex;align-items:center;gap:var(--dimension-space-050)}.link.sc-ds-breadcrumb{color:var(--color-foreground-secondary);text-decoration:none;padding:var(--dimension-space-025) var(--dimension-space-050);border-radius:var(--dimension-radius-050);transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2)}.link.sc-ds-breadcrumb:hover{background-color:var(--color-interaction-hover);color:var(--color-foreground-primary)}.link.sc-ds-breadcrumb:active{background-color:var(--color-interaction-pressed)}.link.sc-ds-breadcrumb:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.separator.sc-ds-breadcrumb{color:var(--color-foreground-tertiary);-webkit-user-select:none;user-select:none}.current.sc-ds-breadcrumb{color:var(--color-foreground-primary);padding:var(--dimension-space-025) var(--dimension-space-050)}`;const o=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavigate=s(this,"dsNavigate");this.items=[];this.separator="/"}handleClick(e,r,s){if(!e.href){s.preventDefault()}this.dsNavigate.emit({item:e,index:r})}render(){return a(i,{key:"18a93bad46568264a308c3aa3067dca124a42aac"},a("nav",{key:"a19a1a8233e23ea548544f09658cbc49211b9a75","aria-label":"Breadcrumb",class:"breadcrumb"},a("ol",{key:"1edb429d1686e8285bf707da5f0b46f410283d79",class:"list"},this.items.map(((e,r)=>{const s=r===this.items.length-1;return a("li",{class:"item",key:r},s?a("span",{class:"text-body-medium-emphasis current","aria-current":"page"},e.label):a("span",{class:"item-inner"},a("a",{href:e.href??"#",class:"link text-body-medium",onClick:s=>this.handleClick(e,r,s)},e.label),a("span",{class:"separator text-body-small","aria-hidden":"true"},this.separator)))})))))}static get style(){return n()}},[2,"ds-breadcrumb",{items:[16],separator:[1]}]);function t(){if(typeof customElements==="undefined"){return}const e=["ds-breadcrumb"];e.forEach((e=>{switch(e){case"ds-breadcrumb":if(!customElements.get(c(e))){customElements.define(c(e),o)}break}}))}t();const d=o;const l=t;export{d as DsBreadcrumb,l as defineCustomElement};
+import{p as e,H as r,c as s,h as a,a as i,t as c}from"./index.js";const n=()=>`.breadcrumb.sc-ds-breadcrumb{display:flex;align-items:center}.list.sc-ds-breadcrumb{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:var(--dimension-space-050)}.item.sc-ds-breadcrumb{display:flex;align-items:center;gap:var(--dimension-space-050)}.item-inner.sc-ds-breadcrumb{display:flex;align-items:center;gap:var(--dimension-space-050)}.link.sc-ds-breadcrumb{color:var(--color-foreground-secondary);text-decoration:none;padding:var(--dimension-space-025) var(--dimension-space-050);border-radius:var(--dimension-radius-050);transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2)}.link.sc-ds-breadcrumb:hover{background-color:var(--color-interaction-hover);color:var(--color-foreground-primary)}.link.sc-ds-breadcrumb:active{background-color:var(--color-interaction-pressed)}.link.sc-ds-breadcrumb:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.separator.sc-ds-breadcrumb{color:var(--color-foreground-tertiary);-webkit-user-select:none;user-select:none}.current.sc-ds-breadcrumb{color:var(--color-foreground-primary);padding:var(--dimension-space-025) var(--dimension-space-050)}`;const o=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavigate=s(this,"dsNavigate");this.items=[];this.separator="/"}handleClick(e,r,s){if(!e.href){s.preventDefault()}this.dsNavigate.emit({item:e,index:r})}render(){return a(i,{key:"f824901c0dfa5b0f03b74f61e8a2c0d5729c07af"},a("nav",{key:"bbbaae0df39f3f04c7056ac84dcd855291cacd8a","aria-label":"Breadcrumb",class:"breadcrumb"},a("ol",{key:"5b8f02ff90e170795ff240d7769e89f910b249ea",class:"list"},this.items.map(((e,r)=>{const s=r===this.items.length-1;return a("li",{class:"item",key:r},s?a("span",{class:"text-body-medium-emphasis current","aria-current":"page"},e.label):a("span",{class:"item-inner"},a("a",{href:e.href??"#",class:"link text-body-medium",onClick:s=>this.handleClick(e,r,s)},e.label),a("span",{class:"separator text-body-small","aria-hidden":"true"},this.separator)))})))))}static get style(){return n()}},[2,"ds-breadcrumb",{items:[16],separator:[1]}]);function t(){if(typeof customElements==="undefined"){return}const e=["ds-breadcrumb"];e.forEach((e=>{switch(e){case"ds-breadcrumb":if(!customElements.get(c(e))){customElements.define(c(e),o)}break}}))}t();const d=o;const l=t;export{d as DsBreadcrumb,l as defineCustomElement};
 //# sourceMappingURL=ds-breadcrumb.js.map

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

@@ -1,2 +1,2 @@
-import{p as t,H as o,c as r,h as s,a as i,t as d}from"./index.js";import{d as e}from"./p-DdN6WnFs.js";import{d as n}from"./p-CGuwZUFk.js";import{d as a}from"./p-BcuUR5Ao.js";const u=()=>`.group.sc-ds-button-group{display:inline-flex;align-items:stretch;border-radius:var(--dimension-radius-050);position:relative}.group.sc-ds-button-group::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none}.groupElevated.sc-ds-button-group{box-shadow:var(--effect-shadow-elevated-sm)}.groupElevated.sc-ds-button-group::after{box-shadow:var(--effect-highlight-elevated-sm)}.groupFlat.sc-ds-button-group::after{box-shadow:inset 0 0 0 1px var(--color-border-tertiary)}.groupFloating.sc-ds-button-group{box-shadow:var(--effect-shadow-elevated-floating)}.groupFloating.sc-ds-button-group::after{box-shadow:var(--effect-highlight-elevated-floating)}.groupRounded.sc-ds-button-group{border-radius:var(--dimension-radius-half)}.item.sc-ds-button-group{flex-shrink:0;box-shadow:none !important;border:none !important}.item.sc-ds-button-group:active{transform:none !important}.divider.sc-ds-button-group{width:1px;flex-shrink:0;background-color:var(--color-border-tertiary);position:relative;z-index:1;margin:0 -0.5px;pointer-events:none}.dividerGhost.sc-ds-button-group{height:20px;align-self:center}.dividerGhostXS.sc-ds-button-group{height:12px}.dividerGhostSM.sc-ds-button-group{height:16px}.dividerGhostLG.sc-ds-button-group{height:24px}.item.sc-ds-button-group:hover+.dividerGhost.sc-ds-button-group,.dividerGhost.sc-ds-button-group:has(+.item:hover){opacity:0}.group.sc-ds-button-group .itemShort.sc-ds-button-group::after{border-top-left-radius:var(--dimension-radius-050) !important;border-top-right-radius:var(--dimension-radius-050) !important;border-bottom-right-radius:var(--dimension-radius-050) !important;border-bottom-left-radius:var(--dimension-radius-050) !important}.first.sc-ds-button-group{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}.last.sc-ds-button-group{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.middle.sc-ds-button-group{border-radius:0 !important}.groupRounded.sc-ds-button-group .first.itemShort.sc-ds-button-group::after{border-top-left-radius:var(--dimension-radius-half) !important;border-bottom-left-radius:var(--dimension-radius-half) !important}.groupRounded.sc-ds-button-group .last.itemShort.sc-ds-button-group::after{border-top-right-radius:var(--dimension-radius-half) !important;border-bottom-right-radius:var(--dimension-radius-half) !important}.roundedFirstMD.sc-ds-button-group{padding-right:var(--dimension-space-100) !important}.roundedLastMD.sc-ds-button-group{padding-left:var(--dimension-space-100) !important}.roundedMidMD.sc-ds-button-group{padding-left:var(--dimension-space-100) !important;padding-right:var(--dimension-space-100) !important}.roundedFirstSM.sc-ds-button-group{padding-right:var(--dimension-space-075) !important}.roundedLastSM.sc-ds-button-group{padding-left:var(--dimension-space-075) !important}.roundedMidSM.sc-ds-button-group{padding-left:var(--dimension-space-075) !important;padding-right:var(--dimension-space-075) !important}.roundedFirstLG.sc-ds-button-group{padding-right:var(--dimension-space-150) !important}.roundedLastLG.sc-ds-button-group{padding-left:var(--dimension-space-150) !important}.roundedMidLG.sc-ds-button-group{padding-left:var(--dimension-space-150) !important;padding-right:var(--dimension-space-150) !important}`;const p=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=r(this,"dsClick");this.items=[];this.elevation="flat";this.size="md";this.rounded=false}render(){const t=this.items;const o=t.length;const r=this.elevation;const d=r.charAt(0).toUpperCase()+r.slice(1);const e=r==="none";const n={group:true,[`group${d}`]:true,groupRounded:this.rounded};return s(i,{key:"c6b74f44497bd0dcb51fbe14a89ecd641988ff74"},s("div",{key:"be1be0faa562c6aa404c222d4562d29e24e10e21",class:n,role:"group"},t.map(((t,i)=>{const d=i===0;const n=i===o-1;const a=!d&&!n;const u=t.variant??"secondary";const p=!!t.icon&&!t.label;const c=this.rounded&&!p&&this.size!=="xs";const g=this.size.toUpperCase();const m={item:true,first:d,last:n,middle:a,itemShort:e&&u==="secondary",[`roundedFirst${g}`]:!!(c&&d),[`roundedLast${g}`]:!!(c&&n),[`roundedMid${g}`]:!!(c&&a)};const b={divider:true,dividerGhost:e,dividerGhostXS:e&&this.size==="xs",dividerGhostSM:e&&this.size==="sm",dividerGhostLG:e&&this.size==="lg"};return[i>0&&s("div",{class:b,"aria-hidden":"true"}),s("ds-button",{class:m,variant:u,intent:t.intent??"none",elevation:r,size:this.size,label:t.label,rounded:this.rounded,inactive:t.inactive,href:t.href,onDsClick:()=>this.dsClick.emit(i)},t.icon&&s("ds-icon",{slot:"icon",name:t.icon}))]}))))}static get style(){return u()}},[2,"ds-button-group",{items:[16],elevation:[1],size:[1],rounded:[4]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-button-group","ds-button","ds-icon","ds-loader"];t.forEach((t=>{switch(t){case"ds-button-group":if(!customElements.get(d(t))){customElements.define(d(t),p)}break;case"ds-button":if(!customElements.get(d(t))){e()}break;case"ds-icon":if(!customElements.get(d(t))){n()}break;case"ds-loader":if(!customElements.get(d(t))){a()}break}}))}c();const g=p;const m=c;export{g as DsButtonGroup,m as defineCustomElement};
+import{p as t,H as o,c as r,h as s,a as i,t as e}from"./index.js";import{d}from"./p-B51N5kiy.js";import{d as n}from"./p-CkBXHj0e.js";import{d as a}from"./p-BcuUR5Ao.js";const u=()=>`.group.sc-ds-button-group{display:inline-flex;align-items:stretch;border-radius:var(--dimension-radius-050);position:relative}.group.sc-ds-button-group::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none}.groupElevated.sc-ds-button-group{box-shadow:var(--effect-shadow-elevated-sm)}.groupElevated.sc-ds-button-group::after{box-shadow:var(--effect-highlight-elevated-sm)}.groupFlat.sc-ds-button-group::after{box-shadow:inset 0 0 0 1px var(--color-border-tertiary)}.groupFloating.sc-ds-button-group{box-shadow:var(--effect-shadow-elevated-floating)}.groupFloating.sc-ds-button-group::after{box-shadow:var(--effect-highlight-elevated-floating)}.groupRounded.sc-ds-button-group{border-radius:var(--dimension-radius-half)}.item.sc-ds-button-group{flex-shrink:0;box-shadow:none !important;border:none !important}.item.sc-ds-button-group:active{transform:none !important}.divider.sc-ds-button-group{width:1px;flex-shrink:0;background-color:var(--color-border-tertiary);position:relative;z-index:1;margin:0 -0.5px;pointer-events:none}.dividerGhost.sc-ds-button-group{height:20px;align-self:center}.dividerGhostXS.sc-ds-button-group{height:12px}.dividerGhostSM.sc-ds-button-group{height:16px}.dividerGhostLG.sc-ds-button-group{height:24px}.item.sc-ds-button-group:hover+.dividerGhost.sc-ds-button-group,.dividerGhost.sc-ds-button-group:has(+.item:hover){opacity:0}.group.sc-ds-button-group .itemShort.sc-ds-button-group::after{border-top-left-radius:var(--dimension-radius-050) !important;border-top-right-radius:var(--dimension-radius-050) !important;border-bottom-right-radius:var(--dimension-radius-050) !important;border-bottom-left-radius:var(--dimension-radius-050) !important}.first.sc-ds-button-group{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}.last.sc-ds-button-group{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.middle.sc-ds-button-group{border-radius:0 !important}.groupRounded.sc-ds-button-group .first.itemShort.sc-ds-button-group::after{border-top-left-radius:var(--dimension-radius-half) !important;border-bottom-left-radius:var(--dimension-radius-half) !important}.groupRounded.sc-ds-button-group .last.itemShort.sc-ds-button-group::after{border-top-right-radius:var(--dimension-radius-half) !important;border-bottom-right-radius:var(--dimension-radius-half) !important}.roundedFirstMD.sc-ds-button-group{padding-right:var(--dimension-space-100) !important}.roundedLastMD.sc-ds-button-group{padding-left:var(--dimension-space-100) !important}.roundedMidMD.sc-ds-button-group{padding-left:var(--dimension-space-100) !important;padding-right:var(--dimension-space-100) !important}.roundedFirstSM.sc-ds-button-group{padding-right:var(--dimension-space-075) !important}.roundedLastSM.sc-ds-button-group{padding-left:var(--dimension-space-075) !important}.roundedMidSM.sc-ds-button-group{padding-left:var(--dimension-space-075) !important;padding-right:var(--dimension-space-075) !important}.roundedFirstLG.sc-ds-button-group{padding-right:var(--dimension-space-150) !important}.roundedLastLG.sc-ds-button-group{padding-left:var(--dimension-space-150) !important}.roundedMidLG.sc-ds-button-group{padding-left:var(--dimension-space-150) !important;padding-right:var(--dimension-space-150) !important}`;const p=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=r(this,"dsClick");this.items=[];this.elevation="flat";this.size="md";this.rounded=false}render(){const t=this.items;const o=t.length;const r=this.elevation;const e=r.charAt(0).toUpperCase()+r.slice(1);const d=r==="none";const n={group:true,[`group${e}`]:true,groupRounded:this.rounded};return s(i,{key:"3cf0f6c5f8aa34f662ba01042600c1d34325d3da"},s("div",{key:"2240504a7ae8f2ee663b54c0b906eeb23c9a2886",class:n,role:"group"},t.map(((t,i)=>{const e=i===0;const n=i===o-1;const a=!e&&!n;const u=t.variant??"secondary";const p=!!t.icon&&!t.label;const c=this.rounded&&!p&&this.size!=="xs";const g=this.size.toUpperCase();const m={item:true,first:e,last:n,middle:a,itemShort:d&&u==="secondary",[`roundedFirst${g}`]:!!(c&&e),[`roundedLast${g}`]:!!(c&&n),[`roundedMid${g}`]:!!(c&&a)};const b={divider:true,dividerGhost:d,dividerGhostXS:d&&this.size==="xs",dividerGhostSM:d&&this.size==="sm",dividerGhostLG:d&&this.size==="lg"};return[i>0&&s("div",{class:b,"aria-hidden":"true"}),s("ds-button",{class:m,variant:u,intent:t.intent??"none",elevation:r,size:this.size,label:t.label,rounded:this.rounded,inactive:t.inactive,href:t.href,onDsClick:()=>this.dsClick.emit(i)},t.icon&&s("ds-icon",{slot:"icon",name:t.icon}))]}))))}static get style(){return u()}},[2,"ds-button-group",{items:[16],elevation:[1],size:[1],rounded:[4]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-button-group","ds-button","ds-icon","ds-loader"];t.forEach((t=>{switch(t){case"ds-button-group":if(!customElements.get(e(t))){customElements.define(e(t),p)}break;case"ds-button":if(!customElements.get(e(t))){d()}break;case"ds-icon":if(!customElements.get(e(t))){n()}break;case"ds-loader":if(!customElements.get(e(t))){a()}break}}))}c();const g=p;const m=c;export{g as DsButtonGroup,m as defineCustomElement};
 //# sourceMappingURL=ds-button-group.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["buttonGroupCss","ButtonGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","elevation","size","rounded","render","count","length","elev","elevKey","charAt","toUpperCase","slice","isGhost","groupCls","group","groupRounded","h","Host","key","class","role","map","item","i","isFirst","isLast","isMid","variant","isIconOnly","icon","label","needsRoundedCorrection","sizeKey","itemCls","first","last","middle","itemShort","dividerCls","divider","dividerGhost","dividerGhostXS","dividerGhostSM","dividerGhostLG","intent","inactive","href","onDsClick","dsClick","emit","slot","name"],"sources":["src/wc/components/ButtonGroup/ButtonGroup.css?tag=ds-button-group&encapsulation=scoped","src/wc/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["/* ==========================================================================\n   ButtonGroup — flush row of ds-button components.\n   The group container carries the elevation; individual button chrome\n   (shadow/border) is suppressed via .item.\n   ========================================================================== */\n\n.group {\n  display: inline-flex;\n  align-items: stretch;\n  border-radius: var(--dimension-radius-050);\n  position: relative;\n}\n\n/* Inset ring / highlight overlay — sits above button children */\n.group::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n/* ── Group-level elevation ──────────────────────────────────────────────── */\n\n.groupElevated { box-shadow: var(--effect-shadow-elevated-sm); }\n.groupElevated::after { box-shadow: var(--effect-highlight-elevated-sm); }\n\n.groupFlat::after { box-shadow: inset 0 0 0 1px var(--color-border-tertiary); }\n\n.groupFloating { box-shadow: var(--effect-shadow-elevated-floating); }\n.groupFloating::after { box-shadow: var(--effect-highlight-elevated-floating); }\n\n/* groupNone = ghost / primary — no shadow, no border */\n\n.groupRounded { border-radius: var(--dimension-radius-half); }\n\n/* ── Base item ─────────────────────────────────────────────────────────────── */\n\n.item {\n  flex-shrink: 0;\n  /* Suppress individual elevation so the group reads as one unit */\n  box-shadow: none !important;\n  border: none !important;\n}\n\n.item:active {\n  transform: none !important;\n}\n\n/* ── Divider ──────────────────────────────────────────────────────────────── */\n\n.divider {\n  width: 1px;\n  flex-shrink: 0;\n  background-color: var(--color-border-tertiary);\n  position: relative;\n  z-index: 1;\n  margin: 0 -0.5px;\n  pointer-events: none;\n}\n\n/* Ghost: short centred divider at icon height */\n.dividerGhost    { height: 20px; align-self: center; }\n.dividerGhostXS  { height: 12px; }\n.dividerGhostSM  { height: 16px; }\n.dividerGhostLG  { height: 24px; }\n\n/* Ghost hover-fade */\n.item:hover + .dividerGhost,\n.dividerGhost:has(+ .item:hover) { opacity: 0; }\n\n/* ── Ghost interaction states: rounded chips ──────────────────────────────── */\n\n.group .itemShort::after {\n  border-top-left-radius:     var(--dimension-radius-050) !important;\n  border-top-right-radius:    var(--dimension-radius-050) !important;\n  border-bottom-right-radius: var(--dimension-radius-050) !important;\n  border-bottom-left-radius:  var(--dimension-radius-050) !important;\n}\n\n/* ── Border radius: flatten inner-facing corners ──────────────────────────── */\n\n.first {\n  border-top-right-radius:    0 !important;\n  border-bottom-right-radius: 0 !important;\n}\n\n.last {\n  border-top-left-radius:    0 !important;\n  border-bottom-left-radius: 0 !important;\n}\n\n.middle {\n  border-radius: 0 !important;\n}\n\n/* Rounded group: first — left corners become pill */\n.groupRounded .first.itemShort::after {\n  border-top-left-radius:    var(--dimension-radius-half) !important;\n  border-bottom-left-radius: var(--dimension-radius-half) !important;\n}\n\n/* Rounded group: last — right corners become pill */\n.groupRounded .last.itemShort::after {\n  border-top-right-radius:    var(--dimension-radius-half) !important;\n  border-bottom-right-radius: var(--dimension-radius-half) !important;\n}\n\n/* ── Rounded: inner-edge padding correction ──────────────────────────────── */\n\n/* MD — base padding: space-100 */\n.roundedFirstMD { padding-right: var(--dimension-space-100) !important; }\n.roundedLastMD  { padding-left:  var(--dimension-space-100) !important; }\n.roundedMidMD   { padding-left:  var(--dimension-space-100) !important; padding-right: var(--dimension-space-100) !important; }\n\n/* SM — base padding: space-075 */\n.roundedFirstSM { padding-right: var(--dimension-space-075) !important; }\n.roundedLastSM  { padding-left:  var(--dimension-space-075) !important; }\n.roundedMidSM   { padding-left:  var(--dimension-space-075) !important; padding-right: var(--dimension-space-075) !important; }\n\n/* LG — base padding: space-150 */\n.roundedFirstLG { padding-right: var(--dimension-space-150) !important; }\n.roundedLastLG  { padding-left:  var(--dimension-space-150) !important; }\n.roundedMidLG   { padding-left:  var(--dimension-space-150) !important; padding-right: var(--dimension-space-150) !important; }\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type ButtonGroupElevation = 'none' | 'flat' | 'elevated' | 'floating';\nexport type ButtonGroupSize      = 'xs' | 'sm' | 'md' | 'lg';\n\nexport interface ButtonGroupItem {\n  label?: string;\n  /** Icon name for <ds-icon>. Set via JS property. */\n  icon?: string;\n  variant?: 'primary' | 'secondary';\n  intent?: 'none' | 'neutral' | 'brand' | 'negative' | 'warning' | 'positive';\n  inactive?: boolean;\n  href?: string;\n}\n\n@Component({\n  tag: 'ds-button-group',\n  styleUrl: 'ButtonGroup.css',\n  scoped: true,\n})\nexport class ButtonGroup {\n  /**\n   * Array of button descriptors. Set via JS property.\n   * @example el.items = [{ label: 'Filter', icon: 'Filter' }, { label: 'Sort' }];\n   */\n  @Prop() items: ButtonGroupItem[] = [];\n\n  /** Chrome level for the group container. */\n  @Prop() elevation: ButtonGroupElevation = 'flat';\n\n  /** Size passed to each ds-button. */\n  @Prop() size: ButtonGroupSize = 'md';\n\n  /** Pill shape for group + buttons. */\n  @Prop() rounded: boolean = false;\n\n  /** Emits the index of the clicked item. */\n  @Event() dsClick!: EventEmitter<number>;\n\n  render() {\n    const items = this.items;\n    const count = items.length;\n    const elev = this.elevation;\n    const elevKey = elev.charAt(0).toUpperCase() + elev.slice(1);\n    const isGhost = elev === 'none';\n\n    const groupCls: Record<string, boolean> = {\n      group: true,\n      [`group${elevKey}`]: true,\n      groupRounded: this.rounded,\n    };\n\n    return (\n      <Host>\n        <div class={groupCls} role=\"group\">\n          {items.map((item, i) => {\n            const isFirst = i === 0;\n            const isLast = i === count - 1;\n            const isMid = !isFirst && !isLast;\n            const variant = item.variant ?? 'secondary';\n            const isIconOnly = !!item.icon && !item.label;\n            const needsRoundedCorrection = this.rounded && !isIconOnly && this.size !== 'xs';\n            const sizeKey = this.size.toUpperCase() as 'MD' | 'SM' | 'LG' | 'XS';\n\n            const itemCls: Record<string, boolean> = {\n              item: true,\n              first: isFirst,\n              last: isLast,\n              middle: isMid,\n              itemShort: isGhost && variant === 'secondary',\n              [`roundedFirst${sizeKey}`]: !!(needsRoundedCorrection && isFirst),\n              [`roundedLast${sizeKey}`]: !!(needsRoundedCorrection && isLast),\n              [`roundedMid${sizeKey}`]: !!(needsRoundedCorrection && isMid),\n            };\n\n            const dividerCls: Record<string, boolean> = {\n              divider: true,\n              dividerGhost: isGhost,\n              dividerGhostXS: isGhost && this.size === 'xs',\n              dividerGhostSM: isGhost && this.size === 'sm',\n              dividerGhostLG: isGhost && this.size === 'lg',\n            };\n\n            return [\n              i > 0 && (\n                <div class={dividerCls} aria-hidden=\"true\" />\n              ),\n              <ds-button\n                class={itemCls}\n                variant={variant}\n                intent={item.intent ?? 'none'}\n                elevation={elev}\n                size={this.size}\n                label={item.label}\n                rounded={this.rounded}\n                inactive={item.inactive}\n                href={item.href}\n                onDsClick={() => this.dsClick.emit(i)}\n              >\n                {item.icon && (\n                  <ds-icon slot=\"icon\" name={item.icon} />\n                )}\n              </ds-button>,\n            ];\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8KAAA,MAAMA,EAAiB,IAAM,uuG,MCoBhBC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,2EAUUC,KAAAC,MAA2B,GAG3BD,KAAAE,UAAkC,OAGlCF,KAAAG,KAAwB,KAGxBH,KAAAI,QAAmB,KA2E5B,CAtEC,MAAAC,GACE,MAAMJ,EAAQD,KAAKC,MACnB,MAAMK,EAAQL,EAAMM,OACpB,MAAMC,EAAOR,KAAKE,UAClB,MAAMO,EAAUD,EAAKE,OAAO,GAAGC,cAAgBH,EAAKI,MAAM,GAC1D,MAAMC,EAAUL,IAAS,OAEzB,MAAMM,EAAoC,CACxCC,MAAO,KACP,CAAC,QAAQN,KAAY,KACrBO,aAAchB,KAAKI,SAGrB,OACEa,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAON,EAAUO,KAAK,SACxBpB,EAAMqB,KAAI,CAACC,EAAMC,KAChB,MAAMC,EAAUD,IAAM,EACtB,MAAME,EAASF,IAAMlB,EAAQ,EAC7B,MAAMqB,GAASF,IAAYC,EAC3B,MAAME,EAAUL,EAAKK,SAAW,YAChC,MAAMC,IAAeN,EAAKO,OAASP,EAAKQ,MACxC,MAAMC,EAAyBhC,KAAKI,UAAYyB,GAAc7B,KAAKG,OAAS,KAC5E,MAAM8B,EAAUjC,KAAKG,KAAKQ,cAE1B,MAAMuB,EAAmC,CACvCX,KAAM,KACNY,MAAOV,EACPW,KAAMV,EACNW,OAAQV,EACRW,UAAWzB,GAAWe,IAAY,YAClC,CAAC,eAAeK,QAAeD,GAA0BP,GACzD,CAAC,cAAcQ,QAAeD,GAA0BN,GACxD,CAAC,aAAaO,QAAeD,GAA0BL,IAGzD,MAAMY,EAAsC,CAC1CC,QAAS,KACTC,aAAc5B,EACd6B,eAAgB7B,GAAWb,KAAKG,OAAS,KACzCwC,eAAgB9B,GAAWb,KAAKG,OAAS,KACzCyC,eAAgB/B,GAAWb,KAAKG,OAAS,MAG3C,MAAO,CACLqB,EAAI,GACFP,EAAA,OAAKG,MAAOmB,EAAU,cAAc,SAEtCtB,EAAA,aACEG,MAAOc,EACPN,QAASA,EACTiB,OAAQtB,EAAKsB,QAAU,OACvB3C,UAAWM,EACXL,KAAMH,KAAKG,KACX4B,MAAOR,EAAKQ,MACZ3B,QAASJ,KAAKI,QACd0C,SAAUvB,EAAKuB,SACfC,KAAMxB,EAAKwB,KACXC,UAAW,IAAMhD,KAAKiD,QAAQC,KAAK1B,IAElCD,EAAKO,MACJb,EAAA,WAASkC,KAAK,OAAOC,KAAM7B,EAAKO,QAGrC,K","ignoreList":[]}
+{"version":3,"names":["buttonGroupCss","ButtonGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","elevation","size","rounded","render","count","length","elev","elevKey","charAt","toUpperCase","slice","isGhost","groupCls","group","groupRounded","h","Host","key","class","role","map","item","i","isFirst","isLast","isMid","variant","isIconOnly","icon","label","needsRoundedCorrection","sizeKey","itemCls","first","last","middle","itemShort","dividerCls","divider","dividerGhost","dividerGhostXS","dividerGhostSM","dividerGhostLG","intent","inactive","href","onDsClick","dsClick","emit","slot","name"],"sources":["src/wc/components/ButtonGroup/ButtonGroup.css?tag=ds-button-group&encapsulation=scoped","src/wc/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["/* ==========================================================================\n   ButtonGroup — flush row of ds-button components.\n   The group container carries the elevation; individual button chrome\n   (shadow/border) is suppressed via .item.\n   ========================================================================== */\n\n.group {\n  display: inline-flex;\n  align-items: stretch;\n  border-radius: var(--dimension-radius-050);\n  position: relative;\n}\n\n/* Inset ring / highlight overlay — sits above button children */\n.group::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n/* ── Group-level elevation ──────────────────────────────────────────────── */\n\n.groupElevated { box-shadow: var(--effect-shadow-elevated-sm); }\n.groupElevated::after { box-shadow: var(--effect-highlight-elevated-sm); }\n\n.groupFlat::after { box-shadow: inset 0 0 0 1px var(--color-border-tertiary); }\n\n.groupFloating { box-shadow: var(--effect-shadow-elevated-floating); }\n.groupFloating::after { box-shadow: var(--effect-highlight-elevated-floating); }\n\n/* groupNone = ghost / primary — no shadow, no border */\n\n.groupRounded { border-radius: var(--dimension-radius-half); }\n\n/* ── Base item ─────────────────────────────────────────────────────────────── */\n\n.item {\n  flex-shrink: 0;\n  /* Suppress individual elevation so the group reads as one unit */\n  box-shadow: none !important;\n  border: none !important;\n}\n\n.item:active {\n  transform: none !important;\n}\n\n/* ── Divider ──────────────────────────────────────────────────────────────── */\n\n.divider {\n  width: 1px;\n  flex-shrink: 0;\n  background-color: var(--color-border-tertiary);\n  position: relative;\n  z-index: 1;\n  margin: 0 -0.5px;\n  pointer-events: none;\n}\n\n/* Ghost: short centred divider at icon height */\n.dividerGhost    { height: 20px; align-self: center; }\n.dividerGhostXS  { height: 12px; }\n.dividerGhostSM  { height: 16px; }\n.dividerGhostLG  { height: 24px; }\n\n/* Ghost hover-fade */\n.item:hover + .dividerGhost,\n.dividerGhost:has(+ .item:hover) { opacity: 0; }\n\n/* ── Ghost interaction states: rounded chips ──────────────────────────────── */\n\n.group .itemShort::after {\n  border-top-left-radius:     var(--dimension-radius-050) !important;\n  border-top-right-radius:    var(--dimension-radius-050) !important;\n  border-bottom-right-radius: var(--dimension-radius-050) !important;\n  border-bottom-left-radius:  var(--dimension-radius-050) !important;\n}\n\n/* ── Border radius: flatten inner-facing corners ──────────────────────────── */\n\n.first {\n  border-top-right-radius:    0 !important;\n  border-bottom-right-radius: 0 !important;\n}\n\n.last {\n  border-top-left-radius:    0 !important;\n  border-bottom-left-radius: 0 !important;\n}\n\n.middle {\n  border-radius: 0 !important;\n}\n\n/* Rounded group: first — left corners become pill */\n.groupRounded .first.itemShort::after {\n  border-top-left-radius:    var(--dimension-radius-half) !important;\n  border-bottom-left-radius: var(--dimension-radius-half) !important;\n}\n\n/* Rounded group: last — right corners become pill */\n.groupRounded .last.itemShort::after {\n  border-top-right-radius:    var(--dimension-radius-half) !important;\n  border-bottom-right-radius: var(--dimension-radius-half) !important;\n}\n\n/* ── Rounded: inner-edge padding correction ──────────────────────────────── */\n\n/* MD — base padding: space-100 */\n.roundedFirstMD { padding-right: var(--dimension-space-100) !important; }\n.roundedLastMD  { padding-left:  var(--dimension-space-100) !important; }\n.roundedMidMD   { padding-left:  var(--dimension-space-100) !important; padding-right: var(--dimension-space-100) !important; }\n\n/* SM — base padding: space-075 */\n.roundedFirstSM { padding-right: var(--dimension-space-075) !important; }\n.roundedLastSM  { padding-left:  var(--dimension-space-075) !important; }\n.roundedMidSM   { padding-left:  var(--dimension-space-075) !important; padding-right: var(--dimension-space-075) !important; }\n\n/* LG — base padding: space-150 */\n.roundedFirstLG { padding-right: var(--dimension-space-150) !important; }\n.roundedLastLG  { padding-left:  var(--dimension-space-150) !important; }\n.roundedMidLG   { padding-left:  var(--dimension-space-150) !important; padding-right: var(--dimension-space-150) !important; }\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type ButtonGroupElevation = 'none' | 'flat' | 'elevated' | 'floating';\nexport type ButtonGroupSize      = 'xs' | 'sm' | 'md' | 'lg';\n\nexport interface ButtonGroupItem {\n  label?: string;\n  /** Icon name for <ds-icon>. Set via JS property. */\n  icon?: string;\n  variant?: 'primary' | 'secondary';\n  intent?: 'none' | 'neutral' | 'brand' | 'negative' | 'warning' | 'positive';\n  inactive?: boolean;\n  href?: string;\n}\n\n@Component({\n  tag: 'ds-button-group',\n  styleUrl: 'ButtonGroup.css',\n  scoped: true,\n})\nexport class ButtonGroup {\n  /**\n   * Array of button descriptors. Set via JS property.\n   * @example el.items = [{ label: 'Filter', icon: 'Filter' }, { label: 'Sort' }];\n   */\n  @Prop() items: ButtonGroupItem[] = [];\n\n  /** Chrome level for the group container. */\n  @Prop() elevation: ButtonGroupElevation = 'flat';\n\n  /** Size passed to each ds-button. */\n  @Prop() size: ButtonGroupSize = 'md';\n\n  /** Pill shape for group + buttons. */\n  @Prop() rounded: boolean = false;\n\n  /** Emits the index of the clicked item. */\n  @Event() dsClick!: EventEmitter<number>;\n\n  render() {\n    const items = this.items;\n    const count = items.length;\n    const elev = this.elevation;\n    const elevKey = elev.charAt(0).toUpperCase() + elev.slice(1);\n    const isGhost = elev === 'none';\n\n    const groupCls: Record<string, boolean> = {\n      group: true,\n      [`group${elevKey}`]: true,\n      groupRounded: this.rounded,\n    };\n\n    return (\n      <Host>\n        <div class={groupCls} role=\"group\">\n          {items.map((item, i) => {\n            const isFirst = i === 0;\n            const isLast = i === count - 1;\n            const isMid = !isFirst && !isLast;\n            const variant = item.variant ?? 'secondary';\n            const isIconOnly = !!item.icon && !item.label;\n            const needsRoundedCorrection = this.rounded && !isIconOnly && this.size !== 'xs';\n            const sizeKey = this.size.toUpperCase() as 'MD' | 'SM' | 'LG' | 'XS';\n\n            const itemCls: Record<string, boolean> = {\n              item: true,\n              first: isFirst,\n              last: isLast,\n              middle: isMid,\n              itemShort: isGhost && variant === 'secondary',\n              [`roundedFirst${sizeKey}`]: !!(needsRoundedCorrection && isFirst),\n              [`roundedLast${sizeKey}`]: !!(needsRoundedCorrection && isLast),\n              [`roundedMid${sizeKey}`]: !!(needsRoundedCorrection && isMid),\n            };\n\n            const dividerCls: Record<string, boolean> = {\n              divider: true,\n              dividerGhost: isGhost,\n              dividerGhostXS: isGhost && this.size === 'xs',\n              dividerGhostSM: isGhost && this.size === 'sm',\n              dividerGhostLG: isGhost && this.size === 'lg',\n            };\n\n            return [\n              i > 0 && (\n                <div class={dividerCls} aria-hidden=\"true\" />\n              ),\n              <ds-button\n                class={itemCls}\n                variant={variant}\n                intent={item.intent ?? 'none'}\n                elevation={elev}\n                size={this.size}\n                label={item.label}\n                rounded={this.rounded}\n                inactive={item.inactive}\n                href={item.href}\n                onDsClick={() => this.dsClick.emit(i)}\n              >\n                {item.icon && (\n                  <ds-icon slot=\"icon\" name={item.icon} />\n                )}\n              </ds-button>,\n            ];\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yKAAA,MAAMA,EAAiB,IAAM,uuG,MCoBhBC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,2EAUUC,KAAAC,MAA2B,GAG3BD,KAAAE,UAAkC,OAGlCF,KAAAG,KAAwB,KAGxBH,KAAAI,QAAmB,KA2E5B,CAtEC,MAAAC,GACE,MAAMJ,EAAQD,KAAKC,MACnB,MAAMK,EAAQL,EAAMM,OACpB,MAAMC,EAAOR,KAAKE,UAClB,MAAMO,EAAUD,EAAKE,OAAO,GAAGC,cAAgBH,EAAKI,MAAM,GAC1D,MAAMC,EAAUL,IAAS,OAEzB,MAAMM,EAAoC,CACxCC,MAAO,KACP,CAAC,QAAQN,KAAY,KACrBO,aAAchB,KAAKI,SAGrB,OACEa,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAON,EAAUO,KAAK,SACxBpB,EAAMqB,KAAI,CAACC,EAAMC,KAChB,MAAMC,EAAUD,IAAM,EACtB,MAAME,EAASF,IAAMlB,EAAQ,EAC7B,MAAMqB,GAASF,IAAYC,EAC3B,MAAME,EAAUL,EAAKK,SAAW,YAChC,MAAMC,IAAeN,EAAKO,OAASP,EAAKQ,MACxC,MAAMC,EAAyBhC,KAAKI,UAAYyB,GAAc7B,KAAKG,OAAS,KAC5E,MAAM8B,EAAUjC,KAAKG,KAAKQ,cAE1B,MAAMuB,EAAmC,CACvCX,KAAM,KACNY,MAAOV,EACPW,KAAMV,EACNW,OAAQV,EACRW,UAAWzB,GAAWe,IAAY,YAClC,CAAC,eAAeK,QAAeD,GAA0BP,GACzD,CAAC,cAAcQ,QAAeD,GAA0BN,GACxD,CAAC,aAAaO,QAAeD,GAA0BL,IAGzD,MAAMY,EAAsC,CAC1CC,QAAS,KACTC,aAAc5B,EACd6B,eAAgB7B,GAAWb,KAAKG,OAAS,KACzCwC,eAAgB9B,GAAWb,KAAKG,OAAS,KACzCyC,eAAgB/B,GAAWb,KAAKG,OAAS,MAG3C,MAAO,CACLqB,EAAI,GACFP,EAAA,OAAKG,MAAOmB,EAAU,cAAc,SAEtCtB,EAAA,aACEG,MAAOc,EACPN,QAASA,EACTiB,OAAQtB,EAAKsB,QAAU,OACvB3C,UAAWM,EACXL,KAAMH,KAAKG,KACX4B,MAAOR,EAAKQ,MACZ3B,QAASJ,KAAKI,QACd0C,SAAUvB,EAAKuB,SACfC,KAAMxB,EAAKwB,KACXC,UAAW,IAAMhD,KAAKiD,QAAQC,KAAK1B,IAElCD,EAAKO,MACJb,EAAA,WAASkC,KAAK,OAAOC,KAAM7B,EAAKO,QAGrC,K","ignoreList":[]}

package/dist/components/ds-button.js

@@ -1,2 +1,2 @@
-import{B as s,d as o}from"./p-DdN6WnFs.js";const t=s;const n=o;export{t as DsButton,n as defineCustomElement};
+import{B as o,d as s}from"./p-B51N5kiy.js";const t=o;const p=s;export{t as DsButton,p as defineCustomElement};
 //# sourceMappingURL=ds-button.js.map

package/dist/components/ds-card.js

@@ -1,2 +1,2 @@
-import{p as e,H as d,h as a,a as s,t as r}from"./index.js";const o=()=>`.sc-ds-card-h{display:block;box-sizing:border-box;background-color:var(--color-background-primary);overflow:hidden}.elevation-flat.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-none)}.elevation-elevated.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-sm)}.elevation-floating.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-floating)}.radius-sm.sc-ds-card-h{border-radius:var(--dimension-radius-075)}.radius-md.sc-ds-card-h{border-radius:var(--dimension-radius-100)}.radius-lg.sc-ds-card-h{border-radius:var(--dimension-radius-125)}.radius-xl.sc-ds-card-h{border-radius:var(--dimension-radius-175)}.sc-ds-card-s>[slot="header"]{display:block;padding:var(--dimension-space-150) var(--dimension-space-200);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary)}.body.sc-ds-card{padding:var(--dimension-space-200)}.sc-ds-card-s>[slot="footer"]{display:block;padding:var(--dimension-space-150) var(--dimension-space-200);border-top:var(--dimension-stroke-width-015) solid var(--color-border-primary)}`;const i=e(class e extends d{constructor(e){super();if(e!==false){this.__registerHost()}this.elevation="elevated";this.radius="lg"}render(){return a(s,{key:"eab8ba1a4830a0a4981f644ae4ea47d79ab0f736",class:{card:true,[`elevation-${this.elevation}`]:true,[`radius-${this.radius}`]:true}},a("slot",{key:"377361a9165d4065d9403638fb176f5dbcb58953",name:"header"}),a("div",{key:"7bf27bcb83ac32810448d5f73132563511f1678d",class:"body"},a("slot",{key:"241a4f2d4d7ca54af83fde5ee173dfe0d2cf0bf4"})),a("slot",{key:"717d51ec4f23c6d02a9beba409f4c05c440f3522",name:"footer"}))}static get style(){return o()}},[262,"ds-card",{elevation:[1],radius:[1]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-card"];e.forEach((e=>{switch(e){case"ds-card":if(!customElements.get(r(e))){customElements.define(r(e),i)}break}}))}c();const t=i;const n=c;export{t as DsCard,n as defineCustomElement};
+import{p as e,H as d,h as s,a,t as r}from"./index.js";const o=()=>`.sc-ds-card-h{display:block;box-sizing:border-box;background-color:var(--color-background-primary);overflow:hidden}.elevation-flat.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-none)}.elevation-elevated.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-sm)}.elevation-floating.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-floating)}.radius-sm.sc-ds-card-h{border-radius:var(--dimension-radius-075)}.radius-md.sc-ds-card-h{border-radius:var(--dimension-radius-100)}.radius-lg.sc-ds-card-h{border-radius:var(--dimension-radius-125)}.radius-xl.sc-ds-card-h{border-radius:var(--dimension-radius-175)}.sc-ds-card-s>[slot="header"]{display:block;padding:var(--dimension-space-150) var(--dimension-space-200);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary)}.body.sc-ds-card{padding:var(--dimension-space-200)}.sc-ds-card-s>[slot="footer"]{display:block;padding:var(--dimension-space-150) var(--dimension-space-200);border-top:var(--dimension-stroke-width-015) solid var(--color-border-primary)}`;const i=e(class e extends d{constructor(e){super();if(e!==false){this.__registerHost()}this.elevation="elevated";this.radius="lg"}render(){return s(a,{key:"184eea0459960a7bb76a79cea6ef26e43d335fe1",class:{card:true,[`elevation-${this.elevation}`]:true,[`radius-${this.radius}`]:true}},s("slot",{key:"63d904dfc90ed71cc52c72f47d0dc985473006b0",name:"header"}),s("div",{key:"404bfe9b1b6a8e406ba1419508dd987652d88ce4",class:"body"},s("slot",{key:"3b0c047686bc33df4a10f83d54db7cced39bb0e6"})),s("slot",{key:"50f30a0dba2576147aa2de847ec2d3581bdfeb32",name:"footer"}))}static get style(){return o()}},[262,"ds-card",{elevation:[1],radius:[1]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-card"];e.forEach((e=>{switch(e){case"ds-card":if(!customElements.get(r(e))){customElements.define(r(e),i)}break}}))}c();const t=i;const n=c;export{t as DsCard,n as defineCustomElement};
 //# sourceMappingURL=ds-card.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["cardCss","Card","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","elevation","radius","render","h","Host","key","class","card","name"],"sources":["src/wc/components/Card/Card.css?tag=ds-card&encapsulation=scoped","src/wc/components/Card/Card.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  overflow: hidden;\n}\n\n/* Elevation */\n:host(.elevation-flat)     { box-shadow: var(--effect-elevation-elevated-none); }\n:host(.elevation-elevated) { box-shadow: var(--effect-elevation-elevated-sm); }\n:host(.elevation-floating) { box-shadow: var(--effect-elevation-elevated-floating); }\n\n/* Radius */\n:host(.radius-sm) { border-radius: var(--dimension-radius-075); }\n:host(.radius-md) { border-radius: var(--dimension-radius-100); }\n:host(.radius-lg) { border-radius: var(--dimension-radius-125); }\n:host(.radius-xl) { border-radius: var(--dimension-radius-175); }\n\n/* Sections */\n::slotted([slot=\"header\"]) {\n  display: block;\n  padding: var(--dimension-space-150) var(--dimension-space-200);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n\n.body {\n  padding: var(--dimension-space-200);\n}\n\n::slotted([slot=\"footer\"]) {\n  display: block;\n  padding: var(--dimension-space-150) var(--dimension-space-200);\n  border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type CardElevation = 'flat' | 'elevated' | 'floating';\nexport type CardRadius = 'sm' | 'md' | 'lg' | 'xl';\n\n@Component({\n  tag: 'ds-card',\n  styleUrl: 'Card.css',\n  scoped: true,\n})\nexport class Card {\n  @Prop() elevation: CardElevation = 'elevated';\n  @Prop() radius: CardRadius = 'lg';\n\n  render() {\n    return (\n      <Host class={{ card: true, [`elevation-${this.elevation}`]: true, [`radius-${this.radius}`]: true }}>\n        <slot name=\"header\" />\n        <div class=\"body\">\n          <slot />\n        </div>\n        <slot name=\"footer\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAU,IAAM,2hC,MCUTC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAMUC,KAAAC,UAA2B,WAC3BD,KAAAE,OAAqB,IAa9B,CAXC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAEC,KAAM,KAAM,CAAC,aAAaR,KAAKC,aAAc,KAAM,CAAC,UAAUD,KAAKE,UAAW,OAC3FE,EAAA,QAAAE,IAAA,2CAAMG,KAAK,WACXL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QACTH,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CAAMG,KAAK,W","ignoreList":[]}
+{"version":3,"names":["cardCss","Card","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","elevation","radius","render","h","Host","key","class","card","name"],"sources":["src/wc/components/Card/Card.css?tag=ds-card&encapsulation=scoped","src/wc/components/Card/Card.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  overflow: hidden;\n}\n\n/* Elevation */\n:host(.elevation-flat)     { box-shadow: var(--effect-elevation-elevated-none); }\n:host(.elevation-elevated) { box-shadow: var(--effect-elevation-elevated-sm); }\n:host(.elevation-floating) { box-shadow: var(--effect-elevation-elevated-floating); }\n\n/* Radius */\n:host(.radius-sm) { border-radius: var(--dimension-radius-075); }\n:host(.radius-md) { border-radius: var(--dimension-radius-100); }\n:host(.radius-lg) { border-radius: var(--dimension-radius-125); }\n:host(.radius-xl) { border-radius: var(--dimension-radius-175); }\n\n/* Sections */\n::slotted([slot=\"header\"]) {\n  display: block;\n  padding: var(--dimension-space-150) var(--dimension-space-200);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n\n.body {\n  padding: var(--dimension-space-200);\n}\n\n::slotted([slot=\"footer\"]) {\n  display: block;\n  padding: var(--dimension-space-150) var(--dimension-space-200);\n  border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type CardElevation = 'flat' | 'elevated' | 'floating';\nexport type CardRadius = 'sm' | 'md' | 'lg' | 'xl';\n\n@Component({\n  tag: 'ds-card',\n  styleUrl: 'Card.css',\n  scoped: true,\n})\nexport class Card {\n  @Prop() elevation: CardElevation = 'elevated';\n  @Prop() radius: CardRadius = 'lg';\n\n  render() {\n    return (\n      <Host class={{ card: true, [`elevation-${this.elevation}`]: true, [`radius-${this.radius}`]: true }}>\n        <slot name=\"header\" />\n        <div class=\"body\">\n          <slot />\n        </div>\n        <slot name=\"footer\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAAA,MAAMA,EAAU,IAAM,2hC,MCUTC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAMUC,KAAAC,UAA2B,WAC3BD,KAAAE,OAAqB,IAa9B,CAXC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAEC,KAAM,KAAM,CAAC,aAAaR,KAAKC,aAAc,KAAM,CAAC,UAAUD,KAAKE,UAAW,OAC3FE,EAAA,QAAAE,IAAA,2CAAMG,KAAK,WACXL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QACTH,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CAAMG,KAAK,W","ignoreList":[]}

package/dist/components/ds-checkbox.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as o,h as c,a as i,t as r}from"./index.js";const t=()=>`.checkbox.sc-ds-checkbox{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2)}.checkbox.sc-ds-checkbox:hover{background-color:var(--color-interaction-hover)}.checkbox.sc-ds-checkbox:active{background-color:var(--color-interaction-pressed)}.inactive.sc-ds-checkbox{cursor:not-allowed;opacity:0.5;pointer-events:none}.box.sc-ds-checkbox{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all var(--effect-motion-short-2)}.box--marked.sc-ds-checkbox{background-color:var(--color-foreground-primary);border-color:var(--color-foreground-primary)}.checkmark.sc-ds-checkbox{color:var(--color-foreground-on-bold-background-primary);font-size:14px;line-height:1;font-weight:700}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0}`;let a=0;const n=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.labelId=`ds-checkbox-label-${++a}`;this.checked=false;this.indeterminate=false;this.inactive=false;this.handleActivate=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=e=>{if(e.key===" "||e.key==="Enter"){e.preventDefault();this.handleActivate()}}}render(){const e=this.checked||this.indeterminate;return c(i,{key:"0a52eba5a20efae7cf4214bc5e88be15b0d47b12",role:"checkbox","aria-checked":this.indeterminate?"mixed":String(this.checked),"aria-disabled":this.inactive||undefined,"aria-labelledby":this.labelId,tabIndex:this.inactive?-1:0,class:{checkbox:true,inactive:this.inactive},onClick:this.handleActivate,onKeyDown:this.handleKeyDown},c("span",{key:"053c607924ce2940add65fea65135bcf5bd1c50d",class:{box:true,"box--marked":e}},e&&c("span",{key:"ad1aaa0cabad80a93ab78bd1a0ffc71fd3d7a66a",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),c("span",{key:"07ba3ba551824707a52d67ad94516e89bd664ee1",id:this.labelId,class:"text-body-medium checkbox__label"},this.label))}static get style(){return t()}},[2,"ds-checkbox",{label:[1],checked:[1028],indeterminate:[4],inactive:[4]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ds-checkbox"];e.forEach((e=>{switch(e){case"ds-checkbox":if(!customElements.get(r(e))){customElements.define(r(e),n)}break}}))}d();const h=n;const b=d;export{h as DsCheckbox,b as defineCustomElement};
+import{p as e,H as s,c as o,h as c,a as i,t as r}from"./index.js";const t=()=>`.checkbox.sc-ds-checkbox{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2)}.checkbox.sc-ds-checkbox:hover{background-color:var(--color-interaction-hover)}.checkbox.sc-ds-checkbox:active{background-color:var(--color-interaction-pressed)}.inactive.sc-ds-checkbox{cursor:not-allowed;opacity:0.5;pointer-events:none}.box.sc-ds-checkbox{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all var(--effect-motion-short-2)}.box--marked.sc-ds-checkbox{background-color:var(--color-foreground-primary);border-color:var(--color-foreground-primary)}.checkmark.sc-ds-checkbox{color:var(--color-foreground-on-bold-background-primary);font-size:14px;line-height:1;font-weight:700}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0}`;let a=0;const n=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.labelId=`ds-checkbox-label-${++a}`;this.checked=false;this.indeterminate=false;this.inactive=false;this.handleActivate=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=e=>{if(e.key===" "||e.key==="Enter"){e.preventDefault();this.handleActivate()}}}render(){const e=this.checked||this.indeterminate;return c(i,{key:"cba6fe32eaf9a9d9b504be90e2ddb09ed90a2db6",role:"checkbox","aria-checked":this.indeterminate?"mixed":String(this.checked),"aria-disabled":this.inactive||undefined,"aria-labelledby":this.labelId,tabIndex:this.inactive?-1:0,class:{checkbox:true,inactive:this.inactive},onClick:this.handleActivate,onKeyDown:this.handleKeyDown},c("span",{key:"a163ae1fe07ba57c55e9857e620747b7c0849db5",class:{box:true,"box--marked":e}},e&&c("span",{key:"c19bf6081f3888689f832b15c5acd281a1db4aec",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),c("span",{key:"ee402c31cae501f6c0a56668f1c5d663e8e009a2",id:this.labelId,class:"text-body-medium checkbox__label"},this.label))}static get style(){return t()}},[2,"ds-checkbox",{label:[1],checked:[1028],indeterminate:[4],inactive:[4]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ds-checkbox"];e.forEach((e=>{switch(e){case"ds-checkbox":if(!customElements.get(r(e))){customElements.define(r(e),n)}break}}))}d();const h=n;const b=d;export{h as DsCheckbox,b as defineCustomElement};
 //# sourceMappingURL=ds-checkbox.js.map

package/dist/components/ds-divider.js

@@ -1,2 +1,2 @@
-import{p as t,H as e,h as s,t as r,a as i}from"./index.js";const o=()=>`:host{display:block;border:none;margin:0;flex-shrink:0;background-color:var(--color-border-secondary)}:host(:not(.vertical)){width:100%;height:1px}:host(.vertical){width:1px;height:100%;align-self:stretch}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.orientation="horizontal"}render(){return s(i,{key:"05d217d9d0d1330df80ff23120bdd578e29f46b6",role:"separator","aria-orientation":this.orientation,class:{vertical:this.orientation==="vertical"}})}static get style(){return o()}},[1,"ds-divider",{orientation:[1]}]);function d(){if(typeof customElements==="undefined"){return}const t=["ds-divider"];t.forEach((t=>{switch(t){case"ds-divider":if(!customElements.get(r(t))){customElements.define(r(t),n)}break}}))}d();const a=n;const c=d;export{a as DsDivider,c as defineCustomElement};
+import{p as t,H as e,h as s,t as r,a as i}from"./index.js";const o=()=>`:host{display:block;border:none;margin:0;flex-shrink:0;background-color:var(--color-border-secondary)}:host(:not(.vertical)){width:100%;height:1px}:host(.vertical){width:1px;height:100%;align-self:stretch}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.orientation="horizontal"}render(){return s(i,{key:"63fbed2bb0063d1c6a40659cc90a871a346358af",role:"separator","aria-orientation":this.orientation,class:{vertical:this.orientation==="vertical"}})}static get style(){return o()}},[1,"ds-divider",{orientation:[1]}]);function a(){if(typeof customElements==="undefined"){return}const t=["ds-divider"];t.forEach((t=>{switch(t){case"ds-divider":if(!customElements.get(r(t))){customElements.define(r(t),n)}break}}))}a();const c=n;const d=a;export{c as DsDivider,d as defineCustomElement};
 //# sourceMappingURL=ds-divider.js.map

package/dist/components/ds-empty-state.js

@@ -1,2 +1,2 @@
-import{p as t,H as e,h as s,a as c,t as a}from"./index.js";const n=()=>`.sc-ds-empty-state-h{display:block;width:100%;height:100%}.empty-state.sc-ds-empty-state{display:flex;align-items:center;justify-content:center;height:100%;min-height:400px;width:100%}.empty-state.sc-ds-empty-state p.sc-ds-empty-state{margin:0}`;const o={"no-content":"No page contents to display.","no-results":"No results found.","no-results-filter":"No results found. Please update search criteria.","no-access":"You don't have access to this page."};const d=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.type="no-content"}render(){return s(c,{key:"386f65dc8fabc2b510cd2769c86109e352f42803"},s("div",{key:"f4ae4a6507773d51f33f17c2d567c310fe2e9c5e",class:"empty-state"},s("p",{key:"65f599fb8782b80da7ae90f7e7d0f20dbd37a070",class:"text-body-medium",style:{color:"var(--color-foreground-secondary)"}},this.message||o[this.type])))}static get style(){return n()}},[2,"ds-empty-state",{type:[1],message:[1]}]);function i(){if(typeof customElements==="undefined"){return}const t=["ds-empty-state"];t.forEach((t=>{switch(t){case"ds-empty-state":if(!customElements.get(a(t))){customElements.define(a(t),d)}break}}))}i();const r=d;const f=i;export{r as DsEmptyState,f as defineCustomElement};
+import{p as t,H as e,h as s,a,t as c}from"./index.js";const n=()=>`.sc-ds-empty-state-h{display:block;width:100%;height:100%}.empty-state.sc-ds-empty-state{display:flex;align-items:center;justify-content:center;height:100%;min-height:400px;width:100%}.empty-state.sc-ds-empty-state p.sc-ds-empty-state{margin:0}`;const o={"no-content":"No page contents to display.","no-results":"No results found.","no-results-filter":"No results found. Please update search criteria.","no-access":"You don't have access to this page."};const d=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.type="no-content"}render(){return s(a,{key:"03fb34d944db53973a8ae28554d30f8e7e36b304"},s("div",{key:"42122a912901a33817e669e506f121cd2e3714bb",class:"empty-state"},s("p",{key:"8c3d0560808fcccc68bda617db40283afba0c4a4",class:"text-body-medium",style:{color:"var(--color-foreground-secondary)"}},this.message||o[this.type])))}static get style(){return n()}},[2,"ds-empty-state",{type:[1],message:[1]}]);function i(){if(typeof customElements==="undefined"){return}const t=["ds-empty-state"];t.forEach((t=>{switch(t){case"ds-empty-state":if(!customElements.get(c(t))){customElements.define(c(t),d)}break}}))}i();const r=d;const p=i;export{r as DsEmptyState,p as defineCustomElement};
 //# sourceMappingURL=ds-empty-state.js.map

package/dist/components/ds-empty-state.js.map

@@ -1 +1 @@
-{"version":3,"names":["emptyStateCss","DEFAULT_MESSAGES","EmptyState","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","type","render","h","Host","key","class","style","color","message"],"sources":["src/wc/components/EmptyState/EmptyState.css?tag=ds-empty-state&encapsulation=scoped","src/wc/components/EmptyState/EmptyState.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.empty-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 400px;\n  width: 100%;\n}\n\n.empty-state p {\n  margin: 0;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type EmptyStateType = 'no-content' | 'no-results' | 'no-results-filter' | 'no-access';\n\nconst DEFAULT_MESSAGES: Record<EmptyStateType, string> = {\n  'no-content': 'No page contents to display.',\n  'no-results': 'No results found.',\n  'no-results-filter': 'No results found. Please update search criteria.',\n  'no-access': \"You don't have access to this page.\",\n};\n\n@Component({\n  tag: 'ds-empty-state',\n  styleUrl: 'EmptyState.css',\n  scoped: true,\n})\nexport class EmptyState {\n  @Prop() type: EmptyStateType = 'no-content';\n  @Prop() message: string | undefined;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"empty-state\">\n          <p class=\"text-body-medium\" style={{ color: 'var(--color-foreground-secondary)' }}>\n            {this.message || DEFAULT_MESSAGES[this.type]}\n          </p>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAgB,IAAM,uPCI5B,MAAMC,EAAmD,CACvD,aAAc,+BACd,aAAc,oBACd,oBAAqB,mDACrB,YAAa,uC,MAQFC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,4CAMUC,KAAAC,KAAuB,YAchC,CAXC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,KAAAE,IAAA,2CAAGC,MAAM,mBAAmBC,MAAO,CAAEC,MAAO,sCACzCR,KAAKS,SAAWf,EAAiBM,KAAKC,Q","ignoreList":[]}
+{"version":3,"names":["emptyStateCss","DEFAULT_MESSAGES","EmptyState","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","type","render","h","Host","key","class","style","color","message"],"sources":["src/wc/components/EmptyState/EmptyState.css?tag=ds-empty-state&encapsulation=scoped","src/wc/components/EmptyState/EmptyState.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.empty-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 400px;\n  width: 100%;\n}\n\n.empty-state p {\n  margin: 0;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type EmptyStateType = 'no-content' | 'no-results' | 'no-results-filter' | 'no-access';\n\nconst DEFAULT_MESSAGES: Record<EmptyStateType, string> = {\n  'no-content': 'No page contents to display.',\n  'no-results': 'No results found.',\n  'no-results-filter': 'No results found. Please update search criteria.',\n  'no-access': \"You don't have access to this page.\",\n};\n\n@Component({\n  tag: 'ds-empty-state',\n  styleUrl: 'EmptyState.css',\n  scoped: true,\n})\nexport class EmptyState {\n  @Prop() type: EmptyStateType = 'no-content';\n  @Prop() message: string | undefined;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"empty-state\">\n          <p class=\"text-body-medium\" style={{ color: 'var(--color-foreground-secondary)' }}>\n            {this.message || DEFAULT_MESSAGES[this.type]}\n          </p>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAAA,MAAMA,EAAgB,IAAM,uPCI5B,MAAMC,EAAmD,CACvD,aAAc,+BACd,aAAc,oBACd,oBAAqB,mDACrB,YAAa,uC,MAQFC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,4CAMUC,KAAAC,KAAuB,YAchC,CAXC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,KAAAE,IAAA,2CAAGC,MAAM,mBAAmBC,MAAO,CAAEC,MAAO,sCACzCR,KAAKS,SAAWf,EAAiBM,KAAKC,Q","ignoreList":[]}

package/dist/components/ds-fade.js

@@ -1,2 +1,2 @@
-import{p as t,H as e,h as a,t as r,a as s}from"./index.js";const o=()=>`:host{position:absolute;pointer-events:none;z-index:10;transform:translateZ(0);backface-visibility:hidden}@media (prefers-reduced-motion: reduce){:host{transition:none}}:host(.fade--top){top:0;left:0;right:0;background:linear-gradient(to bottom, var(--ds-fade-bg) 0%, var(--ds-fade-bg) 50%, transparent 100%)}:host(.fade--bottom){bottom:0;left:0;right:0;background:linear-gradient(to top, var(--ds-fade-bg) 0%, transparent 100%)}:host(.fade--left){top:0;bottom:0;left:0;background:linear-gradient(to right, var(--ds-fade-bg) 0%, transparent 100%)}:host(.fade--right){top:0;bottom:0;right:0;background:linear-gradient(to left, var(--ds-fade-bg) 0%, transparent 100%)}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.background="var(--color-background-secondary)"}render(){return a(s,{key:"8b825987246fa9f643d107322e81e073d76dbd97","aria-hidden":"true",class:{fade:true,[`fade--${this.side}`]:true},style:{height:this.height,"--ds-fade-bg":this.background}})}static get style(){return o()}},[1,"ds-fade",{side:[1],height:[1],background:[1]}]);function d(){if(typeof customElements==="undefined"){return}const t=["ds-fade"];t.forEach((t=>{switch(t){case"ds-fade":if(!customElements.get(r(t))){customElements.define(r(t),n)}break}}))}d();const i=n;const f=d;export{i as DsFade,f as defineCustomElement};
+import{p as t,H as e,h as a,t as r,a as s}from"./index.js";const o=()=>`:host{position:absolute;pointer-events:none;z-index:10;transform:translateZ(0);backface-visibility:hidden}@media (prefers-reduced-motion: reduce){:host{transition:none}}:host(.fade--top){top:0;left:0;right:0;background:linear-gradient(to bottom, var(--ds-fade-bg) 0%, var(--ds-fade-bg) 50%, transparent 100%)}:host(.fade--bottom){bottom:0;left:0;right:0;background:linear-gradient(to top, var(--ds-fade-bg) 0%, transparent 100%)}:host(.fade--left){top:0;bottom:0;left:0;background:linear-gradient(to right, var(--ds-fade-bg) 0%, transparent 100%)}:host(.fade--right){top:0;bottom:0;right:0;background:linear-gradient(to left, var(--ds-fade-bg) 0%, transparent 100%)}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.background="var(--color-background-secondary)"}render(){return a(s,{key:"ba1e11b289ecf13ce7b75eb94f1f0849d14a9db4","aria-hidden":"true",class:{fade:true,[`fade--${this.side}`]:true},style:{height:this.height,"--ds-fade-bg":this.background}})}static get style(){return o()}},[1,"ds-fade",{side:[1],height:[1],background:[1]}]);function d(){if(typeof customElements==="undefined"){return}const t=["ds-fade"];t.forEach((t=>{switch(t){case"ds-fade":if(!customElements.get(r(t))){customElements.define(r(t),n)}break}}))}d();const i=n;const f=d;export{i as DsFade,f as defineCustomElement};
 //# sourceMappingURL=ds-fade.js.map

package/dist/components/ds-field.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,h as d,a as l,t}from"./index.js";const c=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.field__label.sc-ds-field{display:block}`;let i=0;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.resolvedId=`ds-field-${++i}`}render(){const e=this.fieldId||this.resolvedId;return d(l,{key:"8f813ce7af789cf3a16841519e0c6314d9e4b5e8"},d("div",{key:"5c199a001430609dd83dffbb2795e2c7029f40c6",class:"field"},d("label",{key:"85bf00d09fc99527082ee60f5fd630951309a560",class:"text-body-small-emphasis field__label",htmlFor:e},this.label),d("slot",{key:"e0bc9dbcfd770e6ee3d4bd4c41d03ce5bbdd00c4"})))}static get style(){return c()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"]}]);function a(){if(typeof customElements==="undefined"){return}const e=["ds-field"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(t(e))){customElements.define(t(e),f)}break}}))}a();const n=f;const o=a;export{n as DsField,o as defineCustomElement};
+import{p as e,H as s,h as d,a as l,t}from"./index.js";const i=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.field__label.sc-ds-field{display:block}`;let c=0;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.resolvedId=`ds-field-${++c}`}render(){const e=this.fieldId||this.resolvedId;return d(l,{key:"16bc2e031559311d9d493f7383cde63c6a87980c"},d("div",{key:"9a1b08408027f44a865faf1489c8417b59ddbf40",class:"field"},d("label",{key:"7e48c8ded4a0a48bfdc93e4f158fd528d9c2665f",class:"text-body-small-emphasis field__label",htmlFor:e},this.label),d("slot",{key:"90f608431565c9ff5033173f5ebe80666c45266d"})))}static get style(){return i()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"]}]);function a(){if(typeof customElements==="undefined"){return}const e=["ds-field"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(t(e))){customElements.define(t(e),f)}break}}))}a();const n=f;const o=a;export{n as DsField,o as defineCustomElement};
 //# sourceMappingURL=ds-field.js.map

package/dist/components/ds-header.js

@@ -1,2 +1,2 @@
-import{p as e,H as a,h as r,a as s,t}from"./index.js";const c=()=>`.sc-ds-header-h{display:flex;align-items:center;justify-content:space-between;height:var(--dimension-size-600, 48px);padding:0 var(--dimension-space-100);flex-shrink:0;gap:var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);box-sizing:border-box}.bg-primary.sc-ds-header-h{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-header-h{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-header-h{background-color:transparent}.bg-translucent.sc-ds-header-h{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.left.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-100);flex-shrink:0;min-width:0}.title.sc-ds-header{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.center.sc-ds-header{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);flex:1;min-width:0}.right.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-050);flex-shrink:0}`;const d=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.background="secondary"}render(){return r(s,{key:"da0a5d4df9029fee8563eba64b21ffb149b32652",class:{header:true,[`bg-${this.background}`]:true},role:"banner"},r("div",{key:"442350df0e24431f7b1230b2875726879175224e",class:"left"},r("slot",{key:"0fbb9cc116b6d56c77eeddc3a0221b62afc4f9e4",name:"left"}),this.heading&&r("span",{key:"7eacaaebb8694bcfe1d31bf66d7843279412d634",class:"title text-title-small"},this.heading)),r("div",{key:"fcea6ce63814b460964f099f1aa7eb0704cb1576",class:"center"},r("slot",{key:"1fe99e1754f117298e71fe7a364f026660a31e73",name:"center"})),r("div",{key:"dc50a094ae6df86f66dbd7e4697b55f441b9d142",class:"right"},r("slot",{key:"93c33b68af8c9ad0ecce38cc0b776ac02568d588",name:"right"})))}static get style(){return c()}},[262,"ds-header",{heading:[1],background:[1]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-header"];e.forEach((e=>{switch(e){case"ds-header":if(!customElements.get(t(e))){customElements.define(t(e),d)}break}}))}n();const i=d;const o=n;export{i as DsHeader,o as defineCustomElement};
+import{p as e,H as a,h as r,a as s,t as c}from"./index.js";const t=()=>`.sc-ds-header-h{display:flex;align-items:center;justify-content:space-between;height:var(--dimension-size-600, 48px);padding:0 var(--dimension-space-100);flex-shrink:0;gap:var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);box-sizing:border-box}.bg-primary.sc-ds-header-h{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-header-h{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-header-h{background-color:transparent}.bg-translucent.sc-ds-header-h{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.left.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-100);flex-shrink:0;min-width:0}.title.sc-ds-header{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.center.sc-ds-header{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);flex:1;min-width:0}.right.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-050);flex-shrink:0}`;const d=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.background="secondary"}render(){return r(s,{key:"c802d27e10e00e9cfdb74b6364fb2fffede08893",class:{header:true,[`bg-${this.background}`]:true},role:"banner"},r("div",{key:"1b9bcf857ac946d1b588cef94cf2c9f3c26263b0",class:"left"},r("slot",{key:"b400b3f076a107bcaffe4eaaace152423a3904c6",name:"left"}),this.heading&&r("span",{key:"cb64408fe948411cbceb87699352cd0512a1446a",class:"title text-title-small"},this.heading)),r("div",{key:"f94983b3f40ce764d402981000170ca29dead4a0",class:"center"},r("slot",{key:"a71ce0c5fc65725cb9cc82345f87b4d307e8aa7f",name:"center"})),r("div",{key:"869549006da038fbe23de656938a6348dd447d90",class:"right"},r("slot",{key:"4643291690551cdf02c1be67a45b971c5a11354f",name:"right"})))}static get style(){return t()}},[262,"ds-header",{heading:[1],background:[1]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-header"];e.forEach((e=>{switch(e){case"ds-header":if(!customElements.get(c(e))){customElements.define(c(e),d)}break}}))}n();const i=d;const o=n;export{i as DsHeader,o as defineCustomElement};
 //# sourceMappingURL=ds-header.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["headerCss","Header","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","background","render","h","Host","key","class","header","role","name","heading"],"sources":["src/wc/components/Header/Header.css?tag=ds-header&encapsulation=scoped","src/wc/components/Header/Header.tsx"],"sourcesContent":[":host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: var(--dimension-size-600, 48px);\n  padding: 0 var(--dimension-space-100);\n  flex-shrink: 0;\n  gap: var(--dimension-space-100);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n  box-sizing: border-box;\n}\n\n/* Backgrounds */\n:host(.bg-primary)     { background-color: var(--color-background-primary); }\n:host(.bg-secondary)   { background-color: var(--color-background-secondary); }\n:host(.bg-transparent) { background-color: transparent; }\n:host(.bg-translucent) {\n  background-color: var(--color-background-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n}\n\n.left {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n.title {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  flex: 1;\n  min-width: 0;\n}\n\n.right {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  flex-shrink: 0;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type HeaderBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';\n\n@Component({\n  tag: 'ds-header',\n  styleUrl: 'Header.css',\n  scoped: true,\n})\nexport class Header {\n  @Prop() heading: string | undefined;\n  @Prop() background: HeaderBackground = 'secondary';\n\n  render() {\n    return (\n      <Host\n        class={{ header: true, [`bg-${this.background}`]: true }}\n        role=\"banner\"\n      >\n        <div class=\"left\">\n          <slot name=\"left\" />\n          {this.heading && <span class=\"title text-title-small\">{this.heading}</span>}\n        </div>\n        <div class=\"center\">\n          <slot name=\"center\" />\n        </div>\n        <div class=\"right\">\n          <slot name=\"right\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAAA,MAAMA,EAAY,IAAM,wlC,MCSXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,4CAOUC,KAAAC,WAA+B,WAqBxC,CAnBC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CAAEC,OAAQ,KAAM,CAAC,MAAMP,KAAKC,cAAe,MAClDO,KAAK,UAELL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,SACVT,KAAKU,SAAWP,EAAA,QAAAE,IAAA,2CAAMC,MAAM,0BAA0BN,KAAKU,UAE9DP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,YAEbN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,W","ignoreList":[]}
+{"version":3,"names":["headerCss","Header","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","background","render","h","Host","key","class","header","role","name","heading"],"sources":["src/wc/components/Header/Header.css?tag=ds-header&encapsulation=scoped","src/wc/components/Header/Header.tsx"],"sourcesContent":[":host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: var(--dimension-size-600, 48px);\n  padding: 0 var(--dimension-space-100);\n  flex-shrink: 0;\n  gap: var(--dimension-space-100);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n  box-sizing: border-box;\n}\n\n/* Backgrounds */\n:host(.bg-primary)     { background-color: var(--color-background-primary); }\n:host(.bg-secondary)   { background-color: var(--color-background-secondary); }\n:host(.bg-transparent) { background-color: transparent; }\n:host(.bg-translucent) {\n  background-color: var(--color-background-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n}\n\n.left {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n.title {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  flex: 1;\n  min-width: 0;\n}\n\n.right {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  flex-shrink: 0;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type HeaderBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';\n\n@Component({\n  tag: 'ds-header',\n  styleUrl: 'Header.css',\n  scoped: true,\n})\nexport class Header {\n  @Prop() heading: string | undefined;\n  @Prop() background: HeaderBackground = 'secondary';\n\n  render() {\n    return (\n      <Host\n        class={{ header: true, [`bg-${this.background}`]: true }}\n        role=\"banner\"\n      >\n        <div class=\"left\">\n          <slot name=\"left\" />\n          {this.heading && <span class=\"title text-title-small\">{this.heading}</span>}\n        </div>\n        <div class=\"center\">\n          <slot name=\"center\" />\n        </div>\n        <div class=\"right\">\n          <slot name=\"right\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAY,IAAM,wlC,MCSXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,4CAOUC,KAAAC,WAA+B,WAqBxC,CAnBC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CAAEC,OAAQ,KAAM,CAAC,MAAMP,KAAKC,cAAe,MAClDO,KAAK,UAELL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,SACVT,KAAKU,SAAWP,EAAA,QAAAE,IAAA,2CAAMC,MAAM,0BAA0BN,KAAKU,UAE9DP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,YAEbN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,W","ignoreList":[]}

package/dist/components/ds-icon.js

@@ -1,2 +1,2 @@
-import{I as o,d as s}from"./p-CGuwZUFk.js";const t=o;const p=s;export{t as DsIcon,p as defineCustomElement};
+import{I as o,d as s}from"./p-CkBXHj0e.js";const t=o;const p=s;export{t as DsIcon,p as defineCustomElement};
 //# sourceMappingURL=ds-icon.js.map

package/dist/components/ds-input.js

@@ -1,2 +1,2 @@
-import{p as e,H as i,c as s,h as t,a as r,t as a}from"./index.js";const n=()=>`.input-container.sc-ds-input{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.wrapper.sc-ds-input{width:100%;height:var(--dimension-size-400);display:flex;align-items:center;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-elevation-depressed-sm);box-sizing:border-box}.wrapper.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-foreground-bold-brand)}.wrapper--error.sc-ds-input{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.wrapper--error.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.row.sc-ds-input{display:flex;align-items:center;width:100%;height:100%;gap:var(--dimension-space-050)}.native-input.sc-ds-input{flex:1;min-width:0;height:100%;padding:0 var(--dimension-space-100);background:transparent;border:none;outline:none;font-family:inherit;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);color:var(--color-foreground-primary);border-radius:var(--dimension-radius-075);-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{opacity:0.5;cursor:not-allowed}.native-input.sc-ds-input::placeholder{color:var(--color-foreground-secondary)}.native-input.sc-ds-input:focus::placeholder{color:var(--color-foreground-tertiary)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.clear-btn.sc-ds-input{flex-shrink:0;margin-right:var(--dimension-space-050);padding:var(--dimension-space-050);border:none;background:none;cursor:pointer;color:var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1}.clear-btn.sc-ds-input:hover{background-color:var(--color-interaction-hover)}.suffix.sc-ds-input{display:flex;align-items:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.suffix.sc-ds-input:empty{display:none}.error-text.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm);color:var(--color-foreground-bold-negative)}`;let o=0;const d=e(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.dsClear=s(this,"dsClear");this.generatedId=`ds-input-${++o}`;this.errorId=`${this.generatedId}-error`;this.value="";this.type="text";this.inactive=false;this.autoFocus=false;this.error=false;this.handleInput=e=>{this.dsChange.emit(e.target.value)};this.handleClear=()=>{this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}async setFocus(){this.el.querySelector("input")?.focus()}render(){const e=this.inputId??this.generatedId;const i=this.type==="search"&&this.value.length>0&&!this.inactive;const s=this.error&&Boolean(this.errorMessage);const a=[this.ariaDescribedby,s?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return t(r,{key:"98eccc46df56e7925fb27fbab2cb930626e39bb7",class:"input-container"},t("div",{key:"c58204b977cdf3b9db367f86bfeb960e56ebdc5f",class:{wrapper:true,"wrapper--error":this.error}},t("div",{key:"a01b2908be7a66cb339f53488a151429411b1ed8",class:"row"},t("input",{key:"f0189940d32214e374ef121e9ec6c109377c05c0",type:this.type,id:e,value:this.value,placeholder:this.placeholder,disabled:this.inactive,autoFocus:this.autoFocus,class:"native-input","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":a,"aria-invalid":this.error||undefined,onInput:this.handleInput}),i&&t("button",{key:"6d459efce0326c68364a821a0ee069f5ae748265",type:"button",class:"clear-btn",onClick:this.handleClear,"aria-label":"Clear"},t("span",{key:"713a237e736c8b93fd9006ee7a9d706d333a9459","aria-hidden":"true"},"×")),t("span",{key:"9b119c034619cdcf719653546fd9cddb1003f723",class:"suffix"},t("slot",{key:"e54cdf9b5ddfaffe66bb209bf1bfe56088f9e32e",name:"suffix"})))),s&&t("div",{key:"9249d849cb8d2e7a5a8a441b4000051e5e95bcce",id:this.errorId,role:"alert",class:"error-text"},this.errorMessage))}get el(){return this}static get style(){return n()}},[262,"ds-input",{value:[1],placeholder:[1],type:[1],inactive:[4],autoFocus:[4,"auto-focus"],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],setFocus:[64]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-input"];e.forEach((e=>{switch(e){case"ds-input":if(!customElements.get(a(e))){customElements.define(a(e),d)}break}}))}c();const l=d;const p=c;export{l as DsInput,p as defineCustomElement};
+import{p as e,H as i,c as s,h as t,a as r,t as a}from"./index.js";const n=()=>`.input-container.sc-ds-input{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.wrapper.sc-ds-input{width:100%;height:var(--dimension-size-400);display:flex;align-items:center;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-elevation-depressed-sm);box-sizing:border-box}.wrapper.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-foreground-bold-brand)}.wrapper--error.sc-ds-input{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.wrapper--error.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.row.sc-ds-input{display:flex;align-items:center;width:100%;height:100%;gap:var(--dimension-space-050)}.native-input.sc-ds-input{flex:1;min-width:0;height:100%;padding:0 var(--dimension-space-100);background:transparent;border:none;outline:none;font-family:inherit;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);color:var(--color-foreground-primary);border-radius:var(--dimension-radius-075);-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{opacity:0.5;cursor:not-allowed}.native-input.sc-ds-input::placeholder{color:var(--color-foreground-secondary)}.native-input.sc-ds-input:focus::placeholder{color:var(--color-foreground-tertiary)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.clear-btn.sc-ds-input{flex-shrink:0;margin-right:var(--dimension-space-050);padding:var(--dimension-space-050);border:none;background:none;cursor:pointer;color:var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1}.clear-btn.sc-ds-input:hover{background-color:var(--color-interaction-hover)}.suffix.sc-ds-input{display:flex;align-items:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.suffix.sc-ds-input:empty{display:none}.error-text.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm);color:var(--color-foreground-bold-negative)}`;let o=0;const d=e(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.dsClear=s(this,"dsClear");this.generatedId=`ds-input-${++o}`;this.errorId=`${this.generatedId}-error`;this.value="";this.type="text";this.inactive=false;this.autoFocus=false;this.error=false;this.handleInput=e=>{this.dsChange.emit(e.target.value)};this.handleClear=()=>{this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}async setFocus(){this.el.querySelector("input")?.focus()}render(){const e=this.inputId??this.generatedId;const i=this.type==="search"&&this.value.length>0&&!this.inactive;const s=this.error&&Boolean(this.errorMessage);const a=[this.ariaDescribedby,s?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return t(r,{key:"3688292a744f440f69fdf3fcb485f19ca8368e2c",class:"input-container"},t("div",{key:"76550a088e5728b6276fc1054ca5b588116b937c",class:{wrapper:true,"wrapper--error":this.error}},t("div",{key:"4d050b983ee3bdc4a265811d506fad50b48c1bab",class:"row"},t("input",{key:"a47d43afb818beebd86d241451ded66959619c35",type:this.type,id:e,value:this.value,placeholder:this.placeholder,disabled:this.inactive,autoFocus:this.autoFocus,class:"native-input","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":a,"aria-invalid":this.error||undefined,onInput:this.handleInput}),i&&t("button",{key:"7da31f14f7833c27f29bb522ddfc43baee6e042b",type:"button",class:"clear-btn",onClick:this.handleClear,"aria-label":"Clear"},t("span",{key:"4c313394bdb233a0c326d1bea3fb8f6b0276904d","aria-hidden":"true"},"×")),t("span",{key:"de66762f1e23a845bb4ecf865b2fcc92dff703e1",class:"suffix"},t("slot",{key:"75b53412cea9dc91be8aa73c73a3a8293147e0b0",name:"suffix"})))),s&&t("div",{key:"72dec8889142e3510d60e0cfec5606d823a47117",id:this.errorId,role:"alert",class:"error-text"},this.errorMessage))}get el(){return this}static get style(){return n()}},[262,"ds-input",{value:[1],placeholder:[1],type:[1],inactive:[4],autoFocus:[4,"auto-focus"],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],setFocus:[64]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-input"];e.forEach((e=>{switch(e){case"ds-input":if(!customElements.get(a(e))){customElements.define(a(e),d)}break}}))}c();const l=d;const p=c;export{l as DsInput,p as defineCustomElement};
 //# sourceMappingURL=ds-input.js.map

package/dist/components/ds-label-wrap.js

@@ -1,2 +1,2 @@
-import{p as s,H as e,h as a,a as t,t as i}from"./index.js";const l=()=>`.label-wrap.sc-ds-label-wrap-h{display:inline-block;line-height:0;white-space:nowrap;flex-shrink:0;padding:0 var(--dimension-space-050)}.size-xs.sc-ds-label-wrap-h,.size-sm.sc-ds-label-wrap-h{padding:0 var(--dimension-space-025)}.truncate.sc-ds-label-wrap-h{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}`;const n=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.size="md";this.truncate=false}render(){return a(t,{key:"63918580201d398012afad55492d3f8a7701500a",class:{"label-wrap":true,"size-xs":this.size==="xs","size-sm":this.size==="sm","size-lg":this.size==="lg",truncate:this.truncate}},a("slot",{key:"b96e4d1644445272646c24aa6b3aecad2016ae1d"}))}static get style(){return l()}},[262,"ds-label-wrap",{size:[1],truncate:[4]}]);function r(){if(typeof customElements==="undefined"){return}const s=["ds-label-wrap"];s.forEach((s=>{switch(s){case"ds-label-wrap":if(!customElements.get(i(s))){customElements.define(i(s),n)}break}}))}r();const c=n;const d=r;export{c as DsLabelWrap,d as defineCustomElement};
+import{p as s,H as e,h as a,a as t,t as i}from"./index.js";const l=()=>`.label-wrap.sc-ds-label-wrap-h{display:inline-block;line-height:0;white-space:nowrap;flex-shrink:0;padding:0 var(--dimension-space-050)}.size-xs.sc-ds-label-wrap-h,.size-sm.sc-ds-label-wrap-h{padding:0 var(--dimension-space-025)}.truncate.sc-ds-label-wrap-h{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}`;const n=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.size="md";this.truncate=false}render(){return a(t,{key:"018dbf5b89ac62c8f94d87c260b3f5aa47af8724",class:{"label-wrap":true,"size-xs":this.size==="xs","size-sm":this.size==="sm","size-lg":this.size==="lg",truncate:this.truncate}},a("slot",{key:"9ff81402c960629e8c7ff7a963025d97dae4e9d3"}))}static get style(){return l()}},[262,"ds-label-wrap",{size:[1],truncate:[4]}]);function r(){if(typeof customElements==="undefined"){return}const s=["ds-label-wrap"];s.forEach((s=>{switch(s){case"ds-label-wrap":if(!customElements.get(i(s))){customElements.define(i(s),n)}break}}))}r();const c=n;const d=r;export{c as DsLabelWrap,d as defineCustomElement};
 //# sourceMappingURL=ds-label-wrap.js.map

package/dist/components/ds-modal.js

@@ -1,2 +1,2 @@
-import{p as e,H as t,c as a,h as s,a as o,t as i}from"./index.js";const d=()=>`.modal-backdrop.sc-ds-modal{background-color:var(--color-background-shade);backdrop-filter:blur(var(--effect-blur-sm));-webkit-backdrop-filter:blur(var(--effect-blur-sm));animation:modalBackdropIn var(--effect-motion-short-2) forwards;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal{animation:modalBackdropOut var(--effect-motion-short-3) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}.modal-dialog.sc-ds-modal{display:flex;flex-direction:column;max-height:calc(100vh - 32px);overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-275, 22px);box-shadow:var(--effect-elevation-elevated-floating);animation:modalDialogIn var(--effect-motion-short-2) forwards;outline:none;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal .modal-dialog.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-3) forwards}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}.modal-header.sc-ds-modal{padding:var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100);flex-shrink:0}.modal-title.sc-ds-modal{margin:0}.modal-subtitle.sc-ds-modal{margin-top:var(--dimension-space-100);color:var(--color-foreground-secondary);text-wrap:balance}.modal-body.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200);overflow-y:auto;flex:1}.modal-footer.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200);flex-shrink:0}.modal-footer.sc-ds-modal:empty{display:none}`;const n={sm:"var(--dimension-modal-width-sm, 400px)",md:"var(--dimension-modal-width-md, 560px)",lg:"var(--dimension-modal-width-lg, 720px)"};const l=220;const r=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let c=0;const m=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=a(this,"dsClose");this.open=false;this.modalWidth="md";this.shouldRender=false;this.closing=false;this.instanceId=++c;this.titleId=`ds-modal-title-${c}`;this.subtitleId=`ds-modal-subtitle-${c}`;this.previousFocus=null;this.escapeHandler=null;this.tabHandler=null;this.closeTimer=null}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.teardownListeners()}onOpenChange(e){if(e){this.shouldRender=true;this.closing=false;this.previousFocus=document.activeElement;requestAnimationFrame((()=>{this.focusFirst();this.setupListeners()}))}else if(this.shouldRender){this.closing=true;this.teardownListeners();this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null;this.previousFocus?.focus?.();this.previousFocus=null}),l)}}focusFirst(){const e=this.el.querySelector(".modal-dialog");if(!e)return;const t=this.getFocusables(e);(t[0]??e).focus()}getFocusables(e){return Array.from(e.querySelectorAll(r)).filter((e=>!e.hasAttribute("disabled")&&e.getAttribute("aria-hidden")!=="true"))}setupListeners(){this.escapeHandler=e=>{if(e.key==="Escape"){e.preventDefault();this.close()}};this.tabHandler=e=>{if(e.key!=="Tab")return;const t=this.el.querySelector(".modal-dialog");if(!t)return;const a=this.getFocusables(t);if(!a.length){e.preventDefault();t.focus();return}const s=a[0];const o=a[a.length-1];const i=document.activeElement;if(e.shiftKey){if(i===s||i===t||!t.contains(i)){e.preventDefault();o.focus()}}else{if(i===o||!t.contains(i)){e.preventDefault();s.focus()}}};document.addEventListener("keydown",this.escapeHandler);document.addEventListener("keydown",this.tabHandler)}teardownListeners(){if(this.escapeHandler){document.removeEventListener("keydown",this.escapeHandler);this.escapeHandler=null}if(this.tabHandler){document.removeEventListener("keydown",this.tabHandler);this.tabHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.dsClose.emit();this.open=false}handleBackdropMouseDown(e){if(e.target===e.currentTarget)this.close()}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return n[this.modalWidth]}return this.modalWidth}render(){const e=!this.shouldRender&&!this.closing;return s(o,{key:"7a43e148a0bb8395a2f1ef301b6eeca2933da1a3",style:{display:"contents"}},s("div",{key:"07c9e6b8238fa11e4569d994dbecb988490ffba7",class:{"modal-backdrop":true,"modal-backdrop--closing":this.closing,"modal-backdrop--hidden":e},onMouseDown:e=>this.handleBackdropMouseDown(e),style:{position:"fixed",inset:"0",zIndex:"9999",display:e?"none":"flex",alignItems:"center",justifyContent:"center",padding:"var(--dimension-space-200)"}},s("div",{key:"afaf56766355ea95d17edf68d608749383ebde97",class:{"modal-dialog":true,"modal-dialog--closing":this.closing},role:"dialog","aria-modal":"true","aria-labelledby":this.titleId,"aria-describedby":this.subtitle?this.subtitleId:undefined,tabIndex:-1,style:{width:`min(${this.resolvedWidth}, calc(100vw - 32px))`}},s("div",{key:"7653fc36a2e4386c5de987f32221002a13d65b35",class:"modal-header"},s("h2",{key:"97f14308a035989d05d0959495f37cf86890c85a",id:this.titleId,class:"text-title-small modal-title"},this.heading),this.subtitle&&s("div",{key:"54752d6ae2f323269eeb7c5c5027b0db6432914b",id:this.subtitleId,class:"modal-subtitle text-body-medium"},this.subtitle)),s("div",{key:"4359549b810c27b755293dd8b80224ddf70ed402",class:"modal-body"},s("slot",{key:"9c59d6973b1e1e30ed3296026ac0f4175c1b40a1"})),s("div",{key:"db29f6da90175dc9737525d0889ea4b2df30d2ab",class:"modal-footer"},s("slot",{key:"37d9cf482ab3f689c62195d80c649fa3a0e57c65",name:"footer"})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return d()}},[262,"ds-modal",{open:[1028],heading:[1],subtitle:[1],modalWidth:[1,"modal-width"],shouldRender:[32],closing:[32]},undefined,{open:[{onOpenChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const e=["ds-modal"];e.forEach((e=>{switch(e){case"ds-modal":if(!customElements.get(i(e))){customElements.define(i(e),m)}break}}))}h();const f=m;const u=h;export{f as DsModal,u as defineCustomElement};
+import{p as e,H as t,c as a,h as s,a as o,t as i}from"./index.js";const d=()=>`.modal-backdrop.sc-ds-modal{background-color:var(--color-background-shade);backdrop-filter:blur(var(--effect-blur-sm));-webkit-backdrop-filter:blur(var(--effect-blur-sm));animation:modalBackdropIn var(--effect-motion-short-2) forwards;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal{animation:modalBackdropOut var(--effect-motion-short-3) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}.modal-dialog.sc-ds-modal{display:flex;flex-direction:column;max-height:calc(100vh - 32px);overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-275, 22px);box-shadow:var(--effect-elevation-elevated-floating);animation:modalDialogIn var(--effect-motion-short-2) forwards;outline:none;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal .modal-dialog.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-3) forwards}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}.modal-header.sc-ds-modal{padding:var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100);flex-shrink:0}.modal-title.sc-ds-modal{margin:0}.modal-subtitle.sc-ds-modal{margin-top:var(--dimension-space-100);color:var(--color-foreground-secondary);text-wrap:balance}.modal-body.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200);overflow-y:auto;flex:1}.modal-footer.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200);flex-shrink:0}.modal-footer.sc-ds-modal:empty{display:none}`;const n={sm:"var(--dimension-modal-width-sm, 400px)",md:"var(--dimension-modal-width-md, 560px)",lg:"var(--dimension-modal-width-lg, 720px)"};const l=220;const r=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let c=0;const m=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=a(this,"dsClose");this.open=false;this.modalWidth="md";this.shouldRender=false;this.closing=false;this.instanceId=++c;this.titleId=`ds-modal-title-${c}`;this.subtitleId=`ds-modal-subtitle-${c}`;this.previousFocus=null;this.escapeHandler=null;this.tabHandler=null;this.closeTimer=null}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.teardownListeners()}onOpenChange(e){if(e){this.shouldRender=true;this.closing=false;this.previousFocus=document.activeElement;requestAnimationFrame((()=>{this.focusFirst();this.setupListeners()}))}else if(this.shouldRender){this.closing=true;this.teardownListeners();this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null;this.previousFocus?.focus?.();this.previousFocus=null}),l)}}focusFirst(){const e=this.el.querySelector(".modal-dialog");if(!e)return;const t=this.getFocusables(e);(t[0]??e).focus()}getFocusables(e){return Array.from(e.querySelectorAll(r)).filter((e=>!e.hasAttribute("disabled")&&e.getAttribute("aria-hidden")!=="true"))}setupListeners(){this.escapeHandler=e=>{if(e.key==="Escape"){e.preventDefault();this.close()}};this.tabHandler=e=>{if(e.key!=="Tab")return;const t=this.el.querySelector(".modal-dialog");if(!t)return;const a=this.getFocusables(t);if(!a.length){e.preventDefault();t.focus();return}const s=a[0];const o=a[a.length-1];const i=document.activeElement;if(e.shiftKey){if(i===s||i===t||!t.contains(i)){e.preventDefault();o.focus()}}else{if(i===o||!t.contains(i)){e.preventDefault();s.focus()}}};document.addEventListener("keydown",this.escapeHandler);document.addEventListener("keydown",this.tabHandler)}teardownListeners(){if(this.escapeHandler){document.removeEventListener("keydown",this.escapeHandler);this.escapeHandler=null}if(this.tabHandler){document.removeEventListener("keydown",this.tabHandler);this.tabHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.dsClose.emit();this.open=false}handleBackdropMouseDown(e){if(e.target===e.currentTarget)this.close()}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return n[this.modalWidth]}return this.modalWidth}render(){const e=!this.shouldRender&&!this.closing;return s(o,{key:"9f693fdc7af54b9107c566964034ea0c71042965",style:{display:"contents"}},s("div",{key:"f8a8789874c121481f32ca47e4194ff48e125f87",class:{"modal-backdrop":true,"modal-backdrop--closing":this.closing,"modal-backdrop--hidden":e},onMouseDown:e=>this.handleBackdropMouseDown(e),style:{position:"fixed",inset:"0",zIndex:"9999",display:e?"none":"flex",alignItems:"center",justifyContent:"center",padding:"var(--dimension-space-200)"}},s("div",{key:"324c147ee62eb5a2c94abc920ea39bb8c453df75",class:{"modal-dialog":true,"modal-dialog--closing":this.closing},role:"dialog","aria-modal":"true","aria-labelledby":this.titleId,"aria-describedby":this.subtitle?this.subtitleId:undefined,tabIndex:-1,style:{width:`min(${this.resolvedWidth}, calc(100vw - 32px))`}},s("div",{key:"750c0e090075a96feb02cccbabbf1537e8c5cc87",class:"modal-header"},s("h2",{key:"18266dc9cb5fb5ada2967dc20dff8f6f05beef9b",id:this.titleId,class:"text-title-small modal-title"},this.heading),this.subtitle&&s("div",{key:"a3a0ecbc294f42a1c55d197239f3136516708ef3",id:this.subtitleId,class:"modal-subtitle text-body-medium"},this.subtitle)),s("div",{key:"0acefd1f93a24a9c2c6809d35e501ece045d0703",class:"modal-body"},s("slot",{key:"cd7f65a4ce4d5b9aca6ef1002127dd79e7d72296"})),s("div",{key:"4c7b4413a54c480108394afac976c02fca43bc54",class:"modal-footer"},s("slot",{key:"07aeff1170220c6227764dba7b585e06e1752bed",name:"footer"})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return d()}},[262,"ds-modal",{open:[1028],heading:[1],subtitle:[1],modalWidth:[1,"modal-width"],shouldRender:[32],closing:[32]},undefined,{open:[{onOpenChange:0}]}]);function f(){if(typeof customElements==="undefined"){return}const e=["ds-modal"];e.forEach((e=>{switch(e){case"ds-modal":if(!customElements.get(i(e))){customElements.define(i(e),m)}break}}))}f();const h=m;const u=f;export{h as DsModal,u as defineCustomElement};
 //# sourceMappingURL=ds-modal.js.map