@pienter/ui 0.2.0

package/icons/index.ts

@@ -0,0 +1,91 @@
+import info from './info.js';
+import check from './check.js';
+import alertTriangle from './alert-triangle.js';
+import x from './x.js';
+import chevronDown from './chevron-down.js';
+import chevronLeft from './chevron-left.js';
+import chevronRight from './chevron-right.js';
+import arrowUp from './arrow-up.js';
+import arrowDown from './arrow-down.js';
+import arrowUpDown from './arrow-up-down.js';
+import search from './search.js';
+import plus from './plus.js';
+import eye from './eye.js';
+import trash2 from './trash-2.js';
+import edit from './edit.js';
+import moreHorizontal from './more-horizontal.js';
+import moreVertical from './more-vertical.js';
+import menu from './menu.js';
+import circleCheck from './circle-check.js';
+import circleAlert from './circle-alert.js';
+import loader from './loader.js';
+import chevronUp from './chevron-up.js';
+import chevronUpDown from './chevron-up-down.js';
+import bell from './bell.js';
+import clipboard from './clipboard.js';
+import download from './download.js';
+import upload from './upload.js';
+import uploadCloud from './upload-cloud.js';
+import externalLink from './external-link.js';
+import file from './file.js';
+import filter from './filter.js';
+import folder from './folder.js';
+import image from './image.js';
+import inbox from './inbox.js';
+import layers from './layers.js';
+import link2 from './link-2.js';
+import list from './list.js';
+import plusCircle from './plus-circle.js';
+import save from './save.js';
+import send from './send.js';
+import settings from './settings.js';
+import tool from './tool.js';
+import trash from './trash.js';
+
+export const icons = {
+    info: info,
+    check: check,
+    'alert-triangle': alertTriangle,
+    x: x,
+    'chevron-down': chevronDown,
+    'chevron-left': chevronLeft,
+    'chevron-right': chevronRight,
+    'arrow-up': arrowUp,
+    'arrow-down': arrowDown,
+    'arrow-up-down': arrowUpDown,
+    search: search,
+    plus: plus,
+    eye: eye,
+    'trash-2': trash2,
+    edit: edit,
+    'more-horizontal': moreHorizontal,
+    'more-vertical': moreVertical,
+    menu: menu,
+    'circle-check': circleCheck,
+    'circle-alert': circleAlert,
+    loader: loader,
+    'chevron-up': chevronUp,
+    'chevron-up-down': chevronUpDown,
+    bell: bell,
+    clipboard: clipboard,
+    download: download,
+    upload: upload,
+    'upload-cloud': uploadCloud,
+    'external-link': externalLink,
+    file: file,
+    filter: filter,
+    folder: folder,
+    image: image,
+    inbox: inbox,
+    layers: layers,
+    'link-2': link2,
+    list: list,
+    'plus-circle': plusCircle,
+    save: save,
+    send: send,
+    settings: settings,
+    tool: tool,
+    trash: trash,
+} as const;
+
+export type IconName = keyof typeof icons;

package/icons/info.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></svg>';

package/icons/layers.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M12 2 2 7l10 5 10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>';

package/icons/link-2.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3m-1 5h8"/></svg>';

package/icons/list.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>';

package/icons/loader.ts

@@ -0,0 +1,3 @@
+// Eight spokes as separate paths, clockwise from 12 o'clock — spinner.css ramps their opacity
+// with :nth-child(); merging them into one `d` (svgo's mergePaths) or reordering breaks the ramp.
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M12 2v4"/><path d="m16.24 7.76 2.83-2.83"/><path d="M18 12h4"/><path d="m16.24 16.24 2.83 2.83"/><path d="M12 18v4"/><path d="m4.93 19.07 2.83-2.83"/><path d="M2 12h4"/><path d="m4.93 4.93 2.83 2.83"/></svg>';

package/icons/menu.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M4 5h16M4 12h16M4 19h16"/></svg>';

package/icons/more-horizontal.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>';

package/icons/more-vertical.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>';

package/icons/plus-circle.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 8v8m-4-4h8"/></svg>';

package/icons/plus.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M5 12h14m-7-7v14"/></svg>';

package/icons/save.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2"/><path d="M17 21v-8H7v8M7 3v5h8"/></svg>';

package/icons/search.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.34-4.34"/></svg>';

package/icons/send.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M22 2 11 13M22 2l-7 20-4-9-9-4z"/></svg>';

package/icons/settings.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1"/></svg>';

package/icons/tool.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>';

package/icons/trash-2.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M3 6h18m-2 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m-6 5v6m4-6v6"/></svg>';

package/icons/trash.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M3 6h18m-2 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>';

package/icons/upload-cloud.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m16 16-4-4-4 4m4-4v9"/><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"/></svg>';

package/icons/upload.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4m14-7-5-5-5 5m5-5v12"/></svg>';

package/icons/x.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>';

package/package.json

@@ -0,0 +1,150 @@
+{
+  "name": "@pienter/ui",
+  "version": "0.2.0",
+  "description": "Shared Pienter UI components, styles, icons, and browser utilities.",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://git.pienter.space/pienter/ui.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://git.pienter.space/pienter/ui/issues"
+  },
+  "homepage": "https://git.pienter.space/pienter/ui#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css",
+    "**/*.css"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./styles": {
+      "types": "./styles/styles.d.ts",
+      "default": "./styles/main.css"
+    },
+    "./styles/*": "./styles/*",
+    "./components/Button.astro": "./components/action/button/Button.astro",
+    "./components/Button.vue": "./components/action/button/Button.vue",
+    "./components/IconButton.astro": "./components/action/button/IconButton.astro",
+    "./components/IconButton.vue": "./components/action/button/IconButton.vue",
+    "./components/Toggle.vue": "./components/action/toggle/Toggle.vue",
+    "./components/ToggleGroup.vue": "./components/action/toggle-group/ToggleGroup.vue",
+    "./components/Avatar.astro": "./components/display/avatar/Avatar.astro",
+    "./components/Avatar.vue": "./components/display/avatar/Avatar.vue",
+    "./components/AvatarStack.astro": "./components/display/avatar/AvatarStack.astro",
+    "./components/AvatarStack.vue": "./components/display/avatar/AvatarStack.vue",
+    "./components/Badge.astro": "./components/display/badge/Badge.astro",
+    "./components/Badge.vue": "./components/display/badge/Badge.vue",
+    "./components/Empty.astro": "./components/display/empty/Empty.astro",
+    "./components/Empty.vue": "./components/display/empty/Empty.vue",
+    "./components/Icon.astro": "./components/display/icon/Icon.astro",
+    "./components/Icon.vue": "./components/display/icon/Icon.vue",
+    "./components/Alert.astro": "./components/feedback/alert/Alert.astro",
+    "./components/Alert.vue": "./components/feedback/alert/Alert.vue",
+    "./components/Progress.astro": "./components/feedback/progress/Progress.astro",
+    "./components/Progress.vue": "./components/feedback/progress/Progress.vue",
+    "./components/Skeleton.astro": "./components/feedback/skeleton/Skeleton.astro",
+    "./components/Skeleton.vue": "./components/feedback/skeleton/Skeleton.vue",
+    "./components/Spinner.astro": "./components/feedback/spinner/Spinner.astro",
+    "./components/Spinner.vue": "./components/feedback/spinner/Spinner.vue",
+    "./components/Toast.astro": "./components/feedback/toast/Toast.astro",
+    "./components/Toast.vue": "./components/feedback/toast/Toast.vue",
+    "./components/Checkbox.astro": "./components/form/checkbox/Checkbox.astro",
+    "./components/Checkbox.vue": "./components/form/checkbox/Checkbox.vue",
+    "./components/Combobox.vue": "./components/form/combobox/Combobox.vue",
+    "./components/DateInput.astro": "./components/form/date-input/DateInput.astro",
+    "./components/DateInput.vue": "./components/form/date-input/DateInput.vue",
+    "./components/Form.astro": "./components/form/form/Form.astro",
+    "./components/Form.vue": "./components/form/form/Form.vue",
+    "./components/InputOTP.astro": "./components/form/input-otp/InputOTP.astro",
+    "./components/InputOTP.vue": "./components/form/input-otp/InputOTP.vue",
+    "./components/Label.astro": "./components/form/label/Label.astro",
+    "./components/Label.vue": "./components/form/label/Label.vue",
+    "./components/NumberField.astro": "./components/form/number-field/NumberField.astro",
+    "./components/NumberField.vue": "./components/form/number-field/NumberField.vue",
+    "./components/RadioGroup.astro": "./components/form/radio-group/RadioGroup.astro",
+    "./components/RadioGroup.vue": "./components/form/radio-group/RadioGroup.vue",
+    "./components/RadioGroup.types": "./components/form/radio-group/types.ts",
+    "./components/Segmented.vue": "./components/form/select/Segmented.vue",
+    "./components/Select.astro": "./components/form/select/Select.astro",
+    "./components/Select.vue": "./components/form/select/Select.vue",
+    "./components/Slider.astro": "./components/form/slider/Slider.astro",
+    "./components/Slider.vue": "./components/form/slider/Slider.vue",
+    "./components/Switch.astro": "./components/form/switch/Switch.astro",
+    "./components/Switch.vue": "./components/form/switch/Switch.vue",
+    "./components/TagsInput.astro": "./components/form/tags-input/TagsInput.astro",
+    "./components/TagsInput.vue": "./components/form/tags-input/TagsInput.vue",
+    "./components/TextInput.astro": "./components/form/text-input/TextInput.astro",
+    "./components/TextInput.vue": "./components/form/text-input/TextInput.vue",
+    "./components/Textarea.astro": "./components/form/textarea/Textarea.astro",
+    "./components/Textarea.vue": "./components/form/textarea/Textarea.vue",
+    "./components/Accordion.vue": "./components/layout/accordion/Accordion.vue",
+    "./components/Card.astro": "./components/layout/card/Card.astro",
+    "./components/Card.vue": "./components/layout/card/Card.vue",
+    "./components/Collapsible.vue": "./components/layout/collapsible/Collapsible.vue",
+    "./components/Separator.astro": "./components/layout/separator/Separator.astro",
+    "./components/Separator.vue": "./components/layout/separator/Separator.vue",
+    "./components/Table.astro": "./components/layout/table/Table.astro",
+    "./components/Table.vue": "./components/layout/table/Table.vue",
+    "./components/TableRow.vue": "./components/layout/table/TableRow.vue",
+    "./components/DataTable.vue": "./components/layout/table/DataTable.vue",
+    "./components/Table.types": "./components/layout/table/types.ts",
+    "./components/Breadcrumb.astro": "./components/navigation/breadcrumb/Breadcrumb.astro",
+    "./components/Breadcrumb.vue": "./components/navigation/breadcrumb/Breadcrumb.vue",
+    "./components/Navbar.astro": "./components/navigation/navbar/Navbar.astro",
+    "./components/Navbar.vue": "./components/navigation/navbar/Navbar.vue",
+    "./components/Pagination.vue": "./components/navigation/pagination/Pagination.vue",
+    "./components/Sidebar.astro": "./components/navigation/sidebar/Sidebar.astro",
+    "./components/Sidebar.vue": "./components/navigation/sidebar/Sidebar.vue",
+    "./components/Sidebar.types": "./components/navigation/sidebar/types.ts",
+    "./components/Tabs.vue": "./components/navigation/tabs/Tabs.vue",
+    "./components/AlertDialog.astro": "./components/overlay/alert-dialog/AlertDialog.astro",
+    "./components/AlertDialog.vue": "./components/overlay/alert-dialog/AlertDialog.vue",
+    "./components/Command.vue": "./components/overlay/command/Command.vue",
+    "./components/DropdownMenu.vue": "./components/overlay/dropdown-menu/DropdownMenu.vue",
+    "./components/Modal.astro": "./components/overlay/modal/Modal.astro",
+    "./components/Modal.vue": "./components/overlay/modal/Modal.vue",
+    "./components/Popover.vue": "./components/overlay/popover/Popover.vue",
+    "./components/Sheet.vue": "./components/overlay/sheet/Sheet.vue",
+    "./components/Tooltip.vue": "./components/overlay/tooltip/Tooltip.vue",
+    "./composables/useUrlSort": "./composables/useUrlSort.ts",
+    "./icons": "./icons/index.ts",
+    "./icons/*": "./icons/*",
+    "./utils": "./utils/index.ts",
+    "./utils/*": "./utils/*"
+  },
+  "files": [
+    "styles",
+    "components",
+    "composables",
+    "icons",
+    "utils",
+    "CONVENTIONS.md",
+    "CHANGELOG.md",
+    "README.md",
+    "!components/**/AUDIT.md"
+  ],
+  "peerDependencies": {
+    "astro": ">=5.0.0",
+    "vue": ">=3.5.0",
+    "vue-router": ">=4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "astro": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "vue-router": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=22.12.0"
+  }
+}

package/styles/0-settings/colors.css

@@ -0,0 +1,241 @@
+/* ==========================================================================
+   Color Tokens
+   ==========================================================================
+   Two layers: per-theme primitives (--clr-*) and a theme-agnostic semantic
+   layer. Every primitive name is redefined in each theme block, so the
+   semantic layer never needs light-dark() — it names a role once and the
+   theme underneath decides what that role looks like.
+
+   PRIMITIVES are named by intensity, relative to the theme they live in.
+   "strong" means more emphatic here, not darker: in the light theme it steps
+   down in lightness, in the dark theme it steps up.
+
+     Neutrals, front-most surface to furthest back, then up through the ink:
+       --clr-base        panels and cards (the front-most surface)
+       --clr-mantle      the page behind them
+       --clr-surface-0   accent panels, hover fills, table stripes
+       --clr-surface-1   hairline borders
+       --clr-overlay     input borders (clears 3:1)
+       --clr-subtext     secondary text (clears 4.5:1)
+       --clr-text        body text
+       --clr-inverse     text sitting on a fill or an inverted bar
+       --clr-shade       inverted bars and scrims — dark in both themes
+
+     Accents split by job, because one value cannot do both:
+       --clr-<hue>-soft         a wash to sit behind text
+       --clr-<hue>-fill         a fill solid enough to carry --clr-inverse
+       --clr-<hue>-fill-strong  the same fill, one step up
+       --clr-<hue>-fg           reads against --clr-base and --clr-surface-0
+       --clr-<hue>-fg-strong    the same foreground, one step up
+     A hue only defines the rungs it is used for. In the light theme
+     -fill-strong and -fg land on the same value; in the dark theme they are
+     far apart, which is the whole reason the two ladders are separate.
+
+   SEMANTIC tokens are named by role, and derived ones by the state that
+   triggers them (--bg-clr-brand-hover), never by intensity — a hover goes
+   darker in light and lighter in dark, so only the state name stays true in
+   both themes.
+
+   Verified: every -fg clears WCAG AA (4.5:1) against --clr-base,
+   --clr-mantle, --clr-surface-0 and its own -soft; every -fill and
+   -fill-strong clears 4.5:1 against its ink; --clr-overlay clears 3:1.
+
+   Components consume the semantic layer, never the primitives directly.
+   ========================================================================== */
+
+:root,
+:root[data-theme='light'] {
+    color-scheme: light;
+
+    /* neutral */
+    --clr-base: hsl(220 23% 98%);
+    --clr-mantle: hsl(220 22% 95.5%);
+    --clr-surface-0: hsl(222 20% 91%);
+    --clr-surface-1: hsl(225 14% 82%);
+    --clr-overlay: hsl(231 13% 54%);
+    --clr-subtext: hsl(233 11% 40%);
+    --clr-text: hsl(237 16% 27%);
+    --clr-inverse: hsl(220 23% 98%);
+    --clr-shade: hsl(237 16% 27%);
+
+    /* blue — brand */
+    --clr-blue-soft: hsl(220 90% 94%);
+    --clr-blue-fill: hsl(220 88% 46%);
+    --clr-blue-fill-strong: hsl(220 86% 39%);
+    --clr-blue-fg: hsl(220 86% 39%);
+    --clr-blue-fg-strong: hsl(220 84% 30%);
+
+    /* cyan — links */
+    --clr-cyan-soft: hsl(190 80% 92%);
+    --clr-cyan-fg: hsl(190 86% 28%);
+    --clr-cyan-fg-strong: hsl(190 88% 22%);
+
+    /* green — success */
+    --clr-green-soft: hsl(150 60% 91%);
+    --clr-green-fill: hsl(150 80% 27%);
+    --clr-green-fg: hsl(150 82% 24%);
+
+    /* amber — warning */
+    --clr-amber-soft: hsl(36 92% 92%);
+    --clr-amber-fill: hsl(36 92% 52%);
+    --clr-amber-fg: hsl(36 84% 30%);
+
+    /* red — danger */
+    --clr-red-soft: hsl(348 90% 95%);
+    --clr-red-fill: hsl(348 80% 45%);
+    --clr-red-fill-strong: hsl(348 82% 38%);
+    --clr-red-fg: hsl(348 82% 38%);
+    --clr-red-fg-strong: hsl(348 84% 30%);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme]) {
+        color-scheme: dark;
+
+        /* neutral */
+        --clr-base: hsl(240 20% 18%);
+        --clr-mantle: hsl(240 21% 11%);
+        --clr-surface-0: hsl(237 16% 27%);
+        --clr-surface-1: hsl(234 13% 36%);
+        --clr-overlay: hsl(228 12% 68%);
+        --clr-subtext: hsl(225 14% 82%);
+        --clr-text: hsl(220 22% 95.5%);
+        --clr-inverse: hsl(220 22% 95.5%);
+        --clr-shade: hsl(240 21% 8%);
+
+        /* blue — brand */
+        --clr-blue-soft: hsl(220 55% 22%);
+        --clr-blue-fill: hsl(220 88% 41%);
+        --clr-blue-fill-strong: hsl(220 90% 50%);
+        --clr-blue-fg: hsl(220 92% 74%);
+        --clr-blue-fg-strong: hsl(220 94% 84%);
+
+        /* cyan — links */
+        --clr-cyan-soft: hsl(190 45% 20%);
+        --clr-cyan-fg: hsl(190 80% 66%);
+        --clr-cyan-fg-strong: hsl(190 85% 78%);
+
+        /* green — success */
+        --clr-green-soft: hsl(150 40% 18%);
+        --clr-green-fill: hsl(150 80% 26%);
+        --clr-green-fg: hsl(150 65% 64%);
+
+        /* amber — warning */
+        --clr-amber-soft: hsl(36 45% 20%);
+        --clr-amber-fill: hsl(36 92% 52%);
+        --clr-amber-fg: hsl(36 85% 68%);
+
+        /* red — danger */
+        --clr-red-soft: hsl(348 45% 22%);
+        --clr-red-fill: hsl(348 80% 40%);
+        --clr-red-fill-strong: hsl(348 82% 47%);
+        --clr-red-fg: hsl(348 90% 76%);
+        --clr-red-fg-strong: hsl(348 92% 86%);
+    }
+}
+
+:root[data-theme='dark'] {
+    color-scheme: dark;
+
+    /* neutral */
+    --clr-base: hsl(240 20% 18%);
+    --clr-mantle: hsl(240 21% 11%);
+    --clr-surface-0: hsl(237 16% 27%);
+    --clr-surface-1: hsl(234 13% 36%);
+    --clr-overlay: hsl(228 12% 68%);
+    --clr-subtext: hsl(225 14% 82%);
+    --clr-text: hsl(220 22% 95.5%);
+    --clr-inverse: hsl(220 22% 95.5%);
+    --clr-shade: hsl(240 21% 8%);
+
+    /* blue — brand */
+    --clr-blue-soft: hsl(220 55% 22%);
+    --clr-blue-fill: hsl(220 88% 41%);
+    --clr-blue-fill-strong: hsl(220 90% 50%);
+    --clr-blue-fg: hsl(220 92% 74%);
+    --clr-blue-fg-strong: hsl(220 94% 84%);
+
+    /* cyan — links */
+    --clr-cyan-soft: hsl(190 45% 20%);
+    --clr-cyan-fg: hsl(190 80% 66%);
+    --clr-cyan-fg-strong: hsl(190 85% 78%);
+
+    /* green — success */
+    --clr-green-soft: hsl(150 40% 18%);
+    --clr-green-fill: hsl(150 80% 26%);
+    --clr-green-fg: hsl(150 65% 64%);
+
+    /* amber — warning */
+    --clr-amber-soft: hsl(36 45% 20%);
+    --clr-amber-fill: hsl(36 92% 52%);
+    --clr-amber-fg: hsl(36 85% 68%);
+
+    /* red — danger */
+    --clr-red-soft: hsl(348 45% 22%);
+    --clr-red-fill: hsl(348 80% 40%);
+    --clr-red-fill-strong: hsl(348 82% 47%);
+    --clr-red-fg: hsl(348 90% 76%);
+    --clr-red-fg-strong: hsl(348 92% 86%);
+}
+
+:root {
+    /* ---- Text -------------------------------------------------------- */
+    --text-clr-base: var(--clr-text);
+    --text-clr-muted: var(--clr-subtext);
+    --text-clr-inverse: var(--clr-inverse);
+    --text-clr-brand: var(--clr-blue-fg);
+    --text-clr-brand-hover: var(--clr-blue-fg-strong);
+    --text-clr-brand-selected: var(--clr-blue-fg-strong);
+    --text-clr-danger: var(--clr-red-fg);
+    --text-clr-success: var(--clr-green-fg);
+    --text-clr-warning: var(--clr-amber-fg);
+    --text-clr-link: var(--clr-cyan-fg);
+    --text-clr-link-hover: var(--clr-cyan-fg-strong);
+
+    /* ---- Background -------------------------------------------------- */
+    --bg-clr-base: var(--clr-mantle);
+    --bg-clr-surface: var(--clr-base);
+    --bg-clr-surface-2: var(--clr-surface-0);
+    --bg-clr-accent: var(--clr-surface-0);
+    --bg-clr-brand: var(--clr-blue-fill);
+    --bg-clr-brand-hover: var(--clr-blue-fill-strong);
+    --bg-clr-brand-ink: var(--clr-inverse);
+    --bg-clr-brand-soft: var(--clr-blue-soft);
+    --bg-clr-danger: var(--clr-red-fill);
+    --bg-clr-danger-hover: var(--clr-red-fill-strong);
+    --bg-clr-danger-ink: var(--clr-inverse);
+    --bg-clr-danger-soft: var(--clr-red-soft);
+    --bg-clr-success: var(--clr-green-fill);
+    --bg-clr-success-ink: var(--clr-inverse);
+    --bg-clr-success-soft: var(--clr-green-soft);
+    --bg-clr-warning: var(--clr-amber-fill);
+    --bg-clr-warning-ink: var(--clr-shade);
+    --bg-clr-warning-soft: var(--clr-amber-soft);
+    --bg-clr-dark: var(--clr-shade);
+    --shadow-clr: var(--clr-shade);
+    --bg-clr-backdrop: hsl(from var(--clr-shade) h s l / 0.45);
+    --bg-clr-gradient: radial-gradient(
+        circle at 20% 10%,
+        var(--bg-clr-accent),
+        var(--bg-clr-base) 45%
+    );
+
+    /* ---- Icon -------------------------------------------------------- */
+    /* Glyphs that must stay legible but recede — a decorative or inactive icon
+       is a non-text graphic, so it rides the 3:1 rung rather than the 4.5:1 one
+       --text-clr-muted is pinned to. Keeping it a step below the text ramp is
+       what makes an emphasised icon next to a dimmed one actually read. */
+    --icon-clr-dim: var(--clr-overlay);
+
+    /* ---- Border ------------------------------------------------------ */
+    --border-clr-base: var(--clr-surface-1);
+    --border-clr-strong: var(--clr-text);
+    --border-clr-input: var(--clr-overlay);
+    --border-clr-brand: var(--clr-blue-fg);
+    --border-clr-danger: var(--clr-red-fg);
+    --border-clr-success: var(--clr-green-fg);
+    --border-clr-warning: var(--clr-amber-fg);
+
+    /* ---- Outline / focus --------------------------------------------- */
+    --outline-clr-base: var(--clr-blue-fg);
+}

package/styles/0-settings/index.css

@@ -0,0 +1,5 @@
+@import url('./colors.css');
+@import url('./typography.css');
+@import url('./spacing.css');
+@import url('./layout.css');
+@import url('./motion.css');

package/styles/0-settings/layout.css

@@ -0,0 +1,52 @@
+:root {
+    --container-width-sm: 56rem;
+    --container-width-md: 60rem;
+    --container-width-lg: 70rem;
+    --container-width-xl: 90rem;
+    --container-padding: var(--space-m);
+    --gap: var(--space-l);
+    --grid-columns: 12;
+
+    --radius-xs: 0.25rem; /* 4px — checkboxes, swatches */
+    --radius-sm: 0.375rem; /* 6px — buttons, inputs, alerts */
+    --radius-md: 0.5rem; /* 8px — cards, panels, sections */
+    --radius-lg: 0.75rem; /* 12px — dialogs, sheets */
+    --radius-pill: 999px; /* a sentinel, not a rung — stays px */
+
+    /* Border widths stay in px on purpose: a hairline that scales with the root
+     font size lands on fractional device pixels and renders soft. */
+    --stroke-sm: 1px;
+    --stroke-md: 1.5px;
+    --stroke-lg: 4px; /* leading rules on alerts, active tab markers */
+
+    /* One shared control rhythm, so a button and the input beside it line up. */
+    --control-height-sm: 1.875rem; /* 30px — clears the 24px WCAG 2.5.8 target */
+    --control-height-md: 2.375rem; /* 38px */
+    --control-inline-pad-sm: var(--space-xs);
+    --control-inline-pad-md: var(--space-s);
+    --control-gap: var(--space-2xs);
+
+    --icon-size-sm: 0.875rem; /* 14px — inside sm controls */
+    --icon-size-md: 1rem; /* 16px */
+    --icon-size-lg: 1.125rem; /* 18px — alert leading icons */
+
+    /* px for the same reason as the strokes: this is a drawn line, not a measure. */
+    --outline-width: 2px;
+    --outline-offset: 2px;
+
+    --opacity-disabled: 0.45;
+
+    /* Soft elevation. The shadow reads as depth, not as a drawn edge. */
+    --shadow-sm: 0 1px 2px
+        color-mix(in srgb, var(--shadow-clr) 14%, transparent);
+    --shadow-md: 0 3px 8px
+        color-mix(in srgb, var(--shadow-clr) 18%, transparent);
+    --shadow-brand: 0 3px 8px
+        color-mix(in srgb, var(--outline-clr-base) 18%, transparent);
+
+    /* DEPRECATED — the hard-offset "spark" shadows are retired. These aliases keep
+     the ~18 existing call sites rendering the new soft language until each
+     component is swept, then both names go. Do not use in new code. */
+    --shadow-spark: var(--shadow-sm);
+    --shadow-spark-lg: var(--shadow-md);
+}

package/styles/0-settings/motion.css

@@ -0,0 +1,11 @@
+:root {
+    --duration-fast: 80ms; /* hover and press feedback */
+    --duration-base: 120ms; /* colour and background transitions */
+    --duration-slow: 2s; /* one spinner revolution — deliberately unhurried */
+
+    --ease-base: ease;
+    --ease-out: cubic-bezier(0.2, 0, 0, 1);
+}
+
+/* Duration and easing only — anything that loops or travels still needs its own
+   prefers-reduced-motion escape in the component. */