@rotki/ui-library 2.19.2 → 2.19.3
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/dist/components/forms/text-field/text-field-styles.js +15 -3
- package/dist/components/forms/text-field/text-field-styles.js.map +1 -1
- package/dist/composables/forms/use-prepend-append-width.js +9 -11
- package/dist/composables/forms/use-prepend-append-width.js.map +1 -1
- package/dist/style.css +4 -0
- package/dist/web-types.json +1 -1
- package/package.json +1 -1
|
@@ -69,8 +69,8 @@ var textFieldStyles = tv({
|
|
|
69
69
|
focused: { true: {} },
|
|
70
70
|
active: { true: { label: [
|
|
71
71
|
"text-[0.75rem] leading-tight",
|
|
72
|
-
"[padding-left:var(--x-padding,0px)]",
|
|
73
|
-
"[padding-right:var(--x-padding,0px)]"
|
|
72
|
+
"[padding-left:calc(var(--x-padding,0px)+var(--prepend-w,0px))]",
|
|
73
|
+
"[padding-right:calc(var(--x-padding,0px)+var(--append-w,0px))]"
|
|
74
74
|
].join(" ") } },
|
|
75
75
|
noLabel: { true: {} },
|
|
76
76
|
showLabel: { true: {} },
|
|
@@ -137,6 +137,12 @@ var textFieldStyles = tv({
|
|
|
137
137
|
label: "leading-[3.5]"
|
|
138
138
|
}
|
|
139
139
|
},
|
|
140
|
+
{
|
|
141
|
+
variant: "default",
|
|
142
|
+
dense: true,
|
|
143
|
+
active: true,
|
|
144
|
+
class: { labelText: "-translate-y-[0.5rem]" }
|
|
145
|
+
},
|
|
140
146
|
{
|
|
141
147
|
variant: "default",
|
|
142
148
|
noLabel: true,
|
|
@@ -191,7 +197,7 @@ var textFieldStyles = tv({
|
|
|
191
197
|
active: true,
|
|
192
198
|
class: {
|
|
193
199
|
input: "border-t-transparent",
|
|
194
|
-
label: "!h-auto -translate-y-[0.5rem]
|
|
200
|
+
label: "!h-auto -translate-y-[0.5rem] [padding-left:var(--x-padding,0px)]"
|
|
195
201
|
}
|
|
196
202
|
},
|
|
197
203
|
{
|
|
@@ -202,6 +208,12 @@ var textFieldStyles = tv({
|
|
|
202
208
|
label: "leading-[2.5]"
|
|
203
209
|
}
|
|
204
210
|
},
|
|
211
|
+
{
|
|
212
|
+
variant: "outlined",
|
|
213
|
+
dense: true,
|
|
214
|
+
active: true,
|
|
215
|
+
class: { label: "!leading-tight" }
|
|
216
|
+
},
|
|
205
217
|
{
|
|
206
218
|
focused: true,
|
|
207
219
|
color: "primary",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field-styles.js","names":[],"sources":["../../../../src/components/forms/text-field/text-field-styles.ts"],"sourcesContent":["import { textInputBase, type TextInputVariant, underlinePseudo } from '@/components/forms/text-input-styles';\nimport { tv } from '@/utils/tv';\n\nexport type TextFieldVariant = TextInputVariant;\n\n/**\n * tv() styles for RuiTextField. Extends textInputBase for shared\n * fieldset/legend/label/validation core.\n *\n * IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes\n * between base and extension. Never put a class in the base slot that a\n * variant needs to override — put variant-specific classes in the variants.\n */\n\nexport const textFieldStyles = tv({\n extend: textInputBase,\n slots: {\n // Re-declare base slots for type inference (extend merges classes at runtime)\n fieldset: '',\n legend: '',\n // No pt-* here — each variant sets its own padding-top\n wrapper: 'relative w-full flex items-center rounded bg-white dark:bg-transparent',\n input: [\n 'peer leading-6 text-rui-text w-full bg-transparent pr-4',\n 'outline-0 outline-none transition-all',\n 'placeholder:opacity-0 focus:placeholder:opacity-100',\n ].join(' '),\n // No border-b or display here — each variant sets its own\n label: [\n // Use arbitrary `text-[1rem]` instead of `text-base` — the named class\n // bundles `line-height: 1.5rem`, and the consumer's later-loaded\n // `.text-base` rule would override our `leading-*` per variant. The\n // arbitrary form emits font-size only, so `leading-*` stays authoritative.\n 'left-0 text-[1rem] pointer-events-none',\n 'absolute top-0 h-full w-full select-none',\n // Dynamic padding via CSS variables\n '[padding-left:calc(var(--x-padding,0px)+var(--prepend-w,0px))]',\n '[padding-right:calc(var(--x-padding,0px)+var(--append-w,0px))]',\n // CSS-only autofill fallback (before JS catches up)\n 'peer-autofill:text-[0.75rem] peer-autofill:leading-tight',\n ].join(' '),\n labelText: 'truncate transition-all duration-75',\n inputWrapper: 'flex flex-1 overflow-hidden',\n prepend: 'flex items-center gap-1 shrink-0',\n append: 'flex items-center gap-1 shrink-0',\n icon: 'text-black/[0.54] dark:text-white/[0.56]',\n details: 'pt-1 px-4',\n required: 'text-rui-error',\n clearButton: '!p-2',\n },\n variants: {\n variant: {\n default: {\n wrapper: 'pt-3',\n input: 'py-1.5',\n label: `flex leading-[3.75] ${underlinePseudo}`,\n prepend: 'pr-3',\n append: 'pl-3',\n },\n filled: {\n input: 'px-4 py-4',\n label: `flex leading-[3.5] [--x-padding:1rem] rounded-t bg-black/[0.06] dark:bg-white/[0.09] ${underlinePseudo}`,\n prepend: 'pl-3',\n append: 'pr-3',\n },\n outlined: {\n inputWrapper: '!overflow-visible',\n input: 'px-4 py-4',\n label: [\n 'flex leading-[3.5] [--x-padding:1rem]',\n 'border-0 border-transparent',\n 'after:content-none',\n ].join(' '),\n fieldset: '!mt-0 !h-full',\n prepend: 'pl-3',\n append: 'pr-3',\n },\n },\n dense: {\n true: {},\n },\n hovered: {\n true: {\n label: 'border-black dark:border-white',\n },\n },\n focused: {\n true: {},\n },\n active: {\n true: {\n label: [\n 'text-[0.75rem] leading-tight',\n '[padding-left:var(--x-padding,0px)]',\n '[padding-right:var(--x-padding,0px)]',\n ].join(' '),\n },\n },\n noLabel: {\n true: {},\n },\n showLabel: {\n true: {},\n },\n textColor: {\n primary: { prepend: 'text-rui-primary', append: 'text-rui-primary', input: 'text-rui-primary', icon: 'text-rui-primary' },\n secondary: { prepend: 'text-rui-secondary', append: 'text-rui-secondary', input: 'text-rui-secondary', icon: 'text-rui-secondary' },\n error: { prepend: 'text-rui-error', append: 'text-rui-error', input: 'text-rui-error', icon: 'text-rui-error' },\n warning: { prepend: 'text-rui-warning', append: 'text-rui-warning', input: 'text-rui-warning', icon: 'text-rui-warning' },\n info: { prepend: 'text-rui-info', append: 'text-rui-info', input: 'text-rui-info', icon: 'text-rui-info' },\n success: { prepend: 'text-rui-success', append: 'text-rui-success', input: 'text-rui-success', icon: 'text-rui-success' },\n },\n validation: {\n error: {\n input: '!border-rui-error',\n label: '!text-rui-error !after:border-rui-error',\n },\n success: {\n input: '!border-rui-success',\n label: '!text-rui-success !after:border-rui-success',\n },\n },\n },\n compoundVariants: [\n // --- Default variant ---\n { variant: 'default', focused: true, class: { label: 'after:scale-x-100' } },\n { variant: 'default', dense: true, class: { input: 'py-1', label: 'leading-[3.5]' } },\n // Without a label, the wrapper's `pt-3` floating-label reserve serves no\n // purpose and leaves the field ~4–12px taller than an equivalent\n // RuiMenuSelect dense activator. Strip it and tighten the input padding\n // so the underline sits at a matching baseline (40px non-dense, 32px\n // dense) — these match min-h-10 and !min-h-8 of the menu-select\n // activator.\n { variant: 'default', noLabel: true, class: { wrapper: '!pt-0', input: 'py-2' } },\n { variant: 'default', noLabel: true, dense: true, class: { input: 'py-1' } },\n\n // --- Filled variant ---\n { variant: 'filled', focused: true, class: { label: 'bg-black/[0.09] dark:bg-white/[0.13]' } },\n { variant: 'filled', active: true, class: { label: 'leading-[1.5]' } },\n { variant: 'filled', dense: true, class: { input: 'pt-5 pb-1', label: 'leading-[3]' } },\n { variant: 'filled', dense: true, active: true, class: { label: 'leading-[2.25]' } },\n { variant: 'filled', noLabel: true, class: { input: 'py-4' } },\n { variant: 'filled', noLabel: true, dense: true, class: { input: 'py-3' } },\n\n // --- Outlined variant ---\n { variant: 'outlined', active: true, class: {\n input: 'border-t-transparent',\n // Use a fixed translate in rem (≈50% of the active label's\n // 0.9375rem height — text-[0.75rem] × leading-tight). A percentage\n // translate gets recomputed against the *current* label height,\n // which jumps from 0.9375rem to the input's full height the moment\n // !h-auto is removed on blur — producing a transient transform far\n // larger than the floated value and a visible upward overshoot\n // before the transition settles. Anchoring in rem (rather than %)\n // keeps the start/end values consistent across the height swap and\n // scales with the root font-size.\n label: '!h-auto -translate-y-[0.5rem] pl-4',\n } },\n { variant: 'outlined', dense: true, class: { input: 'py-2', label: 'leading-[2.5]' } },\n\n // --- Focus label color (per color) ---\n { focused: true, color: 'primary', class: { label: 'text-rui-primary' } },\n { focused: true, color: 'secondary', class: { label: 'text-rui-secondary' } },\n { focused: true, color: 'error', class: { label: 'text-rui-error' } },\n { focused: true, color: 'warning', class: { label: 'text-rui-warning' } },\n { focused: true, color: 'info', class: { label: 'text-rui-info' } },\n { focused: true, color: 'success', class: { label: 'text-rui-success' } },\n\n // --- Label after border color (always applied when color set) ---\n { color: 'primary', class: { label: 'after:border-rui-primary' } },\n { color: 'secondary', class: { label: 'after:border-rui-secondary' } },\n { color: 'error', class: { label: 'after:border-rui-error' } },\n { color: 'warning', class: { label: 'after:border-rui-warning' } },\n { color: 'info', class: { label: 'after:border-rui-info' } },\n { color: 'success', class: { label: 'after:border-rui-success' } },\n ],\n defaultVariants: {\n variant: 'default',\n },\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"text-field-styles.js","names":[],"sources":["../../../../src/components/forms/text-field/text-field-styles.ts"],"sourcesContent":["import { textInputBase, type TextInputVariant, underlinePseudo } from '@/components/forms/text-input-styles';\nimport { tv } from '@/utils/tv';\n\nexport type TextFieldVariant = TextInputVariant;\n\n/**\n * tv() styles for RuiTextField. Extends textInputBase for shared\n * fieldset/legend/label/validation core.\n *\n * IMPORTANT: tv() extend does NOT deduplicate conflicting Tailwind classes\n * between base and extension. Never put a class in the base slot that a\n * variant needs to override — put variant-specific classes in the variants.\n */\n\nexport const textFieldStyles = tv({\n extend: textInputBase,\n slots: {\n // Re-declare base slots for type inference (extend merges classes at runtime)\n fieldset: '',\n legend: '',\n // No pt-* here — each variant sets its own padding-top\n wrapper: 'relative w-full flex items-center rounded bg-white dark:bg-transparent',\n input: [\n 'peer leading-6 text-rui-text w-full bg-transparent pr-4',\n 'outline-0 outline-none transition-all',\n 'placeholder:opacity-0 focus:placeholder:opacity-100',\n ].join(' '),\n // No border-b or display here — each variant sets its own\n label: [\n // Use arbitrary `text-[1rem]` instead of `text-base` — the named class\n // bundles `line-height: 1.5rem`, and the consumer's later-loaded\n // `.text-base` rule would override our `leading-*` per variant. The\n // arbitrary form emits font-size only, so `leading-*` stays authoritative.\n 'left-0 text-[1rem] pointer-events-none',\n 'absolute top-0 h-full w-full select-none',\n // Dynamic padding via CSS variables\n '[padding-left:calc(var(--x-padding,0px)+var(--prepend-w,0px))]',\n '[padding-right:calc(var(--x-padding,0px)+var(--append-w,0px))]',\n // CSS-only autofill fallback (before JS catches up)\n 'peer-autofill:text-[0.75rem] peer-autofill:leading-tight',\n ].join(' '),\n labelText: 'truncate transition-all duration-75',\n inputWrapper: 'flex flex-1 overflow-hidden',\n prepend: 'flex items-center gap-1 shrink-0',\n append: 'flex items-center gap-1 shrink-0',\n icon: 'text-black/[0.54] dark:text-white/[0.56]',\n details: 'pt-1 px-4',\n required: 'text-rui-error',\n clearButton: '!p-2',\n },\n variants: {\n variant: {\n default: {\n wrapper: 'pt-3',\n input: 'py-1.5',\n label: `flex leading-[3.75] ${underlinePseudo}`,\n prepend: 'pr-3',\n append: 'pl-3',\n },\n filled: {\n input: 'px-4 py-4',\n label: `flex leading-[3.5] [--x-padding:1rem] rounded-t bg-black/[0.06] dark:bg-white/[0.09] ${underlinePseudo}`,\n prepend: 'pl-3',\n append: 'pr-3',\n },\n outlined: {\n inputWrapper: '!overflow-visible',\n input: 'px-4 py-4',\n label: [\n 'flex leading-[3.5] [--x-padding:1rem]',\n 'border-0 border-transparent',\n 'after:content-none',\n ].join(' '),\n fieldset: '!mt-0 !h-full',\n prepend: 'pl-3',\n append: 'pr-3',\n },\n },\n dense: {\n true: {},\n },\n hovered: {\n true: {\n label: 'border-black dark:border-white',\n },\n },\n focused: {\n true: {},\n },\n active: {\n true: {\n label: [\n 'text-[0.75rem] leading-tight',\n // Keep --prepend-w / --append-w in the floated padding so the\n // label sits above the input column, not above the prepend\n // icon / append button.\n '[padding-left:calc(var(--x-padding,0px)+var(--prepend-w,0px))]',\n '[padding-right:calc(var(--x-padding,0px)+var(--append-w,0px))]',\n ].join(' '),\n },\n },\n noLabel: {\n true: {},\n },\n showLabel: {\n true: {},\n },\n textColor: {\n primary: { prepend: 'text-rui-primary', append: 'text-rui-primary', input: 'text-rui-primary', icon: 'text-rui-primary' },\n secondary: { prepend: 'text-rui-secondary', append: 'text-rui-secondary', input: 'text-rui-secondary', icon: 'text-rui-secondary' },\n error: { prepend: 'text-rui-error', append: 'text-rui-error', input: 'text-rui-error', icon: 'text-rui-error' },\n warning: { prepend: 'text-rui-warning', append: 'text-rui-warning', input: 'text-rui-warning', icon: 'text-rui-warning' },\n info: { prepend: 'text-rui-info', append: 'text-rui-info', input: 'text-rui-info', icon: 'text-rui-info' },\n success: { prepend: 'text-rui-success', append: 'text-rui-success', input: 'text-rui-success', icon: 'text-rui-success' },\n },\n validation: {\n error: {\n input: '!border-rui-error',\n label: '!text-rui-error !after:border-rui-error',\n },\n success: {\n input: '!border-rui-success',\n label: '!text-rui-success !after:border-rui-success',\n },\n },\n },\n compoundVariants: [\n // --- Default variant ---\n { variant: 'default', focused: true, class: { label: 'after:scale-x-100' } },\n { variant: 'default', dense: true, class: { input: 'py-1', label: 'leading-[3.5]' } },\n // In dense mode, lift only the labelText glyphs (not the label\n // container) so the floated label clears the compact ~32px input row.\n // Translating the label container would drag its `after:` underline\n // pseudo with it, leaving the focus underline floating above the\n // input row; translating only the inner span keeps the underline\n // anchored. Non-dense default has enough vertical breathing room\n // (~36px input + 12px `pt-3` reserve) that the labelText sits cleanly\n // above the input without any lift.\n { variant: 'default', dense: true, active: true, class: { labelText: '-translate-y-[0.5rem]' } },\n // Without a label, the wrapper's `pt-3` floating-label reserve serves no\n // purpose and leaves the field ~4–12px taller than an equivalent\n // RuiMenuSelect dense activator. Strip it and tighten the input padding\n // so the underline sits at a matching baseline (40px non-dense, 32px\n // dense) — these match min-h-10 and !min-h-8 of the menu-select\n // activator.\n { variant: 'default', noLabel: true, class: { wrapper: '!pt-0', input: 'py-2' } },\n { variant: 'default', noLabel: true, dense: true, class: { input: 'py-1' } },\n\n // --- Filled variant ---\n { variant: 'filled', focused: true, class: { label: 'bg-black/[0.09] dark:bg-white/[0.13]' } },\n { variant: 'filled', active: true, class: { label: 'leading-[1.5]' } },\n { variant: 'filled', dense: true, class: { input: 'pt-5 pb-1', label: 'leading-[3]' } },\n { variant: 'filled', dense: true, active: true, class: { label: 'leading-[2.25]' } },\n { variant: 'filled', noLabel: true, class: { input: 'py-4' } },\n { variant: 'filled', noLabel: true, dense: true, class: { input: 'py-3' } },\n\n // --- Outlined variant ---\n { variant: 'outlined', active: true, class: {\n input: 'border-t-transparent',\n // Use a fixed translate in rem (≈50% of the active label's\n // 0.9375rem height — text-[0.75rem] × leading-tight). A percentage\n // translate gets recomputed against the *current* label height,\n // which jumps from 0.9375rem to the input's full height the moment\n // !h-auto is removed on blur — producing a transient transform far\n // larger than the floated value and a visible upward overshoot\n // before the transition settles. Anchoring in rem (rather than %)\n // keeps the start/end values consistent across the height swap and\n // scales with the root font-size.\n //\n // Override the active slot's padding-left to drop `--prepend-w` and\n // stay anchored to the field's left edge — per MD3, the floated\n // label of an outlined field straddles the border at the start of\n // the field, not above the input column. Filled/default both keep\n // the prepend offset (label sits above the input), but outlined\n // does not.\n label: '!h-auto -translate-y-[0.5rem] [padding-left:var(--x-padding,0px)]',\n } },\n { variant: 'outlined', dense: true, class: { input: 'py-2', label: 'leading-[2.5]' } },\n // Re-assert `leading-tight` for outlined+dense+active. The dense rule\n // above sets `leading-[2.5]` which twMerge keeps as the winning leading\n // (it appears later than the active slot's `leading-tight`), inflating\n // the floated label's line-box from ~15px to ~30px and pushing its\n // visual centre below the fieldset border.\n { variant: 'outlined', dense: true, active: true, class: { label: '!leading-tight' } },\n\n // --- Focus label color (per color) ---\n { focused: true, color: 'primary', class: { label: 'text-rui-primary' } },\n { focused: true, color: 'secondary', class: { label: 'text-rui-secondary' } },\n { focused: true, color: 'error', class: { label: 'text-rui-error' } },\n { focused: true, color: 'warning', class: { label: 'text-rui-warning' } },\n { focused: true, color: 'info', class: { label: 'text-rui-info' } },\n { focused: true, color: 'success', class: { label: 'text-rui-success' } },\n\n // --- Label after border color (always applied when color set) ---\n { color: 'primary', class: { label: 'after:border-rui-primary' } },\n { color: 'secondary', class: { label: 'after:border-rui-secondary' } },\n { color: 'error', class: { label: 'after:border-rui-error' } },\n { color: 'warning', class: { label: 'after:border-rui-warning' } },\n { color: 'info', class: { label: 'after:border-rui-info' } },\n { color: 'success', class: { label: 'after:border-rui-success' } },\n ],\n defaultVariants: {\n variant: 'default',\n },\n});\n"],"mappings":"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"}
|
|
@@ -1,22 +1,20 @@
|
|
|
1
1
|
import { assert } from "../../utils/assert.js";
|
|
2
2
|
import { shallowRef } from "vue";
|
|
3
3
|
import { useResizeObserver } from "@vueuse/core";
|
|
4
|
-
import { set as set$1 } from "@vueuse/shared";
|
|
4
|
+
import { get as get$1, set as set$1 } from "@vueuse/shared";
|
|
5
5
|
//#region src/composables/forms/use-prepend-append-width.ts
|
|
6
6
|
function usePrependAppendWidth(prepend, append, offset = 0) {
|
|
7
7
|
const prependWidth = shallowRef("0px");
|
|
8
8
|
const appendWidth = shallowRef("0px");
|
|
9
|
-
useResizeObserver(prepend, (
|
|
10
|
-
const
|
|
11
|
-
assert(
|
|
12
|
-
|
|
13
|
-
set$1(prependWidth, `${width + left + offset}px`);
|
|
9
|
+
useResizeObserver(prepend, () => {
|
|
10
|
+
const target = get$1(prepend);
|
|
11
|
+
assert(target);
|
|
12
|
+
set$1(prependWidth, `${target.offsetWidth + offset}px`);
|
|
14
13
|
});
|
|
15
|
-
useResizeObserver(append, (
|
|
16
|
-
const
|
|
17
|
-
assert(
|
|
18
|
-
|
|
19
|
-
set$1(appendWidth, `${width + right + offset}px`);
|
|
14
|
+
useResizeObserver(append, () => {
|
|
15
|
+
const target = get$1(append);
|
|
16
|
+
assert(target);
|
|
17
|
+
set$1(appendWidth, `${target.offsetWidth + offset}px`);
|
|
20
18
|
});
|
|
21
19
|
return {
|
|
22
20
|
prependWidth,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-prepend-append-width.js","names":[],"sources":["../../../src/composables/forms/use-prepend-append-width.ts"],"sourcesContent":["import type { Ref, ShallowRef } from 'vue';\nimport { assert } from '@/utils/assert';\n\nexport interface PrependAppendWidth {\n prependWidth: Ref<string>;\n appendWidth: Ref<string>;\n}\n\nexport function usePrependAppendWidth(\n prepend: Readonly<ShallowRef<HTMLDivElement | null>>,\n append: Readonly<ShallowRef<HTMLDivElement | null>>,\n offset: number = 0,\n): PrependAppendWidth {\n const prependWidth = shallowRef<string>('0px');\n const appendWidth = shallowRef<string>('0px');\n\n useResizeObserver(prepend, (
|
|
1
|
+
{"version":3,"file":"use-prepend-append-width.js","names":[],"sources":["../../../src/composables/forms/use-prepend-append-width.ts"],"sourcesContent":["import type { Ref, ShallowRef } from 'vue';\nimport { assert } from '@/utils/assert';\n\nexport interface PrependAppendWidth {\n prependWidth: Ref<string>;\n appendWidth: Ref<string>;\n}\n\nexport function usePrependAppendWidth(\n prepend: Readonly<ShallowRef<HTMLDivElement | null>>,\n append: Readonly<ShallowRef<HTMLDivElement | null>>,\n offset: number = 0,\n): PrependAppendWidth {\n const prependWidth = shallowRef<string>('0px');\n const appendWidth = shallowRef<string>('0px');\n\n // Measure the element's outer (border-box) width so callers get the full\n // space the prepend/append region occupies — including both left and\n // right padding. The previous `contentRect.width + contentRect.left` form\n // added padding-left but silently dropped padding-right, so a prepend\n // slot styled with `pr-3` (only) reported 12px short of its real width\n // and the floated label landed under the icon's trailing padding instead\n // of aligned with the input text.\n useResizeObserver(prepend, () => {\n const target = get(prepend);\n assert(target);\n set(prependWidth, `${target.offsetWidth + offset}px`);\n });\n\n useResizeObserver(append, () => {\n const target = get(append);\n assert(target);\n set(appendWidth, `${target.offsetWidth + offset}px`);\n });\n\n return { prependWidth, appendWidth };\n}\n"],"mappings":";;;;;AAQA,SAAgB,sBACd,SACA,QACA,SAAiB,GACG;CACpB,MAAM,eAAe,WAAmB,MAAM;CAC9C,MAAM,cAAc,WAAmB,MAAM;AAS7C,mBAAkB,eAAe;EAC/B,MAAM,SAAS,MAAI,QAAQ;AAC3B,SAAO,OAAO;AACd,QAAI,cAAc,GAAG,OAAO,cAAc,OAAO,IAAI;GACrD;AAEF,mBAAkB,cAAc;EAC9B,MAAM,SAAS,MAAI,OAAO;AAC1B,SAAO,OAAO;AACd,QAAI,aAAa,GAAG,OAAO,cAAc,OAAO,IAAI;GACpD;AAEF,QAAO;EAAE;EAAc;EAAa"}
|
package/dist/style.css
CHANGED
package/dist/web-types.json
CHANGED