@flitsmeister/design-system 2.2.36 → 3.0.1

package/README.md

@@ -1,72 +1,85 @@
+# @flitsmeister/design-system
 
-# Flitsmeister Design System
+Flitsmeister design system for modern web apps. Version 3 and higher ships Lit-based web components that can be used from plain HTML, Lit, React, Vue, Angular, Svelte, or any other framework that supports custom elements.
 
-This project serves two main purposes:
+> Note: npm v2.x of this package contained Vue components and design tokens. npm v3.x is a new web component package under the same package name.
 
-1. **Dev Docs Site**: A documentation and demo site for developing and previewing the design system.
-2. **Library Use**: A consumable library of Vue components and design tokens for use in other projects.
-
----
-
-## Consuming the Design System as a Library
-
-### 1. Using Design Tokens (CSS)
+## Install
 
+```bash
+npm install @flitsmeister/design-system
+```
 
-Design tokens are exported as platform-specific files in `tokens/schema_exports/`. For easier consumption, the package maps these files to the `themes/` export path (see the `exports` field in `package.json`).
+With pnpm:
 
-**How to import CSS tokens:**
+```bash
+pnpm add @flitsmeister/design-system
+```
 
-- Choose the appropriate CSS file for your schema (e.g., `fm-design-system.css`) and import it using the `themes/` alias:
+The package requires Node.js 24 or newer for local tooling and publishing. Runtime components are browser custom elements built with Lit.
 
-  ```js
-  import '@flitsmeister/design-system/themes/fm-design-system/fm-design-system.css';
-  ```
+## Quick Start
 
-- This will provide all color, spacing, and other design tokens as CSS custom properties. You can use these variables directly in your own CSS or with Tailwind.
+Import the components you use, then render the matching custom elements in your HTML.
 
+```js
+import '@flitsmeister/design-system/fm-button'
+import '@flitsmeister/design-system/fm-input'
+```
 
-### 2. Using Vue Components
+```html
+<fm-input id="email" placeholder="Email" type="email"></fm-input>
+<fm-button role="primary" buttontype="filled">Opslaan</fm-button>
+```
 
-Import the components you need:
+For icons, import the icon component and register icons before using them.
 
 ```js
-import { fmxButton, fmxInput, fmxDropdown } from "@flitsmeister/design-system";
+import '@flitsmeister/design-system/fm-icon/all'
 ```
 
-Register and use them as standard Vue 3 single-file components. Overview of each:
-
-- **fmxButton** — Button with multiple visual variants. Props: `role` (e.g. primary, secondary, success, warning, danger, info, strong, weak), `buttontype` (filled, text, outline, squared), `size` (sm, md, lg, xl), `icon` (symbol id for your SVG sprite), `iconPosition` (prepend, append), `disabled`, `customClasses`. Use `href` and `target` for link-style buttons. If you use `icon`, the consuming app must provide an SVG sprite that includes the referenced symbol ids.
-
-- **fmxInput** — v-model text-style input with optional validation and floating placeholder. Props: `placeholder`, `rules` (array of validator functions), `customClass` (wrapper spacing/layout), `inputClass` (on the input element). To show a visible default border, set on a parent: `--fmx-input-border-default: var(--color-surface-neutral-default);` (focus and error states stay correct). To validate from a parent (e.g. on submit), use a ref and call `validate()`.
+```html
+<fm-icon name="check" variant="filled" size="md"></fm-icon>
+<fm-button role="primary" icon="add" icon-variant="bold">Toevoegen</fm-button>
+```
 
-- **fmxDropdown** — v-model select. Pass `options` as an array of `{ value, label }` and bind `v-model` to the selected value. Use the `option` slot to customize option rendering. Set `fullScreen` to true for a mobile-friendly modal overlay.
+## Components
 
-### 3. Using Icons
+| Component | Import | Description |
+| --- | --- | --- |
+| `fm-button` | `@flitsmeister/design-system/fm-button` | Accessible button with variants, sizes, icons, loading, success, and error states. |
+| `fm-input` | `@flitsmeister/design-system/fm-input` | Text input with floating label, validation rules, loading, success, and error states. |
+| `fm-radio-input` | `@flitsmeister/design-system/fm-radio-input` | Radio-card option with label, media, description, and native radio behavior. |
+| `fm-segmented-controller` | `@flitsmeister/design-system/fm-segmented-controller` | Segmented control backed by a native radio group. |
+| `fm-dropdown` | `@flitsmeister/design-system/fm-dropdown` | Animated dropdown backed by a hidden native select for forms and accessibility. |
+| `fm-wizard` | `@flitsmeister/design-system/fm-wizard` | Wizard stepper with declarative `fm-wizard-node` configuration. |
+| `fm-icon` | `@flitsmeister/design-system/fm-icon` | Icon element using the generated Flitsmeister icon registry. |
 
-SVG icon files are available via the `icons/` export path. You can import any icon directly:
+You can also import the package root to register the main component set:
 
 ```js
-import iconCar from '@flitsmeister/design-system/icons/filled/car.svg';
+import '@flitsmeister/design-system'
 ```
 
-You can also reference icons by their path for use in `<img>`, `<svg>`, or as assets in your build system.
+## Installer CLI
 
-> **Browse all available icons and their names at:** [https://fmdx.netlify.app/icons](https://fmdx.netlify.app/icons)
+The package includes a small setup CLI:
 
----
+```bash
+npx --package @flitsmeister/design-system design-system-install
+```
 
-## About the Design System
+After installing the package in a project:
 
-- Provides Flitsmeister design system colors, typography, buttons, icons, input, and dropdown components.
-- Design tokens are managed and exported from Figma, with automated scripts generating platform-specific outputs (CSS, iOS JSON, Android XML, etc.).
-- See the `/tokens/schema_exports/` directory for all available exports.
+```bash
+npm exec design-system-install
+```
 
-## Automated Design Token Export Workflow
+`fm-ui-install` is available as an alias for the same CLI.
 
-1. **Source of Truth**: All design tokens are exported from Figma as JSON and stored in `tokens/schema_sourcefiles/`.
-2. **Automated Exports**: Run `tokens/scripts/export-tokens.js` to generate fully resolved, platform-specific files in `tokens/schema_exports/{schema}/`.
-3. **Schema Index & Documentation**: The `/schemas` page in the dev site lists all schemas and export formats with download links.
-4. **Static File Serving**: All schema sourcefiles and exports are served as static files for easy download and integration.
-5. **Best Practices**: Never edit generated files by hand. Always update the Figma export and re-run the export script to propagate changes.
+## Version History
 
+| Version | Contents | Repository |
+| --- | --- | --- |
+| `3.x` | Lit web components (`fm-button`, `fm-input`, `fm-dropdown`, and more) | [design-system-v2](https://github.com/flitsmeister/design-system-v2) |
+| `2.x` | Vue components and design tokens | [design-system](https://github.com/flitsmeister/design-system) |

package/dist/fm-button/fm-button-core.d.ts

@@ -0,0 +1,25 @@
+export type ButtonType = 'button' | 'submit' | 'reset';
+export type Size = 'sm' | 'md' | 'lg' | 'xl';
+export type IconSize = 'sm' | 'md' | 'lg';
+export type Role = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'dangeralt' | 'danger-alt' | 'info' | 'strong' | 'weak';
+export type ButtonVariant = 'filled' | 'text' | 'outline' | 'squared';
+export type IconPosition = 'prepend' | 'append';
+export declare const FM_BUTTON_ERROR_PHASE_MS = 1500;
+export interface FmButtonClassesInput {
+    size: Size;
+    role: Role;
+    buttontype: ButtonVariant;
+    loading: boolean;
+    error: boolean;
+    success: boolean;
+    customClasses: string;
+}
+export declare function buildButtonClasses(input: FmButtonClassesInput): string;
+export declare function iconSizeForButtonSize(size: Size): IconSize;
+export interface FmButtonMorphWidthInput {
+    loading: boolean;
+    savedWidth: number;
+    retryMorphWidth: number;
+}
+export declare function morphWidthInlineStyle(input: FmButtonMorphWidthInput): string | null;
+//# sourceMappingURL=fm-button-core.d.ts.map

package/dist/fm-button/fm-button-core.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fm-button-core.d.ts","sourceRoot":"","sources":["../../src/fm-button/fm-button-core.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;AACtD,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAC5C,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AACzC,MAAM,MAAM,IAAI,GACZ,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,QAAQ,GACR,WAAW,GACX,YAAY,GACZ,MAAM,GACN,QAAQ,GACR,MAAM,CAAA;AACV,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AACrE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,CAAA;AAE/C,eAAO,MAAM,wBAAwB,OAAO,CAAA;AAE5C,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,IAAI,CAAA;IACV,IAAI,EAAE,IAAI,CAAA;IACV,UAAU,EAAE,aAAa,CAAA;IACzB,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,OAAO,CAAA;IACd,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,EAAE,MAAM,CAAA;CACtB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,oBAAoB,GAAG,MAAM,CAQtE;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,IAAI,GAAG,QAAQ,CAG1D;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;IAClB,eAAe,EAAE,MAAM,CAAA;CACxB;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,uBAAuB,GAAG,MAAM,GAAG,IAAI,CAInF"}

package/dist/fm-button/fm-button-core.js

@@ -0,0 +1,23 @@
+export const FM_BUTTON_ERROR_PHASE_MS = 1500;
+export function buildButtonClasses(input) {
+    const { size, role, buttontype, loading, error, success, customClasses } = input;
+    const base = `btn btn-size-${size} btn-role-${role} btn-buttontype-${buttontype}`;
+    const loadingClass = loading ? ' btn--loading' : '';
+    const errorShake = error ? ' btn--error-shake' : '';
+    const errorClass = error ? ' btn--error' : '';
+    const successClass = success ? ' btn--success' : '';
+    return `${base}${loadingClass}${errorShake}${errorClass}${successClass} ${customClasses}`.trim();
+}
+export function iconSizeForButtonSize(size) {
+    if (size === 'xl')
+        return 'lg';
+    return size;
+}
+export function morphWidthInlineStyle(input) {
+    if (input.loading && input.savedWidth > 0)
+        return `width: ${input.savedWidth}px`;
+    if (input.retryMorphWidth > 0)
+        return `width: ${input.retryMorphWidth}px`;
+    return null;
+}
+//# sourceMappingURL=fm-button-core.js.map

package/dist/fm-button/fm-button-core.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fm-button-core.js","sourceRoot":"","sources":["../../src/fm-button/fm-button-core.ts"],"names":[],"mappings":"AAiBA,MAAM,CAAC,MAAM,wBAAwB,GAAG,IAAI,CAAA;AAY5C,MAAM,UAAU,kBAAkB,CAAC,KAA2B;IAC5D,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;IAChF,MAAM,IAAI,GAAG,gBAAgB,IAAI,aAAa,IAAI,mBAAmB,UAAU,EAAE,CAAA;IACjF,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IACnD,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAA;IACnD,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAA;IAC7C,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IACnD,OAAO,GAAG,IAAI,GAAG,YAAY,GAAG,UAAU,GAAG,UAAU,GAAG,YAAY,IAAI,aAAa,EAAE,CAAC,IAAI,EAAE,CAAA;AAClG,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,IAAU;IAC9C,IAAI,IAAI,KAAK,IAAI;QAAE,OAAO,IAAI,CAAA;IAC9B,OAAO,IAAgB,CAAA;AACzB,CAAC;AAQD,MAAM,UAAU,qBAAqB,CAAC,KAA8B;IAClE,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,UAAU,GAAG,CAAC;QAAE,OAAO,UAAU,KAAK,CAAC,UAAU,IAAI,CAAA;IAChF,IAAI,KAAK,CAAC,eAAe,GAAG,CAAC;QAAE,OAAO,UAAU,KAAK,CAAC,eAAe,IAAI,CAAA;IACzE,OAAO,IAAI,CAAA;AACb,CAAC"}

package/dist/fm-button/fm-button.d.ts

@@ -0,0 +1,83 @@
+import { LitElement } from 'lit';
+import type { IconVariant } from '../fm-icon/icon-registry.generated.js';
+import '../fm-icon/icons/bold-check.js';
+import '../fm-icon/icons/bold-spinner.js';
+import '../fm-icon/icons/bold-warning.js';
+import type { ButtonType, ButtonVariant, IconPosition, Role, Size } from './fm-button-core.js';
+export type { ButtonType, ButtonVariant, FmButtonClassesInput, FmButtonMorphWidthInput, IconPosition, IconSize, Role, Size } from './fm-button-core.js';
+/**
+ * Flitsmeister button web component. Styled, accessible button with multiple roles, sizes and variants.
+ *
+ * @element fm-button
+ *
+ * @slot default - Button label (text or HTML).
+ *
+ * @example
+ * ```html
+ * <fm-button role="primary" buttontype="filled">Save</fm-button>
+ * ```
+ *
+ * @example
+ * ```html
+ * <fm-button role="primary" icon="add" icon-variant="bold">Toevoegen</fm-button>
+ * <fm-button role="secondary" icon="chevron-forward" icon-position="append">Volgende</fm-button>
+ * ```
+ */
+export declare class FmButton extends LitElement {
+    /** Native button type: 'button' | 'submit' | 'reset'. Default `'button'`. */
+    type: ButtonType;
+    /** Title/tooltip text. */
+    title: string;
+    /** Reserved for link-style usage; not rendered on the native button. */
+    href: string;
+    /** Reserved for link-style usage; not rendered on the native button. */
+    target: string;
+    /** Size: 'sm' | 'md' | 'lg' | 'xl'. Default `'md'`. */
+    size: Size;
+    /** Visual role (color): 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'dangeralt' | 'danger-alt' | 'info' | 'strong' | 'weak'. Default `'strong'`. */
+    role: Role;
+    /** Variant: 'filled' | 'text' | 'outline' | 'squared'. Default `'filled'`. */
+    buttontype: ButtonVariant;
+    /** Icon name for fm-icon (from icon registry). Use with icon-variant; page must register icons (e.g. import fm-icon/all or per-icon). */
+    icon: string;
+    /** Icon variant for fm-icon: 'bold' | 'filled' | 'stroke' | 'duotone'. Default `'bold'`. */
+    iconVariant: IconVariant;
+    /** Icon position: 'prepend' | 'append'. Default `'prepend'`. */
+    iconPosition: IconPosition;
+    /** Disabled state. Reflected to attribute. */
+    disabled: boolean;
+    /** Loading state: button becomes circle with centered spinner. */
+    loading: boolean;
+    /** Error state: shows danger-alt + warning icon for 1s, then clears and optionally shows errorRetryLabel. */
+    error: boolean;
+    /** Success state: shows success background + check icon in a circle; does not auto-clear. */
+    success: boolean;
+    /** Label shown after the 1s error phase (e.g. "Probeer opnieuw"). Empty = keep slot content. */
+    errorRetryLabel: string;
+    /** Extra CSS classes applied to the inner button. */
+    customClasses: string;
+    /** When true, button stretches to full width of its parent (e.g. in a column). Default false (sizes to content). */
+    fullWidth: boolean;
+    private showRetryLabel;
+    private errorTimeout;
+    private _button;
+    private _savedWidth;
+    private _justEnteredLoading;
+    private _retryMorphWidth;
+    private _justEnteredRetry;
+    private get buttonClasses();
+    private handleShakeEnd;
+    willUpdate(changed: Map<string, unknown>): void;
+    updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private get _morphWidthStyle();
+    private get _iconSize();
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'fm-button': FmButton;
+    }
+}
+//# sourceMappingURL=fm-button.d.ts.map

package/dist/fm-button/fm-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fm-button.d.ts","sourceRoot":"","sources":["../../src/fm-button/fm-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAA;AAG/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAA;AACxE,OAAO,gCAAgC,CAAA;AACvC,OAAO,kCAAkC,CAAA;AACzC,OAAO,kCAAkC,CAAA;AAQzC,OAAO,KAAK,EACV,UAAU,EACV,aAAa,EACb,YAAY,EAEZ,IAAI,EACJ,IAAI,EACL,MAAM,qBAAqB,CAAA;AAE5B,YAAY,EACV,UAAU,EACV,aAAa,EACb,oBAAoB,EACpB,uBAAuB,EACvB,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,IAAI,EACL,MAAM,qBAAqB,CAAA;AAM5B;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,6EAA6E;IACjD,IAAI,EAAE,UAAU,CAAW;IAEvD,0BAA0B;IACE,KAAK,SAAK;IAEtC,wEAAwE;IAC5C,IAAI,SAAM;IAEtC,wEAAwE;IAC5C,MAAM,SAAU;IAE5C,uDAAuD;IAC3B,IAAI,EAAE,IAAI,CAAO;IAE7C,qKAAqK;IACzI,IAAI,EAAE,IAAI,CAAW;IAEjD,8EAA8E;IACzB,UAAU,EAAE,aAAa,CAAW;IAEzF,yIAAyI;IAC7G,IAAI,SAAK;IAErC,4FAA4F;IACrC,WAAW,EAAE,WAAW,CAAS;IAExF,gEAAgE;IACR,YAAY,EAAE,YAAY,CAAY;IAE9F,8CAA8C;IACF,QAAQ,UAAQ;IAE5D,kEAAkE;IACtB,OAAO,UAAQ;IAE3D,6GAA6G;IACjE,KAAK,UAAQ;IAEzD,6FAA6F;IACjD,OAAO,UAAQ;IAE3D,gGAAgG;IACpC,eAAe,SAAK;IAEhF,qDAAqD;IACI,aAAa,SAAK;IAE3E,oHAAoH;IAC/C,SAAS,UAAQ;IAE7E,OAAO,CAAC,cAAc,CAAQ;IACvC,OAAO,CAAC,YAAY,CAA6C;IAEhD,OAAO,CAAC,OAAO,CAAoB;IACpD,OAAO,CAAC,WAAW,CAAI;IACvB,OAAO,CAAC,mBAAmB,CAAQ;IACnC,OAAO,CAAC,gBAAgB,CAAI;IAC5B,OAAO,CAAC,iBAAiB,CAAQ;IAEjC,OAAO,KAAK,aAAa,GAUxB;IAED,OAAO,CAAC,cAAc;IAEb,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAuB/C,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAyB5C,oBAAoB,IAAI,IAAI;IAQrC,OAAO,KAAK,gBAAgB,GAO3B;IAED,OAAO,KAAK,SAAS,GAEpB;IAED,MAAM;IAqCN,MAAM,CAAC,MAAM,4BAAkB;CAChC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAA;KACtB;CACF"}

package/dist/fm-button/fm-button.js

@@ -0,0 +1,256 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { FmIcon } from '../fm-icon/fm-icon.js';
+import '../fm-icon/icons/bold-check.js';
+import '../fm-icon/icons/bold-spinner.js';
+import '../fm-icon/icons/bold-warning.js';
+import { fmButtonStyle } from './fm-button.style.js';
+import { FM_BUTTON_ERROR_PHASE_MS, buildButtonClasses, iconSizeForButtonSize, morphWidthInlineStyle } from './fm-button-core.js';
+if (!customElements.get('fm-icon')) {
+    customElements.define('fm-icon', FmIcon);
+}
+/**
+ * Flitsmeister button web component. Styled, accessible button with multiple roles, sizes and variants.
+ *
+ * @element fm-button
+ *
+ * @slot default - Button label (text or HTML).
+ *
+ * @example
+ * ```html
+ * <fm-button role="primary" buttontype="filled">Save</fm-button>
+ * ```
+ *
+ * @example
+ * ```html
+ * <fm-button role="primary" icon="add" icon-variant="bold">Toevoegen</fm-button>
+ * <fm-button role="secondary" icon="chevron-forward" icon-position="append">Volgende</fm-button>
+ * ```
+ */
+let FmButton = class FmButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Native button type: 'button' | 'submit' | 'reset'. Default `'button'`. */
+        this.type = 'button';
+        /** Title/tooltip text. */
+        this.title = '';
+        /** Reserved for link-style usage; not rendered on the native button. */
+        this.href = '/';
+        /** Reserved for link-style usage; not rendered on the native button. */
+        this.target = '_self';
+        /** Size: 'sm' | 'md' | 'lg' | 'xl'. Default `'md'`. */
+        this.size = 'md';
+        /** Visual role (color): 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'dangeralt' | 'danger-alt' | 'info' | 'strong' | 'weak'. Default `'strong'`. */
+        this.role = 'strong';
+        /** Variant: 'filled' | 'text' | 'outline' | 'squared'. Default `'filled'`. */
+        this.buttontype = 'filled';
+        /** Icon name for fm-icon (from icon registry). Use with icon-variant; page must register icons (e.g. import fm-icon/all or per-icon). */
+        this.icon = '';
+        /** Icon variant for fm-icon: 'bold' | 'filled' | 'stroke' | 'duotone'. Default `'bold'`. */
+        this.iconVariant = 'bold';
+        /** Icon position: 'prepend' | 'append'. Default `'prepend'`. */
+        this.iconPosition = 'prepend';
+        /** Disabled state. Reflected to attribute. */
+        this.disabled = false;
+        /** Loading state: button becomes circle with centered spinner. */
+        this.loading = false;
+        /** Error state: shows danger-alt + warning icon for 1s, then clears and optionally shows errorRetryLabel. */
+        this.error = false;
+        /** Success state: shows success background + check icon in a circle; does not auto-clear. */
+        this.success = false;
+        /** Label shown after the 1s error phase (e.g. "Probeer opnieuw"). Empty = keep slot content. */
+        this.errorRetryLabel = '';
+        /** Extra CSS classes applied to the inner button. */
+        this.customClasses = '';
+        /** When true, button stretches to full width of its parent (e.g. in a column). Default false (sizes to content). */
+        this.fullWidth = false;
+        this.showRetryLabel = false;
+        this.errorTimeout = null;
+        this._savedWidth = 0;
+        this._justEnteredLoading = false;
+        this._retryMorphWidth = 0;
+        this._justEnteredRetry = false;
+    }
+    get buttonClasses() {
+        return buildButtonClasses({
+            size: this.size,
+            role: this.role,
+            buttontype: this.buttontype,
+            loading: this.loading,
+            error: this.error,
+            success: this.success,
+            customClasses: this.customClasses
+        });
+    }
+    handleShakeEnd(_e) { }
+    willUpdate(changed) {
+        if (changed.has('loading') && this.loading) {
+            this.showRetryLabel = false;
+            this.success = false;
+            this._justEnteredLoading = true;
+        }
+        if (changed.has('error') && this.error) {
+            if (this.errorTimeout) {
+                clearTimeout(this.errorTimeout);
+                this.errorTimeout = null;
+            }
+            this.errorTimeout = setTimeout(() => {
+                this.error = false;
+                this.showRetryLabel = true;
+                this.errorTimeout = null;
+            }, FM_BUTTON_ERROR_PHASE_MS);
+        }
+        if (changed.has('showRetryLabel') && this.showRetryLabel && this._button) {
+            this._retryMorphWidth = this._button.offsetWidth;
+            this._justEnteredRetry = true;
+        }
+    }
+    updated(changed) {
+        if (!this.loading && !this.error && !this.success && !this._retryMorphWidth && this._button)
+            this._savedWidth = this._button.offsetWidth;
+        if (this.loading && this._justEnteredLoading && this._button) {
+            requestAnimationFrame(() => {
+                this._button.style.width = '';
+                this._justEnteredLoading = false;
+            });
+        }
+        if (this._justEnteredRetry) {
+            this._justEnteredRetry = false;
+            const circleWidth = this._retryMorphWidth;
+            this._button.style.removeProperty('width');
+            const naturalWidth = this._button.offsetWidth;
+            this._button.style.width = `${circleWidth}px`;
+            requestAnimationFrame(() => {
+                this._retryMorphWidth = naturalWidth;
+                this.requestUpdate();
+                setTimeout(() => {
+                    this._retryMorphWidth = 0;
+                    this.requestUpdate();
+                }, 350);
+            });
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.errorTimeout) {
+            clearTimeout(this.errorTimeout);
+            this.errorTimeout = null;
+        }
+    }
+    get _morphWidthStyle() {
+        const inline = morphWidthInlineStyle({
+            loading: this.loading,
+            savedWidth: this._savedWidth,
+            retryMorphWidth: this._retryMorphWidth
+        });
+        return inline ?? nothing;
+    }
+    get _iconSize() {
+        return iconSizeForButtonSize(this.size);
+    }
+    render() {
+        return html `
+      <button
+        type=${this.type}
+        class=${this.buttonClasses}
+        style=${this._morphWidthStyle}
+        title=${this.title}
+        ?disabled=${this.disabled || this.loading}
+        aria-busy=${this.loading}
+        data-role=${this.role}
+        data-buttontype=${this.buttontype}
+        data-size=${this.size}
+        @animationend=${this.handleShakeEnd}
+      >
+        ${this.loading
+            ? html `<span class="btn-spinner-wrapper"><fm-icon name="spinner" variant="bold" size="md"></fm-icon></span>`
+            : this.error
+                ? html `<span class="btn-error-content"><fm-icon name="warning" variant="bold" size="lg" color="danger"></fm-icon></span>`
+                : this.success
+                    ? html `<span class="btn-success-content"><fm-icon name="check" variant="bold" size="lg" color="succes"></fm-icon></span>`
+                    : this.showRetryLabel && this.errorRetryLabel
+                        ? this.errorRetryLabel
+                        : html `
+                  <span class="btn-content">
+                    ${this.icon && this.iconPosition === 'prepend'
+                            ? html `<span class="btn-icon btn-icon--prepend"><fm-icon name="${this.icon}" variant="${this.iconVariant}" size="${this._iconSize}"></fm-icon></span>`
+                            : ''}
+                    <slot></slot>
+                    ${this.icon && this.iconPosition === 'append'
+                            ? html `<span class="btn-icon btn-icon--append"><fm-icon name="${this.icon}" variant="${this.iconVariant}" size="${this._iconSize}"></fm-icon></span>`
+                            : ''}
+                  </span>
+                `}
+      </button>
+    `;
+    }
+    static { this.styles = [fmButtonStyle]; }
+};
+__decorate([
+    property({ type: String })
+], FmButton.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], FmButton.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], FmButton.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], FmButton.prototype, "target", void 0);
+__decorate([
+    property({ type: String })
+], FmButton.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], FmButton.prototype, "role", void 0);
+__decorate([
+    property({ type: String, attribute: 'buttontype' })
+], FmButton.prototype, "buttontype", void 0);
+__decorate([
+    property({ type: String })
+], FmButton.prototype, "icon", void 0);
+__decorate([
+    property({ type: String, attribute: 'icon-variant' })
+], FmButton.prototype, "iconVariant", void 0);
+__decorate([
+    property({ type: String, attribute: 'icon-position' })
+], FmButton.prototype, "iconPosition", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FmButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FmButton.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FmButton.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FmButton.prototype, "success", void 0);
+__decorate([
+    property({ type: String, attribute: 'error-retry-label' })
+], FmButton.prototype, "errorRetryLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'custom-classes' })
+], FmButton.prototype, "customClasses", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'full-width', reflect: true })
+], FmButton.prototype, "fullWidth", void 0);
+__decorate([
+    state()
+], FmButton.prototype, "showRetryLabel", void 0);
+__decorate([
+    query('button')
+], FmButton.prototype, "_button", void 0);
+FmButton = __decorate([
+    customElement('fm-button')
+], FmButton);
+export { FmButton };
+//# sourceMappingURL=fm-button.js.map

package/dist/fm-button/fm-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fm-button.js","sourceRoot":"","sources":["../../src/fm-button/fm-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAE9C,OAAO,gCAAgC,CAAA;AACvC,OAAO,kCAAkC,CAAA;AACzC,OAAO,kCAAkC,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EACL,wBAAwB,EACxB,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,qBAAqB,CAAA;AAqB5B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;IACnC,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;AAC1C,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QACL,6EAA6E;QACjD,SAAI,GAAe,QAAQ,CAAA;QAEvD,0BAA0B;QACE,UAAK,GAAG,EAAE,CAAA;QAEtC,wEAAwE;QAC5C,SAAI,GAAG,GAAG,CAAA;QAEtC,wEAAwE;QAC5C,WAAM,GAAG,OAAO,CAAA;QAE5C,uDAAuD;QAC3B,SAAI,GAAS,IAAI,CAAA;QAE7C,qKAAqK;QACzI,SAAI,GAAS,QAAQ,CAAA;QAEjD,8EAA8E;QACzB,eAAU,GAAkB,QAAQ,CAAA;QAEzF,yIAAyI;QAC7G,SAAI,GAAG,EAAE,CAAA;QAErC,4FAA4F;QACrC,gBAAW,GAAgB,MAAM,CAAA;QAExF,gEAAgE;QACR,iBAAY,GAAiB,SAAS,CAAA;QAE9F,8CAA8C;QACF,aAAQ,GAAG,KAAK,CAAA;QAE5D,kEAAkE;QACtB,YAAO,GAAG,KAAK,CAAA;QAE3D,6GAA6G;QACjE,UAAK,GAAG,KAAK,CAAA;QAEzD,6FAA6F;QACjD,YAAO,GAAG,KAAK,CAAA;QAE3D,gGAAgG;QACpC,oBAAe,GAAG,EAAE,CAAA;QAEhF,qDAAqD;QACI,kBAAa,GAAG,EAAE,CAAA;QAE3E,oHAAoH;QAC/C,cAAS,GAAG,KAAK,CAAA;QAErE,mBAAc,GAAG,KAAK,CAAA;QAC/B,iBAAY,GAAyC,IAAI,CAAA;QAGzD,gBAAW,GAAG,CAAC,CAAA;QACf,wBAAmB,GAAG,KAAK,CAAA;QAC3B,qBAAgB,GAAG,CAAC,CAAA;QACpB,sBAAiB,GAAG,KAAK,CAAA;IA2HnC,CAAC;IAzHC,IAAY,aAAa;QACvB,OAAO,kBAAkB,CAAC;YACxB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,aAAa,EAAE,IAAI,CAAC,aAAa;SAClC,CAAC,CAAA;IACJ,CAAC;IAEO,cAAc,CAAC,EAAkB,IAAS,CAAC;IAE1C,UAAU,CAAC,OAA6B;QAC/C,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAC3C,IAAI,CAAC,cAAc,GAAG,KAAK,CAAA;YAC3B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;YACpB,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAA;QACjC,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACvC,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;gBACtB,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;gBAC/B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAA;YAC1B,CAAC;YACD,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC,GAAG,EAAE;gBAClC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;gBAClB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAA;gBAC1B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAA;YAC1B,CAAC,EAAE,wBAAwB,CAAC,CAAA;QAC9B,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACzE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAA;YAChD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAA;QAC/B,CAAC;IACH,CAAC;IAEQ,OAAO,CAAC,OAA6B;QAC5C,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAA;QACxI,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAC7D,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;gBAC7B,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAA;YAClC,CAAC,CAAC,CAAA;QACJ,CAAC;QACD,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAA;YAC9B,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAA;YACzC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAA;YAC1C,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAA;YAC7C,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,WAAW,IAAI,CAAA;YAC7C,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,CAAC,gBAAgB,GAAG,YAAY,CAAA;gBACpC,IAAI,CAAC,aAAa,EAAE,CAAA;gBACpB,UAAU,CAAC,GAAG,EAAE;oBACd,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAA;oBACzB,IAAI,CAAC,aAAa,EAAE,CAAA;gBACtB,CAAC,EAAE,GAAG,CAAC,CAAA;YACT,CAAC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAC5B,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;YAC/B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAA;QAC1B,CAAC;IACH,CAAC;IAED,IAAY,gBAAgB;QAC1B,MAAM,MAAM,GAAG,qBAAqB,CAAC;YACnC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,UAAU,EAAE,IAAI,CAAC,WAAW;YAC5B,eAAe,EAAE,IAAI,CAAC,gBAAgB;SACvC,CAAC,CAAA;QACF,OAAO,MAAM,IAAI,OAAO,CAAA;IAC1B,CAAC;IAED,IAAY,SAAS;QACnB,OAAO,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACzC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC,IAAI;gBACR,IAAI,CAAC,aAAa;gBAClB,IAAI,CAAC,gBAAgB;gBACrB,IAAI,CAAC,KAAK;oBACN,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;oBAC7B,IAAI,CAAC,OAAO;oBACZ,IAAI,CAAC,IAAI;0BACH,IAAI,CAAC,UAAU;oBACrB,IAAI,CAAC,IAAI;wBACL,IAAI,CAAC,cAAc;;UAEjC,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA,sGAAsG;YAC5G,CAAC,CAAC,IAAI,CAAC,KAAK;gBACV,CAAC,CAAC,IAAI,CAAA,mHAAmH;gBACzH,CAAC,CAAC,IAAI,CAAC,OAAO;oBACZ,CAAC,CAAC,IAAI,CAAA,mHAAmH;oBACzH,CAAC,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe;wBAC3C,CAAC,CAAC,IAAI,CAAC,eAAe;wBACtB,CAAC,CAAC,IAAI,CAAA;;sBAEA,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS;4BAC5C,CAAC,CAAC,IAAI,CAAA,2DAA2D,IAAI,CAAC,IAAI,cAAc,IAAI,CAAC,WAAW,WAAW,IAAI,CAAC,SAAS,qBAAqB;4BACtJ,CAAC,CAAC,EAAE;;sBAEJ,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,KAAK,QAAQ;4BAC3C,CAAC,CAAC,IAAI,CAAA,0DAA0D,IAAI,CAAC,IAAI,cAAc,IAAI,CAAC,WAAW,WAAW,IAAI,CAAC,SAAS,qBAAqB;4BACrJ,CAAC,CAAC,EAAE;;iBAET;;KAEZ,CAAA;IACH,CAAC;aAEM,WAAM,GAAG,CAAC,aAAa,CAAC,AAAlB,CAAkB;;AAnLH;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAA4B;AAG3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAW;AAGV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAW;AAGV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAiB;AAGhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAkB;AAGjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAsB;AAGI;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;4CAAqC;AAG7D;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAU;AAGkB;IAAtD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;6CAAkC;AAGhC;IAAvD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;8CAAuC;AAGlD;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAiB;AAGhB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAgB;AAGf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAc;AAGb;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAgB;AAGC;IAA3D,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;iDAAqB;AAGvB;IAAxD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;+CAAmB;AAGN;IAApE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAkB;AAErE;IAAhB,KAAK,EAAE;gDAA+B;AAGd;IAAxB,KAAK,CAAC,QAAQ,CAAC;yCAAoC;AAvDzC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAsLpB"}

package/dist/fm-button/fm-button.style.d.ts

@@ -0,0 +1,2 @@
+export declare const fmButtonStyle: import("lit").CSSResult;
+//# sourceMappingURL=fm-button.style.d.ts.map

package/dist/fm-button/fm-button.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fm-button.style.d.ts","sourceRoot":"","sources":["../../src/fm-button/fm-button.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,yBAwYzB,CAAC"}