76d78e1925
css is now string | CSSStyleSheet. A sheet is adopted as-is: into its own
shadow root, an enclosing shadow root, or document.adoptedStyleSheets for
light DOM at the document level. Strings behave as before.
The examples import their styles with `with { type: 'css' }` and their
static templates with `with { type: 'text' }`. Safari doesn't support those
yet, so vite.config.ts rewrites them into modules Vite builds: a constructed
CSSStyleSheet, or the file's text. npm run examples now just runs vite,
with root set in the config.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
27 lines
961 B
CSS
27 lines
961 B
CSS
labeled-field {
|
|
display: grid;
|
|
gap: 0.35rem;
|
|
font: 0.9rem/1.3 system-ui, sans-serif;
|
|
}
|
|
labeled-field label { display: grid; gap: 0.35rem; }
|
|
labeled-field .field-label { font-weight: 600; color: var(--ink, #1d1d29); }
|
|
labeled-field[required] .field-label::after { content: ' *'; color: #e5484d; }
|
|
labeled-field input {
|
|
font: inherit;
|
|
padding: 0.6rem 0.75rem;
|
|
border: 1.5px solid var(--line, #d9d9e3);
|
|
border-radius: 10px;
|
|
background: var(--field, #fff);
|
|
color: inherit;
|
|
transition: border-color 150ms ease, box-shadow 150ms ease;
|
|
}
|
|
labeled-field input:focus {
|
|
outline: none;
|
|
border-color: #7c5cff;
|
|
box-shadow: 0 0 0 4px rgb(124 92 255 / 18%);
|
|
}
|
|
labeled-field .field-hint { color: var(--muted, #6b6b7b); min-height: 1.3em; }
|
|
labeled-field:state(invalid) input { border-color: #e5484d; }
|
|
labeled-field:state(invalid) input:focus { box-shadow: 0 0 0 4px rgb(229 72 77 / 18%); }
|
|
labeled-field:state(invalid) .field-hint { color: #e5484d; }
|