@swiftwc/ui 0.0.0-dev.11 → 0.0.0-dev.111

package/scss/components/_form-view.scss

@@ -1,8 +1,9 @@
+@use 'sass:string';
+@use 'sass:map';
 @use '../vars';
+@use '../maps';
 @use '../mixins';
 @use '../placeholders';
-@use 'sass:string';
-@use 'sass:map';
 
 $form-ifs: (
   inset: (
@@ -84,6 +85,7 @@ $form-ifs: (
     --list--opensummary-color: var(--sidebarform-opensummary-color,),
     //
     // --list--item-grid-template-columns: minmax(0, 1fr),
+    --list--accessories-size: 0rem,
     --list--accessories-display: none,
     //
     --list--rootsummary-marker-display: marker-trailing,
@@ -105,7 +107,7 @@ $form-elses: (
   --list--accessories-display: grid,
 );
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$list-components-layer} {
   [is='form-view'] {
     &:not(& &, list-view &, table-view &, [is='tab-bar'] > &) {
       @extend %list;
@@ -115,13 +117,6 @@ $form-elses: (
         --list--section-gap: var(--form-gap);
 
         @include mixins.write-props($form-elses);
-
-        // --list--item-padding-inline-start: var(--form-item-padding-inline-start);
-        // --list--item-padding-inline-end: var(--form-item-padding-inline-end);
-        // --list--item-padding-block-start: var(--form-item-padding-block-start);
-        // --list--item-padding-block-end: var(--form-item-padding-block-end);
-
-        // --list--item-background-color: var(--list-item-background-color,);
       }
 
       :where(section-view:has(> [slot='header']), section-view:has(> [slot='footer']) + section-view) {
@@ -131,29 +126,25 @@ $form-elses: (
       // SECTION: ifs
       @supports (x: #{string.unquote('if(else:red)')}) {
         :where(&) {
-          @include mixins.write-ifs(--form-style, $form-ifs, $form-elses);
-          // --list--root-padding-inline: if(style(--form-style: inset-grouped): 0.5rem ; style(--form-style: sidebar): 0.5rem ;);
-
-          // --toolbaritemradius: if(style(--form-style: inset-grouped): 1rem ; style(--form-style: sidebar): 1rem ;);
-
-          // --list--separator-block-size: if(style(--form-style: sidebar): 0px ;);
-          // --list--separator-visibility: if(style(--form-style: collapse): 0px ;);
-
-          // --list--root-background-color: if(style(--form-style: sidebar): transparent ;);
+          @include mixins.write-ifs(--form-style, $form-ifs, $form-elses); // --list--root-padding-inline: if(style(--form-style: inset-grouped): 0.5rem ; style(--form-style: sidebar): 0.5rem ;);
         }
       }
 
       // SECTION: ifs polyfill
       @supports not (x: #{string.unquote('if(else:red)')}) {
         :where(&:not([form-style])) {
-          @each $v in vars.$form-styles {
+          @each $v in maps.$form-styles-names {
             @container style(--form-style: #{$v}) {
+              --form-style: #{$v}; // NOTE: used ONLY for tinted buttons
+
               @include mixins.write-props(map.get($form-ifs, $v)); //@include set-form-style($v);
             }
           }
         }
-        @each $v in vars.$form-styles {
+        @each $v in maps.$form-styles-names {
           :where(&[form-style='#{$v}']) {
+            --form-style: #{$v}; // NOTE: used ONLY for tinted buttons
+
             @include mixins.write-props(map.get($form-ifs, $v)); //@include set-form-style($v);
           }
         }
@@ -182,13 +173,61 @@ $form-elses: (
         }
       }
 
+      // NOTE: on safari takes it from manually setting it above
+      // make list-buttons tintable
+      @container not style(--form-style: sidebar) {
+        button[list-item-tint] {
+          :where(&) {
+            --itemhighlightface: var(--accentColor3);
+            --itemactiveface: var(--accentColor3);
+          }
+          &:not([navigation-link]) {
+            --itemtext: var(--accentColor);
+            --itemhighlighttext: var(--accentColor);
+            --itemactivetext: var(--accentColor);
+          }
+        }
+      }
+      @container style(--form-style: sidebar) {
+        button[list-item-tint] {
+          :where(&) {
+            --itemhighlightface: var(--accentColor);
+            --itemactiveface: var(--accentColor);
+          }
+        }
+      }
+
       // FINALLY AFTER ALL IFS
       // TODO: Also apply this on state of sidebar w/ full-screen detail 2/2
-      @include mixins.if-2col-split-view-fits {
-        :where(navigation-split-view > scroll-view &, navigation-split-view > body-view > scroll-view &) {
-          // --list--item-grid-template-columns: minmax(0, 1fr);
+      @include mixins.if-content-view-list {
+        :where(&) {
+          --list--accessories-size: 0rem;
           --list--accessories-display: none;
+
+          --insetform-highlighteditem-background-color: var(--accentColor);
+          --insetform-highlighteditem-color: var(--tintcontrast);
+          --insetgroupedform-highlighteditem-background-color: var(--accentColor);
+          --insetgroupedform-highlighteditem-color: var(--tintcontrast);
         }
+
+        // override tint colors of tintable buttons
+        @container style(--list-style: inset) or style(--list-style: inset-grouped) {
+          button[list-item-tint] {
+            :where(&) {
+              // --itemhighlighttext: var(--tintcontrast);
+              // --itemactivetext: var(--tintcontrast);
+
+              --itemhighlightface: var(--accentColor);
+              --itemactiveface: var(--accentColor);
+            }
+          }
+        }
+      }
+
+      // Hide accessories
+      :where(&[navigation-link-indicator-visibility='hidden']) {
+        --list--accessories-size: 0rem;
+        --list--accessories-display: none;
       }
     }
   }

package/scss/components/_glass-button.scss

@@ -1,4 +1,6 @@
 @use '../vars';
+@use '../maps';
+@use '../mixins';
 @use '../placeholders';
 
 @layer #{vars.$components-layer} {
@@ -11,14 +13,49 @@
       box-shadow: var(--toolbar-cell-box-shadow);
 
       transform: var(--btn--scale,);
+
+      --btnpadistart: var(--regular-btn-padding);
+      --btnpadiend: var(--regular-btn-padding);
+      --btnpadbstart: var(--regular-btn-padding);
+      --btnpadbend: var(--regular-btn-padding);
+    }
+
+    @each $size, $media in maps.$button-sizes-map {
+      :where(&[control-size='#{$size}']) {
+        --btnpadistart: var(--#{$size}-btn-padding);
+        --btnpadiend: var(--#{$size}-btn-padding);
+        --btnpadbstart: var(--#{$size}-btn-padding);
+        --btnpadbend: var(--#{$size}-btn-padding);
+      }
     }
 
     :where(&[role='destructive']) {
+      --accentColorEffective: var(--red);
+      --accentColorEffective4: var(--red4);
+
       --accentColor: var(--red);
       --accentColor2: var(--red2);
       --accentColor3: var(--red3);
       --accentColor4: var(--red4);
       --accentColor5: var(--red5);
     }
+    :where(&[role='confirm']) {
+      --accentColorEffective: var(--blue);
+      --accentColorEffective4: var(--blue4);
+
+      --accentColor: var(--blue);
+      --accentColor2: var(--blue2);
+      --accentColor3: var(--blue3);
+      --accentColor4: var(--blue4);
+      --accentColor5: var(--blue5);
+    }
+  }
+}
+
+@layer #{vars.$utils-layer} {
+  [is='glass-button'] {
+    :where(&) {
+      text-align: center;
+    }
   }
 }

package/scss/components/_glass-prominent-button.scss

@@ -1,4 +1,6 @@
 @use '../vars';
+@use '../maps';
+@use '../mixins';
 @use '../placeholders';
 
 @layer #{vars.$components-layer} {
@@ -11,14 +13,59 @@
       box-shadow: var(--toolbar-cell-box-shadow);
 
       transform: var(--btn--scale,);
+
+      --btnpadistart: var(--regular-btn-padding);
+      --btnpadiend: var(--regular-btn-padding);
+      --btnpadbstart: var(--regular-btn-padding);
+      --btnpadbend: var(--regular-btn-padding);
+    }
+
+    @each $size, $media in maps.$button-sizes-map {
+      :where(&[control-size='#{$size}']) {
+        --btnpadistart: var(--#{$size}-btn-padding);
+        --btnpadiend: var(--#{$size}-btn-padding);
+        --btnpadbstart: var(--#{$size}-btn-padding);
+        --btnpadbend: var(--#{$size}-btn-padding);
+      }
     }
 
     :where(&[role='destructive']) {
+      --accentColorEffective: var(--red);
+      --accentColorEffective4: var(--red4);
+
       --accentColor: var(--red);
       --accentColor2: var(--red2);
       --accentColor3: var(--red3);
       --accentColor4: var(--red4);
       --accentColor5: var(--red5);
     }
+    :where(&[role='confirm']) {
+      --accentColorEffective: var(--blue);
+      --accentColorEffective4: var(--blue4);
+
+      --accentColor: var(--blue);
+      --accentColor2: var(--blue2);
+      --accentColor3: var(--blue3);
+      --accentColor4: var(--blue4);
+      --accentColor5: var(--blue5);
+    }
+  }
+}
+
+@layer #{vars.$colors-layer} {
+  [is='glass-prominent-button'] > * {
+    :where(&) {
+      @include mixins.takeover-color-vars(btn);
+      // --secondary: var(--btntext);
+      // --blue: var(--btntext);
+    }
+  }
+}
+
+@layer #{vars.$utils-layer} {
+  [is='glass-prominent-button'] {
+    :where(&) {
+      text-align: center;
+    }
   }
 }

package/scss/components/_group-box.scss

@@ -0,0 +1,27 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  group-box {
+    :where(&) {
+      background: var(--groupbox--background);
+
+      padding-inline: var(--groupbox--padding-inline);
+      padding-block: var(--groupbox--padding-block);
+
+      border-radius: var(--groupbox--border-radius);
+
+      --groupbox--background: var(--red);
+      --groupbox--padding-inline: 1rem;
+      --groupbox--padding-block: 1rem;
+      --groupbox--border-radius: 1rem;
+    }
+
+    :nth-child(1 of image-view),
+    :nth-child(1 of label-view) {
+      :where(&) {
+        --label-image-size: 5;
+      }
+    }
+  }
+}

package/scss/components/_h-flex-stack.scss

@@ -0,0 +1,23 @@
+@use '../vars';
+
+@layer #{vars.$components-layer} {
+  h-flex-stack {
+    :where(&) {
+      display: flex;
+      flex-flow: row nowrap;
+
+      place-items: safe center;
+      place-content: safe center;
+    }
+
+    :where(& > *) {
+      max-block-size: 100%;
+    }
+
+    > [frame-height='infinity'] {
+      :where(&) {
+        flex-grow: 1;
+      }
+    }
+  }
+}

package/scss/components/_h-stack.scss

@@ -1,8 +1,8 @@
-@use '../vars';
 @use 'sass:string';
 @use 'sass:list';
-
-$h-stack-templates: ((minmax(0, 1fr) auto), (auto minmax(0, 1fr) auto auto), (repeat(4, minmax(0, 1fr))), (repeat(2, minmax(0, 1fr)) auto));
+@use '../vars';
+@use '../maps';
+@use '../mixins';
 
 @layer #{vars.$components-layer} {
   h-stack {
@@ -10,8 +10,8 @@ $h-stack-templates: ((minmax(0, 1fr) auto), (auto minmax(0, 1fr) auto auto), (re
       grid-auto-flow: column;
       grid-template-rows: minmax(0, 1fr);
 
-      place-items: center;
-      place-content: center;
+      place-items: safe center;
+      place-content: safe center;
 
       gap: 1rem;
     }
@@ -23,17 +23,6 @@ $h-stack-templates: ((minmax(0, 1fr) auto), (auto minmax(0, 1fr) auto auto), (re
     //   }
     // }
 
-    @each $template in $h-stack-templates {
-      $parts: string.split('#{$template}', ', ');
-      $result: '';
-      @each $part in $parts {
-        $result: $result + '#{$part},';
-      }
-      $result: string.slice($result, 1, string.length($result) - 1);
-      @debug $result, $template;
-      :where(&[template='#{$result}']) {
-        grid-template-columns: $template;
-      }
-    }
+    @include mixins.make-template(maps.$stack-templates-list-vals, grid-template-columns);
   }
 }

package/scss/components/_image-view.scss

@@ -0,0 +1,20 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  image-view {
+    :where(&) {
+      // --image--fontsize: var(--label-imagestack-fontsize, calc(var(--label-image-size) * 1rem));
+      --image--fontsize: calc(var(--label-image-size) * 1rem);
+    }
+
+    > :not([slot]) {
+      :where(&) {
+        inline-size: var(--image--fontsize);
+        block-size: var(--image--fontsize);
+
+        font-size: var(--image--fontsize);
+      }
+    }
+  }
+}

package/scss/components/_index.scss

@@ -7,13 +7,49 @@
   navigation-stack,
   navigation-split-view,
   navigation-large-title,
+  navigation-title,
   scroll-view,
   body-view,
   tab-view,
+  image-view,
+  list-view,
+  table-view,
+  content-unavailable,
+  progress-view,
+  tool-bar-item,
+  tool-bar-item-group,
+  fine-tooltip,
+  sidebar-toggle,
+  v-stack,
+  h-stack,
+  group-box,
+  tool-bar,
+  label-view,
+  text-view,
+  labeled-content,
+  menu-view,
+  section-view,
+  text-field,
+  detail-placeholder,
+  sticky-container,
+  picker-view,
+  h-divider,
+  v-divider {
+    :where(&:not([hidden])) {
+      display: grid;
+    }
+
+    :where(tab-view:has(&:not(:defined)), navigation-split-view:has(&:not(:defined)), navigation-stack:has(&:not(:defined))) {
+      visibility: hidden;
+    }
+  }
+
+  [is='search-view'],
   [is='sidebar-view'],
   [is='tab-bar'],
   [is='full-screen'],
   [is='confirmation-dialog'],
+  [is='alert-dialog'],
   [is='sheet-view'],
   [is='form-view'],
   [is='disclosure-group'],
@@ -24,27 +60,20 @@
   [is='bordered-prominent-button'],
   [is='plain-button'],
   [is='glass-button'],
-  [is='glass-prominent-button'],
-  list-view,
-  table-view,
-  tool-bar-item,
-  tool-bar-item-group,
-  sidebar-toggle,
-  [is='form-view'],
-  v-stack,
-  h-stack,
-  tool-bar,
-  label-view,
-  menu-view,
-  section-view,
-  text-field,
-  detail-placeholder,
-  picker-view {
+  [is='glass-prominent-button'] {
     :where(&:not([hidden])) {
       display: grid;
     }
   }
 
+  :where(labeled-content)::part(labeled-content-container),
+  :where(labeled-content)::part(labeled-content-container),
+  :where(labeled-content)::part(labeled-content-label-stack),
+  :where(labeled-content)::part(labeled-content-value-stack),
+  :where(progress-view)::part(progress-control),
+  :where(content-unavailable)::part(content-unavailable-title-stack),
+  :where(content-unavailable)::part(content-unavailable-description-stack),
+  :where(content-unavailable)::part(content-unavailable-actions-stack),
   :where(table-view)::part(table-container),
   :where(table-view)::part(table-column-stack),
   :where(table-view)::part(table-header-stack),
@@ -55,6 +84,10 @@
   :where(table-view)::part(table-footer-leading-stack),
   :where(table-view)::part(table-footer-principal-stack),
   :where(table-view)::part(table-footer-trailing-stack),
+  :where(toggle-view)::part(toggle-stack),
+  :where(toggle-view)::part(toggle-label-stack),
+  :where(toggle-view)::part(toggle-input-stack),
+  :where(toggle-view)::part(text-field-form-input),
   :where(text-field)::part(text-field-stack),
   :where(text-field)::part(text-field-label-stack),
   :where(text-field)::part(text-field-input-stack),
@@ -110,8 +143,8 @@
     [is='tab-bar'] [is='tab-item'],
     tool-bar-item [is='disclosure-group'] > button,
     tool-bar-item [is='disclosure-group'] > summary
-  ),
-  :where(menu-view)::part(menu-summary) {
+  ) {
+    // :where(menu-view)::part(menu-summary) {
     // display: grid;
     // place-items: center;
     // place-content: center;
@@ -170,7 +203,7 @@
   tool-bar-item > button,
   tool-bar-item > input,
   [is='tab-bar'] [is='tab-item'],
-  menu-view > button,
+  // menu-view > button,
   tool-bar-item [is='disclosure-group'] > button,
   tool-bar-item [is='disclosure-group'] > summary {
     @include mixins.add-focus-visible-state {
@@ -182,16 +215,16 @@
       --toolbaritemtext: var(--toolbaritemhighlighttext,);
     }
   }
-  menu-view {
-    @include mixins.add-focus-visible-state('::part(menu-summary)') {
-      --toolbaritemface: var(--toolbaritemhighlightface,);
-      --toolbaritemtext: var(--toolbaritemhighlighttext,);
-    }
-    @include mixins.add-hover-state('::part(menu-summary)') {
-      --toolbaritemface: var(--toolbaritemhighlightface,);
-      --toolbaritemtext: var(--toolbaritemhighlighttext,);
-    }
-  }
+  // menu-view {
+  //   @include mixins.add-focus-visible-state('::part(menu-summary)') {
+  //     --toolbaritemface: var(--toolbaritemhighlightface,);
+  //     --toolbaritemtext: var(--toolbaritemhighlighttext,);
+  //   }
+  //   @include mixins.add-hover-state('::part(menu-summary)') {
+  //     --toolbaritemface: var(--toolbaritemhighlightface,);
+  //     --toolbaritemtext: var(--toolbaritemhighlighttext,);
+  //   }
+  // }
   // itemize
   // list-view,
   // [is='form-view'] {
@@ -212,7 +245,7 @@
   tool-bar-item > button,
   tool-bar-item > input,
   [is='tab-bar'] [is='tab-item'],
-  menu-view > button,
+  // menu-view > button,
   tool-bar-item [is='disclosure-group'] > button,
   tool-bar-item [is='disclosure-group'] > summary {
     @include mixins.add-active-state {
@@ -220,12 +253,12 @@
       --toolbaritemtext: var(--toolbaritemactivetext,);
     }
   }
-  menu-view {
-    @include mixins.add-active-state('::part(menu-summary)') {
-      --toolbaritemface: var(--toolbaritemactiveface,);
-      --toolbaritemtext: var(--toolbaritemactivetext,);
-    }
-  }
+  // menu-view {
+  //   @include mixins.add-active-state('::part(menu-summary)') {
+  //     --toolbaritemface: var(--toolbaritemactiveface,);
+  //     --toolbaritemtext: var(--toolbaritemactivetext,);
+  //   }
+  // }
   // itemize
   // list-view,
   // [is='form-view'] {