vira 26.5.8 → 26.6.1

package/dist/elements/index.d.ts

@@ -8,6 +8,7 @@ export * from './pop-up/vira-pop-up-menu.element.js';
 export * from './pop-up/vira-pop-up-trigger.element.js';
 export * from './vira-bold-text.element.js';
 export * from './vira-button.element.js';
+export * from './vira-checkbox.element.js';
 export * from './vira-collapsible-wrapper.element.js';
 export * from './vira-dropdown.element.js';
 export * from './vira-icon.element.js';

package/dist/elements/index.js

@@ -8,6 +8,7 @@ export * from './pop-up/vira-pop-up-menu.element.js';
 export * from './pop-up/vira-pop-up-trigger.element.js';
 export * from './vira-bold-text.element.js';
 export * from './vira-button.element.js';
+export * from './vira-checkbox.element.js';
 export * from './vira-collapsible-wrapper.element.js';
 export * from './vira-dropdown.element.js';
 export * from './vira-icon.element.js';

package/dist/elements/pop-up/vira-menu.element.js

@@ -1,7 +1,7 @@
 import { check } from '@augment-vir/assert';
 import { nav, navAttribute, NavController, NavValue } from 'device-navigation';
 import { classMap, css, html, ifDefined, testId } from 'element-vir';
-import { viraFormCssVars } from '../../styles/form-themes.js';
+import { viraFormCssVars } from '../../styles/form-styles.js';
 import { noNativeFormStyles, viraDisabledStyles } from '../../styles/index.js';
 import { defineViraElement } from '../define-vira-element.js';
 import { ViraLink } from '../vira-link.element.js';

package/dist/elements/pop-up/vira-pop-up-menu.element.js

@@ -1,6 +1,6 @@
 import { css, html } from 'element-vir';
 import { viraBorders } from '../../styles/border.js';
-import { viraFormCssVars } from '../../styles/form-themes.js';
+import { viraFormCssVars } from '../../styles/form-styles.js';
 import { viraShadows } from '../../styles/shadows.js';
 import { defineViraElement } from '../define-vira-element.js';
 /**

package/dist/elements/pop-up/vira-pop-up-trigger.element.js

@@ -67,15 +67,13 @@ export const ViraPopUpTrigger = defineViraElement()({
             cursor: pointer;
             max-width: 100%;
             position: relative;
-            outline: none;
             flex-grow: 1;
             box-sizing: border-box;
-        }
 
-        ${createFocusStyles({
-        selector: '.dropdown-wrapper:focus',
+            ${createFocusStyles({
         elementBorderSize: 1,
     })}
+        }
 
         .dropdown-trigger {
             box-sizing: border-box;

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

@@ -82,7 +82,6 @@ export const ViraButton = defineViraElement()({
             position: relative;
             width: 100%;
             height: 100%;
-            outline: none;
             border: 2px solid transparent;
             box-sizing: border-box;
             display: inline-flex;
@@ -97,17 +96,16 @@ export const ViraButton = defineViraElement()({
                 background-color
                     ${viraAnimationDurations['vira-interaction-animation-duration'].value},
                 border-color ${viraAnimationDurations['vira-interaction-animation-duration'].value};
+
+            ${createFocusStyles({
+        elementBorderSize: 2,
+    })}
         }
 
         .empty-text {
             width: 0;
         }
 
-        ${createFocusStyles({
-        selector: 'button:focus:focus-visible:not(:active):not([disabled])',
-        elementBorderSize: 2,
-    })}
-
         button ${ViraIcon} + .text-template {
             margin-left: 8px;
         }

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

@@ -0,0 +1,31 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type AttributeValues, type CSSResult } from 'element-vir';
+import { ViraIcon } from './vira-icon.element.js';
+/**
+ * All inner elements supported by {@link ViraCheckbox}.
+ *
+ * @category Internals
+ */
+export type ViraCheckboxInnerElements = 'label' | 'custom-checkbox' | typeof ViraIcon.tagName;
+/**
+ * Inputs for {@link ViraCheckbox}.
+ *
+ * @category Internal
+ */
+export type ViraCheckboxInputs = PartialWithUndefined<{
+    stylePassthrough: Record<ViraCheckboxInnerElements, CSSResult>;
+    attributePassthrough: Record<ViraCheckboxInnerElements, AttributeValues>;
+    disabled: boolean;
+}> & {
+    value: boolean;
+};
+/**
+ * A custom checkbox.
+ *
+ * @category Input
+ * @category Elements
+ * @see https://electrovir.github.io/element-vir/vira/book/elements/vira-checkbox
+ */
+export declare const ViraCheckbox: import("element-vir").DeclarativeElementDefinition<"vira-checkbox", Readonly<ViraCheckboxInputs>, {}, {
+    valueChange: import("element-vir").DefineEvent<boolean>;
+}, "vira-checkbox-", "vira-checkbox-", readonly []>;

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

@@ -0,0 +1,117 @@
+import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, listenToActivate, } from 'element-vir';
+import { Check24Icon, viraIconCssVars } from '../icons/index.js';
+import { viraBorders } from '../styles/border.js';
+import { viraDisabledStyles } from '../styles/disabled.js';
+import { createFocusStyles } from '../styles/focus.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { defineViraElement } from './define-vira-element.js';
+import { ViraIcon } from './vira-icon.element.js';
+/**
+ * A custom checkbox.
+ *
+ * @category Input
+ * @category Elements
+ * @see https://electrovir.github.io/element-vir/vira/book/elements/vira-checkbox
+ */
+export const ViraCheckbox = defineViraElement()({
+    tagName: 'vira-checkbox',
+    styles: css `
+        :host {
+            height: 24px;
+            aspect-ratio: 1;
+            display: inline-flex;
+        }
+
+        label,
+        ${ViraIcon}, .custom-checkbox {
+            height: 100%;
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        label {
+            &.disabled {
+                cursor: not-allowed;
+            }
+        }
+
+        ${ViraIcon} {
+            ${viraIconCssVars['vira-icon-stroke-width'].name}: 3px;
+            opacity: 0;
+        }
+
+        /* The visible custom box */
+        .custom-checkbox {
+            border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
+            color: ${viraFormCssVars['vira-form-foreground-color'].value};
+            border-radius: ${viraBorders['vira-form-input-radius'].value};
+            display: inline-block;
+            position: relative;
+            cursor: pointer;
+
+            ${createFocusStyles({ elementBorderSize: 1 })}
+
+            &.checked {
+                & ${ViraIcon} {
+                    opacity: 1;
+                }
+            }
+
+            &:hover {
+                background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
+        .value};
+            }
+
+            &:active {
+                background-color: ${viraFormCssVars['vira-form-selection-active-background-color']
+        .value};
+            }
+
+            &.disabled {
+                ${viraDisabledStyles};
+            }
+        }
+    `,
+    events: {
+        valueChange: defineElementEvent(),
+    },
+    render({ inputs, dispatch, events }) {
+        function updateValue() {
+            if (!inputs.disabled) {
+                dispatch(new events.valueChange(!inputs.value));
+            }
+        }
+        return html `
+            <label
+                class=${classMap({
+            disabled: !!inputs.disabled,
+        })}
+                ${attributes(inputs.attributePassthrough?.label)}
+                style=${ifDefined(inputs.stylePassthrough?.label)}
+            >
+                <span
+                    class="custom-checkbox ${classMap({
+            checked: inputs.value,
+            disabled: !!inputs.disabled,
+        })}"
+                    role="checkbox"
+                    aria-checked=${inputs.value ? 'true' : 'false'}
+                    aria-disabled=${inputs.disabled ? 'true' : 'false'}
+                    tabindex=${inputs.disabled ? '-1' : '0'}
+                    ${attributes(inputs.attributePassthrough?.['custom-checkbox'])}
+                    style=${ifDefined(inputs.stylePassthrough?.['custom-checkbox'])}
+                    ${listenToActivate(updateValue)}
+                    ${listen('click', updateValue)}
+                >
+                    <${ViraIcon.assign({
+            icon: Check24Icon,
+            fitContainer: true,
+        })}
+                        ${attributes(inputs.attributePassthrough?.[ViraIcon.tagName])}
+                        style=${ifDefined(inputs.stylePassthrough?.[ViraIcon.tagName])}
+                    ></${ViraIcon}>
+                </span>
+            </label>
+        `;
+    },
+});

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

@@ -3,7 +3,7 @@ import { filterMap } from '@augment-vir/common';
 import { classMap, css, defineElementEvent, html, ifDefined, listen, nothing, testId, } from 'element-vir';
 import { ChevronUp24Icon } from '../icons/index.js';
 import { viraBorders } from '../styles/border.js';
-import { viraFormCssVars } from '../styles/form-themes.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
 import { noUserSelect, viraAnimationDurations } from '../styles/index.js';
 import { defineViraElement } from './define-vira-element.js';
 import { ViraMenuTrigger } from './pop-up/vira-menu-trigger.element.js';

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

@@ -4,7 +4,7 @@ export * from './shared-text-input-logic.js';
 /**
  * Input types for {@link ViraInput}.
  *
- * @category Input
+ * @category Internal
  */
 export declare enum ViraInputType {
     Default = "text",

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

@@ -12,7 +12,7 @@ export * from './shared-text-input-logic.js';
 /**
  * Input types for {@link ViraInput}.
  *
- * @category Input
+ * @category Internal
  */
 export var ViraInputType;
 (function (ViraInputType) {
@@ -149,11 +149,6 @@ export const ViraInput = defineViraElement()({
                 cursor: text;
             }
 
-            ${createFocusStyles({
-            selector: 'input:focus:focus-visible:not(:active):not([disabled]) ~ .focus-border',
-            elementBorderSize: 0,
-        })}
-
             .left-side-icon {
                 margin-right: calc(${cssVars['vira-input-padding-horizontal'].value} - 4px);
             }
@@ -169,6 +164,14 @@ export const ViraInput = defineViraElement()({
                 text-overflow: ellipsis;
                 box-sizing: border-box;
                 overflow: hidden;
+                outline: none;
+
+                &:focus:focus-visible:not(:active):not([disabled]) ~ .focus-border {
+                    ${createFocusStyles({
+            elementBorderSize: 0,
+            noNesting: true,
+        })}
+                }
             }
 
             ::selection {
@@ -185,10 +188,6 @@ export const ViraInput = defineViraElement()({
                 overflow: hidden;
             }
 
-            input:focus {
-                outline: none;
-            }
-
             input::placeholder {
                 color: ${cssVars['vira-input-placeholder-color'].value};
             }
@@ -321,9 +320,7 @@ export const ViraInput = defineViraElement()({
             });
         })}
                     placeholder=${ifDefined(inputs.placeholder || undefined)}
-                    ${inputs.attributePassthrough
-            ? attributes(inputs.attributePassthrough)
-            : nothing}
+                    ${attributes(inputs.attributePassthrough)}
                 />
                 ${renderIf(!!(inputs.showClearButton && inputs.value), html `
                         <button

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

@@ -1,4 +1,4 @@
-import { attributes, css, html, ifDefined, listen, nothing, } from 'element-vir';
+import { attributes, css, html, ifDefined, listen, } from 'element-vir';
 import { defineViraElement } from './define-vira-element.js';
 /**
  * A hyperlink wrapper element that can be configured to emit route change events rather than just
@@ -57,9 +57,7 @@ export const ViraLink = defineViraElement()({
                     href=${inputs.link.url}
                     target="_blank"
                     rel="noopener noreferrer"
-                    ${inputs.attributePassthrough?.a
-                ? attributes(inputs.attributePassthrough.a)
-                : nothing}
+                    ${attributes(inputs.attributePassthrough?.a)}
                     style=${ifDefined(inputs.stylePassthrough?.a)}
                 >
                     <slot></slot>
@@ -75,9 +73,7 @@ export const ViraLink = defineViraElement()({
                 <a
                     href=${linkUrl}
                     rel="noopener noreferrer"
-                    ${inputs.attributePassthrough?.a
-                ? attributes(inputs.attributePassthrough.a)
-                : nothing}
+                    ${attributes(inputs.attributePassthrough?.a)}
                     style=${ifDefined(inputs.stylePassthrough?.a)}
                     ${listen('click', clickCallback)}
                 >

package/dist/styles/focus.d.ts

@@ -1,3 +1,4 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
 /**
  * CSS vars for Vira focus colors.
  *
@@ -16,14 +17,15 @@ export declare const viraFocusCssVars: import("lit-css-vars").CssVarDefinitions<
  *
  * @category Styles
  */
-export declare function createFocusStyles({ selector, elementBorderSize, outlineGap, outlineWidth, }: {
-    selector: string;
+export declare function createFocusStyles({ elementBorderSize, outlineGap, outlineWidth, 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;
-    outlineGap?: number;
-    outlineWidth?: number;
-}): import("element-vir").CSSResult;
+} & PartialWithUndefined<{
+    outlineGap: number;
+    outlineWidth: number;
+    noNesting: boolean;
+}>): import("element-vir").CSSResult;

package/dist/styles/focus.js

@@ -20,21 +20,33 @@ export const viraFocusCssVars = defineCssVars({
  *
  * @category Styles
  */
-export function createFocusStyles({ selector, elementBorderSize, outlineGap = 2, outlineWidth = 2, }) {
+export function createFocusStyles({ elementBorderSize, outlineGap = 2, outlineWidth = 2, noNesting, }) {
     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 `
-        ${unsafeCSS(selector)}::after {
-            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;
+        outline: none;
+
+        &:focus {
+            outline: none;
+        }
+
+        &:focus:focus-visible:not(:active):not([disabled])::after {
+            ${styles}
         }
     `;
 }

package/dist/styles/index.d.ts

@@ -4,7 +4,7 @@ export * from './color.js';
 export * from './disabled.js';
 export * from './durations.js';
 export * from './focus.js';
-export * from './form-themes.js';
+export * from './form-styles.js';
 export * from './native-styles.js';
 export * from './scrollbar.js';
 export * from './shadows.js';

package/dist/styles/index.js

@@ -4,7 +4,7 @@ export * from './color.js';
 export * from './disabled.js';
 export * from './durations.js';
 export * from './focus.js';
-export * from './form-themes.js';
+export * from './form-styles.js';
 export * from './native-styles.js';
 export * from './scrollbar.js';
 export * from './shadows.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "26.5.8",
+    "version": "26.6.1",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -38,36 +38,36 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.26.0",
-        "@augment-vir/common": "^31.26.0",
-        "@augment-vir/web": "^31.26.0",
+        "@augment-vir/assert": "^31.28.0",
+        "@augment-vir/common": "^31.28.0",
+        "@augment-vir/web": "^31.28.0",
         "colorjs.io": "^0.5.2",
-        "date-vir": "^7.3.2",
+        "date-vir": "^7.4.0",
         "device-navigation": "^4.5.5",
         "lit-css-vars": "^3.0.11",
         "observavir": "^2.1.0",
         "page-active": "^1.0.1",
-        "spa-router-vir": "^6.1.3",
+        "spa-router-vir": "^6.2.0",
         "type-fest": "^4.41.0",
         "typed-event-target": "^4.1.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.26.0",
+        "@augment-vir/test": "^31.28.0",
         "@web/dev-server-esbuild": "^1.0.4",
         "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-playwright": "^0.11.1",
         "@web/test-runner-visual-regression": "^0.10.0",
-        "esbuild": "^0.25.5",
+        "esbuild": "^0.25.8",
         "istanbul-smart-text-reporter": "^1.1.5",
         "markdown-code-example-inserter": "^3.0.3",
-        "typedoc": "0.28.5",
+        "typedoc": "^0.28.7",
         "typescript": "5.8.3",
-        "vite": "^7.0.0",
+        "vite": "^7.0.6",
         "vite-tsconfig-paths": "^5.1.4"
     },
     "peerDependencies": {
-        "element-vir": "^26.5.8"
+        "element-vir": "^26.6.1"
     },
     "engines": {
         "node": ">=22"