@swiftwc/ui 0.0.0-dev.3 → 0.0.0-dev.31

package/scss/components/_navigation-split-view.scss

@@ -0,0 +1,424 @@
+@use '../vars';
+@use '../mixins';
+
+@mixin force-disable-col-view-transitions {
+  > scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+    &.bwd,
+    &.fwdd,
+    & ~ tool-bar .bwn,
+    & ~ tool-bar .fwnn {
+      transition-duration: 0ms; // !important;
+    }
+  }
+}
+
+@layer #{vars.$nav-components-layer} {
+  navigation-split-view {
+    :where(&) {
+      touch-action: none;
+
+      block-size: var(--100lvh, 100lvh);
+
+      --nav-split-view--content-inline-size: var(--nav-split-view-content-inline-size,);
+
+      --nav-split-view--detail-placeholder-inset: 0 0 0 var(--nav-split-view--content-inline-size);
+      --nav-split-view--detail-placeholder-inline-size: calc(100lvw - var(--nav-split-view--content-inline-size));
+      --nav-split-view--detail-placeholder-visibility: visible;
+    }
+
+    // ANCHOR Z_INDEX STYLES
+    // Use ifnot to apply negative z-indexes to old views
+    // z-index rules get discarded in larger viewports
+
+    @include mixins.if-2col-split-view-fits {
+      // special case for sv inside a tabview>more
+      scroll-view:has(~ &:not([hidden])) {
+        &,
+        & ~ tool-bar {
+          :where(&) {
+            opacity: 0;
+            pointer-events: none;
+          }
+        }
+      }
+    }
+
+    @include mixins.ifnot-2col-split-view-fits {
+      // special case for sv inside a tabview>more
+      :where(scroll-view:has(~ &:not([hidden]))) {
+        z-index: -1;
+      }
+
+      :where(& > body-view ~ scroll-view, & > body-view ~ [is='sidebar-view']) {
+        z-index: -1;
+      }
+
+      &:has(> [is='sidebar-view']) {
+        :where(& > body-view ~ [is='sidebar-view']) {
+          z-index: -2;
+        }
+
+        :where(& > body-view > body-view ~ scroll-view) {
+          z-index: -1;
+        }
+      }
+    }
+
+    &:has(> [is='sidebar-view']) {
+      @include mixins.ifnot-3col-split-view-fits {
+        &:not([preferred-compact-column='content']) {
+          :where(& > body-view > body-view ~ scroll-view) {
+            z-index: -1;
+          }
+        }
+
+        // body-view > body-view {
+        // clip-path: inset(
+        //   0 0 0 var(--nav-split-view-content-inline-size)
+        // ); // force clipping because it is now a floating element unable to hide bg = overflow: clip;
+        // }
+        // }
+      }
+
+      @include mixins.if-2col-split-view-fits {
+        &[column-visibility='double-column'] {
+          :where(& > body-view > body-view ~ scroll-view) {
+            z-index: -1;
+          }
+        }
+      }
+    }
+
+    // @include mixins.ifnot-2col-split-view-fits {
+    //   &:has(> [is='sidebar-view']) {
+    //     :where(& > [is='sidebar-view']) {
+    //       --list-style: unset;
+    //       --form-style: unset;
+    //     }
+    //     // :where(& > [is='sidebar-view'] > scroll-view) {
+    //     // --scroll-view-box-shadow: none;
+    //     // }
+    //   }
+    // }
+
+    // ANCHOR 2_COL COMPACT-DEFAULTS
+
+    @include mixins.if-2col-split-view-fits {
+      // content col appears (either 1st-child or 2nd child in case of collapsed sidebar)
+      > scroll-view,
+      > tool-bar,
+      > [is='sidebar-view'] {
+        :where(&) {
+          --safe-area-inset-right: 0px; // reset end padding
+        }
+      }
+
+      // Fix 1stChildElement as a content view
+      > scroll-view {
+        &,
+        & ~ tool-bar {
+          :where(&) {
+            inline-size: var(--nav-split-view--content-inline-size);
+          }
+        }
+      }
+
+      // Cancel animations
+      > scroll-view,
+      > [is='sidebar-view'] > scroll-view {
+        ~ tool-bar {
+          > tool-bar-item,
+          > tool-bar-item-group {
+            :where(&) {
+              @include mixins.vt-toolbar-cell-onscreen-keyframe;
+            }
+          }
+        }
+      }
+
+      > scroll-view {
+        :where(&) {
+          border-right: solid 1px var(--separator);
+          // --scroll-view-box-shadow: none;
+        }
+      }
+
+      > body-view {
+        scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+          &,
+          & ~ tool-bar {
+            :where(&) {
+              // add margin to make vts precise
+              margin-inline-start: var(--nav-split-view--content-inline-size);
+            }
+          }
+        }
+      }
+
+      // ANCHOR 3_COL COMPACT-DEFAULTS
+
+      // SIDEBAR | EXPANDED
+      &:has(> [is='sidebar-view']) {
+        > [is='sidebar-view'] {
+          // :where(&) {
+          @include mixins.make-floating-sidebar;
+          // turn 1stChildElement into floating sidebar
+          // inline-size: var(--nav-split-view-sidebar-inline-size); // override
+
+          // margin-inline-start: max(env(safe-area-inset-left), var(--sidebar-spacing)); // float
+
+          // --safe-area-inset-left: 0px; // now a floating
+
+          // overflow: visible;
+
+          // restyle scroll-view of floating sidebar
+
+          //was padding-block
+          // padding-block: max(var(--safe-area-inset-top), var(--sidebar-spacing)) max(var(--safe-area-inset-bottom), var(--sidebar-spacing));
+
+          // overflow: clip;
+
+          // height: calc(100% - max(var(--safe-area-inset-top), var(--sidebar-spacing)) - max(var(--safe-area-inset-bottom), var(--sidebar-spacing)));
+
+          // backdrop-filter: var(--liquid-glass-backdrop-filter);
+          // box-shadow: var(--liquid-glass-box-shadow);
+
+          // border-radius: var(--sidebar-border-radius);
+          // }
+
+          // > scroll-view {
+          //   :where(&) {
+          //     // --canvas: oklch(var(--sidebar-bg-lch) / var(--sidebar-bg-alpha));
+
+          //     // --safe-area-inset-top: 0px;
+          //     // --safe-area-inset-bottom: 0px;
+
+          //     // border-radius: var(--sidebar-border-radius);
+
+          //     // backdrop-filter: var(--liquid-glass-backdrop-filter);
+
+          //     // --scroll-view-box-shadow: var(--liquid-glass-box-shadow);
+          //   }
+
+          //   // :where(& ~ tool-bar) {
+          //   // --safe-area-inset-top: 0px;
+          //   // max(
+          //   //   env(safe-area-inset-top),
+          //   //   var(--sidebar-spacing)
+          //   // );
+          //   // --safe-area-inset-bottom: 0px;
+          //   // max(
+          //   //   env(safe-area-inset-bottom),
+          //   //   var(--sidebar-spacing)
+          //   // );
+          //   // }
+          // }
+        }
+
+        > body-view {
+          scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+            &,
+            & ~ tool-bar {
+              :where(&) {
+                // override/reset added margin
+                margin-inline-start: 0px;
+
+                // add start padding instead
+                --safe-area-inset-left: calc(var(--nav-split-view-sidebar-inline-size) + max(env(safe-area-inset-left), var(--sidebar-inline-spacing)));
+
+                --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));
+              }
+            }
+          }
+        }
+
+        // ANCHOR 3_COL FOR COMPACT-DEFAULTS
+
+        &:not([column-visibility='double-column']) {
+          // compact-view-only: apply preferred-compact-column rule
+          @include mixins.ifnot-3col-split-view-fits {
+            // &:has(> dialog[is='sidebar-view']) {
+            &[preferred-compact-column='content'] {
+              > scroll-view,
+              > tool-bar,
+              > [is='sidebar-view'] {
+                :where(&) {
+                  margin-inline-start: calc(var(--nav-split-view-sidebar-inline-size) * -1); // hide off screen
+                }
+              }
+
+              // move descendants to left edge of screen
+              > body-view {
+                scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+                  &,
+                  & ~ tool-bar {
+                    :where(&) {
+                      margin-inline-start: var(--nav-split-view--content-inline-size);
+
+                      --safe-area-inset-left: 0px;
+                    }
+                  }
+                }
+
+                :where(& > scroll-view) {
+                  border-right: solid 1px var(--separator);
+                  // --scroll-view-box-shadow: none;
+                }
+
+                > scroll-view {
+                  ~ tool-bar {
+                    > tool-bar-item,
+                    > tool-bar-item-group {
+                      :where(&) {
+                        @include mixins.vt-toolbar-cell-onscreen-keyframe; //(true);
+                      }
+                    }
+                  }
+                }
+
+                > scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+                  &,
+                  & ~ tool-bar {
+                    :where(&) {
+                      inline-size: var(--nav-split-view--content-inline-size);
+
+                      margin-inline-start: 0px;
+
+                      --safe-area-inset-left: env(safe-area-inset-left);
+
+                      --safe-area-inset-right: 0px;
+
+                      // #{vars.$sidebar-toggle-padding-inline-start-css-prop}: inherit;
+                    }
+                  }
+
+                  // move ONLY navbar to the side
+                  @include mixins.create-sidebar-measure;
+                }
+              }
+            }
+          }
+
+          // ANCHOR 3_COL DEFAULTS
+
+          // SIDEBAR | COMPACT | EXPANDED
+          @include mixins.if-3col-split-view-fits {
+            // container of compact col (middle)
+            // &:has(> dialog[is='sidebar-view']) {
+            // &:not([column-visibility='double-column']) {
+            // container of content col (principal)
+            > body-view {
+              // cancel animations
+              > scroll-view {
+                ~ tool-bar {
+                  > tool-bar-item,
+                  > tool-bar-item-group {
+                    :where(&) {
+                      @include mixins.vt-toolbar-cell-onscreen-keyframe; //(true);
+                    }
+                  }
+                }
+              }
+              // clip-path: inset(
+              //   0 0 0 var(--nav-split-view-sidebar-inline-size)
+              // ); // force clipping because it is now a floating element unable to hide bg = overflow: clip;
+
+              // shrink 2nd-child
+              > scroll-view {
+                &,
+                & ~ tool-bar {
+                  :where(&) {
+                    inline-size: calc(var(--nav-split-view--content-inline-size) + var(--nav-split-view-sidebar-inline-size)); // shrink to be now a col
+
+                    --safe-area-inset-right: 0px;
+                  }
+                }
+              }
+
+              :where(& > scroll-view) {
+                border-right: solid 1px var(--separator);
+                // --scroll-view-box-shadow: none;
+              }
+
+              // container of details col (trailing)
+              > body-view {
+                scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+                  &,
+                  & ~ tool-bar {
+                    :where(&) {
+                      --safe-area-inset-left: 0px; // override
+
+                      margin-inline-start: calc(var(--nav-split-view-sidebar-inline-size) + var(--nav-split-view--content-inline-size)); // override
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@layer #{vars.$final-layer} {
+  navigation-split-view {
+    // ANCHOR transitions
+
+    // ANCHOR 2_COL COMPACT-DEFAULTS
+
+    // COMPACT | EXPANDED
+    @include mixins.if-2col-split-view-fits {
+      // Cancel transitions as it is now an inert col
+      > scroll-view,
+      > [is='sidebar-view'] > scroll-view {
+        --scroll-view-translate: translateX(var(--view-transition-principal-x)); //!important
+      }
+
+      > body-view {
+        @include force-disable-col-view-transitions;
+      }
+
+      // ANCHOR 3_COL FOR COMPACT-DEFAULTS
+
+      // SIDEBAR | EXPANDED
+      &:has(> [is='sidebar-view']) {
+        &:not([column-visibility='double-column']) {
+          @include mixins.ifnot-3col-split-view-fits {
+            &[preferred-compact-column='content'] {
+              // move descendants to right
+              > body-view {
+                > scroll-view {
+                  --scroll-view-translate: translateX(var(--view-transition-principal-x)); //!important;
+                }
+
+                > body-view {
+                  @include force-disable-col-view-transitions;
+                }
+              }
+            }
+          }
+
+          // ANCHOR 2_COL OVERRIDE FOR COMPACT VIEWS
+
+          // SIDEBAR | COMPACT | EXPANDED
+          @include mixins.if-3col-split-view-fits {
+            // container of compact col (middle)
+            > body-view {
+              // Fix position as compact col in the middle
+              > scroll-view {
+                --scroll-view-translate: translateX(var(--view-transition-principal-x)); // !important;
+              }
+
+              > body-view {
+                @include force-disable-col-view-transitions;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/scss/components/_navigation-stack.scss

@@ -0,0 +1,11 @@
+@use '../vars';
+
+@layer #{vars.$nav-components-layer} {
+  navigation-stack {
+    :where(&) {
+      touch-action: none;
+
+      block-size: var(--100lvh, 100lvh);
+    }
+  }
+}

package/scss/components/_navigation-title.scss

@@ -0,0 +1,10 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  navigation-title {
+    :where(&) {
+      display: grid; //contents;
+    }
+  }
+}

package/scss/components/_picker-view.scss

@@ -0,0 +1,122 @@
+@use '../vars';
+@use '../mixins';
+@use 'sass:string';
+@use 'sass:map';
+
+$picker-ifs: (
+  menu: (
+    --picker--labelstack-display: grid,
+    --picker--stack-grid-template-columns: auto minmax(0, 1fr),
+  ),
+);
+
+$picker-elses: (
+  --picker--stack-grid-template-columns: minmax(0, 1fr), //auto minmax(0, 1fr),
+);
+
+@mixin make-button-affordance() {
+  position: relative;
+
+  grid-auto-flow: column;
+  grid-template-columns: var(--picker-affordance-size) minmax(0, 1fr);
+  column-gap: var(--picker-affordance-col-gap);
+
+  @include mixins.make-marker-pseudos(vars.$picker-affordance, before);
+
+  &::before {
+    display: grid;
+
+    block-size: var(--picker-affordance-size);
+    inline-size: var(--picker-affordance-size);
+
+    background-color: var(--menuitemtext, var(--text));
+
+    transform: var(--tablecol--after-rotate,);
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: transform 100ms ease-out;
+      will-change: transform;
+    }
+
+    opacity: 0;
+  }
+
+  &[aria-selected='true']::before {
+    opacity: 1;
+  }
+}
+
+@layer #{vars.$components-layer} {
+  picker-view {
+    :where(&) {
+      grid-template-columns: minmax(0, 1fr);
+
+      grid-template-rows: minmax(0, 1fr);
+    }
+
+    :where(&)::part(picker-stack) {
+      grid-template-columns: var(--picker--stack-grid-template-columns,);
+
+      grid-template-rows: minmax(0, 1fr);
+    }
+
+    :where(&)::part(picker-label-stack) {
+      display: var(--picker--labelstack-display, none); // display: none;
+    }
+
+    :where(&) {
+      // --picker--stack-grid-template-columns: auto minmax(0, 1fr);
+      @include mixins.write-props($picker-elses);
+    }
+
+    :where(tool-bar-item &) {
+      // --picker--labelstack-display: none;
+      // --picker--stack-grid-template-columns: minmax(0, 1fr);
+    }
+
+    :where(form &) {
+      // --picker--labelstack-display: grid;
+      // --picker--stack-grid-template-columns: auto minmax(0, 1fr);
+    }
+
+    :where(& > menu-view > button) {
+      @container style(--picker-style: menu) {
+        @include make-button-affordance;
+      }
+    }
+
+    // SECTION: ifs
+    @supports (x: #{string.unquote('if(else:red)')}) {
+      :where(&) {
+        @include mixins.write-ifs(--picker-style, $picker-ifs, $picker-elses);
+      }
+    }
+
+    // SECTION: ifs polyfill
+    @supports not (x: #{string.unquote('if(else:red)')}) {
+      :where(&:not([picker-style])) {
+        @each $v in vars.$picker-styles {
+          @container style(--picker-style: #{$v}) {
+            @include mixins.write-props(map.get($picker-ifs, $v)); //@include set-picker-style($v);
+          }
+        }
+      }
+      @each $v in vars.$picker-styles {
+        :where(&[picker-style='#{$v}']) {
+          :where(& > menu-view > button) {
+            @include make-button-affordance;
+          }
+
+          @include mixins.write-props(map.get($picker-ifs, $v)); //@include set-picker-style($v);
+        }
+      }
+    }
+
+    // SECTION: attrs finally
+    @supports (x: #{string.unquote('attr(x type(*))')}) {
+      :where(&) {
+        --picker-style: attr(picker-style type(<custom-ident>), inherit);
+      }
+    }
+  }
+}

package/scss/components/_plain-button.scss

@@ -0,0 +1,18 @@
+@use '../vars';
+@use '../placeholders';
+
+@layer #{vars.$components-layer} {
+  [is='plain-button'] {
+    @extend %button;
+
+    :where(&) {
+    }
+  }
+}
+@layer #{vars.$utils-layer} {
+  [is='plain-button'] {
+    :where(&) {
+      text-align: center;
+    }
+  }
+}

package/scss/components/_progress-view.scss

@@ -0,0 +1,98 @@
+@use '../vars';
+
+// @property --progress-view-style {
+//   syntax: 'circular | linear';
+//   inherits: false;
+//   initial-value: circular;
+// }
+@property --progress-view-style-index {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
+@layer #{vars.$components-layer} {
+  progress-view {
+    :where(&) {
+      transition: --progress-view-style-index 1ms step-start;
+
+      grid-template-columns: minmax(0, 1fr);
+
+      place-items: center;
+      place-content: center;
+
+      gap: 0.3rem;
+
+      &::part(progress-line-control) {
+        background-color: var(--gray3);
+
+        inline-size: 100%;
+        block-size: 5px;
+
+        border-radius: var(--pill-border-radius);
+
+        border-left: solid 40px var(--accentColorEffective, var(--accentColor));
+      }
+
+      &::part(progress-circular-control) {
+        position: relative;
+
+        inline-size: 2rem;
+        block-size: 2rem;
+      }
+
+      &::part(progress-circular-blade) {
+        position: absolute;
+        inset: 32.5% auto auto 42.5%;
+        inline-size: 12.5%;
+        block-size: 32.5%;
+        background-color: var(--accentColorEffective, var(--secondary));
+        border-radius: var(--pill-border-radius);
+        will-change: opacity;
+        @media (prefers-reduced-motion: no-preference) {
+          animation: progressViewCircular 1s linear infinite;
+        }
+      }
+      &::part(progress-circular-blade-1) {
+        transform: rotate(45deg) translateY(-100%);
+        animation-delay: -1.625s;
+      }
+      &::part(progress-circular-blade-2) {
+        transform: rotate(90deg) translateY(-100%);
+        animation-delay: -1.5s;
+      }
+      &::part(progress-circular-blade-3) {
+        transform: rotate(135deg) translateY(-100%);
+        animation-delay: -1.375s;
+      }
+      &::part(progress-circular-blade-4) {
+        transform: rotate(180deg) translateY(-100%);
+        animation-delay: -1.25s;
+      }
+      &::part(progress-circular-blade-5) {
+        transform: rotate(225deg) translateY(-100%);
+        animation-delay: -1.125s;
+      }
+      &::part(progress-circular-blade-6) {
+        transform: rotate(270deg) translateY(-100%);
+        animation-delay: -1s;
+      }
+      &::part(progress-circular-blade-7) {
+        transform: rotate(315deg) translateY(-100%);
+        animation-delay: -0.875s;
+      }
+      &::part(progress-circular-blade-8) {
+        transform: rotate(360deg) translateY(-100%);
+        animation-delay: -0.75s;
+      }
+    }
+
+    @each $k, $v in (circular: 0, linear: 1) {
+      &[progress-view-style='#{$k}'] {
+        :where(&) {
+          --progress-view-style-index: #{$v};
+        }
+      }
+    }
+  }
+}