@swiftwc/ui 0.0.0-dev.20 → 0.0.0-dev.22

package/generated/events/alert-dialog.d.ts

@@ -0,0 +1,8 @@
+export type AlertReturnDetail = {
+    returnValue: string;
+};
+declare global {
+    interface HTMLElementEventMap {
+        'alert:return': CustomEvent<AlertReturnDetail>;
+    }
+}

package/generated/events/alert-dialog.js

@@ -0,0 +1 @@
+export {};

package/generated/events/confirmation-dialog.d.ts

@@ -1,9 +1,9 @@
-export type ReturnDetail = {
+export type ConfirmationReturnDetail = {
     returnValue: string;
     positionAnchor: string;
 };
 declare global {
     interface HTMLElementEventMap {
-        return: CustomEvent<ReturnDetail>;
+        'confirmation:return': CustomEvent<ConfirmationReturnDetail>;
     }
 }

package/generated/events/index.d.ts

@@ -1,3 +1,4 @@
+export * from './alert-dialog';
 export * from './confirmation-dialog';
 export * from './date-picker';
 export * from './lifecycle-observer';

package/generated/events/index.js

@@ -1,3 +1,4 @@
+export * from './alert-dialog';
 export * from './confirmation-dialog';
 export * from './date-picker';
 export * from './lifecycle-observer';

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/i18n/locales/el.d.ts

@@ -4,5 +4,14 @@ declare const _default: () => {
         readonly Label: "Κανένα αποτέλεσμα για «{search}»";
         readonly Description: "Ελέγξτε την ορθογραφία ή δοκιμάστε μια νέα αναζήτηση.";
     };
+    readonly ButtonRole: {
+        readonly Default: {
+            readonly Cancel: "Cancel";
+            readonly Close: "Close";
+            readonly Confirm: "Confirm";
+            readonly Destructive: "Διαγραφή";
+            readonly OK: "OK";
+        };
+    };
 };
 export default _default;

package/generated/i18n/locales/el.js

@@ -5,4 +5,13 @@ export default defineTranslations(() => ({
         Label: 'Κανένα αποτέλεσμα για «{search}»',
         Description: 'Ελέγξτε την ορθογραφία ή δοκιμάστε μια νέα αναζήτηση.',
     },
+    ButtonRole: {
+        Default: {
+            Cancel: 'Cancel',
+            Close: 'Close',
+            Confirm: 'Confirm',
+            Destructive: 'Διαγραφή',
+            OK: 'OK',
+        },
+    },
 }));

package/generated/i18n/locales/en.d.ts

@@ -4,5 +4,14 @@ declare const _default: () => {
         readonly Label: "No Results for ”{search}”";
         readonly Description: "Check the spelling or try a new search.";
     };
+    readonly ButtonRole: {
+        readonly Default: {
+            readonly Cancel: "Cancel";
+            readonly Close: "Close";
+            readonly Confirm: "Confirm";
+            readonly Destructive: "Delete";
+            readonly OK: "OK";
+        };
+    };
 };
 export default _default;

package/generated/i18n/locales/en.js

@@ -5,4 +5,13 @@ export default defineTranslations(() => ({
         Label: 'No Results for ”{search}”',
         Description: 'Check the spelling or try a new search.',
     },
+    ButtonRole: {
+        Default: {
+            Cancel: 'Cancel',
+            Close: 'Close',
+            Confirm: 'Confirm',
+            Destructive: 'Delete',
+            OK: 'OK',
+        },
+    },
 }));

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/class/form-associated-base.js

@@ -12,7 +12,10 @@ export function getInternals(instance) {
 export function makeSlotchangeHandler(t) {
     const handleSlotchange = (evt) => {
         console.debug(`${makeSlotchangeHandler.name} ⚡️ ${evt?.type}`);
-        const slot = evt.target, assigned = slot.assignedElements({ flatten: true });
+        const slot = evt.target instanceof HTMLSlotElement && evt.target;
+        if (!slot)
+            return;
+        const assigned = slot.assignedElements({ flatten: true });
         observers.syncObservations(trackedElements.get(t) ?? new Set(), assigned, handleTagMutation, ['value', 'label']);
         // for (const el of trackedElements.get(t) ?? [])
         //   if (!assigned.includes(el)) {

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

@@ -1,6 +1,6 @@
 var _a;
+import { lifecycleObserver } from '../../buses';
 import { CleanupRegistry } from '../../internal/class/cleanup-registry';
-import { LifecycleObserver } from '../../lifecycle-observer';
 import { frame, onoff } from '../utils';
 export class NavigationView extends HTMLElement {
     static get observedAttributes() {
@@ -16,7 +16,7 @@ export class NavigationView extends HTMLElement {
         this.#recentBefore = undefined;
         // this.removeEventListener('tabreveal', this.#handleTabReveal)
         if (this.closest('tab-view'))
-            frame().then(() => LifecycleObserver.dispatchEvent(new CustomEvent('tabhide', { detail: { tag: this.id }, bubbles: true, composed: true })));
+            frame().then(() => lifecycleObserver.dispatchEvent(new CustomEvent('tabhide', { detail: { tag: this.id }, bubbles: true, composed: true })));
     }
     connectedCallback() {
         if (this.closest('tab-view')) {
@@ -32,7 +32,7 @@ export class NavigationView extends HTMLElement {
         if (this.closest('tab-view'))
             frame(this).then(() => {
                 // if (!r) return
-                LifecycleObserver.dispatchEvent(new CustomEvent('tabshow', { detail: { tag: this.id }, bubbles: true, composed: true }));
+                lifecycleObserver.dispatchEvent(new CustomEvent('tabshow', { detail: { tag: this.id }, bubbles: true, composed: true }));
             });
     }
     attributeChangedCallback(name, oldValue, newValue) {
@@ -42,7 +42,7 @@ export class NavigationView extends HTMLElement {
                     break;
                 if (!this.closest('tab-view'))
                     break; // tabview stuff
-                let eventType = this.hasAttribute(name) ? 'tabhide' : 'tabshow', target = LifecycleObserver;
+                let eventType = this.hasAttribute(name) ? 'tabhide' : 'tabshow', target = lifecycleObserver;
                 // isRecent by 100ms window
                 if (this.#recentBefore && performance.now() - this.#recentBefore.time <= 100) {
                     if (this.#recentBefore.type === 'beforetabreveal') {

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

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

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

@@ -0,0 +1,39 @@
+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 slot="placeholder"></label-view>`, '>1'));
+    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 'destructive':
+            label.setAttribute('title', I18n.t('ButtonRole').Default.Destructive);
+            label.setAttribute('system-image', Snapshot.config['delete-button-icon']);
+            break;
+        default:
+            label?.remove();
+            break;
+    }
+    // if (role) {
+    //   label.setAttribute('title', I18n.t('ButtonRole').Default.Destructive)
+    // } else label?.remove()
+}
+export default function (target, attributeName) {
+    renderPlaceholder(target, target.getAttribute(attributeName ?? ''));
+    CleanupRegistry.unregister(target, 'i18n');
+    CleanupRegistry.register(target, onoff('localechange', () => {
+        renderPlaceholder(target, target.getAttribute(attributeName ?? ''));
+    }, I18n.on).on(), 'i18n');
+}

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

@@ -5,10 +5,11 @@ import prev from './prev';
 import prevAll from './prev-all';
 import prop from './prop';
 import siblings from './siblings';
-declare const DEFAULT: ":scope>:first-child";
+declare const DEFAULT: ">1";
 interface CashFn {
-    (innerHTML: string, selector?: typeof DEFAULT): Element;
-    (innerHTML: string, selector: string): DocumentFragment;
+    (innerHTML: string): DocumentFragment;
+    <T extends Element = Element>(innerHTML: string, selector: typeof DEFAULT): T;
+    <T extends Element = Element>(innerHTML: string, selector: string): T;
     prop: typeof prop;
     nextAll: typeof nextAll;
     prevAll: typeof prevAll;

package/generated/internal/utils/cash/index.js

@@ -5,12 +5,14 @@ import prev from './prev';
 import prevAll from './prev-all';
 import prop from './prop';
 import siblings from './siblings';
-const DEFAULT = ':scope>:first-child';
-const cash = ((innerHTML, selector = DEFAULT) => {
+const DEFAULT = '>1';
+const cash = ((innerHTML, selector) => {
     const template = Object.assign(document.createElement('template'), { innerHTML });
+    if (!selector)
+        return template.content;
     if (selector === DEFAULT)
-        return template.content.firstElementChild;
-    return template.content;
+        return template.content.firstElementChild; // OVERKILL
+    return template.content.querySelector('>1' === selector ? ':first-child' : selector);
 });
 cash.prop = prop;
 cash.nextAll = nextAll;

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

@@ -1,10 +1,12 @@
 import cash from './cash';
 export { default as add } from './add';
+export { default as buttonRole } from './button-role';
 export { default as clamp } from './clamp';
 export { default as compareBigDecimals } from './compare-big-decimals';
 export { default as cssTime } from './css-time';
 export { default as debounce } from './debounce';
 export { default as frame } from './frame';
+export { default as isInside } from './is-inside';
 export { default as kebabCase } from './kebab-case';
 export { default as listActive } from './list-active';
 export { default as microtask } from './microtask';

package/generated/internal/utils/index.js

@@ -1,11 +1,13 @@
 // import * as _intl from './intl'
 import cash from './cash';
 export { default as add } from './add';
+export { default as buttonRole } from './button-role';
 export { default as clamp } from './clamp';
 export { default as compareBigDecimals } from './compare-big-decimals';
 export { default as cssTime } from './css-time';
 export { default as debounce } from './debounce';
 export { default as frame } from './frame';
+export { default as isInside } from './is-inside';
 export { default as kebabCase } from './kebab-case';
 export { default as listActive } from './list-active';
 export { default as microtask } from './microtask';

package/generated/internal/utils/is-inside.d.ts

@@ -0,0 +1 @@
+export default function (x: number, y: number, rect: DOMRect): boolean;

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

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

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

@@ -1,6 +1,8 @@
 const touchList = new WeakMap();
 function onDown({ target }) {
-    const el = target?.closest('button,summary');
+    if (!(target instanceof HTMLElement && target))
+        return;
+    const el = target.closest('button,summary');
     if (!el)
         return;
     touchList.set(el, setTimeout(() => {
@@ -12,7 +14,9 @@ function onDown({ target }) {
     el.closest('scroll-view')?.addEventListener('scroll', onScroll, { once: true, passive: true });
 }
 function onOver({ target, buttons }) {
-    const el = target?.closest('button,summary');
+    if (!(target instanceof HTMLElement && target))
+        return;
+    const el = target.closest('button,summary');
     if (!el)
         return;
     if (0 === buttons)
@@ -22,7 +26,9 @@ function onOver({ target, buttons }) {
     el.addEventListener('pointerleave', onLeave, { once: true, passive: true });
 }
 function onLeave({ target }) {
-    const el = target?.closest('button,summary');
+    if (!(target instanceof HTMLElement && target))
+        return;
+    const el = target.closest('button,summary');
     if (!el)
         return;
     el.addEventListener('pointerover', onOver, { once: true, passive: true });
@@ -36,7 +42,9 @@ function onLeave({ target }) {
     // })
 }
 function onCancel({ target }) {
-    const el = target?.closest('button,summary');
+    if (!(target instanceof HTMLElement && target))
+        return;
+    const el = target.closest('button,summary');
     if (!el)
         return;
     // self.requestAnimationFrame(() => {
@@ -50,7 +58,9 @@ function onCancel({ target }) {
     // })
 }
 function onScroll({ target }) {
-    for (const el of target?.querySelectorAll('button,summary') ?? []) {
+    if (!(target instanceof HTMLElement && target))
+        return;
+    for (const el of target.querySelectorAll('button,summary') ?? []) {
         el.classList.remove('active');
         if (touchList.has(el))
             clearTimeout(touchList.get(el));

package/generated/snapshot/index.d.ts

@@ -1,5 +1,7 @@
 export declare class Snapshot {
     #private;
+    static get breakpoints(): ReadonlyMap<string, boolean> | undefined;
+    static on: EventTarget;
     static readonly waitReady: Promise<[unknown, void]>;
     static waitReadyFor<T extends HTMLElement>(element: T): Promise<T | null>;
     static get config(): Record<string, string> | undefined;

package/generated/snapshot/index.js

@@ -1,6 +1,13 @@
+import { onoff } from '../internal/utils';
 export class Snapshot {
     static #readyCalled = false;
     static #config;
+    static #listeners;
+    static #breakpoints;
+    static get breakpoints() {
+        return this.#breakpoints;
+    }
+    static on = new EventTarget();
     static waitReady = Promise.all([
         'complete' === document.readyState ? Promise.resolve() : new Promise((r) => self.addEventListener('load', r, { once: true })),
         (async () => {
@@ -32,6 +39,20 @@ export class Snapshot {
         catch {
             console.error('could-not-parse-config');
         }
+        for (const off of this.#listeners ?? [])
+            off?.();
+        this.#listeners = new Set();
+        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());
         console.debug(this.#config);
     }
+    static #handleMediaChange = ({ type, matches, media }, kind) => {
+        console.debug(`${Snapshot.name} ⚡️ ${type}`);
+        this.#breakpoints?.set('fine_dialog_sheet', matches);
+        this.on.dispatchEvent(new MediaQueryListEvent(kind, {
+            matches,
+            media,
+        }));
+    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.20",
+  "version": "0.0.0-dev.22",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -57,19 +57,22 @@
   },
   "scripts": {
     "prebuild": "rm -rf generated",
-    "build": "npm run build:ts && npm run build:scss && npm run build:manifest && npm run build:barrels && npm run build:barrels:i18n",
+    "build": "npm run build:ts && npm run build:scss && npm run build:manifest && npm run build:barrels",
     "postbuild": "npm run format:write",
     "build:ts:watch": "npm run prebuild && tsc --watch",
     "build:ts": "tsc",
     "build:scss": "sass --style=expanded --no-source-map scss/index.scss generated/css/index.css",
     "build:manifest": "tsx scripts/make-manifest.ts",
-    "build:barrels": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/components --exclude \".\\.test\\.ts\"",
+    "build:barrels": "npm run build:barrels:components && npm run build:barrels:events && npm run build:barrels:buses && npm run build:barrels:i18n",
+    "build:barrels:components": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/components --exclude \".\\.test\\.ts\"",
+    "build:barrels:events": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/events --exclude \".\\.test\\.ts\"",
+    "build:barrels:buses": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/buses",
     "build:barrels:i18n": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --fullPathname --directory ./js/i18n/locales",
     "format:check": "prettier . --check",
     "format:write": "prettier . --write",
     "test": "vitest --dom",
     "predeploy": "rm -rf generated",
-    "deploy":"npm run build:ts && npm run build:scss",
+    "deploy": "npm run build:ts && npm run build:scss",
     "version:pkg": "npm version $npm_config_bump --no-git-tag-version --preid=dev"
   },
   "devDependencies": {

package/scss/_components.scss

@@ -18,12 +18,14 @@
 @forward 'components/content-unavailable-view';
 
 @forward 'components/confirmation-dialog';
+@forward 'components/alert-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';

package/scss/_functions.scss

@@ -19,3 +19,13 @@
   }
   @return string.slice($parts, 2);
 }
+
+@function str-replace($string, $search, $replace: '') {
+  $index: string.index($string, $search);
+
+  @if $index {
+    @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+  }
+
+  @return $string;
+}

package/scss/_transitions.scss

@@ -17,6 +17,7 @@
 @forward 'transitions/glass-prominent-button';
 
 @forward 'transitions/confirmation-dialog';
+@forward 'transitions/alert-dialog';
 
 @forward 'transitions/navigation-split-view';
 

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,11 @@
     text-transform: none;
   }
 
+  .ph,
+  .ph::before {
+    display: grid;
+  }
+
   button,
   *::part(button),
   input,
@@ -149,6 +154,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/colors/_index.scss

@@ -439,7 +439,7 @@ $colors: map.merge(
   //   --canvastext: light-dark(var(--primary-label), var(--primary-label-dark));
   // }
 
-  :where([is='sheet-view'], [is='full-screen'], [is='confirmation-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!
@@ -488,31 +488,49 @@ $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));
-
-    // @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));
-    // }
-  }
-
-  [is='tab-bar'] [is='tab-item'] {
+  tool-bar-item,
+  tool-bar-item-group,
+  navigation-split-view sidebar-toggle {
     :where(&) {
-      --toolbaritemhighlighttext: yellow;
-      --toolbaritemactivetext: chocolate;
+      //, 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));
+      // }
+    }
+    :where(&[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);
+
+      --toolbaritemface: var(--accentColor); //light-dark(var(--accentColor), var(--accentColor));
+      --toolbaritemhighlightface: 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)
+      );
+      --toolbaritemactiveface: 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));
     }
   }
 
+  // [is='tab-bar'] [is='tab-item'] {
+  //   :where(&) {
+  //     --toolbaritemhighlighttext: yellow;
+  //     --toolbaritemactivetext: chocolate;
+  //   }
+  // }
+
   sidebar-toggle,
     // tool-bar-item,
     // [is='tab-item'],
@@ -536,7 +554,7 @@ $colors: map.merge(
     }
   }
 
-  :where([is='confirmation-dialog']) {
+  :where([is='confirmation-dialog'], [is='alert-dialog']) {
     --dialogbtnface: light-dark(var(--toolbar-cell-bg), var(--toolbar-cell-bg-dark));
     --dialogbtnhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
     --dialogbtnactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));