@daikin-oss/design-system-web-components 1.6.0 → 2.0.0

package/dist/es-dev/components/checkbox/daikin-checkbox.js

@@ -23,60 +23,159 @@ const cvaWrapper = cva(
   {
     variants: {
       disabled: {
-        false: ["cursor-pointer"],
+        false: [],
+        true: []
+      },
+      readonly: {
+        false: [],
         true: []
       }
-    }
+    },
+    compoundVariants: [
+      {
+        disabled: false,
+        readonly: false,
+        class: ["cursor-pointer"]
+      }
+    ]
+  }
+);
+const CHECKBOX_CLASS_NAME = cva(
+  [
+    "block",
+    "size-4",
+    "rounded-xs",
+    "relative",
+    "appearance-none",
+    "before:absolute",
+    "before:m-auto",
+    "before:inset-0",
+    "focus-visible:outline-solid",
+    "focus-visible:outline-2",
+    "focus-visible:outline-offset-2",
+    "focus-visible:outline-ddt-color-common-border-focus",
+    "disabled:border-ddt-color-common-disabled",
+    "disabled:bg-ddt-color-common-text-inverse",
+    "disabled:checked:bg-ddt-color-common-disabled",
+    "disabled:indeterminate:bg-ddt-color-common-disabled"
+  ],
+  {
+    variants: {
+      disabled: {
+        false: [],
+        true: []
+      },
+      readonly: {
+        false: [],
+        true: []
+      },
+      checkState: {
+        unchecked: [],
+        checked: [],
+        indeterminate: []
+      }
+    },
+    compoundVariants: [
+      {
+        disabled: false,
+        readonly: false,
+        class: ["cursor-pointer"]
+      },
+      {
+        readonly: false,
+        checkState: "unchecked",
+        class: [
+          "border-2",
+          "border-ddt-color-common-neutral-default",
+          "group-hover:enabled:border-ddt-color-common-neutral-hover",
+          "group-hover:enabled:bg-ddt-color-common-surface-hover",
+          "group-active:enabled:border-ddt-color-common-neutral-press",
+          "group-active:enabled:bg-ddt-color-common-surface-press"
+        ]
+      },
+      {
+        readonly: false,
+        checkState: "checked",
+        class: [
+          "border-2",
+          "before:text-ddt-color-common-text-inverse",
+          "before:icon-[daikin--checkbox-checked]",
+          "before:size-3",
+          "enabled:checked:border-ddt-color-common-brand-default",
+          "enabled:checked:bg-ddt-color-common-brand-default",
+          "group-hover:checked:enabled:bg-ddt-color-common-brand-hover",
+          "group-hover:checked:enabled:border-ddt-color-common-brand-hover",
+          "group-hover:checked:enabled:before:text-ddt-color-common-text-inverse",
+          "group-active:checked:enabled:bg-ddt-color-common-brand-press",
+          "group-active:checked:enabled:border-ddt-color-common-brand-press",
+          "group-active:checked:enabled:before:text-ddt-color-common-text-inverse"
+        ]
+      },
+      {
+        readonly: false,
+        checkState: "indeterminate",
+        class: [
+          "border-2",
+          "before:text-ddt-color-common-text-inverse",
+          "before:icon-[daikin--checkbox-indeterminate]",
+          "before:size-2.5",
+          "enabled:indeterminate:bg-ddt-color-common-brand-default",
+          "enabled:indeterminate:border-ddt-color-common-brand-default",
+          "group-hover:indeterminate:enabled:bg-ddt-color-common-brand-hover",
+          "group-hover:indeterminate:enabled:border-ddt-color-common-brand-hover",
+          "group-hover:indeterminate:enabled:before:text-ddt-color-common-text-inverse",
+          "group-active:indeterminate:enabled:bg-ddt-color-common-brand-press",
+          "group-active:indeterminate:enabled:border-ddt-color-common-brand-press",
+          "group-active:indeterminate:enabled:before:text-ddt-color-common-text-inverse"
+        ]
+      },
+      {
+        readonly: true,
+        checkState: "unchecked",
+        class: [
+          "border",
+          "border-ddt-color-common-disabled",
+          "bg-(--dds-color-common-surface-secondary)"
+        ]
+      },
+      {
+        readonly: true,
+        checkState: "checked",
+        class: [
+          "border",
+          "border-ddt-color-common-neutral-default",
+          "bg-(--dds-color-common-surface-secondary)",
+          "before:text-ddt-color-common-neutral-default",
+          "before:icon-[daikin--checkbox-checked]",
+          "before:size-3"
+        ]
+      },
+      {
+        readonly: true,
+        checkState: "indeterminate",
+        class: [
+          "border",
+          "border-ddt-color-common-neutral-default",
+          "bg-(--dds-color-common-surface-secondary)",
+          "before:text-ddt-color-common-neutral-default",
+          "before:icon-[daikin--checkbox-indeterminate]",
+          "before:size-2.5"
+        ]
+      }
+    ]
   }
 );
-const CHECKBOX_CLASS_NAME = cva([
-  "block",
-  "size-4",
-  "border-ddt-color-common-neutral-default",
-  "border-2",
-  "rounded-xs",
-  "relative",
-  "appearance-none",
-  "before:text-ddt-color-common-text-inverse",
-  "before:absolute",
-  "before:m-auto",
-  "before:inset-0",
-  "checked:before:icon-[daikin--checkbox-checked]",
-  "checked:before:size-3",
-  "indeterminate:before:icon-[daikin--checkbox-indeterminate]",
-  "indeterminate:before:size-2.5",
-  "focus-visible:outline-solid",
-  "focus-visible:outline-2",
-  "focus-visible:outline-offset-2",
-  "focus-visible:outline-ddt-color-common-border-focus",
-  "group-hover:enabled:border-ddt-color-common-neutral-hover",
-  "group-hover:enabled:bg-ddt-color-common-surface-hover",
-  "group-active:enabled:border-ddt-color-common-neutral-press",
-  "group-active:enabled:bg-ddt-color-common-surface-press",
-  "enabled:checked:border-ddt-color-common-brand-default",
-  "enabled:checked:bg-ddt-color-common-brand-default",
-  "enabled:cursor-pointer",
-  "group-hover:checked:enabled:bg-ddt-color-common-brand-hover",
-  "group-hover:checked:enabled:border-ddt-color-common-brand-hover",
-  "group-hover:checked:enabled:before:text-ddt-color-common-text-inverse",
-  "group-active:checked:enabled:bg-ddt-color-common-brand-press",
-  "group-active:checked:enabled:border-ddt-color-common-brand-press",
-  "group-active:checked:enabled:before:text-ddt-color-common-text-inverse",
-  "enabled:indeterminate:bg-ddt-color-common-brand-default",
-  "enabled:indeterminate:border-ddt-color-common-brand-default",
-  "group-hover:indeterminate:enabled:bg-ddt-color-common-brand-hover",
-  "group-hover:indeterminate:enabled:border-ddt-color-common-brand-hover",
-  "group-hover:indeterminate:enabled:before:text-ddt-color-common-text-inverse",
-  "group-active:indeterminate:enabled:bg-ddt-color-common-brand-press",
-  "group-active:indeterminate:enabled:border-ddt-color-common-brand-press",
-  "group-active:indeterminate:enabled:before:text-ddt-color-common-text-inverse",
-  "disabled:border-ddt-color-common-disabled",
-  "disabled:bg-ddt-color-common-text-inverse",
-  "disabled:checked:bg-ddt-color-common-disabled",
-  "disabled:indeterminate:bg-ddt-color-common-disabled"
-])();
 const cvaLabel = cva(["natural-break"], {
   variants: {
+    checkState: {
+      unchecked: [],
+      checked: [],
+      indeterminate: []
+    },
+    readonly: {
+      false: [],
+      true: []
+    },
     disabled: {
       false: ["text-ddt-color-common-text-primary"],
       true: ["text-ddt-color-common-disabled"]
@@ -85,13 +184,24 @@ const cvaLabel = cva(["natural-break"], {
       false: ["inline-block"],
       true: ["hidden"]
     }
-  }
+  },
+  compoundVariants: [
+    {
+      readonly: true,
+      checkState: "unchecked",
+      disabled: false,
+      hidden: false,
+      class: ["text-ddt-color-common-disabled!"]
+    }
+  ]
 });
 let DaikinCheckbox = class extends DDSFormElement {
   constructor() {
     super(...arguments);
     this.disabled = false;
+    this.readonly = false;
     this.disabledByParent = false;
+    this.readonlyByParent = false;
     this._inputRef = createRef();
   }
   /**
@@ -103,6 +213,15 @@ let DaikinCheckbox = class extends DDSFormElement {
   get _disabled() {
     return this.disabled || this.disabledByParent;
   }
+  /**
+   * The effective readonly state of the checkbox.
+   * Returns `true` if either `readonly` or `readonlyByParent` is `true`.
+   *
+   * @private
+   */
+  get _readonly() {
+    return this.readonly || this.readonlyByParent;
+  }
   /**
    * Focuses on the inner checkbox.
    * @param options focus options
@@ -130,7 +249,7 @@ let DaikinCheckbox = class extends DDSFormElement {
   }
   _handleClick(event) {
     var _a;
-    if (this._disabled) {
+    if (this._disabled || this._readonly) {
       event.preventDefault();
     }
     if (((_a = event.target) == null ? void 0 : _a.tagName) !== "INPUT") {
@@ -138,20 +257,31 @@ let DaikinCheckbox = class extends DDSFormElement {
     }
   }
   _handleChange(event) {
+    if (this._readonly) {
+      event.preventDefault();
+      return;
+    }
     this.checkState = event.target.checked ? "checked" : "unchecked";
     this._updateFormValue();
     this.dispatchEvent(new Event("change", event));
   }
   render() {
     return html`<label
-      class=${cvaWrapper({ disabled: this._disabled })}
+      class=${cvaWrapper({
+      disabled: this._disabled,
+      readonly: this._readonly
+    })}
       part="label"
       @click=${this._handleClick}
     >
       <span class="p-2">
         <input
           ${ref(this._inputRef)}
-          class=${CHECKBOX_CLASS_NAME}
+          class=${CHECKBOX_CLASS_NAME({
+      disabled: this._disabled,
+      readonly: this._readonly && !this._disabled,
+      checkState: this.checkState
+    })}
           type="checkbox"
           name=${ifDefined(this.getBackingProperty("name"))}
           ?disabled=${this._disabled}
@@ -165,6 +295,8 @@ let DaikinCheckbox = class extends DDSFormElement {
       <slot
         class=${cvaLabel({
       disabled: this._disabled,
+      readonly: this._readonly && !this._disabled,
+      checkState: this.checkState,
       hidden: this._labelHidden
     })}
         ?hidden=${this._labelHidden}
@@ -214,9 +346,15 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinCheckbox.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinCheckbox.prototype, "readonly", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, attribute: false })
 ], DaikinCheckbox.prototype, "disabledByParent", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: false })
+], DaikinCheckbox.prototype, "readonlyByParent", 2);
 DaikinCheckbox = __decorateClass([
   ddsElement("daikin-checkbox")
 ], DaikinCheckbox);

package/dist/es-dev/components/checkbox-group/daikin-checkbox-group.d.ts

@@ -47,6 +47,11 @@ export declare class DaikinCheckboxGroup extends DDSElement {
      * Controlled by `daikin-input-group` when used within `daikin-input-group`.
      */
     disabled: boolean;
+    /**
+     * Whether the checkbox group is readonly.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    readonly: boolean;
     /**
      * The label text used as the value of aria-label.
      * Set automatically by `reflectInputGroup` method.

package/dist/es-dev/components/checkbox-group/daikin-checkbox-group.js

@@ -18,7 +18,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaCheckboxGroup = cva(["size-full", "flex", "gap-x-8", "gap-y-2"], {
+const cvaCheckboxGroup = cva(["w-full", "flex", "gap-x-8", "gap-y-2"], {
   variants: {
     orientation: {
       horizontal: ["flex-row", "flex-wrap"],
@@ -32,11 +32,13 @@ let DaikinCheckboxGroup = class extends DDSElement {
     this.orientation = "vertical";
     this.required = false;
     this.disabled = false;
+    this.readonly = false;
     this._label = null;
   }
   _reflectSlotProperties() {
     for (const checkbox of this._checkboxes) {
       checkbox.disabledByParent = this.disabled;
+      checkbox.readonlyByParent = this.readonly;
     }
   }
   _handleSlotChange() {
@@ -63,6 +65,7 @@ let DaikinCheckboxGroup = class extends DDSElement {
     this._label = inputGroup.label;
     this.required = !!inputGroup.required;
     this.disabled = inputGroup.disabled;
+    this.readonly = inputGroup.readonly;
   }
   updated() {
     this._reflectSlotProperties();
@@ -92,6 +95,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinCheckboxGroup.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinCheckboxGroup.prototype, "readonly", 2);
 __decorateClass([
   state()
 ], DaikinCheckboxGroup.prototype, "_label", 2);

package/dist/es-dev/components/chip/daikin-chip.d.ts

@@ -6,6 +6,8 @@ import { DDSElement } from "../../base/index.js";
  * @fires before-select - When type is "filter", a cancelable custom event emitted before changing the selected state of a filter type chip. Listeners can call `event.preventDefault()` to prevent the state change.
  * @fires select - When type is "filter", a custom event emitted after the selected state of a filter type chip has changed. The new selected state is provided in `event.detail.checked`.
  *
+ * @csspart chip - Targets the internal <span> element wrapping the chip. This is typically used to control the chip's styling and interactivity. For example, you can adjust spacing and customize the cursor appearance during dragging: daikin-chip::part(chip) { margin: -4px; padding: 4px; cursor: grab; } daikin-chip::part(chip):active { cursor: grabbing; }
+ *
  * @slot - A slot for the chip content.
  * @slot left-icon - When type is "input", a slot for an icon to be placed to the left of the text. Place `daikin-icon` or something similar.
  *
@@ -33,6 +35,24 @@ export declare class DaikinChip extends DDSElement {
      * @default "outline"
      */
     variant: "fill" | "outline";
+    /**
+     * Specify the color of the chip when type is "input".
+     *
+     * @default "gray"
+     */
+    color: "gray" | "red" | "blue" | "yellow" | "green" | "orange" | "purple";
+    /**
+     * Whether the chip has a shadow to indicate elevation.
+     *
+     * @default false
+     */
+    elevated: boolean;
+    /**
+     * When `true`, hides the remove button and makes the chip non-removable when type is "input".
+     *
+     * @default false
+     */
+    hideRemoveButton: boolean;
     /**
      * Specify the chip is selected when type is "filter".
      * When controlling this property externally, listen to the `select` event and update your state from `event.detail.checked` to keep it in sync.