@greese/ui 1.0.0 → 1.2.0

package/dist/index.d.ts

@@ -3,8 +3,9 @@ export * from './palette.ts';
 export * from './typography.ts';
 export * from './effects.ts';
 export * from './utilities.ts';
-export { cssVar, LAYER_ORDER, SCHEME_ATTR, THEME_ATTR } from './css.ts';
+export { cssVar, LAYER_ORDER, MOTION_ATTR, SCHEME_ATTR, THEME_ATTR } from './css.ts';
 export { createTheme, deriveColors, type ColorValue, type Theme, type ExtendTokens, type ThemeOptions, } from './theme.ts';
 export { AA, contentColor, contrastRatio, CONTENT_DARK, CONTENT_LIGHT, luminance, } from './contrast.ts';
 export { DEFAULT_SCHEME_STORAGE_KEY, getSchemeScript, type ColorScheme, type SchemeScriptOptions, } from './colorScheme.ts';
+export { copyToClipboard } from './clipboard.ts';
 export { createStoredValue, type StoredValue, type StoredValueOptions, } from './storage.ts';

package/dist/index.js

@@ -3,8 +3,9 @@ export * from "./palette.js";
 export * from "./typography.js";
 export * from "./effects.js";
 export * from "./utilities.js";
-export { cssVar, LAYER_ORDER, SCHEME_ATTR, THEME_ATTR } from "./css.js";
+export { cssVar, LAYER_ORDER, MOTION_ATTR, SCHEME_ATTR, THEME_ATTR } from "./css.js";
 export { createTheme, deriveColors, } from "./theme.js";
 export { AA, contentColor, contrastRatio, CONTENT_DARK, CONTENT_LIGHT, luminance, } from "./contrast.js";
 export { DEFAULT_SCHEME_STORAGE_KEY, getSchemeScript, } from "./colorScheme.js";
+export { copyToClipboard } from "./clipboard.js";
 export { createStoredValue, } from "./storage.js";

package/dist/scss/components/_Accordion.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Accordion`, Accordion's own stylesheet.
+@forward '../../../src/components/Accordion/Accordion';

package/dist/scss/components/_ActionSelect.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/ActionSelect`, ActionSelect's own stylesheet.
+@forward '../../../src/components/ActionSelect/ActionSelect';

package/dist/scss/components/_Alert.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Alert`, Alert's own stylesheet.
+@forward '../../../src/components/Alert/Alert';

package/dist/scss/components/_AppBar.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/AppBar`, AppBar's own stylesheet.
+@forward '../../../src/components/AppBar/AppBar';

package/dist/scss/components/_AspectRatio.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/AspectRatio`, AspectRatio's own stylesheet.
+@forward '../../../src/components/AspectRatio/AspectRatio';

package/dist/scss/components/_AutoLayout.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/AutoLayout`, AutoLayout's own stylesheet.
+@forward '../../../src/components/AutoLayout/AutoLayout';

package/dist/scss/components/_Avatar.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Avatar`, Avatar's own stylesheet.
+@forward '../../../src/components/Avatar/Avatar';

package/dist/scss/components/_Badge.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Badge`, Badge's own stylesheet.
+@forward '../../../src/components/Badge/Badge';

package/dist/scss/components/_Box.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Box`, Box's own stylesheet.
+@forward '../../../src/components/Box/Box';

package/dist/scss/components/_Breadcrumbs.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Breadcrumbs`, Breadcrumbs's own stylesheet.
+@forward '../../../src/components/Breadcrumbs/Breadcrumbs';

package/dist/scss/components/_Button.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Button`, Button's own stylesheet.
+@forward '../../../src/components/Button/Button';

package/dist/scss/components/_ButtonGroup.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/ButtonGroup`, ButtonGroup's own stylesheet.
+@forward '../../../src/components/ButtonGroup/ButtonGroup';

package/dist/scss/components/_Card.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Card`, Card's own stylesheet.
+@forward '../../../src/components/Card/Card';

package/dist/scss/components/_Carousel.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Carousel`, Carousel's own stylesheet.
+@forward '../../../src/components/Carousel/Carousel';

package/dist/scss/components/_Center.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Center`, Center's own stylesheet.
+@forward '../../../src/components/Center/Center';

package/dist/scss/components/_ChatBubble.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/ChatBubble`, ChatBubble's own stylesheet.
+@forward '../../../src/components/ChatBubble/ChatBubble';

package/dist/scss/components/_Checkbox.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Checkbox`, Checkbox's own stylesheet.
+@forward '../../../src/components/Checkbox/Checkbox';

package/dist/scss/components/_Chip.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Chip`, Chip's own stylesheet.
+@forward '../../../src/components/Chip/Chip';

package/dist/scss/components/_ChoiceGroup.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/ChoiceGroup`, ChoiceGroup's own stylesheet.
+@forward '../../../src/components/ChoiceGroup/ChoiceGroup';

package/dist/scss/components/_Code.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Code`, Code's own stylesheet.
+@forward '../../../src/components/Code/Code';

package/dist/scss/components/_Collapsible.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Collapsible`, Collapsible's own stylesheet.
+@forward '../../../src/components/Collapsible/Collapsible';

package/dist/scss/components/_ColorPicker.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/ColorPicker`, ColorPicker's own stylesheet.
+@forward '../../../src/components/ColorPicker/ColorPicker';

package/dist/scss/components/_Combobox.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Combobox`, Combobox's own stylesheet.
+@forward '../../../src/components/Combobox/Combobox';

package/dist/scss/components/_Container.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Container`, Container's own stylesheet.
+@forward '../../../src/components/Container/Container';

package/dist/scss/components/_Countdown.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Countdown`, Countdown's own stylesheet.
+@forward '../../../src/components/Countdown/Countdown';

package/dist/scss/components/_DateField.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/DateField`, DateField's own stylesheet.
+@forward '../../../src/components/DateField/DateField';

package/dist/scss/components/_Dialog.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Dialog`, Dialog's own stylesheet.
+@forward '../../../src/components/Dialog/Dialog';

package/dist/scss/components/_Diff.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Diff`, Diff's own stylesheet.
+@forward '../../../src/components/Diff/Diff';

package/dist/scss/components/_Divider.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Divider`, Divider's own stylesheet.
+@forward '../../../src/components/Divider/Divider';

package/dist/scss/components/_Dock.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Dock`, Dock's own stylesheet.
+@forward '../../../src/components/Dock/Dock';

package/dist/scss/components/_EditableField.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/EditableField`, EditableField's own stylesheet.
+@forward '../../../src/components/EditableField/EditableField';

package/dist/scss/components/_Field.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Field`, Field's own stylesheet.
+@forward '../../../src/components/Field/Field';

package/dist/scss/components/_Fieldset.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Fieldset`, Fieldset's own stylesheet.
+@forward '../../../src/components/Fieldset/Fieldset';

package/dist/scss/components/_FileInput.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/FileInput`, FileInput's own stylesheet.
+@forward '../../../src/components/FileInput/FileInput';

package/dist/scss/components/_Footer.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Footer`, Footer's own stylesheet.
+@forward '../../../src/components/Footer/Footer';

package/dist/scss/components/_Grid.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Grid`, Grid's own stylesheet.
+@forward '../../../src/components/Grid/Grid';

package/dist/scss/components/_Header.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Header`, Header's own stylesheet.
+@forward '../../../src/components/Header/Header';

package/dist/scss/components/_Heading.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Heading`, Heading's own stylesheet.
+@forward '../../../src/components/Heading/Heading';

package/dist/scss/components/_Icon.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Icon`, Icon's own stylesheet.
+@forward '../../../src/components/Icon/Icon';

package/dist/scss/components/_IconButton.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/IconButton`, IconButton's own stylesheet.
+@forward '../../../src/components/IconButton/IconButton';

package/dist/scss/components/_Image.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Image`, Image's own stylesheet.
+@forward '../../../src/components/Image/Image';

package/dist/scss/components/_Indicator.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Indicator`, Indicator's own stylesheet.
+@forward '../../../src/components/Indicator/Indicator';

package/dist/scss/components/_Input.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Input`, Input's own stylesheet.
+@forward '../../../src/components/Input/Input';

package/dist/scss/components/_Key.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Key`, Key's own stylesheet.
+@forward '../../../src/components/Key/Key';

package/dist/scss/components/_Link.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Link`, Link's own stylesheet.
+@forward '../../../src/components/Link/Link';

package/dist/scss/components/_List.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/List`, List's own stylesheet.
+@forward '../../../src/components/List/List';

package/dist/scss/components/_Media.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Media`, Media's own stylesheet.
+@forward '../../../src/components/Media/Media';

package/dist/scss/components/_Menu.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Menu`, Menu's own stylesheet.
+@forward '../../../src/components/Menu/Menu';

package/dist/scss/components/_Motion.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Motion`, Motion's own stylesheet.
+@forward '../../../src/components/Motion/Motion';

package/dist/scss/components/_NumberField.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/NumberField`, NumberField's own stylesheet.
+@forward '../../../src/components/NumberField/NumberField';

package/dist/scss/components/_NumberStepper.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/NumberStepper`, NumberStepper's own stylesheet.
+@forward '../../../src/components/NumberStepper/NumberStepper';

package/dist/scss/components/_OtpField.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/OtpField`, OtpField's own stylesheet.
+@forward '../../../src/components/OtpField/OtpField';

package/dist/scss/components/_PageTransition.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/PageTransition`, PageTransition's own stylesheet.
+@forward '../../../src/components/PageTransition/PageTransition';

package/dist/scss/components/_Pagination.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Pagination`, Pagination's own stylesheet.
+@forward '../../../src/components/Pagination/Pagination';

package/dist/scss/components/_Popover.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Popover`, Popover's own stylesheet.
+@forward '../../../src/components/Popover/Popover';

package/dist/scss/components/_Progress.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Progress`, Progress's own stylesheet.
+@forward '../../../src/components/Progress/Progress';

package/dist/scss/components/_RadialProgress.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/RadialProgress`, RadialProgress's own stylesheet.
+@forward '../../../src/components/RadialProgress/RadialProgress';

package/dist/scss/components/_Radio.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Radio`, Radio's own stylesheet.
+@forward '../../../src/components/Radio/Radio';

package/dist/scss/components/_Rating.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Rating`, Rating's own stylesheet.
+@forward '../../../src/components/Rating/Rating';

package/dist/scss/components/_ScrollCarousel.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/ScrollCarousel`, ScrollCarousel's own stylesheet.
+@forward '../../../src/components/ScrollCarousel/ScrollCarousel';

package/dist/scss/components/_ScrollSpy.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/ScrollSpy`, ScrollSpy's own stylesheet.
+@forward '../../../src/components/ScrollSpy/ScrollSpy';

package/dist/scss/components/_SegmentedControl.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/SegmentedControl`, SegmentedControl's own stylesheet.
+@forward '../../../src/components/SegmentedControl/SegmentedControl';

package/dist/scss/components/_Select.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Select`, Select's own stylesheet.
+@forward '../../../src/components/Select/Select';

package/dist/scss/components/_Sidebar.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Sidebar`, Sidebar's own stylesheet.
+@forward '../../../src/components/Sidebar/Sidebar';

package/dist/scss/components/_Skeleton.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Skeleton`, Skeleton's own stylesheet.
+@forward '../../../src/components/Skeleton/Skeleton';

package/dist/scss/components/_Slider.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Slider`, Slider's own stylesheet.
+@forward '../../../src/components/Slider/Slider';

package/dist/scss/components/_Spacer.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Spacer`, Spacer's own stylesheet.
+@forward '../../../src/components/Spacer/Spacer';

package/dist/scss/components/_SpeedDial.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/SpeedDial`, SpeedDial's own stylesheet.
+@forward '../../../src/components/SpeedDial/SpeedDial';

package/dist/scss/components/_Spinner.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Spinner`, Spinner's own stylesheet.
+@forward '../../../src/components/Spinner/Spinner';

package/dist/scss/components/_Stack.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Stack`, Stack's own stylesheet.
+@forward '../../../src/components/Stack/Stack';

package/dist/scss/components/_Stat.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Stat`, Stat's own stylesheet.
+@forward '../../../src/components/Stat/Stat';

package/dist/scss/components/_Status.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Status`, Status's own stylesheet.
+@forward '../../../src/components/Status/Status';

package/dist/scss/components/_Steps.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Steps`, Steps's own stylesheet.
+@forward '../../../src/components/Steps/Steps';

package/dist/scss/components/_Swap.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Swap`, Swap's own stylesheet.
+@forward '../../../src/components/Swap/Swap';

package/dist/scss/components/_Switch.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Switch`, Switch's own stylesheet.
+@forward '../../../src/components/Switch/Switch';

package/dist/scss/components/_Table.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Table`, Table's own stylesheet.
+@forward '../../../src/components/Table/Table';

package/dist/scss/components/_Tabs.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Tabs`, Tabs's own stylesheet.
+@forward '../../../src/components/Tabs/Tabs';

package/dist/scss/components/_Text.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Text`, Text's own stylesheet.
+@forward '../../../src/components/Text/Text';

package/dist/scss/components/_TextRotate.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/TextRotate`, TextRotate's own stylesheet.
+@forward '../../../src/components/TextRotate/TextRotate';

package/dist/scss/components/_Textarea.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Textarea`, Textarea's own stylesheet.
+@forward '../../../src/components/Textarea/Textarea';

package/dist/scss/components/_ThemeProvider.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/ThemeProvider`, ThemeProvider's own stylesheet.
+@forward '../../../src/components/ThemeProvider/ThemeProvider';

package/dist/scss/components/_Tile.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Tile`, Tile's own stylesheet.
+@forward '../../../src/components/Tile/Tile';

package/dist/scss/components/_Toast.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Toast`, Toast's own stylesheet.
+@forward '../../../src/components/Toast/Toast';

package/dist/scss/components/_ToggleButton.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/ToggleButton`, ToggleButton's own stylesheet.
+@forward '../../../src/components/ToggleButton/ToggleButton';

package/dist/scss/components/_Tooltip.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Tooltip`, Tooltip's own stylesheet.
+@forward '../../../src/components/Tooltip/Tooltip';

package/dist/scss/components/_Type.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Type`, Type's own stylesheet.
+@forward '../../../src/components/Type/Type';

package/dist/scss/components/_Visibility.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/Visibility`, Visibility's own stylesheet.
+@forward '../../../src/components/Visibility/Visibility';

package/dist/scss/components/_VisuallyHidden.scss

@@ -0,0 +1,2 @@
+// GENERATED by @greese/ui: `pkg:@greese/ui/scss/components/VisuallyHidden`, VisuallyHidden's own stylesheet.
+@forward '../../../src/components/VisuallyHidden/VisuallyHidden';

package/dist/shapes.d.ts

@@ -132,6 +132,17 @@ export declare const opensToBox: (def: ShapeDef) => boolean;
 export declare const shapePoints: (def: ShapeDef, w: number, h: number, params?: ShapeParams, inset?: number) => Array<[number, number]>;
 /** `@property` rules for the parameters: registered, so they animate. Once per page is enough. */
 export declare const shapeProperties: (params: Iterable<string>) => string;
+/**
+ * Where a shape's size is written: its parameters at rest (`params`), hovered
+ * or pressed, or its border's width (param `width`). `factor` scales it for a
+ * smaller variant of the element.
+ */
+export type ShapeSizeState = 'params' | 'hover' | 'active' | 'border';
+/**
+ * How a size is written into the CSS: `10px` by default. A theme kept as
+ * SCSS writes a Sass expression instead, so its sizes can change in one place.
+ */
+export type ShapeSize = (shape: string, state: ShapeSizeState, param: string, value: number, factor: number) => string;
 /** The shape flipped start to end, still clockwise. */
 export declare const mirrored: (def: ShapeDef) => ShapeDef;
 /** Where a shape is used: an element's selector and how it takes the shape. */
@@ -148,7 +159,7 @@ export interface ShapeUse extends ShapeTarget {
  * mechanics (the clip, the border layer, transitions) are written once per
  * kind of element. Pair it with `shapeProperties()` once.
  */
-export declare const shapesCss: (shapes: Record<string, ShapeDef>, uses: ShapeUse[]) => string;
+export declare const shapesCss: (shapes: Record<string, ShapeDef>, uses: ShapeUse[], size?: ShapeSize) => string;
 /** One shape on one element: `shapesCss` for a single use. */
 export declare const shapeCss: (def: ShapeDef, target: ShapeTarget) => string;
 /**

package/dist/shapes.js

@@ -222,7 +222,8 @@ const decls = (d, indent = '  ') => Object.entries(d)
     .map(([k, v]) => `${indent}${k}: ${v};`)
     .join('\n');
 const rule = (selector, d) => Object.keys(d).length ? `${selector} {\n${decls(d)}\n}` : '';
-const paramDecls = (set) => Object.fromEntries(Object.entries(set ?? {}).map(([k, v]) => [shapeVar(k), `${num(v)}px`]));
+const pxSize = (_shape, _state, _param, value, factor) => `${num(value * factor)}px`;
+const paramDecls = (set, size) => Object.fromEntries(Object.entries(set ?? {}).map(([k, v]) => [shapeVar(k), size(k, v)]));
 /** The shape flipped start to end, still clockwise. */
 export const mirrored = (def) => {
     const flip = (l) => ({
@@ -272,7 +273,7 @@ const TIMING = 'var(--greese-duration-normal) var(--greese-easing-standard)';
  * mechanics (the clip, the border layer, transitions) are written once per
  * kind of element. Pair it with `shapeProperties()` once.
  */
-export const shapesCss = (shapes, uses) => {
+export const shapesCss = (shapes, uses, size = pxSize) => {
     const live = uses.filter((u) => shapes[u.shape]);
     if (!live.length)
         return '';
@@ -373,8 +374,8 @@ export const shapesCss = (shapes, uses) => {
         const { outer, ring } = clips(def);
         const color = def.border?.color && def.border.color !== 'auto' ? def.border.color : undefined;
         out.push(rule(sels.join(',\n'), {
-            ...paramDecls(def.params),
-            [shapeVar(BORDER)]: `${num(def.border?.width ?? 1)}px`,
+            ...paramDecls(def.params, (k, v) => size(name, 'params', k, v, 1)),
+            [shapeVar(BORDER)]: size(name, 'border', 'width', def.border?.width ?? 1, 1),
             ...(color && { '--greese-shape-ring': color }),
             '--greese-shape-clip': outer,
             '--greese-shape-ring-clip': ring,
@@ -404,11 +405,11 @@ export const shapesCss = (shapes, uses) => {
             [u.selector, 1],
             ...Object.entries(u.scale ?? {}).map(([suffix, f]) => [join(u.selector, suffix), f]),
         ];
-        const scaled = (set, f) => paramDecls(set && Object.fromEntries(Object.entries(set).map(([k, v]) => [k, v * f])));
+        const scaled = (state, set, f) => paramDecls(set, (k, v) => size(name, state, k, v, f));
         for (const u of mine)
             for (const [sel, f] of variantsOf(u).slice(1))
-                out.push(rule(sel, scaled(def.params, f)));
-        const stateRules = (set, pick, fallback) => {
+                out.push(rule(sel, scaled('params', def.params, f)));
+        const stateRules = (state, set, pick, fallback) => {
             if (!set)
                 return '';
             const byFactor = new Map();
@@ -420,13 +421,13 @@ export const shapesCss = (shapes, uses) => {
                     byFactor.set(f, [...(byFactor.get(f) ?? []), join(sel, suffix ?? fallback)]);
             }
             return [...byFactor]
-                .map(([f, list]) => rule(list.join(',\n'), scaled(set, f)))
+                .map(([f, list]) => rule(list.join(',\n'), scaled(state, set, f)))
                 .join('\n');
         };
-        const hover = stateRules(def.hover, (u) => u.hover, ':hover');
+        const hover = stateRules('hover', def.hover, (u) => u.hover, ':hover');
         if (hover)
             out.push(block('@media (hover: hover)', hover));
-        const active = stateRules(def.active, (u) => u.active, ':active');
+        const active = stateRules('active', def.active, (u) => u.active, ':active');
         if (active)
             out.push(active);
         // Focus: the shape opens to its box and the usual focus ring shows round