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

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

@@ -153,13 +153,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
@@ -184,6 +187,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-dev/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-dev/components/checkbox/daikin-checkbox.cjs

@@ -3,9 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
-const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-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;
@@ -69,21 +70,19 @@ const cvaLabel = classVarianceAuthority.cva([], {
       true: ["text-ddt-color-common-disabled"]
     },
     hidden: {
-      false: ["inline-block", "pr-2"],
+      false: ["inline-block"],
       true: ["hidden"]
     }
   }
 });
-exports.DaikinCheckbox = class DaikinCheckbox extends ddsElement.DDSElement {
+exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
-    this.name = "";
-    this.value = "";
     this.label = "";
     this.labelPosition = "right";
     this.checkState = "unchecked";
     this.disabled = false;
-    this._internals = this.attachInternals();
+    this.disabledByParent = false;
   }
   get checked() {
     return this.checkState === "checked";
@@ -100,7 +99,7 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsElement.DDSElement {
     this.checkState = value ? "checked" : "unchecked";
   }
   _updateFormValue() {
-    this._internals.setFormValue(this.checked ? this.value : null);
+    this.setFormValue(this.checked ? this.value : null);
   }
   _handleClick(event) {
     var _a;
@@ -117,6 +116,7 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsElement.DDSElement {
     this.dispatchEvent(new Event("change", event));
   }
   render() {
+    const disabled = this.disabled || this.disabledByParent;
     return lit.html`<label
       class="group flex gap-2 items-center size-full font-daikinSerif"
       part="label"
@@ -127,8 +127,8 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsElement.DDSElement {
           class=${CHECKBOX_CLASS_NAME}
           type="checkbox"
           name=${this.name}
+          ?disabled=${disabled}
           aria-label=${this._labelHidden ? this.label : lit.nothing}
-          ?disabled=${this.disabled}
           .checked=${this.checked}
           .indeterminate=${this.checkState === "indeterminate"}
           .value=${this.value}
@@ -137,7 +137,7 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsElement.DDSElement {
       </span>
       <slot
         class=${cvaLabel({
-      disabled: this.disabled,
+      disabled,
       hidden: this._labelHidden
     })}
         ?hidden=${this._labelHidden}
@@ -159,13 +159,6 @@ exports.DaikinCheckbox.styles = lit.css`
       display: inline-flex;
     }
   `;
-exports.DaikinCheckbox.formAssociated = true;
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinCheckbox.prototype, "name", 2);
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinCheckbox.prototype, "value", 2);
 __decorateClass([
   decorators_js.property({ type: String })
 ], exports.DaikinCheckbox.prototype, "label", 2);
@@ -178,6 +171,9 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinCheckbox.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: false })
+], exports.DaikinCheckbox.prototype, "disabledByParent", 2);
 exports.DaikinCheckbox = __decorateClass([
   decorators.ddsElement("daikin-checkbox")
 ], exports.DaikinCheckbox);

package/dist/cjs-dev/components/checkbox/daikin-checkbox.d.cts

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { DDSElement } from "../../base/index.cjs";
+import { DDSFormElement } from "../../base/dds-form-element.cjs";
 /**
  * The checkbox component is a UI element that allows users to select one or more options from a list of choices.
  * It functions similarly to the HTML `<input type="checkbox">` tag, enabling users to toggle the selection of each option independently.
@@ -21,16 +21,8 @@ import { DDSElement } from "../../base/index.cjs";
  * <daikin-checkbox label="Checkbox label" name="name" value="value"></daikin-checkbox>
  * ```
  */
-export declare class DaikinCheckbox extends DDSElement {
+export declare class DaikinCheckbox extends DDSFormElement {
     static readonly styles: import('lit').CSSResult;
-    /**
-     * The form name, submitted as a name/value pair when submitting the form.
-     */
-    name: string;
-    /**
-     * The form value, submitted as a name/value pair when submitting the form.
-     */
-    value: string;
     /**
      * Label text for the checkbox.
      */
@@ -49,6 +41,13 @@ export declare class DaikinCheckbox extends DDSElement {
      * Specify the checkbox disabled state.
      */
     disabled: boolean;
+    /**
+     * Specify the checkbox disabled state controlled by the parent component.
+     * Controlled by `daikin-checkbox-group`.
+     *
+     * @private
+     */
+    disabledByParent: boolean;
     get checked(): boolean;
     private get _labelHidden();
     /**
@@ -57,8 +56,6 @@ export declare class DaikinCheckbox extends DDSElement {
      * _Setter_: If `true` is set, it updates `checkState` to `"checked"`, and if `false` is set, it updates `checkState` to `"unchecked"`.
      */
     set checked(value: boolean);
-    static readonly formAssociated = true;
-    private _internals;
     private _updateFormValue;
     private _handleClick;
     private _handleChange;

package/dist/cjs-dev/components/checkbox-group/daikin-checkbox-group.cjs

@@ -0,0 +1,94 @@
+"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 cvaCheckboxGroup = classVarianceAuthority.cva(["size-full", "flex", "gap-x-8", "gap-y-2"], {
+  variants: {
+    orientation: {
+      horizontal: ["flex-row", "flex-wrap"],
+      vertical: ["flex-col"]
+    }
+  }
+});
+exports.DaikinCheckboxGroup = class DaikinCheckboxGroup extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.orientation = "vertical";
+    this.required = false;
+    this.disabled = false;
+    this._label = null;
+  }
+  _reflectSlotProperties() {
+    for (const checkbox of this._checkboxes) {
+      checkbox.disabledByParent = this.disabled;
+    }
+  }
+  _handleSlotChange() {
+    this._reflectSlotProperties();
+  }
+  render() {
+    return lit.html`<fieldset
+      class=${cvaCheckboxGroup({ orientation: this.orientation })}
+      aria-label=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined_js.ifDefined(this._label)}
+      aria-required=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined_js.ifDefined(this.required)}
+      aria-disabled=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined_js.ifDefined(this.disabled)}
+    >
+      <slot @slotchange=${this._handleSlotChange}></slot>
+    </fieldset>`;
+  }
+  /**
+   * This function expose to `daikin-input-group` and reflect it's attributes to `daikin-checkbox-group`.
+   * @ignore
+   */
+  reflectInputGroup(inputGroup) {
+    this._label = inputGroup.label;
+    this.required = !!inputGroup.required;
+    this.disabled = inputGroup.disabled;
+  }
+  updated() {
+    this._reflectSlotProperties();
+  }
+};
+exports.DaikinCheckboxGroup.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-block;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinCheckboxGroup.prototype, "orientation", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinCheckboxGroup.prototype, "required", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinCheckboxGroup.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinCheckboxGroup.prototype, "_label", 2);
+__decorateClass([
+  decorators_js.queryAssignedElements({
+    selector: "daikin-checkbox"
+  })
+], exports.DaikinCheckboxGroup.prototype, "_checkboxes", 2);
+exports.DaikinCheckboxGroup = __decorateClass([
+  decorators_js.customElement("daikin-checkbox-group")
+], exports.DaikinCheckboxGroup);

package/dist/cjs-dev/components/checkbox-group/daikin-checkbox-group.d.cts

@@ -0,0 +1,69 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from "../../type-utils.cjs";
+import { DaikinInputGroup } from "../input-group/index.cjs";
+declare const cvaCheckboxGroup: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type CheckboxGroupProps = MergeVariantProps<typeof cvaCheckboxGroup>;
+/**
+ * Checkbox groups are used to group multiple checkboxes.
+ *
+ * Hierarchies:
+ * - `daikin-checkbox-group` > `daikin-checkbox`
+ * - `daikin-input-group` > `daikin-checkbox-group` > `daikin-checkbox`
+ *
+ * @slot - A slot for checkbox. Place `daikin-checkbox` elements here.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/checkbox/index.js";
+ * import "@daikin-oss/design-system-web-components/components/checkbox-group/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-checkbox-group>
+ *   <daikin-checkbox name="name1" value="value1" label="Checkbox Item 1"></daikin-checkbox>
+ *   <daikin-checkbox name="name2" value="value2" label="Checkbox Item 2"></daikin-checkbox>
+ *   <daikin-checkbox name="name3" value="value3" label="Checkbox Item 3"></daikin-checkbox>
+ * </daikin-checkbox-group>
+ * ```
+ */
+export declare class DaikinCheckboxGroup extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Specify the checkbox group orientation
+     */
+    orientation: CheckboxGroupProps["orientation"];
+    /**
+     * Whether the checkbox group is required.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    required: boolean;
+    /**
+     * Whether the checkbox group is disabled.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    disabled: boolean;
+    /**
+     * The label text used as the value of aria-label.
+     * Set automatically by `reflectInputGroup` method.
+     */
+    private _label;
+    private readonly _checkboxes;
+    private _reflectSlotProperties;
+    private _handleSlotChange;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * This function expose to `daikin-input-group` and reflect it's attributes to `daikin-checkbox-group`.
+     * @ignore
+     */
+    reflectInputGroup(inputGroup: DaikinInputGroup): void;
+    updated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-checkbox-group": DaikinCheckboxGroup;
+    }
+}
+export {};

package/dist/cjs-dev/components/checkbox-group/index.cjs

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

package/dist/cjs-dev/components/checkbox-group/index.d.cts

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

package/dist/cjs-dev/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-dev/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-dev/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-dev/components/chip/index.d.cts

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