vira 22.2.2 → 23.1.0

package/dist/icons/index.js

@@ -1,36 +1,50 @@
 /** 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 { Chat24Icon } from './icon-svgs/chat-24.icon.js';
+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 { Commit24Icon } from './icon-svgs/commit-24.icon.js';
+import { Document24Icon } from './icon-svgs/document-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 { Pencil24Icon } from './icon-svgs/pencil-24.icon.js';
+import { Shield24Icon } from './icon-svgs/shield-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';
+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 = {
+    Chat24Icon,
     Check24Icon,
     ChevronUp24Icon,
     CloseX24Icon,
+    Commit24Icon,
+    Document24Icon,
     Element16Icon,
     Element24Icon,
     EyeClosed24Icon,
@@ -38,6 +52,9 @@ export const allIconsByName = {
     Loader24Icon,
     LoaderAnimated24Icon,
     Options24Icon,
+    Pencil24Icon,
+    Shield24Icon,
+    Star24Icon,
     StatusFailure24Icon,
     StatusInProgress24Icon,
     StatusSuccess24Icon,

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,8 @@
 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
+ */
 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").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 { stringify } from '@augment-vir/common';
+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,14 +12,15 @@ export function getAssertedValidColor(input) {
         }
         return new Color(input);
     }
-    catch (caught) {
-        const stringInput = String(input);
-        const inputForMessage = stringInput.toLowerCase().match(/\[\s*object\s+object\s*\]/)
-            ? wrapInTry(() => JSON.stringify(input), { fallbackValue: stringInput })
-            : stringInput;
-        throw new Error(`Invalid color: ${inputForMessage}`);
+    catch {
+        throw new Error(`Invalid color: ${stringify(input)}`);
     }
 }
+/**
+ * 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;

package/dist/styles/focus.js

@@ -1,7 +1,13 @@
 import { addPx } from '@augment-vir/common';
 import { css, unsafeCSS } from 'element-vir';
 import { defineCssVars } from 'lit-css-vars';
-import { viraBorders } from './border';
+import { viraBorders } from './border.js';
+/**
+ * CSS vars for Vira focus colors.
+ *
+ * @category CSS Vars
+ * @category Styles
+ */
 export const viraFocusCssVars = defineCssVars({
     'vira-focus-outline-color': '#59b1ff',
     'vira-focus-outline-border-radius': css `calc(${viraBorders['vira-form-input-radius'].value} + 4px)`,
@@ -9,8 +15,10 @@ export const viraFocusCssVars = defineCssVars({
 /**
  * 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 function createFocusStyles({ selector, elementBorderSize, outlineGap = 2, outlineWidth = 2, }) {
     const outlineSpacing = unsafeCSS(addPx(outlineWidth + outlineGap + elementBorderSize));

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

@@ -1,8 +1,14 @@
+/**
+ * CSS vars for vira form elements.
+ *
+ * @category CSS Vars
+ * @category Styles
+ */
 export declare const viraFormCssVars: import("lit-css-vars").CssVarDefinitions<{
-    'vira-form-border-color': string;
-    'vira-form-background-color': string;
-    'vira-form-foreground-color': string;
-    'vira-form-focus-color': import("lit").CSSResult;
-    'vira-form-selection-hover-background-color': string;
-    'vira-form-selection-hover-foreground-color': string;
+    readonly 'vira-form-border-color': "#cccccc";
+    readonly 'vira-form-background-color': "white";
+    readonly 'vira-form-foreground-color': "black";
+    readonly 'vira-form-focus-color': import("lit").CSSResult;
+    readonly 'vira-form-selection-hover-background-color': "#d2eaff";
+    readonly 'vira-form-selection-hover-foreground-color': "black";
 }>;

package/dist/styles/form-themes.js

@@ -1,5 +1,11 @@
 import { defineCssVars } from 'lit-css-vars';
-import { viraFocusCssVars } from './focus';
+import { viraFocusCssVars } from './focus.js';
+/**
+ * CSS vars for vira form elements.
+ *
+ * @category CSS Vars
+ * @category Styles
+ */
 export const viraFormCssVars = defineCssVars({
     'vira-form-border-color': '#cccccc',
     'vira-form-background-color': 'white',

package/dist/styles/index.d.ts

@@ -1,11 +1,11 @@
 /** This file is automatically updated by update-index-exports.ts */
-export * from './border';
-export * from './color';
-export * from './disabled';
-export * from './durations';
-export * from './focus';
-export * from './form-themes';
-export * from './native-styles';
-export * from './scrollbar';
-export * from './shadows';
-export * from './user-select';
+export * from './border.js';
+export * from './color.js';
+export * from './disabled.js';
+export * from './durations.js';
+export * from './focus.js';
+export * from './form-themes.js';
+export * from './native-styles.js';
+export * from './scrollbar.js';
+export * from './shadows.js';
+export * from './user-select.js';

package/dist/styles/index.js

@@ -1,11 +1,11 @@
 /** This file is automatically updated by update-index-exports.ts */
-export * from './border';
-export * from './color';
-export * from './disabled';
-export * from './durations';
-export * from './focus';
-export * from './form-themes';
-export * from './native-styles';
-export * from './scrollbar';
-export * from './shadows';
-export * from './user-select';
+export * from './border.js';
+export * from './color.js';
+export * from './disabled.js';
+export * from './durations.js';
+export * from './focus.js';
+export * from './form-themes.js';
+export * from './native-styles.js';
+export * from './scrollbar.js';
+export * from './shadows.js';
+export * from './user-select.js';

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

@@ -1,2 +1,13 @@
+/**
+ * A chunk of CSS that succinctly removes all padding and margin from an element.
+ *
+ * @category Styles
+ */
 export declare const noNativeSpacing: import("element-vir").CSSResult;
+/**
+ * A chunk of CSS that succinctly removes all default built-in form element styles. This is
+ * particularly useful for `<button>` elements.
+ *
+ * @category Styles
+ */
 export declare const noNativeFormStyles: import("element-vir").CSSResult;

package/dist/styles/native-styles.js

@@ -1,8 +1,19 @@
 import { css } from 'element-vir';
+/**
+ * A chunk of CSS that succinctly removes all padding and margin from an element.
+ *
+ * @category Styles
+ */
 export const noNativeSpacing = css `
     padding: 0;
     margin: 0;
 `;
+/**
+ * A chunk of CSS that succinctly removes all default built-in form element styles. This is
+ * particularly useful for `<button>` elements.
+ *
+ * @category Styles
+ */
 export const noNativeFormStyles = css `
     ${noNativeSpacing};
     cursor: unset;

package/dist/styles/scrollbar.d.ts

@@ -1 +1,6 @@
+/**
+ * A function that generates CSS to hide scrollbars for the given CSS selector.
+ *
+ * @category Styles
+ */
 export declare function hideScrollbars(selector: string): import("element-vir").CSSResult;

package/dist/styles/scrollbar.js

@@ -1,4 +1,9 @@
 import { css, unsafeCSS } from 'element-vir';
+/**
+ * A function that generates CSS to hide scrollbars for the given CSS selector.
+ *
+ * @category Styles
+ */
 export function hideScrollbars(selector) {
     return css `
         ${unsafeCSS(selector)} {

package/dist/styles/shadows.d.ts

@@ -1,4 +1,9 @@
 import { CSSResult } from 'element-vir';
+/**
+ * CSS chunks for default Vira shadow styles.
+ *
+ * @category Styles
+ */
 export declare const viraShadows: {
     readonly menuShadow: CSSResult;
     readonly menuShadowReversed: CSSResult;

package/dist/styles/shadows.js

@@ -1,5 +1,10 @@
 import { css } from 'element-vir';
 const shadowColor = css `#e2e2e2`;
+/**
+ * CSS chunks for default Vira shadow styles.
+ *
+ * @category Styles
+ */
 export const viraShadows = {
     menuShadow: css `
         filter: drop-shadow(0px 5px 5px ${shadowColor});

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

@@ -1 +1,6 @@
+/**
+ * A chunk of CSS that disables user selection.
+ *
+ * @category Styles
+ */
 export declare const noUserSelect: import("element-vir").CSSResult;

package/dist/styles/user-select.js

@@ -1,4 +1,9 @@
 import { css } from 'element-vir';
+/**
+ * A chunk of CSS that disables user selection.
+ *
+ * @category Styles
+ */
 export const noUserSelect = css `
     /* iOS Safari */
     -webkit-touch-callout: none;

package/dist/util/index.d.ts

@@ -1 +1 @@
-export * from './pop-up-manager';
+export * from './pop-up-manager.js';

package/dist/util/index.js

@@ -1 +1 @@
-export * from './pop-up-manager';
+export * from './pop-up-manager.js';