Kl gmt 1516 logical props layout

packages/gamut-styles/src/variance/config.ts

@@ -200,10 +200,18 @@ export const layout = {
   width: { property: 'width', transform: transformSize },
   minWidth: { property: 'minWidth', transform: transformSize },
   maxWidth: { property: 'maxWidth', transform: transformSize },
+  inlineSize: { property: 'inlineSize', transform: transformSize },
+  minInlineSize: { property: 'minInlineSize', transform: transformSize },
+  maxInlineSize: { property: 'maxInlineSize', transform: transformSize },
   height: { property: 'height', transform: transformSize },
   minHeight: { property: 'minHeight', transform: transformSize },
   maxHeight: { property: 'maxHeight', transform: transformSize },
+  blockSize: { property: 'blockSize', transform: transformSize },
+  minBlockSize: { property: 'minBlockSize', transform: transformSize },
+  maxBlockSize: { property: 'maxBlockSize', transform: transformSize },
   verticalAlign: { property: 'verticalAlign' },
+  writingMode: { property: 'writingMode' },
+  direction: { property: 'direction' },
   ...selfAlignments,
   ...gridItems,
   ...flexItems,
@@ -227,6 +235,7 @@ export const typography = {
   textDecoration: { property: 'textDecoration' },
   textTransform: { property: 'textTransform' },
   whiteSpace: { property: 'whiteSpace' },
+  textOrientation: { property: 'textOrientation' },
 } as const;
 
 export const margin = {

packages/gamut/src/Pagination/EllipsisButton.tsx

@@ -6,7 +6,7 @@ import { wrapWithSlideAnimation } from './utils';
 
 export type EllipsisButtonProps = PaginationButtonProps & {
   'aria-label': string;
-  direction: 'back' | 'forward';
+  btnDirection: 'back' | 'forward';
 };
 
 const ellipsisButtonContents = { ellipsis: '•••', back: '«', forward: '»' };
@@ -15,13 +15,13 @@ export const BaseEllipsisButton = forwardRef<
   ButtonBaseElements,
   EllipsisButtonProps
   // eslint-disable-next-line react/prop-types
->(({ direction, showButton, ...props }, ref) => {
+>(({ btnDirection, showButton, ...props }, ref) => {
   const [contents, setContents] = useState(ellipsisButtonContents.ellipsis);
 
   return (
     <PaginationButton
       ellipsis
-      onMouseEnter={() => setContents(ellipsisButtonContents[direction])}
+      onMouseEnter={() => setContents(ellipsisButtonContents[btnDirection])}
       onMouseLeave={() => setContents(ellipsisButtonContents.ellipsis)}
       {...props}
       ref={ref}

packages/gamut/src/Pagination/__tests__/Pagination.test.tsx

@@ -13,7 +13,7 @@ const renderView = setupRtl(Pagination, {
 interface TestHelpersType {
   view: RenderResult<typeof queries, HTMLElement>;
   pageNumber?: number;
-  direction?: 'forward' | 'back';
+  btnDirection?: 'forward' | 'back';
 }
 
 const getPage = ({ view, pageNumber }: TestHelpersType) => {
@@ -31,8 +31,8 @@ const getForwardButton = ({ view }: TestHelpersType) => {
 const getJumpButtonCount = ({ view }: TestHelpersType) =>
   view.getAllByLabelText(/(Jump )+/).length;
 
-const getJumpButton = ({ view, pageNumber, direction }: TestHelpersType) => {
-  return view.getByLabelText(`Jump ${direction} to page ${pageNumber}`);
+const getJumpButton = ({ view, pageNumber, btnDirection }: TestHelpersType) => {
+  return view.getByLabelText(`Jump ${btnDirection} to page ${pageNumber}`);
 };
 
 describe('Pagination', () => {
@@ -181,7 +181,7 @@ describe('Pagination', () => {
       const forwardButton = getJumpButton({
         view,
         pageNumber: 6,
-        direction: 'forward',
+        btnDirection: 'forward',
       });
       fireEvent.click(forwardButton);
 
@@ -201,7 +201,7 @@ describe('Pagination', () => {
       const backButton = getJumpButton({
         view,
         pageNumber: 6,
-        direction: 'back',
+        btnDirection: 'back',
       });
 
       fireEvent.click(backButton);
@@ -217,7 +217,7 @@ describe('Pagination', () => {
       const backButton = getJumpButton({
         view,
         pageNumber: 3,
-        direction: 'back',
+        btnDirection: 'back',
       });
 
       fireEvent.click(backButton);
@@ -226,7 +226,7 @@ describe('Pagination', () => {
       const forwardButton = getJumpButton({
         view,
         pageNumber: 8,
-        direction: 'forward',
+        btnDirection: 'forward',
       });
 
       fireEvent.click(forwardButton);

packages/gamut/src/Pagination/index.tsx

@@ -159,8 +159,8 @@ export const Pagination: React.FC<PaginationProps> = ({
         <>
           <AnimatedSlideButton
             aria-label="Jump back to page 1"
+            btnDirection="back"
             buttonType={variant}
-            direction="back"
             display={hideOnMobile}
             href={navigation}
             showButton={shownPageArray[0] === 1 ? 'hidden' : 'shown'}
@@ -170,8 +170,8 @@ export const Pagination: React.FC<PaginationProps> = ({
           </AnimatedSlideButton>
           <EllipsisButton
             aria-label={`Jump back to page ${backPageNumber}`}
+            btnDirection="back"
             buttonType={variant}
-            direction="back"
             display={hideOnMobile}
             href={navigation}
             showButton={shownPageArray[0] === 1 ? 'hidden' : 'shown'}
@@ -196,8 +196,8 @@ export const Pagination: React.FC<PaginationProps> = ({
         <>
           <EllipsisButton
             aria-label={`Jump forward to page ${forwardPageNumber}`}
+            btnDirection="forward"
             buttonType={variant}
-            direction="forward"
             display={hideOnMobile}
             href={navigation}
             showButton={
@@ -211,8 +211,8 @@ export const Pagination: React.FC<PaginationProps> = ({
           />
           <AnimatedSlideButton
             aria-label={`Jump forward to last page, page ${totalPages}`}
+            btnDirection="forward"
             buttonType={variant}
-            direction="forward"
             display={hideOnMobile}
             href={navigation}
             showButton={

packages/gamut/src/Pagination/utils.tsx

@@ -72,7 +72,7 @@ export const wrapWithSlideAnimation = (
             animate={props.showButton}
             exit="hidden"
             initial={
-              props.direction === 'forward' && isFirstRender.current
+              props.btnDirection === 'forward' && isFirstRender.current
                 ? 'shown'
                 : 'hidden'
             }

packages/styleguide/src/lib/Foundations/System/Props/Layout.mdx

@@ -31,4 +31,18 @@ const LayoutExample = styled.div(system.layout);
 />;
 ```
 
+## Logical properties
+
+### `direction` and `writingMode`
+
+The layout system includes `direction` and `writingMode` props.
+
+`direction` controls the text direction of the element, `ltr` for left-to-right and `rtl` for right-to-left. `writingMode` controls the writing mode of the element, `horizontal-tb` for horizontal top-to-bottom and `vertical-rl` for vertical right-to-left.
+
+### Sizing
+
+The layout system includes flow-relative sizing props: `inlineSize`, `blockSize`, and their `min*` / `max*` counterparts.
+
+These behave just like `width` / `height`, but automatically map to the inline or block axis of the current writing mode. In `horizontal-tb`, `inlineSize` mirrors `width`; switch to `vertical-rl` or set `dir="rtl"` and `inlineSize` follows the text direction while `width` stays pinned to the physical horizontal axis. This provies support for internationalization of components without duplicating layout logic. For more details, see the [MDN guide on logical sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Logical_properties_and_values/Sizing).
+
 <TokenTable rows={getPropRows('layout')} columns={defaultColumns} />