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

package/src/lib/chip/chip.component.css

@@ -0,0 +1,155 @@
+@layer components {
+  @property --et-chip-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
+  @property --et-chip-padding-inline {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 10px;
+  }
+
+  @property --et-chip-min-block-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 24px;
+  }
+
+  @property --et-chip-border-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 999px;
+  }
+
+  @property --et-chip-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-chip-remove-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  @property --et-chip-opacity-disabled {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0.4;
+  }
+
+  .et-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--et-chip-gap);
+    padding-inline: var(--et-chip-padding-inline);
+    min-block-size: var(--et-chip-min-block-size);
+    border-radius: var(--et-chip-border-radius);
+    font-size: var(--et-chip-font-size);
+    line-height: 1.4;
+    max-inline-size: 100%;
+    box-sizing: border-box;
+    background: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 14%, transparent);
+    color: var(--et-surface-color-solid, currentColor);
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+
+    &:where([data-disabled]) {
+      opacity: var(--et-chip-opacity-disabled);
+      pointer-events: none;
+    }
+
+    /* filter-chip composition: `etSelectionOption` on the chip contributes the
+       role/aria-checked/tabindex — these states make the chip read as selectable.
+       Selected uses the tonal color mechanic (see button), so the fill follows the
+       nearest color theme. */
+    &:where([role='checkbox'], [role='radio']) {
+      cursor: pointer;
+      transition:
+        background 120ms ease,
+        color 120ms ease;
+
+      @media (hover: hover) {
+        &:hover:not([aria-checked='true']):not([data-readonly]) {
+          background: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 22%, transparent);
+        }
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+        outline-offset: 1px;
+      }
+
+      &:where([data-readonly]) {
+        cursor: default;
+      }
+    }
+
+    /* tonal fill via color-mix over the solid token — the opacity-aware
+       --et-theme-color-primary mechanic needs per-element token re-resolution
+       ([etColorInteractive]), which a plain chip does not carry */
+    &:where([aria-checked='true']) {
+      background: color-mix(in srgb, var(--et-theme-color-primary-solid, currentColor) 16%, transparent);
+      color: var(--et-theme-color-ink-solid, currentColor);
+
+      @media (hover: hover) {
+        &:hover:not([data-readonly]) {
+          background: color-mix(in srgb, var(--et-theme-color-primary-solid, currentColor) 24%, transparent);
+        }
+      }
+    }
+
+    &:where([data-removable]) {
+      padding-inline-end: calc(var(--et-chip-padding-inline) / 2);
+    }
+
+    .et-chip-label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-inline-size: 0;
+    }
+
+    .et-chip-remove-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: none;
+      inline-size: var(--et-chip-remove-size);
+      block-size: var(--et-chip-remove-size);
+      border-radius: 50%;
+      border: none;
+      padding: 0;
+      margin: 0;
+      background: transparent;
+      color: var(--et-surface-color-muted-solid, currentColor);
+      cursor: pointer;
+      appearance: none;
+
+      @media (hover: hover) {
+        &:hover {
+          background: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 20%, transparent);
+          color: var(--et-surface-color-solid, currentColor);
+        }
+      }
+
+      &:active {
+        background: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 28%, transparent);
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+        outline-offset: 1px;
+      }
+
+      .et-icon {
+        inline-size: calc(var(--et-chip-remove-size) - 6px);
+        block-size: calc(var(--et-chip-remove-size) - 6px);
+      }
+    }
+  }
+}

package/src/lib/command-palette/command-palette-item.component.css

@@ -0,0 +1,94 @@
+@layer components {
+  @property --et-command-palette-item-height {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 40px;
+  }
+
+  @property --et-command-palette-item-padding-inline {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 10px;
+  }
+
+  @property --et-command-palette-item-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 10px;
+  }
+
+  @property --et-command-palette-item-border-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 6px;
+  }
+
+  @property --et-command-palette-item-icon-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  .et-command-palette-item {
+    display: flex;
+    align-items: center;
+    gap: var(--et-command-palette-item-gap);
+    min-block-size: var(--et-command-palette-item-height);
+    padding-inline: var(--et-command-palette-item-padding-inline);
+    border-radius: var(--et-command-palette-item-border-radius);
+    cursor: pointer;
+
+    /* Marks the row the arrow keys reached. Not `:hover`: the pointer and the keyboard drive one
+       highlight, and the component decides which row that is. */
+    &.et-command-palette-item--active {
+      background: color-mix(in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 12%, transparent);
+    }
+
+    &:where([aria-disabled='true']) {
+      cursor: default;
+      opacity: 0.5;
+    }
+  }
+
+  .et-command-palette-item-icon {
+    flex: none;
+    inline-size: var(--et-command-palette-item-icon-size);
+    block-size: var(--et-command-palette-item-icon-size);
+    color: var(--et-surface-color-muted-solid, rgb(255 255 255 / 0.55));
+
+    svg {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+  }
+
+  .et-command-palette-item-text {
+    display: grid;
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  .et-command-palette-item-label,
+  .et-command-palette-item-description {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .et-command-palette-item-description {
+    color: var(--et-surface-color-muted-solid, rgb(255 255 255 / 0.55));
+    font-size: 12px;
+  }
+
+  /* A `mark` carries a yellow background by default, which is not how a match should read here. */
+  .et-command-palette-item-match {
+    background: none;
+    color: var(--et-theme-color-ink-solid, currentcolor);
+    font-weight: 600;
+  }
+
+  .et-command-palette-item-shortcut {
+    flex: none;
+    color: var(--et-surface-color-muted-solid, rgb(255 255 255 / 0.55));
+  }
+}

package/src/lib/command-palette/command-palette.component.css

@@ -0,0 +1,100 @@
+@layer components {
+  @property --et-command-palette-max-height {
+    syntax: '<length-percentage>';
+    inherits: false;
+    initial-value: 60vh;
+  }
+
+  @property --et-command-palette-padding {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 8px;
+  }
+
+  @property --et-command-palette-search-height {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 48px;
+  }
+
+  @property --et-command-palette-search-font-size {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 15px;
+  }
+
+  @property --et-command-palette-item-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  .et-command-palette {
+    --_et-command-palette-color: var(--et-surface-color-solid, rgb(244 244 245));
+    --_et-command-palette-muted-color: var(--et-surface-color-muted-solid, rgb(255 255 255 / 0.55));
+    --_et-command-palette-border: var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
+    max-block-size: var(--et-command-palette-max-height);
+    color: var(--_et-command-palette-color);
+    font-size: var(--et-command-palette-item-font-size);
+  }
+
+  .et-command-palette-search-field {
+    display: flex;
+    align-items: center;
+    border-block-end: 1px solid var(--_et-command-palette-border);
+
+    input {
+      flex: 1;
+      min-inline-size: 0;
+      block-size: var(--et-command-palette-search-height);
+      padding-inline: 16px;
+      border: none;
+      background: none;
+      color: inherit;
+      font: inherit;
+      font-size: var(--et-command-palette-search-font-size);
+
+      /* The dialog is the focus indicator here; a ring around a full-width field inside it reads as noise. */
+      &:focus-visible {
+        outline: none;
+      }
+
+      &::placeholder {
+        color: var(--_et-command-palette-muted-color);
+      }
+    }
+  }
+
+  .et-command-palette-list {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: var(--et-command-palette-padding);
+  }
+
+  .et-command-palette-group-label {
+    margin: 0;
+    padding-block: 8px 4px;
+    padding-inline: var(--et-command-palette-item-padding-inline);
+    color: var(--_et-command-palette-muted-color);
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+  }
+
+  .et-command-palette-empty {
+    margin: 0;
+    padding-block: 24px;
+    color: var(--_et-command-palette-muted-color);
+    text-align: center;
+  }
+
+  /* Held near the top of the viewport rather than centered: the list grows downwards as the reader
+     types, and a centered panel would shift the row under the pointer on every keystroke. */
+  .et-overlay.et-command-palette-panel {
+    align-self: start;
+    margin-block-start: 12vh;
+    padding: 0;
+  }
+}

package/src/lib/description-list/description-list.component.css

@@ -0,0 +1,77 @@
+@layer components {
+  @property --et-description-list-row-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  @property --et-description-list-column-gap {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 16px;
+  }
+
+  @property --et-description-list-stacked-term-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 2px;
+  }
+
+  @property --et-description-list-term-min-width {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 120px;
+  }
+
+  @property --et-description-list-term-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  @property --et-description-list-detail-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  .et-description-list {
+    display: grid;
+    grid-template-columns: minmax(var(--et-description-list-term-min-width), max-content) 1fr;
+    row-gap: var(--et-description-list-row-gap);
+    column-gap: var(--et-description-list-column-gap);
+    margin: 0;
+
+    > div {
+      display: contents;
+    }
+
+    dt {
+      grid-column: 1;
+      font-size: var(--et-description-list-term-font-size);
+      color: var(--et-surface-color-muted-solid, currentColor);
+    }
+
+    dd {
+      grid-column: 2;
+      margin: 0;
+      font-size: var(--et-description-list-detail-font-size);
+      color: var(--et-surface-color-solid, currentColor);
+    }
+
+    &:where([data-variant='stacked']) {
+      grid-template-columns: 1fr;
+      row-gap: var(--et-description-list-stacked-term-gap);
+
+      dt,
+      dd {
+        grid-column: 1;
+      }
+
+      :is(dd, div) + dt,
+      :is(dd, div) + div > dt:first-child {
+        margin-block-start: max(0px, var(--et-description-list-row-gap) - var(--et-description-list-stacked-term-gap));
+      }
+    }
+  }
+}

package/src/lib/divider/divider.component.css

@@ -0,0 +1,36 @@
+@layer components {
+  @property --et-divider-thickness {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 1px;
+  }
+
+  @property --et-divider-spacing {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  @property --et-divider-inset {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0px;
+  }
+
+  .et-divider {
+    display: block;
+    flex: none;
+    background: var(--et-divider-color, var(--et-surface-border-solid, rgb(255 255 255 / 0.1)));
+    block-size: var(--et-divider-thickness);
+    margin-block: var(--et-divider-spacing);
+    margin-inline: var(--et-divider-inset);
+
+    &:where([data-orientation='vertical']) {
+      align-self: stretch;
+      block-size: auto;
+      inline-size: var(--et-divider-thickness);
+      margin-block: var(--et-divider-inset);
+      margin-inline: var(--et-divider-spacing);
+    }
+  }
+}

package/src/lib/empty-state/empty-state.component.css

@@ -0,0 +1,73 @@
+@layer components {
+  @property --et-empty-state-padding {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 32px;
+  }
+
+  @property --et-empty-state-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  @property --et-empty-state-icon-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 32px;
+  }
+
+  @property --et-empty-state-max-inline-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 320px;
+  }
+
+  @property --et-empty-state-title-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  @property --et-empty-state-description-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 13px;
+  }
+
+  .et-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+    gap: var(--et-empty-state-gap);
+    padding: var(--et-empty-state-padding);
+    max-inline-size: var(--et-empty-state-max-inline-size);
+    margin-inline: auto;
+    text-align: center;
+    color: var(--et-surface-color-solid, currentColor);
+
+    > .et-icon {
+      flex-shrink: 0;
+      width: var(--et-empty-state-icon-size);
+      height: var(--et-empty-state-icon-size);
+      color: var(--et-surface-color-muted-solid, currentColor);
+    }
+
+    > [etEmptyStateAction] {
+      margin-block-start: var(--et-empty-state-gap);
+    }
+  }
+
+  .et-empty-state-title {
+    margin: 0;
+    font-size: var(--et-empty-state-title-font-size);
+    font-weight: 600;
+  }
+
+  .et-empty-state-description {
+    margin: 0;
+    font-size: var(--et-empty-state-description-font-size);
+    color: var(--et-surface-color-muted-solid, currentColor);
+  }
+}

package/src/lib/floating-action/floating-action-styles.component.css

@@ -0,0 +1,78 @@
+@layer components {
+  @property --et-floating-action-inset-inline-end {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 24px;
+  }
+
+  @property --et-floating-action-inset-block-end {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 24px;
+  }
+
+  @property --et-floating-action-z-index {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 10;
+  }
+
+  @property --et-floating-action-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 200ms;
+  }
+
+  .et-floating-action {
+    display: block;
+
+    /* The trigger is the same element throughout — inline, floating, gone — so the tab order never changes and
+       assistive technology never sees a button appear or disappear. Only its position does. */
+    .et-floating-action-trigger:where([data-floating-action-state='floating'], [data-floating-action-state='hidden']) {
+      position: fixed;
+      inset-inline-end: var(--et-floating-action-inset-inline-end);
+      /* Plus the home-bar inset on a phone, when there is one, and whatever a surface above the page has
+         reserved on that edge - a docked devtools panel - so the button never sits under either. */
+      inset-block-end: calc(
+        var(--et-floating-action-inset-block-end) + env(safe-area-inset-bottom, 0px) +
+          var(--et-viewport-inset-bottom, 0px)
+      );
+      z-index: var(--et-floating-action-z-index);
+    }
+
+    .et-floating-action-trigger:where([data-floating-action-state='hidden']) {
+      scale: 0;
+      /* Not merely invisible: a zero-scale button is still focusable, so tabbing would land on something the
+         reader cannot see. */
+      visibility: hidden;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .et-floating-action {
+      /* Scaling *in* is a keyframe rather than a transition: the first time the trigger detaches there is no
+         previous scale to animate from. */
+      .et-floating-action-trigger:where([data-floating-action-state='floating']) {
+        animation: et-floating-action-in var(--et-floating-action-duration) var(--ease-3, ease-out);
+      }
+
+      /* Out is a transition, and `visibility` is held back to the end of it so the scale-out stays watchable
+         while the button still becomes properly unfocusable afterwards. */
+      .et-floating-action-trigger:where([data-floating-action-state='hidden']) {
+        transition:
+          scale var(--et-floating-action-duration) var(--ease-3, ease-out),
+          visibility 0s linear var(--et-floating-action-duration);
+      }
+    }
+
+    @keyframes et-floating-action-in {
+      from {
+        scale: 0;
+      }
+
+      to {
+        scale: 1;
+      }
+    }
+  }
+}

package/src/lib/focus-ring/focus-ring-styles.component.css

@@ -0,0 +1,13 @@
+@layer components {
+  .et-focus-ring {
+    --_et-focus-ring-offset: 3px;
+    --_et-focus-ring-width: 2px;
+    --_et-focus-ring-color: var(--et-theme-color-primary-solid, currentColor);
+    outline: var(--_et-focus-ring-width) solid transparent;
+    outline-offset: var(--_et-focus-ring-offset);
+  }
+
+  .et-focus-ring:focus-visible {
+    outline-color: var(--_et-focus-ring-color);
+  }
+}