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

package/scss/utils/_stacks.scss

@@ -0,0 +1,247 @@
+@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 (safe center)),
+    (justify-content (safe 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: (
+  'fill': (
+    (place-items (stretch)),
+    (place-content (stretch)),
+  ),
+  'leading fill': (
+    (place-items (start stretch)),
+    (place-content (start stretch)),
+  ),
+  'space-between fill': (
+    (align-content (space-between)),
+    (justify-items (stretch)),
+    (justify-content (stretch)),
+  ),
+);
+
+@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 {
+      &[distribution='#{$k}'] {
+        @each $decl in $declarations {
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
+        }
+      }
+    }
+
+    // cross axis (vertical/block)
+    @each $k, $declarations in $block-map {
+      &[alignment='#{$k}'] {
+        @each $decl in $declarations {
+          #{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 {
+      &[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 $decl in $declarations {
+          #{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 $decl in $declarations {
+          #{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 $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 {
+    @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;
+    }
+
+    :where(scroll-view > &[padding]) {
+      padding-block-end: 1rem;
+    }
+
+    // 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]) {
+      margin-inline: 1rem;
+    }
+  }
+}

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

@@ -0,0 +1,423 @@
+{
+  "version": 1.1,
+  "tags": [
+    {
+      "name": "alert-dialog"
+    },
+    {
+      "name": "body-view"
+    },
+    {
+      "name": "bordered-button",
+      "attributes": [
+        {
+          "name": "role"
+        }
+      ]
+    },
+    {
+      "name": "bordered-prominent-button",
+      "attributes": [
+        {
+          "name": "role"
+        }
+      ]
+    },
+    {
+      "name": "borderless-button",
+      "attributes": [
+        {
+          "name": "role"
+        }
+      ]
+    },
+    {
+      "name": "confirmation-dialog",
+      "attributes": [
+        {
+          "name": "anchor"
+        }
+      ]
+    },
+    {
+      "name": "content-unavailable-view",
+      "description": "A message with a title and extra information that you show when part of your app can’t be used.",
+      "attributes": [
+        {
+          "name": "search"
+        }
+      ]
+    },
+    {
+      "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",
+      "attributes": [
+        {
+          "name": "role"
+        }
+      ]
+    },
+    {
+      "name": "glass-prominent-button",
+      "attributes": [
+        {
+          "name": "role"
+        }
+      ]
+    },
+    {
+      "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",
+      "description": "A view with two or three side-by-side sections, where what you choose in the left section changes what appears in the next section."
+    },
+    {
+      "name": "navigation-stack",
+      "description": "A view that shows a main screen and lets you open other screens on top of it."
+    },
+    {
+      "name": "navigation-title",
+      "attributes": [
+        {
+          "name": "value"
+        },
+        {
+          "name": "subtitle"
+        }
+      ]
+    },
+    {
+      "name": "picker-view"
+    },
+    {
+      "name": "plain-button"
+    },
+    {
+      "name": "screen-view"
+    },
+    {
+      "name": "scroll-view-proxy",
+      "description": "A wrapper to {hv}-stacks"
+    },
+    {
+      "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",
+      "description": "A screen that lets users switch between different views using buttons, tabs, or other controls."
+    },
+    {
+      "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",
+      "attributes": [
+        {
+          "name": "preferred-fine-modal-placement"
+        }
+      ]
+    },
+    {
+      "name": "tool-bar-item",
+      "attributes": [
+        {
+          "name": "preferred-fine-modal-placement"
+        }
+      ]
+    },
+    {
+      "name": "tool-bar"
+    },
+    {
+      "name": "v-keyboard",
+      "description": "Required component, must be BODY tag"
+    },
+    {
+      "name": "v-stack",
+      "description": "",
+      "attributes": [
+        {
+          "name": "{leading|\"leading fill\"|center|trailing|fill|space",
+          "description": "\nDescription: between} distribution"
+        },
+        {
+          "name": "template",
+          "description": "Value Type: “auto spacer” | “auto auto spacer” | “auto auto auto spacer”",
+          "values": [
+            {
+              "name": "auto spacer"
+            },
+            {
+              "name": "auto auto spacer"
+            },
+            {
+              "name": "auto auto auto spacer"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "globalAttributes": [
+    {
+      "name": "tint",
+      "description": "Sets accent color",
+      "valueSet": "tintSet"
+    },
+    {
+      "name": "frame:width",
+      "description": "Sets inline-size",
+      "valueSet": "frameWidth"
+    },
+    {
+      "name": "frame:max-width",
+      "description": "Sets max-inline-size",
+      "valueSet": "frameMaxWidth"
+    }
+  ],
+  "valueSets": [
+    {
+      "name": "tintSet",
+      "values": [
+        {
+          "name": "gray",
+          "description": "like secondary, like disabled"
+        },
+        {
+          "name": "red",
+          "description": "system red color"
+        },
+        {
+          "name": "blue",
+          "description": "system blue color"
+        }
+      ]
+    },
+    {
+      "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"
+        }
+      ]
+    }
+  ]
+}

package/generated/internal/snapshot.d.ts

@@ -1,5 +0,0 @@
-export declare class Snapshot {
-    #private;
-    static get count(): number;
-    static getSnapshot(): void;
-}

package/generated/internal/snapshot.js

@@ -1,23 +0,0 @@
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _a, _Snapshot_count;
-export class Snapshot {
-    static get count() {
-        return __classPrivateFieldGet(this, _a, "f", _Snapshot_count);
-    }
-    static getSnapshot() {
-        var _b;
-        __classPrivateFieldSet(this, _a, (_b = __classPrivateFieldGet(this, _a, "f", _Snapshot_count), _b++, _b), "f", _Snapshot_count);
-    }
-}
-_a = Snapshot;
-_Snapshot_count = { value: 0 };

package/generated/styles.css

@@ -1,8 +0,0 @@
-@layer base, components, transitions;
-@layer base {
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-}

package/scss/_reboot.scss

@@ -1,11 +0,0 @@
-@use "vars";
-
-@layer #{vars.$base-layer}, #{vars.$components-layer}, #{vars.$transitions-layer};
-
-@layer #{vars.$base-layer} {
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-}