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

package/scss/mixins/_index.scss

@@ -1,4 +1,5 @@
 @use '../vars';
+@use '../functions';
 @use 'sass:string';
 @use 'sass:map';
 @use 'sass:list';
@@ -349,6 +350,22 @@
   }
 }
 
+@mixin make-template($tokens, $prop) {
+  @each $template in $tokens {
+    $parts: string.split('#{$template}', ', ');
+    $result: '';
+    @each $part in $parts {
+      $result: $result + '#{$part},';
+    }
+    $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}']) {
+      #{$prop}: $template;
+    }
+  }
+}
+
 @mixin generate-color-tokens($tokens) {
   $media-variants: (
     base: '',

package/scss/placeholders/_buttons.scss

@@ -8,13 +8,15 @@
 
       place-content: center;
 
+      position: relative;
+
       // 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);
@@ -22,13 +24,59 @@
       --btnradiusbr: var(--regular-btn-border-radius);
     }
 
+    > [slot] {
+      :where(&) {
+        position: absolute;
+
+        visibility: collapse;
+
+        // take over
+        max-inline-size: 90%;
+
+        max-block-size: 90%;
+
+        border-radius: inherit;
+      }
+    }
+    > [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(&) {
+          transition: opacity ease-out 200ms;
+
+          @starting-style {
+            opacity: 0;
+          }
+        }
+      }
+    }
+
     @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);
@@ -36,6 +84,15 @@
           --btnradiusbr: var(--#{$size}-btn-border-radius);
         }
       }
+      // }
+    }
+
+    &[control-size='small'] {
+      --label-font: callout;
+    }
+
+    &[control-size='mini'] {
+      --label-font: caption;
     }
   }
 }
@@ -54,6 +111,26 @@
   }
 }
 
+// @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
   %button {

package/scss/transitions/_alert-dialog.scss

@@ -0,0 +1,19 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  @media (prefers-reduced-motion: no-preference) {
+    [is='alert-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;
+      }
+    }
+  }
+}

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/scss/utils/_frame.scss

@@ -17,6 +17,13 @@
     }
   }
 
+  :where([frame\:alignment='top']) {
+    align-self: top;
+  }
+  :where([frame\:alignment='leading']) {
+    justify-self: start;
+  }
+
   // :where([frame-width='infinity']) {
   //   place-items: stretch; //justify-self: stretch;
   // }

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

@@ -1,17 +1,33 @@
 {
   "version": 1.1,
   "tags": [
+    {
+      "name": "alert-dialog"
+    },
     {
       "name": "body-view"
     },
     {
-      "name": "bordered-button"
+      "name": "bordered-button",
+      "description": "",
+      "attributes": [
+        {
+          "name": "role"
+        }
+      ]
     },
     {
-      "name": "bordered-prominent-button"
+      "name": "bordered-prominent-button",
+      "description": "",
+      "attributes": [
+        {
+          "name": "role"
+        }
+      ]
     },
     {
       "name": "borderless-button",
+      "description": "",
       "attributes": [
         {
           "name": "role"
@@ -92,10 +108,22 @@
       "name": "form-view"
     },
     {
-      "name": "glass-button"
+      "name": "glass-button",
+      "description": "",
+      "attributes": [
+        {
+          "name": "role"
+        }
+      ]
     },
     {
-      "name": "glass-prominent-button"
+      "name": "glass-prominent-button",
+      "description": "",
+      "attributes": [
+        {
+          "name": "role"
+        }
+      ]
     },
     {
       "name": "label-view",
@@ -195,12 +223,7 @@
       ]
     },
     {
-      "name": "sheet-view",
-      "attributes": [
-        {
-          "name": "fine-presentation-large-adaptation"
-        }
-      ]
+      "name": "sheet-view"
     },
     {
       "name": "sidebar-toggle"
@@ -277,17 +300,45 @@
       "name": "tool-bar-item"
     },
     {
-      "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": [
+        {
+          "name": "{leading|\"leading fill\"|center|trailing|fill|space",
+          "description": "\nDescription: between} distribution"
+        },
+        {
+          "name": "template",
+          "description": "Value Type: “auto spacer” | “auto auto spacer” | “auto auto auto spacer”",
+          "values": [
+            {
+              "name": "auto spacer"
+            },
+            {
+              "name": "auto auto spacer"
+            },
+            {
+              "name": "auto auto auto spacer"
+            }
+          ]
+        }
+      ]
     }
   ],
   "globalAttributes": [
+    {
+      "name": "tint",
+      "description": "Sets accent color",
+      "valueSet": "tintSet"
+    },
     {
       "name": "frame:width",
       "description": "Sets inline-size",
@@ -300,6 +351,23 @@
     }
   ],
   "valueSets": [
+    {
+      "name": "tintSet",
+      "values": [
+        {
+          "name": "gray",
+          "description": "like secondary, like disabled"
+        },
+        {
+          "name": "red",
+          "description": "system red color"
+        },
+        {
+          "name": "blue",
+          "description": "system blue color"
+        }
+      ]
+    },
     {
       "name": "frameWidth",
       "values": [

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

@@ -1 +0,0 @@
-export declare const ConfirmationDialog: EventTarget;

package/generated/confirmation-dialog/index.js

@@ -1 +0,0 @@
-export const ConfirmationDialog = new EventTarget();

package/generated/lifecycle-observer/index.d.ts

@@ -1 +0,0 @@
-export declare const LifecycleObserver: EventTarget;

package/generated/lifecycle-observer/index.js

@@ -1 +0,0 @@
-export const LifecycleObserver = new EventTarget();

package/scss/components/_components.scss

@@ -1,76 +0,0 @@
-@forward 'components/index';
-
-@forward 'components/v-keyboard';
-
-@forward 'components/disclosure-group';
-
-@forward 'components/h-divider';
-@forward 'components/v-divider';
-
-@forward 'components/full-screen';
-
-@forward 'components/detail-placeholder';
-
-@forward 'components/sticky-container';
-
-@forward 'components/sheet-view';
-
-@forward 'components/confirmation-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';
-
-@forward 'components/tool-bar-item';
-
-@forward 'components/tool-bar-item-group';
-
-@forward 'components/plain-button';
-@forward 'components/borderless-button';
-@forward 'components/bordered-button';
-@forward 'components/bordered-prominent-button';
-@forward 'components/glass-button';
-@forward 'components/glass-prominent-button';
-
-@forward 'components/tool-bar';
-
-@forward 'components/label-view';
-
-@forward 'components/labeled-content';
-
-// @forward 'components/button-view';
-
-@forward 'components/body-view';
-
-@forward 'components/navigation-large-title';
-@forward 'components/navigation-title';
-
-@forward 'components/sidebar-toggle';
-
-@forward 'components/menu-view';
-
-@forward 'components/sidebar-view';
-
-@forward 'components/list-view';
-@forward 'components/form-view';
-@forward 'components/section-view';
-@forward 'components/table-view';
-@forward 'components/table-row';
-@forward 'components/table-column';
-
-@forward 'components/text-field';
-@forward 'components/date-picker';
-@forward 'components/picker-view';
-
-@forward 'components/navigation-stack';
-@forward 'components/navigation-split-view';
-
-@forward 'components/tab-view';
-@forward 'components/tab-bar';
-@forward 'components/tab-item';