@swiftwc/ui 0.0.0-dev.98 → 1.0.0-canary.0

package/scss/placeholders/_lists.scss

@@ -3,7 +3,7 @@
 
 $list-item-selector: ':not([slot], section-view, [is="disclosure-group"], picker-view, menu-view, menu-view *, whatever-name)';
 
-@layer #{vars.$list-components-layer} {
+@layer #{vars.$framework-layer}.#{vars.$list-components-layer} {
   %list {
     :where(&) {
       background-color: var(--list--host-background-color,);
@@ -560,7 +560,7 @@ $list-item-selector: ':not([slot], section-view, [is="disclosure-group"], picker
   }
 }
 
-@layer #{vars.$colors-layer} {
+@layer #{vars.$framework-layer}.#{vars.$colors-layer} {
   // componentize
   %list {
     > #{$list-item-selector},
@@ -582,7 +582,7 @@ $list-item-selector: ':not([slot], section-view, [is="disclosure-group"], picker
   }
 }
 
-@layer #{vars.$ui-layer} {
+@layer #{vars.$framework-layer}.#{vars.$ui-layer} {
   // componentize
   %list {
     > #{$list-item-selector},

package/scss/transitions/_alert-dialog.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='alert-dialog'] {
       :where(&) {

package/scss/transitions/_bwd.navbar.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   tool-bar-item,
   tool-bar-item-group {
     &.bwn {

package/scss/transitions/_bwd.scss

@@ -1,6 +1,6 @@
 @use '../vars';
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   scroll-view {
     &.bwd {
       --scroll-view-translate: translateX(var(--view-transition-trailing-x));
@@ -13,7 +13,7 @@
 
       // Inert nested landmarks of destination so that destination can be interacted with
       // Make sure old/outgoing elements can NOT be interacted with (new elements are stacked lower)
-      ~ body-view,
+      ~ content-view,
       ~ navigation-stack,
       ~ navigation-split-view {
         pointer-events: none;
@@ -32,7 +32,7 @@
   // navigation-split-view > .bwdd {
   //   z-index: 0;
   // }
-  navigation-split-view > body-view:has(~ .bwdd) {
+  navigation-split-view > content-view:has(~ .bwdd) {
     pointer-events: none;
     // z-index: 1;
   }

package/scss/transitions/_confirmation-dialog.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='confirmation-dialog'] {
       :where(&) {

package/scss/transitions/_disclosure-group.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='disclosure-group'] {
       :where(&)::details-content {

package/scss/transitions/_fine-tooltip.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) {
     fine-tooltip {
       :where(&) {

package/scss/transitions/_fwd.navbar.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   // principal-stack > tool-bar-item {
   //   position: absolute;
   //   transition: transform 2s ease-out;

package/scss/transitions/_fwd.scss

@@ -1,6 +1,6 @@
 @use '../vars';
 
-@layer #{vars.$transitions-layer} {
+@layer #{vars.$framework-layer}.#{vars.$transitions-layer} {
   scroll-view {
     // Make sure old/outgoing elements can NOT be interacted with (new elements are already stacked higher)
     &.#{vars.$vt-fwd-class-name} {

package/scss/transitions/_glass-button.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='glass-button'] {
       :where(&) {

package/scss/transitions/_glass-prominent-button.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='glass-prominent-button'] {
       :where(&) {

package/scss/transitions/_index.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) {
     // ::view-transition-old(root),
     // ::view-transition-new(root) {

package/scss/transitions/_menu-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) {
     menu-view {
       :where(&) {

package/scss/transitions/_navigation-split-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) {
     navigation-split-view {
       @include mixins.if-2col-split-view-fits {

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/buses/alert-dialog.d.ts

@@ -1,2 +0,0 @@
-declare const _default: EventTarget;
-export default _default;

package/generated/buses/alert-dialog.js

@@ -1 +0,0 @@
-export default new EventTarget();

package/generated/buses/confirmation-dialog.d.ts

@@ -1,2 +0,0 @@
-declare const _default: EventTarget;
-export default _default;

package/generated/buses/confirmation-dialog.js

@@ -1 +0,0 @@
-export default new EventTarget();

package/generated/buses/index.d.ts

@@ -1,6 +0,0 @@
-export { default as alertDialog } from './alert-dialog';
-export * from './alert-dialog';
-export { default as confirmationDialog } from './confirmation-dialog';
-export * from './confirmation-dialog';
-export { default as lifecycleObserver } from './lifecycle-observer';
-export * from './lifecycle-observer';

package/generated/buses/index.js

@@ -1,6 +0,0 @@
-export { default as alertDialog } from './alert-dialog';
-export * from './alert-dialog';
-export { default as confirmationDialog } from './confirmation-dialog';
-export * from './confirmation-dialog';
-export { default as lifecycleObserver } from './lifecycle-observer';
-export * from './lifecycle-observer';

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

@@ -1,2 +0,0 @@
-declare const _default: EventTarget;
-export default _default;

package/generated/buses/lifecycle-observer.js

@@ -1 +0,0 @@
-export default new EventTarget();

package/generated/client/index.d.ts

@@ -1,30 +0,0 @@
-import { lifecycleObserver } from '../buses';
-import { I18n } from '../i18n';
-import { NavigationPath } from '../internal/class/navigation-path';
-import { type NavigationHost, queryInsertPosition, startViewTransition } from '../internal/privateNamespace';
-import { type WebComponentCtor } from '../namespace-browser';
-import { Snapshot } from '../snapshot';
-export declare const polyfills: Map<string, WebComponentCtor>;
-/**
- * Presents an alert with a message using the given data to produce the alert’s content and a string variable as a title.
- */
-export declare const alert: (title?: string, message?: string, actions?: {
-    label?: string;
-    image?: string;
-    role?: string;
-}[], options?: {
-    titleVisibility?: boolean;
-    signal?: AbortSignal;
-}) => Promise<string | undefined> & {
-    dismiss: (reason?: unknown) => void;
-};
-export declare const confirmationDialog: (trigger: HTMLElement, title: string, message?: string, actions?: {
-    label?: string;
-    image?: string;
-    role?: string;
-}[], options?: {
-    controller?: AbortController;
-    titleVisibility?: boolean;
-}) => Promise<string>;
-export { I18n, lifecycleObserver, NavigationPath, queryInsertPosition, Snapshot, startViewTransition };
-export { type NavigationHost };