You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
222 lines
7.6 KiB
222 lines
7.6 KiB
[data-form] {
|
|
--_form-gap: var(--form-gap-md);
|
|
--_form-padding: 0;
|
|
--_form-border: transparent;
|
|
--_form-bg: transparent;
|
|
--_form-shadow: none;
|
|
--_form-action-height: var(--form-action-height-md);
|
|
--_form-action-padding-inline: var(--form-action-padding-inline-md);
|
|
--_form-action-font-size: var(--form-action-font-size-md);
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--_form-gap);
|
|
inline-size: 100%; /* literal: identity — a form IS its container's width */
|
|
min-inline-size: 0;
|
|
padding: var(--_form-padding);
|
|
border: var(--form-border-width) solid var(--_form-border);
|
|
border-radius: var(--form-radius);
|
|
background: var(--_form-bg);
|
|
box-shadow: var(--_form-shadow);
|
|
color: var(--form-fg);
|
|
font-family: var(--form-font-family);
|
|
}
|
|
|
|
[data-form][data-size='xs'] {
|
|
--_form-gap: var(--form-gap-xs);
|
|
--_form-action-height: var(--form-action-height-xs);
|
|
--_form-action-padding-inline: var(--form-action-padding-inline-xs);
|
|
--_form-action-font-size: var(--form-action-font-size-xs);
|
|
}
|
|
|
|
[data-form][data-size='sm'] {
|
|
--_form-gap: var(--form-gap-sm);
|
|
--_form-action-height: var(--form-action-height-sm);
|
|
--_form-action-padding-inline: var(--form-action-padding-inline-sm);
|
|
--_form-action-font-size: var(--form-action-font-size-sm);
|
|
}
|
|
|
|
[data-form][data-size='lg'] {
|
|
--_form-gap: var(--form-gap-lg);
|
|
--_form-action-height: var(--form-action-height-lg);
|
|
--_form-action-padding-inline: var(--form-action-padding-inline-lg);
|
|
--_form-action-font-size: var(--form-action-font-size-lg);
|
|
}
|
|
|
|
[data-form][data-size='xl'] {
|
|
--_form-gap: var(--form-gap-xl);
|
|
--_form-action-height: var(--form-action-height-xl);
|
|
--_form-action-padding-inline: var(--form-action-padding-inline-xl);
|
|
--_form-action-font-size: var(--form-action-font-size-xl);
|
|
}
|
|
|
|
[data-form][data-variant='panel'] {
|
|
--_form-padding: var(--form-panel-padding);
|
|
--_form-border: var(--form-panel-border);
|
|
--_form-bg: var(--form-panel-bg);
|
|
--_form-shadow: var(--form-panel-shadow);
|
|
}
|
|
|
|
[data-form][data-layout='grid'] {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--form-grid-min)), 1fr));
|
|
align-items: start;
|
|
column-gap: var(--form-grid-column-gap);
|
|
row-gap: var(--_form-gap);
|
|
}
|
|
|
|
[data-form][data-pending] {
|
|
cursor: progress;
|
|
}
|
|
|
|
/* Whole-form invalid signal: a thin top accent and the ErrorSummary
|
|
bordering match the risk tone. Individual fields keep their own
|
|
`[data-invalid]` styling via the Field recipe — the form-level
|
|
indicator is a low-emphasis affordance so the page-level "errors
|
|
present" state reads at a glance. */
|
|
[data-form][data-invalid] {
|
|
--_form-invalid-accent: var(--form-invalid-accent);
|
|
}
|
|
|
|
[data-form][data-invalid] [data-form-error-summary] {
|
|
border-color: var(--_form-invalid-accent);
|
|
}
|
|
|
|
/* The action chrome is the AutoFields array's, and ONLY its.
|
|
`form-auto-fields.svelte` renders `array-add` / `array-remove` as bare
|
|
`<button>`s composing nothing, so what follows is the only chrome those two
|
|
nodes have — the size axis reaches them by INHERITING `--_form-action-*`
|
|
from the provider above.
|
|
`Form.Submit` / `Form.Reset` are deliberately absent: they compose the
|
|
canonical `<Button>` through its `child` snippet, and
|
|
`docs/guides/component-guide.md:126-146` names `Form.Submit` when it states
|
|
consumer pattern rule 5 — the composer's recipe paints NO chrome on the
|
|
composed node. They used to ride in every rule of this block and never won
|
|
a pixel: `[data-button]` matches at the same specificity (0,1,0) and loads
|
|
later. Signed 2026-08-24; ceding measured at ZERO diffs on both nodes over
|
|
79,296 computed values across 16 scenarios. */
|
|
[data-form-auto-fields-array-add],
|
|
[data-form-auto-fields-array-remove] {
|
|
--_form-action-bg: var(--color-neutral-element);
|
|
--_form-action-bg-hover: var(--color-neutral-hover);
|
|
--_form-action-border: var(--color-neutral-border);
|
|
--_form-action-color: var(--color-neutral-text);
|
|
--_form-action-shadow: none;
|
|
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--form-action-gap);
|
|
min-block-size: var(--_form-action-height);
|
|
padding-inline: var(--_form-action-padding-inline);
|
|
border: var(--form-action-border-width) solid var(--_form-action-border);
|
|
border-radius: var(--form-action-radius);
|
|
background: var(--_form-action-bg);
|
|
box-shadow: var(--_form-action-shadow);
|
|
color: var(--_form-action-color);
|
|
font-family: var(--form-font-family);
|
|
font-size: var(--_form-action-font-size);
|
|
font-weight: var(--form-action-font-weight);
|
|
line-height: var(--form-action-line-height);
|
|
text-decoration: none;
|
|
transition:
|
|
background var(--form-transition-duration) var(--form-transition-ease),
|
|
border-color var(--form-transition-duration) var(--form-transition-ease),
|
|
box-shadow var(--form-transition-duration) var(--form-transition-ease),
|
|
color var(--form-transition-duration) var(--form-transition-ease);
|
|
}
|
|
|
|
/* The remove button is the quiet one of the pair. */
|
|
[data-form-auto-fields-array-remove] {
|
|
--_form-action-bg: transparent;
|
|
--_form-action-bg-hover: color-mix(in srgb, var(--color-neutral-track) 70%, transparent);
|
|
--_form-action-border: transparent;
|
|
--_form-action-color: var(--color-content-subtle);
|
|
}
|
|
|
|
[data-form-auto-fields-array-add]:not(:disabled):hover,
|
|
[data-form-auto-fields-array-remove]:not(:disabled):hover {
|
|
background: var(--_form-action-bg-hover);
|
|
}
|
|
|
|
[data-form-auto-fields-array-add]:focus-visible,
|
|
[data-form-auto-fields-array-remove]:focus-visible {
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
outline-offset: var(--focus-ring-offset);
|
|
}
|
|
|
|
[data-form-auto-fields-array-add]:disabled,
|
|
[data-form-auto-fields-array-remove]:disabled {
|
|
cursor: not-allowed;
|
|
opacity: var(--form-disabled-opacity);
|
|
}
|
|
|
|
[data-form-error-summary] {
|
|
padding: var(--form-error-summary-padding);
|
|
border: var(--form-error-summary-border-width) solid var(--form-error-summary-border);
|
|
border-radius: var(--form-error-summary-radius);
|
|
background: var(--form-error-summary-bg);
|
|
color: var(--form-error-summary-fg);
|
|
font-size: var(--form-error-summary-font-size);
|
|
line-height: var(--form-error-summary-line-height);
|
|
}
|
|
|
|
[data-form-error-summary][data-hidden],
|
|
[data-form-error-summary][hidden] {
|
|
display: none;
|
|
}
|
|
|
|
[data-form-error-summary] ul {
|
|
margin: 0;
|
|
padding-inline-start: var(--form-error-summary-list-indent);
|
|
}
|
|
|
|
[data-form-error-summary] a {
|
|
color: inherit;
|
|
text-decoration-color: var(--form-link-underline-fg);
|
|
text-underline-offset: var(--form-link-underline-offset);
|
|
}
|
|
|
|
[data-form-auto-fields-group],
|
|
[data-form-auto-fields-array],
|
|
[data-form-auto-fields-discriminated],
|
|
[data-form-auto-fields-field],
|
|
[data-form-auto-fields-placeholder] {
|
|
display: grid;
|
|
gap: var(--form-auto-fields-gap);
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
[data-form-auto-fields-array] {
|
|
padding: var(--form-auto-fields-array-padding);
|
|
border: var(--form-auto-fields-border-width) solid var(--form-auto-fields-border);
|
|
border-radius: var(--form-auto-fields-radius);
|
|
background: var(--form-auto-fields-array-bg);
|
|
}
|
|
|
|
[data-form-auto-fields-array-toolbar],
|
|
[data-form-auto-fields-item-toolbar] {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--form-action-gap);
|
|
}
|
|
|
|
[data-form-auto-fields-item] {
|
|
display: grid;
|
|
gap: var(--form-auto-fields-item-gap);
|
|
padding: var(--form-auto-fields-item-padding);
|
|
border-radius: var(--form-auto-fields-radius);
|
|
background: var(--form-auto-fields-item-bg);
|
|
}
|
|
|
|
[data-form-auto-fields-widget] {
|
|
min-block-size: var(--_form-action-height);
|
|
padding-inline: var(--form-widget-padding-inline);
|
|
border: var(--form-widget-border-width) solid var(--form-widget-border);
|
|
border-radius: var(--form-widget-radius);
|
|
background: var(--form-widget-bg);
|
|
color: var(--form-fg);
|
|
font: inherit;
|
|
}
|