vira 28.19.6 → 28.20.0

package/dist/icons/icon-svgs/status-failure-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A status icon with an x that indicates something failed (like a build pipeline).
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/statusfailure24icon
+ */
+export declare const StatusFailure24Icon: import("../icon-svg.js").ViraIconSvg;

package/{src/icons/icon-svgs/status-failure-24.icon.ts → dist/icons/icon-svgs/status-failure-24.icon.js}

@@ -1,7 +1,6 @@
-import {html} from 'element-vir';
-import {viraIconCssVars} from '../icon-css-vars.js';
-import {defineIcon} from '../icon-svg.js';
-
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
 /**
  * A status icon with an x that indicates something failed (like a build pipeline).
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
  */
 export const StatusFailure24Icon = defineIcon({
     name: 'StatusFailure24Icon',
-    svgTemplate: html`
+    svgTemplate: html `
         <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"

package/dist/icons/icon-svgs/status-in-progress-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A status icon that indicates that something is still in progress.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/statusinprogress24icon
+ */
+export declare const StatusInProgress24Icon: import("../icon-svg.js").ViraIconSvg;

package/{src/icons/icon-svgs/status-in-progress-24.icon.ts → dist/icons/icon-svgs/status-in-progress-24.icon.js}

@@ -1,7 +1,6 @@
-import {html} from 'element-vir';
-import {viraIconCssVars} from '../icon-css-vars.js';
-import {defineIcon} from '../icon-svg.js';
-
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
 /**
  * A status icon that indicates that something is still in progress.
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
  */
 export const StatusInProgress24Icon = defineIcon({
     name: 'StatusInProgress24Icon',
-    svgTemplate: html`
+    svgTemplate: html `
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
             <circle
                 cx="12"

package/dist/icons/icon-svgs/status-success-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A status icon that indicates success.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/statussuccess24icon
+ */
+export declare const StatusSuccess24Icon: import("../icon-svg.js").ViraIconSvg;

package/{src/icons/icon-svgs/status-success-24.icon.ts → dist/icons/icon-svgs/status-success-24.icon.js}

@@ -1,7 +1,6 @@
-import {html} from 'element-vir';
-import {viraIconCssVars} from '../icon-css-vars.js';
-import {defineIcon} from '../icon-svg.js';
-
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
 /**
  * A status icon that indicates success.
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
  */
 export const StatusSuccess24Icon = defineIcon({
     name: 'StatusSuccess24Icon',
-    svgTemplate: html`
+    svgTemplate: html `
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
             <circle
                 cx="12"

package/dist/icons/icon-svgs/status-unknown-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A status icon with a ? that indicates the status is unknown.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/statusunknown24icon
+ */
+export declare const StatusUnknown24Icon: import("../icon-svg.js").ViraIconSvg;

package/{src/icons/icon-svgs/status-unknown-24.icon.ts → dist/icons/icon-svgs/status-unknown-24.icon.js}

@@ -1,7 +1,6 @@
-import {html} from 'element-vir';
-import {viraIconCssVars} from '../icon-css-vars.js';
-import {defineIcon} from '../icon-svg.js';
-
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
 /**
  * A status icon with a ? that indicates the status is unknown.
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
  */
 export const StatusUnknown24Icon = defineIcon({
     name: 'StatusUnknown24Icon',
-    svgTemplate: html`
+    svgTemplate: html `
         <svg
             xmlns="http://www.w3.org/2000/svg"
             xml:space="preserve"

package/dist/icons/icon-svgs/status-warning-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A status icon that indicates a warning.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/statuswarning24icon
+ */
+export declare const StatusWarning24Icon: import("../icon-svg.js").ViraIconSvg;

package/{src/icons/icon-svgs/status-warning-24.icon.ts → dist/icons/icon-svgs/status-warning-24.icon.js}

@@ -1,7 +1,6 @@
-import {html} from 'element-vir';
-import {viraIconCssVars} from '../icon-css-vars.js';
-import {defineIcon} from '../icon-svg.js';
-
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
 /**
  * A status icon that indicates a warning.
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
  */
 export const StatusWarning24Icon = defineIcon({
     name: 'StatusWarning24Icon',
-    svgTemplate: html`
+    svgTemplate: html `
         <svg
             xmlns="http://www.w3.org/2000/svg"
             xml:space="preserve"

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

@@ -0,0 +1,8 @@
+/**
+ * An upload icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/upload24icon
+ */
+export declare const Upload24Icon: import("../icon-svg.js").ViraIconSvg;

package/{src/icons/icon-svgs/upload-24.icon.ts → dist/icons/icon-svgs/upload-24.icon.js}

@@ -1,7 +1,6 @@
-import {html} from 'element-vir';
-import {viraIconCssVars} from '../icon-css-vars.js';
-import {defineIcon} from '../icon-svg.js';
-
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
 /**
  * An upload icon.
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
  */
 export const Upload24Icon = defineIcon({
     name: 'Upload24Icon',
-    svgTemplate: html`
+    svgTemplate: html `
         <svg
             xmlns="http://www.w3.org/2000/svg"
             xml:space="preserve"

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

@@ -0,0 +1,8 @@
+/**
+ * A plain X icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/x24icon
+ */
+export declare const X24Icon: import("../icon-svg.js").ViraIconSvg;

package/{src/icons/icon-svgs/x-24.icon.ts → dist/icons/icon-svgs/x-24.icon.js}

@@ -1,7 +1,6 @@
-import {html} from 'element-vir';
-import {viraIconCssVars} from '../icon-css-vars.js';
-import {defineIcon} from '../icon-svg.js';
-
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
 /**
  * A plain X icon.
  *
@@ -11,7 +10,7 @@ import {defineIcon} from '../icon-svg.js';
  */
 export const X24Icon = defineIcon({
     name: 'X24Icon',
-    svgTemplate: html`
+    svgTemplate: html `
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
             <path
                 d="M18 6L6 18M6 6l12 12"

package/dist/icons/index.d.ts

@@ -0,0 +1,86 @@
+/** This file is automatically updated by update-icon-exports.ts */
+export * from './icon-css-vars.js';
+export * from './icon-svg.js';
+export * from './icon-svgs/bell-24.icon.js';
+export * from './icon-svgs/chat-24.icon.js';
+export * from './icon-svgs/check-24.icon.js';
+export * from './icon-svgs/chevron-down-24.icon.js';
+export * from './icon-svgs/chevron-up-24.icon.js';
+export * from './icon-svgs/close-x-24.icon.js';
+export * from './icon-svgs/commit-24.icon.js';
+export * from './icon-svgs/copy-24.icon.js';
+export * from './icon-svgs/document-24.icon.js';
+export * from './icon-svgs/document-search-24.icon.js';
+export * from './icon-svgs/double-chevron-24.icon.js';
+export * from './icon-svgs/element-16.icon.js';
+export * from './icon-svgs/element-24.icon.js';
+export * from './icon-svgs/external-link-24.icon.js';
+export * from './icon-svgs/eye-closed-24.icon.js';
+export * from './icon-svgs/eye-open-24.icon.js';
+export * from './icon-svgs/filter-24.icon.js';
+export * from './icon-svgs/link-24.icon.js';
+export * from './icon-svgs/loader-24.icon.js';
+export * from './icon-svgs/loader-animated-24.icon.js';
+export * from './icon-svgs/lock-24.icon.js';
+export * from './icon-svgs/options-24.icon.js';
+export * from './icon-svgs/pencil-24.icon.js';
+export * from './icon-svgs/shield-24.icon.js';
+export * from './icon-svgs/sort-ascending-24.icon.js';
+export * from './icon-svgs/sort-descending-24.icon.js';
+export * from './icon-svgs/speaker-loud-24.icon.js';
+export * from './icon-svgs/speaker-medium-24.icon.js';
+export * from './icon-svgs/speaker-muted-24.icon.js';
+export * from './icon-svgs/speaker-quiet-24.icon.js';
+export * from './icon-svgs/star-24.icon.js';
+export * from './icon-svgs/status-failure-24.icon.js';
+export * from './icon-svgs/status-in-progress-24.icon.js';
+export * from './icon-svgs/status-success-24.icon.js';
+export * from './icon-svgs/status-unknown-24.icon.js';
+export * from './icon-svgs/status-warning-24.icon.js';
+export * from './icon-svgs/upload-24.icon.js';
+export * from './icon-svgs/x-24.icon.js';
+/**
+ * All icons within vira by name.
+ *
+ * @category Icon
+ */
+export declare const allIconsByName: {
+    readonly Bell24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Chat24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Check24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly ChevronDown24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly ChevronUp24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly CloseX24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Commit24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Copy24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Document24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly DocumentSearch24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly DoubleChevron24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Element16Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Element24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly ExternalLink24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly EyeClosed24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly EyeOpen24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Filter24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Link24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Loader24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly LoaderAnimated24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Lock24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Options24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Pencil24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Shield24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly SortAscending24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly SortDescending24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly SpeakerLoud24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly SpeakerMedium24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly SpeakerMuted24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly SpeakerQuiet24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Star24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly StatusFailure24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly StatusInProgress24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly StatusSuccess24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly StatusUnknown24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly StatusWarning24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Upload24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly X24Icon: import("./icon-svg.js").ViraIconSvg;
+};

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

@@ -1,47 +1,44 @@
 /** This file is automatically updated by update-icon-exports.ts */
-
-import {Bell24Icon} from './icon-svgs/bell-24.icon.js';
-import {Chat24Icon} from './icon-svgs/chat-24.icon.js';
-import {Check24Icon} from './icon-svgs/check-24.icon.js';
-import {ChevronDown24Icon} from './icon-svgs/chevron-down-24.icon.js';
-import {ChevronUp24Icon} from './icon-svgs/chevron-up-24.icon.js';
-import {CloseX24Icon} from './icon-svgs/close-x-24.icon.js';
-import {Commit24Icon} from './icon-svgs/commit-24.icon.js';
-import {Copy24Icon} from './icon-svgs/copy-24.icon.js';
-import {Document24Icon} from './icon-svgs/document-24.icon.js';
-import {DocumentSearch24Icon} from './icon-svgs/document-search-24.icon.js';
-import {DoubleChevron24Icon} from './icon-svgs/double-chevron-24.icon.js';
-import {Element16Icon} from './icon-svgs/element-16.icon.js';
-import {Element24Icon} from './icon-svgs/element-24.icon.js';
-import {ExternalLink24Icon} from './icon-svgs/external-link-24.icon.js';
-import {EyeClosed24Icon} from './icon-svgs/eye-closed-24.icon.js';
-import {EyeOpen24Icon} from './icon-svgs/eye-open-24.icon.js';
-import {Filter24Icon} from './icon-svgs/filter-24.icon.js';
-import {Link24Icon} from './icon-svgs/link-24.icon.js';
-import {Loader24Icon} from './icon-svgs/loader-24.icon.js';
-import {LoaderAnimated24Icon} from './icon-svgs/loader-animated-24.icon.js';
-import {Lock24Icon} from './icon-svgs/lock-24.icon.js';
-import {Options24Icon} from './icon-svgs/options-24.icon.js';
-import {Pencil24Icon} from './icon-svgs/pencil-24.icon.js';
-import {Shield24Icon} from './icon-svgs/shield-24.icon.js';
-import {SortAscending24Icon} from './icon-svgs/sort-ascending-24.icon.js';
-import {SortDescending24Icon} from './icon-svgs/sort-descending-24.icon.js';
-import {SpeakerLoud24Icon} from './icon-svgs/speaker-loud-24.icon.js';
-import {SpeakerMedium24Icon} from './icon-svgs/speaker-medium-24.icon.js';
-import {SpeakerMuted24Icon} from './icon-svgs/speaker-muted-24.icon.js';
-import {SpeakerQuiet24Icon} from './icon-svgs/speaker-quiet-24.icon.js';
-import {Star24Icon} from './icon-svgs/star-24.icon.js';
-import {StatusFailure24Icon} from './icon-svgs/status-failure-24.icon.js';
-import {StatusInProgress24Icon} from './icon-svgs/status-in-progress-24.icon.js';
-import {StatusSuccess24Icon} from './icon-svgs/status-success-24.icon.js';
-import {StatusUnknown24Icon} from './icon-svgs/status-unknown-24.icon.js';
-import {StatusWarning24Icon} from './icon-svgs/status-warning-24.icon.js';
-import {Upload24Icon} from './icon-svgs/upload-24.icon.js';
-import {X24Icon} from './icon-svgs/x-24.icon.js';
-
+import { Bell24Icon } from './icon-svgs/bell-24.icon.js';
+import { Chat24Icon } from './icon-svgs/chat-24.icon.js';
+import { Check24Icon } from './icon-svgs/check-24.icon.js';
+import { ChevronDown24Icon } from './icon-svgs/chevron-down-24.icon.js';
+import { ChevronUp24Icon } from './icon-svgs/chevron-up-24.icon.js';
+import { CloseX24Icon } from './icon-svgs/close-x-24.icon.js';
+import { Commit24Icon } from './icon-svgs/commit-24.icon.js';
+import { Copy24Icon } from './icon-svgs/copy-24.icon.js';
+import { Document24Icon } from './icon-svgs/document-24.icon.js';
+import { DocumentSearch24Icon } from './icon-svgs/document-search-24.icon.js';
+import { DoubleChevron24Icon } from './icon-svgs/double-chevron-24.icon.js';
+import { Element16Icon } from './icon-svgs/element-16.icon.js';
+import { Element24Icon } from './icon-svgs/element-24.icon.js';
+import { ExternalLink24Icon } from './icon-svgs/external-link-24.icon.js';
+import { EyeClosed24Icon } from './icon-svgs/eye-closed-24.icon.js';
+import { EyeOpen24Icon } from './icon-svgs/eye-open-24.icon.js';
+import { Filter24Icon } from './icon-svgs/filter-24.icon.js';
+import { Link24Icon } from './icon-svgs/link-24.icon.js';
+import { Loader24Icon } from './icon-svgs/loader-24.icon.js';
+import { LoaderAnimated24Icon } from './icon-svgs/loader-animated-24.icon.js';
+import { Lock24Icon } from './icon-svgs/lock-24.icon.js';
+import { Options24Icon } from './icon-svgs/options-24.icon.js';
+import { Pencil24Icon } from './icon-svgs/pencil-24.icon.js';
+import { Shield24Icon } from './icon-svgs/shield-24.icon.js';
+import { SortAscending24Icon } from './icon-svgs/sort-ascending-24.icon.js';
+import { SortDescending24Icon } from './icon-svgs/sort-descending-24.icon.js';
+import { SpeakerLoud24Icon } from './icon-svgs/speaker-loud-24.icon.js';
+import { SpeakerMedium24Icon } from './icon-svgs/speaker-medium-24.icon.js';
+import { SpeakerMuted24Icon } from './icon-svgs/speaker-muted-24.icon.js';
+import { SpeakerQuiet24Icon } from './icon-svgs/speaker-quiet-24.icon.js';
+import { Star24Icon } from './icon-svgs/star-24.icon.js';
+import { StatusFailure24Icon } from './icon-svgs/status-failure-24.icon.js';
+import { StatusInProgress24Icon } from './icon-svgs/status-in-progress-24.icon.js';
+import { StatusSuccess24Icon } from './icon-svgs/status-success-24.icon.js';
+import { StatusUnknown24Icon } from './icon-svgs/status-unknown-24.icon.js';
+import { StatusWarning24Icon } from './icon-svgs/status-warning-24.icon.js';
+import { Upload24Icon } from './icon-svgs/upload-24.icon.js';
+import { X24Icon } from './icon-svgs/x-24.icon.js';
 export * from './icon-css-vars.js';
 export * from './icon-svg.js';
-
 export * from './icon-svgs/bell-24.icon.js';
 export * from './icon-svgs/chat-24.icon.js';
 export * from './icon-svgs/check-24.icon.js';
@@ -80,7 +77,6 @@ export * from './icon-svgs/status-unknown-24.icon.js';
 export * from './icon-svgs/status-warning-24.icon.js';
 export * from './icon-svgs/upload-24.icon.js';
 export * from './icon-svgs/x-24.icon.js';
-
 /**
  * All icons within vira by name.
  *
@@ -125,4 +121,4 @@ export const allIconsByName = {
     StatusWarning24Icon,
     Upload24Icon,
     X24Icon,
-} as const;
+};

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/border.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Border CSS vars used by Vira elements.
+ *
+ * @category CSS Vars
+ * @category Styles
+ */
+export declare const viraBorders: import("lit-css-vars").CssVarDefinitions<{
+    readonly 'vira-form-input-radius': "8px";
+}>;

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

@@ -1,5 +1,4 @@
-import {defineCssVars} from 'lit-css-vars';
-
+import { defineCssVars } from 'lit-css-vars';
 /**
  * Border CSS vars used by Vira elements.
  *

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,34 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+/**
+ * CSS vars for Vira focus colors.
+ *
+ * @category CSS Vars
+ * @category Styles
+ */
+export declare const viraFocusCssVars: import("lit-css-vars").CssVarDefinitions<{
+    readonly 'vira-focus-outline-color': "#59b1ff";
+    readonly 'vira-focus-outline-border-radius': {
+        readonly initialValue: "10px";
+        readonly default: import("element-vir").CSSResult;
+    };
+}>;
+/**
+ * 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, }: {
+    /**
+     * 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;
+} & PartialWithUndefined<{
+    outlineGap: number;
+    outlineWidth: number;
+    noNesting: boolean;
+}>): import("element-vir").CSSResult;

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

@@ -1,8 +1,7 @@
-import {addPx, type PartialWithUndefined} from '@augment-vir/common';
-import {css, unsafeCSS} from 'element-vir';
-import {defineCssVars} from 'lit-css-vars';
-import {viraBorders} from './border.js';
-
+import { addPx } from '@augment-vir/common';
+import { css, unsafeCSS } from 'element-vir';
+import { defineCssVars } from 'lit-css-vars';
+import { viraBorders } from './border.js';
 /**
  * CSS vars for Vira focus colors.
  *
@@ -13,10 +12,9 @@ export const viraFocusCssVars = defineCssVars({
     'vira-focus-outline-color': '#59b1ff',
     'vira-focus-outline-border-radius': {
         initialValue: '10px',
-        default: css`calc(${viraBorders['vira-form-input-radius'].value} + 2px)`,
+        default: css `calc(${viraBorders['vira-form-input-radius'].value} + 2px)`,
     },
 });
-
 /**
  * Create styles that look like an outline for the given selector.
  *
@@ -25,26 +23,9 @@ export const viraFocusCssVars = defineCssVars({
  *
  * @category Styles
  */
-export function createFocusStyles({
-    elementBorderSize,
-    outlineGap = 2,
-    outlineWidth = 2,
-    noNesting,
-}: {
-    /**
-     * 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;
-} & PartialWithUndefined<{
-    outlineGap: number;
-    outlineWidth: number;
-    noNesting: boolean;
-}>) {
+export function createFocusStyles({ elementBorderSize, outlineGap = 2, outlineWidth = 2, noNesting, }) {
     const outlineSpacing = unsafeCSS(addPx(outlineWidth + outlineGap + elementBorderSize));
-
-    const styles = css`
+    const styles = css `
         content: '';
         top: calc(${outlineSpacing} * -1);
         left: calc(${outlineSpacing} * -1);
@@ -57,12 +38,10 @@ export function createFocusStyles({
         border-radius: ${viraFocusCssVars['vira-focus-outline-border-radius'].value};
         z-index: 100;
     `;
-
     if (noNesting) {
         return styles;
     }
-
-    return css`
+    return css `
         outline: none;
 
         &:focus {

package/dist/styles/font.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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";
+}>;

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.
  *

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

@@ -0,0 +1,20 @@
+/**
+ * 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': "#cccccc";
+    readonly 'vira-form-placeholder-color': "#cccccc";
+    readonly 'vira-form-background-color': "white";
+    readonly 'vira-form-foreground-color': "black";
+    readonly 'vira-form-text-selection-color': "#cfe9ff";
+    readonly 'vira-form-selection-hover-background-color': "#e6f9fe";
+    readonly 'vira-form-selection-hover-foreground-color': "black";
+    readonly 'vira-form-selection-active-background-color': "#e6f9fe";
+    readonly 'vira-form-selection-active-foreground-color': "black";
+    readonly 'vira-form-error-foreground-color': "red";
+    readonly 'vira-form-success-foreground-color': "green";
+    readonly 'vira-form-label-font-weight': "bold";
+}>;