@helixui/library 1.1.2 → 2.0.0-next.31

package/dist/css/hx-nav.css

@@ -0,0 +1,242 @@
+/* hx-nav — extracted from Shadow DOM styles */
+:host {
+    display: block;
+    font-family: var(--hx-nav-font-family, var(--hx-font-family-sans, sans-serif));
+    font-size: var(--hx-nav-font-size, var(--hx-font-size-sm, 0.875rem));
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Nav Container ─── */
+
+  [part='nav'] {
+    position: relative;
+    background-color: var(--hx-nav-bg, var(--hx-color-neutral-900, #111827));
+    color: var(--hx-nav-color, var(--hx-color-neutral-100, #f3f4f6));
+    padding: var(--hx-nav-padding, var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem));
+  }
+
+  /* ─── Hamburger Toggle ─── */
+
+  [part='toggle'] {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding: var(--hx-space-2, 0.5rem);
+    background: transparent;
+    border: none;
+    border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));
+    color: var(--hx-nav-color, var(--hx-color-neutral-100, #f3f4f6));
+    cursor: pointer;
+    transition: background-color var(--hx-transition-fast, 150ms) ease;
+    line-height: 0;
+  }
+
+  [part='toggle']:hover {
+    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #374151));
+  }
+
+  [part='toggle']:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-nav-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* ─── Navigation List ─── */
+
+  [part='list'] {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: var(--hx-space-1, 0.25rem);
+    align-items: center;
+  }
+
+  /* ─── Nav Item ─── */
+
+  [part='item'] {
+    position: relative;
+  }
+
+  /* ─── Nav Link / Button ─── */
+
+  .nav__link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-1, 0.25rem);
+    padding: var(--hx-nav-item-padding, var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem));
+    color: var(--hx-nav-link-color, var(--hx-color-neutral-100, #f3f4f6));
+    text-decoration: none;
+    border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: var(--hx-font-weight-medium, 500);
+    line-height: var(--hx-line-height-normal, 1.5);
+    white-space: nowrap;
+    transition:
+      background-color var(--hx-transition-fast, 150ms) ease,
+      color var(--hx-transition-fast, 150ms) ease;
+  }
+
+  .nav__link:hover {
+    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #374151));
+    color: var(--hx-nav-link-hover-color, var(--hx-color-neutral-0, #ffffff));
+  }
+
+  .nav__link:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-nav-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .nav__link--active {
+    background-color: var(--hx-nav-link-active-bg, var(--hx-color-primary-600, #2563eb));
+    color: var(--hx-nav-link-active-color, var(--hx-color-neutral-0, #ffffff));
+  }
+
+  /* ─── Chevron Icon ─── */
+
+  .nav__chevron {
+    transition: transform var(--hx-transition-normal, 200ms) ease;
+    flex-shrink: 0;
+  }
+
+  .nav__link--expanded .nav__chevron {
+    transform: rotate(180deg);
+  }
+
+  /* ─── Submenu ─── */
+
+  .nav__submenu {
+    position: absolute;
+    top: calc(100% + var(--hx-space-1, 0.25rem));
+    left: 0;
+    min-width: var(--hx-nav-submenu-min-width, 12rem);
+    list-style: none;
+    margin: 0;
+    padding: var(--hx-space-1, 0.25rem) 0;
+    background-color: var(--hx-nav-submenu-bg, var(--hx-color-neutral-800, #1f2937));
+    border-radius: var(--hx-border-radius-md, 0.375rem);
+    box-shadow: var(
+      --hx-shadow-md,
+      0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -2px rgb(0 0 0 / 0.1)
+    );
+    z-index: var(--hx-z-index-dropdown, 1000);
+  }
+
+  .nav__submenu[hidden] {
+    display: none;
+  }
+
+  .nav__submenu .nav__link {
+    display: block;
+    width: 100%;
+    text-align: start;
+    border-radius: 0;
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
+  }
+
+  /* ─── Vertical / Sidebar Orientation ─── */
+
+  :host([orientation='vertical']) [part='nav'] {
+    padding: var(--hx-space-4, 1rem) var(--hx-space-2, 0.5rem);
+  }
+
+  :host([orientation='vertical']) [part='list'] {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--hx-space-1, 0.25rem);
+  }
+
+  :host([orientation='vertical']) .nav__link {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  :host([orientation='vertical']) .nav__submenu {
+    position: static;
+    box-shadow: none;
+    border-radius: 0;
+    background-color: transparent;
+    padding: 0;
+    padding-inline-start: var(--hx-space-4, 1rem);
+  }
+
+  :host([orientation='vertical']) .nav__submenu[hidden] {
+    display: none;
+  }
+
+  :host([orientation='vertical']) .nav__submenu .nav__link {
+    padding: var(--hx-space-1-5, 0.375rem) var(--hx-space-3, 0.75rem);
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-nav-link-color, var(--hx-color-neutral-300, #d1d5db));
+  }
+
+  /* ─── Mobile Responsive ─── */
+
+  @media (max-width: 768px) {
+    [part='nav'] {
+      display: flex;
+      flex-direction: column;
+      padding: var(--hx-space-2, 0.5rem);
+    }
+
+    [part='toggle'] {
+      display: inline-flex;
+      align-self: flex-end;
+    }
+
+    [part='list'] {
+      display: none;
+      flex-direction: column;
+      align-items: stretch;
+      width: 100%;
+      margin-top: var(--hx-space-2, 0.5rem);
+      gap: var(--hx-space-1, 0.25rem);
+    }
+
+    [part='list'].nav__list--open {
+      display: flex;
+    }
+
+    [part='item'] {
+      width: 100%;
+    }
+
+    .nav__link {
+      width: 100%;
+      justify-content: flex-start;
+    }
+
+    .nav__submenu {
+      position: static;
+      box-shadow: none;
+      border-radius: 0;
+      padding-inline-start: var(--hx-space-4, 1rem);
+      background-color: transparent;
+    }
+
+    .nav__submenu .nav__link {
+      padding: var(--hx-space-1-5, 0.375rem) var(--hx-space-3, 0.75rem);
+    }
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .nav__link,
+    .nav__chevron,
+    [part='toggle'] {
+      transition: none;
+      animation: none;
+    }
+  }

package/dist/css/hx-number-input.css

@@ -0,0 +1,246 @@
+/* hx-number-input — extracted from Shadow DOM styles */
+:host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled);
+    pointer-events: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1);
+    font-family: var(--hx-number-input-font-family, var(--hx-font-family-sans));
+  }
+
+  /* ─── Label ─── */
+
+  .field__label-wrapper {
+    display: contents;
+  }
+
+  .field__label {
+    display: flex;
+    align-items: baseline;
+    gap: var(--hx-space-1);
+    font-size: var(--hx-font-size-sm);
+    font-weight: var(--hx-font-weight-medium);
+    color: var(--hx-number-input-label-color, var(--hx-color-neutral-700));
+    line-height: var(--hx-line-height-normal);
+  }
+
+  .field__required-marker {
+    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold);
+  }
+
+  /* ─── Input Wrapper ─── */
+
+  .field__input-wrapper {
+    display: flex;
+    align-items: stretch;
+    border: var(--hx-border-width-thin) solid
+      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+    border-radius: var(--hx-number-input-border-radius, var(--hx-border-radius-md));
+    background-color: var(--hx-number-input-bg, var(--hx-color-neutral-0));
+    transition:
+      border-color var(--hx-transition-fast),
+      box-shadow var(--hx-transition-fast);
+    overflow: hidden;
+  }
+
+  .field__input-wrapper:focus-within {
+    border-color: var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color));
+    /* Fallback for Safari < 16.2 (no color-mix support) */
+    box-shadow: 0 0 0 var(--hx-focus-ring-width)
+      var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width)
+      color-mix(
+        in srgb,
+        var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color))
+          calc(var(--hx-focus-ring-opacity) * 100%),
+        transparent
+      );
+  }
+
+  /* ─── Error State ─── */
+
+  .field--error .field__input-wrapper {
+    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
+  }
+
+  .field--error .field__input-wrapper:focus-within {
+    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
+    /* Fallback for Safari < 16.2 (no color-mix support) */
+    box-shadow: 0 0 0 var(--hx-focus-ring-width)
+      var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width)
+      color-mix(
+        in srgb,
+        var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626))
+          calc(var(--hx-focus-ring-opacity) * 100%),
+        transparent
+      );
+  }
+
+  /* ─── Slots (Prefix / Suffix) ─── */
+
+  .field__prefix,
+  .field__suffix {
+    display: flex;
+    align-items: center;
+    padding: 0 var(--hx-space-3);
+    color: var(--hx-color-neutral-500);
+    flex-shrink: 0;
+  }
+
+  /* ─── Native Input ─── */
+
+  .field__input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-family: inherit;
+    color: var(--hx-number-input-color, var(--hx-color-neutral-800));
+    line-height: var(--hx-line-height-normal);
+    width: 100%;
+    /* Size: md (default) */
+    padding: var(--hx-space-2) var(--hx-space-3);
+    font-size: var(--hx-font-size-md);
+    min-height: var(--hx-size-10);
+  }
+
+  .field__input::placeholder {
+    color: var(--hx-color-neutral-400);
+  }
+
+  .field__input:disabled {
+    cursor: not-allowed;
+  }
+
+  /* ─── Hide native browser spinners ─── */
+
+  .field__input[type='number']::-webkit-inner-spin-button,
+  .field__input[type='number']::-webkit-outer-spin-button {
+    display: none;
+  }
+
+  .field__input[type='number'] {
+    appearance: textfield;
+  }
+
+  /* ─── Size Variants ─── */
+
+  .field--sm .field__input {
+    padding: var(--hx-space-1) var(--hx-space-2);
+    font-size: var(--hx-font-size-sm);
+    min-height: var(--hx-size-8);
+  }
+
+  .field--lg .field__input {
+    padding: var(--hx-space-3) var(--hx-space-4);
+    font-size: var(--hx-font-size-lg);
+    min-height: var(--hx-size-12);
+  }
+
+  /* ─── Stepper ─── */
+
+  .field__stepper {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    border-inline-start: var(--hx-border-width-thin) solid
+      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+  }
+
+  .field__stepper-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: var(--hx-color-neutral-600);
+    padding: 0;
+    flex: 1;
+    min-width: var(--hx-size-8);
+    line-height: 1;
+    transition: background-color var(--hx-transition-fast);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .field__stepper-btn:not(:last-child) {
+    border-bottom: var(--hx-border-width-thin) solid
+      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+  }
+
+  .field__stepper-btn:hover:not(:disabled) {
+    background-color: var(--hx-color-neutral-50);
+    color: var(--hx-color-neutral-800);
+  }
+
+  /* Suppress focus ring for mouse/touch focus; keep for keyboard and programmatic focus */
+  .field__stepper-btn:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  .field__stepper-btn:focus-visible {
+    outline: var(--hx-focus-ring-width) solid
+      var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color));
+    outline-offset: -2px;
+  }
+
+  .field__stepper-btn:disabled {
+    opacity: var(--hx-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .field__stepper-btn svg {
+    pointer-events: none;
+    width: var(--hx-number-input-icon-size, var(--hx-space-3, 0.75rem));
+    height: var(--hx-number-input-icon-size, var(--hx-space-3, 0.75rem));
+  }
+
+  /* Size sm adjustments for stepper */
+  .field--sm .field__stepper-btn {
+    min-width: var(--hx-size-6);
+  }
+
+  /* Size lg adjustments for stepper */
+  .field--lg .field__stepper-btn {
+    min-width: var(--hx-size-10);
+  }
+
+  /* ─── Help Text & Error Messages ─── */
+
+  .field__help-text {
+    font-size: var(--hx-font-size-xs);
+    color: var(--hx-color-neutral-500);
+    line-height: var(--hx-line-height-normal);
+  }
+
+  .field__error {
+    font-size: var(--hx-font-size-xs);
+    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));
+    line-height: var(--hx-line-height-normal);
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .field__input-wrapper {
+      transition: none;
+    }
+
+    .field__stepper-btn {
+      transition: none;
+    }
+  }

package/dist/css/hx-overflow-menu.css

@@ -0,0 +1,133 @@
+/* hx-overflow-menu — extracted from Shadow DOM styles */
+:host {
+    display: inline-block;
+    position: relative;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: var(--hx-opacity-disabled, 0.4);
+  }
+
+  /* ─── Trigger Button ─── */
+
+  .trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: var(--hx-border-width-thin, 1px) solid transparent;
+    border-radius: var(--hx-border-radius-md, 0.375rem);
+    background-color: transparent;
+    color: var(--hx-overflow-menu-button-color, var(--hx-color-neutral-600, #4b5563));
+    cursor: pointer;
+    transition:
+      background-color var(--hx-transition-fast, 0.15s ease),
+      color var(--hx-transition-fast, 0.15s ease);
+    flex-shrink: 0;
+    padding: 0;
+    line-height: 1;
+  }
+
+  .trigger:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-overflow-menu-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .trigger:hover:not([disabled]) {
+    background-color: var(--hx-color-neutral-100, #f3f4f6);
+  }
+
+  .trigger--open {
+    background-color: var(--hx-color-neutral-100, #f3f4f6);
+  }
+
+  /* ─── Size Variants ─── */
+
+  .trigger--sm {
+    width: var(--hx-size-8, 2rem);
+    height: var(--hx-size-8, 2rem);
+    min-width: var(--hx-size-touch-target, 2.75rem);
+    min-height: var(--hx-size-touch-target, 2.75rem);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+
+  .trigger--md {
+    width: var(--hx-size-10, 2.5rem);
+    height: var(--hx-size-10, 2.5rem);
+    min-width: var(--hx-size-touch-target, 2.75rem);
+    min-height: var(--hx-size-touch-target, 2.75rem);
+    font-size: var(--hx-font-size-md, 1rem);
+  }
+
+  .trigger--lg {
+    width: var(--hx-size-12, 3rem);
+    height: var(--hx-size-12, 3rem);
+    font-size: var(--hx-font-size-lg, 1.125rem);
+  }
+
+  /* ─── Panel ─── */
+
+  .panel {
+    position: fixed;
+    z-index: var(--hx-overflow-menu-panel-z-index, 1000);
+    min-width: var(--hx-overflow-menu-panel-min-width, 160px);
+    background: var(--hx-overflow-menu-panel-bg, var(--hx-color-neutral-0, #fff));
+    border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-neutral-200, #e5e7eb));
+    border-radius: var(
+      --hx-overflow-menu-panel-border-radius,
+      var(--hx-border-radius-md, 0.375rem)
+    );
+    box-shadow: var(
+      --hx-overflow-menu-panel-shadow,
+      0 4px 16px var(--hx-overlay-black-12, rgba(0, 0, 0, 0.12))
+    );
+    padding: var(--hx-space-1, 0.25rem) 0;
+    outline: none;
+  }
+
+  /* ─── Slot: menu items ─── */
+
+  ::slotted([role='menuitem']),
+  ::slotted([role='menuitemcheckbox']),
+  ::slotted([role='menuitemradio']) {
+    display: block;
+    width: 100%;
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    background: none;
+    border: none;
+    text-align: start;
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    color: var(--hx-color-neutral-900, #111827);
+    cursor: pointer;
+    white-space: nowrap;
+    box-sizing: border-box;
+  }
+
+  ::slotted([role='menuitem']:hover),
+  ::slotted([role='menuitemcheckbox']:hover),
+  ::slotted([role='menuitemradio']:hover) {
+    background-color: var(--hx-color-neutral-50, #f9fafb);
+  }
+
+  ::slotted([role='menuitem']:focus-visible),
+  ::slotted([role='menuitemcheckbox']:focus-visible),
+  ::slotted([role='menuitemradio']:focus-visible) {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-overflow-menu-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+      );
+    outline-offset: 0;
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .trigger {
+      transition: none;
+    }
+  }