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

package/src/lib/forms/rich-text-editor/rich-text-editor-token-popup.component.css

@@ -0,0 +1,199 @@
+@layer components {
+  .et-overlay.et-rte-token-popup-overlay {
+    overflow: visible;
+    background: transparent;
+    box-shadow: none;
+    border-radius: 10px;
+  }
+
+  /* open / close: fade + a small slide toward the caret (same treatment as et-menu). The overlay
+     runtime toggles the enter/leave classes and sets --et-overlay-anchored-x/y for positioning. */
+  .et-overlay.et-with-default-animation.et-rte-token-popup-overlay {
+    &.et-animation-enter-from,
+    &.et-animation-leave-to {
+      opacity: 0;
+    }
+
+    &.et-animation-enter-active {
+      transition:
+        transform 140ms ease,
+        opacity 140ms ease;
+    }
+
+    &.et-animation-leave-active {
+      transition:
+        transform 100ms ease,
+        opacity 100ms ease;
+    }
+  }
+
+  .et-rte-token-popup-overlay[data-overlay-placement^='top'] {
+    &.et-animation-enter-from,
+    &.et-animation-leave-to {
+      transform: translate3d(var(--et-overlay-anchored-x, 0px), var(--et-overlay-anchored-y, 0px), 0) translateY(0.3rem) !important;
+    }
+  }
+
+  .et-rte-token-popup-overlay[data-overlay-placement^='bottom'] {
+    &.et-animation-enter-from,
+    &.et-animation-leave-to {
+      transform: translate3d(var(--et-overlay-anchored-x, 0px), var(--et-overlay-anchored-y, 0px), 0)
+        translateY(-0.3rem) !important;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-overlay.et-with-default-animation.et-rte-token-popup-overlay {
+      &.et-animation-enter-active {
+        transition: opacity 140ms ease;
+      }
+
+      &.et-animation-leave-active {
+        transition: opacity 100ms ease;
+      }
+    }
+
+    .et-rte-token-popup-overlay[data-overlay-placement] {
+      &.et-animation-enter-from,
+      &.et-animation-leave-to {
+        transform: translate3d(var(--et-overlay-anchored-x, 0px), var(--et-overlay-anchored-y, 0px), 0) !important;
+      }
+    }
+  }
+
+  .et-rte-token-popup {
+    --_et-rte-popup-background: var(--et-surface-background-solid, rgb(38 38 38));
+    --_et-rte-popup-color: var(--et-surface-color-solid, rgb(244 244 245));
+    --_et-rte-popup-border: var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+    --_et-rte-popup-shadow: var(--et-anchored-panel-shadow, 0 10px 24px rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.16));
+    --_et-rte-popup-radius: 10px;
+    --_et-rte-popup-option-radius: 6px;
+    --_et-rte-popup-max-block-size: 260px;
+    --_et-rte-popup-muted-color: var(--et-surface-color-muted-solid, rgb(255 255 255 / 0.55));
+    --_et-rte-popup-option-active-background: color-mix(
+      in srgb,
+      var(--et-surface-interaction-solid, rgb(255 255 255)) 12%,
+      transparent
+    );
+
+    position: relative;
+    display: block;
+    min-inline-size: 180px;
+    max-inline-size: min(320px, calc(100vw - 24px));
+    border-radius: 10px;
+    border: 1px solid var(--_et-rte-popup-border);
+    background: var(--_et-rte-popup-background);
+    color: var(--_et-rte-popup-color);
+    font-family: var(--et-font-family, inherit);
+    font-size: 14px;
+    box-shadow: var(--_et-rte-popup-shadow);
+    outline: none;
+    overflow: hidden;
+
+    &.et-rte-token-popup--resizing {
+      overflow: clip;
+    }
+
+    /* out of flow: the re-fetch cue sits on the top edge and never changes the list height. Kept
+       mounted and faded via `--visible` so it eases in/out instead of popping. */
+    .et-rte-token-popup-progress {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline: 0;
+      z-index: 1;
+      --et-progress-bar-height: 1.5px;
+      --et-progress-bar-border-radius: 0;
+      --et-progress-bar-indicator-color: var(--et-theme-color-primary-solid, currentColor);
+      --et-progress-bar-track-color: transparent;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 160ms ease;
+    }
+
+    .et-rte-token-popup-progress--visible {
+      opacity: 1;
+    }
+
+    .et-rte-token-popup-error {
+      margin: 6px 8px 0;
+      font-size: 12px;
+      color: var(--et-theme-color-ink-solid, rgb(248 113 113));
+    }
+
+    .et-rte-token-popup-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      min-block-size: 72px;
+      padding: 12px 16px;
+      text-align: center;
+    }
+
+    .et-rte-token-popup-state--error {
+      color: var(--et-theme-color-ink-solid, rgb(248 113 113));
+    }
+
+    .et-rte-token-popup-state-icon {
+      inline-size: 22px;
+      block-size: 22px;
+      color: inherit;
+    }
+
+    .et-rte-token-popup-state-label {
+      font-size: 12px;
+      line-height: 1.35;
+      color: inherit;
+    }
+
+    .et-rte-token-popup-body {
+      max-block-size: var(--_et-rte-popup-max-block-size);
+      padding: 6px;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+    }
+
+    .et-rte-token-popup-option {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 2px;
+      min-block-size: 36px;
+      padding: 6px 10px;
+      border-radius: var(--_et-rte-popup-option-radius);
+      cursor: pointer;
+      transition: background 120ms ease;
+
+      &[data-active] {
+        background: var(--_et-rte-popup-option-active-background);
+      }
+
+      &[aria-disabled='true'] {
+        opacity: 0.4;
+        cursor: default;
+      }
+    }
+
+    .et-rte-token-popup-option-label {
+      line-height: 1.3;
+    }
+
+    .et-rte-token-popup-option-description {
+      font-size: 12px;
+      line-height: 1.2;
+      color: var(--_et-rte-popup-muted-color);
+    }
+
+    /* one fixed-height box shared by the first-load spinner and the empty label, so switching
+       between them never resizes the panel */
+    .et-rte-token-popup-placeholder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-block-size: 52px;
+      font-size: 13px;
+      color: var(--_et-rte-popup-muted-color);
+    }
+  }
+}

package/src/lib/forms/rich-text-editor/rich-text-editor.component.css

@@ -0,0 +1,175 @@
+@layer components {
+  @property --et-rich-text-editor-toolbar-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 2px;
+  }
+
+  @property --et-rich-text-editor-toolbar-padding {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
+  @property --et-rich-text-editor-button-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
+  @property --et-rich-text-editor-min-height {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 96px;
+  }
+
+  et-rich-text-editor {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-inline-size: 0;
+    color: inherit;
+
+    .et-rte-toolbar {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--et-rich-text-editor-toolbar-gap);
+      padding: var(--et-rich-text-editor-toolbar-padding);
+      padding-inline: calc(var(--et-form-field-control-padding-inline) - var(--et-rich-text-editor-toolbar-padding));
+      border-block-end: var(--et-form-field-control-border-width, 1px) solid
+        color-mix(in srgb, currentColor 12%, transparent);
+
+      --et-icon-button-border-radius: var(--et-rich-text-editor-button-radius);
+
+      /* dense toolbar: the default outward ring offset (3px) reaches past the toolbar padding (4px)
+         and gap (2px), stacking the ring on the field border and neighboring buttons — pull it onto
+         the button edge instead */
+      .et-icon-button {
+        --_et-focus-ring-offset: -1px;
+      }
+
+      /* readonly disables every tool, but the editor is view-only rather than broken - the button's
+         `not-allowed` would say the wrong thing */
+      :where([data-readonly]) & .et-icon-button {
+        cursor: default;
+      }
+    }
+
+    /* On touch the toolbar is a full-width bar fixed above the on-screen keyboard (the OS selection
+       menu owns the top). It never sits at the top: it's hidden until the editor is active, then
+       fades/slides in rather than popping.
+
+       The keyboard is cleared by *padding*, not by `inset-block-end`: the box itself always reaches the
+       bottom of the layout viewport and the measured inset (driven by JS from `visualViewport`) pushes
+       the tools up out of the keyboard's way. The difference matters where the measurement cannot be
+       exact — Chrome for Android reports a visible viewport one tab-group-strip too short while a tab
+       belongs to a tab group, and nothing in the page can tell — because the bar's own background
+       covers whatever is between it and the keyboard instead of letting page content show through a
+       gap. Everything below the tools is behind the keyboard (or behind browser chrome), so nobody can
+       reach it. The padding deliberately has NO transition: it must track the viewport instantly as the
+       page scrolls (a transition would make it lag a frame behind the keyboard). */
+    /* the tools' own scrollbar hangs at the bottom edge of the scrollport, so the keyboard
+       clearance below has to belong to the dock - not to the tools - or the bar sits behind the
+       keyboard */
+    &.et-rich-text-editor--touch .et-rte-toolbar-dock {
+      position: fixed;
+      inset-inline: 0;
+      inset-block-end: 0;
+      z-index: 60;
+      /* Two sources, whichever is available, and never both: `env(keyboard-inset-height)` is the
+         browser telling us exactly where the keyboard is — but only for a page that opted into the
+         VirtualKeyboard API (`navigator.virtualKeyboard.overlaysContent = true`), which is also what
+         stops the viewport from resizing, so the measured inset is 0 there. Without that opt-in (or
+         in a browser without the API) the env var falls back to 0 and the measurement carries it.
+         `max()` needs no feature detection and cannot place the bar too low. */
+      padding-block-end: max(var(--_et-rte-keyboard-inset, 0px), env(keyboard-inset-height, 0px));
+      background: var(--et-surface-background-solid, rgb(24 24 24));
+      border-block-start: var(--et-form-field-control-border-width, 1px) solid
+        color-mix(in srgb, currentColor 12%, transparent);
+      box-shadow: 0 -6px 20px rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.24);
+      opacity: 0;
+      transform: translateY(100%);
+      pointer-events: none;
+      transition:
+        opacity 160ms var(--ease-out-5, ease),
+        transform 260ms var(--ease-out-5, ease);
+    }
+
+    .et-rte-toolbar-viewport {
+      position: relative;
+    }
+
+    &.et-rich-text-editor--touch .et-rte-toolbar-viewport {
+      --et-scrollbar-thickness: 6px;
+      --et-scrollbar-thumb-thickness: 3px;
+    }
+
+    &.et-rich-text-editor--touch .et-rte-toolbar {
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      /* scroll the tools horizontally when they overflow, without triggering browser back-swipe */
+      overscroll-behavior-x: contain;
+      -webkit-overflow-scrolling: touch;
+      padding-inline: 8px;
+      padding-block: 6px;
+      border-block-end: none;
+    }
+
+    &.et-rich-text-editor--touch.et-rich-text-editor--docked-toolbar .et-rte-toolbar-dock {
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+    }
+
+    /* iOS Safari zooms the whole page when a focused editable's font-size is below 16px — floor
+       it there on touch devices (1em = the inherited size, so larger fonts pass through; on
+       desktop nothing changes). */
+    &.et-rich-text-editor--touch .et-rte-content {
+      font-size: max(1em, 16px);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      &.et-rich-text-editor--touch .et-rte-toolbar-dock {
+        transition: opacity 160ms var(--ease-out-5, ease);
+      }
+    }
+
+    .et-rte-toolbar .et-divider {
+      --et-divider-color: color-mix(in srgb, currentColor 12%, transparent);
+      --et-divider-spacing: 2px;
+      --et-divider-inset: 4px;
+    }
+
+    .et-rte-content {
+      /* Rendered content is display, not the field's interactive chrome. The editor frame is an
+         `et-color-interactive--has-focus` ancestor that retints `--et-theme-color-*` on focus, and
+         content that reads the accent — token chips (outline + fill), links, the caret — would
+         otherwise pick that shift up. Re-anchor the accent tokens to their resting (base) values
+         here so content stays stable whether or not the editor is focused. This is the same
+         immunity the interactive toolbar buttons already get from carrying `et-color-interactive`
+         themselves; content can't (a chip must not react to its own hover), so it re-anchors once
+         at the root instead. */
+      --et-theme-color-primary-rgb: var(--et-color-primary);
+      --et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));
+      --et-theme-color-ink-rgb: var(--et-color-primary-ink, var(--et-color-primary));
+      --et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb));
+
+      display: block;
+      flex: 1;
+      min-inline-size: 0;
+      padding-block: var(--et-form-field-control-padding-block);
+      padding-inline: var(--et-form-field-control-padding-inline);
+      min-block-size: var(--et-rich-text-editor-min-height);
+      outline: none;
+      color: inherit;
+      caret-color: var(--et-theme-color-primary-solid, currentColor);
+
+      &:empty::before {
+        content: attr(data-placeholder);
+        color: color-mix(in srgb, currentColor 46%, transparent);
+        pointer-events: none;
+      }
+    }
+  }
+}

package/src/lib/forms/rich-text-editor/rich-text-viewer.component.css

@@ -0,0 +1,6 @@
+@layer components {
+  et-rich-text-viewer {
+    display: block;
+    min-inline-size: 0;
+  }
+}

package/src/lib/forms/rich-text-editor/tools/rich-text-editor-align-tool.component.css

@@ -0,0 +1,5 @@
+@layer components {
+  .et-rte-align-tool {
+    display: contents;
+  }
+}

package/src/lib/forms/rich-text-editor/tools/rich-text-editor-heading-tool.component.css

@@ -0,0 +1,5 @@
+@layer components {
+  .et-rte-heading-tool {
+    display: contents;
+  }
+}

package/src/lib/forms/rich-text-editor/tools/rich-text-editor-image-styles.component.css

@@ -0,0 +1,109 @@
+@layer components {
+  @property --et-rich-text-editor-image-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 6px;
+  }
+
+  @property --et-rich-text-editor-image-upload-height {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 140px;
+  }
+
+  .et-rte-content {
+    img {
+      display: block;
+      max-inline-size: 100%;
+      block-size: auto;
+      margin-block: var(--et-rich-text-editor-content-gap);
+      border-radius: var(--et-rich-text-editor-image-radius);
+    }
+
+    et-rich-text-editor & img {
+      cursor: pointer;
+    }
+
+    /* The upload placeholder the image tool leaves at the caret while a file uploads. It stands in
+         for the image, so it takes an image's room rather than a character's — but it carries no text
+         (that is what keeps it out of the editor's value), so everything it says is drawn here from
+         its attributes: a spinning ring, the label plus percentage, a progress bar along the bottom,
+         and a failed state that removes itself shortly after.
+
+         It is a `<span>` set to `display: block` on purpose: a real block element (`<p>`, `<div>`)
+         would serialize as a paragraph boundary, and this must serialize as nothing at all. */
+    .et-rte-image-upload {
+      display: block;
+      position: relative;
+      block-size: var(--et-rich-text-editor-image-upload-height);
+      margin-block: var(--et-rich-text-editor-content-gap);
+      border-radius: var(--et-rich-text-editor-image-radius);
+      outline: 1px dashed color-mix(in srgb, currentColor 24%, transparent);
+      outline-offset: -1px;
+      background:
+        linear-gradient(to right, var(--et-theme-color-primary-solid, currentColor) 0 0) no-repeat left bottom /
+          var(--_et-rte-image-progress, 0%) 3px,
+        color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 8%, transparent);
+      -webkit-user-select: all;
+      user-select: all;
+
+      /* The spinner, above the label. */
+      &::before {
+        content: '';
+        position: absolute;
+        inset-inline: 0;
+        inset-block-start: calc(50% - 1.9em);
+        margin-inline: auto;
+        inline-size: 1.8em;
+        block-size: 1.8em;
+        border: 2px solid color-mix(in srgb, var(--et-theme-color-primary-solid, currentColor) 28%, transparent);
+        border-block-start-color: var(--et-theme-color-primary-solid, currentColor);
+        border-radius: 50%;
+        animation: et-rte-image-upload-spin 800ms linear infinite;
+      }
+
+      /* The state, read straight off the accessible name so it needs no text node of its own. */
+      &::after {
+        content: attr(aria-label);
+        position: absolute;
+        inset-inline: 0;
+        inset-block-start: calc(50% + 0.4em);
+        color: var(--et-surface-color-muted-solid, inherit);
+        font-size: 1.2rem;
+        text-align: center;
+      }
+
+      &[data-progress]::after {
+        content: attr(aria-label) ' · ' attr(data-progress) '%';
+        font-variant-numeric: tabular-nums;
+      }
+
+      &[data-state='error'] {
+        outline-color: color-mix(in srgb, var(--et-theme-color-primary-solid, currentColor) 40%, transparent);
+        background: color-mix(in srgb, var(--et-theme-color-primary-solid, currentColor) 10%, transparent);
+
+        /* A failed upload is not still working — the ring stops and becomes a cross. */
+        &::before {
+          border: none;
+          border-radius: 0;
+          background:
+            linear-gradient(to bottom right, transparent 44%, currentColor 44% 56%, transparent 56%),
+            linear-gradient(to bottom left, transparent 44%, currentColor 44% 56%, transparent 56%);
+          animation: none;
+        }
+      }
+    }
+  }
+
+  @keyframes et-rte-image-upload-spin {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-rte-content .et-rte-image-upload::before {
+      animation: none;
+    }
+  }
+}

package/src/lib/forms/rich-text-editor/tools/rich-text-editor-table-styles.component.css

@@ -0,0 +1,21 @@
+@layer components {
+  .et-rte-content {
+    table {
+      border-collapse: collapse;
+      inline-size: 100%;
+      margin-block: var(--et-rich-text-editor-content-gap);
+    }
+
+    :is(th, td) {
+      padding: 6px 8px;
+      border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.15));
+      text-align: start;
+      vertical-align: top;
+    }
+
+    th {
+      font-weight: 700;
+      background: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 8%, transparent);
+    }
+  }
+}

package/src/lib/forms/rich-text-editor/tools/rich-text-editor-table-tool.component.css

@@ -0,0 +1,44 @@
+@layer components {
+  .et-rte-table-tool {
+    display: contents;
+  }
+
+  .et-rte-table-picker {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    padding: 4px;
+  }
+
+  .et-rte-table-picker-grid {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: 3px;
+    /* a swipe across the grid extends the selection — never let the browser pan/scroll instead */
+    touch-action: none;
+  }
+
+  .et-rte-table-picker-cell {
+    inline-size: 16px;
+    block-size: 16px;
+    padding: 0;
+    border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.2));
+    border-radius: 2px;
+    background: transparent;
+    cursor: pointer;
+    transition:
+      background 80ms ease,
+      border-color 80ms ease;
+  }
+
+  .et-rte-table-picker-cell--active {
+    border-color: var(--et-theme-color-primary-solid, currentColor);
+    background: color-mix(in srgb, var(--et-theme-color-primary-solid, currentColor) 35%, transparent);
+  }
+
+  .et-rte-table-picker-label {
+    font-size: 12px;
+    color: var(--et-surface-color-muted-solid, currentColor);
+  }
+}

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

@@ -0,0 +1,14 @@
+@layer components {
+  .et-select-option.et-select-all-option {
+    .et-select-all-option-dash {
+      inline-size: 10px;
+      block-size: 2px;
+      border-radius: 1px;
+      background: currentColor;
+    }
+
+    &:where([aria-checked='true'], [aria-checked='mixed']) .et-select-option-check {
+      opacity: 1;
+    }
+  }
+}