@scalewing/react 1.41.0 → 1.44.0

package/dist/components/markdown/read-inlines.js

@@ -0,0 +1,126 @@
+import { maxExcerpt, maxNesting } from './markdown-limits.js';
+import { safeLinkHref } from './markdown-rules.js';
+import { plainText } from './markdown-text.js';
+/** A token's attribute, read without its methods (tokens may be copies). */
+export function attr(token, name) {
+    return token.attrs?.find(([key]) => key === name)?.[1] ?? null;
+}
+function close(context, frame, parent) {
+    if (frame.kind === 'root')
+        return;
+    if (frame.kind !== 'link') {
+        parent.children.push({ kind: frame.kind, children: frame.children });
+        return;
+    }
+    const href = safeLinkHref(frame.href ?? '');
+    if (href !== null) {
+        parent.children.push({ kind: 'link', href, children: frame.children });
+        return;
+    }
+    context.omit('link', `[${plainText(frame.children)}](${frame.href ?? ''})`);
+    // Links never hold links, so each word moves up once.
+    for (const child of frame.children)
+        parent.children.push(child);
+}
+/**
+ * One block's inline tokens as the view's inlines: text, breaks, bold,
+ * italic and links. A link's address must pass `safeLinkHref`, or its
+ * words stay as text; raw HTML and images here are left out; code is its
+ * words; marks nested past `maxNesting` are their words.
+ */
+export function readInlines(context, tokens) {
+    const root = { kind: 'root', href: null, children: [] };
+    const stack = [root];
+    // Marks past `maxNesting` open no frame: their words go straight into
+    // the deepest drawn one, so each word is placed once at any depth.
+    let flat = 0;
+    let flatWords = '';
+    // Links never hold links: the open one's address, quoted when it shuts.
+    const flatLinks = [];
+    const quote = (text) => {
+        if (flatWords.length < maxExcerpt)
+            flatWords += text;
+    };
+    const open = (kind, href) => {
+        if (flat > 0 || stack.length > maxNesting) {
+            flat += 1;
+            // A link this deep is drawn as its words; the run's one omission
+            // quotes it as `[words](address)`.
+            flatLinks.push(kind === 'link' ? (href ?? '') : null);
+            if (kind === 'link')
+                quote('[');
+            return;
+        }
+        stack.push({ kind, href, children: [] });
+    };
+    const shut = () => {
+        if (flat > 0) {
+            flat -= 1;
+            const link = flatLinks.pop();
+            if (link !== null && link !== undefined)
+                quote(`](${link})`);
+            if (flat === 0) {
+                context.omit('limit', flatWords);
+                flatWords = '';
+            }
+            return;
+        }
+        if (stack.length > 1)
+            close(context, stack.pop(), stack[stack.length - 1]);
+    };
+    const words = (value) => {
+        stack[stack.length - 1].children.push({ kind: 'text', value });
+        if (flat > 0)
+            quote(value);
+    };
+    for (const token of tokens) {
+        const top = stack[stack.length - 1];
+        switch (token.type) {
+            case 'text':
+            case 'text_special':
+                words(token.content);
+                break;
+            case 'softbreak':
+                words('\n');
+                break;
+            case 'hardbreak':
+                top.children.push({ kind: 'break' });
+                break;
+            case 'code_inline':
+                context.omit('code', `\`${token.content}\``);
+                words(token.content);
+                break;
+            case 'html_inline':
+                context.omit('html', token.content);
+                break;
+            case 'image':
+                // An image in a link, a mark or a heading: never drawn there.
+                context.omit('image', `![${token.content}](${attr(token, 'src') ?? ''})`);
+                break;
+            case 'strong_open':
+                open('strong', null);
+                break;
+            case 'em_open':
+                open('emphasis', null);
+                break;
+            case 'link_open':
+                open('link', attr(token, 'href'));
+                break;
+            case 'strong_close':
+            case 'em_close':
+            case 'link_close':
+                shut();
+                break;
+            default:
+                // Nothing else is parsed (no strikethrough, no footnotes); any
+                // other token's words, if it has them, stay as text.
+                if (token.content)
+                    words(token.content);
+        }
+    }
+    while (flat > 0)
+        shut();
+    while (stack.length > 1)
+        close(context, stack.pop(), stack[stack.length - 1]);
+    return root.children;
+}

package/dist/components/markdown/read-markdown.d.ts

@@ -0,0 +1,9 @@
+import { type MarkdownReading } from './markdown-model.js';
+import { type MarkdownOptions } from './markdown-options.js';
+/**
+ * Reads Markdown into what `MarkdownView` draws: its blocks, its headings
+ * (with the ids the view gives them) and what it leaves out. Pure: the
+ * same source and options always give the same reading. Refuses a source
+ * that is not text and options the view refuses.
+ */
+export declare function readMarkdown(source: string, options?: MarkdownOptions, owner?: string): MarkdownReading;

package/dist/components/markdown/read-markdown.js

@@ -0,0 +1,27 @@
+import { maxParseNesting } from './markdown-limits.js';
+import { assertMarkdownInput, } from './markdown-options.js';
+import { parseMarkdown } from './parse-markdown.js';
+import { readBlocks } from './read-blocks.js';
+import { ReadingContext } from './reading-context.js';
+/**
+ * Reads Markdown into what `MarkdownView` draws: its blocks, its headings
+ * (with the ids the view gives them) and what it leaves out. Pure: the
+ * same source and options always give the same reading. Refuses a source
+ * that is not text and options the view refuses.
+ */
+export function readMarkdown(source, options = {}, owner = 'readMarkdown') {
+    assertMarkdownInput(owner, source, options);
+    const tokens = parseMarkdown(source);
+    const context = new ReadingContext(source, options);
+    // The parser stops reading a block nested deeper than it reads.
+    const cut = tokens.find((token) => token.level >= maxParseNesting - 1);
+    if (cut)
+        context.omitBlock('limit', cut);
+    const blocks = readBlocks(context, tokens);
+    return {
+        blocks,
+        headings: context.headings,
+        omissions: context.omissions,
+        omissionCounts: context.omissionCounts,
+    };
+}

package/dist/components/markdown/reading-context.d.ts

@@ -0,0 +1,18 @@
+import { type MarkdownHeading, type MarkdownOmission, type MarkdownOmissionCounts, type MarkdownOmissionKind } from './markdown-model.js';
+import { type MarkdownOptions } from './markdown-options.js';
+import { HeadingIds } from './markdown-rules.js';
+import { type Token } from './parse-markdown.js';
+/** One document's reading so far: its headings and what it left out. */
+export declare class ReadingContext {
+    readonly options: MarkdownOptions;
+    readonly headings: MarkdownHeading[];
+    readonly omissions: MarkdownOmission[];
+    readonly omissionCounts: MarkdownOmissionCounts;
+    readonly ids: HeadingIds;
+    private readonly lines;
+    constructor(source: string, options: MarkdownOptions);
+    /** Notes something left out, by its words. */
+    omit(kind: MarkdownOmissionKind, text: string): void;
+    /** Notes a block left out, by the source lines it came from. */
+    omitBlock(kind: MarkdownOmissionKind, token: Token): void;
+}

package/dist/components/markdown/reading-context.js

@@ -0,0 +1,35 @@
+import { maxOmissionsListed } from './markdown-limits.js';
+import { HeadingIds } from './markdown-rules.js';
+import { excerpt } from './markdown-text.js';
+/** One document's reading so far: its headings and what it left out. */
+export class ReadingContext {
+    options;
+    headings = [];
+    omissions = [];
+    omissionCounts = {
+        html: 0,
+        table: 0,
+        image: 0,
+        link: 0,
+        code: 0,
+        limit: 0,
+    };
+    ids;
+    lines;
+    constructor(source, options) {
+        this.options = options;
+        this.ids = new HeadingIds(options.idPrefix ?? '');
+        this.lines = source.split(/\r\n?|\n/);
+    }
+    /** Notes something left out, by its words. */
+    omit(kind, text) {
+        this.omissionCounts[kind] += 1;
+        if (this.omissions.length < maxOmissionsListed)
+            this.omissions.push({ kind, source: excerpt(text) });
+    }
+    /** Notes a block left out, by the source lines it came from. */
+    omitBlock(kind, token) {
+        const [start, end] = token.map ?? [0, 0];
+        this.omit(kind, this.lines.slice(start, end).join('\n'));
+    }
+}

package/dist/components/markdown/render-markdown.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+import { type MarkdownBlock, type MarkdownInline } from './markdown-model.js';
+/** What every drawn link carries besides its own words. */
+export type LinkOptions = {
+    newTabLabel: string;
+};
+/** Draws a run of text as React elements: never HTML from a string. */
+export declare function renderInlines(inlines: readonly MarkdownInline[], links: LinkOptions): ReactNode[];
+/** Draws blocks in order. */
+export declare function renderBlocks(blocks: readonly MarkdownBlock[], links: LinkOptions): ReactNode[];

package/dist/components/markdown/render-markdown.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Separator } from '../Separator.js';
+const headingElements = { 1: 'h2', 2: 'h3', 3: 'h4' };
+/** Draws a run of text as React elements: never HTML from a string. */
+export function renderInlines(inlines, links) {
+    return inlines.map((inline, index) => {
+        switch (inline.kind) {
+            case 'text':
+                return inline.value;
+            case 'break':
+                return _jsx("br", {}, index);
+            case 'strong':
+                return (_jsx("strong", { children: renderInlines(inline.children, links) }, index));
+            case 'emphasis':
+                return _jsx("em", { children: renderInlines(inline.children, links) }, index);
+            case 'link':
+                return (_jsxs("a", { className: "sw-markdown-link", href: inline.href, rel: "noopener noreferrer", 
+                    // Safari leaves a link out of the Tab order without one.
+                    tabIndex: 0, target: "_blank", children: [renderInlines(inline.children, links), _jsxs("span", { className: "sw-sr-only", children: [" ", links.newTabLabel] })] }, index));
+        }
+    });
+}
+/** Draws a list item: a tight list's paragraphs are its words alone. */
+function renderItem(blocks, tight, links) {
+    if (!tight)
+        return renderBlocks(blocks, links);
+    return blocks.map((block, index) => block.kind === 'paragraph' ? (_jsx("span", { className: "sw-markdown-item-text", children: renderInlines(block.children, links) }, index)) : (renderBlock(block, index, links)));
+}
+function renderBlock(block, key, links) {
+    switch (block.kind) {
+        case 'paragraph':
+            return (_jsx("p", { className: "sw-markdown-paragraph", children: renderInlines(block.children, links) }, key));
+        case 'heading': {
+            const Heading = headingElements[block.level];
+            return (_jsx(Heading, { className: `sw-markdown-heading sw-markdown-heading-${block.level}`, id: block.id, children: renderInlines(block.children, links) }, key));
+        }
+        case 'list': {
+            const items = block.items.map((item, index) => (_jsx("li", { children: renderItem(item, block.tight, links) }, index)));
+            return block.ordered ? (_jsx("ol", { className: "sw-markdown-list", start: block.start === null || block.start === 1 ? undefined : block.start, children: items }, key)) : (_jsx("ul", { className: "sw-markdown-list", children: items }, key));
+        }
+        case 'quote':
+            return (_jsx("blockquote", { className: "sw-markdown-quote", children: renderBlocks(block.children, links) }, key));
+        case 'figure':
+            return (_jsxs("figure", { className: "sw-markdown-figure", children: [_jsx("img", { alt: block.alt, className: "sw-markdown-image", src: block.src }), block.caption ? (_jsx("figcaption", { className: "sw-markdown-caption", children: block.caption })) : null] }, key));
+        case 'rule':
+            return _jsx(Separator, {}, key);
+    }
+}
+/** Draws blocks in order. */
+export function renderBlocks(blocks, links) {
+    return blocks.map((block, index) => renderBlock(block, index, links));
+}

package/dist/components/slot.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+/**
+ * Whether a component's slot (a row's `leading`, `tag` or `action`, a
+ * chips row's `end`) holds something to draw. React renders nothing for
+ * `undefined`, `null`, a boolean (the `false` of
+ * `canArchive && <ActionMenu …/>`) or an empty string, so those are an
+ * empty slot and add no box and no gap.
+ */
+export declare function hasSlot(node: ReactNode): boolean;

package/dist/components/slot.js

@@ -0,0 +1,13 @@
+/**
+ * Whether a component's slot (a row's `leading`, `tag` or `action`, a
+ * chips row's `end`) holds something to draw. React renders nothing for
+ * `undefined`, `null`, a boolean (the `false` of
+ * `canArchive && <ActionMenu …/>`) or an empty string, so those are an
+ * empty slot and add no box and no gap.
+ */
+export function hasSlot(node) {
+    return (node !== undefined &&
+        node !== null &&
+        node !== '' &&
+        typeof node !== 'boolean');
+}

package/dist/components/use-element-width.d.ts

@@ -0,0 +1,11 @@
+import { type RefObject } from 'react';
+/**
+ * Follows the width an element is given, in whole CSS pixels: on mount,
+ * before the first paint, and whenever its box changes size. Before that,
+ * and on the server, it reports `fallback`; a browser with no
+ * ResizeObserver measures on window resizes instead. `content` measures
+ * the content box (inside the padding) rather than the border box.
+ */
+export declare function useElementWidth(ref: RefObject<HTMLElement | null>, fallback: number, { content }?: {
+    content?: boolean;
+}): number;

package/dist/components/use-element-width.js

@@ -0,0 +1,38 @@
+'use client';
+import { useLayoutEffect, useState } from 'react';
+/**
+ * Follows the width an element is given, in whole CSS pixels: on mount,
+ * before the first paint, and whenever its box changes size. Before that,
+ * and on the server, it reports `fallback`; a browser with no
+ * ResizeObserver measures on window resizes instead. `content` measures
+ * the content box (inside the padding) rather than the border box.
+ */
+export function useElementWidth(ref, fallback, { content = false } = {}) {
+    const [width, setWidth] = useState(fallback);
+    useLayoutEffect(() => {
+        const box = ref.current;
+        if (!box)
+            return;
+        function measure() {
+            if (!box)
+                return;
+            const style = getComputedStyle(box);
+            const padding = content
+                ? (parseFloat(style.paddingLeft) || 0) +
+                    (parseFloat(style.paddingRight) || 0)
+                : 0;
+            const next = Math.round(box.getBoundingClientRect().width - padding);
+            if (next > 0)
+                setWidth(next);
+        }
+        measure();
+        if (typeof ResizeObserver === 'undefined') {
+            window.addEventListener('resize', measure);
+            return () => window.removeEventListener('resize', measure);
+        }
+        const observer = new ResizeObserver(measure);
+        observer.observe(box);
+        return () => observer.disconnect();
+    }, [ref, content]);
+    return width;
+}

package/dist/css/css-action-menu-trigger.d.ts

@@ -1,11 +1,15 @@
-export declare const actionMenuTriggerAppearances: readonly ["framed", "text"];
+export declare const actionMenuTriggerAppearances: readonly ["framed", "text", "icon"];
 /**
  * How an ActionMenu's trigger looks: `framed` (the default) is a small
  * outlined control; `text` is its words in the text color with a chevron
  * after them and no fill or outline until hovered or open, such as a
- * person's name that opens their account menu in a header.
+ * person's name that opens their account menu in a header; `icon` is the
+ * consumer's glyph alone in a round quiet button, no chevron and no
+ * outline until hovered or open, such as a row's ••• menu.
  */
 export type ActionMenuTriggerAppearance = (typeof actionMenuTriggerAppearances)[number];
 export declare const actionMenuTriggerTextClass = "sw-action-menu-trigger-text";
+export declare const actionMenuTriggerIconClass = "sw-action-menu-trigger-icon";
 export declare function cssActionMenuTriggerClasses(): string;
+export declare function cssActionMenuTriggerIconClasses(): string;
 export declare function actionMenuTriggerClassCatalog(): string[];

package/dist/css/css-action-menu-trigger.js

@@ -3,9 +3,11 @@ import { chevronStroke } from './chevron.js';
 import { quietFill } from './quiet-fill.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
 const label = typographyVariants.label;
-export const actionMenuTriggerAppearances = ['framed', 'text'];
+export const actionMenuTriggerAppearances = ['framed', 'text', 'icon'];
 export const actionMenuTriggerTextClass = 'sw-action-menu-trigger-text';
+export const actionMenuTriggerIconClass = 'sw-action-menu-trigger-icon';
 const text = `.sw-action-menu-trigger.${actionMenuTriggerTextClass}`;
+const icon = `.sw-action-menu-trigger.${actionMenuTriggerIconClass}`;
 /*
  * A text trigger: no fill and a transparent border (kept, so forced colors
  * can draw one), its words in label type at medium weight in the text
@@ -61,6 +63,52 @@ ${text}[aria-expanded='true'] {
   ${text}[aria-expanded='true'] { border-color: Highlight; }
 }`;
 }
+/*
+ * An icon trigger: the consumer's glyph alone, centred in a round button
+ * as wide as it is tall (the sm control height, the 44 px target on a
+ * coarse pointer), in the muted colour, with no fill, no chevron and a
+ * transparent border (kept for forced colors). Like the text trigger it
+ * takes the quiet fill while open and under a hovering pointer. Its name
+ * is the menu's label, so the glyph says nothing on its own.
+ */
+export function cssActionMenuTriggerIconClasses() {
+    return `${icon} {
+  align-items: center;
+  background: transparent;
+  border-color: transparent;
+  border-radius: var(--sw-radius-pill);
+  color: var(--sw-color-muted);
+  display: inline-flex;
+  justify-content: center;
+  min-height: var(--sw-control-sm-min-height);
+  min-width: var(--sw-control-sm-min-height);
+  padding: 0;
+}
+
+${icon}[aria-expanded='true'] {
+  background: ${quietFill};
+  color: var(--sw-color-text);
+}
+
+@media (hover: hover) {
+  ${icon}:hover:not(:disabled) {
+    background: ${quietFill};
+    color: var(--sw-color-text);
+  }
+}
+
+@media ${coarsePointerQuery} {
+  ${icon} {
+    min-height: ${touchTarget};
+    min-width: ${touchTarget};
+  }
+}
+
+@media (forced-colors: active) {
+  ${icon} { color: ButtonText; }
+  ${icon}[aria-expanded='true'] { border-color: Highlight; }
+}`;
+}
 export function actionMenuTriggerClassCatalog() {
-    return [actionMenuTriggerTextClass];
+    return [actionMenuTriggerTextClass, actionMenuTriggerIconClass];
 }

package/dist/css/css-action-menu.js

@@ -1,6 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { chevronStroke } from './chevron.js';
-import { actionMenuTriggerClassCatalog, cssActionMenuTriggerClasses, } from './css-action-menu-trigger.js';
+import { actionMenuTriggerClassCatalog, cssActionMenuTriggerClasses, cssActionMenuTriggerIconClasses, } from './css-action-menu-trigger.js';
 import { zIndex } from './stacking.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
 import { quietFill } from './quiet-fill.js';
@@ -166,7 +166,9 @@ export function cssActionMenuClasses() {
   }
 }
 
-${cssActionMenuTriggerClasses()}`;
+${cssActionMenuTriggerClasses()}
+
+${cssActionMenuTriggerIconClasses()}`;
 }
 export function actionMenuClassCatalog() {
     return [

package/dist/css/css-article.d.ts

@@ -0,0 +1,2 @@
+export declare function cssArticleClasses(): string;
+export declare function articleClassCatalog(): string[];

package/dist/css/css-article.js

@@ -0,0 +1,110 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
+const { caption, label } = typographyVariants;
+/*
+ * An article is a card at the reading width (--sw-reading-max): its cover
+ * photo edge to edge across the top at 3:1 (2:1 on a phone), rounded with
+ * the card's top corners, then its words a space-6 below and above and a
+ * space-8 in from the sides (space-5 all round on a phone). The eyebrow
+ * is caption type at the label's weight, muted, with the actions at its
+ * row's end (when the row is too narrow they wrap under it, at its
+ * start); the title a space-3 under it; the meta line muted caption type
+ * a space-3 under the title; a hairline a space-3 under that, and the
+ * body a space-4 under the hairline. The card sits at the start of a
+ * wider column, as a page's main column does.
+ */
+export function cssArticleClasses() {
+    return `.sw-article {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  max-inline-size: var(--sw-reading-max);
+  min-width: 0;
+}
+
+.sw-article-cover {
+  aspect-ratio: 3 / 1;
+  background: var(--sw-color-subtle);
+  border-start-end-radius: inherit;
+  border-start-start-radius: inherit;
+  display: block;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+.sw-article-body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: var(--sw-space-6) var(--sw-space-8);
+}
+
+.sw-article-header {
+  display: flex;
+  flex-direction: column;
+  margin-block-end: var(--sw-space-3);
+  min-width: 0;
+}
+
+.sw-article-top {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-3);
+  justify-content: space-between;
+  margin-block-end: var(--sw-space-3);
+}
+
+.sw-article-eyebrow {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  font-weight: ${label.fontWeight};
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.sw-article-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+}
+
+.sw-article-actions:only-child { margin-inline-start: auto; }
+
+.sw-article-title { overflow-wrap: anywhere; }
+
+.sw-article-meta {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  margin-block-start: var(--sw-space-3);
+  overflow-wrap: anywhere;
+}
+
+.sw-article-content {
+  margin-block-start: var(--sw-space-4);
+  min-width: 0;
+}
+
+@media ${breakpointQuery('below', 'md')} {
+  .sw-article-cover { aspect-ratio: 2 / 1; }
+  .sw-article-body { padding: var(--sw-space-5); }
+}`;
+}
+export function articleClassCatalog() {
+    return [
+        'sw-article',
+        'sw-article-cover',
+        'sw-article-body',
+        'sw-article-header',
+        'sw-article-top',
+        'sw-article-eyebrow',
+        'sw-article-actions',
+        'sw-article-title',
+        'sw-article-meta',
+        'sw-article-content',
+    ];
+}

package/dist/css/css-components.js

@@ -5,7 +5,11 @@ import { cssAccordionClasses } from './css-accordion.js';
 import { cssButtonClasses } from './css-button.js';
 import { cssCalendarButtonClasses } from './css-calendar-button.js';
 import { cssDateRangeClasses } from './css-date-range.js';
+import { cssFileFieldClasses } from './css-file-field.js';
+import { cssArticleClasses } from './css-article.js';
+import { cssDocumentViewerClasses } from './css-document-viewer.js';
 import { cssListClasses } from './css-list.js';
+import { cssMarkdownClasses } from './css-markdown.js';
 import { cssCountPillClasses } from './css-count-pill.js';
 import { cssBarChartClasses } from './css-bar-chart.js';
 import { cssChartLegendClasses } from './css-chart-legend.js';
@@ -32,6 +36,7 @@ import { cssMultiSelectClasses } from './css-multi-select.js';
 import { cssSplitClasses } from './css-split.js';
 import { cssSwitchClasses } from './css-switch.js';
 import { cssTextClasses } from './css-text.js';
+import { cssFontMonoClasses } from './css-font-mono.js';
 import { cssSpinnerClasses } from './css-spinner.js';
 import { cssProgressClasses } from './css-progress.js';
 import { cssNoticeClasses } from './css-notice.js';
@@ -130,6 +135,8 @@ ${cssPopupHostRules()}
 
 ${cssTextClasses()}
 
+${cssFontMonoClasses()}
+
 ${cssButtonClasses()}
 
 ${cssCheckboxClasses()}
@@ -150,6 +157,14 @@ ${cssDateRangeClasses()}
 
 ${cssListClasses()}
 
+${cssFileFieldClasses()}
+
+${cssArticleClasses()}
+
+${cssDocumentViewerClasses()}
+
+${cssMarkdownClasses()}
+
 ${cssCountPillClasses()}
 
 ${cssBarChartClasses()}

package/dist/css/css-count-pill.js

@@ -2,6 +2,8 @@ import { typographyVariants } from '@scalewing/tokens';
 const caption = typographyVariants.caption;
 /** The counts drawn as the pill: SectionNav's and a Nav word's. */
 const pills = ['sw-section-nav-count', 'sw-nav-count'];
+/** NavCount's news tone, a modifier of its pill. */
+const accentPill = 'sw-nav-count-accent';
 /*
  * A count after a destination's words (a number waiting there, such as
  * tasks to do) is a filled pill: the danger colour with its on-colour
@@ -30,6 +32,17 @@ export function cssCountPillClasses() {
   padding-inline: var(--sw-space-1);
 }
 
+/*
+ * NavCount's \`tone="accent"\`: a count that is news, not work waiting (what
+ * was added since the person last looked), is the accent fill with its
+ * on-colour figures (4.5:1 in every palette, as a primary Button's label).
+ * One class more specific than the pill, so it wins in any order.
+ */
+[data-theme] .sw-nav-count.${accentPill} {
+  background: var(--sw-color-accent);
+  color: var(--sw-color-onAccent);
+}
+
 /*
  * A Nav link holding a count lays out as SectionNav's link does: the words
  * and the pill centred on one line a space-2 apart (the space text node
@@ -50,5 +63,5 @@ export function cssCountPillClasses() {
 }`;
 }
 export function countPillClassCatalog() {
-    return [...pills];
+    return [...pills, accentPill];
 }

package/dist/css/css-description-list.d.ts

@@ -7,6 +7,7 @@
  * a term sits over its detail. A term and a detail are columns of lines:
  * each child is its own line with its own line height, so a caption term
  * starts level with a caption detail instead of on the list's taller line.
+ * `spread` puts each detail at its row's end, beside its term at every width.
  */
 export declare function cssDescriptionListClasses(): string;
 export declare function descriptionListClassCatalog(): string[];