@daikin-oss/design-system-web-components 0.4.0 → 0.6.0

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

@@ -0,0 +1,76 @@
+import { colorFeedbackNegative } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { property, queryAssignedElements, customElement } from "lit/decorators.js";
+import tailwindStyles from "../../tailwind.css.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;
+};
+let DaikinProgressIndicator = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.currentItem = null;
+  }
+  _setCurrentItem() {
+    const items = this._items;
+    if (!items || this.currentItem === null) {
+      return;
+    }
+    if (items.length - 1 < this.currentItem) {
+      return;
+    }
+    if (this.currentItem < 0) {
+      return;
+    }
+    items.forEach((item, i) => item.current = this.currentItem === i);
+  }
+  _handleSlotChange() {
+    this._setCurrentItem();
+  }
+  render() {
+    return html`<div
+      class="flex justify-stretch items-start w-full font-daikinSerif"
+      role="list"
+    >
+      <slot @slotchange=${this._handleSlotChange}></slot>
+    </div>`;
+  }
+  firstUpdated() {
+    this._setCurrentItem();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("currentItem")) {
+      this._setCurrentItem();
+    }
+  }
+};
+DaikinProgressIndicator.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      --progress-indicator-border-color-error: ${unsafeCSS(
+  colorFeedbackNegative
+)};
+
+      display: block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  property({ type: Number, attribute: "current-item", reflect: true })
+], DaikinProgressIndicator.prototype, "currentItem", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "daikin-progress-indicator-item" })
+], DaikinProgressIndicator.prototype, "_items", 2);
+DaikinProgressIndicator = __decorateClass([
+  customElement("daikin-progress-indicator")
+], DaikinProgressIndicator);
+export {
+  DaikinProgressIndicator
+};

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

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

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

@@ -0,0 +1,4 @@
+import { DaikinProgressIndicator } from "./daikin-progress-indicator.js";
+export {
+  DaikinProgressIndicator
+};

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

@@ -0,0 +1,41 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from "../../type-utils.js";
+declare const cvaContainer: (props?: ({
+    status?: "inprogress" | "unfinished" | "finished" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type ProgressIndicatorItemVariantProps = MergeVariantProps<typeof cvaContainer>;
+/**
+ * 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/es/components/progress-indicator-item/daikin-progress-indicator-item.js

@@ -0,0 +1,85 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, LitElement, html, nothing } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import tailwindStyles from "../../tailwind.css.js";
+import "../icon/daikin-icon.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 cvaContainer = cva(
+  [
+    "flex",
+    "flex-col",
+    "gap-1",
+    "w-full",
+    "text-system-element-text-primary",
+    "pt-1",
+    "border-t-[0.25rem]",
+    "font-daikinSerif"
+  ],
+  {
+    variants: {
+      status: {
+        unfinished: ["border-system-state-disabled"],
+        inprogress: ["border-system-state-primary-active"],
+        finished: ["border-system-state-primary-active"]
+      }
+    }
+  }
+);
+let DaikinProgressIndicatorItem = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.status = "unfinished";
+    this.current = false;
+  }
+  render() {
+    return html`<div
+      class=${cvaContainer({
+      status: this.status
+    })}
+      role="listitem"
+      aria-current=${ifDefined(this.current ? "step" : void 0)}
+    >
+      <div class="flex items-center gap-2 font-bold leading-5">
+        <slot></slot>
+        ${this.status === "finished" ? html`
+              <span
+                class="size-4 i-daikin-status-success text-system-state-primary-active"
+                aria-label="Completed"
+              ></span>
+            ` : nothing}
+      </div>
+      <slot name="description" class="text-sm leading-[1.1rem]"></slot>
+    </div>`;
+  }
+};
+DaikinProgressIndicatorItem.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      width: 100%;
+      min-width: 9rem;
+    }
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinProgressIndicatorItem.prototype, "status", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinProgressIndicatorItem.prototype, "current", 2);
+DaikinProgressIndicatorItem = __decorateClass([
+  customElement("daikin-progress-indicator-item")
+], DaikinProgressIndicatorItem);
+export {
+  DaikinProgressIndicatorItem
+};

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

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

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

@@ -0,0 +1,4 @@
+import { DaikinProgressIndicatorItem } from "./daikin-progress-indicator-item.js";
+export {
+  DaikinProgressIndicatorItem
+};

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

@@ -4,6 +4,9 @@ import { LitElement } from 'lit';
  * 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
@@ -19,11 +22,11 @@ import { LitElement } from 'lit';
 export declare class DaikinRadio extends LitElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Form name of the radio button.
+     * The form name, submitted as a name/value pair when submitting the form.
      */
     name: string;
     /**
-     * Form value of the radio button.
+     * The form value, submitted as a name/value pair when submitting the form.
      */
     value: string;
     /**
@@ -37,14 +40,25 @@ export declare class DaikinRadio extends LitElement {
      */
     labelPosition: "right" | "hidden";
     /**
-     * Whether the radio button is checked.
+     * Specify the radio button checked state.
      */
     checked: boolean;
     /**
-     * Whether the radio button is disabled.
+     * Specify the radio button disabled state.
      */
     disabled: boolean;
+    /**
+     * Whether the radio button can be focused.
+     * Automatically set by `daikin-radio-group` component.
+     */
+    skipTab: boolean;
     static readonly formAssociated = true;
+    private _radio;
+    /**
+     * Focuses on the inner radio.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
     private _internals;
     private _updateFormValue;
     private _handleClick;

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

@@ -1,6 +1,7 @@
 import { cva } from "class-variance-authority";
 import { css, unsafeCSS, LitElement, html, nothing } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { property, query, customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -17,29 +18,28 @@ const RADIO_CLASS_NAME = cva([
   "justify-center",
   "items-center",
   "size-4",
-  "bg-white",
   "rounded-full",
   "relative",
   "appearance-none",
   "focus-visible:outline",
-  "focus-visible:outline-1",
-  "focus-visible:outline-offset-1",
-  "focus-visible:outline-daikinBlue-700",
+  "focus-visible:outline-2",
+  "focus-visible:outline-offset-2",
+  "focus-visible:outline-system-state-focus",
   "unchecked:border-2",
-  "enabled:unchecked:border-daikinNeutral-600",
-  "enabled:unchecked:hover:border-daikinNeutral-400",
-  "enabled:unchecked:active:border-daikinNeutral-700",
+  "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-daikinBlue-500",
-  "enabled:checked:group-hover:border-daikinBlue-300",
-  "enabled:checked:group-active:border-daikinBlue-600",
-  "disabled:border-daikinNeutral-200"
+  "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 = cva([], {
+const cvaLabel = cva(["pr-2"], {
   variants: {
     disabled: {
-      false: [],
-      true: ["text-daikinNeutral-200"]
+      false: ["text-system-element-text-primary"],
+      true: ["text-system-state-disabled"]
     }
   }
 });
@@ -52,8 +52,17 @@ let DaikinRadio = class extends LitElement {
     this.labelPosition = "right";
     this.checked = false;
     this.disabled = false;
+    this.skipTab = false;
     this._internals = this.attachInternals();
   }
+  /**
+   * 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);
   }
@@ -65,23 +74,29 @@ let DaikinRadio = class extends LitElement {
   _handleChange(event) {
     this.checked = event.target.checked;
     this._updateFormValue();
-    this.dispatchEvent(new Event("change", event));
+    this.dispatchEvent(
+      new Event("change", {
+        bubbles: true,
+        composed: true
+      })
+    );
   }
   render() {
     return html`<label class="group flex gap-2 items-center font-daikinSerif">
-      <div class="p-2">
+      <span class="p-2">
         <input
           class=${RADIO_CLASS_NAME}
           type="radio"
           name=${this.name}
-          value=${this.value}
+          .value=${this.value}
           aria-label=${this.labelPosition === "hidden" ? this.label : nothing}
           ?disabled=${this.disabled}
           .checked=${this.checked}
           @click=${this._handleClick}
           @change=${this._handleChange}
+          tabindex=${ifDefined(this.skipTab ? "-1" : void 0)}
         />
-      </div>
+      </span>
       <span
         class=${cvaLabel({
       disabled: this.disabled
@@ -124,6 +139,12 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinRadio.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], DaikinRadio.prototype, "skipTab", 2);
+__decorateClass([
+  query("input")
+], DaikinRadio.prototype, "_radio", 2);
 DaikinRadio = __decorateClass([
   customElement("daikin-radio")
 ], DaikinRadio);

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

@@ -1 +1 @@
-export * from './daikin-radio';
+export * from "./daikin-radio.js";

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

@@ -0,0 +1,82 @@
+import { LitElement, PropertyValues } from 'lit';
+import { MergeVariantProps } from "../../type-utils.js";
+import { DaikinInputGroup } from "../input-group/index.js";
+declare const radioGroupCN: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type RadioGroupProps = MergeVariantProps<typeof radioGroupCN>;
+/**
+ * Radio groups are used to group multiple radio buttons so that make sure that only one will be selected in the group
+ *
+ * Hierarchies:
+ * - `daikin-radio-group` > `daikin-radio`
+ * - `daikin-input-group` > `daikin-radio-group` > `daikin-radio`
+ *
+ * @fires change - A custom event emitted when current checked radio changed.
+ *
+ * @slot - A slot for radio buttons. Place `daikin-radio` elements here.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-radio-group name="name">
+ *   <daikin-radio value="value1" label="Option1"></daikin-radio>
+ *   <daikin-radio value="value2" label="Option2"></daikin-radio>
+ *   <daikin-radio value="value3" label="Option3"></daikin-radio>
+ * </daikin-radio-group>
+ * ```
+ *
+ * ```html
+ * <daikin-input-group label="Label text" helper="Helper text">
+ *   <daikin-radio-group name="name">
+ *     <daikin-radio value="value1" label="Option1"></daikin-radio>
+ *     <daikin-radio value="value2" label="Option2"></daikin-radio>
+ *     <daikin-radio value="value3" label="Option3"></daikin-radio>
+ *   </daikin-radio-group>
+ * </daikin-input-group>
+ * ```
+ */
+export declare class DaikinRadioGroup extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    private readonly _radios;
+    /**
+     * Specify the radio group orientation
+     */
+    orientation: RadioGroupProps["orientation"];
+    /**
+     * The form name.
+     */
+    name: string;
+    /**
+     * `value` of the currently selected radio.
+     * see {@link DaikinRadio.value}
+     */
+    value: string;
+    /**
+     * Whether the radio group is required.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    required: boolean;
+    /**
+     * The label text used as the value of aria-label.
+     * Set automatically by `reflectInputGroup` method.
+     */
+    private _label;
+    private _updateRadios;
+    private readonly _handleRadioChange;
+    private _handleSlotChange;
+    /**
+     * Handles keyboard interactions in the radio list.
+     * https://www.w3.org/WAI/ARIA/apg/patterns/radio/
+     */
+    private _handleKeyDown;
+    render(): import('lit-html').TemplateResult<1>;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    reflectInputGroup(inputGroup: DaikinInputGroup): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-radio-group": DaikinRadioGroup;
+    }
+}
+export {};

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

@@ -0,0 +1,146 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { queryAssignedElements, property, state, customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import tailwindStyles from "../../tailwind.css.js";
+import "../radio/daikin-radio.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 radioGroupCN = cva(["flex", "gap-2", "py-2", "pr-2"], {
+  variants: {
+    orientation: {
+      horizontal: ["flex-col"],
+      vertical: ["flex-row", "gap-3"]
+    }
+  }
+});
+let DaikinRadioGroup = class extends 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 html`<fieldset
+      role="radiogroup"
+      aria-label=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined(this._label)}
+      aria-required=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    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;
+  }
+};
+DaikinRadioGroup.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: inline-block;
+    }
+  `;
+__decorateClass([
+  queryAssignedElements({ selector: "daikin-radio" })
+], DaikinRadioGroup.prototype, "_radios", 2);
+__decorateClass([
+  property({ type: String })
+], DaikinRadioGroup.prototype, "orientation", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinRadioGroup.prototype, "name", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinRadioGroup.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinRadioGroup.prototype, "required", 2);
+__decorateClass([
+  state()
+], DaikinRadioGroup.prototype, "_label", 2);
+DaikinRadioGroup = __decorateClass([
+  customElement("daikin-radio-group")
+], DaikinRadioGroup);
+export {
+  DaikinRadioGroup
+};

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

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

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

@@ -0,0 +1,4 @@
+import { DaikinRadioGroup } from "./daikin-radio-group.js";
+export {
+  DaikinRadioGroup
+};