calcite-design-system

1.0.0-beta.69 (2021-11-09)

Features

• filter: add filter component (#3449) (60a291b), closes #2208
• input: add enterkeyhint property to specify mobile enter key type (#3384) (7d88311)
• input: add inputmode property to specify mobile keyboard display (#3382) (f447158)

Bug Fixes

• card: fix focusing behavior when clicking on a checkbox label (#3386) (58dbc67)
• color-picker: avoid input/change events from firing when initializing color/value (#3399) (8167354), closes #2938
• combobox: Do not open dropdown when clicking on chip dismiss button (#3433) (449877d), closes #3103
• dropdown-item: match padding for RTL vs LTR and links vs non-links, consistent focus and hover states for all (#3422) (87f2eb4)
• input: number input controls now increment/decrement in a unifor… (#3340) (6c0971e)
• label: avoid associating labels to nested labelable components (#3424) (29dbc2d), closes #3344
• loader: alter loader styling to prevent no padding prop from overlapping #2145 (#3370) (1dae788), closes #3055
• panel, block: align panel header and block header x-spacing (#3330) (bca3625)
• slider: properly highlight min/max range on histogram #2914 (#3347) (37fad1e)
• switch: ensure checked/switched are in sync if either is set initially (#3400) (5359d3d), closes #3371
• tile: adjust the heading styling to be word wrapped including long string texts #3215 (#3361) (7048816), closes #3055
• tree-item: ensure items are visible when appended to expanded parent item (#3266) (f351018), closes #3134

⚠ BREAKING CHANGES

• action: deprecating outline appearance (#3263)

Features

• block: add loading status to block header (#3158) (6dea939)
• button: improve button form integration (#3287) (8ac115b)
• input: allow decimals by default and with integer steps (#3211) (8ff197b), closes #3184
• output-targets: add custom-elements output target (#3224) (69ba692)

Bug Fixes

• action: deprecating outline appearance (#3263) (b628ae9)
• action: fixing RTL display bugs by replacing getElementDir and RTL CSS classes with CSS logical properties (#3140) (6a1c904)
• alert: remove full width styling for mobile modes #2979 (#3274) (c7b2b2c)
• block-section: enable word wrap (#3156) (b1b6ff3)
• button: Setting the href property after init should update rendering (#3248) (cfd1f2a), closes #3222
• checkbox: style the current svg checkbox and interdeterminate icon to be bolder #2848 (#3250) (4503631), closes #3055 #3144 #3197 #3144 #3233
• combobox: add chevron icon at end of input regardless of selecti… (#3143) (0f78fa9), closes #3055 #3055
• combobox: ensure truncated text appears for longer strings when in fixed-width container (#3342) (1fb83a4)
• combox-item: adjust height of the item to be consistent respective to its scale size (#3144) (#3197) (731c555)
• dropdown: close on outside click when disable-close-on-select is true #3136 (#3227) (5874a9e)
• dropdown: remove preventDefault and stopPropagation on click event (#3231) (db8d222), closes #1709
• dropdown: Set the height of the active menu after render. #3234 (#3235) (34af14d)
• dropdown: watch maxItems for changes and update height of dropdown. (#3300) (84d86c2), closes #3295
• label: fix focus issue with nested labelable components (#3286) (f81dc5e)
• link: Setting the href property after init should update rendering (#3222) (eaab123), closes #2153 #3221
• notice: change the padding to be evenly distributed per slot chi… (#3183) (c698cf5)
• radio-group-item: move transition style up from icon to label co… (#3292) (b352d1b)
• slider: slider range value capped to max (#3262) (4a368b9)
• tooltip-manager: mousing out of the tooltip should close the tooltip. #3171 (#3192) (bd39057)

1.0.0-beta.67 (2021-10-12)

⚠ BREAKING CHANGES

• slider: The calciteSliderChange event will be emitted only if the value is changed on thumb release. To track the values as the thumb is dragged use the new calciteSliderInput event.

Features

• combobox: match combobox height with single selection mode (#3094) (4ba9a0d)
• slider: add InputEvent & modify ChangeEvent to emit only when value changes(#3004) (5dc03c0)
• tile-select: add calciteTileSelectChange event (#3187) (b381992)

Bug Fixes

• calcite-action: fixing center alignment appearance (#3128) (272153b)
• combobox: Correct display issues with single select and long strings. #3059 (#3114) (8a4deb3)
• dropdown: dropdown content no longer cut off when expanded inside tab (#3182) (b455c39)
• label: fix issue where clicking on a wrapped labelable component would not update its value correctly (#3161) (19de2b8), closes #3146
• tab, tab-nav: remove z-index so popover appears on top (#2965) (#3115) (2bfbe93)

⚠ BREAKING CHANGES

• Components no longer support working with <label>. To fix, existing code should swap <label> for <calcite-label>.

Features

• improve integration with calcite-label (#3091) (4efd8a9)

Bug Fixes

• checkbox: resize calcite-checkbox when unchecked & focusout (#2995) (0c6df8b)
• dropdown: Set scroller height to zero when not active. #3071 (#3116) (69aafdc)
• slider: align histogram minValue thumb when both minValue/maxValue are zero (#3092) (8fe19f7), closes #2480
• slider: align minValue thumb when both minValue/maxValue are zero (#2480) (#3083) (d092ff1)
• slider: move maxValue thumb when at min edge (#2481) (#3078) (ca9c0ce)
• slider: stop emitting change on page load (#3084) (2a4d271)
• sortable-list: updated to use column layout and include layout property (55fbf13), closes #2889 #2889 #2889
• stepper-item: remove margin-bottom for calcite-stepper-item (#3080) (37b7393)
• tree-item: update indeterminate on ancestor tree-items when selected on load (#3111) (a2d33f6), closes #2112

Bug Fixes

• action-bar: Better handling of overflow actions on smaller screens (#3042) (10721f6), closes #3025
• color-picker: fix mouse tracking logic when moved within another component's shadow DOM (#3041) (9ca1b8e)

Features

• block: add margin between heading/summary (#2932) (7f281fd)
• tree-item: update selection visuals to match Figma (#2082) (#3001) (d811d1c)

Bug Fixes

• accordion: match accordion icon directions with block (#2963) (68532d0)
• accordion: match icon directions with block when positioned at start (#2989) (2e8abc5)
• block-section: style update to align better with label and switch combo (707c214), closes #2577 #2577
• color-picker: render current value when set initially with custom format (#3020) (c06aecf), closes #2994
• input: decrease color padding (#2997) (75c1916)
• input-date-picker: Set value, start, and end properties via input or date-picker. #2955 (#2993) (ee68cb8)
• default boolean properties to be false instead of undefined. (#2990) (edd2598)
• slider: prevent added handle margins in Safari (#2947) (#2987) (7b45506)

Features

• action-bar, action-pad, action-menu, action-group: Add scale property to set scale of actions used internally. (#2934) (376ae1b), closes #2781 #2781
• alert, chip, date-picker, input-date-picker, filter, pagination, pick-list-item, rating: capitalize default text values (#2827) (140a051), closes #2755 #2842 #2668 #2783 #2717
• flow: add match-height class (f65fca8), closes #2741
• scrim: render default slot and add related styles (4250c44), closes #2801 #2801 #2801 #2801 #2801
• tile: add content-start/content-end slots (#2890) (f92db21), closes #2113

Bug Fixes

• action-bar, action-pad: expanded property should no longer alter actions within an action-menu. #2813 (#2912) (f78c197)
• calcite-input: number values properly nudge when step is set to a decimal or "any" (#2939) (38e1c09)
• color-picker: fix value for empty color-picker with different format (set initially) (#2886) (1b8f4b9), closes #2853
• combobox: Set focus style correctly. #2515 (#2875) (ac3cf5c)
• date-picker: Fix logic for hovering and setting date ranges. #2763 (#2916) (1da73c0)
• dropdown: Stops closing after selection even with disableCloseOnSelect. #2761 (#2895) (0950e3d)
• inline-editable: prevent button :hover style when disabled, center in container (#2931) (1f4ff3e), closes #2926
• input: ensure clearable button has focus outline (#2929) (98dcf6c)
• input: prevent added margin to number buttons in safari, independent hover styles (#2904) (a109ba2), closes #2874
• slider: align slider handle to container, ensure histogram stretches full width (#2867) (f0ae422), closes #913 #2706
• tree: Tree with nested tree elements should fire only one event (#2893) (ba65ab3), closes #2440

Features

• calcite-list-item-group: Add support for grouping list items #2550 (#2700) (f11e21d), closes #2350
• custom-elements: split up standalone action component bundles (#2759) (139663b)
• input: Add readOnly property (#2734) (0a709cf), closes #2726
• tree-item: add s/m/l scales to match Figma (24px/32px/44px) (#2803) (63404cb)

Bug Fixes

• block: stops rendering collapsibleIcon when header-menu-actions slot has content. adds explicit tests for not showing collapsibleIcon when there is a control or header-menu-action. (be791b9)
• calcite-input: number inputs with step="any" should allow decimals (#2804) (ff0e56f)
• date-picker: Selecting a day no longer activates previous day in certain time zones. (#2680) (c047298), closes #1863
• date-picker, input-date-picker: Fix setting date for the correct range input (#2756) (8823b5e), closes #2547
• dropdown: update dropdown-trigger-container width (234477a), closes #2625 #2625 #2625
• input: Prevent keyboard events from changing values when readOnly is true (#2780) (f86d27a), closes #2726
• input-date-picker: When range is true, emit 'calciteDatePickerRangeChange' on input. #2507 (#2779) (a3b4690)
• list: update display to block and updates related test (c5a930d)
• popover, tooltip: Reposition open popover and tooltip on initial load. #2446 (#2830) (7f6ffad)
• select: truncate long labels. #2714 (#2731) (6792161)

⚠ BREAKING CHANGES

• color-picker: The calciteColorPickerChange will no longer be emitted as the color field/hue slider thumb is dragged (only on release). To track the color values as the thumb is dragged, use the new calciteColorPickerInput event.

Features

• animation: add global animation classes, duration CSS Custom Property (#2607) (c7f70dc), closes #2411
• calcite-input: allow integer only input when step is a whole number (#2563) (3af675b)
• color-picker: introduce input event and modify change event to no longer fire as hue slider/color field thumbs are dragged (#2653) (8b41ca4), closes #2303
• slider: Add support for histogram color stops (#2572) (9bb242d), closes #834
• value-list-item, pick-list-item: add nonInteractive prop (f06906c), closes #2040 #2040 #2040 #2040 #2040

Bug Fixes

• button: Remove use of document.getElementsByName() (#2574) (59712b4), closes #1958
• button, checkbox, input, radio-button: Support native forms across shadow boundary. (#2575) (0989acb)
• calcite-list-item: adds bit of spacing between label and description (e81c37d)
• color-picker: improve mouse tracking when dragging color field/hue slider thumb (#2676) (35bc30c), closes #2335
• combobox: Deprecate the calciteLookupChange event in favor of calciteComboboxChange (#2579) (fc7c0f8), closes #2499
• input: disabled calcite-input + type=number allows interaction with the up/down buttons (#2609) (7249cad), closes #2582
• input: Fix calcite-input with clearable + "enter" key. #2675 (#2679) (332991a)
• input: fix layout of number input with horizontal button layout (#2581) (58866ac), closes #2422
• slider: ensure change event is emitted consistently (#2677) (ee6240a), closes #2309
• value-list: Prevent tabbing through navigated items with single selection (#2590) (54dfcf3), closes #2402
• x-close input buttons: x hover ui-text-1 (#2596) (1560224)

⚠ BREAKING CHANGES

• calcite-input: use the label attribute to set the aria-label on the input.

Features

• button: Display text with loading and add disabled styling. #2420 (#2441) (f7d41d7)
• button: show animation when loading changes (#2565) (a498fc6), closes #2420
• dropdown-item: Use an icon instead of HTML char for selected item. #957 (#2485) (3457694)
• slider: add support for mirroring slider (#2484) (cd16695), closes #720

Bug Fixes

• action-menu: target 1px margin more accurately to actions in menu (fd2c2e1)
• calcite-input: stop spreading attributes (#2443) (6d47b96)
• color-picker: fix nudging hue slider with left/right arrows when color is #000 or #fff (#2551) (7874724), closes #2357
• combobox: Fix selection logic and prevent events from causing stack error (#2493) (42c760a)
• combobox-item: Fix indent style for nested items. (#2487) (172ab36)
• dropdown: Fix dropdown display issues. (#2543) (cc8d424)
• inline-editable, input, radio-button: namespace scoped CSS classes (#2564) (1988202), closes #2422
• input-time-picker: input box supports 12-hour display (#2540) (39e434f)
• list, list-item: UI tweaks to better match lists (5a279fa), closes #2541 #2541 #2541 #2541
• popover, tooltip: Query for referenceElement if needed when the tooltip/popover is opened or closed. #2446 (#2475) (954df61)
• tree: fix item selection when multi + input-enabled (#2555) (44af309), closes #2437

⚠ BREAKING CHANGES

• calcite-button: stop spreading attributes BREAKING CHANGE: to set an aria-label on the button use the label attribute (#2410)

Features

• block: add slot for header menu actions to block (#2434) (9107c8f), closes #963
• list, list-item: Adds CalciteList & CalciteListItem, A general purpose list and list-item. (#2274) (b01b7db)
• modal: Closes modal when the outside is clicked. (#2409) (6085f49), closes #2234
• notice: allow slotting multiple actions (#2394) (78376bb), closes #2144
• sortable-list: Add dragSelector and group properties to allow dragging only specified items. (#2346) (1f19a3e)

Bug Fixes

• alert, notice: update leading and close icons to follow calcite-action icon sizing (#2431) (d415aef), closes #2417

• color-picker: ensure color picker dimensions match its content (#2432) (610df46), closes #2412

• color-picker: setFocus() should focus on the first focusable element. #2267 (#2413) (7a3cc6c)

• combobox: use normal pointer for input of single select combobox (#2363) (bc3f4a1)

• tree: allow focusing out of tree via shift + tab (#2419) (b76dca7)

• tree: allow selecting children with Enter/Space when selection-mode=children (#2416) (0a90c10), closes #2290

• tree: prevent emitting selection event twice when a tree-item's checkbox label is clicked (#2438) (b828bf3), closes #2196

• calcite-button: stop spreading attributes BREAKING CHANGE: to set an aria-label on the button use the label attribute (#2410) (16cec0d)

Features

• combobox: Allow for greater nesting of calcite-combobox-items within calcite-combobox (#2340) (9ee8055), closes #2337
• pick-list, value-list: add prop to enable changing selection via keyboard in single-selection mode (#2401) (e5e0837), closes #2344
• split-button: add width property, related styles, and doc (35e4210), closes #921 #921
• value-list-item, pick-list-item: change description font to sans (fd0c192), closes #2258 #2258

Bug Fixes

• calcite-input: initially setting value to empty string results in value being "" instead of null (#2342) (c2c3235)
• combobox: fix maxItems after selection, fix maxItems calculation for nested items (#2354) (784d5d0)
• date-picker: start Russian week on Monday (#2372) (3762db9), closes #2291
• notice: fix setFocus (#2393) (05fadef)
• slider: prevent enter from reseting value (#2373) (405bdca), closes #2316
• tile-select: Add aria-label for the form element used (#2320) (9e5c810), closes #2259

Features

• action-menu: Close action-menu when an action is clicked. #2273 (#2285) (89ab28a)
• block, block-section: adds status and relate UI (61a3e37), closes #2261 #2261 #2261 #2261 #2261 #2261 #2261 #2261 #2261 #2261 #2261
• combobox: tab complete of custom values comboboxes (#2345) (a331e3d)
• popover: Add 'dismissible' property in favor of now deprecated 'closeButton' property (#2280) (39f13cf), closes #2223
• tabs: add scale and bordered properties, styles (WIP) (#2306) (c1563d2), closes #2185
• tile: add disabled property (#2298) (8386376), closes #2142

Bug Fixes

• action-menu: Focus on the menu's trigger when a slotted action is clicked and the menu is closed (#2304) (456d7b6)
• action-menu: Set offsetDistance to zero. (#2294) (ade64aa)
• calcite-input: preventing number input from allowing more than one zero (#2325) (f32bae5)
• color-picker: handle hue scope when color is 000. (#2277) (3898f4f), closes #2230
• combobox: emit lookup change when custom tag is added (#2292) (fe1f287)
• combobox: fix custom chip selection on blur (#2283) (f9511c9)
• combobox: in-progress custom values should get commited on blur or tab (#2312) (c309342)
• combobox: Truncate long strings correctly (#2319) (2fc802a), closes #2096
• dropdown: fix initial processing of groups and items (#2308) (e7a3217), closes #2268 #2026
• input: restore ability to tab backwards (shift+tab) out of number inputs (#2276) (bd03e93)
• modal: update footer when modal is connected to the DOM (#2282) (03d8c2e), closes #2178
• tooltip-manager: Close hovered or focused tooltip when the reference element is clicked. (#2299) (0272d7c)
• tooltip-manager: Mousing over non-reference elements keeps tooltip open #2318 (#2322) (a4ff22e)
• tooltip-manager: Prevents closing prematurely for non-leaf nodes (#2314) (1b79d7f), closes #2310

⚠ BREAKING CHANGES

• Using a 'theme' attribute is no longer supported to theme a component. Instead, a HTML class attribute of 'calcite-theme-light', 'calcite-theme-dark', or 'calcite-theme-auto' should be set on a component or one of its parent elements. Example: <calcite-button theme="light" /> now becomes <calcite-button class="calcite-theme-light" />. The calcite-theme-auto class will defer to the browser's CSS 'prefers-color-scheme' media query to decide whether the light or dark theme will be used.

Features

• action-menu: update styling and keyboard behavior (95f13d8), closes #1906 #1906
• input-time-picker, time-picker: add time-picker and input-time-picker components (#1736) (6e4c81d)
• Add auto theme class (#2197) (7377030), closes #2189
• Use HTML classes instead of custom 'theme' attributes for theming components (#2271) (ce3ccd5), closes #2262
• combobox: tapply entered text on tab for custom values combobox (#2239) (82d9afb)
• popover: adds heading prop and header node for when heading is supplied (3c2d9a4), closes #2130 #2130

Bug Fixes

• avatar: Updated large avatar to match design (#2200) (ac97025)
• calcite-accordion: updated large accordion to match figma (#2214) (930d1e6)
• calcite-chip: updated scale to match figma (#2229) (ef5508c)
• combobox: treat entered text as chip in custom values checkboxes on blur (#2263) (1e58793)
• custom-elements: add missing bundles (#2240) (477cc37)
• custom-elements: add missing flow bundle (#2270) (4b11ba3), closes #2269
• modal: improve modal a11y (#2225) (0b7e291), closes #1756
• popover: add forceUpdate to ensure Action is available for setFocus (92636b2)
• rating: restore outset focus (#2247) (3e0b485)
• tile: remove max-width (45366c3)

⚠ BREAKING CHANGES

• Remove 'theme' props from components (#2194)

• calcite-checkbox: removing internal label (#2161)

• alert, chip, input, notice, shell: The following slot names have been renamed:

• calcite-alert

  • alert-title => title
  • alert-message => message
  • alert-link => link

• calcite-chip

  • chip-action => action

• calcite-input

  • input-action => action

• calcite-notice

  • notice-title => title
  • notice-message => message
  • notice-link => link

• calcite-shell

  • shell-header => header
  • shell-footer => footer

Features

• action-menu, combobox, dropdown, input-date-picker, popover, tooltip: Add 'overlayPositioning' property. #2069 (#2070) (955b115)
• alert, button, chip, inline-editable, input-message, link, scrim: move theme attribute styles to global.scss (#2114) (1a41c9c), closes #1537
• checkbox, chip, combobox, pick-list, radio-button, switch, tile-select, value-list: widen value prop type (#1961) (56b73e6), closes #1145
• color-picker: improve thumb drag interaction (#2183) (5814feb), closes #2122
• pick-list, value-list: improve keyboard interaction for single-item selection (#2190) (863e3bb), closes #1734
• shell-panel: adds utility class for properly setting the height of external elements and adds related demo apps (#2028) (4ed609a), closes #1927 #1927 #1927
• tile, tile-select, tile-select-group: adds RTL support docs, tests, screenshots (#2129) (6b11306)
• adds opened and closed status icon to Block and updates UI of related components (f862ef8)

Bug Fixes

• accordion-item, alert, color-picker-swatch, combobox-item-group, combobox-item: avoid setting internal attributes on host element (#2085) (555c964), closes #2059

• action-group: 'menu-tooltip' slot to show the tooltip. (#2107) (14af364)

• alert: Remove setting 'dir' attribute in light DOM elements. #1831 (#2056) (941889f)

• calcite-checkbox: removing internal label (#2161) (7b1e0bc)

• calcite-input: disallowing typing any key with shift modifier down inside a number input (#2128) (f807741)

• calcite-input: pasting localized and non-localized numbers works as expected for default locale (#2089) (8b3939b)

• calcite-input: setting initial value for number input to "undefined" doesn't display in the input (#2013) (25bc604)

• calcite-input: setting name explicitly on internal input (#2073) (dc750e3)

• calcite-input: setting value of number inputs restricted to valid numbers or no value (#2036) (d94c4fd)

• calcite-label: label for clicks work properly inside shadowRoots (#2167) (e7e6d9b)

• calcite-radio-button: removing internal label (#2148) (87566d7)

• calcite-slider: slider handle position changes on mousedown instead of click/mouseup (#2165) (cdcae85)

• card: Remove setting 'dir' attribute in light DOM elements. #1831 (#1974) (27e97dc)

• chip: Remove setting 'dir' attribute in light DOM elements. #1831 (#2076) (931dd54)

• combobox-item: Remove setting 'dir' attribute in light DOM elements. #1831 (#2055) (21c7cce)

• combobox-item-group: Remove setting 'dir' attribute in light DOM elements. #1831 (#1975) (fc33da0)

• combobox, combobox-item: Toggling 'selected' on combobox-item should update the combobox parent. #2102 (#2118) (65de3bd)

• date-picker: fixes date range select styles (#2132) (061173b)

• date-picker: Remove setting 'dir' attribute in light DOM elements. #1831 (#2058) (29cd39d)

• date-picker-day: Remove setting 'dir' attribute in light DOM elements. #1831 (#2053) (097d592)

• date-picker-month-header: Remove setting 'dir' attribute in light DOM elements. #1831 (#2052) (514cbad)

• dom: Query whole shadowRoot of elements rootNode instead of just inside of the host. #2103 (#2158) (1a2b797)

• dropdown: Remove setting 'dir' attribute in light DOM elements. #1831 (#1976) (0c9d7e1)

• dropdown-group: Remove undocumented properties from the Host element. #2059 (#2100) (93d394f)

• dropdown-item: Remove setting 'dir' attribute in light DOM elements. #1831 (#2090) (634a022)

• dropdown-item: Remove undocumented properties from the Host element. #2059 (#2106) (3632ede)

• filter: Dark theme colors. #1850 (#2075) (76c8df6)

• input: Remove setting 'dir' attribute in light DOM elements. #1831 (#2051) (1a26180)

• label: Remove setting 'dir' attribute in light DOM elements. #1831 (#1980) (8adc4e5)

• link: Remove setting 'dir' attribute in light DOM elements. #1831 (#1981) (3fbfd41)

• modal: aleft align back button with title/content of modal (#2032) (8e5f7c5)

• modal: Remove setting 'dir' attribute in light DOM elements. (#2099) (aef5d61)

• modal: Remove setting 'dir' attribute in light DOM elements. #1831 (#2050) (f0e67a9)

• modal: Remove undocumented properties from the Host element. #2059 (#2105) (a1343f1)

• modal: render correctly with no footer slots (#2021) (e73ffca)

• modal: restore footer slotted content (#2031) (73ad6c5)

• modal: solve issue with custom widths in prod builds (#2027) (56f76fe)

• notice: Remove setting 'dir' attribute in light DOM elements. #1831 (#2087) (4d69c04)

• notice: Remove undocumented properties from the Host element. #2059 (#2104) (229f44d)

• pagination: Remove setting 'dir' attribute in light DOM elements. #1831 (#2049) (6efabe2)

• radio-button: Remove undocumented property/attribute from the Host element. #2059 (#2063) (2bc8d3c)

• radio-group-item: Remove undocumented properties from the Host element. #2059 (#2064) (857528c)

• rating: Remove setting 'dir' attribute in light DOM elements. #1831 (#2043) (b5c3702)

• select: Remove setting 'dir' attribute in light DOM elements. #1831 (#2044) (ace7125)

• slider: Remove undocumented properties from the Host element. #2059 (#2065) (66acc29)

• split-button: Remove setting 'dir' attribute in light DOM elements. #1831 (#2045) (06985c6)

• stepper: Remove setting 'dir' attribute in light DOM elements. #1831 (#2046) (e1e0e3a)

• stepper-item: Remove setting 'dir' attribute in light DOM elements. #1831 (#2077) (0a8a1ad)

• switch: removed unneeded RTL margin (1ad3bdb)

• tab-title: Remove setting 'dir' attribute in light DOM elements. #1831 (#2047) (c5f3d6b)

• tab-title: Remove undocumented properties from the Host element. #2059 (#2066) (27cafa0)

• tile-select: Remove setting 'dir' attribute in light DOM elements. #1831 (#2048) (cc24ef3)

• tooltip-manager: Don't show tooltip on click of referenceElement (#2176) (6cec214), closes #2171

• value-list-item: matches handle color to CalciteHandle colors (f0aafac)

• value-list-item: Remove undocumented properties from the Host element. #2059 (#2067) (e4ac470)

• value-list-item: updated handle color (3e57255)

• Remove 'theme' props from components (#2194) (50bd990)

• alert, chip, input, notice, shell: simplify slot names (#2057) (844d815), closes #2034

Bug Fixes

• calcite-input: number input localization no longer restricted to static list of locales (#2014) (03a679a)

⚠ BREAKING CHANGES

• block, date, panel, pick-list, pick-list-group, tip, tip-manager: Removes the default headingLevel value and child elements will calculate the value relative to their parent components.

Features

• action-menu: Add 'scale' property to calcite-action-menu #1939 (#1950) (40bf983)
• calcite-input: display localized decimals by default, don't display group separator character by default, but allow opt-in. Deprecates locale-format prop (#1995) (eebc103)
• color-picker: restore previous value when no-color is set and an input is nudged (#1944) (3c09c6c)

Bug Fixes

• accordion-item: Remove setting 'dir' attribute in light DOM elements. #1831 (#1970) (a9e9624)
• action-bar: Fix bug preventing 'overflowActionsDisabled' property from working correctly. (#1946) (db50f41)
• action-bar: Improve overflow logic for certain device heights. #1942 (#1948) (4e112a5)
• action-menu: When opening menu set focus on first action #1896 (#1912) (a7241d2)
• avatar: Remove setting 'dir' attribute in light DOM elements. #1831 (#1971) (6476f5a)
• block: place aria-expanded on block toggle button (#1922) (98e7030), closes #1917
• block, date, panel, pick-list, pick-list-group, tip, tip-manager: Remove default 'headingLevel' value. #1710 (#1960) (ae066f4)
• button, fab: Remove setting 'dir' attribute in light DOM elements. #1831 (#1973) (115566f)
• calcite-input: inputInput event now correctly broadcasts the target element's value (event.target.value) to match event.detail.value (#1992) (db9251b)
• calcite-input: localized number value now correctly updates when value is set programmatically (#1985) (2aba4fb), closes #1982
• calcite-input: number locale support (#1924) (d1d655c)
• color-picker: fix color field thumb nudging when saturation change does not change the color's RGB value (#1962) (e64314a)
• combobox: open combobox in the correct direction based on screen/overflow parent (#1940) (e4a9916)
• custom-elements: tweak script to create a bundle for each entry point (#1984) (0439a84)
• date-picker-day: restore out-of-range day styling (#1923) (c6e693d)
• dropdown-group: Remove setting 'dir' attribute in light DOM elements. #1831 (#1977) (738ff0c)
• input-date-picker: Remove setting 'dir' attribute in light DOM elements. #1831 (#1978) (951e821)
• input-message: Remove setting 'dir' attribute in light DOM elements. #1831 (#1979) (1c8c058)
• panel, shell-panel: flex grow, shrink, basis definitions (69d5668), closes #1914
• panel, shell-panel, flow: fixes height and scrolling issues with Safari (43d1982)
• tile-select: fix full width tile selects with icons, inputs (#1966) (54787e9)
• fix transform value typo from form style util (#1965) (b44d37b)
• pick-list-item: Clicking on icon should trigger a click. #1116 (#1949) (3e0ea12)
• tooltip, tooltip-manager, popover, popover-manager: Work correctly within shadowRoot elements. (#1956) (b184c91), closes #1930
• tree-item: allow trree to begin expanded #1809 (#1943) (917023e)

⚠ BREAKING CHANGES

• action-menu: Remove 'offsetDistance' property. (#1892)
• action-bar, action-pad: Replace 'tooltipExpand' properties with 'expand-tooltip' slots (#1841)
• action-menu: Replace 'intlOptions' property with 'label'. (#1872)
• action-group: Replace 'intlOptions' property with 'intlMore'. (#1870)
• calcite-switch: behavior no longer breaks when changing disabled. BREAKING CHANGE: removes proxy input support (#1854)
• popover, panel: image slot removed and panel sizing styles updated
• dropdown: Replace alignment property with position property. (#1761)

Features

• action: Add 'calciteActionClick' event for when an action is clicked. (#1887) (5b13cfa)
• action-bar: Automatically overflow actions into a menu depending on available height and add 'overflowActionsDisabled' to disable the feature. #1819 (#1869) (9c1e145)
• action-group: Add 'menu-tooltip' slot for adding a tooltip to the overflow menu button. (#1871) (6948bc0)
• action-group, action: add grid layout to action-group. add center layout to action (bb48270), closes #1506 #1500 #1506 #1506 #1506
• action-menu: Add 'calciteActionMenuOpenChange' event; (#1890) (9130dca)
• action-menu: Add 'tooltip' slot for adding an tooltip for the menu. (#1873) (185acb2), closes #1819
• action-menu: Adds setFocus method and focus on first action when open or menu button when closed. (#1904) (2d8de21)
• action-menu: Auto close action menu when clicked outside. (#1898) (e8d68c1)
• combobox: add constant prop to combobox item (#1777) (7eb3586)
• combobox, input-date-picker: Use new placements that flip in RTL. (#1827) (21342b8)
• date-picker, input-date-picker: Add 'minAsDate' and 'maxAsDate' properties. (#1751) (3161aea)
• dropdown: Replace alignment property with position property. (#1761) (a5c3d01)
• filter: clear text on Escape (#1762) (ea56f8a)
• input: add minLength/maxLength props (#1833) (60ea04c)
• panel, shell-panel: add width base unit at root level (a27a12a), closes #1849
• pick-list-item: removes top margin on description (e0fbb9c)
• pick-list, value-list: Add option on setFocus method to focus the filter component. #1622 (#1766) (b13aab6)
• tree: add ancestor selection mode, input-enabled prop for selectable trees (#1768) (f046cd1)

Bug Fixes

• action: reset line-height (d95fdb5)

• action-bar: Only allow one overflow menu open at a time. (#1894) (8e0df96)

• action-bar: Overflow actions at load time. (#1905) (85bb6c1)

• action-bar: Overflow actions on initial render of component. (#1891) (4e9b466)

• action-bar: remove overflow css. (#1908) (a828801)

• action-group: menuOpen should change when menu is opened. (#1893) (7b71c49)

• action-group: Replace 'intlOptions' property with 'intlMore'. (#1870) (c0497a2), closes #1819

• action-menu: Remove 'offsetDistance' property. (#1892) (4d92ec7)

• action-menu: Replace 'intlOptions' property with 'label'. (#1872) (60b598b), closes #1819

• action-menu: Show pointer on menu. (#1889) (ec28f2f)

• action-pad: Only allow one overflow menu open at a time. (#1899) (693041b)

• calcite-label: label no longer modifies slotted children attributes (#1901) (f2aa871)

• calcite-switch: behavior no longer breaks when changing disabled. BREAKING CHANGE: removes proxy input support (#1854) (e8343cc)

• center-row: update style to use updated tailwind reference (20c5731)

• color-picker: add keyboard support to color field and hue slider (#1885) (115d5d2), closes #1406

• color-picker: ensure consistent handling of hex input text selection (#1855) (ab4d16c), closes #1852

• color-picker: prevent invalid hex chars from being entered (#1868) (32a44f9)

• color-picker: update color swatch border to follow spec (#1902) (220a9b9), closes #1886

• combobox: Update scrollable menu height for 'maxItems' (#1883) (8dd91e0)

• fab: Fix native tooltip display. (#1848) (04e715a), closes #1842

• filter: Escape filter value (#1723) (5ef7aec)

• filter: keep focus on filter after clearing text via mouse #1527 (#1837) (77b25de)

• filter: Place scrim over filter when loading or disabled. (#1757) (a914a97)

• input: only emit input event on user interaction (#1843) (05267bb)

• input: solve bug with decimal precision in number input (#936) (#1830) (451ed05)

• input-date-picker: Menu position should change depending on dir. #1826 (#1882) (b1ebfb6)

• input-date-picker: removes max-widths (70e0017)

• input, label: Removing disabled prop should also updated slotted elements. (#1743) (dcd110a)

• option: fix mutation observer options used to track content changes (#1878) (12cb7fc), closes #1409

• panel: corrected actions layout when header content is not rendered (18dcadd), closes #1822 #1822

• panel: header-actions--end layout fix when header-content is not rendered (e3d2166)

• panel: reverting weight as it's causing visual braking changes (#1716) (dc90836)

• pick-list, value-list: fix keyboard navigation after filtering (#1725) (0a81ff4), closes #1527

• popover, panel: image slot removed and panel sizing styles updated (e507b56), closes #1752 #1752 #1752

• radio-button: hidden input position no longer interferes with document flow (#1776) (d7aa563)

• radio-group: ensure group's outline is included in new total heights (#1903) (20d0310)

• rating: Fix wrapper display. (#1744) (27c02fe)

• select: fix rendering of options for mobile (#1866) (e7ff36f), closes #1836

• select: fix RTL styling (#1909) (c2a110c)

• shell: adds missed style (ec5f4ec)

• shell: adds unique keys for content node. adds related e2e tests (97c59c2)

• shell: simplifies content render and removes center-row conditional and adds async test demo (475f6c3)

• shell-panel: adds content__body and content__header divs to provide accurate height calculations (c97777b)

• tip: Hide tip when dismissed. (#1812) (62ee391)

• tooltip: improve tooltip border, tooltip usage in card story, card/link demo html (#1851) (ce86ddd)

• Theme is no longer set by default. (#1735) (c8c1a85)

• action-bar, action-pad: Replace 'tooltipExpand' properties with 'expand-tooltip' slots (#1841) (38787d4)

⚠ BREAKING CHANGES

• hide internal styling props (#1523)

• notice: remove open and close methods (#1634)

• button, split-button: light and dark colors of buttons have been removed, replace with neutral and invers, respectively (#1515)

• update storybook, fix references in other components:

• fix issues with split buttons

• update more instances of light/dark

• color: The following events were renamed:

• calciteColorChange -> calciteColorPickerChange

• calciteColorHexInputChange -> calciteColorPickerHexInputChange

• color: The following components were changed:

• calcite-color -> calcite-color-picker

• calcite-color-hex-input -> calcite-color-picker-hex-input†

• calcite-color-swatch -> calcite-color-picker-swatch†

† renamed to indicate that these are supporting components and not meant to be used standalone.

• Remove 'host-context' selector within component CSS. #1601 (#1606)
• FAB: Remove clear option from appearance property. (#1589)

Features

• ActionMenu: Add calcite-action-menu component (#1510) (02be9a4), closes #1466
• checkbox, radio-button: add setFocus() (#1595) (980f1d4), closes #808
• combobox: add ancestor selection mode (#1590) (#1703) (e836fcc)
• combobox: fire event when combobox list is filtered (#1585) (#1600) (01bbe94)
• combobox, combobox-item, combobox-item-group: Add CalciteComboboxItemGroup (#1635) (4a821bf), closes #1617 #1657
• custom-elements: include build utils (#1499) (4ba4170)
• shell-center-row: remove CSS transition for height (#1563) (d76ebd8)
• tailwind: add percentage based text utils for "text that wraps" (#1640) (b2d0ae8)
• add maxlength property to calcite-input (#1570) (9574b3e)

Bug Fixes

• button: fixes missing text-alignment for alignment prop. (#1564) (f419848)

• button, split-button: update light, dark button colors to neutral, inverse (#1618) (b262529)

• calcite-checkbox: fixing focus outline styling weirdness on Safari (#1603) (1df7c9e)

• calcite-checkbox: removing unnecessary aria attributes (#1560) (4e0b5bc)

• color: convert default value based on initial format (#1599) (73a7573), closes #1468

• color: ensure hue slider always updates internal color regardless of RGB value being equal (#1611) (7626089), closes #1474

• combobox: prevent hidden options from causing scroll (#1577) (e50f63d)

• FAB: Remove clear option from appearance property. (#1589) (a81fa15)

• input: Support default value to reset an input (#1571) (388209c)

• notice: remove open and close methods (#1634) (c1cd778)

• shell: content layout when not content-behind (b6f7448), closes #1637 #1637 #1637 #1637 #1637

• tooltip: Tooltip should appear in front of a popover. (#1588) (0e0c298)

• hide internal styling props (#1523) (b8b45e0), closes #1145

• color: rename color to color-picker (#1613) (6fcb994)

• color: rename color to color-picker (#1624) (6500242), closes #1437

• Remove 'host-context' selector within component CSS. #1601 (#1606) (2844ab8)

⚠ BREAKING CHANGES

• tile-select: Updates input display prop nomenclature must add input-enabled to see input (#1450)

Features

• modal: add setFocus method and deprecate focusElement (#1522) (77ef000), closes #1145
• shell-panel: adds slot for header content (#1543) (af013b7)
• tile-select: Updates input display prop nomenclature (#1450) (0b56e1b)

Bug Fixes

• calcite-radio-button: document-level "!important" style overrides applied to hidden input no longer take effect (#1551) (6fa7b1c)
• stop @apply rule from getting into dist CSS (#1550) (2ae5d09)
• action-pad, action-bar: align Collapse button when dir="rtl" (#1504) (ce6fac2)
• button: Allow slotted button content without text (#1449) (f883c9b)
• combobox: solve issue with using combobox inside shadow DOM (#1535) (cfe8ad5)
• date-picker: correct swapped next/prev in header (#1546) (#1548) (4508ed8)
• input-date-picker: document events emitted by input date picker (#1525) (71aac78)