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

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

@@ -5,11 +5,11 @@ import { LitElement } from 'lit';
  * This component is particularly useful for creating complex forms where clear communication and guidance are essential.
  *
  * Hierarchies:
- * - `daikin-input-group` > `daikin-select`
  * - `daikin-input-group` > `daikin-dropdown` > `daikin-dropdown-item`
+ * - `daikin-input-group` > `daikin-radio-group` > `daikin-radio`
+ * - `daikin-input-group` > `daikin-select`
  * - `daikin-input-group` > `daikin-text-area`
  * - `daikin-input-group` > `daikin-text-field`
- * - `daikin-input-group` > `daikin-radio-group` > `daikin-radio`
  *
  * @slot - A slot for an input component. See **Hierarchies** for supported components.
  *
@@ -17,6 +17,11 @@ import { LitElement } from 'lit';
  *
  * ```js
  * import "@daikin-oss/design-system-web-components/components/input-group/index.js";
+ * <!-- Import the following as necessary. -->
+ * import "@daikin-oss/design-system-web-components/components/dropdown/index.js";
+ * import "@daikin-oss/design-system-web-components/components/dropdown-item/index.js";
+ * import "@daikin-oss/design-system-web-components/components/radio-group/index.js";
+ * import "@daikin-oss/design-system-web-components/components/radio/index.js";
  * import "@daikin-oss/design-system-web-components/components/select/index.js";
  * import "@daikin-oss/design-system-web-components/components/text-area/index.js";
  * import "@daikin-oss/design-system-web-components/components/text-field/index.js";
@@ -34,6 +39,16 @@ import { LitElement } from 'lit';
  * </daikin-input-group>
  * ```
  *
+ * With Radio Group:
+ *
+ * ```html
+ * <daikin-input-group>
+ *   <daikin-radio-group value="Value of Radio Group">
+ *     <daikin-radio value="Value of Radio Group" label="Option1"></daikin-radio>
+ *   </daikin-radio-group>
+ * </daikin-input-group>
+ * ```
+ *
  * With Select:
  *
  * ```html

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

@@ -163,7 +163,7 @@ __decorateClass([
 ], DaikinInputGroup.prototype, "_textareas", 2);
 __decorateClass([
   queryAssignedElements({
-    selector: "daikin-dropdown,daikin-select,daikin-text-field,daikin-text-area,daikin-radio-group"
+    selector: "daikin-dropdown,daikin-radio-group,daikin-select,daikin-text-field,daikin-text-area"
   })
 ], DaikinInputGroup.prototype, "_controls", 2);
 __decorateClass([

package/dist/es-dev/components/input-group/index.d.ts

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

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

@@ -0,0 +1,43 @@
+import { LitElement } from 'lit';
+/**
+ * The link component uses the standard HTML <a> tag. Unlike the link used in the button component, it provides the style of the text as it is.
+ *
+ * @slot - A slot for the link content.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/link/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-link href="https://www.example.com">
+ *   Link label
+ * </daikin-link>
+ * ```
+ */
+export declare class DaikinLink extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Link `href`.
+     */
+    href: string | null;
+    /**
+     * Link `target`.
+     */
+    target: string | null;
+    /**
+     * Whether or not disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether or not to change the color of visited links.
+     */
+    showVisited: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-link": DaikinLink;
+    }
+}

package/dist/es-dev/components/link/daikin-link.js

@@ -0,0 +1,108 @@
+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 LINK_CLASS_NAME = cva([
+  "flex",
+  "justify-center",
+  "items-center",
+  "gap-0.5",
+  "size-fit",
+  "font-daikinSerif",
+  "rounded-[1px]",
+  "relative",
+  "link-enabled:text-system-state-link-active",
+  "link-enabled:hover:text-system-state-link-hover",
+  "link-enabled:hover:bg-system-state-link-surface-hover",
+  "link-enabled:active:text-system-state-link-press",
+  "link-disabled:text-system-state-disabled",
+  "focus-visible:outline-none",
+  "focus-visible:before:block",
+  "focus-visible:before:rounded-none",
+  "focus-visible:before:absolute",
+  "focus-visible:before:inset-[-1px]",
+  "focus-visible:before:outline",
+  "focus-visible:before:outline-system-state-focus",
+  "focus-visible:before:outline-2",
+  "after:h-[1px]",
+  "after:absolute",
+  "after:inset-[auto_0_0_0]",
+  "after:bg-current"
+])();
+let DaikinLink = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.href = null;
+    this.target = null;
+    this.disabled = false;
+    this.showVisited = false;
+  }
+  render() {
+    return html`
+      <a
+        class=${LINK_CLASS_NAME}
+        href=${ifDefined(this.disabled ? void 0 : this.href ?? void 0)}
+        target=${ifDefined(this.target ?? void 0)}
+        aria-disabled=${ifDefined(this.disabled ? "true" : void 0)}
+      >
+        <slot name="left-icon" class="icon-size-4"></slot>
+        <slot></slot>
+        <slot name="right-icon" class="icon-size-4"></slot>
+      </a>
+    `;
+  }
+};
+DaikinLink.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      width: fit-content;
+      height: fit-content;
+    }
+
+    :host([show-visited]:not([disabled])) a:visited {
+      color: #5c2365; /* system-state-visited-active */
+    }
+
+    :host([show-visited]:not([disabled])) a:hover:visited {
+      color: #4a1c51; /* system-state-visited-hover */
+    }
+
+    :host([show-visited]:not([disabled])) a:hover:visited {
+      background-color: #f0ddf3; /* system-state-visited-hover */
+    }
+
+    :host([show-visited]:not([disabled])) a:active:visited {
+      color: #37153d; /* system-state-visited-press */
+    }
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinLink.prototype, "href", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinLink.prototype, "target", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinLink.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "show-visited" })
+], DaikinLink.prototype, "showVisited", 2);
+DaikinLink = __decorateClass([
+  customElement("daikin-link")
+], DaikinLink);
+export {
+  DaikinLink
+};

package/dist/es-dev/components/link/index.d.ts

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

package/dist/es-dev/components/link/index.js

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

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

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

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

@@ -3,7 +3,6 @@ import { css, unsafeCSS, LitElement, html } from "lit";
 import { property, query, 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) => {
@@ -39,6 +38,18 @@ const cvaContent = cva(["block", "pl-2", "pr-3", "text-left"], {
     }
   }
 });
+const cvaIcon = cva(["icon-size-6"], {
+  variants: {
+    position: {
+      left: [],
+      right: ["pointer-events-none"]
+    },
+    disabled: {
+      false: ["text-system-element-text-primary"],
+      true: ["text-system-state-disabled"]
+    }
+  }
+});
 let DaikinListItem = class extends LitElement {
   constructor() {
     super();
@@ -64,7 +75,10 @@ let DaikinListItem = class extends LitElement {
   render() {
     const disabled = this._disabled;
     const content = html`<span class="flex items-center w-full relative">
-      <slot name="left-icon">
+      <slot
+        name="left-icon"
+        class=${cvaIcon({ disabled: this.disabled, position: "left" })}
+      >
         <span class="block -ml-1"></span>
       </slot>
       <slot class=${cvaContent({ disabled: this.disabled })}></slot>
@@ -93,7 +107,10 @@ let DaikinListItem = class extends LitElement {
         class="flex items-center gap-3"
         @click=${this._handleClickAction}
       >
-        <slot name="right-icon" class="pointer-events-none">
+        <slot
+          name="right-icon"
+          class=${cvaIcon({ disabled: this.disabled, position: "right" })}
+        >
           <span class="block -mr-1"></span>
         </slot>
       </slot>

package/dist/es-dev/components/list-item/index.d.ts

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

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

@@ -1,5 +1,5 @@
 import { LitElement, nothing } from 'lit';
-import { MergeVariantProps } from '../../type-utils';
+import { MergeVariantProps } from "../../type-utils.js";
 declare const cvaContainer: (props?: ({
     variant?: "toast" | "inline" | null | undefined;
     status?: "alarm" | "information" | "negative" | "positive" | "warning" | null | undefined;
@@ -44,27 +44,27 @@ type NotificationVariantProps = MergeVariantProps<typeof cvaContainer | typeof c
 export declare class DaikinNotification extends LitElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Type of notification
+     * Type of notification.
      */
     variant: NotificationVariantProps["variant"];
     /**
-     * Status of notification
+     * Status of notification.
      */
     status: NotificationVariantProps["status"];
     /**
-     * Display in single or multiple lines
+     * Display in single or multiple lines.
      */
     line: NotificationVariantProps["line"];
     /**
-     * Whether the component is open
+     * Specify the notification's open state.
      */
     open: boolean;
     /**
-     * Whether to display the close button
+     * Whether to display the close button.
      */
     closeButton: boolean;
     /**
-     * Call the event registered in "close"
+     * Call the event registered in "close".
      */
     private _handleClickClose;
     render(): import('lit-html').TemplateResult<1> | typeof nothing;

package/dist/es-dev/components/notification/daikin-notification.js

@@ -4,7 +4,6 @@ import { css, unsafeCSS, LitElement, html, nothing } from "lit";
 import { property, customElement } from "lit/decorators.js";
 import { EVENT_CLOSE } from "../../constants/events.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) => {
@@ -43,15 +42,35 @@ const cvaContainer = cva(
   }
 );
 const cvaIconContainer = cva(
-  ["flex-none", "flex", "justify-center", "items-center", "w-[44px]"],
+  [
+    "flex-none",
+    "flex",
+    "justify-center",
+    "items-center",
+    "w-[2.75rem]",
+    "after:size-6",
+    "after:text-white"
+  ],
   {
     variants: {
       status: {
-        positive: ["bg-[--colorFeedbackPositive]"],
-        negative: ["bg-[--colorFeedbackNegative]"],
-        warning: ["bg-[--colorFeedbackWarning]"],
-        alarm: ["bg-[--colorFeedbackAlarm]"],
-        information: ["bg-[--colorFeedbackInformation]"]
+        positive: [
+          "bg-[--colorFeedbackPositive]",
+          "after:i-daikin-status-positive"
+        ],
+        negative: [
+          "bg-[--colorFeedbackNegative]",
+          "after:i-daikin-status-negative"
+        ],
+        warning: [
+          "bg-[--colorFeedbackWarning]",
+          "after:i-daikin-status-warning"
+        ],
+        alarm: ["bg-[--colorFeedbackAlarm]", "after:i-daikin-status-alarm"],
+        information: [
+          "bg-[--colorFeedbackInformation]",
+          "after:i-daikin-status-information"
+        ]
       }
     },
     defaultVariants: {
@@ -83,7 +102,7 @@ let DaikinNotification = class extends LitElement {
     this.closeButton = false;
   }
   /**
-   * Call the event registered in "close"
+   * Call the event registered in "close".
    */
   _handleClickClose() {
     const event = new CustomEvent(EVENT_CLOSE);
@@ -106,13 +125,7 @@ let DaikinNotification = class extends LitElement {
             class=${cvaIconContainer({
       status: this.status
     })}
-          >
-            <daikin-icon
-              icon=${this.status}
-              color="white"
-              size="xl"
-            ></daikin-icon>
-          </div>
+          ></div>
           <div
             class="flex justify-between items-center gap-5 p-5 text-lg flex-auto flex-shrink-0"
           >
@@ -132,15 +145,9 @@ let DaikinNotification = class extends LitElement {
                   <div class="flex items-center gap-5">
                     <button
                       aria-label="Close"
-                      class="relative flex w-5 h-5"
+                      class="relative flex w-5 h-5 after:i-daikin-notification-close after:size-5 after:text-[#a0a0a0]"
                       @click=${this._handleClickClose}
-                    >
-                      <daikin-icon
-                        icon="close"
-                        size="l"
-                        color="default"
-                      ></daikin-icon>
-                    </button>
+                    ></button>
                   </div>
                 ` : nothing}
           </div>
@@ -181,7 +188,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinNotification.prototype, "open", 2);
 __decorateClass([
-  property({ type: Boolean })
+  property({ type: Boolean, attribute: "close-button" })
 ], DaikinNotification.prototype, "closeButton", 2);
 DaikinNotification = __decorateClass([
   customElement("daikin-notification")

package/dist/es-dev/components/notification/index.d.ts

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

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

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+/**
+ * The pagination component is used to navigate through a list of items that are divided into multiple pages.
+ *
+ * @fires change - Emitted when the current page number is changed.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-pagination window="5" total="20" current="3"></daikin-pagination>
+ * ```
+ */
+export declare class DaikinPagination extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * The current page number, starting at 1.
+     * Must be greater than 0 and less than or equal to `this.total`.
+     */
+    current: number;
+    /**
+     * The number of pages.
+     * Must be greater than 0.
+     */
+    total: number;
+    /**
+     * Number of elements to display in pagination, including ellipses.
+     * Must be greater than or equal to 5.
+     * If a value less than 5 is specified, it will be treated as 5.
+     */
+    window: number;
+    private _goto;
+    private _gotoOffset;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-pagination": DaikinPagination;
+    }
+}

package/dist/es-dev/components/pagination/daikin-pagination.js

@@ -0,0 +1,216 @@
+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 { repeat } from "lit/directives/repeat.js";
+import tailwindStyles from "../../tailwind.css.js";
+import { calculatePagination } from "./pagination-utils.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 cvaPageButton = cva(
+  [
+    "border-0",
+    "no-underline",
+    "flex",
+    "relative",
+    "items-center",
+    "justify-center",
+    "min-w-12",
+    "min-h-12",
+    "font-daikinSerif",
+    "text-base",
+    "not-italic",
+    "leading-6",
+    "focus-visible:outline",
+    "focus-visible:outline-2",
+    "focus-visible:outline-offset-1",
+    "focus-visible:outline-[#0081C0]"
+  ],
+  {
+    variants: {
+      active: {
+        true: [
+          "text-daikinBlue-500",
+          "focus-visible:text-daikinBlue-500",
+          "font-bold",
+          "hover:text-[#0081C0]",
+          "hover:bg-[#DDF3FC]",
+          "active:text-[#00689A]",
+          "active:bg-[#BBE7F9]",
+          "after:bg-daikinBlue-500",
+          "after:content-['']",
+          "after:h-1",
+          "after:absolute",
+          "after:inset-0",
+          "after:top-auto"
+        ],
+        false: [
+          "text-inherit",
+          "font-normal",
+          "text-daikinNeutral-700",
+          "active:bg-daikinNeutral-100",
+          "active:text-daikinNeutral-800",
+          "hover:bg-[#F2F2F2]",
+          "hover:text-[#515151]"
+        ]
+      }
+    }
+  }
+);
+const cvaEllipsis = cva([
+  "relative",
+  "text-inherit",
+  "border-0",
+  "no-underline",
+  "flex",
+  "items-center",
+  "justify-center",
+  "w-12",
+  "h-12",
+  "font-daikinSerif",
+  "text-base",
+  "not-italic",
+  "font-normal",
+  "leading-6"
+]);
+const cvaChevronButton = cva([
+  "text-inherit",
+  "border-0",
+  "no-underline",
+  "flex",
+  "items-center",
+  "justify-center",
+  "w-12",
+  "h-12",
+  "text-[#515151]",
+  "font-daikinSerif",
+  "text-base",
+  "not-italic",
+  "font-normal",
+  "leading-6",
+  "enabled:hover:bg-[#F2F2F2]",
+  "enabled:hover:text-daikinNeutral-800",
+  "enabled:active:bg-daikinNeutral-100",
+  "enabled:active:text-daikinNeutral-900",
+  "disabled:!text-daikinNeutral-400",
+  "focus-visible:outline",
+  "focus-visible:outline-2",
+  "focus-visible:outline-offset-1",
+  "focus-visible:outline-[#0081C0]"
+]);
+let DaikinPagination = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.current = 1;
+    this.total = 1;
+    this.window = 5;
+  }
+  _goto(page) {
+    this.current = this.current = Math.max(Math.min(page, this.total), 1);
+    this.dispatchEvent(
+      new Event("change", {
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      })
+    );
+  }
+  _gotoOffset(offset) {
+    this._goto(this.current + offset);
+  }
+  render() {
+    const cvaChevron = cvaChevronButton();
+    const pageArray = calculatePagination(
+      this.total,
+      this.current,
+      this.window
+    );
+    return html`
+      <div aria-label="Pagination" class="inline-flex gap-1">
+        <button
+          class=${cvaChevron}
+          type="button"
+          aria-label="Go to the previous page."
+          ?disabled=${this.current === 1}
+          @click=${() => this._gotoOffset(-1)}
+        >
+          <span class="i-daikin-pagination-chevron-left w-4 h-4"></span>
+        </button>
+        ${repeat(
+      pageArray,
+      (item, index) => item.type === "page" ? `p${item.page}` : `e${index}`,
+      (item) => {
+        if (item.type === "page") {
+          const buttonClassName = cvaPageButton({
+            active: this.current === item.page
+          });
+          return html`
+                <button
+                  type="button"
+                  class=${buttonClassName}
+                  @click=${() => this._goto(item.page)}
+                  aria-label="Go to page ${item.page}"
+                  aria-current=${ifDefined(
+            item.page === this.current ? "page" : void 0
+          )}
+                >
+                  ${item.page}
+                </button>
+              `;
+        } else {
+          return html`
+                <span class=${cvaEllipsis()}>
+                  <button
+                    type="button"
+                    disabled
+                    aria-label="Expand the omitted pages."
+                    class="after:content-['._._.']"
+                  ></button>
+                </span>
+              `;
+        }
+      }
+    )}
+        <button
+          type="button"
+          class=${cvaChevron}
+          aria-label="Go to the next page."
+          ?disabled=${this.current === this.total}
+          @click=${() => this._gotoOffset(1)}
+        >
+          <span class="i-daikin-pagination-chevron-right w-4 h-4"></span>
+        </button>
+      </div>
+    `;
+  }
+};
+DaikinPagination.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: inline-flex;
+    }
+  `;
+__decorateClass([
+  property({ type: Number, reflect: true })
+], DaikinPagination.prototype, "current", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], DaikinPagination.prototype, "total", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], DaikinPagination.prototype, "window", 2);
+DaikinPagination = __decorateClass([
+  customElement("daikin-pagination")
+], DaikinPagination);
+export {
+  DaikinPagination
+};

package/dist/es-dev/components/pagination/index.d.ts

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

package/dist/es-dev/components/pagination/index.js

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