@0001-labs/design-system-1 0.3.0-alpha.28 → 0.3.1

package/dist/3-unit/ds-row.js

@@ -2,6 +2,7 @@ import { LitElement, html, unsafeCSS } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 import styles from "./styles/ds-row.css?inline";
 import { define } from "../0-face/define";
+import { CutFades } from "../0-face/cut-fade";
 /** The values `aria-current` takes besides `page`. */
 const CURRENT = new Set(["page", "step", "location", "date", "time", "true"]);
 /**
@@ -28,6 +29,14 @@ const CURRENT = new Set(["page", "step", "location", "date", "time", "true"]);
  * @attr label - The accessible name, when the row's words do not say it.
  * @attr target - Where a link opens (`_blank`, …).
  * @attr rel - The link's relationship (`noopener`, …).
+ * A record's row puts its parts in classes: `ds-row__name` for the words,
+ * which hug and give way first, and `ds-row__value` for the figure or date at
+ * the row's end; a 16px picture (an avatar tile, a large icon) before the
+ * name stands on its square with the row's gap putting the words on the next.
+ * The element measures each name and marks it `data-cut="end"` while its
+ * words do not fit, so the stylesheet fades them over the last square, never
+ * an ellipsis; a `ds-text literal` name fades the same way.
+ *
  * @slot - The row's content, inside its press target.
  * @slot end - Controls of their own after the content, outside the press target.
  * @fires ds-row-press - `{ href }`: the row was pressed. Cancel it to route a link yourself; a modified click on a link is left to the browser.
@@ -36,6 +45,10 @@ const CURRENT = new Set(["page", "step", "location", "date", "time", "true"]);
 export class Row extends LitElement {
     constructor() {
         super();
+        /** Marks each `.ds-row__name` `data-cut="end"` while its words are wider than its box, measured again as they resize or change. */
+        this.cuts = new CutFades(this, { targets: () => this.querySelectorAll(":scope > .ds-row__name"), text: true });
+        /** Measures the names again, as when the slotted content changes. */
+        this.measureNames = () => this.cuts.measure();
         this.fill = false;
         this.centered = false;
         this.end = false;
@@ -80,10 +93,10 @@ export class Row extends LitElement {
     }
     render() {
         if (!this.href && !this.interactive)
-            return html `<slot></slot>`;
+            return html `<slot @slotchange=${this.measureNames}></slot>`;
         const current = this.currentValue;
         const label = this.label || undefined;
-        const content = html `<slot></slot>`;
+        const content = html `<slot @slotchange=${this.measureNames}></slot>`;
         const target = this.href
             ? this.disabled
                 ? html `<a class="target" part="target" role="link" aria-disabled="true" aria-label=${ifDefined(label)}>${content}</a>`

package/dist/3-unit/ds-select.js

@@ -1,7 +1,7 @@
 import { html, nothing, unsafeCSS } from "lit";
 import { define } from "../0-face/define";
 import { shortcutLabel } from "../0-face/keys";
-import down from "../x-icon/down.svg?raw";
+import down from "../x-icon/chevron-down.svg?raw";
 import check from "../x-icon/check.svg?raw";
 import menuStyles from "./styles/ds-menu.css?inline";
 import styles from "./styles/ds-select.css?inline";

package/dist/3-unit/ds-sidebar.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from "lit";
+import { CutFades } from "../0-face/cut-fade";
 import "../0-face/tooltips";
 import "../2-core/ds-button";
 import "../2-core/ds-icon";
@@ -22,6 +23,8 @@ export interface SidebarItem {
     disabled?: boolean;
     /** Small muted words at the row's end: a count, a size. */
     meta?: string;
+    /** Small muted words just after the label, read with it: a version. */
+    detail?: string;
     /** Optional application content following this navigation row. */
     afterSlot?: string;
     action?: {
@@ -53,9 +56,15 @@ export interface SidebarMoveDetail {
  * `0-face/sidebar.ts`). The application keeps the rows: it passes the
  * visible ones in `items`, in order, and answers the events.
  *
+ * With `narrow`, the navigation is eight squares wide and each row hugs its
+ * words: the pointer's and the current row's fill wraps the label, its meta
+ * and its disclosure, 4px either side, instead of running across the column.
+ * For an application's few places beside its work.
+ *
  * @element ds-sidebar
  * @attr label - The navigation's or the tree's accessible name.
  * @attr tree - A tree of nested things instead of navigation.
+ * @attr narrow - Navigation eight squares wide, each row hugging its words.
  * @fires sidebar-toggle - `{ id, expanded }`: a row asks to open or close.
  * @fires sidebar-activate - `{ id }`: a row was pressed (navigation), or Enter or a double click opened one (a tree).
  * @fires sidebar-select - `{ id }`: a click, Space or Enter chose a tree row.
@@ -89,6 +98,10 @@ export declare class Sidebar extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        narrow: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         reorderable: {
             type: BooleanConstructor;
             reflect: boolean;
@@ -103,9 +116,13 @@ export declare class Sidebar extends LitElement {
     /** Place navigation disclosures before the label; default preserves trailing disclosures. */
     disclosurePosition?: "start" | "end";
     tree: boolean;
+    /** Eight squares wide, each row hugging its words (navigation only). */
+    narrow: boolean;
     reorderable: boolean;
     private dragId?;
     static styles: import("lit").CSSResult;
+    /** Words cut short fade over their last square, never an ellipsis: marks them `data-cut="end"` while they do not fit. */
+    protected readonly cuts: CutFades;
     /** In a tree, the row that holds the Tab stop. */
     private focusId?;
     constructor();

package/dist/3-unit/ds-sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-sidebar.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-sidebar.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ds-sidebar.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-sidebar.ts"],"names":[],"mappings":"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"}

package/dist/3-unit/ds-sidebar.js

@@ -2,6 +2,7 @@ import { LitElement, html, nothing, unsafeCSS } from "lit";
 import { repeat } from "lit/directives/repeat.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { define } from "../0-face/define";
+import { CutFades } from "../0-face/cut-fade";
 import { treeStep } from "../0-face/sidebar";
 import "../0-face/tooltips";
 import "../2-core/ds-button";
@@ -23,9 +24,15 @@ import styles from "./styles/ds-sidebar.css?inline";
  * `0-face/sidebar.ts`). The application keeps the rows: it passes the
  * visible ones in `items`, in order, and answers the events.
  *
+ * With `narrow`, the navigation is eight squares wide and each row hugs its
+ * words: the pointer's and the current row's fill wraps the label, its meta
+ * and its disclosure, 4px either side, instead of running across the column.
+ * For an application's few places beside its work.
+ *
  * @element ds-sidebar
  * @attr label - The navigation's or the tree's accessible name.
  * @attr tree - A tree of nested things instead of navigation.
+ * @attr narrow - Navigation eight squares wide, each row hugging its words.
  * @fires sidebar-toggle - `{ id, expanded }`: a row asks to open or close.
  * @fires sidebar-activate - `{ id }`: a row was pressed (navigation), or Enter or a double click opened one (a tree).
  * @fires sidebar-select - `{ id }`: a click, Space or Enter chose a tree row.
@@ -34,11 +41,14 @@ import styles from "./styles/ds-sidebar.css?inline";
 export class Sidebar extends LitElement {
     constructor() {
         super();
+        /** Words cut short fade over their last square, never an ellipsis: marks them `data-cut="end"` while they do not fit. */
+        this.cuts = new CutFades(this, { selector: ".name, .tree .label" });
         this.fontsReady = false;
         this.items = [];
         this.label = "Navigation";
         this.empty = "No items";
         this.tree = false;
+        this.narrow = false;
         this.reorderable = false;
     }
     connectedCallback() {
@@ -189,7 +199,7 @@ export class Sidebar extends LitElement {
           @focus=${() => { this.focusId = item.id; }}>
           <span class="disclosure" aria-hidden="true">${item.expanded === undefined ? nothing : html `<ds-icon type="right" ?data-open=${item.expanded}></ds-icon>`}</span>
           ${item.icon ? html `<span class="icon" aria-hidden="true"><ds-icon type=${item.icon}></ds-icon></span>` : nothing}
-          <span class="label">${item.label}</span>
+          <span class="label">${item.label}${item.detail ? html `<span class="detail">${item.detail}</span>` : nothing}</span>
           ${item.meta ? html `<span class="meta">${item.meta}</span>` : nothing}
         </div>`;
         })}
@@ -309,12 +319,12 @@ export class Sidebar extends LitElement {
             ${item.href && !item.disabled ? html `
               <a href=${item.href} draggable=${ifDefined(this.reorderable ? "false" : undefined)} data-item=${item.id} aria-current=${ifDefined(item.current ? "page" : undefined)}
                 @click=${(event) => this.activate(event, item)}
-                @keydown=${(event) => this.navigate(event, item)}><span class="name">${item.icon ? html `<ds-icon type=${item.icon} aria-hidden="true"></ds-icon>` : nothing}${item.label}</span></a>` : html `
+                @keydown=${(event) => this.navigate(event, item)}><span class="name">${item.icon ? html `<ds-icon type=${item.icon} aria-hidden="true"></ds-icon>` : nothing}${item.label}${item.detail ? html `<span class="detail">${item.detail}</span>` : nothing}</span></a>` : html `
               <button type="button" data-item=${item.id} ?disabled=${item.disabled}
                 aria-expanded=${ifDefined(item.expanded === undefined ? undefined : String(item.expanded))}
                 aria-current=${ifDefined(item.current ? "page" : undefined)}
                 @click=${(event) => this.activate(event, item)}
-                @keydown=${(event) => this.navigate(event, item)}><span class="name">${item.icon ? html `<ds-icon type=${item.icon} aria-hidden="true"></ds-icon>` : nothing}${item.label}</span></button>`}
+                @keydown=${(event) => this.navigate(event, item)}><span class="name">${item.icon ? html `<ds-icon type=${item.icon} aria-hidden="true"></ds-icon>` : nothing}${item.label}${item.detail ? html `<span class="detail">${item.detail}</span>` : nothing}</span></button>`}
           </ds-button>
           ${this.disclosurePosition !== "start" ? this.renderDisclosure(item) : nothing}
           <span class="spacer" aria-hidden="true"></span>
@@ -336,6 +346,7 @@ Sidebar.properties = {
     collapseIcon: { type: String, attribute: "collapse-icon" },
     disclosurePosition: { type: String, attribute: "disclosure-position", reflect: true },
     tree: { type: Boolean, reflect: true },
+    narrow: { type: Boolean, reflect: true },
     reorderable: { type: Boolean, reflect: true },
 };
 Sidebar.styles = unsafeCSS(styles);

package/dist/3-unit/ds-table-of-contents.d.ts

@@ -0,0 +1,68 @@
+import { LitElement } from 'lit';
+import { CutFades } from '../0-face/cut-fade';
+import '../0-face/tooltips';
+import '../2-core/ds-text';
+export interface TableOfContentsItem {
+    href: string;
+    label: string;
+    depth?: number;
+}
+/** A page's section links. Placement belongs to the page, not this Unit.
+ * Supply items or slot native anchors with data-depth. Same-page links track
+ * their headings inside the actual scrolling container, including a shadow root.
+ * @element ds-table-of-contents
+ * @fires toc-change - { href }: the section in view changed.
+ */
+export declare class TableOfContents extends LitElement {
+    static properties: {
+        items: {
+            attribute: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        literal: {
+            type: BooleanConstructor;
+        };
+        target: {
+            attribute: boolean;
+        };
+        current: {
+            state: boolean;
+        };
+    };
+    static styles: import("lit").CSSResult;
+    /** A cut label fades over its last square, never an ellipsis: marks it `data-cut="end"` while it does not fit. */
+    protected readonly cuts: CutFades;
+    items: TableOfContentsItem[];
+    label: string;
+    literal: boolean;
+    /** Optional content scope, especially when the contents stand inside another component's shadow. */
+    target?: HTMLElement;
+    current: string;
+    private links;
+    private sections;
+    private scroller;
+    private frame;
+    private observer?;
+    private resize?;
+    private readonly relabel;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<PropertyKey, unknown>): void;
+    private destination;
+    /** Read links and targets again after replacing content or moving the Unit. */
+    refresh(): void;
+    private schedule;
+    private track;
+    private mark;
+    private follow;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-table-of-contents': TableOfContents;
+    }
+}
+//# sourceMappingURL=ds-table-of-contents.d.ts.map

package/dist/3-unit/ds-table-of-contents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-table-of-contents.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-table-of-contents.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAC;AAE3D,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,mBAAmB,CAAC;AAG3B,MAAM,WAAW,mBAAmB;IAAG,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CAAE;AAErF;;;;;GAKG;AACH,qBAAa,eAAgB,SAAQ,UAAU;IAC7C,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;MAGf;IACF,MAAM,CAAC,MAAM,0BAAqB;IAClC,kHAAkH;IAClH,SAAS,CAAC,QAAQ,CAAC,IAAI,WAAyG;IACxH,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACzB,oGAAoG;IAC5F,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,KAAK,CAA2B;IACxC,OAAO,CAAC,QAAQ,CAA2D;IAC3E,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,QAAQ,CAAC,CAAmB;IACpC,OAAO,CAAC,MAAM,CAAC,CAAiB;IAChC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8B;;IAItD,iBAAiB;IAcjB,oBAAoB;IAWpB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAGpD,OAAO,CAAC,WAAW;IAWnB,+EAA+E;IAC/E,OAAO;IAyBP,OAAO,CAAC,QAAQ,CAId;IACF,OAAO,CAAC,KAAK;IAsBb,OAAO,CAAC,IAAI;IASZ,OAAO,CAAC,MAAM,CAWZ;IACF,MAAM;CAUP;AAED,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,sBAAsB,EAAE,eAAe,CAAC;KAAE;CAAE"}

package/dist/3-unit/ds-table-of-contents.js

@@ -0,0 +1,190 @@
+import { LitElement, html, nothing, unsafeCSS } from 'lit';
+import { define } from '../0-face/define';
+import { CutFades } from '../0-face/cut-fade';
+import { getText } from '../0-face/i18n';
+import '../0-face/tooltips';
+import '../2-core/ds-text';
+import styles from './styles/ds-table-of-contents.css?inline';
+/** A page's section links. Placement belongs to the page, not this Unit.
+ * Supply items or slot native anchors with data-depth. Same-page links track
+ * their headings inside the actual scrolling container, including a shadow root.
+ * @element ds-table-of-contents
+ * @fires toc-change - { href }: the section in view changed.
+ */
+export class TableOfContents extends LitElement {
+    constructor() {
+        super();
+        /** A cut label fades over its last square, never an ellipsis: marks it `data-cut="end"` while it does not fit. */
+        this.cuts = new CutFades(this, { selector: 'a', targets: () => this.querySelectorAll(':scope > a'), text: true });
+        this.links = [];
+        this.sections = [];
+        this.scroller = null;
+        this.frame = 0;
+        this.relabel = () => this.requestUpdate();
+        this.schedule = () => {
+            if (!this.isConnected)
+                return;
+            cancelAnimationFrame(this.frame);
+            this.frame = requestAnimationFrame(() => this.track());
+        };
+        this.follow = (event) => {
+            if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.altKey || event.shiftKey)
+                return;
+            const link = event.composedPath().find((node) => node instanceof HTMLAnchorElement);
+            if (!link || !this.links.includes(link) || link.target === '_blank' || link.hasAttribute('download'))
+                return;
+            const heading = this.destination(link);
+            if (!heading)
+                return;
+            event.preventDefault();
+            heading.scrollIntoView({ block: 'start', behavior: 'auto' });
+            if (!heading.hasAttribute('tabindex'))
+                heading.setAttribute('tabindex', '-1');
+            heading.focus({ preventScroll: true });
+            history.pushState(history.state, '', link.href);
+            this.mark(link.getAttribute('href'));
+        };
+        this.items = [];
+        this.label = 'Contents';
+        this.literal = false;
+        this.current = '';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.follow);
+        window.addEventListener('scroll', this.schedule, { passive: true });
+        window.addEventListener('resize', this.schedule, { passive: true });
+        window.addEventListener('hashchange', this.schedule);
+        window.addEventListener('language-changed', this.relabel);
+        window.addEventListener('translations-loaded', this.relabel);
+        this.observer = new MutationObserver(() => this.refresh());
+        this.observer.observe(this, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ['href', 'data-depth'] });
+        if (typeof ResizeObserver !== 'undefined')
+            this.resize = new ResizeObserver(this.schedule);
+        void this.updateComplete.then(() => { if (this.isConnected)
+            this.refresh(); });
+        void this.ownerDocument.fonts?.ready.then(this.schedule);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this.follow);
+        window.removeEventListener('scroll', this.schedule);
+        this.scroller?.removeEventListener('scroll', this.schedule);
+        window.removeEventListener('resize', this.schedule);
+        window.removeEventListener('hashchange', this.schedule);
+        window.removeEventListener('language-changed', this.relabel);
+        window.removeEventListener('translations-loaded', this.relabel);
+        this.observer?.disconnect();
+        this.resize?.disconnect();
+        cancelAnimationFrame(this.frame);
+        super.disconnectedCallback();
+    }
+    updated(changed) {
+        if (changed.has('items') || changed.has('target'))
+            this.refresh();
+    }
+    destination(link) {
+        try {
+            const url = new URL(link.href, this.ownerDocument.baseURI);
+            const page = new URL(this.ownerDocument.URL);
+            if (!url.hash || url.origin !== page.origin || url.pathname !== page.pathname || url.search !== page.search)
+                return null;
+            const id = decodeURIComponent(url.hash.slice(1));
+            if (this.target)
+                return [...this.target.querySelectorAll('[id]')].find(node => node.id === id) ?? null;
+            const root = this.getRootNode();
+            return root.getElementById(id) ?? null;
+        }
+        catch {
+            return null;
+        }
+    }
+    /** Read links and targets again after replacing content or moving the Unit. */
+    refresh() {
+        if (!this.isConnected)
+            return;
+        this.links = this.items.length ? [...this.renderRoot.querySelectorAll('a')]
+            : [...this.querySelectorAll('a[href]')];
+        this.sections = this.links.flatMap(link => {
+            const heading = this.destination(link);
+            return heading ? [{ link, heading }] : [];
+        });
+        for (const link of this.links) {
+            const depth = Number(link.dataset.depth ?? 0);
+            link.style.setProperty('--toc-depth', String(Number.isFinite(depth) ? Math.max(0, depth) : 0));
+        }
+        this.scroller?.removeEventListener('scroll', this.schedule);
+        this.scroller = null;
+        const parentOf = (node) => node.parentElement ?? (node.getRootNode() instanceof ShadowRoot ? node.getRootNode().host : null);
+        for (let parent = this.sections[0] ? parentOf(this.sections[0].heading) : null; parent; parent = parentOf(parent)) {
+            if (/(auto|scroll)/.test(getComputedStyle(parent).overflowY)) {
+                this.scroller = parent;
+                break;
+            }
+        }
+        this.scroller?.addEventListener('scroll', this.schedule, { passive: true });
+        this.resize?.disconnect();
+        this.resize?.observe(this);
+        if (this.target)
+            this.resize?.observe(this.target);
+        if (this.scroller)
+            this.resize?.observe(this.scroller);
+        this.schedule();
+    }
+    track() {
+        for (const link of this.links) {
+            if (link.scrollWidth > link.clientWidth)
+                link.setAttribute('data-tooltip', link.textContent?.trim() ?? '');
+            else
+                link.removeAttribute('data-tooltip');
+        }
+        if (!this.sections.length) {
+            this.mark('');
+            return;
+        }
+        const box = this.scroller?.getBoundingClientRect();
+        const top = box?.top ?? 0;
+        const height = this.scroller?.clientHeight ?? window.innerHeight;
+        const scrollTop = this.scroller?.scrollTop ?? window.scrollY;
+        const scrollHeight = this.scroller?.scrollHeight ?? this.ownerDocument.documentElement.scrollHeight;
+        const end = scrollTop > 0 && scrollTop + height >= scrollHeight - 1;
+        // The rendered row resolves nested scale and calc() tokens to actual pixels.
+        const unit = this.renderRoot.querySelector('.title')?.getBoundingClientRect().height || 20;
+        const line = top + (end ? height : unit);
+        let current = this.sections[0].link.getAttribute('href');
+        for (const { link, heading } of this.sections) {
+            if (heading.getBoundingClientRect().top <= line)
+                current = link.getAttribute('href');
+            else
+                break;
+        }
+        this.mark(current);
+    }
+    mark(href) {
+        for (const link of this.links) {
+            if (link.getAttribute('href') === href)
+                link.setAttribute('aria-current', 'location');
+            else
+                link.removeAttribute('aria-current');
+        }
+        if (this.current === href)
+            return;
+        this.current = href;
+        this.dispatchEvent(new CustomEvent('toc-change', { detail: { href }, bubbles: true, composed: true }));
+    }
+    render() {
+        const words = this.label || 'Contents';
+        const label = this.literal ? words : getText(words) || words;
+        return html `<nav aria-label=${label} part="navigation">
+      <div class="title"><ds-text literal strong role="heading" aria-level="2" part="title">${label}</ds-text></div>
+      <div class="links" part="links"><slot @slotchange=${() => this.refresh()}>
+        ${this.items.map(item => html `<a href=${item.href} data-depth=${item.depth ?? 0} aria-current=${this.current === item.href ? 'location' : nothing} part="link">${item.label}</a>`)}
+      </slot></div>
+    </nav>`;
+    }
+}
+TableOfContents.properties = {
+    items: { attribute: false }, label: { type: String }, literal: { type: Boolean },
+    target: { attribute: false }, current: { state: true },
+};
+TableOfContents.styles = unsafeCSS(styles);
+define('ds-table-of-contents', TableOfContents);

package/dist/3-unit/ds-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-table.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-table.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ds-table.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-table.ts"],"names":[],"mappings":"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"}

package/dist/3-unit/ds-table.js

@@ -1,3 +1,4 @@
+import { define } from "../0-face/define";
 // ds-table.ts
 // A data table: rows one square high on hairlines, drawn from data with the
 // same rules as a native `<table class="ds-table">` (1-root/table.css). With
@@ -468,4 +469,4 @@ function text(value) {
         return "";
     return typeof value === "number" ? value.toLocaleString() : String(value);
 }
-customElements.define("ds-table", DsTable);
+define("ds-table", DsTable);

package/dist/3-unit/ds-tabs.d.ts

@@ -1,9 +1,16 @@
-import { LitElement } from "lit";
+import { LitElement, type PropertyValues } from "lit";
 /**
  * A run of choices of which one is current: the panel's tabs, a subtab bar,
  * a segmented option group. The choices are `ds-button`s; the current one is
  * `active`.
  *
+ * Four faces, always 4px apart where they stand apart: buttons (the
+ * default), each tab muted on no ground and the current one on the fill;
+ * `text`, the words alone; `split`, the tabs joined into one face as the
+ * split button draws it, the current one on the accent; and `paper`, a
+ * notebook's tabs hanging from a page's top edge, a row high, the current one
+ * on the paper's colour and joined to the page.
+ *
  * The element is a `tablist` unless it says otherwise, and its buttons take the
  * tab look. An option group that is not a set of tabs takes `role="group"`, its
  * buttons `aria-pressed`, and they take DS one's button looks: grey, and the
@@ -11,6 +18,9 @@ import { LitElement } from "lit";
  *
  * @element ds-tabs
  * @attr fill - Share the width equally between the choices.
+ * @attr text - Text tabs: the words alone, no fill, the current one in the ink.
+ * @attr split - Split tabs: joined into one face a control high, the current one on the accent.
+ * @attr paper - Paper tabs: a notebook's tabs a row high, rounded at the top, the current one on the paper and joined to the page.
  *
  * @example
  * <ds-tabs role="group" fill>
@@ -33,13 +43,34 @@ export declare class Tabs extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        text: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        split: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        paper: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
     };
     fill: boolean;
     wrap: boolean;
+    text: boolean;
+    split: boolean;
+    paper: boolean;
     constructor();
     static styles: import("lit").CSSResult;
     connectedCallback(): void;
     private navigate;
+    /**
+     * Split, each tab knows its place in the run, so only the run's ends are
+     * rounded; paper, each tab wears the mark that gives it a notebook tab's face.
+     */
+    private syncFaces;
+    protected updated(changed: PropertyValues): void;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/3-unit/ds-tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-tabs.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;;;;;;MAGf;IAEM,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;;IAStB,MAAM,CAAC,MAAM,0BAAqB;IAElC,iBAAiB,IAAI,IAAI;IAKzB,OAAO,CAAC,QAAQ,CAYd;IAEF,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
+{"version":3,"file":"ds-tabs.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;MAMf;IAEM,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;;IAYvB,MAAM,CAAC,MAAM,0BAAqB;IAElC,iBAAiB,IAAI,IAAI;IAKzB,OAAO,CAAC,QAAQ,CAYd;IAEF;;;OAGG;IACH,OAAO,CAAC,SAAS,CASf;IAEF,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAIhD,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

package/dist/3-unit/ds-tabs.js

@@ -6,6 +6,13 @@ import { define } from "../0-face/define";
  * a segmented option group. The choices are `ds-button`s; the current one is
  * `active`.
  *
+ * Four faces, always 4px apart where they stand apart: buttons (the
+ * default), each tab muted on no ground and the current one on the fill;
+ * `text`, the words alone; `split`, the tabs joined into one face as the
+ * split button draws it, the current one on the accent; and `paper`, a
+ * notebook's tabs hanging from a page's top edge, a row high, the current one
+ * on the paper's colour and joined to the page.
+ *
  * The element is a `tablist` unless it says otherwise, and its buttons take the
  * tab look. An option group that is not a set of tabs takes `role="group"`, its
  * buttons `aria-pressed`, and they take DS one's button looks: grey, and the
@@ -13,6 +20,9 @@ import { define } from "../0-face/define";
  *
  * @element ds-tabs
  * @attr fill - Share the width equally between the choices.
+ * @attr text - Text tabs: the words alone, no fill, the current one in the ink.
+ * @attr split - Split tabs: joined into one face a control high, the current one on the accent.
+ * @attr paper - Paper tabs: a notebook's tabs a row high, rounded at the top, the current one on the paper and joined to the page.
  *
  * @example
  * <ds-tabs role="group" fill>
@@ -43,8 +53,29 @@ export class Tabs extends LitElement {
             tabs[next].focus();
             tabs[next].click();
         };
+        /**
+         * Split, each tab knows its place in the run, so only the run's ends are
+         * rounded; paper, each tab wears the mark that gives it a notebook tab's face.
+         */
+        this.syncFaces = () => {
+            const tabs = [...this.children].filter(child => child.localName === "ds-button");
+            tabs.forEach((tab, index) => {
+                const place = tabs.length === 1 ? "only" : index === 0 ? "first" : index === tabs.length - 1 ? "last" : "middle";
+                if (this.split)
+                    tab.setAttribute("segment", place);
+                else if (/^(first|middle|last|only)$/.test(tab.getAttribute("segment") ?? ""))
+                    tab.removeAttribute("segment");
+                if (this.paper)
+                    tab.setAttribute("paper", "");
+                else
+                    tab.removeAttribute("paper");
+            });
+        };
         this.fill = false;
         this.wrap = false;
+        this.text = false;
+        this.split = false;
+        this.paper = false;
         this.addEventListener("keydown", this.navigate);
     }
     connectedCallback() {
@@ -52,13 +83,20 @@ export class Tabs extends LitElement {
         if (!this.hasAttribute("role"))
             this.setAttribute("role", "tablist");
     }
+    updated(changed) {
+        if (changed.has("split") || changed.has("paper"))
+            this.syncFaces();
+    }
     render() {
-        return html `<slot></slot>`;
+        return html `<slot @slotchange=${this.syncFaces}></slot>`;
     }
 }
 Tabs.properties = {
     fill: { type: Boolean, reflect: true },
     wrap: { type: Boolean, reflect: true },
+    text: { type: Boolean, reflect: true },
+    split: { type: Boolean, reflect: true },
+    paper: { type: Boolean, reflect: true },
 };
 Tabs.styles = unsafeCSS(styles);
 define("ds-tabs", Tabs);

package/dist/4-page/ds-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-container.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-container.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,0BAAqB;IAElC,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,SAAS,CAAC;KAC3B;CACF"}
+{"version":3,"file":"ds-container.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-container.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,0BAAqB;IAElC,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,SAAS,CAAC;KAC3B;CACF"}

package/dist/4-page/ds-container.js

@@ -1,3 +1,4 @@
+import { define } from "../0-face/define";
 // ds-container.ts
 // Container component with responsive width constraints
 import { LitElement, html, unsafeCSS } from "lit";
@@ -8,4 +9,4 @@ export class Container extends LitElement {
     }
 }
 Container.styles = unsafeCSS(styles);
-customElements.define("ds-container", Container);
+define("ds-container", Container);