@daikin-oss/design-system-web-components 2.0.0 → 2.0.1-next.1

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

@@ -1,124 +1,66 @@
-import { cva } from "class-variance-authority";
-import { unsafeCSS, css, nothing, html } from "lit";
-import { query } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 import { DDSElement } from "../../base/dds-element.js";
-import "../../base/dds-form-element.js";
-import { property, oneOf } from "../../base/dds-property.js";
+import { oneOf, property as property$1 } from "../../base/dds-property.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { ddsElement } from "../../base/decorators.js";
-import "../../base/define.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 cvaWrapper = cva(
-  [
-    "flex",
-    "items-center",
-    "justify-between",
-    "rounded",
-    "overflow-hidden",
-    "size-full",
-    "gap-1",
-    "bg-(--bg-color-base)"
-  ],
-  {
-    variants: {
-      elevated: {
-        true: [
-          "shadow-[0px_1px_2px_1px_var(--dds-color-common-background-overlay)]"
-        ],
-        false: []
-      }
-    }
-  }
-);
-const cvaRemoveButton = cva([
-  "mr-1",
-  "flex-none",
-  "relative",
-  "w-6",
-  "h-6",
-  "flex",
-  "items-center",
-  "justify-center",
-  "rounded-full",
-  "overflow-hidden",
-  "focus-visible:outline",
-  "focus-visible:outline-2",
-  "after:absolute",
-  "after:bg-transparent",
-  "after:size-6",
-  "after:top-1/2",
-  "after:left-1/2",
-  "after:-translate-x-1/2",
-  "after:-translate-y-1/2",
-  "after:rounded-full",
-  "focus-visible:outline-ddt-color-common-border-focus",
-  "enabled:[--color-primary:var(--dds-color-common-text-primary)]",
-  "enabled:hover:[--color-secondary:var(--dds-color-common-surface-neutral-overlay-hover)]",
-  "enabled:active:[--color-secondary:var(--dds-color-common-surface-neutral-overlay-press)]",
-  "text-(--color-primary)",
-  "bg-(--color-secondary)"
+import "../../base/index.js";
+import tailwind_default from "../../tailwind.css.js";
+import { css, html, nothing, unsafeCSS } from "lit";
+import { query } from "lit/decorators.js";
+import { cva } from "class-variance-authority";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/tag/daikin-tag.ts
+var cvaWrapper = cva([
+	"flex",
+	"items-center",
+	"justify-between",
+	"rounded",
+	"overflow-hidden",
+	"size-full",
+	"gap-1",
+	"bg-(--bg-color-base)"
+], { variants: { elevated: {
+	true: ["shadow-[0px_1px_2px_1px_var(--dds-color-common-background-overlay)]"],
+	false: []
+} } });
+var cvaRemoveButton = cva([
+	"mr-1",
+	"flex-none",
+	"relative",
+	"w-6",
+	"h-6",
+	"flex",
+	"items-center",
+	"justify-center",
+	"rounded-full",
+	"overflow-hidden",
+	"focus-visible:outline",
+	"focus-visible:outline-2",
+	"after:absolute",
+	"after:bg-transparent",
+	"after:size-6",
+	"after:top-1/2",
+	"after:left-1/2",
+	"after:-translate-x-1/2",
+	"after:-translate-y-1/2",
+	"after:rounded-full",
+	"focus-visible:outline-ddt-color-common-border-focus",
+	"enabled:[--color-primary:var(--dds-color-common-text-primary)]",
+	"enabled:hover:[--color-secondary:var(--dds-color-common-surface-neutral-overlay-hover)]",
+	"enabled:active:[--color-secondary:var(--dds-color-common-surface-neutral-overlay-press)]",
+	"text-(--color-primary)",
+	"bg-(--color-secondary)"
 ]);
-let DaikinTag = class extends DDSElement {
-  constructor() {
-    super(...arguments);
-    this.hideRemoveButton = false;
-    this.tagAriaLabel = null;
-    this.elevated = false;
-    this.removeButtonAriaLabel = null;
-  }
-  _handleRemoveClick(event) {
-    event.stopPropagation();
-    this.dispatchEvent(new Event("remove", { bubbles: true, composed: true }));
-  }
-  render() {
-    return html`
-      <div
-        part="tag"
-        role="group"
-        aria-label=${ifDefined(this.tagAriaLabel ?? void 0)}
-        class=${cvaWrapper({ elevated: this.elevated })}
-      >
-        <span
-          class="text-ddt-color-common-text-primary p-2 text-(length:--dds-font-size-350) natural-break"
-        >
-          <slot></slot>
-        </span>
-        ${this.hideRemoveButton ? nothing : html`
-              <button
-                type="button"
-                class=${cvaRemoveButton()}
-                aria-label=${ifDefined(this.removeButtonAriaLabel ?? "Remove")}
-                @click=${this._handleRemoveClick}
-              >
-                <span
-                  class="icon-[daikin--close] text-(--color-primary) size-6 flex-none"
-                ></span>
-              </button>
-            `}
-      </div>
-    `;
-  }
-  /**
-   * Focuses on the inner remove button
-   * @param options focus options
-   */
-  focus(options) {
-    var _a;
-    (_a = this._focusableElement) == null ? void 0 : _a.focus(options);
-  }
-};
-DaikinTag.styles = css`
-    ${unsafeCSS(tailwindStyles)}
+var DaikinTag = class DaikinTag extends DDSElement {
+	constructor(..._args) {
+		super(..._args);
+		this.hideRemoveButton = false;
+		this.tagAriaLabel = null;
+		this.elevated = false;
+		this.removeButtonAriaLabel = null;
+	}
+	static {
+		this.styles = css`
+    ${unsafeCSS(tailwind_default)}
 
     :host {
       display: block;
@@ -171,36 +113,84 @@ DaikinTag.styles = css`
       --bg-color-base: var(--dds-color-common-accent-lv2-elevated-purple);
     }
   `;
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "hide-remove-button" })
-], DaikinTag.prototype, "hideRemoveButton", 2);
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "tag-aria-label" })
-], DaikinTag.prototype, "tagAriaLabel", 2);
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    fallbackValue: "gray",
-    isAllowedValue: oneOf(["gray", "red", "blue", "yellow", "green", "orange", "purple"])
-  })
-], DaikinTag.prototype, "color", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinTag.prototype, "elevated", 2);
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    attribute: "remove-button-aria-label"
-  })
-], DaikinTag.prototype, "removeButtonAriaLabel", 2);
-__decorateClass([
-  query("button")
-], DaikinTag.prototype, "_focusableElement", 2);
-DaikinTag = __decorateClass([
-  ddsElement("daikin-tag")
-], DaikinTag);
-export {
-  DaikinTag
+	}
+	_handleRemoveClick(event) {
+		event.stopPropagation();
+		this.dispatchEvent(new Event("remove", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		return html`
+      <div
+        part="tag"
+        role="group"
+        aria-label=${ifDefined(this.tagAriaLabel ?? void 0)}
+        class=${cvaWrapper({ elevated: this.elevated })}
+      >
+        <span
+          class="text-ddt-color-common-text-primary p-2 text-(length:--dds-font-size-350) natural-break"
+        >
+          <slot></slot>
+        </span>
+        ${this.hideRemoveButton ? nothing : html`
+              <button
+                type="button"
+                class=${cvaRemoveButton()}
+                aria-label=${ifDefined(this.removeButtonAriaLabel ?? "Remove")}
+                @click=${this._handleRemoveClick}
+              >
+                <span
+                  class="icon-[daikin--close] text-(--color-primary) size-6 flex-none"
+                ></span>
+              </button>
+            `}
+      </div>
+    `;
+	}
+	/**
+	* Focuses on the inner remove button
+	* @param options focus options
+	*/
+	focus(options) {
+		this._focusableElement?.focus(options);
+	}
 };
+__decorate([property$1({
+	type: Boolean,
+	reflect: true,
+	attribute: "hide-remove-button"
+})], DaikinTag.prototype, "hideRemoveButton", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	attribute: "tag-aria-label"
+})], DaikinTag.prototype, "tagAriaLabel", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	fallbackValue: "gray",
+	isAllowedValue: oneOf([
+		"gray",
+		"red",
+		"blue",
+		"yellow",
+		"green",
+		"orange",
+		"purple"
+	])
+})], DaikinTag.prototype, "color", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinTag.prototype, "elevated", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	attribute: "remove-button-aria-label"
+})], DaikinTag.prototype, "removeButtonAriaLabel", void 0);
+__decorate([query("button")], DaikinTag.prototype, "_focusableElement", void 0);
+DaikinTag = __decorate([ddsElement("daikin-tag")], DaikinTag);
+//#endregion
+export { DaikinTag };

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

@@ -1,4 +1,2 @@
 import { DaikinTag } from "./daikin-tag.js";
-export {
-  DaikinTag
-};
+export { DaikinTag };

package/dist/es/components/text-area/daikin-text-area.js

@@ -1,145 +1,69 @@
-import { cva } from "class-variance-authority";
-import { unsafeCSS, css, html } from "lit";
-import { state } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { createRef, ref } from "lit/directives/ref.js";
-import "../../base/dds-element.js";
+import { property as property$1 } from "../../base/dds-property.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { DDSFormElement } from "../../base/dds-form-element.js";
-import { property } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
-import "../../base/define.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 cvaTextArea = cva(
-  [
-    "block",
-    "w-full",
-    "box-border",
-    "bg-ddt-color-common-background-default",
-    "px-4",
-    "py-3",
-    "rounded-sm",
-    "outline-solid",
-    "outline-(--color-border)",
-    "outline-1",
-    "-outline-offset-1",
-    "placeholder:text-ddt-color-common-text-secondary",
-    // Define `--color-border` as a CSS variable that references `--color-state-focus` and `--color-base` in that order.
-    // `--color-base` indicates the color of the border when the element is normal, hovered, or disabled.
-    "[--color-border:var(--color-state-active,var(--color-state-focus,var(--color-base)))]",
-    "border",
-    "border-(--color-border)",
-    "enabled:text-ddt-color-common-text-primary",
-    "enabled:hover:bg-ddt-color-common-surface-hover",
-    "enabled:active:bg-ddt-color-common-surface-press",
-    "focus-visible:outline-2",
-    "focus-visible:-outline-offset-2",
-    // Update `--color-base` depending on the state.
-    // The default `--color-base` and `--color-state-focus` values are defined in `variants.error` because they differ depending on whether or not the input has an error state.
-    "disabled:[--color-base:var(--dds-color-common-disabled)]",
-    "disabled:text-ddt-color-common-disabled",
-    "disabled:bg-color-common-background-default",
-    "disabled:placeholder:text-ddt-color-common-disabled"
-  ],
-  {
-    variants: {
-      error: {
-        false: [
-          "enabled:[--color-base:var(--dds-color-common-neutral-default)]",
-          "enabled:hover:[--color-base:var(--dds-color-common-neutral-hover)]",
-          "enabled:active:[--color-base:var(--dds-color-common-neutral-press)]",
-          "focus-visible:[--color-state-focus:var(--dds-color-common-border-focus)]"
-        ],
-        true: ["enabled:[--color-base:var(--dds-color-common-danger-default)]"]
-      },
-      resize: {
-        false: ["resize-none"],
-        true: ["resize-vertical"]
-      }
-    }
-  }
-);
-let DaikinTextArea = class extends DDSFormElement {
-  constructor() {
-    super(...arguments);
-    this.disabled = false;
-    this.readonly = false;
-    this.required = false;
-    this.error = false;
-    this.resizable = false;
-    this._label = null;
-    this._textareaRef = createRef();
-  }
-  get count() {
-    return this.value.length;
-  }
-  _updateValue(value) {
-    this.setFormValue(value);
-  }
-  _handleInput(e) {
-    this.value = e.target.value;
-    this._updateValue(this.value);
-  }
-  /**
-   * Focuses on the inner textarea.
-   * @param options focus options
-   */
-  focus(options) {
-    var _a;
-    (_a = this._textareaRef.value) == null ? void 0 : _a.focus(options);
-  }
-  render() {
-    return html`<textarea
-      ${ref(this._textareaRef)}
-      class=${cvaTextArea({
-      error: !this.disabled && this.error,
-      resize: this.resizable
-    })}
-      style="height: inherit; min-height: inherit;"
-      name=${ifDefined(this.getBackingProperty("name"))}
-      placeholder=${ifDefined(this.getBackingProperty("placeholder"))}
-      autocomplete=${ifDefined(this.getBackingProperty("autocomplete"))}
-      aria-label=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
-    ifDefined(this._label)}
-      .value=${this.value}
-      ?disabled=${this.disabled}
-      ?readonly=${this.readonly}
-      ?required=${this.required}
-      @change=${(e) => this.dispatchEvent(new Event("change", e))}
-      @input=${this._handleInput}
-      @keydown=${this._handleInput}
-    ></textarea>`;
-  }
-  updated(changedProperties) {
-    if (!changedProperties.has("value")) {
-      return;
-    }
-    this._updateValue(this.value);
-  }
-  /**
-   * This method is used by `daikin-input-group` to reflect it's attributes to this component.
-   * @private
-   */
-  reflectInputGroup(inputGroup) {
-    const isError = !inputGroup.disabled && (!!inputGroup.error || !!inputGroup.textareaLimitExceeded);
-    this.disabled = !!inputGroup.disabled;
-    this.readonly = !!inputGroup.readonly;
-    this.required = !!inputGroup.required;
-    this.error = isError;
-    this._label = inputGroup.label;
-  }
-};
-DaikinTextArea.styles = css`
-    ${unsafeCSS(tailwindStyles)}
+import "../../base/index.js";
+import tailwind_default from "../../tailwind.css.js";
+import { css, html, unsafeCSS } from "lit";
+import { state } from "lit/decorators.js";
+import { cva } from "class-variance-authority";
+import { createRef, ref } from "lit/directives/ref.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/text-area/daikin-text-area.ts
+var cvaTextArea = cva([
+	"block",
+	"w-full",
+	"box-border",
+	"bg-ddt-color-common-background-default",
+	"px-4",
+	"py-3",
+	"rounded-sm",
+	"outline-solid",
+	"outline-(--color-border)",
+	"outline-1",
+	"-outline-offset-1",
+	"placeholder:text-ddt-color-common-text-secondary",
+	"[--color-border:var(--color-state-active,var(--color-state-focus,var(--color-base)))]",
+	"border",
+	"border-(--color-border)",
+	"enabled:text-ddt-color-common-text-primary",
+	"enabled:hover:bg-ddt-color-common-surface-hover",
+	"enabled:active:bg-ddt-color-common-surface-press",
+	"focus-visible:outline-2",
+	"focus-visible:-outline-offset-2",
+	"disabled:[--color-base:var(--dds-color-common-disabled)]",
+	"disabled:text-ddt-color-common-disabled",
+	"disabled:bg-color-common-background-default",
+	"disabled:placeholder:text-ddt-color-common-disabled"
+], { variants: {
+	error: {
+		false: [
+			"enabled:[--color-base:var(--dds-color-common-neutral-default)]",
+			"enabled:hover:[--color-base:var(--dds-color-common-neutral-hover)]",
+			"enabled:active:[--color-base:var(--dds-color-common-neutral-press)]",
+			"focus-visible:[--color-state-focus:var(--dds-color-common-border-focus)]"
+		],
+		true: ["enabled:[--color-base:var(--dds-color-common-danger-default)]"]
+	},
+	resize: {
+		false: ["resize-none"],
+		true: ["resize-vertical"]
+	}
+} });
+var DaikinTextArea = class DaikinTextArea extends DDSFormElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.readonly = false;
+		this.required = false;
+		this.error = false;
+		this.resizable = false;
+		this._label = null;
+		this._textareaRef = createRef();
+	}
+	static {
+		this.styles = css`
+    ${unsafeCSS(tailwind_default)}
 
     :host {
       display: block;
@@ -164,37 +88,93 @@ DaikinTextArea.styles = css`
       --color-base: var(--dds-color-common-danger-default);
     }
   `;
-__decorateClass([
-  property({ type: String, reflect: true, fallbackValue: "" })
-], DaikinTextArea.prototype, "placeholder", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinTextArea.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinTextArea.prototype, "readonly", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinTextArea.prototype, "required", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinTextArea.prototype, "error", 2);
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    fallbackValue: ""
-  })
-], DaikinTextArea.prototype, "autocomplete", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinTextArea.prototype, "resizable", 2);
-__decorateClass([
-  state()
-], DaikinTextArea.prototype, "_label", 2);
-DaikinTextArea = __decorateClass([
-  ddsElement("daikin-text-area")
-], DaikinTextArea);
-export {
-  DaikinTextArea
+	}
+	get count() {
+		return this.value.length;
+	}
+	_updateValue(value) {
+		this.setFormValue(value);
+	}
+	_handleInput(e) {
+		this.value = e.target.value;
+		this._updateValue(this.value);
+	}
+	/**
+	* Focuses on the inner textarea.
+	* @param options focus options
+	*/
+	focus(options) {
+		this._textareaRef.value?.focus(options);
+	}
+	render() {
+		return html`<textarea
+      ${ref(this._textareaRef)}
+      class=${cvaTextArea({
+			error: !this.disabled && this.error,
+			resize: this.resizable
+		})}
+      style="height: inherit; min-height: inherit;"
+      name=${ifDefined(this.getBackingProperty("name"))}
+      placeholder=${ifDefined(this.getBackingProperty("placeholder"))}
+      autocomplete=${ifDefined(this.getBackingProperty("autocomplete"))}
+      aria-label=${ifDefined(this._label)}
+      .value=${this.value}
+      ?disabled=${this.disabled}
+      ?readonly=${this.readonly}
+      ?required=${this.required}
+      @change=${(e) => this.dispatchEvent(new Event("change", e))}
+      @input=${this._handleInput}
+      @keydown=${this._handleInput}
+    ></textarea>`;
+	}
+	updated(changedProperties) {
+		if (!changedProperties.has("value")) return;
+		this._updateValue(this.value);
+	}
+	/**
+	* This method is used by `daikin-input-group` to reflect it's attributes to this component.
+	* @private
+	*/
+	reflectInputGroup(inputGroup) {
+		const isError = !inputGroup.disabled && (!!inputGroup.error || !!inputGroup.textareaLimitExceeded);
+		this.disabled = !!inputGroup.disabled;
+		this.readonly = !!inputGroup.readonly;
+		this.required = !!inputGroup.required;
+		this.error = isError;
+		this._label = inputGroup.label;
+	}
 };
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	fallbackValue: ""
+})], DaikinTextArea.prototype, "placeholder", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinTextArea.prototype, "disabled", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinTextArea.prototype, "readonly", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinTextArea.prototype, "required", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinTextArea.prototype, "error", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	fallbackValue: ""
+})], DaikinTextArea.prototype, "autocomplete", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinTextArea.prototype, "resizable", void 0);
+__decorate([state()], DaikinTextArea.prototype, "_label", void 0);
+DaikinTextArea = __decorate([ddsElement("daikin-text-area")], DaikinTextArea);
+//#endregion
+export { DaikinTextArea };

package/dist/es/components/text-area/index.js

@@ -1,4 +1,2 @@
 import { DaikinTextArea } from "./daikin-text-area.js";
-export {
-  DaikinTextArea
-};
+export { DaikinTextArea };