@swiftwc/ui 0.0.0-dev.2 → 0.0.0-dev.21

package/scss/components/_alert-dialog.scss

@@ -0,0 +1,106 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  [is='alert-dialog'] {
+    :where(&) {
+      @include mixins.reset-dialog;
+
+      color: var(--text,);
+
+      touch-action: none;
+
+      position: fixed;
+
+      inline-size: fit-content;
+      block-size: fit-content;
+      height: auto; // safari
+      max-inline-size: min(20rem, 80vw);
+      max-block-size: 80vh;
+
+      margin-block: max(env(safe-area-inset-top), var(--menu-spacing)) max(env(safe-area-inset-bottom), var(--menu-spacing));
+      margin-inline: max(env(safe-area-inset-left), var(--menu-spacing)) max(env(safe-area-inset-right), var(--menu-spacing));
+
+      transform: var(--alert--dialog-scale,);
+      opacity: var(--alert--dialog-opacity,);
+
+      position-anchor: --alert-dialog; // overriden
+      position-area: center;
+
+      overflow: clip;
+      border-radius: 0.9rem;
+
+      backdrop-filter: var(--liquid-glass-backdrop-filter,);
+      box-shadow: var(--menu-popover-box-shadow,); //0 0 10px 10px black;
+
+      padding-block: 1rem;
+      padding-inline: 1em;
+      gap: 1rem;
+
+      // finally
+      --alert--dialog-scale: scale(1.2);
+      --alert--dialog-opacity: 0.8;
+    }
+
+    &[open] {
+      :where(&) {
+        --alert--dialog-scale: scale(1);
+        --alert--dialog-opacity: 1;
+
+        @starting-style {
+          --alert--dialog-scale: scale(1.2);
+          --alert--dialog-opacity: 0.8;
+        }
+      }
+    }
+
+    &[closing] {
+      :where(&) {
+        --alert--dialog-scale: scale(0.98);
+        --alert--dialog-opacity: 0;
+      }
+    }
+
+    // SECTION: componentize
+    // > button {
+    //   :where(&) {
+    // @include mixins.componentize(dialogbtn);
+    //   }
+    // }
+
+    // :where(&) {
+    //   --dialogbtnpadistart: 0.6rem;
+    //   --dialogbtnpadiend: 0.6rem;
+    //   --dialogbtnpadbstart: 0.6rem;
+    //   --dialogbtnpadbend: 0.6rem;
+    //   --dialogbtnradiustl: 1rem;
+    //   --dialogbtnradiustr: 1rem;
+    //   --dialogbtnradiusbl: 1rem;
+    //   --dialogbtnradiusbr: 1rem;
+    // }
+  }
+}
+
+// @layer #{vars.$colors-layer} {
+//   // SECTION: componentize
+//   [is='alert-dialog'] {
+//     > button {
+//       @include mixins.add-focus-visible-state {
+//         --dialogbtnface: var(--dialogbtnhighlightface,);
+//         --dialogbtntext: var(--dialogbtnhighlighttext,);
+//       }
+//     }
+//   }
+// }
+
+// @layer #{vars.$ui-layer} {
+//   // SECTION: componentize
+//   [is='alert-dialog'] {
+//     > button {
+//       @include mixins.add-active-state {
+//         --dialogbtnface: var(--dialogbtnactiveface,);
+//         --dialogbtntext: var(--dialogbtnactivetext,);
+//       }
+//     }
+//   }
+// }

package/scss/components/_body-view.scss

@@ -0,0 +1,17 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  // body-view {
+  //   :where(&) {
+  //   }
+  // }
+
+  // detail[is='tooltip'] {
+  //   :where(&, & > summary) {
+  //     display: grid;
+  //     grid-template-columns: subgrid; // inherits columns from container
+  //     grid-template-rows: subgrid; // inherits rows if needed
+  //   }
+  // }
+}

package/scss/components/_bordered-button.scss

@@ -0,0 +1,30 @@
+@use '../vars';
+@use '../placeholders';
+
+@layer #{vars.$components-layer} {
+  [is='bordered-button'] {
+    @extend %button;
+
+    :where(&) {
+      @media (pointer: fine) {
+        --accentColor: var(--primary);
+      }
+    }
+
+    :where(&[role='destructive']) {
+      --accentColor: var(--red);
+      --accentColor2: var(--red2);
+      --accentColor3: var(--red3);
+      --accentColor4: var(--red4);
+      --accentColor5: var(--red5);
+    }
+  }
+}
+
+@layer #{vars.$utils-layer} {
+  [is='bordered-button'] {
+    :where(&) {
+      text-align: center;
+    }
+  }
+}

package/scss/components/_bordered-prominent-button.scss

@@ -0,0 +1,27 @@
+@use '../vars';
+@use '../placeholders';
+
+@layer #{vars.$components-layer} {
+  [is='bordered-prominent-button'] {
+    @extend %button;
+
+    :where(&) {
+    }
+
+    :where(&[role='destructive']) {
+      --accentColor: var(--red);
+      --accentColor2: var(--red2);
+      --accentColor3: var(--red3);
+      --accentColor4: var(--red4);
+      --accentColor5: var(--red5);
+    }
+  }
+}
+
+@layer #{vars.$utils-layer} {
+  [is='bordered-prominent-button'] {
+    :where(&) {
+      text-align: center;
+    }
+  }
+}

package/scss/components/_borderless-button.scss

@@ -0,0 +1,27 @@
+@use '../vars';
+@use '../placeholders';
+
+@layer #{vars.$components-layer} {
+  [is='borderless-button'] {
+    @extend %button;
+
+    :where(&) {
+    }
+
+    :where(&[role='destructive']) {
+      --accentColor: var(--red);
+      --accentColor2: var(--red2);
+      --accentColor3: var(--red3);
+      --accentColor4: var(--red4);
+      --accentColor5: var(--red5);
+    }
+  }
+}
+
+@layer #{vars.$utils-layer} {
+  [is='borderless-button'] {
+    :where(&) {
+      text-align: center;
+    }
+  }
+}

package/scss/components/_confirmation-dialog.scss

@@ -0,0 +1,110 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  [is='confirmation-dialog'] {
+    :where(&) {
+      @include mixins.reset-dialog;
+
+      color: var(--text,);
+
+      touch-action: none;
+
+      position: fixed;
+
+      inline-size: fit-content;
+      block-size: fit-content;
+      height: auto; // safari
+      max-inline-size: var(--confirmation--dialog-max-inline-size,);
+      max-block-size: var(--confirmation--dialog-max-block-size,);
+
+      margin-block: var(--confirmation--dialog-margin-block,);
+      margin-inline: var(--confirmation--dialog-margin-inline,);
+
+      transform: var(--confirmation--dialog-scale,);
+
+      position-anchor: --confirmation-dialog; // overriden
+      position-area: center;
+
+      overflow: clip;
+      border-radius: 0.9rem;
+
+      backdrop-filter: var(--liquid-glass-backdrop-filter,);
+      box-shadow: var(--menu-popover-box-shadow,); //0 0 10px 10px black;
+
+      padding-block: 1rem;
+      padding-inline: 1em;
+      gap: 0.5rem;
+
+      // finally
+      --confirmation--dialog-scale: scale(0);
+    }
+
+    &[open] {
+      :where(&) {
+        --confirmation--dialog-max-inline-size: 100vw;
+        --confirmation--dialog-max-block-size: 100vh;
+
+        --confirmation--dialog-margin-block: max(env(safe-area-inset-top), var(--menu-spacing)) max(env(safe-area-inset-bottom), var(--menu-spacing));
+        --confirmation--dialog-margin-inline: max(env(safe-area-inset-left), var(--menu-spacing)) max(env(safe-area-inset-right), var(--menu-spacing));
+
+        --confirmation--dialog-scale: scale(1);
+
+        @starting-style {
+          --confirmation--dialog-scale: scale(0);
+        }
+      }
+    }
+
+    &[closing] {
+      :where(&) {
+        --confirmation--dialog-max-inline-size: anchor-size();
+        --confirmation--dialog-max-block-size: anchor-size();
+
+        --confirmation--dialog-scale: scale(0);
+      }
+    }
+
+    // SECTION: componentize
+    // > button {
+    //   :where(&) {
+    //     @include mixins.componentize(dialogbtn);
+    //   }
+    // }
+
+    // :where(&) {
+    //   --dialogbtnpadistart: 0.6rem;
+    //   --dialogbtnpadiend: 0.6rem;
+    //   --dialogbtnpadbstart: 0.6rem;
+    //   --dialogbtnpadbend: 0.6rem;
+    //   --dialogbtnradiustl: 1rem;
+    //   --dialogbtnradiustr: 1rem;
+    //   --dialogbtnradiusbl: 1rem;
+    //   --dialogbtnradiusbr: 1rem;
+    // }
+  }
+}
+
+// @layer #{vars.$colors-layer} {
+//   // SECTION: componentize
+//   [is='confirmation-dialog'] {
+//     > button {
+//       @include mixins.add-focus-visible-state {
+//         --dialogbtnface: var(--dialogbtnhighlightface,);
+//         --dialogbtntext: var(--dialogbtnhighlighttext,);
+//       }
+//     }
+//   }
+// }
+
+// @layer #{vars.$ui-layer} {
+//   // SECTION: componentize
+//   [is='confirmation-dialog'] {
+//     > button {
+//       @include mixins.add-active-state {
+//         --dialogbtnface: var(--dialogbtnactiveface,);
+//         --dialogbtntext: var(--dialogbtnactivetext,);
+//       }
+//     }
+//   }
+// }

package/scss/components/_content-unavailable-view.scss

@@ -0,0 +1,45 @@
+@use '../vars';
+@use '../placeholders';
+
+@layer #{vars.$components-layer} {
+  content-unavailable-view {
+    :where(&) {
+      place-content: center;
+      place-items: center;
+
+      text-align: center;
+
+      row-gap: 1rem;
+
+      &::part(content-unavailable-actions-stack) {
+        row-gap: 0.2rem;
+      }
+
+      &::part(content-unavailable-title-stack) {
+        --label-flow: vertical;
+
+        --label-font: title3; // NOTE: Safari fix
+      }
+    }
+
+    > :not([slot]) {
+      --label-image-size: 5rem;
+
+      --label-gap: 1rem;
+
+      // --label-font: title3;
+    }
+
+    &:not(:has(> [slot='description'])) {
+      :where(&)::part(content-unavailable-description-stack) {
+        display: none;
+      }
+    }
+
+    &:not(:has(> [slot='actions'])) {
+      :where(&)::part(content-unavailable-actions-stack) {
+        display: none;
+      }
+    }
+  }
+}

package/scss/components/_date-picker.scss

@@ -0,0 +1,30 @@
+@use '../vars';
+
+@layer #{vars.$components-layer} {
+  date-picker {
+    :where(&) {
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-rows: minmax(0, 1fr);
+    }
+
+    :where(&)::part(date-picker-stack) {
+      grid-template-columns: auto minmax(0, 1fr);
+      grid-template-rows: minmax(0, 1fr);
+    }
+
+    :where(&)::part(date-picker-label-stack) {
+      // display: grid;
+    }
+
+    :where(&)::part(date-picker-input-stack) {
+      place-items: stretch;
+      place-content: stretch;
+
+      grid-auto-flow: column;
+    }
+
+    :where(&)::part(date-picker-form-input) {
+      text-align: end;
+    }
+  }
+}

package/scss/components/_detail-placeholder.scss

@@ -0,0 +1,153 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  detail-placeholder {
+    :where(&) {
+      pointer-events: none;
+
+      touch-action: none;
+
+      position: absolute;
+
+      block-size: 100%; //calc(100% - 10px);
+      inline-size: var(--nav-split-view--detail-placeholder-inline-size,);
+
+      inset: var(--nav-split-view--detail-placeholder-inset,);
+
+      visibility: var(--nav-split-view--detail-placeholder-visibility,);
+
+      // box-shadow: inset 0 0 0 5px red;
+
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-rows: minmax(0, 1fr);
+    }
+
+    > scroll-view {
+      :where(&) {
+        overflow: clip auto;
+
+        pointer-events: all;
+
+        @include mixins.contain-overscroll;
+
+        container: scroll-view / size; //inline-size;
+
+        padding-block: var(--safe-area-inset-top) var(--safe-area-inset-bottom);
+        padding-inline: var(--safe-area-inset-left) var(--safe-area-inset-right);
+
+        // outline: magenta solid 4px;
+
+        @include mixins.make-scrollable;
+
+        @include mixins.create-v-scroll-view;
+
+        &::before {
+          block-size: calc(100% + var(--safe-area-inset-bottom) + 1px); //????? FIXME:
+        }
+
+        --face: transparent;
+      }
+    }
+
+    v-stack {
+      // outline: magenta solid 4px;
+    }
+  }
+
+  // SECTION placeholder styles
+  navigation-split-view {
+    @include mixins.ifnot-2col-split-view-fits {
+      detail-placeholder {
+        :where(&) {
+          --nav-split-view--detail-placeholder-visibility: collapse;
+        }
+      }
+    }
+
+    // ANCHOR: Sizing
+    @include mixins.if-2col-split-view-fits {
+      &:has(> [is='sidebar-view']) {
+        detail-placeholder {
+          :where(&) {
+            --nav-split-view--detail-placeholder-inset: 0 0 0 calc(var(--nav-split-view-sidebar-inline-size) + var(--nav-split-view--content-inline-size));
+
+            --nav-split-view--detail-placeholder-inline-size: calc(100lvw - var(--nav-split-view-sidebar-inline-size) - var(--nav-split-view--content-inline-size));
+          }
+        }
+
+        &:not([column-visibility='double-column']) {
+          @include mixins.ifnot-3col-split-view-fits {
+            &[preferred-compact-column='content'] {
+              detail-placeholder {
+                :where(&) {
+                  --nav-split-view--detail-placeholder-inset: 0 0 0 var(--nav-split-view--content-inline-size);
+
+                  --nav-split-view--detail-placeholder-inline-size: calc(100lvw - var(--nav-split-view--content-inline-size));
+                }
+              }
+            }
+          }
+        }
+        &[column-visibility='double-column'] {
+          detail-placeholder {
+            :where(&) {
+              --nav-split-view--detail-placeholder-inset: 0 0 0 calc(var(--nav-split-view-sidebar-inline-size) + var(--sidebar-inline-spacing));
+
+              --nav-split-view--detail-placeholder-inline-size: calc(100lvw - var(--nav-split-view-sidebar-inline-size) - var(--sidebar-inline-spacing));
+            }
+          }
+        }
+      }
+    }
+
+    // ANCHOR: Display
+    @include mixins.if-2col-split-view-fits {
+      // also hide when in 2col mode with detail view
+      &:not(:has(> [is='sidebar-view'])) {
+        &:has(> body-view) {
+          detail-placeholder {
+            :where(&) {
+              --nav-split-view--detail-placeholder-visibility: collapse;
+            }
+          }
+        }
+      }
+      &:has(> [is='sidebar-view']) {
+        &:not([column-visibility='double-column']) {
+          // hide when no content view
+          &[preferred-compact-column='content'] {
+            &:not(:has(> body-view)) {
+              detail-placeholder {
+                :where(&) {
+                  --nav-split-view--detail-placeholder-visibility: collapse;
+                }
+              }
+            }
+          }
+          // also hide when in 3col mode with detail view
+          @include mixins.if-3col-split-view-fits {
+            &:has(> body-view > body-view) {
+              detail-placeholder {
+                :where(&) {
+                  --nav-split-view--detail-placeholder-visibility: collapse;
+                }
+              }
+            }
+          }
+        }
+
+        // also hide when in 2col mode with detail view
+        &[column-visibility='double-column'] {
+          &:has(> body-view) {
+            detail-placeholder {
+              :where(&) {
+                --nav-split-view--detail-placeholder-visibility: collapse;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/scss/components/_disclosure-group.scss

@@ -0,0 +1,128 @@
+@use '../vars';
+@use '../mixins';
+@use 'sass:string';
+
+@layer #{vars.$components-layer} {
+  [is='disclosure-group'] {
+    :where(&) {
+      overflow: clip;
+
+      --disclosure--host-details-content-block-size: 0;
+
+      --disclosure-style: ;
+
+      --disclosure--summary-grid-template-columns: ;
+      --disclosure--summary-grid-auto-flow: ;
+      --disclosure--summary-gap: ;
+
+      --disclosure--marker-display: ;
+      --disclosure--marker-transform: ;
+    }
+
+    :where(& > summary) {
+      gap: var(--disclosure--summary-gap,);
+
+      grid-auto-flow: var(--disclosure--summary-grid-auto-flow,);
+
+      grid-template-columns: var(--disclosure--summary-grid-template-columns,);
+
+      @include mixins.make-marker-pseudos(vars.$disclosure-affordance);
+
+      &::after {
+        display: var(--disclosure--marker-display,);
+
+        block-size: 1rem;
+        inline-size: 1rem;
+
+        background-color: var(--blue);
+
+        transform: var(--disclosure--marker-transform,);
+
+        order: var(--disclosure--marker-order,);
+      }
+    }
+
+    :where(& > summary) {
+      @container not (style(--disclosure-style: marker-trailing) or style(--disclosure-style: marker-leading)) {
+        --disclosure--marker-display: none;
+      }
+      @container style(--disclosure-style: marker-trailing) or style(--disclosure-style: marker-leading) {
+        --disclosure--summary-grid-auto-flow: column;
+
+        --disclosure--summary-gap: 0.1rem;
+      }
+      @container style(--disclosure-style: marker-trailing) {
+        --disclosure--summary-grid-template-columns: minmax(0, 1fr) auto;
+      }
+      @container style(--disclosure-style: marker-leading) {
+        --disclosure--summary-grid-template-columns: auto minmax(0, 1fr);
+
+        --disclosure--marker-order: -1;
+      }
+    }
+
+    :where(&)::details-content {
+      display: grid;
+
+      background: transparent;
+
+      block-size: var(--disclosure--host-details-content-block-size);
+    }
+
+    :where(& > *:not(summary)) {
+      margin: 0;
+    }
+
+    &[open] {
+      :where(&) {
+        --disclosure--host-details-content-block-size: auto;
+
+        --disclosure--marker-transform: rotate(90deg);
+      }
+    }
+
+    @supports not (interpolate-size: allow-keywords) {
+      :where(&) {
+        grid-template-rows: var(--disclosure--host-grid-template-rows);
+
+        align-items: start;
+        align-content: start;
+
+        --disclosure--host-grid-template-rows: auto 0fr;
+
+        --disclosure--host-details-content-block-size: auto;
+      }
+
+      :where(&)::details-content {
+        // block-size: auto;
+
+        content-visibility: visible;
+
+        min-height: 0;
+      }
+
+      &[open] {
+        :where(&) {
+          --disclosure--host-grid-template-rows: auto 1fr;
+        }
+      }
+    }
+
+    @supports (x: #{string.unquote('attr(x type(*))')}) {
+      :where(&) {
+        --disclosure-style: attr(disclosure-style type(<custom-ident>), inherit);
+      }
+    }
+    @supports not (x: #{string.unquote('attr(x type(*))')}) {
+      :where(&[disclosure-style='marker-trailing']) {
+        --disclosure-style: marker-trailing;
+      }
+      :where(&[disclosure-style='marker-leading']) {
+        --disclosure-style: marker-leading;
+      }
+      :where(&[disclosure-style='marker-hidden']) {
+        --disclosure-style: ;
+      }
+    }
+  }
+}