@helixui/library 0.2.0 → 0.3.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 (3) hide show
  1. package/custom-elements.json +406 -406
  2. package/fouc.css +88 -0
  3. package/package.json +5 -3
package/custom-elements.json CHANGED
@@ -394,735 +394,735 @@
394
394
  },
395
395
  {
396
396
  "kind": "javascript-module",
397
- "path": "src/components/hx-alert/hx-alert.ts",
397
+ "path": "src/components/hx-action-bar/hx-action-bar.ts",
398
398
  "declarations": [
399
399
  {
400
400
  "kind": "class",
401
- "description": "A feedback component for communicating status messages, warnings, and errors.\nCritical for healthcare patient safety alerts.",
402
- "name": "HelixAlert",
401
+ "description": "A horizontal toolbar container for grouping related action buttons and controls.\nImplements the ARIA toolbar pattern with roving tabindex keyboard navigation.",
402
+ "name": "HelixActionBar",
403
403
  "cssProperties": [
404
404
  {
405
- "description": "Alert background color.",
406
- "name": "--hx-alert-bg",
407
- "default": "var(--hx-color-info-50)"
408
- },
409
- {
410
- "description": "Alert text color.",
411
- "name": "--hx-alert-color",
412
- "default": "var(--hx-color-info-800)"
413
- },
414
- {
415
- "description": "Alert border color.",
416
- "name": "--hx-alert-border-color",
417
- "default": "var(--hx-color-info-200)"
418
- },
419
- {
420
- "description": "Alert border radius.",
421
- "name": "--hx-alert-border-radius",
422
- "default": "var(--hx-border-radius-md)"
423
- },
424
- {
425
- "description": "Alert border width.",
426
- "name": "--hx-alert-border-width",
427
- "default": "var(--hx-border-width-thin)"
428
- },
429
- {
430
- "description": "Alert padding.",
431
- "name": "--hx-alert-padding",
432
- "default": "var(--hx-space-4)"
433
- },
434
- {
435
- "description": "Gap between alert elements.",
436
- "name": "--hx-alert-gap",
437
- "default": "var(--hx-space-3)"
405
+ "description": "Bar background color (default variant).",
406
+ "name": "--hx-action-bar-bg",
407
+ "default": "transparent"
438
408
  },
439
409
  {
440
- "description": "Alert icon color.",
441
- "name": "--hx-alert-icon-color",
442
- "default": "var(--hx-color-info-500)"
410
+ "description": "Bar border (default variant).",
411
+ "name": "--hx-action-bar-border",
412
+ "default": "none"
443
413
  },
444
414
  {
445
- "description": "Alert font family.",
446
- "name": "--hx-alert-font-family",
447
- "default": "var(--hx-font-family-sans)"
415
+ "description": "Inner padding.",
416
+ "name": "--hx-action-bar-padding",
417
+ "default": "var(--hx-space-2,0.5rem) var(--hx-space-3,0.75rem)"
448
418
  },
449
419
  {
450
- "description": "Minimum touch target size for the close button.",
451
- "name": "--hx-touch-target-size",
452
- "default": "44px"
420
+ "description": "Gap between slotted items.",
421
+ "name": "--hx-action-bar-gap",
422
+ "default": "var(--hx-space-2,0.5rem)"
453
423
  },
454
424
  {
455
- "description": "Width of the left border accent stripe.",
456
- "name": "--hx-alert-accent-width",
457
- "default": "4px"
425
+ "description": "Z-index when sticky or bottom position.",
426
+ "name": "--hx-action-bar-z-index",
427
+ "default": "10"
458
428
  }
459
429
  ],
460
430
  "cssParts": [
461
431
  {
462
- "description": "The outer alert container.",
463
- "name": "alert"
464
- },
465
- {
466
- "description": "The title/headline container.",
467
- "name": "title"
432
+ "description": "The root toolbar container element.",
433
+ "name": "base"
468
434
  },
469
435
  {
470
- "description": "The icon container.",
471
- "name": "icon"
436
+ "description": "The start (left) slot wrapper.",
437
+ "name": "start"
472
438
  },
473
439
  {
474
- "description": "The message content area.",
475
- "name": "message"
440
+ "description": "The center (default) slot wrapper.",
441
+ "name": "center"
476
442
  },
477
443
  {
478
- "description": "The dismiss button (only rendered when dismissible).",
479
- "name": "close-button"
444
+ "description": "The end (right) slot wrapper.",
445
+ "name": "end"
480
446
  },
481
447
  {
482
- "description": "The actions container.",
483
- "name": "actions"
448
+ "description": "The overflow slot wrapper (hidden when no overflow content).",
449
+ "name": "overflow"
484
450
  }
485
451
  ],
486
452
  "slots": [
487
453
  {
488
- "description": "Default slot for alert message content.",
489
- "name": ""
454
+ "description": "Left-aligned actions.",
455
+ "name": "start"
490
456
  },
491
457
  {
492
- "description": "Optional title/headline for the alert.",
493
- "name": "title"
458
+ "description": "Center content (default slot).",
459
+ "name": ""
494
460
  },
495
461
  {
496
- "description": "Custom icon to override the default variant icon.",
497
- "name": "icon"
462
+ "description": "Right-aligned actions.",
463
+ "name": "end"
498
464
  },
499
465
  {
500
- "description": "Action buttons rendered within the alert.",
501
- "name": "actions"
466
+ "description": "Actions revealed when the bar is constrained for space.",
467
+ "name": "overflow"
502
468
  }
503
469
  ],
504
470
  "members": [
505
471
  {
506
472
  "kind": "field",
507
- "name": "variant",
508
- "type": {
509
- "text": "AlertVariant"
510
- },
511
- "default": "'info'",
512
- "description": "Visual variant of the alert that determines colors and ARIA semantics.",
513
- "attribute": "variant",
514
- "reflects": true
515
- },
516
- {
517
- "kind": "field",
518
- "name": "dismissible",
473
+ "name": "size",
519
474
  "type": {
520
- "text": "boolean"
475
+ "text": "'sm' | 'md' | 'lg'"
521
476
  },
522
- "default": "false",
523
- "description": "Whether the alert can be dismissed by the user.",
524
- "attribute": "dismissible",
477
+ "default": "'md'",
478
+ "description": "Size of the action bar — propagated as a data attribute to slotted children.",
479
+ "attribute": "size",
525
480
  "reflects": true
526
481
  },
527
482
  {
528
483
  "kind": "field",
529
- "name": "open",
484
+ "name": "variant",
530
485
  "type": {
531
- "text": "boolean"
486
+ "text": "'default' | 'outlined' | 'filled'"
532
487
  },
533
- "default": "true",
534
- "description": "Whether the alert is visible. Set to false to hide the alert.",
535
- "attribute": "open",
488
+ "default": "'default'",
489
+ "description": "Visual variant controlling the bar background.",
490
+ "attribute": "variant",
536
491
  "reflects": true
537
492
  },
538
493
  {
539
494
  "kind": "field",
540
- "name": "showIcon",
495
+ "name": "position",
541
496
  "type": {
542
- "text": "boolean"
497
+ "text": "'top' | 'bottom' | 'sticky'"
543
498
  },
544
- "default": "true",
545
- "description": "Whether to show the default variant icon. Set to false to hide the icon container entirely.\nNote: Boolean attribute semantics apply — the attribute must be absent (not set to \"false\")\nto hide the icon. `<hx-alert show-icon=\"false\">` still shows the icon because the attribute\nis present; use `<hx-alert>` (attribute absent) or `el.showIcon = false` to hide it.",
546
- "attribute": "show-icon",
499
+ "default": "'top'",
500
+ "description": "Position and sticky behavior of the action bar.\n- `top` — normal flow (default)\n- `sticky` — sticks to the top of the scroll container; add `scroll-padding-top` to the\n scroll container equal to the bar height to prevent anchor targets from scrolling behind it\n- `bottom` — sticks to the bottom of the scroll container with iOS safe-area-inset support",
501
+ "attribute": "position",
547
502
  "reflects": true
548
503
  },
549
504
  {
550
505
  "kind": "field",
551
- "name": "accent",
506
+ "name": "sticky",
552
507
  "type": {
553
508
  "text": "boolean"
554
509
  },
555
510
  "default": "false",
556
- "description": "When true, applies a left border accent stripe instead of a full border.\nCommon healthcare/enterprise dashboard pattern for visual distinction of alert types.",
557
- "attribute": "accent",
511
+ "deprecated": "Use `position=\"sticky\"` instead.\nWhen true, the bar sticks to the top of its scroll container.",
512
+ "attribute": "sticky",
558
513
  "reflects": true
559
514
  },
560
515
  {
561
516
  "kind": "field",
562
- "name": "returnFocusTo",
517
+ "name": "ariaLabel",
563
518
  "type": {
564
- "text": "string | null"
519
+ "text": "string"
565
520
  },
566
- "default": "null",
567
- "description": "CSS selector for the element to return focus to after the alert is dismissed.\nWhen set, the component will find and focus the matching element after dismissal.\nIf not set, focus management is the caller's responsibility via the hx-after-close event.",
568
- "attribute": "return-focus-to"
521
+ "default": "'Actions'",
522
+ "description": "Accessible label for the toolbar.\nRequired when multiple toolbars appear on the same page.",
523
+ "attribute": "aria-label"
569
524
  },
570
525
  {
571
526
  "kind": "field",
572
- "name": "_hasActions",
527
+ "name": "_focusableCache",
573
528
  "type": {
574
- "text": "boolean"
529
+ "text": "HTMLElement[] | null"
575
530
  },
576
531
  "privacy": "private",
577
- "default": "false"
532
+ "default": "null",
533
+ "description": "Cached list of focusable items — invalidated on slot change."
578
534
  },
579
535
  {
580
536
  "kind": "field",
581
- "name": "_hasTitle",
537
+ "name": "_hasOverflow",
582
538
  "type": {
583
539
  "text": "boolean"
584
540
  },
585
541
  "privacy": "private",
586
- "default": "false"
587
- },
588
- {
589
- "kind": "field",
590
- "name": "_actionsSlotChangeHandler",
591
- "type": {
592
- "text": "(() => void) | null"
593
- },
594
- "privacy": "private",
595
- "default": "null"
542
+ "default": "false",
543
+ "description": "Whether the overflow slot has assigned content."
596
544
  },
597
545
  {
598
546
  "kind": "field",
599
- "name": "_titleSlotChangeHandler",
600
- "type": {
601
- "text": "(() => void) | null"
602
- },
547
+ "name": "_handleKeydown",
603
548
  "privacy": "private",
604
- "default": "null"
549
+ "description": "Arrow function field — stable reference for add/removeEventListener."
605
550
  },
606
551
  {
607
- "kind": "field",
608
- "name": "_isAssertive",
609
- "type": {
610
- "text": "boolean"
611
- },
552
+ "kind": "method",
553
+ "name": "_isFocusable",
612
554
  "privacy": "private",
613
- "description": "Returns true when the variant requires assertive announcement.",
614
- "readonly": true
615
- },
616
- {
617
- "kind": "field",
618
- "name": "_role",
619
- "type": {
620
- "text": "string"
555
+ "return": {
556
+ "type": {
557
+ "text": "boolean"
558
+ }
621
559
  },
622
- "privacy": "private",
623
- "description": "Returns the appropriate ARIA role based on variant.\nrole=\"alert\" implies aria-live=\"assertive\"; role=\"status\" implies aria-live=\"polite\".\nWe do NOT set aria-live explicitly to avoid double-announcements in JAWS.",
624
- "readonly": true
560
+ "parameters": [
561
+ {
562
+ "name": "el",
563
+ "type": {
564
+ "text": "HTMLElement"
565
+ }
566
+ }
567
+ ]
625
568
  },
626
569
  {
627
570
  "kind": "method",
628
- "name": "_renderInfoIcon",
629
- "privacy": "private"
571
+ "name": "_getFocusableItems",
572
+ "privacy": "private",
573
+ "return": {
574
+ "type": {
575
+ "text": "HTMLElement[]"
576
+ }
577
+ }
630
578
  },
631
579
  {
632
580
  "kind": "method",
633
- "name": "_renderSuccessIcon",
634
- "privacy": "private"
581
+ "name": "_initRovingTabindex",
582
+ "privacy": "private",
583
+ "return": {
584
+ "type": {
585
+ "text": "void"
586
+ }
587
+ }
635
588
  },
636
589
  {
637
590
  "kind": "method",
638
- "name": "_renderWarningIcon",
639
- "privacy": "private"
591
+ "name": "_moveFocus",
592
+ "privacy": "private",
593
+ "return": {
594
+ "type": {
595
+ "text": "void"
596
+ }
597
+ },
598
+ "parameters": [
599
+ {
600
+ "name": "direction",
601
+ "type": {
602
+ "text": "'next' | 'prev'"
603
+ }
604
+ }
605
+ ]
640
606
  },
641
607
  {
642
608
  "kind": "method",
643
- "name": "_renderErrorIcon",
644
- "privacy": "private"
645
- },
646
- {
647
- "kind": "method",
648
- "name": "_renderDefaultIcon",
649
- "privacy": "private"
650
- },
651
- {
652
- "kind": "method",
653
- "name": "_renderCloseIcon",
654
- "privacy": "private"
655
- },
656
- {
657
- "kind": "method",
658
- "name": "_handleDismiss",
609
+ "name": "_handleSlotChange",
659
610
  "privacy": "private",
660
611
  "return": {
661
612
  "type": {
662
613
  "text": "void"
663
614
  }
664
- }
615
+ },
616
+ "parameters": [
617
+ {
618
+ "name": "e",
619
+ "type": {
620
+ "text": "Event"
621
+ }
622
+ }
623
+ ]
665
624
  }
666
625
  ],
667
- "events": [
626
+ "attributes": [
668
627
  {
669
- "name": "hx-close",
628
+ "name": "size",
670
629
  "type": {
671
- "text": "CustomEvent<{reason: string}>"
630
+ "text": "'sm' | 'md' | 'lg'"
672
631
  },
673
- "description": "Dispatched when the user dismisses the alert."
632
+ "default": "'md'",
633
+ "description": "Size of the action bar — propagated as a data attribute to slotted children.",
634
+ "fieldName": "size",
635
+ "attribute": "size"
674
636
  },
675
- {
676
- "name": "hx-after-close",
677
- "type": {
678
- "text": "CustomEvent"
679
- },
680
- "description": "Dispatched after the alert is dismissed."
681
- }
682
- ],
683
- "attributes": [
684
637
  {
685
638
  "name": "variant",
686
639
  "type": {
687
- "text": "AlertVariant"
640
+ "text": "'default' | 'outlined' | 'filled'"
688
641
  },
689
- "default": "'info'",
690
- "description": "Visual variant of the alert that determines colors and ARIA semantics.",
642
+ "default": "'default'",
643
+ "description": "Visual variant controlling the bar background.",
691
644
  "fieldName": "variant",
692
645
  "attribute": "variant"
693
646
  },
694
647
  {
695
- "name": "dismissible",
696
- "type": {
697
- "text": "boolean"
698
- },
699
- "default": "false",
700
- "description": "Whether the alert can be dismissed by the user.",
701
- "fieldName": "dismissible",
702
- "attribute": "dismissible"
703
- },
704
- {
705
- "name": "open",
706
- "type": {
707
- "text": "boolean"
708
- },
709
- "default": "true",
710
- "description": "Whether the alert is visible. Set to false to hide the alert.",
711
- "fieldName": "open",
712
- "attribute": "open"
713
- },
714
- {
715
- "name": "show-icon",
648
+ "name": "position",
716
649
  "type": {
717
- "text": "boolean"
650
+ "text": "'top' | 'bottom' | 'sticky'"
718
651
  },
719
- "default": "true",
720
- "description": "Whether to show the default variant icon. Set to false to hide the icon container entirely.\nNote: Boolean attribute semantics apply — the attribute must be absent (not set to \"false\")\nto hide the icon. `<hx-alert show-icon=\"false\">` still shows the icon because the attribute\nis present; use `<hx-alert>` (attribute absent) or `el.showIcon = false` to hide it.",
721
- "fieldName": "showIcon",
722
- "attribute": "show-icon"
652
+ "default": "'top'",
653
+ "description": "Position and sticky behavior of the action bar.\n- `top` — normal flow (default)\n- `sticky` — sticks to the top of the scroll container; add `scroll-padding-top` to the\n scroll container equal to the bar height to prevent anchor targets from scrolling behind it\n- `bottom` — sticks to the bottom of the scroll container with iOS safe-area-inset support",
654
+ "fieldName": "position",
655
+ "attribute": "position"
723
656
  },
724
657
  {
725
- "name": "accent",
658
+ "name": "sticky",
726
659
  "type": {
727
660
  "text": "boolean"
728
661
  },
729
662
  "default": "false",
730
- "description": "When true, applies a left border accent stripe instead of a full border.\nCommon healthcare/enterprise dashboard pattern for visual distinction of alert types.",
731
- "fieldName": "accent",
732
- "attribute": "accent"
663
+ "deprecated": "Use `position=\"sticky\"` instead.\nWhen true, the bar sticks to the top of its scroll container.",
664
+ "fieldName": "sticky",
665
+ "attribute": "sticky"
733
666
  },
734
667
  {
735
- "name": "return-focus-to",
668
+ "name": "aria-label",
736
669
  "type": {
737
- "text": "string | null"
670
+ "text": "string"
738
671
  },
739
- "default": "null",
740
- "description": "CSS selector for the element to return focus to after the alert is dismissed.\nWhen set, the component will find and focus the matching element after dismissal.\nIf not set, focus management is the caller's responsibility via the hx-after-close event.",
741
- "fieldName": "returnFocusTo",
742
- "attribute": "return-focus-to"
672
+ "default": "'Actions'",
673
+ "description": "Accessible label for the toolbar.\nRequired when multiple toolbars appear on the same page.",
674
+ "fieldName": "ariaLabel",
675
+ "attribute": "aria-label"
743
676
  }
744
677
  ],
745
678
  "superclass": {
746
679
  "name": "LitElement",
747
680
  "package": "lit"
748
681
  },
749
- "tagName": "hx-alert",
682
+ "tagName": "hx-action-bar",
750
683
  "customElement": true,
751
- "summary": "Feedback alert for status messages with variant-based styling and ARIA live regions."
684
+ "summary": "Horizontal action bar for grouping related controls."
752
685
  }
753
686
  ],
754
687
  "exports": [
755
688
  {
756
689
  "kind": "js",
757
- "name": "HelixAlert",
690
+ "name": "HelixActionBar",
758
691
  "declaration": {
759
- "name": "HelixAlert",
760
- "module": "src/components/hx-alert/hx-alert.ts"
692
+ "name": "HelixActionBar",
693
+ "module": "src/components/hx-action-bar/hx-action-bar.ts"
761
694
  }
762
695
  },
763
696
  {
764
697
  "kind": "custom-element-definition",
765
- "name": "hx-alert",
766
- "declaration": {
767
- "name": "HelixAlert",
768
- "module": "src/components/hx-alert/hx-alert.ts"
769
- }
770
- },
771
- {
772
- "kind": "js",
773
- "name": "HxAlert",
698
+ "name": "hx-action-bar",
774
699
  "declaration": {
775
- "name": "HelixAlert",
776
- "module": "src/components/hx-alert/hx-alert.ts"
700
+ "name": "HelixActionBar",
701
+ "module": "src/components/hx-action-bar/hx-action-bar.ts"
777
702
  }
778
703
  }
779
704
  ]
780
705
  },
781
706
  {
782
707
  "kind": "javascript-module",
783
- "path": "src/components/hx-alert/index.ts",
708
+ "path": "src/components/hx-action-bar/index.ts",
784
709
  "declarations": [],
785
710
  "exports": [
786
711
  {
787
712
  "kind": "js",
788
- "name": "HelixAlert",
789
- "declaration": {
790
- "name": "HelixAlert",
791
- "module": "./hx-alert.js"
792
- }
793
- },
794
- {
795
- "kind": "js",
796
- "name": "AlertVariant",
713
+ "name": "HelixActionBar",
797
714
  "declaration": {
798
- "name": "AlertVariant",
799
- "module": "./hx-alert.js"
715
+ "name": "HelixActionBar",
716
+ "module": "./hx-action-bar.js"
800
717
  }
801
718
  }
802
719
  ]
803
720
  },
804
721
  {
805
722
  "kind": "javascript-module",
806
- "path": "src/components/hx-action-bar/hx-action-bar.ts",
723
+ "path": "src/components/hx-alert/hx-alert.ts",
807
724
  "declarations": [
808
725
  {
809
726
  "kind": "class",
810
- "description": "A horizontal toolbar container for grouping related action buttons and controls.\nImplements the ARIA toolbar pattern with roving tabindex keyboard navigation.",
811
- "name": "HelixActionBar",
727
+ "description": "A feedback component for communicating status messages, warnings, and errors.\nCritical for healthcare patient safety alerts.",
728
+ "name": "HelixAlert",
812
729
  "cssProperties": [
813
730
  {
814
- "description": "Bar background color (default variant).",
815
- "name": "--hx-action-bar-bg",
816
- "default": "transparent"
731
+ "description": "Alert background color.",
732
+ "name": "--hx-alert-bg",
733
+ "default": "var(--hx-color-info-50)"
817
734
  },
818
735
  {
819
- "description": "Bar border (default variant).",
820
- "name": "--hx-action-bar-border",
821
- "default": "none"
736
+ "description": "Alert text color.",
737
+ "name": "--hx-alert-color",
738
+ "default": "var(--hx-color-info-800)"
822
739
  },
823
740
  {
824
- "description": "Inner padding.",
825
- "name": "--hx-action-bar-padding",
826
- "default": "var(--hx-space-2,0.5rem) var(--hx-space-3,0.75rem)"
741
+ "description": "Alert border color.",
742
+ "name": "--hx-alert-border-color",
743
+ "default": "var(--hx-color-info-200)"
827
744
  },
828
745
  {
829
- "description": "Gap between slotted items.",
830
- "name": "--hx-action-bar-gap",
831
- "default": "var(--hx-space-2,0.5rem)"
746
+ "description": "Alert border radius.",
747
+ "name": "--hx-alert-border-radius",
748
+ "default": "var(--hx-border-radius-md)"
832
749
  },
833
750
  {
834
- "description": "Z-index when sticky or bottom position.",
835
- "name": "--hx-action-bar-z-index",
836
- "default": "10"
751
+ "description": "Alert border width.",
752
+ "name": "--hx-alert-border-width",
753
+ "default": "var(--hx-border-width-thin)"
754
+ },
755
+ {
756
+ "description": "Alert padding.",
757
+ "name": "--hx-alert-padding",
758
+ "default": "var(--hx-space-4)"
759
+ },
760
+ {
761
+ "description": "Gap between alert elements.",
762
+ "name": "--hx-alert-gap",
763
+ "default": "var(--hx-space-3)"
764
+ },
765
+ {
766
+ "description": "Alert icon color.",
767
+ "name": "--hx-alert-icon-color",
768
+ "default": "var(--hx-color-info-500)"
769
+ },
770
+ {
771
+ "description": "Alert font family.",
772
+ "name": "--hx-alert-font-family",
773
+ "default": "var(--hx-font-family-sans)"
774
+ },
775
+ {
776
+ "description": "Minimum touch target size for the close button.",
777
+ "name": "--hx-touch-target-size",
778
+ "default": "44px"
779
+ },
780
+ {
781
+ "description": "Width of the left border accent stripe.",
782
+ "name": "--hx-alert-accent-width",
783
+ "default": "4px"
837
784
  }
838
785
  ],
839
786
  "cssParts": [
840
787
  {
841
- "description": "The root toolbar container element.",
842
- "name": "base"
788
+ "description": "The outer alert container.",
789
+ "name": "alert"
843
790
  },
844
791
  {
845
- "description": "The start (left) slot wrapper.",
846
- "name": "start"
792
+ "description": "The title/headline container.",
793
+ "name": "title"
847
794
  },
848
795
  {
849
- "description": "The center (default) slot wrapper.",
850
- "name": "center"
796
+ "description": "The icon container.",
797
+ "name": "icon"
851
798
  },
852
799
  {
853
- "description": "The end (right) slot wrapper.",
854
- "name": "end"
800
+ "description": "The message content area.",
801
+ "name": "message"
855
802
  },
856
803
  {
857
- "description": "The overflow slot wrapper (hidden when no overflow content).",
858
- "name": "overflow"
804
+ "description": "The dismiss button (only rendered when dismissible).",
805
+ "name": "close-button"
806
+ },
807
+ {
808
+ "description": "The actions container.",
809
+ "name": "actions"
859
810
  }
860
811
  ],
861
812
  "slots": [
862
813
  {
863
- "description": "Left-aligned actions.",
864
- "name": "start"
814
+ "description": "Default slot for alert message content.",
815
+ "name": ""
865
816
  },
866
817
  {
867
- "description": "Center content (default slot).",
868
- "name": ""
818
+ "description": "Optional title/headline for the alert.",
819
+ "name": "title"
869
820
  },
870
821
  {
871
- "description": "Right-aligned actions.",
872
- "name": "end"
822
+ "description": "Custom icon to override the default variant icon.",
823
+ "name": "icon"
873
824
  },
874
825
  {
875
- "description": "Actions revealed when the bar is constrained for space.",
876
- "name": "overflow"
826
+ "description": "Action buttons rendered within the alert.",
827
+ "name": "actions"
877
828
  }
878
829
  ],
879
830
  "members": [
880
831
  {
881
832
  "kind": "field",
882
- "name": "size",
833
+ "name": "variant",
883
834
  "type": {
884
- "text": "'sm' | 'md' | 'lg'"
835
+ "text": "AlertVariant"
885
836
  },
886
- "default": "'md'",
887
- "description": "Size of the action bar — propagated as a data attribute to slotted children.",
888
- "attribute": "size",
837
+ "default": "'info'",
838
+ "description": "Visual variant of the alert that determines colors and ARIA semantics.",
839
+ "attribute": "variant",
840
+ "reflects": true
841
+ },
842
+ {
843
+ "kind": "field",
844
+ "name": "dismissible",
845
+ "type": {
846
+ "text": "boolean"
847
+ },
848
+ "default": "false",
849
+ "description": "Whether the alert can be dismissed by the user.",
850
+ "attribute": "dismissible",
851
+ "reflects": true
852
+ },
853
+ {
854
+ "kind": "field",
855
+ "name": "open",
856
+ "type": {
857
+ "text": "boolean"
858
+ },
859
+ "default": "true",
860
+ "description": "Whether the alert is visible. Set to false to hide the alert.",
861
+ "attribute": "open",
862
+ "reflects": true
863
+ },
864
+ {
865
+ "kind": "field",
866
+ "name": "showIcon",
867
+ "type": {
868
+ "text": "boolean"
869
+ },
870
+ "default": "true",
871
+ "description": "Whether to show the default variant icon. Set to false to hide the icon container entirely.\nNote: Boolean attribute semantics apply — the attribute must be absent (not set to \"false\")\nto hide the icon. `<hx-alert show-icon=\"false\">` still shows the icon because the attribute\nis present; use `<hx-alert>` (attribute absent) or `el.showIcon = false` to hide it.",
872
+ "attribute": "show-icon",
873
+ "reflects": true
874
+ },
875
+ {
876
+ "kind": "field",
877
+ "name": "accent",
878
+ "type": {
879
+ "text": "boolean"
880
+ },
881
+ "default": "false",
882
+ "description": "When true, applies a left border accent stripe instead of a full border.\nCommon healthcare/enterprise dashboard pattern for visual distinction of alert types.",
883
+ "attribute": "accent",
889
884
  "reflects": true
890
885
  },
891
886
  {
892
887
  "kind": "field",
893
- "name": "variant",
888
+ "name": "returnFocusTo",
894
889
  "type": {
895
- "text": "'default' | 'outlined' | 'filled'"
890
+ "text": "string | null"
896
891
  },
897
- "default": "'default'",
898
- "description": "Visual variant controlling the bar background.",
899
- "attribute": "variant",
900
- "reflects": true
892
+ "default": "null",
893
+ "description": "CSS selector for the element to return focus to after the alert is dismissed.\nWhen set, the component will find and focus the matching element after dismissal.\nIf not set, focus management is the caller's responsibility via the hx-after-close event.",
894
+ "attribute": "return-focus-to"
901
895
  },
902
896
  {
903
897
  "kind": "field",
904
- "name": "position",
898
+ "name": "_hasActions",
905
899
  "type": {
906
- "text": "'top' | 'bottom' | 'sticky'"
900
+ "text": "boolean"
907
901
  },
908
- "default": "'top'",
909
- "description": "Position and sticky behavior of the action bar.\n- `top` — normal flow (default)\n- `sticky` — sticks to the top of the scroll container; add `scroll-padding-top` to the\n scroll container equal to the bar height to prevent anchor targets from scrolling behind it\n- `bottom` — sticks to the bottom of the scroll container with iOS safe-area-inset support",
910
- "attribute": "position",
911
- "reflects": true
902
+ "privacy": "private",
903
+ "default": "false"
912
904
  },
913
905
  {
914
906
  "kind": "field",
915
- "name": "sticky",
907
+ "name": "_hasTitle",
916
908
  "type": {
917
909
  "text": "boolean"
918
910
  },
919
- "default": "false",
920
- "deprecated": "Use `position=\"sticky\"` instead.\nWhen true, the bar sticks to the top of its scroll container.",
921
- "attribute": "sticky",
922
- "reflects": true
911
+ "privacy": "private",
912
+ "default": "false"
923
913
  },
924
914
  {
925
915
  "kind": "field",
926
- "name": "ariaLabel",
916
+ "name": "_actionsSlotChangeHandler",
927
917
  "type": {
928
- "text": "string"
918
+ "text": "(() => void) | null"
929
919
  },
930
- "default": "'Actions'",
931
- "description": "Accessible label for the toolbar.\nRequired when multiple toolbars appear on the same page.",
932
- "attribute": "aria-label"
920
+ "privacy": "private",
921
+ "default": "null"
933
922
  },
934
923
  {
935
924
  "kind": "field",
936
- "name": "_focusableCache",
925
+ "name": "_titleSlotChangeHandler",
937
926
  "type": {
938
- "text": "HTMLElement[] | null"
927
+ "text": "(() => void) | null"
939
928
  },
940
929
  "privacy": "private",
941
- "default": "null",
942
- "description": "Cached list of focusable items — invalidated on slot change."
930
+ "default": "null"
943
931
  },
944
932
  {
945
933
  "kind": "field",
946
- "name": "_hasOverflow",
934
+ "name": "_isAssertive",
947
935
  "type": {
948
936
  "text": "boolean"
949
937
  },
950
938
  "privacy": "private",
951
- "default": "false",
952
- "description": "Whether the overflow slot has assigned content."
939
+ "description": "Returns true when the variant requires assertive announcement.",
940
+ "readonly": true
953
941
  },
954
942
  {
955
943
  "kind": "field",
956
- "name": "_handleKeydown",
944
+ "name": "_role",
945
+ "type": {
946
+ "text": "string"
947
+ },
957
948
  "privacy": "private",
958
- "description": "Arrow function field — stable reference for add/removeEventListener."
949
+ "description": "Returns the appropriate ARIA role based on variant.\nrole=\"alert\" implies aria-live=\"assertive\"; role=\"status\" implies aria-live=\"polite\".\nWe do NOT set aria-live explicitly to avoid double-announcements in JAWS.",
950
+ "readonly": true
959
951
  },
960
952
  {
961
953
  "kind": "method",
962
- "name": "_isFocusable",
963
- "privacy": "private",
964
- "return": {
965
- "type": {
966
- "text": "boolean"
967
- }
968
- },
969
- "parameters": [
970
- {
971
- "name": "el",
972
- "type": {
973
- "text": "HTMLElement"
974
- }
975
- }
976
- ]
954
+ "name": "_renderInfoIcon",
955
+ "privacy": "private"
977
956
  },
978
957
  {
979
958
  "kind": "method",
980
- "name": "_getFocusableItems",
981
- "privacy": "private",
982
- "return": {
983
- "type": {
984
- "text": "HTMLElement[]"
985
- }
986
- }
959
+ "name": "_renderSuccessIcon",
960
+ "privacy": "private"
987
961
  },
988
962
  {
989
963
  "kind": "method",
990
- "name": "_initRovingTabindex",
991
- "privacy": "private",
992
- "return": {
993
- "type": {
994
- "text": "void"
995
- }
996
- }
964
+ "name": "_renderWarningIcon",
965
+ "privacy": "private"
997
966
  },
998
967
  {
999
968
  "kind": "method",
1000
- "name": "_moveFocus",
1001
- "privacy": "private",
1002
- "return": {
1003
- "type": {
1004
- "text": "void"
1005
- }
1006
- },
1007
- "parameters": [
1008
- {
1009
- "name": "direction",
1010
- "type": {
1011
- "text": "'next' | 'prev'"
1012
- }
1013
- }
1014
- ]
969
+ "name": "_renderErrorIcon",
970
+ "privacy": "private"
1015
971
  },
1016
972
  {
1017
973
  "kind": "method",
1018
- "name": "_handleSlotChange",
974
+ "name": "_renderDefaultIcon",
975
+ "privacy": "private"
976
+ },
977
+ {
978
+ "kind": "method",
979
+ "name": "_renderCloseIcon",
980
+ "privacy": "private"
981
+ },
982
+ {
983
+ "kind": "method",
984
+ "name": "_handleDismiss",
1019
985
  "privacy": "private",
1020
986
  "return": {
1021
987
  "type": {
1022
988
  "text": "void"
1023
989
  }
1024
- },
1025
- "parameters": [
1026
- {
1027
- "name": "e",
1028
- "type": {
1029
- "text": "Event"
1030
- }
1031
- }
1032
- ]
990
+ }
1033
991
  }
1034
992
  ],
1035
- "attributes": [
993
+ "events": [
1036
994
  {
1037
- "name": "size",
995
+ "name": "hx-close",
1038
996
  "type": {
1039
- "text": "'sm' | 'md' | 'lg'"
997
+ "text": "CustomEvent<{reason: string}>"
1040
998
  },
1041
- "default": "'md'",
1042
- "description": "Size of the action bar — propagated as a data attribute to slotted children.",
1043
- "fieldName": "size",
1044
- "attribute": "size"
999
+ "description": "Dispatched when the user dismisses the alert."
1045
1000
  },
1001
+ {
1002
+ "name": "hx-after-close",
1003
+ "type": {
1004
+ "text": "CustomEvent"
1005
+ },
1006
+ "description": "Dispatched after the alert is dismissed."
1007
+ }
1008
+ ],
1009
+ "attributes": [
1046
1010
  {
1047
1011
  "name": "variant",
1048
1012
  "type": {
1049
- "text": "'default' | 'outlined' | 'filled'"
1013
+ "text": "AlertVariant"
1050
1014
  },
1051
- "default": "'default'",
1052
- "description": "Visual variant controlling the bar background.",
1015
+ "default": "'info'",
1016
+ "description": "Visual variant of the alert that determines colors and ARIA semantics.",
1053
1017
  "fieldName": "variant",
1054
1018
  "attribute": "variant"
1055
1019
  },
1056
1020
  {
1057
- "name": "position",
1021
+ "name": "dismissible",
1058
1022
  "type": {
1059
- "text": "'top' | 'bottom' | 'sticky'"
1023
+ "text": "boolean"
1060
1024
  },
1061
- "default": "'top'",
1062
- "description": "Position and sticky behavior of the action bar.\n- `top` — normal flow (default)\n- `sticky` — sticks to the top of the scroll container; add `scroll-padding-top` to the\n scroll container equal to the bar height to prevent anchor targets from scrolling behind it\n- `bottom` — sticks to the bottom of the scroll container with iOS safe-area-inset support",
1063
- "fieldName": "position",
1064
- "attribute": "position"
1025
+ "default": "false",
1026
+ "description": "Whether the alert can be dismissed by the user.",
1027
+ "fieldName": "dismissible",
1028
+ "attribute": "dismissible"
1065
1029
  },
1066
1030
  {
1067
- "name": "sticky",
1031
+ "name": "open",
1032
+ "type": {
1033
+ "text": "boolean"
1034
+ },
1035
+ "default": "true",
1036
+ "description": "Whether the alert is visible. Set to false to hide the alert.",
1037
+ "fieldName": "open",
1038
+ "attribute": "open"
1039
+ },
1040
+ {
1041
+ "name": "show-icon",
1042
+ "type": {
1043
+ "text": "boolean"
1044
+ },
1045
+ "default": "true",
1046
+ "description": "Whether to show the default variant icon. Set to false to hide the icon container entirely.\nNote: Boolean attribute semantics apply — the attribute must be absent (not set to \"false\")\nto hide the icon. `<hx-alert show-icon=\"false\">` still shows the icon because the attribute\nis present; use `<hx-alert>` (attribute absent) or `el.showIcon = false` to hide it.",
1047
+ "fieldName": "showIcon",
1048
+ "attribute": "show-icon"
1049
+ },
1050
+ {
1051
+ "name": "accent",
1068
1052
  "type": {
1069
1053
  "text": "boolean"
1070
1054
  },
1071
1055
  "default": "false",
1072
- "deprecated": "Use `position=\"sticky\"` instead.\nWhen true, the bar sticks to the top of its scroll container.",
1073
- "fieldName": "sticky",
1074
- "attribute": "sticky"
1056
+ "description": "When true, applies a left border accent stripe instead of a full border.\nCommon healthcare/enterprise dashboard pattern for visual distinction of alert types.",
1057
+ "fieldName": "accent",
1058
+ "attribute": "accent"
1075
1059
  },
1076
1060
  {
1077
- "name": "aria-label",
1061
+ "name": "return-focus-to",
1078
1062
  "type": {
1079
- "text": "string"
1063
+ "text": "string | null"
1080
1064
  },
1081
- "default": "'Actions'",
1082
- "description": "Accessible label for the toolbar.\nRequired when multiple toolbars appear on the same page.",
1083
- "fieldName": "ariaLabel",
1084
- "attribute": "aria-label"
1065
+ "default": "null",
1066
+ "description": "CSS selector for the element to return focus to after the alert is dismissed.\nWhen set, the component will find and focus the matching element after dismissal.\nIf not set, focus management is the caller's responsibility via the hx-after-close event.",
1067
+ "fieldName": "returnFocusTo",
1068
+ "attribute": "return-focus-to"
1085
1069
  }
1086
1070
  ],
1087
1071
  "superclass": {
1088
1072
  "name": "LitElement",
1089
1073
  "package": "lit"
1090
1074
  },
1091
- "tagName": "hx-action-bar",
1075
+ "tagName": "hx-alert",
1092
1076
  "customElement": true,
1093
- "summary": "Horizontal action bar for grouping related controls."
1077
+ "summary": "Feedback alert for status messages with variant-based styling and ARIA live regions."
1094
1078
  }
1095
1079
  ],
1096
1080
  "exports": [
1097
1081
  {
1098
1082
  "kind": "js",
1099
- "name": "HelixActionBar",
1083
+ "name": "HelixAlert",
1100
1084
  "declaration": {
1101
- "name": "HelixActionBar",
1102
- "module": "src/components/hx-action-bar/hx-action-bar.ts"
1085
+ "name": "HelixAlert",
1086
+ "module": "src/components/hx-alert/hx-alert.ts"
1103
1087
  }
1104
1088
  },
1105
1089
  {
1106
1090
  "kind": "custom-element-definition",
1107
- "name": "hx-action-bar",
1091
+ "name": "hx-alert",
1108
1092
  "declaration": {
1109
- "name": "HelixActionBar",
1110
- "module": "src/components/hx-action-bar/hx-action-bar.ts"
1093
+ "name": "HelixAlert",
1094
+ "module": "src/components/hx-alert/hx-alert.ts"
1095
+ }
1096
+ },
1097
+ {
1098
+ "kind": "js",
1099
+ "name": "HxAlert",
1100
+ "declaration": {
1101
+ "name": "HelixAlert",
1102
+ "module": "src/components/hx-alert/hx-alert.ts"
1111
1103
  }
1112
1104
  }
1113
1105
  ]
1114
1106
  },
1115
1107
  {
1116
1108
  "kind": "javascript-module",
1117
- "path": "src/components/hx-action-bar/index.ts",
1109
+ "path": "src/components/hx-alert/index.ts",
1118
1110
  "declarations": [],
1119
1111
  "exports": [
1120
1112
  {
1121
1113
  "kind": "js",
1122
- "name": "HelixActionBar",
1114
+ "name": "HelixAlert",
1123
1115
  "declaration": {
1124
- "name": "HelixActionBar",
1125
- "module": "./hx-action-bar.js"
1116
+ "name": "HelixAlert",
1117
+ "module": "./hx-alert.js"
1118
+ }
1119
+ },
1120
+ {
1121
+ "kind": "js",
1122
+ "name": "AlertVariant",
1123
+ "declaration": {
1124
+ "name": "AlertVariant",
1125
+ "module": "./hx-alert.js"
1126
1126
  }
1127
1127
  }
1128
1128
  ]
package/fouc.css ADDED
@@ -0,0 +1,88 @@
1
+ /**
2
+ * HELiX FOUC Prevention Stylesheet
3
+ *
4
+ * Load this stylesheet in <head> before your JS bundle to prevent
5
+ * Flash of Unstyled Content (FOUC) for HELiX web components.
6
+ *
7
+ * Usage:
8
+ * <link rel="stylesheet" href="@helixui/library/fouc.css" />
9
+ *
10
+ * Once each component's JS registers, the :defined pseudo-class
11
+ * matches and the element becomes visible automatically.
12
+ */
13
+
14
+ hx-accordion:not(:defined),
15
+ hx-action-bar:not(:defined),
16
+ hx-alert:not(:defined),
17
+ hx-avatar:not(:defined),
18
+ hx-badge:not(:defined),
19
+ hx-breadcrumb:not(:defined),
20
+ hx-button:not(:defined),
21
+ hx-button-group:not(:defined),
22
+ hx-card:not(:defined),
23
+ hx-carousel:not(:defined),
24
+ hx-checkbox:not(:defined),
25
+ hx-checkbox-group:not(:defined),
26
+ hx-code-snippet:not(:defined),
27
+ hx-color-picker:not(:defined),
28
+ hx-combobox:not(:defined),
29
+ hx-container:not(:defined),
30
+ hx-copy-button:not(:defined),
31
+ hx-data-table:not(:defined),
32
+ hx-date-picker:not(:defined),
33
+ hx-dialog:not(:defined),
34
+ hx-divider:not(:defined),
35
+ hx-drawer:not(:defined),
36
+ hx-dropdown:not(:defined),
37
+ hx-field:not(:defined),
38
+ hx-field-label:not(:defined),
39
+ hx-file-upload:not(:defined),
40
+ hx-form:not(:defined),
41
+ hx-format-date:not(:defined),
42
+ hx-grid:not(:defined),
43
+ hx-help-text:not(:defined),
44
+ hx-icon:not(:defined),
45
+ hx-icon-button:not(:defined),
46
+ hx-image:not(:defined),
47
+ hx-link:not(:defined),
48
+ hx-list:not(:defined),
49
+ hx-menu:not(:defined),
50
+ hx-meter:not(:defined),
51
+ hx-nav:not(:defined),
52
+ hx-number-input:not(:defined),
53
+ hx-overflow-menu:not(:defined),
54
+ hx-pagination:not(:defined),
55
+ hx-popover:not(:defined),
56
+ hx-popup:not(:defined),
57
+ hx-progress-bar:not(:defined),
58
+ hx-progress-ring:not(:defined),
59
+ hx-prose:not(:defined),
60
+ hx-radio-group:not(:defined),
61
+ hx-rating:not(:defined),
62
+ hx-select:not(:defined),
63
+ hx-side-nav:not(:defined),
64
+ hx-skeleton:not(:defined),
65
+ hx-slider:not(:defined),
66
+ hx-spinner:not(:defined),
67
+ hx-split-button:not(:defined),
68
+ hx-split-panel:not(:defined),
69
+ hx-stack:not(:defined),
70
+ hx-status-indicator:not(:defined),
71
+ hx-steps:not(:defined),
72
+ hx-structured-list:not(:defined),
73
+ hx-switch:not(:defined),
74
+ hx-tabs:not(:defined),
75
+ hx-tag:not(:defined),
76
+ hx-text:not(:defined),
77
+ hx-text-input:not(:defined),
78
+ hx-textarea:not(:defined),
79
+ hx-theme:not(:defined),
80
+ hx-time-picker:not(:defined),
81
+ hx-toast:not(:defined),
82
+ hx-toggle-button:not(:defined),
83
+ hx-tooltip:not(:defined),
84
+ hx-top-nav:not(:defined),
85
+ hx-tree-view:not(:defined),
86
+ hx-visually-hidden:not(:defined) {
87
+ visibility: hidden;
88
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helixui/library",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "description": "Enterprise Web Component Library built with Lit 3.x",
5
5
  "type": "module",
6
6
  "sideEffects": [
@@ -20,11 +20,13 @@
20
20
  "types": "./dist/components/*/index.d.ts",
21
21
  "import": "./dist/components/*/index.js"
22
22
  },
23
- "./custom-elements.json": "./custom-elements.json"
23
+ "./custom-elements.json": "./custom-elements.json",
24
+ "./fouc.css": "./fouc.css"
24
25
  },
25
26
  "files": [
26
27
  "dist",
27
- "custom-elements.json"
28
+ "custom-elements.json",
29
+ "fouc.css"
28
30
  ],
29
31
  "customElements": "custom-elements.json",
30
32
  "scripts": {