fix(styles): use logical direction styles

- Use logical direction styles
- Introduced a new test command in package.json to run tests using vitest.
- Added a stylelint configuration file for CSS linting with custom rules.
- Created a new test file for metadata validation to ensure correct attribute generation.
Signed-off-by: Cory Rylan <crylan@nvidia.com>

Author: coryrylan

pnpm-lock.yaml

@@ -60,6 +60,7 @@
 "dev": "wireit",
 "build": "wireit",
 "lint": "wireit",
+"test": "wireit",
 "test:lighthouse": "wireit",
 "test:visual": "wireit"
  },
@@ -73,6 +74,7 @@
 "@nvidia-elements/lint": "workspace:*",
 "@nvidia-elements/themes": "workspace:*",
 "@vitest/browser": "catalog:",
+"@vitest/coverage-istanbul": "catalog:",
 "cssnano": "8.0.0",
 "eslint": "catalog:",
 "lit": "catalog:",
@@ -93,6 +95,8 @@
 "lint",
 "build",
 "publint",
+"test",
+"test:lighthouse",
 "test:visual"
  ]
  },
@@ -115,6 +119,7 @@
 "command": "NODE_ENV=production vite build && node ./build/metadata.js",
 "files": [
 "src/**",
+"!src/**/*.test.ts",
 "!src/**/*.test.lighthouse.ts",
 "!src/**/*.test.visual.ts",
 "package.json",
@@ -154,6 +159,23 @@
 "NODE_ENV": "production"
  }
  },
+"test": {
+"command": "vitest run",
+"files": [
+"src/**",
+"!src/**/*.test.lighthouse.ts",
+"!src/**/*.test.visual.ts",
+"dist/data.html.json",
+"tsconfig.json",
+"vite.config.ts",
+"vitest.config.ts"
+ ],
+"output": [],
+"dependencies": [
+"build",
+"../internals/vite:ci"
+ ]
+ },
 "test:visual": {
 "command": "vitest run --config=vitest.visual.ts",
 "clean": false,
@@ -177,7 +199,8 @@
  },
 "lint": {
 "dependencies": [
-"lint:eslint"
+"lint:eslint",
+"lint:style"
  ]
  },
 "lint:eslint": {
@@ -192,6 +215,15 @@
 "../lint:build"
  ]
  },
+"lint:style": {
+"command": "stylelint 'src/**/*.css' --config=./stylelint.config.mjs",
+"files": [
+"src/**/*.css",
+"../../stylelint.config.mjs",
+"stylelint.config.mjs"
+ ],
+"output": []
+ },
 "lint:fix": {
 "command": "eslint -c ./eslint.config.js --fix",
 "dependencies": [

projects/styles/package.json

@@ -32,11 +32,20 @@
 min-height:0;
  }
 
+&[nve-layout~='full:width'] {
+width:100%;
+min-width:0;
+ }
+
+&[nve-layout~='full:height'] {
+height:100%;
+min-height:0;
+ }
+
 /* Horizontal Layout */
 &[nve-layout~='row'] {
 flex-direction: row;
-justify-items: flex-start;
-align-items: flex-start;
+place-items: flex-start;
 
 &[nve-layout~='align:left'] {
 justify-content: flex-start;
@@ -130,9 +139,8 @@
 
 /* Centered */
 &[nve-layout~='align:center'] {
-align-items: center;
-align-content: center;
-justify-content: center;
+place-items: center;
+place-content: center;
  }
 
 /* Full Stretch */
@@ -147,17 +155,17 @@
 /* Spacing */
 &[nve-layout~='align:space-around'] {
 justify-content: space-around;
-gap: none;
+gap:var(--nve-ref-space-none);
  }
 
 &[nve-layout~='align:space-between'] {
 justify-content: space-between;
-gap: none;
+gap:var(--nve-ref-space-none);
  }
 
 &[nve-layout~='align:space-evenly'] {
 justify-content: space-evenly;
-gap: none;
+gap:var(--nve-ref-space-none);
  }
 
 /* Fixed Width Layout Gap Spacing */
@@ -173,20 +181,18 @@
 padding:var(--nve-ref-space-$(size));
  }
 
-@each $sidein top, left, right, bottom {
+@each $side, $logical-side in (top, left, right, bottom), (block-start, inline-start, inline-end, block-end) {
 &[nve-layout~='pad-$(side):$(size)'] {
-padding-$(side):var(--nve-ref-space-$(size));
+padding-$(logical-side):var(--nve-ref-space-$(size));
  }
  }
 
 &[nve-layout~='pad-x:$(size)'] {
-padding-left:var(--nve-ref-space-$(size));
-padding-right:var(--nve-ref-space-$(size));
+padding-inline:var(--nve-ref-space-$(size));
  }
 
 &[nve-layout~='pad-y:$(size)'] {
-padding-top:var(--nve-ref-space-$(size));
-padding-bottom:var(--nve-ref-space-$(size));
+padding-block:var(--nve-ref-space-$(size));
  }
  }
 
@@ -252,18 +258,14 @@
  }
 
 &[nve-layout~='align:stretch'] {
-align-items: stretch;
-align-content: stretch;
-justify-items: stretch;
-justify-content: stretch;
+place-items: stretch;
+place-content: stretch;
 @mixin auto-columns;
  }
 
 &[nve-layout~='align:center'] {
-align-items: center;
-align-content: center;
-justify-items: center;
-justify-content: center;
+place-items: center;
+place-content: center;
 @mixin auto-columns;
  }
  }

projects/styles/src/layout.css

@@ -0,0 +1,49 @@
+// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import{readFileSync}from'node:fs';
+import{resolve}from'node:path';
+import{describe,expect,it}from'vitest';
+
+interfaceCustomDataValue{
+name: string;
+}
+
+interfaceGlobalAttribute{
+name: string;
+values: CustomDataValue[];
+}
+
+interfaceHtmlCustomData{
+globalAttributes: GlobalAttribute[];
+}
+
+describe('@nvidia-elements/styles metadata',()=>{
+it('should generate custom data for public style attributes',()=>{
+constdata=JSON.parse(
+readFileSync(resolve(import.meta.dirname,'../dist/data.html.json'),'utf-8')
+)asHtmlCustomData;
+constattributes=newMap(
+data.globalAttributes.map(attribute=>[attribute.name,newSet(attribute.values.map(value=>value.name))])
+);
+
+expectAttributeValues(attributes,'nve-layout',[
+'row',
+'column',
+'grid',
+'gap:md',
+'pad-x:md',
+'@md|row',
+'&md|span:6'
+]);
+expectAttributeValues(attributes,'nve-text',['body','heading','link','truncate']);
+expectAttributeValues(attributes,'nve-display',['hide','@md|show','&md|hide']);
+});
+});
+
+functionexpectAttributeValues(attributes: Map<string,Set<string>>,name: string,values: string[]){
+constattributeValues=attributes.get(name);
+
+expect(attributeValues).toBeDefined();
+values.forEach(value=>expect(attributeValues?.has(value)).toBe(true));
+}

projects/styles/src/metadata.test.ts

@@ -33,18 +33,18 @@ body[nve-text],
 @supportsnot (text-box: trim-both cap alphabetic) {
 /* https://seek-oss.github.io/capsize/ (firefox) */
  [nve-text] {
---__capsize-offset:-0.1818em;
+--_capsize-offset:-0.1818em;
  }
 
 :is([nve-text~='display'], [nve-text~='heading'], [nve-text~='body'], [nve-text~='label'])::before {
 content:'';
-margin-bottom:var(--__capsize-offset);
+margin-block-end:var(--_capsize-offset);
 display: table;
  }
 
 :is([nve-text~='display'], [nve-text~='heading'], [nve-text~='body'], [nve-text~='label'])[nve-text]::after {
 content:'';
-margin-top:var(--__capsize-offset);
+margin-block-start:var(--_capsize-offset);
 display: table;
  }
 
@@ -55,7 +55,7 @@ body[nve-text],
 
  [nve-text~='truncate'] {
 &::after {
---__capsize-offset:0;
+--_capsize-offset:0;
  }
  }
 }
@@ -132,7 +132,8 @@ body[nve-text],
 
 [nve-text~='list'] {
 margin:0!important;
-padding:000var(--nve-ref-size-400) !important;
+padding-block:0!important;
+padding-inline:var(--nve-ref-size-400) 0!important;
 list-style-position: outside !important;
 
 li {
@@ -155,7 +156,8 @@ ul[nve-text~='nav'] li {
 padding:0;
 list-style: none !important;
 color:var(--nve-sys-text-muted-color) !important;
-margin:00var(--nve-ref-space-sm) 0!important;
+margin-block:0var(--nve-ref-space-sm) !important;
+margin-inline:0!important;
 
 >a {
 text-decoration: none !important;
@@ -173,7 +175,8 @@ ul[nve-text~='nav'] li {
 
 ul[nve-text~='nav'] ulli {
 font-size:var(--nve-ref-font-size-100);
-margin:00var(--nve-ref-space-sm) var(--nve-ref-space-lg) !important;
+margin-block:0var(--nve-ref-space-sm) !important;
+margin-inline:var(--nve-ref-space-lg) 0!important;
 }
 
 [nve-text~='link'] {

projects/styles/src/typography.css

@@ -34,12 +34,14 @@
  }
  }
 
+/* stylelint-disable-next-line keyframes-name-pattern -- underscore prefix marks internal keyframes */
 @keyframes _nve-fade-in {
 from {
 opacity:0;
  }
  }
 
+/* stylelint-disable-next-line keyframes-name-pattern -- underscore prefix marks internal keyframes */
 @keyframes _nve-fade-out {
 to {
 opacity:0;

projects/styles/src/view-transitions.css

@@ -0,0 +1,18 @@
+importbaseConfigfrom'../../stylelint.config.mjs';
+
+/** @type {import("stylelint").Config} */
+exportdefault{
+ ...baseConfig,
+rules: {
+ ...baseConfig.rules,
+'at-rule-no-unknown': [
+true,
+{
+ignoreAtRules: ['define-mixin','each','mixin']
+}
+],
+'at-rule-empty-line-before': null,
+'custom-property-pattern': null,
+'media-query-no-invalid': null
+}
+};

projects/styles/stylelint.config.mjs

@@ -0,0 +1,14 @@
+import{resolve}from'path';
+import{mergeConfig}from'vitest/config';
+import{libraryNodeTestConfig}from'@internals/vite/configs/test.node.js';
+
+exportdefaultmergeConfig(libraryNodeTestConfig,{
+root: import.meta.dirname,
+resolve: {
+alias: {'@nvidia-elements/styles': resolve(import.meta.dirname,'./src')}
+},
+test: {
+include: ['./src/**/*.test.ts'],
+setupFiles: []
+}
+});

projects/styles/vitest.config.ts

@@ -3,6 +3,7 @@ import { libraryLighthouseTestConfig } from '@internals/vite/configs/lighthouse.
 
 exportdefaultmergeConfig(libraryLighthouseTestConfig,{
 test: {
+hookTimeout: 60000,
 include: ['src/**/*.test.lighthouse.ts'],
 outputFile: {
 junit: './coverage/lighthouse/junit.xml'