@misoto22/design 0.3.1 → 0.5.0

package/dist/article.css

@@ -0,0 +1,393 @@
+/* ==========================================================================
+   ARTICLE — the long-form reading surface
+   --------------------------------------------------------------------------
+   The one place in this package that styles TAGS rather than components, and
+   the reason is that its input is not JSX: it is whatever a Markdown or MDX
+   pipeline produced. There is no component to hang a class on, so the contract
+   has to be the element names themselves.
+
+   Scoped to `[data-m22-article]`, which the `Article` component writes. Nothing
+   here leaks: a page that does not opt in is untouched, and a component
+   rendered INSIDE an article keeps its own classes, because every rule below
+   is a bare element selector at specificity 0,1,1 — a utility on a component
+   wins.
+
+   It reads only tokens. Re-point the palette or move the radius factor and the
+   article moves with everything else, which is the whole reason this is here
+   rather than in each consuming site: three sites hand-rolling a prose
+   stylesheet is three prose stylesheets that drift.
+   ========================================================================== */
+
+[data-m22-article] {
+  /* A measure, not a width. A narrower column still wins, and a figure or a
+     table opts out of it explicitly below. */
+  max-width: var(--w-reading);
+  color: var(--ink-2);
+  font-family: var(--sans);
+  font-size: 1rem;
+  font-weight: 300;
+  line-height: 1.75;
+}
+
+/* ─── Headings ─────────────────────────────────────────────────────────────
+   The type ladder, unchanged. An article does not get its own scale — it is
+   the same five steps every other surface climbs, which is what makes a post
+   and a component page read as one publication. */
+
+[data-m22-article] :is(h1, h2, h3, h4, h5, h6) {
+  margin: 0;
+  color: var(--ink);
+  font-family: var(--font-heading, var(--serif));
+  font-weight: 400;
+  line-height: 1.25;
+  /* An anchored heading has to clear the masthead it scrolls under. */
+  scroll-margin-top: var(--scroll-offset);
+}
+[data-m22-article] h1 {
+  font-size: var(--fs-title);
+  letter-spacing: -0.02em;
+}
+[data-m22-article] h2 {
+  font-size: var(--fs-heading);
+}
+[data-m22-article] h3 {
+  font-size: var(--fs-sub);
+}
+[data-m22-article] h4 {
+  font-size: var(--fs-item);
+}
+[data-m22-article] :is(h5, h6) {
+  font-family: var(--mono);
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--ink-3-aa);
+}
+
+/* ─── Rhythm ───────────────────────────────────────────────────────────────
+   Every block gets air ABOVE it and none below, the first one gets none at
+   all, and a heading gets more air above than below so it belongs to what
+   follows rather than to what it interrupts.
+
+   The reset uses `:where()`, and that is the load-bearing part. A plain
+   `[data-m22-article] p { margin: 0 }` is specificity 0,1,1 and outranks
+   `[data-m22-article] > * + *` at 0,1,0 — so the reset silently won and every
+   paragraph in the article lost its spacing, which is exactly the defect this
+   replaces. `:where()` contributes nothing, so the reset and the rhythm sit at
+   the same weight and source order decides, which is what a reset is for. */
+
+[data-m22-article] :where(*) {
+  margin: 0;
+}
+[data-m22-article] > * + * {
+  margin-block-start: 1.25em;
+}
+/* `:is()` takes the specificity of its heaviest argument, so these two land at
+   0,1,1 and win over the general rule above whatever their order. */
+[data-m22-article] > :is(h1, h2, h3, h4, h5, h6) {
+  margin-block-start: 2.25em;
+}
+[data-m22-article] > :is(h1, h2, h3, h4, h5, h6) + * {
+  margin-block-start: 0.75em;
+}
+[data-m22-article] > :first-child {
+  margin-block-start: 0;
+}
+
+/* The opening paragraph carries the piece. Marked, not guessed: an author
+   writes `<p class="lead">` (or a pipeline emits it), rather than the
+   stylesheet deciding that whatever came first is a standfirst. */
+[data-m22-article] p.lead {
+  font-size: var(--fs-item);
+  line-height: 1.6;
+  color: var(--ink);
+}
+
+/* ─── Inline ─────────────────────────────────────────────────────────────── */
+
+[data-m22-article] a {
+  color: var(--ink);
+  text-decoration: underline;
+  text-decoration-color: var(--rule-2);
+  text-underline-offset: 4px;
+  transition: text-decoration-color var(--fast) var(--ease);
+}
+[data-m22-article] a:hover {
+  text-decoration-color: var(--ink);
+}
+[data-m22-article] strong {
+  color: var(--ink);
+  font-weight: 500;
+}
+[data-m22-article] em {
+  font-style: italic;
+}
+[data-m22-article] mark {
+  background: var(--accent-muted);
+  color: var(--ink);
+  padding-inline: 0.2em;
+}
+[data-m22-article] abbr[title] {
+  text-decoration: underline dotted var(--rule-2);
+  text-underline-offset: 3px;
+}
+[data-m22-article] :is(sub, sup) {
+  font-size: 0.75em;
+  line-height: 0;
+}
+
+/* ─── Lists ────────────────────────────────────────────────────────────────
+   The marker is a token, not a glyph the browser picks: a default disc is a
+   filled circle at whatever size the font decides, and this system's only
+   filled circle is a status dot. */
+
+[data-m22-article] :is(ul, ol) {
+  padding-inline-start: 1.4em;
+}
+[data-m22-article] :is(ul, ol) :is(ul, ol) {
+  margin-block-start: 0.4em;
+}
+[data-m22-article] li + li {
+  margin-block-start: 0.4em;
+}
+/* A paragraph or a fence nested inside a list item is still a block. */
+[data-m22-article] li > * + * {
+  margin-block-start: 0.6em;
+}
+[data-m22-article] li::marker {
+  color: var(--ink-3-aa);
+  font-size: 0.9em;
+}
+[data-m22-article] ul {
+  list-style: none;
+  padding-inline-start: 1.15em;
+}
+[data-m22-article] ul > li {
+  position: relative;
+}
+/* A hairline dash, which is the marker the rest of the system uses. */
+[data-m22-article] ul > li::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: -1.15em;
+  inset-block-start: 0.85em;
+  width: 0.55em;
+  height: 1px;
+  background: var(--rule-2);
+}
+/* A task list already has its own marker — the checkbox. Both spellings,
+   because a pipeline may wrap the input in a label and `:has()` is what makes
+   the rule work either way. */
+[data-m22-article] ul > li:has(input[type='checkbox'])::before {
+  content: none;
+}
+[data-m22-article] li:has(input[type='checkbox']) {
+  padding-inline-start: 0;
+}
+[data-m22-article] input[type='checkbox'] {
+  accent-color: var(--accent);
+  margin-inline-end: 0.5em;
+  /* A published checklist REPORTS state; it does not collect it. Disabled at
+     full opacity, because the dimming a browser applies to a disabled control
+     is a hint that it is unavailable, not that it is unticked. */
+  opacity: 1;
+}
+[data-m22-article] li:has(input[type='checkbox']) label {
+  display: inline;
+  cursor: default;
+}
+
+[data-m22-article] dt {
+  color: var(--ink);
+  font-weight: 500;
+}
+[data-m22-article] dd {
+  margin-block-end: 0.75em;
+  padding-inline-start: 1em;
+  border-inline-start: 1px solid var(--rule);
+}
+
+/* ─── Quotation ────────────────────────────────────────────────────────────
+   A rule and a change of face, not italics and not a giant quote mark. */
+
+[data-m22-article] blockquote {
+  padding-inline-start: 1.25em;
+  border-inline-start: 2px solid var(--rule-hard);
+  color: var(--ink);
+  font-family: var(--serif);
+  font-size: var(--fs-item);
+  line-height: 1.55;
+}
+[data-m22-article] blockquote p + p {
+  margin-block-start: 0.6em;
+}
+[data-m22-article] blockquote cite {
+  display: block;
+  margin-block-start: 0.75em;
+  color: var(--ink-3-aa);
+  font-family: var(--mono);
+  font-size: 11px;
+  font-style: normal;
+  letter-spacing: 0.08em;
+}
+
+/* ─── Code ─────────────────────────────────────────────────────────────────
+   An inline span is a chip; a block is a plate. Neither is a second surface
+   colour — both sit on the one elevated step the system has. */
+
+[data-m22-article] code {
+  background: var(--stone);
+  border-radius: var(--radius-sm);
+  padding: 0.15em 0.4em;
+  color: var(--ink);
+  font-family: var(--mono);
+  font-size: 0.85em;
+}
+[data-m22-article] pre {
+  padding: 1rem 1.125rem;
+  overflow-x: auto;
+  background: var(--paper-2);
+  border: 1px solid var(--rule);
+  border-radius: var(--radius-lg);
+  font-size: 13px;
+  line-height: 1.7;
+  scrollbar-width: thin;
+  scrollbar-color: var(--rule-2) transparent;
+}
+[data-m22-article] pre code {
+  background: none;
+  border-radius: 0;
+  padding: 0;
+  font-size: inherit;
+}
+
+/* ─── Figures, media and tables ────────────────────────────────────────────
+   These are the three things allowed out of the measure: a table with six
+   columns and an image with a subject in it are both unreadable at 46rem. */
+
+[data-m22-article] :is(figure, table, .m22-wide) {
+  width: 100%;
+  max-width: none;
+}
+[data-m22-article] > figure {
+  margin-block-start: 2em;
+}
+[data-m22-article] :is(img, video) {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius);
+}
+[data-m22-article] figcaption {
+  margin-block-start: 0.75em;
+  color: var(--ink-3-aa);
+  font-family: var(--mono);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  line-height: 1.6;
+}
+
+[data-m22-article] .m22-table-scroll {
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--rule-2) transparent;
+}
+[data-m22-article] table {
+  border-collapse: collapse;
+  font-size: 0.9375rem;
+  text-align: start;
+}
+[data-m22-article] th {
+  padding: 0.65em 1.25em 0.65em 0;
+  border-block-end: 1px solid var(--rule-hard);
+  color: var(--ink-3-aa);
+  font-family: var(--mono);
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  text-align: start;
+  white-space: nowrap;
+}
+[data-m22-article] td {
+  padding: 0.65em 1.25em 0.65em 0;
+  border-block-end: 1px solid var(--rule);
+  color: var(--ink-2);
+  vertical-align: baseline;
+}
+[data-m22-article] :is(th, td):last-child {
+  padding-inline-end: 0;
+}
+
+[data-m22-article] > hr {
+  margin-block-start: 2.5em;
+}
+[data-m22-article] hr {
+  border: 0;
+  border-block-start: 1px solid var(--rule);
+}
+
+[data-m22-article] kbd {
+  border: 1px solid var(--rule-2);
+  border-radius: var(--radius-sm);
+  padding: 0.1em 0.4em;
+  color: var(--ink-2);
+  font-family: var(--mono);
+  font-size: 0.8em;
+}
+
+/* ─── Mathematics ──────────────────────────────────────────────────────────
+   MathML, which is why there is no font to load and no second stylesheet: the
+   browser sets it in the surrounding face. A display formula is centred and
+   allowed to scroll, because a long equation is the one block that genuinely
+   cannot wrap. */
+
+[data-m22-article] math {
+  color: var(--ink);
+  font-size: 1.05em;
+}
+[data-m22-article] .m22-math {
+  /* `overflow-x: auto` alone turns the OTHER axis into `auto` too, which drew
+     a vertical scrollbar down the side of every formula. */
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-block: 0.35em;
+  scrollbar-width: thin;
+  scrollbar-color: var(--rule-2) transparent;
+}
+/* A block-level `math` is not affected by the container's `text-align`, so it
+   is centred the way any block is: by its own margins. */
+[data-m22-article] math[display='block'] {
+  display: block;
+  width: fit-content;
+  margin-inline: auto;
+}
+
+/* ─── Footnotes ────────────────────────────────────────────────────────────
+   Ruled off and set small: they are apparatus, not the piece. */
+
+[data-m22-article] > .footnotes {
+  margin-block-start: 3em;
+}
+[data-m22-article] .footnotes {
+  padding-block-start: 1.5em;
+  border-block-start: 1px solid var(--rule);
+  font-size: 0.875rem;
+}
+[data-m22-article] .footnotes h2 {
+  font-family: var(--mono);
+  font-size: 11px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--ink-3-aa);
+}
+/* The reference and its back-arrow keep the underline every other link in the
+   article has. Stripping it was a WCAG 1.4.1 failure and axe says so: a link
+   inside a block of text has to be distinguishable from the text without
+   relying on colour, and ink on --ink-2 is 2.14:1 — well under the 3:1 that
+   would let colour carry it alone. */
+[data-m22-article] .footnote-backref {
+  /* The glyph is the affordance; a name is not. */
+  font-size: 0.9em;
+}

package/dist/components/AppShell/AppShell.d.ts

@@ -18,6 +18,20 @@ interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
      * longer answer "where is the content".
      */
     contentAs?: 'main' | 'div';
+    /**
+     * Names the sidebar landmark.
+     *
+     * Two `complementary` landmarks with the same name cannot be told apart, and
+     * a shell rendered inside another page — a preview, a screenshot harness —
+     * makes exactly that pair. It is also the only way a non-English app gets a
+     * landmark name its readers can read.
+     */
+    sidebarLabel?: string;
+    /** Names the navigation landmark inside the sidebar. */
+    navLabel?: string;
+    /** The drawer toggle, closed and open. */
+    openLabel?: string;
+    closeLabel?: string;
     children: ReactNode;
 }
 /**
@@ -33,6 +47,6 @@ interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
  *   <Card>…</Card>
  * </AppShell>
  */
-declare function AppShell({ sidebar, topbar, brand, contentAs: Content, children, className, ...rest }: AppShellProps): react.JSX.Element;
+declare function AppShell({ sidebar, topbar, brand, contentAs: Content, sidebarLabel, navLabel, openLabel, closeLabel, children, className, ...rest }: AppShellProps): react.JSX.Element;
 
 export { AppShell, type AppShellProps, AppShell as default };

package/dist/components/AppShell/AppShell.js

@@ -8,6 +8,10 @@ function AppShell({
   topbar,
   brand,
   contentAs: Content = "main",
+  sidebarLabel = "Sidebar",
+  navLabel = "Primary",
+  openLabel = "Open navigation",
+  closeLabel = "Close navigation",
   children,
   className,
   ...rest
@@ -32,7 +36,7 @@ function AppShell({
           "button",
           {
             type: "button",
-            "aria-label": "Close navigation",
+            "aria-label": closeLabel,
             onClick: () => setOpen(false),
             className: "fixed inset-0 z-(--z-scrim) bg-(--scrim) md:hidden"
           }
@@ -41,7 +45,7 @@ function AppShell({
           "aside",
           {
             id: sidebarId,
-            "aria-label": "Sidebar",
+            "aria-label": sidebarLabel,
             className: cn(
               "fixed inset-y-0 start-0 z-(--z-modal) flex w-60 flex-col border-e border-(--rule) bg-(--paper) transition-transform duration-(--duration-slow) ease-(--ease-out-expo)",
               // The drawer slides in from the edge reading STARTS at, so in an
@@ -54,7 +58,7 @@ function AppShell({
               /* @__PURE__ */ jsx(
                 "nav",
                 {
-                  "aria-label": "Primary",
+                  "aria-label": navLabel,
                   className: "flex flex-1 flex-col gap-1 overflow-y-auto p-3 scroll-slim",
                   children: sidebar
                 }
@@ -68,7 +72,7 @@ function AppShell({
               "button",
               {
                 type: "button",
-                "aria-label": open ? "Close navigation" : "Open navigation",
+                "aria-label": open ? closeLabel : openLabel,
                 "aria-expanded": open,
                 "aria-controls": sidebarId,
                 onClick: () => setOpen((previous) => !previous),

package/dist/components/AppShell/AppShell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AppShell/AppShell.tsx"],"sourcesContent":["'use client'\n\nimport { Menu, X } from 'lucide-react'\nimport { useEffect, useId, useState } from 'react'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface AppShellProps extends HTMLAttributes<HTMLDivElement> {\n  /** Navigation content for the sidebar (e.g. a stack of `NavItem`s). */\n  sidebar: ReactNode\n  /** Optional content for the sticky topbar, laid out after the mobile toggle. */\n  topbar?: ReactNode\n  /** Optional brand lockup pinned to the top of the sidebar. */\n  brand?: ReactNode\n  /**\n   * Which element the content well renders as.\n   *\n   * `main` is right for the shell of an application, and is the default. A\n   * document may contain exactly one `main` landmark, so an AppShell rendered\n   * INSIDE another page — a preview on a documentation site, a screenshot\n   * harness — must pass `div`, or the page has two and assistive tech can no\n   * longer answer \"where is the content\".\n   */\n  contentAs?: 'main' | 'div'\n  children: ReactNode\n}\n\n/**\n * Two columns on a desktop, one column and a drawer on a phone.\n *\n * The drawer closes on Escape as well as on the scrim, because a drawer that\n * only closes by tapping outside it strands a keyboard user inside a menu they\n * cannot leave. The scrim is a `<button>` for the same reason — a `<div>` with\n * an `onClick` is not reachable by keyboard and not announced as anything.\n *\n * @example\n * <AppShell brand={<Wordmark />} sidebar={<NavItem href=\"/\">Home</NavItem>}>\n *   <Card>…</Card>\n * </AppShell>\n */\nexport function AppShell({\n  sidebar,\n  topbar,\n  brand,\n  contentAs: Content = 'main',\n  children,\n  className,\n  ...rest\n}: AppShellProps) {\n  const [open, setOpen] = useState(false)\n  const sidebarId = useId()\n\n  useEffect(() => {\n    if (!open) return\n    const onKey = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') setOpen(false)\n    }\n    document.addEventListener('keydown', onKey)\n    return () => document.removeEventListener('keydown', onKey)\n  }, [open])\n\n  return (\n    <div\n      className={cn('min-h-svh bg-(--paper) md:grid md:grid-cols-[15rem_1fr]', className)}\n      {...rest}\n    >\n      {open && (\n        <button\n          type=\"button\"\n          aria-label=\"Close navigation\"\n          onClick={() => setOpen(false)}\n          className=\"fixed inset-0 z-(--z-scrim) bg-(--scrim) md:hidden\"\n        />\n      )}\n\n      <aside\n        id={sidebarId}\n        aria-label=\"Sidebar\"\n        className={cn(\n          'fixed inset-y-0 start-0 z-(--z-modal) flex w-60 flex-col border-e border-(--rule) bg-(--paper) transition-transform duration-(--duration-slow) ease-(--ease-out-expo)',\n          // The drawer slides in from the edge reading STARTS at, so in an\n          // right-to-left document it comes from the right.\n          open ? 'translate-x-0' : '-translate-x-full rtl:translate-x-full',\n          'md:static md:z-auto md:translate-x-0',\n        )}\n      >\n        {brand && (\n          <div className=\"flex h-14 items-center border-b border-(--rule) px-5\">{brand}</div>\n        )}\n        <nav\n          aria-label=\"Primary\"\n          className=\"flex flex-1 flex-col gap-1 overflow-y-auto p-3 scroll-slim\"\n        >\n          {sidebar}\n        </nav>\n      </aside>\n\n      <div className=\"flex min-w-0 flex-col\">\n        <header className=\"sticky top-0 z-(--z-sticky) flex h-14 items-center gap-3 border-b border-(--rule) bg-(--paper)/85 px-(--page-pad) backdrop-blur\">\n          <button\n            type=\"button\"\n            aria-label={open ? 'Close navigation' : 'Open navigation'}\n            aria-expanded={open}\n            aria-controls={sidebarId}\n            onClick={() => setOpen((previous) => !previous)}\n            className=\"-ms-2.5 grid size-11 place-items-center rounded-(--radius) text-(--ink-2) transition-colors duration-(--duration-fast) hover:text-(--ink) md:hidden\"\n          >\n            {open ? <X size={20} strokeWidth={1.5} aria-hidden /> : <Menu size={20} strokeWidth={1.5} aria-hidden />}\n          </button>\n          {topbar}\n        </header>\n\n        <Content className=\"mx-auto w-full max-w-(--w-page) px-(--page-pad) py-8\">{children}</Content>\n      </div>\n    </div>\n  )\n}\n\nexport default AppShell\n"],"mappings":";AAmEQ,cAQF,YARE;AAjER,SAAS,MAAM,SAAS;AACxB,SAAS,WAAW,OAAO,gBAAgB;AAE3C,SAAS,UAAU;AAmCZ,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,UAAU;AAAA,EACrB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,YAAY,MAAM;AAExB,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,QAAQ,CAAC,UAAyB;AACtC,UAAI,MAAM,QAAQ,SAAU,SAAQ,KAAK;AAAA,IAC3C;AACA,aAAS,iBAAiB,WAAW,KAAK;AAC1C,WAAO,MAAM,SAAS,oBAAoB,WAAW,KAAK;AAAA,EAC5D,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,2DAA2D,SAAS;AAAA,MACjF,GAAG;AAAA,MAEH;AAAA,gBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,SAAS,MAAM,QAAQ,KAAK;AAAA,YAC5B,WAAU;AAAA;AAAA,QACZ;AAAA,QAGF;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,cAAW;AAAA,YACX,WAAW;AAAA,cACT;AAAA;AAAA;AAAA,cAGA,OAAO,kBAAkB;AAAA,cACzB;AAAA,YACF;AAAA,YAEC;AAAA,uBACC,oBAAC,SAAI,WAAU,wDAAwD,iBAAM;AAAA,cAE/E;AAAA,gBAAC;AAAA;AAAA,kBACC,cAAW;AAAA,kBACX,WAAU;AAAA,kBAET;AAAA;AAAA,cACH;AAAA;AAAA;AAAA,QACF;AAAA,QAEA,qBAAC,SAAI,WAAU,yBACb;AAAA,+BAAC,YAAO,WAAU,mIAChB;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,cAAY,OAAO,qBAAqB;AAAA,gBACxC,iBAAe;AAAA,gBACf,iBAAe;AAAA,gBACf,SAAS,MAAM,QAAQ,CAAC,aAAa,CAAC,QAAQ;AAAA,gBAC9C,WAAU;AAAA,gBAET,iBAAO,oBAAC,KAAE,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC,IAAK,oBAAC,QAAK,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC;AAAA;AAAA,YACxG;AAAA,YACC;AAAA,aACH;AAAA,UAEA,oBAAC,WAAQ,WAAU,wDAAwD,UAAS;AAAA,WACtF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/AppShell/AppShell.tsx"],"sourcesContent":["'use client'\n\nimport { Menu, X } from 'lucide-react'\nimport { useEffect, useId, useState } from 'react'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface AppShellProps extends HTMLAttributes<HTMLDivElement> {\n  /** Navigation content for the sidebar (e.g. a stack of `NavItem`s). */\n  sidebar: ReactNode\n  /** Optional content for the sticky topbar, laid out after the mobile toggle. */\n  topbar?: ReactNode\n  /** Optional brand lockup pinned to the top of the sidebar. */\n  brand?: ReactNode\n  /**\n   * Which element the content well renders as.\n   *\n   * `main` is right for the shell of an application, and is the default. A\n   * document may contain exactly one `main` landmark, so an AppShell rendered\n   * INSIDE another page — a preview on a documentation site, a screenshot\n   * harness — must pass `div`, or the page has two and assistive tech can no\n   * longer answer \"where is the content\".\n   */\n  contentAs?: 'main' | 'div'\n  /**\n   * Names the sidebar landmark.\n   *\n   * Two `complementary` landmarks with the same name cannot be told apart, and\n   * a shell rendered inside another page — a preview, a screenshot harness —\n   * makes exactly that pair. It is also the only way a non-English app gets a\n   * landmark name its readers can read.\n   */\n  sidebarLabel?: string\n  /** Names the navigation landmark inside the sidebar. */\n  navLabel?: string\n  /** The drawer toggle, closed and open. */\n  openLabel?: string\n  closeLabel?: string\n  children: ReactNode\n}\n\n/**\n * Two columns on a desktop, one column and a drawer on a phone.\n *\n * The drawer closes on Escape as well as on the scrim, because a drawer that\n * only closes by tapping outside it strands a keyboard user inside a menu they\n * cannot leave. The scrim is a `<button>` for the same reason — a `<div>` with\n * an `onClick` is not reachable by keyboard and not announced as anything.\n *\n * @example\n * <AppShell brand={<Wordmark />} sidebar={<NavItem href=\"/\">Home</NavItem>}>\n *   <Card>…</Card>\n * </AppShell>\n */\nexport function AppShell({\n  sidebar,\n  topbar,\n  brand,\n  contentAs: Content = 'main',\n  sidebarLabel = 'Sidebar',\n  navLabel = 'Primary',\n  openLabel = 'Open navigation',\n  closeLabel = 'Close navigation',\n  children,\n  className,\n  ...rest\n}: AppShellProps) {\n  const [open, setOpen] = useState(false)\n  const sidebarId = useId()\n\n  useEffect(() => {\n    if (!open) return\n    const onKey = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') setOpen(false)\n    }\n    document.addEventListener('keydown', onKey)\n    return () => document.removeEventListener('keydown', onKey)\n  }, [open])\n\n  return (\n    <div\n      className={cn('min-h-svh bg-(--paper) md:grid md:grid-cols-[15rem_1fr]', className)}\n      {...rest}\n    >\n      {open && (\n        <button\n          type=\"button\"\n          aria-label={closeLabel}\n          onClick={() => setOpen(false)}\n          className=\"fixed inset-0 z-(--z-scrim) bg-(--scrim) md:hidden\"\n        />\n      )}\n\n      <aside\n        id={sidebarId}\n        aria-label={sidebarLabel}\n        className={cn(\n          'fixed inset-y-0 start-0 z-(--z-modal) flex w-60 flex-col border-e border-(--rule) bg-(--paper) transition-transform duration-(--duration-slow) ease-(--ease-out-expo)',\n          // The drawer slides in from the edge reading STARTS at, so in an\n          // right-to-left document it comes from the right.\n          open ? 'translate-x-0' : '-translate-x-full rtl:translate-x-full',\n          'md:static md:z-auto md:translate-x-0',\n        )}\n      >\n        {brand && (\n          <div className=\"flex h-14 items-center border-b border-(--rule) px-5\">{brand}</div>\n        )}\n        <nav\n          aria-label={navLabel}\n          className=\"flex flex-1 flex-col gap-1 overflow-y-auto p-3 scroll-slim\"\n        >\n          {sidebar}\n        </nav>\n      </aside>\n\n      <div className=\"flex min-w-0 flex-col\">\n        <header className=\"sticky top-0 z-(--z-sticky) flex h-14 items-center gap-3 border-b border-(--rule) bg-(--paper)/85 px-(--page-pad) backdrop-blur\">\n          <button\n            type=\"button\"\n            aria-label={open ? closeLabel : openLabel}\n            aria-expanded={open}\n            aria-controls={sidebarId}\n            onClick={() => setOpen((previous) => !previous)}\n            className=\"-ms-2.5 grid size-11 place-items-center rounded-(--radius) text-(--ink-2) transition-colors duration-(--duration-fast) hover:text-(--ink) md:hidden\"\n          >\n            {open ? <X size={20} strokeWidth={1.5} aria-hidden /> : <Menu size={20} strokeWidth={1.5} aria-hidden />}\n          </button>\n          {topbar}\n        </header>\n\n        <Content className=\"mx-auto w-full max-w-(--w-page) px-(--page-pad) py-8\">{children}</Content>\n      </div>\n    </div>\n  )\n}\n\nexport default AppShell\n"],"mappings":";AAqFQ,cAQF,YARE;AAnFR,SAAS,MAAM,SAAS;AACxB,SAAS,WAAW,OAAO,gBAAgB;AAE3C,SAAS,UAAU;AAiDZ,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,UAAU;AAAA,EACrB,eAAe;AAAA,EACf,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,YAAY,MAAM;AAExB,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,QAAQ,CAAC,UAAyB;AACtC,UAAI,MAAM,QAAQ,SAAU,SAAQ,KAAK;AAAA,IAC3C;AACA,aAAS,iBAAiB,WAAW,KAAK;AAC1C,WAAO,MAAM,SAAS,oBAAoB,WAAW,KAAK;AAAA,EAC5D,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,2DAA2D,SAAS;AAAA,MACjF,GAAG;AAAA,MAEH;AAAA,gBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAY;AAAA,YACZ,SAAS,MAAM,QAAQ,KAAK;AAAA,YAC5B,WAAU;AAAA;AAAA,QACZ;AAAA,QAGF;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,cAAY;AAAA,YACZ,WAAW;AAAA,cACT;AAAA;AAAA;AAAA,cAGA,OAAO,kBAAkB;AAAA,cACzB;AAAA,YACF;AAAA,YAEC;AAAA,uBACC,oBAAC,SAAI,WAAU,wDAAwD,iBAAM;AAAA,cAE/E;AAAA,gBAAC;AAAA;AAAA,kBACC,cAAY;AAAA,kBACZ,WAAU;AAAA,kBAET;AAAA;AAAA,cACH;AAAA;AAAA;AAAA,QACF;AAAA,QAEA,qBAAC,SAAI,WAAU,yBACb;AAAA,+BAAC,YAAO,WAAU,mIAChB;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,cAAY,OAAO,aAAa;AAAA,gBAChC,iBAAe;AAAA,gBACf,iBAAe;AAAA,gBACf,SAAS,MAAM,QAAQ,CAAC,aAAa,CAAC,QAAQ;AAAA,gBAC9C,WAAU;AAAA,gBAET,iBAAO,oBAAC,KAAE,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC,IAAK,oBAAC,QAAK,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC;AAAA;AAAA,YACxG;AAAA,YACC;AAAA,aACH;AAAA,UAEA,oBAAC,WAAQ,WAAU,wDAAwD,UAAS;AAAA,WACtF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/components/Article/Article.d.ts

@@ -0,0 +1,51 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+interface ArticleProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Rendered HTML from a Markdown or MDX pipeline.
+     *
+     * Trusted markup only. This sets `dangerouslySetInnerHTML`, so it must come
+     * from content you control — a repository's own posts, a CMS you author —
+     * and never from a reader. Untrusted Markdown has to be sanitised before it
+     * reaches here; that is a pipeline decision, not a component one, and a
+     * sanitiser bolted on inside a styling primitive would be the wrong place to
+     * make it and the easiest place to get it wrong.
+     */
+    html?: string;
+    /** The element to render. `article` by default; pass `div` for a fragment. */
+    as?: 'article' | 'div' | 'section';
+}
+/**
+ * The long-form reading surface.
+ *
+ * Everything a Markdown pipeline can emit — headings, prose, lists, tables,
+ * quotations, code, figures, footnotes, MathML — set in this system's type,
+ * colour and rules. The styles live in `article.css` rather than in a class
+ * string, because the input is not JSX: there is no component to hang a class
+ * on when the markup arrived as a string, so the contract has to be the element
+ * names themselves.
+ *
+ * That file is published on its own as `@misoto22/design/article.css`, so a
+ * site with its own Markdown pipeline can take the reading surface without
+ * taking the components — which is the case this exists for. Three sites
+ * hand-rolling a prose stylesheet is three prose stylesheets that drift.
+ *
+ * Composable either way: pass `html` for a rendered string, or children for
+ * real elements. A post that mixes the two — prose with a `Diagram` dropped
+ * into the middle — renders its blocks in order and gives each one an
+ * `Article`; a component inside keeps its own classes, because every rule in
+ * the layer is a bare element selector that a utility outranks.
+ *
+ * @example
+ * <Article html={renderedMarkdown} />
+ * @example
+ * <Article>
+ *   <h1>The White Reset</h1>
+ *   <p className="lead">A monochrome system for software and writing.</p>
+ *   <Diagram spec={spec} />
+ * </Article>
+ */
+declare function Article({ html, as: Comp, className, children, ...rest }: ArticleProps): react.JSX.Element;
+
+export { Article, type ArticleProps, Article as default };

package/dist/components/Article/Article.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+function Article({ html, as: Comp = "article", className, children, ...rest }) {
+  if (html !== void 0) {
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        "data-m22-article": true,
+        className,
+        dangerouslySetInnerHTML: { __html: html },
+        ...rest
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Comp, { "data-m22-article": true, className, ...rest, children });
+}
+var Article_default = Article;
+export {
+  Article,
+  Article_default as default
+};
+//# sourceMappingURL=Article.js.map

package/dist/components/Article/Article.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Article/Article.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\n\nexport interface ArticleProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Rendered HTML from a Markdown or MDX pipeline.\n   *\n   * Trusted markup only. This sets `dangerouslySetInnerHTML`, so it must come\n   * from content you control — a repository's own posts, a CMS you author —\n   * and never from a reader. Untrusted Markdown has to be sanitised before it\n   * reaches here; that is a pipeline decision, not a component one, and a\n   * sanitiser bolted on inside a styling primitive would be the wrong place to\n   * make it and the easiest place to get it wrong.\n   */\n  html?: string\n  /** The element to render. `article` by default; pass `div` for a fragment. */\n  as?: 'article' | 'div' | 'section'\n}\n\n/**\n * The long-form reading surface.\n *\n * Everything a Markdown pipeline can emit — headings, prose, lists, tables,\n * quotations, code, figures, footnotes, MathML — set in this system's type,\n * colour and rules. The styles live in `article.css` rather than in a class\n * string, because the input is not JSX: there is no component to hang a class\n * on when the markup arrived as a string, so the contract has to be the element\n * names themselves.\n *\n * That file is published on its own as `@misoto22/design/article.css`, so a\n * site with its own Markdown pipeline can take the reading surface without\n * taking the components — which is the case this exists for. Three sites\n * hand-rolling a prose stylesheet is three prose stylesheets that drift.\n *\n * Composable either way: pass `html` for a rendered string, or children for\n * real elements. A post that mixes the two — prose with a `Diagram` dropped\n * into the middle — renders its blocks in order and gives each one an\n * `Article`; a component inside keeps its own classes, because every rule in\n * the layer is a bare element selector that a utility outranks.\n *\n * @example\n * <Article html={renderedMarkdown} />\n * @example\n * <Article>\n *   <h1>The White Reset</h1>\n *   <p className=\"lead\">A monochrome system for software and writing.</p>\n *   <Diagram spec={spec} />\n * </Article>\n */\nexport function Article({ html, as: Comp = 'article', className, children, ...rest }: ArticleProps) {\n  // One or the other, never both. The rhythm rules are child combinators, so a\n  // wrapper around the rendered string — even a `display: contents` one, which\n  // removes the box but not the DOM node — would take every heading and\n  // paragraph out of the article's direct children and cost them their\n  // spacing. A page with both is a page with two Articles, and it should say\n  // so.\n  if (html !== undefined) {\n    return (\n      <Comp\n        data-m22-article\n        className={className}\n        dangerouslySetInnerHTML={{ __html: html }}\n        {...rest}\n      />\n    )\n  }\n\n  return (\n    <Comp data-m22-article className={className} {...rest}>\n      {children}\n    </Comp>\n  )\n}\n\nexport default Article\n"],"mappings":"AAyDM;AATC,SAAS,QAAQ,EAAE,MAAM,IAAI,OAAO,WAAW,WAAW,UAAU,GAAG,KAAK,GAAiB;AAOlG,MAAI,SAAS,QAAW;AACtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,oBAAgB;AAAA,QAChB;AAAA,QACA,yBAAyB,EAAE,QAAQ,KAAK;AAAA,QACvC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AAEA,SACE,oBAAC,QAAK,oBAAgB,MAAC,WAAuB,GAAG,MAC9C,UACH;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}

package/dist/components/Button/Button.js

@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import { cn } from "../../lib/cn.js";
 import { Spinner } from "../Spinner/Spinner.js";
-const BASE = "inline-flex items-center justify-center gap-(--control-gap) rounded-(--radius-pill) font-sans transition-[opacity,color,border-color,background-color] duration-(--duration-fast) ease-(--ease-out-expo) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none aria-disabled:opacity-(--disabled-opacity) aria-disabled:pointer-events-none";
+const BASE = "inline-flex items-center justify-center gap-(--control-gap) rounded-(--radius) font-sans transition-[opacity,color,border-color,background-color] duration-(--duration-fast) ease-(--ease-out-expo) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none aria-disabled:opacity-(--disabled-opacity) aria-disabled:pointer-events-none";
 const VARIANT = {
   primary: "bg-(--accent) text-(--accent-foreground) border border-(--accent) hover:opacity-85",
   secondary: "border border-(--rule-2) text-(--ink) bg-transparent hover:border-(--ink)",
@@ -23,7 +23,7 @@ const ICON_SIZE = {
 };
 const SPINNER_SIZE = { sm: "sm", md: "sm", lg: "md" };
 function Keycap({ glyph }) {
-  return /* @__PURE__ */ jsx("span", { className: "rounded-(--radius-pill) border border-current px-2 py-0.5 font-mono text-[11px] opacity-55", children: glyph });
+  return /* @__PURE__ */ jsx("span", { className: "rounded-(--radius-sm) border border-current px-2 py-0.5 font-mono text-[11px] opacity-55", children: glyph });
 }
 function Button(props) {
   const {

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { Spinner } from '../Spinner/Spinner'\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger'\nexport type ButtonSize = 'sm' | 'md' | 'lg'\n\n/**\n * The base every variant shares.\n *\n * A pill, and it does not move on hover. An earlier base lifted a pixel and\n * asked for a shadow the White Reset does not have — `--shadow` resolves to\n * `none`, so that hover state was invisible on every button in the system while\n * still costing a transition. Opacity carries the filled hover; the border\n * carries the outlined one.\n *\n * The transition names its properties rather than using `all`, so a layout\n * change (a width that grows when the label becomes \"Saving…\") is instant\n * instead of sliding.\n */\nconst BASE =\n  'inline-flex items-center justify-center gap-(--control-gap) rounded-(--radius-pill) font-sans transition-[opacity,color,border-color,background-color] duration-(--duration-fast) ease-(--ease-out-expo) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none aria-disabled:opacity-(--disabled-opacity) aria-disabled:pointer-events-none'\n\nconst VARIANT: Record<ButtonVariant, string> = {\n  primary: 'bg-(--accent) text-(--accent-foreground) border border-(--accent) hover:opacity-85',\n  secondary: 'border border-(--rule-2) text-(--ink) bg-transparent hover:border-(--ink)',\n  ghost: 'border border-transparent text-(--ink-2) hover:text-(--ink) hover:bg-(--stone)',\n  /* The one place chroma is allowed on a control, and only because the action\n     is destructive — that is a state, not a brand colour. */\n  danger: 'bg-(--danger) text-(--paper) border border-(--danger) hover:opacity-85',\n}\n\n/**\n * `min-h` rather than `h`, so a button that wraps to two lines grows instead of\n * clipping.\n *\n * The heights come from the density tokens rather than from a literal, so a\n * subtree marked `data-density=\"compact\"` shrinks its controls without a single\n * call site being told. At the default density `md` is 44px — the pointer\n * target WCAG 2.5.5 asks for.\n */\nconst SIZE: Record<ButtonSize, string> = {\n  sm: 'min-h-(--control-h-sm) px-(--control-px-sm) py-(--control-py-sm) text-[13px]',\n  md: 'min-h-(--control-h-md) px-(--control-px-md) py-(--control-py-md) text-sm',\n  lg: 'min-h-(--control-h-lg) px-(--control-px-lg) py-(--control-py-lg) text-[15px]',\n}\n\n/** Square, because an icon has no label to give the box its width. */\nconst ICON_SIZE: Record<ButtonSize, string> = {\n  sm: 'size-(--control-h-sm) p-0',\n  md: 'size-(--control-h-md) p-0',\n  lg: 'size-(--control-h-lg) p-0',\n}\n\nconst SPINNER_SIZE: Record<ButtonSize, 'sm' | 'md'> = { sm: 'sm', md: 'sm', lg: 'md' }\n\ninterface CommonProps {\n  children?: ReactNode\n  /**\n   * Which action this is. `primary` is the one thing the screen wants you to\n   * do, so there is at most one per view; `danger` is reserved for destructive\n   * actions and is the only place chroma is allowed on a control.\n   */\n  variant?: ButtonVariant\n  /** 36 / 44 / 48px tall. `md` meets the pointer-target floor on its own. */\n  size?: ButtonSize\n  /** Optional mono keycap glyph rendered after the label (e.g. \"P\"). */\n  keycap?: string\n  /**\n   * Swaps the leading content for a spinner and blocks interaction. The label\n   * stays put — a button that empties out while it works loses its width, and\n   * the page reflows under the pointer that just clicked it.\n   */\n  loading?: boolean\n  /**\n   * Square control with no label. REQUIRES `aria-label`: an icon-only button\n   * with no accessible name is invisible to a screen reader, and this is the\n   * single most common way a design system ships an unusable control.\n   */\n  iconOnly?: boolean\n  /**\n   * Render the child element instead of a `<button>`, keeping these styles.\n   * Use it to hand the styling to a router's `Link` — `asChild` is what keeps\n   * this package free of any one router.\n   *\n   * The decoration slots (`keycap`, `loading`) are not injected into a slotted\n   * child; compose them inside it yourself.\n   *\n   * @example\n   * <Button asChild><Link href=\"/work\">Work</Link></Button>\n   */\n  asChild?: boolean\n  className?: string\n}\n\ntype ButtonAsLink = CommonProps &\n  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'> & { href: string }\n\ntype ButtonAsButton = CommonProps &\n  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children'> & { href?: undefined }\n\nexport type ButtonProps = ButtonAsLink | ButtonAsButton\n\nfunction Keycap({ glyph }: { glyph: string }) {\n  return (\n    <span className=\"rounded-(--radius-pill) border border-current px-2 py-0.5 font-mono text-[11px] opacity-55\">\n      {glyph}\n    </span>\n  )\n}\n\n/**\n * The system's action.\n *\n * Renders a `<button>`, or an `<a>` when given `href`, or whatever you hand it\n * via `asChild`. No router is imported, so the package stays framework-agnostic\n * and a Next or React Router app wires its own `Link` at the call site.\n *\n * Server-component friendly: there is no client boundary here, so it renders in\n * a static page as well as an interactive one.\n *\n * @example\n * <Button variant=\"secondary\" keycap=\"P\">View projects</Button>\n * @example\n * <Button loading disabled>Saving…</Button>\n * @example\n * <Button iconOnly aria-label=\"Close\"><X size={16} /></Button>\n */\nexport function Button(props: ButtonProps) {\n  const {\n    children,\n    variant = 'primary',\n    size = 'md',\n    keycap,\n    loading = false,\n    iconOnly = false,\n    asChild = false,\n    className,\n  } = props\n\n  const cls = cn(BASE, VARIANT[variant], iconOnly ? ICON_SIZE[size] : SIZE[size], className)\n\n  // A filled ground needs a spinner in the inherited colour; an outlined one\n  // reads better against the page's own rule scale.\n  const spinnerTone = variant === 'primary' || variant === 'danger' ? 'current' : 'default'\n  const decoration = (\n    <>\n      {loading && <Spinner size={SPINNER_SIZE[size]} tone={spinnerTone} label={null} />}\n      {children}\n      {keycap && <Keycap glyph={keycap} />}\n    </>\n  )\n\n  if (asChild) {\n    const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, ...rest } = props\n    return (\n      <Slot className={cls} {...rest}>\n        {children}\n      </Slot>\n    )\n  }\n\n  if (props.href !== undefined) {\n    const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, href, ...rest } = props\n    return (\n      <a\n        href={href}\n        className={cls}\n        // A link cannot be `disabled`; `aria-disabled` plus the pointer-events\n        // rule in BASE is the accessible equivalent.\n        aria-disabled={loading || undefined}\n        {...rest}\n      >\n        {decoration}\n      </a>\n    )\n  }\n\n  const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, ...rest } = props\n  return (\n    <button\n      type={rest.type ?? 'button'}\n      aria-busy={loading || undefined}\n      disabled={rest.disabled || loading}\n      className={cls}\n      {...rest}\n    >\n      {decoration}\n    </button>\n  )\n}\n\nexport default Button\n"],"mappings":"AA0GI,SAyCA,UAzCA,KAyCA,YAzCA;AA1GJ,SAAS,YAAY;AAErB,SAAS,UAAU;AACnB,SAAS,eAAe;AAkBxB,MAAM,OACJ;AAEF,MAAM,UAAyC;AAAA,EAC7C,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA;AAAA;AAAA,EAGP,QAAQ;AACV;AAWA,MAAM,OAAmC;AAAA,EACvC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,MAAM,YAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAgD,EAAE,IAAI,MAAM,IAAI,MAAM,IAAI,KAAK;AAiDrF,SAAS,OAAO,EAAE,MAAM,GAAsB;AAC5C,SACE,oBAAC,UAAK,WAAU,8FACb,iBACH;AAEJ;AAmBO,SAAS,OAAO,OAAoB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,GAAG,MAAM,QAAQ,OAAO,GAAG,WAAW,UAAU,IAAI,IAAI,KAAK,IAAI,GAAG,SAAS;AAIzF,QAAM,cAAc,YAAY,aAAa,YAAY,WAAW,YAAY;AAChF,QAAM,aACJ,iCACG;AAAA,eAAW,oBAAC,WAAQ,MAAM,aAAa,IAAI,GAAG,MAAM,aAAa,OAAO,MAAM;AAAA,IAC9E;AAAA,IACA,UAAU,oBAAC,UAAO,OAAO,QAAQ;AAAA,KACpC;AAGF,MAAI,SAAS;AACX,UAAM,EAAE,UAAUA,KAAI,SAASC,KAAI,MAAMC,KAAI,QAAQC,KAAI,SAASC,KAAI,UAAUC,KAAI,SAASC,KAAI,WAAWC,MAAK,GAAGC,MAAK,IAAI;AAC7H,WACE,oBAAC,QAAK,WAAW,KAAM,GAAGA,OACvB,UACH;AAAA,EAEJ;AAEA,MAAI,MAAM,SAAS,QAAW;AAC5B,UAAM,EAAE,UAAUR,KAAI,SAASC,KAAI,MAAMC,KAAI,QAAQC,KAAI,SAASC,KAAI,UAAUC,KAAI,SAASC,KAAI,WAAWC,MAAK,MAAM,GAAGC,MAAK,IAAI;AACnI,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QAGX,iBAAe,WAAW;AAAA,QACzB,GAAGA;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,QAAM,EAAE,UAAU,IAAI,SAAS,IAAI,MAAM,IAAI,QAAQ,IAAI,SAAS,IAAI,UAAU,IAAI,SAAS,IAAI,WAAW,KAAK,GAAG,KAAK,IAAI;AAC7H,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,KAAK,QAAQ;AAAA,MACnB,aAAW,WAAW;AAAA,MACtB,UAAU,KAAK,YAAY;AAAA,MAC3B,WAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,iBAAQ;","names":["_c","_v","_s","_k","_l","_i","_a","_cn","rest"]}
+{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { Spinner } from '../Spinner/Spinner'\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger'\nexport type ButtonSize = 'sm' | 'md' | 'lg'\n\n/**\n * The base every variant shares.\n *\n * It reads `--radius`, the CONTROL step, which is the same corner an `Input`,\n * a `Select` trigger and a `Textarea` draw. It used to be a pill, and a pill\n * beside an 8px field is two different ideas of what a control is — the one\n * inconsistency in the system that every reader noticed and none of the\n * component pages could explain. Everything on the control line now agrees,\n * and the capsule is kept for the things that genuinely are one: a badge, a\n * status pill, a segmented strip, a progress track.\n *\n * It does not move on hover. An earlier base lifted a pixel and asked for a\n * shadow the White Reset does not have — `--shadow` resolves to `none`, so that\n * hover state was invisible on every button in the system while still costing a\n * transition. Opacity carries the filled hover; the border carries the outlined\n * one.\n *\n * The transition names its properties rather than using `all`, so a layout\n * change (a width that grows when the label becomes \"Saving…\") is instant\n * instead of sliding.\n */\nconst BASE =\n  'inline-flex items-center justify-center gap-(--control-gap) rounded-(--radius) font-sans transition-[opacity,color,border-color,background-color] duration-(--duration-fast) ease-(--ease-out-expo) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none aria-disabled:opacity-(--disabled-opacity) aria-disabled:pointer-events-none'\n\nconst VARIANT: Record<ButtonVariant, string> = {\n  primary: 'bg-(--accent) text-(--accent-foreground) border border-(--accent) hover:opacity-85',\n  secondary: 'border border-(--rule-2) text-(--ink) bg-transparent hover:border-(--ink)',\n  ghost: 'border border-transparent text-(--ink-2) hover:text-(--ink) hover:bg-(--stone)',\n  /* The one place chroma is allowed on a control, and only because the action\n     is destructive — that is a state, not a brand colour. */\n  danger: 'bg-(--danger) text-(--paper) border border-(--danger) hover:opacity-85',\n}\n\n/**\n * `min-h` rather than `h`, so a button that wraps to two lines grows instead of\n * clipping.\n *\n * The heights come from the density tokens rather than from a literal, so a\n * subtree marked `data-density=\"compact\"` shrinks its controls without a single\n * call site being told. At the default density `md` is 44px — the pointer\n * target WCAG 2.5.5 asks for.\n */\nconst SIZE: Record<ButtonSize, string> = {\n  sm: 'min-h-(--control-h-sm) px-(--control-px-sm) py-(--control-py-sm) text-[13px]',\n  md: 'min-h-(--control-h-md) px-(--control-px-md) py-(--control-py-md) text-sm',\n  lg: 'min-h-(--control-h-lg) px-(--control-px-lg) py-(--control-py-lg) text-[15px]',\n}\n\n/** Square, because an icon has no label to give the box its width. */\nconst ICON_SIZE: Record<ButtonSize, string> = {\n  sm: 'size-(--control-h-sm) p-0',\n  md: 'size-(--control-h-md) p-0',\n  lg: 'size-(--control-h-lg) p-0',\n}\n\nconst SPINNER_SIZE: Record<ButtonSize, 'sm' | 'md'> = { sm: 'sm', md: 'sm', lg: 'md' }\n\ninterface CommonProps {\n  children?: ReactNode\n  /**\n   * Which action this is. `primary` is the one thing the screen wants you to\n   * do, so there is at most one per view; `danger` is reserved for destructive\n   * actions and is the only place chroma is allowed on a control.\n   */\n  variant?: ButtonVariant\n  /** 36 / 44 / 48px tall. `md` meets the pointer-target floor on its own. */\n  size?: ButtonSize\n  /** Optional mono keycap glyph rendered after the label (e.g. \"P\"). */\n  keycap?: string\n  /**\n   * Swaps the leading content for a spinner and blocks interaction. The label\n   * stays put — a button that empties out while it works loses its width, and\n   * the page reflows under the pointer that just clicked it.\n   */\n  loading?: boolean\n  /**\n   * Square control with no label. REQUIRES `aria-label`: an icon-only button\n   * with no accessible name is invisible to a screen reader, and this is the\n   * single most common way a design system ships an unusable control.\n   */\n  iconOnly?: boolean\n  /**\n   * Render the child element instead of a `<button>`, keeping these styles.\n   * Use it to hand the styling to a router's `Link` — `asChild` is what keeps\n   * this package free of any one router.\n   *\n   * The decoration slots (`keycap`, `loading`) are not injected into a slotted\n   * child; compose them inside it yourself.\n   *\n   * @example\n   * <Button asChild><Link href=\"/work\">Work</Link></Button>\n   */\n  asChild?: boolean\n  className?: string\n}\n\ntype ButtonAsLink = CommonProps &\n  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'> & { href: string }\n\ntype ButtonAsButton = CommonProps &\n  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children'> & { href?: undefined }\n\nexport type ButtonProps = ButtonAsLink | ButtonAsButton\n\nfunction Keycap({ glyph }: { glyph: string }) {\n  return (\n    <span className=\"rounded-(--radius-sm) border border-current px-2 py-0.5 font-mono text-[11px] opacity-55\">\n      {glyph}\n    </span>\n  )\n}\n\n/**\n * The system's action.\n *\n * Renders a `<button>`, or an `<a>` when given `href`, or whatever you hand it\n * via `asChild`. No router is imported, so the package stays framework-agnostic\n * and a Next or React Router app wires its own `Link` at the call site.\n *\n * Server-component friendly: there is no client boundary here, so it renders in\n * a static page as well as an interactive one.\n *\n * @example\n * <Button variant=\"secondary\" keycap=\"P\">View projects</Button>\n * @example\n * <Button loading disabled>Saving…</Button>\n * @example\n * <Button iconOnly aria-label=\"Close\"><X size={16} /></Button>\n */\nexport function Button(props: ButtonProps) {\n  const {\n    children,\n    variant = 'primary',\n    size = 'md',\n    keycap,\n    loading = false,\n    iconOnly = false,\n    asChild = false,\n    className,\n  } = props\n\n  const cls = cn(BASE, VARIANT[variant], iconOnly ? ICON_SIZE[size] : SIZE[size], className)\n\n  // A filled ground needs a spinner in the inherited colour; an outlined one\n  // reads better against the page's own rule scale.\n  const spinnerTone = variant === 'primary' || variant === 'danger' ? 'current' : 'default'\n  const decoration = (\n    <>\n      {loading && <Spinner size={SPINNER_SIZE[size]} tone={spinnerTone} label={null} />}\n      {children}\n      {keycap && <Keycap glyph={keycap} />}\n    </>\n  )\n\n  if (asChild) {\n    const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, ...rest } = props\n    return (\n      <Slot className={cls} {...rest}>\n        {children}\n      </Slot>\n    )\n  }\n\n  if (props.href !== undefined) {\n    const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, href, ...rest } = props\n    return (\n      <a\n        href={href}\n        className={cls}\n        // A link cannot be `disabled`; `aria-disabled` plus the pointer-events\n        // rule in BASE is the accessible equivalent.\n        aria-disabled={loading || undefined}\n        {...rest}\n      >\n        {decoration}\n      </a>\n    )\n  }\n\n  const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, ...rest } = props\n  return (\n    <button\n      type={rest.type ?? 'button'}\n      aria-busy={loading || undefined}\n      disabled={rest.disabled || loading}\n      className={cls}\n      {...rest}\n    >\n      {decoration}\n    </button>\n  )\n}\n\nexport default Button\n"],"mappings":"AAkHI,SAyCA,UAzCA,KAyCA,YAzCA;AAlHJ,SAAS,YAAY;AAErB,SAAS,UAAU;AACnB,SAAS,eAAe;AA0BxB,MAAM,OACJ;AAEF,MAAM,UAAyC;AAAA,EAC7C,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA;AAAA;AAAA,EAGP,QAAQ;AACV;AAWA,MAAM,OAAmC;AAAA,EACvC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,MAAM,YAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAgD,EAAE,IAAI,MAAM,IAAI,MAAM,IAAI,KAAK;AAiDrF,SAAS,OAAO,EAAE,MAAM,GAAsB;AAC5C,SACE,oBAAC,UAAK,WAAU,4FACb,iBACH;AAEJ;AAmBO,SAAS,OAAO,OAAoB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,GAAG,MAAM,QAAQ,OAAO,GAAG,WAAW,UAAU,IAAI,IAAI,KAAK,IAAI,GAAG,SAAS;AAIzF,QAAM,cAAc,YAAY,aAAa,YAAY,WAAW,YAAY;AAChF,QAAM,aACJ,iCACG;AAAA,eAAW,oBAAC,WAAQ,MAAM,aAAa,IAAI,GAAG,MAAM,aAAa,OAAO,MAAM;AAAA,IAC9E;AAAA,IACA,UAAU,oBAAC,UAAO,OAAO,QAAQ;AAAA,KACpC;AAGF,MAAI,SAAS;AACX,UAAM,EAAE,UAAUA,KAAI,SAASC,KAAI,MAAMC,KAAI,QAAQC,KAAI,SAASC,KAAI,UAAUC,KAAI,SAASC,KAAI,WAAWC,MAAK,GAAGC,MAAK,IAAI;AAC7H,WACE,oBAAC,QAAK,WAAW,KAAM,GAAGA,OACvB,UACH;AAAA,EAEJ;AAEA,MAAI,MAAM,SAAS,QAAW;AAC5B,UAAM,EAAE,UAAUR,KAAI,SAASC,KAAI,MAAMC,KAAI,QAAQC,KAAI,SAASC,KAAI,UAAUC,KAAI,SAASC,KAAI,WAAWC,MAAK,MAAM,GAAGC,MAAK,IAAI;AACnI,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QAGX,iBAAe,WAAW;AAAA,QACzB,GAAGA;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,QAAM,EAAE,UAAU,IAAI,SAAS,IAAI,MAAM,IAAI,QAAQ,IAAI,SAAS,IAAI,UAAU,IAAI,SAAS,IAAI,WAAW,KAAK,GAAG,KAAK,IAAI;AAC7H,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,KAAK,QAAQ;AAAA,MACnB,aAAW,WAAW;AAAA,MACtB,UAAU,KAAK,YAAY;AAAA,MAC3B,WAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,iBAAQ;","names":["_c","_v","_s","_k","_l","_i","_a","_cn","rest"]}

package/dist/components/Calendar/Calendar.d.ts

@@ -23,6 +23,6 @@ type CalendarProps = DayPickerProps;
  * // A birth date: widen the years, since the default span is deliberately short.
  * <Calendar mode="single" startMonth={new Date(1920, 0)} endMonth={new Date()} />
  */
-declare function Calendar({ className, classNames, captionLayout, components, ...props }: CalendarProps): react.JSX.Element;
+declare function Calendar({ className, classNames, components, ...props }: CalendarProps): react.JSX.Element;
 
 export { Calendar, type CalendarProps, Calendar as default };