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

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: ((auto minmax(0, 1fr)), (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/_image-view.scss

@@ -0,0 +1,9 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  // body-view {
+  //   :where(&) {
+  //   }
+  // }
+}

package/scss/components/_index.scss

@@ -1,24 +1,252 @@
 @use '../vars';
+@use '../mixins';
 
 @layer #{vars.$components-layer} {
-  // all is a grid
-  navigation-stack:not([hidden]),
-  navigation-split-view:not([hidden]),
+  // SECTION: all is grid
+
+  navigation-stack,
+  navigation-split-view,
+  navigation-large-title,
   scroll-view,
   body-view,
   tab-view,
+  image-view,
+  [is='search-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,
+  progress-view,
   tool-bar-item,
   tool-bar-item-group,
+  fine-tooltip,
   sidebar-toggle,
-  navigation-bar,
-  bottom-bar,
-  tab-bar-stack,
+  [is='form-view'],
   v-stack,
-  tool-bar {
+  h-stack,
+  tool-bar,
+  label-view,
+  menu-view,
+  section-view,
+  text-field,
+  detail-placeholder,
+  sticky-container,
+  picker-view {
+    :where(&:not([hidden])) {
+      display: grid;
+    }
+  }
+
+  :where(progress-view)::part(progress-control),
+  :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,);
+  //     }
+  //   }
+  // }
 }