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

package/scss/components/_table-view.scss

@@ -0,0 +1,223 @@
+@use '../vars';
+@use '../mixins';
+@use '../placeholders';
+@use 'sass:string';
+@use 'sass:map';
+
+@property --adaptable-table-style-index {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
+$table-ifs: (
+  inset: (
+    --list--item-color: var(--insetgroupedlist-item-color,),
+    --list--item-background-color: var(--insetgroupedlist-item-background-color,),
+    --list--highlighteditem-color: var(--insetgroupedlist-highlighteditem-color,),
+    --list--highlighteditem-background-color: var(--insetgroupedlist-highlighteditem-background-color,),
+    --list--item-border-radius: 0,
+    --list--host-background-color: var(--insetgroupedlist-background-color,),
+    --list--host-padding-inline: var(--insetgroupedlist-padding-inline),
+    --list--host-padding-block: var(--insetgroupedlist-padding-block),
+    //
+    --list--adjacentdetailsitem-border-radius: 0,
+    //
+    --list--details-background-color: var(--insetgroupedlist-openitem-background-color,),
+    --list--details-color: var(--insetgroupedlist-openitem-color,),
+    --list--opendetails-background-color: var(--insetgroupedlist-openitem-background-color,),
+    --list--opendetails-color: var(--insetgroupedlist-openitem-color,),
+    --list--opensummary-background-color: var(--insetgroupedlist-opensummary-background-color,),
+    --list--opensummary-color: var(--insetgroupedlist-opensummary-color,),
+  ),
+);
+$table-elses: (
+  --list--host-background-color: var(--list-background-color,),
+  --list--highlighteditem-background-color: var(--list-highlighteditem-background-color,),
+  --list--item-background-color: var(--list-item-background-color,),
+  --list--item-padding-inline-start: var(--list-item-padding-inline-start),
+  --list--item-padding-inline-end: var(--list-item-padding-inline-end),
+  --list--item-padding-block-start: var(--list-item-padding-block-start),
+  --list--item-padding-block-end: var(--list-item-padding-block-end),
+  --list--item-color: var(--list-item-color,),
+  --list--highlighteditem-color: var(--list-highlighteditem-color,),
+  //
+  --list--details-background-color: var(--list-openitem-background-color,),
+  --list--details-color: var(--list-openitem-color,),
+  --list--opensummary-background-color: var(--list-opensummary-background-color,),
+  --list--opensummary-color: var(--list-opensummary-color,),
+  //
+  --list--accessories-size: 1.1rem,
+  --list--accessories-display: grid,
+);
+
+@layer #{vars.$components-layer} {
+  table-view {
+    &:not(& &, list-view &, [is='form-view'] &) {
+      @extend %list;
+
+      :where(&) {
+        container: table / inline-size;
+
+        &::part(table-container) {
+          grid-template-columns: subgrid;
+        }
+
+        &::part(table-header-stack),
+        &::part(table-footer-stack) {
+          position: relative; // SAFARI BUG
+
+          padding-inline: var(--list--host-padding-inline, 0px);
+
+          background-color: var(--secondaryBackground);
+
+          column-gap: var(--toolbar-col-gap);
+
+          grid-auto-flow: column;
+          grid-template-columns: auto 1fr auto;
+          grid-template-rows: var(--toolbar-cell-min-size);
+
+          place-content: center; // middle of y axis
+        }
+
+        &::part(table-header-stack) {
+          border-radius: var(--insetlist-item-border-radius) var(--insetlist-item-border-radius) 0 0;
+
+          border-bottom: 1px solid var(--separator);
+        }
+
+        &::part(table-footer-stack) {
+          border-radius: 0 0 var(--insetlist-item-border-radius) var(--insetlist-item-border-radius);
+
+          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) {
+          grid-auto-flow: column;
+          grid-template-columns: minmax(0, 1fr);
+
+          column-gap: var(--toolbar-col-gap);
+        }
+      }
+
+      &::part(table-column-stack) {
+        grid-auto-flow: column;
+        grid-auto-columns: minmax(0, 1fr);
+
+        column-gap: var(--table-col-gap);
+
+        padding-inline: var(--list--host-padding-inline, 0px);
+
+        padding-block: var(--table-row-gap);
+
+        color: var(--blue);
+
+        background-color: var(--separator);
+      }
+
+      // SECTION: toolbars
+      > [slot^='header'],
+      > [slot^='footer'] {
+        :where(&) {
+          place-content: center;
+        }
+      }
+
+      :where(& > button[slot^='header'], & > button[slot^='footer']),
+      :where(& > picker-view > menu-view[slot^='header'], & > picker-view > menu-view[slot^='footer'])::part(menu-summary),
+      :where(& > menu-view[slot^='header'], & > menu-view[slot^='footer'])::part(menu-summary) {
+        border-radius: 0.7rem;
+      }
+
+      // SECTION: Cols hider
+      @container table (width <= #{vars.$table-expanded-bp}) {
+        :where(& > [slot='column']) {
+          display: none;
+        }
+
+        :where(&)::part(table-column-stack) {
+          display: none;
+        }
+      }
+
+      // SECTION: styleobserver
+      :where(&) {
+        &::part(table-container) {
+          transition: --adaptable-table-style-index 1ms step-start;
+
+          --adaptable-table-style-index: 0;
+          --adaptable-table-style: compact;
+        }
+
+        @container table (width > #{vars.$table-expanded-bp}) {
+          &::part(table-container) {
+            --adaptable-table-style-index: 1;
+            --adaptable-table-style: expanded;
+          }
+        }
+      }
+
+      // 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;
+      }
+
+      // // @include mixins.center-toolbar-elements('&');
+      // :where(& > button[slot^='header'], & > button[slot^='footer']),
+      // :where(& > picker-view > menu-view)::part(menu-summary),
+      // :where(& > menu-view[slot^='header'], & > menu-view[slot^='footer'])::part(menu-summary) {
+      //   place-items: center;
+
+      //   place-content: center;
+      // }
+      // }
+
+      // wire
+      :where(&) {
+        @include mixins.write-props($table-elses);
+      }
+
+      // SECTION: ifs
+      @supports (x: #{string.unquote('if(else:red)')}) {
+        :where(&) {
+          @include mixins.write-ifs(--table-style, $table-ifs, $table-elses);
+        }
+      }
+
+      // SECTION: ifs polyfill
+      @supports not (x: #{string.unquote('if(else:red)')}) {
+        :where(&:not([table-style])) {
+          @each $v in vars.$table-styles {
+            @container style(--table-style: #{$v}) {
+              @include mixins.write-props(map.get($table-ifs, $v));
+            }
+          }
+        }
+        @each $v in vars.$table-styles {
+          :where(&[table-style='#{$v}']) {
+            @include mixins.write-props(map.get($table-ifs, $v));
+          }
+        }
+      }
+
+      // SECTION: attrs finally
+      @supports (x: #{string.unquote('attr(x type(*))')}) {
+        :where(&) {
+          --table-style: attr(table-style type(<custom-ident>), inherit);
+        }
+      }
+    }
+  }
+}

package/scss/components/_text-field.scss

@@ -0,0 +1,37 @@
+@use '../vars';
+
+@layer #{vars.$components-layer} {
+  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;
+
+      grid-template-columns: auto minmax(0, 1fr);
+      grid-template-rows: minmax(0, 1fr);
+    }
+
+    :where(&)::part(text-field-label-stack) {
+      // display: grid;
+    }
+
+    :where(&)::part(text-field-input-stack) {
+      // display: grid;
+
+      place-items: stretch;
+      place-content: stretch;
+    }
+
+    :where(&)::part(text-field-form-input) {
+      // display: grid;
+
+      text-align: end;
+    }
+  }
+}

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

@@ -3,35 +3,46 @@
 
 @layer #{vars.$components-layer} {
   tool-bar-item-group {
-    // pointer-events: all;
+    :where(&) {
+      // pointer-events: all;
 
-    grid-auto-flow: column;
-    grid-template-columns: minmax(0, 1fr);
-    column-gap: var(--toolbar-col-gap);
+      grid-auto-flow: column;
+      grid-template-columns: minmax(0, 1fr);
+      column-gap: var(--toolbar-col-gap);
 
-    background-color: var(--toolbar-cell-bg);
-    padding-inline: var(--toolbar-cell-inline-padding);
-    padding-block: var(--toolbar-cell-block-padding);
-    border-radius: var(--toolbar-cell-border-radius);
-    border-width: 0;
+      background: var(--toolbaritemface);
+      padding-inline: var(--toolbar-cell-inline-padding-start) var(--toolbar-cell-inline-padding-end);
+      padding-block: var(--toolbar-cell-block-padding-start) var(--toolbar-cell-block-padding-end);
+      border-radius: var(--toolbar-cell-border-radius);
+      border-width: 0;
+
+      // tab-item {
+      // --toolbaritempadistart: var(--toolbar-cell-inline-padding);
+      // --toolbaritempadbstart: var(--toolbar-cell-block-padding);
+      // }
+    }
+
+    :where(& > *) {
+      min-inline-size: calc(var(--toolbar-cell-min-size) - var(--toolbar-cell-block-padding-start) - var(--toolbar-cell-block-padding-end));
+    }
 
     //
-    // --component-bg: white;
-    // --component-padding-inline: 5px;
-    // --component-padding-block: 5px;
-    // --component-border-radius: 99999px;
-    // --component-border-width: 0;
+    // --toolbaritemface: white;
+    // --toolbaritempadistart: 5px;
+    // --toolbaritempadbstart: 5px;
+    // --toolbaritemradius: 99999px;
+    // --toolbaritemborder: 0;
 
     // button {
     //   // appearance: none;
     //   // -webkit-appearance: none;
     //   // box-shadow: none;
     //   // outline: 0;
-    //   border: var(--component-border-width);
-    //   background-color: var(--component-bg);
-    //   padding-inline: var(--component-padding-inline);
-    //   padding-block: var(--component-padding-block);
-    //   border-radius: var(--component-border-radius);
+    //   border: var(--toolbaritemborder);
+    //   background-color: var(--toolbaritemface);
+    //   padding-inline: var(--toolbaritempadistart);
+    //   padding-block: var(--toolbaritempadbstart);
+    //   border-radius: var(--toolbaritemradius);
     // }
   }
 }

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

@@ -2,86 +2,144 @@
 @use '../mixins';
 
 @layer #{vars.$components-layer} {
-  tool-bar-item,
-  tab-item {
-    // background-color: red;
-    // padding: 5px;
-    // border-radius: 99999px;
-
-    // height: 40px;
-
-    // pointer-events: all;
-
-    //
-    --component-bg: var(--toolbar-cell-bg);
-    --component-padding-inline: var(--toolbar-cell-inline-padding);
-    --component-padding-block: var(--toolbar-cell-block-padding);
-    --component-border-radius: var(--toolbar-cell-border-radius);
-    --component-border-width: 0;
-
-    button,
-    input {
-      appearance: none;
-      -webkit-appearance: none;
-      // box-shadow: none;
-      // outline: 0;
-      border: var(--component-border-width);
-      background-color: var(--component-bg);
-      padding-inline: var(--component-padding-inline);
-      padding-block: var(--component-padding-block);
-      border-radius: var(--component-border-radius);
-      min-width: 25px; // NOTE: For inputs overflowing-x
-
-      // &:not(:disabled):not([readonly]) {
-      //   &:focus-visible {
-      //     background-color: var(--toolbar-cell-focus-bg);
-      //   }
-      //   // order matters! BEFORE active
-      //   @media (pointer: fine) {
-      //     &:hover {
-      //       background-color: var(--toolbar-cell-focus-bg);
-      //     }
-      //   }
-      //   // order matters! AFTER hover/fvisible
-      //   &:active {
-      //     background-color: var(--toolbar-cell-active-bg);
-      //   }
-      // }
+  tool-bar-item {
+    :where(&) {
+      // moved from > * of old
+      pointer-events: all;
+
+      // min-height: var(--toolbar-cell-min-size);
+      // min-width: var(--toolbar-cell-min-size);
+      // moved from > * of old
+
+      // background-color: red;
+      // padding: 5px;
+      border-radius: var(--pill-border-radius);
+
+      // height: 40px;
+
+      // pointer-events: all;
+      // container-type: inline-size;
+
+      //
+      // --toolbaritemface: var(--toolbar-cell-bg);
+      // --toolbaritempadistart: calc(var(--toolbar-cell-inline-padding) * 2);
+      // --toolbaritempadbstart: calc(var(--toolbar-cell-block-padding) * 2);
+      --toolbaritemradiustl: var(--toolbar-cell-border-radius);
+      --toolbaritemradiustr: var(--toolbar-cell-border-radius);
+      --toolbaritemradiusbl: var(--toolbar-cell-border-radius);
+      --toolbaritemradiusbr: var(--toolbar-cell-border-radius);
+      --toolbaritemborder: 0;
+    }
+
+    :where(&:has([disabled])) {
+      pointer-events: none;
+    }
+  }
+
+  // NOTE: MUST be right-after the above `all: unset` in this SAME page!
+  tool-bar-item {
+    :where(& > button),
+    :where(& > picker-view > menu-view)::part(menu-summary),
+    :where(& > menu-view)::part(menu-summary) {
+      place-items: center;
+
+      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);
+  // }
 }
 
 @layer #{vars.$colors-layer} {
-  tool-bar-item,
-  tab-item {
-    button,
-    input {
-      &:not(:disabled):not([readonly]) {
-        &:focus-visible {
-          background-color: var(--toolbar-cell-focus-bg);
-        }
-
-        // order matters! BEFORE active
-        @media (pointer: fine) {
-          &:hover {
-            background-color: var(--toolbar-cell-focus-bg);
-          }
-        }
-      }
+  // 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));
+    }
+    @include mixins.add-hover-state('::part(menu-summary)') {
+      --toolbaritemface: var(--toolbaritemhighlightface,); //light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
     }
+
+    // &:not(:disabled):not([readonly]) {
+    //   > button {
+    //     :where(&) {
+    //       --toolbaritempadistart: 0.3rem;
+    //       --toolbaritempadiend: 0.3rem;
+    //       --toolbaritempadbstart: 0.3rem;
+    //       --toolbaritempadbend: 0.3rem;
+    //     }
+    //   }
+    // }
   }
+
+  // list-view > button,
+  // [is='form-view'] > button {
+  //   &:not(:disabled):not([readonly]) {
+  //     :where(&) {
+  //       --toolbaritempadistart: 0.3rem;
+  //       --toolbaritempadbstart: 0.3rem;
+  //     }
+  //   }
+  // }
 }
 
 @layer #{vars.$ui-layer} {
-  tool-bar-item,
-  tab-item {
-    button,
-    input {
-      &:not(:disabled):not([readonly]) {
-        &:active {
-          background-color: var(--toolbar-cell-active-bg);
-        }
-      }
+  // 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);
+    --toolbar-cell-filter: var(--menu-host-offscreen-filter);
+  }
 }