@helixui/library 1.1.2-next.2 → 1.1.2-next.3
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/custom-elements.json +234 -240
- package/dist/components/hx-avatar/hx-avatar.styles.d.ts.map +1 -1
- package/dist/components/hx-avatar/index.js +1 -1
- package/dist/components/hx-button/hx-button.d.ts +12 -6
- package/dist/components/hx-button/hx-button.d.ts.map +1 -1
- package/dist/components/hx-button/hx-button.styles.d.ts.map +1 -1
- package/dist/components/hx-button/index.js +1 -1
- package/dist/components/hx-clinical-status/hx-clinical-status.d.ts +14 -6
- package/dist/components/hx-clinical-status/hx-clinical-status.d.ts.map +1 -1
- package/dist/components/hx-clinical-status/hx-clinical-status.styles.d.ts.map +1 -1
- package/dist/components/hx-clinical-status/index.d.ts +1 -1
- package/dist/components/hx-clinical-status/index.d.ts.map +1 -1
- package/dist/components/hx-clinical-status/index.js +1 -1
- package/dist/css/helix-all.css +56 -3
- package/dist/css/helix-core.css +52 -1
- package/dist/css/hx-avatar.css +18 -1
- package/dist/css/hx-button.css +34 -0
- package/dist/css/hx-clinical-status.css +4 -2
- package/dist/css/index.css +1 -1
- package/dist/css/manifest.json +2 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -3
- package/dist/shared/{hx-avatar-7p1cj3lG.js → hx-avatar-CZfA9KEl.js} +27 -10
- package/dist/shared/hx-avatar-CZfA9KEl.js.map +1 -0
- package/dist/shared/{hx-button-6S3DwuIj.js → hx-button-CC1YH9RZ.js} +52 -12
- package/dist/shared/hx-button-CC1YH9RZ.js.map +1 -0
- package/dist/shared/{hx-clinical-status-De8yrA5I.js → hx-clinical-status-D6eaplvs.js} +5 -3
- package/dist/shared/hx-clinical-status-D6eaplvs.js.map +1 -0
- package/package.json +2 -2
- package/dist/shared/hx-avatar-7p1cj3lG.js.map +0 -1
- package/dist/shared/hx-button-6S3DwuIj.js.map +0 -1
- package/dist/shared/hx-clinical-status-De8yrA5I.js.map +0 -1
package/dist/css/helix-all.css
CHANGED
|
@@ -450,11 +450,28 @@
|
|
|
450
450
|
}
|
|
451
451
|
|
|
452
452
|
/* P1-B: Windows High Contrast Mode — avatar background is stripped by the system,
|
|
453
|
-
leaving no visual boundary.
|
|
453
|
+
leaving no visual boundary. Restore a visible border, explicit foreground, and
|
|
454
|
+
background so the avatar container, initials, and fallback icon all remain
|
|
455
|
+
perceivable at any contrast level.
|
|
454
456
|
WCAG 1.4.11 Non-text Contrast (Level AA). */
|
|
455
457
|
@media (forced-colors: active) {
|
|
456
458
|
.avatar {
|
|
459
|
+
forced-color-adjust: none;
|
|
457
460
|
border: 2px solid ButtonText;
|
|
461
|
+
background-color: Canvas;
|
|
462
|
+
color: CanvasText;
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
.avatar__initials {
|
|
466
|
+
color: CanvasText;
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
.avatar__fallback-icon {
|
|
470
|
+
color: CanvasText;
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
.avatar__image {
|
|
474
|
+
forced-color-adjust: auto;
|
|
458
475
|
}
|
|
459
476
|
}
|
|
460
477
|
/* ── hx-badge ── */
|
|
@@ -1136,6 +1153,40 @@
|
|
|
1136
1153
|
.button__label {
|
|
1137
1154
|
flex: 1 1 auto;
|
|
1138
1155
|
}
|
|
1156
|
+
|
|
1157
|
+
/* ─── High Contrast Mode (forced-colors) ─── */
|
|
1158
|
+
|
|
1159
|
+
@media (forced-colors: active) {
|
|
1160
|
+
.button {
|
|
1161
|
+
/* Ensure button outline is visible in Windows High Contrast mode.
|
|
1162
|
+
ButtonText/ButtonFace are system colors recognized by the browser. */
|
|
1163
|
+
forced-color-adjust: none;
|
|
1164
|
+
background-color: ButtonFace;
|
|
1165
|
+
color: ButtonText;
|
|
1166
|
+
border: 2px solid ButtonText;
|
|
1167
|
+
}
|
|
1168
|
+
|
|
1169
|
+
.button:focus-visible {
|
|
1170
|
+
outline: 3px solid Highlight;
|
|
1171
|
+
outline-offset: 2px;
|
|
1172
|
+
}
|
|
1173
|
+
|
|
1174
|
+
.button[disabled] {
|
|
1175
|
+
background-color: ButtonFace;
|
|
1176
|
+
color: GrayText;
|
|
1177
|
+
border-color: GrayText;
|
|
1178
|
+
opacity: 1;
|
|
1179
|
+
}
|
|
1180
|
+
|
|
1181
|
+
:host([disabled]) {
|
|
1182
|
+
opacity: 1;
|
|
1183
|
+
}
|
|
1184
|
+
|
|
1185
|
+
.button--loading .button__spinner {
|
|
1186
|
+
/* Ensure spinner is visible in HCM */
|
|
1187
|
+
forced-color-adjust: auto;
|
|
1188
|
+
}
|
|
1189
|
+
}
|
|
1139
1190
|
/* ── hx-button-group ── */
|
|
1140
1191
|
:host {
|
|
1141
1192
|
display: inline-flex;
|
|
@@ -2081,7 +2132,8 @@
|
|
|
2081
2132
|
}
|
|
2082
2133
|
|
|
2083
2134
|
.clinical-status__dismiss-button:focus-visible {
|
|
2084
|
-
outline: var(--hx-focus-ring-width, 2px) solid
|
|
2135
|
+
outline: var(--hx-focus-ring-width, 2px) solid
|
|
2136
|
+
var(--hx-focus-ring-color, var(--hx-color-focus, #2563eb));
|
|
2085
2137
|
outline-offset: var(--hx-focus-ring-offset, 2px);
|
|
2086
2138
|
opacity: 1;
|
|
2087
2139
|
}
|
|
@@ -2126,7 +2178,8 @@
|
|
|
2126
2178
|
}
|
|
2127
2179
|
|
|
2128
2180
|
.clinical-status__acknowledge-button:focus-visible {
|
|
2129
|
-
outline: var(--hx-focus-ring-width, 2px) solid
|
|
2181
|
+
outline: var(--hx-focus-ring-width, 2px) solid
|
|
2182
|
+
var(--hx-focus-ring-color, var(--hx-color-focus, #2563eb));
|
|
2130
2183
|
outline-offset: var(--hx-focus-ring-offset, 2px);
|
|
2131
2184
|
}
|
|
2132
2185
|
|
package/dist/css/helix-core.css
CHANGED
|
@@ -110,11 +110,28 @@
|
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
/* P1-B: Windows High Contrast Mode — avatar background is stripped by the system,
|
|
113
|
-
leaving no visual boundary.
|
|
113
|
+
leaving no visual boundary. Restore a visible border, explicit foreground, and
|
|
114
|
+
background so the avatar container, initials, and fallback icon all remain
|
|
115
|
+
perceivable at any contrast level.
|
|
114
116
|
WCAG 1.4.11 Non-text Contrast (Level AA). */
|
|
115
117
|
@media (forced-colors: active) {
|
|
116
118
|
.avatar {
|
|
119
|
+
forced-color-adjust: none;
|
|
117
120
|
border: 2px solid ButtonText;
|
|
121
|
+
background-color: Canvas;
|
|
122
|
+
color: CanvasText;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.avatar__initials {
|
|
126
|
+
color: CanvasText;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.avatar__fallback-icon {
|
|
130
|
+
color: CanvasText;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.avatar__image {
|
|
134
|
+
forced-color-adjust: auto;
|
|
118
135
|
}
|
|
119
136
|
}
|
|
120
137
|
/* ── hx-badge ── */
|
|
@@ -557,6 +574,40 @@
|
|
|
557
574
|
.button__label {
|
|
558
575
|
flex: 1 1 auto;
|
|
559
576
|
}
|
|
577
|
+
|
|
578
|
+
/* ─── High Contrast Mode (forced-colors) ─── */
|
|
579
|
+
|
|
580
|
+
@media (forced-colors: active) {
|
|
581
|
+
.button {
|
|
582
|
+
/* Ensure button outline is visible in Windows High Contrast mode.
|
|
583
|
+
ButtonText/ButtonFace are system colors recognized by the browser. */
|
|
584
|
+
forced-color-adjust: none;
|
|
585
|
+
background-color: ButtonFace;
|
|
586
|
+
color: ButtonText;
|
|
587
|
+
border: 2px solid ButtonText;
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
.button:focus-visible {
|
|
591
|
+
outline: 3px solid Highlight;
|
|
592
|
+
outline-offset: 2px;
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
.button[disabled] {
|
|
596
|
+
background-color: ButtonFace;
|
|
597
|
+
color: GrayText;
|
|
598
|
+
border-color: GrayText;
|
|
599
|
+
opacity: 1;
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
:host([disabled]) {
|
|
603
|
+
opacity: 1;
|
|
604
|
+
}
|
|
605
|
+
|
|
606
|
+
.button--loading .button__spinner {
|
|
607
|
+
/* Ensure spinner is visible in HCM */
|
|
608
|
+
forced-color-adjust: auto;
|
|
609
|
+
}
|
|
610
|
+
}
|
|
560
611
|
/* ── hx-button-group ── */
|
|
561
612
|
:host {
|
|
562
613
|
display: inline-flex;
|
package/dist/css/hx-avatar.css
CHANGED
|
@@ -108,10 +108,27 @@
|
|
|
108
108
|
}
|
|
109
109
|
|
|
110
110
|
/* P1-B: Windows High Contrast Mode — avatar background is stripped by the system,
|
|
111
|
-
leaving no visual boundary.
|
|
111
|
+
leaving no visual boundary. Restore a visible border, explicit foreground, and
|
|
112
|
+
background so the avatar container, initials, and fallback icon all remain
|
|
113
|
+
perceivable at any contrast level.
|
|
112
114
|
WCAG 1.4.11 Non-text Contrast (Level AA). */
|
|
113
115
|
@media (forced-colors: active) {
|
|
114
116
|
.avatar {
|
|
117
|
+
forced-color-adjust: none;
|
|
115
118
|
border: 2px solid ButtonText;
|
|
119
|
+
background-color: Canvas;
|
|
120
|
+
color: CanvasText;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.avatar__initials {
|
|
124
|
+
color: CanvasText;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.avatar__fallback-icon {
|
|
128
|
+
color: CanvasText;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.avatar__image {
|
|
132
|
+
forced-color-adjust: auto;
|
|
116
133
|
}
|
|
117
134
|
}
|
package/dist/css/hx-button.css
CHANGED
|
@@ -260,3 +260,37 @@
|
|
|
260
260
|
.button__label {
|
|
261
261
|
flex: 1 1 auto;
|
|
262
262
|
}
|
|
263
|
+
|
|
264
|
+
/* ─── High Contrast Mode (forced-colors) ─── */
|
|
265
|
+
|
|
266
|
+
@media (forced-colors: active) {
|
|
267
|
+
.button {
|
|
268
|
+
/* Ensure button outline is visible in Windows High Contrast mode.
|
|
269
|
+
ButtonText/ButtonFace are system colors recognized by the browser. */
|
|
270
|
+
forced-color-adjust: none;
|
|
271
|
+
background-color: ButtonFace;
|
|
272
|
+
color: ButtonText;
|
|
273
|
+
border: 2px solid ButtonText;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.button:focus-visible {
|
|
277
|
+
outline: 3px solid Highlight;
|
|
278
|
+
outline-offset: 2px;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.button[disabled] {
|
|
282
|
+
background-color: ButtonFace;
|
|
283
|
+
color: GrayText;
|
|
284
|
+
border-color: GrayText;
|
|
285
|
+
opacity: 1;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
:host([disabled]) {
|
|
289
|
+
opacity: 1;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.button--loading .button__spinner {
|
|
293
|
+
/* Ensure spinner is visible in HCM */
|
|
294
|
+
forced-color-adjust: auto;
|
|
295
|
+
}
|
|
296
|
+
}
|
|
@@ -184,7 +184,8 @@
|
|
|
184
184
|
}
|
|
185
185
|
|
|
186
186
|
.clinical-status__dismiss-button:focus-visible {
|
|
187
|
-
outline: var(--hx-focus-ring-width, 2px) solid
|
|
187
|
+
outline: var(--hx-focus-ring-width, 2px) solid
|
|
188
|
+
var(--hx-focus-ring-color, var(--hx-color-focus, #2563eb));
|
|
188
189
|
outline-offset: var(--hx-focus-ring-offset, 2px);
|
|
189
190
|
opacity: 1;
|
|
190
191
|
}
|
|
@@ -229,7 +230,8 @@
|
|
|
229
230
|
}
|
|
230
231
|
|
|
231
232
|
.clinical-status__acknowledge-button:focus-visible {
|
|
232
|
-
outline: var(--hx-focus-ring-width, 2px) solid
|
|
233
|
+
outline: var(--hx-focus-ring-width, 2px) solid
|
|
234
|
+
var(--hx-focus-ring-color, var(--hx-color-focus, #2563eb));
|
|
233
235
|
outline-offset: var(--hx-focus-ring-offset, 2px);
|
|
234
236
|
}
|
|
235
237
|
|
package/dist/css/index.css
CHANGED
package/dist/css/manifest.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"generated": "2026-03-
|
|
2
|
+
"generated": "2026-03-26T21:06:42.758Z",
|
|
3
3
|
"components": [
|
|
4
4
|
{
|
|
5
5
|
"name": "hx-accordion",
|
|
@@ -462,6 +462,7 @@
|
|
|
462
462
|
"--hx-color-error-700",
|
|
463
463
|
"--hx-color-error-800",
|
|
464
464
|
"--hx-color-error-900",
|
|
465
|
+
"--hx-color-focus",
|
|
465
466
|
"--hx-color-info-200",
|
|
466
467
|
"--hx-color-info-50",
|
|
467
468
|
"--hx-color-info-500",
|
package/dist/index.d.ts
CHANGED
|
@@ -34,7 +34,7 @@ export { HelixCarouselItem } from './components/hx-carousel/index.js';
|
|
|
34
34
|
export { HelixCheckbox } from './components/hx-checkbox/index.js';
|
|
35
35
|
export { HelixCheckboxGroup } from './components/hx-checkbox-group/index.js';
|
|
36
36
|
export { HelixClinicalStatus } from './components/hx-clinical-status/index.js';
|
|
37
|
-
export type { ClinicalSeverity } from './components/hx-clinical-status/index.js';
|
|
37
|
+
export type { ClinicalSeverity, HxClinicalStatus } from './components/hx-clinical-status/index.js';
|
|
38
38
|
export { HelixCodeSnippet } from './components/hx-code-snippet/index.js';
|
|
39
39
|
export { HelixColorPicker } from './components/hx-color-picker/index.js';
|
|
40
40
|
export { HelixCombobox, type ComboboxOption, type HxComboboxSize } from './components/hx-combobox/index.js';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGnD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,YAAY,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAC/E,YAAY,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAGxG,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,YAAY,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACrF,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAC/E,YAAY,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { H as d, a as h } from "./shared/hx-accordion-_KeulaQR.js";
|
|
2
2
|
import { H as b } from "./shared/hx-action-bar-vGFnNwNY.js";
|
|
3
3
|
import { H as S } from "./shared/hx-alert-DRZYP0Oo.js";
|
|
4
|
-
import { H as g } from "./shared/hx-avatar-
|
|
4
|
+
import { H as g } from "./shared/hx-avatar-CZfA9KEl.js";
|
|
5
5
|
import { H as v } from "./shared/hx-badge-Xg7zoh4Q.js";
|
|
6
6
|
import { H as y } from "./shared/hx-banner-2RS7Nux4.js";
|
|
7
7
|
import { H as E, a as B } from "./shared/hx-breadcrumb-item-B2rjepqy.js";
|
|
8
|
-
import { H as w } from "./shared/hx-button-
|
|
8
|
+
import { H as w } from "./shared/hx-button-CC1YH9RZ.js";
|
|
9
9
|
import { H as A } from "./shared/hx-button-group-ChTQsnQj.js";
|
|
10
10
|
import { H as L } from "./shared/hx-card-dIKdcMhr.js";
|
|
11
11
|
import { H as N, a as R } from "./shared/hx-carousel-item-Cm8a1nAi.js";
|
|
12
12
|
import { H as U } from "./shared/hx-checkbox-_WUiuTo9.js";
|
|
13
13
|
import { H as V } from "./shared/hx-checkbox-group-B-ci-dxp.js";
|
|
14
|
-
import { H as W } from "./shared/hx-clinical-status-
|
|
14
|
+
import { H as W } from "./shared/hx-clinical-status-D6eaplvs.js";
|
|
15
15
|
import { H as Y } from "./shared/hx-code-snippet-CQsyvthi.js";
|
|
16
16
|
import { H as q } from "./shared/hx-color-picker-Dk2Myvaf.js";
|
|
17
17
|
import { H as J } from "./shared/hx-combobox-CNAJXIxo.js";
|
|
@@ -2,7 +2,7 @@ import { css as _, LitElement as y, html as v, nothing as d } from "lit";
|
|
|
2
2
|
import { property as l, state as c, customElement as z } from "lit/decorators.js";
|
|
3
3
|
import { classMap as p } from "lit/directives/class-map.js";
|
|
4
4
|
import { tokenStyles as S } from "@helixui/tokens/lit";
|
|
5
|
-
import { d as
|
|
5
|
+
import { d as g } from "./dev-warn-YlwPHjtX.js";
|
|
6
6
|
const w = _`
|
|
7
7
|
:host {
|
|
8
8
|
display: inline-block;
|
|
@@ -113,16 +113,33 @@ const w = _`
|
|
|
113
113
|
}
|
|
114
114
|
|
|
115
115
|
/* P1-B: Windows High Contrast Mode — avatar background is stripped by the system,
|
|
116
|
-
leaving no visual boundary.
|
|
116
|
+
leaving no visual boundary. Restore a visible border, explicit foreground, and
|
|
117
|
+
background so the avatar container, initials, and fallback icon all remain
|
|
118
|
+
perceivable at any contrast level.
|
|
117
119
|
WCAG 1.4.11 Non-text Contrast (Level AA). */
|
|
118
120
|
@media (forced-colors: active) {
|
|
119
121
|
.avatar {
|
|
122
|
+
forced-color-adjust: none;
|
|
120
123
|
border: 2px solid ButtonText;
|
|
124
|
+
background-color: Canvas;
|
|
125
|
+
color: CanvasText;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.avatar__initials {
|
|
129
|
+
color: CanvasText;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.avatar__fallback-icon {
|
|
133
|
+
color: CanvasText;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.avatar__image {
|
|
137
|
+
forced-color-adjust: auto;
|
|
121
138
|
}
|
|
122
139
|
}
|
|
123
140
|
`;
|
|
124
|
-
var E = Object.defineProperty,
|
|
125
|
-
for (var s = a > 1 ? void 0 : a ?
|
|
141
|
+
var E = Object.defineProperty, C = Object.getOwnPropertyDescriptor, o = (t, r, e, a) => {
|
|
142
|
+
for (var s = a > 1 ? void 0 : a ? C(r, e) : r, n = t.length - 1, h; n >= 0; n--)
|
|
126
143
|
(h = t[n]) && (s = (a ? h(r, e, s) : h(s)) || s);
|
|
127
144
|
return a && s && E(r, e, s), s;
|
|
128
145
|
};
|
|
@@ -137,12 +154,12 @@ let i = class extends y {
|
|
|
137
154
|
willUpdate(t) {
|
|
138
155
|
t.has("src") && (this._imgError = !1), (t.has("src") || t.has("alt")) && this.src && this.alt, (t.has("initials") || t.has("label")) && this.initials && this.label;
|
|
139
156
|
const r = ["xs", "sm", "md", "lg", "xl"];
|
|
140
|
-
t.has("size") && !r.includes(this.size) &&
|
|
157
|
+
t.has("size") && !r.includes(this.size) && g(
|
|
141
158
|
"hx-avatar",
|
|
142
159
|
`Invalid hx-size="${String(this.size)}". Valid values: xs, sm, md, lg, xl. Rendering with "md".`
|
|
143
160
|
);
|
|
144
161
|
const e = ["circle", "square"];
|
|
145
|
-
t.has("shape") && !e.includes(this.shape) &&
|
|
162
|
+
t.has("shape") && !e.includes(this.shape) && g(
|
|
146
163
|
"hx-avatar",
|
|
147
164
|
`Invalid shape="${String(this.shape)}". Valid values: circle, square. Rendering with "circle".`
|
|
148
165
|
);
|
|
@@ -188,10 +205,10 @@ let i = class extends y {
|
|
|
188
205
|
}
|
|
189
206
|
// ─── Render ───
|
|
190
207
|
render() {
|
|
191
|
-
const t = this.src, r = this._hasDefaultSlot, e = !r && !!t && !this._imgError, a = !r && !e && !!this.initials.trim(), s = !r && !e && !a, n = e ? this.alt || this.label || "Avatar" : a ? this.label || this.initials : this.label || "Avatar", h = ["xs", "sm", "md", "lg", "xl"],
|
|
208
|
+
const t = this.src, r = this._hasDefaultSlot, e = !r && !!t && !this._imgError, a = !r && !e && !!this.initials.trim(), s = !r && !e && !a, n = e ? this.alt || this.label || "Avatar" : a ? this.label || this.initials : this.label || "Avatar", h = ["xs", "sm", "md", "lg", "xl"], m = ["circle", "square"], f = h.includes(this.size) ? this.size : "md", u = m.includes(this.shape) ? this.shape : "circle", x = {
|
|
192
209
|
avatar: !0,
|
|
193
210
|
[`avatar--${f}`]: !0,
|
|
194
|
-
[`avatar--${
|
|
211
|
+
[`avatar--${u}`]: !0
|
|
195
212
|
}, b = {
|
|
196
213
|
avatar__badge: !0,
|
|
197
214
|
"avatar__badge--hidden": !this._hasBadgeSlot
|
|
@@ -200,7 +217,7 @@ let i = class extends y {
|
|
|
200
217
|
<div class="avatar-wrapper">
|
|
201
218
|
<div
|
|
202
219
|
part="avatar"
|
|
203
|
-
class=${p(
|
|
220
|
+
class=${p(x)}
|
|
204
221
|
role=${r ? d : "img"}
|
|
205
222
|
aria-label=${r ? d : n}
|
|
206
223
|
>
|
|
@@ -258,4 +275,4 @@ i = o([
|
|
|
258
275
|
export {
|
|
259
276
|
i as H
|
|
260
277
|
};
|
|
261
|
-
//# sourceMappingURL=hx-avatar-
|
|
278
|
+
//# sourceMappingURL=hx-avatar-CZfA9KEl.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hx-avatar-CZfA9KEl.js","sources":["../../src/components/hx-avatar/hx-avatar.styles.ts","../../src/components/hx-avatar/hx-avatar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixAvatarStyles = css`\n :host {\n display: inline-block;\n }\n\n /* P2-5: Respect the HTML hidden attribute — custom elements with explicit display ignore it otherwise. */\n :host([hidden]) {\n display: none !important;\n }\n\n /* P0-2: Wrapper provides the positioning context for the badge slot, outside overflow: hidden. */\n .avatar-wrapper {\n position: relative;\n display: inline-flex;\n }\n\n .avatar {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n width: var(--hx-avatar-size);\n height: var(--hx-avatar-size);\n background-color: var(--hx-avatar-bg, var(--hx-color-primary-100));\n color: var(--hx-avatar-color, var(--hx-color-primary-700));\n border-radius: var(--hx-avatar-border-radius);\n flex-shrink: 0;\n }\n\n /* ─── Size Variants ─── */\n\n .avatar--xs {\n --hx-avatar-size: var(--hx-size-6, 1.5rem);\n --hx-avatar-font-size: var(--hx-font-size-2xs, 0.625rem);\n }\n\n .avatar--sm {\n --hx-avatar-size: var(--hx-size-8, 2rem);\n --hx-avatar-font-size: var(--hx-font-size-xs, 0.75rem);\n }\n\n .avatar--md {\n --hx-avatar-size: var(--hx-size-10, 2.5rem);\n --hx-avatar-font-size: var(--hx-font-size-sm, 0.875rem);\n }\n\n .avatar--lg {\n --hx-avatar-size: var(--hx-size-12, 3rem);\n --hx-avatar-font-size: var(--hx-font-size-md, 1rem);\n }\n\n .avatar--xl {\n --hx-avatar-size: var(--hx-size-16, 4rem);\n --hx-avatar-font-size: var(--hx-font-size-lg, 1.125rem);\n }\n\n /* ─── Shape Variants ─── */\n\n .avatar--circle {\n --hx-avatar-border-radius: 50%;\n }\n\n .avatar--square {\n --hx-avatar-border-radius: var(--hx-border-radius-md, 0.375rem);\n }\n\n /* ─── Image ─── */\n\n .avatar__image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n\n /* ─── Initials ─── */\n\n .avatar__initials {\n font-family: var(--hx-font-family-sans, sans-serif);\n font-size: var(--hx-avatar-font-size);\n font-weight: var(--hx-font-weight-semibold, 600);\n line-height: 1;\n text-transform: uppercase;\n letter-spacing: var(--hx-letter-spacing-wide, 0.025em);\n user-select: none;\n }\n\n /* ─── Fallback Icon ─── */\n\n .avatar__fallback-icon {\n width: 60%;\n height: 60%;\n color: var(--hx-avatar-color, var(--hx-color-primary-700));\n }\n\n /* ─── Badge Slot ─── */\n\n /* P0-2: Positioned relative to .avatar-wrapper — outside the overflow: hidden on .avatar. */\n .avatar__badge {\n position: absolute;\n bottom: 0;\n right: 0;\n }\n\n /* P2-2: Hide the badge wrapper when no slot content is present, preserving slotchange detection. */\n .avatar__badge--hidden {\n display: none;\n }\n\n /* P1-B: Windows High Contrast Mode — avatar background is stripped by the system,\n leaving no visual boundary. Restore a visible border, explicit foreground, and\n background so the avatar container, initials, and fallback icon all remain\n perceivable at any contrast level.\n WCAG 1.4.11 Non-text Contrast (Level AA). */\n @media (forced-colors: active) {\n .avatar {\n forced-color-adjust: none;\n border: 2px solid ButtonText;\n background-color: Canvas;\n color: CanvasText;\n }\n\n .avatar__initials {\n color: CanvasText;\n }\n\n .avatar__fallback-icon {\n color: CanvasText;\n }\n\n .avatar__image {\n forced-color-adjust: auto;\n }\n }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixAvatarStyles } from './hx-avatar.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A user avatar component that displays an image, initials, or a fallback icon.\n * Supports a badge slot for status indicator overlays.\n *\n * @summary User avatar with image, initials, and fallback icon support for healthcare applications.\n *\n * @tag hx-avatar\n *\n * @slot - Default slot for custom avatar content. Overrides src and initials when slotted content is present.\n * @slot badge - Status indicator overlay, positioned at the bottom-right of the avatar container.\n *\n * @csspart avatar - The outer container element.\n * @csspart image - The img element shown when src is provided.\n * @csspart initials - The initials text span shown as a fallback.\n * @csspart fallback-icon - The SVG person silhouette shown when no src or initials are available.\n * @csspart badge - The badge slot container.\n *\n * @cssprop [--hx-avatar-size] - Computed width and height from the size variant.\n * @cssprop [--hx-avatar-border-radius] - Circle = 50%, Square = var(--hx-border-radius-md).\n * @cssprop [--hx-avatar-bg=var(--hx-color-primary-100)] - Background color of the avatar container.\n * @cssprop [--hx-avatar-color=var(--hx-color-primary-700)] - Text and icon color inside the avatar.\n * @cssprop [--hx-avatar-font-size] - Font size for the initials text, set per size variant.\n */\n@customElement('hx-avatar')\nexport class HelixAvatar extends LitElement {\n static override styles = [tokenStyles, helixAvatarStyles];\n\n /**\n * Image URL. When provided and successfully loaded, displays the image.\n * @attr src\n */\n @property({ type: String })\n src: string | undefined = undefined;\n\n /**\n * Accessible label for the image. Required when `src` is provided.\n * Used as the container's aria-label in image mode.\n * @attr alt\n */\n @property({ type: String })\n alt = '';\n\n /**\n * Human-readable accessible name for non-image states (initials, fallback icon).\n * In healthcare contexts, provide the full person name (e.g., \"Dr. Jane Doe\") rather than\n * relying on raw initials, which screen readers announce as individual letters.\n * When set, takes precedence over raw initials and the generic \"Avatar\" fallback.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Fallback initials text displayed when no image is available.\n * @attr initials\n */\n @property({ type: String })\n initials = '';\n\n /**\n * Size variant of the avatar.\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n /**\n * Shape variant of the avatar.\n * @attr shape\n */\n @property({ type: String, reflect: true })\n shape: 'circle' | 'square' = 'circle';\n\n /**\n * Tracks whether the image failed to load, triggering the fallback chain.\n * @internal\n */\n @state()\n private _imgError = false;\n\n /**\n * Tracks whether the default slot has assigned content.\n * @internal\n */\n @state()\n private _hasDefaultSlot = false;\n\n /**\n * Tracks whether the badge slot has assigned content.\n * @internal\n */\n @state()\n private _hasBadgeSlot = false;\n\n // ─── Lifecycle ───\n\n // P1-A / P2-B: Use willUpdate() instead of updated() for property validation\n // and derived state. willUpdate() runs before render() and does not schedule\n // a second update cycle when @state() properties are mutated.\n override willUpdate(changedProperties: PropertyValues<this>): void {\n // P0-1: Reset image error state when src changes so a new valid src renders correctly.\n if (changedProperties.has('src')) {\n this._imgError = false;\n }\n\n // P1-2: Warn when src is provided without alt — silent accessibility failure in healthcare UIs.\n if (changedProperties.has('src') || changedProperties.has('alt')) {\n if (this.src && !this.alt) {\n devWarn(\n 'hx-avatar',\n 'Accessibility: \"alt\" attribute is required when \"src\" is provided. ' +\n 'Without alt text, screen readers announce a non-descriptive label. ' +\n 'Add alt=\"Full name or description\" to your hx-avatar element.',\n );\n }\n }\n\n // P2-A: Warn when initials are used without label — screen readers announce\n // raw initials as individual letters (e.g., \"J D\") instead of a name.\n if (changedProperties.has('initials') || changedProperties.has('label')) {\n if (this.initials && !this.label) {\n devWarn(\n 'hx-avatar',\n 'Accessibility: \"label\" attribute is recommended when \"initials\" is provided. ' +\n 'Without label, screen readers announce raw initials as individual letters. ' +\n 'Add label=\"Full Name\" to your hx-avatar element.',\n );\n }\n }\n\n // P2-1: Warn when invalid size or shape attribute values are used (e.g., from Twig templates).\n const validSizes: ReadonlyArray<string> = ['xs', 'sm', 'md', 'lg', 'xl'];\n if (changedProperties.has('size') && !validSizes.includes(this.size)) {\n devWarn(\n 'hx-avatar',\n `Invalid hx-size=\"${String(this.size)}\". Valid values: xs, sm, md, lg, xl. Rendering with \"md\".`,\n );\n }\n const validShapes: ReadonlyArray<string> = ['circle', 'square'];\n if (changedProperties.has('shape') && !validShapes.includes(this.shape)) {\n devWarn(\n 'hx-avatar',\n `Invalid shape=\"${String(this.shape)}\". Valid values: circle, square. Rendering with \"circle\".`,\n );\n }\n }\n\n // ─── Slot Change Handling ───\n\n /** @internal */\n private _handleSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n this._hasDefaultSlot = nodes.some((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) return true;\n if (node.nodeType === Node.TEXT_NODE) {\n return (node.textContent ?? '').trim().length > 0;\n }\n return false;\n });\n }\n\n /** @internal */\n private _handleBadgeSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n this._hasBadgeSlot = nodes.some((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) return true;\n if (node.nodeType === Node.TEXT_NODE) {\n return (node.textContent ?? '').trim().length > 0;\n }\n return false;\n });\n\n // P2-C: Warn when badge slot content lacks an accessible name.\n // A plain <span class=\"dot\"></span> badge is invisible to screen readers.\n if (this._hasBadgeSlot) {\n const hasAccessibleName = nodes.some((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n const el = node as Element;\n return (\n el.hasAttribute('aria-label') ||\n el.hasAttribute('aria-labelledby') ||\n !!el.getAttribute('role')\n );\n }\n return false;\n });\n if (!hasAccessibleName) {\n devWarn(\n 'hx-avatar',\n 'Accessibility: badge slot content should have an accessible name ' +\n '(aria-label, role, etc.). Without it, the badge is invisible to screen readers.',\n );\n }\n }\n }\n\n // ─── Image Error Handling ───\n\n /** @internal */\n private _handleImgError(): void {\n this._imgError = true;\n }\n\n // ─── Fallback Icon ───\n\n /** @internal */\n private _renderFallbackIcon() {\n return html`\n <svg\n part=\"fallback-icon\"\n class=\"avatar__fallback-icon\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n fill=\"currentColor\"\n >\n <path\n d=\"M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z\"\n />\n </svg>\n `;\n }\n\n // ─── Render ───\n\n override render() {\n const src = this.src;\n const showSlot = this._hasDefaultSlot;\n const showImage = !showSlot && !!src && !this._imgError;\n const showInitials = !showSlot && !showImage && !!this.initials.trim();\n const showFallback = !showSlot && !showImage && !showInitials;\n\n // P1-1 / P1-7: Use label property for human-readable accessible name in non-image states.\n const ariaLabel = showImage\n ? this.alt || this.label || 'Avatar'\n : showInitials\n ? this.label || this.initials\n : this.label || 'Avatar';\n\n // P2-1: Safe class fallback for invalid attribute values supplied via HTML/Twig.\n const validSizes: ReadonlyArray<string> = ['xs', 'sm', 'md', 'lg', 'xl'];\n const validShapes: ReadonlyArray<string> = ['circle', 'square'];\n const sizeClass = validSizes.includes(this.size) ? this.size : 'md';\n const shapeClass = validShapes.includes(this.shape) ? this.shape : 'circle';\n\n const classes = {\n avatar: true,\n [`avatar--${sizeClass}`]: true,\n [`avatar--${shapeClass}`]: true,\n };\n\n // P2-2: Badge wrapper is hidden (not removed) when empty so slotchange detection still works.\n const badgeClasses = {\n avatar__badge: true,\n 'avatar__badge--hidden': !this._hasBadgeSlot,\n };\n\n return html`\n <div class=\"avatar-wrapper\">\n <div\n part=\"avatar\"\n class=${classMap(classes)}\n role=${showSlot ? nothing : 'img'}\n aria-label=${showSlot ? nothing : ariaLabel}\n >\n <slot @slotchange=${this._handleSlotChange}></slot>\n ${showImage && src\n ? html`<img\n part=\"image\"\n class=\"avatar__image\"\n src=${src}\n alt=${this.alt}\n aria-hidden=\"true\"\n loading=\"lazy\"\n @error=${this._handleImgError}\n />`\n : nothing}\n ${showInitials\n ? html`<span part=\"initials\" class=\"avatar__initials\">${this.initials.trim()}</span>`\n : nothing}\n ${showFallback ? this._renderFallbackIcon() : nothing}\n </div>\n <span part=\"badge\" class=${classMap(badgeClasses)}>\n <slot name=\"badge\" @slotchange=${this._handleBadgeSlotChange}></slot>\n </span>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-avatar': HelixAvatar;\n }\n}\n"],"names":["helixAvatarStyles","css","HelixAvatar","LitElement","changedProperties","validSizes","devWarn","validShapes","e","nodes","node","el","html","src","showSlot","showImage","showInitials","showFallback","ariaLabel","sizeClass","shapeClass","classes","badgeClasses","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { css as
|
|
1
|
+
import { css as c, html as l, nothing as n, LitElement as p } from "lit";
|
|
2
2
|
import { property as o, customElement as x } from "lit/decorators.js";
|
|
3
3
|
import { classMap as d } from "lit/directives/class-map.js";
|
|
4
4
|
import { ifDefined as v } from "lit/directives/if-defined.js";
|
|
5
5
|
import { tokenStyles as f } from "@helixui/tokens/lit";
|
|
6
6
|
import { d as g } from "./dev-warn-YlwPHjtX.js";
|
|
7
7
|
import { m } from "./aria-delegation-CBP9eQ0M.js";
|
|
8
|
-
const y =
|
|
8
|
+
const y = c`
|
|
9
9
|
:host {
|
|
10
10
|
display: inline-block;
|
|
11
11
|
}
|
|
@@ -267,13 +267,47 @@ const y = p`
|
|
|
267
267
|
.button__label {
|
|
268
268
|
flex: 1 1 auto;
|
|
269
269
|
}
|
|
270
|
+
|
|
271
|
+
/* ─── High Contrast Mode (forced-colors) ─── */
|
|
272
|
+
|
|
273
|
+
@media (forced-colors: active) {
|
|
274
|
+
.button {
|
|
275
|
+
/* Ensure button outline is visible in Windows High Contrast mode.
|
|
276
|
+
ButtonText/ButtonFace are system colors recognized by the browser. */
|
|
277
|
+
forced-color-adjust: none;
|
|
278
|
+
background-color: ButtonFace;
|
|
279
|
+
color: ButtonText;
|
|
280
|
+
border: 2px solid ButtonText;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.button:focus-visible {
|
|
284
|
+
outline: 3px solid Highlight;
|
|
285
|
+
outline-offset: 2px;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.button[disabled] {
|
|
289
|
+
background-color: ButtonFace;
|
|
290
|
+
color: GrayText;
|
|
291
|
+
border-color: GrayText;
|
|
292
|
+
opacity: 1;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
:host([disabled]) {
|
|
296
|
+
opacity: 1;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.button--loading .button__spinner {
|
|
300
|
+
/* Ensure spinner is visible in HCM */
|
|
301
|
+
forced-color-adjust: auto;
|
|
302
|
+
}
|
|
303
|
+
}
|
|
270
304
|
`;
|
|
271
305
|
var _ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, e = (r, a, s, h) => {
|
|
272
|
-
for (var i = h > 1 ? void 0 : h ? w(a, s) : a,
|
|
273
|
-
(
|
|
306
|
+
for (var i = h > 1 ? void 0 : h ? w(a, s) : a, u = r.length - 1, b; u >= 0; u--)
|
|
307
|
+
(b = r[u]) && (i = (h ? b(a, s, i) : b(i)) || i);
|
|
274
308
|
return h && i && _(a, s, i), i;
|
|
275
309
|
};
|
|
276
|
-
let t = class extends m(
|
|
310
|
+
let t = class extends m(p) {
|
|
277
311
|
constructor() {
|
|
278
312
|
super(), this.variant = "primary", this.size = "md", this.disabled = !1, this.loading = !1, this.type = "button", this.href = void 0, this.target = void 0, this.name = void 0, this.value = void 0, this.full = !1, this.inverted = !1, this._internals = this.attachInternals();
|
|
279
313
|
}
|
|
@@ -301,8 +335,10 @@ let t = class extends m(c) {
|
|
|
301
335
|
!(r.target.assignedNodes({ flatten: !0 }).length > 0) && this.ariaLabel;
|
|
302
336
|
}
|
|
303
337
|
// ─── Event Handling ───
|
|
304
|
-
/**
|
|
305
|
-
|
|
338
|
+
/**
|
|
339
|
+
* @private
|
|
340
|
+
* @internal
|
|
341
|
+
*/
|
|
306
342
|
_handleClick(r) {
|
|
307
343
|
if (this.disabled || this.loading) {
|
|
308
344
|
r.preventDefault(), r.stopPropagation();
|
|
@@ -317,8 +353,10 @@ let t = class extends m(c) {
|
|
|
317
353
|
), this.href === void 0 && this.type === "submit" && this._internals.form ? (this.name !== void 0 && this.value !== void 0 && this._internals.setFormValue(this.value), this._internals.form.requestSubmit()) : this.href === void 0 && this.type === "reset" && this._internals.form && this._internals.form.reset();
|
|
318
354
|
}
|
|
319
355
|
// ─── Render Helpers ───
|
|
320
|
-
/**
|
|
321
|
-
|
|
356
|
+
/**
|
|
357
|
+
* @private
|
|
358
|
+
* @internal
|
|
359
|
+
*/
|
|
322
360
|
_renderSpinner() {
|
|
323
361
|
return l`
|
|
324
362
|
<svg
|
|
@@ -347,8 +385,10 @@ let t = class extends m(c) {
|
|
|
347
385
|
</svg>
|
|
348
386
|
`;
|
|
349
387
|
}
|
|
350
|
-
/**
|
|
351
|
-
|
|
388
|
+
/**
|
|
389
|
+
* @private
|
|
390
|
+
* @internal
|
|
391
|
+
*/
|
|
352
392
|
_renderInner() {
|
|
353
393
|
return l`
|
|
354
394
|
${this.loading ? this._renderSpinner() : n}
|
|
@@ -450,4 +490,4 @@ t = e([
|
|
|
450
490
|
export {
|
|
451
491
|
t as H
|
|
452
492
|
};
|
|
453
|
-
//# sourceMappingURL=hx-button-
|
|
493
|
+
//# sourceMappingURL=hx-button-CC1YH9RZ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hx-button-CC1YH9RZ.js","sources":["../../src/components/hx-button/hx-button.styles.ts","../../src/components/hx-button/hx-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixButtonStyles = css`\n :host {\n display: inline-block;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n :host([full]) {\n display: block;\n width: 100%;\n }\n\n :host([full]) .button {\n width: 100%;\n justify-content: center;\n }\n\n /* ─── Base Button ─── */\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-2, 0.5rem);\n border: var(--hx-border-width-thin, 1px) solid var(--hx-button-border-color, transparent);\n border-radius: var(--hx-button-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-button-bg, var(--hx-color-primary-500, #2563eb));\n color: var(--hx-button-color, var(--hx-color-neutral-0, #ffffff));\n font-family: var(--hx-button-font-family, var(--hx-font-family-sans, sans-serif));\n font-weight: var(--hx-button-font-weight, var(--hx-font-weight-semibold, 600));\n line-height: var(--hx-line-height-tight, 1.25);\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n color var(--hx-transition-fast, 150ms ease),\n border-color var(--hx-transition-fast, 150ms ease),\n box-shadow var(--hx-transition-fast, 150ms ease);\n text-decoration: none;\n white-space: nowrap;\n user-select: none;\n -webkit-user-select: none;\n }\n\n .button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-button-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .button:hover {\n filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n }\n\n .button:active {\n filter: brightness(var(--hx-filter-brightness-active, 0.8));\n }\n\n /* ─── Size Variants ─── */\n\n .button--sm {\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n min-height: var(--hx-size-8, 2rem);\n }\n\n .button--md {\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n font-size: var(--hx-font-size-md, 1rem);\n min-height: var(--hx-size-10, 2.5rem);\n }\n\n .button--lg {\n padding: var(--hx-space-3, 0.75rem) var(--hx-space-6, 1.5rem);\n font-size: var(--hx-font-size-lg, 1.125rem);\n min-height: var(--hx-size-12, 3rem);\n }\n\n /* ─── Style Variants ─── */\n\n .button--primary {\n --hx-button-bg: var(--hx-color-primary-500);\n --hx-button-color: var(--hx-color-neutral-0);\n --hx-button-border-color: transparent;\n }\n\n .button--secondary {\n --hx-button-bg: transparent;\n --hx-button-color: var(--hx-color-primary-500);\n --hx-button-border-color: var(--hx-color-primary-500);\n }\n\n .button--secondary:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-50));\n }\n\n .button--tertiary {\n --hx-button-bg: var(--hx-color-neutral-100);\n --hx-button-color: var(--hx-color-neutral-900);\n --hx-button-border-color: transparent;\n }\n\n .button--tertiary:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-200));\n }\n\n .button--danger {\n --hx-button-bg: var(--hx-color-error-500);\n --hx-button-color: var(--hx-color-neutral-0);\n --hx-button-border-color: transparent;\n }\n\n .button--danger:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-error-600));\n }\n\n .button--ghost {\n --hx-button-bg: transparent;\n --hx-button-color: var(--hx-color-primary-500);\n --hx-button-border-color: transparent;\n }\n\n .button--ghost:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-100));\n }\n\n .button--outline {\n --hx-button-bg: transparent;\n --hx-button-color: var(--hx-color-neutral-900);\n --hx-button-border-color: var(--hx-color-neutral-300);\n }\n\n .button--outline:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-50));\n }\n\n .button--primary:hover {\n --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-500));\n }\n\n /* ─── Disabled ─── */\n\n /* Note: opacity is applied on :host([disabled]) above — do NOT add opacity here.\n Stacking opacity on both :host and .button[disabled] would multiply to 0.25. */\n .button[disabled] {\n cursor: not-allowed;\n }\n\n /* ─── Loading State ─── */\n\n .button--loading {\n position: relative;\n cursor: wait;\n }\n\n .button__spinner {\n width: 1em;\n height: 1em;\n flex-shrink: 0;\n animation: hx-spin var(--hx-duration-spinner, 750ms) linear infinite;\n }\n\n @keyframes hx-spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .button {\n transition: none;\n }\n\n .button__spinner {\n animation: none;\n opacity: var(--hx-opacity-muted, 0.6);\n }\n }\n\n /* ─── Inverted Mode ─── */\n\n /* Override text color and filter-based hover/active for all variants */\n :host([inverted]) .button {\n color: var(--hx-button-inverted-color, var(--hx-color-neutral-0));\n filter: none;\n }\n\n :host([inverted]) .button:hover {\n filter: none;\n }\n\n :host([inverted]) .button:active {\n filter: none;\n }\n\n :host([inverted]) .button:focus-visible {\n outline-color: var(\n --hx-button-inverted-focus-ring-color,\n var(--hx-overlay-white-50, rgba(255, 255, 255, 0.5))\n );\n }\n\n /* Primary inverted — slight transparent white overlay on hover */\n :host([inverted]) .button--primary:hover {\n --hx-button-bg: var(--hx-color-primary-400, #3b82f6);\n }\n\n /* Secondary inverted — white border and text */\n :host([inverted]) .button--secondary {\n --hx-button-border-color: var(--hx-overlay-white-70, rgba(255, 255, 255, 0.7));\n }\n\n :host([inverted]) .button--secondary:hover {\n --hx-button-bg: var(--hx-overlay-white-15, rgba(255, 255, 255, 0.15));\n }\n\n /* Tertiary inverted */\n :host([inverted]) .button--tertiary {\n --hx-button-bg: var(--hx-overlay-white-15, rgba(255, 255, 255, 0.15));\n --hx-button-border-color: transparent;\n }\n\n :host([inverted]) .button--tertiary:hover {\n --hx-button-bg: var(--hx-overlay-white-25, rgba(255, 255, 255, 0.25));\n }\n\n /* Ghost inverted — transparent base, white hover bg */\n :host([inverted]) .button--ghost {\n --hx-button-bg: transparent;\n --hx-button-border-color: transparent;\n }\n\n :host([inverted]) .button--ghost:hover {\n --hx-button-bg: var(\n --hx-button-inverted-ghost-hover-bg,\n var(--hx-overlay-white-20, rgba(255, 255, 255, 0.2))\n );\n }\n\n /* Outline inverted — white border */\n :host([inverted]) .button--outline {\n --hx-button-border-color: var(--hx-overlay-white-70, rgba(255, 255, 255, 0.7));\n }\n\n :host([inverted]) .button--outline:hover {\n --hx-button-bg: var(--hx-overlay-white-15, rgba(255, 255, 255, 0.15));\n }\n\n /* ─── Prefix / Suffix / Label ─── */\n\n .button__prefix,\n .button__suffix {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n .button__label {\n flex: 1 1 auto;\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n .button {\n /* Ensure button outline is visible in Windows High Contrast mode.\n ButtonText/ButtonFace are system colors recognized by the browser. */\n forced-color-adjust: none;\n background-color: ButtonFace;\n color: ButtonText;\n border: 2px solid ButtonText;\n }\n\n .button:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n\n .button[disabled] {\n background-color: ButtonFace;\n color: GrayText;\n border-color: GrayText;\n opacity: 1;\n }\n\n :host([disabled]) {\n opacity: 1;\n }\n\n .button--loading .button__spinner {\n /* Ensure spinner is visible in HCM */\n forced-color-adjust: auto;\n }\n }\n`;\n","import { LitElement, html, nothing, type TemplateResult, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { mixinDelegatesAria } from '../../mixins/index.js';\nimport { helixButtonStyles } from './hx-button.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A production-grade button component for user interaction. Supports multiple\n * visual variants, sizes, loading state, prefix/suffix slots, anchor rendering,\n * and full ElementInternals form association.\n *\n * @summary Primary interactive element for triggering actions and form submission.\n *\n * @tag hx-button\n *\n * @slot - Default slot for button label text or content.\n * @slot prefix - Icon or content rendered before the label.\n * @slot suffix - Icon or content rendered after the label.\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when\n * the button is clicked and is neither disabled nor loading.\n *\n * @csspart button - The native button or anchor element.\n * @csspart label - The label text wrapper span.\n * @csspart prefix - The prefix slot container span.\n * @csspart suffix - The suffix slot container span.\n * @csspart spinner - The loading spinner SVG element.\n *\n * @cssprop [--hx-button-bg=var(--hx-color-primary-500)] - Button background color.\n * @cssprop [--hx-button-hover-bg] - Hover background color override. When set, overrides the variant default hover background from outside the shadow DOM.\n * @cssprop [--hx-button-color=var(--hx-color-neutral-0)] - Button text color.\n * @cssprop [--hx-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-button-font-family=var(--hx-font-family-sans)] - Button font family.\n * @cssprop [--hx-button-font-weight=var(--hx-font-weight-semibold)] - Button font weight.\n * @cssprop [--hx-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n *\n * @cssprop [--hx-button-inverted-color=#ffffff] - Text color when inverted.\n * @cssprop [--hx-button-inverted-ghost-hover-bg=rgba(255,255,255,0.15)] - Ghost hover bg when inverted.\n * @cssprop [--hx-button-inverted-focus-ring-color=rgba(255,255,255,0.5)] - Focus ring color when inverted.\n */\n@customElement('hx-button')\nexport class HelixButton extends mixinDelegatesAria(LitElement) {\n static override styles = [tokenStyles, helixButtonStyles];\n\n // ─── Form Association ───\n\n /** @internal */\n static formAssociated = true;\n\n /** @internal */\n private _internals: ElementInternals;\n\n constructor() {\n super();\n /** @internal */\n this._internals = this.attachInternals();\n }\n\n // ─── Public Properties ───\n\n /**\n * Visual style variant of the button.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost' | 'outline' = 'primary';\n\n /**\n * Size of the button.\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Whether the button is disabled. Prevents all interaction and form actions.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Whether the button is in a loading state. Shows spinner, prevents interaction,\n * and sets aria-busy. Does not set the disabled attribute.\n * @attr loading\n */\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /**\n * The type attribute for the underlying button element. Ignored when href is set.\n * @attr type\n */\n @property({ type: String })\n type: 'button' | 'submit' | 'reset' = 'button';\n\n /**\n * When set, renders an anchor element instead of a button.\n * @attr href\n */\n @property({ type: String })\n href: string | undefined = undefined;\n\n /**\n * Anchor target attribute. Only used when href is set.\n * @attr target\n */\n @property({ type: String })\n target: string | undefined = undefined;\n\n /**\n * Form field name submitted via ElementInternals.setFormValue on submit.\n * @attr name\n */\n @property({ type: String })\n name: string | undefined = undefined;\n\n /**\n * Form field value submitted via ElementInternals.setFormValue on submit.\n * @attr value\n */\n @property({ type: String })\n value: string | undefined = undefined;\n\n /**\n * When true, the button stretches to fill its container width.\n * Sets the host to `display: block` and the inner element to `width: 100%`.\n * @attr full\n */\n @property({ type: Boolean, reflect: true })\n full = false;\n\n /**\n * When true, flips button colors for placement on dark or gradient backgrounds.\n * Forces text to white and adjusts hover/focus ring colors across all variants.\n * @attr inverted\n */\n @property({ type: Boolean, reflect: true })\n inverted = false;\n\n // ─── Form API ───\n\n /** Returns the associated form element, if any. */\n get form(): HTMLFormElement | null {\n return this._internals.form;\n }\n\n /** @internal */\n formDisabledCallback(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Lifecycle ───\n\n /** @internal */\n private static readonly _VALID_VARIANTS = [\n 'primary',\n 'secondary',\n 'tertiary',\n 'danger',\n 'ghost',\n 'outline',\n ] as const;\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (changedProperties.has('variant')) {\n const validVariants: string[] = [...HelixButton._VALID_VARIANTS];\n if (!validVariants.includes(this.variant)) {\n devWarn(\n 'hx-button',\n `Invalid variant \"${this.variant}\". Expected one of: ${validVariants.join(', ')}. Clamping to \"primary\".`,\n );\n this.variant = 'primary';\n }\n }\n }\n\n // ─── Slot Handlers ───\n\n /** @internal */\n private _handleDefaultSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const hasContent = slot.assignedNodes({ flatten: true }).length > 0;\n if (!hasContent && !this.ariaLabel) {\n devWarn(\n 'hx-button',\n 'hx-button has no label and no aria-label — button will have no accessible name.',\n );\n }\n }\n\n // ─── Event Handling ───\n\n /**\n * @private\n * @internal\n */\n private _handleClick(e: MouseEvent): void {\n if (this.disabled || this.loading) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n /**\n * Dispatched when the button is clicked.\n * @event hx-click\n */\n this.dispatchEvent(\n new CustomEvent<{ originalEvent: MouseEvent }>('hx-click', {\n bubbles: true,\n composed: true,\n detail: { originalEvent: e },\n }),\n );\n\n // Handle form submission/reset if form-associated and not in anchor mode\n if (this.href === undefined && this.type === 'submit' && this._internals.form) {\n if (this.name !== undefined && this.value !== undefined) {\n this._internals.setFormValue(this.value);\n }\n this._internals.form.requestSubmit();\n } else if (this.href === undefined && this.type === 'reset' && this._internals.form) {\n this._internals.form.reset();\n }\n }\n\n // ─── Render Helpers ───\n\n /**\n * @private\n * @internal\n */\n private _renderSpinner(): TemplateResult {\n return html`\n <svg\n class=\"button__spinner\"\n part=\"spinner\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <circle\n class=\"button__spinner-track\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n opacity=\"0.3\"\n />\n <path\n class=\"button__spinner-arc\"\n d=\"M12 2a10 10 0 0 1 10 10\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n />\n </svg>\n `;\n }\n\n /**\n * @private\n * @internal\n */\n private _renderInner(): TemplateResult {\n return html`\n ${this.loading ? this._renderSpinner() : nothing}\n <span part=\"prefix\" class=\"button__prefix\">\n <slot name=\"prefix\"></slot>\n </span>\n <span part=\"label\" class=\"button__label\">\n <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n </span>\n <span part=\"suffix\" class=\"button__suffix\">\n <slot name=\"suffix\"></slot>\n </span>\n `;\n }\n\n // ─── Render ───\n\n override render() {\n const classes = {\n button: true,\n [`button--${this.variant}`]: true,\n [`button--${this.size}`]: true,\n 'button--loading': this.loading,\n };\n\n if (this.href !== undefined) {\n return html`\n <a\n part=\"button\"\n class=${classMap(classes)}\n href=${this.disabled || this.loading ? nothing : ifDefined(this.href)}\n target=${ifDefined(this.target)}\n rel=${this.target === '_blank' ? 'noopener noreferrer' : nothing}\n aria-label=${this.ariaLabel ?? nothing}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-busy=${this.loading ? 'true' : nothing}\n tabindex=${this.disabled ? '-1' : nothing}\n @click=${this._handleClick}\n >\n ${this._renderInner()}\n </a>\n `;\n }\n\n return html`\n <button\n part=\"button\"\n class=${classMap(classes)}\n ?disabled=${this.disabled}\n type=${this.type}\n aria-label=${this.ariaLabel ?? nothing}\n aria-busy=${this.loading ? 'true' : nothing}\n @click=${this._handleClick}\n >\n ${this._renderInner()}\n </button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-button': HelixButton;\n }\n}\n"],"names":["helixButtonStyles","css","HelixButton","mixinDelegatesAria","LitElement","disabled","changedProperties","validVariants","devWarn","e","html","nothing","classes","classMap","ifDefined","tokenStyles","__decorateClass","property","customElement"],"mappings":";;;;;;;AAEO,MAAMA,IAAoBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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"}
|