@swiftwc/ui 0.0.0-dev.6 → 0.0.0-dev.8

package/scss/utils/_spacing.scss

@@ -0,0 +1,25 @@
+@use '../vars';
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:list';
+
+@layer #{vars.$utils-layer} {
+  // general utils
+  @for $i from 0 through 50 {
+    :where([padding-horizontal='#{$i}']) {
+      padding-inline: #{math.div(math.round(math.div($i, 10) * 10), 10)}rem;
+    }
+
+    :where([padding-vertical='#{$i}']) {
+      padding-block: #{math.div(math.round(math.div($i, 10) * 10), 10)}rem;
+    }
+
+    :where([margin-horizontal='#{$i}']) {
+      margin-inline: #{math.div(math.round(math.div($i, 10) * 10), 10)}rem;
+    }
+
+    :where([margin-vertical='#{$i}']) {
+      margin-block: #{math.div(math.round(math.div($i, 10) * 10), 10)}rem;
+    }
+  }
+}

package/scss/utils/_stacks.scss

@@ -0,0 +1,242 @@
+@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)),
+  ),
+);
+
+@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.nth($decl, 2)};
+        }
+      }
+    }
+
+    // cross axis (vertical/block)
+    @each $k, $declarations in $block-map {
+      &[alignment='#{$k}'] {
+        @each $decl in $declarations {
+          #{list.nth($decl, 1)}: #{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.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.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,
+  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,330 @@
+{
+  "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"
+        }
+      ]
+    }
+  ]
+}

package/generated/components/bottom-bar.d.ts

@@ -1,10 +0,0 @@
-export declare class BottomBar extends HTMLElement {
-    #private;
-    static get leadingPartName(): string;
-    static get principalPartName(): string;
-    static get trailingPartName(): string;
-    static get template(): HTMLTemplateElement;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-}

package/generated/components/bottom-bar.js

@@ -1,73 +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 _BottomBar_instances, _a, _BottomBar_template, _BottomBar_shadowRoot, _BottomBar_ro, _BottomBar_sibling_get, _BottomBar_sp_set, _BottomBar_ep_set, _BottomBar_measureStacks;
-export class BottomBar extends HTMLElement {
-    static get leadingPartName() {
-        return 'toolbar-leading-stack';
-    }
-    static get principalPartName() {
-        return 'toolbar-principal-stack';
-    }
-    static get trailingPartName() {
-        return 'toolbar-trailing-stack';
-    }
-    static get template() {
-        if (!__classPrivateFieldGet(this, _a, "f", _BottomBar_template))
-            __classPrivateFieldSet(this, _a, Object.assign(document.createElement('template'), {
-                innerHTML: `<div part="${this.leadingPartName}">
-    <slot name="leading"></slot>
-  </div>
-  <div part="${this.principalPartName}">
-    <slot></slot>
-  </div>
-  <div part="${this.trailingPartName}">
-    <slot name="trailing"></slot>
-  </div>`,
-            }), "f", _BottomBar_template);
-        return __classPrivateFieldGet(this, _a, "f", _BottomBar_template);
-    }
-    constructor() {
-        super();
-        _BottomBar_instances.add(this);
-        _BottomBar_shadowRoot.set(this, void 0);
-        _BottomBar_ro.set(this, void 0);
-        __classPrivateFieldSet(this, _BottomBar_shadowRoot, this.attachShadow({ mode: 'open' }), "f");
-        __classPrivateFieldGet(this, _BottomBar_shadowRoot, "f").appendChild(document.importNode(this.constructor.template.content, true));
-        __classPrivateFieldSet(this, _BottomBar_ro, new ResizeObserver(__classPrivateFieldGet(this, _BottomBar_instances, "m", _BottomBar_measureStacks).bind(this)), "f");
-    }
-    connectedCallback() {
-        console.debug(`${_a.name} ⚡️ connect`);
-        __classPrivateFieldGet(this, _BottomBar_ro, "f")?.observe(__classPrivateFieldGet(this, _BottomBar_shadowRoot, "f").querySelector(`[part="${this.constructor.leadingPartName}"]`));
-        __classPrivateFieldGet(this, _BottomBar_ro, "f")?.observe(__classPrivateFieldGet(this, _BottomBar_shadowRoot, "f").querySelector(`[part="${this.constructor.trailingPartName}"]`));
-    }
-    disconnectedCallback() {
-        console.debug(`${_a.name} ⚡️ disconnect`);
-        __classPrivateFieldGet(this, _BottomBar_ro, "f").disconnect();
-    }
-}
-_a = BottomBar, _BottomBar_shadowRoot = new WeakMap(), _BottomBar_ro = new WeakMap(), _BottomBar_instances = new WeakSet(), _BottomBar_sibling_get = function _BottomBar_sibling_get() {
-    return (this.parentElement?.querySelector(':scope > scroll-view') ?? undefined); //this.previousElementSibling ?? undefined
-}, _BottomBar_sp_set = function _BottomBar_sp_set(nv) {
-    ;
-    __classPrivateFieldGet(this, _BottomBar_instances, "a", _BottomBar_sibling_get)?.style?.setProperty?.('--bottombar-padding-inline-start', `${nv}px`);
-}, _BottomBar_ep_set = function _BottomBar_ep_set(nv) {
-    ;
-    __classPrivateFieldGet(this, _BottomBar_instances, "a", _BottomBar_sibling_get)?.style?.setProperty?.('--bottombar-padding-inline-end', `${nv}px`);
-}, _BottomBar_measureStacks = function _BottomBar_measureStacks(entries = []) {
-    console.debug(`${_a.name} ⚡️ resize observer callback: ${__classPrivateFieldGet(this, _BottomBar_instances, "m", _BottomBar_measureStacks).name}`);
-    for (const { contentRect, target } of entries)
-        if (target.part.contains(this.constructor.leadingPartName))
-            __classPrivateFieldSet(this, _BottomBar_instances, Math.round(contentRect.width), "a", _BottomBar_sp_set);
-        else if (target.part.contains(this.constructor.trailingPartName))
-            __classPrivateFieldSet(this, _BottomBar_instances, Math.round(contentRect.width), "a", _BottomBar_ep_set);
-};
-_BottomBar_template = { value: void 0 };

package/generated/components/navigation-bar.d.ts

@@ -1,10 +0,0 @@
-export declare class NavigationBar extends HTMLElement {
-    #private;
-    static get leadingPartName(): string;
-    static get principalPartName(): string;
-    static get trailingPartName(): string;
-    static get template(): HTMLTemplateElement;
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-}