npm - @helixui/library - Versions diffs - 2.1.2-next.53 → 2.1.2-next.57 - Mend

@helixui/library 2.1.2-next.53 → 2.1.2-next.57

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 (753) hide show

package/dist/css/hx-time-picker.css CHANGED Viewed

@@ -1,2 +1,225 @@
 /* hx-time-picker — extracted from Shadow DOM styles */
-:host{display:block;position:relative}:host([disabled]){opacity:var(--hx-opacity-disabled, .5);pointer-events:none}*{box-sizing:border-box}.field{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-time-picker-font-family, var(--hx-font-family-sans, sans-serif))}.field__label{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-time-picker-label-color, var(--hx-color-neutral-700));line-height:var(--hx-line-height-normal, 1.5)}.field__required-marker{color:var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));font-weight:var(--hx-font-weight-bold, 700)}.field__combobox{position:relative;display:flex;align-items:center;border:var(--hx-border-width-thin, 1px) solid var(--hx-time-picker-border-color, var(--hx-color-neutral-300));border-radius:var(--hx-time-picker-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-time-picker-bg, var(--hx-color-neutral-0));transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease);overflow:visible}.field__combobox:focus-within{border-color:var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field--error .field__combobox{border-color:var(--hx-time-picker-error-color, var(--hx-color-error-500))}.field--error .field__combobox:focus-within{border-color:var(--hx-time-picker-error-color, var(--hx-color-error-500));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-time-picker-error-color, var(--hx-color-error-500)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field__input{flex:1;border:none;outline:none;background:transparent;padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-family:inherit;font-size:var(--hx-font-size-md, 1rem);color:var(--hx-time-picker-color, var(--hx-color-neutral-800));line-height:var(--hx-line-height-normal, 1.5);min-height:var(--hx-size-10, 2.5rem);width:100%;cursor:text}.field__input::placeholder{color:var(--hx-color-neutral-400)}.field__input:disabled{cursor:not-allowed}.field__toggle{display:flex;align-items:center;justify-content:center;border:none;background:transparent;padding:0 var(--hx-space-3, .75rem);color:var(--hx-time-picker-chevron-color, var(--hx-color-neutral-500));cursor:pointer;height:100%;min-height:var(--hx-size-10, 2.5rem);flex-shrink:0;border-inline-start:var(--hx-border-width-thin, 1px) solid var(--hx-time-picker-border-color, var(--hx-color-neutral-300))}.field__toggle:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));outline-offset:-2px;border-radius:0 var(--hx-time-picker-border-radius, var(--hx-border-radius-md, .375rem))}.field__listbox{position:absolute;top:calc(100% + var(--hx-space-1, .25rem));inset-inline-start:0;inset-inline-end:0;z-index:var(--hx-z-index-dropdown, 1000);background-color:var(--hx-time-picker-listbox-bg, var(--hx-color-neutral-0));border:var(--hx-border-width-thin, 1px) solid var(--hx-time-picker-border-color, var(--hx-color-neutral-300));border-radius:var(--hx-time-picker-border-radius, var(--hx-border-radius-md, .375rem));box-shadow:var( --hx-time-picker-listbox-shadow, 0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900) 12%, transparent) );max-height:var(--hx-time-picker-listbox-max-height, 16rem);overflow-y:auto;padding:var(--hx-space-1, .25rem) 0;list-style:none;margin:0}@media(prefers-reduced-motion:no-preference){.field__listbox{animation:hx-listbox-enter var(--hx-transition-fast, .15s ease) forwards}}@keyframes hx-listbox-enter{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.field__option{display:flex;align-items:center;padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-size:var(--hx-font-size-md, 1rem);font-family:inherit;color:var(--hx-time-picker-option-color, var(--hx-color-neutral-800));cursor:pointer;transition:background-color var(--hx-transition-fast, .15s ease);line-height:var(--hx-line-height-normal, 1.5)}.field__option:hover,.field__option--active{background-color:var(--hx-time-picker-option-hover-bg, var(--hx-color-primary-50));color:var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700))}.field__option--selected{background-color:var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));color:var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800));font-weight:var(--hx-font-weight-medium, 500)}.field__option--selected.field__option--active{background-color:var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100))}@media(prefers-reduced-motion:reduce){.field__combobox,.field__option{transition:none}}.field__help-text,.field__error{font-size:var(--hx-font-size-xs, .75rem);line-height:var(--hx-line-height-normal, 1.5)}.field__help-text{color:var(--hx-color-neutral-500)}.field__error{color:var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c))}
+:host {
+    display: block;
+    position: relative;
+  }
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+  * {
+    box-sizing: border-box;
+  }
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    font-family: var(--hx-time-picker-font-family, var(--hx-font-family-sans, sans-serif));
+  }
+  .field__label {
+    display: flex;
+    align-items: baseline;
+    gap: var(--hx-space-1, 0.25rem);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    color: var(--hx-time-picker-label-color, var(--hx-color-neutral-700));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+  .field__required-marker {
+    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+  .field__combobox {
+    position: relative;
+    display: flex;
+    align-items: center;
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
+    border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-time-picker-bg, var(--hx-color-neutral-0));
+    transition:
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+    overflow: visible;
+  }
+  .field__combobox:focus-within {
+    border-color: var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      color-mix(
+        in srgb,
+        var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color))
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+  .field--error .field__combobox {
+    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500));
+  }
+  .field--error .field__combobox:focus-within {
+    border-color: var(--hx-time-picker-error-color, var(--hx-color-error-500));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      color-mix(
+        in srgb,
+        var(--hx-time-picker-error-color, var(--hx-color-error-500))
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+  .field__input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    font-family: inherit;
+    font-size: var(--hx-font-size-md, 1rem);
+    color: var(--hx-time-picker-color, var(--hx-color-neutral-800));
+    line-height: var(--hx-line-height-normal, 1.5);
+    min-height: var(--hx-size-10, 2.5rem);
+    width: 100%;
+    cursor: text;
+  }
+  .field__input::placeholder {
+    color: var(--hx-color-neutral-400);
+  }
+  .field__input:disabled {
+    cursor: not-allowed;
+  }
+  .field__toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    padding: 0 var(--hx-space-3, 0.75rem);
+    color: var(--hx-time-picker-chevron-color, var(--hx-color-neutral-500));
+    cursor: pointer;
+    height: 100%;
+    min-height: var(--hx-size-10, 2.5rem);
+    flex-shrink: 0;
+    border-inline-start: var(--hx-border-width-thin, 1px) solid
+      var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
+  }
+  .field__toggle:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-time-picker-focus-ring-color, var(--hx-focus-ring-color));
+    outline-offset: -2px;
+    border-radius: 0 var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
+  }
+  .field__listbox {
+    position: absolute;
+    top: calc(100% + var(--hx-space-1, 0.25rem));
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    z-index: var(--hx-z-index-dropdown, 1000);
+    background-color: var(--hx-time-picker-listbox-bg, var(--hx-color-neutral-0));
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-time-picker-border-color, var(--hx-color-neutral-300));
+    border-radius: var(--hx-time-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
+    box-shadow: var(
+      --hx-time-picker-listbox-shadow,
+      0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900) 12%, transparent)
+    );
+    max-height: var(--hx-time-picker-listbox-max-height, 16rem);
+    overflow-y: auto;
+    padding: var(--hx-space-1, 0.25rem) 0;
+    list-style: none;
+    margin: 0;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .field__listbox {
+      animation: hx-listbox-enter var(--hx-transition-fast, 150ms ease) forwards;
+    }
+  }
+  @keyframes hx-listbox-enter {
+    0% {
+      opacity: 0;
+      transform: translateY(-0.25rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  .field__option {
+    display: flex;
+    align-items: center;
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    font-size: var(--hx-font-size-md, 1rem);
+    font-family: inherit;
+    color: var(--hx-time-picker-option-color, var(--hx-color-neutral-800));
+    cursor: pointer;
+    transition: background-color var(--hx-transition-fast, 150ms ease);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+  .field__option:hover,
+  .field__option--active {
+    background-color: var(--hx-time-picker-option-hover-bg, var(--hx-color-primary-50));
+    color: var(--hx-time-picker-option-hover-color, var(--hx-color-primary-700));
+  }
+  .field__option--selected {
+    background-color: var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));
+    color: var(--hx-time-picker-option-selected-color, var(--hx-color-primary-800));
+    font-weight: var(--hx-font-weight-medium, 500);
+  }
+  .field__option--selected.field__option--active {
+    background-color: var(--hx-time-picker-option-selected-bg, var(--hx-color-primary-100));
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .field__combobox,
+    .field__option {
+      transition: none;
+    }
+  }
+  .field__help-text,
+  .field__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+  .field__help-text {
+    color: var(--hx-color-neutral-500);
+  }
+  .field__error {
+    color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #b91c1c));
+  }
+  @media (forced-colors: active) {
+    .field__combobox {
+      border-color: ButtonText;
+      background-color: Canvas;
+    }
+    .field__combobox:focus-within {
+      outline: 3px solid Highlight;
+      outline-offset: 0;
+      box-shadow: none;
+    }
+    .field--error .field__combobox {
+      border-color: LinkText;
+    }
+    .field--error .field__combobox:focus-within {
+      outline-color: Highlight;
+      box-shadow: none;
+    }
+    .field__toggle:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 0;
+    }
+    .field__listbox {
+      border-color: ButtonText;
+      background-color: Canvas;
+      box-shadow: none;
+    }
+    .field__option:hover,
+    .field__option--active {
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+    .field__option--selected {
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+    .field__error {
+      color: LinkText;
+    }
+  }

package/dist/css/hx-toast.css CHANGED Viewed

@@ -20,13 +20,12 @@
     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-family: var(--hx-toast-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)
+      var(--hx-shadow-md, 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)));
@@ -46,22 +45,22 @@
   /* ─── Variant overrides ─── */
   .toast--success {
-    --hx-toast-bg: var(--hx-color-success-600, #16a34a);
+    --hx-toast-bg: var(--hx-color-success-600, #15803d);
     --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
   }
   .toast--warning {
-    --hx-toast-bg: var(--hx-color-warning-500, #f59e0b);
+    --hx-toast-bg: var(--hx-color-warning-500, #d97706);
     --hx-toast-color: var(--hx-color-neutral-900, #0f172a);
   }
   .toast--danger {
-    --hx-toast-bg: var(--hx-color-error-600, #dc2626);
+    --hx-toast-bg: var(--hx-color-error-600, #b91c1c);
     --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
   }
   .toast--info {
-    --hx-toast-bg: var(--hx-color-primary-600, #2563eb);
+    --hx-toast-bg: var(--hx-color-primary-600, #1d4ed8);
     --hx-toast-color: var(--hx-color-neutral-0, #ffffff);
   }

package/dist/css/hx-toggle-button.css CHANGED Viewed

@@ -129,7 +129,7 @@
    * to give clear visual feedback without introducing a new color.
    */
   .button--primary.button--pressed {
-    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #1d4ed8));
+    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #1e40af));
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
       var(--hx-color-neutral-0, #ffffff)
@@ -155,7 +155,7 @@
     --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
-      var(--hx-color-primary-700, #1d4ed8)
+      var(--hx-color-primary-700, #1e40af)
     );
     --hx-toggle-button-border-color: var(--hx-color-primary-400, #60a5fa);
     box-shadow: inset 0 0 0 1px var(--hx-color-primary-400, #60a5fa);
@@ -166,7 +166,7 @@
     --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
-      var(--hx-color-primary-700, #1d4ed8)
+      var(--hx-color-primary-700, #1e40af)
     );
     --hx-toggle-button-border-color: transparent;
   }

package/dist/css/hx-tooltip.css CHANGED Viewed

@@ -12,9 +12,9 @@
     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);
+    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-tooltip-color, var(--hx-color-neutral-50, #f8fafc));
+    font-family: var(--hx-tooltip-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));
@@ -39,7 +39,7 @@
     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));
+    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #0f172a));
     transform: rotate(45deg);
     pointer-events: none;
   }

package/dist/css/hx-top-nav.css CHANGED Viewed

@@ -26,10 +26,10 @@
   .nav {
     background-color: var(--hx-top-nav-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-top-nav-color, var(--hx-color-neutral-800, #212529));
+    color: var(--hx-top-nav-color, var(--hx-color-neutral-800, #1e293b));
     border-bottom: var(--hx-border-width-thin, 1px) solid
-      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));
-    font-family: var(--hx-font-family-sans, sans-serif);
+      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    font-family: var(--hx-top-nav-font-family, var(--hx-font-family-sans, sans-serif));
   }
   /* ─── Bar row (always visible) ─── */
@@ -62,13 +62,13 @@
     background: transparent;
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
-    color: var(--hx-top-nav-toggle-color, var(--hx-color-neutral-700, #343a40));
+    color: var(--hx-top-nav-toggle-color, var(--hx-color-neutral-700, #334155));
     cursor: pointer;
     line-height: 0;
   }
   .mobile-toggle:hover {
-    background: var(--hx-color-neutral-100, #f1f3f5);
+    background: var(--hx-color-neutral-100, #f1f5f9);
   }
   .mobile-toggle:focus-visible {
@@ -90,12 +90,12 @@
     width: 100%;
     padding-block: var(--hx-space-3, 0.75rem);
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));
+      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
   }
   .nav__collapsible--open {
     display: flex;
-    animation: hx-mobile-nav-open var(--hx-duration-fast, 150ms) ease-out;
+    animation: hx-mobile-nav-open var(--hx-duration-fast, 100ms) ease-out;
   }
   /* ─── Menu and actions in collapsible (mobile) ─── */
@@ -112,7 +112,7 @@
     margin-top: var(--hx-space-3, 0.75rem);
     padding-top: var(--hx-space-3, 0.75rem);
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));
+      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
   }
   /* ─── Desktop breakpoint ─── */

package/dist/css/hx-tree-view.css CHANGED Viewed

@@ -20,3 +20,12 @@
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
+  /* ─── High Contrast Mode (forced-colors) ─── */
+  @media (forced-colors: active) {
+    .tree:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+  }

package/dist/css/hx-visually-hidden.css CHANGED Viewed

@@ -24,3 +24,15 @@
     white-space: normal !important;
     border: 0 !important;
   }
+  /* ─── High Contrast Mode (forced-colors) ─── */
+  /* hx-visually-hidden clips content off-screen for sighted users; in forced-colors
+     mode this behavior is intentional. When the focusable variant becomes visible
+     on focus, the browser's forced-colors mapping handles text/background colors
+     correctly via the default forced-color-adjust: auto. */
+  @media (forced-colors: active) {
+    :host([focusable]:focus-within) {
+      forced-color-adjust: auto;
+    }
+  }

package/dist/css/index.css CHANGED Viewed

@@ -1,4 +1,4 @@
-/* index.css — generated 2026-04-16T01:02:24.995Z */
+/* index.css — generated 2026-04-23T00:39:37.177Z */
 /* Imports all per-component CSS files for Drupal asset pipeline */
 @import './hx-accordion.css';