forked from commontoolsinc/labs
-
Notifications
You must be signed in to change notification settings - Fork 0
[pull] main from commontoolsinc:main #148
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* Add ct-autocomplete component
New web component for search input with filterable dropdown:
- Search filtering with label, value, group, and searchAliases
- Keyboard navigation (arrow keys, Enter, Escape)
- Dropdown positioning (auto above/below)
- allowCustom option for free-form values
- ARIA accessibility (combobox, listbox, option roles)
- Fires ct-select event with { value, label, group?, isCustom }
Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
* Fix ct-autocomplete: use camelCase for JSX property names
Changed maxVisible and allowCustom from kebab-case to camelCase in
JSX types to match Lit property names. CommonTools sets properties
directly using JSX attribute names, so they must match exactly.
Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
* Fix dropdown clipping and keyboard scroll
- Use position: fixed for dropdown to escape overflow:hidden containers
- Add scroll-into-view for keyboard navigation
- Reposition dropdown on scroll/resize events
Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
* Add $value binding and multiple mode to ct-autocomplete
Implements CellController-based bidirectional value binding for ct-autocomplete,
similar to ct-select. Supports both single-select and multi-select modes.
Features:
- $value prop for Cell binding (string for single, string[] for multiple)
- multiple prop to enable multi-select mode
- Single-select: shows selected label in input, backspace to clear
- Multi-select: adds to array, filters already-selected from dropdown
- Already-selected items shown at bottom with "Already added" label
- Click/Enter on already-selected items removes them (shows "Remove" on hover)
- "Add X" custom option appears after all other items
- Proper keyboard navigation across all item types
Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
* Fix: Allow form submission when dropdown is closed
Move e.preventDefault() inside the _isOpen check so that Enter key
can submit forms when the autocomplete dropdown is not open.
Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
* Add to `ct-select.tsx` demo
* Format pass
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Happy <yesreply@happy.engineering>
Co-authored-by: Ben Follington <5009316+bfollington@users.noreply.github.com>
* Add Cell support to ct-textarea for two-way binding - Import Cell type and createStringCellController - Add timingStrategy and timingDelay properties - Use CellController for getValue/setValue operations - Bind value (Cell or plain string) to controller in firstUpdated/updated - Add focus/blur hooks for timing controller - Update event handlers to use controller methods - Add name to all event details for consistency with ct-input Generated with [Claude Code](https://claude.ai/code) via [Happy](https://happy.engineering) Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering> * Format pass --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Happy <yesreply@happy.engineering> Co-authored-by: Ben Follington <5009316+bfollington@users.noreply.github.com>
* Add items prop and theme support to ct-radio-group
- Add `items` prop for declarative radio options (like ct-select)
- Add `orientation` prop ("vertical" | "horizontal")
- Add Cell controller for $value bidirectional binding
- Add theme integration with @consume decorator
- Add JSX type definitions for ct-radio-group
- Render native radio inputs with custom styling when items provided
- Maintain backward compatibility with slotted ct-radio children
Usage:
```tsx
<ct-radio-group
$value={selectedSize}
items={[
{ label: "Small", value: "small" },
{ label: "Medium", value: "medium" },
{ label: "Large", value: "large", disabled: true },
]}
orientation="horizontal"
/>
```
🤖 Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)
Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
* Add to `ct-select.tsx` example
* Format pass
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Happy <yesreply@happy.engineering>
Co-authored-by: Ben Follington <5009316+bfollington@users.noreply.github.com>
Full-featured Scrabble game pattern including: - 15x15 board with proper premium squares - Tile rack with drag-and-drop placement - Word validation against comprehensive dictionary - Proper scoring with letter and word multipliers - Turn management and score tracking 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: tonyespinoza1 <tonyespinoza1@users.noreply.github.com> Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
…#2223) The ct-drop-zone component now emits additional data in the ct-drop event: - pointerX/pointerY: The cursor coordinates at drop time - dropZoneRect: The bounding rect of the drop zone (left, top, width, height) This enables patterns to calculate precise drop positions within the zone, which is necessary for implementing drag-and-drop features like placing tiles on a game board where shadow DOM isolation prevents DOM queries. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: tonyespinoza1 <tonyespinoza1@users.noreply.github.com> Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
See Commits and Changes for more details.
Created by
pull[bot] (v2.0.0-alpha.4)
Can you help keep this open source service alive? 💖 Please sponsor : )