vira 28.19.6 → 29.0.0

package/src/elements/vira-overflow-switch.element.ts

@@ -1,137 +0,0 @@
-import {css, html, onDomCreated} from 'element-vir';
-import {type RequireExactlyOne} from 'type-fest';
-import {listenTo} from 'typed-event-target';
-import {defineViraElement} from './define-vira-element.js';
-
-/**
- * An element switches between two slots based on their overflow.
- *
- * @category Elements
- * @see https://electrovir.github.io/vira/book/elements/vira-overflow-switch
- */
-export const ViraOverflowSwitch = defineViraElement<
-    Readonly<
-        RequireExactlyOne<{
-            automaticallySwitch: boolean;
-            useSmall: boolean;
-        }>
-    >
->()({
-    tagName: 'vira-overflow-switch',
-    slotNames: [
-        /** The child to render, if it fits. */
-        'large',
-        /** The child to render if the large one does not fit. */
-        'small',
-    ],
-    state() {
-        return {
-            isOverflowing: false,
-            resizeObserver: undefined as undefined | ResizeObserver,
-            /** Called on cleanup to clear all listeners. */
-            cleanup: undefined as undefined | (() => void),
-        };
-    },
-    hostClasses: {
-        'vira-overflow-switch-show-small': ({state, inputs}) =>
-            state.isOverflowing || !!inputs.useSmall,
-    },
-    styles: ({hostClasses}) => css`
-        :host {
-            display: inline-block;
-            max-width: 100%;
-        }
-
-        .large,
-        .small {
-            display: inline-block;
-        }
-
-        .small {
-            display: none;
-        }
-
-        /**
-         * When the large content overflows, hide it but keep it in layout so we can measure it.
-         * The small content is then shown instead.
-         */
-        ${hostClasses['vira-overflow-switch-show-small'].selector} .large {
-            visibility: hidden;
-            position: absolute;
-            top: 0;
-            left: 0;
-        }
-
-        ${hostClasses['vira-overflow-switch-show-small'].selector} .small {
-            display: inline-block;
-        }
-    `,
-    cleanup({state, updateState}) {
-        state.cleanup?.();
-        updateState({
-            cleanup: undefined,
-        });
-    },
-    render({slotNames, updateState, inputs, host, state}) {
-        return html`
-            <div
-                class="large"
-                ${onDomCreated((largeElement) => {
-                    if (!inputs.automaticallySwitch) {
-                        return;
-                    }
-
-                    const overflowParams: Parameters<typeof updateOverflowing>[0] = {
-                        elementToTest: largeElement,
-                        host,
-                        updateState,
-                    };
-
-                    const resizeObserver = new ResizeObserver(() => {
-                        updateOverflowing(overflowParams);
-                    });
-
-                    resizeObserver.observe(host);
-
-                    /**
-                     * Also observe the large slot wrapper itself in case its own layout changes
-                     * without host resizing.
-                     */
-                    resizeObserver.observe(largeElement);
-
-                    const removeSlotChangeListener = listenTo(largeElement, 'slotchange', () => {
-                        updateOverflowing(overflowParams);
-                    });
-
-                    /** Initial measurement: defer until after first layout. */
-                    updateOverflowing(overflowParams);
-
-                    state.cleanup?.();
-                    updateState({
-                        cleanup() {
-                            resizeObserver.disconnect();
-                            removeSlotChangeListener();
-                        },
-                    });
-                })}
-            >
-                <slot name=${slotNames.large}></slot>
-            </div>
-            <div class="small"><slot name=${slotNames.small}></slot></div>
-        `;
-    },
-});
-
-function updateOverflowing({
-    elementToTest,
-    host,
-    updateState,
-}: {
-    host: Element;
-    updateState: (newState: Partial<{isOverflowing: boolean}>) => void;
-    elementToTest: Element;
-}) {
-    const isOverflowing = elementToTest.scrollWidth > host.clientWidth;
-
-    updateState({isOverflowing});
-}

package/src/icons/icon-color.test-helper.ts

@@ -1,9 +0,0 @@
-export enum ColorType {
-    Color = 'color',
-    Fill = 'fill',
-    Stroke = 'stroke',
-}
-
-export function extractIconColor(element: Element, colorType: ColorType) {
-    return window.getComputedStyle(element).getPropertyValue(colorType);
-}

package/src/icons/icon-svg.ts

@@ -1,71 +0,0 @@
-import {getObjectTypedKeys, stringify} from '@augment-vir/common';
-import Color, {type ColorTypes} from 'colorjs.io';
-import {type TemplateResult, html} from 'element-vir';
-import {viraIconCssVars} from './icon-css-vars.js';
-
-/**
- * An individual Vira icon SVG definition.
- *
- * @category Icon
- */
-export type ViraIconSvg = {
-    name: string;
-    svgTemplate: TemplateResult;
-};
-
-/**
- * A function used to define an individual Vira icon SVG.
- *
- * @category Icon
- */
-export function defineIcon({
-    name,
-    svgTemplate,
-}: {
-    name: string;
-    svgTemplate: TemplateResult;
-}): ViraIconSvg {
-    const iconSvg: ViraIconSvg = {
-        name,
-        svgTemplate,
-    };
-
-    return iconSvg;
-}
-
-function getAssertedValidColor(input: ColorTypes | undefined) {
-    try {
-        if (!input) {
-            throw new Error('invalid empty color');
-        }
-        return new Color(input);
-    } catch {
-        throw new Error(`Invalid color: ${stringify(input)}`);
-    }
-}
-
-/**
- * Wraps an existing icon with a specific color and outputs another icon that can be used anywhere
- * the original icon can be used.
- *
- * @category Icon
- */
-export function createColoredIcon(
-    icon: ViraIconSvg,
-    colors: Partial<Record<keyof typeof viraIconCssVars, string>>,
-): ViraIconSvg {
-    const colorStyles = getObjectTypedKeys(colors)
-        .map((cssVarName) => {
-            const colorValue = colors[cssVarName];
-            const color = getAssertedValidColor(colorValue);
-            return `${viraIconCssVars[cssVarName].name}: ${color.toString()};`;
-        })
-        .join(' ');
-
-    return defineIcon({
-        name: icon.name,
-        svgTemplate: html`
-            <div style=${colorStyles}>${icon.svgTemplate}</div>
-        `,
-    });
-}

package/src/styles/border.ts

@@ -1,11 +0,0 @@
-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/src/styles/focus.ts

@@ -1,76 +0,0 @@
-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.
- *
- * @category CSS Vars
- * @category Styles
- */
-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)`,
-    },
-});
-
-/**
- * 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 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`
-        content: '';
-        top: calc(${outlineSpacing} * -1);
-        left: calc(${outlineSpacing} * -1);
-        position: absolute;
-        width: calc(100% + calc(${outlineSpacing} * 2));
-        height: calc(100% + calc(${outlineSpacing} * 2));
-        box-sizing: border-box;
-        pointer-events: none;
-        border: ${outlineWidth}px solid ${viraFocusCssVars['vira-focus-outline-color'].value};
-        border-radius: ${viraFocusCssVars['vira-focus-outline-border-radius'].value};
-        z-index: 100;
-    `;
-
-    if (noNesting) {
-        return styles;
-    }
-
-    return css`
-        outline: none;
-
-        &:focus {
-            outline: none;
-        }
-
-        &:focus:focus-visible:not(:active):not([disabled])::after {
-            ${styles}
-        }
-    `;
-}

package/src/styles/form-styles.ts

@@ -1,26 +0,0 @@
-import {defineCssVars} from 'lit-css-vars';
-
-/**
- * CSS vars for vira form elements.
- *
- * @category CSS Vars
- * @category Styles
- */
-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/src/styles/vira-color-palette.ts

@@ -1,106 +0,0 @@
-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',
-    'vira-red-30': '#ffa6a2',
-    'vira-red-40': '#ff8887',
-    'vira-red-50': '#ff6065',
-    'vira-red-60': '#f9163a',
-    'vira-red-70': '#d2001e',
-    'vira-red-80': '#a60012',
-    'vira-red-90': '#760004',
-
-    'vira-orange-5': '#ffebd1',
-    'vira-orange-10': '#ffdcab',
-    'vira-orange-20': '#ffc768',
-    'vira-orange-30': '#ffac3a',
-    'vira-orange-40': '#f49400',
-    'vira-orange-50': '#dd8100',
-    'vira-orange-60': '#c66b00',
-    'vira-orange-70': '#a85800',
-    'vira-orange-80': '#884400',
-    'vira-orange-90': '#682800',
-
-    'vira-yellow-5': '#f5f0c6',
-    'vira-yellow-10': '#eee399',
-    'vira-yellow-20': '#e9d100',
-    'vira-yellow-30': '#d6bf00',
-    'vira-yellow-40': '#c1ac00',
-    'vira-yellow-50': '#ad9800',
-    'vira-yellow-60': '#958400',
-    'vira-yellow-70': '#7d6e00',
-    'vira-yellow-80': '#635700',
-    'vira-yellow-90': '#473d00',
-
-    'vira-green-5': '#def6cc',
-    'vira-green-10': '#c4eea3',
-    'vira-green-20': '#94e53b',
-    'vira-green-30': '#81d316',
-    'vira-green-40': '#71bf00',
-    'vira-green-50': '#5eaa00',
-    'vira-green-60': '#509400',
-    'vira-green-70': '#427c00',
-    'vira-green-80': '#316200',
-    'vira-green-90': '#1f4600',
-
-    'vira-teal-5': '#d3f5ed',
-    'vira-teal-10': '#aeeedf',
-    'vira-teal-20': '#4ce6cc',
-    'vira-teal-30': '#31d3ba',
-    'vira-teal-40': '#00c0a7',
-    'vira-teal-50': '#00aa93',
-    'vira-teal-60': '#00937e',
-    'vira-teal-70': '#007c68',
-    'vira-teal-80': '#006252',
-    'vira-teal-90': '#004539',
-
-    'vira-blue-5': '#def1ff',
-    'vira-blue-10': '#c0e7ff',
-    'vira-blue-20': '#9dd7ff',
-    'vira-blue-30': '#78c5ff',
-    'vira-blue-40': '#5fb1fc',
-    'vira-blue-50': '#4d9de7',
-    'vira-blue-60': '#3588d0',
-    'vira-blue-70': '#1971b7',
-    'vira-blue-80': '#00579a',
-    'vira-blue-90': '#003a7b',
-
-    'vira-purple-5': '#f3ebff',
-    'vira-purple-10': '#e8dcff',
-    'vira-purple-20': '#e1c5ff',
-    'vira-purple-30': '#d1afff',
-    'vira-purple-40': '#c198ff',
-    'vira-purple-50': '#b07dff',
-    'vira-purple-60': '#a25cff',
-    'vira-purple-70': '#8a3cf2',
-    'vira-purple-80': '#710dd3',
-    'vira-purple-90': '#4c0099',
-
-    'vira-pink-5': '#ffe7fb',
-    'vira-pink-10': '#ffd5f7',
-    'vira-pink-20': '#ffbaf5',
-    'vira-pink-30': '#ff9ee6',
-    'vira-pink-40': '#fa82cc',
-    'vira-pink-50': '#e46eb8',
-    'vira-pink-60': '#cd58a2',
-    'vira-pink-70': '#b3408b',
-    'vira-pink-80': '#962472',
-    'vira-pink-90': '#6f0050',
-
-    'vira-grey-5': '#eeeef1',
-    'vira-grey-10': '#e1e1e4',
-    'vira-grey-20': '#d0d0d6',
-    'vira-grey-30': '#bebec3',
-    'vira-grey-40': '#ababb2',
-    'vira-grey-50': '#98989c',
-    'vira-grey-60': '#838489',
-    'vira-grey-70': '#6e6e73',
-    'vira-grey-80': '#57575c',
-    'vira-grey-90': '#3d3d43',
-});