declarative-forms 2.0.0 → 2.0.1

package/styles/theme.css

@@ -1,1293 +0,0 @@
-/*!
- * declarative-forms — modern theme
- *
- *   import 'declarative-forms/theme.css';   // INSTEAD OF styles.css
- *
- * A complete, standalone replacement for the default stylesheet. It renders the
- * same frozen DOM — every class name, id and structural hook is identical — so
- * existing overlay CSS keeps applying and nothing about the markup changes.
- *
- * Three rules were followed so this stays a safe swap:
- *
- *   1. Selectors mirror the default stylesheet's, at the same specificity.
- *      Overrides you wrote against the default theme therefore still win, with
- *      the same amount of force they needed before.
- *   2. Every visual value is a `--dl-*` custom property, declared at zero
- *      specificity via `:where()`, so setting a token anywhere beats it.
- *   3. Nothing here changes the DOM contract. See docs/dom-contract.md.
- *
- * Light and dark are chosen automatically from `prefers-color-scheme`. Force
- * one with `data-dl-theme="light"` or `data-dl-theme="dark"` on any ancestor
- * (usually <html>), which also works per-dialog.
- */
-
-/* ══════════════════════════════════════════════════════════ design tokens ══ */
-
-:where(:root),
-:where([data-dl-theme='light']) {
-  /* — type ————————————————————————————————————————————————— */
-  --dl-font-family:
-    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-    sans-serif;
-  --dl-font-size: 0.9375rem;
-  --dl-font-size-sm: 0.8125rem;
-  --dl-line-height: 1.5;
-
-  /* — neutrals ——————————————————————————————————————————————— */
-  --dl-surface: #ffffff;
-  --dl-surface-muted: #f6f7f9;
-  --dl-surface-sunken: #eef0f4;
-  --dl-surface-raised: #ffffff;
-
-  --dl-text-color: #1b1f27;
-  --dl-label-color: #39414f;
-  --dl-text-muted: #6b7484;
-
-  --dl-line-color: #e0e4ea;
-  --dl-line-strong: #cbd2dc;
-
-  /* — accent ————————————————————————————————————————————————— */
-  --dl-accent: #12968f;
-  --dl-accent-hover: #0e807a;
-  --dl-accent-contrast: #ffffff;
-  --dl-accent-soft: rgba(18, 150, 143, 0.1);
-  --dl-accent-ring: rgba(18, 150, 143, 0.28);
-
-  --dl-danger: #d1394b;
-  --dl-danger-soft: rgba(209, 57, 75, 0.1);
-
-  /* — overlay ———————————————————————————————————————————————— */
-  --dl-overlay: rgba(17, 22, 29, 0.42);
-  --dl-overlay-blur: 4px;
-
-  /* — shape —————————————————————————————————————————————————— */
-  --dl-radius-sm: 6px;
-  --dl-radius: 9px;
-  --dl-radius-lg: 14px;
-  --dl-radius-pill: 999px;
-
-  --dl-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
-  --dl-shadow-modal:
-    0 1px 3px rgba(16, 24, 40, 0.08), 0 12px 28px -6px rgba(16, 24, 40, 0.16),
-    0 32px 64px -12px rgba(16, 24, 40, 0.18);
-  --dl-shadow-popup:
-    0 4px 10px -2px rgba(16, 24, 40, 0.1), 0 16px 32px -8px rgba(16, 24, 40, 0.18);
-
-  /* — metrics ———————————————————————————————————————————————— */
-  --dl-gap: 1.125rem;
-  --dl-field-width: 100%;
-  --dl-modal-width: 30rem;
-  --dl-large-modal-width: 52rem;
-  --dl-modal-padding: 1.5rem;
-  --dl-stack-peek: 8px;
-  --dl-stack-inset: 12px;
-  --dl-control-padding-y: 0.55rem;
-  --dl-control-padding-x: 0.75rem;
-
-  --dl-transition: 140ms cubic-bezier(0.4, 0, 0.2, 1);
-
-  /* — feedback ——————————————————————————————————————————————— */
-  --dl-tooltip-background: #eef0f4;
-  --dl-tooltip-color: #5b6473;
-  --dl-tooltip-bubble-background: #22272f;
-  --dl-tooltip-bubble-color: #eceef2;
-
-  --dl-tooltip-success-background: #dcf5e7;
-  --dl-tooltip-success-color: #11794b;
-  --dl-tooltip-warning-background: #fdf0cd;
-  --dl-tooltip-warning-color: #7a5407;
-  --dl-tooltip-error-background: #fbe0e3;
-  --dl-tooltip-error-color: #96222f;
-
-  /* — combobox (also read by the CSS <dl-select> injects itself) ——— */
-  --dl-options-background: var(--dl-surface-raised);
-  --dl-options-text-color: var(--dl-text-color);
-  --dl-options-inactive-text-color: var(--dl-text-muted);
-  --dl-options-option-hover-color: var(--dl-accent-soft);
-  --dl-options-padding-top: 0.5rem;
-  --dl-options-padding-right: 0.75rem;
-  --dl-options-padding-bottom: 0.5rem;
-  --dl-options-padding-left: 0.75rem;
-  --dl-focused-line-color: var(--dl-accent);
-  --dl-drop-down-icon-margin-top: 7px;
-  --dl-select-loading-col1: #eef0f4;
-  --dl-select-loading-col2: #e2e6ec;
-}
-
-/* Automatic dark, unless something above has pinned the theme to light. */
-@media (prefers-color-scheme: dark) {
-  :where(:root:not([data-dl-theme='light'])) {
-    color-scheme: dark;
-
-    --dl-surface: #171a1f;
-    --dl-surface-muted: #1e222a;
-    --dl-surface-sunken: #262b34;
-    --dl-surface-raised: #1e222a;
-
-    --dl-text-color: #e7eaf0;
-    --dl-label-color: #c3cad5;
-    --dl-text-muted: #8d97a6;
-
-    --dl-line-color: #2c323c;
-    --dl-line-strong: #3b434f;
-
-    --dl-accent: #2fb7ae;
-    --dl-accent-hover: #46c9c0;
-    --dl-accent-contrast: #06231f;
-    --dl-accent-soft: rgba(47, 183, 174, 0.16);
-    --dl-accent-ring: rgba(47, 183, 174, 0.32);
-
-    --dl-danger: #f4707f;
-    --dl-danger-soft: rgba(244, 112, 127, 0.16);
-
-    --dl-overlay: rgba(6, 9, 13, 0.62);
-
-    --dl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
-    --dl-shadow-modal:
-      0 1px 3px rgba(0, 0, 0, 0.5), 0 12px 28px -6px rgba(0, 0, 0, 0.55),
-      0 32px 64px -12px rgba(0, 0, 0, 0.6);
-    --dl-shadow-popup:
-      0 4px 10px -2px rgba(0, 0, 0, 0.45), 0 16px 32px -8px rgba(0, 0, 0, 0.55);
-
-    --dl-tooltip-background: #2b313b;
-    --dl-tooltip-color: #aab3c0;
-    --dl-tooltip-bubble-background: #333a45;
-    --dl-tooltip-bubble-color: #e7eaf0;
-
-    --dl-tooltip-success-background: rgba(45, 190, 126, 0.18);
-    --dl-tooltip-success-color: #5fd9a0;
-    --dl-tooltip-warning-background: rgba(233, 176, 44, 0.18);
-    --dl-tooltip-warning-color: #edc65f;
-    --dl-tooltip-error-background: rgba(244, 112, 127, 0.18);
-    --dl-tooltip-error-color: #f9909b;
-
-    --dl-select-loading-col1: #1e222a;
-    --dl-select-loading-col2: #2a3039;
-  }
-}
-
-/* Explicitly pinned dark, regardless of the OS preference. */
-:where([data-dl-theme='dark']) {
-  color-scheme: dark;
-
-  --dl-surface: #171a1f;
-  --dl-surface-muted: #1e222a;
-  --dl-surface-sunken: #262b34;
-  --dl-surface-raised: #1e222a;
-
-  --dl-text-color: #e7eaf0;
-  --dl-label-color: #c3cad5;
-  --dl-text-muted: #8d97a6;
-
-  --dl-line-color: #2c323c;
-  --dl-line-strong: #3b434f;
-
-  --dl-accent: #2fb7ae;
-  --dl-accent-hover: #46c9c0;
-  --dl-accent-contrast: #06231f;
-  --dl-accent-soft: rgba(47, 183, 174, 0.16);
-  --dl-accent-ring: rgba(47, 183, 174, 0.32);
-
-  --dl-danger: #f4707f;
-  --dl-danger-soft: rgba(244, 112, 127, 0.16);
-
-  --dl-overlay: rgba(6, 9, 13, 0.62);
-
-  --dl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
-  --dl-shadow-modal:
-    0 1px 3px rgba(0, 0, 0, 0.5), 0 12px 28px -6px rgba(0, 0, 0, 0.55),
-    0 32px 64px -12px rgba(0, 0, 0, 0.6);
-  --dl-shadow-popup:
-    0 4px 10px -2px rgba(0, 0, 0, 0.45), 0 16px 32px -8px rgba(0, 0, 0, 0.55);
-
-  --dl-tooltip-background: #2b313b;
-  --dl-tooltip-color: #aab3c0;
-  --dl-tooltip-bubble-background: #333a45;
-  --dl-tooltip-bubble-color: #e7eaf0;
-
-  --dl-tooltip-success-background: rgba(45, 190, 126, 0.18);
-  --dl-tooltip-success-color: #5fd9a0;
-  --dl-tooltip-warning-background: rgba(233, 176, 44, 0.18);
-  --dl-tooltip-warning-color: #edc65f;
-  --dl-tooltip-error-background: rgba(244, 112, 127, 0.18);
-  --dl-tooltip-error-color: #f9909b;
-
-  --dl-select-loading-col1: #1e222a;
-  --dl-select-loading-col2: #2a3039;
-}
-
-/* ═══════════════════════════════════════════════════════════════ modal ══ */
-
-.dl-modal {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: block;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-  background: var(--dl-overlay);
-  -webkit-backdrop-filter: blur(var(--dl-overlay-blur));
-  backdrop-filter: blur(var(--dl-overlay-blur));
-  font-family: var(--dl-font-family);
-  animation: dl-fade var(--dl-transition) both;
-}
-
-.dl-modal.noModalDialog {
-  position: static;
-  inset: auto;
-  width: 100%;
-  height: auto;
-  overflow: visible;
-  background: transparent;
-  -webkit-backdrop-filter: none;
-  backdrop-filter: none;
-  animation: none;
-}
-
-.dl-modal-hidden {
-  display: none !important;
-}
-
-/* Stacked dialogs. The backdrop of a dialog opening over another one, and of
-   one revealed when the dialog above it closes, is continuous with the backdrop
-   that was already on screen — fading it in from nothing would flash the page
-   through the gap. A newly stacked dialog still rises; a restored one does not,
-   since it is not new. */
-.dl-modal.dl-modal-stacked,
-.dl-modal.dl-modal-restored,
-.dl-modal.dl-modal-restored .modal {
-  animation: none;
-}
-
-/* The dialogs underneath are hidden, so the depth of the stack is drawn as two
-   card edges peeking out above the dialog on top. They sit entirely above the
-   box — never over its content — and the second one only appears once there are
-   two dialogs below, which `--dl-stack-depth` (set by the library) reports. */
-.dl-modal.dl-modal-stacked .modal {
-  position: relative;
-}
-
-.dl-modal.dl-modal-stacked .modal::before,
-.dl-modal.dl-modal-stacked .modal::after {
-  content: '';
-  position: absolute;
-  height: var(--dl-stack-peek);
-  border: 1px solid var(--dl-line-strong);
-  border-bottom: none;
-  border-radius: var(--dl-radius-lg) var(--dl-radius-lg) 0 0;
-}
-
-.dl-modal.dl-modal-stacked .modal::before {
-  right: var(--dl-stack-inset);
-  bottom: 100%;
-  left: var(--dl-stack-inset);
-  background: var(--dl-surface-muted);
-}
-
-.dl-modal.dl-modal-stacked .modal::after {
-  right: calc(var(--dl-stack-inset) * 2);
-  bottom: calc(100% + var(--dl-stack-peek));
-  left: calc(var(--dl-stack-inset) * 2);
-  background: var(--dl-surface-sunken);
-  opacity: clamp(0, calc(var(--dl-stack-depth, 1) - 1), 1);
-}
-
-.dl-modal .modal {
-  display: block;
-  box-sizing: border-box;
-  width: var(--dl-modal-width);
-  max-width: calc(100vw - 2rem);
-  margin: 3rem auto;
-  padding: var(--dl-modal-padding);
-  border: 1px solid var(--dl-line-color);
-  border-radius: var(--dl-radius-lg);
-  background: var(--dl-surface);
-  box-shadow: var(--dl-shadow-modal);
-  animation: dl-rise 180ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
-}
-
-.dl-modal.noModalDialog .modal {
-  width: auto;
-  max-width: none;
-  margin: 0;
-  padding: 0;
-  border: none;
-  border-radius: 0;
-  background: transparent;
-  box-shadow: none;
-  animation: none;
-}
-
-.dl-modal .largeModal {
-  width: var(--dl-large-modal-width);
-}
-
-/* The default theme pins label and control widths inside a large modal; here
-   everything is fluid, so these only need to stop inheriting a fixed width. */
-.dl-modal .largeModal .dl-form label,
-.largeModal .dl-form form .render {
-  width: auto;
-  max-width: none;
-}
-
-@keyframes dl-fade {
-  from {
-    opacity: 0;
-  }
-}
-
-@keyframes dl-rise {
-  from {
-    opacity: 0;
-    transform: translateY(8px) scale(0.985);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .dl-modal,
-  .dl-modal .modal {
-    animation: none;
-  }
-}
-
-/* ── header ─────────────────────────────────────────────────────────────── */
-
-.dl-modal .up-bar {
-  display: flex;
-  justify-content: flex-end;
-  margin: 0 0 0.25rem;
-  min-height: 1.5rem;
-}
-
-.cancelBtn {
-  position: relative;
-  width: 1.75rem;
-  height: 1.75rem;
-  padding: 0;
-  border: none;
-  border-radius: var(--dl-radius-sm);
-  background: transparent;
-  color: var(--dl-text-muted);
-  cursor: pointer;
-  transition:
-    background var(--dl-transition),
-    color var(--dl-transition);
-}
-
-.cancelBtn:hover {
-  background: var(--dl-surface-sunken);
-  color: var(--dl-text-color);
-}
-
-.cancelBtn:focus-visible {
-  outline: 2px solid var(--dl-accent);
-  outline-offset: 2px;
-}
-
-/* The glyph is two bars; the element itself is not rotated, so the hit area
-   and the focus ring stay square. */
-.cancelBtn:before,
-.cancelBtn:after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0.875rem;
-  height: 1.5px;
-  border-radius: 1px;
-  background: currentColor;
-}
-
-.cancelBtn:before {
-  transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.cancelBtn:after {
-  transform: translate(-50%, -50%) rotate(-45deg);
-}
-
-/* ── tabs ───────────────────────────────────────────────────────────────── */
-
-.dl-modal .tabWrapper {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.125rem;
-  margin-bottom: 1.25rem;
-  padding: 0.25rem;
-  border-radius: var(--dl-radius);
-  background: var(--dl-surface-muted);
-  text-align: left;
-}
-
-.dl-modal .tabWrapper:empty {
-  display: none;
-}
-
-.dl-modal .dl-tab-btn {
-  flex: 1 1 auto;
-  padding: 0.4rem 0.75rem;
-  border: none;
-  border-radius: var(--dl-radius-sm);
-  background: transparent;
-  color: var(--dl-text-muted);
-  font-family: var(--dl-font-family);
-  font-size: var(--dl-font-size-sm);
-  font-weight: 500;
-  text-align: center;
-  white-space: nowrap;
-  cursor: pointer;
-  transition:
-    background var(--dl-transition),
-    color var(--dl-transition);
-}
-
-.dl-modal .dl-tab-btn:hover {
-  color: var(--dl-text-color);
-}
-
-.dl-modal .dl-tab-btn.active {
-  background: var(--dl-surface);
-  color: var(--dl-accent);
-  box-shadow: var(--dl-shadow-sm);
-  cursor: default;
-}
-
-/* Kept so the segmented look survives the default theme's first/last rules. */
-.dl-modal .dl-tab-btn:first-child,
-.dl-modal .dl-tab-btn:last-child {
-  border-radius: var(--dl-radius-sm);
-}
-
-/* ── footer ─────────────────────────────────────────────────────────────── */
-
-/*
- * `row-reverse` reproduces the default theme's `float: right`: the first button
- * declared is the rightmost one. Consumers rely on that order.
- */
-.dl-modal .low-bar {
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: flex-start;
-  gap: 0.5rem;
-  height: auto;
-  margin: 1.5rem calc(var(--dl-modal-padding) * -1) calc(var(--dl-modal-padding) * -1);
-  padding: 1rem var(--dl-modal-padding);
-  border-top: 1px solid var(--dl-line-color);
-  border-radius: 0 0 var(--dl-radius-lg) var(--dl-radius-lg);
-  background: var(--dl-surface-muted);
-}
-
-.dl-modal.noModalDialog .low-bar {
-  margin: 1.25rem 0 0;
-  padding: 0;
-  border-top: none;
-  background: transparent;
-}
-
-.dl-modal.dl-full-height .low-bar {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-}
-
-.dl-modal .btn {
-  flex: 0 0 auto;
-  padding: 0.5rem 1rem;
-  border: 1px solid var(--dl-accent);
-  border-radius: var(--dl-radius-sm);
-  background: var(--dl-accent);
-  color: var(--dl-accent-contrast);
-  font-family: var(--dl-font-family);
-  font-size: var(--dl-font-size-sm);
-  font-weight: 550;
-  line-height: 1.4;
-  text-align: center;
-  cursor: pointer;
-  transition:
-    background var(--dl-transition),
-    border-color var(--dl-transition),
-    box-shadow var(--dl-transition),
-    opacity var(--dl-transition);
-}
-
-.dl-modal .btn:hover {
-  border-color: var(--dl-accent-hover);
-  background: var(--dl-accent-hover);
-  box-shadow: none;
-}
-
-.dl-modal .btn:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px var(--dl-accent-ring);
-}
-
-/* A quieter companion for cancel and back. */
-.dl-modal .btn.secondary {
-  border-color: var(--dl-line-strong);
-  background: transparent;
-  color: var(--dl-label-color);
-}
-
-.dl-modal .btn.secondary:hover {
-  border-color: var(--dl-line-strong);
-  background: var(--dl-surface-sunken);
-  color: var(--dl-text-color);
-}
-
-.dl-modal .btn.disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.dl-modal .btn.disabled:hover {
-  border-color: var(--dl-accent);
-  background: var(--dl-accent);
-  box-shadow: none;
-}
-
-.dl-modal .btn.secondary.disabled:hover {
-  border-color: var(--dl-line-strong);
-  background: transparent;
-}
-
-.dl-modal .btn.invisible {
-  display: none;
-}
-
-.dl-modal .btn.loading-btn {
-  cursor: progress;
-}
-
-.dl-modal .btn.loading-btn::after {
-  content: '';
-  display: inline-block;
-  width: 0.75rem;
-  height: 0.75rem;
-  margin-left: 0.5rem;
-  margin-bottom: -1px;
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: 50% !important;
-  padding: 0 !important;
-  animation: loading-icon-spin 700ms linear infinite;
-}
-
-@keyframes loading-icon-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* ════════════════════════════════════════════════════════════════ form ══ */
-
-.dl-form {
-  font-family: var(--dl-font-family);
-  font-size: var(--dl-font-size);
-  line-height: var(--dl-line-height);
-  color: var(--dl-text-color);
-}
-
-.dl-form label {
-  display: block;
-  width: auto;
-  margin: 0 0 0.375rem;
-  color: var(--dl-label-color);
-  font-size: var(--dl-font-size-sm);
-  font-weight: 550;
-}
-
-.dl-form form > .dl-form-field-wrapper {
-  position: relative;
-  margin-bottom: var(--dl-gap);
-}
-
-.dl-form form > .dl-form-field-wrapper:last-child {
-  margin-bottom: 0;
-}
-
-.dl-form .withoutLabel {
-  position: relative;
-}
-
-.dl-form form > .dl-form-field-wrapper.notInTab,
-.dl-form form > .dl-form-field-wrapper.inactive,
-.dl-form-hidden-field {
-  display: none;
-}
-
-.dl-form form > .dl-form-field-wrapper.dl-select-wrapper {
-  margin-bottom: var(--dl-gap);
-}
-
-/* ── text inputs ────────────────────────────────────────────────────────── */
-
-.dl-form form > .dl-form-field-wrapper > input,
-.dl-form form > .dl-form-field-wrapper > textarea,
-.dl-form form > .dl-form-field-wrapper > div > input[type='file'] {
-  box-sizing: border-box;
-  width: var(--dl-field-width);
-  min-width: 0;
-  max-width: 100%;
-  padding: var(--dl-control-padding-y) var(--dl-control-padding-x);
-  border: 1px solid var(--dl-line-color);
-  border-radius: var(--dl-radius-sm);
-  background: var(--dl-surface-raised);
-  color: var(--dl-text-color);
-  font-family: var(--dl-font-family);
-  font-size: var(--dl-font-size);
-  font-weight: 400;
-  line-height: var(--dl-line-height);
-  outline: none;
-  transition:
-    border-color var(--dl-transition),
-    box-shadow var(--dl-transition);
-}
-
-.dl-form form > .dl-form-field-wrapper > input::placeholder,
-.dl-form form > .dl-form-field-wrapper > textarea::placeholder {
-  color: var(--dl-text-muted);
-}
-
-.dl-form form > .dl-form-field-wrapper > input:hover,
-.dl-form form > .dl-form-field-wrapper > textarea:hover {
-  border-color: var(--dl-line-strong);
-}
-
-.dl-form form > .dl-form-field-wrapper > input:focus,
-.dl-form form > .dl-form-field-wrapper > textarea:focus {
-  border-color: var(--dl-accent);
-  box-shadow: 0 0 0 3px var(--dl-accent-ring);
-}
-
-.dl-form form > .dl-form-field-wrapper > textarea {
-  min-height: 7rem;
-  resize: vertical;
-}
-
-.dl-form form > .dl-form-field-wrapper > input.dl-tooltip-inside {
-  width: var(--dl-field-width);
-  max-width: 100%;
-  min-width: 0;
-  padding-right: 2.5rem;
-}
-
-.dl-form form > p {
-  max-width: none;
-  min-width: 0;
-  margin: 0;
-  padding: 0;
-  color: var(--dl-text-muted);
-  font-family: var(--dl-font-family);
-  font-size: var(--dl-font-size-sm);
-  line-height: 1.6;
-}
-
-/* ── checkbox ───────────────────────────────────────────────────────────── */
-
-.dl-form form .check {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.625rem;
-  margin-top: 0;
-}
-
-/*
- * The default theme hides the input and paints a pseudo-element, which takes
- * the control out of the tab order and out of the accessibility tree. Styling
- * the input directly with `appearance: none` keeps it focusable and
- * announceable. See docs/accessibility.md.
- */
-.dl-form form .check input,
-.dl-form form input[type='checkbox'] {
-  flex: 0 0 auto;
-  appearance: none;
-  -webkit-appearance: none;
-  visibility: visible;
-  width: 1.125rem;
-  height: 1.125rem;
-  margin: 0.125rem 0 0;
-  border: 1px solid var(--dl-line-strong);
-  border-radius: var(--dl-radius-sm);
-  background: var(--dl-surface-raised);
-  cursor: pointer;
-  transition:
-    background var(--dl-transition),
-    border-color var(--dl-transition),
-    box-shadow var(--dl-transition);
-}
-
-.dl-form form input[type='checkbox']:hover {
-  border-color: var(--dl-accent);
-}
-
-.dl-form form input[type='checkbox']:focus-visible {
-  outline: none;
-  border-color: var(--dl-accent);
-  box-shadow: 0 0 0 3px var(--dl-accent-ring);
-}
-
-.dl-form form input[type='checkbox']:checked {
-  border-color: var(--dl-accent);
-  background-color: var(--dl-accent);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5'/%3E%3C/svg%3E");
-  background-size: 0.875rem;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-/* The pseudo-element box of the default theme must not reappear here. */
-.dl-form form input[type='checkbox']:before,
-.dl-form form input[type='checkbox']:checked:before {
-  content: none;
-}
-
-.dl-form form .check label {
-  display: inline;
-  margin: 0;
-  color: var(--dl-text-color);
-  font-size: var(--dl-font-size);
-  font-weight: 400;
-  cursor: pointer;
-}
-
-.dl-form form .check label a {
-  color: var(--dl-accent);
-  text-underline-offset: 2px;
-}
-
-/* ── cards ──────────────────────────────────────────────────────────────── */
-
-.dl-form form .detailed-options {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
-  gap: 0.625rem;
-  margin-top: 0;
-}
-
-.dl-form form .detailed-option {
-  width: auto;
-  margin: 0;
-  padding: 0.875rem;
-  border: 1px solid var(--dl-line-color);
-  border-radius: var(--dl-radius);
-  background: var(--dl-surface-raised);
-  color: var(--dl-text-color);
-  font-size: var(--dl-font-size-sm);
-  line-height: 1.5;
-  cursor: pointer;
-  transition:
-    border-color var(--dl-transition),
-    background var(--dl-transition),
-    box-shadow var(--dl-transition);
-}
-
-.dl-form form .detailed-option:hover {
-  border-color: var(--dl-line-strong);
-  box-shadow: var(--dl-shadow-sm);
-}
-
-.dl-form form .detailed-option.active {
-  border-color: var(--dl-accent);
-  background: var(--dl-accent-soft);
-  box-shadow: 0 0 0 1px var(--dl-accent) inset;
-}
-
-/* ── custom render + arrays ─────────────────────────────────────────────── */
-
-.dl-form form .render,
-.dl-form form .array-of {
-  width: auto;
-  min-width: 0;
-  max-width: none;
-  padding: 0;
-  font-family: var(--dl-font-family);
-  font-size: var(--dl-font-size);
-  font-weight: 400;
-  text-align: left;
-}
-
-.dl-form-array-suggested-container {
-  display: grid;
-  gap: 0.375rem;
-  margin-bottom: 0.625rem;
-}
-
-.dl-form-array-of-suggestion {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.625rem;
-  min-height: 0;
-  margin-top: 0 !important;
-  padding: 0.625rem 0.75rem;
-  border: 1px dashed var(--dl-line-strong);
-  border-radius: var(--dl-radius-sm);
-  background: transparent;
-  text-align: left;
-}
-
-.dl-form-array-of-suggestion label {
-  margin: 0;
-  color: var(--dl-text-muted);
-  font-size: var(--dl-font-size-sm);
-  font-weight: 400;
-  text-align: left;
-}
-
-.dl-form-array-of-entry {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  min-height: 0;
-  margin-top: 0;
-  margin-bottom: 0.375rem;
-  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
-  border: 1px solid var(--dl-line-color);
-  border-radius: var(--dl-radius-sm);
-  background: var(--dl-surface-muted);
-  text-align: left;
-}
-
-.dl-form-array-of-entry span {
-  flex: 1 1 auto;
-  width: auto;
-  display: block;
-  overflow: hidden;
-  color: var(--dl-text-color);
-  font-size: var(--dl-font-size-sm);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dl-form-array-of-entry button {
-  flex: 0 0 auto;
-  float: none;
-  margin: 0;
-  padding: 0.25rem 0.5rem;
-  border: 1px solid transparent;
-  border-radius: var(--dl-radius-sm);
-  background: transparent;
-  color: var(--dl-danger);
-  font-family: var(--dl-font-family);
-  font-size: var(--dl-font-size-sm);
-  cursor: pointer;
-  transition:
-    background var(--dl-transition),
-    border-color var(--dl-transition);
-}
-
-.dl-form-array-of-entry button:hover {
-  background: var(--dl-danger-soft);
-}
-
-.dl-form-array-of-entry button.edit-array-of-btn {
-  margin-left: 0;
-  border-color: transparent;
-  color: var(--dl-accent);
-}
-
-.dl-form-array-of-entry button.edit-array-of-btn:hover {
-  background: var(--dl-accent-soft);
-}
-
-.dl-form-array-of-entry button:focus-visible {
-  outline: none;
-  border-color: currentColor;
-  box-shadow: 0 0 0 3px var(--dl-accent-ring);
-}
-
-.dl-form-array-of-add-entry {
-  float: none;
-  width: 100%;
-  margin-top: 0.5rem;
-  padding: 0.625rem;
-  border: 1px dashed var(--dl-line-strong);
-  border-radius: var(--dl-radius-sm);
-  background: transparent;
-  color: var(--dl-accent);
-  font-family: var(--dl-font-family);
-  font-size: var(--dl-font-size-sm);
-  font-weight: 550;
-  outline: none;
-  cursor: pointer;
-  transition:
-    background var(--dl-transition),
-    border-color var(--dl-transition);
-}
-
-.dl-form-array-of-add-entry:hover {
-  border-color: var(--dl-accent);
-  background: var(--dl-accent-soft);
-}
-
-.dl-form-array-of-add-entry:focus-visible {
-  border-color: var(--dl-accent);
-  box-shadow: 0 0 0 3px var(--dl-accent-ring);
-}
-
-/* ── file ───────────────────────────────────────────────────────────────── */
-
-.dl-form form > .dl-form-field-wrapper .file-field {
-  padding: 0.75rem;
-  border: 1px dashed var(--dl-line-strong);
-  border-radius: var(--dl-radius);
-  background: var(--dl-surface-muted);
-}
-
-.dl-form form > .dl-form-field-wrapper > div > input[type='file'] {
-  border: none;
-  background: transparent;
-  padding: 0;
-  font-size: var(--dl-font-size-sm);
-  color: var(--dl-text-muted);
-}
-
-.dl-form form > .dl-form-field-wrapper .file-field .file-preview {
-  height: auto;
-  margin: 0 0 0.625rem;
-}
-
-.dl-form form > .dl-form-field-wrapper .file-field .file-preview.empty {
-  height: 0;
-  margin: 0;
-}
-
-.dl-form form > .dl-form-field-wrapper .file-field .file-preview.loading {
-  display: inline-block;
-  width: 1rem;
-  height: 1rem;
-  margin: 0 0 0.625rem;
-  padding: 0 !important;
-  border: 2px solid var(--dl-line-strong);
-  border-top-color: var(--dl-accent);
-  border-radius: 50% !important;
-  animation: loading-icon-spin 700ms linear infinite;
-}
-
-.file-selection-container {
-  position: relative;
-  display: inline-flex;
-}
-
-.file-selection-container img {
-  max-height: 6rem;
-  border-radius: var(--dl-radius-sm);
-}
-
-.file-selection-delete-btn {
-  position: absolute;
-  top: -0.4rem;
-  right: -0.4rem;
-  display: grid;
-  place-items: center;
-  width: 1.375rem;
-  height: 1.375rem;
-  padding: 0;
-  border: none;
-  border-radius: var(--dl-radius-pill);
-  background: var(--dl-danger);
-  box-shadow: var(--dl-shadow-sm);
-  cursor: pointer;
-}
-
-.file-selection-delete-btn-icon {
-  width: 0.625rem;
-  height: 0.625rem;
-  background: #fff;
-  clip-path: polygon(
-    20% 0%,
-    0% 20%,
-    30% 50%,
-    0% 80%,
-    20% 100%,
-    50% 70%,
-    80% 100%,
-    100% 80%,
-    70% 50%,
-    100% 20%,
-    80% 0%,
-    50% 30%
-  );
-}
-
-/* ── multi-select tags ──────────────────────────────────────────────────── */
-
-.multiselect-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  margin: 0.125rem;
-  padding: 0.125rem 0.25rem 0.125rem 0.5rem;
-  border-radius: var(--dl-radius-pill);
-  background: var(--dl-accent-soft);
-  color: var(--dl-text-color);
-  font-size: var(--dl-font-size-sm);
-}
-
-.multiselect-tag:last-child {
-  margin-bottom: 0.125rem;
-}
-
-/* The "muliselect" spelling is a frozen typo from v1. */
-.dl-muliselect-selected-remove-container {
-  display: inline-flex;
-  margin: 0;
-}
-
-.dl-muliselect-selected-remove {
-  position: relative;
-  display: grid;
-  place-items: center;
-  width: 1rem;
-  height: 1rem;
-  margin: 0;
-  border-radius: var(--dl-radius-pill);
-  opacity: 0.55;
-  transform: none;
-  cursor: pointer;
-  transition:
-    opacity var(--dl-transition),
-    background var(--dl-transition);
-}
-
-.dl-muliselect-selected-remove:hover {
-  background: var(--dl-accent-soft);
-  opacity: 1;
-}
-
-.dl-muliselect-selected-remove:before,
-.dl-muliselect-selected-remove:after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0.5rem;
-  height: 1.5px;
-  margin: 0;
-  border-radius: 1px;
-  background: currentColor;
-}
-
-.dl-muliselect-selected-remove:before {
-  transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.dl-muliselect-selected-remove:after {
-  transform: translate(-50%, -50%) rotate(-45deg);
-}
-
-/* ── tooltips ───────────────────────────────────────────────────────────── */
-
-.dl-form .dl-tooltip {
-  display: inline-grid;
-  place-items: center;
-  float: right;
-  width: 1.125rem;
-  height: 1.125rem;
-  margin: 0;
-  padding: 0;
-  border-radius: var(--dl-radius-pill);
-  background: var(--dl-tooltip-background);
-  color: var(--dl-tooltip-color);
-  font-size: 0.6875rem;
-  font-weight: 600;
-  line-height: 1;
-  cursor: help;
-}
-
-.dl-tooltip-in-input {
-  position: absolute;
-  right: 0.625rem;
-  bottom: 0.625rem;
-  float: none;
-}
-
-.tooltip-success {
-  padding: 0 !important;
-  background-color: var(--dl-tooltip-success-background) !important;
-  color: var(--dl-tooltip-success-color) !important;
-}
-
-.tooltip-warning {
-  padding: 0 !important;
-  background-color: var(--dl-tooltip-warning-background) !important;
-  color: var(--dl-tooltip-warning-color) !important;
-}
-
-.tooltip-error {
-  padding: 0 !important;
-  background-color: var(--dl-tooltip-error-background) !important;
-  color: var(--dl-tooltip-error-color) !important;
-}
-
-.tooltip-loading {
-  width: 1rem;
-  height: 1rem;
-  padding: 0 !important;
-  border: 2px solid var(--dl-line-strong);
-  border-top-color: var(--dl-accent);
-  border-radius: 50% !important;
-  background: transparent;
-  animation: loading-icon-spin 700ms linear infinite;
-}
-
-.dl-tooltip-bubble {
-  position: absolute;
-  z-index: 1100;
-  max-width: min(20rem, calc(100vw - 2rem));
-  padding: 0.4rem 0.625rem;
-  border-radius: var(--dl-radius-sm);
-  background: var(--dl-tooltip-bubble-background);
-  color: var(--dl-tooltip-bubble-color);
-  font-family: var(--dl-font-family);
-  font-size: var(--dl-font-size-sm);
-  font-weight: 400;
-  line-height: 1.45;
-  box-shadow: var(--dl-shadow-popup);
-  pointer-events: none;
-}
-
-/* ══════════════════════════════════════════════════════════════ layout ══ */
-
-.left-side {
-  float: left;
-}
-
-.right-side {
-  margin-left: 173px;
-}
-
-.right-side input,
-.dl-field-two-third input {
-  margin-left: 0;
-  padding-top: var(--dl-control-padding-y) !important;
-}
-
-/* ════════════════════════════════════════════════════════════ combobox ══ */
-
-/*
- * `<dl-select>` injects its own structural CSS at runtime, which reads the
- * `--dl-*` tokens above — colours therefore need no rules here.
- *
- * The few geometry values it hardcodes are re-stated below. The doubled class
- * (`.a.a`) raises specificity just enough to win regardless of which
- * stylesheet the browser happens to see last, since the injected block is
- * added to <head> the first time a combobox connects.
- */
-
-.dl-form dl-select,
-.dl-modal dl-select {
-  --dl-select-input-width: 100%;
-}
-
-.dl-form dl-select .input-wrapper,
-.dl-modal dl-select .input-wrapper {
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  width: 100%;
-  border-width: 1px;
-  border-radius: var(--dl-radius-sm);
-  background: var(--dl-surface-raised);
-  transition:
-    border-color var(--dl-transition),
-    box-shadow var(--dl-transition);
-}
-
-.dl-form dl-select .selected-container,
-.dl-modal dl-select .selected-container {
-  display: contents;
-}
-
-.dl-form dl-select.dl-focused .input-wrapper,
-.dl-modal dl-select.dl-focused .input-wrapper {
-  border-color: var(--dl-accent);
-  box-shadow: 0 0 0 3px var(--dl-accent-ring);
-}
-
-.dl-form dl-select .input-wrapper input,
-.dl-modal dl-select .input-wrapper input {
-  flex: 1 1 auto;
-  float: none;
-  box-sizing: border-box;
-  width: auto;
-  min-width: 4rem;
-  margin: 0;
-  padding: var(--dl-control-padding-y) var(--dl-control-padding-x);
-  font-size: var(--dl-font-size);
-  font-weight: 400;
-}
-
-.dl-form dl-select .input-wrapper svg,
-.dl-modal dl-select .input-wrapper svg {
-  flex: 0 0 auto;
-  float: none;
-  margin: 0 0.5rem 0 0;
-  padding: 0;
-  border-left: none !important;
-  fill: var(--dl-text-muted);
-}
-
-.dl-form dl-select.dl-focused .input-wrapper svg,
-.dl-modal dl-select.dl-focused .input-wrapper svg {
-  border-left: none !important;
-  fill: var(--dl-accent);
-}
-
-.dl-form dl-select.dl-select-loading .input-wrapper,
-.dl-modal dl-select.dl-select-loading .input-wrapper {
-  width: 100%;
-  border-radius: var(--dl-radius-sm);
-}
-
-/* The popup is portalled to <body>, so it cannot be scoped to `.dl-form`. */
-.options-wrapper.options-wrapper {
-  box-sizing: border-box;
-  /*
-   * It is a sibling of `.dl-modal`, which this theme raises to z-index 1000 —
-   * the component's own `z-index: 100` would leave the option list behind the
-   * backdrop. The default stylesheet gives the dialog no z-index at all, so it
-   * never had this problem.
-   */
-  z-index: 1100;
-  padding: 0.25rem;
-  border: 1px solid var(--dl-line-color);
-  border-radius: var(--dl-radius);
-  box-shadow: var(--dl-shadow-popup);
-  max-height: 16rem;
-}
-
-.options-wrapper.options-wrapper dl-option {
-  border: none;
-  border-radius: var(--dl-radius-sm);
-  font-size: var(--dl-font-size-sm);
-}
-
-.options-wrapper.options-wrapper dl-option:hover,
-.options-wrapper.options-wrapper dl-option.dl-focused {
-  color: var(--dl-accent);
-}
-
-.options-wrapper.options-wrapper dl-option[selected='true'] {
-  opacity: 0.45;
-}
-
-.options-wrapper.options-wrapper .noMatchesHint {
-  border: none;
-  padding: 0.625rem 0.75rem;
-  color: var(--dl-text-muted);
-  font-size: var(--dl-font-size-sm);
-}
-
-.dl-form dl-select .dl-option-tag,
-.options-wrapper.options-wrapper .dl-option-tag {
-  padding: 0.05rem 0.35rem;
-  border: 1px solid var(--dl-line-strong);
-  border-radius: var(--dl-radius-pill);
-  color: var(--dl-text-muted);
-  font-family: var(--dl-font-family);
-  font-size: 0.6875rem;
-  margin-top: 0;
-}