vira 28.19.4 → 28.19.6

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

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

@@ -1,4 +1,5 @@
-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.js → src/styles/form-styles.ts}

@@ -1,4 +1,5 @@
-import { defineCssVars } from 'lit-css-vars';
+import {defineCssVars} from 'lit-css-vars';
+
 /**
  * CSS vars for vira form elements.
  *
@@ -8,14 +9,18 @@ import { defineCssVars } from 'lit-css-vars';
 export const viraFormCssVars = defineCssVars({
     'vira-form-border-color': '#cccccc',
     'vira-form-placeholder-color': '#cccccc',
+
     'vira-form-background-color': 'white',
     'vira-form-foreground-color': 'black',
+
     'vira-form-text-selection-color': '#cfe9ff',
     'vira-form-selection-hover-background-color': '#e6f9fe',
     'vira-form-selection-hover-foreground-color': 'black',
     'vira-form-selection-active-background-color': '#e6f9fe',
     'vira-form-selection-active-foreground-color': 'black',
+
     'vira-form-error-foreground-color': 'red',
     'vira-form-success-foreground-color': 'green',
+
     'vira-form-label-font-weight': 'bold',
 });

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

@@ -1,4 +1,5 @@
 /** This file is automatically updated by update-index-exports.ts */
+
 export * from './border.js';
 export * from './disabled.js';
 export * from './durations.js';

package/{dist/styles/native-styles.js → src/styles/native-styles.ts}

@@ -1,20 +1,22 @@
-import { css } from 'element-vir';
+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 `
+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 `
+export const noNativeFormStyles = css`
     ${noNativeSpacing};
     cursor: unset;
     background: none;

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

@@ -1,11 +1,12 @@
-import { css, unsafeCSS } from 'element-vir';
+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 `
+export function hideScrollbars(selector: string) {
+    return css`
         ${unsafeCSS(selector)} {
             /* hide scrollbars in Firefox */
             scrollbar-width: none;

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

@@ -1,5 +1,6 @@
-import { css } from 'element-vir';
-import { defineCssVars } from 'lit-css-vars';
+import {type CSSResult, css} from 'element-vir';
+import {defineCssVars} from 'lit-css-vars';
+
 /**
  * CSS Vars for shadows.
  *
@@ -9,27 +10,28 @@ export const shadowCssVars = defineCssVars({
     'menu-shadow-color': '#e2e2e2',
     'modal-shadow-color': '#4f4f4f',
 });
+
 /**
  * CSS chunks for default Vira shadow styles.
  *
  * @category Styles
  */
 export const viraShadows = {
-    menuShadow: css `
+    menuShadow: css`
         filter: drop-shadow(0px 5px 5px ${shadowCssVars['menu-shadow-color'].value});
         /*
            This helps force the drop shadow to re-render when the element moves or the page changes.
        */
         will-change: filter;
     `,
-    menuShadowReversed: css `
+    menuShadowReversed: css`
         filter: drop-shadow(0px -5px 5px ${shadowCssVars['menu-shadow-color'].value});
         /*
            This helps force the drop shadow to re-render when the element moves or the page changes.
        */
         will-change: filter;
     `,
-    modal: css `
+    modal: css`
         box-shadow: 0 5px 15px ${shadowCssVars['modal-shadow-color'].value};
     `,
-};
+} as const satisfies Record<string, CSSResult>;

package/{dist/styles/user-select.js → src/styles/user-select.ts}

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

package/{dist/styles/vira-color-palette.js → src/styles/vira-color-palette.ts}

@@ -1,8 +1,10 @@
-import { defineCssVars } from 'lit-css-vars';
+import {defineCssVars} from 'lit-css-vars';
+
 /** Generously contributed by Trent Hazy, modified to more uniform contrast levels. */
 export const viraColorPalette = defineCssVars({
     'vira-white': '#ffffff',
     'vira-black': '#000000',
+
     'vira-red-5': '#ffe9e6',
     'vira-red-10': '#ffd9d6',
     'vira-red-20': '#ffc1bc',
@@ -13,6 +15,7 @@ export const viraColorPalette = defineCssVars({
     'vira-red-70': '#d2001e',
     'vira-red-80': '#a60012',
     'vira-red-90': '#760004',
+
     'vira-orange-5': '#ffebd1',
     'vira-orange-10': '#ffdcab',
     'vira-orange-20': '#ffc768',
@@ -23,6 +26,7 @@ export const viraColorPalette = defineCssVars({
     'vira-orange-70': '#a85800',
     'vira-orange-80': '#884400',
     'vira-orange-90': '#682800',
+
     'vira-yellow-5': '#f5f0c6',
     'vira-yellow-10': '#eee399',
     'vira-yellow-20': '#e9d100',
@@ -33,6 +37,7 @@ export const viraColorPalette = defineCssVars({
     'vira-yellow-70': '#7d6e00',
     'vira-yellow-80': '#635700',
     'vira-yellow-90': '#473d00',
+
     'vira-green-5': '#def6cc',
     'vira-green-10': '#c4eea3',
     'vira-green-20': '#94e53b',
@@ -43,6 +48,7 @@ export const viraColorPalette = defineCssVars({
     'vira-green-70': '#427c00',
     'vira-green-80': '#316200',
     'vira-green-90': '#1f4600',
+
     'vira-teal-5': '#d3f5ed',
     'vira-teal-10': '#aeeedf',
     'vira-teal-20': '#4ce6cc',
@@ -53,6 +59,7 @@ export const viraColorPalette = defineCssVars({
     'vira-teal-70': '#007c68',
     'vira-teal-80': '#006252',
     'vira-teal-90': '#004539',
+
     'vira-blue-5': '#def1ff',
     'vira-blue-10': '#c0e7ff',
     'vira-blue-20': '#9dd7ff',
@@ -63,6 +70,7 @@ export const viraColorPalette = defineCssVars({
     'vira-blue-70': '#1971b7',
     'vira-blue-80': '#00579a',
     'vira-blue-90': '#003a7b',
+
     'vira-purple-5': '#f3ebff',
     'vira-purple-10': '#e8dcff',
     'vira-purple-20': '#e1c5ff',
@@ -73,6 +81,7 @@ export const viraColorPalette = defineCssVars({
     'vira-purple-70': '#8a3cf2',
     'vira-purple-80': '#710dd3',
     'vira-purple-90': '#4c0099',
+
     'vira-pink-5': '#ffe7fb',
     'vira-pink-10': '#ffd5f7',
     'vira-pink-20': '#ffbaf5',
@@ -83,6 +92,7 @@ export const viraColorPalette = defineCssVars({
     'vira-pink-70': '#b3408b',
     'vira-pink-80': '#962472',
     'vira-pink-90': '#6f0050',
+
     'vira-grey-5': '#eeeef1',
     'vira-grey-10': '#e1e1e4',
     'vira-grey-20': '#d0d0d6',