@tcn/ui 0.3.1 → 0.3.3

package/src/stacks/stack.module.css

@@ -2,405 +2,412 @@
 HStack CSS
 */
 
-.h-stack,
-.v-stack {
-  display: flex;
-}
-
-.h-stack[data-inline="true"],
-.v-stack[data-inline="true"] {
-  display: inline-flex;
-}
-
-.z-stack {
-  display: grid;
-}
-
-.z-stack[data-inline="true"] {
-  display: inline-grid;
-}
-
-.box[data-height="flex"],
-.box[data-height="fill"] {
-  height: auto;
-}
-
-:where(.h-stack) {
-  display: flex;
-  position: relative;
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  min-width: 0;
-  min-height: 0;
-  width: 100%;
-  height: auto;
-  overflow-x: visible;
-  overflow-y: visible;
-  flex-wrap: nowrap;
-  flex-direction: row;
-  flex-grow: 0;
-  flex-shrink: 0;
-  box-sizing: border-box;
-}
-
-:where(.v-stack) {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  padding: 0;
-  margin: 0;
-  min-width: 0;
-  min-height: 0;
-  width: 100%;
-  height: auto;
-  overflow-x: visible;
-  overflow-y: visible;
-  flex-wrap: nowrap;
-  flex-direction: column;
-  flex-grow: 0;
-  flex-shrink: 0;
-  box-sizing: border-box;
-}
-
-:where(.z-stack) {
-  position: relative;
-  box-sizing: border-box;
-  min-width: 0;
-  min-height: 0;
-  width: 100%;
-  height: auto;
-  overflow: visible;
-  box-sizing: border-box;
-}
-
-:where(.box) {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-  max-width: 100%;
-  min-height: 0;
-  height: auto;
-  max-height: 100%;
-  z-index: 0;
-  position: relative;
-  box-sizing: border-box;
-  transform: none;
-}
-
-:where(.h-stack[data-inline="true"]) {
-  display: inline-flex;
-}
-
-:where(.h-stack[data-allow-flow="true"]) {
-  flex-wrap: wrap;
-}
-
-:where(.h-stack[data-v-alignment="start"]) {
-  align-items: flex-start;
-}
-
-:where(.h-stack[data-v-alignment="center"]) {
-  align-items: center;
-}
-
-:where(.h-stack[data-v-alignment="end"]) {
-  align-items: flex-end;
-}
-
-:where(.h-stack[data-h-alignment="start"]) {
-  justify-content: flex-start;
-}
-
-:where(.h-stack[data-h-alignment="center"]) {
-  justify-content: center;
-}
-
-:where(.h-stack[data-h-alignment="end"]) {
-  justify-content: flex-end;
-}
-
-:where(.h-stack > *) {
-  position: relative;
-}
-
-:where(.h-stack > .h-stack[data-width="flex"]),
-:where(.h-stack > .z-stack[data-width="flex"]),
-:where(.h-stack > .v-stack[data-width="flex"]),
-:where(.h-stack > .stack-flex[data-width="flex"]),
-:where(.h-stack > .h-stack[data-width="fill"]),
-:where(.h-stack > .z-stack[data-width="fill"]),
-:where(.h-stack > .v-stack[data-width="fill"]),
-:where(.h-stack > .stack-flex[data-width="fill"]),
-:where(.h-stack > .box[data-width="fill"]) {
-  flex-grow: 1;
-  flex-shrink: 0;
-  flex-basis: 0%;
-  width: auto;
-}
-
-:where(.h-stack > .h-stack[data-height="flex"]),
-:where(.h-stack > .z-stack[data-height="flex"]),
-:where(.h-stack > .v-stack[data-height="flex"]),
-:where(.h-stack > .stack-flex[data-height="flex"]),
-:where(.h-stack > .h-stack[data-height="fill"]),
-:where(.h-stack > .z-stack[data-height="fill"]),
-:where(.h-stack > .v-stack[data-height="fill"]),
-:where(.h-stack > .stack-flex[data-height="fill"]),
-:where(.h-stack > .box[data-height="fill"]) {
-  height: 100%;
-}
-
-:where(.reveal-layout .h-stack:after),
-:where(.reveal-h-stack .h-stack:after) {
-  content: "";
-  position: absolute;
-  inset: 0;
-  outline: 1px dashed rgb(0, 123, 160);
-  pointer-events: none;
-  z-index: 1;
-}
-
-:where(.v-stack[data-inline="true"]) {
-  display: inline-flex;
-}
-
-:where(.v-stack[data-allow-flow="true"]) {
-  flex-wrap: wrap;
-}
-
-:where(.v-stack[data-h-alignment="start"]) {
-  align-items: flex-start;
-}
-
-:where(.v-stack[data-h-alignment="center"]) {
-  align-items: center;
-}
-
-:where(.v-stack[data-h-alignment="end"]) {
-  align-items: flex-end;
-}
-
-:where(.v-stack[data-v-alignment="start"]) {
-  justify-content: flex-start;
-}
-
-:where(.v-stack[data-v-alignment="center"]) {
-  justify-content: center;
-}
-
-:where(.v-stack[data-v-alignment="end"]) {
-  justify-content: flex-end;
-}
-
-:where(.v-stack > *) {
-  position: relative;
-}
-
-:where(.v-stack[data-height="auto"]) {
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-basis: auto;
-}
-
-:where(.v-stack > .h-stack[data-height="flex"]),
-:where(.v-stack > .z-stack[data-height="flex"]),
-:where(.v-stack > .v-stack[data-height="flex"]),
-:where(.v-stack > .stack-flex[data-height="flex"]),
-:where(.v-stack > .h-stack[data-height="fill"]),
-:where(.v-stack > .z-stack[data-height="fill"]),
-:where(.v-stack > .v-stack[data-height="fill"]),
-:where(.v-stack > .stack-flex[data-height="fill"]),
-:where(.v-stack > .box[data-height="fill"]) {
-  flex-grow: 1;
-  flex-shrink: 0;
-  flex-basis: 0%;
-  height: auto;
-}
-
-:where(.v-stack > .h-stack[data-width="flex"]),
-:where(.v-stack > .z-stack[data-width="flex"]),
-:where(.v-stack > .v-stack[data-width="flex"]),
-:where(.v-stack > .stack-flex[data-width="flex"]),
-:where(.v-stack > .h-stack[data-width="fill"]),
-:where(.v-stack > .z-stack[data-width="fill"]),
-:where(.v-stack > .v-stack[data-width="fill"]),
-:where(.v-stack > .stack-flex[data-width="fill"]),
-:where(.v-stack > .box[data-width="fill"]) {
-  width: 100%;
-}
-
-:where(.v-stack[data-height="auto"] > .h-stack[data-height="flex"]),
-:where(.v-stack[data-height="auto"] > .z-stack[data-height="flex"]),
-:where(.v-stack[data-height="auto"] > .v-stack[data-height="flex"]),
-:where(.v-stack[data-height="auto"] > .stack-flex[data-height="flex"]),
-:where(.v-stack[data-height="auto"] > .h-stack[data-height="fill"]),
-:where(.v-stack[data-height="auto"] > .z-stack[data-height="fill"]),
-:where(.v-stack[data-height="auto"] > .v-stack[data-height="fill"]),
-:where(.v-stack[data-height="auto"] > .stack-flex[data-height="fill"]) {
-  flex-basis: auto;
-}
-
-:where(.v-stack[data-height="auto"] .h-stack[data-height="default"]),
-:where(.v-stack[data-height="auto"] .z-stack[data-height="default"]),
-:where(.v-stack[data-height="auto"] .v-stack[data-height="default"]),
-:where(.v-stack[data-height="auto"] .stack-flex[data-height="default"]) {
-  height: auto;
-  flex-basis: auto;
-}
-
-:where(.reveal-layout .v-stack:after),
-:where(.reveal-v-stack .v-stack:after) {
-  content: "";
-  position: absolute;
-  inset: 0;
-  outline: 1px dashed rgb(0, 165, 152);
-  pointer-events: none;
-  z-index: 1;
-}
-
-/*
+@layer tcn-system {
+  .h-stack,
+  .v-stack {
+    display: flex;
+  }
+
+  .h-stack[data-inline="true"],
+  .v-stack[data-inline="true"] {
+    display: inline-flex;
+  }
+
+  .z-stack {
+    display: grid;
+  }
+
+  .z-stack[data-inline="true"] {
+    display: inline-grid;
+  }
+
+  .box[data-height="flex"],
+  .box[data-height="fill"] {
+    height: auto;
+  }
+
+  :where(.h-stack) {
+    display: flex;
+    position: relative;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    min-width: 0;
+    min-height: 0;
+    width: 100%;
+    height: auto;
+    overflow-x: visible;
+    overflow-y: visible;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    flex-grow: 0;
+    flex-shrink: 0;
+    box-sizing: border-box;
+  }
+
+  :where(.v-stack) {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    padding: 0;
+    margin: 0;
+    min-width: 0;
+    min-height: 0;
+    width: 100%;
+    height: auto;
+    overflow-x: visible;
+    overflow-y: visible;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    flex-grow: 0;
+    flex-shrink: 0;
+    box-sizing: border-box;
+  }
+
+  :where(.z-stack) {
+    position: relative;
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: 0;
+    width: 100%;
+    height: auto;
+    overflow: visible;
+    box-sizing: border-box;
+  }
+
+  :where(.box) {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    min-height: 0;
+    height: auto;
+    max-height: 100%;
+    z-index: 0;
+    position: relative;
+    box-sizing: border-box;
+    transform: none;
+  }
+
+  :where(.h-stack[data-inline="true"]) {
+    display: inline-flex;
+  }
+
+  :where(.h-stack[data-allow-flow="true"]) {
+    flex-wrap: wrap;
+  }
+
+  :where(.h-stack[data-v-alignment="start"]) {
+    align-items: flex-start;
+  }
+
+  :where(.h-stack[data-v-alignment="center"]) {
+    align-items: center;
+  }
+
+  :where(.h-stack[data-v-alignment="end"]) {
+    align-items: flex-end;
+  }
+
+  :where(.h-stack[data-h-alignment="start"]) {
+    justify-content: flex-start;
+  }
+
+  :where(.h-stack[data-h-alignment="center"]) {
+    justify-content: center;
+  }
+
+  :where(.h-stack[data-h-alignment="end"]) {
+    justify-content: flex-end;
+  }
+
+  :where(.h-stack > *) {
+    position: relative;
+  }
+
+  :where(.h-stack > .h-stack[data-width="flex"]),
+  :where(.h-stack > .z-stack[data-width="flex"]),
+  :where(.h-stack > .v-stack[data-width="flex"]),
+  :where(.h-stack > .stack-flex[data-width="flex"]),
+  :where(.h-stack > .h-stack[data-width="fill"]),
+  :where(.h-stack > .z-stack[data-width="fill"]),
+  :where(.h-stack > .v-stack[data-width="fill"]),
+  :where(.h-stack > .stack-flex[data-width="fill"]),
+  :where(.h-stack > .box[data-width="fill"]) {
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 0%;
+    width: auto;
+  }
+
+  :where(.h-stack > .h-stack[data-height="flex"]),
+  :where(.h-stack > .z-stack[data-height="flex"]),
+  :where(.h-stack > .v-stack[data-height="flex"]),
+  :where(.h-stack > .stack-flex[data-height="flex"]),
+  :where(.h-stack > .box[data-height="flex"]),
+  :where(.h-stack > .h-stack[data-height="fill"]),
+  :where(.h-stack > .z-stack[data-height="fill"]),
+  :where(.h-stack > .v-stack[data-height="fill"]),
+  :where(.h-stack > .stack-flex[data-height="fill"]),
+  :where(.h-stack > .box[data-height="fill"]) {
+    height: 100%;
+  }
+
+  :where(.reveal-layout .h-stack:after),
+  :where(.reveal-h-stack .h-stack:after) {
+    content: "";
+    position: absolute;
+    inset: 0;
+    outline: 1px dashed rgb(0, 123, 160);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  :where(.v-stack[data-inline="true"]) {
+    display: inline-flex;
+  }
+
+  :where(.v-stack[data-allow-flow="true"]) {
+    flex-wrap: wrap;
+  }
+
+  :where(.v-stack[data-h-alignment="start"]) {
+    align-items: flex-start;
+  }
+
+  :where(.v-stack[data-h-alignment="center"]) {
+    align-items: center;
+  }
+
+  :where(.v-stack[data-h-alignment="end"]) {
+    align-items: flex-end;
+  }
+
+  :where(.v-stack[data-v-alignment="start"]) {
+    justify-content: flex-start;
+  }
+
+  :where(.v-stack[data-v-alignment="center"]) {
+    justify-content: center;
+  }
+
+  :where(.v-stack[data-v-alignment="end"]) {
+    justify-content: flex-end;
+  }
+
+  :where(.v-stack > *) {
+    position: relative;
+  }
+
+  :where(.v-stack[data-height="auto"]) {
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: auto;
+  }
+
+  :where(.v-stack > .h-stack[data-height="flex"]),
+  :where(.v-stack > .z-stack[data-height="flex"]),
+  :where(.v-stack > .v-stack[data-height="flex"]),
+  :where(.v-stack > .stack-flex[data-height="flex"]),
+  :where(.v-stack > .box[data-height="flex"]),
+  :where(.v-stack > .h-stack[data-height="fill"]),
+  :where(.v-stack > .z-stack[data-height="fill"]),
+  :where(.v-stack > .v-stack[data-height="fill"]),
+  :where(.v-stack > .stack-flex[data-height="fill"]),
+  :where(.v-stack > .box[data-height="fill"]) {
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 0%;
+    height: auto;
+  }
+
+  :where(.v-stack > .h-stack[data-width="flex"]),
+  :where(.v-stack > .z-stack[data-width="flex"]),
+  :where(.v-stack > .v-stack[data-width="flex"]),
+  :where(.v-stack > .stack-flex[data-width="flex"]),
+  :where(.v-stack > .box[data-width="flex"]),
+  :where(.v-stack > .h-stack[data-width="fill"]),
+  :where(.v-stack > .z-stack[data-width="fill"]),
+  :where(.v-stack > .v-stack[data-width="fill"]),
+  :where(.v-stack > .stack-flex[data-width="fill"]),
+  :where(.v-stack > .box[data-width="fill"]) {
+    width: 100%;
+  }
+
+  :where(.v-stack[data-height="auto"] > .h-stack[data-height="flex"]),
+  :where(.v-stack[data-height="auto"] > .z-stack[data-height="flex"]),
+  :where(.v-stack[data-height="auto"] > .v-stack[data-height="flex"]),
+  :where(.v-stack[data-height="auto"] > .stack-flex[data-height="flex"]),
+  :where(.v-stack[data-height="auto"] > .box[data-height="flex"]),
+  :where(.v-stack[data-height="auto"] > .h-stack[data-height="fill"]),
+  :where(.v-stack[data-height="auto"] > .z-stack[data-height="fill"]),
+  :where(.v-stack[data-height="auto"] > .v-stack[data-height="fill"]),
+  :where(.v-stack[data-height="auto"] > .stack-flex[data-height="fill"]) {
+    flex-basis: auto;
+  }
+
+  :where(.v-stack[data-height="auto"] .h-stack[data-height="default"]),
+  :where(.v-stack[data-height="auto"] .z-stack[data-height="default"]),
+  :where(.v-stack[data-height="auto"] .v-stack[data-height="default"]),
+  :where(.v-stack[data-height="auto"] .stack-flex[data-height="default"]),
+  :where(.v-stack[data-height="auto"] .box[data-height="default"]) {
+    height: auto;
+    flex-basis: auto;
+  }
+
+  :where(.reveal-layout .v-stack:after),
+  :where(.reveal-v-stack .v-stack:after) {
+    content: "";
+    position: absolute;
+    inset: 0;
+    outline: 1px dashed rgb(0, 165, 152);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  /*
 ZStack CSS
 */
 
-:where(.z-stack > *) {
-  position: relative;
-  min-width: 0;
-  min-height: 0;
-  grid-area: 1 / 1 / 2 / 2;
-  box-sizing: border-box;
-}
-
-:where(.z-stack[data-h-alignment="start"] > *) {
-  justify-self: start;
-}
-
-:where(.z-stack[data-h-alignment="center"] > *) {
-  justify-self: center;
-}
-
-:where(.z-stack[data-h-alignment="end"] > *) {
-  justify-self: end;
-}
-
-:where(.z-stack[data-v-alignment="start"] > *) {
-  align-self: start;
-}
-
-:where(.z-stack[data-v-alignment="center"] > *) {
-  align-self: center;
-}
-
-:where(.z-stack[data-v-alignment="end"] > *) {
-  align-self: end;
-}
-
-:where(.z-stack > .h-stack[data-height="flex"]),
-:where(.z-stack > .v-stack[data-height="flex"]),
-:where(.z-stack > .h-stack[data-height="fill"]),
-:where(.z-stack > .v-stack[data-height="fill"]),
-:where(.z-stack > .stack-flex[data-height="fill"]),
-:where(.z-stack > .stack-flex[data-height="default"]) {
-  height: 100%;
-}
-
-:where(.z-stack > .h-stack[data-width="flex"]),
-:where(.z-stack > .v-stack[data-width="flex"]),
-:where(.z-stack > .h-stack[data-width="fill"]),
-:where(.z-stack > .v-stack[data-width="fill"]),
-:where(.z-stack > .stack-flex[data-width="fill"]),
-:where(.z-stack > .stack-flex[data-width="default"]) {
-  width: 100%;
-}
-
-:where(.reveal-layout .z-stack:after),
-:where(.reveal-z-stack .z-stack:after) {
-  content: "";
-  position: absolute;
-  inset: 0;
-  outline: 1px dashed rgb(119, 0, 255);
-  pointer-events: none;
-  z-index: 1;
-}
-
-/*
+  :where(.z-stack > *) {
+    position: relative;
+    min-width: 0;
+    min-height: 0;
+    grid-area: 1 / 1 / 2 / 2;
+    box-sizing: border-box;
+  }
+
+  :where(.z-stack[data-h-alignment="start"] > *) {
+    justify-self: start;
+  }
+
+  :where(.z-stack[data-h-alignment="center"] > *) {
+    justify-self: center;
+  }
+
+  :where(.z-stack[data-h-alignment="end"] > *) {
+    justify-self: end;
+  }
+
+  :where(.z-stack[data-v-alignment="start"] > *) {
+    align-self: start;
+  }
+
+  :where(.z-stack[data-v-alignment="center"] > *) {
+    align-self: center;
+  }
+
+  :where(.z-stack[data-v-alignment="end"] > *) {
+    align-self: end;
+  }
+
+  :where(.z-stack > .h-stack[data-height="flex"]),
+  :where(.z-stack > .v-stack[data-height="flex"]),
+  :where(.z-stack > .h-stack[data-height="fill"]),
+  :where(.z-stack > .v-stack[data-height="fill"]),
+  :where(.z-stack > .stack-flex[data-height="fill"]),
+  :where(.z-stack > .stack-flex[data-height="default"]) {
+    height: 100%;
+  }
+
+  :where(.z-stack > .h-stack[data-width="flex"]),
+  :where(.z-stack > .v-stack[data-width="flex"]),
+  :where(.z-stack > .h-stack[data-width="fill"]),
+  :where(.z-stack > .v-stack[data-width="fill"]),
+  :where(.z-stack > .stack-flex[data-width="fill"]),
+  :where(.z-stack > .stack-flex[data-width="default"]) {
+    width: 100%;
+  }
+
+  :where(.reveal-layout .z-stack:after),
+  :where(.reveal-z-stack .z-stack:after) {
+    content: "";
+    position: absolute;
+    inset: 0;
+    outline: 1px dashed rgb(119, 0, 255);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  /*
 Defaults CSS
 */
 
-:where(.h-stack > .h-stack[data-width="default"]),
-:where(.h-stack > .z-stack[data-width="default"]),
-:where(.h-stack > .v-stack[data-width="default"]),
-:where(.h-stack > .stack-flex[data-width="default"]),
-:where(.h-stack > .box[data-width="default"]) {
-  flex-grow: 1;
-  flex-shrink: 0;
-  flex-basis: 0%;
-  width: auto;
-}
-
-:where(.h-stack[data-height="auto"] .h-stack[data-height="default"]),
-:where(.h-stack[data-height="auto"] .z-stack[data-height="default"]),
-:where(.h-stack[data-height="auto"] .v-stack[data-height="default"]),
-:where(.h-stack[data-height="auto"] .stack-flex[data-height="default"]) {
-  height: auto;
-}
-
-:where(.h-stack[data-width="auto"]) {
-  flex-grow: 0;
-  flex-shrink: 0;
-  width: auto;
-  flex-basis: auto;
-}
-
-:where(.h-stack[data-width="auto"] > .h-stack[data-width="flex"]),
-:where(.h-stack[data-width="auto"] > .z-stack[data-width="flex"]),
-:where(.h-stack[data-width="auto"] > .v-stack[data-width="flex"]),
-:where(.h-stack[data-width="auto"] > .stack-flex[data-width="flex"]),
-:where(.h-stack[data-width="auto"] > .h-stack[data-width="fill"]),
-:where(.h-stack[data-width="auto"] > .z-stack[data-width="fill"]),
-:where(.h-stack[data-width="auto"] > .v-stack[data-width="fill"]),
-:where(.h-stack[data-width="auto"] > .stack-flex[data-width="fill"]) {
-  flex-basis: auto;
-}
-
-:where(.v-stack > .h-stack[data-height="default"]),
-:where(.v-stack > .z-stack[data-height="default"]),
-:where(.v-stack > .v-stack[data-height="default"]),
-:where(.v-stack > .stack-flex[data-height="default"]) {
-  flex-basis: auto;
-  height: auto;
-}
-
-:where(.v-stack[data-overflow-y="auto"]:not([data-height="auto"])),
-:where(.v-stack[data-overflow-y="scroll"]:not([data-height="auto"])),
-:where(.h-stack[data-overflow-y="auto"]:not([data-width="auto"])),
-:where(.h-stack[data-overflow-y="scroll"]:not([data-width="auto"])) {
-  flex-shrink: 1;
-}
-
-/* Firefox has a bug with backdrop filter and translateZ.
+  :where(.h-stack > .h-stack[data-width="default"]),
+  :where(.h-stack > .z-stack[data-width="default"]),
+  :where(.h-stack > .v-stack[data-width="default"]),
+  :where(.h-stack > .stack-flex[data-width="default"]),
+  :where(.h-stack > .box[data-width="default"]) {
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 0%;
+    width: auto;
+  }
+
+  :where(.h-stack[data-height="auto"] .h-stack[data-height="default"]),
+  :where(.h-stack[data-height="auto"] .z-stack[data-height="default"]),
+  :where(.h-stack[data-height="auto"] .v-stack[data-height="default"]),
+  :where(.h-stack[data-height="auto"] .stack-flex[data-height="default"]) {
+    height: auto;
+  }
+
+  :where(.h-stack[data-width="auto"]) {
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: auto;
+    flex-basis: auto;
+  }
+
+  :where(.h-stack[data-width="auto"] > .h-stack[data-width="flex"]),
+  :where(.h-stack[data-width="auto"] > .z-stack[data-width="flex"]),
+  :where(.h-stack[data-width="auto"] > .v-stack[data-width="flex"]),
+  :where(.h-stack[data-width="auto"] > .stack-flex[data-width="flex"]),
+  :where(.h-stack[data-width="auto"] > .h-stack[data-width="fill"]),
+  :where(.h-stack[data-width="auto"] > .z-stack[data-width="fill"]),
+  :where(.h-stack[data-width="auto"] > .v-stack[data-width="fill"]),
+  :where(.h-stack[data-width="auto"] > .stack-flex[data-width="fill"]) {
+    flex-basis: auto;
+  }
+
+  :where(.v-stack > .h-stack[data-height="default"]),
+  :where(.v-stack > .z-stack[data-height="default"]),
+  :where(.v-stack > .v-stack[data-height="default"]),
+  :where(.v-stack > .stack-flex[data-height="default"]) {
+    flex-basis: auto;
+    height: auto;
+  }
+
+  :where(.v-stack[data-overflow-y="auto"]:not([data-height="auto"])),
+  :where(.v-stack[data-overflow-y="scroll"]:not([data-height="auto"])),
+  :where(.h-stack[data-overflow-y="auto"]:not([data-width="auto"])),
+  :where(.h-stack[data-overflow-y="scroll"]:not([data-width="auto"])) {
+    flex-shrink: 1;
+  }
+
+  /* Firefox has a bug with backdrop filter and translateZ.
 So we only want to turn this on if somebody wants to enable resizing.
 Otherwise other ui components break when composed within a box. */
-:where(.box[data-enabled-resize-on-start="true"]),
-:where(.box[data-enabled-resize-on-end="true"]),
-:where(.box[data-enabled-resize-on-top="true"]),
-:where(.box[data-enabled-resize-on-bottom="true"]),
-:where(.box[data-enabled-resize-on-left="true"]),
-:where(.box[data-enabled-resize-on-right="true"]) {
-  transform: translateZ(0);
-}
-
-:where(.box[data-width="flex"]) {
-  width: auto;
-}
-
-:where(:global(.reveal-layout) .box:after),
-:where(:global(.reveal-box) .box:after) {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border: 1px dashed rgb(138, 138, 138);
-  pointer-events: none;
-  z-index: 1;
+  :where(.box[data-enabled-resize-on-start="true"]),
+  :where(.box[data-enabled-resize-on-end="true"]),
+  :where(.box[data-enabled-resize-on-top="true"]),
+  :where(.box[data-enabled-resize-on-bottom="true"]),
+  :where(.box[data-enabled-resize-on-left="true"]),
+  :where(.box[data-enabled-resize-on-right="true"]) {
+    transform: translateZ(0);
+  }
+
+  :where(.box[data-width="flex"]) {
+    width: auto;
+  }
+
+  :where(:global(.tcn-reveal-layout) .box:after),
+  :where(:global(.tcn-reveal-box) .box:after) {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border: 1px dashed rgb(138, 138, 138);
+    pointer-events: none;
+    z-index: 1;
+  }
 }