@swiftwc/ui 0.0.0-dev.96 → 0.0.0-dev.98

package/generated/events/alert-dialog.d.ts

@@ -7,4 +7,7 @@ declare global {
     interface HTMLElementEventMap {
         'alert:return': AlertReturnEvent;
     }
+    interface DocumentEventMap {
+        'alert:return': AlertReturnEvent;
+    }
 }

package/generated/events/confirmation-dialog.d.ts

@@ -8,4 +8,7 @@ declare global {
     interface HTMLElementEventMap {
         'confirmation:return': ConfirmationReturnEvent;
     }
+    interface DocumentEventMap {
+        'confirmation:return': ConfirmationReturnEvent;
+    }
 }

package/generated/events/date-picker.d.ts

@@ -7,4 +7,7 @@ declare global {
     interface HTMLElementEventMap {
         selection: DatePickerSelectionEvent;
     }
+    interface DocumentEventMap {
+        selection: DatePickerSelectionEvent;
+    }
 }

package/generated/events/lifecycle-observer.d.ts

@@ -11,4 +11,8 @@ declare global {
         pageshow: PageShowEvent;
         pagehide: PageHideEvent;
     }
+    interface DocumentEventMap {
+        pageshow: PageShowEvent;
+        pagehide: PageHideEvent;
+    }
 }

package/generated/events/picker-view.d.ts

@@ -20,4 +20,10 @@ declare global {
         'picker:searchblur': PickerSearchblurEvent;
         'picker:searchinput': PickerSearchinputEvent;
     }
+    interface DocumentEventMap {
+        selection: PickerSelectionEvent;
+        'picker:searchfocus': PickerSearchfocusEvent;
+        'picker:searchblur': PickerSearchblurEvent;
+        'picker:searchinput': PickerSearchinputEvent;
+    }
 }

package/generated/events/scroll-view.d.ts

@@ -11,4 +11,8 @@ declare global {
         pagereveal: PagerevealEvent;
         pageswap: PageswapEvent;
     }
+    interface DocumentEventMap {
+        pagereveal: PagerevealEvent;
+        pageswap: PageswapEvent;
+    }
 }

package/generated/events/tab-view.d.ts

@@ -41,4 +41,14 @@ declare global {
         'tab-view:toggle': TabViewToggleEvent;
         'tab-view:adaptable-tab-bar-placement-change': TabViewAdaptableTabBarPlacementChangeEvent;
     }
+    interface DocumentEventMap {
+        tabshow: TabshowEvent;
+        tabhide: TabhideEvent;
+        tabreveal: TabrevealEvent;
+        tabswap: TabswapEvent;
+        beforetabreveal: BeforetabrevealEvent;
+        beforetabswap: BeforetabswapEvent;
+        'tab-view:toggle': TabViewToggleEvent;
+        'tab-view:adaptable-tab-bar-placement-change': TabViewAdaptableTabBarPlacementChangeEvent;
+    }
 }

package/generated/events/text-field.d.ts

@@ -7,4 +7,7 @@ declare global {
     interface HTMLElementEventMap {
         commit: TextFieldCommitEvent;
     }
+    interface DocumentEventMap {
+        commit: TextFieldCommitEvent;
+    }
 }

package/generated/events/toggle-view.d.ts

@@ -8,4 +8,7 @@ declare global {
     interface HTMLElementEventMap {
         'toggle:change': ToggleChangeEvent;
     }
+    interface DocumentEventMap {
+        'toggle:change': ToggleChangeEvent;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.96",
+  "version": "0.0.0-dev.98",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"

package/scss/_maps.scss

@@ -151,62 +151,67 @@ $block-placement-map: (
 $label-fonts-map: (
   footnote: (
     size: 1rem,
-    line: 1rem,
+    leading: calc(1.1875 / 1),
     weight: 400,
   ),
   caption2: (
     size: 0.75rem,
-    line: calc(1 / 0.75),
+    leading: calc(1.0625 / 0.75),
     weight: 400,
   ),
   caption: (
-    size: 0.875rem,
-    line: calc(1.25 / 0.875),
+    size: 0.8125rem,
+    leading: calc(1.25 / 0.8125),
     weight: 400,
   ),
   callout: (
     size: 0.875rem,
-    line: 0.875rem,
+    leading: calc(1.1875 / 0.875),
     weight: 400,
   ),
   body: (
     size: 1rem,
-    line: calc(1.5 / 1),
+    leading: calc(1.5 / 1),
     weight: 400,
   ),
   subheadline: (
     size: 1.125rem,
-    line: calc(1.75 / 1.125),
+    leading: calc(1.6875 / 1.125),
     weight: 400,
   ),
   headline: (
     size: 1.25rem,
-    line: calc(1.75 / 1.25),
+    leading: calc(1.75 / 1.25),
     weight: 500,
   ),
   title3: (
     size: 1.5rem,
-    line: calc(2 / 1.5),
+    leading: calc(2 / 1.5),
     weight: 600,
   ),
   title2: (
     size: 1.875rem,
-    line: calc(2.25 / 1.875),
+    leading: calc(2.25 / 1.875),
     weight: 600,
   ),
   title: (
     size: 2.25rem,
-    line: calc(2.5 / 2.25),
+    leading: calc(2.5 / 2.25),
     weight: 600,
   ),
   large-title: (
     size: 3rem,
-    line: 1,
+    leading: 1,
     weight: 700,
   ),
   extra-large-title: (
     size: 3.75rem,
-    line: 1,
+    leading: 1,
+    weight: 700,
+  ),
+  extra-large-title2: (
+    size: 4.5rem,
+    leading: 1,
     weight: 700,
   ),
 );
@@ -258,6 +263,7 @@ $button-sizes-map: (
 $tint-names: gray, blue, red, green, orange, purple;
 
 $foreground-tokens: (
+  primary: --primary,
   secondary: --secondary,
   blue: --blue,
   red: --red,

package/scss/base/_root.scss

@@ -234,7 +234,7 @@
 
     @each $label, $props in maps.$label-fonts-map {
       --label-#{$label}-font-size: #{map.get($props, size)};
-      --label-#{$label}-line-height: #{map.get($props, line)};
+      --label-#{$label}-line-height: #{map.get($props, leading)};
       --label-#{$label}-font-weight: #{map.get($props, weight)};
     }
 

package/scss/components/_picker-view.scss

@@ -152,13 +152,19 @@ $picker-ifs: (
       &::part(picker-label-stack) {
         display: var(--picker--labelstack-display, none); // display: none;
 
-        color: var(--secondary);
+        // color: var(--secondary);
 
         --label-truncation-mode: tail;
 
         --label-line-limit: 1;
       }
 
+      form & {
+        :where(&)::part(picker-label-stack) {
+          color: var(--secondary);
+        }
+      }
+
       --picker--stack-grid-template-columns: minmax(30%, 1fr) auto;
 
       --picker--stack-grid-template-rows: minmax(0, 1fr);

package/scss/components/_scroll-view-toolbars.scss

@@ -25,8 +25,14 @@
     }
   }
 
-  scroll-view:has(~ tool-bar > [slot^='top-bar']),
-  scroll-view:has(> [slot^='top-bar']) {
+  scroll-view:has(
+    ~ tool-bar > [slot^='top-bar'],
+    ~ tool-bar > [slot='cancellation-action'],
+    ~ tool-bar > [slot='primary-action'],
+    ~ tool-bar > [slot='confirmation-action'],
+    ~ tool-bar > [slot='destructive-action']
+  ),
+  scroll-view:has(> [slot^='top-bar'], > [slot='cancellation-action'], > [slot='primary-action'], > [slot='confirmation-action'], > [slot='destructive-action']) {
     :where(&)::part(scroll-view-navbar) {
       visibility: visible;
     }

package/scss/components/_toggle-view.scss

@@ -20,7 +20,8 @@
       }
 
       // &::part(toggle-label-stack) {
-      // color: var(--secondary);
+      //   // color: var(--secondary);
+      //   padding-inline-start: var(--toggle-padding-inline-start,);
       // }
 
       &::part(toggle-input-stack) {

package/scss/mixins/_index.scss

@@ -80,8 +80,14 @@
     grid-area: main;
   }
 
-  &:has(~ tool-bar > [slot^='top-bar']),
-  &:has(> [slot^='top-bar']) {
+  &:has(
+    ~ tool-bar > [slot^='top-bar'],
+    ~ tool-bar > [slot='cancellation-action'],
+    ~ tool-bar > [slot='primary-action'],
+    ~ tool-bar > [slot='confirmation-action'],
+    ~ tool-bar > [slot='destructive-action']
+  ),
+  &:has(> [slot^='top-bar'], > [slot='cancellation-action'], > [slot='primary-action'], > [slot='confirmation-action'], > [slot='destructive-action']) {
     grid-template-rows: var(--navigation-bar-block-size) minmax(max-content, 1fr);
   }
 }

package/scss/placeholders/_lists.scss

@@ -364,7 +364,7 @@ $list-item-selector: ':not([slot], section-view, [is="disclosure-group"], picker
         }
 
         &::part(section-header-stack) {
-          top: calc(var(--list--sticky-block-size, 0px) + var(--navigation-bar-block-size));
+          top: var(--list--sticky-block-size, 0px); // + var(--navigation-bar-block-size));
 
           position: sticky;
 
@@ -373,6 +373,32 @@ $list-item-selector: ':not([slot], section-view, [is="disclosure-group"], picker
           // text-shadow: 0 0 5px var(--face);
         }
       }
+
+      // &:is([list-style*='inset'] section-view, [form-style*='inset'] section-view) {
+      //   :where(&) {
+      //     &::part(section-header-stack) {
+      //       top: calc(var(--list--sticky-block-size, 0px) + 1rem);
+      //     }
+      //   }
+      // }
+
+      &:is(
+        scroll-view:has(
+            ~ tool-bar > [slot^='top-bar'],
+            ~ tool-bar > [slot='cancellation-action'],
+            ~ tool-bar > [slot='primary-action'],
+            ~ tool-bar > [slot='confirmation-action'],
+            ~ tool-bar > [slot='destructive-action']
+          )
+          section-view,
+        scroll-view:has(> [slot^='top-bar'], > [slot='cancellation-action'], > [slot='primary-action'], > [slot='confirmation-action'], > [slot='destructive-action']) section-view
+      ) {
+        :where(&) {
+          &::part(section-header-stack) {
+            top: calc(var(--list--sticky-block-size, 0px) + var(--navigation-bar-block-size));
+          }
+        }
+      }
     }
 
     // SECTION: Enable 2-col layout

package/scss/utils/_frame.scss

@@ -16,9 +16,15 @@ $self-map: (
     max-inline-size: 100%;
   }
   @for $i from 0 through 100 {
+    :where([frame\:width='#{$i}']) {
+      max-inline-size: #{$i}rem;
+    }
     :where([frame\:max-width='#{$i}']) {
       max-inline-size: #{$i}rem;
     }
+    :where([frame\:width='#{$i}cqi']) {
+      max-inline-size: #{$i}cqi;
+    }
     :where([frame\:max-width='#{$i}cqi']) {
       max-inline-size: #{$i}cqi;
     }
@@ -52,53 +58,6 @@ $self-map: (
     }
   }
 
-  // :where([frame\:alignment='top']) {
-  //   align-self: start;
-  // }
-  // :where([frame\:alignment='leading']) {
-  //   justify-self: start;
-  // }
-
-  // :where([frame-width='infinity']) {
-  //   place-items: stretch; //justify-self: stretch;
-  // }
-  // :where([frame-alignment='leading']) {
-  //   align-self: start;
-  // }
-  // :where([frame-alignment='center']) {
-  //   align-self: center;
-  // }
-  // :where([frame-alignment='trailing']) {
-  //   align-self: end;
-  // }
-  // :where([alignment='start']) {
-  //   place-items: start;
-  // }
-  // :where([alignment='fill']) {
-  //   place-items: stretch;
-  // }
-  // :where([content='start']) {
-  //   place-content: start;
-  // }
-  // :where([justify-content='start']) {
-  //   justify-content: start;
-  // }
-  // :where([justify-content='start']) {
-  //   justify-content: start;
-  // }
-  // :where([spacer='top']) {
-  //   margin-top: auto;
-  // }
-  // :where([distribution='start']) {
-  //   place-content: start;
-  // }
-  // :where([distribution='space-between']) {
-  //   place-content: space-between;
-  // }
-  // :where(spacer) {
-  //   margin: auto;
-  // }
-
   @media (prefers-reduced-motion: no-preference) {
     :where([slow]) {
       visibility: visible;
@@ -124,3 +83,21 @@ $self-map: (
     }
   }
 }
+
+@layer #{vars.$components-layer} {
+  // readable 2/2
+  v-stack {
+    :where(&[readable]) {
+      inline-size: 100%; //->[frame\:width='infinity']
+      justify-self: center; //->[frame\:alignment='center'];
+    }
+    @for $i from 0 through 100 {
+      :where(&[readable='#{$i}']) {
+        max-inline-size: #{$i}rem; //->[frame:max-width='{length}'`]
+      }
+      :where(&[readable='#{$i}cqi']) {
+        max-inline-size: #{$i}cqi; //->[frame:max-width='{length}'`]
+      }
+    }
+  }
+}

package/scss/utils/_stacks.scss

@@ -41,7 +41,7 @@
   h-flex-stack {
     // block dir for items+content
     @each $k, $declarations in maps.$block-map {
-      &[distribution='#{$k}'] {
+      :where(&[distribution='#{$k}']) {
         @each $decl in $declarations {
           #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
         }
@@ -50,7 +50,7 @@
 
     // inline dir for items+content
     @each $k, $declarations in maps.$inline-map {
-      &[alignment='#{$k}'] {
+      :where(&[alignment='#{$k}']) {
         @each $decl in $declarations {
           #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
         }
@@ -59,7 +59,7 @@
 
     // placement="leading fill" -> shortcut for distribution="leading" alignment="fill"
     @each $k, $declarations in maps.$block-placement-map {
-      &[placement='#{$k}'] {
+      :where(&[placement='#{$k}']) {
         @each $decl in $declarations {
           #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')};
         }
@@ -99,3 +99,14 @@
     }
   }
 }
+
+@layer #{vars.$components-layer} {
+  // readable 1/2
+  v-stack {
+    :where(&[readable]) {
+      @each $decl in map.get(maps.$block-placement-map, 'leading fill') {
+        #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //->[placement='leading fill']->[distribution='leading'][alignment='fill']
+      }
+    }
+  }
+}