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

package/design/sdk/foundations/colors/colors.css

@@ -11,6 +11,8 @@
     --et-surface-type: light;
     --et-surface-elevation: 0;
     --et-shadow-color-rgb: 23 23 23;
+    --et-surface-color-theme-variants:
+      brand brand-on-light, danger danger-on-light, success success-on-light, warning warning-on-light;
     --et-surface-interaction: 115 115 115;
     --et-surface-interaction-hover: 64 64 64;
     --et-surface-interaction-focus: 64 64 64;
@@ -44,6 +46,8 @@
     --et-surface-type: light;
     --et-surface-elevation: 1;
     --et-shadow-color-rgb: 23 23 23;
+    --et-surface-color-theme-variants:
+      brand brand-on-light, danger danger-on-light, success success-on-light, warning warning-on-light;
     --et-surface-interaction: 115 115 115;
     --et-surface-interaction-hover: 64 64 64;
     --et-surface-interaction-focus: 64 64 64;
@@ -51,7 +55,6 @@
     --et-surface-interaction-disabled: 180 180 180;
   }
 
-  .et-surface--default-dark,
   .et-surface--dark-elevated {
     --et-surface-background: 38 38 38;
     --et-surface-color: 250 250 250;
@@ -78,6 +81,8 @@
       --et-surface-type: light;
       --et-surface-elevation: 0;
       --et-shadow-color-rgb: 23 23 23;
+      --et-surface-color-theme-variants:
+        brand brand-on-light, danger danger-on-light, success success-on-light, warning warning-on-light;
       --et-surface-interaction: 115 115 115;
       --et-surface-interaction-hover: 64 64 64;
       --et-surface-interaction-focus: 64 64 64;
@@ -115,6 +120,8 @@
     --et-surface-type: light;
     --et-surface-elevation: 0;
     --et-shadow-color-rgb: 23 23 23;
+    --et-surface-color-theme-variants:
+      brand brand-on-light, danger danger-on-light, success success-on-light, warning warning-on-light;
     --et-surface-interaction: 115 115 115;
     --et-surface-interaction-hover: 64 64 64;
     --et-surface-interaction-focus: 64 64 64;
@@ -260,6 +267,7 @@
   }
 
   .et-color--danger {
+    --et-color-theme-type: error;
     --et-color-primary: 220 38 38;
     --et-color-primary-hover: 185 28 28;
     --et-color-primary-focus: 185 28 28;
@@ -280,6 +288,7 @@
   }
 
   .et-color--warning {
+    --et-color-theme-type: warning;
     --et-color-primary: 217 119 6;
     --et-color-primary-hover: 245 158 11;
     --et-color-primary-focus: 245 158 11;
@@ -385,16 +394,34 @@
 
 @layer base {
   @media (prefers-color-scheme: light) {
-    :root {
+    :root,
+    .et-color--brand {
       --et-color-primary-ink: 4 120 87;
       --et-color-primary-ink-hover: 6 95 70;
       --et-color-primary-ink-focus: 6 95 70;
       --et-color-primary-ink-active: 6 78 59;
       --et-color-primary-ink-disabled: 130 200 170;
     }
+
+    .et-color--danger {
+      --et-color-primary-ink: 185 28 28;
+      --et-color-primary-ink-hover: 153 27 27;
+      --et-color-primary-ink-focus: 153 27 27;
+      --et-color-primary-ink-active: 127 29 29;
+      --et-color-primary-ink-disabled: 220 150 150;
+    }
+
+    .et-color--warning {
+      --et-color-primary-ink: 146 64 14;
+      --et-color-primary-ink-hover: 120 53 15;
+      --et-color-primary-ink-focus: 120 53 15;
+      --et-color-primary-ink-active: 69 26 3;
+      --et-color-primary-ink-disabled: 220 170 120;
+    }
   }
 
-  :root.et-scheme--light {
+  :root.et-scheme--light,
+  :where(:root.et-scheme--light) .et-color--brand {
     --et-color-primary-ink: 4 120 87;
     --et-color-primary-ink-hover: 6 95 70;
     --et-color-primary-ink-focus: 6 95 70;
@@ -402,13 +429,100 @@
     --et-color-primary-ink-disabled: 130 200 170;
   }
 
-  :root.et-scheme--dark {
+  :where(:root.et-scheme--light) .et-color--danger {
+    --et-color-primary-ink: 185 28 28;
+    --et-color-primary-ink-hover: 153 27 27;
+    --et-color-primary-ink-focus: 153 27 27;
+    --et-color-primary-ink-active: 127 29 29;
+    --et-color-primary-ink-disabled: 220 150 150;
+  }
+
+  :where(:root.et-scheme--light) .et-color--warning {
+    --et-color-primary-ink: 146 64 14;
+    --et-color-primary-ink-hover: 120 53 15;
+    --et-color-primary-ink-focus: 120 53 15;
+    --et-color-primary-ink-active: 69 26 3;
+    --et-color-primary-ink-disabled: 220 170 120;
+  }
+
+  :root.et-scheme--dark,
+  :where(:root.et-scheme--dark) .et-color--brand {
+    --et-color-primary-ink: 0 255 161;
+    --et-color-primary-ink-hover: 0 255 161;
+    --et-color-primary-ink-focus: 0 255 161;
+    --et-color-primary-ink-active: 0 255 161;
+    --et-color-primary-ink-disabled: 0 255 161;
+  }
+
+  :where(:root.et-scheme--dark) .et-color--danger {
+    --et-color-primary-ink: 248 113 113;
+    --et-color-primary-ink-hover: 252 165 165;
+    --et-color-primary-ink-focus: 252 165 165;
+    --et-color-primary-ink-active: 239 68 68;
+    --et-color-primary-ink-disabled: 153 75 75;
+  }
+
+  :where(:root.et-scheme--dark) .et-color--warning {
+    --et-color-primary-ink: 245 158 11;
+    --et-color-primary-ink-hover: 251 191 36;
+    --et-color-primary-ink-focus: 251 191 36;
+    --et-color-primary-ink-active: 217 119 6;
+    --et-color-primary-ink-disabled: 133 77 14;
+  }
+
+  .et-surface--light.et-color--brand,
+  .et-surface--light .et-color--brand {
+    --et-color-primary-ink: 4 120 87;
+    --et-color-primary-ink-hover: 6 95 70;
+    --et-color-primary-ink-focus: 6 95 70;
+    --et-color-primary-ink-active: 6 78 59;
+    --et-color-primary-ink-disabled: 130 200 170;
+  }
+
+  .et-surface--light.et-color--danger,
+  .et-surface--light .et-color--danger {
+    --et-color-primary-ink: 185 28 28;
+    --et-color-primary-ink-hover: 153 27 27;
+    --et-color-primary-ink-focus: 153 27 27;
+    --et-color-primary-ink-active: 127 29 29;
+    --et-color-primary-ink-disabled: 220 150 150;
+  }
+
+  .et-surface--light.et-color--warning,
+  .et-surface--light .et-color--warning {
+    --et-color-primary-ink: 146 64 14;
+    --et-color-primary-ink-hover: 120 53 15;
+    --et-color-primary-ink-focus: 120 53 15;
+    --et-color-primary-ink-active: 69 26 3;
+    --et-color-primary-ink-disabled: 220 170 120;
+  }
+
+  .et-surface--dark.et-color--brand,
+  .et-surface--dark .et-color--brand {
     --et-color-primary-ink: 0 255 161;
     --et-color-primary-ink-hover: 0 255 161;
     --et-color-primary-ink-focus: 0 255 161;
     --et-color-primary-ink-active: 0 255 161;
     --et-color-primary-ink-disabled: 0 255 161;
   }
+
+  .et-surface--dark.et-color--danger,
+  .et-surface--dark .et-color--danger {
+    --et-color-primary-ink: 248 113 113;
+    --et-color-primary-ink-hover: 252 165 165;
+    --et-color-primary-ink-focus: 252 165 165;
+    --et-color-primary-ink-active: 239 68 68;
+    --et-color-primary-ink-disabled: 153 75 75;
+  }
+
+  .et-surface--dark.et-color--warning,
+  .et-surface--dark .et-color--warning {
+    --et-color-primary-ink: 245 158 11;
+    --et-color-primary-ink-hover: 251 191 36;
+    --et-color-primary-ink-focus: 251 191 36;
+    --et-color-primary-ink-active: 217 119 6;
+    --et-color-primary-ink-disabled: 133 77 14;
+  }
 }
 
 @layer base {
@@ -421,6 +535,8 @@
     --et-surface-type: light;
     --et-surface-elevation: 1;
     --et-shadow-color-rgb: 23 23 23;
+    --et-surface-color-theme-variants:
+      brand brand-on-light, danger danger-on-light, success success-on-light, warning warning-on-light;
     --et-surface-interaction: 115 115 115;
     --et-surface-interaction-hover: 64 64 64;
     --et-surface-interaction-focus: 64 64 64;
@@ -454,6 +570,8 @@
       --et-surface-type: light;
       --et-surface-elevation: 1;
       --et-shadow-color-rgb: 23 23 23;
+      --et-surface-color-theme-variants:
+        brand brand-on-light, danger danger-on-light, success success-on-light, warning warning-on-light;
       --et-surface-interaction: 115 115 115;
       --et-surface-interaction-hover: 64 64 64;
       --et-surface-interaction-focus: 64 64 64;
@@ -489,6 +607,8 @@
     --et-surface-type: light;
     --et-surface-elevation: 1;
     --et-shadow-color-rgb: 23 23 23;
+    --et-surface-color-theme-variants:
+      brand brand-on-light, danger danger-on-light, success success-on-light, warning warning-on-light;
     --et-surface-interaction: 115 115 115;
     --et-surface-interaction-hover: 64 64 64;
     --et-surface-interaction-focus: 64 64 64;

package/design/sdk/foundations/colors/colors.ts

@@ -171,7 +171,7 @@ const render = (props: Props): Drawing => {
 
 export default definePart<Props>({
   note: 'The SDK colour tokens: a light and a dark surface, the demo colour themes brand, danger and warning with their on-light variants, and the AA contrast of text and fills. Every frame loads it before the part styles. Generated by tools/scripts/generate-sdk-tokens.mjs from the Storybook themes; never edit the CSS by hand.',
-  madeBy: ['claude-opus-5-5'],
+  madeBy: ['claude-opus-5-5', 'claude-sonnet-5-5'],
   states: {
     'surface-light': { group: 'surface', surface: 'light' },
     'surface-dark': { group: 'surface', surface: 'dark' },

package/design/sdk/foundations/colors/shared/contrast.ts

@@ -38,7 +38,7 @@ const pair = (label: string, fill: string, ink: string, fixed: boolean) => {
   const ratio = contrastRatio(fill, ink);
 
   return html`<span class="sdk-pair" style="background: rgb(${fill}); color: rgb(${ink})">Aa</span>
-    <span class="sdk-pair-label${fixed ? ' sdk-fixed' : ''}">${label}</span>
+    <span class="sdk-pair-label ${fixed ? 'sdk-fixed' : ''}">${label}</span>
     <code class="sdk-value">${fill} / ${ink}</code>
     <strong class="sdk-ratio" data-pass="${ratio >= AA}"
       >${ratio.toFixed(2)}:1 ${ratio >= AA ? 'AA' : 'below AA'}</strong

package/design/sdk/foundations/elevation/elevation.css

@@ -0,0 +1,6 @@
+@media (prefers-color-scheme: dark) {
+  .sdk-ring {
+    --et-surface-ring-solid: color-mix(in srgb, var(--et-surface-color-solid) 24%, var(--et-surface-background-solid));
+    --sdk-elevation-edge: var(--et-surface-ring-solid);
+  }
+}

package/design/sdk/foundations/elevation/elevation.ts

@@ -0,0 +1,11 @@
+import { definePart } from '@design-system';
+import { ELEVATION_STATES, elevationScene, type ElevationProps } from './shared/elevation/scene';
+import edge from './elevation.css?inline';
+
+export default definePart<ElevationProps>({
+  note: 'How the SDK lifts things off the base surface: a card, an elevated panel and an overlay pane (the select panel mock), side by side and as a pane over a panel. Fills come from the elevated surface tokens; no background colour differs from the product. In the dark scheme a 1 px ring in --et-surface-ring-solid (24 % --et-surface-color-solid over the fill) replaces the border colour. The token is defined here; the generator does not emit it yet.',
+  madeBy: ['claude-opus-5-5'],
+  states: ELEVATION_STATES,
+  render: (props: ElevationProps) =>
+    elevationScene(props, { card: 'sdk-ring', panel: 'sdk-ring', pane: 'sdk-ring' }, edge),
+});

package/design/sdk/foundations/elevation/shared/elevation/scene.css

@@ -0,0 +1,101 @@
+.sdk-elevation {
+  box-sizing: border-box;
+  width: max-content;
+  padding: 4rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+}
+
+.sdk-elevation-row {
+  display: flex;
+  gap: 4rem;
+  align-items: flex-start;
+}
+
+.sdk-elevation-card,
+.sdk-elevation-panel,
+.sdk-elevation-pane-panel {
+  --sdk-elevation-edge: var(--et-surface-border-solid);
+  --sdk-elevation-highlight: 0 0 0 0 transparent;
+
+  box-sizing: border-box;
+  border: 0.1rem solid var(--sdk-elevation-edge);
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  box-shadow: var(--sdk-elevation-highlight), var(--sdk-elevation-shadow);
+}
+
+.sdk-elevation-card {
+  --sdk-elevation-shadow:
+    0 0.3rem 0.8rem rgb(var(--et-shadow-color-rgb) / 0.2), 0 0.1rem 0.3rem rgb(var(--et-shadow-color-rgb) / 0.12);
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  width: 20rem;
+  padding: 1.6rem;
+  border-radius: 1.2rem;
+}
+
+.sdk-elevation-panel {
+  --sdk-elevation-shadow:
+    0 0.6rem 1.2rem rgb(var(--et-shadow-color-rgb) / 0.22), 0 0.2rem 0.4rem rgb(var(--et-shadow-color-rgb) / 0.14);
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  width: 28rem;
+  padding: 2rem;
+  border-radius: 1.6rem;
+}
+
+.sdk-elevation-pane-panel {
+  --sdk-elevation-shadow: var(--et-anchored-panel-shadow, 0 1rem 2.4rem rgb(var(--et-shadow-color-rgb) / 0.16));
+
+  width: 22rem;
+}
+
+.sdk-elevation-pane {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.sdk-elevation-label {
+  color: var(--et-surface-color-muted-solid);
+  font-size: 1.2rem;
+}
+
+.sdk-elevation-muted {
+  color: var(--et-surface-color-muted-solid);
+}
+
+.sdk-elevation-line {
+  height: 3.2rem;
+  margin-top: 0.8rem;
+  border-radius: 0.6rem;
+  background: color-mix(in srgb, var(--et-surface-interaction-solid) 12%, transparent);
+}
+
+.sdk-elevation-line--short {
+  width: 60%;
+  margin-top: 0;
+}
+
+.sdk-elevation-stack {
+  position: relative;
+  width: 40rem;
+  height: 30rem;
+}
+
+.sdk-elevation-stack .sdk-elevation-panel {
+  width: 32rem;
+  height: 22rem;
+}
+
+.sdk-elevation-pane--over {
+  position: absolute;
+  top: 12rem;
+  left: 16rem;
+}

package/design/sdk/foundations/elevation/shared/elevation/scene.ts

@@ -0,0 +1,74 @@
+import { selectOption, selectPanel, selectStyles } from '@ethlete/components/design/select';
+import { drawing, html } from '@design-system';
+import sceneStyles from './scene.css?inline';
+
+export type ElevationProps = { scene: 'overview' | 'stacked' };
+
+/** The variant's class for each elevated thing. */
+type ElevationEdges = { card: string; panel: string; pane: string };
+
+const OPTIONS = [
+  { value: 'drafts', label: 'Drafts' },
+  { value: 'review', label: 'In review' },
+  { value: 'merged', label: 'Merged' },
+  { value: 'archived', label: 'Archived' },
+];
+
+const pane = (id: string, edge: string) =>
+  selectPanel({
+    id,
+    color: 'brand',
+    content: OPTIONS.map((option) =>
+      selectOption(option, {
+        id: `${id}-${option.value}`,
+        selected: option.value === 'review',
+        active: option.value === 'merged' ? 'keyboard' : undefined,
+      }),
+    ).join(''),
+  }).replace(
+    '<et-select-panel class="',
+    `<et-select-panel data-et-surface-fill class="sdk-elevation-pane-panel ${edge} `,
+  );
+
+const card = (edge: string) =>
+  html`<article class="sdk-elevation-card ${edge} et-surface--inherited" data-et-surface-fill>
+    <span class="sdk-elevation-label">Card</span>
+    <strong>Season 2026</strong>
+    <span class="sdk-elevation-muted">12 matches, 3 open</span>
+  </article>`;
+
+const panel = (edge: string) =>
+  html`<section class="sdk-elevation-panel ${edge} et-surface--inherited" data-et-surface-fill>
+    <span class="sdk-elevation-label">Panel</span>
+    <strong>Edit match</strong>
+    <span class="sdk-elevation-muted">Kick-off, venue and referee</span>
+    <div class="sdk-elevation-line"></div>
+    <div class="sdk-elevation-line sdk-elevation-line--short"></div>
+  </section>`;
+
+const overview = (edges: ElevationEdges) =>
+  html`<div class="sdk-elevation-row">
+    ${card(edges.card)} ${panel(edges.panel)}
+    <div class="sdk-elevation-pane">
+      <span class="sdk-elevation-label">Overlay pane</span>
+      ${pane('overview', edges.pane)}
+    </div>
+  </div>`;
+
+const stacked = (edges: ElevationEdges) =>
+  html`<div class="sdk-elevation-stack">
+    ${panel(edges.panel)}
+    <div class="sdk-elevation-pane sdk-elevation-pane--over">${pane('stacked', edges.pane)}</div>
+  </div>`;
+
+/** Draws the elevated things of one scene on the base surface, each with its class from `edges`. */
+export const elevationScene = ({ scene }: ElevationProps, edges: ElevationEdges, styles: string) =>
+  drawing({
+    body: html`<div class="sdk-elevation">${scene === 'overview' ? overview(edges) : stacked(edges)}</div>`,
+    styles: [selectStyles, sceneStyles, styles].join('\n'),
+  });
+
+export const ELEVATION_STATES = {
+  overview: { scene: 'overview' },
+  stacked: { scene: 'stacked' },
+} satisfies Record<string, ElevationProps>;

package/design/sdk/foundations/icons/icons.ts

@@ -0,0 +1,119 @@
+import { SDK_ICONS } from '@ethlete/components/design/icon-set';
+import { definePart, iconSheet } from '@design-system';
+
+const GRID = 16;
+
+const PADDING = 1;
+
+const svg = (body: 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" stroke-linejoin="round">${body}</svg>`;
+
+const FILL = 'fill="currentColor" stroke="none"';
+
+const REDRAWN: Record<string, string> = {
+  'et-arrow-out-up-right': svg(
+    '<path d="M5.5 5.5H4A1.5 1.5 0 0 0 2.5 7v5A1.5 1.5 0 0 0 4 13.5h5a1.5 1.5 0 0 0 1.5-1.5v-1.5"/><path d="M9.5 2.5h4v4M13.5 2.5l-6 6"/>',
+  ),
+  'et-arrow-right': svg('<path d="M2.5 8.5h11M9 4l4.5 4.5L9 13"/>'),
+  'et-arrow-up': svg('<path d="M8.5 13.5v-11M4 7l4.5-4.5L13 7"/>'),
+  'et-arrows-left-right': svg('<path d="M2 8.5h12M5.5 5 2 8.5 5.5 12M10.5 5 14 8.5 10.5 12"/>'),
+  'et-calendar': svg('<rect x="2.5" y="3.5" width="11" height="10" rx="1.5"/><path d="M5.5 2v3M10.5 2v3M2.5 6.5h11"/>'),
+  'et-check': svg('<path d="M2.5 8.5 6 12l7.5-7.5"/>'),
+  'et-chevron': svg('<path d="M3 10.5 8 5.5l5 5"/>'),
+  'et-circle-check': svg('<circle cx="8" cy="8" r="6.25"/><path d="M5.25 8.25 7.2 10.2 10.75 6.5"/>'),
+  'et-circle-info': svg(
+    `<circle cx="8" cy="8" r="6.25"/><path d="M8 7.25V11"/><circle cx="8" cy="4.75" r=".85" ${FILL}/>`,
+  ),
+  'et-clipboard-check': svg(
+    '<path d="M5.5 3.5H4A1.5 1.5 0 0 0 2.5 5v7A1.5 1.5 0 0 0 4 13.5h8a1.5 1.5 0 0 0 1.5-1.5V5A1.5 1.5 0 0 0 12 3.5h-1.5"/><rect x="5.5" y="2" width="5" height="2.5" rx=".75"/><path d="M5.5 9 7.25 10.75 10.5 7.5"/>',
+  ),
+  'et-clock': svg('<circle cx="8" cy="8" r="6.25"/><path d="M8 4.5V8l2.5 1.5"/>'),
+  'et-ellipsis': svg(
+    `<circle cx="3" cy="8" r="1.25" ${FILL}/><circle cx="8" cy="8" r="1.25" ${FILL}/><circle cx="13" cy="8" r="1.25" ${FILL}/>`,
+  ),
+  'et-ellipsis-vertical': svg(
+    `<circle cx="8" cy="3" r="1.25" ${FILL}/><circle cx="8" cy="8" r="1.25" ${FILL}/><circle cx="8" cy="13" r="1.25" ${FILL}/>`,
+  ),
+  'et-eye': svg(
+    '<path d="M1.75 8C3 5.5 5.25 3.5 8 3.5s5 2 6.25 4.5C13 10.5 10.75 12.5 8 12.5S3 10.5 1.75 8Z"/><circle cx="8" cy="8" r="2"/>',
+  ),
+  'et-eye-slash': svg(
+    '<mask id="et-eye-slash-cut"><rect width="16" height="16" fill="#fff"/><path d="M2.5 2.5l11 11" stroke="#000" stroke-width="4.2"/></mask><g mask="url(#et-eye-slash-cut)"><path d="M1.75 8C3 5.5 5.25 3.5 8 3.5s5 2 6.25 4.5C13 10.5 10.75 12.5 8 12.5S3 10.5 1.75 8Z"/><circle cx="8" cy="8" r="2"/></g><path d="M2.5 2.5l11 11"/>',
+  ),
+  'et-eyedropper': svg(
+    '<path d="M2 14l.67-.67h2l5.67-5.67"/><path d="M2.67 13.33v-2l5.67-5.67"/><path d="M10 4l1.93-1.93a1.37 1.37 0 0 1 1.93 1.93L11.93 5.93l.27.27a1.37 1.37 0 0 1-1.93 1.93l-2.4-2.4a1.37 1.37 0 0 1 1.93-1.93l.2.2Z"/>',
+  ),
+  'et-file': svg(
+    '<path d="M9 2H5a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 5 14h6a1.5 1.5 0 0 0 1.5-1.5V5.5M9 2l3.5 3.5M9 2v3.5h3.5"/>',
+  ),
+  'et-floppy-disk': svg(
+    '<path d="M2.5 2.5H11l2.5 2.5v7a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 12Z"/><path d="M5.5 2.5v3h4v-3M5.5 10.5h5"/>',
+  ),
+  'et-focus-frame': svg(
+    `<rect x="2.5" y="2.5" width="11" height="11" rx="1.5"/><rect x="5.5" y="5.5" width="5" height="5" rx=".75" ${FILL}/>`,
+  ),
+  'et-grid-2x2': svg('<rect x="2.5" y="2.5" width="11" height="11" rx="1.5"/><path d="M8 2.5v11M2.5 8h11"/>'),
+  'et-image': svg(
+    `<rect x="1.5" y="2.5" width="13" height="11" rx="1.5"/><circle cx="5.25" cy="5.75" r="1.1" ${FILL}/><path d="M3.75 11 6.5 8l1.6 1.75L10 6.5l2.25 4.5Z" ${FILL}/>`,
+  ),
+  'et-location': svg(
+    '<path d="M8 14.25s-4.75-4.2-4.75-7.75a4.75 4.75 0 0 1 9.5 0c0 3.55-4.75 7.75-4.75 7.75Z"/><circle cx="8" cy="6.5" r="1.75"/>',
+  ),
+  'et-lock': svg(
+    `<path d="M5.5 7.5V4.75a2.5 2.5 0 0 1 5 0V7.5"/><rect x="2.5" y="7.5" width="11" height="6" rx="1.5"/><circle cx="8" cy="10.5" r="1" ${FILL}/>`,
+  ),
+  'et-minus': svg('<path d="M3.5 8.5h10"/>'),
+  'et-pause': svg(
+    `<rect x="4" y="3" width="3" height="10" rx=".75" ${FILL}/><rect x="9" y="3" width="3" height="10" rx=".75" ${FILL}/>`,
+  ),
+  'et-pencil': svg(
+    '<path d="M2.5 13.5l.75-3.1L9.6 4.05a1.3 1.3 0 0 1 1.85 0l.5.5a1.3 1.3 0 0 1 0 1.85L5.6 12.75Z"/><path d="M8.5 5.25l2.25 2.25"/>',
+  ),
+  'et-play': svg('<path d="M5 3.5v9l7.5-4.5Z" fill="currentColor"/>'),
+  'et-plus': svg('<path d="M8.5 3.5v10M3.5 8.5h10"/>'),
+  'et-quote': svg(
+    `<path d="M6.5 4.5C4.5 5.17 3.5 6.83 3.5 8.83V11.5H7V8H5.17c0-1.33.47-2.2 1.33-2.67Z" ${FILL}/><path d="M12.5 4.5c-2 .67-3 2.33-3 4.33v2.67H13V8h-1.83c0-1.33.47-2.2 1.33-2.67Z" ${FILL}/>`,
+  ),
+  'et-redo': svg('<path d="M10 10l3.5-3.5L10 3M13.5 6.5h-7a3.5 3.5 0 0 0 0 7h2"/>'),
+  'et-rotate-right': svg(
+    '<path d="M2.75 6A5.5 5.5 0 0 1 12.25 4M13.5 2v4h-4M13.25 10A5.5 5.5 0 0 1 3.75 12M2.5 14v-4h4"/>',
+  ),
+  'et-star': svg(
+    '<path d="M8 2.5l1.62 3.88 4.18.33-3.18 2.74.97 4.09L8 11.35l-3.59 2.19.97-4.09L2.2 6.71l4.18-.33Z" fill="currentColor"/>',
+  ),
+  'et-thumbtack': svg('<path d="M6 2.5h4M6.75 2.5v3.75L4.5 9.5h7L9.25 6.25V2.5M8 9.5v4"/>'),
+  'et-times': svg('<path d="M4 4l8 8M12 4l-8 8"/>'),
+  'et-trash': svg(
+    '<path d="M2.5 4h11M6 4V2.75A.75.75 0 0 1 6.75 2h2.5a.75.75 0 0 1 .75.75V4M3.75 4l.7 8.75A1.25 1.25 0 0 0 5.7 14h4.6a1.25 1.25 0 0 0 1.25-1.25l.7-8.75M6.5 7v4M9.5 7v4"/>',
+  ),
+  'et-triangle-exclamation': svg(
+    `<path d="M8 1.75 14.25 13.75H1.75Z"/><path d="M8 6.25v3"/><circle cx="8" cy="11.4" r=".85" ${FILL}/>`,
+  ),
+  'et-trophy': svg(
+    '<path d="M4.5 2.5h7V6a3.5 3.5 0 0 1-7 0Z"/><path d="M4.5 3.5h-2v1a2.5 2.5 0 0 0 2.2 2.48M11.5 3.5h2v1a2.5 2.5 0 0 1-2.2 2.48M8 9.5v2M5 13.5h6l-.5-2h-5Z"/>',
+  ),
+  'et-undo': svg('<path d="M6 10 2.5 6.5 6 3M2.5 6.5h7a3.5 3.5 0 0 1 0 7h-2"/>'),
+  'et-upload': svg(
+    '<path d="M8 10V2.5M4.5 6 8 2.5 11.5 6M2.5 10.5V12A1.5 1.5 0 0 0 4 13.5h8a1.5 1.5 0 0 0 1.5-1.5v-1.5"/>',
+  ),
+};
+
+const icons = SDK_ICONS.map((icon) => {
+  const name = icon.variant ? `${icon.name}--${icon.variant}` : icon.name;
+
+  return { name, svg: REDRAWN[name] ?? icon.data, grid: GRID, padding: PADDING };
+});
+
+const titles = {
+  catalogue: `Icons: the ${SDK_ICONS.length} icons the SDK ships, at each size a component draws`,
+  construction: `Every icon on the ${GRID} px candidate grid: pixel lines, centre lines, and the ${PADDING} px padding`,
+};
+
+type View = 'catalogue' | 'construction';
+
+export default definePart<{ view: View }>({
+  note: "Today's look",
+  madeBy: ['claude-opus-5-5'],
+  states: { catalogue: { view: 'catalogue' }, construction: { view: 'construction' } },
+  render: ({ view }) => iconSheet({ view, title: titles[view], icons, sizes: [16, 20, 24] }),
+});