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

package/scss/components/_label-view.scss

@@ -0,0 +1,393 @@
+@use '../vars';
+@use '../mixins';
+@use 'sass:string';
+@use 'sass:map';
+
+// scalpel precision
+@property --label-gap {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --label-image-size {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0;
+}
+
+// @property --label-style {
+//   syntax: 'title-and-icon | icon-only | title-only | automatic';
+//   inherits: true;
+//   initial-value: automatic;
+// }
+
+// @property --label--style {
+//   syntax: '<number>';
+//   inherits: false;
+//   initial-value: 0;
+// }
+
+// @property --label-truncation-mode {
+//   syntax: 'tail';
+//   inherits: true;
+// }
+
+// @property --label--has-icon {
+//   syntax: 'yes | no';
+//   inherits: true;
+//   initial-value: no;
+// }
+
+$label-truncation-ifs: (
+  tail: (
+    --label--overflow: hidden,
+
+    --label--text-overflow: ellipsis,
+  ),
+);
+
+$label-line-ifs: (
+  1: (
+    --label--host-white-space: nowrap,
+  ),
+  2: (
+    --label--host-white-space: normal,
+    --label--display: -webkit-box,
+    --label--box-orient: vertical,
+    --label--line-clamp: 2,
+  ),
+);
+
+@mixin set-label-style($label-style) {
+  @if $label-style == h-title-and-icon {
+    --label-style: title-and-icon;
+
+    --label--host-grid-template-columns: auto minmax(0, 1fr);
+    --label--host-grid-template-rows: minmax(0, 1fr);
+    --label--host-align-items: center;
+    --label--host-justify-items: normal;
+
+    --label-gap: 0.3rem;
+    --label--host-gap: var(--label-gap);
+
+    --label--iconstack-display: grid;
+    --label--titlestack-display: grid;
+  } @else if $label-style == h-icon-only {
+    --label-style: icon-only;
+
+    --label--iconstack-display: grid;
+  } @else if $label-style == h-title-only {
+    --label-style: title-only;
+
+    --label--titlestack-display: grid;
+  } @else if $label-style == v-title-and-icon {
+    --label-style: title-and-icon;
+
+    --label--host-grid-template-columns: minmax(0, 1fr);
+    --label--host-grid-template-rows: auto minmax(0, 1fr);
+    --label--host-align-items: normal;
+    --label--host-justify-items: center;
+
+    --label-gap: 0.3rem;
+    --label--host-gap: var(--label-gap);
+
+    --label--iconstack-display: grid;
+    --label--titlestack-display: grid;
+  } @else if $label-style == v-icon-only {
+    --label-style: icon-only;
+
+    --label--iconstack-display: grid;
+  } @else if $label-style == v-title-only {
+    --label-style: title-only;
+
+    --label--titlestack-display: grid;
+  }
+}
+
+// @mixin set-label-truncation-mode($value) {
+//   @if $value == 'tail' {
+//     --label--overflow: hidden;
+
+//     --label--text-overflow: ellipsis;
+//   }
+// }
+
+// @mixin set-label-line-limit($value) {
+//   @if $value == 1 {
+//     --label--host-white-space: nowrap;
+//   } @else {
+//     --label--host-white-space: normal;
+//     --label--display: -webkit-box;
+//     --label--box-orient: vertical;
+//     --label--line-clamp: #{$value};
+//   }
+// }
+
+@mixin set-label-font($value) {
+  --label--titlestack-font-size: var(--label-#{$value}-font-size);
+  --label--titlestack-line-height: var(--label-#{$value}-line-height);
+  --label--titlestack-font-weight: var(--label-#{$value}-font-weight);
+}
+
+@function if-chain($labels, $prop: null) {
+  $if-chain: null;
+
+  @each $label, $size in $labels {
+    @if $if-chain == null {
+      $if-chain: 'style(--label-font: #{$label}): var(--label-#{$label}-#{$prop}) ;';
+    } @else {
+      $if-chain: '#{$if-chain} style(--label-font: #{$label}): var(--label-#{$label}-#{$prop}) ;';
+    }
+  }
+
+  @return $if-chain;
+}
+
+@mixin if-chain($key, $prop, $label) {
+  @container style(#{$key}: #{$label}) {
+    :where(&) {
+      @content;
+    }
+  }
+  @container not style(#{$key}: #{$label}) {
+    :where(&[#{$prop}='#{$label}']) {
+      @content;
+    }
+  }
+}
+
+@layer #{vars.$components-layer} {
+  label-view {
+    :where(&) {
+      // transition: --label--style 1ms step-start;
+
+      align-items: var(--label--host-align-items,);
+      justify-items: var(--label--host-justify-items,);
+      // place-items: center;
+      // place-content: center;
+
+      // grid-auto-flow: column;
+      // grid-auto-columns: minmax(0, 1fr);
+      grid-template-columns: var(--label--host-grid-template-columns,);
+      grid-template-rows: var(--label--host-grid-template-rows,);
+      // grid-template-areas: 'label-image-stack label-title-stack';
+
+      gap: var(--label--host-gap,); //;
+
+      --label-image-size: 2rem;
+      --label-imagestack-fontsize: var(--label-image-size);
+      // gap: 0;
+
+      white-space: var(--label--host-white-space,);
+
+      &::part(label-image-stack),
+      &::part(label-title-stack) {
+        // display: none;
+
+        grid-auto-columns: minmax(0, 1fr);
+        grid-auto-rows: minmax(0, 1fr);
+        // grid-template-columns: subgrid;
+        // grid-template-rows: subgrid;
+      }
+
+      &::part(label-image-stack) {
+        display: var(--label--iconstack-display, none);
+      }
+
+      &::part(label-title-stack) {
+        display: var(--label--titlestack-display, none);
+      }
+
+      &::part(label-image-stack) {
+        aspect-ratio: 1 / 1;
+
+        inline-size: var(--label-imagestack-fontsize);
+        font-size: var(--label-imagestack-fontsize);
+
+        // line-height: 1;
+
+        // grid-area: label-image-stack;
+      }
+
+      &::part(label-title-stack) {
+        text-decoration: underline;
+
+        font-size: var(--label--titlestack-font-size,);
+        line-height: var(--label--titlestack-line-height,);
+        font-weight: var(--label--titlestack-font-weight,);
+
+        // grid-area: label-title-stack;
+      }
+    }
+
+    :where(&:has(> [slot='image'])) {
+      --label--has-icon: yes;
+      // background-color: green;
+    }
+    :where(&:has(> :not([slot]))) {
+      --label--has-title: yes;
+      // background-color: red;
+    }
+
+    :where(& > :not([slot])) {
+      // grid-area: label-title-stack;
+      overflow: var(--label--overflow,);
+
+      text-overflow: var(--label--text-overflow,);
+
+      display: var(--label--display,);
+
+      -webkit-box-orient: var(--label--box-orient,);
+
+      line-clamp: var(--label--line-clamp,);
+      -webkit-line-clamp: var(--label--line-clamp,);
+    }
+
+    // vars
+    @supports (x: #{string.unquote('if(else:red)')}) {
+      :where(&) {
+        --label--titlestack-font-size: if(#{if-chain(vars.$label-fonts, font-size)});
+        --label--titlestack-line-height: if(#{if-chain(vars.$label-fonts, line-height)});
+        --label--titlestack-font-weight: if(#{if-chain(vars.$label-fonts, font-weight)});
+        // if(
+        //   style(--label-font: callout): 0.5rem ; style(--label-font: large-title): 3rem ; style(--label-font: large-title): 3rem ;
+        // );
+        // ANCHOR: truncation-mode
+        @include mixins.write-ifs(--label-truncation-mode, $label-truncation-ifs);
+        // --label--overflow: if(style(--label-truncation-mode: tail): hidden ;);
+        // --label--text-overflow: if(style(--label-truncation-mode: tail): ellipsis ;);
+
+        // ANCHOR: line-limit
+        @include mixins.write-ifs(--label-line-limit, $label-line-ifs);
+        // --label--host-white-space: if(style(--label-line-limit: 1): nowrap ; style(--label-line-limit: 2): normal ;);
+        // --label--display: if(style(--label-line-limit: 2): -webkit-box ;);
+        // --label--box-orient: if(style(--label-line-limit: 2): vertical ;);
+        // --label--line-clamp: if(style(--label-line-limit: 2): 2 ;);
+
+        // ANCHOR: label-flow
+        --label--host-align-items: if(style(--label-flow: vertical): normal ; else: center ;);
+        --label--host-justify-items: if(style(--label-flow: vertical): center ; else: normal ;);
+
+        // ANCHOR: label-style
+        --label--host-grid-template-columns: if(
+          style(--label-style: icon-only): minmax(0, 1fr) ; style(--label-style: title-only): minmax(0, 1fr) ;
+            style(--label-style: title-and-icon): if(style(--label-flow: vertical): minmax(0, 1fr) ; else: auto minmax(0, 1fr) ;) ;
+            else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): if(style(--label-flow: vertical): minmax(0, 1fr) ; else: auto minmax(0, 1fr) ;) ; else: minmax(0, 1fr) ;) ;
+        );
+        --label--host-grid-template-rows: if(
+          style(--label-style: icon-only): minmax(0, 1fr) ; style(--label-style: title-only): minmax(0, 1fr) ;
+            style(--label-style: title-and-icon): if(style(--label-flow: vertical): auto minmax(0, 1fr) ; else: minmax(0, 1fr) ;) ;
+            else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): if(style(--label-flow: vertical): auto minmax(0, 1fr) ; else: minmax(0, 1fr) ;) ; else: minmax(0, 1fr) ;) ;
+        );
+
+        --label-gap: if(style(--label-style: title-and-icon): 0.3rem ; else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): 0.3rem ;) ;);
+        --label--host-gap: if(style(--label-style: title-and-icon): var(--label-gap) ; else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): var(--label-gap) ;) ;);
+
+        --label--iconstack-display: if(
+          style(--label-style: icon-only): grid ; style(--label-style: title-only): none ; style(--label-style: title-and-icon): grid ; else: if(style(--label--has-icon: yes): grid ; else: none;) ;
+        );
+
+        --label--titlestack-display: if(
+          style(--label-style: icon-only): none ; style(--label-style: title-only): grid ; style(--label-style: title-and-icon): grid ; else: if(style(--label--has-title: yes): grid ; else: none;) ;
+        );
+      }
+    }
+
+    @supports not (x: #{string.unquote('if(else:red)')}) {
+      :where(&:not([label-style])) {
+        @each $v in vars.$label-styles {
+          @container style(--label-style: #{$v}) {
+            @include set-label-style(h-#{$v});
+          }
+        }
+      }
+      @each $v in vars.$label-styles {
+        :where(&[label-style='#{$v}']) {
+          @include set-label-style(h-#{$v});
+        }
+      }
+      @container not style(--label-style) {
+        &:not([label-style]) {
+          // :where(&[image-hint='yes'][title-hint='yes']) {
+          :where(&:has(> [slot='image']):has(> :not([slot]))) {
+            @include set-label-style(h-title-and-icon);
+          }
+          // :where(&[image-hint='yes']:not([title-hint='yes'])) {
+          :where(&:has(> [slot='image']):not(:has(> :not([slot])))) {
+            @include set-label-style(h-icon-only);
+          }
+          // :where(&[title-hint='yes']:not([image-hint='yes'])) {
+          :where(&:has(> :not([slot])):not(:has(> [slot='image']))) {
+            @include set-label-style(h-title-only);
+          }
+        }
+      }
+      // AGAIN
+      :where(&:not([label-style])) {
+        @each $v in vars.$label-styles {
+          @container style(--label-style: #{$v}) and style(--label-flow: vertical) {
+            @include set-label-style(v-#{$v});
+          }
+        }
+      }
+      @container style(--label-flow: vertical) {
+        @each $v in vars.$label-styles {
+          :where(&[label-style='#{$v}']) {
+            @include set-label-style(v-#{$v});
+          }
+        }
+      }
+      @container (not style(--label-style)) and style(--label-flow: vertical) {
+        &:not([label-style]) {
+          :where(&:has(> [slot='image']):has(> :not([slot]))) {
+            @include set-label-style(v-title-and-icon);
+          }
+          :where(&:has(> [slot='image']):not(:has(> :not([slot])))) {
+            @include set-label-style(v-icon-only);
+          }
+          :where(&:has(> :not([slot])):not(:has(> [slot='image']))) {
+            @include set-label-style(v-title-only);
+          }
+        }
+      }
+      //
+      @for $i from 1 through 2 {
+        @include if-chain(--label-line-limit, line-limit, $i) {
+          @include mixins.write-props(map.get($label-line-ifs, $i)); //@include set-label-line-limit($i);
+        }
+      }
+      //
+      @include if-chain(--label-truncation-mode, truncation-mode, tail) {
+        @include mixins.write-props(map.get($label-truncation-ifs, tail)); //@include set-label-truncation-mode(tail);
+      }
+      //
+      @each $label, $size in vars.$label-fonts {
+        @include if-chain(--label-font, font, $label) {
+          @include set-label-font($label);
+        }
+      }
+    }
+
+    // ifs finally
+    @supports (x: #{string.unquote('attr(x type(*))')}) {
+      :where(&) {
+        --label-style: attr(label-style type(<custom-ident>), inherit);
+        --label-truncation-mode: attr(truncation-mode type(<custom-ident>), inherit);
+        --label-line-limit: attr(line-limit type(<number>), inherit);
+        --label-font: attr(font type(<custom-ident>), inherit);
+      }
+    }
+
+    @supports not (x: #{string.unquote('attr(x type(*))')}) {
+      @for $i from 1 through 2 {
+        :where(&[line-limit='#{$i}']) {
+          --label-line-limit: #{$i};
+        }
+      }
+      :where(&[truncation-mode='tail']) {
+        --label-truncation-mode: tail;
+      }
+    }
+  }
+}

package/scss/components/_labeled-content.scss

@@ -0,0 +1,9 @@
+@use '../vars';
+
+@layer #{vars.$components-layer} {
+  labeled-content {
+    :where(&) {
+      display: grid;
+    }
+  }
+}

package/scss/components/_list-view.scss

@@ -0,0 +1,229 @@
+@use '../vars';
+@use '../mixins';
+@use '../placeholders';
+@use 'sass:string';
+@use 'sass:map';
+
+$list-ifs: (
+  inset: (
+    --list--item-color: var(--insetlist-item-color,),
+    --list--item-background-color: var(--insetlist-item-background-color,),
+    --list--highlighteditem-color: var(--insetlist-highlighteditem-color,),
+    --list--highlighteditem-background-color: var(--insetlist-highlighteditem-background-color,),
+    --list--item-border-radius: var(--insetlist-item-border-radius),
+    --list--host-background-color: var(--insetlist-background-color,),
+    --list--host-padding-inline: var(--insetlist-padding-inline),
+    --list--host-padding-block: var(--insetlist-padding-block),
+    //
+    --list--adjacentdetailsitem-border-radius: 0,
+    //
+    --list--details-background-color: var(--insetlist-openitem-background-color,),
+    --list--details-color: var(--insetlist-openitem-color,),
+    --list--opendetails-background-color: var(--insetlist-openitem-background-color,),
+    --list--opendetails-color: var(--insetlist-openitem-color,),
+    --list--opensummary-background-color: var(--insetlist-opensummary-background-color,),
+    --list--opensummary-color: var(--insetlist-opensummary-color,),
+  ),
+  inset-grouped: (
+    --list--item-color: var(--insetgroupedlist-item-color,),
+    --list--item-background-color: var(--insetgroupedlist-item-background-color,),
+    --list--item-border-radius: var(--insetlist-item-border-radius),
+    --list--highlighteditem-color: var(--insetgroupedlist-highlighteditem-color,),
+    --list--highlighteditem-background-color: var(--insetgroupedlist-highlighteditem-background-color,),
+    --list--host-background-color: var(--insetgroupedlist-background-color,),
+    --list--host-padding-inline: var(--insetgroupedlist-padding-inline),
+    --list--host-padding-block: var(--insetgroupedlist-padding-block),
+    //
+    --list--adjacentitem-border-radius: 0,
+    //
+    --list--details-background-color: var(--insetgroupedlist-openitem-background-color,),
+    --list--details-color: var(--insetgroupedlist-openitem-color,),
+    --list--opendetails-background-color: var(--insetgroupedlist-openitem-background-color,),
+    --list--opendetails-color: var(--insetgroupedlist-openitem-color,),
+    --list--opensummary-background-color: var(--insetgroupedlist-opensummary-background-color,),
+    --list--opensummary-color: var(--insetgroupedlist-opensummary-color,),
+  ),
+  sidebar: (
+    --list--item-border-radius: var(--insetlist-item-border-radius),
+    --list--details-gap: var(--list-row-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(--sidebarlist-background-color,),
+    --list--host-padding-inline: var(--sidebarlist-padding-inline),
+    --list--host-padding-block: var(--sidebarlist-padding-block),
+    //
+    --list--item-background-color: var(--sidebarlist-item-background-color,),
+    --list--item-color: var(--sidebarlist-item-color,),
+    --list--highlighteditem-background-color: var(--sidebarlist-highlighteditem-background-color,),
+    --list--highlighteditem-color: var(--sidebarlist-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(--sidebarlist-openitem-background-color,),
+    --list--details-color: var(--sidebarlist-openitem-color,),
+    --list--opensummary-background-color: var(--sidebarlist-opensummary-background-color,),
+    --list--opensummary-color: var(--sidebarlist-opensummary-color,),
+    //
+    // --list--item-grid-template-columns: minmax(0, 1fr),
+    --list--accessories-display: none,
+    //
+    --list--rootsummary-marker-display: marker-trailing,
+  ),
+);
+$list-elses: (
+  --list--host-background-color: var(--list-background-color,),
+  --list--highlighteditem-background-color: var(--list-highlighteditem-background-color,),
+  --list--item-background-color: var(--list-item-background-color,),
+  --list--item-padding-inline-start: var(--list-item-padding-inline-start),
+  --list--item-padding-inline-end: var(--list-item-padding-inline-end),
+  --list--item-padding-block-start: var(--list-item-padding-block-start),
+  --list--item-padding-block-end: var(--list-item-padding-block-end),
+  --list--item-color: var(--list-item-color,),
+  --list--highlighteditem-color: var(--list-highlighteditem-color,),
+  //
+  --list--details-background-color: var(--list-openitem-background-color,),
+  --list--details-color: var(--list-openitem-color,),
+  --list--opensummary-background-color: var(--list-opensummary-background-color,),
+  --list--opensummary-color: var(--list-opensummary-color,),
+  //
+  // --list--item-grid-template-columns: minmax(0, 1fr) 1rem,
+  --list--accessories-size: 1.1rem,
+  --list--accessories-display: grid,
+);
+
+@layer #{vars.$components-layer} {
+  list-view {
+    &:not(& &, [is='form-view'] &, table-view &) {
+      @extend %list;
+
+      // wire
+      :where(&) {
+        --list--section-gap: var(--list-row-gap);
+
+        @include mixins.write-props($list-elses);
+        // --list--item-padding-inline-start: var(--list-item-padding-inline-start);
+        // --list--item-padding-inline-end: var(--list-item-padding-inline-end);
+        // --list--item-padding-block-start: var(--list-item-padding-block-start);
+        // --list--item-padding-block-end: var(--list-item-padding-block-end);
+
+        // --list--item-background-color: var(--list-item-background-color,);
+      }
+
+      // SECTION: ifs
+      @supports (x: #{string.unquote('if(else:red)')}) {
+        :where(&) {
+          @include mixins.write-ifs(--list-style, $list-ifs, $list-elses);
+          // --list--root-padding-inline: if(style(--list-style: inset-grouped): 0.5rem ; style(--list-style: sidebar): 0.5rem ;);
+
+          // --toolbaritemradius: if(style(--list-style: inset-grouped): 1rem ; style(--list-style: sidebar): 1rem ;);
+
+          // --list--separator-block-size: if(style(--list-style: sidebar): 0px ;);
+          // --list--separator-visibility: if(style(--list-style: collapse): 0px ;);
+
+          // --list--root-background-color: if(style(--list-style: sidebar): transparent ;);
+        }
+      }
+
+      // SECTION: ifs polyfill
+      @supports not (x: #{string.unquote('if(else:red)')}) {
+        :where(&:not([list-style])) {
+          @each $v in vars.$list-styles {
+            @container style(--list-style: #{$v}) {
+              @include mixins.write-props(map.get($list-ifs, $v));
+            }
+          }
+        }
+        @each $v in vars.$list-styles {
+          :where(&[list-style='#{$v}']) {
+            @include mixins.write-props(map.get($list-ifs, $v));
+          }
+        }
+        @include mixins.if-2col-split-view-fits {
+          :where(navigation-split-view [is='sidebar-view'] &[list-style]) {
+            @include mixins.write-props(map.get($list-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($list-ifs, inset));
+          }
+        }
+      }
+
+      // SECTION: attrs finally
+      @supports (x: #{string.unquote('attr(x type(*))')}) {
+        :where(&) {
+          --list-style: attr(list-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]) {
+            --list-style: sidebar;
+          }
+          :where(navigation-split-view > scroll-view &[preferred-expanded-style], navigation-split-view > body-view > scroll-view &[preferred-expanded-style]) {
+            --list-style: inset;
+          }
+        }
+      }
+
+      &[preferred-root-disclosure-style='sidebar'] {
+        --list--rootsummary-color: var(--primary);
+        --list--selectedrootsummary-color: var(--primary);
+        --list--rootsummary-background-color: transparent;
+        --list--selectedrootsummary-background-color: transparent;
+        --list--rootsummary-padding-inline-start: var(--list--item-padding-inline-start);
+        --list--rootsummary-padding-inline-end: var(--list--item-padding-inline-start);
+        --list--rootsummary-padding-block-start: 5px;
+        --list--rootsummary-padding-block-end: 5px;
+
+        > [is='disclosure-group'] ~ [is='disclosure-group'],
+        > section-view > [is='disclosure-group'] ~ [is='disclosure-group'] {
+          margin-block-start: var(--list-row-gap);
+
+          &::before {
+            display: none;
+          }
+        }
+
+        > [is='disclosure-group'],
+        > section-view > [is='disclosure-group'] {
+          --list--details-background-color: var(--list--item-background-color);
+          --list--opensummary-background-color: var(--list--item-background-color);
+
+          > details,
+          > button:first-of-type {
+            --itemradiustl: var(--list--item-border-radius);
+            --itemradiustr: var(--list--item-border-radius);
+
+            &::before {
+              display: none;
+            }
+          }
+        }
+      }
+
+      // FINALLY AFTER ALL IFS
+      // TODO: Also apply this on state of sidebar w/ full-screen detail 1/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;
+        }
+      }
+    }
+  }
+}