vira 28.12.1 → 28.13.0

package/dist/elements/index.d.ts

@@ -20,5 +20,6 @@ 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-overflow-switch.element.js';
 export * from './vira-progress.element.js';
 export * from './vira-select.element.js';

package/dist/elements/index.js

@@ -20,5 +20,6 @@ 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-overflow-switch.element.js';
 export * from './vira-progress.element.js';
 export * from './vira-select.element.js';

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

@@ -13,8 +13,8 @@ export type ViraCheckboxInnerElements = 'label' | 'custom-checkbox' | 'text' | t
  * @category Internal
  */
 export type ViraCheckboxInputs = PartialWithUndefined<{
-    stylePassthrough: Record<ViraCheckboxInnerElements, CSSResult>;
-    attributePassthrough: Record<ViraCheckboxInnerElements, AttributeValues>;
+    stylePassthrough: Partial<Record<ViraCheckboxInnerElements, CSSResult>>;
+    attributePassthrough: Partial<Record<ViraCheckboxInnerElements, AttributeValues>>;
     disabled: boolean;
     label: string;
     hasError: boolean;

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

@@ -136,6 +136,7 @@ export const ViraCheckbox = defineViraElement()({
             error: !!inputs.hasError,
         })}"
                     role="checkbox"
+                    aria-label=${ifDefined(inputs.label || undefined)}
                     aria-checked=${inputs.value ? 'true' : 'false'}
                     aria-disabled=${inputs.disabled ? 'true' : 'false'}
                     tabindex=${inputs.disabled ? '-1' : '0'}

package/dist/elements/vira-overflow-switch.element.d.ts

@@ -0,0 +1,21 @@
+/**
+ * An element switches between two slots based on their overflow.
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-overflow-switch
+ */
+export declare const ViraOverflowSwitch: import("element-vir").DeclarativeElementDefinition<"vira-overflow-switch", Readonly<((Required<Pick<{
+    automaticallySwitch: boolean;
+    useSmall: boolean;
+}, "automaticallySwitch">> & Partial<Record<"useSmall", never>>) | (Required<Pick<{
+    automaticallySwitch: boolean;
+    useSmall: boolean;
+}, "useSmall">> & Partial<Record<"automaticallySwitch", never>>)) & Omit<{
+    automaticallySwitch: boolean;
+    useSmall: boolean;
+}, "automaticallySwitch" | "useSmall">>, {
+    isOverflowing: boolean;
+    resizeObserver: undefined | ResizeObserver;
+    /** Called on cleanup to clear all listeners. */
+    cleanup: undefined | (() => void);
+}, {}, "vira-overflow-switch-show-small", "vira-overflow-switch-", readonly ["large", "small"], readonly []>;

package/dist/elements/vira-overflow-switch.element.js

@@ -0,0 +1,110 @@
+import { css, html, onDomCreated } from 'element-vir';
+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()({
+    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,
+            /** Called on cleanup to clear all listeners. */
+            cleanup: undefined,
+        };
+    },
+    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 = {
+                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, }) {
+    const isOverflowing = elementToTest.scrollWidth > host.clientWidth;
+    updateState({ isOverflowing });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "28.12.1",
+    "version": "28.13.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -38,33 +38,33 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.54.3",
-        "@augment-vir/common": "^31.54.3",
-        "@augment-vir/web": "^31.54.3",
+        "@augment-vir/assert": "^31.54.4",
+        "@augment-vir/common": "^31.54.4",
+        "@augment-vir/web": "^31.54.4",
         "colorjs.io": "^0.5.2",
-        "date-vir": "^8.0.0",
+        "date-vir": "^8.1.0",
         "device-navigation": "^4.5.5",
         "lit-css-vars": "^3.0.11",
-        "observavir": "^2.2.0",
+        "observavir": "^2.3.0",
         "page-active": "^1.0.3",
-        "spa-router-vir": "^6.3.1",
-        "type-fest": "^5.2.0",
+        "spa-router-vir": "^6.4.1",
+        "type-fest": "^5.3.1",
         "typed-event-target": "^4.1.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.54.3",
+        "@augment-vir/test": "^31.54.4",
         "@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.27.0",
+        "esbuild": "^0.27.2",
         "istanbul-smart-text-reporter": "^1.1.5",
         "markdown-code-example-inserter": "^3.0.3",
         "typedoc": "^0.28.15",
         "typescript": "5.9.3",
-        "vite": "^7.1.12",
-        "vite-tsconfig-paths": "^5.1.4"
+        "vite": "^7.3.0",
+        "vite-tsconfig-paths": "^6.0.3"
     },
     "peerDependencies": {
         "element-vir": "^26.9.1"