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

package/scss/components/_alert-dialog.scss

@@ -0,0 +1,106 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  [is='alert-dialog'] {
+    :where(&) {
+      @include mixins.reset-dialog;
+
+      color: var(--text,);
+
+      touch-action: none;
+
+      position: fixed;
+
+      inline-size: fit-content;
+      block-size: fit-content;
+      height: auto; // safari
+      max-inline-size: min(20rem, 80vw);
+      max-block-size: 80vh;
+
+      margin-block: max(env(safe-area-inset-top), var(--menu-spacing)) max(env(safe-area-inset-bottom), var(--menu-spacing));
+      margin-inline: max(env(safe-area-inset-left), var(--menu-spacing)) max(env(safe-area-inset-right), var(--menu-spacing));
+
+      transform: var(--alert--dialog-scale,);
+      opacity: var(--alert--dialog-opacity,);
+
+      position-anchor: --alert-dialog; // overriden
+      position-area: center;
+
+      overflow: clip;
+      border-radius: 0.9rem;
+
+      backdrop-filter: var(--liquid-glass-backdrop-filter,);
+      box-shadow: var(--menu-popover-box-shadow,); //0 0 10px 10px black;
+
+      padding-block: 1rem;
+      padding-inline: 1em;
+      gap: 1rem;
+
+      // finally
+      --alert--dialog-scale: scale(1.2);
+      --alert--dialog-opacity: 0.8;
+    }
+
+    &[open] {
+      :where(&) {
+        --alert--dialog-scale: scale(1);
+        --alert--dialog-opacity: 1;
+
+        @starting-style {
+          --alert--dialog-scale: scale(1.2);
+          --alert--dialog-opacity: 0.8;
+        }
+      }
+    }
+
+    &[closing] {
+      :where(&) {
+        --alert--dialog-scale: scale(0.98);
+        --alert--dialog-opacity: 0;
+      }
+    }
+
+    // SECTION: componentize
+    // > button {
+    //   :where(&) {
+    // @include mixins.componentize(dialogbtn);
+    //   }
+    // }
+
+    // :where(&) {
+    //   --dialogbtnpadistart: 0.6rem;
+    //   --dialogbtnpadiend: 0.6rem;
+    //   --dialogbtnpadbstart: 0.6rem;
+    //   --dialogbtnpadbend: 0.6rem;
+    //   --dialogbtnradiustl: 1rem;
+    //   --dialogbtnradiustr: 1rem;
+    //   --dialogbtnradiusbl: 1rem;
+    //   --dialogbtnradiusbr: 1rem;
+    // }
+  }
+}
+
+// @layer #{vars.$colors-layer} {
+//   // SECTION: componentize
+//   [is='alert-dialog'] {
+//     > button {
+//       @include mixins.add-focus-visible-state {
+//         --dialogbtnface: var(--dialogbtnhighlightface,);
+//         --dialogbtntext: var(--dialogbtnhighlighttext,);
+//       }
+//     }
+//   }
+// }
+
+// @layer #{vars.$ui-layer} {
+//   // SECTION: componentize
+//   [is='alert-dialog'] {
+//     > button {
+//       @include mixins.add-active-state {
+//         --dialogbtnface: var(--dialogbtnactiveface,);
+//         --dialogbtntext: var(--dialogbtnactivetext,);
+//       }
+//     }
+//   }
+// }

package/scss/components/_bordered-button.scss

@@ -6,11 +6,25 @@
     @extend %button;
 
     :where(&) {
+      --btnpadistart: var(--regular-btn-padding);
+      --btnpadiend: var(--regular-btn-padding);
+      --btnpadbstart: var(--regular-btn-padding);
+      --btnpadbend: var(--regular-btn-padding);
+
       @media (pointer: fine) {
         --accentColor: var(--primary);
       }
     }
 
+    @each $size, $media in vars.$button-sizes {
+      :where(&[control-size='#{$size}']) {
+        --btnpadistart: var(--#{$size}-btn-padding);
+        --btnpadiend: var(--#{$size}-btn-padding);
+        --btnpadbstart: var(--#{$size}-btn-padding);
+        --btnpadbend: var(--#{$size}-btn-padding);
+      }
+    }
+
     :where(&[role='destructive']) {
       --accentColor: var(--red);
       --accentColor2: var(--red2);

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

@@ -6,6 +6,19 @@
     @extend %button;
 
     :where(&) {
+      --btnpadistart: var(--regular-btn-padding);
+      --btnpadiend: var(--regular-btn-padding);
+      --btnpadbstart: var(--regular-btn-padding);
+      --btnpadbend: var(--regular-btn-padding);
+    }
+
+    @each $size, $media in vars.$button-sizes {
+      :where(&[control-size='#{$size}']) {
+        --btnpadistart: var(--#{$size}-btn-padding);
+        --btnpadiend: var(--#{$size}-btn-padding);
+        --btnpadbstart: var(--#{$size}-btn-padding);
+        --btnpadbend: var(--#{$size}-btn-padding);
+      }
     }
 
     :where(&[role='destructive']) {

package/scss/components/_borderless-button.scss

@@ -6,6 +6,10 @@
     @extend %button;
 
     :where(&) {
+      --btnpadistart: 0.1rem;
+      --btnpadiend: 0.1rem;
+      --btnpadbstart: 0.1rem;
+      --btnpadbend: 0.1rem;
     }
 
     :where(&[role='destructive']) {

package/scss/components/_confirmation-dialog.scss

@@ -66,45 +66,45 @@
     }
 
     // SECTION: componentize
-    > button {
-      :where(&) {
-        @include mixins.componentize(dialogbtn);
-      }
-    }
-
-    :where(&) {
-      --dialogbtnpadistart: 0.6rem;
-      --dialogbtnpadiend: 0.6rem;
-      --dialogbtnpadbstart: 0.6rem;
-      --dialogbtnpadbend: 0.6rem;
-      --dialogbtnradiustl: 1rem;
-      --dialogbtnradiustr: 1rem;
-      --dialogbtnradiusbl: 1rem;
-      --dialogbtnradiusbr: 1rem;
-    }
+    // > button {
+    //   :where(&) {
+    //     @include mixins.componentize(dialogbtn);
+    //   }
+    // }
+
+    // :where(&) {
+    //   --dialogbtnpadistart: 0.6rem;
+    //   --dialogbtnpadiend: 0.6rem;
+    //   --dialogbtnpadbstart: 0.6rem;
+    //   --dialogbtnpadbend: 0.6rem;
+    //   --dialogbtnradiustl: 1rem;
+    //   --dialogbtnradiustr: 1rem;
+    //   --dialogbtnradiusbl: 1rem;
+    //   --dialogbtnradiusbr: 1rem;
+    // }
   }
 }
 
-@layer #{vars.$colors-layer} {
-  // SECTION: componentize
-  [is='confirmation-dialog'] {
-    > button {
-      @include mixins.add-focus-visible-state {
-        --dialogbtnface: var(--dialogbtnhighlightface,);
-        --dialogbtntext: var(--dialogbtnhighlighttext,);
-      }
-    }
-  }
-}
-
-@layer #{vars.$ui-layer} {
-  // SECTION: componentize
-  [is='confirmation-dialog'] {
-    > button {
-      @include mixins.add-active-state {
-        --dialogbtnface: var(--dialogbtnactiveface,);
-        --dialogbtntext: var(--dialogbtnactivetext,);
-      }
-    }
-  }
-}
+// @layer #{vars.$colors-layer} {
+//   // SECTION: componentize
+//   [is='confirmation-dialog'] {
+//     > button {
+//       @include mixins.add-focus-visible-state {
+//         --dialogbtnface: var(--dialogbtnhighlightface,);
+//         --dialogbtntext: var(--dialogbtnhighlighttext,);
+//       }
+//     }
+//   }
+// }
+
+// @layer #{vars.$ui-layer} {
+//   // SECTION: componentize
+//   [is='confirmation-dialog'] {
+//     > button {
+//       @include mixins.add-active-state {
+//         --dialogbtnface: var(--dialogbtnactiveface,);
+//         --dialogbtntext: var(--dialogbtnactivetext,);
+//       }
+//     }
+//   }
+// }

package/scss/components/_content-unavailable-view.scss

@@ -23,7 +23,7 @@
     }
 
     > :not([slot]) {
-      --label-image-size: 5rem;
+      --label-image-size: 5;
 
       --label-gap: 1rem;
 

package/scss/components/_disclosure-group.scss

@@ -8,56 +8,81 @@
       overflow: clip;
 
       --disclosure--host-details-content-block-size: 0;
+    }
+
+    @supports (x: #{string.unquote('if(else:red)')}) {
+      :where(&) {
+        --disclosure--marker-display: if(style(--disclosure-style: marker-trailing): ; style(--disclosure-style: marker-leading): ; else: none;);
+
+        --disclosure--summary-grid-auto-flow: if(style(--disclosure-style: marker-trailing): column ; style(--disclosure-style: marker-leading): column ;);
 
-      --disclosure-style: ;
+        --disclosure--summary-gap: if(style(--disclosure-style: marker-trailing): 0.1rem ; style(--disclosure-style: marker-leading): 0.1rem ;);
 
-      --disclosure--summary-grid-template-columns: ;
-      --disclosure--summary-grid-auto-flow: ;
-      --disclosure--summary-gap: ;
+        --disclosure--summary-grid-template-columns: if(style(--disclosure-style: marker-trailing): minmax(0, 1fr) auto ; style(--disclosure-style: marker-leading): auto minmax(0, 1fr) ;);
 
-      --disclosure--marker-display: ;
-      --disclosure--marker-transform: ;
+        --disclosure--marker-order: if(style(--disclosure-style: marker-leading): -1 ;);
+      }
     }
 
-    :where(& > summary) {
-      gap: var(--disclosure--summary-gap,);
+    @supports not (x: #{string.unquote('if(else:red)')}) {
+      :where(&) {
+        --disclosure-style: ;
 
-      grid-auto-flow: var(--disclosure--summary-grid-auto-flow,);
+        --disclosure--summary-grid-template-columns: ;
+        --disclosure--summary-grid-auto-flow: ;
+        --disclosure--summary-gap: ;
 
-      grid-template-columns: var(--disclosure--summary-grid-template-columns,);
+        --disclosure--marker-display: none;
+        --disclosure--marker-transform: ;
+      }
+    }
 
-      @include mixins.make-marker-pseudos(vars.$disclosure-affordance);
+    > summary {
+      :where(&) {
+        gap: var(--disclosure--summary-gap,);
 
-      &::after {
-        display: var(--disclosure--marker-display,);
+        grid-auto-flow: var(--disclosure--summary-grid-auto-flow,);
 
-        block-size: 1rem;
-        inline-size: 1rem;
+        grid-template-columns: var(--disclosure--summary-grid-template-columns,);
 
-        background-color: var(--blue);
+        @include mixins.make-marker-pseudos(vars.$disclosure-affordance);
 
-        transform: var(--disclosure--marker-transform,);
+        &::after {
+          display: var(--disclosure--marker-display,);
 
-        order: var(--disclosure--marker-order,);
-      }
-    }
+          block-size: 1rem;
+          inline-size: 1rem;
 
-    :where(& > summary) {
-      @container not (style(--disclosure-style: marker-trailing) or style(--disclosure-style: marker-leading)) {
-        --disclosure--marker-display: none;
-      }
-      @container style(--disclosure-style: marker-trailing) or style(--disclosure-style: marker-leading) {
-        --disclosure--summary-grid-auto-flow: column;
+          background-color: var(--blue);
 
-        --disclosure--summary-gap: 0.1rem;
-      }
-      @container style(--disclosure-style: marker-trailing) {
-        --disclosure--summary-grid-template-columns: minmax(0, 1fr) auto;
+          transform: var(--disclosure--marker-transform,);
+
+          order: var(--disclosure--marker-order,);
+        }
       }
-      @container style(--disclosure-style: marker-leading) {
-        --disclosure--summary-grid-template-columns: auto minmax(0, 1fr);
 
-        --disclosure--marker-order: -1;
+      @supports not (x: #{string.unquote('if(else:red)')}) {
+        :where(&) {
+          // @container not (style(--disclosure-style: marker-trailing) or style(--disclosure-style: marker-leading)) {
+          // --disclosure--marker-display: none;
+          // }
+          @container style(--disclosure-style: marker-trailing) or style(--disclosure-style: marker-leading) {
+            --disclosure--marker-display: grid;
+          }
+          @container style(--disclosure-style: marker-trailing) or style(--disclosure-style: marker-leading) {
+            --disclosure--summary-grid-auto-flow: column;
+
+            --disclosure--summary-gap: 0.1rem;
+          }
+          @container style(--disclosure-style: marker-trailing) {
+            --disclosure--summary-grid-template-columns: minmax(0, 1fr) auto;
+          }
+          @container style(--disclosure-style: marker-leading) {
+            --disclosure--summary-grid-template-columns: auto minmax(0, 1fr);
+
+            --disclosure--marker-order: -1;
+          }
+        }
       }
     }
 
@@ -116,9 +141,31 @@
     @supports not (x: #{string.unquote('attr(x type(*))')}) {
       :where(&[disclosure-style='marker-trailing']) {
         --disclosure-style: marker-trailing;
+
+        // SAFARI FIX (specify manually attr to avoid flashing)
+        @supports not (x: #{string.unquote('if(else:red)')}) {
+          --disclosure--marker-display: grid;
+
+          --disclosure--summary-grid-auto-flow: column;
+
+          --disclosure--summary-gap: 0.1rem;
+
+          --disclosure--summary-grid-template-columns: minmax(0, 1fr) auto;
+        }
       }
       :where(&[disclosure-style='marker-leading']) {
         --disclosure-style: marker-leading;
+
+        // SAFARI FIX (specify manually attr to avoid flashing)
+        @supports not (x: #{string.unquote('if(else:red)')}) {
+          --disclosure--marker-display: grid;
+
+          --disclosure--summary-grid-auto-flow: column;
+
+          --disclosure--summary-gap: 0.1rem;
+
+          --disclosure--summary-grid-template-columns: auto minmax(0, 1fr);
+        }
       }
       :where(&[disclosure-style='marker-hidden']) {
         --disclosure-style: ;

package/scss/components/_glass-button.scss

@@ -11,6 +11,20 @@
       box-shadow: var(--toolbar-cell-box-shadow);
 
       transform: var(--btn--scale,);
+
+      --btnpadistart: var(--regular-btn-padding);
+      --btnpadiend: var(--regular-btn-padding);
+      --btnpadbstart: var(--regular-btn-padding);
+      --btnpadbend: var(--regular-btn-padding);
+    }
+
+    @each $size, $media in vars.$button-sizes {
+      :where(&[control-size='#{$size}']) {
+        --btnpadistart: var(--#{$size}-btn-padding);
+        --btnpadiend: var(--#{$size}-btn-padding);
+        --btnpadbstart: var(--#{$size}-btn-padding);
+        --btnpadbend: var(--#{$size}-btn-padding);
+      }
     }
 
     :where(&[role='destructive']) {

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

@@ -11,6 +11,20 @@
       box-shadow: var(--toolbar-cell-box-shadow);
 
       transform: var(--btn--scale,);
+
+      --btnpadistart: var(--regular-btn-padding);
+      --btnpadiend: var(--regular-btn-padding);
+      --btnpadbstart: var(--regular-btn-padding);
+      --btnpadbend: var(--regular-btn-padding);
+    }
+
+    @each $size, $media in vars.$button-sizes {
+      :where(&[control-size='#{$size}']) {
+        --btnpadistart: var(--#{$size}-btn-padding);
+        --btnpadiend: var(--#{$size}-btn-padding);
+        --btnpadbstart: var(--#{$size}-btn-padding);
+        --btnpadbend: var(--#{$size}-btn-padding);
+      }
     }
 
     :where(&[role='destructive']) {

package/scss/components/_h-stack.scss

@@ -1,8 +1,9 @@
 @use '../vars';
+@use '../mixins';
 @use 'sass:string';
 @use 'sass:list';
 
-$h-stack-templates: ((minmax(0, 1fr) auto), (auto minmax(0, 1fr) auto auto), (repeat(4, minmax(0, 1fr))), (repeat(2, minmax(0, 1fr)) auto));
+$h-stack-templates: ((minmax(0, 1fr) auto), (auto minmax(0, 1fr) auto auto), (auto minmax(0, 1fr) auto), (repeat(4, minmax(0, 1fr))), (repeat(2, minmax(0, 1fr)) auto));
 
 @layer #{vars.$components-layer} {
   h-stack {
@@ -23,17 +24,6 @@ $h-stack-templates: ((minmax(0, 1fr) auto), (auto minmax(0, 1fr) auto auto), (re
     //   }
     // }
 
-    @each $template in $h-stack-templates {
-      $parts: string.split('#{$template}', ', ');
-      $result: '';
-      @each $part in $parts {
-        $result: $result + '#{$part},';
-      }
-      $result: string.slice($result, 1, string.length($result) - 1);
-      @debug $result, $template;
-      :where(&[template='#{$result}']) {
-        grid-template-columns: $template;
-      }
-    }
+    @include mixins.make-template($h-stack-templates, grid-template-columns);
   }
 }

package/scss/components/_index.scss

@@ -14,6 +14,7 @@
   [is='tab-bar'],
   [is='full-screen'],
   [is='confirmation-dialog'],
+  [is='alert-dialog'],
   [is='sheet-view'],
   [is='form-view'],
   [is='disclosure-group'],

package/scss/components/_label-view.scss

@@ -11,11 +11,23 @@
 }
 
 @property --label-image-size {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 2;
+}
+
+@property --label-padding-inline {
   syntax: '<length>';
   inherits: false;
   initial-value: 0;
 }
 
+// @property --label-font-weight {
+//   syntax: 'ultra-light | thin | light | regular | medium | semibold | bold | heavy | black';
+//   inherits: false;
+//   initial-value: regular;
+// }
+
 // @property --label-style {
 //   syntax: 'title-and-icon | icon-only | title-only | automatic';
 //   inherits: true;
@@ -162,6 +174,8 @@ $label-line-ifs: (
     :where(&) {
       // transition: --label--style 1ms step-start;
 
+      padding-inline: var(--label-padding-inline);
+
       align-items: var(--label--host-align-items,);
       justify-items: var(--label--host-justify-items,);
       // place-items: center;
@@ -175,8 +189,8 @@ $label-line-ifs: (
 
       gap: var(--label--host-gap,); //;
 
-      --label-image-size: 2rem;
-      --label-imagestack-fontsize: var(--label-image-size);
+      // --label-image-size: 2rem;
+      --label-imagestack-fontsize: calc(var(--label-image-size) * 1rem);
       // gap: 0;
 
       white-space: var(--label--host-white-space,);
@@ -221,29 +235,41 @@ $label-line-ifs: (
       }
     }
 
-    :where(&:has(> [slot='image'])) {
-      --label--has-icon: yes;
-      // background-color: green;
+    &:has(> [slot='image']) {
+      :where(&) {
+        --label--has-icon: yes;
+        // background-color: green;
+      }
     }
-    :where(&:has(> :not([slot]))) {
-      --label--has-title: yes;
-      // background-color: red;
+    &:has(> :not([slot])) {
+      :where(&) {
+        --label--has-title: yes;
+        // background-color: red;
+      }
     }
 
-    :where(& > :not([slot])) {
-      // grid-area: label-title-stack;
-      overflow: var(--label--overflow,);
+    > :not([slot]) {
+      :where(&) {
+        // grid-area: label-title-stack;
+        overflow: var(--label--overflow,);
 
-      text-overflow: var(--label--text-overflow,);
+        text-overflow: var(--label--text-overflow,);
 
-      display: var(--label--display,);
+        display: var(--label--display,);
 
-      -webkit-box-orient: var(--label--box-orient,);
+        -webkit-box-orient: var(--label--box-orient,);
 
-      line-clamp: var(--label--line-clamp,);
-      -webkit-line-clamp: var(--label--line-clamp,);
+        line-clamp: var(--label--line-clamp,);
+        -webkit-line-clamp: var(--label--line-clamp,);
+      }
     }
 
+    // > [slot='image'] {
+    //   :where(&:is(i)) {
+    //     line-height: 1.1;
+    //   }
+    // }
+
     // vars
     @supports (x: #{string.unquote('if(else:red)')}) {
       :where(&) {