@optimum-intelligence/opti-ui 0.5.2 → 0.6.0

package/dist/opti-ui.css

@@ -22,6 +22,19 @@
     --oui-color-warning-text: #9a4515;
     --oui-color-danger: #c42b55;
     --oui-color-danger-text: #7a1f3d;
+    --oui-color-on-tone: #ffffff;
+    --oui-color-blue: #2f6fd0;
+    --oui-color-blue-text: #1f4f99;
+    --oui-color-cyan: #1a8aa8;
+    --oui-color-cyan-text: #126278;
+    --oui-color-green: #3d8a2f;
+    --oui-color-green-text: #2a6320;
+    --oui-color-yellow: #c99a12;
+    --oui-color-yellow-text: #7a5a06;
+    --oui-color-purple: #7b4fc4;
+    --oui-color-purple-text: #573591;
+    --oui-color-pink: #c2479b;
+    --oui-color-pink-text: #8c2f6f;
     --oui-color-chart-1: #63537d;
     --oui-color-chart-2: #271645;
     --oui-color-chart-3: #21856d;
@@ -52,8 +65,8 @@
     --oui-duration-slow: 0.3s;
     --oui-ease: cubic-bezier(0.3, 0, 0.2, 1);
     --oui-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
-    --oui-z-dropdown: 50;
     --oui-z-dialog: 100;
+    --oui-z-dropdown: 110;
     --oui-z-toast: 120;
     --oui-z-tooltip: 130;
   }
@@ -73,17 +86,17 @@
     --oui-color-text-strong: var(--oui-color-brand);
     --oui-color-text-muted: color-mix(in srgb, var(--oui-color-brand) 72%, white);
     --oui-color-text-subtle: color-mix(in srgb, var(--oui-color-text-muted) 86%, transparent);
-    --oui-color-bg: color-mix(in srgb, var(--oui-color-accent) 4%, white);
+    --oui-color-bg: color-mix(in srgb, var(--oui-color-accent) 6%, white);
     --oui-color-surface: #ffffff;
     --oui-color-surface-muted: color-mix(in srgb, var(--oui-color-accent) 4%, white);
     --oui-color-surface-hover: color-mix(in srgb, var(--oui-color-accent) 6%, var(--oui-color-surface));
     --oui-color-overlay: color-mix(in srgb, var(--oui-color-brand) 45%, transparent);
     --oui-color-border: color-mix(
       in srgb,
-      var(--oui-color-accent) 12%,
-      color-mix(in srgb, var(--oui-color-brand) 8%, white)
+      var(--oui-color-accent) 26%,
+      color-mix(in srgb, var(--oui-color-brand) 14%, white)
     );
-    --oui-color-border-subtle: color-mix(in srgb, var(--oui-color-accent) 12%, transparent);
+    --oui-color-border-subtle: color-mix(in srgb, var(--oui-color-accent) 20%, transparent);
     --oui-color-border-control: color-mix(in srgb, var(--oui-color-accent) 24%, transparent);
     --oui-color-border-hover: color-mix(in srgb, var(--oui-color-accent) 45%, transparent);
     --oui-color-border-focus: color-mix(in srgb, var(--oui-color-accent) 75%, transparent);
@@ -97,6 +110,18 @@
     --oui-color-success-border: color-mix(in srgb, var(--oui-color-success) 26%, transparent);
     --oui-color-warning-border: color-mix(in srgb, var(--oui-color-warning) 28%, transparent);
     --oui-color-danger-border: color-mix(in srgb, var(--oui-color-danger) 26%, transparent);
+    --oui-color-blue-subtle: color-mix(in srgb, var(--oui-color-blue) 10%, transparent);
+    --oui-color-blue-border: color-mix(in srgb, var(--oui-color-blue) 26%, transparent);
+    --oui-color-cyan-subtle: color-mix(in srgb, var(--oui-color-cyan) 10%, transparent);
+    --oui-color-cyan-border: color-mix(in srgb, var(--oui-color-cyan) 26%, transparent);
+    --oui-color-green-subtle: color-mix(in srgb, var(--oui-color-green) 10%, transparent);
+    --oui-color-green-border: color-mix(in srgb, var(--oui-color-green) 26%, transparent);
+    --oui-color-yellow-subtle: color-mix(in srgb, var(--oui-color-yellow) 10%, transparent);
+    --oui-color-yellow-border: color-mix(in srgb, var(--oui-color-yellow) 26%, transparent);
+    --oui-color-purple-subtle: color-mix(in srgb, var(--oui-color-purple) 10%, transparent);
+    --oui-color-purple-border: color-mix(in srgb, var(--oui-color-purple) 26%, transparent);
+    --oui-color-pink-subtle: color-mix(in srgb, var(--oui-color-pink) 10%, transparent);
+    --oui-color-pink-border: color-mix(in srgb, var(--oui-color-pink) 26%, transparent);
     --oui-color-inverse: var(--oui-color-brand);
     --oui-color-on-inverse: #ffffff;
     --oui-color-on-inverse-muted: rgba(255, 255, 255, 0.72);
@@ -128,7 +153,7 @@
     --oui-color-primary: color-mix(in oklab, var(--oui-color-accent) 30%, white);
     --oui-color-primary-hover: color-mix(in oklab, var(--oui-color-accent) 16%, white);
     --oui-color-on-primary: color-mix(in oklab, var(--oui-color-brand) 75%, black);
-    --oui-color-accent-text: color-mix(in oklab, var(--oui-color-accent) 55%, white);
+    --oui-color-accent-text: color-mix(in oklab, var(--oui-color-accent) 35%, white);
     --oui-color-text: color-mix(in oklab, var(--oui-color-accent) 6%, #ececf0);
     --oui-color-text-strong: #ffffff;
     --oui-color-text-muted: color-mix(in oklab, var(--oui-color-accent) 25%, #a6a1ae);
@@ -143,6 +168,19 @@
     --oui-color-warning-text: #ffb68a;
     --oui-color-danger: #f0587f;
     --oui-color-danger-text: #ff9db5;
+    --oui-color-on-tone: #15121b;
+    --oui-color-blue: #5b9bf0;
+    --oui-color-blue-text: #a8cbff;
+    --oui-color-cyan: #3ec1df;
+    --oui-color-cyan-text: #8fe3f5;
+    --oui-color-green: #6fcf5a;
+    --oui-color-green-text: #b2eba3;
+    --oui-color-yellow: #f0c53e;
+    --oui-color-yellow-text: #ffe08a;
+    --oui-color-purple: #a585f0;
+    --oui-color-purple-text: #d2c1ff;
+    --oui-color-pink: #f07ac8;
+    --oui-color-pink-text: #ffb8e4;
     --oui-color-inverse: color-mix(in oklab, var(--oui-color-accent) 8%, #0a0810);
     --oui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
     --oui-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px -2px rgba(0, 0, 0, 0.3);
@@ -652,6 +690,21 @@
     outline: 2px solid var(--_focus);
     outline-offset: -2px;
   }
+  .oui-navbar .oui-toggle-group[data-variant=segmented] {
+    background: color-mix(in srgb, var(--_fg) 8%, transparent);
+  }
+  .oui-navbar .oui-toggle-group[data-variant=segmented] > .oui-toggle {
+    color: var(--_fg-muted);
+  }
+  .oui-navbar .oui-toggle-group[data-variant=segmented] > .oui-toggle:hover:not([data-disabled], [data-pressed]) {
+    background: var(--_hover);
+    color: var(--_fg);
+  }
+  .oui-navbar .oui-toggle-group[data-variant=segmented] > .oui-toggle[data-pressed] {
+    background: color-mix(in srgb, var(--_fg) 18%, transparent);
+    box-shadow: none;
+    color: var(--_fg);
+  }
   .oui-navbar[data-collapsed] .oui-navbar__toggle svg,
   .oui-navbar[data-peek] .oui-navbar__toggle svg {
     transform: rotate(180deg);
@@ -740,7 +793,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    z-index: calc(var(--oui-z-dropdown) - 1);
+    z-index: calc(var(--oui-z-dialog) - 1);
     width: 100%;
   }
   .oui-app-shell__navbar > .oui-navbar[data-peek] {
@@ -845,12 +898,46 @@
   .oui-app-shell__drawer[data-starting-style], .oui-app-shell__drawer[data-ending-style] {
     transform: translateX(-100%);
   }
+  .oui-app-shell__menu-button,
+  .oui-app-shell__drawer-close {
+    box-sizing: border-box;
+    margin: 0;
+    font-family: var(--oui-font-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    padding: 0;
+    border: 0;
+    border-radius: var(--oui-radius-sm);
+    background: transparent;
+    color: var(--oui-color-on-inverse);
+    cursor: pointer;
+    transition: background-color var(--oui-duration-normal) var(--oui-ease);
+  }
+  .oui-app-shell__menu-button svg,
+  .oui-app-shell__drawer-close svg {
+    flex-shrink: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+  .oui-app-shell__menu-button:hover,
+  .oui-app-shell__drawer-close:hover {
+    background: var(--oui-color-inverse-hover);
+  }
+  .oui-app-shell__menu-button:focus-visible,
+  .oui-app-shell__drawer-close:focus-visible {
+    outline: 2px solid var(--oui-color-on-inverse);
+    outline-offset: -2px;
+  }
   .oui-app-shell__drawer-close {
     position: absolute;
     top: 1.35rem;
     right: 0.75rem;
     z-index: 1;
-    color: var(--oui-color-on-inverse);
   }
   @media (max-width: 900px) {
     .oui-app-shell {
@@ -1046,12 +1133,14 @@
     --_tone-text: var(--oui-color-text-strong);
     --_tone-subtle: var(--oui-color-surface-muted);
     --_tone-border: var(--oui-color-border);
+    --_tone-fg: var(--oui-color-on-tone);
   }
-  .oui-badge[data-tone=accent], .oui-badge[data-tone=info] {
-    --_tone: var(--oui-color-accent);
-    --_tone-text: var(--oui-color-accent-text);
-    --_tone-subtle: var(--oui-color-accent-subtle);
+  .oui-badge[data-tone=info] {
+    --_tone: var(--oui-color-info);
+    --_tone-text: var(--oui-color-info-text);
+    --_tone-subtle: var(--oui-color-info-subtle);
     --_tone-border: var(--oui-color-info-border);
+    --_tone-fg: var(--oui-color-on-accent);
   }
   .oui-badge[data-tone=success] {
     --_tone: var(--oui-color-success);
@@ -1064,6 +1153,7 @@
     --_tone-text: var(--oui-color-warning-text);
     --_tone-subtle: var(--oui-color-warning-subtle);
     --_tone-border: var(--oui-color-warning-border);
+    --_tone-fg: color-mix(in oklab, var(--_tone) 22%, black);
   }
   .oui-badge[data-tone=danger] {
     --_tone: var(--oui-color-danger);
@@ -1071,6 +1161,50 @@
     --_tone-subtle: var(--oui-color-danger-subtle);
     --_tone-border: var(--oui-color-danger-border);
   }
+  .oui-badge[data-tone=blue] {
+    --_tone: var(--oui-color-blue);
+    --_tone-text: var(--oui-color-blue-text);
+    --_tone-subtle: var(--oui-color-blue-subtle);
+    --_tone-border: var(--oui-color-blue-border);
+  }
+  .oui-badge[data-tone=cyan] {
+    --_tone: var(--oui-color-cyan);
+    --_tone-text: var(--oui-color-cyan-text);
+    --_tone-subtle: var(--oui-color-cyan-subtle);
+    --_tone-border: var(--oui-color-cyan-border);
+  }
+  .oui-badge[data-tone=green] {
+    --_tone: var(--oui-color-green);
+    --_tone-text: var(--oui-color-green-text);
+    --_tone-subtle: var(--oui-color-green-subtle);
+    --_tone-border: var(--oui-color-green-border);
+  }
+  .oui-badge[data-tone=yellow] {
+    --_tone: var(--oui-color-yellow);
+    --_tone-text: var(--oui-color-yellow-text);
+    --_tone-subtle: var(--oui-color-yellow-subtle);
+    --_tone-border: var(--oui-color-yellow-border);
+    --_tone-fg: color-mix(in oklab, var(--_tone) 22%, black);
+  }
+  .oui-badge[data-tone=purple] {
+    --_tone: var(--oui-color-purple);
+    --_tone-text: var(--oui-color-purple-text);
+    --_tone-subtle: var(--oui-color-purple-subtle);
+    --_tone-border: var(--oui-color-purple-border);
+  }
+  .oui-badge[data-tone=pink] {
+    --_tone: var(--oui-color-pink);
+    --_tone-text: var(--oui-color-pink-text);
+    --_tone-subtle: var(--oui-color-pink-subtle);
+    --_tone-border: var(--oui-color-pink-border);
+  }
+  .oui-badge[data-tone=accent], .oui-badge[data-tone=info] {
+    --_tone: var(--oui-color-accent);
+    --_tone-text: var(--oui-color-accent-text);
+    --_tone-subtle: var(--oui-color-accent-subtle);
+    --_tone-border: var(--oui-color-info-border);
+    --_tone-fg: var(--oui-color-on-accent);
+  }
   .oui-badge {
     display: inline-flex;
     align-items: center;
@@ -1103,7 +1237,7 @@
   .oui-badge[data-variant=solid] {
     border-color: transparent;
     background: var(--_tone);
-    color: #ffffff;
+    color: var(--_tone-fg);
   }
   .oui-badge[data-variant=solid][data-tone=neutral] {
     background: var(--oui-color-primary);
@@ -1294,6 +1428,97 @@
     --_bg-hover: color-mix(in oklab, var(--oui-color-danger) 86%, black);
     --_fg: #ffffff;
   }
+  .oui-button[data-tone] {
+    --_tone-fg: var(--oui-color-on-tone);
+  }
+  .oui-button[data-tone=info] {
+    --_tone: var(--oui-color-info);
+    --_tone-text: var(--oui-color-info-text);
+    --_tone-subtle: var(--oui-color-info-subtle);
+    --_tone-border: var(--oui-color-info-border);
+    --_tone-fg: var(--oui-color-on-accent);
+  }
+  .oui-button[data-tone=success] {
+    --_tone: var(--oui-color-success);
+    --_tone-text: var(--oui-color-success-text);
+    --_tone-subtle: var(--oui-color-success-subtle);
+    --_tone-border: var(--oui-color-success-border);
+  }
+  .oui-button[data-tone=warning] {
+    --_tone: var(--oui-color-warning);
+    --_tone-text: var(--oui-color-warning-text);
+    --_tone-subtle: var(--oui-color-warning-subtle);
+    --_tone-border: var(--oui-color-warning-border);
+    --_tone-fg: color-mix(in oklab, var(--_tone) 22%, black);
+  }
+  .oui-button[data-tone=danger] {
+    --_tone: var(--oui-color-danger);
+    --_tone-text: var(--oui-color-danger-text);
+    --_tone-subtle: var(--oui-color-danger-subtle);
+    --_tone-border: var(--oui-color-danger-border);
+  }
+  .oui-button[data-tone=blue] {
+    --_tone: var(--oui-color-blue);
+    --_tone-text: var(--oui-color-blue-text);
+    --_tone-subtle: var(--oui-color-blue-subtle);
+    --_tone-border: var(--oui-color-blue-border);
+  }
+  .oui-button[data-tone=cyan] {
+    --_tone: var(--oui-color-cyan);
+    --_tone-text: var(--oui-color-cyan-text);
+    --_tone-subtle: var(--oui-color-cyan-subtle);
+    --_tone-border: var(--oui-color-cyan-border);
+  }
+  .oui-button[data-tone=green] {
+    --_tone: var(--oui-color-green);
+    --_tone-text: var(--oui-color-green-text);
+    --_tone-subtle: var(--oui-color-green-subtle);
+    --_tone-border: var(--oui-color-green-border);
+  }
+  .oui-button[data-tone=yellow] {
+    --_tone: var(--oui-color-yellow);
+    --_tone-text: var(--oui-color-yellow-text);
+    --_tone-subtle: var(--oui-color-yellow-subtle);
+    --_tone-border: var(--oui-color-yellow-border);
+    --_tone-fg: color-mix(in oklab, var(--_tone) 22%, black);
+  }
+  .oui-button[data-tone=purple] {
+    --_tone: var(--oui-color-purple);
+    --_tone-text: var(--oui-color-purple-text);
+    --_tone-subtle: var(--oui-color-purple-subtle);
+    --_tone-border: var(--oui-color-purple-border);
+  }
+  .oui-button[data-tone=pink] {
+    --_tone: var(--oui-color-pink);
+    --_tone-text: var(--oui-color-pink-text);
+    --_tone-subtle: var(--oui-color-pink-subtle);
+    --_tone-border: var(--oui-color-pink-border);
+  }
+  .oui-button[data-tone]:is([data-variant=primary], [data-variant=accent], [data-variant=danger]) {
+    --_bg: var(--_tone);
+    --_bg-hover: color-mix(in oklab, var(--_tone) 86%, black);
+    --_fg: var(--_tone-fg);
+  }
+  .oui-button[data-tone][data-variant=secondary] {
+    --_bg-hover: var(--_tone-subtle);
+    --_fg: var(--_tone-text);
+    --_border: var(--_tone-border);
+    --_border-hover: var(--_tone);
+  }
+  .oui-button[data-tone][data-variant=soft] {
+    --_bg: var(--_tone-subtle);
+    --_bg-hover: color-mix(in srgb, var(--_tone) 18%, transparent);
+    --_fg: var(--_tone-text);
+  }
+  .oui-button[data-tone][data-variant=ghost] {
+    --_bg-hover: var(--_tone-subtle);
+    --_fg: var(--_tone-text);
+  }
+  @media (hover: hover) {
+    .oui-button[data-tone][data-variant=ghost]:hover:not([data-disabled]) {
+      color: var(--_tone-text);
+    }
+  }
   .oui-button__spinner {
     width: 1.1em;
     height: 1.1em;
@@ -1678,6 +1903,7 @@
     justify-content: center;
     width: var(--_box);
     height: var(--_box);
+    vertical-align: middle;
     border: var(--oui-control-border-width) solid var(--oui-color-border-hover);
     background: var(--oui-color-surface);
     color: var(--oui-color-on-accent);
@@ -2388,9 +2614,48 @@
     background: var(--oui-color-accent-subtle);
     color: var(--oui-color-text-strong);
   }
-  .oui-data-table__filter-label {
+  .oui-data-table .oui-data-table__chips > .oui-toggle:has(> .oui-badge) {
+    height: auto;
+    min-width: 0;
+    padding: 0;
+    border-color: transparent;
+    border-radius: var(--oui-radius-pill);
+    background: transparent;
+  }
+  .oui-data-table .oui-data-table__chips > .oui-toggle:has(> .oui-badge) > .oui-badge {
+    transition: border-color var(--oui-duration-fast) var(--oui-ease);
+  }
+  @media (hover: hover) {
+    .oui-data-table .oui-data-table__chips > .oui-toggle:has(> .oui-badge):hover:not([data-disabled], [data-pressed]) {
+      border-color: transparent;
+    }
+    .oui-data-table .oui-data-table__chips > .oui-toggle:has(> .oui-badge):hover:not([data-disabled], [data-pressed]) > .oui-badge {
+      border-color: var(--_tone-border);
+    }
+  }
+  .oui-data-table .oui-data-table__chips > .oui-toggle:has(> .oui-badge)[data-pressed] > .oui-badge {
+    border-color: var(--_tone);
+    box-shadow: inset 0 0 0 0.5px var(--_tone);
+  }
+  .oui-data-table__filter-label,
+  .oui-data-table__filter-count {
     color: var(--oui-color-text-muted);
   }
+  .oui-data-table__filter-count {
+    font-variant-numeric: tabular-nums;
+  }
+  .oui-data-table[data-fill] {
+    flex: 1;
+    min-height: 0;
+  }
+  .oui-data-table[data-fill] .oui-data-table__scroll {
+    flex: 1;
+    min-height: 0;
+  }
+  .oui-card__content:has(> .oui-data-table[data-fill]) {
+    display: flex;
+    flex-direction: column;
+  }
   .oui-data-table__actions {
     display: flex;
     flex-wrap: wrap;
@@ -2410,6 +2675,9 @@
   .oui-data-table .oui-table__row[data-clickable] {
     cursor: pointer;
   }
+  .oui-data-table .oui-table__row[data-clickable][data-clickable]:hover:not([data-selected], [data-editing]) {
+    background: var(--oui-color-accent-subtle);
+  }
   .oui-data-table .oui-table__row[data-clickable]:focus-visible {
     outline: 2px solid var(--oui-color-border-focus);
     outline-offset: -2px;
@@ -2433,19 +2701,66 @@
   }
   .oui-data-table .oui-table__row[data-tone][data-tone=info] {
     --_tone: var(--oui-color-info);
+    --_tone-text: var(--oui-color-info-text);
     --_tone-subtle: var(--oui-color-info-subtle);
+    --_tone-border: var(--oui-color-info-border);
+    --_tone-fg: var(--oui-color-on-accent);
   }
   .oui-data-table .oui-table__row[data-tone][data-tone=success] {
     --_tone: var(--oui-color-success);
+    --_tone-text: var(--oui-color-success-text);
     --_tone-subtle: var(--oui-color-success-subtle);
+    --_tone-border: var(--oui-color-success-border);
   }
   .oui-data-table .oui-table__row[data-tone][data-tone=warning] {
     --_tone: var(--oui-color-warning);
+    --_tone-text: var(--oui-color-warning-text);
     --_tone-subtle: var(--oui-color-warning-subtle);
+    --_tone-border: var(--oui-color-warning-border);
+    --_tone-fg: color-mix(in oklab, var(--_tone) 22%, black);
   }
   .oui-data-table .oui-table__row[data-tone][data-tone=danger] {
     --_tone: var(--oui-color-danger);
+    --_tone-text: var(--oui-color-danger-text);
     --_tone-subtle: var(--oui-color-danger-subtle);
+    --_tone-border: var(--oui-color-danger-border);
+  }
+  .oui-data-table .oui-table__row[data-tone][data-tone=blue] {
+    --_tone: var(--oui-color-blue);
+    --_tone-text: var(--oui-color-blue-text);
+    --_tone-subtle: var(--oui-color-blue-subtle);
+    --_tone-border: var(--oui-color-blue-border);
+  }
+  .oui-data-table .oui-table__row[data-tone][data-tone=cyan] {
+    --_tone: var(--oui-color-cyan);
+    --_tone-text: var(--oui-color-cyan-text);
+    --_tone-subtle: var(--oui-color-cyan-subtle);
+    --_tone-border: var(--oui-color-cyan-border);
+  }
+  .oui-data-table .oui-table__row[data-tone][data-tone=green] {
+    --_tone: var(--oui-color-green);
+    --_tone-text: var(--oui-color-green-text);
+    --_tone-subtle: var(--oui-color-green-subtle);
+    --_tone-border: var(--oui-color-green-border);
+  }
+  .oui-data-table .oui-table__row[data-tone][data-tone=yellow] {
+    --_tone: var(--oui-color-yellow);
+    --_tone-text: var(--oui-color-yellow-text);
+    --_tone-subtle: var(--oui-color-yellow-subtle);
+    --_tone-border: var(--oui-color-yellow-border);
+    --_tone-fg: color-mix(in oklab, var(--_tone) 22%, black);
+  }
+  .oui-data-table .oui-table__row[data-tone][data-tone=purple] {
+    --_tone: var(--oui-color-purple);
+    --_tone-text: var(--oui-color-purple-text);
+    --_tone-subtle: var(--oui-color-purple-subtle);
+    --_tone-border: var(--oui-color-purple-border);
+  }
+  .oui-data-table .oui-table__row[data-tone][data-tone=pink] {
+    --_tone: var(--oui-color-pink);
+    --_tone-text: var(--oui-color-pink-text);
+    --_tone-subtle: var(--oui-color-pink-subtle);
+    --_tone-border: var(--oui-color-pink-border);
   }
   .oui-data-table .oui-data-table__row-actions {
     width: 1%;
@@ -2708,6 +3023,51 @@
     opacity: var(--oui-control-disabled-opacity);
   }
 }
+@layer oui.components {
+  .oui-description-list {
+    box-sizing: border-box;
+    margin: 0;
+    font-family: var(--oui-font-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-size: var(--oui-font-size-md);
+  }
+  .oui-description-list[data-layout=rows] > .oui-description-list__item {
+    display: grid;
+    grid-template-columns: 1fr 1.3fr;
+    align-items: start;
+    gap: var(--oui-space-8);
+    padding: var(--oui-space-8) 0;
+    border-bottom: 1px solid var(--oui-color-border-subtle);
+  }
+  .oui-description-list[data-layout=rows] > .oui-description-list__item:last-child {
+    border-bottom: 0;
+  }
+  .oui-description-list[data-layout=grid] {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--oui-description-list-columns, 16rem), 1fr));
+    gap: var(--oui-space-6) var(--oui-space-12);
+  }
+  .oui-description-list[data-layout=grid] .oui-description-list__label {
+    color: var(--oui-color-text-muted);
+    font-size: var(--oui-font-size-sm);
+  }
+  .oui-description-list__label {
+    color: var(--oui-color-text-subtle);
+  }
+  .oui-description-list__value {
+    margin: 0;
+    color: var(--oui-color-text);
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+  }
+  @media (max-width: 440px) {
+    .oui-description-list[data-layout=rows] > .oui-description-list__item {
+      grid-template-columns: 1fr;
+      gap: var(--oui-space-3);
+    }
+  }
+}
 @layer oui.components {
   .oui-dialog__backdrop {
     --_blur: 8px;
@@ -2731,9 +3091,12 @@
   .oui-dialog__backdrop[data-blur=lg] {
     --_blur: 16px;
   }
-  .oui-dialog__backdrop[data-nested] {
+  .oui-dialog__backdrop[data-nested]:not([data-show-nested]) {
     display: none;
   }
+  .oui-dialog__backdrop[data-nested][data-show-nested] {
+    background: transparent;
+  }
   .oui-dialog {
     box-sizing: border-box;
     margin: 0;
@@ -4848,6 +5211,11 @@
   .oui-table[data-hoverable] .oui-table__body .oui-table__row:hover {
     background: var(--oui-color-surface-hover);
   }
+  .oui-table .oui-table__cell a:not(.oui-button, .oui-link):hover {
+    color: var(--oui-color-accent-text);
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+  }
   .oui-table[data-sticky-header] .oui-table__head {
     position: sticky;
     top: 0;
@@ -5101,12 +5469,14 @@
     --_tone-text: var(--oui-color-text-strong);
     --_tone-subtle: var(--oui-color-surface-muted);
     --_tone-border: var(--oui-color-border);
+    --_tone-fg: var(--oui-color-on-tone);
   }
-  .oui-tag[data-tone=accent], .oui-tag[data-tone=info] {
-    --_tone: var(--oui-color-accent);
-    --_tone-text: var(--oui-color-accent-text);
-    --_tone-subtle: var(--oui-color-accent-subtle);
+  .oui-tag[data-tone=info] {
+    --_tone: var(--oui-color-info);
+    --_tone-text: var(--oui-color-info-text);
+    --_tone-subtle: var(--oui-color-info-subtle);
     --_tone-border: var(--oui-color-info-border);
+    --_tone-fg: var(--oui-color-on-accent);
   }
   .oui-tag[data-tone=success] {
     --_tone: var(--oui-color-success);
@@ -5119,6 +5489,7 @@
     --_tone-text: var(--oui-color-warning-text);
     --_tone-subtle: var(--oui-color-warning-subtle);
     --_tone-border: var(--oui-color-warning-border);
+    --_tone-fg: color-mix(in oklab, var(--_tone) 22%, black);
   }
   .oui-tag[data-tone=danger] {
     --_tone: var(--oui-color-danger);
@@ -5126,6 +5497,50 @@
     --_tone-subtle: var(--oui-color-danger-subtle);
     --_tone-border: var(--oui-color-danger-border);
   }
+  .oui-tag[data-tone=blue] {
+    --_tone: var(--oui-color-blue);
+    --_tone-text: var(--oui-color-blue-text);
+    --_tone-subtle: var(--oui-color-blue-subtle);
+    --_tone-border: var(--oui-color-blue-border);
+  }
+  .oui-tag[data-tone=cyan] {
+    --_tone: var(--oui-color-cyan);
+    --_tone-text: var(--oui-color-cyan-text);
+    --_tone-subtle: var(--oui-color-cyan-subtle);
+    --_tone-border: var(--oui-color-cyan-border);
+  }
+  .oui-tag[data-tone=green] {
+    --_tone: var(--oui-color-green);
+    --_tone-text: var(--oui-color-green-text);
+    --_tone-subtle: var(--oui-color-green-subtle);
+    --_tone-border: var(--oui-color-green-border);
+  }
+  .oui-tag[data-tone=yellow] {
+    --_tone: var(--oui-color-yellow);
+    --_tone-text: var(--oui-color-yellow-text);
+    --_tone-subtle: var(--oui-color-yellow-subtle);
+    --_tone-border: var(--oui-color-yellow-border);
+    --_tone-fg: color-mix(in oklab, var(--_tone) 22%, black);
+  }
+  .oui-tag[data-tone=purple] {
+    --_tone: var(--oui-color-purple);
+    --_tone-text: var(--oui-color-purple-text);
+    --_tone-subtle: var(--oui-color-purple-subtle);
+    --_tone-border: var(--oui-color-purple-border);
+  }
+  .oui-tag[data-tone=pink] {
+    --_tone: var(--oui-color-pink);
+    --_tone-text: var(--oui-color-pink-text);
+    --_tone-subtle: var(--oui-color-pink-subtle);
+    --_tone-border: var(--oui-color-pink-border);
+  }
+  .oui-tag[data-tone=accent], .oui-tag[data-tone=info] {
+    --_tone: var(--oui-color-accent);
+    --_tone-text: var(--oui-color-accent-text);
+    --_tone-subtle: var(--oui-color-accent-subtle);
+    --_tone-border: var(--oui-color-info-border);
+    --_tone-fg: var(--oui-color-on-accent);
+  }
   .oui-tag {
     display: inline-flex;
     align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optimum-intelligence/opti-ui",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "Optimum's customizable React component library, built on Base UI.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Optimum Intelligence",
@@ -73,5 +73,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "allowScripts": {
+    "@parcel/watcher@2.6.0": true
   }
 }