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

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

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { query, property, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, LitElement, html, nothing } from "lit";
+import { property, customElement } from "lit/decorators.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -12,125 +12,117 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaCheckbox = cva(
-  [
-    "appearance-none",
-    "inline-block",
-    "relative",
-    "rounded-sm",
-    "border-solid",
-    "border-2",
-    "after:absolute",
-    "after:text-white",
-    "checked:after:i-daikin-checkbox-checked",
-    "indeterminate:after:i-daikin-checkbox-indeterminate",
-    "focus-visible:outline-none",
-    "border-daikinNeutral-400",
-    "enabled:indeterminate:border-daikinBlue-600",
-    "enabled:indeterminate:bg-daikinBlue-600",
-    "enabled:checked:border-daikinBlue-600",
-    "enabled:checked:bg-daikinBlue-600",
-    "aria-controllable:focus-visible:border-daikinBlue-700",
-    "aria-controllable:hover:border-daikinBlue-300",
-    "aria-controllable:active:border-daikinBlue-600",
-    "aria-controllable:checked:focus-visible:border-daikinBlue-700",
-    "aria-controllable:checked:focus-visible:border-daikinBlue-700",
-    "aria-controllable:checked:focus-visible:bg-daikinBlue-700",
-    "aria-controllable:checked:focus-visible:bg-daikinBlue-700",
-    "aria-controllable:checked:hover:border-daikinBlue-300",
-    "aria-controllable:checked:hover:bg-daikinBlue-300",
-    "aria-controllable:checked:active:border-daikinBlue-600",
-    "aria-controllable:checked:active:bg-daikinBlue-600",
-    "aria-controllable:indeterminate:active:border-daikinBlue-600",
-    "aria-controllable:indeterminate:active:bg-daikinBlue-600",
-    "aria-controllable:indeterminate:hover:border-daikinBlue-300",
-    "aria-controllable:indeterminate:hover:bg-daikinBlue-300",
-    "aria-controllable:indeterminate:focus-visible:border-daikinBlue-700",
-    "aria-controllable:indeterminate:focus-visible:bg-daikinBlue-700",
-    "disabled:border-daikinNeutral-200",
-    "disabled:bg-white",
-    "disabled:indeterminate:bg-daikinNeutral-200",
-    "disabled:checked:bg-daikinNeutral-200"
-  ],
-  {
-    variants: {
-      size: {
-        small: ["w-[18px]", "h-[18px]"],
-        large: ["w-5", "h-5"]
-      }
+const CHECKBOX_CLASS_NAME = cva([
+  "block",
+  "size-4",
+  "relative",
+  "bg-white",
+  "border-daikinNeutral-600",
+  "border-2",
+  "rounded-sm",
+  "appearance-none",
+  "before:text-white",
+  "before:absolute",
+  "before:m-auto",
+  "before:inset-0",
+  "checked:before:i-daikin-checkbox-checked",
+  "indeterminate:before:i-daikin-checkbox-indeterminate",
+  "indeterminate:before:size-2.5",
+  "focus-visible:outline",
+  "focus-visible:outline-1",
+  "focus-visible:outline-offset-1",
+  "focus-visible:outline-daikinBlue-700",
+  "enabled:group-hover:border-daikinNeutral-400",
+  "enabled:group-active:border-daikinNeutral-700",
+  "enabled:checked:border-daikinBlue-500",
+  "enabled:checked:bg-daikinBlue-500",
+  "enabled:checked:group-hover:bg-daikinBlue-300",
+  "enabled:checked:group-hover:border-daikinBlue-300",
+  "enabled:checked:group-hover:before:text-white",
+  "enabled:checked:group-active:bg-daikinBlue-600",
+  "enabled:checked:group-active:border-daikinBlue-600",
+  "enabled:checked:group-active:before:text-white",
+  "enabled:indeterminate:bg-daikinBlue-500",
+  "enabled:indeterminate:border-daikinBlue-500",
+  "enabled:indeterminate:group-hover:bg-daikinBlue-300",
+  "enabled:indeterminate:group-hover:border-daikinBlue-300",
+  "enabled:indeterminate:group-hover:before:text-white",
+  "enabled:indeterminate:group-active:bg-daikinBlue-600",
+  "enabled:indeterminate:group-active:border-daikinBlue-600",
+  "enabled:indeterminate:group-active:before:text-white",
+  "disabled:border-daikinNeutral-200",
+  "disabled:bg-white",
+  "disabled:checked:bg-daikinNeutral-200",
+  "disabled:indeterminate:bg-daikinNeutral-200"
+])();
+const cvaLabel = cva([], {
+  variants: {
+    disabled: {
+      false: [],
+      true: ["text-daikinNeutral-200"]
     }
   }
-);
-const cvaLabel = cva(
-  ["leading-8", "not-italic", "font-normal", "align-middle"],
-  {
-    variants: {
-      size: {
-        small: ["text-sm"],
-        large: ["text-base"]
-      }
-    },
-    defaultVariants: {
-      size: "small"
-    }
-  }
-);
+});
 let DaikinCheckbox = 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.checkState = "unchecked";
-    this.name = "";
-    this.value = "";
-    this.error = false;
+    this.disabled = false;
+    this._internals = this.attachInternals();
   }
-  _handleClick(event) {
-    if (this.readonly || this.disabled) {
-      event.preventDefault();
-    }
+  get checked() {
+    return this.checkState === "checked";
+  }
+  /**
+   * A property-only accessor for `checkState` provided for convenience.
+   * _Getter_: Returns `true` when `checkState` is `"checked"`, and `false` otherwise.
+   * _Setter_: If `true` is set, it updates `checkState` to `"checked"`, and if `false` is set, it updates `checkState` to `"unchecked"`.
+   */
+  set checked(value) {
+    this.checkState = value ? "checked" : "unchecked";
   }
   _updateFormValue() {
     this._internals.setFormValue(this.checked ? this.value : null);
   }
-  get checked() {
-    return this.checkState === "checked";
+  _handleClick(event) {
+    if (this.disabled) {
+      event.preventDefault();
+    }
   }
   _handleChange(event) {
-    if (!this._input) {
-      return;
-    }
-    this.checkState = this._input.checked ? "checked" : "unchecked";
+    this.checkState = event.target.checked ? "checked" : "unchecked";
     this._updateFormValue();
     this.dispatchEvent(new Event("change", event));
   }
   render() {
-    const checkboxClassName = cvaCheckbox({ size: this.size });
-    const labelClassName = cvaLabel({ size: this.size });
-    const isIndeterminate = this.checkState === "indeterminate";
-    const labelText = this.label ? html`<span class=${labelClassName}>${this.label}</span>` : html``;
-    const inputTag = html`<input
-      class=${checkboxClassName}
-      type="checkbox"
-      name=${this.name}
-      value=${this.value}
-      aria-readonly=${this.readonly}
-      .indeterminate=${isIndeterminate}
-      .checked=${this.checked}
-      ?readonly=${this.readonly}
-      ?disabled=${this.disabled}
-      @change=${this._handleChange}
-      @click=${this._handleClick}
-    />`;
-    const content = this.labelPosition === "left" ? html`${labelText}${inputTag}` : html`${inputTag}${labelText}`;
-    return html`<label
-      class="inline-flex gap-[10px] items-center font-daikinSerif"
-      >${content}</label
-    >`;
+    return html`<label class="group flex gap-2 items-center font-daikinSerif">
+      <div class="p-2">
+        <input
+          class=${CHECKBOX_CLASS_NAME}
+          type="checkbox"
+          name=${this.name}
+          value=${this.value}
+          aria-label=${this.labelPosition === "hidden" ? this.label : nothing}
+          .indeterminate=${this.checkState === "indeterminate"}
+          .checked=${this.checked}
+          ?disabled=${this.disabled}
+          @change=${this._handleChange}
+          @click=${this._handleClick}
+        />
+      </div>
+      <span
+        class=${cvaLabel({
+      disabled: this.disabled
+    })}
+        ?hidden=${this.labelPosition === "hidden"}
+      >
+        ${this.label}
+      </span>
+    </label>`;
   }
   updated(changedProperties) {
     if (changedProperties.has("checkState")) {
@@ -142,40 +134,28 @@ DaikinCheckbox.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
     :host {
-      display: inline-block;
+      display: inline-flex;
     }
   `;
 DaikinCheckbox.formAssociated = true;
 __decorateClass([
-  query("input")
-], DaikinCheckbox.prototype, "_input", 2);
+  property({ type: String, reflect: true })
+], DaikinCheckbox.prototype, "name", 2);
 __decorateClass([
-  property({ type: String })
-], DaikinCheckbox.prototype, "label", 2);
+  property({ type: String, reflect: true })
+], DaikinCheckbox.prototype, "value", 2);
 __decorateClass([
   property({ type: String })
-], DaikinCheckbox.prototype, "size", 2);
+], DaikinCheckbox.prototype, "label", 2);
 __decorateClass([
   property({ type: String, attribute: "label-position" })
 ], DaikinCheckbox.prototype, "labelPosition", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinCheckbox.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinCheckbox.prototype, "readonly", 2);
 __decorateClass([
   property({ type: String, reflect: true, attribute: "check-state" })
 ], DaikinCheckbox.prototype, "checkState", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinCheckbox.prototype, "name", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinCheckbox.prototype, "value", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], DaikinCheckbox.prototype, "error", 2);
+], DaikinCheckbox.prototype, "disabled", 2);
 DaikinCheckbox = __decorateClass([
   customElement("daikin-checkbox")
 ], DaikinCheckbox);

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

@@ -20,6 +20,10 @@ export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/icon/index.js";
+ * ```
+ *
  * ```html
  * <daikin-icon icon="information" color="black" size="m"></daikin-icon>
  * ```

package/dist/es/components/icon/icons.json.d.ts

@@ -23,6 +23,26 @@ declare const _default: {
     "warning": {
       "class": "i-daikin-notification-status-warning",
       "color": null
+    },
+    "error": {
+      "class": "i-daikin-status-error",
+      "color": "#ff4949"
+    },
+    "chevron-up": {
+      "class": "i-daikin-chevron-up",
+      "color": null
+    },
+    "chevron-down": {
+      "class": "i-daikin-chevron-down",
+      "color": null
+    },
+    "chevron-left": {
+      "class": "i-daikin-chevron-left",
+      "color": null
+    },
+    "chevron-right": {
+      "class": "i-daikin-chevron-right",
+      "color": null
     }
   }
 }

package/dist/es/components/icon/icons.json.js

@@ -22,6 +22,26 @@ const icons = {
   warning: {
     "class": "i-daikin-notification-status-warning",
     color: null
+  },
+  error: {
+    "class": "i-daikin-status-error",
+    color: "#ff4949"
+  },
+  "chevron-up": {
+    "class": "i-daikin-chevron-up",
+    color: null
+  },
+  "chevron-down": {
+    "class": "i-daikin-chevron-down",
+    color: null
+  },
+  "chevron-left": {
+    "class": "i-daikin-chevron-left",
+    color: null
+  },
+  "chevron-right": {
+    "class": "i-daikin-chevron-right",
+    color: null
   }
 };
 export {

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

@@ -6,12 +6,14 @@ export * from './button';
 export * from './checkbox';
 export * from './icon';
 export * from './input-group';
+export * from './list';
+export * from './list-item';
 export * from './notification';
-export * from './panel-switcher';
 export * from './progress-bar';
 export * from './radio';
 export * from './tab';
-export * from './tab-group';
+export * from './tab-panels';
+export * from './tabs';
 export * from './text-input';
 export * from './textarea';
 export * from './toggle';

package/dist/es/components/index.js

@@ -6,12 +6,14 @@ import { DaikinButton } from "./button/daikin-button.js";
 import { DaikinCheckbox } from "./checkbox/daikin-checkbox.js";
 import { DaikinIcon, iconList } from "./icon/daikin-icon.js";
 import { DaikinInputGroup } from "./input-group/daikin-input-group.js";
+import { DaikinList } from "./list/daikin-list.js";
+import { DaikinListItem } from "./list-item/daikin-list-item.js";
 import { DaikinNotification } from "./notification/daikin-notification.js";
-import { DaikinPanelSwitcher } from "./panel-switcher/daikin-panel-switcher.js";
 import { DaikinProgressBar } from "./progress-bar/daikin-progress-bar.js";
 import { DaikinRadio } from "./radio/daikin-radio.js";
 import { DaikinTab } from "./tab/daikin-tab.js";
-import { DaikinTabGroup } from "./tab-group/daikin-tab-group.js";
+import { DaikinTabPanels } from "./tab-panels/daikin-tab-panels.js";
+import { DaikinTabs } from "./tabs/daikin-tabs.js";
 import { DaikinTextInput } from "./text-input/daikin-text-input.js";
 import { DaikinTextarea } from "./textarea/daikin-textarea.js";
 import { DaikinToggle } from "./toggle/daikin-toggle.js";
@@ -25,12 +27,14 @@ export {
   DaikinCheckbox,
   DaikinIcon,
   DaikinInputGroup,
+  DaikinList,
+  DaikinListItem,
   DaikinNotification,
-  DaikinPanelSwitcher,
   DaikinProgressBar,
   DaikinRadio,
   DaikinTab,
-  DaikinTabGroup,
+  DaikinTabPanels,
+  DaikinTabs,
   DaikinTextInput,
   DaikinTextarea,
   DaikinToggle,

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

@@ -15,6 +15,12 @@ type ControlElement = DaikinTextInput | DaikinTextarea;
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/input-group/index.js";
+ * import "@daikin-oss/design-system-web-components/components/text-input/index.js";
+ * import "@daikin-oss/design-system-web-components/components/textarea/index.js";
+ * ```
+ *
  * With Text Input:
  *
  * ```html

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

@@ -68,7 +68,7 @@ let DaikinInputGroup = class extends LitElement {
         <slot @slotchange=${this._handleSlotChange}></slot>
         ${this.helper && !this.error ? html`<span class=${inputGroupHelperClassName}>${this.helper}</span>` : null}
         ${!this.disabled && !!this.error ? html`<span
-              class="flex gap-2 text-[--input-group-border-color-error] leading-[22px] before:i-daikin-status-negative before:block before:w-[16px] before:h-[22px]"
+              class="flex gap-2 text-[--input-group-border-color-error] leading-[22px] before:i-daikin-status-error before:block before:w-[16px] before:h-[22px]"
               >${this.error}</span
             >` : null}
       </label>

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

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+/**
+ * The list component is used to list items using the list item component.
+ *
+ * Hierarchy:
+ * - `daikin-list` > `daikin-list-item`
+ *
+ * @slot - A slot for the list items. Place `daikin-list-item` elements here.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-list>
+ *   <daikin-list-item>List item label 1</daikin-list-item>
+ *   <daikin-list-item>List item label 2</daikin-list-item>
+ *   <daikin-list-item>List item label 3</daikin-list-item>
+ * </daikin-list>
+ * ```
+ */
+export declare class DaikinList extends LitElement {
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-list": DaikinList;
+    }
+}
+export default DaikinList;

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

@@ -0,0 +1,25 @@
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.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 DaikinList = class extends LitElement {
+  render() {
+    return html`<div role="list">
+      <slot></slot>
+    </div>`;
+  }
+};
+DaikinList = __decorateClass([
+  customElement("daikin-list")
+], DaikinList);
+export {
+  DaikinList
+};

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

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

package/dist/es/components/list/index.js

@@ -0,0 +1,4 @@
+import { DaikinList } from "./daikin-list.js";
+export {
+  DaikinList
+};

package/dist/es/components/list-item/daikin-list-item.d.ts

@@ -0,0 +1,64 @@
+import { LitElement } from 'lit';
+/**
+ * The list item component is used to represent a single item in a list. Please use it within the `daikin-list` component.
+ *
+ * The following types are available:
+ *
+ * - `button`: Uses `<button>` tag.
+ * - `link`: Uses `<a>` tag.
+ * - `text`: Uses `<span>` tag.
+ *
+ * Hierarchy:
+ * - `daikin-list` > `daikin-list-item`
+ *
+ * @fires click - A retargeted event of a [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event). Suppressed if `disabled` is true.
+ *
+ * @slot - A slot for the list item label content.
+ * @slot action - An optional slot for an interaction item to be placed to the right of the text. Place `daikin-checkbox`, `daikin-toggle`, or something similar.
+ * @slot left-icon - An optional slot for an icon to be placed to the left of the text. Place `daikin-icon` or something similar.
+ * @slot right-icon - An optional slot for an icon to be placed to the left of the text. Ignored if `action` slot is used. Place `daikin-icon` or something similar.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-list-item>List item label</daikin-list-item>
+ * ```
+ */
+export declare class DaikinListItem extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Type of the list item.
+     * - `button` (default): The list item will be rendered as a `<button>` element.
+     * - `link`: The list item will be rendered as an `<a>` element.
+     * - `text`: The list item will be rendered as a `<span>` element. Use this if the list itself has no action.
+     */
+    type: "button" | "link" | "text";
+    /**
+     * Link `href`.
+     * Only used if the `type` is `"link"`.
+     * If omitted with `type="link"`, the link will be treated as [a placeholder link](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element:~:text=If%20the%20a%20element%20has%20no%20href%20attribute) and rendered as disabled state.
+     */
+    href: string | null;
+    /**
+     * Whether the list item is disabled.
+     * Ignored if the `type` is `"text"`.
+     */
+    disabled: boolean;
+    private _focusableElement;
+    private get _disabled();
+    private _handleClickAction;
+    constructor();
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner button or link.
+     * It will have no effect if the `type` is "text" or `disabled` is `true`.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-list-item": DaikinListItem;
+    }
+}
+export default DaikinListItem;