@daikin-oss/design-system-web-components 1.3.2 → 1.4.0-next.1

package/CHANGELOG.md

@@ -1,5 +1,222 @@
 # @daikin-oss/design-system-web-components
 
+## 1.4.0-next.1
+
+### Minor Changes
+
+- [#324](https://github.com/dsv-rp/DDS/pull/324) [`3fb796d`](https://github.com/dsv-rp/DDS/commit/3fb796d179ce6118074ae81deaec37f3f05a2621) Thanks [@dk-wei](https://github.com/dk-wei)! - Slider (Storybook): Added kitchen sink page.
+
+- [#315](https://github.com/dsv-rp/DDS/pull/315) [`08cbddb`](https://github.com/dsv-rp/DDS/commit/08cbddb002ab1b895438c171ef30bb81078552b8) Thanks [@dk-wei](https://github.com/dk-wei)! - Button: Added `buttonTabIndex` property.
+  Icon Button: Added `buttonTabIndex` property.
+
+- [#320](https://github.com/dsv-rp/DDS/pull/320) [`1ecc452`](https://github.com/dsv-rp/DDS/commit/1ecc452826d77d0a5fb050bc31132375e68dca8a) Thanks [@dk-wei](https://github.com/dk-wei)! - Badge (Storybook): Added kitchen sink page.
+
+- [#317](https://github.com/dsv-rp/DDS/pull/317) [`9003e53`](https://github.com/dsv-rp/DDS/commit/9003e5340b4e22ecc092f47e9b4fc1b3f8804db2) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Breadcrumb: Add ellipsis variant. (DDS-2637)
+  Menu: Fixed an issue where clicking interactive elements (e.g., links) in content did not perform the default action.
+
+- [#313](https://github.com/dsv-rp/DDS/pull/313) [`e9f426f`](https://github.com/dsv-rp/DDS/commit/e9f426f0aa3d623301a1209acab82131c525533e) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Page Navigation (Storybook): Add Page Navigation recipe. (DDS-2703)
+
+- [#303](https://github.com/dsv-rp/DDS/pull/303) [`86f57e3`](https://github.com/dsv-rp/DDS/commit/86f57e385dc4f4f81a347cc9fee534f8ca7fdaee) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Preset Date Range: Add Preset Date Range recipe. (DDS-2700)
+
+- [#309](https://github.com/dsv-rp/DDS/pull/309) [`457db3a`](https://github.com/dsv-rp/DDS/commit/457db3a180089bd2c728c2a1ddfe35b6cd57f049) Thanks [@dk-wei](https://github.com/dk-wei)! - Carousel Item (Storybook): Added kitchen sink.
+
+### Patch Changes
+
+- [#322](https://github.com/dsv-rp/DDS/pull/322) [`dffa6e8`](https://github.com/dsv-rp/DDS/commit/dffa6e8d41e387931ccf7f17618f72e587fd4e62) Thanks [@yodas7](https://github.com/yodas7)! - Storybook: Added theme switcher to docs. (DDS-2419)
+
+- [#318](https://github.com/dsv-rp/DDS/pull/318) [`f28ed5d`](https://github.com/dsv-rp/DDS/commit/f28ed5da7fa3b2c9af3d07f29f5a6d2f22adfdcf) Thanks [@dk-wei](https://github.com/dk-wei)! - Checkbox Group (Storybook): Added kitchen sink page.
+
+- [#310](https://github.com/dsv-rp/DDS/pull/310) [`1d2cbec`](https://github.com/dsv-rp/DDS/commit/1d2cbec990b44f220293244521a76759c4478d4b) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Storybook: Updated the documentation for the following components with detailed explanations regarding CSS Shadow Parts section. (DDS-2706)
+
+  - Checkbox
+  - Menu
+  - Tooltip
+
+  List Item: Added a CSS part named item to allow users to customize the styles of the internal content wrapper element. (DDS-2706)
+  Tree Item: Added a CSS part named item to allow users to customize the styles of the internal content wrapper element. (DDS-2706)
+
+- [#297](https://github.com/dsv-rp/DDS/pull/297) [`50cbe34`](https://github.com/dsv-rp/DDS/commit/50cbe344469c1137f7ff8705e78200dcabd96268) Thanks [@dk-wei](https://github.com/dk-wei)! - Date Picker (Storybook): Fix component size on kitchen sink.
+
+- [#311](https://github.com/dsv-rp/DDS/pull/311) [`6605ef1`](https://github.com/dsv-rp/DDS/commit/6605ef1fe94c17e33672d599acaedf01670df65b) Thanks [@dk-wei](https://github.com/dk-wei)! - Dropdown Item (Storybook): Added kitchen sink page.
+
+- [#304](https://github.com/dsv-rp/DDS/pull/304) [`2a7e64b`](https://github.com/dsv-rp/DDS/commit/2a7e64bbe1bb76a9038d705281464c5816db11f2) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Badge: Fixed an issue where the count could be set to an unlimited value when maxCount was a null or empty value. (DDS-2694)
+  Badge (Storybook): Automatically set the initial values for `count` and `maxCount` when the user switches the type control to `number` on the Docs page. (DDS-2694)
+  Badge (Storybook): Add icon control to story. (DDS-2694)
+  Status Message: Removed the component's fixed height specification, allowing the component's height to be determined by the font size and line height. (DDS-2696)
+  Time Picker: Fixed an issue where the input field's content would not automatically clear when an invalid value was programmatically set. (DDS-2716)
+  Date Picker: Resolved a bug where the component failed to detect whether the value exceeded the max and min limits when the value was programmatically set. (DDS-2716)
+  Date Picker: Improved the screen reader announcement when a user selects a value in the date picker. (DDS-2178)
+  Preset Date Range Picker: Update appearance. (DDS-2718)
+  Dropdown: Improved the screen reader announcement when a user selects a value in the dropdown. (DDS-2718)
+
+- [#301](https://github.com/dsv-rp/DDS/pull/301) [`8f23f0c`](https://github.com/dsv-rp/DDS/commit/8f23f0cffde4670b5eb9727292c1448d44bd65d2) Thanks [@dk-wei](https://github.com/dk-wei)! - Table (Storybook): Added kitchen sink.
+
+- [#305](https://github.com/dsv-rp/DDS/pull/305) [`9389443`](https://github.com/dsv-rp/DDS/commit/9389443da3dfff1c07af4217e10aced2506129e4) Thanks [@yodas7](https://github.com/yodas7)! - Avatar: The `type` property is now validated, ensuring correct component state and rendering.
+  Avatar: The `avatarAriaExpanded` property now supports `"undefined"` value.
+  Badge: The `color` and `type` properties are now validated, ensuring correct component state and rendering.
+  Breadcrumb Item: The `type` property is now validated, ensuring correct component state and rendering.
+  Button: Added missing documentation about `form` attribute and `formAttr` property.
+  Button: The `color`, `size`, `type`, and `variant` properties are now validated, ensuring correct component state and rendering.
+  Button: The `buttonAriaExpanded` property now supports `"undefined"` value.
+  Calendar: The value of the `value` property is no longer reflected in the attribute.
+  Checkbox Group: The `orientation` property is now validated, ensuring correct component state and rendering.
+  Checkbox: Added missing documentation about `form`, `name` and `value` attributes.
+  Checkbox: The `checkState` and `labelPosition` properties are now validated, ensuring correct component state and rendering.
+  Checkbox: The value of the `value` property is no longer reflected in the attribute.
+  Combobox: Added missing documentation about `form`, `name` and `value` attributes.
+  Combobox: The value of the `value` property is no longer reflected in the attribute.
+  Date Picker: Added missing documentation about `form`, `name` and `value` attributes.
+  Date Picker: The value of the `value` property is no longer reflected in the attribute.
+  Dropdown: Added missing documentation about `form`, `name` and `value` attributes.
+  Dropdown: The value of the `value` property is no longer reflected in the attribute.
+  Icon Button: Added missing documentation about `form` attribute and `formAttr` property.
+  Icon Button: The `color`, `size`, `type`, and `variant` properties are now validated, ensuring correct component state and rendering.
+  Icon Button: The `buttonAriaExpanded` property now supports `"undefined"` value.
+  Icon: The `color` and `size` properties are now validated, ensuring correct component state and rendering.
+  Inline Notification: The `layout` and `status` properties are now validated, ensuring correct component state and rendering.
+  List Item: The `type` property is now validated, ensuring correct component state and rendering.
+  Loading: The `size` property is now validated, ensuring correct component state and rendering.
+  Logo: The `mode` property is now validated, ensuring correct component state and rendering.
+  Menu: The `placement`, `popoverValue` and `trigger` properties are now validated, ensuring correct component state and rendering.
+  Modal: The `modalRole` property is now validated, ensuring correct component state and rendering.
+  Progress Bar: The `size` and `variant` properties are now validated, ensuring correct component state and rendering.
+  Progress Indicator Item: The `status` property is now validated, ensuring correct component state and rendering.
+  Radio Group: The `orientation` property is now validated, ensuring correct component state and rendering.
+  Radio: Added missing documentation about `form`, `name` and `value` attributes.
+  Radio: The value of the `value` property is no longer reflected in the attribute.
+  Slider: Added missing documentation about `form`, `name` and `value` attributes.
+  Slider: The value of the `value` property is no longer reflected in the attribute.
+  Status Message: The `size` and `status` properties are now validated, ensuring correct component state and rendering.
+  Tab Panels: The value of the `value` property is no longer reflected in the attribute.
+  Tab: The `sizing` property is now validated, ensuring correct component state and rendering.
+  Tab: The value of the `value` property is no longer reflected in the attribute.
+  Tabs: The `sizing` property is now validated, ensuring correct component state and rendering.
+  Tabs: The value of the `value` property is no longer reflected in the attribute.
+  Table Cell: The `alignment` property is now validated, ensuring correct component state and rendering.
+  Table Header Cell: The `alignment` property is now validated, ensuring correct component state and rendering.
+  Textarea: Added missing documentation about `form`, `name` and `value` attributes.
+  Textarea: The value of the `value` property is no longer reflected in the attribute.
+  Text Field: Added missing documentation about `form`, `name` and `value` attributes.
+  Text Field: The value of the `value` property is no longer reflected in the attribute.
+  Text Masked Field: Added missing documentation about `form`, `name` and `value` attributes.
+  Text Masked Field: The value of the `value` property is no longer reflected in the attribute.
+  Time Picker: Added missing documentation about `form`, `name` and `value` attributes.
+  Time Picker: The value of the `value` property is no longer reflected in the attribute.
+  Toast Notification: The `layout` and `status` properties are now validated, ensuring correct component state and rendering.
+  Tooltip: The `color`, `placement`, `popoverValue`, and `trigger` properties are now validated, ensuring correct component state and rendering.
+
+- [#316](https://github.com/dsv-rp/DDS/pull/316) [`0aa7d4f`](https://github.com/dsv-rp/DDS/commit/0aa7d4f7b055c6169b1e46f790c0aa0d9ca4614c) Thanks [@yodas7](https://github.com/yodas7)! - Icon: Updated docs to organize custom icon usage and color customization into dedicated sections.
+
+- [#323](https://github.com/dsv-rp/DDS/pull/323) [`9994caa`](https://github.com/dsv-rp/DDS/commit/9994caa66197517b5972958820fa5c19b95eac8f) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Optimized and standardized the text line-break strategy for the following components. (DDS-2792)
+
+  - Toast Notification
+  - Inline Notification
+  - Accordion Item
+  - Combobox
+  - Dropdown
+  - List Item
+  - Modal Header
+  - Status Message
+  - Table Cell
+
+  Combobox (Storybook): Update story name.
+
+- [#319](https://github.com/dsv-rp/DDS/pull/319) [`71555cd`](https://github.com/dsv-rp/DDS/commit/71555cdb79a9587c527c2c6a718d2ced8c3b90ca) Thanks [@dk-wei](https://github.com/dk-wei)! - Inline Notification (Storybook): Added kitchen sink page.
+
+- [#297](https://github.com/dsv-rp/DDS/pull/297) [`50cbe34`](https://github.com/dsv-rp/DDS/commit/50cbe344469c1137f7ff8705e78200dcabd96268) Thanks [@dk-wei](https://github.com/dk-wei)! - Date Picker (Storybook): Fix component size on kitchen sink.
+
+- [#321](https://github.com/dsv-rp/DDS/pull/321) [`00d1bda`](https://github.com/dsv-rp/DDS/commit/00d1bda09ebb8b6b95c5d9b96204d4f20166c7b4) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Breadcrumb: Fixed an issue where the collapsed state was not correctly displayed when changing the type of the breadcrumb story. (DDS-2793)
+
+## 1.4.0-next.0
+
+### Minor Changes
+
+- [#268](https://github.com/dsv-rp/DDS/pull/268) [`1aab398`](https://github.com/dsv-rp/DDS/commit/1aab3981ca38f7e9c105b02c7087c6ea647feb37) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Badge: Add Badge component. (DDS-2613)
+
+- [#287](https://github.com/dsv-rp/DDS/pull/287) [`b235f19`](https://github.com/dsv-rp/DDS/commit/b235f1952e77a68477fbe048c3400652186049fb) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Menu: Menu position now supports `top-start` , `top-end` , `bottom-start` , `bottom-end` , `left-start` , `left-end` , `right-start` , and `right-end` . (DDS-2636)
+
+- [#275](https://github.com/dsv-rp/DDS/pull/275) [`2ed2500`](https://github.com/dsv-rp/DDS/commit/2ed2500d4e26afa858bb75f681d1ce895008203e) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Status Message: Add Status Message component. (DDS-2415)
+
+- [#291](https://github.com/dsv-rp/DDS/pull/291) [`1dadbac`](https://github.com/dsv-rp/DDS/commit/1dadbacb4c54bad3427116b78ce08e8129271ed3) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Date Time Range: Add date time range recipe. (DDS-2629)
+  Date Picker: Improved the appearance when the ​placeholder content is too long.
+  Time Picker: Improved the appearance when the ​placeholder content is too long.
+
+### Patch Changes
+
+- [#274](https://github.com/dsv-rp/DDS/pull/274) [`1c14478`](https://github.com/dsv-rp/DDS/commit/1c14478b2d9dc2d03dbfc6454698367e6e2bd886) Thanks [@dk-wei](https://github.com/dk-wei)! - - Add progress indicator kitchen sink page for next version.
+
+- [#281](https://github.com/dsv-rp/DDS/pull/281) [`5fc5fee`](https://github.com/dsv-rp/DDS/commit/5fc5feed083e8ff06af01d23929b94a32163250e) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Storybook: Adjust Storybook's default viewport width to facilitate testing. (DDS-2558)
+
+- [#293](https://github.com/dsv-rp/DDS/pull/293) [`d8f89cd`](https://github.com/dsv-rp/DDS/commit/d8f89cd0c1c3c76997b6b5f3b28cef6d1439899e) Thanks [@dk-wei](https://github.com/dk-wei)! - - Add tree item kitchen sink page.
+
+- [#271](https://github.com/dsv-rp/DDS/pull/271) [`c6a8dca`](https://github.com/dsv-rp/DDS/commit/c6a8dcafa35ebc5570e3b2931d013063ab73cfb8) Thanks [@dk-wei](https://github.com/dk-wei)! - Add toast notification kitchen sink page for next branch.
+
+- [#283](https://github.com/dsv-rp/DDS/pull/283) [`69ba47f`](https://github.com/dsv-rp/DDS/commit/69ba47f47d6e93ece20e45f2317da1d21d97b9ee) Thanks [@dk-wei](https://github.com/dk-wei)! - Add select kitchen sink page.
+
+- [#270](https://github.com/dsv-rp/DDS/pull/270) [`fcab6cd`](https://github.com/dsv-rp/DDS/commit/fcab6cd5c0b6b9a6e37a54620a67b8542b88a2b6) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Icon: Update the actual size definitions in the code to match the Figma specifications.
+
+- [#302](https://github.com/dsv-rp/DDS/pull/302) [`1ebe8a6`](https://github.com/dsv-rp/DDS/commit/1ebe8a636145dadc366a0fb066c77de784725a74) Thanks [@dk-wei](https://github.com/dk-wei)! - Table Cell (Storybook): Added kitchen sink.
+
+- [#276](https://github.com/dsv-rp/DDS/pull/276) [`bc590c1`](https://github.com/dsv-rp/DDS/commit/bc590c1ae3b4c7d2d6720e615270abdc80097ae5) Thanks [@dk-wei](https://github.com/dk-wei)! - Add progress indicator item kitchen sink page for next version.
+
+- [#296](https://github.com/dsv-rp/DDS/pull/296) [`1522517`](https://github.com/dsv-rp/DDS/commit/1522517ca379caf3cd487c93932eb5ef7d0ed2b2) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Fixed an issue where the menu popup could not be closed on touch devices under certain conditions. (DDS-2736)
+
+- [#295](https://github.com/dsv-rp/DDS/pull/295) [`e8739ed`](https://github.com/dsv-rp/DDS/commit/e8739edffde9e6a58bb5b4bb406eb6e2e28362ef) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Toast Notification (Storybook): Changed control type to "date" for `timestamp` property.
+  Inline Notification (Storybook): Changed control type to "date" for `timestamp` property.
+
+- [#265](https://github.com/dsv-rp/DDS/pull/265) [`f6f39c7`](https://github.com/dsv-rp/DDS/commit/f6f39c751a1a90fc1aca48aed9a774b6e4f7520d) Thanks [@dk-wei](https://github.com/dk-wei)! - Add icon kitchen sink page to the next branch.
+
+- [#292](https://github.com/dsv-rp/DDS/pull/292) [`4730869`](https://github.com/dsv-rp/DDS/commit/47308699e3628c4ccd337f4239ef57c45413c551) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Tree: Updated the documentation regarding the `selectedItems` property.
+  Tree Section: Updated the documentation regarding the `value` property.
+  Tree Item: Updated the documentation regarding the `value` property.
+
+- [#272](https://github.com/dsv-rp/DDS/pull/272) [`e0d3723`](https://github.com/dsv-rp/DDS/commit/e0d37231cb0f0ad7fb15b814071014652fc9f359) Thanks [@dk-wei](https://github.com/dk-wei)! - - Add pagination kitchen sink page for next version.
+
+- [#279](https://github.com/dsv-rp/DDS/pull/279) [`7b8867a`](https://github.com/dsv-rp/DDS/commit/7b8867af801e71f09a658e805a524be8c5896f04) Thanks [@dk-wei](https://github.com/dk-wei)! - Add radio group kitchen sink page.
+
+- [#264](https://github.com/dsv-rp/DDS/pull/264) [`9bc7b5e`](https://github.com/dsv-rp/DDS/commit/9bc7b5efe162e52d1c1c96a959e42b5344cc9c26) Thanks [@dk-wei](https://github.com/dk-wei)! - Add Icon button Kitchen Sink page for next version.
+
+- [#294](https://github.com/dsv-rp/DDS/pull/294) [`1823167`](https://github.com/dsv-rp/DDS/commit/18231671a77b1d8adbf504445d8a07e6114f2891) Thanks [@dk-wei](https://github.com/dk-wei)! - -Add tree section kitchen sink page.
+
+- [#280](https://github.com/dsv-rp/DDS/pull/280) [`d29bc53`](https://github.com/dsv-rp/DDS/commit/d29bc535c1e89371fb56242fe500ac46f187557b) Thanks [@yodas7](https://github.com/yodas7)! - Fix sticky hover appearance on touch devices. (DDS-2676)
+
+- [#278](https://github.com/dsv-rp/DDS/pull/278) [`fcd72f5`](https://github.com/dsv-rp/DDS/commit/fcd72f540f62c298fa93c9472f99aebec2f79a60) Thanks [@dk-wei](https://github.com/dk-wei)! - - Add radio kitchen sink page for next version.
+
+- [#266](https://github.com/dsv-rp/DDS/pull/266) [`d214c31`](https://github.com/dsv-rp/DDS/commit/d214c31c77e4df43149bac8a1a7c6f7457a3533c) Thanks [@dk-wei](https://github.com/dk-wei)! - Add list item kitchen sink page for next version
+
+- [#299](https://github.com/dsv-rp/DDS/pull/299) [`977cac8`](https://github.com/dsv-rp/DDS/commit/977cac81534d6fcf14acffc24ef3650104e3af66) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Date Picker: Added a focus trap. (DDS-2350)
+
+- [#286](https://github.com/dsv-rp/DDS/pull/286) [`9e69012`](https://github.com/dsv-rp/DDS/commit/9e6901220162717d03dccdccb92db351282a24e7) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Storybook: Adjusted the Storybook viewport to remove horizontal padding when a story is displayed in a mobile-sized window. (DDS-2724)
+  Carousel (Storybook): Limited width to prevent horizontal scrolling in the mobile viewport. (DDS-2724)
+  Carousel Item (Storybook): Limited width to prevent horizontal scrolling in the mobile viewport. (DDS-2724)
+  Modal Header (Storybook): Limited width to prevent horizontal scrolling in the mobile viewport. (DDS-2724)
+  Modal Footer (Storybook): Limited width to prevent horizontal scrolling in the mobile viewport. (DDS-2724)
+  Progress Indicator Item: Adjusted minimum width to align with the latest design spec. (DDS-2724)
+  Progress Indicator Item (Storybook): Limited width to prevent horizontal scrolling in the mobile viewport. (DDS-2724)
+  Tab Panels (Storybook): Limited width to prevent horizontal scrolling in the mobile viewport. (DDS-2724)
+  Tree (Storybook): Limited width to prevent horizontal scrolling in the mobile viewport. (DDS-2724)
+
+- [#284](https://github.com/dsv-rp/DDS/pull/284) [`9f26649`](https://github.com/dsv-rp/DDS/commit/9f266495174698950393b0c97a304de0899482d9) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Chip (Storybook): Provide a control to manage the text content. (DDS-2538)
+  Combobox (Storybook): Fix example code. (DDS-2546)
+  Table (Storybook): Fix example code. (DDS-2546)
+  Text Mask Field (Storybook): Fix example code. (DDS-2546)
+  Dropdown (Storybook): Hide the event handlers in the Controls panel. (DDS-2481)
+  Dropdown Item (Storybook): Hide the event handlers in the Controls panel. (DDS-2481)
+  Pagination (Storybook): Hide the event handlers in the Controls panel. (DDS-2481)
+  Tooltip (Storybook): Hide the event handlers in the Controls panel. (DDS-2481)
+  Inline Notification: Update timestamp property's description. (DDS-2579)
+  Toast Notification: Update timestamp property's description. (DDS-2579)
+  Combobox: Fixed an issue where the selection icon was positioned at the far left edge of the item when an empty string was selected in the ComboBox dropdown. (DDS-2543)
+  Combobox: Fixed an accessibility issue regarding the inability to apply `aria-controls` to the ID of an element whose visibility is uncertain. (DDS-2545)
+  Dropdown: Fixed an accessibility issue regarding the inability to apply `aria-controls` to the ID of an element whose visibility is uncertain. (DDS-2545)
+  Date Picker: Add a disabled story. (DDS-2511)
+
+- [#285](https://github.com/dsv-rp/DDS/pull/285) [`7d7d575`](https://github.com/dsv-rp/DDS/commit/7d7d575ebfa497a3ce5b0322014216ec5724dd85) Thanks [@dk-wei](https://github.com/dk-wei)! - Add toggle kitchen sink page.
+
+- [#290](https://github.com/dsv-rp/DDS/pull/290) [`7df4f58`](https://github.com/dsv-rp/DDS/commit/7df4f583fb3153aae478da6673183e8c2189e737) Thanks [@dk-wei](https://github.com/dk-wei)! - Add tree kitchen sink page for next branch.
+
+- [#267](https://github.com/dsv-rp/DDS/pull/267) [`e117a24`](https://github.com/dsv-rp/DDS/commit/e117a24096cee964e40948350c283153ea88f704) Thanks [@dk-wei](https://github.com/dk-wei)! - Add list kitchen sink page for DDS new version.
+
 ## 1.3.2
 
 ### Patch Changes

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

@@ -1,8 +1,89 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const lit = require("lit");
+const globalNameToKeyIndexMap = /* @__PURE__ */ new Map();
+function ensureGlobalKeyIndex(name) {
+  let key = globalNameToKeyIndexMap.get(name);
+  if (!key) {
+    key = Symbol(`__dds_backing_property_${String(name)}`);
+    globalNameToKeyIndexMap.set(name, key);
+  }
+  return key;
+}
 const _DDSElement = class _DDSElement extends lit.LitElement {
+  /**
+   * Override of LitElement's getPropertyDescriptor to add support for fallback values
+   * and property validation.
+   *
+   * @param name - The property name (e.g., "value", "disabled")
+   * @param key - The backing property key used for internal storage (generated by Lit)
+   * @param options - DDS property declaration options including fallbackValue and isAllowedValue
+   * @returns Property descriptor with enhanced getter/setter logic
+   */
+  static getPropertyDescriptor(name, key, { fallbackValue, isAllowedValue, ...options }) {
+    const keyIndex = ensureGlobalKeyIndex(name);
+    if (this[keyIndex] != null && this[keyIndex] !== key) {
+      throw new Error(
+        `Property name "${String(name)}" is already mapped to a different backing property key.`
+      );
+    }
+    Object.defineProperty(this, keyIndex, {
+      value: key,
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    const orgDescriptor = super.getPropertyDescriptor(name, key, options);
+    if (!orgDescriptor || fallbackValue === void 0 && isAllowedValue == null) {
+      return orgDescriptor;
+    }
+    return {
+      get() {
+        const orgValue = orgDescriptor.get.call(this);
+        return orgValue === void 0 ? fallbackValue : orgValue;
+      },
+      set(value) {
+        const isValid = isAllowedValue == null || value != null && isAllowedValue(value);
+        orgDescriptor.set.call(
+          this,
+          // Convert a nullish value or an invalid value to `undefined` before setting.
+          // This `undefined` will be replaced with `fallbackValue` in the getter above (if provided).
+          // We cannot use `fallbackValue` here since it prevents reflection when the user tries to set the same value as `fallbackValue` next time.
+          isValid ? value : void 0
+        );
+      },
+      configurable: true,
+      enumerable: true
+    };
+  }
+  /**
+   * Retrieves the backing property value for a given property name.
+   * This allows access to the underlying stored value before any fallback logic is applied.
+   *
+   * Why is this needed?
+   * - The public property getter may return a fallback value when the actual value is undefined.
+   * - Sometimes we need to know if the property was explicitly set or if we're using a fallback.
+   * - This method provides access to the raw backing value stored by Lit.
+   *
+   * @template T - The property key type extending keyof this
+   *
+   * @param name - The property name to retrieve the backing value for
+   * @returns The raw backing property value or undefined if not found
+   */
+  getBackingProperty(name) {
+    const index = globalNameToKeyIndexMap.get(name);
+    if (!index) {
+      throw new Error(
+        `Backing property index for "${String(name)}" not found.`
+      );
+    }
+    const key = this.constructor[index];
+    if (key == null) {
+      throw new Error(`Backing property key for "${String(name)}" not found.`);
+    }
+    return this[key];
+  }
 };
-_DDSElement.version = "1.3.2";
+_DDSElement.version = "1.4.0-next.1";
 let DDSElement = _DDSElement;
 exports.DDSElement = DDSElement;

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

@@ -1,4 +1,44 @@
 import { LitElement } from 'lit';
+import { DDSPropertyDeclaration } from "./dds-property.cjs";
+/**
+ * Base class for all DDS (DAIKIN Design System) components.
+ * Extends LitElement with enhanced property handling capabilities including fallback values
+ * and property validation.
+ *
+ * @example
+ * ```typescript
+ * class MyComponent extends DDSElement {
+ *   @property({ reflect: true, fallbackValue: "" })
+ *   name!: string;
+ * }
+ * ```
+ */
 export declare class DDSElement extends LitElement {
+    /** The version of the DDS library */
     static readonly version: string;
+    /**
+     * Override of LitElement's getPropertyDescriptor to add support for fallback values
+     * and property validation.
+     *
+     * @param name - The property name (e.g., "value", "disabled")
+     * @param key - The backing property key used for internal storage (generated by Lit)
+     * @param options - DDS property declaration options including fallbackValue and isAllowedValue
+     * @returns Property descriptor with enhanced getter/setter logic
+     */
+    static getPropertyDescriptor(name: PropertyKey, key: string | symbol, { fallbackValue, isAllowedValue, ...options }: DDSPropertyDeclaration): PropertyDescriptor | undefined;
+    /**
+     * Retrieves the backing property value for a given property name.
+     * This allows access to the underlying stored value before any fallback logic is applied.
+     *
+     * Why is this needed?
+     * - The public property getter may return a fallback value when the actual value is undefined.
+     * - Sometimes we need to know if the property was explicitly set or if we're using a fallback.
+     * - This method provides access to the raw backing value stored by Lit.
+     *
+     * @template T - The property key type extending keyof this
+     *
+     * @param name - The property name to retrieve the backing value for
+     * @returns The raw backing property value or undefined if not found
+     */
+    protected getBackingProperty<T extends keyof this>(name: T): this[T] | undefined;
 }

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const decorators_js = require("lit/decorators.js");
 const ddsElement = require("./dds-element.cjs");
+const ddsProperty = require("./dds-property.cjs");
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -14,7 +14,6 @@ var __decorateClass = (decorators, target, key, kind) => {
 const _DDSFormElement = class _DDSFormElement extends ddsElement.DDSElement {
   constructor() {
     super();
-    this.name = "";
     this.value = "";
     this.internals = this.attachInternals();
   }
@@ -73,13 +72,18 @@ const _DDSFormElement = class _DDSFormElement extends ddsElement.DDSElement {
 _DDSFormElement.formAssociated = true;
 let DDSFormElement = _DDSFormElement;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], DDSFormElement.prototype, "name");
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String })
 ], DDSFormElement.prototype, "value");
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "form" })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "form",
+    fallbackValue: ""
+  })
 ], DDSFormElement.prototype, "formAttr");
 const _DDSFormSubmitElement = class _DDSFormSubmitElement extends ddsElement.DDSElement {
   constructor() {
@@ -133,7 +137,12 @@ const _DDSFormSubmitElement = class _DDSFormSubmitElement extends ddsElement.DDS
 _DDSFormSubmitElement.formAssociated = true;
 let DDSFormSubmitElement = _DDSFormSubmitElement;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "form" })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "form",
+    fallbackValue: ""
+  })
 ], DDSFormSubmitElement.prototype, "formAttr");
 exports.DDSFormElement = DDSFormElement;
 exports.DDSFormSubmitElement = DDSFormSubmitElement;

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

@@ -14,7 +14,7 @@ export declare class DDSFormElement extends DDSElement {
      * The form attribute specifies the form the form component belongs to.
      * The value of this attribute must be equal to the id attribute of a <form> element in the same document.
      */
-    formAttr: string | undefined;
+    formAttr: string;
     protected internals: ElementInternals | null | undefined;
     constructor();
     /**
@@ -61,7 +61,7 @@ export declare class DDSFormSubmitElement extends DDSElement {
      * The form attribute specifies the form the form component belongs to.
      * The value of this attribute must be equal to the id attribute of a <form> element in the same document.
      */
-    formAttr: string | undefined;
+    formAttr: string;
     protected internals: ElementInternals | null | undefined;
     constructor();
     /**

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const decorators_js = require("lit/decorators.js");
+function property(options) {
+  return decorators_js.property(options);
+}
+function oneOf(values) {
+  return (value) => values.includes(value);
+}
+exports.oneOf = oneOf;
+exports.property = property;

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

@@ -0,0 +1,92 @@
+import { PropertyDeclaration } from 'lit';
+/**
+ * Enhanced property declaration for DDS components that extends Lit's PropertyDeclaration
+ * with additional features for fallback values and property validation.
+ *
+ * The type ensures type safety with three possible configurations:
+ *
+ * 1. Standard property without fallback or validation
+ * 2. Reflected property with fallback value
+ * 3. Reflected property with both fallback value and validation function
+ *
+ * @template Type - The type of the property value
+ * @template TypeHint - Optional type hint for property conversion
+ *
+ * @example
+ * ```typescript
+ * // Property with fallback value
+ * @property({ reflect: true, fallbackValue: "default" })
+ * key!: string;
+ *
+ * // Property with validation
+ * @property({
+ *   reflect: true,
+ *   fallbackValue: 0,
+ *   isAllowedValue: (v) => v >= 0
+ * })
+ * count!: number;
+ * ```
+ */
+export type DDSPropertyDeclaration<Type = unknown, TypeHint = unknown> = PropertyDeclaration<Type, TypeHint> & ({
+    /** No fallback value specified */
+    fallbackValue?: undefined;
+    /** No validation function specified */
+    isAllowedValue?: undefined;
+} | {
+    /** Property reflects to attribute (required for fallback) */
+    reflect: true;
+    /** Default value to use when property is undefined */
+    fallbackValue: Type;
+    /** No validation function specified */
+    isAllowedValue?: undefined;
+} | {
+    /** Property reflects to attribute (required for fallback) */
+    reflect: true;
+    /** Default value to use when property is undefined */
+    fallbackValue: Type;
+    /** Function to validate if a value is allowed for this property */
+    isAllowedValue: (value: Type) => boolean;
+});
+/**
+ * Property decorator for DDS components that enhances Lit's `@property` decorator
+ * with additional features like fallback values and property validation.
+ *
+ * This decorator should be used instead of Lit's `@property` for DDS components
+ * that need enhanced property handling capabilities.
+ *
+ * @param options - DDS property declaration options
+ * @returns Property decorator function
+ *
+ * @example
+ * ```typescript
+ * class MyComponent extends DDSElement {
+ *   // Basic property
+ *   @property({ type: String })
+ *   label = "";
+ *
+ *   // Property with fallback value
+ *   @property({ reflect: true, fallbackValue: "default" })
+ *   value!: string;
+ *
+ *   // Property with validation
+ *   @property({
+ *     reflect: true,
+ *     fallbackValue: 0,
+ *     isAllowedValue: (v) => v >= 0
+ *   })
+ *   count!: number;
+ * }
+ * ```
+ */
+export declare function property(options?: DDSPropertyDeclaration): PropertyDecorator;
+/**
+ * Creates a validation function that checks if a value is one of the allowed values.
+ *
+ * This helper function is commonly used with the `isAllowedValue` option in property
+ * declarations to restrict property values to a predefined set of allowed values.
+ *
+ * @template T - The type of the allowed values
+ * @param values - Array of allowed values
+ * @returns Validation function that returns true if the value is in the allowed values array
+ */
+export declare function oneOf<T>(values: readonly T[]): (value: unknown) => boolean;

package/dist/cjs/base/index.cjs

@@ -2,10 +2,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const ddsElement = require("./dds-element.cjs");
 const ddsFormElement = require("./dds-form-element.cjs");
+const ddsProperty = require("./dds-property.cjs");
 const decorators = require("./decorators.cjs");
 const define = require("./define.cjs");
 exports.DDSElement = ddsElement.DDSElement;
 exports.DDSFormElement = ddsFormElement.DDSFormElement;
 exports.DDSFormSubmitElement = ddsFormElement.DDSFormSubmitElement;
+exports.oneOf = ddsProperty.oneOf;
+exports.property = ddsProperty.property;
 exports.ddsElement = decorators.ddsElement;
 exports.defineDDSElement = define.defineDDSElement;

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

@@ -1,4 +1,5 @@
 export * from "./dds-element.cjs";
 export * from "./dds-form-element.cjs";
+export * from "./dds-property.cjs";
 export * from "./decorators.cjs";
 export * from "./define.cjs";

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

@@ -4,6 +4,7 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -76,10 +77,10 @@ exports.DaikinAccordion.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: Array, attribute: false })
+  ddsProperty.property({ type: Array, attribute: false })
 ], exports.DaikinAccordion.prototype, "openItems", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinAccordion.prototype, "exclusive", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-accordion-item" })

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

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
-const decorators_js = require("lit/decorators.js");
 const ref_js = require("lit/directives/ref.js");
 const ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -28,7 +28,7 @@ const cvaSummary = classVarianceAuthority.cva(
     "w-full",
     "min-h-12",
     "p-3",
-    "break-all",
+    "natural-break",
     "text-left",
     "focus-visible:outline",
     "focus-visible:outline-2",
@@ -72,7 +72,6 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends ddsElement.DDSEl
     super(...arguments);
     this._summaryRef = ref_js.createRef();
     this._contentRef = ref_js.createRef();
-    this.name = "";
     this.open = false;
     this.disabled = false;
   }
@@ -133,7 +132,7 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends ddsElement.DDSEl
       >
         <div class="overflow-hidden">
           <div class="pt-2 px-3 pb-3">
-            <slot class="slotted:break-all"></slot>
+            <slot class="slotted:natural-break"></slot>
           </div>
         </div>
       </div>
@@ -176,13 +175,13 @@ exports.DaikinAccordionItem.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], exports.DaikinAccordionItem.prototype, "name", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinAccordionItem.prototype, "open", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinAccordionItem.prototype, "disabled", 2);
 exports.DaikinAccordionItem = __decorateClass([
   decorators.ddsElement("daikin-accordion-item")