@_linked/primitives 1.0.8 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/lib/cjs/components/ToggleGroup.module.css +5 -2
  3. package/lib/cjs/package.json +2 -1
  4. package/lib/esm/components/ToggleGroup.module.css +5 -2
  5. package/lib/esm/package.json +2 -1
  6. package/package.json +2 -1
  7. package/test/toggle-group-css.test.mjs +19 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @\_linked/primitives
2
2
 
3
+ ## 1.0.9
4
+
5
+ ### Patch Changes
6
+
7
+ - [#9](https://github.com/linked-cm/primitives/pull/9) [`780eaee`](https://github.com/linked-cm/primitives/commit/780eaee5a4bf1c17f21f3840996ad6cbc0caa63b) Thanks [@carlenmy](https://github.com/carlenmy)! - Allow labelled ToggleGroup items to expand to their content while preserving the existing square minimum for icon-only items. Add `--togglegroup-item-padding-x` so consumers can tune inline padding without overriding primitive geometry.
8
+
3
9
  ## 1.0.7
4
10
 
5
11
  ### Patch Changes
package/lib/cjs/components/ToggleGroup.module.css CHANGED
@@ -11,8 +11,11 @@
11
11
  .Item {
12
12
  background-color: var(--togglegroup-item-bg, var(--control-bg));
13
13
  color: var(--togglegroup-item-text, var(--control-text));
14
- height: var(--togglegroup-item-size, var(--control-toggle-size));
15
- width: var(--togglegroup-item-size, var(--control-toggle-size));
14
+ box-sizing: border-box;
15
+ block-size: var(--togglegroup-item-size, var(--control-toggle-size));
16
+ inline-size: auto;
17
+ min-inline-size: var(--togglegroup-item-size, var(--control-toggle-size));
18
+ padding-inline: var(--togglegroup-item-padding-x, --spacing(2));
16
19
  display: flex;
17
20
  font-size: var(--togglegroup-item-font-size, var(--typography-small-size));
18
21
  line-height: var(
package/lib/cjs/package.json CHANGED
@@ -10,11 +10,12 @@
10
10
  "type": "git",
11
11
  "url": ""
12
12
  },
13
- "version": "1.0.8",
13
+ "version": "1.0.9",
14
14
  "linkedPackage": true,
15
15
  "license": "ISC",
16
16
  "scripts": {
17
17
  "start": "npm exec linked dev",
18
+ "test": "node --test test/*.test.mjs",
18
19
  "build": "rimraf ./lib && yarn build-esm && yarn build-cjs && yarn copy-to-lib && yarn dual-package",
19
20
  "build-esm": "echo \"compiling ESM\" && rimraf ./lib/esm && yarn tsc -p tsconfig-esm.json",
20
21
  "build-cjs": "echo \"compiling CJS\" && rimraf ./lib/cjs && yarn tsc -p tsconfig-cjs.json",
package/lib/esm/components/ToggleGroup.module.css CHANGED
@@ -11,8 +11,11 @@
11
11
  .Item {
12
12
  background-color: var(--togglegroup-item-bg, var(--control-bg));
13
13
  color: var(--togglegroup-item-text, var(--control-text));
14
- height: var(--togglegroup-item-size, var(--control-toggle-size));
15
- width: var(--togglegroup-item-size, var(--control-toggle-size));
14
+ box-sizing: border-box;
15
+ block-size: var(--togglegroup-item-size, var(--control-toggle-size));
16
+ inline-size: auto;
17
+ min-inline-size: var(--togglegroup-item-size, var(--control-toggle-size));
18
+ padding-inline: var(--togglegroup-item-padding-x, --spacing(2));
16
19
  display: flex;
17
20
  font-size: var(--togglegroup-item-font-size, var(--typography-small-size));
18
21
  line-height: var(
package/lib/esm/package.json CHANGED
@@ -10,11 +10,12 @@
10
10
  "type": "git",
11
11
  "url": ""
12
12
  },
13
- "version": "1.0.8",
13
+ "version": "1.0.9",
14
14
  "linkedPackage": true,
15
15
  "license": "ISC",
16
16
  "scripts": {
17
17
  "start": "npm exec linked dev",
18
+ "test": "node --test test/*.test.mjs",
18
19
  "build": "rimraf ./lib && yarn build-esm && yarn build-cjs && yarn copy-to-lib && yarn dual-package",
19
20
  "build-esm": "echo \"compiling ESM\" && rimraf ./lib/esm && yarn tsc -p tsconfig-esm.json",
20
21
  "build-cjs": "echo \"compiling CJS\" && rimraf ./lib/cjs && yarn tsc -p tsconfig-cjs.json",
package/package.json CHANGED
@@ -10,12 +10,13 @@
10
10
  "type": "git",
11
11
  "url": ""
12
12
  },
13
- "version": "1.0.8",
13
+ "version": "1.0.9",
14
14
  "linkedPackage": true,
15
15
  "main": "lib/cjs/index.js",
16
16
  "license": "ISC",
17
17
  "scripts": {
18
18
  "start": "npm exec linked dev",
19
+ "test": "node --test test/*.test.mjs",
19
20
  "build": "rimraf ./lib && yarn build-esm && yarn build-cjs && yarn copy-to-lib && yarn dual-package",
20
21
  "build-esm": "echo \"compiling ESM\" && rimraf ./lib/esm && yarn tsc -p tsconfig-esm.json",
21
22
  "build-cjs": "echo \"compiling CJS\" && rimraf ./lib/cjs && yarn tsc -p tsconfig-cjs.json",
package/test/toggle-group-css.test.mjs ADDED
@@ -0,0 +1,19 @@
1
+ import assert from 'node:assert/strict';
2
+ import { readFileSync } from 'node:fs';
3
+ import test from 'node:test';
4
+
5
+ const stylesheet = readFileSync(
6
+ new URL('../src/components/ToggleGroup.module.css', import.meta.url),
7
+ 'utf8'
8
+ );
9
+
10
+ test('labelled toggle-group items expand while icon-only items retain a square minimum', () => {
11
+ assert.match(stylesheet, /block-size:\s*var\(--togglegroup-item-size/);
12
+ assert.match(stylesheet, /inline-size:\s*auto/);
13
+ assert.match(stylesheet, /min-inline-size:\s*var\(--togglegroup-item-size/);
14
+ assert.match(
15
+ stylesheet,
16
+ /padding-inline:\s*var\(--togglegroup-item-padding-x,\s*--spacing\(2\)\)/
17
+ );
18
+ assert.doesNotMatch(stylesheet, /\bwidth\s*:/);
19
+ });