@byline/admin 2.5.1 → 2.6.0

package/src/forms/form-renderer.module.css

@@ -0,0 +1,321 @@
+/**
+ * FormRenderer — primary admin form layout/orchestrator.
+ *
+ * Override handles (parent-by-section):
+ *
+ *   .byline-form                        — root <form>
+ *   .byline-form-heading-row            — heading + headerSlot row
+ *   .byline-form-heading                — h1 heading
+ *   .byline-form-status-bar             — sticky status + actions container
+ *   .byline-form-status                 — status display group
+ *   .byline-form-status-meta            — flex row of status / updated / created
+ *   .byline-form-status-cell            — individual status / updated / created
+ *   .byline-form-status-muted           — muted label text
+ *   .byline-form-status-trunc           — truncate ellipsis
+ *   .byline-form-status-published       — "a published version is live" notice
+ *   .byline-form-status-unpublish       — Unpublish text-link button
+ *
+ *   .byline-form-actions                — flex container for cancel/save/status/menu
+ *   .byline-form-actions-button         — min-sized Cancel / Save buttons
+ *   .byline-form-actions-status-wrap    — relative positioned wrapper around the ComboButton
+ *   .byline-form-actions-combo-button   — ComboButton's main button minimums
+ *   .byline-form-actions-combo-trigger  — ComboButton's trigger button minimums
+ *
+ *   .byline-form-layout                 — main + sidebar grid wrapper
+ *   .byline-form-content                — main column
+ *   .byline-form-sidebar                — right column
+ *
+ *   .byline-form-tabset                 — vertical stack wrapping a tab set
+ *   .byline-form-tabset-tabs            — Tabs.className overrides for tabset placement
+ *   .byline-form-tabset-fields          — vertical stack of tab body fields
+ *
+ *   .byline-form-guard-modal-head       — leave-without-saving modal header
+ *   .byline-form-guard-modal-title      — guard modal title
+ *   .byline-form-guard-modal-text       — guard modal body paragraph
+ */
+
+.form,
+:global(.byline-form) {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.heading-row,
+:global(.byline-form-heading-row) {
+  display: grid;
+  grid-template-columns: 1fr;
+  align-items: start;
+  gap: 0.25rem var(--spacing-16);
+  margin-bottom: var(--spacing-8);
+}
+
+@media (min-width: 40rem) {
+  .heading-row,
+  :global(.byline-form-heading-row) {
+    grid-template-columns: 1fr auto;
+  }
+}
+
+.heading,
+:global(.byline-form-heading) {
+  margin-bottom: 0;
+  font-size: 1.75rem;
+}
+
+.status-bar,
+:global(.byline-form-status-bar) {
+  position: sticky;
+  top: 45px;
+  z-index: 20;
+  display: grid;
+  grid-template-columns: 1fr;
+  align-items: start;
+  gap: 0.25rem var(--spacing-16);
+  padding: var(--spacing-8);
+  margin-bottom: 0.25rem;
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+  border-radius: var(--border-radius-sm);
+  background-color: var(--canvas-25);
+}
+
+@media (min-width: 40rem) {
+  .status-bar,
+  :global(.byline-form-status-bar) {
+    grid-template-columns: 1fr auto;
+  }
+}
+
+@media (min-width: 66rem) {
+  .status-bar,
+  :global(.byline-form-status-bar) {
+    margin-bottom: 0;
+  }
+}
+
+.status,
+:global(.byline-form-status) {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.status-meta,
+:global(.byline-form-status-meta) {
+  display: flex;
+  flex-direction: column;
+  font-size: 0.8rem;
+  line-height: 1.25;
+}
+
+@media (min-width: 48rem) {
+  .status-meta,
+  :global(.byline-form-status-meta) {
+    margin-bottom: 0.25rem;
+    line-height: 0.75rem;
+  }
+}
+
+@media (min-width: 66rem) {
+  .status-meta,
+  :global(.byline-form-status-meta) {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+@media (min-width: 40rem) {
+  .status-meta,
+  :global(.byline-form-status-meta) {
+    gap: var(--spacing-8);
+  }
+}
+
+.status-cell,
+:global(.byline-form-status-cell) {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.status-muted,
+:global(.byline-form-status-muted) {
+  flex-shrink: 0;
+  color: var(--gray-500);
+}
+
+.status-trunc,
+:global(.byline-form-status-trunc) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.status-published,
+:global(.byline-form-status-published) {
+  font-size: 0.8rem;
+  display: inline;
+  line-height: 1rem;
+}
+
+@media (min-width: 48rem) {
+  .status-published,
+  :global(.byline-form-status-published) {
+    line-height: 0.875rem;
+  }
+}
+
+.status-unpublish,
+:global(.byline-form-status-unpublish) {
+  background: none;
+  border: none;
+  padding: 0;
+  color: inherit;
+  font-size: 0.8rem;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.actions,
+:global(.byline-form-actions) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+
+.actions-button,
+:global(.byline-form-actions-button) {
+  min-width: 70px;
+  min-height: 28px;
+}
+
+.actions-status-wrap,
+:global(.byline-form-actions-status-wrap) {
+  position: relative;
+  z-index: 10;
+}
+
+.actions-combo-button,
+:global(.byline-form-actions-combo-button) {
+  min-width: 100px;
+  min-height: 28px;
+}
+
+.actions-combo-trigger,
+:global(.byline-form-actions-combo-trigger) {
+  min-height: 28px;
+}
+
+.layout,
+:global(.byline-form-layout) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-12);
+  padding-top: var(--spacing-32);
+}
+
+@media (min-width: 60rem) {
+  .layout,
+  :global(.byline-form-layout) {
+    gap: var(--spacing-32);
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 0.4fr;
+    grid-column-gap: 36px;
+    align-items: start;
+  }
+}
+
+.content,
+:global(.byline-form-content) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-20);
+  max-width: 100%;
+  margin-bottom: 2.75rem;
+}
+
+@media (min-width: 60rem) {
+  .content,
+  :global(.byline-form-content) {
+    margin-bottom: 3.75rem;
+  }
+}
+
+.sidebar,
+:global(.byline-form-sidebar) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-20);
+  margin-top: 0;
+  background-color: oklch(from var(--canvas-50) l c h / 0.2);
+  max-width: 100%;
+  margin-bottom: 4rem;
+}
+
+@media (min-width: 60rem) {
+  .sidebar,
+  :global(.byline-form-sidebar) {
+    margin-bottom: 0;
+    padding-right: 12px;
+    padding-top: 0.25rem;
+    padding-left: var(--spacing-16);
+    border-left: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+    position: sticky;
+    top: 95px;
+  }
+}
+
+.tabset,
+:global(.byline-form-tabset) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-20);
+}
+
+.tabset-tabs,
+:global(.byline-form-tabset-tabs) {
+  margin-top: -1rem;
+  margin-bottom: 0;
+}
+
+.tabset-fields,
+:global(.byline-form-tabset-fields) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-20);
+}
+
+.guard-modal-head,
+:global(.byline-form-guard-modal-head) {
+  padding-top: 1rem;
+  margin-bottom: var(--spacing-8);
+}
+
+.guard-modal-title,
+:global(.byline-form-guard-modal-title) {
+  margin: 0 0 var(--spacing-8) 0;
+  font-size: var(--font-size-2xl);
+}
+
+.guard-modal-text,
+:global(.byline-form-guard-modal-text) {
+  font-size: var(--font-size-sm);
+}
+
+/* ─── Dark theme variants ───────────────────────────────────── */
+
+:is([data-theme="dark"], :global(.dark)) {
+  .status-bar,
+  :global(.byline-form-status-bar) {
+    background-color: var(--canvas-800);
+    border: var(--border-width-thin) var(--border-style-solid) var(--gray-700);
+  }
+
+  .sidebar,
+  :global(.byline-form-sidebar) {
+    border-left-color: var(--gray-800);
+    background-color: var(--canvas-900);
+  }
+}