@arbor-css/core 0.0.1

package/dist/runtime/components/ColorRange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorRange.js","sourceRoot":"","sources":["../../../src/runtime/components/ColorRange.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,UAAW,SAAQ,WAAW;IACnC;QACC,KAAK,EAAE,CAAC;QAER,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC7C,IAAI,CAAC,SAAS,EAAE,CAAC;YAChB,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAC;QACvE,CAAC;QAED,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QAC/D,IAAI,CAAC,UAAU,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,UAAU,SAAS,+BAA+B,CAAC,CAAC;QACrE,CAAC;QAED,IAAI,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;YACzB,MAAM,IAAI,KAAK,CACd,UAAU,SAAS,yDAAyD,CAC5E,CAAC;QACH,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,SAAS,GAAG;;UAE1C,SAAS;;OAEZ,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;aACvB,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;YACZ,MAAM,KAAK,GAAG,UAAU,CAAC,GAA8B,CAAC,CAAC;YACzD,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;gBACrB,SAAS;gBACT,OAAO,EAAE,CAAC;YACX,CAAC;YACD,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC;YACxB,OAAO,+CAA+C,KAAK,YAAY,gBAAgB,CAAC,KAAK,CAAC;eACtF,GAAG;cACJ,CAAC;QACT,CAAC,CAAC;aACD,IAAI,CAAC,IAAI,CAAC;;;;;;;;;;;;;GAad,CAAC;IACH,CAAC;CACD;AAED,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,UAAU,CAAC,CAAC"}

package/dist/runtime/components/GlobalsEditor.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=GlobalsEditor.d.ts.map

package/dist/runtime/components/GlobalsEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalsEditor.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/GlobalsEditor.ts"],"names":[],"mappings":""}

package/dist/runtime/components/GlobalsEditor.js

@@ -0,0 +1,63 @@
+import { $globalProps } from '@arbor-css/globals';
+import { isToken } from '@arbor-css/tokens';
+import GUI from 'lil-gui';
+import { readProperties } from '../readProperties.js';
+import { getConfig } from '../registration.js';
+import { ArborElement } from './BaseElement.js';
+class GlobalsEditor extends ArborElement {
+    connectedCallback() {
+        const gui = new GUI();
+        gui.close();
+        const config = getConfig();
+        const globalsFolder = gui.addFolder('Globals');
+        for (const [globalKey, token] of Object.entries($globalProps)) {
+            let entry = token.type === 'color' ?
+                globalsFolder.addColor(config.primitives.globals, globalKey)
+                : globalsFolder.add(config.primitives.globals, globalKey);
+            entry.name(globalKey).onChange((v) => {
+                document.documentElement.style.setProperty(token.name, v.toString());
+            });
+            if (token.type === 'number') {
+                entry = entry.min(0).max(2).step(0.1);
+            }
+        }
+        const primitivesFolder = gui.addFolder('Primitives');
+        function addToken(parent, key, token, folder) {
+            let entry = token.type === 'color' ?
+                folder.addColor(parent, key)
+                : folder.add(parent, key);
+            entry.name(key).onChange((v) => {
+                document.documentElement.style.setProperty(token.name, v.toString());
+                // and all scheme permutations...
+                for (const scheme of Object.keys(config.primitives.colors)) {
+                    const prefix = config.primitives.schemeTags[scheme] ?? scheme;
+                    document.documentElement.style.setProperty(token.prefixed(prefix).name, v.toString());
+                }
+            });
+        }
+        const values = readProperties(config.primitives.$tokens);
+        for (const [firstLayerKey, firstTokenLayer] of Object.entries(config.primitives.$tokens)) {
+            if (isToken(firstTokenLayer)) {
+                addToken(values, firstLayerKey, firstTokenLayer, primitivesFolder);
+            }
+            else {
+                const primitiveFolder = primitivesFolder.addFolder(firstLayerKey);
+                for (const [secondLayerKey, secondTokenLayer] of Object.entries(firstTokenLayer)) {
+                    if (isToken(secondTokenLayer)) {
+                        addToken(values[firstLayerKey], secondLayerKey, secondTokenLayer, primitiveFolder);
+                    }
+                    else {
+                        const secondLayerFolder = primitiveFolder.addFolder(secondLayerKey);
+                        for (const [thirdLayerKey, thirdTokenLayer] of Object.entries(secondTokenLayer)) {
+                            if (isToken(thirdTokenLayer)) {
+                                addToken(values[firstLayerKey][secondLayerKey], thirdLayerKey, thirdTokenLayer, secondLayerFolder);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+customElements.define('arbor-globals-editor', GlobalsEditor);
+//# sourceMappingURL=GlobalsEditor.js.map

package/dist/runtime/components/GlobalsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalsEditor.js","sourceRoot":"","sources":["../../../src/runtime/components/GlobalsEditor.ts"],"names":[],"mappings":"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"}

package/dist/runtime/components/ModeSelector.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ModeSelector.d.ts.map

package/dist/runtime/components/ModeSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModeSelector.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/ModeSelector.ts"],"names":[],"mappings":""}

package/dist/runtime/components/ModeSelector.js

@@ -0,0 +1,34 @@
+import { ArborElement } from './BaseElement.js';
+class ModeSelector extends ArborElement {
+    constructor() {
+        super();
+        this.render = () => {
+            const modeNames = Object.keys(this.config.modes);
+            const selected = this.getAttribute('selected') || 'base';
+            this.shadowRoot.innerHTML = `<div data-mode-${selected}>
+			<select data-mode-select name="mode" aria-label="Select mode" style="position: sticky; top: 16px;">
+				${modeNames
+                .map((modeName) => `<option value="${modeName}" ${modeName === selected ? 'selected' : ''}>${modeName}</option>`)
+                .join('\n')}
+			</select>
+			<slot></slot>
+		</div>`;
+            const modeSelect = this.shadowRoot?.querySelector('[data-mode-select]');
+            modeSelect?.addEventListener('change', () => {
+                const selectedMode = modeSelect.value;
+                this.setAttribute('selected', selectedMode);
+            });
+        };
+        this.render();
+    }
+    static get observedAttributes() {
+        return ['selected'];
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'selected' && oldValue !== newValue) {
+            this.render();
+        }
+    }
+}
+customElements.define('arbor-mode-selector', ModeSelector);
+//# sourceMappingURL=ModeSelector.js.map

package/dist/runtime/components/ModeSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModeSelector.js","sourceRoot":"","sources":["../../../src/runtime/components/ModeSelector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,MAAM,YAAa,SAAQ,YAAY;IACtC;QACC,KAAK,EAAE,CAAC;QAIT,WAAM,GAAG,GAAG,EAAE;YACb,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACjD,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,MAAM,CAAC;YACzD,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,kBAAkB,QAAQ;;MAElD,SAAS;iBACT,GAAG,CACH,CAAC,QAAQ,EAAE,EAAE,CACZ,kBAAkB,QAAQ,KAAK,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,QAAQ,WAAW,CAC9F;iBACA,IAAI,CAAC,IAAI,CAAC;;;SAGP,CAAC;YACR,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAChD,oBAAoB,CACQ,CAAC;YAC9B,UAAU,EAAE,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;gBAC3C,MAAM,YAAY,GAAG,UAAU,CAAC,KAAK,CAAC;gBACtC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;YAC7C,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC;QAxBD,IAAI,CAAC,MAAM,EAAE,CAAC;IACf,CAAC;IAwBD,MAAM,KAAK,kBAAkB;QAC5B,OAAO,CAAC,UAAU,CAAC,CAAC;IACrB,CAAC;IACD,wBAAwB,CACvB,IAAY,EACZ,QAAuB,EACvB,QAAuB;QAEvB,IAAI,IAAI,KAAK,UAAU,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAClD,IAAI,CAAC,MAAM,EAAE,CAAC;QACf,CAAC;IACF,CAAC;CACD;AAED,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,YAAY,CAAC,CAAC"}

package/dist/runtime/components/ModeTokenValues.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ModeTokenValues.d.ts.map

package/dist/runtime/components/ModeTokenValues.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModeTokenValues.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/ModeTokenValues.ts"],"names":[],"mappings":""}

package/dist/runtime/components/ModeTokenValues.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ModeTokenValues.js.map

package/dist/runtime/components/ModeTokenValues.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModeTokenValues.js","sourceRoot":"","sources":["../../../src/runtime/components/ModeTokenValues.ts"],"names":[],"mappings":""}

package/dist/runtime/components/PrimitiveTokenValues.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PrimitiveTokenValues.d.ts.map

package/dist/runtime/components/PrimitiveTokenValues.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimitiveTokenValues.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/PrimitiveTokenValues.ts"],"names":[],"mappings":""}

package/dist/runtime/components/PrimitiveTokenValues.js

@@ -0,0 +1,82 @@
+import { getConfig } from '../registration.js';
+import { groupTokens } from '../tokenGroups.js';
+class TokenValues extends HTMLElement {
+    constructor() {
+        super();
+        const config = getConfig();
+        const schemaPath = this.getAttribute('schemaPath');
+        const schemaPathParts = schemaPath ? schemaPath.split('.') : [];
+        const tokenSchema = schemaPathParts.reduce((acc, part) => acc?.[part], config);
+        const tokens = groupTokens(tokenSchema);
+        this.attachShadow({ mode: 'open' }).innerHTML = `
+			<div class="root">
+				${Object.entries(tokens.simple)
+            .map(([purpose, tokens]) => `<div class="token-group">
+								<h3>${purpose}</h3>
+								<div class="token-values">
+								${tokens
+            .map((token) => {
+            return `
+										<div class="token-value">
+											<strong>${token.name}</strong>
+											<arbor-token-value-preview value="${token.var}" purpose="${token.purpose}"></arbor-token-value-preview>
+										</div>`;
+        })
+            .join('\n')}
+								</div>
+							</div>`)
+            .join('\n')}
+				<div class="token-group">
+					<h3>Typography</h3>
+					<div class="token-values">
+						${Object.entries(tokens.typography)
+            .map(([level, { size, weight, lineHeight }]) => {
+            const sizeVar = size ? size.var : 'unknown';
+            const weightVar = weight ? weight.var : 'unknown';
+            const lineHeightVar = lineHeight ? lineHeight.var : 'unknown';
+            return `
+									<div class="token-value">
+										<div>
+											<strong>${level}</strong>
+											<div>size: ${sizeVar}</div>
+											<div>weight: ${weightVar}</div>
+											<div>line-height: ${lineHeightVar}</div>
+										</div>
+										<arbor-token-font-values-preview size="${sizeVar}" weight="${weightVar}" line-height="${lineHeightVar}"></arbor-token-font-values-preview>
+									</div>
+								`;
+        })
+            .join('\n')}
+					</div>
+				</div>
+			</div>
+			<style>
+			.root {
+				display: flex;
+				flex-direction: column;
+				gap: 0.25rem;
+			}
+				.token-group {
+					margin-bottom: 2rem;
+					background-color: white;
+					border: 1px solid black;
+					padding: 0.25rem;
+				}
+					.token-values {
+						display: grid;
+						grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+						gap: 0.125rem;
+					}
+				.token-value {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					justify-content: space-between;
+					padding: 0.2rem;
+				}
+			</style>
+		`;
+    }
+}
+customElements.define('arbor-token-values', TokenValues);
+//# sourceMappingURL=PrimitiveTokenValues.js.map

package/dist/runtime/components/PrimitiveTokenValues.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimitiveTokenValues.js","sourceRoot":"","sources":["../../../src/runtime/components/PrimitiveTokenValues.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,WAAY,SAAQ,WAAW;IACpC;QACC,KAAK,EAAE,CAAC;QAER,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QACnD,MAAM,eAAe,GAAG,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAChE,MAAM,WAAW,GAAG,eAAe,CAAC,MAAM,CACzC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,EAC1B,MAAa,CACb,CAAC;QACF,MAAM,MAAM,GAAG,WAAW,CAAC,WAAW,CAAC,CAAC;QAExC,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,SAAS,GAAG;;MAE5C,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC;aAC7B,GAAG,CACH,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,EAAE,CACrB;cACO,OAAO;;UAEX,MAAM;aACN,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YACd,OAAO;;qBAEI,KAAK,CAAC,IAAI;+CACgB,KAAK,CAAC,GAAG,cAAc,KAAK,CAAC,OAAO;iBAClE,CAAC;QACT,CAAC,CAAC;aACD,IAAI,CAAC,IAAI,CAAC;;cAEN,CACR;aACA,IAAI,CAAC,IAAI,CAAC;;;;QAIR,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC;aACjC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE;YAC9C,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;YAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;YAClD,MAAM,aAAa,GAAG,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;YAC9D,OAAO;;;qBAGM,KAAK;wBACF,OAAO;0BACL,SAAS;+BACJ,aAAa;;mDAEO,OAAO,aAAa,SAAS,kBAAkB,aAAa;;SAEtG,CAAC;QACH,CAAC,CAAC;aACD,IAAI,CAAC,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6Bf,CAAC;IACH,CAAC;CACD;AAED,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,WAAW,CAAC,CAAC"}

package/dist/runtime/components/SchemeSelector.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SchemeSelector.d.ts.map

package/dist/runtime/components/SchemeSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SchemeSelector.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/SchemeSelector.ts"],"names":[],"mappings":""}

package/dist/runtime/components/SchemeSelector.js

@@ -0,0 +1,34 @@
+import { ArborElement } from './BaseElement.js';
+class SchemeSelector extends ArborElement {
+    constructor() {
+        super();
+        this.render = () => {
+            const schemeNames = Object.keys(this.config.primitives.colors);
+            const selected = this.getAttribute('selected') || 'base';
+            this.shadowRoot.innerHTML = `<div data-scheme-${selected}>
+			<select data-scheme-select name="scheme" aria-label="Select scheme" style="position: sticky; top: 0;">
+				${schemeNames
+                .map((schemeName) => `<option value="${schemeName}" ${schemeName === selected ? 'selected' : ''}>${schemeName}</option>`)
+                .join('\n')}
+			</select>
+			<slot></slot>
+		</div>`;
+            const modeSelect = this.shadowRoot?.querySelector('[data-scheme-select]');
+            modeSelect?.addEventListener('change', () => {
+                const selectedMode = modeSelect.value;
+                this.setAttribute('selected', selectedMode);
+            });
+        };
+        this.render();
+    }
+    static get observedAttributes() {
+        return ['selected'];
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'selected' && oldValue !== newValue) {
+            this.render();
+        }
+    }
+}
+customElements.define('arbor-scheme-selector', SchemeSelector);
+//# sourceMappingURL=SchemeSelector.js.map

package/dist/runtime/components/SchemeSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SchemeSelector.js","sourceRoot":"","sources":["../../../src/runtime/components/SchemeSelector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,MAAM,cAAe,SAAQ,YAAY;IACxC;QACC,KAAK,EAAE,CAAC;QAIT,WAAM,GAAG,GAAG,EAAE;YACb,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;YAC/D,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,MAAM,CAAC;YACzD,IAAI,CAAC,UAAW,CAAC,SAAS,GAAG,oBAAoB,QAAQ;;MAErD,WAAW;iBACX,GAAG,CACH,CAAC,UAAU,EAAE,EAAE,CACd,kBAAkB,UAAU,KAAK,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,UAAU,WAAW,CACpG;iBACA,IAAI,CAAC,IAAI,CAAC;;;SAGP,CAAC;YACR,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAChD,sBAAsB,CACM,CAAC;YAC9B,UAAU,EAAE,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;gBAC3C,MAAM,YAAY,GAAG,UAAU,CAAC,KAAK,CAAC;gBACtC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;YAC7C,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC;QAxBD,IAAI,CAAC,MAAM,EAAE,CAAC;IACf,CAAC;IAwBD,MAAM,KAAK,kBAAkB;QAC5B,OAAO,CAAC,UAAU,CAAC,CAAC;IACrB,CAAC;IACD,wBAAwB,CACvB,IAAY,EACZ,QAAuB,EACvB,QAAuB;QAEvB,IAAI,IAAI,KAAK,UAAU,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAClD,IAAI,CAAC,MAAM,EAAE,CAAC;QACf,CAAC;IACF,CAAC;CACD;AAED,cAAc,CAAC,MAAM,CAAC,uBAAuB,EAAE,cAAc,CAAC,CAAC"}

package/dist/runtime/components/Shadows.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Shadows.d.ts.map

package/dist/runtime/components/Shadows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shadows.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/Shadows.ts"],"names":[],"mappings":""}

package/dist/runtime/components/Shadows.js

@@ -0,0 +1,27 @@
+import { isToken } from '@arbor-css/tokens';
+import { getConfig } from '../registration.js';
+class Shadows extends HTMLElement {
+    constructor() {
+        super();
+        const config = getConfig();
+        const shadows = config.primitives.$tokens.shadows;
+        if (isToken(shadows)) {
+            throw new Error(`Shadows is not a valid token range (it's an individual token)`);
+        }
+        this.attachShadow({ mode: 'open' }).innerHTML = `
+			<div>
+				${Object.keys(shadows)
+            .map((key) => {
+            const value = shadows[key];
+            if (!isToken(value)) {
+                throw new Error(`Shadow level "${key}" is not a valid token`);
+            }
+            return `<div class="shadow-sample" style="box-shadow: ${value.var}; margin: 1rem; padding: 1rem;">${key}</div>`;
+        })
+            .join('\n')}
+			</div>
+		`;
+    }
+}
+customElements.define('arbor-shadows', Shadows);
+//# sourceMappingURL=Shadows.js.map

package/dist/runtime/components/Shadows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shadows.js","sourceRoot":"","sources":["../../../src/runtime/components/Shadows.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,OAAQ,SAAQ,WAAW;IAChC;QACC,KAAK,EAAE,CAAC;QAER,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC;QAElD,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;YACtB,MAAM,IAAI,KAAK,CACd,+DAA+D,CAC/D,CAAC;QACH,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,SAAS,GAAG;;MAE5C,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;aACpB,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;YACZ,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;YAC3B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;gBACrB,MAAM,IAAI,KAAK,CAAC,iBAAiB,GAAG,wBAAwB,CAAC,CAAC;YAC/D,CAAC;YACD,OAAO,iDAAiD,KAAK,CAAC,GAAG,mCAAmC,GAAG,QAAQ,CAAC;QACjH,CAAC,CAAC;aACD,IAAI,CAAC,IAAI,CAAC;;GAEb,CAAC;IACH,CAAC;CACD;AAED,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC"}

package/dist/runtime/components/Spacing.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Spacing.d.ts.map

package/dist/runtime/components/Spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacing.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/Spacing.ts"],"names":[],"mappings":""}

package/dist/runtime/components/Spacing.js

@@ -0,0 +1,27 @@
+import { isToken } from '@arbor-css/tokens';
+import { getConfig } from '../registration.js';
+class Spacing extends HTMLElement {
+    constructor() {
+        super();
+        const config = getConfig();
+        const spacing = config.primitives.$tokens.spacing;
+        if (isToken(spacing)) {
+            throw new Error(`Spacing is not a valid token range (it's an individual token)`);
+        }
+        this.attachShadow({ mode: 'open' }).innerHTML = `
+			<div>
+				${Object.keys(spacing)
+            .map((key) => {
+            const value = spacing[key];
+            if (!isToken(value)) {
+                throw new Error(`Spacing level "${key}" is not a valid token`);
+            }
+            return `<div class="spacing-sample" style="padding: ${value.var}; background-color: #eee; margin-bottom: 0.5rem;">${key}: ${value.var}</div>`;
+        })
+            .join('\n')}
+			</div>
+		`;
+    }
+}
+customElements.define('arbor-spacing', Spacing);
+//# sourceMappingURL=Spacing.js.map

package/dist/runtime/components/Spacing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacing.js","sourceRoot":"","sources":["../../../src/runtime/components/Spacing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,OAAQ,SAAQ,WAAW;IAChC;QACC,KAAK,EAAE,CAAC;QAER,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC;QAElD,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;YACtB,MAAM,IAAI,KAAK,CACd,+DAA+D,CAC/D,CAAC;QACH,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,SAAS,GAAG;;MAE5C,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;aACpB,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;YACZ,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;YAC3B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;gBACrB,MAAM,IAAI,KAAK,CAAC,kBAAkB,GAAG,wBAAwB,CAAC,CAAC;YAChE,CAAC;YACD,OAAO,+CAA+C,KAAK,CAAC,GAAG,qDAAqD,GAAG,KAAK,KAAK,CAAC,GAAG,QAAQ,CAAC;QAC/I,CAAC,CAAC;aACD,IAAI,CAAC,IAAI,CAAC;;GAEb,CAAC;IACH,CAAC;CACD;AAED,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC"}

package/dist/runtime/components/SystemDemo.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SystemDemo.d.ts.map

package/dist/runtime/components/SystemDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemDemo.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/SystemDemo.ts"],"names":[],"mappings":""}

package/dist/runtime/components/SystemDemo.js

@@ -0,0 +1,45 @@
+import { isToken } from '@arbor-css/tokens';
+import { generateStylesheet } from '../../stylesheet/generateStylesheet.js';
+import { convertStructure } from '../../util/convertStructure.js';
+import { ArborElement } from './BaseElement.js';
+class SystemDemo extends ArborElement {
+    constructor() {
+        super();
+        this.shadowRoot.innerHTML = `
+			<div data-mode-base>
+				<details>
+					<summary>Primitive Tokens</summary>
+					<pre>${JSON.stringify(convertStructure(this.config.primitives.$tokens, isToken, (token) => token.name), null, 2)}</pre>
+				</details>
+				<details>
+					<summary>Mode Tokens</summary>
+					<pre>${JSON.stringify(convertStructure(this.config.modes.base.schema.$tokens, isToken, (token) => token.name), null, 2)}</pre>
+				</details>
+				<details>
+					<summary>Generated CSS</summary>
+					<pre>${generateStylesheet(this.config)}</pre>
+				</details>
+				<arbor-scheme-selector>
+					<details open>
+						<summary><h2 id="primitives" style="display: inline; margin: 0;">Primitive Tokens</h2></summary>
+						<arbor-token-values schema-path="primitives.$tokens"></arbor-token-values>
+					</details>
+					<details open>
+						<summary><h2 id="modes" style="display: inline; margin: 0;">Mode Tokens</h2></summary>
+						<arbor-mode-selector>
+							<arbor-token-values schema-path="modes.base.schema.$tokens"></arbor-token-values>
+						</arbor-mode-selector>
+					</details>
+				</arbor-scheme-selector>
+			</div>
+			<style>
+				h2 {
+					font-size: 1.5rem;
+					margin-bottom: 0.5rem;
+				}
+			</style>
+		`;
+    }
+}
+customElements.define('arbor-system-demo', SystemDemo);
+//# sourceMappingURL=SystemDemo.js.map

package/dist/runtime/components/SystemDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemDemo.js","sourceRoot":"","sources":["../../../src/runtime/components/SystemDemo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,MAAM,UAAW,SAAQ,YAAY;IACpC;QACC,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG;;;;YAIlB,IAAI,CAAC,SAAS,CACpB,gBAAgB,CACf,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO,EAC9B,OAAO,EACP,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CACrB,EACD,IAAI,EACJ,CAAC,CACD;;;;YAIM,IAAI,CAAC,SAAS,CACpB,gBAAgB,CACf,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EACrC,OAAO,EACP,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CACrB,EACD,IAAI,EACJ,CAAC,CACD;;;;YAIM,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;GAqBxC,CAAC;IACH,CAAC;CACD;AAED,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,UAAU,CAAC,CAAC"}

package/dist/runtime/components/TokenColorValuePreview.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TokenColorValuePreview.d.ts.map

package/dist/runtime/components/TokenColorValuePreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenColorValuePreview.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/TokenColorValuePreview.ts"],"names":[],"mappings":""}

package/dist/runtime/components/TokenColorValuePreview.js

@@ -0,0 +1,12 @@
+import { ArborElement } from './BaseElement.js';
+class TokenColorValuePreview extends ArborElement {
+    constructor() {
+        super();
+        const color = this.getAttribute('color') ?? 'unknown';
+        this.shadowRoot.innerHTML = `
+			<div style="width: 50px; height: 50px; background: ${color}; border: 1px solid black; border-radius: 1rem;"></div>
+		`;
+    }
+}
+customElements.define('arbor-token-color-value-preview', TokenColorValuePreview);
+//# sourceMappingURL=TokenColorValuePreview.js.map

package/dist/runtime/components/TokenColorValuePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenColorValuePreview.js","sourceRoot":"","sources":["../../../src/runtime/components/TokenColorValuePreview.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,MAAM,sBAAuB,SAAQ,YAAY;IAChD;QACC,KAAK,EAAE,CAAC;QACR,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,SAAS,CAAC;QACtD,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG;wDAC0B,KAAK;GAC1D,CAAC;IACH,CAAC;CACD;AACD,cAAc,CAAC,MAAM,CACpB,iCAAiC,EACjC,sBAAsB,CACtB,CAAC"}

package/dist/runtime/components/TokenFontValuesPreview.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TokenFontValuesPreview.d.ts.map

package/dist/runtime/components/TokenFontValuesPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenFontValuesPreview.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/TokenFontValuesPreview.ts"],"names":[],"mappings":""}

package/dist/runtime/components/TokenFontValuesPreview.js

@@ -0,0 +1,14 @@
+import { ArborElement } from './BaseElement.js';
+class TokenFontValuesPreview extends ArborElement {
+    constructor() {
+        super();
+        const size = this.getAttribute('size') ?? 'unknown';
+        const weight = this.getAttribute('weight') ?? 'normal';
+        const lineHeight = this.getAttribute('line-height') ?? 'normal';
+        this.shadowRoot.innerHTML = `
+			<div style="font-size: ${size}; font-weight: ${weight}; line-height: ${lineHeight}; border: 1px solid black; padding: 0.5rem;">Aa</div>
+		`;
+    }
+}
+customElements.define('arbor-token-font-values-preview', TokenFontValuesPreview);
+//# sourceMappingURL=TokenFontValuesPreview.js.map

package/dist/runtime/components/TokenFontValuesPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenFontValuesPreview.js","sourceRoot":"","sources":["../../../src/runtime/components/TokenFontValuesPreview.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,MAAM,sBAAuB,SAAQ,YAAY;IAChD;QACC,KAAK,EAAE,CAAC;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,SAAS,CAAC;QACpD,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC;QACvD,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,QAAQ,CAAC;QAChE,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG;4BACF,IAAI,kBAAkB,MAAM,kBAAkB,UAAU;GACjF,CAAC;IACH,CAAC;CACD;AACD,cAAc,CAAC,MAAM,CACpB,iCAAiC,EACjC,sBAAsB,CACtB,CAAC"}

package/dist/runtime/components/TokenShadowValuePreview.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TokenShadowValuePreview.d.ts.map

package/dist/runtime/components/TokenShadowValuePreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenShadowValuePreview.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/TokenShadowValuePreview.ts"],"names":[],"mappings":""}

package/dist/runtime/components/TokenShadowValuePreview.js

@@ -0,0 +1,14 @@
+import { ArborElement } from './BaseElement.js';
+class ShadowValuePreview extends ArborElement {
+    constructor() {
+        super();
+        const shadow = this.getAttribute('shadow') ?? 'none';
+        this.shadowRoot.innerHTML = `
+		<div style="padding: 20px; display: flex;">
+			<div style="place-self: center; width: 20px; height: 20px; background: white; border: 1px solid black; box-shadow: ${shadow};"></div>
+			</div>
+		`;
+    }
+}
+customElements.define('arbor-token-shadow-value-preview', ShadowValuePreview);
+//# sourceMappingURL=TokenShadowValuePreview.js.map

package/dist/runtime/components/TokenShadowValuePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenShadowValuePreview.js","sourceRoot":"","sources":["../../../src/runtime/components/TokenShadowValuePreview.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,MAAM,kBAAmB,SAAQ,YAAY;IAC5C;QACC,KAAK,EAAE,CAAC;QACR,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,MAAM,CAAC;QACrD,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG;;wHAE0F,MAAM;;GAE3H,CAAC;IACH,CAAC;CACD;AACD,cAAc,CAAC,MAAM,CAAC,kCAAkC,EAAE,kBAAkB,CAAC,CAAC"}

package/dist/runtime/components/TokenSizeValuePreview.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TokenSizeValuePreview.d.ts.map

package/dist/runtime/components/TokenSizeValuePreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenSizeValuePreview.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/TokenSizeValuePreview.ts"],"names":[],"mappings":""}

package/dist/runtime/components/TokenSizeValuePreview.js

@@ -0,0 +1,12 @@
+import { ArborElement } from './BaseElement.js';
+class TokenSizeValuePreview extends ArborElement {
+    constructor() {
+        super();
+        const size = this.getAttribute('size') ?? 'unknown';
+        this.shadowRoot.innerHTML = `
+			<div style="width: ${size}; height: ${size}; border: 1px solid black;"></div>
+		`;
+    }
+}
+customElements.define('arbor-token-size-value-preview', TokenSizeValuePreview);
+//# sourceMappingURL=TokenSizeValuePreview.js.map

package/dist/runtime/components/TokenSizeValuePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenSizeValuePreview.js","sourceRoot":"","sources":["../../../src/runtime/components/TokenSizeValuePreview.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,MAAM,qBAAsB,SAAQ,YAAY;IAC/C;QACC,KAAK,EAAE,CAAC;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,SAAS,CAAC;QACpD,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG;wBACN,IAAI,aAAa,IAAI;GAC1C,CAAC;IACH,CAAC;CACD;AACD,cAAc,CAAC,MAAM,CAAC,gCAAgC,EAAE,qBAAqB,CAAC,CAAC"}

package/dist/runtime/components/TokenValuePreview.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TokenValuePreview.d.ts.map

package/dist/runtime/components/TokenValuePreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenValuePreview.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/TokenValuePreview.ts"],"names":[],"mappings":""}

package/dist/runtime/components/TokenValuePreview.js

@@ -0,0 +1,25 @@
+import { ArborElement } from './BaseElement.js';
+class TokenValuePreview extends ArborElement {
+    constructor() {
+        super();
+        const value = this.getAttribute('value');
+        const purpose = this.getAttribute('purpose');
+        let preview;
+        switch (purpose) {
+            case 'color':
+                preview = `<arbor-token-color-value-preview color="${value}"></arbor-token-color-value-preview>`;
+                break;
+            case 'spacing':
+                preview = `<arbor-token-size-value-preview size="${value}"></arbor-token-size-value-preview>`;
+                break;
+            case 'shadow':
+                preview = `<arbor-token-shadow-value-preview shadow="${value}"></arbor-token-shadow-value-preview>`;
+                break;
+            default:
+                preview = `<div style="width: 50px; height: 50px; border: 1px solid black; display: flex; align-items: center; justify-content: center;">?</div>`;
+        }
+        this.shadowRoot.innerHTML = preview;
+    }
+}
+customElements.define('arbor-token-value-preview', TokenValuePreview);
+//# sourceMappingURL=TokenValuePreview.js.map

package/dist/runtime/components/TokenValuePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenValuePreview.js","sourceRoot":"","sources":["../../../src/runtime/components/TokenValuePreview.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,MAAM,iBAAkB,SAAQ,YAAY;IAC3C;QACC,KAAK,EAAE,CAAC;QACR,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACzC,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;QAE7C,IAAI,OAAe,CAAC;QACpB,QAAQ,OAAO,EAAE,CAAC;YACjB,KAAK,OAAO;gBACX,OAAO,GAAG,2CAA2C,KAAK,sCAAsC,CAAC;gBACjG,MAAM;YACP,KAAK,SAAS;gBACb,OAAO,GAAG,yCAAyC,KAAK,qCAAqC,CAAC;gBAC9F,MAAM;YACP,KAAK,QAAQ;gBACZ,OAAO,GAAG,6CAA6C,KAAK,uCAAuC,CAAC;gBACpG,MAAM;YACP;gBACC,OAAO,GAAG,uIAAuI,CAAC;QACpJ,CAAC;QAED,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,OAAO,CAAC;IACrC,CAAC;CACD;AAED,cAAc,CAAC,MAAM,CAAC,2BAA2B,EAAE,iBAAiB,CAAC,CAAC"}

package/dist/runtime/components/TokenValues.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TokenValues.d.ts.map

package/dist/runtime/components/TokenValues.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenValues.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/TokenValues.ts"],"names":[],"mappings":""}