vira 28.19.6 → 29.0.0

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

@@ -0,0 +1,34 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type ViraIconSvg } from '../icons/index.js';
+/**
+ * Button styles available for {@link ViraButton}.
+ *
+ * @category Button
+ */
+export declare enum ViraButtonStyle {
+    Default = "vira-button-default",
+    Outline = "vira-button-outline",
+    Danger = "vira-button-danger",
+    DangerOutline = "vira-button-danger-outline",
+    Ghost = "vira-button-ghost"
+}
+/**
+ * A custom button with default styling.
+ *
+ * @category Button
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-button
+ */
+export declare const ViraButton: import("element-vir").DeclarativeElementDefinition<"vira-button", PartialWithUndefined<{
+    text: string;
+    icon: Pick<ViraIconSvg, "svgTemplate">;
+    disabled: boolean;
+    buttonStyle: ViraButtonStyle;
+    /**
+     * When set to `true`, the given icon (if any) will take up its full dimensions, potentially
+     * increasing the button's size.
+     *
+     * @default false
+     */
+    expandToFitIcon: boolean;
+}>, {}, {}, "vira-button-outline-style" | "vira-button-danger-style" | "vira-button-ghost-style" | "vira-button-disabled" | "vira-button-expand-to-fit-icon" | "vira-button-icon-only" | "vira-button-default-style", "vira-button-padding" | "vira-button-internal-foreground-color" | "vira-button-internal-background-color", readonly [], readonly []>;

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

@@ -0,0 +1,176 @@
+import { css, html, nothing } from 'element-vir';
+import { viraDisabledStyles } from '../styles/disabled.js';
+import { viraAnimationDurations } from '../styles/durations.js';
+import { createFocusStyles } from '../styles/focus.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { noUserSelect } from '../styles/index.js';
+import { noNativeFormStyles } from '../styles/native-styles.js';
+import { defineViraElement } from './define-vira-element.js';
+import { ViraIcon } from './vira-icon.element.js';
+/**
+ * Button styles available for {@link ViraButton}.
+ *
+ * @category Button
+ */
+export var ViraButtonStyle;
+(function (ViraButtonStyle) {
+    ViraButtonStyle["Default"] = "vira-button-default";
+    ViraButtonStyle["Outline"] = "vira-button-outline";
+    ViraButtonStyle["Danger"] = "vira-button-danger";
+    ViraButtonStyle["DangerOutline"] = "vira-button-danger-outline";
+    ViraButtonStyle["Ghost"] = "vira-button-ghost";
+})(ViraButtonStyle || (ViraButtonStyle = {}));
+/**
+ * A custom button with default styling.
+ *
+ * @category Button
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-button
+ */
+export const ViraButton = defineViraElement()({
+    tagName: 'vira-button',
+    hostClasses: {
+        'vira-button-outline-style': ({ inputs }) => inputs.buttonStyle === ViraButtonStyle.Outline ||
+            inputs.buttonStyle === ViraButtonStyle.DangerOutline,
+        'vira-button-danger-style': ({ inputs }) => inputs.buttonStyle === ViraButtonStyle.Danger ||
+            inputs.buttonStyle === ViraButtonStyle.DangerOutline,
+        'vira-button-ghost-style': ({ inputs }) => inputs.buttonStyle === ViraButtonStyle.Ghost,
+        'vira-button-disabled': ({ inputs }) => !!inputs.disabled,
+        'vira-button-expand-to-fit-icon': ({ inputs }) => !!inputs.expandToFitIcon,
+        'vira-button-icon-only': ({ inputs }) => !!inputs.icon && !inputs.text,
+        'vira-button-default-style': ({ inputs }) => !inputs.buttonStyle || inputs.buttonStyle === ViraButtonStyle.Default,
+    },
+    cssVars: {
+        'vira-button-padding': '5px 10px',
+        'vira-button-internal-foreground-color': 'transparent',
+        'vira-button-internal-background-color': 'transparent',
+    },
+    styles: ({ hostClasses, cssVars }) => css `
+        :host {
+            font-weight: bold;
+            display: inline-flex;
+            position: relative;
+            vertical-align: middle;
+            align-items: center;
+            box-sizing: border-box;
+            ${noUserSelect};
+            ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-accent-primary-color'].value};
+            ${cssVars['vira-button-internal-foreground-color'].name}: ${viraFormCssVars['vira-form-background-color'].value};
+            ${viraFormCssVars['vira-form-focus-outline-color'].name}: ${viraFormCssVars['vira-form-accent-primary-hover-color'].value}
+        }
+
+        ${hostClasses['vira-button-disabled'].selector} {
+            ${viraDisabledStyles};
+        }
+
+        :host(:hover) button,
+        button:hover {
+            ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-accent-primary-hover-color'].value};
+        }
+
+        :host(:active) button,
+        button:active {
+            ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-accent-primary-active-color'].value};
+        }
+
+        ${hostClasses['vira-button-danger-style'].selector} {
+            & button {
+                ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-error-color'].value};
+            }
+
+            &:hover button,
+            & button:hover {
+                ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-error-hover-color'].value};
+            }
+
+            &:active button,
+            & button:active {
+                ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-error-active-color'].value};
+            }
+        }
+
+        ${hostClasses['vira-button-ghost-style'].selector} {
+            & button {
+                ${cssVars['vira-button-internal-background-color'].name}: transparent;
+                ${cssVars['vira-button-internal-foreground-color'].name}: currentColor;
+            }
+
+            &:hover button,
+            & button:hover {
+                ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-filled-background-color'].value};
+            }
+
+            &:active button,
+            & button:active {
+                ${cssVars['vira-button-internal-background-color'].name}: ${viraFormCssVars['vira-form-filled-active-background-color'].value};
+            }
+        }
+
+        ${hostClasses['vira-button-outline-style'].selector} button {
+            color: ${cssVars['vira-button-internal-background-color'].value};
+            background-color: ${cssVars['vira-button-internal-foreground-color'].value};
+            border-color: currentColor;
+        }
+
+        button {
+            ${noNativeFormStyles};
+            cursor: pointer;
+            position: relative;
+            width: 100%;
+            height: 100%;
+            border: 2px solid transparent;
+            box-sizing: border-box;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: ${viraFormCssVars['vira-form-radius'].value};
+            background-color: ${cssVars['vira-button-internal-background-color'].value};
+            color: ${cssVars['vira-button-internal-foreground-color'].value};
+            padding: ${cssVars['vira-button-padding'].value};
+            transition:
+                color ${viraAnimationDurations['vira-interaction-animation-duration'].value},
+                background-color
+                    ${viraAnimationDurations['vira-interaction-animation-duration'].value},
+                border-color ${viraAnimationDurations['vira-interaction-animation-duration'].value};
+
+            ${createFocusStyles({
+        elementBorderSize: 2,
+    })}
+        }
+
+        .empty-text {
+            width: 0;
+        }
+
+        button ${ViraIcon} + .text-template {
+            margin-left: 8px;
+        }
+
+        :host(:not(.${hostClasses['vira-button-expand-to-fit-icon'].name})) {
+            & ${ViraIcon} {
+                height: 0;
+                display: flex;
+                align-items: center;
+            }
+        }
+    `,
+    render: ({ inputs }) => {
+        const iconTemplate = inputs.icon
+            ? html `
+                  <${ViraIcon.assign({
+                icon: inputs.icon,
+            })}></${ViraIcon}>
+              `
+            : nothing;
+        const textTemplate = inputs.text
+            ? html `
+                  <span class="text-template">${inputs.text}</span>
+              `
+            : html `
+                  <span class="empty-text">&nbsp;</span>
+              `;
+        return html `
+            <button ?disabled=${inputs.disabled}>${iconTemplate} ${textTemplate}</button>
+        `;
+    },
+});

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

@@ -0,0 +1,18 @@
+/**
+ * State options for {@link ViraCard}.
+ *
+ * @category Internal
+ */
+export declare enum ViraCardState {
+    Error = "error",
+    Success = "success"
+}
+/**
+ * A simple wrapper "card" element that is just a `<slot>` with some styles.
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-card
+ */
+export declare const ViraCard: import("element-vir").DeclarativeElementDefinition<"vira-card", {
+    cardState?: ViraCardState | undefined;
+}, {}, {}, "vira-card-error" | "vira-card-success", "vira-card-border" | "vira-card-padding", readonly [], readonly []>;

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

@@ -0,0 +1,60 @@
+import { css, html } from 'element-vir';
+import { CssVarSyntaxName } from 'lit-css-vars';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { defineViraElement } from './define-vira-element.js';
+/**
+ * State options for {@link ViraCard}.
+ *
+ * @category Internal
+ */
+export var ViraCardState;
+(function (ViraCardState) {
+    ViraCardState["Error"] = "error";
+    ViraCardState["Success"] = "success";
+})(ViraCardState || (ViraCardState = {}));
+/**
+ * A simple wrapper "card" element that is just a `<slot>` with some styles.
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-card
+ */
+export const ViraCard = defineViraElement()({
+    tagName: 'vira-card',
+    hostClasses: {
+        'vira-card-error': ({ inputs }) => inputs.cardState === ViraCardState.Error,
+        'vira-card-success': ({ inputs }) => inputs.cardState === ViraCardState.Success,
+    },
+    cssVars: {
+        'vira-card-border': {
+            default: css `1px solid ${viraFormCssVars['vira-form-border-color'].value}`,
+            initialValue: 'none',
+        },
+        'vira-card-padding': {
+            default: css `
+                ${viraFormCssVars['vira-form-wrapper-radius'].value}
+            `,
+            initialValue: '16px',
+            syntax: CssVarSyntaxName.Length,
+        },
+    },
+    styles: ({ hostClasses, cssVars }) => css `
+        :host {
+            display: block;
+            border: ${cssVars['vira-card-border'].value};
+            border-radius: ${viraFormCssVars['vira-form-wrapper-radius'].value};
+            padding: ${cssVars['vira-card-padding'].value};
+        }
+
+        ${hostClasses['vira-card-error'].selector} {
+            border-color: ${viraFormCssVars['vira-form-error-color'].value};
+        }
+        ${hostClasses['vira-card-success'].selector} {
+            border-color: ${viraFormCssVars['vira-form-success-color'].value};
+        }
+    `,
+    render() {
+        return html `
+            <slot></slot>
+        `;
+    },
+});

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

@@ -0,0 +1,38 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type AttributeValues, type CSSResult } from 'element-vir';
+import { ViraIcon } from './vira-icon.element.js';
+/**
+ * All inner elements supported by {@link ViraCheckbox}.
+ *
+ * @category Internals
+ */
+export type ViraCheckboxInnerElements = 'label' | 'custom-checkbox' | 'text' | typeof ViraIcon.tagName;
+/**
+ * Inputs for {@link ViraCheckbox}.
+ *
+ * @category Internal
+ */
+export type ViraCheckboxInputs = {
+    value: boolean;
+} & PartialWithUndefined<{
+    stylePassthrough: Partial<Record<ViraCheckboxInnerElements, CSSResult>>;
+    attributePassthrough: Partial<Record<ViraCheckboxInnerElements, AttributeValues>>;
+    disabled: boolean;
+    label: string;
+    hasError: boolean;
+    horizontal: boolean;
+    /** The checkbox will be filled with a form selection color when it is checked. */
+    fillWhenChecked: boolean;
+    /** The checkbox will be filled with a form error color when it is unchecked. */
+    fillWhenUnchecked: boolean;
+}>;
+/**
+ * A custom checkbox.
+ *
+ * @category Input
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-checkbox
+ */
+export declare const ViraCheckbox: import("element-vir").DeclarativeElementDefinition<"vira-checkbox", Readonly<ViraCheckboxInputs>, {}, {
+    valueChange: import("element-vir").DefineEvent<boolean>;
+}, "vira-checkbox-horizontal" | "vira-checkbox-filled-checked" | "vira-checkbox-filled-unchecked", "vira-checkbox-", readonly [], readonly []>;

package/{src/elements/vira-checkbox.element.ts → dist/elements/vira-checkbox.element.js}

@@ -1,52 +1,10 @@
-import {type PartialWithUndefined} from '@augment-vir/common';
-import {
-    attributes,
-    classMap,
-    css,
-    defineElementEvent,
-    html,
-    ifDefined,
-    listen,
-    listenToActivate,
-    nothing,
-    type AttributeValues,
-    type CSSResult,
-} from 'element-vir';
-import {Check24Icon, viraIconCssVars} from '../icons/index.js';
-import {viraBorders} from '../styles/border.js';
-import {viraDisabledStyles} from '../styles/disabled.js';
-import {createFocusStyles} from '../styles/focus.js';
-import {viraFormCssVars} from '../styles/form-styles.js';
-import {defineViraElement} from './define-vira-element.js';
-import {ViraIcon} from './vira-icon.element.js';
-
-/**
- * All inner elements supported by {@link ViraCheckbox}.
- *
- * @category Internals
- */
-export type ViraCheckboxInnerElements =
-    | 'label'
-    | 'custom-checkbox'
-    | 'text'
-    | typeof ViraIcon.tagName;
-
-/**
- * Inputs for {@link ViraCheckbox}.
- *
- * @category Internal
- */
-export type ViraCheckboxInputs = PartialWithUndefined<{
-    stylePassthrough: Partial<Record<ViraCheckboxInnerElements, CSSResult>>;
-    attributePassthrough: Partial<Record<ViraCheckboxInnerElements, AttributeValues>>;
-    disabled: boolean;
-    label: string;
-    hasError: boolean;
-    horizontal: boolean;
-}> & {
-    value: boolean;
-};
-
+import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, listenToActivate, nothing, } from 'element-vir';
+import { Check24Icon, viraIconCssVars } from '../icons/index.js';
+import { viraDisabledStyles } from '../styles/disabled.js';
+import { createFocusStyles } from '../styles/focus.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { defineViraElement } from './define-vira-element.js';
+import { ViraIcon } from './vira-icon.element.js';
 /**
  * A custom checkbox.
  *
@@ -54,12 +12,14 @@ export type ViraCheckboxInputs = PartialWithUndefined<{
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-checkbox
  */
-export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
+export const ViraCheckbox = defineViraElement()({
     tagName: 'vira-checkbox',
     hostClasses: {
-        'vira-checkbox-horizontal': ({inputs}) => !!inputs.horizontal,
+        'vira-checkbox-horizontal': ({ inputs }) => !!inputs.horizontal,
+        'vira-checkbox-filled-checked': ({ inputs }) => !!inputs.fillWhenChecked,
+        'vira-checkbox-filled-unchecked': ({ inputs }) => !!inputs.fillWhenUnchecked,
     },
-    styles: ({hostClasses}) => css`
+    styles: ({ hostClasses }) => css `
         :host {
             display: inline-flex;
         }
@@ -74,6 +34,43 @@ export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
             width: 100%;
             height: 100%;
             box-sizing: border-box;
+            ${viraIconCssVars['vira-icon-stroke-width'].name}: 3px;
+            opacity: 0;
+        }
+
+        ${hostClasses['vira-checkbox-filled-checked'].selector} {
+            & .custom-checkbox.checked {
+                color: ${viraFormCssVars['vira-form-background-color'].value};
+                background-color: ${viraFormCssVars['vira-form-accent-primary-color'].value};
+            }
+
+            label {
+                &:hover .custom-checkbox.checked {
+                    background-color: ${viraFormCssVars['vira-form-accent-primary-hover-color']
+        .value};
+                }
+
+                &:active .custom-checkbox.checked {
+                    background-color: ${viraFormCssVars['vira-form-accent-primary-active-color']
+        .value};
+                }
+            }
+        }
+        ${hostClasses['vira-checkbox-filled-unchecked'].selector} {
+            & .custom-checkbox:not(.checked) {
+                color: ${viraFormCssVars['vira-form-background-color'].value};
+                background-color: ${viraFormCssVars['vira-form-error-color'].value};
+            }
+
+            label {
+                &:hover .custom-checkbox:not(.checked) {
+                    background-color: ${viraFormCssVars['vira-form-error-hover-color'].value};
+                }
+
+                &:active .custom-checkbox:not(.checked) {
+                    background-color: ${viraFormCssVars['vira-form-error-active-color'].value};
+                }
+            }
         }
 
         label {
@@ -92,14 +89,11 @@ export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
             }
 
             &:hover .custom-checkbox {
-                background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
-                    .value};
+                background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
+            }
+            &:active .custom-checkbox {
+                background-color: ${viraFormCssVars['vira-form-selection-active-color'].value};
             }
-        }
-
-        ${ViraIcon} {
-            ${viraIconCssVars['vira-icon-stroke-width'].name}: 2px;
-            opacity: 0;
         }
 
         /* The visible custom box */
@@ -107,12 +101,12 @@ export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
             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};
+            border-radius: ${viraFormCssVars['vira-form-radius'].value};
             display: inline-block;
             position: relative;
             cursor: pointer;
 
-            ${createFocusStyles({elementBorderSize: 1})}
+            ${createFocusStyles({ elementBorderSize: 1 })}
 
             &.checked {
                 & ${ViraIcon} {
@@ -121,12 +115,7 @@ export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
             }
 
             &.error {
-                border-color: ${viraFormCssVars['vira-form-error-foreground-color'].value};
-            }
-
-            &:active {
-                background-color: ${viraFormCssVars['vira-form-selection-active-background-color']
-                    .value};
+                border-color: ${viraFormCssVars['vira-form-error-color'].value};
             }
 
             &.disabled {
@@ -141,17 +130,16 @@ export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
         }
     `,
     events: {
-        valueChange: defineElementEvent<boolean>(),
+        valueChange: defineElementEvent(),
     },
-    render({inputs, dispatch, events}) {
-        function updateValue(this: void) {
+    render({ inputs, dispatch, events }) {
+        function updateValue() {
             if (!inputs.disabled) {
                 dispatch(new events.valueChange(!inputs.value));
             }
         }
-
         const textLabel = inputs.label
-            ? html`
+            ? html `
                   <span
                       class="label-text"
                       ${attributes(inputs.attributePassthrough?.['text'])}
@@ -161,12 +149,11 @@ export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
                   </span>
               `
             : nothing;
-
-        return html`
+        return html `
             <label
                 class=${classMap({
-                    disabled: !!inputs.disabled,
-                })}
+            disabled: !!inputs.disabled,
+        })}
                 ${attributes(inputs.attributePassthrough?.label)}
                 style=${ifDefined(inputs.stylePassthrough?.label)}
                 ${listen('mousedown', updateValue)}
@@ -174,10 +161,10 @@ export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
                 ${textLabel}
                 <span
                     class="custom-checkbox ${classMap({
-                        checked: inputs.value,
-                        disabled: !!inputs.disabled,
-                        error: !!inputs.hasError,
-                    })}"
+            checked: inputs.value,
+            disabled: !!inputs.disabled,
+            error: !!inputs.hasError,
+        })}"
                     role="checkbox"
                     aria-label=${ifDefined(inputs.label || undefined)}
                     aria-checked=${inputs.value ? 'true' : 'false'}
@@ -188,9 +175,9 @@ export const ViraCheckbox = defineViraElement<Readonly<ViraCheckboxInputs>>()({
                     ${listenToActivate(updateValue)}
                 >
                     <${ViraIcon.assign({
-                        icon: Check24Icon,
-                        fitContainer: true,
-                    })}
+            icon: Check24Icon,
+            fitContainer: true,
+        })}
                         ${attributes(inputs.attributePassthrough?.[ViraIcon.tagName])}
                         style=${ifDefined(inputs.stylePassthrough?.[ViraIcon.tagName])}
                     ></${ViraIcon}>

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

@@ -0,0 +1,14 @@
+/**
+ * A wrapper element that can collapse and expand to fit its content dynamically and efficiently.
+ *
+ * @category Collapsible
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-collapsible-wrapper
+ */
+export declare const ViraCollapsibleWrapper: import("element-vir").DeclarativeElementDefinition<"vira-collapsible-wrapper", {
+    expanded: boolean;
+}, {
+    contentHeight: number;
+}, {
+    expandChange: import("element-vir").DefineEvent<boolean>;
+}, "vira-collapsible-wrapper-expanded", "vira-collapsible-wrapper-", readonly ["header"], readonly []>;

package/{src/elements/vira-collapsible-wrapper.element.ts → dist/elements/vira-collapsible-wrapper.element.js}

@@ -1,7 +1,6 @@
-import {css, defineElementEvent, html, listen, onResize} from 'element-vir';
-import {noNativeFormStyles, viraAnimationDurations} from '../styles/index.js';
-import {defineViraElement} from './define-vira-element.js';
-
+import { css, defineElementEvent, html, listen, onResize } from 'element-vir';
+import { noNativeFormStyles, 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.
  *
@@ -9,7 +8,7 @@ import {defineViraElement} from './define-vira-element.js';
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-collapsible-wrapper
  */
-export const ViraCollapsibleWrapper = defineViraElement<{expanded: boolean}>()({
+export const ViraCollapsibleWrapper = defineViraElement()({
     tagName: 'vira-collapsible-wrapper',
     state() {
         return {
@@ -17,10 +16,10 @@ export const ViraCollapsibleWrapper = defineViraElement<{expanded: boolean}>()({
         };
     },
     hostClasses: {
-        'vira-collapsible-wrapper-expanded': ({inputs}) => inputs.expanded,
+        'vira-collapsible-wrapper-expanded': ({ inputs }) => inputs.expanded,
     },
     slotNames: ['header'],
-    styles: ({hostClasses}) => css`
+    styles: ({ hostClasses }) => css `
         :host {
             display: flex;
             flex-direction: column;
@@ -47,32 +46,31 @@ export const ViraCollapsibleWrapper = defineViraElement<{expanded: boolean}>()({
         }
     `,
     events: {
-        expandChange: defineElementEvent<boolean>(),
+        expandChange: defineElementEvent(),
     },
-    render({state, slotNames, updateState, dispatch, events, inputs}) {
+    render({ state, slotNames, updateState, dispatch, events, inputs }) {
         const collapsingStyles = inputs.expanded
-            ? css`
+            ? css `
                   height: ${state.contentHeight}px;
               `
-            : css`
+            : css `
                   height: 0;
               `;
-
-        return html`
+        return html `
             <button
                 class="header-wrapper"
                 ${listen('click', () => {
-                    dispatch(new events.expandChange(!inputs.expanded));
-                })}
+            dispatch(new events.expandChange(!inputs.expanded));
+        })}
             >
                 <slot name=${slotNames.header}>Header</slot>
             </button>
 
             <div class="collapsing-element" style=${collapsingStyles} disabled="disabled">
                 <div
-                    ${onResize(({contentRect}) => {
-                        updateState({contentHeight: contentRect.height});
-                    })}
+                    ${onResize(({ contentRect }) => {
+            updateState({ contentHeight: contentRect.height });
+        })}
                     class="content-wrapper"
                 >
                     <slot></slot>