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

package/dist/es/components/toast-notification-manager/daikin-toast-notification-manager.js

@@ -1,9 +1,10 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property, queryAssignedElements } from "lit/decorators.js";
+import { queryAssignedElements } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
+import { property, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -73,7 +74,6 @@ const cvaContainer = cva(
 let DaikinToastNotificationManager = class extends DDSElement {
   constructor() {
     super(...arguments);
-    this.position = "bottom-right";
     this._knownItemSet = /* @__PURE__ */ new Set();
     this._closedItemSet = /* @__PURE__ */ new WeakSet();
     this._containerRef = createRef();
@@ -181,7 +181,19 @@ DaikinToastNotificationManager.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "bottom-right",
+    isAllowedValue: oneOf([
+      "top",
+      "top-left",
+      "top-right",
+      "bottom",
+      "bottom-left",
+      "bottom-right"
+    ])
+  })
 ], DaikinToastNotificationManager.prototype, "position", 2);
 __decorateClass([
   queryAssignedElements({ selector: "daikin-toast-notification" })

package/dist/es/components/toggle/daikin-toggle.d.ts

@@ -6,6 +6,13 @@ import { DDSFormElement } from "../../base/index.js";
  * This component is ideal for scenarios where the binary choice has a significant or immediate effect, such as enabling or disabling a feature or setting.
  * Unlike `daikin-checkbox`, this component doesn't have a label and a "indeterminate" state.
  *
+ * @attr form - The form the component belongs to.
+ * @attr name - The form name, submitted as a name/value pair when submitting the form.
+ * @attr value - The initial form value, submitted as a name/value pair when submitting the form.
+ * @prop {String} formAttr - The form the component belongs to.
+ * @prop {String} name - The form name, submitted as a name/value pair when submitting the form.
+ * @prop {String} value - The form value, submitted as a name/value pair when submitting the form.
+ *
  * @fires change - A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input type="checkbox">` element.
  *
  * @example

package/dist/es/components/toggle/daikin-toggle.js

@@ -1,8 +1,9 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import "../../base/dds-element.js";
 import { DDSFormElement } from "../../base/dds-form-element.js";
+import { property } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -68,11 +69,11 @@ let DaikinToggle = class extends DDSFormElement {
     return html`<input
       class=${TOGGLE_CLASS_NAME}
       type="checkbox"
-      name=${this.name}
-      .value=${this.value}
+      name=${ifDefined(this.getBackingProperty("name"))}
       role="switch"
-      .checked=${this.checked}
       ?disabled=${this.disabled}
+      .checked=${this.checked}
+      .value=${this.value}
       @change=${this._handleChange}
     />`;
   }

package/dist/es/components/tooltip/daikin-tooltip.d.ts

@@ -16,7 +16,7 @@ type TooltipVariantProps = MergeVariantProps<typeof cvaTooltip>;
  *
  * @cssprop [--ddc-tooltip-spacing=20px] - Spacing between the tooltip and the trigger.
  *
- * @csspart tooltip - Change the style of tooltips.
+ * @csspart tooltip - CSS styles applied to the `tooltip` part target the internal `<span>` element wrapping the content. For instance, setting `max-width: 8rem;` on this part restricts the container's width, causing long text to wrap automatically.
  *
  * @example
  *
@@ -42,10 +42,14 @@ export declare class DaikinTooltip extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Specifies the position of the tooltip relative to the trigger.
+     *
+     * @default "bottom"
      */
     placement: "top" | "bottom" | "left" | "right";
     /**
      * Specifies the tooltip theme.
+     *
+     * @default "default"
      */
     color: TooltipVariantProps["color"];
     /**
@@ -62,6 +66,8 @@ export declare class DaikinTooltip extends DDSElement {
      * Specify the value of the popover attribute in the Popover API.
      * - `auto`: Clicking on a trigger element will open a tooltip, and clicking again will close it. You can also close it using the Esc button. You cannot open multiple tooltips at the same time.
      * - `manual`: No click operation is specified for the trigger element. It will not close even if the Esc button is pressed. Multiple tooltips can be opened at once.
+     *
+     * @default "auto"
      */
     popoverValue: "auto" | "manual";
     /**
@@ -69,6 +75,8 @@ export declare class DaikinTooltip extends DDSElement {
      * - `hover`: The tooltip is displayed when the mouse hovers over the trigger element, and hidden when the mouse is no longer hovering. (default)
      * - `click`: The tooltip is displayed when the mouse clicks on the trigger element, and hidden when you click on it again.
      * - `manual`: The tooltip does not respond to user interaction. Use this to control the tooltip programmatically.
+     *
+     * @default "hover"
      */
     trigger: "hover" | "click" | "manual";
     /**

package/dist/es/components/tooltip/daikin-tooltip.js

@@ -1,10 +1,10 @@
 import { offset, flip, shift } from "@floating-ui/dom";
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property } from "lit/decorators.js";
 import { guard } from "lit/directives/guard.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
+import { property, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
@@ -56,12 +56,7 @@ const DEFAULT_TOOLTIP_SPACING = "20px";
 let DaikinTooltip = class extends DDSElement {
   constructor() {
     super(...arguments);
-    this.placement = "bottom";
-    this.color = "default";
     this.open = false;
-    this.description = "";
-    this.popoverValue = "auto";
-    this.trigger = "hover";
     this._willBeFocusedByPress = false;
     this._autoUpdateController = new FloatingUIAutoUpdateController(this);
     this._hostStyles = isClient ? window.getComputedStyle(this) : null;
@@ -191,22 +186,52 @@ DaikinTooltip.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "bottom",
+    isAllowedValue: oneOf([
+      "top",
+      "bottom",
+      "left",
+      "right"
+    ])
+  })
 ], DaikinTooltip.prototype, "placement", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "default",
+    isAllowedValue: oneOf(["default", "inverse"])
+  })
 ], DaikinTooltip.prototype, "color", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinTooltip.prototype, "open", 2);
 __decorateClass([
-  property({ type: String })
+  property({ type: String, reflect: true, fallbackValue: "" })
 ], DaikinTooltip.prototype, "description", 2);
 __decorateClass([
-  property({ type: String, attribute: "popover-value" })
+  property({
+    type: String,
+    reflect: true,
+    attribute: "popover-value",
+    fallbackValue: "auto",
+    isAllowedValue: oneOf(["auto", "manual"])
+  })
 ], DaikinTooltip.prototype, "popoverValue", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "hover",
+    isAllowedValue: oneOf([
+      "hover",
+      "click",
+      "manual"
+    ])
+  })
 ], DaikinTooltip.prototype, "trigger", 2);
 DaikinTooltip = __decorateClass([
   ddsElement("daikin-tooltip")

package/dist/es/components/tree/daikin-tree.d.ts

@@ -38,8 +38,9 @@ export declare class DaikinTree extends DDSElement {
      */
     selectable: boolean;
     /**
-     * The value of the currently selected tree section or tree item.
+     * The values of the currently selected tree sections or items.
      * Even if `selectable` is `false`, you can still set this property yourself.
+     * See the `value` property of the `daikin-tree-section` and `daikin-tree-item` components.
      */
     selectedItems: string[];
     private readonly _children;

package/dist/es/components/tree/daikin-tree.js

@@ -1,7 +1,8 @@
 import { unsafeCSS, css, html } from "lit";
-import { property, queryAssignedElements } from "lit/decorators.js";
+import { queryAssignedElements } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
+import { property } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

package/dist/es/components/tree-item/daikin-tree-item.d.ts

@@ -20,6 +20,8 @@ export declare const cvaTreeChildren: (props?: ({
  *
  * @slot - A slot for the tree item content.
  *
+ * @csspart item - CSS styles applied to the `item` part target the internal `<div>` element wrapping the content. For instance, setting `cursor: grab;` changes the hover cursor, signaling that the tree item is draggable.
+ *
  * @example
  *
  * ```js
@@ -33,7 +35,9 @@ export declare const cvaTreeChildren: (props?: ({
 export declare class DaikinTreeItem extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Value of the tree item.
+     * An unique value within the tree.
+     * This value is used by the `daikin-tree` component to manage the selection target.
+     * While not required, you can use a value based on the hierarchy to ensure uniqueness. (For example, if the parent is "foo", use "foo.bar".)
      */
     value: string;
     /**
@@ -43,6 +47,9 @@ export declare class DaikinTreeItem extends DDSElement {
     /**
      * Whether the tree item is selected.
      * Controlled by `daikin-tree`.
+     * Do not specify this manually, as it will be overwritten by the `daikin-tree` component.
+     *
+     * @private
      */
     selected: boolean;
     /**

package/dist/es/components/tree-item/daikin-tree-item.js

@@ -1,10 +1,10 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
+import { property } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -112,6 +112,7 @@ let DaikinTreeItem = class extends DDSElement {
   render() {
     return html`<div
       ${ref(this._focusableRef)}
+      part="item"
       class=${cvaTreeChildren({
       disabled: this.disabled,
       selected: this._selected,

package/dist/es/components/tree-section/daikin-tree-section.d.ts

@@ -36,7 +36,9 @@ import { DDSElement } from "../../base/index.js";
 export declare class DaikinTreeSection extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Value of the tree section.
+     * An unique value within the tree.
+     * This value is used by the `daikin-tree` component to manage the selection target.
+     * While not required, you can use a value based on the hierarchy to ensure uniqueness. (For example, if the parent is "foo", use "foo.bar".)
      */
     value: string;
     /**
@@ -46,6 +48,9 @@ export declare class DaikinTreeSection extends DDSElement {
     /**
      * Whether the tree item is selected.
      * Controlled by `daikin-tree`.
+     * Do not specify this manually, as it will be overwritten by the `daikin-tree` component.
+     *
+     * @private
      */
     selected: boolean;
     /**

package/dist/es/components/tree-section/daikin-tree-section.js

@@ -1,9 +1,10 @@
 import { unsafeCSS, css, html } from "lit";
-import { property, queryAssignedElements } from "lit/decorators.js";
+import { queryAssignedElements } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
+import { property } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

package/dist/es/index.js

@@ -1,6 +1,7 @@
 import { DaikinAccordion } from "./components/accordion/daikin-accordion.js";
 import { DaikinAccordionItem } from "./components/accordion-item/daikin-accordion-item.js";
 import { DaikinAvatar } from "./components/avatar/daikin-avatar.js";
+import { DaikinBadge } from "./components/badge/daikin-badge.js";
 import { DaikinBreadcrumb } from "./components/breadcrumb/daikin-breadcrumb.js";
 import { DaikinBreadcrumbItem } from "./components/breadcrumb-item/daikin-breadcrumb-item.js";
 import { DaikinButton } from "./components/button/daikin-button.js";
@@ -38,6 +39,7 @@ import { DaikinRadio } from "./components/radio/daikin-radio.js";
 import { DaikinRadioGroup } from "./components/radio-group/daikin-radio-group.js";
 import { DaikinSelect } from "./components/select/daikin-select.js";
 import { DaikinSlider } from "./components/slider/daikin-slider.js";
+import { DaikinStatusMessage } from "./components/status-message/daikin-status-message.js";
 import { DaikinTab } from "./components/tab/daikin-tab.js";
 import { DaikinTabPanels } from "./components/tab-panels/daikin-tab-panels.js";
 import { DaikinTable } from "./components/table/daikin-table.js";
@@ -60,6 +62,7 @@ export {
   DaikinAccordion,
   DaikinAccordionItem,
   DaikinAvatar,
+  DaikinBadge,
   DaikinBreadcrumb,
   DaikinBreadcrumbItem,
   DaikinButton,
@@ -97,6 +100,7 @@ export {
   DaikinRadioGroup,
   DaikinSelect,
   DaikinSlider,
+  DaikinStatusMessage,
   DaikinTab,
   DaikinTabPanels,
   DaikinTable,