@daikin-oss/design-system-web-components 0.6.0 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,160 @@
 # @daikin-oss/design-system-web-components
 
+## 1.0.0
+
+### Major Changes
+
+- [#156](https://github.com/dsv-rp/DDS/pull/156) [`bb71fa8`](https://github.com/dsv-rp/DDS/commit/bb71fa8316e179b8e7d8b1944123bc9198b51734) Thanks [@yodas7](https://github.com/yodas7)! - v1 Release.
+
+### Minor Changes
+
+- [#98](https://github.com/dsv-rp/DDS/pull/98) [`b5d0822`](https://github.com/dsv-rp/DDS/commit/b5d08224b88151d9be875f3d2ccb195fe71ce9fe) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Tooltip: The `variant` attribute has been replaced by the `color` attribute, which accepts `default` and `inverse` instead of `light` and `dark`.
+  Tooltip: Replaced colors with design tokens (brings dark mode support).
+  Tooltip: Update appearance.
+
+- [#143](https://github.com/dsv-rp/DDS/pull/143) [`42c0a7f`](https://github.com/dsv-rp/DDS/commit/42c0a7f06ae2b39e9207a554549fd52f95fc0649) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - **BREAKING CHANGE** Radio Group: Fixed an issue where the `"horizontal"` and `"vertical"` of the `orientation` property were switched. Also, the default value is now `"vertical"`.
+
+- [#109](https://github.com/dsv-rp/DDS/pull/109) [`f08378f`](https://github.com/dsv-rp/DDS/commit/f08378f746e93529d10ce40f9075e4e783b7e7dc) Thanks [@poetrainy](https://github.com/poetrainy)! - Carousel: Initial Implementation. (DDS-1296)
+
+- [#124](https://github.com/dsv-rp/DDS/pull/124) [`2695f01`](https://github.com/dsv-rp/DDS/commit/2695f0162180baeff767334de5a13a0128bad8bc) Thanks [@poetrainy](https://github.com/poetrainy)! - Carousel Item: Added `title` and `description` slots. (DDS-1820)
+
+- [#117](https://github.com/dsv-rp/DDS/pull/117) [`b45a524`](https://github.com/dsv-rp/DDS/commit/b45a524ed060a415621a4a57e1de8efb3925723b) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Accordion Item: The `open` attribute is now controlled by the parent `<daikin-accordion>` element.
+  Accordion: The `openItems` and `exclusive` attributes have been added.
+  Accordion Item: The `name` attribute has been added.
+
+- [#130](https://github.com/dsv-rp/DDS/pull/130) [`80374c3`](https://github.com/dsv-rp/DDS/commit/80374c3e3330798ccc5385eacbb5b8c91a53d0dd) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - **BREAKING CHANGE** Icon: Removed arrowUp icon. (DDS-1822)
+
+- [#132](https://github.com/dsv-rp/DDS/pull/132) [`c8e2137`](https://github.com/dsv-rp/DDS/commit/c8e2137ada522398f0f88c7046db309542f56116) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Tree: The selection status of the tree items is now managed by `selectedItems` property of `daikin-tree`. (DDS-1869)
+  **BREAKING CHANGE** Tree: The `selected` property has been removed. Use `selectedItems` instead. (DDS-1869)
+  Tree: Updated appearance. (DDS-1869)
+
+### Patch Changes
+
+- [#119](https://github.com/dsv-rp/DDS/pull/119) [`1071b92`](https://github.com/dsv-rp/DDS/commit/1071b9250ed147f76ddf4bb402368897078c9d4b) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Notification: The notification component has been removed and split into inline notification and toast notification.
+  Toast Notification: Initial Implementation. (DDS-1172)
+  Inline Notification: Initial Implementation. (DDS-1362)
+
+- [#151](https://github.com/dsv-rp/DDS/pull/151) [`bc99ad1`](https://github.com/dsv-rp/DDS/commit/bc99ad16878f12a4003ea7374971faca3293cbbb) Thanks [@yodas7](https://github.com/yodas7)! - Detect multiple registrations and display a warning if the versions are different.
+
+- [#116](https://github.com/dsv-rp/DDS/pull/116) [`49fbc4b`](https://github.com/dsv-rp/DDS/commit/49fbc4bb39d3c1c39d0486f43cc9f9945fdbe794) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Pagination: Updated appearance.
+
+- [#128](https://github.com/dsv-rp/DDS/pull/128) [`9e27a56`](https://github.com/dsv-rp/DDS/commit/9e27a565eb2e2f6f9b6781645d6fb04640930a16) Thanks [@poetrainy](https://github.com/poetrainy)! - Progress Bar: Updated appearance. (DDS-1865)
+
+- [#118](https://github.com/dsv-rp/DDS/pull/118) [`b3c90a8`](https://github.com/dsv-rp/DDS/commit/b3c90a8f69b1144e9631c258b7b96bc792e8b7f2) Thanks [@poetrainy](https://github.com/poetrainy)! - Progress Bar: Updated appearance.
+
+- [#133](https://github.com/dsv-rp/DDS/pull/133) [`396b75f`](https://github.com/dsv-rp/DDS/commit/396b75f0e6d9b271024ac35f502596fd7324e933) Thanks [@poetrainy](https://github.com/poetrainy)! - Checkbox: Added a slot to override the label. The behavior does not change if the slot is not used. (DDS-1859)
+  Checkbox: Fixed an issue where the size of the component could not be changed. (DDS-1859)
+  Checkbox: Updated appearance. (DDS-1859)
+
+- [#139](https://github.com/dsv-rp/DDS/pull/139) [`08c7ebb`](https://github.com/dsv-rp/DDS/commit/08c7ebbfc375e22fa6dec58afc8eda84fc2e2b98) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - List: Updated documentation. (DDS-1838)
+
+- [#113](https://github.com/dsv-rp/DDS/pull/113) [`d379004`](https://github.com/dsv-rp/DDS/commit/d3790049271f9a7c120991335428a48f229bab65) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Checkbox: Fixed an issue where clicking the label triggers click event twice. (DDS-1679)
+  Radio Button: Fixed an issue where clicking the label triggers click event twice. (DDS-1679)
+
+- [#125](https://github.com/dsv-rp/DDS/pull/125) [`551d75d`](https://github.com/dsv-rp/DDS/commit/551d75dfd75794e0761905921d927493dc18e8fb) Thanks [@poetrainy](https://github.com/poetrainy)! - Input Group: Updated appearance. (DDS-1862)
+
+- [#137](https://github.com/dsv-rp/DDS/pull/137) [`a92d21b`](https://github.com/dsv-rp/DDS/commit/a92d21ba7f81e8b4e0dd110753e8bbc6df3bafb4) Thanks [@poetrainy](https://github.com/poetrainy)! - Tabs: The `sizing` attribute has been added. (DDS-1889)
+  Tab: Updated appearance. (DDS-1889)
+
+- [#126](https://github.com/dsv-rp/DDS/pull/126) [`6f602fd`](https://github.com/dsv-rp/DDS/commit/6f602fd5c3fcab05fdb7d208d6a5aa298351a318) Thanks [@poetrainy](https://github.com/poetrainy)! - Radio Group: Updated appearance. (DDS-1860)
+  Radio: Added a slot to override the label. The behavior does not change if the slot is not used. (DDS-1860)
+  Radio: Fixed an issue where the size of the component could not be changed. (DDS-1860)
+
+- [#123](https://github.com/dsv-rp/DDS/pull/123) [`5f75fc5`](https://github.com/dsv-rp/DDS/commit/5f75fc5fa9207762744e55d079ccfbdc74413a36) Thanks [@poetrainy](https://github.com/poetrainy)! - Card: Fixed an issue where the size of the component could not be changed. (DDS-1871)
+  Card: Updated appearance. (DDS-1871)
+
+- [#127](https://github.com/dsv-rp/DDS/pull/127) [`146ce67`](https://github.com/dsv-rp/DDS/commit/146ce670de011022ae5fa70debea6bd5db436bcf) Thanks [@poetrainy](https://github.com/poetrainy)! - Select: Updated appearance. (DDS-1872)
+
+- [#140](https://github.com/dsv-rp/DDS/pull/140) [`40d58de`](https://github.com/dsv-rp/DDS/commit/40d58de5f4d8e67d52878c116ef69df4006f1c16) Thanks [@poetrainy](https://github.com/poetrainy)! - Progress Indicator: The `status` property of `<daikin-progress-indicator-item>` is now controlled by the `currentItem` property of the parent `<daikin-progress-indicator>` element. (DDS-1866)
+
+- [#138](https://github.com/dsv-rp/DDS/pull/138) [`4556342`](https://github.com/dsv-rp/DDS/commit/455634225da4fcabd79ca209b286d61700309d17) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Link: Fixed an issue where the color was incorrect in Firefox. (DDS-1823)
+
+- [#131](https://github.com/dsv-rp/DDS/pull/131) [`cf6fa55`](https://github.com/dsv-rp/DDS/commit/cf6fa55a6f6b0700238fb031643fb4b50cf8d8a0) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Pagination: Updated appearance. (DDS-1845)
+  Pagination: Added ARIA role. (DDS-1845)
+
+- [#149](https://github.com/dsv-rp/DDS/pull/149) [`9edd37a`](https://github.com/dsv-rp/DDS/commit/9edd37a53f1fcedb590fe1cab307123e2aac77a7) Thanks [@poetrainy](https://github.com/poetrainy)! - Link: Updated appearance.
+
+- [#141](https://github.com/dsv-rp/DDS/pull/141) [`bca6b9f`](https://github.com/dsv-rp/DDS/commit/bca6b9fd9a39c6a1de93d195e3fe71354fb8d43c) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Storybook: Changed the order of the properties in the Controls tab. (DDS-1907)
+
+- [#115](https://github.com/dsv-rp/DDS/pull/115) [`91b8fe9`](https://github.com/dsv-rp/DDS/commit/91b8fe94b3262bd6197428e66192d7b9555b1d09) Thanks [@poetrainy](https://github.com/poetrainy)! - Progress Indicator: Updated appearance.
+
+- [#122](https://github.com/dsv-rp/DDS/pull/122) [`94e5885`](https://github.com/dsv-rp/DDS/commit/94e588554b5e11d41f5dc86cada75b2dd2d41c9d) Thanks [@yodas7](https://github.com/yodas7)! - Updated dependencies.
+  This also resolves the problem of some Storybook pages not being able to be opened in Safari.
+
+- [#135](https://github.com/dsv-rp/DDS/pull/135) [`4423787`](https://github.com/dsv-rp/DDS/commit/4423787fcf28f297022690b8bbca3c135742b68f) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Accordion: Fixed bugs when viewing in Safari. (DDS-1837)
+  Accordion: The contents of closed accordions will no longer be found by in-page search.
+  Accordion: Updated appearance. (DDS-1837)
+
+- [#129](https://github.com/dsv-rp/DDS/pull/129) [`9042252`](https://github.com/dsv-rp/DDS/commit/9042252d31641f7bd08bc4cc7f61634cff24b3d3) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Button: Set the maximum width by default. (DDS-1821)
+  Button: Fixed an issue where click events could be propagated through disabled links. (DDS-1821)
+
+- [#134](https://github.com/dsv-rp/DDS/pull/134) [`4c49e5e`](https://github.com/dsv-rp/DDS/commit/4c49e5ee305b5f169186245441bd27da8352c748) Thanks [@poetrainy](https://github.com/poetrainy)! - Text Area: Updated appearance. (DDS-1863)
+
+- [#152](https://github.com/dsv-rp/DDS/pull/152) [`65fb740`](https://github.com/dsv-rp/DDS/commit/65fb74071e23e13ca981b76662cff3877d051e79) Thanks [@poetrainy](https://github.com/poetrainy)! - Tabs: Updated appearance. (DDS-1931)
+
+- [#145](https://github.com/dsv-rp/DDS/pull/145) [`fcba2a4`](https://github.com/dsv-rp/DDS/commit/fcba2a4161f164c4301fba97c00097dbffe1ccc0) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Radio Group: Added support for reflecting the `disabled` property of the Input Group component. (DDS-1829)
+  Radio Group: Elements now wrap rather than overflow when placed horizontally. (DDS-1829)
+
+- [#136](https://github.com/dsv-rp/DDS/pull/136) [`a148bc4`](https://github.com/dsv-rp/DDS/commit/a148bc4fa4ea8ee2a44efc45f8739513d5dc6065) Thanks [@poetrainy](https://github.com/poetrainy)! - Table: Updated appearance. (DDS-1857)
+
+## 0.7.0
+
+### Minor Changes
+
+- [#100](https://github.com/dsv-rp/DDS/pull/100) [`b26b122`](https://github.com/dsv-rp/DDS/commit/b26b122562a2dc6400d91026fd9e04e6d4b5f324) Thanks [@poetrainy](https://github.com/poetrainy)! - Progress Indicator: Updated appearance. (DDS-1302)
+
+- [#104](https://github.com/dsv-rp/DDS/pull/104) [`c01e66d`](https://github.com/dsv-rp/DDS/commit/c01e66d51936cb04d46e5daf7ca6239ca85826ba) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Breadcrumb: The `trailing-slash` and `overflow` attributes have been removed. (DDS-1642)
+  **BREAKING CHANGE** Breadcrumb Item: The `trailing-slash` attribute has been removed. (DDS-1642)
+  **BREAKING CHANGE** Breadcrumb Item: The `ellipsis` value of the `variant` attribute has been removed. In addition, the `current` value has been added. (DDS-1642)
+  Breadcrumb: The `show-visited` attribute has been added. (DDS-1642)
+  Breadcrumb: Updated appearance. (DDS-1642)
+  Breadcrumb Item: The `show-visited` attribute has been added. (DDS-1642)
+  Breadcrumb Item: Updated appearance. (DDS-1642)
+
+- [#105](https://github.com/dsv-rp/DDS/pull/105) [`63cf888`](https://github.com/dsv-rp/DDS/commit/63cf8884649d46837e4012b9d85913dd7bf0cd5f) Thanks [@yodas7](https://github.com/yodas7)! - **BREAKING CHANGE** The `@daikin-oss/design-system-web-components` package now requires `@daikin-oss/dds-tokens` package as a peer dependency.
+  **BREAKING CHANGE** The `colors.js` file, which exported colors, has been removed. Please use `@daikin-oss/dds-tokens` instead.
+  **BREAKING CHANGE** Icon, Tooltip: Changed the prefix for CSS custom properties to `--ddc-` from `--dds-` to avoid conflicts.
+
+- [#73](https://github.com/dsv-rp/DDS/pull/73) [`18a71f6`](https://github.com/dsv-rp/DDS/commit/18a71f6a86fd4bc1cf04172b0e646a657048cd42) Thanks [@poetrainy](https://github.com/poetrainy)! - Tree: Initial Implementation.
+
+- [#99](https://github.com/dsv-rp/DDS/pull/99) [`0efff7a`](https://github.com/dsv-rp/DDS/commit/0efff7a021f73388d22f50df96be833a4b446ae7) Thanks [@poetrainy](https://github.com/poetrainy)! - Input Group: Updated appearance.
+  Progress bar: Updated appearance.
+
+- [#107](https://github.com/dsv-rp/DDS/pull/107) [`2af6462`](https://github.com/dsv-rp/DDS/commit/2af646292808a87f5095f7d97e7647dde3ac2260) Thanks [@yodas7](https://github.com/yodas7)! - Accordion: Replaced colors with design tokens (brings dark mode support).
+  Breadcrumb: Replaced colors with design tokens (brings dark mode support).
+  Button: Replaced colors with design tokens (brings dark mode support).
+  Checkbox: Replaced colors with design tokens (brings dark mode support).
+  Dropdown: Replaced colors with design tokens (brings dark mode support).
+  Icon: Replaced colors with design tokens (brings dark mode support).
+  Icon Button: Replaced colors with design tokens (brings dark mode support).
+  Input Group: Replaced colors with design tokens (brings dark mode support).
+  Link: Replaced colors with design tokens (brings dark mode support).
+  List: Replaced colors with design tokens (brings dark mode support).
+  Notification: Replaced colors with design tokens (brings dark mode support).
+  Pagination: Replaced colors with design tokens (brings dark mode support).
+  Progress Bar: Replaced colors with design tokens (brings dark mode support).
+  Progress Indicator: Replaced colors with design tokens (brings dark mode support).
+  Radio Button: Replaced colors with design tokens (brings dark mode support).
+  Select: Replaced colors with design tokens (brings dark mode support).
+  Tab: Replaced colors with design tokens (brings dark mode support).
+  Table: Replaced colors with design tokens (brings dark mode support).
+  Text Area: Replaced colors with design tokens (brings dark mode support).
+  Text Field: Replaced colors with design tokens (brings dark mode support).
+  Toggle: Replaced colors with design tokens (brings dark mode support).
+  Tree: Replaced colors with design tokens (brings dark mode support).
+
+### Patch Changes
+
+- [#111](https://github.com/dsv-rp/DDS/pull/111) [`598656f`](https://github.com/dsv-rp/DDS/commit/598656fc3851ac15461ffff9ca228fa9ad904deb) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Card: Initial Implementation. (DDS-1209)
+
+- [#110](https://github.com/dsv-rp/DDS/pull/110) [`5d5db6b`](https://github.com/dsv-rp/DDS/commit/5d5db6b2990aae84511f5c4e721d101dc7887153) Thanks [@poetrainy](https://github.com/poetrainy)! - Icon Button: Fixed the issue where the size could not be changed. (DDS-1650)
+
+- [#101](https://github.com/dsv-rp/DDS/pull/101) [`5150ef1`](https://github.com/dsv-rp/DDS/commit/5150ef1db56729b0adabbc3b246303241af7eed6) Thanks [@poetrainy](https://github.com/poetrainy)! - Text Area: Updated appearance. (DDS-1290)
+
+- [#103](https://github.com/dsv-rp/DDS/pull/103) [`12fcb40`](https://github.com/dsv-rp/DDS/commit/12fcb406567c1a436f3ac39887096e91d63130da) Thanks [@poetrainy](https://github.com/poetrainy)! - Link: Fixed underline not shown correctly with line breaks.
+
+- [#112](https://github.com/dsv-rp/DDS/pull/112) [`ffdda1e`](https://github.com/dsv-rp/DDS/commit/ffdda1eabd3e3e19dd9fe0929c390c9b56ae3340) Thanks [@poetrainy](https://github.com/poetrainy)! - Button: Updated appearance.
+
 ## 0.6.0
 
 ### Minor Changes
@@ -23,7 +178,7 @@
 
 - [#88](https://github.com/dsv-rp/DDS/pull/88) [`90e1625`](https://github.com/dsv-rp/DDS/commit/90e1625f6455b60670920e397a51370eba70ace8) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Icon: The `size` attribute now defaults to `current`.
   Icon Button: Add Icon Button Component. (DDS-1536)
-  Icon: The `size` attribute now accepts `current`, which references `--dds-icon-size` CSS variable.
+  Icon: The `size` attribute now accepts `current` , which references `--dds-icon-size` CSS variable.
 
 - [#96](https://github.com/dsv-rp/DDS/pull/96) [`bdd827f`](https://github.com/dsv-rp/DDS/commit/bdd827fe1bc400de68f11a63bb6312d368cdadd9) Thanks [@poetrainy](https://github.com/poetrainy)! - Accordion: Update appearance.
 
@@ -52,14 +207,14 @@
 
 - [#74](https://github.com/dsv-rp/DDS/pull/74) [`3151097`](https://github.com/dsv-rp/DDS/commit/3151097362d40e58e18e70914c5dd2ee83f6c430) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Tooltip: The `closeOnClick` attribute has been removed. (DDS-1501)
   **BREAKING CHANGE** Tooltip: The `trigger` and `tooltip` CSS parts have been removed. (DDS-1501)
-  **BREAKING CHANGE** Tooltip: The `tooltip` slot has been renamed to `description`. (DDS-1501)
-  Tooltip: The `trigger` attribute now accepts value of `"click"`. (DDS-1501)
+  **BREAKING CHANGE** Tooltip: The `tooltip` slot has been renamed to `description` . (DDS-1501)
+  Tooltip: The `trigger` attribute now accepts value of `"click"` . (DDS-1501)
   Tooltip: The `popover-value` attribute has been added. (DDS-1501)
 
 - [#64](https://github.com/dsv-rp/DDS/pull/64) [`d0c031d`](https://github.com/dsv-rp/DDS/commit/d0c031d28a6eeac5043546ee01209e86c9f5fc2a) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Text Area: Renamed Textarea (`daikin-textarea`) to Text Area (`daikin-text-area`). (DDS-1327)
   **BREAKING CHANGE** Text Area: The `maxlength` attribute have been removed. (DDS-1327)
   **BREAKING CHANGE** Input Group: The `textareaCounter` attribute has been removed and the `textareaMaxCount` attribute has been added. (DDS-1327)
-  Text Area: The `resizable`, `name` and `error` attributes has been added. (DDS-1327)
+  Text Area: The `resizable` , `name` and `error` attributes has been added. (DDS-1327)
   Text Area: Updated appearance. (DDS-1327)
 
 - [#62](https://github.com/dsv-rp/DDS/pull/62) [`94d6548`](https://github.com/dsv-rp/DDS/commit/94d65484625bebb2f17f023bb55b565d29d8c972) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Text Field: Renamed Text Input to Text Field. (DDS-1325)
@@ -87,35 +242,35 @@
 
 - [#60](https://github.com/dsv-rp/DDS/pull/60) [`b6d7d9f`](https://github.com/dsv-rp/DDS/commit/b6d7d9f4bb5286bb9a8dc719628624dcca3c0f75) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Checkbox: The `readonly`, `size` and `error` property has been removed. (DDS-1288)
   **BREAKING CHANGE** Checkbox: The `labelPosition` property now removed `"left"` value. (DDS-1288)
-  **BREAKING CHANGE** Checkbox: The `labelPosition` attribute (not property) has been renamed to `label-position`. (DDS-1288)
+  **BREAKING CHANGE** Checkbox: The `labelPosition` attribute (not property) has been renamed to `label-position` . (DDS-1288)
   Checkbox: The `labelPosition` property now accepts `"hidden"` value. (DDS-1288)
   Checkbox: Updated appearance. (DDS-1288)
 
 - [#75](https://github.com/dsv-rp/DDS/pull/75) [`3922068`](https://github.com/dsv-rp/DDS/commit/3922068e28efcd5786f576435f68c35983f252c2) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Improve breadcrumb accessibility. (DDS-1482)
-  **BREAKING CHANGE** Remove `link` slot from `daikin-breadcrumb-item`.
+  **BREAKING CHANGE** Remove `link` slot from `daikin-breadcrumb-item` .
 
 - [#69](https://github.com/dsv-rp/DDS/pull/69) [`3fcbc38`](https://github.com/dsv-rp/DDS/commit/3fcbc38a1affb1f3d50dbfb4e1aeb1fd34f301a7) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Accordion: The `title` attribute has been removed and replaced with a `summary` slot. (DDS-1414)
   Accordion: Updated appearance. (DDS-1414)
   Accordion Item: Updated appearance. (DDS-1414)
 
 - [#61](https://github.com/dsv-rp/DDS/pull/61) [`36ef955`](https://github.com/dsv-rp/DDS/commit/36ef9551a504de318a51a738b9b6b58edfb7f6f9) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Radio: The `readonly`, `size` and `error` properties have been removed. (DDS-1350)
-  **BREAKING CHANGE** Radio: The `labelPosition` property no longer supports `"left"`. Instead, it now supports `"hidden"`. (DDS-1350)
-  **BREAKING CHANGE** Radio: The `labelPosition` attribute (not property) has been renamed to `label-position`.
+  **BREAKING CHANGE** Radio: The `labelPosition` property no longer supports `"left"` . Instead, it now supports `"hidden"` . (DDS-1350)
+  **BREAKING CHANGE** Radio: The `labelPosition` attribute (not property) has been renamed to `label-position` .
   Radio: Updated appearance. (DDS-1350)
 
 - [#56](https://github.com/dsv-rp/DDS/pull/56) [`a81916a`](https://github.com/dsv-rp/DDS/commit/a81916ac21c4fec5e85eb1e8bf9005137887a662) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Button: The `role` attribute/property is renamed to `button-role` attribute and `buttonRole` property to avoid conflicts with standard HTML attributes.
-  **BREAKING CHANGE** Button: The `variant` attribute now accepts values of `"fill"`, `"outline"` and `"ghost"`, instead of `"primary"`, `"secondary"`, `"tertiary"` and `"primaryDanger"`.
+  **BREAKING CHANGE** Button: The `variant` attribute now accepts values of `"fill"` , `"outline"` and `"ghost"` , instead of `"primary"` , `"secondary"` , `"tertiary"` and `"primaryDanger"` .
   **BREAKING CHANGE** Button: The `isLoading` attribute has been removed.
   **BREAKING CHANGE** Button: The `leftIcon` and `rightIcon` attributes have been renamed to `left-icon` and `right-icon` respectively.
-  **BREAKING CHANGE** Button: The `type` attribute now accepts `"link"`, and whether the button becomes a link is now determined by the `type` attribute, not by the presence of the `href` attribute. If `href` is omitted with `type="link"`, it is treated as a disabled state.
-  Button: Added `color` attribute that accepts values of `"default"` and `"danger"`.
+  **BREAKING CHANGE** Button: The `type` attribute now accepts `"link"` , and whether the button becomes a link is now determined by the `type` attribute, not by the presence of the `href` attribute. If `href` is omitted with `type="link"` , it is treated as a disabled state.
+  Button: Added `color` attribute that accepts values of `"default"` and `"danger"` .
   Button: Updated appearance. (DDS-1284)
 
 - [#50](https://github.com/dsv-rp/DDS/pull/50) [`4a34db7`](https://github.com/dsv-rp/DDS/commit/4a34db738bc08e347a790c0620bc602bbf1eac5b) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Notification: The `title` and `description` attributes have been removed, and their contents are now specified using slots with the same names.
 
 - [#67](https://github.com/dsv-rp/DDS/pull/67) [`d377f50`](https://github.com/dsv-rp/DDS/commit/d377f5043f8d12c37a28772e44173b0e2a778003) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Tabs: The name of the component has been changed from `Tab Group` to `Tabs`. Use `<daikin-tabs>` instead of `<daikin-tab-group>`. (DDS-1450)
   **BREAKING CHANGE** Tabs: The signatures of the `beforechange` and `change` events have been updated to match those of other components. (DDS-1450)
-  **BREAKING CHANGE** Tab Panels: The name of the component has been changed from `Panel Switcher` to `Tab panels`. Use `<daikin-tab-panels>` instead of `<daikin-panel-switcher>`. (DDS-1450)
+  **BREAKING CHANGE** Tab Panels: The name of the component has been changed from `Panel Switcher` to `Tab panels` . Use `<daikin-tab-panels>` instead of `<daikin-panel-switcher>` . (DDS-1450)
   **BREAKING CHANGE** Tab: The `size` property has been removed. (DDS-1450)
   Tab: Updated appearance. (DDS-1450)
 

package/README.md

@@ -9,7 +9,14 @@ This project is an implementation of the Daikin Design Kit using Web Components.
 Start by installing the package:
 
 ```sh
-npm install @daikin-oss/design-system-web-components
+npm install @daikin-oss/design-system-web-components @daikin-oss/dds-tokens
+```
+
+To deploy the necessary CSS variables, import the CSS or SCSS from the `@daikin-oss/dds-tokens` package:
+For details, please check the [dds-tokens repository](https://github.com/dsv-rp/dds-tokens?tab=readme-ov-file#readme).
+
+```js
+import "@daikin-oss/dds-tokens/css/daikin/Light/variables.css";
 ```
 
 You can then import necessary components in your bundle (the .js extension is optional):
@@ -18,8 +25,6 @@ You can then import necessary components in your bundle (the .js extension is op
 import "@daikin-oss/design-system-web-components/components/button/index.js";
 ```
 
-By default, out-of-the-box, the styles are for Daikin brand in light mode.
-
 ### Fonts
 
 We use Roboto as the font for our UI components.
@@ -77,7 +82,7 @@ Reference the CSS in HTML:
 ```html
 <link
   rel="stylesheet"
-  href="node_modules/@daikin-oss/dds-tokens/build/css/DKN/Dark/buttons.css"
+  href="node_modules/@daikin-oss/dds-tokens/build/css/DKN/Dark/variables.css"
   media="(prefers-color-scheme: dark)"
 />
 ```
@@ -85,7 +90,7 @@ Reference the CSS in HTML:
 Using CSS `@import` with `prefers-color-scheme`:
 
 ```css
-@import "@daikin-oss/dds-tokens/css/daikin/Dark/buttons.css"
+@import "@daikin-oss/dds-tokens/css/daikin/Dark/variables.css"
   (prefers-color-scheme: dark);
 ```
 
@@ -96,12 +101,12 @@ Reference the CSS in HTML:
 ```html
 <link
   rel="stylesheet"
-  href="node_modules/@daikin-oss/dds-tokens/build/css/AAF/Dark/buttons.css"
+  href="node_modules/@daikin-oss/dds-tokens/build/css/AAF/Dark/variables.css"
   media="(prefers-color-scheme: light)"
 />
 <link
   rel="stylesheet"
-  href="node_modules/@daikin-oss/dds-tokens/build/css/AAF/Dark/buttons.css"
+  href="node_modules/@daikin-oss/dds-tokens/build/css/AAF/Dark/variables.css"
   media="(prefers-color-scheme: dark)"
 />
 ```
@@ -109,9 +114,9 @@ Reference the CSS in HTML:
 Using CSS `@import` with `prefers-color-scheme`:
 
 ```css
-@import "@daikin-oss/dds-tokens/css/aaf/Light/buttons.css"
+@import "@daikin-oss/dds-tokens/css/aaf/Light/variables.css"
   (prefers-color-scheme: light);
-@import "@daikin-oss/dds-tokens/css/aaf/Dark/buttons.css"
+@import "@daikin-oss/dds-tokens/css/aaf/Dark/variables.css"
   (prefers-color-scheme: dark);
 ```
 
@@ -219,27 +224,39 @@ If you encounter an `Unknown word` error, add the word to the `cspell-dictionary
 
 ### Design Tokens
 
-_We are looking for a more efficient way to import tokens._
+We manage and use design tokens to ensure consistency in our design system.
 
-1. **Source of Truth**: The `tokens` we use is the foundation of our design styles and was grabbed from https://github.com/dsv-rp/dds-tokens/tree/main.
+1. **Source of Truth**:
+   The tokens we use is the foundation of our design styles and was grabbed from https://github.com/dsv-rp/dds-tokens.
+   These design tokens are deployed as CSS variables.
 
-2. **Using in Components**: For the most part, we use the js variables to apply as the default style:
+2. **Usage in Components**:
+   The components make use of design tokens by referencing CSS variables.
+   Since they are integrated with Tailwind CSS, they are mostly used as utility classes, but in some cases they are directly referenced using `var()`.
 
-```javascript
-import {
-  buttonColorBackgroundPrimaryActive
-} from '@daikin-oss/dds-tokens/js/daikin/Light/variables.js';
+```ts
+@ddsElement("daikin-link")
+export class DaikinLink extends DDSElement {
+  static override readonly styles = css`
+    ${unsafeCSS(tailwindStyles)}
 
-class DaikinButton extends LitElement implements DaikinButtonProps {
-  static styles = css`
-    :host {
-      --defaultButtonColorBackgroundPrimaryActive: ${unsafeCSS(
-        buttonColorBackgroundPrimaryActive
-      )};
+    :host([show-visited]:not([disabled])) a:visited {
+      /* HERE */
+      color: var(--dds-color-link-text-visited-default);
     }
   `;
 
-  /* ...rest of the code */
+  override render() {
+    /* AND HERE (`text-ddt-*` classes) */
+    return html`
+      <a
+        class="text-ddt-color-link-text-default hover:text-ddt-color-link-text-hover"
+        href="https://www.example.com/"
+      >
+        ...
+      </a>
+    `;
+  }
 }
 ```
 

package/dist/cjs/base/dds-element.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const _DDSElement = class _DDSElement extends lit.LitElement {
+};
+_DDSElement.version = "1.0.0";
+let DDSElement = _DDSElement;
+exports.DDSElement = DDSElement;

package/dist/cjs/base/dds-element.d.cts

@@ -0,0 +1,4 @@
+import { LitElement } from 'lit';
+export declare class DDSElement extends LitElement {
+    static readonly version: string;
+}

package/dist/cjs/base/decorators.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const define = require("./define.cjs");
+const ddsElement = (tagName) => (classOrTarget, context) => {
+  if (context) {
+    context.addInitializer(() => {
+      define.defineDDSElement(classOrTarget, tagName);
+    });
+  } else {
+    define.defineDDSElement(classOrTarget, tagName);
+  }
+};
+exports.ddsElement = ddsElement;

package/dist/cjs/base/decorators.d.cts

@@ -0,0 +1,2 @@
+import { DDSElement } from "./dds-element.cjs";
+export declare const ddsElement: (tagName: string) => (classOrTarget: typeof DDSElement, context?: ClassDecoratorContext<typeof DDSElement>) => void;

package/dist/cjs/base/define.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ddsElement = require("./dds-element.cjs");
+const currentVersion = ddsElement.DDSElement.version;
+function defineDDSElement(ctor, name) {
+  const existing = customElements.get(name);
+  if (existing) {
+    const existingVersion = existing.version ?? "unknown version";
+    if (existingVersion !== currentVersion) {
+      console.warn(
+        `<${name}> is already registered but the version does not match. (${existingVersion} vs ${currentVersion})`
+      );
+    }
+    return;
+  }
+  customElements.define(name, ctor);
+}
+exports.defineDDSElement = defineDDSElement;

package/dist/cjs/base/define.d.cts

@@ -0,0 +1 @@
+export declare function defineDDSElement(ctor: CustomElementConstructor, name: string): void;

package/dist/cjs/base/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ddsElement = require("./dds-element.cjs");
+const decorators = require("./decorators.cjs");
+const define = require("./define.cjs");
+exports.DDSElement = ddsElement.DDSElement;
+exports.ddsElement = decorators.ddsElement;
+exports.defineDDSElement = define.defineDDSElement;

package/dist/cjs/base/index.d.cts

@@ -0,0 +1,3 @@
+export * from "./dds-element.cjs";
+export * from "./decorators.cjs";
+export * from "./define.cjs";

package/dist/cjs/components/accordion/daikin-accordion.cjs

@@ -2,18 +2,26 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
+var __decorateClass = (decorators2, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-exports.DaikinAccordion = class DaikinAccordion extends lit.LitElement {
+exports.DaikinAccordion = class DaikinAccordion extends ddsElement.DDSElement {
+  constructor() {
+    super(...arguments);
+    this.openItems = [];
+    this.exclusive = false;
+  }
   _handleMoveFocus(event) {
     const moveOffset = event.detail.direction === "up" ? -1 : 1;
     const items = this._items.filter(({ disabled }) => !disabled);
@@ -25,9 +33,28 @@ exports.DaikinAccordion = class DaikinAccordion extends lit.LitElement {
     const nextItem = items[(focusedItemIndex + moveOffset + items.length) % items.length];
     nextItem.focus();
   }
+  _handleToggle(event) {
+    const targetValue = event.target.name;
+    const opened = !event.target.open;
+    if (this.exclusive) {
+      this.openItems = opened ? [targetValue] : [];
+    } else {
+      this.openItems = opened ? [...this.openItems, targetValue] : this.openItems.filter((item) => item != targetValue);
+    }
+    this._reflectItemOpen();
+  }
+  _reflectItemOpen() {
+    for (const item of this._items) {
+      item.open = this.openItems.includes(item.name);
+    }
+  }
   render() {
     return lit.html`<div class="w-full">
-      <slot @accordion-move-focus=${this._handleMoveFocus}></slot>
+      <slot
+        @accordion-move-focus=${this._handleMoveFocus}
+        @toggle=${this._handleToggle}
+        @slotchange=${this._reflectItemOpen}
+      ></slot>
     </div>`;
   }
 };
@@ -47,9 +74,15 @@ exports.DaikinAccordion.styles = lit.css`
       --divider-bottom-display: block;
     }
   `;
+__decorateClass([
+  decorators_js.property({ type: Array, attribute: false })
+], exports.DaikinAccordion.prototype, "openItems", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinAccordion.prototype, "exclusive", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-accordion-item" })
 ], exports.DaikinAccordion.prototype, "_items", 2);
 exports.DaikinAccordion = __decorateClass([
-  decorators_js.customElement("daikin-accordion")
+  decorators.ddsElement("daikin-accordion")
 ], exports.DaikinAccordion);

package/dist/cjs/components/accordion/daikin-accordion.d.cts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * The accordion component serves as the parent element that organizes and manages the overall structure of the accordion.
  * Currently it only provides appropriate styles for individual accordion items.
@@ -12,6 +12,7 @@ import { LitElement } from 'lit';
  *
  * ```js
  * import "@daikin-oss/design-system-web-components/components/accordion/index.js";
+ * import "@daikin-oss/design-system-web-components/components/accordion-item/index.js";
  * ```
  *
  * ```html
@@ -31,10 +32,22 @@ import { LitElement } from 'lit';
  * </daikin-accordion>
  * ```
  */
-export declare class DaikinAccordion extends LitElement {
+export declare class DaikinAccordion extends DDSElement {
     static readonly styles: import('lit').CSSResult;
+    /**
+     * A list of the names of the open items.
+     * If `exclusive` is true, the number of elements is 0 or 1.
+     */
+    openItems: string[];
+    /**
+     * Whether or not to make the accordion exclusive.
+     * If true, the number of items that can be open at once is limited to one.
+     */
+    exclusive: boolean;
     private readonly _items;
     private _handleMoveFocus;
+    private _handleToggle;
+    private _reflectItemOpen;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {