@tcn/ui 0.3.1 → 0.3.3

package/src/overlay/portal/portal.css

@@ -1,35 +1,37 @@
-body > * {
-  position: relative;
-  z-index: 0;
-}
+@layer tcn-system {
+  :where(body > *) {
+    position: relative;
+    z-index: 0;
+  }
 
-.portal {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  bottom: 0px;
-  right: 0px;
-  overflow: hidden;
-  padding: 0px;
-  margin: 0px;
-  pointer-events: none;
-}
+  :where(.tcn-portal) {
+    position: absolute !important;
+    top: 0px;
+    left: 0px;
+    bottom: 0px;
+    right: 0px;
+    overflow: hidden;
+    padding: 0px;
+    margin: 0px;
+    pointer-events: none;
+  }
 
-.portal > * {
-  pointer-events: auto;
-}
+  :where(.tcn-portal > *) {
+    pointer-events: auto;
+  }
 
-.portal-platform {
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  bottom: 0px;
-  right: 0px;
-  overflow: hidden;
-  padding: 0px;
-  margin: 0px;
-  background-color: rgba(0, 0, 0, 0);
-  pointer-events: none;
-  transform: none;
-  z-index: 1;
+  :where(.tcn-portal-platform) {
+    position: fixed !important;
+    top: 0px;
+    left: 0px;
+    bottom: 0px;
+    right: 0px;
+    overflow: hidden;
+    padding: 0px;
+    margin: 0px;
+    background-color: rgba(0, 0, 0, 0);
+    pointer-events: none;
+    transform: none;
+    z-index: 1;
+  }
 }

package/src/overlay/portal/portal_platform.tsx

@@ -10,7 +10,7 @@ export class PortalPresenter {
   constructor(win = window, zIndex: number | string = '0') {
     this._window = win;
     this.div = this._window.document.createElement('div');
-    this.div.className = 'portal';
+    this.div.className = 'tcn-portal';
     this.setZIndex(zIndex);
   }
 
@@ -40,19 +40,20 @@ export class PortalPlatform {
     this._window = win;
     this._root = root;
     this.platform = this._getPlatformRoot();
-    this.platform.classList.add('platform-root');
   }
 
   private _getPlatformRoot() {
     const existingPlatformRoot = this._window.document.body.querySelector(
-      '.platform-root'
+      '.tcn-platform-root'
     ) as HTMLDivElement | null;
     if (!existingPlatformRoot) {
       const root = this._window.document.createElement('div');
       const portalPlatform = this._window.document.createElement('div');
-      portalPlatform.id = 'portal-platform';
-      portalPlatform.classList.add('portal-platform');
+      portalPlatform.id = 'tcn-portal-platform';
+      portalPlatform.classList.add('tcn-portal-platform');
+      portalPlatform.classList.add('tcn-theme-root');
       root.appendChild(portalPlatform);
+      root.classList.add('tcn-platform-root');
 
       return root;
     } else {

package/src/overlay/tethered/tethered.module.css

@@ -1,8 +1,10 @@
-.tethered {
-  display: inline-block;
-  position: absolute;
-  width: auto;
-  height: auto;
-  left: var(--tethered-left, 0);
-  top: var(--tethered-top, 0);
+@layer tcn-system {
+  :where(.tethered) {
+    display: inline-block;
+    position: absolute;
+    width: auto;
+    height: auto;
+    left: var(--tethered-left, 0);
+    top: var(--tethered-top, 0);
+  }
 }

package/src/stacks/box/bottom_resize_handle.module.css

@@ -1,10 +1,12 @@
-.bottom-resize-handle {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  height: 16px;
-  width: 100%;
-  z-index: 1;
-  cursor: ns-resize;
-  pointer-events: auto;
+@layer tcn-system {
+  :where(.bottom-resize-handle) {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    height: 16px;
+    width: 100%;
+    z-index: 1;
+    cursor: ns-resize;
+    pointer-events: auto;
+  }
 }

package/src/stacks/box/bottom_resize_handle.tsx

@@ -32,7 +32,7 @@ export function BottomResizeHandle({
 
   return (
     <div
-      className={clsx(styles['bottom-resize-handle'], 'bottom-resize-handle')}
+      className={clsx(styles['bottom-resize-handle'], 'tcn-bottom-resize-handle')}
       onMouseDown={resizeHandler}
       style={bottomResizeHandleStyle}
     >

package/src/stacks/box/box.tsx

@@ -168,7 +168,7 @@ export const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(
         className,
         isFlexing && 'stack-flex',
         isFlexing && styles['stack-flex'],
-        'box'
+        'tcn-box'
       )}
       {...otherProps}
     >

package/src/stacks/box/end_resize_handle.module.css

@@ -1,17 +1,19 @@
-.end-resize-handle {
-  position: fixed;
-  bottom: 0;
-  width: 16px;
-  height: 100%;
-  z-index: 1;
-  cursor: ew-resize;
-  pointer-events: auto;
-}
+@layer tcn-system {
+  :where(.end-resize-handle) {
+    position: fixed;
+    bottom: 0;
+    width: 16px;
+    height: 100%;
+    z-index: 1;
+    cursor: ew-resize;
+    pointer-events: auto;
+  }
 
-.end-resize-handle:dir(ltr) {
-  right: var(--resize-offset, -8px);
-}
+  :where(.end-resize-handle:dir(ltr)) {
+    right: var(--resize-offset, -8px);
+  }
 
-.end-resize-handle:dir(rtl) {
-  left: var(--resize-offset, -8px);
+  :where(.end-resize-handle:dir(rtl)) {
+    left: var(--resize-offset, -8px);
+  }
 }

package/src/stacks/box/end_resize_handle.tsx

@@ -32,7 +32,7 @@ export function EndResizeHandle({
 
   return (
     <div
-      className={clsx(styles['end-resize-handle'], 'end-resize-handle')}
+      className={clsx(styles['end-resize-handle'], 'tcn-end-resize-handle')}
       onMouseDown={resizeHandler}
       style={endResizeHandleStyle}
     >

package/src/stacks/box/left_resize_handle.module.css

@@ -1,10 +1,12 @@
-.left-resize-handle {
-  position: fixed;
-  bottom: 0;
-  left: var(--resize-offset, -8px);
-  height: 100%;
-  width: 16px;
-  z-index: 1;
-  cursor: ew-resize;
-  pointer-events: auto;
+@layer tcn-system {
+  :where(.left-resize-handle) {
+    position: fixed;
+    bottom: 0;
+    left: var(--resize-offset, -8px);
+    height: 100%;
+    width: 16px;
+    z-index: 1;
+    cursor: ew-resize;
+    pointer-events: auto;
+  }
 }

package/src/stacks/box/left_resize_handle.tsx

@@ -33,7 +33,7 @@ export function LeftResizeHandle({
 
   return (
     <div
-      className={clsx(styles['left-resize-handle'], 'left-resize-handle')}
+      className={clsx(styles['left-resize-handle'], 'tcn-left-resize-handle')}
       onMouseDown={resizeHandler}
       style={leftResizeHandleStyle}
     >

package/src/stacks/box/right_resize_handle.module.css

@@ -1,10 +1,12 @@
-.right-resize-handle {
-  position: fixed;
-  bottom: 0;
-  right: var(--resize-offset, -8px);
-  height: 100%;
-  width: 16px;
-  z-index: 1;
-  cursor: ew-resize;
-  pointer-events: auto;
+@layer tcn-system {
+  :where(.right-resize-handle) {
+    position: fixed;
+    bottom: 0;
+    right: var(--resize-offset, -8px);
+    height: 100%;
+    width: 16px;
+    z-index: 1;
+    cursor: ew-resize;
+    pointer-events: auto;
+  }
 }

package/src/stacks/box/right_resize_handle.tsx

@@ -33,7 +33,7 @@ export function RightResizeHandle({
 
   return (
     <div
-      className={clsx(styles['right-resize-handle'], 'right-resize-handle')}
+      className={clsx(styles['right-resize-handle'], 'tcn-right-resize-handle')}
       onMouseDown={resizeHandler}
       style={rightResizeHandleStyle}
     >

package/src/stacks/box/start_resize_handle.module.css

@@ -1,17 +1,19 @@
-.start-resize-handle {
-  position: fixed;
-  bottom: 0;
-  height: 100%;
-  width: 16px;
-  z-index: 1;
-  cursor: ew-resize;
-  pointer-events: auto;
-}
+@layer tcn-system {
+  :where(.start-resize-handle) {
+    position: fixed;
+    bottom: 0;
+    height: 100%;
+    width: 16px;
+    z-index: 1;
+    cursor: ew-resize;
+    pointer-events: auto;
+  }
 
-.start-resize-handle:dir(ltr) {
-  left: var(--resize-offset, -8px);
-}
+  :where(.start-resize-handle:dir(ltr)) {
+    left: var(--resize-offset, -8px);
+  }
 
-.start-resize-handle:dir(rtl) {
-  right: var(--resize-offset, -8px);
+  :where(.start-resize-handle:dir(rtl)) {
+    right: var(--resize-offset, -8px);
+  }
 }

package/src/stacks/box/start_resize_handle.tsx

@@ -32,7 +32,7 @@ export function StartResizeHandle({
 
   return (
     <div
-      className={clsx(styles['start-resize-handle'], 'start-resize-handle')}
+      className={clsx(styles['start-resize-handle'], 'tcn-start-resize-handle')}
       onMouseDown={resizeHandler}
       style={startResizeHandleStyle}
     >

package/src/stacks/box/top_resize_handle.module.css

@@ -1,10 +1,12 @@
-.top-resize-handle {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 16px;
-  cursor: ns-resize;
-  z-index: 1;
-  pointer-events: auto;
+@layer tcn-system {
+  :where(.top-resize-handle) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 16px;
+    cursor: ns-resize;
+    z-index: 1;
+    pointer-events: auto;
+  }
 }

package/src/stacks/box/top_resize_handle.tsx

@@ -31,7 +31,7 @@ export function TopResizeHandle({
   };
   return (
     <div
-      className={clsx(styles['top-resize-handle'], 'top-resize-handle')}
+      className={clsx(styles['top-resize-handle'], 'tcn-top-resize-handle')}
       onMouseDown={resizeHandler}
       style={topResizeHandleStyle}
     >

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>
   );
 });