@holistics/anfra-design 0.16.0 → 0.17.0

package/DESIGN.md

@@ -194,7 +194,7 @@ Colors are in `tokens.css`, in two tiers, after the Holistics Design System. A h
 | --- | --- | --- |
 | 1 Primitives | `--anfra-{ink,paper,violet,red,amber,green,white,black}-{step}`, OKLCH | Tier 2 only |
 | 2 Semantic | `--anfra-color-{scope}-{semantic}-{state}`, scope = `background`, `text`, `icon`, `border`, `focus-ring` | Every component, in every host |
-| 3 Host aliases | Cloud: Tailwind's `text-weak`, `bg-hover`, shadcn's `--primary`. appserve: its stylesheet | That host's components |
+| 3 Host aliases | Tailwind's `text-weak`, `bg-hover`, shadcn's `--primary`, in Cloud and appserve alike | That host's components |
 
 The same word is a different color for each scope: `--anfra-color-text-weak`, `--anfra-color-background-hover`, `--anfra-color-border-strong`, `--anfra-color-icon-weak`. Below, a token is named without its `--anfra-color-` prefix.
 
@@ -204,8 +204,9 @@ The same word is a different color for each scope: `--anfra-color-text-weak`, `-
 - **Status** is restrained red, amber and green; info is neutral ink, never blue or violet. A status always has a label or an icon, and never fills a large surface: `background-{danger,warning,success,info}-secondary-default` behind `text-{s}-default`.
 - **Disabled** is `background-disabled` and `text-disabled`, plus `border-disabled` on a control with a border. Never lower the opacity instead.
 - **Neutral states** are `background-hover` and `background-active`; they work on paper and on white.
+- **Fills**: a filled control (the secondary button, a tab list's track) rests on `background-fill-default` and hovers on `background-fill-hover`; the open tab is `background-fill-selected`. A fill is a tint of whatever it sits on, so the same control reads on the panel, a card or a well.
 - **Errors**: `text-danger-default` {colors.error-text} for error text; `background-danger-default` {colors.error} is the solid fill, never text.
-- **Dark** redefines Tier 2 only, under `.dark` or `[data-theme="dark"]` on `<html>`. A host follows the system by default; light and dark are choices, stored per device.
+- **Dark** redefines Tier 2 only, under `.dark` or `[data-theme="dark"]` on `<html>`. A host follows the system by default; light and dark are choices, stored per device. Dark is its own set of surfaces, not the light values swapped: see Elevation.
 
 ## Typography
 
@@ -237,20 +238,53 @@ One density for every screen, on a 4px unit {spacing.unit}.
 
 ## Elevation & Depth
 
-Depth comes from tone and hairlines: paper behind, white in front, 1px rules between. Shadows are neutral ink, never colored, and only two exist: `--anfra-e1` for a resting card, `--anfra-e2` for what floats (menus, popovers, dialogs). On dark, both become a border.
+Depth comes from tone and hairlines: paper behind, white in front, 1px rules between. Shadows are neutral ink, never colored, and only two exist: `--anfra-e1` for a resting card, `--anfra-e2` for what floats (menus, popovers, dialogs). `--anfra-e2` carries its own edge, a translucent 1px ring, so a menu needs no border and reads on any ground. On dark, a shadow doesn't show: e1 becomes a border and e2 a translucent white ring.
+
+**On dark, lighter is closer.** Each layer up is a step lighter: the chrome (`ink-1000`), the panel (`ink-925`), a card (`ink-875`), what floats (`ink-825`). A well is recessed, so it is darker than the panel it sits in. A control is not: its fill is a translucent white over its ground, so a secondary button or a tab list's track is lighter than the ground under it, and the open tab lighter again. In light the same fills are a translucent ink, a tint just darker than the ground, since nothing is lighter than white; there the open tab is white, raised by e1.
+
+| Role | Light | Dark |
+| --- | --- | --- |
+| A control's fill (`background-fill-default`) | ink 4% over the ground | white 4% over the ground |
+| Hover on it (`background-fill-hover`) | ink 8% | white 8% |
+| The open tab (`background-fill-selected`) | white, e1 | white 8% over the track, e1 |
 
 ## Shapes
 
 Soft, not round. Controls and surfaces nest by radius: the smaller the thing, the smaller the corner.
 
-- `--anfra-radius-md` {rounded.md}: menu items, nav items, chips, tooltips.
-- `--anfra-radius-lg` {rounded.lg}: buttons, fields, alerts.
+- `--anfra-radius-md` {rounded.md}: nav items, chips, tooltips, and controls under 32px (xs and sm buttons, the small tab list).
+- `--anfra-radius-lg` {rounded.lg}: buttons, fields, alerts, at 32px and up.
 - `--anfra-radius-xl` {rounded.xl}: cards, popovers, dialogs, the panel.
 - `--anfra-radius-pill` {rounded.pill}: status pills and counters only, never buttons.
 
+**Nested corners are concentric.** A part that sits in a container's corner, closer to its edge than the container's radius, takes the container's radius less the gap between them, written as that `calc()` so it follows the tokens. A part flush with the edge takes the container's radius; a part further in than the radius takes its own from the scale. The gap is even on the sides the part is near, so the track around it is too.
+
+| Part, in its container | Gap | Radius |
+| --- | --- | --- |
+| A tab in its list | 3px | `lg` − 3 = 7px |
+| A tab in a small list (`data-size="sm"`) | 2px | `md` − 2 = 4px |
+| A menu item in its menu, a palette entry in the palette | 4px | `xl` − 4 = 10px |
+| A key hint in a field | 6px | `lg` − 6 = 4px |
+
+`components.test.mjs` holds the class layer's pairs to this.
+
 ## Components
 
-Each host builds these from its own toolkit (Cloud: shadcn-vue; appserve and the SDK: plain HTML and CSS), and each looks the same.
+Cloud and appserve build these with shadcn-vue (appserve's are in `web/appserve/src/components/ui`). The SDK's plugin panel is framework-free DOM in shadow roots, with no component library, so it uses the class layer, `components.css`: each class draws what the shadcn component of its name draws in Cloud, from the same Tier 2 tokens. Variants and sizes are data attributes, as in shadcn.
+
+| Class | Cloud's component | Variants |
+| --- | --- | --- |
+| `.a-button` | Button | `data-variant` default, outline, secondary, ghost, destructive, link; `data-size` xs, sm, default, lg, icon, icon-xs, icon-sm, icon-lg |
+| `.a-input` | Input | `aria-invalid="true"` for an error; a field with an icon is a `label.a-input` around the icon and a bare `input` |
+| `.a-badge` | Badge | `data-variant` default, secondary, outline, destructive, warning, success; `data-size="icon"` for a badge holding one icon or glyph, square |
+| `.a-pill` | StatusPill | `data-tone` neutral, highlight, success, warning, danger |
+| `.a-tabs`, `.a-tab` | TabsList, TabsTrigger | `data-variant="line"` on the list; `data-size="sm"` for a 24px list with a 2px track; the open tab is `aria-selected="true"`, or `aria-pressed="true"` in a group of toggles |
+| `.a-menu`, `.a-menu-item`, `.a-menu-label`, `.a-menu-separator`, `.a-menu-shortcut` | DropdownMenu | `data-variant="destructive"` on an item; `data-highlighted` for a keyboard highlight |
+| `.a-tooltip` | TooltipContent | |
+| `.a-kbd`, `.a-kbd-group` | Kbd, KbdGroup | a combination is a group, one Kbd per key |
+| `.a-nav-label`, `.a-nav-item`, `.a-tree`, `.a-tree-row` | SidebarGroupLabel, SidebarMenuButton, SidebarMenuSub, SidebarMenuSubButton | `data-size="sm"` on a nav item; the current page is `aria-current="page"` |
+
+A change to a Cloud component's look is a change to its class here, in the same release.
 
 ### Buttons
 
@@ -268,7 +302,7 @@ Each host builds these from its own toolkit (Cloud: shadcn-vue; appserve and the
 
 ### Fields
 
-- **Rest**: white, `border-field`, the body role, `text-placeholder` for the placeholder.
+- **Rest**: white, `border-strong` (the outline button's edge), the body role, `text-placeholder` for the placeholder. **Hover**: `border-hover`. A checkbox or a switch track keeps `border-field`, its 3:1 boundary.
 - **Focus**: no outline; the border turns violet (`border-highlight-strong`) and doubles to 2px.
 - **Error**: the border is red (`border-danger-strong`) at rest and on focus, never violet. The message is `text-danger-default` under the field and clears as soon as the user types again.
 
@@ -276,16 +310,18 @@ Each host builds these from its own toolkit (Cloud: shadcn-vue; appserve and the
 
 - **Current nav item**: on the paper, a white chip with a violet icon; in a nav inside the panel (tabs, settings), `background-active` and weight 500. Both carry `aria-current="page"` or `aria-selected`.
 - **Alerts**: a tinted container with an icon and the body role.
+- **A control keeps its edge on any ground**: a control's fill is translucent (`background-fill-*`), never a surface color, so a tab list or a secondary button in a well (`background-secondary-default`) still stands off it.
 - **Badges and status pills**: caption at 500, a label or an icon always beside the color.
 - **Tooltips**: inverse ink (`background-inverted-default`, `text-inverted-default`), the caption role, `--anfra-radius-md`.
+- **Shortcuts**: a combination is a KbdGroup, one Kbd per key, beside the command it runs (a field's hint, a palette entry). On a Mac the modifiers are its symbols (⌘ ⌥ ⇧ ⌃), elsewhere their names (Ctrl, Alt, Shift).
 
 ### Icons
 
-Lucide, at 16px in controls and 14px in dense rows, `currentColor`, never filled. Core draws the same icons from their path data, so it carries no icon library.
+Lucide, at 16px in controls and 14px in dense rows, `currentColor`, a 2px round stroke, never filled. Cloud and appserve import them from `@lucide/vue`. The SDK's plugin panel, framework-free, draws the same icons from their path data, so it carries no icon library: `@holistics/anfra-design/icons` exports `ICONS`, each icon's path data on a 24px grid, by the name it has in anfra (`sidebar`, `lineage`, `type-date`), generated from lucide by `scripts/icons.mjs`. To add one, add its name and lucide's to that script and run `pnpm --filter @holistics/anfra-design icons`.
 
 ### Logo
 
-The product shows the logomark only: violet on light, the inverse on dark, at the top of the sidebar. Never set the mark beside typed "anfra".
+The product shows the logomark only: violet on light, the inverse on dark (`--anfra-color-icon-logo`), at the top of the sidebar. Never set the mark beside typed "anfra".
 
 ## Do's and Don'ts
 
@@ -307,6 +343,7 @@ The product shows the logomark only: violet on light, the inverse on dark, at th
 
 - "anfra" is lowercase, even first in a sentence.
 - Text of one sentence has no end period; two or more sentences keep all of theirs.
+- Labels, headings and group labels are sentence case. Never uppercase text with CSS; only the mono-label role (kinds, revisions) is uppercase.
 - Users read "organization", never "org", "tenant" or "workspace". Code and URLs keep `org`.
 
 ## Accessibility
@@ -317,9 +354,9 @@ The product shows the logomark only: violet on light, the inverse on dark, at th
 
 ## Implementation
 
-- **Package**: `@holistics/anfra-design`, released with anfra at its version. `index.css` imports `fonts.css`, `tokens.css` and `type.css`.
+- **Package**: `@holistics/anfra-design`, released with anfra at its version. `index.css` imports `fonts.css`, `tokens.css`, `type.css` and `components.css`; `icons` is a module.
 - **anfra Cloud** imports it in `web/src/main.css` and maps Tier 2 onto Tailwind and shadcn's aliases there.
-- **appserve** imports it in `web/appserve/src/style.css`; its stylesheet uses Tier 2 tokens only.
+- **appserve** imports `fonts.css`, `tokens.css` and `type.css` in `web/appserve/src/main.ts`, and maps Tier 2 onto Tailwind and shadcn's aliases in `web/appserve/src/theme.css`, as Cloud does; it doesn't import the class layer.
 - **The SDK's plugin UI** reads the theme a host passes (`--anfra-color-bg` and the rest, `web/sdk/src/common/theme.ts`); a host takes those from Tier 2.
 - **To change a rule or a token**: a PR here, with `tokens.css` and this file in step; then each host takes the release. A rule for one page goes in that page's spec, not here.
-- **Checks**: `pnpm --filter @holistics/anfra-design test` (every reference resolves, dark redefines only Tier 2, only Tier 1 holds raw colors); `npx @google/design.md lint web/design/DESIGN.md`.
+- **Checks**: `pnpm --filter @holistics/anfra-design test` (every reference resolves, dark redefines only Tier 2, only Tier 1 holds raw colors, the class layer reads only Tier 2, `icons.js` is what the script writes); `npx @google/design.md lint web/design/DESIGN.md`.

package/components.css

@@ -0,0 +1,440 @@
+/*
+ * The class layer: anfra's components as plain CSS, for framework-free UI that has no Vue or React
+ * to draw shadcn with: the SDK's plugin panel, DOM in shadow roots. A Vue app (appserve, anfra
+ * Cloud) uses the shadcn-vue components instead. Each class draws what anfra Cloud's shadcn
+ * component of the same name draws, variant for variant, on the Tier 2 tokens alone, so a token
+ * change reaches both. Variants and sizes are data attributes:
+ *
+ *   <button class="a-button" data-variant="outline" data-size="sm">Save</button>
+ *
+ * A page that uses it wears tokens.css and type.css too (index.css has all three). A shadow root
+ * gets the tokens from its page, or from a host that sets them on it (the SDK does, from its theme).
+ * Hover applies only where there is one, as Tailwind's hover: does.
+ */
+
+/* Button: shadcn's Button. Variants default (filled), outline, secondary, ghost, destructive, link;
+   sizes xs, sm, default, lg, and icon-xs, icon-sm, icon, icon-lg (square). */
+.a-button {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: var(--anfra-radius-lg);
+  background-clip: padding-box;
+  background-color: var(--anfra-color-background-highlight-default);
+  color: var(--anfra-color-text-on-fill);
+  font: var(--anfra-type-label);
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  transition: background-color 160ms var(--anfra-ease-out), border-color 160ms var(--anfra-ease-out),
+    color 160ms var(--anfra-ease-out), scale 160ms var(--anfra-ease-out);
+}
+.a-button svg { flex-shrink: 0; width: 16px; height: 16px; pointer-events: none; }
+.a-button:active:not([aria-haspopup]) { scale: 0.97; transition-duration: 90ms; }
+.a-button:is(:disabled, [aria-disabled="true"]) {
+  pointer-events: none;
+  border-color: var(--anfra-color-border-disabled);
+  background-color: var(--anfra-color-background-disabled);
+  color: var(--anfra-color-text-disabled);
+}
+.a-button[aria-invalid="true"] { border-color: var(--anfra-color-border-danger-strong); }
+.a-button:active { background-color: var(--anfra-color-background-highlight-active); }
+@media (hover: hover) {
+  .a-button:hover { background-color: var(--anfra-color-background-highlight-hover); }
+}
+
+.a-button[data-variant="outline"] {
+  border-color: var(--anfra-color-border-strong);
+  background-color: var(--anfra-color-background-default);
+  color: var(--anfra-color-text-default);
+}
+@media (hover: hover) {
+  .a-button[data-variant="outline"]:hover { border-color: var(--anfra-color-border-hover); background-color: var(--anfra-color-background-default); }
+}
+.a-button[data-variant="outline"]:is(:active, [aria-expanded="true"], [aria-pressed="true"]) { background-color: var(--anfra-color-background-active); }
+
+.a-button[data-variant="secondary"] {
+  background-color: var(--anfra-color-background-fill-default);
+  color: var(--anfra-color-text-default);
+}
+@media (hover: hover) {
+  .a-button[data-variant="secondary"]:hover { background-color: var(--anfra-color-background-fill-hover); }
+}
+.a-button[data-variant="secondary"]:is(:active, [aria-expanded="true"]) { background-color: var(--anfra-color-background-active); }
+
+.a-button[data-variant="ghost"] { background-color: transparent; color: var(--anfra-color-text-weak); }
+@media (hover: hover) {
+  .a-button[data-variant="ghost"]:hover { background-color: var(--anfra-color-background-hover); color: var(--anfra-color-text-default); }
+}
+.a-button[data-variant="ghost"]:active { background-color: var(--anfra-color-background-active); }
+.a-button[data-variant="ghost"]:is([aria-expanded="true"], [aria-pressed="true"]) {
+  background-color: var(--anfra-color-background-active);
+  color: var(--anfra-color-text-default);
+}
+.a-button[data-variant="ghost"]:is(:disabled, [aria-disabled="true"]) { border-color: transparent; background-color: transparent; }
+
+.a-button[data-variant="destructive"] {
+  background-color: var(--anfra-color-background-danger-default);
+  color: var(--anfra-color-text-on-fill);
+}
+@media (hover: hover) {
+  .a-button[data-variant="destructive"]:hover { background-color: var(--anfra-color-background-danger-hover); }
+}
+.a-button[data-variant="destructive"]:active { background-color: var(--anfra-color-background-danger-hover); }
+
+.a-button[data-variant="link"] { background-color: transparent; color: var(--anfra-color-text-link-default); text-underline-offset: 4px; }
+@media (hover: hover) {
+  .a-button[data-variant="link"]:hover { background-color: transparent; color: var(--anfra-color-text-link-hover); text-decoration: underline; }
+}
+.a-button[data-variant="link"]:active { background-color: transparent; }
+.a-button[data-variant="link"]:is(:disabled, [aria-disabled="true"]) { border-color: transparent; background-color: transparent; }
+
+.a-button[data-size="xs"] { gap: 4px; height: 24px; padding: 0 8px; font: var(--anfra-type-caption); font-weight: 500; }
+.a-button[data-size="xs"] svg { width: 12px; height: 12px; }
+.a-button[data-size="sm"] { gap: 4px; height: 28px; padding: 0 10px; font: var(--anfra-type-caption); font-weight: 500; }
+.a-button[data-size="sm"] svg { width: 14px; height: 14px; }
+.a-button[data-size="lg"] { height: 36px; }
+.a-button:is([data-size="icon"], [data-size="icon-xs"], [data-size="icon-sm"], [data-size="icon-lg"]) { padding: 0; }
+.a-button[data-size="icon"] { width: 32px; }
+.a-button[data-size="icon-xs"] { width: 24px; height: 24px; }
+.a-button[data-size="icon-xs"] svg { width: 12px; height: 12px; }
+.a-button[data-size="icon-sm"] { width: 28px; height: 28px; }
+.a-button[data-size="icon-lg"] { width: 36px; height: 36px; }
+/* Under 32px, lg would read as a pill: small controls take md. */
+.a-button:is([data-size="xs"], [data-size="sm"], [data-size="icon-xs"], [data-size="icon-sm"]) { border-radius: var(--anfra-radius-md); }
+
+/* Input: shadcn's Input, edged as an outline button is. Focus shows on its own border, violet and
+   doubled, never an outline. A field with an icon is a label.a-input around the icon and a bare input. */
+.a-input {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  height: 32px;
+  padding: 4px 10px;
+  border: 1px solid var(--anfra-color-border-strong); /* the outline button's edge; darker on hover */
+  border-radius: var(--anfra-radius-lg);
+  background: transparent;
+  color: var(--anfra-color-text-default);
+  font: var(--anfra-type-body);
+  outline: none;
+  transition: border-color 160ms var(--anfra-ease-out);
+}
+.a-input::placeholder { color: var(--anfra-color-text-placeholder); }
+@media (hover: hover) {
+  .a-input:hover { border-color: var(--anfra-color-border-hover); }
+}
+.a-input:is([readonly], :has(input[readonly])) { border-color: var(--anfra-color-border-strong); background: var(--anfra-color-background-secondary-default); }
+.a-input:is(:disabled, :has(input:disabled)) {
+  cursor: not-allowed;
+  border-color: var(--anfra-color-border-disabled);
+  background: var(--anfra-color-background-disabled);
+  color: var(--anfra-color-text-disabled);
+}
+.a-input:is(:focus-visible, :has(:focus-visible)) {
+  border-color: var(--anfra-color-border-highlight-strong);
+  box-shadow: inset 0 0 0 1px var(--anfra-color-border-highlight-strong);
+}
+.a-input[aria-invalid="true"],
+.a-input[aria-invalid="true"]:focus-visible {
+  border-color: var(--anfra-color-border-danger-strong);
+}
+.a-input[aria-invalid="true"]:focus-visible { box-shadow: inset 0 0 0 1px var(--anfra-color-border-danger-strong); }
+
+/* Badge: shadcn's Badge, a label in a pill. Variants default (filled), secondary, outline,
+   destructive, warning, success. */
+.a-badge {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: fit-content;
+  height: 20px;
+  padding: 2px 8px;
+  overflow: hidden;
+  border: 1px solid transparent;
+  border-radius: var(--anfra-radius-pill);
+  background: var(--anfra-color-background-highlight-default);
+  color: var(--anfra-color-text-on-fill);
+  font: var(--anfra-type-caption);
+  font-weight: 500;
+  white-space: nowrap;
+  box-sizing: border-box;
+}
+.a-badge svg { width: 12px; height: 12px; pointer-events: none; }
+/* A badge holding one icon or glyph is square, as wide as it is tall, so its padding is even. */
+.a-badge[data-size="icon"] { width: 20px; padding: 0; }
+.a-badge[data-variant="secondary"] {
+  border-color: var(--anfra-color-border-default);
+  background: var(--anfra-color-background-info-secondary-default);
+  color: var(--anfra-color-text-info-default);
+}
+.a-badge[data-variant="outline"] { border-color: var(--anfra-color-border-strong); background: transparent; color: var(--anfra-color-text-default); }
+.a-badge[data-variant="destructive"] {
+  border-color: var(--anfra-color-border-danger-default);
+  background: var(--anfra-color-background-danger-secondary-default);
+  color: var(--anfra-color-text-danger-default);
+}
+.a-badge[data-variant="warning"] {
+  border-color: var(--anfra-color-border-warning-default);
+  background: var(--anfra-color-background-warning-secondary-default);
+  color: var(--anfra-color-text-warning-default);
+}
+.a-badge[data-variant="success"] {
+  border-color: var(--anfra-color-border-success-default);
+  background: var(--anfra-color-background-success-secondary-default);
+  color: var(--anfra-color-text-success-default);
+}
+
+/* Status pill: Cloud's StatusPill, a state as a dot and a label. Tones neutral (the default),
+   highlight, success, warning, danger; the label always says it, never the colour alone. */
+.a-pill {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 6px;
+  width: fit-content;
+  height: 20px;
+  padding: 0 8px;
+  border-radius: var(--anfra-radius-pill);
+  background: var(--anfra-color-background-active);
+  color: var(--anfra-color-text-weak);
+  font: var(--anfra-type-caption);
+  font-weight: 500;
+  white-space: nowrap;
+}
+.a-pill::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.a-pill[data-tone="highlight"] { background: var(--anfra-color-background-highlight-secondary-default); color: var(--anfra-color-text-highlight-default); }
+.a-pill[data-tone="success"] { background: var(--anfra-color-background-success-secondary-default); color: var(--anfra-color-text-success-default); }
+.a-pill[data-tone="warning"] { background: var(--anfra-color-background-warning-secondary-default); color: var(--anfra-color-text-warning-default); }
+.a-pill[data-tone="danger"] { background: var(--anfra-color-background-danger-secondary-default); color: var(--anfra-color-text-danger-default); }
+
+/* Tabs: shadcn's TabsList and TabsTrigger. A segmented list by default; data-variant="line" for an
+   underline. The open tab is aria-selected="true", or aria-pressed="true" in a group of toggles (a filter). */
+.a-tabs {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  height: 32px;
+  padding: 3px;
+  border-radius: var(--anfra-radius-lg);
+  background: var(--anfra-color-background-fill-default); /* a tint of its ground, so it reads on the panel and in a well */
+  color: var(--anfra-color-text-weak);
+  box-sizing: border-box;
+}
+/* Small: a 24px list for a toggle in a dense row, its track 2px. */
+.a-tabs[data-size="sm"] {
+  height: 24px;
+  padding: 2px;
+  border-radius: var(--anfra-radius-md); /* under 32px, a control takes md */
+}
+.a-tabs[data-size="sm"] .a-tab {
+  padding: 0 6px;
+  border-radius: calc(var(--anfra-radius-md) - 2px); /* nested in the list: its radius less its padding */
+  font: var(--anfra-type-caption);
+  font-weight: 500;
+}
+.a-tab {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 100%; /* shadcn's is 1px short, which leaves the track 3.5px above and below and 3px at the sides */
+  padding: 2px 6px;
+  border: 1px solid transparent;
+  border-radius: calc(var(--anfra-radius-lg) - 3px); /* nested in the list: its radius less its padding */
+  background: transparent;
+  color: var(--anfra-color-text-weak);
+  font: var(--anfra-type-label);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.a-tab svg { flex-shrink: 0; width: 16px; height: 16px; pointer-events: none; }
+@media (hover: hover) {
+  .a-tab:hover { color: var(--anfra-color-text-default); }
+}
+.a-tab:is(:disabled, [aria-disabled="true"]) { pointer-events: none; color: var(--anfra-color-text-disabled); }
+.a-tab:is([aria-selected="true"], [aria-pressed="true"]) {
+  background: var(--anfra-color-background-fill-selected);
+  color: var(--anfra-color-text-default);
+  box-shadow: var(--anfra-e1);
+}
+.a-tabs[data-variant="line"] { border-radius: 0; background: transparent; }
+.a-tabs[data-variant="line"] .a-tab:is([aria-selected="true"], [aria-pressed="true"]) { background: transparent; box-shadow: none; }
+.a-tabs[data-variant="line"] .a-tab::after {
+  content: "";
+  position: absolute;
+  inset: auto 0 -5px;
+  height: 2px;
+  background: var(--anfra-color-background-inverted-default);
+  opacity: 0;
+}
+.a-tabs[data-variant="line"] .a-tab:is([aria-selected="true"], [aria-pressed="true"])::after { opacity: 1; }
+
+/* Menu: shadcn's DropdownMenuContent and its parts. An item is highlighted on hover, on focus, or
+   with data-highlighted (a menu that moves a highlight by keyboard). */
+.a-menu {
+  box-sizing: border-box;
+  min-width: 128px;
+  padding: 4px;
+  overflow: hidden auto;
+  border-radius: var(--anfra-radius-xl);
+  background: var(--anfra-color-background-raised-default);
+  color: var(--anfra-color-text-default);
+  box-shadow: var(--anfra-e2); /* its edge is e2's ring, not a border */
+}
+.a-menu-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 4px 6px;
+  border: 0;
+  border-radius: calc(var(--anfra-radius-xl) - 4px); /* nested in the menu: its radius less its padding */
+  background: transparent;
+  color: inherit;
+  font: var(--anfra-type-body);
+  text-align: left;
+  cursor: default;
+  user-select: none;
+  outline: none;
+  box-sizing: border-box;
+}
+.a-menu-item svg { flex-shrink: 0; width: 16px; height: 16px; pointer-events: none; }
+.a-menu-item:is(:focus-visible, [data-highlighted]) { background: var(--anfra-color-background-hover); color: var(--anfra-color-text-default); }
+@media (hover: hover) {
+  .a-menu-item:hover { background: var(--anfra-color-background-hover); color: var(--anfra-color-text-default); }
+}
+.a-menu-item:is(:disabled, [aria-disabled="true"]) { pointer-events: none; color: var(--anfra-color-text-disabled); }
+.a-menu-item:is(:disabled, [aria-disabled="true"]) svg { color: var(--anfra-color-icon-disabled); }
+.a-menu-item[data-variant="destructive"],
+.a-menu-item[data-variant="destructive"] svg { color: var(--anfra-color-text-danger-default); }
+.a-menu-item[data-variant="destructive"]:is(:focus-visible, [data-highlighted]) { background: var(--anfra-color-background-danger-secondary-default); }
+@media (hover: hover) {
+  .a-menu-item[data-variant="destructive"]:hover { background: var(--anfra-color-background-danger-secondary-default); }
+}
+.a-menu-label { padding: 4px 6px; color: var(--anfra-color-text-placeholder); font: var(--anfra-type-caption); font-weight: 500; }
+.a-menu-separator { height: 1px; margin: 4px -4px; border: 0; background: var(--anfra-color-border-default); }
+.a-menu-shortcut { margin-left: auto; color: var(--anfra-color-text-placeholder); font: var(--anfra-type-caption); letter-spacing: 0.1em; }
+
+/* Tooltip: shadcn's TooltipContent, inverted. */
+.a-tooltip {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: fit-content;
+  max-width: 320px;
+  padding: 6px 12px;
+  border-radius: var(--anfra-radius-md);
+  background: var(--anfra-color-background-inverted-default);
+  color: var(--anfra-color-text-inverted-default);
+  font: var(--anfra-type-caption);
+}
+
+/* Kbd: a key, as a menu's shortcut or a field's hint shows it. */
+.a-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 4px;
+  border-radius: var(--anfra-radius-md);
+  background: var(--anfra-color-background-active);
+  color: var(--anfra-color-text-weak);
+  font: var(--anfra-type-caption);
+  font-weight: 500;
+  box-sizing: border-box;
+  pointer-events: none;
+  user-select: none;
+}
+/* KbdGroup: a combination, one Kbd per key. */
+.a-kbd-group { display: inline-flex; flex: none; align-items: center; gap: 4px; }
+
+/* Sidebar: shadcn's SidebarGroupLabel, SidebarMenuButton (.a-nav-item), SidebarMenuSub (.a-tree) and
+   SidebarMenuSubButton (.a-tree-row). The current page is aria-current="page" (or data-active): a
+   raised chip with a hairline, and a violet icon. */
+.a-nav-label {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  height: 32px;
+  padding: 0 8px;
+  border-radius: var(--anfra-radius-md);
+  color: var(--anfra-color-text-placeholder);
+  font: var(--anfra-type-caption);
+  font-weight: 500;
+}
+.a-nav-item,
+.a-tree-row {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--anfra-radius-md);
+  background: transparent;
+  color: var(--anfra-color-text-weak);
+  font: var(--anfra-type-body);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+}
+.a-nav-item { height: 32px; padding: 8px; }
+.a-nav-item[data-size="sm"] { height: 28px; font: var(--anfra-type-caption); }
+.a-tree-row { height: 28px; padding: 0 8px; }
+.a-nav-item > :last-child,
+.a-tree-row > :last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.a-nav-item svg,
+.a-tree-row svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--anfra-color-icon-weak); }
+@media (hover: hover) {
+  .a-nav-item:hover,
+  .a-tree-row:hover { background: var(--anfra-color-background-hover); color: var(--anfra-color-text-default); }
+}
+.a-nav-item:active,
+.a-tree-row:active { background: var(--anfra-color-background-active); color: var(--anfra-color-text-default); }
+.a-nav-item:is(:disabled, [aria-disabled="true"]),
+.a-tree-row:is(:disabled, [aria-disabled="true"]) { pointer-events: none; color: var(--anfra-color-text-disabled); }
+.a-nav-item:is([aria-current="page"], [data-active]),
+.a-tree-row:is([aria-current="page"], [data-active]) {
+  background: var(--anfra-color-background-current-default);
+  color: var(--anfra-color-text-default);
+  box-shadow: inset 0 0 0 1px var(--anfra-color-border-weak);
+}
+.a-nav-item:is([aria-current="page"], [data-active]) { font-weight: 500; }
+.a-nav-item:is([aria-current="page"], [data-active]) svg,
+.a-tree-row:is([aria-current="page"], [data-active]) svg { color: var(--anfra-color-icon-highlight-default); }
+.a-tree {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  margin: 0 14px;
+  padding: 2px 10px;
+  border-left: 1px solid var(--anfra-color-border-default);
+  translate: 1px 0;
+}
+.a-tree .a-tree-row { translate: -1px 0; }
+
+/* Focus: one 2px violet outline, offset 3px, on every control here but a field and a menu item. */
+:is(.a-button, .a-tab, .a-nav-item, .a-tree-row):focus-visible {
+  outline: 2px solid var(--anfra-color-focus-ring-default);
+  outline-offset: 3px;
+}

package/icons.d.ts

@@ -0,0 +1,59 @@
+// Generated by scripts/icons.mjs from lucide-static 1.63.0 (ISC). Do not edit.
+
+export type IconName =
+  | "folder"
+  | "folder-open"
+  | "app"
+  | "database"
+  | "dataset"
+  | "model"
+  | "metric"
+  | "dimension"
+  | "block"
+  | "control"
+  | "query"
+  | "search"
+  | "reload"
+  | "update"
+  | "copy"
+  | "check"
+  | "download"
+  | "close"
+  | "plus"
+  | "minus"
+  | "filter"
+  | "pick"
+  | "locate"
+  | "inspect"
+  | "focus"
+  | "expand"
+  | "fit"
+  | "eye"
+  | "hidden"
+  | "chevron"
+  | "sidebar"
+  | "more"
+  | "overflow"
+  | "command"
+  | "sun"
+  | "moon"
+  | "alert"
+  | "info"
+  | "help"
+  | "overview"
+  | "table"
+  | "sheet"
+  | "lineage"
+  | "tree"
+  | "code"
+  | "type-text"
+  | "type-number"
+  | "type-date"
+  | "type-datetime"
+  | "type-truefalse"
+  | "type-bit"
+  | "type-json"
+  | "type-unknown";
+
+/** anfra's icons, by name: path data on a 24px grid, drawn with a 2px round stroke and no fill. */
+export declare const ICONS: Readonly<Record<IconName, string>>;

package/icons.js

@@ -0,0 +1,58 @@
+// Generated by scripts/icons.mjs from lucide-static 1.63.0 (ISC). Do not edit.
+
+/** anfra's icons, by name: path data on a 24px grid, drawn with a 2px round stroke and no fill. */
+export const ICONS = {
+  "folder": "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z",
+  "folder-open": "M6 14l1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2",
+  "app": "M4 3h5a1 1 0 0 1 1 1v7a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1ZM15 3h5a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1ZM15 12h5a1 1 0 0 1 1 1v7a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1ZM4 16h5a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1Z",
+  "database": "M3 5a9 3 0 1 0 18 0a9 3 0 1 0 -18 0M3 5V19A9 3 0 0 0 21 19V5M3 12A9 3 0 0 0 21 12",
+  "dataset": "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83zM2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17",
+  "model": "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16ZM3.3 7l8.7 5 8.7-5M12 22V12",
+  "metric": "M18 7V5a1 1 0 0 0-1-1H6.5a.5.5 0 0 0-.4.8l4.5 6a2 2 0 0 1 0 2.4l-4.5 6a.5.5 0 0 0 .4.8H17a1 1 0 0 0 1-1v-2",
+  "dimension": "M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0ZM14.5 12.5l2-2M11.5 9.5l2-2M8.5 6.5l2-2M17.5 15.5l2-2",
+  "block": "M4 3h5a1 1 0 0 1 1 1v5a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1v-5a1 1 0 0 1 1 -1ZM15 3h5a1 1 0 0 1 1 1v5a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1v-5a1 1 0 0 1 1 -1ZM15 14h5a1 1 0 0 1 1 1v5a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1v-5a1 1 0 0 1 1 -1ZM4 14h5a1 1 0 0 1 1 1v5a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1v-5a1 1 0 0 1 1 -1Z",
+  "control": "M10 5H3M12 19H3M14 3v4M16 17v4M21 12h-9M21 19h-5M21 5h-7M8 10v4M8 12H3",
+  "query": "M3 5a9 3 0 1 0 18 0a9 3 0 1 0 -18 0M3 5V19A9 3 0 0 0 21 19V5M3 12A9 3 0 0 0 21 12",
+  "search": "M21 21l-4.34-4.34M3 11a8 8 0 1 0 16 0a8 8 0 1 0 -16 0",
+  "reload": "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8M21 3v5h-5M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16M8 16H3v5",
+  "update": "M5 12l7-7 7 7M12 19V5",
+  "copy": "M10 8h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2ZM4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",
+  "check": "M20 6 9 17l-5-5",
+  "download": "M12 15V3M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5",
+  "close": "M18 6 6 18M6 6l12 12",
+  "plus": "M5 12h14M12 5v14",
+  "minus": "M5 12h14",
+  "filter": "M2 5h20M6 12h12M9 19h6",
+  "pick": "M2 12a10 10 0 1 0 20 0a10 10 0 1 0 -20 0M22 12L18 12M6 12L2 12M12 6L12 2M12 22L12 18",
+  "locate": "M2 12L5 12M19 12L22 12M12 2L12 5M12 19L12 22M5 12a7 7 0 1 0 14 0a7 7 0 1 0 -14 0M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0",
+  "inspect": "M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2ZM15 3v18",
+  "focus": "M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2",
+  "expand": "M15 3h6v6M21 3l-7 7M3 21l7-7M9 21H3v-6",
+  "fit": "M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2",
+  "eye": "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0",
+  "hidden": "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49M14.084 14.158a3 3 0 0 1-4.242-4.242M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143M2 2l20 20",
+  "chevron": "M9 18l6-6-6-6",
+  "sidebar": "M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2ZM9 3v18",
+  "more": "M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M18 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M4 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",
+  "overflow": "M6 17l5-5-5-5M13 17l5-5-5-5",
+  "command": "M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3",
+  "sun": "M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41",
+  "moon": "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401",
+  "alert": "M21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4M12 17h.01",
+  "info": "M2 12a10 10 0 1 0 20 0a10 10 0 1 0 -20 0M12 16v-4M12 8h.01",
+  "help": "M2 12a10 10 0 1 0 20 0a10 10 0 1 0 -20 0M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01",
+  "overview": "M4 3h5a1 1 0 0 1 1 1v7a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1ZM15 3h5a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1ZM15 12h5a1 1 0 0 1 1 1v7a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1ZM4 16h5a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1Z",
+  "table": "M12 3v18M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2ZM3 9h18M3 15h18",
+  "sheet": "M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2ZM3 9L21 9M3 15L21 15M9 9L9 21M15 9L15 21",
+  "lineage": "M9 18a3 3 0 1 0 6 0a3 3 0 1 0 -6 0M3 6a3 3 0 1 0 6 0a3 3 0 1 0 -6 0M15 6a3 3 0 1 0 6 0a3 3 0 1 0 -6 0M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9M12 12v3",
+  "tree": "M8 5h13M13 12h8M13 19h8M3 10a2 2 0 0 0 2 2h3M3 5v12a2 2 0 0 0 2 2h3",
+  "code": "M16 18l6-6-6-6M8 6l-6 6 6 6",
+  "type-text": "M12 4v16M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2M9 20h6",
+  "type-number": "M4 9L20 9M4 15L20 15M10 3L8 21M16 3L14 21",
+  "type-date": "M8 2v3M16 2v3M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2ZM3 9h18",
+  "type-datetime": "M16 14v2.2l1.6 1M16 2v3M21 7.338V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h2.338M3 9h5.859M8 2v3M10 16a6 6 0 1 0 12 0a6 6 0 1 0 -12 0",
+  "type-truefalse": "M6 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0M9 5h6a7 7 0 0 1 7 7v0a7 7 0 0 1 -7 7h-6a7 7 0 0 1 -7 -7v0a7 7 0 0 1 7 -7Z",
+  "type-bit": "M16 14h0a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h0a2 2 0 0 1 -2 -2v-2a2 2 0 0 1 2 -2ZM8 4h0a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h0a2 2 0 0 1 -2 -2v-2a2 2 0 0 1 2 -2ZM6 20h4M14 10h4M6 14h2v6M14 4h2v6",
+  "type-json": "M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1",
+  "type-unknown": "M10.1 2.182a10 10 0 0 1 3.8 0M13.9 21.818a10 10 0 0 1-3.8 0M17.609 3.721a10 10 0 0 1 2.69 2.7M2.182 13.9a10 10 0 0 1 0-3.8M20.279 17.609a10 10 0 0 1-2.7 2.69M21.818 10.1a10 10 0 0 1 0 3.8M3.721 6.391a10 10 0 0 1 2.7-2.69M6.391 20.279a10 10 0 0 1-2.69-2.7",
+};

package/index.css

@@ -1,4 +1,5 @@
-/* Everything a host needs: the fonts, the tokens and the type roles. */
+/* Everything a host needs: the fonts, the tokens, the type roles and the class layer. */
 @import './fonts.css';
 @import './tokens.css';
 @import './type.css';
+@import './components.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@holistics/anfra-design",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "anfra's design tokens, type and rules: one design language for anfra core (appserve, the SDK's plugin UI) and anfra Cloud",
   "license": "Apache-2.0",
   "repository": {
@@ -15,6 +15,11 @@
     "./tokens.css": "./tokens.css",
     "./fonts.css": "./fonts.css",
     "./type.css": "./type.css",
+    "./components.css": "./components.css",
+    "./icons": {
+      "types": "./icons.d.ts",
+      "default": "./icons.js"
+    },
     "./DESIGN.md": "./DESIGN.md",
     "./package.json": "./package.json"
   },
@@ -23,13 +28,20 @@
     "tokens.css",
     "fonts.css",
     "type.css",
+    "components.css",
+    "icons.js",
+    "icons.d.ts",
     "DESIGN.md"
   ],
   "scripts": {
-    "test": "node --test"
+    "test": "node --test",
+    "icons": "node scripts/icons.mjs"
   },
   "dependencies": {
     "@fontsource-variable/geist-mono": "^5.3.0",
     "@fontsource-variable/inter": "^5.3.0"
+  },
+  "devDependencies": {
+    "lucide-static": "1.63.0"
   }
 }

package/tokens.css

@@ -47,6 +47,7 @@
   --anfra-paper-100: oklch(0.955 0.007 88.6); /* #f2f0eb */
   --anfra-paper-200: oklch(0.925 0.01 87.5); /* #e9e6df */
 
+  --anfra-violet-50: oklch(0.955 0.025 298.6); /* #f2edff  the logomark's inverse, on dark */
   --anfra-violet-100: oklch(0.946 0.027 304.8); /* #f1e9fc */
   --anfra-violet-200: oklch(0.904 0.049 303.6); /* #e6d8fb */
   --anfra-violet-300: oklch(0.878 0.072 302.8); /* #e0ccff */
@@ -124,6 +125,13 @@
     --anfra-ink-a5
   ); /* Neutral hover layer (works on paper and on white) */
   --anfra-color-background-active: var(--anfra-ink-a9); /* Neutral pressed layer; open trigger */
+  --anfra-color-background-fill-default: var(
+    --anfra-ink-a4
+  ); /* A control's rest fill (secondary button, tab track): a tint of its ground, on white or in a well */
+  --anfra-color-background-fill-hover: var(--anfra-ink-a8); /* Hover on a filled control */
+  --anfra-color-background-fill-selected: var(
+    --anfra-ink-0
+  ); /* The open tab, raised off its track */
   --anfra-color-background-disabled: var(
     --anfra-ink-a4
   ); /* Disabled control fill (all variants, never violet) */
@@ -196,6 +204,7 @@
   --anfra-color-icon-highlight-default: var(
     --anfra-violet-600
   ); /* Current nav icon, checked mark */
+  --anfra-color-icon-logo: var(--anfra-violet-600); /* The logomark: the artwork's violet */
   --anfra-color-icon-on-fill: var(--anfra-ink-0); /* Icon on solid fills */
   --anfra-color-icon-inverted-default: var(--anfra-ink-100); /* Icon on inverted bg */
   --anfra-color-icon-danger-default: var(--anfra-red-500); /* Danger icon */
@@ -227,10 +236,12 @@
   --anfra-color-focus-ring-default: var(--anfra-violet-600); /* 2px focus outline, offset 3px */
 
   /* Elevation (light): shadows. */
-  --anfra-e1: 0 1px 0 rgb(24 20 31 / 0.04), 0 1px 2px rgb(24 20 31 / 0.06);
+  --anfra-e1: 0 1px 0 oklch(0.201 0.022 301.1 / 0.04), 0 1px 2px oklch(0.201 0.022 301.1 / 0.06);
+  /* A floating surface (menu, popover): a translucent 1px ring for its edge, so one token reads on
+     any ground, then a tight layer and a soft one for its lift. */
   --anfra-e2:
-    0 1px 0 rgb(24 20 31 / 0.03), 0 18px 40px -18px rgb(24 20 31 / 0.28),
-    0 2px 6px -2px rgb(24 20 31 / 0.08);
+    0 0 0 1px oklch(0.201 0.022 301.1 / 0.08), 0 1px 3px oklch(0.201 0.022 301.1 / 0.06),
+    0 18px 40px -18px oklch(0.201 0.022 301.1 / 0.28), 0 2px 6px -2px oklch(0.201 0.022 301.1 / 0.08);
 
   /* Motion (DESIGN.md §10). Unchanged. */
   --anfra-t-press: 90ms;
@@ -257,6 +268,11 @@
   ); /* was ink-875 (= nav hover color) */
   --anfra-color-background-hover: var(--anfra-white-a6);
   --anfra-color-background-active: var(--anfra-white-a10);
+  /* Not a swap of the light values: on dark a control is lighter than its ground, and the open tab
+     lighter than its track, since lighter reads as closer. White layers lift from any ground. */
+  --anfra-color-background-fill-default: var(--anfra-white-a4);
+  --anfra-color-background-fill-hover: var(--anfra-white-a8);
+  --anfra-color-background-fill-selected: var(--anfra-white-a8); /* on the track's a4: two steps up */
   --anfra-color-background-disabled: var(--anfra-white-a4);
   --anfra-color-background-inverted-default: var(--anfra-ink-100);
   --anfra-color-background-interactive-highlight-default: var(--anfra-violet-a18);
@@ -290,6 +306,7 @@
   --anfra-color-icon-hover: var(--anfra-ink-100);
   --anfra-color-icon-disabled: var(--anfra-ink-500); /* was ink-600 (exempt) */
   --anfra-color-icon-highlight-default: var(--anfra-violet-500);
+  --anfra-color-icon-logo: var(--anfra-violet-50); /* The logomark's inverse */
   --anfra-color-icon-inverted-default: var(--anfra-ink-900);
   --anfra-color-icon-danger-default: var(--anfra-red-400);
   --anfra-color-icon-warning-default: var(--anfra-amber-400);
@@ -313,7 +330,8 @@
 
   --anfra-color-focus-ring-default: var(--anfra-violet-500);
 
-  /* A shadow does not show on dark: lift with a border instead (DESIGN.md §6). */
+  /* A shadow does not show on dark: lift with a ring instead (DESIGN.md §6). e2's is translucent
+     white, so it reads the same on every dark ground. */
   --anfra-e1: 0 0 0 1px var(--anfra-color-border-default);
-  --anfra-e2: 0 0 0 1px var(--anfra-color-border-strong);
+  --anfra-e2: 0 0 0 1px var(--anfra-white-a10);
 }

package/type.css

@@ -12,7 +12,7 @@
   --anfra-type-mono-label: 400 0.75rem/1rem var(--anfra-font-mono);
 
   /* Shapes: the smaller the thing, the smaller the corner. */
-  --anfra-radius-md: 6px; /* menu items, nav items, chips, tooltips */
+  --anfra-radius-md: 6px; /* nav items, chips, tooltips, controls under 32px */
   --anfra-radius-lg: 10px; /* buttons, fields, alerts */
   --anfra-radius-xl: 14px; /* cards, popovers, dialogs, the panel */
   --anfra-radius-pill: 9999px; /* status pills and counters only */