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

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

@@ -0,0 +1,187 @@
+@layer components {
+  @property --et-switch-track-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 40px;
+  }
+
+  @property --et-switch-track-height {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 22px;
+  }
+
+  @property --et-switch-thumb-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  @property --et-switch-thumb-offset {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 3px;
+  }
+
+  @property --et-switch-transition-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 150ms;
+  }
+
+  @property --et-switch-opacity-disabled {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0.5;
+  }
+
+  et-switch {
+    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;
+    }
+    outline: none;
+
+    &[aria-disabled='true'] {
+      opacity: var(--et-switch-opacity-disabled);
+      pointer-events: none;
+      cursor: default;
+    }
+
+    .et-switch-track {
+      position: relative;
+      width: var(--et-switch-track-width);
+      height: var(--et-switch-track-height);
+      border-radius: calc(var(--et-switch-track-height) / 2);
+      background-color: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 22%, transparent);
+    }
+
+    /* hover-capable pointers only — on touch, :hover sticks after a tap */
+    @media (hover: hover) {
+      &:hover:not([aria-disabled='true']):not([data-readonly]):not([aria-checked='true']):not([data-indeterminate])
+        .et-switch-track,
+      :where(et-choice-field:has(.et-choice-field-label-area:hover))
+        &:not([aria-disabled='true']):not([data-readonly]):not([aria-checked='true']):not([data-indeterminate])
+        .et-switch-track {
+        background-color: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 30%, transparent);
+      }
+    }
+
+    :where(et-choice-field[data-error])
+      &:not([aria-disabled='true']):not([aria-checked='true']):not([data-indeterminate])
+      .et-switch-track {
+      background-color: color-mix(in srgb, var(--et-theme-color-primary-solid) 40%, transparent);
+    }
+
+    &:focus-visible .et-switch-track {
+      outline: 2px solid var(--et-theme-color-primary-solid);
+      outline-offset: 2px;
+    }
+
+    /* Inside a card the focus ring belongs to the whole panel (the choice field draws it), so the track
+       must not draw a second one nested inside it. */
+    :where(et-choice-field[data-variant='card']) &:focus-visible .et-switch-track {
+      outline: none;
+    }
+
+    .et-switch-thumb {
+      /* Off state: a smaller, muted thumb centered in the track. It grows to
+       --et-switch-thumb-size and takes the on-primary color when checked. */
+      position: absolute;
+      top: calc((var(--et-switch-track-height) - var(--et-switch-thumb-size) + 4px) / 2);
+      left: calc((var(--et-switch-track-height) - var(--et-switch-thumb-size) + 4px) / 2);
+      width: calc(var(--et-switch-thumb-size) - 4px);
+      height: calc(var(--et-switch-thumb-size) - 4px);
+      border-radius: calc(var(--et-switch-thumb-size) / 2);
+      background-color: var(--et-surface-color-muted-solid, currentColor);
+    }
+
+    @media (hover: hover) {
+      &:hover:not([aria-disabled='true']):not([data-readonly]) .et-switch-thumb,
+      :where(et-choice-field:has(.et-choice-field-label-area:hover))
+        &:not([aria-disabled='true']):not([data-readonly])
+        .et-switch-thumb {
+        background-color: var(--et-surface-color-solid, currentColor);
+      }
+    }
+
+    &:active:not([aria-disabled='true']):not([data-readonly]) .et-switch-thumb {
+      width: var(--et-switch-thumb-size);
+    }
+
+    &[aria-checked='true'] {
+      .et-switch-track {
+        background-color: var(--et-theme-color-primary-solid, currentColor);
+      }
+
+      .et-switch-thumb {
+        top: calc((var(--et-switch-track-height) - var(--et-switch-thumb-size)) / 2);
+        left: calc(var(--et-switch-track-width) - var(--et-switch-thumb-size) - var(--et-switch-thumb-offset));
+        width: var(--et-switch-thumb-size);
+        height: var(--et-switch-thumb-size);
+        background-color: var(--et-theme-color-on-primary-solid, white);
+      }
+
+      @media (hover: hover) {
+        &:hover:not([aria-disabled='true']):not([data-readonly]) .et-switch-thumb,
+        :where(et-choice-field:has(.et-choice-field-label-area:hover))
+          &:not([aria-disabled='true']):not([data-readonly])
+          .et-switch-thumb {
+          background-color: var(--et-theme-color-on-primary-solid, white);
+        }
+      }
+
+      &:active:not([aria-disabled='true']):not([data-readonly]) .et-switch-thumb {
+        width: calc(var(--et-switch-thumb-size) + 3px);
+        left: calc(var(--et-switch-track-width) - var(--et-switch-thumb-size) - 3px - var(--et-switch-thumb-offset));
+      }
+    }
+
+    /* bulk-edit indeterminate: the thumb parks mid-track and the track goes to a dashed accent
+       outline (not a muted/grey one, which would read as disabled) — neither off nor on.
+       Mirrors the checkbox indeterminate state; the first toggle resolves it to on. Consumers
+       restyle via [data-indeterminate]. */
+    &[data-indeterminate] {
+      .et-switch-track {
+        background-color: transparent;
+
+        &::before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          border-radius: inherit;
+          border: 1px dashed var(--et-theme-color-primary-solid, currentColor);
+        }
+      }
+
+      .et-switch-thumb {
+        left: calc((var(--et-switch-track-width) - (var(--et-switch-thumb-size) - 4px)) / 2);
+        background-color: var(--et-theme-color-primary-solid, currentColor);
+      }
+    }
+
+    &[data-can-animate] {
+      .et-switch-track {
+        transition: background-color var(--et-switch-transition-duration) ease;
+      }
+
+      .et-switch-thumb {
+        transition:
+          top var(--et-switch-transition-duration) ease,
+          left var(--et-switch-transition-duration) ease,
+          width var(--et-switch-transition-duration) ease,
+          height var(--et-switch-transition-duration) ease,
+          background-color var(--et-switch-transition-duration) ease;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      --et-switch-transition-duration: 1ms;
+    }
+  }
+}

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

@@ -0,0 +1,54 @@
+@layer components {
+  et-tag-input {
+    display: block;
+    flex: 1;
+    min-inline-size: 0;
+    color: inherit;
+    cursor: text;
+
+    &[data-disabled] {
+      cursor: not-allowed;
+    }
+
+    /* no tag can be typed here - an I-beam over the row would promise one */
+    &[data-readonly] {
+      cursor: default;
+    }
+
+    .et-tag-input-row {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 6px;
+      min-inline-size: 0;
+    }
+
+    .et-tag-input-field {
+      flex: 1 1 60px;
+      min-inline-size: 60px;
+      border: none;
+      outline: none;
+      background: transparent;
+      font: inherit;
+      color: inherit;
+      padding: 0;
+      caret-color: var(--et-theme-color-primary-solid, currentColor);
+
+      &::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-tag-input-field::placeholder {
+      font-style: italic;
+      color: color-mix(in srgb, currentColor 72%, transparent);
+    }
+  }
+}

package/src/lib/forms/textarea/textarea-autosize-styles.component.css

@@ -0,0 +1,17 @@
+@layer components {
+  /* The browser sizes the textarea itself where `field-sizing` exists; `TextareaDirective`'s
+     measurement path stays as the fallback for engines that ignore this block. Both must never
+     run at once - the directive skips measuring exactly when this `@supports` condition holds.
+     Delete the fallback once Firefox ESR and iOS Safari 26 both support `field-sizing`.
+
+     The row bounds hold only while the native textarea has no block padding: it is a border box,
+     so any padding on it eats into the clamp, and CSS cannot add the padding back. Pad the form
+     field's frame instead. */
+  @supports (field-sizing: content) {
+    textarea[data-et-textarea-autosize] {
+      field-sizing: content;
+      min-block-size: calc(var(--et-textarea-min-rows, 1) * 1lh);
+      max-block-size: var(--et-textarea-max-block-size, none);
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+@layer components {
+  et-textarea {
+    display: block;
+    flex: 1;
+    min-inline-size: 0;
+    color: inherit;
+
+    .et-textarea-native {
+      display: block;
+      inline-size: 100%;
+      border: none;
+      outline: none;
+      background: transparent;
+      font: inherit;
+      color: inherit;
+      caret-color: var(--et-theme-color-primary-solid, currentColor);
+      padding: 0;
+      min-width: 0;
+
+      &::placeholder {
+        color: color-mix(in srgb, currentColor 46%, transparent);
+      }
+
+      &[data-resize='none'] {
+        resize: none;
+      }
+
+      &[data-resize='vertical'] {
+        resize: vertical;
+      }
+    }
+
+    /* an unresolved bulk-edit value reads as provisional — the mixed label shows as the
+       placeholder, between a committed value (full strength) and a real placeholder (46%) */
+    &[data-mixed] .et-textarea-native::placeholder {
+      font-style: italic;
+      color: color-mix(in srgb, currentColor 72%, transparent);
+    }
+  }
+}

package/src/lib/grid/grid-debug.component.css

@@ -0,0 +1,130 @@
+@layer components {
+  .et-grid-debug-panel {
+    font-family: monospace;
+    font-size: 11px;
+    border: 1px solid var(--et-surface-border-solid, #d1d5db);
+    border-radius: 4px;
+    margin-top: 8px;
+    background: var(--et-surface-background-solid, #f9fafb);
+    color: var(--et-surface-color-solid, #111);
+  }
+
+  .et-grid-debug-summary {
+    padding: 6px 10px;
+    cursor: pointer;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .et-grid-debug-title {
+    font-weight: 700;
+    color: var(--et-surface-color-muted-solid, #6b7280);
+  }
+
+  .et-grid-debug-muted {
+    color: var(--et-surface-color-muted-solid, #6b7280);
+  }
+
+  .et-grid-debug-strong {
+    color: var(--et-surface-color-solid, #111827);
+  }
+
+  .et-grid-debug-warning {
+    color: var(--et-grid-debug-warning-color, #d97706);
+  }
+
+  .et-grid-debug-error {
+    color: var(--et-grid-debug-error-color, #dc2626);
+  }
+
+  .et-grid-debug-issues {
+    color: var(--et-grid-debug-error-color, #dc2626);
+    font-weight: 700;
+  }
+
+  .et-grid-debug-copy {
+    margin-left: auto;
+    padding: 2px 8px;
+    border: 1px solid var(--et-surface-border-solid, #d1d5db);
+    border-radius: 3px;
+    background: var(--et-surface-interaction-solid, #fff);
+    cursor: pointer;
+    font-size: 11px;
+    color: var(--et-surface-color-solid, #374151);
+  }
+
+  .et-grid-debug-copied {
+    color: var(--et-grid-debug-success-color, #16a34a);
+    font-size: 10px;
+  }
+
+  .et-grid-debug-body {
+    padding: 8px 10px;
+    overflow-x: auto;
+    border-top: 1px solid var(--et-surface-border-solid, #e5e7eb);
+  }
+
+  .et-grid-debug-legend {
+    display: flex;
+    gap: 6px;
+    margin-bottom: 8px;
+    flex-wrap: wrap;
+  }
+
+  .et-grid-debug-breakpoint {
+    padding: 1px 7px;
+    border: 1px solid currentColor;
+    border-radius: 99px;
+    color: var(--et-surface-color-subtle-solid, #9ca3af);
+  }
+
+  .et-grid-debug-breakpoint--active {
+    font-weight: 700;
+    color: var(--et-theme-color-primary-solid, #1d4ed8);
+  }
+
+  .et-grid-debug-table {
+    border-collapse: collapse;
+    white-space: nowrap;
+  }
+
+  .et-grid-debug-head-row {
+    background: var(--et-surface-interaction-solid, #f3f4f6);
+  }
+
+  .et-grid-debug-cell {
+    padding: 3px 8px;
+    border: 1px solid var(--et-surface-border-solid, #e5e7eb);
+    text-align: center;
+  }
+
+  .et-grid-debug-cell--active {
+    background: color-mix(in srgb, var(--et-theme-color-primary-solid, #1d4ed8) 15%, transparent);
+  }
+
+  .et-grid-debug-cell-start {
+    text-align: left;
+  }
+
+  .et-grid-debug-cell-ext {
+    opacity: 0.65;
+  }
+
+  .et-grid-debug-id {
+    color: var(--et-surface-color-muted-solid, #6b7280);
+  }
+
+  .et-grid-debug-type {
+    color: var(--et-surface-color-subtle-solid, #9ca3af);
+  }
+
+  .et-grid-debug-note {
+    margin-top: 6px;
+    color: var(--et-surface-color-subtle-solid, #9ca3af);
+    font-size: 10px;
+  }
+}

package/src/lib/grid/grid-item-default-actions.component.css

@@ -0,0 +1,11 @@
+@layer components {
+  et-grid-item-default-actions .et-grid-item-default-actions__remove {
+    color: var(--et-surface-color-muted-solid);
+
+    @media (hover: hover) {
+      &:hover {
+        color: var(--et-surface-color-solid);
+      }
+    }
+  }
+}

package/src/lib/grid/grid-item.component.css

@@ -0,0 +1,172 @@
+@layer components {
+  .et-grid-item {
+    /* Never past half the gap: adjacent items are siblings at one z-index, so overlapping strips
+       would be resolved by DOM order and the later item would swallow its neighbour's handle. */
+    --et-resize-handles-outset: min(8px, calc(var(--et-grid-gap, 16px) / 2));
+
+    /* Core stops the e/w strips short of the bottom for the pip window's title bar; a grid item has
+       none, and the full-height strip is what keeps the hover bar centred on the item. */
+    --et-resize-handles-side-bottom: 0px;
+
+    --et-grid-item-resize-bar-inset: calc(var(--et-resize-handles-outset) + 2px);
+    --et-grid-item-resize-pip-inset: calc(var(--et-resize-handles-outset) + 3px);
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    outline: none;
+    will-change: translate;
+    border-radius: var(--et-grid-item-radius, 0);
+    background: var(--et-grid-item-bg, var(--et-surface-background-solid));
+
+    &:focus-visible {
+      outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+      outline-offset: -2px;
+    }
+
+    &:is(.et-grid-item--dragging, .et-grid-item--resizing, .et-grid-item--direct, .et-grid-item--settling) {
+      z-index: 100;
+    }
+
+    &:is(.et-grid-item--dragging) {
+      cursor: grabbing;
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
+    &:is(.et-grid-item--resizing) {
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
+    &:is(.et-grid-item--entering, .et-grid-item--leaving) {
+      scale: 0.9;
+      opacity: 0;
+    }
+
+    &:is(.et-grid-item--leaving) {
+      pointer-events: none;
+    }
+  }
+
+  .et-grid-item:hover .et-resize-handle--e::after,
+  .et-grid-item:hover .et-resize-handle--s::after,
+  .et-grid-item:hover .et-resize-handle--w::after,
+  .et-grid-item:hover .et-resize-handle--n::after,
+  .et-grid-item:hover .et-resize-handle--se::after,
+  .et-grid-item:hover .et-resize-handle--sw::after,
+  .et-grid-item:hover .et-resize-handle--ne::after,
+  .et-grid-item:hover .et-resize-handle--nw::after,
+  .et-grid-item--resizing .et-resize-handle--e::after,
+  .et-grid-item--resizing .et-resize-handle--s::after,
+  .et-grid-item--resizing .et-resize-handle--w::after,
+  .et-grid-item--resizing .et-resize-handle--n::after,
+  .et-grid-item--resizing .et-resize-handle--se::after,
+  .et-grid-item--resizing .et-resize-handle--sw::after,
+  .et-grid-item--resizing .et-resize-handle--ne::after,
+  .et-grid-item--resizing .et-resize-handle--nw::after {
+    content: '';
+    position: absolute;
+    border-radius: 2px;
+    background: var(--et-grid-item-resize-handle-color, var(--et-surface-color-solid));
+    opacity: 0.2;
+  }
+
+  .et-grid-item:hover .et-resize-handle--e::after,
+  .et-grid-item--resizing .et-resize-handle--e::after {
+    right: var(--et-grid-item-resize-bar-inset);
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 24px;
+  }
+
+  .et-grid-item:hover .et-resize-handle--w::after,
+  .et-grid-item--resizing .et-resize-handle--w::after {
+    left: var(--et-grid-item-resize-bar-inset);
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 24px;
+  }
+
+  .et-grid-item:hover .et-resize-handle--s::after,
+  .et-grid-item--resizing .et-resize-handle--s::after {
+    bottom: var(--et-grid-item-resize-bar-inset);
+    left: 50%;
+    transform: translateX(-50%);
+    height: 3px;
+    width: 24px;
+  }
+
+  .et-grid-item:hover .et-resize-handle--n::after,
+  .et-grid-item--resizing .et-resize-handle--n::after {
+    top: var(--et-grid-item-resize-bar-inset);
+    left: 50%;
+    transform: translateX(-50%);
+    height: 3px;
+    width: 24px;
+  }
+
+  .et-grid-item:hover .et-resize-handle--se::after,
+  .et-grid-item--resizing .et-resize-handle--se::after {
+    bottom: var(--et-grid-item-resize-pip-inset);
+    right: var(--et-grid-item-resize-pip-inset);
+    width: 8px;
+    height: 8px;
+    border-radius: 1px;
+  }
+
+  .et-grid-item:hover .et-resize-handle--sw::after,
+  .et-grid-item--resizing .et-resize-handle--sw::after {
+    bottom: var(--et-grid-item-resize-pip-inset);
+    left: var(--et-grid-item-resize-pip-inset);
+    width: 8px;
+    height: 8px;
+    border-radius: 1px;
+  }
+
+  .et-grid-item:hover .et-resize-handle--ne::after,
+  .et-grid-item--resizing .et-resize-handle--ne::after {
+    top: var(--et-grid-item-resize-pip-inset);
+    right: var(--et-grid-item-resize-pip-inset);
+    width: 8px;
+    height: 8px;
+    border-radius: 1px;
+  }
+
+  .et-grid-item:hover .et-resize-handle--nw::after,
+  .et-grid-item--resizing .et-resize-handle--nw::after {
+    top: var(--et-grid-item-resize-pip-inset);
+    left: var(--et-grid-item-resize-pip-inset);
+    width: 8px;
+    height: 8px;
+    border-radius: 1px;
+  }
+
+  .et-grid-item__content {
+    flex: 1;
+    min-height: 0;
+  }
+
+  .et-grid:not(.et-grid--readonly) .et-grid-item__content {
+    cursor: grab;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .et-grid-item--dragging .et-grid-item__content {
+    cursor: grabbing;
+  }
+
+  .et-grid-item__actions {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    display: flex;
+    gap: 4px;
+  }
+}

package/src/lib/grid/grid.component.css

@@ -0,0 +1,56 @@
+@layer components {
+  @property --et-grid-padding {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0px;
+  }
+
+  .et-grid {
+    display: block;
+    box-sizing: border-box;
+    padding: var(--et-grid-padding);
+    position: relative;
+    min-height: 0;
+
+    &:has(.et-grid-item--dragging, .et-grid-item--resizing) {
+      -webkit-user-select: none;
+      user-select: none;
+      cursor: grabbing;
+    }
+
+    &:has(.et-grid-item--resizing) {
+      cursor: nwse-resize;
+    }
+  }
+
+  .et-grid-ghost {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    border-radius: 8px;
+    background: color-mix(in srgb, var(--et-surface-color-solid, rgb(23 23 23)) 8%, transparent);
+    border: 2px dashed color-mix(in srgb, var(--et-surface-color-solid, rgb(23 23 23)) 20%, transparent);
+    box-sizing: border-box;
+    pointer-events: none;
+  }
+
+  .et-grid--readonly {
+    .et-grid-item__actions {
+      display: none;
+    }
+
+    .et-grid-item:hover {
+      .et-resize-handle--e::after,
+      .et-resize-handle--s::after,
+      .et-resize-handle--w::after,
+      .et-resize-handle--n::after,
+      .et-resize-handle--se::after,
+      .et-resize-handle--sw::after,
+      .et-resize-handle--ne::after,
+      .et-resize-handle--nw::after {
+        content: unset;
+      }
+    }
+  }
+}

package/src/lib/icon/headless/icon-styles.component.css

@@ -0,0 +1,7 @@
+@layer components {
+  .et-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}