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

package/scss/utils/_stacks.scss

@@ -1,230 +1,85 @@
-@use '../vars';
 @use 'sass:math';
 @use 'sass:map';
 @use 'sass:list';
-
-$h-map: (
-  leading: start,
-  center: center,
-  trailing: end,
-  fill: stretch, // cross-axis stretch
-);
-
-$v-map: (
-  top: start,
-  center: center,
-  bottom: end,
-  fill: stretch, // cross-axis stretch
-);
-
-$placement-map: (
-  top-leading: start start,
-  top: start center,
-  top-trailing: start end,
-  center-leading: center start,
-  center: center center,
-  center-trailing: center end,
-  bottom-leading: end start,
-  bottom: end center,
-  bottom-trailing: end end,
-);
-
-$alignment-map: (
-  leading: start,
-  center: center,
-  trailing: end,
-  fill: stretch, // cross-axis stretch
-);
-
-$distribution-map: (
-  top: start,
-  center: center,
-  bottom: end,
-  fill: stretch,
-  between: space-between,
-  evenly: space-evenly,
-);
-
-$inline-map: (
-  leading: (
-    (justify-items start),
-    (justify-content start),
-  ),
-  'leading fill': (
-    (justify-items start),
-    (justify-content stretch),
-  ),
-  center: (
-    (justify-items center),
-    (justify-content center),
-  ),
-  trailing: (
-    (justify-items end),
-    (justify-content end),
-  ),
-  fill: (
-    (justify-items stretch),
-    (justify-content stretch),
-  ),
-  space-between: (
-    (justify-content space-between),
-  ),
-);
-
-$block-map: (
-  leading: (
-    (align-items start),
-    (align-content start),
-  ),
-  'leading fill': (
-    (align-items start),
-    (align-content stretch),
-  ),
-  center: (
-    (align-items center),
-    (align-content center),
-  ),
-  trailing: (
-    (align-items end),
-    (align-content end),
-  ),
-  fill: (
-    (align-items stretch),
-    (align-content stretch),
-  ),
-  space-between: (
-    (align-content space-between),
-  ),
-);
-
-$h-placement-map: (
-  'fill leading': (
-    (place-items (start stretch)),
-    (place-content (start stretch)),
-  ),
-  'fill space-between': (
-    (align-content (space-between)),
-    (justify-items (stretch)),
-    (justify-content (stretch)),
-  ),
-);
-
-$v-placement-map: (
-  'leading fill': (
-    (place-items (start stretch)),
-    (place-content (start stretch)),
-  ),
-  'space-between fill': (
-    (align-content (space-between)),
-    (justify-items (stretch)),
-    (justify-content (stretch)),
-  ),
-);
+@use '../vars';
+@use '../maps';
 
 @layer #{vars.$utils-layer} {
   // Vertical alignment becomes the common tweak
   h-stack,
   v-flex-stack {
     // main axis (horizontal/inline)
-    @each $k, $declarations in $inline-map {
+    @each $k, $declarations in maps.$inline-map {
       &[distribution='#{$k}'] {
         @each $decl in $declarations {
-          #{list.nth($decl, 1)}: #{list.nth($decl, 2)};
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
         }
       }
     }
 
     // cross axis (vertical/block)
-    @each $k, $declarations in $block-map {
+    @each $k, $declarations in maps.$block-map {
       &[alignment='#{$k}'] {
         @each $decl in $declarations {
-          #{list.nth($decl, 1)}: #{list.nth($decl, 2)};
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
         }
       }
     }
 
     // placement="fill leading" -> short cut for distribution="fill" alignment="leading"
-    @each $k, $declarations in $h-placement-map {
+    @each $k, $declarations in maps.$inline-placement-map {
       &[placement='#{$k}'] {
         @each $decl in $declarations {
           #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')};
         }
       }
     }
-
-    // @each $k, $v in $alignment-map {
-    //   &[align='#{$k}'] {
-    //     justify-items: $v;
-    //   }
-    // }
-
-    // @each $k, $v in $distribution-map {
-    //   &[distribute='#{$k}'] {
-    //     justify-content: $v;
-    //   }
-    // }
   }
 
   // Horizontal alignment becomes the common tweak
   v-stack,
   h-flex-stack {
     // block dir for items+content
-    @each $k, $declarations in $block-map {
-      &[distribution='#{$k}'] {
+    @each $k, $declarations in maps.$block-map {
+      :where(&[distribution='#{$k}']) {
         @each $decl in $declarations {
-          #{list.nth($decl, 1)}: #{list.nth($decl, 2)};
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
         }
       }
     }
 
     // inline dir for items+content
-    @each $k, $declarations in $inline-map {
-      &[alignment='#{$k}'] {
+    @each $k, $declarations in maps.$inline-map {
+      :where(&[alignment='#{$k}']) {
         @each $decl in $declarations {
-          #{list.nth($decl, 1)}: #{list.nth($decl, 2)};
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
         }
       }
     }
 
     // placement="leading fill" -> shortcut for distribution="leading" alignment="fill"
-    @each $k, $declarations in $v-placement-map {
-      &[placement='#{$k}'] {
+    @each $k, $declarations in maps.$block-placement-map {
+      :where(&[placement='#{$k}']) {
         @each $decl in $declarations {
           #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')};
         }
       }
     }
-
-    // @each $k, $v in $alignment-map {
-    //   &[align='#{$k}'] {
-    //     align-items: $v;
-    //   }
-    // }
-
-    // @each $k, $v in $distribution-map {
-    //   &[distribute='#{$k}'] {
-    //     align-content: $v;
-    //   }
-    // }
   }
 
-  v-stack {
-    // $spaces: 0, 1, 2, 3, 4;
-    // @each $s in $spaces {
+  v-stack,
+  h-stack {
     @for $i from 0 through 50 {
       :where(&[spacing='#{$i}']) {
         gap: #{math.div(math.round(math.div($i, 10) * 10), 10)}rem;
       }
     }
-
-    :where(&[frame\:alignment='center']) {
-      justify-self: center;
-    }
   }
 
   // padding reserved word for stacks
   v-stack,
   h-stack,
+  h-flex-stack,
   v-flex-stack {
     :where(&[padding]) {
       padding-inline: 1rem;
@@ -235,8 +90,23 @@ $v-placement-map: (
     }
 
     // all direct children (excluding stacks) of stacks get margins, also some special cases like a details>summary[padding] etc.
-    :where(& > [padding]:not(&), & > [is='disclosure-group'] > summary[padding]) {
+    :where(& > [padding]:not(&, sticky-container), & > [is='disclosure-group'] > summary[padding]) {
       margin-inline: 1rem;
     }
+
+    :where(& > sticky-container) {
+      padding-inline: 1rem;
+    }
+  }
+}
+
+@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']
+      }
+    }
   }
 }

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

@@ -1 +0,0 @@
-export declare const ConfirmationDialog: EventTarget;

package/generated/confirmation-dialog/index.js

@@ -1 +0,0 @@
-export const ConfirmationDialog = new EventTarget();

package/generated/internal/utils/cash/index.d.ts

@@ -1,22 +0,0 @@
-import ancestors from './ancestors';
-import next from './next';
-import nextAll from './next-all';
-import prev from './prev';
-import prevAll from './prev-all';
-import prop from './prop';
-import siblings from './siblings';
-declare const DEFAULT: ":scope>:first-child";
-interface CashFn {
-    (innerHTML: string, selector?: typeof DEFAULT): Element;
-    (innerHTML: string, selector: string): DocumentFragment;
-    prop: typeof prop;
-    nextAll: typeof nextAll;
-    prevAll: typeof prevAll;
-    next: typeof next;
-    prev: typeof prev;
-    siblings: typeof siblings;
-    ancestors: typeof ancestors;
-}
-declare const cash: CashFn;
-export default cash;
-export { ancestors, next, nextAll, prev, prevAll, prop, siblings };

package/generated/internal/utils/cash/index.js

@@ -1,23 +0,0 @@
-import ancestors from './ancestors';
-import next from './next';
-import nextAll from './next-all';
-import prev from './prev';
-import prevAll from './prev-all';
-import prop from './prop';
-import siblings from './siblings';
-const DEFAULT = ':scope>:first-child';
-const cash = ((innerHTML, selector = DEFAULT) => {
-    const template = Object.assign(document.createElement('template'), { innerHTML });
-    if (selector === DEFAULT)
-        return template.content.firstElementChild;
-    return template.content;
-});
-cash.prop = prop;
-cash.nextAll = nextAll;
-cash.prevAll = prevAll;
-cash.next = next;
-cash.prev = prev;
-cash.siblings = siblings;
-cash.ancestors = ancestors;
-export default cash;
-export { ancestors, next, nextAll, prev, prevAll, prop, siblings };

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

@@ -1 +0,0 @@
-export declare const LifecycleObserver: EventTarget;

package/generated/lifecycle-observer/index.js

@@ -1 +0,0 @@
-export const LifecycleObserver = new EventTarget();

package/scss/transitions/_dialog.scss

@@ -1,28 +0,0 @@
-@use '../vars';
-@use '../mixins';
-
-@layer #{vars.$transitions-layer} {
-  [is='sheet-view']:not([open]) {
-    z-index: var(--top-layer-polyfill-z-index);
-  }
-
-  [is='sheet-view'][open] {
-    --sheet-view-translate: translateY(var(--view-transition-dialog-onscreen-y));
-
-    @include mixins.if-ipad-sheet-fits {
-      @include mixins.if-2col-split-view-fits {
-        navigation-split-view & {
-          margin-inline-start: var(--safe-area-inset-left);
-        }
-      }
-    }
-
-    @include mixins.add-dialog-backdrop-transition-frames(var(--view-transition-dialog-onscreen-backdrop-bg));
-
-    @starting-style {
-      & {
-        --sheet-view-translate: translateY(var(--view-transition-dialog-offscreen-y));
-      }
-    }
-  }
-}

package/web-components.html-data/en.json

@@ -1,330 +0,0 @@
-{
-  "version": 1.1,
-  "tags": [
-    {
-      "name": "body-view"
-    },
-    {
-      "name": "bordered-button"
-    },
-    {
-      "name": "bordered-prominent-button"
-    },
-    {
-      "name": "borderless-button",
-      "attributes": [
-        {
-          "name": "role"
-        }
-      ]
-    },
-    {
-      "name": "confirmation-dialog",
-      "attributes": [
-        {
-          "name": "anchor"
-        }
-      ]
-    },
-    {
-      "name": "date-picker",
-      "attributes": [
-        {
-          "name": "date-picker-style",
-          "description": "Value Type: “graphical” | “field” | “automatic”\nDescription: The style of this element",
-          "values": [
-            {
-              "name": "graphical"
-            },
-            {
-              "name": "field"
-            },
-            {
-              "name": "automatic"
-            }
-          ]
-        },
-        {
-          "name": "required"
-        },
-        {
-          "name": "prompt"
-        },
-        {
-          "name": "label"
-        },
-        {
-          "name": "name"
-        },
-        {
-          "name": "selection"
-        },
-        {
-          "name": "disabled"
-        },
-        {
-          "name": "minimum"
-        },
-        {
-          "name": "maximum"
-        }
-      ]
-    },
-    {
-      "name": "disclosure-group",
-      "attributes": [
-        {
-          "name": "open",
-          "description": "Description: The status of this element"
-        }
-      ]
-    },
-    {
-      "name": "form-view"
-    },
-    {
-      "name": "glass-button"
-    },
-    {
-      "name": "glass-prominent-button"
-    },
-    {
-      "name": "label-view",
-      "attributes": [
-        {
-          "name": "system-image"
-        },
-        {
-          "name": "title"
-        },
-        {
-          "name": "line-limit"
-        },
-        {
-          "name": "truncation-mode"
-        }
-      ]
-    },
-    {
-      "name": "list-view"
-    },
-    {
-      "name": "menu-view",
-      "attributes": [
-        {
-          "name": "open"
-        },
-        {
-          "name": "closing"
-        },
-        {
-          "name": "label"
-        }
-      ]
-    },
-    {
-      "name": "navigation-large-title"
-    },
-    {
-      "name": "navigation-split-view"
-    },
-    {
-      "name": "navigation-stack"
-    },
-    {
-      "name": "navigation-title",
-      "attributes": [
-        {
-          "name": "value"
-        },
-        {
-          "name": "subtitle"
-        }
-      ]
-    },
-    {
-      "name": "picker-view"
-    },
-    {
-      "name": "plain-button"
-    },
-    {
-      "name": "screen-view"
-    },
-    {
-      "name": "scroll-view",
-      "attributes": [
-        {
-          "name": "navigation-title"
-        },
-        {
-          "name": "navigation-inline-title"
-        },
-        {
-          "name": "navigation-inline-subtitle"
-        },
-        {
-          "name": "navigation-bar-title-display-mode"
-        }
-      ]
-    },
-    {
-      "name": "section-view",
-      "attributes": [
-        {
-          "name": "header"
-        },
-        {
-          "name": "footer"
-        }
-      ]
-    },
-    {
-      "name": "sheet-view",
-      "attributes": [
-        {
-          "name": "fine-presentation-large-adaptation"
-        }
-      ]
-    },
-    {
-      "name": "sidebar-toggle"
-    },
-    {
-      "name": "sidebar-view"
-    },
-    {
-      "name": "sticky-container"
-    },
-    {
-      "name": "tab-bar"
-    },
-    {
-      "name": "tab-item"
-    },
-    {
-      "name": "tab-view",
-      "description": ""
-    },
-    {
-      "name": "table-view"
-    },
-    {
-      "name": "text-field",
-      "description": "",
-      "attributes": [
-        {
-          "name": "prompt"
-        },
-        {
-          "name": "minimum"
-        },
-        {
-          "name": "maximum"
-        },
-        {
-          "name": "min-length"
-        },
-        {
-          "name": "max-length"
-        },
-        {
-          "name": "label"
-        },
-        {
-          "name": "name"
-        },
-        {
-          "name": "text"
-        },
-        {
-          "name": "text-input-autocapitalization"
-        },
-        {
-          "name": "disable-autocorrection"
-        },
-        {
-          "name": "keyboard-type"
-        },
-        {
-          "name": "required"
-        },
-        {
-          "name": "disabled"
-        }
-      ]
-    },
-    {
-      "name": "tool-bar-item-group"
-    },
-    {
-      "name": "tool-bar-item"
-    },
-    {
-      "name": "tool-bar"
-    },
-    {
-      "name": "v-keyboard",
-      "description": "Required component, must be BODY tag"
-    },
-    {
-      "name": "v-stack"
-    }
-  ],
-  "globalAttributes": [
-    {
-      "name": "frame:width",
-      "description": "Sets inline-size",
-      "valueSet": "frameWidth"
-    },
-    {
-      "name": "frame:max-width",
-      "description": "Sets max-inline-size",
-      "valueSet": "frameMaxWidth"
-    }
-  ],
-  "valueSets": [
-    {
-      "name": "frameWidth",
-      "values": [
-        {
-          "name": "infinity",
-          "description": "100%"
-        },
-        {
-          "name": "0",
-          "description": "0rem"
-        },
-        {
-          "name": "1",
-          "description": "1rem"
-        },
-        {
-          "name": "2",
-          "description": "2rem"
-        }
-      ]
-    },
-    {
-      "name": "frameMaxWidth",
-      "values": [
-        {
-          "name": "infinity",
-          "description": "100%"
-        },
-        {
-          "name": "0",
-          "description": "0rem"
-        },
-        {
-          "name": "1",
-          "description": "1rem"
-        },
-        {
-          "name": "2",
-          "description": "2rem"
-        }
-      ]
-    }
-  ]
-}