@beehexa/design-rules 2611.3.2 → 2611.4.1

package/dist/docs/src/styles/docs.css

@@ -32,7 +32,7 @@
 .sidebar-item { padding: 0 var(--bh-space-150); }
 .sidebar-item > span:first-child, .sidebar-child > span:first-child { flex: 1; }
 .sidebar-item:hover, .sidebar-child:hover { background: var(--c-hover); }
-.sidebar-item[aria-current='page'] { background: var(--c-selected); box-shadow: inset 2px 0 0 var(--c-gold); }
+.sidebar-item[aria-current='page'] { background: var(--c-selected); box-shadow: inset var(--bh-border-width-selected) 0 0 var(--c-gold); }
 .sidebar-item[aria-current='page']:hover, .sidebar-child[aria-current='page']:hover { background: var(--c-selected-hover); }
 .sidebar-chevron { flex: none; color: var(--c-muted); transition: transform 200ms cubic-bezier(0.2, 0, 0, 1); }
 .sidebar-item[aria-expanded='true'] .sidebar-chevron { transform: rotate(90deg); }
@@ -98,8 +98,8 @@
 /* Release phase label, learned from GitHub Primer's Label: a pill with a 1 px border in the role
    colour, text in the role's fg colour and no fill, 20 px tall. The words carry the meaning;
    the colour only helps scanning. */
-.status-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 calc(var(--bh-space-100) - 1px); border: 1px solid var(--bh-color-border); border-radius: var(--bh-radius-full); color: var(--bh-color-text); background: transparent; text-decoration: none; white-space: nowrap; font: var(--bh-font-label-small); }
-.status-badge.is-large { height: var(--bh-size-control-small); padding: 0 calc(var(--bh-space-100) - 1px); }
+.status-badge { display: inline-flex; align-items: center; height: var(--bh-space-250); padding: 0 var(--bh-space-075); border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-full); color: var(--bh-color-text); background: transparent; text-decoration: none; white-space: nowrap; font: var(--bh-font-label-small); }
+.status-badge.is-large { height: var(--bh-size-control-small); padding: 0 var(--bh-space-100); }
 .status-early-access { border-color: var(--bh-color-border-brand); }
 .status-beta { border-color: var(--bh-color-border-info); color: var(--bh-color-text-info); }
 .status-ga { border-color: var(--bh-color-border-success); color: var(--bh-color-text-success); }
@@ -110,7 +110,7 @@ a.status-badge:hover { text-decoration: underline; }
 .component-tabs { display: flex; gap: var(--bh-space-300); margin: var(--bh-space-300) 0 0; padding: 0; border-top: 0; color: inherit; overflow-x: auto; }
 .component-tabs a { display: flex; align-items: center; height: var(--bh-size-control-default); padding: 0; border-bottom: var(--bh-border-width-selected) solid transparent; color: var(--c-muted); text-decoration: none; white-space: nowrap; font: var(--bh-font-label-default); }
 .component-tabs a:hover { color: var(--c-ink); }
-.component-tabs a[aria-current='page'] { border-bottom-color: var(--c-ink); color: var(--c-ink); }
+.component-tabs a[aria-current='page'] { border-bottom-color: var(--c-gold); color: var(--c-ink); }
 
 /* Body text. */
 .prose { container: prose / inline-size; padding-top: var(--bh-space-300); font: var(--bh-font-body-large); }
@@ -132,7 +132,7 @@ a.status-badge:hover { text-decoration: underline; }
 .prose th, .prose td { padding: var(--bh-space-100) var(--bh-space-150); border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: baseline; } /* first lines share a baseline, even when code sits next to text */
 .prose th { color: var(--c-muted); font: var(--bh-font-label-small); }
 .prose td code { overflow-wrap: anywhere; } /* long token names wrap instead of widening the page */
-.prose blockquote, .callout { margin: 0 0 var(--bh-space-300); padding: calc(var(--bh-space-200) - 1px); border: 1px solid var(--c-note-line); border-radius: var(--bh-radius-100); background: var(--c-note-bg); }
+.prose blockquote, .callout { margin: 0 0 var(--bh-space-300); padding: calc(var(--bh-space-200) - var(--bh-border-width-default)); border: 1px solid var(--c-note-line); border-radius: var(--bh-radius-100); background: var(--c-note-bg); }
 .prose blockquote p, .callout p { margin: 0; }
 .callout-title { margin-bottom: var(--bh-space-050) !important; font: var(--bh-font-heading-xsmall); }
 
@@ -149,14 +149,14 @@ a.status-badge:hover { text-decoration: underline; }
 /* Cards. */
 .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--bh-space-200); margin: 0 0 var(--bh-space-200); padding: 0 !important; list-style: none; }
 .card-grid > li { margin: 0 !important; }
-.card { display: block; height: 100%; padding: calc(var(--bh-space-300) - 1px); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); color: var(--c-ink) !important; text-decoration: none; transition: border-color 150ms ease, box-shadow 150ms ease; font: var(--bh-font-heading-small); }
-.card:hover { border-color: var(--c-muted); box-shadow: var(--c-shadow); }
+.card { display: block; height: 100%; padding: calc(var(--bh-space-300) - var(--bh-border-width-default)); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); color: var(--c-ink) !important; background: var(--bh-color-surface); box-shadow: var(--bh-elevation-shadow-raised); text-decoration: none; transition: border-color 150ms ease; font: var(--bh-font-heading-small); }
+.card:hover { border-color: var(--bh-color-border-bold); }
 .card p { margin: var(--bh-space-050) 0 var(--bh-space-150); color: var(--c-muted) !important; font: var(--bh-font-body-default); }
 .child-pages h2 { margin-top: var(--bh-space-500); }
 
 /* Previous / next and page meta. */
 .pager { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-200); margin-top: var(--bh-space-600); }
-.pager-link { display: grid; gap: var(--bh-space-050); padding: calc(var(--bh-space-200) - 1px); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); color: var(--c-ink); text-decoration: none; }
+.pager-link { display: grid; gap: var(--bh-space-050); padding: calc(var(--bh-space-200) - var(--bh-border-width-default)); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); color: var(--c-ink); text-decoration: none; }
 .pager-link:hover { border-color: var(--c-muted); }
 .pager-link span { color: var(--c-muted); font: var(--bh-font-body-small); }
 .pager-link b { font: var(--bh-font-heading-small); }
@@ -166,7 +166,7 @@ a.status-badge:hover { text-decoration: underline; }
 .page-meta a:hover { color: var(--c-ink); }
 
 /* Pages listed before their content is written. */
-.in-development { display: flex; gap: var(--bh-space-200); padding: calc(var(--bh-space-300) - 1px); border: 1px dashed var(--c-muted); border-radius: var(--bh-radius-150); background: var(--c-surf); }
+.in-development { display: flex; gap: var(--bh-space-200); padding: calc(var(--bh-space-300) - var(--bh-border-width-default)); border: 1px dashed var(--c-muted); border-radius: var(--bh-radius-150); background: var(--c-surf); }
 .in-development-icon { flex: none; display: grid; place-items: center; width: var(--bh-space-500); height: var(--bh-space-500); border-radius: var(--bh-radius-100); color: var(--bh-color-text-on-brand); background: var(--bh-color-background-brand-subtle); box-shadow: inset 0 0 0 1px var(--bh-color-border-brand-subtle); }
 .in-development p { margin: 0 0 var(--bh-space-100); }
 .in-development p:last-child { margin-bottom: 0; }
@@ -181,27 +181,11 @@ a.status-badge:hover { text-decoration: underline; }
 .prose .code-example pre { margin: 0; border-radius: var(--bh-radius-0); }
 
 /* Demo styles for component examples, until the component library ships. */
-.bh-button { display: inline-flex; align-items: center; gap: var(--bh-space-050); height: var(--bh-size-control-default); padding: 0 calc(var(--bh-space-150) - var(--bh-border-width-default)); border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-100); background: var(--bh-color-surface-page); color: var(--bh-color-text); cursor: pointer; transition: background var(--bh-motion-duration-fast) var(--bh-motion-easing-standard); font: var(--bh-font-label-default); }
-.bh-button:hover { background: var(--bh-color-background-neutral-subtle-hover); }
-.bh-button:focus-visible { outline: var(--bh-border-width-focused) solid var(--bh-color-border-focus); outline-offset: var(--bh-state-focus-offset); }
-.bh-button-primary { border-color: var(--bh-color-background-neutral-bold); background: var(--bh-color-background-neutral-bold); color: var(--bh-color-text-inverse); }
-.bh-button-primary:hover { border-color: var(--bh-color-background-neutral-bold-hover); background: var(--bh-color-background-neutral-bold-hover); }
-.bh-button-danger { border-color: var(--bh-color-background-danger-bold); background: var(--bh-color-background-danger-bold); color: var(--bh-color-text-on-bold); }
-.bh-button-danger:hover { border-color: var(--bh-color-background-danger-bold-hover); background: var(--bh-color-background-danger-bold-hover); }
-.bh-button:disabled, .bh-button:disabled:hover { border-color: var(--bh-color-border-disabled); color: var(--bh-color-text-disabled); background: var(--bh-color-background-disabled); cursor: not-allowed; }
 
 /* Label and state label, learned from GitHub Primer (@primer/react Label and StateLabel).
    Label: outlined pill, 1 px border in the role's emphasis colour, text in its fg colour, no
    fill; 20 px tall with 6 px padding (large: 24 px, 8 px). State label: solid emphasis fill,
    white text and an icon. */
-.bh-label { display: inline-flex; align-items: center; height: 20px; padding: 0 calc(var(--bh-space-100) - 1px); border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-full); color: var(--bh-color-text); background: transparent; white-space: nowrap; font: var(--bh-font-label-small); }
-.bh-label.is-large { height: var(--bh-size-control-small); padding: 0 calc(var(--bh-space-100) - 1px); }
-.bh-label.is-brand { border-color: var(--bh-color-border-brand); }
-.bh-label.is-info { border-color: var(--bh-color-border-info); color: var(--bh-color-text-info); }
-.bh-label.is-success { border-color: var(--bh-color-border-success); color: var(--bh-color-text-success); }
-.bh-label.is-warning { border-color: var(--bh-color-border-warning); color: var(--bh-color-text-warning); }
-.bh-label.is-danger { border-color: var(--bh-color-border-danger); color: var(--bh-color-text-danger); }
-.bh-label.is-neutral { border-color: var(--bh-color-border-bold); color: var(--bh-color-text-subtle); }
 .bh-state { display: inline-flex; align-items: center; gap: var(--bh-space-050); height: var(--bh-size-control-default); padding: 0 var(--bh-space-150); border-radius: var(--bh-radius-full); color: var(--bh-color-text-on-bold); white-space: nowrap; font: var(--bh-font-heading-xsmall); }
 .bh-state svg { flex: none; }
 .bh-state.is-info { background: var(--bh-color-background-info-bold); }
@@ -217,7 +201,7 @@ a.status-badge:hover { text-decoration: underline; }
 
 /* Below lg (1024 px) the side navigation is a drawer and a bar under the header opens it and
    the folded table of contents. */
-.docs-mobilebar { position: sticky; z-index: 50; top: var(--header-bottom); box-sizing: content-box; display: flex; align-items: center; justify-content: space-between; gap: var(--bh-space-150); height: var(--header-h); padding: 0 var(--page-margin); border-bottom: 1px solid var(--c-line); background: var(--c-bg); font: var(--bh-font-label-default); }
+.docs-mobilebar { position: sticky; z-index: var(--bh-z-index-sticky); top: var(--header-bottom); box-sizing: content-box; display: flex; align-items: center; justify-content: space-between; gap: var(--bh-space-150); height: var(--header-h); padding: 0 var(--page-margin); border-bottom: 1px solid var(--c-line); background: var(--c-bg); font: var(--bh-font-label-default); }
 .drawer-open { display: flex; align-items: center; gap: var(--bh-space-050); min-width: 0; height: var(--bh-size-control-default); padding: 0; border: 0; color: var(--c-ink); background: none; font: inherit; cursor: pointer; }
 .drawer-open-label { overflow: hidden; color: var(--c-muted); text-overflow: ellipsis; white-space: nowrap; }
 .drawer-open-label b { color: var(--c-ink); }
@@ -225,22 +209,22 @@ a.status-badge:hover { text-decoration: underline; }
 .toc-menu summary { display: flex; align-items: center; height: var(--bh-size-control-default); color: var(--c-muted); cursor: pointer; list-style: none; }
 .toc-menu summary::-webkit-details-marker { display: none; }
 .toc-menu summary::after { content: ' ▾'; }
-.toc-menu nav { position: absolute; top: calc(100% + var(--bh-space-050)); right: 0; width: min(300px, calc(100vw - 2 * var(--page-margin))); max-height: 60vh; padding: var(--bh-space-100); overflow-y: auto; border: 1px solid var(--c-line); border-radius: var(--bh-radius-100); background: var(--c-bg); box-shadow: var(--c-shadow); }
+.toc-menu nav { position: absolute; top: calc(100% + var(--bh-space-050)); right: 0; width: min(300px, calc(100vw - 2 * var(--page-margin))); max-height: 60vh; padding: var(--bh-space-050); overflow-y: auto; border-radius: var(--bh-radius-100); background: var(--bh-color-surface-overlay); box-shadow: var(--c-shadow); }
 .toc-menu a { display: flex; align-items: center; min-height: var(--bh-size-control-default); padding: 0 var(--bh-space-150); border-radius: var(--bh-radius-050); color: var(--c-ink); text-decoration: none; font: var(--bh-font-label-default); }
 .toc-menu .toc-depth-3 a { padding-left: var(--bh-space-300); color: var(--c-muted); }
-.toc-menu a:hover { background: var(--c-hover); }
+.toc-menu a:hover { background: var(--bh-color-surface-overlay-hover); }
 
-.sidebar { position: fixed; z-index: 120; top: 0; bottom: 0; left: 0; width: min(var(--sidebar-w), 86vw); height: auto; border-right: 1px solid var(--c-line); box-shadow: var(--c-shadow); transform: translateX(-105%); transition: transform 200ms ease; visibility: hidden; }
+.sidebar { --c-hover: var(--bh-color-surface-overlay-hover); --c-selected: var(--bh-color-surface-overlay-selected); --c-selected-hover: var(--bh-color-surface-overlay-selected-hover); position: fixed; z-index: var(--bh-z-index-modal); top: 0; bottom: 0; left: 0; width: min(var(--sidebar-w), 86vw); height: auto; border-right: 0; background: var(--bh-color-surface-overlay); box-shadow: var(--bh-elevation-shadow-modal); transform: translateX(-105%); transition: transform 200ms ease; visibility: hidden; }
 body[data-drawer] .sidebar { transform: none; visibility: visible; }
 .drawer-backdrop { display: none; }
-.drawer-backdrop:not([hidden]) { position: fixed; z-index: 110; inset: 0; display: block; background: var(--bh-color-surface-scrim); }
+.drawer-backdrop:not([hidden]) { position: fixed; z-index: var(--bh-z-index-modal); inset: 0; display: block; background: var(--bh-color-surface-scrim); }
 
 /* Tables marked stackable are one card per row in a narrow column, and a table once the column is 720 px wide. */
 .prose table.stackable, .prose table.stackable tbody, .prose table.stackable tr, .prose table.stackable td { display: block; width: 100%; }
 .prose table.stackable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
 .prose table.stackable tr { margin-bottom: var(--bh-space-150); padding: var(--bh-space-050) 0; border: 1px solid var(--c-line); border-radius: var(--bh-radius-100); }
 /* The cell stays one block, so text, code and links inside it flow as one line of text; the label sits in the left column. */
-.prose table.stackable td { position: relative; display: block; min-height: var(--bh-space-500); padding: var(--bh-space-100) var(--bh-space-150) var(--bh-space-100) calc(7rem + 2 * var(--bh-space-150)); border: 0; }
+.prose table.stackable td { position: relative; display: block; min-height: var(--bh-space-500); --label-w: 7rem; padding: var(--bh-space-100) var(--bh-space-150) var(--bh-space-100) calc(var(--label-w) + 2 * var(--bh-space-150)); border: 0; }
 .prose table.stackable td::before { content: attr(data-label); position: absolute; top: var(--bh-space-100); left: var(--bh-space-150); width: 7rem; color: var(--c-muted); font: var(--bh-font-label-small); }
 @container prose (min-width: 720px) {
   .prose table.stackable { display: table; }
@@ -262,7 +246,7 @@ body[data-drawer] .sidebar { transform: none; visibility: visible; }
   .docs-grid { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
   .docs-grid.no-sidebar { grid-template-columns: minmax(0, 1fr); }
   .docs-mobilebar { display: none; }
-  .sidebar { position: sticky; z-index: auto; top: var(--header-bottom); bottom: auto; width: auto; height: calc(100vh - var(--header-bottom)); box-shadow: none; transform: none; transition: none; visibility: visible; }
+  .sidebar { --c-hover: var(--bh-color-background-neutral-subtle-hover); --c-selected: var(--bh-color-background-selected); --c-selected-hover: var(--bh-color-background-selected-hover); background: var(--c-bg); border-right: var(--bh-border-width-default) solid var(--c-line); position: sticky; z-index: auto; top: var(--header-bottom); bottom: auto; width: auto; height: calc(100vh - var(--header-bottom)); box-shadow: none; transform: none; transition: none; visibility: visible; }
   .sidebar-head { display: none; }
   .drawer-backdrop:not([hidden]) { display: none; }
 }
@@ -280,7 +264,7 @@ body[data-drawer] .sidebar { transform: none; visibility: visible; }
 
 /* Get started. */
 .role-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-200); margin-bottom: var(--bh-space-200); }
-.role-card { padding: calc(var(--bh-space-300) - 1px); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); }
+.role-card { padding: calc(var(--bh-space-300) - var(--bh-border-width-default)); border: 1px solid var(--c-line); border-radius: var(--bh-radius-150); background: var(--bh-color-surface); box-shadow: var(--bh-elevation-shadow-raised); }
 .prose .role-card h3 { margin: 0 0 var(--bh-space-050); font: var(--bh-font-heading-small); }
 .prose .role-card h3 a { color: var(--c-ink); text-decoration: none; }
 .prose .role-card h3 a:hover { text-decoration: underline; }
@@ -309,7 +293,7 @@ body[data-drawer] .sidebar { transform: none; visibility: visible; }
 /* A 40 px button on small screens, the default 32 px from md. */
 @media (min-width: 768px) { .prose .button-dark { justify-content: flex-start; height: var(--bh-size-control-default); padding: 0 var(--bh-space-150); } }
 /* Under /vi/, a page shown in English says so above its title. */
-.lang-notice { margin: 0 0 var(--bh-space-150); padding: calc(var(--bh-space-100) - 1px) calc(var(--bh-space-150) - 1px); border: 1px solid var(--c-note-line); border-radius: var(--bh-radius-100); color: var(--c-ink); background: var(--c-note-bg); font: var(--bh-font-body-default); }
+.lang-notice { margin: 0 0 var(--bh-space-150); padding: calc(var(--bh-space-100) - var(--bh-border-width-default)) calc(var(--bh-space-150) - var(--bh-border-width-default)); border: 1px solid var(--c-note-line); border-radius: var(--bh-radius-100); color: var(--c-ink); background: var(--c-note-bg); font: var(--bh-font-body-default); }
 
 /* Moving between pages: the page fades across instead of flashing white, while the header and
    the sidebar stay put (cross-document view transitions; browsers without them load as before). */

package/dist/docs/src/styles/elevation.css

@@ -0,0 +1,83 @@
+/* Illustrations for the Elevation page. Surfaces, shadows, edges and sizes are tokens only. */
+.bh-scope-light, .bh-scope-dark { color: var(--bh-color-text); background: var(--bh-color-surface-page); }
+
+/* Hero: the three levels from the front and from the side (as on Material's elevation page). */
+.el-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-200); margin: var(--bh-space-300) 0; }
+@container prose (min-width: 640px) { .el-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+.el-view { display: grid; grid-template-rows: 1fr auto; margin: 0; overflow: hidden; border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-150); }
+.el-view figcaption { padding: var(--bh-space-100) var(--bh-space-200); border-top: var(--bh-border-width-default) solid var(--bh-color-border); color: var(--bh-color-text-subtle); font: var(--bh-font-body-small); }
+.el-front { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: var(--bh-space-200); min-height: calc(3 * var(--bh-space-800)); padding: var(--bh-space-400) var(--bh-space-300); background: var(--bh-color-surface-page); }
+.el-plate { display: grid; place-items: end start; aspect-ratio: 1; padding: var(--bh-space-100); border-radius: var(--bh-radius-150); background: var(--bh-color-surface); }
+.el-plate b { color: var(--bh-color-text-subtle); font: var(--bh-font-label-small); }
+.el-plate.is-page { background: transparent; border: var(--bh-border-width-default) dashed var(--bh-color-border-bold); }
+.el-plate.is-raised { border: var(--bh-border-width-default) solid var(--bh-color-border); box-shadow: var(--bh-elevation-shadow-raised); }
+.el-plate.is-overlay { background: var(--bh-color-surface-overlay); box-shadow: var(--bh-elevation-shadow-overlay); }
+.el-plate.is-modal { background: var(--bh-color-surface-overlay); box-shadow: var(--bh-elevation-shadow-modal); }
+.el-side { display: grid; align-content: end; gap: var(--bh-space-300); min-height: calc(3 * var(--bh-space-800)); padding: var(--bh-space-300) var(--bh-space-300) 0; background: var(--bh-color-surface-page); }
+.el-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--bh-space-025) var(--bh-space-150); }
+.el-bar i { grid-row: span 2; width: calc(2 * var(--bh-space-800)); height: var(--bh-space-400); border-radius: var(--bh-radius-100); background: var(--bh-color-surface); }
+.el-bar.is-raised i { border: var(--bh-border-width-default) solid var(--bh-color-border); box-shadow: var(--bh-elevation-shadow-raised); }
+.el-bar.is-overlay i { background: var(--bh-color-surface-overlay); box-shadow: var(--bh-elevation-shadow-overlay); }
+.el-bar.is-modal i { background: var(--bh-color-surface-overlay); box-shadow: var(--bh-elevation-shadow-modal); }
+.el-bar code { font: var(--bh-font-code-default); font-size: var(--bh-font-size-100); color: var(--bh-color-text); }
+.el-bar em { color: var(--bh-color-text-subtle); font: var(--bh-font-body-small); font-style: normal; }
+.el-ground { display: block; margin: var(--bh-space-100) calc(-1 * var(--bh-space-300)) 0; padding: var(--bh-space-050) var(--bh-space-300); border-top: var(--bh-border-width-default) solid var(--bh-color-border-bold); background: var(--bh-color-surface-page); }
+.el-ground code { font: var(--bh-font-code-default); font-size: var(--bh-font-size-100); color: var(--bh-color-text-subtle); }
+
+/* Examples: the level's real component on the page colour, so the shadow reads as it will in the product. */
+.el-ex { background: var(--bh-color-surface-page); }
+.el-ex.is-top { align-items: flex-start; padding-bottom: calc(var(--bh-space-1000) + var(--bh-space-200)); }
+.el-card { display: grid; gap: var(--bh-space-050); width: min(100%, 16rem); }
+.el-card.is-wide { width: 16rem; }
+.el-anchor { display: grid; justify-items: start; gap: var(--bh-space-050); }
+.el-menu { min-width: 11rem; }
+/* Menu rows follow the site menus: a default-height control, 12 px side padding, 4 px items in an 8 px menu with 4 px padding. */
+.el-menu > .sh-pin { display: flex; }
+.el-menu > .sh-pin > span:first-child { flex: 1; }
+.el-btn-icon { gap: var(--bh-space-050); }
+.el-btn-icon svg { flex: none; color: var(--bh-color-icon); }
+.el-menu.is-list { width: 11rem; min-width: 0; }
+
+.el-modal-ex { position: relative; overflow: hidden; min-height: calc(4 * var(--bh-space-800)); }
+.el-page { position: absolute; inset: 0; }
+.el-lines { display: grid; gap: var(--bh-space-150); padding: var(--bh-space-300); }
+.el-lines i { height: var(--bh-space-150); border-radius: var(--bh-radius-full); background: var(--bh-color-skeleton); }
+.el-lines i:nth-child(1) { width: 60%; }
+.el-lines i:nth-child(3) { width: 75%; }
+.el-scrim { position: absolute; inset: 0; background: var(--bh-color-surface-scrim); }
+.el-modal-ex > .sh-pin { position: relative; }
+.el-dialog { width: min(100%, 20rem); }
+.el-actions { display: flex; justify-content: flex-end; gap: var(--bh-space-100); }
+.el-scrim-pin { position: absolute; top: var(--bh-space-300); right: calc(var(--bh-space-1000) + var(--bh-space-200)); }
+.el-dot { display: block; width: var(--bh-space-100); height: var(--bh-space-100); }
+
+/* Light and dark side by side. */
+.el-themes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-200); margin: var(--bh-space-300) 0; }
+@container prose (min-width: 640px) { .el-themes:not(.is-stack) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+.el-theme { margin: 0; overflow: hidden; border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-150); }
+.el-theme figcaption { padding: var(--bh-space-100) var(--bh-space-200); border-bottom: var(--bh-border-width-default) solid var(--bh-color-border); color: var(--bh-color-text-subtle); font: var(--bh-font-label-small); }
+.el-theme-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--bh-space-400); padding: var(--bh-space-800) var(--bh-space-300); }
+.el-theme-stage > .sh-pin:first-child { position: absolute; top: var(--bh-space-200); left: var(--bh-space-500); }
+.el-theme-stage.is-col { align-items: flex-end; padding: var(--bh-space-400) var(--bh-space-1000) var(--bh-space-400) var(--bh-space-300); }
+@container prose (max-width: 560px) { .el-theme-stage { gap: calc(var(--bh-space-1000) + var(--bh-space-400)); padding-bottom: var(--bh-space-1000); } .el-theme-stage.is-col { align-items: center; padding-right: var(--bh-space-300); } .el-menu.is-list > .sh-pin + .sh-pin { margin-top: var(--bh-space-1000); } }
+
+/* Do and don't. */
+.el-panel { display: grid; gap: var(--bh-space-050); width: min(100%, 16rem); padding: var(--bh-space-300); border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-150); background: var(--bh-color-surface); }
+.el-panel b { color: var(--bh-color-text); font: var(--bh-font-heading-small); }
+.el-panel span { color: var(--bh-color-text-subtle); font: var(--bh-font-body-default); }
+.el-panel.is-shadowed { box-shadow: var(--bh-elevation-shadow-modal); }
+.el-menu.is-wrong-surface .is-on { background: var(--bh-color-background-neutral-subtle-hover); }
+.el-menu.is-own { box-shadow: var(--bh-elevation-shadow-raised), var(--bh-elevation-shadow-modal); }
+.el-menu.is-bordered { border: var(--bh-border-width-default) solid var(--bh-color-border-bold); }
+.sp-dd-stage.bh-scope-dark { background: var(--bh-color-surface-page); }
+@container prose (max-width: 560px) { .el-ex { padding-bottom: calc(var(--bh-space-1000) + var(--bh-space-800)); } }
+@container prose (max-width: 560px) { .sh-ex.el-ex, .sh-ex.el-ex.is-top { padding-bottom: calc(2 * var(--bh-space-1000) + var(--bh-space-200)); } .el-theme-stage, .el-theme-stage.is-col { padding-bottom: calc(2 * var(--bh-space-1000)); } }
+/* Examples with a pin to the left: the element moves right so the label has room. */
+.sh-ex.el-ex.is-pin-left { justify-content: flex-end; padding-right: calc(2 * var(--bh-space-1000)); }
+.el-modal-ex .el-scrim-pin { right: auto; left: calc(var(--bh-space-1000) + var(--bh-space-600)); top: auto; bottom: calc(var(--bh-space-1000) + var(--bh-space-400)); }
+.el-theme-stage:not(.is-col) { align-items: flex-end; padding-right: calc(2 * var(--bh-space-1000)); }
+@container prose (max-width: 560px) {
+  .sh-ex.el-ex.is-pin-left { justify-content: center; padding-right: var(--bh-space-300); }
+  .el-theme-stage:not(.is-col), .el-theme-stage.is-col { align-items: flex-start; padding-right: var(--bh-space-300); }
+  .el-modal-ex .el-scrim-pin { left: auto; right: calc(var(--bh-space-1000) + var(--bh-space-600)); top: var(--bh-space-100); }
+}

package/dist/docs/src/styles/global.css

@@ -34,15 +34,6 @@ html { scroll-behavior: smooth; scroll-padding-top: var(--bh-space-1000); scroll
    (16 px by default), because every size token is in rem. */
 body { margin: 0; min-width: 320px; overflow-x: hidden; font: var(--bh-font-body-default); }
 /* Bold inside text is semibold: 700 belongs to the display styles only. */
-/* Inter character variants, on everywhere (decided 27/10/2026): cv05 gives lowercase l a tail and
-   cv08 gives uppercase I serifs, so l, I and 1 never look alike in names, IDs and keys.
-   Every text style is applied with the `font` shorthand, and the shorthand resets
-   font-feature-settings to normal, so inheritance alone can't carry the features. This rule sets
-   them on every element from one variable; change the variable, not the property:
-   `--bh-font-features: "cv05", "cv08", "zero"` adds the slashed zero to a code value.
-   JetBrains Mono has no cv05 or cv08, so code is not affected. */
-:root { --bh-font-features: "cv05", "cv08"; }
-*, ::before, ::after { font-feature-settings: var(--bh-font-features) !important; }
 b, strong { font-weight: var(--bh-font-weight-semibold); }
 h1, h2, h3, h4, h5, h6 { font-weight: var(--bh-font-weight-semibold); }
 code, kbd, pre, samp { font-family: var(--bh-font-family-mono); }
@@ -51,7 +42,7 @@ button, a { -webkit-tap-highlight-color: transparent; }
 a { color: inherit; }
 svg { display: block; }
 
-.skip-link { position: fixed; z-index: 200; top: -5rem; left: 1rem; display: inline-flex; align-items: center; height: var(--bh-size-control-default); padding: 0 var(--bh-space-150); border-radius: var(--bh-radius-100); color: var(--bh-color-text-inverse); background: var(--bh-color-background-neutral-bold); font: var(--bh-font-label-default); }
+.skip-link { position: fixed; z-index: var(--bh-z-index-toast); top: -5rem; left: 1rem; display: inline-flex; align-items: center; height: var(--bh-size-control-default); padding: 0 var(--bh-space-150); border-radius: var(--bh-radius-100); color: var(--bh-color-text-inverse); background: var(--bh-color-background-neutral-bold); font: var(--bh-font-label-default); }
 .skip-link:focus { top: 1rem; }
 h1, h2, h3, p { margin-top: 0; }
 h1, h2, h3 { text-wrap: balance; }

package/dist/docs/src/styles/icons.css

@@ -5,21 +5,20 @@
 
 /* ---------- Library ---------- */
 .ib { margin: 0 0 var(--bh-space-400); }
-.ib-controls { position: sticky; z-index: 5; top: var(--header-bottom, 49px); display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--bh-space-150) var(--bh-space-200); padding: var(--bh-space-150) 0; border-bottom: 1px solid var(--c-line); background: var(--c-bg); }
+.ib-controls { position: sticky; z-index: var(--bh-z-index-sticky); top: var(--header-bottom, 49px); display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--bh-space-150) var(--bh-space-200); padding: var(--bh-space-150) 0; border-bottom: 1px solid var(--c-line); background: var(--c-bg); }
 .ib-search { position: relative; display: flex; align-items: center; flex: 1 1 280px; min-width: 0; }
 .ib-search-icon { position: absolute; left: var(--bh-space-150); color: var(--bh-color-icon-subtle); pointer-events: none; }
-.ib-search input { width: 100%; height: 40px; padding: 0 var(--bh-space-150) 0 var(--bh-space-400); border: 1px solid var(--bh-color-border-bold); border-radius: var(--bh-radius-100); color: var(--c-ink); background: var(--bh-color-surface); font: var(--bh-font-body-default); }
+.ib-search input { width: 100%; padding: 0 var(--bh-space-150) 0 var(--bh-space-400); }
 .ib-search input::placeholder { color: var(--bh-color-text-subtlest); }
-.ib-field { display: grid; gap: var(--bh-space-050); color: var(--c-muted); font: var(--bh-font-label-small); }
 /* Category select: the browser's own arrow sits at a fixed spot of its own, so it is replaced by the
    Lucide chevron at the spacing tokens: 12 px from the edge, 16 px icon, 4 px to the text (as the search field). */
 .ib-select { position: relative; display: flex; align-items: center; max-width: 100%; }
 .ib-select-icon { position: absolute; right: var(--bh-space-150); color: var(--bh-color-icon-subtle); pointer-events: none; }
-.ib-field select { appearance: none; -webkit-appearance: none; height: 40px; max-width: 100%; padding: 0 var(--bh-space-400) 0 var(--bh-space-150); border: 1px solid var(--bh-color-border-bold); border-radius: var(--bh-radius-100); color: var(--c-ink); background: var(--bh-color-surface); font: var(--bh-font-body-default); }
+.ib-field select { appearance: none; -webkit-appearance: none; max-width: 100%; padding: 0 var(--bh-space-400) 0 var(--bh-space-150); }
 .ib-sizes { display: flex; }
 .ib-size { position: relative; }
 .ib-size input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
-.ib-size span { display: grid; place-items: center; min-width: 44px; height: 40px; padding: 0 var(--bh-space-100); border: 1px solid var(--bh-color-border-bold); color: var(--c-muted); background: var(--bh-color-surface); font: var(--bh-font-label-default); font-variant-numeric: tabular-nums; }
+.ib-size span { display: grid; place-items: center; min-width: 44px; height: var(--bh-size-control-default); padding: 0 var(--bh-space-100); border: var(--bh-border-width-default) solid var(--bh-color-border-bold); color: var(--c-muted); background: var(--bh-color-surface); font: var(--bh-font-label-default); font-variant-numeric: tabular-nums; }
 .ib-size + .ib-size span { margin-left: -1px; }
 .ib-size:first-of-type span { border-radius: var(--bh-radius-100) 0 0 var(--bh-radius-100); }
 .ib-size:last-of-type span { border-radius: 0 var(--bh-radius-100) var(--bh-radius-100) 0; }
@@ -38,7 +37,7 @@
 .ib-icon[data-copied] { border-color: var(--bh-color-border-success); background: var(--bh-color-background-success-subtle); }
 .ib-icon[data-copied] .ib-name { color: var(--bh-color-text-success); }
 .prose .ib-empty { margin: var(--bh-space-300) 0; padding: var(--bh-space-300); border: 1px dashed var(--c-line); border-radius: var(--bh-radius-150); color: var(--c-muted); text-align: center; }
-.ib-toast { position: fixed; z-index: 60; left: 50%; bottom: 24px; max-width: calc(100vw - 32px); padding: var(--bh-space-100) var(--bh-space-200); border-radius: var(--bh-radius-100); color: var(--bh-color-text-inverse); background: var(--bh-color-surface-inverse); box-shadow: var(--c-shadow); font: var(--bh-font-label-default); opacity: 0; transform: translate(-50%, 8px); transition: opacity 150ms ease, transform 150ms ease; pointer-events: none; }
+.ib-toast { position: fixed; z-index: var(--bh-z-index-toast); left: 50%; bottom: 24px; max-width: calc(100vw - 32px); padding: var(--bh-space-100) var(--bh-space-200); border-radius: var(--bh-radius-100); color: var(--bh-color-text-inverse); background: var(--bh-color-surface-inverse); box-shadow: var(--c-shadow); font: var(--bh-font-label-default); opacity: 0; transform: translate(-50%, 8px); transition: opacity 150ms ease, transform 150ms ease; pointer-events: none; }
 .ib-toast:empty { padding: 0; }
 .ib-toast[data-show] { opacity: 1; transform: translate(-50%, 0); }
 .prose .ib-credit { margin: var(--bh-space-300) 0 0; color: var(--c-muted); font: var(--bh-font-body-small); }
@@ -84,15 +83,15 @@
 .ic-spaced svg { color: var(--bh-color-icon); }
 .ic-spaced.is-16 { font: var(--bh-font-label-default); }
 .ic-spaced.is-20 { font: var(--bh-font-body-large); }
-.ic-gap { position: relative; align-self: stretch; min-height: 24px; background: var(--bh-color-background-danger-subtle); box-shadow: inset 1px 0 0 var(--bh-color-border-danger), inset -1px 0 0 var(--bh-color-border-danger); }
+.ic-gap { position: relative; align-self: stretch; min-height: var(--bh-space-300); background: var(--bh-color-background-danger-subtle); box-shadow: inset 1px 0 0 var(--bh-color-border-danger), inset -1px 0 0 var(--bh-color-border-danger); }
 .is-16 .ic-gap { width: 4px; }
 .is-20 .ic-gap { width: 8px; }
 .ic-gap small { position: absolute; top: 100%; left: 50%; margin-top: var(--bh-space-050); color: var(--bh-color-text-danger); font: var(--bh-font-label-small); font-style: normal; transform: translateX(-50%); }
 
 /* Target size */
 .ic-target { position: relative; display: grid; place-items: center; border: 1px dashed var(--bh-color-border-info); border-radius: var(--bh-radius-100); color: var(--bh-color-icon); background: var(--bh-color-background-info-subtle); }
-.ic-target.is-24 { width: 24px; height: 24px; }
-.ic-target.is-32 { width: 32px; height: 32px; }
+.ic-target.is-24 { width: var(--bh-size-target-minimum); height: var(--bh-size-target-minimum); }
+.ic-target.is-32 { width: var(--bh-size-control-default); height: var(--bh-size-control-default); }
 .ic-target small { position: absolute; left: 100%; margin-left: var(--bh-space-100); color: var(--bh-color-text-info); font: var(--bh-font-label-small); }
 
 /* Common actions */
@@ -114,8 +113,7 @@
 
 .ic-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--bh-space-100); }
 .ic-row.is-icons { gap: var(--bh-space-200); color: var(--bh-color-icon); }
-.ic-ibtn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--bh-radius-100); color: var(--bh-color-icon); }
-.ic-ibtn.is-outlined { border: 1px solid var(--bh-color-border); background: var(--bh-color-surface); }
+.ic-ibtn.is-outlined { border-color: var(--bh-color-border); background: var(--bh-color-surface); }
 .ic-bare { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--bh-color-icon); outline: 1px dashed var(--bh-color-border-danger); outline-offset: 0; }
 .ic-text14 { display: inline-flex; align-items: center; gap: var(--bh-space-050); color: var(--c-ink); font: var(--bh-font-body-default); }
 .ic-text14 svg { color: var(--bh-color-icon); }
@@ -126,10 +124,8 @@
 .ic-text14.is-baseline svg { display: inline; margin-right: var(--bh-space-050); vertical-align: baseline; }
 .ic-text14 .is-decor { color: var(--bh-color-border-brand); }
 .ic-nav { display: grid; gap: var(--bh-space-025); width: 180px; }
-.ic-nav-item { position: relative; display: flex; align-items: center; gap: var(--bh-space-100); height: 32px; padding: 0 var(--bh-space-150); border-radius: var(--bh-radius-100); color: var(--c-ink); font: var(--bh-font-label-default); }
+.ic-nav-item { position: relative; display: flex; align-items: center; gap: var(--bh-space-100); height: var(--bh-size-control-default); padding: 0 var(--bh-space-150); border-radius: var(--bh-radius-050); color: var(--bh-color-text); font: var(--bh-font-label-default); }
 .ic-nav-item svg { color: var(--bh-color-icon); }
-.ic-nav-item.is-selected { background: var(--bh-color-background-selected); }
-.ic-nav-item.is-selected::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: var(--bh-border-width-selected); border-radius: var(--bh-radius-025); background: var(--bh-color-border-selected); }
 .ic-tip-wrap { display: grid; justify-items: center; gap: var(--bh-space-075); }
-.ic-tip { position: relative; padding: var(--bh-space-050) var(--bh-space-100); border-radius: var(--bh-radius-050); color: var(--bh-color-text-inverse); background: var(--bh-color-surface-inverse); font: var(--bh-font-label-small); }
+.ic-tip { position: relative; }
 .ic-tip::after { content: ''; position: absolute; left: 50%; top: 100%; border: 4px solid transparent; border-top-color: var(--bh-color-surface-inverse); transform: translateX(-50%); }

package/dist/docs/src/styles/kit.css

@@ -0,0 +1,112 @@
+/* Example kit: the one look of each part used in the examples on this site.
+   Every value is a token, and each part follows the rules on the foundation pages
+   (Color usage, Typography usage, Size and density, Spacing, Radius, Border, Elevation).
+   This is not a component library. Real components will replace it.
+   The older class names after each kit-* name are aliases kept while the demos move to kit-*. */
+
+/* Button: 32 px, side padding space.150, radius.100, label.default. */
+.kit-btn, .sp-btn, .c-button, .ui-btn, .bh-button, .ic-ibtn, .icon-button { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: var(--bh-space-050); box-sizing: border-box; height: var(--bh-size-control-default); padding: 0 var(--bh-space-150); border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-100); color: var(--bh-color-text); background: var(--bh-color-surface); white-space: nowrap; font: var(--bh-font-label-default); }
+:is(button, a):is(.kit-btn, .bh-button) { cursor: pointer; text-decoration: none; }
+:is(button, a):is(.kit-btn, .bh-button):hover { background: var(--bh-color-background-neutral-subtle-hover); }
+:is(.kit-btn, .bh-button):focus-visible { outline: var(--bh-border-width-focused) solid var(--bh-color-border-focus); outline-offset: var(--bh-state-focus-offset); }
+:is(.kit-btn, .sp-btn, .c-button).is-primary, .ui-btn, .bh-button-primary { border-color: var(--bh-color-background-neutral-bold); color: var(--bh-color-text-inverse); background: var(--bh-color-background-neutral-bold); }
+:is(button, a):is(.kit-btn.is-primary, .bh-button-primary):hover { border-color: var(--bh-color-background-neutral-bold-hover); background: var(--bh-color-background-neutral-bold-hover); }
+:is(.kit-btn, .sp-btn, .c-button).is-danger, .bh-button-danger { border-color: var(--bh-color-background-danger-bold); color: var(--bh-color-text-on-bold); background: var(--bh-color-background-danger-bold); }
+:is(button, a):is(.kit-btn.is-danger, .bh-button-danger):hover { border-color: var(--bh-color-background-danger-bold-hover); background: var(--bh-color-background-danger-bold-hover); }
+:is(.kit-btn, .sp-btn).is-small { height: var(--bh-size-control-small); padding: 0 var(--bh-space-100); font: var(--bh-font-label-small); }
+:is(.kit-btn, .sp-btn).is-large { height: var(--bh-size-control-large); padding: 0 var(--bh-space-200); }
+/* Icon button: square, same height as a button. */
+.kit-btn.is-icon, .ic-ibtn, .icon-button { width: var(--bh-size-control-default); padding: 0; color: var(--bh-color-icon); }
+.kit-btn.is-subtle, .ic-ibtn:not(.is-outlined) { border-color: transparent; background: transparent; }
+:is(.kit-btn, .bh-button):disabled, :is(.kit-btn, .bh-button):disabled:hover { border-color: var(--bh-color-border-disabled); color: var(--bh-color-text-disabled); background: var(--bh-color-background-disabled); cursor: not-allowed; }
+
+/* Text field and select: 32 px, edge border.bold, placeholder text.subtlest. */
+.kit-input, .sp-input, .ib-search input, .ib-field select { box-sizing: border-box; height: var(--bh-size-control-default); border: var(--bh-border-width-default) solid var(--bh-color-border-bold); border-radius: var(--bh-radius-100); color: var(--bh-color-text); background: var(--bh-color-surface); font: var(--bh-font-body-default); }
+.kit-input { padding: 0 var(--bh-space-150); }
+.kit-input::placeholder, .ib-search input::placeholder { color: var(--bh-color-text-subtlest); }
+.kit-field, .zi-field, .ib-field { display: grid; gap: var(--bh-space-050); color: var(--bh-color-text); font: var(--bh-font-label-default); }
+
+/* Card: surface, border, radius.150, padding space.300, raised at rest. */
+.kit-card, .el-card, .op-tile, .ui-card, .c-surf-card { box-sizing: border-box; padding: var(--bh-space-300); border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-150); background: var(--bh-color-surface); box-shadow: var(--bh-elevation-shadow-raised); }
+.kit-card-title, .el-card > b, .op-tile b { color: var(--bh-color-text); font: var(--bh-font-heading-small); }
+.kit-card-text, .el-card > span, .op-tile span.op-status { color: var(--bh-color-text-subtle); font: var(--bh-font-body-default); }
+
+/* Menu: surface.overlay, radius.100, padding space.050, shadow overlay. Items 32 px, radius.050, label.default. */
+.kit-menu, .sh-menu, .el-menu { display: grid; box-sizing: border-box; padding: var(--bh-space-050); border-radius: var(--bh-radius-100); background: var(--bh-color-surface-overlay); box-shadow: var(--bh-elevation-shadow-overlay); }
+.kit-menu-item, .sh-menu > span:not(.sh-pin), .sh-menu > .sh-pin > span:first-child, .el-menu > span:not(.sh-pin):not(.zi-n), .el-menu > .sh-pin > span:first-child { display: flex; align-items: center; justify-content: space-between; gap: var(--bh-space-100); min-height: var(--bh-size-control-default); padding: 0 var(--bh-space-150); border-radius: var(--bh-radius-050); color: var(--bh-color-text); font: var(--bh-font-label-default); }
+:is(.kit-menu, .sh-menu, .el-menu) .is-on { background: var(--bh-color-surface-overlay-hover); }
+:is(.kit-menu, .sh-menu, .el-menu) .is-sel { background: var(--bh-color-surface-overlay-selected); }
+:is(.kit-menu, .sh-menu, .el-menu) .is-sel svg { flex: none; color: var(--bh-color-icon); }
+:is(.kit-menu, .sh-menu, .el-menu) .is-focus { outline: var(--bh-border-width-focused) solid var(--bh-color-border-focus); outline-offset: calc(-1 * var(--bh-state-focus-offset)); }
+
+/* Label: shows a status. 20 px pill, outline, padding space.075, label.small. */
+.kit-label, .bh-label, .ui-badge, .sh-tag.is-pill { display: inline-flex; align-items: center; box-sizing: border-box; height: var(--bh-space-250); padding: 0 var(--bh-space-075); border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-full); color: var(--bh-color-text); background: transparent; white-space: nowrap; font: var(--bh-font-label-small); }
+:is(.kit-label, .bh-label).is-large { height: var(--bh-size-control-small); padding: 0 var(--bh-space-100); }
+:is(.kit-label, .bh-label).is-brand { border-color: var(--bh-color-border-brand); }
+:is(.kit-label, .bh-label).is-info { border-color: var(--bh-color-border-info); color: var(--bh-color-text-info); }
+:is(.kit-label, .bh-label).is-success, .ui-badge, .sh-tag.is-pill { border-color: var(--bh-color-border-success); color: var(--bh-color-text-success); }
+:is(.kit-label, .bh-label).is-warning { border-color: var(--bh-color-border-warning); color: var(--bh-color-text-warning); }
+:is(.kit-label, .bh-label).is-danger, .ui-badge.is-error { border-color: var(--bh-color-border-danger); color: var(--bh-color-text-danger); }
+:is(.kit-label, .bh-label).is-neutral { border-color: var(--bh-color-border-bold); color: var(--bh-color-text-subtle); }
+
+/* Tag: something people add or remove. 24 px, radius.050, border, text. */
+.kit-tag, .sh-tag:not(.is-pill) { display: inline-flex; align-items: center; gap: var(--bh-space-050); box-sizing: border-box; height: var(--bh-size-control-small); padding: 0 var(--bh-space-100); border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-050); color: var(--bh-color-text); background: var(--bh-color-surface); font: var(--bh-font-label-small); }
+
+/* Table: header surface.subtle, label.small, text.subtle. Cells space.100 space.150, body.default. */
+.kit-table th, .kit-th { padding: var(--bh-space-100) var(--bh-space-150); border-bottom: var(--bh-border-width-default) solid var(--bh-color-border); color: var(--bh-color-text-subtle); background: var(--bh-color-surface-subtle); text-align: left; font: var(--bh-font-label-small); }
+.kit-table td, .kit-td { padding: var(--bh-space-100) var(--bh-space-150); border-bottom: var(--bh-border-width-default) solid var(--bh-color-border); color: var(--bh-color-text); font: var(--bh-font-body-default); }
+
+/* Dialog: surface.overlay, radius.200, padding space.300, shadow modal, title heading.medium. */
+.kit-dialog, .el-dialog, .zi-mini-dialog, .c-surf-dialog { display: grid; gap: var(--bh-space-200); box-sizing: border-box; padding: var(--bh-space-300); border-radius: var(--bh-radius-200); color: var(--bh-color-text-subtle); background: var(--bh-color-surface-overlay); box-shadow: var(--bh-elevation-shadow-modal); font: var(--bh-font-body-default); }
+.kit-dialog-title, .el-dialog b, .zi-mini-dialog b, .c-surf-dialog b { color: var(--bh-color-text); font: var(--bh-font-heading-medium); }
+
+/* Tooltip: surface.inverse, radius.100, padding space.050 space.075, body.small. */
+.kit-tooltip, .sh-tip, .ic-tip, .zi-tip { box-sizing: border-box; padding: var(--bh-space-050) var(--bh-space-075); border-radius: var(--bh-radius-100); color: var(--bh-color-text-inverse); background: var(--bh-color-surface-inverse); font: var(--bh-font-body-small); }
+
+/* Toast: surface.overlay and overlay shadow, no border (like menus); icon in the status colour.
+   Title heading.xsmall, message body.default. */
+.kit-toast, .el-toast, .ib-toast { display: inline-flex; align-items: center; gap: var(--bh-space-100); box-sizing: border-box; padding: var(--bh-space-150) var(--bh-space-200); border-radius: var(--bh-radius-100); color: var(--bh-color-text); background: var(--bh-color-surface-overlay); box-shadow: var(--bh-elevation-shadow-overlay); font: var(--bh-font-body-default); }
+:is(.kit-toast, .el-toast) > svg { flex: none; }
+:is(.kit-toast, .el-toast).is-info > svg { color: var(--bh-color-icon-info); }
+:is(.kit-toast, .el-toast).is-success > svg { color: var(--bh-color-icon-success); }
+:is(.kit-toast, .el-toast).is-warning > svg { color: var(--bh-color-icon-warning); }
+:is(.kit-toast, .el-toast).is-danger > svg { color: var(--bh-color-icon-danger); }
+.kit-toast b { color: var(--bh-color-text); font: var(--bh-font-heading-xsmall); }
+
+/* Banner: background.{role}.subtle, border.{role}.subtle, text, icon.{role}. */
+.kit-banner, .c-banner { display: flex; align-items: center; gap: var(--bh-space-100); box-sizing: border-box; padding: var(--bh-space-100) var(--bh-space-150); border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-100); color: var(--bh-color-text); font: var(--bh-font-body-default); }
+:is(.kit-banner, .c-banner) svg { flex: none; }
+:is(.kit-banner, .c-banner).is-info { border-color: var(--bh-color-border-info-subtle); background: var(--bh-color-background-info-subtle); }
+:is(.kit-banner, .c-banner).is-info svg { color: var(--bh-color-icon-info); }
+:is(.kit-banner, .c-banner).is-success { border-color: var(--bh-color-border-success-subtle); background: var(--bh-color-background-success-subtle); }
+:is(.kit-banner, .c-banner).is-success svg { color: var(--bh-color-icon-success); }
+:is(.kit-banner, .c-banner).is-warning { border-color: var(--bh-color-border-warning-subtle); background: var(--bh-color-background-warning-subtle); }
+:is(.kit-banner, .c-banner).is-warning svg { color: var(--bh-color-icon-warning); }
+:is(.kit-banner, .c-banner).is-danger { border-color: var(--bh-color-border-danger-subtle); background: var(--bh-color-background-danger-subtle); }
+:is(.kit-banner, .c-banner).is-danger svg { color: var(--bh-color-icon-danger); }
+
+/* Callout: content note with a 4 px bar on the left edge. Not for statuses; those are banners. */
+.kit-callout, .sh-alert { --kit-bar: var(--bh-color-border-info); position: relative; display: grid; gap: var(--bh-space-025); box-sizing: border-box; padding: var(--bh-space-150) var(--bh-space-200) var(--bh-space-150) calc(var(--bh-space-200) + var(--bh-border-width-accent)); overflow: hidden; border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-100); background: var(--bh-color-surface); }
+:is(.kit-callout, .sh-alert)::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--bh-border-width-accent); background: var(--kit-bar); }
+:is(.kit-callout, .sh-alert).is-brand { --kit-bar: var(--bh-color-border-brand); }
+:is(.kit-callout, .sh-alert) b { color: var(--bh-color-text); font: var(--bh-font-heading-xsmall); }
+:is(.kit-callout, .sh-alert) span { color: var(--bh-color-text-subtle); font: var(--bh-font-body-default); }
+
+/* Switch: 20 x 36, knob 16 px. On background.neutral.bold; off background.neutral with a border.bold edge. */
+.kit-switch, .sh-switch, .op-switch { position: relative; flex: none; display: inline-block; box-sizing: border-box; width: calc(2 * var(--bh-space-200) + 2 * var(--bh-space-025)); height: var(--bh-space-250); border-radius: var(--bh-radius-full); background: var(--bh-color-background-neutral-bold); }
+:is(.kit-switch, .sh-switch, .op-switch)::after { content: ""; position: absolute; top: var(--bh-space-025); right: var(--bh-space-025); width: var(--bh-space-200); height: var(--bh-space-200); border-radius: var(--bh-radius-full); background: var(--bh-color-surface); }
+.kit-switch.is-off { background: var(--bh-color-background-neutral); box-shadow: inset 0 0 0 var(--bh-border-width-default) var(--bh-color-border-bold); }
+.kit-switch.is-off::after { right: auto; left: var(--bh-space-025); }
+
+/* Avatar: 32 px circle, background.neutral, text, label.small. Small 24 px. */
+.kit-avatar, .sh-avatar, .op-avatar { display: inline-grid; flex: none; place-items: center; width: var(--bh-size-control-default); height: var(--bh-size-control-default); border-radius: var(--bh-radius-full); color: var(--bh-color-text); background: var(--bh-color-background-neutral); font: var(--bh-font-label-small); }
+.kit-avatar.is-small { width: var(--bh-size-control-small); height: var(--bh-size-control-small); }
+
+/* Step number or count: background.neutral.bold, text.inverse. */
+.kit-count, .zi-n { display: inline-grid; flex: none; place-items: center; box-sizing: border-box; min-width: var(--bh-space-250); height: var(--bh-space-250); padding: 0 var(--bh-space-050); border-radius: var(--bh-radius-full); color: var(--bh-color-text-inverse); background: var(--bh-color-background-neutral-bold); font: var(--bh-font-label-small); font-variant-numeric: tabular-nums; }
+
+/* Selected item in a navigation list: background.selected and a border.selected bar inside the left edge. */
+.kit-nav-item { display: flex; align-items: center; gap: var(--bh-space-100); height: var(--bh-size-control-default); padding: 0 var(--bh-space-150); border-radius: var(--bh-radius-050); color: var(--bh-color-text); font: var(--bh-font-label-default); }
+.kit-nav-item.is-selected, .ic-nav-item.is-selected { background: var(--bh-color-background-selected); box-shadow: inset var(--bh-border-width-selected) 0 0 var(--bh-color-border-selected); }
+/* A count on an inverse surface flips to the surface colours. */
+.kit-tooltip .kit-count, .zi-tip .zi-n { color: var(--bh-color-text); background: var(--bh-color-surface); }

package/dist/docs/src/styles/layout.css

@@ -51,13 +51,9 @@
 .sp-title { color: var(--bh-color-text); font: var(--bh-font-heading-small); }
 .sp-desc { color: var(--bh-color-text-subtle); font: var(--bh-font-body-default); }
 .sp-label { color: var(--bh-color-text); font: var(--bh-font-label-default); }
-.sp-input { display: flex; align-items: stretch; min-width: 0; height: var(--bh-space-400); border: var(--bh-border-width-default) solid var(--bh-color-border-bold); border-radius: var(--bh-radius-100); background: var(--bh-color-surface); }
+.sp-input { display: flex; align-items: stretch; min-width: 0; }
 .sp-input > span:not(.sp-gap) { align-self: center; overflow: hidden; color: var(--bh-color-text-subtle); white-space: nowrap; text-overflow: ellipsis; font: var(--bh-font-body-default); }
 .sp-input .sp-gap.is-h { margin: calc(-1 * var(--bh-border-width-default)) 0; }
-.sp-btn { display: inline-flex; flex: none; align-items: center; height: var(--bh-size-control-default); padding: 0 var(--bh-space-200); border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-100); color: var(--bh-color-text); background: var(--bh-color-surface); font: var(--bh-font-label-default); }
-.sp-btn.is-primary { border-color: var(--bh-color-background-neutral-bold); color: var(--bh-color-text-inverse); background: var(--bh-color-background-neutral-bold); }
-.sp-btn.is-small { height: var(--bh-size-control-small); padding: 0 var(--bh-space-100); font: var(--bh-font-label-small); }
-.sp-btn.is-large { height: var(--bh-size-control-large); padding: 0 var(--bh-space-200); }
 .sp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bh-space-100); }
 .sp-swatch { display: inline-block; width: var(--bh-space-200); height: var(--bh-space-200); border-radius: var(--bh-radius-050); background: var(--sp-mark); box-shadow: inset 0 0 0 var(--bh-border-width-default) var(--sp-mark-edge); vertical-align: middle; }
 @container prose (min-width: 560px) { .sp-stage { padding: var(--bh-space-400) var(--bh-space-200); } .sp-gap.is-v > .sp-tag { right: 0; transform: translate(calc(100% + var(--bh-space-300) + var(--bh-space-050)), -50%); } }
@@ -81,7 +77,6 @@
 .sp-dd-stage { display: grid; place-items: center; min-height: 9rem; padding: var(--bh-space-200); background: var(--c-surf); }
 .sp-dd-panel p { margin: 0; padding: var(--bh-space-150) var(--bh-space-200); color: var(--c-muted); font: var(--bh-font-body-default); }
 .sp-mini { display: flex; flex-direction: column; width: 100%; max-width: 15rem; }
-.sp-mini .sp-input { height: var(--bh-space-400); }
 .sp-mini-group { color: var(--bh-color-text); font: var(--bh-font-heading-xsmall); }
 .sp-badge-host { position: relative; display: inline-grid; place-items: center; width: var(--bh-space-400); height: var(--bh-space-400); border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-100); background: var(--bh-color-surface); color: var(--bh-color-icon); }
 .sp-badge { position: absolute; top: var(--bh-space-025); right: var(--bh-space-025); width: var(--bh-space-100); height: var(--bh-space-100); border-radius: var(--bh-radius-full); background: var(--bh-color-background-danger-bold); }

package/dist/docs/src/styles/opacity.css

@@ -0,0 +1,43 @@
+/* Illustrations for the Opacity page. Every value is a token. */
+.op-wrap { display: grid; gap: var(--bh-space-200); margin: var(--bh-space-300) 0; padding: var(--bh-space-300); border-radius: var(--bh-radius-150); background: var(--bh-color-surface-subtle); }
+.op-label { color: var(--bh-color-text-subtle); font: var(--bh-font-label-small); }
+.op-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--bh-space-200); }
+.op-tile { display: grid; gap: var(--bh-space-100); }
+.op-tile-top { display: flex; align-items: center; justify-content: space-between; }
+.op-tile.is-off b, .op-tile.is-off span.op-status, .op-row.is-off .op-name, .op-row.is-off .op-role { color: var(--bh-color-text-disabled); }
+.op-logo { display: inline-grid; place-items: center; width: var(--bh-size-control-large); height: var(--bh-size-control-large); border-radius: var(--bh-radius-100); color: var(--bh-color-text-on-bold); font: var(--bh-font-label-default); }
+.op-logo.is-a { background: var(--bh-color-background-success-bold); }
+.op-logo.is-b { background: var(--bh-color-background-info-bold); }
+.op-logo.is-c { background: var(--bh-color-background-warning-bold); }
+.op-logo.is-d { background: var(--bh-color-background-danger-bold); }
+.op-logo.is-e { background: var(--bh-color-background-neutral-bold); }
+.op-logo.is-f { background: var(--bh-color-background-brand-bold); color: var(--bh-color-text-on-brand); }
+.is-off .op-logo, .is-off .op-avatar { opacity: var(--bh-opacity-disabled); }
+.is-off .op-switch { background: var(--bh-color-background-disabled); }
+.op-list { overflow: hidden; border: var(--bh-border-width-default) solid var(--bh-color-border); border-radius: var(--bh-radius-150); background: var(--bh-color-surface); }
+.op-row { display: flex; align-items: center; gap: var(--bh-space-150); padding: var(--bh-space-100) var(--bh-space-200); }
+.op-row + .op-row { border-top: var(--bh-border-width-default) solid var(--bh-color-border); }
+.op-name { flex: 1; color: var(--bh-color-text); font: var(--bh-font-body-default); }
+.op-role { color: var(--bh-color-text-subtle); font: var(--bh-font-body-default); }
+.op-tile.is-wrong { opacity: var(--bh-opacity-disabled); }
+.op-scrim-box { position: relative; height: 10rem; overflow: hidden; border-radius: var(--bh-radius-150); background: var(--bh-color-surface-page); }
+.op-lines { display: grid; gap: var(--bh-space-100); padding: var(--bh-space-200); }
+.op-lines span { height: var(--bh-space-100); border-radius: var(--bh-radius-full); background: var(--bh-color-skeleton); }
+.op-scrim { position: absolute; inset: 0; background: var(--bh-color-surface-scrim); }
+.op-dialog { position: absolute; top: 50%; left: 50%; padding: var(--bh-space-200) var(--bh-space-300); border-radius: var(--bh-radius-200); background: var(--bh-color-surface-overlay); box-shadow: var(--bh-elevation-shadow-modal); color: var(--bh-color-text); font: var(--bh-font-heading-small); transform: translate(-50%, -50%); }
+.op-ex { background: var(--bh-color-surface-page); }
+.op-tile-lg { width: min(100%, 16rem); }
+.op-tile .sh-pin { display: inline-flex; }
+.el-theme .op-scrim-box { border-radius: 0; }
+.op-scrim-pin { position: absolute; top: var(--bh-space-200); left: calc(var(--bh-space-1000) + var(--bh-space-600)); }
+.op-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bh-space-150); width: min(100%, 22rem); padding: var(--bh-space-150) var(--bh-space-200); border-radius: var(--bh-radius-100); background: var(--bh-color-background-warning-subtle); }
+.op-band-text { color: var(--bh-color-text); font: var(--bh-font-body-default); }
+.op-btn-off { border-color: var(--bh-color-border-disabled); color: var(--bh-color-text-disabled); background: var(--bh-color-background-disabled); }
+.op-btn-faded { opacity: var(--bh-opacity-disabled); }
+.sp-dd-stage .op-tile { width: min(100%, 14rem); }
+.op-tile-top { gap: var(--bh-space-150); }
+.op-tile.is-wrong .op-switch { background: var(--bh-color-background-disabled); }
+.el-theme .op-scrim-box { height: calc(2 * var(--bh-space-1000) + var(--bh-space-600)); }
+.el-theme .op-dialog { top: auto; bottom: var(--bh-space-300); transform: translateX(-50%); }
+/* Switch: a thumb on the track, right when on, left when off. */
+.is-off .op-switch::after, .op-tile.is-wrong .op-switch::after { right: auto; left: var(--bh-space-025); background: var(--bh-color-surface); }