@nubisco/ui 1.50.0 → 1.52.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nubisco/ui",
-  "version": "1.50.0",
+  "version": "1.52.0",
   "description": "Vue 3 UI component library",
   "packageManager": "pnpm@11.0.8",
   "repository": {

package/src/styles/grid/_common.scss

@@ -1,6 +1,7 @@
 @use 'sass:list';
 @use 'sass:meta';
 @use 'sass:math';
+@use 'sass:string';
 @use '../variables/grid';
 
 @function generate-list($value) {
@@ -17,11 +18,11 @@ $var-columns: generate-list(grid.$grid-columns) !default;
   $result: null;
 
   @if meta.type-of($index) != number {
-    @warn "$index: #{quote($index)} is not a number for `remove-nth`.";
+    @warn "$index: #{string.quote($index)} is not a number for `remove-nth`.";
   } @else if $index == 0 {
     @warn "List index 0 must be a non-zero integer for `remove-nth`.";
   } @else if math.abs($index) > list.length($list) {
-    @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
+    @warn "List index is #{$index} but list is only #{list.length($list)} item long for `remove-nth`.";
   } @else {
     $result: ();
     @if $index < 0 {

package/src/styles/index.scss

@@ -7,6 +7,7 @@
 @use 'theme';
 @use 'typography';
 @use 'utils';
+@use 'patterns/inspector';
 
 @include theme.base;
 @include theme.classes;

package/src/styles/patterns/_inspector.scss

@@ -0,0 +1,79 @@
+// ── Inspector pattern ────────────────────────────────────────────────────
+// Apply `.nb-inspector` to a container of stacked NbShellPanels to get the
+// flat, dense, two-column inspector look from the "Building an inspector"
+// guide: strong header caps that separate sections, and label-left /
+// value-right rows sharing one value edge.
+//
+// The point of shipping it here is reuse: every inspector across every
+// product (a node inspector, a control inspector, a settings sidebar) wears
+// one implementation instead of reinventing a sidebar. The field components
+// are converted in place, so no per-field markup change is needed.
+
+.nb-inspector {
+  // Panels sit flush; the header cap does the separating, so no card gaps
+  // waste vertical space (the way dense pro-tool inspectors work).
+  --nb-shell-panel-gap: 0;
+  // Width of the label column. Override per surface if labels run long.
+  --nb-inspector-label-width: 96px;
+
+  // Header cap: a clearly tinted bar with a top divider, so each section
+  // start reads at a glance even though panels are flush. Title is muted
+  // STRUCTURE, never content, which reserves full contrast for the values.
+  .nb-shell-panel__header {
+    background: var(--nb-c-layer-2);
+    border-top: 1px solid var(--nb-c-layer-3);
+    border-bottom: 1px solid var(--nb-c-bg);
+  }
+  .nb-shell-panel__title {
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--nb-c-text-muted);
+  }
+
+  // Two-column rows: label left (quiet), control right, so every value shares
+  // one left edge you scan straight down and each field is half as tall. Only
+  // fields that HAVE a label get the two-column grid; a label-less input (e.g.
+  // a bare list of text inputs) stays full width instead of gaining a phantom
+  // empty label column.
+  .nb-text-input:has(> .nb-label),
+  .nb-select:has(> .nb-label) {
+    display: grid;
+    grid-template-columns: var(--nb-inspector-label-width) minmax(0, 1fr);
+    align-items: center;
+    column-gap: 10px;
+    row-gap: 0;
+  }
+  // A multiline field keeps its tall box, so top-align its label.
+  .nb-text-input--multiline {
+    align-items: start;
+  }
+  .nb-text-input .nb-label,
+  .nb-select .nb-label {
+    font-size: var(--nb-font-size-11, 11px);
+    line-height: 1.2;
+    color: var(--nb-c-text-muted);
+    text-transform: none;
+    letter-spacing: 0;
+  }
+
+  // Sliders take the same two-column shape. The default variant's field-box is
+  // display:contents, so override it to a block to make it the value cell, and
+  // let the track shrink into the narrower column beside its readout.
+  .nb-slider:has(> .nb-slider__label) {
+    display: grid;
+    grid-template-columns: var(--nb-inspector-label-width) minmax(0, 1fr);
+    align-items: center;
+    column-gap: 10px;
+
+    .nb-slider__label {
+      font-size: var(--nb-font-size-11, 11px);
+      line-height: 1.2;
+      color: var(--nb-c-text-muted);
+    }
+    .nb-slider__field-box {
+      display: block;
+      min-width: 0;
+    }
+  }
+}