@arbor-css/core 0.0.107 → 0.0.110

package/dist/runtime/components/MixinsList.js

@@ -8,11 +8,8 @@ class MixinsList extends LitElement {
     static get styles() {
         return css `
 			:host {
-				display: block;
-				box-sizing: border-box;
 				width: 100%;
-			}
-			.root {
+				min-width: 100px;
 				display: flex;
 				flex-direction: column;
 				width: 100%;
@@ -47,12 +44,17 @@ class MixinsList extends LitElement {
 				margin: 0;
 				padding: 0;
 				width: 100%;
+				min-width: 100px;
+				overflow: auto;
+				max-height: 400px;
 			}
 
 			li {
 				display: flex;
 				flex-direction: column;
 				width: 100%;
+				min-width: 100px;
+				box-sizing: border-box;
 				padding: var(
 					--functionsList-item-padding,
 					var(--m-surface-padding, 8px)
@@ -61,7 +63,10 @@ class MixinsList extends LitElement {
 					--functionsList-item-border,
 					1px solid var(--m-border-color, #ccc)
 				);
-				border-radius: var(--functionsList-item-border-radius, 4px)
+				border-radius: var(
+					--functionsList-item-border-radius,
+					var(--m-surface-radius, 4px)
+				);
 				font-size: var(
 					--functionsList-item-size,
 					var(--m-primitive-typography-size, 1rem)
@@ -105,15 +110,13 @@ class MixinsList extends LitElement {
     render() {
         const mixins = Object.values(this.preset.mixins).sort((a, b) => a.name.localeCompare(b.name));
         return html `
-			<div class="root">
-				<h2>Mixins</h2>
-				<ul>
-					${mixins.map((mx) => html `<li>
-								<span class="name">${mx.signature}</span>
-								<span class="description">${mx.description}</span>
-							</li>`)}
-				</ul>
-			</div>
+			<h2>Mixins</h2>
+			<ul>
+				${mixins.map((mx) => html `<li>
+							<span class="name">${mx.signature}</span>
+							<span class="description">${mx.description}</span>
+						</li>`)}
+			</ul>
 		`;
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"MixinsList.js","sourceRoot":"","sources":["../../../src/runtime/components/MixinsList.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAmGC,WAAM,GAAG,SAAS,EAAE,CAAC;IAqBtB,CAAC;IAvHA,MAAM,KAAK,MAAM;QAChB,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FT,CAAC;IACH,CAAC;IAID,MAAM;QACL,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAC9D,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAC5B,CAAC;QACF,OAAO,IAAI,CAAA;;;;OAIN,MAAM,CAAC,GAAG,CACX,CAAC,EAAE,EAAE,EAAE,CACN,IAAI,CAAA;6BACkB,EAAE,CAAC,SAAS;oCACL,EAAE,CAAC,WAAW;aACrC,CACP;;;GAGH,CAAC;IACH,CAAC;CACD;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC/B,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,UAAU,CAAC,CAAC;AACxD,CAAC"}
+{"version":3,"file":"MixinsList.js","sourceRoot":"","sources":["../../../src/runtime/components/MixinsList.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAwGC,WAAM,GAAG,SAAS,EAAE,CAAC;IAmBtB,CAAC;IA1HA,MAAM,KAAK,MAAM;QAChB,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmGT,CAAC;IACH,CAAC;IAID,MAAM;QACL,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAC9D,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAC5B,CAAC;QACF,OAAO,IAAI,CAAA;;;MAGP,MAAM,CAAC,GAAG,CACX,CAAC,EAAE,EAAE,EAAE,CACN,IAAI,CAAA;4BACkB,EAAE,CAAC,SAAS;mCACL,EAAE,CAAC,WAAW;YACrC,CACP;;GAEF,CAAC;IACH,CAAC;CACD;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC/B,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,UAAU,CAAC,CAAC;AACxD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ModeGraph.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/ModeGraph.ts"],"names":[],"mappings":";AAkVA,wBAGE"}
+{"version":3,"file":"ModeGraph.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/ModeGraph.ts"],"names":[],"mappings":";AAsZA,wBAGE"}

package/dist/runtime/components/ModeGraph.js

@@ -1,9 +1,13 @@
-import { isCalcEquation, printEquation } from '@arbor-css/calc';
+import { isCss, printCss } from '@arbor-css/css-eval';
 import { getInternals } from '@arbor-css/preset';
+import { isToken } from '@arbor-css/tokens';
 import { css, html, LitElement } from 'lit-element';
 import { buildModeTokenGraph, } from '../../util/buildModeTokenGraph.js';
-import { getPreset } from '../registration.js';
+import { getContext, getPreset, subscribeToEnvChanges, } from '../registration.js';
 const graphCache = new Map();
+subscribeToEnvChanges(() => {
+    graphCache.clear();
+});
 function memoizedTokenGraph(modeName, preset) {
     const cacheKey = `${modeName}`;
     if (graphCache.has(cacheKey)) {
@@ -16,17 +20,22 @@ function memoizedTokenGraph(modeName, preset) {
         throw new Error(`Mode "${modeName}" not found in preset.`);
     }
     const graph = buildModeTokenGraph(modeInstance, preset, {
+        ...getContext(),
         skipBaking: false,
     });
     graphCache.set(cacheKey, graph);
     return graph;
 }
-class ModeGraph extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.mode = '';
-        this.preset = getPreset();
+// sorts by nest depth (shallow first), then by name alphabetically
+function categoryDepthSort(tokenA, tokenB) {
+    const categoryA = tokenA.split('-').length;
+    const categoryB = tokenB.split('-').length;
+    if (categoryA === categoryB) {
+        return tokenA.localeCompare(tokenB);
     }
+    return categoryA - categoryB;
+}
+class ModeGraph extends LitElement {
     static get properties() {
         return {
             mode: { type: String },
@@ -64,9 +73,16 @@ class ModeGraph extends LitElement {
 				display: flex;
 				flex-direction: column;
 				font-family: monospace;
+				gap: var(--modeGraph-tokens-gap, var(--m-spacing-sm, 4px));
 			}
 		`;
     }
+    constructor() {
+        super();
+        this.mode = '';
+        this.preset = getPreset();
+        subscribeToEnvChanges(() => this.render());
+    }
     render() {
         const graph = memoizedTokenGraph(this.mode, this.preset);
         return html `
@@ -78,10 +94,11 @@ class ModeGraph extends LitElement {
 					</span>
 				</div>
 				<div class="tokens">
-					${graph.roots.map((tokenName) => {
+					${graph.roots.sort(categoryDepthSort).map((tokenName) => {
             return html `<arbor-mode-graph-token
-							.mode=${this.mode}
-							.name=${tokenName}
+							mode=${this.mode}
+							name=${tokenName}
+							expanded=${graph.roots.length <= 3}
 						></arbor-mode-graph-token>`;
         })}
 				</div>
@@ -94,12 +111,18 @@ class ModeGraphToken extends LitElement {
         super(...arguments);
         this.name = '';
         this.mode = '';
+        this.dependency = '@@none';
+        this.depth = 0;
+        this.expanded = false;
         this.preset = getPreset();
     }
     static get properties() {
         return {
             mode: { type: String },
             name: { type: String },
+            dependency: { type: String, optional: true },
+            depth: { type: Number, optional: true },
+            expanded: { type: Boolean, optional: true },
         };
     }
     static get styles() {
@@ -107,8 +130,8 @@ class ModeGraphToken extends LitElement {
 			details {
 				padding: var(--modeGraph-token-padding, var(--m-surface-padding, 8px));
 				border: var(
-					--modeGraph-token-border,
-					var(--m-lineWidth, 1) solid var(--m-surface-ambient-border, gray)
+					--modeGraph-token-borderColor,
+					var(--m-lineWidth, 1) solid var(--m-surface-ambient-borderColor, gray)
 				);
 				border-radius: var(
 					--modeGraph-token-border-radius,
@@ -124,15 +147,20 @@ class ModeGraphToken extends LitElement {
 			}
 
 			summary {
-				cursor: pointer;
 				display: flex;
 				flex-direction: column;
+				&[data-has-dependents='true'] {
+					cursor: pointer;
+				}
 			}
 			.summary-line {
 				display: flex;
 				flex-direction: row;
 				justify-content: space-between;
 				align-items: start;
+				white-space: nowrap;
+				gap: var(--modeGraph-token-summary-gap, var(--m-spacing-sm, 4px));
+				max-width: 100%;
 			}
 			.sub-line {
 				color: var(
@@ -143,6 +171,17 @@ class ModeGraphToken extends LitElement {
 					--modeGraph-token-sub-line-font-size,
 					var(--m-text-ambient-size, 12px)
 				);
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				min-width: 0;
+				max-width: 100%;
+
+				& > span {
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
 			}
 
 			.name {
@@ -157,6 +196,9 @@ class ModeGraphToken extends LitElement {
 				flex-direction: row;
 				align-items: center;
 				gap: var(--modeGraph-token-value-gap, var(--m-spacing-sm, 4px));
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
 			}
 
 			.computed,
@@ -165,6 +207,9 @@ class ModeGraphToken extends LitElement {
 					--modeGraph-token-computed-color,
 					var(--m-surface-ambient-fg, black)
 				);
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
 			}
 			.base-computed {
 				opacity: 0.6;
@@ -222,29 +267,7 @@ class ModeGraphToken extends LitElement {
 				display: flex;
 				flex-direction: column;
 			}
-			.dependent-summary {
-				display: flex;
-				flex-direction: row;
-				justify-content: space-between;
-				flex-wrap: wrap;
-			}
-			.dependent-definition {
-				width: 100%;
-				overflow-x: auto;
-				text-align: left;
-				color: var(
-					--modeGraph-token-dependent-definition-color,
-					var(--m-color-neutral-heavy, darkgray)
-				);
-				font-size: var(
-					--modeGraph-token-dependent-definition-font-size,
-					var(--m-text-ambient-size, 12px)
-				);
-				font-family: var(
-					--modeGraph-token-dependent-definition-font-family,
-					var(--m-primitive-typography-font-mono, monospace)
-				);
-			}
+
 			.dependent-reference {
 				color: var(
 					--modeGraph-token-dependent-reference-color,
@@ -257,6 +280,12 @@ class ModeGraphToken extends LitElement {
 			}
 		`;
     }
+    // need to manually subscribe to trigger updates
+    // when windows size changes vw units, etc
+    connectedCallback() {
+        super.connectedCallback();
+        subscribeToEnvChanges(() => this.requestUpdate());
+    }
     render() {
         const baseGraph = memoizedTokenGraph('base', this.preset);
         const graph = memoizedTokenGraph(this.mode, this.preset);
@@ -266,51 +295,77 @@ class ModeGraphToken extends LitElement {
 				Token "${this.name}" not found in mode "${this.mode}".
 			</div>`;
         }
+        const definitionRaw = isCss(tokenNode.raw) ? printCss(tokenNode.raw)
+            : isToken(tokenNode.raw) ? tokenNode.raw.name
+                : tokenNode.raw.toString();
+        const changed = baseGraph.nodes[this.name]?.computed !== tokenNode.computed;
+        // replace reference to the referenced token with a span so it's highlighted in the definition
+        const definitionRest = definitionRaw.split(this.dependency);
+        const definitionInterleaved = [];
+        for (let i = 0; i < definitionRest.length; i++) {
+            definitionInterleaved.push(definitionRest[i]);
+            if (i < definitionRest.length - 1) {
+                definitionInterleaved.push(html `<span class="dependent-reference">${this.dependency}</span>`);
+            }
+        }
+        const baseComputed = changed ? baseGraph.nodes[this.name]?.computed : null;
         return html `
-			<details>
-				<summary>
+			<details
+				?open=${this.expanded}
+				data-has-dependents=${tokenNode.dependents.length > 0}
+			>
+				<summary data-has-dependents=${tokenNode.dependents.length > 0}>
 					<div class="summary-line">
 						<span class="name">${this.name}</span>
 						<span class="value">
-							<span class="base-computed"
-								>${baseGraph.nodes[this.name]?.computed ?? 'n/a'}</span
+							${baseComputed ?
+            html `<span class="base-computed" title="${baseComputed}"
+									>${tokenNode.token.purpose === 'color' ?
+                html `<arbor-color-swatch
+											value="${baseComputed}"
+										></arbor-color-swatch>`
+                : baseComputed}</span
+								>`
+            : ''}
+							<span class="computed" title="${tokenNode.computed}"
+								>${tokenNode.token.purpose === 'color' ?
+            html `<arbor-color-swatch
+										value="${tokenNode.computed}"
+									></arbor-color-swatch>`
+            : tokenNode.computed}</span
 							>
-							<span class="computed">${tokenNode.computed}</span>
 						</span>
 					</div>
-					<div class="summary-line sub-line">
-						<span>
-							<div class="caret">&gt;</div>
-							<span>${tokenNode.dependents.length} dependents</span>
-						</span>
-					</div>
-				</summary>
-				<ul class="dependents">
-					${tokenNode.dependents.map((dep) => {
-            const depNode = graph.nodes[dep];
-            const definitionRaw = isCalcEquation(depNode.raw) ?
-                printEquation(depNode.raw)
-                : depNode.raw.toString();
-            // replace reference to the referenced token with a span so it's highlighted in the definition
-            const definitionRest = definitionRaw.split(this.name);
-            const definitionInterleaved = [];
-            for (let i = 0; i < definitionRest.length; i++) {
-                definitionInterleaved.push(definitionRest[i]);
-                if (i < definitionRest.length - 1) {
-                    definitionInterleaved.push(html `<span class="dependent-reference">${this.name}</span>`);
-                }
-            }
-            return html `<li class="dependent">
-							<div class="dependent-summary">
-								<span class="name">${dep}</span>
-								<span class="value">
-									<span class="base-computed"
-										>${baseGraph.nodes[dep]?.computed ?? 'n/a'}</span
+					${this.depth > 0 ?
+            html `<div class="summary-line sub-line">
+							<span class="definition" title="${definitionRaw}">
+								${definitionInterleaved}
+							</span>
+						</div>`
+            : ''}
+					${tokenNode.dependents.length > 0 ?
+            html `
+							<div class="summary-line sub-line" style="margin-bottom: 4px;	">
+								<span>
+									<div class="caret">&gt;</div>
+									<span
+										>${tokenNode.dependents.length} dependent(s) - tap to
+										show</span
 									>
-									<span class="computed">${depNode.computed}</span>
 								</span>
 							</div>
-							<div class="dependent-definition">${definitionInterleaved}</div>
+						`
+            : ''}
+				</summary>
+				<ul class="dependents">
+					${tokenNode.dependents.sort(categoryDepthSort).map((dep) => {
+            return html `<li class="dependent">
+							<arbor-mode-graph-token
+								mode=${this.mode}
+								name=${dep}
+								dependency=${this.name}
+								depth=${this.depth + 1}
+							></arbor-mode-graph-token>
 						</li> `;
         })}
 				</ul>

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Outputs.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/Outputs.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,UAAU,EAAE,MAAM,aAAa,CAAC;AAI/C,qBAAa,YAAa,SAAQ,UAAU;IAC3C,MAAM,sLAAe;IACrB,MAAM;CAwCN;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,SAE/B"}
+{"version":3,"file":"Outputs.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/Outputs.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,UAAU,EAAE,MAAM,aAAa,CAAC;AAI/C,qBAAa,YAAa,SAAQ,UAAU;IAC3C,MAAM,sLAAe;IACrB,MAAM;CAyCN;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,SAE/B"}

package/dist/runtime/components/Outputs.js

@@ -2,7 +2,7 @@ import { isToken } from '@arbor-css/tokens';
 import { convertStructure } from '@arbor-css/util';
 import { html, LitElement } from 'lit-element';
 import { generateStylesheet } from '../../stylesheet/generateStylesheet.js';
-import { getPreset } from '../registration.js';
+import { getContext, getPreset } from '../registration.js';
 export class ArborOutputs extends LitElement {
     constructor() {
         super(...arguments);
@@ -26,6 +26,7 @@ ${JSON.stringify(convertStructure(this.preset.$.mode, isToken, (token) => token.
 				<summary>Generated CSS</summary>
 				<pre>
 ${generateStylesheet(this.preset, {
+            ...getContext(),
             skipBaking: false,
         })}</pre
 				>

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

@@ -1 +1 @@
-{"version":3,"file":"Outputs.js","sourceRoot":"","sources":["../../../src/runtime/components/Outputs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QACC,WAAM,GAAG,SAAS,EAAE,CAAC;IAyCtB,CAAC;IAxCA,MAAM;QACL,OAAO,IAAI,CAAA;;;;EAIX,IAAI,CAAC,SAAS,CACV,gBAAgB,CACf,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAC5B,OAAO,EACP,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CACrB,EACD,IAAI,EACJ,CAAC,CACD;;;;;;EAMJ,IAAI,CAAC,SAAS,CACV,gBAAgB,CACf,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAClB,OAAO,EACP,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CACrB,EACD,IAAI,EACJ,CAAC,CACD;;;;;;EAMJ,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE;YAC5B,UAAU,EAAE,KAAK;SACjB,CAAC;;;GAGJ,CAAC;IACH,CAAC;CACD;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC/B,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;AACtD,CAAC"}
+{"version":3,"file":"Outputs.js","sourceRoot":"","sources":["../../../src/runtime/components/Outputs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE3D,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QACC,WAAM,GAAG,SAAS,EAAE,CAAC;IA0CtB,CAAC;IAzCA,MAAM;QACL,OAAO,IAAI,CAAA;;;;EAIX,IAAI,CAAC,SAAS,CACV,gBAAgB,CACf,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAC5B,OAAO,EACP,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CACrB,EACD,IAAI,EACJ,CAAC,CACD;;;;;;EAMJ,IAAI,CAAC,SAAS,CACV,gBAAgB,CACf,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAClB,OAAO,EACP,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CACrB,EACD,IAAI,EACJ,CAAC,CACD;;;;;;EAMJ,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE;YAC5B,GAAG,UAAU,EAAE;YACf,UAAU,EAAE,KAAK;SACjB,CAAC;;;GAGJ,CAAC;IACH,CAAC;CACD;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC/B,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;AACtD,CAAC"}

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

@@ -0,0 +1,2 @@
+export default function register(): void;
+//# sourceMappingURL=SpacingScale.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpacingScale.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/SpacingScale.ts"],"names":[],"mappings":"AAsDA,MAAM,CAAC,OAAO,UAAU,QAAQ,SAE/B"}

package/dist/runtime/components/SpacingScale.js

@@ -0,0 +1,54 @@
+import { isToken } from '@arbor-css/tokens';
+import { css, html, LitElement } from 'lit-element';
+import { resolveComputedTokenValue } from '../../util/resolveComputedTokenValue.js';
+import { getContext, getPreset } from '../registration.js';
+class SpacingScale extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.preset = getPreset();
+    }
+    static get styles() {
+        return css `
+			:host {
+				display: flex;
+				flex-direction: column;
+				gap: var(--m-spacing-lg);
+				box-sizing: border-box;
+				width: 100%;
+			}
+
+			.step {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				justify-content: space-between;
+			}
+
+			.size {
+				background: var(--m-color-main-ink);
+				color: var(--m-color-main-wash);
+				aspect-ratio: 1 / 1;
+			}
+		`;
+    }
+    render() {
+        const steps = Object.values(this.preset.$.mode.spacing)
+            .filter(isToken)
+            .map((token) => ({
+            name: token.name,
+            value: resolveComputedTokenValue(this.preset, token.name, getContext()),
+        }));
+        return html `
+			${steps.map(({ name, value }) => html `
+					<div class="step">
+						<div>${name} - ${value}</div>
+						<div class="size" style="width: ${value};"></div>
+					</div>
+				`)}
+		`;
+    }
+}
+export default function register() {
+    customElements.define('arbor-spacing-scale', SpacingScale);
+}
+//# sourceMappingURL=SpacingScale.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpacingScale.js","sourceRoot":"","sources":["../../../src/runtime/components/SpacingScale.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE3D,MAAM,YAAa,SAAQ,UAAU;IAArC;;QA0BC,WAAM,GAAG,SAAS,EAAE,CAAC;IAqBtB,CAAC;IA9CA,MAAM,KAAK,MAAM;QAChB,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;GAqBT,CAAC;IACH,CAAC;IAID,MAAM;QACL,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;aACrD,MAAM,CAAC,OAAO,CAAC;aACf,GAAG,CAAC,CAAC,KAAU,EAAE,EAAE,CAAC,CAAC;YACrB,IAAI,EAAE,KAAK,CAAC,IAAI;YAChB,KAAK,EAAE,yBAAyB,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC;SACvE,CAAC,CAAC,CAAC;QAEL,OAAO,IAAI,CAAA;KACR,KAAK,CAAC,GAAG,CACV,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;aAEhB,IAAI,MAAM,KAAK;wCACY,KAAK;;KAExC,CACD;GACD,CAAC;IACH,CAAC;CACD;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC/B,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,YAAY,CAAC,CAAC;AAC5D,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/index.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,OAAO,UAAU,QAAQ,SAM/B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/index.ts"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,QAAQ,SAS/B"}

package/dist/runtime/components/index.js

@@ -1,12 +1,18 @@
+import registerColorSwatch from './ColorSwatch.js';
 import registerFunctionsList from './FunctionsList.js';
+import registerIntentDemos from './IntentDemos.js';
 import registerMixinsList from './MixinsList.js';
 import registerModeGraph from './ModeGraph.js';
 import registerOutputs from './Outputs.js';
+import registerSpacingScale from './SpacingScale.js';
 export default function register() {
     registerModeGraph();
     registerOutputs();
     registerFunctionsList();
     registerMixinsList();
+    registerIntentDemos();
+    registerSpacingScale();
+    registerColorSwatch();
     console.debug('Arbor Runtime components registered');
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/runtime/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,MAAM,oBAAoB,CAAC;AACvD,OAAO,kBAAkB,MAAM,iBAAiB,CAAC;AACjD,OAAO,iBAAiB,MAAM,gBAAgB,CAAC;AAC/C,OAAO,eAAe,MAAM,cAAc,CAAC;AAE3C,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC/B,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,CAAC;IAClB,qBAAqB,EAAE,CAAC;IACxB,kBAAkB,EAAE,CAAC;IACrB,OAAO,CAAC,KAAK,CAAC,qCAAqC,CAAC,CAAC;AACtD,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/runtime/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,MAAM,kBAAkB,CAAC;AACnD,OAAO,qBAAqB,MAAM,oBAAoB,CAAC;AACvD,OAAO,mBAAmB,MAAM,kBAAkB,CAAC;AACnD,OAAO,kBAAkB,MAAM,iBAAiB,CAAC;AACjD,OAAO,iBAAiB,MAAM,gBAAgB,CAAC;AAC/C,OAAO,eAAe,MAAM,cAAc,CAAC;AAC3C,OAAO,oBAAoB,MAAM,mBAAmB,CAAC;AAErD,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC/B,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,CAAC;IAClB,qBAAqB,EAAE,CAAC;IACxB,kBAAkB,EAAE,CAAC;IACrB,mBAAmB,EAAE,CAAC;IACtB,oBAAoB,EAAE,CAAC;IACvB,mBAAmB,EAAE,CAAC;IACtB,OAAO,CAAC,KAAK,CAAC,qCAAqC,CAAC,CAAC;AACtD,CAAC"}

package/dist/runtime/registration.d.ts

@@ -1,6 +1,10 @@
+import { CssEnvValues, CssResolutionContext } from '@arbor-css/css-eval';
 import { ArborPreset } from '@arbor-css/preset/config';
 export declare const ready: Promise<void>;
 export declare function getPreset(): ArborPreset;
+export declare function getEnvValues(): CssEnvValues;
+export declare function getContext(): CssResolutionContext;
+export declare function subscribeToEnvChanges(callback: () => void): () => void;
 export declare function getStyleSheet(): CSSStyleSheet;
-export declare function connect(arbor: ArborPreset<any, any>): void;
+export declare function connect(arbor: ArborPreset<any, any>): Promise<void>;
 //# sourceMappingURL=registration.d.ts.map

package/dist/runtime/registration.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registration.d.ts","sourceRoot":"","sources":["../../src/runtime/registration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAOvD,eAAO,MAAM,KAAK,eAA8C,CAAC;AAEjE,wBAAgB,SAAS,IAAI,WAAW,CAOvC;AAED,wBAAgB,aAAa,IAAI,aAAa,CAO7C;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,WAAW,CAAC,GAAG,EAAE,GAAG,CAAC,QASnD"}
+{"version":3,"file":"registration.d.ts","sourceRoot":"","sources":["../../src/runtime/registration.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,oBAAoB,EAEpB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAOvD,eAAO,MAAM,KAAK,eAA8C,CAAC;AAGjE,wBAAgB,SAAS,IAAI,WAAW,CAOvC;AAED,wBAAgB,YAAY,IAAI,YAAY,CAW3C;AAED,wBAAgB,UAAU,IAAI,oBAAoB,CAUjD;AAED,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,MAAM,IAAI,cAOzD;AAED,wBAAgB,aAAa,IAAI,aAAa,CAO7C;AAED,wBAAsB,OAAO,CAAC,KAAK,EAAE,WAAW,CAAC,GAAG,EAAE,GAAG,CAAC,iBAUzD"}

package/dist/runtime/registration.js

@@ -1,23 +1,54 @@
+import { loadSimplifier } from '@arbor-css/css-eval/browser';
 import { generateStylesheet } from '../stylesheet/generateStylesheet.js';
 import register from './components/index.js';
 let preset = undefined;
 let styleSheet = undefined;
 let resolve = () => { };
 export const ready = new Promise((res) => (resolve = res));
+let simplifier;
 export function getPreset() {
     if (!preset) {
         throw new Error('Arbor configuration has not been set. Please call connect() first.');
     }
     return preset;
 }
+export function getEnvValues() {
+    const vw = window.visualViewport?.width ?? window.innerWidth;
+    const vh = window.visualViewport?.height ?? window.innerHeight;
+    const rootFontSize = getComputedStyle(document.documentElement).fontSize;
+    const rem = rootFontSize.includes('px') ? parseFloat(rootFontSize) : undefined;
+    return {
+        deviceWidthPx: vw,
+        deviceHeightPx: vh,
+        remPx: rem,
+    };
+}
+export function getContext() {
+    if (!simplifier) {
+        throw new Error('Arbor CSS simplifier has not been initialized. Please call connect() first.');
+    }
+    return {
+        simplifier,
+        envValues: getEnvValues(),
+    };
+}
+export function subscribeToEnvChanges(callback) {
+    window.addEventListener('resize', callback);
+    window.visualViewport?.addEventListener('resize', callback);
+    return () => {
+        window.removeEventListener('resize', callback);
+        window.visualViewport?.removeEventListener('resize', callback);
+    };
+}
 export function getStyleSheet() {
     if (!styleSheet) {
         throw new Error('Arbor stylesheet has not been generated. Please call connect() first.');
     }
     return styleSheet;
 }
-export function connect(arbor) {
+export async function connect(arbor) {
     preset = arbor;
+    simplifier = await loadSimplifier({ passes: 2 });
     // by turning off layers, we make the generated CSS take precedence over any existing pregenerated stylesheet.
     const styles = generateStylesheet(preset, { layer: false });
     styleSheet = new CSSStyleSheet();

package/dist/runtime/registration.js.map

@@ -1 +1 @@
-{"version":3,"file":"registration.js","sourceRoot":"","sources":["../../src/runtime/registration.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAE7C,IAAI,MAAM,GAAsC,SAAS,CAAC;AAC1D,IAAI,UAAU,GAA8B,SAAS,CAAC;AACtD,IAAI,OAAO,GAAe,GAAG,EAAE,GAAE,CAAC,CAAC;AACnC,MAAM,CAAC,MAAM,KAAK,GAAG,IAAI,OAAO,CAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC;AAEjE,MAAM,UAAU,SAAS;IACxB,IAAI,CAAC,MAAM,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACd,oEAAoE,CACpE,CAAC;IACH,CAAC;IACD,OAAO,MAAM,CAAC;AACf,CAAC;AAED,MAAM,UAAU,aAAa;IAC5B,IAAI,CAAC,UAAU,EAAE,CAAC;QACjB,MAAM,IAAI,KAAK,CACd,uEAAuE,CACvE,CAAC;IACH,CAAC;IACD,OAAO,UAAU,CAAC;AACnB,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,KAA4B;IACnD,MAAM,GAAG,KAAK,CAAC;IACf,8GAA8G;IAC9G,MAAM,MAAM,GAAG,kBAAkB,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;IAC5D,UAAU,GAAG,IAAI,aAAa,EAAE,CAAC;IACjC,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,kBAAkB,GAAG,CAAC,GAAG,QAAQ,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;IAC3E,OAAO,EAAE,CAAC;IACV,QAAQ,EAAE,CAAC;AACZ,CAAC"}
+{"version":3,"file":"registration.js","sourceRoot":"","sources":["../../src/runtime/registration.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAE7C,IAAI,MAAM,GAAsC,SAAS,CAAC;AAC1D,IAAI,UAAU,GAA8B,SAAS,CAAC;AACtD,IAAI,OAAO,GAAe,GAAG,EAAE,GAAE,CAAC,CAAC;AACnC,MAAM,CAAC,MAAM,KAAK,GAAG,IAAI,OAAO,CAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC;AACjE,IAAI,UAAyB,CAAC;AAE9B,MAAM,UAAU,SAAS;IACxB,IAAI,CAAC,MAAM,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACd,oEAAoE,CACpE,CAAC;IACH,CAAC;IACD,OAAO,MAAM,CAAC;AACf,CAAC;AAED,MAAM,UAAU,YAAY;IAC3B,MAAM,EAAE,GAAG,MAAM,CAAC,cAAc,EAAE,KAAK,IAAI,MAAM,CAAC,UAAU,CAAC;IAC7D,MAAM,EAAE,GAAG,MAAM,CAAC,cAAc,EAAE,MAAM,IAAI,MAAM,CAAC,WAAW,CAAC;IAC/D,MAAM,YAAY,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC;IACzE,MAAM,GAAG,GACR,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACpE,OAAO;QACN,aAAa,EAAE,EAAE;QACjB,cAAc,EAAE,EAAE;QAClB,KAAK,EAAE,GAAG;KACV,CAAC;AACH,CAAC;AAED,MAAM,UAAU,UAAU;IACzB,IAAI,CAAC,UAAU,EAAE,CAAC;QACjB,MAAM,IAAI,KAAK,CACd,6EAA6E,CAC7E,CAAC;IACH,CAAC;IACD,OAAO;QACN,UAAU;QACV,SAAS,EAAE,YAAY,EAAE;KACzB,CAAC;AACH,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,QAAoB;IACzD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC5C,MAAM,CAAC,cAAc,EAAE,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC5D,OAAO,GAAG,EAAE;QACX,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC/C,MAAM,CAAC,cAAc,EAAE,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAChE,CAAC,CAAC;AACH,CAAC;AAED,MAAM,UAAU,aAAa;IAC5B,IAAI,CAAC,UAAU,EAAE,CAAC;QACjB,MAAM,IAAI,KAAK,CACd,uEAAuE,CACvE,CAAC;IACH,CAAC;IACD,OAAO,UAAU,CAAC;AACnB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,OAAO,CAAC,KAA4B;IACzD,MAAM,GAAG,KAAK,CAAC;IACf,UAAU,GAAG,MAAM,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;IACjD,8GAA8G;IAC9G,MAAM,MAAM,GAAG,kBAAkB,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;IAC5D,UAAU,GAAG,IAAI,aAAa,EAAE,CAAC;IACjC,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,kBAAkB,GAAG,CAAC,GAAG,QAAQ,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;IAC3E,OAAO,EAAE,CAAC;IACV,QAAQ,EAAE,CAAC;AACZ,CAAC"}

package/dist/stylesheet/generateStylesheet.d.ts

@@ -1,6 +1,8 @@
+import { CssSimplifier } from '@arbor-css/css-eval';
 import { AnyArborPreset } from '@arbor-css/preset/config';
-export declare function generateStylesheet(config: AnyArborPreset, { layer: cascadeLayerName, skipBaking, }?: {
+export declare function generateStylesheet(config: AnyArborPreset, { layer: cascadeLayerName, skipBaking, simplifier, }?: {
     layer?: string | false;
     skipBaking?: boolean;
+    simplifier?: CssSimplifier;
 }): string;
 //# sourceMappingURL=generateStylesheet.d.ts.map