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

package/src/lib/forms/otp-input/otp-input.component.css

@@ -0,0 +1,194 @@
+@layer components {
+  @keyframes et-otp-input-caret-blink {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @property --et-otp-input-segment-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 44px;
+  }
+
+  @property --et-otp-input-segment-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  @property --et-otp-input-segment-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  @property --et-otp-input-label-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 13px;
+  }
+
+  @property --et-otp-input-support-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 180ms;
+  }
+
+  @property --et-otp-input-error-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-otp-input-warning-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-otp-input-hint-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  et-otp-input {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 6px;
+    color: var(--et-surface-color-solid, currentColor);
+
+    --et-form-support-duration: var(--et-otp-input-support-duration);
+    --et-form-support-error-font-size: var(--et-otp-input-error-font-size);
+    --et-form-support-warning-font-size: var(--et-otp-input-warning-font-size);
+    --et-form-support-hint-font-size: var(--et-otp-input-hint-font-size);
+
+    > et-label {
+      font-size: var(--et-otp-input-label-font-size);
+      font-weight: 500;
+      line-height: 1.2;
+      letter-spacing: -0.01em;
+      color: var(--et-surface-color-muted-solid, currentColor);
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
+    .et-otp-input-field {
+      position: relative;
+      inline-size: fit-content;
+    }
+
+    .et-otp-input-segments {
+      display: flex;
+      gap: var(--et-otp-input-segment-gap);
+    }
+
+    .et-otp-input-segment {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: var(--et-otp-input-segment-size);
+      block-size: var(--et-otp-input-segment-size);
+      border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+      border-radius: var(--et-otp-input-segment-radius);
+      font-size: calc(var(--et-otp-input-segment-size) * 0.45);
+      font-variant-numeric: tabular-nums;
+      -webkit-user-select: none;
+      user-select: none;
+
+      &[data-caret] {
+        border-color: var(--et-theme-color-primary-solid, currentColor);
+        outline: 1px solid var(--et-theme-color-primary-solid, currentColor);
+        outline-offset: -1px;
+      }
+
+      .et-otp-input-segment-char {
+        display: block;
+      }
+
+      /* synthetic caret bar in the active empty segment */
+      .et-otp-input-caret {
+        inline-size: 2px;
+        block-size: 1.1em;
+        border-radius: 1px;
+        background: var(--et-theme-color-primary-solid, currentColor);
+        animation: et-otp-input-caret-blink 1.1s steps(2, jump-none) infinite;
+      }
+    }
+
+    /* the real input covers the segments invisibly — it carries focus, autofill and paste */
+    .et-otp-input-native {
+      position: absolute;
+      inset: 0;
+      inline-size: 100%;
+      block-size: 100%;
+      border: none;
+      outline: none;
+      padding: 0;
+      margin: 0;
+      background: transparent;
+      color: transparent;
+      caret-color: transparent;
+      /* 16px floors away the iOS focus zoom */
+      font-size: max(1em, 16px);
+
+      &::selection {
+        background: transparent;
+      }
+
+      /* nothing can be typed into a readonly code - an I-beam over the segments would say otherwise.
+         Before the disabled rule: a disabled input is :read-only too, and there not-allowed wins. */
+      &:read-only {
+        cursor: default;
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+      }
+    }
+
+    &[data-error] .et-otp-input-segment {
+      border-color: var(--et-theme-color-primary-solid, currentColor);
+    }
+
+    &:has(.et-otp-input-native:disabled) {
+      opacity: 0.4;
+
+      .et-otp-input-segment {
+        -webkit-user-select: none;
+        user-select: none;
+      }
+    }
+
+    &[data-can-animate] {
+      .et-otp-input-segment {
+        transition:
+          border-color 120ms ease,
+          outline-color 120ms ease;
+      }
+
+      /* typed characters pop in */
+      .et-otp-input-segment-char {
+        transition:
+          transform 140ms cubic-bezier(0.2, 1.4, 0.4, 1),
+          opacity 100ms ease;
+
+        @starting-style {
+          transform: scale(0.4);
+          opacity: 0;
+        }
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .et-otp-input-caret {
+        animation: none;
+      }
+    }
+  }
+}

package/src/lib/forms/phone-input/phone-input.component.css

@@ -0,0 +1,126 @@
+@layer components {
+  et-phone-input {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    min-inline-size: 0;
+    color: inherit;
+
+    .et-phone-input-country-trigger {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      border: none;
+      outline: none;
+      background: transparent;
+      font: inherit;
+      color: inherit;
+      padding: 0;
+      margin: 0;
+      cursor: pointer;
+      appearance: none;
+      white-space: nowrap;
+
+      &:disabled {
+        cursor: not-allowed;
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+        outline-offset: 2px;
+        border-radius: 4px;
+      }
+    }
+
+    /* the country panel cannot open while readonly */
+    &[data-readonly] .et-phone-input-country-trigger {
+      cursor: default;
+    }
+
+    .et-phone-input-country-flag {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .et-phone-input-dial-code {
+      color: var(--et-surface-color-muted-solid, currentColor);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .et-phone-input-field {
+      flex: 1;
+      min-inline-size: 0;
+      border: none;
+      outline: none;
+      background: transparent;
+      font: inherit;
+      color: inherit;
+      padding: 0;
+      caret-color: var(--et-theme-color-primary-solid, currentColor);
+      font-variant-numeric: tabular-nums;
+
+      &::placeholder {
+        color: color-mix(in srgb, currentColor 46%, transparent);
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+      }
+    }
+
+    /* an unresolved bulk-edit value reads as provisional — the mixedLabel placeholder sits
+       between committed text (full strength) and the regular placeholder (46%). Consumers
+       restyle via [data-mixed]. */
+    &[data-mixed] .et-phone-input-field::placeholder {
+      font-style: italic;
+      color: color-mix(in srgb, currentColor 72%, transparent);
+    }
+  }
+
+  /* panel content of the country picker (rendered in the overlay pane) */
+  .et-phone-input-country-panel {
+    /* a fixed width — with content-derived sizing, filtering would resize the panel
+       horizontally on every keystroke (the widest visible item keeps changing) */
+    inline-size: min(320px, calc(100vw - 24px));
+  }
+
+  /* the projected option content (flag, name, dial code) shares the option's label slot —
+     lay it out as a flex row so the pieces get breathing room */
+  .et-phone-input-country-panel .et-select-option-label {
+    display: flex;
+    align-items: center;
+    gap: var(--et-select-option-gap, 8px);
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  .et-phone-input-option-flag {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .et-phone-input-option-name {
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .et-phone-input-option-dial {
+    flex: none;
+    color: var(--et-surface-color-muted-solid, currentColor);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* light default sizing for custom flag art (etPhoneInputFlag) */
+  .et-phone-input-country-flag :is(img, svg),
+  .et-phone-input-option-flag :is(img, svg) {
+    display: block;
+    inline-size: 20px;
+    block-size: auto;
+  }
+}

package/src/lib/forms/rating/rating.component.css

@@ -0,0 +1,197 @@
+@layer components {
+  @property --et-rating-icon-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 24px;
+  }
+
+  @property --et-rating-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
+  @property --et-rating-label-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 13px;
+  }
+
+  @property --et-rating-support-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 180ms;
+  }
+
+  @property --et-rating-error-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-rating-warning-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-rating-hint-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  et-rating {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 6px;
+    color: var(--et-surface-color-solid, currentColor);
+    outline: none;
+
+    --et-form-support-duration: var(--et-rating-support-duration);
+    --et-form-support-error-font-size: var(--et-rating-error-font-size);
+    --et-form-support-warning-font-size: var(--et-rating-warning-font-size);
+    --et-form-support-hint-font-size: var(--et-rating-hint-font-size);
+
+    > et-label {
+      font-size: var(--et-rating-label-font-size);
+      font-weight: 500;
+      line-height: 1.2;
+      letter-spacing: -0.01em;
+      color: var(--et-surface-color-muted-solid, currentColor);
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
+    &:focus-visible .et-rating-icons {
+      outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+      outline-offset: 2px;
+      border-radius: 4px;
+    }
+
+    .et-rating-icons {
+      position: relative;
+      display: grid;
+      inline-size: fit-content;
+      /* icons sit edge-to-edge in a row, so only block-direction padding can grow the tap target
+         without one star stealing its neighbour's taps */
+      padding-block: max(0px, calc((44px - var(--et-rating-icon-size)) / 2));
+      cursor: pointer;
+      /* vertical page scrolling stays native; horizontal swipes rate */
+      touch-action: pan-y;
+      /* one clip width = one continuous fill motion (displayValue icons + crossed gaps). Declared
+         here rather than on the fill row so the base row can clip against the same edge. */
+      --_et-rating-fill-width: calc(
+        var(--_et-rating-fill-icons, 0) * var(--et-rating-icon-size) + var(--_et-rating-fill-gaps, 0) *
+          var(--et-rating-gap)
+      );
+    }
+
+    .et-rating-row {
+      display: flex;
+      align-items: center;
+      gap: var(--et-rating-gap);
+      grid-area: 1 / 1;
+    }
+
+    .et-rating-row--fill {
+      pointer-events: none;
+      clip-path: inset(0 calc(100% - var(--_et-rating-fill-width)) 0 0);
+
+      &:dir(rtl) {
+        clip-path: inset(0 0 0 calc(100% - var(--_et-rating-fill-width)));
+      }
+    }
+
+    &[data-readonly] {
+      .et-rating-icons {
+        cursor: default;
+      }
+    }
+
+    &[data-disabled] {
+      opacity: 0.4;
+
+      .et-rating-icons {
+        cursor: not-allowed;
+      }
+    }
+
+    .et-rating-icon {
+      position: relative;
+      display: flex;
+      inline-size: var(--et-rating-icon-size);
+      block-size: var(--et-rating-icon-size);
+      -webkit-user-select: none;
+      user-select: none;
+
+      .et-icon {
+        inline-size: 100%;
+        block-size: 100%;
+      }
+    }
+
+    .et-rating-icon-base {
+      color: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 32%, transparent);
+    }
+
+    .et-rating-icon-fill {
+      color: var(--et-theme-color-primary-solid, currentColor);
+    }
+
+    /* an unresolved bulk-edit rating fills nothing — the stars themselves become a dashed accent
+       outline (not a muted/grey one, which would read as disabled), so "provisional / values differ"
+       reads on the stars rather than on a rule under them. Same mark the switch parks its thumb in.
+       A hovered preview paints its solid fill over the top, so the pick being previewed still reads
+       as committed. Consumers restyle via [data-mixed]. */
+    &[data-mixed] {
+      /* A stroke is centred on its path, so the dashes stand half their width outside the star's
+         silhouette and fringe the solid fill a preview paints over them. Clipping the dashed row to
+         where the fill is not keeps each star either solid or dashed, never both. Matched on the base
+         icon so a custom icon template, which renders one row and no fill, is left alone. */
+      .et-rating-row:has(.et-rating-icon-base) {
+        clip-path: inset(0 0 0 var(--_et-rating-fill-width));
+
+        &:dir(rtl) {
+          clip-path: inset(0 var(--_et-rating-fill-width) 0 0);
+        }
+      }
+
+      .et-rating-icon-base {
+        color: var(--et-theme-color-primary-solid, currentColor);
+
+        /* Stroke widths are in the icon's own viewBox units, so the dash keeps its weight at every
+           --et-rating-icon-size rather than needing a knob per size. */
+        path {
+          fill: none;
+          stroke: currentColor;
+          stroke-width: 40;
+          stroke-dasharray: 48 34;
+          stroke-linejoin: round;
+        }
+      }
+    }
+
+    /* custom icon templates render per-step — expose the state for their own styling */
+    .et-rating-icon[data-state] {
+      color: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 32%, transparent);
+
+      &[data-state='full'],
+      &[data-state='half'] {
+        color: var(--et-theme-color-primary-solid, currentColor);
+      }
+    }
+
+    &[data-can-animate] {
+      .et-rating-row--fill {
+        transition: clip-path 160ms ease;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      &[data-can-animate] .et-rating-row--fill {
+        transition: none;
+      }
+    }
+  }
+}