vira 28.5.1 → 28.6.0

package/dist/elements/index.d.ts

@@ -19,3 +19,4 @@ export * from './vira-input.element.js';
 export * from './vira-link.element.js';
 export * from './vira-modal.element.js';
 export * from './vira-progress.element.js';
+export * from './vira-select.element.js';

package/dist/elements/index.js

@@ -19,3 +19,4 @@ export * from './vira-input.element.js';
 export * from './vira-link.element.js';
 export * from './vira-modal.element.js';
 export * from './vira-progress.element.js';
+export * from './vira-select.element.js';

package/dist/elements/vira-input.element.d.ts

@@ -50,4 +50,4 @@ export declare const ViraInput: import("element-vir").DeclarativeElementDefiniti
      * that was blocked out of programmatic "value" property assignments.
      */
     inputBlocked: import("element-vir").DefineEvent<string>;
-}, "vira-input-disabled" | "vira-input-fit-text" | "vira-input-clear-button-shown" | "vira-input-error", "vira-input-background-color" | "vira-input-placeholder-color" | "vira-input-text-color" | "vira-input-border-color" | "vira-input-text-selection-color" | "vira-input-action-button-color" | "vira-input-clear-button-hover-color" | "vira-input-clear-button-active-color" | "vira-input-show-password-button-hover-color" | "vira-input-show-password-button-active-color" | "vira-input-padding-horizontal" | "vira-input-padding-vertical" | "vira-input-label-font-weight", readonly [], readonly []>;
+}, "vira-input-disabled" | "vira-input-fit-text" | "vira-input-clear-button-shown" | "vira-input-error", "vira-input-action-button-color" | "vira-input-clear-button-hover-color" | "vira-input-clear-button-active-color" | "vira-input-show-password-button-hover-color" | "vira-input-show-password-button-active-color" | "vira-input-padding-horizontal" | "vira-input-padding-vertical", readonly [], readonly []>;

package/dist/elements/vira-input.element.js

@@ -34,11 +34,6 @@ export var ViraInputType;
 export const ViraInput = defineViraElement()({
     tagName: 'vira-input',
     cssVars: {
-        'vira-input-background-color': 'white',
-        'vira-input-placeholder-color': '#cccccc',
-        'vira-input-text-color': '#000000',
-        'vira-input-border-color': '#cccccc',
-        'vira-input-text-selection-color': '#cfe9ff',
         'vira-input-action-button-color': '#aaaaaa',
         'vira-input-clear-button-hover-color': '#ff0000',
         'vira-input-clear-button-active-color': '#b30000',
@@ -48,7 +43,6 @@ export const ViraInput = defineViraElement()({
         'vira-input-show-password-button-active-color': '#0261ba',
         'vira-input-padding-horizontal': '10px',
         'vira-input-padding-vertical': '6px',
-        'vira-input-label-font-weight': 'bold',
     },
     styles: ({ hostClasses, cssVars }) => {
         return css `
@@ -57,7 +51,7 @@ export const ViraInput = defineViraElement()({
                 display: inline-flex;
                 width: 224px;
                 box-sizing: border-box;
-                color: ${cssVars['vira-input-text-color'].value};
+                color: ${viraFormCssVars['vira-form-foreground-color'].value};
             }
 
             label {
@@ -69,17 +63,13 @@ export const ViraInput = defineViraElement()({
                 max-width: 100%;
 
                 & .input-label {
-                    font-weight: ${cssVars['vira-input-label-font-weight'].value};
+                    font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
                     text-align: left;
                     flex-shrink: 0;
                     flex-wrap: wrap;
                 }
             }
 
-            ${hostClasses['vira-input-disabled'].selector} {
-                ${viraDisabledStyles};
-            }
-
             ${hostClasses['vira-input-fit-text'].selector} {
                 width: unset;
             }
@@ -144,9 +134,7 @@ export const ViraInput = defineViraElement()({
             .wrapper-border {
                 top: -1px;
                 left: -1px;
-                border: 1px solid ${cssVars['vira-input-border-color'].value};
-                transition: border
-                    ${viraAnimationDurations['vira-interaction-animation-duration'].value};
+                border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
             }
 
             .input-wrapper {
@@ -159,7 +147,7 @@ export const ViraInput = defineViraElement()({
                 position: relative;
                 padding: 0 ${cssVars['vira-input-padding-horizontal'].value};
                 border-radius: ${viraBorders['vira-form-input-radius'].value};
-                background-color: ${cssVars['vira-input-background-color'].value};
+                background-color: ${viraFormCssVars['vira-form-background-color'].value};
                 /*
                     Border colors are actually applied via the .wrapper-border class. However, we must
                     apply a border here still so that it takes up space.
@@ -195,11 +183,11 @@ export const ViraInput = defineViraElement()({
             }
 
             ::selection {
-                background: ${cssVars['vira-input-text-selection-color']
+                background: ${viraFormCssVars['vira-form-text-selection-color']
             .value}; /* WebKit/Blink Browsers */
             }
             ::-moz-selection {
-                background: ${cssVars['vira-input-text-selection-color']
+                background: ${viraFormCssVars['vira-form-text-selection-color']
             .value}; /* Gecko Browsers */
             }
 
@@ -209,7 +197,7 @@ export const ViraInput = defineViraElement()({
             }
 
             input::placeholder {
-                color: ${cssVars['vira-input-placeholder-color'].value};
+                color: ${viraFormCssVars['vira-form-placeholder-color'].value};
             }
 
             .suffix {
@@ -251,6 +239,25 @@ export const ViraInput = defineViraElement()({
                     border-color: ${viraFormCssVars['vira-form-error-foreground-color'].value};
                 }
             }
+
+            ${hostClasses['vira-input-disabled'].selector} {
+                cursor: not-allowed;
+
+                & label,
+                & .input-wrapper {
+                    cursor: not-allowed;
+                }
+
+                & input,
+                & .wrapper-border,
+                & input::placeholder {
+                    ${viraDisabledStyles};
+                }
+
+                & .focus-border {
+                    display: none;
+                }
+            }
         `;
     },
     events: {
@@ -299,16 +306,7 @@ export const ViraInput = defineViraElement()({
                   width: ${state.forcedInputWidth}px;
               `
             : nothing;
-        const shouldBlockBrowserHelps = inputs.disableBrowserHelps ||
-            /**
-             * Some browsers leaks passwords with their browser helps (like Chrome with
-             * spellchecking).
-             */
-            inputs.type === ViraInputType.Password;
-        const inputTemplate = html `
-            <span
-                class="input-wrapper"
-                ${listen('mousedown', (event) => {
+        const mousedownListener = listen('mousedown', (event) => {
             const eventTarget = extractEventTarget(event, HTMLElement, {
                 useOriginalTarget: true,
             });
@@ -317,8 +315,15 @@ export const ViraInput = defineViraElement()({
                 event.preventDefault();
                 inputElement.focus();
             }
-        })}
-            >
+        });
+        const shouldBlockBrowserHelps = inputs.disableBrowserHelps ||
+            /**
+             * Some browsers leaks passwords with their browser helps (like Chrome with
+             * spellchecking).
+             */
+            inputs.type === ViraInputType.Password;
+        const inputTemplate = html `
+            <span class="input-wrapper" ${inputs.label ? nothing : mousedownListener}>
                 ${iconTemplate}
                 ${renderIf(!!inputs.fitText, html `
                         <span
@@ -408,7 +413,7 @@ export const ViraInput = defineViraElement()({
         `;
         if (inputs.label) {
             return html `
-                <label for=${state.randomId}>
+                <label for=${state.randomId} ${mousedownListener}>
                     <span class="input-label">${inputs.label}</span>
                     ${inputTemplate}
                 </label>

package/dist/elements/vira-select.element.d.ts

@@ -0,0 +1,48 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type AttributeValues } from 'element-vir';
+import { type ViraIconSvg } from '../icons/index.js';
+/**
+ * Options for {@link ViraSelect}.
+ *
+ * @category Dropdown
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-select
+ */
+export type ViraSelectOption = {
+    /** A value or id, used to keep track of which option is selected. */
+    value: string;
+    label: string;
+} & PartialWithUndefined<{
+    disabled: boolean;
+}>;
+/**
+ * Similar to {@link ViraDropdown} but is, instead, simply a wrapper for `<select>` and nothing more.
+ *
+ * @category Dropdown
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-select
+ */
+export declare const ViraSelect: import("element-vir").DeclarativeElementDefinition<"vira-select", Readonly<{
+    options: ReadonlyArray<Readonly<ViraSelectOption>>;
+    /** The currently selected option value. */
+    value: undefined | string;
+} & PartialWithUndefined<{
+    icon: Readonly<ViraIconSvg>;
+    placeholder: string;
+    label: string;
+    disabled: boolean;
+    attributePassthrough: Readonly<PartialWithUndefined<{
+        label: AttributeValues;
+        select: AttributeValues;
+        option: AttributeValues;
+    }>>;
+    hasError: boolean;
+}>>, {
+    /**
+     * Used to couple the label and select together. This is not applied if no label is
+     * provided.
+     */
+    randomId: string;
+}, {
+    valueChange: import("element-vir").DefineEvent<string>;
+}, "vira-select-disabled" | "vira-select-error", "vira-select-padding-horizontal" | "vira-select-padding-vertical" | "vira-select-icon-padding", readonly [], readonly []>;

package/dist/elements/vira-select.element.js

@@ -0,0 +1,233 @@
+import { randomString } from '@augment-vir/common';
+import { extractEventTarget } from '@augment-vir/web';
+import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, nothing, } from 'element-vir';
+import { ChevronUp24Icon } from '../icons/index.js';
+import { viraDisabledStyles } from '../styles/disabled.js';
+import { createFocusStyles } from '../styles/focus.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { viraAnimationDurations, viraBorders } from '../styles/index.js';
+import { noNativeFormStyles } from '../styles/native-styles.js';
+import { defineViraElement } from './define-vira-element.js';
+import { ViraIcon } from './vira-icon.element.js';
+/**
+ * Similar to {@link ViraDropdown} but is, instead, simply a wrapper for `<select>` and nothing more.
+ *
+ * @category Dropdown
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-select
+ */
+export const ViraSelect = defineViraElement()({
+    tagName: 'vira-select',
+    state() {
+        return {
+            /**
+             * Used to couple the label and select together. This is not applied if no label is
+             * provided.
+             */
+            randomId: randomString(32),
+        };
+    },
+    events: {
+        valueChange: defineElementEvent(),
+    },
+    cssVars: {
+        'vira-select-padding-horizontal': '10px',
+        'vira-select-padding-vertical': '6px',
+        'vira-select-icon-padding': '44px',
+    },
+    hostClasses: {
+        'vira-select-disabled': ({ inputs }) => !!inputs.disabled,
+        'vira-select-error': ({ inputs }) => !!inputs.hasError,
+    },
+    styles: ({ hostClasses, cssVars }) => css `
+        :host {
+            position: relative;
+            display: inline-flex;
+            width: 223px;
+            box-sizing: border-box;
+            color: ${viraFormCssVars['vira-form-foreground-color'].value};
+        }
+
+        .select-wrapper {
+            ${noNativeFormStyles};
+            max-width: 100%;
+            flex-grow: 1;
+            display: inline-flex;
+            box-sizing: border-box;
+            align-items: center;
+            position: relative;
+            border-radius: ${viraBorders['vira-form-input-radius'].value};
+            background-color: ${viraFormCssVars['vira-form-background-color'].value};
+            /*
+                Border colors are actually applied via the .wrapper-border class. However, we must
+                apply a border here still so that it takes up space.
+            */
+            border: 1px solid transparent;
+            cursor: pointer;
+
+            & select {
+                appearance: none;
+                -webkit-appearance: none;
+                -moz-appearance: none;
+                font: inherit;
+                outline: none;
+                width: 100%;
+                border: none;
+                background: none;
+                border-radius: inherit;
+                padding: ${cssVars['vira-select-padding-vertical'].value} 31px
+                    ${cssVars['vira-select-padding-vertical'].value}
+                    ${cssVars['vira-select-padding-horizontal'].value};
+                cursor: pointer;
+                overflow: hidden;
+                text-overflow: ellipsis;
+
+                &:focus:focus-visible:not([aria-disabled='true']) ~ .focus-border {
+                    ${createFocusStyles({
+        elementBorderSize: 0,
+        noNesting: true,
+    })}
+                }
+
+                &.placeholder {
+                    color: ${viraFormCssVars['vira-form-placeholder-color'].value};
+                }
+
+                &.with-icon {
+                    padding-left: ${cssVars['vira-select-icon-padding'].value};
+                }
+            }
+
+            & ${ViraIcon} {
+                position: absolute;
+                pointer-events: none;
+
+                &.trigger-icon {
+                    transform: rotate(180deg);
+                    right: 3px;
+                }
+
+                &.input-icon {
+                    left: 10px;
+                }
+            }
+
+            & .border-style {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                border-radius: ${viraBorders['vira-form-input-radius'].value};
+                z-index: 0;
+                pointer-events: none;
+            }
+
+            & .wrapper-border {
+                top: -1px;
+                left: -1px;
+                border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
+                transition: border
+                    ${viraAnimationDurations['vira-interaction-animation-duration'].value};
+            }
+        }
+
+        label {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            gap: 2px;
+            width: 100%;
+            max-width: 100%;
+
+            & .select-label {
+                font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
+                text-align: left;
+                flex-shrink: 0;
+                flex-wrap: wrap;
+            }
+        }
+
+        ${hostClasses['vira-select-disabled'].selector} {
+            cursor: not-allowed;
+
+            & label {
+                cursor: not-allowed;
+            }
+
+            & select,
+            & .wrapper-border {
+                ${viraDisabledStyles}
+            }
+        }
+
+        ${hostClasses['vira-select-error'].selector} {
+            & .wrapper-border {
+                border-color: ${viraFormCssVars['vira-form-error-foreground-color'].value};
+            }
+        }
+    `,
+    render({ inputs, state, dispatch, events }) {
+        const placeholderOptionTemplate = inputs.placeholder
+            ? html `
+                  <option value="" disabled ?selected=${inputs.value == undefined}>
+                      ${inputs.placeholder}
+                  </option>
+              `
+            : nothing;
+        const selectTemplate = html `
+            <span class="select-wrapper">
+                <select
+                    class=${classMap({
+            placeholder: !inputs.value && !!inputs.placeholder,
+            'with-icon': !!inputs.icon,
+        })}
+                    tabindex=${inputs.disabled ? -1 : 0}
+                    id=${ifDefined(inputs.label ? state.randomId : undefined)}
+                    aria-label=${ifDefined(inputs.label || undefined)}
+                    aria-disabled=${ifDefined(inputs.disabled ? 'true' : undefined)}
+                    ${listen('input', (event) => {
+            const element = extractEventTarget(event, HTMLSelectElement);
+            dispatch(new events.valueChange(element.value));
+        })}
+                    ${attributes(inputs.attributePassthrough?.select)}
+                >
+                    ${placeholderOptionTemplate}
+                    ${inputs.options.map((option) => {
+            return html `
+                            <option
+                                ?selected=${option.value === inputs.value}
+                                aria-label=${option.label}
+                                ?disabled=${option.disabled}
+                            >
+                                ${option.label}
+                            </option>
+                        `;
+        })}
+                </select>
+                <!--
+                    These separate style elements are necessary so that we can select them as
+                    siblings of the focused <select> element.
+                -->
+
+                <div class="border-style focus-border"></div>
+
+                <div class="border-style wrapper-border"></div>
+
+                <${ViraIcon.assign({ icon: inputs.icon })} class="input-icon"></${ViraIcon}>
+                <${ViraIcon.assign({ icon: ChevronUp24Icon })} class="trigger-icon"></${ViraIcon}>
+            </span>
+        `;
+        if (inputs.label) {
+            return html `
+                <label for=${state.randomId} ${attributes(inputs.attributePassthrough?.label)}>
+                    <span class="select-label">${inputs.label}</span>
+                    ${selectTemplate}
+                </label>
+            `;
+        }
+        else {
+            return selectTemplate;
+        }
+    },
+});

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

@@ -6,12 +6,15 @@
  */
 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': "#d2eaff";
     readonly 'vira-form-selection-hover-foreground-color': "black";
     readonly 'vira-form-selection-active-background-color': "#d2eaff";
     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";
 }>;

package/dist/styles/form-styles.js

@@ -7,12 +7,15 @@ 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': '#d2eaff',
     'vira-form-selection-hover-foreground-color': 'black',
     'vira-form-selection-active-background-color': '#d2eaff',
     '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/native-styles.js

@@ -20,6 +20,7 @@ export const noNativeFormStyles = css `
     background: none;
     border: none;
     font: inherit;
+    line-height: inherit;
     color: inherit;
     text-transform: inherit;
     text-decoration: inherit;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "28.5.1",
+    "version": "28.6.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",