@junoput01/junoui 0.2.0

package/dist/scss/_juno-tokens.scss

@@ -0,0 +1,176 @@
+// junoui design tokens — SCSS variables. Generated; do not edit.
+
+$juno-color-colorblind-dark-nominal: #78A9FF !default;
+$juno-color-colorblind-dark-active: #BE95FF !default;
+$juno-color-colorblind-dark-target: #FF7EB6 !default;
+$juno-color-colorblind-dark-caution: #F1C21B !default;
+$juno-color-colorblind-dark-warning: #FF832B !default;
+$juno-color-colorblind-dark-data: oklch(93% 0.008 85) !default;
+$juno-color-colorblind-dark-label: oklch(63% 0.012 85) !default;
+$juno-color-colorblind-dark-muted: oklch(48.5% 0.010 85) !default;
+$juno-color-colorblind-dark-border: oklch(30% 0.012 85) !default;
+$juno-color-colorblind-dark-s0: oklch(11% 0.010 85) !default;
+$juno-color-colorblind-dark-s1: oklch(15% 0.012 85) !default;
+$juno-color-colorblind-dark-s2: oklch(19% 0.012 85) !default;
+$juno-color-colorblind-dark-s3: oklch(24% 0.012 85) !default;
+$juno-color-colorblind-dark-data-dim: oklch(38% 0.010 85) !default;
+$juno-color-colorblind-dark-border-strong: oklch(40% 0.012 85) !default;
+$juno-color-colorblind-light-nominal: #0043CE !default;
+$juno-color-colorblind-light-active: #6929C4 !default;
+$juno-color-colorblind-light-target: #9F1853 !default;
+$juno-color-colorblind-light-caution: #7D4F00 !default;
+$juno-color-colorblind-light-warning: #BA4300 !default;
+$juno-color-colorblind-light-data: oklch(14% 0.008 85) !default;
+$juno-color-colorblind-light-label: oklch(42% 0.010 85) !default;
+$juno-color-colorblind-light-muted: oklch(63% 0.008 85) !default;
+$juno-color-colorblind-light-border: oklch(82% 0.010 85) !default;
+$juno-color-colorblind-light-s0: oklch(97% 0.008 85) !default;
+$juno-color-colorblind-light-s1: oklch(93% 0.010 85) !default;
+$juno-color-colorblind-light-s2: oklch(89% 0.010 85) !default;
+$juno-color-colorblind-light-s3: oklch(85% 0.010 85) !default;
+$juno-color-colorblind-light-data-dim: oklch(70% 0.008 85) !default;
+$juno-color-colorblind-light-border-strong: oklch(74% 0.010 85) !default;
+$juno-color-soft-dark-nominal: oklch(63% 0.13 155) !default;
+$juno-color-soft-dark-active: oklch(67% 0.12 210) !default;
+$juno-color-soft-dark-target: oklch(58% 0.14 318) !default;
+$juno-color-soft-dark-caution: oklch(72% 0.12 75) !default;
+$juno-color-soft-dark-warning: oklch(62% 0.15 30) !default;
+$juno-color-soft-dark-data: oklch(90% 0.008 88) !default;
+$juno-color-soft-dark-label: oklch(63% 0.010 88) !default;
+$juno-color-soft-dark-muted: oklch(48.5% 0.010 88) !default;
+$juno-color-soft-dark-border: oklch(31% 0.010 88) !default;
+$juno-color-soft-dark-s0: oklch(12% 0.012 88) !default;
+$juno-color-soft-dark-s1: oklch(16% 0.012 88) !default;
+$juno-color-soft-dark-s2: oklch(20% 0.012 88) !default;
+$juno-color-soft-dark-s3: oklch(25% 0.012 88) !default;
+$juno-color-soft-dark-data-dim: oklch(39% 0.010 88) !default;
+$juno-color-soft-dark-border-strong: oklch(41% 0.010 88) !default;
+$juno-color-soft-light-nominal: oklch(40% 0.11 155) !default;
+$juno-color-soft-light-active: oklch(44% 0.11 210) !default;
+$juno-color-soft-light-target: oklch(42% 0.12 318) !default;
+$juno-color-soft-light-caution: oklch(50% 0.12 75) !default;
+$juno-color-soft-light-warning: oklch(42% 0.13 30) !default;
+$juno-color-soft-light-data: oklch(14% 0.008 88) !default;
+$juno-color-soft-light-label: oklch(44% 0.010 88) !default;
+$juno-color-soft-light-muted: oklch(62.5% 0.008 88) !default;
+$juno-color-soft-light-border: oklch(84% 0.010 88) !default;
+$juno-color-soft-light-s0: oklch(96% 0.010 88) !default;
+$juno-color-soft-light-s1: oklch(92% 0.010 88) !default;
+$juno-color-soft-light-s2: oklch(88% 0.010 88) !default;
+$juno-color-soft-light-s3: oklch(84% 0.010 88) !default;
+$juno-color-soft-light-data-dim: oklch(69% 0.008 88) !default;
+$juno-color-soft-light-border-strong: oklch(76% 0.010 88) !default;
+$juno-color-standard-dark-nominal: oklch(73% 0.22 148) !default;
+$juno-color-standard-dark-active: oklch(76% 0.16 204) !default;
+$juno-color-standard-dark-target: oklch(65% 0.26 324) !default;
+$juno-color-standard-dark-caution: oklch(77% 0.17 73) !default;
+$juno-color-standard-dark-warning: oklch(63% 0.22 28) !default;
+$juno-color-standard-dark-data: oklch(93% 0.008 85) !default;
+$juno-color-standard-dark-label: oklch(63% 0.012 85) !default;
+$juno-color-standard-dark-muted: oklch(48.5% 0.010 85) !default;
+$juno-color-standard-dark-border: oklch(30% 0.012 85) !default;
+$juno-color-standard-dark-s0: oklch(11% 0.010 85) !default;
+$juno-color-standard-dark-s1: oklch(15% 0.012 85) !default;
+$juno-color-standard-dark-s2: oklch(19% 0.012 85) !default;
+$juno-color-standard-dark-s3: oklch(24% 0.012 85) !default;
+$juno-color-standard-dark-data-dim: oklch(38% 0.010 85) !default;
+$juno-color-standard-dark-border-strong: oklch(40% 0.012 85) !default;
+$juno-color-standard-light-nominal: oklch(42% 0.18 148) !default;
+$juno-color-standard-light-active: oklch(47% 0.16 220) !default;
+$juno-color-standard-light-target: oklch(45% 0.22 324) !default;
+$juno-color-standard-light-caution: oklch(50% 0.17 73) !default;
+$juno-color-standard-light-warning: oklch(42% 0.21 26) !default;
+$juno-color-standard-light-data: oklch(14% 0.008 85) !default;
+$juno-color-standard-light-label: oklch(42% 0.010 85) !default;
+$juno-color-standard-light-muted: oklch(63% 0.008 85) !default;
+$juno-color-standard-light-border: oklch(82% 0.010 85) !default;
+$juno-color-standard-light-s0: oklch(97% 0.008 85) !default;
+$juno-color-standard-light-s1: oklch(93% 0.010 85) !default;
+$juno-color-standard-light-s2: oklch(89% 0.010 85) !default;
+$juno-color-standard-light-s3: oklch(85% 0.010 85) !default;
+$juno-color-standard-light-data-dim: oklch(70% 0.008 85) !default;
+$juno-color-standard-light-border-strong: oklch(74% 0.010 85) !default;
+$juno-border-width-1: 1px !default;
+$juno-border-width-2: 2px !default;
+$juno-border-width-3: 3px !default;
+$juno-bp-sm: 640px !default;
+$juno-bp-md: 768px !default;
+$juno-bp-lg: 1024px !default;
+$juno-bp-xl: 1280px !default;
+$juno-bp-2xl: 1536px !default;
+$juno-shadow-1: 0 1px 2px rgb(0 0 0 / 0.30) !default;
+$juno-shadow-2: 0 4px 14px rgb(0 0 0 / 0.35) !default;
+$juno-shadow-3: 0 12px 32px rgb(0 0 0 / 0.50) !default;
+$juno-motion-duration-instant: 80ms !default;
+$juno-motion-duration-quick: 140ms !default;
+$juno-motion-duration-base: 200ms !default;
+$juno-motion-duration-deliberate: 300ms !default;
+$juno-motion-ease-decel: cubic-bezier(0.2, 0.8, 0.2, 1) !default;
+$juno-motion-ease-accel: cubic-bezier(0.4, 0, 1, 1) !default;
+$juno-motion-ease-standard: cubic-bezier(0.2, 0.7, 0.3, 1) !default;
+$juno-motion-ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.2) !default;
+$juno-opacity-disabled: 0.45 !default;
+$juno-opacity-muted: 0.65 !default;
+$juno-opacity-scrim: 0.62 !default;
+$juno-radius-2: 2px !default;
+$juno-radius-3: 3px !default;
+$juno-radius-4: 4px !default;
+$juno-radius-5: 5px !default;
+$juno-radius-8: 8px !default;
+$juno-size-tap-min: 24px !default;
+$juno-size-tap-comfortable: 44px !default;
+$juno-size-dot-sm: 8px !default;
+$juno-size-dot-md: 10px !default;
+$juno-space-2: 2px !default;
+$juno-space-4: 4px !default;
+$juno-space-8: 8px !default;
+$juno-space-10: 10px !default;
+$juno-space-12: 12px !default;
+$juno-space-16: 16px !default;
+$juno-space-20: 20px !default;
+$juno-space-24: 24px !default;
+$juno-space-28: 28px !default;
+$juno-space-32: 32px !default;
+$juno-space-40: 40px !default;
+$juno-space-56: 56px !default;
+$juno-space-72: 72px !default;
+$juno-space-96: 96px !default;
+$juno-font-family-sans: 'B612', sans-serif !default;
+$juno-font-family-mono: 'B612 Mono', monospace !default;
+$juno-font-weight-light: 300 !default;
+$juno-font-weight-regular: 400 !default;
+$juno-font-weight-medium: 500 !default;
+$juno-font-weight-semibold: 600 !default;
+$juno-font-weight-bold: 700 !default;
+$juno-font-size-10: 10px !default;
+$juno-font-size-11: 11px !default;
+$juno-font-size-12: 12px !default;
+$juno-font-size-13: 13px !default;
+$juno-font-size-14: 14px !default;
+$juno-font-size-16: 16px !default;
+$juno-font-size-18: 18px !default;
+$juno-font-size-20: 20px !default;
+$juno-font-size-28: 28px !default;
+$juno-font-size-32: 32px !default;
+$juno-font-size-36: 36px !default;
+$juno-font-size-38: 38px !default;
+$juno-font-size-48: 48px !default;
+$juno-font-size-52: 52px !default;
+$juno-font-lineHeight-none: 1 !default;
+$juno-font-lineHeight-tight: 1.1 !default;
+$juno-font-lineHeight-snug: 1.2 !default;
+$juno-font-lineHeight-normal: 1.4 !default;
+$juno-font-lineHeight-relaxed: 1.5 !default;
+$juno-font-lineHeight-loose: 1.7 !default;
+$juno-font-tracking-tight: 0.02em !default;
+$juno-font-tracking-normal: 0.06em !default;
+$juno-font-tracking-label: 0.08em !default;
+$juno-font-tracking-wide: 0.12em !default;
+$juno-font-tracking-caps: 0.15em !default;
+$juno-font-tracking-wider: 0.2em !default;
+$juno-font-tracking-widest: 0.3em !default;
+$juno-z-surface: 0 !default;
+$juno-z-raised: 100 !default;
+$juno-z-anchored: 2000 !default;
+$juno-z-overlay: 4000 !default;
+$juno-z-alert: 5000 !default;

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@junoput01/junoui",
+  "version": "0.2.0",
+  "description": "junoui — a token-driven design system. Color carries semantic meaning, never decoration: every hue has one assigned role (NOMINAL / ACTIVE / TARGET / CAUTION / WARNING). Ships multi-platform tokens (CSS, SCSS, JS/TS, JSON, Android, iOS, Flutter) plus a framework-agnostic CSS component layer.",
+  "type": "module",
+  "license": "MIT",
+  "author": "junoput",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com-junoput:junoput/junoui.git"
+  },
+  "keywords": [
+    "design-system",
+    "design-tokens",
+    "style-dictionary",
+    "css-variables",
+    "theme",
+    "dark-mode",
+    "accessibility",
+    "colorblind",
+    "dashboard",
+    "icons"
+  ],
+  "main": "./dist/js/tokens.js",
+  "module": "./dist/js/tokens.js",
+  "types": "./dist/js/tokens.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/js/tokens.d.ts",
+      "import": "./dist/js/tokens.js",
+      "default": "./dist/js/tokens.js"
+    },
+    "./css": "./dist/css/juno.css",
+    "./css/tokens": "./dist/css/juno-tokens.css",
+    "./fonts.css": "./dist/css/juno-fonts.css",
+    "./scss": "./dist/scss/_juno-tokens.scss",
+    "./tokens.json": "./dist/json/tokens.json",
+    "./android/colors": "./dist/android/colors.xml",
+    "./android/dimens": "./dist/android/dimens.xml",
+    "./ios": "./dist/ios/JunoTokens.swift",
+    "./flutter": "./dist/flutter/juno_tokens.dart",
+    "./icons": "./dist/icons/juno-icons.svg",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src/css",
+    "src/icons",
+    "src/fonts",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build:tokens": "node style-dictionary.config.mjs",
+    "build:icons": "node scripts/build-icons.mjs",
+    "build:css": "node scripts/bundle-css.mjs",
+    "build": "npm run build:tokens && npm run build:icons && npm run build:css",
+    "gen-docs": "node scripts/gen-docs.mjs",
+    "clean": "node -e \"import('node:fs').then(fs=>fs.rmSync('dist',{recursive:true,force:true}))\"",
+    "lint:css": "stylelint \"src/css/**/*.css\"",
+    "lint:css:fix": "stylelint \"src/css/**/*.css\" --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "lint": "npm run lint:css && npm run format:check",
+    "test": "npm run build && node --test \"test/**/*.test.mjs\"",
+    "prepare": "npm run build",
+    "showcase": "npm run build && node scripts/serve.mjs",
+    "test:visual": "playwright test",
+    "test:visual:update": "playwright test --update-snapshots",
+    "changeset": "changeset",
+    "version": "changeset version",
+    "release": "npm run build && changeset publish"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.31.0",
+    "@playwright/test": "^1.61.1",
+    "prettier": "^3.8.4",
+    "style-dictionary": "^4.4.0",
+    "stylelint": "^17.13.0",
+    "stylelint-config-standard": "^40.0.0"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/css/base.css

@@ -0,0 +1,120 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  junoui — base layer
+ *  Reset + document defaults. Sets B612 as the type family but does NOT
+ *  fetch it — that would break under a strict CSP and phone home. Supply the
+ *  fonts yourself, or opt into the self-hosted set: `import 'junoui/fonts.css'`
+ *  (see src/css/fonts.css). Falls back to system sans/mono until then.
+ * ════════════════════════════════════════════════════════════════════ */
+
+*,
+*::before,
+*::after { box-sizing: border-box; }
+
+/* System color scheme. Without data-juno-mode the theme follows the OS
+   (`prefers-color-scheme`; see juno-tokens.css) — `dark light` here lets the
+   UA pick matching scrollbars/form chrome. An explicit mode pins both. */
+:root { color-scheme: dark light; }
+:root[data-juno-mode='dark'] { color-scheme: dark; }
+
+/* Control surfaces. On dark panels the hairline border (~23% L) disappears, so
+   lift the control edge to `muted` and sit controls on `s2`; light mode keeps the
+   true border on `s0`. Form components read these instead of raw surface roles. */
+:root,
+:root[data-juno-mode='dark'] {
+  --juno-control-surface: var(--juno-s2);
+  --juno-control-edge: var(--juno-muted);
+
+  /* Knob + track-rim of the lever controls (switch / slider). Edge and knob
+     are lifted well clear of the track so the control reads at a squint: a
+     light grey lever (face hi→lo) with dark grip lines on a dark track. */
+  --juno-control-edge-strong: var(--juno-label);
+  --juno-knob-edge: var(--juno-label);
+  --juno-knob-face-hi: var(--juno-label);
+  --juno-knob-face-lo: var(--juno-muted);
+  --juno-knob-grip: var(--juno-s0);
+}
+
+:root[data-juno-mode='light'] {
+  color-scheme: light;
+
+  --juno-control-surface: var(--juno-s0);
+  --juno-control-edge: var(--juno-border);
+
+  /* Light mode inverts: a dark grey lever with light grip lines on a near-
+     white track. Same vars, so switch + slider stay in lockstep. */
+  --juno-control-edge-strong: var(--juno-label);
+  --juno-knob-edge: var(--juno-label);
+  --juno-knob-face-hi: var(--juno-muted);
+  --juno-knob-face-lo: var(--juno-label);
+  --juno-knob-grip: var(--juno-s0);
+}
+
+/* no data-juno-mode + a light OS → the light control surfaces above */
+@media (prefers-color-scheme: light) {
+  :root:not([data-juno-mode]) {
+    --juno-control-surface: var(--juno-s0);
+    --juno-control-edge: var(--juno-border);
+    --juno-knob-face-hi: var(--juno-muted);
+    --juno-knob-face-lo: var(--juno-label);
+  }
+}
+
+* { margin: 0; padding: 0; }
+
+html { -webkit-text-size-adjust: 100%; }
+
+body {
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-14);
+  line-height: var(--juno-font-lineHeight-normal);
+  letter-spacing: var(--juno-font-tracking-tight);
+  color: var(--juno-data);
+  background: var(--juno-s0);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizelegibility;
+}
+
+code, kbd, samp, pre { font-family: var(--juno-font-family-mono); }
+
+/* Accessible focus — uses the ACTIVE role so it tracks the theme. */
+:where(a, button, input, select, textarea, [tabindex]):focus-visible {
+  outline: 2px solid var(--juno-active);
+  outline-offset: 2px;
+  border-radius: var(--juno-radius-2);
+}
+
+/* Touch ergonomics — on coarse pointers (finger, not mouse) every control
+   that sizes itself off the tap minimum grows to the comfortable target
+   (44px). A cascade override, not a token change: the token values stay
+   the contract; a phone just reads the bigger one. */
+@media (pointer: coarse) {
+  :root { --juno-size-tap-min: var(--juno-size-tap-comfortable); }
+}
+
+@keyframes juno-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Higher-contrast preference: hairline seams step up to the strong border
+   so panel edges stop disappearing on users who asked for more contrast. */
+@media (prefers-contrast: more) {
+  :root { --juno-border: var(--juno-border-strong); }
+}
+
+/* Windows High Contrast / forced-colors: opt into the system palette so
+   borders and focus stay visible when our colors are overridden. */
+@media (forced-colors: active) {
+  *:focus-visible { outline-color: Highlight; }
+
+  .juno-badge,
+  .juno-btn,
+  .juno-card,
+  .juno-readout { border: 1px solid CanvasText; }
+  .juno-badge { forced-color-adjust: none; } /* keep status fill meaningful */
+}

package/src/css/components/accordion.css

@@ -0,0 +1,83 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Accordion / disclosure
+ *  Stacked, expandable sections built on native <details>/<summary> —
+ *  keyboard + screen-reader native, ZERO JS. A chevron rotates on open.
+ *  Use a lone <details> for a single disclosure; group them in
+ *  .juno-accordion for a bordered set.
+ *  Usage:
+ *    <div class="juno-accordion">
+ *      <details class="juno-accordion__item" open>
+ *        <summary class="juno-accordion__summary">Region · us-east-1</summary>
+ *        <div class="juno-accordion__body">…</div>
+ *      </details>
+ *      <details class="juno-accordion__item">
+ *        <summary class="juno-accordion__summary">Region · eu-west-1</summary>
+ *        <div class="juno-accordion__body">…</div>
+ *      </details>
+ *    </div>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-accordion {
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-radius: var(--juno-radius-5);
+  overflow: hidden;
+}
+
+.juno-accordion__item {
+  border-block-end: var(--juno-border-width-1) solid var(--juno-border);
+}
+
+.juno-accordion__item:last-child { border-block-end: none; }
+
+.juno-accordion__summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--juno-space-12);
+  padding: var(--juno-pad-control-block) var(--juno-pad-surface-inline);
+  background: var(--juno-s1);
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-13);
+  font-weight: var(--juno-font-weight-medium);
+  color: var(--juno-data);
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+
+/* hide the native disclosure triangle (both engines) */
+.juno-accordion__summary::-webkit-details-marker { display: none; }
+
+.juno-accordion__summary:hover { background: var(--juno-s2); }
+
+/* chevron — a rotated corner that flips when the item is open */
+.juno-accordion__summary::after {
+  content: '';
+  flex-shrink: 0;
+  inline-size: var(--juno-space-8);
+  block-size: var(--juno-space-8);
+  border-inline-end: var(--juno-border-width-2) solid var(--juno-muted);
+  border-block-end: var(--juno-border-width-2) solid var(--juno-muted);
+  transform: translateY(-2px) rotate(45deg);
+  transition: transform var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+.juno-accordion__item[open] > .juno-accordion__summary::after {
+  transform: translateY(2px) rotate(-135deg);
+}
+
+.juno-accordion__body {
+  padding: var(--juno-space-12) var(--juno-pad-surface-inline) var(--juno-pad-surface-block);
+  background: var(--juno-s0);
+  border-block-start: var(--juno-border-width-1) solid var(--juno-border);
+  font-size: var(--juno-font-size-13);
+  line-height: var(--juno-font-lineHeight-relaxed);
+  color: var(--juno-label);
+}
+
+/* a lone disclosure (no .juno-accordion wrapper) gets its own frame */
+details.juno-accordion__item:only-child {
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-radius: var(--juno-radius-5);
+  overflow: hidden;
+}

package/src/css/components/alert.css

@@ -0,0 +1,90 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Alert / inline notification
+ *  A role-tinted banner for in-context messages: validation summaries,
+ *  system status, callouts. Soft-fill by default with a role accent rail;
+ *  icon + title + text + optional actions + optional dismiss. Color comes
+ *  from --juno-role (set by a .juno--<role> class); default informational.
+ *  Usage:
+ *    <div class="juno-alert juno--warning" role="alert">
+ *      <span class="juno-alert__icon" aria-hidden="true">⚠</span>
+ *      <div class="juno-alert__body">
+ *        <span class="juno-alert__title">Deploy blocked</span>
+ *        <span class="juno-alert__text">Two checks are still failing.</span>
+ *      </div>
+ *      <button class="juno-alert__close" aria-label="Dismiss">✕</button>
+ *    </div>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-alert {
+  --juno-role: var(--juno-active);
+
+  display: flex;
+  align-items: flex-start;
+  gap: var(--juno-space-12);
+  padding: var(--juno-pad-surface-block) var(--juno-pad-surface-inline);
+  background: color-mix(in srgb, var(--juno-role) 10%, transparent);
+  border: var(--juno-border-width-1) solid color-mix(in srgb, var(--juno-role) 30%, transparent);
+  border-inline-start: var(--juno-border-width-3) solid var(--juno-role);
+  border-radius: var(--juno-radius-5);
+  color: var(--juno-data);
+}
+
+.juno-alert__icon {
+  flex-shrink: 0;
+  color: var(--juno-role);
+  font-size: var(--juno-font-size-16);
+  line-height: var(--juno-font-lineHeight-none);
+}
+
+.juno-alert__body {
+  flex: 1;
+  min-inline-size: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--juno-space-2);
+}
+
+.juno-alert__title {
+  font-family: var(--juno-font-family-sans);
+  font-weight: var(--juno-font-weight-semibold);
+  font-size: var(--juno-font-size-13);
+  color: var(--juno-data);
+}
+
+.juno-alert__text {
+  font-size: var(--juno-font-size-13);
+  line-height: var(--juno-font-lineHeight-relaxed);
+  color: var(--juno-label);
+}
+
+.juno-alert__actions {
+  display: flex;
+  gap: var(--juno-space-8);
+  margin-block-start: var(--juno-space-8);
+}
+
+.juno-alert__close {
+  flex-shrink: 0;
+  appearance: none;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: var(--juno-muted);
+  font-size: var(--juno-font-size-16);
+  line-height: var(--juno-font-lineHeight-none);
+  cursor: pointer;
+}
+
+.juno-alert__close:hover { color: var(--juno-data); }
+
+/* solid — high-emphasis variant: full role fill, text on the base surface */
+.juno-alert--solid {
+  background: var(--juno-role);
+  border-color: var(--juno-role);
+  color: var(--juno-s0);
+}
+
+.juno-alert--solid .juno-alert__icon,
+.juno-alert--solid .juno-alert__title,
+.juno-alert--solid .juno-alert__text,
+.juno-alert--solid .juno-alert__close { color: var(--juno-s0); }

package/src/css/components/avatar.css

@@ -0,0 +1,82 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Avatar  ·  user / entity portrait
+ *  A round (or squared) portrait that holds an <img>, initials, or an
+ *  icon fallback. Sizes ride one custom property; an optional role ring
+ *  marks status (online, alert…). Zero JS. Pairs with a
+ *  .juno-skeleton--circle placeholder while the image loads.
+ *  Usage:
+ *    <span class="juno-avatar"><img src="…" alt="Ada Lovelace" /></span>
+ *    <span class="juno-avatar juno-avatar--lg">AL</span>
+ *    <span class="juno-avatar juno-avatar--ring juno--nominal">
+ *      <svg class="juno-icon"><use href="…#juno-i-user" /></svg>
+ *    </span>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-avatar {
+  --juno-avatar-size: var(--juno-space-32);
+
+  display: inline-grid;
+  place-content: center;
+  flex-shrink: 0;
+  inline-size: var(--juno-avatar-size);
+  block-size: var(--juno-avatar-size);
+  overflow: hidden;
+  border-radius: 50%;
+  background: var(--juno-control-surface);
+  border: var(--juno-border-width-1) solid var(--juno-control-edge-strong);
+  color: var(--juno-label);
+  font-family: var(--juno-font-family-sans);
+
+  /* initials scale with the avatar (~40% of its box) */
+  font-size: calc(var(--juno-avatar-size) * 0.4);
+  font-weight: var(--juno-font-weight-semibold);
+  letter-spacing: var(--juno-font-tracking-tight);
+  text-transform: uppercase;
+  user-select: none;
+}
+
+/* the image fills the circle */
+.juno-avatar img {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+/* a square / rounded-rect portrait instead of a circle */
+.juno-avatar--square {
+  border-radius: var(--juno-radius-4);
+}
+
+/* status ring — reads the role; pair with a label / title for meaning */
+.juno-avatar--ring {
+  border-color: var(--juno-role);
+  box-shadow: 0 0 0 var(--juno-border-width-2) color-mix(in srgb, var(--juno-role) 30%, transparent);
+}
+
+/* sizes */
+.juno-avatar--sm {
+  --juno-avatar-size: var(--juno-space-24);
+}
+
+.juno-avatar--lg {
+  --juno-avatar-size: var(--juno-space-40);
+}
+
+.juno-avatar--xl {
+  --juno-avatar-size: var(--juno-space-56);
+}
+
+/* overlapping cluster — a row of avatars that tuck under each other */
+.juno-avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+
+.juno-avatar-group .juno-avatar {
+  border-color: var(--juno-s0);
+  border-width: var(--juno-border-width-2);
+}
+
+.juno-avatar-group .juno-avatar + .juno-avatar {
+  margin-inline-start: calc(var(--juno-avatar-size) * -0.3);
+}