@swiftwc/ui 0.0.0-dev.3 → 0.0.0-dev.5

package/scss/components/_toolbars.scss

@@ -0,0 +1,100 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+
+  navigation-bar,
+  bottom-bar {
+    position: absolute;
+
+    // background-color: blue;
+    box-shadow: inset 0 0 4px red;
+
+    padding-inline: var(--safe-area-inset-left) var(--safe-area-inset-right);
+    pointer-events: none;
+
+    grid-template-columns: auto 1fr auto;
+
+    // place-items: center;
+    // place-content: center;
+    // align-items: stretch;
+    // justify-items: center;
+    // align-content: stretch;
+    // justify-content: center;
+
+    >* {
+      pointer-events: all;
+
+      align-self: center;
+    }
+  }
+
+  navigation-bar {
+    // padding-inline: calc(
+    //     var(--safe-area-inset-left, 0px) + var(--navbar-area-inset-left, 0px)
+    //   )
+    //   calc(
+    //     var(--safe-area-inset-right, 0px) + var(--navbar-area-inset-right, 0px)
+    //   );
+
+    inset: 0 0 auto 0;
+
+    height: calc(var(--safe-area-inset-top) + var(--navigation-bar-height));
+
+    padding-block-start: var(--safe-area-inset-top);
+
+    // dialog & {
+    //   transform: translateY(max(-33cqw, -200px));
+    //   inset: auto;
+    // }
+  }
+
+  bottom-bar {
+    // padding-inline: calc(
+    //     var(--safe-area-inset-left, 0px) + var(--toolbar-area-inset-left, 0px)
+    //   )
+    //   calc(
+    //     var(--safe-area-inset-right, 0px) + var(--toolbar-area-inset-right, 0px)
+    //   );
+
+    inset: auto 0 0 0;
+
+    height: calc(var(--safe-area-inset-bottom) + var(--tool-bar-height));
+
+    padding-block-end: var(--safe-area-inset-bottom);
+  }
+
+  ::part(toolbar-leading-stack),
+  ::part(toolbar-principal-stack),
+  ::part(toolbar-trailing-stack) {
+    display: grid;
+
+    grid-auto-flow: column;
+    grid-template-columns: minmax(0, 1fr);
+
+    column-gap: var(--toolbar-col-gap);
+  }
+
+  @include mixins.if-ipad-sheet-fits {
+    [is='sheet-view'] {
+
+      navigation-bar,
+      bottom-bar {
+        --safe-area-inset-left: 0px;
+        --safe-area-inset-right: 0px;
+        // padding-inline: 0;
+      }
+
+      navigation-bar {
+        --safe-area-inset-top: 0px;
+        // padding-block-start: 0;
+        // height: var(--navigation-bar-height);
+      }
+
+      bottom-bar {
+        --safe-area-inset-bottom: 0px;
+        // padding-block-end: 0;
+      }
+    }
+  }
+}

package/scss/components/_v-keyboard.scss

@@ -0,0 +1,12 @@
+@use '../vars';
+
+@layer #{vars.$components-layer} {
+  v-keyboard {
+    position: fixed;
+
+    inset: 0lvh auto auto 0lvw;
+
+    width: 100lvw;
+    height: 100lvh;
+  }
+}

package/scss/components/_v-stack.scss

@@ -0,0 +1,19 @@
+@use '../vars';
+
+@layer #{vars.$components-layer} {
+  v-stack {
+    place-items: center;
+    grid-template-columns: minmax(0, 1fr);
+    box-shadow: inset 0 0 0 2px magenta;
+
+    place-content: center;
+
+    // scroll-view:has(> tool-bar[slot='navigation-bar']) & {
+    //   margin-top: var(--navigation-bar-height);
+    // }
+
+    // scroll-view:has(> tool-bar[slot='bottom-bar']) & {
+    //   margin-bottom: var(--tool-bar-height);
+    // }
+  }
+}

package/scss/index.scss

@@ -1,9 +1,14 @@
-@use "vars";
+@use 'vars';
+@use 'mixins';
 
-@forward "reboot.scss";
+@forward 'dev';
 
-@debug "Loaded @swiftwc/ui/scss layers";
+@forward 'base';
 
-@debug vars.$base-layer;
-@debug vars.$components-layer;
-@debug vars.$transitions-layer;
+@forward 'components';
+
+@forward 'transitions';
+
+@forward 'colors';
+
+@debug '@swiftwc/ui/scss ⚡️ loaded';

package/scss/transitions/_bwd.navbar.scss

@@ -0,0 +1,29 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  tool-bar-item,
+  tool-bar-item-group {
+    &.bwn {
+      @include mixins.vt-toolbar-item-offscreen-keyframe;
+
+      // @starting-style {
+      //   transform: scale(1);
+      //   // opacity: 1;
+      // }
+    }
+
+    &.bwnn {
+      @include mixins.vt-toolbar-item-onscreen-keyframe;
+
+      // @starting-style {
+      //   transform: scale(0);
+      //   // opacity: 0;
+      // }
+    }
+
+    &.bwnn.bwn {
+      @include mixins.vt-toolbar-item-offscreen-keyframe;
+    }
+  }
+}

package/scss/transitions/_bwd.scss

@@ -0,0 +1,55 @@
+@use '../vars';
+
+@layer #{vars.$transitions-layer} {
+  scroll-view {
+    &.bwd {
+      // visibility: collapse;
+
+      transform: translateX(var(--view-transition-trailing-x));
+
+      // @starting-style {
+      // transform: translateX(0%);
+      // }
+    }
+
+    &.bwdd {
+      // visibility: visible;
+
+      // Inert nested landmarks of destination so that destination can be interacted with
+      // Make sure old/outgoing elements can NOT be interacted with (new elements are stacked lower)
+      ~ body-view,
+      ~ navigation-stack,
+      ~ navigation-split-view {
+        pointer-events: none;
+      }
+
+      // IMPORTANT: This requires `!important` bc/ css does not enforce this over the general keep-things-stacked-offscreen rule.
+      transform: translateX(var(--view-transition-principal-x));
+
+      // @starting-style {
+      // transform: translateX(-70%);
+      // }
+    }
+
+    &.bwdd.bwd {
+      transform: translateX(var(--view-transition-trailing-x));
+    }
+
+    // [is='sheet-view'] > &.bwd {
+    //   transform: translateY(100lvh);
+    // }
+  }
+
+  // NOTE: Cannot force root scroll-view to be interacted with! Tabbar gets below the stack.
+  // navigation-split-view > .bwdd {
+  //   z-index: 0;
+  // }
+  navigation-split-view > body-view:has(~ .bwdd) {
+    pointer-events: none;
+    // z-index: 1;
+  }
+
+  // scroll-view.fwdd.bwd {
+  //   transform: translateX(var(--view-transition-principal-x));
+  // }
+}

package/scss/transitions/_dialog.scss

@@ -0,0 +1,32 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  [is='sheet-view'][open] {
+    transform: translateY(var(--view-transition-dialog-onscreen-y));
+
+    @include mixins.if-ipad-sheet-fits {
+      @include mixins.if-2col-split-view-fits {
+        navigation-split-view & {
+          margin-inline-start: var(--safe-area-inset-left);
+        }
+      }
+    }
+
+    &::backdrop {
+      background-color: var(--view-transition-dialog-onscreen-backdrop-bg);
+    }
+
+    @starting-style {
+      &::backdrop {
+        background-color: transparent;
+      }
+    }
+
+    @starting-style {
+      & {
+        transform: translateY(var(--view-transition-dialog-offscreen-y));
+      }
+    }
+  }
+}

package/scss/transitions/_fwd.navbar.scss

@@ -0,0 +1,46 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  // principal-stack > tool-bar-item {
+  //   position: absolute;
+  //   transition: transform 2s ease-out;
+  // }
+
+  // ::slotted(tool-bar-item) {
+  //   background-color: red;
+  // }
+
+  // toolbar {
+  //   display: grid;
+  //   grid-auto-flow: column;
+  //   column-gap: 10px;
+  //   grid-column: 1 / -1; // span all columns
+  //   grid-row: 1 / -1; // span all rows
+  // }
+
+  tool-bar-item,
+  tool-bar-item-group {
+    &.fwn {
+      // BUG: Safari doesn't enforce scaling without this here again redundantly!
+      @include mixins.vt-toolbar-item-offscreen-keyframe;
+
+      // @starting-style {
+      // transform: scale(1);
+      // opacity: 1;
+      // }
+    }
+
+    &.fwnn {
+      @include mixins.vt-toolbar-item-onscreen-keyframe;
+
+      @starting-style {
+        @include mixins.vt-toolbar-item-offscreen-keyframe;
+      }
+    }
+
+    &.fwnn.fwn {
+      @include mixins.vt-toolbar-item-offscreen-keyframe;
+    }
+  }
+}

package/scss/transitions/_fwd.scss

@@ -0,0 +1,54 @@
+@use '../vars';
+
+@layer #{vars.$transitions-layer} {
+  scroll-view {
+    // Make sure old/outgoing elements can NOT be interacted with (new elements are already stacked higher)
+    &.#{vars.$vt-fwd-class-name} {
+      // view-transition-name: match-element;
+      // view-transition-class: scroll-view;
+
+      pointer-events: none;
+
+      // transform: translateX(-70%);
+
+      // @starting-style {
+      // transform: translateX(0%);
+      // }
+    }
+
+    &.fwdd {
+      // view-transition-name: targeted-scroll-view;
+      // view-transition-class: none;
+
+      transform: translateX(var(--view-transition-principal-x));
+
+      @starting-style {
+        transform: translateX(var(--view-transition-trailing-x));
+      }
+    }
+
+    &.fwdd.#{vars.$vt-fwd-class-name} {
+      transform: translateX(var(--view-transition-leading-x));
+    }
+
+    // [is='sheet-view'] > &.fwdd {
+    //   transform: translateY(0);
+
+    //   @starting-style {
+    //     transform: translateY(100lvh);
+    //   }
+    // }
+  }
+
+  // .fwd ~ [is='sheet-view']::backdrop {
+  //   background-color: rgba(0, 0, 0, 0.5);
+
+  //   @starting-style {
+  //     background-color: rgba(0, 0, 0, 0);
+  //   }
+  // }
+
+  // scroll-view.bwdd.fwd {
+  //   transform: translateX(var(--view-transition-leading-x));
+  // }
+}

package/scss/transitions/_index.scss

@@ -0,0 +1,182 @@
+@use '../vars';
+
+@layer #{vars.$transitions-layer} {
+  // ::view-transition-old(root),
+  // ::view-transition-new(root) {
+  //   animation-duration: 15s;
+  // }
+  // ::view-transition-old(root) {
+  //   animation: 15s ease-out both slide-to-left;
+  // }
+
+  // ::view-transition-new(root) {
+  //   animation: 15s ease-out both slide-from-right;
+  // }
+  @media (prefers-reduced-motion: no-preference) {
+    scroll-view {
+      &.#{vars.$vt-fwd-class-name},
+      &.fwdd,
+      &.bwd,
+      &.bwdd {
+        transition:
+          transform var(--view-transition-duration) ease-out allow-discrete,
+          padding-inline-start #{vars.$sidebar-transition-duration} ease-out
+            allow-discrete,
+          margin-inline-start #{vars.$sidebar-transition-duration} ease-out
+            allow-discrete;
+
+        will-change: transform, padding-inline-start, margin-inline-start;
+      }
+    }
+
+    tool-bar-item,
+    tool-bar-item-group {
+      &.fwn,
+      &.fwnn,
+      &.bwn,
+      &.bwnn {
+        transition:
+          transform var(--view-transition-duration) ease-out allow-discrete,
+          opacity var(--view-transition-duration) ease-out allow-discrete,
+          filter var(--view-transition-duration) ease-out allow-discrete;
+
+        will-change: transform, opacity, filter;
+        // > * {
+        // transition: filter var(--view-transition-duration) ease-out allow-discrete;
+        // will-change: filter;
+        // }
+      }
+    }
+
+    [is='sheet-view'] {
+      transition:
+        transform var(--view-transition-duration) allow-discrete,
+        overlay var(--view-transition-duration) allow-discrete,
+        display var(--view-transition-duration) allow-discrete;
+      // transition: background-color var(--view-transition-duration) ease-out
+      //   allow-discrete;
+      will-change: transform, overlay, display;
+
+      &::backdrop {
+        transition:
+          display var(--view-transition-duration) allow-discrete,
+          overlay var(--view-transition-duration) allow-discrete,
+          background-color var(--view-transition-duration);
+        will-change: background-color, overlay, display;
+      }
+
+      &[open] {
+        transform: translateY(var(--view-transition-dialog-onscreen-y));
+
+        &::backdrop {
+          background-color: var(--view-transition-dialog-onscreen-backdrop-bg);
+        }
+
+        @starting-style {
+          &::backdrop {
+            background-color: transparent;
+          }
+        }
+
+        @starting-style {
+          & {
+            transform: translateY(var(--view-transition-dialog-offscreen-y));
+          }
+        }
+      }
+    }
+  }
+  /* scroll-view {
+    view-transition-name: match-element;
+    view-transition-class: scroll-view;
+    // contain: paint;
+
+    &:not(:has(~ body-view)) {
+      view-transition-name: targeted-scroll-view;
+      view-transition-class: none;
+      // contain: layout;
+      // background-color: red;
+    }
+  }
+
+  tool-bar-item {
+    view-transition-name: match-element;
+    view-transition-class: tool-bar-item;
+    // contain: paint;
+  }
+  navigation-bar:not(:has(~ body-view)) > tool-bar-item {
+    view-transition-name: match-element;
+    view-transition-class: targeted-toolbar-items;
+    // contain: layout;
+    // background-color: red;
+  } */
+
+  // :root::view-transition-old(*.scroll-view) {
+  //   animation: var(--view-transition-duration) ease-out both slide-to-left;
+  // }
+  // :root::view-transition-new(*.scroll-view) {
+  //   animation: var(--view-transition-duration) ease-out both slide-to-left;
+  // }
+  // :root::view-transition-old(targeted-scroll-view) {
+  //   animation: var(--view-transition-duration) ease-out both slide-from-right;
+  // }
+  // :root::view-transition-new(targeted-scroll-view) {
+  //   animation: var(--view-transition-duration) ease-out both slide-from-right;
+  // }
+  //
+  /* :root::view-transition-old(*.tool-bar-item) {
+    animation: var(--view-transition-duration) ease-out both shrink-to-tiny;
+  }
+  :root::view-transition-new(*.tool-bar-item) {
+    animation: var(--view-transition-duration) ease-out both expand-from-tiny;
+  }
+  :root::view-transition-old(*.targeted-toolbar-items) {
+    animation: var(--view-transition-duration) ease-out both expand-from-tiny;
+  }
+  :root::view-transition-new(*.targeted-toolbar-items) {
+    animation: var(--view-transition-duration) ease-out both expand-from-tiny;
+  } */
+
+  // html:active-view-transition-type(forwards, backwards) {
+  //   :root {
+  //     view-transition-name: none;
+  //   }
+
+  //   .fwdd {
+  //     view-transition-name: content;
+  //   }
+  // }
+
+  // html:active-view-transition-type(forwards) {
+  //   &::view-transition-old(content) {
+  //     animation: 5s ease-out both slide-to-left;
+  //   }
+  //   &::view-transition-new(content) {
+  //     animation: 5s ease-out both slide-from-right;
+  //   }
+  // }
+}
+
+// @keyframes slide-from-right {
+//   from {
+//     transform: translateX(100%);
+//   }
+// }
+
+// @keyframes slide-to-left {
+//   to {
+//     transform: translateX(-70%);
+//   }
+// }
+
+// @keyframes expand-from-tiny {
+//   from {
+//     transform: scale(0);
+//   }
+// }
+
+// @keyframes shrink-to-tiny {
+//   to {
+//     transform: scale(0);
+//   }
+// }

package/generated/internal/snapshot.d.ts

@@ -1,5 +0,0 @@
-export declare class Snapshot {
-    #private;
-    static get count(): number;
-    static getSnapshot(): void;
-}

package/generated/internal/snapshot.js

@@ -1,23 +0,0 @@
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _a, _Snapshot_count;
-export class Snapshot {
-    static get count() {
-        return __classPrivateFieldGet(this, _a, "f", _Snapshot_count);
-    }
-    static getSnapshot() {
-        var _b;
-        __classPrivateFieldSet(this, _a, (_b = __classPrivateFieldGet(this, _a, "f", _Snapshot_count), _b++, _b), "f", _Snapshot_count);
-    }
-}
-_a = Snapshot;
-_Snapshot_count = { value: 0 };

package/scss/_reboot.scss

@@ -1,11 +0,0 @@
-@use "vars";
-
-@layer #{vars.$base-layer}, #{vars.$components-layer}, #{vars.$transitions-layer};
-
-@layer #{vars.$base-layer} {
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-}