@daikin-oss/design-system-web-components 1.3.0 → 1.4.0-next.0

package/CHANGELOG.md

@@ -1,5 +1,101 @@
 # @daikin-oss/design-system-web-components
 
+## 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.1
+
+### Patch Changes
+
+- [#269](https://github.com/dsv-rp/DDS/pull/269) [`222e13e`](https://github.com/dsv-rp/DDS/commit/222e13efc58fa10b53b478def1769fadb10e5939) Thanks [@yodas7](https://github.com/yodas7)! - Fixed an issue where custom elements were not properly configured or registered in some components. (DDS-2660)
+
 ## 1.3.0
 
 ### Minor Changes

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.3.0";
+_DDSElement.version = "1.4.0-next.0";
 let DDSElement = _DDSElement;
 exports.DDSElement = DDSElement;

package/dist/cjs/base/index.cjs

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

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

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

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

@@ -3,6 +3,7 @@ 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");
+require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");

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

@@ -5,6 +5,7 @@ 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 decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");

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

@@ -4,13 +4,17 @@ 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 ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-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;
@@ -59,7 +63,7 @@ const cvaWrapper = classVarianceAuthority.cva(
     }
   }
 );
-exports.DaikinAvatar = class DaikinAvatar extends lit.LitElement {
+exports.DaikinAvatar = class DaikinAvatar extends ddsElement.DDSElement {
   constructor() {
     super();
     this.type = "icon";
@@ -157,5 +161,5 @@ __decorateClass([
   decorators_js.query("a,button")
 ], exports.DaikinAvatar.prototype, "_focusableElement", 2);
 exports.DaikinAvatar = __decorateClass([
-  decorators_js.customElement("daikin-avatar")
+  decorators.ddsElement("daikin-avatar")
 ], exports.DaikinAvatar);

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaWrapper: (props?: ({
     type?: "button" | "icon" | "link" | null | undefined;
@@ -19,7 +19,7 @@ type AvatarVariantProps = MergeVariantProps<typeof cvaWrapper>;
  * <daikin-avatar></daikin-avatar>
  * ```
  */
-export declare class DaikinAvatar extends LitElement {
+export declare class DaikinAvatar extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Replace the wrapping element.

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

@@ -0,0 +1,133 @@
+"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 ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-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 = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  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;
+};
+const cvaBadge = classVarianceAuthority.cva(["absolute", "rounded-full"], {
+  variants: {
+    type: {
+      number: [
+        "h-4",
+        "min-w-4",
+        "px-1",
+        "text-[10px]",
+        "font-normal",
+        "font-daikinSerif",
+        "text-white",
+        "flex",
+        "items-center",
+        "justify-center",
+        "-top-[2px]",
+        "-right-[2px]",
+        "before:content-[attr(data-count)]",
+        "before:leading-none",
+        "before:whitespace-nowrap",
+        "data-[count=0]:hidden"
+      ],
+      dot: ["w-2", "h-2", "top-1", "right-1"]
+    },
+    color: {
+      danger: ["bg-ddt-color-common-danger-default"],
+      alarm: ["bg-ddt-color-common-alarm"],
+      warning: ["bg-ddt-color-common-warning"],
+      success: ["bg-ddt-color-common-success"],
+      information: ["bg-ddt-color-common-information"]
+    }
+  }
+});
+exports.DaikinBadge = class DaikinBadge extends ddsElement.DDSElement {
+  constructor() {
+    super(...arguments);
+    this.type = "dot";
+    this.count = null;
+    this.maxCount = "99";
+    this.invisible = false;
+    this.color = "danger";
+  }
+  /**
+   * Computes the actual number to display in the badge.
+   * - If count is null or invalid, displays "0".
+   * - If count exceeds maxCount, displays "maxCount+".
+   * - Otherwise, displays the actual number.
+   */
+  get _count() {
+    if (this.count == null) {
+      return "0";
+    }
+    const count = parseInt(this.count, 10);
+    const maxCount = this.maxCount ? parseInt(this.maxCount, 10) : null;
+    if (isNaN(count) || count < 0) {
+      return "0";
+    }
+    if (maxCount != null && !isNaN(maxCount) && count > maxCount) {
+      return `${maxCount.toLocaleString()}+`;
+    }
+    return count.toLocaleString();
+  }
+  /**
+   * Renders the badge component.
+   * - Renders a small dot when type="dot".
+   * - Renders a number when type="number" and count > 0.
+   * - Does not render the badge if invisible=true.
+   * - The slot wraps the icon button.
+   */
+  render() {
+    return lit.html`
+      <slot></slot>
+      <span
+        role="presentation"
+        data-count=${this._count}
+        class=${cvaBadge({
+      type: this.type,
+      color: this.color
+    })}
+        ?hidden=${this.invisible}
+      ></span>
+    `;
+  }
+};
+exports.DaikinBadge.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-flex;
+      position: relative;
+    }
+
+    span[hidden] {
+      display: none;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinBadge.prototype, "type", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinBadge.prototype, "count", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "max-count" })
+], exports.DaikinBadge.prototype, "maxCount", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinBadge.prototype, "invisible", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinBadge.prototype, "color", 2);
+exports.DaikinBadge = __decorateClass([
+  decorators.ddsElement("daikin-badge")
+], exports.DaikinBadge);

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

@@ -0,0 +1,85 @@
+import { DDSElement } from "../../base/index.cjs";
+/**
+ * A badge is used to display notification counts, status indicators, or small dots in the UI—commonly for message alerts or status marking.
+ *
+ * @slot - A slot for anchoring element. Place `daikin-icon-button` here.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/badge/index.js";
+ * import "@daikin-oss/design-system-web-components/components/icon/index.js";
+ * import "@daikin-oss/design-system-web-components/components/icon-button/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-badge count="42" max-count="999" color="danger">
+ *   <daikin-icon-button variant="ghost" size="m" buttonAriaLabel="42 unread notifications">
+ *     <daikin-icon
+ *       class="w-8 h-8"
+ *       icon="notification"
+ *       size="current"
+ *       color="current"
+ *     >
+ *     </daikin-icon>
+ *   </daikin-icon-button>
+ * </daikin-badge>
+ * ```
+ */
+export declare class DaikinBadge extends DDSElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Badge type.
+     * - "number": Displays a number (e.g., message count, quantity).
+     * - "dot": Displays only a small dot (e.g., status indicator).
+     * @default "dot"
+     */
+    type: "number" | "dot";
+    /**
+     * The numeric content displayed in the badge.
+     * Only effective when type="number".
+     * Accepts a string or null; will be parsed as a number internally.
+     * @example "5"
+     */
+    count: string | null;
+    /**
+     * The maximum number to display in the badge.
+     * If the count exceeds this value, it will display as "maxCount+", e.g., "99+".
+     * Only effective when type="number".
+     * @example "99"
+     */
+    maxCount: string | null;
+    /**
+     * Whether to hide the badge.
+     * - true: The badge is not displayed (slot content remains visible).
+     * - false: The badge is displayed normally.
+     * @default false
+     */
+    invisible: boolean;
+    /**
+     * Badge color.
+     * Supports predefined semantic color tokens (danger, alarm, warning, success, information).
+     * @default "danger"
+     */
+    color: "danger" | "alarm" | "warning" | "success" | "information";
+    /**
+     * Computes the actual number to display in the badge.
+     * - If count is null or invalid, displays "0".
+     * - If count exceeds maxCount, displays "maxCount+".
+     * - Otherwise, displays the actual number.
+     */
+    private get _count();
+    /**
+     * Renders the badge component.
+     * - Renders a small dot when type="dot".
+     * - Renders a number when type="number" and count > 0.
+     * - Does not render the badge if invisible=true.
+     * - The slot wraps the icon button.
+     */
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-badge": DaikinBadge;
+    }
+}

package/dist/cjs/components/badge/index.cjs

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

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

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

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

@@ -3,6 +3,7 @@ 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");
+require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");

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

@@ -4,6 +4,7 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
 const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");

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

@@ -5,9 +5,9 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
 require("../../base/dds-element.cjs");
+const ddsFormElement = require("../../base/dds-form-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
-const ddsFormElement = require("../../base/dds-form-element.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -1,8 +1,8 @@
-import { DDSFormSubmitElement } from "../../base/dds-form-element.cjs";
+import { DDSFormSubmitElement } from "../../base/index.cjs";
 import { ARIARole } from "../../lit-analyzer-types.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaButton: (props?: ({
-    color?: "default" | "danger" | null | undefined;
+    color?: "danger" | "default" | null | undefined;
     variant?: "fill" | "outline" | "ghost" | null | undefined;
     size?: "small" | "medium" | "large" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -5,16 +5,20 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
 const repeat_js = require("lit/directives/repeat.js");
+const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 const calendarCommon = require("../../utils/calendar-common.cjs");
 const scroller = require("../../utils/scroller.cjs");
 require("../icon-button/daikin-icon-button.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;
@@ -119,7 +123,7 @@ function getNextFocusDateByKey(date, event) {
   }
   return null;
 }
-exports.DaikinCalendar = class DaikinCalendar extends lit.LitElement {
+exports.DaikinCalendar = class DaikinCalendar extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.value = null;
@@ -127,6 +131,7 @@ exports.DaikinCalendar = class DaikinCalendar extends lit.LitElement {
     this.max = "2099-12-31";
     this.defaultValue = null;
     this.view = "day";
+    this._lastFocusedDate = null;
     this._dateToBeFocused = null;
     this._viewDate = getToday();
   }
@@ -173,6 +178,7 @@ exports.DaikinCalendar = class DaikinCalendar extends lit.LitElement {
   }
   _navigateMonth(date, offset) {
     this._viewDate = calendarCommon.getDateByMonthOffsetClamped(date, offset);
+    this._lastFocusedDate = null;
   }
   _handleCalendarClick(date) {
     this.value = calendarCommon.formatDateForProperty(date);
@@ -204,6 +210,7 @@ exports.DaikinCalendar = class DaikinCalendar extends lit.LitElement {
       `[data-type=day][data-date="${calendarCommon.formatDateForProperty(dateToBeFocused)}"]`
     );
     if (dateButton && calendarCommon.isSameYearMonth(dateToBeFocused, focusedDate)) {
+      this._lastFocusedDate = dateToBeFocused;
       dateButton.focus();
     } else {
       this._dateToBeFocused = dateToBeFocused;
@@ -359,7 +366,19 @@ exports.DaikinCalendar = class DaikinCalendar extends lit.LitElement {
       viewDate.getUTCFullYear(),
       viewDate.getUTCMonth()
     );
-    const focusable = value && calendarCommon.isSameYearMonth(viewDate, value) ? value : calendarCommon.isSameYearMonth(viewDate, today) ? today : calendarCommon.clampDate(viewDate, min, max);
+    const focusable = (
+      // If the last focused date is in the same month as the view date, use it as the focusable date.
+      this._lastFocusedDate && calendarCommon.isSameYearMonth(viewDate, this._lastFocusedDate) ? this._lastFocusedDate : (
+        // If the value is in the same month as the view date, use it as the focusable date.
+        value && calendarCommon.isSameYearMonth(viewDate, value) ? value : (
+          // If today's date is in the same month as the view date, use it as the focusable date.
+          calendarCommon.isSameYearMonth(viewDate, today) ? today : (
+            // Otherwise, use the first day of the month (clamped).
+            calendarCommon.clampDate(calendarCommon.toFirstDayOfMonth(viewDate), min, max)
+          )
+        )
+      )
+    );
     return lit.html`<div class="flex flex-col gap-2 w-full h-72" role="grid">
       <div class="flex gap-1 flex-wrap w-full px-4" role="row">
         ${repeat_js.repeat(
@@ -394,9 +413,7 @@ exports.DaikinCalendar = class DaikinCalendar extends lit.LitElement {
         })}
                     role="gridcell"
                     ?disabled=${calendarCommon.isDateOutOfRange(date, min, max)}
-                    tabindex=${ifDefined_js.ifDefined(
-          focusable.getTime() != date.getTime() ? -1 : void 0
-        )}
+                    tabindex=${date.getTime() === focusable.getTime() ? lit.nothing : -1}
                     aria-current=${date.getTime() === today.getTime() ? "date" : lit.nothing}
                     aria-selected=${date.getTime() === (value == null ? void 0 : value.getTime())}
                     data-type="day"
@@ -494,11 +511,14 @@ exports.DaikinCalendar = class DaikinCalendar extends lit.LitElement {
     }
   }
   updated(changedProperties) {
-    if (changedProperties.has("_viewDate") && this._dateToBeFocused != null) {
+    if (this._dateToBeFocused != null) {
       const dateButton = this.renderRoot.querySelector(
         `[data-type=day][data-date="${calendarCommon.formatDateForProperty(this._dateToBeFocused)}"]`
       );
-      dateButton == null ? void 0 : dateButton.focus();
+      if (dateButton) {
+        this._lastFocusedDate = this._dateToBeFocused;
+        dateButton.focus();
+      }
       this._dateToBeFocused = null;
     }
     if (changedProperties.get("view") != null) {
@@ -541,9 +561,15 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: String, attribute: false })
 ], exports.DaikinCalendar.prototype, "view", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinCalendar.prototype, "_lastFocusedDate", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinCalendar.prototype, "_dateToBeFocused", 2);
 __decorateClass([
   decorators_js.state()
 ], exports.DaikinCalendar.prototype, "_viewDate", 2);
 exports.DaikinCalendar = __decorateClass([
-  decorators_js.customElement("daikin-calendar")
+  decorators.ddsElement("daikin-calendar")
 ], exports.DaikinCalendar);

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

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * The calendar component provides calendar elements. It has a function for selecting dates, and is also used in `daikin-date-picker`.
  *
@@ -15,7 +16,7 @@ import { LitElement, PropertyValues, TemplateResult } from 'lit';
  * <daikin-calendar></daikin-calendar>
  * ```
  */
-export declare class DaikinCalendar extends LitElement {
+export declare class DaikinCalendar extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * The current value of the input, submitted as a name/value pair with form data.
@@ -45,6 +46,15 @@ export declare class DaikinCalendar extends LitElement {
      * Intended for use only by `daikin-date-picker`.
      */
     view: "year" | "month" | "day";
+    /**
+     * The date that was last focused.
+     * Used to preserve focus when tabbing out and back in.
+     */
+    private _lastFocusedDate;
+    /**
+     * The date to be focused.
+     * Used to set focus on a date that is not in the current view (year and month).
+     */
     private _dateToBeFocused;
     private get _value();
     private get _min();

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

@@ -4,6 +4,7 @@ const classVarianceAuthority = require("class-variance-authority");
 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 decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");