@swiftwc/ui 0.0.0-dev.11 → 0.0.0-dev.110

package/scss/components/_bordered-button.scss

@@ -1,4 +1,6 @@
 @use '../vars';
+@use '../maps';
+@use '../mixins';
 @use '../placeholders';
 
 @layer #{vars.$components-layer} {
@@ -6,17 +8,52 @@
     @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 maps.$button-sizes-map {
+      :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']) {
+      --accentColorEffective: var(--red);
+      --accentColorEffective4: var(--red4);
+
       --accentColor: var(--red);
       --accentColor2: var(--red2);
       --accentColor3: var(--red3);
       --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.$utils-layer} {
+  [is='bordered-button'] {
+    :where(&) {
+      text-align: center;
+    }
   }
 }

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

@@ -1,4 +1,6 @@
 @use '../vars';
+@use '../maps';
+@use '../mixins';
 @use '../placeholders';
 
 @layer #{vars.$components-layer} {
@@ -6,14 +8,58 @@
     @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 maps.$button-sizes-map {
+      :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']) {
+      --accentColorEffective: var(--red);
+      --accentColorEffective4: var(--red4);
+
       --accentColor: var(--red);
       --accentColor2: var(--red2);
       --accentColor3: var(--red3);
       --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'] > * {
+    :where(&) {
+      @include mixins.takeover-color-vars(btn);
+      // --secondary: var(--btntext);
+      // --blue: var(--btntext);
+    }
+  }
+}
+
+@layer #{vars.$utils-layer} {
+  [is='bordered-prominent-button'] {
+    :where(&) {
+      text-align: center;
+    }
   }
 }

package/scss/components/_borderless-button.scss

@@ -1,4 +1,5 @@
 @use '../vars';
+@use '../mixins';
 @use '../placeholders';
 
 @layer #{vars.$components-layer} {
@@ -6,14 +7,39 @@
     @extend %button;
 
     :where(&) {
+      --btnpadistart: 0.1rem;
+      --btnpadiend: 0.1rem;
+      --btnpadbstart: 0.1rem;
+      --btnpadbend: 0.1rem;
     }
 
     :where(&[role='destructive']) {
+      --accentColorEffective: var(--red);
+      --accentColorEffective4: var(--red4);
+
       --accentColor: var(--red);
       --accentColor2: var(--red2);
       --accentColor3: var(--red3);
       --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.$utils-layer} {
+  [is='borderless-button'] {
+    :where(&) {
+      text-align: center;
+    }
   }
 }

package/scss/components/_confirmation-dialog.scss

@@ -12,9 +12,12 @@
 
       position: fixed;
 
-      inline-size: fit-content;
+      inline-size: var(--confirmation--dialog-inline-size, anchor-size());
       block-size: fit-content;
       height: auto; // safari
+
+      // min-inline-size: var(--confirmation--dialog-min-inline-size,);
+
       max-inline-size: var(--confirmation--dialog-max-inline-size,);
       max-block-size: var(--confirmation--dialog-max-block-size,);
 
@@ -22,6 +25,9 @@
       margin-inline: var(--confirmation--dialog-margin-inline,);
 
       transform: var(--confirmation--dialog-scale,);
+      // transform-origin: top left;
+
+      opacity: var(--confirmation--dialog-opacity,);
 
       position-anchor: --confirmation-dialog; // overriden
       position-area: center;
@@ -33,77 +39,63 @@
       box-shadow: var(--menu-popover-box-shadow,); //0 0 10px 10px black;
 
       padding-block: 1rem;
-      padding-inline: 1em;
-      gap: 0.5rem;
+      padding-inline: 1rem;
+      gap: 1rem;
 
       // finally
-      --confirmation--dialog-scale: scale(0);
+      --confirmation--dialog-scale: scale(0.7);
+      --confirmation--dialog-opacity: 0.8;
+
+      --confirmation--inner-scale: scale3d(1, 1, 1);
+    }
+
+    :where(& > *) {
+      transform: var(--confirmation--inner-scale,);
+
+      transform-origin: top;
+    }
+
+    :where(& > :nth-child(1)) {
+      transform-origin: bottom;
     }
 
     &[open] {
       :where(&) {
-        --confirmation--dialog-max-inline-size: 100vw;
-        --confirmation--dialog-max-block-size: 100vh;
+        --confirmation--dialog-inline-size: min(20rem, 80vw);
+        // --confirmation--dialog-min-inline-size: min(20rem, 80svw);
+
+        --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);
+        --confirmation--dialog-opacity: 1;
+
+        --confirmation--inner-scale: scale3d(1, 1, 1);
 
         @starting-style {
-          --confirmation--dialog-scale: scale(0);
+          --confirmation--dialog-scale: scale(0.7);
+          --confirmation--dialog-opacity: 0.8;
+
+          --confirmation--inner-scale: scale3d(0, 0, 1);
         }
       }
     }
 
     &[closing] {
       :where(&) {
+        --confirmation--dialog-inline-size: anchor-size();
+        // --confirmation--dialog-min-inline-size: anchor-size();
+
         --confirmation--dialog-max-inline-size: anchor-size();
         --confirmation--dialog-max-block-size: anchor-size();
 
-        --confirmation--dialog-scale: scale(0);
-      }
-    }
+        --confirmation--dialog-scale: scale(0.7);
+        --confirmation--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='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,);
+        --confirmation--inner-scale: scale3d(0, 0, 1);
       }
     }
   }

package/scss/components/_content-unavailable.scss

@@ -0,0 +1,57 @@
+@use '../vars';
+@use '../mixins';
+@use '../placeholders';
+
+@layer #{vars.$components-layer} {
+  content-unavailable {
+    :where(&) {
+      place-content: center;
+      place-items: center;
+
+      text-align: center;
+
+      row-gap: 1rem;
+
+      padding-inline: 1rem;
+      padding-block: 1rem;
+
+      &::part(content-unavailable-actions-stack),
+      &::part(content-unavailable-title-stack),
+      &::part(content-unavailable-description-stack) {
+        max-inline-size: 20rem;
+      }
+
+      &::part(content-unavailable-actions-stack) {
+        row-gap: 0.2rem;
+      }
+
+      &::part(content-unavailable-title-stack) {
+        --label-flow: vertical;
+
+        --label-font: title3; // NOTE: Safari fix
+      }
+    }
+
+    > :not([slot]) {
+      :where(&) {
+        --label-image-size: 5;
+
+        --label-gap: 1;
+
+        // --label-font: title3;
+      }
+    }
+
+    &:not(:has(> [slot='description'])) {
+      :where(&)::part(content-unavailable-description-stack) {
+        display: none;
+      }
+    }
+
+    &:not(:has(> [slot='actions'])) {
+      :where(&)::part(content-unavailable-actions-stack) {
+        display: none;
+      }
+    }
+  }
+}

package/scss/components/_date-picker.scss

@@ -5,26 +5,26 @@
     :where(&) {
       grid-template-columns: minmax(0, 1fr);
       grid-template-rows: minmax(0, 1fr);
-    }
 
-    :where(&)::part(date-picker-stack) {
-      grid-template-columns: auto minmax(0, 1fr);
-      grid-template-rows: minmax(0, 1fr);
-    }
+      &::part(date-picker-stack) {
+        grid-template-columns: auto minmax(0, 1fr);
+        grid-template-rows: minmax(0, 1fr);
+      }
 
-    :where(&)::part(date-picker-label-stack) {
-      // display: grid;
-    }
+      &::part(date-picker-label-stack) {
+        // display: grid;
+      }
 
-    :where(&)::part(date-picker-input-stack) {
-      place-items: stretch;
-      place-content: stretch;
+      &::part(date-picker-input-stack) {
+        place-items: stretch;
+        place-content: stretch;
 
-      grid-auto-flow: column;
-    }
+        grid-auto-flow: column;
+      }
 
-    :where(&)::part(date-picker-form-input) {
-      text-align: end;
+      &::part(date-picker-form-input) {
+        text-align: end;
+      }
     }
   }
 }

package/scss/components/_detail-placeholder.scss

@@ -72,9 +72,7 @@
           :where(&) {
             --nav-split-view--detail-placeholder-inset: 0 0 0 calc(var(--nav-split-view-sidebar-inline-size) + var(--nav-split-view--content-inline-size));
 
-            --nav-split-view--detail-placeholder-inline-size: calc(
-              100lvw - var(--nav-split-view-sidebar-inline-size) - var(--nav-split-view--content-inline-size)
-            );
+            --nav-split-view--detail-placeholder-inline-size: calc(100lvw - var(--nav-split-view-sidebar-inline-size) - var(--nav-split-view--content-inline-size));
           }
         }
 

package/scss/components/_disclosure-group.scss

@@ -1,6 +1,6 @@
+@use 'sass:string';
 @use '../vars';
 @use '../mixins';
-@use 'sass:string';
 
 @layer #{vars.$components-layer} {
   [is='disclosure-group'] {
@@ -9,55 +9,80 @@
 
       --disclosure--host-details-content-block-size: 0;
 
-      --disclosure-style: ;
-
       --disclosure--summary-grid-template-columns: ;
       --disclosure--summary-grid-auto-flow: ;
       --disclosure--summary-gap: ;
 
-      --disclosure--marker-display: ;
+      --disclosure--marker-display: none;
       --disclosure--marker-transform: ;
     }
 
-    :where(& > summary) {
-      gap: var(--disclosure--summary-gap,);
+    @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 ;);
 
-      grid-auto-flow: var(--disclosure--summary-grid-auto-flow,);
+        --disclosure--summary-gap: if(style(--disclosure-style: marker-trailing): 0.1rem ; style(--disclosure-style: marker-leading): 0.1rem ;);
+
+        --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-order: if(style(--disclosure-style: marker-leading): -1 ;);
+      }
+    }
 
-      grid-template-columns: var(--disclosure--summary-grid-template-columns,);
+    @supports not (x: #{string.unquote('if(else:red)')}) {
+      :where(&) {
+        --disclosure-style: ;
+      }
+    }
 
-      @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;
+          }
+        }
       }
     }
 
@@ -69,9 +94,9 @@
       block-size: var(--disclosure--host-details-content-block-size);
     }
 
-    :where(& > *:not(summary)) {
-      margin: 0;
-    }
+    // :where(& > *:not(summary)) {
+    // margin: 0;
+    // }
 
     &[open] {
       :where(&) {
@@ -107,7 +132,11 @@
         }
       }
     }
+  }
+}
 
+@layer #{vars.$utils-layer} {
+  [is='disclosure-group'] {
     @supports (x: #{string.unquote('attr(x type(*))')}) {
       :where(&) {
         --disclosure-style: attr(disclosure-style type(<custom-ident>), inherit);
@@ -116,9 +145,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/_fine-tooltip.scss

@@ -0,0 +1,84 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$tab-components-layer} {
+  fine-tooltip {
+    :where(&) {
+      color: var(--text,);
+
+      pointer-events: none;
+      touch-action: none;
+
+      position: fixed;
+
+      inline-size: max-content;
+      block-size: max-content;
+      height: auto; // safari
+
+      max-inline-size: 80vw;
+      max-block-size: 80vh;
+
+      margin-block: var(--tooltip--dialog-margin-block,);
+      margin-inline: var(--tooltip--dialog-margin-inline,);
+
+      transform: var(--tooltip--dialog-scale,) var(--tooltip--dialog-translate,);
+      opacity: var(--tooltip--dialog-opacity,);
+      transform-origin: top;
+
+      position-anchor: --fine-tooltip; // overriden
+      position-area: bottom center;
+
+      overflow: clip;
+      border-radius: 0.9rem;
+
+      backdrop-filter: var(--liquid-glass-backdrop-filter,);
+      box-shadow: var(--menu-popover-box-shadow,);
+
+      padding-block: 0.5rem;
+      padding-inline: 1rem;
+      gap: 0.5rem;
+
+      border: none;
+
+      position-try-fallbacks: --custom-top;
+      position-try-order: most-height;
+      position-visibility: anchors-visible;
+
+      // finally
+      --tooltip--dialog-translate: translateY(-10%);
+      --tooltip--dialog-scale: scale(0.9);
+      --tooltip--dialog-opacity: 0;
+
+      --label--host-white-space: pre-line;
+    }
+
+    &[open] {
+      :where(&) {
+        --tooltip--dialog-margin-block: max(env(safe-area-inset-top), var(--menu-spacing)) max(env(safe-area-inset-bottom), var(--menu-spacing));
+        --tooltip--dialog-margin-inline: max(env(safe-area-inset-left), var(--menu-spacing)) max(env(safe-area-inset-right), var(--menu-spacing));
+
+        --tooltip--dialog-translate: translateY(0);
+        --tooltip--dialog-scale: scale(1);
+        --tooltip--dialog-opacity: 0.9;
+
+        @starting-style {
+          --tooltip--dialog-translate: translateY(-10%);
+          --tooltip--dialog-scale: scale(0.9);
+          --tooltip--dialog-opacity: 0;
+        }
+      }
+    }
+
+    &[closing] {
+      :where(&) {
+        --tooltip--dialog-translate: translateY(-10%);
+        --tooltip--dialog-scale: scale(0.9);
+        --tooltip--dialog-opacity: 0;
+      }
+    }
+  }
+}
+
+@position-try --custom-top {
+  position-area: top center;
+}