@swiftwc/ui 0.0.0-dev.22 → 0.0.0-dev.24

package/scss/components/_label-view.scss

@@ -5,9 +5,9 @@
 
 // scalpel precision
 @property --label-gap {
-  syntax: '<length>';
+  syntax: '<number>';
   inherits: false;
-  initial-value: 0;
+  initial-value: 0.3;
 }
 
 @property --label-image-size {
@@ -22,18 +22,18 @@
   initial-value: 0;
 }
 
-// @property --label-font-weight {
-//   syntax: 'ultra-light | thin | light | regular | medium | semibold | bold | heavy | black';
-//   inherits: false;
-//   initial-value: regular;
-// }
-
 // @property --label-style {
 //   syntax: 'title-and-icon | icon-only | title-only | automatic';
 //   inherits: true;
 //   initial-value: automatic;
 // }
 
+// @property --label-font-weight {
+//   syntax: 'ultra-light | thin | light | regular | medium | semibold | bold | heavy | black';
+//   inherits: false;
+//   initial-value: regular;
+// }
+
 // @property --label--style {
 //   syntax: '<number>';
 //   inherits: false;
@@ -79,20 +79,10 @@ $label-line-ifs: (
     --label--host-grid-template-rows: minmax(0, 1fr);
     --label--host-align-items: center;
     --label--host-justify-items: normal;
-
-    --label-gap: 0.3rem;
-    --label--host-gap: var(--label-gap);
-
-    --label--iconstack-display: grid;
-    --label--titlestack-display: grid;
   } @else if $label-style == h-icon-only {
     --label-style: icon-only;
-
-    --label--iconstack-display: grid;
   } @else if $label-style == h-title-only {
     --label-style: title-only;
-
-    --label--titlestack-display: grid;
   } @else if $label-style == v-title-and-icon {
     --label-style: title-and-icon;
 
@@ -100,42 +90,13 @@ $label-line-ifs: (
     --label--host-grid-template-rows: auto minmax(0, 1fr);
     --label--host-align-items: normal;
     --label--host-justify-items: center;
-
-    --label-gap: 0.3rem;
-    --label--host-gap: var(--label-gap);
-
-    --label--iconstack-display: grid;
-    --label--titlestack-display: grid;
   } @else if $label-style == v-icon-only {
     --label-style: icon-only;
-
-    --label--iconstack-display: grid;
   } @else if $label-style == v-title-only {
     --label-style: title-only;
-
-    --label--titlestack-display: grid;
   }
 }
 
-// @mixin set-label-truncation-mode($value) {
-//   @if $value == 'tail' {
-//     --label--overflow: hidden;
-
-//     --label--text-overflow: ellipsis;
-//   }
-// }
-
-// @mixin set-label-line-limit($value) {
-//   @if $value == 1 {
-//     --label--host-white-space: nowrap;
-//   } @else {
-//     --label--host-white-space: normal;
-//     --label--display: -webkit-box;
-//     --label--box-orient: vertical;
-//     --label--line-clamp: #{$value};
-//   }
-// }
-
 @mixin set-label-font($value) {
   --label--titlestack-font-size: var(--label-#{$value}-font-size);
   --label--titlestack-line-height: var(--label-#{$value}-line-height);
@@ -172,67 +133,19 @@ $label-line-ifs: (
 @layer #{vars.$components-layer} {
   label-view {
     :where(&) {
-      // transition: --label--style 1ms step-start;
-
       padding-inline: var(--label-padding-inline);
 
       align-items: var(--label--host-align-items,);
       justify-items: var(--label--host-justify-items,);
-      // place-items: center;
-      // place-content: center;
 
-      // grid-auto-flow: column;
-      // grid-auto-columns: minmax(0, 1fr);
       grid-template-columns: var(--label--host-grid-template-columns,);
       grid-template-rows: var(--label--host-grid-template-rows,);
-      // grid-template-areas: 'label-image-stack label-title-stack';
 
-      gap: var(--label--host-gap,); //;
+      gap: calc(var(--label-gap) * 1rem);
 
-      // --label-image-size: 2rem;
       --label-imagestack-fontsize: calc(var(--label-image-size) * 1rem);
-      // gap: 0;
 
       white-space: var(--label--host-white-space,);
-
-      &::part(label-image-stack),
-      &::part(label-title-stack) {
-        // display: none;
-
-        grid-auto-columns: minmax(0, 1fr);
-        grid-auto-rows: minmax(0, 1fr);
-        // grid-template-columns: subgrid;
-        // grid-template-rows: subgrid;
-      }
-
-      &::part(label-image-stack) {
-        display: var(--label--iconstack-display, none);
-      }
-
-      &::part(label-title-stack) {
-        display: var(--label--titlestack-display, none);
-      }
-
-      &::part(label-image-stack) {
-        aspect-ratio: 1 / 1;
-
-        inline-size: var(--label-imagestack-fontsize);
-        font-size: var(--label-imagestack-fontsize);
-
-        // line-height: 1;
-
-        // grid-area: label-image-stack;
-      }
-
-      &::part(label-title-stack) {
-        text-decoration: underline;
-
-        font-size: var(--label--titlestack-font-size,);
-        line-height: var(--label--titlestack-line-height,);
-        font-weight: var(--label--titlestack-font-weight,);
-
-        // grid-area: label-title-stack;
-      }
     }
 
     &:has(> [slot='image']) {
@@ -241,6 +154,7 @@ $label-line-ifs: (
         // background-color: green;
       }
     }
+
     &:has(> :not([slot])) {
       :where(&) {
         --label--has-title: yes;
@@ -250,7 +164,6 @@ $label-line-ifs: (
 
     > :not([slot]) {
       :where(&) {
-        // grid-area: label-title-stack;
         overflow: var(--label--overflow,);
 
         text-overflow: var(--label--text-overflow,);
@@ -261,14 +174,25 @@ $label-line-ifs: (
 
         line-clamp: var(--label--line-clamp,);
         -webkit-line-clamp: var(--label--line-clamp,);
+
+        text-decoration: underline;
+
+        font-size: var(--label--titlestack-font-size,);
+
+        line-height: var(--label--titlestack-line-height,);
+
+        font-weight: var(--label--titlestack-font-weight,);
       }
     }
 
-    // > [slot='image'] {
-    //   :where(&:is(i)) {
-    //     line-height: 1.1;
-    //   }
-    // }
+    > [slot='image'] {
+      aspect-ratio: 1 / 1;
+
+      inline-size: var(--label-imagestack-fontsize);
+      block-size: var(--label-imagestack-fontsize);
+
+      font-size: var(--label-imagestack-fontsize);
+    }
 
     // vars
     @supports (x: #{string.unquote('if(else:red)')}) {
@@ -306,17 +230,6 @@ $label-line-ifs: (
             style(--label-style: title-and-icon): if(style(--label-flow: vertical): auto minmax(0, 1fr) ; else: minmax(0, 1fr) ;) ;
             else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): if(style(--label-flow: vertical): auto minmax(0, 1fr) ; else: minmax(0, 1fr) ;) ; else: minmax(0, 1fr) ;) ;
         );
-
-        --label-gap: if(style(--label-style: title-and-icon): 0.3rem ; else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): 0.3rem ;) ;);
-        --label--host-gap: if(style(--label-style: title-and-icon): var(--label-gap) ; else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): var(--label-gap) ;) ;);
-
-        --label--iconstack-display: if(
-          style(--label-style: icon-only): grid ; style(--label-style: title-only): none ; style(--label-style: title-and-icon): grid ; else: if(style(--label--has-icon: yes): grid ; else: none;) ;
-        );
-
-        --label--titlestack-display: if(
-          style(--label-style: icon-only): none ; style(--label-style: title-only): grid ; style(--label-style: title-and-icon): grid ; else: if(style(--label--has-title: yes): grid ; else: none;) ;
-        );
       }
     }
 
@@ -335,15 +248,12 @@ $label-line-ifs: (
       }
       @container not style(--label-style) {
         &:not([label-style]) {
-          // :where(&[image-hint='yes'][title-hint='yes']) {
           :where(&:has(> [slot='image']):has(> :not([slot]))) {
             @include set-label-style(h-title-and-icon);
           }
-          // :where(&[image-hint='yes']:not([title-hint='yes'])) {
           :where(&:has(> [slot='image']):not(:has(> :not([slot])))) {
             @include set-label-style(h-icon-only);
           }
-          // :where(&[title-hint='yes']:not([image-hint='yes'])) {
           :where(&:has(> :not([slot])):not(:has(> [slot='image']))) {
             @include set-label-style(h-title-only);
           }

package/scss/components/_menu-view.scss

@@ -108,6 +108,9 @@
     // }
 
     // SECTION: componentize
+    :where(&)::part(menu-summary) {
+      @include mixins.componentize(menusummary);
+    }
     :where(& > button, & > [is='disclosure-group'] > button, & > [is='disclosure-group'] > summary),
     :where(& > menu-view)::part(menu-summary) {
       @include mixins.componentize(menuitem);
@@ -130,6 +133,15 @@
 // componentize
 @layer #{vars.$colors-layer} {
   menu-view {
+    @include mixins.add-focus-visible-state('::part(menu-summary)') {
+      --menusummaryface: var(--menusummaryhighlightface,);
+      --menusummarytext: var(--menusummaryhighlighttext,);
+    }
+    @include mixins.add-hover-state('::part(menu-summary)') {
+      --menusummaryface: var(--menusummaryhighlightface,);
+      --menusummarytext: var(--menusummaryhighlighttext,);
+    }
+
     > button,
     > [is='disclosure-group'] > button,
     > [is='disclosure-group'] > summary {
@@ -170,6 +182,11 @@
 // componentize
 @layer #{vars.$ui-layer} {
   menu-view {
+    @include mixins.add-active-state('::part(menu-summary)') {
+      --menusummaryface: var(--menusummaryactiveface,);
+      --menusummarytext: var(--menusummaryactivetext,);
+    }
+
     > button,
     > [is='disclosure-group'] > button,
     > [is='disclosure-group'] > summary {

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

@@ -138,7 +138,7 @@
 
       > scroll-view {
         :where(&) {
-          border-right: solid 1px light-dark(var(--nav-split-view-separator-color), var(--nav-split-view-separator-color-dark));
+          border-right: solid 1px var(--separator);
           // --scroll-view-box-shadow: none;
         }
       }
@@ -263,7 +263,7 @@
                 }
 
                 :where(& > scroll-view) {
-                  border-right: solid 1px light-dark(var(--nav-split-view-separator-color), var(--nav-split-view-separator-color-dark));
+                  border-right: solid 1px var(--separator);
                   // --scroll-view-box-shadow: none;
                 }
 
@@ -338,7 +338,7 @@
               }
 
               :where(& > scroll-view) {
-                border-right: solid 1px light-dark(var(--nav-split-view-separator-color), var(--nav-split-view-separator-color-dark));
+                border-right: solid 1px var(--separator);
                 // --scroll-view-box-shadow: none;
               }
 

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};
+        }
+      }
+    }
+  }
+}

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

@@ -29,6 +29,12 @@
       --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])) {
@@ -46,7 +52,11 @@
       place-content: center;
     }
 
-    // NOTE: labels w/ text in toolbar items have paddings
+    > button {
+      @include mixins.takeover-button-slots;
+    }
+
+    // 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])) {
@@ -56,14 +66,14 @@
     }
 
     // NOTE: on fine screens, toolbar icons are a little smaller
-    @media (pointer: fine) {
-      > button > label-view,
-      > menu-view > label-view {
-        :where(&) {
-          --label-image-size: 1.8;
-        }
-      }
-    }
+    // @media (pointer: fine) {
+    //   > button > label-view,
+    //   > menu-view > label-view {
+    //     :where(&) {
+    //       --label-image-size: 1.8;
+    //     }
+    //   }
+    // }
   }
 
   // tool-bar-item[slot],
@@ -83,54 +93,43 @@
   // }
 }
 
-@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));
-    }
-    @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.$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));
+// }
+// @include mixins.add-hover-state('::part(menu-summary)') {
+//   --toolbaritemface: var(--toolbaritemhighlightface,); //light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
+// }
+// }
+
+// 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,
@@ -150,11 +149,11 @@
   //   // }
   // }
 
-  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));
-    }
-  }
+  // 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])) {

package/scss/mixins/_button.scss

@@ -0,0 +1,42 @@
+@mixin takeover-button-slots {
+  > [slot] {
+    :where(&) {
+      // take over NOTE: NO other propsm they break grids!! KISS pos+visibility+opacity
+      position: absolute;
+
+      visibility: collapse;
+    }
+  }
+  > [slot='overlay'] {
+    :where(&) {
+      visibility: visible;
+    }
+  }
+  &:not(:has(> :not([slot]))) > [slot='placeholder'] {
+    :where(&) {
+      position: relative;
+
+      visibility: visible;
+    }
+  }
+
+  &:has(> [slot='overlay']) {
+    > *:not([slot='overlay']) {
+      :where(&) {
+        opacity: 0;
+      }
+    }
+
+    > [slot='overlay'] {
+      :where(&) {
+        @media (prefers-reduced-motion: no-preference) {
+          transition: opacity ease-out 200ms;
+        }
+
+        @starting-style {
+          opacity: 0;
+        }
+      }
+    }
+  }
+}

package/scss/mixins/_color.scss

@@ -0,0 +1,16 @@
+@use '../vars';
+@use '../functions';
+@use 'sass:string';
+@use 'sass:map';
+@use 'sass:list';
+
+@mixin wire-tinted-glass($prop) {
+  --#{$prop}face: light-dark(var(--accentColor), var(--accentColor));
+  --#{$prop}text: light-dark(oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none), oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none));
+
+  --#{$prop}highlightface: light-dark(oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h), oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h));
+  --#{$prop}highlighttext: light-dark(oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none), oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none));
+
+  --#{$prop}activeface: light-dark(oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h), oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h));
+  --#{$prop}activetext: light-dark(oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none), oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none));
+}

package/scss/mixins/_index.scss

@@ -360,7 +360,7 @@
     $result: string.slice($result, 1, string.length($result) - 1);
     $final-result: functions.str-replace($result, 'minmax(0,1fr)', 'spacer');
     @debug $final-result, $template;
-    :where(&[template='#{$result}']) {
+    :where(&[template='#{$final-result}']) {
       #{$prop}: $template;
     }
   }

package/scss/placeholders/_buttons.scss

@@ -24,50 +24,7 @@
       --btnradiusbr: var(--regular-btn-border-radius);
     }
 
-    > [slot] {
-      :where(&) {
-        position: absolute;
-
-        visibility: collapse;
-
-        // take over
-        max-inline-size: 90%;
-
-        max-block-size: 90%;
-
-        border-radius: inherit;
-      }
-    }
-    > [slot='overlay'] {
-      :where(&) {
-        visibility: visible;
-      }
-    }
-    &:not(:has(> :not([slot]))) > [slot='placeholder'] {
-      :where(&) {
-        position: relative;
-
-        visibility: visible;
-      }
-    }
-
-    &:has(> [slot='overlay']) {
-      > *:not([slot='overlay']) {
-        :where(&) {
-          opacity: 0;
-        }
-      }
-
-      > [slot='overlay'] {
-        :where(&) {
-          transition: opacity ease-out 200ms;
-
-          @starting-style {
-            opacity: 0;
-          }
-        }
-      }
-    }
+    @include mixins.takeover-button-slots;
 
     @each $size, $media in vars.$button-sizes {
       // @if (regular != $size) {