@dnb/eufemia 9.26.0 → 9.28.0

package/CHANGELOG.md

@@ -3,6 +3,84 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [9.28.0](https://github.com/dnbexperience/eufemia/compare/v9.27.0...v9.28.0) (2022-08-17)
+
+
+### Bug Fixes
+
+* **Autocomplete:** ensure the data suffix-value elements do not appear in the DOM when unused ([#1514](https://github.com/dnbexperience/eufemia/issues/1514)) ([a0d9571](https://github.com/dnbexperience/eufemia/commit/a0d9571b549ae8e55a14bdf5ea30834ce0ea356e))
+* **Autocomplete:** make click on data suffix-element opening the drawer-list ([#1509](https://github.com/dnbexperience/eufemia/issues/1509)) ([03384b8](https://github.com/dnbexperience/eufemia/commit/03384b8cf79ad4d94f59160c4c9491a2693d52f2))
+* **Autocomplete:** make disabled state look properly + center suffix value ([#1512](https://github.com/dnbexperience/eufemia/issues/1512)) ([e10e8bb](https://github.com/dnbexperience/eufemia/commit/e10e8bbba5f70be67cb903db6774a1e847fdb035))
+* **Drawer:** ensure it removes scroll possibility when opened ([#1501](https://github.com/dnbexperience/eufemia/issues/1501)) ([6f4c383](https://github.com/dnbexperience/eufemia/commit/6f4c383af38f8d7999742f8c1f9faf47703d7023))
+* **Drawer:** fix Safari text selection + drag/scroll issue ([afc77e8](https://github.com/dnbexperience/eufemia/commit/afc77e82cdd264eb8f5a4cd1899ff678539b4401))
+* **Internal:** avoid running componentDidMount twice ([#1496](https://github.com/dnbexperience/eufemia/issues/1496)) ([1bd3c8a](https://github.com/dnbexperience/eufemia/commit/1bd3c8a2cc8dafc8184f9942db84b30f2a8f94b0))
+* **Slider:** convert Slider from Class to Function component ([#1503](https://github.com/dnbexperience/eufemia/issues/1503)) ([9a8ca8b](https://github.com/dnbexperience/eufemia/commit/9a8ca8b3bc67e26a0cf76324f411c7e6e6d81298))
+* **Slider:** rename prop thump_title to thumb_title ([#1500](https://github.com/dnbexperience/eufemia/issues/1500)) ([5818ee7](https://github.com/dnbexperience/eufemia/commit/5818ee744fe0f323741043564d6d1b80812d8a61))
+
+
+### Features
+
+* add Badge component ([#1194](https://github.com/dnbexperience/eufemia/issues/1194)) ([3dab13c](https://github.com/dnbexperience/eufemia/commit/3dab13c3bbd81ea344f37781f72fd21e952e3c2a))
+* **Timeline:** add fullwidth to info message ([#1486](https://github.com/dnbexperience/eufemia/issues/1486)) ([4ef386b](https://github.com/dnbexperience/eufemia/commit/4ef386b0543033d6111b66132bd9ff7eedfb83a5))
+
+# [9.27.0](https://github.com/dnbexperience/eufemia/compare/v9.26.1...v9.27.0) (2022-06-23)
+
+
+### Bug Fixes
+
+* always hide content from DOM when Accordion is collapsed ([41cbd9b](https://github.com/dnbexperience/eufemia/commit/41cbd9b634b17bd4f8c066b6ff9d1259c1e87b96))
+* **Autocomplete:** enhance VoiceOver support ([#1472](https://github.com/dnbexperience/eufemia/issues/1472)) ([f469dd8](https://github.com/dnbexperience/eufemia/commit/f469dd86d697e625b2680ba99e4a3482b9704a6c))
+* **Autocomplete:** ensure "no options" is read out in aria-live ([#1471](https://github.com/dnbexperience/eufemia/issues/1471)) ([254303f](https://github.com/dnbexperience/eufemia/commit/254303fe0466c63873f1363f4a4f09fe90b5607d))
+* **Autocomplete:** fix using tab + write issue ([#1473](https://github.com/dnbexperience/eufemia/issues/1473)) ([73f9655](https://github.com/dnbexperience/eufemia/commit/73f96555990cf21bd8095f3eac7b778979d10298))
+* **Autocomplete:** make VoiceOver announce first if a certain item is selected ([#1479](https://github.com/dnbexperience/eufemia/issues/1479)) ([d32e980](https://github.com/dnbexperience/eufemia/commit/d32e9803e403373696b0a65f18943fae714555c6))
+* **Autocomplete:** touch device issue on first focus ([#1476](https://github.com/dnbexperience/eufemia/issues/1476)) ([5fcbf17](https://github.com/dnbexperience/eufemia/commit/5fcbf173836545641a3aca4da642750905ae5a7b))
+* **Avatar:** properly handle spacing props ([5841990](https://github.com/dnbexperience/eufemia/commit/584199032ddf586ef03fddd1baf4b7c213980113))
+* **Breadcrumb:** properly handle spacing props ([b713dad](https://github.com/dnbexperience/eufemia/commit/b713dadc30db630913928d13a9082a439fb2e273))
+* **DatePicker:** make keyboard usage in input not throw ([#1475](https://github.com/dnbexperience/eufemia/issues/1475)) ([d0756e2](https://github.com/dnbexperience/eufemia/commit/d0756e217b9cfdba58948873a0a08992d7516399))
+* **DatePicker:** rename testing attributes to data-testid ([2e1e285](https://github.com/dnbexperience/eufemia/commit/2e1e285e5430ebd5ce1d0dd788bdc1e2b4564d6a))
+* **Dialog:** fix Modal backdrop / overlay false-positive click issue while e.g. selecting ([#1463](https://github.com/dnbexperience/eufemia/issues/1463)) ([91e69a8](https://github.com/dnbexperience/eufemia/commit/91e69a8b12fb1d21fb30222c9cf5e695e633c974))
+* **Dialog:** fix Safari issue not able to scroll ([3f6fb31](https://github.com/dnbexperience/eufemia/commit/3f6fb31e0f506f522e7fa8cd99ee41d95b9faf7c))
+* **Dialog:** make Dialog not overflow iOS Safari viewport ([764e487](https://github.com/dnbexperience/eufemia/commit/764e487758a0f3611558470c96234b09a0af5a78))
+* **Dropdown:** Missing properties in PropTypes ([#1384](https://github.com/dnbexperience/eufemia/issues/1384)) ([7a83b38](https://github.com/dnbexperience/eufemia/commit/7a83b385d996f0bbbab7fffe88b47094705c46b6))
+* **HeightAnimation:** ensure quick state changes to react without animating from start to finish ([886b4cd](https://github.com/dnbexperience/eufemia/commit/886b4cd15f7575df56714ea581fcf51e5edea9b2))
+* **HelpButton:** Adds test when used inside texts ([#1404](https://github.com/dnbexperience/eufemia/issues/1404)) ([f8a7795](https://github.com/dnbexperience/eufemia/commit/f8a7795852c350d9a3a59367b255c8e2eb760c13))
+* **Icon:** fix stopwatch icon (16px) ([d57c617](https://github.com/dnbexperience/eufemia/commit/d57c617a8249779ad7fe2888f178f53652e974a7))
+* **Input:** add missing Input test for icon and clear button ([#1465](https://github.com/dnbexperience/eufemia/issues/1465)) ([be2b4a0](https://github.com/dnbexperience/eufemia/commit/be2b4a0536362717aae0e8dd96f53246155b6fd5))
+* **Input:** enhance vertical centering for Safari (mainly iOS) ([#1469](https://github.com/dnbexperience/eufemia/issues/1469)) ([dadb5f8](https://github.com/dnbexperience/eufemia/commit/dadb5f8c15f5db468c266d588a759646f9f5a308))
+* **InputMasked:** fix integerLimit option when used with decimals ([14fe5d9](https://github.com/dnbexperience/eufemia/commit/14fe5d91b1d398d623be725eef09dd85cc96f0b3))
+* **Modal:** fix data-testid usage in object defined props ([e023f13](https://github.com/dnbexperience/eufemia/commit/e023f1330c8e1cee867394fb846bdeca2c4e8b95))
+* **Modal:** fix flaky overlay opacity color issue happening in Chrome browser ([86d875d](https://github.com/dnbexperience/eufemia/commit/86d875dd6ac0a71a230b8936528507dd3718f4d8))
+* **Radio:** fix radio button disabled issue when inside of group ([#1477](https://github.com/dnbexperience/eufemia/issues/1477)) ([e775792](https://github.com/dnbexperience/eufemia/commit/e7757921f6040b9859013aa417aaaa69b174425c))
+* **Table:** align HTML/CSS classes and types ([ff0be8d](https://github.com/dnbexperience/eufemia/commit/ff0be8db491c00ee06794e15934d72040f3dda66))
+* **Table:** fix sticky Table when no offset is given ([888564d](https://github.com/dnbexperience/eufemia/commit/888564d4380b9c7a771dbbe4ed299767c5d469a3))
+* **Table:** simplify sticky table hook ([f1e7e3b](https://github.com/dnbexperience/eufemia/commit/f1e7e3bfab577e73ed6e23b49cdf30891e4e76b1))
+* **Tag:** properly handle spacing props ([d7129d8](https://github.com/dnbexperience/eufemia/commit/d7129d8fbcc5b05ddff56eb017d3384e5eb9b566))
+* **Timeline:** properly handle spacing props ([e823c6e](https://github.com/dnbexperience/eufemia/commit/e823c6e328bd1157560679e26801362039ad8e04))
+
+
+### Features
+
+* **Autocomplete:** add support for data suffix_value ([#1467](https://github.com/dnbexperience/eufemia/issues/1467)) ([fe6fbb7](https://github.com/dnbexperience/eufemia/commit/fe6fbb73fdba4ebf2166710d6ff48bfba36a5876))
+* **DatePicker:** add size property to component ([#1438](https://github.com/dnbexperience/eufemia/issues/1438)) ([749a118](https://github.com/dnbexperience/eufemia/commit/749a1188a17998e690c22708f624c1e5a73ac05a))
+* **DrawerList:** use CSS Grid for placing list content to enhance flexibility ([#1470](https://github.com/dnbexperience/eufemia/issues/1470)) ([93fac6b](https://github.com/dnbexperience/eufemia/commit/93fac6ba5728b38f347b35f48b0af5e3fda1ca2a))
+* **Icons:** add calendar and bookmark icon ([#1449](https://github.com/dnbexperience/eufemia/issues/1449)) ([61c9c11](https://github.com/dnbexperience/eufemia/commit/61c9c119085c380227bf6546ee51f8273a7529a6))
+* **Input:** add inner_element property for internal usage (as of now) ([#1466](https://github.com/dnbexperience/eufemia/issues/1466)) ([d1b1b19](https://github.com/dnbexperience/eufemia/commit/d1b1b19ed79f22393d3bb8b68cfd0eeb5dee5b13))
+* **MediaQuery:** convert to TypeScript ([1a23e4f](https://github.com/dnbexperience/eufemia/commit/1a23e4f52740be5c05d2e6157709511b739349ec))
+* **Modal:** add "bypass_invalidation_selectors" property to omit element invalidation ([d9cb392](https://github.com/dnbexperience/eufemia/commit/d9cb39208706283588d37def643233fa2301201c))
+* **NumberFormat:** add srLabel property to enhance more easily a11y for screen reader users ([#1480](https://github.com/dnbexperience/eufemia/issues/1480)) ([004d675](https://github.com/dnbexperience/eufemia/commit/004d675eb074e7f269e2a9a31f8af17266eaf84a))
+* **Provider:** rewrite to TypeScript ([#1436](https://github.com/dnbexperience/eufemia/issues/1436)) ([66416d9](https://github.com/dnbexperience/eufemia/commit/66416d94e56168cba181376c6580228077950012))
+* **Table:** change colors of table ([1f3687f](https://github.com/dnbexperience/eufemia/commit/1f3687ff22e7694c2bfbb3fbaca1c430f2833c11))
+* **Table:** move to components and rewrite to TypeScript ([562940a](https://github.com/dnbexperience/eufemia/commit/562940a5a6ef5670f69e73fb1923102e67413b13))
+* **Timeline:** date supports a list of dates ([#1464](https://github.com/dnbexperience/eufemia/issues/1464)) ([a5c1dcd](https://github.com/dnbexperience/eufemia/commit/a5c1dcde05a673c632cc000e0112c42c54bb654e))
+* **Timeline:** rename name to title & date to subtitle with backwards compatibility ([#1468](https://github.com/dnbexperience/eufemia/issues/1468)) ([6607963](https://github.com/dnbexperience/eufemia/commit/66079637a40b3c29727d1f7e64962d5a4668a9e8))
+
+## [9.26.1](https://github.com/dnbexperience/eufemia/compare/v9.26.0...v9.26.1) (2022-06-10)
+
+
+### Bug Fixes
+
+* **Modal:** fix flaky overlay opacity color issue happening in Chrome browser ([21e8f90](https://github.com/dnbexperience/eufemia/commit/21e8f9089c20a479f5a8eca8c5d648f781ed8c24))
+
 # [9.26.0](https://github.com/dnbexperience/eufemia/compare/v9.25.0...v9.26.0) (2022-04-27)
 
 

package/assets/icons/bookmark.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M12.057 14.913 8 12.073l-4.057 2.84a.481.481 0 0 1-.757-.394V1.963c0-.532.43-.963.962-.963h7.704c.531 0 .962.431.962.963v12.556a.481.481 0 0 1-.757.394Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/assets/icons/bookmark_medium.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M18.32 22.77 12 18.344 5.68 22.77a.75.75 0 0 1-1.18-.614V2.595a1.5 1.5 0 0 1 1.5-1.5h12a1.5 1.5 0 0 1 1.5 1.5v19.56a.75.75 0 0 1-1.18.614Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/assets/icons/calendar_cancel.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.476 10.085a.75.75 0 1 0-1.061-1.06l1.06 1.06Zm-3.452 1.33a.75.75 0 1 0 1.061 1.06l-1.06-1.06Zm1.061-2.39a.75.75 0 1 0-1.06 1.06l1.06-1.06Zm1.33 3.45a.75.75 0 1 0 1.06-1.06l-1.06 1.06ZM6.005 1a.75.75 0 1 0-1.5 0h1.5Zm-1.5 3.256a.75.75 0 1 0 1.5 0h-1.5ZM11.5 1A.75.75 0 0 0 10 1h1.5ZM10 4.256a.75.75 0 0 0 1.5 0H10ZM5.003 15.75a.75.75 0 0 0 0-1.5v1.5ZM14.25 4a.75.75 0 0 0 1.5 0h-1.5ZM4 8.25a.75.75 0 0 0 0-1.5v1.5Zm6.75 7.5a5 5 0 0 0 5-5h-1.5a3.5 3.5 0 0 1-3.5 3.5v1.5Zm5-5a5 5 0 0 0-5-5v1.5a3.5 3.5 0 0 1 3.5 3.5h1.5Zm-5-5a5 5 0 0 0-5 5h1.5a3.5 3.5 0 0 1 3.5-3.5v-1.5Zm-5 5a5 5 0 0 0 5 5v-1.5a3.5 3.5 0 0 1-3.5-3.5h-1.5Zm4.47.53 1.195 1.196 1.06-1.061-1.195-1.195-1.06 1.06Zm-1.196-1.195 1.196 1.195 1.06-1.06-1.195-1.196-1.06 1.061Zm2.391-1.06L10.22 10.22l1.06 1.06 1.196-1.195-1.061-1.06ZM10.22 10.22l-1.196 1.195 1.061 1.06 1.195-1.195-1.06-1.06ZM4.506 1v1.628h1.5V1h-1.5Zm0 1.628v1.628h1.5V2.628h-1.5ZM10 1v1.628h1.5V1H10Zm0 1.628v1.628h1.5V2.628H10ZM2 15.75h3.003v-1.5H2v1.5ZM15.75 4v-.372h-1.5V4h1.5ZM14 1.878h-3.25v1.5H14v-1.5Zm-3.25 0H5.256v1.5h5.494v-1.5Zm-5.494 0H2v1.5h3.256v-1.5ZM.25 3.628V7.5h1.5V3.628H.25Zm0 3.872V14h1.5V7.5H.25Zm.75.75h3v-1.5H1v1.5Zm14.75-4.622A1.75 1.75 0 0 0 14 1.878v1.5a.25.25 0 0 1 .25.25h1.5ZM2 14.25a.25.25 0 0 1-.25-.25H.25c0 .966.784 1.75 1.75 1.75v-1.5ZM2 1.878a1.75 1.75 0 0 0-1.75 1.75h1.5a.25.25 0 0 1 .25-.25v-1.5Z" fill="#000"/></svg>

package/assets/icons/calendar_cancel_medium.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.343 16.22a.75.75 0 0 0-1.06-1.06l1.06 1.06Zm-5.186 3.065a.75.75 0 0 0 1.06 1.06l-1.06-1.06Zm1.06-4.125a.75.75 0 1 0-1.06 1.06l1.06-1.06Zm3.065 5.186a.75.75 0 1 0 1.06-1.06l-1.06 1.06ZM7.25 1a.75.75 0 0 0-1.5 0h1.5Zm-1.5 5a.75.75 0 0 0 1.5 0h-1.5Zm12.5-5a.75.75 0 0 0-1.5 0h1.5Zm-1.5 5a.75.75 0 0 0 1.5 0h-1.5Zm-6.663 17.25a.75.75 0 0 0 0-1.5v1.5Zm7.663.753a6.25 6.25 0 0 0 6.25-6.25h-1.5a4.75 4.75 0 0 1-4.75 4.75v1.5Zm6.25-6.25a6.25 6.25 0 0 0-6.25-6.25v1.5a4.75 4.75 0 0 1 4.75 4.75H24Zm-6.25-6.25a6.25 6.25 0 0 0-6.25 6.25H13a4.75 4.75 0 0 1 4.75-4.75v-1.5Zm-6.25 6.25a6.25 6.25 0 0 0 6.25 6.25v-1.5a4.75 4.75 0 0 1-4.75-4.75h-1.5Zm7.782-2.593-4.125 4.125 1.06 1.06 4.126-4.124-1.06-1.06Zm-4.125 1.06 4.125 4.126 1.06-1.06-4.124-4.126-1.06 1.06ZM5.75 1v2.5h1.5V1h-1.5Zm0 2.5V6h1.5V3.5h-1.5Zm11-2.5v2.5h1.5V1h-1.5Zm0 2.5V6h1.5V3.5h-1.5ZM2.5 23.25h7.587v-1.5H2.5v1.5Zm19-20.5h-4v1.5h4v-1.5Zm-4 0h-11v1.5h11v-1.5Zm-11 0h-4v1.5h4v-1.5ZM.75 4.5v5h1.5v-5H.75Zm0 5v12h1.5v-12H.75Zm22.5-1v-4h-1.5v4h1.5ZM1.5 10.25h20v-1.5h-20v1.5ZM21.75 8.5a.25.25 0 0 1-.25.25v1.5a1.75 1.75 0 0 0 1.75-1.75h-1.5Zm-.25-4.25a.25.25 0 0 1 .25.25h1.5a1.75 1.75 0 0 0-1.75-1.75v1.5Zm-19 17.5a.25.25 0 0 1-.25-.25H.75c0 .966.784 1.75 1.75 1.75v-1.5Zm0-19A1.75 1.75 0 0 0 .75 4.5h1.5a.25.25 0 0 1 .25-.25v-1.5Z" fill="#000"/></svg>

package/assets/icons/exclamation.svg

@@ -1 +1 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.998 10.412a.75.75 0 0 0 1.5 0h-1.5ZM8.498 2a.75.75 0 0 0-1.5 0h1.5Zm0 8.412V2h-1.5v8.412h1.5Z" fill="#000"/></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 10.412V2m-.177 11.519h.346m.08 0c0 .183-.16.243-.249.243-.092 0-.252-.06-.252-.243 0-.197.16-.257.252-.257.088 0 .248.06.248.257Z" stroke="#000" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/></svg>

package/assets/icons/exclamation_circled.svg

@@ -1 +1 @@
-<svg width="16" height="16" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.703 9.527a.797.797 0 1 0 1.594 0H7.703Zm1.594-4.964a.797.797 0 0 0-1.594 0h1.594Zm-.797 6.64a.797.797 0 0 0 0 1.593v-1.593Zm.024 1.593a.797.797 0 0 0 0-1.593v1.593ZM15.407 8.5A6.907 6.907 0 0 1 8.5 15.406V17A8.5 8.5 0 0 0 17 8.5h-1.594ZM8.5 15.406A6.907 6.907 0 0 1 1.593 8.5H0A8.5 8.5 0 0 0 8.5 17v-1.594ZM1.593 8.5A6.907 6.907 0 0 1 8.5 1.593V0A8.5 8.5 0 0 0 0 8.5h1.593ZM8.5 1.593A6.907 6.907 0 0 1 15.406 8.5H17A8.5 8.5 0 0 0 8.5 0v1.593Zm.797 7.934V4.563H7.703v4.964h1.594Zm-.797 3.27h.024v-1.594H8.5v1.593Z" fill="#000"/></svg>
+<svg width="16" height="16" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.703 9.527a.797.797 0 0 0 1.594 0H7.703Zm1.594-4.964a.797.797 0 1 0-1.594 0h1.594Zm-.797 6.64a.797.797 0 0 0 0 1.593v-1.593Zm.024 1.593a.797.797 0 1 0 0-1.593v1.593ZM15.407 8.5A6.907 6.907 0 0 1 8.5 15.407V17A8.5 8.5 0 0 0 17 8.5h-1.593ZM8.5 15.407A6.907 6.907 0 0 1 1.593 8.5H0A8.5 8.5 0 0 0 8.5 17v-1.593ZM1.593 8.5A6.907 6.907 0 0 1 8.5 1.593V0A8.5 8.5 0 0 0 0 8.5h1.593ZM8.5 1.593A6.907 6.907 0 0 1 15.407 8.5H17A8.5 8.5 0 0 0 8.5 0v1.593Zm.797 7.934V4.563H7.703v4.964h1.594Zm-.797 3.27h.024v-1.594H8.5v1.593Z" fill="#000"/></svg>

package/assets/icons/exclamation_medium.svg

@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.503 15.118a.75.75 0 0 0 1.5 0h-1.5Zm1.5-11.868a.75.75 0 0 0-1.5 0h1.5Zm0 11.868V3.25h-1.5v11.868h1.5Z" fill="#000"/></svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.997 15.118V3.25m-.646 16.765h1.31m.089 0c0 .438-.31.747-.753.747a.718.718 0 0 1-.747-.747c0-.442.31-.753.747-.753.443 0 .753.31.753.753Z" stroke="#000" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/></svg>

package/assets/icons/reply.svg

@@ -1 +1 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.28 5.75A7.447 7.447 0 0 1 15 11.872a4.667 4.667 0 0 0-4.667-4.667A4.613 4.613 0 0 0 6.617 9.09l1.987 1.986a.467.467 0 0 1-.33.797h-6.34A.933.933 0 0 1 1 10.939V4.597a.467.467 0 0 1 .796-.33L3.28 5.75Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.389 3.028a1 1 0 0 0-1.733-.678L1.015 6.292a1 1 0 0 0 0 1.356l3.639 3.943a1 1 0 0 0 1.733-.679V8.97h4a5 5 0 0 1 5 5v-4a5 5 0 0 0-5-5h-4l.002-1.942Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/assets/icons/reply_medium.svg

@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.415 8.604a11.969 11.969 0 0 1 18.835 9.838 7.5 7.5 0 0 0-7.5-7.5 7.415 7.415 0 0 0-5.972 3.028l3.192 3.192a.75.75 0 0 1-.531 1.28H2.25a1.5 1.5 0 0 1-1.5-1.5V6.75a.75.75 0 0 1 1.28-.53l2.385 2.384Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M9.48 4.543a1.5 1.5 0 0 0-2.6-1.018L1.42 9.439a1.5 1.5 0 0 0 0 2.034l5.458 5.914a1.5 1.5 0 0 0 2.6-1.018v-2.913h6a7.5 7.5 0 0 1 7.5 7.5v-6a7.5 7.5 0 0 0-7.5-7.5h-6l.003-2.913Z" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/assets/icons/stopwatch.svg

@@ -1 +1 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 3.75a6 6 0 1 1 0 12 6 6 0 0 1 0-12Zm0 0v-3m4 4.5L13.25 4M13 3.75l.5.5m-4-3.5h-3m1.5 9.5L6 8.036" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 3.8A5.6 5.6 0 1 1 8 15 5.6 5.6 0 0 1 8 3.8Zm0 0V1m3.733 4.2L12.9 4.033m-.233-.233.466.467M9.4 1H6.6M8 9.867 6.133 7.8" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/cjs/components/Badge.d.ts

@@ -0,0 +1,3 @@
+export * from "./badge/Badge";
+export default Badge;
+import Badge from "./badge/Badge";

package/cjs/components/{slider/web-component.js → Badge.js}

@@ -30,18 +30,16 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {};
 exports.default = void 0;
 
-var _customElement = require("../../shared/custom-element");
+var _Badge = _interopRequireWildcard(require("./badge/Badge"));
 
-var _Slider = _interopRequireWildcard(require("./Slider"));
-
-Object.keys(_Slider).forEach(function (key) {
+Object.keys(_Badge).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Slider[key]) return;
+  if (key in exports && exports[key] === _Badge[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Slider[key];
+      return _Badge[key];
     }
   });
 });
@@ -50,6 +48,5 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var _default = _Slider.default;
-exports.default = _default;
-(0, _customElement.registerElement)(_Slider.default === null || _Slider.default === void 0 ? void 0 : _Slider.default.tagName, _Slider.default, _Slider.default.defaultProps);
+var _default = _Badge.default;
+exports.default = _default;

package/cjs/components/Style.d.ts

@@ -0,0 +1 @@
+export default Style;

package/cjs/components/Style.js

@@ -0,0 +1,52 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+
+var _Style = _interopRequireWildcard(require("./style/Style"));
+
+Object.keys(_Style).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Style[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Style[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = _Style.default;
+exports.default = _default;

package/cjs/components/Table.d.ts

@@ -0,0 +1,3 @@
+export * from "./table/Table";
+export default Table;
+import Table from "./table/Table";

package/cjs/components/Table.js

@@ -0,0 +1,52 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+
+var _Table = _interopRequireWildcard(require("./table/Table"));
+
+Object.keys(_Table).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Table[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Table[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = _Table.default;
+exports.default = _default;

package/cjs/components/accordion/AccordionContent.js

@@ -238,7 +238,7 @@ var AccordionContent = function (_React$PureComponent) {
         id: "".concat(id, "-content"),
         role: 'region',
         'aria-labelledby': "".concat(id, "-header"),
-        className: (0, _classnames.default)('dnb-accordion__content__inner', (0, _SpacingHelper.createSpacingClasses)(rest), keepContentInDom === false && 'dnb-accordion__content__inner--remove-content')
+        className: (0, _classnames.default)('dnb-accordion__content__inner', (0, _SpacingHelper.createSpacingClasses)(rest), !expanded && !keepContentInDom && 'dnb-accordion__content__inner--remove-content')
       };
 
       if (expanded) {

package/cjs/components/autocomplete/Autocomplete.d.ts

@@ -41,6 +41,7 @@ export type AutocompleteFixedPosition = string | boolean;
 export type AutocompletePreventFocus = string | boolean;
 export type AutocompleteSkipKeysearch = string | boolean;
 export type AutocompleteSelectedValue = string | React.ReactNode;
+export type AutocompleteSuffixValue = string | React.ReactNode;
 export type AutocompleteContent = string | React.ReactNode | string[];
 export type AutocompleteRawData =
   | any[]
@@ -115,6 +116,7 @@ export type AutocompleteData =
       | React.ReactNode
       | {
           selected_value?: string | React.ReactNode;
+          suffix_value?: string | React.ReactNode;
           content?: string | React.ReactNode | string[];
         }
     )[];
@@ -208,6 +210,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
    */
   skip_keysearch?: AutocompleteSkipKeysearch;
   selected_value?: AutocompleteSelectedValue;
+  suffix_value?: AutocompleteSuffixValue;
   content?: AutocompleteContent;
   prepared_data?: any[];
   raw_data?: AutocompleteRawData;
@@ -261,6 +264,11 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
    */
   show_options_sr?: string;
 
+  /**
+   * Only for screen readers (VocieOver). The label used to announce the selected item. Defaults to `Valgt:`.
+   */
+  selected_sr?: string;
+
   /**
    * Title on submit button. Defaults to `Vis alternativer`.
    */
@@ -541,6 +549,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   children?: AutocompleteChildren;
   custom_element?: Object;
   custom_method?: (...args: any[]) => any;
+  ariaLiveDelay?: number;
 
   /**
    * Will be called once the user presses the autocomplete. Returns the data item `{ data, attributes }`.

package/cjs/components/autocomplete/Autocomplete.js

@@ -101,7 +101,7 @@ var _Input = _interopRequireWildcard(require("../input/Input"));
 
 var _ProgressIndicator = _interopRequireDefault(require("../progress-indicator/ProgressIndicator"));
 
-var _DrawerList = _interopRequireDefault(require("../../fragments/drawer-list/DrawerList"));
+var _DrawerList = _interopRequireWildcard(require("../../fragments/drawer-list/DrawerList"));
 
 var _DrawerListContext = _interopRequireDefault(require("../../fragments/drawer-list/DrawerListContext"));
 
@@ -112,7 +112,7 @@ var _DrawerListHelpers = require("../../fragments/drawer-list/DrawerListHelpers"
 var _IconPrimary, _AlignmentHelper;
 
 var _excluded = ["fillDataIfEmpty"],
-    _excluded2 = ["title", "placeholder", "label", "label_direction", "label_sr_only", "icon", "icon_size", "input_icon", "size", "align_autocomplete", "fixed_position", "status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "scrollable", "focusable", "keep_open", "keep_value", "keep_value_and_selection", "show_clear_button", "prevent_close", "no_animation", "no_scroll_animation", "show_submit_button", "submit_element", "input_element", "options_render", "prevent_selection", "max_height", "default_value", "search_numbers", "search_in_word_index", "show_options_sr", "submit_button_title", "submit_button_icon", "portal_class", "drawer_class", "input_ref", "className", "class", "disabled", "stretch", "skeleton", "triangle_position", "icon_position", "skip_portal", "mode", "data", "children", "direction", "id", "opened", "value", "input_value", "indicator_label", "no_options", "show_all", "aria_live_options", "disable_highlighting"];
+    _excluded2 = ["title", "placeholder", "label", "label_direction", "label_sr_only", "icon", "icon_size", "input_icon", "size", "align_autocomplete", "fixed_position", "status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "scrollable", "focusable", "keep_open", "keep_value", "keep_value_and_selection", "show_clear_button", "prevent_close", "no_animation", "no_scroll_animation", "show_submit_button", "submit_element", "input_element", "options_render", "prevent_selection", "max_height", "default_value", "search_numbers", "search_in_word_index", "show_options_sr", "selected_sr", "submit_button_title", "submit_button_icon", "portal_class", "drawer_class", "input_ref", "className", "class", "disabled", "stretch", "skeleton", "triangle_position", "icon_position", "skip_portal", "mode", "data", "children", "direction", "id", "opened", "value", "input_value", "indicator_label", "no_options", "show_all", "aria_live_options", "disable_highlighting", "ariaLiveDelay"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -212,6 +212,7 @@ _defineProperty(Autocomplete, "defaultProps", {
   aria_live_options: null,
   indicator_label: null,
   show_options_sr: null,
+  selected_sr: null,
   submit_button_title: null,
   submit_button_icon: 'chevron_down',
   input_ref: null,
@@ -272,6 +273,7 @@ _defineProperty(Autocomplete, "defaultProps", {
   children: null,
   custom_element: null,
   custom_method: null,
+  ariaLiveDelay: null,
   on_show: null,
   on_hide: null,
   on_type: null,
@@ -293,6 +295,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_
   aria_live_options: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   indicator_label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   show_options_sr: _propTypes.default.string,
+  selected_sr: _propTypes.default.string,
   submit_button_title: _propTypes.default.string,
   submit_button_icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func]),
   input_ref: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
@@ -332,6 +335,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_
   input_element: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
   data: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node, _propTypes.default.object]), _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]), _propTypes.default.shape({
     selected_value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+    suffix_value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
     content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.string)])
   })]))]),
   search_in_word_index: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
@@ -357,6 +361,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_
   children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node, _propTypes.default.object, _propTypes.default.array]),
   custom_element: _propTypes.default.object,
   custom_method: _propTypes.default.func,
+  ariaLiveDelay: _propTypes.default.number,
   on_show: _propTypes.default.func,
   on_type: _propTypes.default.func,
   on_focus: _propTypes.default.func,
@@ -930,16 +935,16 @@ var AutocompleteInstance = function (_React$PureComponent2) {
       };
     });
 
-    _defineProperty(_assertThisInitialized(_this2), "hasShowMore", function () {
+    _defineProperty(_assertThisInitialized(_this2), "hasInjectedDataItem", function () {
       var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this2.context.drawerList.data;
       var lastItem = data.slice(-1)[0];
-      return lastItem && lastItem.show_all === true;
+      return lastItem ? lastItem.show_all || lastItem.__id === 'no_options' : false;
     });
 
     _defineProperty(_assertThisInitialized(_this2), "countData", function () {
       var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this2.context.drawerList.data;
       var count = data.length;
-      return count > 0 && _this2.hasShowMore(data) ? count - 1 : count;
+      return count > 0 && _this2.hasInjectedDataItem(data) ? count - 1 : count;
     });
 
     _defineProperty(_assertThisInitialized(_this2), "hasValidData", function () {
@@ -1324,6 +1329,14 @@ var AutocompleteInstance = function (_React$PureComponent2) {
       return res;
     });
 
+    _defineProperty(_assertThisInitialized(_this2), "setVisibleAndFocusOnInput", function () {
+      if (!_this2.state.hasFocus && !(0, _helpers.hasSelectedText)()) {
+        _this2.setFocusOnInput();
+
+        _this2.setVisible();
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this2), "onSelectHandler", function (args) {
       if (parseFloat(args.active_item) > -1) {
         (0, _componentHelper.dispatchCustomElementEvent)(_assertThisInitialized(_this2), 'on_select', _objectSpread(_objectSpread({}, args), _this2.getEventObjects('on_select')));
@@ -1502,10 +1515,13 @@ var AutocompleteInstance = function (_React$PureComponent2) {
       var opened = this.context.drawerList.opened;
       var _this$_props = this._props,
           aria_live_options = _this$_props.aria_live_options,
-          no_options = _this$_props.no_options;
+          no_options = _this$_props.no_options,
+          _this$_props$ariaLive = _this$_props.ariaLiveDelay,
+          ariaLiveDelay = _this$_props$ariaLive === void 0 ? 1000 : _this$_props$ariaLive;
       clearTimeout(this._ariaLiveUpdateTimeout);
-      this._ariaLiveUpdateTimeout = setTimeout(function () {
-        if (opened) {
+
+      if (opened) {
+        this._ariaLiveUpdateTimeout = setTimeout(function () {
           var newString = null;
 
           var count = _this5.countData();
@@ -1527,14 +1543,33 @@ var AutocompleteInstance = function (_React$PureComponent2) {
                 ariaLiveUpdate: null,
                 _listenForPropChanges: false
               });
-            }, 1e3);
+            }, 1000);
           }
-        }
-      }, 1e3);
+        }, ariaLiveDelay);
+      }
+    }
+  }, {
+    key: "getVocieOverActiveItem",
+    value: function getVocieOverActiveItem(selected_sr) {
+      if (_helpers.IS_MAC) {
+        var _this$context$drawerL = this.context.drawerList,
+            active_item = _this$context$drawerL.active_item,
+            selected_item = _this$context$drawerL.selected_item;
+        var currentDataItem = (0, _DrawerListHelpers.getCurrentData)(active_item, this.context.drawerList.data);
+        return _react.default.createElement("span", {
+          className: "dnb-sr-only",
+          "aria-live": "assertive",
+          "aria-atomic": true
+        }, currentDataItem && _react.default.createElement(_react.default.Fragment, null, active_item === selected_item ? _react.default.createElement(_react.default.Fragment, null, selected_sr, " ") : null, _react.default.createElement(_DrawerList.ItemContent, null, currentDataItem)));
+      }
+
+      return null;
     }
   }, {
     key: "render",
     value: function render() {
+      var _getCurrentData;
+
       var props = this._props = (0, _componentHelper.extendPropsWithContext)(this.props, Autocomplete.defaultProps, this.context.getTranslation(this.props).Autocomplete, this.context.FormRow, this.context.Autocomplete);
 
       var title = props.title,
@@ -1573,6 +1608,7 @@ var AutocompleteInstance = function (_React$PureComponent2) {
           search_numbers = props.search_numbers,
           search_in_word_index = props.search_in_word_index,
           show_options_sr = props.show_options_sr,
+          selected_sr = props.selected_sr,
           submit_button_title = props.submit_button_title,
           submit_button_icon = props.submit_button_icon,
           portal_class = props.portal_class,
@@ -1599,6 +1635,7 @@ var AutocompleteInstance = function (_React$PureComponent2) {
           show_all = props.show_all,
           aria_live_options = props.aria_live_options,
           disable_highlighting = props.disable_highlighting,
+          ariaLiveDelay = props.ariaLiveDelay,
           attributes = _objectWithoutProperties(props, _excluded2);
 
       var id = this._id;
@@ -1607,12 +1644,12 @@ var AutocompleteInstance = function (_React$PureComponent2) {
           inputValue = _this$state.inputValue,
           visibleIndicator = _this$state.visibleIndicator,
           ariaLiveUpdate = _this$state.ariaLiveUpdate;
-      var _this$context$drawerL = this.context.drawerList,
-          hidden = _this$context$drawerL.hidden,
-          selected_item = _this$context$drawerL.selected_item,
-          active_item = _this$context$drawerL.active_item,
-          direction = _this$context$drawerL.direction,
-          opened = _this$context$drawerL.opened;
+      var _this$context$drawerL2 = this.context.drawerList,
+          hidden = _this$context$drawerL2.hidden,
+          selected_item = _this$context$drawerL2.selected_item,
+          active_item = _this$context$drawerL2.active_item,
+          direction = _this$context$drawerL2.direction,
+          opened = _this$context$drawerL2.opened;
       var isExpanded = Boolean(opened) && this.hasValidData();
       delete attributes.onBlur;
       this.attributes = (0, _componentHelper.validateDOMAttributes)(null, attributes);
@@ -1620,7 +1657,7 @@ var AutocompleteInstance = function (_React$PureComponent2) {
       _extends(this.context.drawerList.attributes, this.attributes);
 
       var mainParams = {
-        className: (0, _classnames.default)("dnb-autocomplete dnb-autocomplete--".concat(direction, " dnb-form-component"), (0, _SpacingHelper.createSpacingClasses)(props), _className, className, opened && 'dnb-autocomplete--opened', label_direction && "dnb-autocomplete--".concat(label_direction), icon_position && "dnb-autocomplete--icon-position-".concat(icon_position), align_autocomplete && "dnb-autocomplete--".concat(align_autocomplete), visibleIndicator && 'dnb-autocomplete--show-indicator', size && "dnb-autocomplete--".concat(size), (0, _componentHelper.isTrue)(stretch) && "dnb-autocomplete--stretch", status && "dnb-autocomplete__status--".concat(status_state), showStatus && 'dnb-autocomplete__form-status')
+        className: (0, _classnames.default)("dnb-autocomplete dnb-form-component", (0, _SpacingHelper.createSpacingClasses)(props), _className, className, direction && "dnb-autocomplete--".concat(direction), disabled && 'dnb-autocomplete--disabled', opened && 'dnb-autocomplete--opened', label_direction && "dnb-autocomplete--".concat(label_direction), icon_position && "dnb-autocomplete--icon-position-".concat(icon_position), align_autocomplete && "dnb-autocomplete--".concat(align_autocomplete), visibleIndicator && 'dnb-autocomplete--show-indicator', size && "dnb-autocomplete--".concat(size), (0, _componentHelper.isTrue)(stretch) && "dnb-autocomplete--stretch", status && "dnb-autocomplete__status--".concat(status_state), showStatus && 'dnb-autocomplete__form-status')
       };
       var shellParams = {
         className: 'dnb-autocomplete__shell dnb-no-focus',
@@ -1699,6 +1736,7 @@ var AutocompleteInstance = function (_React$PureComponent2) {
         }, triggerParams));
       }
 
+      var suffixValue = (_getCurrentData = (0, _DrawerListHelpers.getCurrentData)(selected_item, this.context.drawerList.original_data)) === null || _getCurrentData === void 0 ? void 0 : _getCurrentData.suffix_value;
       (0, _componentHelper.validateDOMAttributes)(null, mainParams);
       (0, _componentHelper.validateDOMAttributes)(null, shellParams);
       return _react.default.createElement("span", mainParams, label && _react.default.createElement(_FormLabel.default, {
@@ -1734,6 +1772,10 @@ var AutocompleteInstance = function (_React$PureComponent2) {
         status: status ? status_state : null,
         status_state: status_state,
         type: null,
+        inner_element: suffixValue && _react.default.createElement("span", {
+          onClick: disabled ? null : this.setVisibleAndFocusOnInput,
+          className: "dnb-autocomplete__suffix_value"
+        }, suffixValue),
         submit_element: submitButton,
         input_state: this.state.skipFocusDuringChange ? 'focus' : undefined,
         clear: (0, _componentHelper.isTrue)(show_clear_button),
@@ -1772,16 +1814,12 @@ var AutocompleteInstance = function (_React$PureComponent2) {
         on_hide: this.onHideHandler,
         on_pre_change: this.onPreChangeHandler,
         on_key_down: this.onReserveActivityHandler,
-        onMouseDown: this.onReserveActivityHandler,
-        onTouchStart: this.onReserveActivityHandler
+        onMouseDown: this.onReserveActivityHandler
       })), suffix && _react.default.createElement(_Suffix.default, {
         className: "dnb-autocomplete__suffix",
         id: id + '-suffix',
         context: props
-      }, suffix))), _helpers.IS_MAC && _react.default.createElement("span", {
-        className: "dnb-sr-only",
-        "aria-live": "assertive"
-      }, AutocompleteInstance.getCurrentDataTitle(active_item, this.context.drawerList.original_data)), _react.default.createElement("span", {
+      }, suffix))), this.getVocieOverActiveItem(selected_sr), _react.default.createElement("span", {
         className: "dnb-sr-only",
         "aria-live": "assertive"
       }, ariaLiveUpdate));