@swiftwc/ui 0.0.0-dev.11 → 0.0.0-dev.110

package/scss/components/_label-view.scss

@@ -1,7 +1,27 @@
-@use '../vars';
-@use '../mixins';
 @use 'sass:string';
 @use 'sass:map';
+@use '../vars';
+@use '../maps';
+@use '../mixins';
+
+// scalpel precision
+@property --label-gap {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0.3;
+}
+
+@property --label-image-size {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 2;
+}
+
+@property --label-padding-inline {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0;
+}
 
 // @property --label-style {
 //   syntax: 'title-and-icon | icon-only | title-only | automatic';
@@ -9,6 +29,12 @@
 //   initial-value: automatic;
 // }
 
+// @property --label-font-weight {
+//   syntax: 'ultra-light | thin | light | regular | medium | semibold | bold | heavy | black';
+//   inherits: false;
+//   initial-value: regular;
+// }
+
 // @property --label--style {
 //   syntax: '<number>';
 //   inherits: false;
@@ -40,7 +66,7 @@ $label-line-ifs: (
   ),
   2: (
     --label--host-white-space: normal,
-    --label--display: -webkit-box,
+    --label--titlestack-display: -webkit-box,
     --label--box-orient: vertical,
     --label--line-clamp: 2,
   ),
@@ -55,18 +81,22 @@ $label-line-ifs: (
     --label--host-align-items: center;
     --label--host-justify-items: normal;
 
-    --label--host-gap: 0.3rem;
-
     --label--iconstack-display: grid;
-    --label--titlestack-display: grid;
+    --label--titlestack-display: inline-block;
   } @else if $label-style == h-icon-only {
     --label-style: icon-only;
 
+    --label--host-align-items: center;
+    --label--host-justify-items: normal;
+
     --label--iconstack-display: grid;
   } @else if $label-style == h-title-only {
     --label-style: title-only;
 
-    --label--titlestack-display: grid;
+    --label--host-align-items: center;
+    --label--host-justify-items: normal;
+
+    --label--titlestack-display: inline-block;
   } @else if $label-style == v-title-and-icon {
     --label-style: title-and-icon;
 
@@ -75,44 +105,23 @@ $label-line-ifs: (
     --label--host-align-items: normal;
     --label--host-justify-items: center;
 
-    --label--host-gap: 0.3rem;
-
     --label--iconstack-display: grid;
-    --label--titlestack-display: grid;
+    --label--titlestack-display: inline-block;
   } @else if $label-style == v-icon-only {
     --label-style: icon-only;
 
+    --label--host-align-items: normal;
+    --label--host-justify-items: center;
+
     --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};
-//   }
-// }
+    --label--host-align-items: normal;
+    --label--host-justify-items: center;
 
-@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);
+    --label--titlestack-display: inline-block;
+  }
 }
 
 @function if-chain($labels, $prop: null) {
@@ -145,93 +154,81 @@ $label-line-ifs: (
 @layer #{vars.$components-layer} {
   label-view {
     :where(&) {
-      // transition: --label--style 1ms step-start;
+      padding-inline: var(--label-padding-inline);
 
       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,);
-      // gap: 0;
+      gap: calc(var(--label-gap) * 1rem);
 
-      white-space: var(--label--host-white-space,);
+      --label-imagestack-fontsize: calc(var(--label-image-size) * 1rem);
 
-      &::part(label-image-stack),
-      &::part(label-title-stack) {
-        // display: none;
+      white-space: var(--label--host-white-space,);
+    }
 
-        grid-auto-columns: minmax(0, 1fr);
-        grid-auto-rows: minmax(0, 1fr);
-        // grid-template-columns: subgrid;
-        // grid-template-rows: subgrid;
+    &:has(> [slot='icon']) {
+      :where(&) {
+        --label--has-icon: yes;
+        // background-color: green;
       }
+    }
 
-      &::part(label-image-stack) {
-        display: var(--label--iconstack-display, none);
+    &:has(> :not([slot])) {
+      :where(&) {
+        --label--has-title: yes;
+        // background-color: red;
       }
+    }
 
-      &::part(label-title-stack) {
-        display: var(--label--titlestack-display, none);
-      }
+    > :not([slot]) {
+      :where(&) {
+        overflow: var(--label--overflow,);
 
-      &::part(label-image-stack) {
-        aspect-ratio: 1 / 1;
+        text-overflow: var(--label--text-overflow,);
 
-        inline-size: var(--label-image-size, 2rem);
-        font-size: var(--label-image-size, 2rem);
+        // display: var(--label--display,);
 
-        // line-height: 1;
+        -webkit-box-orient: var(--label--box-orient,);
 
-        // grid-area: label-image-stack;
-      }
+        line-clamp: var(--label--line-clamp,);
+        -webkit-line-clamp: var(--label--line-clamp,);
 
-      &::part(label-title-stack) {
-        text-decoration: underline;
+        // 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;
+        display: var(--label--titlestack-display, none);
       }
     }
 
-    :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,);
+    > [slot='icon'] {
+      :where(&) {
+        aspect-ratio: 1 / 1;
 
-      text-overflow: var(--label--text-overflow,);
+        inline-size: var(--label-imagestack-fontsize);
+        block-size: var(--label-imagestack-fontsize);
 
-      display: var(--label--display,);
+        font-size: var(--label-imagestack-fontsize);
 
-      -webkit-box-orient: var(--label--box-orient,);
+        display: var(--label--iconstack-display, none);
 
-      line-clamp: var(--label--line-clamp,);
-      -webkit-line-clamp: var(--label--line-clamp,);
+        --image--fontsize: var(--label-imagestack-fontsize);
+      }
     }
 
     // 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)});
+        --label--titlestack-font-size: if(#{if-chain(maps.$label-fonts-map, font-size)});
+        --label--titlestack-line-height: if(#{if-chain(maps.$label-fonts-map, line-height)});
+        --label--titlestack-font-weight: if(#{if-chain(maps.$label-fonts-map, font-weight)});
         // if(
         //   style(--label-font: callout): 0.5rem ; style(--label-font: large-title): 3rem ; style(--label-font: large-title): 3rem ;
         // );
@@ -255,77 +252,65 @@ $label-line-ifs: (
         --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) ;
-            )
-            ;
+            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--host-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 ;) ;
+            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--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;) ;
+          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;) ;
+          style(--label-style: icon-only): none ; style(--label-style: title-only): inline-block ; style(--label-style: title-and-icon): inline-block ;
+            else: if(style(--label--has-title: yes): inline-block ; else: none;) ;
         );
+        // --label--titlestack-display: if(
+        //   style(--label-style: icon-only): none ; style(--label-style: title-only): -webkit-box ; style(--label-style: title-and-icon): -webkit-box ;
+        //     else: if(style(--label--has-title: yes): -webkit-box ; else: none;) ;
+        // );
       }
     }
 
     @supports not (x: #{string.unquote('if(else:red)')}) {
       :where(&:not([label-style])) {
-        @each $v in vars.$label-styles {
+        @each $v in maps.$label-styles-names {
           @container style(--label-style: #{$v}) {
             @include set-label-style(h-#{$v});
           }
         }
       }
-      @each $v in vars.$label-styles {
+      @each $v in maps.$label-styles-names {
         :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]))) {
+          :where(&:has(> [slot='icon']):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])))) {
+          :where(&:has(> [slot='icon']):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']))) {
+          :where(&:has(> :not([slot])):not(:has(> [slot='icon']))) {
             @include set-label-style(h-title-only);
           }
         }
       }
       // AGAIN
       :where(&:not([label-style])) {
-        @each $v in vars.$label-styles {
+        @each $v in maps.$label-styles-names {
           @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 {
+        @each $v in maps.$label-styles-names {
           :where(&[label-style='#{$v}']) {
             @include set-label-style(v-#{$v});
           }
@@ -333,13 +318,13 @@ $label-line-ifs: (
       }
       @container (not style(--label-style)) and style(--label-flow: vertical) {
         &:not([label-style]) {
-          :where(&:has(> [slot='image']):has(> :not([slot]))) {
+          :where(&:has(> [slot='icon']):has(> :not([slot]))) {
             @include set-label-style(v-title-and-icon);
           }
-          :where(&:has(> [slot='image']):not(:has(> :not([slot])))) {
+          :where(&:has(> [slot='icon']):not(:has(> :not([slot])))) {
             @include set-label-style(v-icon-only);
           }
-          :where(&:has(> :not([slot])):not(:has(> [slot='image']))) {
+          :where(&:has(> :not([slot])):not(:has(> [slot='icon']))) {
             @include set-label-style(v-title-only);
           }
         }
@@ -355,9 +340,9 @@ $label-line-ifs: (
         @include mixins.write-props(map.get($label-truncation-ifs, tail)); //@include set-label-truncation-mode(tail);
       }
       //
-      @each $label, $size in vars.$label-fonts {
+      @each $label, $size in maps.$label-fonts-map {
         @include if-chain(--label-font, font, $label) {
-          @include set-label-font($label);
+          @include mixins.set-label-font($label);
         }
       }
     }