@swiftwc/ui 0.0.0-dev.27 → 0.0.0-dev.29

package/generated/client/index.d.ts

@@ -19,7 +19,7 @@ export declare const alert: (title?: string, message?: string, actions?: {
 }[], options?: {
     titleVisibility?: boolean;
 }) => Promise<void>;
-export declare const confirmationDialog: (trigger: HTMLElement, title: string, actions?: {
+export declare const confirmationDialog: (trigger: HTMLElement, title: string, message?: string, actions?: {
     label?: string;
     image?: string;
     role?: string;

package/generated/client/index.js

@@ -356,15 +356,20 @@ export const alert = async (title, message, actions, options) => {
         return promise;
     });
 };
-export const confirmationDialog = async (trigger, title, actions, options) => {
+export const confirmationDialog = async (trigger, title, message, actions, options) => {
     const newAnchorName = `--confirmation-dialog-${self.crypto.randomUUID()}`;
-    const dialog = $(`<dialog is="confirmation-dialog"></dialog>`, '>1');
+    const dialog = $(`<dialog is="confirmation-dialog"></dialog>`, '>1'), vStack = dialog.querySelector(':scope>v-stack') ?? dialog.appendChild($(`<v-stack spacing="1" alignment="fill"></v-stack>`, '>1'));
     trigger.style.setProperty('anchor-name', newAnchorName, 'important'); //$.prop('anchor-name', newAnchorName, trigger, 'important')
     dialog.style.setProperty('position-anchor', newAnchorName); //$.prop('position-anchor', newAnchorName, dialog)
     if (title && false !== options?.titleVisibility) {
-        const label = $(`<label-view></label-view>`, '>1');
+        const label = $(`<label-view font="headline"></label-view>`, '>1');
         label.setAttribute('title', title);
-        dialog.insertAdjacentElement('beforeend', label);
+        vStack.insertAdjacentElement('beforeend', label);
+    }
+    if (message && false !== options?.titleVisibility) {
+        const label = $(`<label-view foreground="secondary" font="callout"></label-view>`, '>1');
+        label.setAttribute('title', message);
+        vStack.insertAdjacentElement('beforeend', label);
     }
     for (const [index, action] of (actions ?? []).entries()) {
         const btn = $(`<button type="button" tabindex="0" is="bordered-button"></button>`, '>1');

package/generated/components/tool-bar-item.js

@@ -43,7 +43,7 @@ export class ToolBarItem extends HTMLElement {
             case 'data-previous-slot':
             case 'title-key':
                 const target = this.querySelector(':scope>button'), nv = this.getAttribute('data-previous-slot') ?? this.getAttribute('slot') ?? '';
-                if (target && ['confirmation-action'].includes(nv))
+                if (target && ['confirmation-action', 'cancellation-action'].includes(nv))
                     Snapshot.waitReady.then(() => {
                         buttonRole(target, nv, this.getAttribute('title-key'));
                     });

package/generated/css/index.css

@@ -874,6 +874,7 @@
   }
   :where([is=glass-prominent-button] > [slot], [is=glass-button] > [slot], [is=bordered-prominent-button] > [slot], [is=bordered-button] > [slot], [is=borderless-button] > [slot], [is=plain-button] > [slot]) {
     position: absolute;
+    inset: 0;
     visibility: collapse;
   }
   :where([is=glass-prominent-button] > [slot=overlay], [is=glass-button] > [slot=overlay], [is=bordered-prominent-button] > [slot=overlay], [is=bordered-button] > [slot=overlay], [is=borderless-button] > [slot=overlay], [is=plain-button] > [slot=overlay]) {
@@ -1695,8 +1696,8 @@
     color: var(--text, );
     touch-action: none;
     position: fixed;
-    inline-size: max-content;
-    block-size: max-content;
+    inline-size: fit-content;
+    block-size: fit-content;
     height: auto;
     min-inline-size: min(20rem, 80svw);
     max-inline-size: var(--confirmation--dialog-max-inline-size, );
@@ -1712,12 +1713,12 @@
     box-shadow: var(--menu-popover-box-shadow, );
     padding-block: 1rem;
     padding-inline: 1rem;
-    gap: 0.5rem;
+    gap: 1rem;
     --confirmation--dialog-scale: scale(0);
   }
   :where([is=confirmation-dialog][open]) {
-    --confirmation--dialog-max-inline-size: 100vw;
-    --confirmation--dialog-max-block-size: 100vh;
+    --confirmation--dialog-max-inline-size: min(20rem, 80vw);
+    --confirmation--dialog-max-block-size: 80vh;
     --confirmation--dialog-margin-block: max(env(safe-area-inset-top), var(--menu-spacing)) max(env(safe-area-inset-bottom), var(--menu-spacing));
     --confirmation--dialog-margin-inline: max(env(safe-area-inset-left), var(--menu-spacing)) max(env(safe-area-inset-right), var(--menu-spacing));
     --confirmation--dialog-scale: scale(1);
@@ -2117,6 +2118,7 @@
   }
   :where(tool-bar-item > button > [slot]) {
     position: absolute;
+    inset: 0;
     visibility: collapse;
   }
   :where(tool-bar-item > button > [slot=overlay]) {
@@ -2189,6 +2191,15 @@
     --accentColor4: var(--red4);
     --accentColor5: var(--red5);
   }
+  :where([is=borderless-button][role=confirm]) {
+    --accentColorEffective: var(--blue);
+    --accentColorEffective4: var(--blue4);
+    --accentColor: var(--blue);
+    --accentColor2: var(--blue2);
+    --accentColor3: var(--blue3);
+    --accentColor4: var(--blue4);
+    --accentColor5: var(--blue5);
+  }
 }
 @layer sw-utils {
   :where([is=borderless-button]) {
@@ -2240,6 +2251,15 @@
     --accentColor4: var(--red4);
     --accentColor5: var(--red5);
   }
+  :where([is=bordered-button][role=confirm]) {
+    --accentColorEffective: var(--blue);
+    --accentColorEffective4: var(--blue4);
+    --accentColor: var(--blue);
+    --accentColor2: var(--blue2);
+    --accentColor3: var(--blue3);
+    --accentColor4: var(--blue4);
+    --accentColor5: var(--blue5);
+  }
 }
 @layer sw-utils {
   :where([is=bordered-button]) {
@@ -2286,9 +2306,18 @@
     --accentColor4: var(--red4);
     --accentColor5: var(--red5);
   }
+  :where([is=bordered-prominent-button][role=confirm]) {
+    --accentColorEffective: var(--blue);
+    --accentColorEffective4: var(--blue4);
+    --accentColor: var(--blue);
+    --accentColor2: var(--blue2);
+    --accentColor3: var(--blue3);
+    --accentColor4: var(--blue4);
+    --accentColor5: var(--blue5);
+  }
 }
 @layer sw-colors {
-  [is=bordered-prominent-button] {
+  :where([is=bordered-prominent-button] > *) {
     --secondary: var(--btntext);
     --blue: var(--btntext);
   }
@@ -2341,6 +2370,15 @@
     --accentColor4: var(--red4);
     --accentColor5: var(--red5);
   }
+  :where([is=glass-button][role=confirm]) {
+    --accentColorEffective: var(--blue);
+    --accentColorEffective4: var(--blue4);
+    --accentColor: var(--blue);
+    --accentColor2: var(--blue2);
+    --accentColor3: var(--blue3);
+    --accentColor4: var(--blue4);
+    --accentColor5: var(--blue5);
+  }
 }
 @layer sw-utils {
   :where([is=glass-button]) {
@@ -2390,9 +2428,18 @@
     --accentColor4: var(--red4);
     --accentColor5: var(--red5);
   }
+  :where([is=glass-prominent-button][role=confirm]) {
+    --accentColorEffective: var(--blue);
+    --accentColorEffective4: var(--blue4);
+    --accentColor: var(--blue);
+    --accentColor2: var(--blue2);
+    --accentColor3: var(--blue3);
+    --accentColor4: var(--blue4);
+    --accentColor5: var(--blue5);
+  }
 }
 @layer sw-colors {
-  [is=glass-prominent-button] {
+  :where([is=glass-prominent-button] > *) {
     --secondary: var(--btntext);
     --blue: var(--btntext);
   }

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

@@ -5,9 +5,9 @@ declare const _default: () => {
         readonly Description: "Ελέγξτε την ορθογραφία ή δοκιμάστε μια νέα αναζήτηση.";
     };
     readonly ButtonRole: {
-        readonly Cancel: "Cancel";
-        readonly Close: "Close";
-        readonly Confirm: "Confirm";
+        readonly Cancel: "Ακύρωση";
+        readonly Close: "Κλείσιμο";
+        readonly Confirm: "Τέλος";
         readonly Destructive: "Διαγραφή";
         readonly OK: "OK";
     };

package/generated/i18n/locales/el.js

@@ -6,9 +6,9 @@ export default defineTranslations(() => ({
         Description: 'Ελέγξτε την ορθογραφία ή δοκιμάστε μια νέα αναζήτηση.',
     },
     ButtonRole: {
-        Cancel: 'Cancel',
-        Close: 'Close',
-        Confirm: 'Confirm',
+        Cancel: 'Ακύρωση',
+        Close: 'Κλείσιμο',
+        Confirm: 'Τέλος',
         Destructive: 'Διαγραφή',
         OK: 'OK',
     },

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

@@ -32,6 +32,10 @@ function renderPlaceholder(el, role, titleKey) {
                 label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Confirm);
                 label.setAttribute('system-image', Snapshot.config['confirm-button-icon']);
                 break;
+            case 'cancellation-action':
+                label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Cancel);
+                label.setAttribute('system-image', Snapshot.config['cancel-button-icon']);
+                break;
             case 'destructive':
                 label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Destructive);
                 label.setAttribute('system-image', Snapshot.config['delete-button-icon']);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.27",
+  "version": "0.0.0-dev.29",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -71,8 +71,8 @@
     "format:check": "prettier . --check",
     "format:write": "prettier . --write",
     "test": "vitest --dom",
-    "predeploy": "rm -rf generated",
-    "deploy": "npm run build:ts && npm run build:scss",
+    "prepackage": "rm -rf generated",
+    "package": "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/_bordered-button.scss

@@ -35,6 +35,16 @@
       --accentColor4: var(--red4);
       --accentColor5: var(--red5);
     }
+    :where(&[role='confirm']) {
+      --accentColorEffective: var(--blue);
+      --accentColorEffective4: var(--blue4);
+
+      --accentColor: var(--blue);
+      --accentColor2: var(--blue2);
+      --accentColor3: var(--blue3);
+      --accentColor4: var(--blue4);
+      --accentColor5: var(--blue5);
+    }
   }
 }
 

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

@@ -32,13 +32,25 @@
       --accentColor4: var(--red4);
       --accentColor5: var(--red5);
     }
+    :where(&[role='confirm']) {
+      --accentColorEffective: var(--blue);
+      --accentColorEffective4: var(--blue4);
+
+      --accentColor: var(--blue);
+      --accentColor2: var(--blue2);
+      --accentColor3: var(--blue3);
+      --accentColor4: var(--blue4);
+      --accentColor5: var(--blue5);
+    }
   }
 }
 
 @layer #{vars.$colors-layer} {
-  [is='bordered-prominent-button'] {
-    --secondary: var(--btntext);
-    --blue: var(--btntext);
+  [is='bordered-prominent-button'] > * {
+    :where(&) {
+      --secondary: var(--btntext);
+      --blue: var(--btntext);
+    }
   }
 }
 

package/scss/components/_borderless-button.scss

@@ -22,6 +22,16 @@
       --accentColor4: var(--red4);
       --accentColor5: var(--red5);
     }
+    :where(&[role='confirm']) {
+      --accentColorEffective: var(--blue);
+      --accentColorEffective4: var(--blue4);
+
+      --accentColor: var(--blue);
+      --accentColor2: var(--blue2);
+      --accentColor3: var(--blue3);
+      --accentColor4: var(--blue4);
+      --accentColor5: var(--blue5);
+    }
   }
 }
 

package/scss/components/_confirmation-dialog.scss

@@ -12,8 +12,8 @@
 
       position: fixed;
 
-      inline-size: max-content;
-      block-size: max-content;
+      inline-size: fit-content;
+      block-size: fit-content;
       height: auto; // safari
 
       min-inline-size: min(20rem, 80svw);
@@ -37,7 +37,7 @@
 
       padding-block: 1rem;
       padding-inline: 1rem;
-      gap: 0.5rem;
+      gap: 1rem;
 
       // finally
       --confirmation--dialog-scale: scale(0);
@@ -45,8 +45,8 @@
 
     &[open] {
       :where(&) {
-        --confirmation--dialog-max-inline-size: 100vw;
-        --confirmation--dialog-max-block-size: 100vh;
+        --confirmation--dialog-max-inline-size: min(20rem, 80vw);
+        --confirmation--dialog-max-block-size: 80vh;
 
         --confirmation--dialog-margin-block: max(env(safe-area-inset-top), var(--menu-spacing)) max(env(safe-area-inset-bottom), var(--menu-spacing));
         --confirmation--dialog-margin-inline: max(env(safe-area-inset-left), var(--menu-spacing)) max(env(safe-area-inset-right), var(--menu-spacing));

package/scss/components/_glass-button.scss

@@ -37,6 +37,16 @@
       --accentColor4: var(--red4);
       --accentColor5: var(--red5);
     }
+    :where(&[role='confirm']) {
+      --accentColorEffective: var(--blue);
+      --accentColorEffective4: var(--blue4);
+
+      --accentColor: var(--blue);
+      --accentColor2: var(--blue2);
+      --accentColor3: var(--blue3);
+      --accentColor4: var(--blue4);
+      --accentColor5: var(--blue5);
+    }
   }
 }
 

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

@@ -37,13 +37,25 @@
       --accentColor4: var(--red4);
       --accentColor5: var(--red5);
     }
+    :where(&[role='confirm']) {
+      --accentColorEffective: var(--blue);
+      --accentColorEffective4: var(--blue4);
+
+      --accentColor: var(--blue);
+      --accentColor2: var(--blue2);
+      --accentColor3: var(--blue3);
+      --accentColor4: var(--blue4);
+      --accentColor5: var(--blue5);
+    }
   }
 }
 
 @layer #{vars.$colors-layer} {
-  [is='glass-prominent-button'] {
-    --secondary: var(--btntext);
-    --blue: var(--btntext);
+  [is='glass-prominent-button'] > * {
+    :where(&) {
+      --secondary: var(--btntext);
+      --blue: var(--btntext);
+    }
   }
 }
 

package/scss/mixins/_button.scss

@@ -4,6 +4,8 @@
       // take over NOTE: NO other propsm they break grids!! KISS pos+visibility+opacity
       position: absolute;
 
+      inset: 0;
+
       visibility: collapse;
     }
   }

package/scss/transitions/_confirmation-dialog.scss

@@ -5,12 +5,6 @@
   @media (prefers-reduced-motion: no-preference) {
     [is='confirmation-dialog'] {
       :where(&) {
-        // transition:
-        //   block-size var(--menu-animation-duration) allow-discrete ease-out,
-        //   inline-size var(--menu-animation-duration) allow-discrete ease-out,
-        //   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;
         transition: all var(--touchglass-transition-duration) allow-discrete ease-out;
         // will-change: block-size, inline-size, transform, overlay, display;
       }