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

package/CHANGELOG.md

@@ -1,5 +1,102 @@
 # @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
@@ -81,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.
 
@@ -110,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)
@@ -145,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

@@ -235,8 +235,8 @@ We manage and use design tokens to ensure consistency in our design system.
    Since they are integrated with Tailwind CSS, they are mostly used as utility classes, but in some cases they are directly referenced using `var()`.
 
 ```ts
-@customElement("daikin-link")
-export class DaikinLink extends LitElement {
+@ddsElement("daikin-link")
+export class DaikinLink extends DDSElement {
   static override readonly styles = css`
     ${unsafeCSS(tailwindStyles)}
 

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 {

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

@@ -4,13 +4,16 @@ 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");
+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;
@@ -52,51 +55,29 @@ const cvaSummary = classVarianceAuthority.cva(
     }
   }
 );
-const animationOption = {
-  duration: 250,
-  easing: "ease-in-out"
-};
-const contentCloseKeyframe = {
-  height: 0
-};
-const getContentOpenKeyframe = (content) => ({
-  height: `${content.offsetHeight}px`
+const cvaContent = classVarianceAuthority.cva(["grid", "duration-[250ms]", "ease-in-out"], {
+  variants: {
+    open: {
+      false: ["grid-rows-[0fr]"],
+      true: ["grid-rows-[1fr]"]
+    }
+  }
 });
-exports.DaikinAccordionItem = class DaikinAccordionItem extends lit.LitElement {
+exports.DaikinAccordionItem = class DaikinAccordionItem extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
+    this._summaryRef = ref_js.createRef();
     this._contentRef = ref_js.createRef();
+    this.name = "";
     this.open = false;
     this.disabled = false;
-    this._detailsOpen = false;
-  }
-  _contentAnimate() {
-    const content = this._contentRef.value;
-    if (!content || this.open === this._detailsOpen) {
-      return;
-    }
-    if (this.open) {
-      this._detailsOpen = this.open;
-      content.animate(
-        [contentCloseKeyframe, getContentOpenKeyframe(content)],
-        animationOption
-      );
-    } else {
-      const animation = content.animate(
-        [getContentOpenKeyframe(content), contentCloseKeyframe],
-        animationOption
-      );
-      animation.onfinish = () => {
-        this._detailsOpen = this.open;
-      };
-    }
   }
   _handleSummaryClick(event) {
     event.preventDefault();
     if (this.disabled) {
       return;
     }
-    this.open = !this.open;
+    this.dispatchEvent(new Event("toggle", event));
   }
   _handleKeyDown(event) {
     const direction = {
@@ -116,56 +97,42 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends lit.LitElement {
       })
     );
   }
-  // When using the in-page search, the `<details>` element may open without clicking on the `<summary>`.
-  // In order to handle such cases, it is necessary to respond to the "toggle" event.
-  _handleToggle(event) {
-    event.preventDefault();
-    if (this.disabled) {
-      return;
-    }
-    this.open = event.newState === "open";
-  }
   render() {
-    const detailsOpen = !this.disabled && this._detailsOpen;
     const open = !this.disabled && this.open;
-    return lit.html`<details
+    return lit.html`<div
       class="w-full text-ddt-color-common-text-primary font-daikinSerif overflow-clip"
-      ?open=${detailsOpen}
-      ?data-open=${open}
-      aria-disabled=${this.disabled}
-      @toggle=${this._handleToggle}
     >
-      <summary
+      <button
         id="summary"
+        ${ref_js.ref(this._summaryRef)}
         class=${cvaSummary({
       open,
       disabled: this.disabled
     })}
+        ?disabled=${this.disabled}
+        aria-expanded=${open}
+        aria-controls="content"
         tabindex=${this.disabled ? -1 : 0}
         @click=${this._handleSummaryClick}
         @keydown=${this._handleKeyDown}
       >
         <slot name="summary"></slot>
-      </summary>
+      </button>
       <div
         ${ref_js.ref(this._contentRef)}
+        id="content"
         role="region"
+        class=${cvaContent({ open })}
         aria-labelledby="summary"
-        ?hidden=${this.disabled}
+        ?hidden=${!open}
       >
-        <div class="pt-2 px-3 pb-3">
-          <slot></slot>
+        <div class="overflow-hidden">
+          <div class="pt-2 px-3 pb-3">
+            <slot></slot>
+          </div>
         </div>
       </div>
-    </details>`;
-  }
-  firstUpdated() {
-    this._detailsOpen = this.open;
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("open")) {
-      this._contentAnimate();
-    }
+    </div>`;
   }
   /**
    * Focuses on the inner summary.
@@ -173,7 +140,7 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends lit.LitElement {
    */
   focus(options) {
     var _a;
-    (_a = this._summary) == null ? void 0 : _a.focus(options);
+    (_a = this._summaryRef.value) == null ? void 0 : _a.focus(options);
   }
 };
 exports.DaikinAccordionItem.styles = lit.css`
@@ -193,8 +160,6 @@ exports.DaikinAccordionItem.styles = lit.css`
       width: 100%;
       height: 1px;
       background: var(--dds-color-divider);
-      position: absolute;
-      top: 0;
     }
 
     :host::after {
@@ -203,22 +168,17 @@ exports.DaikinAccordionItem.styles = lit.css`
       width: 100%;
       height: 1px;
       background: var(--dds-color-divider);
-      position: absolute;
-      bottom: 0;
     }
   `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinAccordionItem.prototype, "name", 2);
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinAccordionItem.prototype, "open", 2);
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinAccordionItem.prototype, "disabled", 2);
-__decorateClass([
-  decorators_js.query("summary")
-], exports.DaikinAccordionItem.prototype, "_summary", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.DaikinAccordionItem.prototype, "_detailsOpen", 2);
 exports.DaikinAccordionItem = __decorateClass([
-  decorators_js.customElement("daikin-accordion-item")
+  decorators.ddsElement("daikin-accordion-item")
 ], exports.DaikinAccordionItem);

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

@@ -1,4 +1,4 @@
-import { LitElement, PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * The accordion item component is a child element within the `daikin-accordion` component.
  * It functions similarly to the HTML `<details>` and `<summary>` tag, allowing users to expand or collapse the associated content by clicking on the header.
@@ -7,6 +7,8 @@ import { LitElement, PropertyValues } from 'lit';
  * Hierarchy:
  * - `daikin-accordion` > `daikin-accordion-item`
  *
+ * @fires toggle - Fires when the summary is clicked. Used by `daikin-accordion`.
+ *
  * @slot - A slot for the accordion item content.
  * @slot summary - A slot for the accordion item summary content.
  *
@@ -26,12 +28,18 @@ import { LitElement, PropertyValues } from 'lit';
  * </daikin-accordion-item>
  * ```
  */
-export declare class DaikinAccordionItem extends LitElement {
+export declare class DaikinAccordionItem extends DDSElement {
     static readonly styles: import('lit').CSSResult;
+    private _summaryRef;
     private _contentRef;
+    /**
+     * A unique name for the accordion item within the accordion.
+     */
+    name: string;
     /**
      * Whether the accordion item is open.
      * Ignored if `disabled` is `true`.
+     * Controlled by `daikin-accordion`.
      */
     open: boolean;
     /**
@@ -39,23 +47,9 @@ export declare class DaikinAccordionItem extends LitElement {
      * If this is set to `true`, the accordion item will always be closed.
      */
     disabled: boolean;
-    private _summary;
-    /**
-     * Actual presence of `open` attribute of the `<details>` element.
-     *
-     * The `<details>` element does not support animation on changing the `open` attribute.
-     * In other words, the content is hidden immediately when the `open` attribute is removed.
-     * To enable animation for an accordion, we need to run the animation while maintaining the `open` attribute, and then remove the `open` attribute at the end of the animation.
-     * Treated as `false` if `disabled` is `true`.
-     */
-    private _detailsOpen;
-    private _contentAnimate;
     private _handleSummaryClick;
     private _handleKeyDown;
-    private _handleToggle;
     render(): import('lit-html').TemplateResult<1>;
-    protected firstUpdated(): void;
-    protected updated(changedProperties: PropertyValues<this>): void;
     /**
      * Focuses on the inner summary.
      * @param options focus options