@pantheon-systems/puck-css 0.9.0 → 0.10.0

package/src/styles.css

@@ -11,20 +11,6 @@
  * Styles for version comparison and other UI components.
  */
 
-/* ============================================
-   Plugin Rail Toggle
-   ============================================ */
-
-/* Hide the plugin rail (left navigation with Blocks/Outline/History/etc.) */
-.p1-hide-plugin-rail [class*='_PuckLayout-nav_'] {
-  display: none;
-}
-
-/* Reclaim the space - set the side nav width to 0 so grid collapses that column */
-.p1-hide-plugin-rail [class*='_PuckLayout-inner_'] {
-  --puck-side-nav-width: 0;
-}
-
 /* ============================================
    Sidebar Background Matching
    ============================================ */
@@ -206,6 +192,27 @@
   font-weight: 600;
 }
 
+.p1-inspector-template-badge {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  margin-top: 8px;
+  border-top: 1px solid var(--pds-color-border-default, oklch(0.9401 0 0));
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.p1-inspector-template-badge__label {
+  color: var(--pds-color-fg-subtle, oklch(0.55 0 0));
+  font-weight: 500;
+}
+
+.p1-inspector-template-badge__name {
+  color: var(--pds-color-fg-default, var(--pds-color-text-primary, var(--puck-css-text)));
+  font-weight: 600;
+}
+
 /* Strip container: min-height bypasses ancestor height constraints;
    overflow:hidden on _Sidebar--right_ clips it to the correct sidebar height. */
 .p1-inspector-reopen-strip {
@@ -962,133 +969,6 @@
   background: var(--puck-css-diff-reordered);
 }
 
-/* ============================================
-   HistoricalVersionBanner
-   ============================================ */
-.historical-version-banner {
-  display: flex;
-  align-items: center;
-  gap: var(--pds-spacing-xs);
-  padding: var(--pds-spacing-xs) var(--pds-spacing-l);
-  background: var(--pds-color-bg-default-secondary, #f9fafb);
-  border-top: 2px solid var(--pds-color-interactive-link-default, #3A5DFB);
-  border-bottom: var(--pds-border-width-default, 1px) solid var(--pds-color-border-secondary, #ececf0);
-  color: var(--pds-color-fg-default, #171717);
-  font-family: var(--pds-typography-ff-default, 'Inter', system-ui, sans-serif);
-  min-height: var(--pds-spacing-button-height-m);
-  flex-wrap: wrap;
-}
-
-.historical-version-banner__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--pds-color-interactive-link-default, #3A5DFB);
-  flex: none;
-}
-
-.historical-version-banner__content {
-  display: flex;
-  align-items: center;
-  gap: var(--pds-spacing-3xs);
-}
-
-.historical-version-banner__text {
-  font: 500 var(--pds-typography-size-m) var(--pds-typography-ff-default, 'Inter', system-ui, sans-serif);
-  color: var(--pds-color-fg-default, #171717);
-}
-
-.historical-version-banner__text strong {
-  font: 700 var(--pds-typography-size-m) var(--pds-typography-ff-compact, 'Inter Tight', 'Inter', system-ui, sans-serif);
-}
-
-.historical-version-banner__date {
-  font: 500 var(--pds-typography-size-m) var(--pds-typography-ff-default, 'Inter', system-ui, sans-serif);
-  color: var(--pds-color-fg-default, #171717);
-}
-
-.historical-version-banner__actions {
-  display: flex;
-  align-items: center;
-  gap: var(--pds-spacing-2xs);
-  margin-left: auto;
-  flex: none;
-}
-
-.historical-version-banner__exit-btn {
-  /* Reset browser button defaults without wiping font (all:unset kills font too) */
-  appearance: none;
-  -webkit-appearance: none;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: var(--pds-border-width-default, 1px) solid var(--pds-color-border-default, #d4d4d4);
-  background: var(--pds-color-bg-surface, white);
-  border-radius: 9px;
-  padding: 9px 20px;
-  font: 600 var(--pds-typography-size-m) var(--pds-typography-ff-compact, 'Inter Tight', 'Inter', system-ui, sans-serif);
-  color: var(--pds-color-fg-default, #171717);
-  cursor: pointer;
-  white-space: nowrap;
-  transition: var(--pds-animation-transition-button);
-  line-height: 1;
-}
-
-.historical-version-banner__exit-btn:hover:not(:disabled) {
-  background: var(--pds-color-interactive-background-hover, #f5f5f5);
-}
-
-.historical-version-banner__exit-btn:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-.historical-version-banner__revert-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--pds-spacing-button-gap-inline-m);
-  border: none;
-  border-radius: var(--pds-border-radius-button);
-  background: var(--pds-color-fg-default, #171717);
-  color: white;
-  font: 700 var(--pds-typography-size-m) var(--pds-typography-ff-compact, 'Inter Tight', 'Inter', system-ui, sans-serif);
-  padding: 11px 18px;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: var(--pds-animation-transition-button);
-  line-height: 1;
-}
-
-.historical-version-banner__revert-btn:hover:not(:disabled) {
-  filter: brightness(1.15);
-}
-
-.historical-version-banner__revert-btn:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-
-.historical-version-banner__error {
-  width: 100%;
-  margin: 4px 0 2px;
-  padding: 0;
-  font-size: var(--pds-typography-size-s, 0.875rem);
-  color: var(--pds-color-status-error-icon, #c0392b);
-}
-
-.historical-version-banner__spinner {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: css-plugin-version-spin 0.6s linear infinite;
-  flex: none;
-}
-
 /* ============================================
    CSS Plugin Panel
    ============================================ */
@@ -1476,35 +1356,6 @@
   color: var(--pds-color-foreground-default);
 }
 
-/* Banner steppers */
-.historical-version-banner__steppers {
-  display: flex;
-  gap: 2px;
-}
-
-.historical-version-banner__stepper-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 6px;
-  border: 1px solid var(--pds-color-border-secondary, #ececf0);
-  background: transparent;
-  cursor: pointer;
-  color: var(--pds-color-fg-default, #1a1a1a);
-  transition: background 100ms ease;
-}
-
-.historical-version-banner__stepper-btn:hover:not(:disabled) {
-  background: var(--pds-color-bg-default-secondary, #f9fafb);
-}
-
-.historical-version-banner__stepper-btn:disabled {
-  opacity: 0.35;
-  cursor: not-allowed;
-}
-
 /* Unpublished changes pill on current version row */
 .css-plugin-version-unpublished {
   display: inline-block;
@@ -1535,10 +1386,6 @@
   margin-top: 2px;
 }
 
-@keyframes css-plugin-version-spin {
-  to { transform: rotate(360deg); }
-}
-
 /* ============================================
    Toast Notifications
    ============================================ */
@@ -2827,6 +2674,10 @@
      nth-child(3) CSS plugin    → rotateClock       (React NavIcon in CSSPlugin)
      nth-child(4) AI plugin     → sparkles          (targeted by nth-child)
      nth-child(5) PCC plugin    → fileLines         (targeted by nth-child)
+
+   The positional slots only apply when the tab has no PDS icon of its own — the
+   rail reorders whenever a plugin gains or loses `render`, so a slot may hold a
+   plugin that already ships its icon, and painting over it would double up.
    ============================================================================= */
 
 /* 1. Hide all text labels.
@@ -2840,8 +2691,8 @@
 /* 2. Shared pseudo-element for injected SVG icons */
 [class*='NavItem-linkIcon']:has(svg.lucide-hammer)::after,
 [class*='NavItem-linkIcon']:has(svg.lucide-layers)::after,
-[class*='Nav-list'] > li:nth-child(4) [class*='NavItem-linkIcon']::after,
-[class*='Nav-list'] > li:nth-child(5) [class*='NavItem-linkIcon']::after {
+[class*='Nav-list'] > li:nth-child(4) [class*='NavItem-linkIcon']:not(:has(.pds-icon))::after,
+[class*='Nav-list'] > li:nth-child(5) [class*='NavItem-linkIcon']:not(:has(.pds-icon))::after {
   content: '';
   display: block;
   width: 20px;
@@ -2857,8 +2708,8 @@ svg.lucide-layers {
   display: none;
 }
 
-[class*='Nav-list'] > li:nth-child(4) [class*='NavItem-linkIcon'] > *,
-[class*='Nav-list'] > li:nth-child(5) [class*='NavItem-linkIcon'] > * {
+[class*='Nav-list'] > li:nth-child(4) [class*='NavItem-linkIcon']:not(:has(.pds-icon)) > *,
+[class*='Nav-list'] > li:nth-child(5) [class*='NavItem-linkIcon']:not(:has(.pds-icon)) > * {
   display: none;
 }
 
@@ -2875,12 +2726,12 @@ svg.lucide-layers {
 }
 
 /* AI plugin (4th) → fa-sparkles */
-[class*='Nav-list'] > li:nth-child(4) [class*='NavItem-linkIcon']::after {
+[class*='Nav-list'] > li:nth-child(4) [class*='NavItem-linkIcon']:not(:has(.pds-icon))::after {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23374151' d='M391.5 53.2c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L448 96 469.2 152.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L512 96 568.5 74.8c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L512 32 490.8-24.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L448 32 391.5 53.2zm-185 20.1c-2.6-5.7-8.3-9.3-14.5-9.3s-11.9 3.6-14.5 9.3l-53.1 115-115 53.1C3.6 244.1 0 249.8 0 256s3.6 11.9 9.3 14.5l115 53.1 53.1 115c2.6 5.7 8.3 9.3 14.5 9.3s11.9-3.6 14.5-9.3l53.1-115 115-53.1c5.7-2.6 9.3-8.3 9.3-14.5s-3.6-11.9-9.3-14.5l-115-53.1-53.1-115zM416 416l-56.5 21.2c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 480 437.2 536.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 480 536.5 458.8c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 416 458.8 359.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 416z'/%3E%3C/svg%3E");
 }
 
 /* PCC plugin (5th) → fa-file-lines */
-[class*='Nav-list'] > li:nth-child(5) [class*='NavItem-linkIcon']::after {
+[class*='Nav-list'] > li:nth-child(5) [class*='NavItem-linkIcon']:not(:has(.pds-icon))::after {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23374151' d='M0 64C0 28.7 28.7 0 64 0L213.5 0c17 0 33.3 6.7 45.3 18.7L365.3 125.3c12 12 18.7 28.3 18.7 45.3L384 448c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64zm208-5.5l0 93.5c0 13.3 10.7 24 24 24L325.5 176 208 58.5zM120 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/svg%3E");
 }
 
@@ -3392,3 +3243,192 @@ svg.lucide-layers {
   color: var(--pds-color-text-primary, var(--puck-css-text));
 }
 
+/* ============================================
+   Inspector Field Spacing
+   ============================================ */
+
+.p1-inspector-fields [class*='_InputWrapper_'] + [class*='_InputWrapper_'] {
+  margin-top: 16px;
+}
+
+.p1-inspector-fields [class*='_Input-label_'] {
+  padding-bottom: 8px;
+}
+
+.p1-inspector-fields [class*='_Input-label_']::after {
+  content: ':';
+}
+
+/* ============================================
+   Field Section (collapsible sidebar groups)
+   ============================================ */
+
+.p1-field-section {
+  border-bottom: 1px solid var(--puck-color-grey-09, #e0e0e0);
+}
+
+.p1-field-section:last-of-type {
+  border-bottom: none;
+}
+
+.p1-field-section__header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 13px 20px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+}
+
+.p1-field-section__header::-webkit-details-marker {
+  display: none;
+}
+
+.p1-field-section__label {
+  font: 600 11.5px/1 var(--pds-font-family, sans-serif);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #9a9a9a;
+}
+
+.p1-field-section__header:hover .p1-field-section__label {
+  color: var(--puck-color-grey-01, #1a1a1a);
+}
+
+.p1-field-section__badge {
+  font: 600 10px/1 var(--pds-font-family, sans-serif);
+  letter-spacing: 0;
+  color: #9a9a9a;
+  background: #f0f0f0;
+  border-radius: 99px;
+  padding: 1px 7px;
+}
+
+.p1-field-section__chevron {
+  margin-left: auto;
+  width: 15px;
+  height: 15px;
+  transition: transform 0.15s ease;
+  background: #c4c4c4;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.p1-field-section[open] > .p1-field-section__header .p1-field-section__chevron {
+  transform: rotate(0deg);
+}
+
+.p1-field-section:not([open]) > .p1-field-section__header .p1-field-section__chevron {
+  transform: rotate(-90deg);
+}
+
+.p1-field-section__subtitle {
+  margin: 0;
+  padding: 0 20px 8px;
+  font: 400 12px/1.4 var(--pds-font-family, sans-serif);
+  color: #7c7c7c;
+}
+
+.p1-field-section__body {
+  padding: 0 20px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.p1-field-mapping-section__title {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--puck-color-grey-01, #1a1a1a);
+  margin: 4px 0 2px;
+  padding: 0;
+}
+
+.p1-field-mapping-section__subtitle {
+  font-size: 12px;
+  font-weight: 500;
+  color: #7c7c7c;
+  margin: 0 0 6px;
+  padding: 0;
+  line-height: 1.4;
+}
+
+/* Schema-select field: custom label with required asterisk and type hint */
+.p1-schema-field__label-row {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+  margin-bottom: 4px;
+}
+
+.p1-schema-field__label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--puck-color-grey-01, #1a1a1a);
+}
+
+.p1-schema-field__required {
+  color: #e53e3e;
+  font-weight: 600;
+}
+
+.p1-schema-field__type-hint {
+  font-size: 11px;
+  font-weight: 400;
+  color: #9a9a9a;
+}
+
+/* Unmapped fields counter below field mapping section */
+.p1-field-mapping-section__unmapped {
+  font-size: 11px;
+  font-weight: 500;
+  color: #9a9a9a;
+  margin: 8px 0 0;
+  padding: 0;
+}
+
+/* Schema-select field row: dropdown + eye toggle inline */
+.p1-schema-select-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 6px;
+}
+
+.p1-schema-select-row__control {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Eye toggle button for schema-select field visibility */
+.p1-eye-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid var(--puck-color-grey-09, #e0e0e0);
+  border-radius: 50%;
+  background: transparent;
+  color: var(--puck-color-grey-04, #666);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.p1-eye-toggle:hover {
+  color: var(--puck-color-grey-01, #1a1a1a);
+  border-color: var(--puck-color-grey-05, #999);
+}
+
+.p1-eye-toggle--off {
+  color: var(--puck-color-grey-07, #bbb);
+}
+
+.p1-eye-toggle--off:hover {
+  color: var(--puck-color-grey-04, #666);
+}