feat: Refactor selects into web components #136

louisescher · 2025-10-30T09:16:55Z

Description

This PR refactors the select components from using normal scripts into web components.

changeset-bot · 2025-10-30T09:16:59Z

🦋 Changeset detected

Latest commit: a0a320f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@studiocms/ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2025-10-30T09:17:26Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat/select-refactor

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2025-10-30T09:17:35Z

Open in StackBlitz

npm i https://pkg.pr.new/@studiocms/ui@136

commit: a0a320f

codecov · 2025-10-30T09:17:55Z

Codecov Report

❌ Patch coverage is 66.66667% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...es/studiocms_ui/src/components/Select/Select.astro	50.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

github-actions · 2025-10-30T09:23:33Z

Test Results

284 passed

Details

284 tests
704ms
playwright
Run Tests playwright-test-report #189
feat: Refactor selects into web components #136

Suites

284 passed, 0 failed, and 0 other

Suite	Passed	Failed	Other	Duration
✅ packages/studiocms_ui/test/components/Accordion.e2e.ts ✅ Test Functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Variant Styling (Dark Mode) ✅ Test Accessibility - Variant Styling (Light Mode) ✅ Test Functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Variant Styling (Dark Mode) ✅ Test Accessibility - Variant Styling (Light Mode)	✅ 10	❌ 0	⏭️ 0	14.7s
✅ packages/studiocms_ui/test/components/Badge.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Variant Styling (Dark Mode) ✅ Test Accessibility - Variant Styling (Light Mode) ✅ Test Accessibility - Colors Styling (Dark Mode) ✅ Test Accessibility - Colors Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Variant Styling (Dark Mode) ✅ Test Accessibility - Variant Styling (Light Mode) ✅ Test Accessibility - Colors Styling (Dark Mode) ✅ Test Accessibility - Colors Styling (Light Mode)	✅ 14	❌ 0	⏭️ 0	17.8s
✅ packages/studiocms_ui/test/components/Breadcrumbs.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	6.5s
✅ packages/studiocms_ui/test/components/Button.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Variant Styling (Dark Mode) ✅ Test Accessibility - Variant Styling (Light Mode) ✅ Test Accessibility - Polymorphic Styling (Dark Mode) ✅ Test Accessibility - Polymorphic Styling (Light Mode) ✅ Test Accessibility - Colors Styling (Dark Mode) ✅ Test Accessibility - Colors Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Variant Styling (Dark Mode) ✅ Test Accessibility - Variant Styling (Light Mode) ✅ Test Accessibility - Polymorphic Styling (Dark Mode) ✅ Test Accessibility - Polymorphic Styling (Light Mode) ✅ Test Accessibility - Colors Styling (Dark Mode) ✅ Test Accessibility - Colors Styling (Light Mode)	✅ 18	❌ 0	⏭️ 0	24.8s
✅ packages/studiocms_ui/test/components/Card.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Variant Styling (Dark Mode) ✅ Test Accessibility - Variant Styling (Light Mode) ✅ Test Accessibility - Slot Styling (Dark Mode) ✅ Test Accessibility - Slot Styling (Light Mode) ✅ Test Accessibility - Polymorphic Styling (Dark Mode) ✅ Test Accessibility - Polymorphic Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Variant Styling (Dark Mode) ✅ Test Accessibility - Variant Styling (Light Mode) ✅ Test Accessibility - Slot Styling (Dark Mode) ✅ Test Accessibility - Slot Styling (Light Mode) ✅ Test Accessibility - Polymorphic Styling (Dark Mode) ✅ Test Accessibility - Polymorphic Styling (Light Mode)	✅ 18	❌ 0	⏭️ 0	25.4s
✅ packages/studiocms_ui/test/components/Center.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	6.1s
✅ packages/studiocms_ui/test/components/Checkbox.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Color Styling (Dark Mode) ✅ Test Accessibility - Color Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Color Styling (Dark Mode) ✅ Test Accessibility - Color Styling (Light Mode)	✅ 10	❌ 0	⏭️ 0	14.0s
✅ packages/studiocms_ui/test/components/Divider.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	6.3s
✅ packages/studiocms_ui/test/components/Dropdown.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	6.8s
✅ packages/studiocms_ui/test/components/Footer.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	7.3s
✅ packages/studiocms_ui/test/components/Group.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Button Group Styling (Dark Mode) ✅ Test Accessibility - Button Group Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Button Group Styling (Dark Mode) ✅ Test Accessibility - Button Group Styling (Light Mode)	✅ 10	❌ 0	⏭️ 0	12.0s
✅ packages/studiocms_ui/test/components/Icon.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	6.3s
✅ packages/studiocms_ui/test/components/Input.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - With Icon Styling (Dark Mode) ✅ Test Accessibility - With Icon Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - With Icon Styling (Dark Mode) ✅ Test Accessibility - With Icon Styling (Light Mode)	✅ 10	❌ 0	⏭️ 0	12.7s
✅ packages/studiocms_ui/test/components/Modal.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	7.1s
✅ packages/studiocms_ui/test/components/Progress.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Color Styling (Dark Mode) ✅ Test Accessibility - Color Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Color Styling (Dark Mode) ✅ Test Accessibility - Color Styling (Light Mode)	✅ 10	❌ 0	⏭️ 0	13.8s
✅ packages/studiocms_ui/test/components/RadioGroup.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Color Styling (Dark Mode) ✅ Test Accessibility - Color Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Color Styling (Dark Mode) ✅ Test Accessibility - Color Styling (Light Mode)	✅ 10	❌ 0	⏭️ 0	15.8s
✅ packages/studiocms_ui/test/components/Row.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	6.4s
✅ packages/studiocms_ui/test/components/SearchSelect.e2e.ts ✅ Basic functionality ✅ Multi-Select functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Multi-Select Styling (Dark Mode) ✅ Test Accessibility - Multi-Select Styling (Light Mode) ✅ Basic functionality ✅ Multi-Select functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Multi-Select Styling (Dark Mode) ✅ Test Accessibility - Multi-Select Styling (Light Mode)	✅ 12	❌ 0	⏭️ 0	15.0s
✅ packages/studiocms_ui/test/components/Select.e2e.ts ✅ Basic functionality ✅ Multiple functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Multiple Styling (Dark Mode) ✅ Test Accessibility - Multiple Styling (Light Mode) ✅ Basic functionality ✅ Multiple functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Multiple Styling (Dark Mode) ✅ Test Accessibility - Multiple Styling (Light Mode)	✅ 12	❌ 0	⏭️ 0	15.1s
✅ packages/studiocms_ui/test/components/Sidebar-double.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	6.8s
✅ packages/studiocms_ui/test/components/Sidebar-single.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	7.3s
✅ packages/studiocms_ui/test/components/Skeleton.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Variant Styling (Dark Mode) ✅ Test Accessibility - Variant Styling (Light Mode) ✅ Test Accessibility - Width/Height Styling (Dark Mode) ✅ Test Accessibility - Width/Height Styling (Light Mode) ✅ Test Accessibility - Radius Styling (Dark Mode) ✅ Test Accessibility - Radius Styling (Light Mode) ✅ Test Accessibility - Direction Styling (Dark Mode) ✅ Test Accessibility - Direction Styling (Light Mode) ✅ Test Accessibility - Horizontal Alignment Styling (Dark Mode) ✅ Test Accessibility - Horizontal Alignment Styling (Light Mode) ✅ Test Accessibility - Vertical Alignment Styling (Dark Mode) ✅ Test Accessibility - Vertical Alignment Styling (Light Mode) ✅ Test Accessibility - Gap Styling (Dark Mode) ✅ Test Accessibility - Gap Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Variant Styling (Dark Mode) ✅ Test Accessibility - Variant Styling (Light Mode) ✅ Test Accessibility - Width/Height Styling (Dark Mode) ✅ Test Accessibility - Width/Height Styling (Light Mode) ✅ Test Accessibility - Radius Styling (Dark Mode) ✅ Test Accessibility - Radius Styling (Light Mode) ✅ Test Accessibility - Direction Styling (Dark Mode) ✅ Test Accessibility - Direction Styling (Light Mode) ✅ Test Accessibility - Horizontal Alignment Styling (Dark Mode) ✅ Test Accessibility - Horizontal Alignment Styling (Light Mode) ✅ Test Accessibility - Vertical Alignment Styling (Dark Mode) ✅ Test Accessibility - Vertical Alignment Styling (Light Mode) ✅ Test Accessibility - Gap Styling (Dark Mode) ✅ Test Accessibility - Gap Styling (Light Mode)	✅ 34	❌ 0	⏭️ 0	55.9s
✅ packages/studiocms_ui/test/components/Tabs.e2e.ts ✅ Basic functionality ✅ Sync functionality ✅ Nested functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Sync Styling (Dark Mode) ✅ Test Accessibility - Sync Styling (Light Mode) ✅ Test Accessibility - Nested Styling (Dark Mode) ✅ Test Accessibility - Nested Styling (Light Mode) ✅ Test Accessibility - Variant Styling (Dark Mode) ✅ Test Accessibility - Variant Styling (Light Mode) ✅ Basic functionality ✅ Sync functionality ✅ Nested functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Sync Styling (Dark Mode) ✅ Test Accessibility - Sync Styling (Light Mode) ✅ Test Accessibility - Nested Styling (Dark Mode) ✅ Test Accessibility - Nested Styling (Light Mode) ✅ Test Accessibility - Variant Styling (Dark Mode) ✅ Test Accessibility - Variant Styling (Light Mode)	✅ 22	❌ 0	⏭️ 0	28.9s
✅ packages/studiocms_ui/test/components/Textarea.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	7.2s
✅ packages/studiocms_ui/test/components/Toast.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	7.6s
✅ packages/studiocms_ui/test/components/Toggle.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Color Styling (Dark Mode) ✅ Test Accessibility - Color Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Test Accessibility - Color Styling (Dark Mode) ✅ Test Accessibility - Color Styling (Light Mode)	✅ 10	❌ 0	⏭️ 0	15.1s
✅ packages/studiocms_ui/test/components/Tooltip.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	6.9s
✅ packages/studiocms_ui/test/components/User.e2e.ts ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode) ✅ Basic functionality ✅ Test Accessibility - Basic Styling (Dark Mode) ✅ Test Accessibility - Basic Styling (Light Mode)	✅ 6	❌ 0	⏭️ 0	7.0s

Github Test Reporter by CTRF 💚

🔄 This comment has been updated

Adammatthiesen

Something weird is going on when i set to this version on StudioCMS further investigation needed. (getting a HTMLElement is not defined pointing to the client code.... for the select, but only one 1 of the pages... weird)

fix: Refactor Select and SearchSelect components into web components

f98cfab

louisescher requested a review from a team as a code owner October 30, 2025 09:16

louisescher self-assigned this Oct 30, 2025

louisescher changed the base branch from main to v1.0.0 October 30, 2025 09:17

RATIU5 approved these changes Oct 30, 2025

View reviewed changes

dreyfus92 approved these changes Oct 30, 2025

View reviewed changes

louisescher and others added 3 commits November 2, 2025 15:46

Create calm-teachers-shop.md

845b34f

Merge branch 'v1.0.0' into feat/select-refactor

bb22ac9

Merge branch 'v1.0.0' into feat/select-refactor

a0a320f

Adammatthiesen requested changes Nov 6, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: Refactor selects into web components #136

feat: Refactor selects into web components #136

Uh oh!

louisescher commented Oct 30, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Oct 30, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Oct 30, 2025 •

edited

Loading

Review skipped

Uh oh!

pkg-pr-new bot commented Oct 30, 2025 •

edited

Loading

Uh oh!

codecov bot commented Oct 30, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 30, 2025 •

edited

Loading

Uh oh!

Adammatthiesen left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

feat: Refactor selects into web components #136

Are you sure you want to change the base?

feat: Refactor selects into web components #136

Uh oh!

Conversation

louisescher commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Uh oh!

changeset-bot bot commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai bot commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

pkg-pr-new bot commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions bot commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test Results

Details

Suites

Uh oh!

Adammatthiesen left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

louisescher commented Oct 30, 2025 •

edited

Loading

changeset-bot bot commented Oct 30, 2025 •

edited

Loading

coderabbitai bot commented Oct 30, 2025 •

edited

Loading

pkg-pr-new bot commented Oct 30, 2025 •

edited

Loading

codecov bot commented Oct 30, 2025 •

edited

Loading

github-actions bot commented Oct 30, 2025 •

edited

Loading