@swiftwc/ui 0.0.0-dev.7 → 0.0.0-dev.70

package/scss/components/_list-view.scss

@@ -0,0 +1,269 @@
+@use '../vars';
+@use '../mixins';
+@use '../placeholders';
+@use 'sass:string';
+@use 'sass:map';
+
+$list-ifs: (
+  inset: (
+    --list--item-color: var(--insetlist-item-color,),
+    --list--item-background-color: var(--insetlist-item-background-color,),
+    --list--highlighteditem-color: var(--insetlist-highlighteditem-color,),
+    --list--highlighteditem-background-color: var(--insetlist-highlighteditem-background-color,),
+    --list--item-border-radius: var(--insetlist-item-border-radius),
+    --list--host-background-color: var(--insetlist-background-color,),
+    --list--host-padding-inline: var(--insetlist-padding-inline),
+    --list--host-padding-block: var(--insetlist-padding-block),
+    //
+    --list--adjacentdetailsitem-border-radius: 0,
+    //
+    --list--details-background-color: var(--insetlist-openitem-background-color,),
+    --list--details-color: var(--insetlist-openitem-color,),
+    --list--opendetails-background-color: var(--insetlist-openitem-background-color,),
+    --list--opendetails-color: var(--insetlist-openitem-color,),
+    --list--opensummary-background-color: var(--insetlist-opensummary-background-color,),
+    --list--opensummary-color: var(--insetlist-opensummary-color,),
+  ),
+  inset-grouped: (
+    --list--item-color: var(--insetgroupedlist-item-color,),
+    --list--item-background-color: var(--insetgroupedlist-item-background-color,),
+    --list--item-border-radius: var(--insetlist-item-border-radius),
+    --list--highlighteditem-color: var(--insetgroupedlist-highlighteditem-color,),
+    --list--highlighteditem-background-color: var(--insetgroupedlist-highlighteditem-background-color,),
+    --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--adjacentitem-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,),
+  ),
+  sidebar: (
+    --list--item-border-radius: var(--insetlist-item-border-radius),
+    --list--details-gap: var(--list-row-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(--sidebarlist-background-color,),
+    --list--host-padding-inline: var(--sidebarlist-padding-inline),
+    --list--host-padding-block: var(--sidebarlist-padding-block),
+    //
+    --list--item-background-color: var(--sidebarlist-item-background-color,),
+    --list--item-color: var(--sidebarlist-item-color,),
+    --list--highlighteditem-background-color: var(--sidebarlist-highlighteditem-background-color,),
+    --list--highlighteditem-color: var(--sidebarlist-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(--sidebarlist-openitem-background-color,),
+    --list--details-color: var(--sidebarlist-openitem-color,),
+    --list--opensummary-background-color: var(--sidebarlist-opensummary-background-color,),
+    --list--opensummary-color: var(--sidebarlist-opensummary-color,),
+    //
+    // --list--item-grid-template-columns: minmax(0, 1fr),
+    --list--accessories-size: 0rem,
+    --list--accessories-display: none,
+    //
+    --list--rootsummary-marker-display: marker-trailing,
+  ),
+);
+$list-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--item-grid-template-columns: minmax(0, 1fr) 1rem,
+  --list--accessories-size: 1.1rem,
+  --list--accessories-display: grid,
+);
+
+@layer #{vars.$list-components-layer} {
+  list-view {
+    &:not(& &, [is='form-view'] &, table-view &) {
+      @extend %list;
+
+      // wire
+      :where(&) {
+        --list--section-gap: var(--list-row-gap);
+
+        @include mixins.write-props($list-elses);
+      }
+
+      // SECTION: ifs
+      @supports (x: #{string.unquote('if(else:red)')}) {
+        :where(&) {
+          @include mixins.write-ifs(--list-style, $list-ifs, $list-elses); // --list--root-padding-inline: if(style(--list-style: inset-grouped): 0.5rem ; style(--list-style: sidebar): 0.5rem ;);
+        }
+      }
+
+      // SECTION: ifs polyfill
+      @supports not (x: #{string.unquote('if(else:red)')}) {
+        :where(&:not([list-style])) {
+          @each $v in vars.$list-styles {
+            @container style(--list-style: #{$v}) {
+              --list-style: #{$v}; // NOTE: used ONLY for tinted buttons
+
+              @include mixins.write-props(map.get($list-ifs, $v));
+            }
+          }
+        }
+        @each $v in vars.$list-styles {
+          :where(&[list-style='#{$v}']) {
+            --list-style: #{$v}; // NOTE: used ONLY for tinted buttons
+
+            @include mixins.write-props(map.get($list-ifs, $v));
+          }
+        }
+        @include mixins.if-2col-split-view-fits {
+          :where(navigation-split-view [is='sidebar-view'] &[list-style]) {
+            @include mixins.write-props(map.get($list-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($list-ifs, inset));
+          }
+        }
+      }
+
+      // SECTION: attrs finally
+      @supports (x: #{string.unquote('attr(x type(*))')}) {
+        :where(&) {
+          --list-style: attr(list-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]) {
+            --list-style: sidebar;
+          }
+          :where(navigation-split-view > scroll-view &[preferred-expanded-style], navigation-split-view > body-view > scroll-view &[preferred-expanded-style]) {
+            --list-style: inset;
+          }
+        }
+      }
+
+      // FINALLY AFTER ALL IFS
+
+      // NOTE: on safari takes it from manually setting it above
+      // make list-buttons tintable
+      @container not style(--list-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(--list-style: sidebar) {
+        button[list-item-tint] {
+          :where(&) {
+            --itemhighlightface: var(--accentColor);
+            --itemactiveface: var(--accentColor);
+          }
+        }
+      }
+
+      // TODO: Also apply this on state of sidebar w/ full-screen detail 1/2
+      @include mixins.if-content-view-list {
+        :where(&) {
+          --list--accessories-size: 0rem;
+          --list--accessories-display: none;
+
+          --insetlist-highlighteditem-background-color: var(--accentColor);
+          --insetlist-highlighteditem-color: var(--tintcontrast);
+          --insetgroupedlist-highlighteditem-background-color: var(--accentColor);
+          --insetgroupedlist-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;
+      }
+
+      &[preferred-root-disclosure-style='sidebar'] {
+        --list--rootsummary-color: var(--primary);
+        --list--selectedrootsummary-color: var(--primary);
+        --list--rootsummary-background-color: transparent;
+        --list--selectedrootsummary-background-color: transparent;
+        --list--rootsummary-padding-inline-start: var(--list--item-padding-inline-start);
+        --list--rootsummary-padding-inline-end: var(--list--item-padding-inline-start);
+        --list--rootsummary-padding-block-start: 5px;
+        --list--rootsummary-padding-block-end: 5px;
+
+        > [is='disclosure-group'] ~ [is='disclosure-group'],
+        > section-view > [is='disclosure-group'] ~ [is='disclosure-group'] {
+          margin-block-start: var(--list-row-gap);
+
+          &::before {
+            display: none;
+          }
+        }
+
+        > [is='disclosure-group'],
+        > section-view > [is='disclosure-group'] {
+          --list--details-background-color: var(--list--item-background-color);
+          --list--opensummary-background-color: var(--list--item-background-color);
+
+          > details,
+          > button:first-of-type {
+            --itemradiustl: var(--list--item-border-radius);
+            --itemradiustr: var(--list--item-border-radius);
+
+            &::before {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/scss/components/_menu-view.scss

@@ -0,0 +1,223 @@
+@use '../vars';
+@use '../mixins';
+@use '../placeholders';
+@use 'sass:string';
+
+@layer #{vars.$components-layer} {
+  menu-view {
+    :where(&) {
+      &::part(menu-summary) {
+        transform: var(--menu--summary-scale,);
+
+        filter: var(--menu--summary-filter,);
+      }
+
+      &::part(menu-scrollable) {
+        @include mixins.make-scrollable(true);
+
+        padding: var(--menu-padding);
+      }
+
+      &::part(menu-form) {
+        // min-inline-size: 200px; // FIXME: del this
+        inline-size: max-content; //var(--menu-inline-size);
+        block-size: min-content;
+
+        max-inline-size: var(--menu-max-inline-size,);
+        max-block-size: var(--menu-max-block-size,);
+
+        overflow: clip auto;
+        border-radius: inherit;
+
+        background-color: light-dark(var(--menu-bg), var(--menu-bg-dark));
+        // border: transparent solid 20px; //make sure bezel is not covered
+
+        @include mixins.make-scrollable;
+        @include mixins.contain-overscroll;
+
+        // touch-action: all;
+
+        --menu--dialog-max-inline-size: anchor-size();
+        --menu--dialog-max-block-size: anchor-size();
+      }
+
+      &::part(menu-dialog) {
+        @include mixins.reset-dialog;
+
+        color: var(--text,);
+
+        touch-action: none;
+
+        position: fixed;
+
+        inline-size: fit-content;
+        block-size: fit-content;
+        height: auto; // safari
+        max-inline-size: var(--menu--dialog-max-inline-size,);
+        max-block-size: var(--menu--dialog-max-block-size,);
+
+        margin-block: var(--menu--dialog-margin-block,);
+        margin-inline: var(--menu--dialog-margin-inline,);
+
+        transform: var(--menu--dialog-scale,);
+
+        // position-anchor: --my-anchor; // overriden
+        position-area: center;
+
+        overflow: clip;
+        border-radius: calc(var(--menu-item-border-radius) + var(--menu-padding));
+
+        backdrop-filter: var(--liquid-glass-backdrop-filter,);
+        box-shadow: var(--menu-popover-box-shadow,); //0 0 10px 10px black;
+
+        // finally
+        --menu--dialog-scale: scale(0);
+        --menu--summary-scale: ;
+        --menu--summary-filter: ;
+      }
+    }
+
+    &[open] {
+      :where(&)::part(menu-dialog) {
+        --menu--dialog-max-inline-size: 100vw;
+        --menu--dialog-max-block-size: 100vh;
+
+        --menu--dialog-margin-block: max(env(safe-area-inset-top), var(--menu-spacing)) max(env(safe-area-inset-bottom), var(--menu-spacing));
+        --menu--dialog-margin-inline: max(env(safe-area-inset-left), var(--menu-spacing)) max(env(safe-area-inset-right), var(--menu-spacing));
+
+        --menu--dialog-scale: scale(1);
+
+        // BUG: Safari rerenders entire scale animation on every button change
+        // @starting-style {
+        // --menu--dialog-scale: scale(0);
+        // }
+      }
+    }
+
+    &[closing] {
+      :where(&)::part(menu-dialog) {
+        --menu--dialog-max-inline-size: anchor-size();
+
+        --menu--dialog-max-block-size: anchor-size();
+      }
+    }
+
+    // shrink again, if opened outside of a direct parent toolbaritem (they shrink themselves)
+    // &[open] > &[open],
+    // &[open]:not(tool-bar-item &) {
+    &[open]:not(tool-bar-item > &) {
+      :where(&) {
+        --menu--summary-scale: scale(0.01);
+
+        --menu--summary-filter: blur(10px);
+      }
+    }
+
+    // :where(& > *) {
+    //   touch-action: all;
+    // }
+
+    // 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);
+    }
+
+    :where(&)::part(menu-scrollable) {
+      --menuitempadistart: var(--menu-item-padding-inline-start);
+      --menuitempadiend: var(--menu-item-padding-inline-end);
+      --menuitempadbstart: var(--menu-item-padding-block-start);
+      --menuitempadbend: var(--menu-item-padding-block-end);
+
+      --menuitemradiustr: var(--menu-item-border-radius);
+      --menuitemradiustl: var(--menu-item-border-radius);
+      --menuitemradiusbr: var(--menu-item-border-radius);
+      --menuitemradiusbl: var(--menu-item-border-radius);
+    }
+
+    :where(&) {
+      --disclosure-style: marker-trailing;
+    }
+  }
+}
+
+// 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 {
+      @include mixins.add-focus-visible-state {
+        --menuitemface: var(--menuitemhighlightface,);
+        --menuitemtext: var(--menuitemhighlighttext,);
+
+        @include mixins.takeover-color-vars(menuitem);
+        // --secondary: var(--menuitemtext);
+        // --blue: var(--menuitemtext);
+      }
+      @include mixins.add-hover-state {
+        --menuitemface: var(--menuitemhighlightface,);
+        --menuitemtext: var(--menuitemhighlighttext,);
+
+        @include mixins.takeover-color-vars(menuitem);
+        // --secondary: var(--menuitemtext);
+        // --blue: var(--menuitemtext);
+      }
+    }
+    > menu-view {
+      @include mixins.add-focus-visible-state('::part(menu-summary)') {
+        --menuitemface: var(--menuitemhighlightface,);
+        --menuitemtext: var(--menuitemhighlighttext,);
+
+        @include mixins.takeover-color-vars(menuitem);
+        // --secondary: var(--menuitemtext);
+        // --blue: var(--menuitemtext);
+      }
+      @include mixins.add-hover-state('::part(menu-summary)') {
+        --menuitemface: var(--menuitemhighlightface,);
+        --menuitemtext: var(--menuitemhighlighttext,);
+
+        @include mixins.takeover-color-vars(menuitem);
+        // --secondary: var(--menuitemtext);
+        // --blue: var(--menuitemtext);
+      }
+    }
+  }
+}
+
+// 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 {
+      @include mixins.add-active-state {
+        --menuitemface: var(--menuitemactiveface,);
+        --menuitemtext: var(--menuitemactivetext,);
+      }
+    }
+    > menu-view {
+      @include mixins.add-active-state('::part(menu-summary)') {
+        --menuitemface: var(--menuitemactiveface,);
+        --menuitemtext: var(--menuitemactivetext,);
+      }
+    }
+  }
+}

package/scss/components/_navigation-large-title.scss

@@ -0,0 +1,27 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  navigation-large-title {
+    :where(&) {
+      // display: grid;
+
+      // css-style-observer
+      // perspective-origin: var(--navigation-bar-block-size);
+      transition: --navigation-bar-block-size 1ms step-start;
+
+      // caption-side 1ms step-start,
+      // orphans 1ms step-start,
+      // page-break-before 1ms step-start,
+      // font-size 1ms step-start;
+    }
+
+    scroll-view[navigation-bar-title-display-mode='inline']:has(&) &[navigation-bar-auto-hide] {
+      :where(&) {
+        opacity: 0;
+
+        visibility: collapse;
+      }
+    }
+  }
+}