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

package/scss/_components.scss

@@ -4,24 +4,34 @@
 
 @forward 'components/disclosure-group';
 
+@forward 'components/image-view';
+@forward 'components/group-box';
+
 @forward 'components/h-divider';
 @forward 'components/v-divider';
 
 @forward 'components/full-screen';
 
 @forward 'components/detail-placeholder';
+@forward 'components/progress-view';
+
+@forward 'components/fine-tooltip';
 
 @forward 'components/sticky-container';
 
 @forward 'components/sheet-view';
 
+@forward 'components/content-unavailable';
+
 @forward 'components/confirmation-dialog';
+@forward 'components/alert-dialog';
 
 @forward 'components/scroll-view';
 @forward 'components/scroll-view-proxy';
 
 @forward 'components/h-stack';
 @forward 'components/v-stack';
+@forward 'components/h-flex-stack';
 @forward 'components/v-flex-stack';
 
 @forward 'components/scroll-view-toolbars';
@@ -37,9 +47,14 @@
 @forward 'components/glass-button';
 @forward 'components/glass-prominent-button';
 
+@forward 'components/search-view';
+
 @forward 'components/tool-bar';
 
 @forward 'components/label-view';
+@forward 'components/text-view';
+
+@forward 'components/toggle-view';
 
 @forward 'components/labeled-content';
 

package/scss/_functions.scss

@@ -19,3 +19,13 @@
   }
   @return string.slice($parts, 2);
 }
+
+@function str-replace($string, $search, $replace: '') {
+  $index: string.index($string, $search);
+
+  @if $index {
+    @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+  }
+
+  @return $string;
+}

package/scss/_maps.scss

@@ -0,0 +1,293 @@
+$picker-styles-names: menu, navigation-link, sheet;
+$label-styles-names: icon-only, title-only, title-and-icon;
+$list-styles-names: inset, inset-grouped, sidebar;
+$form-styles-names: inset, inset-grouped, sidebar;
+$table-styles-names: inset;
+// $labeled-content-styles: vertical, horizontal;
+
+$stack-templates-list-vals: (
+  (minmax(0, 1fr)),
+  (repeat(1, minmax(0, 1fr))),
+  (repeat(2, minmax(0, 1fr))),
+  (repeat(3, minmax(0, 1fr))),
+  (repeat(4, minmax(0, 1fr))),
+  (repeat(5, minmax(0, 1fr))),
+  (repeat(6, minmax(0, 1fr))),
+  (repeat(7, minmax(0, 1fr))),
+  (repeat(8, minmax(0, 1fr))),
+  (repeat(9, minmax(0, 1fr))),
+  (repeat(10, minmax(0, 1fr))),
+  (minmax(0, 1fr) auto),
+  (repeat(1, minmax(0, 1fr)) auto),
+  (repeat(2, minmax(0, 1fr)) auto),
+  (repeat(3, minmax(0, 1fr)) auto),
+  (repeat(4, minmax(0, 1fr)) auto),
+  (repeat(5, minmax(0, 1fr)) auto),
+  (repeat(6, minmax(0, 1fr)) auto),
+  (repeat(7, minmax(0, 1fr)) auto),
+  (repeat(8, minmax(0, 1fr)) auto),
+  (repeat(9, minmax(0, 1fr)) auto),
+  (repeat(10, minmax(0, 1fr)) auto),
+  (auto minmax(0, 1fr)),
+  (repeat(1, auto) minmax(0, 1fr)),
+  (repeat(2, auto) minmax(0, 1fr)),
+  (repeat(3, auto) minmax(0, 1fr)),
+  (repeat(4, auto) minmax(0, 1fr)),
+  (repeat(5, auto) minmax(0, 1fr)),
+  (repeat(6, auto) minmax(0, 1fr)),
+  (repeat(7, auto) minmax(0, 1fr)),
+  (repeat(8, auto) minmax(0, 1fr)),
+  (repeat(9, auto) minmax(0, 1fr)),
+  (repeat(10, auto) minmax(0, 1fr)),
+  (auto auto minmax(0, 1fr)),
+  (auto auto auto minmax(0, 1fr)),
+  (auto auto auto auto minmax(0, 1fr)),
+  (auto minmax(0, 1fr) auto),
+  (repeat(1, auto) minmax(0, 1fr) repeat(1, auto)),
+  (repeat(1, auto) minmax(0, 1fr) repeat(2, auto)),
+  (repeat(1, auto) minmax(0, 1fr) repeat(3, auto)),
+  (repeat(1, auto) minmax(0, 1fr) repeat(4, auto)),
+  (repeat(1, auto) minmax(0, 1fr) repeat(5, auto)),
+  (repeat(2, auto) minmax(0, 1fr) repeat(1, auto)),
+  (repeat(3, auto) minmax(0, 1fr) repeat(1, auto)),
+  (repeat(4, auto) minmax(0, 1fr) repeat(1, auto)),
+  (repeat(5, auto) minmax(0, 1fr) repeat(1, auto)),
+  (repeat(2, auto) minmax(0, 1fr) repeat(2, auto)),
+  (auto minmax(0, 1fr) auto auto)
+);
+
+$inline-map: (
+  leading: (
+    (justify-items (start)),
+    (justify-content (start)),
+  ),
+  'leading fill': (
+    (justify-items (start)),
+    (justify-content (stretch)),
+  ),
+  center: (
+    (justify-items (center)),
+    (justify-content (center)),
+  ),
+  trailing: (
+    (justify-items (end)),
+    (justify-content (end)),
+  ),
+  fill: (
+    (justify-items (stretch)),
+    (justify-content (stretch)),
+  ),
+  space-between: (
+    (justify-content (space-between)),
+  ),
+);
+
+$block-map: (
+  leading: (
+    (align-items (start)),
+    (align-content (start)),
+  ),
+  'leading fill': (
+    (align-items (start)),
+    (align-content (stretch)),
+  ),
+  center: (
+    (align-items (center)),
+    (align-content (center)),
+  ),
+  trailing: (
+    (align-items (end)),
+    (align-content (end)),
+  ),
+  fill: (
+    (align-items (stretch)),
+    (align-content (stretch)),
+  ),
+  space-between: (
+    (align-content (space-between)),
+  ),
+);
+
+$inline-placement-map: (
+  'fill': (
+    (place-items (stretch)),
+    (place-content (stretch)),
+  ),
+  'leading fill': (
+    (place-items (stretch start)),
+    (place-content (stretch start)),
+  ),
+  'fill leading': (
+    (place-items (start stretch)),
+    (place-content (start stretch)),
+  ),
+  'fill space-between': (
+    (align-content (space-between)),
+    (justify-items (stretch)),
+    (justify-content (stretch)),
+  ),
+);
+
+$block-placement-map: (
+  'fill': (
+    (place-items (stretch)),
+    (place-content (stretch)),
+  ),
+  'leading fill': (
+    (place-items (start stretch)),
+    (place-content (start stretch)),
+  ),
+  'fill leading': (
+    (place-items (stretch start)),
+    (place-content (stretch start)),
+  ),
+  'space-between fill': (
+    (align-content (space-between)),
+    (justify-items (stretch)),
+    (justify-content (stretch)),
+  ),
+);
+
+$label-fonts-map: (
+  footnote: (
+    size: 1rem,
+    leading: calc(1.1875 / 1),
+    weight: 400,
+  ),
+  caption2: (
+    size: 0.75rem,
+    leading: calc(1.0625 / 0.75),
+    weight: 400,
+  ),
+  caption: (
+    size: 0.8125rem,
+    leading: calc(1.25 / 0.8125),
+    weight: 400,
+  ),
+  callout: (
+    size: 0.875rem,
+    leading: calc(1.1875 / 0.875),
+    weight: 400,
+  ),
+  body: (
+    size: 1rem,
+    leading: calc(1.5 / 1),
+    weight: 400,
+  ),
+  subheadline: (
+    size: 1.125rem,
+    leading: calc(1.6875 / 1.125),
+    weight: 400,
+  ),
+  headline: (
+    size: 1.25rem,
+    leading: calc(1.75 / 1.25),
+    weight: 500,
+  ),
+  title3: (
+    size: 1.5rem,
+    leading: calc(2 / 1.5),
+    weight: 600,
+  ),
+  title2: (
+    size: 1.875rem,
+    leading: calc(2.25 / 1.875),
+    weight: 600,
+  ),
+  title: (
+    size: 2.25rem,
+    leading: calc(2.5 / 2.25),
+    weight: 600,
+  ),
+  large-title: (
+    size: 3rem,
+    leading: 1,
+    weight: 700,
+  ),
+  extra-large-title: (
+    size: 3.75rem,
+    leading: 1,
+    weight: 700,
+  ),
+  extra-large-title2: (
+    size: 4.5rem,
+    leading: 1,
+    weight: 700,
+  ),
+);
+
+// button sizes
+$button-sizes-map: (
+  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,
+    ),
+  ),
+);
+
+$tint-names: gray, blue, red, green, orange, purple;
+
+$foreground-tokens: (
+  primary: --primary,
+  secondary: --secondary,
+  blue: --blue,
+  red: --red,
+  green: --green,
+  orange: --orange,
+  purple: --purple,
+  'blue.secondary': --blue2,
+  'red.secondary': --red2,
+  'green.secondary': --green2,
+  'orange.secondary': --orange2,
+  'purple.secondary': --purple2,
+  'blue.tertiary': --blue3,
+  'red.tertiary': --red3,
+  'green.tertiary': --green3,
+  'orange.tertiary': --orange3,
+  'purple.tertiary': --purple3,
+  'blue.quaternary': --blue4,
+  'red.quaternary': --red4,
+  'green.quaternary': --green4,
+  'orange.quaternary': --orange4,
+  'purple.quaternary': --purple4,
+  'blue.quinary': --blue5,
+  'red.quinary': --red5,
+  'green.quinary': --green5,
+  'orange.quinary': --orange5,
+  'purple.quinary': --purple5,
+);

package/scss/_mixins.scss

@@ -1,3 +1,7 @@
 @forward 'mixins/index';
 
 @forward 'mixins/dialog';
+
+@forward 'mixins/button';
+
+@forward 'mixins/color';

package/scss/_transitions.scss

@@ -8,15 +8,20 @@
 
 @forward 'transitions/bwd.navbar';
 
-@forward 'transitions/dialog';
+@forward 'transitions/sheet-view';
+
+@forward 'transitions/fine-tooltip';
 
 @forward 'transitions/menu-view';
 
+@forward 'transitions/progress-view';
+
 @forward 'transitions/glass-button';
 
 @forward 'transitions/glass-prominent-button';
 
 @forward 'transitions/confirmation-dialog';
+@forward 'transitions/alert-dialog';
 
 @forward 'transitions/navigation-split-view';
 

package/scss/_utils.scss

@@ -7,3 +7,5 @@
 @forward 'utils/spacing';
 
 @forward 'utils/scroll-view';
+
+@forward 'utils/background';

package/scss/_vars.scss

@@ -1,8 +1,9 @@
-@use 'functions';
 @use 'sass:math';
+@use 'functions';
 
 $base-layer: sw-base !default;
 $components-layer: sw-components !default;
+$list-components-layer: sw-list-components !default;
 $nav-components-layer: sw-nav-components !default;
 $tab-components-layer: sw-tab-components !default;
 $utils-layer: sw-utils !default;
@@ -29,123 +30,16 @@ $ipad-landscape-bp: 68rem !default;
 
 $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,
-    ),
-  ),
-);
+// SECTION: SVGs
 
 $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
+// $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
+
+$cancel-button-icon: 'x'; // ph-trash
+$close-button-icon: 'x'; // ph-trash
+$confirm-button-icon: 'check'; // ph-trash
+$delete-button-icon: 'trash'; // ph-trash
 
 // SECTION: computed(s)
 

package/scss/base/_layout.scss

@@ -18,7 +18,6 @@
     }
 
     :where(& > *:not([slot])) {
-      // & > *:not([slot]) {
       @include mixins.span-all;
     }
   }
@@ -29,8 +28,8 @@
   dialog:has(> body-view),
   // body-view:has(> dialog),
   body-view:has(> body-view) {
-    & > scroll-view,
-    & > [is='sidebar-view'] > scroll-view {
+    > scroll-view,
+    > [is='sidebar-view'] > scroll-view {
       :where(&) {
         --scroll-view-translate: translateX(var(--view-transition-leading-x));
       }
@@ -44,13 +43,24 @@
     // & > [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 {
+    > 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;
       }
     }
   }
+
+  // NOTE: Going all the way back from deeply nested views forces an empty landing page.
+  // NOTE: Refactor this to add a content-visibility:visible when bwd/fwd classes are present.
+  // :is(navigation-stack, dialog, body-view):has(> body-view > body-view) {
+  //   > scroll-view,
+  //   > tool-bar {
+  //     :where(&) {
+  //       content-visibility: hidden;
+  //     }
+  //   }
+  // }
 }

package/scss/base/_reboot.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../functions';
 
-@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}, #{vars.$components-layer}, #{vars.$nav-components-layer}, #{vars.$list-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,
@@ -11,6 +11,8 @@
 
   :root {
     interpolate-size: allow-keywords;
+
+    touch-action: manipulation; // Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen
   }
 
   *,
@@ -41,6 +43,12 @@
     text-transform: none;
   }
 
+  // FIXME:
+  .ph,
+  .ph::before {
+    display: grid;
+  }
+
   button,
   *::part(button),
   input,
@@ -103,6 +111,26 @@
 
   html {
     transition: font-size 1ms step-start;
+
+    @media (pointer: fine) {
+      font-size: 14px;
+    }
+
+    font-family: var(--host--font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
+
+    font-feature-settings: var(--host--font-feature-settings, normal);
+
+    font-variation-settings: var(--host--font-variation-settings, normal);
+
+    :where(&:has(body > v-keyboard[system-font='Inter'])) {
+      --host--font-family: Inter, sans-serif;
+
+      --host--font-feature-settings: 'liga' 1, 'calt' 1;
+
+      @supports (font-variation-settings: normal) {
+        --host--font-family: InterVariable, sans-serif;
+      }
+    }
   }
 
   // label {
@@ -147,6 +175,11 @@
     // 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,
+    //
+    cancel-button-icon: vars.$cancel-button-icon,
+    close-button-icon: vars.$close-button-icon,
+    confirm-button-icon: vars.$confirm-button-icon,
+    delete-button-icon: vars.$delete-button-icon,
   );
 
   @debug functions.map-to-query($CONFIG);