@byline/ui 2.5.2 → 2.6.0

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

@@ -1,321 +0,0 @@
-/**
- * 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);
-  }
-}