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

package/src/lib/forms/select/select-extras-styles.component.css

@@ -0,0 +1,143 @@
+@layer components {
+  .et-select-panel {
+    .et-select-busy-bar {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline: 0;
+      block-size: 2px;
+      overflow: hidden;
+      background: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 10%, transparent);
+    }
+
+    .et-select-busy-bar::after {
+      content: '';
+      display: block;
+      inline-size: 40%;
+      block-size: 100%;
+      border-radius: 999px;
+      background: var(--et-theme-color-primary-solid, currentColor);
+      animation: et-select-busy-sweep 1.1s ease-in-out infinite;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .et-select-busy-bar::after {
+        inline-size: 100%;
+        animation: none;
+      }
+    }
+
+    .et-select-state {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      min-block-size: var(--et-select-option-height, 36px);
+      padding-inline: var(--et-select-option-padding-inline, 10px);
+      font-size: var(--et-select-option-font-size, 14px);
+      color: var(--et-surface-color-muted-solid, currentColor);
+
+      &.et-select-state--error {
+        font-size: 12px;
+        /* the element carries the error color theme via etProvideColor */
+        color: var(--et-theme-color-ink-solid, rgb(248 113 113));
+      }
+    }
+
+    .et-select-state-content {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      opacity: 0;
+      transition: opacity 120ms ease;
+
+      &.et-select-state-content--visible {
+        opacity: 1;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .et-select-state-content {
+        transition: none;
+      }
+    }
+
+    .et-select-load-more,
+    .et-select-add-new {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: var(--et-select-option-gap, 8px);
+      inline-size: 100%;
+      min-block-size: var(--et-select-option-height, 36px);
+      margin-block-start: 7px;
+      padding-inline: var(--et-select-option-padding-inline, 10px);
+      border: none;
+      border-radius: var(--et-select-option-border-radius, 6px);
+      background: transparent;
+      font: inherit;
+      font-size: var(--et-select-option-font-size, 14px);
+      text-align: start;
+      color: var(--et-theme-color-ink-solid, currentColor);
+      cursor: pointer;
+      appearance: none;
+      transition: background 120ms ease;
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset-inline: calc(var(--et-select-panel-padding, 6px) * -1);
+        inset-block-start: -4px;
+        block-size: 1px;
+        background: var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+      }
+
+      @media (hover: hover) {
+        &:not(:disabled):hover {
+          background: color-mix(in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 12%, transparent);
+        }
+      }
+
+      &:not(:disabled):active {
+        background: color-mix(in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 20%, transparent);
+      }
+
+      &:disabled {
+        color: var(--et-surface-color-muted-solid, currentColor);
+        cursor: default;
+      }
+
+      &.et-select-load-more--loading {
+        color: var(--et-surface-color-muted-solid, currentColor);
+        cursor: default;
+        pointer-events: none;
+      }
+
+      .et-icon {
+        flex: none;
+        inline-size: 16px;
+        block-size: 16px;
+      }
+    }
+
+    .et-select-load-more + .et-select-add-new {
+      margin-block-start: 2px;
+
+      &::before {
+        content: none;
+      }
+    }
+
+    .et-select-load-more-icon {
+      rotate: 180deg;
+    }
+  }
+
+  @keyframes et-select-busy-sweep {
+    from {
+      transform: translateX(-100%);
+    }
+
+    to {
+      transform: translateX(250%);
+    }
+  }
+}

package/src/lib/forms/select/select-option-group.component.css

@@ -0,0 +1,35 @@
+@layer components {
+  @property --et-select-option-group-label-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  et-select-option-group {
+    display: block;
+
+    &[data-hidden] {
+      display: none;
+    }
+
+    /* separate groups with a hairline above all but the first *visible* one — search
+       filtering hides groups via [data-hidden], and a hidden group must neither draw a
+       divider nor count as the preceding sibling (hence ~ instead of +) */
+    &:where(:not([data-hidden])) ~ &:where(:not([data-hidden])) .et-select-option-group-label {
+      margin-block-start: 4px;
+      padding-block-start: 8px;
+      border-block-start: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+    }
+
+    .et-select-option-group-label {
+      padding: 6px 10px 2px;
+      font-size: var(--et-select-option-group-label-font-size);
+      font-weight: 600;
+      letter-spacing: 0.02em;
+      text-transform: uppercase;
+      color: var(--et-surface-color-muted-solid, currentColor);
+      -webkit-user-select: none;
+      user-select: none;
+    }
+  }
+}

package/src/lib/forms/select/select-option-styles.component.css

@@ -0,0 +1,137 @@
+@layer components {
+  @property --et-select-option-height {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 36px;
+  }
+
+  @property --et-select-option-padding-inline {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 10px;
+  }
+
+  @property --et-select-option-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  @property --et-select-option-border-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 6px;
+  }
+
+  @property --et-select-option-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  @property --et-select-option-check-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  .et-select-option {
+    &[data-filtered] {
+      display: none;
+    }
+
+    display: flex;
+    align-items: center;
+    gap: var(--et-select-option-gap);
+    min-block-size: var(--et-select-option-height);
+    padding-inline: var(--et-select-option-padding-inline);
+    border-radius: var(--et-select-option-border-radius);
+    font-size: var(--et-select-option-font-size);
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    /* The intrinsic size must stay 0: it sizes the content box, so a row height here stacks on
+       top of a consumer's padding and the panel opens too tall. */
+    content-visibility: auto;
+    contain-intrinsic-block-size: auto 0;
+    transition:
+      background 120ms ease,
+      color 120ms ease,
+      opacity 120ms ease;
+
+    &:where([data-active][data-active-source='keyboard']) {
+      background: color-mix(in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 12%, transparent);
+    }
+
+    @media (hover: hover) {
+      &:where([data-active]:hover) {
+        background: color-mix(in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 12%, transparent);
+      }
+    }
+
+    &:active {
+      background: color-mix(in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 20%, transparent);
+    }
+
+    &:where([aria-disabled='true']) {
+      opacity: 0.4;
+      cursor: not-allowed;
+
+      &:active {
+        background: transparent;
+      }
+    }
+
+    .et-select-option-check {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: none;
+      inline-size: var(--et-select-option-check-size);
+      block-size: var(--et-select-option-check-size);
+      color: var(--et-theme-color-primary-solid, currentColor);
+      /* hidden via opacity, NOT visibility — an explicit `visibility: visible` would punch
+         through the pane's positioning phase (`visibility: hidden`) and paint the check
+         before the panel itself becomes visible */
+      opacity: 0;
+
+      .et-icon {
+        inline-size: 100%;
+        block-size: 100%;
+      }
+    }
+
+    &:where([data-selected]) .et-select-option-check {
+      opacity: 1;
+    }
+
+    .et-select-option-label {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-inline-size: 0;
+    }
+
+    &.et-select-create-option {
+      color: var(--et-theme-color-ink-solid, currentColor);
+
+      .et-select-option-check {
+        display: none;
+      }
+
+      .et-select-option-label {
+        display: flex;
+        align-items: center;
+        gap: var(--et-select-option-gap);
+      }
+
+      .et-select-create-option-icon {
+        flex: none;
+        inline-size: var(--et-select-option-check-size);
+        block-size: var(--et-select-option-check-size);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,112 @@
+@layer components {
+  @property --et-select-panel-max-height {
+    syntax: '<length-percentage>';
+    inherits: true;
+    initial-value: 40vh;
+  }
+
+  @property --et-select-panel-padding {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 6px;
+  }
+
+  .et-overlay--select {
+    --et-floating-panel-enter-duration: 140ms;
+    --et-floating-panel-leave-duration: 100ms;
+    --et-floating-panel-distance: 0.3rem;
+  }
+
+  .et-select-panel {
+    /* the containing block for the busy bar, which is rendered inside the scroller but must stay
+       pinned to the panel's top edge while the options scroll under it */
+    position: relative;
+    display: grid;
+    grid-template-rows: minmax(0, 1fr);
+    /* while resizing, the scroller's `overflow: clip` is no scroll container, so an `auto` track
+       would grow to a long option's min-content and push the panel out of the field-wide pane */
+    grid-template-columns: minmax(0, 1fr);
+    box-sizing: border-box;
+    /* an anchored pane does not clip, so dropping the pane's own cap here lets a panel taller than
+       the room next to the field hang out of the pane and past the viewport edge */
+    max-block-size: min(var(--et-select-panel-max-height), var(--et-overlay-max-height, 100vh));
+    /* the host paints the chrome and clips; scrolling lives on the inner scroller — a
+       scroller's own background is dragged along by macOS rubber-band overscroll (it is
+       painted into the scrolling contents layer), which would expose the page behind the
+       panel while the border stays put */
+    overflow: hidden;
+    /* re-published as an inheriting alias: the registered token is `inherits: false`, so the
+       scroller below could not read a value a consumer sets on the panel element */
+    --_et-select-panel-padding: var(--et-select-panel-padding);
+
+    .et-select-panel-scroller {
+      box-sizing: border-box;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      padding: var(--_et-select-panel-padding);
+    }
+
+    &.et-select-panel--resizing .et-select-panel-scroller {
+      overflow: clip;
+    }
+    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));
+    /* base font size for panel content beyond the options themselves (custom search inputs
+       etc.) — the detached pane would otherwise inherit the root font size (10px here) */
+    font-size: var(--et-select-option-font-size, 14px);
+    box-shadow: var(--et-anchored-panel-shadow, 0 10px 24px rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.16));
+
+    /* the listbox wraps only the options, and the extras wrapper only the state/action rows —
+       both are structural (ARIA grouping); `display: contents` keeps every child in the panel's
+       own flow, so the layout is identical to when they were flat panel children */
+    .et-select-listbox,
+    .et-select-panel-extras {
+      display: contents;
+    }
+  }
+
+  /* compact triggers (`mirrorPanelWidth={false}`): the pane is content-sized rather than pinned
+     to the field width, so the panel needs an upper bound to stop a long option from stretching
+     it across the viewport. When the panel *does* mirror the field, the pane width already sizes
+     it and no cap must apply — otherwise fields wider than 400px stop matching the panel. */
+  .et-overlay--select-content-width .et-select-panel {
+    max-inline-size: min(400px, calc(100vw - 24px));
+  }
+
+  .et-select-panel-search {
+    position: sticky;
+    inset-block-start: calc(var(--et-select-panel-padding, 6px) * -1);
+    margin-block-start: calc(var(--et-select-panel-padding, 6px) * -1);
+    margin-inline: calc(var(--et-select-panel-padding, 6px) * -1);
+    padding: var(--et-select-panel-padding, 6px);
+    background: var(--et-surface-background-solid, rgb(32 32 32));
+    z-index: 1;
+
+    input[etselectsearch] {
+      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));
+      }
+    }
+  }
+}

package/src/lib/forms/select/select.component.css

@@ -0,0 +1,180 @@
+@layer components {
+  et-select {
+    --_et-select-trigger-busy-fade: 24px;
+    --_et-select-trigger-busy-cover: 16px;
+    --_et-select-trigger-busy-mask-direction: to right;
+
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex: 1;
+    min-inline-size: 0;
+    color: inherit;
+
+    .et-select-trigger {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex: 1;
+      outline: none;
+      color: inherit;
+      min-inline-size: 0;
+      text-align: start;
+      cursor: pointer;
+      -webkit-user-select: none;
+      user-select: none;
+      touch-action: manipulation;
+
+      &[data-disabled] {
+        cursor: not-allowed;
+      }
+
+      &[data-readonly] {
+        cursor: default;
+      }
+
+      .et-select-trigger-content {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 6px;
+        flex: 1;
+        min-inline-size: 0;
+
+        &.et-select-trigger-content--stacked {
+          display: grid;
+          grid-template-columns: minmax(0, 1fr);
+
+          > * {
+            grid-area: 1 / 1;
+          }
+
+          &:has(.et-select-value-custom) input[etselectsearch] {
+            caret-color: transparent;
+          }
+        }
+      }
+
+      input[etselectsearch] {
+        flex: 1 1 60px;
+        min-inline-size: 60px;
+        border: none;
+        outline: none;
+        background: transparent;
+        font: inherit;
+        color: inherit;
+        padding: 0;
+        caret-color: var(--et-theme-color-primary-solid, currentColor);
+        cursor: text;
+
+        &::placeholder {
+          color: var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 46%, transparent));
+        }
+
+        /* Before the disabled rule: a disabled input is :read-only too, and there
+           not-allowed must win. */
+        &:read-only {
+          cursor: default;
+          caret-color: transparent;
+        }
+
+        &:disabled {
+          cursor: not-allowed;
+        }
+      }
+
+      &:has(input[etselectsearch]) .et-select-value {
+        flex: 0 1 auto;
+      }
+    }
+
+    .et-select-value {
+      flex: 1;
+      min-block-size: 1lh;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-inline-size: 0;
+
+      &[data-placeholder] {
+        color: var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 46%, transparent));
+      }
+    }
+
+    &[data-mixed] .et-select-value,
+    &[data-mixed] input[etselectsearch]:not(:focus) {
+      font-style: italic;
+      color: color-mix(in srgb, currentColor 72%, transparent);
+    }
+
+    .et-select-value-custom {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-inline-size: 0;
+    }
+
+    .et-select-trigger-content:has(input[etselectsearch]) .et-select-value-custom {
+      flex: 0 1 auto;
+    }
+
+    .et-select-trigger-content:has(.et-select-value-custom) input[etselectsearch]::placeholder {
+      color: transparent;
+    }
+
+    .et-select-chips {
+      display: contents;
+    }
+
+    .et-select-trigger-busy {
+      position: relative;
+      display: flex;
+      align-items: center;
+      align-self: stretch;
+      flex: none;
+      padding-inline-start: var(--_et-select-trigger-busy-fade);
+      margin-inline-start: calc(
+        -1 * (var(--_et-select-trigger-busy-fade) + var(--_et-select-trigger-busy-cover) + 6px)
+      );
+      color: var(--et-surface-color-muted-solid, currentColor);
+    }
+
+    &:dir(rtl) {
+      --_et-select-trigger-busy-mask-direction: to left;
+    }
+
+    .et-select-trigger:has(> .et-select-trigger-busy) .et-select-trigger-content {
+      mask-image: linear-gradient(
+        var(--_et-select-trigger-busy-mask-direction),
+        black calc(100% - var(--_et-select-trigger-busy-cover) - var(--_et-select-trigger-busy-fade)),
+        transparent calc(100% - var(--_et-select-trigger-busy-cover))
+      );
+    }
+
+    .et-select-trigger-busy--enter {
+      animation: et-select-busy-in 120ms ease;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .et-select-trigger-busy--enter {
+        animation: none;
+      }
+    }
+  }
+
+  .et-form-field-control-frame:has(et-select) {
+    cursor: pointer;
+  }
+
+  /* outside the `et-select` block on purpose: the chevron renders in the form field's suffix slot,
+     which is not a descendant of the host. */
+  .et-select-arrow .et-icon {
+    rotate: 180deg;
+  }
+
+  @keyframes et-select-busy-in {
+    from {
+      opacity: 0;
+    }
+  }
+}