@sylwellsoftware/fray 0.6.0 → 0.7.0

package/dist/routing/router.d.ts.map

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

package/dist/runtime.d.ts

@@ -1,6 +1,7 @@
 import type { Component, ComponentDependency } from './Components/component.js';
 import type { StyleRegistry } from './styling/styleRegistry.js';
 import { ServiceScope } from './services.js';
+import type { BrowserRouter } from './routing/router.js';
 export interface FrayElementNameOptions {
     /** Namespace prepended to component host names. Defaults to `fray`. */
     prefix?: string | null;
@@ -11,6 +12,8 @@ export interface FrayRuntimeOptions {
     elementNames?: FrayElementNameOptions;
     /** Service scope inherited by every component created or mounted here. */
     services?: ServiceScope;
+    /** Optional caller-owned browser router inherited by routed components. */
+    router?: BrowserRouter;
 }
 /** Immutable application scope for element naming and structural styles. */
 export declare class FrayRuntime {
@@ -18,6 +21,8 @@ export declare class FrayRuntime {
     readonly elementNameOverrides: Readonly<Record<string, string>>;
     readonly styleRegistry: StyleRegistry;
     readonly services: ServiceScope;
+    readonly router: BrowserRouter | null;
+    private readonly routedRoots;
     constructor(options?: FrayRuntimeOptions, registry?: StyleRegistry);
     resolveElementName(hostName: string, standaloneHostName?: string | null): string;
     resolveHostSelector(selector: string, hostName: string, standaloneHostName?: string | null): string;

package/dist/runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../src/runtime.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,SAAS,EACT,mBAAmB,EACtB,MAAM,2BAA2B,CAAA;AAKlC,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAC,YAAY,EAAqB,MAAM,eAAe,CAAA;AAa9D,MAAM,WAAW,sBAAsB;IACnC,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;CAC/C;AAED,MAAM,WAAW,kBAAkB;IAC/B,YAAY,CAAC,EAAE,sBAAsB,CAAA;IACrC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,YAAY,CAAA;CAC1B;AAED,4EAA4E;AAC5E,qBAAa,WAAW;IACpB,QAAQ,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IACrC,QAAQ,CAAC,oBAAoB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAC/D,QAAQ,CAAC,aAAa,EAAE,aAAa,CAAA;IACrC,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAA;gBAG3B,OAAO,GAAE,kBAAuB,EAChC,QAAQ,GAAE,aAAqC;IAgCnD,kBAAkB,CAAC,QAAQ,EAAE,MAAM,EAAE,kBAAkB,GAAE,MAAM,GAAG,IAAW,GAAG,MAAM;IAWtF,mBAAmB,CACf,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,kBAAkB,GAAE,MAAM,GAAG,IAAW,GACzC,MAAM;IAKT,cAAc,CACV,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,kBAAkB,GAAE,MAAM,GAAG,IAAW,GACzC,MAAM;IAKT,MAAM,CAAC,KAAK,SAAS,OAAO,EAAE,EAAE,UAAU,SAAS,SAAS,EACxD,aAAa,EAAE,KAAI,GAAG,IAAI,EAAE,KAAK,KAAK,UAAU,EAChD,GAAG,IAAI,EAAE,KAAK,GACf,UAAU;IAMb,KAAK,CAAC,UAAU,SAAS,SAAS,EAC9B,SAAS,EAAE,UAAU,EACrB,MAAM,EAAE,UAAU,EAClB,MAAM,GAAE,IAAI,GAAG,IAAW,GAC3B,UAAU;IAMb,cAAc,CAAC,UAAU,EAAE,mBAAmB,GAAG,IAAI;IAQrD,YAAY,CAAC,cAAc,GAAE,QAA8B,GAAG,gBAAgB;CAGjF;AAED,wBAAgB,iBAAiB,CAAC,OAAO,GAAE,kBAAuB,GAAG,WAAW,CAE/E;AAED,4FAA4F;AAC5F,eAAO,MAAM,kBAAkB,aAAqC,CAAA"}
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../src/runtime.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,SAAS,EACT,mBAAmB,EACtB,MAAM,2BAA2B,CAAA;AAKlC,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAC,YAAY,EAAqB,MAAM,eAAe,CAAA;AAC9D,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAA;AAatD,MAAM,WAAW,sBAAsB;IACnC,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;CAC/C;AAED,MAAM,WAAW,kBAAkB;IAC/B,YAAY,CAAC,EAAE,sBAAsB,CAAA;IACrC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,aAAa,CAAA;CACzB;AAED,4EAA4E;AAC5E,qBAAa,WAAW;IACpB,QAAQ,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IACrC,QAAQ,CAAC,oBAAoB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAC/D,QAAQ,CAAC,aAAa,EAAE,aAAa,CAAA;IACrC,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAA;IAC/B,QAAQ,CAAC,MAAM,EAAE,aAAa,GAAG,IAAI,CAAA;IACrC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA2B;gBAGnD,OAAO,GAAE,kBAAuB,EAChC,QAAQ,GAAE,aAAqC;IAuCnD,kBAAkB,CAAC,QAAQ,EAAE,MAAM,EAAE,kBAAkB,GAAE,MAAM,GAAG,IAAW,GAAG,MAAM;IAWtF,mBAAmB,CACf,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,kBAAkB,GAAE,MAAM,GAAG,IAAW,GACzC,MAAM;IAKT,cAAc,CACV,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,kBAAkB,GAAE,MAAM,GAAG,IAAW,GACzC,MAAM;IAKT,MAAM,CAAC,KAAK,SAAS,OAAO,EAAE,EAAE,UAAU,SAAS,SAAS,EACxD,aAAa,EAAE,KAAI,GAAG,IAAI,EAAE,KAAK,KAAK,UAAU,EAChD,GAAG,IAAI,EAAE,KAAK,GACf,UAAU;IAMb,KAAK,CAAC,UAAU,SAAS,SAAS,EAC9B,SAAS,EAAE,UAAU,EACrB,MAAM,EAAE,UAAU,EAClB,MAAM,GAAE,IAAI,GAAG,IAAW,GAC3B,UAAU;IAoBb,cAAc,CAAC,UAAU,EAAE,mBAAmB,GAAG,IAAI;IAQrD,YAAY,CAAC,cAAc,GAAE,QAA8B,GAAG,gBAAgB;CAGjF;AAED,wBAAgB,iBAAiB,CAAC,OAAO,GAAE,kBAAuB,GAAG,WAAW,CAE/E;AAED,4FAA4F;AAC5F,eAAO,MAAM,kBAAkB,aAAqC,CAAA"}

package/package.json

@@ -2,7 +2,7 @@
   "type": "module",
   "name": "@sylwellsoftware/fray",
   "private": false,
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Browser-only TypeScript component runtime, JSX controls, and semantic themes.",
   "license": "Apache-2.0",
   "author": {
@@ -64,11 +64,11 @@
     "./themes/**/*.css"
   ],
   "peerDependencies": {
-    "@sylwellsoftware/glue": "^0.6.0"
+    "@sylwellsoftware/glue": "^0.7.0"
   },
   "devDependencies": {
     "vite": "^6.3.5",
-    "@sylwellsoftware/glue": "^0.6.0"
+    "@sylwellsoftware/glue": "^0.7.0"
   },
   "engines": {
     "node": ">=22",

package/styles/structural.css

@@ -54,22 +54,27 @@ fieldset:has(> [data-part="options"]) [role="radio"]:disabled {
   pointer-events: none;
 }
 
+/* labeledinput */
+fray-color-picker,
+fray-dropdown,
+fray-textbox,
+fray-theme-picker {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: .5em;
+}
+
 /* inputline */
-fray-checkbox,
-fray-checkbox > [role="checkbox"],
 fray-color-picker,
 fray-color-picker > select,
 fray-dropdown,
 fray-dropdown > select,
 fray-list-view > [role="listbox"] > [role="option"],
-fray-quad-checkbox,
-fray-quad-checkbox > [role="checkbox"],
 fray-textbox,
 fray-textbox > input,
 fray-theme-picker,
-fray-theme-picker > select,
-fray-tri-checkbox,
-fray-tri-checkbox > [role="checkbox"] {
+fray-theme-picker > select {
   display: flex;
   flex-flow: row nowrap;
   position: relative;
@@ -78,30 +83,16 @@ fray-tri-checkbox > [role="checkbox"] {
 }
 
 /* input */
-fray-checkbox > [role="checkbox"],
 fray-color-picker > select,
 fray-dropdown > select,
-fray-quad-checkbox > [role="checkbox"],
 fray-textbox > input,
-fray-theme-picker > select,
-fray-tri-checkbox > [role="checkbox"] {
+fray-theme-picker > select {
   pointer-events: all;
   width: var(--input-width, 15rem);
   box-sizing: border-box;
   white-space: nowrap;
 }
 
-/* labeledinput */
-fray-color-picker,
-fray-dropdown,
-fray-textbox,
-fray-theme-picker {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  gap: .5em;
-}
-
 /* after */
 fray-placeholder::after {
   content: "";
@@ -146,20 +137,67 @@ button {
             font-family: inherit;
         }
 
-fray-checkbox > [role="checkbox"] {
+fray-check-box {
+            display: inline-block;
+        }
+
+        fray-check-box > label {
             display: inline-flex;
             align-items: center;
             gap: 0.35em;
-            width: auto;
-            font-family: inherit;
+            cursor: pointer;
+        }
+
+        fray-check-box[data-disabled] > label {
+            cursor: not-allowed;
+        }
+
+        fray-check-box input[type="checkbox"] {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0 0 0 0);
+            white-space: nowrap;
+            border: 0;
+            font: inherit;
+            font-size: var(--ui-font-size, inherit);
         }
 
-        fray-checkbox .inputshell {
+        fray-check-box input[type="checkbox"] + .checkboxshell {
+            position: relative;
             display: inline-grid;
             width: 1em;
             height: 1em;
+            flex: 0 0 1em;
+            overflow: hidden;
+            box-sizing: border-box;
             line-height: 1;
             place-items: center;
+            color: var(--input-color, var(--ui-text-color, currentColor));
+            background: var(--checkbox-box-background, var(--ui-input-bg, transparent));
+            border: var(--checkbox-box-border, var(--cbx-o-border, 1px solid currentColor));
+            border-radius: var(--cbx-border-radius, var(--radius-sm, 0.2rem));
+            font-family: inherit;
+            font-size: 1em;
+            user-select: none;
+        }
+
+        fray-check-box input[type="checkbox"]:checked + .checkboxshell {
+            color: var(--checkbox-symbol-color, var(--selection-color, currentColor));
+            background: var(--checkbox-box-background-checked,
+                var(--selection-background, var(--ui-accent-color, Highlight)));
+        }
+
+        fray-check-box input[type="checkbox"]:focus-visible + .checkboxshell {
+            outline: 2px solid var(--focus-color, var(--ui-accent-color, Highlight));
+            outline-offset: 1px;
+        }
+
+        fray-check-box input[type="checkbox"]:disabled + .checkboxshell {
+            opacity: 0.6;
         }
 
 fray-color-picker {
@@ -377,20 +415,67 @@ fray-progress-bar {
             }
         }
 
-fray-quad-checkbox > [role="checkbox"] {
+fray-quad-checkbox {
+            display: inline-block;
+        }
+
+        fray-quad-checkbox > label {
             display: inline-flex;
             align-items: center;
             gap: 0.35em;
-            width: auto;
-            font-family: inherit;
+            cursor: pointer;
+        }
+
+        fray-quad-checkbox[data-disabled] > label {
+            cursor: not-allowed;
+        }
+
+        fray-quad-checkbox input[type="checkbox"] {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0 0 0 0);
+            white-space: nowrap;
+            border: 0;
+            font: inherit;
+            font-size: var(--ui-font-size, inherit);
         }
 
-        fray-quad-checkbox .inputshell {
+        fray-quad-checkbox input[type="checkbox"] + .checkboxshell {
+            position: relative;
             display: inline-grid;
             width: 1em;
             height: 1em;
+            flex: 0 0 1em;
+            overflow: hidden;
+            box-sizing: border-box;
             line-height: 1;
             place-items: center;
+            color: var(--input-color, var(--ui-text-color, currentColor));
+            background: var(--checkbox-box-background, var(--ui-input-bg, transparent));
+            border: var(--checkbox-box-border, var(--cbx-o-border, 1px solid currentColor));
+            border-radius: var(--cbx-border-radius, var(--radius-sm, 0.2rem));
+            font-family: inherit;
+            font-size: 1em;
+            user-select: none;
+        }
+
+        fray-quad-checkbox input[type="checkbox"]:checked + .checkboxshell {
+            color: var(--checkbox-symbol-color, var(--selection-color, currentColor));
+            background: var(--checkbox-box-background-checked,
+                var(--selection-background, var(--ui-accent-color, Highlight)));
+        }
+
+        fray-quad-checkbox input[type="checkbox"]:focus-visible + .checkboxshell {
+            outline: 2px solid var(--focus-color, var(--ui-accent-color, Highlight));
+            outline-offset: 1px;
+        }
+
+        fray-quad-checkbox input[type="checkbox"]:disabled + .checkboxshell {
+            opacity: 0.6;
         }
 
 aside {
@@ -564,18 +649,65 @@ fray-tree-view {
             }
         }
 
-fray-tri-checkbox > [role="checkbox"] {
+fray-tri-checkbox {
+            display: inline-block;
+        }
+
+        fray-tri-checkbox > label {
             display: inline-flex;
             align-items: center;
             gap: 0.35em;
-            width: auto;
-            font-family: inherit;
+            cursor: pointer;
+        }
+
+        fray-tri-checkbox[data-disabled] > label {
+            cursor: not-allowed;
+        }
+
+        fray-tri-checkbox input[type="checkbox"] {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0 0 0 0);
+            white-space: nowrap;
+            border: 0;
+            font: inherit;
+            font-size: var(--ui-font-size, inherit);
         }
 
-        fray-tri-checkbox .inputshell {
+        fray-tri-checkbox input[type="checkbox"] + .checkboxshell {
+            position: relative;
             display: inline-grid;
             width: 1em;
             height: 1em;
+            flex: 0 0 1em;
+            overflow: hidden;
+            box-sizing: border-box;
             line-height: 1;
             place-items: center;
+            color: var(--input-color, var(--ui-text-color, currentColor));
+            background: var(--checkbox-box-background, var(--ui-input-bg, transparent));
+            border: var(--checkbox-box-border, var(--cbx-o-border, 1px solid currentColor));
+            border-radius: var(--cbx-border-radius, var(--radius-sm, 0.2rem));
+            font-family: inherit;
+            font-size: 1em;
+            user-select: none;
+        }
+
+        fray-tri-checkbox input[type="checkbox"]:checked + .checkboxshell {
+            color: var(--checkbox-symbol-color, var(--selection-color, currentColor));
+            background: var(--checkbox-box-background-checked,
+                var(--selection-background, var(--ui-accent-color, Highlight)));
+        }
+
+        fray-tri-checkbox input[type="checkbox"]:focus-visible + .checkboxshell {
+            outline: 2px solid var(--focus-color, var(--ui-accent-color, Highlight));
+            outline-offset: 1px;
+        }
+
+        fray-tri-checkbox input[type="checkbox"]:disabled + .checkboxshell {
+            opacity: 0.6;
         }

package/themes/dark.css

@@ -65,7 +65,7 @@
       border: var(--button-border-disabled);
     }
 
-    :where(input, select, textarea) {
+    :where(input:not([type="checkbox"]), select, textarea) {
       min-height: 2rem;
       padding: 0.25rem 0.5rem;
       color: var(--ui-text-color);
@@ -82,5 +82,17 @@
       outline: 2px solid var(--ui-accent-color);
       outline-offset: 1px;
     }
+
+    :where(.checkboxshell) {
+      color: var(--ui-text-color);
+      background: var(--ui-input-bg);
+      border: var(--cbx-o-border);
+      border-radius: var(--cbx-border-radius);
+    }
+
+    :where(input[type="checkbox"]:checked + .checkboxshell) {
+      color: #102030;
+      background: var(--ui-accent-color);
+    }
   }
 }

package/themes/java/theme.css

@@ -192,7 +192,7 @@
       background: var(--button-background);
     }
 
-    :where(input, select, textarea, .inputlike) {
+    :where(input:not([type="checkbox"]), select, textarea, .inputlike) {
       min-height: var(--control-min-height);
       padding: var(--space-xs) var(--space-sm);
       color: var(--input-color);
@@ -204,7 +204,7 @@
       font: inherit;
     }
 
-    :where(input, select, textarea, .inputlike):disabled,
+    :where(input:not([type="checkbox"]), select, textarea, .inputlike):disabled,
     :where(.inputlike[aria-disabled="true"]) {
       color: var(--input-color-disabled);
       background: var(--input-background-disabled);
@@ -219,6 +219,18 @@
       box-shadow: var(--input-shadow);
     }
 
+    :where(.checkboxshell) {
+      color: var(--input-color);
+      background: var(--checkbox-box-background);
+      border: var(--checkbox-box-border);
+      border-radius: var(--radius-sm);
+    }
+
+    :where(input[type="checkbox"]:checked + .checkboxshell) {
+      color: var(--checkbox-symbol-color);
+      background: var(--checkbox-box-background-checked);
+    }
+
     :where([role="checkbox"][aria-checked="true"] .inputshell) {
       color: var(--checkbox-symbol-color);
       background: var(--checkbox-box-background-checked);

package/themes/light.css

@@ -65,7 +65,7 @@
       border: var(--button-border-disabled);
     }
 
-    :where(input, select, textarea) {
+    :where(input:not([type="checkbox"]), select, textarea) {
       min-height: 2rem;
       padding: 0.25rem 0.5rem;
       color: var(--ui-text-color);
@@ -82,5 +82,17 @@
       outline: 2px solid var(--ui-accent-color);
       outline-offset: 1px;
     }
+
+    :where(.checkboxshell) {
+      color: var(--ui-text-color);
+      background: var(--ui-input-bg);
+      border: var(--cbx-o-border);
+      border-radius: var(--cbx-border-radius);
+    }
+
+    :where(input[type="checkbox"]:checked + .checkboxshell) {
+      color: #ffffff;
+      background: var(--ui-accent-color);
+    }
   }
 }

package/themes/minimal/theme.css

@@ -192,7 +192,7 @@
       background: var(--button-background);
     }
 
-    :where(input, select, textarea, .inputlike) {
+    :where(input:not([type="checkbox"]), select, textarea, .inputlike) {
       min-height: var(--control-min-height);
       padding: var(--space-xs) var(--space-sm);
       color: var(--input-color);
@@ -204,7 +204,7 @@
       font: inherit;
     }
 
-    :where(input, select, textarea, .inputlike):disabled,
+    :where(input:not([type="checkbox"]), select, textarea, .inputlike):disabled,
     :where(.inputlike[aria-disabled="true"]) {
       color: var(--input-color-disabled);
       background: var(--input-background-disabled);
@@ -219,6 +219,18 @@
       box-shadow: var(--input-shadow);
     }
 
+    :where(.checkboxshell) {
+      color: var(--input-color);
+      background: var(--checkbox-box-background);
+      border: var(--checkbox-box-border);
+      border-radius: var(--radius-sm);
+    }
+
+    :where(input[type="checkbox"]:checked + .checkboxshell) {
+      color: var(--checkbox-symbol-color);
+      background: var(--checkbox-box-background-checked);
+    }
+
     :where([role="checkbox"][aria-checked="true"] .inputshell) {
       color: var(--checkbox-symbol-color);
       background: var(--checkbox-box-background-checked);