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

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

@@ -29,6 +29,12 @@
       --toolbaritemradiusbl: var(--toolbar-cell-border-radius);
       --toolbaritemradiusbr: var(--toolbar-cell-border-radius);
       --toolbaritemborder: 0;
+
+      --menusummaryradiustl: var(--toolbar-cell-border-radius);
+      --menusummaryradiustr: var(--toolbar-cell-border-radius);
+      --menusummaryradiusbl: var(--toolbar-cell-border-radius);
+      --menusummaryradiusbr: var(--toolbar-cell-border-radius);
+      --menusummaryborder: 0;
     }
 
     :where(&:has([disabled])) {
@@ -45,6 +51,29 @@
 
       place-content: center;
     }
+
+    > button {
+      @include mixins.takeover-button-slots;
+    }
+
+    // NOTE: add paddings to labels w/ text in toolbar items
+    > button:has(> label-view > :not([slot])),
+    > picker-view > menu-view:has(> label-view > :not([slot])),
+    > menu-view:has(> label-view > :not([slot])) {
+      :where(& > label-view) {
+        --label-padding-inline: 0.5rem;
+      }
+    }
+
+    // NOTE: on fine screens, toolbar icons are a little smaller
+    // @media (pointer: fine) {
+    //   > button > label-view,
+    //   > menu-view > label-view {
+    //     :where(&) {
+    //       --label-image-size: 1.8;
+    //     }
+    //   }
+    // }
   }
 
   // tool-bar-item[slot],
@@ -64,54 +93,43 @@
   // }
 }
 
-@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));
-    }
-
-    // &:not(:disabled):not([readonly]) {
-    //   > button {
-    //     :where(&) {
-    //       --toolbaritempadistart: 0.3rem;
-    //       --toolbaritempadiend: 0.3rem;
-    //       --toolbaritempadbstart: 0.3rem;
-    //       --toolbaritempadbend: 0.3rem;
-    //     }
-    //   }
-    // }
-  }
-
-  // list-view > button,
-  // [is='form-view'] > button {
-  //   &:not(:disabled):not([readonly]) {
-  //     :where(&) {
-  //       --toolbaritempadistart: 0.3rem;
-  //       --toolbaritempadbstart: 0.3rem;
-  //     }
-  //   }
-  // }
-}
+// @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,
@@ -131,11 +149,11 @@
   //   // }
   // }
 
-  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));
-    }
-  }
+  // 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])) {

package/scss/components/_tool-bar.scss

@@ -108,6 +108,31 @@
         --safe-area-inset-bottom: 0px;
       }
     }
+
+    // FIXME: Add live tooltip
+    // NOTE: By default top bar items with icons, prefer only icon to be shown, (except if they define/force w/ labelStyle)
+    > [slot^='top-bar-'],
+    > [slot='cancellation-action'],
+    > [slot='primary-action'],
+    > [slot='confirmation-action'],
+    > [slot='destructive-action'] {
+      // > label-view,
+      > button:has(> label-view > [slot='image']) {
+        :where(&) {
+          --label-style: icon-only;
+        }
+      }
+    }
+    // NOTE: By default bottom bar items with icons on iphone, prefer only icon to be shown, (except if they define/force w/ labelStyle)
+    @media (pointer: coarse) {
+      > [slot^='bottom-bar-'] {
+        > button:has(> label-view > [slot='image']) {
+          :where(&) {
+            --label-style: icon-only;
+          }
+        }
+      }
+    }
   }
 }
 

package/scss/mixins/_button.scss

@@ -0,0 +1,42 @@
+@mixin takeover-button-slots {
+  > [slot] {
+    :where(&) {
+      // take over NOTE: NO other propsm they break grids!! KISS pos+visibility+opacity
+      position: absolute;
+
+      visibility: collapse;
+    }
+  }
+  > [slot='overlay'] {
+    :where(&) {
+      visibility: visible;
+    }
+  }
+  &:not(:has(> :not([slot]))) > [slot='placeholder'] {
+    :where(&) {
+      position: relative;
+
+      visibility: visible;
+    }
+  }
+
+  &:has(> [slot='overlay']) {
+    > *:not([slot='overlay']) {
+      :where(&) {
+        opacity: 0;
+      }
+    }
+
+    > [slot='overlay'] {
+      :where(&) {
+        @media (prefers-reduced-motion: no-preference) {
+          transition: opacity ease-out 200ms;
+        }
+
+        @starting-style {
+          opacity: 0;
+        }
+      }
+    }
+  }
+}

package/scss/mixins/_color.scss

@@ -0,0 +1,16 @@
+@use '../vars';
+@use '../functions';
+@use 'sass:string';
+@use 'sass:map';
+@use 'sass:list';
+
+@mixin wire-tinted-glass($prop) {
+  --#{$prop}face: light-dark(var(--accentColor), var(--accentColor));
+  --#{$prop}text: 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));
+
+  --#{$prop}highlightface: 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));
+  --#{$prop}highlighttext: 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));
+
+  --#{$prop}activeface: 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));
+  --#{$prop}activetext: 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));
+}

package/scss/mixins/_index.scss

@@ -360,7 +360,7 @@
     $result: string.slice($result, 1, string.length($result) - 1);
     $final-result: functions.str-replace($result, 'minmax(0,1fr)', 'spacer');
     @debug $final-result, $template;
-    :where(&[template='#{$result}']) {
+    :where(&[template='#{$final-result}']) {
       #{$prop}: $template;
     }
   }

package/scss/placeholders/_buttons.scss

@@ -13,10 +13,10 @@
       // SECTION: componentize
       @include mixins.componentize(btn);
 
-      --btnpadistart: var(--regular-btn-padding);
-      --btnpadiend: var(--regular-btn-padding);
-      --btnpadbstart: var(--regular-btn-padding);
-      --btnpadbend: var(--regular-btn-padding);
+      // --btnpadistart: var(--regular-btn-padding);
+      // --btnpadiend: var(--regular-btn-padding);
+      // --btnpadbstart: var(--regular-btn-padding);
+      // --btnpadbend: var(--regular-btn-padding);
 
       --btnradiustl: var(--regular-btn-border-radius);
       --btnradiustr: var(--regular-btn-border-radius);
@@ -24,33 +24,16 @@
       --btnradiusbr: var(--regular-btn-border-radius);
     }
 
-    &:has(> [slot='overlay']) {
-      :where(& > *:not([slot='overlay'])) {
-        opacity: 0;
-      }
-
-      :where(& > [slot='overlay']) {
-        position: absolute;
-
-        transition: opacity ease-out 200ms;
-
-        max-inline-size: 90%;
-        max-block-size: 90%;
-        border-radius: inherit;
-
-        @starting-style {
-          opacity: 0;
-        }
-      }
-    }
+    @include mixins.takeover-button-slots;
 
     @each $size, $media in vars.$button-sizes {
-      @if (regular != $size) {
-        :where(&[control-size='#{$size}']) {
-          --btnpadistart: var(--#{$size}-btn-padding);
-          --btnpadiend: var(--#{$size}-btn-padding);
-          --btnpadbstart: var(--#{$size}-btn-padding);
-          --btnpadbend: var(--#{$size}-btn-padding);
+      // @if (regular != $size) {
+      &[control-size='#{$size}'] {
+        :where(&) {
+          // --btnpadistart: var(--#{$size}-btn-padding);
+          // --btnpadiend: var(--#{$size}-btn-padding);
+          // --btnpadbstart: var(--#{$size}-btn-padding);
+          // --btnpadbend: var(--#{$size}-btn-padding);
 
           --btnradiustl: var(--#{$size}-btn-border-radius);
           --btnradiustr: var(--#{$size}-btn-border-radius);
@@ -58,6 +41,15 @@
           --btnradiusbr: var(--#{$size}-btn-border-radius);
         }
       }
+      // }
+    }
+
+    &[control-size='small'] {
+      --label-font: callout;
+    }
+
+    &[control-size='mini'] {
+      --label-font: caption;
     }
   }
 }
@@ -76,25 +68,25 @@
   }
 }
 
-@layer #{vars.$utils-layer} {
-  %button {
-    > [slot] {
-      :where(&) {
-        display: none;
-      }
-    }
-    &:has(> [slot='overlay']) {
-      :where(& > [slot='overlay']) {
-        display: grid;
-      }
-    }
-    &:not(:has(> :not([slot]))) > [slot='placeholder'] {
-      :where(&) {
-        display: grid;
-      }
-    }
-  }
-}
+// @layer #{vars.$utils-layer} {
+//   %button {
+//     > [slot] {
+//       :where(&) {
+//         position: absolute;
+//       }
+//     }
+//     // &:has(> [slot='overlay'] > [slot='overlay']) {
+//     //   :where(&) {
+//     // display: grid;
+//     //   }
+//     // }
+//     &:not(:has(> :not([slot]))) > [slot='placeholder'] {
+//       :where(&) {
+//         position: relative;
+//       }
+//     }
+//   }
+// }
 
 @layer #{vars.$ui-layer} {
   // SECTION: componentize

package/scss/transitions/_fine-tooltip.scss

@@ -0,0 +1,21 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  @media (prefers-reduced-motion: no-preference) {
+    fine-tooltip {
+      :where(&) {
+        transition:
+          opacity 150ms allow-discrete ease-out,
+          transform 150ms allow-discrete ease-out;
+        transition-delay: 200ms;
+        will-change: opacity, transform;
+      }
+
+      :where(&[closing]) {
+        transition-duration: 100ms;
+        transition-delay: 0ms;
+      }
+    }
+  }
+}

package/scss/transitions/_tab-bar.scss

@@ -3,11 +3,6 @@
 @layer #{vars.$transitions-layer} {
   @media (prefers-reduced-motion: no-preference) {
     [is='tab-bar'] {
-      // :where(&) {
-      //   transition: inset var(--sidebar-transition-duration) ease-out allow-discrete;
-      //   will-change: inset;
-      // }
-
       > [is='form-view'] {
         :where(&) {
           transition: transform var(--sidebar-transition-duration) ease-out allow-discrete;
@@ -17,3 +12,9 @@
     }
   }
 }
+
+@keyframes ipad_form_view_slide_up_offedge {
+  to {
+    opacity: 0;
+  }
+}

package/web-components.html-data/en.json

@@ -9,6 +9,7 @@
     },
     {
       "name": "bordered-button",
+      "description": "",
       "attributes": [
         {
           "name": "role"
@@ -17,6 +18,7 @@
     },
     {
       "name": "bordered-prominent-button",
+      "description": "",
       "attributes": [
         {
           "name": "role"
@@ -25,6 +27,7 @@
     },
     {
       "name": "borderless-button",
+      "description": "",
       "attributes": [
         {
           "name": "role"
@@ -101,11 +104,15 @@
         }
       ]
     },
+    {
+      "name": "fine-tooltip"
+    },
     {
       "name": "form-view"
     },
     {
       "name": "glass-button",
+      "description": "",
       "attributes": [
         {
           "name": "role"
@@ -114,6 +121,7 @@
     },
     {
       "name": "glass-prominent-button",
+      "description": "",
       "attributes": [
         {
           "name": "role"
@@ -218,12 +226,7 @@
       ]
     },
     {
-      "name": "sheet-view",
-      "attributes": [
-        {
-          "name": "fine-presentation-large-adaptation"
-        }
-      ]
+      "name": "sheet-view"
     },
     {
       "name": "sidebar-toggle"
@@ -294,30 +297,29 @@
       ]
     },
     {
-      "name": "tool-bar-item-group",
-      "attributes": [
-        {
-          "name": "preferred-fine-modal-placement"
-        }
-      ]
+      "name": "tool-bar-item-group"
     },
     {
       "name": "tool-bar-item",
       "attributes": [
         {
-          "name": "preferred-fine-modal-placement"
+          "name": "slot"
+        },
+        {
+          "name": "data-previous-slot"
         }
       ]
     },
     {
-      "name": "tool-bar"
+      "name": "tool-bar",
+      "description": ""
     },
     {
-      "name": "v-keyboard",
+      "name": "vkeyboard",
       "description": "Required component, must be BODY tag"
     },
     {
-      "name": "v-stack",
+      "name": "vstack",
       "description": "",
       "attributes": [
         {

package/generated/internal/utils/toolbar-repositioner.d.ts

@@ -1 +0,0 @@
-export default function (el: HTMLElement, evt: MediaQueryListEvent): void;

package/generated/internal/utils/toolbar-repositioner.js

@@ -1,12 +0,0 @@
-export default function (el, evt) {
-    if (evt.matches) {
-        const newSlot = el.getAttribute('preferred-fine-modal-placement') ?? 'bottom-bar-trailing';
-        if (el.slot !== newSlot)
-            el.dataset.previousSlot = el.slot; // save for later restoration if diff
-        el.slot = el.getAttribute('preferred-fine-modal-placement') ?? 'bottom-bar-trailing';
-    }
-    else if (el.dataset.previousSlot) {
-        el.slot = el.dataset.previousSlot ?? '';
-        delete el.dataset.previousSlot;
-    }
-}