@flitsmeister/design-system 3.0.2 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +93 -1
- package/dist/ce/dom.d.ts +2 -0
- package/dist/ce/dom.d.ts.map +1 -0
- package/dist/ce/dom.js +11 -0
- package/dist/ce/dom.js.map +1 -0
- package/dist/ce/implicit-form-submit.d.ts +2 -0
- package/dist/ce/implicit-form-submit.d.ts.map +1 -0
- package/dist/ce/implicit-form-submit.js +27 -0
- package/dist/ce/implicit-form-submit.js.map +1 -0
- package/dist/fm-button/fm-button.d.ts +4 -1
- package/dist/fm-button/fm-button.d.ts.map +1 -1
- package/dist/fm-button/fm-button.js +4 -1
- package/dist/fm-button/fm-button.js.map +1 -1
- package/dist/fm-button/fm-button.style.js +7 -7
- package/dist/fm-dropdown/fm-dropdown.style.js +6 -6
- package/dist/fm-icon/fm-icon.style.js +4 -4
- package/dist/fm-input/fm-input.d.ts +21 -3
- package/dist/fm-input/fm-input.d.ts.map +1 -1
- package/dist/fm-input/fm-input.js +25 -6
- package/dist/fm-input/fm-input.js.map +1 -1
- package/dist/fm-input/fm-input.style.js +7 -7
- package/dist/fm-radio-input/fm-radio-input.style.js +4 -4
- package/dist/fm-segmented-controller/fm-segmented-controller.style.d.ts.map +1 -1
- package/dist/fm-segmented-controller/fm-segmented-controller.style.js +7 -8
- package/dist/fm-segmented-controller/fm-segmented-controller.style.js.map +1 -1
- package/dist/fm-wizard/fm-wizard.style.js +5 -5
- package/dist/react/ce.d.ts +14 -0
- package/dist/react/ce.d.ts.map +1 -0
- package/dist/react/ce.js +43 -0
- package/dist/react/ce.js.map +1 -0
- package/dist/react/fm-button.d.ts +27 -0
- package/dist/react/fm-button.d.ts.map +1 -0
- package/dist/react/fm-button.js +26 -0
- package/dist/react/fm-button.js.map +1 -0
- package/dist/react/fm-dropdown.d.ts +13 -0
- package/dist/react/fm-dropdown.d.ts.map +1 -0
- package/dist/react/fm-dropdown.js +19 -0
- package/dist/react/fm-dropdown.js.map +1 -0
- package/dist/react/fm-icon.d.ts +11 -0
- package/dist/react/fm-icon.d.ts.map +1 -0
- package/dist/react/fm-icon.js +13 -0
- package/dist/react/fm-icon.js.map +1 -0
- package/dist/react/fm-input.d.ts +30 -0
- package/dist/react/fm-input.d.ts.map +1 -0
- package/dist/react/fm-input.js +52 -0
- package/dist/react/fm-input.js.map +1 -0
- package/dist/react/fm-radio-input.d.ts +15 -0
- package/dist/react/fm-radio-input.d.ts.map +1 -0
- package/dist/react/fm-radio-input.js +15 -0
- package/dist/react/fm-radio-input.js.map +1 -0
- package/dist/react/fm-segmented-controller.d.ts +13 -0
- package/dist/react/fm-segmented-controller.d.ts.map +1 -0
- package/dist/react/fm-segmented-controller.js +16 -0
- package/dist/react/fm-segmented-controller.js.map +1 -0
- package/dist/react/index.d.ts +14 -0
- package/dist/react/index.d.ts.map +1 -0
- package/dist/react/index.js +8 -0
- package/dist/react/index.js.map +1 -0
- package/dist/vue/ce.d.ts +3 -0
- package/dist/vue/ce.d.ts.map +1 -0
- package/dist/vue/ce.js +16 -0
- package/dist/vue/ce.js.map +1 -0
- package/dist/vue/fm-button.d.ts +164 -0
- package/dist/vue/fm-button.d.ts.map +1 -0
- package/dist/vue/fm-button.js +67 -0
- package/dist/vue/fm-button.js.map +1 -0
- package/dist/vue/fm-dropdown.d.ts +65 -0
- package/dist/vue/fm-dropdown.d.ts.map +1 -0
- package/dist/vue/fm-dropdown.js +40 -0
- package/dist/vue/fm-dropdown.js.map +1 -0
- package/dist/vue/fm-input.d.ts +150 -0
- package/dist/vue/fm-input.d.ts.map +1 -0
- package/dist/vue/fm-input.js +93 -0
- package/dist/vue/fm-input.js.map +1 -0
- package/dist/vue/index.d.ts +6 -0
- package/dist/vue/index.d.ts.map +1 -0
- package/dist/vue/index.js +4 -0
- package/dist/vue/index.js.map +1 -0
- package/icons/bold/add.svg +3 -0
- package/icons/bold/check.svg +3 -0
- package/icons/bold/checkbox-checked.svg +4 -0
- package/icons/bold/checkbox-unchecked.svg +3 -0
- package/icons/bold/chevron-backward.svg +3 -0
- package/icons/bold/chevron-down.svg +3 -0
- package/icons/bold/chevron-forward.svg +3 -0
- package/icons/bold/chevron-up.svg +3 -0
- package/icons/bold/close-1.svg +3 -0
- package/icons/bold/close.svg +4 -0
- package/icons/bold/dot.svg +3 -0
- package/icons/bold/open-external.svg +3 -0
- package/icons/bold/prominent-1.svg +3 -0
- package/icons/bold/prominent.svg +3 -0
- package/icons/bold/question.svg +4 -0
- package/icons/bold/remove.svg +3 -0
- package/icons/bold/search.svg +3 -0
- package/icons/bold/spinner.svg +3 -0
- package/icons/bold/warning.svg +3 -0
- package/icons/duotone/check.svg +4 -0
- package/icons/filled/achievements.svg +3 -0
- package/icons/filled/add.svg +3 -0
- package/icons/filled/app-settings.svg +3 -0
- package/icons/filled/calendar.svg +7 -0
- package/icons/filled/car-simplified.svg +3 -0
- package/icons/filled/check.svg +3 -0
- package/icons/filled/clock.svg +3 -0
- package/icons/filled/close.svg +3 -0
- package/icons/filled/control.svg +7 -0
- package/icons/filled/danger.svg +3 -0
- package/icons/filled/delete.svg +3 -0
- package/icons/filled/deviceOne.svg +3 -0
- package/icons/filled/deviceTwo.svg +3 -0
- package/icons/filled/disputeFine.svg +3 -0
- package/icons/filled/email.svg +3 -0
- package/icons/filled/gasPrices.svg +3 -0
- package/icons/filled/hazard.svg +3 -0
- package/icons/filled/highway.svg +3 -0
- package/icons/filled/info.svg +3 -0
- package/icons/filled/lock-close.svg +3 -0
- package/icons/filled/lock-open.svg +3 -0
- package/icons/filled/lock.svg +3 -0
- package/icons/filled/microphone.svg +4 -0
- package/icons/filled/notificaiton-unread.svg +4 -0
- package/icons/filled/notificaiton.svg +3 -0
- package/icons/filled/parking.svg +3 -0
- package/icons/filled/play.svg +8 -0
- package/icons/filled/question.svg +3 -0
- package/icons/filled/rating-empty.svg +3 -0
- package/icons/filled/rating-full.svg +3 -0
- package/icons/filled/rating-half.svg +4 -0
- package/icons/filled/remove.svg +3 -0
- package/icons/filled/return-location.svg +3 -0
- package/icons/filled/support.svg +3 -0
- package/icons/filled/toll.svg +3 -0
- package/icons/filled/tripHistory.svg +3 -0
- package/icons/filled/truck.svg +3 -0
- package/icons/filled/user-pin.svg +3 -0
- package/icons/filled/user-profile.svg +3 -0
- package/icons/filled/warning.svg +3 -0
- package/icons/filled/zone-default.svg +3 -0
- package/icons/filled/zone-indoor.svg +3 -0
- package/icons/filled/zone-street.svg +3 -0
- package/icons/stroke/arrow-Down.svg +3 -0
- package/icons/stroke/arrow-Up.svg +3 -0
- package/icons/stroke/arrow-left.svg +3 -0
- package/icons/stroke/arrow-right.svg +3 -0
- package/icons/stroke/check.svg +3 -0
- package/icons/stroke/checkbox-checked.svg +4 -0
- package/icons/stroke/checkbox-unchecked.svg +3 -0
- package/icons/stroke/chevron-backward.svg +3 -0
- package/icons/stroke/chevron-down.svg +3 -0
- package/icons/stroke/chevron-forward.svg +3 -0
- package/icons/stroke/chevron-up.svg +3 -0
- package/icons/stroke/clock.svg +3 -0
- package/icons/stroke/close-1.svg +3 -0
- package/icons/stroke/close.svg +4 -0
- package/icons/stroke/download.svg +4 -0
- package/icons/stroke/email.svg +4 -0
- package/icons/stroke/hamburger.svg +3 -0
- package/icons/stroke/login.svg +4 -0
- package/icons/stroke/logout.svg +3 -0
- package/icons/stroke/more.svg +5 -0
- package/icons/stroke/open-external.svg +3 -0
- package/icons/stroke/question.svg +4 -0
- package/icons/stroke/search.svg +3 -0
- package/icons/stroke/spinner.svg +3 -0
- package/icons/stroke/warning.svg +3 -0
- package/package.json +78 -14
- package/scripts/bundle-cli.mjs +16 -0
- package/scripts/copy-package-assets.mjs +19 -0
- package/scripts/install-cli.bundled.mjs +1637 -0
- package/styles/fm-design-system/fm-design-system.css +921 -0
- package/styles/fm-design-system/fm-design-system.tailwind.css +323 -0
package/README.md
CHANGED
|
@@ -16,7 +16,40 @@ With pnpm:
|
|
|
16
16
|
pnpm add @flitsmeister/design-system
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
Runtime components are browser custom elements built with Lit. Publishing and CI for this repository use Node.js 24; consuming apps can install the package on Node 20+.
|
|
20
|
+
|
|
21
|
+
## Tokens CSS
|
|
22
|
+
|
|
23
|
+
Lit components read semantic custom properties (`--color-*`, `--spacing-*`, `--text-*`) from `:root`. Load the published stylesheet **once at app entry**, as a **separate** stylesheet from Tailwind:
|
|
24
|
+
|
|
25
|
+
```js
|
|
26
|
+
import '@flitsmeister/design-system/tokens.css'
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
This file is generated in the design-system-v2 repo from Figma exports (`styles/fm-design-system/fm-design-system.css`) and copied into the package on build. See the [repository README](../README.md#design-token-export-workflow) for the export workflow.
|
|
30
|
+
|
|
31
|
+
Values live on `--fm-*` (for example `--fm-color-blue-600`). Public names are aliases (`--color-blue-600: var(--fm-color-blue-600)`). Use the public names in app and component CSS. Dark mode switches the `--fm-color-*` holders on `:root.dark`; the aliases keep pointing at those live variables.
|
|
32
|
+
|
|
33
|
+
The same file also ships v2-compatible `.type-*` utilities (`type-display-lg`, `type-headline`, `type-title-md`, `type-body-sm`, `type-special`, …) mapped onto those tokens (`--text-*`, `--font-weight-*`, `--leading-*`, `--font-display` / `--font-headline` / `--font-title` / `--font-body`).
|
|
34
|
+
|
|
35
|
+
The v2-style theme path also works:
|
|
36
|
+
|
|
37
|
+
```js
|
|
38
|
+
import '@flitsmeister/design-system/themes/fm-design-system/fm-design-system.css'
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
Do **not** `@import` this file in the same stylesheet as `@import "tailwindcss"`. Tailwind 4 treats `--color-*` and `--spacing-*` as theme tokens, tree-shakes unused ones, and remaps `max-w-*` onto `--spacing-*`. Load tokens as their own entry instead.
|
|
42
|
+
|
|
43
|
+
## Tailwind
|
|
44
|
+
|
|
45
|
+
Import the generated `@theme` snippet in the **same** stylesheet as Tailwind. It maps utilities to the `--fm-*` value holders from `tokens.css` (not same-name `var(--color-*)`, which Tailwind would write back onto `:root` and empty). It also restores Tailwind `max-w-*` container sizes so `--spacing-md` does not collapse `max-w-md`.
|
|
46
|
+
|
|
47
|
+
```css
|
|
48
|
+
@import "tailwindcss";
|
|
49
|
+
@import "@flitsmeister/design-system/tailwind.css";
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
Requires Tailwind 4.1+ (`@theme inline`). `@flitsmeister/design-system/theme.css` is an alias for the same file. Keep `tokens.css` as a separate entry; do not vendor a copy of the token CSS into the app.
|
|
20
53
|
|
|
21
54
|
## Quick Start
|
|
22
55
|
|
|
@@ -43,6 +76,65 @@ import '@flitsmeister/design-system/fm-icon/all'
|
|
|
43
76
|
<fm-button role="primary" icon="add" icon-variant="bold">Toevoegen</fm-button>
|
|
44
77
|
```
|
|
45
78
|
|
|
79
|
+
Sprite users can still point at the published SVG set under `@flitsmeister/design-system/icons` (for example `icons/bold/check.svg`).
|
|
80
|
+
|
|
81
|
+
## Vue
|
|
82
|
+
|
|
83
|
+
Vue 3 wrappers live at `@flitsmeister/design-system/vue`. They register the Lit custom elements, map `v-model`, set `rules` as a JS property, forward `validate()`, and work around Shadow DOM form submit / Enter-to-submit.
|
|
84
|
+
|
|
85
|
+
```js
|
|
86
|
+
import { FmButton, FmInput, FmDropdown } from '@flitsmeister/design-system/vue'
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
```vue
|
|
90
|
+
<template>
|
|
91
|
+
<form @submit.prevent="onSubmit">
|
|
92
|
+
<FmInput ref="emailInput" v-model="email" :rules="emailRules" placeholder="Email" />
|
|
93
|
+
<FmButton type="submit" role="primary">Opslaan</FmButton>
|
|
94
|
+
</form>
|
|
95
|
+
</template>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
Even with wrappers, templates contain `<fm-*>` tags, so Vite still needs:
|
|
99
|
+
|
|
100
|
+
```js
|
|
101
|
+
vue({
|
|
102
|
+
template: {
|
|
103
|
+
compilerOptions: {
|
|
104
|
+
isCustomElement: (tag) => tag.startsWith('fm-')
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
})
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
Vue is an optional peer dependency. Apps that do not import `/vue` do not need it.
|
|
111
|
+
|
|
112
|
+
## React
|
|
113
|
+
|
|
114
|
+
React wrappers live at `@flitsmeister/design-system/react`. They register the Lit custom elements on the client, set array/function values (`rules`, `options`) as JS properties, forward `validate()` on `FmInput`, and work around Shadow DOM form submit / Enter-to-submit.
|
|
115
|
+
|
|
116
|
+
```js
|
|
117
|
+
import {
|
|
118
|
+
FmButton,
|
|
119
|
+
FmInput,
|
|
120
|
+
FmDropdown,
|
|
121
|
+
FmIcon,
|
|
122
|
+
FmRadioInput,
|
|
123
|
+
FmSegmentedController
|
|
124
|
+
} from '@flitsmeister/design-system/react'
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
```jsx
|
|
128
|
+
<form className="flex flex-col gap-4" onSubmit={onSubmit}>
|
|
129
|
+
<FmInput className="w-full" ref={emailRef} value={email} rules={emailRules} onChange={setEmail} placeholder="Email" />
|
|
130
|
+
<FmButton type="submit" role="primary">Opslaan</FmButton>
|
|
131
|
+
</form>
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
Host `className`, `style`, and other native attributes land on the custom element (the layout API). Boolean props such as `disabled` are omitted when false so React 18 does not set `disabled="false"`.
|
|
135
|
+
|
|
136
|
+
These modules include a `"use client"` directive so they work as client components in the Next.js App Router. React is an optional peer dependency. Apps that do not import `/react` do not need it.
|
|
137
|
+
|
|
46
138
|
## Components
|
|
47
139
|
|
|
48
140
|
| Component | Import | Description |
|
package/dist/ce/dom.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../src/ce/dom.ts"],"names":[],"mappings":"AAAA,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAU5E"}
|
package/dist/ce/dom.js
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export function assignOptionsSlot(host) {
|
|
2
|
+
if (!host)
|
|
3
|
+
return;
|
|
4
|
+
for (const child of Array.from(host.children)) {
|
|
5
|
+
if ((child.tagName === 'OPTION' || child.tagName === 'OPTGROUP') &&
|
|
6
|
+
!child.slot) {
|
|
7
|
+
child.slot = 'options';
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=dom.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../src/ce/dom.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,iBAAiB,CAAC,IAAoC;IACpE,IAAI,CAAC,IAAI;QAAE,OAAM;IACjB,KAAK,MAAM,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC9C,IACE,CAAC,KAAK,CAAC,OAAO,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,KAAK,UAAU,CAAC;YAC5D,CAAC,KAAK,CAAC,IAAI,EACX,CAAC;YACD,KAAK,CAAC,IAAI,GAAG,SAAS,CAAA;QACxB,CAAC;IACH,CAAC;AACH,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"implicit-form-submit.d.ts","sourceRoot":"","sources":["../../src/ce/implicit-form-submit.ts"],"names":[],"mappings":"AAmBA,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,CAarE"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
const DEFAULT_SUBMITTER_SELECTOR = [
|
|
2
|
+
'button:not([type])',
|
|
3
|
+
'button[type="submit"]',
|
|
4
|
+
'input[type="submit"]',
|
|
5
|
+
'input[type="image"]',
|
|
6
|
+
'fm-button[type="submit"]'
|
|
7
|
+
].join(', ');
|
|
8
|
+
function getDefaultSubmitter(form) {
|
|
9
|
+
return form.querySelector(DEFAULT_SUBMITTER_SELECTOR);
|
|
10
|
+
}
|
|
11
|
+
function isSubmitterDisabled(submitter) {
|
|
12
|
+
if ('disabled' in submitter && Boolean(submitter.disabled))
|
|
13
|
+
return true;
|
|
14
|
+
return submitter.hasAttribute('disabled');
|
|
15
|
+
}
|
|
16
|
+
export function requestImplicitFormSubmit(form) {
|
|
17
|
+
const submitter = getDefaultSubmitter(form);
|
|
18
|
+
if (submitter && isSubmitterDisabled(submitter))
|
|
19
|
+
return;
|
|
20
|
+
if (submitter instanceof HTMLButtonElement ||
|
|
21
|
+
submitter instanceof HTMLInputElement) {
|
|
22
|
+
form.requestSubmit(submitter);
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
form.requestSubmit();
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=implicit-form-submit.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"implicit-form-submit.js","sourceRoot":"","sources":["../../src/ce/implicit-form-submit.ts"],"names":[],"mappings":"AAAA,MAAM,0BAA0B,GAAG;IACjC,oBAAoB;IACpB,uBAAuB;IACvB,sBAAsB;IACtB,qBAAqB;IACrB,0BAA0B;CAC3B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AAEZ,SAAS,mBAAmB,CAAC,IAAqB;IAChD,OAAO,IAAI,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAA;AACvD,CAAC;AAED,SAAS,mBAAmB,CAAC,SAAkB;IAC7C,IAAI,UAAU,IAAI,SAAS,IAAI,OAAO,CAAE,SAA+B,CAAC,QAAQ,CAAC;QAC/E,OAAO,IAAI,CAAA;IAEb,OAAO,SAAS,CAAC,YAAY,CAAC,UAAU,CAAC,CAAA;AAC3C,CAAC;AAED,MAAM,UAAU,yBAAyB,CAAC,IAAqB;IAC7D,MAAM,SAAS,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAA;IAC3C,IAAI,SAAS,IAAI,mBAAmB,CAAC,SAAS,CAAC;QAAE,OAAM;IAEvD,IACE,SAAS,YAAY,iBAAiB;QACtC,SAAS,YAAY,gBAAgB,EACrC,CAAC;QACD,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAA;QAC7B,OAAM;IACR,CAAC;IAED,IAAI,CAAC,aAAa,EAAE,CAAA;AACtB,CAAC"}
|
|
@@ -54,7 +54,10 @@ export declare class FmButton extends LitElement {
|
|
|
54
54
|
success: boolean;
|
|
55
55
|
/** Label shown after the 1s error phase (e.g. "Probeer opnieuw"). Empty = keep slot content. */
|
|
56
56
|
errorRetryLabel: string;
|
|
57
|
-
/**
|
|
57
|
+
/**
|
|
58
|
+
* Extra CSS classes on the inner `.btn` in the shadow tree.
|
|
59
|
+
* Shadow-only — not a Tailwind API. Use host `class` or `full-width` for layout.
|
|
60
|
+
*/
|
|
58
61
|
customClasses: string;
|
|
59
62
|
/** When true, button stretches to full width of its parent (e.g. in a column). Default false (sizes to content). */
|
|
60
63
|
fullWidth: boolean;
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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;;;OAGG;IACsD,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,IAAI,IAAI;IAyBf,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"}
|
|
@@ -66,7 +66,10 @@ let FmButton = class FmButton extends LitElement {
|
|
|
66
66
|
this.success = false;
|
|
67
67
|
/** Label shown after the 1s error phase (e.g. "Probeer opnieuw"). Empty = keep slot content. */
|
|
68
68
|
this.errorRetryLabel = '';
|
|
69
|
-
/**
|
|
69
|
+
/**
|
|
70
|
+
* Extra CSS classes on the inner `.btn` in the shadow tree.
|
|
71
|
+
* Shadow-only — not a Tailwind API. Use host `class` or `full-width` for layout.
|
|
72
|
+
*/
|
|
70
73
|
this.customClasses = '';
|
|
71
74
|
/** When true, button stretches to full width of its parent (e.g. in a column). Default false (sizes to content). */
|
|
72
75
|
this.fullWidth = false;
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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;;;WAGG;QACsD,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,KAAU,CAAC;IAExB,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;QACd,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;;AAtLH;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;AAMvB;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;AA1DzC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAyLpB"}
|
|
@@ -218,10 +218,10 @@ export const fmButtonStyle = css `
|
|
|
218
218
|
}
|
|
219
219
|
|
|
220
220
|
[data-size="xl"] {
|
|
221
|
-
font-size: var(--text-
|
|
221
|
+
font-size: var(--text-xl2);
|
|
222
222
|
height: var(--button-height-xl);
|
|
223
|
-
padding-left: var(--spacing-
|
|
224
|
-
padding-right: var(--spacing-
|
|
223
|
+
padding-left: var(--spacing-xl2);
|
|
224
|
+
padding-right: var(--spacing-xl2);
|
|
225
225
|
font-weight: var(--font-weight-black);
|
|
226
226
|
}
|
|
227
227
|
|
|
@@ -255,14 +255,14 @@ export const fmButtonStyle = css `
|
|
|
255
255
|
|
|
256
256
|
[data-buttontype="filled"][data-role="primary"],
|
|
257
257
|
[data-buttontype="squared"][data-role="primary"] {
|
|
258
|
-
background: var(--color-surface-brand-
|
|
258
|
+
background: var(--color-surface-brand-default);
|
|
259
259
|
color: var(--color-content-neutral-label);
|
|
260
260
|
}
|
|
261
261
|
|
|
262
262
|
[data-buttontype="filled"][data-role="secondary"],
|
|
263
263
|
[data-buttontype="squared"][data-role="secondary"] {
|
|
264
|
-
background: var(--color-surface-brand-
|
|
265
|
-
color: var(--color-content-brand-
|
|
264
|
+
background: var(--color-surface-brand-default-alt);
|
|
265
|
+
color: var(--color-content-brand-default);
|
|
266
266
|
}
|
|
267
267
|
|
|
268
268
|
[data-buttontype="filled"][data-role="danger"],
|
|
@@ -299,7 +299,7 @@ export const fmButtonStyle = css `
|
|
|
299
299
|
|
|
300
300
|
[data-buttontype="text"][data-role="primary"],
|
|
301
301
|
[data-buttontype="outline"][data-role="primary"] {
|
|
302
|
-
color: var(--color-content-brand-
|
|
302
|
+
color: var(--color-content-brand-default);
|
|
303
303
|
background: transparent;
|
|
304
304
|
}
|
|
305
305
|
|
|
@@ -75,7 +75,7 @@ export const fmDropdownStyle = css `
|
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
.dropdown-trigger:focus-visible {
|
|
78
|
-
outline: var(--stroke-sm) solid var(--color-outline-brand-
|
|
78
|
+
outline: var(--stroke-sm) solid var(--color-outline-brand-default);
|
|
79
79
|
outline-offset: 2px;
|
|
80
80
|
}
|
|
81
81
|
|
|
@@ -114,25 +114,25 @@ export const fmDropdownStyle = css `
|
|
|
114
114
|
@media (hover: hover) {
|
|
115
115
|
:host(:hover):not([disabled]):not([data-menu-open]) .dropdown-body,
|
|
116
116
|
:host(:not([disabled])) .dropdown-body:hover {
|
|
117
|
-
border-color: var(--color-outline-brand-
|
|
117
|
+
border-color: var(--color-outline-brand-default);
|
|
118
118
|
}
|
|
119
119
|
}
|
|
120
120
|
|
|
121
121
|
@media (hover: none) {
|
|
122
122
|
:host(:not([disabled]):not([data-menu-open])) .dropdown-trigger:active .dropdown-body {
|
|
123
|
-
border-color: var(--color-outline-brand-
|
|
123
|
+
border-color: var(--color-outline-brand-default);
|
|
124
124
|
}
|
|
125
125
|
}
|
|
126
126
|
|
|
127
127
|
:host([data-menu-open]):not([disabled]) .dropdown-body,
|
|
128
128
|
:host([data-menu-open]):not([disabled]) .dropdown-body.dropdown-body--gray-border {
|
|
129
|
-
border-color: var(--color-outline-brand-
|
|
129
|
+
border-color: var(--color-outline-brand-default);
|
|
130
130
|
box-shadow: 0 0.35rem 1.25rem rgba(0, 0, 0, 0.1);
|
|
131
131
|
}
|
|
132
132
|
|
|
133
133
|
:host([data-focused]):not([disabled]) .dropdown-body,
|
|
134
134
|
:host([data-focused]):not([disabled]) .dropdown-body.dropdown-body--gray-border {
|
|
135
|
-
border-color: var(--color-outline-brand-
|
|
135
|
+
border-color: var(--color-outline-brand-default);
|
|
136
136
|
}
|
|
137
137
|
|
|
138
138
|
:host([disabled]) .dropdown-body {
|
|
@@ -276,7 +276,7 @@ export const fmDropdownStyle = css `
|
|
|
276
276
|
}
|
|
277
277
|
|
|
278
278
|
:host([data-menu-open]):not([disabled]) .dropdown-panel:not(.dropdown-panel--sheet) {
|
|
279
|
-
border-color: var(--color-outline-brand-
|
|
279
|
+
border-color: var(--color-outline-brand-default);
|
|
280
280
|
}
|
|
281
281
|
|
|
282
282
|
.dropdown-panel::-webkit-scrollbar {
|
|
@@ -46,19 +46,19 @@ export const fmIconStyle = css `
|
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
:host([size='xxl']) {
|
|
49
|
-
--fm-icon-size: var(--text-
|
|
49
|
+
--fm-icon-size: var(--text-xl2);
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
:host([size='xxxl']) {
|
|
53
|
-
--fm-icon-size: var(--text-
|
|
53
|
+
--fm-icon-size: var(--text-xl3);
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
:host([size='xxxxl']) {
|
|
57
|
-
--fm-icon-size: var(--text-
|
|
57
|
+
--fm-icon-size: var(--text-xl4);
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
:host([color='primary']) {
|
|
61
|
-
color: var(--color-content-brand-
|
|
61
|
+
color: var(--color-content-brand-default);
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
:host([color='warning']) {
|
|
@@ -15,11 +15,22 @@ export type ValidationRule = (value: string | number) => string | undefined;
|
|
|
15
15
|
* @fires fm-focus - Fired when the input receives focus. Detail: `{ originalEvent: FocusEvent }`.
|
|
16
16
|
* @fires fm-blur - Fired when the input loses focus. Detail: `{ originalEvent: FocusEvent }`.
|
|
17
17
|
*
|
|
18
|
+
* @csspart inputgroup - Outer wrapper inside the shadow tree.
|
|
19
|
+
* @csspart input - The native input element.
|
|
18
20
|
* @csspart error-message - Validation error message.
|
|
19
21
|
*
|
|
20
22
|
* @example
|
|
21
23
|
* ```html
|
|
22
|
-
* <fm-input placeholder="Email" type="email"></fm-input>
|
|
24
|
+
* <fm-input class="w-full max-w-sm" placeholder="Email" type="email"></fm-input>
|
|
25
|
+
* ```
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* Stacked fields — spacing belongs on the form (gap) or host class, not inside the component:
|
|
29
|
+
* ```html
|
|
30
|
+
* <form class="flex flex-col gap-4">
|
|
31
|
+
* <fm-input placeholder="Email" type="email"></fm-input>
|
|
32
|
+
* <fm-input placeholder="Password" type="password"></fm-input>
|
|
33
|
+
* </form>
|
|
23
34
|
* ```
|
|
24
35
|
*
|
|
25
36
|
* @example
|
|
@@ -56,9 +67,16 @@ export declare class FmInput extends LitElement {
|
|
|
56
67
|
letterSpacing: number;
|
|
57
68
|
/** Autocomplete attribute. */
|
|
58
69
|
autocomplete: string;
|
|
59
|
-
/**
|
|
70
|
+
/**
|
|
71
|
+
* Extra CSS classes on the shadow `.inputgroup` wrapper.
|
|
72
|
+
* Shadow-only — consumer Tailwind utilities do not apply here.
|
|
73
|
+
* Prefer host `class` for layout (margin, max-width) and CSS parts for chrome.
|
|
74
|
+
*/
|
|
60
75
|
customClass: string;
|
|
61
|
-
/**
|
|
76
|
+
/**
|
|
77
|
+
* Extra CSS classes on the shadow `<input>`.
|
|
78
|
+
* Shadow-only — not a Tailwind API. Prefer `part="input"` for outer styling.
|
|
79
|
+
*/
|
|
62
80
|
inputClass: string;
|
|
63
81
|
private errorMessage;
|
|
64
82
|
private statusIcon;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fm-input.d.ts","sourceRoot":"","sources":["../../src/fm-input/fm-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAGtC,OAAO,gCAAgC,CAAA;AACvC,OAAO,kCAAkC,CAAA;AACzC,OAAO,kCAAkC,CAAA;AAOzC,KAAK,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,KAAK,CAAA;AAC5E,MAAM,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,GAAG,SAAS,CAAA;AAE3E
|
|
1
|
+
{"version":3,"file":"fm-input.d.ts","sourceRoot":"","sources":["../../src/fm-input/fm-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAGtC,OAAO,gCAAgC,CAAA;AACvC,OAAO,kCAAkC,CAAA;AACzC,OAAO,kCAAkC,CAAA;AAOzC,KAAK,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,KAAK,CAAA;AAC5E,MAAM,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,GAAG,SAAS,CAAA;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,iGAAiG;IACrE,IAAI,EAAE,SAAS,CAAS;IAEpD,2BAA2B;IACC,WAAW,SAAK;IAE5C,kCAAkC;IACN,KAAK,SAAK;IAEtC,gFAAgF;IACrD,KAAK,EAAE,cAAc,EAAE,CAAK;IAEvD,sBAAsB;IACsB,QAAQ,UAAQ;IAE5D,uBAAuB;IACqB,QAAQ,UAAQ;IAE5D,uDAAuD;IACX,OAAO,UAAQ;IAE3D,6DAA6D;IACS,UAAU,UAAQ;IAExF,0CAA0C;IACW,SAAS,EAAE,MAAM,GAAG,IAAI,CAAO;IAEpF,kCAAkC;IACuB,aAAa,SAAI;IAE1E,8BAA8B;IACF,YAAY,SAAK;IAE7C;;;;OAIG;IACoD,WAAW,SAAK;IAEvE;;;OAGG;IACmD,UAAU,SAAK;IAE5D,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,UAAU,CAA+B;IACjD,OAAO,CAAC,aAAa,CAA+B;IACpD,OAAO,CAAC,gBAAgB,CAAQ;IAChC,OAAO,CAAC,mBAAmB,CAAQ;IACnC,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,SAAS,CAAQ;IAElC,OAAO,CAAC,gBAAgB,CAA6C;IACrE,OAAO,CAAC,mBAAmB,CAA6C;IACxE,OAAO,CAAC,eAAe,CAAsB;IAC7C,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,kBAAkB,CAAM;IAEhD,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,KAAK,gBAAgB,GAE3B;IAED,mGAAmG;IACnG,QAAQ,IAAI,IAAI;IAIhB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,aAAa;IAqBZ,iBAAiB,IAAI,IAAI;IAOzB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAmC/C,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAW5C,oBAAoB,IAAI,IAAI;IAgBrC,MAAM;IAgEN,MAAM,CAAC,MAAM,4BAAkB;CAChC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAA;KACpB;CACF"}
|
|
@@ -26,11 +26,22 @@ if (!customElements.get('fm-icon')) {
|
|
|
26
26
|
* @fires fm-focus - Fired when the input receives focus. Detail: `{ originalEvent: FocusEvent }`.
|
|
27
27
|
* @fires fm-blur - Fired when the input loses focus. Detail: `{ originalEvent: FocusEvent }`.
|
|
28
28
|
*
|
|
29
|
+
* @csspart inputgroup - Outer wrapper inside the shadow tree.
|
|
30
|
+
* @csspart input - The native input element.
|
|
29
31
|
* @csspart error-message - Validation error message.
|
|
30
32
|
*
|
|
31
33
|
* @example
|
|
32
34
|
* ```html
|
|
33
|
-
* <fm-input placeholder="Email" type="email"></fm-input>
|
|
35
|
+
* <fm-input class="w-full max-w-sm" placeholder="Email" type="email"></fm-input>
|
|
36
|
+
* ```
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* Stacked fields — spacing belongs on the form (gap) or host class, not inside the component:
|
|
40
|
+
* ```html
|
|
41
|
+
* <form class="flex flex-col gap-4">
|
|
42
|
+
* <fm-input placeholder="Email" type="email"></fm-input>
|
|
43
|
+
* <fm-input placeholder="Password" type="password"></fm-input>
|
|
44
|
+
* </form>
|
|
34
45
|
* ```
|
|
35
46
|
*
|
|
36
47
|
* @example
|
|
@@ -69,9 +80,16 @@ let FmInput = class FmInput extends LitElement {
|
|
|
69
80
|
this.letterSpacing = 0;
|
|
70
81
|
/** Autocomplete attribute. */
|
|
71
82
|
this.autocomplete = '';
|
|
72
|
-
/**
|
|
83
|
+
/**
|
|
84
|
+
* Extra CSS classes on the shadow `.inputgroup` wrapper.
|
|
85
|
+
* Shadow-only — consumer Tailwind utilities do not apply here.
|
|
86
|
+
* Prefer host `class` for layout (margin, max-width) and CSS parts for chrome.
|
|
87
|
+
*/
|
|
73
88
|
this.customClass = '';
|
|
74
|
-
/**
|
|
89
|
+
/**
|
|
90
|
+
* Extra CSS classes on the shadow `<input>`.
|
|
91
|
+
* Shadow-only — not a Tailwind API. Prefer `part="input"` for outer styling.
|
|
92
|
+
*/
|
|
75
93
|
this.inputClass = '';
|
|
76
94
|
this.errorMessage = '';
|
|
77
95
|
this.statusIcon = '';
|
|
@@ -216,7 +234,6 @@ let FmInput = class FmInput extends LitElement {
|
|
|
216
234
|
render() {
|
|
217
235
|
const inputClasses = [
|
|
218
236
|
'input',
|
|
219
|
-
'fmx-input-border',
|
|
220
237
|
'fmx-input-autofill',
|
|
221
238
|
this.placeholder ? 'input--with-placeholder' : 'input--no-placeholder',
|
|
222
239
|
this.inputStateClass,
|
|
@@ -231,10 +248,11 @@ let FmInput = class FmInput extends LitElement {
|
|
|
231
248
|
].filter(Boolean).join(' ');
|
|
232
249
|
return html `
|
|
233
250
|
<div
|
|
234
|
-
class="inputgroup
|
|
251
|
+
class="inputgroup ${this.customClass} ${this.isFocused ? 'inputgroup--focused' : ''}"
|
|
252
|
+
part="inputgroup"
|
|
235
253
|
data-inputgroup-type=${this.type}
|
|
236
254
|
>
|
|
237
|
-
<div class="
|
|
255
|
+
<div class="inputgroup__control">
|
|
238
256
|
<input
|
|
239
257
|
type=${this.type}
|
|
240
258
|
.value=${this.value}
|
|
@@ -246,6 +264,7 @@ let FmInput = class FmInput extends LitElement {
|
|
|
246
264
|
maxlength=${this.maxLength ?? undefined}
|
|
247
265
|
autocomplete=${this.autocomplete}
|
|
248
266
|
class=${inputClasses}
|
|
267
|
+
part="input"
|
|
249
268
|
style="letter-spacing: ${this.letterSpacing}em;"
|
|
250
269
|
/>
|
|
251
270
|
${this.placeholder
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fm-input.js","sourceRoot":"","sources":["../../src/fm-input/fm-input.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAC9C,OAAO,gCAAgC,CAAA;AACvC,OAAO,kCAAkC,CAAA;AACzC,OAAO,kCAAkC,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAElD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;IACnC,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;AAC1C,CAAC;AAKD
|
|
1
|
+
{"version":3,"file":"fm-input.js","sourceRoot":"","sources":["../../src/fm-input/fm-input.ts"],"names":[],"mappings":"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"}
|
|
@@ -9,14 +9,14 @@ export const fmInputStyle = css `
|
|
|
9
9
|
min-width: 100px;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
.
|
|
12
|
+
.inputgroup__control {
|
|
13
13
|
position: relative;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
.input {
|
|
17
17
|
width: 100%;
|
|
18
18
|
height: var(--button-height-lg);
|
|
19
|
-
font-size: var(--
|
|
19
|
+
font-size: var(--text-lg);
|
|
20
20
|
background: var(--color-surface-neutral-default-highest);
|
|
21
21
|
color: var(--color-content-neutral-default);
|
|
22
22
|
border: var(--stroke-sm) solid transparent;
|
|
@@ -35,12 +35,12 @@ export const fmInputStyle = css `
|
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
.input:focus {
|
|
38
|
-
border-color: var(--color-outline-brand-
|
|
38
|
+
border-color: var(--color-outline-brand-default);
|
|
39
39
|
text-overflow: clip;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
.input:hover:not(:focus):not(:disabled):not(:read-only){
|
|
43
|
-
border-color: var(--color-outline-brand-
|
|
43
|
+
border-color: var(--color-outline-brand-default);
|
|
44
44
|
}
|
|
45
45
|
.input.input--danger {
|
|
46
46
|
border-color: var(--color-outline-functional-danger);
|
|
@@ -109,7 +109,7 @@ export const fmInputStyle = css `
|
|
|
109
109
|
.inputgroup .fmx-input-autofill:-webkit-autofill,
|
|
110
110
|
.inputgroup .fmx-input-autofill:autofill {
|
|
111
111
|
padding-top: var(--spacing-md);
|
|
112
|
-
padding-bottom: var(--spacing-
|
|
112
|
+
padding-bottom: var(--spacing-xs2);
|
|
113
113
|
font-size: var(--text-lg);
|
|
114
114
|
}
|
|
115
115
|
|
|
@@ -158,7 +158,7 @@ export const fmInputStyle = css `
|
|
|
158
158
|
}
|
|
159
159
|
|
|
160
160
|
.icon-success {
|
|
161
|
-
color: var(--color-content-brand-
|
|
161
|
+
color: var(--color-content-brand-default);
|
|
162
162
|
}
|
|
163
163
|
|
|
164
164
|
.iconwrapper.icon-loading {
|
|
@@ -182,7 +182,7 @@ export const fmInputStyle = css `
|
|
|
182
182
|
color: var(--color-content-functional-danger);
|
|
183
183
|
font-size: var(--text-xs);
|
|
184
184
|
font-weight: var(--font-weight-bold);
|
|
185
|
-
margin-top: var(--spacing-
|
|
185
|
+
margin-top: var(--spacing-xs2);
|
|
186
186
|
margin-bottom: var(--spacing-none);
|
|
187
187
|
}
|
|
188
188
|
|
|
@@ -37,11 +37,11 @@ export const fmRadioInputStyle = css `
|
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
:host(:hover):not([disabled]):not([checked]) .radio-card {
|
|
40
|
-
border-color: var(--color-outline-brand-
|
|
40
|
+
border-color: var(--color-outline-brand-default);
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
:host([checked]) .radio-card {
|
|
44
|
-
border-color: var(--color-outline-brand-
|
|
44
|
+
border-color: var(--color-outline-brand-default);
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
:host([disabled]) .radio-card {
|
|
@@ -49,7 +49,7 @@ export const fmRadioInputStyle = css `
|
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
:host(:focus-within):not([disabled]) .radio-card {
|
|
52
|
-
outline: var(--stroke-sm) solid var(--color-outline-brand-
|
|
52
|
+
outline: var(--stroke-sm) solid var(--color-outline-brand-default);
|
|
53
53
|
outline-offset: 2px;
|
|
54
54
|
}
|
|
55
55
|
|
|
@@ -142,7 +142,7 @@ export const fmRadioInputStyle = css `
|
|
|
142
142
|
}
|
|
143
143
|
|
|
144
144
|
slot[name="description"]::slotted(*) {
|
|
145
|
-
margin-top: var(--spacing-
|
|
145
|
+
margin-top: var(--spacing-xs3);
|
|
146
146
|
font-size: var(--text-md);
|
|
147
147
|
font-weight: var(--font-weight-regular);
|
|
148
148
|
color: var(--color-content-neutral-default-alt);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fm-segmented-controller.style.d.ts","sourceRoot":"","sources":["../../src/fm-segmented-controller/fm-segmented-controller.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,0BAA0B,
|
|
1
|
+
{"version":3,"file":"fm-segmented-controller.style.d.ts","sourceRoot":"","sources":["../../src/fm-segmented-controller/fm-segmented-controller.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,0BAA0B,yBAoMtC,CAAC"}
|