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

package/generated/internal/utils/set.d.ts

@@ -0,0 +1 @@
+export default function <T extends object, K extends keyof T>(obj: T, key: K, value: T[K]): boolean;

package/generated/internal/utils/set.js

@@ -0,0 +1,7 @@
+export default function (obj, key, value) {
+    if (!Object.is(obj[key], value)) {
+        obj[key] = value;
+        return true;
+    }
+    return false;
+}

package/generated/internal/utils/sleep.d.ts

@@ -0,0 +1 @@
+export default function (ms: number): Promise<void>;

package/generated/internal/utils/sleep.js

@@ -0,0 +1,3 @@
+export default function (ms) {
+    return new Promise((r) => self.setTimeout(r, ms));
+}

package/generated/internal/utils/slow-hide-show.d.ts

@@ -0,0 +1 @@
+export default function (to: 'show' | 'hide', el?: HTMLElement): void;

package/generated/internal/utils/slow-hide-show.js

@@ -0,0 +1,16 @@
+import frame from './frame';
+export default function (to, el) {
+    const transcleanup = ({ propertyName }) => {
+        if ('opacity' !== propertyName)
+            return;
+        el?.removeAttribute('slow');
+    };
+    for (const eventType of ['transitionend', 'transitioncancel'])
+        el?.addEventListener(eventType, transcleanup, {
+            once: true,
+        });
+    el?.setAttribute('slow', '');
+    frame(el).then(() => {
+        el?.setAttribute('slow', to);
+    }); //self.requestAnimationFrame(() => el?.setAttribute('slow', to))
+}

package/generated/internal/utils/timeout.d.ts

@@ -0,0 +1,5 @@
+export default function (): {
+    next: (fn: () => void, ms: number) => void;
+    cancel: () => void;
+    pending: () => boolean;
+};

package/generated/internal/utils/timeout.js

@@ -0,0 +1,16 @@
+export default function () {
+    let id;
+    const cancel = () => {
+        if (!id)
+            return;
+        self.clearTimeout(id);
+        id = undefined;
+    }, next = (fn, ms) => {
+        cancel();
+        id = self.setTimeout(() => {
+            fn();
+            id = undefined;
+        }, ms);
+    }, pending = () => undefined !== id;
+    return { next, cancel, pending };
+}

package/generated/internal/utils/touch-glass.d.ts

@@ -0,0 +1,7 @@
+export default function (t: HTMLElement, targetCallback: (target: HTMLElement) => HTMLElement, checkCallback: (evt: PointerEvent) => boolean): {
+    types: string;
+    listener: EventListener;
+    addOptions: {
+        passive: boolean;
+    };
+}[];

package/generated/internal/utils/touch-glass.js

@@ -0,0 +1,19 @@
+const makePointerDownHandler = (target, targetCallback, checkCallback) => {
+    return function (evt) {
+        // if (event.pointerType !== 'touch')  return
+        if (!checkCallback(evt))
+            return;
+        targetCallback(target).toggleAttribute('touch-glass', true);
+    };
+}, makePointerCancelHandler = (target, targetCallback) => {
+    return function (evt) {
+        targetCallback(target).toggleAttribute('touch-glass', false);
+    };
+};
+export default function (t, targetCallback, checkCallback) {
+    const onListener = makePointerDownHandler(t, targetCallback, checkCallback), offListener = makePointerCancelHandler(t, targetCallback);
+    return [
+        { types: 'pointerdown', listener: onListener, addOptions: { passive: true } },
+        { types: 'pointerup pointercancel pointerleave', listener: offListener, addOptions: { passive: true } },
+    ];
+}

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

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

package/generated/lifecycle-observer/index.js

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

package/generated/namespace-browser/base.d.ts

@@ -0,0 +1,36 @@
+export declare abstract class DialogBase extends HTMLDialogElement {
+    static polyfillExtends: "dialog";
+    static polyfillConnectedCallback(el: HTMLDialogElement): void;
+    static polyfillDisconnectedCallback(el: HTMLDialogElement): void;
+    static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+export declare abstract class ButtonBase extends HTMLButtonElement {
+    static polyfillExtends: "button";
+    static polyfillConnectedCallback(el: HTMLButtonElement): void;
+    static polyfillDisconnectedCallback(el: HTMLButtonElement): void;
+    static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+export declare abstract class DetailsBase extends HTMLDetailsElement {
+    static polyfillExtends: "details";
+    static polyfillConnectedCallback(el: HTMLDetailsElement): void;
+    static polyfillDisconnectedCallback(el: HTMLDetailsElement): void;
+    static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+export declare abstract class FormBase extends HTMLFormElement {
+    static polyfillExtends: "form";
+    static polyfillConnectedCallback(el: HTMLFormElement): void;
+    static polyfillDisconnectedCallback(el: HTMLFormElement): void;
+    static polyfillAttributeChangedCallback(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}

package/generated/namespace-browser/base.js

@@ -0,0 +1,92 @@
+export class DialogBase extends HTMLDialogElement {
+    static polyfillExtends = 'dialog';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
+    disconnectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillConnectedCallback(this);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        const ctor = this.constructor;
+        const entry = {
+            attributeName: name,
+            oldValue,
+            target: this,
+        };
+        ctor.polyfillAttributeChangedCallback([entry]);
+    }
+}
+export class ButtonBase extends HTMLButtonElement {
+    static polyfillExtends = 'button';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
+    disconnectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillConnectedCallback(this);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        const ctor = this.constructor;
+        const entry = {
+            attributeName: name,
+            oldValue,
+            target: this,
+        };
+        ctor.polyfillAttributeChangedCallback([entry]);
+    }
+}
+export class DetailsBase extends HTMLDetailsElement {
+    static polyfillExtends = 'details';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
+    disconnectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillConnectedCallback(this);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        const ctor = this.constructor;
+        const entry = {
+            attributeName: name,
+            oldValue,
+            target: this,
+        };
+        ctor.polyfillAttributeChangedCallback([entry]);
+    }
+}
+export class FormBase extends HTMLFormElement {
+    static polyfillExtends = 'form';
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisconnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { } //MutationRecord[]) {}
+    disconnectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        const ctor = this.constructor;
+        ctor.polyfillConnectedCallback(this);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        const ctor = this.constructor;
+        const entry = {
+            attributeName: name,
+            oldValue,
+            target: this,
+        };
+        ctor.polyfillAttributeChangedCallback([entry]);
+    }
+}

package/generated/namespace-browser/index.d.ts

@@ -0,0 +1,7 @@
+export type WebComponentCtor = typeof HTMLElement & {
+    observedAttributes?: string[];
+    polyfillExtends?: string;
+    polyfillConnectedCallback(el: HTMLElement): void;
+    polyfillDisconnectedCallback(el: HTMLElement): void;
+    polyfillAttributeChangedCallback?(entries: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+};

package/generated/namespace-browser/index.js

@@ -0,0 +1 @@
+export {};

package/generated/snapshot/index.d.ts

@@ -1,16 +1,7 @@
-import type * as Components from '../components';
 export declare class Snapshot {
     #private;
+    static readonly waitReady: Promise<[unknown, void]>;
+    static waitReadyFor<T extends HTMLElement>(element: T): Promise<T | null>;
     static get config(): Record<string, string> | undefined;
     static setOwnConfig(): Promise<void>;
-    static get parent(): Components.ScrollView | undefined;
-    static get root(): HTMLElement | undefined;
-    static get leaf(): Components.ScrollView | undefined;
-    static get parentContainer(): HTMLElement | undefined;
-    static get leafContainer(): HTMLElement | undefined;
-    static get container(): HTMLElement | undefined;
-    static get toolbarItems(): NodeListOf<Element> | undefined;
-    static get parentToolbarItems(): NodeListOf<Element> | undefined;
-    static get leafToolbarItems(): NodeListOf<Element> | undefined;
-    static getSnapshot(scrollView?: Components.ScrollView): void;
 }

package/generated/snapshot/index.js

@@ -1,150 +1,37 @@
-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_config, _Snapshot_getOwnConfig, _Snapshot_parent, _Snapshot_leaf, _Snapshot_root, _Snapshot_parentContainer, _Snapshot_container, _Snapshot_leafContainer, _Snapshot_parentToolbarItems, _Snapshot_toolbarItems, _Snapshot_leafToolbarItems, _Snapshot_queryScrollViewRels;
 export class Snapshot {
+    static #readyCalled = false;
+    static #config;
+    static waitReady = Promise.all([
+        'complete' === document.readyState ? Promise.resolve() : new Promise((r) => self.addEventListener('load', r, { once: true })),
+        (async () => {
+            if (!this.#readyCalled)
+                await this.setOwnConfig();
+        })(), // Lazy config read promise, triggered on first access
+    ]);
+    static async waitReadyFor(element) {
+        if (!element.isConnected)
+            return null;
+        await this.waitReady;
+        return element.isConnected ? element : null;
+    }
     static get config() {
-        return __classPrivateFieldGet(this, _a, "f", _Snapshot_config);
+        return this.#config;
     }
     static async setOwnConfig() {
-        if ('complete' === document.readyState)
-            return __classPrivateFieldGet(_a, _a, "m", _Snapshot_getOwnConfig).call(_a); // Page already loaded
-        await new Promise((resolve) => self.addEventListener('load', resolve)); // Wait for window load
-        return __classPrivateFieldGet(_a, _a, "m", _Snapshot_getOwnConfig).call(_a);
-    }
-    static get parent() {
-        return __classPrivateFieldGet(this, _a, "f", _Snapshot_parent);
-    }
-    static get root() {
-        return __classPrivateFieldGet(this, _a, "f", _Snapshot_root);
-    }
-    static get leaf() {
-        return __classPrivateFieldGet(this, _a, "f", _Snapshot_leaf);
-    }
-    static get parentContainer() {
-        return __classPrivateFieldGet(this, _a, "f", _Snapshot_parentContainer);
-    }
-    static get leafContainer() {
-        return __classPrivateFieldGet(this, _a, "f", _Snapshot_leafContainer);
-    }
-    static get container() {
-        return __classPrivateFieldGet(this, _a, "f", _Snapshot_container);
-    }
-    static get toolbarItems() {
-        return __classPrivateFieldGet(this, _a, "f", _Snapshot_toolbarItems);
-    }
-    static get parentToolbarItems() {
-        return __classPrivateFieldGet(this, _a, "f", _Snapshot_parentToolbarItems);
-    }
-    static get leafToolbarItems() {
-        return __classPrivateFieldGet(this, _a, "f", _Snapshot_leafToolbarItems);
-    }
-    static getSnapshot(scrollView) {
-        console.debug(`${_a.name} ⚡️ getSnapshot`);
-        // root
-        for (let e = scrollView; e; e = e.parentElement)
-            e.matches('navigation-stack,navigation-split-view') && (__classPrivateFieldSet(this, _a, e, "f", _Snapshot_root));
-        // current
-        const { frame, toolbarElements: toolbarItems } = __classPrivateFieldGet(this, _a, "f", _Snapshot_queryScrollViewRels).call(this, scrollView);
-        __classPrivateFieldSet(this, _a, frame, "f", _Snapshot_container);
-        __classPrivateFieldSet(this, _a, toolbarItems, "f", _Snapshot_toolbarItems);
-        // parent
-        const possibleParent = __classPrivateFieldGet(this, _a, "f", _Snapshot_container)?.parentElement;
-        __classPrivateFieldSet(this, _a, possibleParent?.querySelector(`:scope > scroll-view,:scope > [is=sidebar-view] > scroll-view`) ?? undefined, "f", _Snapshot_parent); //const sv2 = pr.parentElement.querySelector(`:scope > scroll-view`) //pr.previousElementSibling
-        const { frame: parentFrame, toolbarElements: parentToolbarItems } = __classPrivateFieldGet(this, _a, "f", _Snapshot_queryScrollViewRels).call(this, __classPrivateFieldGet(this, _a, "f", _Snapshot_parent));
-        __classPrivateFieldSet(this, _a, parentFrame, "f", _Snapshot_parentContainer);
-        __classPrivateFieldSet(this, _a, parentToolbarItems, "f", _Snapshot_parentToolbarItems);
-        // const possibleParent =
-        //     this.#container?.parentElement?.querySelector<HTMLElement>(
-        //       `:scope > scroll-view,:scope > [is=sidebar-view] > scroll-view`
-        //     ) ?? undefined, //const sv2 = pr.parentElement.querySelector(`:scope > scroll-view`) //pr.previousElementSibling
-        //   {
-        //     landmark: parentLm,
-        //     frame: parentFrame,
-        //     toolbarElements: parentToolbarItems,
-        //   } = this.#queryScrollViewRels(possibleParent)
-        // this.#parent = parentLm
-        // this.#parentContainer = parentFrame
-        // this.#parentToolbarItems = parentToolbarItems
-        // detect children
-        let possibleNest = scrollView?.nextElementSibling;
-        if ('NAVIGATION-SPLIT-VIEW' === __classPrivateFieldGet(this, _a, "f", _Snapshot_root)?.tagName)
-            if (scrollView?.matches(`navigation-split-view > scroll-view${null !== __classPrivateFieldGet(this, _a, "f", _Snapshot_root).querySelector(':scope > [is=sidebar-view]') ? ',navigation-split-view > [is=sidebar-view] > scroll-view,navigation-split-view > body-view > scroll-view' : ''}`))
-                possibleNest = (scrollView?.parentElement?.matches('dialog[is=sidebar-view]')
-                    ? scrollView?.parentElement
-                    : scrollView)?.previousElementSibling; // look for prev sibling instead
-        // const possibleNest = scrollView?.nextElementSibling as HTMLElement | null
-        __classPrivateFieldSet(this, _a, [
-            ...(possibleNest?.querySelectorAll('scroll-view:not(navigation-stack[hidden] scroll-view,navigation-split-view[hidden] scroll-view)') ?? []),
-        ]?.pop?.(), "f", _Snapshot_leaf); //'navigation-stack:not([hidden]) scroll-view'
-        const { frame: leafFrame, toolbarElements: leafToolbarItems } = __classPrivateFieldGet(this, _a, "f", _Snapshot_queryScrollViewRels).call(this, __classPrivateFieldGet(this, _a, "f", _Snapshot_leaf));
-        __classPrivateFieldSet(this, _a, leafFrame, "f", _Snapshot_leafContainer);
-        __classPrivateFieldSet(this, _a, leafToolbarItems, "f", _Snapshot_leafToolbarItems);
-        // const {
-        //   landmark: leafLm,
-        //   frame: leafFrame,
-        //   toolbarElements: leafToolbarItems,
-        // } = this.#queryScrollViewRels(
-        //   [
-        //     ...(possibleNest?.querySelectorAll<Components.ScrollView>(
-        //       'scroll-view:not(navigation-stack[hidden] scroll-view,navigation-split-view[hidden] scroll-view)'
-        //     ) ?? []),
-        //   ]?.pop?.()
-        // ) //'navigation-stack:not([hidden]) scroll-view'
-        // this.#leaf = leafLm
-        // this.#leafContainer = leafFrame
-        // this.#leafToolbarItems = leafToolbarItems
-        console.debug(`${__classPrivateFieldGet(this, _a, "f", _Snapshot_root)?.tagName}
-      / \\
-     B   ${__classPrivateFieldGet(this, _a, "f", _Snapshot_parentContainer)?.tagName}
-        / \\
-       D   ${__classPrivateFieldGet(this, _a, "f", _Snapshot_container)?.tagName}
-          / \\
-         H   ${__classPrivateFieldGet(this, _a, "f", _Snapshot_leafContainer)?.tagName}
-`);
-        // this.#childFrame = ['BODY-VIEW', 'NAVIGATION-STACK'].includes(
-        //   possibleNest?.tagName ?? ''
-        // )
-        //   ? (possibleNest ?? undefined)
-        //   : undefined
-        // this.#childToolbarItems = this.#childFrame?.querySelectorAll(
-        //   `:scope > navigation-bar > tool-bar-item,:scope > bottom-bar > tool-bar-item`
-        // )
+        if (!this.#readyCalled)
+            this.#readyCalled = true;
+        if ('complete' !== document.readyState)
+            await new Promise((r) => self.addEventListener('load', r, { once: true }));
+        this.#getOwnConfig();
+    }
+    static #getOwnConfig() {
+        const style = self.getComputedStyle(document.documentElement, '::before'), content = style.getPropertyValue('content'), unquoted = content.replace(/^"(.*)"$/, '$1'); // Remove quotes around the content
+        try {
+            this.#config = Object.fromEntries(new URLSearchParams(unquoted).entries()); // {"none": ""}
+        }
+        catch {
+            console.error('could-not-parse-config');
+        }
+        console.debug(this.#config);
     }
 }
-_a = Snapshot, _Snapshot_getOwnConfig = function _Snapshot_getOwnConfig() {
-    const style = getComputedStyle(document.documentElement, '::before'), content = style.getPropertyValue('content'), unquoted = content.replace(/^"(.*)"$/, '$1'); // Remove quotes around the content
-    try {
-        __classPrivateFieldSet(this, _a, Object.fromEntries(new URLSearchParams(unquoted).entries()), "f", _Snapshot_config); // {"none": ""}
-    }
-    catch {
-        console.error('could-not-parse-config');
-    }
-    console.debug(__classPrivateFieldGet(this, _a, "f", _Snapshot_config));
-};
-_Snapshot_config = { value: void 0 };
-//////
-_Snapshot_parent = { value: void 0 };
-_Snapshot_leaf = { value: void 0 };
-_Snapshot_root = { value: void 0 };
-_Snapshot_parentContainer = { value: void 0 };
-_Snapshot_container = { value: void 0 };
-_Snapshot_leafContainer = { value: void 0 };
-_Snapshot_parentToolbarItems = { value: void 0 };
-_Snapshot_toolbarItems = { value: void 0 };
-_Snapshot_leafToolbarItems = { value: void 0 };
-_Snapshot_queryScrollViewRels = { value: (sv) => {
-        const isSidebarWrapped = sv?.parentElement?.matches('dialog[is=sidebar-view]');
-        return {
-            frame: (isSidebarWrapped ? sv?.parentElement : sv)?.parentElement ?? undefined,
-            toolbarElements: sv?.parentElement?.querySelectorAll(`:scope > navigation-bar > tool-bar-item,:scope > bottom-bar > tool-bar-item,:scope > navigation-bar > tool-bar-item-group,:scope > bottom-bar > tool-bar-item-group`),
-        };
-    } };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.7",
+  "version": "0.0.0-dev.8",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -20,7 +20,8 @@
   },
   "files": [
     "generated",
-    "scss"
+    "scss",
+    "web-components.html-data"
   ],
   "sass": "scss/index.scss",
   "keywords": [
@@ -42,9 +43,10 @@
       "types": "./generated/client/index.d.ts",
       "default": "./generated/client/index.js"
     },
-    "./styles.css": "./generated/styles.css",
+    "./css": "./generated/css/index.css",
     "./scss": "./scss/index.scss",
-    "./scss/*": "./scss/*.scss"
+    "./scss/*": "./scss/*.scss",
+    "./customElements/en": "./custom-elements/en.json"
   },
   "bin": {
     "swiftwc": "./generated/index.js"
@@ -54,11 +56,20 @@
     "build": "npm run build:ts && npm run build:scss",
     "build:ts:watch": "npm run prebuild && tsc --watch",
     "build:ts": "tsc",
-    "build:scss": "sass --no-source-map scss/index.scss generated/styles.css",
+    "build:scss": "sass --style=expanded --no-source-map scss/index.scss generated/css/index.css",
+    "build:manifest": "tsx scripts/make-manifest.ts",
+    "build:barrels": "barrelsby -D -q -S -d ./js/components -e \".\\.test\\.ts\"",
     "format:check": "prettier . --check",
-    "format:write": "prettier . --write"
+    "format:write": "prettier . --write",
+    "test": "vitest --dom"
   },
   "devDependencies": {
-    "sass": "^1.97.2"
-  }
+    "doctrine": "^3.0.0",
+    "happy-dom": "^20.7.0",
+    "sass": "^1.98.0",
+    "ts-morph": "^28.0.0",
+    "tsx": "^4.21.0",
+    "vitest": "^4.0.18"
+  },
+  "customElements": "custom-elements/en.json"
 }

package/scss/_components.scss

@@ -4,36 +4,72 @@
 
 @forward 'components/disclosure-group';
 
-@forward 'components/body-view';
-
-@forward 'components/tab-view';
-
-@forward 'components/tab-bar';
-
-@forward 'components/tab-bar-stack';
-
-@forward 'components/sidebar-toggle';
+@forward 'components/h-divider';
+@forward 'components/v-divider';
 
 @forward 'components/full-screen';
 
-@forward 'components/sheet-view';
-
-@forward 'components/navigation-stack';
+@forward 'components/detail-placeholder';
 
-@forward 'components/navigation-split-view';
+@forward 'components/sticky-container';
 
-@forward 'components/toolbars';
+@forward 'components/sheet-view';
 
-@forward 'components/sidebar-view';
+@forward 'components/confirmation-dialog';
 
 @forward 'components/scroll-view';
+@forward 'components/scroll-view-proxy';
 
+@forward 'components/h-stack';
 @forward 'components/v-stack';
+@forward 'components/v-flex-stack';
 
-@forward 'components/tool-bar';
+@forward 'components/scroll-view-toolbars';
 
 @forward 'components/tool-bar-item';
 
 @forward 'components/tool-bar-item-group';
 
+@forward 'components/plain-button';
 @forward 'components/borderless-button';
+@forward 'components/bordered-button';
+@forward 'components/bordered-prominent-button';
+@forward 'components/glass-button';
+@forward 'components/glass-prominent-button';
+
+@forward 'components/tool-bar';
+
+@forward 'components/label-view';
+
+@forward 'components/labeled-content';
+
+// @forward 'components/button-view';
+
+@forward 'components/body-view';
+
+@forward 'components/navigation-large-title';
+@forward 'components/navigation-title';
+
+@forward 'components/sidebar-toggle';
+
+@forward 'components/menu-view';
+
+@forward 'components/sidebar-view';
+
+@forward 'components/list-view';
+@forward 'components/form-view';
+@forward 'components/section-view';
+@forward 'components/table-view';
+@forward 'components/table-row';
+@forward 'components/table-column';
+
+@forward 'components/text-field';
+@forward 'components/date-picker';
+@forward 'components/picker-view';
+
+@forward 'components/navigation-stack';
+@forward 'components/navigation-split-view';
+
+@forward 'components/tab-view';
+@forward 'components/tab-bar';
+@forward 'components/tab-item';

package/scss/_final.scss

@@ -0,0 +1 @@
+@forward 'final/touch-glass';