Skip to content

feat(input-date-picker): add component tokens#11734

Merged
Elijbet merged 37 commits intodevfrom
elijbet/7180-add-input-date-picker-and-input-message-design-tokens
Aug 25, 2025
Merged

feat(input-date-picker): add component tokens#11734
Elijbet merged 37 commits intodevfrom
elijbet/7180-add-input-date-picker-and-input-message-design-tokens

Conversation

@Elijbet
Copy link
Copy Markdown
Contributor

@Elijbet Elijbet commented Mar 12, 2025

Related Issue: #7180

Adds the following tokens to input-date-picker component:
--calcite-input-date-picker-border-color: Specifies the component's input border color.
--calcite-input-date-picker-divider-color: Specifies the component's divider color between two inputs when in range mode.
--calcite-input-date-picker-shadow: Specifies the component's input shadow.
--calcite-input-date-picker-calendar-shadow: The component's calendar shadow.
--calcite-input-date-picker-icon-color: Specifies the component's in-field input icon color.
--calcite-input-date-picker-icon-color-hover: Specifies the component's in-field input icon color on hover.
--calcite-input-date-picker-actions-icon-color: Specifies the component's actions icon color.
--calcite-input-date-picker-actions-icon-color-hover: Specifies the component's actions icon color on hover.
--calcite-input-date-picker-calendar-icon-color: Specifies the component's calendar icon color.
--calcite-input-date-picker-calendar-icon-color-hover: Specifies the component's calendar icon color.
--calcite-input-date-picker-background-color: Specifies the component's input background color.
--calcite-input-date-picker-calendar-actions-background-color: Specifies the background color of actions of the calendar.
--calcite-input-date-picker-calendar-actions-background-color-hover: Specifies the background color of actions of the calendar when hovered.
--calcite-input-date-picker-calendar-actions-background-color-press: Specifies the background color of actions of the calendar when pressed.
--calcite-input-date-picker-calendar-selected-background-color: Specifies the background color of selected day and day range of the calendar.
--calcite-input-calendar-day-background-color: Specifies the background color of day of the calendar.
--calcite-input-date-picker-calendar-day-background-color-hover: Specifies the background color of day of the calendar when hovered.
--calcite-input-date-picker-calendar-day-outside-range-background-color-hover: Specifies the background color of day's outside current range of the component's date-picker when hovered.
--calcite-input-date-picker-corner-radius: Specifies the component's input corner radius.
--calcite-input-date-picker-calendar-corner-radius: Specifies the component's calendar border radius.
--calcite-input-date-picker-text-color: Specifies the component's input text color.
--calcite-input-date-picker-placeholder-text-color: Specifies the component's input placeholder text color.
--calcite-input-date-picker-calendar-actions-text-color: Specifies the text color of the component's calendar actions.
--calcite-input-date-picker-calendar-actions-text-color-press: Specifies the text color of the component's calendar actions when pressed.
--calcite-input-date-picker-calendar-text-color: Specifies the text color of the component's calendar week, year & suffix.
--calcite-input-date-picker-calendar-month-select-font-size: Specifies the font size of month select of the component's date-picker.
--calcite-input-date-picker-calendar-month-select-text-color: Specifies the text color of month select of the component's date-picker.
--calcite-input-date-picker-calendar-day-text-color: Specifies the text color of day of the component's date-picker.
--calcite-input-date-picker-calendar-day-text-color-hover: Specifies the text color of day of the component's date-picker when hovered.
--calcite-input-date-picker-calendar-current-day-text-color: Specifies the text color of current day of the component's date-picker.
--calcite-input-date-picker-calendar-day-text-color-selected: Specifies the text color of selected day of the component's date-picker.
--calcite-input-date-picker-calendar-day-range-text-color: Specifies the text color of select day range of the component's date-picker.
--calcite-input-date-picker-calendar-day-outside-range-text-color-hover: Specifies the text color of day's outside current range of the component's date-picker when hovered.
--calcite-input-date-picker-calendar-border-color: Specifies the component's calendar border color.
--calcite-input-date-picker-calendar-range-divider-color: Specifies the divider color between the component's date-picker calendars when

@github-actions github-actions Bot added the enhancement Issues tied to a new feature or request. label Mar 12, 2025
@Elijbet Elijbet marked this pull request as ready for review March 12, 2025 22:54
@jcfranco jcfranco requested a review from anveshmekala March 13, 2025 22:11
Copy link
Copy Markdown
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is updating 2 different groups of components, so can you split this into separate PRs for consistency and better tracking in #7180?

@Elijbet Elijbet changed the title feat(input-message, input-date-picker): add component tokens feat(input-date-picker): add component tokens Mar 17, 2025
@Elijbet Elijbet added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Mar 17, 2025
@Elijbet Elijbet added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Mar 18, 2025
@Elijbet Elijbet added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Mar 20, 2025
@macandcheese macandcheese self-requested a review March 20, 2025 21:09
@Elijbet Elijbet requested a review from jcfranco March 20, 2025 23:18
@Elijbet Elijbet requested a review from jcfranco August 20, 2025 21:46
Copy link
Copy Markdown
Contributor

@macandcheese macandcheese left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good - I think consolidating and prefixing with "calendar-" makes sense, unless there is a better name for that from a design taxonomy perspective @ashetland / @SkyeSeitz - otherwise - just some naming questions / nitpicks.

@macandcheese
Copy link
Copy Markdown
Contributor

@Elijbet could you take this out of draft and kick off a screenshot test? Thanks!

@Elijbet Elijbet marked this pull request as ready for review August 20, 2025 22:56
@Elijbet Elijbet added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Aug 20, 2025
@Elijbet Elijbet added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Aug 21, 2025
Copy link
Copy Markdown
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅
📅🪙🪙🪙🪙📅🪙📅📅📅📅📅🪙📅🪙🪙🪙🪙📅📅🪙🪙🪙📅📅🪙🪙📅📅🪙📅📅📅🪙📅🪙🪙🪙🪙📅🪙📅
📅🪙📅📅🪙📅🪙📅📅📅📅📅🪙📅🪙📅📅📅📅🪙📅📅📅📅🪙📅📅🪙📅🪙🪙📅🪙🪙📅🪙📅📅📅📅🪙📅
📅🪙🪙🪙🪙📅🪙📅📅🪙📅📅🪙📅🪙🪙🪙📅📅📅🪙🪙📅📅🪙📅📅🪙📅🪙📅🪙📅🪙📅🪙🪙🪙📅📅🪙📅
📅🪙📅📅🪙📅🪙📅🪙📅🪙📅🪙📅🪙📅📅📅📅📅📅📅🪙📅🪙📅📅🪙📅🪙📅📅📅🪙📅🪙📅📅📅📅📅📅
📅🪙📅📅🪙📅📅🪙📅📅📅🪙📅📅🪙🪙🪙🪙📅🪙🪙🪙📅📅📅🪙🪙📅📅🪙📅📅📅🪙📅🪙🪙🪙🪙📅🪙📅
📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅

There might be one more prop removal, but this looks great! Thanks for the solid work on this one! ✨💪✨

@Elijbet Elijbet added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Aug 25, 2025
@Elijbet Elijbet added skip visual snapshots Pull requests that do not need visual regression testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Aug 25, 2025
@Elijbet Elijbet merged commit 4dab786 into dev Aug 25, 2025
13 checks passed
@Elijbet Elijbet deleted the elijbet/7180-add-input-date-picker-and-input-message-design-tokens branch August 25, 2025 21:23
@github-actions github-actions Bot added this to the 2025-08-26 - Aug Milestone milestone Aug 25, 2025
@Elijbet Elijbet restored the elijbet/7180-add-input-date-picker-and-input-message-design-tokens branch September 16, 2025 20:58
@Elijbet Elijbet deleted the elijbet/7180-add-input-date-picker-and-input-message-design-tokens branch September 16, 2025 20:59
benelan pushed a commit that referenced this pull request Sep 16, 2025
**Related Issue:** N/A

## Summary

This should help catch invalid token test configurations.

Stems from
#11734 (comment).
benelan pushed a commit that referenced this pull request Sep 16, 2025
**Related Issue:** #7180 

Adds the following tokens to `input-date-picker` component:
`--calcite-input-date-picker-border-color`: Specifies the component's
input border color.
`--calcite-input-date-picker-divider-color`: Specifies the component's
divider color between two inputs when in range mode.
`--calcite-input-date-picker-shadow`: Specifies the component's input
shadow.
`--calcite-input-date-picker-calendar-shadow`: The component's calendar
shadow.
`--calcite-input-date-picker-icon-color`: Specifies the component's
in-field input icon color.
`--calcite-input-date-picker-icon-color-hover`: Specifies the
component's in-field input icon color on hover.
`--calcite-input-date-picker-actions-icon-color`: Specifies the
component's actions icon color.
`--calcite-input-date-picker-actions-icon-color-hover`: Specifies the
component's actions icon color on hover.
`--calcite-input-date-picker-calendar-icon-color`: Specifies the
component's calendar icon color.
`--calcite-input-date-picker-calendar-icon-color-hover`: Specifies the
component's calendar icon color.
`--calcite-input-date-picker-background-color`: Specifies the
component's input background color.
`--calcite-input-date-picker-calendar-actions-background-color`:
Specifies the background color of actions of the calendar.
`--calcite-input-date-picker-calendar-actions-background-color-hover`:
Specifies the background color of actions of the calendar when hovered.
`--calcite-input-date-picker-calendar-actions-background-color-press`:
Specifies the background color of actions of the calendar when pressed.
`--calcite-input-date-picker-calendar-selected-background-color`:
Specifies the background color of selected day and day range of the
calendar.
`--calcite-input-calendar-day-background-color`: Specifies the
background color of day of the calendar.
`--calcite-input-date-picker-calendar-day-background-color-hover`:
Specifies the background color of day of the calendar when hovered.

`--calcite-input-date-picker-calendar-day-outside-range-background-color-hover`:
Specifies the background color of day's outside current range of the
component's date-picker when hovered.
`--calcite-input-date-picker-corner-radius`: Specifies the component's
input corner radius.
`--calcite-input-date-picker-calendar-corner-radius`: Specifies the
component's calendar border radius.
`--calcite-input-date-picker-text-color`: Specifies the component's
input text color.
`--calcite-input-date-picker-placeholder-text-color`: Specifies the
component's input placeholder text color.
`--calcite-input-date-picker-calendar-actions-text-color`: Specifies the
text color of the component's calendar actions.
`--calcite-input-date-picker-calendar-actions-text-color-press`:
Specifies the text color of the component's calendar actions when
pressed.
`--calcite-input-date-picker-calendar-text-color`: Specifies the text
color of the component's calendar week, year & suffix.
`--calcite-input-date-picker-calendar-month-select-font-size`: Specifies
the font size of month select of the component's date-picker.
`--calcite-input-date-picker-calendar-month-select-text-color`:
Specifies the text color of month select of the component's date-picker.
`--calcite-input-date-picker-calendar-day-text-color`: Specifies the
text color of day of the component's date-picker.
`--calcite-input-date-picker-calendar-day-text-color-hover`: Specifies
the text color of day of the component's date-picker when hovered.
`--calcite-input-date-picker-calendar-current-day-text-color`: Specifies
the text color of current day of the component's date-picker.
`--calcite-input-date-picker-calendar-day-text-color-selected`:
Specifies the text color of selected day of the component's date-picker.
`--calcite-input-date-picker-calendar-day-range-text-color`: Specifies
the text color of select day range of the component's date-picker.

`--calcite-input-date-picker-calendar-day-outside-range-text-color-hover`:
Specifies the text color of day's outside current range of the
component's date-picker when hovered.
`--calcite-input-date-picker-calendar-border-color`: Specifies the
component's calendar border color.
`--calcite-input-date-picker-calendar-range-divider-color`: Specifies
the divider color between the component's date-picker calendars when
benelan added a commit that referenced this pull request Sep 16, 2025
🤖 I have created a release *beep* *boop*
---


<details><summary>@esri/calcite-design-tokens: 3.2.0</summary>

##
[3.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@3.1.0...@esri/calcite-design-tokens@3.2.0)
(2025-09-16)


### Features

* **tokens:** Add foreground-highlight and update referenced core tokens
([#12266](#12266))
([cf44406](cf44406))
* **tokens:** Add missing line height tokens
([#12798](#12798))
([3bf135d](3bf135d))


### Bug Fixes

* Remove breakpoint tokens from semantic output
([#12397](#12397))
([0f22083](0f22083))
* **tokens:** Restore `--calcite-color-focus`
([#11960](#11960))
([0432a20](0432a20))
* **tokens:** Update `--calcite-font-line-height-relative` to resolve as
a valid value
([#12828](#12828))
([458f99d](458f99d))
</details>

<details><summary>@esri/calcite-tailwind-preset: 1.0.1</summary>

##
[1.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-tailwind-preset@1.0.0...@esri/calcite-tailwind-preset@1.0.1)
(2025-09-16)


### Bug Fixes

* Ensure transition-duration is used in Tailwind utils
([#12167](#12167))
([fc842ee](fc842ee))
* **tokens:** Restore `--calcite-color-focus`
([#11960](#11960))
([0432a20](0432a20))


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-design-tokens bumped from 3.2.0-next.14 to 3.2.0
  * peerDependencies
    * @esri/calcite-design-tokens bumped from ^3.0.2-next.8 to ^3.2.0
</details>

<details><summary>@esri/calcite-ui-icons: 4.3.0</summary>

##
[4.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@4.2.0...@esri/calcite-ui-icons@4.3.0)
(2025-09-16)


### Features

* Add arrow left 10 and arrow right 10
([#12541](#12541))
([dec51d6](dec51d6))
* Add catalog and magic wand
([#12596](#12596))
([67daada](67daada))
* Add content side by side right
([#12350](#12350))
([95a1c0b](95a1c0b))
* Add dimensions centered
([#12483](#12483))
([4c0876e](4c0876e))
* Add filled envelope icon
([#12654](#12654))
([b2fb080](b2fb080))
* Add internal label across form components
([#12499](#12499))
([6b38dd8](6b38dd8))
* Add js-api icons
([#12435](#12435))
([ca8aad1](ca8aad1))
* Add layer 3d
([#12819](#12819))
([fb5db21](fb5db21))
* Add location local
([#12406](#12406))
([0310075](0310075))
* Add person magnifying glass
([#12509](#12509))
([99ee95a](99ee95a))
* Add rtl of list icons
([#12685](#12685))
([1c95c2b](1c95c2b))
* Add select row icon
([#12768](#12768))
([7f3b7a7](7f3b7a7))
* Add shopping-cart-f, shopping cart plus, carousel frames
([#12758](#12758))
([370aaf0](370aaf0))
* Add spike, browser, tapestry and transfer icons
([#12251](#12251))
([ad01162](ad01162))
* Add subheading icons
([#12303](#12303))
([d965e4f](d965e4f))
* Added camera sensor icons
([#12738](#12738))
([0a70c9f](0a70c9f))
* Added navigation icons
([#12323](#12323))
([9e2bb42](9e2bb42))
* Schema report, video, classification, and advance drawing tools icons
([#12679](#12679))
([7be3f5c](7be3f5c))


### Bug Fixes

* Select row icon
([#12793](#12793))
([5b3788d](5b3788d))
* Tapestry icons
([#12315](#12315))
([7fbedfc](7fbedfc))
</details>

<details><summary>@esri/eslint-plugin-calcite-components:
2.0.3</summary>

##
[2.0.3](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@2.0.2...@esri/eslint-plugin-calcite-components@2.0.3)
(2025-09-16)

</details>

<details><summary>@esri/calcite-components: 3.3.0</summary>

##
[3.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@3.2.1...@esri/calcite-components@3.3.0)
(2025-09-16)


### Features

* **accordion-item:** Add content-start and content-end slots
([#12849](#12849))
([67a9509](67a9509))
* **accordion-item:** Add headingLevel property
([#12240](#12240))
([5f02b5c](5f02b5c))
* **accordion-item:** Add title to expand icon
([#12657](#12657))
([e691a3a](e691a3a))
* **action:** Add type property
([#12624](#12624))
([c9dd7d9](c9dd7d9))
* **action:** Make actions fill full width of parent
([#12047](#12047))
([7b9dfd7](7b9dfd7))
* Add focus options support
([#12555](#12555))
([58148cc](58148cc))
* Add internal label across form components
([#12499](#12499))
([6b38dd8](6b38dd8))
* **autocomplete-item:** Add `calciteAutocompleteItemSelect` event
([#12655](#12655))
([61dcbfa](61dcbfa))
* **block, block-section, block-group:** Add scale property
([#12382](#12382))
([28b9da8](28b9da8))
* **block:** Add --calcite-block-content-space css token
([#12704](#12704))
([7f1167a](7f1167a))
* **button:** Add css property for shadow
([#12603](#12603))
([12bfdae](12bfdae))
* **carousel:** Add component tokens
([#12474](#12474))
([385a83b](385a83b))
* **checkbox:** Enhance component's interactivity states
([#12207](#12207))
([f00e45b](f00e45b))
* **color-picker:** Add component tokens
([#12862](#12862))
([5dffbf3](5dffbf3))
* **color-picker:** Support hiding color-field
([#12484](#12484))
([c4e42b6](c4e42b6))
* **combobox:** Add `--calcite-combobox-divider-color`
([#12223](#12223))
([9d5b55d](9d5b55d))
* **combobox:** Provide context when filtering and there are no matching
results
([#12525](#12525))
([e1b32b9](e1b32b9))
* **combobox:** Single-persist mode ignores clearDisabled
([#12757](#12757))
([ce36c6c](ce36c6c))
* **date-picker, input-date-picker:** Add `calendars` property to
support one month view in range
([#12479](#12479))
([f5357c6](f5357c6))
* **dialog, modal, popover, sheet:** Add `setReturnFocus` to
`focusTrapOptions`
([#12513](#12513))
([50a371a](50a371a))
* **dialog, panel, flow-item:** Add `icon` and `iconFlipRtl` properties
([#12176](#12176))
([e03222c](e03222c))
* **dialog:** Add component tokens
([#12553](#12553))
([0088f2e](0088f2e))
* Emit `expanded`/`collapsed` end-state events for expandable components
([#12580](#12580))
([e0e686b](e0e686b))
* **input-date-picker:** Add component tokens
([#11734](#11734))
([a3c152a](a3c152a))
* **input-number, input-text:** Add center alignment
([#12695](#12695))
([6e0739b](6e0739b))
* **input-text:** Add component tokens
([#12242](#12242))
([9edff0c](9edff0c))
* **input-time-picker:** Add component tokens
([#12874](#12874))
([5134270](5134270))
* **input:** Add title to clear button
([#12807](#12807))
([6b160c0](6b160c0))
* **label:** Add new layout "block"
([#12552](#12552))
([66c4b7b](66c4b7b))
* **list, block-group, sort-handle:** Add sortDisabled property to
prevent reordering
([#12615](#12615))
([2a41b0f](2a41b0f))
* **list, block-group, sort-handle:** Add support for cloning dragged
items
([#12628](#12628))
([2f0246a](2f0246a))
* Make version console message easier to disable
([#12194](#12194))
([b2f8ddf](b2f8ddf))
* **panel:** Add `collapseDirection` as public property
([#12813](#12813))
([9675814](9675814))
* **popover:** Add token for specifying the max width
([#12516](#12516))
([bb8dac9](bb8dac9))
* **radio-button:** Enhance component's interactivity states
([#12169](#12169))
([5999bac](5999bac))
* **select:** Add component tokens
([#12812](#12812))
([25de1ca](25de1ca))
* **split-button:** Add component tokens
([#12756](#12756))
([82f107e](82f107e))
* **stepper-item:** Improve single selection icon color
([#12436](#12436))
([c2c6037](c2c6037))
* **swatch, swatch-group:** Add new components
([#12584](#12584))
([6d6d3d1](6d6d3d1))
* **swatch:** Use label for visual title
([#12841](#12841))
([7dbbc91](7dbbc91))
* **table, table-row, table-header, table-cell:** Add component tokens
([#11770](#11770))
([8a0168c](8a0168c))
* **time-picker:** Apply consistent styling for floating elements
([#12467](#12467))
([c1d13ba](c1d13ba))
* **time-picker:** Apply rounded corners inside popover
([#12502](#12502))
([3ad12dd](3ad12dd))
* **tokens:** Add missing line height tokens
([#12798](#12798))
([3bf135d](3bf135d))
* **tooltip:** Add css custom property for setting max size
([#12865](#12865))
([83911fc](83911fc))


### Bug Fixes

* **accordion-item:** Fix font size for headingLevel property
([#12269](#12269))
([448880d](448880d))
* **action-menu:** Ensure children are ready before setting a11y
attributes
([#12533](#12533))
([1f83000](1f83000))
* **action:** Fix applied tokens when active
([#12686](#12686))
([d58901e](d58901e))
* **autocomplete:** Announce result to screen readers using aria-live
attribute
([#12443](#12443))
([0988e98](0988e98))
* **block:** Allow customizing heading text color when expanded &
deprecate tokens
([#12777](#12777))
([98b4348](98b4348))
* **block:** Icon-end aligns with header container when collapsible is
false
([#12784](#12784))
([4565b90](4565b90))
* **block:** No longer renders an empty header
([#12801](#12801))
([9904507](9904507))
* **card:** Ensure `setFocus` focuses card when it contains nested
interactive children
([#12724](#12724))
([2fbcd99](2fbcd99))
* **chip:** Adjust interactivity states enhancements
([#12329](#12329))
([608c006](608c006))
* **color-picker:** Adjust component spacing
([#12767](#12767))
([4325d8b](4325d8b))
* **color-picker:** Ensure channel values are rounded
([#12239](#12239))
([ba4e470](ba4e470))
* **combobox:** Adjust padding for no-matches context
([#12781](#12781))
([e309828](e309828))
* **date-picker:** Honor `minAsDate` & `maxAsDate` when set
([#12706](#12706))
([de8afed](de8afed))
* **date-picker:** Improve color contrast for days
([#12705](#12705))
([0930c30](0930c30))
* **dialog, flow-item, panel:** Fix `iconFlipRtl` not working in RTL
contexts
([#12668](#12668))
([b2c22c9](b2c22c9))
* **dialog:** Ensure beforeClose is called once and fix animation on
dialog
([#12152](#12152))
([0898b7c](0898b7c))
* **dialog:** Fix for corner radius token
([#12859](#12859))
([ee05c4d](ee05c4d))
* **dialog:** Restrict resizing once minimum size has been reached
([#12175](#12175))
([cd03d14](cd03d14))
* Emit `beforeOpen` and `beforeClose` immediately on toggle
([#11965](#11965))
([5955929](5955929))
* Ensure initial transitions are applied consistently
([#12392](#12392))
([a82aeb2](a82aeb2))
* Ensure transition-duration is used in Tailwind utils
([#12167](#12167))
([fc842ee](fc842ee))
* **input-date-picker:** Announces the purpose of each input in the
range mode
([#12238](#12238))
([c64169e](c64169e))
* **input-date-picker:** No longer close when non-interactive areas are
clicked in Safari
([#12139](#12139))
([69016b1](69016b1))
* **input-date-picker:** Update start & end date correctly when
`proximity-selection-disabled` is true
([#12681](#12681))
([67336ab](67336ab))
* **input-number:** Add token to customize icon color
([#12414](#12414))
([63c68b8](63c68b8))
* **input-time-picker:** Add label property
([#12276](#12276))
([2e06dd1](2e06dd1))
* **input-time-picker:** Apply aria-label and aria-controls attributes
correctly to support NVDA and JAWS
([#12312](#12312))
([ffd0cd7](ffd0cd7))
* **input-time-zone:** Address code review comments
([#12293](#12293))
([c86df52](c86df52))
* **input-time-zone:** Display 'city, country' when control closed and
value set programatically
([#12252](#12252))
([684062e](684062e))
* **input-time-zone:** Fix selected time zone label flicker and scroll
delay for region mode
([#12384](#12384))
([f0b67f4](f0b67f4))
* **input, input-number, input-text:** Ensure overlay does not obscure
input icon
([#12716](#12716))
([926826f](926826f))
* **input, input-number, input-text:** Stretch the height of slot
container to match with component
([#12339](#12339))
([3d24364](3d24364))
* **input:** Do not obscure picker button with type=datetime-local
([#12081](#12081))
([db4bd12](db4bd12))
* **link:** Emit click event on enter key when the component doesn't
have href defined
([#12191](#12191))
([409915c](409915c))
* **list, block-group:** Emit calciteListOrderChange on destination when
adding or moving from the menu
([#12799](#12799))
([916f081](916f081))
* **list, block-group:** Fix canPull when cloning and "Add to" menu on
block-group
([#12741](#12741))
([78b15e2](78b15e2))
* **list, block-group:** Sort handle menu should respond to new lists or
label changes
([#12848](#12848))
([df453bb](df453bb))
* **list, block-group:** Update menu item labels and call `canPut` /
`canPull` to filter items before opening a sort handle menu
([#12487](#12487))
([9c9ff9c](9c9ff9c))
* **list, block-group:** Update sort handle move items before dropdown
menu is opened
([#12722](#12722))
([298a7f1](298a7f1))
* **list:** Added scrim for empty list
([#12595](#12595))
([7a5cc96](7a5cc96))
* **list:** Fix visual artifacts when you initiate a drag operation with
the drag handle menu open
([#12611](#12611))
([b317e50](b317e50))
* **list:** Prevent drag flickering while sorting
([#12631](#12631))
([accef27](accef27))
* Map `bs` locale to `sr-Latn-CS`
([#12566](#12566))
([298a7ba](298a7ba))
* **pagination:** Prevent invalid start-item and set default to 1
([#12557](#12557))
([494e33f](494e33f))
* **pagination:** Restore original default value for totalItems
([#12569](#12569))
([e65b461](e65b461))
* **panel:** Alert slot should not take up any height
([#12802](#12802))
([c51b968](c51b968))
* **panel:** Prevent child panels from closing parent panels
([#12646](#12646))
([15da3ce](15da3ce))
* **popover, tooltip:** Do not close when a click was initiated inside
the component
([#12543](#12543))
([a35e96a](a35e96a))
* **popover, tooltip:** Open when there is selected text on the page
([#12597](#12597))
([4274d65](4274d65))
* **radio-button:** Fix navigation with disabled buttons
([#12514](#12514))
([d1b1ccb](d1b1ccb))
* **segmented-control:** Avoid changing focus from programmatic item
selection
([#12181](#12181))
([e3be05e](e3be05e))
* **select:** Fix error thrown when component is removed before
initialization
([#12630](#12630))
([ec661db](ec661db))
* **shell-center-row:** Fix rendering tied to named-slot content
([#10451](#10451))
([5b15a02](5b15a02))
* **shell-panel:** Allow content to extend the full height of the panel
([#12860](#12860))
([52bed19](52bed19))
* **shell-panel:** Restore resized size after expanding
([#12691](#12691))
([0779250](0779250))
* **slider:** Allow range handle dragging in either direction when both
handles share the same position
([#12527](#12527))
([d9c7bfa](d9c7bfa))
* **slider:** Remove fill color when dragged handle is released and no
longer has focus
([#12511](#12511))
([5db048f](5db048f))
* **stepper-item:** Remove margin when slotted content is empty
([#12298](#12298))
([6b1d099](6b1d099))
* **stepper:** Disallow navigation to disabled items
([#12217](#12217))
([cbe160f](cbe160f))
* **swatch:** Ensure corner radius css property is correctly applied
([#12855](#12855))
([50405aa](50405aa))
* **title:** Apply alignment on slotted content
([#12451](#12451))
([93b470a](93b470a))
* **tokens:** Restore `--calcite-color-focus`
([#11960](#11960))
([0432a20](0432a20))

### Deprecations

* **combobox:** Remove `--calcite-combobox-item-border-color`
([9d5b55d](9d5b55d))
* **label:** Deprecate `"default"` layout value.
([66c4b7b](66c4b7b))


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-ui-icons bumped from 4.3.0-next.23 to 4.3.0
  * devDependencies
    * @esri/calcite-design-tokens bumped from 3.2.0-next.14 to 3.2.0
    * @esri/calcite-tailwind-preset bumped from 1.0.1-next.18 to 1.0.1
* @esri/eslint-plugin-calcite-components bumped from 2.0.3-next.5 to
2.0.3
</details>

<details><summary>@esri/calcite-components-react: 3.3.0</summary>

##
[3.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@3.2.1...@esri/calcite-components-react@3.3.0)
(2025-09-16)

### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 3.3.0-next.111 to 3.3.0
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Ben Elan <no-reply@benelan.dev>
benelan added a commit that referenced this pull request Sep 18, 2025
🤖 I have created a release *beep* *boop*
---

<details><summary>@esri/calcite-design-tokens: 3.2.0</summary>

[3.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@3.1.0...@esri/calcite-design-tokens@3.2.0)
(2025-09-16)

* **tokens:** Add foreground-highlight and update referenced core tokens
([#12266](#12266))
([cf44406](cf44406))
* **tokens:** Add missing line height tokens
([#12798](#12798))
([3bf135d](3bf135d))

* Remove breakpoint tokens from semantic output
([#12397](#12397))
([0f22083](0f22083))
* **tokens:** Restore `--calcite-color-focus`
([#11960](#11960))
([0432a20](0432a20))
* **tokens:** Update `--calcite-font-line-height-relative` to resolve as
a valid value
([#12828](#12828))
([458f99d](458f99d))
</details>

<details><summary>@esri/calcite-tailwind-preset: 1.0.1</summary>

[1.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-tailwind-preset@1.0.0...@esri/calcite-tailwind-preset@1.0.1)
(2025-09-16)

* Ensure transition-duration is used in Tailwind utils
([#12167](#12167))
([fc842ee](fc842ee))
* **tokens:** Restore `--calcite-color-focus`
([#11960](#11960))
([0432a20](0432a20))

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-design-tokens bumped from 3.2.0-next.14 to 3.2.0
  * peerDependencies
    * @esri/calcite-design-tokens bumped from ^3.0.2-next.8 to ^3.2.0
</details>

<details><summary>@esri/calcite-ui-icons: 4.3.0</summary>

[4.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@4.2.0...@esri/calcite-ui-icons@4.3.0)
(2025-09-16)

* Add arrow left 10 and arrow right 10
([#12541](#12541))
([dec51d6](dec51d6))
* Add catalog and magic wand
([#12596](#12596))
([67daada](67daada))
* Add content side by side right
([#12350](#12350))
([95a1c0b](95a1c0b))
* Add dimensions centered
([#12483](#12483))
([4c0876e](4c0876e))
* Add filled envelope icon
([#12654](#12654))
([b2fb080](b2fb080))
* Add internal label across form components
([#12499](#12499))
([6b38dd8](6b38dd8))
* Add js-api icons
([#12435](#12435))
([ca8aad1](ca8aad1))
* Add layer 3d
([#12819](#12819))
([fb5db21](fb5db21))
* Add location local
([#12406](#12406))
([0310075](0310075))
* Add person magnifying glass
([#12509](#12509))
([99ee95a](99ee95a))
* Add rtl of list icons
([#12685](#12685))
([1c95c2b](1c95c2b))
* Add select row icon
([#12768](#12768))
([7f3b7a7](7f3b7a7))
* Add shopping-cart-f, shopping cart plus, carousel frames
([#12758](#12758))
([370aaf0](370aaf0))
* Add spike, browser, tapestry and transfer icons
([#12251](#12251))
([ad01162](ad01162))
* Add subheading icons
([#12303](#12303))
([d965e4f](d965e4f))
* Added camera sensor icons
([#12738](#12738))
([0a70c9f](0a70c9f))
* Added navigation icons
([#12323](#12323))
([9e2bb42](9e2bb42))
* Schema report, video, classification, and advance drawing tools icons
([#12679](#12679))
([7be3f5c](7be3f5c))

* Select row icon
([#12793](#12793))
([5b3788d](5b3788d))
* Tapestry icons
([#12315](#12315))
([7fbedfc](7fbedfc))
</details>

<details><summary>@esri/eslint-plugin-calcite-components:
2.0.3</summary>

[2.0.3](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@2.0.2...@esri/eslint-plugin-calcite-components@2.0.3)
(2025-09-16)

</details>

<details><summary>@esri/calcite-components: 3.3.0</summary>

[3.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@3.2.1...@esri/calcite-components@3.3.0)
(2025-09-16)

* **accordion-item:** Add content-start and content-end slots
([#12849](#12849))
([67a9509](67a9509))
* **accordion-item:** Add headingLevel property
([#12240](#12240))
([5f02b5c](5f02b5c))
* **accordion-item:** Add title to expand icon
([#12657](#12657))
([e691a3a](e691a3a))
* **action:** Add type property
([#12624](#12624))
([c9dd7d9](c9dd7d9))
* **action:** Make actions fill full width of parent
([#12047](#12047))
([7b9dfd7](7b9dfd7))
* Add focus options support
([#12555](#12555))
([58148cc](58148cc))
* Add internal label across form components
([#12499](#12499))
([6b38dd8](6b38dd8))
* **autocomplete-item:** Add `calciteAutocompleteItemSelect` event
([#12655](#12655))
([61dcbfa](61dcbfa))
* **block, block-section, block-group:** Add scale property
([#12382](#12382))
([28b9da8](28b9da8))
* **block:** Add --calcite-block-content-space css token
([#12704](#12704))
([7f1167a](7f1167a))
* **button:** Add css property for shadow
([#12603](#12603))
([12bfdae](12bfdae))
* **carousel:** Add component tokens
([#12474](#12474))
([385a83b](385a83b))
* **checkbox:** Enhance component's interactivity states
([#12207](#12207))
([f00e45b](f00e45b))
* **color-picker:** Add component tokens
([#12862](#12862))
([5dffbf3](5dffbf3))
* **color-picker:** Support hiding color-field
([#12484](#12484))
([c4e42b6](c4e42b6))
* **combobox:** Add `--calcite-combobox-divider-color`
([#12223](#12223))
([9d5b55d](9d5b55d))
* **combobox:** Provide context when filtering and there are no matching
results
([#12525](#12525))
([e1b32b9](e1b32b9))
* **combobox:** Single-persist mode ignores clearDisabled
([#12757](#12757))
([ce36c6c](ce36c6c))
* **date-picker, input-date-picker:** Add `calendars` property to
support one month view in range
([#12479](#12479))
([f5357c6](f5357c6))
* **dialog, modal, popover, sheet:** Add `setReturnFocus` to
`focusTrapOptions`
([#12513](#12513))
([50a371a](50a371a))
* **dialog, panel, flow-item:** Add `icon` and `iconFlipRtl` properties
([#12176](#12176))
([e03222c](e03222c))
* **dialog:** Add component tokens
([#12553](#12553))
([0088f2e](0088f2e))
* Emit `expanded`/`collapsed` end-state events for expandable components
([#12580](#12580))
([e0e686b](e0e686b))
* **input-date-picker:** Add component tokens
([#11734](#11734))
([a3c152a](a3c152a))
* **input-number, input-text:** Add center alignment
([#12695](#12695))
([6e0739b](6e0739b))
* **input-text:** Add component tokens
([#12242](#12242))
([9edff0c](9edff0c))
* **input-time-picker:** Add component tokens
([#12874](#12874))
([5134270](5134270))
* **input:** Add title to clear button
([#12807](#12807))
([6b160c0](6b160c0))
* **label:** Add new layout "block"
([#12552](#12552))
([66c4b7b](66c4b7b))
* **list, block-group, sort-handle:** Add sortDisabled property to
prevent reordering
([#12615](#12615))
([2a41b0f](2a41b0f))
* **list, block-group, sort-handle:** Add support for cloning dragged
items
([#12628](#12628))
([2f0246a](2f0246a))
* Make version console message easier to disable
([#12194](#12194))
([b2f8ddf](b2f8ddf))
* **panel:** Add `collapseDirection` as public property
([#12813](#12813))
([9675814](9675814))
* **popover:** Add token for specifying the max width
([#12516](#12516))
([bb8dac9](bb8dac9))
* **radio-button:** Enhance component's interactivity states
([#12169](#12169))
([5999bac](5999bac))
* **select:** Add component tokens
([#12812](#12812))
([25de1ca](25de1ca))
* **split-button:** Add component tokens
([#12756](#12756))
([82f107e](82f107e))
* **stepper-item:** Improve single selection icon color
([#12436](#12436))
([c2c6037](c2c6037))
* **swatch, swatch-group:** Add new components
([#12584](#12584))
([6d6d3d1](6d6d3d1))
* **swatch:** Use label for visual title
([#12841](#12841))
([7dbbc91](7dbbc91))
* **table, table-row, table-header, table-cell:** Add component tokens
([#11770](#11770))
([8a0168c](8a0168c))
* **time-picker:** Apply consistent styling for floating elements
([#12467](#12467))
([c1d13ba](c1d13ba))
* **time-picker:** Apply rounded corners inside popover
([#12502](#12502))
([3ad12dd](3ad12dd))
* **tokens:** Add missing line height tokens
([#12798](#12798))
([3bf135d](3bf135d))
* **tooltip:** Add css custom property for setting max size
([#12865](#12865))
([83911fc](83911fc))

* **accordion-item:** Fix font size for headingLevel property
([#12269](#12269))
([448880d](448880d))
* **action-menu:** Ensure children are ready before setting a11y
attributes
([#12533](#12533))
([1f83000](1f83000))
* **action:** Fix applied tokens when active
([#12686](#12686))
([d58901e](d58901e))
* **autocomplete:** Announce result to screen readers using aria-live
attribute
([#12443](#12443))
([0988e98](0988e98))
* **block:** Allow customizing heading text color when expanded &
deprecate tokens
([#12777](#12777))
([98b4348](98b4348))
* **block:** Icon-end aligns with header container when collapsible is
false
([#12784](#12784))
([4565b90](4565b90))
* **block:** No longer renders an empty header
([#12801](#12801))
([9904507](9904507))
* **card:** Ensure `setFocus` focuses card when it contains nested
interactive children
([#12724](#12724))
([2fbcd99](2fbcd99))
* **chip:** Adjust interactivity states enhancements
([#12329](#12329))
([608c006](608c006))
* **color-picker:** Adjust component spacing
([#12767](#12767))
([4325d8b](4325d8b))
* **color-picker:** Ensure channel values are rounded
([#12239](#12239))
([ba4e470](ba4e470))
* **combobox:** Adjust padding for no-matches context
([#12781](#12781))
([e309828](e309828))
* **date-picker:** Honor `minAsDate` & `maxAsDate` when set
([#12706](#12706))
([de8afed](de8afed))
* **date-picker:** Improve color contrast for days
([#12705](#12705))
([0930c30](0930c30))
* **dialog, flow-item, panel:** Fix `iconFlipRtl` not working in RTL
contexts
([#12668](#12668))
([b2c22c9](b2c22c9))
* **dialog:** Ensure beforeClose is called once and fix animation on
dialog
([#12152](#12152))
([0898b7c](0898b7c))
* **dialog:** Fix for corner radius token
([#12859](#12859))
([ee05c4d](ee05c4d))
* **dialog:** Restrict resizing once minimum size has been reached
([#12175](#12175))
([cd03d14](cd03d14))
* Emit `beforeOpen` and `beforeClose` immediately on toggle
([#11965](#11965))
([5955929](5955929))
* Ensure initial transitions are applied consistently
([#12392](#12392))
([a82aeb2](a82aeb2))
* Ensure transition-duration is used in Tailwind utils
([#12167](#12167))
([fc842ee](fc842ee))
* **input-date-picker:** Announces the purpose of each input in the
range mode
([#12238](#12238))
([c64169e](c64169e))
* **input-date-picker:** No longer close when non-interactive areas are
clicked in Safari
([#12139](#12139))
([69016b1](69016b1))
* **input-date-picker:** Update start & end date correctly when
`proximity-selection-disabled` is true
([#12681](#12681))
([67336ab](67336ab))
* **input-number:** Add token to customize icon color
([#12414](#12414))
([63c68b8](63c68b8))
* **input-time-picker:** Add label property
([#12276](#12276))
([2e06dd1](2e06dd1))
* **input-time-picker:** Apply aria-label and aria-controls attributes
correctly to support NVDA and JAWS
([#12312](#12312))
([ffd0cd7](ffd0cd7))
* **input-time-zone:** Address code review comments
([#12293](#12293))
([c86df52](c86df52))
* **input-time-zone:** Display 'city, country' when control closed and
value set programatically
([#12252](#12252))
([684062e](684062e))
* **input-time-zone:** Fix selected time zone label flicker and scroll
delay for region mode
([#12384](#12384))
([f0b67f4](f0b67f4))
* **input, input-number, input-text:** Ensure overlay does not obscure
input icon
([#12716](#12716))
([926826f](926826f))
* **input, input-number, input-text:** Stretch the height of slot
container to match with component
([#12339](#12339))
([3d24364](3d24364))
* **input:** Do not obscure picker button with type=datetime-local
([#12081](#12081))
([db4bd12](db4bd12))
* **link:** Emit click event on enter key when the component doesn't
have href defined
([#12191](#12191))
([409915c](409915c))
* **list, block-group:** Emit calciteListOrderChange on destination when
adding or moving from the menu
([#12799](#12799))
([916f081](916f081))
* **list, block-group:** Fix canPull when cloning and "Add to" menu on
block-group
([#12741](#12741))
([78b15e2](78b15e2))
* **list, block-group:** Sort handle menu should respond to new lists or
label changes
([#12848](#12848))
([df453bb](df453bb))
* **list, block-group:** Update menu item labels and call `canPut` /
`canPull` to filter items before opening a sort handle menu
([#12487](#12487))
([9c9ff9c](9c9ff9c))
* **list, block-group:** Update sort handle move items before dropdown
menu is opened
([#12722](#12722))
([298a7f1](298a7f1))
* **list:** Added scrim for empty list
([#12595](#12595))
([7a5cc96](7a5cc96))
* **list:** Fix visual artifacts when you initiate a drag operation with
the drag handle menu open
([#12611](#12611))
([b317e50](b317e50))
* **list:** Prevent drag flickering while sorting
([#12631](#12631))
([accef27](accef27))
* Map `bs` locale to `sr-Latn-CS`
([#12566](#12566))
([298a7ba](298a7ba))
* **pagination:** Prevent invalid start-item and set default to 1
([#12557](#12557))
([494e33f](494e33f))
* **pagination:** Restore original default value for totalItems
([#12569](#12569))
([e65b461](e65b461))
* **panel:** Alert slot should not take up any height
([#12802](#12802))
([c51b968](c51b968))
* **panel:** Prevent child panels from closing parent panels
([#12646](#12646))
([15da3ce](15da3ce))
* **popover, tooltip:** Do not close when a click was initiated inside
the component
([#12543](#12543))
([a35e96a](a35e96a))
* **popover, tooltip:** Open when there is selected text on the page
([#12597](#12597))
([4274d65](4274d65))
* **radio-button:** Fix navigation with disabled buttons
([#12514](#12514))
([d1b1ccb](d1b1ccb))
* **segmented-control:** Avoid changing focus from programmatic item
selection
([#12181](#12181))
([e3be05e](e3be05e))
* **select:** Fix error thrown when component is removed before
initialization
([#12630](#12630))
([ec661db](ec661db))
* **shell-center-row:** Fix rendering tied to named-slot content
([#10451](#10451))
([5b15a02](5b15a02))
* **shell-panel:** Allow content to extend the full height of the panel
([#12860](#12860))
([52bed19](52bed19))
* **shell-panel:** Restore resized size after expanding
([#12691](#12691))
([0779250](0779250))
* **slider:** Allow range handle dragging in either direction when both
handles share the same position
([#12527](#12527))
([d9c7bfa](d9c7bfa))
* **slider:** Remove fill color when dragged handle is released and no
longer has focus
([#12511](#12511))
([5db048f](5db048f))
* **stepper-item:** Remove margin when slotted content is empty
([#12298](#12298))
([6b1d099](6b1d099))
* **stepper:** Disallow navigation to disabled items
([#12217](#12217))
([cbe160f](cbe160f))
* **swatch:** Ensure corner radius css property is correctly applied
([#12855](#12855))
([50405aa](50405aa))
* **title:** Apply alignment on slotted content
([#12451](#12451))
([93b470a](93b470a))
* **tokens:** Restore `--calcite-color-focus`
([#11960](#11960))
([0432a20](0432a20))

* **combobox:** Remove `--calcite-combobox-item-border-color`
([9d5b55d](9d5b55d))
* **label:** Deprecate `"default"` layout value.
([66c4b7b](66c4b7b))

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-ui-icons bumped from 4.3.0-next.23 to 4.3.0
  * devDependencies
    * @esri/calcite-design-tokens bumped from 3.2.0-next.14 to 3.2.0
    * @esri/calcite-tailwind-preset bumped from 1.0.1-next.18 to 1.0.1
* @esri/eslint-plugin-calcite-components bumped from 2.0.3-next.5 to
2.0.3
</details>

<details><summary>@esri/calcite-components-react: 3.3.0</summary>

[3.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@3.2.1...@esri/calcite-components-react@3.3.0)
(2025-09-16)

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 3.3.0-next.111 to 3.3.0
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Ben Elan <no-reply@benelan.dev>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement Issues tied to a new feature or request. skip visual snapshots Pull requests that do not need visual regression testing.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants