vira 31.10.2 → 31.11.1

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

@@ -45,12 +45,12 @@ export const ViraCheckbox = defineViraElement()({
             }
 
             label {
-                &:hover .custom-checkbox.checked {
+                &:not(.disabled):hover .custom-checkbox.checked {
                     background-color: ${viraFormCssVars['vira-form-accent-primary-hover-color']
         .value};
                 }
 
-                &:active .custom-checkbox.checked {
+                &:not(.disabled):active .custom-checkbox.checked {
                     background-color: ${viraFormCssVars['vira-form-accent-primary-active-color']
         .value};
                 }
@@ -63,11 +63,11 @@ export const ViraCheckbox = defineViraElement()({
             }
 
             label {
-                &:hover .custom-checkbox:not(.checked) {
+                &:not(.disabled):hover .custom-checkbox:not(.checked) {
                     background-color: ${viraFormCssVars['vira-form-error-hover-color'].value};
                 }
 
-                &:active .custom-checkbox:not(.checked) {
+                &:not(.disabled):active .custom-checkbox:not(.checked) {
                     background-color: ${viraFormCssVars['vira-form-error-active-color'].value};
                 }
             }
@@ -88,10 +88,10 @@ export const ViraCheckbox = defineViraElement()({
                 font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
             }
 
-            &:hover .custom-checkbox {
+            &:not(.disabled):hover .custom-checkbox {
                 background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
             }
-            &:active .custom-checkbox {
+            &:not(.disabled):active .custom-checkbox {
                 background-color: ${viraFormCssVars['vira-form-selection-active-color'].value};
             }
         }
@@ -127,8 +127,12 @@ export const ViraCheckbox = defineViraElement()({
 
         ${hostClasses['vira-checkbox-horizontal'].selector} label {
             flex-direction: row-reverse;
-            align-items: center;
+            align-items: flex-start;
             gap: 8px;
+
+            & .label-text {
+                padding-block: calc((24px - 1em) / 2);
+            }
         }
     `,
     events: {

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

@@ -9,6 +9,7 @@ export declare const ViraDrawer: import("element-vir").DeclarativeElementDefinit
 } & PartialWithUndefined<{
     /** If this isn't set, make sure to use the drawer title slot to fill it in. */
     drawerTitle: string;
+    noContentPadding: boolean;
 }>, {
     dialogElement: HTMLDialogElement | undefined;
     contentElement: HTMLDivElement | undefined;
@@ -20,4 +21,4 @@ export declare const ViraDrawer: import("element-vir").DeclarativeElementDefinit
     dragCurrentY: number;
 }, {
     drawerClose: import("element-vir").DefineEvent<void>;
-}, "vira-drawer-dragging", "vira-drawer-backdrop-filter" | "vira-drawer-max-height", readonly ["drawerTitle"], readonly []>;
+}, "vira-drawer-dragging" | "vira-drawer-no-content-padding", "vira-drawer-backdrop-filter" | "vira-drawer-max-height", readonly ["drawerTitle"], readonly []>;

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

@@ -46,6 +46,7 @@ export const ViraDrawer = defineViraElement()({
     },
     hostClasses: {
         'vira-drawer-dragging': ({ state }) => state.isDragging,
+        'vira-drawer-no-content-padding': ({ inputs }) => !!inputs.noContentPadding,
     },
     slotNames: ['drawerTitle'],
     cssVars: {
@@ -161,6 +162,12 @@ export const ViraDrawer = defineViraElement()({
                 }
             }
         }
+
+        ${hostClasses['vira-drawer-no-content-padding'].selector} {
+            & dialog .drawer-content-wrapper .body {
+                padding: 0;
+            }
+        }
     `,
     render({ inputs, state, updateState, events, dispatch, slotNames }) {
         if (state.dialogElement && inputs.open !== state.dialogElement.open) {

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

@@ -28,6 +28,7 @@ export declare const ViraModal: import("element-vir").DeclarativeElementDefiniti
     blockLightDismissal: boolean;
     modalSubtitle: string;
     isMobileSize: boolean;
+    noContentPadding: boolean;
 }>, {
     dialogElement: HTMLDialogElement | undefined;
     contentElement: HTMLDivElement | undefined;
@@ -36,4 +37,4 @@ export declare const ViraModal: import("element-vir").DeclarativeElementDefiniti
     cleanupListeners: undefined | (() => void);
 }, {
     modalClose: import("element-vir").DefineEvent<void>;
-}, "vira-modal-phone-size", "vira-modal-backdrop-filter", readonly ["modalTitle"], readonly []>;
+}, "vira-modal-phone-size" | "vira-modal-no-content-padding", "vira-modal-backdrop-filter", readonly ["modalTitle"], readonly []>;

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

@@ -40,6 +40,7 @@ export const ViraModal = defineViraElement()({
     },
     hostClasses: {
         'vira-modal-phone-size': ({ inputs }) => !!inputs.isMobileSize,
+        'vira-modal-no-content-padding': ({ inputs }) => !!inputs.noContentPadding,
     },
     slotNames: ['modalTitle'],
     cssVars: {
@@ -131,6 +132,12 @@ export const ViraModal = defineViraElement()({
             }
         }
 
+        ${hostClasses['vira-modal-no-content-padding'].selector} {
+            & dialog .modal-content-wrapper .body {
+                padding: 0;
+            }
+        }
+
         ${hostClasses['vira-modal-phone-size'].selector} {
             & dialog {
                 width: 100dvw;

package/package.json

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