@povio/ui 5.0.0-rc.6 → 5.0.0-rc.7

package/dist/styles/configurator.css

@@ -549,7 +549,7 @@
 .studio-error {
   color: #b8362c;
   display: block;
-  margin-top: 7px;
+  margin-top: 4px;
   font-size: 11px;
 }
 .studio-preview {
@@ -967,7 +967,7 @@
 }
 .studio-token-unit {
   position: absolute;
-  right: 7px;
+  right: 4px;
   top: 50%;
   transform: translateY(-50%);
   color: #939393;
@@ -1471,7 +1471,7 @@
 }
 .studio-token-sample > span {
   display: block;
-  margin-bottom: 7px;
+  margin-bottom: 4px;
   font: 11px sans-serif;
   text-transform: capitalize;
 }
@@ -1669,7 +1669,7 @@
   align-items: center;
   gap: 7px;
   min-width: 0;
-  padding-left: 7px;
+  padding-left: 4px;
 }
 .studio-alpha-swatch {
   position: relative;
@@ -2714,3 +2714,553 @@
   outline: 2px solid #555;
   outline-offset: 3px;
 }
+
+/* Live-preview inspection keeps the canvas and property sidebar independently scrollable. */
+.studio-preview:has(.studio-hover-inspector) {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+}
+.studio-preview-heading,
+.studio-preview-note {
+  flex-shrink: 0;
+}
+.studio-hover-inspector {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
+  grid-auto-rows: minmax(0, 1fr);
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  gap: 16px;
+  container: studio-inspection / inline-size;
+}
+.studio-hover-inspector.has-inspector {
+  grid-template-columns: minmax(0, 1fr) 270px;
+}
+.studio-inspector-toolbar {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
+  color: #8b8b8b;
+  font-size: 10px;
+}
+.studio-inspector-toolbar .studio-mode button {
+  padding: 4px 8px;
+  font-size: 10px;
+}
+.studio-inspector-canvas-shell {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+}
+.studio-inspector-canvas {
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+.studio-hover-outline-layer {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 2;
+}
+.studio-hover-outline {
+  position: absolute;
+  border: 1px solid #8b5cf6;
+  box-shadow: 0 0 0 1px #8b5cf633;
+}
+.studio-hover-outline > span {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translateY(-100%);
+  max-width: 280px;
+  padding: 2px 5px;
+  border-radius: 3px 3px 0 0;
+  background: #7c3aed;
+  color: #fff;
+  font:
+    10px/1.5 "Inter Variable",
+    sans-serif;
+  white-space: nowrap;
+}
+.studio-inspector-panel {
+  grid-column: 2;
+  position: relative;
+  align-self: stretch;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  box-sizing: border-box;
+  border: 1px solid #dedde4;
+  border-radius: 10px;
+  background: #fff;
+  color: #292730;
+  font:
+    11px/1.5 "Inter Variable",
+    Inter,
+    sans-serif;
+  overscroll-behavior: contain;
+}
+.studio-inspector-panel > header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 9px 12px;
+  border-bottom: 1px solid #efedf3;
+  background: #fff;
+}
+.studio-inspector-panel > header > strong {
+  flex: 1;
+  font-size: 11px;
+}
+.studio-inspector-panel button {
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #716c7d;
+  cursor: pointer;
+}
+.studio-inspector-panel > header button {
+  display: grid;
+  place-items: center;
+  padding: 5px;
+}
+.studio-inspector-panel button[aria-pressed="true"] {
+  background: #ede9fe;
+  color: #7c3aed;
+}
+.studio-inspector-panel button:focus-visible {
+  outline: 2px solid #8b5cf6;
+  outline-offset: 1px;
+}
+.studio-inspector-panel section {
+  border-top: 1px solid #efedf3;
+  padding: 10px 12px;
+}
+.studio-inspector-panel h3 {
+  margin: 0 0 7px;
+  font-size: 9px;
+  font-weight: 600;
+  color: #928a9d;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+}
+.studio-inspector-section-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+.studio-inspector-section-heading h3 {
+  margin: 0;
+}
+.studio-inspector-section-heading > span {
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: #f4f4f4;
+  color: #777;
+  font-size: 10px;
+}
+.studio-inspector-panel dl {
+  margin: 0;
+}
+.studio-inspector-panel dl > div {
+  display: grid;
+  grid-template-columns: 85px minmax(0, 1fr);
+  gap: 6px;
+  padding: 3px 0;
+}
+.studio-inspector-panel dt {
+  color: #817b8b;
+}
+.studio-inspector-panel dd {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.studio-inspector-panel dd > i {
+  width: 12px;
+  height: 12px;
+  border: 1px solid #0002;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+.studio-inspector-panel dd > button {
+  max-width: 100%;
+  padding: 2px 5px;
+  background: #f3effb;
+  color: #7752ae;
+  font-size: 9px;
+  text-align: left;
+  overflow-wrap: anywhere;
+}
+.studio-inspector-empty {
+  margin: 0;
+  padding: 16px 12px;
+  color: #89838e;
+}
+.studio-box-model {
+  margin: 0;
+  padding: 8px;
+  border-radius: 7px;
+  background: #fafafa;
+  color: #393939;
+}
+.studio-box-model figcaption {
+  margin-top: 6px;
+  text-align: center;
+  color: #8b8b8b;
+  font-size: 9px;
+}
+.studio-box-layer {
+  position: relative;
+  padding: 24px;
+  box-sizing: border-box;
+  font:
+    10px/1.3 "Inter Variable",
+    sans-serif;
+}
+.studio-box-layer.is-position {
+  border: 1px dotted #b8b8b8;
+}
+.studio-box-layer.is-margin {
+  border: 1px dashed #b8b8b8;
+}
+.studio-box-layer.is-border {
+  border: 1px solid #b8b8b8;
+}
+.studio-box-layer.is-padding {
+  border: 1px dashed #a7a7a7;
+  background: #e9e9e9;
+}
+.studio-box-name {
+  position: absolute;
+  top: -7px;
+  left: 8px;
+  padding: 0 3px;
+  background: #fafafa;
+  color: #747474;
+  font-size: 9px;
+}
+.studio-box-layer.is-padding > .studio-box-name {
+  background: #e9e9e9;
+}
+.studio-box-value {
+  position: absolute;
+  font-variant-numeric: tabular-nums;
+}
+.studio-box-value.is-top {
+  top: 3px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.studio-box-value.is-bottom {
+  bottom: 3px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.studio-box-value.is-left {
+  left: 3px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.studio-box-value.is-right {
+  right: 3px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.studio-inspector-panel .studio-box-value {
+  padding: 0;
+  border-radius: 2px;
+  color: inherit;
+  line-height: 1.3;
+  font-size: 10px;
+}
+.studio-inspector-panel button.studio-box-value[data-token] {
+  text-decoration: underline dotted;
+  text-underline-offset: 2px;
+}
+.studio-box-radius {
+  position: absolute;
+  padding: 1px 2px;
+  border-radius: 3px;
+  background: #f5f5f5;
+  color: #777;
+  font-size: 8px;
+  line-height: 1;
+}
+.studio-box-radius.is-topLeft {
+  top: 3px;
+  left: 3px;
+}
+.studio-box-radius.is-topRight {
+  top: 3px;
+  right: 3px;
+}
+.studio-box-radius.is-bottomLeft {
+  bottom: 3px;
+  left: 3px;
+}
+.studio-box-radius.is-bottomRight {
+  bottom: 3px;
+  right: 3px;
+}
+.studio-inspector-panel .studio-box-radius {
+  padding: 1px;
+  color: #777;
+  font-size: 8px;
+  line-height: 1;
+}
+.studio-inspector-panel button.studio-box-radius[data-token] {
+  text-decoration: underline dotted;
+}
+.studio-box-content {
+  min-width: 0;
+  padding: 5px 2px;
+  border: 1px solid #b8b8b8;
+  background: #fafafa;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+.studio-box-dimensions {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px;
+  font-size: 9px;
+}
+.studio-box-gaps {
+  display: flex;
+  justify-content: center;
+  margin-top: 12px;
+  padding: 12px;
+  border: 1px solid #e0e0e0;
+  border-radius: 5px;
+}
+.studio-gap-grid {
+  display: grid;
+  width: 130px;
+  max-width: 100%;
+  align-items: center;
+  justify-items: center;
+}
+.studio-gap-grid i {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border: 1px solid #bdbdbd;
+  border-radius: 2px;
+  background: #e9e9e9;
+}
+.studio-gap-grid i:nth-child(1) {
+  grid-column: 1;
+  grid-row: 1;
+}
+.studio-gap-grid i:nth-child(2) {
+  grid-column: 3;
+  grid-row: 1;
+}
+.studio-gap-grid i:nth-child(3) {
+  grid-column: 1;
+  grid-row: 3;
+}
+.studio-gap-grid i:nth-child(4) {
+  grid-column: 3;
+  grid-row: 3;
+}
+.studio-gap-number {
+  color: #555;
+  font-size: 10px;
+}
+.studio-gap-number.is-column {
+  grid-column: 2;
+  grid-row: 1;
+}
+.studio-gap-number.is-row {
+  grid-column: 1;
+  grid-row: 2;
+}
+.studio-inspector-panel button.studio-gap-number[data-token] {
+  padding: 0;
+  text-decoration: underline dotted;
+  font-size: 10px;
+}
+.studio-box-layer.is-position,
+.studio-box-layer.is-position .studio-box-layer {
+  padding: 16px;
+}
+@container studio-inspection (max-width: 620px) {
+  .studio-inspector-canvas-shell,
+  .studio-inspector-panel {
+    grid-column: 1 / -1;
+  }
+  .studio-inspector-canvas-shell {
+    grid-row: 2;
+  }
+  .studio-inspector-panel {
+    grid-row: 3;
+  }
+}
+@container (max-width: 800px) {
+  .studio-preview:has(.studio-hover-inspector) {
+    height: max(420px, calc(100dvh - 220px));
+  }
+}
+.studio-box-layer.is-border:has(.studio-box-radius) {
+  border-color: transparent;
+}
+.studio-box-layer.is-border:has(.studio-box-radius)::before {
+  content: "";
+  position: absolute;
+  inset: -3px;
+  border: 1px solid #b8b8b8;
+  border-radius: inherit;
+  pointer-events: none;
+}
+.studio-box-radius {
+  z-index: 1;
+}
+.studio-box-radius.is-topLeft {
+  top: 4px;
+  left: 4px;
+}
+.studio-box-radius.is-topRight {
+  top: 4px;
+  right: 4px;
+}
+.studio-box-radius.is-bottomLeft {
+  bottom: 4px;
+  left: 4px;
+}
+.studio-box-radius.is-bottomRight {
+  bottom: 4px;
+  right: 4px;
+}
+
+.studio-measure-regions {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.studio-measure-region {
+  position: absolute;
+  box-sizing: border-box;
+  background: #7c3aed88;
+  color: #4c1d95;
+  box-shadow:
+    inset 0 0 0 1px currentColor,
+    0 0 0 1px #fff;
+}
+.studio-measure-region.is-margin {
+  background: #f59e0b99;
+  color: #92400e;
+}
+.studio-measure-region.is-border {
+  background: #2563ebbf;
+  color: #1e40af;
+}
+.studio-measure-region.is-gap {
+  background: repeating-linear-gradient(45deg, #7c3aed88 0 3px, #5b21b6bf 3px 5px);
+}
+.studio-measure-region.is-horizontal {
+  height: 1px !important;
+  border-top: 2px solid currentColor;
+  background: none;
+}
+.studio-measure-region.is-vertical {
+  width: 1px !important;
+  border-left: 2px solid currentColor;
+  background: none;
+}
+.studio-measure-region.is-horizontal::before,
+.studio-measure-region.is-horizontal::after {
+  content: "";
+  position: absolute;
+  top: -4px;
+  height: 7px;
+  border-left: 2px solid currentColor;
+}
+.studio-measure-region.is-horizontal::before {
+  left: 0;
+}
+.studio-measure-region.is-horizontal::after {
+  right: 0;
+}
+.studio-measure-region.is-vertical::before,
+.studio-measure-region.is-vertical::after {
+  content: "";
+  position: absolute;
+  left: -4px;
+  width: 7px;
+  border-top: 2px solid currentColor;
+}
+.studio-measure-region.is-vertical::before {
+  top: 0;
+}
+.studio-measure-region.is-vertical::after {
+  bottom: 0;
+}
+.studio-measure-region.is-corner {
+  background: none;
+  box-shadow: none;
+}
+.studio-measure-region.is-corner svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.studio-measure-label {
+  position: absolute;
+  max-width: 220px;
+  padding: 3px 6px;
+  border-radius: 4px;
+  background: #6d28d9;
+  color: #fff;
+  font:
+    10px/1.4 "Inter Variable",
+    sans-serif;
+  box-shadow:
+    0 0 0 1px #fff,
+    0 2px 6px #0004;
+}
+.studio-inspector-panel .studio-box-dimension-value {
+  padding: 0;
+  font: inherit;
+  font-size: 9px;
+  line-height: 1.3;
+  color: inherit;
+}
+.studio-inspector-panel .studio-gap-number {
+  padding: 0;
+  font-size: 10px;
+}
+.studio-box-model button[data-box-highlight]:hover,
+.studio-box-model button[data-box-highlight]:focus-visible {
+  background: #ede9fe;
+  color: #6d28d9;
+}
+
+.studio-measure-region.is-corner path {
+  stroke-width: 3px;
+  filter: drop-shadow(0 0 1px #fff);
+}