@breadstone/mosaik-elements-foundation 0.0.217 → 0.0.218

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 (140) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/Controls/Components/Inputs/CheckBox/CheckBoxElement.d.ts +0 -1
  3. package/Controls/Components/Inputs/CheckBox/CheckBoxElement.d.ts.map +1 -1
  4. package/Controls/Components/Inputs/CheckBox/CheckBoxElement.js +0 -1
  5. package/Controls/Components/Inputs/CheckBox/CheckBoxElement.js.map +1 -1
  6. package/Controls/Components/Inputs/Radio/RadioElement.d.ts +0 -1
  7. package/Controls/Components/Inputs/Radio/RadioElement.d.ts.map +1 -1
  8. package/Controls/Components/Inputs/Radio/RadioElement.js +0 -1
  9. package/Controls/Components/Inputs/Radio/RadioElement.js.map +1 -1
  10. package/Controls/Components/Inputs/Select/SelectItemElement.d.ts +1 -0
  11. package/Controls/Components/Inputs/Select/SelectItemElement.d.ts.map +1 -1
  12. package/Controls/Components/Inputs/Select/SelectItemElement.js +7 -1
  13. package/Controls/Components/Inputs/Select/SelectItemElement.js.map +1 -1
  14. package/Controls/Components/Media/Badge/BadgeElement.d.ts +4 -36
  15. package/Controls/Components/Media/Badge/BadgeElement.d.ts.map +1 -1
  16. package/Controls/Components/Media/Badge/BadgeElement.js +18 -46
  17. package/Controls/Components/Media/Badge/BadgeElement.js.map +1 -1
  18. package/Controls/Components/Media/Badge/BadgeElementTemplate.d.ts.map +1 -1
  19. package/Controls/Components/Media/Badge/BadgeElementTemplate.js +10 -16
  20. package/Controls/Components/Media/Badge/BadgeElementTemplate.js.map +1 -1
  21. package/Controls/Components/Media/Badge/IBadgeElementProps.d.ts +10 -1
  22. package/Controls/Components/Media/Badge/IBadgeElementProps.d.ts.map +1 -1
  23. package/Controls/Components/Media/Badge/Themes/BadgeElement.Cosmopolitan.d.ts.map +1 -1
  24. package/Controls/Components/Media/Badge/Themes/BadgeElement.Cosmopolitan.js +101 -34
  25. package/Controls/Components/Media/Badge/Themes/BadgeElement.Cosmopolitan.js.map +1 -1
  26. package/Controls/Components/Media/Badge/Themes/BadgeElement.Joy.d.ts.map +1 -1
  27. package/Controls/Components/Media/Badge/Themes/BadgeElement.Joy.js +308 -115
  28. package/Controls/Components/Media/Badge/Themes/BadgeElement.Joy.js.map +1 -1
  29. package/Controls/Components/Media/Badge/Themes/BadgeElement.Memphis.d.ts.map +1 -1
  30. package/Controls/Components/Media/Badge/Themes/BadgeElement.Memphis.js +290 -60
  31. package/Controls/Components/Media/Badge/Themes/BadgeElement.Memphis.js.map +1 -1
  32. package/Controls/Components/Media/Icon/IconElementTemplate.d.ts.map +1 -1
  33. package/Controls/Components/Media/Icon/IconElementTemplate.js +1 -3
  34. package/Controls/Components/Media/Icon/IconElementTemplate.js.map +1 -1
  35. package/Controls/Components/Primitives/Summary/SummaryElement.d.ts +2 -1
  36. package/Controls/Components/Primitives/Summary/SummaryElement.d.ts.map +1 -1
  37. package/Controls/Components/Primitives/Summary/SummaryElement.js +2 -1
  38. package/Controls/Components/Primitives/Summary/SummaryElement.js.map +1 -1
  39. package/Controls/Components/Primitives/Summary/SummaryElementTemplate.d.ts.map +1 -1
  40. package/Controls/Components/Primitives/Summary/SummaryElementTemplate.js +6 -9
  41. package/Controls/Components/Primitives/Summary/SummaryElementTemplate.js.map +1 -1
  42. package/Controls/Components/Primitives/Summary/Themes/SummaryElement.Cosmopolitan.d.ts.map +1 -1
  43. package/Controls/Components/Primitives/Summary/Themes/SummaryElement.Cosmopolitan.js +12 -1
  44. package/Controls/Components/Primitives/Summary/Themes/SummaryElement.Cosmopolitan.js.map +1 -1
  45. package/Controls/Components/Primitives/Summary/Themes/SummaryElement.Joy.d.ts.map +1 -1
  46. package/Controls/Components/Primitives/Summary/Themes/SummaryElement.Joy.js +12 -1
  47. package/Controls/Components/Primitives/Summary/Themes/SummaryElement.Joy.js.map +1 -1
  48. package/Controls/Components/Primitives/Summary/Themes/SummaryElement.Memphis.d.ts.map +1 -1
  49. package/Controls/Components/Primitives/Summary/Themes/SummaryElement.Memphis.js +12 -1
  50. package/Controls/Components/Primitives/Summary/Themes/SummaryElement.Memphis.js.map +1 -1
  51. package/Controls/Components/Primitives/Text/TextElement.d.ts.map +1 -1
  52. package/Controls/Components/Primitives/Text/TextElement.js +10 -1
  53. package/Controls/Components/Primitives/Text/TextElement.js.map +1 -1
  54. package/Controls/Components/Primitives/Text/Themes/TextElement.Joy.js +5 -5
  55. package/Controls/Components/Ranges/MeterBar/IMeterBarElementProps.d.ts +2 -0
  56. package/Controls/Components/Ranges/MeterBar/IMeterBarElementProps.d.ts.map +1 -1
  57. package/Controls/Components/Ranges/MeterBar/MeterBarElement.d.ts +43 -0
  58. package/Controls/Components/Ranges/MeterBar/MeterBarElement.d.ts.map +1 -1
  59. package/Controls/Components/Ranges/MeterBar/MeterBarElement.js +81 -3
  60. package/Controls/Components/Ranges/MeterBar/MeterBarElement.js.map +1 -1
  61. package/Controls/Components/Ranges/MeterBar/MeterBarElementTemplate.d.ts.map +1 -1
  62. package/Controls/Components/Ranges/MeterBar/MeterBarElementTemplate.js +19 -5
  63. package/Controls/Components/Ranges/MeterBar/MeterBarElementTemplate.js.map +1 -1
  64. package/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.Cosmopolitan.d.ts.map +1 -1
  65. package/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.Cosmopolitan.js +50 -0
  66. package/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.Cosmopolitan.js.map +1 -1
  67. package/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.Joy.d.ts.map +1 -1
  68. package/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.Joy.js +55 -1
  69. package/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.Joy.js.map +1 -1
  70. package/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.Memphis.d.ts.map +1 -1
  71. package/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.Memphis.js +50 -0
  72. package/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.Memphis.js.map +1 -1
  73. package/Controls/Components/Ranges/MeterRing/IMeterRingElementProps.d.ts +2 -0
  74. package/Controls/Components/Ranges/MeterRing/IMeterRingElementProps.d.ts.map +1 -1
  75. package/Controls/Components/Ranges/MeterRing/MeterRingElement.d.ts +119 -6
  76. package/Controls/Components/Ranges/MeterRing/MeterRingElement.d.ts.map +1 -1
  77. package/Controls/Components/Ranges/MeterRing/MeterRingElement.js +174 -19
  78. package/Controls/Components/Ranges/MeterRing/MeterRingElement.js.map +1 -1
  79. package/Controls/Components/Ranges/MeterRing/MeterRingElementTemplate.d.ts.map +1 -1
  80. package/Controls/Components/Ranges/MeterRing/MeterRingElementTemplate.js +31 -16
  81. package/Controls/Components/Ranges/MeterRing/MeterRingElementTemplate.js.map +1 -1
  82. package/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Cosmopolitan.d.ts.map +1 -1
  83. package/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Cosmopolitan.js +87 -3
  84. package/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Cosmopolitan.js.map +1 -1
  85. package/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Joy.d.ts.map +1 -1
  86. package/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Joy.js +82 -22
  87. package/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Joy.js.map +1 -1
  88. package/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Memphis.d.ts.map +1 -1
  89. package/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Memphis.js +102 -18
  90. package/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Memphis.js.map +1 -1
  91. package/Controls/Components/Ranges/ProgressBar/Themes/ProgressBarElement.Cosmopolitan.d.ts.map +1 -1
  92. package/Controls/Components/Ranges/ProgressBar/Themes/ProgressBarElement.Cosmopolitan.js +44 -20
  93. package/Controls/Components/Ranges/ProgressBar/Themes/ProgressBarElement.Cosmopolitan.js.map +1 -1
  94. package/Controls/Components/Ranges/ProgressBar/Themes/ProgressBarElement.Joy.d.ts.map +1 -1
  95. package/Controls/Components/Ranges/ProgressBar/Themes/ProgressBarElement.Joy.js +33 -31
  96. package/Controls/Components/Ranges/ProgressBar/Themes/ProgressBarElement.Joy.js.map +1 -1
  97. package/Controls/Components/Ranges/ProgressBar/Themes/ProgressBarElement.Memphis.d.ts.map +1 -1
  98. package/Controls/Components/Ranges/ProgressBar/Themes/ProgressBarElement.Memphis.js +68 -20
  99. package/Controls/Components/Ranges/ProgressBar/Themes/ProgressBarElement.Memphis.js.map +1 -1
  100. package/Controls/Components/Ranges/ProgressRing/ProgressRingElement.d.ts +1 -2
  101. package/Controls/Components/Ranges/ProgressRing/ProgressRingElement.d.ts.map +1 -1
  102. package/Controls/Components/Ranges/ProgressRing/ProgressRingElement.js +1 -2
  103. package/Controls/Components/Ranges/ProgressRing/ProgressRingElement.js.map +1 -1
  104. package/Controls/Components/Ranges/ProgressRing/ProgressRingElementTemplate.d.ts.map +1 -1
  105. package/Controls/Components/Ranges/ProgressRing/ProgressRingElementTemplate.js +4 -5
  106. package/Controls/Components/Ranges/ProgressRing/ProgressRingElementTemplate.js.map +1 -1
  107. package/Controls/Components/Ranges/ProgressRing/Themes/ProgressRingElement.Cosmopolitan.d.ts.map +1 -1
  108. package/Controls/Components/Ranges/ProgressRing/Themes/ProgressRingElement.Cosmopolitan.js +31 -21
  109. package/Controls/Components/Ranges/ProgressRing/Themes/ProgressRingElement.Cosmopolitan.js.map +1 -1
  110. package/Controls/Components/Ranges/ProgressRing/Themes/ProgressRingElement.Joy.d.ts.map +1 -1
  111. package/Controls/Components/Ranges/ProgressRing/Themes/ProgressRingElement.Joy.js +51 -41
  112. package/Controls/Components/Ranges/ProgressRing/Themes/ProgressRingElement.Joy.js.map +1 -1
  113. package/Controls/Components/Ranges/ProgressRing/Themes/ProgressRingElement.Memphis.d.ts.map +1 -1
  114. package/Controls/Components/Ranges/ProgressRing/Themes/ProgressRingElement.Memphis.js +31 -21
  115. package/Controls/Components/Ranges/ProgressRing/Themes/ProgressRingElement.Memphis.js.map +1 -1
  116. package/Controls/Components/Selectors/Combo/ComboElement.d.ts +9 -0
  117. package/Controls/Components/Selectors/Combo/ComboElement.d.ts.map +1 -1
  118. package/Controls/Components/Selectors/Combo/ComboElement.js +84 -14
  119. package/Controls/Components/Selectors/Combo/ComboElement.js.map +1 -1
  120. package/Controls/Components/Selectors/Combo/ComboItemElement.d.ts +1 -0
  121. package/Controls/Components/Selectors/Combo/ComboItemElement.d.ts.map +1 -1
  122. package/Controls/Components/Selectors/Combo/ComboItemElement.js +7 -1
  123. package/Controls/Components/Selectors/Combo/ComboItemElement.js.map +1 -1
  124. package/Controls/Components/Selectors/Combo/ComboItemElementTemplate.d.ts.map +1 -1
  125. package/Controls/Components/Selectors/Combo/ComboItemElementTemplate.js +2 -1
  126. package/Controls/Components/Selectors/Combo/ComboItemElementTemplate.js.map +1 -1
  127. package/Controls/Types/MeterScale.d.ts +25 -0
  128. package/Controls/Types/MeterScale.d.ts.map +1 -0
  129. package/Controls/Types/MeterScale.js +22 -0
  130. package/Controls/Types/MeterScale.js.map +1 -0
  131. package/Index.d.ts +1 -0
  132. package/Index.d.ts.map +1 -1
  133. package/Index.js +1 -0
  134. package/Index.js.map +1 -1
  135. package/custom-elements.json +253 -23
  136. package/package.json +3 -3
  137. package/Controls/Components/Layouts/TileManager/ITileStateChangeEventArgs.d.ts +0 -1
  138. package/Controls/Components/Layouts/TileManager/ITileStateChangeEventArgs.d.ts.map +0 -1
  139. package/Controls/Components/Layouts/TileManager/ITileStateChangeEventArgs.js +0 -11
  140. package/Controls/Components/Layouts/TileManager/ITileStateChangeEventArgs.js.map +0 -1
@@ -15,23 +15,23 @@ export function badgeElementJoyStyle() {
15
15
  :host {
16
16
  --badge-background-color: var(--joy-scheme-background);
17
17
  --badge-border-color: var(--joy-scheme-highlight);
18
- --badge-border-radius: 50%;
18
+ --badge-border-radius: var(--joy-layout-radius);
19
19
  --badge-border-style: solid;
20
- --badge-border-width: 0px;
20
+ --badge-border-width: var(--joy-layout-thickness);
21
21
  --badge-font-family: var(--joy-font-family);
22
- --badge-font-letter-spacing: 0px;
23
- --badge-font-line-height: calc(var(--badge-font-size) + 4px);
24
- --badge-font-size: 32px;
25
- --badge-font-text-decoration: unset;
26
- --badge-font-text-transform: unset;
27
- --badge-font-weight: 600;
22
+ --badge-font-letter-spacing: var(--joy-typography-body2-letter-spacing);
23
+ --badge-font-line-height: var(--joy-typography-body2-line-height);
24
+ --badge-font-size: var(--joy-typography-body2-font-size);
25
+ --badge-font-text-decoration: var(--joy-typography-body2-text-decoration);
26
+ --badge-font-text-transform: var(--joy-typography-body2-text-transform);
27
+ --badge-font-weight: var(--joy-typography-body2-font-weight);
28
28
  --badge-foreground-color: var(--joy-scheme-foreground);
29
- --badge-gap: 8px;
30
- --badge-padding-bottom: 4px;
31
- --badge-padding-left: 8px;
32
- --badge-padding-right: 8px;
33
- --badge-padding-top: 4px;
34
- --badge-size: unset;
29
+ --badge-gap: calc(var(--joy-layout-space) / 2);
30
+ --badge-height: auto;
31
+ --badge-padding-bottom: calc(var(--joy-layout-space) / 2);
32
+ --badge-padding-left: var(--joy-layout-space);
33
+ --badge-padding-right: var(--joy-layout-space);
34
+ --badge-padding-top: calc(var(--joy-layout-space) / 2);
35
35
  --badge-transition-duration: var(--joy-duration-short);
36
36
  --badge-transition-mode: ease;
37
37
  --badge-transition-property: background-color, color, border-color, opacity, box-shadow;
@@ -65,49 +65,57 @@ export function badgeElementJoyStyle() {
65
65
  }
66
66
 
67
67
  :host {
68
- border-radius: 50%;
69
- display: block;
70
- position: absolute;
71
- }
72
-
73
- :host [part="root"] {
74
- flex-direction: row;
75
- place-content: center flex-start;
76
- align-items: center;
77
- max-width: 100%;
78
- display: flex;
79
- }
80
-
81
- :host [part="root"] [part="container"] {
68
+ font-family: var(--badge-font-family);
69
+ font-size: var(--badge-font-size);
70
+ line-height: var(--badge-font-line-height);
71
+ font-weight: var(--badge-font-weight);
72
+ letter-spacing: var(--badge-font-letter-spacing);
73
+ -webkit-text-decoration: var(--badge-font-text-decoration);
74
+ text-decoration: var(--badge-font-text-decoration);
75
+ text-transform: var(--badge-font-text-transform);
82
76
  transition-duration: var(--badge-transition-duration);
83
77
  transition-timing-function: var(--badge-transition-mode);
84
78
  transition-property: var(--badge-transition-property);
79
+ padding-top: var(--badge-padding-top);
80
+ padding-right: var(--badge-padding-right);
81
+ padding-bottom: var(--badge-padding-bottom);
82
+ padding-left: var(--badge-padding-left);
83
+ gap: var(--badge-gap);
85
84
  background-color: var(--badge-background-color);
86
85
  color: var(--badge-foreground-color);
87
- width: var(--badge-size);
88
- height: var(--badge-size);
89
- border-radius: 50%;
90
- position: relative;
91
- }
92
-
93
- :host [part="root"] [part="container"] [part="label"], :host [part="root"] [part="container"] [part="icon"] {
94
- color: var(--badge-foreground-color);
95
- white-space: nowrap;
96
- text-overflow: ellipsis;
97
- pointer-events: none;
98
- width: var(--badge-size);
99
- height: var(--badge-size);
100
- font-size: 12px;
101
- line-height: var(--badge-size);
102
- text-align: center;
103
- display: block;
86
+ border-color: var(--badge-border-color);
87
+ border-width: var(--badge-border-width);
88
+ border-radius: var(--badge-border-radius);
89
+ border-style: var(--badge-border-style);
90
+ height: var(--badge-height);
91
+ align-items: center;
92
+ display: inline-flex;
104
93
  position: absolute;
105
- top: 50%;
106
94
  overflow: hidden;
107
- transform: translateY(-50%);
95
+ }
96
+
97
+ :host [part="icon"] {
98
+ color: inherit;
99
+ flex-shrink: 0;
100
+ }
101
+
102
+ :host [part="label"] {
103
+ color: inherit;
104
+ font-family: inherit;
105
+ font-size: inherit;
106
+ line-height: inherit;
107
+ font-weight: inherit;
108
+ letter-spacing: inherit;
109
+ text-decoration: inherit;
110
+ text-transform: inherit;
111
+ }
112
+
113
+ :host([appearance="solid"]) [part="focusRing"] {
114
+ --focus-ring-outward-offset: 0px;
108
115
  }
109
116
 
110
117
  :host {
118
+ --_size: unset;
111
119
  --_tiny: 8px;
112
120
  --_small: 16px;
113
121
  --_medium: 22px;
@@ -116,82 +124,299 @@ export function badgeElementJoyStyle() {
116
124
  }
117
125
 
118
126
  :host([disabled]:not([disabled="false"])) {
119
- background-color: var(--joy-scheme-disabled);
120
- border-color: var(--joy-scheme-disabled);
121
- color: var(--joy-scheme-lowlight);
127
+ --badge-background-color: var(--joy-scheme-background);
128
+ --badge-border-color: var(--joy-scheme-highlight);
129
+ --badge-foreground-color: var(--joy-scheme-disabled);
130
+ }
131
+
132
+ :host([appearance="solid"]) {
133
+ --badge-background-color: var(--joy-scheme-highlight);
134
+ }
135
+
136
+ :host([appearance="outline"]:not([disabled]:not([disabled="false"]))) {
137
+ --badge-foreground-color: var(--joy-color-neutral-500);
138
+ --badge-border-color: var(--joy-color-neutral-500);
139
+ --badge-border-width: var(--joy-layout-thickness);
140
+ --badge-border-style: solid;
141
+ }
142
+
143
+ :host([appearance="outline"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
144
+ --badge-foreground-color: var(--joy-color-primary-500);
145
+ --badge-border-color: var(--joy-color-primary-500);
146
+ }
147
+
148
+ :host([appearance="outline"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
149
+ --badge-foreground-color: var(--joy-color-secondary-500);
150
+ --badge-border-color: var(--joy-color-secondary-500);
151
+ }
152
+
153
+ :host([appearance="outline"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
154
+ --badge-foreground-color: var(--joy-color-tertiary-500);
155
+ --badge-border-color: var(--joy-color-tertiary-500);
156
+ }
157
+
158
+ :host([appearance="outline"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
159
+ --badge-foreground-color: var(--joy-color-danger-500);
160
+ --badge-border-color: var(--joy-color-danger-500);
161
+ }
162
+
163
+ :host([appearance="outline"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
164
+ --badge-foreground-color: var(--joy-color-warning-500);
165
+ --badge-border-color: var(--joy-color-warning-500);
166
+ }
167
+
168
+ :host([appearance="outline"][variant="success"]:not([disabled]:not([disabled="false"]))) {
169
+ --badge-foreground-color: var(--joy-color-success-500);
170
+ --badge-border-color: var(--joy-color-success-500);
171
+ }
172
+
173
+ :host([appearance="outline"][variant="info"]:not([disabled]:not([disabled="false"]))) {
174
+ --badge-foreground-color: var(--joy-color-info-500);
175
+ --badge-border-color: var(--joy-color-info-500);
176
+ }
177
+
178
+ :host([appearance="outline"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
179
+ --badge-foreground-color: var(--joy-color-highlight-500);
180
+ --badge-border-color: var(--joy-color-highlight-500);
181
+ }
182
+
183
+ :host([appearance="outline"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
184
+ --badge-foreground-color: var(--joy-color-neutral-500);
185
+ --badge-border-color: var(--joy-color-neutral-500);
186
+ }
187
+
188
+ :host([appearance="plain"]) {
189
+ --badge-border-width: 0px;
190
+ }
191
+
192
+ :host([appearance="plain"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
193
+ --badge-foreground-color: var(--joy-color-primary-500);
194
+ --badge-border-color: var(--joy-color-primary-500);
195
+ }
196
+
197
+ :host([appearance="plain"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
198
+ --badge-foreground-color: var(--joy-color-secondary-500);
199
+ --badge-border-color: var(--joy-color-secondary-500);
200
+ }
201
+
202
+ :host([appearance="plain"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
203
+ --badge-foreground-color: var(--joy-color-tertiary-500);
204
+ --badge-border-color: var(--joy-color-tertiary-500);
205
+ }
206
+
207
+ :host([appearance="plain"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
208
+ --badge-foreground-color: var(--joy-color-danger-500);
209
+ --badge-border-color: var(--joy-color-danger-500);
210
+ }
211
+
212
+ :host([appearance="plain"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
213
+ --badge-foreground-color: var(--joy-color-warning-500);
214
+ --badge-border-color: var(--joy-color-warning-500);
215
+ }
216
+
217
+ :host([appearance="plain"][variant="success"]:not([disabled]:not([disabled="false"]))) {
218
+ --badge-foreground-color: var(--joy-color-success-500);
219
+ --badge-border-color: var(--joy-color-success-500);
220
+ }
221
+
222
+ :host([appearance="plain"][variant="info"]:not([disabled]:not([disabled="false"]))) {
223
+ --badge-foreground-color: var(--joy-color-info-500);
224
+ --badge-border-color: var(--joy-color-info-500);
225
+ }
226
+
227
+ :host([appearance="plain"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
228
+ --badge-foreground-color: var(--joy-color-highlight-500);
229
+ --badge-border-color: var(--joy-color-highlight-500);
230
+ }
231
+
232
+ :host([appearance="plain"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
233
+ --badge-foreground-color: var(--joy-color-neutral-500);
234
+ --badge-border-color: var(--joy-color-neutral-500);
235
+ }
236
+
237
+ :host([appearance="plain"]:not([disabled]:not([disabled="false"]))) {
238
+ --badge-foreground-color: var(--joy-color-neutral-500);
239
+ }
240
+
241
+ :host([appearance="soft"]) {
242
+ --badge-border-width: 0px;
243
+ }
244
+
245
+ :host([appearance="soft"]:not([disabled]:not([disabled="false"]))) {
246
+ --badge-foreground-color: var(--joy-color-neutral-500);
247
+ --badge-background-color: var(--joy-color-neutral-100);
248
+ }
249
+
250
+ :host([appearance="soft"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
251
+ --badge-foreground-color: var(--joy-color-primary-500);
252
+ --badge-background-color: var(--joy-color-primary-100);
253
+ }
254
+
255
+ :host([appearance="soft"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
256
+ --badge-foreground-color: var(--joy-color-secondary-500);
257
+ --badge-background-color: var(--joy-color-secondary-100);
258
+ }
259
+
260
+ :host([appearance="soft"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
261
+ --badge-foreground-color: var(--joy-color-tertiary-500);
262
+ --badge-background-color: var(--joy-color-tertiary-100);
263
+ }
264
+
265
+ :host([appearance="soft"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
266
+ --badge-foreground-color: var(--joy-color-danger-500);
267
+ --badge-background-color: var(--joy-color-danger-100);
268
+ }
269
+
270
+ :host([appearance="soft"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
271
+ --badge-foreground-color: var(--joy-color-warning-500);
272
+ --badge-background-color: var(--joy-color-warning-100);
273
+ }
274
+
275
+ :host([appearance="soft"][variant="success"]:not([disabled]:not([disabled="false"]))) {
276
+ --badge-foreground-color: var(--joy-color-success-500);
277
+ --badge-background-color: var(--joy-color-success-100);
278
+ }
279
+
280
+ :host([appearance="soft"][variant="info"]:not([disabled]:not([disabled="false"]))) {
281
+ --badge-foreground-color: var(--joy-color-info-500);
282
+ --badge-background-color: var(--joy-color-info-100);
283
+ }
284
+
285
+ :host([appearance="soft"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
286
+ --badge-foreground-color: var(--joy-color-highlight-500);
287
+ --badge-background-color: var(--joy-color-highlight-100);
288
+ }
289
+
290
+ :host([appearance="soft"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
291
+ --badge-foreground-color: var(--joy-color-neutral-500);
292
+ --badge-background-color: var(--joy-color-neutral-100);
293
+ }
294
+
295
+ :host([appearance="solid"][variant="primary"]:not([disabled]:not([disabled="false"]))) {
296
+ --badge-background-color: var(--joy-color-primary-500);
297
+ --badge-foreground-color: var(--joy-color-primary-0);
298
+ --badge-border-color: var(--joy-color-primary-500);
299
+ }
300
+
301
+ :host([appearance="solid"][variant="secondary"]:not([disabled]:not([disabled="false"]))) {
302
+ --badge-background-color: var(--joy-color-secondary-500);
303
+ --badge-foreground-color: var(--joy-color-secondary-0);
304
+ --badge-border-color: var(--joy-color-secondary-500);
305
+ }
306
+
307
+ :host([appearance="solid"][variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
308
+ --badge-background-color: var(--joy-color-tertiary-500);
309
+ --badge-foreground-color: var(--joy-color-tertiary-0);
310
+ --badge-border-color: var(--joy-color-tertiary-500);
311
+ }
312
+
313
+ :host([appearance="solid"][variant="danger"]:not([disabled]:not([disabled="false"]))) {
314
+ --badge-background-color: var(--joy-color-danger-500);
315
+ --badge-foreground-color: var(--joy-color-danger-0);
316
+ --badge-border-color: var(--joy-color-danger-500);
317
+ }
318
+
319
+ :host([appearance="solid"][variant="warning"]:not([disabled]:not([disabled="false"]))) {
320
+ --badge-background-color: var(--joy-color-warning-500);
321
+ --badge-foreground-color: var(--joy-color-warning-0);
322
+ --badge-border-color: var(--joy-color-warning-500);
323
+ }
324
+
325
+ :host([appearance="solid"][variant="success"]:not([disabled]:not([disabled="false"]))) {
326
+ --badge-background-color: var(--joy-color-success-500);
327
+ --badge-foreground-color: var(--joy-color-success-0);
328
+ --badge-border-color: var(--joy-color-success-500);
329
+ }
330
+
331
+ :host([appearance="solid"][variant="info"]:not([disabled]:not([disabled="false"]))) {
332
+ --badge-background-color: var(--joy-color-info-500);
333
+ --badge-foreground-color: var(--joy-color-info-0);
334
+ --badge-border-color: var(--joy-color-info-500);
335
+ }
336
+
337
+ :host([appearance="solid"][variant="highlight"]:not([disabled]:not([disabled="false"]))) {
338
+ --badge-background-color: var(--joy-color-highlight-500);
339
+ --badge-foreground-color: var(--joy-color-highlight-0);
340
+ --badge-border-color: var(--joy-color-highlight-500);
341
+ }
342
+
343
+ :host([appearance="solid"][variant="neutral"]:not([disabled]:not([disabled="false"]))) {
344
+ --badge-background-color: var(--joy-color-neutral-500);
345
+ --badge-foreground-color: var(--joy-color-neutral-0);
346
+ --badge-border-color: var(--joy-color-neutral-500);
122
347
  }
123
348
 
124
349
  :host([size="tiny"]) {
125
- --badge-size: var(--_tiny);
350
+ --_size: var(--_tiny);
126
351
  }
127
352
 
128
- :host([size="tiny"]) [part="container"] [part="label"] {
353
+ :host([size="tiny"]) [part="label"] {
129
354
  height: 8px;
130
355
  font-size: 0;
131
356
  line-height: 0;
132
357
  }
133
358
 
134
359
  :host([size="small"]) {
135
- --badge-size: var(--_small);
360
+ --_size: var(--_small);
136
361
  }
137
362
 
138
- :host([size="small"]) [part="container"] [part="label"] {
363
+ :host([size="small"]) [part="label"] {
139
364
  height: 10px;
140
365
  font-size: 8px;
141
366
  line-height: 10px;
142
367
  }
143
368
 
144
369
  :host([size="medium"]) {
145
- --badge-size: var(--_medium);
370
+ --_size: var(--_medium);
146
371
  }
147
372
 
148
- :host([size="medium"]) [part="container"] [part="label"] {
373
+ :host([size="medium"]) [part="label"] {
149
374
  height: 16px;
150
375
  font-size: 14px;
151
376
  line-height: 16px;
152
377
  }
153
378
 
154
379
  :host([size="large"]) {
155
- --badge-size: var(--_large);
380
+ --_size: var(--_large);
156
381
  }
157
382
 
158
- :host([size="large"]) [part="container"] [part="label"] {
383
+ :host([size="large"]) [part="label"] {
159
384
  height: 20px;
160
385
  font-size: 20px;
161
386
  line-height: 22px;
162
387
  }
163
388
 
164
389
  :host([size="giant"]) {
165
- --badge-size: var(--_giant);
390
+ --_size: var(--_giant);
166
391
  }
167
392
 
168
- :host([size="giant"]) [part="container"] [part="label"] {
393
+ :host([size="giant"]) [part="label"] {
169
394
  height: 24px;
170
395
  font-size: 24px;
171
396
  line-height: 24px;
172
397
  }
173
398
 
174
- :host([position="bottom-left"]:not([standalone])) {
175
- bottom: calc(var(--badge-size) / 2 * -1);
176
- left: calc(var(--badge-size) / 2 * -1);
399
+ :host([position="bottom-left"]) {
400
+ bottom: calc(var(--_size) / 2 * -1);
401
+ left: calc(var(--_size) / 2 * -1);
177
402
  }
178
403
 
179
- :host([position="bottom-right"]:not([standalone])) {
180
- top: calc(var(--badge-size) / 2 * -1);
181
- right: calc(var(--badge-size) / 2 * -1);
404
+ :host([position="bottom-right"]) {
405
+ top: calc(var(--_size) / 2 * -1);
406
+ right: calc(var(--_size) / 2 * -1);
182
407
  }
183
408
 
184
- :host([position="top-left"]:not([standalone])) {
185
- top: calc(var(--badge-size) / 2 * -1);
186
- left: calc(var(--badge-size) / 2 * -1);
409
+ :host([position="top-left"]) {
410
+ top: calc(var(--_size) / 2 * -1);
411
+ left: calc(var(--_size) / 2 * -1);
187
412
  }
188
413
 
189
- :host([position="top-right"]:not([standalone])) {
190
- top: calc(var(--badge-size) / 2 * -1);
191
- right: calc(var(--badge-size) / 2 * -1);
414
+ :host([position="top-right"]) {
415
+ top: calc(var(--_size) / 2 * -1);
416
+ right: calc(var(--_size) / 2 * -1);
192
417
  }
193
418
 
194
- :host([standalone]) {
419
+ :host(:not([attached])) {
195
420
  top: unset;
196
421
  left: unset;
197
422
  bottom: unset;
@@ -201,60 +426,28 @@ export function badgeElementJoyStyle() {
201
426
  position: relative;
202
427
  }
203
428
 
204
- :host([standalone]) [part="container"] {
205
- width: var(--badge-size);
206
- min-width: var(--badge-size);
207
- height: var(--badge-size);
208
- min-height: var(--badge-size);
209
- }
210
-
211
429
  :host([overlap]) {
212
430
  inset: 0;
213
431
  }
214
432
 
215
- :host([variant="primary"]:not([disabled]:not([disabled="false"]))) {
216
- --badge-background-color: var(--joy-color-primary-500);
217
- --badge-foreground-color: var(--joy-color-primary-0);
218
- }
219
-
220
- :host([variant="secondary"]:not([disabled]:not([disabled="false"]))) {
221
- --badge-background-color: var(--joy-color-secondary-500);
222
- --badge-foreground-color: var(--joy-color-secondary-0);
223
- }
224
-
225
- :host([variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
226
- --badge-background-color: var(--joy-color-tertiary-500);
227
- --badge-foreground-color: var(--joy-color-tertiary-0);
228
- }
229
-
230
- :host([variant="danger"]:not([disabled]:not([disabled="false"]))) {
231
- --badge-background-color: var(--joy-color-danger-500);
232
- --badge-foreground-color: var(--joy-color-danger-0);
233
- }
234
-
235
- :host([variant="warning"]:not([disabled]:not([disabled="false"]))) {
236
- --badge-background-color: var(--joy-color-warning-500);
237
- --badge-foreground-color: var(--joy-color-warning-0);
433
+ :host([size="tiny"]) {
434
+ font-size: calc(var(--badge-font-size) - 4px);
238
435
  }
239
436
 
240
- :host([variant="success"]:not([disabled]:not([disabled="false"]))) {
241
- --badge-background-color: var(--joy-color-success-500);
242
- --badge-foreground-color: var(--joy-color-success-0);
437
+ :host([size="small"]) {
438
+ font-size: calc(var(--badge-font-size) - 2px);
243
439
  }
244
440
 
245
- :host([variant="info"]:not([disabled]:not([disabled="false"]))) {
246
- --badge-background-color: var(--joy-color-info-500);
247
- --badge-foreground-color: var(--joy-color-info-0);
441
+ :host([size="medium"]) {
442
+ font-size: var(--badge-font-size);
248
443
  }
249
444
 
250
- :host([variant="highlight"]:not([disabled]:not([disabled="false"]))) {
251
- --badge-background-color: var(--joy-color-highlight-500);
252
- --badge-foreground-color: var(--joy-color-highlight-0);
445
+ :host([size="large"]) {
446
+ font-size: calc(var(--badge-font-size) + 2px);
253
447
  }
254
448
 
255
- :host([variant="neutral"]:not([disabled]:not([disabled="false"]))) {
256
- --badge-background-color: var(--joy-color-neutral-500);
257
- --badge-foreground-color: var(--joy-color-neutral-0);
449
+ :host([size="giant"]) {
450
+ font-size: calc(var(--badge-font-size) + 4px);
258
451
  }
259
452
 
260
453
  `;
@@ -1 +1 @@
1
- {"version":3,"file":"BadgeElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Badge/Themes/BadgeElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,oBAAoB;IAChC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsPT,CAAC;AACN,CAAC"}
1
+ {"version":3,"file":"BadgeElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Badge/Themes/BadgeElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,oBAAoB;IAChC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAubT,CAAC;AACN,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"BadgeElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Badge/Themes/BadgeElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,SAAS,CAuGpD"}
1
+ {"version":3,"file":"BadgeElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Badge/Themes/BadgeElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,SAAS,CA6UpD"}