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

package/dist/es/components/index.js

@@ -4,18 +4,29 @@ import { DaikinBreadcrumb } from "./breadcrumb/daikin-breadcrumb.js";
 import { DaikinBreadcrumbItem } from "./breadcrumb-item/daikin-breadcrumb-item.js";
 import { DaikinButton } from "./button/daikin-button.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 { 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";
+import { DaikinProgressIndicatorItem } from "./progress-indicator-item/daikin-progress-indicator-item.js";
 import { DaikinRadio } from "./radio/daikin-radio.js";
+import { DaikinSelect } from "./select/daikin-select.js";
 import { DaikinTab } from "./tab/daikin-tab.js";
 import { DaikinTabPanels } from "./tab-panels/daikin-tab-panels.js";
+import { DaikinTable } from "./table/daikin-table.js";
+import { DaikinTableCell } from "./table-cell/daikin-table-cell.js";
+import { DaikinTableHeaderCell } from "./table-header-cell/daikin-table-header-cell.js";
 import { DaikinTabs } from "./tabs/daikin-tabs.js";
-import { DaikinTextInput } from "./text-input/daikin-text-input.js";
-import { DaikinTextarea } from "./textarea/daikin-textarea.js";
+import { DaikinTextArea } from "./text-area/daikin-text-area.js";
+import { DaikinTextField } from "./text-field/daikin-text-field.js";
 import { DaikinToggle } from "./toggle/daikin-toggle.js";
 import { DaikinTooltip } from "./tooltip/daikin-tooltip.js";
 export {
@@ -25,18 +36,29 @@ export {
   DaikinBreadcrumbItem,
   DaikinButton,
   DaikinCheckbox,
+  DaikinDropdown,
+  DaikinDropdownItem,
   DaikinIcon,
+  DaikinIconButton,
   DaikinInputGroup,
+  DaikinLink,
   DaikinList,
   DaikinListItem,
   DaikinNotification,
+  DaikinPagination,
   DaikinProgressBar,
+  DaikinProgressIndicator,
+  DaikinProgressIndicatorItem,
   DaikinRadio,
+  DaikinSelect,
   DaikinTab,
   DaikinTabPanels,
+  DaikinTable,
+  DaikinTableCell,
+  DaikinTableHeaderCell,
   DaikinTabs,
-  DaikinTextInput,
-  DaikinTextarea,
+  DaikinTextArea,
+  DaikinTextField,
   DaikinToggle,
   DaikinTooltip,
   iconList

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

@@ -1,71 +1,124 @@
 import { LitElement } from 'lit';
-import { DaikinTextInput } from '../text-input/daikin-text-input';
-import { DaikinTextarea } from '../textarea/daikin-textarea';
-type ControlElement = DaikinTextInput | DaikinTextarea;
 /**
- * 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.
+ * 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.
  * 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`
+ * - `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`
  *
- * @slot - A slot for a input component. Place a `daikin-text-input` or `daikin-textarea` element here.
+ * @slot - A slot for an input component. See **Hierarchies** for supported components.
  *
  * @example
  *
  * ```js
  * import "@daikin-oss/design-system-web-components/components/input-group/index.js";
- * import "@daikin-oss/design-system-web-components/components/text-input/index.js";
- * import "@daikin-oss/design-system-web-components/components/textarea/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";
  * ```
  *
- * With Text Input:
+ * With Dropdown:
  *
  * ```html
  * <daikin-input-group>
- *   <daikin-text-input value="Content of Text Input"></daikin-text-input>
+ *   <daikin-dropdown value="Value of Dropdown">
+ *     <daikin-dropdown-item value="Value of Dropdown Item">
+ *       Dropdown item 1
+ *     </daikin-dropdown-item>
+ *   </daikin-dropdown>
  * </daikin-input-group>
  * ```
  *
- * With Textarea:
+ * With Radio Group:
  *
  * ```html
  * <daikin-input-group>
- *   <daikin-textarea value="Content of Textarea"></daikin-textarea>
+ *   <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
+ * <daikin-input-group>
+ *   <daikin-select>
+ *     <select name="select">
+ *       <option value="value1">Option 1</option>
+ *       <option value="value2">Option 2</option>
+ *       <option value="value3">Option 3</option>
+ *     </select>
+ *   </daikin-select>
+ * </daikin-input-group>
+ * ```
+ *
+ * With Text Field:
+ *
+ * ```html
+ * <daikin-input-group>
+ *   <daikin-text-field value="Content of Text Field"></daikin-text-field>
+ * </daikin-input-group>
+ * ```
+ *
+ * With TextArea:
+ *
+ * ```html
+ * <daikin-input-group>
+ *   <daikin-text-area value="Content of TextArea"></daikin-text-area>
+ * </daikin-input-group>
+ * ```
+ * ```
  */
 export declare class DaikinInputGroup extends LitElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Label text to place at the top of the field
+     * Label text displayed at the top of the field.
      */
-    label?: string;
+    label: string | null;
     /**
-     * Helper text to place at the bottom of the field. In error conditions, this text is hidden.
+     * Helper text displayed at the top of the field.
+     * If `error` is specified and `disabled` is `false`, that takes precedence and helper text is not displayed.
      */
-    helper?: string;
+    helper: string | null;
     /**
-     * Whether the field is disabled. Reflected in the `disabled` property of the input in the slot.
+     * Text indicating that the field is required.
+     * If a non-empty string is set,
+     * - the text will be displayed in red to the right of the label, and
+     * - the `required` attribute will be set for the input control in the slot.
+     * Ignored if `disabled` is `true`.
      */
-    disabled: boolean;
+    required: string | null;
     /**
-     * Whether the field is required. An additional star mark will be added if `true`.
+     * Error text displayed at the top of the field.
+     * Ignored if `disabled` is `true`.
+     * Reflected in presence of `error` attribute of the input control in the slot.
      */
-    required: boolean;
+    error: string | null;
     /**
-     * Error text to place at the bottom of the field. If specified, sets the `error` property of the element in the slot to `true`. Ignored if the `disabled` is `true`.
+     * Whether the field is disabled.
+     * Reflected in `disabled` attribute of the input control in the slot.
      */
-    error: string;
+    disabled: boolean;
     /**
-     * Whether to display the counter in the Textarea
+     * Maximum value to display on the counter. When `null`, the counter will be hidden.
      */
-    textareaCounter: boolean;
-    _textareas: DaikinTextarea[];
-    _controls: ControlElement[];
+    textareaMaxCount: number | null;
+    private readonly _textareas;
+    private readonly _controls;
+    private _textareaCount;
     private _handleSlotChange;
+    private _handleInput;
     private _reflectSlotProperties;
     render(): import('lit-html').TemplateResult<1>;
     updated(): void;

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

@@ -1,7 +1,7 @@
 import { colorFeedbackNegative } 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, queryAssignedElements, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, LitElement, html, nothing } from "lit";
+import { property, queryAssignedElements, state, customElement } from "lit/decorators.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,64 +13,116 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaLabel = cva(["text-base", "font-bold"], {
+const cvaLabel = cva(["flex", "items-center", "font-bold", "leading-5"], {
   variants: {
-    variant: {
-      enabled: ["text-daikinNeutral-800"],
-      disabled: ["text-daikinNeutral-200"]
-    },
-    required: {
-      optional: [],
-      required: ["after:content-['*']", "after:ml-[2px]"]
+    disabled: {
+      false: [],
+      true: ["text-system-state-disabled"]
     }
   }
 });
-const cvaHelper = cva(["h-[22px]", "text-xs"], {
+const cvaHelper = cva(
+  ["flex", "gap-1", "items-center", "leading-5", "text-sm"],
+  {
+    variants: {
+      type: {
+        helper: [],
+        helperDisabled: ["text-system-state-disabled"],
+        error: [
+          "text-system-state-error-active",
+          "font-bold",
+          "before:size-4",
+          "before:i-daikin-status-error"
+        ],
+        none: ["hidden"]
+      }
+    }
+  }
+);
+const cvaCounter = cva(["text-sm", "font-bold"], {
+  variants: {
+    disabled: {
+      false: ["text-system-element-text-secondary"],
+      true: ["text-system-state-disabled"]
+    }
+  }
+});
+const cvaCounterValueLength = cva([], {
   variants: {
-    variant: {
-      enabled: ["text-daikinNeutral-800"],
-      disabled: ["text-daikinNeutral-200"]
+    error: {
+      false: [],
+      true: ["text-system-state-error-active"]
     }
   }
 });
 let DaikinInputGroup = class extends LitElement {
   constructor() {
     super(...arguments);
+    this.label = null;
+    this.helper = null;
+    this.required = null;
+    this.error = null;
     this.disabled = false;
-    this.required = false;
-    this.error = "";
-    this.textareaCounter = false;
+    this.textareaMaxCount = null;
+    this._textareaCount = null;
   }
   _handleSlotChange() {
     this._reflectSlotProperties();
+    const textarea = this._textareas[0];
+    this._textareaCount = (textarea == null ? void 0 : textarea.count) ?? null;
+  }
+  _handleInput(event) {
+    if (event.target.tagName === "DAIKIN-TEXT-AREA") {
+      this._textareaCount = event.target.count;
+    }
   }
   _reflectSlotProperties() {
-    const isError = !this.disabled && !!this.error;
     for (const control of this._controls) {
-      control.disabled = !!this.disabled;
-      control.error = isError;
-    }
-    for (const item of this._textareas) {
-      item.counter = this.textareaCounter;
+      control.reflectInputGroup(this);
     }
   }
   render() {
-    const inputGroupLabelClassName = cvaLabel({
-      variant: this.disabled ? "disabled" : "enabled",
-      required: this.required ? "required" : "optional"
-    });
-    const inputGroupHelperClassName = cvaHelper({
-      variant: this.disabled ? "disabled" : "enabled"
-    });
+    const helperType = this.error && !this.disabled ? "error" : this.helper ? this.disabled ? "helperDisabled" : "helper" : "none";
+    const helperText = {
+      error: this.error,
+      helper: this.helper,
+      helperDisabled: this.helper,
+      none: ""
+    }[helperType];
     return html`<fieldset class="content" ?disabled=${this.disabled}>
-      <label class="flex flex-col justify-center w-max gap-1 font-daikinSerif">
-        ${this.label ? html`<span class=${inputGroupLabelClassName}>${this.label}</span>` : null}
-        <slot @slotchange=${this._handleSlotChange}></slot>
-        ${this.helper && !this.error ? html`<span class=${inputGroupHelperClassName}>${this.helper}</span>` : null}
-        ${!this.disabled && !!this.error ? html`<span
-              class="flex gap-2 text-[--input-group-border-color-error] leading-[22px] before:i-daikin-status-error before:block before:w-[16px] before:h-[22px]"
-              >${this.error}</span
-            >` : null}
+      <label
+        class="flex flex-col justify-center gap-2 w-full text-system-element-text-primary font-daikinSerif"
+      >
+        <div class="flex justify-between items-center gap-2">
+          <div class="flex items-center gap-1 font-bold">
+            ${this.label ? html`<span class=${cvaLabel({ disabled: this.disabled })}>
+                  ${this.label}
+                </span>` : nothing}
+            ${this.required && !this.disabled ? html`<span class="text-system-state-error-active text-xs">
+                  ${this.required}
+                </span>` : nothing}
+          </div>
+          ${this.textareaMaxCount != null && this._textareaCount != null ? html`
+                <span class=${cvaCounter({ disabled: this.disabled })}>
+                  <span
+                    class=${cvaCounterValueLength({
+      error: this.textareaMaxCount < this._textareaCount
+    })}
+                    >${this._textareaCount}</span
+                  ><span>/</span><span>${this.textareaMaxCount}</span>
+                </span>
+              ` : nothing}
+        </div>
+        <span
+          class=${cvaHelper({ type: helperType })}
+          aria-live=${helperType === "error" ? "polite" : "off"}
+        >
+          ${helperText}
+        </span>
+        <slot
+          @slotchange=${this._handleSlotChange}
+          @input=${this._handleInput}
+        ></slot>
       </label>
     </fieldset>`;
   }
@@ -85,33 +137,38 @@ DaikinInputGroup.styles = css`
       --input-group-border-color-error: ${unsafeCSS(colorFeedbackNegative)};
 
       display: block;
-      width: max-content;
+      width: 100%;
     }
   `;
 __decorateClass([
-  property({ type: String })
+  property({ type: String, reflect: true })
 ], DaikinInputGroup.prototype, "label", 2);
 __decorateClass([
-  property({ type: String })
+  property({ type: String, reflect: true })
 ], DaikinInputGroup.prototype, "helper", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinInputGroup.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
+  property({ type: String, reflect: true })
 ], DaikinInputGroup.prototype, "required", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinInputGroup.prototype, "error", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], DaikinInputGroup.prototype, "textareaCounter", 2);
+], DaikinInputGroup.prototype, "disabled", 2);
 __decorateClass([
-  queryAssignedElements({ selector: "daikin-textarea" })
+  property({ type: Number, reflect: true, attribute: "textarea-max-count" })
+], DaikinInputGroup.prototype, "textareaMaxCount", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "daikin-text-area" })
 ], DaikinInputGroup.prototype, "_textareas", 2);
 __decorateClass([
-  queryAssignedElements({ selector: "daikin-text-input,daikin-textarea" })
+  queryAssignedElements({
+    selector: "daikin-dropdown,daikin-radio-group,daikin-select,daikin-text-field,daikin-text-area"
+  })
 ], DaikinInputGroup.prototype, "_controls", 2);
+__decorateClass([
+  state()
+], DaikinInputGroup.prototype, "_textareaCount", 2);
 DaikinInputGroup = __decorateClass([
   customElement("daikin-input-group")
 ], DaikinInputGroup);

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

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

package/dist/es/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/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/components/link/index.d.ts

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

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

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

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

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