@mistriwork/ui 0.0.0-stage → 1.0.0-rc.10

package/dist/primitives.css

@@ -0,0 +1,188 @@
+/* @mistriwork/ui's primitives, drawn: what every Button, Field, Modal, Dropdown, DateField and Icon wears wherever it is
+   used. Unlayered here, so whoever takes them names the layer (tokens.css says which). The dress a host gives them
+   beyond this — a dialog's card, a menu in a look — is the host's. */
+
+/* The Button primitive (Button.tsx). Its intent is the dress the
+   looks already give `.primary`, `.ghost` and `.danger`; these rules are only
+   what every intent shares: one height per size, the words centred on one
+   line, and a quiet intent that is a word in the link ink rather than a box. */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2h);
+  box-sizing: border-box; min-height: var(--control-h); padding: 0 var(--space-4h);
+  font-family: inherit; font-size: var(--text-base); font-weight: 500; line-height: 1.2;
+  white-space: nowrap; text-decoration: none;
+}
+.btn-compact { min-height: 28px; padding: 0 var(--space-3h); font-size: var(--text-sm); }
+.btn-large { min-height: 40px; padding: 0 var(--space-5); font-size: var(--text-md); }
+.btn-block { display: flex; width: 100%; }
+/* A link dressed as a button (buttonClass on an <a>, where a real address
+   matters) takes the dress a page's element rules give a <button>. */
+a.btn { border: 1px solid transparent; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); cursor: pointer; }
+a.btn.ghost { background: transparent; color: var(--ink-muted); border-color: var(--line-strong); }
+.btn.btn-quiet { background: transparent; border-color: transparent; color: var(--link, var(--accent)); padding-inline: var(--space-3); box-shadow: none; }
+.btn.btn-quiet:hover:not(:disabled, [aria-disabled="true"]) { background: var(--raised); }
+.btn:disabled { cursor: not-allowed; }
+.btn[data-busy] { cursor: progress; }
+
+/* The Field primitive (Field.tsx): a label over its control, a
+   hint and a problem under it, all in one column. The label is text, not a
+   caption: 13px in the text ink, as the sign-in card and command forms say it, at the weight the theme's label role
+   says (`type.roles.label.weight`, worn as --type-label-weight) and 500 where it says none. */
+.form-field { display: grid; gap: var(--space-2h); min-width: 0; align-content: start; }
+.form-field-label { font-size: var(--text-base); font-weight: var(--type-label-weight, 500); line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
+/* The label's words, then the optional word and a tip after them, as one run of text: a label that wraps keeps them at
+   its end, never in a column of their own beside it. Here with the Field that draws the row, not in forms.css, which
+   loads only beside a control of its own: a form of plain boxes (Post rent, a public form) said "Month(optional)". */
+.form-field-label-row { display: block; line-height: 1.35; }
+.form-field-label-row > .form-field-label { display: inline; }
+/* A word's space is a space, so a word that wraps to a line of its own starts it flush; a tip keeps its gap. */
+.form-field-label-row > :not(.form-field-label-hidden) ~ .form-field-optional-word::before { content: " "; }
+.form-field-label-row > :not(.form-field-label-hidden) ~ .help-tip { margin-inline-start: var(--space-2h); }
+.form-field-label-row > .help-tip { vertical-align: -0.2em; }
+.form-field.is-required > .form-field-label::after { content: "*" / ""; margin-left: var(--space-1h); color: var(--status-critical); }
+.form-field-hint { margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--ink-muted); }
+.form-field-problem { margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--status-critical); overflow-wrap: anywhere; }
+.form-field-compact { gap: var(--space-2); }
+/* A checkbox field: the box, then its label beside it, the label a click
+   target too; the hint and the problem sit under the label, not the box. */
+.form-field-check-row { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; }
+.form-field-check-row > input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--accent); }
+.form-field-check-row > .form-field-label { cursor: pointer; }
+.form-field-check > .form-field-hint, .form-field-check > .form-field-problem { padding-left: var(--space-6); }
+.form-field-compact .form-field-label { font-size: var(--text-sm); }
+/* The field's control: one ground, one 3:1 edge, one height, the house ring
+   flush outside its edge, which takes the ring's ink — an inset ring on an
+   edge of the same ink was no ring at all (Mono's black on black), and a ring
+   a pixel off the edge drew a second box round the first. */
+.field-control {
+  box-sizing: border-box; width: 100%; min-width: 0; min-height: var(--control-h); padding: var(--space-2h) var(--space-3h);
+  font: inherit; font-size: var(--text-base); line-height: 20px;
+  background: var(--field-fill); color: var(--ink);
+  border: var(--control-border-w) solid var(--line-control); border-radius: var(--field-radius, var(--radius));
+  transition: border-color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out);
+}
+.field-control:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 0; border-color: var(--focus); }
+textarea.field-control { min-height: 72px; resize: vertical; }
+.field-control:is(:disabled, [aria-disabled="true"]) { background: var(--raised); color: var(--ink-muted); border-color: var(--line); cursor: not-allowed; }
+.field-control[aria-invalid="true"] { border-color: var(--status-critical); }
+.field-control[readonly] { background: var(--raised); color: var(--ink-muted); }
+.form-field-compact .field-control { min-height: 28px; padding: var(--space-1h) var(--space-3); font-size: var(--text-sm); }
+
+/* What the native <dialog> gave a modal for free, said in classes: the
+   box in the middle of the viewport, sized to its content, above all
+   else; the scrim behind it. The dialogs are Base UI's now (Modal.tsx),
+   and a div has to be told. */
+.modal {
+  position: fixed; inset: 0; margin: auto;
+  width: fit-content; height: fit-content;
+  max-width: calc(100% - 6px - 2em); max-height: calc(100% - 6px - 2em);
+  overflow: auto; z-index: 400;
+  border: solid; padding: 1em;
+  background: Canvas; color: CanvasText;
+}
+.modal:focus, .modal:focus-visible { outline: none; }
+.modal-backdrop { position: fixed; inset: 0; z-index: 400; background: rgb(0 0 0 / 0.1); }
+
+/* The themed listbox (Dropdown.tsx). */
+.dd { position: relative; }
+
+.dd-button {
+  width: 100%;
+  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2h);
+  padding: var(--space-2) var(--space-3);
+  font: var(--text-sm) var(--mono); color: var(--ink);
+  background: var(--ground);
+  border: 1px solid var(--line-control); border-radius: var(--radius);
+  cursor: pointer;
+}
+/* Toward the ink, never back to a hairline: at rest the edge is already the
+   control's 3:1, so the strong border it used to take on hover would fade it. */
+.dd-button:hover { border-color: color-mix(in srgb, var(--line-control) 60%, var(--ink)); }
+.dd-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dd-caret { color: var(--ink-subtle); font-size: var(--text-xs); flex: none; }
+
+.dd-list {
+  /* Placed beside its trigger by the positioner (Base UI), and no narrower
+     than the trigger it opened from. */
+  position: relative; z-index: 40;
+  min-width: var(--anchor-width, 100%); max-width: 22rem; max-height: 18rem; overflow-y: auto;
+  background: var(--surface);
+  border: 1px solid var(--line-strong); border-radius: var(--radius-pop);
+  /* The one place a shadow earns its keep: a popover has to read as floating
+     above the page rather than punched into it. */
+  box-shadow: var(--shadow-pop);
+  padding: var(--space-2);
+}
+.dd-list[hidden] { display: none; }
+
+@media (prefers-reduced-motion: no-preference) {
+  .dd-list {
+    /* From the trigger, not the centre, so the menu reads as coming out of
+       the thing that opened it. Never scale(0) — nothing in the real world
+       appears from nothing. */
+    transform-origin: top left;
+    transition: opacity var(--t-popover) var(--ease-out), transform var(--t-popover) var(--ease-out);
+    @starting-style { opacity: 0; transform: scale(0.96) translateY(-4px); }
+  }
+}
+
+.dd-option {
+  display: flex; align-items: flex-start; gap: var(--space-2h);
+  padding: var(--space-2) var(--space-3); border-radius: var(--radius-item);
+  cursor: pointer;
+}
+.dd-option.active { background: var(--raised); }
+.dd-option.selected .dd-label { color: var(--accent-ink); font-weight: 600; }
+.dd-option.disabled { opacity: 0.5; cursor: default; }
+.dd-check { width: 0.9em; flex: none; color: var(--accent-ink); font-size: var(--text-xs); line-height: 1.5; }
+.dd-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
+.dd-label { font: var(--text-sm) var(--mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dd-detail { font: var(--text-xs) var(--mono); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dd-badge {
+  flex: none; align-self: center;
+  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em;
+  color: var(--ink-muted); background: var(--raised);
+  border-radius: min(3px, var(--radius)); padding: 1px var(--space-2);
+}
+/* A tone on an option is its word's ink alone, as design.md says of a toned figure: no tint, no dot. */
+.dd-option.dd-tone-good .dd-label { color: var(--status-good); }
+.dd-option.dd-tone-warn .dd-label { color: var(--status-warning); }
+.dd-option.dd-tone-bad .dd-label { color: var(--status-critical); }
+.dd-option.dd-tone-info .dd-label { color: var(--status-info); }
+.dd-option.dd-tone-neutral .dd-label { color: var(--ink-muted); }
+.dd-divider { height: 1px; background: var(--line); margin: var(--space-2) var(--space-1); }
+.dd-action .dd-label { color: var(--ink-muted); font-family: var(--sans); font-size: var(--text-sm); }
+.dd-action:hover .dd-label { color: var(--accent-ink); }
+
+/* The calendar field (DateField.tsx). */
+/* A value is never clipped: the input's floor is the longest value (ten characters, sixteen with a time, in the
+   input's own font, so `ch` is its digit) plus its padding (8px, and 36px where the calendar button sits, said
+   once here), its border and a pixel of slack. The field is as narrow as that floor and no narrower, even in a
+   column that is; a cell sets its own min-width. */
+.date-field { --date-chars: 10; display: flex; position: relative; min-width: min-content; width: 100%; }
+.date-field.with-time { --date-chars: 16; }
+.date-field .date-field-input { min-width: calc(var(--date-chars) * 1ch + 8px + 36px + 3px); width: 100%; padding: var(--space-2) 36px var(--space-2) var(--space-3); border: 1px solid var(--line-control); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; }
+.date-field-hint { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+.date-field .date-field-trigger { position: absolute; inset: 2px 2px 2px auto; width: 30px; min-height: 24px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink-muted); box-shadow: none; }
+.date-field-popup { width: 294px; max-width: var(--available-width); padding: var(--space-3h); background: var(--surface); color: var(--ink); border: 1px solid var(--line-control); border-radius: var(--radius-pop); box-shadow: var(--shadow-pop); font: var(--text-base) var(--sans); }
+.date-field-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
+.date-field-head span { font-weight: 600; }
+.date-field-popup button { font: inherit; color: var(--ink); background: transparent; border: 0; border-radius: var(--radius); min-height: 32px; min-width: 32px; padding: var(--space-2); box-shadow: none; }
+.date-field-popup button:enabled:hover { background: var(--raised); }
+.date-field-popup button:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: -2px; }
+.date-field-popup button:disabled { color: var(--ink-subtle); cursor: default; }
+.date-field-popup .date-field-calendar { table-layout: fixed; width: 100%; border: 0; border-collapse: separate; border-spacing: 0; font: inherit; }
+.date-field-calendar th { color: var(--ink-muted); font-size: var(--text-xs); font-weight: 400; }
+.date-field-calendar button { width: 100%; }
+.date-field-calendar button[data-outside] { color: var(--ink-muted); }
+.date-field-calendar button[aria-current="date"] { text-decoration: underline; text-underline-offset: 4px; }
+.date-field-calendar button[data-selected] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
+.date-field-foot { display: flex; justify-content: space-between; border-top: 1px solid var(--line); margin-top: var(--space-3); padding-top: var(--space-2h); }
+@media (pointer: coarse) { .date-field-popup button { min-height: 36px; } }
+
+/* An icon (Icon.tsx). */
+.tw-icon { display: inline-block; flex: none; vertical-align: middle; }
+
+/* The newer standalone primitives' rules live in standalone.css, not
+   here: the kit imports this sheet into every first paint, and none of
+   them is drawn by the kit. */

package/dist/standalone.css

@@ -0,0 +1,413 @@
+/* The newer standalone primitives' rules (Switch, Tabs, Drawer, Popover,
+   Avatar, Pagination), kept apart from primitives.css on purpose: the
+   kit's stylesheet imports primitives.css into every first paint, and
+   none of these is drawn by the kit, so their rules would be dead
+   weight against the bundle budget there. A page drawn with the
+   primitives alone gets them through style.css, which imports this
+   sheet; the kit does not. */
+
+/* The Switch primitive (Switch.tsx): a 48x28 track, a 24px thumb, the
+   accent when on, the line ink when off; the thumb moves, the track
+   never changes size, so the row beside it never shifts. */
+.ui-switch-row {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  min-width: 0;
+}
+.ui-switch {
+  flex: none;
+  width: 48px;
+  height: 28px;
+  padding: var(--space-1);
+  border: 1px solid var(--line-control);
+  border-radius: 999px;
+  background: var(--raised);
+  cursor: pointer;
+  box-sizing: border-box;
+}
+.ui-switch[data-checked] {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+.ui-switch:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.ui-switch:focus-visible {
+  outline: var(--focus-width) solid var(--focus);
+  outline-offset: 2px;
+}
+.ui-switch-thumb {
+  display: block;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--surface);
+  /* No shadow: a literal here would need a reviewed baseline entry, and
+     the shadow tokens are all sized for popups, not a 22px thumb. */
+  transition: transform 150ms ease;
+}
+.ui-switch[data-checked] .ui-switch-thumb {
+  transform: translateX(20px);
+}
+.ui-switch-copy {
+  display: grid;
+  gap: var(--space-1);
+  min-width: 0;
+}
+.ui-switch-label {
+  font: var(--text-base) var(--sans);
+  color: var(--ink);
+  cursor: pointer;
+}
+.ui-switch-description {
+  font-size: var(--text-sm);
+  line-height: 1.45;
+  color: var(--ink-muted);
+}
+
+/* The Tabs primitive (Tabs.tsx): a row of tabs on a rule, the chosen
+   one in the accent ink with the accent's underline, the panel below. */
+.ui-tabs-list {
+  display: flex;
+  gap: var(--space-1);
+  border-bottom: 1px solid var(--line);
+  overflow-x: auto;
+}
+.ui-tab {
+  flex: none;
+  padding: var(--space-2h) var(--space-3h);
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--ink-muted);
+  font: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+}
+@media (hover: hover) {
+  .ui-tab:hover {
+    color: var(--ink);
+  }
+}
+.ui-tab[data-selected] {
+  color: var(--accent-ink);
+  border-bottom-color: var(--accent);
+  font-weight: 600;
+}
+.ui-tab:disabled {
+  color: var(--ink-subtle);
+  cursor: not-allowed;
+}
+.ui-tab:focus-visible {
+  outline: var(--focus-width) solid var(--focus);
+  outline-offset: -2px;
+}
+.ui-tab-panel {
+  padding-top: var(--space-4);
+}
+
+/* The Drawer primitive (Drawer.tsx): a sheet from an edge, at most
+   420px, full width on a phone, on the modal's scrim. */
+.ui-drawer-backdrop {
+  background: var(--scrim);
+}
+.ui-drawer-viewport {
+  position: fixed;
+  inset: 0;
+  display: flex;
+}
+.ui-drawer-right {
+  justify-content: flex-end;
+}
+.ui-drawer-left {
+  justify-content: flex-start;
+}
+.ui-drawer {
+  width: min(420px, 100vw);
+  max-height: 100dvh;
+  overflow-y: auto;
+  padding: var(--space-5);
+  background: var(--surface);
+  color: var(--ink);
+  box-shadow: var(--shadow-pop);
+}
+.ui-drawer-title {
+  margin: 0 0 var(--space-4);
+  font-size: var(--text-md);
+  font-weight: 600;
+}
+
+/* The Popover primitive (Popover.tsx): a layer on the surface, with
+   the popup's edge and shadow, never wider than the viewport. */
+.ui-popover {
+  max-width: min(28rem, calc(100vw - 16px));
+  padding: var(--space-3h);
+  background: var(--surface);
+  color: var(--ink);
+  border: 1px solid var(--line-control);
+  border-radius: var(--radius-pop);
+  box-shadow: var(--shadow-pop);
+}
+.ui-popover:focus-visible {
+  outline: var(--focus-width) solid var(--focus);
+  outline-offset: -2px;
+}
+
+/* The Avatar primitive (Avatar.tsx): a disc in the accent's tint, the
+   initials in the accent ink, the picture covering it whole. */
+.ui-avatar {
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  border-radius: 50%;
+  overflow: hidden;
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+  font-weight: 600;
+}
+.ui-avatar-sm {
+  width: 28px;
+  height: 28px;
+  font-size: var(--text-xs);
+}
+.ui-avatar-md {
+  width: 36px;
+  height: 36px;
+  font-size: var(--text-sm);
+}
+.ui-avatar-lg {
+  width: 48px;
+  height: 48px;
+  font-size: var(--text-base);
+}
+.ui-avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.ui-avatar-fallback {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+/* The Pagination primitive (Pagination.tsx): page buttons on one
+   row, the current page in the accent's tint, steps disabled at the ends. */
+.ui-pagination {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1h);
+  flex-wrap: wrap;
+}
+.ui-page {
+  min-width: 36px;
+  min-height: 36px;
+  padding: 0 var(--space-2h);
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--ink);
+  font: inherit;
+  cursor: pointer;
+}
+@media (hover: hover) {
+  .ui-page:hover:not(:disabled) {
+    background: var(--raised);
+  }
+}
+.ui-page[aria-current='page'] {
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+  font-weight: 600;
+}
+.ui-page:disabled {
+  color: var(--ink-subtle);
+  cursor: not-allowed;
+}
+.ui-page:focus-visible {
+  outline: var(--focus-width) solid var(--focus);
+  outline-offset: 1px;
+}
+.ui-page-gap {
+  padding: 0 var(--space-1);
+  color: var(--ink-subtle);
+}
+
+/* The Carousel primitive (Carousel.tsx): one slide in a viewport, the
+   rest off to the side on a track that slides — only under
+   `no-preference`, so a reader who asked for stillness gets a cut. */
+.ui-carousel {
+  display: grid;
+  gap: var(--space-3);
+  min-width: 0;
+}
+.ui-carousel-viewport {
+  overflow: hidden;
+  min-width: 0;
+}
+.ui-carousel-track {
+  display: flex;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ui-carousel-track {
+    transition: transform var(--t-panel) var(--ease-out);
+  }
+}
+.ui-carousel-slide {
+  flex: 0 0 100%;
+  min-width: 0;
+}
+.ui-carousel-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+.ui-carousel-step {
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--line-control);
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--ink);
+  font: inherit;
+  cursor: pointer;
+}
+@media (hover: hover) {
+  .ui-carousel-step:hover:not(:disabled) {
+    background: var(--raised);
+  }
+}
+.ui-carousel-step:disabled {
+  color: var(--ink-subtle);
+  cursor: not-allowed;
+}
+.ui-carousel-step:focus-visible,
+.ui-carousel-dot:focus-visible {
+  outline: var(--focus-width) solid var(--focus);
+  outline-offset: 2px;
+}
+.ui-carousel-dots {
+  display: flex;
+  gap: var(--space-2);
+}
+.ui-carousel-dot {
+  width: var(--space-4);
+  height: var(--space-4);
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--line-control);
+  cursor: pointer;
+}
+.ui-carousel-dot[aria-current] {
+  background: var(--accent);
+}
+.ui-carousel-status {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--ink-muted);
+}
+
+/* The Resizable primitive (Resizable.tsx): panes on a flex row (or
+   column), a handle between each pair that the reader drags or walks. */
+.ui-resizable-horizontal {
+  display: flex;
+  flex-direction: row;
+  min-width: 0;
+}
+.ui-resizable-vertical {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.ui-resizable-panel {
+  flex: 0 0 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+.ui-resizable-handle {
+  flex: none;
+  background: var(--raised);
+  border: 1px solid var(--line);
+  /* A touch drag resizes, never scrolls the page: without this the
+     browser takes the gesture for scrolling before the pointer handler
+     sees it. */
+  touch-action: none;
+}
+.ui-resizable-horizontal .ui-resizable-handle {
+  width: var(--space-4);
+  cursor: col-resize;
+}
+.ui-resizable-vertical .ui-resizable-handle {
+  height: var(--space-4);
+  cursor: row-resize;
+}
+@media (hover: hover) {
+  .ui-resizable-handle:hover {
+    background: var(--line-control);
+  }
+}
+.ui-resizable-handle:focus-visible {
+  outline: var(--focus-width) solid var(--focus);
+  outline-offset: 2px;
+}
+
+/* The ScrollArea primitive (ScrollArea.tsx): Base UI draws no chrome of
+   its own, so the viewport hides the native bar and the thumb below is
+   the bar the reader drags. */
+.ui-scroll-area {
+  position: relative;
+  min-width: 0;
+}
+.ui-scroll-area-viewport {
+  overflow: auto;
+  scrollbar-width: none;
+}
+.ui-scroll-area-viewport::-webkit-scrollbar {
+  display: none;
+}
+.ui-scroll-area-viewport:focus-visible {
+  outline: var(--focus-width) solid var(--focus);
+  outline-offset: 2px;
+}
+.ui-scroll-area-scrollbar {
+  position: absolute;
+  display: flex;
+  background: transparent;
+}
+.ui-scroll-area-scrollbar-vertical {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--space-3);
+}
+.ui-scroll-area-scrollbar-horizontal {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: var(--space-3);
+}
+.ui-scroll-area-thumb {
+  flex: 1;
+  background: var(--line-control);
+  border-radius: var(--radius);
+}
+.ui-scroll-area-corner {
+  background: var(--surface);
+}
+
+/* The Tooltip primitive (Tooltip.tsx): a short note on the ink, never a
+   second control — the trigger keeps its own look, so it has no rule. */
+.ui-tooltip {
+  max-width: min(28rem, calc(100vw - 16px));
+  padding: var(--space-2) var(--space-3);
+  background: var(--ink);
+  color: var(--surface);
+  border-radius: var(--radius);
+  font-size: var(--text-sm);
+  line-height: 1.45;
+}

package/dist/style.css

@@ -0,0 +1,19 @@
+/* @mistriwork/ui's stylesheet, for a page drawn with the primitives alone: the tokens, the primitives' rules, and the
+   dress a page's own element rules would give a Button. All of it stands in the `mistri-ui` layer, so any rule of the
+   page's own — in a later layer or in none — wins over it. The kit's stylesheet takes tokens.css and primitives.css
+   into its own base layer instead (packages/kit/src/client/style.css says why) and dresses the button itself; the form
+   controls' rules (forms.css) and the hero blocks' (hero.css) wait there for the first control a page draws. */
+@layer mistri-ui;
+@import './tokens.css' layer(mistri-ui);
+@import './primitives.css' layer(mistri-ui);
+@import './standalone.css' layer(mistri-ui);
+@import './forms.css' layer(mistri-ui);
+@import './hero.css' layer(mistri-ui);
+@import './preferences.css' layer(mistri-ui);
+
+@layer mistri-ui {
+.btn { border: 1px solid transparent; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); cursor: pointer; }
+.btn.btn-secondary { background: transparent; color: var(--ink-muted); border-color: var(--line-strong); }
+.btn.btn-danger { background: var(--status-critical); color: var(--surface); border-color: var(--status-critical); }
+.btn:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
+}