@swiftwc/ui 0.0.0-dev.111 → 0.0.0-dev.112

package/generated/components/tab-view.js

@@ -39,6 +39,7 @@ export class TabView extends HTMLElement {
     }
     get moreTab() {
         return this.querySelector(':scope>navigation-stack:has(> navigation-stack,> navigation-split-view)');
+        // return this.querySelector<NavigationStack>(':scope>navigation-stack:has(> navigation-stack)') ?? this.querySelector<NavigationStack>(':scope>navigation-stack:has(> navigation-split-view)')
     }
     connectedCallback() {
         debug(`${_a.name} ⚡️ connect`);
@@ -95,9 +96,9 @@ export class TabView extends HTMLElement {
             }));
         }
     };
-    #handleAdaptableTabBarPlacementChange = (evt) => {
-        debug(`${_a.name} ⚡️ ${evt?.type}`);
-        if ('bottom-bar' !== evt.detail.oldValue)
+    #handleAdaptableTabBarPlacementChange = ({ type, detail }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if ('bottom-bar' !== detail.oldValue)
             return; // button triggers should happen, ONLY when going FROM bottom-bar TO anything else
         const innerSelection = this.moreTab?.querySelector(':scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])')?.id;
         if (innerSelection) {
@@ -151,12 +152,12 @@ export class TabView extends HTMLElement {
                 ns.hidden = false; // triggers
             }
     }
-    #addAnimations = (evt) => {
+    #addAnimations = ({ detail }) => {
         this.setAttribute('js-aftertabreveal', '');
         // const ms = cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`)
         this.#afterTabRevealDelay.next(() => {
             this.removeAttribute('js-aftertabreveal');
-        }, evt.detail.ms);
+        }, detail.ms);
     };
     #handleSelectionChange = (evt) => {
         this.#triggerToggleEvent(evt);

package/generated/css/index.css

@@ -302,12 +302,8 @@
       --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);
@@ -6101,13 +6097,11 @@
   }
 }
 @layer sw-utils {
-  @media (pointer: coarse) {
-    :where([background-style=grouped]) {
-      --background: var(--groupedBackground);
-      --secondaryBackground: var(--secondaryGroupedBackground);
-      --tertiaryBackground: var(--tertiaryGroupedBackground);
-      --face: var(--background);
-    }
+  :where([background-style=initial]) {
+    --background: initial;
+    --secondaryBackground: initial;
+    --tertiaryBackground: initial;
+    --face: var(--background);
   }
   :where([foreground=primary]) {
     color: var(--primary);
@@ -9185,7 +9179,6 @@
     margin-block: 5rem;
   }
 }
-@layer sw-utils {}
 @layer sw-utils {
   :where(list-view[background=system-background],
   [is=form-view][background=system-background]) {
@@ -10568,19 +10561,50 @@
     --face: var(--background);
     --text: var(--primary);
   }
-  /* :where([is='sheet-view'], [is='full-screen'], [is='confirmation-dialog'], [is='alert-dialog']) {
-    // modify background/secondarybg/tertiarybg etc for ELEVATED STYLES!!
-    // ANCHOR: level 1
-    --face: var(--background); // IMPORTANT: redeclare references scope or it WONT pick up!
-    // --face2: var(--secondaryBackground); // IMPORTANT: redeclare references scope or it WONT pick up!
-    // --face3: var(--tertiaryBackground); // IMPORTANT: redeclare references scope or it WONT pick up!
-
-    // FIXME: feat-sheet 1/3
-    --background: var(--secondaryBackground); //light-dark(var(--secondary-bg), var(--secondary-bg-dark));
-    // --face: light-dark(var(--secondary-bg), var(--secondary-bg-dark));
-
-    // --text: light-dark(var(--secondary-text), var(--secondary-text-dark));
-  } */
+  :where([is=sheet-view], [is=full-screen], [is=confirmation-dialog], [is=alert-dialog]) {
+    --face: var(--background);
+    --background: var(--secondaryBackground);
+  }
+  :where([is=sheet-view]:has(> scroll-view list-view[list-style=inset-grouped]:not([slot], [background]),
+  > scroll-view [is=form-view][form-style=inset-grouped]:not([slot], [background]),
+  > scroll-view table-view[table-style=inset]:not([slot], [background])),
+  [is=full-screen]:has(> scroll-view list-view[list-style=inset-grouped]:not([slot], [background]),
+  > scroll-view [is=form-view][form-style=inset-grouped]:not([slot], [background]),
+  > scroll-view table-view[table-style=inset]:not([slot], [background])),
+  [is=confirmation-dialog]:has(> scroll-view list-view[list-style=inset-grouped]:not([slot], [background]),
+  > scroll-view [is=form-view][form-style=inset-grouped]:not([slot], [background]),
+  > scroll-view table-view[table-style=inset]:not([slot], [background])),
+  [is=alert-dialog]:has(> scroll-view list-view[list-style=inset-grouped]:not([slot], [background]),
+  > scroll-view [is=form-view][form-style=inset-grouped]:not([slot], [background]),
+  > scroll-view table-view[table-style=inset]:not([slot], [background])),
+  body-view:has(> scroll-view list-view[list-style=inset-grouped]:not([slot], [background]),
+  > scroll-view [is=form-view][form-style=inset-grouped]:not([slot], [background]),
+  > scroll-view table-view[table-style=inset]:not([slot], [background])),
+  navigation-split-view:has(> scroll-view list-view[list-style=inset-grouped]:not([slot], [background]),
+  > scroll-view [is=form-view][form-style=inset-grouped]:not([slot], [background]),
+  > scroll-view table-view[table-style=inset]:not([slot], [background])),
+  navigation-split-view > [is=sidebar-view]:has(> scroll-view list-view[list-style=inset-grouped]:not([slot], [background]),
+  > scroll-view [is=form-view][form-style=inset-grouped]:not([slot], [background]),
+  > scroll-view table-view[table-style=inset]:not([slot], [background])),
+  navigation-stack:has(> scroll-view list-view[list-style=inset-grouped]:not([slot], [background]),
+  > scroll-view [is=form-view][form-style=inset-grouped]:not([slot], [background]),
+  > scroll-view table-view[table-style=inset]:not([slot], [background]))) {
+    --background: var(--groupedBackground);
+    --secondaryBackground: var(--secondaryGroupedBackground);
+    --tertiaryBackground: var(--tertiaryGroupedBackground);
+    --face: var(--background);
+  }
+  :where(navigation-stack > navigation-stack:not(:has(> scroll-view list-view[list-style=inset-grouped]:not([slot], [background]),
+  > scroll-view [is=form-view][form-style=inset-grouped]:not([slot], [background]),
+  > scroll-view table-view[table-style=inset]:not([slot], [background]))),
+  navigation-stack > navigation-split-view:not(:has(> scroll-view list-view[list-style=inset-grouped]:not([slot], [background]),
+  > scroll-view [is=form-view][form-style=inset-grouped]:not([slot], [background]),
+  > scroll-view table-view[table-style=inset]:not([slot], [background])))) {
+    --background: initial;
+    --secondaryBackground: initial;
+    --tertiaryBackground: initial;
+    --face: var(--background);
+  }
   @media (min-width: 43rem) {
     :where(navigation-split-view > [is=sidebar-view]) {
       --face: light-dark(var(--liquid-glass-bg), var(--liquid-glass-bg-dark));

package/html-data/en.json

@@ -1070,6 +1070,11 @@
       "name": "frame:max-width",
       "description": "Sets max-inline-size",
       "valueSet": "FrameInlineLength"
+    },
+    {
+      "name": "background-style",
+      "description": "Overrides the context-aware styles for background colors",
+      "valueSet": "BackgroundStyle"
     }
   ],
   "valueSets": [
@@ -2615,6 +2620,15 @@
           "description": "100cqi"
         }
       ]
+    },
+    {
+      "name": "BackgroundStyle",
+      "values": [
+        {
+          "name": "initial",
+          "description": "Reverts any background styles applied to this element, usually by context-aware rules like for example the inset-grouped-list styling applied to all descendants of current view"
+        }
+      ]
     }
   ]
 }

package/package.json

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

package/scss/_utils.scss

@@ -6,6 +6,6 @@
 
 @forward 'utils/spacing';
 
-@forward 'utils/scroll-view';
+// @forward 'utils/scroll-view';
 
 @forward 'utils/background';

package/scss/base/_reboot.scss

@@ -133,33 +133,6 @@
     }
   }
 
-  // label {
-  //   // remove this
-  //   display: inline-grid;
-  //   position: relative;
-  //   // min-height: var(--toolbar-cell-min-size);
-  //   // min-width: var(--toolbar-cell-min-size);
-  //   // container-type: inline-size;
-
-  //   grid-template-columns: minmax(0, 1fr);
-  //   grid-template-rows: minmax(0, 1fr);
-
-  //   place-content: center;
-  //   place-items: center;
-  //   // line-height: 1;
-
-  //   > svg {
-  //     display: inline-grid;
-  //     width: 2rem;
-  //     height: 2rem;
-  //   }
-
-  //   > i {
-  //     display: inline-grid;
-  //     font-size: 2rem;
-  //   }
-  // }
-
   $CONFIG: (
     vt-fwd-class-name: vars.$vt-fwd-class-name,
 

package/scss/base/_root.scss

@@ -377,8 +377,8 @@
         --#{$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);
+        // --insetgrouped#{$v}-background-color: var(--background);
+        // --insetgrouped#{$v}-item-background-color: var(--quaternaryGroupedBackground);
       }
 
       --toggle-inline-size: 3.4rem;

package/scss/colors/_index.scss

@@ -621,8 +621,7 @@ $colors: map.merge(
   //   --canvastext: light-dark(var(--primary-label), var(--primary-label-dark));
   // }
 
-  // NOTE: NO color diffs for dialogs/popups
-  /* :where([is='sheet-view'], [is='full-screen'], [is='confirmation-dialog'], [is='alert-dialog']) {
+  :where([is='sheet-view'], [is='full-screen'], [is='confirmation-dialog'], [is='alert-dialog']) {
     // modify background/secondarybg/tertiarybg etc for ELEVATED STYLES!!
     // ANCHOR: level 1
     --face: var(--background); // IMPORTANT: redeclare references scope or it WONT pick up!
@@ -634,7 +633,52 @@ $colors: map.merge(
     // --face: light-dark(var(--secondary-bg), var(--secondary-bg-dark));
 
     // --text: light-dark(var(--secondary-text), var(--secondary-text-dark));
-  } */
+  }
+
+  [is='sheet-view'],
+  [is='full-screen'],
+  [is='confirmation-dialog'],
+  [is='alert-dialog'],
+  body-view,
+  navigation-split-view,
+  navigation-split-view > [is='sidebar-view'],
+  navigation-stack {
+    // @media (pointer: coarse) {
+    :where(
+      &:has(
+        > scroll-view list-view[list-style='inset-grouped']:not([slot], [background]),
+        > scroll-view [is='form-view'][form-style='inset-grouped']:not([slot], [background]),
+        > scroll-view table-view[table-style='inset']:not([slot], [background])
+      )
+    ) {
+      --background: var(--groupedBackground);
+      --secondaryBackground: var(--secondaryGroupedBackground);
+      --tertiaryBackground: var(--tertiaryGroupedBackground);
+
+      --face: var(--background);
+    }
+    // }
+  }
+
+  // revert above!
+  navigation-stack > navigation-stack,
+  navigation-stack > navigation-split-view {
+    :where(
+      &:not(
+        :has(
+          > scroll-view list-view[list-style='inset-grouped']:not([slot], [background]),
+          > scroll-view [is='form-view'][form-style='inset-grouped']:not([slot], [background]),
+          > scroll-view table-view[table-style='inset']:not([slot], [background])
+        )
+      )
+    ) {
+      --background: initial;
+      --secondaryBackground: initial;
+      --tertiaryBackground: initial;
+
+      --face: var(--background);
+    }
+  }
 
   :where(navigation-split-view > [is='sidebar-view']) {
     // --canvas: light-dark(oklch(var(--primary-bg)), var(--primary-bg-dark));

package/scss/components/_scroll-view.scss

@@ -116,18 +116,6 @@
           }
         }
       }
-
-      // &: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/utils/_index.scss

@@ -2,29 +2,51 @@
 @use '../maps';
 
 @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);
-      }
+  // [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: initial;
+      --secondaryBackground: initial;
+      --tertiaryBackground: initial;
 
-      // 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);
-        }
+      --face: var(--background);
+      // --face2: var(--secondaryBackground);
+      // --face3: var(--tertiaryBackground);
+    }
+
+    [is='sheet-view'] &,
+    [is='full-screen'] &,
+    [is='confirmation-dialog'] &,
+    [is='alert-dialog'] & {
+      :where(&) {
+        // --background: var(--secondaryGroupedBackground);
+        // --secondaryBackground: var(--tertiaryGroupedBackground);
+        // --tertiaryBackground: var(--quaternaryGroupedBackground);
       }
     }
   }