feature: wrap all components in lk layer

registry/nextjs/components/badge/badge.css

@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="badge"] {
   display: inline-flex;
   padding: var(--lk-size-xs);
@@ -147,3 +148,4 @@
   z-index: 0;
   opacity: 0.1;
 }
+}

registry/nextjs/components/button/button.css

@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="button"] {
   /* DEFAULTS */
   --button-font-size: var(--body-font-size);
@@ -81,3 +82,4 @@
   background: transparent !important;
   border: 1px solid var(--lk-outlinevariant);
 }
+}

registry/nextjs/components/card/card.css

@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="card"] {
   display: block;
   overflow: hidden;
@@ -189,3 +190,4 @@
 }
 
 /* TODO: Consider adding a 'tint' prop which would let you combine frosted glass effects with a slight color */
+}

registry/nextjs/components/column/column.css

@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="column"] {
   display: flex;
   flex-direction: column;
@@ -84,4 +85,5 @@
 
 [data-lk-column-gap="4xl"] {
   gap: var(--lk-size-4xl);
-}
+}
+}

registry/nextjs/components/container/container.css

@@ -1,6 +1,8 @@
+@layer lk {
 [lk-component="container"] {
   margin-left: auto;
   margin-right: auto;
   width: 100%;
   max-width: var(--lk-container-max-width, 100%);
 }
+}

registry/nextjs/components/dropdown/dropdown.css

@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="dropdown-menu"] {
   position: absolute;
   z-index: 1000;
@@ -33,3 +34,4 @@
 
   }
 }
+}

registry/nextjs/components/grid/grid.css

@@ -1,3 +1,4 @@
+@layer lk {
 /* ============================================= */
 /* Component: Grid                               */
 /* Description: Basic responsive grid container  */
@@ -256,3 +257,4 @@
   grid-template-columns: 0.5fr 1fr 0.5fr 2fr 0.5fr;
 
 }
+}

registry/nextjs/components/heading/heading.css

@@ -1,4 +1,6 @@
+@layer lk {
 [data-lk-component="heading"] {
   display: block;
   margin: 0;
 }
+}

registry/nextjs/components/icon-button/icon-button.css

@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="icon-button"] {
   display: inline-flex;
   align-items: center;
@@ -185,3 +186,4 @@
 [data-lk-icon-button-variant="text"] {
   background-color: transparent;
 }
+}

registry/nextjs/components/icon/icon.css

@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="icon"] {
   width: calc(1em * var(--lk-halfstep));
   aspect-ratio: 1;
@@ -236,3 +237,4 @@
 [data-lk-icon-offset="true"] {
   margin-top: calc(-1 * calc(1em * var(--lk-quarterstep-dec)));
 }
+}

registry/nextjs/components/image/image.css

@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="image"] {
   display: block;
   width: 100%;
@@ -349,3 +350,4 @@ Include inherit, initial, unset?
 [data-lk-image-aspect="4/5"] {
   aspect-ratio: 4 / 5;
 }
+}

registry/nextjs/components/menu-item/menu-item.css

@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="menu-item"] {
   --py: calc(var(--lk-size-lg) * var(--lk-halfstep-dec));
   --gap: calc(var(--py) / var(--lk-eighthstep));
@@ -51,4 +52,4 @@
 
 [data-lk-component="dropdown-menu"] [data-lk-component="menu-item"] {
   font-size: inherit !important;
-}
+}}

registry/nextjs/components/navbar/navbar.css

@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="navbar"] {
   position: sticky;
   top: 0;
@@ -71,3 +72,4 @@
 [data-lk-navbar-material="glass"] {
   border-bottom: 1px solid var(--lk-outlinevariant);
 }
+}

registry/nextjs/components/placeholder-block/placeholder-block.css

@@ -1,6 +1,8 @@
+@layer lk {
 [data-lk-component="placeholder-block"] {
   display: block;
   border: 1px dashed var(--lk-info);
   background-color: var(--lk-infocontainer);
   padding: var(--lk-size-md);
 }
+}

registry/nextjs/components/row/row.css

@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="row"] {
   display: flex;
   flex-direction: row;
@@ -115,3 +116,4 @@
 [data-lk-row-default-child-behavior="ignoreIntrinsicSize"]>* {
   flex-basis: 0;
 }
+}

registry/nextjs/components/section/section.css

@@ -1,5 +1,5 @@
 /* Component selector: [data-lk-component="section"] */
-
+@layer lk {
 [data-lk-component="section"] {
   display: block;
   position: relative;
@@ -203,3 +203,4 @@
     padding-right: var(--lk-size-md);
   }
 }
+}

registry/nextjs/components/select/select.css

@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="select-menu"] {
   position: absolute;
   z-index: 1000;
@@ -87,4 +88,4 @@
 
 [data-lk-component="dropdown-menu"] [data-lk-component="menu-item"] {
   font-size: inherit !important;
-}
+}}

registry/nextjs/components/snackbar/snackbar.css

@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="snackbar"] {
   display: inline-flex;
   align-items: center;
@@ -31,3 +32,4 @@
   }
 
 }
+}

registry/nextjs/components/state-layer/state-layer.css

@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="state-layer"] {
   z-index: 1;
   opacity: 0;
@@ -44,3 +45,4 @@ li:focus > [data-lk-component="state-layer"] {
 [data-lk-forced-state="active"] {
   opacity: 0.12 !important;
 }
+}

registry/nextjs/components/sticker/sticker.css

@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="sticker"] {
   display: inline-block;
   padding: var(--lk-size-xs) var(--lk-size-sm);
@@ -7,3 +8,4 @@
   line-height: var(--label-line-height);
   font-size: var(--label-font-size);
 }
+}

registry/nextjs/components/switch/switch.css

@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="switch"] {
   position: relative;
   display: block;
@@ -29,3 +30,4 @@
 [data-lk-switch-state="on"] [data-lk-component="switch-thumb"] {
   left: calc(100% - calc(var(--lk-size-md) + var(--lk-size-2xs)));
 }
+}

registry/nextjs/components/tab-link/tab-link.css

@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="tab-link"] {
   display: inline-flex;
   position: relative;
@@ -18,3 +19,4 @@
 [data-lk-tab-link-selected="true"]>.lk-indicator {
   opacity: 1;
 }
+}

registry/nextjs/components/tab-menu/tab-menu.css

@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="tab-menu"] {
   display: flex;
   flex-direction: row;
@@ -10,3 +11,4 @@
   border-bottom: 1px solid var(--lk-outlinevariant);
   flex: 0 0 auto;
 }
+}

registry/nextjs/components/tabs/tabs.css

@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="tabs"] {
   display: flex;
   flex-direction: column;
@@ -22,3 +23,4 @@
   scrollbar-width: thin;
 }
 
+}

registry/nextjs/components/text-input/text-input.css

@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="text-input"] {
   display: flex;
   flex-flow: column nowrap;
@@ -101,3 +102,4 @@ div[data-lk-text-input-label-position="on-input"] > [data-lk-text-input-el="inpu
   margin-bottom: var(--lk-size-xs);
   color: var(--lk-outline);
 }
+}

registry/nextjs/components/theme-controller/theme-controller.css

@@ -0,0 +1,2 @@
+@layer lk {
+}

registry/nextjs/components/theme/theme.css

@@ -0,0 +1,2 @@
+@layer lk {
+}

registry/universal/lib/css/index.css

@@ -1,35 +1,35 @@
-@import "./liftkit-core.css";
-@import "./align-items.css";
-@import "./align-self.css";
-@import "./aspect-ratios.css";
-@import "./border-radius.css";
-@import "./column-span.css";
-@import "./display.css";
-@import "./text-color.css";
-@import "./flexboxes.css";
-@import "./gaps.css";
-@import "./justify-content.css";
-@import "./margins.css";
-@import "./opacity.css";
-@import "./overflow.css";
-@import "./padding.css";
-@import "./position.css";
-@import "./scale.css";
-@import "./shadows.css";
-@import "./text-alignment.css";
-@import "./typography.css";
-@import "./width.css";
-@import "./height.css";
-@import "./text-columns.css";
-@import "./borders.css";
-@import "./pointer-events.css";
-@import "./scrim.css";
-@import "./z-index.css";
-@import "./cursor.css";
-@import "./breaks.css";
-@import "./background-colors.css";
-@import "./whitespace.css";
-@import "./border-color.css";
-@import "./border-style.css";
-@import "./border-width.css";
-@import "@csstools/normalize.css";
+@import "./liftkit-core.css" layer(lk);
+@import "./align-items.css" layer(lk);
+@import "./align-self.css" layer(lk);
+@import "./aspect-ratios.css" layer(lk);
+@import "./border-radius.css" layer(lk);
+@import "./column-span.css" layer(lk);
+@import "./display.css" layer(lk);
+@import "./text-color.css" layer(lk);
+@import "./flexboxes.css" layer(lk);
+@import "./gaps.css" layer(lk);
+@import "./justify-content.css" layer(lk);
+@import "./margins.css" layer(lk);
+@import "./opacity.css" layer(lk);
+@import "./overflow.css" layer(lk);
+@import "./padding.css" layer(lk);
+@import "./position.css" layer(lk);
+@import "./scale.css" layer(lk);
+@import "./shadows.css" layer(lk);
+@import "./text-alignment.css" layer(lk);
+@import "./typography.css" layer(lk);
+@import "./width.css" layer(lk);
+@import "./height.css" layer(lk);
+@import "./text-columns.css" layer(lk);
+@import "./borders.css" layer(lk);
+@import "./pointer-events.css" layer(lk);
+@import "./scrim.css" layer(lk);
+@import "./z-index.css" layer(lk);
+@import "./cursor.css" layer(lk);
+@import "./breaks.css" layer(lk);
+@import "./background-colors.css" layer(lk);
+@import "./whitespace.css" layer(lk);
+@import "./border-color.css" layer(lk);
+@import "./border-style.css" layer(lk);
+@import "./border-width.css" layer(lk);
+@import "@csstools/normalize.css" layer(lk);

registry/universal/lib/css/liftkitvars.css

@@ -1,4 +1,6 @@
+@layer lk {
 :root {
+
   font-size: 16px;
 
   --lk-scalefactor: 1.618;
@@ -376,3 +378,4 @@
     --lk-primary: var(--dark__primary_lkv);
   }
 }
+}

src/app/globals.css

@@ -1 +1,2 @@
-@import "../../registry/universal/lib/css/index.css"
+@layer lk;
+@import "../../registry/universal/lib/css/index.css";