@helixui/library 1.1.2 → 2.0.0

package/dist/css/helix-layout.css

@@ -0,0 +1,380 @@
+/* helix-layout.css — 5 components */
+
+/* ── hx-accordion ── */
+:host {
+    display: block;
+    font-family: var(--hx-font-family-sans, sans-serif);
+  }
+
+  .accordion {
+    border-radius: var(--hx-accordion-border-radius, var(--hx-border-radius-md, 0.375rem));
+    overflow: hidden;
+  }
+/* ── hx-container ── */
+:host {
+    display: block;
+    contain: layout style;
+    width: 100%;
+    background-color: var(--hx-container-bg, transparent);
+    box-sizing: border-box;
+  }
+
+  /* ─── Vertical Padding Variants ─── */
+
+  /* Defensive reset: ensures zero vertical padding even if a future base rule adds it */
+  :host([padding='none']) {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  :host([padding='sm']) {
+    padding-top: var(--hx-space-6, 1.5rem);
+    padding-bottom: var(--hx-space-6, 1.5rem);
+  }
+
+  :host([padding='md']) {
+    padding-top: var(--hx-space-12, 3rem);
+    padding-bottom: var(--hx-space-12, 3rem);
+  }
+
+  :host([padding='lg']) {
+    padding-top: var(--hx-space-16, 4rem);
+    padding-bottom: var(--hx-space-16, 4rem);
+  }
+
+  :host([padding='xl']) {
+    padding-top: var(--hx-space-24, 6rem);
+    padding-bottom: var(--hx-space-24, 6rem);
+  }
+
+  :host([padding='2xl']) {
+    padding-top: var(--hx-space-32, 8rem);
+    padding-bottom: var(--hx-space-32, 8rem);
+  }
+
+  /* ─── Inner Container ─── */
+
+  .container__inner {
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+    padding-inline-start: var(--hx-container-gutter, var(--hx-space-6, 1.5rem));
+    padding-inline-end: var(--hx-container-gutter, var(--hx-space-6, 1.5rem));
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  /* ─── Width Variants ─── */
+
+  .container__inner--full {
+    max-width: none;
+  }
+
+  .container__inner--content {
+    max-width: var(--hx-container-max-width, var(--hx-container-content, 1152px));
+  }
+
+  .container__inner--narrow {
+    max-width: var(--hx-container-max-width, var(--hx-container-narrow, 768px));
+  }
+
+  .container__inner--sm {
+    max-width: var(--hx-container-max-width, var(--hx-container-sm, 640px));
+  }
+
+  .container__inner--md {
+    max-width: var(--hx-container-max-width, var(--hx-container-md, 768px));
+  }
+
+  .container__inner--lg {
+    max-width: var(--hx-container-max-width, var(--hx-container-lg, 1024px));
+  }
+
+  .container__inner--xl {
+    max-width: var(--hx-container-max-width, var(--hx-container-xl, 1280px));
+  }
+/* ── hx-grid ── */
+:host {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+  }
+`;
+
+export const helixGridItemStyles = css`
+  :host {
+    display: block;
+    min-width: 0;
+    min-height: 0;
+  }
+/* ── hx-split-panel ── */
+:host {
+    display: flex;
+    --_divider-size: var(--hx-split-panel-divider-size, 4px);
+    --_divider-color: var(--hx-split-panel-divider-color, var(--hx-color-neutral-200));
+    --_divider-hover-color: var(--hx-split-panel-divider-hover-color, var(--hx-color-primary-500));
+    overflow: hidden;
+  }
+
+  :host([orientation='horizontal']) {
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+  }
+
+  :host([orientation='vertical']) {
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+  }
+
+  .panel {
+    overflow: auto;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .panel--start {
+    flex-shrink: 0;
+  }
+
+  .panel--end {
+    flex: 1;
+  }
+
+  :host([orientation='horizontal']) .panel--start {
+    height: 100%;
+  }
+
+  :host([orientation='vertical']) .panel--start {
+    width: 100%;
+  }
+
+  /* ─── Divider Track (flex child wrapper) ─── */
+
+  .divider-track {
+    flex-shrink: 0;
+    position: relative;
+    overflow: visible;
+    display: flex;
+    align-items: stretch;
+  }
+
+  :host([orientation='horizontal']) .divider-track {
+    width: var(--_divider-size);
+    height: 100%;
+  }
+
+  :host([orientation='vertical']) .divider-track {
+    width: 100%;
+    height: var(--_divider-size);
+  }
+
+  /* ─── Divider (separator role — no interactive children) ─── */
+
+  .divider {
+    flex: 1;
+    background-color: var(--_divider-color);
+    cursor: col-resize;
+    transition: background-color var(--hx-transition-fast, 150ms ease);
+    touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
+    outline: none;
+  }
+
+  :host([orientation='horizontal']) .divider {
+    cursor: col-resize;
+  }
+
+  :host([orientation='vertical']) .divider {
+    cursor: row-resize;
+  }
+
+  .divider:hover,
+  .divider:focus-visible {
+    background-color: var(--_divider-hover-color);
+  }
+
+  .divider:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-split-panel-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--_divider-hover-color) 30%, transparent);
+  }
+
+  :host([disabled]) .divider {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  :host([disabled]) .divider:hover,
+  :host([disabled]) .divider:focus-visible {
+    background-color: var(--_divider-color);
+    outline: none;
+    box-shadow: none;
+  }
+
+  /* ─── Collapse Controls (siblings of separator, not children) ─── */
+
+  .collapse-controls {
+    position: absolute;
+    top: 50%;
+    inset-inline-start: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--hx-space-1, 0.25rem);
+    z-index: 2;
+    pointer-events: auto;
+  }
+
+  :host([orientation='vertical']) .collapse-controls {
+    flex-direction: row;
+  }
+
+  .collapse-btn {
+    background: var(--_divider-hover-color);
+    border: 2px solid var(--hx-color-neutral-0);
+    color: var(--hx-color-neutral-0);
+    width: var(--hx-size-5, 1.25rem);
+    height: var(--hx-size-5, 1.25rem);
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--hx-split-panel-btn-icon-size, 0.5rem);
+    padding: 0;
+    line-height: 1;
+    flex-shrink: 0;
+    /* WCAG 2.5.5: minimum 44×44px touch target via transparent hit-area */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+  }
+
+  .collapse-btn:hover {
+    filter: brightness(1.1);
+  }
+
+  .collapse-btn:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-split-panel-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .divider {
+      transition: none;
+    }
+  }
+/* ── hx-stack ── */
+:host {
+    display: block;
+  }
+
+  :host([inline]) {
+    display: inline-block;
+  }
+
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-4, 1rem);
+  }
+
+  /* ─── Direction ─── */
+
+  :host([direction='horizontal']) [part='base'] {
+    flex-direction: row;
+  }
+
+  :host([direction='vertical']) [part='base'] {
+    flex-direction: column;
+  }
+
+  /* ─── Wrap ─── */
+
+  :host([wrap]) [part='base'] {
+    flex-wrap: wrap;
+  }
+
+  /* ─── Alignment ─── */
+
+  :host([align='start']) [part='base'] {
+    align-items: flex-start;
+  }
+
+  :host([align='center']) [part='base'] {
+    align-items: center;
+  }
+
+  :host([align='end']) [part='base'] {
+    align-items: flex-end;
+  }
+
+  :host([align='stretch']) [part='base'] {
+    align-items: stretch;
+  }
+
+  :host([align='baseline']) [part='base'] {
+    align-items: baseline;
+  }
+
+  /* ─── Justify ─── */
+
+  :host([justify='start']) [part='base'] {
+    justify-content: flex-start;
+  }
+
+  :host([justify='center']) [part='base'] {
+    justify-content: center;
+  }
+
+  :host([justify='end']) [part='base'] {
+    justify-content: flex-end;
+  }
+
+  :host([justify='between']) [part='base'] {
+    justify-content: space-between;
+  }
+
+  :host([justify='around']) [part='base'] {
+    justify-content: space-around;
+  }
+
+  :host([justify='evenly']) [part='base'] {
+    justify-content: space-evenly;
+  }
+
+  /* ─── Gap ─── */
+
+  :host([gap='none']) [part='base'] {
+    gap: 0;
+  }
+
+  :host([gap='xs']) [part='base'] {
+    gap: var(--hx-space-1, 0.25rem);
+  }
+
+  :host([gap='sm']) [part='base'] {
+    gap: var(--hx-space-2, 0.5rem);
+  }
+
+  :host([gap='md']) [part='base'] {
+    gap: var(--hx-space-4, 1rem);
+  }
+
+  :host([gap='lg']) [part='base'] {
+    gap: var(--hx-space-6, 1.5rem);
+  }
+
+  :host([gap='xl']) [part='base'] {
+    gap: var(--hx-space-8, 2rem);
+  }

package/dist/css/helix-media.css

@@ -0,0 +1,213 @@
+/* helix-media.css — 2 components */
+
+/* ── hx-carousel ── */
+:host {
+    display: block;
+    position: relative;
+  }
+
+  /* ─── Base ─── */
+
+  .base {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-3, 0.75rem);
+  }
+
+  :host([orientation='vertical']) .base {
+    flex-direction: row;
+  }
+
+  /* ─── Navigation ─── */
+
+  .navigation {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--hx-space-2, 0.5rem);
+  }
+
+  :host([orientation='vertical']) .navigation {
+    flex-direction: column;
+  }
+
+  .nav-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--hx-carousel-nav-btn-size, var(--hx-size-10, 2.5rem));
+    height: var(--hx-carousel-nav-btn-size, var(--hx-size-10, 2.5rem));
+    /* 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);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);
+    border-radius: var(--hx-border-radius-full, 9999px);
+    background: var(--hx-color-neutral-0, #fff);
+    color: var(--hx-color-neutral-700, #374151);
+    cursor: pointer;
+    padding: 0;
+    transition:
+      background-color var(--hx-transition-fast, 0.15s ease),
+      color var(--hx-transition-fast, 0.15s ease),
+      border-color var(--hx-transition-fast, 0.15s ease);
+    flex-shrink: 0;
+  }
+
+  .nav-btn:hover:not([disabled]) {
+    background: var(--hx-color-neutral-50, #f9fafb);
+    border-color: var(--hx-color-neutral-400, #9ca3af);
+  }
+
+  .nav-btn:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .nav-btn[disabled] {
+    opacity: var(--hx-opacity-disabled, 0.4);
+    cursor: not-allowed;
+  }
+
+  .nav-btn svg {
+    width: 1.25em;
+    height: 1.25em;
+  }
+
+  /* ─── Play/Pause ─── */
+
+  .play-pause-btn {
+    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);
+    border: var(--hx-border-width-thin, 1px) solid transparent;
+    border-radius: var(--hx-border-radius-md, 0.375rem);
+    background: transparent;
+    color: var(--hx-color-neutral-500, #6b7280);
+    cursor: pointer;
+    padding: 0;
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    transition: background-color var(--hx-transition-fast, 0.15s ease);
+    flex-shrink: 0;
+  }
+
+  .play-pause-btn:hover {
+    background: var(--hx-color-neutral-100, #f3f4f6);
+  }
+
+  .play-pause-btn:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* ─── Scroll Container ─── */
+
+  .scroll-container-wrapper {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .slide-viewport {
+    overflow: hidden;
+    border-radius: var(--hx-border-radius-md, 0.375rem);
+  }
+
+  .track {
+    display: flex;
+    transition: transform var(--hx-transition-base, 0.3s ease);
+  }
+
+  :host([orientation='vertical']) .track {
+    flex-direction: column;
+  }
+
+  /* ─── Pagination ─── */
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--hx-space-2, 0.5rem);
+    flex-wrap: wrap;
+  }
+
+  :host([orientation='vertical']) .pagination {
+    flex-direction: column;
+  }
+
+  .pagination-item {
+    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);
+    padding: 0;
+    border: none;
+    cursor: pointer;
+    background: transparent;
+    border-radius: var(--hx-border-radius-full, 9999px);
+  }
+
+  .pagination-dot {
+    display: block;
+    width: var(--hx-carousel-pagination-dot-size, 0.5rem);
+    height: var(--hx-carousel-pagination-dot-size, 0.5rem);
+    border-radius: var(--hx-border-radius-full, 9999px);
+    background: var(--hx-color-neutral-300, #d1d5db);
+    transition:
+      background-color var(--hx-transition-fast, 0.15s ease),
+      transform var(--hx-transition-fast, 0.15s ease);
+  }
+
+  .pagination-item[aria-current='true'] .pagination-dot,
+  .pagination-item.is-active .pagination-dot {
+    background: var(--hx-color-primary-600, #2563eb);
+    transform: scale(1.25);
+  }
+
+  .pagination-item:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+    border-radius: var(--hx-border-radius-full, 9999px);
+  }
+
+  /* ─── Controls row ─── */
+
+  .controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--hx-space-3, 0.75rem);
+  }
+
+  /* ─── Live Region ─── */
+
+  .live-region {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .track,
+    .nav-btn,
+    .pagination-dot,
+    .play-pause-btn {
+      transition: none;
+    }
+  }