design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dees-form): add layout styles to dees-form and standardize demo input grouping

Browse Source
This commit is contained in:
Jürgen Kunz
2026-02-17 17:34:53 +00:00
parent ecd35683e6
commit 2abf7e356d
11 changed files with 350 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
ts_web/elements/00group-input/dees-input-base/dees-input-base.ts
View File

@@ -54,37 +54,20 @@ export abstract class DeesInputBase<T = any> extends DeesElement {
/* CSS Variables for consistent spacing */
:host {
--dees-input-spacing-unit: 8px;
--dees-input-vertical-gap: calc(var(--dees-input-spacing-unit) * 2); /* 16px */
--dees-input-horizontal-gap: calc(var(--dees-input-spacing-unit) * 2); /* 16px */
--dees-input-label-gap: var(--dees-input-spacing-unit); /* 8px */
}
/* Default vertical stacking mode (for forms) */
/* Default block display with no margins - spacing is container-driven */
:host {
display: block;
margin: 0;
margin-bottom: var(--dees-input-vertical-gap);
}
/* Last child in container should have no bottom margin */
:host(:last-child) {
margin-bottom: 0;
}
/* Horizontal layout mode - activated by attribute */
:host([layout-mode="horizontal"]) {
display: inline-block;
margin: 0;
margin-right: var(--dees-input-horizontal-gap);
margin-bottom: 0;
}
:host([layout-mode="horizontal"]:last-child) {
margin-right: 0;
}
/* Auto mode - inherit from parent dees-form if present */
/* Label position variations */
:host([label-position="left"]) .input-wrapper {
display: grid;