@swiftwc/ui 0.0.0-dev.16 → 0.0.0-dev.18

package/generated/components/index.d.ts

@@ -21,6 +21,7 @@ export * from './navigation-title';
 export * from './picker-view';
 export * from './plain-button';
 export * from './screen-view';
+export * from './scroll-view-proxy';
 export * from './scroll-view';
 export * from './section-view';
 export * from './sheet-view';

package/generated/components/index.js

@@ -21,6 +21,7 @@ export * from './navigation-title';
 export * from './picker-view';
 export * from './plain-button';
 export * from './screen-view';
+export * from './scroll-view-proxy';
 export * from './scroll-view';
 export * from './section-view';
 export * from './sheet-view';

package/generated/components/scroll-view-proxy.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @summary A wrapper to {hv}-stacks
+ */
+export declare class ScrollViewProxy extends HTMLElement {
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}

package/generated/components/scroll-view-proxy.js

@@ -0,0 +1,14 @@
+/**
+ * @summary A wrapper to {hv}-stacks
+ */
+export class ScrollViewProxy extends HTMLElement {
+    constructor() {
+        super();
+    }
+    disconnectedCallback() {
+        console.debug(`${ScrollViewProxy.name} ⚡️ disconnect`);
+    }
+    connectedCallback() {
+        console.debug(`${ScrollViewProxy.name} ⚡️ connect`);
+    }
+}

package/generated/components/sidebar-toggle.js

@@ -1,19 +1,11 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
-import { $, debounce, onoff } from '../internal/utils';
+import { debounce, onoff } from '../internal/utils';
 const observers = new ResizeObserverSingleton();
 export class SidebarToggle extends HTMLElement {
-    // #ro
-    // #io
     constructor() {
         super();
-        // this.#ro = new ResizeObserver(
-        //   debounce(this.#handleMeasure.bind(this), 100, true)
-        // )
-        // this.#io = new IntersectionObserver((entries) => {
-        //   this._checkVisibility2(entries)
-        // })
     }
     connectedCallback() {
         console.debug(`${_a.name} ⚡️ connect`);
@@ -21,18 +13,13 @@ export class SidebarToggle extends HTMLElement {
         const entry = {
             target: this,
         };
-        // NOTE: wait for config
-        // Snapshot.waitReady.then(() => {
         observers.observe(this, debounce(_a.#handleMeasure, 100, true)); //this.#ro?.observe(this)
-        // this.#io.observe(this)
         // @ts-expect-error
         _a.#handleMeasure([entry]);
-        // })
     }
     disconnectedCallback() {
         console.debug(`${_a.name} ⚡️ disconnect`);
-        observers.unobserve(this); //this.#ro?.disconnect()
-        // this.#io.disconnect()
+        observers.unobserve(this);
         CleanupRegistry.unregister(this);
     }
     static query(target) {
@@ -42,62 +29,48 @@ export class SidebarToggle extends HTMLElement {
     // This triggers on show/hide of any of sidebar-toggle elements
     static #handleMeasure(entry) {
         console.debug(`${_a.name} ⚡️ measure`);
-        const target = entry?.target;
+        const { target } = entry ?? {};
+        if (!(target instanceof HTMLElement))
+            return;
         // set/remove css var/prop to parent based on shown/hidden
-        // for (const { target } of entries) {
-        const tv = target?.parentElement, width = target?.offsetWidth ?? 0;
-        // const gapProp =
-        //     getComputedStyle(tg).getPropertyValue('--toolbar-col-gap') || '0',
-        //   gap = parseFloat(gapProp) * 1 //(gapProp.endsWith('rem')? parseFloat(getComputedStyle(document.documentElement).fontSize): 1)
-        if (0 < width)
-            $.prop('--sidebar-toggle-padding-inline-start', `${width}px`, tv); //tv?.style?.setProperty?.(Snapshot.config!['sidebar-toggle-padding-inline-start-css-prop'], `${width}px`)
-        else
-            $.prop('--sidebar-toggle-padding-inline-start', null, tv); //tv?.style?.removeProperty?.(Snapshot.config!['sidebar-toggle-padding-inline-start-css-prop'])
-        // }
+        const tv = target.parentElement;
+        // inlineSize = entry.borderBoxSize?.at(0)?.inlineSize ?? entry.contentRect?.width ?? 0,
+        // blockSize = entry.borderBoxSize?.at(0)?.blockSize ?? entry.contentRect?.height ?? 0
+        self.requestAnimationFrame(() => {
+            const inlineSize = target.offsetWidth ?? 0;
+            if (0 < inlineSize)
+                tv?.style?.setProperty?.('--sidebar-toggle-padding-inline-start', `${inlineSize}px`); //$.prop('--sidebar-toggle-padding-inline-start', `${inlineSize}px`, tv) //
+            else
+                tv?.style?.removeProperty?.('--sidebar-toggle-padding-inline-start'); //$.prop('--sidebar-toggle-padding-inline-start', null, tv) //
+        });
         // auto close IF open
-        // for (const { target } of entries) {
         const { container, sideBar } = _a.query(target); //target?.closest('navigation-split-view,tab-view')
-        // const sideBar = container?.querySelector<HTMLDialogElement>(':scope > dialog[is=sidebar-view]')
         if (!sideBar?.open)
             return;
-        switch (container?.tagName) {
-            case 'NAVIGATION-SPLIT-VIEW':
-                // const sideBar = target?.parentElement?.querySelector<HTMLDialogElement>(':scope > dialog[is=sidebar-view]')
-                // if (!sideBar?.open) return
-                if (0 < target.offsetWidth && 0 < target.offsetHeight)
-                    return;
-                // sideBar?.close?.()
-                break;
-            case 'TAB-VIEW':
-                // const tabBar = container.querySelector<HTMLDialogElement>(':scope > dialog[is=tab-bar]')
-                // if (!tabBar?.open) return
-                // scan all toggles for anyone that is visible, sign that sidebar should stay open
-                if ([
-                    ...container.querySelectorAll(":scope > sidebar-toggle,:scope > [is=tab-bar] > sidebar-toggle,:scope > [is='sidebar-view'] > tool-bar > sidebar-toggle"),
-                ].some(({ offsetWidth, offsetHeight }) => 0 < offsetWidth && 0 < offsetHeight))
-                    return;
-                //tabBar?.close?.()
-                break;
-        }
-        sideBar?.close?.();
-        // }
+        self.requestAnimationFrame(() => {
+            switch (container?.tagName) {
+                case 'NAVIGATION-SPLIT-VIEW':
+                    if (0 < target.offsetWidth && 0 < target.offsetHeight)
+                        return;
+                    break;
+                case 'TAB-VIEW':
+                    // scan all toggles for anyone that is visible, sign that sidebar should stay open
+                    if ([
+                        ...container.querySelectorAll(':scope > sidebar-toggle,:scope > [is=tab-bar] > sidebar-toggle' //,:scope > [is='sidebar-view'] > tool-bar > sidebar-toggle" ?? FIXME: removed this bc/ inside sidebar!
+                        ),
+                    ].some(({ offsetWidth, offsetHeight }) => 0 < offsetWidth && 0 < offsetHeight))
+                        return;
+                    break;
+            }
+            sideBar?.close?.();
+        });
     }
-    // _checkVisibility2(entries) {
-    //   entries.forEach((entry) => {
-    //     console.log('Visible in viewport?', entry.isIntersecting)
-    //   })
-    // }
     #handleClick(evt) {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const target = evt.target;
+        const { target } = evt;
         if (!target?.closest('button'))
             return;
         const { sideBar } = _a.query(target);
-        // const container = target?.closest('tab-view,navigation-split-view')
-        // const dialog =
-        //   'TAB-VIEW' === container?.tagName
-        //     ? container.querySelector<TabBar>('dialog[is="tab-bar"]')
-        //     : container?.querySelector<SidebarView>('dialog[is="sidebar-view"]')
         if (!sideBar?.open)
             sideBar?.showModal();
         else

package/generated/css/index.css

@@ -1723,32 +1723,14 @@
   scroll-view-proxy:has(> v-stack, > h-stack) > h-stack[distribution=leading] > :not([slot])) {
     scroll-snap-align: start;
   }
-  :where(scroll-view-proxy:has(> v-stack, > h-stack) > v-stack,
-  scroll-view-proxy:has(> v-stack, > h-stack) > h-stack)::before {
-    grid-column: 1/-1;
-    grid-row: 1/-1;
-    content: "";
-    display: inline-grid;
-    block-size: 1px;
-    inline-size: 1px;
-    z-index: -1;
-    pointer-events: none;
-    position: absolute;
-  }
   :where(scroll-view-proxy:has(> v-stack, > h-stack) > v-stack) {
     overflow: clip auto;
     scroll-snap-type: block mandatory;
   }
-  :where(scroll-view-proxy:has(> v-stack, > h-stack) > v-stack)::before {
-    block-size: calc(100cqb + 1px);
-  }
   :where(scroll-view-proxy:has(> v-stack, > h-stack) > h-stack) {
     overflow: auto clip;
     scroll-snap-type: inline mandatory;
   }
-  :where(scroll-view-proxy:has(> v-stack, > h-stack) > h-stack)::before {
-    inline-size: calc(100cqi + 1px);
-  }
   :where(scroll-view-proxy:has(> v-stack, > h-stack) > h-stack[padding]) {
     scroll-padding-inline: 1rem;
   }
@@ -1757,8 +1739,8 @@
   :where(h-stack) {
     grid-auto-flow: column;
     grid-template-rows: minmax(0, 1fr);
-    place-items: center;
-    place-content: center;
+    place-items: safe center;
+    place-content: safe center;
     gap: 1rem;
   }
   :where(h-stack[template="minmax(0,1fr) auto"]) {
@@ -1777,8 +1759,8 @@
 @layer sw-components {
   :where(v-stack) {
     grid-template-columns: minmax(0, 1fr);
-    place-items: center;
-    place-content: center;
+    place-items: safe center;
+    place-content: safe center;
     gap: 1rem;
   }
 }
@@ -3988,6 +3970,7 @@
       inline-size: var(--nav-split-view-sidebar-inline-size);
       margin-inline-start: max(env(safe-area-inset-left), var(--sidebar-inline-spacing));
       --safe-area-inset-left: 0px;
+      --safe-area-inset-right: 0px;
       overflow: visible;
       padding-block: max(var(--safe-area-inset-top), var(--sidebar-block-spacing)) max(var(--safe-area-inset-bottom), var(--sidebar-block-spacing));
       border-radius: var(--sidebar-border-radius);
@@ -4116,19 +4099,20 @@
       }
     }
   }
-  :where(:where(tab-view > [is=sidebar-view])) {
+  :where(tab-view > [is=sidebar-view]) {
     inline-size: var(--nav-split-view-sidebar-inline-size);
     margin-inline-start: max(env(safe-area-inset-left), var(--sidebar-inline-spacing));
     --safe-area-inset-left: 0px;
+    --safe-area-inset-right: 0px;
     overflow: visible;
     padding-block: max(var(--safe-area-inset-top), var(--sidebar-block-spacing)) max(var(--safe-area-inset-bottom), var(--sidebar-block-spacing));
     border-radius: var(--sidebar-border-radius);
   }
-  :where(:where(tab-view > [is=sidebar-view]) > scroll-view, :where(tab-view > [is=sidebar-view]) > scroll-view ~ tool-bar) {
+  :where(tab-view > [is=sidebar-view] > scroll-view, tab-view > [is=sidebar-view] > scroll-view ~ tool-bar) {
     --safe-area-inset-top: 0px;
     --safe-area-inset-bottom: 0px;
   }
-  :where(:where(tab-view > [is=sidebar-view]) > scroll-view) {
+  :where(tab-view > [is=sidebar-view] > scroll-view) {
     border-radius: var(--sidebar-border-radius);
     backdrop-filter: var(--liquid-glass-backdrop-filter);
     --scroll-view-box-shadow: var(--liquid-glass-box-shadow);
@@ -5249,61 +5233,61 @@
 @layer sw-utils {
   h-stack[distribution=leading],
   v-flex-stack[distribution=leading] {
-    justify-items: start;
-    justify-content: start;
+    justify-items: start  ;
+    justify-content: start  ;
   }
   h-stack[distribution="leading fill"],
   v-flex-stack[distribution="leading fill"] {
-    justify-items: start;
-    justify-content: stretch;
+    justify-items: start  ;
+    justify-content: stretch  ;
   }
   h-stack[distribution=center],
   v-flex-stack[distribution=center] {
-    justify-items: center;
-    justify-content: center;
+    justify-items: safe center  ;
+    justify-content: safe center  ;
   }
   h-stack[distribution=trailing],
   v-flex-stack[distribution=trailing] {
-    justify-items: end;
-    justify-content: end;
+    justify-items: end  ;
+    justify-content: end  ;
   }
   h-stack[distribution=fill],
   v-flex-stack[distribution=fill] {
-    justify-items: stretch;
-    justify-content: stretch;
+    justify-items: stretch  ;
+    justify-content: stretch  ;
   }
   h-stack[distribution=space-between],
   v-flex-stack[distribution=space-between] {
-    justify-content: space-between;
+    justify-content: space-between  ;
   }
   h-stack[alignment=leading],
   v-flex-stack[alignment=leading] {
-    align-items: start;
-    align-content: start;
+    align-items: start  ;
+    align-content: start  ;
   }
   h-stack[alignment="leading fill"],
   v-flex-stack[alignment="leading fill"] {
-    align-items: start;
-    align-content: stretch;
+    align-items: start  ;
+    align-content: stretch  ;
   }
   h-stack[alignment=center],
   v-flex-stack[alignment=center] {
-    align-items: center;
-    align-content: center;
+    align-items: center  ;
+    align-content: center  ;
   }
   h-stack[alignment=trailing],
   v-flex-stack[alignment=trailing] {
-    align-items: end;
-    align-content: end;
+    align-items: end  ;
+    align-content: end  ;
   }
   h-stack[alignment=fill],
   v-flex-stack[alignment=fill] {
-    align-items: stretch;
-    align-content: stretch;
+    align-items: stretch  ;
+    align-content: stretch  ;
   }
   h-stack[alignment=space-between],
   v-flex-stack[alignment=space-between] {
-    align-content: space-between;
+    align-content: space-between  ;
   }
   h-stack[placement="fill leading"],
   v-flex-stack[placement="fill leading"] {
@@ -5318,61 +5302,61 @@
   }
   v-stack[distribution=leading],
   h-flex-stack[distribution=leading] {
-    align-items: start;
-    align-content: start;
+    align-items: start  ;
+    align-content: start  ;
   }
   v-stack[distribution="leading fill"],
   h-flex-stack[distribution="leading fill"] {
-    align-items: start;
-    align-content: stretch;
+    align-items: start  ;
+    align-content: stretch  ;
   }
   v-stack[distribution=center],
   h-flex-stack[distribution=center] {
-    align-items: center;
-    align-content: center;
+    align-items: center  ;
+    align-content: center  ;
   }
   v-stack[distribution=trailing],
   h-flex-stack[distribution=trailing] {
-    align-items: end;
-    align-content: end;
+    align-items: end  ;
+    align-content: end  ;
   }
   v-stack[distribution=fill],
   h-flex-stack[distribution=fill] {
-    align-items: stretch;
-    align-content: stretch;
+    align-items: stretch  ;
+    align-content: stretch  ;
   }
   v-stack[distribution=space-between],
   h-flex-stack[distribution=space-between] {
-    align-content: space-between;
+    align-content: space-between  ;
   }
   v-stack[alignment=leading],
   h-flex-stack[alignment=leading] {
-    justify-items: start;
-    justify-content: start;
+    justify-items: start  ;
+    justify-content: start  ;
   }
   v-stack[alignment="leading fill"],
   h-flex-stack[alignment="leading fill"] {
-    justify-items: start;
-    justify-content: stretch;
+    justify-items: start  ;
+    justify-content: stretch  ;
   }
   v-stack[alignment=center],
   h-flex-stack[alignment=center] {
-    justify-items: center;
-    justify-content: center;
+    justify-items: safe center  ;
+    justify-content: safe center  ;
   }
   v-stack[alignment=trailing],
   h-flex-stack[alignment=trailing] {
-    justify-items: end;
-    justify-content: end;
+    justify-items: end  ;
+    justify-content: end  ;
   }
   v-stack[alignment=fill],
   h-flex-stack[alignment=fill] {
-    justify-items: stretch;
-    justify-content: stretch;
+    justify-items: stretch  ;
+    justify-content: stretch  ;
   }
   v-stack[alignment=space-between],
   h-flex-stack[alignment=space-between] {
-    justify-content: space-between;
+    justify-content: space-between  ;
   }
   v-stack[placement="leading fill"],
   h-flex-stack[placement="leading fill"] {
@@ -5543,23 +5527,33 @@
   }
   :where(v-stack[padding],
   h-stack[padding],
+  h-flex-stack[padding],
   v-flex-stack[padding]) {
     padding-inline: 1rem;
   }
   :where(scroll-view > v-stack[padding],
   scroll-view > h-stack[padding],
+  scroll-view > h-flex-stack[padding],
   scroll-view > v-flex-stack[padding]) {
     padding-block-end: 1rem;
   }
   :where(v-stack > [padding]:not(v-stack,
   h-stack,
+  h-flex-stack,
   v-flex-stack), v-stack > [is=disclosure-group] > summary[padding],
   h-stack > [padding]:not(v-stack,
   h-stack,
+  h-flex-stack,
   v-flex-stack),
   h-stack > [is=disclosure-group] > summary[padding],
+  h-flex-stack > [padding]:not(v-stack,
+  h-stack,
+  h-flex-stack,
+  v-flex-stack),
+  h-flex-stack > [is=disclosure-group] > summary[padding],
   v-flex-stack > [padding]:not(v-stack,
   h-stack,
+  h-flex-stack,
   v-flex-stack),
   v-flex-stack > [is=disclosure-group] > summary[padding]) {
     margin-inline: 1rem;
@@ -7464,4 +7458,18 @@
       transition-duration: 100ms;
     }
   }
+  @media (pointer: coarse) {
+    :where(tab-view > [is=sidebar-view][touch-glass]) {
+      --sidebar-view-scale: scale(1.02);
+      transition-duration: 100ms;
+    }
+    :where(tab-view > sidebar-toggle > *[touch-glass]) {
+      --toolbar-cell-scale: scale(1.07);
+      transition-duration: 100ms;
+    }
+    :where(tab-view > [is=sidebar-view] > tool-bar > sidebar-toggle > *[touch-glass]) {
+      --toolbar-cell-scale: scale(1.07);
+      transition-duration: 100ms;
+    }
+  }
 }

package/generated/internal/utils/list-active.js

@@ -1,6 +1,6 @@
 const touchList = new WeakMap();
-function onDown(evt) {
-    const el = evt.target.closest('button,summary');
+function onDown({ target }) {
+    const el = target?.closest('button,summary');
     if (!el)
         return;
     touchList.set(el, setTimeout(() => {
@@ -11,18 +11,18 @@ function onDown(evt) {
     el.addEventListener('pointerleave', onLeave, { once: true, passive: true });
     el.closest('scroll-view')?.addEventListener('scroll', onScroll, { once: true, passive: true });
 }
-function onOver(evt) {
-    const el = evt.target.closest('button,summary');
+function onOver({ target, buttons }) {
+    const el = target?.closest('button,summary');
     if (!el)
         return;
-    if (0 === evt.buttons)
+    if (0 === buttons)
         return;
     el.classList.add('active');
     el.removeEventListener('pointerover', onOver);
     el.addEventListener('pointerleave', onLeave, { once: true, passive: true });
 }
-function onLeave(evt) {
-    const el = evt.target.closest('button,summary');
+function onLeave({ target }) {
+    const el = target?.closest('button,summary');
     if (!el)
         return;
     el.addEventListener('pointerover', onOver, { once: true, passive: true });
@@ -35,8 +35,8 @@ function onLeave(evt) {
     touchList.delete(el);
     // })
 }
-function onCancel(evt) {
-    const el = evt.target.closest('button,summary');
+function onCancel({ target }) {
+    const el = target?.closest('button,summary');
     if (!el)
         return;
     // self.requestAnimationFrame(() => {
@@ -49,8 +49,8 @@ function onCancel(evt) {
     touchList.delete(el);
     // })
 }
-function onScroll(evt) {
-    for (const el of evt.target.querySelectorAll('button,summary')) {
+function onScroll({ target }) {
+    for (const el of target?.querySelectorAll('button,summary') ?? []) {
         el.classList.remove('active');
         if (touchList.has(el))
             clearTimeout(touchList.get(el));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.16",
+  "version": "0.0.0-dev.18",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -65,7 +65,8 @@
     "build:barrels": "barrelsby -D -q -S -d ./js/components -e \".\\.test\\.ts\"",
     "format:check": "prettier . --check",
     "format:write": "prettier . --write",
-    "test": "vitest --dom"
+    "test": "vitest --dom",
+    "version:pkg": "npm version $npm_config_bump --no-git-tag-version --preid=dev"
   },
   "devDependencies": {
     "doctrine": "^3.0.0",

package/scss/components/_components.scss

@@ -0,0 +1,76 @@
+@forward 'components/index';
+
+@forward 'components/v-keyboard';
+
+@forward 'components/disclosure-group';
+
+@forward 'components/h-divider';
+@forward 'components/v-divider';
+
+@forward 'components/full-screen';
+
+@forward 'components/detail-placeholder';
+
+@forward 'components/sticky-container';
+
+@forward 'components/sheet-view';
+
+@forward 'components/confirmation-dialog';
+
+@forward 'components/scroll-view';
+@forward 'components/scroll-view-proxy';
+
+@forward 'components/h-stack';
+@forward 'components/v-stack';
+@forward 'components/h-flex-stack';
+@forward 'components/v-flex-stack';
+
+@forward 'components/scroll-view-toolbars';
+
+@forward 'components/tool-bar-item';
+
+@forward 'components/tool-bar-item-group';
+
+@forward 'components/plain-button';
+@forward 'components/borderless-button';
+@forward 'components/bordered-button';
+@forward 'components/bordered-prominent-button';
+@forward 'components/glass-button';
+@forward 'components/glass-prominent-button';
+
+@forward 'components/tool-bar';
+
+@forward 'components/label-view';
+
+@forward 'components/labeled-content';
+
+// @forward 'components/button-view';
+
+@forward 'components/body-view';
+
+@forward 'components/navigation-large-title';
+@forward 'components/navigation-title';
+
+@forward 'components/sidebar-toggle';
+
+@forward 'components/menu-view';
+
+@forward 'components/sidebar-view';
+
+@forward 'components/list-view';
+@forward 'components/form-view';
+@forward 'components/section-view';
+@forward 'components/table-view';
+@forward 'components/table-row';
+@forward 'components/table-column';
+
+@forward 'components/text-field';
+@forward 'components/date-picker';
+@forward 'components/picker-view';
+
+@forward 'components/navigation-stack';
+@forward 'components/navigation-split-view';
+
+@forward 'components/tab-view';
+@forward 'components/tab-bar';
+@forward 'components/tab-item';

package/scss/components/_h-flex-stack.scss

@@ -0,0 +1,23 @@
+@use '../vars';
+
+@layer #{vars.$components-layer} {
+  h-flex-stack {
+    :where(&) {
+      display: flex;
+      flex-flow: row nowrap;
+
+      place-items: safe center;
+      place-content: safe center;
+    }
+
+    :where(& > *) {
+      max-block-size: 100%;
+    }
+
+    > [frame-height='infinity'] {
+      :where(&) {
+        flex-grow: 1;
+      }
+    }
+  }
+}

package/scss/components/_h-stack.scss

@@ -10,8 +10,8 @@ $h-stack-templates: ((minmax(0, 1fr) auto), (auto minmax(0, 1fr) auto auto), (re
       grid-auto-flow: column;
       grid-template-rows: minmax(0, 1fr);
 
-      place-items: center;
-      place-content: center;
+      place-items: safe center;
+      place-content: safe center;
 
       gap: 1rem;
     }

package/scss/components/_scroll-view-proxy.scss

@@ -33,18 +33,18 @@
           scroll-snap-align: start;
         }
 
-        :where(&) {
-          &::before {
-            @include mixins.span-all;
-            content: '';
-            display: inline-grid;
-            block-size: 1px;
-            inline-size: 1px;
-            z-index: -1;
-            pointer-events: none;
-            position: absolute;
-          }
-        }
+        // :where(&) {
+        //   &::before {
+        //     @include mixins.span-all;
+        //     content: '';
+        //     display: inline-grid;
+        //     block-size: 1px;
+        //     inline-size: 1px;
+        //     z-index: -1;
+        //     pointer-events: none;
+        //     position: absolute;
+        //   }
+        // }
       }
 
       > v-stack {
@@ -53,9 +53,9 @@
 
           scroll-snap-type: block mandatory;
 
-          &::before {
-            block-size: calc(100cqb + 1px); // creates overflow
-          }
+          // &::before {
+          //   block-size: calc(100cqb + 1px); // creates overflow
+          // }
         }
       }
 
@@ -65,9 +65,9 @@
 
           scroll-snap-type: inline mandatory;
 
-          &::before {
-            inline-size: calc(100cqi + 1px); // creates overflow
-          }
+          // &::before {
+          //   inline-size: calc(100cqi + 1px); // creates overflow
+          // }
         }
 
         :where(&[padding]) {

package/scss/components/_tab-view.scss

@@ -115,10 +115,12 @@
       }
     }
 
-    :where(& > [is='sidebar-view']) {
+    > [is='sidebar-view'] {
       @include mixins.make-floating-sidebar;
 
-      margin-inline-start: calc(var(--nav-split-view-sidebar-inline-size) * -1); // hide off screen
+      :where(&) {
+        margin-inline-start: calc(var(--nav-split-view-sidebar-inline-size) * -1); // hide off screen
+      }
     }
   }
 

package/scss/components/_v-stack.scss

@@ -5,8 +5,8 @@
     :where(&) {
       grid-template-columns: minmax(0, 1fr);
 
-      place-items: center;
-      place-content: center;
+      place-items: safe center;
+      place-content: safe center;
 
       gap: 1rem;
     }

package/scss/final/_touch-glass.scss

@@ -63,5 +63,22 @@
         }
       }
     }
+
+    tab-view {
+      :where(& > [is='sidebar-view'][touch-glass]) {
+        --sidebar-view-scale: scale(1.02);
+        transition-duration: 100ms;
+      }
+
+      :where(& > sidebar-toggle > *[touch-glass]) {
+        --toolbar-cell-scale: scale(1.07);
+        transition-duration: 100ms;
+      }
+
+      :where(& > [is='sidebar-view'] > tool-bar > sidebar-toggle > *[touch-glass]) {
+        --toolbar-cell-scale: scale(1.07);
+        transition-duration: 100ms;
+      }
+    }
   }
 }

package/scss/mixins/_dialog.scss

@@ -61,6 +61,7 @@
     margin-inline-start: max(env(safe-area-inset-left), var(--sidebar-inline-spacing)); // float
 
     --safe-area-inset-left: 0px; // now a floating
+    --safe-area-inset-right: 0px; // now a floating FIXME: Check new addition
 
     overflow: visible; // override
 

package/scss/utils/_stacks.scss

@@ -3,97 +3,97 @@
 @use 'sass:map';
 @use 'sass:list';
 
-$h-map: (
-  leading: start,
-  center: center,
-  trailing: end,
-  fill: stretch, // cross-axis stretch
-);
-
-$v-map: (
-  top: start,
-  center: center,
-  bottom: end,
-  fill: stretch, // cross-axis stretch
-);
-
-$placement-map: (
-  top-leading: start start,
-  top: start center,
-  top-trailing: start end,
-  center-leading: center start,
-  center: center center,
-  center-trailing: center end,
-  bottom-leading: end start,
-  bottom: end center,
-  bottom-trailing: end end,
-);
-
-$alignment-map: (
-  leading: start,
-  center: center,
-  trailing: end,
-  fill: stretch, // cross-axis stretch
-);
-
-$distribution-map: (
-  top: start,
-  center: center,
-  bottom: end,
-  fill: stretch,
-  between: space-between,
-  evenly: space-evenly,
-);
+// $h-map: (
+//   leading: start,
+//   center: center,
+//   trailing: end,
+//   fill: stretch, // cross-axis stretch
+// );
+
+// $v-map: (
+//   top: start,
+//   center: center,
+//   bottom: end,
+//   fill: stretch, // cross-axis stretch
+// );
+
+// $placement-map: (
+//   top-leading: start start,
+//   top: start center,
+//   top-trailing: start end,
+//   center-leading: center start,
+//   center: center center,
+//   center-trailing: center end,
+//   bottom-leading: end start,
+//   bottom: end center,
+//   bottom-trailing: end end,
+// );
+
+// $alignment-map: (
+//   leading: start,
+//   center: center,
+//   trailing: end,
+//   fill: stretch, // cross-axis stretch
+// );
+
+// $distribution-map: (
+//   top: start,
+//   center: center,
+//   bottom: end,
+//   fill: stretch,
+//   between: space-between,
+//   evenly: space-evenly,
+// );
 
 $inline-map: (
   leading: (
-    (justify-items start),
-    (justify-content start),
+    (justify-items (start)),
+    (justify-content (start)),
   ),
   'leading fill': (
-    (justify-items start),
-    (justify-content stretch),
+    (justify-items (start)),
+    (justify-content (stretch)),
   ),
   center: (
-    (justify-items center),
-    (justify-content center),
+    (justify-items (safe center)),
+    (justify-content (safe center)),
   ),
   trailing: (
-    (justify-items end),
-    (justify-content end),
+    (justify-items (end)),
+    (justify-content (end)),
   ),
   fill: (
-    (justify-items stretch),
-    (justify-content stretch),
+    (justify-items (stretch)),
+    (justify-content (stretch)),
   ),
   space-between: (
-    (justify-content space-between),
+    (justify-content (space-between)),
   ),
 );
 
 $block-map: (
   leading: (
-    (align-items start),
-    (align-content start),
+    (align-items (start)),
+    (align-content (start)),
   ),
   'leading fill': (
-    (align-items start),
-    (align-content stretch),
+    (align-items (start)),
+    (align-content (stretch)),
   ),
   center: (
-    (align-items center),
-    (align-content center),
+    (align-items (center)),
+    (align-content (center)),
   ),
   trailing: (
-    (align-items end),
-    (align-content end),
+    (align-items (end)),
+    (align-content (end)),
   ),
   fill: (
-    (align-items stretch),
-    (align-content stretch),
+    (align-items (stretch)),
+    (align-content (stretch)),
   ),
   space-between: (
-    (align-content space-between),
+    (align-content (space-between)),
   ),
 );
 
@@ -129,7 +129,7 @@ $v-placement-map: (
     @each $k, $declarations in $inline-map {
       &[distribution='#{$k}'] {
         @each $decl in $declarations {
-          #{list.nth($decl, 1)}: #{list.nth($decl, 2)};
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
         }
       }
     }
@@ -138,7 +138,7 @@ $v-placement-map: (
     @each $k, $declarations in $block-map {
       &[alignment='#{$k}'] {
         @each $decl in $declarations {
-          #{list.nth($decl, 1)}: #{list.nth($decl, 2)};
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
         }
       }
     }
@@ -172,7 +172,7 @@ $v-placement-map: (
     @each $k, $declarations in $block-map {
       &[distribution='#{$k}'] {
         @each $decl in $declarations {
-          #{list.nth($decl, 1)}: #{list.nth($decl, 2)};
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
         }
       }
     }
@@ -181,7 +181,7 @@ $v-placement-map: (
     @each $k, $declarations in $inline-map {
       &[alignment='#{$k}'] {
         @each $decl in $declarations {
-          #{list.nth($decl, 1)}: #{list.nth($decl, 2)};
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
         }
       }
     }
@@ -225,6 +225,7 @@ $v-placement-map: (
   // padding reserved word for stacks
   v-stack,
   h-stack,
+  h-flex-stack,
   v-flex-stack {
     :where(&[padding]) {
       padding-inline: 1rem;