@loom-sdc/design-system 0.2.0 → 0.4.0

package/README.md

@@ -1,73 +1,365 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
-
-## React Compiler
-
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
+# @loom-sdc/design-system
+
+A framework-agnostic, token-driven component library built with React 19, TypeScript 6, Vite 8, and Vanilla Extract. It ships as a dual-format package (ESM + CJS) with full TypeScript declarations.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [Available Scripts](#available-scripts)
+- [Design Tokens](#design-tokens)
+- [UI Primitives](#ui-primitives)
+- [Architecture](#architecture)
+- [Build & Distribution](#build--distribution)
+- [Contributing](#contributing)
+
+---
+
+## Installation
+
+```bash
+npm install @loom-sdc/design-system
+```
+
+**Peer dependencies** (must be installed by the consumer):
+
+```bash
+npm install react@>=19 react-dom@>=19
+```
+
+---
+
+## Quick Start
+
+Import the global stylesheet once at the entry point of your application. Then import components and tokens as needed.
+
+```tsx
+// main.tsx
+import '@loom-sdc/design-system/style.css';
+import '@loom-sdc/design-system/fonts.css'; // optional: includes TWK Everett font
+
+import { Box, Stack, Inline } from '@loom-sdc/design-system';
+
+export default function App() {
+  return (
+    <Stack gap="md">
+      <Box padding="lg">
+        <Inline gap="sm" align="center">
+          <span>Hello</span>
+          <span>World</span>
+        </Inline>
+      </Box>
+    </Stack>
+  );
+}
+```
+
+### CSS Exports
+
+| Import path | Description |
+|---|---|
+| `@loom-sdc/design-system/style.css` | Base styles and CSS custom properties |
+| `@loom-sdc/design-system/fonts.css` | TWK Everett font-face declarations |
+
+---
+
+## Available Scripts
+
+| Command | Description |
+|---|---|
+| `npm run dev` | Start Vite dev server with hot module replacement |
+| `npm run build` | Full TypeScript check + Vite app build |
+| `npm run build:lib` | Build the distributable library package |
+| `npm run release` | Build the library and publish to npm |
+| `npm run lint` | Run ESLint across the entire project |
+| `npm run storybook` | Start Storybook on port 6006 |
+| `npm run build-storybook` | Build the static Storybook site |
+
+---
+
+## Design Tokens
+
+All tokens are generated with Vanilla Extract's `createThemeContract` + `createGlobalTheme`. They resolve to CSS custom properties at runtime and are fully typed via their respective `*TokenKey` union types.
+
+### Color Palette (`PaletteTokenKey`)
+
+Raw color scales. Prefer semantic color tokens for styling components.
+
+| Scale | Tones |
+|---|---|
+| `cyan` | `cyan100` – `cyan900` |
+| `red` | `red100` – `red900` |
+| `neutral` | `neutral100` – `neutral900` |
+| `green` | `green100` – `green900` |
+| `amber` | `amber100` – `amber900` |
+
+### Semantic Colors (`ColorTokenKey`)
+
+| Group | Tokens |
+|---|---|
+| **Surface** | `surfaceRaised`, `surfaceBase`, `surfaceSubtle`, `surfaceNeutral` |
+| **Brand** | `brandPrimary`, `brandPrimarySubtle`, `brandAccent`, `brandAccentSubtle` |
+| **Border** | `borderDefault`, `borderStrong`, `borderSubtle` |
+| **Text** | `textPrimary`, `textSecondary`, `textDisabled`, `textInverse`, `textOnBrand` |
+| **Feedback** | `feedbackSuccess`, `feedbackSuccessSubtle`, `feedbackWarning`, `feedbackWarningStrong`, `feedbackWarningSubtle`, `feedbackDanger`, `feedbackDangerSubtle` |
+
+### Spacing (`SpacingTokenKey`)
+
+| Token | Value |
+|---|---|
+| `none` | 0px |
+| `px` | 1px |
+| `xxs` | 2px |
+| `xs` | 4px |
+| `sm` | 8px |
+| `md` | 16px |
+| `lg` | 24px |
+| `xl` | 32px |
+| `xl2` | 48px |
+| `xl3` | 64px |
+| `xl4` | 96px |
+| `xl5` | 128px |
+| `xl6` | 192px |
+| `xl7` | 256px |
+| `xl8` | 384px |
+
+### Font Size (`FontSizeTokenKey`)
+
+`xxs` (10px) → `xl8` (96px), 13-step progressive scale.
+
+### Font Family (`FontFamilyTokenKey`)
+
+| Token | Stack |
+|---|---|
+| `sans` | TWK Everett, system-ui |
+| `mono` | ui-monospace, Consolas |
+
+### Font Weight (`FontWeightTokenKey`)
+
+`thin` (100), `extralight` (200), `light` (300), `normal` (400), `medium` (500), `semibold` (600), `bold` (700), `extrabold` (800), `black` (900).
+
+### Line Height (`LineHeightTokenKey`)
+
+`none` (1), `tight` (1.25), `snug` (1.375), `normal` (1.5), `relaxed` (1.625), `loose` (2).
+
+### Height (`HeightTokenKey`)
+
+`xxs` (20px), `xs` (24px), `sm` (32px), `md` (48px), `lg` (56px), `xl` (72px).
+
+### Icon Size (`IconSizeTokenKey`)
+
+`xxs` (12px), `xs` (14px), `sm` (16px), `md` (24px), `lg` (32px).
+
+### Border Radius (`RadiusTokenKey`)
+
+`xxs` (2px), `xs` (4px), `sm` (6px), `md` (8px), `lg` (16px).
+
+### Shadow (`ShadowTokenKey`)
+
+`none`, `sm`, `base`, `md`, `lg`, `xl`, `xl2`, `inner`.
+
+### Z-Index (`ZIndexTokenKey`)
+
+`hide` (-1), `base` (0), `raised` (10), `dropdown` (20), `sticky` (30), `overlay` (40), `modal` (50).
+
+---
+
+## UI Primitives
+
+Primitives are single-element polymorphic components. All of them support the `as` prop to render as any HTML element while preserving their typed props.
+
+### `Box`
+
+A generic container that applies spacing tokens via padding props.
+
+```tsx
+import { Box } from '@loom-sdc/design-system';
+
+<Box padding="lg" paddingX="xl" as="section">
+  content
+</Box>
+```
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `as` | `ElementType` | `'div'` | HTML element or component to render as |
+| `padding` | `SpacingTokenKey` | — | Uniform padding on all sides |
+| `paddingX` | `SpacingTokenKey` | — | Horizontal padding (left + right) |
+| `paddingY` | `SpacingTokenKey` | — | Vertical padding (top + bottom) |
+| `children` | `ReactNode` | — | |
+| `...rest` | HTML attributes | — | Forwarded to the underlying element |
+
+### `Inline`
+
+A flex-row container for horizontally arranged items.
+
+```tsx
+import { Inline } from '@loom-sdc/design-system';
+
+<Inline gap="sm" align="center" justify="between">
+  <span>Left</span>
+  <span>Right</span>
+</Inline>
+```
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `as` | `ElementType` | `'div'` | HTML element or component to render as |
+| `gap` | `SpacingTokenKey` | — | Gap between children |
+| `align` | `'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'` | `'center'` | Cross-axis alignment (`align-items`) |
+| `justify` | `'start' \| 'center' \| 'end' \| 'between' \| 'around' \| 'evenly'` | `'start'` | Main-axis distribution (`justify-content`) |
+| `wrap` | `boolean` | `false` | Allow children to wrap |
+| `className` | `string` | — | Additional class names |
+| `...rest` | HTML attributes | — | Forwarded to the underlying element |
+
+### `Stack`
+
+A flex-column container for vertically stacked items.
+
+```tsx
+import { Stack } from '@loom-sdc/design-system';
+
+<Stack gap="md" align="start">
+  <p>First</p>
+  <p>Second</p>
+</Stack>
+```
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `as` | `ElementType` | `'div'` | HTML element or component to render as |
+| `gap` | `SpacingTokenKey` | — | Gap between children |
+| `align` | `'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'` | `'stretch'` | Cross-axis alignment (`align-items`) |
+| `justify` | `'start' \| 'center' \| 'end' \| 'between' \| 'around' \| 'evenly'` | `'start'` | Main-axis distribution (`justify-content`) |
+| `className` | `string` | — | Additional class names |
+| `...rest` | HTML attributes | — | Forwarded to the underlying element |
+
+---
+
+## Architecture
+
+```
+src/design-system/package/
+├── index.ts              ← public API entry (re-exports tokens + primitives)
+├── fonts/
+│   └── fonts.css         ← TWK Everett @font-face declarations
+├── tokens/               ← Vanilla Extract theme contracts
+│   ├── color/
+│   ├── palette/
+│   ├── spacing/
+│   ├── fontSize/
+│   ├── fontFamily/
+│   ├── fontWeight/
+│   ├── lineHeight/
+│   ├── height/
+│   ├── iconSize/
+│   ├── radius/
+│   ├── shadow/
+│   └── zIndex/
+└── ui/
+    ├── primitives/       ← polymorphic single-element components
+    ├── components/       ← composite / compound components
+    └── patterns/         ← layout-level compositions
+```
+
+### Component File Convention
+
+Every component folder follows this structure:
+
+```
+[ComponentName]/
+├── [ComponentName].types.ts        ← framework-agnostic prop interfaces
+├── [ComponentName].css.ts          ← Vanilla Extract styles
+├── [ComponentName].context.ts      ← compound components only
+├── adapters/
+│   ├── [ComponentName].react.tsx   ← React implementation
+│   └── .gitkeep                    ← placeholder for Angular / Vue adapters
+└── index.ts                        ← public API re-exports only
+```
+
+### Key Conventions
+
+- **Named exports only** — no default exports anywhere in the package.
+- **Type-only re-exports** use `export type { ... }` syntax.
+- **No `enum`** — use `const` objects with `as const` and derive the union type from them.
+- **No hardcoded CSS values** — always reference a token CSS custom property.
+- **Imports inside the package include file extensions** (`.ts`, `.tsx`, `.css.ts`).
+- **TypeScript verification**: `npx tsc -b --noEmit`
+
+---
+
+## Build & Distribution
+
+The library is built with `vite build --config vite.lib.config.ts`.
+
+| Output | Path |
+|---|---|
+| ES module | `dist/index.mjs` |
+| CommonJS | `dist/index.cjs` |
+| Type declarations | `dist/index.d.ts` |
+| Base styles | `dist/style.css` |
+| Font declarations | `dist/fonts.css` |
+| Font assets | `dist/fonts/*.woff2` |
+
+External dependencies excluded from the bundle: `react`, `react-dom`, `@vanilla-extract/css`.
+
+---
+
+## Contributing
+
+### Prerequisites
+
+- Node.js 22+
+- npm 10+
+
+### Local Setup
+
+```bash
+git clone <repo-url>
+cd loom-design-system
+npm install
+```
+
+### Development Workflow
+
+```bash
+npm run dev          # preview the sandbox app
+npm run storybook    # browse components in Storybook
+npm run lint         # check for linting errors
+npx tsc -b --noEmit  # type check without emitting files
+```
+
+### Publishing
+
+```bash
+npm run release
+```
+
+This runs `build:lib` followed by `npm publish --access public`.
+
+---
+
+## AI Workflow (Claude + Copilot)
+
+This repository uses a shared-contract model so Claude and Copilot behave consistently.
+
+### Canonical Contracts
+
+All generation laws live in `ai/contracts/`:
+
+- `ai/contracts/token.contract.md`
+- `ai/contracts/component.contract.md`
+- `ai/contracts/adapter-web-component.contract.md`
+- `ai/contracts/story.contract.md`
+
+### Wrappers
+
+- Claude wrappers live under `.claude/commands/` and `.claude/skills/`
+- Copilot wrappers live under `.github/prompts/`
+- Repo-level Copilot defaults are in `.github/copilot-instructions.md`
+
+Wrappers should orchestrate flow only. Mandatory behavior changes must be done in contracts first.
+
+### Execution Brief
+
+Use `ai/templates/execution-brief.md` as the standard handoff format from planning to implementation. This reduces repeated context and keeps output stable across tools.

package/dist/Button.css-Cw8VRHOs.js

@@ -0,0 +1,137 @@
+/* empty css                                      */
+//#region src/design-system/package/ui/primitives/Stack/Stack.css.ts
+var e = "y5q6570", t = {
+	none: "y5q6571",
+	px: "y5q6572",
+	xxs: "y5q6573",
+	xs: "y5q6574",
+	sm: "y5q6575",
+	md: "y5q6576",
+	lg: "y5q6577",
+	xl: "y5q6578",
+	xl2: "y5q6579",
+	xl3: "y5q657a",
+	xl4: "y5q657b",
+	xl5: "y5q657c",
+	xl6: "y5q657d",
+	xl7: "y5q657e",
+	xl8: "y5q657f"
+}, n = {
+	start: "y5q657g",
+	center: "y5q657h",
+	end: "y5q657i",
+	stretch: "y5q657j",
+	baseline: "y5q657k"
+}, r = {
+	start: "y5q657l",
+	center: "y5q657m",
+	end: "y5q657n",
+	between: "y5q657o",
+	around: "y5q657p",
+	evenly: "y5q657q"
+}, i = "_1wqyejm0", a = "_1wqyejm1", o = {
+	none: "_1wqyejm2",
+	px: "_1wqyejm3",
+	xxs: "_1wqyejm4",
+	xs: "_1wqyejm5",
+	sm: "_1wqyejm6",
+	md: "_1wqyejm7",
+	lg: "_1wqyejm8",
+	xl: "_1wqyejm9",
+	xl2: "_1wqyejma",
+	xl3: "_1wqyejmb",
+	xl4: "_1wqyejmc",
+	xl5: "_1wqyejmd",
+	xl6: "_1wqyejme",
+	xl7: "_1wqyejmf",
+	xl8: "_1wqyejmg"
+}, s = {
+	start: "_1wqyejmh",
+	center: "_1wqyejmi",
+	end: "_1wqyejmj",
+	stretch: "_1wqyejmk",
+	baseline: "_1wqyejml"
+}, c = {
+	start: "_1wqyejmm",
+	center: "_1wqyejmn",
+	end: "_1wqyejmo",
+	between: "_1wqyejmp",
+	around: "_1wqyejmq",
+	evenly: "_1wqyejmr"
+}, l = "_1okjbro0", u = {
+	none: "_1okjbro1",
+	px: "_1okjbro2",
+	xxs: "_1okjbro3",
+	xs: "_1okjbro4",
+	sm: "_1okjbro5",
+	md: "_1okjbro6",
+	lg: "_1okjbro7",
+	xl: "_1okjbro8",
+	xl2: "_1okjbro9",
+	xl3: "_1okjbroa",
+	xl4: "_1okjbrob",
+	xl5: "_1okjbroc",
+	xl6: "_1okjbrod",
+	xl7: "_1okjbroe",
+	xl8: "_1okjbrof"
+}, d = {
+	none: "_1okjbrog",
+	px: "_1okjbroh",
+	xxs: "_1okjbroi",
+	xs: "_1okjbroj",
+	sm: "_1okjbrok",
+	md: "_1okjbrol",
+	lg: "_1okjbrom",
+	xl: "_1okjbron",
+	xl2: "_1okjbroo",
+	xl3: "_1okjbrop",
+	xl4: "_1okjbroq",
+	xl5: "_1okjbror",
+	xl6: "_1okjbros",
+	xl7: "_1okjbrot",
+	xl8: "_1okjbrou"
+}, f = {
+	none: "_1okjbrov",
+	px: "_1okjbrow",
+	xxs: "_1okjbrox",
+	xs: "_1okjbroy",
+	sm: "_1okjbroz",
+	md: "_1okjbro10",
+	lg: "_1okjbro11",
+	xl: "_1okjbro12",
+	xl2: "_1okjbro13",
+	xl3: "_1okjbro14",
+	xl4: "_1okjbro15",
+	xl5: "_1okjbro16",
+	xl6: "_1okjbro17",
+	xl7: "_1okjbro18",
+	xl8: "_1okjbro19"
+}, p = "_1kk7qb30", m = {
+	bodyBase: "_1kk7qb31",
+	bodySm: "_1kk7qb32",
+	bodyLg: "_1kk7qb33",
+	labelBase: "_1kk7qb34",
+	labelSm: "_1kk7qb35",
+	labelLg: "_1kk7qb36",
+	headingH1: "_1kk7qb37",
+	headingH2: "_1kk7qb38",
+	headingH3: "_1kk7qb39",
+	headingH4: "_1kk7qb3a",
+	headingH5: "_1kk7qb3b",
+	headingH6: "_1kk7qb3c",
+	displayLg: "_1kk7qb3d",
+	displayXl: "_1kk7qb3e",
+	display2xl: "_1kk7qb3f",
+	overline: "_1kk7qb3g",
+	caption: "_1kk7qb3h"
+}, h = "_1cu80s90", g = "_1cu80s91", _ = {
+	primary: "_1cu80s92",
+	outline: "_1cu80s93",
+	text: "_1cu80s94"
+}, v = {
+	sm: "_1cu80s95",
+	md: "_1cu80s96",
+	lg: "_1cu80s97"
+};
+//#endregion
+export { t as _, p as a, d as c, s as d, o as f, n as g, a as h, _ as i, f as l, i as m, g as n, m as o, c as p, v as r, u as s, h as t, l as u, r as v, e as y };

package/dist/Button.css-DO_uJ5ub.cjs

@@ -0,0 +1 @@
+;/* empty css                                        */var e=`y5q6570`,t={none:`y5q6571`,px:`y5q6572`,xxs:`y5q6573`,xs:`y5q6574`,sm:`y5q6575`,md:`y5q6576`,lg:`y5q6577`,xl:`y5q6578`,xl2:`y5q6579`,xl3:`y5q657a`,xl4:`y5q657b`,xl5:`y5q657c`,xl6:`y5q657d`,xl7:`y5q657e`,xl8:`y5q657f`},n={start:`y5q657g`,center:`y5q657h`,end:`y5q657i`,stretch:`y5q657j`,baseline:`y5q657k`},r={start:`y5q657l`,center:`y5q657m`,end:`y5q657n`,between:`y5q657o`,around:`y5q657p`,evenly:`y5q657q`},i=`_1wqyejm0`,a=`_1wqyejm1`,o={none:`_1wqyejm2`,px:`_1wqyejm3`,xxs:`_1wqyejm4`,xs:`_1wqyejm5`,sm:`_1wqyejm6`,md:`_1wqyejm7`,lg:`_1wqyejm8`,xl:`_1wqyejm9`,xl2:`_1wqyejma`,xl3:`_1wqyejmb`,xl4:`_1wqyejmc`,xl5:`_1wqyejmd`,xl6:`_1wqyejme`,xl7:`_1wqyejmf`,xl8:`_1wqyejmg`},s={start:`_1wqyejmh`,center:`_1wqyejmi`,end:`_1wqyejmj`,stretch:`_1wqyejmk`,baseline:`_1wqyejml`},c={start:`_1wqyejmm`,center:`_1wqyejmn`,end:`_1wqyejmo`,between:`_1wqyejmp`,around:`_1wqyejmq`,evenly:`_1wqyejmr`},l=`_1okjbro0`,u={none:`_1okjbro1`,px:`_1okjbro2`,xxs:`_1okjbro3`,xs:`_1okjbro4`,sm:`_1okjbro5`,md:`_1okjbro6`,lg:`_1okjbro7`,xl:`_1okjbro8`,xl2:`_1okjbro9`,xl3:`_1okjbroa`,xl4:`_1okjbrob`,xl5:`_1okjbroc`,xl6:`_1okjbrod`,xl7:`_1okjbroe`,xl8:`_1okjbrof`},d={none:`_1okjbrog`,px:`_1okjbroh`,xxs:`_1okjbroi`,xs:`_1okjbroj`,sm:`_1okjbrok`,md:`_1okjbrol`,lg:`_1okjbrom`,xl:`_1okjbron`,xl2:`_1okjbroo`,xl3:`_1okjbrop`,xl4:`_1okjbroq`,xl5:`_1okjbror`,xl6:`_1okjbros`,xl7:`_1okjbrot`,xl8:`_1okjbrou`},f={none:`_1okjbrov`,px:`_1okjbrow`,xxs:`_1okjbrox`,xs:`_1okjbroy`,sm:`_1okjbroz`,md:`_1okjbro10`,lg:`_1okjbro11`,xl:`_1okjbro12`,xl2:`_1okjbro13`,xl3:`_1okjbro14`,xl4:`_1okjbro15`,xl5:`_1okjbro16`,xl6:`_1okjbro17`,xl7:`_1okjbro18`,xl8:`_1okjbro19`},p=`_1kk7qb30`,m={bodyBase:`_1kk7qb31`,bodySm:`_1kk7qb32`,bodyLg:`_1kk7qb33`,labelBase:`_1kk7qb34`,labelSm:`_1kk7qb35`,labelLg:`_1kk7qb36`,headingH1:`_1kk7qb37`,headingH2:`_1kk7qb38`,headingH3:`_1kk7qb39`,headingH4:`_1kk7qb3a`,headingH5:`_1kk7qb3b`,headingH6:`_1kk7qb3c`,displayLg:`_1kk7qb3d`,displayXl:`_1kk7qb3e`,display2xl:`_1kk7qb3f`,overline:`_1kk7qb3g`,caption:`_1kk7qb3h`},h=`_1cu80s90`,g=`_1cu80s91`,_={primary:`_1cu80s92`,outline:`_1cu80s93`,text:`_1cu80s94`},v={sm:`_1cu80s95`,md:`_1cu80s96`,lg:`_1cu80s97`};Object.defineProperty(exports,`_`,{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`c`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`d`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`f`,{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,`g`,{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,`h`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,`l`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`m`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,`o`,{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,`p`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,`s`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,`u`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`v`,{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,`y`,{enumerable:!0,get:function(){return e}});

package/dist/core.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./theme-Cw8nZ0K9.cjs`);exports.applyTheme=e.t,exports.colorVars=e.g,exports.fontFamilyVars=e._,exports.fontSizeVars=e.d,exports.fontWeightVars=e.l,exports.getTheme=e.n,exports.heightVars=e.m,exports.iconSizeVars=e.p,exports.letterSpacingVars=e.a,exports.lineHeightVars=e.c,exports.motionVars=e.r,exports.paletteVars=e.h,exports.radiusVars=e.f,exports.shadowVars=e.s,exports.spacingVars=e.u,exports.typographyVars=e.i,exports.zIndexVars=e.o;

package/dist/core.mjs

@@ -0,0 +1,2 @@
+import { _ as e, a as t, c as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, n as u, o as d, p as f, r as p, s as m, t as h, u as g } from "./theme-BhDSE6xP.js";
+export { h as applyTheme, a as colorVars, e as fontFamilyVars, r as fontSizeVars, c as fontWeightVars, u as getTheme, l as heightVars, f as iconSizeVars, t as letterSpacingVars, n as lineHeightVars, p as motionVars, o as paletteVars, i as radiusVars, m as shadowVars, g as spacingVars, s as typographyVars, d as zIndexVars };

package/dist/elements.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./Button.css-DO_uJ5ub.cjs`);var t=class extends HTMLElement{static observedAttributes=[`padding`,`padding-x`,`padding-y`];get padding(){return this.getAttribute(`padding`)}set padding(e){e==null?this.removeAttribute(`padding`):this.setAttribute(`padding`,e)}get paddingX(){return this.getAttribute(`padding-x`)}set paddingX(e){e==null?this.removeAttribute(`padding-x`):this.setAttribute(`padding-x`,e)}get paddingY(){return this.getAttribute(`padding-y`)}set paddingY(e){e==null?this.removeAttribute(`padding-y`):this.setAttribute(`padding-y`,e)}connectedCallback(){this.classList.add(e.u),this._sync()}attributeChangedCallback(){this._scheduleSync()}_syncScheduled=!1;_scheduleSync(){this._syncScheduled||(this._syncScheduled=!0,requestAnimationFrame(()=>{this._syncScheduled=!1,this._sync()}))}_prev={padding:null,paddingX:null,paddingY:null};_sync(){this._apply(`padding`,this.getAttribute(`padding`),e.s),this._apply(`paddingX`,this.getAttribute(`padding-x`),e.c),this._apply(`paddingY`,this.getAttribute(`padding-y`),e.l)}_apply(e,t,n){let r=t!=null&&t in n?n[t]:null,i=this._prev[e]??null;r!==i&&(i&&this.classList.remove(i),r&&this.classList.add(r),this._prev[e]=r)}};customElements.define(`loom-box`,t);var n=class extends HTMLElement{static observedAttributes=[`gap`,`align`,`justify`];get gap(){return this.getAttribute(`gap`)}set gap(e){e==null?this.removeAttribute(`gap`):this.setAttribute(`gap`,e)}get align(){return this.getAttribute(`align`)}set align(e){e==null?this.removeAttribute(`align`):this.setAttribute(`align`,e)}get justify(){return this.getAttribute(`justify`)}set justify(e){e==null?this.removeAttribute(`justify`):this.setAttribute(`justify`,e)}connectedCallback(){this.classList.add(e.y),this._sync()}attributeChangedCallback(){this._scheduleSync()}_syncScheduled=!1;_scheduleSync(){this._syncScheduled||(this._syncScheduled=!0,requestAnimationFrame(()=>{this._syncScheduled=!1,this._sync()}))}_prev={gap:null,align:null,justify:null};_sync(){this._apply(`gap`,this.getAttribute(`gap`),e._),this._apply(`align`,this.getAttribute(`align`)??`stretch`,e.g),this._apply(`justify`,this.getAttribute(`justify`)??`start`,e.v)}_apply(e,t,n){let r=t!=null&&t in n?n[t]:null,i=this._prev[e]??null;r!==i&&(i&&this.classList.remove(i),r&&this.classList.add(r),this._prev[e]=r)}};customElements.define(`loom-stack`,n);var r=class extends HTMLElement{static observedAttributes=[`gap`,`align`,`justify`,`wrap`];get gap(){return this.getAttribute(`gap`)}set gap(e){e==null?this.removeAttribute(`gap`):this.setAttribute(`gap`,e)}get align(){return this.getAttribute(`align`)}set align(e){e==null?this.removeAttribute(`align`):this.setAttribute(`align`,e)}get justify(){return this.getAttribute(`justify`)}set justify(e){e==null?this.removeAttribute(`justify`):this.setAttribute(`justify`,e)}get wrap(){return this.hasAttribute(`wrap`)}set wrap(e){this.toggleAttribute(`wrap`,e)}connectedCallback(){this.classList.add(e.m),this._sync()}attributeChangedCallback(){this._scheduleSync()}_syncScheduled=!1;_scheduleSync(){this._syncScheduled||(this._syncScheduled=!0,requestAnimationFrame(()=>{this._syncScheduled=!1,this._sync()}))}_prev={gap:null,align:null,justify:null,wrap:null};_sync(){this._apply(`gap`,this.getAttribute(`gap`),e.f),this._apply(`align`,this.getAttribute(`align`)??`center`,e.d),this._apply(`justify`,this.getAttribute(`justify`)??`start`,e.p),this._apply(`wrap`,this.hasAttribute(`wrap`)?`on`:null,{on:e.h})}_apply(e,t,n){let r=t!=null&&t in n?n[t]:null,i=this._prev[e]??null;r!==i&&(i&&this.classList.remove(i),r&&this.classList.add(r),this._prev[e]=r)}};customElements.define(`loom-inline`,r);var i=class extends HTMLElement{static observedAttributes=[`variant`];get variant(){return this.getAttribute(`variant`)}set variant(e){e==null?this.removeAttribute(`variant`):this.setAttribute(`variant`,e)}connectedCallback(){this.classList.add(e.a),this._sync()}attributeChangedCallback(){this._scheduleSync()}_syncScheduled=!1;_scheduleSync(){this._syncScheduled||(this._syncScheduled=!0,requestAnimationFrame(()=>{this._syncScheduled=!1,this._sync()}))}_prev={variant:null};_sync(){this._apply(`variant`,this.getAttribute(`variant`),e.o)}_apply(e,t,n){let r=t!=null&&t in n?n[t]:null,i=this._prev[e]??null;r!==i&&(i&&this.classList.remove(i),r&&this.classList.add(r),this._prev[e]=r)}};customElements.define(`loom-text`,i);var a={sm:`labelSm`,md:`labelBase`,lg:`labelLg`},o={};function s(e){try{let t=new CSSStyleSheet,n=Array.from(e.cssRules).map(e=>e.cssText).join(`
+`);return t.replaceSync(n),t}catch{return null}}function c(e){if(e in o)return o[e];for(let t of Array.from(document.styleSheets))try{if(Array.from(t.cssRules).some(t=>t.cssText.includes(e)))return o[e]=s(t),o[e]}catch{}return o[e]=null,null}function l(){let t=[c(e.n),c(e.o[a.md])].filter(e=>e!=null);return Array.from(new Set(t))}var u=class extends HTMLElement{_inner=null;_label=null;static observedAttributes=[`variant`,`size`,`disabled`,`aria-label`,`aria-labelledby`,`aria-describedby`];get variant(){return this.getAttribute(`variant`)??`primary`}set variant(e){this.setAttribute(`variant`,e)}get size(){return this.getAttribute(`size`)??`md`}set size(e){this.setAttribute(`size`,e)}get disabled(){return this.hasAttribute(`disabled`)}set disabled(e){this.toggleAttribute(`disabled`,e)}_handleClick=e=>{e.stopPropagation(),this.dispatchEvent(new CustomEvent(`loom-click`,{bubbles:!0,composed:!0,detail:{}}))};_handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new CustomEvent(`loom-focus`,{bubbles:!0,composed:!0,detail:{}}))};_handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new CustomEvent(`loom-blur`,{bubbles:!0,composed:!0,detail:{}}))};_syncScheduled=!1;_scheduleSync(){this._syncScheduled||(this._syncScheduled=!0,requestAnimationFrame(()=>{this._syncScheduled=!1,this._sync()}))}connectedCallback(){if(!this.shadowRoot){let t=this.attachShadow({mode:`open`,delegatesFocus:!0}),n=l();n.length>0?t.adoptedStyleSheets=n:console.warn(`[loom-button] VE stylesheet not found - shadow styles will be missing.`),this._label=document.createElement(`span`),this._label.setAttribute(`part`,`label`),this._label.appendChild(document.createElement(`slot`)),this._inner=document.createElement(`button`),this._inner.type=`button`,this._inner.setAttribute(`part`,`button`),this._inner.appendChild(this._label),t.appendChild(this._inner),this.classList.add(e.t),this._inner.classList.add(e.n),this._inner.addEventListener(`click`,this._handleClick),this._inner.addEventListener(`focus`,this._handleFocus),this._inner.addEventListener(`blur`,this._handleBlur)}this._sync()}disconnectedCallback(){this._inner?.removeEventListener(`click`,this._handleClick),this._inner?.removeEventListener(`focus`,this._handleFocus),this._inner?.removeEventListener(`blur`,this._handleBlur)}attributeChangedCallback(e){if(e.startsWith(`aria-`)){this._syncA11y();return}this._scheduleSync()}_prev={variant:null,size:null,typographyKey:null};_sync(){if(!this._inner||!this._label)return;let t=this.getAttribute(`variant`)??`primary`,n=this.getAttribute(`size`)??`md`;this._apply(this._inner,`variant`,t,e.i),this._apply(this._inner,`size`,n,e.r),this._inner.disabled=this.hasAttribute(`disabled`);let r=n in a?a[n]:a.md;this._apply(this._label,`typographyKey`,r,e.o),this._syncA11y()}_syncA11y(){this._inner&&[`aria-label`,`aria-labelledby`,`aria-describedby`].forEach(e=>{let t=this.getAttribute(e);t?this._inner?.setAttribute(e,t):this._inner?.removeAttribute(e)})}_apply(e,t,n,r){let i=n!=null&&n in r?r[n]:null,a=this._prev[t]??null;i!==a&&(a&&e.classList.remove(a),i&&e.classList.add(i),this._prev[t]=i)}};customElements.define(`loom-button`,u),exports.LoomBox=t,exports.LoomButton=u,exports.LoomInline=r,exports.LoomStack=n,exports.LoomText=i;