@ethlete/components 1.0.0-next.77 → 1.0.0-next.79

package/src/lib/forms/slider/range-slider.component.css

@@ -91,9 +91,10 @@
       position: relative;
       display: flex;
       align-items: center;
-      block-size: max(28px, var(--et-slider-thumb-size));
+      block-size: max(44px, var(--et-slider-thumb-size));
       /* thumbs overhang the rail by half their size at the extremes — keep them inside the box */
       margin-inline: calc(var(--et-slider-thumb-size) / 2);
+      container-type: inline-size;
       cursor: pointer;
     }
 
@@ -131,7 +132,8 @@
       /* not `:focus-visible` alone: the track focuses the thumb programmatically on a press, and
          Chrome matches `:focus-visible` for that - the ring then stayed on after every click */
       &:focus-visible:not([data-pointer-focused]) {
-        outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+        outline: 2px solid
+          light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor));
         outline-offset: 2px;
       }
 
@@ -168,7 +170,13 @@
       left: 50%;
       /* clear the thumb (which overhangs the tick by half the size difference), then add the gap */
       inset-block-start: calc(100% + (var(--et-slider-thumb-size) - var(--et-slider-mark-size)) / 2 + 6px);
-      translate: -50% 0;
+      --_et-slider-edge-x: calc(var(--_et-slider-mark-position, 0) * 1cqi);
+      translate: clamp(
+          -1 * (var(--_et-slider-edge-x) + var(--et-slider-thumb-size) / 2),
+          -50%,
+          100cqi - var(--_et-slider-edge-x) + var(--et-slider-thumb-size) / 2 - 100%
+        )
+        0;
       inline-size: max-content;
       font-size: var(--et-slider-mark-label-font-size);
       line-height: 1.2;
@@ -189,7 +197,13 @@
       /* physical centering is direction-safe — 50% of the thumb is 50% in both directions */
       left: 50%;
       bottom: calc(100% + 8px);
-      translate: -50% 0;
+      --_et-slider-edge-x: calc(var(--_et-slider-thumb-position, 0) * 1cqi);
+      translate: clamp(
+          -1 * (var(--_et-slider-edge-x) + var(--et-slider-thumb-size) / 2),
+          -50%,
+          100cqi - var(--_et-slider-edge-x) + var(--et-slider-thumb-size) / 2 - 100%
+        )
+        0;
       inline-size: max-content;
       padding: 2px 8px;
       border-radius: 6px;
@@ -203,6 +217,21 @@
       user-select: none;
     }
 
+    .et-range-slider-mark-label:dir(rtl) {
+      --_et-slider-edge-x: calc((100 - var(--_et-slider-mark-position, 0)) * 1cqi);
+    }
+
+    .et-range-slider-thumb-value:dir(rtl) {
+      --_et-slider-edge-x: calc((100 - var(--_et-slider-thumb-position, 0)) * 1cqi);
+    }
+
+    &:where([data-thumb-value]) .et-range-slider-interaction {
+      margin-block-start: calc(
+        var(--et-slider-thumb-value-font-size) * 1.4 + 14px -
+          (max(44px, var(--et-slider-thumb-size)) - var(--et-slider-thumb-size)) / 2
+      );
+    }
+
     /* an unresolved bulk-edit range parks both thumbs at the track start — the dashed accent rail
        (not a muted/grey one, which would read as disabled) makes that read as "provisional /
        values differ", not "minimum". The fill is already zero-width while mixed. Consumers
@@ -261,11 +290,12 @@
       .et-range-slider-interaction {
         flex-direction: column;
         align-items: center;
-        inline-size: max(28px, var(--et-slider-thumb-size));
+        inline-size: max(44px, var(--et-slider-thumb-size));
         block-size: var(--et-slider-vertical-size);
         margin-inline: 0;
         /* thumbs overhang the rail by half their size at the extremes — keep them inside the box */
         margin-block: calc(var(--et-slider-thumb-size) / 2);
+        container-type: normal;
       }
 
       .et-range-slider-rail {
@@ -296,7 +326,17 @@
         bottom: auto;
         inset-block-start: 50%;
         inset-inline-start: calc(100% + 8px);
-        translate: 0 -50%;
+        translate: 0
+          clamp(
+            -1 *
+              (
+                (100 - var(--_et-slider-thumb-position, 0)) * var(--et-slider-vertical-size) / 100 +
+                  var(--et-slider-thumb-size) / 2
+              ),
+            -50%,
+            var(--_et-slider-thumb-position, 0) * var(--et-slider-vertical-size) / 100 + var(--et-slider-thumb-size) /
+              2 - 100%
+          );
       }
 
       .et-range-slider-mark {
@@ -315,6 +355,58 @@
         translate: 0 -50%;
       }
 
+      &:where([data-mark-labels]) {
+        .et-range-slider-interaction {
+          display: grid;
+          grid-template-columns: auto max(44px, var(--et-slider-thumb-size));
+          align-self: flex-start;
+          inline-size: auto;
+        }
+
+        .et-range-slider-rail {
+          grid-area: 1 / 2;
+          justify-self: center;
+        }
+
+        .et-range-slider-fill,
+        .et-range-slider-thumb {
+          grid-area: 1 / 2;
+        }
+
+        .et-range-slider-marks,
+        .et-range-slider-mark {
+          display: contents;
+        }
+
+        .et-range-slider-mark::before {
+          content: '';
+          position: absolute;
+          grid-area: 1 / 2;
+          left: 50%;
+          bottom: calc(var(--_et-slider-mark-position, 0) * 1% - var(--et-slider-mark-size) / 2);
+          translate: -50% 0;
+          inline-size: var(--et-slider-mark-size);
+          block-size: var(--et-slider-mark-size);
+          border-radius: 50%;
+          background: inherit;
+        }
+
+        .et-range-slider-mark-label {
+          position: relative;
+          grid-area: 1 / 1;
+          justify-self: end;
+          align-self: end;
+          inset: auto;
+          bottom: clamp(
+            var(--et-slider-thumb-size) / -2,
+            var(--_et-slider-mark-position, 0) * 1% - var(--et-slider-mark-label-font-size) * 0.6,
+            100% + var(--et-slider-thumb-size) / 2 - var(--et-slider-mark-label-font-size) * 1.2
+          );
+          translate: none;
+          margin-inline-end: calc(var(--et-slider-thumb-size) / 2 + 6px - max(44px, var(--et-slider-thumb-size)) / 2);
+        }
+      }
+
       &[data-mixed] {
         .et-range-slider-rail {
           background: repeating-linear-gradient(

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

@@ -93,6 +93,7 @@
       block-size: max(44px, var(--et-slider-thumb-size));
       /* thumbs overhang the rail by half their size at the extremes — keep them inside the box */
       margin-inline: calc(var(--et-slider-thumb-size) / 2);
+      container-type: inline-size;
       cursor: pointer;
     }
 
@@ -130,7 +131,8 @@
       /* not `:focus-visible` alone: the track focuses the thumb programmatically on a press, and
          Chrome matches `:focus-visible` for that - the ring then stayed on after every click */
       &:focus-visible:not([data-pointer-focused]) {
-        outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+        outline: 2px solid
+          light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor));
         outline-offset: 2px;
       }
     }
@@ -162,7 +164,13 @@
       left: 50%;
       /* clear the thumb (which overhangs the tick by half the size difference), then add the gap */
       inset-block-start: calc(100% + (var(--et-slider-thumb-size) - var(--et-slider-mark-size)) / 2 + 6px);
-      translate: -50% 0;
+      --_et-slider-edge-x: calc(var(--_et-slider-mark-position, 0) * 1cqi);
+      translate: clamp(
+          -1 * (var(--_et-slider-edge-x) + var(--et-slider-thumb-size) / 2),
+          -50%,
+          100cqi - var(--_et-slider-edge-x) + var(--et-slider-thumb-size) / 2 - 100%
+        )
+        0;
       inline-size: max-content;
       font-size: var(--et-slider-mark-label-font-size);
       line-height: 1.2;
@@ -183,7 +191,13 @@
       /* physical centering is direction-safe — 50% of the thumb is 50% in both directions */
       left: 50%;
       bottom: calc(100% + 8px);
-      translate: -50% 0;
+      --_et-slider-edge-x: calc(var(--_et-slider-thumb-position, 0) * 1cqi);
+      translate: clamp(
+          -1 * (var(--_et-slider-edge-x) + var(--et-slider-thumb-size) / 2),
+          -50%,
+          100cqi - var(--_et-slider-edge-x) + var(--et-slider-thumb-size) / 2 - 100%
+        )
+        0;
       inline-size: max-content;
       padding: 2px 8px;
       border-radius: 6px;
@@ -197,6 +211,21 @@
       user-select: none;
     }
 
+    .et-slider-mark-label:dir(rtl) {
+      --_et-slider-edge-x: calc((100 - var(--_et-slider-mark-position, 0)) * 1cqi);
+    }
+
+    .et-slider-thumb-value:dir(rtl) {
+      --_et-slider-edge-x: calc((100 - var(--_et-slider-thumb-position, 0)) * 1cqi);
+    }
+
+    &:where([data-thumb-value]) .et-slider-interaction {
+      margin-block-start: calc(
+        var(--et-slider-thumb-value-font-size) * 1.4 + 14px -
+          (max(44px, var(--et-slider-thumb-size)) - var(--et-slider-thumb-size)) / 2
+      );
+    }
+
     /* an unresolved bulk-edit value parks the thumb at the track start — the dashed accent rail
        (not a muted/grey one, which would read as disabled) makes that read as "provisional /
        values differ", not "minimum". The fill is already zero-width while mixed. Consumers
@@ -260,6 +289,7 @@
         margin-inline: 0;
         /* thumbs overhang the rail by half their size at the extremes — keep them inside the box */
         margin-block: calc(var(--et-slider-thumb-size) / 2);
+        container-type: normal;
       }
 
       .et-slider-rail {
@@ -290,7 +320,17 @@
         bottom: auto;
         inset-block-start: 50%;
         inset-inline-start: calc(100% + 8px);
-        translate: 0 -50%;
+        translate: 0
+          clamp(
+            -1 *
+              (
+                (100 - var(--_et-slider-thumb-position, 0)) * var(--et-slider-vertical-size) / 100 +
+                  var(--et-slider-thumb-size) / 2
+              ),
+            -50%,
+            var(--_et-slider-thumb-position, 0) * var(--et-slider-vertical-size) / 100 + var(--et-slider-thumb-size) /
+              2 - 100%
+          );
       }
 
       .et-slider-mark {
@@ -309,6 +349,58 @@
         translate: 0 -50%;
       }
 
+      &:where([data-mark-labels]) {
+        .et-slider-interaction {
+          display: grid;
+          grid-template-columns: auto max(44px, var(--et-slider-thumb-size));
+          align-self: flex-start;
+          inline-size: auto;
+        }
+
+        .et-slider-rail {
+          grid-area: 1 / 2;
+          justify-self: center;
+        }
+
+        .et-slider-fill,
+        .et-slider-thumb {
+          grid-area: 1 / 2;
+        }
+
+        .et-slider-marks,
+        .et-slider-mark {
+          display: contents;
+        }
+
+        .et-slider-mark::before {
+          content: '';
+          position: absolute;
+          grid-area: 1 / 2;
+          left: 50%;
+          bottom: calc(var(--_et-slider-mark-position, 0) * 1% - var(--et-slider-mark-size) / 2);
+          translate: -50% 0;
+          inline-size: var(--et-slider-mark-size);
+          block-size: var(--et-slider-mark-size);
+          border-radius: 50%;
+          background: inherit;
+        }
+
+        .et-slider-mark-label {
+          position: relative;
+          grid-area: 1 / 1;
+          justify-self: end;
+          align-self: end;
+          inset: auto;
+          bottom: clamp(
+            var(--et-slider-thumb-size) / -2,
+            var(--_et-slider-mark-position, 0) * 1% - var(--et-slider-mark-label-font-size) * 0.6,
+            100% + var(--et-slider-thumb-size) / 2 - var(--et-slider-mark-label-font-size) * 1.2
+          );
+          translate: none;
+          margin-inline-end: calc(var(--et-slider-thumb-size) / 2 + 6px - max(44px, var(--et-slider-thumb-size)) / 2);
+        }
+      }
+
       &[data-mixed] {
         .et-slider-rail {
           background: repeating-linear-gradient(

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

@@ -59,6 +59,7 @@
       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);
+      box-shadow: inset 0 0 0 1px var(--et-surface-interaction-solid);
     }
 
     /* hover-capable pointers only — on touch, :hover sticks after a tap */
@@ -69,6 +70,7 @@
         &: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);
+        box-shadow: inset 0 0 0 1px var(--et-surface-interaction-hover-solid);
       }
     }
 
@@ -78,8 +80,45 @@
       background-color: color-mix(in srgb, var(--et-theme-color-primary-solid) 40%, transparent);
     }
 
+    @media (hover: hover) {
+      :where(et-choice-field[data-error])
+        &:hover:not([aria-disabled='true']):not([data-readonly]):not([aria-checked='true']):not([data-indeterminate])
+        .et-switch-track,
+      :where(et-choice-field[data-error]: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,
+          light-dark(
+              rgb(var(--et-color-primary-hover, var(--et-color-primary))),
+              rgb(
+                var(
+                  --et-color-primary-ink-active,
+                  var(
+                    --et-color-primary-ink-focus,
+                    var(
+                      --et-color-primary-ink-hover,
+                      var(
+                        --et-color-primary-ink,
+                        var(
+                          --et-color-primary-active,
+                          var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))
+                        )
+                      )
+                    )
+                  )
+                )
+              )
+            )
+            40%,
+          transparent
+        );
+      }
+    }
+
     &:focus-visible .et-switch-track {
-      outline: 2px solid var(--et-theme-color-primary-solid);
+      outline: 2px solid
+        light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor));
       outline-offset: 2px;
     }
 
@@ -117,6 +156,7 @@
     &[aria-checked='true'] {
       .et-switch-track {
         background-color: var(--et-theme-color-primary-solid, currentColor);
+        box-shadow: inset 0 0 0 1px light-dark(var(--et-theme-color-ink-solid), transparent);
       }
 
       .et-switch-thumb {
@@ -149,25 +189,28 @@
     &[data-indeterminate] {
       .et-switch-track {
         background-color: transparent;
+        box-shadow: none;
 
         &::before {
           content: '';
           position: absolute;
           inset: 0;
           border-radius: inherit;
-          border: 1px dashed var(--et-theme-color-primary-solid, currentColor);
+          border: 1px dashed var(--et-theme-color-ink-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);
+        background-color: var(--et-theme-color-ink-solid, currentColor);
       }
     }
 
     &[data-can-animate] {
       .et-switch-track {
-        transition: background-color var(--et-switch-transition-duration) ease;
+        transition:
+          background-color var(--et-switch-transition-duration) ease,
+          box-shadow var(--et-switch-transition-duration) ease;
       }
 
       .et-switch-thumb {

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

@@ -35,7 +35,7 @@
       caret-color: var(--et-theme-color-primary-solid, currentColor);
 
       &::placeholder {
-        color: color-mix(in srgb, currentColor 46%, transparent);
+        color: color-mix(in srgb, currentColor 60%, transparent);
       }
 
       &:disabled {
@@ -44,7 +44,7 @@
     }
 
     /* an unresolved bulk-edit value reads as provisional — the mixedLabel placeholder sits
-       between committed text (full strength) and the regular placeholder (46%). Consumers
+       between committed text (full strength) and the regular placeholder (60%). Consumers
        restyle via [data-mixed]. */
     &[data-mixed] .et-tag-input-field::placeholder {
       font-style: italic;

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

@@ -4,9 +4,8 @@
      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. */
+     The row bounds count only the content: the native textarea is a border box, so a rule that
+     pads it must add its block padding to both bounds, as form-field-textarea-styles does. */
   @supports (field-sizing: content) {
     textarea[data-et-textarea-autosize] {
       field-sizing: content;

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

@@ -18,7 +18,11 @@
       min-width: 0;
 
       &::placeholder {
-        color: color-mix(in srgb, currentColor 46%, transparent);
+        color: color-mix(in srgb, currentColor 60%, transparent);
+      }
+
+      &[rows='1']::placeholder {
+        white-space: pre;
       }
 
       &[data-resize='none'] {
@@ -27,11 +31,12 @@
 
       &[data-resize='vertical'] {
         resize: vertical;
+        min-block-size: 1lh;
       }
     }
 
     /* 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%) */
+       placeholder, between a committed value (full strength) and a real placeholder (60%) */
     &[data-mixed] .et-textarea-native::placeholder {
       font-style: italic;
       color: color-mix(in srgb, currentColor 72%, transparent);

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

@@ -0,0 +1,10 @@
+@layer components {
+  .et-grid-item-toolbar {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--et-grid-item-toolbar-gap, 4px);
+    padding: var(--et-grid-item-toolbar-padding, 4px);
+    border-radius: var(--et-grid-item-toolbar-radius, 8px);
+    background: var(--et-grid-item-toolbar-background, transparent);
+  }
+}

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

@@ -23,7 +23,8 @@
     background: var(--et-grid-item-bg, var(--et-surface-background-solid));
 
     &:focus-visible {
-      outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+      outline: 2px solid
+        light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor));
       outline-offset: -2px;
     }
 
@@ -152,6 +153,10 @@
     min-height: 0;
   }
 
+  .et-grid-item:has(> .et-grid-item__actions:not(:empty)) > .et-grid-item__content {
+    padding-inline-end: var(--et-grid-item-actions-reserve, calc(2.4rem + 12px));
+  }
+
   .et-grid:not(.et-grid--readonly) .et-grid-item__content {
     cursor: grab;
     user-select: none;

package/src/lib/icon/headless/align-icons.ts

@@ -0,0 +1,30 @@
+import { IconDefinition } from './icon-definition';
+
+const svg = (lines: string) =>
+  `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"
+    stroke="currentColor" stroke-width="1.4" stroke-linecap="round">${lines}</svg>`;
+
+// Custom icons - horizontal rules representing text-align.
+export const ALIGN_LEFT_ICON: IconDefinition = {
+  name: 'et-align-left',
+  data: /* @__PURE__ */ svg(`<line x1="2.5" y1="4" x2="13.5" y2="4"/><line x1="2.5" y1="8" x2="9.5" y2="8"/>
+    <line x1="2.5" y1="12" x2="12" y2="12"/>`),
+};
+
+export const ALIGN_CENTER_ICON: IconDefinition = {
+  name: 'et-align-center',
+  data: /* @__PURE__ */ svg(`<line x1="2.5" y1="4" x2="13.5" y2="4"/><line x1="4.5" y1="8" x2="11.5" y2="8"/>
+    <line x1="3.5" y1="12" x2="12.5" y2="12"/>`),
+};
+
+export const ALIGN_RIGHT_ICON: IconDefinition = {
+  name: 'et-align-right',
+  data: /* @__PURE__ */ svg(`<line x1="2.5" y1="4" x2="13.5" y2="4"/><line x1="6.5" y1="8" x2="13.5" y2="8"/>
+    <line x1="4" y1="12" x2="13.5" y2="12"/>`),
+};
+
+export const ALIGN_JUSTIFY_ICON: IconDefinition = {
+  name: 'et-align-justify',
+  data: /* @__PURE__ */ svg(`<line x1="2.5" y1="4" x2="13.5" y2="4"/><line x1="2.5" y1="8" x2="13.5" y2="8"/>
+    <line x1="2.5" y1="12" x2="13.5" y2="12"/>`),
+};

package/src/lib/icon/headless/arrow-out-up-right-icon.ts

@@ -0,0 +1,17 @@
+import { IconDefinition } from './icon-definition';
+
+export const ARROW_OUT_UP_RIGHT_ICON: IconDefinition = {
+  name: 'et-arrow-out-up-right',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        fill="currentColor"
+        d="M5 6.75A1.75 1.75 0 0 1 6.75 5h4.5a.75.75 0 0 1 0 1.5h-4.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-4.5a.75.75 0 0 1 1.5 0v4.5A1.75 1.75 0 0 1 17.25 19H6.75A1.75 1.75 0 0 1 5 17.25V6.75Z"
+      />
+      <path
+        fill="currentColor"
+        d="M11.5 5.75c0-.414.336-.75.75-.75h6c.414 0 .75.336.75.75v6a.75.75 0 0 1-1.5 0V7.56l-6.72 6.72a.75.75 0 1 1-1.06-1.06l6.72-6.72h-4.19a.75.75 0 0 1-.75-.75Z"
+      />
+    </svg>
+  `,
+};

package/src/lib/icon/headless/arrow-right-icon.ts

@@ -0,0 +1,23 @@
+import { IconDefinition } from './icon-definition';
+
+export const ARROW_RIGHT_ICON: IconDefinition = {
+  name: 'et-arrow-right',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M4 12h14"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M13 7l5 5-5 5"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  `,
+};

package/src/lib/icon/headless/arrow-up-icon.ts

@@ -0,0 +1,30 @@
+import { IconDefinition } from './icon-definition';
+
+/**
+ * Upward arrow. Rotate it 180° for the downward one - see the table's sort indicator.
+ *
+ * Drawn to fill its viewBox and sit centred in it (the shaft spans 3.5–20.5 of 24, so the glyph's
+ * midpoint is the box's). An arrow inset from its own box renders far smaller than the text it sits
+ * beside, and off-centre against it, however carefully the box itself is aligned.
+ */
+export const ARROW_UP_ICON: IconDefinition = {
+  name: 'et-arrow-up',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M12 20.5V3.5"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M5.5 10L12 3.5 18.5 10"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  `,
+};

package/src/lib/icon/headless/arrows-left-right-icon.ts

@@ -0,0 +1,31 @@
+import { IconDefinition } from './icon-definition';
+
+/** Arrows pointing apart along the inline axis - a "fit to width" action (the table's autosize). */
+export const ARROWS_LEFT_RIGHT_ICON: IconDefinition = {
+  name: 'et-arrows-left-right',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M3.5 12h17"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M8 7.5L3.5 12 8 16.5"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M16 7.5L20.5 12 16 16.5"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  `,
+};

package/src/lib/icon/headless/bold-icon.ts

@@ -0,0 +1,11 @@
+import { IconDefinition } from './icon-definition';
+
+// Custom icon.
+export const BOLD_ICON: IconDefinition = {
+  name: 'et-bold',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+      <text x="8" y="12" font-size="12" font-weight="700" text-anchor="middle" fill="currentColor">B</text>
+    </svg>
+  `,
+};