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

package/dist/es/components/progress-bar/daikin-progress-bar.js

@@ -113,29 +113,37 @@ let DaikinProgressBar = class extends DDSElement {
   }
   render() {
     const progressRatio = Math.min(Math.max(this.value / this.max, 0), 1);
-    return html`<div class="flex flex-col gap-2 w-full">
-      <div class=${cvaBarContainer({ variant: this.variant })}>
-        <slot></slot>
-      </div>
+    return 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/es/components/radio/daikin-radio.d.ts

@@ -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/es/components/radio/daikin-radio.js

@@ -23,37 +23,107 @@ const cvaWrapper = cva(
   {
     variants: {
       disabled: {
-        false: ["cursor-pointer"],
+        false: [],
+        true: []
+      },
+      readonly: {
+        false: [],
         true: []
       }
-    }
+    },
+    compoundVariants: [
+      {
+        disabled: false,
+        readonly: false,
+        class: ["cursor-pointer"]
+      }
+    ]
+  }
+);
+const RADIO_CLASS_NAME = 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 = 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 = cva(["natural-break"], {
   variants: {
     disabled: {
@@ -63,17 +133,54 @@ const cvaLabel = 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!"]
+    }
+  ]
 });
 let DaikinRadio = class extends 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";
   }
@@ -82,7 +189,7 @@ let DaikinRadio = class extends 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") {
@@ -90,6 +197,10 @@ let DaikinRadio = class extends DDSFormElement {
     }
   }
   _handleChange(event) {
+    if (this._readonly) {
+      event.preventDefault();
+      return;
+    }
     this.checked = event.target.checked;
     this._updateFormValue();
     this.dispatchEvent(
@@ -100,19 +211,25 @@ let DaikinRadio = class extends DDSFormElement {
     );
   }
   render() {
-    const disabled = this.disabled || this.disabledByParent;
     return 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(this.getBackingProperty("name"))}
           aria-label=${this._labelHidden ? this.label : nothing}
           tabindex=${ifDefined(this.skipTab ? "-1" : void 0)}
-          ?disabled=${disabled}
+          ?disabled=${this._disabled}
           .checked=${this.checked}
           .value=${this.value}
           @change=${this._handleChange}
@@ -120,8 +237,10 @@ let DaikinRadio = class extends 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}
       >
@@ -168,9 +287,15 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinRadio.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinRadio.prototype, "readonly", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, attribute: false })
 ], DaikinRadio.prototype, "disabledByParent", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: false })
+], DaikinRadio.prototype, "readonlyByParent", 2);
 __decorateClass([
   property({ type: Boolean, attribute: false })
 ], DaikinRadio.prototype, "skipTab", 2);

package/dist/es/components/radio-group/daikin-radio-group.d.ts

@@ -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/es/components/radio-group/daikin-radio-group.js

@@ -19,7 +19,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaRadioGroup = cva(["size-full", "flex", "gap-x-8", "gap-y-2"], {
+const cvaRadioGroup = cva(["w-full", "flex", "gap-x-8", "gap-y-2"], {
   variants: {
     orientation: {
       horizontal: ["flex-row", "flex-wrap"],
@@ -33,6 +33,7 @@ let DaikinRadioGroup = class extends DDSElement {
     this.value = "";
     this.required = false;
     this.disabled = false;
+    this.readonly = false;
     this._label = null;
     this._handleRadioChange = (event) => {
       event.stopPropagation();
@@ -43,6 +44,7 @@ let DaikinRadioGroup = class extends DDSElement {
   _reflectSlotProperties() {
     for (const radio of this._radios) {
       radio.disabledByParent = this.disabled;
+      radio.readonlyByParent = this.readonly;
     }
   }
   _updateRadios() {
@@ -67,6 +69,9 @@ let DaikinRadioGroup = class extends DDSElement {
    * https://www.w3.org/WAI/ARIA/apg/patterns/radio/
    */
   _handleKeyDown(event) {
+    if (this.disabled || this.readonly) {
+      return;
+    }
     const moveOffset = {
       ArrowRight: 1,
       ArrowDown: 1,
@@ -130,6 +135,7 @@ let DaikinRadioGroup = class extends DDSElement {
     this._label = inputGroup.label;
     this.required = !!inputGroup.required;
     this.disabled = inputGroup.disabled;
+    this.readonly = inputGroup.readonly;
   }
 };
 DaikinRadioGroup.styles = css`
@@ -165,6 +171,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinRadioGroup.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinRadioGroup.prototype, "readonly", 2);
 __decorateClass([
   state()
 ], DaikinRadioGroup.prototype, "_label", 2);

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

@@ -10,6 +10,7 @@ import { DaikinInputGroup } from "../input-group/index.js";
  * - `daikin-input-group` > `daikin-select`
  *
  * @slot - A slot for an HTML `<select>` element which may contain `<option>` and `<optgroup>`.
+ * @slot left-icon - A slot for an icon to be placed to the left of the summary text. Place `daikin-icon` or something similar.
  *
  * @example
  *
@@ -40,18 +41,28 @@ export declare class DaikinSelect extends DDSElement {
      * Whether the select component is required.
      */
     required: boolean;
+    /**
+     * Whether the select is readonly.
+     */
+    readonly: boolean;
     /**
      * Whether the select component is disabled.
      * This value will also be applied to the `disabled` property of the `<select>` element in the slot.
      */
     disabled: boolean;
     private readonly _selects;
+    private _hasLeftIcon;
     /**
      * The label text used as the value of aria-label.
      * Set automatically by `reflectInputGroup` method.
      */
     private _label;
+    private _handleLeftIconSlotChange;
     private get _select();
+    /**
+     * Native <select> elements do not support the readonly attribute, so a custom controller is used to achieve a similar readonly behavior.
+     */
+    private readonly _readonlyController;
     private _updateSelect;
     private _handleSlotChange;
     render(): import('lit-html').TemplateResult<1>;