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

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

@@ -0,0 +1,234 @@
+@layer components {
+  @property --et-rich-text-editor-content-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  @property --et-rich-text-editor-quote-indent {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-rich-text-editor-quote-bar-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 2px;
+  }
+
+  @property --et-rich-text-editor-code-block-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 6px;
+  }
+
+  @property --et-rich-text-editor-token-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
+  @property --et-rich-text-editor-token-padding-inline {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
+  .et-rte-content {
+    overflow-wrap: anywhere;
+
+    > :first-child {
+      margin-block-start: 0;
+    }
+
+    > :last-child {
+      margin-block-end: 0;
+    }
+
+    p {
+      margin-block: 0;
+    }
+
+    p + p,
+    ul,
+    ol,
+    blockquote,
+    pre {
+      margin-block-start: var(--et-rich-text-editor-content-gap);
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin-block: 0;
+      font-weight: 700;
+      line-height: 1.25;
+    }
+
+    :is(h1, h2, h3, h4, h5, h6) + *,
+    * + :is(h1, h2, h3, h4, h5, h6) {
+      margin-block-start: var(--et-rich-text-editor-content-gap);
+    }
+
+    h1 {
+      font-size: 2.4rem;
+    }
+
+    h2 {
+      font-size: 2rem;
+    }
+
+    h3 {
+      font-size: 1.6rem;
+    }
+
+    ul,
+    ol {
+      margin-block-end: 0;
+      padding-inline-start: 1.5em;
+      list-style-position: outside;
+    }
+
+    /* marker style cycles by nesting depth (Slack-style): disc → circle → square, and
+       decimal → lower-alpha → lower-roman */
+    ul {
+      list-style-type: disc;
+    }
+
+    ul ul,
+    ul ul ul ul ul {
+      list-style-type: circle;
+    }
+
+    ul ul ul,
+    ul ul ul ul ul ul {
+      list-style-type: square;
+    }
+
+    ul ul ul ul {
+      list-style-type: disc;
+    }
+
+    ol {
+      list-style-type: decimal;
+    }
+
+    ol ol,
+    ol ol ol ol ol {
+      list-style-type: lower-alpha;
+    }
+
+    ol ol ol,
+    ol ol ol ol ol ol {
+      list-style-type: lower-roman;
+    }
+
+    ol ol ol ol {
+      list-style-type: decimal;
+    }
+
+    li {
+      margin-block: 0;
+    }
+
+    li::marker {
+      color: color-mix(in srgb, currentColor 60%, transparent);
+    }
+
+    a {
+      color: var(--et-theme-color-ink-solid, currentColor);
+      text-decoration: underline;
+    }
+
+    code {
+      padding: 0.1em 0.3em;
+      border-radius: 4px;
+      background: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 14%, transparent);
+      font-family: var(--et-font-family-mono, ui-monospace, monospace);
+      font-size: 0.9em;
+    }
+
+    blockquote {
+      margin-inline: 0;
+      margin-block-end: 0;
+      padding-inline-start: var(--et-rich-text-editor-quote-indent);
+      border-inline-start: var(--et-rich-text-editor-quote-bar-width) solid
+        color-mix(in srgb, var(--et-surface-border-solid, currentColor) 80%, transparent);
+      color: color-mix(in srgb, currentColor 82%, transparent);
+    }
+
+    /* a quote inside a quote (`>>`) gets its own bar, so nesting depth stays readable */
+    blockquote blockquote {
+      margin-block-start: var(--et-rich-text-editor-content-gap);
+    }
+
+    pre {
+      margin-block-end: 0;
+      padding: 8px 10px;
+      border-radius: var(--et-rich-text-editor-code-block-radius);
+      background: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 10%, transparent);
+      font-family: var(--et-font-family-mono, ui-monospace, monospace);
+      font-size: 0.9em;
+      /* pre-wrap, not pre: newlines are the block's content (Enter inserts one), but a long line
+         must wrap instead of scrolling the field sideways */
+      white-space: pre-wrap;
+    }
+
+    /* the fence is the block — its inner <code> must not paint the inline-code chip on top */
+    pre code {
+      padding: 0;
+      border-radius: 0;
+      background: none;
+      font-size: inherit;
+    }
+
+    .et-rte-token {
+      --_et-rte-token-accent: var(--et-theme-color-primary-solid, var(--et-surface-interaction-solid, currentColor));
+
+      display: inline;
+      padding-inline: var(--et-rich-text-editor-token-padding-inline);
+      border-radius: var(--et-rich-text-editor-token-radius);
+      background: color-mix(in srgb, var(--_et-rte-token-accent) 22%, transparent);
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_et-rte-token-accent) 45%, transparent);
+      color: var(--et-theme-color-ink-solid, inherit);
+      font-weight: 500;
+      white-space: nowrap;
+      -webkit-user-select: all;
+      user-select: all;
+      cursor: default;
+    }
+
+    .et-rte-token-prefix {
+      margin-inline-end: 1px;
+      opacity: 0.65;
+    }
+
+    .et-rte-align-left {
+      text-align: left;
+    }
+
+    .et-rte-align-center {
+      text-align: center;
+    }
+
+    .et-rte-align-right {
+      text-align: right;
+    }
+
+    .et-rte-align-justify {
+      text-align: justify;
+    }
+
+    .et-rte-align-start {
+      text-align: start;
+    }
+
+    .et-rte-align-end {
+      text-align: end;
+    }
+  }
+}

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

@@ -0,0 +1,90 @@
+@layer components {
+  .et-overlay.et-rte-floating-toolbar-overlay {
+    overflow: visible;
+    background: transparent;
+    box-shadow: none;
+    border-radius: 10px;
+
+    /* Anchored panes force their projected content to `display: block`
+       (`overlay-container.component.css`), which outweighs the class-only rule below - the toolbar
+       has to out-specify it to lay its tools out as a row at all. */
+    > .et-rte-floating-toolbar {
+      display: flex;
+    }
+  }
+
+  /* open / close: fade + a small slide toward the selection (same treatment as the token popup).
+     The overlay runtime toggles the enter/leave classes and sets --et-overlay-anchored-x/y. */
+  .et-overlay.et-with-default-animation.et-rte-floating-toolbar-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-floating-toolbar-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-floating-toolbar-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-floating-toolbar-overlay {
+      &.et-animation-enter-active {
+        transition: opacity 140ms ease;
+      }
+
+      &.et-animation-leave-active {
+        transition: opacity 100ms ease;
+      }
+    }
+
+    .et-rte-floating-toolbar-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-floating-toolbar {
+    display: flex;
+    align-items: center;
+    gap: var(--et-rich-text-editor-toolbar-gap, 2px);
+    padding: var(--et-rich-text-editor-toolbar-padding, 4px);
+    border-radius: 10px;
+    border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+    background: var(--et-surface-background-solid, rgb(38 38 38));
+    color: var(--et-surface-color-solid, rgb(244 244 245));
+    box-shadow: var(--et-anchored-panel-shadow, 0 10px 24px rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.16));
+
+    --et-icon-button-border-radius: var(--et-rich-text-editor-button-radius, 4px);
+
+    .et-divider {
+      --et-divider-color: color-mix(in srgb, currentColor 20%, transparent);
+      --et-divider-spacing: 2px;
+      --et-divider-inset: 4px;
+    }
+  }
+}

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

@@ -0,0 +1,172 @@
+@layer components {
+  @property --et-rich-text-editor-image-editor-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 288px;
+  }
+
+  @property --et-rich-text-editor-image-editor-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-rich-text-editor-image-editor-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-rich-text-editor-image-editor-padding {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  @property --et-rich-text-editor-image-editor-thumb-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 40px;
+  }
+
+  /* The popover chrome deliberately mirrors the link editor's (same overlay strategies, same card):
+     the two are the same kind of thing to a user, and each component carries its own stylesheet, so
+     the rules cannot be shared without a third component whose only job is to hold them. */
+  .et-overlay.et-rte-image-editor-overlay {
+    background: var(--et-surface-background-solid, rgb(30 30 30));
+    border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+    box-shadow: 0 12px 32px rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.24);
+  }
+
+  .et-overlay.et-rte-image-editor-overlay.et-overlay--anchored-dialog {
+    inline-size: var(--et-rich-text-editor-image-editor-width);
+    max-inline-size: calc(100vw - 32px);
+    border-radius: var(--et-rich-text-editor-image-editor-radius);
+  }
+
+  /* A short fade plus a nudge away from the image it points at, instead of the anchored-dialog
+     default's spring scale — same reasoning (and timings) as the link editor's. */
+  .et-overlay.et-with-default-animation.et-rte-image-editor-overlay.et-overlay--anchored-dialog {
+    --_et-rte-image-editor-nudge-x: 0px;
+    --_et-rte-image-editor-nudge-y: 0px;
+
+    &:where([data-overlay-placement^='top']) {
+      --_et-rte-image-editor-nudge-y: 0.45rem;
+    }
+
+    &:where([data-overlay-placement^='bottom']) {
+      --_et-rte-image-editor-nudge-y: -0.45rem;
+    }
+
+    &:where([data-overlay-placement^='left']) {
+      --_et-rte-image-editor-nudge-x: 0.45rem;
+    }
+
+    &:where([data-overlay-placement^='right']) {
+      --_et-rte-image-editor-nudge-x: -0.45rem;
+    }
+
+    &.et-animation-enter-from,
+    &.et-animation-leave-to {
+      opacity: 0;
+      transform: translate3d(var(--et-overlay-anchored-x, 0px), var(--et-overlay-anchored-y, 0px), 0)
+        translate(var(--_et-rte-image-editor-nudge-x), var(--_et-rte-image-editor-nudge-y)) !important;
+    }
+
+    &.et-animation-enter-active {
+      transition:
+        transform 200ms ease,
+        opacity 200ms ease;
+    }
+
+    &.et-animation-leave-active {
+      transition:
+        transform 140ms ease,
+        opacity 140ms ease;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-overlay.et-with-default-animation.et-rte-image-editor-overlay.et-overlay--anchored-dialog {
+      --_et-rte-image-editor-nudge-x: 0px;
+      --_et-rte-image-editor-nudge-y: 0px;
+
+      &.et-animation-enter-active {
+        transition: opacity 200ms ease;
+      }
+
+      &.et-animation-leave-active {
+        transition: opacity 140ms ease;
+      }
+    }
+  }
+
+  .et-overlay.et-rte-image-editor-overlay.et-overlay--top-sheet {
+    border-end-start-radius: var(--et-rich-text-editor-image-editor-radius);
+    border-end-end-radius: var(--et-rich-text-editor-image-editor-radius);
+  }
+
+  .et-rte-image-editor {
+    display: flex;
+    flex-direction: column;
+    gap: var(--et-rich-text-editor-image-editor-gap);
+    inline-size: 100%;
+    box-sizing: border-box;
+    padding: var(--et-rich-text-editor-image-editor-padding);
+    color: var(--et-surface-color-solid, currentColor);
+  }
+
+  .et-rte-image-editor-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin-block-end: 2px;
+  }
+
+  .et-rte-image-editor-title {
+    font-weight: 600;
+    font-size: 1.4rem;
+  }
+
+  .et-rte-image-editor-preview {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-inline-size: 0;
+  }
+
+  .et-rte-image-editor-thumb {
+    flex: none;
+    inline-size: var(--et-rich-text-editor-image-editor-thumb-size);
+    block-size: var(--et-rich-text-editor-image-editor-thumb-size);
+    border-radius: 6px;
+    object-fit: cover;
+    background: color-mix(in srgb, var(--et-surface-interaction-solid, #888) 12%, transparent);
+  }
+
+  .et-rte-image-editor-file {
+    overflow: hidden;
+    color: var(--et-surface-color-muted-solid, inherit);
+    font-size: 1.2rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .et-overlay--top-sheet .et-rte-image-editor {
+    gap: 16px;
+    padding: 16px;
+    padding-block-end: max(16px, env(safe-area-inset-bottom));
+  }
+
+  .et-overlay--top-sheet .et-rte-image-editor-title {
+    font-size: 1.6rem;
+  }
+
+  .et-rte-image-editor-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+}

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

@@ -0,0 +1,149 @@
+@layer components {
+  @property --et-rich-text-editor-link-editor-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 288px;
+  }
+
+  @property --et-rich-text-editor-link-editor-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-rich-text-editor-link-editor-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-rich-text-editor-link-editor-padding {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  .et-overlay.et-rte-link-editor-overlay {
+    background: var(--et-surface-background-solid, rgb(30 30 30));
+    border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+    box-shadow: 0 12px 32px rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.24);
+  }
+
+  /* Anchored popover (>= md): a compact, fully-rounded card pointing at the selection. */
+  .et-overlay.et-rte-link-editor-overlay.et-overlay--anchored-dialog {
+    inline-size: var(--et-rich-text-editor-link-editor-width);
+    max-inline-size: calc(100vw - 32px);
+    border-radius: var(--et-rich-text-editor-link-editor-radius);
+  }
+
+  /* The anchored popover enters like a toggletip — a short fade plus a nudge away from what it points
+     at — instead of the anchored-dialog default, whose spring scale-from-origin reads as far too much
+     movement for a small card sitting right on top of the text the user is editing. Same shape and
+     timings as `.et-overlay--toggletip` in `toggletip.component.css`.
+
+     The transform has to re-state floating-ui's anchor offset (and win with `!important`) because it
+     replaces the base rule's composed transform wholesale — see the anchored-dialog block there. Only
+     the anchored variant is retargeted; the phone-sized top sheet keeps its slide-down. */
+  .et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog {
+    --_et-rte-link-editor-nudge-x: 0px;
+    --_et-rte-link-editor-nudge-y: 0px;
+
+    /* Nudge away from the anchor, so the card reads as coming out of the selection it points at. */
+    &:where([data-overlay-placement^='top']) {
+      --_et-rte-link-editor-nudge-y: 0.45rem;
+    }
+
+    &:where([data-overlay-placement^='bottom']) {
+      --_et-rte-link-editor-nudge-y: -0.45rem;
+    }
+
+    &:where([data-overlay-placement^='left']) {
+      --_et-rte-link-editor-nudge-x: 0.45rem;
+    }
+
+    &:where([data-overlay-placement^='right']) {
+      --_et-rte-link-editor-nudge-x: -0.45rem;
+    }
+
+    &.et-animation-enter-from,
+    &.et-animation-leave-to {
+      opacity: 0;
+      transform: translate3d(var(--et-overlay-anchored-x, 0px), var(--et-overlay-anchored-y, 0px), 0)
+        translate(var(--_et-rte-link-editor-nudge-x), var(--_et-rte-link-editor-nudge-y)) !important;
+    }
+
+    &.et-animation-enter-active {
+      transition:
+        transform 200ms ease,
+        opacity 200ms ease;
+    }
+
+    &.et-animation-leave-active {
+      transition:
+        transform 140ms ease,
+        opacity 140ms ease;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-overlay.et-with-default-animation.et-rte-link-editor-overlay.et-overlay--anchored-dialog {
+      --_et-rte-link-editor-nudge-x: 0px;
+      --_et-rte-link-editor-nudge-y: 0px;
+
+      &.et-animation-enter-active {
+        transition: opacity 200ms ease;
+      }
+
+      &.et-animation-leave-active {
+        transition: opacity 140ms ease;
+      }
+    }
+  }
+
+  /* Top sheet (< md): full-width, pinned above the on-screen keyboard, only the bottom corners round. */
+  .et-overlay.et-rte-link-editor-overlay.et-overlay--top-sheet {
+    border-end-start-radius: var(--et-rich-text-editor-link-editor-radius);
+    border-end-end-radius: var(--et-rich-text-editor-link-editor-radius);
+  }
+
+  .et-rte-link-editor {
+    display: flex;
+    flex-direction: column;
+    gap: var(--et-rich-text-editor-link-editor-gap);
+    inline-size: 100%;
+    box-sizing: border-box;
+    padding: var(--et-rich-text-editor-link-editor-padding);
+    color: var(--et-surface-color-solid, currentColor);
+  }
+
+  .et-rte-link-editor-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin-block-end: 2px;
+  }
+
+  .et-rte-link-editor-title {
+    font-weight: 600;
+    font-size: 1.4rem;
+  }
+
+  /* Roomier, touch-sized layout for the top sheet. */
+  .et-overlay--top-sheet .et-rte-link-editor {
+    gap: 16px;
+    padding: 16px;
+    padding-block-end: max(16px, env(safe-area-inset-bottom));
+  }
+
+  .et-overlay--top-sheet .et-rte-link-editor-title {
+    font-size: 1.6rem;
+  }
+
+  .et-rte-link-editor-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+}

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

@@ -0,0 +1,18 @@
+@layer components {
+  @property --et-rich-text-editor-token-palette-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 6px;
+  }
+
+  .et-rte-token-palette {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--et-rich-text-editor-token-palette-gap);
+
+    /* de-emphasize the trigger char shown ahead of the label, matching the inserted chip's prefix */
+    .et-rte-token-palette-chip-prefix {
+      opacity: 0.65;
+    }
+  }
+}