@mastra/playground-ui 30.0.2-alpha.2 → 31.0.0-alpha.4

package/dist/index.css

@@ -296,6 +296,7 @@
     --color-border1: var(--border1);
     --color-border2: var(--border2);
     --color-surface-overlay-soft: var(--surface-overlay-soft);
+    --color-surface-overlay-strong: var(--surface-overlay-strong);
     --color-negative1: var(--negative1);
     --color-notice-success: var(--notice-success);
     --color-notice-success-fg: var(--notice-success-fg);
@@ -1062,6 +1063,11 @@
     margin-bottom: 4vh;
   }
 
+  .-ml-px {
+    margin-left: -1px;
+    margin-left: calc(var(--spacing-px) * -1);
+  }
+
   .ml-0\! {
     margin-left: var(--spacing-0) !important;
   }
@@ -4300,6 +4306,10 @@
     box-shadow: var(--shadow-dialog);
   }
 
+  .ring-accent1 {
+    --tw-ring-color: var(--color-accent1);
+  }
+
   .outline-hidden {
     --tw-outline-style: none;
     outline-style: none;
@@ -4610,6 +4620,38 @@
     background-color: var(--color-surface5);
   }
 
+  .group-data-\[size\=default\]\/input-group\:h-form-default:is(:where(.group\/input-group)[data-size="default"] *) {
+    height: var(--spacing-form-default);
+  }
+
+  .group-data-\[size\=default\]\/input-group\:text-ui-md:is(:where(.group\/input-group)[data-size="default"] *) {
+    font-size: var(--text-ui-md);
+  }
+
+  .group-data-\[size\=lg\]\/input-group\:h-form-lg:is(:where(.group\/input-group)[data-size="lg"] *) {
+    height: var(--spacing-form-lg);
+  }
+
+  .group-data-\[size\=lg\]\/input-group\:text-ui-lg:is(:where(.group\/input-group)[data-size="lg"] *) {
+    font-size: var(--text-ui-lg);
+  }
+
+  .group-data-\[size\=md\]\/input-group\:h-form-md:is(:where(.group\/input-group)[data-size="md"] *) {
+    height: var(--spacing-form-md);
+  }
+
+  .group-data-\[size\=md\]\/input-group\:text-ui-md:is(:where(.group\/input-group)[data-size="md"] *) {
+    font-size: var(--text-ui-md);
+  }
+
+  .group-data-\[size\=sm\]\/input-group\:h-form-sm:is(:where(.group\/input-group)[data-size="sm"] *) {
+    height: var(--spacing-form-sm);
+  }
+
+  .group-data-\[size\=sm\]\/input-group\:text-ui-sm:is(:where(.group\/input-group)[data-size="sm"] *) {
+    font-size: var(--text-ui-sm);
+  }
+
   .group-data-\[variant\=line\]\/tabs-list\:border-b-2:is(:where(.group\/tabs-list)[data-variant="line"] *) {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 2px;
@@ -4975,6 +5017,20 @@
     border-color: var(--color-neutral2);
   }
 
+  .focus-within\:border-neutral5\/50:focus-within {
+    border-color: var(--color-neutral5);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .focus-within\:border-neutral5\/50:focus-within {
+      border-color: color-mix(in oklab, var(--color-neutral5) 50%, transparent);
+    }
+  }
+
+  .focus-within\:bg-surface-overlay-strong:focus-within {
+    background-color: var(--color-surface-overlay-strong);
+  }
+
   .focus-within\:bg-surface4:focus-within {
     background-color: var(--color-surface4);
   }
@@ -5117,6 +5173,10 @@
       background-color: var(--sidebar-nav-hover);
     }
 
+    .hover\:bg-surface-overlay-strong:hover {
+      background-color: var(--color-surface-overlay-strong);
+    }
+
     .hover\:bg-surface2:hover {
       background-color: var(--color-surface2);
     }
@@ -5227,21 +5287,6 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .focus\:shadow-glow-accent2:focus {
-    --tw-shadow: 0 0 20px var(--tw-shadow-color, oklch(63.7% .237 25.331 / .25));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-
-  .focus\:shadow-none:focus {
-    --tw-shadow: 0 0 #0000;
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-
-  .focus\:ring-0:focus {
-    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-
   .focus\:ring-1:focus {
     --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -5257,10 +5302,6 @@
     }
   }
 
-  .focus\:ring-error:focus {
-    --tw-ring-color: var(--color-error);
-  }
-
   .focus\:outline-hidden:focus {
     --tw-outline-style: none;
     outline-style: none;
@@ -5307,10 +5348,28 @@
     border-color: var(--color-border2);
   }
 
+  .focus-visible\:border-error:focus-visible {
+    border-color: var(--color-error);
+  }
+
+  .focus-visible\:border-neutral5\/50:focus-visible {
+    border-color: var(--color-neutral5);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .focus-visible\:border-neutral5\/50:focus-visible {
+      border-color: color-mix(in oklab, var(--color-neutral5) 50%, transparent);
+    }
+  }
+
   .focus-visible\:border-transparent:focus-visible {
     border-color: #0000;
   }
 
+  .focus-visible\:bg-surface-overlay-strong:focus-visible {
+    background-color: var(--color-surface-overlay-strong);
+  }
+
   .focus-visible\:bg-surface3:focus-visible {
     background-color: var(--color-surface3);
   }
@@ -5490,19 +5549,38 @@
     border-color: var(--color-error);
   }
 
-  .has-\[\[aria-invalid\=true\]\]\:focus-within\:shadow-glow-accent2:has([aria-invalid="true"]):focus-within {
-    --tw-shadow: 0 0 20px var(--tw-shadow-color, oklch(63.7% .237 25.331 / .25));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  .has-\[textarea\]\:h-auto:has(:is(textarea)) {
+    height: auto;
   }
 
-  .has-\[\[aria-invalid\=true\]\]\:focus-within\:ring-error:has([aria-invalid="true"]):focus-within {
-    --tw-ring-color: var(--color-error);
+  .has-\[textarea\]\:rounded-xl:has(:is(textarea)) {
+    border-radius: var(--radius-xl);
+  }
+
+  .has-\[\>\[data-align\=block-end\]\]\:h-auto:has( > [data-align="block-end"]) {
+    height: auto;
   }
 
-  .has-\[\>\[data-align\=block-end\]\]\:flex-col:has( > [data-align="block-end"]), .has-\[\>\[data-align\=block-start\]\]\:flex-col:has( > [data-align="block-start"]) {
+  .has-\[\>\[data-align\=block-end\]\]\:flex-col:has( > [data-align="block-end"]) {
     flex-direction: column;
   }
 
+  .has-\[\>\[data-align\=block-end\]\]\:rounded-xl:has( > [data-align="block-end"]) {
+    border-radius: var(--radius-xl);
+  }
+
+  .has-\[\>\[data-align\=block-start\]\]\:h-auto:has( > [data-align="block-start"]) {
+    height: auto;
+  }
+
+  .has-\[\>\[data-align\=block-start\]\]\:flex-col:has( > [data-align="block-start"]) {
+    flex-direction: column;
+  }
+
+  .has-\[\>\[data-align\=block-start\]\]\:rounded-xl:has( > [data-align="block-start"]) {
+    border-radius: var(--radius-xl);
+  }
+
   .has-\[\>button\]\:pr-1:has( > button) {
     padding-right: var(--spacing-1);
   }
@@ -6560,6 +6638,26 @@
     border-top-width: 1px;
   }
 
+  .\[\&\:\:-webkit-inner-spin-button\]\:m-0::-webkit-inner-spin-button {
+    margin: var(--spacing-0);
+  }
+
+  .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
+    appearance: none;
+  }
+
+  .\[\&\:\:-webkit-outer-spin-button\]\:m-0::-webkit-outer-spin-button {
+    margin: var(--spacing-0);
+  }
+
+  .\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button {
+    appearance: none;
+  }
+
+  .\[\&\:\:-webkit-search-cancel-button\]\:appearance-none::-webkit-search-cancel-button {
+    appearance: none;
+  }
+
   .\[\&\:after\]\:absolute:after {
     position: absolute;
   }
@@ -6691,6 +6789,10 @@
     color: var(--color-black);
   }
 
+  .\[\&\:hover\:not\(\:focus-within\)\]\:border-border2:hover:not(:focus-within) {
+    border-color: var(--color-border2);
+  }
+
   .\[\&\:hover\>div\]\:bg-surface5:hover > div {
     background-color: var(--color-surface5);
   }
@@ -6769,12 +6871,38 @@
     z-index: 10;
   }
 
+  .\[\&\>\*\:has\(\+_\*\:not\(\[aria-hidden\=true\]\)\)\]\:rounded-r-none > :has( + :not([aria-hidden="true"])) {
+    border-top-right-radius: var(--radius-none);
+    border-bottom-right-radius: var(--radius-none);
+  }
+
+  .\[\&\>\*\:has\(\:focus-visible\)\]\:relative > :has(:focus-visible) {
+    position: relative;
+  }
+
+  .\[\&\>\*\:has\(\:focus-visible\)\]\:z-10 > :has(:focus-visible) {
+    z-index: 10;
+  }
+
+  .\[\&\>\*\:has\(\~_\*\:not\(\[aria-hidden\=true\]\)\:not\(\[data-base-ui-focus-guard\]\)\:not\(\[aria-owns\]\)\)\]\:rounded-r-none > :has( ~ :not([aria-hidden="true"]):not([data-base-ui-focus-guard]):not([aria-owns])) {
+    border-top-right-radius: var(--radius-none);
+    border-bottom-right-radius: var(--radius-none);
+  }
+
+  .\[\&\>\*\:hover\]\:relative > :hover {
+    position: relative;
+  }
+
+  .\[\&\>\*\:hover\]\:z-10 > :hover {
+    z-index: 10;
+  }
+
   .\[\&\>\*\:not\(\:first-child\)\]\:rounded-t-none > :not(:first-child) {
     border-top-left-radius: var(--radius-none);
     border-top-right-radius: var(--radius-none);
   }
 
-  .\[\&\>\*\:not\(\:first-child\)\]\:rounded-l-none > :not(:first-child) {
+  .\[\&\>\*\:not\(\:first-child\)\]\:rounded-l-none > :not(:first-child), .\[\&\>\*\:not\(\:first-child\)\:not\(\[aria-hidden\=true\]\)\:not\(\[data-base-ui-focus-guard\]\)\:not\(\[aria-owns\]\)\]\:rounded-l-none > :not(:first-child):not([aria-hidden="true"]):not([data-base-ui-focus-guard]):not([aria-owns]) {
     border-top-left-radius: var(--radius-none);
     border-bottom-left-radius: var(--radius-none);
   }
@@ -6789,16 +6917,36 @@
     border-bottom-left-radius: var(--radius-none);
   }
 
+  .\[\&\>\*\:not\(\[data-slot\=buttons-group-separator\]\)\]\:transition-\[color\,background-color\] > :not([data-slot="buttons-group-separator"]) {
+    transition-property: color, background-color;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .\[\&\>\*\:not\(\[data-slot\=buttons-group-separator\]\)\:not\(\:first-child\)\]\:-mt-px > :not([data-slot="buttons-group-separator"]):not(:first-child) {
     margin-top: -1px;
     margin-top: calc(var(--spacing-px) * -1);
   }
 
-  .\[\&\>\*\:not\(\[data-slot\=buttons-group-separator\]\)\:not\(\:first-child\)\]\:-ml-px > :not([data-slot="buttons-group-separator"]):not(:first-child) {
+  .\[\&\>\*\:not\(\[data-slot\=buttons-group-separator\]\)\:not\(\[aria-hidden\=true\]\)\]\:transition-\[color\,background-color\] > :not([data-slot="buttons-group-separator"]):not([aria-hidden="true"]) {
+    transition-property: color, background-color;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .\[\&\>\*\:not\(\[data-slot\=buttons-group-separator\]\)\:not\(\[aria-hidden\=true\]\)\:not\(\[data-base-ui-focus-guard\]\)\:not\(\[aria-owns\]\)\:not\(\:first-child\)\]\:-ml-px > :not([data-slot="buttons-group-separator"]):not([aria-hidden="true"]):not([data-base-ui-focus-guard]):not([aria-owns]):not(:first-child) {
     margin-left: -1px;
     margin-left: calc(var(--spacing-px) * -1);
   }
 
+  .\[\&\>\*\:not\(\[data-slot\=buttons-group-separator\]\)\:not\(\[data-slot\=buttons-group-text\]\)\:not\(\[data-variant\=default\]\)\:not\(\[data-variant\=primary\]\)\:not\(\:first-child\)\:not\(\:hover\)\:not\(\:focus-visible\)\:not\(\:has\(\:focus-visible\)\)\]\:border-t-transparent > :not([data-slot="buttons-group-separator"]):not([data-slot="buttons-group-text"]):not([data-variant="default"]):not([data-variant="primary"]):not(:first-child):not(:hover):not(:focus-visible):not(:has(:focus-visible)) {
+    border-top-color: #0000;
+  }
+
+  .\[\&\>\*\:not\(\[data-slot\=buttons-group-separator\]\)\:not\(\[data-slot\=buttons-group-text\]\)\:not\(\[data-variant\=default\]\)\:not\(\[data-variant\=primary\]\)\:not\(\[aria-hidden\=true\]\)\:not\(\[data-base-ui-focus-guard\]\)\:not\(\[aria-owns\]\)\:not\(\:first-child\)\:not\(\:hover\)\:not\(\:focus-visible\)\:not\(\:has\(\:focus-visible\)\)\]\:border-l-transparent > :not([data-slot="buttons-group-separator"]):not([data-slot="buttons-group-text"]):not([data-variant="default"]):not([data-variant="primary"]):not([aria-hidden="true"]):not([data-base-ui-focus-guard]):not([aria-owns]):not(:first-child):not(:hover):not(:focus-visible):not(:has(:focus-visible)) {
+    border-left-color: #0000;
+  }
+
   .\[\&\>\.absolute\]\:hidden > .absolute {
     display: none;
   }
@@ -6845,6 +6993,24 @@
     padding-left: var(--spacing-0);
   }
 
+  .\[\&\>\[data-slot\=select-trigger\]\]\:w-fit > [data-slot="select-trigger"] {
+    width: fit-content;
+  }
+
+  .\[\&\>\[data-slot\=select-trigger\]\]\:flex-none > [data-slot="select-trigger"] {
+    flex: none;
+  }
+
+  .\[\&\>\[data-variant\=primary\]\:not\(\:first-child\)\]\:shadow-\[inset_0_1px_0_0_var\(--color-border1\)\] > [data-variant="primary"]:not(:first-child) {
+    --tw-shadow: inset 0 1px 0 0 var(--tw-shadow-color, var(--color-border1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .\[\&\>\[data-variant\=primary\]\:not\(\[aria-hidden\=true\]\)\:not\(\:first-child\)\]\:shadow-\[inset_1px_0_0_0_var\(--color-border1\)\] > [data-variant="primary"]:not([aria-hidden="true"]):not(:first-child) {
+    --tw-shadow: inset 1px 0 0 0 var(--tw-shadow-color, var(--color-border1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .\[\&\>a\]\:flex > a {
     display: flex;
   }
@@ -7006,6 +7172,10 @@
     color: var(--color-neutral5);
   }
 
+  .\[\&\>input\]\:flex-1 > input {
+    flex: 1;
+  }
+
   .\[\&\>label\]\:absolute > label {
     position: absolute;
   }
@@ -7289,6 +7459,10 @@
     rotate: 90deg;
   }
 
+  .\[\&\[type\=number\]\]\:\[appearance\:textfield\][type="number"] {
+    appearance: textfield;
+  }
+
   .data-list-row:focus-visible + .\[\.data-list-row\:focus-visible\+\&\]\:border-t-transparent, .data-list-row:hover + .\[\.data-list-row\:hover\+\&\]\:border-t-transparent, .data-list-subheader + .\[\.data-list-subheader\+\&\]\:border-t-transparent {
     border-top-color: #0000;
   }