@helixui/library 1.0.1 → 1.1.2-next.1

package/dist/css/helix-feedback.css

@@ -0,0 +1,1239 @@
+/* helix-feedback.css — 8 components */
+
+/* ── hx-alert ── */
+: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);
+  }
+/* ── hx-banner ── */
+:host {
+    display: block;
+    width: 100%;
+    position: var(--hx-banner-position, sticky);
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: var(--hx-banner-z-index, 100);
+  }
+
+  :host(:not([open])) {
+    display: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Severity Label (WCAG 1.4.1) ─── */
+  /* Visually hidden — ensures variant is never conveyed by color alone.   */
+  /* Always rendered so screen readers can identify the banner severity.   */
+
+  .banner__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;
+  }
+
+  /* ─── Banner Container ─── */
+
+  .banner {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-banner-gap, var(--hx-space-3, 0.75rem));
+    padding: var(--hx-banner-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));
+    background-color: var(--hx-banner-bg, var(--hx-color-info-50, #e8f4fd));
+    color: var(--hx-banner-color, var(--hx-color-info-800, #1a3a4a));
+    border-bottom: var(--hx-banner-border-width, var(--hx-border-width-thin, 1px)) solid
+      var(--hx-banner-border-color, var(--hx-color-info-200, #b3d9ef));
+    font-family: var(--hx-banner-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);
+    width: 100%;
+  }
+
+  /* ─── Icon ─── */
+
+  .banner__icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--hx-banner-icon-color, var(--hx-color-info-500, #3b82f6));
+  }
+
+  .banner__icon svg {
+    width: var(--hx-space-5, 1.25rem);
+    height: var(--hx-space-5, 1.25rem);
+    fill: currentColor;
+  }
+
+  /* ─── Message ─── */
+
+  .banner__message {
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* ─── Action Link ─── */
+
+  .banner__action {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--hx-banner-action-color, var(--hx-banner-color, var(--hx-color-info-800, #1a3a4a)));
+    font-weight: var(--hx-font-weight-semibold, 600);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    padding: 0;
+    font-size: inherit;
+    font-family: inherit;
+  }
+
+  .banner__action:hover {
+    opacity: var(--hx-opacity-90, 0.9);
+  }
+
+  .banner__action: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);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+  }
+
+  /* ─── 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.         */
+
+  .banner__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-banner-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);
+  }
+
+  .banner__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);
+  }
+
+  .banner__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;
+  }
+
+  .banner__close-button svg {
+    width: var(--hx-space-4, 1rem);
+    height: var(--hx-space-4, 1rem);
+    fill: currentColor;
+  }
+
+  /* ─── Variant: info ─── */
+
+  :host([variant='info']) .banner,
+  :host(:not([variant])) .banner {
+    --hx-banner-bg: var(--hx-color-info-50, #e8f4fd);
+    --hx-banner-border-color: var(--hx-color-info-200, #b3d9ef);
+    --hx-banner-color: var(--hx-color-info-800, #1a3a4a);
+    --hx-banner-icon-color: var(--hx-color-info-500, #3b82f6);
+  }
+
+  /* ─── Variant: success ─── */
+
+  :host([variant='success']) .banner {
+    --hx-banner-bg: var(--hx-color-success-50, #ecfdf5);
+    --hx-banner-border-color: var(--hx-color-success-200, #a7f3d0);
+    --hx-banner-color: var(--hx-color-success-800, #065f46);
+    --hx-banner-icon-color: var(--hx-color-success-500, #10b981);
+  }
+
+  /* ─── Variant: warning ─── */
+
+  :host([variant='warning']) .banner {
+    --hx-banner-bg: var(--hx-color-warning-50, #fffbeb);
+    --hx-banner-border-color: var(--hx-color-warning-200, #fde68a);
+    --hx-banner-color: var(--hx-color-warning-800, #92400e);
+    --hx-banner-icon-color: var(--hx-color-warning-500, #f59e0b);
+  }
+
+  /* ─── Variant: error ─── */
+
+  :host([variant='error']) .banner {
+    --hx-banner-bg: var(--hx-color-error-50, #fef2f2);
+    --hx-banner-border-color: var(--hx-color-error-200, #fecaca);
+    --hx-banner-color: var(--hx-color-error-800, #991b1b);
+    --hx-banner-icon-color: var(--hx-color-error-500, #ef4444);
+  }
+
+  /* ─── Position: fixed ─── */
+  /* When position="fixed", override the host-level CSS custom property.    */
+  /* The :host rule above sets position via var(--hx-banner-position).      */
+  /* We use an attribute selector to override it cleanly without duplication. */
+
+  :host([position='fixed']) {
+    position: fixed;
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .banner__close-button {
+      transition: none;
+    }
+  }
+/* ── hx-meter ── */
+:host {
+    display: block;
+    width: 100%;
+  }
+
+  .meter {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-2, 0.5rem);
+    width: 100%;
+  }
+
+  .meter__label {
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    color: var(--hx-meter-label-color, var(--hx-color-neutral-700, #374151));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .meter__track {
+    position: relative;
+    width: 100%;
+    height: var(--hx-meter-track-height, var(--hx-space-2, 0.5rem));
+    background-color: var(--hx-meter-track-color, var(--hx-color-neutral-200, #e5e7eb));
+    border-radius: var(--hx-meter-track-radius, var(--hx-border-radius-full, 9999px));
+    overflow: hidden;
+  }
+
+  .meter__indicator {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    height: 100%;
+    width: 100%;
+    border-radius: inherit;
+    background-color: var(--_indicator-color);
+    transform-origin: left center;
+    transform: scaleX(var(--_value-ratio, 0));
+    transition:
+      transform var(--hx-transition-fast, 150ms ease),
+      background-color var(--hx-transition-fast, 150ms ease);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .meter__indicator {
+      transition: none;
+    }
+  }
+
+  /* ─── Default (no thresholds configured) ─── */
+
+  :host {
+    --_indicator-color: var(--hx-meter-indicator-color, var(--hx-color-primary-500, #3b82f6));
+  }
+
+  /* ─── Semantic state colors ─── */
+
+  :host([data-state='optimum']) {
+    --_indicator-color: var(--hx-meter-color-optimum, var(--hx-color-success-500, #22c55e));
+  }
+
+  :host([data-state='warning']) {
+    --_indicator-color: var(--hx-meter-color-warning, var(--hx-color-warning-500, #f59e0b));
+  }
+
+  :host([data-state='danger']) {
+    --_indicator-color: var(--hx-meter-color-danger, var(--hx-color-error-500, #dc2626));
+  }
+
+  /* ─── State Label (WCAG 1.4.1) ─── */
+  /* Visible text label rendered below the track when a semantic state is active. */
+  /* Ensures the meter state is not conveyed by fill color alone.                 */
+  /* aria-hidden="true" because aria-valuetext already includes the state for AT. */
+
+  .meter__state-label {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    line-height: var(--hx-line-height-tight, 1.25);
+    font-family: var(--hx-font-family-sans, sans-serif);
+  }
+
+  .meter__state-label[data-state='optimum'] {
+    color: var(--hx-meter-color-optimum, var(--hx-color-success-700, #15803d));
+  }
+
+  .meter__state-label[data-state='warning'] {
+    color: var(--hx-meter-color-warning, var(--hx-color-warning-700, #b45309));
+  }
+
+  .meter__state-label[data-state='danger'] {
+    color: var(--hx-meter-color-danger, var(--hx-color-error-700, #991b1b));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .meter__indicator {
+      transition: none;
+    }
+  }
+
+  /* ─── Native meter hidden (we use custom rendering) ─── */
+
+  .meter__native {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+/* ── hx-progress-bar ── */
+:host {
+    display: block;
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .progress-bar {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+  }
+
+  .progress-bar__label {
+    font-family: var(--hx-progress-bar-label-font-family, var(--hx-font-family-sans, sans-serif));
+    font-size: var(--hx-progress-bar-label-font-size, var(--hx-font-size-sm, 0.875rem));
+    font-weight: var(--hx-progress-bar-label-font-weight, var(--hx-font-weight-medium, 500));
+    color: var(--hx-progress-bar-label-color, var(--hx-color-neutral-700));
+    line-height: var(--hx-line-height-tight, 1.25);
+  }
+
+  .progress-bar__track {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--hx-progress-bar-border-radius, var(--hx-border-radius-full, 9999px));
+    background-color: var(--hx-progress-bar-track-bg, var(--hx-color-neutral-100));
+    width: 100%;
+  }
+
+  /* ─── Size Variants ─── */
+
+  .progress-bar--sm .progress-bar__track {
+    height: var(--hx-progress-bar-height-sm, var(--hx-space-1, 0.25rem));
+  }
+
+  .progress-bar--md .progress-bar__track {
+    height: var(--hx-progress-bar-height-md, var(--hx-space-2, 0.5rem));
+  }
+
+  .progress-bar--lg .progress-bar__track {
+    height: var(--hx-progress-bar-height-lg, var(--hx-space-3, 0.75rem));
+  }
+
+  .progress-bar__fill {
+    height: 100%;
+    width: 100%;
+    border-radius: inherit;
+    background-color: var(--hx-progress-bar-indicator-bg, var(--hx-color-primary-500));
+    transform-origin: left center;
+    transform: scaleX(var(--_value-ratio, 0));
+    transition: transform var(--hx-transition-fast, 150ms ease);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .progress-bar__fill {
+      transition: none;
+    }
+  }
+
+  /* ─── Variant Colors ─── */
+
+  .progress-bar--default .progress-bar__fill {
+    --hx-progress-bar-indicator-bg: var(--hx-color-primary-500);
+  }
+
+  .progress-bar--success .progress-bar__fill {
+    --hx-progress-bar-indicator-bg: var(--hx-color-success-700);
+  }
+
+  .progress-bar--warning .progress-bar__fill {
+    --hx-progress-bar-indicator-bg: var(--hx-color-warning-500);
+  }
+
+  .progress-bar--danger .progress-bar__fill {
+    --hx-progress-bar-indicator-bg: var(--hx-color-error-500);
+  }
+
+  /* ─── Indeterminate Animation ─── */
+
+  @keyframes hx-progress-indeterminate {
+    0% {
+      transform: translateX(-100%) scaleX(0.4);
+    }
+    50% {
+      transform: translateX(50%) scaleX(0.6);
+    }
+    100% {
+      transform: translateX(250%) scaleX(0.4);
+    }
+  }
+
+  .progress-bar--indeterminate .progress-bar__fill {
+    transform: translateX(-100%) scaleX(0.4);
+    transform-origin: left center;
+    animation: hx-progress-indeterminate var(--hx-progress-bar-indeterminate-duration, 1.5s)
+      ease-in-out infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .progress-bar__fill {
+      transition: none;
+    }
+
+    .progress-bar--indeterminate .progress-bar__fill {
+      animation: none;
+      transform: scaleX(1);
+      opacity: var(--hx-opacity-disabled, 0.5); /* reduced from animation; no exact token for 0.4 */
+    }
+  }
+
+  /* ─── High Contrast Mode ─── */
+
+  @media (forced-colors: active) {
+    .progress-bar__track {
+      border: 1px solid ButtonText;
+      background-color: Canvas;
+    }
+
+    .progress-bar__fill {
+      background-color: Highlight;
+      forced-color-adjust: none;
+    }
+  }
+/* ── hx-progress-ring ── */
+:host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* ─── Base Container ─── */
+
+  .progress-ring {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* ─── SVG ─── */
+
+  .progress-ring__svg {
+    transform: rotate(-90deg);
+    overflow: visible;
+  }
+
+  /* ─── Track ─── */
+
+  .progress-ring__track {
+    fill: none;
+    stroke: var(--hx-progress-ring-track-color, var(--hx-color-neutral-200, #e2e8f0));
+  }
+
+  /* ─── Indicator ─── */
+
+  .progress-ring__indicator {
+    fill: none;
+    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-primary-500, #2563eb));
+    stroke-linecap: round;
+    transition: stroke-dashoffset var(--hx-transition-base, 300ms ease);
+  }
+
+  /* ─── Variant Colors ─── */
+
+  :host([variant='success']) .progress-ring__indicator {
+    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-success-500, #16a34a));
+  }
+
+  :host([variant='warning']) .progress-ring__indicator {
+    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-warning-500, #d97706));
+  }
+
+  :host([variant='danger']) .progress-ring__indicator {
+    stroke: var(--hx-progress-ring-indicator-color, var(--hx-color-error-500, #dc2626));
+  }
+
+  /* ─── Indeterminate Animation ─── */
+
+  :host([indeterminate]) .progress-ring__svg {
+    animation: hx-progress-ring-rotate var(--hx-duration-spinner, 1400ms) linear infinite;
+  }
+
+  :host([indeterminate]) .progress-ring__indicator {
+    animation: hx-progress-ring-dash var(--hx-duration-spinner, 1400ms) ease-in-out infinite;
+    transition: none;
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+
+  @keyframes hx-progress-ring-rotate {
+    to {
+      transform: rotate(270deg);
+    }
+  }
+
+  /*
+   * Indeterminate spinner keyframes — values are tuned for default strokeWidth=4
+   * (radius ≈ 48, circumference ≈ 301). The gap value 200 is intentionally smaller
+   * than the full circumference; the repeating pattern is a standard CSS spinner
+   * technique that produces an arc of ~35% coverage. At non-default strokeWidths
+   * the arc coverage will vary slightly but remains visually acceptable.
+   */
+  @keyframes hx-progress-ring-dash {
+    0% {
+      stroke-dasharray: 1, 200;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 89, 200;
+      stroke-dashoffset: -35;
+    }
+    100% {
+      stroke-dasharray: 89, 200;
+      stroke-dashoffset: -124;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host([indeterminate]) .progress-ring__svg {
+      animation: none;
+    }
+
+    :host([indeterminate]) .progress-ring__indicator {
+      animation: none;
+      stroke-dasharray: 89, 200;
+      stroke-dashoffset: -35;
+    }
+
+    .progress-ring__indicator {
+      transition: none;
+    }
+  }
+
+  /* ─── Size Variants ─── */
+
+  :host([size='sm']) .progress-ring {
+    width: var(--hx-size-8, 2rem);
+    height: var(--hx-size-8, 2rem);
+  }
+
+  :host([size='md']) .progress-ring,
+  .progress-ring {
+    width: var(--hx-size-12, 3rem);
+    height: var(--hx-size-12, 3rem);
+  }
+
+  :host([size='lg']) .progress-ring {
+    width: var(--hx-size-16, 4rem);
+    height: var(--hx-size-16, 4rem);
+  }
+
+  /* ─── Label (center slot wrapper) ─── */
+
+  .progress-ring__label {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inset: 0;
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    color: var(--hx-progress-ring-label-color, var(--hx-color-neutral-900, #0f172a));
+    pointer-events: none;
+  }
+/* ── hx-stat ── */
+:host {
+    display: block;
+  }
+
+  .stat {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-stat-gap, var(--hx-space-1, 0.25rem));
+    font-family: var(--hx-stat-font-family, var(--hx-font-family-sans, sans-serif));
+    color: var(--hx-stat-color, var(--hx-color-neutral-800, #212529));
+  }
+
+  /* ─── Size Variants ─── */
+
+  .stat--sm .stat__value {
+    font-size: var(--hx-stat-value-font-size-sm, var(--hx-font-size-xl, 1.25rem));
+    line-height: var(--hx-line-height-tight, 1.25);
+    font-weight: var(--hx-stat-value-font-weight, var(--hx-font-weight-bold, 700));
+  }
+
+  .stat--sm .stat__label {
+    font-size: var(--hx-stat-label-font-size-sm, var(--hx-font-size-xs, 0.75rem));
+  }
+
+  .stat--md .stat__value {
+    font-size: var(--hx-stat-value-font-size-md, var(--hx-font-size-3xl, 1.875rem));
+    line-height: var(--hx-line-height-tight, 1.25);
+    font-weight: var(--hx-stat-value-font-weight, var(--hx-font-weight-bold, 700));
+  }
+
+  .stat--md .stat__label {
+    font-size: var(--hx-stat-label-font-size-md, var(--hx-font-size-sm, 0.875rem));
+  }
+
+  .stat--lg .stat__value {
+    font-size: var(--hx-stat-value-font-size-lg, var(--hx-font-size-5xl, 3rem));
+    line-height: var(--hx-line-height-tight, 1.25);
+    font-weight: var(--hx-stat-value-font-weight, var(--hx-font-weight-bold, 700));
+  }
+
+  .stat--lg .stat__label {
+    font-size: var(--hx-stat-label-font-size-lg, var(--hx-font-size-md, 1rem));
+  }
+
+  /* ─── Value ─── */
+
+  .stat__header {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-stat-header-gap, var(--hx-space-2, 0.5rem));
+  }
+
+  .stat__value {
+    color: var(--hx-stat-value-color, var(--hx-color-neutral-900, #111827));
+  }
+
+  /* ─── Label ─── */
+
+  .stat__label {
+    color: var(--hx-stat-label-color, var(--hx-color-neutral-500, #6c757d));
+    font-weight: var(--hx-font-weight-normal, 400);
+  }
+
+  /* ─── Icon Slot ─── */
+
+  .stat__icon {
+    display: flex;
+    align-items: center;
+    color: var(--hx-stat-icon-color, var(--hx-color-primary-500, #2563eb));
+    flex-shrink: 0;
+  }
+
+  /* ─── Trend Indicator ─── */
+
+  .stat__trend {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-1, 0.25rem);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    padding: var(--hx-space-0-5, 0.125rem) var(--hx-space-1-5, 0.375rem);
+  }
+
+  .stat__trend--up {
+    color: var(--hx-stat-trend-up-color, var(--hx-color-success-700, #15803d));
+    background-color: var(--hx-stat-trend-up-bg, var(--hx-color-success-50, #f0fdf4));
+  }
+
+  .stat__trend--down {
+    color: var(--hx-stat-trend-down-color, var(--hx-color-error-700, #b91c1c));
+    background-color: var(--hx-stat-trend-down-bg, var(--hx-color-error-50, #fef2f2));
+  }
+
+  .stat__trend-arrow {
+    width: 0.75em;
+    height: 0.75em;
+    flex-shrink: 0;
+  }
+
+  /* ─── Hidden empty slot wrappers ─── */
+
+  [hidden] {
+    display: none !important;
+  }
+/* ── hx-status-indicator ── */
+:host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    flex-shrink: 0;
+    --_dot-color: var(--hx-status-indicator-color-default, var(--hx-color-neutral-300, #ced4da));
+  }
+
+  .indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: var(--_indicator-size);
+    height: var(--_indicator-size);
+    flex-shrink: 0;
+  }
+
+  .indicator__dot {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: var(--_dot-color);
+    position: relative;
+    z-index: 1; /* dot above pulse ring within shadow root */
+  }
+
+  .indicator__pulse-ring {
+    display: none;
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background-color: var(--hx-status-indicator-pulse-color, var(--_dot-color));
+    opacity: var(--hx-state-focus-opacity, 0.12); /* intentional: pulse ring start opacity */
+    animation: hx-status-pulse var(--hx-status-indicator-pulse-duration, 1.5s) ease-out infinite;
+    z-index: 0; /* pulse ring beneath dot within shadow root */
+  }
+
+  :host([pulse]) .indicator__pulse-ring {
+    display: block;
+  }
+
+  @keyframes hx-status-pulse {
+    0% {
+      transform: scale(1);
+      opacity: var(--hx-state-focus-opacity, 0.12); /* intentional: pulse ring start opacity */
+    }
+    100% {
+      transform: scale(var(--hx-status-indicator-pulse-scale, 2.5));
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host([pulse]) .indicator__pulse-ring {
+      animation: none;
+      display: none;
+    }
+  }
+
+  /* ─── Size Variants ─── */
+
+  :host([size='sm']) {
+    --_indicator-size: var(--hx-status-indicator-size-sm, var(--hx-space-2, 0.5rem));
+  }
+
+  :host([size='md']) {
+    --_indicator-size: var(--hx-status-indicator-size-md, var(--hx-space-3, 0.75rem));
+  }
+
+  :host([size='lg']) {
+    --_indicator-size: var(--hx-status-indicator-size-lg, var(--hx-size-4));
+  }
+
+  /* ─── Status Colors ─── */
+
+  :host([status='online']) {
+    --_dot-color: var(--hx-status-indicator-color-online, var(--hx-color-success-500));
+  }
+
+  :host([status='offline']) {
+    --_dot-color: var(--hx-status-indicator-color-offline, var(--hx-color-neutral-400));
+  }
+
+  :host([status='away']) {
+    --_dot-color: var(--hx-status-indicator-color-away, var(--hx-color-warning-500));
+  }
+
+  :host([status='busy']) {
+    --_dot-color: var(--hx-status-indicator-color-busy, var(--hx-color-error-500));
+  }
+
+  :host([status='unknown']) {
+    --_dot-color: var(--hx-status-indicator-color-unknown, var(--hx-color-neutral-300));
+  }
+/* ── hx-toast ── */
+/* ─── hx-toast host ─── */
+
+  :host {
+    display: block;
+    pointer-events: none;
+  }
+
+  :host([open]) {
+    pointer-events: auto;
+  }
+
+  /* ─── Toast base ─── */
+
+  .toast {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--hx-space-3, 0.75rem);
+    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
+    border-radius: var(--hx-toast-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-toast-bg, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-toast-color, var(--hx-color-neutral-0, #ffffff));
+    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);
+    box-shadow: var(
+      --hx-toast-shadow,
+      0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -2px rgb(0 0 0 / 0.1)
+    );
+    opacity: 0;
+    transform: translateY(var(--hx-toast-enter-translate, var(--hx-space-2, 0.5rem)));
+    transition:
+      opacity var(--hx-transition-normal, 250ms ease),
+      transform var(--hx-transition-normal, 250ms ease);
+    width: var(--hx-toast-width, 20rem);
+    max-width: 100%;
+    pointer-events: auto;
+  }
+
+  :host([open]) .toast {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  /* ─── Variant overrides ─── */
+
+  .toast--success {
+    --hx-toast-bg: var(--hx-color-success-600, #16a34a);
+    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
+  }
+
+  .toast--warning {
+    --hx-toast-bg: var(--hx-color-warning-500, #f59e0b);
+    --hx-toast-color: var(--hx-color-neutral-900, #0f172a);
+  }
+
+  .toast--danger {
+    --hx-toast-bg: var(--hx-color-error-600, #dc2626);
+    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
+  }
+
+  .toast--info {
+    --hx-toast-bg: var(--hx-color-primary-600, #2563eb);
+    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
+  }
+
+  /* ─── Severity Label (WCAG 1.4.1) ─── */
+  /* Visually hidden — non-color cue for severity variants (success/warning/danger/info). */
+  /* Ensures variant is not conveyed by color alone for color-blind users.                */
+
+  .toast__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 ─── */
+
+  .toast__icon {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
+  }
+
+  .toast__icon:empty {
+    display: none;
+  }
+
+  /* ─── Message ─── */
+
+  .toast__message {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  /* ─── Action slot ─── */
+
+  .toast__action {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .toast__action:empty {
+    display: none;
+  }
+
+  /* ─── Close button ─── */
+
+  .toast__close {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* 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);
+    padding: var(--hx-space-1, 0.25rem);
+    background: transparent;
+    border: none;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    color: inherit;
+    cursor: pointer;
+    opacity: var(--hx-opacity-75, 0.75);
+    transition: opacity var(--hx-transition-fast, 150ms ease);
+  }
+
+  .toast__close:hover {
+    opacity: 1;
+  }
+
+  .toast__close:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid currentColor;
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* ─── Reduced motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .toast {
+      transition: none;
+    }
+
+    .toast__close {
+      transition: none;
+    }
+  }
+`;
+
+export const helixToastStackStyles = css`
+  :host {
+    display: block;
+    position: fixed;
+    z-index: var(--hx-z-index-toast, 1700);
+    pointer-events: none;
+  }
+
+  .toast-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-3, 0.75rem);
+    padding: var(--hx-space-4, 1rem);
+    pointer-events: none;
+  }
+
+  /* ─── Placements ─── */
+
+  :host([placement='top-start']) {
+    top: 0;
+    inset-inline-start: 0;
+    inset-inline-end: auto;
+    bottom: auto;
+  }
+
+  :host([placement='top-center']) {
+    top: 0;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+    inset-inline-end: auto;
+    bottom: auto;
+  }
+
+  :host([placement='top-end']) {
+    top: 0;
+    inset-inline-end: 0;
+    inset-inline-start: auto;
+    bottom: auto;
+  }
+
+  :host([placement='bottom-start']) {
+    bottom: 0;
+    inset-inline-start: 0;
+    inset-inline-end: auto;
+    top: auto;
+  }
+
+  :host([placement='bottom-center']) {
+    bottom: 0;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+    inset-inline-end: auto;
+    top: auto;
+  }
+
+  :host([placement='bottom-end']) {
+    bottom: 0;
+    inset-inline-end: 0;
+    inset-inline-start: auto;
+    top: auto;
+  }
+
+  /* ─── Bottom placements: reverse order so newest is on top ─── */
+
+  :host([placement^='bottom']) .toast-stack {
+    flex-direction: column-reverse;
+  }
+
+  /* ─── Slide direction by placement ─── */
+
+  :host([placement^='top']) ::slotted(hx-toast) {
+    --hx-toast-enter-translate: calc(var(--hx-space-2, 0.5rem) * -1);
+  }