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

package/src/lib/forms/selection-card-styles.component.css

@@ -0,0 +1,136 @@
+@layer components {
+  @property --et-selection-card-padding {
+    syntax: '*';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  @property --et-selection-card-border-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 10px;
+  }
+
+  @property --et-selection-card-border-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 1px;
+  }
+
+  @property --et-selection-card-icon-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 20px;
+  }
+
+  @property --et-selection-card-transition-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 150ms;
+  }
+
+  @property --et-selection-card-disabled-opacity {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0.5;
+  }
+
+  /* Two shapes wear this class: on `et-radio` / `et-checkbox-option` the panel is the host and owns
+     `aria-checked` / `aria-disabled`; on `et-choice-field` it wraps the control and reads them off a descendant.
+     Every state guard tests both. */
+  .et-selection-card {
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--et-selection-card-padding);
+    border-radius: var(--et-selection-card-border-radius);
+    background-color: var(--et-surface-background-solid, transparent);
+    border: var(--et-selection-card-border-width) solid var(--et-surface-border-solid, currentColor);
+
+    /* Every state guard sits in `:where()` so source order decides; the checked rule below relies on it. */
+    @media (hover: hover) {
+      &:where(:hover:not([aria-disabled='true'], [data-readonly]):not(:has([aria-disabled='true'], [data-readonly]))) {
+        border-color: var(--et-surface-interaction-hover-solid, currentColor);
+      }
+    }
+
+    &:where(:active:not([aria-disabled='true'], [data-readonly]):not(:has([aria-disabled='true'], [data-readonly]))) {
+      border-color: var(--et-surface-interaction-active-solid, currentColor);
+    }
+
+    /* After hover/active so a chosen card keeps its accent under the cursor. */
+    &:where([aria-checked='true'], :has(:is([aria-checked='true'], [aria-checked='mixed']))) {
+      border-color: var(--et-theme-color-primary-solid, currentColor);
+    }
+
+    /* Each host resets its own control's focus ring, so the card shows one ring. */
+    &:where(:focus-visible, :has(:focus-visible)) {
+      border-color: var(--et-theme-color-primary-solid, currentColor);
+      outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+      outline-offset: 2px;
+    }
+
+    .et-selection-card-content {
+      flex: 1;
+      min-inline-size: 0;
+    }
+
+    .et-selection-card-control {
+      order: 1;
+    }
+
+    [etSelectionCardLeading],
+    [etSelectionCardTrailing] {
+      flex-shrink: 0;
+    }
+
+    /* An `.et-icon` carries no size of its own, so an unsized one in a slot grows to whatever the row has left
+       and starves the label. */
+    > .et-icon {
+      inline-size: var(--et-selection-card-icon-size);
+      block-size: var(--et-selection-card-icon-size);
+    }
+
+    .et-selection-card-label {
+      font-weight: 500;
+      color: var(--et-surface-color-muted-solid, currentColor);
+    }
+
+    &:where([aria-checked='true'], :has(:is([aria-checked='true'], [aria-checked='mixed']))) .et-selection-card-label {
+      color: var(--et-surface-color-solid, currentColor);
+    }
+
+    /* Outside `:where()` on purpose: these must outweigh the plain variant's host-level control rules. */
+
+    &:active:not([aria-disabled='true']):not([data-readonly]) .et-selection-card-control {
+      transform: none;
+    }
+
+    &:focus-visible .et-selection-card-control {
+      outline: none;
+    }
+  }
+
+  /* `data-control-position` and `data-can-animate` sit on the host, which is the card itself for the two options
+     and an ancestor of it for the choice field. */
+  .et-selection-card:where([data-control-position='start']) .et-selection-card-control,
+  :where([data-control-position='start']) .et-selection-card .et-selection-card-control {
+    order: 0;
+  }
+
+  .et-selection-card:where([data-can-animate]),
+  :where([data-can-animate]) .et-selection-card {
+    transition:
+      border-color var(--et-selection-card-transition-duration) ease,
+      background-color var(--et-selection-card-transition-duration) ease;
+
+    .et-selection-card-label {
+      transition: color var(--et-selection-card-transition-duration) ease;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-selection-card {
+      --et-selection-card-transition-duration: 1ms;
+    }
+  }
+}

package/src/lib/forms/selection-list/checkbox-group/checkbox-group-select-all.component.css

@@ -0,0 +1,89 @@
+@layer components {
+  .et-checkbox-group-select-all {
+    display: flex;
+    align-items: center;
+    gap: var(--et-checkbox-option-gap, 10px);
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    outline: none;
+  }
+
+  .et-checkbox-group-select-all-box {
+    display: grid;
+    place-items: center;
+    inline-size: var(--et-checkbox-option-size, 20px);
+    block-size: var(--et-checkbox-option-size, 20px);
+    border: var(--et-checkbox-option-border-width, 2px) solid var(--et-surface-border-solid, currentColor);
+    border-radius: var(--et-checkbox-option-border-radius, 4px);
+    transition:
+      border-color var(--et-checkbox-option-transition-duration, 150ms) ease,
+      background-color var(--et-checkbox-option-transition-duration, 150ms) ease,
+      transform var(--et-checkbox-option-transition-duration, 150ms) ease;
+  }
+
+  .et-checkbox-group-select-all-box > * {
+    grid-area: 1 / 1;
+    opacity: 0;
+    color: var(--et-theme-color-on-primary-solid, white);
+    transition: opacity var(--et-checkbox-option-transition-duration, 150ms) ease;
+  }
+
+  .et-checkbox-group-select-all-check {
+    inline-size: 12px;
+    block-size: 10px;
+  }
+
+  .et-checkbox-group-select-all-dash {
+    inline-size: 10px;
+    block-size: 2px;
+    border-radius: 1px;
+    background-color: var(--et-theme-color-on-primary-solid, white);
+  }
+
+  .et-checkbox-group-select-all-label {
+    font-size: 14px;
+    line-height: 20px;
+    color: var(--et-surface-color-solid, currentColor);
+  }
+
+  .et-checkbox-group-select-all:where([aria-checked='true'], [aria-checked='mixed']) .et-checkbox-group-select-all-box {
+    border-color: var(--et-theme-color-primary-solid, currentColor);
+    background-color: var(--et-theme-color-primary-solid, currentColor);
+  }
+
+  .et-checkbox-group-select-all:where([aria-checked='true']) .et-checkbox-group-select-all-check,
+  .et-checkbox-group-select-all:where([aria-checked='mixed']) .et-checkbox-group-select-all-dash {
+    opacity: 1;
+  }
+
+  @media (hover: hover) {
+    .et-checkbox-group-select-all:hover:not([aria-checked='true']):not([aria-checked='mixed']):not(
+        [aria-disabled='true']
+      ):not([aria-readonly='true'])
+      .et-checkbox-group-select-all-box {
+      border-color: var(--et-surface-interaction-hover-solid, currentColor);
+      background-color: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 8%, transparent);
+    }
+  }
+
+  .et-checkbox-group-select-all:focus-visible .et-checkbox-group-select-all-box {
+    outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+    outline-offset: 2px;
+  }
+
+  .et-checkbox-group-select-all:active:not([aria-disabled='true']):not([aria-readonly='true'])
+    .et-checkbox-group-select-all-box {
+    transform: scale(0.92);
+  }
+
+  .et-checkbox-group-select-all:where([aria-disabled='true']) {
+    opacity: var(--et-checkbox-option-opacity-disabled, 0.5);
+    pointer-events: none;
+    cursor: default;
+  }
+
+  .et-checkbox-group-select-all:where([aria-readonly='true']) {
+    cursor: default;
+  }
+}

package/src/lib/forms/selection-list/checkbox-group/checkbox-group.component.css

@@ -0,0 +1,142 @@
+@layer components {
+  @property --et-checkbox-group-support-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 180ms;
+  }
+
+  @property --et-checkbox-group-error-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-checkbox-group-warning-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-checkbox-group-hint-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-checkbox-group-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 10px;
+  }
+
+  /* Horizontal only: options sitting side by side need more air between them than stacked ones, where
+     the gap is only separating lines of text. */
+  @property --et-checkbox-group-column-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 20px;
+  }
+
+  @property --et-checkbox-group-label-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 13px;
+  }
+
+  et-checkbox-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--et-checkbox-group-gap);
+    color: var(--et-surface-color-solid, currentColor);
+
+    --et-form-support-duration: var(--et-checkbox-group-support-duration);
+    --et-form-support-error-font-size: var(--et-checkbox-group-error-font-size);
+    --et-form-support-warning-font-size: var(--et-checkbox-group-warning-font-size);
+    --et-form-support-hint-font-size: var(--et-checkbox-group-hint-font-size);
+
+    &[data-disabled] {
+      cursor: not-allowed;
+
+      .et-form-support {
+        cursor: auto;
+      }
+    }
+
+    &[data-readonly] {
+      cursor: default;
+    }
+
+    > et-label,
+    .et-checkbox-group-label {
+      font-size: var(--et-checkbox-group-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;
+    }
+
+    &:where([data-size='sm']) {
+      --et-checkbox-group-label-font-size: 12px;
+      --et-checkbox-group-gap: 8px;
+
+      et-checkbox-option {
+        --et-checkbox-option-size: 16px;
+        --et-checkbox-option-gap: 8px;
+      }
+
+      .et-checkbox-option-label {
+        font-size: 12px;
+        line-height: 16px;
+      }
+
+      .et-checkbox-option-check {
+        inline-size: 10px;
+        block-size: 8px;
+      }
+    }
+
+    &:where([data-size='lg']) {
+      --et-checkbox-group-label-font-size: 14px;
+      --et-checkbox-group-gap: 12px;
+
+      et-checkbox-option {
+        --et-checkbox-option-size: 24px;
+        --et-checkbox-option-gap: 12px;
+      }
+
+      .et-checkbox-option-label {
+        font-size: 16px;
+        line-height: 24px;
+      }
+
+      .et-checkbox-option-check {
+        inline-size: 14px;
+        block-size: 12px;
+      }
+    }
+
+    &[data-error] {
+      --_et-control-border: var(--et-theme-color-primary-solid);
+    }
+
+    &[data-mixed] .et-checkbox-option-box {
+      border-style: dashed;
+      border-color: var(--et-theme-color-primary-solid, currentColor);
+    }
+  }
+
+  et-checkbox-group:where([data-orientation='horizontal']) {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: var(--et-checkbox-group-column-gap);
+  }
+
+  et-checkbox-group:where([data-orientation='horizontal']) > et-label,
+  et-checkbox-group:where([data-orientation='horizontal']) > .et-checkbox-group-label,
+  et-checkbox-group:where([data-orientation='horizontal']) > .et-form-support {
+    flex-basis: 100%;
+  }
+}

package/src/lib/forms/selection-list/checkbox-group/checkbox-option.component.css

@@ -0,0 +1,153 @@
+@layer components {
+  @property --et-checkbox-option-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 20px;
+  }
+
+  @property --et-checkbox-option-border-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 2px;
+  }
+
+  @property --et-checkbox-option-border-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
+  @property --et-checkbox-option-transition-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 150ms;
+  }
+
+  @property --et-checkbox-option-opacity-disabled {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0.5;
+  }
+
+  @property --et-checkbox-option-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 10px;
+  }
+
+  et-checkbox-option {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--et-checkbox-option-gap);
+    cursor: pointer;
+
+    &[data-readonly] {
+      cursor: default;
+    }
+    outline: none;
+    -webkit-user-select: none;
+    user-select: none;
+
+    .et-checkbox-option-box {
+      flex-shrink: 0;
+      inline-size: var(--et-checkbox-option-size);
+      block-size: var(--et-checkbox-option-size);
+      border-radius: var(--et-checkbox-option-border-radius);
+      border: var(--et-checkbox-option-border-width) solid
+        var(--_et-control-border, var(--et-surface-border-solid, currentColor));
+      background-color: transparent;
+      display: grid;
+      place-items: center;
+    }
+
+    .et-checkbox-option-check {
+      inline-size: 12px;
+      block-size: 10px;
+      opacity: 0;
+      color: var(--et-theme-color-on-primary-solid, white);
+
+      path {
+        stroke-dasharray: 15;
+        stroke-dashoffset: 15;
+      }
+    }
+
+    .et-checkbox-option-content {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      min-inline-size: 0;
+    }
+
+    .et-checkbox-option-label {
+      font-size: 14px;
+      line-height: 20px;
+      color: var(--et-surface-color-solid, currentColor);
+    }
+
+    @media (hover: hover) {
+      &:hover:not([aria-disabled='true']):not([data-readonly]):not([aria-checked='true']) .et-checkbox-option-box {
+        border-color: var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor));
+        background-color: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 8%, transparent);
+      }
+    }
+
+    &:focus-visible .et-checkbox-option-box {
+      border-color: var(--et-theme-color-primary-solid);
+      outline: 2px solid var(--et-theme-color-primary-solid);
+      outline-offset: 2px;
+    }
+
+    &:active:not([aria-disabled='true']):not([data-readonly]) .et-checkbox-option-box {
+      transform: scale(0.92);
+    }
+
+    &[aria-disabled='true'] {
+      opacity: var(--et-checkbox-option-opacity-disabled);
+      pointer-events: none;
+      cursor: default;
+
+      .et-checkbox-option-label {
+        color: var(--et-surface-interaction-disabled-solid, currentColor);
+      }
+    }
+
+    &[aria-checked='true'] .et-checkbox-option-box {
+      background-color: var(--et-theme-color-primary-solid, currentColor);
+      border-color: var(--et-theme-color-primary-solid, currentColor);
+
+      .et-checkbox-option-check {
+        opacity: 1;
+
+        path {
+          stroke-dashoffset: 0;
+        }
+      }
+    }
+
+    &[data-can-animate] {
+      .et-checkbox-option-box {
+        transition:
+          border-color var(--et-checkbox-option-transition-duration) ease,
+          background-color var(--et-checkbox-option-transition-duration) ease,
+          transform var(--et-checkbox-option-transition-duration) ease;
+      }
+
+      .et-checkbox-option-check {
+        transition: opacity 0s calc(var(--et-checkbox-option-transition-duration) * 1.5);
+
+        path {
+          transition: stroke-dashoffset calc(var(--et-checkbox-option-transition-duration) * 1.5) ease;
+        }
+      }
+
+      &[aria-checked='true'] .et-checkbox-option-check {
+        transition: opacity 0s 0s;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      --et-checkbox-option-transition-duration: 1ms;
+    }
+  }
+}

package/src/lib/forms/selection-list/radio-group/radio-group.component.css

@@ -0,0 +1,134 @@
+@layer components {
+  @property --et-radio-group-support-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 180ms;
+  }
+
+  @property --et-radio-group-error-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-radio-group-warning-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-radio-group-hint-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-radio-group-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 10px;
+  }
+
+  /* Horizontal only: options sitting side by side need more air between them than stacked ones, where
+     the gap is only separating lines of text. */
+  @property --et-radio-group-column-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 20px;
+  }
+
+  @property --et-radio-group-label-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 13px;
+  }
+
+  et-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--et-radio-group-gap);
+    color: var(--et-surface-color-solid, currentColor);
+
+    --et-form-support-duration: var(--et-radio-group-support-duration);
+    --et-form-support-error-font-size: var(--et-radio-group-error-font-size);
+    --et-form-support-warning-font-size: var(--et-radio-group-warning-font-size);
+    --et-form-support-hint-font-size: var(--et-radio-group-hint-font-size);
+
+    &[data-disabled] {
+      cursor: not-allowed;
+
+      .et-form-support {
+        cursor: auto;
+      }
+    }
+
+    &[data-readonly] {
+      cursor: default;
+    }
+
+    > et-label,
+    .et-radio-group-label {
+      font-size: var(--et-radio-group-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;
+    }
+
+    &:where([data-size='sm']) {
+      --et-radio-group-label-font-size: 12px;
+      --et-radio-group-gap: 8px;
+
+      et-radio {
+        --et-radio-size: 16px;
+        --et-radio-dot-size: 8px;
+        --et-radio-gap: 8px;
+      }
+
+      .et-radio-label {
+        font-size: 12px;
+        line-height: 16px;
+      }
+    }
+
+    &:where([data-size='lg']) {
+      --et-radio-group-label-font-size: 14px;
+      --et-radio-group-gap: 12px;
+
+      et-radio {
+        --et-radio-size: 24px;
+        --et-radio-dot-size: 12px;
+        --et-radio-gap: 12px;
+      }
+
+      .et-radio-label {
+        font-size: 16px;
+        line-height: 24px;
+      }
+    }
+
+    &[data-error] {
+      --_et-control-border: var(--et-theme-color-primary-solid);
+    }
+
+    &[data-mixed] .et-radio-circle {
+      border-style: dashed;
+      border-color: var(--et-theme-color-primary-solid, currentColor);
+    }
+  }
+
+  et-radio-group:where([data-orientation='horizontal']) {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: var(--et-radio-group-column-gap);
+  }
+
+  et-radio-group:where([data-orientation='horizontal']) > et-label,
+  et-radio-group:where([data-orientation='horizontal']) > .et-radio-group-label,
+  et-radio-group:where([data-orientation='horizontal']) > .et-form-support {
+    flex-basis: 100%;
+  }
+}