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

package/src/lib/menu/menu-item.component.css

@@ -0,0 +1,32 @@
+@layer components {
+  .et-menu-item {
+    .et-menu-item-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: none;
+
+      &:not(:has(*)) {
+        display: none;
+      }
+
+      svg {
+        inline-size: var(--et-menu-item-icon-size);
+        block-size: var(--et-menu-item-icon-size);
+      }
+    }
+
+    /* `.et-menu-item-content` is shared with the selection items, so its layout lives in
+       `menu.component.css` — see the note there. */
+
+    .et-menu-item-trailing {
+      display: inline-flex;
+      align-items: center;
+      flex: none;
+
+      &:not(:has(*)) {
+        display: none;
+      }
+    }
+  }
+}

package/src/lib/menu/menu-search-styles.component.css

@@ -0,0 +1,56 @@
+@layer components {
+  @property --et-menu-search-height {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 36px;
+  }
+
+  .et-menu .et-menu-header {
+    .et-menu-search-field {
+      position: relative;
+
+      &:has(.et-menu-search-spinner) input[etmenusearch] {
+        padding-inline-end: calc(var(--et-menu-item-padding-inline) + 22px);
+      }
+    }
+
+    .et-menu-search-spinner {
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-end: 10px;
+      translate: 0 -50%;
+      color: var(--_et-menu-muted-color);
+    }
+
+    .et-menu-search-error {
+      margin: 6px 2px 0;
+      font-size: 12px;
+      /* the element carries the error color theme via etProvideColor */
+      color: var(--et-theme-color-ink-solid, rgb(248 113 113));
+    }
+
+    input[etmenusearch] {
+      inline-size: 100%;
+      block-size: var(--et-menu-search-height);
+      padding-inline: var(--et-menu-item-padding-inline);
+      border-radius: var(--et-menu-item-border-radius);
+      border: 1px solid var(--_et-menu-border);
+      background: color-mix(in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 6%, transparent);
+      color: inherit;
+      font: inherit;
+      outline: none;
+      box-sizing: border-box;
+      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-menu-muted-color);
+      }
+    }
+  }
+}

package/src/lib/menu/menu-selection-item.component.css

@@ -0,0 +1,88 @@
+@layer components {
+  .et-menu-selection-item {
+    cursor: pointer;
+
+    .et-menu-item-check {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: none;
+      inline-size: var(--et-menu-item-icon-size, 16px);
+      block-size: var(--et-menu-item-icon-size, 16px);
+      color: var(--et-theme-color-primary-solid, currentColor);
+    }
+
+    &.et-menu-radio-item .et-menu-item-check::before {
+      content: '';
+      inline-size: 6px;
+      block-size: 6px;
+      border-radius: 50%;
+      background: currentColor;
+      opacity: 0;
+      transform: scale(0.5);
+      transition:
+        opacity 120ms ease,
+        transform 120ms ease;
+    }
+
+    &.et-menu-radio-item[aria-checked='true'] .et-menu-item-check::before {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    &.et-menu-checkbox-item .et-menu-item-check::before {
+      content: '';
+      inline-size: 9px;
+      block-size: 5px;
+      border-inline-start: 2px solid currentColor;
+      border-block-end: 2px solid currentColor;
+      transform: rotate(-45deg) translateY(-1px) scale(0.5);
+      opacity: 0;
+      transition:
+        opacity 120ms ease,
+        transform 120ms ease;
+    }
+
+    &.et-menu-checkbox-item[aria-checked='true'] .et-menu-item-check::before {
+      opacity: 1;
+      transform: rotate(-45deg) translateY(-1px) scale(1);
+    }
+
+    &.et-menu-checkbox-item[aria-checked='mixed'] .et-menu-item-check::before {
+      inline-size: 9px;
+      block-size: 0;
+      border-inline-start: none;
+      border-block-end: 2px solid currentColor;
+      transform: none;
+      opacity: 1;
+    }
+
+    &.et-menu-selection-item--has-icon {
+      .et-menu-item-check {
+        color: currentColor;
+        transition: color 120ms ease;
+      }
+
+      .et-menu-item-check::before {
+        content: none;
+      }
+
+      .et-menu-item-check i {
+        inline-size: 100%;
+        block-size: 100%;
+      }
+
+      &[aria-checked='true'] .et-menu-item-check,
+      &[aria-checked='mixed'] .et-menu-item-check {
+        color: var(--et-theme-color-primary-solid, currentColor);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .et-menu-item-check::before {
+        transition: opacity 120ms ease;
+      }
+    }
+  }
+}

package/src/lib/menu/menu-separator.component.css

@@ -0,0 +1,9 @@
+@layer components {
+  .et-menu-separator {
+    display: block;
+    block-size: 1px;
+    margin-block: var(--et-menu-separator-margin-block, 6px);
+    margin-inline: calc(var(--et-menu-item-padding-inline, 10px) * -0.5);
+    background: var(--_et-menu-separator-color, var(--et-surface-border-solid, rgb(255 255 255 / 0.1)));
+  }
+}

package/src/lib/menu/menu.component.css

@@ -0,0 +1,296 @@
+@layer components {
+  @property --et-menu-min-width {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 180px;
+  }
+
+  @property --et-menu-max-height {
+    syntax: '<length-percentage>';
+    inherits: false;
+    initial-value: 40vh;
+  }
+
+  @property --et-menu-padding-block {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 6px;
+  }
+
+  @property --et-menu-padding-inline {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 6px;
+  }
+
+  @property --et-menu-item-height {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 36px;
+  }
+
+  @property --et-menu-item-padding-inline {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 10px;
+  }
+
+  @property --et-menu-item-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 10px;
+  }
+
+  @property --et-menu-item-border-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 6px;
+  }
+
+  @property --et-menu-item-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  @property --et-menu-item-icon-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  @property --et-menu-item-submenu-icon-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-menu-separator-margin-block {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 6px;
+  }
+
+  @property --et-menu-group-label-font-size {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 12px;
+  }
+
+  @property --et-menu-scroll-fade-size {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 12px;
+  }
+
+  @property --_et-menu-fade-start {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0px;
+  }
+
+  @property --_et-menu-fade-end {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0px;
+  }
+
+  @keyframes et-menu-scroll-fade-start {
+    to {
+      --_et-menu-fade-start: var(--et-menu-scroll-fade-size);
+    }
+  }
+
+  @keyframes et-menu-scroll-fade-end {
+    from {
+      --_et-menu-fade-end: var(--et-menu-scroll-fade-size);
+    }
+
+    to {
+      --_et-menu-fade-end: 0px;
+    }
+  }
+
+  .et-overlay.et-overlay--menu {
+    overflow: visible;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .et-menu {
+    --_et-menu-background: var(--et-surface-background-solid, rgb(32 32 32));
+    --_et-menu-color: var(--et-surface-color-solid, rgb(244 244 245));
+    --_et-menu-border: var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+    --_et-menu-shadow: var(--et-anchored-panel-shadow, 0 10px 24px rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.16));
+    --_et-menu-radius: 10px;
+    --_et-menu-item-active-background: color-mix(
+      in srgb,
+      var(--et-surface-interaction-solid, rgb(255 255 255)) 12%,
+      transparent
+    );
+    --_et-menu-item-pressed-background: color-mix(
+      in srgb,
+      var(--et-surface-interaction-solid, rgb(255 255 255)) 20%,
+      transparent
+    );
+    --_et-menu-muted-color: var(--et-surface-color-muted-solid, rgb(255 255 255 / 0.55));
+    --_et-menu-separator-color: var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+
+    display: flex;
+    flex-direction: column;
+    min-inline-size: var(--et-menu-min-width);
+    max-inline-size: min(320px, calc(100vw - 24px));
+    /* an anchored pane does not clip, so dropping the pane's own cap here lets a menu taller than
+       the room next to the trigger hang out of the pane and past the viewport edge */
+    max-block-size: min(var(--et-menu-max-height), var(--et-overlay-max-height, 100vh));
+    border-radius: var(--_et-menu-radius);
+    border: 1px solid var(--_et-menu-border);
+    background: var(--_et-menu-background);
+    color: var(--_et-menu-color);
+    font-family: var(--et-font-family, inherit);
+    font-size: var(--et-menu-item-font-size);
+    box-shadow: var(--_et-menu-shadow);
+    outline: none;
+
+    /* applied while the block size animates after a content change (e.g. search filtering),
+     so content outside the animated size stays hidden */
+    &.et-menu--resizing {
+      overflow: clip;
+
+      /* the scroller is sized by the host, so the animated host size shrinks it below its content
+         mid-animation - without this it flashes a scrollbar on every resize */
+      .et-menu-body {
+        overflow: clip;
+      }
+    }
+
+    .et-menu-header {
+      flex: none;
+      padding: var(--et-menu-padding-block) var(--et-menu-padding-inline) 0;
+
+      contain: inline-size;
+
+      &:not(:has(input[etmenusearch])) {
+        display: none;
+      }
+    }
+
+    /* The block gap has to be a margin. Padding on the scroller is inside its scrollport, so an
+       option scrolls into the gap under the search field; padding on the content scrolls away with
+       it, leaving the cut on the field's border. A margin holds the gap outside the scrollport, so a
+       scrolled option is always cut a gap away from the field and from the rounded corners. */
+    .et-menu-body-wrapper {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-block-size: 0;
+      margin-block: var(--et-menu-padding-block);
+    }
+
+    .et-menu-body {
+      flex: 1;
+      min-block-size: 0;
+      padding-inline: var(--et-menu-padding-inline);
+      overflow-y: auto;
+      overscroll-behavior: contain;
+
+      /* The two fade lengths ride the scroll position, so each cut edge only fades while there is
+         more to scroll that way - `both` is what holds a fade at full length beyond its range. The
+         mask stays inside the `@supports`: without scroll-driven animations it could never animate,
+         and a permanent fade on a list that does not scroll is worse than the plain cut. */
+      @supports (animation-timeline: scroll()) {
+        mask-image: linear-gradient(
+          to bottom,
+          transparent 0,
+          black var(--_et-menu-fade-start),
+          black calc(100% - var(--_et-menu-fade-end)),
+          transparent 100%
+        );
+
+        animation:
+          et-menu-scroll-fade-start linear both,
+          et-menu-scroll-fade-end linear both;
+        animation-timeline: scroll(self block), scroll(self block);
+        animation-range:
+          0 var(--et-menu-scroll-fade-size),
+          calc(100% - var(--et-menu-scroll-fade-size)) 100%;
+      }
+    }
+
+    .et-menu-group {
+      display: block;
+    }
+
+    .et-menu-item {
+      display: flex;
+      align-items: center;
+      gap: var(--et-menu-item-gap);
+      inline-size: 100%;
+      min-block-size: var(--et-menu-item-height);
+      padding-inline: var(--et-menu-item-padding-inline);
+      border: none;
+      border-radius: var(--et-menu-item-border-radius);
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      text-align: start;
+      text-decoration: none;
+      cursor: pointer;
+      outline: none;
+      box-sizing: border-box;
+      -webkit-tap-highlight-color: transparent;
+      transition:
+        background 120ms ease,
+        color 120ms ease,
+        opacity 120ms ease;
+
+      /* the roving focus is applied programmatically on mouse-open too, so :focus-visible (instead
+       of [data-active] alone) keeps the highlight from appearing without a hover or keyboard
+       interaction; a trigger whose submenu is open stays highlighted the whole time */
+      &[data-active]:where(:focus-visible),
+      &[data-menu-open] {
+        background: var(--_et-menu-item-active-background);
+      }
+
+      @media (hover: hover) {
+        &[data-active]:where(:hover) {
+          background: var(--_et-menu-item-active-background);
+        }
+      }
+
+      &:active:not([aria-disabled='true']) {
+        background: var(--_et-menu-item-pressed-background);
+      }
+
+      &[aria-disabled='true'] {
+        opacity: 0.4;
+        cursor: default;
+      }
+
+      &[data-variant='destructive'] {
+        /* the item forces the error color theme onto itself while destructive */
+        color: var(--et-theme-color-ink-solid, rgb(248 113 113));
+      }
+
+      /* Every kind of item has a label — a plain one, a checkbox, a radio — so its layout lives here
+         rather than with any single item component. Those stylesheets are only injected once their
+         component is actually rendered, and a menu of nothing but selection items never renders the
+         plain one: the label would then not grow, and the trailing check/icon would sit against the
+         text instead of the item's trailing edge. */
+      .et-menu-item-content {
+        flex: 1;
+        min-inline-size: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .et-overlay--menu {
+    --et-floating-panel-enter-duration: 140ms;
+    --et-floating-panel-leave-duration: 100ms;
+    --et-floating-panel-distance: 0.3rem;
+  }
+}

package/src/lib/notification/notification-stack.component.css

@@ -0,0 +1,114 @@
+@layer components {
+  /* `start`/`end` in the position names are logical, so the insets are too — the stack docks to the
+     inline-start/end edge and flips under `dir="rtl"`. `align-items: flex-start/flex-end` is already
+     logical (it resolves against the writing direction), so it needs no counterpart. The `center`
+     positions stay on physical `left` + a symmetric translate: centering is direction-agnostic and
+     the physical form is the idiom. */
+  .et-notification-stack {
+    /* Plus whatever a surface above the page has reserved on that edge - a docked devtools panel, an
+       app's own always-on-top chrome - so a toast is never stacked under it. The reserved edges are
+       physical, so the inline pair swaps under `dir="rtl"`. @see reserveOverlayViewportSpace */
+    --_et-notification-inset-block-start: calc(1rem + var(--et-viewport-inset-top, 0px));
+    --_et-notification-inset-block-end: calc(1rem + var(--et-viewport-inset-bottom, 0px));
+    --_et-notification-inset-inline-start: calc(1rem + var(--et-viewport-inset-left, 0px));
+    --_et-notification-inset-inline-end: calc(1rem + var(--et-viewport-inset-right, 0px));
+
+    /* Half the difference of the two reserved inline edges: centers the stack in the space that is
+       left rather than in the whole viewport. */
+    --_et-notification-center-shift: calc(
+      (var(--et-viewport-inset-left, 0px) - var(--et-viewport-inset-right, 0px)) / 2
+    );
+
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: var(--et-notification-stack-gap, 0.5rem);
+    /* The level is set inline by the stack directive, above the one overlays mount at.
+       @see NOTIFICATION_STACK_OVERLAY_LAYER */
+    z-index: var(--et-notification-stack-z-index, var(--_et-notification-stack-layer));
+    pointer-events: none;
+
+    /* Both block insets on every position, so a stack that grows past the opposite edge stops at the
+       space reserved there instead of sliding under it. The docked edge is the one the toasts sit on,
+       which is what `justify-content` picks. */
+    top: var(--_et-notification-inset-block-start);
+    bottom: var(--_et-notification-inset-block-end);
+
+    /* default: bottom-end */
+    justify-content: flex-end;
+    inset-inline-end: var(--_et-notification-inset-inline-end);
+
+    &:dir(rtl) {
+      --_et-notification-inset-inline-start: calc(1rem + var(--et-viewport-inset-right, 0px));
+      --_et-notification-inset-inline-end: calc(1rem + var(--et-viewport-inset-left, 0px));
+    }
+
+    &[data-position='bottom-center'] {
+      justify-content: flex-end;
+      inset-inline: auto;
+      left: calc(50% + var(--_et-notification-center-shift));
+      align-items: center;
+      transform: translateX(-50%);
+    }
+
+    &[data-position='bottom-start'] {
+      justify-content: flex-end;
+      inset-inline-start: var(--_et-notification-inset-inline-start);
+      inset-inline-end: auto;
+      align-items: flex-start;
+      transform: none;
+    }
+
+    &[data-position='bottom-end'] {
+      justify-content: flex-end;
+      inset-inline-start: auto;
+      inset-inline-end: var(--_et-notification-inset-inline-end);
+      align-items: flex-end;
+      transform: none;
+    }
+
+    &[data-position='top-center'] {
+      justify-content: flex-start;
+      inset-inline: auto;
+      left: calc(50% + var(--_et-notification-center-shift));
+      align-items: center;
+      transform: translateX(-50%);
+    }
+
+    &[data-position='top-start'] {
+      justify-content: flex-start;
+      inset-inline-start: var(--_et-notification-inset-inline-start);
+      inset-inline-end: auto;
+      align-items: flex-start;
+      transform: none;
+    }
+
+    &[data-position='top-end'] {
+      justify-content: flex-start;
+      inset-inline-start: auto;
+      inset-inline-end: var(--_et-notification-inset-inline-end);
+      align-items: flex-end;
+      transform: none;
+    }
+  }
+
+  .et-notification-stack > [data-notification-id] > * {
+    pointer-events: auto;
+  }
+
+  /* A corner card is the desktop shape. On a phone the stack spans both edges instead and the card
+     fills it, which is what a toast looks like there - and what keeps it on screen at all: the card's
+     300px minimum plus these insets already overflows a 320px viewport at a 16px rem base.
+     `left`/`right` rather than the logical pair because the span is symmetric, and matching the
+     `[data-position]` weight because every position rule above sets these same insets. */
+  @media (max-width: 480px) {
+    .et-notification-stack,
+    .et-notification-stack[data-position] {
+      left: calc(1rem + var(--et-viewport-inset-left, 0px));
+      right: calc(1rem + var(--et-viewport-inset-right, 0px));
+      align-items: stretch;
+      transform: none;
+    }
+  }
+}