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

package/dist/es/components/accordion-item/daikin-accordion-item.js

@@ -0,0 +1,178 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.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 cvaDetails = cva(
+  ["flex", "w-full", "h-max", "bg-white", "font-daikinSerif", "overflow-clip"],
+  {
+    variants: {
+      status: {
+        enabled: [],
+        disabled: ["text-[#DCDCDC]"]
+      }
+    }
+  }
+);
+const cvaSummary = cva(
+  [
+    "flex",
+    "items-center",
+    "w-full",
+    "h-12",
+    "px-5",
+    "outline-none",
+    "relative",
+    "after:block",
+    "after:w-5",
+    "after:h-5",
+    "after:m-auto",
+    "after:top-0",
+    "after:right-4",
+    "after:bottom-0",
+    "after:absolute",
+    "after:i-daikin-accordion-chevron-up",
+    "after:transition-all"
+  ],
+  {
+    variants: {
+      visible: {
+        open: ["after:rotate-0"],
+        close: ["after:-rotate-180"]
+      },
+      status: {
+        enabled: [
+          "hover:bg-[#DCDCDC]",
+          "hover:bg-[#DCDCDC]",
+          "hover:cursor-pointer",
+          "focus-visible:outline",
+          "focus-visible:outline-[2px]",
+          "focus-visible:outline-[#0097E0]",
+          "focus-visible:outline-offset-[-2px]",
+          "after:text-[#828282]"
+        ],
+        disabled: ["text-[#DCDCDC]", "after:text-[#DCDCDC]"]
+      }
+    }
+  }
+);
+const animationOption = {
+  duration: 250,
+  easing: "ease-in-out"
+};
+const contentCloseKeyframe = {
+  height: 0
+};
+const getContentOpenKeyframe = (content) => ({
+  height: `${content.offsetHeight}px`
+});
+let DaikinAccordionItem = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._contentRef = createRef();
+    this.title = "";
+    this.open = false;
+    this.disabled = false;
+    this._detailsOpen = false;
+  }
+  _contentAnimate() {
+    const content = this._contentRef.value;
+    if (!content || this.open === this._detailsOpen) {
+      return;
+    }
+    if (this.open) {
+      this._detailsOpen = this.open;
+      content.animate(
+        [contentCloseKeyframe, getContentOpenKeyframe(content)],
+        animationOption
+      );
+    } else {
+      const animation = content.animate(
+        [getContentOpenKeyframe(content), contentCloseKeyframe],
+        animationOption
+      );
+      animation.onfinish = () => {
+        this._detailsOpen = this.open;
+      };
+    }
+  }
+  _handleSummaryClick(e) {
+    e.preventDefault();
+    if (this.disabled) {
+      return;
+    }
+    this.open = !this.open;
+  }
+  render() {
+    const accordionDetailsClassName = cvaDetails({
+      status: this.disabled ? "disabled" : "enabled"
+    });
+    const accordionSummaryClassName = cvaSummary({
+      status: this.disabled ? "disabled" : "enabled",
+      visible: this.open ? "open" : "close"
+    });
+    return html`<details
+      class=${accordionDetailsClassName}
+      ?open=${this._detailsOpen}
+      ?data-open=${this.open}
+      aria-disabled=${this.disabled}
+    >
+      <summary
+        class=${accordionSummaryClassName}
+        tabindex=${this.disabled ? -1 : 0}
+        @click=${this._handleSummaryClick}
+      >
+        ${this.title}
+      </summary>
+      <div ${ref(this._contentRef)}>
+        <div class="pt-2 pb-6 px-5 text-sm">
+          <slot></slot>
+        </div>
+      </div>
+    </details>`;
+  }
+  firstUpdated() {
+    this._detailsOpen = this.open;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("open")) {
+      this._contentAnimate();
+    }
+  }
+};
+DaikinAccordionItem.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], DaikinAccordionItem.prototype, "title", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinAccordionItem.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinAccordionItem.prototype, "disabled", 2);
+__decorateClass([
+  state()
+], DaikinAccordionItem.prototype, "_detailsOpen", 2);
+DaikinAccordionItem = __decorateClass([
+  customElement("daikin-accordion-item")
+], DaikinAccordionItem);
+export {
+  DaikinAccordionItem
+};

package/dist/es/components/accordion-item/index.d.ts

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

package/dist/es/components/accordion-item/index.js

@@ -0,0 +1,4 @@
+import { DaikinAccordionItem } from "./daikin-accordion-item.js";
+export {
+  DaikinAccordionItem
+};

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

@@ -0,0 +1,52 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * `daikin-breadcrumb` is a component for representing a breadcrumb list, and is used together with the `daikin-breadcrumb-item` component.
+ *
+ * Hierarchy:
+ * - `daikin-breadcrumb` > `daikin-breadcrumb-item`
+ *
+ * @slot - A slot for breadcrumb items. Place `breadcrumb-item` elements here.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-breadcrumb>
+ *  <daikin-breadcrumb-item href="#">
+ *   Breadcrumb Item 1
+ *  </daikin-breadcrumb-item>
+ *  <daikin-breadcrumb-item href="#">
+ *   Breadcrumb Item 2
+ *  </daikin-breadcrumb-item>
+ * </daikin-breadcrumb>
+ * ```
+ */
+export declare class DaikinBreadcrumb extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    private resizeObserver;
+    private _slottedDaikinBreadCrumbItems;
+    private _divWrapRef;
+    /**
+     * Whether the last breadcrumb item should have trailing slash.
+     */
+    trailingSlash: boolean;
+    /**
+     * Specifies overflow.
+     * If `ellipsis`, some breadcrumb items will be omitted when the total width exceeds the container width.
+     */
+    overflow: "visible" | "ellipsis";
+    private _expandedContentWidth;
+    private omitted;
+    get _isEllipsis(): boolean;
+    private _omit;
+    private _updateBreadcrumbs;
+    private _handleChange;
+    private _handleResizeObserver;
+    render(): import('lit-html').TemplateResult<1>;
+    updated(changedProperties: PropertyValues<this>): void;
+    firstUpdated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-breadcrumb": DaikinBreadcrumb;
+    }
+}

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

@@ -0,0 +1,125 @@
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { queryAssignedElements, property, customElement } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.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 DaikinBreadcrumb = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.resizeObserver = new ResizeObserver(() => {
+      this._omit();
+    });
+    this._divWrapRef = createRef();
+    this.trailingSlash = false;
+    this.overflow = "visible";
+    this._expandedContentWidth = 0;
+    this.omitted = false;
+  }
+  get _isEllipsis() {
+    return this.overflow === "ellipsis";
+  }
+  _omit() {
+    const shouldOmit = this._isEllipsis && this.offsetWidth < this._expandedContentWidth;
+    if (this.omitted === shouldOmit) {
+      return;
+    }
+    this.omitted = shouldOmit;
+    const daikinBreadCrumbItems = this._slottedDaikinBreadCrumbItems;
+    for (const [index, item] of daikinBreadCrumbItems.entries()) {
+      let mode = "normal";
+      if (shouldOmit) {
+        if (index === 0 || index >= daikinBreadCrumbItems.length - 2) {
+          continue;
+        } else if (index === 1) {
+          mode = "ellipsis";
+        } else {
+          mode = "hidden";
+        }
+      }
+      item.hidden = mode === "hidden";
+      item.variant = mode === "ellipsis" ? "ellipsis" : "normal";
+    }
+  }
+  _updateBreadcrumbs() {
+    const daikinBreadCrumbItems = this._slottedDaikinBreadCrumbItems;
+    for (const [index, item] of daikinBreadCrumbItems.entries()) {
+      if (index === daikinBreadCrumbItems.length - 1) {
+        item.trailingSlash = this.trailingSlash;
+        item.disabled = true;
+        continue;
+      }
+      item.trailingSlash = true;
+    }
+  }
+  _handleChange() {
+    this._updateBreadcrumbs();
+  }
+  _handleResizeObserver() {
+    if (this._isEllipsis) {
+      this.resizeObserver.observe(this);
+    } else {
+      this.resizeObserver.disconnect();
+    }
+  }
+  render() {
+    return html`
+      <div class="flex gap-2" ${ref(this._divWrapRef)}>
+        <slot @slotchange=${this._handleChange}></slot>
+      </div>
+    `;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("trailingSlash")) {
+      this._updateBreadcrumbs();
+    }
+    if (changedProperties.has("overflow")) {
+      this._omit();
+      this._handleResizeObserver();
+    }
+  }
+  firstUpdated() {
+    this._updateBreadcrumbs();
+    this._omit();
+    this._handleResizeObserver();
+    this.updateComplete.then(() => {
+      const divElement = this._divWrapRef.value;
+      if (!divElement) {
+        return;
+      }
+      this._expandedContentWidth = divElement.offsetWidth;
+    }).catch(() => {
+    });
+  }
+};
+DaikinBreadcrumb.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: flex;
+      align-items: center;
+    }
+  `;
+__decorateClass([
+  queryAssignedElements()
+], DaikinBreadcrumb.prototype, "_slottedDaikinBreadCrumbItems", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "trailing-slash" })
+], DaikinBreadcrumb.prototype, "trailingSlash", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinBreadcrumb.prototype, "overflow", 2);
+DaikinBreadcrumb = __decorateClass([
+  customElement("daikin-breadcrumb")
+], DaikinBreadcrumb);
+export {
+  DaikinBreadcrumb
+};

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

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

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

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

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

@@ -0,0 +1,62 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from '../../type-utils';
+declare const cvaLinkSlot: (props?: ({
+    variant?: "normal" | "ellipsis" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type LinkVariantProps = MergeVariantProps<typeof cvaLinkSlot>;
+/**
+ * The `daikin-breadcrumb-item` is a component used to represent each item of the breadcrumb list, and is used as a child element of the `daikin-breadcrumb` component.
+ *
+ * Hierarchy:
+ * - `daikin-breadcrumb` > `daikin-breadcrumb-item`
+ *
+ * @slot - A slot for the breadcrumb item content.
+ *
+ * @example
+ *
+ * ```html
+ * <!-- See `daikin-breadcrumb` component for complete example. -->
+ * <daikin-breadcrumb-item href="#">
+ *   Breadcrumb Item 1
+ * </daikin-breadcrumb-item>
+ * ```
+ */
+export declare class DaikinBreadcrumbItem extends LitElement {
+    static styles: import('lit').CSSResult;
+    /**
+     * Specify link href
+     */
+    href: string;
+    /**
+     * Specifies the display content.
+     * If `ellipsis`, the "..." will be displayed instead of the link.
+     * Set automatically by `daikin-breadcrumb`.
+     */
+    variant: LinkVariantProps["variant"];
+    /**
+     * Specify whether the link should be disabled
+     */
+    disabled: boolean;
+    /**
+     * Specify the link target
+     */
+    target: string | null;
+    /**
+     * Whether the slash after the link should shown.
+     * Set automatically by `daikin-breadcrumb`.
+     */
+    trailingSlash: boolean;
+    /**
+     * Whether the link should be hidden when ellipsis mode.
+     * Set automatically by `daikin-breadcrumb`.
+     */
+    hidden: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-breadcrumb-item": DaikinBreadcrumbItem;
+    }
+}
+export {};

package/dist/es/components/breadcrumb-item/daikin-breadcrumb-item.js

@@ -0,0 +1,117 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { property, 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 cvaLinkSlot = cva(
+  [
+    "slotted:h-8",
+    "slotted:font-normal",
+    "slotted:not-italic",
+    "slotted:leading-8",
+    "slotted:text-sm",
+    "slotted:text-daikinBlue-500",
+    "slotted:outline-none",
+    "slotted:font-daikinSerif"
+  ],
+  {
+    variants: {
+      variant: {
+        normal: [
+          "slotted:hover:text-daikinBlue-300",
+          "slotted:active:text-daikinNeutral-800",
+          "slotted-[*:focus-visible]:text-daikinBlue-700"
+        ],
+        ellipsis: ["slotted:hover:text-daikinBlue-300"]
+      },
+      disabled: {
+        true: [
+          "slotted:!text-daikinNeutral-800",
+          "slotted:pointer-events-none",
+          "slotted:cursor-default",
+          "slotted-[*:focus-visible]:!text-daikinNeutral-800"
+        ],
+        false: []
+      }
+    }
+  }
+);
+let DaikinBreadcrumbItem = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.href = "";
+    this.variant = "normal";
+    this.disabled = false;
+    this.target = null;
+    this.trailingSlash = false;
+    this.hidden = false;
+  }
+  render() {
+    const slash = this.trailingSlash ? html`<span class="text-daikinNeutral-800 font-daikinSerif">/</span>` : null;
+    return html`
+      ${this.variant === "normal" ? html`<slot name="link" class=${cvaLinkSlot(this)}>
+            <a
+              href=${ifDefined(this.href)}
+              target=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined(this.target)}
+            >
+              <slot></slot>
+            </a>
+          </slot>` : (
+      // Though `cvaLinkSlot` is designed for slots, it contains "& > *" selector for fallback content so it can be used here.
+      html`<span class=${cvaLinkSlot(this)} aria-label="…">
+            <span>. . .</span>
+          </span> `
+    )}
+      ${slash}
+    `;
+  }
+};
+DaikinBreadcrumbItem.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      flex-shrink: 0;
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinBreadcrumbItem.prototype, "href", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinBreadcrumbItem.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinBreadcrumbItem.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinBreadcrumbItem.prototype, "target", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "trailing-slash" })
+], DaikinBreadcrumbItem.prototype, "trailingSlash", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinBreadcrumbItem.prototype, "hidden", 2);
+DaikinBreadcrumbItem = __decorateClass([
+  customElement("daikin-breadcrumb-item")
+], DaikinBreadcrumbItem);
+export {
+  DaikinBreadcrumbItem
+};

package/dist/es/components/breadcrumb-item/index.d.ts

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

package/dist/es/components/breadcrumb-item/index.js

@@ -0,0 +1,4 @@
+import { DaikinBreadcrumbItem } from "./daikin-breadcrumb-item.js";
+export {
+  DaikinBreadcrumbItem
+};

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

@@ -1,14 +1,27 @@
 import { LitElement } from 'lit';
 import { ARIARole } from '../../lit-analyzer-types';
 import { MergeVariantProps } from '../../type-utils';
-
+import { IconType } from '../icon/daikin-icon';
 declare const cvaButton: (props?: ({
     intent?: "primary" | "secondary" | "tertiary" | "primaryDanger" | null | undefined;
     size?: "default" | "condensed" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type ButtonVariantProps = MergeVariantProps<typeof cvaButton>;
 /**
- * Primary UI component for user interaction
+ * The button component is a versatile UI element that triggers actions or submits forms when clicked.
+ * It functions similarly to the HTML `<button>` tag, allowing users to initiate various operations such as submitting data, opening dialogs, or navigating to different sections of an application.
+ *
+ * @fires click - A retargeted event of a [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) emitted from the inner `<button>` element. Suppressed if `disabled` is true,
+ *
+ * @slot - A slot for the button content.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-button>
+ *   Button label
+ * </daikin-button>
+ * ```
  */
 export declare class DaikinButton extends LitElement {
     static readonly styles: import('lit').CSSResult;
@@ -23,11 +36,11 @@ export declare class DaikinButton extends LitElement {
     /**
      * Set a icon in the right of button label.
      */
-    rightIcon: string;
+    rightIcon: IconType | null;
     /**
      * Set a icon in the left of button label.
      */
-    leftIcon: string;
+    leftIcon: IconType | null;
     /**
      * Link `href`. If present, this button is rendered as `<a>`.
      */
@@ -49,6 +62,10 @@ export declare class DaikinButton extends LitElement {
      */
     isLoading: boolean;
     render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner button.
+     * @param options focus options
+     */
     focus(options?: FocusOptions | undefined): void;
 }
 declare global {

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

@@ -3,6 +3,7 @@ import { cva } from "class-variance-authority";
 import { css, unsafeCSS, LitElement, html } from "lit";
 import { property, customElement } from "lit/decorators.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) => {
@@ -13,16 +14,21 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+const BUTTON_ICON_SIZE_MAP = {
+  default: "m",
+  condensed: "s"
+};
 const cvaButton = cva(
   [
     "inline-flex",
     "justify-center",
     "items-center",
+    "gap-2",
     "font-daikinSerif",
     "font-bold",
     "rounded-lg",
     "tracking-wide",
-    "text-wrap",
+    "text-nowrap",
     "disabled:cursor-default",
     "w-full",
     "h-full"
@@ -90,8 +96,8 @@ let DaikinButton = class extends LitElement {
     super(...arguments);
     this.variant = "primary";
     this.disabled = false;
-    this.rightIcon = "";
-    this.leftIcon = "";
+    this.rightIcon = null;
+    this.leftIcon = null;
     this.href = "";
     this.size = "default";
     this.type = "button";
@@ -104,12 +110,20 @@ let DaikinButton = class extends LitElement {
       size: this.size
     });
     const content = html`
-      <slot name="leftIcon"></slot>
-      <span><slot></slot></span>
-      <slot name="rightIcon"></slot>
+      ${this.leftIcon ? html`<daikin-icon
+            icon=${this.leftIcon}
+            size=${BUTTON_ICON_SIZE_MAP[this.size]}
+            color="current"
+          ></daikin-icon>` : null}
+      <slot></slot>
+      ${this.rightIcon ? html`<daikin-icon
+            icon=${this.rightIcon}
+            size=${BUTTON_ICON_SIZE_MAP[this.size]}
+            color="current"
+          ></daikin-icon>` : null}
     `;
     if (this.href) {
-      return html` <a
+      return html`<a
         href="${this.href}"
         class="${buttonClassName}"
         role="${this.role}"
@@ -128,6 +142,10 @@ let DaikinButton = class extends LitElement {
       </button>
     `;
   }
+  /**
+   * Focuses on the inner button.
+   * @param options focus options
+   */
   focus(options) {
     var _a, _b;
     (_b = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("button")) == null ? void 0 : _b.focus(options);