@likable-hair/svelte 4.0.40 → 4.0.42

package/dist/components/composed/list/DynamicTable.svelte.d.ts

@@ -50,6 +50,7 @@ declare class __sveltets_Render<Item extends {
             } | undefined;
             info?: string;
             maxWidth?: string;
+            icon?: string;
         })[] | undefined;
         headersToShowInTable?: (import("../../simple/lists/SimpleTable.svelte").Header<unknown> & {
             cellEditorInfo?: {
@@ -83,6 +84,7 @@ declare class __sveltets_Render<Item extends {
             } | undefined;
             info?: string;
             maxWidth?: string;
+            icon?: string;
         })[] | undefined;
         subHeaders?: (import("../../simple/lists/SimpleTable.svelte").Header<unknown> & {
             cellEditorInfo?: {
@@ -116,6 +118,7 @@ declare class __sveltets_Render<Item extends {
             } | undefined;
             info?: string;
             maxWidth?: string;
+            icon?: string;
         })[] | undefined;
         customizeHeaders?: boolean;
         rows?: {
@@ -297,6 +300,7 @@ declare class __sveltets_Render<Item extends {
                 } | undefined;
                 info?: string;
                 maxWidth?: string;
+                icon?: string;
             };
         }]> | undefined;
         headerLabelSnippet?: Snippet<[{
@@ -332,6 +336,7 @@ declare class __sveltets_Render<Item extends {
                 } | undefined;
                 info?: string;
                 maxWidth?: string;
+                icon?: string;
             };
         }]> | undefined;
         rowAppendSnippet?: Snippet<[{
@@ -382,6 +387,7 @@ declare class __sveltets_Render<Item extends {
                 } | undefined;
                 info?: string;
                 maxWidth?: string;
+                icon?: string;
             };
             row: {
                 item: Item & {
@@ -427,6 +433,7 @@ declare class __sveltets_Render<Item extends {
                 } | undefined;
                 info?: string;
                 maxWidth?: string;
+                icon?: string;
             };
         }]> | undefined;
         subHeaderLabelSnippet?: Snippet<[{
@@ -462,6 +469,7 @@ declare class __sveltets_Render<Item extends {
                 } | undefined;
                 info?: string;
                 maxWidth?: string;
+                icon?: string;
             };
         }]> | undefined;
         subRowAppendSnippet?: Snippet<[{
@@ -513,6 +521,7 @@ declare class __sveltets_Render<Item extends {
                 } | undefined;
                 info?: string;
                 maxWidth?: string;
+                icon?: string;
             };
             row: SubItem & {
                 disableEdit?: boolean;

package/dist/components/composed/list/PaginatedTable.svelte

@@ -11,7 +11,7 @@ let { headers = [], items = [], sortedBy = $bindable(undefined), sortDirection =
     { label: "20", value: 20 },
     { label: "50", value: 50 },
     { label: "100", value: 100 },
-], hideRowsPerPage = false, totalElements = undefined, rowsPerPage = $bindable(20), filters = $bindable([]), quickFilters = $bindable(), searchBarColumns = undefined, searchBarVisible = true, quickFiltersVisible = false, lang = "en", searchBarPlaceholder = lang == 'en' ? "Type to search..." : "Scrivi per cercare...", editFilterMode = "one-edit", showActiveFilters = true, resizableColumns = false, resizedColumnSizeWithPadding = {}, pointerOnRowHover = undefined, doubleClickActive = false, doubleClickDelay = 250, calculateRowStyles = undefined, calculateRowClasses = undefined, class: clazz = {}, onfiltersChange, onpaginationChange, onremoveFilter, onremoveAllFilters, customFilterChipSnippet, customFilterSnippet, filterAppendSnippet, onrowClick, onrowDoubleClick, appendSnippet, customSnippet, headerLabelSnippet, headerSnippet, rowActionsSnippet, onsort, footerSnippet, rangeDescriptorSnippet, searchBarSnippet, noDataSnippet, oncolumnResize, } = $props();
+], hideRowsPerPage = false, totalElements = undefined, rowsPerPage = $bindable(20), filters = $bindable([]), quickFilters = $bindable(), searchBarColumns = undefined, searchBarVisible = true, quickFiltersVisible = false, lang = "en", dateLocale, searchBarPlaceholder = lang == 'en' ? "Type to search..." : "Scrivi per cercare...", editFilterMode = "one-edit", showActiveFilters = true, resizableColumns = false, resizedColumnSizeWithPadding = {}, pointerOnRowHover = undefined, doubleClickActive = false, doubleClickDelay = 250, calculateRowStyles = undefined, calculateRowClasses = undefined, class: clazz = {}, onfiltersChange, onpaginationChange, onremoveFilter, onremoveAllFilters, customFilterChipSnippet, customFilterSnippet, filterAppendSnippet, onrowClick, onrowDoubleClick, appendSnippet, customSnippet, headerLabelSnippet, headerSnippet, rowActionsSnippet, onsort, footerSnippet, rangeDescriptorSnippet, searchBarSnippet, noDataSnippet, totalsSnippet, oncolumnResize, } = $props();
 let searchBarInput = $state(), searchText = $state(), sortModify;
 let rowsPerPageSelection = $state([]);
 $effect(() => {
@@ -143,6 +143,7 @@ function buildFilters(params) {
             onremoveAllFilters={handleRemoveAllFilters}
             --filters-default-wrapper-width={!!searchBarVisible ? undefined : "100%"}
             {lang}
+            {dateLocale}
             {editFilterMode}
             {showActiveFilters}
             appendSnippet={filterAppendSnippet}
@@ -162,6 +163,9 @@ function buildFilters(params) {
       </div>
     {/snippet}
   </MediaQuery>
+
+  {@render totalsSnippet?.()}
+
   <SimpleTable
     {headers}
     class={clazz.simpleTable}

package/dist/components/composed/list/PaginatedTable.svelte.d.ts

@@ -88,6 +88,7 @@ declare class __sveltets_Render<Item extends {
         quickFilters?: ComponentProps<typeof QuickFilters>["filters"];
         editFilterMode?: "one-edit" | "multi-edit";
         showActiveFilters?: boolean;
+        dateLocale?: "it" | "en";
         class?: {
             simpleTable?: {
                 container?: string;
@@ -132,6 +133,7 @@ declare class __sveltets_Render<Item extends {
             maxPage: number | undefined;
             rowsPerPage: number;
         }]> | undefined;
+        totalsSnippet?: Snippet<[]>;
     };
     events(): {};
     slots(): {};

package/dist/components/composed/progress/HorizontalStackedProgress.css

@@ -6,4 +6,8 @@
   --horizontal-stacked-progress-label-gap: 12px;
   --horizontal-stacked-progress-legend-margin-top: 8px;
   --progress-bar-default-tooltip-padding: 8px;
+  --horizontal-stacked-progress-default-label-font-size: .8rem;
+  --horizontal-stacked-progress-default-label-font-weight: 300;
+  --horizontal-stacked-progress-default-value-font-size: 1.1rem;
+  --horizontal-stacked-progress-default-value-font-weight: 700;
 }

package/dist/components/composed/progress/HorizontalStackedProgress.svelte

@@ -7,7 +7,7 @@
 
 <script lang="ts">import './HorizontalStackedProgress.css';
 import ProgressBar from "../../simple/progress/ProgressBar.svelte";
-let { progresses = [], labelVisible = true, labelValueVisible = true, labelTextVisible = true, legendVisible = false, legendValueVisible = true, legendTextVisible = true, hideLabelUnderPercentage } = $props();
+let { progresses = [], labelVisible = true, labelValueVisible = true, labelTextVisible = true, legendVisible = false, legendValueVisible = true, legendTextVisible = true, hideLabelUnderPercentage, tooltipVisible = true, } = $props();
 let colors = [
     'rgb(var(--global-color-primary-500))',
     'rgb(var(--global-color-primary-300))',
@@ -53,7 +53,7 @@ let progressesItems = $derived(progresses.map((p, i) => {
           total={progress.value}
           value={progress.value}
           --progress-bar-highlight-color={progress.color}
-          valueTooltip
+          valueTooltip={tooltipVisible}
           valueTooltipLabel={progress.valueLabel || progress.value}
         ></ProgressBar>
         {#if progress.label && labelVisible && (hideLabelUnderPercentage === undefined || progress.percentage > hideLabelUnderPercentage)}
@@ -128,8 +128,14 @@ let progressesItems = $derived(progresses.map((p, i) => {
   }
 
   .label-text {
-    font-size: .8rem;
-    font-weight: 300;
+    font-size: var(
+      --horizontal-stacked-progress-label-font-size,
+      var(--horizontal-stacked-progress-default-label-font-size)
+    );
+    font-weight: var(
+      --horizontal-stacked-progress-label-font-weight,
+      var(--horizontal-stacked-progress-default-label-font-weight)
+    );
   }
 
   .label {
@@ -146,8 +152,14 @@ let progressesItems = $derived(progresses.map((p, i) => {
   }
 
   .value-text {
-    font-size: 1.1rem;
-    font-weight: 700;
+    font-size: var(
+      --horizontal-stacked-progress-value-font-size,
+      var(--horizontal-stacked-progress-default-value-font-size)
+    );
+    font-weight: var(
+      --horizontal-stacked-progress-value-font-weight,
+      var(--horizontal-stacked-progress-default-value-font-weight)
+    );
   }
 
   .dot {

package/dist/components/composed/progress/HorizontalStackedProgress.svelte.d.ts

@@ -15,6 +15,7 @@ interface Props {
     legendValueVisible?: boolean;
     legendTextVisible?: boolean;
     hideLabelUnderPercentage?: number;
+    tooltipVisible?: boolean;
 }
 declare const HorizontalStackedProgress: import("svelte").Component<Props, {}, "">;
 type HorizontalStackedProgress = ReturnType<typeof HorizontalStackedProgress>;

package/dist/components/composed/search/DynamicFilters.svelte

@@ -134,7 +134,6 @@ function updateCustomFilterValues(filterName, newValue, newValid, mode) {
 								--simple-textfield-background-color= transparent
 								--simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
 								--simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
-								--chip-default-color="rgb(var(--global-color-primary-foreground))"
 								--autocomplete-border-radius= 0.5rem
 								--autocomplete-border="1px solid rgb(var(--global-color-background-500))"
 								--autocomplete-focus-box-shadow="0 0 0 2px rgb(var(--global-color-primary-500))"
@@ -159,11 +158,11 @@ function updateCustomFilterValues(filterName, newValue, newValid, mode) {
 <style>
 	.custom-filters-container {
     display: flex;
-    height: 70vh;
+    height: 68vh;
   }
 
 	.custom-filters-container.mobile {
-		max-height: 29rem;
+		max-height: 27rem;
 	}
 
 	.yscroll {

package/dist/components/composed/search/FilterEditor.svelte

@@ -194,6 +194,9 @@ function onclick(event) {
               maxVisibleChips={2}
               --simple-textfield-width="0px"
               --simple-text-field-margin-left="0px"
+              --autocomplete-default-border-radius='4px'
+              --autocomplete-min-height="0px"
+              --chip-min-height="12px"
               mobileDrawer={mobile}
               onchange={handleChangeValue}
               placeholder={editFilterMode == 'one-edit' ? tmpFilter?.label : undefined}
@@ -208,6 +211,7 @@ function onclick(event) {
               bind:values={tmpFilter.values}
               items={tmpFilter.items}
               multiple
+              onchange={handleChangeValue}
             ></ToggleList>
           </div>
         {:else if tmpFilter.type === "date" && tmpFilter.mode === 'between'}

package/dist/components/composed/search/Filters.svelte

@@ -101,7 +101,9 @@ function handleRemoveFilter(filter) {
     let filterIndex = filters.findIndex((f) => f.name === filter.name);
     let filterName = filter.name;
     filters[filterIndex].active = false;
-    tmpFilters[filterName].active = false;
+    if (tmpFilters[filterName]) {
+        tmpFilters[filterName].active = false;
+    }
     if (Object.keys(filters[filterIndex]).includes('value')) {
         //@ts-ignore
         filters[filterIndex].value = undefined;

package/dist/components/simple/common/Menu.svelte

@@ -59,6 +59,91 @@ function calculateMenuPosition(params) {
                 _top = activatorTop + window.scrollY + (activatorHeight / 2) - (menuHeight / 2) - fixedParentTop;
                 _left = activatorLeft + window.scrollX + activatorWidth + _activatorGap - fixedParentLeft;
             }
+            else if (anchor == 'left-center') {
+                let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
+                let activatorHeight = params.activator.offsetHeight;
+                let menuHeight = params.menuElement.offsetHeight;
+                let menuWidth = params.menuElement.offsetWidth;
+                let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
+                _top = activatorTop + (activatorHeight / 2) - (menuHeight / 2);
+                _left = activatorLeft - menuWidth - _activatorGap;
+                if (!!fixedParent) {
+                    _top = _top - fixedParentTop;
+                    _left = _left - fixedParentLeft;
+                }
+                else if (!validStickyParent && !fixedParent) {
+                    _top = _top + window.scrollY;
+                    _left = _left + window.scrollX;
+                }
+            }
+            else if (anchor == 'up') {
+                let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
+                let menuHeight = params.menuElement.offsetHeight;
+                _top = activatorTop - menuHeight - _activatorGap;
+                _left = activatorLeft;
+                let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
+                if (!!fixedParent) {
+                    _top = _top - fixedParentTop;
+                    _left = _left - fixedParentLeft;
+                }
+                else if (!validStickyParent && !fixedParent) {
+                    _top = _top + window.scrollY;
+                    _left = _left + window.scrollX;
+                }
+            }
+            else if (anchor == 'left') {
+                let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
+                let menuWidth = params.menuElement.offsetWidth;
+                _top = activatorTop;
+                _left = activatorLeft - menuWidth - _activatorGap;
+                let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
+                if (!!fixedParent) {
+                    _top = _top - fixedParentTop;
+                    _left = _left - fixedParentLeft;
+                }
+                else if (!validStickyParent && !fixedParent) {
+                    _top = _top + window.scrollY;
+                    _left = _left + window.scrollX;
+                }
+            }
+            else if (anchor == 'right') {
+                let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
+                let activatorWidth = params.activator.offsetWidth;
+                _top = activatorTop;
+                _left = activatorLeft + activatorWidth + _activatorGap;
+                let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
+                if (!!fixedParent) {
+                    _top = _top - fixedParentTop;
+                    _left = _left - fixedParentLeft;
+                }
+                else if (!validStickyParent && !fixedParent) {
+                    _top = _top + window.scrollY;
+                    _left = _left + window.scrollX;
+                }
+            }
+            else if (anchor == 'up-center') {
+                let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
+                let activatorWidth = params.activator.offsetWidth;
+                let menuHeight = params.menuElement.offsetHeight;
+                let menuWidth = params.menuElement.offsetWidth;
+                _top = activatorTop - menuHeight - _activatorGap;
+                _left = activatorLeft;
+                let { top: fixedParentTop, left: fixedParentLeft, fixedParent, validStickyParent } = getParentInstanceFromViewport(activator?.parentElement);
+                if (!!fixedParent) {
+                    _top = _top - fixedParentTop;
+                    _left = _left - fixedParentLeft;
+                }
+                else if (!validStickyParent && !fixedParent) {
+                    _top = _top + window.scrollY;
+                    _left = _left + window.scrollX;
+                }
+                if (menuWidth > activatorWidth) {
+                    _left = _left - (menuWidth - activatorWidth) / 2;
+                }
+                else {
+                    _left = _left + (activatorWidth - menuWidth) / 2;
+                }
+            }
         }
         if (flipOnOverflow && !!params.activator) {
             let { top: activatorTopDistance } = params.activator.getBoundingClientRect();
@@ -71,12 +156,46 @@ function calculateMenuPosition(params) {
                 let { left: activatorLeft } = params.activator.getBoundingClientRect();
                 _left = activatorLeft + window.scrollX - _activatorGap - (menuElement?.offsetWidth || 0);
             }
+            if (anchor == 'left-center' &&
+                (_left || 0) < 0) {
+                let { left: activatorLeft } = params.activator.getBoundingClientRect();
+                let activatorWidth = params.activator.offsetWidth;
+                _left = activatorLeft + window.scrollX + activatorWidth + _activatorGap;
+            }
+            if (anchor == 'left' &&
+                (_left || 0) < 0) {
+                let { left: activatorLeft } = params.activator.getBoundingClientRect();
+                let activatorWidth = params.activator.offsetWidth;
+                _left = activatorLeft + window.scrollX + activatorWidth + _activatorGap;
+            }
+            if (anchor == 'right' &&
+                window.innerWidth + window.scrollX <
+                    (_left || 0) + (menuElement?.offsetWidth || 0)) {
+                let { left: activatorLeft } = params.activator.getBoundingClientRect();
+                let menuWidth = params.menuElement.offsetWidth;
+                _left = activatorLeft + window.scrollX - menuWidth - _activatorGap;
+            }
+            if (anchor == 'up' &&
+                (_top || 0) < window.scrollY) {
+                let { top: activatorTop } = params.activator.getBoundingClientRect();
+                let activatorHeight = params.activator.offsetHeight;
+                _top = activatorTop + window.scrollY + activatorHeight + _activatorGap;
+            }
+            if (anchor == 'up-center' &&
+                (_top || 0) < window.scrollY) {
+                let { top: activatorTop } = params.activator.getBoundingClientRect();
+                let activatorHeight = params.activator.offsetHeight;
+                _top = activatorTop + window.scrollY + activatorHeight + _activatorGap;
+            }
         }
         if (stayInViewport) {
             if (window.innerWidth + window.scrollX <
                 (_left || 0) + (menuElement?.offsetWidth || 0)) {
                 _left = Math.max(window.innerWidth + window.scrollX - (menuElement?.offsetWidth || 0), 0);
             }
+            if ((_left || 0) < window.scrollX) {
+                _left = window.scrollX;
+            }
         }
         if (!!positionedAncestor) {
             let { left: positionedAncestorLeft, top: positionedAncestorTop } = positionedAncestor.getBoundingClientRect();

package/dist/components/simple/common/Menu.svelte.d.ts

@@ -14,7 +14,7 @@ interface Props {
     open?: boolean;
     refreshPosition?: boolean;
     activator?: HTMLElement;
-    anchor?: "bottom" | "bottom-center" | "right-center";
+    anchor?: "bottom" | "bottom-center" | "right-center" | "left-center" | "up" | "left" | "right" | "up-center";
     closeOnClickOutside?: boolean;
     inAnimation?: (node: Element, params?: SlideParams | FlyParams | FadeParams) => TransitionConfig;
     inAnimationConfig?: SlideParams | FlyParams | FadeParams;

package/dist/components/simple/common/VerticalDraggableList.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import '../../../css/main.css';
+<script lang="ts" generics="Item extends { id: string, name: string }">import '../../../css/main.css';
 import './VerticalDraggableList.css';
 import { flip } from "svelte/animate";
 import { dndzone } from "svelte-dnd-action";

package/dist/components/simple/common/VerticalDraggableList.svelte.d.ts

@@ -1,26 +1,43 @@
 import '../../../css/main.css';
 import './VerticalDraggableList.css';
 import { type Snippet } from "svelte";
-declare const VerticalDraggableList: import("svelte").Component<{
-    items?: {
+declare class __sveltets_Render<Item extends {
+    id: string;
+    name: string;
+}> {
+    props(): {
+        items?: Item[] | undefined;
+        class?: string;
+        itemSnippet?: Snippet<[{
+            item: Item;
+        }]> | undefined;
+        onchangeOrder?: ((event: {
+            detail: {
+                items: Item[];
+            };
+        }) => void) | undefined;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Item extends {
         id: string;
         name: string;
-    }[];
-    class?: string;
-    itemSnippet?: Snippet<[{
-        item: {
-            id: string;
-            name: string;
-        };
-    }]>;
-    onchangeOrder?: (event: {
-        detail: {
-            items: {
-                id: string;
-                name: string;
-            }[];
-        };
-    }) => void;
-}, {}, "">;
-type VerticalDraggableList = ReturnType<typeof VerticalDraggableList>;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item>['props']>, ReturnType<__sveltets_Render<Item>['events']>, ReturnType<__sveltets_Render<Item>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Item>['bindings']>;
+    } & ReturnType<__sveltets_Render<Item>['exports']>;
+    <Item extends {
+        id: string;
+        name: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const VerticalDraggableList: $$IsomorphicComponent;
+type VerticalDraggableList<Item extends {
+    id: string;
+    name: string;
+}> = InstanceType<typeof VerticalDraggableList<Item>>;
 export default VerticalDraggableList;

package/dist/components/simple/forms/Autocomplete.svelte

@@ -197,6 +197,7 @@ import Menu from "../common/Menu.svelte";
 import {} from "svelte";
 import SimpleTextField from "./SimpleTextField.svelte";
 import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
+import Drawer from "../navigation/Drawer.svelte";
 </script>
 
 <svelte:window />
@@ -335,14 +336,18 @@ import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
     </Menu>
   {:else}
     <MenuOrDrawer
-      {activator}
-      _width={localMenuWidth || ""}
-      _height={menuHeight}
-      _maxHeight="300px"
-      _boxShadow={menuBoxShadow}
-      _borderRadius={menuBorderRadius}
+      menuProps={{
+        activator,
+        _width: localMenuWidth || "", 
+        _height: menuHeight,
+        _maxHeight: "300px",
+        _boxShadow: menuBoxShadow,
+        _borderRadius: menuBorderRadius,
+      }}
+      drawerProps={{
+        onclose
+      }}
       bind:open={menuOpened}
-      {onclose}
     >
       <ul
         class={clazz.menu || ""}

package/dist/components/simple/forms/Autocomplete.svelte.d.ts

@@ -8,7 +8,7 @@ import "./Autocomplete.css";
 import Menu from "../common/Menu.svelte";
 import { type ComponentProps, type Snippet } from "svelte";
 import SimpleTextField from "./SimpleTextField.svelte";
-import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
+import Drawer from "../navigation/Drawer.svelte";
 declare class __sveltets_Render<Data> {
     props(): {
         values?: Item<Data>[] | undefined;
@@ -83,7 +83,7 @@ declare class __sveltets_Render<Data> {
         onfocus?: (() => void) | undefined;
         onblur?: (() => void) | undefined;
         onkeydown?: ((e: KeyboardEvent) => void) | undefined;
-        onclose?: ComponentProps<typeof MenuOrDrawer>["onclose"];
+        onclose?: ComponentProps<typeof Drawer>["onclose"];
     };
     events(): {};
     slots(): {};

package/dist/components/simple/forms/Checkbox.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import './Checkbox.css';
 import '../../../css/main.css';
 import { onMount } from 'svelte';
-let { value = $bindable(), id = undefined, disabled = false, onchange, } = $props();
+let { value = $bindable(), id = undefined, disabled = false, onchange, ...rest } = $props();
 onMount(() => {
     window.addEventListener('keydown', handleKeyDown);
     window.addEventListener('keyup', handleKeyUp);
@@ -39,6 +39,7 @@ function handleChange(e) {
   bind:checked={value}
   onchange={handleChange}
   {disabled}
+  {...rest}
 />
 
 <style>

package/dist/components/simple/forms/Checkbox.svelte.d.ts

@@ -1,6 +1,7 @@
 import './Checkbox.css';
 import '../../../css/main.css';
-interface Props {
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLInputAttributes, 'onchange' | 'disabled' | 'id' | 'type' | 'checked'> {
     value?: boolean;
     id?: string;
     disabled?: boolean;

package/dist/components/simple/notifiers/AlertBanner.css

@@ -6,4 +6,5 @@
   --alert-banner-default-padding-top: .3rem;
   --alert-banner-default-padding-bottom: .3rem;
   --alert-banner-default-padding-bottom: .3rem;
+  --alert-banner-default-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)
 }

package/dist/components/simple/notifiers/AlertBanner.svelte

@@ -21,10 +21,10 @@ function onkeypress(e) {
     class="border-colored {clazz.border || ''}"
   ></div>
   <div class="body {clazz.body || ''}">
-    <div class="content">
-      {#if !!contentSnippet}
-        {@render contentSnippet({ title, description })}
-      {:else}
+    {#if !!contentSnippet}
+      {@render contentSnippet({ title, description })}
+    {:else}
+      <div class="content">
         {#if !!title}
           {#if !!titleSnippet}
             {@render titleSnippet({ title })}
@@ -39,8 +39,8 @@ function onkeypress(e) {
             <div class="description">{description}</div>
           {/if}
         {/if}
-      {/if}
-    </div>
+      </div>
+    {/if}
     {#if !!appendSnippet}
       <div class="append">
         {@render appendSnippet({ disabled })}
@@ -52,7 +52,7 @@ function onkeypress(e) {
 <style>
   .alert-banner-container {
     position: relative;
-    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)!important;
+    box-shadow: var(--alert-banner-box-shadow, var(--alert-banner-default-box-shadow))!important;
     border-radius: var(--alert-banner-border-radius, var(--alert-banner-default-border-radius));
     cursor: var(--alert-banner-cursor, var(--alert-banner-default-cursor));
     width: var(--alert-banner-width, var(--alert-banner-default-width));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair and others",
-  "version": "4.0.40",
+  "version": "4.0.42",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",

package/dist/components/composed/common/MenuOrDrawerOptions.svelte.d.ts

@@ -1,26 +0,0 @@
-export type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
-import '../../../css/main.css';
-import type { ComponentProps } from 'svelte';
-import MenuOrDrawer from "./MenuOrDrawer.svelte";
-import type Drawer from '../../simple/navigation/Drawer.svelte';
-import type Menu from '../../simple/common/Menu.svelte';
-import SelectableVerticalList from '../../simple/lists/SelectableVerticalList.svelte';
-interface Props {
-    open?: boolean;
-    activator: HTMLElement;
-    drawerPosition?: ComponentProps<typeof Drawer>['position'];
-    menuAnchor?: ComponentProps<typeof Menu>['anchor'];
-    elements?: ComponentProps<typeof SelectableVerticalList>['elements'];
-    stayInViewport?: ComponentProps<typeof MenuOrDrawer>['stayInViewport'];
-    flipOnOverflow?: ComponentProps<typeof MenuOrDrawer>['flipOnOverflow'];
-    _boxShadow?: string;
-    _height?: string;
-    _maxHeight?: string;
-    _minWidth?: string;
-    _borderRadius?: string;
-    openingId?: ComponentProps<typeof MenuOrDrawer>['openingId'];
-    onselect?: ComponentProps<typeof SelectableVerticalList>['onselect'];
-}
-declare const MenuOrDrawerOptions: import("svelte").Component<Props, {}, "open" | "activator">;
-type MenuOrDrawerOptions = ReturnType<typeof MenuOrDrawerOptions>;
-export default MenuOrDrawerOptions;