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

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

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

package/dist/cjs/components/input-group/daikin-input-group.cjs

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

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

@@ -1,10 +1,35 @@
 import { LitElement } from 'lit';
 import { DaikinTextInput } from '../text-input/daikin-text-input';
 import { DaikinTextarea } from '../textarea/daikin-textarea';
-
 type ControlElement = DaikinTextInput | DaikinTextarea;
 /**
- * Primary UI component for user interaction
+ * The input group component serves as a wrapper for a `daikin-text-input` or `daikin-textarea` component, providing additional elements such as labels, helper texts, or a counter.
+ * It enhances the user experience by associating supplementary information or functionality directly with the input field.
+ * This component is particularly useful for creating complex forms where clear communication and guidance are essential.
+ *
+ * Hierarchies:
+ * - `daikin-input-group` > `daikin-text-input`
+ * - `daikin-input-group` > `daikin-textarea`
+ *
+ * @slot - A slot for a input component. Place a `daikin-text-input` or `daikin-textarea` element here.
+ *
+ * @example
+ *
+ * With Text Input:
+ *
+ * ```html
+ * <daikin-input-group>
+ *   <daikin-text-input value="Content of Text Input"></daikin-text-input>
+ * </daikin-input-group>
+ * ```
+ *
+ * With Textarea:
+ *
+ * ```html
+ * <daikin-input-group>
+ *   <daikin-textarea value="Content of Textarea"></daikin-textarea>
+ * </daikin-input-group>
+ * ```
  */
 export declare class DaikinInputGroup extends LitElement {
     static readonly styles: import('lit').CSSResult;

package/dist/cjs/components/input-group/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinInputGroup = require("./daikin-input-group.cjs");
+Object.defineProperty(exports, "DaikinInputGroup", {
+  enumerable: true,
+  get: () => daikinInputGroup.DaikinInputGroup
+});

package/dist/cjs/components/notification/daikin-notification.cjs

@@ -6,6 +6,7 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const events = require("../../constants/events.cjs");
 const tailwind = require("../../tailwind.css.cjs");
+require("../icon/daikin-icon.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -60,31 +61,6 @@ const cvaIconContainer = classVarianceAuthority.cva(
     }
   }
 );
-const cvaIcon = classVarianceAuthority.cva(
-  [
-    "flex",
-    "justify-center",
-    "items-center",
-    "w-[24px]",
-    "h-[24px]",
-    "flex-none",
-    "text-white"
-  ],
-  {
-    variants: {
-      status: {
-        positive: ["i-daikin-notification-status-positive"],
-        negative: ["i-daikin-notification-status-negative"],
-        warning: ["i-daikin-notification-status-warning"],
-        alarm: ["i-daikin-notification-status-alarm"],
-        information: ["i-daikin-notification-status-information"]
-      }
-    },
-    defaultVariants: {
-      status: "positive"
-    }
-  }
-);
 const cvaContent = classVarianceAuthority.cva(
   ["flex", "justify-center", "gap-1", "w-fit", "flex-none"],
   {
@@ -130,11 +106,11 @@ exports.DaikinNotification = class DaikinNotification extends lit.LitElement {
       status: this.status
     })}
           >
-            <span
-              class=${cvaIcon({
-      status: this.status
-    })}
-            ></span>
+            <daikin-icon
+              icon=${this.status}
+              color="white"
+              size="xl"
+            ></daikin-icon>
           </div>
           <div
             class="flex justify-between items-center gap-5 p-5 flex-[1_0_auto]"
@@ -153,9 +129,15 @@ exports.DaikinNotification = class DaikinNotification extends lit.LitElement {
                   <div class="flex items-center gap-5">
                     <button
                       aria-label="Close"
-                      class="relative flex w-5 h-5 text-daikinNeutral-500 i-daikin-notification-close"
-                      @click=${() => this._handleClickClose()}
-                    ></button>
+                      class="relative flex w-5 h-5"
+                      @click=${this._handleClickClose}
+                    >
+                      <daikin-icon
+                        icon="close"
+                        size="l"
+                        color="default"
+                      ></daikin-icon>
+                    </button>
                   </div>
                 ` : null}
           </div>

package/dist/cjs/components/notification/daikin-notification.d.ts

@@ -1,22 +1,35 @@
 import { LitElement } from 'lit';
 import { MergeVariantProps } from '../../type-utils';
-
 declare const cvaContainer: (props?: ({
     variant?: "toast" | "inline" | null | undefined;
-    status?: "positive" | "negative" | "warning" | "alarm" | "information" | null | undefined;
+    status?: "alarm" | "information" | "negative" | "positive" | "warning" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const cvaIconContainer: (props?: ({
-    status?: "positive" | "negative" | "warning" | "alarm" | "information" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare const cvaIcon: (props?: ({
-    status?: "positive" | "negative" | "warning" | "alarm" | "information" | null | undefined;
+    status?: "alarm" | "information" | "negative" | "positive" | "warning" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const cvaContent: (props?: ({
     line?: "single" | "multi" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type NotificationVariantProps = MergeVariantProps<typeof cvaContainer | typeof cvaIconContainer | typeof cvaIcon | typeof cvaContent>;
+type NotificationVariantProps = MergeVariantProps<typeof cvaContainer | typeof cvaIconContainer | typeof cvaContent>;
 /**
- * Primary UI component for user interaction
+ * The notification component is a UI element used to inform users about important updates, alerts, or messages within an application.
+ *
+ * There are two variants of notification components: `toast` and `inline`.
+ *
+ * Toast notifications are brief messages that should appear temporarily at the edge of the screen, typically in the bottom or top corner.
+ * Toast notifications are ideal for conveying transient information that does not require user interaction, such as success messages, warnings, or alerts. \
+ * Please note that **currently we don't support automatic placement or stacking of toast notifications**.
+ *
+ * Inline notifications appear within the content of the application, usually embedded directly within a page or section.
+ * Inline notifications are more persistent 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.
+ *
+ * @example
+ *
+ * ```html
+ * </daikin-notification title="Notification title" description="Notification description."></daikin-notification>
+ * ```
  */
 export declare class DaikinNotification extends LitElement {
     static readonly styles: import('lit').CSSResult;

package/dist/cjs/components/notification/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinNotification = require("./daikin-notification.cjs");
+Object.defineProperty(exports, "DaikinNotification", {
+  enumerable: true,
+  get: () => daikinNotification.DaikinNotification
+});

package/dist/cjs/components/panel-switcher/daikin-panel-switcher.cjs

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const repeat_js = require("lit/directives/repeat.js");
+const tailwind = require("../../tailwind.css.cjs");
+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;
+};
+exports.DaikinPanelSwitcher = class DaikinPanelSwitcher extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.panels = [];
+    this.panelRole = null;
+  }
+  render() {
+    return repeat_js.repeat(
+      this.panels,
+      (value) => lit.html`<div
+          class=${this.value === value ? "contents" : "hidden"}
+          role=${// HACK: Workaround lit-analyzer not recognizing `nothing` (runem/lit-analyzer#207).
+      this.panelRole ?? lit.nothing}
+          ?hidden=${this.value !== value}
+        >
+          <slot name=${`panel:${value}`}></slot>
+        </div>`
+    );
+  }
+};
+exports.DaikinPanelSwitcher.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinPanelSwitcher.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({
+    type: Array,
+    hasChanged: (newValue, oldValue) => JSON.stringify(newValue) !== JSON.stringify(oldValue)
+  })
+], exports.DaikinPanelSwitcher.prototype, "panels", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "panel-role" })
+], exports.DaikinPanelSwitcher.prototype, "panelRole", 2);
+exports.DaikinPanelSwitcher = __decorateClass([
+  decorators_js.customElement("daikin-panel-switcher")
+], exports.DaikinPanelSwitcher);

package/dist/cjs/components/panel-switcher/daikin-panel-switcher.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+import { ARIARole } from '../../lit-analyzer-types';
+/**
+ * The panel switcher component is a child element within the `daikin-tab-group` that controls the display of the content panels associated with each tab.
+ * When a user selects a tab, the panel switcher component ensures the corresponding content panel is shown while hiding the others.
+ *
+ * Hierarchy:
+ * - `daikin-tab-group` > `daikin-panel-switcher` ("panels" slot)
+ *
+ * @slot panel:\<name\> - A slot for each panel content.
+ *
+ * @example
+ *
+ * ```html
+ * <!-- Note that `panels` must be set via property. -->
+ * <daikin-panel-switcher
+ *   class="block w-full h-full"
+ *   .panels="${['foo', 'bar', 'baz']}"
+ *   value="foo"
+ *   panelRole="tabpanel"
+ * >
+ *   <div slot="panel:foo">Foo Panel (visible)</div>
+ *   <div slot="panel:bar">Bar Panel (hidden)</div>
+ *   <div slot="panel:baz">Baz Panel (hidden)</div>
+ * </daikin-panel-switcher>
+ * ```
+ */
+export declare class DaikinPanelSwitcher extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * The panel to be displayed.
+     * Set automatically by `daikin-tab-group` if used within it.
+     */
+    value: string;
+    /**
+     * Set automatically by `daikin-tab-group` if used within it.
+     */
+    panels: string[];
+    /**
+     * `role` attribute of the container.
+     * Set to "tablist" automatically by `daikin-tab-group` if used within it.
+     */
+    panelRole: ARIARole | null;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-panel-switcher": DaikinPanelSwitcher;
+    }
+}

package/dist/cjs/components/panel-switcher/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinPanelSwitcher = require("./daikin-panel-switcher.cjs");
+Object.defineProperty(exports, "DaikinPanelSwitcher", {
+  enumerable: true,
+  get: () => daikinPanelSwitcher.DaikinPanelSwitcher
+});

package/dist/cjs/components/panel-switcher/index.d.ts

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

package/dist/cjs/components/progress-bar/daikin-progress-bar.cjs

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const variables_js = require("@daikin-oss/dds-tokens/js/daikin/Light/variables.js");
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const tailwind = require("../../tailwind.css.cjs");
+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 cvaBar = classVarianceAuthority.cva(
+  [
+    "w-full",
+    "h-1",
+    "bg-daikinNeutral-200",
+    "overflow-hidden",
+    "relative",
+    "after:block",
+    "after:h-full",
+    "after:absolute",
+    "after:left-0"
+  ],
+  {
+    variants: {
+      variant: {
+        inprogress: ["after:w-[--bar-width]", "after:bg-daikinBlue-500"],
+        completed: ["after:w-full", "after:bg-[--colorFeedbackPositive]"],
+        indeterminate: [
+          "after:w-1/2",
+          "after:bg-daikinBlue-500",
+          "after:animate-[progress-bar-indeterminate_1200ms_linear_infinite]"
+        ],
+        error: ["after:w-full", "after:bg-[--colorFeedbackNegative]"]
+      }
+    }
+  }
+);
+const cvaIcon = classVarianceAuthority.cva(["size-4"], {
+  variants: {
+    variant: {
+      inprogress: ["none"],
+      completed: ["i-daikin-status-positive"],
+      indeterminate: [],
+      error: ["i-daikin-status-negative"]
+    }
+  }
+});
+const cvaHelper = classVarianceAuthority.cva(["text-xs", "mt-2"], {
+  variants: {
+    variant: {
+      inprogress: [],
+      completed: [],
+      indeterminate: [],
+      error: ["text-[--colorFeedbackNegative]"]
+    }
+  }
+});
+exports.DaikinProgressBar = class DaikinProgressBar extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = 0;
+    this.variant = "inprogress";
+    this.max = 100;
+    this.helper = "";
+  }
+  // Validate the 'value' and 'max' properties to ensure they are valid
+  _validateProperties() {
+    if (typeof this.value !== "number" || this.value < 0) {
+      this.value = 0;
+    }
+    if (typeof this.max !== "number" || this.max <= 0) {
+      this.max = 100;
+    }
+    if (this.value > this.max) {
+      this.value = this.max;
+    }
+  }
+  render() {
+    const progressRatio = Math.min(Math.max(this.value / this.max, 0), 1);
+    return lit.html`<div class="flex flex-col w-full font-daikinSerif">
+      <div class="flex justify-between items-center mb-2.5">
+        <span class="text-sm leading-[22px] font-medium"><slot></slot></span>
+        <span class=${cvaIcon({ variant: this.variant })}></span>
+      </div>
+      <div
+        class=${cvaBar({ variant: this.variant })}
+        role="progressbar"
+        aria-label=${this.textContent ?? ""}
+        aria-valuenow=${this.value}
+        aria-valuemin="0"
+        aria-valuemax=${this.max}
+        style=${`--bar-width:${progressRatio * 100}%`}
+      ></div>
+      ${this.helper ? lit.html`<span class=${cvaHelper({ variant: this.variant })}
+            >${this.helper}</span
+          >` : null}
+    </div>`;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("value") || changedProperties.has("max")) {
+      this._validateProperties();
+    }
+  }
+};
+exports.DaikinProgressBar.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      --colorFeedbackPositive: ${lit.unsafeCSS(variables_js.colorFeedbackPositive)};
+      --colorFeedbackNegative: ${lit.unsafeCSS(variables_js.colorFeedbackNegative)};
+
+      display: block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: Number })
+], exports.DaikinProgressBar.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinProgressBar.prototype, "variant", 2);
+__decorateClass([
+  decorators_js.property({ type: Number })
+], exports.DaikinProgressBar.prototype, "max", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinProgressBar.prototype, "helper", 2);
+exports.DaikinProgressBar = __decorateClass([
+  decorators_js.customElement("daikin-progress-bar")
+], exports.DaikinProgressBar);

package/dist/cjs/components/progress-bar/daikin-progress-bar.d.ts

@@ -0,0 +1,47 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * The progress bar component is used to visually convey the progress to the user.
+ *
+ * There are four variants of the progress bar:
+ *
+ * - "inprogress": The default variant. Use this when you know the exact progress. The length of the bar is the ratio of `value` to `max`.
+ * - "indeterminate": Use this variant when you don't know the exact progress. In this variant, the `value` is ignored and the bar always animates from left to right with a constant length.
+ * - "completed": In addition to "inprogress", a completed icon is added. In this variant, the `value` is ignored and the bar always expands to the full width.
+ * - "error": In addition to "inprogress", an error icon is added and the color becomes red. In this variant, the `value` is ignored and the bar always expands to the full width.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-progress-bar value="40" helper="Progress bar helper">
+ *   Progress bar label
+ * </daikin-progress-bar>
+ * ```
+ */
+export declare class DaikinProgressBar extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Value of the progress bar
+     */
+    value: number;
+    /**
+     * Variant of the progress bar
+     */
+    variant: "inprogress" | "completed" | "indeterminate" | "error";
+    /**
+     * The max value of the progress bar
+     */
+    max: number;
+    /**
+     * Helper text
+     */
+    helper: string;
+    private _validateProperties;
+    render(): import('lit-html').TemplateResult<1>;
+    protected updated(changedProperties: PropertyValues): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-progress-bar": DaikinProgressBar;
+    }
+}
+export default DaikinProgressBar;

package/dist/cjs/components/progress-bar/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinProgressBar = require("./daikin-progress-bar.cjs");
+Object.defineProperty(exports, "DaikinProgressBar", {
+  enumerable: true,
+  get: () => daikinProgressBar.DaikinProgressBar
+});

package/dist/cjs/components/progress-bar/index.d.ts

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

package/dist/cjs/components/radio/daikin-radio.d.ts

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import { MergeVariantProps } from '../../type-utils';
-
 declare const cvaRadio: (props?: ({
     size?: "small" | "large" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -9,7 +8,17 @@ declare const cvaLabel: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type RadioVariantProps = MergeVariantProps<typeof cvaRadio | typeof cvaLabel>;
 /**
- * Primary UI component for user interaction
+ * The radio button component is a UI element that allows users to select one options from a set of choices.
+ * It functions similarly to the HTML `<input type="radio">` tag. \
+ * Please note that **a radio group component is not yet available**, so you'll need to manually group radio buttons when using multiple instances.
+ *
+ * @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="radio">` element.
+ *
+ * @example
+ *
+ * ```html
+ *  <daikin-radio name="name" value="value" label="Radio button label"></daikin-radio>
+ * ```
  */
 export declare class DaikinRadio extends LitElement {
     static readonly styles: import('lit').CSSResult;

package/dist/cjs/components/radio/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinRadio = require("./daikin-radio.cjs");
+Object.defineProperty(exports, "DaikinRadio", {
+  enumerable: true,
+  get: () => daikinRadio.DaikinRadio
+});