mithril-materialized 2.0.0-beta.8 → 2.0.0-rc.1

package/dist/input-options.d.ts

@@ -37,10 +37,10 @@ export interface InputAttrs<T = string> extends Attributes {
     onkeyup?: (ev: KeyboardEvent, value?: T) => void;
     /** Invoked when the element looses focus */
     onblur?: (ev: FocusEvent) => void;
-    /** Invoked when the value changes. */
-    oninput?: (value: T) => void;
-    /** Invoked when the input looses focus. */
-    onchange?: (value: T) => void;
+    /** Invoked when the value changes (immediate feedback). For range sliders with minmax, second parameter is maxValue. */
+    oninput?: (value: T, maxValue?: T) => void;
+    /** Invoked when the input looses focus. For range sliders with minmax, second parameter is maxValue. */
+    onchange?: (value: T, maxValue?: T) => void;
     /** Add a a placeholder to the input field. */
     placeholder?: string;
     /** Add a description underneath the input field. */
@@ -82,4 +82,18 @@ export interface InputAttrs<T = string> extends Attributes {
     isMandatory?: boolean;
     /** Add the required and aria-required attributes to the input element */
     required?: boolean;
+    /** For range inputs: render vertically instead of horizontally */
+    vertical?: boolean;
+    /** For range inputs: enable dual thumb (min/max) range selection */
+    minmax?: boolean;
+    /** For range inputs with minmax: initial minimum value */
+    minValue?: number;
+    /** For range inputs with minmax: initial maximum value */
+    maxValue?: number;
+    /** For range inputs: control value display behavior. 'auto' shows on drag, 'always' shows always, 'none' never shows */
+    valueDisplay?: 'auto' | 'always' | 'none';
+    /** For vertical range inputs: height of the slider */
+    height?: string;
+    /** For range inputs with valueDisplay: position of value tooltips */
+    tooltipPos?: 'top' | 'bottom' | 'left' | 'right';
 }

package/dist/input.d.ts

@@ -8,7 +8,6 @@ export declare const CharacterCounter: FactoryComponent<{
 }>;
 /** Create a TextArea */
 export declare const TextArea: FactoryComponent<InputAttrs<string>>;
-export type InputType = 'url' | 'color' | 'text' | 'number' | 'email' | 'range' | 'password';
 /** Component for entering some text */
 export declare const TextInput: m.FactoryComponent<InputAttrs<string>>;
 /** Component for entering a password */

package/dist/label.d.ts

@@ -9,6 +9,8 @@ export interface LabelAttrs extends Attributes {
     isMandatory?: boolean;
     /** Add the active class to the label */
     isActive?: boolean | string;
+    /** Determines the initial value of its active state, only used during oncreate */
+    initialValue?: boolean;
 }
 /** Simple label element, used for most components. */
 export declare const Label: FactoryComponent<LabelAttrs>;

package/dist/masonry.d.ts

@@ -0,0 +1,17 @@
+import { FactoryComponent, Attributes } from 'mithril';
+export interface MasonryBreakpoints {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+}
+export interface MasonryAttrs extends Attributes {
+    columns?: number | MasonryBreakpoints;
+    spacing?: number | string;
+    className?: string;
+    onItemClick?: (index: number, event: Event) => void;
+    cssOnly?: boolean;
+    animationDelay?: number;
+}
+export declare const Masonry: FactoryComponent<MasonryAttrs>;

package/dist/material-icon.d.ts

@@ -2,6 +2,9 @@ import { FactoryComponent, Attributes } from 'mithril';
 declare const iconPaths: {
     readonly caret: readonly ["M7 10l5 5 5-5z", "M0 0h24v24H0z"];
     readonly close: readonly ["M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z", "M0 0h24v24H0z"];
+    readonly chevron: readonly ["M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z", "M0 0h24v24H0z"];
+    readonly expand: readonly ["M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z", "M0 0h24v24H0z"];
+    readonly collapse: readonly ["M19 13H5v-2h14v2z", "M0 0h24v24H0z"];
 };
 type IconName = keyof typeof iconPaths;
 export interface MaterialIconAttrs extends Attributes {

package/dist/pickers.css

@@ -118,6 +118,30 @@
   line-height: 47px;
   font-weight: 500;
 }
+.datepicker-date-display .date-text.placeholder {
+  font-size: 1.8rem;
+  line-height: 30px;
+  color: rgba(255, 255, 255, 0.7);
+  font-weight: 400;
+}
+.datepicker-date-display .date-text .range-separator {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 1.5rem;
+  font-weight: 400;
+}
+.datepicker-date-display .date-text .end-date.placeholder {
+  color: rgba(255, 255, 255, 0.5);
+  font-style: italic;
+  font-size: 1.2rem;
+  font-weight: 300;
+}
+.datepicker-date-display.range-display .date-text {
+  font-size: 1.6rem;
+  line-height: 28px;
+}
+.datepicker-date-display.range-display .date-text .start-date, .datepicker-date-display.range-display .date-text .end-date {
+  display: inline-block;
+}
 
 /* Calendar */
 .datepicker-calendar-container {
@@ -164,6 +188,27 @@
   background-color: var(--mm-primary-color, #26a69a);
   color: var(--mm-button-text, #fff);
 }
+.datepicker-table td.is-range-start {
+  background-color: var(--mm-primary-color, #26a69a);
+  color: var(--mm-button-text, #fff);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.datepicker-table td.is-range-end {
+  background-color: var(--mm-primary-color, #26a69a);
+  color: var(--mm-button-text, #fff);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.datepicker-table td.is-in-range {
+  background-color: var(--mm-primary-color-alpha-20, rgba(38, 166, 154, 0.2));
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+  border-radius: 0;
+}
+.datepicker-table td.is-range-preview {
+  background-color: var(--mm-primary-color-alpha-10, rgba(38, 166, 154, 0.1));
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+}
 .datepicker-table td.is-outside-current-month, .datepicker-table td.is-disabled {
   color: var(--mm-text-disabled, rgba(0, 0, 0, 0.3));
   pointer-events: none;

package/dist/range-slider.d.ts

@@ -0,0 +1,42 @@
+import m from 'mithril';
+import { InputAttrs } from './input-options';
+export declare const SingleRangeSlider: {
+    oninit({ state }: {
+        state: any;
+    }): void;
+    onremove({ state }: {
+        state: any;
+    }): void;
+    view({ attrs, state, }: {
+        attrs: InputAttrs<any> & {
+            cn?: string;
+            style?: any;
+            iconName?: string;
+            id: string;
+            label?: string;
+            isMandatory?: boolean;
+            helperText?: string;
+        };
+        state: any;
+    }): m.Vnode<any, any>;
+};
+export declare const DoubleRangeSlider: {
+    oninit({ state }: {
+        state: any;
+    }): void;
+    onremove({ state }: {
+        state: any;
+    }): void;
+    view({ attrs, state, }: {
+        attrs: InputAttrs<any> & {
+            cn?: string;
+            style?: any;
+            iconName?: string;
+            id: string;
+            label?: string;
+            isMandatory?: boolean;
+            helperText?: string;
+        };
+        state: any;
+    }): m.Vnode<any, any>;
+};

package/dist/timeline.d.ts

@@ -0,0 +1,43 @@
+import m, { FactoryComponent, Attributes } from 'mithril';
+export interface TimelineItemAttrs {
+    /** Unique identifier for the timeline item */
+    id?: string;
+    /** Main label/title for the timeline item */
+    label: string;
+    /** Optional description text */
+    description?: string;
+    /** Timestamp for the item (string or Date object) */
+    timestamp?: string | Date;
+    /** Custom content to render instead of label/description */
+    content?: m.Children;
+    /** Material icon name for the timeline dot */
+    icon?: string;
+    /** Color theme for the timeline item */
+    color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+    /** Click handler for the timeline item */
+    onClick?: (item: TimelineItemAttrs, event: Event) => void;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Custom CSS class for the item */
+    className?: string;
+}
+export interface TimelineAttrs extends Attributes {
+    /** Array of timeline items to display */
+    items: TimelineItemAttrs[];
+    /** Position of content relative to the timeline line (vertical only) */
+    position?: 'left' | 'right' | 'alternate';
+    /** Whether to show the connecting line between items */
+    showConnector?: boolean;
+    /** Custom CSS class for the timeline container */
+    className?: string;
+    /** Whether to show timestamps */
+    showTimestamps?: boolean;
+    /** Compact mode with reduced spacing */
+    compact?: boolean;
+}
+/**
+ * Timeline Component
+ * Displays a sequence of events in chronological order with connecting lines
+ * Supports both vertical and horizontal orientations with Material Design styling
+ */
+export declare const Timeline: FactoryComponent<TimelineAttrs>;

package/dist/treeview.d.ts

@@ -0,0 +1,39 @@
+import { FactoryComponent, Attributes } from 'mithril';
+import { EventHandler, SelectionMode } from './types';
+export interface TreeNode {
+    id: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    expanded?: boolean;
+    children?: TreeNode[];
+}
+export type TreeIconType = 'caret' | 'chevron' | 'plus-minus' | 'triangle';
+export interface TreeViewAttrs<T extends TreeNode = TreeNode> extends Attributes {
+    /** Tree data structure */
+    data: T[];
+    /** Selection mode - none, single, or multiple */
+    selectionMode?: SelectionMode;
+    /** Currently selected node IDs */
+    selectedIds?: string[];
+    /** Called when selection changes */
+    onselection?: EventHandler<string[]>;
+    /** Called when node is expanded/collapsed */
+    onexpand?: EventHandler<{
+        nodeId: string;
+        expanded: boolean;
+    }>;
+    /** Icon type for expand/collapse indicators */
+    iconType?: TreeIconType;
+    /** Show connecting lines between tree levels (VSCode-style) */
+    showConnectors?: boolean;
+    /** Allow keyboard navigation */
+    keyboardNavigation?: boolean;
+    /** Optional CSS class */
+    className?: string;
+    /** Optional inline styles */
+    style?: Record<string, any>;
+    /** Component ID */
+    id?: string;
+}
+export declare const TreeView: FactoryComponent<TreeViewAttrs>;

package/dist/types.d.ts

@@ -0,0 +1,226 @@
+/**
+ * @fileoverview Core TypeScript utility types for mithril-materialized library
+ * These types improve type safety and developer experience across all components
+ */
+/**
+ * Component size variants used throughout the library
+ * @example
+ * ```typescript
+ * const buttonSize: ComponentSize = 'medium';
+ * const iconSize: ComponentSize = 'small';
+ * ```
+ */
+export type ComponentSize = 'tiny' | 'small' | 'medium' | 'large';
+/**
+ * Material Design positioning options
+ * @example
+ * ```typescript
+ * const tooltipPosition: MaterialPosition = 'top';
+ * const dropdownPosition: MaterialPosition = 'bottom';
+ * ```
+ */
+export type MaterialPosition = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Extended positioning including corners and center
+ */
+export type ExtendedPosition = MaterialPosition | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
+/**
+ * Validation result - either success (true/empty string) or error (false/error message)
+ * @example
+ * ```typescript
+ * const validator = (value: string): ValidationResult => {
+ *   return value.length >= 3 || 'Must be at least 3 characters';
+ * };
+ * ```
+ */
+export type ValidationSuccess = true | '';
+export type ValidationError = false | string;
+export type ValidationResult = ValidationSuccess | ValidationError;
+/**
+ * Generic event handler type with proper typing for value and optional event
+ * @template T - The type of the value being handled
+ */
+export interface EventHandler<T = any> {
+    (value: T, event?: Event): void;
+}
+/**
+ * Keyboard event handler with proper typing
+ * @template T - The type of the associated value
+ */
+export interface KeyboardEventHandler<T = string> {
+    (event: KeyboardEvent, value?: T): void;
+}
+/**
+ * Valid ID types for components - allows strings and numbers
+ */
+export type ValidId = string | number;
+/**
+ * Component ID type - string branded for type safety
+ */
+export type ComponentId = string & {
+    readonly __componentId: unique symbol;
+};
+/**
+ * Conditional type to make ID required or optional
+ * @template T - The base type
+ * @template Required - Whether ID should be required
+ */
+export type WithId<T, Required extends boolean = false> = Required extends true ? T & {
+    id: ComponentId;
+} : T & {
+    id?: ComponentId;
+};
+/**
+ * Validation function interface
+ * @template T - The type of value being validated
+ */
+export interface ValidatorFunction<T> {
+    /**
+     * Validates a value
+     * @param value - The value to validate
+     * @param element - Optional HTML element for context
+     * @returns True/empty string for success, false/error message for failure
+     */
+    (value: T, element?: HTMLInputElement): ValidationResult;
+}
+/**
+ * Type guard to check if validation result indicates success
+ * @param result - The validation result to check
+ * @returns True if validation passed
+ */
+export declare const isValidationSuccess: (result: ValidationResult) => result is ValidationSuccess;
+/**
+ * Type guard to check if validation result indicates an error
+ * @param result - The validation result to check
+ * @returns True if validation failed
+ */
+export declare const isValidationError: (result: ValidationResult) => result is ValidationError;
+/**
+ * Button variant discriminated union for type-safe button configurations
+ */
+export type ButtonVariant = {
+    type: 'button';
+    submit?: never;
+    modalId?: never;
+} | {
+    type: 'submit';
+    modalId?: never;
+} | {
+    type: 'modal';
+    modalId: string;
+    submit?: never;
+} | {
+    type: 'reset';
+    modalId?: never;
+    submit?: never;
+};
+/**
+ * Input type union with proper HTML input types
+ */
+export type InputType = 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number' | 'range' | 'date' | 'datetime-local' | 'month' | 'time' | 'week' | 'color' | 'file' | 'hidden';
+/**
+ * Input value type based on input type
+ * @template T - The input type
+ */
+export type InputValue<T extends InputType> = T extends 'number' | 'range' ? number : T extends 'date' | 'datetime-local' | 'month' | 'time' | 'week' ? Date | string : T extends 'file' ? FileList | File[] : string;
+/**
+ * Icon class using template literal types for better IntelliSense
+ */
+export type IconClass = ComponentSize | MaterialPosition | `${ComponentSize} ${MaterialPosition}`;
+/**
+ * Modal type discriminated union
+ */
+export type ModalType = {
+    type: 'standard';
+    fixedFooter?: never;
+    bottomSheet?: never;
+} | {
+    type: 'fixed-footer';
+    fixedFooter: true;
+    bottomSheet?: never;
+} | {
+    type: 'bottom-sheet';
+    bottomSheet: true;
+    fixedFooter?: never;
+};
+/**
+ * Selection mode for components that support item selection
+ */
+export type SelectionMode = 'none' | 'single' | 'multiple';
+/**
+ * Sort direction for sortable components
+ */
+export type SortDirection = 'asc' | 'desc';
+/**
+ * Theme variant for components that support theming
+ */
+export type ThemeVariant = 'light' | 'dark' | 'auto';
+/**
+ * Color palette based on Material Design
+ */
+export type MaterialColor = 'red' | 'pink' | 'purple' | 'deep-purple' | 'indigo' | 'blue' | 'light-blue' | 'cyan' | 'teal' | 'green' | 'light-green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'deep-orange' | 'brown' | 'grey' | 'blue-grey';
+/**
+ * Color intensity levels
+ */
+export type ColorIntensity = 'lighten-5' | 'lighten-4' | 'lighten-3' | 'lighten-2' | 'lighten-1' | 'base' | 'darken-1' | 'darken-2' | 'darken-3' | 'darken-4' | 'accent-1' | 'accent-2' | 'accent-3' | 'accent-4';
+/**
+ * Full color specification with intensity
+ */
+export type MaterialColorSpec = MaterialColor | `${MaterialColor} ${ColorIntensity}`;
+/**
+ * Makes specified keys required while keeping others optional
+ * @template T - The base type
+ * @template K - Keys to make required
+ */
+export type RequiredKeys<T, K extends keyof T> = T & Required<Pick<T, K>>;
+/**
+ * Makes specified keys optional while keeping others as-is
+ * @template T - The base type
+ * @template K - Keys to make optional
+ */
+export type OptionalKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+/**
+ * Extracts function parameter types
+ * @template T - The function type
+ */
+export type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;
+/**
+ * Creates a deep readonly version of a type
+ * @template T - The type to make readonly
+ */
+export type DeepReadonly<T> = {
+    readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
+};
+/**
+ * Represents a component that can be focused
+ */
+export interface Focusable {
+    focus(): void;
+    blur(): void;
+}
+/**
+ * Represents a component that can be validated
+ */
+export interface Validatable<T = any> {
+    validate(): ValidationResult;
+    readonly isValid: boolean;
+    readonly value: T;
+}
+/**
+ * Configuration for components with validation
+ * @template T - The type of value being validated
+ */
+export interface ValidationConfig<T = any> {
+    /** Whether the field is required */
+    required?: boolean;
+    /** Minimum length for string values */
+    minLength?: number;
+    /** Maximum length for string values */
+    maxLength?: number;
+    /** Pattern to match for validation */
+    pattern?: RegExp;
+    /** Custom validation function */
+    validator?: ValidatorFunction<T>;
+    /** Whether to show validation messages inline */
+    showValidationMessage?: boolean;
+}

package/dist/utilities.css

@@ -2405,21 +2405,21 @@ video.responsive-video {
   height: 30px;
 }
 .pagination li a {
-  color: #444;
+  color: var(--mm-text-primary, #444);
   display: inline-block;
   font-size: 1.2rem;
   padding: 0 10px;
   line-height: 30px;
 }
 .pagination li.active a {
-  color: #fff;
+  color: var(--mm-text-on-primary, #fff);
 }
 .pagination li.active {
   background-color: #ee6e73;
 }
 .pagination li.disabled a {
   cursor: default;
-  color: #999;
+  color: var(--mm-text-disabled, #999);
 }
 .pagination li i {
   font-size: 2rem;
@@ -2750,8 +2750,8 @@ td, th {
 .collection .collection-item.avatar i.circle {
   font-size: 18px;
   line-height: 42px;
-  color: #fff;
-  background-color: #999;
+  color: var(--mm-text-on-primary, #fff);
+  background-color: var(--mm-text-disabled, #999);
   text-align: center;
 }
 .collection .collection-item.avatar .title {
@@ -2773,7 +2773,7 @@ td, th {
   color: rgb(234.25, 250.25, 248.75);
 }
 .collection .collection-item.active .secondary-content {
-  color: #fff;
+  color: var(--mm-text-on-primary, #fff);
 }
 .collection a.collection-item {
   display: block;
@@ -2948,13 +2948,15 @@ td, th {
   padding: 24px;
   margin: 0.5rem 0 1rem 0;
   border-radius: 2px;
-  background-color: #fff;
+  background-color: var(--mm-card-background, #fff);
+  color: var(--mm-text-primary);
 }
 
 .card {
   position: relative;
   margin: 0.5rem 0 1rem 0;
-  background-color: #fff;
+  background-color: var(--mm-card-background, #fff);
+  color: var(--mm-text-primary);
   transition: box-shadow 0.25s;
   border-radius: 2px;
 }
@@ -3053,6 +3055,8 @@ td, th {
 .card .card-content {
   padding: 24px;
   border-radius: 0 0 2px 2px;
+  background-color: var(--mm-card-background, #fff);
+  color: var(--mm-text-primary);
 }
 .card .card-content p {
   margin: 0;
@@ -3061,6 +3065,7 @@ td, th {
   display: block;
   line-height: 32px;
   margin-bottom: 8px;
+  color: var(--mm-text-primary);
 }
 .card .card-content .card-title i {
   line-height: 32px;
@@ -3086,7 +3091,8 @@ td, th {
 .card .card-reveal {
   padding: 24px;
   position: absolute;
-  background-color: #fff;
+  background-color: var(--mm-card-background, #fff);
+  color: var(--mm-text-primary);
   width: 100%;
   overflow-y: auto;
   left: 0;
@@ -3098,6 +3104,7 @@ td, th {
 .card .card-reveal .card-title {
   cursor: pointer;
   display: block;
+  color: var(--mm-text-primary);
 }
 
 #toast-container {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-materialized",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0-rc.1",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -36,9 +36,9 @@
   ],
   "scripts": {
     "build": "rollup -c rollup.config.mjs && npm run build:css-min",
-    "build:css-min": "sass --no-source-map --style=compressed ./src/index.scss ./dist/index.min.css && npm run build:css-modules",
+    "build:css-min": "sass --no-source-map --style=compressed --no-charset ./src/index.scss ./dist/index.min.css && npm run build:css-modules",
     "build:css-modules": "sass --no-source-map ./src/core.scss ./dist/core.css && sass --no-source-map ./src/components.scss ./dist/components.css && sass --no-source-map ./src/forms.scss ./dist/forms.css && sass --no-source-map ./src/pickers.scss ./dist/pickers.css && sass --no-source-map ./src/advanced.scss ./dist/advanced.css && sass --no-source-map ./src/utilities.scss ./dist/utilities.css",
-    "dev": "rollup -c rollup.config.mjs -w",
+    "dev": "concurrently \"rollup -c rollup.config.mjs -w\" \"npm run css:watch\"",
     "start": "npm run dev",
     "clean": "rimraf dist node_modules/.cache",
     "test": "jest",
@@ -54,6 +54,8 @@
     "build:domain": "npm run clean && npm run build && typedoc --out ../../docs/typedoc src",
     "dry-run": "npm publish --dry-run",
     "sass:watch": "sass --watch ./sass/materialize.scss ./dist/index.css",
+    "css:watch": "sass --watch --no-source-map --style=compressed --no-charset ./src/index.scss ./dist/index.min.css",
+    "dev:full": "npm run dev & npm run css:watch",
     "patch-release": "npm run clean && npm run build && npm version patch --force -m \"Patch release\" && npm publish && git push --follow-tags",
     "minor-release": "npm run clean && npm run build && npm version minor --force -m \"Minor release\" && npm publish && git push --follow-tags",
     "major-release": "npm run clean && npm run build && npm version major --force -m \"Major release\" && npm publish && git push --follow-tags"
@@ -69,29 +71,30 @@
   "author": "Erik Vullings <erik.vullings@gmail.com> (http://www.tno.nl)",
   "license": "MIT",
   "dependencies": {
-    "mithril": "^2.3.3"
+    "mithril": "^2.3.5"
   },
   "devDependencies": {
-    "@playwright/test": "^1.54.2",
+    "@playwright/test": "^1.55.0",
     "@rollup/plugin-typescript": "^12.1.4",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
     "@types/mithril": "^2.2.7",
     "autoprefixer": "^10.4.21",
+    "concurrently": "^9.2.1",
     "express": "^5.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.0.5",
     "jest-environment-jsdom": "^30.0.5",
     "js-yaml": "^4.1.0",
     "rimraf": "^6.0.1",
-    "rollup": "^4.46.2",
+    "rollup": "^4.48.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.90.0",
+    "sass": "^1.91.0",
     "ts-jest": "^29.4.1",
     "tslib": "^2.8.1",
-    "typedoc": "^0.28.9",
+    "typedoc": "^0.28.11",
     "typescript": "^5.9.2"
   }
 }