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

package/scss/base/_reboot.scss

@@ -43,6 +43,11 @@
     text-transform: none;
   }
 
+  .ph,
+  .ph::before {
+    display: grid;
+  }
+
   button,
   *::part(button),
   input,
@@ -149,6 +154,11 @@
     // ipad-landscape-bp-min: vars.$ipad-landscape-bp-min,
     ipad-sheet-view-inline-size: vars.$ipad-sheet-view-inline-size,
     ipad-sheet-view-height: vars.$ipad-sheet-view-height,
+    //
+    cancel-button-icon: vars.$cancel-button-icon,
+    close-button-icon: vars.$close-button-icon,
+    confirm-button-icon: vars.$confirm-button-icon,
+    delete-button-icon: vars.$delete-button-icon,
   );
 
   @debug functions.map-to-query($CONFIG);

package/scss/colors/_index.scss

@@ -488,31 +488,49 @@ $colors: map.merge(
 
   :where([is='tab-bar']) {
     --toolbaritemtext: light-dark(var(--secondary-text), var(--secondary-text-dark));
+    --toolbaritemhighlighttext: light-dark(var(--secondary-text), var(--secondary-text-dark));
+    --toolbaritemactivetext: light-dark(var(--secondary-text), var(--secondary-text-dark));
   }
 
-  :where(tool-bar-item, tool-bar-item-group, navigation-split-view sidebar-toggle) {
-    //, list-view) {
-    //, [is='form-view'] BREAKS sidebar
-    --toolbaritemface: light-dark(var(--toolbar-cell-bg), var(--toolbar-cell-bg-dark));
-    --toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
-    --toolbaritemactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
-    // --toolbaritemtext: light-dark(var(--primary-label), var(--primary-label-dark)); //light-dark(oklch(var(--tint-lch) / 1), oklch(var(--tint-lch-dark) / 1));
-
-    // @media (pointer: fine) {
-    //   --toolbaritemface: light-dark(var(--toolbar-cell-bg), var(--toolbar-cell-bg-dark));
-    //   --toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
-    //   --toolbaritemactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
-    //   // --toolbaritemtext: light-dark(var(--primary-label), var(--primary-label-dark));
-    // }
-  }
-
-  [is='tab-bar'] [is='tab-item'] {
+  tool-bar-item,
+  tool-bar-item-group,
+  navigation-split-view sidebar-toggle {
     :where(&) {
-      --toolbaritemhighlighttext: yellow;
-      --toolbaritemactivetext: chocolate;
+      //, list-view) {
+      //, [is='form-view'] BREAKS sidebar
+      --toolbaritemface: light-dark(var(--toolbar-cell-bg), var(--toolbar-cell-bg-dark));
+      --toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
+      --toolbaritemactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
+      // --toolbaritemtext: light-dark(var(--primary-label), var(--primary-label-dark)); //light-dark(oklch(var(--tint-lch) / 1), oklch(var(--tint-lch-dark) / 1));
+
+      // @media (pointer: fine) {
+      //   --toolbaritemface: light-dark(var(--toolbar-cell-bg), var(--toolbar-cell-bg-dark));
+      //   --toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
+      //   --toolbaritemactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
+      //   // --toolbaritemtext: light-dark(var(--primary-label), var(--primary-label-dark));
+      // }
+    }
+    :where(&[tint]) {
+      --toolbaritemtext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
+      --toolbaritemhighlighttext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
+      --toolbaritemactivetext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
+
+      --toolbaritemface: var(--accentColor); //light-dark(var(--accentColor), var(--accentColor));
+      --toolbaritemhighlightface: 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)
+      );
+      --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));
     }
   }
 
+  // [is='tab-bar'] [is='tab-item'] {
+  //   :where(&) {
+  //     --toolbaritemhighlighttext: yellow;
+  //     --toolbaritemactivetext: chocolate;
+  //   }
+  // }
+
   sidebar-toggle,
     // tool-bar-item,
     // [is='tab-item'],

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/_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/_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(&) {