@ethlete/components 1.0.0-next.68 → 1.0.0-next.70

package/src/lib/forms/cascader/cascader-breadcrumb-styles.component.css

@@ -0,0 +1,98 @@
+@layer components {
+  .et-cascader-panel {
+    /* the row follows the columns' width instead of contributing its own to the panel's
+       max-content measurement (a long path would otherwise stretch the panel) */
+    .et-cascader-breadcrumbs {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      box-sizing: border-box;
+      inline-size: 0;
+      min-inline-size: 100%;
+      padding: 6px;
+      border-block-start: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+      overflow: hidden;
+    }
+
+    .et-cascader-crumb {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      min-inline-size: 0;
+
+      &.et-cascader-crumb--enter {
+        animation: et-cascader-crumb-in 200ms ease;
+      }
+
+      &.et-cascader-crumb--leave {
+        animation: et-cascader-crumb-out 160ms ease forwards;
+      }
+    }
+
+    .et-cascader-breadcrumb {
+      display: block;
+      min-inline-size: 0;
+      padding: 4px 8px;
+      border: none;
+      border-radius: 6px;
+      background: transparent;
+      font: inherit;
+      font-size: 12px;
+      color: var(--et-surface-color-muted-solid, currentColor);
+      text-align: start;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      cursor: pointer;
+      appearance: none;
+      outline: none;
+      transition:
+        background 120ms ease,
+        color 120ms ease;
+
+      @media (hover: hover) {
+        &:hover {
+          background: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 12%, transparent);
+          color: var(--et-surface-color-solid, currentColor);
+        }
+      }
+
+      &:focus-visible {
+        background: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 16%, transparent);
+        color: var(--et-surface-color-solid, currentColor);
+      }
+
+      &[data-current] {
+        color: var(--et-surface-color-solid, currentColor);
+      }
+    }
+
+    .et-cascader-breadcrumb-chevron {
+      flex: none;
+      inline-size: 10px;
+      block-size: 10px;
+      color: var(--et-surface-color-subtle-solid, currentColor);
+      rotate: 90deg;
+    }
+  }
+
+  @keyframes et-cascader-crumb-in {
+    from {
+      opacity: 0;
+      transform: translateX(8px);
+    }
+  }
+
+  @keyframes et-cascader-crumb-out {
+    to {
+      opacity: 0;
+      transform: translateX(8px);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-cascader-panel .et-cascader-crumb {
+      animation: none;
+    }
+  }
+}

package/src/lib/forms/cascader/cascader-panel.component.css

@@ -0,0 +1,386 @@
+@layer components {
+  @property --et-cascader-column-inline-size {
+    syntax: '<length>';
+    /* inherits so one ancestor override reaches both the columns and the carousel viewport
+       that multiplies it (their widths must agree for the window transform to line up) */
+    inherits: true;
+    initial-value: 220px;
+  }
+
+  @property --et-cascader-panel-max-block-size {
+    syntax: '<length-percentage>';
+    inherits: false;
+    initial-value: 320px;
+  }
+
+  @property --et-cascader-node-height {
+    syntax: '<length>';
+    /* inherits so an ancestor scope (e.g. the bottom sheet) can enlarge the rows */
+    inherits: true;
+    initial-value: 36px;
+  }
+
+  .et-overlay--cascader {
+    --et-floating-panel-enter-duration: 140ms;
+    --et-floating-panel-leave-duration: 100ms;
+    --et-floating-panel-distance: 0.3rem;
+  }
+
+  .et-cascader-panel {
+    display: block;
+    box-sizing: border-box;
+    /* an anchored pane does not clip, so dropping the pane's own cap here lets columns taller than
+       the room next to the field hang out of the pane and past the viewport edge */
+    --_et-cascader-panel-max-block-size: min(
+      var(--et-cascader-panel-max-block-size),
+      var(--et-overlay-max-height, 100vh)
+    );
+    border-radius: 10px;
+    border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+    background: var(--et-surface-background-solid, rgb(32 32 32));
+    color: var(--et-surface-color-solid, rgb(244 244 245));
+    font-size: 14px;
+    box-shadow: var(--et-anchored-panel-shadow, 0 10px 24px rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.16));
+    overflow: hidden;
+
+    &.et-cascader-panel--resizing {
+      overflow: clip;
+    }
+
+    /* the body is content-sized so the width animation can measure the natural target width — a
+       plain block child would just mirror the host's animated width back into the ResizeObserver
+       (feedback loop) */
+    &:not([data-sheet]) > .et-cascader-panel-body {
+      inline-size: max-content;
+    }
+
+    .et-cascader-columns {
+      display: flex;
+      max-block-size: var(--_et-cascader-panel-max-block-size);
+
+      /* `clip`, not `hidden` — a focused node's scrollIntoView must never desync the track
+         transform below with a stray programmatic scrollLeft */
+      &:not([data-sheet]) {
+        display: block;
+        inline-size: calc(var(--_et-cascader-visible-columns, 1) * var(--et-cascader-column-inline-size));
+        overflow: clip;
+
+        /* the carousel math multiplies the token, so it must be the full outer width */
+        .et-cascader-column {
+          box-sizing: border-box;
+        }
+
+        /* a column outside the window stays mounted (it has to slide, not pop) but must
+           not contribute its height to the panel */
+        .et-cascader-column--offstage {
+          contain: size;
+        }
+      }
+
+      &[data-sheet] {
+        display: block;
+        flex: 1;
+        min-block-size: 0;
+        max-block-size: none;
+        overflow-y: auto;
+        overflow-x: clip;
+        overscroll-behavior: contain;
+
+        /* the column area, not the column, is the scrollport here - the wrapper has to pass the
+           full body height through, or the column's own 100% resolves against nothing */
+        .et-cascader-column-wrapper {
+          block-size: 100%;
+        }
+
+        .et-cascader-column {
+          inline-size: 100%;
+          block-size: 100%;
+          max-block-size: none;
+          overflow: visible;
+          border-inline-end: none;
+        }
+
+        .et-cascader-column:has(.et-cascader-state) {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+
+    .et-cascader-columns-track {
+      display: flex;
+      max-block-size: inherit;
+      transform: translateX(
+        calc(var(--_et-cascader-column-window-start, 0) * -1 * var(--et-cascader-column-inline-size))
+      );
+      transition: transform 240ms ease;
+    }
+
+    .et-cascader-search {
+      padding: 6px;
+      border-block-end: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+
+      input[etcascadersearch] {
+        inline-size: 100%;
+        block-size: 36px;
+        box-sizing: border-box;
+        padding-inline: 10px;
+        border-radius: 6px;
+        border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+        background: color-mix(in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 6%, transparent);
+        color: inherit;
+        font: inherit;
+        outline: none;
+        caret-color: var(--et-theme-color-primary-solid, currentColor);
+        transition:
+          border-color 120ms ease,
+          background 120ms ease;
+
+        &:focus-visible {
+          border-color: var(--et-theme-color-primary-solid, rgb(255 255 255 / 0.3));
+        }
+
+        &::placeholder {
+          color: var(--et-surface-color-muted-solid, rgb(255 255 255 / 0.55));
+        }
+      }
+    }
+
+    .et-cascader-results-wrapper {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .et-cascader-results {
+      display: block;
+      box-sizing: border-box;
+      inline-size: min(320px, calc(100vw - 24px));
+      max-block-size: var(--_et-cascader-panel-max-block-size);
+      overflow-y: auto;
+      overflow-x: clip;
+      overscroll-behavior: contain;
+      padding: 6px;
+    }
+
+    .et-cascader-column-wrapper {
+      position: relative;
+      flex: none;
+    }
+
+    .et-cascader-column {
+      display: block;
+      flex: none;
+      inline-size: var(--et-cascader-column-inline-size);
+      max-block-size: var(--_et-cascader-panel-max-block-size);
+      overflow-y: auto;
+      /* clip the X axis so the slide-in transform never spawns a horizontal scrollbar
+         (overflow-y: auto would otherwise compute overflow-x to auto) */
+      overflow-x: clip;
+      overscroll-behavior: contain;
+      padding: 6px;
+    }
+
+    .et-cascader-column-wrapper:not(:last-child) .et-cascader-column {
+      border-inline-end: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+    }
+
+    .et-cascader-columns[data-sheet] .et-cascader-column {
+      &:where([data-nav='forward']) {
+        animation: et-cascader-column-in-forward 200ms ease;
+      }
+
+      &:where([data-nav='backward']) {
+        animation: et-cascader-column-in-backward 200ms ease;
+      }
+    }
+
+    .et-cascader-columns:not([data-sheet]) .et-cascader-column:where([data-nav='forward']) {
+      animation: et-cascader-column-grow-in 180ms ease;
+    }
+
+    /* the column scrolls and clips, so the default 3px outward ring would be cut off on a node
+       scrolled to its edge */
+    .et-cascader-node,
+    .et-cascader-search-option {
+      --_et-focus-ring-offset: -2px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      inline-size: 100%;
+      min-block-size: var(--et-cascader-node-height);
+      padding-inline: 10px;
+      border: none;
+      border-radius: 6px;
+      background: transparent;
+      font: inherit;
+      text-align: start;
+      color: inherit;
+      cursor: pointer;
+      appearance: none;
+      transition: background 120ms ease;
+
+      @media (hover: hover) {
+        &:hover {
+          background: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 12%, transparent);
+        }
+      }
+
+      &:focus-visible,
+      &[data-focused] {
+        background: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 16%, transparent);
+      }
+
+      &[data-expanded] {
+        background: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 12%, transparent);
+      }
+
+      &[data-selected] {
+        color: var(--et-theme-color-ink-solid, currentColor);
+        font-weight: 500;
+      }
+
+      &[data-disabled] {
+        cursor: default;
+        opacity: 0.4;
+      }
+    }
+
+    .et-cascader-node-label,
+    .et-cascader-search-option-label {
+      flex: 1;
+      min-inline-size: 0;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .et-cascader-search-option-ancestor {
+      color: var(--et-surface-color-muted-solid, currentColor);
+    }
+
+    .et-cascader-check {
+      position: relative;
+      flex: none;
+      inline-size: 16px;
+      block-size: 16px;
+      box-sizing: border-box;
+      border: 2px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.3));
+      border-radius: 4px;
+      transition:
+        background 120ms ease,
+        border-color 120ms ease;
+
+      &::after {
+        content: '';
+        position: absolute;
+        opacity: 0;
+      }
+    }
+
+    [data-selected] > .et-cascader-check,
+    [data-indeterminate] > .et-cascader-check {
+      border-color: var(--et-theme-color-primary-solid, currentColor);
+      background: var(--et-theme-color-primary-solid, currentColor);
+    }
+
+    [data-selected] > .et-cascader-check::after {
+      inset-inline-start: 4px;
+      inset-block-start: 1px;
+      inline-size: 4px;
+      block-size: 8px;
+      border: solid var(--et-theme-color-on-primary, rgb(0 0 0));
+      border-width: 0 2px 2px 0;
+      rotate: 45deg;
+      opacity: 1;
+    }
+
+    [data-indeterminate] > .et-cascader-check::after {
+      inset-inline-start: 2px;
+      inset-block-start: 5px;
+      inline-size: 8px;
+      block-size: 2px;
+      background: var(--et-theme-color-on-primary, rgb(0 0 0));
+      opacity: 1;
+    }
+
+    .et-cascader-node-chevron {
+      flex: none;
+      inline-size: 12px;
+      block-size: 12px;
+      color: var(--et-surface-color-muted-solid, currentColor);
+      rotate: 90deg;
+    }
+
+    .et-cascader-state {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      min-block-size: var(--et-cascader-node-height);
+      padding: 12px 16px;
+      text-align: center;
+      color: var(--et-surface-color-muted-solid, currentColor);
+
+      &.et-cascader-state--error {
+        flex-direction: column;
+        gap: 8px;
+        font-size: 12px;
+      }
+    }
+
+    .et-cascader-state-content {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      opacity: 0;
+      transition: opacity 120ms ease;
+
+      &.et-cascader-state-content--visible {
+        opacity: 1;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .et-cascader-state-content {
+        transition: none;
+      }
+    }
+
+    .et-cascader-state-error-message {
+      color: var(--et-theme-color-ink-solid, rgb(248 113 113));
+    }
+  }
+
+  @keyframes et-cascader-column-in-forward {
+    from {
+      opacity: 0;
+      transform: translateX(14px);
+    }
+  }
+
+  @keyframes et-cascader-column-in-backward {
+    from {
+      opacity: 0;
+      transform: translateX(-14px);
+    }
+  }
+
+  @keyframes et-cascader-column-grow-in {
+    from {
+      opacity: 0;
+      transform: translateX(-10px);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-cascader-panel .et-cascader-column {
+      animation: none;
+    }
+
+    .et-cascader-panel .et-cascader-columns-track {
+      transition: none;
+    }
+  }
+}

package/src/lib/forms/cascader/cascader-sheet-styles.component.css

@@ -0,0 +1,241 @@
+@layer components {
+  .et-overlay.et-cascader-sheet {
+    --et-cascader-node-height: 52px;
+
+    border-radius: 16px 16px 0 0;
+
+    /* the panel draws the handle itself (below), so the container's own must go. Matching
+       `.et-overlay--bottom-sheet` too is what makes it win: the rule that shows the handle is
+       `.et-overlay.et-overlay--bottom-sheet .et-overlay-container-drag-handle`, identical in
+       specificity to this selector without it, so the tie went to source order - and this sheet is
+       unloaded with its last instance when the cascader closes, then re-appended on the next open.
+       That re-append put it after the overlay's rule the first time and before it every time after,
+       which is why a reopened sheet showed two handles. */
+    &.et-overlay--bottom-sheet .et-overlay-container-drag-handle {
+      display: none;
+    }
+
+    .et-cascader-node,
+    .et-cascader-search-option {
+      font-size: 16px;
+      padding-inline: 14px;
+    }
+
+    .et-cascader-search {
+      padding-inline: 20px;
+    }
+
+    /* 16px also keeps iOS Safari from zooming into the focused input */
+    .et-cascader-search input[etcascadersearch] {
+      block-size: 44px;
+      font-size: 16px;
+    }
+
+    .et-cascader-node-chevron {
+      inline-size: 14px;
+      block-size: 14px;
+    }
+
+    .et-cascader-panel {
+      max-inline-size: none;
+      border: none;
+      border-radius: 0;
+      box-shadow: none;
+      padding-block-end: max(8px, env(safe-area-inset-bottom));
+
+      &::before {
+        content: '';
+        display: block;
+        inline-size: 32px;
+        block-size: 4px;
+        margin-inline: auto;
+        margin-block: 8px 4px;
+        border-radius: 999px;
+        background: var(--et-surface-border-solid, rgb(255 255 255 / 0.2));
+      }
+    }
+  }
+
+  .et-cascader-panel {
+    .et-cascader-sheet-header {
+      position: relative;
+      display: flex;
+      align-items: center;
+      flex: none;
+      box-sizing: border-box;
+      block-size: var(--et-cascader-node-height);
+      padding-block: 4px;
+      /* column padding (6px) + node padding-inline (14px) = the option label inset */
+      padding-inline: 20px;
+      border-block-end: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+    }
+
+    .et-cascader-back {
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: 20px;
+      display: inline-flex;
+      align-items: center;
+      transition:
+        opacity 180ms ease,
+        transform 180ms ease;
+
+      &.et-cascader-back--hidden {
+        opacity: 0;
+        transform: translateX(-6px);
+        pointer-events: none;
+      }
+    }
+
+    .et-cascader-back-icon {
+      rotate: -90deg;
+    }
+
+    .et-cascader-sheet-title-slot {
+      position: relative;
+      flex: 1;
+      min-inline-size: 0;
+      align-self: stretch;
+      overflow: hidden;
+      /* the slot spans the full width and paints over the absolute Back button; the title is
+         display-only, so let clicks pass through to Back underneath */
+      pointer-events: none;
+    }
+
+    /* the title shifts right to clear Back via transform (transitions reliably, unlike a flex
+       width change which jumps); at the root it sits flush-left, aligned with the option labels */
+    .et-cascader-sheet-title-shift {
+      position: absolute;
+      inset: 0;
+      transform: translateX(0);
+      transition: transform 180ms ease;
+    }
+
+    .et-cascader-sheet-header[data-back] .et-cascader-sheet-title-shift {
+      /* em (font-relative), not rem — the app root font can be tiny (10px here) */
+      transform: translateX(var(--et-cascader-back-slot, 4em));
+    }
+
+    .et-cascader-sheet-title {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-weight: 600;
+      color: var(--et-surface-color-solid, currentColor);
+    }
+
+    /* Direction comes from the persistent slot, so the leaving title (kept mounted by
+       animate.leave, still a child of the slot) reads the current travel direction too. */
+    .et-cascader-sheet-title-slot[data-anim='slide'][data-nav='forward'] .et-cascader-sheet-title--enter {
+      animation: et-cascader-title-enter-forward 200ms ease;
+    }
+
+    .et-cascader-sheet-title-slot[data-anim='slide'][data-nav='backward'] .et-cascader-sheet-title--enter {
+      animation: et-cascader-title-enter-backward 200ms ease;
+    }
+
+    .et-cascader-sheet-title-slot[data-anim='slide'][data-nav='forward'] .et-cascader-sheet-title--leave {
+      animation: et-cascader-title-leave-forward 180ms ease forwards;
+    }
+
+    .et-cascader-sheet-title-slot[data-anim='slide'][data-nav='backward'] .et-cascader-sheet-title--leave {
+      animation: et-cascader-title-leave-backward 180ms ease forwards;
+    }
+
+    .et-cascader-sheet-title-slot[data-anim='fade'] .et-cascader-sheet-title--enter {
+      animation: et-cascader-title-fade-in 180ms ease;
+    }
+
+    .et-cascader-sheet-title-slot[data-anim='fade'] .et-cascader-sheet-title--leave {
+      animation: et-cascader-title-fade-out 180ms ease forwards;
+    }
+
+    /* fixed-height sheet body: header + column area share it, so toggling the Back bar
+       redistributes space instead of resizing the panel */
+    .et-cascader-sheet-body {
+      display: flex;
+      flex-direction: column;
+      block-size: min(60vh, 480px);
+    }
+
+    .et-cascader-sheet-body .et-cascader-results-wrapper,
+    .et-cascader-sheet-columns-wrapper {
+      position: relative;
+      flex: 1;
+      min-block-size: 0;
+    }
+
+    .et-cascader-sheet-columns-wrapper {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .et-cascader-sheet-body .et-cascader-results {
+      flex: 1;
+      min-block-size: 0;
+      inline-size: 100%;
+      max-block-size: none;
+    }
+
+    /* a drilled sheet column does not scroll - the column area around it does - but its content
+       still overflows the fixed body, so its own scrollbar would read that as scrollable */
+    .et-cascader-columns[data-sheet] .et-cascader-column-wrapper > .et-scrollbar {
+      display: none;
+    }
+  }
+
+  @keyframes et-cascader-title-enter-forward {
+    from {
+      opacity: 0;
+      transform: translateX(12px);
+    }
+  }
+
+  @keyframes et-cascader-title-enter-backward {
+    from {
+      opacity: 0;
+      transform: translateX(-12px);
+    }
+  }
+
+  @keyframes et-cascader-title-leave-forward {
+    to {
+      opacity: 0;
+      transform: translateX(-12px);
+    }
+  }
+
+  @keyframes et-cascader-title-leave-backward {
+    to {
+      opacity: 0;
+      transform: translateX(12px);
+    }
+  }
+
+  @keyframes et-cascader-title-fade-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes et-cascader-title-fade-out {
+    to {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-cascader-panel .et-cascader-sheet-title {
+      animation: none;
+    }
+
+    .et-cascader-panel .et-cascader-back,
+    .et-cascader-panel .et-cascader-sheet-title-shift {
+      transition: none;
+    }
+  }
+}