@helixui/library 1.1.2 → 2.0.0-next.31

package/dist/css/hx-action-bar.css

@@ -0,0 +1,117 @@
+/* hx-action-bar — extracted from Shadow DOM styles */
+:host {
+    display: block;
+  }
+
+  /* ─── Base ─── */
+
+  .base {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--hx-action-bar-gap, var(--hx-space-2, 0.5rem));
+    padding: var(--hx-action-bar-padding, var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem));
+    background: var(--hx-action-bar-bg, transparent);
+    border: var(--hx-action-bar-border, none);
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  /* ─── Sticky (top) ─── */
+
+  .base--sticky {
+    position: sticky;
+    top: 0;
+    padding-top: max(var(--hx-action-bar-padding-block-start, 0px), env(safe-area-inset-top, 0px));
+    z-index: var(--hx-action-bar-z-index, 10);
+    /*
+     * Consumers: when this bar is sticky, add scroll-padding-top to the scroll container
+     * equal to the bar's rendered height so anchor targets are not hidden behind the bar.
+     * Example: .scroll-container { scroll-padding-top: 2.5rem; }
+     */
+  }
+
+  /* ─── Bottom sticky ─── */
+
+  .base--bottom {
+    position: sticky;
+    bottom: 0;
+    /*
+     * Respect iOS home-indicator safe area on devices with notch/home bar.
+     * Falls back to 0px on devices that do not support env().
+     */
+    padding-bottom: max(
+      var(--hx-action-bar-padding-block-end, 0px),
+      env(safe-area-inset-bottom, 0px)
+    );
+    z-index: var(--hx-action-bar-z-index, 10);
+  }
+
+  /* ─── Variant: outlined ─── */
+
+  .base--outlined {
+    background: var(--hx-action-bar-bg, var(--hx-color-neutral-0, #fff));
+    border: var(
+      --hx-action-bar-border,
+      var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb)
+    );
+    border-radius: var(--hx-border-radius-md, 0.375rem);
+  }
+
+  /* ─── Variant: filled ─── */
+
+  .base--filled {
+    background: var(--hx-action-bar-bg, var(--hx-color-neutral-50, #f9fafb));
+    border-radius: var(--hx-border-radius-md, 0.375rem);
+  }
+
+  /* ─── Size modifiers ─── */
+
+  .base--sm {
+    padding: var(--hx-action-bar-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));
+    gap: var(--hx-action-bar-gap, var(--hx-space-1, 0.25rem));
+    min-height: var(--hx-size-8, 2rem);
+  }
+
+  .base--md {
+    min-height: var(--hx-size-10, 2.5rem);
+  }
+
+  .base--lg {
+    padding: var(--hx-action-bar-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));
+    gap: var(--hx-action-bar-gap, var(--hx-space-3, 0.75rem));
+    min-height: var(--hx-size-12, 3rem);
+  }
+
+  /* ─── Sections ─── */
+
+  .section {
+    display: flex;
+    align-items: center;
+    gap: inherit;
+  }
+
+  /*
+   * Equal flex-basis on start and end guarantees the center section is visually centered
+   * within the full bar width, regardless of how wide start and end content are.
+   */
+  .section--start {
+    flex: 1 1 0;
+    justify-content: flex-start;
+  }
+
+  .section--center {
+    flex: 0 0 auto;
+    justify-content: center;
+  }
+
+  .section--end {
+    flex: 1 1 0;
+    justify-content: flex-end;
+  }
+
+  /* ─── Slotted content ─── */
+
+  ::slotted(*) {
+    flex-shrink: 0;
+  }

package/dist/css/hx-alert.css

@@ -0,0 +1,213 @@
+/* hx-alert — extracted from Shadow DOM styles */
+:host {
+    display: block;
+  }
+
+  :host(:not([open])) {
+    display: none;
+  }
+
+  /* ─── Screen-reader-only announcement region ─── */
+  /* Always present in DOM so AT registers it before content is injected.     */
+  /* Visually hidden via clip-path technique (superior to display:none which  */
+  /* removes the element from the AT tree entirely).                          */
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Alert Container ─── */
+
+  .alert {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--hx-alert-gap, var(--hx-space-3, 0.75rem));
+    padding: var(--hx-alert-padding, var(--hx-space-4, 1rem));
+    border: var(--hx-alert-border-width, var(--hx-border-width-thin, 1px)) solid
+      var(--hx-alert-border-color, var(--hx-color-info-200, #b3d9ef));
+    border-radius: var(--hx-alert-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-alert-bg, var(--hx-color-info-50, #e8f4fd));
+    color: var(--hx-alert-color, var(--hx-color-info-800, #1a3a4a));
+    font-family: var(--hx-alert-font-family, var(--hx-font-family-sans, sans-serif));
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  /* ─── Accent Variant (left border stripe) ─── */
+  /* Removes full border and replaces with a left-side accent stripe.         */
+  /* Common healthcare/enterprise dashboard pattern for dense information UIs. */
+
+  .alert--accent {
+    border-width: 0;
+    border-inline-start: var(--hx-alert-accent-width, 4px) solid
+      var(--hx-alert-border-color, var(--hx-color-info-200, #b3d9ef));
+    border-radius: 0;
+  }
+
+  /* ─── Severity Label (WCAG 1.4.1) ─── */
+  /* Visually hidden — provides a non-color cue for screen readers and users    */
+  /* who cannot distinguish variants by color alone (e.g. color-blind users).  */
+  /* Always present regardless of showIcon so severity is never color-only.    */
+
+  .alert__severity-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ─── Icon ─── */
+
+  .alert__icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--hx-alert-icon-color, var(--hx-color-info-500, #3b82f6));
+  }
+
+  .alert__icon svg {
+    width: var(--hx-space-5, 1.25rem);
+    height: var(--hx-space-5, 1.25rem);
+    fill: currentColor;
+  }
+
+  /* ─── Title ─── */
+
+  .alert__title {
+    display: none;
+    font-weight: var(--hx-font-weight-semibold, 600);
+    margin-bottom: var(--hx-space-1, 0.25rem);
+  }
+
+  .alert__title--visible {
+    display: block;
+  }
+
+  /* ─── Message ─── */
+
+  .alert__message {
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* ─── Actions ─── */
+  /* Hidden by default; shown via JS slotchange detection to avoid invisible  */
+  /* margin-top spacing when no actions are slotted.                          */
+
+  .alert__actions {
+    display: none;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+    margin-top: var(--hx-space-2, 0.5rem);
+  }
+
+  .alert__actions--visible {
+    display: flex;
+  }
+
+  /* ─── Close Button ─── */
+  /* Minimum 44px touch target per WCAG 2.5.8 (Target Size Minimum, AA) and */
+  /* Apple HIG / Google Material guidelines. Uses absolute px units to ensure */
+  /* the target size is independent of the consumer's base font size.         */
+
+  .alert__close-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    min-width: var(--hx-touch-target-size, 44px);
+    min-height: var(--hx-touch-target-size, 44px);
+    margin-inline-start: auto;
+    padding: 0;
+    border: none;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    background: transparent;
+    color: var(--hx-alert-color, var(--hx-color-info-800, #1a3a4a));
+    cursor: pointer;
+    font-size: var(--hx-font-size-md, 1rem);
+    line-height: 1;
+    transition:
+      background-color var(--hx-transition-fast, 150ms ease),
+      opacity var(--hx-transition-fast, 150ms ease);
+    opacity: var(--hx-opacity-75, 0.75);
+  }
+
+  .alert__close-button:hover {
+    opacity: var(--hx-opacity-100, 1);
+    /* color-mix() is supported in Chrome 111+, Firefox 113+, Safari 16.2+.   */
+    /* Falls back to transparent (no hover background) in older environments.  */
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
+  }
+
+  .alert__close-button:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    opacity: 1;
+  }
+
+  .alert__close-button svg {
+    width: var(--hx-space-4, 1rem);
+    height: var(--hx-space-4, 1rem);
+    fill: currentColor;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .alert__close-button {
+      transition: none;
+    }
+  }
+
+  /* ─── Variant: info ─── */
+
+  :host([variant='info']) .alert,
+  :host(:not([variant])) .alert {
+    --hx-alert-bg: var(--hx-color-info-50, #e8f4fd);
+    --hx-alert-border-color: var(--hx-color-info-200, #b3d9ef);
+    --hx-alert-color: var(--hx-color-info-800, #1a3a4a);
+    --hx-alert-icon-color: var(--hx-color-info-500, #3b82f6);
+  }
+
+  /* ─── Variant: success ─── */
+
+  :host([variant='success']) .alert {
+    --hx-alert-bg: var(--hx-color-success-50, #ecfdf5);
+    --hx-alert-border-color: var(--hx-color-success-200, #a7f3d0);
+    --hx-alert-color: var(--hx-color-success-800, #065f46);
+    --hx-alert-icon-color: var(--hx-color-success-500, #10b981);
+  }
+
+  /* ─── Variant: warning ─── */
+
+  :host([variant='warning']) .alert {
+    --hx-alert-bg: var(--hx-color-warning-50, #fffbeb);
+    --hx-alert-border-color: var(--hx-color-warning-200, #fde68a);
+    --hx-alert-color: var(--hx-color-warning-800, #92400e);
+    --hx-alert-icon-color: var(--hx-color-warning-500, #f59e0b);
+  }
+
+  /* ─── Variant: error ─── */
+
+  :host([variant='error']) .alert {
+    --hx-alert-bg: var(--hx-color-error-50, #fef2f2);
+    --hx-alert-border-color: var(--hx-color-error-200, #fecaca);
+    --hx-alert-color: var(--hx-color-error-800, #991b1b);
+    --hx-alert-icon-color: var(--hx-color-error-500, #ef4444);
+  }

package/dist/css/hx-avatar.css

@@ -0,0 +1,134 @@
+/* hx-avatar — extracted from Shadow DOM styles */
+:host {
+    display: inline-block;
+  }
+
+  /* P2-5: Respect the HTML hidden attribute — custom elements with explicit display ignore it otherwise. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  /* P0-2: Wrapper provides the positioning context for the badge slot, outside overflow: hidden. */
+  .avatar-wrapper {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    width: var(--hx-avatar-size);
+    height: var(--hx-avatar-size);
+    background-color: var(--hx-avatar-bg, var(--hx-color-primary-100));
+    color: var(--hx-avatar-color, var(--hx-color-primary-700));
+    border-radius: var(--hx-avatar-border-radius);
+    flex-shrink: 0;
+  }
+
+  /* ─── Size Variants ─── */
+
+  .avatar--xs {
+    --hx-avatar-size: var(--hx-size-6, 1.5rem);
+    --hx-avatar-font-size: var(--hx-font-size-2xs, 0.625rem);
+  }
+
+  .avatar--sm {
+    --hx-avatar-size: var(--hx-size-8, 2rem);
+    --hx-avatar-font-size: var(--hx-font-size-xs, 0.75rem);
+  }
+
+  .avatar--md {
+    --hx-avatar-size: var(--hx-size-10, 2.5rem);
+    --hx-avatar-font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+
+  .avatar--lg {
+    --hx-avatar-size: var(--hx-size-12, 3rem);
+    --hx-avatar-font-size: var(--hx-font-size-md, 1rem);
+  }
+
+  .avatar--xl {
+    --hx-avatar-size: var(--hx-size-16, 4rem);
+    --hx-avatar-font-size: var(--hx-font-size-lg, 1.125rem);
+  }
+
+  /* ─── Shape Variants ─── */
+
+  .avatar--circle {
+    --hx-avatar-border-radius: 50%;
+  }
+
+  .avatar--square {
+    --hx-avatar-border-radius: var(--hx-border-radius-md, 0.375rem);
+  }
+
+  /* ─── Image ─── */
+
+  .avatar__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  /* ─── Initials ─── */
+
+  .avatar__initials {
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-avatar-font-size);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    line-height: 1;
+    text-transform: uppercase;
+    letter-spacing: var(--hx-letter-spacing-wide, 0.025em);
+    user-select: none;
+  }
+
+  /* ─── Fallback Icon ─── */
+
+  .avatar__fallback-icon {
+    width: 60%;
+    height: 60%;
+    color: var(--hx-avatar-color, var(--hx-color-primary-700));
+  }
+
+  /* ─── Badge Slot ─── */
+
+  /* P0-2: Positioned relative to .avatar-wrapper — outside the overflow: hidden on .avatar. */
+  .avatar__badge {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+
+  /* P2-2: Hide the badge wrapper when no slot content is present, preserving slotchange detection. */
+  .avatar__badge--hidden {
+    display: none;
+  }
+
+  /* P1-B: Windows High Contrast Mode — avatar background is stripped by the system,
+     leaving no visual boundary. Restore a visible border, explicit foreground, and
+     background so the avatar container, initials, and fallback icon all remain
+     perceivable at any contrast level.
+     WCAG 1.4.11 Non-text Contrast (Level AA). */
+  @media (forced-colors: active) {
+    .avatar {
+      forced-color-adjust: none;
+      border: 2px solid ButtonText;
+      background-color: Canvas;
+      color: CanvasText;
+    }
+
+    .avatar__initials {
+      color: CanvasText;
+    }
+
+    .avatar__fallback-icon {
+      color: CanvasText;
+    }
+
+    .avatar__image {
+      forced-color-adjust: auto;
+    }
+  }

package/dist/css/hx-badge.css

@@ -0,0 +1,178 @@
+/* hx-badge — extracted from Shadow DOM styles */
+:host {
+    display: inline-block;
+  }
+
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--hx-space-1, 0.25rem);
+    border-radius: var(--hx-badge-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-badge-bg, var(--hx-color-primary-500, #2563eb));
+    color: var(--hx-badge-color, var(--hx-color-neutral-0, #ffffff));
+    font-family: var(--hx-badge-font-family, var(--hx-font-family-sans, sans-serif));
+    font-weight: var(--hx-badge-font-weight, var(--hx-font-weight-semibold, 600));
+    line-height: var(--hx-line-height-tight, 1.25);
+    white-space: nowrap;
+    vertical-align: middle;
+    position: relative;
+  }
+
+  /* ─── Size Variants ─── */
+
+  .badge--sm {
+    font-size: var(--hx-badge-font-size, var(--hx-font-size-2xs, 0.625rem));
+    padding: var(--hx-badge-padding-y, var(--hx-space-0-5, 0.125rem))
+      var(--hx-badge-padding-x, var(--hx-space-1-5, 0.375rem));
+  }
+
+  .badge--md {
+    font-size: var(--hx-badge-font-size, var(--hx-font-size-xs, 0.75rem));
+    padding: var(--hx-badge-padding-y, var(--hx-space-1, 0.25rem))
+      var(--hx-badge-padding-x, var(--hx-space-2, 0.5rem));
+  }
+
+  .badge--lg {
+    font-size: var(--hx-badge-font-size, var(--hx-font-size-sm, 0.875rem));
+    padding: var(--hx-badge-padding-y, var(--hx-space-1, 0.25rem))
+      var(--hx-badge-padding-x, var(--hx-space-3, 0.75rem));
+  }
+
+  /* ─── Style Variants ─── */
+
+  .badge--primary {
+    --hx-badge-bg: var(--hx-color-primary-500, #2563eb);
+    --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-badge-pulse-color: var(--hx-color-primary-500, #2563eb);
+  }
+
+  .badge--secondary {
+    --hx-badge-bg: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f3f4f6));
+    --hx-badge-color: var(--hx-badge-secondary-color, var(--hx-color-neutral-700, #374151));
+    --hx-badge-pulse-color: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f3f4f6));
+  }
+
+  .badge--success {
+    --hx-badge-bg: var(--hx-color-success-700, #15803d);
+    --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-badge-pulse-color: var(--hx-color-success-700, #15803d);
+  }
+
+  .badge--warning {
+    --hx-badge-bg: var(--hx-color-warning-500, #eab308);
+    --hx-badge-color: var(--hx-color-neutral-900, #1a1a1a);
+    --hx-badge-pulse-color: var(--hx-color-warning-500, #eab308);
+  }
+
+  .badge--error {
+    --hx-badge-bg: var(--hx-color-error-500, #dc2626);
+    --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-badge-pulse-color: var(--hx-color-error-500, #dc2626);
+  }
+
+  .badge--neutral {
+    --hx-badge-bg: var(--hx-color-neutral-200, #e5e7eb);
+    --hx-badge-color: var(--hx-color-neutral-700, #374151);
+    --hx-badge-pulse-color: var(--hx-color-neutral-200, #e5e7eb);
+  }
+
+  .badge--info {
+    --hx-badge-bg: var(--hx-badge-info-bg, var(--hx-color-info-700, #0369a1));
+    --hx-badge-color: var(--hx-badge-info-color, var(--hx-color-neutral-0, #ffffff));
+    --hx-badge-pulse-color: var(--hx-badge-info-bg, var(--hx-color-info-700, #0369a1));
+  }
+
+  /* ─── Semantic Variant Label (WCAG 1.4.1) ─── */
+  /* Visually hidden text prefix for semantic variants (success/warning/error/info). */
+  /* Ensures the variant is not conveyed by color alone.                             */
+
+  .badge__variant-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ─── Pill Mode ─── */
+
+  .badge--pill {
+    border-radius: var(--hx-badge-border-radius, var(--hx-border-radius-full, 9999px));
+  }
+
+  /* ─── Dot Indicator (empty + pulse) ─── */
+
+  .badge--dot {
+    width: var(--hx-badge-dot-size, var(--hx-space-2, 0.5rem));
+    height: var(--hx-badge-dot-size, var(--hx-space-2, 0.5rem));
+    padding: 0;
+    border-radius: var(--hx-border-radius-full, 9999px);
+  }
+
+  /* Guard: hide prefix slot and slotted content in dot mode to prevent overflow */
+  .badge--dot ::slotted(*) {
+    display: none;
+  }
+
+  .badge--dot slot[name='prefix'] {
+    display: none;
+  }
+
+  /* ─── Pulse Animation ─── */
+
+  @keyframes hx-badge-pulse {
+    0%,
+    100% {
+      opacity: 1;
+      box-shadow: 0 0 0 2px var(--hx-badge-pulse-color, currentColor);
+    }
+    50% {
+      opacity: var(--hx-opacity-75, 0.75);
+      box-shadow: 0 0 0 6px transparent;
+    }
+  }
+
+  .badge--pulse {
+    animation: hx-badge-pulse var(--hx-badge-pulse-duration, var(--hx-duration-slow, 2s))
+      var(--hx-badge-pulse-easing, var(--hx-easing-in-out, ease-in-out)) infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .badge--pulse {
+      animation: none;
+    }
+  }
+
+  /* ─── Remove Button ─── */
+
+  .badge__remove-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    padding: 0;
+    margin-inline-start: var(--hx-space-1, 0.25rem);
+    cursor: pointer;
+    color: inherit;
+    opacity: var(--hx-opacity-75, 0.75);
+    border-radius: var(--hx-border-radius-sm, 0.125rem);
+    line-height: 0;
+    /* WCAG 2.5.5: minimum 44×44px touch target */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+  }
+
+  .badge__remove-button:hover {
+    opacity: var(--hx-opacity-100, 1);
+  }
+
+  .badge__remove-button:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, currentColor);
+    outline-offset: var(--hx-focus-ring-offset, 1px);
+  }