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

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

@@ -0,0 +1,271 @@
+@layer components {
+  @property --et-notification-border-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
+  @property --et-notification-padding {
+    syntax: '*';
+    inherits: true;
+    initial-value: 12px 12px 12px 14px;
+  }
+
+  @property --et-notification-min-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 300px;
+  }
+
+  @property --et-notification-max-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 420px;
+  }
+
+  @property --et-notification-shadow {
+    syntax: '*';
+    inherits: true;
+    initial-value:
+      0 4px 16px rgb(var(--et-shadow-color-rgb, 0 0 0) / 10%),
+      0 0 0 1px rgb(var(--et-shadow-color-rgb, 0 0 0) / 5%);
+  }
+
+  @property --et-notification-border-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
+  @property --et-notification-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  @property --et-notification-line-height {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 20px;
+  }
+
+  @property --et-notification-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  @property --et-notification-title-font-weight {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 600;
+  }
+
+  @property --et-notification-message-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-notification-message-line-height {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  @property --et-notification-message-opacity {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0.65;
+  }
+
+  @property --et-notification-progress-bar-height {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 3px;
+  }
+
+  @property --et-notification-icon-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  .et-notification {
+    display: block;
+    pointer-events: all;
+    /* Fades under a swipe. Set inline by the gesture, so the leave/enter rules — which are more
+       specific — still win when the notification animates in or out. */
+    opacity: var(--_et-notification-swipe-opacity, 1);
+    background: var(--et-surface-background-solid, #fff);
+    color: var(--et-surface-color-solid, #111);
+    border-radius: var(--et-notification-border-radius);
+    padding: var(--et-notification-padding);
+    box-shadow: var(--et-notification-shadow);
+    min-width: var(--et-notification-min-width);
+    max-width: var(--et-notification-max-width);
+    border-inline-start: var(--et-notification-border-width) solid var(--et-theme-color-primary-solid, #d1d5db);
+    font-family: inherit;
+    font-size: var(--et-notification-font-size);
+    line-height: var(--et-notification-line-height);
+
+    /* The notification slides in from the inline edge its stack is docked to. `translateX` is
+       physical, so the offset carries a sign that flips with the writing direction — same pattern as
+       the side-sheet strategies. `--_et-notification-slide-x` picks the edge, the sign picks the
+       physical axis for it. */
+    --_et-notification-slide-x: 1rem;
+    --_et-notification-dir-sign: 1;
+
+    &:dir(rtl) {
+      --_et-notification-dir-sign: -1;
+    }
+
+    &.et-animation-enter-from {
+      opacity: 0;
+      transform: translateX(calc(var(--_et-notification-slide-x) * var(--_et-notification-dir-sign)));
+    }
+
+    &.et-animation-enter-active {
+      transition:
+        opacity 200ms ease,
+        transform 200ms ease;
+    }
+
+    &.et-animation-leave-active {
+      transition:
+        opacity 200ms ease,
+        transform 200ms ease;
+    }
+
+    &.et-animation-leave-to {
+      opacity: 0;
+      transform: translateX(calc(var(--_et-notification-slide-x) * var(--_et-notification-dir-sign)));
+    }
+  }
+
+  /* A notification thrown away by the swipe gesture leaves in the direction it was thrown, from
+     wherever the finger left it. `!important` is what lets the leave transition override the
+     gesture's own inline transform — the same mechanism the sheet overlays use. */
+  .et-notification[data-swiped-away] {
+    &.et-animation-leave-to {
+      transform: translateX(var(--_et-notification-swipe-exit-x, 0px)) !important;
+      opacity: 0;
+    }
+  }
+
+  /* start positions: slide in/out from the inline-start edge */
+  .et-notification-stack[data-position='bottom-start'] .et-notification,
+  .et-notification-stack[data-position='top-start'] .et-notification {
+    --_et-notification-slide-x: -1rem;
+  }
+
+  /* bottom-center: slide in/out upward from below */
+  .et-notification-stack[data-position='bottom-center'] .et-notification {
+    &.et-animation-enter-from,
+    &.et-animation-leave-to {
+      transform: translateY(1rem);
+    }
+  }
+
+  /* top-center: slide in/out downward from above */
+  .et-notification-stack[data-position='top-center'] .et-notification {
+    &.et-animation-enter-from,
+    &.et-animation-leave-to {
+      transform: translateY(-1rem);
+    }
+  }
+
+  .et-notification-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--et-notification-gap);
+  }
+
+  .et-notification-spinner {
+    flex-shrink: 0;
+    --et-spinner-color: var(--et-theme-color-primary-solid, currentColor);
+  }
+
+  /* The status glyph reads in the status color, which the manager's `statusColorMapping` resolves —
+     the same source the spinner and the accent border use. */
+  .et-notification-icon {
+    flex-shrink: 0;
+    width: var(--et-notification-icon-size);
+    height: var(--et-notification-icon-size);
+    color: var(--et-theme-color-primary-solid, currentColor);
+  }
+
+  .et-notification-title {
+    flex: 1;
+    font-weight: var(--et-notification-title-font-weight);
+    font-size: var(--et-notification-font-size);
+    line-height: var(--et-notification-line-height);
+  }
+
+  .et-notification-dismiss-btn {
+    flex-shrink: 0;
+    opacity: 0.4;
+    transition: opacity 120ms ease;
+
+    @media (hover: hover) {
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+
+  .et-notification-message {
+    margin: 0.4rem 0 0;
+    color: var(--et-surface-color-muted-solid, inherit);
+    opacity: var(--et-notification-message-opacity);
+    font-size: var(--et-notification-message-font-size);
+    line-height: var(--et-notification-message-line-height);
+  }
+
+  .et-notification-progress-bar {
+    margin-top: 0.8rem;
+    color: var(--et-theme-color-primary-solid, currentColor);
+    --et-progress-bar-height: var(--et-notification-progress-bar-height);
+  }
+
+  .et-notification-footer {
+    display: flex;
+    align-items: center;
+    gap: 1.2rem;
+    margin-top: 0.8rem;
+  }
+
+  /* The quieter half of an action pair: same shape as the primary action, neutral instead of accented.
+     Scoped through `.et-notification` to outweigh the text button's own `color` — the two stylesheets
+     share a layer, so their relative order depends on which component renders first. */
+  .et-notification .et-notification-secondary-action {
+    color: var(--et-surface-color-muted-solid, inherit);
+  }
+
+  /* The stack goes edge to edge below this width (see `notification-stack.component.css`), so the card
+     drops the bounds that would keep it a corner card and fills it. */
+  @media (max-width: 480px) {
+    .et-notification {
+      min-width: 0;
+      max-width: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-notification {
+      &.et-animation-enter-from {
+        transform: none;
+      }
+
+      &.et-animation-enter-active,
+      &.et-animation-leave-active {
+        transition: opacity 200ms ease;
+      }
+
+      &.et-animation-leave-to {
+        transform: none;
+      }
+    }
+  }
+}

package/src/lib/overlay/alert-dialog/alert-dialog.component.css

@@ -0,0 +1,45 @@
+@layer components {
+  @property --et-alert-dialog-title-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 18px;
+  }
+
+  @property --et-alert-dialog-message-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  @property --et-alert-dialog-actions-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  .et-alert-dialog {
+    --et-overlay-body-min-block-size: 0px;
+
+    color: var(--et-surface-color-solid, currentColor);
+
+    .et-alert-dialog-title {
+      margin: 0;
+      font-size: var(--et-alert-dialog-title-font-size);
+      font-weight: 600;
+    }
+
+    .et-alert-dialog-message {
+      margin: 0;
+      font-size: var(--et-alert-dialog-message-font-size);
+      color: var(--et-surface-color-muted-solid, currentColor);
+      white-space: pre-line;
+    }
+
+    .et-alert-dialog-actions {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      gap: var(--et-alert-dialog-actions-gap);
+    }
+  }
+}

package/src/lib/overlay/floating-panel-styles.component.css

@@ -0,0 +1,71 @@
+@layer components {
+  .et-overlay.et-with-default-animation.et-floating-panel {
+    &.et-animation-enter-from,
+    &.et-animation-leave-to {
+      opacity: 0;
+    }
+
+    &.et-animation-enter-active {
+      transition:
+        transform var(--et-floating-panel-enter-duration, 200ms) ease,
+        opacity var(--et-floating-panel-enter-duration, 200ms) ease;
+    }
+
+    &.et-animation-leave-active {
+      transition:
+        transform var(--et-floating-panel-leave-duration, 140ms) ease,
+        opacity var(--et-floating-panel-leave-duration, 140ms) ease;
+    }
+  }
+
+  .et-floating-panel[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(var(--et-floating-panel-distance, 0.4rem)) !important;
+    }
+  }
+
+  .et-floating-panel[data-overlay-placement^='right'] {
+    &.et-animation-enter-from,
+    &.et-animation-leave-to {
+      transform: translate3d(var(--et-overlay-anchored-x, 0px), var(--et-overlay-anchored-y, 0px), 0)
+        translateX(calc(var(--et-floating-panel-distance, 0.4rem) * -1)) !important;
+    }
+  }
+
+  .et-floating-panel[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(calc(var(--et-floating-panel-distance, 0.4rem) * -1)) !important;
+    }
+  }
+
+  .et-floating-panel[data-overlay-placement^='left'] {
+    &.et-animation-enter-from,
+    &.et-animation-leave-to {
+      transform: translate3d(var(--et-overlay-anchored-x, 0px), var(--et-overlay-anchored-y, 0px), 0)
+        translateX(var(--et-floating-panel-distance, 0.4rem)) !important;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-overlay.et-with-default-animation.et-floating-panel {
+      &.et-animation-enter-active {
+        transition: opacity var(--et-floating-panel-enter-duration, 200ms) ease;
+      }
+
+      &.et-animation-leave-active {
+        transition: opacity var(--et-floating-panel-leave-duration, 140ms) ease;
+      }
+    }
+
+    .et-floating-panel[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;
+      }
+    }
+  }
+}

package/src/lib/overlay/floating-tip-styles.component.css

@@ -0,0 +1,78 @@
+@layer components {
+  .et-overlay.et-overlay--tooltip,
+  .et-overlay.et-overlay--toggletip {
+    overflow: visible;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .et-overlay--tooltip,
+  .et-overlay--toggletip {
+    --et-floating-panel-enter-duration: 200ms;
+    --et-floating-panel-leave-duration: 140ms;
+    --et-floating-panel-distance: 0.45rem;
+  }
+
+  .et-tooltip,
+  .et-toggletip {
+    --_et-floating-tip-background: var(--et-surface-background-solid, rgb(32 32 32));
+    --_et-floating-tip-color: var(--et-surface-color-solid, rgb(244 244 245));
+    --_et-floating-tip-border: var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+    --_et-floating-tip-shadow: var(
+      --et-anchored-panel-shadow,
+      0 10px 24px rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.16)
+    );
+    --_et-floating-tip-radius: 16px;
+    --_et-floating-tip-max-width: min(34ch, calc(100vw - 24px));
+
+    position: relative;
+    display: block;
+    inline-size: max-content;
+    max-inline-size: var(--_et-floating-tip-max-width);
+    color: var(--_et-floating-tip-color);
+    font-family: var(--et-font-family, inherit);
+  }
+
+  .et-tooltip__surface,
+  .et-toggletip__surface {
+    position: relative;
+    z-index: 1;
+    display: block;
+    max-inline-size: var(--_et-floating-tip-max-width);
+    border-radius: var(--_et-floating-tip-radius);
+    border: 1px solid var(--_et-floating-tip-border);
+    background: var(--_et-floating-tip-background);
+    color: var(--_et-floating-tip-color);
+    box-shadow: var(--_et-floating-tip-shadow);
+  }
+
+  .et-tooltip__content,
+  .et-toggletip__content {
+    position: relative;
+    z-index: 1;
+    display: grid;
+
+    :where(p) {
+      margin: 0;
+      opacity: 0.88;
+    }
+
+    :where(a) {
+      color: inherit;
+    }
+
+    :where(strong) {
+      display: block;
+      font-size: 14px;
+      font-weight: 700;
+      line-height: 18px;
+      letter-spacing: -0.02em;
+      opacity: 1;
+    }
+  }
+
+  .et-tooltip__text,
+  .et-toggletip__text {
+    margin: 0;
+  }
+}

package/src/lib/overlay/overlay-container.component.css

@@ -0,0 +1,167 @@
+@layer components {
+  .et-overlay {
+    --et-overlay-padding-inline: 16px;
+    --et-overlay-padding-block: 16px;
+
+    --et-overlay-header-padding-block-end: 16px;
+    --et-overlay-body-padding-block: 0;
+    --et-overlay-footer-padding-block-start: 16px;
+
+    --et-overlay-body-divider-color: var(--et-surface-border-solid, #565656);
+
+    --et-overlay-body-min-block-size: 100px;
+
+    /* Default pane chrome for the "boxed" overlay kinds (dialog / anchored-dialog / sheets).
+     Surface-themed so the pane matches whatever elevation the container forces onto itself, with
+     a static fallback for theme-less setups. Kept as tokens so a specific overlay (e.g. the RTE
+     link editor, the date-picker sheet) can override radius/border per instance. Anchored/centered
+     panes are deliberately excluded — their content paints its own surface. */
+    --et-overlay-surface-background: var(--et-surface-background-solid, rgb(32 32 32));
+    --et-overlay-surface-color: var(--et-surface-color-solid, rgb(244 244 245));
+    --et-overlay-surface-border-color: var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+    --et-overlay-surface-border-width: 0.1rem;
+    --_et-overlay-radius: var(--et-overlay-radius, 1.6rem);
+
+    position: relative;
+    display: grid;
+    grid-template-rows: minmax(0, 1fr);
+    overflow: hidden;
+    pointer-events: all;
+    outline: none;
+    box-sizing: border-box;
+
+    /* the content root is whichever child isn't the (optional) drag handle or arrow, so this
+     still resolves correctly regardless of which of those are present */
+    > :not(.et-overlay-container-drag-handle):not(.et-overlay-arrow) {
+      overflow: auto;
+      border-radius: inherit;
+
+      &:not(.et-overlay-main) {
+        display: grid;
+      }
+
+      &:not(.et-overlay-main):has(.et-overlay-router-outlet-host) {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-rows: minmax(0, 1fr);
+      }
+
+      &:not(.et-overlay-main):has(.et-overlay-sidebar--visible) {
+        grid-template-columns: auto minmax(0, 1fr);
+      }
+    }
+
+    &.et-overlay--anchored,
+    &.et-overlay--centered {
+      overflow: visible;
+      background: transparent;
+
+      > :not(.et-overlay-container-drag-handle):not(.et-overlay-arrow) {
+        display: block;
+        overflow: visible;
+      }
+    }
+
+    /* Boxed overlays get a themed surface on the pane itself; content inherits the radius via the
+     content-root rule above, and the anchored-dialog arrow reads the pane's real background/border
+     so it matches. */
+    &.et-overlay--dialog,
+    &.et-overlay--anchored-dialog,
+    &.et-overlay--full-screen-dialog,
+    &.et-overlay--bottom-sheet,
+    &.et-overlay--top-sheet,
+    &.et-overlay--left-sheet,
+    &.et-overlay--right-sheet {
+      background-color: var(--et-overlay-surface-background);
+      color: var(--et-overlay-surface-color);
+    }
+
+    &.et-overlay--dialog,
+    &.et-overlay--anchored-dialog {
+      border: var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);
+      border-radius: var(--_et-overlay-radius);
+    }
+
+    /* Anchored popover sits tight against its trigger, so a slightly smaller radius reads better. */
+    &.et-overlay--anchored-dialog {
+      --_et-overlay-radius: var(--et-overlay-radius, 1.2rem);
+    }
+
+    /* Sheets are docked to one viewport edge: border everything but the docked edge and round only
+     the two exposed corners. */
+    &.et-overlay--bottom-sheet {
+      border: var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);
+      border-block-end: none;
+      border-start-start-radius: var(--_et-overlay-radius);
+      border-start-end-radius: var(--_et-overlay-radius);
+    }
+
+    &.et-overlay--top-sheet {
+      border: var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);
+      border-block-start: none;
+      border-end-start-radius: var(--_et-overlay-radius);
+      border-end-end-radius: var(--_et-overlay-radius);
+    }
+
+    /* Side sheets span the full viewport height, so their block edges sit flush against the top and
+     bottom of the screen — border only the exposed inner edge. */
+    &.et-overlay--left-sheet {
+      border-inline-end: var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);
+      border-start-end-radius: var(--_et-overlay-radius);
+      border-end-end-radius: var(--_et-overlay-radius);
+    }
+
+    &.et-overlay--right-sheet {
+      border-inline-start: var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);
+      border-start-start-radius: var(--_et-overlay-radius);
+      border-end-start-radius: var(--_et-overlay-radius);
+    }
+
+    &.et-overlay--bottom-sheet:has(> .et-overlay-container-drag-handle) {
+      grid-template-rows: auto minmax(0, 1fr);
+    }
+
+    &.et-overlay--bottom-sheet .et-overlay-container-drag-handle {
+      display: flex;
+    }
+
+    &:has(.et-overlay-main) {
+      overflow: visible;
+    }
+  }
+
+  .et-overlay-container-drag-handle {
+    block-size: var(--_et-overlay-drag-handle-block-size);
+    margin-block: var(--_et-overlay-drag-handle-block-margin);
+    display: none;
+    justify-content: center;
+
+    &::before {
+      content: '';
+      position: static;
+      inline-size: var(--_et-overlay-drag-handle-inline-size);
+      block-size: var(--_et-overlay-drag-handle-block-size);
+      background-color: var(--_et-overlay-drag-handle-color);
+      border-radius: var(--_et-overlay-drag-handle-radius);
+    }
+  }
+
+  .et-overlay-runtime-backdrop {
+    --et-overlay-backdrop-color: rgb(var(--et-scrim-color-rgb, 0 0 0) / 0.32);
+
+    background-color: var(--et-overlay-backdrop-color);
+    opacity: 0;
+    transition: opacity 200ms linear;
+
+    &.et-overlay-backdrop--visible {
+      opacity: 1;
+    }
+  }
+
+  .et-overlay-backdrop--hidden {
+    display: none !important;
+  }
+
+  .et-force-invisible {
+    visibility: hidden !important;
+  }
+}