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

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

@@ -25,60 +25,159 @@ const cvaWrapper = classVarianceAuthority.cva(
   {
     variants: {
       disabled: {
-        false: ["cursor-pointer"],
+        false: [],
+        true: []
+      },
+      readonly: {
+        false: [],
         true: []
       }
-    }
+    },
+    compoundVariants: [
+      {
+        disabled: false,
+        readonly: false,
+        class: ["cursor-pointer"]
+      }
+    ]
+  }
+);
+const CHECKBOX_CLASS_NAME = classVarianceAuthority.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 = classVarianceAuthority.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 = classVarianceAuthority.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"]
@@ -87,13 +186,24 @@ const cvaLabel = classVarianceAuthority.cva(["natural-break"], {
       false: ["inline-block"],
       true: ["hidden"]
     }
-  }
+  },
+  compoundVariants: [
+    {
+      readonly: true,
+      checkState: "unchecked",
+      disabled: false,
+      hidden: false,
+      class: ["text-ddt-color-common-disabled!"]
+    }
+  ]
 });
 exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
     this.disabled = false;
+    this.readonly = false;
     this.disabledByParent = false;
+    this.readonlyByParent = false;
     this._inputRef = ref_js.createRef();
   }
   /**
@@ -105,6 +215,15 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElem
   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
@@ -132,7 +251,7 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElem
   }
   _handleClick(event) {
     var _a;
-    if (this._disabled) {
+    if (this._disabled || this._readonly) {
       event.preventDefault();
     }
     if (((_a = event.target) == null ? void 0 : _a.tagName) !== "INPUT") {
@@ -140,20 +259,31 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElem
     }
   }
   _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 lit.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_js.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_js.ifDefined(this.getBackingProperty("name"))}
           ?disabled=${this._disabled}
@@ -167,6 +297,8 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElem
       <slot
         class=${cvaLabel({
       disabled: this._disabled,
+      readonly: this._readonly && !this._disabled,
+      checkState: this.checkState,
       hidden: this._labelHidden
     })}
         ?hidden=${this._labelHidden}
@@ -216,9 +348,15 @@ __decorateClass([
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinCheckbox.prototype, "disabled", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true })
+], exports.DaikinCheckbox.prototype, "readonly", 2);
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true, attribute: false })
 ], exports.DaikinCheckbox.prototype, "disabledByParent", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true, attribute: false })
+], exports.DaikinCheckbox.prototype, "readonlyByParent", 2);
 exports.DaikinCheckbox = __decorateClass([
   decorators.ddsElement("daikin-checkbox")
 ], exports.DaikinCheckbox);

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

@@ -53,6 +53,10 @@ export declare class DaikinCheckbox extends DDSFormElement {
      * Specify the checkbox disabled state.
      */
     disabled: boolean;
+    /**
+     * Whether the checkbox is readonly.
+     */
+    readonly: boolean;
     /**
      * Specify the checkbox disabled state controlled by the parent component.
      * Controlled by `daikin-checkbox-group`.
@@ -60,6 +64,13 @@ export declare class DaikinCheckbox extends DDSFormElement {
      * @private
      */
     disabledByParent: boolean;
+    /**
+     * Specify the checkbox readonly state controlled by the parent component.
+     * Controlled by `daikin-checkbox-group`.
+     *
+     * @private
+     */
+    readonlyByParent: boolean;
     /**
      * The effective disabled state of the checkbox.
      * Returns `true` if either `disabled` or `disabledByParent` is `true`.
@@ -67,6 +78,13 @@ export declare class DaikinCheckbox extends DDSFormElement {
      * @private
      */
     private get _disabled();
+    /**
+     * The effective readonly state of the checkbox.
+     * Returns `true` if either `readonly` or `readonlyByParent` is `true`.
+     *
+     * @private
+     */
+    private get _readonly();
     private readonly _inputRef;
     /**
      * Focuses on the inner checkbox.

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

@@ -20,7 +20,7 @@ var __decorateClass = (decorators2, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaCheckboxGroup = classVarianceAuthority.cva(["size-full", "flex", "gap-x-8", "gap-y-2"], {
+const cvaCheckboxGroup = classVarianceAuthority.cva(["w-full", "flex", "gap-x-8", "gap-y-2"], {
   variants: {
     orientation: {
       horizontal: ["flex-row", "flex-wrap"],
@@ -34,11 +34,13 @@ exports.DaikinCheckboxGroup = class DaikinCheckboxGroup extends ddsElement.DDSEl
     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() {
@@ -65,6 +67,7 @@ exports.DaikinCheckboxGroup = class DaikinCheckboxGroup extends ddsElement.DDSEl
     this._label = inputGroup.label;
     this.required = !!inputGroup.required;
     this.disabled = inputGroup.disabled;
+    this.readonly = inputGroup.readonly;
   }
   updated() {
     this._reflectSlotProperties();
@@ -94,6 +97,9 @@ __decorateClass([
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinCheckboxGroup.prototype, "disabled", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true })
+], exports.DaikinCheckboxGroup.prototype, "readonly", 2);
 __decorateClass([
   decorators_js.state()
 ], exports.DaikinCheckboxGroup.prototype, "_label", 2);

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

@@ -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.