staffa 0.9.0 → 0.10.1

package/dist/components/tabs.d.ts

@@ -12,6 +12,15 @@ export interface Tab {
     /** Disables selecting this tab. */
     disabled?: boolean;
 }
+/** Options for {@link scrollStrip}. */
+export interface ScrollStripOptions {
+    /** The row's content, laid out left to right. */
+    content: Slot;
+    /** Aberdeen attr/style string applied to the outer element. */
+    attrs?: Attributes;
+    /** Aberdeen attr/style string applied to the scrolling row itself. */
+    stripAttrs?: Attributes;
+}
 /** Options for {@link tabs}. */
 export interface TabsOptions {
     /** Aberdeen attr/style string applied to the outermost element. */
@@ -26,6 +35,34 @@ export interface TabsOptions {
     /** Aberdeen attr/style string applied to the active panel. */
     contentAttrs?: Attributes;
 }
+/**
+ * A horizontal row that scrolls when its content outgrows it, with a ‹ / ›
+ * button appearing over whichever end still has something left to reach — a
+ * bare scroll area says nothing about itself to a mouse, and a scrollbar under
+ * a row of chrome reads as a mistake. The row's own scrollbar is hidden, and
+ * the buttons scroll it by most of a width at a time.
+ *
+ * This is what {@link tabs} puts its tab strip in, and what the routed
+ * {@link main} shell puts its breadcrumb stack in. Reach for it for any row of
+ * chrome that can outgrow its space: a filter bar, a row of chips, a toolbar.
+ * To bring one of its children into view — after selecting it from elsewhere,
+ * say — call {@link revealInStrip} with that child.
+ *
+ * @example
+ * ```ts
+ * S.scrollStrip({
+ *   attrs: "gap:$1",
+ *   content: () => { for (const tag of tags) S.button({ content: tag, attrs: ".small" }); },
+ * });
+ * ```
+ */
+export declare function scrollStrip(opts: ScrollStripOptions): void;
+/**
+ * Scroll `el`'s {@link scrollStrip} just far enough to bring it into view,
+ * clearing the buttons that overlay the row's ends. Does nothing when `el`
+ * isn't in a strip, or is already comfortably visible.
+ */
+export declare function revealInStrip(el: HTMLElement): void;
 /**
  * A tabbed view. Renders an ARIA `tablist` of buttons and a single live panel
  * for the selected tab. Supports keyboard navigation (left/right/home/end).

package/dist/components/tabs.js

@@ -7,24 +7,43 @@ import { mk } from "../icons-helpers.js";
 const chevronLeft = mk('<path d="m15 18-6-6 6-6"/>');
 const chevronRight = mk('<path d="m9 18 6-6-6-6"/>');
 A.insertGlobalCss({
-    ".s-tabs": {
-        "&": "display:flex flex-direction:column gap:$3",
-        // The bar owns the hairline (so it runs the full width, under the scroll
-        // buttons too) and is the positioning context they overlay from.
-        ".s-tabbar": "position:relative display:flex border-bottom: 1px solid $s-faint;",
-        // The strip scrolls horizontally when the tabs outgrow it. Its own scrollbar
-        // is hidden — a raw scrollbar under a tab row reads as a mistake — so the
-        // affordance is the pair of buttons below, plus the fade they sit in.
+    // A row that scrolls sideways once its content outgrows it, with a ‹ / ›
+    // button appearing over whichever end still has something to reach. Its own
+    // scrollbar is hidden — a raw scrollbar under a row of chrome reads as a
+    // mistake — so those buttons, and the fade they sit in, are the affordance.
+    // Shared by `tabs()` and the shell's breadcrumb stack; see `scrollStrip()`.
+    ".s-strip": {
+        // The positioning context the buttons overlay from.
+        "&": "position:relative display:flex min-width:0",
         // `overflow-y:hidden` is load-bearing: `overflow-x:auto` alone forces the
         // computed `overflow-y` off `visible`, which turned the active tab's 1px
         // overhang into a stray couple of pixels of *vertical* scroll.
-        ".s-tablist": "display:flex gap:$1 align-items:stretch flex:1 min-width:0 " +
-            "overflow-x:auto overflow-y:hidden scrollbar-width:none scroll-behavior:smooth " +
+        "> .s-strip-row": "display:flex align-items:center flex:1 min-width:0 " +
+            "overflow-x:auto overflow-y:hidden scrollbar-width:none scroll-behavior:smooth",
+        "> .s-strip-row::-webkit-scrollbar": "display:none",
+        // The buttons overlay the row's ends rather than sitting beside it, so no
+        // width is reserved when there's nothing to scroll — and the content slides
+        // out from under a fade instead of stopping at a hard edge.
+        "> .s-strip-btn": "position:absolute top:0 bottom:0 z-index:1 display:none align-items:center justify-content:center " +
+            "width:2.4em border:0 padding:0 cursor:pointer fg:$s-muted " +
+            "transition: color 0.15s;",
+        "> .s-strip-btn:hover": "fg:$s-text",
+        "> .s-strip-btn-left": "left:0 justify-content:flex-start background: linear-gradient(to right, $s-bg 45%, transparent)",
+        "> .s-strip-btn-right": "right:0 justify-content:flex-end background: linear-gradient(to left, $s-bg 45%, transparent)",
+        // Shown only for the direction there is actually something to scroll towards,
+        // so the pair doubles as a position indicator.
+        "&.s-can-left > .s-strip-btn-left, &.s-can-right > .s-strip-btn-right": "display:flex",
+    },
+    ".s-tabs": {
+        "&": "display:flex flex-direction:column gap:$3",
+        // The bar owns the hairline, so it runs the full width — under the scroll
+        // buttons too.
+        ".s-tabbar": "border-bottom: 1px solid $s-faint;",
+        ".s-tablist": "gap:$1 align-items:stretch " +
             // Pulls the strip 1px down over the bar's hairline, so the active tab's
             // underline lands *on* it rather than stacking above it. On the strip, not
             // the tabs: a negative margin inside a scroll container is overflow.
             "margin-bottom:-1px",
-        ".s-tablist::-webkit-scrollbar": "display:none",
         ".s-tab": "display:inline-flex align-items:center gap:$2 cursor:pointer background:transparent " +
             "border:0 color: $s-muted; font-weight:600 padding: 0.6em 0.9em; white-space:nowrap " +
             "border-bottom: 3px solid transparent; " +
@@ -34,21 +53,56 @@ A.insertGlobalCss({
         // painting, and an outset ring on the first/last tab would be shaved off.
         ".s-tab:focus-visible": "outline:none box-shadow: inset 0 0 0 2px $s-focus; r: $s-radius;",
         ".s-tab[aria-selected=true]": "border-image: $s-gradient 1;",
-        // The scroll buttons overlay the strip's ends rather than sitting beside it,
-        // so no width is reserved when there's nothing to scroll — and the tabs slide
-        // out from under a fade instead of stopping at a hard edge.
-        ".s-tabscroll": "position:absolute top:0 bottom:0 z-index:1 display:none align-items:center justify-content:center " +
-            "width:2.4em border:0 padding:0 cursor:pointer fg:$s-muted " +
-            "transition: color 0.15s;",
-        ".s-tabscroll:hover": "fg:$s-text",
-        ".s-tabscroll-left": "left:0 justify-content:flex-start background: linear-gradient(to right, $s-bg 45%, transparent)",
-        ".s-tabscroll-right": "right:0 justify-content:flex-end background: linear-gradient(to left, $s-bg 45%, transparent)",
-        // Shown only for the direction there is actually something to scroll towards,
-        // so the pair doubles as a position indicator.
-        ".s-tabbar.s-can-left > .s-tabscroll-left, .s-tabbar.s-can-right > .s-tabscroll-right": "display:flex",
         ".s-tabpanel": "display:block",
     },
 });
+/**
+ * A horizontal row that scrolls when its content outgrows it, with a ‹ / ›
+ * button appearing over whichever end still has something left to reach — a
+ * bare scroll area says nothing about itself to a mouse, and a scrollbar under
+ * a row of chrome reads as a mistake. The row's own scrollbar is hidden, and
+ * the buttons scroll it by most of a width at a time.
+ *
+ * This is what {@link tabs} puts its tab strip in, and what the routed
+ * {@link main} shell puts its breadcrumb stack in. Reach for it for any row of
+ * chrome that can outgrow its space: a filter bar, a row of chips, a toolbar.
+ * To bring one of its children into view — after selecting it from elsewhere,
+ * say — call {@link revealInStrip} with that child.
+ *
+ * @example
+ * ```ts
+ * S.scrollStrip({
+ *   attrs: "gap:$1",
+ *   content: () => { for (const tag of tags) S.button({ content: tag, attrs: ".small" }); },
+ * });
+ * ```
+ */
+export function scrollStrip(opts) {
+    A("div.s-strip", opts.attrs, () => {
+        const row = A("div.s-strip-row", opts.stripAttrs, () => drawSlot(opts.content));
+        drawScrollButton(row, -1);
+        drawScrollButton(row, 1);
+        watchScroll(row);
+    });
+}
+/**
+ * Scroll `el`'s {@link scrollStrip} just far enough to bring it into view,
+ * clearing the buttons that overlay the row's ends. Does nothing when `el`
+ * isn't in a strip, or is already comfortably visible.
+ */
+export function revealInStrip(el) {
+    const row = el.parentElement;
+    if (!row || !el.isConnected)
+        return;
+    // The overlays are 2.4em wide; clearing a little more than that keeps the
+    // revealed item from sitting right against one.
+    const pad = parseFloat(getComputedStyle(row).fontSize) * 2.6;
+    const box = el.getBoundingClientRect(), strip = row.getBoundingClientRect();
+    if (box.left < strip.left + pad)
+        row.scrollBy({ left: box.left - strip.left - pad, behavior: "smooth" });
+    else if (box.right > strip.right - pad)
+        row.scrollBy({ left: box.right - strip.right + pad, behavior: "smooth" });
+}
 /**
  * A tabbed view. Renders an ARIA `tablist` of buttons and a single live panel
  * for the selected tab. Supports keyboard navigation (left/right/home/end).
@@ -82,12 +136,14 @@ export function tabs(opts) {
         $sel.value = keyOf(tab, index);
     };
     A("div.s-tabs", opts.attrs, () => {
-        A("div.s-tabbar", () => {
-            const listEl = A("div.s-tablist role=tablist", () => {
+        scrollStrip({
+            attrs: ".s-tabbar",
+            stripAttrs: ".s-tablist role=tablist",
+            content: () => {
                 opts.tabs.forEach((tab, index) => {
                     const key = keyOf(tab, index);
                     const tabEl = A("button.s-tab type=button role=tab", () => {
-                        A(`id=${groupId}-tab-${key} aria-controls=${groupId}-panel-${key}`);
+                        A("id=", `${groupId}-tab-${key}`, "aria-controls=", `${groupId}-panel-${key}`);
                         A(() => {
                             const selected = $sel.value === key;
                             A("aria-selected=", selected ? "true" : "false");
@@ -96,7 +152,7 @@ export function tabs(opts) {
                             // view, so the strip follows the selection however it was made:
                             // a click, the arrow keys, or a `bind` written from elsewhere.
                             if (selected)
-                                requestAnimationFrame(() => reveal(tabEl));
+                                requestAnimationFrame(() => revealInStrip(tabEl));
                         });
                         if (tab.disabled)
                             A("disabled=true");
@@ -106,10 +162,7 @@ export function tabs(opts) {
                         drawSlot(tab.label);
                     });
                 });
-            });
-            drawScrollButton(listEl, -1);
-            drawScrollButton(listEl, 1);
-            watchScroll(listEl);
+            },
         });
         A("div.s-tabpanel role=tabpanel", opts.contentAttrs, () => {
             A(() => {
@@ -118,69 +171,75 @@ export function tabs(opts) {
                 const tab = opts.tabs[index] ?? opts.tabs[0];
                 if (!tab)
                     return;
-                A(`id=${groupId}-panel-${keyOf(tab, index)} aria-labelledby=${groupId}-tab-${keyOf(tab, index)}`);
+                A("id=", `${groupId}-panel-${keyOf(tab, index)}`, "aria-labelledby=", `${groupId}-tab-${keyOf(tab, index)}`);
                 drawSlot(tab.content);
             });
         });
     });
 }
 /**
- * One of the two scroll buttons overlaying the ends of the strip. `dir` is -1 for
- * the left one and 1 for the right. A page at a time (not a tab at a time): the
- * strip scrolls smoothly, so a nudge that moved one tab would read as a twitch.
+ * One of the two scroll buttons overlaying the ends of the row. `dir` is -1 for
+ * the left one and 1 for the right. Most of a width at a time (not one item at a
+ * time): the row scrolls smoothly, so a nudge that moved a single tab or crumb
+ * would read as a twitch.
  */
-function drawScrollButton(list, dir) {
-    A(`button.s-tabscroll.s-tabscroll-${dir < 0 ? "left" : "right"} type=button`, () => {
-        // The tabs themselves are the real control; this is a convenience the strip
-        // offers a mouse. Keeping it out of the tab order means Tab still steps from
-        // the tablist straight into the panel.
+function drawScrollButton(row, dir) {
+    A(`button.s-strip-btn.s-strip-btn-${dir < 0 ? "left" : "right"} type=button`, () => {
+        // The row's own items are the real control; this is a convenience it offers
+        // a mouse. Keeping it out of the tab order means Tab still steps from the
+        // row straight into whatever follows.
         A("tabindex=-1 aria-hidden=true");
-        A("click=", () => list.scrollBy({ left: dir * list.clientWidth * 0.8, behavior: "smooth" }));
+        A("click=", () => row.scrollBy({ left: dir * row.clientWidth * 0.8, behavior: "smooth" }));
         (dir < 0 ? chevronLeft : chevronRight)({ size: "1.1em" });
     });
 }
 /**
- * Keep the `.s-can-left` / `.s-can-right` classes on the bar in step with what
+ * Keep the `.s-can-left` / `.s-can-right` classes on the strip in step with what
  * there is left to scroll towards, so each button appears exactly when it has
- * somewhere to go. Watches the strip's own scrolling *and* its size (a resize, or
- * tabs being added or removed, changes the answer without any scrolling at all).
+ * somewhere to go. Watches the row's own scrolling *and* its size — and its
+ * children's, since items arriving or leaving (a pushed page's crumb, a tab)
+ * changes the answer without any scrolling at all.
  */
-function watchScroll(list) {
-    const bar = list.parentElement;
-    if (!bar || typeof ResizeObserver === "undefined")
+function watchScroll(row) {
+    const strip = row.parentElement;
+    if (!strip || typeof ResizeObserver === "undefined")
         return; // No-op outside the browser.
     const update = () => {
         // A sub-pixel slack: fractional layout widths otherwise leave a permanent
         // half-pixel of "scrollable" at an end that is plainly already reached.
-        const max = list.scrollWidth - list.clientWidth;
-        bar.classList.toggle("s-can-left", list.scrollLeft > 1);
-        bar.classList.toggle("s-can-right", list.scrollLeft < max - 1);
+        const max = row.scrollWidth - row.clientWidth;
+        strip.classList.toggle("s-can-left", row.scrollLeft > 1);
+        strip.classList.toggle("s-can-right", row.scrollLeft < max - 1);
     };
-    list.addEventListener("scroll", update, { passive: true });
+    row.addEventListener("scroll", update, { passive: true });
     const ro = new ResizeObserver(update);
-    ro.observe(list);
-    for (const tab of Array.from(list.children))
-        ro.observe(tab);
+    ro.observe(row);
+    // The children are watched through one observer that follows the row's live
+    // contents, so a strip whose items come and go keeps answering correctly.
+    // Removed children are unobserved: a strip whose items churn (the breadcrumb
+    // row redraws on navigation) would otherwise grow the observation list — and
+    // retain the detached elements — without bound.
+    const mo = typeof MutationObserver === "undefined" ? undefined : new MutationObserver((records) => {
+        for (const record of records) {
+            for (const el of record.addedNodes)
+                if (el instanceof Element)
+                    ro.observe(el);
+            for (const el of record.removedNodes)
+                if (el instanceof Element)
+                    ro.unobserve(el);
+        }
+        update();
+    });
+    mo?.observe(row, { childList: true });
+    for (const kid of Array.from(row.children))
+        ro.observe(kid);
     update();
     A.clean(() => {
-        list.removeEventListener("scroll", update);
+        row.removeEventListener("scroll", update);
         ro.disconnect();
+        mo?.disconnect();
     });
 }
-/** Scroll `el`'s strip just far enough to clear the buttons overlaying its ends. */
-function reveal(el) {
-    const list = el.parentElement;
-    if (!list || !el.isConnected)
-        return;
-    // The overlays are 2.4em wide; clearing a little more than that keeps the tab
-    // from sitting right against one.
-    const pad = parseFloat(getComputedStyle(list).fontSize) * 2.6;
-    const tab = el.getBoundingClientRect(), strip = list.getBoundingClientRect();
-    if (tab.left < strip.left + pad)
-        list.scrollBy({ left: tab.left - strip.left - pad, behavior: "smooth" });
-    else if (tab.right > strip.right - pad)
-        list.scrollBy({ left: tab.right - strip.right + pad, behavior: "smooth" });
-}
 /** Roving-tabindex keyboard handling for the tab strip. */
 function onKey(e, list, index, select) {
     let next = index;

package/dist/core.d.ts

@@ -51,7 +51,7 @@ export interface ContentOptions {
 }
 /**
  * Shell width — not viewport width — at or below which the app shell goes
- * "narrow": the nav sidebar collapses to a hamburger, and a routed panel stack
+ * "narrow": the nav sidebar collapses to a hamburger, and a routed shell
  * has room for exactly one full-bleed column. Shared by the `@container` queries
  * that do the switching and by the JS that has to agree with them.
  */

package/dist/core.js

@@ -1,7 +1,7 @@
 import A from "aberdeen";
 /**
  * Shell width — not viewport width — at or below which the app shell goes
- * "narrow": the nav sidebar collapses to a hamburger, and a routed panel stack
+ * "narrow": the nav sidebar collapses to a hamburger, and a routed shell
  * has room for exactly one full-bleed column. Shared by the `@container` queries
  * that do the switching and by the JS that has to agree with them.
  */

package/dist/glyphs.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The handful of glyphs Staffa's own chrome draws: the nav trigger, the ✕ that
+ * dismisses things, the « that leaves a panel.
+ *
+ * They are inline SVG (built with the icon set's own helper, so no icon data is
+ * pulled in) rather than the `☰`/`✕`/`«` characters, because a text glyph is at
+ * the mercy of the system font: it lands thin and undersized next to a real
+ * icon, and a font without it renders an empty box instead. Each matches its
+ * Lucide counterpart exactly, so shell chrome sits beside an app's icons as an
+ * equal.
+ */
+/** `☰` — Lucide `menu`. Opens a menu, or the collapsed nav. */
+export declare const menuGlyph: (opts?: import("./icons-helpers.js").IconOptions) => void;
+/** `✕` — Lucide `x`. Dismisses a panel, a box, or whatever the {@link menuGlyph} opened. */
+export declare const closeGlyph: (opts?: import("./icons-helpers.js").IconOptions) => void;
+/**
+ * `«` — Lucide `chevrons-left`. Leaves the top panel: on a narrow shell it takes
+ * the {@link menuGlyph}'s place in the top bar, since at depth you go back first
+ * and navigate after. A chevron pair rather than an arrow, so it reads as
+ * *back out of here* beside the single chevrons a pager uses for prev/next.
+ */
+export declare const backGlyph: (opts?: import("./icons-helpers.js").IconOptions) => void;
+/** `›` — Lucide `chevron-right`. Separates the top bar's breadcrumbs. */
+export declare const chevronGlyph: (opts?: import("./icons-helpers.js").IconOptions) => void;

package/dist/glyphs.js

@@ -0,0 +1,25 @@
+import { mk } from "./icons-helpers.js";
+/**
+ * The handful of glyphs Staffa's own chrome draws: the nav trigger, the ✕ that
+ * dismisses things, the « that leaves a panel.
+ *
+ * They are inline SVG (built with the icon set's own helper, so no icon data is
+ * pulled in) rather than the `☰`/`✕`/`«` characters, because a text glyph is at
+ * the mercy of the system font: it lands thin and undersized next to a real
+ * icon, and a font without it renders an empty box instead. Each matches its
+ * Lucide counterpart exactly, so shell chrome sits beside an app's icons as an
+ * equal.
+ */
+/** `☰` — Lucide `menu`. Opens a menu, or the collapsed nav. */
+export const menuGlyph = mk('<path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h16"/>');
+/** `✕` — Lucide `x`. Dismisses a panel, a box, or whatever the {@link menuGlyph} opened. */
+export const closeGlyph = mk('<path d="M18 6 6 18"/><path d="m6 6 12 12"/>');
+/**
+ * `«` — Lucide `chevrons-left`. Leaves the top panel: on a narrow shell it takes
+ * the {@link menuGlyph}'s place in the top bar, since at depth you go back first
+ * and navigate after. A chevron pair rather than an arrow, so it reads as
+ * *back out of here* beside the single chevrons a pager uses for prev/next.
+ */
+export const backGlyph = mk('<path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/>');
+/** `›` — Lucide `chevron-right`. Separates the top bar's breadcrumbs. */
+export const chevronGlyph = mk('<path d="m9 18 6-6-6-6"/>');

package/dist/index.d.ts

@@ -32,17 +32,17 @@
 export { setDarkMode, getDarkMode } from "./theme.js";
 export { autocomplete, type AutocompleteOptions, type AutocompleteOptionInput } from "./components/autocomplete.js";
 export { box, type BoxOptions } from "./components/box.js";
-export { button, type ButtonOptions } from "./components/button.js";
+export { button, iconButton, type ButtonOptions, type IconButtonOptions } from "./components/button.js";
 export { buttonChooser, type ButtonChooserOptions } from "./components/buttonChooser.js";
 export { buttonGroup, type ButtonGroupOptions } from "./components/buttonGroup.js";
 export { checkbox, type CheckboxOptions } from "./components/checkbox.js";
 export { form, type FormOptions } from "./components/form.js";
 export { main, closeNav, type MainOptions } from "./components/main.js";
-export { panels, type Page, type Routes, type RouteHandler, type RouteTable, type AncestorsHandler, type AncestorTable, type PathParams, type SegParams } from "./components/panels.js";
-export { menuButton, showFloatingMenu, addContextMenu, isFloatingMenuOpen, closeFloatingMenu, type MenuOptions, type MenuEntry, type MenuItem, type MenuSeparator, type FloatingMenuOptions, type ContextMenuOptions } from "./components/menu.js";
+export { type PanelStack, type Panel, type Routes, type RouteHandler, type RouteTable, type AncestorsHandler, type AncestorTable, type PathParams, type SegParams } from "./components/panels.js";
+export { menu, menuButton, showFloatingMenu, addContextMenu, isFloatingMenuOpen, closeFloatingMenu, type MenuListOptions, type MenuOptions, type MenuEntry, type MenuItem, type MenuSeparator, type FloatingMenuOptions, type ContextMenuOptions } from "./components/menu.js";
 export { dialog, alert, confirm, prompt, isDialogOpen, type DialogOptions } from "./components/dialog.js";
 export { select, type SelectOptions, type SelectOptionInput } from "./components/select.js";
-export { tabs, type Tab, type TabsOptions } from "./components/tabs.js";
+export { tabs, scrollStrip, revealInStrip, type Tab, type TabsOptions, type ScrollStripOptions } from "./components/tabs.js";
 export { textarea, type TextareaOptions } from "./components/textarea.js";
 export { textline, type TextlineOptions, type TextlineType } from "./components/textline.js";
 export { toast, type ToastOptions } from "./components/toast.js";

package/dist/index.js

@@ -35,17 +35,16 @@
 export { setDarkMode, getDarkMode } from "./theme.js";
 export { autocomplete } from "./components/autocomplete.js";
 export { box } from "./components/box.js";
-export { button } from "./components/button.js";
+export { button, iconButton } from "./components/button.js";
 export { buttonChooser } from "./components/buttonChooser.js";
 export { buttonGroup } from "./components/buttonGroup.js";
 export { checkbox } from "./components/checkbox.js";
 export { form } from "./components/form.js";
 export { main, closeNav } from "./components/main.js";
-export { panels } from "./components/panels.js";
-export { menuButton, showFloatingMenu, addContextMenu, isFloatingMenuOpen, closeFloatingMenu } from "./components/menu.js";
+export { menu, menuButton, showFloatingMenu, addContextMenu, isFloatingMenuOpen, closeFloatingMenu } from "./components/menu.js";
 export { dialog, alert, confirm, prompt, isDialogOpen } from "./components/dialog.js";
 export { select } from "./components/select.js";
-export { tabs } from "./components/tabs.js";
+export { tabs, scrollStrip, revealInStrip } from "./components/tabs.js";
 export { textarea } from "./components/textarea.js";
 export { textline } from "./components/textline.js";
 export { toast } from "./components/toast.js";