@pantoken/components 0.2.2 → 0.2.3

package/dist/index.d.mts

@@ -83,150 +83,199 @@ declare function focusOutlineCss(options?: {
 }): string;
 //#endregion
 //#region src/components/button.d.ts
+/** Standalone `button` stylesheet — the prefixed CSS for the action button, ready to ship as a `.css` file. */
 declare const buttonCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/alert.d.ts
+/** Standalone `alert` stylesheet — the prefixed CSS for the status message, ready to ship as a `.css` file. */
 declare const alertCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/badge.d.ts
+/** Standalone `badge` stylesheet — the prefixed CSS for the count-and-status badge, ready to ship as a `.css` file. */
 declare const badgeCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/pill.d.ts
+/** Standalone `pill` stylesheet — the prefixed CSS for the status pill, ready to ship as a `.css` file. */
 declare const pillCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/tag.d.ts
+/** Standalone `tag` stylesheet — the prefixed CSS for the chip, ready to ship as a `.css` file. */
 declare const tagCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/avatar.d.ts
+/** Standalone `avatar` stylesheet — the prefixed CSS for the avatar, ready to ship as a `.css` file. */
 declare const avatarCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/tabs.d.ts
+/** Standalone `tabs` stylesheet — the prefixed CSS for the tabbed panels, ready to ship as a `.css` file. */
 declare const tabsCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/metric.d.ts
+/** Standalone `metric` stylesheet — the prefixed CSS for the statistic, ready to ship as a `.css` file. */
 declare const metricCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/img.d.ts
+/** Standalone `img` stylesheet — the prefixed CSS for the styled image, ready to ship as a `.css` file. */
 declare const imgCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/byline.d.ts
+/** Standalone `byline` stylesheet — the prefixed CSS for the media object, ready to ship as a `.css` file. */
 declare const bylineCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/table.d.ts
+/** Standalone `table` stylesheet — the prefixed CSS for the data table, ready to ship as a `.css` file. */
 declare const tableCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/link.d.ts
+/** Standalone `link` stylesheet — the prefixed CSS for the hyperlink, ready to ship as a `.css` file. */
 declare const linkCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/list.d.ts
+/** Standalone `list` stylesheet — the prefixed CSS for the spaced list, ready to ship as a `.css` file. */
 declare const listCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/checkbox.d.ts
+/** Standalone `checkbox` stylesheet — the prefixed CSS for the checkbox and switch, ready to ship as a `.css` file. */
 declare const checkboxCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/radio.d.ts
+/** Standalone `radio` stylesheet — the prefixed CSS for the radio button, ready to ship as a `.css` file. */
 declare const radioCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/spinner.d.ts
+/** Standalone `spinner` stylesheet — the prefixed CSS for the loading ring, ready to ship as a `.css` file. */
 declare const spinnerCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/progress.d.ts
+/** Standalone `progress` stylesheet — the prefixed CSS for the progress bar, ready to ship as a `.css` file. */
 declare const progressCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/menu.d.ts
+/** Standalone `menu` stylesheet — the prefixed CSS for the dropdown menu, ready to ship as a `.css` file. */
 declare const menuCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/modal.d.ts
+/** Standalone `modal` stylesheet — the prefixed CSS for the dialog surface, ready to ship as a `.css` file. */
 declare const modalCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/breadcrumb.d.ts
+/** Standalone `breadcrumb` stylesheet — the prefixed CSS for the breadcrumb trail, ready to ship as a `.css` file. */
 declare const breadcrumbCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/billboard.d.ts
+/** Standalone `billboard` stylesheet — the prefixed CSS for the empty-state block, ready to ship as a `.css` file. */
 declare const billboardCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/rating.d.ts
+/** Standalone `rating` stylesheet — the prefixed CSS for the star rating, ready to ship as a `.css` file. */
 declare const ratingCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/toggle-group.d.ts
+/** Standalone `toggleGroup` stylesheet — the prefixed CSS for the bordered disclosure, ready to ship as a `.css` file. */
 declare const toggleGroupCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/context-view.d.ts
+/** Standalone `contextView` stylesheet — the prefixed CSS for the caret callout, ready to ship as a `.css` file. */
 declare const contextViewCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/progress-circle.d.ts
+/** Standalone `progressCircle` stylesheet — the prefixed CSS for the progress ring, ready to ship as a `.css` file. */
 declare const progressCircleCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/pagination.d.ts
+/** Standalone `pagination` stylesheet — the prefixed CSS for the page navigation, ready to ship as a `.css` file. */
 declare const paginationCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/truncate.d.ts
+/** Standalone `truncate` stylesheet — the prefixed CSS for the truncation utility, ready to ship as a `.css` file. */
 declare const truncateCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/toggle-details.d.ts
+/** Standalone `toggleDetails` stylesheet — the prefixed CSS for the details disclosure, ready to ship as a `.css` file. */
 declare const toggleDetailsCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/file-drop.d.ts
+/** Standalone `fileDrop` stylesheet — the prefixed CSS for the file dropzone, ready to ship as a `.css` file. */
 declare const fileDropCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/side-nav-bar.d.ts
+/** Standalone `sideNavBar` stylesheet — the prefixed CSS for the navigation rail, ready to ship as a `.css` file. */
 declare const sideNavBarCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/tree-browser.d.ts
+/** Standalone `treeBrowser` stylesheet — the prefixed CSS for the disclosure tree, ready to ship as a `.css` file. */
 declare const treeBrowserCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/calendar.d.ts
+/** Standalone `calendar` stylesheet — the prefixed CSS for the month grid, ready to ship as a `.css` file. */
 declare const calendarCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/popover.d.ts
+/** Standalone `popover` stylesheet — the prefixed CSS for the popover surface, ready to ship as a `.css` file. */
 declare const popoverCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/tray.d.ts
+/** Standalone `tray` stylesheet — the prefixed CSS for the sliding tray, ready to ship as a `.css` file. */
 declare const trayCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/tooltip.d.ts
+/** Standalone `tooltip` stylesheet — the prefixed CSS for the tooltip bubble, ready to ship as a `.css` file. */
 declare const tooltipCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/range-input.d.ts
+/** Standalone `rangeInput` stylesheet — the prefixed CSS for the range slider, ready to ship as a `.css` file. */
 declare const rangeInputCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/heading.d.ts
+/** Standalone `heading` stylesheet — the prefixed CSS for the heading type, ready to ship as a `.css` file. */
 declare const headingCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/text.d.ts
+/** Standalone `text` stylesheet — the prefixed CSS for the body typography, ready to ship as a `.css` file. */
 declare const textCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/close-button.d.ts
+/** Standalone `closeButton` stylesheet — the prefixed CSS for the close button, ready to ship as a `.css` file. */
 declare const closeButtonCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/text-input.d.ts
+/** Standalone `textInput` stylesheet — the prefixed CSS for the text input, ready to ship as a `.css` file. */
 declare const textInputCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/text-area.d.ts
+/** Standalone `textArea` stylesheet — the prefixed CSS for the textarea, ready to ship as a `.css` file. */
 declare const textAreaCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/simple-select.d.ts
+/** Standalone `simpleSelect` stylesheet — the prefixed CSS for the native select, ready to ship as a `.css` file. */
 declare const simpleSelectCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/input-group.d.ts
+/** Standalone `inputGroup` stylesheet — the prefixed CSS for the input group, ready to ship as a `.css` file. */
 declare const inputGroupCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/number-input.d.ts
+/** Standalone `numberInput` stylesheet — the prefixed CSS for the number input, ready to ship as a `.css` file. */
 declare const numberInputCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/in-place-edit.d.ts
+/** Standalone `inPlaceEdit` stylesheet — the prefixed CSS for the in-place editor, ready to ship as a `.css` file. */
 declare const inPlaceEditCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/form-field-messages.d.ts
+/** Standalone `formFieldMessages` stylesheet — the prefixed CSS for the field messages, ready to ship as a `.css` file. */
 declare const formFieldMessagesCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/form-field.d.ts
+/** Standalone `formField` stylesheet — the prefixed CSS for the form-field wrapper, ready to ship as a `.css` file. */
 declare const formFieldCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/form-field-group.d.ts
+/** Standalone `formFieldGroup` stylesheet — the prefixed CSS for the fieldset group, ready to ship as a `.css` file. */
 declare const formFieldGroupCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/radio-input-group.d.ts
+/** Standalone `radioInputGroup` stylesheet — the prefixed CSS for the radio group, ready to ship as a `.css` file. */
 declare const radioInputGroupCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/components/select.d.ts
@@ -255,24 +304,31 @@ declare const radioInputGroupCss: (this: void, options?: ComponentOptions) => st
 declare function selectCss(options?: ComponentOptions): string;
 //#endregion
 //#region src/utilities/view.d.ts
+/** The View utility as a standalone, header-wrapped stylesheet. */
 declare const viewCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/utilities/spacing.d.ts
+/** The spacing utilities as a standalone, header-wrapped stylesheet. */
 declare const spacingUtilitiesCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/utilities/layout.d.ts
+/** The layout utilities as a standalone, header-wrapped stylesheet. */
 declare const layoutUtilitiesCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/utilities/responsive.d.ts
+/** The responsive-visibility utilities as a standalone, header-wrapped stylesheet. */
 declare const responsiveUtilitiesCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/utilities/icon.d.ts
+/** The icon utility as a standalone, header-wrapped stylesheet. */
 declare const iconCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/utilities/mask.d.ts
+/** The mask utility as a standalone, header-wrapped stylesheet. */
 declare const maskCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/utilities/screen-reader-content.d.ts
+/** The screen-reader-content utility as a standalone, header-wrapped stylesheet. */
 declare const screenReaderContentCss: (this: void, options?: ComponentOptions) => string;
 //#endregion
 //#region src/utilities/icon-glyphs.d.ts

package/dist/index.mjs

@@ -109,6 +109,7 @@ const iconMask = (name) => `var(--instui-icon-${name}) center / contain no-repea
 const SELECT_CHEVRON = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7883' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\")";
 /** Lucide `chevron-up`/`chevron-down`, masked — the NumberInput spinner glyphs (painted in currentColor). */
 const CHEVRON_UP_ICON = iconMask("chevron-up");
+/** Lucide `chevron-down`, masked — the NumberInput down spinner glyph (painted in currentColor). */
 const CHEVRON_DOWN_ICON = iconMask("chevron-down");
 /**
 * InstUI's `ai` glyph (Solid), inlined as a mask so it paints in the button's own colour — solid
@@ -172,8 +173,11 @@ function make(kind, input) {
 		}
 	};
 }
+/** Build a component record from its name and CSS builder. */
 const defineComponent = (input) => make("component", input);
+/** Build a utility record from its name and CSS builder. */
 const defineUtility = (input) => make("utility", input);
+/** Build a rule record from its name and CSS builder. */
 const defineRule = (input) => make("rule", input);
 //#endregion
 //#region src/lib/sentinel.ts
@@ -441,65 +445,81 @@ const base$1 = {
 }.rebrand;
 //#endregion
 //#region src/utilities/icon.ts
+/** The icon utility — `.instui-icon` sizing plus the shared `-icon-<name>` painter that masks a glyph, with the prefix sentinel replaced. */
 const icon = defineUtility({
 	name: "icon",
 	css: (p) => icon$1.replaceAll(SENTINEL, p)
 });
+/** The icon utility as a standalone, header-wrapped stylesheet. */
 const iconCss = icon.css;
 //#endregion
 //#region src/utilities/mask.ts
+/** The mask utility — an in-flow overlay that fills its positioned parent and centres its content, with the prefix sentinel replaced. */
 const mask = defineUtility({
 	name: "mask",
 	css: (p) => mask$1.replaceAll(SENTINEL, p)
 });
+/** The mask utility as a standalone, header-wrapped stylesheet. */
 const maskCss = mask.css;
 //#endregion
 //#region src/utilities/screen-reader-content.ts
+/** The screen-reader-content utility — visually hides content while keeping it available to assistive tech, with the prefix sentinel replaced. */
 const screenReaderContent = defineUtility({
 	name: "screen-reader-content",
 	css: (p) => screenReaderContent$1.replaceAll(SENTINEL, p)
 });
+/** The screen-reader-content utility as a standalone, header-wrapped stylesheet. */
 const screenReaderContentCss = screenReaderContent.css;
 //#endregion
 //#region src/components/alert.ts
+/** The `alert` component record: an inline message with a coloured status bar and a masked status glyph from the shared icon set. */
 const alert = defineComponent({
 	name: "alert",
 	css: (p) => alert$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `alert` stylesheet — the prefixed CSS for the status message, ready to ship as a `.css` file. */
 const alertCss = alert.css;
 //#endregion
 //#region src/components/avatar.ts
+/** The `avatar` component record: a user avatar showing initials or an image, circular by default. */
 const avatar = defineComponent({
 	name: "avatar",
 	css: (p) => avatar$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `avatar` stylesheet — the prefixed CSS for the avatar, ready to ship as a `.css` file. */
 const avatarCss = avatar.css;
 //#endregion
 //#region src/components/badge.ts
+/** The `badge` component record: a small count or status dot pinned to a target's corner. */
 const badge = defineComponent({
 	name: "badge",
 	css: (p) => badge$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `badge` stylesheet — the prefixed CSS for the count-and-status badge, ready to ship as a `.css` file. */
 const badgeCss = badge.css;
 //#endregion
 //#region src/components/billboard.ts
+/** The `billboard` component record: a large empty-state or call-to-action block with a hero graphic, a heading, and a message. */
 const billboard = defineComponent({
 	name: "billboard",
 	css: (p, options) => (billboardByTheme[options?.theme ?? "rebrand"] ?? billboardByTheme.rebrand).replaceAll(SENTINEL, p)
 });
+/** Standalone `billboard` stylesheet — the prefixed CSS for the empty-state block, ready to ship as a `.css` file. */
 const billboardCss = billboard.css;
 //#endregion
 //#region src/components/breadcrumb.ts
+/** The `breadcrumb` component record: a navigation trail with `/` separators, ending on the current page. */
 const breadcrumb = defineComponent({
 	name: "breadcrumb",
 	css: (p) => breadcrumb$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `breadcrumb` stylesheet — the prefixed CSS for the breadcrumb trail, ready to ship as a `.css` file. */
 const breadcrumbCss = breadcrumb.css;
 //#endregion
 //#region src/lib/css.ts
 /**
 * The `css` tagged-template — an identity tag that just returns the interpolated string. Authoring the
-* record builders as `` css`…` `` (rather than a bare template literal) follows the cssdoc convention:
+* record builders with the `css` tag (rather than a bare template literal) follows the cssdoc convention:
 * `@cssdoc/embedded`'s scanner recognizes a `css`-tagged template as an embedded stylesheet, so the
 * editor / language server and any `.ts`-level lint read the CSS (selectors and all), not just the doc
 * comment. It changes nothing at runtime — the emitted CSS is byte-for-byte what the plain template
@@ -511,6 +531,7 @@ const breadcrumbCss = breadcrumb.css;
 const css = (strings, ...values) => strings.reduce((out, chunk, i) => out + (i ? String(values[i - 1]) : "") + chunk, "");
 //#endregion
 //#region src/components/button.ts
+/** The `button` component record: an accessible action control styled from the token palette, primary by default. */
 const button = defineComponent({
 	name: "button",
 	css: (p) => css`
@@ -789,69 +810,88 @@ const button = defineComponent({
 /* InstUI's withBorder={false}: drop the border but keep the button's box (border-box sizing). */
 .${p}button.-without-border { border-style: none; }`
 });
+/** Standalone `button` stylesheet — the prefixed CSS for the action button, ready to ship as a `.css` file. */
 const buttonCss = button.css;
 //#endregion
 //#region src/components/byline.ts
+/** The `byline` component record: a media object pairing a hero figure with a title and a description. */
 const byline = defineComponent({
 	name: "byline",
 	css: (p) => byline$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `byline` stylesheet — the prefixed CSS for the media object, ready to ship as a `.css` file. */
 const bylineCss = byline.css;
 //#endregion
 //#region src/components/calendar.ts
+/** The `calendar` component record: a static month grid with navigation, weekday headers, and day cells. */
 const calendar = defineComponent({
 	name: "calendar",
 	css: (p) => calendar$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `calendar` stylesheet — the prefixed CSS for the month grid, ready to ship as a `.css` file. */
 const calendarCss = calendar.css;
 //#endregion
 //#region src/components/checkbox.ts
+/** The `checkbox` component record: a native checkbox with its label, or a switch via `-variant-toggle`. */
 const checkbox = defineComponent({
 	name: "checkbox",
 	css: (p) => checkbox$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `checkbox` stylesheet — the prefixed CSS for the checkbox and switch, ready to ship as a `.css` file. */
 const checkboxCss = checkbox.css;
 //#endregion
 //#region src/components/close-button.ts
+/** The `closeButton` component record: a transparent icon button that draws its own × glyph, in three sizes plus an inverse variant. */
 const closeButton = defineComponent({
 	name: "close-button",
 	css: (p) => closeButton$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `closeButton` stylesheet — the prefixed CSS for the close button, ready to ship as a `.css` file. */
 const closeButtonCss = closeButton.css;
 //#endregion
 //#region src/components/context-view.ts
+/** The `contextView` component record: an elevated callout with a caret, positionable on any side and usable as a native `[popover]`. */
 const contextView = defineComponent({
 	name: "context-view",
 	css: (p) => contextView$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `contextView` stylesheet — the prefixed CSS for the caret callout, ready to ship as a `.css` file. */
 const contextViewCss = contextView.css;
 //#endregion
 //#region src/components/file-drop.ts
+/** The `fileDrop` component record: a file dropzone with hover, accepted, and rejected states. */
 const fileDrop = defineComponent({
 	name: "file-drop",
 	css: (p) => fileDrop$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `fileDrop` stylesheet — the prefixed CSS for the file dropzone, ready to ship as a `.css` file. */
 const fileDropCss = fileDrop.css;
 //#endregion
 //#region src/components/form-field.ts
+/** The `formField` component record: a wrapper pairing a label with its controls, in inline, required, or readonly layouts. */
 const formField = defineComponent({
 	name: "form-field",
 	css: (p) => formField$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `formField` stylesheet — the prefixed CSS for the form-field wrapper, ready to ship as a `.css` file. */
 const formFieldCss = formField.css;
 //#endregion
 //#region src/components/form-field-group.ts
+/** The `formFieldGroup` component record: a `<fieldset>` group with a legend, a column or inline layout, and configurable spacing. */
 const formFieldGroup = defineComponent({
 	name: "form-field-group",
 	css: (p) => formFieldGroup$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `formFieldGroup` stylesheet — the prefixed CSS for the fieldset group, ready to ship as a `.css` file. */
 const formFieldGroupCss = formFieldGroup.css;
 //#endregion
 //#region src/components/form-field-messages.ts
+/** The `formFieldMessages` component record: field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success. */
 const formFieldMessages = defineComponent({
 	name: "form-field-messages",
 	css: (p) => formFieldMessages$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `formFieldMessages` stylesheet — the prefixed CSS for the field messages, ready to ship as a `.css` file. */
 const formFieldMessagesCss = formFieldMessages.css;
 //#endregion
 //#region src/lib/headings.ts
@@ -878,6 +918,7 @@ const HEADING_LEVELS = [
 const headingLevelRules = (selector) => HEADING_LEVELS.map((l) => `${selector(l)} { font-size: var(--instui-component-heading-${l}-font-size); font-weight: var(--instui-component-heading-${l}-font-weight); }`).join("\n");
 //#endregion
 //#region src/components/heading.ts
+/** The `heading` component record: heading typography from `-level-h1` through `-level-h6`. */
 const heading = defineComponent({
 	name: "heading",
 	css: (p) => css`
@@ -940,20 +981,25 @@ ${headingLevelRules((l) => `.${p}heading.-level-${l}`)}
   padding-top: var(--instui-component-heading-border-padding);
 }`
 });
+/** Standalone `heading` stylesheet — the prefixed CSS for the heading type, ready to ship as a `.css` file. */
 const headingCss = heading.css;
 //#endregion
 //#region src/components/img.ts
+/** The `img` component record: a styled `<img>` with stackable display, crop, and effect modifiers. */
 const img = defineComponent({
 	name: "img",
 	css: (p) => img$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `img` stylesheet — the prefixed CSS for the styled image, ready to ship as a `.css` file. */
 const imgCss = img.css;
 //#endregion
 //#region src/components/in-place-edit.ts
+/** The `inPlaceEdit` component record: a `[contenteditable]` that reads as text until focused, then shows input chrome. */
 const inPlaceEdit = defineComponent({
 	name: "in-place-edit",
 	css: (p) => inPlaceEdit$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `inPlaceEdit` stylesheet — the prefixed CSS for the in-place editor, ready to ship as a `.css` file. */
 const inPlaceEditCss = inPlaceEdit.css;
 //#endregion
 //#region src/lib/field-controls.ts
@@ -1082,6 +1128,7 @@ ${root}.-size-lg { block-size: ${t("height-lg")}; padding-inline: ${t("padding-h
 }
 //#endregion
 //#region src/components/input-group.ts
+/** The `inputGroup` component record: a facade around a text input with leading and trailing icon slots. */
 const inputGroup = defineComponent({
 	name: "input-group",
 	css: (p) => css`
@@ -1107,44 +1154,56 @@ const inputGroup = defineComponent({
 ${inputFacadeBase(p, "input-group")}
 .${p}input-group.-should-not-wrap { flex-wrap: nowrap; }`
 });
+/** Standalone `inputGroup` stylesheet — the prefixed CSS for the input group, ready to ship as a `.css` file. */
 const inputGroupCss = inputGroup.css;
 //#endregion
 //#region src/components/link.ts
+/** The `link` component record: a styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms. */
 const link = defineComponent({
 	name: "link",
 	css: (p) => link$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `link` stylesheet — the prefixed CSS for the hyperlink, ready to ship as a `.css` file. */
 const linkCss = link.css;
 //#endregion
 //#region src/components/list.ts
+/** The `list` component record: a list with token-driven item spacing. */
 const list = defineComponent({
 	name: "list",
 	css: (p) => list$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `list` stylesheet — the prefixed CSS for the spaced list, ready to ship as a `.css` file. */
 const listCss = list.css;
 //#endregion
 //#region src/components/menu.ts
+/** The `menu` component record: a dropdown surface of items, groups, and separators. */
 const menu = defineComponent({
 	name: "menu",
 	css: (p) => menu$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `menu` stylesheet — the prefixed CSS for the dropdown menu, ready to ship as a `.css` file. */
 const menuCss = menu.css;
 //#endregion
 //#region src/components/metric.ts
+/** The `metric` component record: a labelled statistic — a large value above a caption. */
 const metric = defineComponent({
 	name: "metric",
 	css: (p) => metric$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `metric` stylesheet — the prefixed CSS for the statistic, ready to ship as a `.css` file. */
 const metricCss = metric.css;
 //#endregion
 //#region src/components/modal.ts
+/** The `modal` component record: a dialog surface with header, body, and footer parts, working on a native `<dialog>`. */
 const modal = defineComponent({
 	name: "modal",
 	css: (p) => modal$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `modal` stylesheet — the prefixed CSS for the dialog surface, ready to ship as a `.css` file. */
 const modalCss = modal.css;
 //#endregion
 //#region src/components/number-input.ts
+/** The `numberInput` component record: a number-input facade with a plus/minus spinner column. */
 const numberInput = defineComponent({
 	name: "number-input",
 	css: (p) => {
@@ -1230,79 +1289,101 @@ ${root} .arrows button::before {
 ${root} .arrows button.down::before { -webkit-mask: ${CHEVRON_DOWN_ICON}; mask: ${CHEVRON_DOWN_ICON}; }`;
 	}
 });
+/** Standalone `numberInput` stylesheet — the prefixed CSS for the number input, ready to ship as a `.css` file. */
 const numberInputCss = numberInput.css;
 //#endregion
 //#region src/components/pagination.ts
+/** The `pagination` component record: page navigation with numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps. */
 const pagination = defineComponent({
 	name: "pagination",
 	css: (p) => pagination$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `pagination` stylesheet — the prefixed CSS for the page navigation, ready to ship as a `.css` file. */
 const paginationCss = pagination.css;
 //#endregion
 //#region src/components/pill.ts
+/** The `pill` component record: a compact status label that takes a leading glyph via the `-icon-<name>` form. */
 const pill = defineComponent({
 	name: "pill",
 	css: (p) => pill$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `pill` stylesheet — the prefixed CSS for the status pill, ready to ship as a `.css` file. */
 const pillCss = pill.css;
 //#endregion
 //#region src/components/popover.ts
+/** The `popover` component record: an elevated surface for a native `[popover]`, placed with CSS anchor positioning. */
 const popover = defineComponent({
 	name: "popover",
 	css: (p) => popover$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `popover` stylesheet — the prefixed CSS for the popover surface, ready to ship as a `.css` file. */
 const popoverCss = popover.css;
 //#endregion
 //#region src/components/progress.ts
+/** The `progress` component record: a determinate progress bar with a coloured meter, sizes, and an optional value label. */
 const progress = defineComponent({
 	name: "progress",
 	css: (p) => progress$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `progress` stylesheet — the prefixed CSS for the progress bar, ready to ship as a `.css` file. */
 const progressCss = progress.css;
 //#endregion
 //#region src/components/progress-circle.ts
+/** The `progressCircle` component record: a circular progress ring driven by a `--value` (0–100) custom property. */
 const progressCircle = defineComponent({
 	name: "progress-circle",
 	css: (p) => progressCircle$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `progressCircle` stylesheet — the prefixed CSS for the progress ring, ready to ship as a `.css` file. */
 const progressCircleCss = progressCircle.css;
 //#endregion
 //#region src/components/radio.ts
+/** The `radio` component record: a native radio button with its label. */
 const radio = defineComponent({
 	name: "radio",
 	css: (p) => radio$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `radio` stylesheet — the prefixed CSS for the radio button, ready to ship as a `.css` file. */
 const radioCss = radio.css;
 //#endregion
 //#region src/components/radio-input-group.ts
+/** The `radioInputGroup` component record: a single-select radio `<fieldset>`, plain or as a connected segmented toggle. */
 const radioInputGroup = defineComponent({
 	name: "radio-input-group",
 	css: (p) => radioInputGroup$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `radioInputGroup` stylesheet — the prefixed CSS for the radio group, ready to ship as a `.css` file. */
 const radioInputGroupCss = radioInputGroup.css;
 //#endregion
 //#region src/components/range-input.ts
+/** The `rangeInput` component record: a styled range slider with an inverse value bubble. */
 const rangeInput = defineComponent({
 	name: "range-input",
 	css: (p) => rangeInput$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `rangeInput` stylesheet — the prefixed CSS for the range slider, ready to ship as a `.css` file. */
 const rangeInputCss = rangeInput.css;
 //#endregion
 //#region src/components/rating.ts
+/** The `rating` component record: a star rating with filled and empty glyphs and an optional numeric label. */
 const rating = defineComponent({
 	name: "rating",
 	css: (p) => rating$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `rating` stylesheet — the prefixed CSS for the star rating, ready to ship as a `.css` file. */
 const ratingCss = rating.css;
 //#endregion
 //#region src/components/side-nav-bar.ts
+/** The `sideNavBar` component record: a vertical navigation rail of icon-over-label items, with a minimized icons-only mode. */
 const sideNavBar = defineComponent({
 	name: "side-nav-bar",
 	css: (p) => sideNavBar$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `sideNavBar` stylesheet — the prefixed CSS for the navigation rail, ready to ship as a `.css` file. */
 const sideNavBarCss = sideNavBar.css;
 //#endregion
 //#region src/components/simple-select.ts
+/** The `simpleSelect` component record: a styled native `<select>` with a caret, matching the text-input states and sizes. */
 const simpleSelect = defineComponent({
 	name: "simple-select",
 	css: (p) => {
@@ -1350,44 +1431,56 @@ ${fieldControlBase(p, "simple-select", "text-input")}
 .${p}simple-select.-size-lg { block-size: ${t("height-lg")}; padding-inline: ${t("padding-horizontal-lg")}; padding-inline-end: calc(${t("padding-horizontal-lg")} + 1.5rem); font-size: ${t("font-size-lg")}; }`;
 	}
 });
+/** Standalone `simpleSelect` stylesheet — the prefixed CSS for the native select, ready to ship as a `.css` file. */
 const simpleSelectCss = simpleSelect.css;
 //#endregion
 //#region src/components/spinner.ts
+/** The `spinner` component record: an animated loading ring; pair it with `role="status"` and an aria-label. */
 const spinner = defineComponent({
 	name: "spinner",
 	css: (p) => spinner$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `spinner` stylesheet — the prefixed CSS for the loading ring, ready to ship as a `.css` file. */
 const spinnerCss = spinner.css;
 //#endregion
 //#region src/components/table.ts
+/** The `table` component record: a styled data table for `th` and `td` plus an optional caption, with hover, fixed, and stacked-card layouts. */
 const table = defineComponent({
 	name: "table",
 	css: (p) => table$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `table` stylesheet — the prefixed CSS for the data table, ready to ship as a `.css` file. */
 const tableCss = table.css;
 //#endregion
 //#region src/components/tabs.ts
+/** The `tabs` component record: a tabbed panel set with a tab list, selectable tabs, and their panels. */
 const tabs = defineComponent({
 	name: "tabs",
 	css: (p) => tabs$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `tabs` stylesheet — the prefixed CSS for the tabbed panels, ready to ship as a `.css` file. */
 const tabsCss = tabs.css;
 //#endregion
 //#region src/components/tag.ts
+/** The `tag` component record: an inline chip for a keyword or a filter. */
 const tag = defineComponent({
 	name: "tag",
 	css: (p) => tag$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `tag` stylesheet — the prefixed CSS for the chip, ready to ship as a `.css` file. */
 const tagCss = tag.css;
 //#endregion
 //#region src/components/text.ts
+/** The `text` component record: body-text typography with size, weight, colour, and style modifiers. */
 const text = defineComponent({
 	name: "text",
 	css: (p) => text$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `text` stylesheet — the prefixed CSS for the body typography, ready to ship as a `.css` file. */
 const textCss = text.css;
 //#endregion
 //#region src/components/text-area.ts
+/** The `textArea` component record: a styled, resizable native `<textarea>` sharing the text input's states and sizes. */
 const textArea = defineComponent({
 	name: "text-area",
 	css: (p) => {
@@ -1420,9 +1513,11 @@ ${fieldControlBase(p, "text-area", "text-area")}
 .${p}text-area.-size-lg { font-size: ${t("font-size-lg")}; }`;
 	}
 });
+/** Standalone `textArea` stylesheet — the prefixed CSS for the textarea, ready to ship as a `.css` file. */
 const textAreaCss = textArea.css;
 //#endregion
 //#region src/components/text-input.ts
+/** The `textInput` component record: a styled native `<input>` — including `date`, `time`, and `datetime-local`, where the browser supplies the picker — with validation states and sizes. */
 const textInput = defineComponent({
 	name: "text-input",
 	css: (p) => {
@@ -1456,48 +1551,61 @@ ${fieldControlBase(p, "text-input", "text-input")}
 .${p}text-input.-size-lg { block-size: ${t("height-lg")}; padding-inline: ${t("padding-horizontal-lg")}; font-size: ${t("font-size-lg")}; }`;
 	}
 });
+/** Standalone `textInput` stylesheet — the prefixed CSS for the text input, ready to ship as a `.css` file. */
 const textInputCss = textInput.css;
 //#endregion
 //#region src/components/toggle-details.ts
+/** The `toggleDetails` component record: a styled native `<details>` disclosure with a rotating chevron. */
 const toggleDetails = defineComponent({
 	name: "toggle-details",
 	css: (p) => toggleDetails$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `toggleDetails` stylesheet — the prefixed CSS for the details disclosure, ready to ship as a `.css` file. */
 const toggleDetailsCss = toggleDetails.css;
 //#endregion
 //#region src/components/toggle-group.ts
+/** The `toggleGroup` component record: a bordered disclosure built on `<details>`, with a chevron summary row and collapsible content. */
 const toggleGroup = defineComponent({
 	name: "toggle-group",
 	css: (p) => toggleGroup$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `toggleGroup` stylesheet — the prefixed CSS for the bordered disclosure, ready to ship as a `.css` file. */
 const toggleGroupCss = toggleGroup.css;
 //#endregion
 //#region src/components/tooltip.ts
+/** The `tooltip` component record: a CSS hover-and-focus tooltip bubble, positionable on any side. */
 const tooltip = defineComponent({
 	name: "tooltip",
 	css: (p) => tooltip$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `tooltip` stylesheet — the prefixed CSS for the tooltip bubble, ready to ship as a `.css` file. */
 const tooltipCss = tooltip.css;
 //#endregion
 //#region src/components/tray.ts
+/** The `tray` component record: an edge-pinned panel that slides in from any side, as a native `[popover]` or `<dialog>`. */
 const tray = defineComponent({
 	name: "tray",
 	css: (p) => tray$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `tray` stylesheet — the prefixed CSS for the sliding tray, ready to ship as a `.css` file. */
 const trayCss = tray.css;
 //#endregion
 //#region src/components/tree-browser.ts
+/** The `treeBrowser` component record: a disclosure tree of nested collections and leaf items, with rotating chevrons. */
 const treeBrowser = defineComponent({
 	name: "tree-browser",
 	css: (p) => treeBrowser$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `treeBrowser` stylesheet — the prefixed CSS for the disclosure tree, ready to ship as a `.css` file. */
 const treeBrowserCss = treeBrowser.css;
 //#endregion
 //#region src/components/truncate.ts
+/** The `truncate` component record: single-line ellipsis truncation, or a multi-line clamp via `--lines`. */
 const truncate = defineComponent({
 	name: "truncate",
 	css: (p) => truncate$1.replaceAll(SENTINEL, p)
 });
+/** Standalone `truncate` stylesheet — the prefixed CSS for the truncation utility, ready to ship as a `.css` file. */
 const truncateCss = truncate.css;
 //#endregion
 //#region src/components/index.ts
@@ -1558,11 +1666,11 @@ const COMPONENTS = [
 ];
 //#endregion
 //#region src/rules/base.ts
+/** The base rule — the opt-in global reset (box-sizing, page surface, base text and font, color-scheme, link defaults), with the prefix sentinel replaced. */
 const base = defineRule({
 	name: "base",
 	css: (p) => base$1.replaceAll(SENTINEL, p)
 });
-base.css;
 //#endregion
 //#region src/declarations/focus.ts
 /**
@@ -1852,6 +1960,7 @@ function selectCss(options = {}) {
 	const prefix = options.prefix || "";
 	return wrap("select", prefix, select.replaceAll(SENTINEL, ns(prefix)));
 }
+/** The View utility as a standalone, header-wrapped stylesheet. */
 const viewCss = defineUtility({
 	name: "view",
 	css: (p) => {
@@ -1994,6 +2103,7 @@ const viewCss = defineUtility({
 ${rules.join("\n")}`;
 	}
 }).css;
+/** The spacing utilities as a standalone, header-wrapped stylesheet. */
 const spacingUtilitiesCss = defineUtility({
 	name: "spacing",
 	css: (p) => {
@@ -2020,6 +2130,7 @@ const spacingUtilitiesCss = defineUtility({
 ${rules.join("\n")}`;
 	}
 }).css;
+/** The layout utilities as a standalone, header-wrapped stylesheet. */
 const layoutUtilitiesCss = defineUtility({
 	name: "layout",
 	css: (p) => css`/**
@@ -2046,6 +2157,7 @@ ${[...[
 		["justify", "justify"]
 	].map(([name, value]) => `.${p}text-align-${name} { text-align: ${value}; }`)].join("\n")}`
 }).css;
+/** The responsive-visibility utilities as a standalone, header-wrapped stylesheet. */
 const responsiveUtilitiesCss = defineUtility({
 	name: "responsive",
 	css: (p) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantoken/components",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "An InstUI-look CSS component library from the pantoken tokens: prose/content styling plus class-based components (button, alert, badge).",
   "homepage": "https://pantoken.iywahl.com",
   "bugs": "https://github.com/thedannywahl/pantoken/issues",