@swiftwc/ui 0.0.0-dev.95 → 0.0.0-dev.97

package/generated/events/date-picker.d.ts

@@ -7,4 +7,7 @@ declare global {
     interface HTMLElementEventMap {
         selection: DatePickerSelectionEvent;
     }
+    interface DocumentEventMap {
+        selection: DatePickerSelectionEvent;
+    }
 }

package/generated/events/lifecycle-observer.d.ts

@@ -11,4 +11,8 @@ declare global {
         pageshow: PageShowEvent;
         pagehide: PageHideEvent;
     }
+    interface DocumentEventMap {
+        pageshow: PageShowEvent;
+        pagehide: PageHideEvent;
+    }
 }

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

@@ -20,4 +20,10 @@ declare global {
         'picker:searchblur': PickerSearchblurEvent;
         'picker:searchinput': PickerSearchinputEvent;
     }
+    interface DocumentEventMap {
+        selection: PickerSelectionEvent;
+        'picker:searchfocus': PickerSearchfocusEvent;
+        'picker:searchblur': PickerSearchblurEvent;
+        'picker:searchinput': PickerSearchinputEvent;
+    }
 }

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

@@ -11,4 +11,8 @@ declare global {
         pagereveal: PagerevealEvent;
         pageswap: PageswapEvent;
     }
+    interface DocumentEventMap {
+        pagereveal: PagerevealEvent;
+        pageswap: PageswapEvent;
+    }
 }

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

@@ -41,4 +41,14 @@ declare global {
         'tab-view:toggle': TabViewToggleEvent;
         'tab-view:adaptable-tab-bar-placement-change': TabViewAdaptableTabBarPlacementChangeEvent;
     }
+    interface DocumentEventMap {
+        tabshow: TabshowEvent;
+        tabhide: TabhideEvent;
+        tabreveal: TabrevealEvent;
+        tabswap: TabswapEvent;
+        beforetabreveal: BeforetabrevealEvent;
+        beforetabswap: BeforetabswapEvent;
+        'tab-view:toggle': TabViewToggleEvent;
+        'tab-view:adaptable-tab-bar-placement-change': TabViewAdaptableTabBarPlacementChangeEvent;
+    }
 }

package/generated/events/text-field.d.ts

@@ -7,4 +7,7 @@ declare global {
     interface HTMLElementEventMap {
         commit: TextFieldCommitEvent;
     }
+    interface DocumentEventMap {
+        commit: TextFieldCommitEvent;
+    }
 }

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

@@ -8,4 +8,7 @@ declare global {
     interface HTMLElementEventMap {
         'toggle:change': ToggleChangeEvent;
     }
+    interface DocumentEventMap {
+        'toggle:change': ToggleChangeEvent;
+    }
 }

package/generated/internal/utils/cash/index.d.ts

@@ -1,3 +1,4 @@
+import { type TemplateResult } from '../../../tpl';
 import ancestors from './ancestors';
 import next from './next';
 import nextAll from './next-all';
@@ -7,9 +8,9 @@ import prop from './prop';
 import siblings from './siblings';
 declare const DEFAULT: ">1";
 interface CashFn {
-    (innerHTML: string): DocumentFragment;
-    <T extends Element = Element>(innerHTML: string, selector: typeof DEFAULT): T;
-    <T extends Element = Element>(innerHTML: string, selector: string): T;
+    (markup: TemplateResult): DocumentFragment;
+    <T extends Element = Element>(markup: TemplateResult, selector: typeof DEFAULT): T;
+    <T extends Element = Element>(markup: TemplateResult, selector: string): T;
     prop: typeof prop;
     nextAll: typeof nextAll;
     prevAll: typeof prevAll;

package/generated/internal/utils/cash/index.js

@@ -1,3 +1,4 @@
+import { renderToString } from '../../../morphdom';
 import ancestors from './ancestors';
 import next from './next';
 import nextAll from './next-all';
@@ -6,8 +7,9 @@ import prevAll from './prev-all';
 import prop from './prop';
 import siblings from './siblings';
 const DEFAULT = '>1';
-const cash = ((innerHTML, selector) => {
-    const template = Object.assign(document.createElement('template'), { innerHTML });
+const cash = ((markup, selector) => {
+    // NOTE: Use also runtime check isTemplateResult()??
+    const template = Object.assign(document.createElement('template'), { innerHTML: renderToString(markup).toString() });
     if (!selector)
         return template.content;
     if (selector === DEFAULT)

package/generated/internal/utils/ensure-placeholder.js

@@ -1,5 +1,6 @@
 import { I18n } from '../../i18n';
-import { html, queryMorph } from '../../morphdom';
+import { queryMorph } from '../../morphdom';
+import { html } from '../../tpl';
 export default function (target, role, titleKey, config) {
     if (!target)
         return;

package/generated/morphdom/index.d.ts

@@ -1,6 +1,8 @@
-export { default as html } from './html';
-export * from './html';
 export { default as morph } from './morph';
 export * from './morph';
 export { default as queryMorph } from './query-morph';
 export * from './query-morph';
+export { default as renderToString } from './render-to-string';
+export * from './render-to-string';
+export { default as unsafeHtml } from './unsafe-html';
+export * from './unsafe-html';

package/generated/morphdom/index.js

@@ -1,6 +1,8 @@
-export { default as html } from './html';
-export * from './html';
 export { default as morph } from './morph';
 export * from './morph';
 export { default as queryMorph } from './query-morph';
 export * from './query-morph';
+export { default as renderToString } from './render-to-string';
+export * from './render-to-string';
+export { default as unsafeHtml } from './unsafe-html';
+export * from './unsafe-html';

package/generated/morphdom/morph.d.ts

@@ -1,4 +1,4 @@
-import type { TrustedMarkup } from './html';
-export default function (template: TrustedMarkup, fromEl?: Element, options?: {
+import type { TemplateResult } from '../tpl';
+export default function (markup: TemplateResult, fromEl?: Element, options?: {
     cb: () => void;
 }): void;

package/generated/morphdom/morph.js

@@ -1,8 +1,9 @@
 import morphdom from '../internal/vendor/morphdom';
-export default function (template, fromEl, options) {
+import renderToString from './render-to-string';
+export default function (markup, fromEl, options) {
     if (!fromEl)
         return;
-    morphdom(fromEl, template.toString(), {
+    morphdom(fromEl, renderToString(markup).toString(), {
         onBeforeElUpdated: (fromEl, toEl) => !fromEl.isEqualNode(toEl),
         onBeforeElChildrenUpdated: (fromEl, toEl) => !toEl.matches('image-view,navigation-title'), // NOTE: image-view will alter it's contents! This is required to not empty it up again!
     });

package/generated/morphdom/query-morph.d.ts

@@ -1,5 +1,5 @@
-import type { TrustedMarkup } from './html';
-export default function (scopedSelector: string, template: TrustedMarkup, container?: Element, options?: {
+import type { TemplateResult } from '../tpl';
+export default function (scopedSelector: string, template: TemplateResult, container?: Element, options?: {
     cb?: () => boolean;
     removeIf?: boolean;
 }): void;

package/generated/morphdom/query-morph.js

@@ -5,7 +5,7 @@ export default function (scopedSelector, template, container, options) {
         return;
     if ('boolean' === typeof options?.removeIf && options?.removeIf)
         return container?.querySelector(`:scope>${scopedSelector}`)?.remove();
-    const fromEl = container?.querySelector(`:scope>${scopedSelector}`) ?? container?.appendChild($(template.toString(), '>1'));
+    const fromEl = container?.querySelector(`:scope>${scopedSelector}`) ?? container?.appendChild($(template, '>1'));
     if (!fromEl)
         return;
     morph(template, fromEl);

package/generated/morphdom/render-to-string.d.ts

@@ -0,0 +1,12 @@
+import { type TemplateResult } from '../tpl';
+export declare class TrustedMarkup {
+    readonly value: string;
+    constructor(value: string);
+    toString(): string;
+}
+/**
+ * Flatten a TemplateResult (from `html`) into an escaped TrustedMarkup
+ * string. Use this only at morph/queryMorph call sites — anywhere feeding
+ * `render()` should keep passing the raw TemplateResult straight through.
+ */
+export default function renderToString(template: TemplateResult): TrustedMarkup;

package/generated/morphdom/render-to-string.js

@@ -0,0 +1,48 @@
+import { isTemplateResult } from '../tpl';
+// morph.ts and queryMorph.ts only need something with `.toString()` that
+// yields a safe, escaped HTML string — this is that, built on top of the
+// same TemplateResult instead of a separate tag function.
+// values built via `raw` itself are trusted markup; wrap them so `stringify`
+// knows to skip escaping — same idea as lit-html's `unsafeHTML`
+export class TrustedMarkup {
+    value;
+    constructor(value) {
+        this.value = value;
+    }
+    toString() {
+        return this.value;
+    }
+}
+const ESCAPE_MAP = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+};
+function escapeHtml(str) {
+    return str.replace(/[&<>"']/g, (ch) => ESCAPE_MAP[ch]);
+}
+function stringifyValue(value) {
+    if (value === null || value === undefined || value === false)
+        return '';
+    if (value instanceof TrustedMarkup)
+        return value.value;
+    if (isTemplateResult(value))
+        return renderToString(value).value;
+    if (Array.isArray(value))
+        return value.map(stringifyValue).join('');
+    return escapeHtml(String(value));
+}
+/**
+ * Flatten a TemplateResult (from `html`) into an escaped TrustedMarkup
+ * string. Use this only at morph/queryMorph call sites — anywhere feeding
+ * `render()` should keep passing the raw TemplateResult straight through.
+ */
+export default function renderToString(template) {
+    let out = template.strings[0];
+    for (let i = 0; i < template.values.length; i++) {
+        out += stringifyValue(template.values[i]) + template.strings[i + 1];
+    }
+    return new TrustedMarkup(out.replace(/>\s+</g, '><').trim());
+}

package/generated/morphdom/unsafe-html.d.ts

@@ -0,0 +1,2 @@
+import { TrustedMarkup } from './render-to-string';
+export default function (value: string): TrustedMarkup;

package/generated/morphdom/unsafe-html.js

@@ -0,0 +1,4 @@
+import { TrustedMarkup } from './render-to-string';
+export default function (value) {
+    return new TrustedMarkup(value);
+}

package/generated/tpl/html.js

@@ -1,3 +1,7 @@
+// Purely structural — captures strings/values as-is. render.ts relies on
+// `strings` identity (TemplateStringsArray) for its template cache, so this
+// must stay exactly this shape: no wrapping, no cloning, no new object
+// allocation beyond the literal { strings, values }.
 export default function (strings, ...values) {
     return { strings, values };
 }

package/generated/tpl/index.d.ts

@@ -1,4 +1,6 @@
 export { default as html } from './html';
 export * from './html';
+export { default as isTemplateResult } from './is-template-result';
+export * from './is-template-result';
 export { default as render } from './render';
 export * from './render';

package/generated/tpl/index.js

@@ -1,4 +1,6 @@
 export { default as html } from './html';
 export * from './html';
+export { default as isTemplateResult } from './is-template-result';
+export * from './is-template-result';
 export { default as render } from './render';
 export * from './render';

package/generated/tpl/is-template-result.d.ts

@@ -0,0 +1,3 @@
+import type { TemplateResult } from './html';
+declare const _default: (v: unknown) => v is TemplateResult;
+export default _default;

package/generated/tpl/is-template-result.js

@@ -0,0 +1 @@
+export default (v) => !!v && typeof v === 'object' && 'strings' in v && 'values' in v;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.95",
+  "version": "0.0.0-dev.97",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"

package/scss/_maps.scss

@@ -151,62 +151,67 @@ $block-placement-map: (
 $label-fonts-map: (
   footnote: (
     size: 1rem,
-    line: 1rem,
+    leading: calc(1.1875 / 1),
     weight: 400,
   ),
   caption2: (
     size: 0.75rem,
-    line: calc(1 / 0.75),
+    leading: calc(1.0625 / 0.75),
     weight: 400,
   ),
   caption: (
-    size: 0.875rem,
-    line: calc(1.25 / 0.875),
+    size: 0.8125rem,
+    leading: calc(1.25 / 0.8125),
     weight: 400,
   ),
   callout: (
     size: 0.875rem,
-    line: 0.875rem,
+    leading: calc(1.1875 / 0.875),
     weight: 400,
   ),
   body: (
     size: 1rem,
-    line: calc(1.5 / 1),
+    leading: calc(1.5 / 1),
     weight: 400,
   ),
   subheadline: (
     size: 1.125rem,
-    line: calc(1.75 / 1.125),
+    leading: calc(1.6875 / 1.125),
     weight: 400,
   ),
   headline: (
     size: 1.25rem,
-    line: calc(1.75 / 1.25),
+    leading: calc(1.75 / 1.25),
     weight: 500,
   ),
   title3: (
     size: 1.5rem,
-    line: calc(2 / 1.5),
+    leading: calc(2 / 1.5),
     weight: 600,
   ),
   title2: (
     size: 1.875rem,
-    line: calc(2.25 / 1.875),
+    leading: calc(2.25 / 1.875),
     weight: 600,
   ),
   title: (
     size: 2.25rem,
-    line: calc(2.5 / 2.25),
+    leading: calc(2.5 / 2.25),
     weight: 600,
   ),
   large-title: (
     size: 3rem,
-    line: 1,
+    leading: 1,
     weight: 700,
   ),
   extra-large-title: (
     size: 3.75rem,
-    line: 1,
+    leading: 1,
+    weight: 700,
+  ),
+  extra-large-title2: (
+    size: 4.5rem,
+    leading: 1,
     weight: 700,
   ),
 );
@@ -258,6 +263,7 @@ $button-sizes-map: (
 $tint-names: gray, blue, red, green, orange, purple;
 
 $foreground-tokens: (
+  primary: --primary,
   secondary: --secondary,
   blue: --blue,
   red: --red,

package/scss/base/_root.scss

@@ -234,7 +234,7 @@
 
     @each $label, $props in maps.$label-fonts-map {
       --label-#{$label}-font-size: #{map.get($props, size)};
-      --label-#{$label}-line-height: #{map.get($props, line)};
+      --label-#{$label}-line-height: #{map.get($props, leading)};
       --label-#{$label}-font-weight: #{map.get($props, weight)};
     }
 

package/scss/components/_picker-view.scss

@@ -152,13 +152,19 @@ $picker-ifs: (
       &::part(picker-label-stack) {
         display: var(--picker--labelstack-display, none); // display: none;
 
-        color: var(--secondary);
+        // color: var(--secondary);
 
         --label-truncation-mode: tail;
 
         --label-line-limit: 1;
       }
 
+      form & {
+        :where(&)::part(picker-label-stack) {
+          color: var(--secondary);
+        }
+      }
+
       --picker--stack-grid-template-columns: minmax(30%, 1fr) auto;
 
       --picker--stack-grid-template-rows: minmax(0, 1fr);

package/scss/components/_scroll-view-toolbars.scss

@@ -25,8 +25,14 @@
     }
   }
 
-  scroll-view:has(~ tool-bar > [slot^='top-bar']),
-  scroll-view:has(> [slot^='top-bar']) {
+  scroll-view:has(
+    ~ tool-bar > [slot^='top-bar'],
+    ~ tool-bar > [slot='cancellation-action'],
+    ~ tool-bar > [slot='primary-action'],
+    ~ tool-bar > [slot='confirmation-action'],
+    ~ tool-bar > [slot='destructive-action']
+  ),
+  scroll-view:has(> [slot^='top-bar'], > [slot='cancellation-action'], > [slot='primary-action'], > [slot='confirmation-action'], > [slot='destructive-action']) {
     :where(&)::part(scroll-view-navbar) {
       visibility: visible;
     }

package/scss/components/_toggle-view.scss

@@ -20,7 +20,8 @@
       }
 
       // &::part(toggle-label-stack) {
-      // color: var(--secondary);
+      //   // color: var(--secondary);
+      //   padding-inline-start: var(--toggle-padding-inline-start,);
       // }
 
       &::part(toggle-input-stack) {

package/scss/mixins/_index.scss

@@ -80,8 +80,14 @@
     grid-area: main;
   }
 
-  &:has(~ tool-bar > [slot^='top-bar']),
-  &:has(> [slot^='top-bar']) {
+  &:has(
+    ~ tool-bar > [slot^='top-bar'],
+    ~ tool-bar > [slot='cancellation-action'],
+    ~ tool-bar > [slot='primary-action'],
+    ~ tool-bar > [slot='confirmation-action'],
+    ~ tool-bar > [slot='destructive-action']
+  ),
+  &:has(> [slot^='top-bar'], > [slot='cancellation-action'], > [slot='primary-action'], > [slot='confirmation-action'], > [slot='destructive-action']) {
     grid-template-rows: var(--navigation-bar-block-size) minmax(max-content, 1fr);
   }
 }

package/scss/placeholders/_lists.scss

@@ -364,7 +364,7 @@ $list-item-selector: ':not([slot], section-view, [is="disclosure-group"], picker
         }
 
         &::part(section-header-stack) {
-          top: calc(var(--list--sticky-block-size, 0px) + var(--navigation-bar-block-size));
+          top: var(--list--sticky-block-size, 0px); // + var(--navigation-bar-block-size));
 
           position: sticky;
 
@@ -373,6 +373,32 @@ $list-item-selector: ':not([slot], section-view, [is="disclosure-group"], picker
           // text-shadow: 0 0 5px var(--face);
         }
       }
+
+      // &:is([list-style*='inset'] section-view, [form-style*='inset'] section-view) {
+      //   :where(&) {
+      //     &::part(section-header-stack) {
+      //       top: calc(var(--list--sticky-block-size, 0px) + 1rem);
+      //     }
+      //   }
+      // }
+
+      &:is(
+        scroll-view:has(
+            ~ tool-bar > [slot^='top-bar'],
+            ~ tool-bar > [slot='cancellation-action'],
+            ~ tool-bar > [slot='primary-action'],
+            ~ tool-bar > [slot='confirmation-action'],
+            ~ tool-bar > [slot='destructive-action']
+          )
+          section-view,
+        scroll-view:has(> [slot^='top-bar'], > [slot='cancellation-action'], > [slot='primary-action'], > [slot='confirmation-action'], > [slot='destructive-action']) section-view
+      ) {
+        :where(&) {
+          &::part(section-header-stack) {
+            top: calc(var(--list--sticky-block-size, 0px) + var(--navigation-bar-block-size));
+          }
+        }
+      }
     }
 
     // SECTION: Enable 2-col layout