@swiftwc/ui 0.0.0-dev.25 → 0.0.0-dev.26

package/generated/client/index.d.ts

@@ -25,5 +25,5 @@ export declare const confirmationDialog: (trigger: HTMLElement, title: string, a
 }[], options?: {
     controller?: AbortController;
     titleVisibility?: boolean;
-}) => Promise<any>;
+}) => Promise<unknown>;
 export { I18n, lifecycleObserver, NavigationPath, Snapshot };

package/generated/client/index.js

@@ -368,7 +368,7 @@ export const confirmationDialog = async (trigger, title, actions, options) => {
         if (action?.role)
             btn.setAttribute('role', action.role);
         if (action.label || action.image) {
-            const label = $(`<label-view title="${action.label}"></label-view>`, '>1');
+            const label = $(`<label-view></label-view>`, '>1');
             if (action.label)
                 label.setAttribute('title', action.label);
             if (action.image)
@@ -377,7 +377,7 @@ export const confirmationDialog = async (trigger, title, actions, options) => {
         }
         dialog.insertAdjacentElement('beforeend', btn);
     }
-    trigger.closest('body-view')?.insertAdjacentElement('beforeend', dialog); // dialog.showModal()
+    trigger.closest('body-view,dialog')?.insertAdjacentElement('beforeend', dialog); // dialog.showModal()
     const { promise, resolve } = Promise.withResolvers(), off = onoff('confirmation:return', (evt) => {
         off();
         resolve(evt.detail.returnValue);

package/generated/css/index.css

@@ -2369,7 +2369,7 @@
   }
 }
 @layer sw-colors {
-  [is=bordered-prominent-button] {
+  [is=glass-prominent-button] {
     --secondary: var(--btntext);
     --blue: var(--btntext);
   }
@@ -7794,6 +7794,10 @@
     --toolbaritemhighlighttext: 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));
     --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));
     --toolbaritemactivetext: 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));
+    --secondary: var(--btntext);
+    --blue: var(--btntext);
+    --accentColorEffective: var(--btntext);
+    --accentColor: var(--btntext);
   }
   :where(sidebar-toggle) {
     --toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));

package/package.json

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

package/scss/colors/_index.scss

@@ -523,6 +523,12 @@ $colors: map.merge(
       // --toolbaritemactivetext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
 
       @include mixins.wire-tinted-glass(toolbaritem);
+
+      --secondary: var(--btntext);
+      --blue: var(--btntext);
+
+      --accentColorEffective: var(--btntext);
+      --accentColor: var(--btntext);
     }
   }
 

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

@@ -41,7 +41,7 @@
 }
 
 @layer #{vars.$colors-layer} {
-  [is='bordered-prominent-button'] {
+  [is='glass-prominent-button'] {
     --secondary: var(--btntext);
     --blue: var(--btntext);
   }

package/scss/components/_tool-bar-item.scss

@@ -40,10 +40,9 @@
     :where(&:has([disabled])) {
       pointer-events: none;
     }
-  }
 
-  // NOTE: MUST be right-after the above `all: unset` in this SAME page!
-  tool-bar-item {
+    // NOTE: MUST be right-after the above `all: unset` in this SAME page!
+
     :where(& > button),
     :where(& > picker-view > menu-view)::part(menu-summary),
     :where(& > menu-view)::part(menu-summary) {
@@ -54,6 +53,18 @@
 
     > button {
       @include mixins.takeover-button-slots;
+
+      // [tint] &,
+      // &[tint] {
+      //   :where(&) {
+      //     // NOTE: Make everything inside prominent buttons white
+      //     --secondary: var(--btntext);
+      //     --blue: var(--btntext);
+
+      //     --accentColorEffective: var(--btntext);
+      //     --accentColor: var(--btntext);
+      //   }
+      // }
     }
 
     // NOTE: add paddings to labels w/ text in toolbar items
@@ -75,86 +86,9 @@
     //   }
     // }
   }
-
-  // tool-bar-item[slot],
-  // tool-bar-item-group {
-  // @media (prefers-reduced-motion: no-preference) {
-  //   transition:
-  //     display var(--menu-animation-duration) allow-discrete ease-out,
-  //     overlay var(--menu-animation-duration) allow-discrete ease-out,
-  //     transform var(--menu-animation-duration) allow-discrete ease-out;
-  //   will-change: transform, overlay, display;
-  // }
-  // }
-
-  // tool-bar-item {
-  // min-height: var(--toolbar-cell-min-size);
-  // min-width: var(--toolbar-cell-min-size);
-  // }
 }
 
-// @layer #{vars.$colors-layer} {
-// sidebar-toggle > button,
-// tool-bar-item > button,
-// tool-bar-item > input,
-// [is='tab-item'],
-// // list-view > button,
-// menu-view > button,
-// [is='disclosure-group'] > button,
-// [is='disclosure-group'] > summary {
-//   &:not(:disabled):not([readonly]) {
-//     :where(&) {
-//       @include mixins.add-focus-visible-state {
-//         --toolbaritemface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
-//       }
-//     }
-//   }
-// }
-
-// menu-view {
-// @include mixins.add-focus-visible-state('::part(menu-summary)') {
-//   --toolbaritemface: var(--toolbaritemhighlightface,); //light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
-// }
-// @include mixins.add-hover-state('::part(menu-summary)') {
-//   --toolbaritemface: var(--toolbaritemhighlightface,); //light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
-// }
-// }
-
-// list-view > button,
-// [is='form-view'] > button {
-//   &:not(:disabled):not([readonly]) {
-//     :where(&) {
-//       --toolbaritempadistart: 0.3rem;
-//       --toolbaritempadbstart: 0.3rem;
-//     }
-//   }
-// }
-// }
-
 @layer #{vars.$ui-layer} {
-  // sidebar-toggle > button,
-  // tool-bar-item > button,
-  // tool-bar-item > input,
-  // [is='tab-item'],
-  // // list-view > button,
-  // menu-view > button,
-  // [is='disclosure-group'] > summary,
-  // [is='disclosure-group'] > button {
-  //   // &:not(:disabled):not([readonly]) {
-  //   //   :where(&) {
-  //   @include mixins.add-active-state {
-  //     --toolbaritemface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
-  //   }
-  //   //   }
-  //   // }
-  // }
-
-  // menu-view {
-  //   @include mixins.add-active-state('::part(menu-summary)') {
-  //     --toolbaritemface: var(--toolbaritemactiveface,); //light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
-  //   }
-  // }
-
   :where(tool-bar-item[slot]:has(menu-view[open])),
   :where(tool-bar-item-group:has(> tool-bar-item menu-view[open])) {
     --toolbar-cell-scale: var(--menu-host-offscreen-transform);