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

package/dist/cjs-dev/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;
@@ -19,29 +20,28 @@ const RADIO_CLASS_NAME = classVarianceAuthority.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 = classVarianceAuthority.cva([], {
+const cvaLabel = classVarianceAuthority.cva(["pr-2"], {
   variants: {
     disabled: {
-      false: [],
-      true: ["text-daikinNeutral-200"]
+      false: ["text-system-element-text-primary"],
+      true: ["text-system-state-disabled"]
     }
   }
 });
@@ -54,8 +54,17 @@ exports.DaikinRadio = class DaikinRadio extends lit.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);
   }
@@ -67,23 +76,29 @@ exports.DaikinRadio = class DaikinRadio extends lit.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 lit.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 : lit.nothing}
           ?disabled=${this.disabled}
           .checked=${this.checked}
           @click=${this._handleClick}
           @change=${this._handleChange}
+          tabindex=${ifDefined_js.ifDefined(this.skipTab ? "-1" : void 0)}
         />
-      </div>
+      </span>
       <span
         class=${cvaLabel({
       disabled: this.disabled
@@ -126,6 +141,12 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinRadio.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, attribute: false })
+], exports.DaikinRadio.prototype, "skipTab", 2);
+__decorateClass([
+  decorators_js.query("input")
+], exports.DaikinRadio.prototype, "_radio", 2);
 exports.DaikinRadio = __decorateClass([
   decorators_js.customElement("daikin-radio")
 ], exports.DaikinRadio);

package/dist/cjs-dev/components/radio/{daikin-radio.d.ts → daikin-radio.d.cts}

@@ -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/cjs-dev/components/radio/index.d.cts

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

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

@@ -0,0 +1,145 @@
+"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("../radio/daikin-radio.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);

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

@@ -0,0 +1,82 @@
+import { LitElement, PropertyValues } from 'lit';
+import { MergeVariantProps } from "../../type-utils.cjs";
+import { DaikinInputGroup } from "../input-group/index.cjs";
+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/cjs-dev/components/radio-group/index.cjs

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

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

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

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

@@ -0,0 +1,168 @@
+"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 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 cvaSelect = classVarianceAuthority.cva(
+  [
+    "block",
+    "w-full",
+    "h-full",
+    "relative",
+    "after:i-daikin-dropdown-chevron-down",
+    "after:w-6",
+    "after:h-6",
+    "after:m-auto",
+    "after:absolute",
+    "after:top-0",
+    "after:bottom-0",
+    "after:right-[calc(0.75rem+1px)]",
+    "after:pointer-events-none",
+    "slotted-[select]:!appearance-none",
+    "slotted-[select]:!flex",
+    "slotted-[select]:!items-center",
+    "slotted-[select]:!gap-2",
+    "slotted-[select]:!w-full",
+    "slotted-[select]:!h-full",
+    "slotted-[select]:!min-h-12",
+    "slotted-[select]:!pl-4",
+    "slotted-[select]:!pr-12",
+    "slotted-[select]:!text-base",
+    "slotted-[select]:!font-daikinSerif",
+    "slotted-[select]:!border",
+    "slotted-[select]:!border-[--color-base]",
+    "slotted-[select]:!rounded",
+    "slotted-[select]:!leading-5",
+    "slotted-[select]:!outline",
+    "slotted-[select]:!outline-0",
+    "slotted-[select]:!-outline-offset-2",
+    "slotted-[select:focus-visible]:!outline-2",
+    "slotted-[select:focus-visible]:!outline-[--color-focus]",
+    "slotted-[select:enabled]:!cursor-pointer",
+    "slotted-[select:enabled]:!text-system-element-text-primary",
+    "slotted-[select:enabled:hover]:!bg-system-background-surface-hover",
+    "slotted-[select:enabled:active]:!bg-system-background-surface-press",
+    "slotted-[select:disabled]:!text-system-state-disabled",
+    "slotted-[select:disabled]:!border-system-state-disabled"
+  ],
+  {
+    variants: {
+      disabled: {
+        false: ["after:text-system-element-text-primary"],
+        true: ["after:text-system-state-disabled"]
+      },
+      error: {
+        false: [
+          "var-color-system-state-neutral-active/color-base",
+          "var-color-system-state-focus/color-focus"
+        ],
+        true: [
+          "var-color-system-state-error-active/color-base",
+          "var-color-system-state-error-active/color-focus"
+        ]
+      }
+    }
+  }
+);
+exports.DaikinSelect = class DaikinSelect extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.error = false;
+    this.required = false;
+    this.disabled = false;
+    this._label = null;
+  }
+  get _select() {
+    return this._selects[0] ?? null;
+  }
+  _updateSelect() {
+    const select = this._select;
+    if (!select) {
+      return;
+    }
+    select.disabled = this.disabled;
+    select.required = this.required;
+    select.ariaLabel = this._label;
+  }
+  _handleSlotChange() {
+    this._updateSelect();
+  }
+  render() {
+    return lit.html`<slot
+      class=${cvaSelect({ disabled: this.disabled, error: this.error })}
+      @slotchange=${this._handleSlotChange}
+    ></slot>`;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("disabled") || changedProperties.has("required")) {
+      this._updateSelect();
+    }
+  }
+  reflectInputGroup(inputGroup) {
+    const isError = !inputGroup.disabled && !!inputGroup.error;
+    this.disabled = !!inputGroup.disabled;
+    this.required = !!inputGroup.required;
+    this.error = isError;
+    this._label = inputGroup.label;
+    this._updateSelect();
+  }
+  /**
+   * Focuses on the `<select>` element in the slot.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._select) == null ? void 0 : _a.focus(options);
+  }
+};
+exports.DaikinSelect.styles = lit.css`
+    ::slotted(select) {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      border: 0 solid;
+
+      font: inherit;
+      font-feature-settings: inherit;
+      font-variation-settings: inherit;
+      letter-spacing: inherit;
+      color: inherit;
+      background: transparent;
+    }
+
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinSelect.prototype, "error", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinSelect.prototype, "required", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinSelect.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.queryAssignedElements({ selector: "select" })
+], exports.DaikinSelect.prototype, "_selects", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinSelect.prototype, "_label", 2);
+exports.DaikinSelect = __decorateClass([
+  decorators_js.customElement("daikin-select")
+], exports.DaikinSelect);

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

@@ -0,0 +1,65 @@
+import { LitElement, PropertyValues } from 'lit';
+import { DaikinInputGroup } from "../input-group/index.cjs";
+/**
+ * A select component.
+ * This component accepts an HTML `<select>` element in the slot and applies styles to it.
+ * The `disabled` property of the component is also reflected in the `<select>` element in the slot.
+ *
+ * Hierarchy:
+ * - `daikin-input-group` > `daikin-select`
+ *
+ * @slot - A slot for an HTML `<select>` element which may contain `<option>` and `<optgroup>`.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-select>
+ *   <select name="select">
+ *     <option value="value1">Option 1</option>
+ *     <option value="value2">Option 2</option>
+ *     <optgroup label="Group">
+ *       <option value="value3">Option 3</option>
+ *       <option value="value4">Option 4</option>
+ *     </optgroup>
+ *   </select>
+ * </daikin-select>
+ * ```
+ */
+export declare class DaikinSelect extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Whether the select component is in an error state.
+     */
+    error: boolean;
+    /**
+     * Whether the select component is required.
+     */
+    required: 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;
+    /**
+     * The label text used as the value of aria-label.
+     * Set automatically by `reflectInputGroup` method.
+     */
+    private _label;
+    private get _select();
+    private _updateSelect;
+    private _handleSlotChange;
+    render(): import('lit-html').TemplateResult<1>;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    reflectInputGroup(inputGroup: DaikinInputGroup): void;
+    /**
+     * Focuses on the `<select>` element in the slot.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-select": DaikinSelect;
+    }
+}

package/dist/cjs-dev/components/select/index.cjs

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

package/dist/cjs-dev/components/select/index.d.cts

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