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

package/dist/cjs-dev/components/modal-footer/daikin-modal-footer.cjs

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
+const tailwind = require("../../tailwind.css.cjs");
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
+      result = decorator(result) || result;
+  return result;
+};
+exports.DaikinModalFooter = class DaikinModalFooter extends ddsElement.DDSElement {
+  render() {
+    return lit.html`<div class="flex flex-wrap justify-end w-full gap-4">
+      <slot></slot>
+    </div>`;
+  }
+};
+exports.DaikinModalFooter.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    @media (max-width: 40rem) {
+      :host {
+        justify-content: center;
+      }
+    }
+  `;
+exports.DaikinModalFooter = __decorateClass([
+  decorators.ddsElement("daikin-modal-footer")
+], exports.DaikinModalFooter);

package/dist/cjs-dev/components/modal-footer/daikin-modal-footer.d.cts

@@ -0,0 +1,33 @@
+import { DDSElement } from "../../base/index.cjs";
+/**
+ * `daikin-modal-footer` is used to represent footer of the modal component, and is used as a child element of the `daikin-modal` component.
+ *
+ * Hierarchy:
+ * - `daikin-modal` > `daikin-modal-footer`
+ *
+ * @slot A slot for modal footer action element. Place a `daikin-button` or `daikin-link` element here.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/modal-footer/index.js";
+ * ```
+ *
+ * ```html
+ * <!-- See `daikin-modal` component for complete example. -->
+ * <daikin-modal-footer>
+ *  <daikin-button size="small" color="default">
+ *    Button
+ *  </daikin-button>
+ * </daikin-modal-footer>
+ * ```
+ */
+export declare class DaikinModalFooter extends DDSElement {
+    static styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-modal-footer": DaikinModalFooter;
+    }
+}

package/dist/cjs-dev/components/modal-footer/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinModalFooter = require("./daikin-modal-footer.cjs");
+Object.defineProperty(exports, "DaikinModalFooter", {
+  enumerable: true,
+  get: () => daikinModalFooter.DaikinModalFooter
+});

package/dist/cjs-dev/components/modal-footer/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-modal-footer.cjs";

package/dist/cjs-dev/components/modal-header/daikin-modal-header.cjs

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const ref_js = require("lit/directives/ref.js");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
+const tailwind = require("../../tailwind.css.cjs");
+require("../icon-button/daikin-icon-button.cjs");
+require("../icon/daikin-icon.cjs");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const cvaTitle = classVarianceAuthority.cva([
+  "flex-none",
+  "text-ddt-color-common-text-primary",
+  "font-daikinSerif",
+  "text-xl",
+  "leading-[1.3]",
+  "not-italic",
+  "font-bold"
+])();
+const cvaDescription = classVarianceAuthority.cva([
+  "flex-none",
+  "text-ddt-color-common-text-primary",
+  "font-daikinSerif",
+  "text-base",
+  "leading-normal",
+  "not-italic",
+  "font-normal"
+])();
+exports.DaikinModalHeader = class DaikinModalHeader extends ddsElement.DDSElement {
+  constructor() {
+    super(...arguments);
+    this.withCloseButton = false;
+    this._closeButton = ref_js.createRef();
+  }
+  _handleClick() {
+    this.dispatchEvent(
+      new CustomEvent("close", {
+        composed: true,
+        bubbles: true
+      })
+    );
+  }
+  render() {
+    return lit.html`<div class="flex w-full gap-2">
+      <div class="flex-1 flex flex-col pt-0.5 gap-2 break-all">
+        <slot class=${cvaTitle}></slot>
+        <slot name="description" class=${cvaDescription}></slot>
+      </div>
+      ${this.withCloseButton ? lit.html`<div class="flex-none">
+            <daikin-icon-button
+              ${ref_js.ref(this._closeButton)}
+              variant="ghost"
+              color="neutral"
+              button-aria-label="Close"
+              class="w-8 h-8"
+              @click=${this._handleClick}
+            >
+              <daikin-icon icon="close" color="current"></daikin-icon>
+            </daikin-icon-button>
+          </div>` : lit.nothing}
+    </div>`;
+  }
+  /**
+   * Focuses on the header content area.
+   */
+  focusCloseButton() {
+    var _a;
+    (_a = this._closeButton.value) == null ? void 0 : _a.focus();
+  }
+};
+exports.DaikinModalHeader.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: flex;
+      align-items: center;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "with-close-button" })
+], exports.DaikinModalHeader.prototype, "withCloseButton", 2);
+exports.DaikinModalHeader = __decorateClass([
+  decorators.ddsElement("daikin-modal-header")
+], exports.DaikinModalHeader);

package/dist/cjs-dev/components/modal-header/daikin-modal-header.d.cts

@@ -0,0 +1,43 @@
+import { DDSElement } from "../../base/index.cjs";
+/**
+ * `daikin-modal-header` is used to represent header of the modal component, and is used as a child element of the `daikin-modal` component.
+ *
+ * Hierarchy:
+ * - `daikin-modal` > `daikin-modal-header`
+ *
+ * @slot description - An optional slot for description.
+ * @slot - A slot for modal title.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/modal-header/index.js";
+ * ```
+ *
+ * ```html
+ * <!-- See `daikin-modal` component for complete example. -->
+ * <daikin-modal-header>
+ *   <span slot="description">Description</span>
+ *   <span>Modal Title</span>
+ * </daikin-modal-header>
+ * ```
+ */
+export declare class DaikinModalHeader extends DDSElement {
+    static styles: import('lit').CSSResult;
+    /**
+     * Whether the modal is open.
+     */
+    withCloseButton: boolean;
+    private _closeButton;
+    private _handleClick;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the header content area.
+     */
+    focusCloseButton(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-modal-header": DaikinModalHeader;
+    }
+}

package/dist/cjs-dev/components/modal-header/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinModalHeader = require("./daikin-modal-header.cjs");
+Object.defineProperty(exports, "DaikinModalHeader", {
+  enumerable: true,
+  get: () => daikinModalHeader.DaikinModalHeader
+});

package/dist/cjs-dev/components/modal-header/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-modal-header.cjs";

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

@@ -67,14 +67,14 @@ const cvaBarContainer = classVarianceAuthority.cva(
           "after:size-4",
           "after:flex-none",
           "after:bg-ddt-color-common-success",
-          "after:i-daikin-status-positive"
+          "after:i-daikin-success"
         ],
         indeterminate: [],
         error: [
           "after:size-4",
           "after:flex-none",
           "after:text-ddt-color-common-danger-default",
-          "after:i-daikin-status-error"
+          "after:i-daikin-error"
         ]
       }
     }
@@ -83,9 +83,9 @@ const cvaBarContainer = classVarianceAuthority.cva(
 const cvaHelper = classVarianceAuthority.cva(["text-sm", "leading-[130%]"], {
   variants: {
     variant: {
-      inprogress: ["text-ddt-color-common-text-primary"],
-      completed: ["text-ddt-color-common-text-primary"],
-      indeterminate: ["text-ddt-color-common-text-primary"],
+      inprogress: ["text-ddt-color-common-text-secondary"],
+      completed: ["text-ddt-color-common-text-secondary"],
+      indeterminate: ["text-ddt-color-common-text-secondary"],
       error: ["text-ddt-color-common-danger-default", "font-bold"]
     },
     visible: {

package/dist/cjs-dev/components/progress-indicator-item/daikin-progress-indicator-item.cjs

@@ -59,7 +59,7 @@ exports.DaikinProgressIndicatorItem = class DaikinProgressIndicatorItem extends
       ${this.status === "finished" ? lit.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>
           ` : lit.nothing}

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

@@ -4,9 +4,10 @@ const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
-const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
+const ddsFormElement = require("../../base/dds-form-element.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -54,24 +55,21 @@ const cvaLabel = classVarianceAuthority.cva([], {
     }
   }
 });
-exports.DaikinRadio = class DaikinRadio extends ddsElement.DDSElement {
+exports.DaikinRadio = class DaikinRadio extends ddsFormElement.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;
@@ -143,13 +141,6 @@ exports.DaikinRadio.styles = lit.css`
       display: inline-block;
     }
   `;
-exports.DaikinRadio.formAssociated = true;
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinRadio.prototype, "name", 2);
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinRadio.prototype, "value", 2);
 __decorateClass([
   decorators_js.property({ type: String })
 ], exports.DaikinRadio.prototype, "label", 2);

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

@@ -1,4 +1,4 @@
-import { DDSElement } from "../../base/index.cjs";
+import { DDSFormElement } from "../../base/dds-form-element.cjs";
 /**
  * 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.cjs";
  *  <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/cjs-dev/components/radio-group/daikin-radio-group.cjs

@@ -19,7 +19,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-3", "gap-y-2"], {
+const cvaRadioGroup = classVarianceAuthority.cva(["size-full", "flex", "gap-x-8", "gap-y-2"], {
   variants: {
     orientation: {
       horizontal: ["flex-row", "flex-wrap"],

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

@@ -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/cjs-dev/components/select/daikin-select.cjs

@@ -23,7 +23,7 @@ const cvaSelect = classVarianceAuthority.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",
@@ -150,6 +150,11 @@ exports.DaikinSelect.styles = lit.css`
       background: transparent;
     }
 
+    ::slotted(select) {
+      background-color: var(--dds-color-common-surface-default) !important;
+      color: var(--ddt-color-common-text-primary) !important;
+    }
+
     ${lit.unsafeCSS(tailwind.default)}
 
     :host {

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

@@ -0,0 +1,263 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const ref_js = require("lit/directives/ref.js");
+const ddsFormElement = require("../../base/dds-form-element.cjs");
+const tailwind = require("../../tailwind.css.cjs");
+const sliderUtils = require("./slider-utils.cjs");
+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 = classVarianceAuthority.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 = classVarianceAuthority.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"]
+      }
+    }
+  }
+);
+exports.DaikinSlider = class DaikinSlider extends ddsFormElement.DDSFormElement {
+  constructor() {
+    super();
+    this.min = "1";
+    this.max = "100";
+    this.step = "1";
+    this.disabled = false;
+    this.sliderAriaLabel = "slider";
+    this._dragging = false;
+    this._sliderRef = ref_js.createRef();
+    this._thumbRef = ref_js.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 = sliderUtils.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 = sliderUtils.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 lit.html`
+      <span
+        ${ref_js.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_js.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();
+  }
+};
+exports.DaikinSlider.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-flex;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinSlider.prototype, "min", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinSlider.prototype, "max", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinSlider.prototype, "step", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinSlider.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "slider-aria-label" })
+], exports.DaikinSlider.prototype, "sliderAriaLabel", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinSlider.prototype, "_dragging", 2);
+exports.DaikinSlider = __decorateClass([
+  decorators_js.customElement("daikin-slider")
+], exports.DaikinSlider);