@sentropic/design-system-vue 0.9.0 → 0.11.0

package/dist/styles.css

@@ -2395,6 +2395,14 @@
   .st-forceGraph__node { transition: opacity 120ms ease; }
   .st-forceGraph__node--dim { opacity: 0.3; }
 
+  /* During a merge the opacity/transform are driven per-frame via rAF, so the
+     CSS transitions are disabled to avoid a lag that would smear the glide. The
+     fading/masked `from` node is also taken out of hit-testing so the invisible
+     node cannot be hovered, focused or clicked. */
+  .st-forceGraph__node--merging,
+  .st-forceGraph__edge--merging { transition: none; }
+  .st-forceGraph__node--merging { pointer-events: none; }
+
   .st-forceGraph__dot {
     cursor: pointer;
     fill-opacity: 0.9;
@@ -8106,3 +8114,167 @@
     animation: none;
   }
 }
+
+.st-portal {
+  display: contents;
+}
+
+.st-popper {
+  z-index: var(--st-component-popover-zIndex, 80);
+}
+
+.st-popper__arrow {
+  position: absolute;
+  width: 0.5rem;
+  height: 0.5rem;
+  background: inherit;
+  border: inherit;
+  transform: rotate(45deg);
+  pointer-events: none;
+}
+
+.st-popper__arrow[data-popper-side="bottom"] {
+  top: -0.25rem;
+  left: 50%;
+  margin-left: -0.25rem;
+}
+
+.st-popper__arrow[data-popper-side="top"] {
+  bottom: -0.25rem;
+  left: 50%;
+  margin-left: -0.25rem;
+}
+
+.st-popper__arrow[data-popper-side="right"] {
+  left: -0.25rem;
+  top: 50%;
+  margin-top: -0.25rem;
+}
+
+.st-popper__arrow[data-popper-side="left"] {
+  right: -0.25rem;
+  top: 50%;
+  margin-top: -0.25rem;
+}
+
+/* ---------------------------------------------------------------------------
+   SelectableRow — compact, full-width selectable list/rail row. By DEFAULT the
+   selected state is just two calm signals — a tinted surface + accented text —
+   deliberately NOT the off-theme "boudin box" (inset box-shadow + heavy rounded
+   border) it replaces, and NOT a reflow-causing font-weight bump. The fine left
+   accent bar is OPT-IN via the `accentBar` prop / `--accentBar` modifier.
+   --------------------------------------------------------------------------- */
+.st-selectableRow {
+  align-items: center;
+  background: transparent;
+  border-radius: var(--st-radius-sm, 0.25rem);
+  box-sizing: border-box;
+  color: var(--st-semantic-text-secondary, #475569);
+  cursor: pointer;
+  display: flex;
+  gap: var(--st-spacing-2, 0.5rem);
+  padding: 0.5rem 0.75rem;
+  position: relative;
+  text-align: left;
+  transition:
+    background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+    color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+  user-select: none;
+  width: 100%;
+}
+
+/* Opt-in accent bar: reserve the 2px gutter only when enabled so text never
+   shifts on selection. */
+.st-selectableRow--accentBar {
+  padding-left: calc(0.75rem - 2px);
+  border-left: 2px solid transparent;
+}
+
+.st-selectableRow:hover:not(.st-selectableRow--disabled):not(.st-selectableRow--selected) {
+  background: var(
+    --st-component-control-hoverBackground,
+    var(--st-semantic-surface-subtle, #f8fafc)
+  );
+  color: var(--st-semantic-text-primary, #0f172a);
+}
+
+/* Focus ring as an EXTERNAL offset (not inset) so it reads as a focus
+   affordance around the row rather than an inner stroke. */
+.st-selectableRow:focus-visible {
+  outline: 2px solid var(--st-semantic-border-interactive, var(--st-semantic-action-primary));
+  outline-offset: 2px;
+}
+
+/* Selected: two signals by default — tinted surface + accented (contrast-safe)
+   text. The token values carry a flat fallback; the inline color-mix is only a
+   last-resort default when the token is unset. */
+.st-selectableRow--selected {
+  background: var(
+    --st-component-selectableRow-selectedBackground,
+    color-mix(in oklch, var(--st-semantic-action-primary, #2563eb) 12%, transparent)
+  );
+  color: var(
+    --st-component-selectableRow-selectedText,
+    color-mix(in oklch, var(--st-semantic-action-primary, #2563eb) 78%, black)
+  );
+}
+
+/* The left accent bar paints only when opt-in AND selected. */
+.st-selectableRow--accentBar.st-selectableRow--selected {
+  border-left-color: var(
+    --st-component-selectableRow-selectedAccent,
+    var(--st-semantic-action-primary, #2563eb)
+  );
+}
+
+/* color-mix fallback: engines without color-mix() get a flat tinted surface +
+   a solid accent text from the resolved tokens' plain values. */
+@supports not (color: color-mix(in oklch, red, blue)) {
+  .st-selectableRow--selected {
+    background: var(
+      --st-component-selectableRow-selectedBackground,
+      var(--st-semantic-surface-subtle, #eef2ff)
+    );
+    color: var(
+      --st-component-selectableRow-selectedText,
+      var(--st-semantic-action-primary, #1d4ed8)
+    );
+  }
+}
+
+.st-selectableRow--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.st-selectableRow__leading,
+.st-selectableRow__trailing {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+
+.st-selectableRow__content {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .st-selectableRow {
+    transition: none;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   SelectableList — accessible listbox wrapper owning a roving tabindex for its
+   SelectableRow children (role=listbox → option).
+   --------------------------------------------------------------------------- */
+.st-selectableList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-spacing-1, 0.25rem);
+  width: 100%;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentropic/design-system-vue",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Vue 3 components for the Sentropic design system.",
   "type": "module",
   "publishConfig": {