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

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

@@ -0,0 +1,52 @@
+@layer components {
+  et-cascader {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex: 1;
+    min-inline-size: 0;
+    color: inherit;
+
+    .et-cascader-trigger {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      flex: 1;
+      min-inline-size: 0;
+      cursor: pointer;
+      outline: none;
+    }
+
+    &[data-disabled] .et-cascader-trigger {
+      cursor: not-allowed;
+    }
+
+    &[data-readonly] .et-cascader-trigger {
+      cursor: default;
+    }
+
+    .et-cascader-value {
+      flex: 1;
+      min-inline-size: 0;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      color: inherit;
+
+      &[data-placeholder] {
+        color: var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 46%, transparent));
+      }
+    }
+
+    &[data-mixed] .et-cascader-value {
+      font-style: italic;
+      color: color-mix(in srgb, currentColor 72%, transparent);
+    }
+  }
+
+  /* outside the `et-cascader` block on purpose: the chevron renders in the form field's suffix slot,
+     which is not a descendant of the host */
+  .et-cascader-arrow .et-icon {
+    rotate: 180deg;
+  }
+}

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

@@ -0,0 +1,247 @@
+@layer components {
+  @property --et-checkbox-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 20px;
+  }
+
+  @property --et-checkbox-border-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
+  @property --et-checkbox-border-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 2px;
+  }
+
+  @property --et-checkbox-transition-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 150ms;
+  }
+
+  @property --et-checkbox-opacity-disabled {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0.5;
+  }
+
+  et-checkbox {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+
+    /* view-only: keeps the normal look, drops the interactive affordance (distinct from
+       the dimmed disabled state) */
+    &[data-readonly] {
+      cursor: default;
+    }
+    border-radius: var(--et-checkbox-border-radius);
+    /* Transitions live under `&[data-can-animate]` (added after first render) so nothing animates
+       on mount — otherwise `outline-color` transitions from its resolved value and the focus ring
+       flashes briefly on first paint. */
+
+    &[aria-disabled='true'] {
+      opacity: var(--et-checkbox-opacity-disabled);
+      pointer-events: none;
+      cursor: default;
+    }
+
+    .et-checkbox-box {
+      position: relative;
+      display: grid;
+      place-items: center;
+      width: var(--et-checkbox-size);
+      height: var(--et-checkbox-size);
+      border: var(--et-checkbox-border-width) solid var(--et-surface-border-solid, currentColor);
+      border-radius: var(--et-checkbox-border-radius);
+    }
+
+    /* hover-capable pointers only — on touch, :hover sticks after a tap.
+       Checked/mixed are excluded: their border is the theme color, and this rule outweighs the
+       `&[aria-checked='true']` block below on specificity, so without the exclusion a checked box
+       would flip to the neutral hover border. */
+    @media (hover: hover) {
+      &:hover:not([aria-disabled='true']):not([data-readonly]):not([aria-checked='true']):not([aria-checked='mixed'])
+        .et-checkbox-box,
+      :where(et-choice-field:has(.et-choice-field-label-area:hover))
+        &:not([aria-disabled='true']):not([data-readonly]):not([aria-checked='true']):not([aria-checked='mixed'])
+        .et-checkbox-box {
+        border-color: var(--et-surface-interaction-hover-solid, currentColor);
+      }
+    }
+
+    :where(et-choice-field[data-error]) &:not([aria-disabled='true']) .et-checkbox-box {
+      border-color: var(--et-theme-color-primary-solid);
+    }
+
+    @media (hover: hover) {
+      :where(et-choice-field[data-error]) &:hover:not([aria-disabled='true']):not([data-readonly]) .et-checkbox-box,
+      :where(et-choice-field[data-error]:has(.et-choice-field-label-area:hover))
+        &:not([aria-disabled='true']):not([data-readonly])
+        .et-checkbox-box {
+        border-color: var(--et-theme-color-primary-solid);
+      }
+    }
+
+    &:focus-visible:not([aria-checked='true']):not([aria-checked='mixed']) {
+      --_et-focus-ring-color: var(--et-surface-color-solid, currentColor);
+    }
+
+    &:focus-visible:not([aria-checked='true']):not([aria-checked='mixed']) .et-checkbox-box {
+      border-color: var(--et-surface-color-solid, currentColor);
+    }
+
+    &:focus-visible:is([aria-checked='true'], [aria-checked='mixed']) .et-checkbox-box {
+      border-color: var(--et-theme-color-primary-solid);
+    }
+
+    et-choice-field[data-error] &:focus-visible:not([aria-checked='true']):not([aria-checked='mixed']) {
+      --_et-focus-ring-color: var(--et-theme-color-primary-solid);
+    }
+
+    et-choice-field[data-error]
+      &:focus-visible:not([aria-checked='true']):not([aria-checked='mixed'])
+      .et-checkbox-box {
+      border-color: var(--et-theme-color-primary-solid);
+    }
+
+    /* Inside a card, focus is answered by the panel's accent ring and border. The plain variant's neutral
+       box border would sit inside that ring in a different colour, reading as two signals for one state —
+       so the box follows the accent here, the way `et-radio`'s circle does in the same preset. Repeats the
+       `:not()` guards above to match their weight, then wins on source order. */
+    :where(et-choice-field[data-variant='card'])
+      &:focus-visible:not([aria-checked='true']):not([aria-checked='mixed'])
+      .et-checkbox-box {
+      border-color: var(--et-theme-color-primary-solid);
+    }
+
+    &:active:not([aria-disabled='true']):not([data-readonly]):not([aria-checked='true']):not([aria-checked='mixed'])
+      .et-checkbox-box,
+    &.et-focus-ring--active:not([aria-disabled='true']):not([data-readonly]):not([aria-checked='true']):not(
+        [aria-checked='mixed']
+      )
+      .et-checkbox-box,
+    :where(et-choice-field:has(.et-choice-field-label-area:active))
+      &:not([aria-disabled='true']):not([data-readonly]):not([aria-checked='true']):not([aria-checked='mixed'])
+      .et-checkbox-box {
+      border-color: var(--et-surface-interaction-hover-solid, currentColor);
+      transform: scale(0.95);
+    }
+
+    &:active:not([aria-disabled='true']):not([data-readonly]):is([aria-checked='true'], [aria-checked='mixed'])
+      .et-checkbox-box,
+    &.et-focus-ring--active:not([aria-disabled='true']):not([data-readonly]):is(
+        [aria-checked='true'],
+        [aria-checked='mixed']
+      )
+      .et-checkbox-box,
+    :where(et-choice-field:has(.et-choice-field-label-area:active))
+      &:not([aria-disabled='true']):not([data-readonly]):is([aria-checked='true'], [aria-checked='mixed'])
+      .et-checkbox-box {
+      transform: scale(0.95);
+    }
+
+    .et-checkbox-checkmark {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      color: var(--et-theme-color-on-primary-solid, white);
+      opacity: 0;
+    }
+
+    .et-checkbox-checkmark-path {
+      stroke-dasharray: 18;
+      stroke-dashoffset: 18;
+    }
+
+    .et-checkbox-indeterminate {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      color: var(--et-theme-color-on-primary-solid, white);
+      opacity: 0;
+    }
+
+    .et-checkbox-indeterminate-path {
+      stroke-dasharray: 8;
+      stroke-dashoffset: 8;
+    }
+
+    &[aria-checked='true'] {
+      .et-checkbox-box {
+        background-color: var(--et-theme-color-primary-solid, currentColor);
+        border-color: var(--et-theme-color-primary-solid, currentColor);
+      }
+
+      .et-checkbox-checkmark {
+        opacity: 1;
+      }
+
+      .et-checkbox-checkmark-path {
+        stroke-dashoffset: 0;
+      }
+    }
+
+    &[aria-checked='mixed'] {
+      .et-checkbox-box {
+        background-color: var(--et-theme-color-primary-solid, currentColor);
+        border-color: var(--et-theme-color-primary-solid, currentColor);
+      }
+
+      .et-checkbox-indeterminate {
+        opacity: 1;
+      }
+
+      .et-checkbox-indeterminate-path {
+        stroke-dashoffset: 0;
+      }
+    }
+
+    &[data-can-animate] {
+      transition:
+        opacity var(--et-checkbox-transition-duration) ease,
+        outline-color var(--et-checkbox-transition-duration) ease;
+
+      .et-checkbox-box {
+        transition:
+          background-color var(--et-checkbox-transition-duration) ease,
+          border-color var(--et-checkbox-transition-duration) ease,
+          transform var(--et-checkbox-transition-duration) ease;
+      }
+
+      .et-checkbox-checkmark {
+        transition: opacity 0s calc(var(--et-checkbox-transition-duration) * 1.5);
+      }
+
+      .et-checkbox-checkmark-path {
+        transition: stroke-dashoffset calc(var(--et-checkbox-transition-duration) * 1.5) ease;
+      }
+
+      .et-checkbox-indeterminate {
+        transition: opacity 0s calc(var(--et-checkbox-transition-duration) * 1.5);
+      }
+
+      .et-checkbox-indeterminate-path {
+        transition: stroke-dashoffset calc(var(--et-checkbox-transition-duration) * 1.5) ease;
+      }
+
+      &[aria-checked='true'] {
+        .et-checkbox-checkmark {
+          transition: opacity 0s 0s;
+        }
+      }
+
+      &[aria-checked='mixed'] {
+        .et-checkbox-indeterminate {
+          transition: opacity 0s 0s;
+        }
+      }
+    }
+  }
+}

package/src/lib/forms/choice-field/choice-field-card-styles.component.css

@@ -0,0 +1,59 @@
+@layer components {
+  et-choice-field:where([data-variant='card']) {
+    width: auto;
+
+    /* The panel dims as one unit while disabled, so the control must not dim a second time on top of it. */
+    --et-checkbox-opacity-disabled: 1;
+    --et-switch-opacity-disabled: 1;
+
+    .et-choice-field-control {
+      position: relative;
+
+      &:where(:has([aria-disabled='true'])) {
+        cursor: not-allowed;
+        opacity: var(--et-selection-card-disabled-opacity);
+      }
+    }
+
+    /* The control's own hit area is stretched over the card instead of forwarding clicks, which would
+       double-toggle through the label. The inset is negative by the border width because `inset` resolves
+       against the padding box, which leaves the border ring dead. */
+    .et-choice-field-control-slot > *::after {
+      content: '';
+      position: absolute;
+      inset: calc(-1 * var(--et-selection-card-border-width));
+      /* so the hit area is the card's shape, not a rectangle poking out past its rounded corners */
+      border-radius: var(--et-selection-card-border-radius);
+    }
+
+    /* Lifts interactive content above the stretched hit area, or a click on it toggles the control. */
+    :is(.et-selection-card-content, [etSelectionCardTrailing]) :is(a, button, input, select, textarea, [tabindex]),
+    [etSelectionCardTrailing]:is(a, button, input, select, textarea, [tabindex]) {
+      position: relative;
+      z-index: 1;
+    }
+
+    /* `outline-color`, not `outline: none`: `et-checkbox` transitions `outline-color`, so resetting the
+       shorthand flashes a `currentColor` ring on blur. */
+    .et-choice-field-control-slot > :focus-visible {
+      outline-color: transparent;
+    }
+
+    /* Inside `:where()` so the disabled label colour still wins. */
+    .et-choice-field-label-area {
+      color: var(--et-surface-color-muted-solid, currentColor);
+    }
+
+    &:where(:has(:is([aria-checked='true'], [aria-checked='mixed']))) .et-choice-field-label-area {
+      color: var(--et-surface-color-solid, currentColor);
+    }
+
+    /* Opacity on top of the shared border/background transition, for the one-unit dim above. */
+    &[data-can-animate] .et-choice-field-control {
+      transition:
+        border-color var(--et-selection-card-transition-duration) ease,
+        background-color var(--et-selection-card-transition-duration) ease,
+        opacity var(--et-selection-card-transition-duration) ease;
+    }
+  }
+}

package/src/lib/forms/choice-field/choice-field.component.css

@@ -0,0 +1,186 @@
+@layer components {
+  @property --et-choice-field-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  @property --et-choice-field-support-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 180ms;
+  }
+
+  @property --et-choice-field-label-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  @property --et-choice-field-error-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-choice-field-warning-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-choice-field-hint-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  et-choice-field {
+    display: flex;
+    flex-direction: column;
+    width: fit-content;
+    gap: 4px;
+    color: var(--et-surface-color-solid, currentColor);
+
+    --et-form-support-duration: var(--et-choice-field-support-duration);
+    --et-form-support-error-font-size: var(--et-choice-field-error-font-size);
+    --et-form-support-warning-font-size: var(--et-choice-field-warning-font-size);
+    --et-form-support-hint-font-size: var(--et-choice-field-hint-font-size);
+
+    .et-choice-field-control {
+      display: flex;
+      align-items: center;
+      gap: var(--et-choice-field-gap);
+    }
+
+    /* The row carries the state cursor, not the control: a disabled checkbox/radio/switch sets
+       `pointer-events: none` on itself, so its own cursor never reaches the pointer. */
+    &:where(:has([aria-disabled='true'])) .et-choice-field-control {
+      cursor: not-allowed;
+    }
+
+    &:where(:has([data-readonly])) .et-choice-field-control {
+      cursor: default;
+    }
+
+    .et-choice-field-control-slot {
+      flex: 0 0 auto;
+    }
+
+    &:where([data-size='sm']) {
+      --et-choice-field-label-font-size: 12px;
+
+      et-checkbox {
+        --et-checkbox-size: 16px;
+      }
+
+      et-switch {
+        --et-switch-track-width: 34px;
+        --et-switch-track-height: 19px;
+        --et-switch-thumb-size: 13px;
+      }
+    }
+
+    &:where([data-size='lg']) {
+      --et-choice-field-label-font-size: 16px;
+
+      et-checkbox {
+        --et-checkbox-size: 24px;
+      }
+
+      et-switch {
+        --et-switch-track-width: 46px;
+        --et-switch-track-height: 25px;
+        --et-switch-thumb-size: 19px;
+      }
+    }
+
+    .et-choice-field-label-area {
+      display: flex;
+      align-items: baseline;
+      font-size: var(--et-choice-field-label-font-size);
+      font-weight: 500;
+      line-height: 1.2;
+      letter-spacing: -0.01em;
+      color: var(--et-surface-color-muted-solid, currentColor);
+      cursor: pointer;
+      -webkit-user-select: none;
+      user-select: none;
+      min-inline-size: 0;
+      flex: 1;
+      overflow: hidden;
+      transition:
+        color 150ms ease,
+        opacity 150ms ease;
+
+      et-label {
+        display: inline;
+        min-inline-size: 0;
+      }
+
+      &:where(:has(et-description)) {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 2px;
+      }
+
+      et-description {
+        font-weight: 400;
+        letter-spacing: normal;
+      }
+    }
+
+    /* view-only controls keep the resting look — no hover/active brighten (matches the
+       [data-readonly] gating inside checkbox/radio/switch) */
+    @media (hover: hover) {
+      &:where(:has(.et-choice-field-control:hover)):where(:not(:has([data-readonly]))) .et-choice-field-label-area {
+        color: var(--et-surface-color-solid, currentColor);
+      }
+    }
+
+    &:where(:has(.et-choice-field-control:active)):where(:not(:has([data-readonly]))) .et-choice-field-label-area {
+      color: var(--et-surface-color-solid, currentColor);
+    }
+
+    &:where(:has([data-readonly])) .et-choice-field-label-area {
+      cursor: default;
+    }
+
+    &:where(:has(:focus-visible)) .et-choice-field-label-area {
+      color: var(--et-surface-color-solid, currentColor);
+    }
+
+    &:has([aria-disabled='true']) .et-choice-field-label-area,
+    &:has(:disabled) .et-choice-field-label-area {
+      cursor: not-allowed;
+      color: var(--et-surface-interaction-disabled-solid, currentColor);
+      pointer-events: none;
+    }
+
+    &:has([aria-disabled='true']) .et-form-support-hint,
+    &:has(:disabled) .et-form-support-hint {
+      color: var(--et-surface-interaction-disabled-solid, currentColor);
+    }
+
+    .et-form-support {
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
+    .et-form-support-errors,
+    .et-form-support-warnings,
+    .et-form-support-hint {
+      padding-block-start: 0;
+      padding-inline-start: calc(var(--et-choice-field-gap) + var(--et-checkbox-size, 20px));
+    }
+
+    /* Must stay after the rule above: same specificity, so source order is what makes it win. */
+    &:where([data-variant='card']) {
+      .et-form-support-errors,
+      .et-form-support-warnings,
+      .et-form-support-hint {
+        padding-inline-start: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,108 @@
+@layer components {
+  @property --et-color-input-swatch-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 20px;
+  }
+
+  @property --et-color-input-swatch-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
+  et-color-input {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    min-inline-size: 0;
+    color: inherit;
+  }
+
+  .et-color-input-trigger {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: 8px;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    &[data-readonly] {
+      cursor: default;
+    }
+  }
+
+  .et-color-input-swatch {
+    --_et-color-input-checker: color-mix(in srgb, currentColor 18%, transparent);
+    --_et-color-input-swatch-color: transparent;
+
+    inline-size: var(--et-color-input-swatch-size);
+    block-size: var(--et-color-input-swatch-size);
+    border-radius: var(--et-color-input-swatch-radius);
+    border: 1px solid var(--et-surface-border-solid, currentColor);
+    flex: none;
+    background-image:
+      linear-gradient(var(--_et-color-input-swatch-color), var(--_et-color-input-swatch-color)),
+      linear-gradient(
+        45deg,
+        var(--_et-color-input-checker) 25%,
+        transparent 25% 75%,
+        var(--_et-color-input-checker) 75%
+      ),
+      linear-gradient(
+        45deg,
+        var(--_et-color-input-checker) 25%,
+        transparent 25% 75%,
+        var(--_et-color-input-checker) 75%
+      );
+    background-size:
+      100% 100%,
+      6px 6px,
+      6px 6px;
+    background-position:
+      0 0,
+      0 0,
+      3px 3px;
+  }
+
+  .et-color-input-value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .et-color-input-trigger:focus-visible {
+    outline: none;
+
+    .et-color-input-swatch {
+      outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+      outline-offset: 2px;
+    }
+  }
+
+  et-color-input[data-mixed] .et-color-input-swatch {
+    background: linear-gradient(
+      to top right,
+      transparent calc(50% - 1px),
+      color-mix(in srgb, currentColor 25%, transparent) calc(50% - 1px),
+      color-mix(in srgb, currentColor 25%, transparent) calc(50% + 1px),
+      transparent calc(50% + 1px)
+    );
+  }
+
+  et-color-input[data-mixed] .et-color-input-value {
+    font-style: italic;
+    color: color-mix(in srgb, currentColor 72%, transparent);
+  }
+}