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

package/scss/components/_sidebar-view.scss

@@ -0,0 +1,63 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  [is='sidebar-view'] {
+    @include mixins.reset-dialog;
+
+    // dowh
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    @media (prefers-reduced-motion: no-preference) {
+      @include mixins.if-2col-split-view-fits {
+        navigation-split-view:has(
+            > dialog[is='sidebar-view']
+          )[preferred-compact-column='content']
+          & {
+          transition: margin-inline-start #{vars.$sidebar-transition-duration}
+            ease-out allow-discrete;
+        }
+      }
+    }
+
+    &::backdrop {
+      background-color: transparent;
+
+      @media (prefers-reduced-motion: no-preference) {
+        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] {
+      &::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));
+        }
+      }
+    }
+  }
+}
+
+@layer #{vars.$final-layer} {
+  [is='sidebar-view'] {
+    &[open] {
+      margin-inline-start: 0px !important;
+    }
+  }
+}

package/scss/components/_tab-bar-stack.scss

@@ -0,0 +1,101 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  // [is='tab-bar'] > scroll-view {
+  //   display: grid;
+  //   // border-radius: inherit;
+  // }
+
+  // tab-bar-stack {
+  // box-shadow: inset 0 0 0 12px firebrick;
+  // }
+
+  @include mixins.if-iphone-portrait {
+    [is='tab-bar']>scroll-view {
+      grid-auto-flow: column;
+
+      // @include mixins.contain-overscroll;
+
+      // grid-auto-flow: column;
+
+      // overflow: auto clip;
+    }
+
+    tab-bar-stack {
+      grid-auto-flow: column;
+      margin-block: 0 !important; // scroll-view > * override
+    }
+  }
+
+  @include mixins.if-ipad-portrait {
+    tab-bar-stack {
+      grid-auto-flow: column;
+
+      [is='tab-bar'][open] & {
+        grid-auto-flow: row;
+
+        align-content: start;
+
+        row-gap: 0.5rem;
+      }
+
+      [is='tab-bar']:not([open]) & {
+        margin-block: 0 !important; // scroll-view > * override
+      }
+    }
+
+    scroll-view {
+      [is='tab-bar']>& {
+        @include mixins.contain-overscroll;
+
+        grid-auto-flow: column;
+
+        overflow: auto clip;
+      }
+
+      [is='tab-bar'][open]>& {
+        // padding-block-start: 30px;
+        grid-auto-flow: row;
+
+        overflow: clip auto;
+
+        @include mixins.make-scrollable;
+      }
+    }
+  }
+
+  @include mixins.if-iphone-landscape {
+    tab-bar-stack {
+      align-content: start;
+
+      row-gap: 0.5rem;
+    }
+
+    [is='tab-bar']>scroll-view {
+      overflow: clip auto;
+      @include mixins.contain-overscroll;
+      @include mixins.make-scrollable;
+    }
+  }
+
+  @include mixins.if-ipad-landscape {
+    tab-bar-stack {
+      align-content: start;
+
+      row-gap: 0.5rem;
+    }
+
+    [is='tab-bar']>scroll-view {
+      //
+
+
+      overflow: clip auto;
+      @include mixins.contain-overscroll;
+
+      @include mixins.make-scrollable;
+    }
+
+
+  }
+}

package/scss/components/_tab-bar.scss

@@ -0,0 +1,137 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  [is='tab-bar'] {
+    @include mixins.reset-dialog;
+
+    // dowh
+    overflow: clip;
+    width: fit-content;
+    height: auto;
+
+    position: fixed; // show always
+
+    background: #ffffff9e;
+    backdrop-filter: blur(4px);
+
+    box-shadow:
+      0 0 0 1px #fff inset,
+      0px 0px 4px 2px #0000001c;
+
+    transition: all #{vars.$sidebar-transition-duration} ease-out allow-discrete;
+
+    touch-action: none; // important for backdrop pans!
+
+    navigation-bar,
+    bottom-bar {
+      padding-inline: 0;
+    }
+
+
+    @include mixins.if-iphone-portrait {
+      max-width: var(--tab-bar-iphone-max-width);
+      height: var(--tab-bar-iphone-height);
+      // left: 50%;
+      border-radius: var(--tab-bar-iphone-border-radius);
+      inset: auto auto max(var(--safe-area-inset-bottom), var(--tab-bar-sidebar-spacing)) 50%;
+      transform: translateX(-50%);
+      //
+      grid-auto-flow: column;
+
+      &:not([open]) {
+        tool-bar {
+          display: none;
+        }
+      }
+    }
+
+
+
+
+    @include mixins.if-ipad-portrait {
+      width: var(--tab-bar-ipad-width);
+      height: var(--tab-bar-ipad-height);
+
+      inset: max(var(--safe-area-inset-top), var(--tab-bar-sidebar-spacing)) auto auto 50%;
+      transform: translateX(-50%);
+
+      border-radius: var(--tab-bar-ipad-border-radius);
+
+      grid-auto-flow: column;
+
+      // transition: all 250ms ease-out allow-discrete;
+
+      &:not([open]) {
+        tool-bar {
+          display: none;
+        }
+      }
+
+      &[open] {
+        // @include mixins.make-navbar;
+
+        inset: max(var(--safe-area-inset-top), var(--tab-bar-sidebar-spacing)) auto max(var(--safe-area-inset-bottom), var(--tab-bar-sidebar-spacing)) max(var(--safe-area-inset-left), var(--tab-bar-sidebar-spacing));
+
+        height: auto; // override topbar
+        transform: translateX(0);
+        width: var(--tab-bar-sidebar-width);
+
+        border-radius: var(--tab-bar-sidebar-border-radius);
+
+        grid-auto-flow: row;
+
+        &>* {
+          @include mixins.span-all;
+
+          --safe-area-inset-top: 0px !important; // reset navbar > span
+          --safe-area-inset-bottom: 0px !important; // reset navbar > span
+        }
+
+        // animation: slide-in 250ms ease-out forwards;
+      }
+    }
+
+    @include mixins.if-iphone-landscape {
+      inset: max(var(--safe-area-inset-top), var(--tab-bar-sidebar-spacing)) auto max(var(--safe-area-inset-bottom), var(--tab-bar-sidebar-spacing)) -100%;
+
+      width: var(--tab-bar-sidebar-width);
+
+      border-radius: var(--tab-bar-sidebar-border-radius);
+
+      &[open] {
+        left: max(var(--safe-area-inset-left), var(--tab-bar-sidebar-spacing));
+        // transform: translateX(0);
+
+        --tabview-padding-inline-start: 0px !important; // override tab-view prop
+
+        >scroll-view {
+          --canvas-bg: #ffffff9e;
+        }
+      }
+    }
+
+    @include mixins.if-ipad-landscape {
+      // grid-area: aside;
+      // position: relative;
+      // margin: 10px;
+      // height: 100svh;
+      inset: max(var(--safe-area-inset-top), var(--tab-bar-sidebar-spacing)) auto max(var(--safe-area-inset-bottom), var(--tab-bar-sidebar-spacing)) max(var(--safe-area-inset-left), var(--tab-bar-sidebar-spacing));
+
+      width: var(--tab-bar-sidebar-width);
+
+      // max-height: calc(
+      //   var(--100lvh, 100lvh) - max(
+      //       var(--safe-area-inset-top),
+      //       var(--tab-bar-sidebar-spacing)
+      //     ) - max(var(--safe-area-inset-bottom), var(--tab-bar-sidebar-spacing))
+      // );
+
+      border-radius: var(--tab-bar-sidebar-border-radius);
+
+      overflow: clip;
+
+      // animation: slide-in 250ms ease-out forwards;
+    }
+  }
+}

package/scss/components/_tab-view.scss

@@ -0,0 +1,168 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  tab-view {
+    // grid-area: main;
+    grid-template-columns: subgrid; // inherits columns from container
+    grid-template-rows: subgrid; // inherits rows if needed
+  }
+
+  // @media (max-width: #{vars.$ipad-portrait-bp-max}) and (orientation: portrait) {
+  // }
+
+  // @media (min-width: #{vars.$ipad-portrait-bp-max}) and (orientation: portrait) {
+  // }
+
+  // @media (max-width: #{vars.$ipad-landscape-bp-max}) and (orientation: landscape) {
+  // }
+
+  // tab-view {
+  //   position: fixed;
+  //   width: 100px;
+  //   height: 50px;
+  //   left: 50%;
+  //   bottom: var(--safe-area-inset-bottom);
+  //   transform: translateX(-50%);
+  //   background: yellow;
+  // }
+
+  //  make tab-view responsive
+  body {
+    // grid-template: 'aside main' 1fr / 0px minmax(0, 1fr);
+    grid-template-rows: 1fr;
+    grid-template-columns: minmax(0px, 1fr);
+    // grid-template-areas: 'main';
+    // will-change: grid-template;
+    // transition: grid-template 750ms ease;
+  }
+
+  // body:has(tab-view input[type='checkbox']:checked) {
+  // grid-template: 'aside main' 1fr / 300px minmax(0, 1fr);
+  // }
+
+  @media (orientation: landscape) {
+    scroll-view:not(dialog scroll-view) {
+      tab-view navigation-stack > &,
+      tab-view navigation-split-view > &,
+      tab-view body-view > &,
+      tab-view & ~ navigation-bar,
+      tab-view & ~ bottom-bar {
+        --safe-area-inset-top: max(
+          env(safe-area-inset-top),
+          var(--tab-bar-sidebar-spacing)
+        );
+        --safe-area-inset-bottom: max(
+          env(safe-area-inset-bottom),
+          var(--tab-bar-sidebar-spacing)
+        );
+      }
+    }
+    tab-view navigation-split-view > [is='sidebar-view'] > scroll-view {
+      --safe-area-inset-top: max(
+        env(safe-area-inset-top),
+        var(--tab-bar-sidebar-spacing)
+      );
+      --safe-area-inset-bottom: max(
+        env(safe-area-inset-bottom),
+        var(--tab-bar-sidebar-spacing)
+      );
+    }
+  }
+
+  @include mixins.if-iphone-portrait {
+    scroll-view:not(dialog scroll-view) {
+      tab-view navigation-stack > &,
+      tab-view navigation-split-view > &,
+      tab-view body-view > &,
+      tab-view & ~ navigation-bar,
+      tab-view & ~ bottom-bar {
+        --safe-area-inset-bottom: max(
+          env(safe-area-inset-bottom),
+          var(--tab-bar-sidebar-spacing)
+        );
+      }
+    }
+    tab-view navigation-split-view > [is='sidebar-view'] > scroll-view {
+      --safe-area-inset-bottom: max(
+        env(safe-area-inset-bottom),
+        var(--tab-bar-sidebar-spacing)
+      );
+    }
+  }
+
+  @include mixins.if-iphone-landscape {
+    scroll-view:not(dialog scroll-view) {
+      // tab-view navigation-stack > &,
+      // tab-view navigation-split-view > &,
+      // tab-view body-view > &,
+      tab-view & ~ navigation-bar,
+      tab-view & ~ bottom-bar {
+        --safe-area-inset-left: var(--tabview-padding-inline-start, 0px);
+      }
+    }
+  }
+
+  @include mixins.if-ipad-portrait {
+    scroll-view:not(dialog scroll-view) {
+      tab-view navigation-stack > &,
+      tab-view navigation-split-view > &,
+      tab-view body-view > &,
+      tab-view & ~ navigation-bar,
+      tab-view & ~ bottom-bar {
+        --safe-area-inset-top: calc(
+          max(env(safe-area-inset-top), var(--tab-bar-sidebar-spacing)) +
+            var(--tab-bar-ipad-height)
+        );
+      }
+    }
+    tab-view navigation-split-view > [is='sidebar-view'] > scroll-view {
+      --safe-area-inset-top: calc(
+        max(env(safe-area-inset-top), var(--tab-bar-sidebar-spacing)) +
+          var(--tab-bar-ipad-height)
+      );
+    }
+  }
+
+  @include mixins.if-ipad-landscape {
+    // body:has(> tab-view) {
+    //   grid-template-columns: 300px minmax(0px, 1fr);
+    // }
+
+    // tab-view {
+    //   grid-column: 1 / -1; // span all columns
+    //   grid-row: 1 / -1; // span all rows
+    // }
+
+    // tab-view {
+    // padding-inline-start: calc(
+    //   max(var(--safe-area-inset-left), var(--tab-bar-sidebar-spacing)) +
+    //     var(--tab-bar-sidebar-width)
+    // );
+    scroll-view:not(dialog scroll-view) {
+      tab-view navigation-stack > &,
+      tab-view navigation-split-view > &,
+      tab-view body-view > &,
+      tab-view & ~ navigation-bar,
+      tab-view & ~ bottom-bar {
+        --safe-area-inset-left: calc(
+          max(env(safe-area-inset-left), var(--tab-bar-sidebar-spacing)) +
+            var(--tab-bar-sidebar-width)
+        );
+      }
+    }
+    // }
+  }
+
+  // @media (min-width: 600px) and (orientation: landscape) {
+  //   tab-view {
+  //     position: relative;
+  //     grid-area: aside;
+  //     height: var(--100svh, 100svh);
+  //     transform: none;
+  //     left: 0;
+  //     width: 300px;
+  //     justify-self: end;
+  //   }
+  // }
+}

package/scss/components/_tool-bar-item-group.scss

@@ -0,0 +1,37 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  tool-bar-item-group {
+    // pointer-events: all;
+
+    grid-auto-flow: column;
+    grid-template-columns: minmax(0, 1fr);
+    column-gap: var(--toolbar-col-gap);
+
+    background-color: var(--toolbar-cell-bg);
+    padding-inline: var(--toolbar-cell-inline-padding);
+    padding-block: var(--toolbar-cell-block-padding);
+    border-radius: var(--toolbar-cell-border-radius);
+    border-width: 0;
+
+    //
+    // --component-bg: white;
+    // --component-padding-inline: 5px;
+    // --component-padding-block: 5px;
+    // --component-border-radius: 99999px;
+    // --component-border-width: 0;
+
+    // button {
+    //   // appearance: none;
+    //   // -webkit-appearance: none;
+    //   // box-shadow: none;
+    //   // outline: 0;
+    //   border: var(--component-border-width);
+    //   background-color: var(--component-bg);
+    //   padding-inline: var(--component-padding-inline);
+    //   padding-block: var(--component-padding-block);
+    //   border-radius: var(--component-border-radius);
+    // }
+  }
+}

package/scss/components/_tool-bar-item.scss

@@ -0,0 +1,87 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  tool-bar-item,
+  tab-item {
+    // background-color: red;
+    // padding: 5px;
+    // border-radius: 99999px;
+
+    // height: 40px;
+
+    // pointer-events: all;
+
+    //
+    --component-bg: var(--toolbar-cell-bg);
+    --component-padding-inline: var(--toolbar-cell-inline-padding);
+    --component-padding-block: var(--toolbar-cell-block-padding);
+    --component-border-radius: var(--toolbar-cell-border-radius);
+    --component-border-width: 0;
+
+    button,
+    input {
+      appearance: none;
+      -webkit-appearance: none;
+      // box-shadow: none;
+      // outline: 0;
+      border: var(--component-border-width);
+      background-color: var(--component-bg);
+      padding-inline: var(--component-padding-inline);
+      padding-block: var(--component-padding-block);
+      border-radius: var(--component-border-radius);
+      min-width: 25px; // NOTE: For inputs overflowing-x
+
+      // &:not(:disabled):not([readonly]) {
+      //   &:focus-visible {
+      //     background-color: var(--toolbar-cell-focus-bg);
+      //   }
+      //   // order matters! BEFORE active
+      //   @media (pointer: fine) {
+      //     &:hover {
+      //       background-color: var(--toolbar-cell-focus-bg);
+      //     }
+      //   }
+      //   // order matters! AFTER hover/fvisible
+      //   &:active {
+      //     background-color: var(--toolbar-cell-active-bg);
+      //   }
+      // }
+    }
+  }
+}
+
+@layer #{vars.$colors-layer} {
+  tool-bar-item,
+  tab-item {
+    button,
+    input {
+      &:not(:disabled):not([readonly]) {
+        &:focus-visible {
+          background-color: var(--toolbar-cell-focus-bg);
+        }
+
+        // order matters! BEFORE active
+        @media (pointer: fine) {
+          &:hover {
+            background-color: var(--toolbar-cell-focus-bg);
+          }
+        }
+      }
+    }
+  }
+}
+
+@layer #{vars.$ui-layer} {
+  tool-bar-item,
+  tab-item {
+    button,
+    input {
+      &:not(:disabled):not([readonly]) {
+        &:active {
+          background-color: var(--toolbar-cell-active-bg);
+        }
+      }
+    }
+  }
+}

package/scss/components/_tool-bar.scss

@@ -0,0 +1,90 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  tool-bar {
+    // background-color: red;
+    position: sticky;
+    width: 100%;
+
+    place-items: center;
+    place-content: center;
+    // grid-template-columns: 1fr auto 1fr;
+
+    pointer-events: none;
+
+    > span {
+      display: grid;
+      grid-template-columns: 1fr auto 1fr;
+
+      &::before,
+      &::after {
+        content: '';
+        display: grid;
+      }
+
+      &::before {
+        height: 20px;
+        background: green;
+      }
+
+      &::after {
+        height: 20px;
+        background: darkgoldenrod;
+      }
+    }
+
+    @media (pointer: fine) {
+      & {
+        justify-content: start;
+      }
+    }
+  }
+
+  tool-bar[slot='navigation-bar'] {
+    top: 0;
+    height: calc(var(--safe-area-inset-top) + var(--navigation-bar-height));
+    padding-block-start: var(--safe-area-inset-top);
+    transform: translateY(calc(var(--safe-area-inset-top) * -1));
+
+    > span {
+      &::before {
+        width: calc(
+          var(--navbar-padding-inline-start, 0px) +
+            var(--toolbar-area-inset-left, 0px)
+        );
+      }
+
+      &::after {
+        width: var(--navbar-padding-inline-end, 0px);
+      }
+    }
+
+    // > div {
+    @include mixins.make-navbar(bottom);
+    // height: calc(var(--safe-area-inset-top) + 50px);
+    // }
+  }
+
+  tool-bar[slot='bottom-bar'] {
+    top: calc(100% - var(--tool-bar-height) - var(--safe-area-inset-bottom));
+    // background-color: red;
+    height: calc(var(--safe-area-inset-bottom) + var(--tool-bar-height));
+    padding-block-end: var(--safe-area-inset-bottom);
+    transform: translateY(var(--safe-area-inset-bottom));
+
+    > span {
+      &::before {
+        width: var(--toolbar-padding-inline-start);
+      }
+
+      &::after {
+        width: var(--toolbar-padding-inline-end);
+      }
+    }
+
+    // > div {
+    @include mixins.make-navbar(top);
+    // }
+  }
+}