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

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

@@ -0,0 +1,137 @@
+@layer components {
+  @property --et-radio-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 20px;
+  }
+
+  @property --et-radio-dot-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 10px;
+  }
+
+  @property --et-radio-border-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 2px;
+  }
+
+  @property --et-radio-transition-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 150ms;
+  }
+
+  @property --et-radio-opacity-disabled {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0.5;
+  }
+
+  @property --et-radio-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 10px;
+  }
+
+  et-radio {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--et-radio-gap);
+    cursor: pointer;
+
+    &[data-readonly] {
+      cursor: default;
+    }
+    outline: none;
+    -webkit-user-select: none;
+    user-select: none;
+
+    .et-radio-circle {
+      flex-shrink: 0;
+      inline-size: var(--et-radio-size);
+      block-size: var(--et-radio-size);
+      border-radius: 50%;
+      border: var(--et-radio-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));
+      background-color: transparent;
+      display: grid;
+      place-items: center;
+
+      &::after {
+        content: '';
+        inline-size: var(--et-radio-dot-size);
+        block-size: var(--et-radio-dot-size);
+        border-radius: 50%;
+        background-color: var(--et-theme-color-primary-solid, currentColor);
+        transform: scale(0);
+      }
+    }
+
+    .et-radio-content {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      min-inline-size: 0;
+    }
+
+    .et-radio-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-radio-circle {
+        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-radio-circle {
+      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-radio-circle {
+      transform: scale(0.92);
+    }
+
+    &[aria-disabled='true'] {
+      opacity: var(--et-radio-opacity-disabled);
+      pointer-events: none;
+      cursor: default;
+
+      .et-radio-label {
+        color: var(--et-surface-interaction-disabled-solid, currentColor);
+      }
+    }
+
+    &[aria-checked='true'] .et-radio-circle {
+      border-color: var(--et-theme-color-primary-solid, currentColor);
+      background-color: transparent;
+
+      &::after {
+        transform: scale(1);
+      }
+    }
+
+    &[data-can-animate] {
+      .et-radio-circle {
+        transition:
+          border-color var(--et-radio-transition-duration) ease,
+          background-color var(--et-radio-transition-duration) ease,
+          transform var(--et-radio-transition-duration) ease;
+
+        &::after {
+          transition: transform var(--et-radio-transition-duration) ease;
+        }
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      --et-radio-transition-duration: 1ms;
+    }
+  }
+}

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

@@ -0,0 +1,149 @@
+@layer components {
+  @property --et-segmented-button-group-support-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 180ms;
+  }
+
+  @property --et-segmented-button-group-error-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-segmented-button-group-warning-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-segmented-button-group-hint-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-segmented-button-group-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 10px;
+  }
+
+  @property --et-segmented-button-group-label-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 13px;
+  }
+
+  @property --et-segmented-button-group-track-padding {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 3px;
+  }
+
+  @property --et-segmented-button-group-track-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 10px;
+  }
+
+  et-segmented-button-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--et-segmented-button-group-gap);
+    color: var(--et-surface-color-solid, currentColor);
+
+    --et-form-support-duration: var(--et-segmented-button-group-support-duration);
+    --et-form-support-error-font-size: var(--et-segmented-button-group-error-font-size);
+    --et-form-support-warning-font-size: var(--et-segmented-button-group-warning-font-size);
+    --et-form-support-hint-font-size: var(--et-segmented-button-group-hint-font-size);
+
+    &[data-disabled] {
+      cursor: not-allowed;
+
+      .et-form-support {
+        cursor: auto;
+      }
+    }
+
+    &[data-readonly] {
+      cursor: default;
+    }
+
+    > et-label,
+    .et-segmented-button-group-label {
+      font-size: var(--et-segmented-button-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-segmented-button-group-label-font-size: 12px;
+      --et-segmented-button-group-gap: 8px;
+
+      et-segmented-button {
+        --et-segmented-button-padding-x: 10px;
+        --et-segmented-button-padding-y: 4px;
+        --et-segmented-button-font-size: 12px;
+      }
+    }
+
+    &:where([data-size='lg']) {
+      --et-segmented-button-group-label-font-size: 14px;
+      --et-segmented-button-group-gap: 12px;
+
+      et-segmented-button {
+        --et-segmented-button-padding-x: 18px;
+        --et-segmented-button-padding-y: 8px;
+        --et-segmented-button-font-size: 16px;
+      }
+    }
+
+    .et-segmented-button-group-buttons {
+      display: inline-flex;
+      align-self: flex-start;
+      gap: 2px;
+      padding: var(--et-segmented-button-group-track-padding);
+      border-radius: var(--et-segmented-button-group-track-radius);
+      background-color: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 8%, transparent);
+    }
+
+    &[data-error] .et-segmented-button-group-buttons {
+      box-shadow: inset 0 0 0 1px var(--et-theme-color-primary-solid);
+    }
+
+    &:where([data-variant='tabs']) .et-segmented-button-group-buttons {
+      gap: 0;
+      padding: 0;
+      border-radius: 0;
+      background-color: transparent;
+      box-shadow: inset 0 calc(var(--et-tab-underline-size) * -1) 0 0
+        color-mix(
+          in srgb,
+          var(--et-surface-border-solid, currentColor) calc(var(--et-tab-baseline-opacity) * 100%),
+          transparent
+        );
+    }
+
+    &:where([data-variant='tabs'])[data-error] .et-segmented-button-group-buttons {
+      box-shadow: inset 0 calc(var(--et-tab-underline-size) * -1) 0 0 var(--et-theme-color-primary-solid);
+    }
+
+    &:where([data-variant='tabs']) et-segmented-button {
+      --et-segmented-button-padding-x: var(--et-tab-padding-inline);
+      --et-segmented-button-padding-y: var(--et-tab-padding-block);
+      --et-segmented-button-tab-underline-size: var(--et-tab-underline-size);
+      --et-segmented-button-tab-underline-radius: var(--et-tab-underline-radius);
+      --et-segmented-button-font-size: var(--et-tab-font-size);
+    }
+
+    &[data-mixed] .et-segmented-button-group-buttons {
+      outline: 1px dashed var(--et-theme-color-primary-solid, currentColor);
+      outline-offset: -1px;
+    }
+  }
+}

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

@@ -0,0 +1,180 @@
+@layer components {
+  @property --et-segmented-button-padding-x {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  @property --et-segmented-button-padding-y {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 6px;
+  }
+
+  @property --et-segmented-button-tab-underline-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 2px;
+  }
+
+  @property --et-segmented-button-tab-underline-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 1px;
+  }
+
+  @property --et-segmented-button-border-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 7px;
+  }
+
+  @property --et-segmented-button-transition-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 150ms;
+  }
+
+  @property --et-segmented-button-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  @property --et-segmented-button-height {
+    syntax: '<length> | auto';
+    inherits: true;
+    initial-value: auto;
+  }
+
+  @property --et-segmented-button-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0px;
+  }
+
+  @property --et-segmented-button-opacity-disabled {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0.5;
+  }
+
+  et-segmented-button {
+    position: relative;
+    isolation: isolate;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--et-segmented-button-gap);
+    block-size: var(--et-segmented-button-height);
+    padding: var(--et-segmented-button-padding-y) var(--et-segmented-button-padding-x);
+    border-radius: var(--et-segmented-button-border-radius);
+    cursor: pointer;
+
+    &[data-readonly] {
+      cursor: default;
+    }
+    outline: none;
+    background: transparent;
+    color: var(--et-surface-color-muted-solid, currentColor);
+    font-size: var(--et-segmented-button-font-size);
+    font-weight: 500;
+    line-height: 1.4;
+    white-space: nowrap;
+    -webkit-user-select: none;
+    user-select: none;
+
+    .et-segmented-button-label {
+      display: contents;
+    }
+
+    .et-segmented-button-bg {
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      border-radius: var(--et-segmented-button-border-radius);
+      background-color: var(--et-theme-color-primary-solid, currentColor);
+      opacity: 0;
+    }
+
+    &[aria-disabled='true'] {
+      opacity: var(--et-segmented-button-opacity-disabled);
+      pointer-events: none;
+      cursor: default;
+    }
+
+    @media (hover: hover) {
+      &:hover:not([aria-disabled='true']):not([data-readonly]):not([aria-checked='true']) {
+        color: var(--et-surface-color-solid, currentColor);
+        background-color: var(
+          --et-segmented-button-hover-fill,
+          color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 10%, transparent)
+        );
+      }
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--et-theme-color-primary-solid);
+      outline-offset: var(--et-segmented-button-focus-ring-offset, 1px);
+    }
+
+    &:active:not([aria-disabled='true']):not([data-readonly]) {
+      transform: scale(var(--et-segmented-button-press-scale, 0.97));
+    }
+
+    &[aria-checked='true'] {
+      color: var(--et-theme-color-on-primary-solid, white);
+
+      .et-segmented-button-bg {
+        opacity: 1;
+      }
+    }
+
+    &[data-can-animate] {
+      transition:
+        color var(--et-segmented-button-transition-duration) ease,
+        transform var(--et-segmented-button-transition-duration) ease;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      --et-segmented-button-transition-duration: 1ms;
+    }
+
+    :where(et-segmented-button-group[data-variant='tabs']) & {
+      --et-segmented-button-hover-fill: transparent;
+      --et-segmented-button-press-scale: 1;
+      --et-segmented-button-focus-ring-offset: 2px;
+
+      border-radius: 0.5rem;
+      color: var(--et-surface-interaction-solid, currentColor);
+
+      font-weight: inherit;
+      line-height: inherit;
+
+      .et-segmented-button-bg {
+        inset: auto 0 0 0;
+        block-size: var(--et-segmented-button-tab-underline-size);
+        border-radius: var(--et-segmented-button-tab-underline-radius);
+        background-color: var(--et-theme-color-ink-solid, currentColor);
+      }
+
+      &[aria-checked='true'] {
+        color: var(--et-surface-color-solid, currentColor);
+      }
+
+      @media (hover: hover) {
+        &[aria-checked='true']:hover:not([aria-disabled='true']):not([data-readonly]) {
+          background-color: rgb(var(--et-theme-color-primary-rgb, 0 0 0) / 0.08);
+        }
+      }
+
+      &[aria-checked='true']:focus-visible {
+        background-color: rgb(var(--et-theme-color-primary-rgb, 0 0 0) / 0.12);
+      }
+
+      &[aria-checked='true']:active:not([aria-disabled='true']):not([data-readonly]) {
+        background-color: rgb(var(--et-theme-color-primary-rgb, 0 0 0) / 0.16);
+      }
+    }
+  }
+}