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

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

@@ -0,0 +1,56 @@
+import { LitElement, PropertyValues } from 'lit';
+
+/**
+ * The accordion item component is a child element within the `daikin-accordion` component.
+ * It functions similarly to the HTML `<details>` and `<summary>` tag, allowing users to expand or collapse the associated content by clicking on the header.
+ * This component is responsible for displaying the specific content within the accordion and allowing users to interact with each section independently.
+ *
+ * Hierarchy:
+ * - `daikin-accordion` > `daikin-accordion-item`
+ *
+ * @slot - A slot for the accordion item content.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-accordion-item title="The first accordion item">
+ *   Accordion 1 content.
+ * </daikin-accordion-item>
+ * ```
+ */
+export declare class DaikinAccordionItem extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    private _contentRef;
+    /**
+     * Heading of accordion
+     */
+    title: string;
+    /**
+     * Whether the accordion is open
+     */
+    open: boolean;
+    /**
+     * Whether the accordion is disabled
+     */
+    disabled: boolean;
+    /**
+     * Open attribute of the actual details element
+     *
+     * The default `open` attribute of the default details element does not allow the display of content to have transitions.
+     * To solve this, the `open` property that `daikin-accordion-item` receives manages the opening and closing of items independently of the open attribute.
+     *
+     * The `open` attribute, which should be present, is taken over by `_detailsOpen`.
+     */
+    private _detailsOpen;
+    private _contentAnimate;
+    private _handleSummaryClick;
+    render(): import('lit-html').TemplateResult<1>;
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-accordion-item": DaikinAccordionItem;
+    }
+}
+export default DaikinAccordionItem;

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/button/daikin-button.d.ts

@@ -1,6 +1,7 @@
 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;
@@ -8,7 +9,20 @@ declare const cvaButton: (props?: ({
 } & 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 +37,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 +63,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);

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

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

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

@@ -9,7 +9,17 @@ declare const cvaLabel: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type CheckboxVariantProps = MergeVariantProps<typeof cvaCheckbox | typeof cvaLabel>;
 /**
- * Primary UI component for user interaction
+ * The checkbox component is a UI element that allows users to select one or more options from a list of choices.
+ * It functions similarly to the HTML `<input type="checkbox">` tag, enabling users to toggle the selection of each option independently.
+ * This component is ideal for cases where multiple selections are allowed or required.
+ *
+ * @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="checkbox">` element.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-checkbox label="Checkbox label" name="name" value="value"></daikin-checkbox>
+ * ```
  */
 export declare class DaikinCheckbox extends LitElement {
     static readonly styles: import('lit').CSSResult;

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

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

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

@@ -0,0 +1,49 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from '../../type-utils';
+import { icons } from './icons.json';
+
+export declare const iconList: string[];
+export type IconType = keyof typeof icons;
+declare const cvaIcon: (props?: ({
+    icon?: string | number | null | undefined;
+    size?: "s" | "m" | "l" | "xl" | null | undefined;
+    color?: "black" | "white" | "default" | "current" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
+/**
+ * The icon component is a versatile UI element used to display small graphical symbols or images that represent actions, objects, or concepts within an application.
+ * The icon set is provided by DDS.
+ *
+ * To use an arbitrary color, specify `"current"` for the `color` property and set the `color` CSS property to the color you want to use.
+ *
+ * If you try to use an icon that does not exist, a blank space will be displayed.
+ * In the development build, warnings will be displayed in the console, so please check there if you encounter any unexpected behavior.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-icon icon="information" color="black" size="m"></daikin-icon>
+ * ```
+ */
+export declare class DaikinIcon extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Specify the name of the icon
+     */
+    icon: IconType | null;
+    /**
+     * Specify icon color
+     */
+    color: IconVariantProps["color"];
+    /**
+     * Specify the height and width of the icon
+     */
+    size: IconVariantProps["size"];
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-icon": DaikinIcon;
+    }
+}
+export default DaikinIcon;

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

@@ -0,0 +1,88 @@
+import { space12, space16, space20, space24 } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
+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 { icons } from "./icons.json.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 iconList = Object.keys(icons);
+const iconClassMap = Object.fromEntries(
+  Object.entries(icons).map(([name, object]) => [name, object.class])
+);
+const cvaIcon = cva(["block"], {
+  variants: {
+    icon: iconClassMap,
+    size: {
+      s: [`w-[--size-s]`, `h-[--size-s]`],
+      m: [`w-[--size-m]`, `h-[--size-m]`],
+      l: [`w-[--size-l]`, `h-[--size-l]`],
+      xl: [`w-[--size-xl]`, `h-[--size-xl]`]
+    },
+    color: {
+      black: ["text-black"],
+      white: ["text-white"],
+      default: ["text-[--default-color]"],
+      current: []
+      // uses `currentColor`
+    }
+  }
+});
+let DaikinIcon = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.icon = null;
+    this.color = "default";
+    this.size = "m";
+  }
+  render() {
+    var _a;
+    const defaultColor = (_a = icons[this.icon ?? ""]) == null ? void 0 : _a.color;
+    return html`<span
+      class=${cvaIcon({
+      icon: this.icon,
+      color: this.color,
+      size: this.size
+    })}
+      style=${`--default-color:${defaultColor ?? "#000000"}`}
+      role="presentation"
+    ></span>`;
+  }
+};
+DaikinIcon.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      --size-s: ${unsafeCSS(space12)};
+      --size-m: ${unsafeCSS(space16)};
+      --size-l: ${unsafeCSS(space20)};
+      --size-xl: ${unsafeCSS(space24)};
+
+      display: block;
+      width: max-content;
+    }
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinIcon.prototype, "icon", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinIcon.prototype, "color", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinIcon.prototype, "size", 2);
+DaikinIcon = __decorateClass([
+  customElement("daikin-icon")
+], DaikinIcon);
+export {
+  DaikinIcon,
+  iconList
+};

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

@@ -0,0 +1,31 @@
+declare const _default: {
+  "icons": {
+    "alarm": {
+      "class": "i-daikin-notification-status-alarm",
+      "color": null
+    },
+    "close": {
+      "class": "i-daikin-notification-close",
+      "color": "#a0a0a0"
+    },
+    "information": {
+      "class": "i-daikin-notification-status-information",
+      "color": null
+    },
+    "negative": {
+      "class": "i-daikin-notification-status-negative",
+      "color": null
+    },
+    "positive": {
+      "class": "i-daikin-notification-status-positive",
+      "color": null
+    },
+    "warning": {
+      "class": "i-daikin-notification-status-warning",
+      "color": null
+    }
+  }
+}
+;
+
+export default _default;

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

@@ -0,0 +1,29 @@
+const icons = {
+  alarm: {
+    "class": "i-daikin-notification-status-alarm",
+    color: null
+  },
+  close: {
+    "class": "i-daikin-notification-close",
+    color: "#a0a0a0"
+  },
+  information: {
+    "class": "i-daikin-notification-status-information",
+    color: null
+  },
+  negative: {
+    "class": "i-daikin-notification-status-negative",
+    color: null
+  },
+  positive: {
+    "class": "i-daikin-notification-status-positive",
+    color: null
+  },
+  warning: {
+    "class": "i-daikin-notification-status-warning",
+    color: null
+  }
+};
+export {
+  icons
+};

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

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

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

@@ -0,0 +1,5 @@
+import { DaikinIcon, iconList } from "./daikin-icon.js";
+export {
+  DaikinIcon,
+  iconList
+};

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

@@ -1,7 +1,14 @@
+export * from './accordion';
+export * from './accordion-item';
 export * from './button';
 export * from './checkbox';
+export * from './icon';
 export * from './input-group';
 export * from './notification';
+export * from './panel-switcher';
 export * from './radio';
+export * from './tab';
+export * from './tab-group';
 export * from './text-input';
 export * from './textarea';
+export * from './toggle';

package/dist/es/components/index.js

@@ -0,0 +1,31 @@
+import { DaikinAccordion } from "./accordion/daikin-accordion.js";
+import { DaikinAccordionItem } from "./accordion-item/daikin-accordion-item.js";
+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 { DaikinNotification } from "./notification/daikin-notification.js";
+import { DaikinPanelSwitcher } from "./panel-switcher/daikin-panel-switcher.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 { DaikinTextInput } from "./text-input/daikin-text-input.js";
+import { DaikinTextarea } from "./textarea/daikin-textarea.js";
+import { DaikinToggle } from "./toggle/daikin-toggle.js";
+export {
+  DaikinAccordion,
+  DaikinAccordionItem,
+  DaikinButton,
+  DaikinCheckbox,
+  DaikinIcon,
+  DaikinInputGroup,
+  DaikinNotification,
+  DaikinPanelSwitcher,
+  DaikinRadio,
+  DaikinTab,
+  DaikinTabGroup,
+  DaikinTextInput,
+  DaikinTextarea,
+  DaikinToggle,
+  iconList
+};