@typlog/ui 0.12.1 → 0.12.3

package/components/badge.css

@@ -1,16 +1,18 @@
 
+@layer components {
 .ui-Badge {
-  display: inline-flex;
-  align-items: center;
-  white-space: nowrap;
-  font-weight: var(--font-weight-medium);
-  font-style: normal;
-  flex-shrink: 0;
-  line-height: 1;
-  height: -moz-fit-content;
-  height: fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+    font-weight: var(--font-weight-medium);
+    font-style: normal;
+    flex-shrink: 0;
+    line-height: 1;
+    height: -moz-fit-content;
+    height: fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+}
 }
 .ui-Badge:where(.r-size-1) {
   font-size: var(--font-size-1);

package/components/checkbox.css

@@ -1,14 +1,16 @@
 
+@layer components {
 .ui-Checkbox {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: top;
-  flex-shrink: 0;
-  cursor: default;
-  height: var(--checkbox-size);
-  border-radius: var(--checkbox-border-radius);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: top;
+    flex-shrink: 0;
+    cursor: default;
+    height: var(--checkbox-size);
+    border-radius: var(--checkbox-border-radius);
+}
 }
 .ui-Checkbox::before {
   content: '';

package/components/dropdown.css

@@ -9,12 +9,14 @@
   --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
   --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
 }
+@layer components {
 .ui-ScrollArea {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+}
 }
 .ui-ScrollAreaViewport {
   display: flex;
@@ -22,6 +24,13 @@
   width: 100%;
   height: 100%;
 }
+.ui-ScrollAreaViewport > div {
+  display: block;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  width: 100%;
+  flex-grow: 1;
+}
 .ui-ScrollAreaViewport:where(:focus-visible) + :where(.ui-ScrollAreaViewportFocusRing) {
   position: absolute;
   inset: 0;
@@ -152,7 +161,6 @@
   box-sizing: border-box;
   overflow: hidden;
   border-radius: var(--menu-content-border-radius);
-
   box-shadow: var(--shadow-5);
   background-color: var(--color-panel-solid);
 }

package/components/popover.css

@@ -34,17 +34,19 @@
 }
 }
 
+@layer components {
 .ui-PopoverPopup {
-  background-color: var(--color-panel-solid);
-  box-shadow: var(--shadow-5);
-  min-width: var(--reka-popover-trigger-width);
-  max-width: var(--reka-popover-content-available-width);
-  outline: 0;
-  overflow: auto;
-  position: relative;
-  box-sizing: border-box;
-  transform-origin: var(--reka-popover-content-transform-origin);
-  padding: var(--popover-popup-padding);
+    background-color: var(--color-panel-solid);
+    box-shadow: var(--shadow-5);
+    min-width: var(--reka-popover-trigger-width);
+    max-width: var(--reka-popover-content-available-width);
+    outline: 0;
+    overflow: auto;
+    position: relative;
+    box-sizing: border-box;
+    transform-origin: var(--reka-popover-content-transform-origin);
+    padding: var(--popover-popup-padding);
+}
 }
 .ui-PopoverPopup:where(.r-size-1) {
   border-radius: var(--radius-4);
@@ -54,6 +56,3 @@
   border-radius: var(--radius-5);
   --popover-popup-padding: var(--space-4);
 }
-.ui-PopoverPopup:where(.p-0) {
-  --popover-popup-padding: 0;
-}

package/components/radio.css

@@ -128,12 +128,14 @@
   --radio-size: calc(var(--space-4) * 1.25);
 }
 
+@layer components {
 .ui-RadioGroupItem {
-  display: inline-flex;
-  align-items: center;
-  gap: .5em;
-  width: -moz-fit-content;
-  width: fit-content;
+    display: inline-flex;
+    align-items: center;
+    gap: .5em;
+    width: -moz-fit-content;
+    width: fit-content;
+}
 }
 
 .ui-RadioCardsRoot:where(.r-size-1) {
@@ -148,19 +150,21 @@
   --card-padding: var(--space-5);
   --card-border-radius: max(var(--radius-5), var(--radius-full));
 }
+@layer components {
 .ui-BaseCard {
-  display: block;
-  position: relative;
-  overflow: hidden;
-  font-style: normal;
-  text-align: start;
-  box-sizing: border-box;
-  border-radius: var(--card-border-radius);
-  padding: var(--card-padding);
-  border-color: var(--card-border-color, var(--gray-a5));
-  border-width: var(--card-border-width, 1px);
-  border-style: solid;
-  width: 100%;
+    display: block;
+    position: relative;
+    overflow: hidden;
+    font-style: normal;
+    text-align: start;
+    box-sizing: border-box;
+    border-radius: var(--card-border-radius);
+    padding: var(--card-padding);
+    border-color: var(--card-border-color, var(--gray-a5));
+    border-width: var(--card-border-width, 1px);
+    border-style: solid;
+    width: 100%;
+}
 }
 .ui-BaseCard:where(:-moz-any-link, button, label):where(:hover) {
   --card-border-color: var(--gray-a7);
@@ -177,11 +181,6 @@
   box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
 }
 
-/** special enhancement for tailwindcss */
-.ui-BaseCard:where(.p-0) {
-  --card-padding: 0;
-}
-
 .ui-RadioCardsItem {
   height: 100%;
 }
@@ -190,15 +189,17 @@
   box-shadow: 0 0 0 1px var(--accent-10);
 }
 
+@layer components {
 .ui-RadioTabsRoot {
-  display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-items: center;
-  box-sizing: border-box;
-  padding: var(--radio-tabs-list-padding);
-  border-radius: var(--radio-tabs-list-radius);
-  font-size: var(--radio-tabs-font-size);
+    display: inline-flex;
+    width: -moz-fit-content;
+    width: fit-content;
+    align-items: center;
+    box-sizing: border-box;
+    padding: var(--radio-tabs-list-padding);
+    border-radius: var(--radio-tabs-list-radius);
+    font-size: var(--radio-tabs-font-size);
+}
 }
 .ui-RadioTabsRoot:where(.r-size-1) {
   --radio-tabs-font-size: var(--font-size-1);
@@ -225,11 +226,6 @@
   background-color: var(--accent-a3);
 }
 
-/* special fix for tailwind */
-.ui-RadioTabsRoot:where(.w-full) {
-  width: 100%;
-}
-
 .ui-RadioTabsItem {
   display: inline-flex;
   flex-grow: 1;

package/components/{scrollarea.css → scroll-area.css}

@@ -9,12 +9,14 @@
   --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
   --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
 }
+@layer components {
 .ui-ScrollArea {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+}
 }
 .ui-ScrollAreaViewport {
   display: flex;
@@ -22,6 +24,13 @@
   width: 100%;
   height: 100%;
 }
+.ui-ScrollAreaViewport > div {
+  display: block;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  width: 100%;
+  flex-grow: 1;
+}
 .ui-ScrollAreaViewport:where(:focus-visible) + :where(.ui-ScrollAreaViewportFocusRing) {
   position: absolute;
   inset: 0;

package/components/separator.css

@@ -1,16 +1,18 @@
 
+@layer components {
 .ui-Separator {
-  display: block;
-  box-sizing: border-box;
-  background-color: var(--accent-a6);
+    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:where([aria-orientation="horizontal"]) {
+    width: var(--separator-size, auto);
+    height: 1px;
+}
+.ui-Separator:where([aria-orientation="vertical"]) {
+    width: 1px;
+    height: var(--separator-size, auto);
 }
-.ui-Separator[aria-orientation="vertical"] {
-  width: 1px;
-  height: var(--separator-size, auto);
 }
 .ui-Separator:where(.r-size-1) {
   --separator-size: var(--space-4);

package/components/table.css

@@ -9,12 +9,14 @@
   --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
   --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
 }
+@layer components {
 .ui-ScrollArea {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+}
 }
 .ui-ScrollAreaViewport {
   display: flex;
@@ -22,6 +24,13 @@
   width: 100%;
   height: 100%;
 }
+.ui-ScrollAreaViewport > div {
+  display: block;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  width: 100%;
+  flex-grow: 1;
+}
 .ui-ScrollAreaViewport:where(:focus-visible) + :where(.ui-ScrollAreaViewportFocusRing) {
   position: absolute;
   inset: 0;
@@ -173,8 +182,7 @@
   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);
+  backdrop-filter: var(--backdrop-filter-panel);
   background-clip: padding-box;
   position: relative;
 }

package/components/tabs.css

@@ -1,19 +1,11 @@
 
-.ui-TabList {
-  justify-content: flex-start;
-  position: relative;
-  overflow-x: auto;
-  white-space: nowrap;
-  font-style: normal;
-  scrollbar-width: none;
-}
-.ui-TabList::-webkit-scrollbar {
+.ui-TabsList::-webkit-scrollbar {
   display: none;
 }
-.ui-TabList:where(.r-size-1) {
-  font-size: var(--font-size-1);
-  line-height: var(--line-height-1);
-  letter-spacing: var(--letter-spacing-1);
+.ui-TabsList: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));
@@ -21,10 +13,10 @@
   --tab-inner-padding-x: var(--space-1);
   --tab-inner-height: var(--space-5);
 }
-.ui-TabList:where(.r-size-2) {
-  font-size: var(--font-size-2);
-  line-height: var(--line-height-2);
-  letter-spacing: var(--letter-spacing-2);
+.ui-TabsList: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));
@@ -32,6 +24,55 @@
   --tab-inner-padding-x: var(--space-2);
   --tab-inner-height: calc(var(--space-6) - var(--space-1));
 }
+.ui-TabsList:where(.r-variant-surface.r-size-1),
+.ui-TabsList:where(.r-variant-soft.r-size-1) {
+  --tab-inner-padding-x: calc(var(--space-2) / 4 * 3);
+}
+@layer components {
+.ui-TabsList {
+    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-TabsList:where(.r-variant-surface, .r-variant-classic) {
+    position: relative;
+    display: inline-flex;
+    width: -moz-fit-content;
+    width: fit-content;
+    align-items: center;
+    vertical-align: top;
+    flex-shrink: 0;
+    border-radius: var(--tab-radius);
+}
+.ui-TabsList:where(.r-variant-classic) {
+    background-color: var(--accent-a3);
+    padding-left: var(--tab-padding-x);
+    padding-right: var(--tab-padding-x);
+}
+.ui-TabsList: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-TabsList:where(.r-variant-outline, .r-variant-soft) {
+    display: flex;
+    box-shadow: inset 0 -1px 0 0 var(--gray-a5);
+}
+.ui-TabsList:where(.r-variant-soft) {
+    padding-left: var(--tab-padding-x);
+    padding-right: var(--tab-padding-x);
+}
+}
 .ui-TabsIndicator {
   position: absolute;
   left: 0;
@@ -39,36 +80,13 @@
   transform: translateX(var(--reka-tabs-indicator-position));
   width: var(--reka-tabs-indicator-size);
 }
-
-/** 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);
-}
-.ui-TabList:where(.r-variant-surface) :where(.ui-TabsIndicator) {
+.ui-TabsList:where(.r-variant-surface) :where(.ui-TabsIndicator) {
   top: 0;
-  height: var(--tab-inner-height);
+  height: var(--tab-height);
   background-color: var(--accent-a3);
   transition-duration: 100ms;
 }
-.ui-TabList:where(.r-variant-classic) :where(.ui-TabsIndicator) {
+.ui-TabsList: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);
@@ -80,28 +98,14 @@
   border-radius: var(--tab-item-radius);
   transition-duration: 100ms;
 }
-.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);
-}
-
-/** 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-TabList:where(.r-variant-soft) :where(.ui-TabsIndicator) {
+.ui-TabsList: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) {
+.ui-TabsList:where(.r-variant-outline) :where(.ui-TabsIndicator) {
   bottom: 0;
   height: 2px;
   background-color: var(--accent-indicator);
@@ -109,15 +113,10 @@
 }
 
 /** high contrast */
-:where(.ui-TabList.r-variant-outline.r-high-contrast) .ui-TabsIndicator {
+:where(.ui-TabsList.r-variant-outline.r-high-contrast) .ui-TabsIndicator {
   background-color: var(--accent-12);
 }
 
-/** special fix for tailwind */
-.ui-TabList:where(.w-full) {
-  width: 100%;
-}
-
 .ui-TabTrigger {
   display: flex;
   align-items: center;
@@ -166,13 +165,13 @@
   word-spacing: var(--tab-active-word-spacing);
 }
 @media (hover: hover) {
-.ui-TabList:where(.r-variant-outline, .r-variant-classic) :where(.ui-TabTrigger:hover) {
+.ui-TabsList: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) {
+.ui-TabsList: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) {
+.ui-TabsList: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) {
@@ -183,19 +182,19 @@
   outline: 2px solid var(--focus-8);
   outline-offset: -2px;
 }
-.ui-TabList:where(.r-variant-outline) :where(.ui-TabTrigger) {
+.ui-TabsList: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']) {
+.ui-TabsList: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) {
+.ui-TabsList: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) {
+.ui-TabsList: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']) {
+.ui-TabsList:where(.r-variant-surface, .r-variant-soft) :where(.ui-TabTrigger[data-state='active']) {
   color: var(--accent-a11);
 }

package/components/toggle.css

@@ -1,27 +1,31 @@
 
+@layer components {
 .ui-Toggle {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: top;
-  flex-shrink: 0;
-  width: var(--toggle-size);
-  height: var(--toggle-size);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: top;
+    flex-shrink: 0;
+    border-radius: var(--toggle-border-radius);
+    font-size: var(--toggle-font-size);
+    width: var(--toggle-size);
+    height: var(--toggle-size);
+}
 }
 .ui-Toggle:where(.r-size-1) {
-  border-radius: max(var(--radius-1), var(--radius-full));
-  font-size: var(--font-size-1);
+  --toggle-border-radius: max(var(--radius-1), var(--radius-full));
+  --toggle-font-size: var(--font-size-1);
   --toggle-size: var(--space-5);
 }
 .ui-Toggle:where(.r-size-2) {
-  border-radius: max(var(--radius-2), var(--radius-full));
-  font-size: var(--font-size-3);
+  --toggle-border-radius: max(var(--radius-2), var(--radius-full));
+  --toggle-font-size: var(--font-size-3);
   --toggle-size: var(--space-6);
 }
 .ui-Toggle:where(.r-size-3) {
-  border-radius: max(var(--radius-3), var(--radius-full));
-  font-size: var(--font-size-6);
+  --toggle-border-radius: max(var(--radius-3), var(--radius-full));
+  --toggle-font-size: var(--font-size-6);
   --toggle-size: var(--space-7);
 }
 
@@ -84,14 +88,16 @@
   color: var(--gray-1);
 }
 
+@layer components {
 .ui-ToggleGroupRoot {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: top;
-  flex-shrink: 0;
-  height: var(--toggle-group-height);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: top;
+    flex-shrink: 0;
+    height: var(--toggle-group-height);
+}
 }
 .ui-ToggleGroupRoot:where(.r-size-1) {
   font-size: var(--font-size-1);
@@ -132,15 +138,17 @@
   --toggle-item-size: var(--toggle-group-height);
 }
 
+@layer components {
 .ui-ToggleGroupItem {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: top;
-  flex-shrink: 0;
-  width: var(--toggle-item-size);
-  height: var(--toggle-item-size);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: top;
+    flex-shrink: 0;
+    width: var(--toggle-item-size);
+    height: var(--toggle-item-size);
+}
 }
 .ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outline) :where(.ui-ToggleGroupItem:first-child) {
   border-top-left-radius: var(--toggle-radius);