@inc2734/unitone-css 1.3.1 → 1.4.1

package/src/layout-primitives/layers/index.jsx

@@ -16,7 +16,8 @@ export const Layers = ({
   rowTrackSize,
   queryContext,
   containerType,
-  fluidReference,
+  responsiveContext,
+  fluidReference, // @deprecated Kept for backward compatibility. Use responsiveContext on an ancestor instead.
   style,
   ...props
 }) => {
@@ -41,8 +42,9 @@ export const Layers = ({
         '' !== (gap ?? '') ? `-gap:${gap}` : undefined,
         '' !== (columnGap ?? '') ? `-column-gap:${columnGap}` : undefined,
         '' !== (rowGap ?? '') ? `-row-gap:${rowGap}` : undefined,
-        queryContext ? `@${queryContext}` : undefined,
+        'container' === queryContext ? '@container' : undefined,
         '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        'container' === responsiveContext ? '-responsive-context:container' : undefined,
         '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)

package/src/layout-primitives/marquee/_index.scss

@@ -36,7 +36,6 @@
   gap: inherit;
   align-items: center;
   justify-content: space-around;
-  min-width: 100%;
 
   &[data-unitone-layout~="marquee:initialized"] {
     animation-name: marquee;
@@ -64,10 +63,10 @@
 
 @keyframes marquee {
     0% { translate: 0; }
-  100% { translate: calc(-100% - var(--unitone--gap)); }
+  100% { translate: calc(-100% - var(--unitone--marquee-gap, var(--unitone--gap))); }
 }
 
 @keyframes marquee-reverse {
     0% { translate: 0; }
-  100% { translate: calc(100% + var(--unitone--gap)); }
+  100% { translate: calc(100% + var(--unitone--marquee-gap, var(--unitone--gap))); }
 }

package/src/layout-primitives/marquee/index.jsx

@@ -1,16 +1,6 @@
 import React from 'react';
 
-export const Marquee = ({
-  duration,
-  gap,
-  itemWidth,
-  reverse,
-  pauseOnHover,
-  containerType,
-  fluidReference,
-  style,
-  ...props
-}) => {
+export const Marquee = ({ duration, gap, itemWidth, reverse, pauseOnHover, style, ...props }) => {
   style = {
     ...style,
     '--unitone--animation-duration': '' !== duration ? duration : undefined,
@@ -23,8 +13,6 @@ export const Marquee = ({
         'marquee-wrapper',
         reverse ? '-reverse' : undefined,
         pauseOnHover ? '-pause-on-hover' : undefined,
-        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
-        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)
         .join(' ')}

package/src/layout-primitives/reel/index.jsx

@@ -1,15 +1,6 @@
 import React from 'react';
 
-export const Reel = ({
-  gap,
-  height,
-  itemWidth,
-  noBar,
-  containerType,
-  fluidReference,
-  style,
-  ...props
-}) => {
+export const Reel = ({ gap, height, itemWidth, noBar, style, ...props }) => {
   style = {
     ...style,
     '--unitone--height': '' !== height ? height : undefined,
@@ -22,8 +13,6 @@ export const Reel = ({
         'reel',
         '' !== (gap ?? '') ? `-gap:${gap}` : undefined,
         noBar ? '-no-bar' : undefined,
-        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
-        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)
         .join(' ')}

package/src/layout-primitives/responsive-grid/_index.scss

@@ -4,7 +4,9 @@
   --unitone--gap: var(--unitone--global--gap);
   --unitone--column-gap: var(--unitone--gap);
   --unitone--row-gap: var(--unitone--gap);
+  --unitone--container-type: initial;
 
+  container-type: var(--unitone--container-type);
   display: grid;
   column-gap: var(--unitone--column-gap);
   row-gap: var(--unitone--row-gap);

package/src/layout-primitives/responsive-grid/index.jsx

@@ -11,7 +11,8 @@ export const ResponsiveGrid = ({
   stairs,
   stairsUp,
   containerType,
-  fluidReference,
+  responsiveContext,
+  fluidReference, // @deprecated Kept for backward compatibility. Use responsiveContext on an ancestor instead.
   style,
   ...props
 }) => {
@@ -33,6 +34,7 @@ export const ResponsiveGrid = ({
         '' !== (stairs ?? '') ? `-stairs:${stairs}` : undefined,
         '' !== (stairsUp ?? '') ? `-stairs-up:${stairsUp}` : undefined,
         '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        'container' === responsiveContext ? '-responsive-context:container' : undefined,
         '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)

package/src/layout-primitives/stack/_index.scss

@@ -1,6 +1,8 @@
 @mixin abstract-stack() {
   --unitone--gap: var(--unitone--global--text-gap);
+  --unitone--container-type: initial;
 
+  container-type: var(--unitone--container-type);
   display: flex;
   flex-direction: column;
   gap: var(--unitone--gap);

package/src/layout-primitives/stack/index.jsx

@@ -9,7 +9,8 @@ export const Stack = ({
   dividerStyle,
   dividerColor,
   containerType,
-  fluidReference,
+  responsiveContext,
+  fluidReference, // @deprecated Kept for backward compatibility. Use responsiveContext on an ancestor instead.
   tagName = 'div',
   style,
   ...props
@@ -32,6 +33,7 @@ export const Stack = ({
         '' !== (gap ?? '') ? `-gap:${gap}` : undefined,
         negative ? '-negative' : undefined,
         '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        'container' === responsiveContext ? '-responsive-context:container' : undefined,
         '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)

package/src/layout-primitives/switcher/_index.scss

@@ -4,7 +4,9 @@
   --unitone--row-gap: var(--unitone--gap);
   --unitone--threshold: var(--unitone--measure);
   --unitone--align-items: stretch;
+  --unitone--container-type: initial;
 
+  container-type: var(--unitone--container-type);
   display: flex;
   flex-wrap: wrap;
   column-gap: var(--unitone--column-gap);

package/src/layout-primitives/switcher/index.jsx

@@ -11,7 +11,8 @@ export const Switcher = ({
   stairs,
   stairsUp,
   containerType,
-  fluidReference,
+  responsiveContext,
+  fluidReference, // @deprecated Kept for backward compatibility. Use responsiveContext on an ancestor instead.
   style,
   ...props
 }) => {
@@ -32,6 +33,7 @@ export const Switcher = ({
         '' !== (stairs ?? '') ? `-stairs:${stairs}` : undefined,
         '' !== (stairsUp ?? '') ? `-stairs-up:${stairsUp}` : undefined,
         '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        'container' === responsiveContext ? '-responsive-context:container' : undefined,
         '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)

package/src/layout-primitives/text/_index.scss

@@ -2,7 +2,9 @@
   --unitone--gutters: 0px;
   --unitone--max-width: var(--unitone--measure);
   --unitone--text-gap: var(--unitone--global--text-gap);
+  --unitone--container-type: initial;
 
+  container-type: var(--unitone--container-type);
   box-sizing: content-box;
   padding-right: var(--unitone--gutters);
   padding-left: var(--unitone--gutters);

package/src/layout-primitives/text/index.jsx

@@ -9,7 +9,8 @@ export const Text = ({
   maxWidth,
   columnWidth,
   containerType,
-  fluidReference,
+  responsiveContext,
+  fluidReference, // @deprecated Kept for backward compatibility. Use responsiveContext on an ancestor instead.
   style,
   ...props
 }) => {
@@ -29,6 +30,7 @@ export const Text = ({
         '' !== (gap ?? '') ? `-gap:${gap}` : undefined,
         '' !== (gutters ?? '') ? `-gutters:${gutters}` : undefined,
         '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        'container' === responsiveContext ? '-responsive-context:container' : undefined,
         '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)

package/src/layout-primitives/texture/index.jsx

@@ -16,8 +16,6 @@ export const Texture = ({
   textureBorderBottomRightRadius,
   textureBandTopSize,
   textureBandBottomSize,
-  containerType,
-  fluidReference,
   style,
   ...props
 }) => {
@@ -47,12 +45,7 @@ export const Texture = ({
 
   return (
     <div
-      data-unitone-layout={[
-        'texture',
-        '' !== (texture ?? '') ? `-texture:${texture}` : undefined,
-        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
-        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
-      ]
+      data-unitone-layout={['texture', '' !== (texture ?? '') ? `-texture:${texture}` : undefined]
         .filter(Boolean)
         .join(' ')}
       style={style}

package/src/layout-primitives/vertical-ends/_index.scss

@@ -1,7 +1,9 @@
 @mixin abstract-vertical-ends() {
   --unitone--gap: var(--unitone--global--text-gap);
   --unitone--align-items: stretch;
+  --unitone--container-type: initial;
 
+  container-type: var(--unitone--container-type);
   display: flex;
   gap: var(--unitone--gap);
   flex-direction: column;

package/src/layout-primitives/vertical-ends/index.jsx

@@ -4,7 +4,8 @@ export const VerticalEnds = ({
   gap,
   alignItems,
   containerType,
-  fluidReference,
+  responsiveContext,
+  fluidReference, // @deprecated Kept for backward compatibility. Use responsiveContext on an ancestor instead.
   style,
   ...props
 }) => {
@@ -19,6 +20,7 @@ export const VerticalEnds = ({
         '' !== (gap ?? '') ? `-gap:${gap}` : undefined,
         '' !== (alignItems ?? '') ? `-align-items:${alignItems}` : undefined,
         '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        'container' === responsiveContext ? '-responsive-context:container' : undefined,
         '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)

package/src/layout-primitives/vertical-writing/_index.scss

@@ -1,3 +1,5 @@
+@use '../../behaviors/responsive-context';
+
 @mixin abstract-vertical-writing() {
   --unitone--gap: var(--unitone--global--text-gap);
   --unitone--column-gap: var(--unitone--global--gap);
@@ -41,33 +43,19 @@
     writing-mode: horizontal-tb;
 
     > * {
-      box-sizing: border-box;
       max-inline-size: none;
+      box-sizing: border-box;
     }
   }
 
   &[data-unitone-layout~="-switch"] {
-    &:where(:not([data-unitone-layout~="@container"])) {
-      @media (orientation: portrait) and (width < 600px) {
-        column-count: auto;
-        writing-mode: horizontal-tb;
-
-        > * {
-          box-sizing: border-box;
-          max-inline-size: none;
-        }
-      }
-    }
-
-    &:where([data-unitone-layout~="@container"]) {
-      @container (width < 600px) {
-        column-count: auto;
-        writing-mode: horizontal-tb;
+    @include responsive-context.responsive-query('(width < 600px)') {
+      column-count: auto;
+      writing-mode: horizontal-tb;
 
-        > * {
-          box-sizing: border-box;
-          max-inline-size: none;
-        }
+      > * {
+        max-inline-size: none;
+        box-sizing: border-box;
       }
     }
   }

package/src/layout-primitives/vertical-writing/index.jsx

@@ -6,8 +6,8 @@ export const VerticalWriting = ({
   maxHeight,
   switchWritingMode,
   threshold,
-  style,
   queryContext,
+  style,
   ...props
 }) => {
   style = {
@@ -24,7 +24,7 @@ export const VerticalWriting = ({
           '' !== (textOrientation ?? '') ? `-text-orientation:${textOrientation}` : undefined,
           '' !== (gap ?? '') ? `-gap:${gap}` : undefined,
           switchWritingMode ? '-switch' : undefined,
-          queryContext ? `@${queryContext}` : undefined,
+          'container' === queryContext ? '@container' : undefined,
         ]
           .filter(Boolean)
           .join(' ')}