@typlog/ui 0.12.2 → 0.13.0

package/components/scrollarea.css

@@ -1,107 +0,0 @@
-
-.ui-root {
-  --scrollarea-scrollbar-horizontal-margin-top: var(--space-1);
-  --scrollarea-scrollbar-horizontal-margin-bottom: var(--space-1);
-  --scrollarea-scrollbar-horizontal-margin-left: var(--space-1);
-  --scrollarea-scrollbar-horizontal-margin-right: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-top: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-bottom: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
-}
-.ui-ScrollArea {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-}
-.ui-ScrollAreaViewport {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-.ui-ScrollAreaViewport:where(:focus-visible) + :where(.ui-ScrollAreaViewportFocusRing) {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  outline: 2px solid var(--focus-8);
-  outline-offset: -2px;
-}
-.ui-ScrollAreaViewport:where(:has(.ui-ScrollAreaScrollbar[data-orientation='horizontal'])) {
-  overscroll-behavior-x: contain;
-}
-.ui-ScrollAreaScrollbar {
-  display: flex;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  touch-action: none;
-}
-.ui-ScrollAreaScrollbar:where([data-orientation='vertical']) {
-  flex-direction: column;
-  width: var(--scrollarea-scrollbar-size);
-}
-.ui-ScrollAreaScrollbar:where([data-orientation='horizontal']) {
-  flex-direction: row;
-  height: var(--scrollarea-scrollbar-size);
-}
-.ui-ScrollAreaThumb {
-  position: relative;
-}
-.ui-ScrollAreaThumb::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 100%;
-  height: 100%;
-  min-width: var(--space-4);
-  min-height: var(--space-4);
-}
-.ui-ScrollAreaScrollbar:where([data-size="1"]) {
-  --scrollarea-scrollbar-size: var(--space-1);
-  --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
-}
-.ui-ScrollAreaScrollbar:where([data-size="2"]) {
-  --scrollarea-scrollbar-size: var(--space-2);
-  --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
-}
-.ui-ScrollAreaScrollbar:where([data-size="3"]) {
-  --scrollarea-scrollbar-size: var(--space-3);
-  --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
-}
-.ui-ScrollAreaScrollbar {
-  background-color: var(--gray-a3);
-  border-radius: var(--scrollarea-scrollbar-border-radius);
-  animation-duration: 120ms;
-  animation-timing-function: ease-out;
-}
-.ui-ScrollAreaScrollbar:where([data-state='visible']) {
-  animation-name: ui-fade-in;
-}
-.ui-ScrollAreaScrollbar:where([data-state='hidden']) {
-  animation-name: ui-fade-out;
-}
-.ui-ScrollAreaScrollbar:where([data-orientation='horizontal']) {
-  margin-top: var(--scrollarea-scrollbar-horizontal-margin-top);
-  margin-bottom: var(--scrollarea-scrollbar-horizontal-margin-bottom);
-  margin-left: var(--scrollarea-scrollbar-horizontal-margin-left);
-  margin-right: var(--scrollarea-scrollbar-horizontal-margin-right);
-}
-.ui-ScrollAreaScrollbar:where([data-orientation='vertical']) {
-  margin-top: var(--scrollarea-scrollbar-vertical-margin-top);
-  margin-bottom: var(--scrollarea-scrollbar-vertical-margin-bottom);
-  margin-left: var(--scrollarea-scrollbar-vertical-margin-left);
-  margin-right: var(--scrollarea-scrollbar-vertical-margin-right);
-}
-.ui-ScrollAreaThumb {
-  background-color: var(--gray-a8);
-  border-radius: inherit;
-  transition: background-color 100ms;
-}
-.ui-ScrollAreaThumb:hover {
-  background-color: var(--gray-a9);
-}

package/components/separator.css

@@ -1,26 +0,0 @@
-
-.ui-Separator {
-  display: block;
-  box-sizing: border-box;
-  background-color: var(--accent-a6);
-}
-.ui-Separator[aria-orientation="horizontal"] {
-  width: var(--separator-size, auto);
-  height: 1px;
-}
-.ui-Separator[aria-orientation="vertical"] {
-  width: 1px;
-  height: var(--separator-size, auto);
-}
-.ui-Separator:where(.r-size-1) {
-  --separator-size: var(--space-4);
-}
-.ui-Separator:where(.r-size-2) {
-  --separator-size: var(--space-6);
-}
-.ui-Separator:where(.r-size-3) {
-  --separator-size: var(--space-9);
-}
-.ui-Separator:where(.r-size-4) {
-  --separator-size: 100%;
-}

package/components/switch.css

@@ -1,176 +0,0 @@
-
-.ui-root {
-  --switch-disabled-blend-mode: multiply;
-  --switch-high-contrast-checked-color-overlay: var(--black-a8);
-  --switch-high-contrast-checked-active-before-filter: contrast(0.82) saturate(1.2) brightness(1.16);
-  --switch-surface-checked-active-filter: brightness(0.92) saturate(1.1);
-}
-:is(.dark, .dark-theme) .ui-root {
-  --switch-disabled-blend-mode: screen;
-  --switch-high-contrast-checked-color-overlay: transparent;
-  --switch-high-contrast-checked-active-before-filter: brightness(1.08);
-  --switch-surface-checked-active-filter: brightness(1.08);
-}
-.ui-Switch {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  vertical-align: top;
-  flex-shrink: 0;
-  outline: none;
-
-  height: var(--switch-height);
-  --switch-width: calc(var(--switch-height) * 1.75);
-  --switch-thumb-inset: 1px;
-  --switch-thumb-size: calc(var(--switch-height) - var(--switch-thumb-inset) * 2);
-  --switch-thumb-translate-x: calc(var(--switch-width) - var(--switch-height));
-}
-.ui-Switch::before {
-  content: '';
-  display: block;
-  width: var(--switch-width);
-  height: var(--switch-height);
-  border-radius: var(--switch-border-radius);
-  transition: background-position, background-color, box-shadow, filter;
-  transition-timing-function: linear, ease-in-out, ease-in-out, ease-in-out;
-  background-repeat: no-repeat;
-  background-size: calc(var(--switch-width) * 2 + var(--switch-height)) 100%;
-}
-.ui-Switch:where([data-state='unchecked'])::before {
-  transition-duration: 120ms, 140ms, 140ms, 140ms;
-  background-position-x: 100%;
-}
-.ui-Switch:where([data-state='checked'])::before {
-  transition-duration: 160ms, 140ms, 140ms, 140ms;
-  background-position: 0%;
-}
-.ui-Switch:where(:active)::before {
-  transition-duration: 30ms;
-}
-.ui-Switch:where(:focus-visible)::before {
-  outline: 2px solid var(--focus-8);
-  outline-offset: 2px;
-}
-.ui-Switch::before {
-  cursor: default;
-}
-.ui-Switch:where([data-disabled])::before {
-  cursor: not-allowed;
-}
-.ui-SwitchThumb {
-  background-color: white;
-  position: absolute;
-  left: var(--switch-thumb-inset);
-  width: var(--switch-thumb-size);
-  height: var(--switch-thumb-size);
-  border-radius: calc(var(--switch-border-radius) - var(--switch-thumb-inset));
-  transition: transform 140ms cubic-bezier(0.45, 0.05, 0.55, 0.95), box-shadow 140ms ease-in-out;
-}
-.ui-SwitchThumb:where([data-state='checked']) {
-  transform: translateX(var(--switch-thumb-translate-x));
-}
-.ui-Switch:where(.r-size-1) {
-  --switch-height: var(--space-4);
-  --switch-border-radius: max(var(--radius-1), var(--radius-thumb));
-}
-.ui-Switch:where(.r-size-2) {
-  --switch-height: calc(var(--space-5) * 5 / 6);
-  --switch-border-radius: max(var(--radius-2), var(--radius-thumb));
-}
-.ui-Switch:where(.r-size-3) {
-  --switch-height: var(--space-5);
-  --switch-border-radius: max(var(--radius-2), var(--radius-thumb));
-}
-.ui-Switch:where(.r-variant-surface)::before {
-  background-color: var(--gray-a3);
-  background-image: linear-gradient(to right, var(--accent-track) 40%, transparent 60%);
-  box-shadow: inset 0 0 0 1px var(--gray-a5);
-}
-.ui-Switch:where(.r-variant-surface):where(:active)::before {
-  background-color: var(--gray-a4);
-}
-.ui-Switch:where(.r-variant-surface):where([data-state='checked']:active)::before {
-  filter: var(--switch-surface-checked-active-filter);
-}
-.ui-Switch:where(.r-variant-surface):where(.r-high-contrast)::before {
-  background-image:
-    linear-gradient(to right, var(--switch-high-contrast-checked-color-overlay) 40%, transparent 60%),
-    linear-gradient(to right, var(--accent-track) 40%, transparent 60%);
-}
-.ui-Switch:where(.r-variant-surface):where(.r-high-contrast):where([data-state='checked']:active)::before {
-  filter: var(--switch-high-contrast-checked-active-before-filter);
-}
-.ui-Switch:where(.r-variant-surface):where([data-disabled]) {
-  mix-blend-mode: var(--switch-disabled-blend-mode);
-}
-.ui-Switch:where(.r-variant-surface):where([data-disabled])::before {
-  filter: none;
-  background-image: none;
-  background-color: var(--gray-a3);
-  box-shadow: inset 0 0 0 1px var(--gray-a3);
-}
-.ui-Switch:where(.r-variant-surface) .ui-SwitchThumb:where([data-state='unchecked']) {
-  box-shadow: 0 0 1px 1px var(--black-a2), 0 1px 1px var(--black-a1), 0 2px 4px -1px var(--black-a1);
-}
-.ui-Switch:where(.r-variant-surface) .ui-SwitchThumb:where([data-state='checked']) {
-  box-shadow: 0 1px 3px var(--black-a2), 0 2px 4px -1px var(--black-a1), 0 0 0 1px var(--black-a1),
-    0 0 0 1px var(--accent-a4), -1px 0 1px var(--black-a2);
-}
-.ui-Switch:where(.r-variant-surface):where(.r-high-contrast) .ui-SwitchThumb:where([data-state='checked']) {
-  box-shadow: 0 1px 3px var(--black-a2), 0 2px 4px -1px var(--black-a1), 0 0 0 1px var(--black-a2),
-    -1px 0 1px var(--black-a2);
-}
-.ui-Switch:where(.r-variant-surface) .ui-SwitchThumb:where([data-disabled]) {
-  background-color: var(--gray-2);
-  box-shadow: 0 0 0 1px var(--gray-a2), 0 1px 3px var(--black-a1);
-  transition: none;
-}
-.ui-Switch:where(.r-variant-soft)::before {
-  background-image:
-    linear-gradient(to right, var(--accent-a4) 40%, transparent 60%),
-    linear-gradient(to right, var(--accent-a4) 40%, transparent 60%),
-    linear-gradient(to right, var(--accent-a4) 40%, var(--white-a1) 60%),
-    linear-gradient(to right, var(--gray-a2) 40%, var(--gray-a3) 60%);
-}
-.ui-Switch:where(.r-variant-soft):where([data-state='unchecked'])::before {
-  background-color: var(--gray-a3);
-}
-.ui-Switch:where(.r-variant-soft):where(:active)::before {
-  background-color: var(--gray-a4);
-}
-.ui-Switch:where(.r-variant-soft):where(.r-high-contrast)::before {
-  background-image:
-    linear-gradient(to right, var(--switch-high-contrast-checked-color-overlay) 40%, transparent 60%),
-    linear-gradient(to right, var(--accent-a6) 40%, transparent 60%),
-    linear-gradient(to right, var(--accent-a6) 40%, transparent 60%),
-    linear-gradient(to right, var(--accent-a6) 40%, var(--white-a1) 60%),
-    linear-gradient(to right, var(--accent-a3) 40%, var(--gray-a3) 60%);
-}
-.ui-Switch:where(.r-variant-soft):where(.r-high-contrast):where([data-state='checked']:active)::before {
-  filter: var(--switch-high-contrast-checked-active-before-filter);
-}
-.ui-Switch:where(.r-variant-soft):where([data-disabled]) {
-  mix-blend-mode: var(--switch-disabled-blend-mode);
-}
-.ui-Switch:where(.r-variant-soft):where([data-disabled])::before {
-  filter: none;
-  background-image: none;
-  background-color: var(--gray-a4);
-}
-.ui-Switch:where(.r-variant-soft) .ui-SwitchThumb {
-  filter: saturate(0.45);
-}
-.ui-Switch:where(.r-variant-soft) .ui-SwitchThumb:where([data-state='unchecked']) {
-  box-shadow: 0 0 0 1px var(--black-a1), 0 1px 3px var(--black-a1), 0 1px 3px var(--black-a1),
-    0 2px 4px -1px var(--black-a1);
-}
-.ui-Switch:where(.r-variant-soft) .ui-SwitchThumb:where([data-state='checked']) {
-  box-shadow: 0 0 0 1px var(--black-a1), 0 1px 3px var(--black-a2), 0 1px 3px var(--accent-a3),
-    0 2px 4px -1px var(--accent-a3);
-}
-.ui-Switch:where(.r-variant-soft) .ui-SwitchThumb:where([data-disabled]) {
-  filter: none;
-  background-color: var(--gray-2);
-  box-shadow: 0 0 0 1px var(--gray-a2), 0 1px 3px var(--black-a1);
-  transition: none;
-}

package/components/table.css

@@ -1,198 +0,0 @@
-
-.ui-root {
-  --scrollarea-scrollbar-horizontal-margin-top: var(--space-1);
-  --scrollarea-scrollbar-horizontal-margin-bottom: var(--space-1);
-  --scrollarea-scrollbar-horizontal-margin-left: var(--space-1);
-  --scrollarea-scrollbar-horizontal-margin-right: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-top: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-bottom: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
-}
-.ui-ScrollArea {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-}
-.ui-ScrollAreaViewport {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-.ui-ScrollAreaViewport:where(:focus-visible) + :where(.ui-ScrollAreaViewportFocusRing) {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  outline: 2px solid var(--focus-8);
-  outline-offset: -2px;
-}
-.ui-ScrollAreaViewport:where(:has(.ui-ScrollAreaScrollbar[data-orientation='horizontal'])) {
-  overscroll-behavior-x: contain;
-}
-.ui-ScrollAreaScrollbar {
-  display: flex;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  touch-action: none;
-}
-.ui-ScrollAreaScrollbar:where([data-orientation='vertical']) {
-  flex-direction: column;
-  width: var(--scrollarea-scrollbar-size);
-}
-.ui-ScrollAreaScrollbar:where([data-orientation='horizontal']) {
-  flex-direction: row;
-  height: var(--scrollarea-scrollbar-size);
-}
-.ui-ScrollAreaThumb {
-  position: relative;
-}
-.ui-ScrollAreaThumb::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 100%;
-  height: 100%;
-  min-width: var(--space-4);
-  min-height: var(--space-4);
-}
-.ui-ScrollAreaScrollbar:where([data-size="1"]) {
-  --scrollarea-scrollbar-size: var(--space-1);
-  --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
-}
-.ui-ScrollAreaScrollbar:where([data-size="2"]) {
-  --scrollarea-scrollbar-size: var(--space-2);
-  --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
-}
-.ui-ScrollAreaScrollbar:where([data-size="3"]) {
-  --scrollarea-scrollbar-size: var(--space-3);
-  --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
-}
-.ui-ScrollAreaScrollbar {
-  background-color: var(--gray-a3);
-  border-radius: var(--scrollarea-scrollbar-border-radius);
-  animation-duration: 120ms;
-  animation-timing-function: ease-out;
-}
-.ui-ScrollAreaScrollbar:where([data-state='visible']) {
-  animation-name: ui-fade-in;
-}
-.ui-ScrollAreaScrollbar:where([data-state='hidden']) {
-  animation-name: ui-fade-out;
-}
-.ui-ScrollAreaScrollbar:where([data-orientation='horizontal']) {
-  margin-top: var(--scrollarea-scrollbar-horizontal-margin-top);
-  margin-bottom: var(--scrollarea-scrollbar-horizontal-margin-bottom);
-  margin-left: var(--scrollarea-scrollbar-horizontal-margin-left);
-  margin-right: var(--scrollarea-scrollbar-horizontal-margin-right);
-}
-.ui-ScrollAreaScrollbar:where([data-orientation='vertical']) {
-  margin-top: var(--scrollarea-scrollbar-vertical-margin-top);
-  margin-bottom: var(--scrollarea-scrollbar-vertical-margin-bottom);
-  margin-left: var(--scrollarea-scrollbar-vertical-margin-left);
-  margin-right: var(--scrollarea-scrollbar-vertical-margin-right);
-}
-.ui-ScrollAreaThumb {
-  background-color: var(--gray-a8);
-  border-radius: inherit;
-  transition: background-color 100ms;
-}
-.ui-ScrollAreaThumb:hover {
-  background-color: var(--gray-a9);
-}
-
-.ui-TableContent {
-  --table-row-background-color: transparent;
-  --table-row-box-shadow: inset 0 -1px var(--gray-a5);
-
-  width: 100%;
-  text-align: left;
-  vertical-align: top;
-  border-collapse: collapse;
-  border-radius: calc(var(--table-border-radius) - 1px);
-  border-spacing: 0;
-  box-sizing: border-box;
-
-  /* Makes "height: 100%" work on content inside cells */
-  height: 0;
-}
-.ui-TableContent tr {
-  color: var(--gray-12);
-}
-.ui-TableContent td,
-.ui-TableContent th {
-  background-color: var(--table-row-background-color);
-  box-shadow: var(--table-row-box-shadow);
-  box-sizing: border-box;
-  padding: var(--table-cell-padding);
-  min-height: var(--table-cell-min-height);
-}
-.ui-TableContent thead th {
-  font-weight: var(--font-weight-semibold);
-}
-.ui-TableContent tbody th {
-  font-weight: var(--font-weight-regular);
-}
-.ui-TableContent button {
-  vertical-align: middle;
-}
-.ui-Table[data-size="1"] {
-  --table-border-radius: var(--radius-3);
-  --table-cell-padding: var(--space-2);
-  --table-cell-min-height: calc(36px * var(--scaling));
-}
-.ui-Table[data-size="1"] .ui-TableContent {
-  font-size: var(--font-size-2);
-  line-height: var(--line-height-2);
-}
-.ui-Table[data-size="2"] {
-  --table-border-radius: var(--radius-4);
-  --table-cell-padding: var(--space-3);
-  --table-cell-min-height: calc(44px * var(--scaling));
-}
-.ui-Table[data-size="2"] .ui-TableContent {
-  font-size: var(--font-size-2);
-  line-height: var(--line-height-2);
-}
-.ui-Table[data-size="3"] {
-  --table-border-radius: var(--radius-4);
-  --table-cell-padding: var(--space-3) var(--space-4);
-  --table-cell-min-height: var(--space-8);
-}
-.ui-Table[data-size="3"] .ui-TableContent {
-  font-size: var(--font-size-3);
-  line-height: var(--line-height-3);
-}
-.ui-Table:where([data-variant="surface"]) {
-  box-sizing: border-box;
-  border: 1px solid var(--gray-a5);
-  border-radius: var(--table-border-radius);
-  background-color: var(--color-panel);
-  -webkit-backdrop-filter: var(--backdrop-filter-panel);
-          backdrop-filter: var(--backdrop-filter-panel);
-  background-clip: padding-box;
-  position: relative;
-}
-@supports (box-shadow: 0 0 0 1px color-mix(in oklab, white, black)) {
-.ui-Table:where([data-variant="surface"]) {
-    border-color: color-mix(in oklab, var(--gray-a5), var(--gray-6));
-}
-}
-.ui-Table:where([data-variant="surface"]) .ui-TableContent {
-  overflow: hidden;
-}
-.ui-Table:where([data-variant="surface"]) thead {
-  --table-row-background-color: var(--gray-a2);
-}
-.ui-Table:where([data-variant="surface"]) tbody :where(tr:last-child) {
-  --table-row-box-shadow: none;
-}
-.ui-Table:where([data-variant="ghost"]) {
-  --scrollarea-scrollbar-horizontal-margin-left: 0;
-  --scrollarea-scrollbar-horizontal-margin-right: 0;
-}

package/components/tabs.css

@@ -1,201 +0,0 @@
-
-.ui-TabList::-webkit-scrollbar {
-  display: none;
-}
-.ui-TabList:where(.r-size-1) {
-  --tab-font-size: var(--font-size-1);
-  --tab-line-height: var(--line-height-1);
-  --tab-letter-spacing: var(--letter-spacing-1);
-  --tab-height: var(--space-6);
-  --tab-padding-x: var(--space-1);
-  --tab-radius: max(var(--radius-2), var(--radius-full));
-  --tab-item-radius: max(var(--radius-1), var(--radius-full));
-  --tab-inner-padding-x: var(--space-1);
-  --tab-inner-height: var(--space-5);
-}
-.ui-TabList:where(.r-size-2) {
-  --tab-font-size: var(--font-size-2);
-  --tab-line-height: var(--line-height-2);
-  --tab-letter-spacing: var(--letter-spacing-2);
-  --tab-height: var(--space-7);
-  --tab-padding-x: var(--space-2);
-  --tab-radius: max(var(--radius-3), var(--radius-full));
-  --tab-item-radius: max(var(--radius-2), var(--radius-full));
-  --tab-inner-padding-x: var(--space-2);
-  --tab-inner-height: calc(var(--space-6) - var(--space-1));
-}
-.ui-TabList:where(.r-variant-surface.r-size-1),
-.ui-TabList:where(.r-variant-soft.r-size-1) {
-  --tab-inner-padding-x: calc(var(--space-2) / 4 * 3);
-}
-@layer components {
-.ui-TabList {
-    justify-content: flex-start;
-    position: relative;
-    overflow-x: auto;
-    white-space: nowrap;
-    font-style: normal;
-    scrollbar-width: none;
-    font-size: var(--tab-font-size);
-    line-height: var(--tab-line-height);
-    letter-spacing: var(--tab-letter-spacing);
-}
-
-  /** classic & surface */
-.ui-TabList:where(.r-variant-surface, .r-variant-classic) {
-    position: relative;
-    display: inline-flex;
-    width: -moz-fit-content;
-    width: fit-content;
-    align-items: center;
-    justify-content: center;
-    vertical-align: top;
-    flex-shrink: 0;
-    border-radius: var(--tab-radius);
-}
-.ui-TabList:where(.r-variant-classic) {
-    background-color: var(--accent-a3);
-    padding-left: var(--tab-padding-x);
-    padding-right: var(--tab-padding-x);
-}
-.ui-TabList:where(.r-variant-surface) {
-    --tab-item-radius: 0;
-    --tab-inner-height: var(--tab-height);
-    box-shadow: inset 0 0 0 1px var(--gray-a6);
-}
-
-  /** soft & outline */
-.ui-TabList:where(.r-variant-outline, .r-variant-soft) {
-    display: flex;
-    box-shadow: inset 0 -1px 0 0 var(--gray-a5);
-}
-.ui-TabList:where(.r-variant-soft) {
-    padding-left: var(--tab-padding-x);
-    padding-right: var(--tab-padding-x);
-}
-}
-.ui-TabsIndicator {
-  position: absolute;
-  left: 0;
-  transition-property: width, transform;
-  transform: translateX(var(--reka-tabs-indicator-position));
-  width: var(--reka-tabs-indicator-size);
-}
-.ui-TabList:where(.r-variant-surface) :where(.ui-TabsIndicator) {
-  top: 0;
-  height: var(--tab-inner-height);
-  background-color: var(--accent-a3);
-  transition-duration: 100ms;
-}
-.ui-TabList:where(.r-variant-classic) :where(.ui-TabsIndicator) {
-  top: calc((var(--tab-height) - var(--tab-inner-height)) / 2);
-  height: var(--tab-inner-height);
-  background-color: var(--color-panel-solid);
-  box-shadow:
-    0 0 0 0.5px var(--black-a1),
-    0 1px 1px 0 var(--gray-a2),
-    0 2px 1px -1px var(--black-a1),
-    0 1px 3px 0 var(--black-a1);
-  border-radius: var(--tab-item-radius);
-  transition-duration: 100ms;
-}
-.ui-TabList:where(.r-variant-soft) :where(.ui-TabsIndicator) {
-  top: calc((var(--tab-height) - var(--tab-inner-height)) / 2);
-  height: var(--tab-inner-height);
-  background-color: var(--accent-a3);
-  border-radius: var(--tab-item-radius);
-  transition-duration: 100ms;
-}
-.ui-TabList:where(.r-variant-outline) :where(.ui-TabsIndicator) {
-  bottom: 0;
-  height: 2px;
-  background-color: var(--accent-indicator);
-  transition-duration: 300ms;
-}
-
-/** high contrast */
-:where(.ui-TabList.r-variant-outline.r-high-contrast) .ui-TabsIndicator {
-  background-color: var(--accent-12);
-}
-
-.ui-TabTrigger {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  position: relative;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  box-sizing: border-box;
-  height: var(--tab-height);
-  color: var(--gray-a11);
-  outline: none;
-}
-.ui-TabTrigger:disabled {
-  color: var(--gray-a8);
-  border-color: currentColor;
-}
-.ui-TabTriggerInner,
-.ui-TabTriggerInnerHidden {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  height: var(--tab-inner-height);
-  padding-left: var(--tab-inner-padding-x);
-  padding-right: var(--tab-inner-padding-x);
-  border-radius: var(--tab-item-radius);
-}
-.ui-TabTriggerInner {
-  position: absolute;
-}
-:where(.ui-TabTrigger[data-state='inactive']) .ui-TabTriggerInner {
-  letter-spacing: var(--tab-inactive-letter-spacing);
-  word-spacing: var(--tab-inactive-word-spacing);
-}
-:where(.ui-TabTrigger[data-state='active']) .ui-TabTriggerInner {
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--tab-active-letter-spacing);
-  word-spacing: var(--tab-active-word-spacing);
-}
-.ui-TabTriggerInnerHidden {
-  visibility: hidden;
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--tab-active-letter-spacing);
-  word-spacing: var(--tab-active-word-spacing);
-}
-@media (hover: hover) {
-.ui-TabList:where(.r-variant-outline, .r-variant-classic) :where(.ui-TabTrigger:hover) {
-    color: var(--gray-12);
-}
-.ui-TabList:where(.r-variant-surface, .r-variant-soft) :where(.ui-TabTrigger:hover) {
-    color: var(--accent-a11);
-}
-.ui-TabList:where(.r-variant-outline) :where(.ui-TabTrigger:not(:disabled):hover) :where(.ui-TabTriggerInner) {
-    background-color: var(--gray-a3);
-}
-.ui-TabTrigger:where(:focus-visible:hover) :where(.ui-TabTriggerInner) {
-    background-color: var(--accent-a3);
-}
-}
-.ui-TabTrigger:where(:focus-visible) :where(.ui-TabTriggerInner) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: -2px;
-}
-.ui-TabList:where(.r-variant-outline) :where(.ui-TabTrigger) {
-  padding-left: var(--tab-padding-x);
-  padding-right: var(--tab-padding-x);
-}
-.ui-TabList:where(.r-variant-classic, .r-variant-outline) :where(.ui-TabTrigger[data-state='active']) {
-  color: var(--gray-12);
-}
-.ui-TabList:where(.r-variant-soft) :where(.ui-TabTrigger + .ui-TabTrigger) {
-  margin-left: calc(var(--tab-padding-x) / 2)
-}
-.ui-TabList:where(.r-variant-surface) :where(.ui-TabTrigger + .ui-TabTrigger) {
-  box-shadow: inset 1px 0 0 var(--gray-a4);
-}
-.ui-TabList:where(.r-variant-surface, .r-variant-soft) :where(.ui-TabTrigger[data-state='active']) {
-  color: var(--accent-a11);
-}