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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethlete/components",
-  "version": "1.0.0-next.77",
+  "version": "1.0.0-next.78",
   "repository": {
     "type": "git",
     "url": "https://github.com/ethlete-io/ethdk",

package/src/lib/forms/form-field/form-field-text-shell-styles.component.css

@@ -47,6 +47,26 @@
        injected by the control, so a control instantiated before any form-field would inject it
        *before* the base sheet and lose every source-order tie against the base frame/label rules. */
     &[data-text-shell] {
+      --_et-form-field-frame-border: var(--et-surface-border-solid, currentColor);
+      --_et-form-field-frame-border-hover: var(--et-surface-interaction-hover-solid, currentColor);
+      --_et-form-field-label-color: var(--et-surface-color-muted-solid, currentColor);
+      --_et-form-field-label-color-active: var(--et-surface-color-solid, currentColor);
+
+      &[data-error] {
+        --_et-form-field-frame-border: color-mix(in srgb, var(--et-theme-color-primary-solid) 50%, transparent);
+        --_et-form-field-frame-border-hover: var(--et-theme-color-ink-solid);
+        --_et-form-field-label-color: var(--et-theme-color-ink-solid);
+        --_et-form-field-label-color-active: var(--et-theme-color-ink-solid);
+      }
+
+      .et-form-field-control-frame {
+        border-color: var(--_et-form-field-frame-border);
+      }
+
+      .et-form-field-affix {
+        color: var(--_et-form-field-label-color);
+      }
+
       &[data-label-mode='static'] {
         &[data-has-label]:not(:has(et-label[hidden])) .et-form-field-shell {
           padding-block-start: calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap));
@@ -178,6 +198,7 @@
       }
 
       .et-form-field-label-area {
+        color: var(--_et-form-field-label-color);
         max-inline-size: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -194,12 +215,12 @@
             :has(.et-form-field-label-area:hover)
           ) {
           .et-form-field-control-frame {
-            border-color: var(--et-surface-interaction-hover-solid, currentColor);
+            border-color: var(--_et-form-field-frame-border-hover);
           }
 
           .et-form-field-label-area,
           .et-form-field-affix {
-            color: var(--et-surface-color-solid, currentColor);
+            color: var(--_et-form-field-label-color-active);
             opacity: 1;
           }
         }
@@ -217,7 +238,7 @@
       &:where([data-expanded]:not([data-readonly])) .et-form-field-affix,
       &:where([data-focused]:not([data-readonly])) .et-form-field-label-area,
       &:where([data-focused]:not([data-readonly])) .et-form-field-affix {
-        color: var(--et-surface-color-solid, currentColor);
+        color: var(--_et-form-field-label-color-active);
         opacity: 1;
       }
 
@@ -242,19 +263,6 @@
         }
       }
 
-      &[data-error] .et-form-field-control-frame {
-        border-color: var(--et-theme-color-primary-solid);
-      }
-
-      &[data-error] .et-form-field-label-area {
-        color: var(--et-theme-color-ink-solid);
-      }
-
-      &[data-error] .et-form-field-affix {
-        color: var(--et-theme-color-ink-solid);
-        opacity: 1;
-      }
-
       /* Driven by the registered control's disabled state (data-disabled), NOT :has(:disabled) —
          a composite control like the rich text editor legitimately disables individual toolbar
          buttons while fully enabled, and :has(:disabled) would dim (and pointer-events-kill) the

package/src/lib/forms/select/select-option-styles.component.css

@@ -61,7 +61,8 @@
       opacity 120ms ease;
 
     &:where([data-active][data-active-source='keyboard']) {
-      background: color-mix(in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 12%, transparent);
+      outline: 2px solid var(--et-theme-color-ink-solid, currentColor);
+      outline-offset: -2px;
     }
 
     @media (hover: hover) {
@@ -90,7 +91,7 @@
       flex: none;
       inline-size: var(--et-select-option-check-size);
       block-size: var(--et-select-option-check-size);
-      color: var(--et-theme-color-primary-solid, currentColor);
+      color: var(--et-theme-color-ink-solid, currentColor);
       /* hidden via opacity, NOT visibility — an explicit `visibility: visible` would punch
          through the pane's positioning phase (`visibility: hidden`) and paint the check
          before the panel itself becomes visible */

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>
+  `,
+};

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

@@ -0,0 +1,21 @@
+import { IconDefinition } from './icon-definition';
+
+export const CALENDAR_ICON: IconDefinition = {
+  name: 'et-calendar',
+  data: `
+    <svg
+      width="100%"
+      height="100%"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <rect x="3.5" y="4.5" width="17" height="16.5" rx="3" />
+      <path d="M8 2.5v4M16 2.5v4M3.5 10h17" />
+    </svg>
+  `,
+};

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

@@ -0,0 +1,14 @@
+import { IconDefinition } from './icon-definition';
+
+// Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.
+export const CHECK_ICON: IconDefinition = {
+  name: 'et-check',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+      <path
+        fill="currentColor"
+        d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
+      />
+    </svg>
+  `,
+};

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

@@ -0,0 +1,14 @@
+import { IconDefinition } from './icon-definition';
+
+// Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.
+export const CHEVRON_ICON: IconDefinition = {
+  name: 'et-chevron',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+      <path
+        fill="currentColor"
+        d="M244.7 116.7c6.2-6.2 16.4-6.2 22.6 0l192 192c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0L256 150.6 75.3 331.3c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l192-192z"
+      />
+    </svg>
+  `,
+};

package/src/lib/icon/headless/circle-check-icon.ts

@@ -0,0 +1,14 @@
+import { IconDefinition } from './icon-definition';
+
+// Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.
+export const CIRCLE_CHECK_ICON: IconDefinition = {
+  name: 'et-circle-check',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+      <path
+        fill="currentColor"
+        d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335.1 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"
+      />
+    </svg>
+  `,
+};

package/src/lib/icon/headless/circle-info-icon.ts

@@ -0,0 +1,14 @@
+import { IconDefinition } from './icon-definition';
+
+// Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.
+export const CIRCLE_INFO_ICON: IconDefinition = {
+  name: 'et-circle-info',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+      <path
+        fill="currentColor"
+        d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"
+      />
+    </svg>
+  `,
+};

package/src/lib/icon/headless/clipboard-check-icon.ts

@@ -0,0 +1,28 @@
+import { IconDefinition } from './icon-definition';
+
+export const CLIPBOARD_CHECK_ICON: IconDefinition = {
+  name: 'et-clipboard-check',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M9 4.5h6"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linecap="round"
+      />
+      <path
+        d="M9 3h6a1.5 1.5 0 0 1 1.5 1.5V6H18a2 2 0 0 1 2 2v10.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 18.5V8a2 2 0 0 1 2-2h1.5V4.5A1.5 1.5 0 0 1 9 3z"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M8.5 13l2.2 2.2 4.8-4.9"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  `,
+};

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

@@ -0,0 +1,21 @@
+import { IconDefinition } from './icon-definition';
+
+export const CLOCK_ICON: IconDefinition = {
+  name: 'et-clock',
+  data: `
+    <svg
+      width="100%"
+      height="100%"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <circle cx="12" cy="12" r="8.75" />
+      <path d="M12 7.5V12l3 2" />
+    </svg>
+  `,
+};

package/src/lib/icon/headless/code-block-icon.ts

@@ -0,0 +1,15 @@
+import { IconDefinition } from './icon-definition';
+
+// Custom icon: the inline-code chevrons inside a block, so it reads as a fenced block next to
+// `et-code` (the inline mark) in the same toolbar.
+export const CODE_BLOCK_ICON: IconDefinition = {
+  name: 'et-code-block',
+  data: `
+    <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" stroke-linejoin="round">
+      <rect x="1.75" y="2.75" width="12.5" height="10.5" rx="2" />
+      <path d="M6.75 6.5 5 8l1.75 1.5" />
+      <path d="M9.25 6.5 11 8 9.25 9.5" />
+    </svg>
+  `,
+};

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

@@ -0,0 +1,14 @@
+import { IconDefinition } from './icon-definition';
+
+// Custom icon.
+export const CODE_ICON: IconDefinition = {
+  name: 'et-code',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"
+      stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M5.5 5 2.5 8l3 3" />
+      <path d="M10.5 5l3 3-3 3" />
+      <path d="M9 3.5 7 12.5" />
+    </svg>
+  `,
+};

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

@@ -0,0 +1,13 @@
+import { IconDefinition } from './icon-definition';
+
+/** Horizontal three-dot glyph - the breadcrumb's "show the hidden levels" trigger. */
+export const ELLIPSIS_ICON: IconDefinition = {
+  name: 'et-ellipsis',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <circle cx="5" cy="12" r="1.75" fill="currentColor" />
+      <circle cx="12" cy="12" r="1.75" fill="currentColor" />
+      <circle cx="19" cy="12" r="1.75" fill="currentColor" />
+    </svg>
+  `,
+};

package/src/lib/icon/headless/ellipsis-vertical-icon.ts

@@ -0,0 +1,13 @@
+import { IconDefinition } from './icon-definition';
+
+/** Vertical three-dot "more actions" glyph - the table's column menu trigger. */
+export const ELLIPSIS_VERTICAL_ICON: IconDefinition = {
+  name: 'et-ellipsis-vertical',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <circle cx="12" cy="5" r="1.75" fill="currentColor" />
+      <circle cx="12" cy="12" r="1.75" fill="currentColor" />
+      <circle cx="12" cy="19" r="1.75" fill="currentColor" />
+    </svg>
+  `,
+};

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

@@ -0,0 +1,27 @@
+import { IconDefinition } from './icon-definition';
+
+// Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.
+export const EYE_ICON: IconDefinition = {
+  name: 'et-eye',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+      <path
+        fill="currentColor"
+        d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"
+      />
+    </svg>
+  `,
+};
+
+// Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.
+export const EYE_SLASH_ICON: IconDefinition = {
+  name: 'et-eye-slash',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+      <path
+        fill="currentColor"
+        d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z"
+      />
+    </svg>
+  `,
+};

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

@@ -0,0 +1,22 @@
+import { IconDefinition } from './icon-definition';
+
+export const EYEDROPPER_ICON: IconDefinition = {
+  name: 'et-eyedropper',
+  data: `
+    <svg
+      width="100%"
+      height="100%"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.8"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="m3 21 1-1h3l8.5-8.5" />
+      <path d="M4 20v-3l8.5-8.5" />
+      <path d="m15 6 2.9-2.9a2.05 2.05 0 0 1 2.9 2.9L17.9 8.9l.4.4a2.05 2.05 0 0 1-2.9 2.9l-3.6-3.6a2.05 2.05 0 0 1 2.9-2.9l.3.3Z" />
+    </svg>
+  `,
+};

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

@@ -0,0 +1,16 @@
+import { IconDefinition } from './icon-definition';
+
+export const FILE_ICON: IconDefinition = {
+  name: 'et-file',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M13 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9m-6-6 6 6m-6-6v6h6"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  `,
+};

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

@@ -0,0 +1,11 @@
+import { IconDefinition } from './icon-definition';
+
+/** Funnel glyph for a column's filter menu trigger. */
+export const FILTER_ICON: IconDefinition = {
+  name: 'et-filter',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+      <path fill="currentColor" d="M1 2h14l-5.5 6.5V14L6.5 12V8.5z" />
+    </svg>
+  `,
+};

package/src/lib/icon/headless/floppy-disk-icon.ts

@@ -0,0 +1,27 @@
+import { IconDefinition } from './icon-definition';
+
+export const FLOPPY_DISK_ICON: IconDefinition = {
+  name: 'et-floppy-disk',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M5 3h11l3 3v13a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V3z"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M8 3v6h7V3"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M8 17h8"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linecap="round"
+      />
+    </svg>
+  `,
+};

package/src/lib/icon/headless/focus-frame-icon.ts

@@ -0,0 +1,16 @@
+import { IconDefinition } from './icon-definition';
+
+export const FOCUS_FRAME_ICON: IconDefinition = {
+  name: 'et-focus-frame',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M5.75 4A1.75 1.75 0 0 0 4 5.75v12.5C4 19.216 4.784 20 5.75 20h12.5A1.75 1.75 0 0 0 20 18.25V5.75A1.75 1.75 0 0 0 18.25 4H5.75Zm0 1.5a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V5.75a.25.25 0 0 0-.25-.25H5.75Z"
+        clip-rule="evenodd"
+      />
+      <rect x="8" y="8" width="8" height="8" rx="1.25" fill="currentColor" />
+    </svg>
+  `,
+};

package/src/lib/icon/headless/grid-2x2-icon.ts

@@ -0,0 +1,17 @@
+import { IconDefinition } from './icon-definition';
+
+export const GRID_2X2_ICON: IconDefinition = {
+  name: 'et-grid-2x2',
+  data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M5.75 4A1.75 1.75 0 0 0 4 5.75v12.5C4 19.216 4.784 20 5.75 20h12.5A1.75 1.75 0 0 0 20 18.25V5.75A1.75 1.75 0 0 0 18.25 4H5.75Zm0 1.5a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V5.75a.25.25 0 0 0-.25-.25H5.75Z"
+        clip-rule="evenodd"
+      />
+      <rect x="11.25" y="5.5" width="1.5" height="13" fill="currentColor" />
+      <rect x="5.5" y="11.25" width="13" height="1.5" fill="currentColor" />
+    </svg>
+  `,
+};

package/src/lib/icon/headless/heading-1-icon.ts

@@ -0,0 +1,11 @@
+import { IconDefinition } from './icon-definition';
+
+// Custom icon.
+export const HEADING_1_ICON: IconDefinition = {
+  name: 'et-heading-1',
+  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="11" font-weight="700" text-anchor="middle" fill="currentColor">H1</text>
+    </svg>
+  `,
+};

package/src/lib/icon/headless/heading-2-icon.ts

@@ -0,0 +1,11 @@
+import { IconDefinition } from './icon-definition';
+
+// Custom icon.
+export const HEADING_2_ICON: IconDefinition = {
+  name: 'et-heading-2',
+  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="11" font-weight="700" text-anchor="middle" fill="currentColor">H2</text>
+    </svg>
+  `,
+};

package/src/lib/icon/headless/heading-3-icon.ts

@@ -0,0 +1,11 @@
+import { IconDefinition } from './icon-definition';
+
+// Custom icon.
+export const HEADING_3_ICON: IconDefinition = {
+  name: 'et-heading-3',
+  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="11" font-weight="700" text-anchor="middle" fill="currentColor">H3</text>
+    </svg>
+  `,
+};