@ds-mo/ui 2.15.0 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (157) hide show
  1. package/dist/.build-stamp +1 -1
  2. package/dist/components/ds-app-shell.js +1 -1
  3. package/dist/components/ds-badge.js +1 -1
  4. package/dist/components/ds-banner.js +1 -1
  5. package/dist/components/ds-banner.js.map +1 -1
  6. package/dist/components/ds-bar-nav.js +1 -1
  7. package/dist/components/ds-bar-nav.js.map +1 -1
  8. package/dist/components/ds-button-filled.js +1 -1
  9. package/dist/components/ds-button-unfilled.js +1 -1
  10. package/dist/components/ds-card-data-viz-donut.js +1 -1
  11. package/dist/components/ds-card-data-viz-donut.js.map +1 -1
  12. package/dist/components/ds-card-setting.js +1 -1
  13. package/dist/components/ds-card.js +1 -1
  14. package/dist/components/ds-chart-bar.js +1 -1
  15. package/dist/components/ds-chart-donut.js +1 -1
  16. package/dist/components/ds-chart-donut.js.map +1 -1
  17. package/dist/components/ds-chart-legend.js +1 -1
  18. package/dist/components/ds-chart-legend.js.map +1 -1
  19. package/dist/components/ds-chart-line.js +1 -1
  20. package/dist/components/ds-checkbox.js +1 -1
  21. package/dist/components/ds-checkbox.js.map +1 -1
  22. package/dist/components/ds-chip.js +1 -1
  23. package/dist/components/ds-chip.js.map +1 -1
  24. package/dist/components/ds-divider.js +1 -1
  25. package/dist/components/ds-empty-state.js +1 -1
  26. package/dist/components/ds-empty-state.js.map +1 -1
  27. package/dist/components/ds-field.js +1 -1
  28. package/dist/components/ds-icon.js +1 -1
  29. package/dist/components/ds-input.js +1 -1
  30. package/dist/components/ds-input.js.map +1 -1
  31. package/dist/components/ds-loader.js +1 -1
  32. package/dist/components/ds-loader.js.map +1 -1
  33. package/dist/components/ds-menu.js +1 -1
  34. package/dist/components/ds-modal.js +1 -1
  35. package/dist/components/ds-modal.js.map +1 -1
  36. package/dist/components/ds-pagination.js +1 -1
  37. package/dist/components/ds-pagination.js.map +1 -1
  38. package/dist/components/ds-panel-nav.js +1 -1
  39. package/dist/components/ds-panel-nav.js.map +1 -1
  40. package/dist/components/ds-panel-tools.js +1 -1
  41. package/dist/components/ds-panel-tools.js.map +1 -1
  42. package/dist/components/ds-radio-group.js +1 -1
  43. package/dist/components/ds-radio-group.js.map +1 -1
  44. package/dist/components/ds-select.js +1 -1
  45. package/dist/components/ds-select.js.map +1 -1
  46. package/dist/components/ds-shell-gradient-picker.js +1 -1
  47. package/dist/components/ds-shell-gradient-swatch.js +1 -1
  48. package/dist/components/ds-slider.js +1 -1
  49. package/dist/components/ds-tab-group-nav.js +1 -1
  50. package/dist/components/ds-tab-group.js +1 -1
  51. package/dist/components/ds-tab-group.js.map +1 -1
  52. package/dist/components/ds-table.js +1 -1
  53. package/dist/components/ds-table.js.map +1 -1
  54. package/dist/components/ds-tag.js +1 -1
  55. package/dist/components/ds-tag.js.map +1 -1
  56. package/dist/components/ds-text.js +1 -1
  57. package/dist/components/ds-toggle.js +1 -1
  58. package/dist/components/ds-tooltip-data-viz.js +1 -1
  59. package/dist/components/ds-tooltip-data-viz.js.map +1 -1
  60. package/dist/components/ds-tooltip.js +1 -1
  61. package/dist/components/p-8WTsyLQ9.js +2 -0
  62. package/dist/components/p-8WTsyLQ9.js.map +1 -0
  63. package/dist/components/{p-CyFVn2Sc.js → p-9Qu1ls2y.js} +2 -2
  64. package/dist/components/p-BOQRM49Q.js +2 -0
  65. package/dist/components/p-BOQRM49Q.js.map +1 -0
  66. package/dist/components/p-BSNlp8Di.js +2 -0
  67. package/dist/components/p-BSNlp8Di.js.map +1 -0
  68. package/dist/components/p-Co2kLhWu.js +2 -0
  69. package/dist/components/p-Co2kLhWu.js.map +1 -0
  70. package/dist/components/p-CsaW5gDM.js +2 -0
  71. package/dist/components/{p-C3ORQUOp.js.map → p-CsaW5gDM.js.map} +1 -1
  72. package/dist/components/{p-BvF44IQK.js → p-Cx-ywr1e.js} +1 -1
  73. package/dist/components/p-Cx-ywr1e.js.map +1 -0
  74. package/dist/components/p-D0gBLLJx.js +2 -0
  75. package/dist/components/p-D0gBLLJx.js.map +1 -0
  76. package/dist/components/p-DEgY_Lnb.js +2 -0
  77. package/dist/components/p-DEgY_Lnb.js.map +1 -0
  78. package/dist/components/p-DI8rHm9u.js +2 -0
  79. package/dist/components/p-DI8rHm9u.js.map +1 -0
  80. package/dist/components/p-DMD-RO1W.js +2 -0
  81. package/dist/components/p-DMD-RO1W.js.map +1 -0
  82. package/dist/components/p-boPMASaQ.js +2 -0
  83. package/dist/components/p-boPMASaQ.js.map +1 -0
  84. package/dist/components/p-vlwhuqVn.js +2 -0
  85. package/dist/components/p-vlwhuqVn.js.map +1 -0
  86. package/dist/lib/utils/control-text.d.ts +4 -4
  87. package/dist/lib/utils/index.d.ts +1 -1
  88. package/dist/lib/utils/index.js.map +2 -2
  89. package/dist/types/components/ChartDonut/ChartDonut.d.ts +2 -7
  90. package/dist/types/components/Loader/Loader.d.ts +7 -3
  91. package/dist/types/components/Loader/index.d.ts +1 -1
  92. package/dist/types/components/Text/Text.d.ts +2 -1
  93. package/dist/types/components/Text/text-utils.d.ts +3 -1
  94. package/dist/types/components/Tooltip/Tooltip.d.ts +6 -0
  95. package/dist/types/components/TooltipDataViz/TooltipDataViz.d.ts +3 -2
  96. package/dist/types/components.d.ts +34 -19
  97. package/dist/types/utils/control-text.d.ts +4 -4
  98. package/dist/types/utils/index.d.ts +1 -1
  99. package/package.json +7 -7
  100. package/src/angular/proxies.ts +2 -2
  101. package/src/wc/components/Banner/Banner.tsx +3 -5
  102. package/src/wc/components/BarNav/BarNav.tsx +14 -6
  103. package/src/wc/components/ButtonFilled/ButtonFilled.tsx +9 -5
  104. package/src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx +9 -5
  105. package/src/wc/components/Card/Card.tsx +9 -12
  106. package/src/wc/components/ChartDonut/ChartDonut.tsx +4 -47
  107. package/src/wc/components/ChartLegend/ChartLegend.tsx +23 -15
  108. package/src/wc/components/Checkbox/Checkbox.tsx +3 -5
  109. package/src/wc/components/Chip/Chip.tsx +3 -5
  110. package/src/wc/components/EmptyState/EmptyState.tsx +3 -5
  111. package/src/wc/components/Input/Input.tsx +10 -3
  112. package/src/wc/components/Loader/Loader.tsx +77 -30
  113. package/src/wc/components/Loader/index.ts +1 -1
  114. package/src/wc/components/Menu/Menu.tsx +22 -17
  115. package/src/wc/components/Modal/Modal.tsx +10 -11
  116. package/src/wc/components/Pagination/Pagination.tsx +3 -3
  117. package/src/wc/components/PanelNav/PanelNav.tsx +37 -31
  118. package/src/wc/components/PanelTools/PanelTools.tsx +10 -5
  119. package/src/wc/components/RadioGroup/RadioGroup.tsx +3 -5
  120. package/src/wc/components/Select/Select.tsx +9 -5
  121. package/src/wc/components/Table/Table.tsx +15 -12
  122. package/src/wc/components/Tag/Tag.tsx +3 -5
  123. package/src/wc/components/Text/Text.tsx +6 -4
  124. package/src/wc/components/Text/text-utils.ts +8 -1
  125. package/src/wc/components/Tooltip/Tooltip.tsx +53 -6
  126. package/src/wc/components/TooltipDataViz/TooltipDataViz.tsx +20 -12
  127. package/src/wc/components.d.ts +34 -19
  128. package/src/wc/utils/control-density.css +2 -6
  129. package/src/wc/utils/control-text.ts +4 -4
  130. package/src/wc/utils/index.ts +1 -1
  131. package/src/wc/utils/interaction-fill.css +2 -2
  132. package/src/wc/utils/typography.css +146 -0
  133. package/dist/components/p-061wD4FM.js +0 -2
  134. package/dist/components/p-061wD4FM.js.map +0 -1
  135. package/dist/components/p-AiGt4dQS.js +0 -2
  136. package/dist/components/p-AiGt4dQS.js.map +0 -1
  137. package/dist/components/p-BDQgqw5J.js +0 -2
  138. package/dist/components/p-BDQgqw5J.js.map +0 -1
  139. package/dist/components/p-B_g8X0eh.js +0 -2
  140. package/dist/components/p-B_g8X0eh.js.map +0 -1
  141. package/dist/components/p-BvF44IQK.js.map +0 -1
  142. package/dist/components/p-C3ORQUOp.js +0 -2
  143. package/dist/components/p-DIgHkkPe.js +0 -2
  144. package/dist/components/p-DIgHkkPe.js.map +0 -1
  145. package/dist/components/p-DOqi-Vkb.js +0 -2
  146. package/dist/components/p-DOqi-Vkb.js.map +0 -1
  147. package/dist/components/p-DQ3MyAC7.js +0 -2
  148. package/dist/components/p-DQ3MyAC7.js.map +0 -1
  149. package/dist/components/p-DkcH8mRl.js +0 -2
  150. package/dist/components/p-DkcH8mRl.js.map +0 -1
  151. package/dist/components/p-DrhmNrKD.js +0 -2
  152. package/dist/components/p-DrhmNrKD.js.map +0 -1
  153. package/dist/components/p-DujEDZ7f.js +0 -2
  154. package/dist/components/p-DujEDZ7f.js.map +0 -1
  155. package/dist/components/p-DwQ-zdqa.js +0 -2
  156. package/dist/components/p-DwQ-zdqa.js.map +0 -1
  157. /package/dist/components/{p-CyFVn2Sc.js.map → p-9Qu1ls2y.js.map} +0 -0
@@ -1,10 +1,10 @@
1
1
  import type { TextVariant } from '../components/Text/text-types';
2
2
 
3
- /** Control-density sizes shared by buttons, tags, chips, select, tooltip. */
4
- export type ControlDensitySize = 'md' | 'sm' | 'xs';
3
+ /** Shared public control sizes. Typography is derived; it is not a separate density API. */
4
+ export type ControlSize = 'md' | 'sm' | 'xs';
5
5
 
6
- /** Body/caption variant per control-density size (emphasis is separate). */
7
- export const CONTROL_TEXT_VARIANT: Record<ControlDensitySize, TextVariant> = {
6
+ /** Complete text variant selected internally by each control size. */
7
+ export const CONTROL_TEXT_VARIANT: Record<ControlSize, TextVariant> = {
8
8
  md: 'text-body-medium',
9
9
  sm: 'text-body-small',
10
10
  xs: 'text-caption',
@@ -24,4 +24,4 @@ export type { TokenDefaultKey } from './token-defaults';
24
24
  export { controlWidthClass } from './control-width';
25
25
  export type { ControlWidth } from './control-width';
26
26
  export { CONTROL_TEXT_VARIANT } from './control-text';
27
- export type { ControlDensitySize } from './control-text';
27
+ export type { ControlSize } from './control-text';
@@ -76,11 +76,11 @@
76
76
  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);
77
77
  }
78
78
 
79
- /* Opt-in tertiary inset border (override color via `--ds-interaction-border-color`). */
79
+ /* Opt-in secondary inset border (override color via `--ds-interaction-border-color`). */
80
80
  :host(.ds-interaction-fill--bordered),
81
81
  .ds-interaction-fill--bordered {
82
82
  --ds-interaction-border-width: var(--dimension-stroke-width-012);
83
- --ds-interaction-border-color: var(--color-border-tertiary);
83
+ --ds-interaction-border-color: var(--color-border-secondary);
84
84
  }
85
85
 
86
86
  :host(.ds-interaction-fill--selected)::before,
@@ -0,0 +1,146 @@
1
+ /*
2
+ * Internal typography recipes shared by ds-text and native text surfaces that
3
+ * cannot render a custom element (for example, an <input> value).
4
+ *
5
+ * Each variant owns its font-size + line-height pairing. Never override one
6
+ * without the other from a consuming component.
7
+ */
8
+
9
+ :host(.ds-text--display-medium),
10
+ .ds-text--display-medium {
11
+ font-size: var(--typography-fontsize-3xl);
12
+ line-height: var(--typography-lineheight-3xl);
13
+ }
14
+
15
+ :host(.ds-text--display-small),
16
+ .ds-text--display-small {
17
+ font-size: var(--typography-fontsize-2xl);
18
+ line-height: var(--typography-lineheight-2xl);
19
+ }
20
+
21
+ :host(.ds-text--title-large),
22
+ .ds-text--title-large {
23
+ font-size: var(--typography-fontsize-xl);
24
+ line-height: var(--typography-lineheight-xl);
25
+ }
26
+
27
+ :host(.ds-text--title-medium),
28
+ .ds-text--title-medium {
29
+ font-size: var(--typography-fontsize-lg);
30
+ line-height: var(--typography-lineheight-lg);
31
+ }
32
+
33
+ :host(.ds-text--title-small),
34
+ .ds-text--title-small {
35
+ font-size: var(--typography-fontsize-md);
36
+ line-height: var(--typography-lineheight-md);
37
+ }
38
+
39
+ :host(.ds-text--body-large),
40
+ .ds-text--body-large {
41
+ font-size: var(--typography-fontsize-lg);
42
+ line-height: var(--typography-lineheight-lg);
43
+ }
44
+
45
+ :host(.ds-text--body-medium),
46
+ .ds-text--body-medium {
47
+ font-size: var(--typography-fontsize-md);
48
+ line-height: var(--typography-lineheight-md);
49
+ }
50
+
51
+ :host(.ds-text--body-small),
52
+ .ds-text--body-small {
53
+ font-size: var(--typography-fontsize-sm);
54
+ line-height: var(--typography-lineheight-sm);
55
+ }
56
+
57
+ :host(.ds-text--caption),
58
+ .ds-text--caption {
59
+ font-size: var(--typography-fontsize-xs);
60
+ line-height: var(--typography-lineheight-xs);
61
+ text-transform: uppercase;
62
+ }
63
+
64
+ :host(.ds-text--display-medium.ds-text--emphasis),
65
+ :host(.ds-text--display-small.ds-text--emphasis),
66
+ .ds-text--display-medium.ds-text--emphasis,
67
+ .ds-text--display-small.ds-text--emphasis {
68
+ font-weight: var(--typography-weight-bold);
69
+ letter-spacing: var(--typography-letterspacing-negative-double);
70
+ }
71
+
72
+ :host(.ds-text--display-medium.ds-text--regular),
73
+ :host(.ds-text--display-small.ds-text--regular),
74
+ .ds-text--display-medium.ds-text--regular,
75
+ .ds-text--display-small.ds-text--regular {
76
+ font-weight: var(--typography-weight-semibold);
77
+ letter-spacing: var(--typography-letterspacing-negative);
78
+ }
79
+
80
+ :host(.ds-text--title-large.ds-text--emphasis),
81
+ .ds-text--title-large.ds-text--emphasis {
82
+ font-weight: var(--typography-weight-semibold);
83
+ letter-spacing: var(--typography-letterspacing-negative-double);
84
+ }
85
+
86
+ :host(.ds-text--title-large.ds-text--regular),
87
+ .ds-text--title-large.ds-text--regular {
88
+ font-weight: var(--typography-weight-medium);
89
+ letter-spacing: var(--typography-letterspacing-negative);
90
+ }
91
+
92
+ :host(.ds-text--title-medium.ds-text--emphasis),
93
+ :host(.ds-text--title-small.ds-text--emphasis),
94
+ .ds-text--title-medium.ds-text--emphasis,
95
+ .ds-text--title-small.ds-text--emphasis {
96
+ font-weight: var(--typography-weight-semibold);
97
+ letter-spacing: var(--typography-letterspacing-negative);
98
+ }
99
+
100
+ :host(.ds-text--title-medium.ds-text--regular),
101
+ :host(.ds-text--title-small.ds-text--regular),
102
+ .ds-text--title-medium.ds-text--regular,
103
+ .ds-text--title-small.ds-text--regular {
104
+ font-weight: var(--typography-weight-medium);
105
+ letter-spacing: var(--typography-letterspacing-negative-half);
106
+ }
107
+
108
+ :host(.ds-text--body-large.ds-text--emphasis),
109
+ :host(.ds-text--body-medium.ds-text--emphasis),
110
+ .ds-text--body-large.ds-text--emphasis,
111
+ .ds-text--body-medium.ds-text--emphasis {
112
+ font-weight: var(--typography-weight-medium);
113
+ letter-spacing: var(--typography-letterspacing-negative);
114
+ }
115
+
116
+ :host(.ds-text--body-large.ds-text--regular),
117
+ :host(.ds-text--body-medium.ds-text--regular),
118
+ .ds-text--body-large.ds-text--regular,
119
+ .ds-text--body-medium.ds-text--regular {
120
+ font-weight: var(--typography-weight-regular);
121
+ letter-spacing: var(--typography-letterspacing-negative-half);
122
+ }
123
+
124
+ :host(.ds-text--body-small.ds-text--emphasis),
125
+ .ds-text--body-small.ds-text--emphasis {
126
+ font-weight: var(--typography-weight-medium);
127
+ letter-spacing: var(--typography-letterspacing-negative-half);
128
+ }
129
+
130
+ :host(.ds-text--body-small.ds-text--regular),
131
+ .ds-text--body-small.ds-text--regular {
132
+ font-weight: var(--typography-weight-regular);
133
+ letter-spacing: var(--typography-letterspacing-none);
134
+ }
135
+
136
+ :host(.ds-text--caption.ds-text--emphasis),
137
+ .ds-text--caption.ds-text--emphasis {
138
+ font-weight: var(--typography-weight-semibold);
139
+ letter-spacing: var(--typography-letterspacing-positive);
140
+ }
141
+
142
+ :host(.ds-text--caption.ds-text--regular),
143
+ .ds-text--caption.ds-text--regular {
144
+ font-weight: var(--typography-weight-medium);
145
+ letter-spacing: var(--typography-letterspacing-positive);
146
+ }
@@ -1,2 +0,0 @@
1
- import{p as t,H as o,c as n,h as i,a as d,t as l}from"./index.js";import{d as e}from"./p-CyFVn2Sc.js";import{d as r}from"./p-BDQgqw5J.js";import{C as s}from"./p-BvF44IQK.js";import{c as a}from"./p-DuFm-ieS.js";const c=()=>`.sc-ds-button-filled-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-button-filled: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-button-filled{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-button-filled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-filled: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-button-filled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled::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-button-filled-h,.ds-interaction-fill.sc-ds-button-filled{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-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before,.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before{z-index:1}.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::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-button-filled-h,.ds-interaction-fill--bordered.sc-ds-button-filled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.ds-interaction-fill--selected.sc-ds-button-filled-h::before,.ds-interaction-fill--selected.sc-ds-button-filled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-filled-h,.ds-interaction-fill--selected.sc-ds-button-filled{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-button-filled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-button-filled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-button-filled-h>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill.sc-ds-button-filled>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill__content.sc-ds-button-filled{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-button-filled-h,.ds-interaction-fill--on-medium.sc-ds-button-filled{--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-button-filled-h,.ds-interaction-fill--on-bold.sc-ds-button-filled{--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-button-filled-h,.ds-interaction-fill--on-strong.sc-ds-button-filled{--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-button-filled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-filled{--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-button-filled-h,.ds-interaction-fill--on-navigation.sc-ds-button-filled{--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)}.ds-control-inactive.sc-ds-button-filled-h,.ds-control-inactive.sc-ds-button-filled{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-button-filled-h,.ds-control--md.sc-ds-button-filled{--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-line-height:var(--typography-lineheight-md)}.ds-control--sm.sc-ds-button-filled-h,.ds-control--sm.sc-ds-button-filled{--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-line-height:var(--typography-lineheight-sm)}.ds-control--xs.sc-ds-button-filled-h,.ds-control--xs.sc-ds-button-filled{--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-control-line-height:var(--typography-lineheight-xs)}.ds-control-width--hug.sc-ds-button-filled-h,.ds-control-width--hug.sc-ds-button-filled{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-button-filled-h,.ds-control-width--fill.sc-ds-button-filled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-filled-h{display:inline-flex;outline:none;--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled-host--icon.ds-control-width--hug.sc-ds-button-filled-h{width:var(--ds-control-height, var(--dimension-size-400));height:var(--ds-control-height, var(--dimension-size-400));min-width:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.button-filled-host--icon.ds-control-width--fill.sc-ds-button-filled-h{height:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-control-width--fill.sc-ds-button-filled-h .button-filled.sc-ds-button-filled{width:100%}.button-filled.sc-ds-button-filled{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background-color:var(--ds-button-filled-bg);color:var(--ds-button-filled-fg);cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2), transform var(--effect-motion-short-2)}.button-filled--icon.sc-ds-button-filled{width:100%;height:100%;padding:0}.button-filled.sc-ds-button-filled:active:not(:disabled):not(.ds-control-inactive){transform:scale(var(--dimension-scale-subtle))}.button-filled__icon-wrap.sc-ds-button-filled{position:relative;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-filled__label.sc-ds-button-filled{position:relative;z-index:2;line-height:0;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));white-space:nowrap;flex-shrink:0;min-width:0}.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-neutral);--ds-button-filled-fg:var(--color-foreground-faint-neutral)}.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-ai);--ds-button-filled-fg:var(--color-foreground-faint-ai)}.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-negative);--ds-button-filled-fg:var(--color-foreground-faint-negative)}.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-warning);--ds-button-filled-fg:var(--color-foreground-faint-warning)}.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-caution);--ds-button-filled-fg:var(--color-foreground-faint-caution)}.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-positive);--ds-button-filled-fg:var(--color-foreground-faint-positive)}.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-guide);--ds-button-filled-fg:var(--color-foreground-faint-guide)}.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-walkthrough);--ds-button-filled-fg:var(--color-foreground-faint-walkthrough)}.button-filled--contrast-strong.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-neutral);--ds-button-filled-fg:var(--color-foreground-medium-neutral)}.button-filled--contrast-strong.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-brand);--ds-button-filled-fg:var(--color-foreground-medium-brand)}.button-filled--contrast-strong.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-ai);--ds-button-filled-fg:var(--color-foreground-medium-ai)}.button-filled--contrast-strong.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-negative);--ds-button-filled-fg:var(--color-foreground-medium-negative)}.button-filled--contrast-strong.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-warning);--ds-button-filled-fg:var(--color-foreground-medium-warning)}.button-filled--contrast-strong.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-caution);--ds-button-filled-fg:var(--color-foreground-medium-caution)}.button-filled--contrast-strong.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-positive);--ds-button-filled-fg:var(--color-foreground-medium-positive)}.button-filled--contrast-strong.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-guide);--ds-button-filled-fg:var(--color-foreground-medium-guide)}.button-filled--contrast-strong.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-walkthrough);--ds-button-filled-fg:var(--color-foreground-medium-walkthrough)}.button-filled--contrast-medium.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-neutral);--ds-button-filled-fg:var(--color-foreground-strong-neutral)}.button-filled--contrast-medium.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-brand);--ds-button-filled-fg:var(--color-foreground-strong-brand)}.button-filled--contrast-medium.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-ai);--ds-button-filled-fg:var(--color-foreground-strong-ai)}.button-filled--contrast-medium.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-negative);--ds-button-filled-fg:var(--color-foreground-strong-negative)}.button-filled--contrast-medium.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-warning);--ds-button-filled-fg:var(--color-foreground-strong-warning)}.button-filled--contrast-medium.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-caution);--ds-button-filled-fg:var(--color-foreground-strong-caution)}.button-filled--contrast-medium.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-positive);--ds-button-filled-fg:var(--color-foreground-strong-positive)}.button-filled--contrast-medium.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-guide);--ds-button-filled-fg:var(--color-foreground-strong-guide)}.button-filled--contrast-medium.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-walkthrough);--ds-button-filled-fg:var(--color-foreground-strong-walkthrough)}.button-filled--contrast-faint.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-neutral);--ds-button-filled-fg:var(--color-foreground-bold-neutral)}.button-filled--contrast-faint.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-brand);--ds-button-filled-fg:var(--color-foreground-bold-brand)}.button-filled--contrast-faint.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-ai);--ds-button-filled-fg:var(--color-foreground-bold-ai)}.button-filled--contrast-faint.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-negative);--ds-button-filled-fg:var(--color-foreground-bold-negative)}.button-filled--contrast-faint.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-warning);--ds-button-filled-fg:var(--color-foreground-bold-warning)}.button-filled--contrast-faint.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-caution);--ds-button-filled-fg:var(--color-foreground-bold-caution)}.button-filled--contrast-faint.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-positive);--ds-button-filled-fg:var(--color-foreground-bold-positive)}.button-filled--contrast-faint.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-guide);--ds-button-filled-fg:var(--color-foreground-bold-guide)}.button-filled--contrast-faint.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-walkthrough);--ds-button-filled-fg:var(--color-foreground-bold-walkthrough)}`;const u={md:"md",sm:"sm",xs:"xs"};const f=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=n(this,"dsClick");this.variant="label";this.size="md";this.width="hug";this.label="";this.icon="";this.intent="brand";this.contrast="bold";this.isInactive=false;this.type="button";this.buttonEl=null;this.handleClick=t=>{if(this.isInactive)return;this.dsClick.emit(t)}}async setFocus(){this.buttonEl?.focus()}get showIcon(){return this.variant==="icon"||this.variant==="icon-label"}get showLabel(){return this.variant==="label"||this.variant==="icon-label"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.showLabel&&this.label)return undefined;if(this.variant==="icon")return this.icon||"action";return this.label||"action"}render(){const t=s[this.size];const o=u[this.size];const n={"button-filled":true,"ds-focus-ring-inset":true,"ds-interaction-fill":!this.isInactive,"ds-interaction-fill--on-bold":this.contrast==="bold","ds-interaction-fill--on-strong":this.contrast==="strong","ds-interaction-fill--on-medium":this.contrast==="medium","ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","button-filled--icon":this.variant==="icon","button-filled--label":this.variant==="label","button-filled--icon-label":this.variant==="icon-label",[`button-filled--intent-${this.intent}`]:true,[`button-filled--contrast-${this.contrast}`]:this.contrast!=="bold"};return i(d,{key:"61bf920af256140aeba905f111c91e2dbdabbf5c",class:{"button-filled-host":true,"button-filled-host--icon":this.variant==="icon","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...a(this.width)},tabIndex:-1},i("button",{key:"8c47daf10a0bd8f1666775f6f274545f0dff4203",ref:t=>{this.buttonEl=t??null},type:this.type,class:n,disabled:this.isInactive,"aria-label":this.accessibleName,onClick:this.handleClick},this.showIcon&&i("span",{key:"d7807022c580c95dfce7519782129bec258d00b3",class:"button-filled__icon-wrap ds-interaction-fill__content"},i("ds-icon",{key:"14d0d7153bfa79427439d8deca11713c71220ddd",name:this.icon,size:o,color:"inherit"})),this.showLabel&&i("span",{key:"da6e51b6cf266f66ae40f3efd3492bad5066de9d",class:"button-filled__label ds-interaction-fill__content"},i("ds-text",{key:"2886e5357fb3005eff516d9af6ae4c3a746d0aa7",as:"span",variant:t,emphasis:true,color:"inherit"},this.label))))}get el(){return this}static get style(){return c()}},[2,"ds-button-filled",{variant:[1],size:[1],width:[1],label:[1],icon:[1],intent:[1],contrast:[1],isInactive:[4,"is-inactive"],type:[1],ariaLabel:[1,"aria-label"],setFocus:[64]}]);function b(){if(typeof customElements==="undefined"){return}const t=["ds-button-filled","ds-icon","ds-text"];t.forEach((t=>{switch(t){case"ds-button-filled":if(!customElements.get(l(t))){customElements.define(l(t),f)}break;case"ds-icon":if(!customElements.get(l(t))){e()}break;case"ds-text":if(!customElements.get(l(t))){r()}break}}))}b();export{f as B,b as d};
2
- //# sourceMappingURL=p-061wD4FM.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["buttonFilledCss","ICON_SIZE","md","sm","xs","ButtonFilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","width","label","icon","intent","contrast","isInactive","type","buttonEl","handleClick","event","dsClick","emit","setFocus","focus","showIcon","showLabel","accessibleName","ariaLabel","undefined","render","textVariant","CONTROL_TEXT_VARIANT","iconSize","cls","h","Host","key","class","controlWidthClass","tabIndex","ref","el","disabled","onClick","name","color","as","emphasis"],"sources":["src/wc/components/ButtonFilled/ButtonFilled.css?tag=ds-button-filled&encapsulation=scoped","src/wc/components/ButtonFilled/ButtonFilled.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n\n:host {\n display: inline-flex;\n outline: none;\n --ds-button-filled-bg: var(--color-background-bold-brand);\n --ds-button-filled-fg: var(--color-foreground-faint-brand);\n}\n\n/* Icon-only: fixed square from density height (hug). Fill stretches the hit target. */\n:host(.button-filled-host--icon.ds-control-width--hug) {\n width: var(--ds-control-height, var(--dimension-size-400));\n height: var(--ds-control-height, var(--dimension-size-400));\n min-width: var(--ds-control-height, var(--dimension-size-400));\n min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.button-filled-host--icon.ds-control-width--fill) {\n height: var(--ds-control-height, var(--dimension-size-400));\n min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.ds-control-width--fill) .button-filled {\n width: 100%;\n}\n\n.button-filled {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: var(--ds-control-height, var(--dimension-size-400));\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n gap: var(--ds-control-gap, var(--dimension-space-050));\n border: none;\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n background-color: var(--ds-button-filled-bg);\n color: var(--ds-button-filled-fg);\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n overflow: hidden;\n transition:\n background-color var(--effect-motion-short-2),\n color var(--effect-motion-short-2),\n transform var(--effect-motion-short-2);\n /* Hover/press: `.ds-interaction-fill` + contrast → `--on-*` (token overlay, not color-mix). */\n}\n\n.button-filled--icon {\n width: 100%;\n height: 100%;\n padding: 0;\n}\n\n.button-filled:active:not(:disabled):not(.ds-control-inactive) {\n transform: scale(var(--dimension-scale-subtle));\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.button-filled__icon-wrap {\n position: relative;\n width: var(--ds-control-icon, var(--dimension-iconography-md));\n height: var(--ds-control-icon, var(--dimension-iconography-md));\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n z-index: 2;\n}\n\n.button-filled__label {\n position: relative;\n z-index: 2;\n line-height: 0;\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n white-space: nowrap;\n flex-shrink: 0;\n min-width: 0;\n}\n\n/* ── Intent + contrast (bold default) ─────────────────────────────────────── */\n\n.button-filled--intent-neutral {\n --ds-button-filled-bg: var(--color-background-bold-neutral);\n --ds-button-filled-fg: var(--color-foreground-faint-neutral);\n}\n\n.button-filled--intent-brand {\n --ds-button-filled-bg: var(--color-background-bold-brand);\n --ds-button-filled-fg: var(--color-foreground-faint-brand);\n}\n\n.button-filled--intent-ai {\n --ds-button-filled-bg: var(--color-background-bold-ai);\n --ds-button-filled-fg: var(--color-foreground-faint-ai);\n}\n\n.button-filled--intent-negative {\n --ds-button-filled-bg: var(--color-background-bold-negative);\n --ds-button-filled-fg: var(--color-foreground-faint-negative);\n}\n\n.button-filled--intent-warning {\n --ds-button-filled-bg: var(--color-background-bold-warning);\n --ds-button-filled-fg: var(--color-foreground-faint-warning);\n}\n\n.button-filled--intent-caution {\n --ds-button-filled-bg: var(--color-background-bold-caution);\n --ds-button-filled-fg: var(--color-foreground-faint-caution);\n}\n\n.button-filled--intent-positive {\n --ds-button-filled-bg: var(--color-background-bold-positive);\n --ds-button-filled-fg: var(--color-foreground-faint-positive);\n}\n\n.button-filled--intent-guide {\n --ds-button-filled-bg: var(--color-background-bold-guide);\n --ds-button-filled-fg: var(--color-foreground-faint-guide);\n}\n\n.button-filled--intent-walkthrough {\n --ds-button-filled-bg: var(--color-background-bold-walkthrough);\n --ds-button-filled-fg: var(--color-foreground-faint-walkthrough);\n}\n\n/* strong → medium fg */\n.button-filled--contrast-strong.button-filled--intent-neutral {\n --ds-button-filled-bg: var(--color-background-strong-neutral);\n --ds-button-filled-fg: var(--color-foreground-medium-neutral);\n}\n\n.button-filled--contrast-strong.button-filled--intent-brand {\n --ds-button-filled-bg: var(--color-background-strong-brand);\n --ds-button-filled-fg: var(--color-foreground-medium-brand);\n}\n\n.button-filled--contrast-strong.button-filled--intent-ai {\n --ds-button-filled-bg: var(--color-background-strong-ai);\n --ds-button-filled-fg: var(--color-foreground-medium-ai);\n}\n\n.button-filled--contrast-strong.button-filled--intent-negative {\n --ds-button-filled-bg: var(--color-background-strong-negative);\n --ds-button-filled-fg: var(--color-foreground-medium-negative);\n}\n\n.button-filled--contrast-strong.button-filled--intent-warning {\n --ds-button-filled-bg: var(--color-background-strong-warning);\n --ds-button-filled-fg: var(--color-foreground-medium-warning);\n}\n\n.button-filled--contrast-strong.button-filled--intent-caution {\n --ds-button-filled-bg: var(--color-background-strong-caution);\n --ds-button-filled-fg: var(--color-foreground-medium-caution);\n}\n\n.button-filled--contrast-strong.button-filled--intent-positive {\n --ds-button-filled-bg: var(--color-background-strong-positive);\n --ds-button-filled-fg: var(--color-foreground-medium-positive);\n}\n\n.button-filled--contrast-strong.button-filled--intent-guide {\n --ds-button-filled-bg: var(--color-background-strong-guide);\n --ds-button-filled-fg: var(--color-foreground-medium-guide);\n}\n\n.button-filled--contrast-strong.button-filled--intent-walkthrough {\n --ds-button-filled-bg: var(--color-background-strong-walkthrough);\n --ds-button-filled-fg: var(--color-foreground-medium-walkthrough);\n}\n\n/* medium → strong fg */\n.button-filled--contrast-medium.button-filled--intent-neutral {\n --ds-button-filled-bg: var(--color-background-medium-neutral);\n --ds-button-filled-fg: var(--color-foreground-strong-neutral);\n}\n\n.button-filled--contrast-medium.button-filled--intent-brand {\n --ds-button-filled-bg: var(--color-background-medium-brand);\n --ds-button-filled-fg: var(--color-foreground-strong-brand);\n}\n\n.button-filled--contrast-medium.button-filled--intent-ai {\n --ds-button-filled-bg: var(--color-background-medium-ai);\n --ds-button-filled-fg: var(--color-foreground-strong-ai);\n}\n\n.button-filled--contrast-medium.button-filled--intent-negative {\n --ds-button-filled-bg: var(--color-background-medium-negative);\n --ds-button-filled-fg: var(--color-foreground-strong-negative);\n}\n\n.button-filled--contrast-medium.button-filled--intent-warning {\n --ds-button-filled-bg: var(--color-background-medium-warning);\n --ds-button-filled-fg: var(--color-foreground-strong-warning);\n}\n\n.button-filled--contrast-medium.button-filled--intent-caution {\n --ds-button-filled-bg: var(--color-background-medium-caution);\n --ds-button-filled-fg: var(--color-foreground-strong-caution);\n}\n\n.button-filled--contrast-medium.button-filled--intent-positive {\n --ds-button-filled-bg: var(--color-background-medium-positive);\n --ds-button-filled-fg: var(--color-foreground-strong-positive);\n}\n\n.button-filled--contrast-medium.button-filled--intent-guide {\n --ds-button-filled-bg: var(--color-background-medium-guide);\n --ds-button-filled-fg: var(--color-foreground-strong-guide);\n}\n\n.button-filled--contrast-medium.button-filled--intent-walkthrough {\n --ds-button-filled-bg: var(--color-background-medium-walkthrough);\n --ds-button-filled-fg: var(--color-foreground-strong-walkthrough);\n}\n\n/* faint → bold fg */\n.button-filled--contrast-faint.button-filled--intent-neutral {\n --ds-button-filled-bg: var(--color-background-faint-neutral);\n --ds-button-filled-fg: var(--color-foreground-bold-neutral);\n}\n\n.button-filled--contrast-faint.button-filled--intent-brand {\n --ds-button-filled-bg: var(--color-background-faint-brand);\n --ds-button-filled-fg: var(--color-foreground-bold-brand);\n}\n\n.button-filled--contrast-faint.button-filled--intent-ai {\n --ds-button-filled-bg: var(--color-background-faint-ai);\n --ds-button-filled-fg: var(--color-foreground-bold-ai);\n}\n\n.button-filled--contrast-faint.button-filled--intent-negative {\n --ds-button-filled-bg: var(--color-background-faint-negative);\n --ds-button-filled-fg: var(--color-foreground-bold-negative);\n}\n\n.button-filled--contrast-faint.button-filled--intent-warning {\n --ds-button-filled-bg: var(--color-background-faint-warning);\n --ds-button-filled-fg: var(--color-foreground-bold-warning);\n}\n\n.button-filled--contrast-faint.button-filled--intent-caution {\n --ds-button-filled-bg: var(--color-background-faint-caution);\n --ds-button-filled-fg: var(--color-foreground-bold-caution);\n}\n\n.button-filled--contrast-faint.button-filled--intent-positive {\n --ds-button-filled-bg: var(--color-background-faint-positive);\n --ds-button-filled-fg: var(--color-foreground-bold-positive);\n}\n\n.button-filled--contrast-faint.button-filled--intent-guide {\n --ds-button-filled-bg: var(--color-background-faint-guide);\n --ds-button-filled-fg: var(--color-foreground-bold-guide);\n}\n\n.button-filled--contrast-faint.button-filled--intent-walkthrough {\n --ds-button-filled-bg: var(--color-background-faint-walkthrough);\n --ds-button-filled-fg: var(--color-foreground-bold-walkthrough);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\n\nexport type ButtonFilledIntent =\n | 'neutral'\n | 'brand'\n | 'ai'\n | 'negative'\n | 'warning'\n | 'caution'\n | 'positive'\n | 'guide'\n | 'walkthrough';\n\nexport type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';\n\nexport type ButtonFilledVariant = 'icon' | 'label' | 'icon-label';\n\nexport type ButtonFilledSize = 'md' | 'sm' | 'xs';\n\nexport type ButtonFilledWidth = ControlWidth;\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<ButtonFilledSize, 'md' | 'sm' | 'xs'> = {\n md: 'md',\n sm: 'sm',\n xs: 'xs',\n};\n\n@Component({\n tag: 'ds-button-filled',\n styleUrl: 'ButtonFilled.css',\n scoped: true,\n})\nexport class ButtonFilled {\n @Element() el!: HTMLElement;\n\n /**\n * Content layout. Default is label-only; pass `icon` for icon-only chrome\n * (nav / tool rails) or `icon-label` for leading icon + text.\n */\n @Prop() variant: ButtonFilledVariant = 'label';\n\n /** Control density (height, padding, icon, type). */\n @Prop() size: ButtonFilledSize = 'md';\n\n /** Width fit — hug content (default) or fill the parent. */\n @Prop() width: ButtonFilledWidth = 'hug';\n\n /** Visible text for `label` / `icon-label` variants. */\n @Prop() label: string = '';\n\n /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n @Prop() icon: string = '';\n\n /** Semantic colour intent. */\n @Prop() intent: ButtonFilledIntent = 'brand';\n\n /**\n * Background fill weight. Foreground uses the paired contrast token:\n * bold → faint, strong → medium, medium → strong, faint → bold.\n */\n @Prop() contrast: ButtonFilledContrast = 'bold';\n\n /** Disables interaction. */\n @Prop() isInactive: boolean = false;\n\n /** Native button type. */\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n\n @Event() dsClick!: EventEmitter<MouseEvent>;\n\n private buttonEl: HTMLButtonElement | null = null;\n\n @Method()\n async setFocus() {\n this.buttonEl?.focus();\n }\n\n private handleClick = (event: MouseEvent) => {\n if (this.isInactive) return;\n this.dsClick.emit(event);\n };\n\n private get showIcon(): boolean {\n return this.variant === 'icon' || this.variant === 'icon-label';\n }\n\n private get showLabel(): boolean {\n return this.variant === 'label' || this.variant === 'icon-label';\n }\n\n private get accessibleName(): string | undefined {\n if (this.ariaLabel) return this.ariaLabel;\n if (this.showLabel && this.label) return undefined;\n if (this.variant === 'icon') return this.icon || 'action';\n return this.label || 'action';\n }\n\n render() {\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const iconSize = ICON_SIZE[this.size];\n\n const cls: Record<string, boolean> = {\n 'button-filled': true,\n 'ds-focus-ring-inset': true,\n 'ds-interaction-fill': !this.isInactive,\n /* Bold is the default filled contrast — on-bold interaction tokens. */\n 'ds-interaction-fill--on-bold': this.contrast === 'bold',\n 'ds-interaction-fill--on-strong': this.contrast === 'strong',\n 'ds-interaction-fill--on-medium': this.contrast === 'medium',\n /* faint → default app interaction tokens (no --on-*). */\n 'ds-control-inactive': this.isInactive,\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n 'button-filled--icon': this.variant === 'icon',\n 'button-filled--label': this.variant === 'label',\n 'button-filled--icon-label': this.variant === 'icon-label',\n [`button-filled--intent-${this.intent}`]: true,\n [`button-filled--contrast-${this.contrast}`]: this.contrast !== 'bold',\n };\n\n return (\n <Host\n class={{\n 'button-filled-host': true,\n 'button-filled-host--icon': this.variant === 'icon',\n 'ds-control--md': this.size === 'md',\n 'ds-control--sm': this.size === 'sm',\n 'ds-control--xs': this.size === 'xs',\n ...controlWidthClass(this.width),\n }}\n tabIndex={-1}\n >\n <button\n ref={el => {\n this.buttonEl = el ?? null;\n }}\n type={this.type}\n class={cls}\n disabled={this.isInactive}\n aria-label={this.accessibleName}\n onClick={this.handleClick}\n >\n {this.showIcon && (\n <span class=\"button-filled__icon-wrap ds-interaction-fill__content\">\n <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n </span>\n )}\n {this.showLabel && (\n <span class=\"button-filled__label ds-interaction-fill__content\">\n <ds-text as=\"span\" variant={textVariant} emphasis color=\"inherit\">\n {this.label}\n </ds-text>\n </span>\n )}\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"kNAAA,MAAMA,EAAkB,IAAM,+mfC0B9B,MAAMC,EAA0D,CAC9DC,GAAI,KACJC,GAAI,KACJC,GAAI,M,MAQOC,EAAYC,EAAA,MAAAD,UAAAE,EALzB,WAAAC,CAAAC,G,2EAYUC,KAAAC,QAA+B,QAG/BD,KAAAE,KAAyB,KAGzBF,KAAAG,MAA2B,MAG3BH,KAAAI,MAAgB,GAGhBJ,KAAAK,KAAe,GAGfL,KAAAM,OAA6B,QAM7BN,KAAAO,SAAiC,OAGjCP,KAAAQ,WAAsB,MAGtBR,KAAAS,KAAsC,SAMtCT,KAAAU,SAAqC,KAOrCV,KAAAW,YAAeC,IACrB,GAAIZ,KAAKQ,WAAY,OACrBR,KAAKa,QAAQC,KAAKF,EAAM,CAgF3B,CAtFC,cAAMG,GACJf,KAAKU,UAAUM,O,CAQjB,YAAYC,GACV,OAAOjB,KAAKC,UAAY,QAAUD,KAAKC,UAAY,Y,CAGrD,aAAYiB,GACV,OAAOlB,KAAKC,UAAY,SAAWD,KAAKC,UAAY,Y,CAGtD,kBAAYkB,GACV,GAAInB,KAAKoB,UAAW,OAAOpB,KAAKoB,UAChC,GAAIpB,KAAKkB,WAAalB,KAAKI,MAAO,OAAOiB,UACzC,GAAIrB,KAAKC,UAAY,OAAQ,OAAOD,KAAKK,MAAQ,SACjD,OAAOL,KAAKI,OAAS,Q,CAGvB,MAAAkB,GACE,MAAMC,EAAcC,EAAqBxB,KAAKE,MAC9C,MAAMuB,EAAWlC,EAAUS,KAAKE,MAEhC,MAAMwB,EAA+B,CACnC,gBAAiB,KACjB,sBAAuB,KACvB,uBAAwB1B,KAAKQ,WAE7B,+BAAgCR,KAAKO,WAAa,OAClD,iCAAkCP,KAAKO,WAAa,SACpD,iCAAkCP,KAAKO,WAAa,SAEpD,sBAAuBP,KAAKQ,WAC5B,iBAAkBR,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,sBAAuBF,KAAKC,UAAY,OACxC,uBAAwBD,KAAKC,UAAY,QACzC,4BAA6BD,KAAKC,UAAY,aAC9C,CAAC,yBAAyBD,KAAKM,UAAW,KAC1C,CAAC,2BAA2BN,KAAKO,YAAaP,KAAKO,WAAa,QAGlE,OACEoB,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,qBAAsB,KACtB,2BAA4B9B,KAAKC,UAAY,OAC7C,iBAAkBD,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,QAC7B6B,EAAkB/B,KAAKG,QAE5B6B,UAAU,GAEVL,EAAA,UAAAE,IAAA,2CACEI,IAAKC,IACHlC,KAAKU,SAAWwB,GAAM,IAAI,EAE5BzB,KAAMT,KAAKS,KACXqB,MAAOJ,EACPS,SAAUnC,KAAKQ,WAAU,aACbR,KAAKmB,eACjBiB,QAASpC,KAAKW,aAEbX,KAAKiB,UACJU,EAAA,QAAAE,IAAA,2CAAMC,MAAM,yDACVH,EAAA,WAAAE,IAAA,2CAASQ,KAAMrC,KAAKK,KAAMH,KAAMuB,EAAUa,MAAM,aAGnDtC,KAAKkB,WACJS,EAAA,QAAAE,IAAA,2CAAMC,MAAM,qDACVH,EAAA,WAAAE,IAAA,2CAASU,GAAG,OAAOtC,QAASsB,EAAaiB,SAAQ,KAACF,MAAM,WACrDtC,KAAKI,S","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{p as e,H as a,h as n,a as i,t as r}from"./index.js";import{d as t}from"./p-BDQgqw5J.js";const d="--_badge-gradient-position";function s(e){const a=e.closest("ds-app-shell");return a?.hasAttribute("gradient")===true}const o=()=>`.sc-ds-badge-h{display:inline-flex;align-items:center;justify-content:center;pointer-events:none;vertical-align:middle;--_badge-bg:var(--color-background-bold-brand);--_badge-fg:var(--color-foreground-on-bold-background-primary);--_badge-ring:var(--color-background-secondary);--_badge-ring-width:var(--dimension-stroke-width-018)}.badge__mark.sc-ds-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;color:var(--_badge-fg);background:var(--_badge-bg);box-shadow:0 0 0 var(--_badge-ring-width) var(--_badge-ring);white-space:nowrap}.badge--dot.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-075);height:var(--dimension-size-075);border-radius:var(--dimension-radius-half)}.badge--counter.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-150);height:var(--dimension-size-150);padding:0;border-radius:var(--dimension-radius-half);line-height:1}.badge--selected.sc-ds-badge-h{--_badge-bg:var(--color-foreground-primary)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge{position:relative;z-index:0;box-shadow:none;isolation:isolate}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before,.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{content:'';position:absolute;inset:calc(-1 * var(--_badge-ring-width));border-radius:inherit;box-sizing:border-box;padding:var(--_badge-ring-width);pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);mask-composite:exclude}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before{z-index:-2;background-color:var(--_badge-ring)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{z-index:-1;background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:0 0;background-repeat:no-repeat;background-attachment:fixed;opacity:var(--ds-shell-gradient-opacity, 1)}`;const g={default:"var(--color-background-secondary)",primary:"var(--color-background-primary)",secondary:"var(--color-background-secondary)",medium:"var(--color-background-medium-neutral)",bold:"var(--color-background-bold-neutral)",strong:"var(--color-background-strong-neutral)",navigation:"var(--color-navigation-background)","always-dark":"var(--color-always-dark-background)"};const c=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.variant="counter";this.count=0;this.max=9;this.surface="default";this.gradientBackground=false;this.isSelected=false;this.gradientLayoutVersion=0;this.gradientObserver=null;this.gradientWindowListener=null}componentDidLoad(){this.enableShellGradientRingIfNeeded()}disconnectedCallback(){this.unbindGradientRingSync()}gradientBackgroundChanged(){this.bindGradientRingSync()}enableShellGradientRingIfNeeded(){if(!this.gradientBackground&&s(this.el)){this.gradientBackground=true}if(this.gradientBackground){this.bindGradientRingSync()}}bindGradientRingSync(){this.unbindGradientRingSync();if(!this.gradientBackground)return;const e=()=>{this.gradientLayoutVersion+=1};e();this.gradientWindowListener=e;window.addEventListener("resize",e);if(typeof ResizeObserver!=="undefined"){this.gradientObserver=new ResizeObserver(e);this.gradientObserver.observe(this.el);const a=this.el.closest("ds-app-shell");if(a)this.gradientObserver.observe(a);const n=this.el.closest("ds-bar-nav");if(n)this.gradientObserver.observe(n);const i=this.el.closest("ds-panel-nav");if(i)this.gradientObserver.observe(i)}}unbindGradientRingSync(){if(this.gradientWindowListener){window.removeEventListener("resize",this.gradientWindowListener);this.gradientWindowListener=null}this.gradientObserver?.disconnect();this.gradientObserver=null}ringHostStyle(e){const a={"--_badge-ring":e};if(!this.gradientBackground||!s(this.el))return a;a[d]="0 0";return a}render(){const e=this.variant==="dot";if(!e&&this.count===0)return n(i,{style:{display:"none"}});const a=this.count>this.max?"+":String(this.count);const r=this.label??(e?"Notification":String(this.count));const t=this.background??g[this.surface];return n(i,{class:{badge:true,"badge--counter":!e,"badge--dot":e,"badge--selected":this.isSelected,"badge--on-gradient-background":this.gradientBackground},"aria-label":r,style:this.ringHostStyle(t)},n("span",{class:"badge__mark","aria-hidden":"true"},!e&&n("ds-text",{as:"span",variant:"text-caption",emphasis:true,color:"inherit"},a)))}get el(){return this}static get watchers(){return{gradientBackground:[{gradientBackgroundChanged:0}]}}static get style(){return o()}},[2,"ds-badge",{variant:[1],count:[2],max:[2],surface:[1],background:[1],gradientBackground:[516,"gradient-background"],isSelected:[4,"is-selected"],label:[1],gradientLayoutVersion:[32]},undefined,{gradientBackground:[{gradientBackgroundChanged:0}]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-badge","ds-text"];e.forEach((e=>{switch(e){case"ds-badge":if(!customElements.get(r(e))){customElements.define(r(e),c)}break;case"ds-text":if(!customElements.get(r(e))){t()}break}}))}b();export{c as B,b as d};
2
- //# sourceMappingURL=p-AiGt4dQS.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["BADGE_GRADIENT_POSITION_VAR","isShellGradientActive","from","shell","closest","hasAttribute","badgeCss","SURFACE_RING","default","primary","secondary","medium","bold","strong","navigation","Badge","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","count","max","surface","gradientBackground","isSelected","gradientLayoutVersion","gradientObserver","gradientWindowListener","componentDidLoad","enableShellGradientRingIfNeeded","disconnectedCallback","unbindGradientRingSync","gradientBackgroundChanged","bindGradientRingSync","el","update","window","addEventListener","ResizeObserver","observe","bar","panel","removeEventListener","disconnect","ringHostStyle","ring","style","render","isDot","h","Host","display","String","ariaLabel","label","background","class","badge","as","emphasis","color"],"sources":["src/wc/nav/badge-gradient-ring.ts","src/wc/components/Badge/Badge.css?tag=ds-badge&encapsulation=scoped","src/wc/components/Badge/Badge.tsx"],"sourcesContent":["import {\n SHELL_GRADIENT_POSITION_BAR_VAR,\n SHELL_GRADIENT_POSITION_PANEL_VAR,\n} from './shell-gradient';\n\n/** Per-badge background-position for shell gradient ring sampling. */\nexport const BADGE_GRADIENT_POSITION_VAR = '--_badge-gradient-position';\n\nexport interface GradientSurface {\n element: HTMLElement;\n chromeHost: HTMLElement;\n positionVar: string;\n}\n\n/** Whether the badge sits under `ds-app-shell[gradient]`. */\nexport function isShellGradientActive(from: HTMLElement): boolean {\n // Explicit <HTMLElement>: the inferred HTMLDsAppShellElement type only\n // resolves where @stencil/core types are installed — consumers importing\n // `@ds-mo/ui/nav` (raw TS) compile this without them.\n const shell = from.closest<HTMLElement>('ds-app-shell');\n return shell?.hasAttribute('gradient') === true;\n}\n\n/** Bar or panel chrome surface that owns the shell gradient stack. */\nexport function findGradientSurface(from: HTMLElement): GradientSurface | null {\n const barHost = from.closest('ds-bar-nav') as HTMLElement | null;\n if (barHost) {\n const root = barHost.shadowRoot ?? barHost;\n const element = root.querySelector('.bar-nav');\n if (element) {\n return {\n element: element as HTMLElement,\n chromeHost: barHost,\n positionVar: SHELL_GRADIENT_POSITION_BAR_VAR,\n };\n }\n }\n\n const panelHost = from.closest('ds-panel-nav') as HTMLElement | null;\n if (panelHost) {\n const root = panelHost.shadowRoot ?? panelHost;\n const element = root.querySelector('.panel-nav');\n if (element) {\n return {\n element: element as HTMLElement,\n chromeHost: panelHost,\n positionVar: SHELL_GRADIENT_POSITION_PANEL_VAR,\n };\n }\n }\n\n return null;\n}\n\ninterface ParsedPosition {\n x: number;\n y: number;\n}\n\n/** Parse a two-value CSS background-position (e.g. `-200px 0`). */\nexport function parseCssBackgroundPosition(value: string): ParsedPosition {\n const trimmed = value.trim();\n if (!trimmed) return { x: 0, y: 0 };\n\n const parts = trimmed.split(/\\s+/);\n const x = parseLength(parts[0] ?? '0');\n const y = parseLength(parts[1] ?? '0');\n return { x, y };\n}\n\nfunction parseLength(token: string): number {\n const px = token.match(/^(-?[\\d.]+)px$/);\n if (px) return Number(px[1]);\n return 0;\n}\n\n/**\n * Background position for a badge ring so the shell gradient aligns with nav chrome.\n * Uses badge center relative to the painted chrome surface.\n */\nexport function badgeGradientPosition(\n badgeHost: HTMLElement,\n surface: GradientSurface,\n shellPosition: string,\n): string {\n const badgeRect = badgeHost.getBoundingClientRect();\n const surfaceRect = surface.element.getBoundingClientRect();\n const anchorX = badgeRect.left + badgeRect.width / 2 - surfaceRect.left;\n const anchorY = badgeRect.top + badgeRect.height / 2 - surfaceRect.top;\n const { x, y } = parseCssBackgroundPosition(shellPosition);\n\n return `${Math.round(x - anchorX)}px ${Math.round(y - anchorY)}px`;\n}\n\n/** Resolve shell gradient position from chrome host custom properties. */\nexport function readShellGradientPosition(surface: GradientSurface): string {\n const styles = getComputedStyle(surface.chromeHost);\n return styles.getPropertyValue(surface.positionVar).trim() || '0 0';\n}\n\n/** Stamp `--_badge-gradient-position` on the badge host (fixed viewport chrome). */\nexport function syncBadgeGradientPosition(badgeHost: HTMLElement): void {\n if (!isShellGradientActive(badgeHost)) {\n badgeHost.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);\n return;\n }\n\n badgeHost.style.setProperty(BADGE_GRADIENT_POSITION_VAR, '0 0');\n}\n",":host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n vertical-align: middle;\n\n --_badge-bg: var(--color-background-bold-brand);\n --_badge-fg: var(--color-foreground-on-bold-background-primary);\n --_badge-ring: var(--color-background-secondary);\n --_badge-ring-width: var(--dimension-stroke-width-018);\n}\n\n.badge__mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n box-sizing: border-box;\n color: var(--_badge-fg);\n background: var(--_badge-bg);\n box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n white-space: nowrap;\n}\n\n:host(.badge--dot) .badge__mark {\n width: var(--dimension-size-075);\n height: var(--dimension-size-075);\n border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n width: var(--dimension-size-150);\n height: var(--dimension-size-150);\n padding: 0;\n border-radius: var(--dimension-radius-half);\n line-height: 1;\n}\n\n:host(.badge--selected) {\n --_badge-bg: var(--color-foreground-primary);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n:host(.badge--on-gradient-background) .badge__mark {\n position: relative;\n z-index: 0;\n box-shadow: none;\n isolation: isolate;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before,\n:host(.badge--on-gradient-background) .badge__mark::after {\n content: '';\n position: absolute;\n inset: calc(-1 * var(--_badge-ring-width));\n border-radius: inherit;\n box-sizing: border-box;\n padding: var(--_badge-ring-width);\n pointer-events: none;\n /* stylelint-disable color-no-hex -- mask luminance stops for ring cutout, not theme colors */\n -webkit-mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n /* stylelint-enable color-no-hex */\n mask-composite: exclude;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before {\n z-index: -2;\n background-color: var(--_badge-ring);\n}\n\n:host(.badge--on-gradient-background) .badge__mark::after {\n z-index: -1;\n background-image: var(--ds-shell-gradient-image, none);\n background-size: var(--ds-shell-gradient-size, auto);\n background-position: 0 0;\n background-repeat: no-repeat;\n background-attachment: fixed;\n opacity: var(--ds-shell-gradient-opacity, 1);\n}\n","import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';\nimport {\n BADGE_GRADIENT_POSITION_VAR,\n isShellGradientActive,\n} from '../../nav/badge-gradient-ring';\n\nexport type BadgeVariant = 'counter' | 'dot';\nexport type BadgeSurface =\n | 'default'\n | 'primary'\n | 'secondary'\n | 'medium'\n | 'bold'\n | 'strong'\n | 'navigation'\n | 'always-dark';\n\nconst SURFACE_RING: Record<BadgeSurface, string> = {\n default: 'var(--color-background-secondary)',\n primary: 'var(--color-background-primary)',\n secondary: 'var(--color-background-secondary)',\n medium: 'var(--color-background-medium-neutral)',\n bold: 'var(--color-background-bold-neutral)',\n strong: 'var(--color-background-strong-neutral)',\n navigation: 'var(--color-navigation-background)',\n 'always-dark': 'var(--color-always-dark-background)',\n};\n\n@Component({\n tag: 'ds-badge',\n styleUrl: 'Badge.css',\n scoped: true,\n})\nexport class Badge {\n @Element() el!: HTMLElement;\n\n /** Render as a compact counter or notification dot. */\n @Prop() variant: BadgeVariant = 'counter';\n\n /** Count shown for counter badges. Count 0 hides the badge. */\n @Prop() count: number = 0;\n\n /** Highest count shown before compacting to \"+\". */\n @Prop() max: number = 9;\n\n /** Surface context for the ring around dots. */\n @Prop() surface: BadgeSurface = 'default';\n\n /** Direct ring background override for component-local surfaces. */\n @Prop() background: string | undefined;\n\n /**\n * Ring samples the shell gradient stack (base fill + wash) instead of a flat\n * `box-shadow`. Auto-enabled in `componentDidLoad` under `ds-app-shell[gradient]`;\n * set `gradient-background` to opt in/out explicitly.\n *\n * The attribute must NOT start with `on` — Stencil's setAccessor routes any\n * unknown `on*` member down the event-listener path during attribute\n * reflection, calling addEventListener with a non-listener and throwing.\n */\n @Prop({ attribute: 'gradient-background', reflect: true }) gradientBackground: boolean = false;\n\n /** Deprecated alias for selected counter styling. Prefer context-specific color in the parent. */\n @Prop() isSelected: boolean = false;\n\n /** Accessible label. Defaults to the count as a string. */\n @Prop() label: string | undefined;\n\n /** Bumps on resize/layout so render recomputes gradient ring position. */\n @State() private gradientLayoutVersion = 0;\n\n private gradientObserver: ResizeObserver | null = null;\n private gradientWindowListener: (() => void) | null = null;\n\n componentDidLoad() {\n this.enableShellGradientRingIfNeeded();\n }\n\n disconnectedCallback() {\n this.unbindGradientRingSync();\n }\n\n @Watch('gradientBackground')\n gradientBackgroundChanged() {\n this.bindGradientRingSync();\n }\n\n /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */\n private enableShellGradientRingIfNeeded() {\n if (!this.gradientBackground && isShellGradientActive(this.el)) {\n this.gradientBackground = true;\n }\n\n if (this.gradientBackground) {\n this.bindGradientRingSync();\n }\n }\n\n private bindGradientRingSync() {\n this.unbindGradientRingSync();\n\n if (!this.gradientBackground) return;\n\n const update = () => {\n this.gradientLayoutVersion += 1;\n };\n update();\n\n this.gradientWindowListener = update;\n window.addEventListener('resize', update);\n\n if (typeof ResizeObserver !== 'undefined') {\n this.gradientObserver = new ResizeObserver(update);\n this.gradientObserver.observe(this.el);\n\n const shell = this.el.closest('ds-app-shell');\n if (shell) this.gradientObserver.observe(shell);\n\n const bar = this.el.closest('ds-bar-nav');\n if (bar) this.gradientObserver.observe(bar);\n\n const panel = this.el.closest('ds-panel-nav');\n if (panel) this.gradientObserver.observe(panel);\n }\n }\n\n private unbindGradientRingSync() {\n if (this.gradientWindowListener) {\n window.removeEventListener('resize', this.gradientWindowListener);\n this.gradientWindowListener = null;\n }\n\n this.gradientObserver?.disconnect();\n this.gradientObserver = null;\n }\n\n private ringHostStyle(ring: string): Record<string, string> {\n void this.gradientLayoutVersion;\n\n const style: Record<string, string> = { '--_badge-ring': ring };\n if (!this.gradientBackground || !isShellGradientActive(this.el)) return style;\n\n /* Shell chrome wash uses background-attachment: fixed at viewport origin. */\n style[BADGE_GRADIENT_POSITION_VAR] = '0 0';\n return style;\n }\n\n render() {\n const isDot = this.variant === 'dot';\n\n if (!isDot && this.count === 0) return <Host style={{ display: 'none' }} />;\n\n const display = this.count > this.max ? '+' : String(this.count);\n const ariaLabel = this.label ?? (isDot ? 'Notification' : String(this.count));\n const ring = this.background ?? SURFACE_RING[this.surface];\n\n return (\n <Host\n class={{\n badge: true,\n 'badge--counter': !isDot,\n 'badge--dot': isDot,\n 'badge--selected': this.isSelected,\n 'badge--on-gradient-background': this.gradientBackground,\n }}\n aria-label={ariaLabel}\n style={this.ringHostStyle(ring)}\n >\n <span class=\"badge__mark\" aria-hidden=\"true\">\n {!isDot && (\n <ds-text as=\"span\" variant=\"text-caption\" emphasis color=\"inherit\">\n {display}\n </ds-text>\n )}\n </span>\n </Host>\n );\n }\n}\n"],"mappings":"+FAMO,MAAMA,EAA8B,6BASrC,SAAUC,EAAsBC,GAIpC,MAAMC,EAAQD,EAAKE,QAAqB,gBACxC,OAAOD,GAAOE,aAAa,cAAgB,IAC7C,CCrBA,MAAMC,EAAW,IAAM,ikECiBvB,MAAMC,EAA6C,CACjDC,QAAS,oCACTC,QAAS,kCACTC,UAAW,oCACXC,OAAQ,yCACRC,KAAM,uCACNC,OAAQ,yCACRC,WAAY,qCACZ,cAAe,uC,MAQJC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4CASUC,KAAAC,QAAwB,UAGxBD,KAAAE,MAAgB,EAGhBF,KAAAG,IAAc,EAGdH,KAAAI,QAAwB,UAc2BJ,KAAAK,mBAA8B,MAGjFL,KAAAM,WAAsB,MAMbN,KAAAO,sBAAwB,EAEjCP,KAAAQ,iBAA0C,KAC1CR,KAAAS,uBAA8C,IA0GvD,CAxGC,gBAAAC,GACEV,KAAKW,iC,CAGP,oBAAAC,GACEZ,KAAKa,wB,CAIP,yBAAAC,GACEd,KAAKe,sB,CAIC,+BAAAJ,GACN,IAAKX,KAAKK,oBAAsBxB,EAAsBmB,KAAKgB,IAAK,CAC9DhB,KAAKK,mBAAqB,I,CAG5B,GAAIL,KAAKK,mBAAoB,CAC3BL,KAAKe,sB,EAID,oBAAAA,GACNf,KAAKa,yBAEL,IAAKb,KAAKK,mBAAoB,OAE9B,MAAMY,EAAS,KACbjB,KAAKO,uBAAyB,CAAC,EAEjCU,IAEAjB,KAAKS,uBAAyBQ,EAC9BC,OAAOC,iBAAiB,SAAUF,GAElC,UAAWG,iBAAmB,YAAa,CACzCpB,KAAKQ,iBAAmB,IAAIY,eAAeH,GAC3CjB,KAAKQ,iBAAiBa,QAAQrB,KAAKgB,IAEnC,MAAMjC,EAAQiB,KAAKgB,GAAGhC,QAAQ,gBAC9B,GAAID,EAAOiB,KAAKQ,iBAAiBa,QAAQtC,GAEzC,MAAMuC,EAAMtB,KAAKgB,GAAGhC,QAAQ,cAC5B,GAAIsC,EAAKtB,KAAKQ,iBAAiBa,QAAQC,GAEvC,MAAMC,EAAQvB,KAAKgB,GAAGhC,QAAQ,gBAC9B,GAAIuC,EAAOvB,KAAKQ,iBAAiBa,QAAQE,E,EAIrC,sBAAAV,GACN,GAAIb,KAAKS,uBAAwB,CAC/BS,OAAOM,oBAAoB,SAAUxB,KAAKS,wBAC1CT,KAAKS,uBAAyB,I,CAGhCT,KAAKQ,kBAAkBiB,aACvBzB,KAAKQ,iBAAmB,I,CAGlB,aAAAkB,CAAcC,GAGpB,MAAMC,EAAgC,CAAE,gBAAiBD,GACzD,IAAK3B,KAAKK,qBAAuBxB,EAAsBmB,KAAKgB,IAAK,OAAOY,EAGxEA,EAAMhD,GAA+B,MACrC,OAAOgD,C,CAGT,MAAAC,GACE,MAAMC,EAAQ9B,KAAKC,UAAY,MAE/B,IAAK6B,GAAS9B,KAAKE,QAAU,EAAG,OAAO6B,EAACC,EAAI,CAACJ,MAAO,CAAEK,QAAS,UAE/D,MAAMA,EAAUjC,KAAKE,MAAQF,KAAKG,IAAM,IAAM+B,OAAOlC,KAAKE,OAC1D,MAAMiC,EAAYnC,KAAKoC,QAAUN,EAAQ,eAAiBI,OAAOlC,KAAKE,QACtE,MAAMyB,EAAO3B,KAAKqC,YAAclD,EAAaa,KAAKI,SAElD,OACE2B,EAACC,EAAI,CACHM,MAAO,CACLC,MAAO,KACP,kBAAmBT,EACnB,aAAcA,EACd,kBAAmB9B,KAAKM,WACxB,gCAAiCN,KAAKK,oBACvC,aACW8B,EACZP,MAAO5B,KAAK0B,cAAcC,IAE1BI,EAAA,QAAMO,MAAM,cAAa,cAAa,SAClCR,GACAC,EAAA,WAASS,GAAG,OAAOvC,QAAQ,eAAewC,SAAQ,KAACC,MAAM,WACtDT,I","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{p as t,H as e,h as s,a as r,t as i}from"./index.js";function o(t){return`ds-text--${t.replace(/^text-/,"")}`}const a=()=>`.ds-text.sc-ds-text{margin:0;font-family:var(--typography-font-family)}.ds-text--display-medium.sc-ds-text{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-text{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-text{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-text{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-text{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-text{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-text{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-text{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-text{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-text,.ds-text--display-small.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-text,.ds-text--display-small.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-text,.ds-text--title-small.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-text,.ds-text--title-small.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-text,.ds-text--body-medium.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-text,.ds-text--body-medium.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--truncate-1.sc-ds-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-text--truncate-2.sc-ds-text,.ds-text--truncate-3.sc-ds-text,.ds-text--truncate-4.sc-ds-text,.ds-text--truncate-5.sc-ds-text{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;text-overflow:ellipsis;word-break:break-word}.ds-text--truncate-2.sc-ds-text{-webkit-line-clamp:2}.ds-text--truncate-3.sc-ds-text{-webkit-line-clamp:3}.ds-text--truncate-4.sc-ds-text{-webkit-line-clamp:4}.ds-text--truncate-5.sc-ds-text{-webkit-line-clamp:5}.ds-text--nowrap.sc-ds-text{white-space:nowrap;word-break:normal;overflow:hidden;text-overflow:ellipsis;min-width:0}.ds-text--balance.sc-ds-text{text-wrap:balance}.ds-text--pretty.sc-ds-text{text-wrap:pretty}.ds-text--color-primary.sc-ds-text{color:var(--color-foreground-primary)}.ds-text--color-secondary.sc-ds-text{color:var(--color-foreground-secondary)}.ds-text--color-tertiary.sc-ds-text{color:var(--color-foreground-tertiary)}.ds-text--color-brand.sc-ds-text{color:var(--color-foreground-bold-brand)}.ds-text--color-negative.sc-ds-text{color:var(--color-foreground-bold-negative)}.ds-text--color-positive.sc-ds-text{color:var(--color-foreground-bold-positive)}.ds-text--color-warning.sc-ds-text{color:var(--color-foreground-bold-warning)}.ds-text--color-caution.sc-ds-text{color:var(--color-foreground-bold-caution)}.ds-text--color-ai.sc-ds-text{color:var(--color-foreground-bold-ai)}.ds-text--color-on-strong.sc-ds-text{color:var(--color-foreground-on-strong-background-primary)}.ds-text--color-on-bold.sc-ds-text{color:var(--color-foreground-on-bold-background-primary)}.ds-text--color-inherit.sc-ds-text{color:inherit}.ds-text--decoration-underline.sc-ds-text{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}.ds-text--decoration-dotted-underline.sc-ds-text{text-decoration:underline dotted;text-underline-offset:2px;text-decoration-thickness:1px}.ds-text--italic.sc-ds-text{font-style:italic}.ds-text--font-feature-tabular-nums.sc-ds-text{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}.ds-text--align-left.sc-ds-text{text-align:left}.ds-text--align-center.sc-ds-text{text-align:center}.ds-text--align-right.sc-ds-text{text-align:right}`;const d=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.variant="text-body-medium";this.emphasis=false;this.italic=false;this.lineTruncation="none";this.fontFeature="normal";this.as="p"}render(){const t=this.as;const e=t=>typeof t==="string"&&t.startsWith("var(--");const i={"ds-text":true,[o(this.variant)]:true,"ds-text--emphasis":this.emphasis,"ds-text--regular":!this.emphasis,"ds-text--nowrap":this.wrap==="nowrap","ds-text--balance":this.wrap==="balance","ds-text--pretty":this.wrap==="pretty","ds-text--truncate-1":this.lineTruncation===1&&this.wrap!=="nowrap","ds-text--truncate-2":this.lineTruncation===2&&this.wrap!=="nowrap","ds-text--truncate-3":this.lineTruncation===3&&this.wrap!=="nowrap","ds-text--truncate-4":this.lineTruncation===4&&this.wrap!=="nowrap","ds-text--truncate-5":this.lineTruncation===5&&this.wrap!=="nowrap","ds-text--color-primary":this.color==="primary","ds-text--color-secondary":this.color==="secondary","ds-text--color-tertiary":this.color==="tertiary","ds-text--color-brand":this.color==="brand","ds-text--color-negative":this.color==="negative","ds-text--color-positive":this.color==="positive","ds-text--color-warning":this.color==="warning","ds-text--color-caution":this.color==="caution","ds-text--color-ai":this.color==="ai","ds-text--color-on-strong":this.color==="on-strong","ds-text--color-on-bold":this.color==="on-bold","ds-text--color-inherit":this.color==="inherit","ds-text--decoration-underline":this.decoration==="underline","ds-text--decoration-dotted-underline":this.decoration==="dotted-underline","ds-text--italic":this.italic,"ds-text--align-left":this.align==="left","ds-text--align-center":this.align==="center","ds-text--align-right":this.align==="right","ds-text--font-feature-tabular-nums":this.fontFeature==="tabular-nums"};const a=this.color&&e(this.color)?{color:this.color}:undefined;const d={};if(this.as==="label"&&this.for)d["for"]=this.for;if(this.textId)d["id"]=this.textId;return s(r,{key:"177fe659b02962c219b893973b5c4bbd92bc2a2e",style:{display:"contents"}},s(t,{key:"85f7dd1211754d03be1a75a72d6e83326832800e",class:i,style:a,...d},s("slot",{key:"2bb6cb7ccae925cad07f418b914f8a54992b2280"})))}static get style(){return a()}},[262,"ds-text",{variant:[1],emphasis:[4],color:[1],decoration:[1],italic:[4],align:[1],lineTruncation:[8,"line-truncation"],wrap:[1],fontFeature:[1,"font-feature"],as:[1],for:[1],textId:[1,"text-id"]}]);function n(){if(typeof customElements==="undefined"){return}const t=["ds-text"];t.forEach((t=>{switch(t){case"ds-text":if(!customElements.get(i(t))){customElements.define(i(t),d)}break}}))}n();export{d as T,n as d};
2
- //# sourceMappingURL=p-BDQgqw5J.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["textVariantClass","variant","replace","textCss","Text","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","emphasis","italic","lineTruncation","fontFeature","as","render","Tag","isCustomColor","c","startsWith","cls","wrap","color","decoration","align","style","undefined","extraProps","for","textId","h","Host","key","display","class"],"sources":["src/wc/components/Text/text-utils.ts","src/wc/components/Text/Text.css?tag=ds-text&encapsulation=scoped","src/wc/components/Text/Text.tsx"],"sourcesContent":["import type { TextVariant } from './text-types';\n\n/** `text-body-medium` → `ds-text--body-medium` */\nexport function textVariantClass(variant: TextVariant): string {\n return `ds-text--${variant.replace(/^text-/, '')}`;\n}\n",".ds-text {\n margin: 0;\n font-family: var(--typography-font-family);\n}\n\n/* ── Variant: size / leading / (caption) case ───────────────────────────── */\n\n.ds-text--display-medium {\n font-size: var(--typography-fontsize-3xl);\n line-height: var(--typography-lineheight-3xl);\n}\n\n.ds-text--display-small {\n font-size: var(--typography-fontsize-2xl);\n line-height: var(--typography-lineheight-2xl);\n}\n\n.ds-text--title-large {\n font-size: var(--typography-fontsize-xl);\n line-height: var(--typography-lineheight-xl);\n}\n\n.ds-text--title-medium {\n font-size: var(--typography-fontsize-lg);\n line-height: var(--typography-lineheight-lg);\n}\n\n.ds-text--title-small {\n font-size: var(--typography-fontsize-md);\n line-height: var(--typography-lineheight-md);\n}\n\n.ds-text--body-large {\n font-size: var(--typography-fontsize-lg);\n line-height: var(--typography-lineheight-lg);\n}\n\n.ds-text--body-medium {\n font-size: var(--typography-fontsize-md);\n line-height: var(--typography-lineheight-md);\n}\n\n.ds-text--body-small {\n font-size: var(--typography-fontsize-sm);\n line-height: var(--typography-lineheight-sm);\n}\n\n.ds-text--caption {\n font-size: var(--typography-fontsize-xs);\n line-height: var(--typography-lineheight-xs);\n text-transform: uppercase;\n}\n\n/* ── Emphasis: weight + letter-spacing ──────────────────────────────────── */\n\n.ds-text--display-medium.ds-text--emphasis,\n.ds-text--display-small.ds-text--emphasis {\n font-weight: var(--typography-weight-bold);\n letter-spacing: var(--typography-letterspacing-negative-double);\n}\n\n.ds-text--display-medium.ds-text--regular,\n.ds-text--display-small.ds-text--regular {\n font-weight: var(--typography-weight-regular);\n letter-spacing: var(--typography-letterspacing-negative);\n}\n\n.ds-text--title-large.ds-text--emphasis {\n font-weight: var(--typography-weight-semibold);\n letter-spacing: var(--typography-letterspacing-negative-double);\n}\n\n.ds-text--title-large.ds-text--regular {\n font-weight: var(--typography-weight-regular);\n letter-spacing: var(--typography-letterspacing-negative);\n}\n\n.ds-text--title-medium.ds-text--emphasis,\n.ds-text--title-small.ds-text--emphasis {\n font-weight: var(--typography-weight-semibold);\n letter-spacing: var(--typography-letterspacing-negative);\n}\n\n.ds-text--title-medium.ds-text--regular,\n.ds-text--title-small.ds-text--regular {\n font-weight: var(--typography-weight-regular);\n letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.ds-text--body-large.ds-text--emphasis,\n.ds-text--body-medium.ds-text--emphasis {\n font-weight: var(--typography-weight-medium);\n letter-spacing: var(--typography-letterspacing-negative);\n}\n\n.ds-text--body-large.ds-text--regular,\n.ds-text--body-medium.ds-text--regular {\n font-weight: var(--typography-weight-regular);\n letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.ds-text--body-small.ds-text--emphasis {\n font-weight: var(--typography-weight-medium);\n letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.ds-text--body-small.ds-text--regular {\n font-weight: var(--typography-weight-regular);\n letter-spacing: var(--typography-letterspacing-none);\n}\n\n.ds-text--caption.ds-text--emphasis {\n font-weight: var(--typography-weight-semibold);\n letter-spacing: var(--typography-letterspacing-positive);\n}\n\n.ds-text--caption.ds-text--regular {\n font-weight: var(--typography-weight-medium);\n letter-spacing: var(--typography-letterspacing-positive);\n}\n\n/* ── Truncation ─────────────────────────────────────────────────────────── */\n\n.ds-text--truncate-1 {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.ds-text--truncate-2,\n.ds-text--truncate-3,\n.ds-text--truncate-4,\n.ds-text--truncate-5 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n word-break: break-word;\n}\n\n.ds-text--truncate-2 { -webkit-line-clamp: 2; }\n.ds-text--truncate-3 { -webkit-line-clamp: 3; }\n.ds-text--truncate-4 { -webkit-line-clamp: 4; }\n.ds-text--truncate-5 { -webkit-line-clamp: 5; }\n\n/* ── Wrap ───────────────────────────────────────────────────────────────── */\n\n.ds-text--nowrap {\n white-space: nowrap;\n word-break: normal;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n}\n\n.ds-text--balance { text-wrap: balance; }\n.ds-text--pretty { text-wrap: pretty; }\n\n/* ── Color ──────────────────────────────────────────────────────────────── */\n\n.ds-text--color-primary { color: var(--color-foreground-primary); }\n.ds-text--color-secondary { color: var(--color-foreground-secondary); }\n.ds-text--color-tertiary { color: var(--color-foreground-tertiary); }\n.ds-text--color-brand { color: var(--color-foreground-bold-brand); }\n.ds-text--color-negative { color: var(--color-foreground-bold-negative); }\n.ds-text--color-positive { color: var(--color-foreground-bold-positive); }\n.ds-text--color-warning { color: var(--color-foreground-bold-warning); }\n.ds-text--color-caution { color: var(--color-foreground-bold-caution); }\n.ds-text--color-ai { color: var(--color-foreground-bold-ai); }\n.ds-text--color-on-strong { color: var(--color-foreground-on-strong-background-primary); }\n.ds-text--color-on-bold { color: var(--color-foreground-on-bold-background-primary); }\n.ds-text--color-inherit { color: inherit; }\n\n/* ── Decorations ─────────────────────────────────────────────────────────── */\n\n.ds-text--decoration-underline {\n text-decoration: underline;\n text-underline-offset: 2px;\n text-decoration-thickness: 1px;\n}\n\n.ds-text--decoration-dotted-underline {\n text-decoration: underline dotted;\n text-underline-offset: 2px;\n text-decoration-thickness: 1px;\n}\n\n/* ── Style ──────────────────────────────────────────────────────────────── */\n\n.ds-text--italic { font-style: italic; }\n\n.ds-text--font-feature-tabular-nums {\n font-variant-numeric: tabular-nums;\n font-feature-settings: 'tnum';\n}\n\n/* ── Align ──────────────────────────────────────────────────────────────── */\n\n.ds-text--align-left { text-align: left; }\n.ds-text--align-center { text-align: center; }\n.ds-text--align-right { text-align: right; }\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { textVariantClass } from './text-utils';\nimport type {\n TextAlign,\n TextColor,\n TextDecoration,\n TextElement,\n TextFontFeature,\n TextVariant,\n LineTruncation,\n TextWrap,\n} from './text-types';\n\n@Component({\n tag: 'ds-text',\n styleUrl: 'Text.css',\n scoped: true,\n})\nexport class Text {\n @Prop() variant: TextVariant = 'text-body-medium';\n /**\n * Heavier weight + tighter letter-spacing for the variant.\n * `false` (default): regular weight (caption stays medium).\n * `true`: display bold, title/caption semibold, body medium.\n */\n @Prop() emphasis: boolean = false;\n @Prop() color: TextColor | undefined;\n @Prop() decoration: TextDecoration | undefined;\n @Prop() italic: boolean = false;\n @Prop() align: TextAlign | undefined;\n @Prop() lineTruncation: LineTruncation = 'none';\n @Prop() wrap: TextWrap | undefined;\n @Prop() fontFeature: TextFontFeature = 'normal';\n @Prop() as: TextElement = 'p';\n /** Maps to `for` attribute on <label> elements. */\n @Prop() for: string | undefined;\n /** Forwarded to the inner element (e.g. aria-labelledby targets). */\n @Prop() textId: string | undefined;\n\n render() {\n // Polymorphic element: TSX treats a variable tag as a component, so a\n // dynamic intrinsic element name must be cast to `any` to render.\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const Tag = this.as as any;\n const isCustomColor = (c: TextColor) => typeof c === 'string' && c.startsWith('var(--');\n\n const cls: Record<string, boolean> = {\n 'ds-text': true,\n [textVariantClass(this.variant)]: true,\n 'ds-text--emphasis': this.emphasis,\n 'ds-text--regular': !this.emphasis,\n 'ds-text--nowrap': this.wrap === 'nowrap',\n 'ds-text--balance': this.wrap === 'balance',\n 'ds-text--pretty': this.wrap === 'pretty',\n 'ds-text--truncate-1': this.lineTruncation === 1 && this.wrap !== 'nowrap',\n 'ds-text--truncate-2': this.lineTruncation === 2 && this.wrap !== 'nowrap',\n 'ds-text--truncate-3': this.lineTruncation === 3 && this.wrap !== 'nowrap',\n 'ds-text--truncate-4': this.lineTruncation === 4 && this.wrap !== 'nowrap',\n 'ds-text--truncate-5': this.lineTruncation === 5 && this.wrap !== 'nowrap',\n 'ds-text--color-primary': this.color === 'primary',\n 'ds-text--color-secondary': this.color === 'secondary',\n 'ds-text--color-tertiary': this.color === 'tertiary',\n 'ds-text--color-brand': this.color === 'brand',\n 'ds-text--color-negative': this.color === 'negative',\n 'ds-text--color-positive': this.color === 'positive',\n 'ds-text--color-warning': this.color === 'warning',\n 'ds-text--color-caution': this.color === 'caution',\n 'ds-text--color-ai': this.color === 'ai',\n 'ds-text--color-on-strong': this.color === 'on-strong',\n 'ds-text--color-on-bold': this.color === 'on-bold',\n 'ds-text--color-inherit': this.color === 'inherit',\n 'ds-text--decoration-underline': this.decoration === 'underline',\n 'ds-text--decoration-dotted-underline': this.decoration === 'dotted-underline',\n 'ds-text--italic': this.italic,\n 'ds-text--align-left': this.align === 'left',\n 'ds-text--align-center': this.align === 'center',\n 'ds-text--align-right': this.align === 'right',\n 'ds-text--font-feature-tabular-nums': this.fontFeature === 'tabular-nums',\n };\n\n const style = this.color && isCustomColor(this.color)\n ? { color: this.color as string }\n : undefined;\n\n const extraProps: Record<string, string> = {};\n if (this.as === 'label' && this.for) extraProps['for'] = this.for;\n if (this.textId) extraProps['id'] = this.textId;\n\n return (\n <Host style={{ display: 'contents' }}>\n <Tag class={cls} style={style} {...extraProps}>\n <slot />\n </Tag>\n </Host>\n );\n }\n}\n"],"mappings":"2DAGM,SAAUA,EAAiBC,GAC/B,MAAO,YAAYA,EAAQC,QAAQ,SAAU,KAC/C,CCLA,MAAMC,EAAU,IAAM,85K,MCkBTC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAMUC,KAAAR,QAAuB,mBAMvBQ,KAAAC,SAAoB,MAGpBD,KAAAE,OAAkB,MAElBF,KAAAG,eAAiC,OAEjCH,KAAAI,YAA+B,SAC/BJ,KAAAK,GAAkB,GA+D3B,CAzDC,MAAAC,GAIE,MAAMC,EAAMP,KAAKK,GACjB,MAAMG,EAAiBC,UAAwBA,IAAM,UAAYA,EAAEC,WAAW,UAE9E,MAAMC,EAA+B,CACnC,UAAW,KACX,CAACpB,EAAiBS,KAAKR,UAAW,KAClC,oBAAqBQ,KAAKC,SAC1B,oBAAqBD,KAAKC,SAC1B,kBAAmBD,KAAKY,OAAS,SACjC,mBAAoBZ,KAAKY,OAAS,UAClC,kBAAmBZ,KAAKY,OAAS,SACjC,sBAAuBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAClE,sBAAuBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAClE,sBAAuBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAClE,sBAAuBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAClE,sBAAuBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAClE,yBAA4BZ,KAAKa,QAAU,UAC3C,2BAA4Bb,KAAKa,QAAU,YAC3C,0BAA4Bb,KAAKa,QAAU,WAC3C,uBAA4Bb,KAAKa,QAAU,QAC3C,0BAA4Bb,KAAKa,QAAU,WAC3C,0BAA4Bb,KAAKa,QAAU,WAC3C,yBAA4Bb,KAAKa,QAAU,UAC3C,yBAA4Bb,KAAKa,QAAU,UAC3C,oBAA4Bb,KAAKa,QAAU,KAC3C,2BAA4Bb,KAAKa,QAAU,YAC3C,yBAA4Bb,KAAKa,QAAU,UAC3C,yBAA4Bb,KAAKa,QAAU,UAC3C,gCAAwCb,KAAKc,aAAe,YAC5D,uCAAwCd,KAAKc,aAAe,mBAC5D,kBAAmBd,KAAKE,OACxB,sBAAyBF,KAAKe,QAAU,OACxC,wBAAyBf,KAAKe,QAAU,SACxC,uBAAyBf,KAAKe,QAAU,QACxC,qCAAsCf,KAAKI,cAAgB,gBAG7D,MAAMY,EAAQhB,KAAKa,OAASL,EAAcR,KAAKa,OAC3C,CAAEA,MAAOb,KAAKa,OACdI,UAEJ,MAAMC,EAAqC,GAC3C,GAAIlB,KAAKK,KAAO,SAAWL,KAAKmB,IAAKD,EAAW,OAASlB,KAAKmB,IAC9D,GAAInB,KAAKoB,OAAQF,EAAW,MAAQlB,KAAKoB,OAEzC,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACP,MAAO,CAAEQ,QAAS,aACtBH,EAACd,EAAG,CAAAgB,IAAA,2CAACE,MAAOd,EAAKK,MAAOA,KAAWE,GACjCG,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- const i="--dimension-iconography-md";const n="--dimension-menu-width-xs";const o="--dimension-radius-025";const t="--dimension-size-200";const e="--dimension-size-300";const a="--dimension-size-400";const s="--dimension-space-050";const c="--effect-animation-delay-instant";const m="--effect-animation-delay-long-2";const d="--effect-animation-delay-medium-3";const l="--effect-animation-duration-medium-1";const r="--effect-animation-duration-short-3";const h="--effect-motion-short-2";const u="--effect-motion-short-3";const f="--typography-lineheight-md";const y="--typography-lineheight-xl";const g={space050:s,radius025:o,size200:t,size300:e,size400:a,iconographyMd:i,menuWidthXs:n,lineheightMd:f,lineheightXl:y,motionShort2:h,motionShort3:u,animationDurationShort3:r,animationDurationMedium1:l,animationDelayInstant:c,animationDelayMedium3:d,animationDelayLong2:m,menuFallbackHeight:"calc(var(--dimension-size-base) * 20)",tooltipFallbackWidth:"calc(var(--dimension-size-800) + var(--dimension-size-200))",donutFillMin:"calc(var(--dimension-size-base) * 16)",donutFillMax:"calc(var(--dimension-size-base) * 24)"};const p={space050:`var(${s})`};export{g as T,p as a};
2
- //# sourceMappingURL=p-B_g8X0eh.js.map