@swiftwc/ui 0.0.0-dev.0 → 0.0.0-dev.100

package/scss/_base.scss

@@ -0,0 +1,5 @@
+@forward 'base/root';
+
+@forward 'base/reboot';
+
+@forward 'base/layout';

package/scss/_components.scss

@@ -0,0 +1,90 @@
+@forward 'components/index';
+
+@forward 'components/v-keyboard';
+
+@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';
+
+@forward 'components/tool-bar-item';
+
+@forward 'components/tool-bar-item-group';
+
+@forward 'components/plain-button';
+@forward 'components/borderless-button';
+@forward 'components/bordered-button';
+@forward 'components/bordered-prominent-button';
+@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';
+
+// @forward 'components/button-view';
+
+@forward 'components/body-view';
+
+@forward 'components/navigation-large-title';
+@forward 'components/navigation-title';
+
+@forward 'components/sidebar-toggle';
+
+@forward 'components/menu-view';
+
+@forward 'components/sidebar-view';
+
+@forward 'components/list-view';
+@forward 'components/form-view';
+@forward 'components/section-view';
+@forward 'components/table-view';
+@forward 'components/table-row';
+@forward 'components/table-column';
+
+@forward 'components/text-field';
+@forward 'components/date-picker';
+@forward 'components/picker-view';
+
+@forward 'components/navigation-stack';
+@forward 'components/navigation-split-view';
+
+@forward 'components/tab-view';
+@forward 'components/tab-bar';
+@forward 'components/tab-item';

package/scss/_final.scss

@@ -0,0 +1 @@
+@forward 'final/touch-glass';

package/scss/_functions.scss

@@ -0,0 +1,31 @@
+@use 'sass:math';
+@use 'sass:string';
+
+@function subtract-tiny($value) {
+  @if math.unit($value) == 'px' {
+    @return $value - 0.01px;
+  } @else if math.unit($value) == 'rem' {
+    @return $value - 0.0001rem; // “very large” subtraction
+  } @else {
+    @warn "Unsupported unit: #{unit($value)}";
+    @return $value;
+  }
+}
+
+@function map-to-query($map) {
+  $parts: '';
+  @each $key, $value in $map {
+    $parts: string.insert($parts, '&#{$key}=#{$value}', 0);
+  }
+  @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

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

package/scss/_placeholders.scss

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

package/scss/_transitions.scss

@@ -0,0 +1,32 @@
+@forward 'transitions/index';
+
+@forward 'transitions/fwd';
+
+@forward 'transitions/bwd';
+
+@forward 'transitions/fwd.navbar';
+
+@forward 'transitions/bwd.navbar';
+
+@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';
+
+@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

@@ -0,0 +1,68 @@
+@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;
+$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;
+
+$nav-split-view-2col-bp: 43rem !default;
+$nav-split-view-3col-bp: 64rem !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;
+
+// $ipad-portrait-bp: 20rem !default;
+$ipad-portrait-bp: 43rem !default;
+
+// $ipad-landscape-bp: 30rem !default;
+$ipad-landscape-bp: 68rem !default;
+
+$table-expanded-bp: 31rem !default;
+
+// 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
+
+$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)
+
+$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-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;
+$nav-split-view-3col-bp-max: #{functions.subtract-tiny($nav-split-view-3col-bp)};
+$nav-split-view-3col-bp-min: $nav-split-view-3col-bp;
+
+@debug $ipad-portrait-bp-max;
+
+// SECTION: checks
+
+@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) {
+  @warn "$nav-split-view-2col-bp should not be larger than $nav-split-view-3col-bp!";
+}

package/scss/base/_layout.scss

@@ -0,0 +1,66 @@
+@use '../vars';
+@use '../mixins';
+@use '../placeholders';
+
+@layer #{vars.$components-layer} {
+  body-view,
+  navigation-stack,
+  navigation-split-view,
+  [is='full-screen'],
+  [is='sheet-view'] {
+    :where(&) {
+      position: relative;
+
+      grid-auto-flow: column;
+
+      grid-template-columns: minmax(0, 1fr); //repeat(auto-fit, minmax(0, 1fr));
+      grid-template-rows: minmax(0, 1fr);
+    }
+
+    :where(& > *:not([slot])) {
+      @include mixins.span-all;
+    }
+  }
+
+  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 {
+      :where(&) {
+        --scroll-view-translate: translateX(var(--view-transition-leading-x));
+      }
+    }
+
+    // & > 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;
+      }
+    }
+  }
+
+  // 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;
+  //     }
+  //   }
+  // }
+}