@tcn/ui 0.3.1 → 0.3.2

package/src/stacks/collapsible_box.module.css

@@ -1,37 +1,53 @@
-.collapsible-box {
-  transition:
-    max-height 0.5s ease,
-    max-width 0.5s ease;
-  height: 100%;
-  overflow: hidden;
-}
+@layer tcn-system {
+  :where(.collapsible-box) {
+    transition:
+      max-height 0.5s ease,
+      max-width 0.5s ease;
+    height: 100%;
+    overflow: hidden;
+  }
 
-/*** Horizontal Collapsible Box Styles ************************************************************************/
-.collapsible-box[data-collapse-orientation="horizontal"][data-is-collapsed="true"] {
-  max-width: 0;
-}
+  /*** Horizontal Collapsible Box Styles ************************************************************************/
+  :where(
+      .collapsible-box[data-collapse-orientation="horizontal"][data-is-collapsed="true"]
+    ) {
+    max-width: 0;
+  }
 
-.collapsible-box[data-collapse-orientation="horizontal"][data-is-resizing="true"] {
-  max-width: unset;
-}
+  :where(
+      .collapsible-box[data-collapse-orientation="horizontal"][data-is-resizing="true"]
+    ) {
+    max-width: unset;
+  }
 
-.collapsible-box[data-collapse-orientation="horizontal"][data-is-resizing="false"][data-is-collapsed="false"] {
-  max-width: var(--collapsible-size);
-}
+  :where(
+      .collapsible-box[data-collapse-orientation="horizontal"][data-is-resizing="false"][data-is-collapsed="false"]
+    ) {
+    max-width: var(--collapsible-size);
+  }
 
-/*** Vertical Collapsible Box Styles ************************************************************************/
-.collapsible-box[data-collapse-orientation="vertical"][data-is-collapsed="true"] {
-  max-height: 0;
-}
+  /*** Vertical Collapsible Box Styles ************************************************************************/
+  :where(
+      .collapsible-box[data-collapse-orientation="vertical"][data-is-collapsed="true"]
+    ) {
+    max-height: 0;
+  }
 
-.collapsible-box[data-collapse-orientation="vertical"][data-is-collapsed="false"] {
-  max-height: var(--collapsible-size, 100%);
-}
+  :where(
+      .collapsible-box[data-collapse-orientation="vertical"][data-is-collapsed="false"]
+    ) {
+    max-height: var(--collapsible-size, 100%);
+  }
 
-.collapsible-box[data-collapse-orientation="vertical"][data-is-resizing="true"] {
-  max-height: unset;
-}
+  :where(
+      .collapsible-box[data-collapse-orientation="vertical"][data-is-resizing="true"]
+    ) {
+    max-height: unset;
+  }
 
-.collapsible-box[data-collapse-orientation="vertical"][data-is-resizing="false"][data-is-collapsed="false"] {
-  max-height: var(--collapsible-size);
+  :where(
+      .collapsible-box[data-collapse-orientation="vertical"][data-is-resizing="false"][data-is-collapsed="false"]
+    ) {
+    max-height: var(--collapsible-size);
+  }
 }

package/src/stacks/demo.module.css

@@ -1,4 +1,6 @@
-.playlist > :nth-child(2n) {
-  background-color: #e7e7e7;
-  border-radius: 4px;
+@layer tcn-system {
+  :where(.playlist > :nth-child(2n)) {
+    background-color: #e7e7e7;
+    border-radius: 4px;
+  }
 }

package/src/stacks/h_collapsible_box.tsx

@@ -41,7 +41,11 @@ export const HCollapsibleBox = React.forwardRef(function CollapsibleBox(
         props.onWidthResizeEnd?.(width);
         collapsibleRef.current?.style.setProperty('--collapsible-size', `${width}px`);
       }}
-      className={clsx(props.className, styles['collapsible-box'])}
+      className={clsx(
+        props.className,
+        styles['collapsible-box'],
+        'tcn-h-collapsible-box'
+      )}
       children={children}
     />
   );

package/src/stacks/h_stack.tsx

@@ -96,7 +96,7 @@ export const HStack = React.forwardRef(function HStack<T extends HTMLElement>(
   return (
     <As
       ref={ref}
-      className={clsx(styles['h-stack'], className, 'h-stack', 'stack')}
+      className={clsx(styles['h-stack'], className, 'tcn-h-stack', 'tcn-stack')}
       style={finalStyles}
       data-inline={Boolean(inline)}
       data-allow-flow={Boolean(allowFlow)}

package/src/stacks/spacer.tsx

@@ -41,7 +41,7 @@ export const Spacer = React.forwardRef<HTMLDivElement, SpacerProps>(function Spa
         zIndex: 1,
         flex,
       }}
-      className={clsx('spacer', className)}
+      className={clsx('spacer', className, 'tcn-spacer')}
     ></div>
   );
 });