vira 29.5.1 → 29.5.3

package/dist/elements/vira-collapsible-wrapper.element.d.ts

@@ -13,4 +13,4 @@ export declare const ViraCollapsibleWrapper: import("element-vir").DeclarativeEl
     contentHeight: number;
 }, {
     expandChange: import("element-vir").DefineEvent<boolean>;
-}, "vira-collapsible-wrapper-expanded" | "vira-collapsible-wrapper-expand-on-print", "vira-collapsible-wrapper-", readonly ["header"], readonly []>;
+}, "vira-collapsible-wrapper-expand-on-print", "vira-collapsible-wrapper-", readonly ["header"], readonly []>;

package/dist/elements/vira-collapsible-wrapper.element.js

@@ -1,5 +1,5 @@
-import { css, defineElementEvent, html, listen, onResize } from 'element-vir';
-import { noNativeFormStyles, viraAnimationDurations } from '../styles/index.js';
+import { classMap, css, defineElementEvent, html, listen, onResize } from 'element-vir';
+import { noNativeFormStyles, noUserSelect, viraAnimationDurations } from '../styles/index.js';
 import { defineViraElement } from './define-vira-element.js';
 /**
  * A wrapper element that can collapse and expand to fit its content dynamically and efficiently.
@@ -16,7 +16,6 @@ export const ViraCollapsibleWrapper = defineViraElement()({
         };
     },
     hostClasses: {
-        'vira-collapsible-wrapper-expanded': ({ inputs }) => inputs.expanded,
         'vira-collapsible-wrapper-expand-on-print': ({ inputs }) => !!inputs.expandOnPrint,
     },
     slotNames: ['header'],
@@ -41,9 +40,10 @@ export const ViraCollapsibleWrapper = defineViraElement()({
         .collapsing-element {
             transition: height ${viraAnimationDurations['vira-pretty-animation-duration'].value};
             overflow: hidden;
-        }
-        ${hostClasses['vira-collapsible-wrapper-expanded'].name} .collapsing-element {
-            pointer-events: none;
+
+            &.collapsed {
+                ${noUserSelect}
+            }
         }
 
         @media print {
@@ -76,7 +76,13 @@ export const ViraCollapsibleWrapper = defineViraElement()({
                 <slot name=${slotNames.header}>Header</slot>
             </button>
 
-            <div class="collapsing-element" style=${collapsingStyles} disabled="disabled">
+            <div
+                class="collapsing-element ${classMap({
+            collapsed: !inputs.expanded,
+        })}"
+                style=${collapsingStyles}
+                disabled="disabled"
+            >
                 <div
                     ${onResize(({ contentRect }) => {
             updateState({ contentHeight: contentRect.height });

package/package.json

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