@swiftwc/ui 0.0.0-dev.66 → 0.0.0-dev.68

package/generated/css/index.css

@@ -1134,6 +1134,10 @@
   :where(table-view)::part(table-footer-leading-stack),
   :where(table-view)::part(table-footer-principal-stack),
   :where(table-view)::part(table-footer-trailing-stack),
+  :where(toggle-view)::part(toggle-stack),
+  :where(toggle-view)::part(toggle-label-stack),
+  :where(toggle-view)::part(toggle-input-stack),
+  :where(toggle-view)::part(text-field-form-input),
   :where(text-field)::part(text-field-stack),
   :where(text-field)::part(text-field-label-stack),
   :where(text-field)::part(text-field-input-stack),
@@ -1421,8 +1425,8 @@
   :where(detail-placeholder > scroll-view) {
     overflow: clip auto;
     pointer-events: all;
-    overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
     container: scroll-view/size;
     padding-block: var(--safe-area-inset-top) var(--safe-area-inset-bottom);
     padding-inline: var(--safe-area-inset-left) var(--safe-area-inset-right);
@@ -1911,8 +1915,8 @@
   }
   :where(navigation-stack > scroll-view, navigation-split-view > scroll-view, [is=sidebar-view] > scroll-view, body-view > scroll-view, [is=full-screen] > scroll-view, [is=sheet-view] > scroll-view) {
     overflow: clip auto;
-    overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
     padding-block: var(--safe-area-inset-top) var(--safe-area-inset-bottom);
     padding-inline: var(--safe-area-inset-left) var(--safe-area-inset-right);
     container: scroll-view/size;
@@ -1993,8 +1997,6 @@
   :where(scroll-view-proxy:has(> v-stack, > h-stack) > v-stack,
   scroll-view-proxy:has(> v-stack, > h-stack) > h-stack) {
     position: relative;
-    overscroll-behavior: contain;
-    -webkit-overflow-scrolling: touch;
     scrollbar-width: thin;
     container: scroll-view-proxy/inline-size;
   }
@@ -2010,10 +2012,14 @@
   :where(scroll-view-proxy:has(> v-stack, > h-stack) > v-stack) {
     overflow: clip auto;
     scroll-snap-type: block mandatory;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior-block: contain;
   }
   :where(scroll-view-proxy:has(> v-stack, > h-stack) > h-stack) {
     overflow: auto clip;
     scroll-snap-type: inline mandatory;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior-inline: contain;
   }
   :where(scroll-view-proxy:has(> v-stack, > h-stack) > h-stack[padding]) {
     scroll-padding-inline: 1rem;
@@ -2039,9 +2045,36 @@
   :where(h-stack[template="auto spacer auto"]) {
     grid-template-columns: auto minmax(0, 1fr) auto;
   }
+  :where(h-stack[template="repeat(1,spacer)"]) {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  :where(h-stack[template="repeat(2,spacer)"]) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  :where(h-stack[template="repeat(3,spacer)"]) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
   :where(h-stack[template="repeat(4,spacer)"]) {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+  :where(h-stack[template="repeat(5,spacer)"]) {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  :where(h-stack[template="repeat(6,spacer)"]) {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  :where(h-stack[template="repeat(7,spacer)"]) {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  :where(h-stack[template="repeat(8,spacer)"]) {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  :where(h-stack[template="repeat(9,spacer)"]) {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  :where(h-stack[template="repeat(10,spacer)"]) {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
   :where(h-stack[template="repeat(2,spacer) auto"]) {
     grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
   }
@@ -2575,14 +2608,6 @@
     grid-template-rows: auto 1fr auto;
     grid-template-areas: "top-bar" "spacer" "bottom-bar";
   }
-  :where(tool-bar > *:not(sidebar-toggle), tool-bar > sidebar-toggle > tool-bar-item, tab-view > sidebar-toggle > tool-bar-item, navigation-split-view > sidebar-toggle > tool-bar-item) {
-    backdrop-filter: var(--liquid-glass-backdrop-filter);
-    box-shadow: var(--toolbar-cell-box-shadow);
-    min-inline-size: var(--toolbar-cell-min-size);
-    transform: var(--toolbar-cell-scale, );
-    filter: var(--toolbar-cell-filter, );
-    opacity: var(--toolbar-cell-opacity, );
-  }
   :where(tool-bar)::part(top-bar), :where(tool-bar)::part(bottom-bar) {
     position: relative;
     padding-inline: var(--safe-area-inset-left, 0px) var(--safe-area-inset-right, 0px);
@@ -2609,6 +2634,14 @@
     column-gap: var(--toolbar-col-gap);
     padding-inline: var(--toolbar-col-gap) var(--toolbar-col-gap);
   }
+  :where(tool-bar > *:not(sidebar-toggle), tool-bar > sidebar-toggle > tool-bar-item, tab-view > sidebar-toggle > tool-bar-item, navigation-split-view > sidebar-toggle > tool-bar-item) {
+    backdrop-filter: var(--liquid-glass-backdrop-filter);
+    box-shadow: var(--toolbar-cell-box-shadow);
+    min-inline-size: var(--toolbar-cell-min-size);
+    transform: var(--toolbar-cell-scale, );
+    filter: var(--toolbar-cell-filter, );
+    opacity: var(--toolbar-cell-opacity, );
+  }
   @media (min-width: 37rem) and (min-height: 27.75rem) {
     :where([is=sheet-view] tool-bar)::part(top-bar), :where([is=sheet-view] tool-bar)::part(bottom-bar) {
       --safe-area-inset-left: 0px;
@@ -3088,6 +3121,52 @@
     }
   }
 }
+@layer sw-components {
+  :where(toggle-view) {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
+    --toggle--trigger-bg: lightgray;
+  }
+  :where(toggle-view)::part(toggle-stack) {
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
+    column-gap: var(--labeled-content-column-gap);
+  }
+  :where(toggle-view)::part(toggle-label-stack) {
+    color: var(--secondary);
+  }
+  :where(toggle-view)::part(toggle-input-stack) {
+    place-items: stretch;
+    place-content: stretch;
+  }
+  :where(toggle-view)::part(toggle-form-input):focus {
+    outline: blue solid 5px;
+  }
+  :where(toggle-view)::part(toggle-form-input) {
+    text-align: end;
+    position: relative;
+    display: grid;
+    outline: red solid 3px;
+    border-radius: 2rem;
+    inline-size: 4rem;
+    block-size: 1rem;
+    background: var(--toggle--trigger-bg);
+  }
+  :where(toggle-view)::part(toggle-form-input)::before {
+    content: "";
+    display: grid;
+    position: absolute;
+    inset: 0 auto auto 0;
+    inline-size: 1rem;
+    block-size: 1rem;
+    border-radius: 1rem;
+    backdrop-filter: var(--liquid-glass-backdrop-filter);
+    box-shadow: var(--liquid-glass-box-shadow);
+  }
+  toggle-view[aria-checked=true] {
+    --toggle--trigger-bg: green;
+  }
+}
 @layer sw-components {
   :where(labeled-content) {
     container: labeled-content/inline-size;
@@ -3250,8 +3329,8 @@
     pointer-events: none;
   }
   :where(menu-view)::part(menu-form) {
-    overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
     --menu--dialog-max-inline-size: anchor-size();
     --menu--dialog-max-block-size: anchor-size();
   }
@@ -3302,7 +3381,7 @@
     --menu--dialog-max-inline-size: anchor-size();
     --menu--dialog-max-block-size: anchor-size();
   }
-  menu-view[open]:not(tool-bar-item > menu-view) {
+  :where(menu-view[open]:not(tool-bar-item > menu-view)) {
     --menu--summary-scale: scale(0.01);
     --menu--summary-filter: blur(10px);
   }
@@ -4209,6 +4288,21 @@
     grid-template-areas: "header" "main" "footer";
     gap: 0.5rem;
   }
+  :where(section-view)::part(section-header-stack), :where(section-view)::part(section-footer-stack) {
+    pointer-events: none;
+  }
+  :where(section-view)::part(section-header-stack) {
+    grid-area: header;
+  }
+  :where(section-view)::part(section-main-stack) {
+    grid-area: main;
+  }
+  :where(section-view)::part(section-footer-stack) {
+    grid-area: footer;
+  }
+  :where(section-view)::part(section-header-stack) {
+    order: -1;
+  }
   :where(section-view:has(> [slot=header]):not(:has(> [slot=footer]))) {
     grid-template-rows: auto minmax(max-content, 1fr);
     grid-template-areas: "header" "main";
@@ -4227,21 +4321,6 @@
   :where(section-view:not(:has(> [slot=footer])))::part(section-footer-stack) {
     display: none;
   }
-  :where(section-view)::part(section-header-stack), :where(section-view)::part(section-footer-stack) {
-    pointer-events: none;
-  }
-  :where(section-view)::part(section-header-stack) {
-    grid-area: header;
-  }
-  :where(section-view)::part(section-main-stack) {
-    grid-area: main;
-  }
-  :where(section-view)::part(section-footer-stack) {
-    grid-area: footer;
-  }
-  :where(section-view)::part(section-header-stack) {
-    order: -1;
-  }
   section-view {
     /*  :where(&:not(& &))::part(section-footer-stack),
     :where(&:not(& &))::part(section-header-stack) {
@@ -4302,7 +4381,7 @@
     border-radius: 0 0 var(--insetlist-item-border-radius) var(--insetlist-item-border-radius);
     border-top: 1px solid var(--separator);
   }
-  :where(:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)))::part(table-header-leading-stack), :where(:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)))::part(table-header-principal-stack), :where(:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)))::part(table-header-trailing-stack), :where(:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)))::part(table-footer-leading-stack), :where(:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)))::part(table-footer-principal-stack), :where(:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)))::part(table-footer-trailing-stack) {
+  :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view))::part(table-header-leading-stack), :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view))::part(table-header-principal-stack), :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view))::part(table-header-trailing-stack), :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view))::part(table-footer-leading-stack), :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view))::part(table-footer-principal-stack), :where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view))::part(table-footer-trailing-stack) {
     grid-auto-flow: column;
     grid-template-columns: minmax(0, 1fr);
     column-gap: var(--toolbar-col-gap);
@@ -5317,8 +5396,8 @@
     z-index: -1;
   }
   :where([is=tab-bar] > [is=form-view]) {
-    overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
     pointer-events: all;
     touch-action: none;
     grid-auto-flow: column;

package/generated/events/index.d.ts

@@ -6,3 +6,4 @@ export * from './picker-view';
 export * from './scroll-view';
 export * from './tab-view';
 export * from './text-field';
+export * from './toggle-view';

package/generated/events/index.js

@@ -6,3 +6,4 @@ export * from './picker-view';
 export * from './scroll-view';
 export * from './tab-view';
 export * from './text-field';
+export * from './toggle-view';

package/generated/events/toggle-view.d.ts

@@ -0,0 +1,9 @@
+export type ToggleChangeDetail = {
+    isOn: boolean;
+    value: string | null;
+};
+declare global {
+    interface HTMLElementEventMap {
+        change: CustomEvent<ToggleChangeDetail>;
+    }
+}

package/generated/events/toggle-view.js

@@ -0,0 +1 @@
+export {};

package/generated/tpl/html.d.ts

@@ -0,0 +1,5 @@
+export interface TemplateResult {
+    strings: TemplateStringsArray;
+    values: unknown[];
+}
+export default function (strings: TemplateStringsArray, ...values: unknown[]): TemplateResult;

package/generated/tpl/html.js

@@ -0,0 +1,3 @@
+export default function (strings, ...values) {
+    return { strings, values };
+}

package/generated/tpl/index.d.ts

@@ -0,0 +1,4 @@
+export { default as html } from './html';
+export * from './html';
+export { default as render } from './render';
+export * from './render';

package/generated/tpl/index.js

@@ -0,0 +1,4 @@
+export { default as html } from './html';
+export * from './html';
+export { default as render } from './render';
+export * from './render';

package/generated/tpl/render.d.ts

@@ -0,0 +1,2 @@
+import type { TemplateResult } from './html';
+export default function (result: TemplateResult, container: Element | ShadowRoot): void;

package/generated/tpl/render.js

@@ -0,0 +1,135 @@
+// --- Template preparation (runs ONCE per unique template literal) -----
+const MARKER = '\uD83D\uDD25PART\uD83D\uDD25'; // unlikely-collision sentinel
+const templateCache = new WeakMap();
+function prepare(strings) {
+    let cached = templateCache.get(strings);
+    if (cached)
+        return cached;
+    const partDescriptors = [];
+    let htmlStr = '';
+    strings.forEach((chunk, i) => {
+        htmlStr += chunk;
+        if (i < strings.length - 1) {
+            // Is this interpolation inside an attribute value?
+            // e.g. `...aria-checked="${...}"` — chunk ends with `attr="` or `attr='` or `attr=`
+            const attrMatch = /([a-zA-Z0-9_-]+)=(["']?)$/.exec(chunk);
+            if (attrMatch) {
+                partDescriptors.push({ type: 'attr', name: attrMatch[1] });
+                htmlStr += MARKER; // becomes the attribute's value
+            }
+            else {
+                partDescriptors.push({ type: 'child' });
+                // start/end comment pair — gives us a stable region to patch later,
+                // and room to grow into list/array rendering without a redesign
+                htmlStr += `<!--${MARKER}-->`;
+            }
+        }
+    });
+    const element = document.createElement('template');
+    element.innerHTML = htmlStr;
+    cached = { element, partDescriptors };
+    templateCache.set(strings, cached);
+    return cached;
+}
+const instanceCache = new WeakMap();
+function createInstance(prepared) {
+    const fragment = prepared.element.content.cloneNode(true);
+    const parts = [];
+    // Walk the clone once, in the same order `prepare()` emitted markers,
+    // and bind each descriptor to a real node.
+    const walker = document.createTreeWalker(fragment, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT);
+    let descriptorIndex = 0;
+    const descriptors = prepared.partDescriptors;
+    let node;
+    while ((node = walker.nextNode())) {
+        if (descriptorIndex >= descriptors.length)
+            break;
+        if (node.nodeType === Node.COMMENT_NODE && node.data === MARKER) {
+            const start = node;
+            const end = document.createComment(MARKER);
+            start.after(end);
+            parts.push({ type: 'child', start, end, committed: undefined });
+            descriptorIndex++;
+        }
+        else if (node.nodeType === Node.ELEMENT_NODE) {
+            const el = node;
+            for (const attr of Array.from(el.attributes)) {
+                if (attr.value === MARKER) {
+                    const desc = descriptors[descriptorIndex];
+                    if (desc.type === 'attr') {
+                        parts.push({ type: 'attr', el, name: desc.name, committed: undefined });
+                        descriptorIndex++;
+                    }
+                }
+            }
+        }
+    }
+    return { fragment, parts };
+}
+// --- Committing values into parts (the only thing that runs per update) -
+function isTemplateResult(v) {
+    return !!v && typeof v === 'object' && 'strings' in v && 'values' in v;
+}
+function toNode(value) {
+    if (value instanceof Node)
+        return value;
+    if (isTemplateResult(value)) {
+        const { fragment, parts } = createInstance(prepare(value.strings));
+        parts.forEach((part, i) => {
+            const v = value.values[i];
+            part.type === 'child' ? commitChild(part, v) : commitAttr(part, v);
+        });
+        return fragment;
+    }
+    return document.createTextNode(String(value));
+}
+function commitChild(part, value) {
+    if (value === part.committed)
+        return; // dirty-check, skip untouched parts
+    // clear everything between start/end
+    let n = part.start.nextSibling;
+    while (n && n !== part.end) {
+        const next = n.nextSibling;
+        n.remove();
+        n = next;
+    }
+    for (const item of Array.isArray(value) ? value : [value]) {
+        if (item === null || item === undefined || item === false)
+            continue;
+        part.end.before(toNode(item));
+    }
+    part.committed = value;
+}
+function commitAttr(part, value) {
+    if (value === part.committed)
+        return;
+    if (value === null || value === undefined || value === false) {
+        part.el.removeAttribute(part.name);
+    }
+    else {
+        part.el.setAttribute(part.name, String(value));
+    }
+    part.committed = value;
+}
+// --- Public render() ----------------------------------------------------
+export default function (result, container) {
+    const prepared = prepare(result.strings);
+    let instance = instanceCache.get(container);
+    if (!instance || instance.strings !== result.strings) {
+        // first render, OR the template shape changed entirely — full (re)build
+        container.textContent = '';
+        const { fragment, parts } = createInstance(prepared);
+        container.append(fragment);
+        instance = { strings: result.strings, fragmentRoot: fragment, parts };
+        instanceCache.set(container, instance);
+    }
+    // same template shape as last time → patch existing DOM nodes only,
+    // no innerHTML, no re-clone, no focus/scroll loss
+    instance.parts.forEach((part, i) => {
+        const value = result.values[i];
+        if (part.type === 'child')
+            commitChild(part, value);
+        else
+            commitAttr(part, value);
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.66",
+  "version": "0.0.0-dev.68",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -63,11 +63,12 @@
     "build:ts": "tsc",
     "build:scss": "sass --style=expanded --no-source-map scss/index.scss generated/css/index.css",
     "build:manifest": "tsx scripts/make-manifest.ts",
-    "build:barrels": "npm run build:barrels:components && npm run build:barrels:events && npm run build:barrels:buses && npm run build:barrels:i18n",
+    "build:barrels": "npm run build:barrels:components && npm run build:barrels:events && npm run build:barrels:buses && npm run build:barrels:tpl && npm run build:barrels:i18n",
     "build:barrels:components": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/components --exclude \".\\.test\\.ts\"",
     "build:barrels:events": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/events --exclude \".\\.test\\.ts\"",
     "build:barrels:buses": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/buses",
     "build:barrels:i18n": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --fullPathname --directory ./js/i18n/locales",
+    "build:barrels:tpl": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/tpl --exclude \".\\.test\\.ts\"",
     "build:barrels:decorators": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/internal/decorators",
     "format:check": "prettier . --check",
     "format:write": "prettier . --write",

package/scss/_components.scss

@@ -52,6 +52,8 @@
 
 @forward 'components/label-view';
 
+@forward 'components/toggle-view';
+
 @forward 'components/labeled-content';
 
 // @forward 'components/button-view';

package/scss/components/_date-picker.scss

@@ -5,26 +5,26 @@
     :where(&) {
       grid-template-columns: minmax(0, 1fr);
       grid-template-rows: minmax(0, 1fr);
-    }
 
-    :where(&)::part(date-picker-stack) {
-      grid-template-columns: auto minmax(0, 1fr);
-      grid-template-rows: minmax(0, 1fr);
-    }
+      &::part(date-picker-stack) {
+        grid-template-columns: auto minmax(0, 1fr);
+        grid-template-rows: minmax(0, 1fr);
+      }
 
-    :where(&)::part(date-picker-label-stack) {
-      // display: grid;
-    }
+      &::part(date-picker-label-stack) {
+        // display: grid;
+      }
 
-    :where(&)::part(date-picker-input-stack) {
-      place-items: stretch;
-      place-content: stretch;
+      &::part(date-picker-input-stack) {
+        place-items: stretch;
+        place-content: stretch;
 
-      grid-auto-flow: column;
-    }
+        grid-auto-flow: column;
+      }
 
-    :where(&)::part(date-picker-form-input) {
-      text-align: end;
+      &::part(date-picker-form-input) {
+        text-align: end;
+      }
     }
   }
 }

package/scss/components/_h-stack.scss

@@ -3,7 +3,23 @@
 @use 'sass:string';
 @use 'sass:list';
 
-$h-stack-templates: ((auto minmax(0, 1fr)), (minmax(0, 1fr) auto), (auto minmax(0, 1fr) auto auto), (auto minmax(0, 1fr) auto), (repeat(4, minmax(0, 1fr))), (repeat(2, minmax(0, 1fr)) auto));
+$h-stack-templates: (
+  (auto minmax(0, 1fr)),
+  (minmax(0, 1fr) auto),
+  (auto minmax(0, 1fr) auto auto),
+  (auto minmax(0, 1fr) auto),
+  (repeat(1, minmax(0, 1fr))),
+  (repeat(2, minmax(0, 1fr))),
+  (repeat(3, minmax(0, 1fr))),
+  (repeat(4, minmax(0, 1fr))),
+  (repeat(5, minmax(0, 1fr))),
+  (repeat(6, minmax(0, 1fr))),
+  (repeat(7, minmax(0, 1fr))),
+  (repeat(8, minmax(0, 1fr))),
+  (repeat(9, minmax(0, 1fr))),
+  (repeat(10, minmax(0, 1fr))),
+  (repeat(2, minmax(0, 1fr)) auto)
+);
 
 @layer #{vars.$components-layer} {
   h-stack {

package/scss/components/_index.scss

@@ -70,6 +70,10 @@
   :where(table-view)::part(table-footer-leading-stack),
   :where(table-view)::part(table-footer-principal-stack),
   :where(table-view)::part(table-footer-trailing-stack),
+  :where(toggle-view)::part(toggle-stack),
+  :where(toggle-view)::part(toggle-label-stack),
+  :where(toggle-view)::part(toggle-input-stack),
+  :where(toggle-view)::part(text-field-form-input),
   :where(text-field)::part(text-field-stack),
   :where(text-field)::part(text-field-label-stack),
   :where(text-field)::part(text-field-input-stack),