Skip to content

fix(input-date-picker): no longer close when non-interactive areas are clicked in Safari#12139

Merged
anveshmekala merged 11 commits intodevfrom
anveshmekala/10113-fix-input-date-picker-inconsistent-input
Jun 18, 2025
Merged

fix(input-date-picker): no longer close when non-interactive areas are clicked in Safari#12139
anveshmekala merged 11 commits intodevfrom
anveshmekala/10113-fix-input-date-picker-inconsistent-input

Conversation

@anveshmekala
Copy link
Copy Markdown
Contributor

@anveshmekala anveshmekala commented May 13, 2025 •
edited
Loading

Related Issue: #11955

Summary

No longer close input-date-picker in safari when non-interactive areas are clicked

@github-actions github-actions Bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label May 13, 2025
@anveshmekala anveshmekala changed the title fix(input-date-picker): no longer close date-picker in Safari when non-interactive areas are clicked fix(input-date-picker): no longer close when non-interactive areas are clicked in Safari May 13, 2025
anveshmekala
anveshmekala commented May 13, 2025
View reviewed changes
Comment thread packages/calcite-components/src/components/date-picker/date-picker.tsx
//#region Static Members

static override shadowRootOptions = { mode: "open" as const, delegatesFocus: true };

Copy link
Copy Markdown
Contributor Author

@anveshmekala anveshmekala May 13, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

delegatesFocus is causing issue in Safari to focus the first focusable element while clicking on non-interactive areas. date-picker-month-header/date-picker-month didn't enabled delegatesFocus, hence the focus shifts on to body element which is inconsistent with Chrome.

Tested alternate solution of adding delegatesFocus onto date-picker-header & date-picker-header-month which resolves the bug & enables focusing disabled chevrons (which is a common use case with min/max props). Additionally, stray clicks could focus day's similar to #6462.

Proposing to remove delegatesFocus here & users can leverage setFocus( ) method instead of focus( ). This isn't a BREAKING CHANGE because datePicker.focus( ) is not working as expected in date-picker since the start (https://codepen.io/anvesh-mekala/pen/XJJoKzQ goes back to 2.12.1 version).

Copy link
Copy Markdown
Member

@jcfranco jcfranco May 14, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Great breakdown. One more note, the recommended and supported way to focus our elements is to use setFocus and not focus.

Also, can you also double-check that blur and focus events occur as expected on date-picker? IIRC, delegatesFocus affects this in some cases. If so, this might be considered breaking.

Copy link
Copy Markdown
Contributor Author

@anveshmekala anveshmekala Jun 12, 2025

Choose a reason for hiding this comment

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

Removing delegatestFocus did invoke blur( ) when user clicks on the non-interactive areas of date-picker. To counter this, we need to add a wrapper container in date-picker which renders descendant elements with shadowDOM and delegatesFocus='false'.

When delegatesFocus is enabled, any clicks on non-interactive areas should focus the first focusable element as per spec .In date-picker case descendants of date-picker didn't enabled delegatesFocus and safari is invoking a blur event.

Did some digging into HTML spec for delegatesFocus and it doesn't completely answer the use-case we have here with deep nested shadow child elements without delegatesFocus to understand if the issue is browser related as it fails only in Safari. One comment did catch the eye which outlines the proposed spec & click( ) behavior has some leeway due to implementation differences and dependency on User Agent definition of click focusable element .

After some 🕵️‍♂️ & discussions, adding a wrapper container in date-picker would help resolve this issue to register the boundaries of descendants in date-picker. Though this solution doesn't depend on delegatesFocus, the root cause is related to delegatesFocus specification of clicking non-interactive areas with descendants delegatesFocus set to false in Safari.

We could always add delegatesFocus on to descendant elements and it will resolve the current issue. Additionally, any click on non-interactive area will shift the focus to the closest element hence causing a focus shift which can hard to reason for end-user.

@anveshmekala anveshmekala marked this pull request as ready for review May 14, 2025 15:35
@anveshmekala anveshmekala added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label May 14, 2025
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 24, 2025

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

@github-actions github-actions Bot added the Stale Issues or pull requests that have not had recent activity. label May 24, 2025
@anveshmekala anveshmekala removed the Stale Issues or pull requests that have not had recent activity. label Jun 2, 2025
@anveshmekala anveshmekala marked this pull request as draft June 12, 2025 23:12
@anveshmekala anveshmekala marked this pull request as ready for review June 18, 2025 19:19
@anveshmekala anveshmekala 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 Jun 18, 2025
driskull
driskull approved these changes Jun 18, 2025
View reviewed changes
Copy link
Copy Markdown
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

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

👍

Comment thread packages/calcite-components/src/components/date-picker/date-picker.tsx Outdated
@anveshmekala anveshmekala 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 Jun 18, 2025
@anveshmekala anveshmekala merged commit f3f1071 into dev Jun 18, 2025
14 checks passed
@anveshmekala anveshmekala deleted the anveshmekala/10113-fix-input-date-picker-inconsistent-input branch June 18, 2025 20:47
@github-actions github-actions Bot added this to the 2025-06-24 - Jun Milestone milestone Jun 18, 2025
benelan pushed a commit that referenced this pull request Sep 16, 2025
@anveshmekala @benelan
fix(input-date-picker): no longer close when non-interactive areas ar…
69016b1 
…e clicked in Safari (#12139)

**Related Issue:** #11955 

## Summary

No longer close input-date-picker in safari when non-interactive areas
are clicked
@calcite-admin calcite-admin mentioned this pull request Sep 16, 2025
Merged
benelan added a commit that referenced this pull request Sep 16, 2025
@calcite-admin @github-actions @benelan
chore: release main (#12887)
e5e8115 
🤖 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 benelan mentioned this pull request Sep 18, 2025
Merged
benelan added a commit that referenced this pull request Sep 18, 2025
@calcite-admin @github-actions @benelan
chore: release main (#12887)
57a44d4 
🤖 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

Reviewers

@driskull driskull driskull approved these changes

@jcfranco jcfranco Awaiting requested review from jcfranco

Assignees

@anveshmekala anveshmekala

Labels

bug Bug reports for broken functionality. Issues should include a reproduction of the bug. pr ready for visual snapshots Adding this label will run visual snapshot testing.

Projects

None yet

Milestone

2025-06-24 - Jun Milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@anveshmekala @jcfranco @driskull