anentrypoint-design 0.0.463 → 0.0.464

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.463",
+  "version": "0.0.464",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/components/shell/app-shell.js

@@ -40,6 +40,13 @@ export function Topbar({ brand = '247420', leaf = '', items = [], active = '', o
                     if (!String(href).startsWith('http') && onNav) {
                         e.preventDefault();
                         onNav(cleanLabel);
+                        // preventDefault above blocks the browser's own
+                        // anchor-jump, so a #-target must be scrolled to
+                        // manually or the click looks purely decorative.
+                        if (String(href).startsWith('#')) {
+                            const target = document.getElementById(href.slice(1));
+                            if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                        }
                     }
                 }
             }, label);

package/src/css/app-shell/base.css

@@ -186,6 +186,29 @@ h3 + .lede, h3 + .t-lede,
   margin-top: var(--space-2);
 }
 
+/* A lede immediately followed by the article body is a named pairing too --
+   same rationale as the heading+lede gap above. Without this, .lede's
+   margin:0 leaves zero space above the first paragraph while every
+   paragraph-to-paragraph gap below it uses --space-4 (.ds-prose p), so the
+   dek reads as glued to the body it introduces. */
+.lede + .post-body, .t-lede + .post-body,
+.lede + .ds-prose, .t-lede + .ds-prose {
+  margin-top: var(--space-4);
+}
+
+/* Same gap-ownership problem again for .ds-section (hero-content.css):
+   `* + .ds-section { margin-top: 0 }` deliberately relies on the PRECEDING
+   sibling supplying the lead-in space, so two spacing primitives can
+   coordinate into one gap instead of stacking. .lede supplies none (margin:0
+   by design), so a lede-then-section pairing (e.g. project_page's h1 -> lede
+   -> "install" section) collapses to a flush 0px gap instead of inheriting
+   .ds-section's own --space-8 lead. Measured live on project_page: the
+   "install" h3 sat ~4px from the lede above it (padding only) vs the
+   intended --space-8/2 gap other section-adjacent siblings get. */
+.lede + .ds-section, .t-lede + .ds-section {
+  margin-top: var(--space-8);
+}
+
 .eyebrow {
   font-family: var(--ff-mono);
   font-size: var(--fs-tiny);

package/src/css/app-shell/hero-content.css

@@ -299,6 +299,13 @@ table th {
   color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tr-caps);
   background: var(--bg-2);
 }
+/* letter-spacing adds trailing space AFTER the last glyph too, but the table's
+   own border-radius+overflow:hidden (above) clips flush to the card edge --
+   the last header's positive tracking bleeds past its own padding box and
+   gets cropped mid-word ("STATUS" -> "STATI"). Absorb that bleed with a bit
+   of extra right padding on the last column only, so no header text sits
+   closer to the clip edge than --tr-caps can push it. */
+table th:last-child { padding-right: calc(var(--space-2-75) + var(--tr-caps, 0px)); }
 table td { padding: calc(var(--space-2) * var(--density)) var(--space-2-75); border-top: 1px solid var(--rule); }
 table tr.clickable { cursor: pointer; }
 table tr.clickable:hover td { background: var(--bg-2); }

package/src/css/app-shell/states-interactions.css

@@ -422,6 +422,40 @@ hr.rule-dotted { border-top: 1px dotted var(--rule-strong); }
   border-bottom-color: var(--accent-ink);
 }
 
+/* Switch primitive (form-primitives.js Toggle) -- track + sliding knob.
+   Previously unstyled anywhere in this repo (a bare button with no visible
+   affordance), so every real consumer resorted to a local literal-bracket-
+   text reimplementation ('[x] on'/'[ ] off') instead. Sized off --space
+   tokens: a 40x22 track (2x11 knob diameter + 2px inset each side) is the
+   standard iOS/Material switch proportion, not an arbitrary literal. */
+.ds-toggle {
+  appearance: none; -webkit-appearance: none;
+  display: inline-flex; align-items: center; flex-shrink: 0;
+  width: 40px; height: 22px; padding: 2px;
+  border: 1px solid var(--rule-strong); border-radius: var(--r-pill, 999px);
+  background: var(--bg-3); box-shadow: none; cursor: pointer;
+  transition: background-color var(--dur-snap) var(--ease), border-color var(--dur-snap) var(--ease);
+}
+.ds-toggle-knob {
+  width: 16px; height: 16px; border-radius: 50%;
+  background: var(--fg-3);
+  transition: transform var(--dur-snap) var(--ease), background-color var(--dur-snap) var(--ease);
+}
+.ds-toggle[aria-checked="true"] {
+  background: var(--accent-ink); border-color: var(--accent-ink);
+}
+.ds-toggle[aria-checked="true"] .ds-toggle-knob {
+  background: var(--panel-0, #fff);
+  transform: translateX(18px);
+}
+.ds-toggle:disabled { opacity: 0.5; cursor: not-allowed; }
+.ds-toggle:focus-visible {
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
+}
+.ds-toggle-row { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
+.ds-toggle-row .ds-toggle-label { color: inherit; }
+
 /* -- Field controls: themed base for TextField / Select / SearchInput --
    Root fix: previously only `transition` was set, so themed apps got
    browser-default white boxes in dark mode and labels collided with inputs