@daikin-oss/design-system-web-components 0.3.2 → 0.5.0

package/dist/cjs/components/progress-indicator/index.cjs

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

package/dist/cjs/components/progress-indicator/index.d.ts

@@ -0,0 +1 @@
+export * from './daikin-progress-indicator';

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

@@ -0,0 +1,92 @@
+"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 ifDefined_js = require("lit/directives/if-defined.js");
+const tailwind = require("../../tailwind.css.cjs");
+require("../icon/daikin-icon.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 cvaContainer = classVarianceAuthority.cva(
+  [
+    "flex",
+    "flex-col",
+    "gap-1",
+    "w-full",
+    "text-system-element-text-primary",
+    "pt-1",
+    "border-t-4",
+    "font-daikinSerif"
+  ],
+  {
+    variants: {
+      status: {
+        unfinished: ["border-system-state-disabled"],
+        inprogress: ["border-system-state-primary-active"],
+        finished: ["border-system-state-primary-active"]
+      }
+    }
+  }
+);
+const cvaLabel = classVarianceAuthority.cva(
+  ["flex", "items-center", "gap-2", "font-bold", "leading-5"],
+  {
+    variants: {
+      status: {
+        unfinished: [],
+        inprogress: [],
+        finished: [
+          "after:size-4",
+          "after:i-daikin-status-success",
+          "after:text-system-state-primary-active"
+        ]
+      }
+    }
+  }
+);
+exports.DaikinProgressIndicatorItem = class DaikinProgressIndicatorItem extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.status = "unfinished";
+    this.current = false;
+  }
+  render() {
+    return lit.html`<div
+      class=${cvaContainer({
+      status: this.status
+    })}
+      role="listitem"
+      aria-current=${ifDefined_js.ifDefined(this.current ? "step" : void 0)}
+    >
+      <slot class=${cvaLabel({ status: this.status })}></slot>
+      <slot name="description" class="text-sm leading-[18px]"></slot>
+    </div>`;
+  }
+};
+exports.DaikinProgressIndicatorItem.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: 100%;
+      min-width: 142px;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinProgressIndicatorItem.prototype, "status", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinProgressIndicatorItem.prototype, "current", 2);
+exports.DaikinProgressIndicatorItem = __decorateClass([
+  decorators_js.customElement("daikin-progress-indicator-item")
+], exports.DaikinProgressIndicatorItem);

package/dist/cjs/components/progress-indicator-item/daikin-progress-indicator-item.d.ts

@@ -0,0 +1,44 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from '../../type-utils';
+declare const cvaContainer: (props?: ({
+    status?: "inprogress" | "unfinished" | "finished" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const cvaLabel: (props?: ({
+    status?: "inprogress" | "unfinished" | "finished" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type ProgressIndicatorItemVariantProps = MergeVariantProps<typeof cvaContainer | typeof cvaLabel>;
+/**
+ * The progress indicator item component is a child element within the `daikin-progress-indicator` component, this represents one of the tasks that the user is working on.
+ *
+ * In addition to the name of each task, the progress of the task can be indicated, such as whether it is in progress or has not yet started.
+ *
+ * Hierarchy:
+ * - `daikin-progress-indicator` > `daikin-progress-indicator-item`
+ *
+ * @slot - A slot for label content.
+ * @slot description - A slot for description content.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-progress-indicator-item state="unfinished">
+ *   Progress indicator label
+ *   <span slot="description">Progress indicator description</span>
+ * </daikin-progress-indicator-item>
+ * ```
+ */
+export declare class DaikinProgressIndicatorItem extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Status of the progress indicator item
+     */
+    status: ProgressIndicatorItemVariantProps["status"];
+    current: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-progress-indicator-item": DaikinProgressIndicatorItem;
+    }
+}
+export default DaikinProgressIndicatorItem;

package/dist/cjs/components/progress-indicator-item/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinProgressIndicatorItem = require("./daikin-progress-indicator-item.cjs");
+Object.defineProperty(exports, "DaikinProgressIndicatorItem", {
+  enumerable: true,
+  get: () => daikinProgressIndicatorItem.DaikinProgressIndicatorItem
+});

package/dist/cjs/components/progress-indicator-item/index.d.ts

@@ -0,0 +1 @@
+export * from './daikin-progress-indicator-item';

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

@@ -3,6 +3,7 @@ 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 ifDefined_js = require("lit/directives/if-defined.js");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -14,100 +15,104 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaRadio = classVarianceAuthority.cva(
-  [
-    "appearance-none",
-    "relative",
-    "after:absolute",
-    "after:i-daikin-radio-unchecked",
-    "checked:after:i-daikin-radio-checked",
-    "enabled:after:text-[#8C8C8C]",
-    "enabled:checked:after:text-daikinBlue-500",
-    "aria-controllable:hover:after:i-daikin-radio-checked",
-    "aria-controllable:hover:after:text-daikinBlue-300",
-    "aria-controllable:active:after:i-daikin-radio-checked",
-    "aria-controllable:active:after:text-daikinBlue-500",
-    "focus-visible:outline-none",
-    "aria-controllable:focus-visible:after:i-daikin-radio-unchecked",
-    "aria-controllable:focus-visible:checked:after:i-daikin-radio-checked",
-    "aria-controllable:focus-visible:after:text-daikinBlue-700",
-    "disabled:after:text-daikinNeutral-200"
-  ],
-  {
-    variants: {
-      size: {
-        small: ["w-[14px]", "h-[14px]"],
-        large: ["w-4", "h-4"]
-      }
+const RADIO_CLASS_NAME = classVarianceAuthority.cva([
+  "flex",
+  "justify-center",
+  "items-center",
+  "size-4",
+  "rounded-full",
+  "relative",
+  "appearance-none",
+  "focus-visible:outline",
+  "focus-visible:outline-2",
+  "focus-visible:outline-offset-2",
+  "focus-visible:outline-system-state-focus",
+  "unchecked:border-2",
+  "enabled:unchecked:border-system-state-neutral-active",
+  "enabled:unchecked:hover:bg-system-background-surface-hover",
+  "enabled:unchecked:active:bg-system-background-surface-press",
+  "checked:border-[5px]",
+  "enabled:checked:border-system-state-primary-active",
+  "enabled:checked:group-hover:border-system-state-primary-hover",
+  "enabled:checked:group-active:border-system-state-primary-press",
+  "disabled:border-system-state-disabled"
+])();
+const cvaLabel = classVarianceAuthority.cva(["pr-2"], {
+  variants: {
+    disabled: {
+      false: ["text-system-element-text-primary"],
+      true: ["text-system-state-disabled"]
     }
   }
-);
-const cvaLabel = classVarianceAuthority.cva(
-  ["leading-8", "not-italic", "font-normal", "align-middle"],
-  {
-    variants: {
-      size: {
-        small: ["text-sm"],
-        large: ["text-base"]
-      }
-    }
-  }
-);
+});
 exports.DaikinRadio = class DaikinRadio extends lit.LitElement {
   constructor() {
     super(...arguments);
-    this._internals = this.attachInternals();
+    this.name = "";
+    this.value = "";
     this.label = "";
-    this.size = "small";
     this.labelPosition = "right";
-    this.disabled = false;
-    this.readonly = false;
     this.checked = false;
-    this.name = "";
-    this.value = "";
-    this.error = false;
+    this.disabled = false;
+    this.skipTab = false;
+    this._internals = this.attachInternals();
   }
-  _handleClick(event) {
-    if (this.readonly || this.disabled) {
-      event.preventDefault();
-    }
+  /**
+   * Focuses on the inner radio.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._radio) == null ? void 0 : _a.focus(options);
   }
   _updateFormValue() {
     this._internals.setFormValue(this.checked ? this.value : null);
   }
-  updated(changedProperties) {
-    if (changedProperties.has("checked")) {
-      this._updateFormValue();
+  _handleClick(event) {
+    if (this.disabled) {
+      event.preventDefault();
     }
   }
   _handleChange(event) {
-    var _a;
-    const input = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("input");
-    this.checked = input.checked;
+    this.checked = event.target.checked;
     this._updateFormValue();
-    const newEvent = new Event("change", event);
-    this.dispatchEvent(newEvent);
+    this.dispatchEvent(
+      new Event("change", {
+        bubbles: true,
+        composed: true
+      })
+    );
   }
   render() {
-    const labelClassName = cvaLabel({ size: this.size });
-    const radioClassName = cvaRadio({ size: this.size });
-    const labelText = this.label ? lit.html`<span class="${labelClassName}">${this.label}</span>` : lit.html``;
-    const inputTag = lit.html`<input
-      class=${radioClassName}
-      type="radio"
-      name=${this.name}
-      value=${this.value}
-      aria-readonly=${this.readonly}
-      ?disabled=${this.disabled}
-      .checked=${this.checked}
-      @click=${this._handleClick}
-      @change=${this._handleChange}
-    />`;
-    const inputArea = this.labelPosition === "left" ? lit.html`${labelText}${inputTag}` : lit.html`${inputTag}${labelText}`;
-    return lit.html`<label
-      class="inline-flex w-full h-full gap-[8px] items-center font-daikinSerif"
-      >${inputArea}</label
-    >`;
+    return lit.html`<label class="group flex gap-2 items-center font-daikinSerif">
+      <span class="p-2">
+        <input
+          class=${RADIO_CLASS_NAME}
+          type="radio"
+          name=${this.name}
+          value=${this.value}
+          aria-label=${this.labelPosition === "hidden" ? this.label : lit.nothing}
+          ?disabled=${this.disabled}
+          .checked=${this.checked}
+          @click=${this._handleClick}
+          @change=${this._handleChange}
+          tabindex=${ifDefined_js.ifDefined(this.skipTab ? "-1" : void 0)}
+        />
+      </span>
+      <span
+        class=${cvaLabel({
+      disabled: this.disabled
+    })}
+        ?hidden=${this.labelPosition === "hidden"}
+      >
+        ${this.label}
+      </span>
+    </label>`;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("checked")) {
+      this._updateFormValue();
+    }
   }
 };
 exports.DaikinRadio.styles = lit.css`
@@ -119,32 +124,29 @@ exports.DaikinRadio.styles = lit.css`
   `;
 exports.DaikinRadio.formAssociated = true;
 __decorateClass([
-  decorators_js.property({ type: String })
-], exports.DaikinRadio.prototype, "label", 2);
+  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, "size", 2);
+], exports.DaikinRadio.prototype, "label", 2);
 __decorateClass([
   decorators_js.property({ type: String, attribute: "label-position" })
 ], exports.DaikinRadio.prototype, "labelPosition", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], exports.DaikinRadio.prototype, "disabled", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], exports.DaikinRadio.prototype, "readonly", 2);
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinRadio.prototype, "checked", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinRadio.prototype, "name", 2);
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinRadio.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinRadio.prototype, "value", 2);
+  decorators_js.property({ type: Boolean, attribute: false })
+], exports.DaikinRadio.prototype, "skipTab", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], exports.DaikinRadio.prototype, "error", 2);
+  decorators_js.query("input")
+], exports.DaikinRadio.prototype, "_radio", 2);
 exports.DaikinRadio = __decorateClass([
   decorators_js.customElement("daikin-radio")
 ], exports.DaikinRadio);

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

@@ -1,75 +1,73 @@
 import { LitElement } from 'lit';
-import { MergeVariantProps } from '../../type-utils';
-declare const cvaRadio: (props?: ({
-    size?: "small" | "large" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare const cvaLabel: (props?: ({
-    size?: "small" | "large" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type RadioVariantProps = MergeVariantProps<typeof cvaRadio | typeof cvaLabel>;
 /**
  * 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. \
  * Please note that **a radio group component is not yet available**, so you'll need to manually group radio buttons when using multiple instances.
  *
+ * Hierarchies:
+ * - `daikin-radio-group` > `daikin-radio`
+ *
  * @fires change - A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input type="radio">` element.
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/radio/index.js";
+ * ```
+ *
  * ```html
  *  <daikin-radio name="name" value="value" label="Radio button label"></daikin-radio>
  * ```
  */
 export declare class DaikinRadio extends LitElement {
     static readonly styles: import('lit').CSSResult;
-    private _handleClick;
-    static readonly formAssociated = true;
-    private _internals;
-    private _updateFormValue;
-    updated(changedProperties: Map<string, unknown>): void;
-    private _handleChange;
-    /**
-     * Specify the label text for the radio
-     */
-    label: string;
     /**
-     * Specify the component size
+     * Form name of the radio button.
      */
-    size: RadioVariantProps["size"];
+    name: string;
     /**
-     * Specify the label position
-     * when `left` the label will be in left of radio, when `right` label will be in right of radio
+     * Form value of the radio button.
      */
-    labelPosition: "left" | "right";
+    value: string;
     /**
-     * Specify whether the Radio should be disabled
+     * Label text for the radio button.
      */
-    disabled: boolean;
+    label: string;
     /**
-     * Specify whether the radio is read only
+     * Label position.
+     * - `right` (default): The label will be placed to the right of the radio button.
+     * - `hidden`: The label will not be shown.
      */
-    readonly: boolean;
+    labelPosition: "right" | "hidden";
     /**
-     * Specify whether the radio is be checked
+     * Whether the radio button is checked.
      */
     checked: boolean;
     /**
-     * The form name.
+     * Whether the radio button is disabled.
      */
-    name: string;
+    disabled: boolean;
     /**
-     * The form value.
+     * Whether the radio button can be focused.
+     * Automatically set by `daikin-radio-group` component.
      */
-    value: string;
+    skipTab: boolean;
+    static readonly formAssociated = true;
+    private _radio;
     /**
-     * Specify whether the Radio is in a error state
+     * Focuses on the inner radio.
+     * @param options focus options
      */
-    error: boolean;
+    focus(options?: FocusOptions): void;
+    private _internals;
+    private _updateFormValue;
+    private _handleClick;
+    private _handleChange;
     render(): import('lit-html').TemplateResult<1>;
+    updated(changedProperties: Map<string, unknown>): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
         "daikin-radio": DaikinRadio;
     }
 }
-export {};

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

@@ -0,0 +1,144 @@
+"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 ifDefined_js = require("lit/directives/if-defined.js");
+const tailwind = require("../../tailwind.css.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 radioGroupCN = classVarianceAuthority.cva(["flex", "gap-2", "py-2", "pr-2"], {
+  variants: {
+    orientation: {
+      horizontal: ["flex-col"],
+      vertical: ["flex-row", "gap-3"]
+    }
+  }
+});
+exports.DaikinRadioGroup = class DaikinRadioGroup extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.orientation = "horizontal";
+    this.name = "";
+    this.value = "";
+    this.required = false;
+    this._label = null;
+    this._handleRadioChange = (event) => {
+      this.value = event.target.value;
+    };
+  }
+  _updateRadios() {
+    const radios = this._radios;
+    const selectedRadio = radios.find((radio) => radio.value === this.value);
+    const firstEnabledRadio = radios.find((radio) => !radio.disabled);
+    for (const daikinRadio of this._radios) {
+      if (this.name) {
+        daikinRadio.name = this.name;
+      }
+      const isSelected = daikinRadio === selectedRadio;
+      daikinRadio.checked = isSelected;
+      daikinRadio.skipTab = selectedRadio ? !isSelected : daikinRadio !== firstEnabledRadio;
+    }
+  }
+  _handleSlotChange() {
+    this._updateRadios();
+  }
+  /**
+   * Handles keyboard interactions in the radio list.
+   * https://www.w3.org/WAI/ARIA/apg/patterns/radio/
+   */
+  _handleKeyDown(event) {
+    const moveOffset = {
+      ArrowRight: 1,
+      ArrowDown: 1,
+      ArrowLeft: -1,
+      ArrowUp: -1
+    }[event.key];
+    if (!moveOffset) {
+      return;
+    }
+    event.preventDefault();
+    const enabledRadios = this._radios.filter(({ disabled }) => !disabled);
+    if (!enabledRadios.length) {
+      return;
+    }
+    const activeElement = document.activeElement;
+    const focusedRadioIndex = activeElement ? enabledRadios.findIndex((radio) => radio.contains(activeElement)) : -1;
+    if (focusedRadioIndex < 0) {
+      const activeRadio = enabledRadios.find((radio) => radio.checked) ?? enabledRadios[0];
+      this.value = activeRadio.value;
+      activeRadio.focus();
+      return;
+    }
+    const newIndex = (focusedRadioIndex + moveOffset + enabledRadios.length) % enabledRadios.length;
+    if (newIndex !== focusedRadioIndex) {
+      const newRadio = enabledRadios[newIndex];
+      this.value = newRadio.value;
+      newRadio.focus();
+      this.dispatchEvent(new Event("change"));
+    }
+  }
+  render() {
+    const radioGroupClassName = radioGroupCN({ orientation: this.orientation });
+    return lit.html`<fieldset
+      role="radiogroup"
+      aria-label=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined_js.ifDefined(this._label)}
+      aria-required=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined_js.ifDefined(this.required)}
+      @keydown=${this._handleKeyDown}
+    >
+      <slot
+        class=${radioGroupClassName}
+        @slotchange=${this._handleSlotChange}
+        @change=${this._handleRadioChange}
+      >
+      </slot>
+    </fieldset>`;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("value") || changedProperties.has("name")) {
+      this._updateRadios();
+    }
+  }
+  reflectInputGroup(inputGroup) {
+    this._label = inputGroup.label;
+    this.required = !!inputGroup.required;
+  }
+};
+exports.DaikinRadioGroup.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-block;
+    }
+  `;
+__decorateClass([
+  decorators_js.queryAssignedElements({ selector: "daikin-radio" })
+], exports.DaikinRadioGroup.prototype, "_radios", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinRadioGroup.prototype, "orientation", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinRadioGroup.prototype, "name", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinRadioGroup.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinRadioGroup.prototype, "required", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinRadioGroup.prototype, "_label", 2);
+exports.DaikinRadioGroup = __decorateClass([
+  decorators_js.customElement("daikin-radio-group")
+], exports.DaikinRadioGroup);