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

package/scss/components/_form-view.scss

@@ -0,0 +1,195 @@
+@use '../vars';
+@use '../mixins';
+@use '../placeholders';
+@use 'sass:string';
+@use 'sass:map';
+
+$form-ifs: (
+  inset: (
+    --list--host-background-color: var(--insetform-background-color,),
+    --list--host-padding-inline: var(--insetform-padding-inline),
+    --list--host-padding-block: var(--insetform-padding-block),
+    //
+    --list--item-color: var(--insetform-item-color,),
+    --list--item-background-color: var(--insetform-item-background-color,),
+    --list--highlighteditem-color: var(--insetform-highlighteditem-color,),
+    --list--highlighteditem-background-color: var(--insetform-highlighteditem-background-color,),
+    --list--item-border-radius: var(--insetform-item-border-radius),
+    //
+    --list--adjacentdetailsitem-border-radius: 0,
+    //
+    --list--details-background-color: var(--insetform-openitem-background-color,),
+    --list--details-color: var(--insetform-openitem-color,),
+    --list--opendetails-background-color: var(--insetform-openitem-background-color,),
+    --list--opendetails-color: var(--insetform-openitem-color,),
+    --list--opensummary-background-color: var(--insetform-opensummary-background-color,),
+    --list--opensummary-color: var(--insetform-opensummary-color,),
+  ),
+  inset-grouped: (
+    --list--host-background-color: var(--insetgroupedform-background-color,),
+    --list--host-padding-inline: var(--insetgroupedform-padding-inline),
+    --list--host-padding-block: var(--insetgroupedform-padding-block),
+    //
+    --list--item-color: var(--insetgroupedform-item-color,),
+    --list--item-background-color: var(--insetgroupedform-item-background-color,),
+    --list--item-border-radius: var(--insetform-item-border-radius),
+    --list--highlighteditem-color: var(--insetgroupedform-highlighteditem-color,),
+    --list--highlighteditem-background-color: var(--insetgroupedform-highlighteditem-background-color,),
+    //
+    --list--adjacentitem-border-radius: 0,
+    //
+    --list--details-background-color: var(--insetgroupedform-openitem-background-color,),
+    --list--details-color: var(--insetgroupedform-openitem-color,),
+    --list--opendetails-background-color: var(--insetgroupedform-openitem-background-color,),
+    --list--opendetails-color: var(--insetgroupedform-openitem-color,),
+    --list--opensummary-background-color: var(--insetgroupedform-opensummary-background-color,),
+    --list--opensummary-color: var(--insetgroupedform-opensummary-color,),
+  ),
+  sidebar: (
+    --list--item-border-radius: var(--insetform-item-border-radius),
+    --list--details-gap: var(--form-gap),
+    --list--rootsummary-padding-inline-start: 5px,
+    --list--rootsummary-padding-inline-end: 5px,
+    --list--rootsummary-padding-block-start: 2px,
+    --list--rootsummary-padding-block-end: 2px,
+
+    --list--item-padding-inline-start: 5px,
+    --list--item-padding-inline-end: 5px,
+    --list--item-padding-block-start: 5px,
+    --list--item-padding-block-end: 5px,
+
+    --list--adjacentitem-border-radius: unset,
+    //
+    --list--host-background-color: var(--sidebarform-background-color,),
+    --list--host-padding-inline: var(--sidebarform-padding-inline),
+    --list--host-padding-block: var(--sidebarform-padding-block),
+    //
+    --list--item-background-color: var(--sidebarform-item-background-color,),
+    --list--item-color: var(--sidebarform-item-color,),
+    --list--highlighteditem-background-color: var(--sidebarform-highlighteditem-background-color,),
+    --list--highlighteditem-color: var(--sidebarform-highlighteditem-color,),
+    //
+    --list--rootsummary-background-color: transparent,
+    --list--rootsummary-color: var(--primary,),
+    // --list--rootsummary-border-radius: 0px,
+    --list--selectedrootsummary-background-color: transparent,
+    --list--selectedrootsummary-color: var(--primary,),
+    //
+    --list--separator-background-color: transparent,
+    --list--activeseparator-background-color: transparent,
+    //
+    --list--details-background-color: var(--sidebarform-openitem-background-color,),
+    --list--details-color: var(--sidebarform-openitem-color,),
+    --list--opensummary-background-color: var(--sidebarform-opensummary-background-color,),
+    --list--opensummary-color: var(--sidebarform-opensummary-color,),
+    //
+    // --list--item-grid-template-columns: minmax(0, 1fr),
+    --list--accessories-display: none,
+    //
+    --list--rootsummary-marker-display: marker-trailing,
+  ),
+);
+$form-elses: (
+  --list--host-background-color: var(--form-background-color,),
+  --list--item-padding-inline-start: var(--form-item-padding-inline-start),
+  --list--item-padding-inline-end: var(--form-item-padding-inline-end),
+  --list--item-padding-block-start: var(--form-item-padding-block-start),
+  --list--item-padding-block-end: var(--form-item-padding-block-end),
+  --list--item-background-color: var(--form-item-background-color,),
+  --list--highlighteditem-background-color: var(--form-highlighteditem-background-color,),
+  --list--item-color: var(--form-item-color,),
+  --list--highlighteditem-color: var(--form-highlighteditem-color,),
+  //
+  // --list--item-grid-template-columns: minmax(0, 1fr) 1rem,
+  --list--accessories-size: 1.1rem,
+  --list--accessories-display: grid,
+);
+
+@layer #{vars.$components-layer} {
+  [is='form-view'] {
+    &:not(& &, list-view &, table-view &, [is='tab-bar'] > &) {
+      @extend %list;
+
+      // wire
+      :where(&) {
+        --list--section-gap: var(--form-gap);
+
+        @include mixins.write-props($form-elses);
+
+        // --list--item-padding-inline-start: var(--form-item-padding-inline-start);
+        // --list--item-padding-inline-end: var(--form-item-padding-inline-end);
+        // --list--item-padding-block-start: var(--form-item-padding-block-start);
+        // --list--item-padding-block-end: var(--form-item-padding-block-end);
+
+        // --list--item-background-color: var(--list-item-background-color,);
+      }
+
+      :where(section-view:has(> [slot='header']), section-view:has(> [slot='footer']) + section-view) {
+        --list--section-gap: var(--form-extra-gap);
+      }
+
+      // SECTION: ifs
+      @supports (x: #{string.unquote('if(else:red)')}) {
+        :where(&) {
+          @include mixins.write-ifs(--form-style, $form-ifs, $form-elses);
+          // --list--root-padding-inline: if(style(--form-style: inset-grouped): 0.5rem ; style(--form-style: sidebar): 0.5rem ;);
+
+          // --toolbaritemradius: if(style(--form-style: inset-grouped): 1rem ; style(--form-style: sidebar): 1rem ;);
+
+          // --list--separator-block-size: if(style(--form-style: sidebar): 0px ;);
+          // --list--separator-visibility: if(style(--form-style: collapse): 0px ;);
+
+          // --list--root-background-color: if(style(--form-style: sidebar): transparent ;);
+        }
+      }
+
+      // SECTION: ifs polyfill
+      @supports not (x: #{string.unquote('if(else:red)')}) {
+        :where(&:not([form-style])) {
+          @each $v in vars.$form-styles {
+            @container style(--form-style: #{$v}) {
+              @include mixins.write-props(map.get($form-ifs, $v)); //@include set-form-style($v);
+            }
+          }
+        }
+        @each $v in vars.$form-styles {
+          :where(&[form-style='#{$v}']) {
+            @include mixins.write-props(map.get($form-ifs, $v)); //@include set-form-style($v);
+          }
+        }
+        @include mixins.if-2col-split-view-fits {
+          :where(navigation-split-view [is='sidebar-view'] &[form-style]) {
+            @include mixins.write-props(map.get($form-ifs, sidebar));
+          }
+          :where(navigation-split-view > scroll-view &[preferred-expanded-style], navigation-split-view > body-view > scroll-view &[preferred-expanded-style]) {
+            @include mixins.write-props(map.get($form-ifs, inset));
+          }
+        }
+      }
+
+      // SECTION: attrs finally
+      @supports (x: #{string.unquote('attr(x type(*))')}) {
+        :where(&) {
+          --form-style: attr(form-style type(<custom-ident>), inherit);
+        }
+        @include mixins.if-2col-split-view-fits {
+          :where(navigation-split-view:has(> [is='sidebar-view']) > [is='sidebar-view'] &[list-style]) {
+            --form-style: sidebar;
+          }
+          :where(navigation-split-view > scroll-view &[preferred-expanded-style], navigation-split-view > body-view > scroll-view &[preferred-expanded-style]) {
+            --form-style: inset;
+          }
+        }
+      }
+
+      // FINALLY AFTER ALL IFS
+      // TODO: Also apply this on state of sidebar w/ full-screen detail 2/2
+      @include mixins.if-2col-split-view-fits {
+        :where(navigation-split-view > scroll-view &, navigation-split-view > body-view > scroll-view &) {
+          // --list--item-grid-template-columns: minmax(0, 1fr);
+          --list--accessories-display: none;
+        }
+      }
+    }
+  }
+}

package/scss/components/_full-screen.scss

@@ -0,0 +1,15 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  [is='full-screen'] {
+    :where(&) {
+      @include mixins.reset-dialog;
+
+      // dowh
+      overflow: clip;
+      inline-size: 100lvw;
+      block-size: var(--100lvh, 100lvh);
+    }
+  }
+}

package/scss/components/_glass-button.scss

@@ -0,0 +1,32 @@
+@use '../vars';
+@use '../placeholders';
+
+@layer #{vars.$components-layer} {
+  [is='glass-button'] {
+    @extend %button;
+
+    :where(&) {
+      backdrop-filter: var(--liquid-glass-backdrop-filter);
+
+      box-shadow: var(--toolbar-cell-box-shadow);
+
+      transform: var(--btn--scale,);
+    }
+
+    :where(&[role='destructive']) {
+      --accentColor: var(--red);
+      --accentColor2: var(--red2);
+      --accentColor3: var(--red3);
+      --accentColor4: var(--red4);
+      --accentColor5: var(--red5);
+    }
+  }
+}
+
+@layer #{vars.$utils-layer} {
+  [is='glass-button'] {
+    :where(&) {
+      text-align: center;
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+@use '../vars';
+@use '../placeholders';
+
+@layer #{vars.$components-layer} {
+  [is='glass-prominent-button'] {
+    @extend %button;
+
+    :where(&) {
+      backdrop-filter: var(--liquid-glass-backdrop-filter);
+
+      box-shadow: var(--toolbar-cell-box-shadow);
+
+      transform: var(--btn--scale,);
+    }
+
+    :where(&[role='destructive']) {
+      --accentColor: var(--red);
+      --accentColor2: var(--red2);
+      --accentColor3: var(--red3);
+      --accentColor4: var(--red4);
+      --accentColor5: var(--red5);
+    }
+  }
+}
+
+@layer #{vars.$utils-layer} {
+  [is='glass-prominent-button'] {
+    :where(&) {
+      text-align: center;
+    }
+  }
+}

package/scss/components/_h-divider.scss

@@ -0,0 +1,13 @@
+@use '../vars';
+
+@layer #{vars.$components-layer} {
+  h-divider {
+    :where(&) {
+      inline-size: 100%;
+
+      block-size: 1px;
+
+      background-color: var(--separator);
+    }
+  }
+}

package/scss/components/_h-flex-stack.scss

@@ -0,0 +1,23 @@
+@use '../vars';
+
+@layer #{vars.$components-layer} {
+  h-flex-stack {
+    :where(&) {
+      display: flex;
+      flex-flow: row nowrap;
+
+      place-items: safe center;
+      place-content: safe center;
+    }
+
+    :where(& > *) {
+      max-block-size: 100%;
+    }
+
+    > [frame-height='infinity'] {
+      :where(&) {
+        flex-grow: 1;
+      }
+    }
+  }
+}

package/scss/components/_h-stack.scss

@@ -0,0 +1,29 @@
+@use '../vars';
+@use '../mixins';
+@use 'sass:string';
+@use 'sass:list';
+
+$h-stack-templates: ((minmax(0, 1fr) auto), (auto minmax(0, 1fr) auto auto), (auto minmax(0, 1fr) auto), (repeat(4, minmax(0, 1fr))), (repeat(2, minmax(0, 1fr)) auto));
+
+@layer #{vars.$components-layer} {
+  h-stack {
+    :where(&) {
+      grid-auto-flow: column;
+      grid-template-rows: minmax(0, 1fr);
+
+      place-items: safe center;
+      place-content: safe center;
+
+      gap: 1rem;
+    }
+
+    // > * {
+    //   :where(&) {
+    //     max-height: 100%;
+    //     // align-self: start;
+    //   }
+    // }
+
+    @include mixins.make-template($h-stack-templates, grid-template-columns);
+  }
+}

package/scss/components/_index.scss

@@ -0,0 +1,246 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  // SECTION: all is grid
+
+  navigation-stack,
+  navigation-split-view,
+  navigation-large-title,
+  scroll-view,
+  body-view,
+  tab-view,
+  [is='sidebar-view'],
+  [is='tab-bar'],
+  [is='full-screen'],
+  [is='confirmation-dialog'],
+  [is='alert-dialog'],
+  [is='sheet-view'],
+  [is='form-view'],
+  [is='disclosure-group'],
+  [is='table-row'],
+  [is='table-column'],
+  [is='borderless-button'],
+  [is='bordered-button'],
+  [is='bordered-prominent-button'],
+  [is='plain-button'],
+  [is='glass-button'],
+  [is='glass-prominent-button'],
+  list-view,
+  table-view,
+  content-unavailable-view,
+  tool-bar-item,
+  tool-bar-item-group,
+  sidebar-toggle,
+  [is='form-view'],
+  v-stack,
+  h-stack,
+  tool-bar,
+  label-view,
+  menu-view,
+  section-view,
+  text-field,
+  detail-placeholder,
+  picker-view {
+    :where(&:not([hidden])) {
+      display: grid;
+    }
+  }
+
+  :where(content-unavailable-view)::part(content-unavailable-title-stack),
+  :where(content-unavailable-view)::part(content-unavailable-description-stack),
+  :where(content-unavailable-view)::part(content-unavailable-actions-stack),
+  :where(table-view)::part(table-container),
+  :where(table-view)::part(table-column-stack),
+  :where(table-view)::part(table-header-stack),
+  :where(table-view)::part(table-header-leading-stack),
+  :where(table-view)::part(table-header-principal-stack),
+  :where(table-view)::part(table-header-trailing-stack),
+  :where(table-view)::part(table-footer-stack),
+  :where(table-view)::part(table-footer-leading-stack),
+  :where(table-view)::part(table-footer-principal-stack),
+  :where(table-view)::part(table-footer-trailing-stack),
+  :where(text-field)::part(text-field-stack),
+  :where(text-field)::part(text-field-label-stack),
+  :where(text-field)::part(text-field-input-stack),
+  :where(text-field)::part(text-field-form-input),
+  :where(date-picker)::part(date-picker-stack),
+  :where(date-picker)::part(date-picker-label-stack),
+  :where(date-picker)::part(date-picker-input-stack),
+  :where(date-picker)::part(date-picker-form-input),
+  :where(date-picker)::part(date-picker-separator),
+  :where(menu-view)::part(menu-dialog),
+  :where(menu-view)::part(menu-summary),
+  :where(menu-view)::part(menu-form),
+  :where(menu-view)::part(menu-scrollable),
+  :where(picker-view)::part(picker-stack),
+  :where(picker-view)::part(picker-label-stack),
+  :where(picker-view)::part(picker-input-stack),
+  :where(tool-bar)::part(top-bar),
+  :where(tool-bar)::part(bottom-bar),
+  :where(label-view)::part(label-image-stack),
+  :where(label-view)::part(label-title-stack),
+  :where(scroll-view)::part(scroll-view-navbar),
+  :where(scroll-view)::part(scroll-view-toolbar),
+  :where(scroll-view)::part(scroll-view-navbar-stack),
+  :where(scroll-view)::part(scroll-view-toolbar-stack),
+  :where(section-view)::part(section-header-stack),
+  :where(section-view)::part(section-main-stack),
+  :where(section-view)::part(section-footer-stack) {
+    display: grid;
+  }
+
+  // SECTION: takeovers
+
+  sidebar-toggle > button,
+  tool-bar-item > button,
+  tool-bar-item > input,
+  list-view > button,
+  [is='form-view'] > button,
+  section-view > button,
+  menu-view > button,
+  [is='disclosure-group'] > button,
+  [is='disclosure-group'] > summary {
+    :where(&:not([hidden])) {
+      display: grid;
+    }
+  }
+
+  // SECTION: componentize
+
+  :where(
+    sidebar-toggle > button,
+    tool-bar-item > button,
+    tool-bar-item > input,
+    [is='tab-bar'] [is='tab-item'],
+    tool-bar-item [is='disclosure-group'] > button,
+    tool-bar-item [is='disclosure-group'] > summary
+  ),
+  :where(menu-view)::part(menu-summary) {
+    // display: grid;
+    // place-items: center;
+    // place-content: center;
+    // container-type: inline-size;
+    // > * {
+    //   font-size: 100cqw;
+    // }
+
+    // all: unset;
+    //.....
+
+    // text-align: unset;
+
+    // appearance: none;
+    // -webkit-appearance: none;
+
+    //.....
+    // place-items: center;
+    // place-content: center;
+
+    // box-shadow: none;
+    // outline: 0;
+    @include mixins.componentize(toolbaritem);
+    // appearance: none;
+    // -webkit-appearance: none;
+    // border: var(--toolbaritemborder,);
+    // background: var(--toolbaritemface,);
+    // color: var(--toolbaritemtext,);
+    // padding-inline: var(--toolbaritempadistart,) var(--toolbaritempadiend,);
+    // padding-block: var(--toolbaritempadbstart,) var(--toolbaritempadbend,);
+    // border-radius: var(--toolbaritemradius,);
+    // min-inline-size: 25px; // NOTE: For inputs overflowing-x
+  }
+
+  // itemize
+  // list-view,
+  // [is='form-view'] {
+  //   > :not([slot], section-view, [is='disclosure-group'], picker-view, whatever-name),
+  //   section-view > :not([slot], section-view, [is='disclosure-group'], picker-view, whatever-name),
+  //   [is='disclosure-group'] > :not([slot], section-view, [is='disclosure-group'], picker-view, whatever-name) {
+  //     :where(&) {
+  //       border: var(--itemborder,);
+  //       background: var(--itemface,);
+  //       color: var(--itemtext,);
+  //       padding-inline: var(--itempadistart,) var(--itempadiend,);
+  //       padding-block: var(--itempadbstart,) var(--itempadbend,);
+  //       border-radius: var(--itemradius,);
+  //     }
+  //   }
+  // }
+}
+
+// SECTION: componentize
+@layer #{vars.$colors-layer} {
+  sidebar-toggle > button,
+  tool-bar-item > button,
+  tool-bar-item > input,
+  [is='tab-bar'] [is='tab-item'],
+  menu-view > button,
+  tool-bar-item [is='disclosure-group'] > button,
+  tool-bar-item [is='disclosure-group'] > summary {
+    @include mixins.add-focus-visible-state {
+      --toolbaritemface: var(--toolbaritemhighlightface,);
+      --toolbaritemtext: var(--toolbaritemhighlighttext,);
+    }
+    @include mixins.add-hover-state {
+      --toolbaritemface: var(--toolbaritemhighlightface,);
+      --toolbaritemtext: var(--toolbaritemhighlighttext,);
+    }
+  }
+  menu-view {
+    @include mixins.add-focus-visible-state('::part(menu-summary)') {
+      --toolbaritemface: var(--toolbaritemhighlightface,);
+      --toolbaritemtext: var(--toolbaritemhighlighttext,);
+    }
+    @include mixins.add-hover-state('::part(menu-summary)') {
+      --toolbaritemface: var(--toolbaritemhighlightface,);
+      --toolbaritemtext: var(--toolbaritemhighlighttext,);
+    }
+  }
+  // itemize
+  // list-view,
+  // [is='form-view'] {
+  //   > :not([slot], section-view, [is='disclosure-group'], picker-view, whatever-name),
+  //   section-view > :not([slot], section-view, [is='disclosure-group'], picker-view, whatever-name),
+  //   [is='disclosure-group'] > :not([slot], section-view, [is='disclosure-group'], picker-view, whatever-name) {
+  //     @include mixins.add-focus-visible-state {
+  //       --itemface: var(--itemhighlightface,);
+  //       --itemtext: var(--itemhighlighttext,);
+  //     }
+  //   }
+  // }
+}
+
+// SECTION: componentize
+@layer #{vars.$ui-layer} {
+  sidebar-toggle > button,
+  tool-bar-item > button,
+  tool-bar-item > input,
+  [is='tab-bar'] [is='tab-item'],
+  menu-view > button,
+  tool-bar-item [is='disclosure-group'] > button,
+  tool-bar-item [is='disclosure-group'] > summary {
+    @include mixins.add-active-state {
+      --toolbaritemface: var(--toolbaritemactiveface,);
+      --toolbaritemtext: var(--toolbaritemactivetext,);
+    }
+  }
+  menu-view {
+    @include mixins.add-active-state('::part(menu-summary)') {
+      --toolbaritemface: var(--toolbaritemactiveface,);
+      --toolbaritemtext: var(--toolbaritemactivetext,);
+    }
+  }
+  // itemize
+  // list-view,
+  // [is='form-view'] {
+  //   > :not([slot], section-view, [is='disclosure-group'], picker-view, whatever-name),
+  //   section-view > :not([slot], section-view, [is='disclosure-group'], picker-view, whatever-name),
+  //   [is='disclosure-group'] > :not([slot], section-view, [is='disclosure-group'], picker-view, whatever-name) {
+  //     @include mixins.add-active-state {
+  //       --itemface: var(--itemactiveface,);
+  //       --itemtext: var(--itemactivetext,);
+  //     }
+  //   }
+  // }
+}