vira 26.10.1 → 26.11.0

package/README.md

@@ -2,5 +2,5 @@
 
 The Vira design system.
 
-Reference docs: https://electrovir.github.io/vira/docs
-Visual docs: https://electrovir.github.io/vira/book
+-   Reference docs: https://electrovir.github.io/vira/docs
+-   Visual docs: https://electrovir.github.io/vira/book

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

@@ -6,7 +6,7 @@ import { ViraIcon } from './vira-icon.element.js';
  *
  * @category Internals
  */
-export type ViraCheckboxInnerElements = 'label' | 'custom-checkbox' | typeof ViraIcon.tagName;
+export type ViraCheckboxInnerElements = 'label' | 'custom-checkbox' | 'text' | typeof ViraIcon.tagName;
 /**
  * Inputs for {@link ViraCheckbox}.
  *
@@ -16,6 +16,7 @@ export type ViraCheckboxInputs = PartialWithUndefined<{
     stylePassthrough: Record<ViraCheckboxInnerElements, CSSResult>;
     attributePassthrough: Record<ViraCheckboxInnerElements, AttributeValues>;
     disabled: boolean;
+    label: string;
 }> & {
     value: boolean;
 };

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

@@ -1,4 +1,4 @@
-import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, listenToActivate, } from 'element-vir';
+import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, listenToActivate, nothing, } from 'element-vir';
 import { Check24Icon, viraIconCssVars } from '../icons/index.js';
 import { viraBorders } from '../styles/border.js';
 import { viraDisabledStyles } from '../styles/disabled.js';
@@ -17,22 +17,32 @@ export const ViraCheckbox = defineViraElement()({
     tagName: 'vira-checkbox',
     styles: css `
         :host {
+            display: inline-flex;
+        }
+
+        .custom-checkbox {
             height: 24px;
             aspect-ratio: 1;
-            display: inline-flex;
+            box-sizing: border-box;
         }
 
-        label,
-        ${ViraIcon}, .custom-checkbox {
-            height: 100%;
+        ${ViraIcon} {
             width: 100%;
+            height: 100%;
             box-sizing: border-box;
         }
 
         label {
+            display: inline-flex;
+            gap: 8px;
+
             &.disabled {
                 cursor: not-allowed;
             }
+
+            & .text::first-line {
+                line-height: 24px;
+            }
         }
 
         ${ViraIcon} {
@@ -42,6 +52,7 @@ export const ViraCheckbox = defineViraElement()({
 
         /* The visible custom box */
         .custom-checkbox {
+            flex-shrink: 0;
             border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
             color: ${viraFormCssVars['vira-form-foreground-color'].value};
             border-radius: ${viraBorders['vira-form-input-radius'].value};
@@ -81,6 +92,17 @@ export const ViraCheckbox = defineViraElement()({
                 dispatch(new events.valueChange(!inputs.value));
             }
         }
+        const textLabel = inputs.label
+            ? html `
+                  <span
+                      class="text"
+                      ${attributes(inputs.attributePassthrough?.['text'])}
+                      style=${ifDefined(inputs.stylePassthrough?.['text'])}
+                  >
+                      ${inputs.label}
+                  </span>
+              `
+            : nothing;
         return html `
             <label
                 class=${classMap({
@@ -111,6 +133,7 @@ export const ViraCheckbox = defineViraElement()({
                         style=${ifDefined(inputs.stylePassthrough?.[ViraIcon.tagName])}
                     ></${ViraIcon}>
                 </span>
+                ${textLabel}
             </label>
         `;
     },

package/package.json

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