@life-cockpit/angular-ui-kit 1.11.11 → 2.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.
- package/fesm2022/life-cockpit-angular-ui-kit.mjs +468 -309
- package/fesm2022/life-cockpit-angular-ui-kit.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/_mixins.scss +117 -0
- package/src/styles/_theme-dark.scss +100 -18
- package/src/styles/_theme-light.scss +64 -4
- package/src/styles/tokens/_all.scss +16 -9
- package/src/styles/tokens/_border-radius.scss +5 -5
- package/src/styles/tokens/_colors.scss +7 -0
- package/src/styles/tokens/_elevation.scss +4 -4
- package/types/life-cockpit-angular-ui-kit.d.ts +66 -19
package/package.json
CHANGED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Design System 2.0 — Shared SCSS Mixins
|
|
3
|
+
// =============================================================================
|
|
4
|
+
//
|
|
5
|
+
// Reusable building blocks for the dark-first "pitch" aesthetic. These emit no
|
|
6
|
+
// CSS until @include'd, so importing the partial is free.
|
|
7
|
+
//
|
|
8
|
+
// Usage in a component stylesheet:
|
|
9
|
+
// @use '../../styles/mixins' as mix;
|
|
10
|
+
// .my-card { @include mix.card-surface; }
|
|
11
|
+
//
|
|
12
|
+
// All mixins read semantic CSS custom properties (defined in _theme-dark.scss /
|
|
13
|
+
// _theme-light.scss), so a single @include works correctly in both themes.
|
|
14
|
+
// =============================================================================
|
|
15
|
+
|
|
16
|
+
// Accessible focus ring. Replaces the duplicated
|
|
17
|
+
// `outline: 2px solid var(--color-primary-500)` scattered across components.
|
|
18
|
+
@mixin focus-ring($color: var(--color-primary-500), $offset: 2px, $width: 2px) {
|
|
19
|
+
&:focus-visible {
|
|
20
|
+
outline: $width solid $color;
|
|
21
|
+
outline-offset: $offset;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
// Map a 1–4 elevation level to its token shadow.
|
|
26
|
+
@mixin elevation($level: 1) {
|
|
27
|
+
box-shadow: var(--elevation-#{$level});
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// The signature DS2.0 surface: gradient fill, hairline border, rounded corners,
|
|
31
|
+
// soft elevation, and (optionally) a 3px teal accent line along the top edge.
|
|
32
|
+
// Requires `position` context for the ::after accent (the mixin sets it).
|
|
33
|
+
// Pass `$radius: null` to leave border-radius to the caller (e.g. when a
|
|
34
|
+
// component exposes its own radius scale).
|
|
35
|
+
@mixin card-surface($radius: var(--border-radius-lg), $level: 1, $accent-line: true) {
|
|
36
|
+
position: relative;
|
|
37
|
+
overflow: hidden;
|
|
38
|
+
background-image: var(--gradient-surface);
|
|
39
|
+
border: 1px solid var(--color-border);
|
|
40
|
+
box-shadow: var(--elevation-#{$level});
|
|
41
|
+
|
|
42
|
+
@if $radius != null {
|
|
43
|
+
border-radius: $radius;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@if $accent-line {
|
|
47
|
+
&::after {
|
|
48
|
+
content: '';
|
|
49
|
+
position: absolute;
|
|
50
|
+
inset: 0 0 auto 0;
|
|
51
|
+
height: 3px;
|
|
52
|
+
background: var(--accent-line);
|
|
53
|
+
opacity: 0.7;
|
|
54
|
+
pointer-events: none;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
// Clip a teal→violet gradient to text. Apply to a heading/display element.
|
|
60
|
+
@mixin gradient-text {
|
|
61
|
+
background: var(--gradient-text);
|
|
62
|
+
-webkit-background-clip: text;
|
|
63
|
+
background-clip: text;
|
|
64
|
+
color: transparent;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// Soft teal glow, typically on hover/focus of interactive surfaces.
|
|
68
|
+
@mixin glow {
|
|
69
|
+
box-shadow: var(--shadow-glow);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// Pill shape with a teal-tinted translucent fill and strong border — the shared
|
|
73
|
+
// language for buttons, badges, chips, tags.
|
|
74
|
+
@mixin pill($translucent: true) {
|
|
75
|
+
display: inline-flex;
|
|
76
|
+
align-items: center;
|
|
77
|
+
gap: 0.5em;
|
|
78
|
+
border-radius: var(--border-radius-full);
|
|
79
|
+
border: 1px solid var(--color-border-strong);
|
|
80
|
+
|
|
81
|
+
@if $translucent {
|
|
82
|
+
background: rgba(132, 199, 212, 0.08);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// Uppercase eyebrow label with letter-spacing and a teal leading dash.
|
|
87
|
+
@mixin kicker {
|
|
88
|
+
display: inline-flex;
|
|
89
|
+
align-items: center;
|
|
90
|
+
gap: 0.6em;
|
|
91
|
+
text-transform: uppercase;
|
|
92
|
+
letter-spacing: 0.22em;
|
|
93
|
+
font-size: var(--font-size-xs);
|
|
94
|
+
font-weight: var(--font-weight-semibold);
|
|
95
|
+
color: var(--color-primary-300);
|
|
96
|
+
|
|
97
|
+
&::before {
|
|
98
|
+
content: '';
|
|
99
|
+
width: 26px;
|
|
100
|
+
height: 2px;
|
|
101
|
+
border-radius: 2px;
|
|
102
|
+
background: var(--color-primary-400);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
// Gradient teal tile with a 1px ring — for logo/avatar/icon squares.
|
|
107
|
+
@mixin brand-tile($size: 2rem, $radius: var(--border-radius-md)) {
|
|
108
|
+
display: grid;
|
|
109
|
+
place-items: center;
|
|
110
|
+
width: $size;
|
|
111
|
+
height: $size;
|
|
112
|
+
flex-shrink: 0;
|
|
113
|
+
border-radius: $radius;
|
|
114
|
+
background: var(--gradient-brand-tile);
|
|
115
|
+
box-shadow: var(--shadow-brand-glow);
|
|
116
|
+
color: var(--color-neutral-900);
|
|
117
|
+
}
|
|
@@ -14,7 +14,11 @@
|
|
|
14
14
|
@use './tokens/animation' as *;
|
|
15
15
|
@use './tokens/size' as *;
|
|
16
16
|
|
|
17
|
-
:root.dark
|
|
17
|
+
// Design System 2.0: dark is the DEFAULT look. `:root:not(.light)` makes dark
|
|
18
|
+
// apply before any theme class is set (no first-paint white flash); `.light` is
|
|
19
|
+
// the explicit opt-in escape hatch defined in _theme-light.scss.
|
|
20
|
+
:root.dark,
|
|
21
|
+
:root:not(.light) {
|
|
18
22
|
// ============================================================================
|
|
19
23
|
// Colors - Primary (Inverted for dark mode)
|
|
20
24
|
// ============================================================================
|
|
@@ -144,12 +148,12 @@
|
|
|
144
148
|
--typography-line-height-relaxed: #{$typography-line-height-relaxed};
|
|
145
149
|
|
|
146
150
|
// ============================================================================
|
|
147
|
-
// Elevation (
|
|
151
|
+
// Elevation (DS2.0 deep layered shadows — from generated tokens)
|
|
148
152
|
// ============================================================================
|
|
149
|
-
--elevation-1:
|
|
150
|
-
--elevation-2:
|
|
151
|
-
--elevation-3:
|
|
152
|
-
--elevation-4:
|
|
153
|
+
--elevation-1: #{$elevation-1};
|
|
154
|
+
--elevation-2: #{$elevation-2};
|
|
155
|
+
--elevation-3: #{$elevation-3};
|
|
156
|
+
--elevation-4: #{$elevation-4};
|
|
153
157
|
|
|
154
158
|
// ============================================================================
|
|
155
159
|
// Border Radius (Same as light theme)
|
|
@@ -196,21 +200,80 @@
|
|
|
196
200
|
--size-min-touch-height: #{$size-min-touch-height};
|
|
197
201
|
|
|
198
202
|
// ============================================================================
|
|
199
|
-
// Semantic Color Mappings for Dark Theme
|
|
200
|
-
// ============================================================================
|
|
201
|
-
|
|
202
|
-
--color-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
--
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
--color-
|
|
203
|
+
// Semantic Color Mappings for Dark Theme (DS2.0 — teal-tinted surfaces)
|
|
204
|
+
// ============================================================================
|
|
205
|
+
// Surfaces
|
|
206
|
+
--color-background: #{$color-background-dark};
|
|
207
|
+
// Two teal+violet radial glows over the base background. Apply on the app
|
|
208
|
+
// shell via `background-image: var(--app-background-image)`.
|
|
209
|
+
--app-background-image:
|
|
210
|
+
radial-gradient(1200px 800px at 12% -10%, rgba(32, 132, 151, 0.20), transparent 60%),
|
|
211
|
+
radial-gradient(900px 700px at 110% 120%, rgba(78, 63, 132, 0.18), transparent 55%);
|
|
212
|
+
--color-surface: #{$color-surface-dark-base};
|
|
213
|
+
--color-surface-2: #{$color-surface-dark-raised};
|
|
214
|
+
--color-surface-sunken: #{$color-surface-dark-sunken};
|
|
215
|
+
--color-surface-hover: rgba(132, 199, 212, 0.06);
|
|
216
|
+
--color-surface-selected: rgba(32, 132, 151, 0.12);
|
|
217
|
+
--color-surface-muted: rgba(255, 255, 255, 0.02);
|
|
218
|
+
// Gradient surface for cards/panels (use as `background-image`)
|
|
219
|
+
--gradient-surface: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
|
|
220
|
+
|
|
221
|
+
// Text — tuned brighter than the raw pitch values for AA contrast on the
|
|
222
|
+
// teal-tinted surfaces (#14222e / #1a2c3a).
|
|
223
|
+
--color-text-primary: #f1f6f8;
|
|
224
|
+
--color-text-secondary: #c4d2d9;
|
|
225
|
+
--color-text-tertiary: #93a4ad;
|
|
226
|
+
--color-text-disabled: #6c7e88;
|
|
227
|
+
--color-neutral-white: #ffffff;
|
|
228
|
+
|
|
229
|
+
// Borders
|
|
230
|
+
--color-border: rgba(255, 255, 255, 0.08);
|
|
231
|
+
--color-border-strong: rgba(132, 199, 212, 0.28);
|
|
232
|
+
--color-divider: rgba(255, 255, 255, 0.06);
|
|
233
|
+
|
|
234
|
+
// Brand alias (some components reference bare --color-primary)
|
|
235
|
+
--color-primary: var(--color-primary-500);
|
|
236
|
+
// Solid brand-teal fill for primary actions — uses the LITERAL brand teal in
|
|
237
|
+
// both themes (not the inverted scale) so primary buttons are always the
|
|
238
|
+
// recognizable, high-contrast brand color with white ink.
|
|
239
|
+
--color-primary-fill: #{$color-primary-500};
|
|
240
|
+
--color-primary-fill-hover: #{$color-primary-400};
|
|
241
|
+
--color-primary-fill-active: #{$color-primary-600};
|
|
242
|
+
--color-on-primary: #ffffff;
|
|
243
|
+
// Solid secondary fill (literal brand secondary in both themes; dark enough
|
|
244
|
+
// for white ink so it never washes out under dark-mode inversion).
|
|
245
|
+
--color-secondary-fill: #{$color-secondary-600};
|
|
246
|
+
--color-secondary-fill-hover: #{$color-secondary-500};
|
|
247
|
+
--color-secondary-fill-active: #{$color-secondary-700};
|
|
248
|
+
--color-on-secondary: #ffffff;
|
|
249
|
+
// Solid semantic fills (literal, non-inverted) for danger/warning/info actions.
|
|
250
|
+
--color-error-fill: #{$color-error-default};
|
|
251
|
+
--color-error-fill-hover: #c11414;
|
|
252
|
+
--color-error-fill-active: #{$color-error-dark};
|
|
253
|
+
--color-on-error: #ffffff;
|
|
254
|
+
|
|
209
255
|
// Semantic color aliases for components
|
|
210
256
|
--color-error: #{$color-error-default};
|
|
211
257
|
--color-success: #{$color-success-default};
|
|
212
258
|
--color-warning: #{$color-warning-default};
|
|
213
259
|
--color-info: #{$color-info-default};
|
|
260
|
+
|
|
261
|
+
// ============================================================================
|
|
262
|
+
// DS2.0 Visual Primitives (the pitch signature)
|
|
263
|
+
// ============================================================================
|
|
264
|
+
// NOTE: these reference the RAW token scale (#{$color-primary-*}) rather than
|
|
265
|
+
// the inverted --color-primary-* custom properties, so the teal gradient reads
|
|
266
|
+
// bright-on-dark exactly like the pitch regardless of dark-mode inversion.
|
|
267
|
+
// 3px top accent bar for cards/panels (use on a ::after as background)
|
|
268
|
+
--accent-line: linear-gradient(90deg, #{$color-primary-500}, transparent);
|
|
269
|
+
// 1px teal ring used on brand tiles / focus glow
|
|
270
|
+
--shadow-brand-glow: 0 0 0 1px rgba(132, 199, 212, 0.3);
|
|
271
|
+
// Soft teal hover/focus glow
|
|
272
|
+
--shadow-glow: 0 0 24px rgba(132, 199, 212, 0.12);
|
|
273
|
+
// Gradient for clipped display text (use with -webkit-background-clip: text)
|
|
274
|
+
--gradient-text: linear-gradient(100deg, #{$color-primary-300}, #{$color-primary-500} 55%, #{$color-accent-purple});
|
|
275
|
+
// Gradient teal tile for logos / icon squares
|
|
276
|
+
--gradient-brand-tile: linear-gradient(135deg, #{$color-primary-400}, #{$color-primary-600});
|
|
214
277
|
// ============================================================================
|
|
215
278
|
// Short Aliases for Common Usage (Component Convenience)
|
|
216
279
|
// ============================================================================
|
|
@@ -230,8 +293,27 @@
|
|
|
230
293
|
--line-height-relaxed: var(--typography-line-height-relaxed);
|
|
231
294
|
--animation-timing-ease: var(--animation-easing-ease-in-out);
|
|
232
295
|
|
|
233
|
-
//
|
|
296
|
+
// Semantic color scale aliases — resolve the numeric scale some components
|
|
297
|
+
// use onto the canonical semantic shades (already dark-tuned above).
|
|
298
|
+
--color-error-50: rgba(157, 14, 14, 0.18);
|
|
299
|
+
--color-error-100: rgba(157, 14, 14, 0.22);
|
|
300
|
+
--color-error-500: var(--color-error-default);
|
|
234
301
|
--color-error-600: var(--color-error-default);
|
|
235
302
|
--color-error-700: var(--color-error-dark);
|
|
236
|
-
--color-error-800: #5a0707;
|
|
303
|
+
--color-error-800: #5a0707;
|
|
304
|
+
--color-success-50: rgba(142, 164, 117, 0.18);
|
|
305
|
+
--color-success-100: rgba(142, 164, 117, 0.22);
|
|
306
|
+
--color-success-500: var(--color-success-default);
|
|
307
|
+
--color-success-600: var(--color-success-default);
|
|
308
|
+
--color-success-700: var(--color-success-dark);
|
|
309
|
+
--color-warning-50: rgba(225, 160, 64, 0.18);
|
|
310
|
+
--color-warning-100: rgba(225, 160, 64, 0.22);
|
|
311
|
+
--color-warning-500: var(--color-warning-default);
|
|
312
|
+
--color-warning-600: var(--color-warning-default);
|
|
313
|
+
--color-warning-700: var(--color-warning-dark);
|
|
314
|
+
--color-info-50: rgba(59, 101, 136, 0.2);
|
|
315
|
+
--color-info-100: rgba(59, 101, 136, 0.24);
|
|
316
|
+
--color-info-500: var(--color-info-default);
|
|
317
|
+
--color-info-600: var(--color-info-default);
|
|
318
|
+
--color-info-700: var(--color-info-dark);
|
|
237
319
|
}
|
|
@@ -198,23 +198,64 @@
|
|
|
198
198
|
--size-min-touch-height: #{$size-min-touch-height};
|
|
199
199
|
|
|
200
200
|
// ============================================================================
|
|
201
|
-
// Semantic Color Mappings for Light Theme
|
|
201
|
+
// Semantic Color Mappings for Light Theme (DS2.0 — mirrors dark token names)
|
|
202
202
|
// ============================================================================
|
|
203
|
+
// Surfaces
|
|
203
204
|
--color-background: #ffffff;
|
|
205
|
+
--app-background-image: none;
|
|
204
206
|
--color-surface: #ffffff;
|
|
207
|
+
--color-surface-2: #{$color-neutral-50};
|
|
208
|
+
--color-surface-sunken: #{$color-neutral-100};
|
|
209
|
+
--color-surface-hover: #{$color-neutral-100};
|
|
210
|
+
--color-surface-selected: #{$color-primary-50};
|
|
211
|
+
--color-surface-muted: #{$color-neutral-50};
|
|
212
|
+
--gradient-surface: linear-gradient(180deg, #ffffff, #{$color-neutral-50});
|
|
213
|
+
|
|
214
|
+
// Text
|
|
205
215
|
--color-text-primary: #{$color-neutral-900};
|
|
206
216
|
--color-text-secondary: #{$color-neutral-600};
|
|
217
|
+
--color-text-tertiary: #{$color-neutral-500};
|
|
207
218
|
--color-text-disabled: #{$color-neutral-400};
|
|
219
|
+
--color-neutral-white: #ffffff;
|
|
220
|
+
|
|
221
|
+
// Borders
|
|
208
222
|
--color-border: #{$color-neutral-300};
|
|
223
|
+
--color-border-strong: #{$color-primary-300};
|
|
209
224
|
--color-divider: #{$color-neutral-200};
|
|
210
|
-
|
|
211
|
-
|
|
225
|
+
|
|
226
|
+
// Brand alias (some components reference bare --color-primary)
|
|
227
|
+
--color-primary: var(--color-primary-500);
|
|
228
|
+
// Solid brand-teal fill for primary actions (literal brand teal in both themes).
|
|
229
|
+
--color-primary-fill: #{$color-primary-500};
|
|
230
|
+
--color-primary-fill-hover: #{$color-primary-600};
|
|
231
|
+
--color-primary-fill-active: #{$color-primary-700};
|
|
232
|
+
--color-on-primary: #ffffff;
|
|
233
|
+
// Solid secondary fill (literal brand secondary in both themes).
|
|
234
|
+
--color-secondary-fill: #{$color-secondary-600};
|
|
235
|
+
--color-secondary-fill-hover: #{$color-secondary-700};
|
|
236
|
+
--color-secondary-fill-active: #{$color-secondary-800};
|
|
237
|
+
--color-on-secondary: #ffffff;
|
|
238
|
+
// Solid semantic fills for danger/warning/info actions.
|
|
239
|
+
--color-error-fill: #{$color-error-default};
|
|
240
|
+
--color-error-fill-hover: #{$color-error-dark};
|
|
241
|
+
--color-error-fill-active: #{$color-error-dark};
|
|
242
|
+
--color-on-error: #ffffff;
|
|
243
|
+
|
|
212
244
|
// Semantic color aliases for components
|
|
213
245
|
--color-error: #{$color-error-default};
|
|
214
246
|
--color-success: #{$color-success-default};
|
|
215
247
|
--color-warning: #{$color-warning-default};
|
|
216
248
|
--color-info: #{$color-info-default};
|
|
217
249
|
|
|
250
|
+
// ============================================================================
|
|
251
|
+
// DS2.0 Visual Primitives (light-tuned values of the dark primitives)
|
|
252
|
+
// ============================================================================
|
|
253
|
+
--accent-line: linear-gradient(90deg, #{$color-primary-500}, transparent);
|
|
254
|
+
--shadow-brand-glow: 0 0 0 1px rgba(32, 132, 151, 0.18);
|
|
255
|
+
--shadow-glow: 0 0 24px rgba(32, 132, 151, 0.10);
|
|
256
|
+
--gradient-text: linear-gradient(100deg, #{$color-primary-500}, #{$color-primary-600} 55%, #{$color-accent-violet});
|
|
257
|
+
--gradient-brand-tile: linear-gradient(135deg, #{$color-primary-400}, #{$color-primary-600});
|
|
258
|
+
|
|
218
259
|
// ============================================================================
|
|
219
260
|
// Short Aliases for Common Usage (Component Convenience)
|
|
220
261
|
// ============================================================================
|
|
@@ -234,8 +275,27 @@
|
|
|
234
275
|
--line-height-relaxed: var(--typography-line-height-relaxed);
|
|
235
276
|
--animation-timing-ease: var(--animation-easing-ease-in-out);
|
|
236
277
|
|
|
237
|
-
//
|
|
278
|
+
// Semantic color scale aliases — map the numeric scale some components use
|
|
279
|
+
// onto the three canonical semantic shades so they always resolve.
|
|
280
|
+
--color-error-50: #{$color-error-light};
|
|
281
|
+
--color-error-100: #{$color-error-light};
|
|
282
|
+
--color-error-500: var(--color-error-default);
|
|
238
283
|
--color-error-600: var(--color-error-default);
|
|
239
284
|
--color-error-700: var(--color-error-dark);
|
|
240
285
|
--color-error-800: #5a0707; // Darker shade for active state
|
|
286
|
+
--color-success-50: #{$color-success-light};
|
|
287
|
+
--color-success-100: #{$color-success-light};
|
|
288
|
+
--color-success-500: var(--color-success-default);
|
|
289
|
+
--color-success-600: var(--color-success-default);
|
|
290
|
+
--color-success-700: var(--color-success-dark);
|
|
291
|
+
--color-warning-50: #{$color-warning-light};
|
|
292
|
+
--color-warning-100: #{$color-warning-light};
|
|
293
|
+
--color-warning-500: var(--color-warning-default);
|
|
294
|
+
--color-warning-600: var(--color-warning-default);
|
|
295
|
+
--color-warning-700: var(--color-warning-dark);
|
|
296
|
+
--color-info-50: #{$color-info-light};
|
|
297
|
+
--color-info-100: #{$color-info-light};
|
|
298
|
+
--color-info-500: var(--color-info-default);
|
|
299
|
+
--color-info-600: var(--color-info-default);
|
|
300
|
+
--color-info-700: var(--color-info-dark);
|
|
241
301
|
}
|
|
@@ -48,6 +48,13 @@ $color-accent-purple: #866aa0;
|
|
|
48
48
|
$color-accent-red: #9e3846;
|
|
49
49
|
$color-accent-rust: #c6592e;
|
|
50
50
|
$color-accent-violet: #4e3f84;
|
|
51
|
+
$color-surface-dark-base: #14222e; // DS2.0 dark card surface
|
|
52
|
+
$color-surface-dark-raised: #1a2c3a; // DS2.0 raised dark surface
|
|
53
|
+
$color-surface-dark-sunken: #0c1722; // DS2.0 sunken dark surface
|
|
54
|
+
$color-background-dark: #111827; // DS2.0 dark app background (== neutral-900)
|
|
55
|
+
$color-text-dark-primary: #eef4f6; // DS2.0 dark primary text
|
|
56
|
+
$color-text-dark-secondary: #aebfc7; // DS2.0 dark secondary text
|
|
57
|
+
$color-text-dark-tertiary: #71858f; // DS2.0 dark muted text
|
|
51
58
|
$spacing-0: 0;
|
|
52
59
|
$spacing-1: 0.25rem; // 4px - Base grid unit
|
|
53
60
|
$spacing-2: 0.5rem; // 8px
|
|
@@ -86,16 +93,16 @@ $typography-font-weight-bold: 700;
|
|
|
86
93
|
$typography-line-height-tight: 1.25;
|
|
87
94
|
$typography-line-height-normal: 1.5;
|
|
88
95
|
$typography-line-height-relaxed: 1.75;
|
|
89
|
-
$elevation-1: 0
|
|
90
|
-
$elevation-2: 0
|
|
91
|
-
$elevation-3: 0
|
|
92
|
-
$elevation-4: 0
|
|
96
|
+
$elevation-1: 0 4px 24px rgba(0, 0, 0, 0.35); // DS2.0 subtle layered elevation for cards
|
|
97
|
+
$elevation-2: 0 8px 32px rgba(0, 0, 0, 0.42); // DS2.0 medium elevation for dropdowns/popovers
|
|
98
|
+
$elevation-3: 0 14px 44px rgba(0, 0, 0, 0.48); // DS2.0 high elevation for drawers
|
|
99
|
+
$elevation-4: 0 18px 60px rgba(0, 0, 0, 0.55); // DS2.0 highest elevation for modals/overlays
|
|
93
100
|
$border-radius-none: 0;
|
|
94
|
-
$border-radius-sm: 0.
|
|
95
|
-
$border-radius-md: 0.
|
|
96
|
-
$border-radius-lg:
|
|
97
|
-
$border-radius-xl:
|
|
98
|
-
$border-radius-2xl:
|
|
101
|
+
$border-radius-sm: 0.625rem; // 10px - DS2.0 small
|
|
102
|
+
$border-radius-md: 0.75rem; // 12px - DS2.0 default
|
|
103
|
+
$border-radius-lg: 1.125rem; // 18px - DS2.0 card radius
|
|
104
|
+
$border-radius-xl: 1.5rem; // 24px
|
|
105
|
+
$border-radius-2xl: 2rem; // 32px
|
|
99
106
|
$border-radius-full: 9999px; // Fully rounded
|
|
100
107
|
$animation-duration-fast: 150ms; // Standard animation duration
|
|
101
108
|
$animation-easing-ease-in: ease-in;
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
// Do not edit directly, this file was auto-generated.
|
|
3
3
|
|
|
4
4
|
$border-radius-none: 0;
|
|
5
|
-
$border-radius-sm: 0.
|
|
6
|
-
$border-radius-md: 0.
|
|
7
|
-
$border-radius-lg:
|
|
8
|
-
$border-radius-xl:
|
|
9
|
-
$border-radius-2xl:
|
|
5
|
+
$border-radius-sm: 0.625rem; // 10px - DS2.0 small
|
|
6
|
+
$border-radius-md: 0.75rem; // 12px - DS2.0 default
|
|
7
|
+
$border-radius-lg: 1.125rem; // 18px - DS2.0 card radius
|
|
8
|
+
$border-radius-xl: 1.5rem; // 24px
|
|
9
|
+
$border-radius-2xl: 2rem; // 32px
|
|
10
10
|
$border-radius-full: 9999px; // Fully rounded
|
|
@@ -48,3 +48,10 @@ $color-accent-purple: #866aa0;
|
|
|
48
48
|
$color-accent-red: #9e3846;
|
|
49
49
|
$color-accent-rust: #c6592e;
|
|
50
50
|
$color-accent-violet: #4e3f84;
|
|
51
|
+
$color-surface-dark-base: #14222e; // DS2.0 dark card surface
|
|
52
|
+
$color-surface-dark-raised: #1a2c3a; // DS2.0 raised dark surface
|
|
53
|
+
$color-surface-dark-sunken: #0c1722; // DS2.0 sunken dark surface
|
|
54
|
+
$color-background-dark: #111827; // DS2.0 dark app background (== neutral-900)
|
|
55
|
+
$color-text-dark-primary: #eef4f6; // DS2.0 dark primary text
|
|
56
|
+
$color-text-dark-secondary: #aebfc7; // DS2.0 dark secondary text
|
|
57
|
+
$color-text-dark-tertiary: #71858f; // DS2.0 dark muted text
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly, this file was auto-generated.
|
|
3
3
|
|
|
4
|
-
$elevation-1: 0
|
|
5
|
-
$elevation-2: 0
|
|
6
|
-
$elevation-3: 0
|
|
7
|
-
$elevation-4: 0
|
|
4
|
+
$elevation-1: 0 4px 24px rgba(0, 0, 0, 0.35); // DS2.0 subtle layered elevation for cards
|
|
5
|
+
$elevation-2: 0 8px 32px rgba(0, 0, 0, 0.42); // DS2.0 medium elevation for dropdowns/popovers
|
|
6
|
+
$elevation-3: 0 14px 44px rgba(0, 0, 0, 0.48); // DS2.0 high elevation for drawers
|
|
7
|
+
$elevation-4: 0 18px 60px rgba(0, 0, 0, 0.55); // DS2.0 highest elevation for modals/overlays
|
|
@@ -54,6 +54,13 @@ declare const ColorAccentPurple = "#866aa0";
|
|
|
54
54
|
declare const ColorAccentRed = "#9e3846";
|
|
55
55
|
declare const ColorAccentRust = "#c6592e";
|
|
56
56
|
declare const ColorAccentViolet = "#4e3f84";
|
|
57
|
+
declare const ColorSurfaceDarkBase = "#14222e";
|
|
58
|
+
declare const ColorSurfaceDarkRaised = "#1a2c3a";
|
|
59
|
+
declare const ColorSurfaceDarkSunken = "#0c1722";
|
|
60
|
+
declare const ColorBackgroundDark = "#111827";
|
|
61
|
+
declare const ColorTextDarkPrimary = "#eef4f6";
|
|
62
|
+
declare const ColorTextDarkSecondary = "#aebfc7";
|
|
63
|
+
declare const ColorTextDarkTertiary = "#71858f";
|
|
57
64
|
declare const Spacing0 = "0";
|
|
58
65
|
declare const Spacing1 = "0.25rem";
|
|
59
66
|
declare const Spacing2 = "0.5rem";
|
|
@@ -92,16 +99,16 @@ declare const TypographyFontWeightBold = "700";
|
|
|
92
99
|
declare const TypographyLineHeightTight = "1.25";
|
|
93
100
|
declare const TypographyLineHeightNormal = "1.5";
|
|
94
101
|
declare const TypographyLineHeightRelaxed = "1.75";
|
|
95
|
-
declare const Elevation1 = "0
|
|
96
|
-
declare const Elevation2 = "0
|
|
97
|
-
declare const Elevation3 = "0
|
|
98
|
-
declare const Elevation4 = "0
|
|
102
|
+
declare const Elevation1 = "0 4px 24px rgba(0, 0, 0, 0.35)";
|
|
103
|
+
declare const Elevation2 = "0 8px 32px rgba(0, 0, 0, 0.42)";
|
|
104
|
+
declare const Elevation3 = "0 14px 44px rgba(0, 0, 0, 0.48)";
|
|
105
|
+
declare const Elevation4 = "0 18px 60px rgba(0, 0, 0, 0.55)";
|
|
99
106
|
declare const BorderRadiusNone = "0";
|
|
100
|
-
declare const BorderRadiusSm = "0.
|
|
101
|
-
declare const BorderRadiusMd = "0.
|
|
102
|
-
declare const BorderRadiusLg = "
|
|
103
|
-
declare const BorderRadiusXl = "
|
|
104
|
-
declare const BorderRadius2xl = "
|
|
107
|
+
declare const BorderRadiusSm = "0.625rem";
|
|
108
|
+
declare const BorderRadiusMd = "0.75rem";
|
|
109
|
+
declare const BorderRadiusLg = "1.125rem";
|
|
110
|
+
declare const BorderRadiusXl = "1.5rem";
|
|
111
|
+
declare const BorderRadius2xl = "2rem";
|
|
105
112
|
declare const BorderRadiusFull = "9999px";
|
|
106
113
|
declare const AnimationDurationFast = "150ms";
|
|
107
114
|
declare const AnimationEasingEaseIn = "ease-in";
|
|
@@ -138,29 +145,33 @@ interface ThemeState {
|
|
|
138
145
|
|
|
139
146
|
/**
|
|
140
147
|
* Theme Service
|
|
141
|
-
*
|
|
148
|
+
*
|
|
149
|
+
* Design System 2.0 is dark-first: dark is the default theme. Light remains a
|
|
150
|
+
* fully supported opt-in. Theme is applied via a `dark` / `light` class on the
|
|
151
|
+
* document root (`:root.dark` / `:root.light`), matching the theme stylesheets.
|
|
142
152
|
*/
|
|
143
153
|
declare class ThemeService {
|
|
144
154
|
private readonly platformId;
|
|
145
155
|
private readonly isBrowser;
|
|
156
|
+
private static readonly META_COLOR;
|
|
146
157
|
private readonly themeState;
|
|
147
158
|
readonly currentTheme: _angular_core.Signal<ThemeState>;
|
|
148
|
-
readonly isDark: _angular_core.
|
|
159
|
+
readonly isDark: _angular_core.Signal<boolean>;
|
|
149
160
|
constructor();
|
|
150
161
|
/**
|
|
151
|
-
* Set the theme mode
|
|
162
|
+
* Set the active theme mode.
|
|
152
163
|
*/
|
|
153
164
|
setTheme(mode: ThemeMode): void;
|
|
154
165
|
/**
|
|
155
|
-
* Toggle
|
|
166
|
+
* Toggle between dark and light.
|
|
156
167
|
*/
|
|
157
168
|
toggleTheme(): void;
|
|
158
169
|
/**
|
|
159
|
-
*
|
|
170
|
+
* Adopt the OS-level color-scheme preference.
|
|
160
171
|
*/
|
|
161
172
|
useSystemPreference(): void;
|
|
162
173
|
/**
|
|
163
|
-
* Apply
|
|
174
|
+
* Apply the theme class + mobile meta color to the document.
|
|
164
175
|
*/
|
|
165
176
|
private applyTheme;
|
|
166
177
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeService, never>;
|
|
@@ -972,7 +983,7 @@ declare class TypographyComponent {
|
|
|
972
983
|
* Font weight
|
|
973
984
|
* @default 'regular'
|
|
974
985
|
*/
|
|
975
|
-
weight: _angular_core.InputSignal<"
|
|
986
|
+
weight: _angular_core.InputSignal<"bold" | "regular" | "medium" | "semibold">;
|
|
976
987
|
/**
|
|
977
988
|
* Text transform
|
|
978
989
|
* @default 'none'
|
|
@@ -4824,6 +4835,8 @@ declare class LineChartComponent {
|
|
|
4824
4835
|
showLegend: _angular_core.InputSignal<boolean>;
|
|
4825
4836
|
/** Use smooth curves. */
|
|
4826
4837
|
smooth: _angular_core.InputSignal<boolean>;
|
|
4838
|
+
/** Force a minimum Y value (e.g. 0 for cost charts to avoid negative baseline). */
|
|
4839
|
+
yMin: _angular_core.InputSignal<number | null>;
|
|
4827
4840
|
private readonly PL;
|
|
4828
4841
|
private readonly PR;
|
|
4829
4842
|
private readonly PT;
|
|
@@ -4872,8 +4885,11 @@ declare class LineChartComponent {
|
|
|
4872
4885
|
label: string;
|
|
4873
4886
|
color: string;
|
|
4874
4887
|
}[]>;
|
|
4888
|
+
private readonly _clipId;
|
|
4889
|
+
protected readonly clipId: () => string;
|
|
4890
|
+
protected fmtY(val: number): string;
|
|
4875
4891
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LineChartComponent, never>;
|
|
4876
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LineChartComponent, "lc-line-chart", never, { "series": { "alias": "series"; "required": true; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "showDots": { "alias": "showDots"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "showXLabels": { "alias": "showXLabels"; "required": false; "isSignal": true; }; "showYLabels": { "alias": "showYLabels"; "required": false; "isSignal": true; }; "filled": { "alias": "filled"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "smooth": { "alias": "smooth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
4892
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LineChartComponent, "lc-line-chart", never, { "series": { "alias": "series"; "required": true; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "showDots": { "alias": "showDots"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "showXLabels": { "alias": "showXLabels"; "required": false; "isSignal": true; }; "showYLabels": { "alias": "showYLabels"; "required": false; "isSignal": true; }; "filled": { "alias": "filled"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "smooth": { "alias": "smooth"; "required": false; "isSignal": true; }; "yMin": { "alias": "yMin"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
4877
4893
|
}
|
|
4878
4894
|
|
|
4879
4895
|
type GaugeColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
|
|
@@ -6877,5 +6893,36 @@ declare class ComboboxComponent implements ControlValueAccessor, OnDestroy {
|
|
|
6877
6893
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComboboxComponent, "lc-combobox", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "loadOptions": { "alias": "loadOptions"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "minChars": { "alias": "minChars"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "allowCreate": { "alias": "allowCreate"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "queryChange": "queryChange"; "optionSelected": "optionSelected"; "created": "created"; }, never, never, true, never>;
|
|
6878
6894
|
}
|
|
6879
6895
|
|
|
6880
|
-
|
|
6881
|
-
|
|
6896
|
+
interface StageItem {
|
|
6897
|
+
/** Stage name shown as the row label. */
|
|
6898
|
+
label: string;
|
|
6899
|
+
/** Numeric value; drives the bar width and the right-aligned count. */
|
|
6900
|
+
value: number;
|
|
6901
|
+
/** Optional bar/dot color (any CSS color). Falls back to the primary token. */
|
|
6902
|
+
color?: string;
|
|
6903
|
+
/** Optional secondary text shown under the label (e.g. a hint). */
|
|
6904
|
+
hint?: string;
|
|
6905
|
+
/** Optional opaque payload echoed back in `stageClick`. */
|
|
6906
|
+
id?: string;
|
|
6907
|
+
}
|
|
6908
|
+
type StageListSize = 'sm' | 'md';
|
|
6909
|
+
declare class StageListComponent {
|
|
6910
|
+
readonly stages: _angular_core.InputSignal<StageItem[]>;
|
|
6911
|
+
readonly max: _angular_core.InputSignal<number | null>;
|
|
6912
|
+
readonly showValue: _angular_core.InputSignal<boolean>;
|
|
6913
|
+
readonly showBar: _angular_core.InputSignal<boolean>;
|
|
6914
|
+
readonly size: _angular_core.InputSignal<StageListSize>;
|
|
6915
|
+
readonly clickable: _angular_core.InputSignal<boolean>;
|
|
6916
|
+
readonly emptyText: _angular_core.InputSignal<string>;
|
|
6917
|
+
readonly stageClick: _angular_core.OutputEmitterRef<StageItem>;
|
|
6918
|
+
protected readonly isEmpty: _angular_core.Signal<boolean>;
|
|
6919
|
+
protected readonly resolvedMax: _angular_core.Signal<number>;
|
|
6920
|
+
protected resolveColor(stage: StageItem): string;
|
|
6921
|
+
protected fillWidth(stage: StageItem): string;
|
|
6922
|
+
protected onStageClick(stage: StageItem): void;
|
|
6923
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StageListComponent, never>;
|
|
6924
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StageListComponent, "lc-stage-list", never, { "stages": { "alias": "stages"; "required": true; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "showBar": { "alias": "showBar"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; }, { "stageClick": "stageClick"; }, never, never, true, never>;
|
|
6925
|
+
}
|
|
6926
|
+
|
|
6927
|
+
export { AccordionComponent, AccordionGroupComponent, AlertComponent, AnimationDurationFast, AnimationEasingEaseIn, AnimationEasingEaseInOut, AnimationEasingEaseOut, AreaChartComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BarChartComponent, BorderRadius2xl, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CalloutComponent, CardComponent, ChatComponent, CheckboxComponent, ChipComponent, CodeBlockComponent, ColorAccentOrange, ColorAccentPurple, ColorAccentRed, ColorAccentRust, ColorAccentViolet, ColorBackgroundDark, ColorErrorDark, ColorErrorDefault, ColorErrorLight, ColorInfoDark, ColorInfoDefault, ColorInfoLight, ColorNeutral100, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorPickerComponent, ColorPrimary100, ColorPrimary200, ColorPrimary300, ColorPrimary400, ColorPrimary50, ColorPrimary500, ColorPrimary600, ColorPrimary700, ColorPrimary800, ColorPrimary900, ColorSecondary100, ColorSecondary200, ColorSecondary300, ColorSecondary400, ColorSecondary50, ColorSecondary500, ColorSecondary600, ColorSecondary700, ColorSecondary800, ColorSecondary900, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorSurfaceDarkBase, ColorSurfaceDarkRaised, ColorSurfaceDarkSunken, ColorTextDarkPrimary, ColorTextDarkSecondary, ColorTextDarkTertiary, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FILE_FALLBACK_ICON, FOLDER_ICON, FOLDER_OPEN_ICON, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, IconComponent, InputComponent, KanbanBoardComponent, LC_LOGO_BASE_PATH, LineChartComponent, ListComponent, ListItemTemplateDirective, LogViewerComponent, LogoComponent, MarkdownComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PageHeaderComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeInteractiveLgFontSize, SizeInteractiveLgHeight, SizeInteractiveLgPadding, SizeInteractiveMdFontSize, SizeInteractiveMdHeight, SizeInteractiveMdPadding, SizeInteractiveSmFontSize, SizeInteractiveSmHeight, SizeInteractiveSmPadding, SizeInteractiveXsFontSize, SizeInteractiveXsHeight, SizeInteractiveXsPadding, SizeMinTouchHeight, SizeMinTouchWidth, SkeletonComponent, SliderComponent, SpacerComponent, Spacing0, Spacing05, Spacing1, Spacing10, Spacing11, Spacing12, Spacing14, Spacing15, Spacing16, Spacing2, Spacing25, Spacing3, Spacing35, Spacing4, Spacing5, Spacing6, Spacing7, Spacing8, Spacing9, SparklineComponent, SpinnerComponent, StackComponent, StackedBarChartComponent, StageListComponent, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, ToolbarComponent, TooltipContentComponent, TooltipDirective, TreeViewComponent, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent, resolveFileIcon };
|
|
6928
|
+
export type { ActionClickEvent, AlertVariant, AreaChartSeries, AvatarGroupItem, AvatarSize, AvatarStatus, BadgeSize, BadgeVariant, BarChartItem, BarChartOrientation, BreadcrumbItem, BreadcrumbSize, ButtonSize, ButtonType, ButtonVariant, CalendarEvent, CalendarView, CalloutVariant, CellEditEvent, ChatAttachment, ChatFileAttachEvent, ChatMessage, ChatMessageRole, ChatRenderMarkdown, ChatSendEvent, CheckboxSize, ChipSize, ChipVariant, CodeBlockLanguage, ComboboxOption, ComboboxSize, ComboboxValue, ConfirmDialogVariant, ConfirmOptions, ContainerSize, DateRange, DateValue, DependencyDirection, DependencyEdgeDef, DependencyNode, DependencyNodeStatus, DependencyRelation, DiffViewMode, DividerOrientation, DividerSpacing, DividerVariant, DocumentType, DonutChartSize, DonutSegment, DrawerPosition, DrawerSize, EmptyStateSize, ErrorSeverity, FileUploadFile, FilterConfig, FilterOption, FilterValues, FooterLink, FooterSection, FooterVariant, FunnelStep, GalleryItem, GalleryLayout, GallerySize, GanttDependency, GanttTask, GaugeColor, GaugeSize, HeatmapCell, HeroColor, HeroSize, HeroVariant, IconSize, IconVariant, KanbanCard, KanbanColumn, KanbanLabel, KanbanMoveEvent, LineChartSeries, ListItem, ListOrientation, ListSize, ListVariant, LogLevel, LogLine, LogViewerVariant, MarkdownHeading, MarkdownLinkClick, MarkdownRendered, MenuItem, ModalSize, NavigationItem, Notification, NotificationPriority, NotificationType, PaginationSize, PasswordRequirement, PasswordStrength, PieChartSize, PieSegment, PopoverPosition, PopoverTrigger, ProgressBarColor, ProgressBarSize, ProgressBarVariant, ProgressRingColor, ProgressRingSize, RadarChartSeries, RadioSize, RatingSize, RenderPart, RequireTextConfig, RichTextEditorMode, ScatterPoint, ScatterSeries, SearchInputSize, SectionBackground, SectionSpacing, SelectOption, SelectOptionGroup, SelectValue, SelectionChangeEvent, SidenavMode, SidenavPosition, SkeletonVariant, SortEvent, SpacerSize, SparklineColor, SparklineCurve, SpinnerSize, StackAlign, StackDirection, StackGap, StackJustify, StackedBarCategory, StackedBarLegend, StackedBarOrientation, StageItem, StageListSize, StatTrendDirection, StepState, StepperStep, TabOrientation, TableAction, TableActionsAlign, TableColumn, TableSize, TableVariant, ThemeConfig, ThemeMode, ThemeState, TimelineItem, TimelineOrientation, Toast, ToastAction, ToastConfig, ToastPosition, ToastVariant, ToggleOption, ToolbarAction, ToolbarConfig, TooltipPosition, TreeNode, TreeNodeType, WaterfallItem };
|