@swiftwc/ui 0.0.0-dev.24 → 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/components/navigation-title.js

@@ -34,8 +34,8 @@ export class NavigationTitle extends HTMLElement {
     }
     #render = (title, subtitle) => {
         const el = this.querySelector(':scope>:not([slot])') ??
-            this.appendChild($(`<navigation-large-title><v-stack spacing="0" alignment="fill" slot="top-bar-principal"><label-view line-limit="1" truncation-mode="tail" font="headline"></label-view><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></v-stack></navigation-large-title>`, '>1')), vStack = el.querySelector(':scope>v-stack') ??
-            el.appendChild($(`<v-stack spacing="0" alignment="fill" slot="top-bar-principal"><label-view line-limit="1" truncation-mode="tail" font="headline"></label-view><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></v-stack>`, '>1'));
+            this.appendChild($(`<navigation-large-title><v-stack spacing="0" alignment="fill"><label-view line-limit="1" truncation-mode="tail" font="headline"></label-view><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></v-stack></navigation-large-title>`, '>1')), vStack = el.querySelector(':scope>v-stack') ??
+            el.appendChild($(`<v-stack spacing="0" alignment="fill"><label-view line-limit="1" truncation-mode="tail" font="headline"></label-view><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></v-stack>`, '>1'));
         let titleLabel = vStack.querySelector(':scope>label-view:nth-child(1)');
         if (title) {
             titleLabel ??= vStack.appendChild($(`<label-view line-limit="1" truncation-mode="tail" font="headline"></label-view>`, '>1'));

package/generated/css/index.css

@@ -2264,6 +2264,12 @@
     --accentColor5: var(--red5);
   }
 }
+@layer sw-colors {
+  [is=bordered-prominent-button] {
+    --secondary: var(--btntext);
+    --blue: var(--btntext);
+  }
+}
 @layer sw-utils {
   :where([is=bordered-prominent-button]) {
     text-align: center;
@@ -2362,6 +2368,12 @@
     --accentColor5: var(--red5);
   }
 }
+@layer sw-colors {
+  [is=glass-prominent-button] {
+    --secondary: var(--btntext);
+    --blue: var(--btntext);
+  }
+}
 @layer sw-utils {
   :where([is=glass-prominent-button]) {
     text-align: center;
@@ -2478,12 +2490,14 @@
     font-size: var(--label--titlestack-font-size, );
     line-height: var(--label--titlestack-line-height, );
     font-weight: var(--label--titlestack-font-weight, );
+    display: var(--label--titlestack-display, none);
   }
   label-view > [slot=image] {
     aspect-ratio: 1/1;
     inline-size: var(--label-imagestack-fontsize);
     block-size: var(--label-imagestack-fontsize);
     font-size: var(--label-imagestack-fontsize);
+    display: var(--label--iconstack-display, none);
   }
   @supports (x: if(else:red)) {
     :where(label-view) {
@@ -2508,17 +2522,25 @@
           style(--label-style: title-and-icon): if(style(--label-flow: vertical): auto minmax(0, 1fr) ; else: minmax(0, 1fr) ;) ;
           else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): if(style(--label-flow: vertical): auto minmax(0, 1fr) ; else: minmax(0, 1fr) ;) ; else: minmax(0, 1fr) ;) ;
       );
+      --label--iconstack-display: if(
+        style(--label-style: icon-only): grid ; style(--label-style: title-only): none ; style(--label-style: title-and-icon): grid ; else: if(style(--label--has-icon: yes): grid ; else: none;) ;
+      );
+      --label--titlestack-display: if(
+        style(--label-style: icon-only): none ; style(--label-style: title-only): grid ; style(--label-style: title-and-icon): grid ; else: if(style(--label--has-title: yes): grid ; else: none;) ;
+      );
     }
   }
   @supports not (x: if(else:red)) {
     @container style(--label-style: icon-only) {
       :where(label-view:not([label-style])) {
         --label-style: icon-only;
+        --label--iconstack-display: grid;
       }
     }
     @container style(--label-style: title-only) {
       :where(label-view:not([label-style])) {
         --label-style: title-only;
+        --label--titlestack-display: grid;
       }
     }
     @container style(--label-style: title-and-icon) {
@@ -2528,13 +2550,17 @@
         --label--host-grid-template-rows: minmax(0, 1fr);
         --label--host-align-items: center;
         --label--host-justify-items: normal;
+        --label--iconstack-display: grid;
+        --label--titlestack-display: grid;
       }
     }
     :where(label-view[label-style=icon-only]) {
       --label-style: icon-only;
+      --label--iconstack-display: grid;
     }
     :where(label-view[label-style=title-only]) {
       --label-style: title-only;
+      --label--titlestack-display: grid;
     }
     :where(label-view[label-style=title-and-icon]) {
       --label-style: title-and-icon;
@@ -2542,6 +2568,8 @@
       --label--host-grid-template-rows: minmax(0, 1fr);
       --label--host-align-items: center;
       --label--host-justify-items: normal;
+      --label--iconstack-display: grid;
+      --label--titlestack-display: grid;
     }
     @container not style(--label-style) {
       :where(label-view:not([label-style]):has(> [slot=image]):has(> :not([slot]))) {
@@ -2550,22 +2578,28 @@
         --label--host-grid-template-rows: minmax(0, 1fr);
         --label--host-align-items: center;
         --label--host-justify-items: normal;
+        --label--iconstack-display: grid;
+        --label--titlestack-display: grid;
       }
       :where(label-view:not([label-style]):has(> [slot=image]):not(:has(> :not([slot])))) {
         --label-style: icon-only;
+        --label--iconstack-display: grid;
       }
       :where(label-view:not([label-style]):has(> :not([slot])):not(:has(> [slot=image]))) {
         --label-style: title-only;
+        --label--titlestack-display: grid;
       }
     }
     @container style(--label-style: icon-only) and style(--label-flow: vertical) {
       :where(label-view:not([label-style])) {
         --label-style: icon-only;
+        --label--iconstack-display: grid;
       }
     }
     @container style(--label-style: title-only) and style(--label-flow: vertical) {
       :where(label-view:not([label-style])) {
         --label-style: title-only;
+        --label--titlestack-display: grid;
       }
     }
     @container style(--label-style: title-and-icon) and style(--label-flow: vertical) {
@@ -2575,14 +2609,18 @@
         --label--host-grid-template-rows: auto minmax(0, 1fr);
         --label--host-align-items: normal;
         --label--host-justify-items: center;
+        --label--iconstack-display: grid;
+        --label--titlestack-display: grid;
       }
     }
     @container style(--label-flow: vertical) {
       :where(label-view[label-style=icon-only]) {
         --label-style: icon-only;
+        --label--iconstack-display: grid;
       }
       :where(label-view[label-style=title-only]) {
         --label-style: title-only;
+        --label--titlestack-display: grid;
       }
       :where(label-view[label-style=title-and-icon]) {
         --label-style: title-and-icon;
@@ -2590,6 +2628,8 @@
         --label--host-grid-template-rows: auto minmax(0, 1fr);
         --label--host-align-items: normal;
         --label--host-justify-items: center;
+        --label--iconstack-display: grid;
+        --label--titlestack-display: grid;
       }
     }
     @container (not style(--label-style)) and style(--label-flow: vertical) {
@@ -2599,12 +2639,16 @@
         --label--host-grid-template-rows: auto minmax(0, 1fr);
         --label--host-align-items: normal;
         --label--host-justify-items: center;
+        --label--iconstack-display: grid;
+        --label--titlestack-display: grid;
       }
       :where(label-view:not([label-style]):has(> [slot=image]):not(:has(> :not([slot])))) {
         --label-style: icon-only;
+        --label--iconstack-display: grid;
       }
       :where(label-view:not([label-style]):has(> :not([slot])):not(:has(> [slot=image]))) {
         --label-style: title-only;
+        --label--titlestack-display: grid;
       }
     }
     @container style(--label-line-limit: 1) {
@@ -4953,9 +4997,6 @@
     --accentColor4: var(--gray4);
     --accentColor5: var(--gray5);
   }
-  :where([tint=gray][is=bordered-button]) {
-    --accentSubtle: var(--gray4);
-  }
   :where([tint=blue]) {
     --accentColorEffective: var(--blue);
     --accentColorEffective4: var(--blue4);
@@ -4965,9 +5006,6 @@
     --accentColor4: var(--blue4);
     --accentColor5: var(--blue5);
   }
-  :where([tint=blue][is=bordered-button]) {
-    --accentSubtle: var(--blue4);
-  }
   :where([tint=red]) {
     --accentColorEffective: var(--red);
     --accentColorEffective4: var(--red4);
@@ -4977,9 +5015,6 @@
     --accentColor4: var(--red4);
     --accentColor5: var(--red5);
   }
-  :where([tint=red][is=bordered-button]) {
-    --accentSubtle: var(--red4);
-  }
 }
 @layer sw-utils {
   :where([frame\:width=infinity]) {
@@ -7759,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.24",
+  "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/_bordered-prominent-button.scss

@@ -1,5 +1,6 @@
 @use '../vars';
 @use '../placeholders';
+@use '../mixins';
 
 @layer #{vars.$components-layer} {
   [is='bordered-prominent-button'] {
@@ -34,6 +35,13 @@
   }
 }
 
+@layer #{vars.$colors-layer} {
+  [is='bordered-prominent-button'] {
+    --secondary: var(--btntext);
+    --blue: var(--btntext);
+  }
+}
+
 @layer #{vars.$utils-layer} {
   [is='bordered-prominent-button'] {
     :where(&) {

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

@@ -40,6 +40,13 @@
   }
 }
 
+@layer #{vars.$colors-layer} {
+  [is='glass-prominent-button'] {
+    --secondary: var(--btntext);
+    --blue: var(--btntext);
+  }
+}
+
 @layer #{vars.$utils-layer} {
   [is='glass-prominent-button'] {
     :where(&) {

package/scss/components/_label-view.scss

@@ -79,10 +79,17 @@ $label-line-ifs: (
     --label--host-grid-template-rows: minmax(0, 1fr);
     --label--host-align-items: center;
     --label--host-justify-items: normal;
+
+    --label--iconstack-display: grid;
+    --label--titlestack-display: grid;
   } @else if $label-style == h-icon-only {
     --label-style: icon-only;
+
+    --label--iconstack-display: grid;
   } @else if $label-style == h-title-only {
     --label-style: title-only;
+
+    --label--titlestack-display: grid;
   } @else if $label-style == v-title-and-icon {
     --label-style: title-and-icon;
 
@@ -90,10 +97,17 @@ $label-line-ifs: (
     --label--host-grid-template-rows: auto minmax(0, 1fr);
     --label--host-align-items: normal;
     --label--host-justify-items: center;
+
+    --label--iconstack-display: grid;
+    --label--titlestack-display: grid;
   } @else if $label-style == v-icon-only {
     --label-style: icon-only;
+
+    --label--iconstack-display: grid;
   } @else if $label-style == v-title-only {
     --label-style: title-only;
+
+    --label--titlestack-display: grid;
   }
 }
 
@@ -182,6 +196,8 @@ $label-line-ifs: (
         line-height: var(--label--titlestack-line-height,);
 
         font-weight: var(--label--titlestack-font-weight,);
+
+        display: var(--label--titlestack-display, none);
       }
     }
 
@@ -192,6 +208,8 @@ $label-line-ifs: (
       block-size: var(--label-imagestack-fontsize);
 
       font-size: var(--label-imagestack-fontsize);
+
+      display: var(--label--iconstack-display, none);
     }
 
     // vars
@@ -230,6 +248,14 @@ $label-line-ifs: (
             style(--label-style: title-and-icon): if(style(--label-flow: vertical): auto minmax(0, 1fr) ; else: minmax(0, 1fr) ;) ;
             else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): if(style(--label-flow: vertical): auto minmax(0, 1fr) ; else: minmax(0, 1fr) ;) ; else: minmax(0, 1fr) ;) ;
         );
+
+        --label--iconstack-display: if(
+          style(--label-style: icon-only): grid ; style(--label-style: title-only): none ; style(--label-style: title-and-icon): grid ; else: if(style(--label--has-icon: yes): grid ; else: none;) ;
+        );
+
+        --label--titlestack-display: if(
+          style(--label-style: icon-only): none ; style(--label-style: title-only): grid ; style(--label-style: title-and-icon): grid ; else: if(style(--label--has-title: yes): grid ; else: none;) ;
+        );
       }
     }
 

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);

package/scss/utils/_index.scss

@@ -35,10 +35,10 @@
       --accentColor5: var(--gray5);
     }
 
-    :where(&[is='bordered-button']) {
-      // --accentEmphasis: light-dark(color-mix(in oklch, var(--gray) 50%, var(--black)), color-mix(in oklch, var(--gray) 50%, var(--white)));
-      --accentSubtle: var(--gray4);
-    }
+    // :where(&[is='bordered-button']) {
+    //   // --accentEmphasis: light-dark(color-mix(in oklch, var(--gray) 50%, var(--black)), color-mix(in oklch, var(--gray) 50%, var(--white)));
+    //   --accentSubtle: var(--gray4);
+    // }
   }
 
   [tint='blue'] {
@@ -53,9 +53,9 @@
       --accentColor5: var(--blue5);
     }
 
-    :where(&[is='bordered-button']) {
-      --accentSubtle: var(--blue4);
-    }
+    // :where(&[is='bordered-button']) {
+    //   --accentSubtle: var(--blue4);
+    // }
   }
 
   [tint='red'] {
@@ -70,8 +70,8 @@
       --accentColor5: var(--red5);
     }
 
-    :where(&[is='bordered-button']) {
-      --accentSubtle: var(--red4);
-    }
+    // :where(&[is='bordered-button']) {
+    //   --accentSubtle: var(--red4);
+    // }
   }
 }