{"_id":"@carbon-labs/wc-resizer","_rev":"4-ffe025f79b8b886e1d6d48f04ad8861f","name":"@carbon-labs/wc-resizer","dist-tags":{"latest":"0.5.0"},"versions":{"0.2.0":{"name":"@carbon-labs/wc-resizer","version":"0.2.0","license":"Apache-2.0","_id":"@carbon-labs/wc-resizer@0.2.0","maintainers":[{"name":"carbon-design-system","email":"carbon@us.ibm.com"},{"name":"tay1orjones","email":"taylor.jones826@gmail.com"},{"name":"carbon-bot","email":"carbondesignsystem@gmail.com"},{"name":"ibmdesign","email":"ibmdesign@us.ibm.com"},{"name":"jeffreychew","email":"jeff.chew@gmail.com"}],"homepage":"https://github.com/carbon-design-system/carbon-labs#readme","bugs":{"url":"https://github.com/carbon-design-system/carbon-labs/issues"},"dist":{"shasum":"eda5ccf83f0ae8f4a78c0f493f2d8d8866042785","tarball":"https://registry.npmjs.org/@carbon-labs/wc-resizer/-/wc-resizer-0.2.0.tgz","fileCount":87,"integrity":"sha512-l5pFiU14SsZZx5EU3HemVuCxULW0ECVm+nBFR8Z4ouAqd9Y3QHnTw2CpxWXxnvwE28ojHWW/HbbFbt1xh+mHPg==","signatures":[{"sig":"MEYCIQCt7LMhxk5R6hoWj5QlYIpDGI7CK2QoJOzBMvvfdNBiJAIhAJuza6An/yt/GPJQ35YQcvwcKw2M6b/cS/gtZma/rQ5G","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@carbon-labs%2fwc-resizer@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":178411},"types":"./src/index.d.ts","exports":{".":{"default":"./src/index.js"},"./es/*":"./es/*","./lib/*":"./lib/*"},"gitHead":"57635dd8b14423eba9c24bf6c466bbbe8c8e54b8","scripts":{"build":"node ../../../tasks/build.js","clean":"rimraf es lib","build:dist":"rm -rf dist && rollup --config ../../../tasks/build-dist.js","build:dist:canary":"rm -rf dist && rollup --config ../../../tasks/build-dist.js --configCanary"},"_npmUser":{"name":"carbon-bot","email":"carbondesignsystem@gmail.com"},"repository":{"url":"git+https://github.com/carbon-design-system/carbon-labs.git","type":"git","directory":"packages/web-components/src/components/resizer"},"_npmVersion":"lerna/9.0.3/node@v22.22.2+x64 (linux)","description":"Carbon Labs - Resizer web components for creating resizable panels","directories":{},"_nodeVersion":"22.22.2","dependencies":{"lit":"^3.2.1","@babel/runtime":"^7.23.2","@carbon-labs/utilities":"0.21.0"},"publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"customElements":"custom-elements.json","_npmOperationalInternal":{"tmp":"tmp/wc-resizer_0.2.0_1778584556331_0.8376657637414482","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@carbon-labs/wc-resizer","version":"0.3.0","license":"Apache-2.0","_id":"@carbon-labs/wc-resizer@0.3.0","maintainers":[{"name":"carbon-design-system","email":"carbon@us.ibm.com"},{"name":"tay1orjones","email":"taylor.jones826@gmail.com"},{"name":"carbon-bot","email":"carbondesignsystem@gmail.com"},{"name":"ibmdesign","email":"ibmdesign@us.ibm.com"},{"name":"jeffreychew","email":"jeff.chew@gmail.com"}],"homepage":"https://github.com/carbon-design-system/carbon-labs#readme","bugs":{"url":"https://github.com/carbon-design-system/carbon-labs/issues"},"dist":{"shasum":"af81c1a6b8c979ad048989fc01c5a028a557db79","tarball":"https://registry.npmjs.org/@carbon-labs/wc-resizer/-/wc-resizer-0.3.0.tgz","fileCount":87,"integrity":"sha512-TFlgjZYoQX0lNVSqqxKhnQQtUpbs0uEWWEUEmUStHDnXcfFfWd1VWji5q+1+D38D/da0Kk6adQVo8YotjEmGjg==","signatures":[{"sig":"MEYCIQDo8LBplKWD5YHntohWO5D0A2ihhlmqn6bPMT/+nSsWdQIhANPwqo4tzo/axNla/Th6PcvZikFJ4/dfTaMhfTwwZ0E8","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@carbon-labs%2fwc-resizer@0.3.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":178408},"types":"./src/index.d.ts","exports":{".":{"default":"./src/index.js"},"./es/*":"./es/*","./lib/*":"./lib/*"},"gitHead":"0adc4a32eb0e47d9bbd21c0a184a289f3f36bcc9","scripts":{"build":"node ../../../tasks/build.js","clean":"rimraf es lib","build:dist":"rm -rf dist && rollup --config ../../../tasks/build-dist.js","build:dist:canary":"rm -rf dist && rollup --config ../../../tasks/build-dist.js --configCanary"},"_npmUser":{"name":"carbon-bot","email":"carbondesignsystem@gmail.com"},"repository":{"url":"git+https://github.com/carbon-design-system/carbon-labs.git","type":"git","directory":"packages/web-components/src/components/resizer"},"_npmVersion":"lerna/9.0.3/node@v22.22.2+x64 (linux)","description":"Carbon Labs - Resizer web components for creating resizable panels","directories":{},"_nodeVersion":"22.22.2","dependencies":{"lit":"^3.2.1","@babel/runtime":"^7.23.2","@carbon-labs/utilities":"0.21.0"},"publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"customElements":"custom-elements.json","_npmOperationalInternal":{"tmp":"tmp/wc-resizer_0.3.0_1778628577324_0.12863599341871002","host":"s3://npm-registry-packages-npm-production"}},"0.5.0":{"name":"@carbon-labs/wc-resizer","version":"0.5.0","license":"Apache-2.0","_id":"@carbon-labs/wc-resizer@0.5.0","maintainers":[{"name":"carbon-design-system","email":"carbon@us.ibm.com"},{"name":"tay1orjones","email":"taylor.jones826@gmail.com"},{"name":"carbon-bot","email":"carbondesignsystem@gmail.com"},{"name":"ibmdesign","email":"ibmdesign@us.ibm.com"},{"name":"jeffreychew","email":"jeff.chew@gmail.com"}],"homepage":"https://github.com/carbon-design-system/carbon-labs#readme","bugs":{"url":"https://github.com/carbon-design-system/carbon-labs/issues"},"dist":{"shasum":"62129f5ee2f426c70a92c41cab9361f3c8d9c2db","tarball":"https://registry.npmjs.org/@carbon-labs/wc-resizer/-/wc-resizer-0.5.0.tgz","fileCount":87,"integrity":"sha512-5YjZ4q3cUKH2boKhhPsumkOs1rKWwF01amJ21cGO8orH7jtDA52IF7chWyl5fhZDGNgHiLVsswWM3uJ+Qr8o5w==","signatures":[{"sig":"MEYCIQCh8/zSUyRo97H8Azv4S8cbT4yxhaZrBIDmbtw3FsllAQIhALRuNedsDYodIpHTqikE93U1K9fKC5mkre+Pfuj/vSpp","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@carbon-labs%2fwc-resizer@0.5.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":178408},"types":"./src/index.d.ts","exports":{".":{"default":"./src/index.js"},"./es/*":"./es/*","./lib/*":"./lib/*"},"gitHead":"d479369806a9d59d480a0ebaeb6171c28e2db6fb","scripts":{"build":"node ../../../tasks/build.js","clean":"rimraf es lib","build:dist":"rm -rf dist && rollup --config ../../../tasks/build-dist.js","build:dist:canary":"rm -rf dist && rollup --config ../../../tasks/build-dist.js --configCanary"},"_npmUser":{"name":"carbon-bot","email":"carbondesignsystem@gmail.com"},"repository":{"url":"git+https://github.com/carbon-design-system/carbon-labs.git","type":"git","directory":"packages/web-components/src/components/resizer"},"_npmVersion":"lerna/9.0.7/node@v22.22.3+x64 (linux)","description":"Carbon Labs - Resizer web components for creating resizable panels","directories":{},"_nodeVersion":"22.22.3","dependencies":{"lit":"^3.2.1","@babel/runtime":"^7.23.2","@carbon-labs/utilities":"0.21.0"},"publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"customElements":"custom-elements.json","_npmOperationalInternal":{"tmp":"tmp/wc-resizer_0.5.0_1784137549306_0.8229775719650196","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-05-12T11:15:56.217Z","modified":"2026-08-21T15:34:50.480Z","0.2.0":"2026-05-12T11:15:56.488Z","0.3.0":"2026-05-12T23:29:37.528Z","0.5.0":"2026-07-15T17:45:49.445Z"},"bugs":{"url":"https://github.com/carbon-design-system/carbon-labs/issues"},"license":"Apache-2.0","homepage":"https://github.com/carbon-design-system/carbon-labs#readme","repository":{"url":"git+https://github.com/carbon-design-system/carbon-labs.git","type":"git","directory":"packages/web-components/src/components/resizer"},"description":"Carbon Labs - Resizer web components for creating resizable panels","maintainers":[{"email":"carbon@us.ibm.com","name":"carbon-design-system"},{"email":"carbondesignsystem@gmail.com","name":"carbon-bot"},{"email":"ibmdesign@us.ibm.com","name":"ibmdesign"},{"email":"jeff.chew@gmail.com","name":"jeffreychew"}],"readme":"# Resizer Web Components\n\nA set of web components for creating resizable panels with support for both\ndeclarative (zero-setup) and programmatic (composable) usage modes.\n\n## Components\n\n- `clabs-resizer-grid` - Container for resizable panels\n- `clabs-resizer-panel` - Individual resizable panel\n- `clabs-resizer-handle` - Handle for resizing between panels\n- `clabs-resizer-handle-pivot` - Corner pivot for advanced resizing\n\n## Features\n\n### Zero-Setup Usage (Declarative)\n\nEnable direct usage of components without any JavaScript setup. Users can\ncompose layouts purely via HTML and have resizing work out-of-the-box.\n\n### Composable Usage (Programmatic)\n\nAllow `clabs-resizer-handle` and `clabs-resizer-handle-pivot` to be used as\nstandalone components that emit drag events and delta values. Consumers (e.g.,\nframeworks like React) can handle resizing logic via JavaScript.\n\n## Usage\n\n### Declarative Mode (Zero-Setup)\n\n#### Basic Horizontal Layout\n\n```html\n\n Left panel content \n\n \n\n Right panel content \n\n```\n\n#### Basic Vertical Layout\n\n```html\n\n Top panel content \n\n \n\n \n Bottom panel content\n \n\n```\n\n#### With Pivot Handle\n\n```html\n\n \n Left panel content\n \n \n \n \n\n Right panel content \n\n```\n\n### Programmatic Mode (Event-Driven)\n\nThe resizer handle can be used independently without a grid container by\nlistening to its events:\n\n#### Events\n\n- `resize-start` - Fired when dragging starts\n - `detail.axis` - The resize axis ('x' or 'y')\n - `detail.startPosition` - Starting position {x, y}\n\n- `resize-drag` - Fired during dragging\n - `detail.axis` - The resize axis ('x' or 'y')\n - `detail.delta` - Movement delta in pixels\n - `detail.position` - Current position {x, y}\n\n- `resize-end` - Fired when dragging ends\n - `detail.axis` - The resize axis ('x' or 'y')\n - `detail.delta` - Total movement delta in pixels\n - `detail.position` - Final position {x, y}\n\n- `resize-reset` - Fired on double-tap/double-click\n\n#### Single Panel Example\n\n```html\n\n\n\n```\n\n#### Bounded Resize Example\n\n```html\n\n\n\n```\n\n## CSS Custom Properties\n\n- `--resizer-thickness` - Thickness of the resizer handle (default: 4px)\n- `--resizer-grab-thickness` - Additional grab area thickness (default: 0px)\n- `--resizer-grab-color` - Color of the grab area (default: transparent)\n- `--start-element-size` - Size of the start panel (default: 1fr)\n- `--end-element-size` - Size of the end panel (default: 1fr)\n\n## Accessibility\n\n### Keyboard Navigation\n\nThe resizer handle supports keyboard navigation:\n\n- **Arrow Keys**: Move the resizer handle in 5px increments\n - `ArrowUp`/`ArrowDown` for horizontal handles (y-axis)\n - `ArrowLeft`/`ArrowRight` for vertical handles (x-axis)\n- **Shift + Arrow Keys**: Move in 25px increments for faster resizing\n- **Home**: Collapse the start panel to minimum size (grid mode only)\n- **End**: Expand the start panel to maximum size (grid mode only)\n- **Double-click/Double-tap**: Reset panels to default sizes\n\n### ARIA Attributes\n\n#### Grid-Based Usage (Automatic)\n\nWhen using `clabs-resizer-handle` within a `clabs-resizer-grid`, ARIA attributes\nare automatically managed:\n\n- `role=\"separator\"` - Identifies the element as a separator\n- `aria-orientation` - Set to \"vertical\" or \"horizontal\" based on axis\n- `aria-valuenow` - Current split percentage (0-100)\n- `aria-valuemin=\"0\"` - Minimum value\n- `aria-valuemax=\"100\"` - Maximum value\n- `aria-valuetext` - Human-readable split ratio (e.g., \"60% / 40%\")\n- `aria-live=\"assertive\"` - Announces changes to screen readers\n\n#### Standalone Usage (Manual)\n\nWhen using `clabs-resizer-handle` without a grid (programmatic mode), you are\nresponsible for managing ARIA attributes to ensure accessibility:\n\n```html\n\n\n\n```\n\n**Note**: The `role=\"separator\"` attribute requires `aria-valuenow` to be\npresent for proper accessibility compliance. When using standalone handles,\nalways update these attributes during resize operations.\n\n## Browser Support\n\nModern browsers with Web Components support (Chrome, Firefox, Safari, Edge)\n\n## License\n\nApache-2.0\n","readmeFilename":"README.md"}