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

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 import { ARIARole } from "../../lit-analyzer-types.js";
 import { MergeVariantProps } from "../../type-utils.js";
 declare const cvaIconButton: (props?: ({
@@ -32,7 +32,7 @@ type IconButtonVariantProps = MergeVariantProps<typeof cvaIconButton>;
  * </daikin-icon-button>
  * ```
  */
-export declare class DaikinIconButton extends LitElement {
+export declare class DaikinIconButton extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Variant of the button.

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

@@ -1,7 +1,10 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, query, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property, query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 import "../icon/daikin-icon.js";
 var __defProp = Object.defineProperty;
@@ -19,8 +22,7 @@ const cvaIconButton = cva(
     "inline-flex",
     "justify-center",
     "items-center",
-    "w-8",
-    "h-8",
+    "size-full",
     "font-daikinSerif",
     "font-bold",
     "rounded",
@@ -30,37 +32,37 @@ const cvaIconButton = cva(
     "focus-visible:outline",
     "focus-visible:outline-2",
     "focus-visible:outline-offset-2",
-    "focus-visible:outline-system-state-focus",
+    "focus-visible:outline-ddt-color-common-border-focus",
     "var-color-transparent/color-secondary",
-    "link-disabled:var-color-system-state-disabled/color-primary"
+    "link-disabled:var-color-ddt-color-common-disabled/color-primary"
   ],
   {
     variants: {
       color: {
         default: [
-          "link-enabled:var-color-system-state-primary-active/color-primary",
-          "link-enabled:hover:var-color-system-state-primary-hover/color-primary",
-          "link-enabled:hover:var-color-system-state-primary-surface-hover/color-secondary",
-          "link-enabled:active:var-color-system-state-primary-press/color-primary",
-          "link-enabled:active:var-color-system-state-primary-surface-press/color-secondary"
+          "link-enabled:var-color-ddt-color-common-brand-default/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-brand-hover/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-surface-brand-hover/color-secondary",
+          "link-enabled:active:var-color-ddt-color-common-brand-press/color-primary",
+          "link-enabled:active:var-color-ddt-color-common-surface-brand-press/color-secondary"
         ],
         neutral: [
-          "link-enabled:var-color-system-state-neutral-active/color-primary",
-          "link-enabled:hover:var-color-system-state-neutral-hover/color-primary",
-          "link-enabled:hover:var-color-system-background-surface-hover/color-secondary",
-          "link-enabled:active:var-color-system-state-neutral-press/color-primary",
-          "link-enabled:active:var-color-system-background-surface-press/color-secondary"
+          "link-enabled:var-color-ddt-color-common-neutral-default/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-neutral-hover/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-surface-neutral-hover/color-secondary",
+          "link-enabled:active:var-color-ddt-color-common-neutral-press/color-primary",
+          "link-enabled:active:var-color-ddt-color-common-surface-neutral-press/color-secondary"
         ],
         danger: [
-          "link-enabled:var-color-system-state-error-active/color-primary",
-          "link-enabled:hover:var-color-system-state-error-hover/color-primary",
-          "link-enabled:hover:var-color-system-state-error-surface-hover/color-secondary",
-          "link-enabled:active:var-color-system-state-error-press/color-primary",
-          "link-enabled:active:var-color-system-state-error-surface-press/color-secondary"
+          "link-enabled:var-color-ddt-color-common-danger-default/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-danger-hover/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-surface-danger-hover/color-secondary",
+          "link-enabled:active:var-color-ddt-color-common-danger-press/color-primary",
+          "link-enabled:active:var-color-ddt-color-common-surface-danger-press/color-secondary"
         ]
       },
       variant: {
-        fill: ["text-white", "bg-[--color-primary]"],
+        fill: ["text-ddt-color-common-text-inverse", "bg-[--color-primary]"],
         outline: [
           "border",
           "text-[--color-primary]",
@@ -72,7 +74,7 @@ const cvaIconButton = cva(
     }
   }
 );
-let DaikinIconButton = class extends LitElement {
+let DaikinIconButton = class extends DDSElement {
   constructor() {
     super();
     this.variant = "fill";
@@ -132,6 +134,8 @@ DaikinIconButton.styles = css`
 
     :host {
       display: inline-block;
+      width: 2rem;
+      height: 2rem;
     }
   `;
 __decorateClass([
@@ -159,7 +163,7 @@ __decorateClass([
   query("button")
 ], DaikinIconButton.prototype, "_button", 2);
 DaikinIconButton = __decorateClass([
-  customElement("daikin-icon-button")
+  ddsElement("daikin-icon-button")
 ], DaikinIconButton);
 export {
   DaikinIconButton

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

@@ -3,16 +3,21 @@ export * from "./accordion-item/index.js";
 export * from "./breadcrumb/index.js";
 export * from "./breadcrumb-item/index.js";
 export * from "./button/index.js";
+export * from "./card/index.js";
+export * from "./card-footer/index.js";
+export * from "./card-header/index.js";
+export * from "./carousel/index.js";
+export * from "./carousel-item/index.js";
 export * from "./checkbox/index.js";
 export * from "./dropdown/index.js";
 export * from "./dropdown-item/index.js";
 export * from "./icon/index.js";
 export * from "./icon-button/index.js";
+export * from "./inline-notification/index.js";
 export * from "./input-group/index.js";
 export * from "./link/index.js";
 export * from "./list/index.js";
 export * from "./list-item/index.js";
-export * from "./notification/index.js";
 export * from "./pagination/index.js";
 export * from "./progress-bar/index.js";
 export * from "./progress-indicator/index.js";
@@ -27,5 +32,10 @@ export * from "./table-header-cell/index.js";
 export * from "./tabs/index.js";
 export * from "./text-area/index.js";
 export * from "./text-field/index.js";
+export * from "./toast-notification/index.js";
+export * from "./toast-notification-manager/index.js";
 export * from "./toggle/index.js";
 export * from "./tooltip/index.js";
+export * from "./tree/index.js";
+export * from "./tree-item/index.js";
+export * from "./tree-section/index.js";

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

@@ -3,16 +3,21 @@ import { DaikinAccordionItem } from "./accordion-item/daikin-accordion-item.js";
 import { DaikinBreadcrumb } from "./breadcrumb/daikin-breadcrumb.js";
 import { DaikinBreadcrumbItem } from "./breadcrumb-item/daikin-breadcrumb-item.js";
 import { DaikinButton } from "./button/daikin-button.js";
+import { DaikinCard } from "./card/daikin-card.js";
+import { DaikinCardFooter } from "./card-footer/daikin-card-footer.js";
+import { DaikinCardHeader } from "./card-header/daikin-card-header.js";
+import { DaikinCarousel } from "./carousel/daikin-carousel.js";
+import { DaikinCarouselItem } from "./carousel-item/daikin-carousel-item.js";
 import { DaikinCheckbox } from "./checkbox/daikin-checkbox.js";
 import { DaikinDropdown } from "./dropdown/daikin-dropdown.js";
 import { DaikinDropdownItem } from "./dropdown-item/daikin-dropdown-item.js";
 import { DaikinIcon, iconList } from "./icon/daikin-icon.js";
 import { DaikinIconButton } from "./icon-button/daikin-icon-button.js";
+import { DaikinInlineNotification } from "./inline-notification/daikin-inline-notification.js";
 import { DaikinInputGroup } from "./input-group/daikin-input-group.js";
 import { DaikinLink } from "./link/daikin-link.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 { DaikinPagination } from "./pagination/daikin-pagination.js";
 import { DaikinProgressBar } from "./progress-bar/daikin-progress-bar.js";
 import { DaikinProgressIndicator } from "./progress-indicator/daikin-progress-indicator.js";
@@ -27,24 +32,34 @@ import { DaikinTableHeaderCell } from "./table-header-cell/daikin-table-header-c
 import { DaikinTabs } from "./tabs/daikin-tabs.js";
 import { DaikinTextArea } from "./text-area/daikin-text-area.js";
 import { DaikinTextField } from "./text-field/daikin-text-field.js";
+import { DaikinToastNotification } from "./toast-notification/daikin-toast-notification.js";
+import { DaikinToastNotificationManager } from "./toast-notification-manager/daikin-toast-notification-manager.js";
 import { DaikinToggle } from "./toggle/daikin-toggle.js";
 import { DaikinTooltip } from "./tooltip/daikin-tooltip.js";
+import { DaikinTree } from "./tree/daikin-tree.js";
+import { DaikinTreeItem, cvaTreeChildren } from "./tree-item/daikin-tree-item.js";
+import { DaikinTreeSection } from "./tree-section/daikin-tree-section.js";
 export {
   DaikinAccordion,
   DaikinAccordionItem,
   DaikinBreadcrumb,
   DaikinBreadcrumbItem,
   DaikinButton,
+  DaikinCard,
+  DaikinCardFooter,
+  DaikinCardHeader,
+  DaikinCarousel,
+  DaikinCarouselItem,
   DaikinCheckbox,
   DaikinDropdown,
   DaikinDropdownItem,
   DaikinIcon,
   DaikinIconButton,
+  DaikinInlineNotification,
   DaikinInputGroup,
   DaikinLink,
   DaikinList,
   DaikinListItem,
-  DaikinNotification,
   DaikinPagination,
   DaikinProgressBar,
   DaikinProgressIndicator,
@@ -59,7 +74,13 @@ export {
   DaikinTabs,
   DaikinTextArea,
   DaikinTextField,
+  DaikinToastNotification,
+  DaikinToastNotificationManager,
   DaikinToggle,
   DaikinTooltip,
+  DaikinTree,
+  DaikinTreeItem,
+  DaikinTreeSection,
+  cvaTreeChildren,
   iconList
 };

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

@@ -0,0 +1,55 @@
+import { DDSElement } from "../../base/index.js";
+import { ToastNotificationVariantProps } from "../toast-notification/index.js";
+/**
+ * The inline notification component is a UI element used to inform users about important updates, alerts, or messages within an application.
+ *
+ * An inline notification appears within the content of the application, usually embedded directly within a page or section.
+ * Inline notification is more persistent than toast notification and are used to highlight important information or status updates that should remain visible to the user until they are acknowledged or the issue is resolved.
+ *
+ * @fires close - A custom event emitted when a user clicks the close button.
+ *
+ * @slot title - A slot for the title content.
+ * @slot description - A slot for the description content.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/inline-notification/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-inline-notification>
+ *   <span slot="title">InlineNotification title</span>
+ *   <span slot="description">InlineNotification description</span>
+ * </daikin-inline-notification>
+ * ```
+ */
+export declare class DaikinInlineNotification extends DDSElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Status of the notification.
+     */
+    status: ToastNotificationVariantProps["status"];
+    /**
+     * Specify how to arrange the elements.
+     */
+    layout: ToastNotificationVariantProps["layout"];
+    /**
+     * Whether to display the close button.
+     */
+    closable: boolean;
+    /**
+     * The timestamp to display.
+     */
+    timestamp: Date | null;
+    /**
+     * Emits a "close" event and sets `this.hidden` to true.
+     */
+    private _handleClickClose;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-inline-notification": DaikinInlineNotification;
+    }
+}

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

@@ -0,0 +1,93 @@
+import { css, unsafeCSS, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
+import tailwindStyles from "../../tailwind.css.js";
+import { formatDate, cvaContainer, cvaContent, cvaTitle, cvaDescription, cvaTimestamp } from "../../utils/notification-common.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 DaikinInlineNotification = class extends DDSElement {
+  constructor() {
+    super(...arguments);
+    this.status = "positive";
+    this.layout = "horizontal";
+    this.closable = false;
+    this.timestamp = null;
+  }
+  /**
+   * Emits a "close" event and sets `this.hidden` to true.
+   */
+  _handleClickClose() {
+    this.hidden = true;
+    this.dispatchEvent(new Event("close"));
+  }
+  render() {
+    const formattedTimestamp = this.timestamp ? formatDate(this.timestamp) : null;
+    return html`<aside
+      class=${cvaContainer({ variant: "inline", status: this.status })}
+      role="status"
+    >
+      <div class=${cvaContent({ layout: this.layout })}>
+        <slot class=${cvaTitle({ layout: this.layout })} name="title"></slot>
+        <slot
+          class=${cvaDescription({ layout: this.layout })}
+          name="description"
+        ></slot>
+        ${formattedTimestamp ? html`<span class=${cvaTimestamp({ layout: this.layout })}
+              >${formattedTimestamp}</span
+            >` : nothing}
+      </div>
+      <slot name="action" class="flex-none"></slot>
+      ${this.closable ? html`
+            <daikin-icon-button
+              variant="ghost"
+              button-aria-label="Close"
+              @click=${this._handleClickClose}
+            >
+              <span
+                class="flex size-6 text-ddt-color-common-text-secondary relative i-daikin-cross"
+              ></span>
+            </daikin-icon-button>
+          ` : nothing}
+    </aside>`;
+  }
+};
+DaikinInlineNotification.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], DaikinInlineNotification.prototype, "status", 2);
+__decorateClass([
+  property({ type: String })
+], DaikinInlineNotification.prototype, "layout", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinInlineNotification.prototype, "closable", 2);
+__decorateClass([
+  property({ type: Object, reflect: true, attribute: false })
+], DaikinInlineNotification.prototype, "timestamp", 2);
+DaikinInlineNotification = __decorateClass([
+  ddsElement("daikin-inline-notification")
+], DaikinInlineNotification);
+export {
+  DaikinInlineNotification
+};

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

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

package/dist/es-dev/components/inline-notification/index.js

@@ -0,0 +1,4 @@
+import { DaikinInlineNotification } from "./daikin-inline-notification.js";
+export {
+  DaikinInlineNotification
+};

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 /**
  * The input group component serves as a wrapper for an input control component (full list below), providing additional elements such as label text, helper text, or a counter.
  * It enhances the user experience by associating supplementary information or functionality directly with the input field.
@@ -20,8 +20,8 @@ import { LitElement } from 'lit';
  * <!-- 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/radio-group/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";
@@ -31,10 +31,16 @@ import { LitElement } from 'lit';
  *
  * ```html
  * <daikin-input-group>
- *   <daikin-dropdown value="Value of Dropdown">
- *     <daikin-dropdown-item value="Value of Dropdown Item">
+ *   <daikin-dropdown>
+ *     <daikin-dropdown-item value="value1">
  *       Dropdown item 1
  *     </daikin-dropdown-item>
+ *     <daikin-dropdown-item value="value2">
+ *       Dropdown item 2
+ *     </daikin-dropdown-item>
+ *     <daikin-dropdown-item value="value3">
+ *       Dropdown item 3
+ *     </daikin-dropdown-item>
  *   </daikin-dropdown>
  * </daikin-input-group>
  * ```
@@ -43,8 +49,10 @@ import { LitElement } from 'lit';
  *
  * ```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-radio value="value1">Radio option 1</daikin-radio>
+ *     <daikin-radio value="value2">Radio option 2</daikin-radio>
+ *     <daikin-radio value="value3">Radio option 3</daikin-radio>
  *   </daikin-radio-group>
  * </daikin-input-group>
  * ```
@@ -80,7 +88,7 @@ import { LitElement } from 'lit';
  * ```
  * ```
  */
-export declare class DaikinInputGroup extends LitElement {
+export declare class DaikinInputGroup extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Label text displayed at the top of the field.
@@ -111,12 +119,21 @@ export declare class DaikinInputGroup extends LitElement {
      */
     disabled: boolean;
     /**
-     * Maximum value to display on the counter. When `null`, the counter will be hidden.
+     * The maximum number of characters that can be input into the text area.
+     * If set, a counter will be displayed at the bottom of the text area.
+     * Users can enter more characters than the limit, but in that case the counter will turn red and an error message will be displayed (if specified) to indicate that the limit has been exceeded.
      */
     textareaMaxCount: number | null;
+    /**
+     * An error message displayed when the number of characters in the text area exceeds the limit (optional).
+     * When the number of characters in the text area exceeds the limit, this is displayed below the label by overriding `helper` and `error`.
+     * Only used when a text area is assigned to a slot and `textareaMaxCount` is set.
+     */
+    textareaLimitExceedError: string | null;
     private readonly _textareas;
     private readonly _controls;
     private _textareaCount;
+    get textareaLimitExceeded(): boolean;
     private _handleSlotChange;
     private _handleInput;
     private _reflectSlotProperties;