@sken-ds/primitives 0.4.6 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/dist/catalog-y40FMic1-DY2BFupW.js +153 -0
  2. package/dist/catalog-y40FMic1-DY2BFupW.js.map +1 -0
  3. package/dist/{decorate-D4FKzyDw.js → decorate-C1e2sg49.js} +1 -1
  4. package/dist/index.js +16 -12
  5. package/dist/ix-bridge.css +53 -191
  6. package/dist/primitives.css +2 -0
  7. package/dist/rolldown-runtime-BRfZIaNm.js +17 -0
  8. package/dist/sken-button.js +3 -3
  9. package/dist/sken-button.js.map +1 -1
  10. package/dist/sken-checkbox.js +14 -4
  11. package/dist/sken-checkbox.js.map +1 -1
  12. package/dist/sken-combobox-group.js +1 -1
  13. package/dist/sken-combobox-group.js.map +1 -1
  14. package/dist/sken-combobox-item.js +1 -1
  15. package/dist/sken-combobox-item.js.map +1 -1
  16. package/dist/sken-combobox.js +120 -99
  17. package/dist/sken-combobox.js.map +1 -1
  18. package/dist/{sken-datatable-CEXcvhM-.js → sken-datatable-DSXSyrNf.js} +219 -251
  19. package/dist/sken-datatable-DSXSyrNf.js.map +1 -0
  20. package/dist/sken-datatable.js +1 -1
  21. package/dist/sken-date-picker.js +1 -1
  22. package/dist/sken-date-picker.js.map +1 -1
  23. package/dist/sken-dialog.js +251 -2
  24. package/dist/sken-dialog.js.map +1 -0
  25. package/dist/sken-filter-chip.js +1 -1
  26. package/dist/sken-filter-chip.js.map +1 -1
  27. package/dist/sken-input.js +69 -44
  28. package/dist/sken-input.js.map +1 -1
  29. package/dist/sken-layout-region.js +1 -1
  30. package/dist/sken-layout-region.js.map +1 -1
  31. package/dist/sken-layout.js +35 -32
  32. package/dist/sken-layout.js.map +1 -1
  33. package/dist/sken-nav-group.js +306 -0
  34. package/dist/sken-nav-group.js.map +1 -0
  35. package/dist/sken-nav-item.js +224 -0
  36. package/dist/sken-nav-item.js.map +1 -0
  37. package/dist/sken-nav.js +233 -0
  38. package/dist/sken-nav.js.map +1 -0
  39. package/dist/sken-number-input.js +15 -7
  40. package/dist/sken-number-input.js.map +1 -1
  41. package/dist/sken-switch.js +27 -7
  42. package/dist/sken-switch.js.map +1 -1
  43. package/dist/sken-textarea.js +108 -52
  44. package/dist/sken-textarea.js.map +1 -1
  45. package/dist/sken-tooltip.js +70 -0
  46. package/dist/sken-tooltip.js.map +1 -0
  47. package/package.json +35 -16
  48. package/dist/directive-BcLtPdVO.js +0 -263
  49. package/dist/directive-BcLtPdVO.js.map +0 -1
  50. package/dist/sken-datatable-CEXcvhM-.js.map +0 -1
  51. package/dist/sken-dialog-BvRZxwSk.js +0 -258
  52. package/dist/sken-dialog-BvRZxwSk.js.map +0 -1
package/dist/ix-bridge.css CHANGED
@@ -60,6 +60,10 @@
60
60
  * land.
61
61
  * ───────────────────────────────────────────────────────────── */
62
62
 
63
+ sken-layout {
64
+ --sken-layout-topbar-height: 4rem;
65
+ }
66
+
63
67
  /* ── Universal iX defaults (no theme) ─────────────────────────
64
68
  * These `--ix-*` properties are iX's "own" tokens, separate
65
69
  * from the `--theme-*` palette. iX reads them at the shadow
@@ -191,23 +195,36 @@ html[data-theme='dark'] {
191
195
  * above. Replace with a Sken token once UX ships it. */
192
196
  --sken-bridge-ix-scrollbar-thumb-hover: #5a7ba8;
193
197
  }
194
- html[data-theme='hc-light'] {
195
- --sken-bridge-ix-select-icon: var(--sken-foreground);
196
- --sken-bridge-ix-primary: var(--sken-foreground);
197
- --sken-bridge-ix-scrollbar-track: var(--sken-background);
198
- --sken-bridge-ix-scrollbar-track-hover: var(--sken-background);
199
- --sken-bridge-ix-scrollbar-track-border: var(--sken-background);
200
- --sken-bridge-ix-scrollbar-thumb: var(--sken-foreground);
201
- --sken-bridge-ix-scrollbar-thumb-hover: var(--sken-foreground);
202
- }
203
- html[data-theme='hc-dark'] {
204
- --sken-bridge-ix-select-icon: var(--sken-background);
205
- --sken-bridge-ix-primary: var(--sken-background);
206
- --sken-bridge-ix-scrollbar-track: var(--sken-foreground);
207
- --sken-bridge-ix-scrollbar-track-hover: var(--sken-foreground);
208
- --sken-bridge-ix-scrollbar-track-border: var(--sken-foreground);
209
- --sken-bridge-ix-scrollbar-thumb: var(--sken-background);
210
- --sken-bridge-ix-scrollbar-thumb-hover: var(--sken-background);
198
+
199
+ /* ── Tooltip (ix-tooltip / sken-tooltip) ──────────────────────
200
+ * The iX tooltip stylesheet references `--theme-tootlip--background`
201
+ * (note the upstream typo: "tootlip" instead of "tooltip")
202
+ * which iX aliases to `--theme-tooltip--background` inside a
203
+ * `[data-ix-theme]` selector the consumer has to set. We do
204
+ * not want a vendor data-attribute requirement on the host
205
+ * page, so we declare both spellings here, per theme. The
206
+ * typo entry is intentional; do not "fix" it without checking
207
+ * that the iX 5 version we depend on still ships the typo.
208
+ * (Last verified: iX 5.2.0 — both spellings present.) */
209
+ html[data-theme='light'] ix-tooltip,
210
+ html[data-theme='light'] sken-tooltip {
211
+ --theme-tooltip--background: var(--sken-foreground);
212
+ --theme-tootlip--background: var(--sken-foreground);
213
+ /* iX's tooltip stylesheet reads `color: var(--theme-color-std-text)`,
214
+ * not `--theme-tooltip--color`. Override the std-text token
215
+ * here so the contrast against the dark tooltip background
216
+ * is right. */
217
+ --theme-color-std-text: var(--sken-background);
218
+ --theme-tooltip--border-color: var(--sken-foreground);
219
+ /* Border-radius is applied by the primitive directly to the
220
+ * shadow-internal `.tooltip-container` (the vendor hard-codes
221
+ * the radius on that node, not on the host). The primitive
222
+ * reads the `radius` prop and writes the resolved token
223
+ * reference to that node, so a theme-level override of
224
+ * `--sken-{sm|md|lg|full}` (or of `--sken-tooltip-radius`)
225
+ * still applies because `style.setProperty('border-radius',
226
+ * 'var(--sken-sm)')` resolves the var() at the container
227
+ * itself, not at the host. */
211
228
  }
212
229
 
213
230
  /* ── Theme: light ──────────────────────────────────────────── */
@@ -339,6 +356,25 @@ html[data-theme='light'] sken-date-picker {
339
356
  }
340
357
 
341
358
  /* ── Theme: dark ───────────────────────────────────────────── */
359
+ /* Same tooltip override as the light block — see the comment
360
+ * there for the `--theme-tootlip--background` typo rationale.
361
+ *
362
+ * The tooltip background and text are *always* the
363
+ * foreground/background pair in inverse order, regardless of
364
+ * the host theme. In dark the foreground is light, so the
365
+ * tooltip pops as a bright card with dark text. This matches
366
+ * Material, Carbon, and the rest of the Sken tooltip family:
367
+ * the tooltip is a "tone-flipped" surface that always
368
+ * contrasts with the host. */
369
+ html[data-theme='dark'] ix-tooltip,
370
+ html[data-theme='dark'] sken-tooltip {
371
+ --theme-tooltip--background: var(--sken-foreground);
372
+ --theme-tootlip--background: var(--sken-foreground);
373
+ --theme-color-std-text: var(--sken-background);
374
+ --theme-tooltip--border-color: var(--sken-foreground);
375
+ /* See the comment in the light block above about the
376
+ * border-radius handling. */
377
+ }
342
378
  html[data-theme='dark'] ix-select,
343
379
  html[data-theme='dark'] ix-date-input,
344
380
  html[data-theme='dark'] sken-combobox,
@@ -432,177 +468,3 @@ html[data-theme='dark'] sken-date-picker {
432
468
  --theme-select-list-item-hint--color--active: var(--sken-muted-foreground);
433
469
  --theme-select-list-item-hint--color--hover: var(--sken-muted-foreground);
434
470
  }
435
-
436
- /* ── Theme: hc-light (high contrast light) ────────────────── */
437
- html[data-theme='hc-light'] ix-select,
438
- html[data-theme='hc-light'] ix-date-input,
439
- html[data-theme='hc-light'] sken-combobox,
440
- html[data-theme='hc-light'] sken-date-picker {
441
- --theme-color-1: var(--sken-background);
442
- --theme-color-2: var(--sken-background);
443
- --theme-color-3: var(--sken-background);
444
- --theme-color-4: var(--sken-foreground);
445
- --theme-color-5: var(--sken-foreground);
446
- --theme-color-6: var(--sken-foreground);
447
- --theme-color-7: var(--sken-foreground);
448
- --theme-color-8: var(--sken-foreground);
449
- --theme-color-std-text: var(--sken-foreground);
450
- --theme-color-soft-text: var(--sken-foreground);
451
- --theme-color-weak-text: var(--sken-foreground);
452
- --theme-color-inv-std-text: var(--sken-background);
453
- --theme-color-primary: var(--sken-foreground);
454
- --theme-color-primary--hover: var(--sken-foreground);
455
- --theme-color-primary--active: var(--sken-foreground);
456
- --theme-color-primary--contrast: var(--sken-background);
457
- --theme-color-dynamic: var(--sken-foreground);
458
- --theme-color-dynamic--hover: var(--sken-foreground);
459
- --theme-color-dynamic--active: var(--sken-foreground);
460
- --theme-color-dynamic-alt: var(--sken-foreground);
461
- --theme-color-secondary: var(--sken-background);
462
- --theme-color-info: var(--sken-foreground);
463
- --theme-color-success: var(--sken-foreground);
464
- --theme-color-warning: var(--sken-foreground);
465
- --theme-color-danger: var(--sken-foreground);
466
- --theme-color-alarm: var(--sken-foreground);
467
- --theme-color-critical: var(--sken-foreground);
468
- --theme-color-ghost: var(--sken-background);
469
- --theme-color-ghost--hover: var(--sken-foreground);
470
- --theme-color-ghost--active: var(--sken-foreground);
471
- --theme-color-neutral: var(--sken-background);
472
- --theme-input--background: var(--sken-background);
473
- --theme-input--color: var(--sken-foreground);
474
- --theme-input--border-color: var(--sken-foreground);
475
- --theme-input-hint--color: var(--sken-foreground);
476
- --theme-input-select-icon--color: var(--sken-bridge-ix-select-icon);
477
- --theme-input-select-icon--color--active: var(--sken-bridge-ix-primary);
478
- --theme-input-select-icon--color--hover: var(--sken-bridge-ix-primary);
479
- --theme-scrollbar-track--background: var(--sken-bridge-ix-scrollbar-track);
480
- --theme-scrollbar-track--background--hover: var(--sken-bridge-ix-scrollbar-track-hover);
481
- --theme-scrollbar-track--border: var(--sken-bridge-ix-scrollbar-track-border);
482
- --theme-scrollbar-thumb--background: var(--sken-bridge-ix-scrollbar-thumb);
483
- --theme-scrollbar-thumb--background--hover: var(--sken-bridge-ix-scrollbar-thumb-hover);
484
- --theme-input--background--hover: var(--sken-background);
485
- --theme-input--border-color--hover: var(--sken-foreground);
486
- --theme-input--border-color--focus: var(--sken-foreground);
487
- --theme-btn-primary--color: var(--sken-background);
488
- --theme-btn-secondary--color: var(--sken-foreground);
489
- --theme-btn-tertiary--color: var(--sken-foreground);
490
- --theme-btn-subtle-primary--color: var(--sken-foreground);
491
- --theme-btn-subtle-secondary--color: var(--sken-foreground);
492
- --theme-btn-subtle-tertiary--color: var(--sken-foreground);
493
- --theme-btn-danger-primary--color: var(--sken-background);
494
- --theme-btn-danger-secondary--color: var(--sken-foreground);
495
- --theme-btn-danger-tertiary--color: var(--sken-foreground);
496
- --theme-menu--background: var(--sken-background);
497
- --theme-menu--border-color: var(--sken-foreground);
498
- --theme-menu-item--color: var(--sken-foreground);
499
- --theme-datepicker-day--background: transparent;
500
- --theme-datepicker-day--background--hover: var(--sken-foreground);
501
- --theme-datepicker-day--background--active: var(--sken-foreground);
502
- --theme-datepicker-day--background--disabled: var(--sken-background);
503
- --theme-datepicker-day--background--selected: var(--sken-foreground);
504
- --theme-datepicker-day--background--selected-hover: var(--sken-foreground);
505
- --theme-datepicker-day--background--selected-active: var(--sken-foreground);
506
- --theme-datepicker-day--color: var(--sken-foreground);
507
- --theme-datepicker-day--color--hover: var(--sken-foreground);
508
- --theme-datepicker-day--color--active: var(--sken-foreground);
509
- --theme-datepicker-day--color--disabled: var(--sken-foreground);
510
- --theme-datepicker-day--color--selected: var(--sken-background);
511
- --theme-datepicker-day--color--selected-hover: var(--sken-background);
512
- --theme-datepicker-weekday--color: var(--sken-foreground);
513
- --theme-datepicker-today--color: var(--sken-foreground);
514
- --theme-datepicker-today--border-color: var(--sken-foreground);
515
- --theme-datepicker-separator--background: var(--sken-foreground);
516
- --theme-select-list-item--background--hover: var(--sken-foreground);
517
- --theme-select-list-item--background--selected: var(--sken-foreground);
518
- --theme-select-list-item-hint--color: var(--sken-foreground);
519
- --theme-select-list-item-hint--color--active: var(--sken-foreground);
520
- --theme-select-list-item-hint--color--hover: var(--sken-foreground);
521
- }
522
-
523
- /* ── Theme: hc-dark (high contrast dark) ───────────────────── */
524
- html[data-theme='hc-dark'] ix-select,
525
- html[data-theme='hc-dark'] ix-date-input,
526
- html[data-theme='hc-dark'] sken-combobox,
527
- html[data-theme='hc-dark'] sken-date-picker {
528
- --theme-color-1: var(--sken-foreground);
529
- --theme-color-2: var(--sken-foreground);
530
- --theme-color-3: var(--sken-foreground);
531
- --theme-color-4: var(--sken-background);
532
- --theme-color-5: var(--sken-background);
533
- --theme-color-6: var(--sken-background);
534
- --theme-color-7: var(--sken-background);
535
- --theme-color-8: var(--sken-background);
536
- --theme-color-std-text: var(--sken-background);
537
- --theme-color-soft-text: var(--sken-background);
538
- --theme-color-weak-text: var(--sken-background);
539
- --theme-color-inv-std-text: var(--sken-foreground);
540
- --theme-color-primary: var(--sken-background);
541
- --theme-color-primary--hover: var(--sken-background);
542
- --theme-color-primary--active: var(--sken-background);
543
- --theme-color-primary--contrast: var(--sken-foreground);
544
- --theme-color-dynamic: var(--sken-background);
545
- --theme-color-dynamic--hover: var(--sken-background);
546
- --theme-color-dynamic--active: var(--sken-background);
547
- --theme-color-dynamic-alt: var(--sken-background);
548
- --theme-color-secondary: var(--sken-foreground);
549
- --theme-color-info: var(--sken-background);
550
- --theme-color-success: var(--sken-background);
551
- --theme-color-warning: var(--sken-background);
552
- --theme-color-danger: var(--sken-background);
553
- --theme-color-alarm: var(--sken-background);
554
- --theme-color-critical: var(--sken-background);
555
- --theme-color-ghost: var(--sken-foreground);
556
- --theme-color-ghost--hover: var(--sken-background);
557
- --theme-color-ghost--active: var(--sken-background);
558
- --theme-color-neutral: var(--sken-foreground);
559
- --theme-input--background: var(--sken-foreground);
560
- --theme-input--color: var(--sken-background);
561
- --theme-input--border-color: var(--sken-background);
562
- --theme-input-hint--color: var(--sken-background);
563
- --theme-input--background--hover: var(--sken-foreground);
564
- --theme-input--border-color--hover: var(--sken-background);
565
- --theme-input--border-color--focus: var(--sken-background);
566
- --theme-input-select-icon--color: var(--sken-bridge-ix-select-icon);
567
- --theme-input-select-icon--color--active: var(--sken-bridge-ix-primary);
568
- --theme-input-select-icon--color--hover: var(--sken-bridge-ix-primary);
569
- --theme-scrollbar-track--background: var(--sken-bridge-ix-scrollbar-track);
570
- --theme-scrollbar-track--background--hover: var(--sken-bridge-ix-scrollbar-track-hover);
571
- --theme-scrollbar-track--border: var(--sken-bridge-ix-scrollbar-track-border);
572
- --theme-scrollbar-thumb--background: var(--sken-bridge-ix-scrollbar-thumb);
573
- --theme-scrollbar-thumb--background--hover: var(--sken-bridge-ix-scrollbar-thumb-hover);
574
- --theme-btn-primary--color: var(--sken-foreground);
575
- --theme-btn-secondary--color: var(--sken-background);
576
- --theme-btn-tertiary--color: var(--sken-background);
577
- --theme-btn-subtle-primary--color: var(--sken-background);
578
- --theme-btn-subtle-secondary--color: var(--sken-background);
579
- --theme-btn-subtle-tertiary--color: var(--sken-background);
580
- --theme-btn-danger-primary--color: var(--sken-foreground);
581
- --theme-btn-danger-secondary--color: var(--sken-background);
582
- --theme-btn-danger-tertiary--color: var(--sken-background);
583
- --theme-menu--background: var(--sken-foreground);
584
- --theme-menu--border-color: var(--sken-background);
585
- --theme-menu-item--color: var(--sken-background);
586
- --theme-datepicker-day--background: transparent;
587
- --theme-datepicker-day--background--hover: var(--sken-background);
588
- --theme-datepicker-day--background--active: var(--sken-background);
589
- --theme-datepicker-day--background--disabled: var(--sken-foreground);
590
- --theme-datepicker-day--background--selected: var(--sken-background);
591
- --theme-datepicker-day--background--selected-hover: var(--sken-background);
592
- --theme-datepicker-day--background--selected-active: var(--sken-background);
593
- --theme-datepicker-day--color: var(--sken-background);
594
- --theme-datepicker-day--color--hover: var(--sken-background);
595
- --theme-datepicker-day--color--active: var(--sken-background);
596
- --theme-datepicker-day--color--disabled: var(--sken-background);
597
- --theme-datepicker-day--color--selected: var(--sken-foreground);
598
- --theme-datepicker-day--color--selected-hover: var(--sken-foreground);
599
- --theme-datepicker-weekday--color: var(--sken-background);
600
- --theme-datepicker-today--color: var(--sken-background);
601
- --theme-datepicker-today--border-color: var(--sken-background);
602
- --theme-datepicker-separator--background: var(--sken-background);
603
- --theme-select-list-item--background--hover: var(--sken-background);
604
- --theme-select-list-item--background--selected: var(--sken-background);
605
- --theme-select-list-item-hint--color: var(--sken-background);
606
- --theme-select-list-item-hint--color--active: var(--sken-background);
607
- --theme-select-list-item-hint--color--hover: var(--sken-background);
608
- }
package/dist/primitives.css ADDED
@@ -0,0 +1,2 @@
1
+ sken-layout{--sken-layout-topbar-height:4rem}ix-select,ix-button,ix-icon-button,ix-input,ix-dropdown,ix-select-item,ix-card,ix-date-input,ix-label,ix-typography,sken-combobox,sken-date-picker{--ix-font-family:var(--sken-family-sans);--ix-color-primary:var(--sken-primary);--ix-color-primary-hover:var(--sken-primary-hover);--ix-color-primary-active:var(--sken-primary-active);--ix-color-primary-contrast:var(--sken-primary-foreground);--ix-color-text:var(--sken-foreground);--ix-color-text-muted:var(--sken-muted-foreground);--ix-color-text-placeholder:var(--sken-muted-foreground);--ix-color-bg-1:var(--sken-card);--ix-color-bg-2:var(--sken-muted);--ix-color-bg-3:var(--sken-background);--ix-color-border:var(--sken-border);--ix-color-border-subtle:var(--sken-border);--ix-color-border-strong:var(--sken-foreground);--ix-color-focus:var(--sken-ring);--ix-border-radius-md:var(--sken-md);--ix-border-radius-sm:var(--sken-sm);--ix-border-radius-lg:var(--sken-lg);font-family:var(--sken-family-sans)}ix-select,ix-button,ix-icon-button,ix-input,ix-card,sken-date-picker{border-radius:var(--sken-md);overflow:hidden}ix-select-item,ix-dropdown-item{border-radius:0}ix-icon{vertical-align:middle;width:1rem;height:1rem;display:inline-block}html[data-theme=light]{--sken-bridge-ix-select-icon:var(--sken-muted-foreground);--sken-bridge-ix-primary:var(--sken-primary);--sken-bridge-ix-scrollbar-track:var(--sken-background);--sken-bridge-ix-scrollbar-track-hover:var(--sken-muted);--sken-bridge-ix-scrollbar-track-border:var(--sken-muted);--sken-bridge-ix-scrollbar-thumb:var(--sken-border);--sken-bridge-ix-scrollbar-thumb-hover:#8a8f99}html[data-theme=dark]{--sken-bridge-ix-select-icon:var(--sken-muted-foreground);--sken-bridge-ix-primary:var(--sken-primary-hover);--sken-bridge-ix-scrollbar-track:var(--sken-card);--sken-bridge-ix-scrollbar-track-hover:var(--sken-border);--sken-bridge-ix-scrollbar-track-border:var(--sken-background);--sken-bridge-ix-scrollbar-thumb:var(--sken-border);--sken-bridge-ix-scrollbar-thumb-hover:#5a7ba8}html[data-theme=light] ix-tooltip,html[data-theme=light] sken-tooltip{--theme-tooltip--background:var(--sken-foreground);--theme-tootlip--background:var(--sken-foreground);--theme-color-std-text:var(--sken-background);--theme-tooltip--border-color:var(--sken-foreground)}html[data-theme=light] ix-select,html[data-theme=light] ix-date-input,html[data-theme=light] sken-combobox,html[data-theme=light] sken-date-picker{--theme-color-1:var(--sken-card);--theme-color-2:var(--sken-muted);--theme-color-3:var(--sken-muted);--theme-color-4:var(--sken-border);--theme-color-5:var(--sken-border);--theme-color-6:var(--sken-foreground);--theme-color-7:var(--sken-muted-foreground);--theme-color-8:var(--sken-muted-foreground);--theme-color-std-text:var(--sken-foreground);--theme-color-soft-text:var(--sken-muted-foreground);--theme-color-weak-text:var(--sken-muted-foreground);--theme-color-inv-std-text:var(--sken-primary-foreground);--theme-color-primary:var(--sken-primary);--theme-color-primary--hover:var(--sken-primary-hover);--theme-color-primary--active:var(--sken-primary-active);--theme-color-primary--contrast:var(--sken-primary-foreground);--theme-color-dynamic:var(--sken-primary);--theme-color-dynamic--hover:var(--sken-primary-hover);--theme-color-dynamic--active:var(--sken-primary-active);--theme-color-dynamic-alt:var(--sken-primary);--theme-color-secondary:var(--sken-secondary);--theme-color-info:var(--sken-info);--theme-color-success:var(--sken-success);--theme-color-warning:var(--sken-warning);--theme-color-danger:var(--sken-destructive);--theme-color-alarm:var(--sken-destructive);--theme-color-critical:var(--sken-destructive);--theme-color-ghost:var(--sken-secondary);--theme-color-ghost--hover:var(--sken-secondary-hover);--theme-color-ghost--active:var(--sken-muted);--theme-color-neutral:var(--sken-secondary);--theme-input--background:var(--sken-card);--theme-input--color:var(--sken-foreground);--theme-input--border-color:var(--sken-border);--theme-input-hint--color:var(--sken-muted-foreground);--theme-input-select-icon--color:var(--sken-bridge-ix-select-icon);--theme-input-select-icon--color--active:var(--sken-bridge-ix-primary);--theme-input-select-icon--color--hover:var(--sken-bridge-ix-primary);--theme-scrollbar-track--background:var(--sken-bridge-ix-scrollbar-track);--theme-scrollbar-track--background--hover:var(--sken-bridge-ix-scrollbar-track-hover);--theme-scrollbar-track--border:var(--sken-bridge-ix-scrollbar-track-border);--theme-scrollbar-thumb--background:var(--sken-bridge-ix-scrollbar-thumb);--theme-scrollbar-thumb--background--hover:var(--sken-bridge-ix-scrollbar-thumb-hover);--theme-input--background--hover:var(--sken-card);--theme-input--border-color--hover:var(--sken-foreground);--theme-input--border-color--focus:var(--sken-ring);--theme-input--border-color--info:var(--sken-info);--theme-input--border-color--warning:var(--sken-warning);--theme-input--border-color--invalid:var(--sken-destructive);--theme-btn-primary--color:var(--sken-primary-foreground);--theme-btn-secondary--color:var(--sken-primary);--theme-btn-tertiary--color:var(--sken-primary);--theme-btn-subtle-primary--color:var(--sken-foreground);--theme-btn-subtle-secondary--color:var(--sken-foreground);--theme-btn-subtle-tertiary--color:var(--sken-foreground);--theme-btn-danger-primary--color:var(--sken-primary-foreground);--theme-btn-danger-secondary--color:var(--sken-destructive);--theme-btn-danger-tertiary--color:var(--sken-destructive);--theme-menu--background:var(--sken-card);--theme-menu--border-color:var(--sken-border);--theme-menu-item--color:var(--sken-foreground);--theme-datepicker-day--background:transparent;--theme-datepicker-day--background--hover:var(--sken-secondary-hover);--theme-datepicker-day--background--active:var(--sken-muted);--theme-datepicker-day--background--disabled:var(--sken-secondary);--theme-datepicker-day--background--selected:var(--sken-primary);--theme-datepicker-day--background--selected-hover:var(--sken-primary-hover);--theme-datepicker-day--background--selected-active:var(--sken-primary-active);--theme-datepicker-day--color:var(--sken-foreground);--theme-datepicker-day--color--hover:var(--sken-foreground);--theme-datepicker-day--color--active:var(--sken-foreground);--theme-datepicker-day--color--disabled:var(--sken-muted-foreground);--theme-datepicker-day--color--selected:var(--sken-primary-foreground);--theme-datepicker-day--color--selected-hover:var(--sken-primary-foreground);--theme-datepicker-weekday--color:var(--sken-muted-foreground);--theme-datepicker-today--color:var(--sken-primary);--theme-datepicker-today--border-color:var(--sken-primary);--theme-datepicker-separator--background:var(--sken-border);--theme-select-list-item--background--hover:var(--sken-secondary-hover);--theme-select-list-item--background--selected:var(--sken-muted);--theme-select-list-item-hint--color:var(--sken-muted-foreground);--theme-select-list-item-hint--color--active:var(--sken-muted-foreground);--theme-select-list-item-hint--color--hover:var(--sken-muted-foreground)}html[data-theme=dark] ix-tooltip,html[data-theme=dark] sken-tooltip{--theme-tooltip--background:var(--sken-foreground);--theme-tootlip--background:var(--sken-foreground);--theme-color-std-text:var(--sken-background);--theme-tooltip--border-color:var(--sken-foreground)}html[data-theme=dark] ix-select,html[data-theme=dark] ix-date-input,html[data-theme=dark] sken-combobox,html[data-theme=dark] sken-date-picker{--theme-color-1:var(--sken-card);--theme-color-2:var(--sken-muted);--theme-color-3:var(--sken-muted);--theme-color-4:var(--sken-border);--theme-color-5:var(--sken-border);--theme-color-6:var(--sken-foreground);--theme-color-7:var(--sken-muted-foreground);--theme-color-8:var(--sken-muted-foreground);--theme-color-std-text:var(--sken-foreground);--theme-color-soft-text:var(--sken-muted-foreground);--theme-color-weak-text:var(--sken-muted-foreground);--theme-color-inv-std-text:var(--sken-primary-foreground);--theme-color-primary:var(--sken-primary);--theme-color-primary--hover:var(--sken-primary-hover);--theme-color-primary--active:var(--sken-primary-active);--theme-color-primary--contrast:var(--sken-primary-foreground);--theme-color-dynamic:var(--sken-primary);--theme-color-dynamic--hover:var(--sken-primary-hover);--theme-color-dynamic--active:var(--sken-primary-active);--theme-color-dynamic-alt:var(--sken-primary);--theme-color-secondary:var(--sken-secondary);--theme-color-info:var(--sken-info);--theme-color-success:var(--sken-success);--theme-color-warning:var(--sken-warning);--theme-color-danger:var(--sken-destructive);--theme-color-alarm:var(--sken-destructive);--theme-color-critical:var(--sken-destructive);--theme-color-ghost:var(--sken-secondary);--theme-color-ghost--hover:var(--sken-secondary-hover);--theme-color-ghost--active:var(--sken-muted);--theme-color-neutral:var(--sken-secondary);--theme-input--background:var(--sken-card);--theme-input--color:var(--sken-foreground);--theme-input--border-color:var(--sken-border);--theme-input-hint--color:var(--sken-muted-foreground);--theme-input-select-icon--color:var(--sken-bridge-ix-select-icon);--theme-input-select-icon--color--active:var(--sken-bridge-ix-primary);--theme-input-select-icon--color--hover:var(--sken-bridge-ix-primary);--theme-scrollbar-track--background:var(--sken-bridge-ix-scrollbar-track);--theme-scrollbar-track--background--hover:var(--sken-bridge-ix-scrollbar-track-hover);--theme-scrollbar-track--border:var(--sken-bridge-ix-scrollbar-track-border);--theme-scrollbar-thumb--background:var(--sken-bridge-ix-scrollbar-thumb);--theme-scrollbar-thumb--background--hover:var(--sken-bridge-ix-scrollbar-thumb-hover);--theme-input--background--hover:var(--sken-card);--theme-input--border-color--hover:var(--sken-foreground);--theme-input--border-color--focus:var(--sken-ring);--theme-input--border-color--info:var(--sken-info);--theme-input--border-color--warning:var(--sken-warning);--theme-input--border-color--invalid:var(--sken-destructive);--theme-btn-primary--color:var(--sken-primary-foreground);--theme-btn-secondary--color:var(--sken-primary);--theme-btn-tertiary--color:var(--sken-primary);--theme-btn-subtle-primary--color:var(--sken-foreground);--theme-btn-subtle-secondary--color:var(--sken-foreground);--theme-btn-subtle-tertiary--color:var(--sken-foreground);--theme-btn-danger-primary--color:var(--sken-primary-foreground);--theme-btn-danger-secondary--color:var(--sken-destructive);--theme-btn-danger-tertiary--color:var(--sken-destructive);--theme-menu--background:var(--sken-card);--theme-menu--border-color:var(--sken-border);--theme-menu-item--color:var(--sken-foreground);--theme-datepicker-day--background:transparent;--theme-datepicker-day--background--hover:var(--sken-secondary-hover);--theme-datepicker-day--background--active:var(--sken-muted);--theme-datepicker-day--background--disabled:var(--sken-secondary);--theme-datepicker-day--background--selected:var(--sken-primary);--theme-datepicker-day--background--selected-hover:var(--sken-primary-hover);--theme-datepicker-day--background--selected-active:var(--sken-primary-active);--theme-datepicker-day--color:var(--sken-foreground);--theme-datepicker-day--color--hover:var(--sken-foreground);--theme-datepicker-day--color--active:var(--sken-foreground);--theme-datepicker-day--color--disabled:var(--sken-muted-foreground);--theme-datepicker-day--color--selected:var(--sken-primary-foreground);--theme-datepicker-day--color--selected-hover:var(--sken-primary-foreground);--theme-datepicker-weekday--color:var(--sken-muted-foreground);--theme-datepicker-today--color:var(--sken-primary);--theme-datepicker-today--border-color:var(--sken-primary);--theme-datepicker-separator--background:var(--sken-border);--theme-select-list-item--background--hover:var(--sken-secondary-hover);--theme-select-list-item--background--selected:var(--sken-muted);--theme-select-list-item-hint--color:var(--sken-muted-foreground);--theme-select-list-item-hint--color--active:var(--sken-muted-foreground);--theme-select-list-item-hint--color--hover:var(--sken-muted-foreground)}
2
+ /*$vite$:1*/
package/dist/rolldown-runtime-BRfZIaNm.js ADDED
@@ -0,0 +1,17 @@
1
+ //#region \0rolldown/runtime.js
2
+ var e = Object.defineProperty, t = Object.getOwnPropertyDescriptor, n = Object.getOwnPropertyNames, r = Object.prototype.hasOwnProperty, i = (t, n) => {
3
+ let r = {};
4
+ for (var i in t) e(r, i, {
5
+ get: t[i],
6
+ enumerable: !0
7
+ });
8
+ return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
9
+ }, a = (i, a, o, s) => {
10
+ if (a && typeof a == "object" || typeof a == "function") for (var c = n(a), l = 0, u = c.length, d; l < u; l++) d = c[l], !r.call(i, d) && d !== o && e(i, d, {
11
+ get: ((e) => a[e]).bind(null, d),
12
+ enumerable: !(s = t(a, d)) || s.enumerable
13
+ });
14
+ return i;
15
+ }, o = (e, t, n) => (a(e, t, "default"), n && a(n, t, "default"));
16
+ //#endregion
17
+ export { o as n, i as t };
package/dist/sken-button.js CHANGED
@@ -1,4 +1,4 @@
1
- import { t as e } from "./decorate-D4FKzyDw.js";
1
+ import { t as e } from "./decorate-C1e2sg49.js";
2
2
  import { LitElement as t, css as n, html as r } from "lit";
3
3
  import { customElement as i, property as a } from "lit/decorators.js";
4
4
  //#region src/components/sken-button.ts
@@ -8,7 +8,7 @@ var o = class extends t {
8
8
  }
9
9
  #e;
10
10
  constructor() {
11
- super(), this.#e = null, this.variant = "primary", this.size = "md", this.disabled = !1, this.type = "button", this.ariaLabel = null, this.#t = (e) => {
11
+ super(), this.#e = void 0, this.variant = "primary", this.size = "md", this.disabled = !1, this.type = "button", this.ariaLabel = null, this.#t = (e) => {
12
12
  if (this.disabled) {
13
13
  e.preventDefault(), e.stopImmediatePropagation();
14
14
  return;
@@ -23,7 +23,7 @@ var o = class extends t {
23
23
  try {
24
24
  this.#e = this.attachInternals();
25
25
  } catch {
26
- this.#e = null;
26
+ this.#e = void 0;
27
27
  }
28
28
  }
29
29
  static {
package/dist/sken-button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sken-button.js","names":["#internals","#handleClick"],"sources":["../src/components/sken-button.ts"],"sourcesContent":["// ── <sken-button> — framework-ready Web Component ────────────────────\n// Wraps a native <button> with token-driven styles. Contract lives in\n// @sken-ds/contracts; this file is the implementation.\n//\n// Requires @sken-ds/theme/css loaded: every --sken-* variable this\n// component reads comes from the theme. If the theme is missing,\n// styles fall back to initial / inherited values and the button\n// looks broken — intentional, not silent. ADR-0006 / ADR-0004.\n\nimport type { SkenButtonSize, SkenButtonVariant } from '@sken-ds/contracts'\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('sken-button')\nexport class SkenButton extends LitElement {\n // Form-associated custom element: opt in to the ElementInternals\n // API so this primitive can reach its surrounding <form> via\n // `internals.form`. We do NOT publish a value to FormData\n // (this is a button, not an input), but we DO need form\n // access for the `submit` and `reset` click bridges below.\n // https://lit.dev/docs/components/form/\n static formAssociated = true\n\n // The ElementInternals instance. Created in the constructor\n // via attachInternals(), which the browser only makes\n // available because `formAssociated` is true. Nullable to\n // gracefully degrade in test environments without\n // ElementInternals.\n #internals: ElementInternals | null = null\n\n constructor() {\n super()\n try {\n this.#internals = this.attachInternals()\n } catch {\n this.#internals = null\n }\n }\n\n @property({ reflect: true }) variant: SkenButtonVariant = 'primary'\n @property({ reflect: true }) size: SkenButtonSize = 'md'\n @property({ reflect: true, type: Boolean }) disabled = false\n @property() type: 'button' | 'submit' | 'reset' = 'button'\n\n // `string | null` matches `lib.dom.d.ts`; the contract normalizes\n // to `string | undefined` for the public API.\n @property({ attribute: 'aria-label' }) override ariaLabel: string | null = null\n\n static styles = css`\n :host {\n display: inline-block;\n }\n\n button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--sken-2);\n box-sizing: border-box;\n border: 1px solid transparent;\n border-radius: var(--sken-md);\n background: transparent;\n color: inherit;\n font-family: var(--sken-family-sans);\n font-size: var(--sken-size-md);\n font-weight: 500;\n line-height: 1.25;\n text-decoration: none;\n white-space: nowrap;\n cursor: pointer;\n transition:\n background-color 120ms ease,\n border-color 120ms ease,\n color 120ms ease;\n padding: var(--sken-2) var(--sken-4);\n min-height: 2.25rem;\n }\n\n /* ── Sizes ────────────────────────────────────────────────── */\n :host([size='sm']) button {\n padding: var(--sken-1) var(--sken-3);\n font-size: var(--sken-size-sm);\n min-height: 1.75rem;\n }\n :host([size='md']) button {\n /* Default styles above. */\n }\n :host([size='lg']) button {\n padding: var(--sken-3) var(--sken-5);\n font-size: var(--sken-size-lg);\n min-height: 2.75rem;\n }\n\n /* ── Variants ─────────────────────────────────────────────── */\n :host([variant='primary']) button {\n background: var(--sken-primary);\n color: var(--sken-primary-foreground);\n }\n :host([variant='primary']) button:hover:not(:disabled) {\n background: var(--sken-primary-hover);\n }\n :host([variant='primary']) button:active:not(:disabled) {\n background: var(--sken-primary-active);\n }\n\n :host([variant='secondary']) button {\n background: var(--sken-transparent);\n color: var(--sken-foreground);\n border-color: var(--sken-border);\n }\n :host([variant='secondary']) button:hover:not(:disabled) {\n background: var(--sken-muted);\n }\n\n :host([variant='ghost']) button {\n color: var(--sken-foreground);\n }\n :host([variant='ghost']) button:hover:not(:disabled) {\n background: var(--sken-muted);\n }\n\n /* ── States ───────────────────────────────────────────────── */\n button:focus-visible {\n outline: 2px solid var(--sken-ring, currentColor);\n outline-offset: 2px;\n }\n button:disabled {\n cursor: not-allowed;\n opacity: var(--sken-disabled);\n }\n `\n\n protected override render() {\n return html`\n <button\n part=\"button\"\n ?disabled=${this.disabled}\n type=${this.type}\n @click=${this.#handleClick}\n >\n <slot></slot>\n </button>\n `\n }\n\n // `composed: true` is required for the `sken-click` event to\n // cross the shadow boundary; `preventDefault` +\n // `stopImmediatePropagation` on a disabled button suppresses the\n // native submit-on-Enter behavior.\n //\n // For `type=\"submit\"` and `type=\"reset\"` we ALSO bridge the\n // shadow boundary so the surrounding <form> receives the\n // submit / reset. Without this, the inner <button type=\"submit\">'s\n // default action submits the (notional) form inside the shadow\n // root, which doesn't exist — no `submit` event ever reaches the\n // outer light-DOM form. `internals.form.requestSubmit()` is the\n // modern, non-deprecated API; it dispatches a real `submit` event\n // on the form and runs constraint validation. `form.reset()` is\n // the standard form reset method. We `preventDefault()` to\n // suppress the inner button's default action (submit/reset the\n // shadow form) so the bridge is the only path. Without it we\n // would get a phantom submit to a nonexistent form AND a\n // requestSubmit to the real one. (Tested with happy-dom: phantom\n // submit is a no-op there because the shadow form doesn't exist,\n // but on a real browser it would dispatch a submit event to a\n // formless button — harmless but noisy.)\n //\n // The `sken-click` event is dispatched for every type so\n // consumers can listen to it regardless of whether they put the\n // handler on the button or on the form. Consumers that want\n // submit-only handling should listen to the form's `submit`\n // event, not the button's click — same as native HTML.\n #handleClick = (event: MouseEvent | KeyboardEvent) => {\n if (this.disabled) {\n event.preventDefault()\n event.stopImmediatePropagation()\n return\n }\n const form = this.#internals?.form\n if (this.type === 'submit' && form) {\n event.preventDefault()\n form.requestSubmit()\n } else if (this.type === 'reset' && form) {\n event.preventDefault()\n form.reset()\n }\n this.dispatchEvent(\n new CustomEvent('sken-click', {\n detail: { originalEvent: event },\n bubbles: true,\n composed: true,\n }),\n )\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sken-button': SkenButton\n }\n}\n"],"mappings":";;;;AAcO,IAAM,IAAN,cAAyB,EAAW;;EAOjB,KAAA,iBAAA;;CAOxB;CAEA,cAAc;EA8IE,AA7Id,MAAM,GAH8B,KAAA,KAAA,MAWoB,KAAA,UAAA,WACN,KAAA,OAAA,MACG,KAAA,WAAA,IACL,KAAA,OAAA,UAIyB,KAAA,YAAA,MA8H3D,KAAA,MAAA,MAAsC;GACpD,IAAI,KAAK,UAAU;IAEjB,AADA,EAAM,eAAe,GACrB,EAAM,yBAAyB;IAC/B;GACF;GACA,IAAM,IAAO,KAAKA,IAAY;GAQ9B,AAPI,KAAK,SAAS,YAAY,KAC5B,EAAM,eAAe,GACrB,EAAK,cAAc,KACV,KAAK,SAAS,WAAW,MAClC,EAAM,eAAe,GACrB,EAAK,MAAM,IAEb,KAAK,cACH,IAAI,YAAY,cAAc;IAC5B,QAAQ,EAAE,eAAe,EAAM;IAC/B,SAAS;IACT,UAAU;GACZ,CAAC,CACH;EACF;EAjKE,IAAI;GACF,KAAKA,KAAa,KAAK,gBAAgB;EACzC,QAAQ;GACN,KAAKA,KAAa;EACpB;CACF;;EAWgB,KAAA,SAAA,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFnB,SAA4B;EAC1B,OAAO,CAAI;;;oBAGK,KAAK,SAAS;eACnB,KAAK,KAAK;iBACR,KAAKC,GAAa;;;;;CAKjC;CA6BA;AAsBF;AA3JG,EAAA,CAAA,EAAS,EAAE,SAAS,GAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAC1B,EAAA,CAAA,EAAS,EAAE,SAAS,GAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAC1B,EAAA,CAAA,EAAS;CAAE,SAAS;CAAM,MAAM;AAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAIT,EAAA,CAAA,EAAS,EAAE,WAAW,aAAa,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAjCtC,IAAA,EAAA,CAAA,EAAc,aAAa,CAAA,GAAA,CAAA"}
1
+ {"version":3,"file":"sken-button.js","names":[],"sources":["../src/components/sken-button.ts"],"sourcesContent":["// ── <sken-button> — framework-ready Web Component ────────────────────\n\nimport type { SkenButtonSize, SkenButtonVariant } from '@sken-ds/contracts'\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('sken-button')\nexport class SkenButton extends LitElement {\n static formAssociated = true\n\n #internals: ElementInternals | undefined = undefined\n\n constructor() {\n super()\n try {\n this.#internals = this.attachInternals()\n } catch {\n this.#internals = undefined\n }\n }\n\n @property({ reflect: true }) variant: SkenButtonVariant = 'primary'\n @property({ reflect: true }) size: SkenButtonSize = 'md'\n @property({ reflect: true, type: Boolean }) disabled = false\n @property() type: 'button' | 'submit' | 'reset' = 'button'\n\n @property({ attribute: 'aria-label' }) override ariaLabel: string | null = null\n\n static styles = css`\n :host {\n display: inline-block;\n }\n\n button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--sken-2);\n box-sizing: border-box;\n border: 1px solid transparent;\n border-radius: var(--sken-md);\n background: transparent;\n color: inherit;\n font-family: var(--sken-family-sans);\n font-size: var(--sken-size-md);\n font-weight: 500;\n line-height: 1.25;\n text-decoration: none;\n white-space: nowrap;\n cursor: pointer;\n transition:\n background-color 120ms ease,\n border-color 120ms ease,\n color 120ms ease;\n padding: var(--sken-2) var(--sken-4);\n min-height: 2.25rem;\n }\n\n /* ── Sizes ────────────────────────────────────────────────── */\n :host([size='sm']) button {\n padding: var(--sken-1) var(--sken-3);\n font-size: var(--sken-size-sm);\n min-height: 1.75rem;\n }\n :host([size='md']) button {\n /* Default styles above. */\n }\n :host([size='lg']) button {\n padding: var(--sken-3) var(--sken-5);\n font-size: var(--sken-size-lg);\n min-height: 2.75rem;\n }\n\n /* ── Variants ─────────────────────────────────────────────── */\n :host([variant='primary']) button {\n background: var(--sken-primary);\n color: var(--sken-primary-foreground);\n }\n :host([variant='primary']) button:hover:not(:disabled) {\n background: var(--sken-primary-hover);\n }\n :host([variant='primary']) button:active:not(:disabled) {\n background: var(--sken-primary-active);\n }\n\n :host([variant='secondary']) button {\n background: var(--sken-transparent);\n color: var(--sken-foreground);\n border-color: var(--sken-border);\n }\n :host([variant='secondary']) button:hover:not(:disabled) {\n background: var(--sken-muted);\n }\n\n :host([variant='ghost']) button {\n color: var(--sken-foreground);\n }\n :host([variant='ghost']) button:hover:not(:disabled) {\n background: var(--sken-muted);\n }\n\n /* ── States ───────────────────────────────────────────────── */\n button:focus-visible {\n outline: 2px solid var(--sken-ring, currentColor);\n outline-offset: 2px;\n }\n button:disabled {\n cursor: not-allowed;\n opacity: var(--sken-disabled);\n }\n `\n\n protected override render() {\n return html`\n <button\n part=\"button\"\n ?disabled=${this.disabled}\n type=${this.type}\n @click=${this.#handleClick}\n >\n <slot></slot>\n </button>\n `\n }\n\n #handleClick = (event: MouseEvent | KeyboardEvent) => {\n if (this.disabled) {\n event.preventDefault()\n event.stopImmediatePropagation()\n return\n }\n const form = this.#internals?.form\n if (this.type === 'submit' && form) {\n event.preventDefault()\n form.requestSubmit()\n } else if (this.type === 'reset' && form) {\n event.preventDefault()\n form.reset()\n }\n this.dispatchEvent(\n new CustomEvent('sken-click', {\n detail: { originalEvent: event },\n bubbles: true,\n composed: true,\n }),\n )\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sken-button': SkenButton\n }\n}\n"],"mappings":";;;;AAOO,IAAM,IAAN,cAAyB,EAAW;;EACjB,KAAA,iBAAA;;CAExB;CAEA,cAAc;EAiHE,AAhHd,MAAM,GAHmC,KAAA,KAAA,KAAA,GAWe,KAAA,UAAA,WACN,KAAA,OAAA,MACG,KAAA,WAAA,IACL,KAAA,OAAA,UAEyB,KAAA,YAAA,MAmG3D,KAAA,MAAA,MAAsC;GACpD,IAAI,KAAK,UAAU;IAEjB,AADA,EAAM,eAAe,GACrB,EAAM,yBAAyB;IAC/B;GACF;GACA,IAAM,IAAO,KAAK,IAAY;GAQ9B,AAPI,KAAK,SAAS,YAAY,KAC5B,EAAM,eAAe,GACrB,EAAK,cAAc,KACV,KAAK,SAAS,WAAW,MAClC,EAAM,eAAe,GACrB,EAAK,MAAM,IAEb,KAAK,cACH,IAAI,YAAY,cAAc;IAC5B,QAAQ,EAAE,eAAe,EAAM;IAC/B,SAAS;IACT,UAAU;GACZ,CAAC,CACH;EACF;EApIE,IAAI;GACF,KAAK,KAAa,KAAK,gBAAgB;EACzC,QAAQ;GACN,KAAK,KAAa,KAAA;EACpB;CACF;;EASgB,KAAA,SAAA,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFnB,SAA4B;EAC1B,OAAO,CAAI;;;oBAGK,KAAK,SAAS;eACnB,KAAK,KAAK;iBACR,KAAK,GAAa;;;;;CAKjC;CAEA;AAsBF;AA9HG,EAAA,CAAA,EAAS,EAAE,SAAS,GAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAC1B,EAAA,CAAA,EAAS,EAAE,SAAS,GAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAC1B,EAAA,CAAA,EAAS;CAAE,SAAS;CAAM,MAAM;AAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAET,EAAA,CAAA,EAAS,EAAE,WAAW,aAAa,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GApBtC,IAAA,EAAA,CAAA,EAAc,aAAa,CAAA,GAAA,CAAA"}
package/dist/sken-checkbox.js CHANGED
@@ -1,10 +1,10 @@
1
- import { t as e } from "./decorate-D4FKzyDw.js";
1
+ import { t as e } from "./decorate-C1e2sg49.js";
2
2
  import { LitElement as t, css as n, html as r } from "lit";
3
3
  import { customElement as i, property as a, state as o } from "lit/decorators.js";
4
4
  //#region src/components/sken-checkbox.ts
5
5
  var s = class extends t {
6
6
  constructor(...e) {
7
- super(...e), this._checked = void 0, this._checkedSet = !1, this.defaultChecked = void 0, this.indeterminate = !1, this.disabled = !1, this.required = !1, this.invalid = !1, this.describedById = void 0, this.name = void 0, this.value = void 0, this._uncontrolled = !1, this.#t = (e) => {
7
+ super(...e), this._checked = void 0, this._checkedSet = !1, this.defaultChecked = void 0, this.indeterminate = !1, this.disabled = !1, this.required = !1, this.invalid = !1, this.describedById = void 0, this.name = void 0, this.value = void 0, this.ariaLabel = null, this._uncontrolled = !1, this.#t = (e) => {
8
8
  let t = e.target, n = t.checked;
9
9
  if (this.disabled) {
10
10
  t.checked = this.#e ? this.checked === !0 : this._uncontrolled;
@@ -60,7 +60,7 @@ var s = class extends t {
60
60
  cursor: pointer;
61
61
  color: var(--sken-foreground);
62
62
  font-family: var(--sken-family-sans);
63
- font-size: var(--sken-size-md);
63
+ font-size: var(--sken-size-xs, 0.75rem);
64
64
  line-height: 1.25;
65
65
  }
66
66
 
@@ -146,6 +146,15 @@ var s = class extends t {
146
146
  .label {
147
147
  user-select: none;
148
148
  }
149
+
150
+ :host([required]) .label::after {
151
+ content: ' *';
152
+ }
153
+
154
+ :host([required][invalid]) .label,
155
+ :host([required][invalid]) .label::after {
156
+ color: var(--sken-destructive);
157
+ }
149
158
  `;
150
159
  }
151
160
  connectedCallback() {
@@ -168,6 +177,7 @@ var s = class extends t {
168
177
  ?required=${this.required}
169
178
  aria-invalid=${this.invalid ? "true" : "false"}
170
179
  aria-describedby=${this.describedById ?? ""}
180
+ aria-label=${this.ariaLabel ?? ""}
171
181
  name=${this.name ?? ""}
172
182
  value=${this.value ?? "on"}
173
183
  @change=${this.#t}
@@ -211,7 +221,7 @@ e([a({
211
221
  })], s.prototype, "required", void 0), e([a({
212
222
  reflect: !0,
213
223
  type: Boolean
214
- })], s.prototype, "invalid", void 0), e([a({ attribute: "described-by-id" })], s.prototype, "describedById", void 0), e([a()], s.prototype, "name", void 0), e([a()], s.prototype, "value", void 0), e([o()], s.prototype, "_uncontrolled", void 0), s = e([i("sken-checkbox")], s);
224
+ })], s.prototype, "invalid", void 0), e([a({ attribute: "described-by-id" })], s.prototype, "describedById", void 0), e([a()], s.prototype, "name", void 0), e([a()], s.prototype, "value", void 0), e([a({ attribute: "aria-label" })], s.prototype, "ariaLabel", void 0), e([o()], s.prototype, "_uncontrolled", void 0), s = e([i("sken-checkbox")], s);
215
225
  //#endregion
216
226
  export { s as SkenCheckbox };
217
227
 
package/dist/sken-checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sken-checkbox.js","names":["#controlled","#getInput","#handleChange","#handleFocus","#handleBlur"],"sources":["../src/components/sken-checkbox.ts"],"sourcesContent":["// ── <sken-checkbox> — framework-ready Web Component ──────────────────\n// Wraps a native <input type=\"checkbox\"> with a custom-styled box.\n// Three states: checked, unchecked, indeterminate. The indeterminate\n// flag is visual-only (parent checkbox with some children); the\n// form value stays boolean. Requires @sken-ds/theme/css (ADR-0006).\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\n@customElement('sken-checkbox')\nexport class SkenCheckbox extends LitElement {\n // `checked` distinguishes \"uncontrolled\" (consumer never\n // assigns the prop) from \"controlled\" (consumer assigns `true`\n // or `false`). Lit's `@property({ type: Boolean })` collapses\n // \"absent\" to `false`, which makes the two cases\n // indistinguishable. We use a custom converter that maps the\n // attribute presence to `true` and the attribute absence to\n // `undefined`, and the prop setter distinguishes `undefined`\n // (\"uncontrolled\") from `true`/`false` (\"controlled\"). The Vue\n // adapter must NOT bind the `checked` prop when the consumer\n // did not pass `:checked`, so the setter is never called and\n // the primitive stays uncontrolled.\n private _checked: boolean | undefined = undefined\n private _checkedSet: boolean = false\n @property({\n attribute: 'checked',\n converter: {\n fromAttribute: (value: string | null) => (value === null ? undefined : true),\n toAttribute: (value: boolean | undefined) => (value ? '' : null),\n },\n hasChanged: () => true,\n })\n set checked(v: boolean | undefined) {\n this._checked = v\n this._checkedSet = v !== undefined\n this.requestUpdate()\n }\n get checked(): boolean | undefined {\n return this._checked\n }\n get #controlled(): boolean {\n return this._checkedSet\n }\n\n @property({ attribute: 'default-checked', type: Boolean })\n defaultChecked: boolean | undefined = undefined\n @property({ type: Boolean }) indeterminate = false\n @property({ reflect: true, type: Boolean }) disabled = false\n @property({ reflect: true, type: Boolean }) required = false\n @property({ reflect: true, type: Boolean }) invalid = false\n @property({ attribute: 'described-by-id' }) describedById: string | undefined = undefined\n @property() name: string | undefined = undefined\n @property() value: string | undefined = undefined\n\n // We use @state (not a private field) for the uncontrolled value so\n // Lit's reactivity picks up changes — without @state, Lit does not\n // re-render or re-run updated() on assignment, and the visual\n // state would not refresh on click.\n @state() private _uncontrolled: boolean = false\n\n static styles = css`\n :host {\n display: inline-block;\n vertical-align: middle;\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n opacity: var(--sken-disabled);\n }\n\n /* The <label> wraps the hidden input + visible box + slot\n label. It carries the layout styles so the whole control\n looks like a single inline-flex row. */\n label {\n display: inline-flex;\n align-items: center;\n gap: var(--sken-2);\n cursor: pointer;\n color: var(--sken-foreground);\n font-family: var(--sken-family-sans);\n font-size: var(--sken-size-md);\n line-height: 1.25;\n }\n\n :host([disabled]) label {\n cursor: not-allowed;\n }\n\n input {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n .box {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.125rem;\n block-size: 1.125rem;\n border: 1px solid var(--sken-border);\n border-radius: var(--sken-sm);\n background: var(--sken-input);\n color: var(--sken-primary-foreground);\n transition:\n background-color 120ms ease,\n border-color 120ms ease;\n }\n\n :host([data-checked]) .box,\n :host([data-indeterminate]) .box {\n background: var(--sken-primary);\n border-color: var(--sken-primary);\n }\n\n :host([data-indeterminate]) .box::after {\n content: '';\n inline-size: 0.625rem;\n block-size: 0.125rem;\n background: var(--sken-primary-foreground);\n border-radius: 1px;\n }\n\n .box svg {\n inline-size: 100%;\n block-size: 100%;\n fill: none;\n stroke: currentColor;\n stroke-width: 3;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n .box svg path {\n stroke-dasharray: 24;\n stroke-dashoffset: 24;\n transition: stroke-dashoffset 120ms ease;\n }\n :host([data-checked]) .box svg path {\n stroke-dashoffset: 0;\n }\n :host([data-indeterminate]) .box svg {\n display: none;\n }\n\n :host([invalid]) .box {\n border-color: var(--sken-destructive);\n }\n\n :host(:focus-within) .box {\n outline: 2px solid var(--sken-ring, currentColor);\n outline-offset: 2px;\n }\n :host(:focus-within) {\n outline: none;\n }\n\n .label {\n user-select: none;\n }\n `\n\n // Seed _uncontrolled from defaultChecked on first connection. Fires\n // only in uncontrolled mode (consumer has not passed `checked`).\n override connectedCallback(): void {\n super.connectedCallback()\n if (!this.#controlled) {\n this._uncontrolled = this.defaultChecked ?? false\n }\n }\n\n // `indeterminate` is a DOM property only (no HTML attribute); we\n // mirror the prop onto the input in updated() so the visual state\n // matches the prop across re-renders.\n protected override updated(): void {\n const input = this.#getInput()\n if (!input) return\n const isChecked = (this.#controlled ? this.checked : this._uncontrolled) ?? false\n input.indeterminate = this.indeterminate\n input.checked = isChecked\n if (isChecked) this.setAttribute('data-checked', '')\n else this.removeAttribute('data-checked')\n if (this.indeterminate) this.setAttribute('data-indeterminate', '')\n else this.removeAttribute('data-indeterminate')\n }\n\n protected override render() {\n // The visible UI (box + label) is wrapped in a `<label>` element\n // so clicking anywhere on it toggles the hidden input. This is\n // the standard WAI-ARIA pattern for a custom-styled checkbox.\n // Without the label, the visually-hidden input would never\n // receive a click event and the checkbox would look inert.\n return html`\n <label>\n <input\n part=\"input\"\n type=\"checkbox\"\n aria-checked=${this.#controlled ? String(this.checked) : String(this._uncontrolled)}\n ?disabled=${this.disabled}\n ?required=${this.required}\n aria-invalid=${this.invalid ? 'true' : 'false'}\n aria-describedby=${this.describedById ?? ''}\n name=${this.name ?? ''}\n value=${this.value ?? 'on'}\n @change=${this.#handleChange}\n @focus=${this.#handleFocus}\n @blur=${this.#handleBlur}\n />\n <span class=\"box\" part=\"box\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 16 16\">\n <path d=\"M3 8.5l3 3 7-7\" />\n </svg>\n </span>\n <span class=\"label\" part=\"label\">\n <slot></slot>\n </span>\n </label>\n `\n }\n\n #handleChange = (event: Event) => {\n const target = event.target as HTMLInputElement\n const newValue = target.checked\n // Disabled: the browser already blocks the change, but we\n // double-check here in case `disabled` was toggled\n // programmatically (no click event reaches the input) or\n // mid-flight. Either way, do not advance state.\n if (this.disabled) {\n target.checked = this.#controlled ? this.checked === true : this._uncontrolled\n return\n }\n // Indeterminate → checked: when the user clicks an\n // indeterminate checkbox, the visual should resolve to the\n // checked state. The native browser drops `indeterminate` on\n // the input but our `@property` prop keeps it set, which\n // would otherwise re-apply `indeterminate` on the next\n // `updated()` and leave the visual stuck on the dash. We\n // clear our own prop so the next render is consistent. The\n // consumer is informed via `sken-change` (and can re-set\n // `indeterminate` if their logic calls for it).\n const wasIndeterminate = this.indeterminate\n if (wasIndeterminate) {\n this.indeterminate = false\n }\n // Uncontrolled: update @state, Lit re-renders. Controlled: do\n // nothing locally; the consumer's `:checked` prop change drives\n // the next render and updated() syncs the DOM input.\n if (!this.#controlled) {\n this._uncontrolled = newValue\n }\n this.dispatchEvent(\n new CustomEvent<boolean>('sken-change', { detail: newValue, bubbles: true, composed: true }),\n )\n }\n\n #handleFocus = (event: FocusEvent) => {\n this.dispatchEvent(\n new CustomEvent<FocusEvent>('sken-focus', { detail: event, bubbles: true, composed: true }),\n )\n }\n\n #handleBlur = (event: FocusEvent) => {\n this.dispatchEvent(\n new CustomEvent<FocusEvent>('sken-blur', { detail: event, bubbles: true, composed: true }),\n )\n }\n\n #getInput(): HTMLInputElement | null {\n return this.shadowRoot?.querySelector('input') ?? null\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sken-checkbox': SkenCheckbox\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"sken-checkbox.js","names":[],"sources":["../src/components/sken-checkbox.ts"],"sourcesContent":["// ── <sken-checkbox> — framework-ready Web Component ──────────────────\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\n@customElement('sken-checkbox')\nexport class SkenCheckbox extends LitElement {\n private _checked: boolean | undefined = undefined\n private _checkedSet: boolean = false\n @property({\n attribute: 'checked',\n converter: {\n fromAttribute: (value: string | null) => (value === null ? undefined : true),\n toAttribute: (value: boolean | undefined) => (value ? '' : null),\n },\n hasChanged: () => true,\n })\n set checked(v: boolean | undefined) {\n this._checked = v\n this._checkedSet = v !== undefined\n this.requestUpdate()\n }\n get checked(): boolean | undefined {\n return this._checked\n }\n get #controlled(): boolean {\n return this._checkedSet\n }\n\n @property({ attribute: 'default-checked', type: Boolean })\n defaultChecked: boolean | undefined = undefined\n @property({ type: Boolean }) indeterminate = false\n @property({ reflect: true, type: Boolean }) disabled = false\n @property({ reflect: true, type: Boolean }) required = false\n @property({ reflect: true, type: Boolean }) invalid = false\n @property({ attribute: 'described-by-id' }) describedById: string | undefined = undefined\n @property() name: string | undefined = undefined\n @property() value: string | undefined = undefined\n\n @property({ attribute: 'aria-label' }) override ariaLabel: string | null = null\n\n @state() private _uncontrolled: boolean = false\n\n static styles = css`\n :host {\n display: inline-block;\n vertical-align: middle;\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n opacity: var(--sken-disabled);\n }\n\n /* The <label> wraps the hidden input + visible box + slot\n label. It carries the layout styles so the whole control\n looks like a single inline-flex row. */\n label {\n display: inline-flex;\n align-items: center;\n gap: var(--sken-2);\n cursor: pointer;\n color: var(--sken-foreground);\n font-family: var(--sken-family-sans);\n font-size: var(--sken-size-xs, 0.75rem);\n line-height: 1.25;\n }\n\n :host([disabled]) label {\n cursor: not-allowed;\n }\n\n input {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n .box {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.125rem;\n block-size: 1.125rem;\n border: 1px solid var(--sken-border);\n border-radius: var(--sken-sm);\n background: var(--sken-input);\n color: var(--sken-primary-foreground);\n transition:\n background-color 120ms ease,\n border-color 120ms ease;\n }\n\n :host([data-checked]) .box,\n :host([data-indeterminate]) .box {\n background: var(--sken-primary);\n border-color: var(--sken-primary);\n }\n\n :host([data-indeterminate]) .box::after {\n content: '';\n inline-size: 0.625rem;\n block-size: 0.125rem;\n background: var(--sken-primary-foreground);\n border-radius: 1px;\n }\n\n .box svg {\n inline-size: 100%;\n block-size: 100%;\n fill: none;\n stroke: currentColor;\n stroke-width: 3;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n .box svg path {\n stroke-dasharray: 24;\n stroke-dashoffset: 24;\n transition: stroke-dashoffset 120ms ease;\n }\n :host([data-checked]) .box svg path {\n stroke-dashoffset: 0;\n }\n :host([data-indeterminate]) .box svg {\n display: none;\n }\n\n :host([invalid]) .box {\n border-color: var(--sken-destructive);\n }\n\n :host(:focus-within) .box {\n outline: 2px solid var(--sken-ring, currentColor);\n outline-offset: 2px;\n }\n :host(:focus-within) {\n outline: none;\n }\n\n .label {\n user-select: none;\n }\n\n :host([required]) .label::after {\n content: ' *';\n }\n\n :host([required][invalid]) .label,\n :host([required][invalid]) .label::after {\n color: var(--sken-destructive);\n }\n `\n\n override connectedCallback(): void {\n super.connectedCallback()\n if (!this.#controlled) {\n this._uncontrolled = this.defaultChecked ?? false\n }\n }\n\n protected override updated(): void {\n const input = this.#getInput()\n if (!input) return\n const isChecked = (this.#controlled ? this.checked : this._uncontrolled) ?? false\n input.indeterminate = this.indeterminate\n input.checked = isChecked\n if (isChecked) this.setAttribute('data-checked', '')\n else this.removeAttribute('data-checked')\n if (this.indeterminate) this.setAttribute('data-indeterminate', '')\n else this.removeAttribute('data-indeterminate')\n }\n\n protected override render() {\n return html`\n <label>\n <input\n part=\"input\"\n type=\"checkbox\"\n aria-checked=${this.#controlled ? String(this.checked) : String(this._uncontrolled)}\n ?disabled=${this.disabled}\n ?required=${this.required}\n aria-invalid=${this.invalid ? 'true' : 'false'}\n aria-describedby=${this.describedById ?? ''}\n aria-label=${this.ariaLabel ?? ''}\n name=${this.name ?? ''}\n value=${this.value ?? 'on'}\n @change=${this.#handleChange}\n @focus=${this.#handleFocus}\n @blur=${this.#handleBlur}\n />\n <span class=\"box\" part=\"box\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 16 16\">\n <path d=\"M3 8.5l3 3 7-7\" />\n </svg>\n </span>\n <span class=\"label\" part=\"label\">\n <slot></slot>\n </span>\n </label>\n `\n }\n\n #handleChange = (event: Event) => {\n const target = event.target as HTMLInputElement\n const newValue = target.checked\n if (this.disabled) {\n target.checked = this.#controlled ? this.checked === true : this._uncontrolled\n return\n }\n const wasIndeterminate = this.indeterminate\n if (wasIndeterminate) {\n this.indeterminate = false\n }\n if (!this.#controlled) {\n this._uncontrolled = newValue\n }\n this.dispatchEvent(\n new CustomEvent<boolean>('sken-change', { detail: newValue, bubbles: true, composed: true }),\n )\n }\n\n #handleFocus = (event: FocusEvent) => {\n this.dispatchEvent(\n new CustomEvent<FocusEvent>('sken-focus', { detail: event, bubbles: true, composed: true }),\n )\n }\n\n #handleBlur = (event: FocusEvent) => {\n this.dispatchEvent(\n new CustomEvent<FocusEvent>('sken-blur', { detail: event, bubbles: true, composed: true }),\n )\n }\n\n #getInput(): HTMLInputElement | null {\n return this.shadowRoot?.querySelector('input') ?? null\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sken-checkbox': SkenCheckbox\n }\n}\n"],"mappings":"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"}
package/dist/sken-combobox-group.js CHANGED
@@ -1,4 +1,4 @@
1
- import { t as e } from "./decorate-D4FKzyDw.js";
1
+ import { t as e } from "./decorate-C1e2sg49.js";
2
2
  import { LitElement as t } from "lit";
3
3
  import { customElement as n, property as r } from "lit/decorators.js";
4
4
  //#region src/components/sken-combobox-group.ts
package/dist/sken-combobox-group.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sken-combobox-group.js","names":[],"sources":["../src/components/sken-combobox-group.ts"],"sourcesContent":["/**\n * `<sken-combobox-group>` — Sken combobox group primitive.\n *\n * Group container for `<sken-combobox-item>` children. Same\n * marker pattern as `<sken-combobox-item>`: this element does\n * NOT render anything. The parent `<sken-combobox>` introspects\n * the host's children to build a nested listbox model where\n * each item knows which group it belongs to.\n *\n * <sken-combobox label=\"Hardware\">\n * <sken-combobox-group label=\"Detectores\">\n * <sken-combobox-item value=\"humo\" label=\"Detector de humo\"></sken-combobox-item>\n * <sken-combobox-item value=\"caida\" label=\"Detector de caída\"></sken-combobox-item>\n * </sken-combobox-group>\n * <sken-combobox-group label=\"Comunicadores\">\n * <sken-combobox-item value=\"gsm\" label=\"Comunicador GSM\"></sken-combobox-item>\n * </sken-combobox-group>\n * </sken-combobox>\n *\n * The parent introspects the host with\n * `host.querySelectorAll('sken-combobox-group')` and walks each\n * group's children to associate items with their group. Items\n * that are direct children of the combobox (not inside a group)\n * belong to an implicit \"ungrouped\" bucket.\n *\n * Filter behaviour: when the combobox filters, a group hides\n * itself when ALL of its items are filtered out. A group with\n * at least one visible item stays visible. An ungrouped item\n * follows the same rule (it's its own \"group of one\").\n *\n * ARIA: the parent projects the rendered listbox with\n * `role=\"group\"` + `aria-labelledby` pointing to the group's\n * label. The group itself is a marker; the rendered ARIA\n * surface lives in the parent's Shadow DOM.\n */\nimport { LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('sken-combobox-group')\nexport class SkenComboboxGroup extends LitElement {\n /** Group header text. Rendered as the group's accessible name. */\n @property() label = ''\n\n /**\n * Disabled state. When true, the entire group and all its\n * descendant items are non-selectable. The combobox still\n * renders them (so the user can see the structure) but skips\n * them in the keyboard navigation model.\n * @default false\n */\n @property({ type: Boolean, reflect: true })\n disabled = false\n\n /**\n * Marker element. Renders nothing. The parent\n * `<sken-combobox>` introspects this element via\n * `host.querySelectorAll('sken-combobox-group')` and walks\n * its children to associate items with the group.\n */\n protected override createRenderRoot(): HTMLElement {\n return this as unknown as HTMLElement\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sken-combobox-group': SkenComboboxGroup\n }\n}\n"],"mappings":";;;;AAuCO,IAAM,IAAN,cAAgC,EAAW;;EAYrC,aAVS,KAAA,QAAA,IAUT,KAAA,WAAA;;CAQX,mBAAmD;EACjD,OAAO;CACT;AACF;AArBG,EAAA,CAAA,EAAS,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAST,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAZ3C,IAAA,EAAA,CAAA,EAAc,qBAAqB,CAAA,GAAA,CAAA"}
1
+ {"version":3,"file":"sken-combobox-group.js","names":[],"sources":["../src/components/sken-combobox-group.ts"],"sourcesContent":["import { LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('sken-combobox-group')\nexport class SkenComboboxGroup extends LitElement {\n @property() label = ''\n\n @property({ type: Boolean, reflect: true })\n disabled = false\n\n protected override createRenderRoot(): HTMLElement {\n return this as unknown as HTMLElement\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sken-combobox-group': SkenComboboxGroup\n }\n}\n"],"mappings":";;;;AAIO,IAAM,IAAN,cAAgC,EAAW;;EAIrC,aAHS,KAAA,QAAA,IAGT,KAAA,WAAA;;CAEX,mBAAmD;EACjD,OAAO;CACT;AACF;AARG,EAAA,CAAA,EAAS,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAET,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAJ3C,IAAA,EAAA,CAAA,EAAc,qBAAqB,CAAA,GAAA,CAAA"}
package/dist/sken-combobox-item.js CHANGED
@@ -1,4 +1,4 @@
1
- import { t as e } from "./decorate-D4FKzyDw.js";
1
+ import { t as e } from "./decorate-C1e2sg49.js";
2
2
  import { LitElement as t } from "lit";
3
3
  import { customElement as n, property as r } from "lit/decorators.js";
4
4
  //#region src/components/sken-combobox-item.ts
package/dist/sken-combobox-item.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sken-combobox-item.js","names":[],"sources":["../src/components/sken-combobox-item.ts"],"sourcesContent":["/**\n * `<sken-combobox-item>` — Sken combobox option primitive.\n *\n * This element does NOT render anything. It is a \"marker\" Web\n * Component that the parent `<sken-combobox>` introspects to\n * build its internal listbox model. The marker pattern matches\n * the upstream iX 5 `<ix-select-item>` and keeps the slot/portal\n * /Shadow-DOM choreography out of the way of a simple\n * declarative API:\n *\n * <sken-combobox label=\"Hardware\">\n * <sken-combobox-item value=\"humo\" label=\"Detector de humo\"></sken-combobox-item>\n * <sken-combobox-item value=\"caida\" label=\"Detector de caída\"></sken-combobox-item>\n * </sken-combobox>\n *\n * Why a custom element at all if it doesn't render anything?\n * Three reasons, in priority order:\n *\n * 1. **Type safety.** The props (`value`, `label`, `disabled`)\n * are checked by TypeScript on the consumer side. A typo\n * `sken-combobox-item lablel=\"x\"` is a compile error, not a\n * silent runtime miss.\n *\n * 2. **Discoverability.** The element shows up in the Sken catalog\n * (`COMPONENTS.md`) and in Storybook's sidebar. The consumer\n * finds it via search / autocomplete.\n *\n * 3. **Framework adapter parity.** The Vue adapter renders the\n * same `<sken-combobox-item>` element via Vue's templating;\n * no special path needed.\n *\n * The \"marker\" pattern is documented in the iX 5 reference\n * implementation (`<ix-select-item>`). The trade-off is that\n * `<sken-combobox-item>` does not appear in the rendered DOM tree\n * as itself — the parent `<sken-combobox>` projects the items\n * into its own Shadow DOM listbox. This is by design: the\n * listbox is a Sken concern, not a per-item concern.\n *\n * The props mirror the `SkenComboboxItemProps` contract in\n * `@sken-ds/contracts`. The contract is the source of truth; this\n * class is the runtime implementation.\n */\nimport { LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('sken-combobox-item')\nexport class SkenComboboxItem extends LitElement {\n /** Stable identifier. Forwarded to the parent on selection. */\n @property() value = ''\n\n /** Human-readable text shown in the trigger and the dropdown. */\n @property() label = ''\n\n /** Disabled state. @default false */\n @property({ type: Boolean, reflect: true })\n disabled = false\n\n /**\n * Marker element. Renders nothing. The parent\n * `<sken-combobox>` introspects this element via\n * `host.querySelectorAll('sken-combobox-item')` and projects\n * the items into its own Shadow DOM listbox.\n */\n protected override createRenderRoot(): HTMLElement {\n return this as unknown as HTMLElement\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sken-combobox-item': SkenComboboxItem\n }\n}\n"],"mappings":";;;;AA8CO,IAAM,IAAN,cAA+B,EAAW;;EASpC,aAPS,KAAA,QAAA,IAGA,KAAA,QAAA,IAIT,KAAA,WAAA;;CAQX,mBAAmD;EACjD,OAAO;CACT;AACF;AAlBG,EAAA,CAAA,EAAS,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGT,EAAA,CAAA,EAAS,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGT,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAT3C,IAAA,EAAA,CAAA,EAAc,oBAAoB,CAAA,GAAA,CAAA"}
1
+ {"version":3,"file":"sken-combobox-item.js","names":[],"sources":["../src/components/sken-combobox-item.ts"],"sourcesContent":["import { LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('sken-combobox-item')\nexport class SkenComboboxItem extends LitElement {\n @property() value = ''\n\n @property() label = ''\n\n @property({ type: Boolean, reflect: true })\n disabled = false\n\n protected override createRenderRoot(): HTMLElement {\n return this as unknown as HTMLElement\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sken-combobox-item': SkenComboboxItem\n }\n}\n"],"mappings":";;;;AAIO,IAAM,IAAN,cAA+B,EAAW;;EAMpC,aALS,KAAA,QAAA,IAEA,KAAA,QAAA,IAGT,KAAA,WAAA;;CAEX,mBAAmD;EACjD,OAAO;CACT;AACF;AAVG,EAAA,CAAA,EAAS,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAET,EAAA,CAAA,EAAS,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAET,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAN3C,IAAA,EAAA,CAAA,EAAc,oBAAoB,CAAA,GAAA,CAAA"}