@carbon/element-styles 0.3.6 → 0.3.7-rc.0

package/index.scss

@@ -5,6 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@forward './scss/utilities/carbon';
+@forward "./scss/utilities/carbon";
 
-@forward './scss/layout';
+@forward "./scss/layout";

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@carbon/element-styles",
+  "version": "0.3.7-rc.0",
   "description": "An experimental styling system for native HTML elements, relying on semantic, attribute-focused selectors instead of class names.",
-  "version": "0.3.6",
+  "keywords": [
+    "carbon",
+    "carbon-design-system",
+    "components",
+    "css",
+    "ibm"
+  ],
   "license": "Apache-2.0",
-  "type": "module",
-  "sass": "index.scss",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/carbon-design-system/carbon-element-styles.git"
@@ -12,41 +17,50 @@
   "files": [
     "index.scss",
     "scss",
+    "!**/*.test.ts",
     "css",
     "telemetry.yml"
   ],
-  "keywords": [
-    "ibm",
-    "carbon",
-    "carbon-design-system",
-    "components",
-    "css"
-  ],
+  "type": "module",
   "publishConfig": {
     "access": "public",
     "provenance": true
   },
   "scripts": {
     "postinstall": "ibmtelemetry --config=telemetry.yml",
+    "prepare": "husky",
     "dev": "vite docs",
     "build": "npm run build:icons && npm run build:prebuilts && npm run build:docs",
     "build:icons": "node tasks/build-icons.ts",
     "build:prebuilts": "node tasks/build-prebuilts.ts",
-    "build:docs": "vite build docs"
+    "build:docs": "vite build docs",
+    "format": "oxfmt",
+    "format:check": "oxfmt --check",
+    "lint": "oxlint --deny-warnings",
+    "typecheck": "tsc -p docs",
+    "check": "npm run format:check && npm run lint && npm run typecheck",
+    "test": "vitest --config vitest.config.ts",
+    "test:postbuild": "vitest --config vitest.postbuild.config.ts"
   },
   "dependencies": {
     "@ibm/telemetry-js": "^1.11.0"
   },
-  "peerDependencies": {
-    "@carbon/styles": "^1.102.0"
-  },
   "devDependencies": {
     "@carbon/icons": "^11.84.0",
     "@types/node": "^26.1.1",
     "highlight.js": "^11.11.1",
+    "husky": "^9.1.7",
     "marked": "^18.0.6",
     "marked-highlight": "^2.2.4",
+    "oxfmt": "^0.61.0",
+    "oxlint": "^1.76.0",
     "sass": "^1.101.0",
-    "vite": "^8.1.5"
-  }
+    "typescript": "^7.0.2",
+    "vite": "^8.1.5",
+    "vitest": "^4.1.10"
+  },
+  "peerDependencies": {
+    "@carbon/styles": "^1.102.0"
+  },
+  "sass": "index.scss"
 }

package/scss/_config.scss

@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-$prefix: 'es' !default;
+$prefix: "es" !default;

package/scss/elements/_heading/index.scss

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '@carbon/styles/scss/spacing';
+@use "@carbon/styles/scss/spacing";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 

package/scss/elements/_input/index.scss

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '@carbon/styles/scss/theme';
-@use '@carbon/styles/scss/utilities/focus-outline';
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/utilities/focus-outline";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
@@ -53,14 +53,14 @@ $-default-config: (
     color: theme.$text-placeholder;
   }
 
-  @if map.get($props, 'emit-readonly') {
+  @if map.get($props, "emit-readonly") {
     &:read-only {
       background-color: transparent;
       border-block-end-color: theme.$border-subtle;
     }
   }
 
-  @if map.get($props, 'emit-disabled') {
+  @if map.get($props, "emit-disabled") {
     &:disabled {
       color: theme.$text-disabled;
       background-color: theme.$layer;
@@ -69,7 +69,7 @@ $-default-config: (
     }
   }
 
-  @if map.get($props, 'emit-invalid') {
+  @if map.get($props, "emit-invalid") {
     &:invalid,
     &[aria-invalid="true"] {
       outline-offset: -0.125rem;
@@ -78,15 +78,15 @@ $-default-config: (
     }
   }
 
-  @if map.get($props, 'emit-focus') {
+  @if map.get($props, "emit-focus") {
     &:focus {
-      @include focus-outline.focus-outline('outline');
+      @include focus-outline.focus-outline("outline");
     }
 
-    @if map.get($props, 'emit-invalid') {
+    @if map.get($props, "emit-invalid") {
       &:focus:invalid,
       &:focus[aria-invalid="true"] {
-        @include focus-outline.focus-outline('outline');
+        @include focus-outline.focus-outline("outline");
       }
     }
   }

package/scss/elements/_labelled-input/index.scss

@@ -5,26 +5,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '@carbon/styles/scss/theme';
-@use '@carbon/styles/scss/spacing';
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/spacing";
 
-@use '../label';
-@use '../_input';
+@use "../label";
+@use "../_input";
 
-@use '../../layout';
-@use '../../utilities/icons';
+@use "../../layout";
+@use "../../utilities/icons";
 
 $config: () !default;
 
 $-default-config: (
   label: (
-    selector: 'label',
-    axis: 'block',
+    selector: "label",
+    axis: "block",
   ),
   input: (
-    selector: 'input',
+    selector: "input",
     emit-readonly: true,
     emit-disabled: true,
     emit-invalid: true,
@@ -52,25 +52,29 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'label', 'selector')} {
-    @include label.styles((
-      selector: '&',
-      axis: map.get($props, 'label', 'axis'),
-    ));
+  #{map.get($props, "label", "selector")} {
+    @include label.styles(
+      (
+        selector: "&",
+        axis: map.get($props, "label", "axis"),
+      )
+    );
 
     position: relative;
 
-    #{map.get($props, 'input', 'selector')} {
-      @include input.styles((
-        selector: '&',
-        emit-readonly: map.get($props, 'input', 'emit-readonly'),
-        emit-disabled: map.get($props, 'input', 'emit-disabled'),
-        emit-invalid: map.get($props, 'input', 'emit-invalid'),
-        emit-focus: map.get($props, 'input', 'emit-focus'),
-      ));
-
-      padding-inline-start: -get-slot-space(map.get($props, 'fixed-input-leading-slots'));
-      padding-inline-end: -get-slot-space(map.get($props, 'fixed-input-trailing-slots'));
+    #{map.get($props, "input", "selector")} {
+      @include input.styles(
+        (
+          selector: "&",
+          emit-readonly: map.get($props, "input", "emit-readonly"),
+          emit-disabled: map.get($props, "input", "emit-disabled"),
+          emit-invalid: map.get($props, "input", "emit-invalid"),
+          emit-focus: map.get($props, "input", "emit-focus"),
+        )
+      );
+
+      padding-inline-start: -get-slot-space(map.get($props, "fixed-input-leading-slots"));
+      padding-inline-end: -get-slot-space(map.get($props, "fixed-input-trailing-slots"));
     }
 
     &::before,
@@ -80,25 +84,25 @@ $-default-config: (
       pointer-events: none;
       inset-block-start: calc(layout.$size--padding-block-start - ((1rem - 1lh) * 0.5));
 
-      @if map.get($props, 'label', 'axis') == 'block' {
+      @if map.get($props, "label", "axis") == "block" {
         grid-row: 2;
       } @else {
         grid-column: 2;
       }
     }
 
-    @if map.get($props, 'input-invalid-slot') and map.get($props, 'input', 'emit-invalid') {
-      &:has(#{map.get($props, 'input', 'selector')}:invalid),
-      &:has(#{map.get($props, 'input', 'selector')}[aria-invalid="true"]) {
+    @if map.get($props, "input-invalid-slot") and map.get($props, "input", "emit-invalid") {
+      &:has(#{map.get($props, "input", "selector")}:invalid),
+      &:has(#{map.get($props, "input", "selector")}[aria-invalid="true"]) {
         &::#{map.get($props, 'input-invalid-slot')} {
-          @include input-trailing-slot(map.get($props, 'fixed-input-trailing-slots') + 1) {
+          @include input-trailing-slot(map.get($props, "fixed-input-trailing-slots") + 1) {
             @include icons.warning--filled;
             color: theme.$support-error;
           }
         }
 
-        #{map.get($props, 'input', 'selector')} {
-          padding-inline-end: -get-slot-space(map.get($props, 'fixed-input-trailing-slots') + 1);
+        #{map.get($props, "input", "selector")} {
+          padding-inline-end: -get-slot-space(map.get($props, "fixed-input-trailing-slots") + 1);
         }
       }
     }
@@ -123,21 +127,19 @@ $-default-config: (
     + inline padding if has any slots
   */
   @return calc(
-      layout.$density--padding
-    + $count * 1rem
-    + max(($count - 1) * spacing.$spacing-03, 0rem)
-    + $additional-inline-padding
+    layout.$density--padding + $count * 1rem + max(($count - 1) * spacing.$spacing-03, 0rem) +
+      $additional-inline-padding
   );
 }
 
 @mixin input-leading-slot($index: 1) {
-  content: '';
+  content: "";
   inset-inline-start: -get-slot-offset($index);
   @content;
 }
 
 @mixin input-trailing-slot($index: 1) {
-  content: '';
+  content: "";
   inset-inline-end: -get-slot-offset($index);
   @content;
 }

package/scss/elements/_layer/index.scss

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '@carbon/styles/scss/theme';
-@use '@carbon/styles/scss/layer/layer-tokens';
-@use '@carbon/styles/scss/utilities/custom-property';
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/layer/layer-tokens";
+@use "@carbon/styles/scss/utilities/custom-property";
 
-@use '../../layout';
-@use '../../utilities/tokens';
+@use "../../layout";
+@use "../../utilities/tokens";
 
 $config: () !default;
 
@@ -42,19 +42,19 @@ $-default-config: ();
   // fallback for browers without container style query support
   background-color: theme.$layer;
 
-  @include -on-layer('01', true) {
+  @include -on-layer("01", true) {
     background-color: theme.$layer-background;
-    @include tokens.set('layer-level', '02');
+    @include tokens.set("layer-level", "02");
     @include layer-tokens.emit-layer-tokens(2);
   }
 
-  @include -on-layer('02') {
+  @include -on-layer("02") {
     background-color: theme.$layer-background;
-    @include tokens.set('layer-level', '03');
+    @include tokens.set("layer-level", "03");
     @include layer-tokens.emit-layer-tokens(3);
   }
 
-  @include -on-layer('03') {
+  @include -on-layer("03") {
     background-color: theme.$layer;
   }
 }
@@ -63,16 +63,28 @@ $-default-config: ();
   // fallback for browers without container style query support
   background-color: theme.$layer-hover;
 
-  @include -on-layer('01') { background-color: theme.$layer-hover-01; }
-  @include -on-layer('02') { background-color: theme.$layer-hover-02; }
-  @include -on-layer('03') { background-color: theme.$layer-hover-03; }
+  @include -on-layer("01") {
+    background-color: theme.$layer-hover-01;
+  }
+  @include -on-layer("02") {
+    background-color: theme.$layer-hover-02;
+  }
+  @include -on-layer("03") {
+    background-color: theme.$layer-hover-03;
+  }
 }
 
 @mixin layer-background-active {
   // fallback for browers without container style query support
   background-color: theme.$layer-active;
 
-  @include -on-layer('01') { background-color: theme.$layer-active-01; }
-  @include -on-layer('02') { background-color: theme.$layer-active-02; }
-  @include -on-layer('03') { background-color: theme.$layer-active-03; }
+  @include -on-layer("01") {
+    background-color: theme.$layer-active-01;
+  }
+  @include -on-layer("02") {
+    background-color: theme.$layer-active-02;
+  }
+  @include -on-layer("03") {
+    background-color: theme.$layer-active-03;
+  }
 }

package/scss/elements/abbreviation/index.scss

@@ -5,16 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '@carbon/styles/scss/theme';
+@use "@carbon/styles/scss/theme";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'abbr[title]',
+  selector: "abbr[title]",
 );
 
 /// @group abbreviation
@@ -23,7 +23,7 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     text-decoration: none;
     cursor: help;
     border-block-end: 0.0625rem dotted theme.$border-strong;

package/scss/elements/address/index.scss

@@ -5,16 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '@carbon/styles/scss/theme';
+@use "@carbon/styles/scss/theme";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'address',
+  selector: "address",
 );
 
 /// @group address
@@ -23,7 +23,7 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     @include layout.mode--helper-text;
     color: theme.$text-secondary;
     font-style: normal;

package/scss/elements/anchor/index.scss

@@ -5,19 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '@carbon/styles/scss/theme';
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/utilities/focus-outline';
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/spacing";
+@use "@carbon/styles/scss/utilities/focus-outline";
 
-@use '../../layout';
-@use '../../utilities/guards';
+@use "../../layout";
+@use "../../utilities/guards";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'a',
+  selector: "a",
   emit-visited: true,
 );
 
@@ -27,9 +27,9 @@ $-default-config: (
 /// @param {Bool} config.emit-visited [true] - Enable visited link styles using theme.$link-visited
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
-  $emit-visited: map.get($props, 'emit-visited') == true;
+  $emit-visited: map.get($props, "emit-visited") == true;
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     display: inline-flex;
     align-items: center;
     column-gap: spacing.$spacing-03;
@@ -60,7 +60,7 @@ $-default-config: (
     }
 
     &:focus {
-      @include focus-outline.focus-outline('outline');
+      @include focus-outline.focus-outline("outline");
     }
 
     & svg {

package/scss/elements/block-quotation/index.scss

@@ -5,17 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '@carbon/styles/scss/theme';
-@use '@carbon/styles/scss/spacing';
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/spacing";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'blockquote',
+  selector: "blockquote",
 );
 
 /// @group block-quotation
@@ -24,7 +24,7 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     margin-block: layout.$mode--margin-block;
     margin-inline: spacing.$spacing-08;
     max-inline-size: 50ch;
@@ -56,7 +56,7 @@ $-default-config: (
     }
 
     & + cite::before {
-      content: '—';
+      content: "—";
       margin-inline-end: spacing.$spacing-02;
     }
   }

package/scss/elements/body/index.scss

@@ -5,17 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '@carbon/styles/scss/theme';
-@use '@carbon/styles/scss/spacing';
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/spacing";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'body',
+  selector: "body",
 );
 
 /// @group body
@@ -24,7 +24,7 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     @include layout.mode--body;
     background-color: theme.$background;
     margin: 0;

package/scss/elements/bold-text/index.scss

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use 'sass:map';
+@use "sass:map";
 
-@use '../../layout';
+@use "../../layout";
 
 $config: () !default;
 
 $-default-config: (
-  selector: 'b, strong',
+  selector: "b, strong",
 );
 
 /// @group bold-text
@@ -21,7 +21,7 @@ $-default-config: (
 @mixin styles($config: $config) {
   $props: map.deep-merge($-default-config, $config);
 
-  #{map.get($props, 'selector')} {
+  #{map.get($props, "selector")} {
     font-weight: 600;
   }
 }