@wtfalch/design 0.3.0 → 0.3.1

package/README.md

@@ -169,7 +169,7 @@ case nobody has had; when it comes, the product entry is where to bind it.
 
 ## Status
 
-`0.3.0`. Twenty-eight components, every one of the 70 gallery specimens
+`0.3.1`. Twenty-eight components, every one of the 70 gallery specimens
 photographed in four themes, the open windows photographed too, and the
 contrast, reduced-motion and keyboard rules are tests rather than sentences.
 It came out of [tf](https://github.com/wtfalch/tf), which is its first consumer;

package/dist/components/Brand.d.ts

@@ -1,4 +1,4 @@
-import { type BrandName } from './brandMarks';
+import { type BrandName } from './brandMarks.js';
 /**
  * A product's mark, at header size.
  *

package/dist/components/Brand.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BRAND_MARKS, BRAND_NAMES } from './brandMarks';
+import { BRAND_MARKS, BRAND_NAMES } from './brandMarks.js';
 /**
  * A product's mark, at header size.
  *

package/dist/components/Callout.d.ts

@@ -19,7 +19,7 @@
  * reason, because a message that expires while you are reading it was never
  * really shown.
  */
-import { type IconName } from './Icon';
+import { type IconName } from './Icon.js';
 export default function Callout({ tone, children, icon, timed, onDismiss, className, }: {
     tone?: 'info' | 'good' | 'warn' | 'bad';
     children: React.ReactNode;

package/dist/components/Callout.js

@@ -21,7 +21,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * really shown.
  */
 import { useEffect, useRef, useState } from 'react';
-import Icon from './Icon';
+import Icon from './Icon.js';
 /** Long enough to read twice, which is how long it takes to notice something
  *  appeared and then read it.
  *

package/dist/components/Card.d.ts

@@ -17,7 +17,7 @@
  * word twice to a screen reader. It is there to make a page of cards scannable
  * by shape, which is a thing eyes do and readers do not.
  */
-import { type IconName } from './Icon';
+import { type IconName } from './Icon.js';
 export default function Card({ icon, title, description, action, children, tone, onClick, selected, className, }: {
     icon?: IconName;
     title?: React.ReactNode;

package/dist/components/Card.js

@@ -18,7 +18,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * word twice to a screen reader. It is there to make a page of cards scannable
  * by shape, which is a thing eyes do and readers do not.
  */
-import Icon from './Icon';
+import Icon from './Icon.js';
 export default function Card({ icon, title, description, action, children, tone, onClick, selected, className, }) {
     const head = (title || description || action) && (_jsxs("div", { className: "card-head", children: [icon && (_jsx("span", { className: "card-icon", "aria-hidden": "true", children: _jsx(Icon, { name: icon, size: 20 }) })), _jsxs("div", { className: "card-headings", children: [title && _jsx("strong", { className: "card-title", children: title }), description && _jsx("div", { className: "card-desc", children: description })] }), action && _jsx("div", { className: "card-action", children: action })] }));
     const cls = `card${onClick ? ' card-pick' : ''}${selected ? ' card-on' : ''}${tone ? ` card-${tone}` : ''}${className ? ` ${className}` : ''}`;

package/dist/components/DangerZone.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import Button from './Button';
-import Field from './Field';
-import Input from './Input';
+import Button from './Button.js';
+import Field from './Field.js';
+import Input from './Input.js';
 /**
  * The bottom of a settings panel, where the things that cannot be undone live.
  *

package/dist/components/Dialog.js

@@ -20,7 +20,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * decision that must be made has no Escape key, because dismissing it would be
  * choosing on the reader's behalf.
  */
-import Modal from './Modal';
+import Modal from './Modal.js';
 export default function Dialog({ title, children, onCancel, actions, tone, }) {
     return (_jsx(Modal, { title: title, className: `dialog${tone ? ` dialog-${tone}` : ''}`, onClose: onCancel, dismissOnScrim: false, 
         /* The answers are the buttons. A ✕ beside them is a third answer that

package/dist/components/Empty.d.ts

@@ -27,8 +27,8 @@
  * itself in whatever it was put in. Same component, because it is the same
  * three jobs: say it is empty, say why, offer the next thing.
  */
-import { type IconName } from './Icon';
-import { type IllustrationName } from './Illustration';
+import { type IconName } from './Icon.js';
+import { type IllustrationName } from './Illustration.js';
 export default function Empty({ icon, illustration, children, action, className, }: {
     /** Decoration. Omit it where the surrounding card already carries one. */
     icon?: IconName;

package/dist/components/Empty.js

@@ -28,8 +28,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * itself in whatever it was put in. Same component, because it is the same
  * three jobs: say it is empty, say why, offer the next thing.
  */
-import Icon from './Icon';
-import Illustration from './Illustration';
+import Icon from './Icon.js';
+import Illustration from './Illustration.js';
 export default function Empty({ icon, illustration, children, action, className, }) {
     return (_jsxs("div", { className: `nothing${illustration ? ' nothing-surface' : ''}${className ? ` ${className}` : ''}`, children: [illustration ? (_jsx(Illustration, { name: illustration, size: 160, className: "nothing-figure" })) : (icon && (_jsx("span", { className: "nothing-mark", "aria-hidden": "true", children: _jsx(Icon, { name: icon, size: 20 }) }))), _jsx("p", { className: "nothing-said", children: children }), action && _jsx("div", { className: "nothing-act", children: action })] }));
 }

package/dist/components/Icon.d.ts

@@ -51,7 +51,7 @@
  *   spinner   arrow-spin
   file      file
  */
-import type { IconName } from './iconNames';
+import type { IconName } from './iconNames.js';
 export type { IconName };
 export default function Icon({ name, size, className, title, }: {
     name: IconName;

package/dist/components/Icon.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ICONS } from './icons';
+import { ICONS } from './icons.js';
 export default function Icon({ name, size = 18, className, title, }) {
     /* The table with its measured views is `icons.ts`, beside this file. */
     const g = ICONS[name];

package/dist/components/Illustration.d.ts

@@ -23,7 +23,7 @@
  * went wrong is noise; the caller passes `alt` only when the picture is the
  * message, which so far it never is.
  */
-import { type IllustrationName } from '../illustrations';
+import { type IllustrationName } from '../illustrations.js';
 export type { IllustrationName };
 export default function Illustration({ name, size, alt, className, }: {
     name: IllustrationName;

package/dist/components/Illustration.js

@@ -24,7 +24,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * went wrong is noise; the caller passes `alt` only when the picture is the
  * message, which so far it never is.
  */
-import { ILLUSTRATION_SVG } from '../illustrations';
+import { ILLUSTRATION_SVG } from '../illustrations.js';
 /* Read at build time and inlined, so there is no request and nothing to fail on
    an offline first run -- which is the run these are most likely to appear on.
 

package/dist/components/Input.js

@@ -40,7 +40,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { forwardRef, useState } from 'react';
 import { ToggleButton } from 'react-aria-components';
-import Icon from './Icon';
+import Icon from './Icon.js';
 const Input = forwardRef(function Input({ size = 'md', mono, block, className, type = 'text', ...rest }, ref) {
     const classes = [
         size === 'md' ? '' : `size-${size}`,

package/dist/components/Modal.js

@@ -26,8 +26,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useEffect, useId, useRef } from 'react';
 import { Modal as AriaModal, Dialog, Heading, ModalOverlay } from 'react-aria-components';
-import Button from './Button';
-import Icon from './Icon';
+import Button from './Button.js';
+import Icon from './Icon.js';
 /* The trap is the same obligation wherever it applies, and the studio needs it
    without being shaped like this, so it lives in a hook rather than here. */
 export default function Modal({ title, description, subtitle, head, children, footer, footerClass, onClose, closeDisabled = false, width, bodyClass, className, dismissOnScrim = true, closeButton = true, labelledBy, }) {

package/dist/components/Toast.js

@@ -17,7 +17,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * The failing case passes `tone="bad"`, which is the one that promotes itself.
  */
 import { createContext, useContext, useMemo, useState } from 'react';
-import Icon from './Icon';
+import Icon from './Icon.js';
 import { UNSTABLE_Toast as AriaToast, Button, Text, UNSTABLE_ToastContent as ToastContent, UNSTABLE_ToastQueue as ToastQueue, UNSTABLE_ToastRegion as ToastRegion, } from 'react-aria-components';
 const MARK = {
     info: 'info',

package/dist/components/Tour.js

@@ -24,8 +24,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import Button from './Button';
-import { markTourSeen } from './tourMarker';
+import Button from './Button.js';
+import { markTourSeen } from './tourMarker.js';
 export default function Tour({ stops, onDone, storageKey, }) {
     const [at, setAt] = useState(0);
     const [box, setBox] = useState(null);

package/dist/components/icons.d.ts

@@ -1,4 +1,4 @@
-import type { IconName } from './iconNames';
+import type { IconName } from './iconNames.js';
 /** A glyph, with the viewBox it is drawn *at* rather than the one it shipped in. */
 export interface Glyph {
     /** `x y w h`, measured. Not the source viewBox. */

package/dist/index.d.ts

@@ -16,69 +16,69 @@
  * exists to prevent, and several of them are the only written record of a bug
  * that shipped. They are worth more than the code around them.
  */
-export { default as Brand } from './components/Brand';
+export { default as Brand } from './components/Brand.js';
 /** Every product's mark by name, and the path itself for an icon cut from
  *  the same drawing. */
-export { BRAND_MARKS, BRAND_NAMES } from './components/brandMarks';
-export type { BrandName, FillMark, Mark, StrokeMark } from './components/brandMarks';
-export { default as Button } from './components/Button';
-export type { Props as ButtonProps } from './components/Button';
-export { default as Callout } from './components/Callout';
-export { default as Card } from './components/Card';
-export { default as Checkbox } from './components/Checkbox';
-export { DangerAction, default as DangerZone } from './components/DangerZone';
-export { default as Dialog } from './components/Dialog';
-export { default as Empty } from './components/Empty';
-export { default as Field } from './components/Field';
-export type { FieldWiring } from './components/Field';
-export { default as Icon } from './components/Icon';
-export { ICON_NAMES } from './components/iconNames';
-export type { IconName } from './components/iconNames';
-export { default as Illustration } from './components/Illustration';
-export { default as Input } from './components/Input';
-export type { Props as InputProps } from './components/Input';
-export { default as Markdown } from './components/Markdown';
-export { default as Modal } from './components/Modal';
-export { default as Pill } from './components/Pill';
-export { default as Progress } from './components/Progress';
-export { Row, Rows } from './components/Rows';
-export { default as Select } from './components/Select';
-export { default as SizeGrid } from './components/SizeGrid';
-export { default as Skeleton } from './components/Skeleton';
-export { default as Slider } from './components/Slider';
-export { default as Table } from './components/Table';
-export type { Column } from './components/Table';
-export { default as Tabs } from './components/Tabs';
-export type { Tab, TabGroup } from './components/Tabs';
-export { default as Textarea } from './components/Textarea';
-export type { Props as TextareaProps } from './components/Textarea';
-export { Toast, ToastHost, useToast } from './components/Toast';
-export { default as Toggle } from './components/Toggle';
-export { default as Tooltip } from './components/Tooltip';
-export { default as Tour } from './components/Tour';
-export type { TourStop } from './components/Tour';
+export { BRAND_MARKS, BRAND_NAMES } from './components/brandMarks.js';
+export type { BrandName, FillMark, Mark, StrokeMark } from './components/brandMarks.js';
+export { default as Button } from './components/Button.js';
+export type { Props as ButtonProps } from './components/Button.js';
+export { default as Callout } from './components/Callout.js';
+export { default as Card } from './components/Card.js';
+export { default as Checkbox } from './components/Checkbox.js';
+export { DangerAction, default as DangerZone } from './components/DangerZone.js';
+export { default as Dialog } from './components/Dialog.js';
+export { default as Empty } from './components/Empty.js';
+export { default as Field } from './components/Field.js';
+export type { FieldWiring } from './components/Field.js';
+export { default as Icon } from './components/Icon.js';
+export { ICON_NAMES } from './components/iconNames.js';
+export type { IconName } from './components/iconNames.js';
+export { default as Illustration } from './components/Illustration.js';
+export { default as Input } from './components/Input.js';
+export type { Props as InputProps } from './components/Input.js';
+export { default as Markdown } from './components/Markdown.js';
+export { default as Modal } from './components/Modal.js';
+export { default as Pill } from './components/Pill.js';
+export { default as Progress } from './components/Progress.js';
+export { Row, Rows } from './components/Rows.js';
+export { default as Select } from './components/Select.js';
+export { default as SizeGrid } from './components/SizeGrid.js';
+export { default as Skeleton } from './components/Skeleton.js';
+export { default as Slider } from './components/Slider.js';
+export { default as Table } from './components/Table.js';
+export type { Column } from './components/Table.js';
+export { default as Tabs } from './components/Tabs.js';
+export type { Tab, TabGroup } from './components/Tabs.js';
+export { default as Textarea } from './components/Textarea.js';
+export type { Props as TextareaProps } from './components/Textarea.js';
+export { Toast, ToastHost, useToast } from './components/Toast.js';
+export { default as Toggle } from './components/Toggle.js';
+export { default as Tooltip } from './components/Tooltip.js';
+export { default as Tour } from './components/Tour.js';
+export type { TourStop } from './components/Tour.js';
 /** The tour's memory. `forgetTour` is what onboarding calls so a config reset
  *  replays the tour rather than leaving it suppressed by a browser that has
  *  seen it. */
-export { DEFAULT_TOUR_KEY, forgetTour, markTourSeen, tourSeen } from './components/tourMarker';
+export { DEFAULT_TOUR_KEY, forgetTour, markTourSeen, tourSeen } from './components/tourMarker.js';
 /** The art. Its own module because it is ~200 KB of inlined SVG — referenced
  *  only by `Illustration`, so a bundler that drops the component drops the art
  *  with it. */
-export { ILLUSTRATIONS } from './illustrations';
-export type { IllustrationName } from './illustrations';
+export { ILLUSTRATIONS } from './illustrations.js';
+export type { IllustrationName } from './illustrations.js';
 /** The focus trap, for a window that genuinely is not `Modal`'s shape. Use
  *  `Modal` first: every one of the app's eight hand-built modals shipped
  *  without a trap, which is what this exists to stop happening again. */
-export { useTrapFocus } from './hooks/useTrapFocus';
-export { DEFAULT_THEME, DERIVED_TOKENS, FIXED_TOKENS, THEMES, TOKEN_KEYS, applyTheme, defineTheme, isTheme, resolvedTokens, } from './themes';
-export type { Theme, ThemeTokens } from './themes';
+export { useTrapFocus } from './hooks/useTrapFocus.js';
+export { DEFAULT_THEME, DERIVED_TOKENS, FIXED_TOKENS, THEMES, TOKEN_KEYS, applyTheme, defineTheme, isTheme, resolvedTokens, } from './themes/index.js';
+export type { Theme, ThemeTokens } from './themes/index.js';
 /** A theme as the rule a consumer ships for first paint, generated so it
  *  cannot drift from the object; and a product's whole stylesheet the same way. */
-export { productCss, productStylesheet, themeCss, themeId } from './themes/css';
+export { productCss, productStylesheet, themeCss, themeId } from './themes/css.js';
 /** The measurement behind the contrast rule, for a theme that is yours. */
-export { luminance, ratio } from './contrast';
+export { luminance, ratio } from './contrast.js';
 /** The products: the layer between the system and a theme. Each also ships
  *  as its own entry, `@wtfalch/design/<name>` and `<name>.css`, where `Brand`,
  *  `THEMES` and `applyTheme` are that product's. */
-export { PRODUCTS, bindProduct, defineProduct, productTheme } from './products';
-export type { Product } from './products';
+export { PRODUCTS, bindProduct, defineProduct, productTheme } from './products/index.js';
+export type { Product } from './products/index.js';

package/dist/index.js

@@ -16,60 +16,60 @@
  * exists to prevent, and several of them are the only written record of a bug
  * that shipped. They are worth more than the code around them.
  */
-export { default as Brand } from './components/Brand';
+export { default as Brand } from './components/Brand.js';
 /** Every product's mark by name, and the path itself for an icon cut from
  *  the same drawing. */
-export { BRAND_MARKS, BRAND_NAMES } from './components/brandMarks';
-export { default as Button } from './components/Button';
-export { default as Callout } from './components/Callout';
-export { default as Card } from './components/Card';
-export { default as Checkbox } from './components/Checkbox';
+export { BRAND_MARKS, BRAND_NAMES } from './components/brandMarks.js';
+export { default as Button } from './components/Button.js';
+export { default as Callout } from './components/Callout.js';
+export { default as Card } from './components/Card.js';
+export { default as Checkbox } from './components/Checkbox.js';
 /* `DangerAction` is a component -- a row inside the zone -- and was exported as
    a type until the first consumer wrote `<DangerAction>` and TypeScript refused
    it (TS1362). Nothing in this repo renders one, which is how it went unseen. */
-export { DangerAction, default as DangerZone } from './components/DangerZone';
-export { default as Dialog } from './components/Dialog';
-export { default as Empty } from './components/Empty';
-export { default as Field } from './components/Field';
-export { default as Icon } from './components/Icon';
-export { ICON_NAMES } from './components/iconNames';
-export { default as Illustration } from './components/Illustration';
-export { default as Input } from './components/Input';
-export { default as Markdown } from './components/Markdown';
-export { default as Modal } from './components/Modal';
-export { default as Pill } from './components/Pill';
-export { default as Progress } from './components/Progress';
-export { Row, Rows } from './components/Rows';
-export { default as Select } from './components/Select';
-export { default as SizeGrid } from './components/SizeGrid';
-export { default as Skeleton } from './components/Skeleton';
-export { default as Slider } from './components/Slider';
-export { default as Table } from './components/Table';
-export { default as Tabs } from './components/Tabs';
-export { default as Textarea } from './components/Textarea';
-export { ToastHost, useToast } from './components/Toast';
-export { default as Toggle } from './components/Toggle';
-export { default as Tooltip } from './components/Tooltip';
-export { default as Tour } from './components/Tour';
+export { DangerAction, default as DangerZone } from './components/DangerZone.js';
+export { default as Dialog } from './components/Dialog.js';
+export { default as Empty } from './components/Empty.js';
+export { default as Field } from './components/Field.js';
+export { default as Icon } from './components/Icon.js';
+export { ICON_NAMES } from './components/iconNames.js';
+export { default as Illustration } from './components/Illustration.js';
+export { default as Input } from './components/Input.js';
+export { default as Markdown } from './components/Markdown.js';
+export { default as Modal } from './components/Modal.js';
+export { default as Pill } from './components/Pill.js';
+export { default as Progress } from './components/Progress.js';
+export { Row, Rows } from './components/Rows.js';
+export { default as Select } from './components/Select.js';
+export { default as SizeGrid } from './components/SizeGrid.js';
+export { default as Skeleton } from './components/Skeleton.js';
+export { default as Slider } from './components/Slider.js';
+export { default as Table } from './components/Table.js';
+export { default as Tabs } from './components/Tabs.js';
+export { default as Textarea } from './components/Textarea.js';
+export { ToastHost, useToast } from './components/Toast.js';
+export { default as Toggle } from './components/Toggle.js';
+export { default as Tooltip } from './components/Tooltip.js';
+export { default as Tour } from './components/Tour.js';
 /** The tour's memory. `forgetTour` is what onboarding calls so a config reset
  *  replays the tour rather than leaving it suppressed by a browser that has
  *  seen it. */
-export { DEFAULT_TOUR_KEY, forgetTour, markTourSeen, tourSeen } from './components/tourMarker';
+export { DEFAULT_TOUR_KEY, forgetTour, markTourSeen, tourSeen } from './components/tourMarker.js';
 /** The art. Its own module because it is ~200 KB of inlined SVG — referenced
  *  only by `Illustration`, so a bundler that drops the component drops the art
  *  with it. */
-export { ILLUSTRATIONS } from './illustrations';
+export { ILLUSTRATIONS } from './illustrations.js';
 /** The focus trap, for a window that genuinely is not `Modal`'s shape. Use
  *  `Modal` first: every one of the app's eight hand-built modals shipped
  *  without a trap, which is what this exists to stop happening again. */
-export { useTrapFocus } from './hooks/useTrapFocus';
-export { DEFAULT_THEME, DERIVED_TOKENS, FIXED_TOKENS, THEMES, TOKEN_KEYS, applyTheme, defineTheme, isTheme, resolvedTokens, } from './themes';
+export { useTrapFocus } from './hooks/useTrapFocus.js';
+export { DEFAULT_THEME, DERIVED_TOKENS, FIXED_TOKENS, THEMES, TOKEN_KEYS, applyTheme, defineTheme, isTheme, resolvedTokens, } from './themes/index.js';
 /** A theme as the rule a consumer ships for first paint, generated so it
  *  cannot drift from the object; and a product's whole stylesheet the same way. */
-export { productCss, productStylesheet, themeCss, themeId } from './themes/css';
+export { productCss, productStylesheet, themeCss, themeId } from './themes/css.js';
 /** The measurement behind the contrast rule, for a theme that is yours. */
-export { luminance, ratio } from './contrast';
+export { luminance, ratio } from './contrast.js';
 /** The products: the layer between the system and a theme. Each also ships
  *  as its own entry, `@wtfalch/design/<name>` and `<name>.css`, where `Brand`,
  *  `THEMES` and `applyTheme` are that product's. */
-export { PRODUCTS, bindProduct, defineProduct, productTheme } from './products';
+export { PRODUCTS, bindProduct, defineProduct, productTheme } from './products/index.js';

package/dist/products/index.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentProps } from 'react';
-import BrandDefault from '../components/Brand';
-import type { BrandName } from '../components/brandMarks';
-import { type Theme, type ThemeTokens } from '../themes';
+import BrandDefault from '../components/Brand.js';
+import type { BrandName } from '../components/brandMarks.js';
+import { type Theme, type ThemeTokens } from '../themes/index.js';
 /**
  * A product: the layer between the system and a theme.
  *

package/dist/products/index.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import BrandDefault from '../components/Brand';
-import { applyTheme } from '../themes';
-import { themeId } from '../themes/css';
-import { tf } from './tf';
-import { valet } from './valet';
+import BrandDefault from '../components/Brand.js';
+import { applyTheme } from '../themes/index.js';
+import { themeId } from '../themes/css.js';
+import { tf } from './tf.js';
+import { valet } from './valet.js';
 /** Every product, by the name of its mark. */
 export const PRODUCTS = { tf, valet };
 /** Declare a product, so a default that is not a theme or a key `applyTheme`

package/dist/products/tf.d.ts

@@ -1,5 +1,5 @@
-import type { Theme } from '../themes';
-import type { Product } from './index';
+import type { Theme } from '../themes/index.js';
+import type { Product } from './index.js';
 /**
  * tf's themes: the three the package shipped with, and the ones the gallery
  * was photographed in first.

package/dist/products/valet.d.ts

@@ -1,5 +1,5 @@
-import type { Theme, ThemeTokens } from '../themes';
-import type { Product } from './index';
+import type { Theme, ThemeTokens } from '../themes/index.js';
+import type { Product } from './index.js';
 /**
  * valet's identity: what it is under every theme.
  *

package/dist/tf.d.ts

@@ -6,13 +6,13 @@
  * the same name from `export *`. A site is one product, so it imports this
  * and `@wtfalch/design/tf.css` and nothing of anyone else's.
  */
-export * from './index';
-export declare const product: import("./products").Product;
+export * from './index.js';
+export declare const product: import("./products/index.js").Product;
 export declare const Brand: (props: {
-    name?: import("./index").BrandName;
+    name?: import("./index.js").BrandName;
     title?: string;
     className?: string;
 }) => import("react").JSX.Element;
-export declare const THEMES: Record<string, import("./themes").Theme>;
+export declare const THEMES: Record<string, import("./themes/index.js").Theme>;
 export declare const DEFAULT_THEME: string;
-export declare const applyTheme: (theme?: string | import("./themes").Theme, el?: HTMLElement) => void;
+export declare const applyTheme: (theme?: string | import("./themes/index.js").Theme, el?: HTMLElement) => void;

package/dist/tf.js

@@ -6,9 +6,9 @@
  * the same name from `export *`. A site is one product, so it imports this
  * and `@wtfalch/design/tf.css` and nothing of anyone else's.
  */
-export * from './index';
-import { bindProduct } from './products';
-import { tf } from './products/tf';
+export * from './index.js';
+import { bindProduct } from './products/index.js';
+import { tf } from './products/tf.js';
 const bound = bindProduct(tf);
 export const product = bound.product;
 export const Brand = bound.Brand;

package/dist/themes/css.d.ts

@@ -1,4 +1,4 @@
-import type { Theme, ThemeTokens } from './index';
+import type { Theme, ThemeTokens } from './index.js';
 /**
  * A theme as CSS, for the paint before React.
  *
@@ -15,9 +15,9 @@ import type { Theme, ThemeTokens } from './index';
  * which is `system`, gets no block: its palette is the base, and its light
  * half is the `prefers-color-scheme` block `base.css` scopes to it.
  *
- * No imports but a type, on purpose: `build-products.mjs` loads the compiled
- * copy of this file in plain Node, which cannot follow the package's
- * extensionless relative imports.
+ * `build-products.mjs` loads the compiled copy of this file in plain Node.
+ * Until 0.3.1 that meant it could import nothing but a type, because the build
+ * emitted relative imports without extensions; the build writes them now.
  */
 /** The name `applyTheme` derives for a theme object. */
 export declare function themeId(theme: Theme): string;

package/dist/themes/css.js

@@ -14,9 +14,9 @@
  * which is `system`, gets no block: its palette is the base, and its light
  * half is the `prefers-color-scheme` block `base.css` scopes to it.
  *
- * No imports but a type, on purpose: `build-products.mjs` loads the compiled
- * copy of this file in plain Node, which cannot follow the package's
- * extensionless relative imports.
+ * `build-products.mjs` loads the compiled copy of this file in plain Node.
+ * Until 0.3.1 that meant it could import nothing but a type, because the build
+ * emitted relative imports without extensions; the build writes them now.
  */
 /** The name `applyTheme` derives for a theme object. */
 export function themeId(theme) {

package/dist/themes/index.js

@@ -37,8 +37,8 @@
  * token added to the stylesheet and to no list fails the suite rather than
  * becoming a fourth, undocumented category.
  */
-import { TF_THEMES } from '../products/tf';
-import { VALET_THEMES } from '../products/valet';
+import { TF_THEMES } from '../products/tf.js';
+import { VALET_THEMES } from '../products/valet.js';
 /**
  * Computed from a themeable token, and not settable.
  *

package/dist/valet.d.ts

@@ -6,13 +6,13 @@
  * the same name from `export *`. A site is one product, so it imports this
  * and `@wtfalch/design/valet.css` and nothing of anyone else's.
  */
-export * from './index';
-export declare const product: import("./products").Product;
+export * from './index.js';
+export declare const product: import("./products/index.js").Product;
 export declare const Brand: (props: {
-    name?: import("./index").BrandName;
+    name?: import("./index.js").BrandName;
     title?: string;
     className?: string;
 }) => import("react").JSX.Element;
-export declare const THEMES: Record<string, import("./themes").Theme>;
+export declare const THEMES: Record<string, import("./themes/index.js").Theme>;
 export declare const DEFAULT_THEME: string;
-export declare const applyTheme: (theme?: string | import("./themes").Theme, el?: HTMLElement) => void;
+export declare const applyTheme: (theme?: string | import("./themes/index.js").Theme, el?: HTMLElement) => void;

package/dist/valet.js

@@ -6,9 +6,9 @@
  * the same name from `export *`. A site is one product, so it imports this
  * and `@wtfalch/design/valet.css` and nothing of anyone else's.
  */
-export * from './index';
-import { bindProduct } from './products';
-import { valet } from './products/valet';
+export * from './index.js';
+import { bindProduct } from './products/index.js';
+import { valet } from './products/valet.js';
 const bound = bindProduct(valet);
 export const product = bound.product;
 export const Brand = bound.Brand;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wtfalch/design",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "wtfalch's design system: themeable components on a fixed token vocabulary.",
   "keywords": [
     "design-system",
@@ -77,7 +77,7 @@
     "vitest": "^4.1.6"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/copy-css.mjs && node scripts/build-products.mjs",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/fix-extensions.mjs && node scripts/copy-css.mjs && node scripts/build-products.mjs",
     "typecheck": "tsc --noEmit",
     "test": "vitest run"
   }