@ds-mo/ui 4.0.0 → 4.1.1

package/dist/components/ds-chart-legend.js.map

@@ -1 +1 @@
-{"version":3,"names":["chartLegendCss","DIMMED_OPACITY","ChartLegend","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","direction","showPercentage","activeLabel","hoveredLabel","handleClick","item","originalEvent","dsItemClick","emit","handleHover","label","dsItemHover","render","total","reduce","sum","value","highlightLabel","h","Host","key","class","onMouseLeave","map","i","isDimmed","RowTag","href","style","opacity","String","onClick","e","undefined","onMouseEnter","onFocus","onBlur","backgroundColor","color","categoryColor","as","variant","lineTruncation","title","formatCompactNumber","locale","toFixed"],"sources":["src/wc/components/ChartLegend/ChartLegend.css?tag=ds-chart-legend&encapsulation=scoped","src/wc/components/ChartLegend/ChartLegend.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n\n:host {\n  display: block;\n  font-family: var(--typography-font-family);\n  user-select: none;\n}\n\n.chart-legend__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* Non-visual wrapper — the real box is .chart-legend__item so it can be hovered/clicked\n   as a whole row while its children still align to the list's shared grid columns. */\n.chart-legend__list-item {\n  display: contents;\n}\n\n:host(.chart-legend--vertical) .chart-legend__list {\n  display: grid;\n  grid-template-columns: auto minmax(50%, 1fr) auto auto;\n  row-gap: var(--dimension-space-050);\n}\n\n:host(.chart-legend--vertical) .chart-legend__item {\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: subgrid;\n}\n\n:host(.chart-legend--horizontal) .chart-legend__list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--dimension-space-200);\n}\n\n:host(.chart-legend--horizontal) .chart-legend__item {\n  display: flex;\n}\n\n/*\n * Density: md control recipe (height / pad / radius / label inset).\n * Hover/press: `.ds-interaction-fill` (token overlay on ::after).\n */\n.chart-legend__item {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  align-items: center;\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  text-decoration: none;\n  color: inherit;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n.chart-legend__item--interactive {\n  cursor: pointer;\n}\n\n/* Raise row content above interaction fills (positive z-index on util layers). */\n.chart-legend__item > * {\n  position: relative;\n  z-index: 2;\n}\n\n.chart-legend__swatch-box {\n  width: var(--dimension-size-250);\n  height: var(--dimension-size-250);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-right: var(--dimension-space-075);\n}\n\n.chart-legend__swatch {\n  width: var(--dimension-space-150);\n  height: var(--dimension-space-150);\n  border-radius: var(--dimension-radius-025);\n  flex-shrink: 0;\n}\n\n.chart-legend__label {\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  margin-right: var(--dimension-space-200);\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.chart-legend__percentage {\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  text-align: right;\n}\n\n.chart-legend__value {\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  margin-right: var(--dimension-space-200);\n  text-align: right;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatCompactNumber } from '../../utils';\nimport type { ChartLegendItem } from '../../utils/chart-types';\n\nexport type ChartLegendDirection = 'vertical' | 'horizontal';\n\nconst DIMMED_OPACITY = 0.25;\n\n/**\n * Base legend for `ds-chart-*` components. Webapp's Overview widgets each style\n * legends differently (list w/ values, compact chips, bare swatches, external\n * stat callouts) — this covers the common \"swatch + label + optional value\" case.\n * Consumers who need a different treatment skip this component entirely and\n * render their own markup against the same `ChartDatum[]` data.\n */\n@Component({\n  tag: 'ds-chart-legend',\n  styleUrl: 'ChartLegend.css',\n  scoped: true,\n})\nexport class ChartLegend {\n  @Prop() locale: string | undefined;\n  /** Legend entries. Set as a JS property (not an HTML attribute). */\n  @Prop() items: ChartLegendItem[] = [];\n  @Prop() direction: ChartLegendDirection = 'vertical';\n  /** Show each item's share of the total (of items with a `value`) alongside its count. */\n  @Prop() showPercentage: boolean = true;\n  /**\n   * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n   * chart's `dsSliceHover` event to keep chart and legend hover in sync. Only dims the other\n   * rows' opacity (like a chart dimming its other slices) — it never shows the hover-fill,\n   * since that's reserved for a real pointer/keyboard interaction on this row.\n   */\n  @Prop() activeLabel: string | null = null;\n\n  /** Own pointer/focus hover, kept separate from `activeLabel` so the hover-fill (a \"you can\n   * click here\" affordance) never shows just because an external row was synced in. */\n  @State() private hoveredLabel: string | null = null;\n\n  /** Fires on row hover/focus with the item, or `null` on leave/blur. */\n  @Event() dsItemHover!: EventEmitter<ChartLegendItem | null>;\n  /** Fires when a deep-linkable row (`item.href` set) is activated. */\n  @Event() dsItemClick!: EventEmitter<{ item: ChartLegendItem; originalEvent: MouseEvent }>;\n\n  private handleHover(item: ChartLegendItem | null) {\n    this.hoveredLabel = item?.label ?? null;\n    this.dsItemHover.emit(item);\n  }\n\n  private handleClick = (item: ChartLegendItem, originalEvent: MouseEvent) => {\n    this.dsItemClick.emit({ item, originalEvent });\n  };\n\n  render() {\n    const total = this.items.reduce((sum, item) => sum + (item.value ?? 0), 0);\n    // Highlight/dim from either this component's own hover or an externally-synced label\n    // (e.g. a sibling ds-chart-donut slice) — same mechanism ds-chart-donut uses for its slices.\n    const highlightLabel = this.activeLabel ?? this.hoveredLabel;\n\n    return (\n      <Host class={{ 'chart-legend': true, [`chart-legend--${this.direction}`]: true }}>\n        {/* mouseleave lives on the list, not each row — the row-gap between items is still\n            inside the list's box, so crossing it while moving between rows never fires this.\n            Only actually leaving the whole list does, and that clears with no delay. */}\n        <ul class=\"chart-legend__list\" onMouseLeave={() => this.handleHover(null)}>\n          {this.items.map((item, i) => {\n            const isDimmed = highlightLabel != null && item.label !== highlightLabel;\n            const RowTag = item.href ? 'a' : 'div';\n\n            return (\n              <li class=\"chart-legend__list-item\" key={item.label}>\n                <RowTag\n                  class={{\n                    'chart-legend__item': true,\n                    'chart-legend__item--interactive': !!item.href,\n                    'ds-control--md': true,\n                    'ds-interaction-fill': true,\n                    'ds-focus-ring-inset': !!item.href,\n                  }}\n                  style={{ opacity: isDimmed ? String(DIMMED_OPACITY) : '1' }}\n                  href={item.href}\n                  onClick={item.href ? (e: MouseEvent) => this.handleClick(item, e) : undefined}\n                  onMouseEnter={() => this.handleHover(item)}\n                  onFocus={() => this.handleHover(item)}\n                  onBlur={() => this.handleHover(null)}\n                >\n                  <span class=\"chart-legend__swatch-box\">\n                    <span class=\"chart-legend__swatch\" style={{ backgroundColor: item.color ?? categoryColor(i) }} />\n                  </span>\n                  <ds-text\n                    class=\"chart-legend__label\"\n                    as=\"span\"\n                    variant=\"text-body-medium\"\n                    color=\"secondary\"\n                    lineTruncation={1}\n                    title={item.label}\n                  >\n                    {item.label}\n                  </ds-text>\n                  {item.value != null && (\n                    <ds-text\n                      class=\"chart-legend__value\"\n                      as=\"span\"\n                      variant=\"text-body-medium\"\n                      color=\"primary\"\n                      lineTruncation={1}\n                      title={String(item.value)}\n                    >\n                      {formatCompactNumber(item.value, this.locale)}\n                    </ds-text>\n                  )}\n                  {item.value != null && this.showPercentage && (\n                    <ds-text class=\"chart-legend__percentage\" as=\"span\" variant=\"text-body-medium\" color=\"primary\">\n                      {(total ? (item.value / total) * 100 : 0).toFixed(1)}%\n                    </ds-text>\n                  )}\n                </RowTag>\n              </li>\n            );\n          })}\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8KAAA,MAAMA,EAAiB,IAAM,k1QCO7B,MAAMC,EAAiB,I,MAcVC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,0HAQUC,KAAAC,MAA2B,GAC3BD,KAAAE,UAAkC,WAElCF,KAAAG,eAA0B,KAO1BH,KAAAI,YAA6B,KAIpBJ,KAAAK,aAA8B,KAYvCL,KAAAM,YAAc,CAACC,EAAuBC,KAC5CR,KAAKS,YAAYC,KAAK,CAAEH,OAAMC,iBAAgB,CA0EjD,CAhFS,WAAAG,CAAYJ,GAClBP,KAAKK,aAAeE,GAAMK,OAAS,KACnCZ,KAAKa,YAAYH,KAAKH,E,CAOxB,MAAAO,GACE,MAAMC,EAAQf,KAAKC,MAAMe,QAAO,CAACC,EAAKV,IAASU,GAAOV,EAAKW,OAAS,IAAI,GAGxE,MAAMC,EAAiBnB,KAAKI,aAAeJ,KAAKK,aAEhD,OACEe,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAE,eAAgB,KAAM,CAAC,iBAAiBvB,KAAKE,aAAc,OAIxEkB,EAAA,MAAAE,IAAA,2CAAIC,MAAM,qBAAqBC,aAAc,IAAMxB,KAAKW,YAAY,OACjEX,KAAKC,MAAMwB,KAAI,CAAClB,EAAMmB,KACrB,MAAMC,EAAWR,GAAkB,MAAQZ,EAAKK,QAAUO,EAC1D,MAAMS,EAASrB,EAAKsB,KAAO,IAAM,MAEjC,OACET,EAAA,MAAIG,MAAM,0BAA0BD,IAAKf,EAAKK,OAC5CQ,EAACQ,EAAM,CACLL,MAAO,CACL,qBAAsB,KACtB,oCAAqChB,EAAKsB,KAC1C,iBAAkB,KAClB,sBAAuB,KACvB,wBAAyBtB,EAAKsB,MAEhCC,MAAO,CAAEC,QAASJ,EAAWK,OAAOtC,GAAkB,KACtDmC,KAAMtB,EAAKsB,KACXI,QAAS1B,EAAKsB,KAAQK,GAAkBlC,KAAKM,YAAYC,EAAM2B,GAAKC,UACpEC,aAAc,IAAMpC,KAAKW,YAAYJ,GACrC8B,QAAS,IAAMrC,KAAKW,YAAYJ,GAChC+B,OAAQ,IAAMtC,KAAKW,YAAY,OAE/BS,EAAA,QAAMG,MAAM,4BACVH,EAAA,QAAMG,MAAM,uBAAuBO,MAAO,CAAES,gBAAiBhC,EAAKiC,OAASC,EAAcf,OAE3FN,EAAA,WACEG,MAAM,sBACNmB,GAAG,OACHC,QAAQ,mBACRH,MAAM,YACNI,eAAgB,EAChBC,MAAOtC,EAAKK,OAEXL,EAAKK,OAEPL,EAAKW,OAAS,MACbE,EAAA,WACEG,MAAM,sBACNmB,GAAG,OACHC,QAAQ,mBACRH,MAAM,UACNI,eAAgB,EAChBC,MAAOb,OAAOzB,EAAKW,QAElB4B,EAAoBvC,EAAKW,MAAOlB,KAAK+C,SAGzCxC,EAAKW,OAAS,MAAQlB,KAAKG,gBAC1BiB,EAAA,WAASG,MAAM,2BAA2BmB,GAAG,OAAOC,QAAQ,mBAAmBH,MAAM,YACjFzB,EAASR,EAAKW,MAAQH,EAAS,IAAM,GAAGiC,QAAQ,GAAE,MAIvD,K","ignoreList":[]}
+{"version":3,"names":["chartLegendCss","DIMMED_OPACITY","ChartLegend","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","direction","showPercentage","activeLabel","hoveredLabel","handleClick","item","originalEvent","dsItemClick","emit","handleHover","label","dsItemHover","render","total","reduce","sum","value","highlightLabel","h","Host","key","class","onMouseLeave","map","i","isDimmed","RowTag","href","style","opacity","String","onClick","e","undefined","onMouseEnter","onFocus","onBlur","backgroundColor","color","categoryColor","as","variant","lineTruncation","title","formatCompactNumber","locale","toFixed"],"sources":["src/wc/components/ChartLegend/ChartLegend.css?tag=ds-chart-legend&encapsulation=scoped","src/wc/components/ChartLegend/ChartLegend.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n\n:host {\n  display: block;\n  font-family: var(--typography-font-family);\n  user-select: none;\n}\n\n.chart-legend__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* Non-visual wrapper — the real box is .chart-legend__item so it can be hovered/clicked\n   as a whole row while its children still align to the list's shared grid columns. */\n.chart-legend__list-item {\n  display: contents;\n}\n\n:host(.chart-legend--vertical) .chart-legend__list {\n  display: grid;\n  grid-template-columns: auto minmax(50%, 1fr) auto auto;\n  row-gap: var(--dimension-space-050);\n}\n\n:host(.chart-legend--vertical) .chart-legend__item {\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: subgrid;\n}\n\n:host(.chart-legend--horizontal) .chart-legend__list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--dimension-space-200);\n}\n\n:host(.chart-legend--horizontal) .chart-legend__item {\n  display: flex;\n}\n\n/*\n * Density: md control recipe (height / pad / radius / label inset).\n * Hover/press: `.ds-interaction-fill` (token overlay on ::after).\n */\n.chart-legend__item {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  align-items: center;\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  text-decoration: none;\n  color: inherit;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n.chart-legend__item--interactive {\n  cursor: pointer;\n}\n\n/* Raise row content above interaction fills (positive z-index on util layers). */\n.chart-legend__item > * {\n  position: relative;\n  z-index: 2;\n}\n\n.chart-legend__swatch-box {\n  width: var(--dimension-size-250);\n  height: var(--dimension-size-250);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-right: var(--dimension-space-075);\n}\n\n.chart-legend__swatch {\n  width: var(--dimension-space-150);\n  height: var(--dimension-space-150);\n  border-radius: var(--dimension-radius-025);\n  flex-shrink: 0;\n}\n\n.chart-legend__label {\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  margin-right: var(--dimension-space-200);\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.chart-legend__percentage {\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  text-align: right;\n}\n\n.chart-legend__value {\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  margin-right: var(--dimension-space-200);\n  text-align: right;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatCompactNumber } from '../../utils';\nimport type { ChartLegendItem } from '../../utils/chart-types';\n\nexport type ChartLegendDirection = 'vertical' | 'horizontal';\n\nconst DIMMED_OPACITY = 0.25;\n\n/**\n * Base legend for `ds-chart-*` components. Webapp's Overview widgets each style\n * legends differently (list w/ values, compact chips, bare swatches, external\n * stat callouts) — this covers the common \"swatch + label + optional value\" case.\n * Consumers who need a different treatment skip this component entirely and\n * render their own markup against the same `ChartDatum[]` data.\n */\n@Component({\n  tag: 'ds-chart-legend',\n  styleUrl: 'ChartLegend.css',\n  scoped: true,\n})\nexport class ChartLegend {\n  @Prop() locale: string | undefined;\n  /** Legend entries. Set as a JS property (not an HTML attribute). */\n  @Prop() items: ChartLegendItem[] = [];\n  @Prop() direction: ChartLegendDirection = 'vertical';\n  /** Show each item's share of the total (of items with a `value`) alongside its count. */\n  @Prop() showPercentage: boolean = true;\n  /**\n   * Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n   * chart's `dsSliceHover` event to keep chart and legend hover in sync. Only dims the other\n   * rows' opacity (like a chart dimming its other slices) — it never shows the hover-fill,\n   * since that's reserved for a real pointer/keyboard interaction on this row.\n   */\n  @Prop() activeLabel: string | null = null;\n\n  /** Own pointer/focus hover, kept separate from `activeLabel` so the hover-fill (a \"you can\n   * click here\" affordance) never shows just because an external row was synced in. */\n  @State() private hoveredLabel: string | null = null;\n\n  /** Fires on row hover/focus with the item, or `null` on leave/blur. */\n  @Event() dsItemHover!: EventEmitter<ChartLegendItem | null>;\n  /** Fires when a deep-linkable row (`item.href` set) is activated. */\n  @Event() dsItemClick!: EventEmitter<{ item: ChartLegendItem; originalEvent: MouseEvent }>;\n\n  private handleHover(item: ChartLegendItem | null) {\n    this.hoveredLabel = item?.label ?? null;\n    this.dsItemHover.emit(item);\n  }\n\n  private handleClick = (item: ChartLegendItem, originalEvent: MouseEvent) => {\n    this.dsItemClick.emit({ item, originalEvent });\n  };\n\n  render() {\n    const total = this.items.reduce((sum, item) => sum + (item.value ?? 0), 0);\n    // Highlight/dim from either this component's own hover or an externally-synced label\n    // (e.g. a sibling ds-chart-donut slice) — same mechanism ds-chart-donut uses for its slices.\n    const highlightLabel = this.activeLabel ?? this.hoveredLabel;\n\n    return (\n      <Host class={{ 'chart-legend': true, [`chart-legend--${this.direction}`]: true }}>\n        {/* mouseleave lives on the list, not each row — the row-gap between items is still\n            inside the list's box, so crossing it while moving between rows never fires this.\n            Only actually leaving the whole list does, and that clears with no delay. */}\n        <ul class=\"chart-legend__list\" onMouseLeave={() => this.handleHover(null)}>\n          {this.items.map((item, i) => {\n            const isDimmed = highlightLabel != null && item.label !== highlightLabel;\n            const RowTag = item.href ? 'a' : 'div';\n\n            return (\n              <li class=\"chart-legend__list-item\" key={item.label}>\n                <RowTag\n                  class={{\n                    'chart-legend__item': true,\n                    'chart-legend__item--interactive': !!item.href,\n                    'ds-control--md': true,\n                    'ds-interaction-fill': true,\n                    'ds-focus-ring-inset': !!item.href,\n                  }}\n                  style={{ opacity: isDimmed ? String(DIMMED_OPACITY) : '1' }}\n                  href={item.href}\n                  onClick={item.href ? (e: MouseEvent) => this.handleClick(item, e) : undefined}\n                  onMouseEnter={() => this.handleHover(item)}\n                  onFocus={() => this.handleHover(item)}\n                  onBlur={() => this.handleHover(null)}\n                >\n                  <span class=\"chart-legend__swatch-box\">\n                    <span class=\"chart-legend__swatch\" style={{ backgroundColor: item.color ?? categoryColor(i) }} />\n                  </span>\n                  <ds-text\n                    class=\"chart-legend__label\"\n                    as=\"span\"\n                    variant=\"text-body-medium\"\n                    color=\"secondary\"\n                    lineTruncation={1}\n                    title={item.label}\n                  >\n                    {item.label}\n                  </ds-text>\n                  {item.value != null && (\n                    <ds-text\n                      class=\"chart-legend__value\"\n                      as=\"span\"\n                      variant=\"text-body-medium\"\n                      color=\"primary\"\n                      lineTruncation={1}\n                      title={String(item.value)}\n                    >\n                      {formatCompactNumber(item.value, this.locale)}\n                    </ds-text>\n                  )}\n                  {item.value != null && this.showPercentage && (\n                    <ds-text class=\"chart-legend__percentage\" as=\"span\" variant=\"text-body-medium\" color=\"primary\">\n                      {(total ? (item.value / total) * 100 : 0).toFixed(1)}%\n                    </ds-text>\n                  )}\n                </RowTag>\n              </li>\n            );\n          })}\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8KAAA,MAAMA,EAAiB,IAAM,yzQCO7B,MAAMC,EAAiB,I,MAcVC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,0HAQUC,KAAAC,MAA2B,GAC3BD,KAAAE,UAAkC,WAElCF,KAAAG,eAA0B,KAO1BH,KAAAI,YAA6B,KAIpBJ,KAAAK,aAA8B,KAYvCL,KAAAM,YAAc,CAACC,EAAuBC,KAC5CR,KAAKS,YAAYC,KAAK,CAAEH,OAAMC,iBAAgB,CA0EjD,CAhFS,WAAAG,CAAYJ,GAClBP,KAAKK,aAAeE,GAAMK,OAAS,KACnCZ,KAAKa,YAAYH,KAAKH,E,CAOxB,MAAAO,GACE,MAAMC,EAAQf,KAAKC,MAAMe,QAAO,CAACC,EAAKV,IAASU,GAAOV,EAAKW,OAAS,IAAI,GAGxE,MAAMC,EAAiBnB,KAAKI,aAAeJ,KAAKK,aAEhD,OACEe,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAE,eAAgB,KAAM,CAAC,iBAAiBvB,KAAKE,aAAc,OAIxEkB,EAAA,MAAAE,IAAA,2CAAIC,MAAM,qBAAqBC,aAAc,IAAMxB,KAAKW,YAAY,OACjEX,KAAKC,MAAMwB,KAAI,CAAClB,EAAMmB,KACrB,MAAMC,EAAWR,GAAkB,MAAQZ,EAAKK,QAAUO,EAC1D,MAAMS,EAASrB,EAAKsB,KAAO,IAAM,MAEjC,OACET,EAAA,MAAIG,MAAM,0BAA0BD,IAAKf,EAAKK,OAC5CQ,EAACQ,EAAM,CACLL,MAAO,CACL,qBAAsB,KACtB,oCAAqChB,EAAKsB,KAC1C,iBAAkB,KAClB,sBAAuB,KACvB,wBAAyBtB,EAAKsB,MAEhCC,MAAO,CAAEC,QAASJ,EAAWK,OAAOtC,GAAkB,KACtDmC,KAAMtB,EAAKsB,KACXI,QAAS1B,EAAKsB,KAAQK,GAAkBlC,KAAKM,YAAYC,EAAM2B,GAAKC,UACpEC,aAAc,IAAMpC,KAAKW,YAAYJ,GACrC8B,QAAS,IAAMrC,KAAKW,YAAYJ,GAChC+B,OAAQ,IAAMtC,KAAKW,YAAY,OAE/BS,EAAA,QAAMG,MAAM,4BACVH,EAAA,QAAMG,MAAM,uBAAuBO,MAAO,CAAES,gBAAiBhC,EAAKiC,OAASC,EAAcf,OAE3FN,EAAA,WACEG,MAAM,sBACNmB,GAAG,OACHC,QAAQ,mBACRH,MAAM,YACNI,eAAgB,EAChBC,MAAOtC,EAAKK,OAEXL,EAAKK,OAEPL,EAAKW,OAAS,MACbE,EAAA,WACEG,MAAM,sBACNmB,GAAG,OACHC,QAAQ,mBACRH,MAAM,UACNI,eAAgB,EAChBC,MAAOb,OAAOzB,EAAKW,QAElB4B,EAAoBvC,EAAKW,MAAOlB,KAAK+C,SAGzCxC,EAAKW,OAAS,MAAQlB,KAAKG,gBAC1BiB,EAAA,WAASG,MAAM,2BAA2BmB,GAAG,OAAOC,QAAQ,mBAAmBH,MAAM,YACjFzB,EAASR,EAAKW,MAAQH,EAAS,IAAM,GAAGiC,QAAQ,GAAE,MAIvD,K","ignoreList":[]}

package/dist/components/ds-checkbox.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as i,h as t,a as o,t as r}from"./index.js";import{d as c}from"./p-BOQRM49Q.js";const a=()=>`.ds-control-inactive.sc-ds-checkbox-h,.ds-control-inactive.sc-ds-checkbox{opacity:0.25;pointer-events:none;cursor:not-allowed}.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)}.box.sc-ds-checkbox{width:var(--dimension-iconography-md);height:var(--dimension-iconography-md);flex-shrink:0;border:var(--dimension-stroke-width-018) 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:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-bold)}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0}`;let n=0;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.internals=this.attachInternals();this.labelId=`ds-checkbox-label-${++n}`;this.checked=false;this.value="on";this.disabled=false;this.required=false;this.requiredMessage="This field is required.";this.indeterminate=false;this.isInactive=false;this.initialChecked=false;this.formDisabled=false;this.handleActivate=()=>{if(this.isInactive||this.disabled||this.formDisabled)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=e=>{if(e.key===" "||e.key==="Enter"){e.preventDefault();this.handleActivate()}}}componentWillLoad(){this.initialChecked=this.checked;this.syncFormValue()}syncFormValue(){const e=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(!e&&this.checked?this.value:null);const s=this.required&&!e&&!this.checked;this.internals.setValidity(s?{valueMissing:true}:{},s?this.requiredMessage:"")}formDisabledCallback(e){this.formDisabled=e;this.syncFormValue()}formResetCallback(){this.checked=this.initialChecked}render(){const e=this.isInactive||this.disabled||this.formDisabled;const s=this.checked||this.indeterminate;return t(o,{key:"c1a20b2c0b323b3684def781222d605ab19dfb80",role:"checkbox","aria-checked":this.indeterminate?"mixed":String(this.checked),"aria-disabled":e?"true":undefined,"aria-labelledby":this.labelId,tabIndex:e?-1:0,class:{checkbox:true,"ds-control-inactive":e},onClick:this.handleActivate,onKeyDown:this.handleKeyDown},t("span",{key:"ee36f50674ad3d5a6c3571de3f71a4d3904a4584",class:{box:true,"box--marked":s}},s&&t("span",{key:"c7bfb3e6b7840e538ac2a96cdc19160026535035",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),t("ds-text",{key:"ac734a431f7cf09ef7e0fd1c5e5a1150752af78a",class:"checkbox__label",as:"span",variant:"text-body-medium",textId:this.labelId},this.label))}static get formAssociated(){return true}static get watchers(){return{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return a()}},[66,"ds-checkbox",{label:[1],checked:[1028],name:[513],value:[1],disabled:[516],required:[516],requiredMessage:[1,"required-message"],indeterminate:[4],isInactive:[4,"is-inactive"],formDisabled:[32]},undefined,{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function h(){if(typeof customElements==="undefined"){return}const e=["ds-checkbox","ds-text"];e.forEach((e=>{switch(e){case"ds-checkbox":if(!customElements.get(r(e))){customElements.define(r(e),d)}break;case"ds-text":if(!customElements.get(r(e))){c()}break}}))}h();const l=d;const b=h;export{l as DsCheckbox,b as defineCustomElement};
+import{p as e,H as s,c as i,h as t,a as o,t as r}from"./index.js";import{d as c}from"./p-emacH2W5.js";const a=()=>`.ds-control-inactive.sc-ds-checkbox-h,.ds-control-inactive.sc-ds-checkbox{opacity:0.25;pointer-events:none;cursor:not-allowed}.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)}.box.sc-ds-checkbox{width:var(--dimension-iconography-md);height:var(--dimension-iconography-md);flex-shrink:0;border:var(--dimension-stroke-width-018) 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:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-bold)}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0}`;let n=0;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.internals=this.attachInternals();this.labelId=`ds-checkbox-label-${++n}`;this.checked=false;this.value="on";this.disabled=false;this.required=false;this.requiredMessage="This field is required.";this.indeterminate=false;this.isInactive=false;this.initialChecked=false;this.formDisabled=false;this.handleActivate=()=>{if(this.isInactive||this.disabled||this.formDisabled)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=e=>{if(e.key===" "||e.key==="Enter"){e.preventDefault();this.handleActivate()}}}componentWillLoad(){this.initialChecked=this.checked;this.syncFormValue()}syncFormValue(){const e=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(!e&&this.checked?this.value:null);const s=this.required&&!e&&!this.checked;this.internals.setValidity(s?{valueMissing:true}:{},s?this.requiredMessage:"")}formDisabledCallback(e){this.formDisabled=e;this.syncFormValue()}formResetCallback(){this.checked=this.initialChecked}render(){const e=this.isInactive||this.disabled||this.formDisabled;const s=this.checked||this.indeterminate;return t(o,{key:"c1a20b2c0b323b3684def781222d605ab19dfb80",role:"checkbox","aria-checked":this.indeterminate?"mixed":String(this.checked),"aria-disabled":e?"true":undefined,"aria-labelledby":this.labelId,tabIndex:e?-1:0,class:{checkbox:true,"ds-control-inactive":e},onClick:this.handleActivate,onKeyDown:this.handleKeyDown},t("span",{key:"ee36f50674ad3d5a6c3571de3f71a4d3904a4584",class:{box:true,"box--marked":s}},s&&t("span",{key:"c7bfb3e6b7840e538ac2a96cdc19160026535035",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),t("ds-text",{key:"ac734a431f7cf09ef7e0fd1c5e5a1150752af78a",class:"checkbox__label",as:"span",variant:"text-body-medium",textId:this.labelId},this.label))}static get formAssociated(){return true}static get watchers(){return{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return a()}},[66,"ds-checkbox",{label:[1],checked:[1028],name:[513],value:[1],disabled:[516],required:[516],requiredMessage:[1,"required-message"],indeterminate:[4],isInactive:[4,"is-inactive"],formDisabled:[32]},undefined,{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function h(){if(typeof customElements==="undefined"){return}const e=["ds-checkbox","ds-text"];e.forEach((e=>{switch(e){case"ds-checkbox":if(!customElements.get(r(e))){customElements.define(r(e),d)}break;case"ds-text":if(!customElements.get(r(e))){c()}break}}))}h();const l=d;const b=h;export{l as DsCheckbox,b as defineCustomElement};
 //# sourceMappingURL=ds-checkbox.js.map

package/dist/components/ds-chip.js

@@ -1,2 +1,2 @@
-import{p as o,H as r,c as n,h as i,a as c,t}from"./index.js";import{d as a}from"./p-9Qu1ls2y.js";import{d as s}from"./p-BOQRM49Q.js";import{C as e}from"./p-Cx-ywr1e.js";const d=()=>`.ds-control--md.sc-ds-chip-h,.ds-control--md.sc-ds-chip{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-chip-h,.ds-control--sm.sc-ds-chip{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-chip-h,.ds-control--xs.sc-ds-chip{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-interaction-fill.sc-ds-chip-h,.ds-interaction-fill.sc-ds-chip{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-chip-h::before,.ds-interaction-fill.sc-ds-chip::before,.ds-interaction-fill.sc-ds-chip-h::after,.ds-interaction-fill.sc-ds-chip::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-chip-h::before,.ds-interaction-fill.sc-ds-chip::before{z-index:1}.ds-interaction-fill.sc-ds-chip-h::after,.ds-interaction-fill.sc-ds-chip::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-chip-h,.ds-interaction-fill--bordered.sc-ds-chip{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-chip-h::before,.ds-interaction-fill--selected.sc-ds-chip::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chip-h,.ds-interaction-fill--selected.sc-ds-chip{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-chip-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chip:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-chip-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chip:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-chip-h>.ds-interaction-fill__content.sc-ds-chip,.ds-interaction-fill.sc-ds-chip>.ds-interaction-fill__content.sc-ds-chip,.ds-interaction-fill__content.sc-ds-chip{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-chip-h,.ds-interaction-fill--on-medium.sc-ds-chip{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-chip-h,.ds-interaction-fill--on-bold.sc-ds-chip{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-chip-h,.ds-interaction-fill--on-strong.sc-ds-chip{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-chip-h,.ds-interaction-fill--on-always-dark.sc-ds-chip{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-chip-h,.ds-interaction-fill--on-navigation.sc-ds-chip{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-chip-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-chip:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-chip{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-chip:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-chip:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-chip-h{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;color:var(--color-foreground-primary);position:relative;border-radius:var(--ds-control-radius, var(--dimension-radius-025));height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);user-select:none;-webkit-user-select:none}.tag--rounded.sc-ds-chip-h{border-radius:var(--dimension-radius-half)}.tag--intent-neutral.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.tag--intent-brand.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-brand);color:var(--color-foreground-medium-brand)}.tag--intent-ai.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.tag--intent-negative.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.tag--intent-warning.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.tag--intent-caution.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.tag--intent-positive.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.tag--intent-neutral.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-brand.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-ai.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-ai);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-negative.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-negative);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-warning.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-warning);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-caution.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-caution);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-positive.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-positive);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-neutral.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.tag--intent-brand.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-brand);color:var(--color-foreground-strong-brand)}.tag--intent-ai.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.tag--intent-negative.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.tag--intent-warning.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.tag--intent-caution.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.tag--intent-positive.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.tag--intent-neutral.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.tag--intent-brand.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.tag--intent-ai.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.tag--intent-negative.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.tag--intent-warning.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.tag--intent-caution.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag--intent-positive.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.tag--interactive.sc-ds-chip-h{cursor:pointer;outline:none}.tag__label.sc-ds-chip{position:relative;z-index:2;padding:0 var(--ds-control-label-inset);white-space:nowrap;flex-shrink:0;min-width:0}.tag__icon-slot.sc-ds-chip{display:contents}.tag__icon-slot.sc-ds-chip-s>*,.tag__icon-slot .sc-ds-chip-s>*{flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.tag__remove.sc-ds-chip{padding:0;margin:0;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;flex-shrink:0;position:relative;z-index:2;border-radius:var(--dimension-radius-half)}.tag__remove.sc-ds-chip::before{content:'';position:absolute;inset:var(--dimension-space-n025);border-radius:var(--dimension-radius-half);background-color:transparent;transition:var(--effect-transition-interaction-background-short-2);pointer-events:none}.tag__remove.sc-ds-chip:hover::before{background-color:var(--color-interaction-hover)}.tag__remove.sc-ds-chip:active::before{background-color:var(--color-interaction-pressed)}.tag--size-sm.sc-ds-chip-h .tag__remove.sc-ds-chip::before{inset:var(--dimension-space-n012)}.tag--size-xs.sc-ds-chip-h .tag__remove.sc-ds-chip::before{inset:0}.tag__remove-x.sc-ds-chip{display:inline-flex;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.tag__remove.sc-ds-chip-s>*,.tag__remove .sc-ds-chip-s>*{flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.ds-control-inactive.sc-ds-chip-h,.ds-control-inactive.sc-ds-chip{opacity:0.25;pointer-events:none;cursor:not-allowed}.chip--default.sc-ds-chip-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.chip--active.sc-ds-chip-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.chip--error.sc-ds-chip-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.chip--caution.sc-ds-chip-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}`;const l={md:"md",sm:"sm",xs:"xs"};const g=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsRemove=n(this,"dsRemove");this.state="default";this.size="md";this.rounded=false;this.removable=true;this.isInactive=false;this.removeLabel="Remove {label}";this.handleRemove=o=>{o.stopPropagation();if(this.isInactive)return;this.dsRemove.emit()}}render(){const o=e[this.size];const r=l[this.size];const n=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;return i(c,{key:"635a2e4c39d5a5cccfad38da1b3a8df570ad265c",class:{tag:true,chip:true,[`chip--${this.state}`]:true,[`tag--size-${this.size}`]:true,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","tag--rounded":this.rounded,"tag--removable":this.removable,"ds-interaction-fill":!this.isInactive&&this.removable,"ds-interaction-fill--on-medium":this.background==="medium","ds-interaction-fill--on-bold":this.background==="bold","ds-interaction-fill--on-strong":this.background==="strong","ds-interaction-fill--on-always-dark":this.background==="always-dark","ds-control-inactive":this.isInactive},style:n,"aria-disabled":this.isInactive?"true":undefined},i("ds-text",{key:"2be2299f1c524cd305c620c9ccc53e4344d3caef",class:"tag__label",as:"span",variant:o,color:"inherit"},this.label),this.removable&&i("button",{key:"5d26ef6abab99583e235423a7112827f8cbc1250",type:"button",class:"tag__remove ds-focus-ring-inset",onClick:this.handleRemove,"aria-label":this.removeLabel.replace("{label}",this.label),disabled:this.isInactive||undefined},i("slot",{key:"762116e6dc590fb664a94a419db9647876540aa1",name:"remove-icon"},i("ds-icon",{key:"d14c7c5654a7d16cae89d0ebd5539429c649b904",class:"tag__remove-x",name:"Cross",size:r,color:"inherit"}))))}static get style(){return d()}},[262,"ds-chip",{label:[1],state:[1],size:[1],rounded:[4],removable:[4],maxWidth:[8,"max-width"],isInactive:[4,"is-inactive"],background:[1],removeLabel:[1,"remove-label"]}]);function u(){if(typeof customElements==="undefined"){return}const o=["ds-chip","ds-icon","ds-text"];o.forEach((o=>{switch(o){case"ds-chip":if(!customElements.get(t(o))){customElements.define(t(o),g)}break;case"ds-icon":if(!customElements.get(t(o))){a()}break;case"ds-text":if(!customElements.get(t(o))){s()}break}}))}u();const h=g;const v=u;export{h as DsChip,v as defineCustomElement};
+import{p as o,H as r,c as n,h as i,a as c,t}from"./index.js";import{d as a}from"./p-9Qu1ls2y.js";import{d as s}from"./p-emacH2W5.js";import{C as e}from"./p-Cx-ywr1e.js";const d=()=>`.ds-control--md.sc-ds-chip-h,.ds-control--md.sc-ds-chip{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-chip-h,.ds-control--sm.sc-ds-chip{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-chip-h,.ds-control--xs.sc-ds-chip{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0;--ds-control-radius:var(--dimension-radius-025)}.ds-interaction-fill.sc-ds-chip-h,.ds-interaction-fill.sc-ds-chip{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-chip-h::before,.ds-interaction-fill.sc-ds-chip::before,.ds-interaction-fill.sc-ds-chip-h::after,.ds-interaction-fill.sc-ds-chip::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-chip-h::before,.ds-interaction-fill.sc-ds-chip::before{z-index:1}.ds-interaction-fill.sc-ds-chip-h::after,.ds-interaction-fill.sc-ds-chip::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-chip-h,.ds-interaction-fill--bordered.sc-ds-chip{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-chip-h::before,.ds-interaction-fill--selected.sc-ds-chip::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chip-h,.ds-interaction-fill--selected.sc-ds-chip{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-chip-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chip:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-chip-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chip:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-chip-h>.ds-interaction-fill__content.sc-ds-chip,.ds-interaction-fill.sc-ds-chip>.ds-interaction-fill__content.sc-ds-chip,.ds-interaction-fill__content.sc-ds-chip{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-chip-h,.ds-interaction-fill--on-medium.sc-ds-chip{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-chip-h,.ds-interaction-fill--on-bold.sc-ds-chip{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-chip-h,.ds-interaction-fill--on-strong.sc-ds-chip{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-chip-h,.ds-interaction-fill--on-always-dark.sc-ds-chip{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-chip-h,.ds-interaction-fill--on-navigation.sc-ds-chip{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-chip-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-chip:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-chip{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-chip:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-chip:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-chip-h{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;color:var(--color-foreground-primary);position:relative;border-radius:var(--ds-control-radius, var(--dimension-radius-025));height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);user-select:none;-webkit-user-select:none}.tag--rounded.sc-ds-chip-h{border-radius:var(--dimension-radius-half)}.tag--intent-neutral.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.tag--intent-brand.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-brand);color:var(--color-foreground-medium-brand)}.tag--intent-ai.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.tag--intent-negative.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.tag--intent-warning.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.tag--intent-caution.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.tag--intent-positive.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.tag--intent-neutral.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-brand.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-ai.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-ai);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-negative.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-negative);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-warning.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-warning);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-caution.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-caution);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-positive.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-positive);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-neutral.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.tag--intent-brand.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-brand);color:var(--color-foreground-strong-brand)}.tag--intent-ai.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.tag--intent-negative.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.tag--intent-warning.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.tag--intent-caution.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.tag--intent-positive.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.tag--intent-neutral.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.tag--intent-brand.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.tag--intent-ai.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.tag--intent-negative.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.tag--intent-warning.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.tag--intent-caution.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag--intent-positive.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.tag--interactive.sc-ds-chip-h{cursor:pointer;outline:none}.tag__label.sc-ds-chip{position:relative;z-index:2;padding:0 var(--ds-control-label-inset);white-space:nowrap;flex-shrink:0;min-width:0}.tag__icon-slot.sc-ds-chip{display:contents}.tag__icon-slot.sc-ds-chip-s>*,.tag__icon-slot .sc-ds-chip-s>*{flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.tag__remove.sc-ds-chip{padding:0;margin:0;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;flex-shrink:0;position:relative;z-index:2;border-radius:var(--dimension-radius-half)}.tag__remove.sc-ds-chip::before{content:'';position:absolute;inset:var(--dimension-space-n025);border-radius:var(--dimension-radius-half);background-color:transparent;transition:var(--effect-transition-interaction-background-short-2);pointer-events:none}.tag__remove.sc-ds-chip:hover::before{background-color:var(--color-interaction-hover)}.tag__remove.sc-ds-chip:active::before{background-color:var(--color-interaction-pressed)}.tag--size-sm.sc-ds-chip-h .tag__remove.sc-ds-chip::before{inset:var(--dimension-space-n012)}.tag--size-xs.sc-ds-chip-h .tag__remove.sc-ds-chip::before{inset:0}.tag__remove-x.sc-ds-chip{display:inline-flex;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.tag__remove.sc-ds-chip-s>*,.tag__remove .sc-ds-chip-s>*{flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.ds-control-inactive.sc-ds-chip-h,.ds-control-inactive.sc-ds-chip{opacity:0.25;pointer-events:none;cursor:not-allowed}.chip--default.sc-ds-chip-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.chip--active.sc-ds-chip-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.chip--error.sc-ds-chip-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.chip--caution.sc-ds-chip-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}`;const l={md:"md",sm:"sm",xs:"xs"};const g=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsRemove=n(this,"dsRemove");this.state="default";this.size="md";this.rounded=false;this.removable=true;this.isInactive=false;this.removeLabel="Remove {label}";this.handleRemove=o=>{o.stopPropagation();if(this.isInactive)return;this.dsRemove.emit()}}render(){const o=e[this.size];const r=l[this.size];const n=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;return i(c,{key:"635a2e4c39d5a5cccfad38da1b3a8df570ad265c",class:{tag:true,chip:true,[`chip--${this.state}`]:true,[`tag--size-${this.size}`]:true,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","tag--rounded":this.rounded,"tag--removable":this.removable,"ds-interaction-fill":!this.isInactive&&this.removable,"ds-interaction-fill--on-medium":this.background==="medium","ds-interaction-fill--on-bold":this.background==="bold","ds-interaction-fill--on-strong":this.background==="strong","ds-interaction-fill--on-always-dark":this.background==="always-dark","ds-control-inactive":this.isInactive},style:n,"aria-disabled":this.isInactive?"true":undefined},i("ds-text",{key:"2be2299f1c524cd305c620c9ccc53e4344d3caef",class:"tag__label",as:"span",variant:o,color:"inherit"},this.label),this.removable&&i("button",{key:"5d26ef6abab99583e235423a7112827f8cbc1250",type:"button",class:"tag__remove ds-focus-ring-inset",onClick:this.handleRemove,"aria-label":this.removeLabel.replace("{label}",this.label),disabled:this.isInactive||undefined},i("slot",{key:"762116e6dc590fb664a94a419db9647876540aa1",name:"remove-icon"},i("ds-icon",{key:"d14c7c5654a7d16cae89d0ebd5539429c649b904",class:"tag__remove-x",name:"Cross",size:r,color:"inherit"}))))}static get style(){return d()}},[262,"ds-chip",{label:[1],state:[1],size:[1],rounded:[4],removable:[4],maxWidth:[8,"max-width"],isInactive:[4,"is-inactive"],background:[1],removeLabel:[1,"remove-label"]}]);function u(){if(typeof customElements==="undefined"){return}const o=["ds-chip","ds-icon","ds-text"];o.forEach((o=>{switch(o){case"ds-chip":if(!customElements.get(t(o))){customElements.define(t(o),g)}break;case"ds-icon":if(!customElements.get(t(o))){a()}break;case"ds-text":if(!customElements.get(t(o))){s()}break}}))}u();const h=g;const v=u;export{h as DsChip,v as defineCustomElement};
 //# sourceMappingURL=ds-chip.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["chipCss","ICON_SIZE","md","sm","xs","Chip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","state","size","rounded","removable","isInactive","removeLabel","handleRemove","e","stopPropagation","dsRemove","emit","render","textVariant","CONTROL_TEXT_VARIANT","iconSize","maxWidthStyle","maxWidth","undefined","h","Host","key","class","tag","chip","background","style","as","variant","color","label","type","onClick","replace","disabled","name"],"sources":["src/wc/components/Chip/Chip.css?tag=ds-chip&encapsulation=scoped","src/wc/components/Chip/Chip.tsx"],"sourcesContent":["@import '../Tag/Tag.css';\n@import '../../utils/control-inactive.css';\n\n/*\n * Semantic state colors — Chip’s differentiator from Tag.\n * All states use the faint contrast weight; hue comes from the state.\n */\n:host(.chip--default) {\n  background-color: var(--color-background-faint-neutral);\n  color: var(--color-foreground-bold-neutral);\n}\n\n:host(.chip--active) {\n  background-color: var(--color-background-faint-brand);\n  color: var(--color-foreground-bold-brand);\n}\n\n:host(.chip--error) {\n  background-color: var(--color-background-faint-negative);\n  color: var(--color-foreground-bold-negative);\n}\n\n:host(.chip--caution) {\n  background-color: var(--color-background-faint-caution);\n  color: var(--color-foreground-bold-caution);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport { CONTROL_TEXT_VARIANT } from '../../utils';\n\n/**\n * Semantic chip state — replaces Tag’s intent × contrast matrix.\n * - `default` — neutral faint\n * - `active` — brand faint\n * - `error` — negative faint\n * - `caution` — caution faint\n */\nexport type ChipState = 'default' | 'active' | 'error' | 'caution';\nexport type ChipSize = 'md' | 'sm' | 'xs';\nexport type ChipBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\n/** Dismiss `ds-icon` size — same iconography metrics as Tag’s leading icon. */\nconst ICON_SIZE: Record<ChipSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n/**\n * Removable chip — same density recipe as Tag, but colored by semantic `state`\n * (not intent × contrast). Not a toggle/select control; the only intentional\n * action is remove.\n */\n@Component({\n  tag: 'ds-chip',\n  styleUrl: 'Chip.css',\n  scoped: true,\n})\nexport class Chip {\n  @Prop() label!: string;\n  /** Semantic color state. @default 'default' */\n  @Prop() state: ChipState = 'default';\n  @Prop() size: ChipSize = 'md';\n  @Prop() rounded: boolean = false;\n  /** When true (default), shows the trailing dismiss control. */\n  @Prop() removable: boolean = true;\n  @Prop() maxWidth: string | number | undefined;\n  @Prop() isInactive: boolean = false;\n  /** Surface context for interaction-fill tokens when the chip sits on a non-default surface. */\n  @Prop() background: ChipBackground | undefined;\n  /** Accessible remove action. Use `{label}` as the chip-label placeholder. */\n  @Prop() removeLabel: string = 'Remove {label}';\n\n  /** Fired when the remove button is clicked. */\n  @Event() dsRemove!: EventEmitter<void>;\n\n  private handleRemove = (e: MouseEvent) => {\n    e.stopPropagation();\n    if (this.isInactive) return;\n    this.dsRemove.emit();\n  };\n\n  render() {\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const maxWidthStyle = this.maxWidth != null\n      ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          'tag': true,\n          'chip': true,\n          [`chip--${this.state}`]: true,\n          [`tag--size-${this.size}`]: true,\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          'tag--rounded': this.rounded,\n          'tag--removable': this.removable,\n          /* Hover overlay on the chip surface — dismiss is the only action. */\n          'ds-interaction-fill': !this.isInactive && this.removable,\n          'ds-interaction-fill--on-medium': this.background === 'medium',\n          'ds-interaction-fill--on-bold': this.background === 'bold',\n          'ds-interaction-fill--on-strong': this.background === 'strong',\n          'ds-interaction-fill--on-always-dark': this.background === 'always-dark',\n          'ds-control-inactive': this.isInactive,\n        }}\n        style={maxWidthStyle}\n        aria-disabled={this.isInactive ? 'true' : undefined}\n      >\n        <ds-text class=\"tag__label\" as=\"span\" variant={textVariant} color=\"inherit\">\n          {this.label}\n        </ds-text>\n        {this.removable && (\n          <button\n            type=\"button\"\n            class=\"tag__remove ds-focus-ring-inset\"\n            onClick={this.handleRemove}\n            aria-label={this.removeLabel.replace('{label}', this.label)}\n            disabled={this.isInactive || undefined}\n          >\n            <slot name=\"remove-icon\">\n              <ds-icon class=\"tag__remove-x\" name=\"Cross\" size={iconSize} color=\"inherit\"></ds-icon>\n            </slot>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"yKAAA,MAAMA,EAAU,IAAM,g6YCetB,MAAMC,EAAkD,CACtDC,GAAI,KACJC,GAAI,KACJC,GAAI,M,MAaOC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,6EAQUC,KAAAC,MAAmB,UACnBD,KAAAE,KAAiB,KACjBF,KAAAG,QAAmB,MAEnBH,KAAAI,UAAqB,KAErBJ,KAAAK,WAAsB,MAItBL,KAAAM,YAAsB,iBAKtBN,KAAAO,aAAgBC,IACtBA,EAAEC,kBACF,GAAIT,KAAKK,WAAY,OACrBL,KAAKU,SAASC,MAAM,CAqDvB,CAlDC,MAAAC,GACE,MAAMC,EAAcC,EAAqBd,KAAKE,MAC9C,MAAMa,EAAWxB,EAAUS,KAAKE,MAEhC,MAAMc,EAAgBhB,KAAKiB,UAAY,KACnC,CAAEA,gBAAiBjB,KAAKiB,WAAa,SAAW,GAAGjB,KAAKiB,aAAejB,KAAKiB,UAC5EC,UAEJ,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,IAAO,KACPC,KAAQ,KACR,CAAC,SAASxB,KAAKC,SAAU,KACzB,CAAC,aAAaD,KAAKE,QAAS,KAC5B,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,eAAgBF,KAAKG,QACrB,iBAAkBH,KAAKI,UAEvB,uBAAwBJ,KAAKK,YAAcL,KAAKI,UAChD,iCAAkCJ,KAAKyB,aAAe,SACtD,+BAAgCzB,KAAKyB,aAAe,OACpD,iCAAkCzB,KAAKyB,aAAe,SACtD,sCAAuCzB,KAAKyB,aAAe,cAC3D,sBAAuBzB,KAAKK,YAE9BqB,MAAOV,EAAa,gBACLhB,KAAKK,WAAa,OAASa,WAE1CC,EAAA,WAAAE,IAAA,2CAASC,MAAM,aAAaK,GAAG,OAAOC,QAASf,EAAagB,MAAM,WAC/D7B,KAAK8B,OAEP9B,KAAKI,WACJe,EAAA,UAAAE,IAAA,2CACEU,KAAK,SACLT,MAAM,kCACNU,QAAShC,KAAKO,aAAY,aACdP,KAAKM,YAAY2B,QAAQ,UAAWjC,KAAK8B,OACrDI,SAAUlC,KAAKK,YAAca,WAE7BC,EAAA,QAAAE,IAAA,2CAAMc,KAAK,eACThB,EAAA,WAAAE,IAAA,2CAASC,MAAM,gBAAgBa,KAAK,QAAQjC,KAAMa,EAAUc,MAAM,c","ignoreList":[]}
+{"version":3,"names":["chipCss","ICON_SIZE","md","sm","xs","Chip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","state","size","rounded","removable","isInactive","removeLabel","handleRemove","e","stopPropagation","dsRemove","emit","render","textVariant","CONTROL_TEXT_VARIANT","iconSize","maxWidthStyle","maxWidth","undefined","h","Host","key","class","tag","chip","background","style","as","variant","color","label","type","onClick","replace","disabled","name"],"sources":["src/wc/components/Chip/Chip.css?tag=ds-chip&encapsulation=scoped","src/wc/components/Chip/Chip.tsx"],"sourcesContent":["@import '../Tag/Tag.css';\n@import '../../utils/control-inactive.css';\n\n/*\n * Semantic state colors — Chip’s differentiator from Tag.\n * All states use the faint contrast weight; hue comes from the state.\n */\n:host(.chip--default) {\n  background-color: var(--color-background-faint-neutral);\n  color: var(--color-foreground-bold-neutral);\n}\n\n:host(.chip--active) {\n  background-color: var(--color-background-faint-brand);\n  color: var(--color-foreground-bold-brand);\n}\n\n:host(.chip--error) {\n  background-color: var(--color-background-faint-negative);\n  color: var(--color-foreground-bold-negative);\n}\n\n:host(.chip--caution) {\n  background-color: var(--color-background-faint-caution);\n  color: var(--color-foreground-bold-caution);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport { CONTROL_TEXT_VARIANT } from '../../utils';\n\n/**\n * Semantic chip state — replaces Tag’s intent × contrast matrix.\n * - `default` — neutral faint\n * - `active` — brand faint\n * - `error` — negative faint\n * - `caution` — caution faint\n */\nexport type ChipState = 'default' | 'active' | 'error' | 'caution';\nexport type ChipSize = 'md' | 'sm' | 'xs';\nexport type ChipBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\n/** Dismiss `ds-icon` size — same iconography metrics as Tag’s leading icon. */\nconst ICON_SIZE: Record<ChipSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n/**\n * Removable chip — same density recipe as Tag, but colored by semantic `state`\n * (not intent × contrast). Not a toggle/select control; the only intentional\n * action is remove.\n */\n@Component({\n  tag: 'ds-chip',\n  styleUrl: 'Chip.css',\n  scoped: true,\n})\nexport class Chip {\n  @Prop() label!: string;\n  /** Semantic color state. @default 'default' */\n  @Prop() state: ChipState = 'default';\n  @Prop() size: ChipSize = 'md';\n  @Prop() rounded: boolean = false;\n  /** When true (default), shows the trailing dismiss control. */\n  @Prop() removable: boolean = true;\n  @Prop() maxWidth: string | number | undefined;\n  @Prop() isInactive: boolean = false;\n  /** Surface context for interaction-fill tokens when the chip sits on a non-default surface. */\n  @Prop() background: ChipBackground | undefined;\n  /** Accessible remove action. Use `{label}` as the chip-label placeholder. */\n  @Prop() removeLabel: string = 'Remove {label}';\n\n  /** Fired when the remove button is clicked. */\n  @Event() dsRemove!: EventEmitter<void>;\n\n  private handleRemove = (e: MouseEvent) => {\n    e.stopPropagation();\n    if (this.isInactive) return;\n    this.dsRemove.emit();\n  };\n\n  render() {\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const maxWidthStyle = this.maxWidth != null\n      ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          'tag': true,\n          'chip': true,\n          [`chip--${this.state}`]: true,\n          [`tag--size-${this.size}`]: true,\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          'tag--rounded': this.rounded,\n          'tag--removable': this.removable,\n          /* Hover overlay on the chip surface — dismiss is the only action. */\n          'ds-interaction-fill': !this.isInactive && this.removable,\n          'ds-interaction-fill--on-medium': this.background === 'medium',\n          'ds-interaction-fill--on-bold': this.background === 'bold',\n          'ds-interaction-fill--on-strong': this.background === 'strong',\n          'ds-interaction-fill--on-always-dark': this.background === 'always-dark',\n          'ds-control-inactive': this.isInactive,\n        }}\n        style={maxWidthStyle}\n        aria-disabled={this.isInactive ? 'true' : undefined}\n      >\n        <ds-text class=\"tag__label\" as=\"span\" variant={textVariant} color=\"inherit\">\n          {this.label}\n        </ds-text>\n        {this.removable && (\n          <button\n            type=\"button\"\n            class=\"tag__remove ds-focus-ring-inset\"\n            onClick={this.handleRemove}\n            aria-label={this.removeLabel.replace('{label}', this.label)}\n            disabled={this.isInactive || undefined}\n          >\n            <slot name=\"remove-icon\">\n              <ds-icon class=\"tag__remove-x\" name=\"Cross\" size={iconSize} color=\"inherit\"></ds-icon>\n            </slot>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"yKAAA,MAAMA,EAAU,IAAM,u4YCetB,MAAMC,EAAkD,CACtDC,GAAI,KACJC,GAAI,KACJC,GAAI,M,MAaOC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,6EAQUC,KAAAC,MAAmB,UACnBD,KAAAE,KAAiB,KACjBF,KAAAG,QAAmB,MAEnBH,KAAAI,UAAqB,KAErBJ,KAAAK,WAAsB,MAItBL,KAAAM,YAAsB,iBAKtBN,KAAAO,aAAgBC,IACtBA,EAAEC,kBACF,GAAIT,KAAKK,WAAY,OACrBL,KAAKU,SAASC,MAAM,CAqDvB,CAlDC,MAAAC,GACE,MAAMC,EAAcC,EAAqBd,KAAKE,MAC9C,MAAMa,EAAWxB,EAAUS,KAAKE,MAEhC,MAAMc,EAAgBhB,KAAKiB,UAAY,KACnC,CAAEA,gBAAiBjB,KAAKiB,WAAa,SAAW,GAAGjB,KAAKiB,aAAejB,KAAKiB,UAC5EC,UAEJ,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,IAAO,KACPC,KAAQ,KACR,CAAC,SAASxB,KAAKC,SAAU,KACzB,CAAC,aAAaD,KAAKE,QAAS,KAC5B,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,eAAgBF,KAAKG,QACrB,iBAAkBH,KAAKI,UAEvB,uBAAwBJ,KAAKK,YAAcL,KAAKI,UAChD,iCAAkCJ,KAAKyB,aAAe,SACtD,+BAAgCzB,KAAKyB,aAAe,OACpD,iCAAkCzB,KAAKyB,aAAe,SACtD,sCAAuCzB,KAAKyB,aAAe,cAC3D,sBAAuBzB,KAAKK,YAE9BqB,MAAOV,EAAa,gBACLhB,KAAKK,WAAa,OAASa,WAE1CC,EAAA,WAAAE,IAAA,2CAASC,MAAM,aAAaK,GAAG,OAAOC,QAASf,EAAagB,MAAM,WAC/D7B,KAAK8B,OAEP9B,KAAKI,WACJe,EAAA,UAAAE,IAAA,2CACEU,KAAK,SACLT,MAAM,kCACNU,QAAShC,KAAKO,aAAY,aACdP,KAAKM,YAAY2B,QAAQ,UAAWjC,KAAK8B,OACrDI,SAAUlC,KAAKK,YAAca,WAE7BC,EAAA,QAAAE,IAAA,2CAAMc,KAAK,eACThB,EAAA,WAAAE,IAAA,2CAASC,MAAM,gBAAgBa,KAAK,QAAQjC,KAAMa,EAAUc,MAAM,c","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{p as t,H as e,h as s,a,t as c}from"./index.js";import{d as n}from"./p-BOQRM49Q.js";const o=()=>`.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%;width:100%}`;const i={"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";this.messages={}}render(){return s(a,{key:"12bc00fa7fc429ca36408ac151ec5dce05aeaf86"},s("ds-text",{key:"b61dfd154b04b040fed331e69f8f8e3da6a29d33",class:"empty-state",as:"p",variant:"text-body-medium",color:"secondary"},this.message||this.messages[this.type]||i[this.type]))}static get style(){return o()}},[2,"ds-empty-state",{type:[1],message:[1],messages:[16]}]);function r(){if(typeof customElements==="undefined"){return}const t=["ds-empty-state","ds-text"];t.forEach((t=>{switch(t){case"ds-empty-state":if(!customElements.get(c(t))){customElements.define(c(t),d)}break;case"ds-text":if(!customElements.get(c(t))){n()}break}}))}r();const m=d;const f=r;export{m as DsEmptyState,f as defineCustomElement};
+import{p as t,H as e,h as s,a,t as c}from"./index.js";import{d as n}from"./p-emacH2W5.js";const o=()=>`.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%;width:100%}`;const i={"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";this.messages={}}render(){return s(a,{key:"12bc00fa7fc429ca36408ac151ec5dce05aeaf86"},s("ds-text",{key:"b61dfd154b04b040fed331e69f8f8e3da6a29d33",class:"empty-state",as:"p",variant:"text-body-medium",color:"secondary"},this.message||this.messages[this.type]||i[this.type]))}static get style(){return o()}},[2,"ds-empty-state",{type:[1],message:[1],messages:[16]}]);function r(){if(typeof customElements==="undefined"){return}const t=["ds-empty-state","ds-text"];t.forEach((t=>{switch(t){case"ds-empty-state":if(!customElements.get(c(t))){customElements.define(c(t),d)}break;case"ds-text":if(!customElements.get(c(t))){n()}break}}))}r();const m=d;const f=r;export{m as DsEmptyState,f as defineCustomElement};
 //# sourceMappingURL=ds-empty-state.js.map

package/dist/components/ds-field.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,h as t,a as d,t as a}from"./index.js";import{d as i}from"./p-BOQRM49Q.js";const c=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}`;let l=0;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.resolvedId=`ds-field-${++l}`}render(){const e=this.fieldId||this.resolvedId;return t(d,{key:"68253d2f40a0363bb1e0922dfcdd2cf1c81e5ce9"},t("div",{key:"5a9b9425d4e2b383eda84de2047faa414b3d79a2",class:"field"},t("ds-text",{key:"aac6e416bbb04caec454b232bf6b54948e5bb28d",as:"label",variant:"text-body-small",emphasis:true,for:e},this.label),t("slot",{key:"843a7302e6ddc6a8d5f1f75799c8e3630ad4b400"})))}static get style(){return c()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-field","ds-text"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(a(e))){customElements.define(a(e),f)}break;case"ds-text":if(!customElements.get(a(e))){i()}break}}))}n();const o=f;const r=n;export{o as DsField,r as defineCustomElement};
+import{p as e,H as s,h as t,a as d,t as a}from"./index.js";import{d as i}from"./p-emacH2W5.js";const c=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}`;let l=0;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.resolvedId=`ds-field-${++l}`}render(){const e=this.fieldId||this.resolvedId;return t(d,{key:"68253d2f40a0363bb1e0922dfcdd2cf1c81e5ce9"},t("div",{key:"5a9b9425d4e2b383eda84de2047faa414b3d79a2",class:"field"},t("ds-text",{key:"aac6e416bbb04caec454b232bf6b54948e5bb28d",as:"label",variant:"text-body-small",emphasis:true,for:e},this.label),t("slot",{key:"843a7302e6ddc6a8d5f1f75799c8e3630ad4b400"})))}static get style(){return c()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-field","ds-text"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(a(e))){customElements.define(a(e),f)}break;case"ds-text":if(!customElements.get(a(e))){i()}break}}))}n();const o=f;const r=n;export{o as DsField,r as defineCustomElement};
 //# sourceMappingURL=ds-field.js.map

package/dist/components/ds-input.js

@@ -1,2 +1,2 @@
-import{p as t,H as e,c as s,h as i,a,t as r}from"./index.js";import{d}from"./p-BOQRM49Q.js";const n=()=>`.ds-control-inactive.sc-ds-input-h,.ds-control-inactive.sc-ds-input{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-text--display-medium.sc-ds-input-h,.ds-text--display-medium.sc-ds-input{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-input-h,.ds-text--display-small.sc-ds-input{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-input-h,.ds-text--title-large.sc-ds-input{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-input-h,.ds-text--title-medium.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-input-h,.ds-text--title-small.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-input-h,.ds-text--body-large.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-input-h,.ds-text--body-medium.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-input-h,.ds-text--body-small.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-input-h,.ds-text--caption.sc-ds-input{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--display-small.ds-text--emphasis.sc-ds-input-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-input,.ds-text--display-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-input-h,.ds-text--display-small.ds-text--regular.sc-ds-input-h,.ds-text--display-medium.ds-text--regular.sc-ds-input,.ds-text--display-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-input-h,.ds-text--title-large.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-input-h,.ds-text--title-large.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--title-small.ds-text--emphasis.sc-ds-input-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-input,.ds-text--title-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-input-h,.ds-text--title-small.ds-text--regular.sc-ds-input-h,.ds-text--title-medium.ds-text--regular.sc-ds-input,.ds-text--title-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-input-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--body-large.ds-text--emphasis.sc-ds-input,.ds-text--body-medium.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-input-h,.ds-text--body-medium.ds-text--regular.sc-ds-input-h,.ds-text--body-large.ds-text--regular.sc-ds-input,.ds-text--body-medium.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-input-h,.ds-text--body-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-input-h,.ds-text--body-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-input-h,.ds-text--caption.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-input-h,.ds-text--caption.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.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;color:var(--color-foreground-primary);border-radius:var(--dimension-radius-075);-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{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:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.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}`;let l=0;const o=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.dsClear=s(this,"dsClear");this.internals=this.attachInternals();this.generatedId=`ds-input-${++l}`;this.errorId=`${this.generatedId}-error`;this.value="";this.disabled=false;this.required=false;this.requiredMessage="This field is required.";this.clearLabel="Clear";this.type="text";this.isInactive=false;this.autoFocus=false;this.error=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false;this.handleInput=t=>{this.value=t.target.value;this.dsChange.emit(this.value)};this.handleClear=()=>{this.value="";this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const t=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(t?null:this.value);const e=this.required&&!t&&this.value.length===0;this.internals.setValidity(e?{valueMissing:true}:{},e?this.requiredMessage:"")}formDisabledCallback(t){this.formDisabled=t;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(t){this.value=typeof t==="string"?t:""}async setFocus(){this.el.querySelector("input")?.focus()}render(){const t=this.inputId??this.generatedId;const e=this.isInactive||this.disabled||this.formDisabled;const s=this.type==="search"&&this.value.length>0&&!e;const r=this.error&&Boolean(this.errorMessage);const d=[this.ariaDescribedby,r?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return i(a,{key:"eb9c9f3c5e06a0a16a215b5e7049a9f11641e671",class:{"input-container":true,"ds-control-inactive":e}},i("div",{key:"8e65be7a24eac29787a978f003502b1cb860fe47",class:{wrapper:true,"wrapper--error":this.error}},i("div",{key:"ad897040b39c0d904dad397d1d57f9f87ce55797",class:"row"},i("input",{key:"ec84c406e24915f1305879c7fa6a2e0078534a05",type:this.type,id:t,value:this.value,placeholder:this.placeholder,disabled:e,required:this.required,autoFocus:this.autoFocus,class:"native-input ds-text--body-medium ds-text--regular","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":d,"aria-invalid":this.error||undefined,onInput:this.handleInput}),s&&i("button",{key:"63141a6d8f9c8d0cdc8982177b54aa273bedf67f",type:"button",class:"clear-btn",onClick:this.handleClear,"aria-label":this.clearLabel},i("span",{key:"56b5d07d7debd18028def9c0298d8c73eb880561","aria-hidden":"true"},"×")),i("span",{key:"1c1c06af174bef1df4b22157b6d546877e5233f2",class:"suffix"},i("slot",{key:"cb0c6cadce30508ed149b7d8c79ddf36688c0df0",name:"suffix"})))),r&&i("ds-text",{key:"4ea0aba512301e8aa7cb04e0d5a81a083f5ad0a8",class:"error-text",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return n()}},[326,"ds-input",{value:[1025],name:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],clearLabel:[1,"clear-label"],placeholder:[1],type:[1],isInactive:[4,"is-inactive"],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"],formDisabled:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function p(){if(typeof customElements==="undefined"){return}const t=["ds-input","ds-text"];t.forEach((t=>{switch(t){case"ds-input":if(!customElements.get(r(t))){customElements.define(r(t),o)}break;case"ds-text":if(!customElements.get(r(t))){d()}break}}))}p();const h=o;const c=p;export{h as DsInput,c as defineCustomElement};
+import{p as t,H as e,c as s,h as i,a,t as r}from"./index.js";import{d}from"./p-emacH2W5.js";const n=()=>`.ds-control-inactive.sc-ds-input-h,.ds-control-inactive.sc-ds-input{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-text--display-medium.sc-ds-input-h,.ds-text--display-medium.sc-ds-input{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-input-h,.ds-text--display-small.sc-ds-input{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-input-h,.ds-text--title-large.sc-ds-input{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-input-h,.ds-text--title-medium.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-input-h,.ds-text--title-small.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-input-h,.ds-text--body-large.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-input-h,.ds-text--body-medium.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-input-h,.ds-text--body-small.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-input-h,.ds-text--caption.sc-ds-input{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--display-small.ds-text--emphasis.sc-ds-input-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-input,.ds-text--display-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-input-h,.ds-text--display-small.ds-text--regular.sc-ds-input-h,.ds-text--display-medium.ds-text--regular.sc-ds-input,.ds-text--display-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-input-h,.ds-text--title-large.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-input-h,.ds-text--title-large.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--title-small.ds-text--emphasis.sc-ds-input-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-input,.ds-text--title-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-input-h,.ds-text--title-small.ds-text--regular.sc-ds-input-h,.ds-text--title-medium.ds-text--regular.sc-ds-input,.ds-text--title-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-input-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--body-large.ds-text--emphasis.sc-ds-input,.ds-text--body-medium.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-input-h,.ds-text--body-medium.ds-text--regular.sc-ds-input-h,.ds-text--body-large.ds-text--regular.sc-ds-input,.ds-text--body-medium.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-input-h,.ds-text--body-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-input-h,.ds-text--body-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-input-h,.ds-text--caption.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-input-h,.ds-text--caption.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.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;color:var(--color-foreground-primary);border-radius:var(--dimension-radius-075);-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{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:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.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}`;let l=0;const o=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.dsClear=s(this,"dsClear");this.internals=this.attachInternals();this.generatedId=`ds-input-${++l}`;this.errorId=`${this.generatedId}-error`;this.value="";this.disabled=false;this.required=false;this.requiredMessage="This field is required.";this.clearLabel="Clear";this.type="text";this.isInactive=false;this.autoFocus=false;this.error=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false;this.handleInput=t=>{this.value=t.target.value;this.dsChange.emit(this.value)};this.handleClear=()=>{this.value="";this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const t=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(t?null:this.value);const e=this.required&&!t&&this.value.length===0;this.internals.setValidity(e?{valueMissing:true}:{},e?this.requiredMessage:"")}formDisabledCallback(t){this.formDisabled=t;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(t){this.value=typeof t==="string"?t:""}async setFocus(){this.el.querySelector("input")?.focus()}render(){const t=this.inputId??this.generatedId;const e=this.isInactive||this.disabled||this.formDisabled;const s=this.type==="search"&&this.value.length>0&&!e;const r=this.error&&Boolean(this.errorMessage);const d=[this.ariaDescribedby,r?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return i(a,{key:"eb9c9f3c5e06a0a16a215b5e7049a9f11641e671",class:{"input-container":true,"ds-control-inactive":e}},i("div",{key:"8e65be7a24eac29787a978f003502b1cb860fe47",class:{wrapper:true,"wrapper--error":this.error}},i("div",{key:"ad897040b39c0d904dad397d1d57f9f87ce55797",class:"row"},i("input",{key:"ec84c406e24915f1305879c7fa6a2e0078534a05",type:this.type,id:t,value:this.value,placeholder:this.placeholder,disabled:e,required:this.required,autoFocus:this.autoFocus,class:"native-input ds-text--body-medium ds-text--regular","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":d,"aria-invalid":this.error||undefined,onInput:this.handleInput}),s&&i("button",{key:"63141a6d8f9c8d0cdc8982177b54aa273bedf67f",type:"button",class:"clear-btn",onClick:this.handleClear,"aria-label":this.clearLabel},i("span",{key:"56b5d07d7debd18028def9c0298d8c73eb880561","aria-hidden":"true"},"×")),i("span",{key:"1c1c06af174bef1df4b22157b6d546877e5233f2",class:"suffix"},i("slot",{key:"cb0c6cadce30508ed149b7d8c79ddf36688c0df0",name:"suffix"})))),r&&i("ds-text",{key:"4ea0aba512301e8aa7cb04e0d5a81a083f5ad0a8",class:"error-text",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return n()}},[326,"ds-input",{value:[1025],name:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],clearLabel:[1,"clear-label"],placeholder:[1],type:[1],isInactive:[4,"is-inactive"],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"],formDisabled:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function p(){if(typeof customElements==="undefined"){return}const t=["ds-input","ds-text"];t.forEach((t=>{switch(t){case"ds-input":if(!customElements.get(r(t))){customElements.define(r(t),o)}break;case"ds-text":if(!customElements.get(r(t))){d()}break}}))}p();const h=o;const c=p;export{h as DsInput,c as defineCustomElement};
 //# sourceMappingURL=ds-input.js.map

package/dist/components/ds-menu.js

@@ -1,2 +1,2 @@
-import{M as o,d as s}from"./p-mNNklnCo.js";const t=o;const m=s;export{t as DsMenu,m as defineCustomElement};
+import{M as o,d as s}from"./p-Cy3bKuLE.js";const t=o;const p=s;export{t as DsMenu,p as defineCustomElement};
 //# sourceMappingURL=ds-menu.js.map

package/dist/components/ds-modal.js

@@ -1,2 +1,2 @@
-import{p as e,H as a,c as t,h as s,a as o,t as i}from"./index.js";import{d}from"./p-BOQRM49Q.js";import{r as n}from"./p-C1cBr-Ri.js";import{T as r}from"./p-drBA73M_.js";const l=()=>`.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 - 2 * var(--dimension-space-200));overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-300);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-subtitle.sc-ds-modal{margin-top:var(--dimension-space-100)}.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 c={sm:"var(--dimension-modal-width-sm)",md:"var(--dimension-modal-width-md)",lg:"var(--dimension-modal-width-lg)"};const m=["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 h=0;const f=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=t(this,"dsClose");this.open=false;this.modalWidth="md";this.shouldRender=false;this.closing=false;this.instanceId=++h;this.titleId=`ds-modal-title-${h}`;this.subtitleId=`ds-modal-subtitle-${h}`;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}),this.closeAnimationMs)}}focusFirst(){const e=this.el.querySelector(".modal-dialog");if(!e)return;const a=this.getFocusables(e);(a[0]??e).focus()}getFocusables(e){return Array.from(e.querySelectorAll(m)).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 a=this.el.querySelector(".modal-dialog");if(!a)return;const t=this.getFocusables(a);if(!t.length){e.preventDefault();a.focus();return}const s=t[0];const o=t[t.length-1];const i=document.activeElement;if(e.shiftKey){if(i===s||i===a||!a.contains(i)){e.preventDefault();o.focus()}}else{if(i===o||!a.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 c[this.modalWidth]}return this.modalWidth}get closeAnimationMs(){return n(r.motionShort3,r.animationDurationShort3)}render(){const e=!this.shouldRender&&!this.closing;return s(o,{key:"5ddb2ee0e7936a4f1d3a3cb6ada580719baa8aab",style:{display:"contents"}},s("div",{key:"8c0f0a6fcd4b5c48d8077ed96ce645ae168e0596",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:"822dba4d9d0a180910636270e6cba6c22a329f59",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 - 2 * var(--dimension-space-200)))`}},s("div",{key:"ba09e246151b25cd809015f238d38b1e28daab61",class:"modal-header"},s("ds-text",{key:"c2a8b211b7a145a46370572653b35e8a5d6e5092",as:"h2",variant:"text-title-small",textId:this.titleId},this.heading),this.subtitle&&s("ds-text",{key:"3b3e8f9321b9909b29048147eea3f15c543fa94b",class:"modal-subtitle",as:"div",variant:"text-body-medium",color:"secondary",wrap:"balance",textId:this.subtitleId},this.subtitle)),s("div",{key:"3ec8e049eff87816ea8eae0392f2f6943a5ae3b4",class:"modal-body"},s("slot",{key:"329d0e7af58ccfc74e197acdac05fcce3b817453"})),s("div",{key:"d3fb47b9597b553cac57f5898f2877891cc84d12",class:"modal-footer"},s("slot",{key:"6c2a3389d2d08192a8c86a0d75bc035890b1dc63",name:"footer"})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return l()}},[262,"ds-modal",{open:[1028],heading:[1],subtitle:[1],modalWidth:[1,"modal-width"],shouldRender:[32],closing:[32]},undefined,{open:[{onOpenChange:0}]}]);function u(){if(typeof customElements==="undefined"){return}const e=["ds-modal","ds-text"];e.forEach((e=>{switch(e){case"ds-modal":if(!customElements.get(i(e))){customElements.define(i(e),f)}break;case"ds-text":if(!customElements.get(i(e))){d()}break}}))}u();const b=f;const p=u;export{b as DsModal,p as defineCustomElement};
+import{p as e,H as a,c as t,h as s,a as o,t as i}from"./index.js";import{d}from"./p-emacH2W5.js";import{r as n}from"./p-C1cBr-Ri.js";import{T as r}from"./p-drBA73M_.js";const l=()=>`.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 - 2 * var(--dimension-space-200));overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-300);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-subtitle.sc-ds-modal{margin-top:var(--dimension-space-100)}.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 c={sm:"var(--dimension-modal-width-sm)",md:"var(--dimension-modal-width-md)",lg:"var(--dimension-modal-width-lg)"};const m=["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 h=0;const f=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=t(this,"dsClose");this.open=false;this.modalWidth="md";this.shouldRender=false;this.closing=false;this.instanceId=++h;this.titleId=`ds-modal-title-${h}`;this.subtitleId=`ds-modal-subtitle-${h}`;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}),this.closeAnimationMs)}}focusFirst(){const e=this.el.querySelector(".modal-dialog");if(!e)return;const a=this.getFocusables(e);(a[0]??e).focus()}getFocusables(e){return Array.from(e.querySelectorAll(m)).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 a=this.el.querySelector(".modal-dialog");if(!a)return;const t=this.getFocusables(a);if(!t.length){e.preventDefault();a.focus();return}const s=t[0];const o=t[t.length-1];const i=document.activeElement;if(e.shiftKey){if(i===s||i===a||!a.contains(i)){e.preventDefault();o.focus()}}else{if(i===o||!a.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 c[this.modalWidth]}return this.modalWidth}get closeAnimationMs(){return n(r.motionShort3,r.animationDurationShort3)}render(){const e=!this.shouldRender&&!this.closing;return s(o,{key:"5ddb2ee0e7936a4f1d3a3cb6ada580719baa8aab",style:{display:"contents"}},s("div",{key:"8c0f0a6fcd4b5c48d8077ed96ce645ae168e0596",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:"822dba4d9d0a180910636270e6cba6c22a329f59",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 - 2 * var(--dimension-space-200)))`}},s("div",{key:"ba09e246151b25cd809015f238d38b1e28daab61",class:"modal-header"},s("ds-text",{key:"c2a8b211b7a145a46370572653b35e8a5d6e5092",as:"h2",variant:"text-title-small",textId:this.titleId},this.heading),this.subtitle&&s("ds-text",{key:"3b3e8f9321b9909b29048147eea3f15c543fa94b",class:"modal-subtitle",as:"div",variant:"text-body-medium",color:"secondary",wrap:"balance",textId:this.subtitleId},this.subtitle)),s("div",{key:"3ec8e049eff87816ea8eae0392f2f6943a5ae3b4",class:"modal-body"},s("slot",{key:"329d0e7af58ccfc74e197acdac05fcce3b817453"})),s("div",{key:"d3fb47b9597b553cac57f5898f2877891cc84d12",class:"modal-footer"},s("slot",{key:"6c2a3389d2d08192a8c86a0d75bc035890b1dc63",name:"footer"})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return l()}},[262,"ds-modal",{open:[1028],heading:[1],subtitle:[1],modalWidth:[1,"modal-width"],shouldRender:[32],closing:[32]},undefined,{open:[{onOpenChange:0}]}]);function u(){if(typeof customElements==="undefined"){return}const e=["ds-modal","ds-text"];e.forEach((e=>{switch(e){case"ds-modal":if(!customElements.get(i(e))){customElements.define(i(e),f)}break;case"ds-text":if(!customElements.get(i(e))){d()}break}}))}u();const b=f;const p=u;export{b as DsModal,p as defineCustomElement};
 //# sourceMappingURL=ds-modal.js.map

package/dist/components/ds-pagination.js

@@ -1,2 +1,2 @@
-import{p as t,H as i,c as n,h as s,a as e,t as o}from"./index.js";import{d as a}from"./p-BOQRM49Q.js";const r=()=>`.ds-control-inactive.sc-ds-pagination-h,.ds-control-inactive.sc-ds-pagination{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-pagination-h{display:inline-block}.pagination.sc-ds-pagination{display:flex;align-items:center;gap:var(--dimension-space-025);-webkit-user-select:none;user-select:none}.button.sc-ds-pagination{display:flex;align-items:center;justify-content:center;min-width:var(--dimension-size-300);height:var(--dimension-size-300);padding:0 var(--dimension-space-050);background:none;border:none;border-radius:var(--dimension-radius-075);cursor:pointer;color:var(--color-foreground-secondary);transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2)}.button.sc-ds-pagination:hover:not(:disabled){background-color:var(--color-interaction-hover);color:var(--color-foreground-primary)}.button.sc-ds-pagination:active:not(:disabled){background-color:var(--color-interaction-pressed)}.button.sc-ds-pagination:disabled{cursor:not-allowed;opacity:0.35}.button.sc-ds-pagination:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-stroke-width-015)}.button--active.sc-ds-pagination{background-color:var(--color-interaction-hover);color:var(--color-foreground-primary)}.button--nav.sc-ds-pagination{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ellipsis.sc-ds-pagination{display:flex;align-items:center;justify-content:center;min-width:var(--dimension-size-300);height:var(--dimension-size-300)}`;function c(t,i){const n=[];for(let s=t;s<=i;s++)n.push(s);return n}function l(t,i,n){const s=n*2+5;if(i<=s)return c(1,i);const e=Math.max(t-n,2);const o=Math.min(t+n,i-1);const a=e>2;const r=o<i-1;if(!a&&r)return[...c(1,n*2+3),"ellipsis",i];if(a&&!r)return[1,"ellipsis",...c(i-(n*2+2),i)];return[1,"ellipsis",...c(e,o),"ellipsis",i]}const d=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.dsPageChange=n(this,"dsPageChange");this.page=1;this.totalPages=1;this.siblingCount=1;this.isInactive=false;this.paginationLabel="Pagination";this.previousPageLabel="Previous page";this.nextPageLabel="Next page"}go(t){if(this.isInactive)return;this.page=t;this.dsPageChange.emit(t)}render(){if(this.totalPages<=1)return s(e,{style:{display:"none"}});const t=l(this.page,this.totalPages,this.siblingCount);return s(e,null,s("nav",{class:{pagination:true,"ds-control-inactive":this.isInactive},"aria-label":this.paginationLabel},s("button",{type:"button",class:"button button--nav",disabled:this.page<=1||this.isInactive,onClick:()=>this.go(this.page-1),"aria-label":this.previousPageLabel},"‹"),t.map(((t,i)=>t==="ellipsis"?s("ds-text",{key:`e${i}`,class:"ellipsis",as:"span",variant:"text-body-small",color:"tertiary"},"…"):s("button",{key:t,type:"button",class:{button:true,"button--active":t===this.page},onClick:()=>this.go(t),"aria-current":t===this.page?"page":undefined,disabled:this.isInactive},s("ds-text",{as:"span",variant:"text-body-small",emphasis:t===this.page},t)))),s("button",{type:"button",class:"button button--nav",disabled:this.page>=this.totalPages||this.isInactive,onClick:()=>this.go(this.page+1),"aria-label":this.nextPageLabel},"›")))}static get style(){return r()}},[2,"ds-pagination",{page:[1026],totalPages:[2,"total-pages"],siblingCount:[2,"sibling-count"],isInactive:[4,"is-inactive"],paginationLabel:[1,"pagination-label"],previousPageLabel:[1,"previous-page-label"],nextPageLabel:[1,"next-page-label"]}]);function u(){if(typeof customElements==="undefined"){return}const t=["ds-pagination","ds-text"];t.forEach((t=>{switch(t){case"ds-pagination":if(!customElements.get(o(t))){customElements.define(o(t),d)}break;case"ds-text":if(!customElements.get(o(t))){a()}break}}))}u();const p=d;const h=u;export{p as DsPagination,h as defineCustomElement};
+import{p as t,H as i,c as n,h as s,a as e,t as o}from"./index.js";import{d as a}from"./p-emacH2W5.js";const r=()=>`.ds-control-inactive.sc-ds-pagination-h,.ds-control-inactive.sc-ds-pagination{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-pagination-h{display:inline-block}.pagination.sc-ds-pagination{display:flex;align-items:center;gap:var(--dimension-space-025);-webkit-user-select:none;user-select:none}.button.sc-ds-pagination{display:flex;align-items:center;justify-content:center;min-width:var(--dimension-size-300);height:var(--dimension-size-300);padding:0 var(--dimension-space-050);background:none;border:none;border-radius:var(--dimension-radius-075);cursor:pointer;color:var(--color-foreground-secondary);transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2)}.button.sc-ds-pagination:hover:not(:disabled){background-color:var(--color-interaction-hover);color:var(--color-foreground-primary)}.button.sc-ds-pagination:active:not(:disabled){background-color:var(--color-interaction-pressed)}.button.sc-ds-pagination:disabled{cursor:not-allowed;opacity:0.35}.button.sc-ds-pagination:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-stroke-width-015)}.button--active.sc-ds-pagination{background-color:var(--color-interaction-hover);color:var(--color-foreground-primary)}.button--nav.sc-ds-pagination{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ellipsis.sc-ds-pagination{display:flex;align-items:center;justify-content:center;min-width:var(--dimension-size-300);height:var(--dimension-size-300)}`;function c(t,i){const n=[];for(let s=t;s<=i;s++)n.push(s);return n}function l(t,i,n){const s=n*2+5;if(i<=s)return c(1,i);const e=Math.max(t-n,2);const o=Math.min(t+n,i-1);const a=e>2;const r=o<i-1;if(!a&&r)return[...c(1,n*2+3),"ellipsis",i];if(a&&!r)return[1,"ellipsis",...c(i-(n*2+2),i)];return[1,"ellipsis",...c(e,o),"ellipsis",i]}const d=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.dsPageChange=n(this,"dsPageChange");this.page=1;this.totalPages=1;this.siblingCount=1;this.isInactive=false;this.paginationLabel="Pagination";this.previousPageLabel="Previous page";this.nextPageLabel="Next page"}go(t){if(this.isInactive)return;this.page=t;this.dsPageChange.emit(t)}render(){if(this.totalPages<=1)return s(e,{style:{display:"none"}});const t=l(this.page,this.totalPages,this.siblingCount);return s(e,null,s("nav",{class:{pagination:true,"ds-control-inactive":this.isInactive},"aria-label":this.paginationLabel},s("button",{type:"button",class:"button button--nav",disabled:this.page<=1||this.isInactive,onClick:()=>this.go(this.page-1),"aria-label":this.previousPageLabel},"‹"),t.map(((t,i)=>t==="ellipsis"?s("ds-text",{key:`e${i}`,class:"ellipsis",as:"span",variant:"text-body-small",color:"tertiary"},"…"):s("button",{key:t,type:"button",class:{button:true,"button--active":t===this.page},onClick:()=>this.go(t),"aria-current":t===this.page?"page":undefined,disabled:this.isInactive},s("ds-text",{as:"span",variant:"text-body-small",emphasis:t===this.page},t)))),s("button",{type:"button",class:"button button--nav",disabled:this.page>=this.totalPages||this.isInactive,onClick:()=>this.go(this.page+1),"aria-label":this.nextPageLabel},"›")))}static get style(){return r()}},[2,"ds-pagination",{page:[1026],totalPages:[2,"total-pages"],siblingCount:[2,"sibling-count"],isInactive:[4,"is-inactive"],paginationLabel:[1,"pagination-label"],previousPageLabel:[1,"previous-page-label"],nextPageLabel:[1,"next-page-label"]}]);function u(){if(typeof customElements==="undefined"){return}const t=["ds-pagination","ds-text"];t.forEach((t=>{switch(t){case"ds-pagination":if(!customElements.get(o(t))){customElements.define(o(t),d)}break;case"ds-text":if(!customElements.get(o(t))){a()}break}}))}u();const p=d;const h=u;export{p as DsPagination,h as defineCustomElement};
 //# sourceMappingURL=ds-pagination.js.map

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

@@ -1,2 +1,2 @@
-import{p as e,H as n,c as a,h as i,a as t,t as s}from"./index.js";import{d as o}from"./p-BmXUb8VH.js";import{d as r}from"./p-DDcNrhWb.js";import{d as l}from"./p-9Qu1ls2y.js";import{d}from"./p-BOQRM49Q.js";import{d as c}from"./p-oT42N7Zj.js";import{a as v}from"./p-drBA73M_.js";function p(e){const n=Array.isArray(e.edges)?e.edges:[e.edges];const a={"scroll-edge-fade":true,"scroll-edge-fade--hidden":e.hidden===true};for(const e of n){a[`scroll-edge-fade--${e}`]=true}const{atEnd:i}=e;if(i===true){a["scroll-edge-fade--at-end"]=true}else if(i&&typeof i==="object"){const e=n.every((e=>i[e]));if(e){a["scroll-edge-fade--at-end"]=true}}return a}const h={side:"right",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:v.space050};const f="data-nav-style";function u(e){if(e==="dashboard"||e==="settings")return e;return undefined}function m(e,n,a){const i=u(n);if(i)return i;const t=typeof document!=="undefined"?document.documentElement.getAttribute(f):null;const s=u(t);if(s)return s;return e}function g(e,n){return e!==n}function b(e,n){return e===n||e.startsWith(`${n}/`)}function _(e,n){if(!e)return"";let a="";let i=0;for(const t of n){if(!t.href)continue;if(b(e,t.href)&&t.href.length>i){a=t.id;i=t.href.length}}return a}function x(e){return e.reduce(((e,n)=>e+n.items.length),0)}function y(e){if(Array.isArray(e))return e;if(typeof e==="string"){try{const n=JSON.parse(e);return Array.isArray(n)?n:[]}catch{return[]}}return[]}function w(e,n){if(e)return true;if(n===null)return false;return n!=="false"}function k(e,n){return x(e)===0&&x(y(n))>0}const z="ds-panel-nav-user-menu-anchor";const C=()=>`.scroll-edge-fade.sc-ds-panel-nav{--ds-scroll-edge-fade-size:var(--dimension-size-600)}.scroll-edge-fade--top.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--bottom.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(     to bottom,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to bottom,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--left.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(     to right,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to right,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--right.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(     to left,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to left,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--at-end.sc-ds-panel-nav,.scroll-edge-fade--hidden.sc-ds-panel-nav{-webkit-mask-image:none;mask-image:none}`;const A=()=>`.sc-ds-panel-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-panel-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-panel-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-panel-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-panel-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-panel-nav-h,.ds-interaction-fill.sc-ds-panel-nav{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before,.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before{z-index:1}.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-panel-nav-h,.ds-interaction-fill--bordered.sc-ds-panel-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-panel-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-panel-nav-h,.ds-interaction-fill--selected.sc-ds-panel-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-panel-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-panel-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-panel-nav-h>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill.sc-ds-panel-nav>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill__content.sc-ds-panel-nav{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-panel-nav-h,.ds-interaction-fill--on-medium.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-panel-nav-h,.ds-interaction-fill--on-bold.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-panel-nav-h,.ds-interaction-fill--on-strong.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-panel-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-panel-nav{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-panel-nav-h,.ds-interaction-fill--on-navigation.sc-ds-panel-nav{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.panel-nav.sc-ds-panel-nav{--_nav-width:var(--dimension-panel-width-2xs);--_nav-width-collapsed:var(--dimension-size-600);--_nav-item-height:var(--dimension-size-400, 32px);--_nav-padding-x:var(--dimension-space-100, 8px);--_nav-padding-y:var(--dimension-space-100, 8px);--_nav-footer-btn-w:calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));--_nav-speed:var(--ds-panel-nav-speed, 1);--_nav-expand-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-expand-motion:var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-motion:var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-out-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-out-motion:var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}ds-app-shell.sc-ds-panel-nav-h:not([gradient-preset='none']) .panel-nav.sc-ds-panel-nav,ds-app-shell:not([gradient-preset='none']) .sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav{background-color:transparent}.panel-nav--dashboard.sc-ds-panel-nav,.panel-nav--settings.sc-ds-panel-nav{--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;position:relative;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background-color:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:visible;transition:width var(--_nav-expand-motion),     min-width var(--_nav-expand-motion),     background-color var(--effect-motion-short-3, 200ms ease),     border-color var(--effect-motion-short-3, 200ms ease);font-family:var(--typography-font-family, system-ui);isolation:isolate}.panel-nav__header.sc-ds-panel-nav,.panel-nav__body.sc-ds-panel-nav,.panel-nav__footer.sc-ds-panel-nav{position:relative;z-index:3}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{display:flex;align-items:center;height:var(--dimension-size-600, 48px);padding:var(--dimension-space-100, 8px);flex-shrink:0;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;position:relative;z-index:0;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-primary);flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:2;opacity:1}.panel-nav__m-mark.sc-ds-panel-nav{width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);display:block}.panel-nav__header-toggle.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-toggle.sc-ds-panel-nav{opacity:1}.panel-nav__body.sc-ds-panel-nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);padding:var(--dimension-space-100, 8px);box-sizing:border-box;scrollbar-width:none}.panel-nav__body.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}ds-text.panel-nav__group-label.sc-ds-panel-nav{display:flex;align-items:center;box-sizing:border-box;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);padding:0 calc(var(--dimension-space-075, 6px) + var(--dimension-space-025, 2px));white-space:nowrap;overflow:hidden;max-height:var(--dimension-size-300, 24px);opacity:1;transition:opacity var(--_nav-label-fade-motion) 0ms,     max-height var(--_nav-label-fade-motion) 0ms,     padding var(--_nav-label-fade-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;position:relative;z-index:0;display:flex;align-items:center;gap:var(--dimension-space-050, 4px);padding:0 var(--dimension-space-075, 6px);height:var(--dimension-size-400, 32px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative;z-index:2}.panel-nav__item-label.sc-ds-panel-nav{position:relative;z-index:2;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:var(--typography-lineheight-md, 20px);opacity:1;mask-image:linear-gradient(to right, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to right, black 50%, transparent 100%);mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-position:0% 0;-webkit-mask-position:0% 0;transition:opacity var(--_nav-label-fade-motion) 0ms,     mask-position var(--_nav-label-fade-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-motion) 0ms}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--dimension-space-025, 2px)}.panel-nav__item-dot.sc-ds-panel-nav{position:absolute;z-index:2;right:calc(var(--dimension-space-100, 8px) + var(--dimension-space-050, 4px) + var(--dimension-stroke-width-012, 1px));top:calc(var(--dimension-space-100, 8px) + var(--dimension-space-050, 4px) + var(--dimension-stroke-width-012, 1px));pointer-events:none;transition:right var(--_nav-expand-motion),     top var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav{right:var(--dimension-space-075);top:var(--dimension-space-075)}.panel-nav--animating.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{text-overflow:clip}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{opacity:0;pointer-events:none;text-overflow:clip;mask-position:100% 0;-webkit-mask-position:100% 0;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     mask-position var(--_nav-label-fade-out-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms}.panel-nav--collapsed.sc-ds-panel-nav ds-text.panel-nav__group-label.sc-ds-panel-nav{opacity:0;max-height:0;padding:0 calc(var(--dimension-space-075, 6px) + var(--dimension-space-025, 2px));pointer-events:none;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     max-height var(--_nav-label-fade-out-motion) 0ms,     padding var(--_nav-label-fade-out-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__footer.sc-ds-panel-nav{position:relative;flex-shrink:0;height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));transition:height var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav{height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px))}.panel-nav__footer-btn.sc-ds-panel-nav{position:absolute;left:var(--_nav-padding-x);top:var(--_nav-padding-y);--ds-button-unfilled-fg:var(--_nav-fg-secondary);--ds-button-unfilled-fg-active:var(--_nav-fg-primary);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}.panel-nav__footer-user.sc-ds-panel-nav{position:absolute;left:calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));right:calc(var(--_nav-padding-x) - var(--dimension-stroke-width-012, 1px));top:var(--_nav-padding-y);width:auto;min-width:0;transition:left var(--_nav-expand-motion),     right var(--_nav-expand-motion),     top var(--_nav-expand-motion),     color var(--effect-motion-short-3, 200ms ease)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user.sc-ds-panel-nav{left:var(--_nav-padding-x);top:calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px))}.panel-nav__footer-user-label.sc-ds-panel-nav{text-align:right;position:absolute;left:var(--dimension-space-075, 6px);right:calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));top:50%;transform:translateY(-50%);flex:none;height:var(--typography-lineheight-md, 20px);mask-image:none;-webkit-mask-image:none;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-label.sc-ds-panel-nav{opacity:0;pointer-events:none;mask-position:0% 0;-webkit-mask-position:0% 0}.panel-nav__footer-user-icon.sc-ds-panel-nav{position:absolute;left:calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));top:0;bottom:0;height:auto;display:flex;align-items:center;justify-content:center;transition:left var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-icon.sc-ds-panel-nav{left:var(--dimension-space-075, 6px)}.panel-nav__footer-icon-expanded.sc-ds-panel-nav,.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-motion)}.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-out-motion)}ds-text.panel-nav__user-initial.sc-ds-panel-nav,ds-text.panel-nav__user-initial.ds-text--caption.sc-ds-panel-nav{position:absolute;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%, -50%);display:block;width:max-content;max-width:none;min-width:0;line-height:1;text-align:center;color:var(--_nav-fg-secondary);pointer-events:none;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__resize-handle.sc-ds-panel-nav{position:absolute;top:0;right:var(--dimension-space-n050, -4px);bottom:0;width:var(--dimension-space-100, 8px);z-index:20;cursor:ew-resize;touch-action:none;background:transparent}.panel-nav__resize-handle.sc-ds-panel-nav::before{content:'';position:absolute;inset:0;background:rgba(0, 0, 0, 0.001)}.panel-nav__resize-handle.sc-ds-panel-nav::after{content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--dimension-stroke-width-025, 2px);background:var(--color-foreground-primary);opacity:0;pointer-events:none;transition:opacity var(--effect-motion-short-2, 100ms ease-in-out)}.panel-nav__resize-handle--overlay.sc-ds-panel-nav::after{opacity:1}@media (prefers-reduced-motion: reduce){.panel-nav.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::before,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::after,.panel-nav__resize-handle.sc-ds-panel-nav,.panel-nav__resize-handle.sc-ds-panel-nav::before,.panel-nav__resize-handle.sc-ds-panel-nav::after{transition-duration:var(--effect-animation-duration-instant) !important;animation-duration:var(--effect-animation-duration-instant) !important;transition-delay:var(--effect-animation-duration-instant) !important}}`;const I=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavSelect=a(this,"dsNavSelect");this.dsNavToggle=a(this,"dsNavToggle");this.dsChromeTransitionStart=a(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=a(this,"dsChromeTransitionEnd");this.dsNavFooterAction=a(this,"dsNavFooterAction");this.dsNavUserAction=a(this,"dsNavUserAction");this.navStyle="dashboard";this.disableViewTransition=false;this.groups="[]";this.routerMode="anchor";this.activeId="";this.collapsed=false;this.breakpoint=0;this.storageKey="";this.currentUrl="";this.userName="";this.userInitial="";this.dashboardLabel="Dashboard";this.settingsLabel="Settings";this.accountLabel="Account";this.dashboardNavigationLabel="Dashboard navigation";this.settingsNavigationLabel="Settings navigation";this.expandNavigationLabel="Expand navigation";this.collapseNavigationLabel="Collapse navigation";this.renderedStyle="dashboard";this.parsedGroups=[];this.isAnimating=false;this.rovingIndex=0;this.viewportNarrow=false;this.urlDerivedActiveId="";this.isDragging=false;this.dragStartX=0;this.didSnap=false;this.lastDeltaX=0;this.edgeOverlayTimer=null;this.showEdgeOverlay=false}get effectiveActiveId(){return this.urlDerivedActiveId||this.activeId}get effectiveDisableViewTransition(){return w(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(e,n){if(n===undefined)return;this.startCollapseAnimation()}onViewportNarrowChange(e,n){if(n===undefined)return;this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.breakpoint>0)this.connectResizeObserver()}onGroupsChange(e){this.parsedGroups=y(e);this.rovingIndex=0;this.syncActiveFromUrl()}onActiveIdChange(){}onCurrentUrlChange(){this.syncActiveFromUrl()}onNavStyleChange(e){this.renderedStyle=e}componentWillLoad(){this.renderedStyle=m(this.navStyle,this.el.getAttribute("nav-style"));if(this.storageKey){try{const e=localStorage.getItem(this.storageKey);if(e!==null)this.collapsed=e==="true"}catch{}}this.onGroupsChange(this.groups);this.syncActiveFromUrl()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();if(this.breakpoint>0)this.connectResizeObserver()}disconnectedCallback(){this.disconnectResizeObserver();this.clearEdgeOverlayTimer();if(this.globalMouseMoveHandler){window.removeEventListener("mousemove",this.globalMouseMoveHandler)}if(this.globalMouseUpHandler){window.removeEventListener("mouseup",this.globalMouseUpHandler)}}startCollapseAnimation(){if(this.isAnimating)return;this.isAnimating=true;this.dsChromeTransitionStart.emit({source:"panel-nav"});const e=this.el.querySelector(".panel-nav");const n=e?.getBoundingClientRect().width??0;if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}this.transitionEndHandler=n=>{if(n.propertyName==="width"){this.finishCollapseAnimation(e)}};e?.addEventListener("transitionend",this.transitionEndHandler);requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(!this.isAnimating)return;const a=e?.getBoundingClientRect().width??0;if(Math.abs(a-n)<1){this.finishCollapseAnimation(e)}}))}))}finishCollapseAnimation(e){if(!this.isAnimating)return;this.isAnimating=false;this.dsChromeTransitionEnd.emit({source:"panel-nav"});if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}}connectResizeObserver(){this.viewportNarrow=window.innerWidth<this.breakpoint;this.resizeObserver=new ResizeObserver((()=>{this.viewportNarrow=window.innerWidth<this.breakpoint}));this.resizeObserver.observe(document.documentElement)}disconnectResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=undefined}syncActiveFromUrl(){if(!this.currentUrl){this.urlDerivedActiveId="";return}this.urlDerivedActiveId=_(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){if(g(this.renderedStyle,this.navStyle)){this.renderedStyle=this.navStyle}if(k(this.parsedGroups,this.groups)){this.onGroupsChange(this.groups)}else if(this.currentUrl){this.syncActiveFromUrl()}}scheduleDeferredHostPropSync(){let n=e.HOST_PROP_SYNC_BUDGET;const a=()=>{this.syncHostPropsIfNeeded();if(--n>0){requestAnimationFrame(a)}};queueMicrotask(a)}applyToggle(e){this.collapsed=e;if(this.storageKey){try{localStorage.setItem(this.storageKey,String(e))}catch{}}this.dsNavToggle.emit(e)}getAllItems(){return this.parsedGroups.flatMap((e=>e.items))}getFooterRovingIndex(){return 1+this.getAllItems().length}getUserRovingIndex(){return this.getFooterRovingIndex()+1}getRovingElement(e){const n=this.getAllItems().length;if(e===0){return this.el.querySelector(".panel-nav__header-btn")}if(e>=1&&e<=n){const n=this.el.querySelectorAll(".panel-nav__body .panel-nav__item");return n[e-1]??null}if(e===this.getFooterRovingIndex()){return this.el.querySelector(".panel-nav__footer-btn .button-icon")}if(e===this.getUserRovingIndex()){return this.el.querySelector(".panel-nav__footer-user")}return null}focusRovingAt(e){this.rovingIndex=e;this.getRovingElement(e)?.focus({preventScroll:true})}activateRovingIndex(e){const n=this.getAllItems().length;const a=this.getAllItems();if(e===0){this.handleToggle();return}if(e>=1&&e<=n){this.handleItemClick(a[e-1].id);return}if(e===this.getFooterRovingIndex()){this.handleFooterAction();return}if(e===this.getUserRovingIndex()){const e=this.el.querySelector(`#${z}`);if(e)this.dsNavUserAction.emit({anchor:e,menuPlacement:h})}}handleRovingKeyDown(e,n){if(e.key==="Enter"||e.key===" "){e.preventDefault();this.activateRovingIndex(n);return}const a=this.getFooterRovingIndex();const i=this.getUserRovingIndex();let t;switch(e.key){case"ArrowDown":if(n===i)return;if(n===a)t=i;else t=n+1;break;case"ArrowUp":if(n===0)return;if(n===i)t=a;else if(n===a)t=a-1;else t=n-1;break;case"ArrowRight":if(n===a)t=i;else return;break;case"ArrowLeft":if(n===i)t=a;else return;break;case"Home":e.preventDefault();t=0;break;case"End":e.preventDefault();t=i;break;default:return}if(t===undefined||t===n)return;e.preventDefault();this.focusRovingAt(t)}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){this.applyToggle(!this.collapsed)}async toggleCollapsed(){this.handleToggle()}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(e){const n=e.currentTarget;this.dsNavUserAction.emit({anchor:n,menuPlacement:h})}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();this.edgeOverlayTimer=window.setTimeout((()=>{this.showEdgeOverlay=true;this.edgeOverlayTimer=null}),500)}handleResizeHandleMouseLeave(){if(this.isDragging)return;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false}handleResizeHandleMouseDown(e){e.preventDefault();e.stopPropagation();const n=this.collapsed||this.viewportNarrow;this.isDragging=true;this.dragStartX=e.clientX;this.didSnap=false;this.lastDeltaX=0;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false;document.body.style.cursor="ew-resize";document.body.style.userSelect="none";const a=e=>{const a=e.clientX-this.dragStartX;this.lastDeltaX=Math.abs(a);if(this.didSnap)return;if(!n&&a<-8){this.applyToggle(true);this.didSnap=true}else if(n&&a>8){this.applyToggle(false);this.didSnap=true}};const i=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!n)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",a);window.removeEventListener("mouseup",i);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=a;this.globalMouseUpHandler=i;window.addEventListener("mousemove",a);window.addEventListener("mouseup",i)}renderFooterAction(e){const n=e?this.settingsLabel:this.dashboardLabel;return i("ds-tooltip",{label:n,side:"right",size:"sm"},i("ds-button-unfilled",{variant:"icon",class:"panel-nav__footer-btn",icon:e?"Gear":"Dashboard",activeFill:false,hasBorder:false,focusTabIndex:this.rovingIndex===this.getFooterRovingIndex()?0:-1,"aria-label":n,onDsClick:()=>this.handleFooterAction(),onKeyDown:e=>this.handleRovingKeyDown(e,this.getFooterRovingIndex()),onFocusin:()=>{this.rovingIndex=this.getFooterRovingIndex()}}))}renderFooterUser(e,n,a){const t=e?this.accountLabel:"";const s=i("button",{type:"button",id:z,class:"panel-nav__item panel-nav__footer-user ds-focus-ring-inset ds-interaction-fill",tabIndex:this.rovingIndex===this.getUserRovingIndex()?0:-1,"aria-label":this.accountLabel,onClick:e=>this.handleUserAction(e),onKeyDown:e=>this.handleRovingKeyDown(e,this.getUserRovingIndex()),onFocus:()=>{this.rovingIndex=this.getUserRovingIndex()}},i("ds-text",{class:"panel-nav__item-label panel-nav__footer-user-label panel-nav__item-label-text",as:"span",variant:"text-body-medium",emphasis:true,color:"inherit"},n),i("span",{class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},i("span",{class:"panel-nav__footer-icon-expanded"},i("ds-icon",{name:"ChevronUpDown",size:"md",color:"inherit"})),i("span",{class:"panel-nav__footer-icon-collapsed"},i("ds-icon",{name:"Circle",size:"md",color:"inherit"}),i("ds-text",{class:"panel-nav__user-initial",as:"span",variant:"text-caption",emphasis:true,align:"center",color:"inherit"},a))));return i("ds-tooltip",{label:t,side:"right",size:"sm"},s)}renderNavItem(e,n,a){const t=e.id===this.effectiveActiveId;const s=n+1;const o=[i("span",{class:"panel-nav__item-icon"},i("ds-icon",{name:e.icon,size:"md",color:"inherit",flag:e.flag})),i("ds-text",{class:"panel-nav__item-label panel-nav__item-label-text",as:"span",variant:"text-body-medium",emphasis:t,color:"inherit"},e.label),e.dot&&i("ds-badge",{class:"panel-nav__item-dot",variant:"dot",background:"var(--_nav-bg)",label:"","aria-hidden":"true"})];const r={class:{"panel-nav__item":true,"panel-nav__item--active":t,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"aria-current":t?"page":undefined,tabIndex:s===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleRovingKeyDown(e,s),onFocus:()=>{this.rovingIndex=s}};const l=this.routerMode==="anchor"&&e.href;const d=l?i("a",{...r,href:e.href},o):i("button",{...r,type:"button"},o);return i("ds-tooltip",{label:a?e.label:"",side:"right",size:"sm"},d)}render(){const e=this.renderedStyle;const n=e==="dashboard";const a=this.navStyle==="dashboard";const s=this.collapsed||this.viewportNarrow;const{userName:o,userInitial:r}=this;const l={"panel-nav":true,"panel-nav--dashboard":a,"panel-nav--settings":!a,"panel-nav--collapsed":s,"panel-nav--animating":this.isAnimating};return i(t,{key:"7e8c56e73161ffc027e1596cd564d013ec36c017",style:{display:"block",position:"relative"}},i("nav",{key:"8f3af87901d504d7afdd5a2f42861bfe80b5d8ab",class:l,"aria-label":n?this.dashboardNavigationLabel:this.settingsNavigationLabel},i("div",{key:"29f1d7c91aa575c410083fbf2ddf17f97d456097",class:"panel-nav__header"},i("button",{key:"c629a32108293b2689364582b4b00670dfc37033",type:"button",class:"panel-nav__header-btn ds-focus-ring-inset ds-interaction-fill",tabIndex:this.rovingIndex===0?0:-1,onClick:()=>this.handleToggle(),onKeyDown:e=>this.handleRovingKeyDown(e,0),onFocus:()=>{this.rovingIndex=0},"aria-label":s?this.expandNavigationLabel:this.collapseNavigationLabel,"aria-expanded":s?"false":"true"},i("span",{key:"35df8074906364df5c3fe84c1065ec856f223975",class:"panel-nav__header-logo","aria-hidden":"true"},i("svg",{key:"77721761bba2cc83795486c13f36284761c95937",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},i("path",{key:"4af4a90a532dbe412fffe30de85c4a688e3aeb0c",d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"}))),i("span",{key:"a06b36c1fea40166ce3f5622f1aff79d4c75c27c",class:"panel-nav__header-toggle","aria-hidden":"true"},i("ds-icon",{key:"5ff18a9a10c2d30f6617484ece94b04a032a52e6",name:s?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),i("div",{key:"d7f33eb57cc25655664589fb98652bbb2b7efe74",class:{"panel-nav__body":true,...p({edges:"bottom"})}},(()=>{let e=0;return this.parsedGroups.map((n=>i("div",{class:"panel-nav__group"},n.label&&i("ds-text",{class:"panel-nav__group-label",as:"span",variant:"text-caption",emphasis:true,color:"inherit"},n.label),n.items.map((n=>this.renderNavItem(n,e++,s))))))})()),i("div",{key:"37c9e22a65a818e0d6c1e48d088d3dcb6a47dcec",class:"panel-nav__footer"},this.renderFooterAction(n),this.renderFooterUser(s,o,r))),!this.viewportNarrow&&i("div",{key:"1555e5b4d66c50567e835c22442ae0c6721b3a28",class:{"panel-nav__resize-handle":true,"panel-nav__resize-handle--overlay":this.showEdgeOverlay},onMouseEnter:()=>this.handleResizeHandleMouseEnter(),onMouseLeave:()=>this.handleResizeHandleMouseLeave(),onMouseDown:e=>this.handleResizeHandleMouseDown(e),"aria-hidden":"true"}))}get el(){return this}static get watchers(){return{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}}static get style(){return C()+A()}},[2,"ds-panel-nav",{navStyle:[513,"nav-style"],disableViewTransition:[4,"disable-view-transition"],groups:[1],routerMode:[1,"router-mode"],activeId:[1,"active-id"],collapsed:[1028],breakpoint:[2],storageKey:[1,"storage-key"],currentUrl:[1,"current-url"],userName:[1,"user-name"],userInitial:[1,"user-initial"],dashboardLabel:[1,"dashboard-label"],settingsLabel:[1,"settings-label"],accountLabel:[1,"account-label"],dashboardNavigationLabel:[1,"dashboard-navigation-label"],settingsNavigationLabel:[1,"settings-navigation-label"],expandNavigationLabel:[1,"expand-navigation-label"],collapseNavigationLabel:[1,"collapse-navigation-label"],renderedStyle:[32],parsedGroups:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],showEdgeOverlay:[32],toggleCollapsed:[64]},undefined,{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}]);I.HOST_PROP_SYNC_BUDGET=8;function N(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-button-unfilled","ds-icon","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(s(e))){customElements.define(s(e),I)}break;case"ds-badge":if(!customElements.get(s(e))){o()}break;case"ds-button-unfilled":if(!customElements.get(s(e))){r()}break;case"ds-icon":if(!customElements.get(s(e))){l()}break;case"ds-text":if(!customElements.get(s(e))){d()}break;case"ds-tooltip":if(!customElements.get(s(e))){c()}break}}))}N();const D=I;const E=N;export{D as DsPanelNav,E as defineCustomElement};
+import{p as e,H as a,c as n,h as t,a as s,t as i}from"./index.js";import{d as o}from"./p-CHcS6Z4V.js";import{d as r}from"./p-B2J0Kelv.js";import{d as l}from"./p-9Qu1ls2y.js";import{d}from"./p-emacH2W5.js";import{d as c}from"./p-BOc1hs1x.js";import{a as v}from"./p-drBA73M_.js";function p(e){const a=Array.isArray(e.edges)?e.edges:[e.edges];const n={"scroll-edge-fade":true,"scroll-edge-fade--scroll-aware":e.scrollAware===true,"scroll-edge-fade--hidden":e.hidden===true};for(const e of a){n[`scroll-edge-fade--${e}`]=true}const{atEnd:t}=e;if(t===true){n["scroll-edge-fade--at-end"]=true}else if(t&&typeof t==="object"){for(const e of a){if(t[e]){n[`scroll-edge-fade--${e}-at-edge`]=true}}}return n}const f={side:"right",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:v.space050};const h="data-nav-style";function g(e){if(e==="dashboard"||e==="settings")return e;return undefined}function u(e,a,n){const t=g(a);if(t)return t;const s=typeof document!=="undefined"?document.documentElement.getAttribute(h):null;const i=g(s);if(i)return i;return e}function m(e,a){return e!==a}function b(e,a){return e===a||e.startsWith(`${a}/`)}function _(e,a){if(!e)return"";let n="";let t=0;for(const s of a){if(!s.href)continue;if(b(e,s.href)&&s.href.length>t){n=s.id;t=s.href.length}}return n}function x(e){return e.reduce(((e,a)=>e+a.items.length),0)}function y(e,a){return a?null:!e}function k(e){if(Array.isArray(e))return e;if(typeof e==="string"){try{const a=JSON.parse(e);return Array.isArray(a)?a:[]}catch{return[]}}return[]}function w(e,a){if(e)return true;if(a===null)return false;return a!=="false"}function z(e,a){return x(e)===0&&x(k(a))>0}const C="ds-panel-nav-user-menu-anchor";const A=()=>`@property --ds-scroll-edge-fade-top{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-bottom{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-left{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-right{syntax:'<length-percentage>';inherits:false;initial-value:0px}@keyframes ds-scroll-edge-fade-reveal-top{from{--ds-scroll-edge-fade-top:0px}to{--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top)}}@keyframes ds-scroll-edge-fade-reveal-bottom{from{--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom)}to{--ds-scroll-edge-fade-bottom:0px}}@keyframes ds-scroll-edge-fade-reveal-left{from{--ds-scroll-edge-fade-left:0px}to{--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left)}}@keyframes ds-scroll-edge-fade-reveal-right{from{--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right)}to{--ds-scroll-edge-fade-right:0px}}.scroll-edge-fade.sc-ds-panel-nav{--ds-scroll-edge-fade-size:var(--dimension-size-600);--ds-scroll-edge-fade-reveal-distance:var(--dimension-size-800);--ds-scroll-edge-fade-target-top:0px;--ds-scroll-edge-fade-target-bottom:0px;--ds-scroll-edge-fade-target-left:0px;--ds-scroll-edge-fade-target-right:0px;--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top);--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom);--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left);--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right);--ds-scroll-edge-fade-block-mask:linear-gradient(     to bottom,     transparent 0,     #000 var(--ds-scroll-edge-fade-top),     #000 calc(100% - var(--ds-scroll-edge-fade-bottom)),     transparent 100%   );--ds-scroll-edge-fade-inline-mask:linear-gradient(     to right,     transparent 0,     #000 var(--ds-scroll-edge-fade-left),     #000 calc(100% - var(--ds-scroll-edge-fade-right)),     transparent 100%   );-webkit-mask-image:var(--ds-scroll-edge-fade-block-mask),     var(--ds-scroll-edge-fade-inline-mask);mask-image:var(--ds-scroll-edge-fade-block-mask),     var(--ds-scroll-edge-fade-inline-mask);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--top.sc-ds-panel-nav{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-panel-nav{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-panel-nav{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-panel-nav{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-panel-nav{animation-name:ds-scroll-edge-fade-reveal-top,       ds-scroll-edge-fade-reveal-bottom,       ds-scroll-edge-fade-reveal-left,       ds-scroll-edge-fade-reveal-right;animation-duration:1ms;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-timeline:scroll(self y), scroll(self y), scroll(self x), scroll(self x);animation-range:0 var(--ds-scroll-edge-fade-reveal-distance),       calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%,       0 var(--ds-scroll-edge-fade-reveal-distance),       calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%}}.scroll-edge-fade--at-end.sc-ds-panel-nav,.scroll-edge-fade--hidden.sc-ds-panel-nav{-webkit-mask-image:none;mask-image:none}`;const I=()=>`.sc-ds-panel-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-panel-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-panel-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-panel-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-panel-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-panel-nav-h,.ds-interaction-fill.sc-ds-panel-nav{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before,.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before{z-index:1}.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-panel-nav-h,.ds-interaction-fill--bordered.sc-ds-panel-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-panel-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-panel-nav-h,.ds-interaction-fill--selected.sc-ds-panel-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-panel-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-panel-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-panel-nav-h>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill.sc-ds-panel-nav>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill__content.sc-ds-panel-nav{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-panel-nav-h,.ds-interaction-fill--on-medium.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-panel-nav-h,.ds-interaction-fill--on-bold.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-panel-nav-h,.ds-interaction-fill--on-strong.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-panel-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-panel-nav{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-panel-nav-h,.ds-interaction-fill--on-navigation.sc-ds-panel-nav{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.panel-nav.sc-ds-panel-nav{--_nav-width:var(--dimension-panel-width-2xs);--_nav-width-collapsed:var(--dimension-size-600);--_nav-item-height:var(--dimension-size-400, 32px);--_nav-padding-x:var(--dimension-space-100, 8px);--_nav-padding-y:var(--dimension-space-100, 8px);--_nav-footer-btn-w:calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));--_nav-speed:var(--ds-panel-nav-speed, 1);--_nav-expand-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-expand-motion:var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-motion:var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-out-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-out-motion:var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}ds-app-shell.sc-ds-panel-nav-h:not([gradient-preset='none']) .panel-nav.sc-ds-panel-nav,ds-app-shell:not([gradient-preset='none']) .sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav{background-color:transparent}.panel-nav--dashboard.sc-ds-panel-nav,.panel-nav--settings.sc-ds-panel-nav{--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;position:relative;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background-color:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:visible;transition:width var(--_nav-expand-motion),     min-width var(--_nav-expand-motion),     background-color var(--effect-motion-short-3, 200ms ease),     border-color var(--effect-motion-short-3, 200ms ease);font-family:var(--typography-font-family, system-ui);isolation:isolate}.panel-nav__header.sc-ds-panel-nav,.panel-nav__body.sc-ds-panel-nav,.panel-nav__footer.sc-ds-panel-nav{position:relative;z-index:3}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{display:flex;align-items:center;height:var(--dimension-size-600, 48px);padding:var(--dimension-space-100, 8px);flex-shrink:0;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;position:relative;z-index:0;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-primary);flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav--breakpoint-locked.sc-ds-panel-nav .panel-nav__header-btn.sc-ds-panel-nav{cursor:default}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:2;opacity:1}.panel-nav__m-mark.sc-ds-panel-nav{width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);display:block}.panel-nav__header-toggle.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none}.panel-nav.sc-ds-panel-nav:not(.panel-nav--breakpoint-locked) .panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav.sc-ds-panel-nav:not(.panel-nav--breakpoint-locked) .panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-toggle.sc-ds-panel-nav{opacity:1}.panel-nav__body.sc-ds-panel-nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);padding:var(--dimension-space-100, 8px);box-sizing:border-box;scrollbar-width:none}.panel-nav__body.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}ds-text.panel-nav__group-label.sc-ds-panel-nav{display:flex;align-items:center;box-sizing:border-box;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);padding:0 calc(var(--dimension-space-075, 6px) + var(--dimension-space-025, 2px));white-space:nowrap;overflow:hidden;max-height:var(--dimension-size-300, 24px);opacity:1;transition:opacity var(--_nav-label-fade-motion) 0ms,     max-height var(--_nav-label-fade-motion) 0ms,     padding var(--_nav-label-fade-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;position:relative;z-index:0;display:flex;align-items:center;gap:var(--dimension-space-050, 4px);padding:0 var(--dimension-space-075, 6px);height:var(--dimension-size-400, 32px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative;z-index:2}.panel-nav__item-label.sc-ds-panel-nav{position:relative;z-index:2;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:var(--typography-lineheight-md, 20px);opacity:1;mask-image:linear-gradient(to right, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to right, black 50%, transparent 100%);mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-position:0% 0;-webkit-mask-position:0% 0;transition:opacity var(--_nav-label-fade-motion) 0ms,     mask-position var(--_nav-label-fade-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-motion) 0ms}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--dimension-space-025, 2px)}.panel-nav__item-dot-box.sc-ds-panel-nav{position:absolute;z-index:2;right:var(--dimension-space-075, 6px);top:var(--dimension-space-075, 6px);display:flex;align-items:center;justify-content:center;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);pointer-events:none}.panel-nav__item-dot.sc-ds-panel-nav{transition:transform var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav{transform:translate(     calc(var(--dimension-space-075, 6px) + var(--dimension-stroke-width-012, 1px)),     calc(0px - var(--dimension-space-075, 6px) - var(--dimension-stroke-width-012, 1px))   )}.panel-nav--animating.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{text-overflow:clip}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{opacity:0;pointer-events:none;text-overflow:clip;mask-position:100% 0;-webkit-mask-position:100% 0;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     mask-position var(--_nav-label-fade-out-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms}.panel-nav--collapsed.sc-ds-panel-nav ds-text.panel-nav__group-label.sc-ds-panel-nav{opacity:0;max-height:0;padding:0 calc(var(--dimension-space-075, 6px) + var(--dimension-space-025, 2px));pointer-events:none;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     max-height var(--_nav-label-fade-out-motion) 0ms,     padding var(--_nav-label-fade-out-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__footer.sc-ds-panel-nav{position:relative;flex-shrink:0;height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));transition:height var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav{height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px))}.panel-nav__footer-btn.sc-ds-panel-nav{position:absolute;left:var(--_nav-padding-x);top:var(--_nav-padding-y);--ds-button-unfilled-fg:var(--_nav-fg-secondary);--ds-button-unfilled-fg-active:var(--_nav-fg-primary);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}.panel-nav__footer-user.sc-ds-panel-nav{position:absolute;left:calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));right:calc(var(--_nav-padding-x) - var(--dimension-stroke-width-012, 1px));top:var(--_nav-padding-y);width:auto;min-width:0;transition:left var(--_nav-expand-motion),     right var(--_nav-expand-motion),     top var(--_nav-expand-motion),     color var(--effect-motion-short-3, 200ms ease)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user.sc-ds-panel-nav{left:var(--_nav-padding-x);top:calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px))}.panel-nav__footer-user-label.sc-ds-panel-nav{text-align:right;position:absolute;left:var(--dimension-space-075, 6px);right:calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));top:50%;transform:translateY(-50%);flex:none;height:var(--typography-lineheight-md, 20px);mask-image:none;-webkit-mask-image:none;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-label.sc-ds-panel-nav{opacity:0;pointer-events:none;mask-position:0% 0;-webkit-mask-position:0% 0}.panel-nav__footer-user-icon.sc-ds-panel-nav{position:absolute;left:calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));top:0;bottom:0;height:auto;display:flex;align-items:center;justify-content:center;transition:left var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-icon.sc-ds-panel-nav{left:var(--dimension-space-075, 6px)}.panel-nav__footer-icon-expanded.sc-ds-panel-nav,.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-motion)}.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-out-motion)}ds-text.panel-nav__user-initial.sc-ds-panel-nav,ds-text.panel-nav__user-initial.ds-text--caption.sc-ds-panel-nav{position:absolute;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%, -50%);display:block;width:max-content;max-width:none;min-width:0;text-align:center;color:var(--_nav-fg-secondary);pointer-events:none;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__resize-handle.sc-ds-panel-nav{position:absolute;top:0;right:var(--dimension-space-n050, -4px);bottom:0;width:var(--dimension-space-100, 8px);z-index:20;cursor:ew-resize;touch-action:none;background:transparent}.panel-nav__resize-handle.sc-ds-panel-nav::before{content:'';position:absolute;inset:0;background:rgba(0, 0, 0, 0.001)}.panel-nav__resize-handle.sc-ds-panel-nav::after{content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--dimension-stroke-width-025, 2px);background:var(--color-foreground-primary);opacity:0;pointer-events:none;transition:opacity var(--effect-motion-short-2, 100ms ease-in-out)}.panel-nav__resize-handle--overlay.sc-ds-panel-nav::after{opacity:1}@media (prefers-reduced-motion: reduce){.panel-nav.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::before,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::after,.panel-nav__resize-handle.sc-ds-panel-nav,.panel-nav__resize-handle.sc-ds-panel-nav::before,.panel-nav__resize-handle.sc-ds-panel-nav::after{transition-duration:var(--effect-animation-duration-instant) !important;animation-duration:var(--effect-animation-duration-instant) !important;transition-delay:var(--effect-animation-duration-instant) !important}}`;const N=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavSelect=n(this,"dsNavSelect");this.dsNavToggle=n(this,"dsNavToggle");this.dsChromeTransitionStart=n(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=n(this,"dsChromeTransitionEnd");this.dsNavFooterAction=n(this,"dsNavFooterAction");this.dsNavUserAction=n(this,"dsNavUserAction");this.navStyle="dashboard";this.disableViewTransition=false;this.groups="[]";this.routerMode="anchor";this.activeId="";this.collapsed=false;this.breakpoint=0;this.storageKey="";this.currentUrl="";this.userName="";this.userInitial="";this.dashboardLabel="Dashboard";this.settingsLabel="Settings";this.accountLabel="Account";this.dashboardNavigationLabel="Dashboard navigation";this.settingsNavigationLabel="Settings navigation";this.expandNavigationLabel="Expand navigation";this.collapseNavigationLabel="Collapse navigation";this.renderedStyle="dashboard";this.parsedGroups=[];this.isAnimating=false;this.rovingIndex=0;this.viewportNarrow=false;this.urlDerivedActiveId="";this.isDragging=false;this.dragStartX=0;this.didSnap=false;this.lastDeltaX=0;this.edgeOverlayTimer=null;this.showEdgeOverlay=false}get effectiveActiveId(){return this.urlDerivedActiveId||this.activeId}get effectiveDisableViewTransition(){return w(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(e,a){if(a===undefined)return;this.startCollapseAnimation()}onViewportNarrowChange(e,a){if(a===undefined)return;if(e&&this.rovingIndex===0){this.rovingIndex=this.getFirstRovingIndex()}this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.breakpoint>0)this.connectResizeObserver()}onGroupsChange(e){this.parsedGroups=k(e);this.rovingIndex=0;this.syncActiveFromUrl()}onActiveIdChange(){}onCurrentUrlChange(){this.syncActiveFromUrl()}onNavStyleChange(e){this.renderedStyle=e}componentWillLoad(){this.renderedStyle=u(this.navStyle,this.el.getAttribute("nav-style"));if(this.storageKey){try{const e=localStorage.getItem(this.storageKey);if(e!==null)this.collapsed=e==="true"}catch{}}this.onGroupsChange(this.groups);this.syncActiveFromUrl()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();if(this.breakpoint>0)this.connectResizeObserver()}disconnectedCallback(){this.disconnectResizeObserver();this.clearEdgeOverlayTimer();if(this.globalMouseMoveHandler){window.removeEventListener("mousemove",this.globalMouseMoveHandler)}if(this.globalMouseUpHandler){window.removeEventListener("mouseup",this.globalMouseUpHandler)}}startCollapseAnimation(){if(this.isAnimating)return;this.isAnimating=true;this.dsChromeTransitionStart.emit({source:"panel-nav"});const e=this.el.querySelector(".panel-nav");const a=e?.getBoundingClientRect().width??0;if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}this.transitionEndHandler=a=>{if(a.propertyName==="width"){this.finishCollapseAnimation(e)}};e?.addEventListener("transitionend",this.transitionEndHandler);requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(!this.isAnimating)return;const n=e?.getBoundingClientRect().width??0;if(Math.abs(n-a)<1){this.finishCollapseAnimation(e)}}))}))}finishCollapseAnimation(e){if(!this.isAnimating)return;this.isAnimating=false;this.dsChromeTransitionEnd.emit({source:"panel-nav"});if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}}connectResizeObserver(){this.viewportNarrow=window.innerWidth<this.breakpoint;this.resizeObserver=new ResizeObserver((()=>{this.viewportNarrow=window.innerWidth<this.breakpoint}));this.resizeObserver.observe(document.documentElement)}disconnectResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=undefined}syncActiveFromUrl(){if(!this.currentUrl){this.urlDerivedActiveId="";return}this.urlDerivedActiveId=_(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){if(m(this.renderedStyle,this.navStyle)){this.renderedStyle=this.navStyle}if(z(this.parsedGroups,this.groups)){this.onGroupsChange(this.groups)}else if(this.currentUrl){this.syncActiveFromUrl()}}scheduleDeferredHostPropSync(){let a=e.HOST_PROP_SYNC_BUDGET;const n=()=>{this.syncHostPropsIfNeeded();if(--a>0){requestAnimationFrame(n)}};queueMicrotask(n)}applyToggle(e){if(this.viewportNarrow)return;this.collapsed=e;if(this.storageKey){try{localStorage.setItem(this.storageKey,String(e))}catch{}}this.dsNavToggle.emit(e)}getAllItems(){return this.parsedGroups.flatMap((e=>e.items))}getFirstRovingIndex(){return this.viewportNarrow?1:0}getFooterRovingIndex(){return 1+this.getAllItems().length}getUserRovingIndex(){return this.getFooterRovingIndex()+1}getRovingElement(e){const a=this.getAllItems().length;if(e===0){return this.viewportNarrow?null:this.el.querySelector(".panel-nav__header-btn")}if(e>=1&&e<=a){const a=this.el.querySelectorAll(".panel-nav__body .panel-nav__item");return a[e-1]??null}if(e===this.getFooterRovingIndex()){return this.el.querySelector(".panel-nav__footer-btn .button-icon")}if(e===this.getUserRovingIndex()){return this.el.querySelector(".panel-nav__footer-user")}return null}focusRovingAt(e){this.rovingIndex=e;this.getRovingElement(e)?.focus({preventScroll:true})}activateRovingIndex(e){const a=this.getAllItems().length;const n=this.getAllItems();if(e===0){this.handleToggle();return}if(e>=1&&e<=a){this.handleItemClick(n[e-1].id);return}if(e===this.getFooterRovingIndex()){this.handleFooterAction();return}if(e===this.getUserRovingIndex()){const e=this.el.querySelector(`#${C}`);if(e)this.dsNavUserAction.emit({anchor:e,menuPlacement:f})}}handleRovingKeyDown(e,a){if(e.key==="Enter"||e.key===" "){e.preventDefault();this.activateRovingIndex(a);return}const n=this.getFooterRovingIndex();const t=this.getUserRovingIndex();const s=this.getFirstRovingIndex();let i;switch(e.key){case"ArrowDown":if(a===t)return;if(a===n)i=t;else i=a+1;break;case"ArrowUp":if(a===s)return;if(a===t)i=n;else if(a===n)i=n-1;else i=a-1;break;case"ArrowRight":if(a===n)i=t;else return;break;case"ArrowLeft":if(a===t)i=n;else return;break;case"Home":e.preventDefault();i=s;break;case"End":e.preventDefault();i=t;break;default:return}if(i===undefined||i===a)return;e.preventDefault();this.focusRovingAt(i)}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){const e=y(this.collapsed,this.viewportNarrow);if(e!==null)this.applyToggle(e)}async toggleCollapsed(){this.handleToggle()}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(e){const a=e.currentTarget;this.dsNavUserAction.emit({anchor:a,menuPlacement:f})}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();this.edgeOverlayTimer=window.setTimeout((()=>{this.showEdgeOverlay=true;this.edgeOverlayTimer=null}),500)}handleResizeHandleMouseLeave(){if(this.isDragging)return;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false}handleResizeHandleMouseDown(e){e.preventDefault();e.stopPropagation();const a=this.collapsed||this.viewportNarrow;this.isDragging=true;this.dragStartX=e.clientX;this.didSnap=false;this.lastDeltaX=0;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false;document.body.style.cursor="ew-resize";document.body.style.userSelect="none";const n=e=>{const n=e.clientX-this.dragStartX;this.lastDeltaX=Math.abs(n);if(this.didSnap)return;if(!a&&n<-8){this.applyToggle(true);this.didSnap=true}else if(a&&n>8){this.applyToggle(false);this.didSnap=true}};const t=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!a)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",n);window.removeEventListener("mouseup",t);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=n;this.globalMouseUpHandler=t;window.addEventListener("mousemove",n);window.addEventListener("mouseup",t)}renderFooterAction(e){const a=e?this.settingsLabel:this.dashboardLabel;return t("ds-tooltip",{label:a,side:"right",size:"sm"},t("ds-button-unfilled",{variant:"icon",class:"panel-nav__footer-btn",icon:e?"Gear":"Dashboard",activeFill:false,hasBorder:false,focusTabIndex:this.rovingIndex===this.getFooterRovingIndex()?0:-1,"aria-label":a,onDsClick:()=>this.handleFooterAction(),onKeyDown:e=>this.handleRovingKeyDown(e,this.getFooterRovingIndex()),onFocusin:()=>{this.rovingIndex=this.getFooterRovingIndex()}}))}renderFooterUser(e,a,n){const s=e?this.accountLabel:"";const i=t("button",{type:"button",id:C,class:"panel-nav__item panel-nav__footer-user ds-focus-ring-inset ds-interaction-fill",tabIndex:this.rovingIndex===this.getUserRovingIndex()?0:-1,"aria-label":this.accountLabel,onClick:e=>this.handleUserAction(e),onKeyDown:e=>this.handleRovingKeyDown(e,this.getUserRovingIndex()),onFocus:()=>{this.rovingIndex=this.getUserRovingIndex()}},t("ds-text",{class:"panel-nav__item-label panel-nav__footer-user-label panel-nav__item-label-text",as:"span",variant:"text-body-medium",emphasis:true,color:"inherit"},a),t("span",{class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},t("span",{class:"panel-nav__footer-icon-expanded"},t("ds-icon",{name:"ChevronUpDown",size:"md",color:"inherit"})),t("span",{class:"panel-nav__footer-icon-collapsed"},t("ds-icon",{name:"Circle",size:"md",color:"inherit"}),t("ds-text",{class:"panel-nav__user-initial",as:"span",variant:"text-caption",emphasis:true,align:"center",color:"inherit"},n))));return t("ds-tooltip",{label:s,side:"right",size:"sm"},i)}renderNavItem(e,a,n){const s=e.id===this.effectiveActiveId;const i=a+1;const o=[t("span",{class:"panel-nav__item-icon"},t("ds-icon",{name:e.icon,size:"md",color:"inherit",flag:e.flag})),t("ds-text",{class:"panel-nav__item-label panel-nav__item-label-text",as:"span",variant:"text-body-medium",emphasis:s,color:"inherit"},e.label),e.dot&&t("span",{class:"panel-nav__item-dot-box","aria-hidden":"true"},t("ds-badge",{class:"panel-nav__item-dot",variant:"dot",background:"var(--_nav-bg)",label:""}))];const r={class:{"panel-nav__item":true,"panel-nav__item--active":s,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"aria-current":s?"page":undefined,tabIndex:i===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleRovingKeyDown(e,i),onFocus:()=>{this.rovingIndex=i}};const l=this.routerMode==="anchor"&&e.href;const d=l?t("a",{...r,href:e.href},o):t("button",{...r,type:"button"},o);return t("ds-tooltip",{label:n?e.label:"",side:"right",size:"sm"},d)}render(){const e=this.renderedStyle;const a=e==="dashboard";const n=this.navStyle==="dashboard";const i=this.collapsed||this.viewportNarrow;const{userName:o,userInitial:r}=this;const l={"panel-nav":true,"panel-nav--dashboard":n,"panel-nav--settings":!n,"panel-nav--collapsed":i,"panel-nav--breakpoint-locked":this.viewportNarrow,"panel-nav--animating":this.isAnimating};return t(s,{key:"6119588a610ca44195490f6781581fef835e024f",style:{display:"block",position:"relative"}},t("nav",{key:"2f40a14ef7e8605087a61f58c324aea17eee2035",class:l,"aria-label":a?this.dashboardNavigationLabel:this.settingsNavigationLabel},t("div",{key:"bb209b787372a9374610981d61c8f89659b72ae9",class:"panel-nav__header"},t("button",{key:"f27e490d0e6e2be188d6aaf0c9065fc439b4ecc1",type:"button",class:"panel-nav__header-btn ds-focus-ring-inset ds-interaction-fill",disabled:this.viewportNarrow,tabIndex:!this.viewportNarrow&&this.rovingIndex===0?0:-1,onClick:()=>this.handleToggle(),onKeyDown:e=>this.handleRovingKeyDown(e,0),onFocus:()=>{this.rovingIndex=0},"aria-label":i?this.expandNavigationLabel:this.collapseNavigationLabel,"aria-expanded":i?"false":"true"},t("span",{key:"3140e3e062505f58e47922e5e55855657d904226",class:"panel-nav__header-logo","aria-hidden":"true"},t("svg",{key:"37d593ebb99c2ddbfce85016bd887ddf7447ce79",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},t("path",{key:"05a7e603e6207254646b65c08fad25b6309e9129",d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"}))),t("span",{key:"1841cabd7e9312bb39b56f54fd390b9d806d4fa8",class:"panel-nav__header-toggle","aria-hidden":"true"},t("ds-icon",{key:"38b69e902ea2d77d6c6444d64a4607f18533bf7b",name:i?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),t("div",{key:"f1aa95f77f15b5bea8b75ff0961436fd91623700",class:{"panel-nav__body":true,...p({edges:"bottom"})}},(()=>{let e=0;return this.parsedGroups.map((a=>t("div",{class:"panel-nav__group"},a.label&&t("ds-text",{class:"panel-nav__group-label",as:"span",variant:"text-caption",emphasis:true,color:"inherit"},a.label),a.items.map((a=>this.renderNavItem(a,e++,i))))))})()),t("div",{key:"86d5c489a35812f30ec3435bb507cedc7cc054b5",class:"panel-nav__footer"},this.renderFooterAction(a),this.renderFooterUser(i,o,r))),!this.viewportNarrow&&t("div",{key:"679c4d1184f0c761016230e18cc2f7e70d9bc99b",class:{"panel-nav__resize-handle":true,"panel-nav__resize-handle--overlay":this.showEdgeOverlay},onMouseEnter:()=>this.handleResizeHandleMouseEnter(),onMouseLeave:()=>this.handleResizeHandleMouseLeave(),onMouseDown:e=>this.handleResizeHandleMouseDown(e),"aria-hidden":"true"}))}get el(){return this}static get watchers(){return{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}}static get style(){return A()+I()}},[2,"ds-panel-nav",{navStyle:[513,"nav-style"],disableViewTransition:[4,"disable-view-transition"],groups:[1],routerMode:[1,"router-mode"],activeId:[1,"active-id"],collapsed:[1028],breakpoint:[2],storageKey:[1,"storage-key"],currentUrl:[1,"current-url"],userName:[1,"user-name"],userInitial:[1,"user-initial"],dashboardLabel:[1,"dashboard-label"],settingsLabel:[1,"settings-label"],accountLabel:[1,"account-label"],dashboardNavigationLabel:[1,"dashboard-navigation-label"],settingsNavigationLabel:[1,"settings-navigation-label"],expandNavigationLabel:[1,"expand-navigation-label"],collapseNavigationLabel:[1,"collapse-navigation-label"],renderedStyle:[32],parsedGroups:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],showEdgeOverlay:[32],toggleCollapsed:[64]},undefined,{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}]);N.HOST_PROP_SYNC_BUDGET=8;function D(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-button-unfilled","ds-icon","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(i(e))){customElements.define(i(e),N)}break;case"ds-badge":if(!customElements.get(i(e))){o()}break;case"ds-button-unfilled":if(!customElements.get(i(e))){r()}break;case"ds-icon":if(!customElements.get(i(e))){l()}break;case"ds-text":if(!customElements.get(i(e))){d()}break;case"ds-tooltip":if(!customElements.get(i(e))){c()}break}}))}D();const E=N;const L=D;export{E as DsPanelNav,L as defineCustomElement};
 //# sourceMappingURL=ds-panel-nav.js.map