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

package/dist/es-dev/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/es-dev/components/radio/daikin-radio.js

@@ -1,6 +1,7 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, LitElement, html, nothing } from "lit";
+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;
@@ -12,100 +13,104 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaRadio = 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 = 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 = cva(["pr-2"], {
+  variants: {
+    disabled: {
+      false: ["text-system-element-text-primary"],
+      true: ["text-system-state-disabled"]
     }
   }
-);
-const cvaLabel = cva(
-  ["leading-8", "not-italic", "font-normal", "align-middle"],
-  {
-    variants: {
-      size: {
-        small: ["text-sm"],
-        large: ["text-base"]
-      }
-    }
-  }
-);
+});
 let DaikinRadio = class extends 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 ? html`<span class="${labelClassName}">${this.label}</span>` : html``;
-    const inputTag = 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" ? html`${labelText}${inputTag}` : html`${inputTag}${labelText}`;
-    return html`<label
-      class="inline-flex w-full h-full gap-[8px] items-center font-daikinSerif"
-      >${inputArea}</label
-    >`;
+    return 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 : nothing}
+          ?disabled=${this.disabled}
+          .checked=${this.checked}
+          @click=${this._handleClick}
+          @change=${this._handleChange}
+          tabindex=${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();
+    }
   }
 };
 DaikinRadio.styles = css`
@@ -117,32 +122,29 @@ DaikinRadio.styles = css`
   `;
 DaikinRadio.formAssociated = true;
 __decorateClass([
-  property({ type: String })
-], DaikinRadio.prototype, "label", 2);
+  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, "size", 2);
+], DaikinRadio.prototype, "label", 2);
 __decorateClass([
   property({ type: String, attribute: "label-position" })
 ], DaikinRadio.prototype, "labelPosition", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinRadio.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinRadio.prototype, "readonly", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinRadio.prototype, "checked", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
-], DaikinRadio.prototype, "name", 2);
+  property({ type: Boolean, reflect: true })
+], DaikinRadio.prototype, "disabled", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
-], DaikinRadio.prototype, "value", 2);
+  property({ type: Boolean, attribute: false })
+], DaikinRadio.prototype, "skipTab", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinRadio.prototype, "error", 2);
+  query("input")
+], DaikinRadio.prototype, "_radio", 2);
 DaikinRadio = __decorateClass([
   customElement("daikin-radio")
 ], DaikinRadio);

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

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

@@ -0,0 +1,145 @@
+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";
+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-dev/components/radio-group/index.d.ts

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

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

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

package/dist/es-dev/components/select/daikin-select.d.ts

@@ -0,0 +1,60 @@
+import { LitElement, PropertyValues } from 'lit';
+import { DaikinInputGroup } from '../input-group';
+/**
+ * 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;
+    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;
+    }
+}