@tcn/ui 0.3.1 → 0.3.2

package/src/layouts/body/v_body.module.css

@@ -1,5 +1,7 @@
-.v-body {
-  min-height: 0;
-  flex-grow: 1;
-  width: 100%;
+@layer tcn-system {
+  .v-body {
+    min-height: 0;
+    flex-grow: 1;
+    width: 100%;
+  }
 }

package/src/layouts/column/column.module.css

@@ -1,33 +1,35 @@
-.column {
-  min-width: 250px;
-  height: 100%;
-  min-height: 100%;
-}
+@layer tcn-system {
+  :where(.column) {
+    min-width: 250px;
+    height: 100%;
+    min-height: 100%;
+  }
 
-.column-stack {
-  gap: 8px;
-  padding: 8px;
-  width: 100%;
-  height: 100%;
-}
+  :where(.column-stack) {
+    gap: 8px;
+    padding: 8px;
+    width: 100%;
+    height: 100%;
+  }
 
-.column:after {
-  content: "";
-  position: absolute;
-  bottom: var(--padding);
-  top: var(--padding);
-  right: 0;
-  width: 1px;
-  background-color: rgb(221, 221, 221);
-}
+  :where(.column:after) {
+    content: "";
+    position: absolute;
+    bottom: var(--padding);
+    top: var(--padding);
+    right: 0;
+    width: 1px;
+    background-color: rgb(221, 221, 221);
+  }
 
-.column:last-child:after {
-  display: none;
-}
+  :where(.column:last-child:after) {
+    display: none;
+  }
 
-:global(.h-stack) > .column[data-width="default"] {
-  width: auto;
-  flex-basis: auto;
-  flex-grow: 0;
-  flex-shrink: 0;
+  :where(:global(.h-stack) > .column[data-width="default"]) {
+    width: auto;
+    flex-basis: auto;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
 }

package/src/layouts/column/column.tsx

@@ -35,7 +35,7 @@ export const Column = React.forwardRef<HTMLElement, ColumnProps>(function Column
       maxWidth={maxWidth}
       minHeight={minHeight}
       maxHeight={maxHeight}
-      className={clsx(className, styles['column'], 'column')}
+      className={clsx(className, styles['column'], 'tcn-column')}
       {...props}
     >
       <VStack
@@ -47,7 +47,7 @@ export const Column = React.forwardRef<HTMLElement, ColumnProps>(function Column
         vAlign={vAlign}
         ref={ref}
         as="section"
-        className={clsx(styles['column-stack'], 'column-stack')}
+        className={clsx(styles['column-stack'], 'tcn-column-stack')}
         zIndex={0}
       >
         {children}

package/src/layouts/divider/divider.module.css

@@ -1,102 +1,104 @@
-.divider {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.divider-line {
-  background: var(--material-line, #aaa);
-  border-radius: calc(4px * var(--scalar, 1));
-}
-
-/* Emphasis */
-.divider-line[data-emphasis="strong"] {
-  background: color-mix(in srgb, #aaa, black 20%);
-}
-
-.divider-line[data-emphasis="normal"] {
-  background: #aaa;
-}
-
-.divider-line[data-emphasis="light"] {
-  background: color-mix(in srgb, #aaa, white 20%);
-}
-
-/* Horizontal Divider */
-.divider[data-orientation="horizontal"] {
-  width: 100%;
-  height: auto;
-}
-
-.divider-line[data-orientation="horizontal"] {
-  width: var(--divider-width, 100%);
-  height: calc(var(--divider-height, 1px) * var(--scalar, 1));
-}
-
-.divider-line[data-orientation="horizontal"][data-thickness="sm"] {
-  height: calc(var(--divider-height, 1px) * var(--scalar, 1));
-}
-
-.divider-line[data-orientation="horizontal"][data-thickness="md"] {
-  height: calc(var(--divider-height, 2px) * var(--scalar, 1));
-}
-
-.divider-line[data-orientation="horizontal"][data-thickness="lg"] {
-  height: calc(var(--divider-height, 3px) * var(--scalar, 1));
-}
-
-.divider-line[data-orientation="horizontal"][data-length="full"] {
-  width: var(--divider-width, 100%);
-}
-
-.divider-line[data-orientation="horizontal"][data-length="sm"] {
-  width: calc(var(--divider-width, 16px) * var(--scalar, 1));
-}
-
-.divider-line[data-orientation="horizontal"][data-length="md"] {
-  width: calc(var(--divider-width, 20px) * var(--scalar, 1));
-}
-
-.divider-line[data-orientation="horizontal"][data-length="lg"] {
-  width: calc(var(--divider-width, 24px) * var(--scalar, 1));
-}
-
-/* Vertical Divider */
-
-.divider[data-orientation="vertical"] {
-  height: 100%;
-  width: auto;
-}
-
-.divider-line[data-orientation="vertical"] {
-  width: calc(var(--divider-width, 1px) * var(--scalar, 1));
-  height: var(--divider-height, 100%);
-}
-
-.divider-line[data-orientation="vertical"][data-thickness="sm"] {
-  min-width: calc(var(--divider-width, 1px) * var(--scalar, 1));
-}
-
-.divider-line[data-orientation="vertical"][data-thickness="md"] {
-  min-width: calc(var(--divider-width, 2px) * var(--scalar, 1));
-}
-
-.divider-line[data-orientation="vertical"][data-thickness="lg"] {
-  min-width: calc(var(--divider-width, 3px) * var(--scalar, 1));
-}
-
-.divider-line[data-orientation="vertical"][data-length="full"] {
-  height: var(--divider-height, 100%);
-}
-
-.divider-line[data-orientation="vertical"][data-length="sm"] {
-  height: calc(var(--divider-height, 16px) * var(--scalar, 1));
-}
-
-.divider-line[data-orientation="vertical"][data-length="md"] {
-  height: calc(var(--divider-height, 20px) * var(--scalar, 1));
-}
-
-.divider-line[data-orientation="vertical"][data-length="lg"] {
-  height: calc(var(--divider-height, 24px) * var(--scalar, 1));
+@layer tcn-system {
+  :where(.divider) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :where(.divider-line) {
+    background: var(--material-line, #aaa);
+    border-radius: calc(4px * var(--scalar, 1));
+  }
+
+  /* Emphasis */
+  :where(.divider-line[data-emphasis="strong"]) {
+    background: color-mix(in srgb, #aaa, black 20%);
+  }
+
+  :where(.divider-line[data-emphasis="normal"]) {
+    background: #aaa;
+  }
+
+  :where(.divider-line[data-emphasis="light"]) {
+    background: color-mix(in srgb, #aaa, white 20%);
+  }
+
+  /* Horizontal Divider */
+  :where(.divider[data-orientation="horizontal"]) {
+    width: 100%;
+    height: auto;
+  }
+
+  :where(.divider-line[data-orientation="horizontal"]) {
+    width: var(--divider-width, 100%);
+    height: calc(var(--divider-height, 1px) * var(--scalar, 1));
+  }
+
+  :where(.divider-line[data-orientation="horizontal"][data-thickness="sm"]) {
+    height: calc(var(--divider-height, 1px) * var(--scalar, 1));
+  }
+
+  :where(.divider-line[data-orientation="horizontal"][data-thickness="md"]) {
+    height: calc(var(--divider-height, 2px) * var(--scalar, 1));
+  }
+
+  :where(.divider-line[data-orientation="horizontal"][data-thickness="lg"]) {
+    height: calc(var(--divider-height, 3px) * var(--scalar, 1));
+  }
+
+  :where(.divider-line[data-orientation="horizontal"][data-length="full"]) {
+    width: var(--divider-width, 100%);
+  }
+
+  :where(.divider-line[data-orientation="horizontal"][data-length="sm"]) {
+    width: calc(var(--divider-width, 16px) * var(--scalar, 1));
+  }
+
+  :where(.divider-line[data-orientation="horizontal"][data-length="md"]) {
+    width: calc(var(--divider-width, 20px) * var(--scalar, 1));
+  }
+
+  :where(.divider-line[data-orientation="horizontal"][data-length="lg"]) {
+    width: calc(var(--divider-width, 24px) * var(--scalar, 1));
+  }
+
+  /* Vertical Divider */
+
+  :where(.divider[data-orientation="vertical"]) {
+    height: 100%;
+    width: auto;
+  }
+
+  :where(.divider-line[data-orientation="vertical"]) {
+    width: calc(var(--divider-width, 1px) * var(--scalar, 1));
+    height: var(--divider-height, 100%);
+  }
+
+  :where(.divider-line[data-orientation="vertical"][data-thickness="sm"]) {
+    min-width: calc(var(--divider-width, 1px) * var(--scalar, 1));
+  }
+
+  :where(.divider-line[data-orientation="vertical"][data-thickness="md"]) {
+    min-width: calc(var(--divider-width, 2px) * var(--scalar, 1));
+  }
+
+  :where(.divider-line[data-orientation="vertical"][data-thickness="lg"]) {
+    min-width: calc(var(--divider-width, 3px) * var(--scalar, 1));
+  }
+
+  :where(.divider-line[data-orientation="vertical"][data-length="full"]) {
+    height: var(--divider-height, 100%);
+  }
+
+  :where(.divider-line[data-orientation="vertical"][data-length="sm"]) {
+    height: calc(var(--divider-height, 16px) * var(--scalar, 1));
+  }
+
+  :where(.divider-line[data-orientation="vertical"][data-length="md"]) {
+    height: calc(var(--divider-height, 20px) * var(--scalar, 1));
+  }
+
+  :where(.divider-line[data-orientation="vertical"][data-length="lg"]) {
+    height: calc(var(--divider-height, 24px) * var(--scalar, 1));
+  }
 }

package/src/layouts/divider/divider.tsx

@@ -59,7 +59,7 @@ export const Divider: React.FC<DividerProps> = ({
       data-thickness={thickness}
       data-length={length}
       data-orientation={orientation}
-      className={clsx(styles[`divider`], 'divider', 'tcn-divider', className)}
+      className={clsx(styles[`divider`], 'tcn-divider', className)}
       {...props}
     >
       <div
@@ -70,7 +70,6 @@ export const Divider: React.FC<DividerProps> = ({
         style={cssVariables}
         className={clsx(
           styles[`divider-line`],
-          'divider-line',
           'tcn-divider-line',
           'material',
           className

package/src/layouts/footer/footer.module.css

@@ -1,30 +1,33 @@
-.footer {
-  width: 100%;
-  min-height: 0;
-  padding: var(--padding) var(--padding-large);
-  gap: var(--gap);
-}
-/*
+@layer tcn-system {
+  :where(.footer) {
+    width: 100%;
+    min-height: 0;
+    padding: var(--padding) var(--padding-large);
+    gap: var(--gap);
+  }
+
+  /*
   Kinds:
  'default' | 'app' | 'nav' | 'toolbar' | 'window' | 'status';
 */
 
-.footer[data-kind="app"] {
-  position: relative;
-}
+  :where(.footer[data-kind="app"]) {
+    position: relative;
+  }
 
-.footer[data-kind="nav"] {
-  position: relative;
-}
+  :where(.footer[data-kind="nav"]) {
+    position: relative;
+  }
 
-.footer[data-kind="toolbar"] {
-  position: relative;
-}
+  :where(.footer[data-kind="toolbar"]) {
+    position: relative;
+  }
 
-.footer[data-kind="window"] {
-  position: relative;
-}
+  :where(.footer[data-kind="window"]) {
+    position: relative;
+  }
 
-.footer[data-kind="status"] {
-  position: relative;
+  :where(.footer[data-kind="status"]) {
+    position: relative;
+  }
 }

package/src/layouts/grid/grid.module.css

@@ -1,22 +1,24 @@
-.grid {
-  display: inline-grid;
-  grid-auto-flow: row;
-  height: auto;
-  grid-template-columns: var(--template);
-  width: 100%;
-  max-width: var(--max-width);
-  grid-auto-rows: var(--item-height);
-  justify-items: center;
-}
+@layer tcn-system {
+  :where(.grid) {
+    display: inline-grid;
+    grid-auto-flow: row;
+    height: auto;
+    grid-template-columns: var(--template);
+    width: 100%;
+    max-width: var(--max-width);
+    grid-auto-rows: var(--item-height);
+    justify-items: center;
+  }
 
-:global([data-h-alignment="center"]) > .grid {
-  justify-content: center;
-}
+  :where(:global([data-h-alignment="center"]) > .grid) {
+    justify-content: center;
+  }
 
-:global([data-h-alignment="end"]) > .grid {
-  justify-content: end;
-}
+  :where(:global([data-h-alignment="end"]) > .grid) {
+    justify-content: end;
+  }
 
-:global([data-h-alignment="start"]) > .grid {
-  justify-content: start;
+  :where(:global([data-h-alignment="start"]) > .grid) {
+    justify-content: start;
+  }
 }

package/src/layouts/grid/grid.tsx

@@ -108,7 +108,12 @@ export const Grid = React.forwardRef(function Grid(
   });
 
   return (
-    <As ref={ref} className={clsx(styles.grid, className)} style={gridStyles} {...attr}>
+    <As
+      ref={ref}
+      className={clsx(styles.grid, className, 'tcn-grid')}
+      style={gridStyles}
+      {...attr}
+    >
       {children}
     </As>
   );

package/src/layouts/header/header.module.css

@@ -1,6 +1,8 @@
-.header {
-  width: 100%;
-  min-height: 0;
-  padding: var(--padding) var(--padding-large);
-  gap: var(--gap);
+@layer tcn-system {
+  :where(.header) {
+    width: 100%;
+    min-height: 0;
+    padding: var(--padding) var(--padding-large);
+    gap: var(--gap);
+  }
 }

package/src/layouts/header/header.tsx

@@ -24,7 +24,7 @@ export const Header = React.forwardRef<HTMLElement, HeaderProps>(function Header
     <HStack
       ref={ref}
       as="header"
-      className={clsx(styles.header, className, 'tcn-header', 'header')}
+      className={clsx(styles.header, className, 'tcn-header')}
       data-hierarchy={hierarchy}
       data-size={size}
       height={height}

package/src/layouts/list/section_header.module.css

@@ -1,18 +1,20 @@
-.section-header {
-  position: sticky;
-  top: 0;
-  left: 0;
-  z-index: 1;
-}
+@layer tcn-system {
+  :where(.section-header) {
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
 
-.section-header[data-hierarchy="primary"] {
-  background-color: #f1f1f1;
-}
+  :where(.section-header[data-hierarchy="primary"]) {
+    background-color: #f1f1f1;
+  }
 
-.section-header[data-hierarchy="secondary"] {
-  background-color: #f1f1f1;
-}
+  :where(.section-header[data-hierarchy="secondary"]) {
+    background-color: #f1f1f1;
+  }
 
-.section-header[data-hierarchy="tertiary"] {
-  background-color: #f1f1f1;
+  :where(.section-header[data-hierarchy="tertiary"]) {
+    background-color: #f1f1f1;
+  }
 }

package/src/layouts/list/section_header.tsx

@@ -1,13 +1,19 @@
 import React from 'react';
 import { HStack } from '../../stacks/h_stack.js';
 import type { HStackProps } from '../../stacks/h_stack.js';
+import clsx from 'clsx';
 
 export interface SectionHeaderProps extends Omit<HStackProps, 'as'> {}
 
 export const SectionHeader = React.forwardRef<HTMLDivElement, SectionHeaderProps>(
   function SectionHeader({ children, className, ...props }: SectionHeaderProps, ref) {
     return (
-      <HStack ref={ref} as="li" className={className} {...props}>
+      <HStack
+        ref={ref}
+        as="li"
+        className={clsx(className, 'tcn-section-header')}
+        {...props}
+      >
         {children}
       </HStack>
     );

package/src/layouts/scaffold/scaffold.module.css

@@ -1,5 +1,7 @@
-.scaffold-stack {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
+@layer tcn-system {
+  :where(.scaffold-stack) {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  }
 }

package/src/layouts/sidebar_end/sidebar_end.module.css

@@ -1,31 +1,33 @@
-.sidebarEndBox {
-  width: 250px;
-  height: 100%;
-  z-index: 2;
-}
+@layer tcn-system {
+  :where(.sidebarEndBox) {
+    width: 250px;
+    height: 100%;
+    z-index: 2;
+  }
 
-.sidebarEnd {
-  width: 100%;
-  height: 100%;
-}
+  :where(.sidebarEnd) {
+    width: 100%;
+    height: 100%;
+  }
 
-/* Primary hierarchy - main sidebar end */
-.sidebarEnd[data-hierarchy="primary"] {
-  background: #ffffff;
-  border-left: 1px solid #e0e0e0;
-  padding: 16px;
-}
+  /* Primary hierarchy - main sidebar end */
+  :where(.sidebarEnd[data-hierarchy="primary"]) {
+    background: #ffffff;
+    border-left: 1px solid #e0e0e0;
+    padding: 16px;
+  }
 
-/* Secondary hierarchy - sub sidebar end */
-.sidebarEnd[data-hierarchy="secondary"] {
-  background: #f8f9fa;
-  border-left: 1px solid #e9ecef;
-  padding: 12px;
-}
+  /* Secondary hierarchy - sub sidebar end */
+  :where(.sidebarEnd[data-hierarchy="secondary"]) {
+    background: #f8f9fa;
+    border-left: 1px solid #e9ecef;
+    padding: 12px;
+  }
 
-/* Tertiary hierarchy - minor sidebar end */
-.sidebarEnd[data-hierarchy="tertiary"] {
-  background: #f1f3f4;
-  border-left: 1px solid #dee2e6;
-  padding: 8px;
+  /* Tertiary hierarchy - minor sidebar end */
+  :where(.sidebarEnd[data-hierarchy="tertiary"]) {
+    background: #f1f3f4;
+    border-left: 1px solid #dee2e6;
+    padding: 8px;
+  }
 }

package/src/layouts/sidebar_end/sidebar_end.tsx

@@ -38,7 +38,7 @@ export const SidebarEnd = React.forwardRef<HTMLElement, SidebarEndProps>(
         maxWidth={maxWidth}
         minHeight={minHeight}
         maxHeight={maxHeight}
-        className={styles.sidebarEndBox}
+        className={clsx(styles.sidebarEndBox, 'tcn-sidebar-end-container')}
         as={'section'}
         {...props}
       >
@@ -53,7 +53,7 @@ export const SidebarEnd = React.forwardRef<HTMLElement, SidebarEndProps>(
           vAlign={vAlign}
           ref={ref}
           data-hierarchy={hierarchy}
-          className={clsx(styles.sidebarEnd, className, 'sidebar-end')}
+          className={clsx(styles.sidebarEnd, className, 'tcn-sidebar-end')}
           zIndex={0}
         >
           {children}