@daikin-oss/design-system-web-components 1.2.0 → 1.3.0-next.2

package/CHANGELOG.md

@@ -1,19 +1,74 @@
 # @daikin-oss/design-system-web-components
 
-## 1.2.0
+## 1.3.0-next.2
 
 ### Minor Changes
 
-- [#193](https://github.com/dsv-rp/DDS/pull/193) [`a726caa`](https://github.com/dsv-rp/DDS/commit/a726caa048f528aedda421ace0388683ebd3c804) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Header: Add Recipe. (DDS-2169)
-  Data Display: Add Recipe. (DDS-2284)
+- [#244](https://github.com/dsv-rp/DDS/pull/244) [`31675c7`](https://github.com/dsv-rp/DDS/commit/31675c78cd74ee25f2bcd48dbaa8818074e593e7) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Time Picker: Add Time Picker component. (DDS-2429)
 
-- [#144](https://github.com/dsv-rp/DDS/pull/144) [`bde7786`](https://github.com/dsv-rp/DDS/commit/bde778694815e551bcca77c190d13b7b0488728e) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Checkbox Group: Initial Implementation. (DDS-1732)
+- [#227](https://github.com/dsv-rp/DDS/pull/227) [`1b2450a`](https://github.com/dsv-rp/DDS/commit/1b2450a37d5a8ecfbd3b5caf3ddd90ba80a69482) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Combobox: Initial Implementation. (DDS-1876)
 
-- [#161](https://github.com/dsv-rp/DDS/pull/161) [`c4f05f8`](https://github.com/dsv-rp/DDS/commit/c4f05f8c2b4feb1fee67bdd7449e3e5429e1d10a) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Menu: Initial Implementation. (DDS-1937)
+- [#254](https://github.com/dsv-rp/DDS/pull/254) [`ee7ff8c`](https://github.com/dsv-rp/DDS/commit/ee7ff8cd6aa31c8355574a9ab54cd13149259909) Thanks [@dk-wei](https://github.com/dk-wei)! - Icon Button: Added the `size` attribute to support larger sizes. (DDS-2577)
 
-- [#180](https://github.com/dsv-rp/DDS/pull/180) [`2590eee`](https://github.com/dsv-rp/DDS/commit/2590eee5e2a51dd7a6d9342010c9ce91f101ed20) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Logo: Initial Implementation. (DDS-2122)
+- [#238](https://github.com/dsv-rp/DDS/pull/238) [`4739419`](https://github.com/dsv-rp/DDS/commit/47394199565b8e08e4d64bb1bad9980069705020) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Date Range: Add date range recipe.
 
-- [#120](https://github.com/dsv-rp/DDS/pull/120) [`cd05582`](https://github.com/dsv-rp/DDS/commit/cd055823e21a54de02db36ba0a9cd0488b21c85f) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Slider: Initial Implementation. (DDS-1740)
+- [#239](https://github.com/dsv-rp/DDS/pull/239) [`6356f23`](https://github.com/dsv-rp/DDS/commit/6356f2365d1035a96c7c7672be67c0053ad088b8) Thanks [@yodas7](https://github.com/yodas7)! - Icon: Added custom icon registration feature that allows registering and using custom icons via the icon registry. (DDS-2509)
+
+- [#231](https://github.com/dsv-rp/DDS/pull/231) [`817ba1e`](https://github.com/dsv-rp/DDS/commit/817ba1e7cd386e67fadc7701b00124c66b802f07) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Chip: Initial Implementation. (DDS-2398)
+
+- [#229](https://github.com/dsv-rp/DDS/pull/229) [`cd1a53e`](https://github.com/dsv-rp/DDS/commit/cd1a53e23d7116667905faf640814174f8bc21ba) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Login: Add Login Recipe. (DDS-2410)
+
+- [#243](https://github.com/dsv-rp/DDS/pull/243) [`3a70b2c`](https://github.com/dsv-rp/DDS/commit/3a70b2cef781d5bea10f88689f4de8d24d8104c9) Thanks [@yodas7](https://github.com/yodas7)! - Text Masked Field: Initial Implementation. (DDS-2412)
+
+### Patch Changes
+
+- [#256](https://github.com/dsv-rp/DDS/pull/256) [`c049117`](https://github.com/dsv-rp/DDS/commit/c049117b05e92c73827d84c50f953f6cc89491c9) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Dropdown: Fixed an issue where the dropdown would not close on Safari. (DDS-2593)
+  Dropdown: Fixed an issue where the dropdown would not open on iOS Safari.
+  Time Picker: Added a story and test cases for the component's ​error state​. (DDS-2595)
+  Time Picker: Update min and max property docs​. (DDS-2594)
+
+- [#234](https://github.com/dsv-rp/DDS/pull/234) [`c39282e`](https://github.com/dsv-rp/DDS/commit/c39282e48b4e655a4852610bd36d25fa02bd0ef0) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Date Picker: Fixed the issue where the floating popup did not automatically adjust its position based on the component's location, as well as the unstable open state on touch devices.
+  Dropdown: Fixed the issue where the unstable open state on touch devices.
+
+- [#226](https://github.com/dsv-rp/DDS/pull/226) [`1b008d4`](https://github.com/dsv-rp/DDS/commit/1b008d45846d7a7772b67d22e0cf952134e4abf1) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Storybook: Updated the code in the Show Code section of the data display docs to make it easier for users to reference. (DDS-2467)
+
+- [#214](https://github.com/dsv-rp/DDS/pull/214) [`c5d8397`](https://github.com/dsv-rp/DDS/commit/c5d8397a978b657edaafc2bdf59b7063a5256b9b) Thanks [@dk-wei](https://github.com/dk-wei)! - Carousel: Wrap text in carousel items so that the size of the carousel items does not exceed the container.
+
+- [#228](https://github.com/dsv-rp/DDS/pull/228) [`5a3273f`](https://github.com/dsv-rp/DDS/commit/5a3273fd29ce90e31b196ac4b8b2c60005e22f8c) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Table: Updated the docs for better user understanding. (DDS-2469)
+  Text Field: Fix the issue when click the clear button can't fire input event and it will get a wrong value from `event.target.value` . (DDS-2468)
+
+- [#258](https://github.com/dsv-rp/DDS/pull/258) [`a17712c`](https://github.com/dsv-rp/DDS/commit/a17712ca5ccf6c5ba45cd46efba1ace4b1368d60) Thanks [@yodas7](https://github.com/yodas7)! - Table: The sort icon in table header rows now changes based on the sort state. (DDS-2503)
+  Table Header Cell: Added an `order` property to control the sort icon display. (DDS-2503)
+
+- [#246](https://github.com/dsv-rp/DDS/pull/246) [`1c3c47e`](https://github.com/dsv-rp/DDS/commit/1c3c47e4aa329e6f670793a2ab041d3c8a37050f) Thanks [@yodas7](https://github.com/yodas7)! - Dropdown: Always set button labels to improve accessibility. (DDS-2539)
+
+- [#221](https://github.com/dsv-rp/DDS/pull/221) [`8612e63`](https://github.com/dsv-rp/DDS/commit/8612e637b608a01b6276e186d86aca7af02032d9) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Storybook: Changed the control for icon-related properties in Controls from text input to a dropdown list. (DDS-2425)
+
+- [#251](https://github.com/dsv-rp/DDS/pull/251) [`349f760`](https://github.com/dsv-rp/DDS/commit/349f7609be3e394ba7522a3b495072ed00f25c48) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - List Item: Fixed an issue where the left-side icon would shrink when the content was too long. (DDS-2492)
+  Tooltip: Updated the component documentation. (DDS-2496)
+  Tooltip: Fixed a bug where the popover would unintentionally open upon clicking the trigger when the tooltip was set to the manual control. (DDS-2559)
+  Radio Group: Fixed an issue where components were not exported from the root file.
+  Chip: Fixed an issue where components were not exported from the root file.
+  Card: Fixed the appearance of the card footer button to use the outline variant.
+  Dropdown: Fixed an issue where the dropdown's ​scrollbar overlapped a portion of the border radius. (DDS-2544)
+  Combobox: Fixed an issue where the dropdown's ​scrollbar overlapped a portion of the border radius. (DDS-2544)
+
+- [#241](https://github.com/dsv-rp/DDS/pull/241) [`032b288`](https://github.com/dsv-rp/DDS/commit/032b288b4d57f53a2e14fc189e52f44b84a2a89d) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Explicitly set the `type` attribute of the `<button>` elements in the following components to `"button"` to avoid ambiguity and potential issues.
+
+  - daikin-accordion-item
+  - daikin-avatar
+  - daikin-calendar
+  - daikin-carousel
+  - daikin-tab
+
+## 1.2.0
+
+### Minor Changes
+
+- [#190](https://github.com/dsv-rp/DDS/pull/190) [`9d1e55b`](https://github.com/dsv-rp/DDS/commit/9d1e55bda7a4032702332b2f894b26fb354a1751) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Using Material Icons as the source for the component icons and have standardized some of the icon names. (DDS-2249)
+
+- [#193](https://github.com/dsv-rp/DDS/pull/193) [`a726caa`](https://github.com/dsv-rp/DDS/commit/a726caa048f528aedda421ace0388683ebd3c804) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Header: Add Recipe. (DDS-2169)
+  Data Display: Add Recipe. (DDS-2284)
 
 - [#194](https://github.com/dsv-rp/DDS/pull/194) [`3a0834a`](https://github.com/dsv-rp/DDS/commit/3a0834aade4661eb1b2df6a05a273a9c45c90568) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Button: Fixed an issue where the button did not function as a submit button.
   Icon Button: Fixed an issue where the button did not function as a submit button.
@@ -28,70 +83,51 @@
   Text Field: Added `form` attribute. (DDS-2254)
   Toggle: Added `form` attribute. (DDS-2254)
 
-- [#167](https://github.com/dsv-rp/DDS/pull/167) [`c9d2430`](https://github.com/dsv-rp/DDS/commit/c9d2430520890b3b2fdb9cefb7d552fd3d237d28) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Inline Notification: The `description` slot has been replaced with the default slot. (DDS-1981)
-  Inline Notification: Updated appearance. (DDS-1981)
-  **BREAKING CHANGE** Toast Notification: The `description` slot has been replaced with the default slot. (DDS-1982)
-  Toast Notification: Updated appearance. (DDS-1982)
-
 - [#204](https://github.com/dsv-rp/DDS/pull/204) [`219547a`](https://github.com/dsv-rp/DDS/commit/219547afb633c0e05504307fa1638852e7b5ec52) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Button: Add large size variant. (DDS-2323)
 
 - [#202](https://github.com/dsv-rp/DDS/pull/202) [`415ddc5`](https://github.com/dsv-rp/DDS/commit/415ddc59a7cd3ca209f6a5c112fc0245bf2e17b6) Thanks [@yodas7](https://github.com/yodas7)! - Date Picker: Initial Implementation. (DDS-1703)
   Calender: Initial Implementation. (DDS-1704)
 
-- [#157](https://github.com/dsv-rp/DDS/pull/157) [`79b510a`](https://github.com/dsv-rp/DDS/commit/79b510a396435731ba8b2bec6b2fbe1bbcc780d6) Thanks [@poetrainy](https://github.com/poetrainy)! - Text Field: The `type` attribute now accepts `password` and `search` . (DDS-1707, DDS-1709)
-  Text Field: The `type` attribute now accepts `search` . (DDS-1709)
-
-- [#219](https://github.com/dsv-rp/DDS/pull/219) [`36552b0`](https://github.com/dsv-rp/DDS/commit/36552b070cacda6e051ff233df78edfe817527a5) Thanks [@yodas7](https://github.com/yodas7)! - Release v1.2.0.
-
-  The following (stable) components have been added in this release.
-
-  - Slider
-  - Logo
-  - Menu
-  - Checkbox Group
-  - Date Picker
-  - Calendar
-  - Modal
-
-  The following components have been promoted from experimental to stable in this release.
-
-  - Loading
-  - Avatar
-  - Toast Notification
-
-  No new experimental components were added in this release.
-
 - [#182](https://github.com/dsv-rp/DDS/pull/182) [`08cea1b`](https://github.com/dsv-rp/DDS/commit/08cea1bc3a7250a8cbad44363aeb8bb7d2bc084a) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Modal: Initial Implementation. (DDS-1723)
 
 ### Patch Changes
 
 - [#200](https://github.com/dsv-rp/DDS/pull/200) [`625ff76`](https://github.com/dsv-rp/DDS/commit/625ff763ee3a41bdf1d448575617b4faf18f0c16) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Loading: Update story appearance and comment about background property. (DDS-2099)
-  Password: Update story appearance and fixed an issue where an extra eye icon appeared in input fields on Edge browser. (DDS-2095)
+  Password: Update story and fixed an issue where an extra eye icon appeared in input fields on Edge browser. (DDS-2095)
   Logo: Automatically select the appropriate logo variant based on the Storybook theme to prevent user confusion. (DDS-2150)
   Menu: Removed unnecessary items from the story controls and adjusted the text change line strategy. (DDS-2113)
 
-- [#171](https://github.com/dsv-rp/DDS/pull/171) [`48dd161`](https://github.com/dsv-rp/DDS/commit/48dd16156a8776e6fc13fc825bf4bb98270a4488) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Dropdown: Fixed bugs open properties not work in storybook doc. (DDS-1983)
-  Dropdown: Update story appearance.
-  Dropdown: Update appearance when content overflow. (DDS-1983)
-
 - [#182](https://github.com/dsv-rp/DDS/pull/182) [`08cea1b`](https://github.com/dsv-rp/DDS/commit/08cea1bc3a7250a8cbad44363aeb8bb7d2bc084a) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Card: Change padding from 16px to 12px.
 
 - [#212](https://github.com/dsv-rp/DDS/pull/212) [`b299a93`](https://github.com/dsv-rp/DDS/commit/b299a931eebafdddc36e5c3641fcef2c5fa368d1) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Tooltip: fix an issue that tooltip not work in touch device. (DDS-2303)
 
-- [#190](https://github.com/dsv-rp/DDS/pull/190) [`9d1e55b`](https://github.com/dsv-rp/DDS/commit/9d1e55bda7a4032702332b2f894b26fb354a1751) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Icon: Some icons have been updated. (DDS-2249)
+- [#209](https://github.com/dsv-rp/DDS/pull/209) [`8fa51e0`](https://github.com/dsv-rp/DDS/commit/8fa51e071129190733dae441193ed0f34a1c207b) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Modal: Update story appearance and the text change line strategy. (DDS-2012)
 
-  Icon: The following icons have been added. (DDS-2249)
+## 1.2.0-next.0
 
-  - `success`
-  - `error`
+### Minor Changes
 
-  **DEPRECATED** Icon: The following icons are deprecated and will be removed in future versions. (DDS-2249)
+- [#167](https://github.com/dsv-rp/DDS/pull/167) [`c9d2430`](https://github.com/dsv-rp/DDS/commit/c9d2430520890b3b2fdb9cefb7d552fd3d237d28) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Inline Notification: The `description` slot has been replaced with the default slot. (DDS-1981)
+  Inline Notification: Updated appearance. (DDS-1981)
+  **BREAKING CHANGE** Toast Notification: The `description` slot has been replaced with the default slot. (DDS-1982)
+  Toast Notification: Updated appearance. (DDS-1982)
 
-  - `positive` (Use `success` instead)
-  - `negative` (Use `error` instead)
-  - `cross` (Use `close` instead)
+- [#144](https://github.com/dsv-rp/DDS/pull/144) [`bde7786`](https://github.com/dsv-rp/DDS/commit/bde778694815e551bcca77c190d13b7b0488728e) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Checkbox Group: Initial Implementation. (DDS-1732)
 
-- [#209](https://github.com/dsv-rp/DDS/pull/209) [`8fa51e0`](https://github.com/dsv-rp/DDS/commit/8fa51e071129190733dae441193ed0f34a1c207b) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Modal: Update story appearance and the text change line strategy. (DDS-2012)
+- [#161](https://github.com/dsv-rp/DDS/pull/161) [`c4f05f8`](https://github.com/dsv-rp/DDS/commit/c4f05f8c2b4feb1fee67bdd7449e3e5429e1d10a) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Menu: Initial Implementation. (DDS-1937)
+
+- [#180](https://github.com/dsv-rp/DDS/pull/180) [`2590eee`](https://github.com/dsv-rp/DDS/commit/2590eee5e2a51dd7a6d9342010c9ce91f101ed20) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Logo: Initial Implementation. (DDS-2122)
+
+- [#120](https://github.com/dsv-rp/DDS/pull/120) [`cd05582`](https://github.com/dsv-rp/DDS/commit/cd055823e21a54de02db36ba0a9cd0488b21c85f) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Slider: Initial Implementation. (DDS-1740)
+
+- [#157](https://github.com/dsv-rp/DDS/pull/157) [`79b510a`](https://github.com/dsv-rp/DDS/commit/79b510a396435731ba8b2bec6b2fbe1bbcc780d6) Thanks [@poetrainy](https://github.com/poetrainy)! - Text Field: The `type` attribute now accepts `password` and `search` . (DDS-1707, DDS-1709)
+  Text Field: The `type` attribute now accepts `search` . (DDS-1709)
+
+### Patch Changes
+
+- [#171](https://github.com/dsv-rp/DDS/pull/171) [`48dd161`](https://github.com/dsv-rp/DDS/commit/48dd16156a8776e6fc13fc825bf4bb98270a4488) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Dropdown: Fixed bugs open properties not work in storybook doc. (DDS-1983)
+  Dropdown: Update story appearance.
+  Dropdown: Update appearance when content overflow. (DDS-1983)
 
 - [#183](https://github.com/dsv-rp/DDS/pull/183) [`707676d`](https://github.com/dsv-rp/DDS/commit/707676db9ad8cddab0c7c2e5e8e8a4f22167e14b) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Tooltip: Keep the tooltip component always centered in the storybook view. (DDS-2207)
 

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

@@ -3,6 +3,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const lit = require("lit");
 const _DDSElement = class _DDSElement extends lit.LitElement {
 };
-_DDSElement.version = "1.2.0";
+_DDSElement.version = "1.3.0-next.2";
 let DDSElement = _DDSElement;
 exports.DDSElement = DDSElement;

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

@@ -107,6 +107,7 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends ddsElement.DDSEl
     >
       <button
         id="summary"
+        type="button"
         ${ref_js.ref(this._summaryRef)}
         class=${cvaSummary({
       open,

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

@@ -91,6 +91,7 @@ exports.DaikinAvatar = class DaikinAvatar extends lit.LitElement {
       </span>`;
     } else if (this.type === "button") {
       return lit.html`<button
+        type="button"
         class=${cvaWrapper({ type: "button" })}
         aria-label=${ifDefined_js.ifDefined(this.alt ?? void 0)}
         aria-haspopup=${ifDefined_js.ifDefined(this.avatarAriaHaspopup ?? void 0)}

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

@@ -263,6 +263,7 @@ exports.DaikinCalendar = class DaikinCalendar extends lit.LitElement {
   }) {
     const variant = selected ? "selected" : today ? "today" : "default";
     return lit.html`<button
+      type="button"
       class=${cvaContentButton({ variant, date: false })}
       ?disabled=${disabled}
       role="radio"
@@ -386,6 +387,7 @@ exports.DaikinCalendar = class DaikinCalendar extends lit.LitElement {
         week,
         (date) => date.getTime(),
         (date) => lit.html`<button
+                    type="button"
                     class=${cvaContentButton({
           variant: date.getTime() === (value == null ? void 0 : value.getTime()) ? "selected" : date.getTime() === today.getTime() ? "today" : "default",
           date: true

package/dist/cjs/components/card-header/daikin-card-header.cjs

@@ -25,7 +25,7 @@ const cvaTitle = classVarianceAuthority.cva([
 ])();
 const cvaDescription = classVarianceAuthority.cva([
   "flex-none",
-  "text-ddt-color-common-text-secondary",
+  "text-ddt-color-common-text-primary",
   "font-daikinSerif",
   "text-sm",
   "leading-normal",

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

@@ -143,13 +143,16 @@ exports.DaikinCarousel = class DaikinCarousel extends ddsElement.DDSElement {
           <span class=${cvaButton({ intent: "previous" })}></span>
         </daikin-icon-button>
         <div
-          class="w-full overflow-clip relative focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ddt-color-common-border-focus"
+          class="w-full overflow-clip relative focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ddt-color-common-border-focus [container-type:inline-size]"
           aria-live="polite"
         >
           <div
-            class="flex w-[calc(100%*var(--total))] transition-transform translate-x-[calc(-100%*var(--current)/var(--total))] duration-[--ddc-transition-duration]"
+            class="flex w-[calc(100cqw*var(--total))] transition-transform translate-x-[calc(-100%*var(--current)/var(--total))] duration-[--ddc-transition-duration]"
           >
-            <slot @slotchange=${this._handleSlotchange}></slot>
+            <slot
+              class="slotted:w-[calc(100%/var(--total))]"
+              @slotchange=${this._handleSlotchange}
+            ></slot>
           </div>
         </div>
         <daikin-icon-button
@@ -174,6 +177,7 @@ exports.DaikinCarousel = class DaikinCarousel extends ddsElement.DDSElement {
       this._items,
       (_, index) => index,
       (_, index) => lit.html`<button
+                type="button"
                 class=${INDICATOR_CLASS_NAME}
                 aria-label="Slide ${index + 1}"
                 aria-selected=${this.currentIndex === index}

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

@@ -40,12 +40,12 @@ exports.DaikinCarouselItem = class DaikinCarouselItem extends ddsElement.DDSElem
       >
         <slot
           name="title"
-          class="leading-[130%] font-bold"
+          class="leading-[130%] font-bold natural-break"
           @slotchange=${this._handleFooterSlotChange}
         ></slot>
         <slot
           name="description"
-          class="text-sm"
+          class="text-sm natural-break"
           @slotchange=${this._handleFooterSlotChange}
         ></slot>
       </div>

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

@@ -0,0 +1,106 @@
+"use strict";
+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 ifDefined_js = require("lit/directives/if-defined.js");
+const tailwind = require("../../tailwind.css.cjs");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, 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])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const cvaWrapper = classVarianceAuthority.cva([
+  "flex",
+  "items-center",
+  "rounded-[100px]",
+  "overflow-hidden",
+  "size-full",
+  "border",
+  "px-1",
+  "border-ddt-color-common-neutral-default"
+]);
+const cvaRemoveButton = classVarianceAuthority.cva([
+  "w-4",
+  "h-4",
+  "flex",
+  "items-center",
+  "justify-center",
+  "rounded-full",
+  "overflow-hidden",
+  "focus-visible:outline",
+  "focus-visible:outline-2",
+  "focus-visible:outline-ddt-color-common-border-focus",
+  "enabled:var-color-ddt-color-common-neutral-default/color-primary",
+  "enabled:hover:var-color-ddt-color-common-neutral-hover/color-primary",
+  "enabled:hover:var-color-ddt-color-common-surface-neutral-hover/color-secondary",
+  "enabled:active:var-color-ddt-color-common-neutral-press/color-primary",
+  "enabled:active:var-color-ddt-color-common-surface-neutral-press/color-secondary",
+  "text-[--color-primary]",
+  "bg-[--color-secondary]"
+]);
+exports.DaikinChip = class DaikinChip extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.chipAriaLabel = null;
+  }
+  _handleRemoveClick(event) {
+    event.stopPropagation();
+    this.dispatchEvent(new Event("remove", { bubbles: true, composed: true }));
+  }
+  render() {
+    return lit.html`
+      <div
+        role="group"
+        class=${cvaWrapper()}
+        aria-label=${ifDefined_js.ifDefined(this.chipAriaLabel)}
+      >
+        <slot
+          name="left-icon"
+          class="icon-size-4 text-ddt-color-common-text-primary"
+        ></slot>
+        <span class="text-ddt-color-common-text-primary px-1 mr-[2px]">
+          <slot></slot>
+        </span>
+        <button
+          type="button"
+          class=${cvaRemoveButton()}
+          aria-label="Remove"
+          @click=${this._handleRemoveClick}
+        >
+          <span class="i-daikin-close text-[--color-primary]"></span>
+        </button>
+      </div>
+    `;
+  }
+  /**
+   * Focuses on the inner remove button
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._focusableElement) == null ? void 0 : _a.focus(options);
+  }
+};
+exports.DaikinChip.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-flex;
+      width: max-content;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "chip-aria-label" })
+], exports.DaikinChip.prototype, "chipAriaLabel", 2);
+__decorateClass([
+  decorators_js.query("button")
+], exports.DaikinChip.prototype, "_focusableElement", 2);
+exports.DaikinChip = __decorateClass([
+  decorators_js.customElement("daikin-chip")
+], exports.DaikinChip);

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

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+/**
+ * A chip is a small UI component that represents a single piece of information, a filter, or a contact. Think of it as a compact tag or a small, clickable token.
+ *
+ * @fires remove - A custom event emitted when a user clicks the remove button.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/chip/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-chip chip-aria-label="Chip Text">Text</daikin-chip>
+ * ```
+ */
+export declare class DaikinChip extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Provides an accessible name of the chip.
+     */
+    chipAriaLabel: string | null;
+    private _focusableElement;
+    private _handleRemoveClick;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner remove button
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-chip": DaikinChip;
+    }
+}

package/dist/cjs/components/chip/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinChip = require("./daikin-chip.cjs");
+Object.defineProperty(exports, "DaikinChip", {
+  enumerable: true,
+  get: () => daikinChip.DaikinChip
+});

package/dist/cjs/components/chip/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-chip.cjs";