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

package/scss/_mixins.scss

@@ -1,172 +1,3 @@
-@use 'vars';
+@forward 'mixins/index';
 
-@mixin span-all {
-  grid-column: 1 / -1; // span all columns
-  grid-row: 1 / -1; // span all rows
-}
-
-@mixin make-scrollable {
-  & > * {
-    @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;
-    height: calc(100% + 1px); /* creates overflow */
-    // background-color: red;
-    z-index: -1;
-    pointer-events: none;
-  }
-}
-
-@mixin contain-overscroll() {
-  overscroll-behavior: contain;
-  -webkit-overflow-scrolling: touch;
-}
-
-@mixin reset-dialog {
-  // 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: var(--primary-text); //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;
-}
-
-@mixin make-navbar($dir: bottom) {
-  &:before,
-  &:after {
-    backface-visibility: hidden;
-
-    content: '';
-    inset: 0;
-    position: absolute;
-    pointer-events: none;
-
-    z-index: -1;
-  }
-
-  &:before {
-    backdrop-filter: blur(2px);
-    mask-image: linear-gradient(to #{$dir}, #000 50%, #0000 100%);
-  }
-
-  &:after {
-    background-image: linear-gradient(
-      to #{$dir},
-      var(--canvas-bg) 0,
-      #0000 100%
-    );
-  }
-}
-
-@mixin vt-toolbar-item-offscreen-keyframe($important: false) {
-  @if $important {
-    transform: scale(
-      var(--view-transition-toolbar-cell-offscreen-scale)
-    ) !important;
-    filter: blur(10px) !important;
-    opacity: 0 !important;
-  } @else {
-    transform: scale(var(--view-transition-toolbar-cell-offscreen-scale));
-    filter: blur(10px);
-    opacity: 0;
-  }
-}
-
-@mixin vt-toolbar-item-onscreen-keyframe($important: false) {
-  @if $important {
-    transform: scale(
-      var(--view-transition-toolbar-cell-onscreen-scale)
-    ) !important;
-    filter: none !important;
-    opacity: 1 !important;
-  } @else {
-    transform: scale(var(--view-transition-toolbar-cell-onscreen-scale));
-    filter: none;
-    opacity: 1;
-  }
-}
-
-@mixin toolbar-item-vt-state($transform, $filter, $opacity) {
-  transform: $transform;
-  filter: $filter;
-  opacity: $opacity;
-}
-
-@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-width}) 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;
-  }
-}
+@forward 'mixins/dialog';

package/scss/_placeholders.scss

@@ -0,0 +1,3 @@
+@forward 'placeholders/lists';
+
+@forward 'placeholders/buttons';

package/scss/_transitions.scss

@@ -9,3 +9,19 @@
 @forward 'transitions/bwd.navbar';
 
 @forward 'transitions/dialog';
+
+@forward 'transitions/menu-view';
+
+@forward 'transitions/glass-button';
+
+@forward 'transitions/glass-prominent-button';
+
+@forward 'transitions/confirmation-dialog';
+
+@forward 'transitions/navigation-split-view';
+
+@forward 'transitions/disclosure-group';
+
+@forward 'transitions/sidebar-view';
+
+@forward 'transitions/tab-bar';

package/scss/_utils.scss

@@ -0,0 +1,9 @@
+@forward 'utils/index';
+
+@forward 'utils/frame';
+
+@forward 'utils/stacks';
+
+@forward 'utils/spacing';
+
+@forward 'utils/scroll-view';

package/scss/_vars.scss

@@ -1,46 +1,160 @@
 @use 'functions';
 @use 'sass:math';
 
-$base-layer: base !default;
-$components-layer: components !default;
-$colors-layer: colors !default;
-$ui-layer: actions !default;
-$transitions-layer: transitions !default;
-$final-layer: final !default;
+$base-layer: sw-base !default;
+$components-layer: sw-components !default;
+$nav-components-layer: sw-nav-components !default;
+$tab-components-layer: sw-tab-components !default;
+$utils-layer: sw-utils !default;
+$colors-layer: sw-colors !default;
+$ui-layer: sw-actions !default;
+$transitions-layer: sw-transitions !default;
+$final-layer: sw-final !default;
 
 $vt-fwd-class-name: fwd !default;
 
-$disclosure-group-contents-height-css-prop: --disclosure-group-contents-height !default;
-$disclosure-group-animation-duration-css-prop: --disclosure-group-animation-duration !default;
-$disclosure-group-animation-close-class: close !default;
-
 $nav-split-view-2col-bp: 43rem !default;
-$nav-split-view-3col-bp: 56rem !default;
+$nav-split-view-3col-bp: 64rem !default;
 
-// $ipad-sheet-view-width: 12rem !default;
-$ipad-sheet-view-width: 37rem !default;
+// $ipad-sheet-view-inline-size: 12rem !default;
+$ipad-sheet-view-inline-size: 37rem !default;
 
 $ipad-sheet-view-aspect-ratio: math.div(4, 3) !default;
 
-$sidebar-transition-duration: 250ms !default;
-
 // $ipad-portrait-bp: 20rem !default;
 $ipad-portrait-bp: 43rem !default;
 
 // $ipad-landscape-bp: 30rem !default;
 $ipad-landscape-bp: 68rem !default;
 
-// computed
+$table-expanded-bp: 31rem !default;
+
+// SECTION: Defaults
+$picker-styles: menu;
+$label-styles: icon-only, title-only, title-and-icon;
+$list-styles: inset, inset-grouped, sidebar;
+$form-styles: inset, inset-grouped, sidebar;
+$table-styles: inset;
+
+$label-fonts: (
+  footnote: (
+    size: 1rem,
+    line: 1rem,
+    weight: 400,
+  ),
+  caption2: (
+    size: 0.75rem,
+    line: calc(1 / 0.75),
+    weight: 400,
+  ),
+  caption: (
+    size: 0.875rem,
+    line: calc(1.25 / 0.875),
+    weight: 400,
+  ),
+  callout: (
+    size: 0.875rem,
+    line: 0.875rem,
+    weight: 400,
+  ),
+  body: (
+    size: 1rem,
+    line: calc(1.5 / 1),
+    weight: 400,
+  ),
+  subheadline: (
+    size: 1.125rem,
+    line: calc(1.75 / 1.125),
+    weight: 400,
+  ),
+  headline: (
+    size: 1.25rem,
+    line: calc(1.75 / 1.25),
+    weight: 500,
+  ),
+  title3: (
+    size: 1.5rem,
+    line: calc(2 / 1.5),
+    weight: 600,
+  ),
+  title2: (
+    size: 1.875rem,
+    line: calc(2.25 / 1.875),
+    weight: 600,
+  ),
+  title: (
+    size: 2.25rem,
+    line: calc(2.5 / 2.25),
+    weight: 600,
+  ),
+  large-title: (
+    size: 3rem,
+    line: 1,
+    weight: 700,
+  ),
+  extra-large-title: (
+    size: 3.75rem,
+    line: 1,
+    weight: 700,
+  ),
+);
+
+// button sizes
+$button-sizes: (
+  mini: (
+    default: (
+      padding: 0.2rem,
+      border-radius: 1rem,
+    ),
+    fine: (
+      padding: 0.2rem,
+      border-radius: 0.4rem,
+    ),
+  ),
+  regular: (
+    default: (
+      padding: 0.6rem,
+      border-radius: 1.2rem,
+    ),
+    fine: (
+      padding: 0.6rem,
+      border-radius: 0.8rem,
+    ),
+  ),
+  small: (
+    default: (
+      padding: 0.4rem,
+      border-radius: 1rem,
+    ),
+    fine: (
+      padding: 0.4rem,
+      border-radius: 0.6rem,
+    ),
+  ),
+  large: (
+    default: (
+      padding: 1.2rem,
+      border-radius: 2.4rem,
+    ),
+    fine: (
+      padding: 1.2rem,
+      border-radius: 1.4rem,
+    ),
+  ),
+);
+
+$disclosure-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"%3E%3C/path%3E%3C/svg%3E'; // ph-caret-right-bold
+$table-col-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M216.49,168.49a12,12,0,0,1-17,0L128,97,56.49,168.49a12,12,0,0,1-17-17l80-80a12,12,0,0,1,17,0l80,80A12,12,0,0,1,216.49,168.49Z"%3E%3C/path%3E%3C/svg%3E'; // ph-caret-up-bold
+$picker-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"%3E%3C/path%3E%3C/svg%3E'; // ph-check-bold
+
+// SECTION: computed(s)
 
 $ipad-portrait-bp-max: #{functions.subtract-tiny($ipad-portrait-bp)};
 $ipad-portrait-bp-min: $ipad-portrait-bp;
 $ipad-landscape-bp-max: #{functions.subtract-tiny($ipad-landscape-bp)};
 $ipad-landscape-bp-min: $ipad-landscape-bp;
 
-$ipad-sheet-view-height: math.div(
-  $ipad-sheet-view-width,
-  $ipad-sheet-view-aspect-ratio
-); //4/3
+$ipad-sheet-view-height: math.div($ipad-sheet-view-inline-size, $ipad-sheet-view-aspect-ratio); //4/3
 
 $nav-split-view-2col-bp-max: #{functions.subtract-tiny($nav-split-view-2col-bp)};
 $nav-split-view-2col-bp-min: $nav-split-view-2col-bp;
@@ -49,10 +163,10 @@ $nav-split-view-3col-bp-min: $nav-split-view-3col-bp;
 
 @debug $ipad-portrait-bp-max;
 
-// checks
+// SECTION: checks
 
-@if ($ipad-portrait-bp < $ipad-sheet-view-width) {
-  @warn "$ipad-sheet-view-width should not be larger than $ipad-portrait-bp! Breaks centering";
+@if ($ipad-portrait-bp < $ipad-sheet-view-inline-size) {
+  @warn "$ipad-sheet-view-inline-size should not be larger than $ipad-portrait-bp! Breaks centering";
 }
 
 @if ($nav-split-view-3col-bp < $nav-split-view-2col-bp) {

package/scss/base/_layout.scss

@@ -1,40 +1,56 @@
 @use '../vars';
 @use '../mixins';
+@use '../placeholders';
 
 @layer #{vars.$components-layer} {
   body-view,
   navigation-stack,
   navigation-split-view,
-  dialog[is='full-screen'],
-  dialog[is='sheet-view'] {
-    position: relative;
+  [is='full-screen'],
+  [is='sheet-view'] {
+    :where(&) {
+      position: relative;
 
-    grid-auto-flow: column;
+      grid-auto-flow: column;
 
-    grid-template-columns: minmax(0, 1fr); //repeat(auto-fit, minmax(0, 1fr));
-    grid-template-rows: minmax(0, 1fr);
+      grid-template-columns: minmax(0, 1fr); //repeat(auto-fit, minmax(0, 1fr));
+      grid-template-rows: minmax(0, 1fr);
+    }
 
-    & > *:not([slot]) {
+    :where(& > *:not([slot])) {
+      // & > *:not([slot]) {
       @include mixins.span-all;
     }
   }
 
-  navigation-stack:has(> navigation-stack:not([hidden])),
+  navigation-stack:has(> navigation-stack:not([hidden]),> navigation-split-view:not([hidden])),
   navigation-stack:has(> body-view),
   navigation-split-view:has(> body-view),
   dialog:has(> body-view),
   // body-view:has(> dialog),
   body-view:has(> body-view) {
     & > scroll-view,
-    [is='sidebar-view'] > scroll-view {
-      transform: translateX(var(--view-transition-leading-x));
+    & > [is='sidebar-view'] > scroll-view {
+      :where(&) {
+        --scroll-view-translate: translateX(var(--view-transition-leading-x));
+      }
     }
 
-    & > navigation-bar > tool-bar-item,
-    & > bottom-bar > tool-bar-item,
-    & > navigation-bar > tool-bar-item-group,
-    & > bottom-bar > tool-bar-item-group {
-      transform: scale(var(--view-transition-toolbar-cell-offscreen-scale));
+    // & > top-bar > tool-bar-item,
+    // & > bottom-bar > tool-bar-item,
+    // & > top-bar > tool-bar-item-group,
+    // & > bottom-bar > tool-bar-item-group,
+    // & > [is='sidebar-view'] > top-bar > tool-bar-item,
+    // & > [is='sidebar-view'] > bottom-bar > tool-bar-item,
+    // & > [is='sidebar-view'] > top-bar > tool-bar-item-group,
+    // & > [is='sidebar-view'] > bottom-bar > tool-bar-item-group {
+    & > tool-bar > tool-bar-item,
+    & > tool-bar > tool-bar-item-group,
+    & > [is='sidebar-view'] > tool-bar > tool-bar-item,
+    & > [is='sidebar-view'] > tool-bar > tool-bar-item-group {
+      :where(&) {
+        @include mixins.vt-toolbar-cell-offscreen-keyframe;
+      }
     }
   }
 }

package/scss/base/_reboot.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../functions';
 
-@layer #{vars.$base-layer}, #{vars.$components-layer}, #{vars.$colors-layer}, #{vars.$ui-layer}, #{vars.$transitions-layer}, #{vars.$final-layer};
+@layer #{vars.$base-layer}, #{vars.$components-layer}, #{vars.$nav-components-layer}, #{vars.$tab-components-layer}, #{vars.$utils-layer}, #{vars.$colors-layer}, #{vars.$ui-layer}, #{vars.$transitions-layer}, #{vars.$final-layer};
 
 @layer #{vars.$base-layer} {
   // html,
@@ -15,20 +15,78 @@
 
   *,
   *::before,
-  *::after {
+  *::after,
+  *::part(root) {
     box-sizing: border-box;
   }
 
-  // dialog {
-  //   margin: 0;
-  // }
+  *,
+  *::part(root) {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
 
-  body {
-    background-color: var(--primary-bg);
+  *,
+  *::part(root) {
+    -webkit-touch-callout: none; // disables long-press menu
+  }
+
+  *:not(input, textarea),
+  *::part(root) {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  button,
+  select {
+    text-transform: none;
+  }
+
+  button,
+  *::part(button),
+  input,
+  *::part(input),
+  optgroup,
+  *::part(optgroup),
+  select,
+  *::part(select),
+  textarea *::part(textarea) {
+    font-family: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    font-size: 100%;
+    font-weight: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+    // color: inherit;
+  }
+
+  [role='button'],
+  button,
+  *::part(button) {
+    text-align: unset;
+
+    // appearance: none;
+    // -webkit-appearance: none;
+
+    touch-action: manipulation;
+  }
+
+  [role='button'],
+  summary,
+  button,
+  *::part(button) {
+    cursor: pointer;
+  }
+
+  input,
+  *::part(input) {
+    min-inline-size: 25px; // NOTE: For inputs overflowing-x
   }
 
   body {
     display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: minmax(0px, 1fr);
 
     position: absolute;
     inset: 0;
@@ -36,20 +94,65 @@
     margin: 0;
     padding: 0;
 
+    background-color: var(--canvas); //light-dark(oklch(var(--primary-bg)), var(--primary-bg-dark));
+
+    color: var(--canvastext); //light-dark(var(--primary-label), var(--primary-label-dark));
+
     touch-action: none !important;
   }
 
+  html {
+    transition: font-size 1ms step-start;
+  }
+
+  // label {
+  //   // remove this
+  //   display: inline-grid;
+  //   position: relative;
+  //   // min-height: var(--toolbar-cell-min-size);
+  //   // min-width: var(--toolbar-cell-min-size);
+  //   // container-type: inline-size;
+
+  //   grid-template-columns: minmax(0, 1fr);
+  //   grid-template-rows: minmax(0, 1fr);
+
+  //   place-content: center;
+  //   place-items: center;
+  //   // line-height: 1;
+
+  //   > svg {
+  //     display: inline-grid;
+  //     width: 2rem;
+  //     height: 2rem;
+  //   }
+
+  //   > i {
+  //     display: inline-grid;
+  //     font-size: 2rem;
+  //   }
+  // }
+
   $CONFIG: (
     vt-fwd-class-name: vars.$vt-fwd-class-name,
-    disclosure-group-contents-height-css-prop: vars.$disclosure-group-contents-height-css-prop,
-    disclosure-group-animation-duration-css-prop: vars.$disclosure-group-animation-duration-css-prop,
-    disclosure-group-animation-close-class: vars.$disclosure-group-animation-close-class,
+
+    // sidebar-toggle-padding-inline-start-css-prop: vars.$sidebar-toggle-padding-inline-start-css-prop,
+    //
+    // toolbar-leading-stack-part-name: vars.$toolbar-leading-stack-part-name,
+    // toolbar-principal-stack-part-name: vars.$toolbar-principal-stack-part-name,
+    // toolbar-trailing-stack-part-name: vars.$toolbar-trailing-stack-part-name,
+    //
+    // ipad-portrait-bp-max: vars.$ipad-portrait-bp-max,
+    // ipad-portrait-bp-min: vars.$ipad-portrait-bp-min,
+    // ipad-landscape-bp-max: vars.$ipad-landscape-bp-max,
+    // ipad-landscape-bp-min: vars.$ipad-landscape-bp-min,
+    ipad-sheet-view-inline-size: vars.$ipad-sheet-view-inline-size,
+    ipad-sheet-view-height: vars.$ipad-sheet-view-height,
   );
 
-@debug functions.map-to-query($CONFIG);
+  @debug functions.map-to-query($CONFIG);
 
-html::before {
-  content: '#{functions.map-to-query($CONFIG)}';
-  display: none;
+  html::before {
+    content: '#{functions.map-to-query($CONFIG)}';
+    display: none;
+  }
 }
-}