vira 0.0.0 → 0.1.0

package/LICENSE-CC0

@@ -0,0 +1,121 @@
+CC0 1.0 Universal
+
+Creative Commons Legal Code
+
+    CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE
+    LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN
+    ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS
+    INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES
+    REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS
+    PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM
+    THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED
+    HEREUNDER.
+
+Statement of Purpose
+
+The laws of most jurisdictions throughout the world automatically confer
+exclusive Copyright and Related Rights (defined below) upon the creator
+and subsequent owner(s) (each and all, an "owner") of an original work of
+authorship and/or a database (each, a "Work").
+
+Certain owners wish to permanently relinquish those rights to a Work for
+the purpose of contributing to a commons of creative, cultural and
+scientific works ("Commons") that the public can reliably and without fear
+of later claims of infringement build upon, modify, incorporate in other
+works, reuse and redistribute as freely as possible in any form whatsoever
+and for any purposes, including without limitation commercial purposes.
+These owners may contribute to the Commons to promote the ideal of a free
+culture and the further production of creative, cultural and scientific
+works, or to gain reputation or greater distribution for their Work in
+part through the use and efforts of others.
+
+For these and/or other purposes and motivations, and without any
+expectation of additional consideration or compensation, the person
+associating CC0 with a Work (the "Affirmer"), to the extent that he or she
+is an owner of Copyright and Related Rights in the Work, voluntarily
+elects to apply CC0 to the Work and publicly distribute the Work under its
+terms, with knowledge of his or her Copyright and Related Rights in the
+Work and the meaning and intended legal effect of CC0 on those rights.
+
+1. Copyright and Related Rights. A Work made available under CC0 may be
+protected by copyright and related or neighboring rights ("Copyright and
+Related Rights"). Copyright and Related Rights include, but are not
+limited to, the following:
+
+  i. the right to reproduce, adapt, distribute, perform, display,
+     communicate, and translate a Work;
+ ii. moral rights retained by the original author(s) and/or performer(s);
+iii. publicity and privacy rights pertaining to a person's image or
+     likeness depicted in a Work;
+ iv. rights protecting against unfair competition in regards to a Work,
+     subject to the limitations in paragraph 4(a), below;
+  v. rights protecting the extraction, dissemination, use and reuse of data
+     in a Work;
+ vi. database rights (such as those arising under Directive 96/9/EC of the
+     European Parliament and of the Council of 11 March 1996 on the legal
+     protection of databases, and under any national implementation
+     thereof, including any amended or successor version of such
+     directive); and
+vii. other similar, equivalent or corresponding rights throughout the
+     world based on applicable law or treaty, and any national
+     implementations thereof.
+
+2. Waiver. To the greatest extent permitted by, but not in contravention
+of, applicable law, Affirmer hereby overtly, fully, permanently,
+irrevocably and unconditionally waives, abandons, and surrenders all of
+Affirmer's Copyright and Related Rights and associated claims and causes
+of action, whether now known or unknown (including existing as well as
+future claims and causes of action), in the Work (i) in all territories
+worldwide, (ii) for the maximum duration provided by applicable law or
+treaty (including future time extensions), (iii) in any current or future
+medium and for any number of copies, and (iv) for any purpose whatsoever,
+including without limitation commercial, advertising or promotional
+purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each
+member of the public at large and to the detriment of Affirmer's heirs and
+successors, fully intending that such Waiver shall not be subject to
+revocation, rescission, cancellation, termination, or any other legal or
+equitable action to disrupt the quiet enjoyment of the Work by the public
+as contemplated by Affirmer's express Statement of Purpose.
+
+3. Public License Fallback. Should any part of the Waiver for any reason
+be judged legally invalid or ineffective under applicable law, then the
+Waiver shall be preserved to the maximum extent permitted taking into
+account Affirmer's express Statement of Purpose. In addition, to the
+extent the Waiver is so judged Affirmer hereby grants to each affected
+person a royalty-free, non transferable, non sublicensable, non exclusive,
+irrevocable and unconditional license to exercise Affirmer's Copyright and
+Related Rights in the Work (i) in all territories worldwide, (ii) for the
+maximum duration provided by applicable law or treaty (including future
+time extensions), (iii) in any current or future medium and for any number
+of copies, and (iv) for any purpose whatsoever, including without
+limitation commercial, advertising or promotional purposes (the
+"License"). The License shall be deemed effective as of the date CC0 was
+applied by Affirmer to the Work. Should any part of the License for any
+reason be judged legally invalid or ineffective under applicable law, such
+partial invalidity or ineffectiveness shall not invalidate the remainder
+of the License, and in such case Affirmer hereby affirms that he or she
+will not (i) exercise any of his or her remaining Copyright and Related
+Rights in the Work or (ii) assert any associated claims and causes of
+action with respect to the Work, in either case contrary to Affirmer's
+express Statement of Purpose.
+
+4. Limitations and Disclaimers.
+
+ a. No trademark or patent rights held by Affirmer are waived, abandoned,
+    surrendered, licensed or otherwise affected by this document.
+ b. Affirmer offers the Work as-is and makes no representations or
+    warranties of any kind concerning the Work, express, implied,
+    statutory or otherwise, including without limitation warranties of
+    title, merchantability, fitness for a particular purpose, non
+    infringement, or the absence of latent or other defects, accuracy, or
+    the present or absence of errors, whether or not discoverable, all to
+    the greatest extent permissible under applicable law.
+ c. Affirmer disclaims responsibility for clearing rights of other persons
+    that may apply to the Work or any use thereof, including without
+    limitation any person's Copyright and Related Rights in the Work.
+    Further, Affirmer disclaims responsibility for obtaining any necessary
+    consents, permissions or other rights required for any use of the
+    Work.
+ d. Affirmer understands and acknowledges that Creative Commons is not a
+    party to this document and has no duty or obligation with respect to
+    this CC0 or use of the Work.

package/LICENSE-MIT

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 electrovir
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/element-book/all-element-book-entries.d.ts

@@ -0,0 +1 @@
+export declare const allElementBookEntries: (import("element-book").ElementBookChapter | import("element-book").ElementBookPage<{}>)[];

package/dist/element-book/all-element-book-entries.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.allElementBookEntries = void 0;
+const elements_book_1 = require("../elements/elements.book");
+const vira_button_element_book_1 = require("../elements/vira-button/vira-button.element.book");
+const vira_icon_element_book_1 = require("../elements/vira-icon/vira-icon.element.book");
+const icons_book_1 = require("../icons/icons.book");
+exports.allElementBookEntries = [
+    elements_book_1.elementsBookChapter,
+    ...icons_book_1.iconBookEntries,
+    ...vira_button_element_book_1.viraButtonBookEntries,
+    ...vira_icon_element_book_1.viraIconBookEntries,
+];

package/dist/element-book/book-helpers/create-element-book-url.d.ts

@@ -0,0 +1 @@
+export declare function createElementBookUrl(...urlParts: ReadonlyArray<string>): string;

package/dist/element-book/book-helpers/create-element-book-url.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createElementBookUrl = void 0;
+const common_1 = require("@augment-vir/common");
+const potentialBasePath = '/vira';
+function createElementBookUrl(...urlParts) {
+    const hasBasePath = globalThis.location.pathname.startsWith(potentialBasePath);
+    const allParts = [
+        hasBasePath ? potentialBasePath : '',
+        ...urlParts,
+    ].filter(common_1.isTruthy);
+    return (0, common_1.joinUrlParts)(...allParts);
+}
+exports.createElementBookUrl = createElementBookUrl;

package/dist/element-book/vira-book-app.element.d.ts

@@ -0,0 +1 @@
+export declare const ViraBookApp: import("element-vir").DeclarativeElementDefinition<"vira-book-app", {}, {}, {}, "vira-book-app-", "vira-book-app-", import("lit-html").HTMLTemplateResult>;

package/dist/element-book/vira-book-app.element.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViraBookApp = void 0;
+const element_book_1 = require("element-book");
+const element_vir_1 = require("element-vir");
+const all_element_book_entries_1 = require("./all-element-book-entries");
+exports.ViraBookApp = (0, element_vir_1.defineElementNoInputs)({
+    tagName: 'vira-book-app',
+    styles: (0, element_vir_1.css) `
+        :host {
+            display: block;
+            height: 100%;
+            width: 100%;
+        }
+
+        ${element_book_1.ElementBookApp} {
+            height: 100%;
+            width: 100%;
+        }
+
+        h1 {
+            margin: 0;
+            margin-bottom: 16px;
+            padding: 0;
+            margin-left: 16px;
+        }
+    `,
+    renderCallback() {
+        return (0, element_vir_1.html) `
+            <${element_book_1.ElementBookApp}
+                ${(0, element_vir_1.assign)(element_book_1.ElementBookApp, {
+            internalRouterConfig: {
+                basePath: 'vira',
+                useInternalRouter: true,
+            },
+            entries: all_element_book_entries_1.allElementBookEntries,
+            themeColor: '#33ccff',
+        })}
+            >
+                <h1 slot=${element_book_1.ElementBookSlotName.NavHeader}>Vira</h1>
+            </${element_book_1.ElementBookApp}>
+        `;
+    },
+});

package/dist/elements/define-vira-element.d.ts

@@ -0,0 +1,3 @@
+export declare const ViraTagNamePrefix = "vira-";
+export type ViraTagName = `${typeof ViraTagNamePrefix}${string}`;
+export declare const defineViraElement: <InputsGeneric extends {}>() => <TagName extends `vira-${string}`, StateInit extends {}, EventsInit extends {}, HostClassKeys extends `${TagName}-${string}`, CssVarKeys extends `${TagName}-${string}`, RenderOutput extends any>(inputs: import("element-vir").DeclarativeElementInit<TagName, InputsGeneric, StateInit, EventsInit, HostClassKeys, CssVarKeys, RenderOutput>) => import("element-vir").DeclarativeElementDefinition<TagName, InputsGeneric, StateInit, EventsInit, HostClassKeys, CssVarKeys, RenderOutput>, defineViraElementNoInputs: <TagName_1 extends `vira-${string}`, Inputs extends {}, StateInit_1 extends {}, EventsInit_1 extends {}, HostClassKeys_1 extends `${TagName_1}-${string}`, CssVarKeys_1 extends `${TagName_1}-${string}`, RenderOutput_1 extends any>(inputs: import("element-vir").DeclarativeElementInit<TagName_1, Inputs, StateInit_1, EventsInit_1, HostClassKeys_1, CssVarKeys_1, RenderOutput_1>) => import("element-vir").DeclarativeElementDefinition<TagName_1, Inputs, StateInit_1, EventsInit_1, HostClassKeys_1, CssVarKeys_1, RenderOutput_1>;

package/dist/elements/define-vira-element.js

@@ -0,0 +1,13 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineViraElementNoInputs = exports.defineViraElement = exports.ViraTagNamePrefix = void 0;
+const element_vir_1 = require("element-vir");
+exports.ViraTagNamePrefix = `vira-`;
+_a = (0, element_vir_1.wrapDefineElement)({
+    assertInputs: (inputs) => {
+        if (!inputs.tagName.startsWith(exports.ViraTagNamePrefix)) {
+            throw new Error(`Tag name should start with '${exports.ViraTagNamePrefix}' but got '${inputs.tagName}'`);
+        }
+    },
+}), exports.defineViraElement = _a.defineElement, exports.defineViraElementNoInputs = _a.defineElementNoInputs;

package/dist/elements/index.d.ts

@@ -0,0 +1,4 @@
+/** This file is automatically updated by update-element-exports.ts */
+export * from './define-vira-element';
+export * from './vira-button/vira-button.element';
+export * from './vira-icon/vira-icon.element';

package/dist/elements/index.js

@@ -0,0 +1,20 @@
+"use strict";
+/** This file is automatically updated by update-element-exports.ts */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./define-vira-element"), exports);
+__exportStar(require("./vira-button/vira-button.element"), exports);
+__exportStar(require("./vira-icon/vira-icon.element"), exports);

package/dist/elements/vira-button/vira-button.element.d.ts

@@ -0,0 +1,11 @@
+import { ViraIconSvg } from '../../icons';
+export declare enum ViraButtonStyleEnum {
+    Default = "vira-button-default",
+    Outline = "vira-button-outline"
+}
+export declare const ViraButton: import("element-vir").DeclarativeElementDefinition<"vira-button", {
+    text?: string;
+    icon?: undefined | ViraIconSvg;
+    disabled?: boolean | undefined;
+    buttonStyle?: ViraButtonStyleEnum | undefined;
+}, {}, {}, "vira-button-outline-style" | "vira-button-disabled", "vira-button-primary-color" | "vira-button-primary-hover-color" | "vira-button-primary-active-color" | "vira-button-secondary-color" | "vira-button-internal-foreground-color" | "vira-button-internal-background-color", import("lit-html").HTMLTemplateResult>;

package/dist/elements/vira-button/vira-button.element.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViraButton = exports.ViraButtonStyleEnum = void 0;
+const element_vir_1 = require("element-vir");
+const styles_1 = require("../../styles");
+const disabled_1 = require("../../styles/disabled");
+const durations_1 = require("../../styles/durations");
+const focus_1 = require("../../styles/focus");
+const native_styles_1 = require("../../styles/native-styles");
+const define_vira_element_1 = require("../define-vira-element");
+const vira_icon_element_1 = require("../vira-icon/vira-icon.element");
+var ViraButtonStyleEnum;
+(function (ViraButtonStyleEnum) {
+    ViraButtonStyleEnum["Default"] = "vira-button-default";
+    ViraButtonStyleEnum["Outline"] = "vira-button-outline";
+})(ViraButtonStyleEnum = exports.ViraButtonStyleEnum || (exports.ViraButtonStyleEnum = {}));
+exports.ViraButton = (0, define_vira_element_1.defineViraElement)()({
+    tagName: 'vira-button',
+    hostClasses: {
+        'vira-button-outline-style': ({ inputs }) => inputs.buttonStyle === ViraButtonStyleEnum.Outline,
+        'vira-button-disabled': ({ inputs }) => !!inputs.disabled,
+    },
+    cssVars: {
+        /** On the default button style this is the background color. */
+        'vira-button-primary-color': '#0A89FF',
+        'vira-button-primary-hover-color': '#59B1FF',
+        'vira-button-primary-active-color': '#007FF6',
+        /** On the default button style this is the text color. */
+        'vira-button-secondary-color': 'white',
+        'vira-button-internal-foreground-color': '',
+        'vira-button-internal-background-color': '',
+    },
+    styles: ({ hostClasses, cssVars }) => (0, element_vir_1.css) `
+        :host {
+            font-weight: bold;
+            display: inline-flex;
+            position: relative;
+            vertical-align: middle;
+            align-items: center;
+            box-sizing: border-box;
+            ${styles_1.noUserSelect};
+            ${cssVars['vira-button-internal-background-color'].name}: ${cssVars['vira-button-primary-color'].value};
+            ${cssVars['vira-button-internal-foreground-color'].name}: ${cssVars['vira-button-secondary-color'].value};
+            ${focus_1.viraFocusCssVars['vira-focus-outline-color'].name}: ${cssVars['vira-button-primary-hover-color'].value}
+        }
+
+        :host(:hover) button,
+        button:hover {
+            ${cssVars['vira-button-internal-background-color'].name}: ${cssVars['vira-button-primary-hover-color'].value};
+        }
+
+        :host(:active) button,
+        button:active {
+            ${cssVars['vira-button-internal-background-color'].name}: ${cssVars['vira-button-primary-active-color'].value};
+        }
+
+        ${hostClasses['vira-button-disabled'].selector} {
+            ${disabled_1.viraDisabledStyles};
+        }
+
+        ${hostClasses['vira-button-outline-style'].selector} button {
+            color: ${cssVars['vira-button-internal-background-color'].value};
+            background-color: transparent;
+            border-color: currentColor;
+        }
+
+        button {
+            ${native_styles_1.removeNativeFormStyles};
+            position: relative;
+            width: 100%;
+            height: 100%;
+            outline: none;
+            border: 2px solid transparent;
+            box-sizing: border-box;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 8px;
+            background-color: ${cssVars['vira-button-internal-background-color'].value};
+            color: ${cssVars['vira-button-internal-foreground-color'].value};
+            padding: 5px 10px;
+            transition: color ${durations_1.viraAnimationDurations['vira-interaction-animation-duration'].value},
+                background-color
+                    ${durations_1.viraAnimationDurations['vira-interaction-animation-duration'].value},
+                border-color ${durations_1.viraAnimationDurations['vira-interaction-animation-duration'].value};
+        }
+
+        ${(0, focus_1.createFocusStyles)({
+        mainSelector: 'button:focus:focus-visible:not(:active)',
+        elementBorderSize: 2,
+    })}
+
+        button ${vira_icon_element_1.ViraIcon} + .text-template {
+            margin-left: 8px;
+        }
+    `,
+    renderCallback: ({ inputs }) => {
+        const iconTemplate = inputs.icon
+            ? (0, element_vir_1.html) `
+                  <${vira_icon_element_1.ViraIcon}
+                      ${(0, element_vir_1.assign)(vira_icon_element_1.ViraIcon, {
+                icon: inputs.icon,
+            })}
+                  ></${vira_icon_element_1.ViraIcon}>
+              `
+            : '';
+        const textTemplate = inputs.text
+            ? (0, element_vir_1.html) `
+                  <span class="text-template">${inputs.text}</span>
+              `
+            : '';
+        return (0, element_vir_1.html) `
+            <button>${iconTemplate} ${textTemplate}</button>
+        `;
+    },
+});

package/dist/elements/vira-icon/vira-icon.element.d.ts

@@ -0,0 +1,6 @@
+import { ViraIconSvg } from '../../icons/icon-svg';
+export declare const ViraIcon: import("element-vir").DeclarativeElementDefinition<"vira-icon", {
+    icon: ViraIconSvg | undefined;
+    /** Ignores the given icon's embedded size and causes the <svg> element to fill its parent. */
+    fitContainer?: boolean | undefined;
+}, {}, {}, "vira-icon-fit-container", `vira-icon-${string}`, import("lit-html").TemplateResult | "">;

package/dist/elements/vira-icon/vira-icon.element.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViraIcon = void 0;
+const element_vir_1 = require("element-vir");
+const icon_color_css_vars_1 = require("../../icons/icon-color-css-vars");
+const define_vira_element_1 = require("../define-vira-element");
+exports.ViraIcon = (0, define_vira_element_1.defineViraElement)()({
+    tagName: 'vira-icon',
+    hostClasses: {
+        /** Ignores the given icon's embedded size and causes the <svg> element to fill its parent. */
+        'vira-icon-fit-container': ({ inputs }) => !!inputs.fitContainer,
+    },
+    styles: ({ hostClasses }) => (0, element_vir_1.css) `
+        :host {
+            display: inline-block;
+            color: ${icon_color_css_vars_1.viraIconColorCssVars['vira-icon-color'].value};
+            fill: ${icon_color_css_vars_1.viraIconColorCssVars['vira-icon-fill-color'].value};
+            stroke: ${icon_color_css_vars_1.viraIconColorCssVars['vira-icon-stroke-color'].value};
+        }
+
+        svg {
+            /*
+                svg is set to inline by default which causes weird padding under the image.
+                See: https://stackoverflow.com/a/34952703
+            */
+            display: block;
+        }
+
+        ${hostClasses['vira-icon-fit-container'].selector} svg {
+            height: 100%;
+            width: 100%;
+        }
+    `,
+    renderCallback: ({ inputs }) => {
+        if (!inputs.icon) {
+            return '';
+        }
+        return inputs.icon.svgTemplate;
+    },
+});

package/dist/icons/icon-color-css-vars.d.ts

@@ -0,0 +1,5 @@
+export declare const viraIconColorCssVars: {
+    'vira-icon-stroke-color': import("lit-css-vars").SingleCssVarDefinition;
+    'vira-icon-fill-color': import("lit-css-vars").SingleCssVarDefinition;
+    'vira-icon-color': import("lit-css-vars").SingleCssVarDefinition;
+};

package/dist/icons/icon-color-css-vars.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.viraIconColorCssVars = void 0;
+const lit_css_vars_1 = require("lit-css-vars");
+const genericIconColorCssVar = (0, lit_css_vars_1.defineCssVars)({
+    /**
+     * Specifies the icon color as a whole. This will color both the icon stroke and icon fill
+     * colors unless those respective CSS vars are specifically overridden. This CSS var value
+     * defaults to "currentColor", so in most cases you don't even need to override this variable,
+     * you just need to change the icon's "color" property.
+     */
+    'vira-icon-color': 'currentColor',
+});
+const specificIconCssVars = (0, lit_css_vars_1.defineCssVars)({
+    /** To be used for coloring an icon's stroke. */
+    'vira-icon-stroke-color': genericIconColorCssVar['vira-icon-color'].value,
+    /** To be used for coloring an icon's fill. */
+    'vira-icon-fill-color': genericIconColorCssVar['vira-icon-color'].value,
+});
+exports.viraIconColorCssVars = { ...genericIconColorCssVar, ...specificIconCssVars };

package/dist/icons/icon-svg.d.ts

@@ -0,0 +1,9 @@
+import { TemplateResult } from 'element-vir';
+export type ViraIconSvg = {
+    name: string;
+    svgTemplate: TemplateResult;
+};
+export declare function defineIcon({ name, svgTemplate, }: {
+    name: string;
+    svgTemplate: TemplateResult;
+}): ViraIconSvg;

package/dist/icons/icon-svg.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineIcon = void 0;
+function defineIcon({ name, svgTemplate, }) {
+    const iconSvg = {
+        name,
+        svgTemplate,
+    };
+    return iconSvg;
+}
+exports.defineIcon = defineIcon;

package/dist/icons/icon-svgs/element-16.icon.d.ts

@@ -0,0 +1 @@
+export declare const Element16Icon: import("../icon-svg").ViraIconSvg;

package/dist/icons/icon-svgs/element-16.icon.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Element16Icon = void 0;
+const element_vir_1 = require("element-vir");
+const icon_svg_1 = require("../icon-svg");
+exports.Element16Icon = (0, icon_svg_1.defineIcon)({
+    name: 'Element16Icon',
+    svgTemplate: (0, element_vir_1.html) `
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xml:space="preserve"
+            fill="none"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            stroke-width="1px"
+        >
+            <path d="M4 5 1 8l3 3m8-6 3 3-3 3m-5 0 2-6" />
+        </svg>
+    `,
+});

package/dist/icons/icon-svgs/element-24.icon.d.ts

@@ -0,0 +1 @@
+export declare const Element24Icon: import("../icon-svg").ViraIconSvg;

package/dist/icons/icon-svgs/element-24.icon.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Element24Icon = void 0;
+const element_vir_1 = require("element-vir");
+const icon_svg_1 = require("../icon-svg");
+exports.Element24Icon = (0, icon_svg_1.defineIcon)({
+    name: 'Element24Icon',
+    svgTemplate: (0, element_vir_1.html) `
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xml:space="preserve"
+            viewBox="0 0 24 24"
+            fill="none"
+            width="24"
+            height="24"
+            stroke-width="1px"
+        >
+            <path d="m7 7-5 5 5 5M17 7l5 5-5 5m-6 0 2-10" />
+        </svg>
+    `,
+});

package/dist/icons/index.d.ts

@@ -0,0 +1,8 @@
+/** This file is automatically updated by update-icon-exports.ts */
+export * from './icon-svg';
+export * from './icon-svgs/element-16.icon';
+export * from './icon-svgs/element-24.icon';
+export declare const allIconsByName: {
+    readonly Element16Icon: import("./icon-svg").ViraIconSvg;
+    readonly Element24Icon: import("./icon-svg").ViraIconSvg;
+};

package/dist/icons/index.js

@@ -0,0 +1,27 @@
+"use strict";
+/** This file is automatically updated by update-icon-exports.ts */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.allIconsByName = void 0;
+const element_16_icon_1 = require("./icon-svgs/element-16.icon");
+const element_24_icon_1 = require("./icon-svgs/element-24.icon");
+__exportStar(require("./icon-svg"), exports);
+__exportStar(require("./icon-svgs/element-16.icon"), exports);
+__exportStar(require("./icon-svgs/element-24.icon"), exports);
+exports.allIconsByName = {
+    Element16Icon: element_16_icon_1.Element16Icon,
+    Element24Icon: element_24_icon_1.Element24Icon,
+};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './elements';
+export * from './icons';
+export * from './styles';
+export * from './util';

package/dist/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./elements"), exports);
+__exportStar(require("./icons"), exports);
+__exportStar(require("./styles"), exports);
+__exportStar(require("./util"), exports);

package/dist/styles/disabled.d.ts

@@ -0,0 +1 @@
+export declare const viraDisabledStyles: import("element-vir").CSSResult;

package/dist/styles/disabled.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.viraDisabledStyles = void 0;
+const element_vir_1 = require("element-vir");
+exports.viraDisabledStyles = (0, element_vir_1.css) `
+    pointer-events: none;
+    opacity: 0.3;
+`;

package/dist/styles/durations.d.ts

@@ -0,0 +1,10 @@
+export declare const viraAnimationDurations: import("lit-css-vars").CssVarDefinitions<{
+    /** A longer duration to emphasize the animation. */
+    'vira-pretty-animation-duration': string;
+    /**
+     * This duration is very short to ensure snappy responses to user interactions.
+     *
+     * A duration of 84ms gives us 5 frames on a 60Hz screen.
+     */
+    'vira-interaction-animation-duration': string;
+}>;

package/dist/styles/durations.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.viraAnimationDurations = void 0;
+const lit_css_vars_1 = require("lit-css-vars");
+exports.viraAnimationDurations = (0, lit_css_vars_1.defineCssVars)({
+    /** A longer duration to emphasize the animation. */
+    'vira-pretty-animation-duration': '300ms',
+    /**
+     * This duration is very short to ensure snappy responses to user interactions.
+     *
+     * A duration of 84ms gives us 5 frames on a 60Hz screen.
+     */
+    'vira-interaction-animation-duration': '84ms',
+});

package/dist/styles/focus.d.ts

@@ -0,0 +1,20 @@
+export declare const viraFocusCssVars: import("lit-css-vars").CssVarDefinitions<{
+    'vira-focus-outline-color': string;
+}>;
+/**
+ * Create styles that look like an outline for the given selector.
+ *
+ * It is recommended to use the pseudo selectors ":focus:focus-visible:not(:active)" to preventing
+ * clicking from creating focus styles in Chrome.
+ */
+export declare function createFocusStyles({ mainSelector, elementBorderSize, outlineGap, outlineWidth, }: {
+    mainSelector: string;
+    /**
+     * ElementBorderSize here is used to fix the outline when the element these styles are attached
+     * to has a border. The dev must specify that border size here for the offsets to be calculated
+     * correctly.
+     */
+    elementBorderSize: number;
+    outlineGap?: number;
+    outlineWidth?: number;
+}): import("element-vir").CSSResult;

package/dist/styles/focus.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createFocusStyles = exports.viraFocusCssVars = void 0;
+const element_vir_1 = require("element-vir");
+const lit_1 = require("lit");
+const lit_css_vars_1 = require("lit-css-vars");
+const number_1 = require("../util/number");
+exports.viraFocusCssVars = (0, lit_css_vars_1.defineCssVars)({
+    'vira-focus-outline-color': 'blue',
+});
+/**
+ * Create styles that look like an outline for the given selector.
+ *
+ * It is recommended to use the pseudo selectors ":focus:focus-visible:not(:active)" to preventing
+ * clicking from creating focus styles in Chrome.
+ */
+function createFocusStyles({ mainSelector, elementBorderSize, outlineGap = 2, outlineWidth = 3, }) {
+    const outlineSpacing = (0, lit_1.unsafeCSS)((0, number_1.toPixel)(outlineWidth + outlineGap + elementBorderSize));
+    return (0, element_vir_1.css) `
+        ${(0, lit_1.unsafeCSS)(mainSelector)}::after {
+            content: '';
+            top: calc(${outlineSpacing} * -1);
+            left: calc(${outlineSpacing} * -1);
+            position: absolute;
+            width: calc(100% + calc(${outlineSpacing} * 2));
+            height: calc(100% + calc(${outlineSpacing} * 2));
+            box-sizing: border-box;
+            pointer-events: none;
+            border: ${outlineWidth}px solid ${exports.viraFocusCssVars['vira-focus-outline-color'].value};
+            border-radius: 12px;
+            z-index: 100;
+        }
+    `;
+}
+exports.createFocusStyles = createFocusStyles;

package/dist/styles/index.d.ts

@@ -0,0 +1,5 @@
+export * from './disabled';
+export * from './durations';
+export * from './focus';
+export * from './native-styles';
+export * from './user-select';

package/dist/styles/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./disabled"), exports);
+__exportStar(require("./durations"), exports);
+__exportStar(require("./focus"), exports);
+__exportStar(require("./native-styles"), exports);
+__exportStar(require("./user-select"), exports);

package/dist/styles/native-styles.d.ts

@@ -0,0 +1 @@
+export declare const removeNativeFormStyles: import("element-vir").CSSResult;

package/dist/styles/native-styles.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeNativeFormStyles = void 0;
+const element_vir_1 = require("element-vir");
+exports.removeNativeFormStyles = (0, element_vir_1.css) `
+    background: none;
+    padding: 0;
+    margin: 0;
+    border: none;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    text-transform: inherit;
+    text-decoration: inherit;
+    -webkit-tap-highlight-color: transparent;
+`;

package/dist/styles/user-select.d.ts

@@ -0,0 +1 @@
+export declare const noUserSelect: import("element-vir").CSSResult;

package/dist/styles/user-select.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.noUserSelect = void 0;
+const element_vir_1 = require("element-vir");
+exports.noUserSelect = (0, element_vir_1.css) `
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
+`;

package/dist/util/index.d.ts

@@ -0,0 +1 @@
+export * from './number';

package/dist/util/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./number"), exports);

package/dist/util/number.d.ts

@@ -0,0 +1,2 @@
+export declare function toPixel(value: number): string;
+export declare function toPercent(value: number): string;

package/dist/util/number.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toPercent = exports.toPixel = void 0;
+function toPixel(value) {
+    return `${value}px`;
+}
+exports.toPixel = toPixel;
+function toPercent(value) {
+    return `${value}%`;
+}
+exports.toPercent = toPercent;

package/package.json

@@ -1,12 +1,50 @@
 {
-  "name": "vira",
-  "version": "0.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "MIT"
+    "name": "vira",
+    "version": "0.1.0",
+    "description": "",
+    "keywords": [],
+    "homepage": "https://github.com/electrovir/vira",
+    "bugs": {
+        "url": "https://github.com/electrovir/vira/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/electrovir/vira"
+    },
+    "license": "(MIT or CC0 1.0)",
+    "author": {
+        "name": "electrovir",
+        "url": "https://github.com/electrovir"
+    },
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "scripts": {
+        "build": "virmator frontend build",
+        "compile": "rm -rf dist && virmator compile",
+        "preview": "virmator frontend preview",
+        "start": "virmator frontend",
+        "test": "virmator test-web",
+        "test:all": "npm test",
+        "test:coverage": "npm run test",
+        "test:docs": "virmator code-in-markdown check"
+    },
+    "dependencies": {
+        "element-vir": "^13.0.0",
+        "lit-css-vars": "^2.0.2"
+    },
+    "devDependencies": {
+        "@augment-vir/browser-testing": "^14.2.0",
+        "@augment-vir/node-js": "^14.2.0",
+        "@open-wc/testing": "^3.1.8",
+        "@types/mocha": "^10.0.1",
+        "@web/dev-server-esbuild": "^0.4.1",
+        "@web/test-runner": "^0.16.1",
+        "@web/test-runner-commands": "^0.7.0",
+        "@web/test-runner-playwright": "^0.10.0",
+        "@web/test-runner-visual-regression": "^0.8.0",
+        "istanbul-smart-text-reporter": "^1.1.1",
+        "typescript": "^5.0.4",
+        "vite": "^4.3.9",
+        "vite-tsconfig-paths": "^4.2.0"
+    }
 }