@livx.cc/bare-v3 0.1.0-alpha.122 → 0.1.0-alpha.123

package/dist/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.0-alpha.122",
+  "version": "0.1.0-alpha.123",
   "cssSha256": "bcd1ca98ef45cdb643cdf8c89b5e9c3950b1b7e8a594c7f3d236d7c5d1c3a434",
   "classes": [
     "b3-accordion",
@@ -118,8 +118,8 @@
       "classes": [
         "b3-root"
       ],
-      "guidance": "Place b3-root on html to synchronize the document canvas and native controls. Set data-b3-theme=\"dark\" explicitly for dark mode. A nested root inherits its parent theme and tokens; set data-b3-theme on it only to force a different theme. Override complete CSS values in --b3-* properties. Consumer CSS is unlayered and wins over library defaults. Scope custom palette overrides to each theme: unlayered :root token overrides beat layered library dark defaults. Use .b3-root:not([data-b3-theme=\"dark\"]) for light-only colors and .b3-root[data-b3-theme=\"dark\"] for dark overrides. Set foreground/background pairs together. Borders: --b3-color-border is the soft edge for cards, dividers, rows and bubbles; --b3-color-border-strong is the text-input edge (b3-input, textarea, select, b3-input-group, the composer field), kept at least 3:1 against both surface and canvas. Override both per theme; focus and error states keep their own colors. Check ordinary text at least 4.5:1 against its actual backing in every theme/state, including muted badges and selected filters. For translucent fills, composite over the real surface; a passing accent-on-white pair does not qualify an accent-tinted badge. Leave margin above the threshold. Density: data-b3-density=\"compact\" on the root tightens controls, nav, headings, avatars and messages for pointer-first apps; \"auto\" applies it only under a fine pointer on a wide viewport and keeps touch sizing on phones. For nested rounded surfaces with an even inset, derive the inner radius from the outer radius minus padding and border, clamped at zero. File-selector buttons and command-palette items follow this relationship. Match focus indicators to the element shape; keep surface colors theme-aware. Enabled native buttons inherit surrounding text color by default, including custom card actions; explicit component/app colors still win. Disabled native controls retain browser disabled styling.",
-      "example": "<html class=\"b3-root\" data-b3-theme=\"dark\">"
+      "guidance": "Place b3-root on html to synchronize the document canvas and native controls. Set data-b3-theme=\"dark\" explicitly for dark mode. A nested root inherits its parent theme and tokens; set data-b3-theme on it only to force a different theme. Override complete CSS values in --b3-* properties. Consumer CSS is unlayered and wins over library defaults. Scope custom palette overrides to each theme: unlayered :root token overrides beat layered library dark defaults. Use .b3-root:not([data-b3-theme=\"dark\"]) for light-only colors and .b3-root[data-b3-theme=\"dark\"] for dark overrides. Set foreground/background pairs together. Keep theme-invariant font, radius and spacing overrides outside light/dark selectors so switching theme preserves the app identity. Custom surfaces should use semantic color tokens, not a fixed light translucent fill behind theme-dependent text. Borders: --b3-color-border is the soft edge for cards, dividers, rows and bubbles; --b3-color-border-strong is the text-input edge (b3-input, textarea, select, b3-input-group, the composer field), kept at least 3:1 against both surface and canvas. Override both per theme; focus and error states keep their own colors. Check ordinary text at least 4.5:1 against its actual backing in every theme/state, including muted badges and selected filters. For translucent fills, composite over the real surface; a passing accent-on-white pair does not qualify an accent-tinted badge. Leave margin above the threshold. Density: data-b3-density=\"compact\" on the root tightens controls, nav, headings, avatars and messages for pointer-first apps; \"auto\" applies it only under a fine pointer on a wide viewport and keeps touch sizing on phones. For nested rounded surfaces with an even inset, derive the inner radius from the outer radius minus padding and border, clamped at zero. File-selector buttons and command-palette items follow this relationship. Match focus indicators to the element shape; keep surface colors theme-aware. Enabled native buttons inherit surrounding text color by default, including custom card actions; explicit component/app colors still win. Disabled native controls retain browser disabled styling.",
+      "example": "<html class=\"b3-root\" data-b3-theme=\"dark\">\n<style>\n/* Identity applies in both themes; scope custom palette values separately. */\n.b3-root {\n  --b3-font-body: system-ui, sans-serif;\n  --b3-font-display: Georgia, serif;\n  --b3-radius: 0.5rem;\n}\n.app-panel {\n  color: var(--b3-color-text);\n  background: var(--b3-color-surface);\n}\n</style>"
     },
     {
       "id": "layout",

package/dist/references/foundation.md

@@ -1,9 +1,21 @@
 # Root and theme
 
-Place b3-root on html to synchronize the document canvas and native controls. Set data-b3-theme="dark" explicitly for dark mode. A nested root inherits its parent theme and tokens; set data-b3-theme on it only to force a different theme. Override complete CSS values in --b3-* properties. Consumer CSS is unlayered and wins over library defaults. Scope custom palette overrides to each theme: unlayered :root token overrides beat layered library dark defaults. Use .b3-root:not([data-b3-theme="dark"]) for light-only colors and .b3-root[data-b3-theme="dark"] for dark overrides. Set foreground/background pairs together. Borders: --b3-color-border is the soft edge for cards, dividers, rows and bubbles; --b3-color-border-strong is the text-input edge (b3-input, textarea, select, b3-input-group, the composer field), kept at least 3:1 against both surface and canvas. Override both per theme; focus and error states keep their own colors. Check ordinary text at least 4.5:1 against its actual backing in every theme/state, including muted badges and selected filters. For translucent fills, composite over the real surface; a passing accent-on-white pair does not qualify an accent-tinted badge. Leave margin above the threshold. Density: data-b3-density="compact" on the root tightens controls, nav, headings, avatars and messages for pointer-first apps; "auto" applies it only under a fine pointer on a wide viewport and keeps touch sizing on phones. For nested rounded surfaces with an even inset, derive the inner radius from the outer radius minus padding and border, clamped at zero. File-selector buttons and command-palette items follow this relationship. Match focus indicators to the element shape; keep surface colors theme-aware. Enabled native buttons inherit surrounding text color by default, including custom card actions; explicit component/app colors still win. Disabled native controls retain browser disabled styling.
+Place b3-root on html to synchronize the document canvas and native controls. Set data-b3-theme="dark" explicitly for dark mode. A nested root inherits its parent theme and tokens; set data-b3-theme on it only to force a different theme. Override complete CSS values in --b3-* properties. Consumer CSS is unlayered and wins over library defaults. Scope custom palette overrides to each theme: unlayered :root token overrides beat layered library dark defaults. Use .b3-root:not([data-b3-theme="dark"]) for light-only colors and .b3-root[data-b3-theme="dark"] for dark overrides. Set foreground/background pairs together. Keep theme-invariant font, radius and spacing overrides outside light/dark selectors so switching theme preserves the app identity. Custom surfaces should use semantic color tokens, not a fixed light translucent fill behind theme-dependent text. Borders: --b3-color-border is the soft edge for cards, dividers, rows and bubbles; --b3-color-border-strong is the text-input edge (b3-input, textarea, select, b3-input-group, the composer field), kept at least 3:1 against both surface and canvas. Override both per theme; focus and error states keep their own colors. Check ordinary text at least 4.5:1 against its actual backing in every theme/state, including muted badges and selected filters. For translucent fills, composite over the real surface; a passing accent-on-white pair does not qualify an accent-tinted badge. Leave margin above the threshold. Density: data-b3-density="compact" on the root tightens controls, nav, headings, avatars and messages for pointer-first apps; "auto" applies it only under a fine pointer on a wide viewport and keeps touch sizing on phones. For nested rounded surfaces with an even inset, derive the inner radius from the outer radius minus padding and border, clamped at zero. File-selector buttons and command-palette items follow this relationship. Match focus indicators to the element shape; keep surface colors theme-aware. Enabled native buttons inherit surrounding text color by default, including custom card actions; explicit component/app colors still win. Disabled native controls retain browser disabled styling.
 
 Classes: b3-root
 
 ```html
 <html class="b3-root" data-b3-theme="dark">
+<style>
+/* Identity applies in both themes; scope custom palette values separately. */
+.b3-root {
+  --b3-font-body: system-ui, sans-serif;
+  --b3-font-display: Georgia, serif;
+  --b3-radius: 0.5rem;
+}
+.app-panel {
+  color: var(--b3-color-text);
+  background: var(--b3-color-surface);
+}
+</style>
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livx.cc/bare-v3",
-  "version": "0.1.0-alpha.122",
+  "version": "0.1.0-alpha.123",
   "type": "module",
   "thirdPartyNotices": "./dist/third-party.json",
   "files": [