vira 22.2.1 → 23.0.0

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

@@ -1,6 +1,13 @@
 import { html } from 'element-vir';
-import { viraIconCssVars } from '../icon-css-vars';
-import { defineIcon } from '../icon-svg';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * An icon symbol that represents an HTML element.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/element24icon
+ */
 export const Element24Icon = defineIcon({
     name: 'Element24Icon',
     svgTemplate: html `

package/dist/icons/icon-svgs/eye-closed-24.icon.d.ts

@@ -1 +1,8 @@
-export declare const EyeClosed24Icon: import("../icon-svg").ViraIconSvg;
+/**
+ * A closed or disable eye icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/eyeclosed24icon
+ */
+export declare const EyeClosed24Icon: import("../icon-svg.js").ViraIconSvg;

package/dist/icons/icon-svgs/eye-closed-24.icon.js

@@ -1,6 +1,13 @@
 import { html } from 'element-vir';
-import { viraIconCssVars } from '../icon-css-vars';
-import { defineIcon } from '../icon-svg';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * A closed or disable eye icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/eyeclosed24icon
+ */
 export const EyeClosed24Icon = defineIcon({
     name: 'EyeClosed24Icon',
     svgTemplate: html `

package/dist/icons/icon-svgs/eye-open-24.icon.d.ts

@@ -1 +1,8 @@
-export declare const EyeOpen24Icon: import("../icon-svg").ViraIconSvg;
+/**
+ * An open eye icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/eyeopen24icon
+ */
+export declare const EyeOpen24Icon: import("../icon-svg.js").ViraIconSvg;

package/dist/icons/icon-svgs/eye-open-24.icon.js

@@ -1,6 +1,13 @@
 import { html } from 'element-vir';
-import { viraIconCssVars } from '../icon-css-vars';
-import { defineIcon } from '../icon-svg';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * An open eye icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/eyeopen24icon
+ */
 export const EyeOpen24Icon = defineIcon({
     name: 'EyeOpen24Icon',
     svgTemplate: html `
@@ -19,4 +26,3 @@ export const EyeOpen24Icon = defineIcon({
         </svg>
     `,
 });
-// xml:space="preserve"

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

@@ -1 +1,8 @@
-export declare const Loader24Icon: import("../icon-svg").ViraIconSvg;
+/**
+ * A static loading icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/loader24icon
+ */
+export declare const Loader24Icon: import("../icon-svg.js").ViraIconSvg;

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

@@ -1,6 +1,13 @@
 import { html } from 'element-vir';
-import { viraIconCssVars } from '../icon-css-vars';
-import { defineIcon } from '../icon-svg';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * A static loading icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/loader24icon
+ */
 export const Loader24Icon = defineIcon({
     name: 'Loader24Icon',
     svgTemplate: html `

package/dist/icons/icon-svgs/loader-animated-24.icon.d.ts

@@ -1 +1,8 @@
-export declare const LoaderAnimated24Icon: import("../icon-svg").ViraIconSvg;
+/**
+ * A variation of {@link Loader24Icon} that spins on its own.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/loaderanimated24icon
+ */
+export declare const LoaderAnimated24Icon: import("../icon-svg.js").ViraIconSvg;

package/dist/icons/icon-svgs/loader-animated-24.icon.js

@@ -1,7 +1,7 @@
 import { css, html } from 'element-vir';
-import { viraAnimationDurations } from '../../styles/durations';
-import { defineIcon } from '../icon-svg';
-import { Loader24Icon } from './loader-24.icon';
+import { viraAnimationDurations } from '../../styles/durations.js';
+import { defineIcon } from '../icon-svg.js';
+import { Loader24Icon } from './loader-24.icon.js';
 const animatedLoaderStyles = css `
     @keyframes loader-animated-spin {
         from {
@@ -17,6 +17,13 @@ const animatedLoaderStyles = css `
             loader-animated-spin infinite;
     }
 `;
+/**
+ * A variation of {@link Loader24Icon} that spins on its own.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/loaderanimated24icon
+ */
 export const LoaderAnimated24Icon = defineIcon({
     name: 'LoaderAnimated24Icon',
     svgTemplate: html `

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

@@ -1 +1,8 @@
-export declare const Options24Icon: import("../icon-svg").ViraIconSvg;
+/**
+ * An icon that represents configuration options.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/options24icon
+ */
+export declare const Options24Icon: import("../icon-svg.js").ViraIconSvg;

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

@@ -1,6 +1,13 @@
 import { html } from 'element-vir';
-import { viraIconCssVars } from '../icon-css-vars';
-import { defineIcon } from '../icon-svg';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * An icon that represents configuration options.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/options24icon
+ */
 export const Options24Icon = defineIcon({
     name: 'Options24Icon',
     svgTemplate: html `
@@ -17,7 +24,7 @@ export const Options24Icon = defineIcon({
             <path
                 d="M3 5.5h3.5m5 0h8.5M3 12.5h11m5 0h2M3 18.5h3m5 0h10"
                 fill="none"
-                stroke="${viraIconCssVars['vira-icon-stroke-color'].value}"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
                 stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
             />
         </svg>

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

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

package/dist/icons/icon-svgs/status-failure-24.icon.js

@@ -1,6 +1,13 @@
 import { html } from 'element-vir';
-import { viraIconCssVars } from '../icon-css-vars';
-import { defineIcon } from '../icon-svg';
+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).
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/statusfailure24icon
+ */
 export const StatusFailure24Icon = defineIcon({
     name: 'StatusFailure24Icon',
     svgTemplate: html `

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

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

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

@@ -1,6 +1,13 @@
 import { html } from 'element-vir';
-import { viraIconCssVars } from '../icon-css-vars';
-import { defineIcon } from '../icon-svg';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * A status icon that indicates that something is still in progress.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/statusinprogress24icon
+ */
 export const StatusInProgress24Icon = defineIcon({
     name: 'StatusInProgress24Icon',
     svgTemplate: html `

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

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

package/dist/icons/icon-svgs/status-success-24.icon.js

@@ -1,6 +1,13 @@
 import { html } from 'element-vir';
-import { viraIconCssVars } from '../icon-css-vars';
-import { defineIcon } from '../icon-svg';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * A status icon that indicates success.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/statussuccess24icon
+ */
 export const StatusSuccess24Icon = defineIcon({
     name: 'StatusSuccess24Icon',
     svgTemplate: html `

package/dist/icons/index.d.ts

@@ -1,31 +1,36 @@
 /** This file is automatically updated by update-icon-exports.ts */
-export * from './icon-css-vars';
-export * from './icon-svg';
-export * from './icon-svgs/check-24.icon';
-export * from './icon-svgs/chevron-up-24.icon';
-export * from './icon-svgs/close-x-24.icon';
-export * from './icon-svgs/element-16.icon';
-export * from './icon-svgs/element-24.icon';
-export * from './icon-svgs/eye-closed-24.icon';
-export * from './icon-svgs/eye-open-24.icon';
-export * from './icon-svgs/loader-24.icon';
-export * from './icon-svgs/loader-animated-24.icon';
-export * from './icon-svgs/options-24.icon';
-export * from './icon-svgs/status-failure-24.icon';
-export * from './icon-svgs/status-in-progress-24.icon';
-export * from './icon-svgs/status-success-24.icon';
+export * from './icon-css-vars.js';
+export * from './icon-svg.js';
+export * from './icon-svgs/check-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/element-16.icon.js';
+export * from './icon-svgs/element-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/loader-24.icon.js';
+export * from './icon-svgs/loader-animated-24.icon.js';
+export * from './icon-svgs/options-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';
+/**
+ * All Vira icons in an object mapped by their icon name.
+ *
+ * @category Icon
+ */
 export declare const allIconsByName: {
-    readonly Check24Icon: import("./icon-svg").ViraIconSvg;
-    readonly ChevronUp24Icon: import("./icon-svg").ViraIconSvg;
-    readonly CloseX24Icon: import("./icon-svg").ViraIconSvg;
-    readonly Element16Icon: import("./icon-svg").ViraIconSvg;
-    readonly Element24Icon: import("./icon-svg").ViraIconSvg;
-    readonly EyeClosed24Icon: import("./icon-svg").ViraIconSvg;
-    readonly EyeOpen24Icon: import("./icon-svg").ViraIconSvg;
-    readonly Loader24Icon: import("./icon-svg").ViraIconSvg;
-    readonly LoaderAnimated24Icon: import("./icon-svg").ViraIconSvg;
-    readonly Options24Icon: import("./icon-svg").ViraIconSvg;
-    readonly StatusFailure24Icon: import("./icon-svg").ViraIconSvg;
-    readonly StatusInProgress24Icon: import("./icon-svg").ViraIconSvg;
-    readonly StatusSuccess24Icon: import("./icon-svg").ViraIconSvg;
+    readonly Check24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly ChevronUp24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly CloseX24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Element16Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Element24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly EyeClosed24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly EyeOpen24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Loader24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly LoaderAnimated24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Options24Icon: 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;
 };

package/dist/icons/index.js

@@ -1,32 +1,37 @@
 /** This file is automatically updated by update-icon-exports.ts */
-import { Check24Icon } from './icon-svgs/check-24.icon';
-import { ChevronUp24Icon } from './icon-svgs/chevron-up-24.icon';
-import { CloseX24Icon } from './icon-svgs/close-x-24.icon';
-import { Element16Icon } from './icon-svgs/element-16.icon';
-import { Element24Icon } from './icon-svgs/element-24.icon';
-import { EyeClosed24Icon } from './icon-svgs/eye-closed-24.icon';
-import { EyeOpen24Icon } from './icon-svgs/eye-open-24.icon';
-import { Loader24Icon } from './icon-svgs/loader-24.icon';
-import { LoaderAnimated24Icon } from './icon-svgs/loader-animated-24.icon';
-import { Options24Icon } from './icon-svgs/options-24.icon';
-import { StatusFailure24Icon } from './icon-svgs/status-failure-24.icon';
-import { StatusInProgress24Icon } from './icon-svgs/status-in-progress-24.icon';
-import { StatusSuccess24Icon } from './icon-svgs/status-success-24.icon';
-export * from './icon-css-vars';
-export * from './icon-svg';
-export * from './icon-svgs/check-24.icon';
-export * from './icon-svgs/chevron-up-24.icon';
-export * from './icon-svgs/close-x-24.icon';
-export * from './icon-svgs/element-16.icon';
-export * from './icon-svgs/element-24.icon';
-export * from './icon-svgs/eye-closed-24.icon';
-export * from './icon-svgs/eye-open-24.icon';
-export * from './icon-svgs/loader-24.icon';
-export * from './icon-svgs/loader-animated-24.icon';
-export * from './icon-svgs/options-24.icon';
-export * from './icon-svgs/status-failure-24.icon';
-export * from './icon-svgs/status-in-progress-24.icon';
-export * from './icon-svgs/status-success-24.icon';
+import { Check24Icon } from './icon-svgs/check-24.icon.js';
+import { ChevronUp24Icon } from './icon-svgs/chevron-up-24.icon.js';
+import { CloseX24Icon } from './icon-svgs/close-x-24.icon.js';
+import { Element16Icon } from './icon-svgs/element-16.icon.js';
+import { Element24Icon } from './icon-svgs/element-24.icon.js';
+import { EyeClosed24Icon } from './icon-svgs/eye-closed-24.icon.js';
+import { EyeOpen24Icon } from './icon-svgs/eye-open-24.icon.js';
+import { Loader24Icon } from './icon-svgs/loader-24.icon.js';
+import { LoaderAnimated24Icon } from './icon-svgs/loader-animated-24.icon.js';
+import { Options24Icon } from './icon-svgs/options-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';
+export * from './icon-css-vars.js';
+export * from './icon-svg.js';
+export * from './icon-svgs/check-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/element-16.icon.js';
+export * from './icon-svgs/element-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/loader-24.icon.js';
+export * from './icon-svgs/loader-animated-24.icon.js';
+export * from './icon-svgs/options-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';
+/**
+ * All Vira icons in an object mapped by their icon name.
+ *
+ * @category Icon
+ */
 export const allIconsByName = {
     Check24Icon,
     ChevronUp24Icon,

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /** This file is automatically updated by update-root-index-exports.ts */
-export * from './elements';
-export * from './icons';
-export * from './re-exports';
-export * from './styles';
-export * from './util';
+export * from './elements/index.js';
+export * from './icons/index.js';
+export * from './re-exports/index.js';
+export * from './styles/index.js';
+export * from './util/index.js';

package/dist/index.js

@@ -1,6 +1,6 @@
 /** This file is automatically updated by update-root-index-exports.ts */
-export * from './elements';
-export * from './icons';
-export * from './re-exports';
-export * from './styles';
-export * from './util';
+export * from './elements/index.js';
+export * from './icons/index.js';
+export * from './re-exports/index.js';
+export * from './styles/index.js';
+export * from './util/index.js';

package/dist/re-exports/colorjs-io.d.ts

@@ -1,5 +1,17 @@
 import ColorImport from 'colorjs.io';
 export type { ColorTypes } from 'colorjs.io/types/src/color';
 export type { Format } from 'colorjs.io/types/src/space';
+/**
+ * An individual color represented as a class. This is from the
+ * [colorjs.io](https://www.npmjs.com/package/colorjs.io) package.
+ *
+ * @category Internal
+ */
 export type Color = typeof ColorImport;
+/**
+ * An individual color represented as a class. This is from the
+ * [colorjs.io](https://www.npmjs.com/package/colorjs.io) package.
+ *
+ * @category Internal
+ */
 export declare const Color: Color;

package/dist/re-exports/colorjs-io.js

@@ -1,2 +1,9 @@
 import ColorImport from 'colorjs.io';
+/**
+ * An individual color represented as a class. This is from the
+ * [colorjs.io](https://www.npmjs.com/package/colorjs.io) package.
+ *
+ * @category Internal
+ */
+// eslint-disable-next-line sonarjs/no-redeclare
 export const Color = ColorImport;

package/dist/re-exports/index.d.ts

@@ -1,2 +1,2 @@
 /** This file is automatically updated by update-index-exports.ts */
-export * from './colorjs-io';
+export * from './colorjs-io.js';

package/dist/re-exports/index.js

@@ -1,2 +1,2 @@
 /** This file is automatically updated by update-index-exports.ts */
-export * from './colorjs-io';
+export * from './colorjs-io.js';

package/dist/styles/border.d.ts

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

package/dist/styles/border.js

@@ -1,4 +1,10 @@
 import { defineCssVars } from 'lit-css-vars';
+/**
+ * Border CSS vars used by Vira elements.
+ *
+ * @category CSS Vars
+ * @category Styles
+ */
 export const viraBorders = defineCssVars({
     'vira-form-input-radius': '8px',
 });

package/dist/styles/color.d.ts

@@ -1,4 +1,14 @@
 import { Format } from 'colorjs.io/types/src/space';
-import { ColorTypes } from '../re-exports/colorjs-io';
-export declare function getAssertedValidColor(input: ColorTypes | undefined): import("colorjs.io/types/src/color").default;
+import { ColorTypes } from '../re-exports/colorjs-io.js';
+/**
+ * Asserts that the given color type is valid.
+ *
+ * @category Internal
+ */
+export declare function getAssertedValidColor(input: ColorTypes | undefined): import("colorjs.io/types/index.js").default;
+/**
+ * The colorjs format for CSS RGB colors.
+ *
+ * @category Internal
+ */
 export declare const rgbCssColorFormat: Format;

package/dist/styles/color.js

@@ -1,5 +1,10 @@
 import { wrapInTry } from '@augment-vir/common';
-import { Color } from '../re-exports/colorjs-io';
+import { Color } from '../re-exports/colorjs-io.js';
+/**
+ * Asserts that the given color type is valid.
+ *
+ * @category Internal
+ */
 export function getAssertedValidColor(input) {
     try {
         if (!input) {
@@ -7,7 +12,7 @@ export function getAssertedValidColor(input) {
         }
         return new Color(input);
     }
-    catch (caught) {
+    catch {
         const stringInput = String(input);
         const inputForMessage = stringInput.toLowerCase().match(/\[\s*object\s+object\s*\]/)
             ? wrapInTry(() => JSON.stringify(input), { fallbackValue: stringInput })
@@ -15,6 +20,11 @@ export function getAssertedValidColor(input) {
         throw new Error(`Invalid color: ${inputForMessage}`);
     }
 }
+/**
+ * The colorjs format for CSS RGB colors.
+ *
+ * @category Internal
+ */
 export const rgbCssColorFormat = {
     name: 'rgb',
     coords: [

package/dist/styles/disabled.d.ts

@@ -1 +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/dist/styles/disabled.js

@@ -1,4 +1,9 @@
 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 `
     pointer-events: none;
     opacity: 0.3;

package/dist/styles/durations.d.ts

@@ -1,12 +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 show a full animation. */
-    'vira-extended-animation-duration': string;
-    /** 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 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.
      *
-     * A duration of 84ms gives us 5 frames on a 60Hz screen.
+     * The default duration of 84ms gives us 5 frames on a 60Hz screen.
      */
-    'vira-interaction-animation-duration': string;
+    readonly 'vira-interaction-animation-duration': "84ms";
 }>;

package/dist/styles/durations.js

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

package/dist/styles/focus.d.ts

@@ -1,12 +1,20 @@
+/**
+ * CSS vars for Vira focus colors.
+ *
+ * @category CSS Vars
+ * @category Styles
+ */
 export declare const viraFocusCssVars: import("lit-css-vars").CssVarDefinitions<{
-    'vira-focus-outline-color': string;
-    'vira-focus-outline-border-radius': import("element-vir").CSSResult;
+    readonly 'vira-focus-outline-color': "#59b1ff";
+    readonly 'vira-focus-outline-border-radius': import("element-vir").CSSResult;
 }>;
 /**
  * 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.
+ * 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({ selector, elementBorderSize, outlineGap, outlineWidth, }: {
     selector: string;