@helixui/library 1.1.2 → 2.0.0-next.31

package/dist/css/helix-overlay.css

@@ -0,0 +1,643 @@
+/* helix-overlay.css — 6 components */
+
+/* ── hx-dialog ── */
+:host {
+    display: contents;
+  }
+
+  /* ─── Native dialog reset ─── */
+
+  dialog {
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: inherit;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: visible;
+    /* D5 — ensure native dialog element renders above the non-modal backdrop sibling */
+    position: relative;
+    z-index: calc(var(--hx-z-index-modal, 1400) + 1);
+  }
+
+  /* ─── Dialog container ─── */
+
+  .dialog {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    background-color: var(--hx-dialog-bg, var(--hx-color-neutral-0));
+    color: var(--hx-dialog-color, var(--hx-color-neutral-900));
+    border-radius: var(--hx-dialog-border-radius, var(--hx-border-radius-lg));
+    box-shadow: var(--hx-dialog-shadow, var(--hx-shadow-xl));
+    width: var(--hx-dialog-width, var(--hx-container-narrow, 32rem));
+    max-width: calc(100vw - var(--hx-space-8, 2rem));
+    max-height: calc(100vh - var(--hx-space-8, 2rem));
+    overflow: hidden;
+    outline: none;
+
+    /* Open/close animation */
+    opacity: 0;
+    transform: translateY(var(--hx-space-4, 1rem)) scale(0.97);
+    transition:
+      opacity var(--hx-duration-normal, 200ms) var(--hx-easing-out, ease-out),
+      transform var(--hx-duration-normal, 200ms) var(--hx-easing-out, ease-out);
+  }
+
+  dialog[open] .dialog {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .dialog {
+      transition: none;
+    }
+
+    .dialog__close-btn {
+      transition: none;
+    }
+  }
+
+  /* ─── Native backdrop (modal mode) ─── */
+
+  dialog::backdrop {
+    background-color: var(--hx-dialog-backdrop-color, var(--hx-color-neutral-900));
+    opacity: 0;
+    transition: opacity var(--hx-duration-normal, 200ms) var(--hx-easing-out, ease-out);
+  }
+
+  dialog[open]::backdrop {
+    opacity: var(--hx-dialog-backdrop-opacity, 0.5);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    dialog::backdrop {
+      transition: none;
+    }
+  }
+
+  /* ─── Non-modal backdrop overlay ─── */
+
+  .dialog-backdrop {
+    position: fixed;
+    inset: 0;
+    background-color: var(--hx-dialog-backdrop-color, var(--hx-color-neutral-900));
+    opacity: var(--hx-dialog-backdrop-opacity, 0.5);
+    /* D5 — backdrop z-index must be lower than the dialog element's z-index */
+    z-index: var(--hx-z-index-modal, 1400);
+  }
+
+  /* ─── Header ─── */
+
+  .dialog__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--hx-dialog-header-padding, var(--hx-space-5) var(--hx-space-6));
+    border-bottom: var(--hx-border-width-thin) solid
+      var(--hx-dialog-header-border-color, var(--hx-color-neutral-200));
+    gap: var(--hx-space-4);
+    flex-shrink: 0;
+  }
+
+  .dialog__heading {
+    margin: 0;
+    font-family: var(--hx-font-family-sans);
+    font-size: var(--hx-font-size-lg);
+    font-weight: var(--hx-font-weight-semibold);
+    line-height: var(--hx-line-height-tight);
+    color: var(--hx-dialog-heading-color, var(--hx-color-neutral-900));
+    flex: 1 1 auto;
+  }
+
+  /* ─── Built-in close button (D17) ─── */
+
+  .dialog__close-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    width: var(--hx-touch-target-min, 2.75rem);
+    height: var(--hx-touch-target-min, 2.75rem);
+    padding: 0;
+    margin-inline-start: auto;
+    background: transparent;
+    border: none;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    cursor: pointer;
+    color: var(--hx-color-neutral-500, #6b7280);
+    font-size: var(--hx-font-size-xl, 1.25rem);
+    line-height: 1; /* intentional literal: icon button needs line-height 1; no token maps to exactly 1 */
+    transition:
+      color var(--hx-duration-fast, 100ms) ease,
+      background-color var(--hx-duration-fast, 100ms) ease;
+  }
+
+  .dialog__close-btn::before {
+    content: '×';
+  }
+
+  .dialog__close-btn:hover {
+    color: var(--hx-color-neutral-900);
+    background-color: var(--hx-color-neutral-100);
+  }
+
+  .dialog__close-btn:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-dialog-close-btn-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* ─── Body ─── */
+
+  .dialog__body {
+    flex: 1 1 auto;
+    padding: var(--hx-dialog-body-padding, var(--hx-space-6));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  /* ─── Footer ─── */
+
+  .dialog__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--hx-space-3);
+    padding: var(--hx-dialog-footer-padding, var(--hx-space-4) var(--hx-space-6));
+    border-top: var(--hx-border-width-thin) solid
+      var(--hx-dialog-footer-border-color, var(--hx-color-neutral-200));
+    flex-shrink: 0;
+  }
+
+  /* ─── Visually-hidden description (D8) ─── */
+
+  .dialog__description {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+/* ── hx-drawer ── */
+/* P2-03: Explicit [hidden] rule to survive CSS resets that may override the UA stylesheet. */
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    display: contents;
+  }
+
+  :host([contained]) {
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
+
+  /* ─── Overlay ─── */
+
+  .drawer-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--hx-z-index-modal, 1400);
+    display: flex;
+    pointer-events: none;
+    visibility: hidden;
+  }
+
+  :host([contained]) .drawer-overlay {
+    position: absolute;
+  }
+
+  .drawer-overlay.is-open {
+    pointer-events: auto;
+    visibility: visible;
+  }
+
+  /* ─── Backdrop ─── */
+
+  .drawer-backdrop {
+    position: absolute;
+    inset: 0;
+    background-color: var(--hx-drawer-backdrop-color, var(--hx-color-neutral-900));
+    opacity: 0;
+    transition: opacity var(--hx-duration-slow, 300ms) var(--hx-easing-out, ease-out);
+  }
+
+  .drawer-overlay.is-open .drawer-backdrop {
+    opacity: var(--hx-drawer-backdrop-opacity, 0.5);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .drawer-backdrop {
+      transition: none;
+    }
+  }
+
+  /* ─── Panel ─── */
+
+  .drawer-panel {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--hx-drawer-bg, var(--hx-color-neutral-0));
+    color: var(--hx-drawer-color, var(--hx-color-neutral-900));
+    box-shadow: var(--hx-drawer-shadow, var(--hx-shadow-xl));
+    overflow: hidden;
+    outline: none;
+    z-index: 1; /* local stacking context: panel above backdrop within overlay container */
+    transition:
+      transform var(--hx-duration-slow, 300ms) var(--hx-easing-out, ease-out),
+      opacity var(--hx-duration-slow, 300ms) var(--hx-easing-out, ease-out);
+    opacity: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .drawer-panel {
+      transition: none;
+    }
+
+    .drawer-close-button {
+      transition: none;
+    }
+  }
+
+  /* ─── Placement: end (default — right) ─── */
+
+  :host([placement='end']) .drawer-panel,
+  :host(:not([placement])) .drawer-panel {
+    top: 0;
+    inset-inline-end: 0;
+    bottom: 0;
+    width: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));
+    max-width: 100%;
+    transform: translateX(100%);
+  }
+
+  :host([placement='end']) .drawer-overlay.is-open .drawer-panel,
+  :host(:not([placement])) .drawer-overlay.is-open .drawer-panel {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  /* ─── Placement: start (left) ─── */
+
+  :host([placement='start']) .drawer-panel {
+    top: 0;
+    inset-inline-start: 0;
+    bottom: 0;
+    width: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));
+    max-width: 100%;
+    transform: translateX(-100%);
+  }
+
+  :host([placement='start']) .drawer-overlay.is-open .drawer-panel {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  /* ─── Placement: top ─── */
+
+  :host([placement='top']) .drawer-panel {
+    top: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    height: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));
+    max-height: 100%;
+    width: 100%;
+    transform: translateY(-100%);
+  }
+
+  :host([placement='top']) .drawer-overlay.is-open .drawer-panel {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  /* ─── Placement: bottom ─── */
+
+  :host([placement='bottom']) .drawer-panel {
+    bottom: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    height: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));
+    max-height: 100%;
+    width: 100%;
+    transform: translateY(100%);
+  }
+
+  :host([placement='bottom']) .drawer-overlay.is-open .drawer-panel {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  /* ─── Header ─── */
+
+  .drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--hx-space-4, 1rem);
+    padding: var(--hx-drawer-header-padding, var(--hx-space-5, 1.25rem) var(--hx-space-6, 1.5rem));
+    border-bottom: var(--hx-border-width-thin, 1px) solid
+      var(--hx-drawer-header-border-color, var(--hx-color-neutral-200));
+    flex-shrink: 0;
+  }
+
+  .drawer-title {
+    margin: 0;
+    flex: 1 1 auto;
+    font-family: var(--hx-font-family-sans);
+    font-size: var(--hx-font-size-lg);
+    font-weight: var(--hx-font-weight-semibold);
+    line-height: var(--hx-line-height-tight);
+    color: var(--hx-drawer-title-color, var(--hx-color-neutral-900));
+  }
+
+  .drawer-header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+    flex-shrink: 0;
+  }
+
+  .drawer-close-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    width: var(--hx-touch-target-min, 2.75rem);
+    height: var(--hx-touch-target-min, 2.75rem);
+    padding: 0;
+    border: none;
+    border-radius: var(--hx-border-radius-md, 0.375rem);
+    background: transparent;
+    color: var(--hx-color-neutral-500);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background-color var(--hx-duration-fast, 100ms) var(--hx-easing-default, ease);
+  }
+
+  .drawer-close-button:hover {
+    background-color: var(--hx-color-neutral-100);
+    color: var(--hx-color-neutral-900);
+  }
+
+  .drawer-close-button:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-drawer-close-btn-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* ─── Visually-hidden close button (no-header mode, WCAG 4.1.2) ─── */
+  /* Keeps the button reachable by keyboard/AT but invisible to sighted users. */
+
+  .drawer-close-button--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;
+  }
+
+  /* When focused via keyboard, restore visibility so users know where focus is. */
+  .drawer-close-button--sr-only:focus-visible {
+    position: static;
+    width: auto;
+    height: auto;
+    clip: auto;
+    white-space: normal;
+    overflow: visible;
+    margin: 0;
+  }
+
+  /* ─── Body ─── */
+
+  .drawer-body {
+    flex: 1 1 auto;
+    padding: var(--hx-drawer-body-padding, var(--hx-space-6, 1.5rem));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  /* ─── Footer ─── */
+
+  .drawer-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--hx-space-3, 0.75rem);
+    padding: var(--hx-drawer-footer-padding, var(--hx-space-4, 1rem) var(--hx-space-6, 1.5rem));
+    border-top: var(--hx-border-width-thin, 1px) solid
+      var(--hx-drawer-footer-border-color, var(--hx-color-neutral-200));
+    flex-shrink: 0;
+  }
+/* ── hx-dropdown ── */
+:host {
+    display: inline-block;
+    position: relative;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: var(--hx-opacity-disabled, 0.5);
+  }
+
+  .trigger-wrapper {
+    display: inline-block;
+  }
+
+  [part='panel'] {
+    position: fixed;
+    z-index: var(--hx-dropdown-panel-z-index, 1000);
+    min-width: var(--hx-dropdown-panel-min-width, 160px);
+    background: var(--hx-dropdown-panel-bg, var(--hx-color-neutral-0, #ffffff));
+    border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-neutral-200, #e5e7eb));
+    border-radius: var(--hx-dropdown-panel-border-radius, var(--hx-border-radius-md, 0.375rem));
+    box-shadow: var(
+      --hx-dropdown-panel-shadow,
+      0 4px 16px var(--hx-overlay-black-12, rgba(0, 0, 0, 0.12))
+    );
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      opacity var(--hx-transition-fast, 150ms ease),
+      visibility var(--hx-transition-fast, 150ms ease);
+    outline: none;
+  }
+
+  [part='panel'].panel--visible {
+    visibility: visible;
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='panel'] {
+      transition: none;
+    }
+  }
+/* ── hx-popover ── */
+:host {
+    /* P2-05: display:contents lets the trigger-wrapper control layout inline;
+       position:relative was vestigial — body uses position:fixed via Floating UI */
+    display: contents;
+  }
+
+  .trigger-wrapper {
+    display: inline-block;
+  }
+
+  [part='body'] {
+    position: fixed;
+    z-index: var(--hx-popover-z-index, 9999);
+    max-width: var(--hx-popover-max-width, 320px);
+    padding: var(--hx-popover-padding, var(--hx-space-3, 0.75rem));
+    background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));
+    color: var(--hx-popover-color, var(--hx-color-neutral-900, #111827));
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-popover-font-size, var(--hx-font-size-sm, 0.875rem));
+    line-height: var(--hx-line-height-normal, 1.5);
+    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e5e7eb));
+    border-radius: var(--hx-popover-border-radius, var(--hx-border-radius-md, 0.375rem));
+    box-shadow: var(
+      --hx-popover-shadow,
+      var(--hx-shadow-md, 0 4px 16px var(--hx-overlay-black-12, rgba(0, 0, 0, 0.12)))
+    );
+    visibility: hidden;
+    opacity: 0;
+    transition:
+      opacity var(--hx-popover-transition-duration, 0.2s) ease,
+      visibility var(--hx-popover-transition-duration, 0.2s) ease;
+    word-wrap: break-word;
+  }
+
+  [part='body'].visible {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  [part='body']:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-popover-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  [part='arrow'] {
+    position: absolute;
+    width: var(--hx-popover-arrow-size, 10px);
+    height: var(--hx-popover-arrow-size, 10px);
+    background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));
+    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e5e7eb));
+    transform: rotate(45deg);
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='body'] {
+      transition: none;
+    }
+  }
+/* ── hx-popup ── */
+:host {
+    display: inline-block;
+  }
+
+  [part='popup'] {
+    position: fixed;
+    z-index: var(--hx-popup-z-index, 9000);
+    inset: 0 auto auto 0;
+    box-sizing: border-box;
+    transition: var(--hx-popup-transition, none);
+  }
+
+  :host(:not([active])) [part='popup'] {
+    display: none;
+  }
+
+  [part='arrow'] {
+    position: absolute;
+    width: var(--hx-arrow-size, 8px);
+    height: var(--hx-arrow-size, 8px);
+    background: var(--hx-arrow-color, var(--hx-color-neutral-0, #ffffff));
+    transform: rotate(45deg);
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='popup'] {
+      transition: none;
+    }
+  }
+/* ── hx-tooltip ── */
+:host {
+    display: inline-block;
+  }
+
+  .trigger-wrapper {
+    display: inline-block;
+  }
+
+  [part='tooltip'] {
+    position: fixed;
+    z-index: var(--hx-tooltip-z-index, var(--hx-z-index-tooltip, 1600));
+    max-width: var(--hx-tooltip-max-width, 280px);
+    padding: var(--hx-tooltip-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));
+    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #111827));
+    color: var(--hx-tooltip-color, var(--hx-color-neutral-50, #f9fafb));
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-tooltip-font-size, var(--hx-font-size-xs, 0.75rem));
+    line-height: var(--hx-line-height-normal, 1.5);
+    border-radius: var(--hx-tooltip-border-radius, var(--hx-border-radius-sm, 0.25rem));
+    box-shadow: var(
+      --hx-tooltip-shadow,
+      var(--hx-shadow-sm, 0 2px 8px var(--hx-overlay-black-20, rgba(0, 0, 0, 0.2)))
+    );
+    visibility: hidden;
+    opacity: 0;
+    transition:
+      opacity var(--hx-tooltip-transition-duration, var(--hx-transition-fast, 150ms ease)),
+      visibility var(--hx-tooltip-transition-duration, var(--hx-transition-fast, 150ms ease));
+    overflow-wrap: break-word;
+  }
+
+  [part='tooltip'].visible {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  [part='arrow'] {
+    position: absolute;
+    width: var(--hx-tooltip-arrow-size, 8px);
+    height: var(--hx-tooltip-arrow-size, 8px);
+    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #111827));
+    transform: rotate(45deg);
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='tooltip'] {
+      transition: none;
+    }
+  }