@marianmeres/stuic 3.181.0 → 3.182.0

package/dist/components/Input/field-table-number.js

@@ -0,0 +1,86 @@
+/**
+ * Locale-aware number parsing and formatting for `FieldTable`'s `number` cells.
+ *
+ * Pure functions (no DOM), so they can be unit-tested in the fast node project.
+ * The rule they implement is "never guess": a typed value is either read as one
+ * unambiguous number, or rejected.
+ */
+/**
+ * The decimal separator `Intl` uses for `locale` (`"."` for `en`, `","` for `sk`).
+ * `undefined` means the runtime's default locale. An unknown locale falls back to `"."`.
+ */
+export function decimalSeparator(locale) {
+    try {
+        const parts = new Intl.NumberFormat(locale, { useGrouping: false }).formatToParts(1.1);
+        return parts.find((p) => p.type === "decimal")?.value ?? ".";
+    }
+    catch {
+        return ".";
+    }
+}
+// an optional sign, then digits with at most one dot ("12", "12.", ".5", "-3.2");
+// no exponent, no hex, no trailing garbage
+const DECIMAL_RE = /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)$/;
+/**
+ * Parses what a user typed into a number cell.
+ *
+ * - Whitespace anywhere (including NBSP / narrow NBSP) is stripped: `"1 000"` → `1000`.
+ * - `"."` is always accepted as the decimal separator.
+ * - `","` is accepted as the decimal separator **only** when `locale` uses it. Under an
+ *   English locale `"1,000"` is rejected — it is never silently read as a thousands group.
+ * - Two separators (`"1.2.3"`, `"1,2,3"`, `"1,000.5"`) are rejected.
+ * - A Unicode minus (`"−5"`, what `Intl` formats in some locales) reads as a minus sign.
+ * - Blank is `{ ok: true, value: null }`.
+ *
+ * @example
+ * ```ts
+ * parseCellNumber("4.2", "sk");  // { ok: true, value: 4.2 }
+ * parseCellNumber("4,2", "sk");  // { ok: true, value: 4.2 }
+ * parseCellNumber("4,2", "en");  // { ok: false }
+ * parseCellNumber("1 000", "en"); // { ok: true, value: 1000 }
+ * parseCellNumber("", "en");     // { ok: true, value: null }
+ * ```
+ */
+export function parseCellNumber(raw, locale) {
+    let s = String(raw ?? "")
+        .replace(/\s+/g, "")
+        .replace(/−/g, "-");
+    if (s === "")
+        return { ok: true, value: null };
+    const dots = (s.match(/\./g) ?? []).length;
+    const commas = (s.match(/,/g) ?? []).length;
+    if (dots + commas > 1)
+        return { ok: false };
+    if (commas === 1) {
+        if (decimalSeparator(locale) !== ",")
+            return { ok: false };
+        s = s.replace(",", ".");
+    }
+    if (!DECIMAL_RE.test(s))
+        return { ok: false };
+    const n = Number(s);
+    if (!Number.isFinite(n))
+        return { ok: false };
+    return { ok: true, value: n };
+}
+/**
+ * Formats a number for display in a number cell: no grouping, up to 20 fraction
+ * digits (so `4.2` is never rounded away), Latin digits, the locale's decimal
+ * separator. A Slovak user sees `4,2` for `4.2`; an English one `4.2`.
+ *
+ * A non-finite input yields `""`.
+ */
+export function formatCellNumber(n, locale) {
+    if (typeof n !== "number" || !Number.isFinite(n))
+        return "";
+    try {
+        return new Intl.NumberFormat(locale, {
+            useGrouping: false,
+            maximumFractionDigits: 20,
+            numberingSystem: "latn",
+        }).format(n);
+    }
+    catch {
+        return String(n);
+    }
+}

package/dist/components/Input/index.css

@@ -98,6 +98,27 @@
 	--stuic-field-date-placeholder-text: var(--stuic-input-placeholder);
 	--stuic-field-date-embedded-padding: 0.5rem;
 	--stuic-field-date-dialog-padding: 1rem;
+
+	/* FieldTable specific (see the FIELD TABLE section at the bottom of this file) */
+	--stuic-field-table-border-color: var(--stuic-color-border);
+	--stuic-field-table-header-bg: var(--stuic-color-muted);
+	--stuic-field-table-header-text: var(--stuic-color-muted-foreground);
+	--stuic-field-table-row-divider-color: var(--stuic-color-border);
+	--stuic-field-table-cell-padding-x: calc(var(--spacing) * 1.5);
+	--stuic-field-table-cell-padding-y: calc(var(--spacing) * 1);
+	--stuic-field-table-card-bg: transparent;
+	--stuic-field-table-card-gap: calc(var(--spacing) * 2);
+	--stuic-field-table-invalid-color: var(--stuic-input-accent-error);
+	--stuic-field-table-unit-text: var(--stuic-color-muted-foreground);
+	/* `--stuic-field-table-card-radius` is deliberately NOT declared: it is read as a
+	   fallback argument at the usage site (`--stuic-radius`) — see docs/conventions.md. */
+	/* Minimum usable width per cell type in table mode (the table scrolls instead) */
+	--stuic-field-table-col-min-text: 10rem;
+	--stuic-field-table-col-min-number: 6rem;
+	--stuic-field-table-col-min-select: 8rem;
+	--stuic-field-table-col-min-checkbox: 3rem;
+	--stuic-field-table-col-min-date: 9.5rem;
+	--stuic-field-table-col-min-url: 12rem;
 }
 
 @layer components {
@@ -954,3 +975,579 @@
 		overflow-x: auto;
 	}
 }
+
+/* ============================================================================
+   FIELD TABLE
+   One DOM for both layouts: a real <table> is the base ("table" mode), and the
+   "stacked" mode restyles it into one card per row (thead gone, each <td> a
+   label + control line, the actions cell moved to the card's top). `auto`
+   picks the mode by a container query on the component's OWN inline size — a
+   size query cannot read a custom property, hence a `data-table-from` attribute
+   on a fixed scale and one block per step (the DescriptionList pattern).
+
+   The stacked block is repeated verbatim per step on purpose: the alternative
+   (a JS ResizeObserver flipping an attribute) would remount nothing either, but
+   paints one frame in the wrong mode and costs an observer per instance.
+
+   Cell controls take their chrome from Tailwind utilities in the component
+   (the `.stuic-input input` base rule outranks any component-layer selector);
+   this file owns layout, headers, cards, min-widths and the messages.
+   ============================================================================ */
+
+@layer components {
+	.stuic-field-table {
+		padding: calc(var(--spacing) * 2);
+	}
+
+	.stuic-field-table[data-layout="auto"] {
+		/* Named so the queries below can only ever resolve against this element,
+		   never against a consumer's own @container ancestor. */
+		container-name: stuic-field-table;
+		container-type: inline-size;
+	}
+
+	/* ---- table mode (base) ---- */
+
+	.stuic-field-table-scroll {
+		overflow-x: auto;
+		scrollbar-width: thin;
+	}
+
+	.stuic-field-table table {
+		width: 100%;
+		border-collapse: collapse;
+	}
+
+	.stuic-field-table th {
+		text-align: start;
+		font-size: var(--text-xs);
+		font-weight: 500;
+		color: var(--stuic-field-table-header-text);
+		background: var(--stuic-field-table-header-bg);
+		padding: var(--stuic-field-table-cell-padding-y)
+			var(--stuic-field-table-cell-padding-x);
+		white-space: nowrap;
+	}
+
+	.stuic-field-table th:first-child {
+		border-start-start-radius: var(
+			--stuic-field-table-header-radius,
+			var(--stuic-radius)
+		);
+	}
+
+	.stuic-field-table th:last-child {
+		border-start-end-radius: var(--stuic-field-table-header-radius, var(--stuic-radius));
+	}
+
+	.stuic-field-table td {
+		padding: var(--stuic-field-table-cell-padding-y)
+			var(--stuic-field-table-cell-padding-x);
+		vertical-align: top;
+		border-top: 1px solid var(--stuic-field-table-row-divider-color);
+	}
+
+	.stuic-field-table tbody tr:first-child td {
+		border-top-color: transparent;
+	}
+
+	/* never squash an input below usable width — the wrapper scrolls instead */
+	.stuic-field-table td[data-type="text"] {
+		min-width: var(--stuic-field-table-col-min-text);
+	}
+	.stuic-field-table td[data-type="number"] {
+		min-width: var(--stuic-field-table-col-min-number);
+	}
+	.stuic-field-table td[data-type="select"] {
+		min-width: var(--stuic-field-table-col-min-select);
+	}
+	.stuic-field-table td[data-type="checkbox"] {
+		min-width: var(--stuic-field-table-col-min-checkbox);
+	}
+	.stuic-field-table td[data-type="date"] {
+		min-width: var(--stuic-field-table-col-min-date);
+	}
+	.stuic-field-table td[data-type="url"] {
+		min-width: var(--stuic-field-table-col-min-url);
+	}
+
+	/* In table mode the <th scope="col"> is the visible heading; the per-cell
+	   label stays for the accessible name only ("Qty, row 3"). */
+	.stuic-field-table-cell-label {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		margin: -1px;
+		padding: 0;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	.stuic-field-table-row-title {
+		display: none;
+	}
+
+	.stuic-field-table-actions {
+		width: 1%;
+		white-space: nowrap;
+		text-align: end;
+	}
+
+	.stuic-field-table-actions-buttons {
+		display: inline-flex;
+		align-items: center;
+		gap: calc(var(--spacing) * 0.5);
+	}
+
+	/* ---- cells ---- */
+
+	.stuic-field-table-number {
+		display: flex;
+		align-items: center;
+		gap: calc(var(--spacing) * 1.5);
+	}
+
+	.stuic-field-table-unit {
+		color: var(--stuic-field-table-unit-text);
+		font-size: var(--text-xs);
+		white-space: nowrap;
+	}
+
+	.stuic-field-table-checkbox {
+		display: flex;
+		align-items: center;
+		min-height: var(--stuic-input-min-height-sm);
+	}
+
+	.stuic-field-table-readonly {
+		font-size: var(--text-sm);
+		padding-block: var(--stuic-field-table-cell-padding-y);
+		overflow-wrap: anywhere;
+	}
+
+	.stuic-field-table-unknown-row {
+		font-size: var(--text-xs);
+		color: var(--stuic-color-surface-warning-foreground);
+	}
+
+	.stuic-field-table-cell-error {
+		margin-top: calc(var(--spacing) * 1);
+		font-size: var(--text-xs);
+		color: var(--stuic-field-table-invalid-color);
+	}
+
+	/* ---- empty / footer ---- */
+
+	.stuic-field-table-empty {
+		padding: calc(var(--spacing) * 3);
+		text-align: center;
+		font-size: var(--text-sm);
+		opacity: 0.5;
+	}
+
+	.stuic-field-table-footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: calc(var(--spacing) * 2);
+		padding-top: calc(var(--spacing) * 2);
+	}
+
+	.stuic-field-table-add {
+		display: inline-flex;
+		align-items: center;
+		gap: calc(var(--spacing) * 1);
+		font-size: var(--text-sm);
+		padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2)
+			calc(var(--spacing) * 1.5) calc(var(--spacing) * 1.5);
+		border-radius: var(--stuic-field-table-add-radius, var(--stuic-radius-button));
+		background: var(--stuic-color-muted);
+		opacity: 0.75;
+		transition:
+			opacity var(--stuic-transition),
+			background var(--stuic-transition);
+	}
+
+	.stuic-field-table-add:hover:not(:disabled) {
+		opacity: 1;
+		background: var(--stuic-color-muted-hover);
+	}
+
+	.stuic-field-table-add:disabled {
+		opacity: 0.25;
+		cursor: not-allowed;
+	}
+
+	.stuic-field-table-count {
+		font-size: var(--text-xs);
+		color: var(--stuic-color-muted-foreground);
+		font-variant-numeric: tabular-nums;
+	}
+
+	/* ---- stacked mode (static) ---- */
+
+	.stuic-field-table[data-layout="stacked"] thead {
+		display: none;
+	}
+	.stuic-field-table[data-layout="stacked"] table,
+	.stuic-field-table[data-layout="stacked"] tbody,
+	.stuic-field-table[data-layout="stacked"] tr,
+	.stuic-field-table[data-layout="stacked"] td {
+		display: block;
+		min-width: 0;
+	}
+	.stuic-field-table[data-layout="stacked"] tbody {
+		display: flex;
+		flex-direction: column;
+		gap: var(--stuic-field-table-card-gap);
+	}
+	.stuic-field-table[data-layout="stacked"] tr {
+		display: flex;
+		flex-direction: column;
+		gap: calc(var(--spacing) * 2);
+		padding: calc(var(--spacing) * 2.5);
+		border: 1px solid var(--stuic-field-table-border-color);
+		border-radius: var(--stuic-field-table-card-radius, var(--stuic-radius));
+		background: var(--stuic-field-table-card-bg);
+	}
+	.stuic-field-table[data-layout="stacked"] td {
+		display: grid;
+		grid-template-columns: minmax(5rem, 1fr) minmax(0, 2fr);
+		column-gap: calc(var(--spacing) * 3);
+		align-items: center;
+		padding: 0;
+		border-top: 0;
+	}
+	.stuic-field-table[data-layout="stacked"] td[data-degraded] {
+		display: block;
+	}
+	.stuic-field-table[data-layout="stacked"] .stuic-field-table-cell-label {
+		position: static;
+		width: auto;
+		height: auto;
+		margin: 0;
+		overflow: visible;
+		clip-path: none;
+		white-space: normal;
+		font-size: var(--text-xs);
+		font-weight: 500;
+		color: var(--stuic-field-table-header-text);
+	}
+	.stuic-field-table[data-layout="stacked"] .stuic-field-table-cell-error {
+		grid-column: 2;
+		margin-top: 0;
+	}
+	.stuic-field-table[data-layout="stacked"] .stuic-field-table-actions {
+		order: -1;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: auto;
+		white-space: normal;
+		padding-bottom: calc(var(--spacing) * 1.5);
+		border-bottom: 1px solid var(--stuic-field-table-row-divider-color);
+	}
+	.stuic-field-table[data-layout="stacked"] .stuic-field-table-row-title {
+		display: inline;
+		font-size: var(--text-sm);
+		font-weight: 500;
+	}
+
+	/* ---- stacked mode by container query (`layout="auto"`) ----
+	   The same block as above, once per `tableFrom` step: sm 32rem, md 40rem,
+	   lg 48rem, xl 56rem. */
+
+	@container stuic-field-table (width < 32rem) {
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"] thead {
+			display: none;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"] table,
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"] tbody,
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"] tr,
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"] td {
+			display: block;
+			min-width: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"] tbody {
+			display: flex;
+			flex-direction: column;
+			gap: var(--stuic-field-table-card-gap);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"] tr {
+			display: flex;
+			flex-direction: column;
+			gap: calc(var(--spacing) * 2);
+			padding: calc(var(--spacing) * 2.5);
+			border: 1px solid var(--stuic-field-table-border-color);
+			border-radius: var(--stuic-field-table-card-radius, var(--stuic-radius));
+			background: var(--stuic-field-table-card-bg);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"] td {
+			display: grid;
+			grid-template-columns: minmax(5rem, 1fr) minmax(0, 2fr);
+			column-gap: calc(var(--spacing) * 3);
+			align-items: center;
+			padding: 0;
+			border-top: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"] td[data-degraded] {
+			display: block;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"]
+			.stuic-field-table-cell-label {
+			position: static;
+			width: auto;
+			height: auto;
+			margin: 0;
+			overflow: visible;
+			clip-path: none;
+			white-space: normal;
+			font-size: var(--text-xs);
+			font-weight: 500;
+			color: var(--stuic-field-table-header-text);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"]
+			.stuic-field-table-cell-error {
+			grid-column: 2;
+			margin-top: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"]
+			.stuic-field-table-actions {
+			order: -1;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			width: auto;
+			white-space: normal;
+			padding-bottom: calc(var(--spacing) * 1.5);
+			border-bottom: 1px solid var(--stuic-field-table-row-divider-color);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="sm"]
+			.stuic-field-table-row-title {
+			display: inline;
+			font-size: var(--text-sm);
+			font-weight: 500;
+		}
+	}
+
+	@container stuic-field-table (width < 40rem) {
+		.stuic-field-table[data-layout="auto"][data-table-from="md"] thead {
+			display: none;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="md"] table,
+		.stuic-field-table[data-layout="auto"][data-table-from="md"] tbody,
+		.stuic-field-table[data-layout="auto"][data-table-from="md"] tr,
+		.stuic-field-table[data-layout="auto"][data-table-from="md"] td {
+			display: block;
+			min-width: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="md"] tbody {
+			display: flex;
+			flex-direction: column;
+			gap: var(--stuic-field-table-card-gap);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="md"] tr {
+			display: flex;
+			flex-direction: column;
+			gap: calc(var(--spacing) * 2);
+			padding: calc(var(--spacing) * 2.5);
+			border: 1px solid var(--stuic-field-table-border-color);
+			border-radius: var(--stuic-field-table-card-radius, var(--stuic-radius));
+			background: var(--stuic-field-table-card-bg);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="md"] td {
+			display: grid;
+			grid-template-columns: minmax(5rem, 1fr) minmax(0, 2fr);
+			column-gap: calc(var(--spacing) * 3);
+			align-items: center;
+			padding: 0;
+			border-top: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="md"] td[data-degraded] {
+			display: block;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="md"]
+			.stuic-field-table-cell-label {
+			position: static;
+			width: auto;
+			height: auto;
+			margin: 0;
+			overflow: visible;
+			clip-path: none;
+			white-space: normal;
+			font-size: var(--text-xs);
+			font-weight: 500;
+			color: var(--stuic-field-table-header-text);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="md"]
+			.stuic-field-table-cell-error {
+			grid-column: 2;
+			margin-top: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="md"]
+			.stuic-field-table-actions {
+			order: -1;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			width: auto;
+			white-space: normal;
+			padding-bottom: calc(var(--spacing) * 1.5);
+			border-bottom: 1px solid var(--stuic-field-table-row-divider-color);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="md"]
+			.stuic-field-table-row-title {
+			display: inline;
+			font-size: var(--text-sm);
+			font-weight: 500;
+		}
+	}
+
+	@container stuic-field-table (width < 48rem) {
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"] thead {
+			display: none;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"] table,
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"] tbody,
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"] tr,
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"] td {
+			display: block;
+			min-width: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"] tbody {
+			display: flex;
+			flex-direction: column;
+			gap: var(--stuic-field-table-card-gap);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"] tr {
+			display: flex;
+			flex-direction: column;
+			gap: calc(var(--spacing) * 2);
+			padding: calc(var(--spacing) * 2.5);
+			border: 1px solid var(--stuic-field-table-border-color);
+			border-radius: var(--stuic-field-table-card-radius, var(--stuic-radius));
+			background: var(--stuic-field-table-card-bg);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"] td {
+			display: grid;
+			grid-template-columns: minmax(5rem, 1fr) minmax(0, 2fr);
+			column-gap: calc(var(--spacing) * 3);
+			align-items: center;
+			padding: 0;
+			border-top: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"] td[data-degraded] {
+			display: block;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"]
+			.stuic-field-table-cell-label {
+			position: static;
+			width: auto;
+			height: auto;
+			margin: 0;
+			overflow: visible;
+			clip-path: none;
+			white-space: normal;
+			font-size: var(--text-xs);
+			font-weight: 500;
+			color: var(--stuic-field-table-header-text);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"]
+			.stuic-field-table-cell-error {
+			grid-column: 2;
+			margin-top: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"]
+			.stuic-field-table-actions {
+			order: -1;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			width: auto;
+			white-space: normal;
+			padding-bottom: calc(var(--spacing) * 1.5);
+			border-bottom: 1px solid var(--stuic-field-table-row-divider-color);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="lg"]
+			.stuic-field-table-row-title {
+			display: inline;
+			font-size: var(--text-sm);
+			font-weight: 500;
+		}
+	}
+
+	@container stuic-field-table (width < 56rem) {
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"] thead {
+			display: none;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"] table,
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"] tbody,
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"] tr,
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"] td {
+			display: block;
+			min-width: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"] tbody {
+			display: flex;
+			flex-direction: column;
+			gap: var(--stuic-field-table-card-gap);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"] tr {
+			display: flex;
+			flex-direction: column;
+			gap: calc(var(--spacing) * 2);
+			padding: calc(var(--spacing) * 2.5);
+			border: 1px solid var(--stuic-field-table-border-color);
+			border-radius: var(--stuic-field-table-card-radius, var(--stuic-radius));
+			background: var(--stuic-field-table-card-bg);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"] td {
+			display: grid;
+			grid-template-columns: minmax(5rem, 1fr) minmax(0, 2fr);
+			column-gap: calc(var(--spacing) * 3);
+			align-items: center;
+			padding: 0;
+			border-top: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"] td[data-degraded] {
+			display: block;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"]
+			.stuic-field-table-cell-label {
+			position: static;
+			width: auto;
+			height: auto;
+			margin: 0;
+			overflow: visible;
+			clip-path: none;
+			white-space: normal;
+			font-size: var(--text-xs);
+			font-weight: 500;
+			color: var(--stuic-field-table-header-text);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"]
+			.stuic-field-table-cell-error {
+			grid-column: 2;
+			margin-top: 0;
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"]
+			.stuic-field-table-actions {
+			order: -1;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			width: auto;
+			white-space: normal;
+			padding-bottom: calc(var(--spacing) * 1.5);
+			border-bottom: 1px solid var(--stuic-field-table-row-divider-color);
+		}
+		.stuic-field-table[data-layout="auto"][data-table-from="xl"]
+			.stuic-field-table-row-title {
+			display: inline;
+			font-size: var(--text-sm);
+			font-weight: 500;
+		}
+	}
+}

package/dist/components/Input/index.d.ts

@@ -18,6 +18,10 @@ export { default as FieldTextarea, type Props as FieldTextareaProps, } from "./F
 export { default as FieldInputLocalized, type Props as FieldInputLocalizedProps, } from "./FieldInputLocalized.svelte";
 export { default as FieldKeyValues, type Props as FieldKeyValuesProps, type KeyValueEntry, } from "./FieldKeyValues.svelte";
 export { default as FieldObject, type Props as FieldObjectProps, } from "./FieldObject.svelte";
+export { default as FieldTable, type Props as FieldTableProps, type FieldTableColumn, type FieldTableCellType, type FieldTableCellContext, type FieldTableRow, } from "./FieldTable.svelte";
+export { createFieldTableT, FIELD_TABLE_MESSAGES_EN, type FieldTableMessageKey, type FieldTableMessages, } from "./field-table-i18n.js";
+export { FIELD_TABLE_MESSAGES_SK } from "./field-table-i18n-sk.js";
+export { parseCellNumber, formatCellNumber, type ParsedCellNumber, } from "./field-table-number.js";
 export { default as FieldPhoneNumber, type Props as FieldPhoneNumberProps, } from "./FieldPhoneNumber.svelte";
 export { default as FieldCountry, type Props as FieldCountryProps, } from "./FieldCountry.svelte";
 export { validatePhoneNumber } from "./phone-validation.js";