@swiftwc/ui 0.0.0-dev.106 → 0.0.0-dev.107

package/generated/components/list-view.d.ts

@@ -2,6 +2,7 @@
  * @summary A container view that arranges rows of data in a single column, optionally letting the user select one or more of them.
  *
  * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside
+ * @attr {sidebar} preferred-root-disclosure-style
  *
  * @cssprop {length} --list-row-gap — The gap between rows
  * @cssprop {length} --list--media-inner-padding-inline-start — The inline paddint start for each row

package/generated/components/list-view.js

@@ -4,6 +4,7 @@ import { debug, listActive, onoff } from '../internal/utils';
  * @summary A container view that arranges rows of data in a single column, optionally letting the user select one or more of them.
  *
  * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside
+ * @attr {sidebar} preferred-root-disclosure-style
  *
  * @cssprop {length} --list-row-gap — The gap between rows
  * @cssprop {length} --list--media-inner-padding-inline-start — The inline paddint start for each row

package/generated/components/navigation-large-title.d.ts

@@ -1,6 +1,5 @@
 /**
  *
- * @attr {grouped} background-style
  * @attr {boolean} padding
  * @attr {boolean} navigation-bar-auto-hide
  *

package/generated/components/navigation-large-title.js

@@ -69,7 +69,6 @@ function isIntersectingWithContainer(el, container, rootMargin = '0px 0px 0px 0p
 }
 /**
  *
- * @attr {grouped} background-style
  * @attr {boolean} padding
  * @attr {boolean} navigation-bar-auto-hide
  *

package/generated/components/toggle-view.js

@@ -105,7 +105,10 @@ export class ToggleView extends FormAssociatedBase {
             { types: 'pointermove', listener: this.#handleTrackPointermove },
             { types: 'lostpointercapture', listener: this.#handleTrackPointercancel },
         ], this.#track).on());
-        CleanupRegistry.register(this, onoff([{ types: 'blur', listener: this.#handleWindowBlur }], self).on());
+        CleanupRegistry.register(this, onoff([
+            { types: 'blur', listener: this.#handleWindowBlur },
+            { types: 'focus', listener: this.#handleWindowFocus },
+        ], self).on());
     }
     attributeChangedCallback(name, oldValue, newValue) {
         debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
@@ -226,11 +229,15 @@ export class ToggleView extends FormAssociatedBase {
         this.#settle();
     };
     #handleWindowBlur = () => {
+        this.toggleAttribute('js-window-inactive', true);
         if (!this.#isDragging)
             return;
         this.#track?.style.removeProperty('--toggle--dot-transition-duration');
         this.#settle();
     };
+    #handleWindowFocus = async () => {
+        this.toggleAttribute('js-window-inactive', false);
+    };
     #updateFromEvent = (clientX) => {
         if (!this.#track)
             return;

package/generated/css/index.css

@@ -302,8 +302,12 @@
       --insetform-item-border-radius: 1rem;
       --list-item-padding-inline-start: 1rem;
       --list-item-padding-inline-end: 1rem;
+      --insetgroupedlist-background-color: var(--background);
+      --insetgroupedlist-item-background-color: var(--quaternaryGroupedBackground);
       --form-item-padding-inline-start: 1rem;
       --form-item-padding-inline-end: 1rem;
+      --insetgroupedform-background-color: var(--background);
+      --insetgroupedform-item-background-color: var(--quaternaryGroupedBackground);
       --toggle-inline-size: 3.4rem;
       --toggle-block-size: 1.3rem;
       --control-clear-glass-bg: var(--white);
@@ -3621,6 +3625,12 @@
     --toggle--dot-inset-inline-start: calc(100% - var(--toggle--dot-size));
     --toggle--dot-inset-inline-end: 0;
   }
+  :where(toggle-view[aria-checked=true]):window-inactive {
+    --toggle--track-bg: var(--toggle--track-off-bg);
+  }
+  :where(toggle-view[aria-checked=true][js-window-inactive]) {
+    --toggle--track-bg: var(--toggle--track-off-bg);
+  }
   :where(toggle-view > :nth-child(n+2 of [slot=label])) {
     --label-font: callout;
   }
@@ -3698,16 +3708,13 @@
   navigation-large-title :nth-child(1 of label-view)) {
     --label-image-size: 5;
   }
+  :where(navigation-large-title :nth-child(1 of image-view)) {
+    color: var(--accentColor);
+  }
   :where(scroll-view[navigation-bar-title-display-mode=inline]:has(navigation-large-title) navigation-large-title[navigation-bar-auto-hide]) {
     opacity: 0;
     visibility: collapse;
   }
-  :where(navigation-large-title[background-style=grouped]) {
-    background-color: var(--secondaryGroupedBackground);
-    border-radius: var(--insetlist-item-border-radius);
-    padding-inline: var(--list-item-padding-inline-start) var(--list-item-padding-inline-end);
-    padding-block: 1rem;
-  }
 }
 @layer sw-components {}
 @layer sw-components {
@@ -6094,11 +6101,13 @@
   }
 }
 @layer sw-utils {
-  :where([background-style=grouped]) {
-    --background: var(--groupedBackground);
-    --secondaryBackground: var(--secondaryGroupedBackground);
-    --tertiaryBackground: var(--tertiaryGroupedBackground);
-    --face: var(--background);
+  @media (pointer: coarse) {
+    :where([background-style=grouped]) {
+      --background: var(--groupedBackground);
+      --secondaryBackground: var(--secondaryGroupedBackground);
+      --tertiaryBackground: var(--tertiaryGroupedBackground);
+      --face: var(--background);
+    }
   }
   :where([foreground=primary]) {
     color: var(--primary);
@@ -9177,6 +9186,50 @@
   }
 }
 @layer sw-utils {}
+@layer sw-utils {
+  :where(list-view[background=system-background],
+  [is=form-view][background=system-background]) {
+    --list--host-background-color: var(--background);
+  }
+  :where(list-view[list-row-background=system-tertiary-grouped-background],
+  [is=form-view][list-row-background=system-tertiary-grouped-background]) {
+    --list--item-background-color: var(--tertiaryGroupedBackground);
+  }
+  :where(list-view[list-row-background=system-quaternary-grouped-background],
+  [is=form-view][list-row-background=system-quaternary-grouped-background]) {
+    --list--item-background-color: var(--quaternaryGroupedBackground);
+  }
+  :where([is=sheet-view] list-view[background=system-background],
+  [is=sheet-view] [is=form-view][background=system-background],
+  [is=full-screen] list-view[background=system-background],
+  [is=full-screen] [is=form-view][background=system-background],
+  [is=confirmation-dialog] list-view[background=system-background],
+  [is=confirmation-dialog] [is=form-view][background=system-background],
+  [is=alert-dialog] list-view[background=system-background],
+  [is=alert-dialog] [is=form-view][background=system-background]) {
+    --list--host-background-color: var(--secondaryBackground);
+  }
+  :where([is=sheet-view] list-view[list-row-background=system-tertiary-grouped-background],
+  [is=sheet-view] [is=form-view][list-row-background=system-tertiary-grouped-background],
+  [is=full-screen] list-view[list-row-background=system-tertiary-grouped-background],
+  [is=full-screen] [is=form-view][list-row-background=system-tertiary-grouped-background],
+  [is=confirmation-dialog] list-view[list-row-background=system-tertiary-grouped-background],
+  [is=confirmation-dialog] [is=form-view][list-row-background=system-tertiary-grouped-background],
+  [is=alert-dialog] list-view[list-row-background=system-tertiary-grouped-background],
+  [is=alert-dialog] [is=form-view][list-row-background=system-tertiary-grouped-background]) {
+    --list--item-background-color: var(--quaternaryGroupedBackground);
+  }
+  :where([is=sheet-view] list-view[list-row-background=system-quaternary-grouped-background],
+  [is=sheet-view] [is=form-view][list-row-background=system-quaternary-grouped-background],
+  [is=full-screen] list-view[list-row-background=system-quaternary-grouped-background],
+  [is=full-screen] [is=form-view][list-row-background=system-quaternary-grouped-background],
+  [is=confirmation-dialog] list-view[list-row-background=system-quaternary-grouped-background],
+  [is=confirmation-dialog] [is=form-view][list-row-background=system-quaternary-grouped-background],
+  [is=alert-dialog] list-view[list-row-background=system-quaternary-grouped-background],
+  [is=alert-dialog] [is=form-view][list-row-background=system-quaternary-grouped-background]) {
+    --list--item-background-color: var(--quaintaryGroupedBackground);
+  }
+}
 @layer sw-transitions {
   @media (prefers-reduced-motion: no-preference) {
     scroll-view.fwd, scroll-view.fwdd, scroll-view.bwd, scroll-view.bwdd {
@@ -10181,6 +10234,18 @@
     inherits: true;
   }
 }
+@property --quaternaryGroupedBackground {
+  syntax: "<color>";
+  initial-value: oklch(97.61% 0 0deg);
+  inherits: true;
+}
+@media (prefers-color-scheme: dark) {
+  @property --quaternaryGroupedBackground {
+    syntax: "<color>";
+    initial-value: oklch(27.51% 0.0039 128.62deg);
+    inherits: true;
+  }
+}
 @property --separator {
   syntax: "<color>";
   initial-value: oklch(94.31% 0 0deg);

package/generated/internal/privateNamespace.d.ts

@@ -4,7 +4,7 @@ type TransitionType = 'forwards' | 'backwards' | 'reload';
 export type NavigationHost = Components.BodyView | Components.SheetView | Components.NavigationStack | Components.NavigationSplitView;
 export type NavigationToolbarConfiguration = Components.ToolBarItem | Components.ToolBarItemGroup;
 export type NavigationPage = Components.SidebarView | Components.ScrollView;
-export declare function queryInsertPosition(frame: NavigationHost): "afterend" | "beforebegin";
+export declare function queryInsertPosition(frame?: NavigationHost): "afterend" | "beforebegin";
 type UpdateCallback = () => void | Promise<void>;
 type NavigateOptions = {
     updateCallback?: UpdateCallback;

package/package.json

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

package/scss/_utils.scss

@@ -7,3 +7,5 @@
 @forward 'utils/spacing';
 
 @forward 'utils/scroll-view';
+
+@forward 'utils/background';

package/scss/base/_root.scss

@@ -274,18 +274,18 @@
       --#{$v}-item-padding-block-start: 1rem;
 
       // FIXME: feat-sheet 3/3
-      --#{$v}-item-background-color: var(--background); //light-dark(var(--system-bg), var(--primary-bg-dark)); // ✅
+      --#{$v}-item-background-color: var(--background);
       --#{$v}-item-color: var(--primary);
       --#{$v}-highlighteditem-background-color: var(--accentColor3);
       --#{$v}-highlighteditem-color: ;
 
       // FIXME: feat-sheet 3/3
-      --inset#{$v}-item-background-color: var(--background); //light-dark(var(--system-bg), var(--primary-bg-dark)); // ✅
+      --inset#{$v}-item-background-color: var(--background);
       --inset#{$v}-item-color: var(--primary);
       --inset#{$v}-highlighteditem-background-color: var(--accentColor3); //var(--accentColor);
       --inset#{$v}-highlighteditem-color: ; //var(--tintcontrast);
 
-      --insetgrouped#{$v}-item-background-color: var(--secondaryGroupedBackground); //light-dark(var(--system-bg), oklch(0.2186 0.0039 286.08)); // ✅
+      --insetgrouped#{$v}-item-background-color: var(--secondaryGroupedBackground);
       --insetgrouped#{$v}-item-color: var(--primary);
       --insetgrouped#{$v}-highlighteditem-background-color: var(--accentColor3); //var(--accentColor);
       --insetgrouped#{$v}-highlighteditem-color: ; //var(--tintcontrast);
@@ -376,6 +376,9 @@
       @each $v in list, form {
         --#{$v}-item-padding-inline-start: 1rem;
         --#{$v}-item-padding-inline-end: 1rem;
+
+        --insetgrouped#{$v}-background-color: var(--background);
+        --insetgrouped#{$v}-item-background-color: var(--quaternaryGroupedBackground);
       }
 
       --toggle-inline-size: 3.4rem;

package/scss/colors/_index.scss

@@ -526,6 +526,17 @@ $color-tokens: (
       ),
     ),
   ),
+  quaternaryGroupedBackground: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.9761 0 0),
+        dark: oklch(0.2751 0.0039 128.62),
+      ),
+    ),
+  ),
   // SECTION: semantic colors
   separator: (
       props: (

package/scss/components/_navigation-large-title.scss

@@ -23,6 +23,12 @@
       }
     }
 
+    :nth-child(1 of image-view) {
+      :where(&) {
+        color: var(--accentColor);
+      }
+    }
+
     scroll-view[navigation-bar-title-display-mode='inline']:has(&) &[navigation-bar-auto-hide] {
       :where(&) {
         opacity: 0;
@@ -31,14 +37,14 @@
       }
     }
 
-    &[background-style='grouped'] {
-      :where(&) {
-        background-color: var(--secondaryGroupedBackground);
-        border-radius: var(--insetlist-item-border-radius);
+    // &[background-style='grouped'] {
+    //   :where(&) {
+    //     background-color: var(--secondaryGroupedBackground);
+    //     border-radius: var(--insetlist-item-border-radius);
 
-        padding-inline: var(--list-item-padding-inline-start) var(--list-item-padding-inline-end);
-        padding-block: 1rem;
-      }
-    }
+    //     padding-inline: var(--list-item-padding-inline-start) var(--list-item-padding-inline-end);
+    //     padding-block: 1rem;
+    //   }
+    // }
   }
 }

package/scss/components/_scroll-view.scss

@@ -116,6 +116,18 @@
           }
         }
       }
+
+      // &:has(list-view[list-style='inset-grouped']:not([background]), [is='form-view'][form-style='inset-grouped']:not([background])) {
+      //   :where(&) {
+      //     outline: red solid 4px;
+
+      //     // --background: var(--groupedBackground);
+      //     // --secondaryBackground: var(--secondaryGroupedBackground);
+      //     // --tertiaryBackground: var(--tertiaryGroupedBackground);
+
+      //     // --face: var(--background);
+      //   }
+      // }
     }
   }
 

package/scss/components/_toggle-view.scss

@@ -133,6 +133,16 @@
 
         --toggle--dot-inset-inline-start: calc(100% - var(--toggle--dot-size));
         --toggle--dot-inset-inline-end: 0;
+
+        &:window-inactive {
+          --toggle--track-bg: var(--toggle--track-off-bg);
+        }
+      }
+
+      &[js-window-inactive] {
+        :where(&) {
+          --toggle--track-bg: var(--toggle--track-off-bg);
+        }
       }
     }
 

package/scss/utils/_background.scss

@@ -0,0 +1,52 @@
+@use 'sass:math';
+@use 'sass:string';
+@use '../vars';
+
+@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/_index.scss

@@ -3,25 +3,28 @@
 
 @layer #{vars.$utils-layer} {
   [background-style='grouped'] {
-    :where(&) {
-      --background: var(--groupedBackground);
-      --secondaryBackground: var(--secondaryGroupedBackground);
-      --tertiaryBackground: var(--tertiaryGroupedBackground);
+    @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);
-    }
+        --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);
+      // 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);
+        }
       }
     }
   }

package/web-components.html-data/en.json

@@ -451,9 +451,18 @@
               "name": "hidden"
             }
           ]
+        },
+        {
+          "name": "preferred-root-disclosure-style",
+          "description": "Value Type: “sidebar”",
+          "values": [
+            {
+              "name": "sidebar"
+            }
+          ]
         }
       ],
-      "description": "A container view that arranges rows of data in a single column, optionally letting the user select one or more of them.\n---\n\n```ts\ninterface ListViewSignature {\n  Attributes: {\n    'navigation-link-indicator-visibility'?: 'hidden' // Hides accessories like right-arrow-chevron on NavigationLink buttons inside\n  }\n\n  CSSProperties: {\n    '--list-row-gap'?: length // The gap between rows\n    '--list--media-inner-padding-inline-start'?: length // The inline paddint start for each row\n  }\n}\n\nclass ListView extends HTMLElement<ListViewSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'list-view': ListView // <list-view></list-view>\n  }\n}\n\n```\n"
+      "description": "A container view that arranges rows of data in a single column, optionally letting the user select one or more of them.\n---\n\n```ts\ninterface ListViewSignature {\n  Attributes: {\n    'navigation-link-indicator-visibility'?: 'hidden' // Hides accessories like right-arrow-chevron on NavigationLink buttons inside\n    'preferred-root-disclosure-style'?: 'sidebar'\n  }\n\n  CSSProperties: {\n    '--list-row-gap'?: length // The gap between rows\n    '--list--media-inner-padding-inline-start'?: length // The inline paddint start for each row\n  }\n}\n\nclass ListView extends HTMLElement<ListViewSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'list-view': ListView // <list-view></list-view>\n  }\n}\n\n```\n"
     },
     {
       "name": "menu-view",
@@ -485,15 +494,6 @@
         }
       ],
       "attributes": [
-        {
-          "name": "background-style",
-          "description": "Value Type: “grouped”",
-          "values": [
-            {
-              "name": "grouped"
-            }
-          ]
-        },
         {
           "name": "padding",
           "description": "Value Type: boolean"
@@ -503,7 +503,7 @@
           "description": "Value Type: boolean"
         }
       ],
-      "description": "undefined\n\n```ts\ninterface NavigationLargeTitleSignature {\n  Attributes: {\n    'background-style'?: 'grouped'\n    padding?: boolean\n    'navigation-bar-auto-hide'?: boolean\n  }\n}\n\nclass NavigationLargeTitle extends HTMLElement<NavigationLargeTitleSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'navigation-large-title': NavigationLargeTitle // <navigation-large-title></navigation-large-title>\n  }\n}\n\n```\n"
+      "description": "undefined\n\n```ts\ninterface NavigationLargeTitleSignature {\n  Attributes: {\n    padding?: boolean\n    'navigation-bar-auto-hide'?: boolean\n  }\n}\n\nclass NavigationLargeTitle extends HTMLElement<NavigationLargeTitleSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'navigation-large-title': NavigationLargeTitle // <navigation-large-title></navigation-large-title>\n  }\n}\n\n```\n"
     },
     {
       "name": "navigation-split-view",