@swiftwc/ui 0.0.0-dev.99 → 1.0.0-canary.1

package/scss/transitions/_progress-view.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   @media (prefers-reduced-motion: no-preference) {
     progress-view {
       :where(&) {

package/scss/transitions/_sheet-view.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   [is='sheet-view'] {
     &:not([open]) {
       z-index: var(--top-layer-polyfill-z-index);

package/scss/transitions/_sidebar-view.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   @media (prefers-reduced-motion: no-preference) {
     [is='sidebar-view'] {
       // Between 2col and 3col AND preferred-compact-column rule ON, apply transitions

package/scss/transitions/_tab-bar.scss

@@ -1,6 +1,6 @@
 @use '../vars';
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   @media (prefers-reduced-motion: no-preference) {
     [is='tab-bar'] {
       > [is='form-view'] {

package/scss/utils/_background.scss

@@ -0,0 +1,52 @@
+@use 'sass:math';
+@use 'sass:string';
+@use '../vars';
+
+@layer #{vars.$framework-layer}.#{vars.$utils-layer} {
+  list-view,
+  [is='form-view'] {
+    :where(&[background='system-background']) {
+      --list--host-background-color: var(--background);
+    }
+
+    :where(&[list-row-background='system-tertiary-grouped-background']) {
+      --list--item-background-color: var(--tertiaryGroupedBackground);
+    }
+
+    :where(&[list-row-background='system-quaternary-grouped-background']) {
+      --list--item-background-color: var(--quaternaryGroupedBackground);
+    }
+  }
+
+  // naviation-stack,
+  // navigation-split-view,
+  // scroll-view {
+  //   :where(&[background='system-grouped-background']) {
+  //     --face: var(--groupedBackground);
+  //   }
+  // }
+
+  [is='sheet-view'],
+  [is='full-screen'],
+  [is='confirmation-dialog'],
+  [is='alert-dialog'] {
+    list-view,
+    [is='form-view'] {
+      :where(&[background='system-background']) {
+        --list--host-background-color: var(--secondaryBackground);
+      }
+
+      :where(&[list-row-background='system-tertiary-grouped-background']) {
+        --list--item-background-color: var(--quaternaryGroupedBackground);
+      }
+
+      :where(&[list-row-background='system-quaternary-grouped-background']) {
+        --list--item-background-color: var(--quaintaryGroupedBackground);
+      }
+    }
+
+    // :where(& scroll-view[background='system-grouped-background']) {
+    //   --face: var(--groupedBackground);
+    // }
+  }
+}

package/scss/utils/_frame.scss

@@ -8,7 +8,7 @@ $self-map: (
   fill: stretch,
 );
 
-@layer #{vars.$utils-layer} {
+@layer #{vars.$framework-layer}.#{vars.$utils-layer} {
   :where([frame\:width='infinity']) {
     inline-size: 100%;
   }
@@ -84,7 +84,7 @@ $self-map: (
   }
 }
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   // readable 2/2
   v-stack {
     :where(&[readable]) {

package/scss/utils/_index.scss

@@ -1,27 +1,52 @@
 @use '../vars';
 @use '../maps';
 
-@layer #{vars.$utils-layer} {
-  [background-style='grouped'] {
+@layer #{vars.$framework-layer}.#{vars.$utils-layer} {
+  // [background-style='grouped'] {
+  //   // @media (pointer: coarse) {
+  //   :where(&) {
+  //     // --face: var(--groupedBackground);
+  //     --background: var(--groupedBackground);
+  //     --secondaryBackground: var(--secondaryGroupedBackground);
+  //     --tertiaryBackground: var(--tertiaryGroupedBackground);
+
+  //     --face: var(--background);
+  //     // --face2: var(--secondaryBackground);
+  //     // --face3: var(--tertiaryBackground);
+  //   }
+
+  //   // FIXME: feat-sheet 2/3
+  //   [is='sheet-view'] &,
+  //   [is='full-screen'] &,
+  //   [is='confirmation-dialog'] &,
+  //   [is='alert-dialog'] & {
+  //     :where(&) {
+  //       // --background: var(--secondaryGroupedBackground);
+  //       // --secondaryBackground: var(--tertiaryGroupedBackground);
+  //       // --tertiaryBackground: var(--quaternaryGroupedBackground);
+  //     }
+  //   }
+  //   // }
+  // }
+  [background-style='initial'] {
     :where(&) {
-      --background: var(--groupedBackground);
-      --secondaryBackground: var(--secondaryGroupedBackground);
-      --tertiaryBackground: var(--tertiaryGroupedBackground);
+      --background: initial;
+      --secondaryBackground: initial;
+      --tertiaryBackground: initial;
 
       --face: var(--background);
       // --face2: var(--secondaryBackground);
       // --face3: var(--tertiaryBackground);
     }
 
-    // FIXME: feat-sheet 2/3
     [is='sheet-view'] &,
     [is='full-screen'] &,
     [is='confirmation-dialog'] &,
     [is='alert-dialog'] & {
       :where(&) {
         // --background: var(--secondaryGroupedBackground);
-        // --secondaryBackground: var(--secondaryGroupedBackground);
-        // --tertiaryBackground: var(--tertiaryGroupedBackground);
+        // --secondaryBackground: var(--tertiaryGroupedBackground);
+        // --tertiaryBackground: var(--quaternaryGroupedBackground);
       }
     }
   }

package/scss/utils/_spacing.scss

@@ -3,7 +3,7 @@
 @use 'sass:list';
 @use '../vars';
 
-@layer #{vars.$utils-layer} {
+@layer #{vars.$framework-layer}.#{vars.$utils-layer} {
   // general utils
   @for $i from 0 through 50 {
     :where([padding-horizontal='#{$i}']) {

package/scss/utils/_stacks.scss

@@ -4,7 +4,7 @@
 @use '../vars';
 @use '../maps';
 
-@layer #{vars.$utils-layer} {
+@layer #{vars.$framework-layer}.#{vars.$utils-layer} {
   // Vertical alignment becomes the common tweak
   h-stack,
   v-flex-stack {
@@ -68,7 +68,9 @@
   }
 
   v-stack,
-  h-stack {
+  h-stack,
+  h-flex-stack,
+  v-flex-stack {
     @for $i from 0 through 50 {
       :where(&[spacing='#{$i}']) {
         gap: #{math.div(math.round(math.div($i, 10) * 10), 10)}rem;
@@ -100,7 +102,7 @@
   }
 }
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$components-layer} {
   // readable 1/2
   v-stack {
     :where(&[readable]) {

package/generated/components/body-view.js

@@ -1,17 +0,0 @@
-import { devFlags } from '../internal/utils';
-/**
- * @summary A container view that wraps a scroll view, marking it as a screen your app can navigate to.
- */
-export class BodyView extends HTMLElement {
-    constructor() {
-        super();
-    }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${BodyView.name} ⚡️ disconnect`);
-    }
-    connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${BodyView.name} ⚡️ connect`);
-    }
-}

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

@@ -1,24 +0,0 @@
-import { type TemplateResult } from '../../../tpl';
-import ancestors from './ancestors';
-import next from './next';
-import nextAll from './next-all';
-import prev from './prev';
-import prevAll from './prev-all';
-import prop from './prop';
-import siblings from './siblings';
-declare const DEFAULT: ">1";
-interface CashFn {
-    (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;
-    next: typeof next;
-    prev: typeof prev;
-    siblings: typeof siblings;
-    ancestors: typeof ancestors;
-}
-declare const cash: CashFn;
-export default cash;
-export { ancestors, next, nextAll, prev, prevAll, prop, siblings };

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

@@ -1,27 +0,0 @@
-import { renderToString } from '../../../morphdom';
-import ancestors from './ancestors';
-import next from './next';
-import nextAll from './next-all';
-import prev from './prev';
-import prevAll from './prev-all';
-import prop from './prop';
-import siblings from './siblings';
-const DEFAULT = '>1';
-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)
-        return template.content.firstElementChild; // OVERKILL
-    return template.content.querySelector('>1' === selector ? ':first-child' : selector);
-});
-cash.prop = prop;
-cash.nextAll = nextAll;
-cash.prevAll = prevAll;
-cash.next = next;
-cash.prev = prev;
-cash.siblings = siblings;
-cash.ancestors = ancestors;
-export default cash;
-export { ancestors, next, nextAll, prev, prevAll, prop, siblings };

package/generated/internal/utils/dev-flags.d.ts

@@ -1,3 +0,0 @@
-export default class {
-    static get debug(): boolean;
-}

package/generated/internal/utils/dev-flags.js

@@ -1,5 +0,0 @@
-export default class {
-    static get debug() {
-        return true;
-    }
-}