@povio/ui 5.0.0-rc.12 → 5.0.0-rc.14

package/dist/styles/configurator.css

@@ -118,7 +118,7 @@
   font-weight: 650;
   letter-spacing: -0.3px;
 }
-/* Title, section tabs and global controls share one bar above the editor; the tabs take their own row. */
+/* The theme version menu takes the first row of the bar above the editor; section tabs and token search the second. */
 .studio-topbar {
   grid-column: 1;
   grid-row: 1;
@@ -126,34 +126,27 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 4px 12px;
-  padding: 8px 12px 4px;
+  /* The extra top space keeps the move pill clear of the title row. */
+  padding: 12px 12px 4px;
   background: #fbfbfb;
   border-bottom: 1px solid #eaeaea;
   min-width: 0;
 }
 .studio-topbar .studio-title {
+  flex: 1 1 auto;
   gap: 9px;
-  flex-shrink: 0;
+  min-width: 0;
 }
 .studio-topbar .studio-nav {
   order: 1;
-  flex-basis: 100%;
+  /* Spans the bar plus both negative margins, so tab text and the search edge line up with the rows above. */
+  flex-basis: calc(100% + 8px);
   margin-inline: -4px;
 }
 .studio-topbar .studio-title h2 {
   white-space: nowrap;
 }
-/* Controls share the title's row and only wrap below it once even their narrowest layout no longer fits. */
-.studio-topbar-controls {
-  display: flex;
-  flex: 1 1 min-content;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 8px;
-  margin-left: auto;
-  min-width: 0;
-}
-/* Search rests as a magnifier beside the window controls and expands over the title row while in use. */
+/* Search rests as a magnifier at the end of the section tabs and expands over them while in use. */
 .studio-topbar .studio-search {
   position: relative;
   flex: 0 0 auto;
@@ -190,7 +183,8 @@
   width: auto;
   opacity: 1;
 }
-.studio-topbar:has(.studio-search:is(:focus-within, :has(input:not(:placeholder-shown)))) .studio-title {
+.studio-nav:has(.studio-search:is(:focus-within, :has(input:not(:placeholder-shown))))
+  :is(.studio-section-tabs, .studio-preview-tab) {
   display: none;
 }
 .studio-topbar .studio-search:has(input:disabled) {
@@ -226,17 +220,6 @@
 .studio-topbar input {
   cursor: text;
 }
-@container (max-width: 800px) {
-  .studio-topbar-controls {
-    flex-wrap: wrap;
-    margin-left: 0;
-    flex-shrink: 1;
-  }
-
-  .studio-topbar .studio-title {
-    flex: 1;
-  }
-}
 /* The body only groups the panels in markup; they are placed on the dialog's grid. */
 .studio-body {
   display: contents;
@@ -313,7 +296,7 @@
   margin: 0 4px;
   background: #e5e5e5;
 }
-.studio-nav button {
+.studio-nav button:not(.studio-search-clear) {
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -2609,27 +2592,33 @@
  * The header drags the window, so the grip is only a keyboard control: hidden until it has focus, then shown left
  * of the pop-out button, where arrow keys move the window.
  */
+/* A small pill centered on the window's top edge moves it; focused, the arrow keys move it too. */
 .studio-window-grip {
   position: absolute;
-  top: 20px;
-  right: 82px;
+  top: 0;
+  left: 50%;
+  translate: -50% 0;
   z-index: 5;
   display: grid;
   place-items: center;
+  width: 48px;
+  height: 8px;
   border: 0;
-  padding: 4px;
+  border-radius: 4px;
+  padding: 0;
   background: transparent;
-  color: #858585;
   touch-action: none;
-  flex-shrink: 0;
-  border-radius: 5px;
 }
-.studio-window-grip:not(:focus-visible) {
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip-path: inset(50%);
+.studio-window-grip::before {
+  content: "";
+  width: 28px;
+  height: 4px;
+  border-radius: 2px;
+  background: #d9d9d9;
+  transition: background 120ms;
+}
+.studio-window-grip:is(:hover, :active, :focus-visible)::before {
+  background: #8f8f8f;
 }
 .studio-overlay .studio-window-grip {
   cursor: grab;
@@ -2713,18 +2702,6 @@
   }
 }
 
-@container (max-width: 1050px) {
-  .studio-window-grip {
-    top: 18px;
-  }
-}
-@container (max-width: 800px) {
-  .studio-window-grip {
-    top: 10px;
-    right: 76px;
-  }
-}
-
 /* Resized windows must not inherit the gallery specimens' intrinsic minimum width. */
 .studio-layout-card {
   min-width: 0;
@@ -2798,8 +2775,9 @@
   }
 }
 @container (max-width: 800px) {
+  /* Centered on the title row's 24px controls. */
   .studio-window-popout {
-    top: 10px;
+    top: 12px;
     right: 44px;
   }
   .studio-topbar {
@@ -2822,11 +2800,11 @@
 @container (max-width: 800px) {
   .studio-topbar,
   .studio-modal-popout .studio-topbar {
-    padding-right: 16px;
+    padding-right: 12px;
   }
   /* Leaves the window controls' corner free with the same 8px gap they keep between themselves. */
-  .studio-topbar-controls {
-    margin-right: 54px;
+  .studio-topbar .studio-title {
+    margin-right: 58px;
   }
 }
 .studio-palette-native {
@@ -2846,7 +2824,7 @@
   border-radius: 4px;
 }
 
-.studio-window-minimize {
+.studio-window-close {
   position: absolute;
   top: 20px;
   right: 18px;
@@ -2861,51 +2839,24 @@
   color: #858585;
   background: transparent;
 }
-.studio-window-minimize:focus-visible {
+.studio-window-close:focus-visible {
   outline: 2px solid #555;
   outline-offset: -2px;
 }
 @container (max-width: 1050px) {
-  .studio-window-minimize {
+  .studio-window-close {
     top: 18px;
   }
 }
 @container (max-width: 800px) {
-  .studio-window-minimize {
-    top: 10px;
+  .studio-window-close {
+    top: 12px;
     right: 12px;
   }
   .studio-preview-actions {
     padding-right: 0;
   }
 }
-.studio-floating-launcher {
-  position: fixed;
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 6px 10px;
-  border: 1px solid #555;
-  border-radius: 999px;
-  background: #292929;
-  color: #fff;
-  box-shadow: 0 4px 16px #0003;
-  font:
-    600 10px/1.4 "Inter Variable",
-    Inter,
-    sans-serif;
-  cursor: grab;
-  touch-action: none;
-  user-select: none;
-}
-.studio-floating-launcher:active {
-  cursor: grabbing;
-}
-.studio-floating-launcher:focus-visible {
-  outline: 2px solid #555;
-  outline-offset: 3px;
-}
 
 /* Live-preview inspection keeps the canvas and property sidebar independently scrollable. */
 .studio-preview:has(.studio-hover-inspector) {
@@ -3521,15 +3472,425 @@
 }
 .studio-overlay
   :is(
-    .studio-window-grip,
-    .studio-window-minimize,
+    .studio-window-close,
     .studio-window-popout,
     .studio-palette-reset,
     .studio-token-value > button,
-    .studio-inspector-panel > header button,
-    .studio-floating-launcher
+    .studio-inspector-panel > header button
   )
   svg.lucide {
   width: 14px;
   height: 14px;
 }
+
+.studio-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+/* Theme versions: a select with add and edit actions, in the configurator's title row. */
+.studio-version-picker {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  max-width: 320px;
+}
+.studio-version-select {
+  flex: 1;
+  min-width: 0;
+}
+.studio-version-trigger {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  height: 24px;
+  padding: 0 6px 0 8px;
+  border: 1px solid #e5e5e5;
+  border-radius: 6px;
+  background: #fff;
+  color: #242424;
+  font: inherit;
+  font-weight: 600;
+  text-align: left;
+}
+.studio-version-trigger:hover {
+  border-color: #d4d4d4;
+}
+.studio-version-trigger > span {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.studio-version-trigger svg {
+  color: #707070;
+}
+.studio-version-action {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: #707070;
+}
+.studio-version-action:hover {
+  background: #f0f0f0;
+  color: #464646;
+}
+:is(.studio-version-trigger, .studio-version-action):disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+:is(.studio-version-trigger, .studio-version-action):focus-visible {
+  outline: 2px solid #555;
+  outline-offset: 1px;
+}
+.studio-version-error {
+  flex-basis: 100%;
+  margin: 2px 0 0;
+  color: #b52c39;
+}
+/* The menu and the edit dialog float above the configurator window. */
+.studio-version-popover {
+  z-index: 1002;
+  min-width: var(--trigger-width, 180px);
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 12px 40px #21212126;
+  font-family: "Inter Variable", Inter, sans-serif;
+  font-size: 10px;
+  line-height: 1.5;
+  color: #242424;
+}
+.studio-version-list {
+  max-height: min(320px, calc(var(--visual-viewport-height, 100vh) - 80px));
+  overflow: auto;
+  padding: 4px;
+  outline: none;
+}
+.studio-version-item {
+  padding: 5px 8px;
+  border-radius: 5px;
+  outline: none;
+  cursor: pointer;
+  overflow-wrap: anywhere;
+}
+.studio-version-item[data-focused],
+.studio-version-item[data-hovered] {
+  background: #f3f3f3;
+}
+.studio-version-item[data-selected] {
+  background: #eeeeee;
+  color: #464646;
+  font-weight: 600;
+}
+.studio-version-dialog {
+  width: 240px;
+  max-width: calc(100vw - 16px);
+  padding: 10px;
+}
+.studio-version-dialog [role="dialog"],
+.studio-version-dialog [role="alertdialog"] {
+  outline: none;
+}
+.studio-version-dialog-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.studio-version-dialog-heading h2 {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+}
+.studio-version-dialog-heading button {
+  display: grid;
+  place-items: center;
+  padding: 2px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #707070;
+}
+.studio-version-dialog label {
+  display: grid;
+  gap: 4px;
+  color: #535353;
+}
+.studio-version-dialog input {
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 5px 7px;
+  border: 1px solid #e5e5e5;
+  border-radius: 5px;
+  background: #fafafa;
+  color: #242424;
+  font: inherit;
+}
+.studio-version-dialog p {
+  margin: 0;
+}
+.studio-version-hint {
+  margin-top: 6px !important;
+  color: #858585;
+}
+.studio-version-dialog-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  margin-top: 10px;
+}
+.studio-version-dialog-actions button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border: 1px solid #e5e5e5;
+  border-radius: 5px;
+  background: #fff;
+  color: #242424;
+  font: inherit;
+  cursor: pointer;
+}
+.studio-version-dialog-actions button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.studio-version-dialog-actions .studio-version-delete {
+  margin-right: auto;
+  padding-left: 0;
+  border: 0;
+  color: #b52c39;
+}
+.studio-version-dialog-actions .is-primary {
+  border-color: #363636;
+  background: #363636;
+  color: #fff;
+}
+.studio-version-dialog-actions .is-danger {
+  border-color: #b52c39;
+  background: #b52c39;
+  color: #fff;
+}
+.studio-version-dialog :focus-visible {
+  outline: 2px solid #555;
+  outline-offset: 1px;
+}
+/* Fontsource browsing stays compact even when the preview theme changes. */
+.studio-fontsource {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-top: 8px;
+}
+.studio-fontsource-notice {
+  color: #777;
+  font-size: 10px;
+}
+.studio-fontsource-popover {
+  width: min(340px, calc(100vw - 24px));
+  max-height: min(680px, calc(100dvh - 24px));
+  overflow: auto;
+  padding: 12px;
+  border: 1px solid #e5e5e5;
+  border-radius: 10px;
+  background: #fff;
+  color: #303036;
+  box-shadow: 0 8px 32px #24202d26;
+  font:
+    11px/1.4 Inter,
+    system-ui,
+    sans-serif;
+  z-index: 10020;
+}
+.studio-fontsource-popover * {
+  box-sizing: border-box;
+}
+.studio-fontsource-popover [role="dialog"] {
+  outline: none;
+}
+.studio-fontsource-popover header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+.studio-fontsource-popover h2 {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+}
+.studio-fontsource-popover button,
+.studio-fontsource-popover input,
+.studio-fontsource-popover select {
+  font: inherit;
+  color: inherit;
+}
+.studio-fontsource-popover button {
+  border: 1px solid #e5e5e5;
+  border-radius: 5px;
+  padding: 4px 7px;
+  background: #fff;
+  cursor: pointer;
+}
+.studio-fontsource-popover button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.studio-fontsource-popover header button {
+  display: grid;
+  place-items: center;
+  padding: 3px;
+  border: 0;
+}
+.studio-fontsource-popover input:not([type="checkbox"]),
+.studio-fontsource-popover select {
+  min-width: 0;
+  width: 100%;
+  border: 1px solid #e5e5e5;
+  border-radius: 5px;
+  padding: 6px 7px;
+  background: #fafafa;
+}
+.studio-fontsource-popover :focus-visible {
+  outline: 2px solid #7655d7;
+  outline-offset: 1px;
+}
+.studio-fontsource-search {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.studio-fontsource-search svg {
+  position: absolute;
+  left: 8px;
+  color: #888;
+}
+.studio-fontsource-popover .studio-fontsource-search input {
+  padding-left: 27px;
+}
+.studio-fontsource-filters {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 8px 0;
+}
+.studio-fontsource-filters select {
+  flex: 1;
+}
+.studio-fontsource-filters label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+}
+.studio-fontsource-filters input {
+  margin: 0;
+  accent-color: #7655d7;
+}
+.studio-fontsource-count {
+  display: block;
+  margin: 8px 0 3px;
+  font-size: 10px;
+  color: #888;
+}
+.studio-fontsource-list {
+  display: grid;
+  gap: 2px;
+  max-height: 180px;
+  overflow: auto;
+  padding: 3px;
+  margin-inline: -3px;
+}
+.studio-fontsource-list button {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  text-align: left;
+  border-color: transparent;
+  padding: 5px 7px;
+}
+.studio-fontsource-list small {
+  grid-column: 1;
+  color: #888;
+  font-size: 9px;
+}
+.studio-fontsource-list svg {
+  grid-row: 1 / span 2;
+  grid-column: 2;
+}
+.studio-fontsource-list button:hover {
+  background: #f6f4fa;
+}
+.studio-fontsource-list button[aria-pressed="true"] {
+  color: #6540c2;
+  background: #eee8ff;
+}
+.studio-fontsource-preview {
+  border-top: 1px solid #eee;
+  margin-top: 10px;
+  padding-top: 10px;
+}
+.studio-fontsource-preview > strong {
+  display: block;
+  margin-bottom: 6px;
+}
+.studio-fontsource-sample {
+  margin: 10px 0;
+  font-size: 26px;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+.studio-fontsource-preview > [role="status"] {
+  color: #888;
+  font-size: 10px;
+}
+.studio-fontsource-role {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 8px 0;
+}
+.studio-fontsource-role select {
+  flex: 1;
+}
+.studio-fontsource-popover .studio-primary {
+  width: 100%;
+  background: #7655d7;
+  border-color: #7655d7;
+  color: white;
+}
+.studio-fontsource-help {
+  margin: 10px 0 0;
+  color: #888;
+  font-size: 10px;
+  line-height: 1.5;
+}
+.studio-fontsource-popover [role="alert"] {
+  color: #ad2937;
+}
+.studio-fontsource-popover [role="alert"] button {
+  margin-left: 8px;
+}
+.studio-fontsource-popover .studio-fontsource-more {
+  width: 100%;
+  margin-top: 5px;
+  font-size: 10px;
+}