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

package/scss/components/_disclosure-group.scss

@@ -1,80 +1,179 @@
 @use '../vars';
 @use '../mixins';
+@use 'sass:string';
 
 @layer #{vars.$components-layer} {
   [is='disclosure-group'] {
-    display: grid;
+    :where(&) {
+      overflow: clip;
 
-    overflow: clip;
+      --disclosure--host-details-content-block-size: 0;
 
-    summary {
-      list-style: none;
+      --disclosure--summary-grid-template-columns: ;
+      --disclosure--summary-grid-auto-flow: ;
+      --disclosure--summary-gap: ;
+
+      --disclosure--marker-display: none;
+      --disclosure--marker-transform: ;
     }
-    // summary::marker {
-    //   color: blue;
-    //   display: none;
-    //   content: '→';
-    //   // content: "66";
-    //   list-style-type: square;
-    //   position: absolute;
-    //   background-color: red;
-    // }
 
-    &::details-content {
-      background: transparent !important;
-      block-size: 0;
+    @supports (x: #{string.unquote('if(else:red)')}) {
+      :where(&) {
+        --disclosure--marker-display: if(style(--disclosure-style: marker-trailing): ; style(--disclosure-style: marker-leading): ; else: none;);
+
+        --disclosure--summary-grid-auto-flow: if(style(--disclosure-style: marker-trailing): column ; style(--disclosure-style: marker-leading): column ;);
+
+        --disclosure--summary-gap: if(style(--disclosure-style: marker-trailing): 0.1rem ; style(--disclosure-style: marker-leading): 0.1rem ;);
 
-      // display: grid;
+        --disclosure--summary-grid-template-columns: if(style(--disclosure-style: marker-trailing): minmax(0, 1fr) auto ; style(--disclosure-style: marker-leading): auto minmax(0, 1fr) ;);
+
+        --disclosure--marker-order: if(style(--disclosure-style: marker-leading): -1 ;);
+      }
+    }
 
-      transition:
-        block-size var(#{vars.$disclosure-group-animation-duration-css-prop})
-          allow-discrete var(--disclosure-group-animation-easing),
-        content-visibility
-          var(#{vars.$disclosure-group-animation-duration-css-prop})
-          allow-discrete var(--disclosure-group-animation-easing);
-      will-change: block-size, content-visibility;
+    @supports not (x: #{string.unquote('if(else:red)')}) {
+      :where(&) {
+        --disclosure-style: ;
+      }
     }
 
-    > *:not(summary) {
-      margin: 0 !important;
+    > summary {
+      :where(&) {
+        gap: var(--disclosure--summary-gap,);
+
+        grid-auto-flow: var(--disclosure--summary-grid-auto-flow,);
+
+        grid-template-columns: var(--disclosure--summary-grid-template-columns,);
+
+        @include mixins.make-marker-pseudos(vars.$disclosure-affordance);
+
+        &::after {
+          display: var(--disclosure--marker-display,);
+
+          block-size: 1rem;
+          inline-size: 1rem;
+
+          background-color: var(--blue);
+
+          transform: var(--disclosure--marker-transform,);
+
+          order: var(--disclosure--marker-order,);
+        }
+      }
+
+      @supports not (x: #{string.unquote('if(else:red)')}) {
+        :where(&) {
+          // @container not (style(--disclosure-style: marker-trailing) or style(--disclosure-style: marker-leading)) {
+          // --disclosure--marker-display: none;
+          // }
+          @container style(--disclosure-style: marker-trailing) or style(--disclosure-style: marker-leading) {
+            --disclosure--marker-display: grid;
+          }
+          @container style(--disclosure-style: marker-trailing) or style(--disclosure-style: marker-leading) {
+            --disclosure--summary-grid-auto-flow: column;
+
+            --disclosure--summary-gap: 0.1rem;
+          }
+          @container style(--disclosure-style: marker-trailing) {
+            --disclosure--summary-grid-template-columns: minmax(0, 1fr) auto;
+          }
+          @container style(--disclosure-style: marker-leading) {
+            --disclosure--summary-grid-template-columns: auto minmax(0, 1fr);
+
+            --disclosure--marker-order: -1;
+          }
+        }
+      }
+    }
+
+    :where(&)::details-content {
+      display: grid;
+
+      background: transparent;
+
+      block-size: var(--disclosure--host-details-content-block-size);
     }
 
+    // :where(& > *:not(summary)) {
+    // margin: 0;
+    // }
+
     &[open] {
-      &::details-content {
-        block-size: auto;
+      :where(&) {
+        --disclosure--host-details-content-block-size: auto;
+
+        --disclosure--marker-transform: rotate(90deg);
       }
     }
-  }
 
-  @supports not (interpolate-size: allow-keywords) {
-    [is='disclosure-group'] {
-      &::details-content {
-        block-size: auto !important;
+    @supports not (interpolate-size: allow-keywords) {
+      :where(&) {
+        grid-template-rows: var(--disclosure--host-grid-template-rows);
 
-        transition:
-          max-height var(#{vars.$disclosure-group-animation-duration-css-prop})
-            allow-discrete var(--disclosure-group-animation-easing),
-          transform var(#{vars.$disclosure-group-animation-duration-css-prop})
-            allow-discrete var(--disclosure-group-animation-easing);
-        will-change: max-height, transform;
+        align-items: start;
+        align-content: start;
 
-        max-height: 0;
+        --disclosure--host-grid-template-rows: auto 0fr;
+
+        --disclosure--host-details-content-block-size: auto;
+      }
+
+      :where(&)::details-content {
+        // block-size: auto;
+
+        content-visibility: visible;
+
+        min-height: 0;
       }
 
       &[open] {
-        &::details-content {
-          max-height: calc(
-            var(#{vars.$disclosure-group-contents-height-css-prop}, 100vh) +
-              100px
-          );
+        :where(&) {
+          --disclosure--host-grid-template-rows: auto 1fr;
+        }
+      }
+    }
+  }
+}
+
+@layer #{vars.$utils-layer} {
+  [is='disclosure-group'] {
+    @supports (x: #{string.unquote('attr(x type(*))')}) {
+      :where(&) {
+        --disclosure-style: attr(disclosure-style type(<custom-ident>), inherit);
+      }
+    }
+    @supports not (x: #{string.unquote('attr(x type(*))')}) {
+      :where(&[disclosure-style='marker-trailing']) {
+        --disclosure-style: marker-trailing;
+
+        // SAFARI FIX (specify manually attr to avoid flashing)
+        @supports not (x: #{string.unquote('if(else:red)')}) {
+          --disclosure--marker-display: grid;
+
+          --disclosure--summary-grid-auto-flow: column;
+
+          --disclosure--summary-gap: 0.1rem;
+
+          --disclosure--summary-grid-template-columns: minmax(0, 1fr) auto;
         }
       }
+      :where(&[disclosure-style='marker-leading']) {
+        --disclosure-style: marker-leading;
+
+        // SAFARI FIX (specify manually attr to avoid flashing)
+        @supports not (x: #{string.unquote('if(else:red)')}) {
+          --disclosure--marker-display: grid;
 
-      &.#{vars.$disclosure-group-animation-close-class} {
-        &::details-content {
-          max-height: 0 !important;
+          --disclosure--summary-grid-auto-flow: column;
+
+          --disclosure--summary-gap: 0.1rem;
+
+          --disclosure--summary-grid-template-columns: auto minmax(0, 1fr);
         }
       }
+      :where(&[disclosure-style='marker-hidden']) {
+        --disclosure-style: ;
+      }
     }
   }
 }

package/scss/components/_fine-tooltip.scss

@@ -0,0 +1,84 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$tab-components-layer} {
+  fine-tooltip {
+    :where(&) {
+      color: var(--text,);
+
+      pointer-events: none;
+      touch-action: none;
+
+      position: fixed;
+
+      inline-size: max-content;
+      block-size: max-content;
+      height: auto; // safari
+
+      max-inline-size: 80vw;
+      max-block-size: 80vh;
+
+      margin-block: var(--tooltip--dialog-margin-block,);
+      margin-inline: var(--tooltip--dialog-margin-inline,);
+
+      transform: var(--tooltip--dialog-scale,) var(--tooltip--dialog-translate,);
+      opacity: var(--tooltip--dialog-opacity,);
+      transform-origin: top;
+
+      position-anchor: --fine-tooltip; // overriden
+      position-area: bottom center;
+
+      overflow: clip;
+      border-radius: 0.9rem;
+
+      backdrop-filter: var(--liquid-glass-backdrop-filter,);
+      box-shadow: var(--menu-popover-box-shadow,);
+
+      padding-block: 0.5rem;
+      padding-inline: 1rem;
+      gap: 0.5rem;
+
+      border: none;
+
+      position-try-fallbacks: --custom-top;
+      position-try-order: most-height;
+      position-visibility: anchors-visible;
+
+      // finally
+      --tooltip--dialog-translate: translateY(-10%);
+      --tooltip--dialog-scale: scale(0.9);
+      --tooltip--dialog-opacity: 0;
+
+      --label--host-white-space: pre-line;
+    }
+
+    &[open] {
+      :where(&) {
+        --tooltip--dialog-margin-block: max(env(safe-area-inset-top), var(--menu-spacing)) max(env(safe-area-inset-bottom), var(--menu-spacing));
+        --tooltip--dialog-margin-inline: max(env(safe-area-inset-left), var(--menu-spacing)) max(env(safe-area-inset-right), var(--menu-spacing));
+
+        --tooltip--dialog-translate: translateY(0);
+        --tooltip--dialog-scale: scale(1);
+        --tooltip--dialog-opacity: 0.9;
+
+        @starting-style {
+          --tooltip--dialog-translate: translateY(-10%);
+          --tooltip--dialog-scale: scale(0.9);
+          --tooltip--dialog-opacity: 0;
+        }
+      }
+    }
+
+    &[closing] {
+      :where(&) {
+        --tooltip--dialog-translate: translateY(-10%);
+        --tooltip--dialog-scale: scale(0.9);
+        --tooltip--dialog-opacity: 0;
+      }
+    }
+  }
+}
+
+@position-try --custom-top {
+  position-area: top center;
+}

package/scss/components/_form-view.scss

@@ -0,0 +1,233 @@
+@use '../vars';
+@use '../mixins';
+@use '../placeholders';
+@use 'sass:string';
+@use 'sass:map';
+
+$form-ifs: (
+  inset: (
+    --list--host-background-color: var(--insetform-background-color,),
+    --list--host-padding-inline: var(--insetform-padding-inline),
+    --list--host-padding-block: var(--insetform-padding-block),
+    //
+    --list--item-color: var(--insetform-item-color,),
+    --list--item-background-color: var(--insetform-item-background-color,),
+    --list--highlighteditem-color: var(--insetform-highlighteditem-color,),
+    --list--highlighteditem-background-color: var(--insetform-highlighteditem-background-color,),
+    --list--item-border-radius: var(--insetform-item-border-radius),
+    //
+    --list--adjacentdetailsitem-border-radius: 0,
+    //
+    --list--details-background-color: var(--insetform-openitem-background-color,),
+    --list--details-color: var(--insetform-openitem-color,),
+    --list--opendetails-background-color: var(--insetform-openitem-background-color,),
+    --list--opendetails-color: var(--insetform-openitem-color,),
+    --list--opensummary-background-color: var(--insetform-opensummary-background-color,),
+    --list--opensummary-color: var(--insetform-opensummary-color,),
+  ),
+  inset-grouped: (
+    --list--host-background-color: var(--insetgroupedform-background-color,),
+    --list--host-padding-inline: var(--insetgroupedform-padding-inline),
+    --list--host-padding-block: var(--insetgroupedform-padding-block),
+    //
+    --list--item-color: var(--insetgroupedform-item-color,),
+    --list--item-background-color: var(--insetgroupedform-item-background-color,),
+    --list--item-border-radius: var(--insetform-item-border-radius),
+    --list--highlighteditem-color: var(--insetgroupedform-highlighteditem-color,),
+    --list--highlighteditem-background-color: var(--insetgroupedform-highlighteditem-background-color,),
+    //
+    --list--adjacentitem-border-radius: 0,
+    //
+    --list--details-background-color: var(--insetgroupedform-openitem-background-color,),
+    --list--details-color: var(--insetgroupedform-openitem-color,),
+    --list--opendetails-background-color: var(--insetgroupedform-openitem-background-color,),
+    --list--opendetails-color: var(--insetgroupedform-openitem-color,),
+    --list--opensummary-background-color: var(--insetgroupedform-opensummary-background-color,),
+    --list--opensummary-color: var(--insetgroupedform-opensummary-color,),
+  ),
+  sidebar: (
+    --list--item-border-radius: var(--insetform-item-border-radius),
+    --list--details-gap: var(--form-gap),
+    --list--rootsummary-padding-inline-start: 5px,
+    --list--rootsummary-padding-inline-end: 5px,
+    --list--rootsummary-padding-block-start: 2px,
+    --list--rootsummary-padding-block-end: 2px,
+
+    --list--item-padding-inline-start: 5px,
+    --list--item-padding-inline-end: 5px,
+    --list--item-padding-block-start: 5px,
+    --list--item-padding-block-end: 5px,
+
+    --list--adjacentitem-border-radius: unset,
+    //
+    --list--host-background-color: var(--sidebarform-background-color,),
+    --list--host-padding-inline: var(--sidebarform-padding-inline),
+    --list--host-padding-block: var(--sidebarform-padding-block),
+    //
+    --list--item-background-color: var(--sidebarform-item-background-color,),
+    --list--item-color: var(--sidebarform-item-color,),
+    --list--highlighteditem-background-color: var(--sidebarform-highlighteditem-background-color,),
+    --list--highlighteditem-color: var(--sidebarform-highlighteditem-color,),
+    //
+    --list--rootsummary-background-color: transparent,
+    --list--rootsummary-color: var(--primary,),
+    // --list--rootsummary-border-radius: 0px,
+    --list--selectedrootsummary-background-color: transparent,
+    --list--selectedrootsummary-color: var(--primary,),
+    //
+    --list--separator-background-color: transparent,
+    --list--activeseparator-background-color: transparent,
+    //
+    --list--details-background-color: var(--sidebarform-openitem-background-color,),
+    --list--details-color: var(--sidebarform-openitem-color,),
+    --list--opensummary-background-color: var(--sidebarform-opensummary-background-color,),
+    --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,
+  ),
+);
+$form-elses: (
+  --list--host-background-color: var(--form-background-color,),
+  --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(--form-item-background-color,),
+  --list--highlighteditem-background-color: var(--form-highlighteditem-background-color,),
+  --list--item-color: var(--form-item-color,),
+  --list--highlighteditem-color: var(--form-highlighteditem-color,),
+  //
+  // --list--item-grid-template-columns: minmax(0, 1fr) 1rem,
+  --list--accessories-size: 1.1rem,
+  --list--accessories-display: grid,
+);
+
+@layer #{vars.$list-components-layer} {
+  [is='form-view'] {
+    &:not(& &, list-view &, table-view &, [is='tab-bar'] > &) {
+      @extend %list;
+
+      // wire
+      :where(&) {
+        --list--section-gap: var(--form-gap);
+
+        @include mixins.write-props($form-elses);
+      }
+
+      :where(section-view:has(> [slot='header']), section-view:has(> [slot='footer']) + section-view) {
+        --list--section-gap: var(--form-extra-gap);
+      }
+
+      // 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 ;);
+        }
+      }
+
+      // SECTION: ifs polyfill
+      @supports not (x: #{string.unquote('if(else:red)')}) {
+        :where(&:not([form-style])) {
+          @each $v in vars.$form-styles {
+            @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 {
+          :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);
+          }
+        }
+        @include mixins.if-2col-split-view-fits {
+          :where(navigation-split-view [is='sidebar-view'] &[form-style]) {
+            @include mixins.write-props(map.get($form-ifs, sidebar));
+          }
+          :where(navigation-split-view > scroll-view &[preferred-expanded-style], navigation-split-view > body-view > scroll-view &[preferred-expanded-style]) {
+            @include mixins.write-props(map.get($form-ifs, inset));
+          }
+        }
+      }
+
+      // SECTION: attrs finally
+      @supports (x: #{string.unquote('attr(x type(*))')}) {
+        :where(&) {
+          --form-style: attr(form-style type(<custom-ident>), inherit);
+        }
+        @include mixins.if-2col-split-view-fits {
+          :where(navigation-split-view:has(> [is='sidebar-view']) > [is='sidebar-view'] &[list-style]) {
+            --form-style: sidebar;
+          }
+          :where(navigation-split-view > scroll-view &[preferred-expanded-style], navigation-split-view > body-view > scroll-view &[preferred-expanded-style]) {
+            --form-style: inset;
+          }
+        }
+      }
+
+      // 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-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/_full-screen.scss

@@ -3,11 +3,13 @@
 
 @layer #{vars.$components-layer} {
   [is='full-screen'] {
-    @include mixins.reset-dialog;
+    :where(&) {
+      @include mixins.reset-dialog;
 
-    // dowh
-    overflow: clip;
-    width: 100lvw;
-    height: var(--100lvh, 100lvh);
+      // dowh
+      overflow: clip;
+      inline-size: 100lvw;
+      block-size: var(--100lvh, 100lvh);
+    }
   }
 }

package/scss/components/_glass-button.scss

@@ -0,0 +1,59 @@
+@use '../vars';
+@use '../placeholders';
+
+@layer #{vars.$components-layer} {
+  [is='glass-button'] {
+    @extend %button;
+
+    :where(&) {
+      backdrop-filter: var(--liquid-glass-backdrop-filter);
+
+      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 vars.$button-sizes {
+      :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

@@ -0,0 +1,70 @@
+@use '../vars';
+@use '../placeholders';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  [is='glass-prominent-button'] {
+    @extend %button;
+
+    :where(&) {
+      backdrop-filter: var(--liquid-glass-backdrop-filter);
+
+      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 vars.$button-sizes {
+      :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;
+    }
+  }
+}