@swiftwc/ui 0.0.0-dev.21 → 0.0.0-dev.23

package/generated/events/tab-view.d.ts

@@ -1,5 +1,9 @@
 import { type NavigationSplitView, type NavigationStack } from '../components';
 import { type TabBarPlacement } from '../components/tab-view';
+export type TabBeforeDetail = {
+    tag: string;
+    ms: number;
+};
 export type TabDetail = {
     tag: string;
 };
@@ -16,8 +20,8 @@ declare global {
         tabhide: CustomEvent<TabDetail>;
         tabreveal: CustomEvent<TabDetail>;
         tabswap: CustomEvent<TabDetail>;
-        beforetabreveal: CustomEvent<TabDetail>;
-        beforetabswap: CustomEvent<TabDetail>;
+        beforetabreveal: CustomEvent<TabBeforeDetail>;
+        beforetabswap: CustomEvent<TabBeforeDetail>;
         'tab-view:toggle': CustomEvent<TabViewDetail>;
         'tab-view:adaptable-tab-bar-placement-change': CustomEvent<TabViewAdaptableTabBarPlacementDetail>;
     }

package/generated/internal/class/css-style-observer.js

@@ -16,7 +16,7 @@ export class CSSStyleObserver {
         this.#cleanups?.();
     }
     #handleTransitionrun = (callback, evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        console.debug(`${_a.name} ⚡️ ${evt?.type} (${evt.propertyName})`);
         if (!this.#options?.properties.some((prop) => evt.propertyName.startsWith(prop)))
             return;
         callback?.(evt);

package/generated/internal/utils/button-role.d.ts

@@ -1 +1 @@
-export default function (target: HTMLElement, attributeName: string | null): void;
+export default function (target: HTMLElement, role: string | null): void;

package/generated/internal/utils/button-role.js

@@ -1,19 +1,44 @@
 import { I18n } from '../../i18n';
+import { Snapshot } from '../../snapshot';
 import { CleanupRegistry } from '../class/cleanup-registry';
 import { default as $ } from './cash';
 import onoff from './onoff';
 function renderPlaceholder(el, role) {
-    const label = el.querySelector(':scope>[slot=placeholder]') ?? el.appendChild($(`<label-view system-image="magnifying-glass" slot="placeholder"></label-view>`, '>1'));
-    if (role) {
-        label.setAttribute('title', I18n.t('ButtonRole').Default.Destructive);
+    const label = el.querySelector(':scope>[slot=placeholder]') ?? el.appendChild($(`<label-view slot="placeholder"></label-view>`, '>1'));
+    console.log(9999999, el, role);
+    switch (role) {
+        case 'cancel':
+            label.setAttribute('title', I18n.t('ButtonRole').Default.Cancel);
+            label.setAttribute('system-image', Snapshot.config['cancel-button-icon']);
+            break;
+        case 'close':
+            label.setAttribute('title', I18n.t('ButtonRole').Default.Close);
+            label.setAttribute('system-image', Snapshot.config['close-button-icon']);
+            break;
+        case 'confirm':
+            label.setAttribute('title', I18n.t('ButtonRole').Default.Confirm);
+            label.setAttribute('system-image', Snapshot.config['confirm-button-icon']);
+            break;
+        case 'confirmation-action':
+            label.setAttribute('title', I18n.t('ButtonRole').Default.Confirm);
+            label.setAttribute('system-image', Snapshot.config['confirm-button-icon']);
+            break;
+        case 'destructive':
+            label.setAttribute('title', I18n.t('ButtonRole').Default.Destructive);
+            label.setAttribute('system-image', Snapshot.config['delete-button-icon']);
+            break;
+        default:
+            label?.remove();
+            break;
     }
-    else
-        label?.remove();
+    // if (role) {
+    //   label.setAttribute('title', I18n.t('ButtonRole').Default.Destructive)
+    // } else label?.remove()
 }
-export default function (target, attributeName) {
-    renderPlaceholder(target, target.getAttribute(attributeName ?? ''));
+export default function (target, role) {
+    renderPlaceholder(target, role);
     CleanupRegistry.unregister(target, 'i18n');
     CleanupRegistry.register(target, onoff('localechange', () => {
-        renderPlaceholder(target, target.getAttribute(attributeName ?? ''));
+        renderPlaceholder(target, role);
     }, I18n.on).on(), 'i18n');
 }

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

@@ -16,5 +16,4 @@ export { default as sleep } from './sleep';
 export { default as slowHideShow } from './slow-hide-show';
 export { default as timeout } from './timeout';
 export { default as touchGlass } from './touch-glass';
-export { default as toolbarRepositioner } from './toolbar-repositioner';
 export declare const $: typeof cash;

package/generated/internal/utils/index.js

@@ -17,5 +17,4 @@ export { default as sleep } from './sleep';
 export { default as slowHideShow } from './slow-hide-show';
 export { default as timeout } from './timeout';
 export { default as touchGlass } from './touch-glass';
-export { default as toolbarRepositioner } from './toolbar-repositioner';
 export const $ = cash;

package/package.json

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

package/scss/_components.scss

@@ -11,6 +11,8 @@
 
 @forward 'components/detail-placeholder';
 
+@forward 'components/fine-tooltip';
+
 @forward 'components/sticky-container';
 
 @forward 'components/sheet-view';

package/scss/_mixins.scss

@@ -1,3 +1,7 @@
 @forward 'mixins/index';
 
 @forward 'mixins/dialog';
+
+@forward 'mixins/button';
+
+@forward 'mixins/color';

package/scss/_transitions.scss

@@ -10,6 +10,8 @@
 
 @forward 'transitions/dialog';
 
+@forward 'transitions/fine-tooltip';
+
 @forward 'transitions/menu-view';
 
 @forward 'transitions/glass-button';

package/scss/_vars.scss

@@ -147,6 +147,11 @@ $disclosure-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000
 $table-col-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M216.49,168.49a12,12,0,0,1-17,0L128,97,56.49,168.49a12,12,0,0,1-17-17l80-80a12,12,0,0,1,17,0l80,80A12,12,0,0,1,216.49,168.49Z"%3E%3C/path%3E%3C/svg%3E'; // ph-caret-up-bold
 $picker-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"%3E%3C/path%3E%3C/svg%3E'; // ph-check-bold
 
+$cancel-button-icon: 'x'; // ph-trash
+$close-button-icon: 'x'; // ph-trash
+$confirm-button-icon: 'check'; // ph-trash
+$delete-button-icon: 'trash'; // ph-trash
+
 // SECTION: computed(s)
 
 $ipad-portrait-bp-max: #{functions.subtract-tiny($ipad-portrait-bp)};

package/scss/base/_reboot.scss

@@ -43,6 +43,12 @@
     text-transform: none;
   }
 
+  // FIXME:
+  .ph,
+  .ph::before {
+    display: grid;
+  }
+
   button,
   *::part(button),
   input,
@@ -105,6 +111,10 @@
 
   html {
     transition: font-size 1ms step-start;
+
+    @media (pointer: fine) {
+      font-size: 14px;
+    }
   }
 
   // label {
@@ -149,6 +159,11 @@
     // ipad-landscape-bp-min: vars.$ipad-landscape-bp-min,
     ipad-sheet-view-inline-size: vars.$ipad-sheet-view-inline-size,
     ipad-sheet-view-height: vars.$ipad-sheet-view-height,
+    //
+    cancel-button-icon: vars.$cancel-button-icon,
+    close-button-icon: vars.$close-button-icon,
+    confirm-button-icon: vars.$confirm-button-icon,
+    delete-button-icon: vars.$delete-button-icon,
   );
 
   @debug functions.map-to-query($CONFIG);

package/scss/base/_root.scss

@@ -61,8 +61,27 @@
       --liquid-glass-bg-alpha: 99%;
       --liquid-glass-bg-alpha-dark: 99%;
     }
+    //
     --liquid-glass-bg: oklch(var(--liquid-glass-bg-lch) / var(--liquid-glass-bg-alpha));
     --liquid-glass-bg-dark: oklch(var(--liquid-glass-bg-lch-dark) / var(--liquid-glass-bg-alpha-dark));
+
+    --clear-glass-bg: var(--liquid-glass-bg);
+    --clear-glass-bg-dark: var(--liquid-glass-bg-dark);
+    --clear-glass-focus-bg: var(--clear-glass-bg);
+    --clear-glass-focus-bg-dark: var(--clear-glass-bg-dark);
+    --clear-glass-active-bg: var(--clear-glass-bg);
+    --clear-glass-active-bg-dark: var(--clear-glass-bg-dark);
+
+    // @include mixins.wire-tinted-glass(tinted-glass-bg, tinted-glass-focus-bg, tinted-glass-active-bg);
+
+    // This is for glass effect on interactive elements like controls that supports hover on fine screens and active state!
+    // NOTE: On fine screens this fallbacks/transforms into a basic color w/out glass efect!
+    --control-clear-glass-bg: var(--liquid-glass-bg);
+    --control-clear-glass-bg-dark: var(--liquid-glass-bg-dark);
+    --control-clear-glass-focus-bg: var(--control-clear-glass-bg);
+    --control-clear-glass-focus-bg-dark: var(--control-clear-glass-bg-dark);
+    --control-clear-glass-active-bg: var(--control-clear-glass-bg);
+    --control-clear-glass-active-bg-dark: var(--control-clear-glass-bg-dark);
     //color-mix(in oklch, red calc(100% - 50%), transparent)
 
     // --sidebar-bg-lch: 1 0 0;
@@ -83,22 +102,24 @@
       var(--liquid-glass-bs-bevel-highlight), var(--liquid-glass-bs-soft-bevel-blur), inset 3px 3px 10px -3px light-dark(#ddd, #262626), inset -3px -3px 10px -3px light-dark(#ddd, #262626),
       inset 0 0 5px 1px light-dark(#fff, #141414), inset 0 0 0 0.5px light-dark(#00000040, #ffffff26), inset 0 0 24px 0 light-dark(#0000001a, #ffffff0d), var(--liquid-glass-bs-outer);
 
+    --control-clear-glass-box-shadow: var(--liquid-glass-box-shadow);
+
     --navigation-bar-block-size: var(--tool-bar-block-size);
 
     --nav-split-view-sidebar-inline-size: 20rem;
     --nav-split-view-content-inline-size: 25rem;
 
-    --nav-split-view-separator-color: var(--divider); //oklch(0 0 0);
-    --nav-split-view-separator-color-dark: var(--divider-dark); //oklch(1 0 0);
+    // --nav-split-view-separator-color: var(--divider); //var(--black);
+    // --nav-split-view-separator-color-dark: var(--divider-dark); //var(--white);
 
-    --primary-label: oklch(0 0 0);
-    --primary-label-dark: oklch(1 0 0);
+    // --primary-label: var(--black);
+    // --primary-label-dark: var(--white);
 
     // --secondary-label: oklch(0.4962 0 0); // ✅
     // --secondary-label-dark: oklch(0.6334 0 0); // ✅
 
-    --secondary-text: oklch(0 0 0);
-    --secondary-text-dark: oklch(1 0 0);
+    --secondary-text: var(--black);
+    --secondary-text-dark: var(--white);
 
     --tint: oklch(0.5325 0.1899 257.12);
     --tint1g: color-mix(in oklch, white 70%, var(--tint)); //oklch(0.9208 0.0306 249.69);
@@ -110,16 +131,16 @@
     // --tint-lch: 0.452 0.313214 264.052;
     // --tint-lch-dark: 0.452 0.313214 264.052;
 
-    --divider: oklch(0.9431 0 0); // ✅
-    --divider-dark: oklch(0.2858 0.0036 286.17); // ✅
+    // --divider: oklch(0.9431 0 0); // ✅
+    // --divider-dark: oklch(0.2858 0.0036 286.17); // ✅
 
-    --system-bg: oklch(1 0 0); // ✅
-    --system-bg-dark: oklch(0 0 0); // ✅
+    --system-bg: var(--white); // ✅
+    --system-bg-dark: var(--black); // ✅
 
-    --primary-bg: oklch(0.9566 0.0067 286.27); // ✅
-    --primary-bg-dark: oklch(0 0 0); // ✅
+    // --primary-bg: oklch(0.9566 0.0067 286.27); // ✅
+    // --primary-bg-dark: var(--black); // ✅
 
-    --primary-grouped-bg: oklch(1 0 0); //0.8136 0.0428 255.03;
+    --primary-grouped-bg: var(--white); //0.8136 0.0428 255.03;
     --primary-grouped-bg-dark: oklch(0.8136 0.0428 255.03);
 
     --secondary-bg: oklch(0.8045 0.0779 73.42);
@@ -145,8 +166,8 @@
     --clear: transparent;
 
     --toolbar-col-gap: 0.5rem;
-    --toolbar-cell-bg: var(--liquid-glass-bg); //oklch(var(--sidebar-bg-lch) / var(--sidebar-bg-alpha)); //oklch(0 0 0 / 0%);
-    --toolbar-cell-bg-dark: var(--liquid-glass-bg-dark); //oklch(var(--sidebar-bg-lch-dark) / var(--sidebar-bg-alpha-dark)); //oklch(0 0 0 / 0%);
+    --toolbar-cell-bg: var(--control-clear-glass-bg); //oklch(var(--sidebar-bg-lch) / var(--sidebar-bg-alpha)); //oklch(0 0 0 / 0%);
+    --toolbar-cell-bg-dark: var(--control-clear-glass-bg-dark); //oklch(var(--sidebar-bg-lch-dark) / var(--sidebar-bg-alpha-dark)); //oklch(0 0 0 / 0%);
     --toolbar-cell-inline-padding-start: 0.25rem;
     --toolbar-cell-inline-padding-end: 0.25rem;
     --toolbar-cell-block-padding-start: 0.25rem;
@@ -154,22 +175,23 @@
     --toolbar-cell-border-radius: var(--pill-border-radius);
     --toolbar-cell-min-size: 2.8rem;
 
-    --toolbar-cell-focus-bg: var(--toolbar-cell-bg); //oklch(0 0 0 / 0%);
-    --toolbar-cell-focus-bg-dark: var(--toolbar-cell-bg-dark); //oklch(0 0 0 / 0%);
-    --toolbar-cell-active-bg: var(--toolbar-cell-bg); //oklch(0 0 0 / 0%);
-    --toolbar-cell-active-bg-dark: var(--toolbar-cell-bg-dark); //oklch(0 0 0 / 0%);
+    --toolbar-cell-focus-bg: var(--control-clear-glass-focus-bg); //oklch(0 0 0 / 0%);
+    --toolbar-cell-focus-bg-dark: var(--control-clear-glass-focus-bg-dark); //oklch(0 0 0 / 0%);
+    --toolbar-cell-active-bg: var(--control-clear-glass-active-bg); //oklch(0 0 0 / 0%);
+    --toolbar-cell-active-bg-dark: var(--control-clear-glass-active-bg-dark); //oklch(0 0 0 / 0%);
+
+    --toolbar-cell-box-shadow: var(--control-clear-glass-box-shadow);
 
-    --toolbar-cell-box-shadow: var(--liquid-glass-box-shadow);
+    --menu-bg: var(--control-clear-glass-bg); //--menu-bg: var(--liquid-glass-bg); //oklch(var(--sidebar-bg-lch) / var(--sidebar-bg-alpha));
+    --menu-bg-dark: var(--control-clear-glass-bg-dark); //--menu-bg-dark: var(--liquid-glass-bg-dark); //oklch(var(--sidebar-bg-lch-dark) / var(--sidebar-bg-alpha-dark));
 
-    --menu-bg: var(--liquid-glass-bg); //oklch(var(--sidebar-bg-lch) / var(--sidebar-bg-alpha));
-    --menu-bg-dark: var(--liquid-glass-bg-dark); //oklch(var(--sidebar-bg-lch-dark) / var(--sidebar-bg-alpha-dark));
     --menu-max-inline-size: 15rem;
     --menu-max-block-size: 60vh;
     --menu-spacing: 1rem;
     --menu-host-offscreen-transform: scale(0);
     --menu-host-offscreen-filter: blur(10px);
 
-    --menu-popover-box-shadow: var(--liquid-glass-box-shadow);
+    --menu-popover-box-shadow: var(--control-clear-glass-box-shadow);
 
     --menu-padding: 0.5rem;
 
@@ -180,12 +202,6 @@
 
     --menu-item-border-radius: 1.2rem; // define this to be like a pill, based on an exemplar item min-height
 
-    --menu-item-focus-bg: oklch(0 0 0 / 0%);
-    --menu-item-focus-bg-dark: oklch(0 0 0 / 0%);
-
-    --menu-item-active-bg: oklch(0 0 0 / 20%);
-    --menu-item-active-bg-dark: oklch(1 0 0 / 20%);
-
     --touchglass-transition-duration: 300ms;
     // --touchglass-transition-duration: 15s;
 
@@ -304,13 +320,6 @@
     --table-accessory-gap: 0.2rem;
     --table-accessory-size: 1.2rem;
 
-    --glass-btn-bg: var(--liquid-glass-bg);
-    --glass-btn-bg-dark: var(--liquid-glass-bg-dark);
-    --glass-btn-focus-bg: var(--glass-btn-bg);
-    --glass-btn-focus-bg-dark: var(--glass-btn-bg-dark);
-    --glass-btn-active-bg: var(--glass-btn-bg);
-    --glass-btn-active-bg-dark: var(--glass-btn-bg-dark);
-
     // button sizes 1/2
     @each $size, $media in vars.$button-sizes {
       $props: map.get($media, default);
@@ -322,6 +331,11 @@
       }
     }
 
+    --picker-affordance-size: 1rem;
+    --picker-affordance-col-gap: 1rem;
+
+    // SECTION
+
     // fine
     @media (pointer: fine) {
       // button sizes 2/2
@@ -335,47 +349,29 @@
         }
       }
 
-      --primary-bg: oklch(0.9761 0 0); // ✅
-      --primary-bg-dark: oklch(0.2666 0.0071 67.52); // ✅
+      // --primary-bg: oklch(0.9761 0 0); // ✅
+      // --primary-bg-dark: oklch(0.2666 0.0071 67.52); // ✅
 
-      --divider: oklch(0.9249 0 0); // ✅
-      --divider-dark: oklch(0.3452 0.0074 84.59); // ✅
+      // --divider: oklch(0.9249 0 0); // ✅
+      // --divider-dark: oklch(0.3452 0.0074 84.59); // ✅
 
       // --secondary-label: oklch(0.5999 0 0); // ✅
       // --secondary-label-dark: oklch(0.69 0.0019 67.79); // ✅
 
-      --noglass-bg: oklch(1 0 0);
-      --noglass-bg-dark: oklch(0.2871 0.0029 17.33);
+      // SECTION Glass
 
-      --toolbar-cell-bg: var(--noglass-bg);
-      --toolbar-cell-bg-dark: var(--noglass-bg-dark);
+      --control-clear-glass-bg: var(--white);
+      --control-clear-glass-bg-dark: oklch(0.2871 0.0029 17.33);
+      --control-clear-glass-focus-bg: var(--gray5); //oklch(0.9551 0 0); //FIXME: gray6!!!
+      --control-clear-glass-focus-bg-dark: oklch(0.3578 0.008 75.3); //FIXME: gray4!!!
+      --control-clear-glass-active-bg: var(--gray3); //oklch(0.9128 0 0); //FIXME: gray5!!!
+      --control-clear-glass-active-bg-dark: oklch(0.3995 0.0077 75.32); //FIXME: gray3!!!
 
-      --toolbar-cell-focus-bg: oklch(0.9551 0 0); //FIXME: gray6!!!
-      --toolbar-cell-focus-bg-dark: oklch(0.3578 0.008 75.3); //FIXME: gray4!!!
-      --toolbar-cell-active-bg: oklch(0.9128 0 0); //FIXME: gray5!!!
-      --toolbar-cell-active-bg-dark: oklch(0.3995 0.0077 75.32); //FIXME: gray3!!!
+      --control-clear-glass-box-shadow: var(--liquid-glass-bs-bevel-highlight), var(--liquid-glass-bs-soft-bevel-blur), var(--liquid-glass-bs-outer);
 
-      --menu-bg: var(--noglass-bg);
-      --menu-bg-dark: var(--noglass-bg-dark);
-
-      --toolbar-cell-box-shadow: var(--liquid-glass-bs-bevel-highlight), var(--liquid-glass-bs-soft-bevel-blur), var(--liquid-glass-bs-outer);
-      --menu-popover-box-shadow: var(--liquid-glass-bs-bevel-highlight), var(--liquid-glass-bs-soft-bevel-blur), var(--liquid-glass-bs-outer);
+      // SECTION
 
       //
-      --menu-item-focus-color: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-      --menu-item-focus-color-dark: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-
-      --menu-item-active-color: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-      --menu-item-active-color-dark: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-
-      --menu-item-focus-bg: var(--accentColor);
-      --menu-item-focus-bg-dark: var(--accentColor);
-
-      --menu-item-active-bg: oklch(from var(--accentColor) max(calc(l * 0.7), 0) min(calc(c * 1.4), c) h); //color-mix(in oklch, black 10%, var(--accentColor));
-      --menu-item-active-bg-dark: oklch(from var(--accentColor) min(calc(l * 1.3), 1) min(calc(c * 1.2), c) h); //color-mix(in oklch, white 10%, var(--accentColor));
-
-      --picker-affordance-size: 1rem;
-      --picker-affordance-col-gap: 1rem;
 
       // list
       // @each $v in list, form {

package/scss/colors/_index.scss

@@ -417,6 +417,12 @@ $colors: map.merge(
   inherits: true;
 }
 
+@property --clear {
+  syntax: '<color>';
+  initial-value: oklch(0 0 0 / 0%); // ✅
+  inherits: true;
+}
+
 @layer #{vars.$colors-layer} {
   :root {
     // --background: light-dark(oklch(1 0 0), oklch(0 0 0)); // ✅
@@ -488,37 +494,51 @@ $colors: map.merge(
 
   :where([is='tab-bar']) {
     --toolbaritemtext: light-dark(var(--secondary-text), var(--secondary-text-dark));
+    --toolbaritemhighlighttext: light-dark(var(--secondary-text), var(--secondary-text-dark));
+    --toolbaritemactivetext: light-dark(var(--secondary-text), var(--secondary-text-dark));
   }
 
-  :where(tool-bar-item, tool-bar-item-group, navigation-split-view sidebar-toggle) {
-    //, list-view) {
-    //, [is='form-view'] BREAKS sidebar
-    --toolbaritemface: light-dark(var(--toolbar-cell-bg), var(--toolbar-cell-bg-dark));
-    --toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
-    --toolbaritemactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
-    // --toolbaritemtext: light-dark(var(--primary-label), var(--primary-label-dark)); //light-dark(oklch(var(--tint-lch) / 1), oklch(var(--tint-lch-dark) / 1));
+  tool-bar-item,
+  tool-bar-item-group,
+  navigation-split-view sidebar-toggle {
+    :where(&) {
+      //, list-view) {
+      //, [is='form-view'] BREAKS sidebar
+      --toolbaritemface: light-dark(var(--toolbar-cell-bg), var(--toolbar-cell-bg-dark));
+      --toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
+      --toolbaritemactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
+      // --toolbaritemtext: light-dark(var(--primary-label), var(--primary-label-dark)); //light-dark(oklch(var(--tint-lch) / 1), oklch(var(--tint-lch-dark) / 1));
+
+      // @media (pointer: fine) {
+      //   --toolbaritemface: light-dark(var(--toolbar-cell-bg), var(--toolbar-cell-bg-dark));
+      //   --toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
+      //   --toolbaritemactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
+      //   // --toolbaritemtext: light-dark(var(--primary-label), var(--primary-label-dark));
+      // }
+    }
 
-    // @media (pointer: fine) {
-    //   --toolbaritemface: light-dark(var(--toolbar-cell-bg), var(--toolbar-cell-bg-dark));
-    //   --toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
-    //   --toolbaritemactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
-    //   // --toolbaritemtext: light-dark(var(--primary-label), var(--primary-label-dark));
-    // }
-  }
+    :where(&[tint], [tint] &) {
+      // --toolbaritemtext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
+      // --toolbaritemhighlighttext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
+      // --toolbaritemactivetext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
 
-  [is='tab-bar'] [is='tab-item'] {
-    :where(&) {
-      --toolbaritemhighlighttext: yellow;
-      --toolbaritemactivetext: chocolate;
+      @include mixins.wire-tinted-glass(toolbaritem);
     }
   }
 
-  sidebar-toggle,
+  // [is='tab-bar'] [is='tab-item'] {
+  //   :where(&) {
+  //     --toolbaritemhighlighttext: yellow;
+  //     --toolbaritemactivetext: chocolate;
+  //   }
+  // }
+
+  sidebar-toggle {
     // tool-bar-item,
     // [is='tab-item'],
     // list-view > button,
     // this is temp for toolbar look aboove tables
-    menu-view {
+    // menu-view {
     // [is='disclosure-group'] {
     :where(&) {
       --toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
@@ -528,12 +548,43 @@ $colors: map.merge(
 
   menu-view {
     :where(&) {
-      --menuitemhighlighttext: light-dark(var(--menu-item-focus-color), var(--menu-item-focus-color-dark));
-      --menuitemhighlightface: light-dark(var(--menu-item-focus-bg), var(--menu-item-focus-bg-dark));
+      --menuitemhighlightface: light-dark(var(--clear), var(--clear));
+
+      --menuitemactiveface: light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%));
+
+      @media (pointer: fine) {
+        --menuitemhighlightface: light-dark(var(--accentColor), var(--accentColor));
+
+        --menuitemhighlighttext: light-dark(oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none), oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none));
+
+        --menuitemactivetext: light-dark(oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none), oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none));
+
+        --menuitemactiveface: light-dark(
+          oklch(from var(--accentColor) max(calc(l * 0.7), 0) min(calc(c * 1.4), c) h),
+          oklch(from var(--accentColor) min(calc(l * 1.3), 1) min(calc(c * 1.2), c) h)
+        ); //color-mix(in oklch, black 10%, var(--accentColor)); //color-mix(in oklch, white 10%, var(--accentColor));
+      }
+
+      --menusummaryhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
+      --menusummaryactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
+    }
 
-      --menuitemactivetext: light-dark(var(--menu-item-active-color), var(--menu-item-active-color-dark));
-      --menuitemactiveface: light-dark(var(--menu-item-active-bg), var(--menu-item-active-bg-dark));
+    tool-bar-item > picker-view > &,
+    tool-bar-item > & {
+      :where(&) {
+        --menusummaryface: var(--toolbaritemface);
+        --menusummaryhighlightface: var(--toolbaritemhighlightface);
+        --menusummaryactiveface: var(--toolbaritemactiveface);
+        --menusummarytext: var(--toolbaritemtext);
+        --menusummaryhighlighttext: var(--toolbaritemhighlighttext);
+        --menusummaryactivetext: var(--toolbaritemactivetext);
+      }
     }
+
+    // :where(&[tint]) {
+    // @include mixins.wire-tinted-menu(menuitemface, menuitemhighlightface, menuitemactiveface);
+    // @include mixins.wire-menu-colors;
+    // }
   }
 
   :where([is='confirmation-dialog'], [is='alert-dialog']) {
@@ -599,19 +650,17 @@ $colors: map.merge(
       oklch(from var(--accentEmphasis, var(--accentColor)) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h)
     );
 
-    --btnface: light-dark(var(--glass-btn-bg), var(--glass-btn-bg-dark));
-    --btnhighlightface: light-dark(var(--glass-btn-focus-bg), var(--glass-btn-focus-bg-dark));
-    --btnactiveface: light-dark(var(--glass-btn-active-bg), var(--glass-btn-active-bg-dark));
+    --btnface: light-dark(var(--clear-glass-bg), var(--clear-glass-bg-dark));
+    --btnhighlightface: light-dark(var(--clear-glass-focus-bg), var(--clear-glass-focus-bg-dark));
+    --btnactiveface: light-dark(var(--clear-glass-active-bg), var(--clear-glass-active-bg-dark));
   }
 
   :where([is='glass-prominent-button']) {
-    --btntext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-    --btnhighlighttext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
-    --btnactivetext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
+    // --btntext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
+    // --btnhighlighttext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
+    // --btnactivetext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
 
-    --btnface: var(--accentColor); //light-dark(var(--accentColor), var(--accentColor));
-    --btnhighlightface: light-dark(oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h), oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h));
-    --btnactiveface: light-dark(oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h), oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h));
+    @include mixins.wire-tinted-glass(btn);
   }
 
   /* list-view {

package/scss/components/_alert-dialog.scss

@@ -18,14 +18,13 @@
       max-inline-size: min(20rem, 80vw);
       max-block-size: 80vh;
 
-      margin-block: max(env(safe-area-inset-top), var(--menu-spacing)) max(env(safe-area-inset-bottom), var(--menu-spacing));
-      margin-inline: max(env(safe-area-inset-left), var(--menu-spacing)) max(env(safe-area-inset-right), var(--menu-spacing));
+      margin-block: auto;
+      margin-inline: auto;
 
       transform: var(--alert--dialog-scale,);
       opacity: var(--alert--dialog-opacity,);
 
-      position-anchor: --alert-dialog; // overriden
-      position-area: center;
+      place-self: center;
 
       overflow: clip;
       border-radius: 0.9rem;
@@ -34,7 +33,7 @@
       box-shadow: var(--menu-popover-box-shadow,); //0 0 10px 10px black;
 
       padding-block: 1rem;
-      padding-inline: 1em;
+      padding-inline: 1rem;
       gap: 1rem;
 
       // finally

package/scss/components/_bordered-button.scss

@@ -6,11 +6,25 @@
     @extend %button;
 
     :where(&) {
+      --btnpadistart: var(--regular-btn-padding);
+      --btnpadiend: var(--regular-btn-padding);
+      --btnpadbstart: var(--regular-btn-padding);
+      --btnpadbend: var(--regular-btn-padding);
+
       @media (pointer: fine) {
         --accentColor: var(--primary);
       }
     }
 
+    @each $size, $media in vars.$button-sizes {
+      :where(&[control-size='#{$size}']) {
+        --btnpadistart: var(--#{$size}-btn-padding);
+        --btnpadiend: var(--#{$size}-btn-padding);
+        --btnpadbstart: var(--#{$size}-btn-padding);
+        --btnpadbend: var(--#{$size}-btn-padding);
+      }
+    }
+
     :where(&[role='destructive']) {
       --accentColor: var(--red);
       --accentColor2: var(--red2);

package/scss/components/_bordered-prominent-button.scss

@@ -6,6 +6,19 @@
     @extend %button;
 
     :where(&) {
+      --btnpadistart: var(--regular-btn-padding);
+      --btnpadiend: var(--regular-btn-padding);
+      --btnpadbstart: var(--regular-btn-padding);
+      --btnpadbend: var(--regular-btn-padding);
+    }
+
+    @each $size, $media in vars.$button-sizes {
+      :where(&[control-size='#{$size}']) {
+        --btnpadistart: var(--#{$size}-btn-padding);
+        --btnpadiend: var(--#{$size}-btn-padding);
+        --btnpadbstart: var(--#{$size}-btn-padding);
+        --btnpadbend: var(--#{$size}-btn-padding);
+      }
     }
 
     :where(&[role='destructive']) {