@tcn/ui 0.3.0 → 0.3.2

package/src/overlay/frame/frame_stories.module.css

@@ -1,14 +1,16 @@
-.sb-frame-header {
-  background: var(--accent-color);
-  color: white;
-  font-weight: bold;
-  border: 2px solid black;
-  padding: var(--padding-medium);
-  border-radius: var(--shape-radius-medium);
-}
+@layer tcn-system {
+  :where(.sb-frame-header) {
+    background: var(--accent-color);
+    color: white;
+    font-weight: bold;
+    border: 2px solid black;
+    padding: var(--padding-medium);
+    border-radius: var(--shape-radius-medium);
+  }
 
-.sb-frame-container {
-  background: #f7e9fe;
-  padding: var(--padding-medium);
-  border-radius: var(--shape-radius-large);
+  :where(.sb-frame-container) {
+    background: #f7e9fe;
+    padding: var(--padding-medium);
+    border-radius: var(--shape-radius-large);
+  }
 }

package/src/overlay/menu/menu.module.css

@@ -1,33 +1,35 @@
-.menu {
-  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
-  border-radius: 8px;
-  background-color: rgb(255, 255, 255);
-  padding: 8px;
-}
+@layer tcn-system {
+  :where(.menu) {
+    box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
+    border-radius: 8px;
+    background-color: rgb(255, 255, 255);
+    padding: 8px;
+  }
 
-.menu-item {
-  border-radius: 4px;
-  padding: 4px;
-  padding-inline: 8px;
-  height: auto;
-  outline: none;
-  border: none;
-  background-color: transparent;
-  color: var(--text-color);
-  cursor: pointer;
-}
+  :where(.menu-item) {
+    border-radius: 4px;
+    padding: 4px;
+    padding-inline: 8px;
+    height: auto;
+    outline: none;
+    border: none;
+    background-color: transparent;
+    color: var(--text-color);
+    cursor: pointer;
+  }
 
-.menu-item:active {
-  opacity: 0.75;
-}
+  :where(.menu-item:active) {
+    opacity: 0.75;
+  }
 
-.menu-item:hover,
-.menu-item[data-is-open="true"] {
-  background-color: var(--accent-color);
-  color: rgba(255, 255, 255, 0.9);
-}
+  :where(.menu-item:hover),
+  :where(.menu-item[data-is-open="true"]) {
+    background-color: var(--accent-color);
+    color: rgba(255, 255, 255, 0.9);
+  }
 
-.menu-item:focus {
-  background-color: var(--accent-color);
-  color: rgba(255, 255, 255, 0.9);
+  :where(.menu-item:focus) {
+    background-color: var(--accent-color);
+    color: rgba(255, 255, 255, 0.9);
+  }
 }

package/src/overlay/menu/menu.tsx

@@ -105,7 +105,7 @@ export const Menu = React.forwardRef(function Menu(
       restoreFocus={restoreFocus}
       veil={veil}
     >
-      <VStack ref={ref} className={clsx(styles.menu, className, 'menu')} {...props}>
+      <VStack ref={ref} className={clsx(styles.menu, className, 'tcn-menu')} {...props}>
         {clonedChildren}
       </VStack>
     </Popper>
@@ -235,7 +235,7 @@ export const MenuItem = React.forwardRef(function MenuItem(
         ref={forkedRef}
         data-is-selected={Boolean(selected)}
         data-has-children={Boolean(hasSubmenu)}
-        className={clsx(className, styles['menu-item'], 'menu-item')}
+        className={clsx(className, styles['menu-item'], 'tcn-menu-item')}
         data-is-open={open}
         {...props}
       >

package/src/overlay/popper/legacy/popper.module.css

@@ -1,10 +1,12 @@
-.popover {
-  display: inline-block;
-  position: absolute;
-}
+@layer tcn-system {
+  :where(.popover) {
+    display: inline-block;
+    position: absolute;
+  }
 
-.popover-veil {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0);
+  :where(.popover-veil) {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0);
+  }
 }

package/src/overlay/popper/legacy/popper.tsx

@@ -2,6 +2,7 @@ import { ClickAwayListener, ScrollAwayListener } from '../../../utils/index.js';
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import { Portal } from '../../portal/portal.js';
 import styles from './popper.module.css';
+import clsx from 'clsx';
 
 export interface PopperProps {
   anchorElement: HTMLElement | null;
@@ -179,7 +180,7 @@ export function Popper({
     <ScrollAwayListener onScrollAway={close} isException={isScrollAwayException}>
       <div
         ref={popoverRef}
-        className={styles.popover}
+        className={clsx(styles.popover, 'tcn-popper')}
         style={{
           top: `${position.top}px`,
           left: `${position.left}px`,

package/src/overlay/popper/preview_popper.tsx

@@ -39,7 +39,7 @@ export const PreviewPopper = forwardRef<
         onDismissal={close}
         isException={isException}
         dismissals={dismissals}
-        acceptedRefs={[popperRef, ...acceptedRefs]}
+        acceptedRefs={[popperRef, anchorElement, ...acceptedRefs]}
       >
         <ElementTethered
           ref={merged}

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,19 @@ 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');
       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>
   );
 });