vira 29.5.2 → 29.5.4

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,4 +1,4 @@
-import { css, defineElementEvent, html, listen, onResize } from 'element-vir';
+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';
 /**
@@ -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,12 +40,10 @@ export const ViraCollapsibleWrapper = defineViraElement()({
         .collapsing-element {
             transition: height ${viraAnimationDurations['vira-pretty-animation-duration'].value};
             overflow: hidden;
-            ${noUserSelect}
-        }
 
-        ${hostClasses['vira-collapsible-wrapper-expanded'].selector} .collapsing-element {
-            pointer-events: none;
-            user-select: auto;
+            &.collapsed {
+                ${noUserSelect}
+            }
         }
 
         @media print {
@@ -79,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/dist/icons/icon-svg.d.ts

@@ -1,4 +1,5 @@
-import { type TemplateResult } from 'element-vir';
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type CSSResult, type TemplateResult } from 'element-vir';
 import { viraIconCssVars } from './icon-css-vars.js';
 /**
  * An individual Vira icon SVG definition.
@@ -24,4 +25,4 @@ export declare function defineIcon({ name, svgTemplate, }: {
  *
  * @category Icon
  */
-export declare function createColoredIcon(icon: ViraIconSvg, colors: Partial<Record<keyof typeof viraIconCssVars, string>>): ViraIconSvg;
+export declare function createColoredIcon(icon: ViraIconSvg, colors: PartialWithUndefined<Record<keyof typeof viraIconCssVars, string | CSSResult>>): ViraIconSvg;

package/dist/icons/icon-svg.js

@@ -1,5 +1,5 @@
-import { getObjectTypedKeys, stringify } from '@augment-vir/common';
-import Color from 'colorjs.io';
+import { check } from '@augment-vir/assert';
+import { getObjectTypedKeys } from '@augment-vir/common';
 import { html } from 'element-vir';
 import { viraIconCssVars } from './icon-css-vars.js';
 /**
@@ -14,17 +14,6 @@ export function defineIcon({ name, svgTemplate, }) {
     };
     return iconSvg;
 }
-function getAssertedValidColor(input) {
-    try {
-        if (!input) {
-            throw new Error('invalid empty color');
-        }
-        return new Color(input);
-    }
-    catch {
-        throw new Error(`Invalid color: ${stringify(input)}`);
-    }
-}
 /**
  * Wraps an existing icon with a specific color and outputs another icon that can be used anywhere
  * the original icon can be used.
@@ -34,10 +23,14 @@ function getAssertedValidColor(input) {
 export function createColoredIcon(icon, colors) {
     const colorStyles = getObjectTypedKeys(colors)
         .map((cssVarName) => {
-        const colorValue = colors[cssVarName];
-        const color = getAssertedValidColor(colorValue);
-        return `${viraIconCssVars[cssVarName].name}: ${color.toString()};`;
+        if (colors[cssVarName]) {
+            return `${viraIconCssVars[cssVarName].name}: ${String(colors[cssVarName])};`;
+        }
+        else {
+            return undefined;
+        }
     })
+        .filter(check.isTruthy)
         .join(' ');
     return defineIcon({
         name: icon.name,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "29.5.2",
+    "version": "29.5.4",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -41,7 +41,6 @@
         "@augment-vir/assert": "^31.59.3",
         "@augment-vir/common": "^31.59.3",
         "@augment-vir/web": "^31.59.3",
-        "colorjs.io": "^0.6.1",
         "date-vir": "^8.1.1",
         "device-navigation": "^4.5.5",
         "lit-css-vars": "^3.5.0",