@e280/quay 0.0.0-2 → 0.0.0-20

package/x/dom/components/breadcrumb/component.d.ts

@@ -1 +1 @@
-export declare const QuayBreadcrumb: typeof import("@benev/slate").ShadowElement;
+export declare const QuayBreadcrumb: new () => HTMLElement;

package/x/dom/components/breadcrumb/component.js

@@ -1,14 +1,15 @@
-import { html, shadowComponent } from "@benev/slate";
+import { html } from "lit";
+import { shadowElement, useHost, useStyles } from "@e280/sly";
 import themeCss from "../../theme.css.js";
 import { findLocalGroup } from "../../utils/find-local-group.js";
-export const QuayBreadcrumb = shadowComponent(use => {
-    use.css(themeCss);
-    const group = findLocalGroup(use.element);
+export const QuayBreadcrumb = shadowElement(() => {
+    useStyles(themeCss);
+    const group = findLocalGroup(useHost());
     const { trail, config: { codex, renderLabel } } = group;
     const click = (item) => (e) => group.trail.setTrail(e, item);
     return html `
 		<sl-breadcrumb>
-			${trail.signal.value.map(item => html `
+			${trail.signal().map(item => html `
 				<sl-breadcrumb-item @click="${click(item)}">
 					${item === null
         ? "root"

package/x/dom/components/breadcrumb/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../s/dom/components/breadcrumb/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAE,eAAe,EAAC,MAAM,cAAc,CAAA;AAElD,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AAEzC,OAAO,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAA;AAG9D,MAAM,CAAC,MAAM,cAAc,GAAG,eAAe,CAAC,GAAG,CAAC,EAAE;IACnD,GAAG,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;IAEjB,MAAM,KAAK,GAAG,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;IACzC,MAAM,EAAC,KAAK,EAAE,MAAM,EAAE,EAAC,KAAK,EAAE,WAAW,EAAC,EAAC,GAAG,KAAK,CAAA;IAEnD,MAAM,KAAK,GAAG,CAAC,IAAe,EAAE,EAAE,CAAC,CAAC,CAAQ,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,CAAA;IAE9E,OAAO,IAAI,CAAA;;KAEP,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;kCACN,KAAK,CAAC,IAAI,CAAC;OACtC,IAAI,KAAK,IAAI;QACd,CAAC,CAAC,MAAM;QACR,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;;IAEvC,CAAC;;EAEH,CAAA;AACF,CAAC,CAAC,CAAA"}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../s/dom/components/breadcrumb/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,aAAa,EAAE,OAAO,EAAE,SAAS,EAAC,MAAM,WAAW,CAAA;AAE3D,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AAEzC,OAAO,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAA;AAG9D,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAC,GAAG,EAAE;IAChD,SAAS,CAAC,QAAQ,CAAC,CAAA;IAEnB,MAAM,KAAK,GAAG,cAAc,CAAC,OAAO,EAAE,CAAC,CAAA;IACvC,MAAM,EAAC,KAAK,EAAE,MAAM,EAAE,EAAC,KAAK,EAAE,WAAW,EAAC,EAAC,GAAG,KAAK,CAAA;IAEnD,MAAM,KAAK,GAAG,CAAC,IAAe,EAAE,EAAE,CAAC,CAAC,CAAQ,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,CAAA;IAE9E,OAAO,IAAI,CAAA;;KAEP,KAAK,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;kCACF,KAAK,CAAC,IAAI,CAAC;OACtC,IAAI,KAAK,IAAI;QACd,CAAC,CAAC,MAAM;QACR,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;;IAEvC,CAAC;;EAEH,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/dom/components/browser/component.d.ts

@@ -1 +1 @@
-export declare const QuayBrowser: typeof import("@benev/slate").ShadowElement;
+export declare const QuayBrowser: new () => HTMLElement;

package/x/dom/components/browser/component.js

@@ -1,14 +1,17 @@
-import { html, shadowComponent } from "@benev/slate";
+import { html } from "lit";
+import { shadowElement, useHost, useMount, useRender, useState, useStyles } from "@e280/sly";
 import styleCss from "./style.css.js";
 import themeCss from "../../theme.css.js";
 import { findLocalGroup } from "../../utils/find-local-group.js";
-export const QuayBrowser = shadowComponent(use => {
-    use.styles(themeCss, styleCss);
-    const group = findLocalGroup(use.element);
+export const QuayBrowser = shadowElement(() => {
+    useStyles(themeCss, styleCss);
+    const host = useHost();
+    const render = useRender();
+    const group = findLocalGroup(host);
     const { trail, config } = group;
-    const [viewMode, setViewMode] = use.state('tiles');
-    use.mount(() => {
-        const dispose = group.on.upload.sub(() => use.rerender());
+    const [viewMode, setViewMode] = useState('tiles');
+    useMount(() => {
+        const dispose = group.on.refresh.sub(() => render());
         return () => dispose();
     });
     const getItems = () => {

package/x/dom/components/browser/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../s/dom/components/browser/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAE,eAAe,EAAC,MAAM,cAAc,CAAA;AAElD,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AAEzC,OAAO,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAA;AAG9D,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAC,GAAG,CAAC,EAAE;IAChD,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAE9B,MAAM,KAAK,GAAG,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;IACzC,MAAM,EAAC,KAAK,EAAE,MAAM,EAAC,GAAG,KAAK,CAAA;IAC7B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,GAAG,CAAC,KAAK,CAAsB,OAAO,CAAC,CAAA;IAEvE,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE;QACd,MAAM,OAAO,GAAG,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAA;QACzD,OAAO,GAAG,EAAE,CAAC,OAAO,EAAE,CAAA;IACvB,CAAC,CAAC,CAAA;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QACrB,OAAO,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAgB,CAAA;IAC1F,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;KAE1B,QAAQ,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;gCACA,CAAC,CAAQ,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC;;QAE7D,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC;;iCAEnC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC;QACjD,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC;;;IAG5B,CAAC;;EAEH,CAAA;IAED,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;KAE5B,QAAQ,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;kBACd,CAAC,CAAQ,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC;OAChD,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC;;wBAEb,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC;wBACxB,IAAI,CAAC,IAAI;;;IAG7B,CAAC;;EAEH,CAAA;IACD,gBAAgB;IAChB,8CAA8C;IAE9C,OAAO,IAAI,CAAA;;;;mDAIuC,QAAQ,KAAK,OAAO,WAAW,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC;;;;;mDAKzD,QAAQ,KAAK,SAAS,WAAW,GAAG,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC;;;;;;;IAO5G,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE;EAC1D,CAAA;AACF,CAAC,CAAC,CAAA"}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../s/dom/components/browser/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAC,MAAM,WAAW,CAAA;AAE1F,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AAEzC,OAAO,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAA;AAG9D,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC,GAAG,EAAE;IAC7C,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAC7B,MAAM,IAAI,GAAG,OAAO,EAAE,CAAA;IACtB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,MAAM,KAAK,GAAG,cAAc,CAAC,IAAI,CAAC,CAAA;IAClC,MAAM,EAAC,KAAK,EAAE,MAAM,EAAC,GAAG,KAAK,CAAA;IAC7B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAsB,OAAO,CAAC,CAAA;IAEtE,QAAQ,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,CAAC,CAAA;QACpD,OAAO,GAAG,EAAE,CAAC,OAAO,EAAE,CAAA;IACvB,CAAC,CAAC,CAAA;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QACrB,OAAO,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAgB,CAAA;IAC1F,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;KAE1B,QAAQ,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;gCACA,CAAC,CAAQ,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC;;QAE7D,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC;;iCAEnC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC;QACjD,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC;;;IAG5B,CAAC;;EAEH,CAAA;IAED,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;KAE5B,QAAQ,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;kBACd,CAAC,CAAQ,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC;OAChD,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC;;wBAEb,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC;wBACxB,IAAI,CAAC,IAAI;;;IAG7B,CAAC;;EAEH,CAAA;IACD,gBAAgB;IAChB,8CAA8C;IAE9C,OAAO,IAAI,CAAA;;;;mDAIuC,QAAQ,KAAK,OAAO,WAAW,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC;;;;;mDAKzD,QAAQ,KAAK,SAAS,WAAW,GAAG,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC;;;;;;;IAO5G,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE;EAC1D,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/dom/components/browser/style.css.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("@benev/slate").CSSResult;
+declare const _default: import("lit").CSSResult;
 export default _default;

package/x/dom/components/browser/style.css.js

@@ -1,41 +1,42 @@
-import { css } from "@benev/slate";
+import { css } from "lit";
 export default css `
 
 .toolbar {
 	display: flex;
 	justify-content: flex-end;
-	padding: 0.5rem;
+	padding: var(--space-sm);
 
 	sl-button {
-		background: #0F0F11;
-		border-radius: 5px;
+		background: var(--surface);
+		border-radius: var(--radius-small);
 
 		&[data-active=true] {
-			background: var(--sl-color-neutral-0);
+			background: var(--surface-active);
 		}
 
 		&::part(base) {
 			display: flex;
 			align-items: center;
-			height: 30px;
+			height: var(--control-height);
+			border-radius: var(--radius-small);
 		}
 
 		&::part(label) {
 			display: flex;
-			width: 40px;
+			width: var(--control-width);
 		}
 	}
 }
 
 .tiles,
 .details {
-	padding: 0.5rem;
+	padding: var(--space-sm);
 }
 
 .tiles {
 	display: flex;
 	flex-wrap: wrap;
-	row-gap: 1em;
+	row-gap: var(--space-md);
 	width: 100%;
 
 	.item {
@@ -49,11 +50,11 @@ export default css `
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			width: 100px;
-			height: 60px;
-			border: 2px solid #0D0D0E;
-			border-radius: 5px;
-			background: #0F0F11;
+			width: var(--quay-browser-thumb-width, 100px);
+			height: var(--quay-browser-thumb-height, 60px);
+			border: var(--border-width) solid var(--border);
+			border-radius: var(--radius-small);
+			background: var(--surface);
 			pointer-events: none;
 
 			img {
@@ -63,14 +64,14 @@ export default css `
 		}
 
 		.label {
-			margin-top: 0.5em;
+			margin-top: var(--space-xs);
 			max-width: 150px;
-			font-size: 0.85rem;
+			font-size: var(--font-size-sm);
 			text-align: center;
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
-			color: var(--sl-color-neutral-700);
+			color: var(--text-muted);
 		}
 	}
 }
@@ -78,38 +79,38 @@ export default css `
 .details {
 	.card {
 		display: flex;
-		gap: 1rem;
-		padding: 0.8rem;
-		border: 2px solid #0D0D0E;
-		background: #0F0F11;
-		border-radius: 6px;
-		margin-bottom: 0.5rem;
+		gap: var(--space-md);
+		padding: var(--space-sm);
+		border: var(--border-width) solid var(--border);
+		background: var(--surface);
+		border-radius: var(--radius);
+		margin-bottom: var(--space-sm);
 		align-items: center;
 
 		.meta {
 			.name {
 				font-weight: 500;
-				color: var(--sl-color-neutral-800);
+				color: var(--text);
 			}
 			.type {
-				font-size: 0.75rem;
-				color: var(--sl-color-neutral-500);
+				font-size: var(--font-size-xs);
+				color: var(--text-subtle);
 			}
 		}
 	}
 }
 
 sl-icon {
-	font-size: 2rem;
-	color: var(--sl-color-neutral-300);
+	font-size: var(--icon-size);
+	color: var(--icon);
 }
 
 sl-tooltip {
 	--sl-tooltip-arrow-size: 0;
 
 	&::part(body) {
-		background: #0D0D0E;
-		color: var(--sl-color-neutral-700);
+		background: var(--border);
+		color: var(--text-muted);
 	}
 }
 

package/x/dom/components/browser/style.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../../s/dom/components/browser/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,cAAc,CAAA;AAChC,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHjB,CAAA"}
+{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../../s/dom/components/browser/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmHjB,CAAA"}

package/x/dom/components/dropzone/component.d.ts

@@ -1 +1 @@
-export declare const QuayDropzone: typeof import("@benev/slate").ShadowElement;
+export declare const QuayDropzone: new () => HTMLElement;

package/x/dom/components/dropzone/component.js

@@ -1,10 +1,12 @@
-import { html, shadowComponent } from "@benev/slate";
+import { html } from "lit";
+import { shadowElement, useHost, useStyles } from "@e280/sly";
 import styleCss from "./style.css.js";
 import themeCss from "../../theme.css.js";
 import { findLocalGroup } from "../../utils/find-local-group.js";
-export const QuayDropzone = shadowComponent(use => {
-    use.styles(themeCss, styleCss);
-    const group = findLocalGroup(use.element);
+export const QuayDropzone = shadowElement(() => {
+    useStyles(themeCss, styleCss);
+    const host = useHost();
+    const group = findLocalGroup(host);
     const { dropzone, config: { root } } = group;
     return html `
 		<div class="dropzone" ?data-hovering=${dropzone.hovering}>

package/x/dom/components/dropzone/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../s/dom/components/dropzone/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAE,eAAe,EAAC,MAAM,cAAc,CAAA;AAElD,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AAEzC,OAAO,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAA;AAE9D,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC,GAAG,CAAC,EAAE;IACjD,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAE9B,MAAM,KAAK,GAAG,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;IACzC,MAAM,EAAC,QAAQ,EAAE,MAAM,EAAE,EAAC,IAAI,EAAC,EAAC,GAAG,KAAK,CAAA;IAExC,OAAO,IAAI,CAAA;yCAC6B,QAAQ,CAAC,QAAQ;;;;cAI5C,CAAC,CAAY,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC;YAC5C,CAAC,CAAY,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;gBACpC,CAAC,CAAY,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC;iBAC3C,CAAC,CAAY,EAAE,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC;iBAC7C,QAAQ,CAAC,SAAS;;;;;;;EAOjC,CAAA;AACF,CAAC,CAAC,CAAA"}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../s/dom/components/dropzone/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,aAAa,EAAE,OAAO,EAAE,SAAS,EAAC,MAAM,WAAW,CAAA;AAE3D,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AAEzC,OAAO,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAA;AAE9D,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC,GAAG,EAAE;IAC9C,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAC7B,MAAM,IAAI,GAAG,OAAO,EAAE,CAAA;IAEtB,MAAM,KAAK,GAAG,cAAc,CAAC,IAAI,CAAC,CAAA;IAClC,MAAM,EAAC,QAAQ,EAAE,MAAM,EAAE,EAAC,IAAI,EAAC,EAAC,GAAG,KAAK,CAAA;IAExC,OAAO,IAAI,CAAA;yCAC6B,QAAQ,CAAC,QAAQ;;;;cAI5C,CAAC,CAAY,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC;YAC5C,CAAC,CAAY,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;gBACpC,CAAC,CAAY,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC;iBAC3C,CAAC,CAAY,EAAE,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC;iBAC7C,QAAQ,CAAC,SAAS;;;;;;;EAOjC,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/dom/components/dropzone/style.css.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("@benev/slate").CSSResult;
+declare const _default: import("lit").CSSResult;
 export default _default;

package/x/dom/components/dropzone/style.css.js

@@ -1,4 +1,4 @@
-import { css } from "@benev/slate";
+import { css } from "lit";
 export default css `
 
 .dropzone {
@@ -8,16 +8,16 @@ export default css `
 	align-items: center;
 	justify-content: center;
 	position: relative;
-	border: 2px dashed var(--sl-color-neutral-300);
-	border-radius: 6px;
-	transition: background 0.2s;
+	border: var(--border-width) dashed var(--border-muted);
+	border-radius: var(--radius);
+	transition: background var(--transition), border-color var(--transition), color var(--transition);
 }
 
 .dz-input {
 	width: 100%;
 	height: 100%;
-	z-index: 999;
-	font-size: 14px;
+	z-index: var(--z-overlay);
+	font-size: var(--font-size-sm);
 	cursor: pointer;
 	opacity: 0;
 
@@ -27,15 +27,15 @@ export default css `
 }
 
 .dropzone:hover {
-	background: var(--sl-color-gray-50);
+	background: var(--surface-hover);
 }
 
 .dropzone[data-hovering] {
-	background: var(--sl-color-gray-50);
-	border-color: var(--sl-color-primary-500);
+	background: var(--surface-hover);
+	border-color: var(--primary);
 
 	& .dz-info {
-		color: var(--sl-color-primary-300);
+		color: var(--primary-soft);
 	}
 }
 
@@ -45,8 +45,8 @@ export default css `
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	gap: 0.5em;
-	color: var(--sl-color-neutral-700);
+	gap: var(--space-sm);
+	color: var(--text-muted);
 }
 
 `;

package/x/dom/components/dropzone/style.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../../s/dom/components/dropzone/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,cAAc,CAAA;AAChC,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDjB,CAAA"}
+{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../../s/dom/components/dropzone/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDjB,CAAA"}

package/x/dom/components/filter/component.d.ts

@@ -1 +1 @@
-export declare const QuayFilter: typeof import("@benev/slate").ShadowElement;
+export declare const QuayFilter: new () => HTMLElement;

package/x/dom/components/filter/component.js

@@ -1,22 +1,24 @@
-import { html, shadowComponent, css } from "@benev/slate";
+import { html, css } from "lit";
+import { shadowElement, useHost, useStyles } from "@e280/sly";
 import themeCss from "../../theme.css.js";
 import { findLocalGroup } from "../../utils/find-local-group.js";
-export const QuayFilter = shadowComponent(use => {
-    const group = findLocalGroup(use.element);
-    use.styles(themeCss, css `
+export const QuayFilter = shadowElement(() => {
+    const host = useHost();
+    const group = findLocalGroup(host);
+    useStyles(themeCss, css `
 		sl-menu {
-			margin-top: 0.3em;
+			margin-top: var(--space-xs);
 
 			.item {
 				display: flex;
 				align-items: center;
-				gap: 0.5em;
+				gap: var(--space-sm);
 			}
 		}
 	`);
     const onSelectFilter = (e) => {
         const value = e.detail.item.value;
-        group.selectedFilter.value = value;
+        group.selectedFilter(value);
     };
     return html `
 		<div class="panel">
@@ -28,7 +30,7 @@ export const QuayFilter = shadowComponent(use => {
 				${[...group.config.filters?.keys()].map(filter => html `
 					<sl-menu-item value=${filter}>
 						<div class=item>
-							<sl-icon name="check" slot="prefix" style="visibility: ${filter === group.selectedFilter.value ? 'visible' : 'hidden'}"></sl-icon>
+							<sl-icon name="check" slot="prefix" style="visibility: ${filter === group.selectedFilter() ? 'visible' : 'hidden'}"></sl-icon>
 							<span>${filter}</span>
 						</div>
 					</sl-menu-item>

package/x/dom/components/filter/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../s/dom/components/filter/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAE,eAAe,EAAE,GAAG,EAAC,MAAM,cAAc,CAAA;AACvD,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AACzC,OAAO,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAA;AAG9D,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC,GAAG,CAAC,EAAE;IAC/C,MAAM,KAAK,GAAG,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;IAEzC,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;EAUvB,CAAC,CAAA;IAEF,MAAM,cAAc,GAAG,CAAC,CAAkC,EAAE,EAAE;QAC7D,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAA;QACjC,KAAK,CAAC,cAAc,CAAC,KAAK,GAAG,KAAK,CAAA;IACnC,CAAC,CAAA;IAED,OAAO,IAAI,CAAA;;;;;;yBAMa,cAAc;MACjC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;2BAC/B,MAAM;;gEAE+B,MAAM,KAAK,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;eAC7G,MAAM;;;KAGhB,CAAC;;;SAGG,CAAA;AACT,CAAC,CAAC,CAAA"}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../s/dom/components/filter/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,aAAa,EAAE,OAAO,EAAE,SAAS,EAAC,MAAM,WAAW,CAAA;AAE3D,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AACzC,OAAO,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAA;AAG9D,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAC,GAAG,EAAE;IAC5C,MAAM,IAAI,GAAG,OAAO,EAAE,CAAA;IACtB,MAAM,KAAK,GAAG,cAAc,CAAC,IAAI,CAAC,CAAA;IAElC,SAAS,CAAC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;EAUtB,CAAC,CAAA;IAEF,MAAM,cAAc,GAAG,CAAC,CAAkC,EAAE,EAAE;QAC7D,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAA;QACjC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;IAC5B,CAAC,CAAA;IAED,OAAO,IAAI,CAAA;;;;;;yBAMa,cAAc;MACjC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;2BAC/B,MAAM;;gEAE+B,MAAM,KAAK,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;eACzG,MAAM;;;KAGhB,CAAC;;;SAGG,CAAA;AACT,CAAC,CAAC,CAAA"}

package/x/dom/components/outliner/component.d.ts

@@ -1 +1 @@
-export declare const QuayOutliner: typeof import("@benev/slate").ShadowElement;
+export declare const QuayOutliner: new () => HTMLElement;

package/x/dom/components/outliner/component.js

@@ -1,13 +1,15 @@
-import { html, shadowComponent } from "@benev/slate";
+import { html } from "lit";
+import { shadowElement, useHost, useStyles } from "@e280/sly";
 import themeCss from "../../theme.css.js";
 import { Tree } from "../../views/tree/component.js";
 import { findLocalGroup } from "../../utils/find-local-group.js";
-export const QuayOutliner = shadowComponent(use => {
-    use.styles(themeCss);
-    const group = findLocalGroup(use.element);
+export const QuayOutliner = shadowElement(() => {
+    useStyles(themeCss);
+    const host = useHost();
+    const group = findLocalGroup(host);
     return html `
 		<div class="panel">
-			${Tree([group])}
+			${Tree(group)}
 		</div>`;
 });
 //# sourceMappingURL=component.js.map

package/x/dom/components/outliner/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../s/dom/components/outliner/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAE,eAAe,EAAC,MAAM,cAAc,CAAA;AAClD,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AACzC,OAAO,EAAC,IAAI,EAAC,MAAM,+BAA+B,CAAA;AAClD,OAAO,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAA;AAE9D,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC,GAAG,CAAC,EAAE;IACjD,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;IACpB,MAAM,KAAK,GAAG,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;IAEzC,OAAO,IAAI,CAAA;;KAEP,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC;SACT,CAAA;AACT,CAAC,CAAC,CAAA"}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../s/dom/components/outliner/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,aAAa,EAAE,OAAO,EAAE,SAAS,EAAC,MAAM,WAAW,CAAA;AAE3D,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AACzC,OAAO,EAAC,IAAI,EAAC,MAAM,+BAA+B,CAAA;AAClD,OAAO,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAA;AAE9D,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC,GAAG,EAAE;IAC9C,SAAS,CAAC,QAAQ,CAAC,CAAA;IACnB,MAAM,IAAI,GAAG,OAAO,EAAE,CAAA;IACtB,MAAM,KAAK,GAAG,cAAc,CAAC,IAAI,CAAC,CAAA;IAElC,OAAO,IAAI,CAAA;;KAEP,IAAI,CAAC,KAAK,CAAC;SACP,CAAA;AACT,CAAC,CAAC,CAAA"}

package/x/dom/components/searchbar/component.d.ts

@@ -1 +1 @@
-export declare const QuaySearchbar: typeof import("@benev/slate").ShadowElement;
+export declare const QuaySearchbar: new () => HTMLElement;

package/x/dom/components/searchbar/component.js

@@ -1,21 +1,27 @@
-import { html, shadowComponent, css } from '@benev/slate';
+import { html, css } from "lit";
+import { shadowElement, useHost, useStyles } from "@e280/sly";
 import themeCss from '../../theme.css.js';
 import { findLocalGroup } from '../../utils/find-local-group.js';
 const styleCss = css `
+	sl-input::part(base) {
+		border-radius: var(--radius);
+	}
+
 	sl-input::part(prefix) {
-		padding-left: 0.5em;
+		padding-left: var(--space-sm);
 	}
 `;
-export const QuaySearchbar = shadowComponent(use => {
-    use.styles(themeCss, styleCss);
-    const group = findLocalGroup(use.element);
+export const QuaySearchbar = shadowElement(() => {
+    useStyles(themeCss, styleCss);
+    const host = useHost();
+    const group = findLocalGroup(host);
     return html `
 		<sl-input
 			size='small'
 			pill
 			placeholder='Search'
 			clearable
-			@sl-input=${(e) => group.searchText.value = e.target.value}
+			@sl-input=${(e) => group.searchText(e.target.value)}
 		>
 			<sl-icon name='search' slot='prefix'></sl-icon>
 		</sl-input>

package/x/dom/components/searchbar/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../s/dom/components/searchbar/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAE,eAAe,EAAE,GAAG,EAAC,MAAM,cAAc,CAAA;AACvD,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AAEzC,OAAO,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAA;AAE9D,MAAM,QAAQ,GAAG,GAAG,CAAA;;;;CAInB,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,eAAe,CAAC,GAAG,CAAC,EAAE;IAClD,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAC9B,MAAM,KAAK,GAAG,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;IAEzC,OAAO,IAAI,CAAA;;;;;;eAMG,CAAC,CAAc,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK;;;;EAI9F,CAAA;AACF,CAAC,CAAC,CAAA"}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../s/dom/components/searchbar/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,aAAa,EAAE,OAAO,EAAE,SAAS,EAAC,MAAM,WAAW,CAAA;AAE3D,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AAEzC,OAAO,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAA;AAE9D,MAAM,QAAQ,GAAG,GAAG,CAAA;;;;;;;;CAQnB,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAC,GAAG,EAAE;IAC/C,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAC7B,MAAM,IAAI,GAAG,OAAO,EAAE,CAAA;IACtB,MAAM,KAAK,GAAG,cAAc,CAAC,IAAI,CAAC,CAAA;IAElC,OAAO,IAAI,CAAA;;;;;;eAMG,CAAC,CAAc,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;;;;EAIvF,CAAA;AACF,CAAC,CAAC,CAAA"}

package/x/dom/components/sort/component.d.ts

@@ -1 +1 @@
-export declare const QuaySort: typeof import("@benev/slate").ShadowElement;
+export declare const QuaySort: new () => HTMLElement;

package/x/dom/components/sort/component.js

@@ -1,26 +1,28 @@
-import { html, shadowComponent, css } from "@benev/slate";
+import { html, css } from "lit";
+import { shadowElement, useHost, useStyles } from "@e280/sly";
 import themeCss from "../../theme.css.js";
 import { findLocalGroup } from "../../utils/find-local-group.js";
-export const QuaySort = shadowComponent(use => {
-    const group = findLocalGroup(use.element);
-    use.styles(themeCss, css `
+export const QuaySort = shadowElement(() => {
+    const host = useHost();
+    const group = findLocalGroup(host);
+    useStyles(themeCss, css `
 		sl-button sl-icon {
-			font-size: 14px;
+			font-size: var(--font-size-sm);
 		}
 
 		sl-menu {
-			margin-top: 0.3em;
+			margin-top: var(--space-xs);
 
 			.item {
 				display: flex;
 				align-items: center;
-				gap: 0.5em;
+				gap: var(--space-sm);
 			}
 		}
 	`);
     const onSelectSort = (e) => {
         const value = e.detail.item.value;
-        group.selectedSort.value = value;
+        group.selectedSort(value);
     };
     return html `
 		<div class="panel">
@@ -32,7 +34,7 @@ export const QuaySort = shadowComponent(use => {
 				${[...group.config.sorts?.keys()].map(sort => html `
 					<sl-menu-item value=${sort}>
 						<div class=item>
-							<sl-icon name="check" slot="prefix" style="visibility: ${sort === group.selectedSort.value ? 'visible' : 'hidden'}"></sl-icon>
+							<sl-icon name="check" slot="prefix" style="visibility: ${sort === group.selectedSort() ? 'visible' : 'hidden'}"></sl-icon>
 							<span>${sort}</span>
 						</div>
 					</sl-menu-item>

package/x/dom/components/sort/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../s/dom/components/sort/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAE,eAAe,EAAE,GAAG,EAAC,MAAM,cAAc,CAAA;AACvD,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AACzC,OAAO,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAA;AAG9D,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC,GAAG,CAAC,EAAE;IAC7C,MAAM,KAAK,GAAG,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;IAEzC,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;;;;;EAcvB,CAAC,CAAA;IAEF,MAAM,YAAY,GAAG,CAAC,CAAkC,EAAE,EAAE;QAC3D,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAA;QACjC,KAAK,CAAC,YAAY,CAAC,KAAK,GAAG,KAAK,CAAA;IACjC,CAAC,CAAA;IAED,OAAO,IAAI,CAAA;;;;;;yBAMa,YAAY;MAC/B,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;2BAC3B,IAAI;;gEAEiC,IAAI,KAAK,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;eACzG,IAAI;;;KAGd,CAAC;;;SAGG,CAAA;AACT,CAAC,CAAC,CAAA"}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../s/dom/components/sort/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,aAAa,EAAE,OAAO,EAAE,SAAS,EAAC,MAAM,WAAW,CAAA;AAE3D,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AACzC,OAAO,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAA;AAG9D,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CAAC,GAAG,EAAE;IAC1C,MAAM,IAAI,GAAG,OAAO,EAAE,CAAA;IACtB,MAAM,KAAK,GAAG,cAAc,CAAC,IAAI,CAAC,CAAA;IAElC,SAAS,CAAC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;;;;;EActB,CAAC,CAAA;IAEF,MAAM,YAAY,GAAG,CAAC,CAAkC,EAAE,EAAE;QAC3D,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAA;QACjC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;IAC1B,CAAC,CAAA;IAED,OAAO,IAAI,CAAA;;;;;;yBAMa,YAAY;MAC/B,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;2BAC3B,IAAI;;gEAEiC,IAAI,KAAK,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;eACrG,IAAI;;;KAGd,CAAC;;;SAGG,CAAA;AACT,CAAC,CAAC,CAAA"}

package/x/dom/components.d.ts

@@ -7,12 +7,12 @@ import { QuaySearchbar } from "./components/searchbar/component.js";
 import { QuayBreadcrumb } from "./components/breadcrumb/component.js";
 export { QuayOutliner, QuaySearchbar, QuayDropzone, QuayBrowser, QuayBreadcrumb, QuayFilter, QuaySort };
 export declare const components: {
-    QuayOutliner: typeof import("@benev/slate").ShadowElement;
-    QuaySearchbar: typeof import("@benev/slate").ShadowElement;
-    QuayDropzone: typeof import("@benev/slate").ShadowElement;
-    QuayBrowser: typeof import("@benev/slate").ShadowElement;
-    QuayBreadcrumb: typeof import("@benev/slate").ShadowElement;
-    QuayFilter: typeof import("@benev/slate").ShadowElement;
-    QuaySort: typeof import("@benev/slate").ShadowElement;
+    QuayOutliner: new () => HTMLElement;
+    QuaySearchbar: new () => HTMLElement;
+    QuayDropzone: new () => HTMLElement;
+    QuayBrowser: new () => HTMLElement;
+    QuayBreadcrumb: new () => HTMLElement;
+    QuayFilter: new () => HTMLElement;
+    QuaySort: new () => HTMLElement;
 };
 export declare function setShoelaceDarkTheme(): void;

package/x/dom/theme.css.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("@benev/slate").CSSResult;
+declare const _default: import("lit").CSSResult;
 export default _default;

package/x/dom/theme.css.js

@@ -1,11 +1,75 @@
-import { css } from "@benev/slate";
+import { css } from "lit";
 export default css `@layer theme, view; @layer theme {
 
+:host {
+	--surface: var(--quay-surface, #0f0f11);
+	--surface-active: var(--quay-surface-hover, var(--sl-color-neutral-0, #fff));
+	--surface-hover: var(--quay-surface-hover, var(--sl-color-gray-50, #f8f9fa));
+	--surface-selected: var(--quay-surface-selected, rgb(0 0 0 / 40%));
+	--border: var(--quay-border, #0d0d0e);
+	--border-muted: var(--quay-border, var(--sl-color-neutral-300, #d0d0d0));
+	--border-width: 1px;
+	--text: var(--quay-text, var(--sl-color-neutral-800, #333));
+	--text-muted: var(--quay-muted, var(--sl-color-neutral-700, #555));
+	--text-subtle: var(--quay-muted, var(--sl-color-neutral-500, #777));
+	--icon: var(--quay-muted, var(--sl-color-neutral-300, #d0d0d0));
+	--primary: var(--quay-accent, var(--sl-color-primary-500, #0ea5e9));
+	--primary-soft: color-mix(in srgb, var(--primary), white 65%);
+	--radius: var(--quay-radius, var(--sl-border-radius-medium, 6px));
+	--radius-small: var(--sl-border-radius-small, var(--radius));
+	--space-xs: var(--sl-spacing-2x-small, 0.3em);
+	--space-sm: var(--sl-spacing-x-small, 0.5rem);
+	--space-md: var(--sl-spacing-medium, 1rem);
+	--font-size-xs: var(--sl-font-size-x-small, 0.75rem);
+	--font-size-sm: var(--sl-font-size-small, 0.85rem);
+	--control-height: 30px;
+	--control-width: 40px;
+	--icon-size: 2rem;
+	--z-overlay: 999;
+	--transition: 0.2s ease;
+}
+
 * {
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
 }
 
+sl-button::part(base) {
+	border-color: var(--border);
+	color: var(--text-muted);
+}
+
+sl-button:hover::part(base),
+sl-button:focus-within::part(base),
+sl-button:active::part(base) {
+	background: var(--surface-hover);
+	border-color: var(--border);
+	color: var(--text);
+}
+
+sl-menu-item::part(base) {
+	color: var(--text-muted);
+}
+
+sl-menu-item:hover::part(base),
+sl-menu-item:focus-visible::part(base) {
+	background: var(--surface-hover);
+	color: var(--text);
+}
+
+sl-input::part(base) {
+	border-color: var(--border);
+	color: var(--text);
+}
+
+sl-input:hover::part(base),
+sl-input:focus-within::part(base) {
+	background: var(--surface);
+	border-color: var(--border);
+	box-shadow: 0 0 0 1px var(--surface-hover);
+	color: var(--text);
+}
+
 }`;
 //# sourceMappingURL=theme.css.js.map

package/x/dom/theme.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.css.js","sourceRoot":"","sources":["../../s/dom/theme.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,cAAc,CAAA;AAChC,eAAe,GAAG,CAAA;;;;;;;;EAQhB,CAAA"}
+{"version":3,"file":"theme.css.js","sourceRoot":"","sources":["../../s/dom/theme.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwEhB,CAAA"}