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

package/scss/components/_tab-view.scss

@@ -1,168 +1,310 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
-  tab-view {
-    // grid-area: main;
-    grid-template-columns: subgrid; // inherits columns from container
-    grid-template-rows: subgrid; // inherits rows if needed
+@property --adaptable-tab-bar-placement-index {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
+@mixin make-iphone-tabview($selector) {
+  #{$selector} {
+    :where(&) {
+      --adaptable-tab-bar-placement: bottom-bar;
+      --adaptable-tab-bar-placement-index: 0;
+    }
   }
 
-  // @media (max-width: #{vars.$ipad-portrait-bp-max}) and (orientation: portrait) {
-  // }
+  scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+    #{$selector} navigation-stack > &,
+    #{$selector} navigation-split-view > &,
+    #{$selector} body-view > & {
+      &,
+      & ~ tool-bar {
+        :where(&) {
+          --safe-area-inset-bottom: max(env(safe-area-inset-bottom), var(--sidebar-block-spacing));
+        }
+      }
+    }
+  }
+  #{$selector} navigation-split-view > [is='sidebar-view'] > scroll-view {
+    @include mixins.ifnot-2col-split-view-fits {
+      &,
+      & ~ tool-bar {
+        :where(&) {
+          --safe-area-inset-bottom: max(env(safe-area-inset-bottom), var(--sidebar-block-spacing));
+        }
+      }
+    }
+  }
 
-  // @media (min-width: #{vars.$ipad-portrait-bp-max}) and (orientation: portrait) {
-  // }
+  scroll-view:not(:has(~ tool-bar > [slot^='bottom-bar'])):not(:has(> [slot^='bottom-bar'])) {
+    :where(#{$selector} navigation-stack > &),
+    :where(#{$selector} navigation-split-view > &),
+    :where(#{$selector} body-view > &) {
+      --safe-area-inset-bottom: calc(max(env(safe-area-inset-bottom), var(--sidebar-block-spacing)) + var(--iphone-tabbar-block-size));
+    }
 
-  // @media (max-width: #{vars.$ipad-landscape-bp-max}) and (orientation: landscape) {
-  // }
+    :where(#{$selector} navigation-split-view > [is='sidebar-view'] > &) {
+      @include mixins.ifnot-2col-split-view-fits {
+        --safe-area-inset-bottom: calc(max(env(safe-area-inset-bottom), var(--sidebar-block-spacing)) + var(--iphone-tabbar-block-size));
+      }
+    }
+  }
+}
 
-  // tab-view {
-  //   position: fixed;
-  //   width: 100px;
-  //   height: 50px;
-  //   left: 50%;
-  //   bottom: var(--safe-area-inset-bottom);
-  //   transform: translateX(-50%);
-  //   background: yellow;
-  // }
+@mixin make-ipad-tabview($selector) {
+  #{$selector} {
+    :where(&) {
+      --adaptable-tab-bar-placement: top-bar;
+      --adaptable-tab-bar-placement-index: 1;
+    }
+  }
 
-  //  make tab-view responsive
-  body {
-    // grid-template: 'aside main' 1fr / 0px minmax(0, 1fr);
-    grid-template-rows: 1fr;
-    grid-template-columns: minmax(0px, 1fr);
-    // grid-template-areas: 'main';
-    // will-change: grid-template;
-    // transition: grid-template 750ms ease;
+  scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+    #{$selector} navigation-stack > &,
+    #{$selector} navigation-split-view > &,
+    #{$selector} body-view > & {
+      &,
+      & ~ tool-bar {
+        :where(&) {
+          --safe-area-inset-top: calc(max(env(safe-area-inset-top), var(--sidebar-block-spacing)) + var(--ipad-tabbar-block-size));
+        }
+      }
+    }
+  }
+  :where(#{$selector} navigation-split-view > [is='sidebar-view']) {
+    padding-block-start: calc(max(env(safe-area-inset-top), var(--sidebar-block-spacing)) + var(--ipad-tabbar-block-size));
+  }
+}
+
+@layer #{vars.$tab-components-layer} {
+  tab-view {
+    // // more navstack is only for portrait mobile!
+    // & > navigation-stack > scroll-view:has(~ navigation-split-view) {
+    //   &,
+    //   & ~ tool-bar {
+    //     :where(&) {
+    //       display: none;
+    //     }
+    //   }
+    // }
+
+    :where(&) {
+      grid-template-columns: subgrid; // inherits columns from container
+      grid-template-rows: subgrid; // inherits rows if needed
+
+      // css-style-observer
+      transition: --adaptable-tab-bar-placement-index 1ms step-start;
+    }
+
+    :where(& > navigation-stack[hidden], & > navigation-split-view[hidden]) {
+      z-index: -1;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      @media (pointer: coarse) {
+        :where(& > navigation-stack, & > navigation-split-view) {
+          transform: scale(1);
+          transform-origin: bottom;
+          transition: transform 100ms ease-out allow-discrete;
+          @starting-style {
+            transform: scale(0.99);
+          }
+        }
+      }
+    }
+
+    :where(& > [is='sidebar-view']) {
+      @include mixins.make-floating-sidebar;
+
+      margin-inline-start: calc(var(--nav-split-view-sidebar-inline-size) * -1); // hide off screen
+    }
   }
 
   // body:has(tab-view input[type='checkbox']:checked) {
   // grid-template: 'aside main' 1fr / 300px minmax(0, 1fr);
   // }
 
+  // if iphone
+  @media (pointer: coarse) {
+    @include make-iphone-tabview("tab-view[tab-view-style='tab-bar-only']");
+  }
+
+  // if iphone landscape OR ipad landscape
   @media (orientation: landscape) {
-    scroll-view:not(dialog scroll-view) {
-      tab-view navigation-stack > &,
-      tab-view navigation-split-view > &,
-      tab-view body-view > &,
-      tab-view & ~ navigation-bar,
-      tab-view & ~ bottom-bar {
-        --safe-area-inset-top: max(
-          env(safe-area-inset-top),
-          var(--tab-bar-sidebar-spacing)
-        );
-        --safe-area-inset-bottom: max(
-          env(safe-area-inset-bottom),
-          var(--tab-bar-sidebar-spacing)
-        );
+    scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+      tab-view:not([tab-view-style='tab-bar-only']) navigation-stack > &,
+      tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view > &,
+      tab-view:not([tab-view-style='tab-bar-only']) body-view > & {
+        &,
+        & ~ tool-bar {
+          :where(&) {
+            --safe-area-inset-top: max(env(safe-area-inset-top), var(--sidebar-block-spacing));
+
+            --safe-area-inset-bottom: max(env(safe-area-inset-bottom), var(--sidebar-block-spacing));
+          }
+        }
       }
     }
-    tab-view navigation-split-view > [is='sidebar-view'] > scroll-view {
-      --safe-area-inset-top: max(
-        env(safe-area-inset-top),
-        var(--tab-bar-sidebar-spacing)
-      );
-      --safe-area-inset-bottom: max(
-        env(safe-area-inset-bottom),
-        var(--tab-bar-sidebar-spacing)
-      );
+    tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view > [is='sidebar-view'] > scroll-view {
+      @include mixins.ifnot-2col-split-view-fits {
+        &,
+        & ~ tool-bar {
+          :where(&) {
+            --safe-area-inset-top: max(env(safe-area-inset-top), var(--sidebar-block-spacing));
+
+            --safe-area-inset-bottom: max(env(safe-area-inset-bottom), var(--sidebar-block-spacing));
+          }
+        }
+      }
     }
   }
 
   @include mixins.if-iphone-portrait {
-    scroll-view:not(dialog scroll-view) {
-      tab-view navigation-stack > &,
-      tab-view navigation-split-view > &,
-      tab-view body-view > &,
-      tab-view & ~ navigation-bar,
-      tab-view & ~ bottom-bar {
-        --safe-area-inset-bottom: max(
-          env(safe-area-inset-bottom),
-          var(--tab-bar-sidebar-spacing)
-        );
-      }
-    }
-    tab-view navigation-split-view > [is='sidebar-view'] > scroll-view {
-      --safe-area-inset-bottom: max(
-        env(safe-area-inset-bottom),
-        var(--tab-bar-sidebar-spacing)
-      );
-    }
+    @include make-iphone-tabview("tab-view:not([tab-view-style='tab-bar-only'])");
   }
 
   @include mixins.if-iphone-landscape {
-    scroll-view:not(dialog scroll-view) {
-      // tab-view navigation-stack > &,
-      // tab-view navigation-split-view > &,
-      // tab-view body-view > &,
-      tab-view & ~ navigation-bar,
-      tab-view & ~ bottom-bar {
-        --safe-area-inset-left: var(--tabview-padding-inline-start, 0px);
+    tab-view:not([tab-view-style='tab-bar-only']) {
+      :where(&) {
+        --adaptable-tab-bar-placement: ornament;
+        --adaptable-tab-bar-placement-index: 3;
       }
     }
-  }
 
-  @include mixins.if-ipad-portrait {
-    scroll-view:not(dialog scroll-view) {
-      tab-view navigation-stack > &,
-      tab-view navigation-split-view > &,
-      tab-view body-view > &,
-      tab-view & ~ navigation-bar,
-      tab-view & ~ bottom-bar {
-        --safe-area-inset-top: calc(
-          max(env(safe-area-inset-top), var(--tab-bar-sidebar-spacing)) +
-            var(--tab-bar-ipad-height)
-        );
+    scroll-view {
+      tab-view:not([tab-view-style='tab-bar-only']) &:not(dialog scroll-view):not(scroll-view scroll-view) {
+        :where(&) {
+          grid-template-rows: var(--navigation-bar-block-size) minmax(max-content, 1fr);
+
+          // force navbar visibility bc/ of sidebartoggle shown
+          &::part(scroll-view-navbar) {
+            visibility: visible;
+          }
+        }
+
+        // move ONLY navbar to the side
+        @include mixins.create-sidebar-measure;
+      }
+
+      // APPLY FOR NSV
+      tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view > [is='sidebar-view']:not([open]) > & {
+        @include mixins.ifnot-2col-split-view-fits {
+          @include mixins.create-sidebar-measure;
+        }
+        @include mixins.if-2col-split-view-fits {
+          @include mixins.create-sidebar-measure(true);
+        }
       }
     }
-    tab-view navigation-split-view > [is='sidebar-view'] > scroll-view {
-      --safe-area-inset-top: calc(
-        max(env(safe-area-inset-top), var(--tab-bar-sidebar-spacing)) +
-          var(--tab-bar-ipad-height)
-      );
+
+    tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view {
+      // DISCARDS
+      @include mixins.if-2col-split-view-fits {
+        &:not(:has(> [is='sidebar-view'])) {
+          > body-view {
+            scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+              @include mixins.discard-sidebar-measures;
+            }
+          }
+        }
+        &:has(> [is='sidebar-view']) {
+          &:not([column-visibility='double-column']) {
+            &:not([preferred-compact-column='content']) {
+              > body-view {
+                scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+                  @include mixins.discard-sidebar-measures;
+                }
+              }
+            }
+            &[preferred-compact-column='content'] {
+              @include mixins.ifnot-3col-split-view-fits {
+                > body-view {
+                  > body-view {
+                    scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+                      @include mixins.discard-sidebar-measures;
+                    }
+                  }
+                }
+              }
+            }
+            @include mixins.if-3col-split-view-fits {
+              > body-view {
+                scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+                  @include mixins.discard-sidebar-measures;
+                }
+              }
+            }
+          }
+          &[column-visibility='double-column'] {
+            > body-view {
+              scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+                @include mixins.discard-sidebar-measures;
+              }
+            }
+          }
+        }
+      }
     }
   }
 
   @include mixins.if-ipad-landscape {
-    // body:has(> tab-view) {
-    //   grid-template-columns: 300px minmax(0px, 1fr);
-    // }
+    tab-view:not([tab-view-style='tab-bar-only']) {
+      :where(&) {
+        --adaptable-tab-bar-placement: sidebar;
+        --adaptable-tab-bar-placement-index: 4;
+      }
+    }
 
-    // tab-view {
-    //   grid-column: 1 / -1; // span all columns
-    //   grid-row: 1 / -1; // span all rows
-    // }
+    // custom override for nested nav
+    tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view {
+      &:not(:has(> [is='sidebar-view'])) {
+        --nav-split-view--content-inline-size: calc(var(--nav-split-view-content-inline-size) + var(--sidebar-inline-size, 0px));
+
+        > body-view {
+          --sidebar-inline-size: 0px;
+          --sidebar-inline-spacing: 0px;
+        }
+      }
+    }
 
-    // tab-view {
-    // padding-inline-start: calc(
-    //   max(var(--safe-area-inset-left), var(--tab-bar-sidebar-spacing)) +
-    //     var(--tab-bar-sidebar-width)
-    // );
-    scroll-view:not(dialog scroll-view) {
-      tab-view navigation-stack > &,
-      tab-view navigation-split-view > &,
-      tab-view body-view > &,
-      tab-view & ~ navigation-bar,
-      tab-view & ~ bottom-bar {
-        --safe-area-inset-left: calc(
-          max(env(safe-area-inset-left), var(--tab-bar-sidebar-spacing)) +
-            var(--tab-bar-sidebar-width)
-        );
+    scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+      tab-view:not([tab-view-style='tab-bar-only']) navigation-stack > &,
+      tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view > &,
+      tab-view:not([tab-view-style='tab-bar-only']) body-view > & {
+        &,
+        & ~ tool-bar {
+          :where(&) {
+            --safe-area-inset-left: calc(max(env(safe-area-inset-left), var(--sidebar-inline-spacing)) + var(--sidebar-inline-size));
+          }
+        }
       }
     }
+
+    // custom override for nested nav
+    // tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view:not(:has(> [is='sidebar-view'])) {
+    //   --nav-split-view--content-inline-size: calc(var(--nav-split-view-content-inline-size) + var(--sidebar-inline-size, 0px));
+    // }
+    // scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+    //   tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view:not(:has(> [is='sidebar-view'])) > body-view & {
+    //     &,
+    //     & ~ tool-bar {
+    //       :where(&) {
+    //         --safe-area-inset-left: 0px;
+    //       }
+    //     }
+    //   }
     // }
   }
+}
 
-  // @media (min-width: 600px) and (orientation: landscape) {
-  //   tab-view {
-  //     position: relative;
-  //     grid-area: aside;
-  //     height: var(--100svh, 100svh);
-  //     transform: none;
-  //     left: 0;
-  //     width: 300px;
-  //     justify-self: end;
-  //   }
-  // }
+@layer #{vars.$final-layer} {
+  @media (pointer: fine) {
+    @include make-ipad-tabview("tab-view[tab-view-style='tab-bar-only']");
+  }
+
+  @include mixins.if-ipad-portrait {
+    @include make-ipad-tabview("tab-view:not([tab-view-style='tab-bar-only'])");
+  }
 }

package/scss/components/_table-column.scss

@@ -0,0 +1,52 @@
+@use '../vars';
+@use '../mixins';
+@use '../placeholders';
+@use 'sass:string';
+@use 'sass:map';
+
+@layer #{vars.$components-layer} {
+  [is='table-column'] {
+    :where(&) {
+      column-gap: var(--table-accessory-gap);
+
+      grid-auto-flow: column;
+      grid-template-columns: auto var(--table-accessory-size);
+
+      place-content: start;
+
+      place-items: center;
+    }
+
+    &[aria-sort] {
+      :where(&) {
+        @include mixins.make-marker-pseudos(vars.$table-col-affordance);
+
+        &::after {
+          display: grid;
+
+          block-size: var(--table-accessory-size);
+          inline-size: var(--table-accessory-size);
+
+          background-color: var(--blue);
+
+          transform: var(--tablecol--after-rotate,);
+
+          @media (prefers-reduced-motion: no-preference) {
+            transition: transform 100ms ease-out;
+            will-change: transform;
+          }
+        }
+      }
+    }
+
+    // &[aria-sort='ascending'] {
+    //   :where(&)::after {
+    //   }
+    // }
+    &[aria-sort='descending'] {
+      :where(&)::after {
+        --tablecol--after-rotate: rotate(180deg);
+      }
+    }
+  }
+}

package/scss/components/_table-row.scss

@@ -0,0 +1,172 @@
+@use '../vars';
+@use '../mixins';
+@use '../placeholders';
+@use 'sass:string';
+@use 'sass:map';
+
+@layer #{vars.$components-layer} {
+  [is='table-row'] {
+    :where(&) {
+      row-gap: var(--table-row-gap);
+
+      column-gap: var(--table-col-gap);
+
+      --label-line-limit: 1;
+      --label-truncation-mode: tail;
+    }
+
+    @for $i from 1 through 10 {
+      @container table (width > #{vars.$table-expanded-bp}) and (style(--table--expanded-columns: #{$i})) {
+        > :nth-child(n + #{$i + 1}) {
+          :where(&) {
+            display: none;
+          }
+        }
+      }
+    }
+    
+    // dissmantle list and turn it into a h-column row
+    @container table (width > #{vars.$table-expanded-bp}) {
+      :where(&) {
+        --itempadiend: var(--itempadistart);
+        &:after {
+          display: none;
+        }
+        --list--accessories-display: none;
+        // background: red;
+        grid-auto-flow: column;
+
+        grid-auto-columns: minmax(0, 1fr);
+
+        // grid-template-columns: repeat(var(--table--expanded-columns), minmax(0, 1fr));
+        grid-template-rows: minmax(0, 1fr);
+      }
+
+      > :nth-child(n + 2) {
+        :where(&) {
+          color: var(--secondary);
+        }
+      }
+    }
+
+    @container table (width <= #{vars.$table-expanded-bp}) {
+      > :nth-child(n + 2) {
+        :where(&) {
+          display: none;
+
+          color: var(--secondary);
+        }
+      }
+
+      // table-view[preferred-compact-template] > & {
+      //   > :nth-child(n + 2) {
+      //     :where(&) {
+      //       display: grid;
+      //     }
+      //   }
+      // }
+      table-view[preferred-compact-template='title:trailing:subtitle'] > & {
+        :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: trailing;
+            place-self: end;
+          }
+        }
+        > :nth-child(3) {
+          :where(&) {
+            grid-area: subtitle;
+            grid-column: 1 / -1;
+          }
+        }
+      }
+      table-view[preferred-compact-template='trailing:title:subtitle'] > & {
+        :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: trailing;
+            place-self: end;
+          }
+        }
+        > :nth-child(2) {
+          :where(&) {
+            grid-area: title;
+          }
+        }
+        > :nth-child(3) {
+          :where(&) {
+            grid-area: subtitle;
+            grid-column: 1 / -1;
+          }
+        }
+      }
+      table-view[preferred-compact-template='*'] > & {
+        > :nth-child(n + 2) {
+          :where(&) {
+            display: grid;
+          }
+        }
+      }
+
+      // :where(& > :nth-child(n + 7)) {
+      //   grid-column: 1 / -1; /* span all columns */
+      // }
+
+      // :where(& > :nth-child(1)) {
+      //   grid-area: a;
+      // }
+      // :where(& > :nth-child(2)) {
+      //   grid-area: b;
+      // }
+      // :where(& > :nth-child(3)) {
+      //   grid-area: c;
+      // }
+      // :where(& > :nth-child(4)) {
+      //   grid-area: d;
+      // }
+      // :where(& > :nth-child(5)) {
+      //   grid-area: e;
+      // }
+      // :where(& > :nth-child(6)) {
+      //   grid-area: f;
+      // }
+    }
+  }
+}