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

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/class/css-style-observer.js

@@ -1,6 +1,5 @@
 var _a;
-import { DEBUG } from '../../internal/flags.json' with { type: 'json' };
-import { onoff } from '../../internal/utils';
+import { debug, onoff } from '../../internal/utils';
 export class CSSStyleObserver {
     #cleanups;
     #options;
@@ -17,7 +16,7 @@ export class CSSStyleObserver {
         this.#cleanups?.();
     }
     #handleTransitionrun = (callback, evt) => {
-        DEBUG && console.debug(`${_a.name} ⚡️ ${evt?.type} (${evt.propertyName})`);
+        debug(`${_a.name} ⚡️ ${evt?.type} (${evt.propertyName})`);
         if (!this.#options?.properties.some((prop) => evt.propertyName.startsWith(prop)))
             return;
         callback?.(evt);

package/generated/internal/class/form-associated-base.js

@@ -1,4 +1,4 @@
-import { DEBUG } from '../../internal/flags.json' with { type: 'json' };
+import { debug } from '../../internal/utils';
 import { CleanupRegistry } from './cleanup-registry';
 const internals = new WeakMap();
 // const trackedElements = new WeakMap<FormAssociatedBase, Set<Element>>()
@@ -11,14 +11,14 @@ export function getInternals(instance) {
 }
 // export function makeSlotchangeHandler(t: FormAssociatedBase) {
 //   const handleSlotchange = ({ type, target: slot }: Event) => {
-//       DEBUG && console.debug(`${makeSlotchangeHandler.name} ⚡️ ${type}`)
+//       debug(`${makeSlotchangeHandler.name} ⚡️ ${type}`)
 //       if (!(slot instanceof HTMLSlotElement && slot)) return
 //       const assigned = slot.assignedElements({ flatten: true })
 //       observers.syncObservations(trackedElements.get(t) ?? new Set(), assigned, handleTagMutation, ['value', 'label'])
 //       if (0 < assigned.length) handleTagMutation()
 //     },
 //     handleTagMutation = (entry?: MutationRecord) => {
-//       DEBUG && console.debug(`${handleTagMutation.name} ⚡️ mutation`)
+//       debug(`${handleTagMutation.name} ⚡️ mutation`)
 //       t.setValidity(t.validity, t.validationMessage)
 //     }
 //   return [{ types: 'slotchange', listener: handleSlotchange }]
@@ -33,12 +33,12 @@ export class FormAssociatedBase extends HTMLElement {
         // trackedElements.set(this, new Set<Element>())
     }
     disconnectedCallback() {
-        DEBUG && console.debug(`${FormAssociatedBase.name} ⚡️ disconnect`);
+        debug(`${FormAssociatedBase.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
         // observers.clearObservationsSet(trackedElements.get(this) ?? new Set())
     }
     connectedCallback() {
-        DEBUG && console.debug(`${FormAssociatedBase.name} ⚡️ connect`);
+        debug(`${FormAssociatedBase.name} ⚡️ connect`);
     }
     get type() {
         return this.localName;

package/generated/internal/class/navigation-view.js

@@ -1,8 +1,7 @@
 var _a;
 import { lifecycleObserver } from '../../buses';
-import { DEBUG } from '../../internal/flags.json' with { type: 'json' };
 import { CleanupRegistry } from '../../internal/class/cleanup-registry';
-import { frame, onoff } from '../utils';
+import { debug, frame, onoff } from '../utils';
 export class NavigationView extends HTMLElement {
     static get observedAttributes() {
         return ['hidden'];
@@ -32,7 +31,7 @@ export class NavigationView extends HTMLElement {
                     // consume it (important so it doesn’t leak to next change)
                     this.#recentBefore = undefined;
                 }
-                DEBUG && console.debug(`${_a.name} 💡 ${eventType}`);
+                debug(`${_a.name} 💡 ${eventType}`);
                 frame(this).then(() => target.dispatchEvent(new CustomEvent(eventType, { detail: { tag: this.id }, bubbles: true, composed: true })));
                 break;
         }
@@ -56,7 +55,7 @@ export class NavigationView extends HTMLElement {
         frame(this).then(() => lifecycleObserver.dispatchEvent(new CustomEvent('tabshow', { detail: { tag: this.id }, bubbles: true, composed: true })));
     }
     #handleBeforeTabRevealOrSwap = ({ type, detail }) => {
-        DEBUG && console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (this.id !== detail?.tag)
             return;
         this.#recentBefore = {

package/generated/internal/decorators/adaptive-slot.js

@@ -1,10 +1,9 @@
-import { DEBUG } from '../../internal/flags.json' with { type: 'json' };
 import { Snapshot } from '../../snapshot';
 import { CleanupRegistry } from '../class/cleanup-registry';
-import { onoff } from '../utils';
+import { debug, onoff } from '../utils';
 export default function (filter) {
     const handleMediaChange = (el, { type, matches }) => {
-        DEBUG && console.debug(`${el.localName} ⚡️ ${type}`);
+        debug(`${el.localName} ⚡️ ${type}`);
         if (matches) {
             if (!el.matches(`[slot="cancellation-action"],[slot="primary-action"],[slot="confirmation-action"],[slot="destructive-action"]`))
                 return;
@@ -23,7 +22,7 @@ export default function (filter) {
     return function (Base, _context) {
         const originalConnected = Base.prototype.connectedCallback, originalDisconnected = Base.prototype.disconnectedCallback;
         Base.prototype.connectedCallback = function () {
-            DEBUG && console.debug(`decorator:[${this.localName}] ⚡️ connect`);
+            debug(`decorator:[${this.localName}] ⚡️ connect`);
             originalConnected?.call(this);
             if (filter && !filter(this))
                 return;
@@ -40,7 +39,7 @@ export default function (filter) {
             });
         };
         Base.prototype.disconnectedCallback = function () {
-            DEBUG && console.debug(`decorator:[${this.localName}] ⚡️ disconnect`);
+            debug(`decorator:[${this.localName}] ⚡️ disconnect`);
             originalDisconnected?.call(this);
             CleanupRegistry.unregister(this, 'adaptive-slot');
         };

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/generated/internal/privateNamespace.js

@@ -1,5 +1,5 @@
-import { DEBUG } from '../internal/flags.json' with { type: 'json' };
 import { NavigationPath } from '../internal/class/navigation-path';
+import { debug } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 export function queryInsertPosition(frame) {
     if ('NAVIGATION-SPLIT-VIEW' === frame?.tagName)
@@ -18,7 +18,7 @@ const cleanup = (lm, type) => {
         el.classList.remove(...arr);
 };
 export const startViewTransition = async (target, type = 'forwards', updateCallbackOrOptions = async () => { }) => {
-    DEBUG && console.debug(`startViewTransition (${type})`, target);
+    debug(`startViewTransition (${type})`, target);
     if (!(target instanceof HTMLElement))
         throw new TypeError("Argument 1 ('target') to client.startViewTransition must be an instance of HTMLElement");
     if (!['forwards', 'backwards', 'reload'].includes(type))
@@ -57,9 +57,9 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
         // dialogFrames = [toFrame, ...(Snapshot.leaveFrames ?? [])].filter((item): item is HTMLDialogElement => item instanceof HTMLDialogElement) //[toFrame, ...(Snapshot.leaveFrames ?? [])].filter((item) => item?.matches('dialog'))
         // if ('DIALOG' === newHost?.tagName) {
         //   ;(newHost as HTMLDialogElement).showModal()
-        //   DEBUG && console.debug(`⚡️ view-transition-start (${type})`)
+        //   debug(`⚡️ view-transition-start (${type})`)
         //   await Promise.allSettled(newHost.getAnimations().map(({ finished }) => finished))
-        //   DEBUG && console.debug(`⚡️ view-transition-end (${type})`)
+        //   debug(`⚡️ view-transition-end (${type})`)
         //   return
         // }
         // purge
@@ -82,14 +82,14 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
         if (0 < modalViews.length) {
             for await (const el of modalViews)
                 el.showModal();
-            DEBUG && console.debug(`⚡️ view-dialog-transition-start (${type})`);
+            debug(`⚡️ view-dialog-transition-start (${type})`);
             await Promise.allSettled(modalViews?.[0].getAnimations().map(({ finished }) => finished));
-            DEBUG && console.debug(`⚡️ view-dialog-transition-end (${type})`);
+            debug(`⚡️ view-dialog-transition-end (${type})`);
         }
         else {
-            DEBUG && console.debug(`⚡️ view-transition-start (${type})`);
+            debug(`⚡️ view-transition-start (${type})`);
             await Promise.allSettled([...(from.body?.getAnimations().map(({ finished }) => finished) ?? []), ...(to?.body?.getAnimations().map(({ finished }) => finished) ?? [])]);
-            DEBUG && console.debug(`⚡️ view-transition-end (${type})`);
+            debug(`⚡️ view-transition-end (${type})`);
         }
         if (0 < (to?.component?.querySelectorAll(`.${Snapshot.config?.['vt-fwd-class-name']},.bwd`) ?? []).length)
             return;
@@ -110,9 +110,9 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
         if ('DIALOG' === from.component?.tagName) {
             from.body?.dispatchEvent(new CustomEvent('pageswap', { detail: { page: from.body }, bubbles: true, composed: true }));
             from.component.close();
-            DEBUG && console.debug(`⚡️ view-dialog-transition-start (${type})`);
+            debug(`⚡️ view-dialog-transition-start (${type})`);
             await Promise.allSettled(from.component.getAnimations().map(({ finished }) => finished));
-            DEBUG && console.debug(`⚡️ view-dialog-transition-end (${type})`);
+            debug(`⚡️ view-dialog-transition-end (${type})`);
             if (from.component.matches('[open]'))
                 return;
             await updateCallback();
@@ -147,9 +147,9 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
         for (const el of inbetweenModals)
             el.close(); // close old inbetween modals
         // capture trans
-        DEBUG && console.debug(`⚡️ view-transition-start (${type})`);
+        debug(`⚡️ view-transition-start (${type})`);
         await Promise.allSettled([...(from.body?.getAnimations().map(({ finished }) => finished) ?? []), ...(to.body?.getAnimations().map(({ finished }) => finished) ?? [])]);
-        DEBUG && console.debug(`⚡️ view-transition-end (${type})`);
+        debug(`⚡️ view-transition-end (${type})`);
         if (to.body?.closest(`.bwd,.${Snapshot.config?.['vt-fwd-class-name']}`))
             return;
         cleanup(root);

package/generated/internal/utils/debug.d.ts

@@ -0,0 +1 @@
+export default function (...args: Parameters<typeof self.console.debug>): void;

package/generated/internal/utils/debug.js

@@ -0,0 +1,4 @@
+import flags from '../flags.json' with { type: 'json' };
+export default function (...args) {
+    flags.DEBUG && self.console.debug(...args);
+}

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

@@ -12,10 +12,10 @@ export { default as cssTime } from './css-time';
 export * from './css-time';
 export { default as debounce } from './debounce';
 export * from './debounce';
+export { default as debug } from './debug';
+export * from './debug';
 export { default as defineTranslations } from './define-translations';
 export * from './define-translations';
-export { default as devFlags } from './dev-flags';
-export * from './dev-flags';
 export { default as ensurePlaceholder } from './ensure-placeholder';
 export * from './ensure-placeholder';
 export { default as frame } from './frame';

package/generated/internal/utils/index.js

@@ -12,10 +12,10 @@ export { default as cssTime } from './css-time';
 export * from './css-time';
 export { default as debounce } from './debounce';
 export * from './debounce';
+export { default as debug } from './debug';
+export * from './debug';
 export { default as defineTranslations } from './define-translations';
 export * from './define-translations';
-export { default as devFlags } from './dev-flags';
-export * from './dev-flags';
 export { default as ensurePlaceholder } from './ensure-placeholder';
 export * from './ensure-placeholder';
 export { default as frame } from './frame';

package/generated/internal/utils/is-inside.js

@@ -1,4 +1,4 @@
 export default function (x, y, rect) {
     const { left, right, top, bottom } = rect;
-    return x >= left && x <= right && y >= top && y <= bottom;
+    return left <= x && x <= right && top <= y && y <= bottom;
 }

package/generated/snapshot/index.js

@@ -1,5 +1,4 @@
-import { DEBUG } from '../internal/flags.json' with { type: 'json' };
-import { onoff } from '../internal/utils';
+import { debug, onoff } from '../internal/utils';
 export class Snapshot {
     static #readyCalled = false;
     static #config;
@@ -46,10 +45,10 @@ export class Snapshot {
         const mediaQueryList = self.matchMedia(`(pointer: fine) and (min-width: ${this.#config['ipad-sheet-view-inline-size']}) and (min-height: ${this.#config['ipad-sheet-view-height']})`);
         this.#breakpoints = new Map([['fine_dialog_sheet', mediaQueryList.matches]]);
         this.#listeners.add(onoff('change', (evt) => this.#handleMediaChange(evt, 'fine_dialog_sheet:change'), mediaQueryList).on());
-        DEBUG && console.debug(this.#config);
+        debug(this.#config);
     }
     static #handleMediaChange = ({ type, matches, media }, kind) => {
-        DEBUG && console.debug(`${Snapshot.name} ⚡️ ${type}`);
+        debug(`${Snapshot.name} ⚡️ ${type}`);
         this.#breakpoints?.set('fine_dialog_sheet', matches);
         this.on.dispatchEvent(new MediaQueryListEvent(kind, {
             matches,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.105",
+  "version": "0.0.0-dev.107",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -81,6 +81,7 @@
     "test": "vitest --dom",
     "prepackage": "rm -rf generated && npm run debug:off",
     "package": "npm run build:ts && npm run build:scss ; npm run debug:reset",
+    "postpublish": "git checkout dev",
     "debug:off": "node -e \"const fs=require('node:fs');const f='./js/internal/flags.json';const j=JSON.parse(fs.readFileSync(f));j.DEBUG=false;fs.writeFileSync(f,JSON.stringify(j,null,2)+'\\n')\"",
     "debug:reset": "git checkout -- ./js/internal/flags.json",
     "version:pkg": "npm version $npm_config_bump --no-git-tag-version --preid=dev"

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);
+        }
       }
     }
   }