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

package/scss/mixins/_dialog.scss

@@ -0,0 +1,89 @@
+@mixin reset-dialog {
+  // :where(&) {
+  // position: absolute;
+  inset-inline: 0px;
+  inset-block: 0px; //inset-inline-start: 0px;
+  // width: fit-content;
+  // height: fit-content;
+  margin: 0px; //margin-top: auto;
+  border: none; //border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;
+  padding: 0px; //padding-top: 1em;
+  background-color: transparent; //background-color: canvas;
+  color: transparent; //color: canvastext;
+  // display: none;
+
+  // dialog:modal {
+  // position: fixed;
+  // overflow-x: auto;
+  // overflow-y: auto;
+  // inset-block-start: 0px;
+  max-width: 100lvw; //max-width: calc(100% - 2em - 6px);
+  max-height: 100lvh; //max-height: calc(100% - 2em - 6px);
+  // visibility: visible;
+  // }
+
+  outline: none;
+
+  &::backdrop {
+    background-color: transparent;
+  }
+  // }
+}
+
+@mixin make-backdrop-transitionable {
+  &::backdrop {
+    @media (prefers-reduced-motion: no-preference) {
+      transition:
+        display var(--view-transition-duration) ease-out allow-discrete,
+        overlay var(--view-transition-duration) ease-out allow-discrete,
+        background-color var(--view-transition-duration) ease-out allow-discrete;
+      will-change: background-color, overlay, display;
+    }
+  }
+}
+
+@mixin add-dialog-backdrop-transition-frames($new-background-color) {
+  &::backdrop {
+    background-color: $new-background-color;
+  }
+  // must be after above rule!
+  @starting-style {
+    &::backdrop {
+      background-color: transparent;
+    }
+  }
+}
+
+@mixin make-floating-sidebar {
+  :where(&) {
+    inline-size: var(--nav-split-view-sidebar-inline-size); // override
+
+    margin-inline-start: max(env(safe-area-inset-left), var(--sidebar-inline-spacing)); // float
+
+    --safe-area-inset-left: 0px; // now a floating
+    --safe-area-inset-right: 0px; // now a floating FIXME: Check new addition
+
+    overflow: visible; // override
+
+    padding-block: max(var(--safe-area-inset-top), var(--sidebar-block-spacing)) max(var(--safe-area-inset-bottom), var(--sidebar-block-spacing));
+
+    border-radius: var(--sidebar-border-radius);
+  }
+
+  > scroll-view {
+    &,
+    & ~ tool-bar {
+      :where(&) {
+        --safe-area-inset-top: 0px;
+        --safe-area-inset-bottom: 0px;
+      }
+    }
+    :where(&) {
+      border-radius: var(--sidebar-border-radius);
+
+      backdrop-filter: var(--liquid-glass-backdrop-filter);
+
+      --scroll-view-box-shadow: var(--liquid-glass-box-shadow);
+    }
+  }
+}

package/scss/mixins/_index.scss

@@ -0,0 +1,461 @@
+@use '../vars';
+@use '../functions';
+@use 'sass:string';
+@use 'sass:map';
+@use 'sass:list';
+
+@mixin span-all {
+  grid-column: 1 / -1; // span all columns
+  grid-row: 1 / -1; // span all rows
+}
+
+@mixin create-sidebar-measure($floating: false) {
+  @if $floating {
+    :where(&) {
+      --navbar-safe-area-inset-left: calc(var(--sidebar-toggle-padding-inline-start, 0px) - max(env(safe-area-inset-left), var(--sidebar-inline-spacing)));
+    }
+
+    :where(& ~ tool-bar) {
+      &::part(top-bar) {
+        --safe-area-inset-left: calc(var(--sidebar-toggle-padding-inline-start, 0px) - max(env(safe-area-inset-left), var(--sidebar-inline-spacing)));
+      }
+    }
+  } @else {
+    :where(&) {
+      --navbar-safe-area-inset-left: calc(var(--sidebar-toggle-padding-inline-start, 0px) - env(safe-area-inset-left));
+    }
+
+    :where(& ~ tool-bar) {
+      &::part(bottom-bar) {
+        --safe-area-inset-left: max(env(safe-area-inset-left), var(--sidebar-inline-spacing));
+      }
+
+      &::part(top-bar) {
+        --safe-area-inset-left: var(--sidebar-toggle-padding-inline-start, 0px);
+      }
+    }
+  }
+  //  :where(&)::part(scroll-view-navbar-stack) {
+  //   margin-inline-start: calc(env(safe-area-inset-left) * -1); // escape the possible paddings of scroll-view and move to left edge, for new calcs
+  // }
+  // :where(& ~ tool-bar)::part(top-bar) {
+  //   // --safe-area-inset-left: max(env(safe-area-inset-left), var(--sidebar-spacing));
+  //   --safe-area-inset-left: calc(max(env(safe-area-inset-left), var(--sidebar-spacing)) + var(#{vars.$sidebar-toggle-padding-inline-start-css-prop}, 0px));
+  // }
+}
+
+@mixin discard-sidebar-measures {
+  :where(&) {
+    --navbar-safe-area-inset-left: revert;
+  }
+
+  :where(& ~ tool-bar) {
+    &::part(bottom-bar) {
+      --safe-area-inset-left: revert;
+    }
+
+    &::part(top-bar) {
+      --safe-area-inset-left: revert;
+    }
+  }
+  //  :where(&)::part(scroll-view-navbar-stack) {
+  //   margin-inline-start: unset;
+  //   --sidebar-spacing: 0px;
+  //   #{vars.$sidebar-toggle-padding-inline-start-css-prop}: 0px;
+  //   --safe-area-inset-left: 0px;
+  // }
+  // :where(& ~ tool-bar)::part(top-bar) {
+  //   --safe-area-inset-left: unset;
+  // }
+}
+
+@mixin create-v-scroll-view {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: 0 minmax(max-content, 1fr);
+  grid-template-areas:
+    'toolbar'
+    'main';
+
+  & > *:not([slot]) {
+    grid-area: main;
+  }
+
+  &:has(~ tool-bar > [slot^='top-bar']),
+  &:has(> [slot^='top-bar']) {
+    grid-template-rows: var(--navigation-bar-block-size) minmax(max-content, 1fr);
+  }
+}
+
+@mixin make-scrollable($pseudo: false) {
+  scrollbar-width: thin;
+
+  @if $pseudo {
+    block-size: calc(100% + 1px);
+  } @else {
+    // & > *:not([slot]) {
+    //   @include span-all;
+    //   // grid-column: 1 / -1; // span all columns
+    //   // grid-row: 1 / -1; // span all rows
+    // }
+
+    &::before {
+      @include span-all;
+      // grid-column: 1 / -1; // span all columns
+      // grid-row: 1 / -1; // span all rows
+      content: '';
+      display: block;
+      block-size: calc(100% + 1px); // creates overflow
+      z-index: -1;
+      pointer-events: none;
+    }
+  }
+}
+
+@mixin contain-overscroll($axis: both) {
+  -webkit-overflow-scrolling: touch;
+
+  @if $axis == inline {
+    overscroll-behavior-inline: contain;
+  } @else if $axis == block {
+    overscroll-behavior-block: contain;
+  } @else {
+    overscroll-behavior: contain;
+  }
+}
+
+@mixin make-toolbar-pseudos($dir: bottom) {
+  &:before,
+  &:after {
+    backface-visibility: hidden;
+
+    content: '';
+    inset: 0 0 var(--navbar-backdrop-inset-block-end, 0) 0;
+    position: absolute;
+    pointer-events: none;
+
+    z-index: -1;
+  }
+
+  &:before {
+    backdrop-filter: blur(2px);
+    mask-image: linear-gradient(to #{$dir}, oklch(0 0 0) 50%, oklch(0 0 0 / 0%) 100%);
+  }
+
+  &:after {
+    background-image: linear-gradient(to #{$dir}, var(--face) 0, oklch(0 0 0 / 0%) 100%);
+  }
+}
+
+@mixin add-focus-visible-state($selector: '') {
+  &:not(:disabled):not([readonly]) {
+    :where(&) {
+      &:focus-visible {
+        outline: none;
+
+        &#{$selector} {
+          @content;
+        }
+      }
+
+      // @media (pointer: fine) {
+      //   &:hover#{$selector} {
+      //     @content;
+      //   }
+      // }
+    }
+  }
+}
+
+@mixin add-hover-state($selector: '') {
+  &:not(:disabled):not([readonly]) {
+    :where(&) {
+      @media (pointer: fine) {
+        &:hover#{$selector} {
+          @content;
+        }
+      }
+    }
+  }
+}
+
+@mixin add-active-state($selector: '') {
+  &:not(:disabled):not([readonly]) {
+    :where(&) {
+      &:active#{$selector} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin add-jsactive-state($selector: '') {
+  &:not(:disabled):not([readonly]) {
+    :where(&) {
+      &.active#{$selector} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin componentize($prefix) {
+  appearance: none;
+  -webkit-appearance: none;
+  border: var(--#{$prefix}border#{','}); //var(--itemborder,);
+  background: var(--#{$prefix}face#{','}); //var(--itemface,);
+  color: var(--#{$prefix}text#{','}); //var(--itemtext,);
+  padding-inline: var(--#{$prefix}padistart#{','}) var(--#{$prefix}padiend#{','});
+  padding-block: var(--#{$prefix}padbstart#{','}) var(--#{$prefix}padbend#{','});
+  border-radius: var(--#{$prefix}radiustl#{','}) var(--#{$prefix}radiustr#{','}) var(--#{$prefix}radiusbr#{','}) var(--#{$prefix}radiusbl#{','});
+}
+
+@mixin takeover-color-vars($prefix) {
+  --secondary: var(--#{$prefix}text);
+  --blue: var(--#{$prefix}text);
+  --red: var(--#{$prefix}text);
+  --green: var(--#{$prefix}text);
+  --orange: var(--#{$prefix}text);
+  --purple: var(--#{$prefix}text);
+
+  // NOTE: breaks list-item-tints
+  --accentColor: var(--#{$prefix}text);
+  --accentColorEffective: var(--#{$prefix}text);
+}
+
+@mixin vt-toolbar-cell-offscreen-keyframe() {
+  --toolbar-cell-scale: scale(var(--view-transition-toolbar-cell-offscreen-scale));
+  --toolbar-cell-filter: blur(10px);
+  --toolbar-cell-opacity: 0;
+}
+
+@mixin vt-toolbar-cell-onscreen-keyframe() {
+  --toolbar-cell-scale: scale(var(--view-transition-toolbar-cell-onscreen-scale));
+  --toolbar-cell-filter: none;
+  --toolbar-cell-opacity: 1;
+}
+
+@mixin make-marker-pseudos($affordance, $pseudo: after) {
+  &::#{$pseudo} {
+    pointer-events: none;
+    content: '';
+    // display: var(--disclosure--marker-display,);
+    // block-size: 1rem;
+    // inline-size: 1rem;
+    // background-color: var(--blue);
+    -webkit-mask: url($affordance) no-repeat center / contain;
+    mask: url($affordance) no-repeat center / contain;
+    // transform: var(--disclosure--marker-transform,);
+    transform-origin: center;
+    aspect-ratio: 1;
+    place-self: center;
+    // order: var(--disclosure--marker-order,);
+  }
+}
+
+@mixin if-iphone-landscape {
+  @media (max-width: #{vars.$ipad-landscape-bp-max}) and (orientation: landscape) {
+    @content;
+  }
+}
+
+@mixin if-iphone-portrait {
+  @media (max-width: #{vars.$ipad-portrait-bp-max}) and (orientation: portrait) {
+    @content;
+  }
+}
+
+@mixin if-ipad-landscape {
+  @media (min-width: #{vars.$ipad-landscape-bp-min}) and (orientation: landscape) {
+    @content;
+  }
+}
+
+@mixin if-ipad-portrait {
+  @media (min-width: #{vars.$ipad-portrait-bp-min}) and (orientation: portrait) {
+    @content;
+  }
+}
+
+@mixin if-ipad-sheet-fits {
+  @media (min-width: #{vars.$ipad-sheet-view-inline-size}) and (min-height: #{vars.$ipad-sheet-view-height}) {
+    @content;
+  }
+}
+
+@mixin if-2col-split-view-fits {
+  @media (min-width: #{vars.$nav-split-view-2col-bp-min}) {
+    @content;
+  }
+}
+
+@mixin if-3col-split-view-fits {
+  @media (min-width: #{vars.$nav-split-view-3col-bp-min}) {
+    @content;
+  }
+}
+
+@mixin ifnot-2col-split-view-fits {
+  @media (max-width: #{vars.$nav-split-view-2col-bp-max}) {
+    @content;
+  }
+}
+
+@mixin ifnot-3col-split-view-fits {
+  @media (max-width: #{vars.$nav-split-view-3col-bp-max}) {
+    @content;
+  }
+}
+
+@mixin if-content-view-list {
+  @include if-2col-split-view-fits {
+    // is content-view!
+    navigation-split-view > scroll-view & {
+      @content;
+    }
+    // is content-view!
+    navigation-split-view:has(> [is='sidebar-view'])[preferred-compact-column='content']:not([column-visibility='double-column']) > body-view > scroll-view & {
+      @content;
+    }
+  }
+  // is content-view!
+  @include if-3col-split-view-fits {
+    navigation-split-view:has(> [is='sidebar-view']):not([column-visibility='double-column']) > body-view > scroll-view & {
+      @content;
+    }
+  }
+}
+
+// Mixin for plain CSS (linear)
+@mixin write-props($props) {
+  @each $prop, $val in $props {
+    #{$prop}: #{$val};
+  }
+}
+
+// Mixin for generating nested if() for multiple variants
+@mixin write-ifs($comp, $all-variants, $elses: ()) {
+  // Collect all properties across all variants
+  $all-props: ();
+  @each $variant, $props in $all-variants {
+    @each $prop, $val in $props {
+      $existing: map.get($all-props, $prop);
+      @if $existing {
+        $all-props: map.merge(
+          $all-props,
+          (
+            $prop: list.append($existing, ($variant $val), comma),
+          )
+        );
+      } @else {
+        $all-props: map.merge(
+          $all-props,
+          (
+            $prop: (
+                ($variant $val),
+              ),
+          )
+        );
+      }
+    }
+  }
+
+  // Output each property with nested if() chain
+  @each $prop, $cases in $all-props {
+    $code: '';
+    $i: list.length($cases);
+    @while $i > 0 {
+      $case: list.nth($cases, $i);
+      $variant: list.nth($case, 1);
+      $val: list.nth($case, 2);
+      $code: 'style(#{$comp}: #{$variant}): #{$val}; #{$code}';
+      $i: $i - 1;
+    }
+    $else: map.get($elses, $prop);
+    @if ($else) {
+      #{$prop}: string.unquote('if(#{$code}else: #{$else} ;)');
+    } @else {
+      #{$prop}: string.unquote('if(#{$code})');
+    }
+  }
+}
+
+@mixin property-rule($name, $value, $props) {
+  @property --#{"" + $name} {
+    syntax: '<color>';
+    initial-value: #{$value};
+    @each $k, $v in $props {
+      #{$k}: #{$v};
+    }
+  }
+}
+
+@mixin make-template($tokens, $prop) {
+  @each $template in $tokens {
+    $parts: string.split('#{$template}', ', ');
+    $result: '';
+    @each $part in $parts {
+      $result: $result + '#{$part},';
+    }
+    $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='#{$final-result}']) {
+      #{$prop}: $template;
+    }
+  }
+}
+
+@mixin generate-color-tokens($tokens) {
+  $media-variants: (
+    base: '',
+    contrast: '(prefers-contrast: more)',
+    fine: '(pointer: fine)',
+    fine-contrast: '(pointer: fine) and (prefers-contrast: more)',
+  );
+
+  $color-schemes: (
+    light: '',
+    dark: '(prefers-color-scheme: dark)',
+  );
+
+  @each $token, $data in $tokens {
+    $props: map.get($data, props);
+    $media-map: map.get($data, media);
+
+    @each $variant, $mq in $media-variants {
+      $values: map.get($media-map, $variant);
+
+      @if $values {
+        @each $scheme, $scheme-mq in $color-schemes {
+          $value: map.get($values, $scheme);
+
+          // Build media query safely
+          $parts: ();
+          @if string.length($mq) > 0 {
+            $parts: list.append($parts, $mq, comma);
+          }
+          @if string.length($scheme-mq) > 0 {
+            $parts: list.append($parts, $scheme-mq, comma);
+          }
+
+          @if list.length($parts) == 0 {
+            @include property-rule($token, $value, $props);
+          } @else {
+            // Interpolate each part individually, separated by " and "
+            $query: '';
+            @each $part in $parts {
+              @if string.length($query) == 0 {
+                $query: '#{$part}';
+              } @else {
+                $query: '#{$query} and #{$part}';
+              }
+            }
+            @media #{$query} {
+              @include property-rule($token, $value, $props);
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/scss/placeholders/_buttons.scss

@@ -0,0 +1,117 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  %button {
+    :where(&) {
+      place-items: center;
+
+      place-content: center;
+
+      position: relative;
+
+      // SECTION: componentize
+      @include mixins.componentize(btn);
+
+      // --btnpadistart: var(--regular-btn-padding);
+      // --btnpadiend: var(--regular-btn-padding);
+      // --btnpadbstart: var(--regular-btn-padding);
+      // --btnpadbend: var(--regular-btn-padding);
+
+      --btnradiustl: var(--regular-btn-border-radius);
+      --btnradiustr: var(--regular-btn-border-radius);
+      --btnradiusbl: var(--regular-btn-border-radius);
+      --btnradiusbr: var(--regular-btn-border-radius);
+    }
+
+    @include mixins.takeover-button-slots;
+
+    @each $size, $media in vars.$button-sizes {
+      // @if (regular != $size) {
+      &[control-size='#{$size}'] {
+        :where(&) {
+          // --btnpadistart: var(--#{$size}-btn-padding);
+          // --btnpadiend: var(--#{$size}-btn-padding);
+          // --btnpadbstart: var(--#{$size}-btn-padding);
+          // --btnpadbend: var(--#{$size}-btn-padding);
+
+          --btnradiustl: var(--#{$size}-btn-border-radius);
+          --btnradiustr: var(--#{$size}-btn-border-radius);
+          --btnradiusbl: var(--#{$size}-btn-border-radius);
+          --btnradiusbr: var(--#{$size}-btn-border-radius);
+        }
+      }
+      // }
+    }
+
+    &[control-size='small'] {
+      --label-font: callout;
+    }
+
+    &[control-size='mini'] {
+      --label-font: caption;
+    }
+  }
+}
+
+@layer #{vars.$colors-layer} {
+  // SECTION: componentize
+  %button {
+    @include mixins.add-focus-visible-state {
+      --btnface: var(--btnhighlightface,);
+      --btntext: var(--btnhighlighttext,);
+    }
+    @include mixins.add-hover-state {
+      --btnface: var(--btnhighlightface,);
+      --btntext: var(--btnhighlighttext,);
+    }
+  }
+}
+
+// @layer #{vars.$utils-layer} {
+//   %button {
+//     > [slot] {
+//       :where(&) {
+//         position: absolute;
+//       }
+//     }
+//     // &:has(> [slot='overlay'] > [slot='overlay']) {
+//     //   :where(&) {
+//     // display: grid;
+//     //   }
+//     // }
+//     &:not(:has(> :not([slot]))) > [slot='placeholder'] {
+//       :where(&) {
+//         position: relative;
+//       }
+//     }
+//   }
+// }
+
+@layer #{vars.$ui-layer} {
+  // SECTION: componentize
+  %button {
+    @include mixins.add-active-state {
+      --btnface: var(--btnactiveface,);
+      --btntext: var(--btnactivetext,);
+    }
+  }
+}
+
+@layer #{vars.$transitions-layer} {
+  @media (prefers-reduced-motion: no-preference) {
+    %button {
+      :where(&) {
+        transition:
+          background-color 100ms ease-out allow-discrete,
+          opacity 100ms ease-out allow-discrete,
+          color 100ms ease-out allow-discrete;
+        will-change: background-color, opacity, color;
+      }
+
+      :where(&)::active {
+        transition-duration: 25ms;
+      }
+    }
+  }
+}