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

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

@@ -1,4 +1,4 @@
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, queryAssignedElements } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";

package/dist/es/components/progress-indicator-item/daikin-progress-indicator-item.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html, nothing } from "lit";
+import { unsafeCSS, css, nothing, html } from "lit";
 import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { DDSElement } from "../../base/dds-element.js";
@@ -57,7 +57,7 @@ let DaikinProgressIndicatorItem = class extends DDSElement {
       ${this.status === "finished" ? html`
             <span
               role="img"
-              class="flex-none size-4 i-daikin-status-positive text-ddt-color-common-brand-default"
+              class="flex-none size-4 i-daikin-success text-ddt-color-common-brand-default"
               aria-label="Completed"
             ></span>
           ` : nothing}

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

@@ -1,4 +1,4 @@
-import { DDSElement } from "../../base/index.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
 /**
  * The radio button component is a UI element that allows users to select one options from a set of choices.
  * It functions similarly to the HTML `<input type="radio">` tag. \
@@ -21,16 +21,8 @@ import { DDSElement } from "../../base/index.js";
  *  <daikin-radio name="name" value="value" label="Radio button label"></daikin-radio>
  * ```
  */
-export declare class DaikinRadio extends DDSElement {
+export declare class DaikinRadio 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 radio button.
      */
@@ -62,9 +54,7 @@ export declare class DaikinRadio extends DDSElement {
      */
     skipTab: boolean;
     private _radio;
-    static readonly formAssociated = true;
     private get _labelHidden();
-    private _internals;
     private _updateFormValue;
     private _handleClick;
     private _handleChange;

package/dist/es/components/radio/daikin-radio.js

@@ -1,10 +1,11 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html, nothing } from "lit";
+import { unsafeCSS, css, nothing, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -52,24 +53,21 @@ const cvaLabel = cva([], {
     }
   }
 });
-let DaikinRadio = class extends DDSElement {
+let DaikinRadio = class extends DDSFormElement {
   constructor() {
     super(...arguments);
-    this.name = "";
-    this.value = "";
     this.label = "";
     this.labelPosition = "right";
     this.checked = false;
     this.disabled = false;
     this.disabledByParent = false;
     this.skipTab = false;
-    this._internals = this.attachInternals();
   }
   get _labelHidden() {
     return this.labelPosition === "hidden";
   }
   _updateFormValue() {
-    this._internals.setFormValue(this.checked ? this.value : null);
+    this.setFormValue(this.checked ? this.value : null);
   }
   _handleClick(event) {
     var _a;
@@ -141,13 +139,6 @@ DaikinRadio.styles = css`
       display: inline-block;
     }
   `;
-DaikinRadio.formAssociated = true;
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinRadio.prototype, "name", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinRadio.prototype, "value", 2);
 __decorateClass([
   property({ type: String })
 ], DaikinRadio.prototype, "label", 2);

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

@@ -40,7 +40,8 @@ export declare class DaikinRadioGroup extends DDSElement {
      */
     orientation: RadioGroupProps["orientation"];
     /**
-     * The form name.
+     * The form name, submitted as a name/value pair when submitting the form.
+     * When this value is set, all `daikin-radio` child components under it will be assigned this name.
      */
     name: string;
     /**

package/dist/es/components/radio-group/daikin-radio-group.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { queryAssignedElements, property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { DDSElement } from "../../base/dds-element.js";
@@ -17,7 +17,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaRadioGroup = cva(["size-full", "flex", "gap-x-3", "gap-y-2"], {
+const cvaRadioGroup = cva(["size-full", "flex", "gap-x-8", "gap-y-2"], {
   variants: {
     orientation: {
       horizontal: ["flex-row", "flex-wrap"],

package/dist/es/components/select/daikin-select.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, queryAssignedElements, state } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
@@ -21,7 +21,7 @@ const cvaSelect = cva(
     "w-full",
     "h-full",
     "relative",
-    "after:i-daikin-dropdown-chevron-down",
+    "after:i-daikin-chevron-down",
     "after:w-6",
     "after:h-6",
     "after:m-auto",
@@ -148,6 +148,11 @@ DaikinSelect.styles = css`
       background: transparent;
     }
 
+    ::slotted(select) {
+      background-color: var(--dds-color-common-surface-default) !important;
+      color: var(--ddt-color-common-text-primary) !important;
+    }
+
     ${unsafeCSS(tailwindStyles)}
 
     :host {

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

@@ -0,0 +1,67 @@
+import { PropertyValues } from 'lit';
+import { DDSFormElement } from "../../base/dds-form-element.js";
+/**
+ * The slider component is a control that allows users to input numerical values within a specific range intuitively.
+ * It functions similarly to the HTML `<input type="range">` tag, allows you to set the range of values.
+ *
+ * @fires change - A retargeted event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input type="range">` element.
+ * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/slider/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-slider name="name" value="1" min="1" max="100" step="1"></daikin-slider>
+ * ```
+ */
+export declare class DaikinSlider extends DDSFormElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * The smallest value in the range of permitted values.
+     */
+    min: string;
+    /**
+     * The largest value in the range of permitted values.
+     */
+    max: string;
+    /**
+     * The step attribute is a number that specifies the granularity that the value must adhere to.
+     */
+    step: string;
+    /**
+     * Specify the slider disabled state.
+     */
+    disabled: boolean;
+    /**
+     * The aria-label of the slider.
+     * You should specify this value based on the slider's use case, such as "air conditioner temperature".
+     */
+    sliderAriaLabel: string;
+    constructor();
+    private _dragging;
+    private _sliderRef;
+    private _thumbRef;
+    private _updateFormValue;
+    private get _progress();
+    private _handleDrag;
+    private _handleKeyDown;
+    /**
+     * Returns a normalized value of the mouse position on the slider, in the range 0 to 1.
+     *
+     * @param event A MouseEvent.
+     * @returns The mouse's X coordinate normalized to a range of 0 to 1. The left end and beyond of the slider is 0, and the right end and beyond is 1.
+     */
+    private _calcMousePositionRatio;
+    private _startDrag;
+    private _startTouch;
+    render(): import('lit-html').TemplateResult<1>;
+    updated(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-slider": DaikinSlider;
+    }
+}

package/dist/es/components/slider/daikin-slider.js

@@ -0,0 +1,264 @@
+import { cva } from "class-variance-authority";
+import { unsafeCSS, css, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
+import tailwindStyles from "../../tailwind.css.js";
+import { getValueFromRatio, getValueByKeydown } from "./slider-utils.js";
+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 cvaSliderThumb = cva(
+  [
+    "absolute",
+    "top-1/2",
+    "-translate-x-1/2",
+    "-translate-y-1/2",
+    "w-4",
+    "h-4",
+    "rounded-full",
+    "left-[--slider-ratio]"
+  ],
+  {
+    variants: {
+      disabled: {
+        false: [
+          "cursor-pointer",
+          "[&:not([data-dragging])]:bg-ddt-color-common-brand-default",
+          "[&:not([data-dragging])]:hover:bg-ddt-color-common-brand-hover",
+          "[&:not([data-dragging])]:active:bg-ddt-color-common-brand-press",
+          "data-[dragging]:bg-ddt-color-common-brand-press",
+          "focus-visible:outline",
+          "focus-visible:outline-2",
+          "focus-visible:outline-offset-2",
+          "focus-visible:outline-ddt-color-common-border-focus"
+        ],
+        true: ["bg-ddt-color-common-disabled", "pointer-events-none"]
+      }
+    }
+  }
+);
+const cvaSliderTrack = cva(
+  [
+    "absolute",
+    "top-1/2",
+    "-translate-y-1/2",
+    "left-0",
+    "h-1",
+    "w-[--slider-ratio]"
+  ],
+  {
+    variants: {
+      disabled: {
+        false: ["bg-ddt-color-common-brand-default"],
+        true: ["bg-ddt-color-common-border-empty"]
+      }
+    }
+  }
+);
+let DaikinSlider = class extends DDSFormElement {
+  constructor() {
+    super();
+    this.min = "1";
+    this.max = "100";
+    this.step = "1";
+    this.disabled = false;
+    this.sliderAriaLabel = "slider";
+    this._dragging = false;
+    this._sliderRef = createRef();
+    this._thumbRef = createRef();
+    this.value = this.min;
+  }
+  _updateFormValue() {
+    if (this.disabled) {
+      return;
+    }
+    this.setFormValue(this.value);
+    this.dispatchEvent(
+      new Event("change", {
+        bubbles: true,
+        composed: true
+      })
+    );
+    this.dispatchEvent(
+      new Event("input", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  get _progress() {
+    const min = parseFloat(this.min);
+    const max = parseFloat(this.max);
+    const clampedValue = Math.max(min, Math.min(parseFloat(this.value), max));
+    return (clampedValue - min) / (max - min) * 100;
+  }
+  _handleDrag(event) {
+    const leftDistance = this._calcMousePositionRatio(event);
+    if (leftDistance == null) {
+      return;
+    }
+    const value = getValueFromRatio(this, leftDistance);
+    this.value = value;
+  }
+  // This function is called when an arrow key is pressed while the thumb is focused.
+  _handleKeyDown(event) {
+    if (this.disabled) {
+      return;
+    }
+    const value = getValueByKeydown(this, event.key);
+    if (value == null) {
+      return;
+    }
+    this.value = value;
+    event.preventDefault();
+  }
+  /**
+   * Returns a normalized value of the mouse position on the slider, in the range 0 to 1.
+   *
+   * @param event A MouseEvent.
+   * @returns The mouse's X coordinate normalized to a range of 0 to 1. The left end and beyond of the slider is 0, and the right end and beyond is 1.
+   */
+  _calcMousePositionRatio(event) {
+    var _a;
+    const box = (_a = this._sliderRef.value) == null ? void 0 : _a.getBoundingClientRect();
+    if (box == null) {
+      return;
+    }
+    const x = event instanceof MouseEvent ? event.clientX : event.targetTouches[0].clientX;
+    const relativeX = x - box.left;
+    return Math.max(0, Math.min(relativeX / box.width, 1));
+  }
+  // This function will triggered when the slider thumb button start dragging.
+  _startDrag(event) {
+    var _a;
+    event.preventDefault();
+    if (this.disabled) {
+      return;
+    }
+    const controller = new AbortController();
+    const { signal } = controller;
+    this._dragging = true;
+    document.addEventListener(
+      "mousemove",
+      (event2) => {
+        this._handleDrag(event2);
+      },
+      { signal }
+    );
+    document.addEventListener(
+      "mouseup",
+      () => {
+        this._dragging = false;
+        controller.abort();
+      },
+      { once: true }
+    );
+    (_a = this._thumbRef.value) == null ? void 0 : _a.focus();
+    this._handleDrag(event);
+  }
+  // This function will triggered when the slider thumb button start dragging.
+  _startTouch(event) {
+    var _a;
+    event.preventDefault();
+    if (this.disabled) {
+      return;
+    }
+    const controller = new AbortController();
+    const { signal } = controller;
+    this._dragging = true;
+    document.addEventListener(
+      "touchmove",
+      (event2) => {
+        this._handleDrag(event2);
+      },
+      { signal }
+    );
+    document.addEventListener(
+      "touchend",
+      () => {
+        this._dragging = false;
+        controller.abort();
+      },
+      { once: true }
+    );
+    (_a = this._thumbRef.value) == null ? void 0 : _a.focus();
+    this._handleDrag(event);
+  }
+  render() {
+    const progress = this._progress;
+    return html`
+      <span
+        ${ref(this._sliderRef)}
+        class="w-full h-6 relative"
+        style="--slider-ratio:${progress}%"
+        @mousedown=${this._startDrag}
+        @touchstart=${this._startTouch}
+      >
+        <span
+          class="w-full absolute top-1/2 -translate-y-1/2 left-0 h-1 bg-ddt-color-common-border-empty"
+        ></span>
+        <span class=${cvaSliderTrack({ disabled: this.disabled })}></span>
+        <span
+          ${ref(this._thumbRef)}
+          class=${cvaSliderThumb({ disabled: this.disabled })}
+          tabindex=${this.disabled ? -1 : 0}
+          role="slider"
+          ?data-dragging=${this._dragging}
+          aria-valuenow=${this.value}
+          aria-valuemin=${this.min}
+          aria-valuemax=${this.max}
+          aria-label=${this.sliderAriaLabel}
+          aria-disabled=${this.disabled}
+          @mousedown=${this._startDrag}
+          @keydown=${this._handleKeyDown}
+        ></span>
+      </span>
+    `;
+  }
+  updated(changedProperties) {
+    if (!changedProperties.has("value")) {
+      return;
+    }
+    this._updateFormValue();
+  }
+};
+DaikinSlider.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: inline-flex;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinSlider.prototype, "min", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinSlider.prototype, "max", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinSlider.prototype, "step", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinSlider.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "slider-aria-label" })
+], DaikinSlider.prototype, "sliderAriaLabel", 2);
+__decorateClass([
+  state()
+], DaikinSlider.prototype, "_dragging", 2);
+DaikinSlider = __decorateClass([
+  customElement("daikin-slider")
+], DaikinSlider);
+export {
+  DaikinSlider
+};

package/dist/es/components/slider/index.d.ts

@@ -0,0 +1 @@
+export * from "./daikin-slider.js";

package/dist/es/components/slider/index.js

@@ -0,0 +1,4 @@
+import { DaikinSlider } from "./daikin-slider.js";
+export {
+  DaikinSlider
+};

package/dist/es/components/slider/slider-utils.d.ts

@@ -0,0 +1,37 @@
+import { DaikinSlider } from "./daikin-slider.js";
+/**
+ * Returns a normalized numerical representation.
+ *
+ * - Removes trailing zeros from the decimal part.
+ * - Removes the decimal point if it becomes the last character.
+ * - Removes leading zeros from the integer part.
+ *
+ * @param str A numeric string.
+ * @returns Formatted value.
+ */
+export declare function normalizeNumberString(str: string): string;
+/**
+ * This function is used to handle floating-point errors in calculations.
+ * Ensuring that the number of decimal places matches the decimal places of the step value.
+ *
+ * @param value The current value.
+ * @param step The step value.
+ * @returns Formatted current value.
+ */
+export declare function formatValue(value: number, step: string): string;
+/**
+ * Get the current value and track bar's progress percentage from the distance to the left.
+ *
+ * @param slider The daikin-slider instance.
+ * @param ratio The ratio of the slider value (0-1).
+ * @returns Current value.
+ */
+export declare function getValueFromRatio(slider: DaikinSlider, ratio: number): string;
+/**
+ * Get the current value and track bar's progress percentage when use keyboard.
+ *
+ * @param slider The daikin-slider instance.
+ * @param moveOffset The number of thumb icon's move offset.
+ * @returns Current value.
+ */
+export declare function getValueByKeydown(slider: DaikinSlider, key: string): string | undefined;

package/dist/es/components/slider/slider-utils.js

@@ -0,0 +1,57 @@
+function normalizeNumberString(str) {
+  return str.replace(new RegExp("(?:\\.0*|(?<=\\.\\d*?)0+)$"), "").replace(new RegExp("(?<=-|^)0+(?=[1-9]|0\\.|0)"), "").replace(/^-0$/, "0");
+}
+function formatValue(value, step) {
+  var _a, _b;
+  const decimals = ((_b = (_a = /\.(\d*?)0*$/.exec(step)) == null ? void 0 : _a[1]) == null ? void 0 : _b.length) ?? 0;
+  const formattedValue = value.toFixed(decimals);
+  return normalizeNumberString(formattedValue);
+}
+function getValueFromRatio(slider, ratio) {
+  const minFloat = parseFloat(slider.min);
+  const maxFloat = parseFloat(slider.max);
+  const stepFloat = parseFloat(slider.step);
+  const rawValue = ratio * (maxFloat - minFloat) + minFloat;
+  const steppedValue = Math.round(rawValue / stepFloat) * stepFloat;
+  if (steppedValue <= minFloat) {
+    return normalizeNumberString(slider.min);
+  }
+  if (steppedValue >= maxFloat) {
+    return normalizeNumberString(slider.max);
+  }
+  return formatValue(steppedValue, slider.step);
+}
+function getValueByKeydown(slider, key) {
+  if (key === "Home") {
+    return slider.min;
+  }
+  if (key === "End") {
+    return slider.max;
+  }
+  const offset = {
+    ArrowLeft: -1,
+    ArrowDown: -1,
+    ArrowRight: 1,
+    ArrowUp: 1,
+    PageDown: -10,
+    PageUp: 10
+  }[key];
+  if (!offset) {
+    return;
+  }
+  const minFloat = parseFloat(slider.min);
+  const maxFloat = parseFloat(slider.max);
+  const stepFloat = parseFloat(slider.step);
+  const valueFloat = parseFloat(slider.value);
+  const clampedValue = Math.max(
+    minFloat,
+    Math.min(maxFloat, valueFloat + stepFloat * offset)
+  );
+  return formatValue(clampedValue, slider.step);
+}
+export {
+  formatValue,
+  getValueByKeydown,
+  getValueFromRatio,
+  normalizeNumberString
+};

package/dist/es/components/tab/daikin-tab.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
@@ -90,6 +90,7 @@ let DaikinTab = class extends DDSElement {
   render() {
     return html`
       <button
+        type="button"
         class=${cvaTab({ active: this.active })}
         ?disabled=${this.disabled}
         role="tab"

package/dist/es/components/tab-panels/daikin-tab-panels.js

@@ -1,4 +1,4 @@
-import { css, unsafeCSS, html, nothing } from "lit";
+import { unsafeCSS, css, nothing, html } from "lit";
 import { property } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
 import { DDSElement } from "../../base/dds-element.js";