vira 28.5.1 → 28.7.0

package/dist/elements/index.d.ts

@@ -13,9 +13,11 @@ export * from './vira-checkbox.element.js';
 export * from './vira-collapsible-wrapper.element.js';
 export * from './vira-dropdown.element.js';
 export * from './vira-error.element.js';
+export * from './vira-form.element.js';
 export * from './vira-icon.element.js';
 export * from './vira-image.element.js';
 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

@@ -13,9 +13,11 @@ export * from './vira-checkbox.element.js';
 export * from './vira-collapsible-wrapper.element.js';
 export * from './vira-dropdown.element.js';
 export * from './vira-error.element.js';
+export * from './vira-form.element.js';
 export * from './vira-icon.element.js';
 export * from './vira-image.element.js';
 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/shared-text-input-logic.d.ts

@@ -1,3 +1,4 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
 import { type AttributeValues } from 'element-vir';
 /**
  * Inputs shared between the multiple input elements.
@@ -6,10 +7,11 @@ import { type AttributeValues } from 'element-vir';
  */
 export type SharedTextInputElementInputs = {
     value: string;
+} & PartialWithUndefined<{
     /** Shown when no other text is present. Input restrictions do not apply to this property. */
-    placeholder?: string;
+    placeholder: string;
     /** Set to true to trigger disabled styles and to block all user input. */
-    disabled?: boolean;
+    disabled: boolean;
     /**
      * Only letters in the given string or matches to the given RegExp will be allowed.
      * blockedInputs takes precedence over this input.
@@ -17,16 +19,16 @@ export type SharedTextInputElementInputs = {
      * For example: if allowedInputs is set to "abcd" and blockedInputs is set to "d", only "a",
      * "b", or "c" letters will be allowed.
      */
-    allowedInputs?: string | RegExp;
+    allowedInputs: string | RegExp;
     /** Any letters in the given string or matches to the given RegExp will be blocked. */
-    blockedInputs?: string | RegExp;
+    blockedInputs: string | RegExp;
     /** Disable all browser helps like spellchecking, autocomplete, etc. */
-    disableBrowserHelps?: boolean;
+    disableBrowserHelps: boolean;
     /** Set this to true to make the whole element size to only fit the input text. */
-    fitText?: boolean;
+    fitText: boolean;
     /** A set of attributes that will be applied to the inner native text element. */
-    attributePassthrough?: AttributeValues | undefined;
-};
+    attributePassthrough: AttributeValues;
+}>;
 /**
  * Inputs used to check if the current input element value is allowed.
  *

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

@@ -17,6 +17,7 @@ export type ViraCheckboxInputs = PartialWithUndefined<{
     attributePassthrough: Record<ViraCheckboxInnerElements, AttributeValues>;
     disabled: boolean;
     label: string;
+    hasError: boolean;
 }> & {
     value: boolean;
 };

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

@@ -34,22 +34,22 @@ export const ViraCheckbox = defineViraElement()({
 
         label {
             display: inline-flex;
-            gap: 8px;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 4px;
 
             &.disabled {
                 cursor: not-allowed;
             }
 
-            & .text {
+            & .label-text {
                 cursor: pointer;
-                &::first-line {
-                    line-height: 24px;
-                }
+                font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
             }
         }
 
         ${ViraIcon} {
-            ${viraIconCssVars['vira-icon-stroke-width'].name}: 3px;
+            ${viraIconCssVars['vira-icon-stroke-width'].name}: 2px;
             opacity: 0;
         }
 
@@ -71,6 +71,10 @@ export const ViraCheckbox = defineViraElement()({
                 }
             }
 
+            &.error {
+                border-color: ${viraFormCssVars['vira-form-error-foreground-color'].value};
+            }
+
             &:hover {
                 background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
         .value};
@@ -98,7 +102,7 @@ export const ViraCheckbox = defineViraElement()({
         const textLabel = inputs.label
             ? html `
                   <span
-                      class="text"
+                      class="label-text"
                       ${attributes(inputs.attributePassthrough?.['text'])}
                       style=${ifDefined(inputs.stylePassthrough?.['text'])}
                   >
@@ -113,12 +117,14 @@ export const ViraCheckbox = defineViraElement()({
         })}
                 ${attributes(inputs.attributePassthrough?.label)}
                 style=${ifDefined(inputs.stylePassthrough?.label)}
-                ${listen('click', updateValue)}
+                ${listen('mousedown', updateValue)}
             >
+                ${textLabel}
                 <span
                     class="custom-checkbox ${classMap({
             checked: inputs.value,
             disabled: !!inputs.disabled,
+            error: !!inputs.hasError,
         })}"
                     role="checkbox"
                     aria-checked=${inputs.value ? 'true' : 'false'}
@@ -136,7 +142,6 @@ export const ViraCheckbox = defineViraElement()({
                         style=${ifDefined(inputs.stylePassthrough?.[ViraIcon.tagName])}
                     ></${ViraIcon}>
                 </span>
-                ${textLabel}
             </label>
         `;
     },

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

@@ -0,0 +1,69 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type ViraIconSvg } from '../icons/icon-svg.js';
+import { type ViraSelectOption } from './vira-select.element.js';
+/**
+ * Form field types for {@link ViraFormField}.
+ *
+ * @category Internal
+ */
+export declare enum ViraFormFieldType {
+    Text = "text",
+    /** Allows auto complete for _existing_ passwords used on this website (for login). */
+    ExistingPassword = "existing-password",
+    /** Allows auto complete for _new_ passwords used on this website (for login). */
+    NewPassword = "new-password",
+    Email = "email",
+    Select = "select",
+    Checkbox = "checkbox"
+}
+/**
+ * An individual form field for {@link ViraFormFields}.
+ *
+ * @category Internal
+ */
+export type ViraFormField = {
+    type: ViraFormFieldType.Text | ViraFormFieldType.ExistingPassword | ViraFormFieldType.NewPassword | ViraFormFieldType.Email;
+    label: string;
+    value: string;
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    icon?: ViraIconSvg | undefined;
+    hasError?: boolean | undefined;
+    isUsername?: boolean | undefined;
+} | {
+    type: ViraFormFieldType.Select;
+    label: string;
+    value: string | undefined;
+    options: ReadonlyArray<Readonly<ViraSelectOption>>;
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    icon?: ViraIconSvg | undefined;
+    hasError?: boolean | undefined;
+} | {
+    type: ViraFormFieldType.Checkbox;
+    label: string;
+    value: boolean;
+    disabled?: boolean | undefined;
+    hasError?: boolean | undefined;
+};
+/**
+ * A collection of form fields for {@link ViraForm}.
+ *
+ * @category Internal
+ */
+export type ViraFormFields = Record<string, ViraFormField>;
+/**
+ * A form element.
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-form
+ */
+export declare const ViraForm: import("element-vir").DeclarativeElementDefinition<"vira-form", Readonly<{
+    fields: Readonly<ViraFormFields>;
+} & PartialWithUndefined<{
+    showClearButtons: boolean;
+}>>, {}, {
+    valueChange: import("element-vir").DefineEvent<{
+        key: string;
+    } & ViraFormField>;
+}, "vira-form-", "vira-form-", readonly ["actionButtons"], readonly []>;

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

@@ -0,0 +1,137 @@
+import { getObjectTypedEntries } from '@augment-vir/common';
+import { css, defineElementEvent, html, listen } from 'element-vir';
+import { defineViraElement } from './define-vira-element.js';
+import { ViraCheckbox } from './vira-checkbox.element.js';
+import { ViraInput, ViraInputType } from './vira-input.element.js';
+import { ViraSelect } from './vira-select.element.js';
+/**
+ * Form field types for {@link ViraFormField}.
+ *
+ * @category Internal
+ */
+export var ViraFormFieldType;
+(function (ViraFormFieldType) {
+    ViraFormFieldType["Text"] = "text";
+    /** Allows auto complete for _existing_ passwords used on this website (for login). */
+    ViraFormFieldType["ExistingPassword"] = "existing-password";
+    /** Allows auto complete for _new_ passwords used on this website (for login). */
+    ViraFormFieldType["NewPassword"] = "new-password";
+    ViraFormFieldType["Email"] = "email";
+    ViraFormFieldType["Select"] = "select";
+    ViraFormFieldType["Checkbox"] = "checkbox";
+})(ViraFormFieldType || (ViraFormFieldType = {}));
+/**
+ * A form element.
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-form
+ */
+export const ViraForm = defineViraElement()({
+    tagName: 'vira-form',
+    slotNames: ['actionButtons'],
+    events: {
+        valueChange: defineElementEvent(),
+    },
+    styles: css `
+        form {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+    `,
+    render({ inputs, slotNames, dispatch, events }) {
+        const formFields = getObjectTypedEntries(inputs.fields).map(([key, field,]) => {
+            if (field.type === ViraFormFieldType.Checkbox) {
+                return html `
+                        <${ViraCheckbox.assign({
+                    value: field.value,
+                    disabled: field.disabled,
+                    hasError: field.hasError,
+                    label: field.label,
+                })}
+                            ${listen(ViraCheckbox.events.valueChange, (event) => {
+                    dispatch(new events.valueChange({
+                        key,
+                        ...field,
+                        value: event.detail,
+                    }));
+                })}
+                        ></${ViraCheckbox}>
+                    `;
+            }
+            else if (field.type === ViraFormFieldType.Select) {
+                return html `
+                        <${ViraSelect.assign({
+                    options: field.options,
+                    value: field.value,
+                    placeholder: field.placeholder,
+                    disabled: field.disabled,
+                    label: field.label,
+                    hasError: field.hasError,
+                    icon: field.icon,
+                })}
+                            ${listen(ViraSelect.events.valueChange, (event) => {
+                    dispatch(new events.valueChange({
+                        key,
+                        ...field,
+                        value: event.detail,
+                    }));
+                })}
+                        ></${ViraSelect}>
+                    `;
+            }
+            else {
+                return html `
+                        <${ViraInput.assign({
+                    value: field.value,
+                    disabled: field.disabled,
+                    hasError: field.hasError,
+                    icon: field.icon,
+                    label: field.label,
+                    placeholder: field.placeholder,
+                    showClearButton: inputs.showClearButtons,
+                    attributePassthrough: field.isUsername
+                        ? {
+                            autocomplete: 'username',
+                        }
+                        : field.type === ViraFormFieldType.NewPassword
+                            ? {
+                                autocomplete: 'new-password',
+                            }
+                            : field.type === ViraFormFieldType.ExistingPassword
+                                ? {
+                                    autocomplete: 'password',
+                                }
+                                : field.type === ViraFormFieldType.Email
+                                    ? {
+                                        autocomplete: 'email',
+                                    }
+                                    : {},
+                    type: [
+                        ViraFormFieldType.NewPassword,
+                        ViraFormFieldType.ExistingPassword,
+                    ].includes(field.type)
+                        ? ViraInputType.Password
+                        : field.type === ViraFormFieldType.Email
+                            ? ViraInputType.Email
+                            : ViraInputType.Default,
+                })}
+                            ${listen(ViraInput.events.valueChange, (event) => {
+                    dispatch(new events.valueChange({
+                        key,
+                        ...field,
+                        value: event.detail,
+                    }));
+                })}
+                        ></${ViraInput}>
+                    `;
+            }
+        });
+        return html `
+            <form ${listen('submit', (event) => event.preventDefault())}>
+                ${formFields}
+                <slot name=${slotNames.actionButtons}></slot>
+            </form>
+        `;
+    },
+});

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

@@ -1,6 +1,5 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 import { type ViraIconSvg } from '../icons/index.js';
-import { type SharedTextInputElementInputs } from './shared-text-input-logic.js';
 export * from './shared-text-input-logic.js';
 /**
  * Input types for {@link ViraInput}.
@@ -30,7 +29,17 @@ export declare const ViraInput: import("element-vir").DeclarativeElementDefiniti
     hasError: boolean;
     showClearButton: boolean;
     type: ViraInputType;
-}> & SharedTextInputElementInputs>, {
+}> & {
+    value: string;
+} & PartialWithUndefined<{
+    placeholder: string;
+    disabled: boolean;
+    allowedInputs: string | RegExp;
+    blockedInputs: string | RegExp;
+    disableBrowserHelps: boolean;
+    fitText: boolean;
+    attributePassthrough: import("element-vir").AttributeValues;
+}>>, {
     forcedInputWidth: number;
     showPassword: boolean;
     /**
@@ -50,4 +59,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 {
@@ -67,19 +61,16 @@ export const ViraInput = defineViraElement()({
                 gap: 2px;
                 width: 100%;
                 max-width: 100%;
+                cursor: text;
 
                 & .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 +135,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 +148,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 +184,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 +198,7 @@ export const ViraInput = defineViraElement()({
             }
 
             input::placeholder {
-                color: ${cssVars['vira-input-placeholder-color'].value};
+                color: ${viraFormCssVars['vira-form-placeholder-color'].value};
             }
 
             .suffix {
@@ -251,6 +240,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 +307,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 +316,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
@@ -334,6 +340,7 @@ export const ViraInput = defineViraElement()({
                 <input
                     id=${ifDefined(inputs.label ? state.randomId : undefined)}
                     aria-label=${ifDefined(inputs.label || undefined)}
+                    autofocus=${false}
                     type=${calculateEffectiveInputType(inputs.type, state.showPassword)}
                     style=${forcedInputWidthStyles}
                     autocomplete=${ifDefined(shouldBlockBrowserHelps ? 'off' : undefined)}
@@ -408,7 +415,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,240 @@
+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 value = inputs.value || undefined;
+        const placeholderOptionTemplate = inputs.placeholder || value == undefined
+            ? html `
+                      <option value="" disabled ?selected=${value == undefined}>
+                          ${inputs.placeholder}
+                      </option>
+                  `
+            : nothing;
+        const selectTemplate = html `
+            <span class="select-wrapper">
+                <select
+                    .value=${ifDefined(value)}
+                    class=${classMap({
+            placeholder: !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 selectElement = extractEventTarget(event, HTMLSelectElement);
+            const newValue = selectElement.value;
+            if (selectElement.value !== value) {
+                selectElement.selectedIndex = inputs.options.findIndex((option) => option.value === value);
+            }
+            dispatch(new events.valueChange(newValue));
+        })}
+                    ${attributes(inputs.attributePassthrough?.select)}
+                >
+                    ${placeholderOptionTemplate}
+                    ${inputs.options.map((option) => {
+            return html `
+                            <option
+                                ?selected=${option.value === value}
+                                aria-label=${option.label}
+                                ?disabled=${option.disabled}
+                                value=${option.value}
+                            >
+                                ${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/focus.js

@@ -10,7 +10,7 @@ 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} + 4px)`,
+    'vira-focus-outline-border-radius': css `calc(${viraBorders['vira-form-input-radius'].value} + 2px)`,
 });
 /**
  * Create styles that look like an outline for the given selector.

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-selection-hover-background-color': "#d2eaff";
+    readonly 'vira-form-text-selection-color': "#cfe9ff";
+    readonly 'vira-form-selection-hover-background-color': "#e6f9fe";
     readonly 'vira-form-selection-hover-foreground-color': "black";
-    readonly 'vira-form-selection-active-background-color': "#d2eaff";
+    readonly 'vira-form-selection-active-background-color': "#e6f9fe";
     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-selection-hover-background-color': '#d2eaff',
+    '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': '#d2eaff',
+    '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/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.7.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",