@swiftwc/ui 0.0.0-dev.85 → 0.0.0-dev.87

package/generated/morphdom/html.d.ts

@@ -0,0 +1,8 @@
+type RawValue = string | number | boolean | null | undefined | RawValue[];
+export declare class TrustedMarkup {
+    readonly value: string;
+    constructor(value: string);
+    toString(): string;
+}
+export default function (strings: TemplateStringsArray, ...values: (RawValue | TrustedMarkup)[]): TrustedMarkup;
+export {};

package/generated/morphdom/html.js

@@ -0,0 +1,37 @@
+const ESCAPE_MAP = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+};
+function escapeHtml(str) {
+    return str.replace(/[&<>"']/g, (ch) => ESCAPE_MAP[ch]);
+}
+// 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;
+    }
+}
+function stringify(value) {
+    if (value === null || value === undefined || value === false)
+        return '';
+    if (value instanceof TrustedMarkup)
+        return value.value;
+    if (Array.isArray(value))
+        return value.map(stringify).join('');
+    return escapeHtml(String(value));
+}
+export default function (strings, ...values) {
+    let out = strings[0];
+    for (let i = 0; i < values.length; i++) {
+        out += stringify(values[i]) + strings[i + 1];
+    }
+    return new TrustedMarkup(out.replace(/>\s+</g, '><').trim());
+}

package/generated/morphdom/index.d.ts

@@ -0,0 +1,6 @@
+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';

package/generated/morphdom/index.js

@@ -0,0 +1,6 @@
+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';

package/generated/morphdom/morph.d.ts

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

package/generated/morphdom/morph.js

@@ -0,0 +1,9 @@
+import morphdom from '../internal/vendor/morphdom';
+export default function (template, fromEl, options) {
+    if (!fromEl)
+        return;
+    morphdom(fromEl, template.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

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

package/generated/morphdom/query-morph.js

@@ -0,0 +1,12 @@
+import { $ } from '../internal/utils';
+import morph from './morph';
+export default function (scopedSelector, template, container, options) {
+    if (false === options?.cb?.())
+        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'));
+    if (!fromEl)
+        return;
+    morph(template, fromEl);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.85",
+  "version": "0.0.0-dev.87",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -58,17 +58,18 @@
   "scripts": {
     "prebuild": "rm -rf generated",
     "build": "npm run build:ts && npm run build:scss && npm run build:manifest && npm run build:barrels",
-    "postbuild": "npm run format:write",
+    "postbuild": "npm run format:write && vitest run --dom",
     "build:ts:watch": "npm run prebuild && tsc --watch",
     "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:tpl && 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:morphdom && 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:morphdom": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/morphdom --exclude \".\\.test\\.ts\"",
     "build:barrels:decorators": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/internal/decorators",
     "format:check": "prettier . --check",
     "format:write": "prettier . --write",
@@ -79,6 +80,7 @@
   },
   "devDependencies": {
     "doctrine": "^3.0.0",
+    "gonzales-pe": "^4.3.0",
     "happy-dom": "^20.7.0",
     "sass": "^1.98.0",
     "ts-morph": "^28.0.0",

package/scss/_maps.scss

@@ -0,0 +1,256 @@
+$picker-styles-names: menu, navigation-link, sheet;
+$label-styles-names: icon-only, title-only, title-and-icon;
+$list-styles-names: inset, inset-grouped, sidebar;
+$form-styles-names: inset, inset-grouped, sidebar;
+$table-styles-names: inset;
+// $labeled-content-styles: vertical, horizontal;
+
+$stack-templates-list-vals: (
+  (minmax(0, 1fr)),
+  (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))),
+  (minmax(0, 1fr) auto),
+  (repeat(1, minmax(0, 1fr)) auto),
+  (repeat(2, minmax(0, 1fr)) auto),
+  (repeat(3, minmax(0, 1fr)) auto),
+  (repeat(4, minmax(0, 1fr)) auto),
+  (repeat(5, minmax(0, 1fr)) auto),
+  (repeat(6, minmax(0, 1fr)) auto),
+  (repeat(7, minmax(0, 1fr)) auto),
+  (repeat(8, minmax(0, 1fr)) auto),
+  (repeat(9, minmax(0, 1fr)) auto),
+  (repeat(10, minmax(0, 1fr)) auto),
+  (auto minmax(0, 1fr)),
+  (repeat(1, auto) minmax(0, 1fr)),
+  (repeat(2, auto) minmax(0, 1fr)),
+  (repeat(3, auto) minmax(0, 1fr)),
+  (repeat(4, auto) minmax(0, 1fr)),
+  (repeat(5, auto) minmax(0, 1fr)),
+  (repeat(6, auto) minmax(0, 1fr)),
+  (repeat(7, auto) minmax(0, 1fr)),
+  (repeat(8, auto) minmax(0, 1fr)),
+  (repeat(9, auto) minmax(0, 1fr)),
+  (repeat(10, auto) minmax(0, 1fr)),
+  (auto auto minmax(0, 1fr)),
+  (auto auto auto minmax(0, 1fr)),
+  (auto auto auto auto minmax(0, 1fr)),
+  (auto minmax(0, 1fr) auto),
+  (repeat(1, auto) minmax(0, 1fr) repeat(1, auto)),
+  (repeat(1, auto) minmax(0, 1fr) repeat(2, auto)),
+  (repeat(1, auto) minmax(0, 1fr) repeat(3, auto)),
+  (repeat(1, auto) minmax(0, 1fr) repeat(4, auto)),
+  (repeat(1, auto) minmax(0, 1fr) repeat(5, auto)),
+  (repeat(2, auto) minmax(0, 1fr) repeat(1, auto)),
+  (repeat(3, auto) minmax(0, 1fr) repeat(1, auto)),
+  (repeat(4, auto) minmax(0, 1fr) repeat(1, auto)),
+  (repeat(5, auto) minmax(0, 1fr) repeat(1, auto)),
+  (repeat(2, auto) minmax(0, 1fr) repeat(2, auto)),
+  (auto minmax(0, 1fr) auto auto)
+);
+
+$inline-map: (
+  leading: (
+    (justify-items (start)),
+    (justify-content (start)),
+  ),
+  'leading fill': (
+    (justify-items (start)),
+    (justify-content (stretch)),
+  ),
+  center: (
+    (justify-items (center)),
+    (justify-content (center)),
+  ),
+  trailing: (
+    (justify-items (end)),
+    (justify-content (end)),
+  ),
+  fill: (
+    (justify-items (stretch)),
+    (justify-content (stretch)),
+  ),
+  space-between: (
+    (justify-content (space-between)),
+  ),
+);
+
+$block-map: (
+  leading: (
+    (align-items (start)),
+    (align-content (start)),
+  ),
+  'leading fill': (
+    (align-items (start)),
+    (align-content (stretch)),
+  ),
+  center: (
+    (align-items (center)),
+    (align-content (center)),
+  ),
+  trailing: (
+    (align-items (end)),
+    (align-content (end)),
+  ),
+  fill: (
+    (align-items (stretch)),
+    (align-content (stretch)),
+  ),
+  space-between: (
+    (align-content (space-between)),
+  ),
+);
+
+$inline-placement-map: (
+  'fill': (
+    (place-items (stretch)),
+    (place-content (stretch)),
+  ),
+  'leading fill': (
+    (place-items (stretch start)),
+    (place-content (stretch start)),
+  ),
+  'fill leading': (
+    (place-items (start stretch)),
+    (place-content (start stretch)),
+  ),
+  'fill space-between': (
+    (align-content (space-between)),
+    (justify-items (stretch)),
+    (justify-content (stretch)),
+  ),
+);
+
+$block-placement-map: (
+  'fill': (
+    (place-items (stretch)),
+    (place-content (stretch)),
+  ),
+  'leading fill': (
+    (place-items (start stretch)),
+    (place-content (start stretch)),
+  ),
+  'fill leading': (
+    (place-items (stretch start)),
+    (place-content (stretch start)),
+  ),
+  'space-between fill': (
+    (align-content (space-between)),
+    (justify-items (stretch)),
+    (justify-content (stretch)),
+  ),
+);
+
+$label-fonts-map: (
+  footnote: (
+    size: 1rem,
+    line: 1rem,
+    weight: 400,
+  ),
+  caption2: (
+    size: 0.75rem,
+    line: calc(1 / 0.75),
+    weight: 400,
+  ),
+  caption: (
+    size: 0.875rem,
+    line: calc(1.25 / 0.875),
+    weight: 400,
+  ),
+  callout: (
+    size: 0.875rem,
+    line: 0.875rem,
+    weight: 400,
+  ),
+  body: (
+    size: 1rem,
+    line: calc(1.5 / 1),
+    weight: 400,
+  ),
+  subheadline: (
+    size: 1.125rem,
+    line: calc(1.75 / 1.125),
+    weight: 400,
+  ),
+  headline: (
+    size: 1.25rem,
+    line: calc(1.75 / 1.25),
+    weight: 500,
+  ),
+  title3: (
+    size: 1.5rem,
+    line: calc(2 / 1.5),
+    weight: 600,
+  ),
+  title2: (
+    size: 1.875rem,
+    line: calc(2.25 / 1.875),
+    weight: 600,
+  ),
+  title: (
+    size: 2.25rem,
+    line: calc(2.5 / 2.25),
+    weight: 600,
+  ),
+  large-title: (
+    size: 3rem,
+    line: 1,
+    weight: 700,
+  ),
+  extra-large-title: (
+    size: 3.75rem,
+    line: 1,
+    weight: 700,
+  ),
+);
+
+// button sizes
+$button-sizes-map: (
+  mini: (
+    default: (
+      padding: 0.2rem,
+      border-radius: 1rem,
+    ),
+    fine: (
+      padding: 0.2rem,
+      border-radius: 0.4rem,
+    ),
+  ),
+  regular: (
+    default: (
+      padding: 0.6rem,
+      border-radius: 1.2rem,
+    ),
+    fine: (
+      padding: 0.6rem,
+      border-radius: 0.8rem,
+    ),
+  ),
+  small: (
+    default: (
+      padding: 0.4rem,
+      border-radius: 1rem,
+    ),
+    fine: (
+      padding: 0.4rem,
+      border-radius: 0.6rem,
+    ),
+  ),
+  large: (
+    default: (
+      padding: 1.2rem,
+      border-radius: 2.4rem,
+    ),
+    fine: (
+      padding: 1.2rem,
+      border-radius: 1.4rem,
+    ),
+  ),
+);

package/scss/_vars.scss

@@ -1,5 +1,5 @@
-@use 'functions';
 @use 'sass:math';
+@use 'functions';
 
 $base-layer: sw-base !default;
 $components-layer: sw-components !default;
@@ -30,120 +30,7 @@ $ipad-landscape-bp: 68rem !default;
 
 $table-expanded-bp: 31rem !default;
 
-// SECTION: Defaults
-$picker-styles: menu, navigation-link, sheet;
-$label-styles: icon-only, title-only, title-and-icon;
-$list-styles: inset, inset-grouped, sidebar;
-$form-styles: inset, inset-grouped, sidebar;
-$table-styles: inset;
-$labeled-content-styles: vertical, horizontal;
-
-$label-fonts: (
-  footnote: (
-    size: 1rem,
-    line: 1rem,
-    weight: 400,
-  ),
-  caption2: (
-    size: 0.75rem,
-    line: calc(1 / 0.75),
-    weight: 400,
-  ),
-  caption: (
-    size: 0.875rem,
-    line: calc(1.25 / 0.875),
-    weight: 400,
-  ),
-  callout: (
-    size: 0.875rem,
-    line: 0.875rem,
-    weight: 400,
-  ),
-  body: (
-    size: 1rem,
-    line: calc(1.5 / 1),
-    weight: 400,
-  ),
-  subheadline: (
-    size: 1.125rem,
-    line: calc(1.75 / 1.125),
-    weight: 400,
-  ),
-  headline: (
-    size: 1.25rem,
-    line: calc(1.75 / 1.25),
-    weight: 500,
-  ),
-  title3: (
-    size: 1.5rem,
-    line: calc(2 / 1.5),
-    weight: 600,
-  ),
-  title2: (
-    size: 1.875rem,
-    line: calc(2.25 / 1.875),
-    weight: 600,
-  ),
-  title: (
-    size: 2.25rem,
-    line: calc(2.5 / 2.25),
-    weight: 600,
-  ),
-  large-title: (
-    size: 3rem,
-    line: 1,
-    weight: 700,
-  ),
-  extra-large-title: (
-    size: 3.75rem,
-    line: 1,
-    weight: 700,
-  ),
-);
-
-// button sizes
-$button-sizes: (
-  mini: (
-    default: (
-      padding: 0.2rem,
-      border-radius: 1rem,
-    ),
-    fine: (
-      padding: 0.2rem,
-      border-radius: 0.4rem,
-    ),
-  ),
-  regular: (
-    default: (
-      padding: 0.6rem,
-      border-radius: 1.2rem,
-    ),
-    fine: (
-      padding: 0.6rem,
-      border-radius: 0.8rem,
-    ),
-  ),
-  small: (
-    default: (
-      padding: 0.4rem,
-      border-radius: 1rem,
-    ),
-    fine: (
-      padding: 0.4rem,
-      border-radius: 0.6rem,
-    ),
-  ),
-  large: (
-    default: (
-      padding: 1.2rem,
-      border-radius: 2.4rem,
-    ),
-    fine: (
-      padding: 1.2rem,
-      border-radius: 1.4rem,
-    ),
-  ),
-);
+// SECTION: SVGs
 
 $disclosure-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"%3E%3C/path%3E%3C/svg%3E'; // ph-caret-right-bold
 $table-col-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M216.49,168.49a12,12,0,0,1-17,0L128,97,56.49,168.49a12,12,0,0,1-17-17l80-80a12,12,0,0,1,17,0l80,80A12,12,0,0,1,216.49,168.49Z"%3E%3C/path%3E%3C/svg%3E'; // ph-caret-up-bold

package/scss/base/_root.scss

@@ -1,7 +1,8 @@
-@use '../vars';
-@use '../mixins';
 @use 'sass:map';
 @use 'sass:string';
+@use '../vars';
+@use '../maps';
+@use '../mixins';
 
 @property --root-font-size {
   syntax: '<number>';
@@ -231,7 +232,7 @@
 
     // label-view
 
-    @each $label, $props in vars.$label-fonts {
+    @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}-font-weight: #{map.get($props, weight)};
@@ -323,7 +324,7 @@
     --table-accessory-size: 1.2rem;
 
     // button sizes 1/2
-    @each $size, $media in vars.$button-sizes {
+    @each $size, $media in maps.$button-sizes-map {
       $props: map.get($media, default);
       @if $props {
         @each $k, $v in $props {
@@ -341,7 +342,7 @@
     // fine
     @media (pointer: fine) {
       // button sizes 2/2
-      @each $size, $media in vars.$button-sizes {
+      @each $size, $media in maps.$button-sizes-map {
         $props: map.get($media, fine);
         @if $props {
           @each $k, $v in $props {

package/scss/colors/_index.scss

@@ -1,9 +1,9 @@
-@use '../vars';
-@use '../mixins';
 @use 'sass:math';
 @use 'sass:map';
 @use 'sass:list';
 @use 'sass:string';
+@use '../vars';
+@use '../mixins';
 
 $color-tokens: (
   // SECTION: grays

package/scss/components/_bordered-button.scss

@@ -1,4 +1,5 @@
 @use '../vars';
+@use '../maps';
 @use '../mixins';
 @use '../placeholders';
 
@@ -17,7 +18,7 @@
       }
     }
 
-    @each $size, $media in vars.$button-sizes {
+    @each $size, $media in maps.$button-sizes-map {
       :where(&[control-size='#{$size}']) {
         --btnpadistart: var(--#{$size}-btn-padding);
         --btnpadiend: var(--#{$size}-btn-padding);

package/scss/components/_bordered-prominent-button.scss

@@ -1,4 +1,5 @@
 @use '../vars';
+@use '../maps';
 @use '../mixins';
 @use '../placeholders';
 
@@ -13,7 +14,7 @@
       --btnpadbend: var(--regular-btn-padding);
     }
 
-    @each $size, $media in vars.$button-sizes {
+    @each $size, $media in maps.$button-sizes-map {
       :where(&[control-size='#{$size}']) {
         --btnpadistart: var(--#{$size}-btn-padding);
         --btnpadiend: var(--#{$size}-btn-padding);

package/scss/components/_disclosure-group.scss

@@ -1,6 +1,6 @@
+@use 'sass:string';
 @use '../vars';
 @use '../mixins';
-@use 'sass:string';
 
 @layer #{vars.$components-layer} {
   [is='disclosure-group'] {

package/scss/components/_form-view.scss

@@ -1,6 +1,7 @@
 @use 'sass:string';
 @use 'sass:map';
 @use '../vars';
+@use '../maps';
 @use '../mixins';
 @use '../placeholders';
 
@@ -132,7 +133,7 @@ $form-elses: (
       // SECTION: ifs polyfill
       @supports not (x: #{string.unquote('if(else:red)')}) {
         :where(&:not([form-style])) {
-          @each $v in vars.$form-styles {
+          @each $v in maps.$form-styles-names {
             @container style(--form-style: #{$v}) {
               --form-style: #{$v}; // NOTE: used ONLY for tinted buttons
 
@@ -140,7 +141,7 @@ $form-elses: (
             }
           }
         }
-        @each $v in vars.$form-styles {
+        @each $v in maps.$form-styles-names {
           :where(&[form-style='#{$v}']) {
             --form-style: #{$v}; // NOTE: used ONLY for tinted buttons
 

package/scss/components/_glass-button.scss

@@ -1,4 +1,5 @@
 @use '../vars';
+@use '../maps';
 @use '../mixins';
 @use '../placeholders';
 
@@ -19,7 +20,7 @@
       --btnpadbend: var(--regular-btn-padding);
     }
 
-    @each $size, $media in vars.$button-sizes {
+    @each $size, $media in maps.$button-sizes-map {
       :where(&[control-size='#{$size}']) {
         --btnpadistart: var(--#{$size}-btn-padding);
         --btnpadiend: var(--#{$size}-btn-padding);

package/scss/components/_glass-prominent-button.scss

@@ -1,4 +1,5 @@
 @use '../vars';
+@use '../maps';
 @use '../mixins';
 @use '../placeholders';
 
@@ -19,7 +20,7 @@
       --btnpadbend: var(--regular-btn-padding);
     }
 
-    @each $size, $media in vars.$button-sizes {
+    @each $size, $media in maps.$button-sizes-map {
       :where(&[control-size='#{$size}']) {
         --btnpadistart: var(--#{$size}-btn-padding);
         --btnpadiend: var(--#{$size}-btn-padding);