vira 32.0.0-beta.0 → 32.0.0

package/{src/icons/index.ts → dist/icons/index.js}

@@ -1,67 +1,65 @@
-import {Check16Icon} from './icon-svgs/16/check-16.icon.js';
-import {ChevronDown16Icon} from './icon-svgs/16/chevron-down-16.icon.js';
-import {ChevronUp16Icon} from './icon-svgs/16/chevron-up-16.icon.js';
-import {Dash16Icon} from './icon-svgs/16/dash-16.icon.js';
-import {Element16Icon} from './icon-svgs/16/element-16.icon.js';
-import {Plus16Icon} from './icon-svgs/16/plus-16.icon.js';
-import {Upload16Icon} from './icon-svgs/16/upload-16.icon.js';
-import {X16Icon} from './icon-svgs/16/x-16.icon.js';
-import {ArrowDown24Icon} from './icon-svgs/24/arrow-down-24.icon.js';
-import {ArrowLeft24Icon} from './icon-svgs/24/arrow-left-24.icon.js';
-import {ArrowRight24Icon} from './icon-svgs/24/arrow-right-24.icon.js';
-import {ArrowUp24Icon} from './icon-svgs/24/arrow-up-24.icon.js';
-import {AutoTheme24Icon} from './icon-svgs/24/auto-theme-24.icon.js';
-import {Bell24Icon} from './icon-svgs/24/bell-24.icon.js';
-import {Chat24Icon} from './icon-svgs/24/chat-24.icon.js';
-import {Check24Icon} from './icon-svgs/24/check-24.icon.js';
-import {ChevronDown24Icon} from './icon-svgs/24/chevron-down-24.icon.js';
-import {ChevronUp24Icon} from './icon-svgs/24/chevron-up-24.icon.js';
-import {CloseX24Icon} from './icon-svgs/24/close-x-24.icon.js';
-import {Commit24Icon} from './icon-svgs/24/commit-24.icon.js';
-import {Copy24Icon} from './icon-svgs/24/copy-24.icon.js';
-import {Document24Icon} from './icon-svgs/24/document-24.icon.js';
-import {DocumentSearch24Icon} from './icon-svgs/24/document-search-24.icon.js';
-import {DoubleChevron24Icon} from './icon-svgs/24/double-chevron-24.icon.js';
-import {Element24Icon} from './icon-svgs/24/element-24.icon.js';
-import {ExternalLink24Icon} from './icon-svgs/24/external-link-24.icon.js';
-import {EyeClosed24Icon} from './icon-svgs/24/eye-closed-24.icon.js';
-import {EyeOpen24Icon} from './icon-svgs/24/eye-open-24.icon.js';
-import {Filter24Icon} from './icon-svgs/24/filter-24.icon.js';
-import {Globe24Icon} from './icon-svgs/24/globe-24.icon.js';
-import {Link24Icon} from './icon-svgs/24/link-24.icon.js';
-import {Loader24Icon} from './icon-svgs/24/loader-24.icon.js';
-import {LoaderAnimated24Icon} from './icon-svgs/24/loader-animated-24.icon.js';
-import {Lock24Icon} from './icon-svgs/24/lock-24.icon.js';
-import {MagnifyingGlass24Icon} from './icon-svgs/24/magnifying-glass-24.icon.js';
-import {Moon24Icon} from './icon-svgs/24/moon-24.icon.js';
-import {Options24Icon} from './icon-svgs/24/options-24.icon.js';
-import {Pencil24Icon} from './icon-svgs/24/pencil-24.icon.js';
-import {Plus24Icon} from './icon-svgs/24/plus-24.icon.js';
-import {Printer24Icon} from './icon-svgs/24/printer-24.icon.js';
-import {Shield24Icon} from './icon-svgs/24/shield-24.icon.js';
-import {SortAscending24Icon} from './icon-svgs/24/sort-ascending-24.icon.js';
-import {SortDescending24Icon} from './icon-svgs/24/sort-descending-24.icon.js';
-import {Sparkle24Icon} from './icon-svgs/24/sparkle-24.icon.js';
-import {SpeakerLoud24Icon} from './icon-svgs/24/speaker-loud-24.icon.js';
-import {SpeakerMedium24Icon} from './icon-svgs/24/speaker-medium-24.icon.js';
-import {SpeakerMuted24Icon} from './icon-svgs/24/speaker-muted-24.icon.js';
-import {SpeakerQuiet24Icon} from './icon-svgs/24/speaker-quiet-24.icon.js';
-import {Star24Icon} from './icon-svgs/24/star-24.icon.js';
-import {StatusFailure24Icon} from './icon-svgs/24/status-failure-24.icon.js';
-import {StatusInProgress24Icon} from './icon-svgs/24/status-in-progress-24.icon.js';
-import {StatusSuccess24Icon} from './icon-svgs/24/status-success-24.icon.js';
-import {StatusUnknown24Icon} from './icon-svgs/24/status-unknown-24.icon.js';
-import {StatusWarning24Icon} from './icon-svgs/24/status-warning-24.icon.js';
-import {Sun24Icon} from './icon-svgs/24/sun-24.icon.js';
-import {Upload24Icon} from './icon-svgs/24/upload-24.icon.js';
-import {X24Icon} from './icon-svgs/24/x-24.icon.js';
-
+import { Check16Icon } from './icon-svgs/16/check-16.icon.js';
+import { ChevronDown16Icon } from './icon-svgs/16/chevron-down-16.icon.js';
+import { ChevronUp16Icon } from './icon-svgs/16/chevron-up-16.icon.js';
+import { Dash16Icon } from './icon-svgs/16/dash-16.icon.js';
+import { Element16Icon } from './icon-svgs/16/element-16.icon.js';
+import { Plus16Icon } from './icon-svgs/16/plus-16.icon.js';
+import { Upload16Icon } from './icon-svgs/16/upload-16.icon.js';
+import { X16Icon } from './icon-svgs/16/x-16.icon.js';
+import { ArrowDown24Icon } from './icon-svgs/24/arrow-down-24.icon.js';
+import { ArrowLeft24Icon } from './icon-svgs/24/arrow-left-24.icon.js';
+import { ArrowRight24Icon } from './icon-svgs/24/arrow-right-24.icon.js';
+import { ArrowUp24Icon } from './icon-svgs/24/arrow-up-24.icon.js';
+import { AutoTheme24Icon } from './icon-svgs/24/auto-theme-24.icon.js';
+import { Bell24Icon } from './icon-svgs/24/bell-24.icon.js';
+import { Chat24Icon } from './icon-svgs/24/chat-24.icon.js';
+import { Check24Icon } from './icon-svgs/24/check-24.icon.js';
+import { ChevronDown24Icon } from './icon-svgs/24/chevron-down-24.icon.js';
+import { ChevronUp24Icon } from './icon-svgs/24/chevron-up-24.icon.js';
+import { CloseX24Icon } from './icon-svgs/24/close-x-24.icon.js';
+import { Commit24Icon } from './icon-svgs/24/commit-24.icon.js';
+import { Copy24Icon } from './icon-svgs/24/copy-24.icon.js';
+import { Document24Icon } from './icon-svgs/24/document-24.icon.js';
+import { DocumentSearch24Icon } from './icon-svgs/24/document-search-24.icon.js';
+import { DoubleChevron24Icon } from './icon-svgs/24/double-chevron-24.icon.js';
+import { Element24Icon } from './icon-svgs/24/element-24.icon.js';
+import { ExternalLink24Icon } from './icon-svgs/24/external-link-24.icon.js';
+import { EyeClosed24Icon } from './icon-svgs/24/eye-closed-24.icon.js';
+import { EyeOpen24Icon } from './icon-svgs/24/eye-open-24.icon.js';
+import { Filter24Icon } from './icon-svgs/24/filter-24.icon.js';
+import { Globe24Icon } from './icon-svgs/24/globe-24.icon.js';
+import { Link24Icon } from './icon-svgs/24/link-24.icon.js';
+import { Loader24Icon } from './icon-svgs/24/loader-24.icon.js';
+import { LoaderAnimated24Icon } from './icon-svgs/24/loader-animated-24.icon.js';
+import { Lock24Icon } from './icon-svgs/24/lock-24.icon.js';
+import { MagnifyingGlass24Icon } from './icon-svgs/24/magnifying-glass-24.icon.js';
+import { Moon24Icon } from './icon-svgs/24/moon-24.icon.js';
+import { Options24Icon } from './icon-svgs/24/options-24.icon.js';
+import { Pencil24Icon } from './icon-svgs/24/pencil-24.icon.js';
+import { Plus24Icon } from './icon-svgs/24/plus-24.icon.js';
+import { Printer24Icon } from './icon-svgs/24/printer-24.icon.js';
+import { Shield24Icon } from './icon-svgs/24/shield-24.icon.js';
+import { SortAscending24Icon } from './icon-svgs/24/sort-ascending-24.icon.js';
+import { SortDescending24Icon } from './icon-svgs/24/sort-descending-24.icon.js';
+import { Sparkle24Icon } from './icon-svgs/24/sparkle-24.icon.js';
+import { SpeakerLoud24Icon } from './icon-svgs/24/speaker-loud-24.icon.js';
+import { SpeakerMedium24Icon } from './icon-svgs/24/speaker-medium-24.icon.js';
+import { SpeakerMuted24Icon } from './icon-svgs/24/speaker-muted-24.icon.js';
+import { SpeakerQuiet24Icon } from './icon-svgs/24/speaker-quiet-24.icon.js';
+import { Star24Icon } from './icon-svgs/24/star-24.icon.js';
+import { StatusFailure24Icon } from './icon-svgs/24/status-failure-24.icon.js';
+import { StatusInProgress24Icon } from './icon-svgs/24/status-in-progress-24.icon.js';
+import { StatusSuccess24Icon } from './icon-svgs/24/status-success-24.icon.js';
+import { StatusUnknown24Icon } from './icon-svgs/24/status-unknown-24.icon.js';
+import { StatusWarning24Icon } from './icon-svgs/24/status-warning-24.icon.js';
+import { Sun24Icon } from './icon-svgs/24/sun-24.icon.js';
+import { Upload24Icon } from './icon-svgs/24/upload-24.icon.js';
+import { X24Icon } from './icon-svgs/24/x-24.icon.js';
 export * from './colored-icon.js';
 export * from './icon-css-vars.js';
 export * from './icon-svg.js';
 export * from './lucide-icons.js';
 export * from './sized-icon.js';
-
 export * from './icon-svgs/16/check-16.icon.js';
 export * from './icon-svgs/16/chevron-down-16.icon.js';
 export * from './icon-svgs/16/chevron-up-16.icon.js';
@@ -119,7 +117,6 @@ export * from './icon-svgs/24/status-warning-24.icon.js';
 export * from './icon-svgs/24/sun-24.icon.js';
 export * from './icon-svgs/24/upload-24.icon.js';
 export * from './icon-svgs/24/x-24.icon.js';
-
 /**
  * All icons within vira by name.
  *
@@ -183,8 +180,7 @@ export const allIconsByName = {
     Upload24Icon,
     X16Icon,
     X24Icon,
-} as const;
-
+};
 /**
  * All 24px icons within vira by name.
  *
@@ -240,8 +236,7 @@ export const all24IconsByName = {
     Sun24Icon,
     Upload24Icon,
     X24Icon,
-} as const;
-
+};
 /**
  * All 16px icons within vira by name.
  *
@@ -256,4 +251,4 @@ export const all16IconsByName = {
     Plus16Icon,
     Upload16Icon,
     X16Icon,
-} as const;
+};

package/dist/icons/lucide-icons.d.ts

@@ -0,0 +1,15 @@
+import * as lucideStaticImport from 'lucide-static';
+import { type ViraIconSvg } from './icon-svg.js';
+/**
+ * All supported Lucide icon names.
+ *
+ * @category Internal
+ */
+export type LucideIconKey = keyof typeof lucideStaticImport;
+/**
+ * All [Lucide icons](https://lucide.dev) in a format compatible with `ViraIcon`. Each icon entry
+ * can be accessed directly as a {@link ViraIconSvg}.
+ *
+ * @category Icon
+ */
+export declare const lucideIcons: Readonly<Record<LucideIconKey, ViraIconSvg>>;

package/dist/icons/lucide-icons.js

@@ -0,0 +1,79 @@
+import { html, unsafeHTML } from 'element-vir';
+import * as lucideStaticImport from 'lucide-static';
+import { viraIconCssVars } from './icon-css-vars.js';
+const defaultLucideAttributes = {
+    fill: String(viraIconCssVars['vira-icon-fill-color'].value),
+    stroke: String(viraIconCssVars['vira-icon-stroke-color'].value),
+    'stroke-width': String(viraIconCssVars['vira-icon-stroke-width'].value),
+};
+function setSvgAttribute({ svgString, attributeName, value, }) {
+    const escapedName = attributeName.replace(/[.*+?^${}()|[\]\\]/g, String.raw `\$&`);
+    const regex = new RegExp(String.raw `(\s)${escapedName}="[^"]*"`);
+    return regex.test(svgString)
+        ? svgString.replace(regex, `$1${attributeName}="${value}"`)
+        : svgString.replace(/<svg\b/, `<svg ${attributeName}="${value}"`);
+}
+function applySvgAttributes(svgString, attributes) {
+    return Object.entries(attributes).reduce((result, [key, value,]) => {
+        return setSvgAttribute({
+            svgString: result,
+            attributeName: key,
+            value,
+        });
+    }, svgString);
+}
+function isLucideIconKey(key) {
+    return key in lucideStaticImport;
+}
+function getLucideIconSvg(key) {
+    const svg = lucideStaticImport[key];
+    if (typeof svg !== 'string') {
+        throw new TypeError(`Lucide icon "${key}" is not a valid SVG string.`);
+    }
+    return svg;
+}
+function createLucideIconEntry(iconKey) {
+    return {
+        name: iconKey,
+        svgTemplate: html `
+            ${unsafeHTML(applySvgAttributes(getLucideIconSvg(iconKey), defaultLucideAttributes))}
+        `,
+    };
+}
+const lucideIconCache = new Map();
+/**
+ * All [Lucide icons](https://lucide.dev) in a format compatible with `ViraIcon`. Each icon entry
+ * can be accessed directly as a {@link ViraIconSvg}.
+ *
+ * @category Icon
+ */
+export const lucideIcons = new Proxy({}, {
+    get(_target, property) {
+        if (!isLucideIconKey(property)) {
+            return undefined;
+        }
+        const cached = lucideIconCache.get(property);
+        if (cached) {
+            return cached;
+        }
+        const entry = createLucideIconEntry(property);
+        lucideIconCache.set(property, entry);
+        return entry;
+    },
+    has(_target, property) {
+        return isLucideIconKey(property);
+    },
+    ownKeys() {
+        return Object.keys(lucideStaticImport);
+    },
+    getOwnPropertyDescriptor(_target, property) {
+        if (isLucideIconKey(property)) {
+            return {
+                configurable: true,
+                enumerable: true,
+                writable: false,
+            };
+        }
+        return undefined;
+    },
+});

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

@@ -0,0 +1,8 @@
+import { type ViraIconSvg } from './icon-svg.js';
+/**
+ * Wraps an existing icon with explicit dimensions and outputs another icon that can be used
+ * anywhere the original icon can be used.
+ *
+ * @category Icon
+ */
+export declare function createSizedIcon(icon: Readonly<ViraIconSvg>, size: number): ViraIconSvg;

package/{src/icons/sized-icon.ts → dist/icons/sized-icon.js}

@@ -1,12 +1,10 @@
-import {type ViraIconSvg} from './icon-svg.js';
-
 /**
  * Wraps an existing icon with explicit dimensions and outputs another icon that can be used
  * anywhere the original icon can be used.
  *
  * @category Icon
  */
-export function createSizedIcon(icon: Readonly<ViraIconSvg>, size: number): ViraIconSvg {
+export function createSizedIcon(icon, size) {
     return {
         ...icon,
         size,

package/dist/index.js

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

package/dist/styles/disabled.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A chunk of CSS that styles an element with Vira's default disabled styles.
+ *
+ * @category Styles
+ */
+export declare const viraDisabledStyles: import("element-vir").CSSResult;

package/{src/styles/disabled.ts → dist/styles/disabled.js}

@@ -1,11 +1,10 @@
-import {css} from 'element-vir';
-
+import { css } from 'element-vir';
 /**
  * A chunk of CSS that styles an element with Vira's default disabled styles.
  *
  * @category Styles
  */
-export const viraDisabledStyles = css`
+export const viraDisabledStyles = css `
     pointer-events: none;
     opacity: 0.3;
     cursor: not-allowed;

package/dist/styles/durations.d.ts

@@ -0,0 +1,22 @@
+/**
+ * CSS vars for animation or transition durations from Vira.
+ *
+ * @category Styles
+ * @category CSS Vars
+ */
+export declare const viraAnimationDurations: import("lit-css-vars").CssVarDefinitions<{
+    /**
+     * A longer duration used to show a full animation. Use this sparingly; make sure to not block
+     * any user input with this animation.
+     */
+    readonly 'vira-extended-animation-duration': "1.2s";
+    /** A longer duration used to emphasize the animation without totally aggravating a user. */
+    readonly 'vira-pretty-animation-duration': "300ms";
+    /**
+     * A short duration used for user interactions. This duration is very short to ensure snappy
+     * responses to user interactions.
+     *
+     * The default duration of 84ms gives us 5 frames on a 60Hz screen.
+     */
+    readonly 'vira-interaction-animation-duration': "84ms";
+}>;

package/{src/styles/durations.ts → dist/styles/durations.js}

@@ -1,5 +1,4 @@
-import {defineCssVars} from 'lit-css-vars';
-
+import { defineCssVars } from 'lit-css-vars';
 /**
  * CSS vars for animation or transition durations from Vira.
  *

package/dist/styles/focus.d.ts

@@ -0,0 +1,26 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type CSSResult } from 'element-vir';
+import { type SingleCssVarDefinition } from 'lit-css-vars';
+/**
+ * Create styles that look like an outline for the given selector.
+ *
+ * It is recommended to use the pseudo selector chain ":focus:focus-visible:not(:active)" to
+ * preventing clicking an element from creating focus styles in Chrome.
+ *
+ * @category Styles
+ */
+export declare function createFocusStyles({ elementBorderSize, outlineGap, outlineWidth, noNesting, outlineColor, borderRadius, renderInside, }?: PartialWithUndefined<{
+    /**
+     * 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: SingleCssVarDefinition | string;
+    outlineGap: SingleCssVarDefinition | string;
+    outlineWidth: SingleCssVarDefinition | string;
+    borderRadius: SingleCssVarDefinition | string;
+    outlineColor: SingleCssVarDefinition | string;
+    noNesting: boolean;
+    /** Render the focus outline inside the element instead of outside. */
+    renderInside: boolean;
+}>): CSSResult;

package/{src/styles/focus.ts → dist/styles/focus.js}

@@ -1,17 +1,14 @@
-import {check} from '@augment-vir/assert';
-import {type PartialWithUndefined} from '@augment-vir/common';
-import {css, type CSSResult, unsafeCSS} from 'element-vir';
-import {type SingleCssVarDefinition} from 'lit-css-vars';
-import {viraFormCssVars} from './form-styles.js';
-
-function cssValueOrRaw(value: string | SingleCssVarDefinition): CSSResult {
+import { check } from '@augment-vir/assert';
+import { css, unsafeCSS } from 'element-vir';
+import { viraFormCssVars } from './form-styles.js';
+function cssValueOrRaw(value) {
     if (check.isString(value)) {
         return unsafeCSS(value);
-    } else {
+    }
+    else {
         return value.value;
     }
 }
-
 /**
  * Create styles that look like an outline for the given selector.
  *
@@ -20,34 +17,11 @@ function cssValueOrRaw(value: string | SingleCssVarDefinition): CSSResult {
  *
  * @category Styles
  */
-export function createFocusStyles({
-    elementBorderSize = '1px',
-    outlineGap = '2px',
-    outlineWidth = '2px',
-    noNesting,
-    outlineColor = viraFormCssVars['vira-form-focus-outline-color'],
-    borderRadius = viraFormCssVars['vira-form-focus-outline-border-radius'],
-    renderInside,
-}: PartialWithUndefined<{
-    /**
-     * 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: SingleCssVarDefinition | string;
-    outlineGap: SingleCssVarDefinition | string;
-    outlineWidth: SingleCssVarDefinition | string;
-    borderRadius: SingleCssVarDefinition | string;
-    outlineColor: SingleCssVarDefinition | string;
-    noNesting: boolean;
-    /** Render the focus outline inside the element instead of outside. */
-    renderInside: boolean;
-}> = {}) {
-    const insetSpacing = css`calc(${cssValueOrRaw(outlineGap)})`;
-    const outsetSpacing = css`calc(${cssValueOrRaw(outlineWidth)} + ${cssValueOrRaw(outlineGap)} + ${cssValueOrRaw(elementBorderSize)})`;
-
+export function createFocusStyles({ elementBorderSize = '1px', outlineGap = '2px', outlineWidth = '2px', noNesting, outlineColor = viraFormCssVars['vira-form-focus-outline-color'], borderRadius = viraFormCssVars['vira-form-focus-outline-border-radius'], renderInside, } = {}) {
+    const insetSpacing = css `calc(${cssValueOrRaw(outlineGap)})`;
+    const outsetSpacing = css `calc(${cssValueOrRaw(outlineWidth)} + ${cssValueOrRaw(outlineGap)} + ${cssValueOrRaw(elementBorderSize)})`;
     const styles = renderInside
-        ? css`
+        ? css `
               content: '';
               top: ${insetSpacing};
               left: ${insetSpacing};
@@ -60,7 +34,7 @@ export function createFocusStyles({
               border-radius: ${cssValueOrRaw(borderRadius)};
               z-index: 100;
           `
-        : css`
+        : css `
               content: '';
               top: calc(${outsetSpacing} * -1);
               left: calc(${outsetSpacing} * -1);
@@ -73,12 +47,10 @@ export function createFocusStyles({
               border-radius: ${cssValueOrRaw(borderRadius)};
               z-index: 100;
           `;
-
     if (noNesting) {
         return styles;
     }
-
-    return css`
+    return css `
         outline: none;
 
         &:focus {

package/dist/styles/font.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Use this to set font values so they can be controlled via CSS vars.
+ *
+ * @category CSS Vars
+ * @category Styles
+ */
+export declare const viraFontCssVars: import("lit-css-vars").CssVarDefinitions<{
+    readonly 'vira-monospace': "monospace";
+    readonly 'vira-font-weight-normal': "normal";
+    readonly 'vira-font-weight-medium': "500";
+    readonly 'vira-font-weight-bold': "600";
+}>;

package/{src/styles/font.ts → dist/styles/font.js}

@@ -1,5 +1,4 @@
-import {defineCssVars} from 'lit-css-vars';
-
+import { defineCssVars } from 'lit-css-vars';
 /**
  * Use this to set font values so they can be controlled via CSS vars.
  *
@@ -8,7 +7,6 @@ import {defineCssVars} from 'lit-css-vars';
  */
 export const viraFontCssVars = defineCssVars({
     'vira-monospace': 'monospace',
-
     'vira-font-weight-normal': 'normal',
     'vira-font-weight-medium': '500',
     'vira-font-weight-bold': '600',

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

@@ -0,0 +1,46 @@
+/**
+ * CSS vars for vira form elements.
+ *
+ * @category CSS Vars
+ * @category Styles
+ */
+export declare const viraFormCssVars: import("lit-css-vars").CssVarDefinitions<{
+    readonly 'vira-form-border-color': import("element-vir").CSSResult;
+    readonly 'vira-form-placeholder-color': import("element-vir").CSSResult;
+    readonly 'vira-form-background-color': import("element-vir").CSSResult;
+    readonly 'vira-form-foreground-color': import("element-vir").CSSResult;
+    readonly 'vira-form-modal-backdrop-color': "rgba(0, 0, 0, 0.35)";
+    readonly 'vira-form-secondary-body-foreground': import("element-vir").CSSResult;
+    readonly 'vira-form-text-selection-color': import("element-vir").CSSResult;
+    readonly 'vira-form-selection-hover-color': import("element-vir").CSSResult;
+    readonly 'vira-form-selection-active-color': import("element-vir").CSSResult;
+    readonly 'vira-form-error-color': import("element-vir").CSSResult;
+    readonly 'vira-form-error-hover-color': import("element-vir").CSSResult;
+    readonly 'vira-form-error-active-color': import("element-vir").CSSResult;
+    readonly 'vira-form-warning-color': import("element-vir").CSSResult;
+    readonly 'vira-form-warning-hover-color': import("element-vir").CSSResult;
+    readonly 'vira-form-warning-active-color': import("element-vir").CSSResult;
+    readonly 'vira-form-positive-color': import("element-vir").CSSResult;
+    readonly 'vira-form-positive-hover-color': import("element-vir").CSSResult;
+    readonly 'vira-form-positive-active-color': import("element-vir").CSSResult;
+    readonly 'vira-form-success-color': import("element-vir").CSSResult;
+    readonly 'vira-form-label-font-weight': import("element-vir").CSSResult;
+    readonly 'vira-form-small-text-size': "14px";
+    readonly 'vira-form-medium-text-size': "14px";
+    readonly 'vira-form-large-text-size': "22px";
+    readonly 'vira-form-radius': "6px";
+    readonly 'vira-form-wrapper-radius': "12px";
+    readonly 'vira-form-focus-outline-color': import("element-vir").CSSResult;
+    readonly 'vira-form-focus-outline-border-radius': import("element-vir").CSSResult;
+    readonly 'vira-form-plain-color': import("element-vir").CSSResult;
+    readonly 'vira-form-plain-hover-color': import("element-vir").CSSResult;
+    readonly 'vira-form-plain-active-color': import("element-vir").CSSResult;
+    readonly 'vira-form-accent-primary-color': import("element-vir").CSSResult;
+    readonly 'vira-form-accent-primary-hover-color': import("element-vir").CSSResult;
+    readonly 'vira-form-accent-primary-active-color': import("element-vir").CSSResult;
+    readonly 'vira-form-danger-color': import("element-vir").CSSResult;
+    readonly 'vira-form-danger-hover-color': import("element-vir").CSSResult;
+    readonly 'vira-form-danger-active-color': import("element-vir").CSSResult;
+    readonly 'vira-form-filled-background-color': import("element-vir").CSSResult;
+    readonly 'vira-form-filled-active-background-color': import("element-vir").CSSResult;
+}>;

package/dist/styles/form-styles.js

@@ -0,0 +1,53 @@
+import { css, unsafeCSS } from 'element-vir';
+import { defineCssVars } from 'lit-css-vars';
+import { themeDefaultKey } from 'theme-vir/dist/color-theme/color-theme.js';
+import { viraFontCssVars } from './font.js';
+import { viraColorPalette } from './vira-color-palette.js';
+import { viraTheme } from './vira-color-theme.js';
+const defaultViraFormRadius = '6px';
+/**
+ * CSS vars for vira form elements.
+ *
+ * @category CSS Vars
+ * @category Styles
+ */
+export const viraFormCssVars = defineCssVars({
+    'vira-form-border-color': viraTheme.colors['vira-grey-foreground-decoration'].foreground.value,
+    'vira-form-placeholder-color': viraTheme.colors['vira-grey-foreground-placeholder'].foreground.value,
+    'vira-form-background-color': viraTheme.colors[themeDefaultKey].background.value,
+    'vira-form-foreground-color': viraTheme.colors[themeDefaultKey].foreground.value,
+    'vira-form-modal-backdrop-color': 'rgba(0, 0, 0, 0.35)',
+    'vira-form-secondary-body-foreground': viraTheme.colors['vira-grey-foreground-header'].foreground.value,
+    'vira-form-text-selection-color': viraTheme.colors['vira-brand-behind-bg-decoration'].background.value,
+    'vira-form-selection-hover-color': viraTheme.colors['vira-brand-behind-bg-invisible'].background.value,
+    'vira-form-selection-active-color': viraTheme.colors['vira-brand-behind-bg-decoration'].background.value,
+    'vira-form-error-color': viraTheme.colors['vira-red-behind-bg-non-body'].background.value,
+    'vira-form-error-hover-color': viraTheme.colors['vira-red-behind-bg-header'].background.value,
+    'vira-form-error-active-color': viraTheme.colors['vira-red-behind-bg-body'].background.value,
+    'vira-form-warning-color': viraTheme.colors['vira-yellow-behind-bg-non-body'].background.value,
+    'vira-form-warning-hover-color': viraTheme.colors['vira-yellow-behind-bg-header'].background.value,
+    'vira-form-warning-active-color': viraTheme.colors['vira-yellow-behind-bg-body'].background.value,
+    'vira-form-positive-color': viraTheme.colors['vira-green-behind-bg-non-body'].background.value,
+    'vira-form-positive-hover-color': viraTheme.colors['vira-green-behind-bg-header'].background.value,
+    'vira-form-positive-active-color': viraTheme.colors['vira-green-behind-bg-body'].background.value,
+    'vira-form-success-color': viraTheme.colors['vira-green-behind-bg-non-body'].background.value,
+    'vira-form-label-font-weight': viraFontCssVars['vira-font-weight-bold'].value,
+    'vira-form-small-text-size': '14px',
+    'vira-form-medium-text-size': '14px',
+    'vira-form-large-text-size': '22px',
+    'vira-form-radius': defaultViraFormRadius,
+    'vira-form-wrapper-radius': '12px',
+    'vira-form-focus-outline-color': viraTheme.colors['vira-brand-foreground-header'].foreground.value,
+    'vira-form-focus-outline-border-radius': css `calc(var(--vira-form-radius, ${unsafeCSS(defaultViraFormRadius)}) + 2px)`,
+    'vira-form-plain-color': viraColorPalette['vira-grey-100'].value,
+    'vira-form-plain-hover-color': viraTheme.colors['vira-grey-foreground-invisible'].foreground.value,
+    'vira-form-plain-active-color': viraTheme.colors['vira-grey-foreground-decoration'].foreground.value,
+    'vira-form-accent-primary-color': viraTheme.colors['vira-brand-behind-bg-non-body'].background.value,
+    'vira-form-accent-primary-hover-color': viraTheme.colors['vira-brand-behind-bg-header'].background.value,
+    'vira-form-accent-primary-active-color': viraTheme.colors['vira-brand-behind-bg-body'].background.value,
+    'vira-form-danger-color': viraTheme.colors['vira-red-behind-bg-non-body'].background.value,
+    'vira-form-danger-hover-color': viraTheme.colors['vira-red-behind-bg-header'].background.value,
+    'vira-form-danger-active-color': viraTheme.colors['vira-red-behind-bg-body'].background.value,
+    'vira-form-filled-background-color': viraTheme.colors['vira-grey-foreground-invisible'].foreground.value,
+    'vira-form-filled-active-background-color': viraTheme.colors['vira-grey-foreground-decoration'].foreground.value,
+});