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

package/dist/cjs-dev/components/progress-bar/daikin-progress-bar.cjs

@@ -130,29 +130,37 @@ exports.DaikinProgressBar = class DaikinProgressBar extends ddsElement.DDSElemen
   }
   render() {
     const progressRatio = Math.min(Math.max(this.value / this.max, 0), 1);
-    return lit.html`<div class="flex flex-col gap-2 w-full">
-      <div class=${cvaBarContainer({ variant: this.variant })}>
-        <slot></slot>
-      </div>
+    return lit.html`<div class="flex flex-row gap-(--dds-space-100) items-start">
+      <slot
+        name="left-icon"
+        class="slotted:shrink-0 slotted:icon-size-6 size-(--dds-icon)"
+      ></slot>
       <div
-        class=${cvaBar({ variant: this.variant, size: this.size })}
-        role="progressbar"
-        aria-label=${this.textContent ?? ""}
-        aria-valuenow=${this.value}
-        aria-valuemin="0"
-        aria-valuemax=${this.max}
-        aria-busy=${progressRatio < 1 && this.variant === "inprogress" || this.variant === "indeterminate"}
-        style=${`--bar-width:${progressRatio * 100}%`}
-      ></div>
-      <span
-        class=${cvaHelper({
+        class="flex flex-col gap-(--dds-space-200) w-full pt-(--dds-space-050)"
+      >
+        <div class=${cvaBarContainer({ variant: this.variant })}>
+          <slot></slot>
+        </div>
+        <div
+          class=${cvaBar({ variant: this.variant, size: this.size })}
+          role="progressbar"
+          aria-label=${this.textContent ?? ""}
+          aria-valuenow=${this.value}
+          aria-valuemin="0"
+          aria-valuemax=${this.max}
+          aria-busy=${progressRatio < 1 && this.variant === "inprogress" || this.variant === "indeterminate"}
+          style=${`--bar-width:${progressRatio * 100}%`}
+        ></div>
+        <span
+          class=${cvaHelper({
       variant: this.variant,
       visible: !!this.helper.length
     })}
-        aria-live="polite"
-      >
-        ${this.helper}
-      </span>
+          aria-live="polite"
+        >
+          ${this.helper}
+        </span>
+      </div>
     </div>`;
   }
   updated(changedProperties) {

package/dist/cjs-dev/components/progress-bar/daikin-progress-bar.d.cts

@@ -21,6 +21,7 @@ type ProgressBarVariantProps = MergeVariantProps<typeof cvaBar | typeof cvaHelpe
  * - `"error"`: In addition to `"inprogress"`, an error icon is added and the color becomes red. In this variant, the `value` is ignored and the bar always expands to the full width.
  *
  * @slot - A slot for label text displayed at the top of the progress bar.
+ * @slot left-icon - A slot for an icon to be placed to the left of the text. Place `daikin-icon` or something similar.
  *
  * @example
  *

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

@@ -25,37 +25,107 @@ const cvaWrapper = classVarianceAuthority.cva(
   {
     variants: {
       disabled: {
-        false: ["cursor-pointer"],
+        false: [],
+        true: []
+      },
+      readonly: {
+        false: [],
         true: []
       }
-    }
+    },
+    compoundVariants: [
+      {
+        disabled: false,
+        readonly: false,
+        class: ["cursor-pointer"]
+      }
+    ]
+  }
+);
+const RADIO_CLASS_NAME = classVarianceAuthority.cva(
+  [
+    "flex",
+    "justify-center",
+    "items-center",
+    "size-4",
+    "rounded-full",
+    "relative",
+    "appearance-none",
+    "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"
+  ],
+  {
+    variants: {
+      disabled: {
+        false: [],
+        true: []
+      },
+      readonly: {
+        false: [],
+        true: []
+      },
+      checked: {
+        false: [],
+        true: []
+      }
+    },
+    compoundVariants: [
+      {
+        disabled: false,
+        readonly: false,
+        class: ["cursor-pointer"]
+      },
+      {
+        readonly: false,
+        checked: false,
+        class: [
+          "unchecked:border-2",
+          "enabled:unchecked:border-ddt-color-common-neutral-default",
+          "group-hover:unchecked:enabled:border-ddt-color-common-neutral-hover",
+          "group-active:unchecked:enabled:border-ddt-color-common-neutral-press",
+          "group-hover:unchecked:enabled:bg-ddt-color-common-surface-neutral-hover",
+          "group-active:unchecked:enabled:bg-ddt-color-common-surface-neutral-press"
+        ]
+      },
+      {
+        readonly: false,
+        checked: true,
+        class: [
+          "checked:border-[5px]",
+          "enabled:checked:border-ddt-color-common-brand-default",
+          "group-hover:checked:enabled:border-ddt-color-common-brand-hover",
+          "group-active:checked:enabled:border-ddt-color-common-brand-press"
+        ]
+      },
+      {
+        readonly: true,
+        checked: false,
+        class: [
+          "border",
+          "border-ddt-color-common-disabled",
+          "bg-ddt-color-common-surface-secondary"
+        ]
+      },
+      {
+        readonly: true,
+        checked: true,
+        class: [
+          "border",
+          "border-ddt-color-common-neutral-default",
+          "before:content-['']",
+          "before:absolute",
+          "before:size-2",
+          "before:rounded-full",
+          "before:bg-ddt-color-common-neutral-default",
+          "bg-ddt-color-common-surface-secondary"
+        ]
+      }
+    ]
   }
 );
-const RADIO_CLASS_NAME = classVarianceAuthority.cva([
-  "flex",
-  "justify-center",
-  "items-center",
-  "size-4",
-  "rounded-full",
-  "relative",
-  "appearance-none",
-  "focus-visible:outline-solid",
-  "focus-visible:outline-2",
-  "focus-visible:outline-offset-2",
-  "focus-visible:outline-ddt-color-common-border-focus",
-  "unchecked:border-2",
-  "enabled:cursor-pointer",
-  "enabled:unchecked:border-ddt-color-common-neutral-default",
-  "group-hover:unchecked:enabled:border-ddt-color-common-neutral-hover",
-  "group-active:unchecked:enabled:border-ddt-color-common-neutral-press",
-  "group-hover:unchecked:enabled:bg-ddt-color-common-surface-neutral-hover",
-  "group-active:unchecked:enabled:bg-ddt-color-common-surface-neutral-press",
-  "checked:border-[5px]",
-  "enabled:checked:border-ddt-color-common-brand-default",
-  "group-hover:checked:enabled:border-ddt-color-common-brand-hover",
-  "group-active:checked:enabled:border-ddt-color-common-brand-press",
-  "disabled:border-ddt-color-common-disabled"
-])();
 const cvaLabel = classVarianceAuthority.cva(["natural-break"], {
   variants: {
     disabled: {
@@ -65,17 +135,54 @@ const cvaLabel = classVarianceAuthority.cva(["natural-break"], {
     hidden: {
       false: ["inline-block"],
       true: ["hidden"]
+    },
+    readonly: {
+      false: [],
+      true: []
+    },
+    checked: {
+      false: [],
+      true: []
     }
-  }
+  },
+  compoundVariants: [
+    {
+      readonly: true,
+      checked: false,
+      disabled: false,
+      hidden: false,
+      class: ["text-ddt-color-common-disabled!"]
+    }
+  ]
 });
 exports.DaikinRadio = class DaikinRadio extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
     this.checked = false;
     this.disabled = false;
+    this.readonly = false;
     this.disabledByParent = false;
+    this.readonlyByParent = false;
     this.skipTab = false;
   }
+  /**
+   * The effective disabled state of the radio button.
+   * Returns `true` if either `disabled` or `disabledByParent` is `true`.
+   *
+   * @private
+   */
+  get _disabled() {
+    return this.disabled || this.disabledByParent;
+  }
+  /**
+   * The effective readonly state of the radio button.
+   * Returns `true` if either `readonly` or `readonlyByParent` is `true`.
+   *
+   * @private
+   */
+  get _readonly() {
+    return this.readonly || this.readonlyByParent;
+  }
   get _labelHidden() {
     return this.labelPosition === "hidden";
   }
@@ -84,7 +191,7 @@ exports.DaikinRadio = class DaikinRadio extends ddsFormElement.DDSFormElement {
   }
   _handleClick(event) {
     var _a;
-    if (this.disabled || this.disabledByParent) {
+    if (this._disabled || this._readonly) {
       event.preventDefault();
     }
     if (((_a = event.target) == null ? void 0 : _a.tagName) !== "INPUT") {
@@ -92,6 +199,10 @@ exports.DaikinRadio = class DaikinRadio extends ddsFormElement.DDSFormElement {
     }
   }
   _handleChange(event) {
+    if (this._readonly) {
+      event.preventDefault();
+      return;
+    }
     this.checked = event.target.checked;
     this._updateFormValue();
     this.dispatchEvent(
@@ -102,19 +213,25 @@ exports.DaikinRadio = class DaikinRadio extends ddsFormElement.DDSFormElement {
     );
   }
   render() {
-    const disabled = this.disabled || this.disabledByParent;
     return lit.html`<label
-      class=${cvaWrapper({ disabled })}
+      class=${cvaWrapper({
+      disabled: this._disabled,
+      readonly: this._readonly
+    })}
       @click=${this._handleClick}
     >
       <span class="p-2">
         <input
-          class=${RADIO_CLASS_NAME}
+          class=${RADIO_CLASS_NAME({
+      disabled: this._disabled,
+      readonly: this._readonly && !this._disabled,
+      checked: this.checked
+    })}
           type="radio"
           name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
           aria-label=${this._labelHidden ? this.label : lit.nothing}
           tabindex=${ifDefined_js.ifDefined(this.skipTab ? "-1" : void 0)}
-          ?disabled=${disabled}
+          ?disabled=${this._disabled}
           .checked=${this.checked}
           .value=${this.value}
           @change=${this._handleChange}
@@ -122,8 +239,10 @@ exports.DaikinRadio = class DaikinRadio extends ddsFormElement.DDSFormElement {
       </span>
       <slot
         class=${cvaLabel({
-      disabled,
-      hidden: this._labelHidden
+      disabled: this._disabled,
+      hidden: this._labelHidden,
+      readonly: this._readonly && !this._disabled,
+      checked: this.checked
     })}
         ?hidden=${this._labelHidden}
       >
@@ -170,9 +289,15 @@ __decorateClass([
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinRadio.prototype, "disabled", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true })
+], exports.DaikinRadio.prototype, "readonly", 2);
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true, attribute: false })
 ], exports.DaikinRadio.prototype, "disabledByParent", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true, attribute: false })
+], exports.DaikinRadio.prototype, "readonlyByParent", 2);
 __decorateClass([
   ddsProperty.property({ type: Boolean, attribute: false })
 ], exports.DaikinRadio.prototype, "skipTab", 2);

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

@@ -51,6 +51,11 @@ export declare class DaikinRadio extends DDSFormElement {
      * Specify the radio button disabled state.
      */
     disabled: boolean;
+    /**
+     * Specify the radio button readonly state.
+     * When readonly, the user cannot change the checked state.
+     */
+    readonly: boolean;
     /**
      * Specify the radio disabled state controlled by the parent component.
      * Controlled by `daikin-radio-group`.
@@ -58,6 +63,27 @@ export declare class DaikinRadio extends DDSFormElement {
      * @private
      */
     disabledByParent: boolean;
+    /**
+     * Specify the radio readonly state controlled by the parent component.
+     * Controlled by `daikin-radio-group`.
+     *
+     * @private
+     */
+    readonlyByParent: boolean;
+    /**
+     * The effective disabled state of the radio button.
+     * Returns `true` if either `disabled` or `disabledByParent` is `true`.
+     *
+     * @private
+     */
+    private get _disabled();
+    /**
+     * The effective readonly state of the radio button.
+     * Returns `true` if either `readonly` or `readonlyByParent` is `true`.
+     *
+     * @private
+     */
+    private get _readonly();
     /**
      * Whether the radio button can be focused.
      * Automatically set by `daikin-radio-group` component.

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

@@ -21,7 +21,7 @@ var __decorateClass = (decorators2, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaRadioGroup = classVarianceAuthority.cva(["size-full", "flex", "gap-x-8", "gap-y-2"], {
+const cvaRadioGroup = classVarianceAuthority.cva(["w-full", "flex", "gap-x-8", "gap-y-2"], {
   variants: {
     orientation: {
       horizontal: ["flex-row", "flex-wrap"],
@@ -35,6 +35,7 @@ exports.DaikinRadioGroup = class DaikinRadioGroup extends ddsElement.DDSElement
     this.value = "";
     this.required = false;
     this.disabled = false;
+    this.readonly = false;
     this._label = null;
     this._handleRadioChange = (event) => {
       event.stopPropagation();
@@ -45,6 +46,7 @@ exports.DaikinRadioGroup = class DaikinRadioGroup extends ddsElement.DDSElement
   _reflectSlotProperties() {
     for (const radio of this._radios) {
       radio.disabledByParent = this.disabled;
+      radio.readonlyByParent = this.readonly;
     }
   }
   _updateRadios() {
@@ -69,6 +71,9 @@ exports.DaikinRadioGroup = class DaikinRadioGroup extends ddsElement.DDSElement
    * https://www.w3.org/WAI/ARIA/apg/patterns/radio/
    */
   _handleKeyDown(event) {
+    if (this.disabled || this.readonly) {
+      return;
+    }
     const moveOffset = {
       ArrowRight: 1,
       ArrowDown: 1,
@@ -132,6 +137,7 @@ exports.DaikinRadioGroup = class DaikinRadioGroup extends ddsElement.DDSElement
     this._label = inputGroup.label;
     this.required = !!inputGroup.required;
     this.disabled = inputGroup.disabled;
+    this.readonly = inputGroup.readonly;
   }
 };
 exports.DaikinRadioGroup.styles = lit.css`
@@ -167,6 +173,9 @@ __decorateClass([
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinRadioGroup.prototype, "disabled", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true })
+], exports.DaikinRadioGroup.prototype, "readonly", 2);
 __decorateClass([
   decorators_js.state()
 ], exports.DaikinRadioGroup.prototype, "_label", 2);

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

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

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

@@ -8,6 +8,7 @@ require("../../base/dds-form-element.cjs");
 const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
+const customReadonly = require("../../controllers/custom-readonly.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -23,26 +24,15 @@ const cvaSelect = classVarianceAuthority.cva(
   [
     "block",
     "w-full",
-    "h-full",
     "relative",
-    "after:icon-[daikin--chevron-down]",
-    "after:w-6",
-    "after:h-6",
-    "after:m-auto",
-    "after:absolute",
-    "after:top-0",
-    "after:bottom-0",
-    "after:right-3.25",
-    "after:pointer-events-none",
     "slotted-select:appearance-none!",
     "slotted-select:flex!",
     "slotted-select:items-center!",
     "slotted-select:gap-2!",
     "slotted-select:w-full!",
     "slotted-select:h-full!",
-    "slotted-select:min-h-12!",
-    "slotted-select:pl-4!",
-    "slotted-select:pr-12!",
+    "slotted-select:min-h-(--dds-input-height)!",
+    "slotted-select:pr-[calc(var(--dds-padding-30)+var(--dds-gap-10)+var(--dds-icon))]!",
     "slotted-select:text-base!",
     "slotted-select:border!",
     "slotted-select:border-(--color-base)!",
@@ -53,10 +43,7 @@ const cvaSelect = classVarianceAuthority.cva(
     "slotted-select:-outline-offset-2!",
     "slotted-select-focus-visible:outline-2!",
     "slotted-select-focus-visible:outline-(--color-focus)!",
-    "slotted-select-enabled:cursor-pointer!",
     "slotted-select-enabled:text-ddt-color-common-text-primary!",
-    "slotted-select-hover:bg-ddt-color-common-surface-hover!",
-    "slotted-select-active:bg-ddt-color-common-surface-press!",
     "slotted-select-disabled:text-ddt-color-common-disabled!",
     "slotted-select-disabled:border-ddt-color-common-disabled!"
   ],
@@ -66,6 +53,24 @@ const cvaSelect = classVarianceAuthority.cva(
         false: ["after:text-ddt-color-common-text-primary"],
         true: ["after:text-ddt-color-common-disabled"]
       },
+      readonly: {
+        false: [
+          "after:icon-[daikin--chevron-down]",
+          "after:size-(--dds-icon)",
+          "after:m-auto",
+          "after:absolute",
+          "after:top-0",
+          "after:bottom-0",
+          "after:right-(--dds-padding-30)",
+          "after:pointer-events-none"
+        ],
+        true: [
+          "slotted-select:[--color-base:var(--dds-color-common-surface-secondary)]",
+          "slotted-select:bg-(--dds-color-common-surface-secondary)!",
+          "slotted-select:hover:bg-(--dds-color-common-surface-secondary)!",
+          "slotted-select:active:bg-(--dds-color-common-surface-secondary)!"
+        ]
+      },
       error: {
         false: [
           "slotted-select-enabled:[--color-base:var(--dds-color-common-neutral-default)]",
@@ -77,6 +82,63 @@ const cvaSelect = classVarianceAuthority.cva(
           "[--color-base:var(--dds-color-common-danger-default)]",
           "[--color-focus:var(--dds-color-common-danger-default)]"
         ]
+      },
+      hasLeftIcon: {
+        false: [
+          "slotted-select:pl-[calc(var(--dds-padding-30)+var(--dds-space-100))]!"
+        ],
+        true: [
+          "slotted-select:pl-[calc(var(--dds-padding-30)+var(--dds-gap-10)+var(--dds-icon)+var(--dds-space-100))]!"
+        ]
+      }
+    },
+    compoundVariants: [
+      {
+        readonly: false,
+        disabled: false,
+        class: ["cursor-pointer slotted-select:cursor-pointer"]
+      },
+      {
+        readonly: false,
+        class: [
+          "slotted-select-hover:bg-ddt-color-common-surface-hover!",
+          "slotted-select-active:bg-ddt-color-common-surface-press!"
+        ]
+      },
+      {
+        readonly: true,
+        error: false,
+        class: [
+          "slotted-select-enabled:[--color-base:var(--dds-color-common-surface-secondary)]",
+          "slotted-select-hover:[--color-base:var(--dds-color-common-surface-secondary)]",
+          "slotted-select-active:[--color-base:var(--dds-color-common-surface-secondary)]"
+        ]
+      },
+      {
+        readonly: true,
+        error: true,
+        class: [
+          "slotted-select-enabled:[--color-base:var(--dds-color-common-danger-default)]"
+        ]
+      }
+    ]
+  }
+);
+const cvaLeftIcon = classVarianceAuthority.cva(
+  [
+    "absolute",
+    "z-1",
+    "top-1/2",
+    "-translate-y-1/2",
+    "left-(--dds-padding-30)",
+    "shrink-0",
+    "size-(--dds-icon)"
+  ],
+  {
+    variants: {
+      disabled: {
+        false: ["text-ddt-color-common-text-primary"],
+        true: ["text-ddt-color-common-disabled"]
       }
     }
   }
@@ -86,8 +148,30 @@ exports.DaikinSelect = class DaikinSelect extends ddsElement.DDSElement {
     super(...arguments);
     this.error = false;
     this.required = false;
+    this.readonly = false;
     this.disabled = false;
+    this._hasLeftIcon = false;
     this._label = null;
+    this._readonlyController = new customReadonly.CustomReadonlyController(this, {
+      isReadonly: () => this.readonly,
+      isDisabled: () => this.disabled,
+      blockedKeys: [
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+        "Home",
+        "End",
+        "PageUp",
+        "PageDown",
+        "Enter",
+        " "
+      ]
+    });
+  }
+  _handleLeftIconSlotChange(event) {
+    const slot = event.target;
+    this._hasLeftIcon = slot.assignedElements().length > 0;
   }
   get _select() {
     return this._selects[0] ?? null;
@@ -95,23 +179,38 @@ exports.DaikinSelect = class DaikinSelect extends ddsElement.DDSElement {
   _updateSelect() {
     const select = this._select;
     if (!select) {
+      this._readonlyController.setTarget(null);
       return;
     }
     select.disabled = this.disabled;
     select.required = this.required;
     select.ariaLabel = this._label;
+    this._readonlyController.setTarget(select);
   }
   _handleSlotChange() {
     this._updateSelect();
   }
   render() {
-    return lit.html`<slot
-      class=${cvaSelect({ disabled: this.disabled, error: this.error })}
-      @slotchange=${this._handleSlotChange}
-    ></slot>`;
+    return lit.html`<span
+        class=${cvaLeftIcon({
+      disabled: this.disabled
+    })}
+        ><slot
+          name="left-icon"
+          @slotchange=${this._handleLeftIconSlotChange}
+        ></slot></span
+      ><slot
+        class=${cvaSelect({
+      disabled: this.disabled,
+      readonly: this.readonly && !this.disabled,
+      error: this.error,
+      hasLeftIcon: this._hasLeftIcon
+    })}
+        @slotchange=${this._handleSlotChange}
+      ></slot>`;
   }
   updated(changedProperties) {
-    if (changedProperties.has("disabled") || changedProperties.has("required")) {
+    if (changedProperties.has("disabled") || changedProperties.has("required") || changedProperties.has("readonly")) {
       this._updateSelect();
     }
   }
@@ -122,6 +221,7 @@ exports.DaikinSelect = class DaikinSelect extends ddsElement.DDSElement {
   reflectInputGroup(inputGroup) {
     const isError = !inputGroup.disabled && !!inputGroup.error;
     this.disabled = !!inputGroup.disabled;
+    this.readonly = !!inputGroup.readonly;
     this.required = !!inputGroup.required;
     this.error = isError;
     this._label = inputGroup.label;
@@ -161,6 +261,7 @@ exports.DaikinSelect.styles = lit.css`
     :host {
       display: block;
       width: 100%;
+      position: relative;
     }
   `;
 __decorateClass([
@@ -169,12 +270,18 @@ __decorateClass([
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinSelect.prototype, "required", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true })
+], exports.DaikinSelect.prototype, "readonly", 2);
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinSelect.prototype, "disabled", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "select" })
 ], exports.DaikinSelect.prototype, "_selects", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinSelect.prototype, "_hasLeftIcon", 2);
 __decorateClass([
   decorators_js.state()
 ], exports.DaikinSelect.prototype, "_label", 2);