@swiftwc/ui 0.0.0-dev.8 → 0.0.0-dev.80

package/scss/components/_sheet-view.scss

@@ -15,9 +15,19 @@
 
       --sheet-view-translate: translateY(var(--view-transition-dialog-offscreen-y));
 
-      :where(&[fine-presentation-large-adaptation='bottom-bar'] > tool-bar > [slot^='top-bar-']) {
-        --label-style: icon-only;
-      }
+      // :where(&[fine-presentation-large-adaptation='bottom-bar'] > tool-bar > [slot^='top-bar-']) {
+      // // FIXME: Add live tooltip
+      // // NOTE: By default toolbars items dialogs have only icons, (except if they define/force w/ labelStyle)
+      // :where(& > tool-bar > [slot='top-bar-leading'], & > tool-bar > [slot='top-bar-trailing']) {
+      //   --label-style: icon-only;
+      // }
+
+      // // NOTE: By default bottombar items dialogs on iphone have only icons, (except if they define/force w/ labelStyle)
+      // @media (pointer: coarse) {
+      //   :where(& > tool-bar > [slot^='bottom-bar-']) {
+      //     --label-style: icon-only;
+      //   }
+      // }
 
       @media (pointer: coarse) and (orientation: portrait) {
         clip-path: inset(var(--safe-area-inset-top) 0 0 0 round 2rem 2rem 0 0);
@@ -39,8 +49,7 @@
         height: auto;
 
         inset-inline-start: calc(
-          var(--inset-inline-start-resettor, 1) *
-            calc(50lvw - calc(#{vars.$ipad-sheet-view-inline-size} / 2) - calc(calc(var(--safe-area-inset-left) + var(--safe-area-inset-right)) / 2))
+          var(--inset-inline-start-resettor, 1) * calc(50lvw - calc(#{vars.$ipad-sheet-view-inline-size} / 2) - calc(calc(var(--safe-area-inset-left) + var(--safe-area-inset-right)) / 2))
         );
 
         inset-block-start: calc(50lvh - calc(#{vars.$ipad-sheet-view-height} / 2) - calc(calc(var(--safe-area-inset-top) + var(--safe-area-inset-bottom)) / 2));
@@ -51,7 +60,8 @@
       }
 
       // NOTE: Safari-only mod for closing animation
-      @supports not selector(:open) {
+      // @supports not selector(:open) {
+      @supports (hanging-punctuation: first) {
         &:has(&:not([open])) {
           :where(&) {
             overflow: visible;

package/scss/components/_sidebar-toggle.scss

@@ -101,10 +101,7 @@
         display: none;
       }
 
-      :where(
-        navigation-split-view:has(> [is='sidebar-view']):not([preferred-compact-column='content']) > &,
-        navigation-split-view:has(> [is='sidebar-view'])[column-visibility='double-column'] > &
-      ) {
+      :where(navigation-split-view:has(> [is='sidebar-view']):not([preferred-compact-column='content']) > &, navigation-split-view:has(> [is='sidebar-view'])[column-visibility='double-column'] > &) {
         display: none;
       }
     }

package/scss/components/_sticky-container.scss

@@ -32,7 +32,7 @@
       }
     }
 
-    @container (max-block-size: 400px) {
+    @container (max-block-size: 25rem) {
       :where(&) {
         position: relative;
         top: unset;

package/scss/components/_tab-bar.scss

@@ -8,6 +8,7 @@
     position: absolute;
     background-color: rgba(0, 0, 0, 0.4);
     pointer-events: none;
+    touch-action: none;
 
     position-anchor: #{$anchor-name};
     // position-area: center;
@@ -39,6 +40,9 @@
       inset: auto 0 0 0;
 
       @include mixins.make-toolbar-pseudos(top);
+
+      --toolbaritempadistart: 1rem;
+      --toolbaritempadiend: 1rem;
     }
 
     > [is='form-view'] {
@@ -62,6 +66,8 @@
         --label-flow: vertical;
         --label-line-limit: 2;
         --label-truncation-mode: tail;
+
+        --label-font: caption2;
       }
 
       :where(& button) {
@@ -80,6 +86,9 @@
       --tab-bar-width: 100lvw;
 
       inset: 0 0 auto 0;
+
+      --toolbaritempadistart: 0.3rem;
+      --toolbaritempadiend: 0.3rem;
     }
 
     > [is='form-view'] {
@@ -97,9 +106,7 @@
 
         // overflow: clip;
 
-        scroll-padding-left: calc(
-          var(--sidebar-toggle-padding-inline-start, 0px) + var(--ipad-tabbar-block-padding-start) + var(--ipad-tabbar-block-padding-end)
-        );
+        scroll-padding-left: calc(var(--sidebar-toggle-padding-inline-start, 0px) + var(--ipad-tabbar-block-padding-start) + var(--ipad-tabbar-block-padding-end));
 
         // overflow: auto clip;
 
@@ -123,6 +130,11 @@
   #{$selector} [is='sidebar-view'][open] ~ & > [is='form-view'] {
     :where(&) {
       transform: translateY(calc(calc(max(var(--safe-area-inset-top), var(--sidebar-block-spacing)) * -1) - 150%));
+
+      // SAFARI FIX
+      @media (prefers-reduced-motion: no-preference) {
+        animation: ipad_form_view_slide_up_offedge var(--sidebar-transition-duration) ease forwards;
+      }
     }
   }
 }
@@ -161,6 +173,8 @@
 
         pointer-events: all;
 
+        touch-action: none; // important for backdrop pans!
+
         grid-auto-flow: column;
         grid-template-rows: minmax(0, 1fr);
 

package/scss/components/_tab-view.scss

@@ -115,10 +115,12 @@
       }
     }
 
-    :where(& > [is='sidebar-view']) {
+    > [is='sidebar-view'] {
       @include mixins.make-floating-sidebar;
 
-      margin-inline-start: calc(var(--nav-split-view-sidebar-inline-size) * -1); // hide off screen
+      :where(&) {
+        margin-inline-start: calc(var(--nav-split-view-sidebar-inline-size) * -1); // hide off screen
+      }
     }
   }
 

package/scss/components/_table-column.scss

@@ -15,6 +15,8 @@
       place-content: start;
 
       place-items: center;
+
+      color: var(--blue);
     }
 
     &[aria-sort] {

package/scss/components/_table-row.scss

@@ -24,7 +24,7 @@
         }
       }
     }
-    
+
     // dissmantle list and turn it into a h-column row
     @container table (width > #{vars.$table-expanded-bp}) {
       :where(&) {
@@ -32,6 +32,7 @@
         &:after {
           display: none;
         }
+        --list--accessories-size: 0rem;
         --list--accessories-display: none;
         // background: red;
         grid-auto-flow: column;
@@ -137,6 +138,73 @@
           }
         }
       }
+      table-view[preferred-compact-template='title:subtitle:trailing'] > & {
+        :where(&) {
+          grid-template-columns: 1fr 1fr;
+          grid-template-rows: repeat(2, auto);
+          grid-template-areas:
+            'title trailing'
+            'subtitle _';
+          // grid-template-rows: repeat(3, auto); /* 3 rows for first 6 items */
+          // grid-template-areas:
+          //   'a b'
+          //   'c d'
+          //   'e f';
+        }
+        > :nth-child(-n + 3) {
+          :where(&) {
+            display: grid;
+          }
+        }
+        > :nth-child(1) {
+          :where(&) {
+            grid-area: title;
+          }
+        }
+        > :nth-child(2) {
+          :where(&) {
+            grid-area: subtitle;
+          }
+        }
+        > :nth-child(3) {
+          :where(&) {
+            grid-area: trailing;
+            place-self: end;
+            grid-column: 1 / -1;
+          }
+        }
+      }
+      table-view[preferred-compact-template='title:trailing'] > & {
+        :where(&) {
+          grid-template-columns: 1fr 1fr;
+          grid-template-rows: repeat(2, auto);
+          grid-template-areas:
+            'title trailing'
+            'subtitle _';
+          // grid-template-rows: repeat(3, auto); /* 3 rows for first 6 items */
+          // grid-template-areas:
+          //   'a b'
+          //   'c d'
+          //   'e f';
+        }
+        > :nth-child(-n + 2) {
+          :where(&) {
+            display: grid;
+          }
+        }
+        > :nth-child(1) {
+          :where(&) {
+            grid-area: title;
+          }
+        }
+        > :nth-child(2) {
+          :where(&) {
+            grid-area: trailing;
+            place-self: end;
+            grid-column: 1 / -1;
+          }
+        }
+      }
       table-view[preferred-compact-template='*'] > & {
         > :nth-child(n + 2) {
           :where(&) {

package/scss/components/_table-view.scss

@@ -51,7 +51,7 @@ $table-elses: (
   --list--accessories-display: grid,
 );
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$list-components-layer} {
   table-view {
     &:not(& &, list-view &, [is='form-view'] &) {
       @extend %list;
@@ -92,12 +92,12 @@ $table-elses: (
           border-top: 1px solid var(--separator);
         }
 
-        :where(&)::part(table-header-leading-stack),
-        :where(&)::part(table-header-principal-stack),
-        :where(&)::part(table-header-trailing-stack),
-        :where(&)::part(table-footer-leading-stack),
-        :where(&)::part(table-footer-principal-stack),
-        :where(&)::part(table-footer-trailing-stack) {
+        &::part(table-header-leading-stack),
+        &::part(table-header-principal-stack),
+        &::part(table-header-trailing-stack),
+        &::part(table-footer-leading-stack),
+        &::part(table-footer-principal-stack),
+        &::part(table-footer-trailing-stack) {
           grid-auto-flow: column;
           grid-template-columns: minmax(0, 1fr);
 
@@ -107,6 +107,7 @@ $table-elses: (
 
       &::part(table-column-stack) {
         grid-auto-flow: column;
+
         grid-auto-columns: minmax(0, 1fr);
 
         column-gap: var(--table-col-gap);
@@ -115,7 +116,9 @@ $table-elses: (
 
         padding-block: var(--table-row-gap);
 
-        color: var(--blue);
+        // color: var(--blue);
+        font-size: 0.875rem;
+        font-weight: 600;
 
         background-color: var(--separator);
       }
@@ -165,14 +168,19 @@ $table-elses: (
       // SECTION: Columns counter
       :where(&) {
         --table--expanded-columns: 1;
-      }
 
-      :where(&:has(> [slot='column']:nth-of-type(2)):not(:has(> [slot='column']:nth-of-type(3)))) {
-        --table--expanded-columns: 2;
-      }
-      :where(&:has(> [slot='column']:nth-of-type(3)):not(:has(> [slot='column']:nth-of-type(4)))) {
-        --table--expanded-columns: 3;
+        @for $i from 2 through 6 {
+          &:has(> [slot='column']:nth-child(#{$i} of [slot='column'])) {
+            --table--expanded-columns: #{$i};
+          }
+        }
       }
+      // :where(&:has(> [slot='column']:nth-of-type(2)):not(:has(> [slot='column']:nth-of-type(3)))) {
+      //   --table--expanded-columns: 2;
+      // }
+      // :where(&:has(> [slot='column']:nth-of-type(3)):not(:has(> [slot='column']:nth-of-type(4)))) {
+      //   --table--expanded-columns: 3;
+      // }
 
       // // @include mixins.center-toolbar-elements('&');
       // :where(& > button[slot^='header'], & > button[slot^='footer']),

package/scss/components/_text-field.scss

@@ -4,34 +4,54 @@
   text-field {
     :where(&) {
       grid-template-columns: minmax(0, 1fr);
+
       grid-template-rows: minmax(0, 1fr);
 
       // padding-inline: var(--toolbaritempadistart,) var(--toolbaritempadiend,);
       // padding-block: var(--toolbaritempadbstart,) var(--toolbaritempadbend,);
-    }
 
-    :where(&)::part(text-field-stack) {
-      // display: grid;
+      &::part(text-field-stack) {
+        // display: grid;
 
-      grid-template-columns: auto minmax(0, 1fr);
-      grid-template-rows: minmax(0, 1fr);
-    }
+        grid-template-columns: auto minmax(0, 1fr);
 
-    :where(&)::part(text-field-label-stack) {
-      // display: grid;
-    }
+        grid-template-rows: minmax(0, 1fr);
 
-    :where(&)::part(text-field-input-stack) {
-      // display: grid;
+        column-gap: var(--labeled-content-column-gap);
+      }
 
-      place-items: stretch;
-      place-content: stretch;
-    }
+      &::part(text-field-label-stack) {
+        // display: grid;
+
+        color: var(--secondary);
+      }
+
+      &::part(text-field-input-stack) {
+        // display: grid;
+
+        place-items: stretch;
+        place-content: stretch;
+      }
+
+      &::part(text-field-form-input) {
+        // display: grid;
+
+        text-align: end;
+
+        appearance: none;
+
+        border: 0;
+
+        outline: 0;
+
+        padding: 0;
+
+        // padding-block: 0.1rem;
 
-    :where(&)::part(text-field-form-input) {
-      // display: grid;
+        // padding-inline: 0.3rem;
 
-      text-align: end;
+        background-color: transparent;
+      }
     }
   }
 }

package/scss/components/_toggle-view.scss

@@ -0,0 +1,112 @@
+@use '../vars';
+@use '../mixins';
+@use 'sass:string';
+
+@layer #{vars.$components-layer} {
+  toggle-view {
+    :where(&) {
+      grid-template-columns: minmax(0, 1fr);
+
+      grid-template-rows: minmax(0, 1fr);
+
+      --toggle--trigger-bg: lightgray;
+
+      &::part(toggle-stack) {
+        grid-template-columns: auto minmax(0, 1fr);
+
+        grid-template-rows: minmax(0, 1fr);
+
+        column-gap: var(--labeled-content-column-gap);
+      }
+
+      // &::part(toggle-label-stack) {
+      // color: var(--secondary);
+      // }
+
+      &::part(toggle-input-stack) {
+        // place-items: end;
+        align-items: center;
+        justify-items: end;
+
+        place-content: stretch;
+      }
+
+      &::part(toggle-form-input):focus {
+        outline: blue solid 5px;
+      }
+
+      &::part(toggle-form-input) {
+        text-align: end;
+
+        position: relative;
+
+        display: grid;
+        outline: red solid 3px;
+        border-radius: 2rem;
+        inline-size: 4rem;
+        block-size: 1rem;
+        background: var(--toggle--trigger-bg);
+
+        // appearance: none;
+
+        // border: 0;
+
+        // outline: 0;
+
+        // padding: 0;
+
+        // background-color: transparent;
+      }
+
+      &::part(toggle-form-input)::before {
+        content: '';
+
+        display: grid;
+
+        position: absolute;
+        inset: 0 auto auto 0;
+        inline-size: 1rem;
+        block-size: 1rem;
+        border-radius: 1rem;
+        // background: yellow;
+
+        backdrop-filter: var(--liquid-glass-backdrop-filter);
+
+        box-shadow: var(--liquid-glass-box-shadow);
+      }
+    }
+
+    form & {
+      :where(&)::part(toggle-label-stack) {
+        color: var(--secondary);
+      }
+    }
+
+    &[aria-checked='true'] {
+      :where(&) {
+        --toggle--trigger-bg: green;
+      }
+    }
+
+    > :nth-child(n + 2 of [slot='label']) {
+      :where(&) {
+        --label-font: callout;
+
+        @supports not (x: #{string.unquote('if(else:red)')}) {
+          @include mixins.set-label-font(callout);
+        }
+
+        // toggle-view:not(form toggle-view) & {
+        //   color: var(--secondary);
+        // }
+      }
+    }
+    &:not(form &) {
+      > :nth-child(n + 2 of [slot='label']) {
+        :where(&) {
+          color: var(--secondary);
+        }
+      }
+    }
+  }
+}

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

@@ -29,15 +29,20 @@
       --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])) {
       pointer-events: none;
     }
-  }
 
-  // NOTE: MUST be right-after the above `all: unset` in this SAME page!
-  tool-bar-item {
+    // NOTE: MUST be right-after the above `all: unset` in this SAME page!
+
     :where(& > button),
     :where(& > picker-view > menu-view)::part(menu-summary),
     :where(& > menu-view)::part(menu-summary) {
@@ -45,98 +50,45 @@
 
       place-content: center;
     }
-  }
 
-  // tool-bar-item[slot],
-  // tool-bar-item-group {
-  // @media (prefers-reduced-motion: no-preference) {
-  //   transition:
-  //     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;
-  //   will-change: transform, overlay, display;
-  // }
-  // }
-
-  // tool-bar-item {
-  // min-height: var(--toolbar-cell-min-size);
-  // min-width: var(--toolbar-cell-min-size);
-  // }
-}
+    > button {
+      @include mixins.takeover-button-slots;
 
-@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));
+      // [tint] &,
+      // &[tint] {
+      //   :where(&) {
+      //     // NOTE: Make everything inside prominent buttons white
+      //     --secondary: var(--btntext);
+      //     --blue: var(--btntext);
+
+      //     --accentColorEffective: var(--btntext);
+      //     --accentColor: var(--btntext);
+      //   }
+      // }
     }
-    @include mixins.add-hover-state('::part(menu-summary)') {
-      --toolbaritemface: var(--toolbaritemhighlightface,); //light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
+
+    // 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;
+      }
     }
 
-    // &:not(:disabled):not([readonly]) {
-    //   > button {
+    // NOTE: on fine screens, toolbar icons are a little smaller
+    // @media (pointer: fine) {
+    //   > button > label-view,
+    //   > menu-view > label-view {
     //     :where(&) {
-    //       --toolbaritempadistart: 0.3rem;
-    //       --toolbaritempadiend: 0.3rem;
-    //       --toolbaritempadbstart: 0.3rem;
-    //       --toolbaritempadbend: 0.3rem;
+    //       --label-image-size: 1.8;
     //     }
     //   }
     // }
   }
-
-  // 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,
-  // tool-bar-item > button,
-  // tool-bar-item > input,
-  // [is='tab-item'],
-  // // list-view > button,
-  // menu-view > button,
-  // [is='disclosure-group'] > summary,
-  // [is='disclosure-group'] > button {
-  //   // &:not(:disabled):not([readonly]) {
-  //   //   :where(&) {
-  //   @include mixins.add-active-state {
-  //     --toolbaritemface: 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])) {
     --toolbar-cell-scale: var(--menu-host-offscreen-transform);