@daikin-oss/design-system-web-components 2.0.0 → 2.1.0-next.2

package/dist/cjs/components/icon-button/daikin-icon-button.cjs

@@ -1,293 +1,309 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classVarianceAuthority = require("class-variance-authority");
-const lit = require("lit");
-const decorators_js = require("lit/decorators.js");
-const ifDefined_js = require("lit/directives/if-defined.js");
-require("../../base/dds-element.cjs");
-const ddsFormElement = require("../../base/dds-form-element.cjs");
-const ddsProperty = require("../../base/dds-property.cjs");
-const decorators = require("../../base/decorators.cjs");
-require("../../base/define.cjs");
-const tailwind = require("../../tailwind.css.cjs");
+const require_dds_property = require("../../base/dds-property.cjs");
+const require_decorate = require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs");
+const require_dds_form_element = require("../../base/dds-form-element.cjs");
+const require_decorators = require("../../base/decorators.cjs");
+require("../../base/index.cjs");
+const require_tailwind = require("../../tailwind.css.cjs");
 require("../icon/daikin-icon.cjs");
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators2, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators2[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const cvaIconButton = classVarianceAuthority.cva(
-  [
-    "inline-flex",
-    "justify-center",
-    "items-center",
-    "size-full",
-    "font-bold",
-    "rounded-sm",
-    "tracking-wide",
-    "text-nowrap",
-    "focus-visible:outline-solid",
-    "focus-visible:outline-2",
-    "focus-visible:outline-offset-2",
-    "focus-visible:outline-ddt-color-common-border-focus",
-    "[--color-secondary:transparent]",
-    "link-disabled:[--color-primary:var(--dds-color-common-disabled)]"
-  ],
-  {
-    variants: {
-      color: {
-        default: [
-          "link-enabled:[--color-primary:var(--dds-color-common-brand-default)]",
-          "hover:link-enabled:[--color-primary:var(--dds-color-common-brand-hover)]",
-          "hover:link-enabled:[--color-secondary:var(--dds-color-common-surface-brand-hover)]",
-          "active:link-enabled:[--color-primary:var(--dds-color-common-brand-press)]",
-          "active:link-enabled:[--color-secondary:var(--dds-color-common-surface-brand-press)]"
-        ],
-        neutral: [
-          "link-enabled:[--color-primary:var(--dds-color-common-neutral-default)]",
-          "hover:link-enabled:[--color-primary:var(--dds-color-common-neutral-hover)]",
-          "hover:link-enabled:[--color-secondary:var(--dds-color-common-surface-neutral-hover)]",
-          "active:link-enabled:[--color-primary:var(--dds-color-common-neutral-press)]",
-          "active:link-enabled:[--color-secondary:var(--dds-color-common-surface-neutral-press)]"
-        ],
-        danger: [
-          "link-enabled:[--color-primary:var(--dds-color-common-danger-default)]",
-          "hover:link-enabled:[--color-primary:var(--dds-color-common-danger-hover)]",
-          "hover:link-enabled:[--color-secondary:var(--dds-color-common-surface-danger-hover)]",
-          "active:link-enabled:[--color-primary:var(--dds-color-common-danger-press)]",
-          "active:link-enabled:[--color-secondary:var(--dds-color-common-surface-danger-press)]"
-        ]
-      },
-      variant: {
-        fill: ["text-ddt-color-common-text-inverse", "bg-(--color-primary)"],
-        outline: [
-          "border",
-          "text-(--color-primary)",
-          "bg-(--color-secondary)",
-          "border-(--color-primary)"
-        ],
-        ghost: ["text-(--color-primary)", "bg-(--color-secondary)"]
-      },
-      size: {
-        s: [],
-        m: []
-      }
-    },
-    compoundVariants: [
-      {
-        size: "s",
-        variant: "fill",
-        class: "p-1"
-      },
-      {
-        size: "s",
-        variant: "ghost",
-        class: "p-1"
-      },
-      {
-        size: "s",
-        variant: "outline",
-        class: "p-0.75"
-      },
-      {
-        size: "m",
-        variant: "fill",
-        class: "p-2"
-      },
-      {
-        size: "m",
-        variant: "ghost",
-        class: "p-2"
-      },
-      {
-        size: "m",
-        variant: "outline",
-        class: "p-1.75"
-      }
-    ]
-  }
-);
-exports.DaikinIconButton = class DaikinIconButton extends ddsFormElement.DDSFormSubmitElement {
-  constructor() {
-    super();
-    this.disabled = false;
-    this.href = null;
-    this.buttonAriaLabel = null;
-    this.buttonRole = null;
-    this.buttonAriaHaspopup = null;
-    this.buttonAriaExpanded = null;
-    this.size = "s";
-    this.addEventListener("click", (event) => {
-      if (this.disabled) {
-        event.stopImmediatePropagation();
-      }
-      if (this.type === "submit") {
-        this.requestSubmit();
-      } else if (this.type === "reset") {
-        this.reset();
-      }
-    });
-  }
-  /**
-   * _Internal use._
-   * Returns the navigation target information.
-   * Used by navigation handling utilities.
-   *
-   * @returns Navigation target information or `null` if not navigable.
-   *
-   * @private
-   */
-  getDDSNavigationTarget() {
-    if (this.href == null || this.disabled || this.type !== "link") {
-      return null;
+let lit = require("lit");
+let lit_decorators_js = require("lit/decorators.js");
+let class_variance_authority = require("class-variance-authority");
+let lit_directives_if_defined_js = require("lit/directives/if-defined.js");
+//#region src/components/icon-button/daikin-icon-button.ts
+var cvaIconButton = (0, class_variance_authority.cva)([
+	"inline-flex",
+	"justify-center",
+	"items-center",
+	"size-full",
+	"font-bold",
+	"rounded-sm",
+	"tracking-wide",
+	"text-nowrap",
+	"focus-visible:outline-solid",
+	"focus-visible:outline-2",
+	"focus-visible:outline-offset-2",
+	"focus-visible:outline-ddt-color-common-border-focus",
+	"[--color-secondary:transparent]",
+	"link-disabled:[--color-primary:var(--ddc-color-common-disabled)]",
+	"link-disabled:[--color-secondary:var(--ddc-color-common-surface-disabled)]"
+], {
+	variants: {
+		color: {
+			default: [
+				"link-enabled:[--color-primary:var(--dds-color-common-brand-default)]",
+				"link-enabled:[--color-secondary:var(--ddc-color-common-surface-brand-default)]",
+				"hover:link-enabled:[--color-primary:var(--dds-color-common-brand-hover)]",
+				"hover:link-enabled:[--color-secondary:var(--ddc-color-common-surface-brand-hover)]",
+				"active:link-enabled:[--color-primary:var(--dds-color-common-brand-press)]",
+				"active:link-enabled:[--color-secondary:var(--ddc-color-common-surface-brand-press)]"
+			],
+			neutral: [
+				"link-enabled:[--color-primary:var(--dds-color-common-neutral-default)]",
+				"link-enabled:[--color-secondary:var(--ddc-color-common-surface-neutral-default)]",
+				"hover:link-enabled:[--color-primary:var(--dds-color-common-neutral-hover)]",
+				"hover:link-enabled:[--color-secondary:var(--ddc-color-common-surface-neutral-hover)]",
+				"active:link-enabled:[--color-primary:var(--dds-color-common-neutral-press)]",
+				"active:link-enabled:[--color-secondary:var(--ddc-color-common-surface-neutral-press)]"
+			],
+			danger: [
+				"link-enabled:[--color-primary:var(--dds-color-common-danger-default)]",
+				"link-enabled:[--color-secondary:var(--ddc-color-common-surface-danger-default)]",
+				"hover:link-enabled:[--color-primary:var(--dds-color-common-danger-hover)]",
+				"hover:link-enabled:[--color-secondary:var(--ddc-color-common-surface-danger-hover)]",
+				"active:link-enabled:[--color-primary:var(--dds-color-common-danger-press)]",
+				"active:link-enabled:[--color-secondary:var(--ddc-color-common-surface-danger-press)]"
+			]
+		},
+		variant: {
+			fill: ["text-ddt-color-common-text-inverse", "bg-(--color-primary)"],
+			outline: [
+				"border",
+				"text-(--color-primary)",
+				"bg-(--color-secondary)",
+				"border-(--color-primary)"
+			],
+			ghost: ["text-(--color-primary)", "bg-(--color-secondary)"]
+		},
+		size: {
+			s: [],
+			m: []
+		}
+	},
+	compoundVariants: [
+		{
+			size: "s",
+			variant: "fill",
+			class: "p-1"
+		},
+		{
+			size: "s",
+			variant: "ghost",
+			class: "p-1"
+		},
+		{
+			size: "s",
+			variant: "outline",
+			class: "p-0.75"
+		},
+		{
+			size: "m",
+			variant: "fill",
+			class: "p-2"
+		},
+		{
+			size: "m",
+			variant: "ghost",
+			class: "p-2"
+		},
+		{
+			size: "m",
+			variant: "outline",
+			class: "p-1.75"
+		}
+	]
+});
+var DaikinIconButton = class DaikinIconButton extends require_dds_form_element.DDSFormSubmitElement {
+	static {
+		this.styles = lit.css`
+    ${(0, lit.unsafeCSS)(require_tailwind.default)}
+
+    :host {
+      display: inline-block;
+      width: var(--ddc-icon-button-size, 2rem);
+      height: var(--ddc-icon-button-size, 2rem);
+      --ddc-color-common-disabled: var(--dds-color-common-disabled);
+      --ddc-color-common-surface-disabled: transparent;
+    }
+
+    :host([size="s"]) {
+      --ddc-icon-button-size: 2rem; /* 32px */
+    }
+
+    :host([size="m"]) {
+      --ddc-icon-button-size: 3rem; /* 48px */
+    }
+
+    :host(:not([color])),
+    :host([color="default"]) {
+      --ddc-color-common-surface-brand-default: none;
+      --ddc-color-common-surface-brand-hover: var(
+        --dds-color-common-surface-brand-hover
+      );
+      --ddc-color-common-surface-brand-press: var(
+        --dds-color-common-surface-brand-press
+      );
+    }
+    :host([color="neutral"]) {
+      --ddc-color-common-surface-neutral-default: none;
+      --ddc-color-common-surface-neutral-hover: var(
+        --dds-color-common-surface-neutral-hover
+      );
+      --ddc-color-common-surface-neutral-press: var(
+        --dds-color-common-surface-neutral-press
+      );
+    }
+    :host([color="danger"]) {
+      --ddc-color-common-surface-danger-default: none;
+      --ddc-color-common-surface-danger-hover: var(
+        --dds-color-common-surface-danger-hover
+      );
+      --ddc-color-common-surface-danger-press: var(
+        --dds-color-common-surface-danger-press
+      );
     }
-    return {
-      href: this.href,
-      target: null
-    };
-  }
-  render() {
-    const iconButtonCN = cvaIconButton({
-      variant: this.variant,
-      color: this.color,
-      size: this.size
-    });
-    if (this.type === "link") {
-      const linkDisabled = this.disabled || this.href == null;
-      return lit.html`<a
+  `;
+	}
+	constructor() {
+		super();
+		this.disabled = false;
+		this.href = null;
+		this.buttonAriaLabel = null;
+		this.buttonRole = null;
+		this.buttonAriaHaspopup = null;
+		this.buttonAriaExpanded = null;
+		this.size = "s";
+		this.addEventListener("click", (event) => {
+			if (this.disabled) event.stopImmediatePropagation();
+			if (this.type === "submit") this.requestSubmit();
+			else if (this.type === "reset") this.reset();
+		});
+	}
+	/**
+	* _Internal use._
+	* Returns the navigation target information.
+	* Used by navigation handling utilities.
+	*
+	* @returns Navigation target information or `null` if not navigable.
+	*
+	* @private
+	*/
+	getDDSNavigationTarget() {
+		if (this.href == null || this.disabled || this.type !== "link") return null;
+		return {
+			href: this.href,
+			target: null
+		};
+	}
+	render() {
+		const iconButtonCN = cvaIconButton({
+			variant: this.variant,
+			color: this.color,
+			size: this.size
+		});
+		if (this.type === "link") {
+			const linkDisabled = this.disabled || this.href == null;
+			return lit.html`<a
         part="icon-button"
         class=${iconButtonCN}
-        href=${ifDefined_js.ifDefined(!linkDisabled ? this.href ?? void 0 : void 0)}
-        tabindex=${ifDefined_js.ifDefined(this.getBackingProperty("buttonTabIndex"))}
-        role=${ifDefined_js.ifDefined(
-        this.buttonRole ?? (linkDisabled ? "link" : void 0)
-      )}
-        aria-disabled=${ifDefined_js.ifDefined(linkDisabled ? "true" : void 0)}
+        href=${(0, lit_directives_if_defined_js.ifDefined)(!linkDisabled ? this.href ?? void 0 : void 0)}
+        tabindex=${(0, lit_directives_if_defined_js.ifDefined)(this.getBackingProperty("buttonTabIndex"))}
+        role=${(0, lit_directives_if_defined_js.ifDefined)(this.buttonRole ?? (linkDisabled ? "link" : void 0))}
+        aria-disabled=${(0, lit_directives_if_defined_js.ifDefined)(linkDisabled ? "true" : void 0)}
         aria-label=${this.buttonAriaLabel ?? ""}
       >
         <slot class="icon-size-full"></slot>
       </a>`;
-    }
-    return lit.html`
+		}
+		return lit.html`
       <button
         part="icon-button"
         class=${iconButtonCN}
         type=${this.type}
-        tabindex=${ifDefined_js.ifDefined(this.getBackingProperty("buttonTabIndex"))}
+        tabindex=${(0, lit_directives_if_defined_js.ifDefined)(this.getBackingProperty("buttonTabIndex"))}
         aria-label=${this.buttonAriaLabel ?? ""}
         ?disabled=${this.disabled}
-        aria-expanded=${ifDefined_js.ifDefined(this.buttonAriaExpanded)}
-        aria-haspopup=${ifDefined_js.ifDefined(this.buttonAriaHaspopup)}
+        aria-expanded=${(0, lit_directives_if_defined_js.ifDefined)(this.buttonAriaExpanded)}
+        aria-haspopup=${(0, lit_directives_if_defined_js.ifDefined)(this.buttonAriaHaspopup)}
       >
         <slot class="icon-size-full"></slot>
       </button>
     `;
-  }
-  /**
-   * Focuses on the inner button.
-   * @param options focus options
-   */
-  focus(options) {
-    var _a;
-    (_a = this._button) == null ? void 0 : _a.focus(options);
-  }
+	}
+	/**
+	* Focuses on the inner button.
+	* @param options focus options
+	*/
+	focus(options) {
+		this._button?.focus(options);
+	}
 };
-exports.DaikinIconButton.styles = lit.css`
-    ${lit.unsafeCSS(tailwind.default)}
-
-    :host {
-      display: inline-block;
-      width: var(--ddc-icon-button-size, 2rem);
-      height: var(--ddc-icon-button-size, 2rem);
-    }
-
-    :host([size="s"]) {
-      --ddc-icon-button-size: 2rem; /* 32px */
-    }
-
-    :host([size="m"]) {
-      --ddc-icon-button-size: 3rem; /* 48px */
-    }
-  `;
-__decorateClass([
-  ddsProperty.property({
-    type: String,
-    reflect: true,
-    fallbackValue: "fill",
-    isAllowedValue: ddsProperty.oneOf([
-      "outline",
-      "fill",
-      "ghost"
-    ])
-  })
-], exports.DaikinIconButton.prototype, "variant", 2);
-__decorateClass([
-  ddsProperty.property({
-    type: String,
-    reflect: true,
-    fallbackValue: "default",
-    isAllowedValue: ddsProperty.oneOf([
-      "default",
-      "neutral",
-      "danger"
-    ])
-  })
-], exports.DaikinIconButton.prototype, "color", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinIconButton.prototype, "disabled", 2);
-__decorateClass([
-  ddsProperty.property({ type: String, reflect: true })
-], exports.DaikinIconButton.prototype, "href", 2);
-__decorateClass([
-  ddsProperty.property({
-    type: String,
-    reflect: true,
-    fallbackValue: "button",
-    isAllowedValue: ddsProperty.oneOf([
-      "button",
-      "submit",
-      "reset",
-      "link"
-    ])
-  })
-], exports.DaikinIconButton.prototype, "type", 2);
-__decorateClass([
-  ddsProperty.property({ type: String, reflect: true, attribute: "button-aria-label" })
-], exports.DaikinIconButton.prototype, "buttonAriaLabel", 2);
-__decorateClass([
-  ddsProperty.property({ type: String, reflect: true, attribute: "button-role" })
-], exports.DaikinIconButton.prototype, "buttonRole", 2);
-__decorateClass([
-  ddsProperty.property({ type: String, reflect: true, attribute: "button-aria-haspopup" })
-], exports.DaikinIconButton.prototype, "buttonAriaHaspopup", 2);
-__decorateClass([
-  ddsProperty.property({ type: String, reflect: true, attribute: "button-aria-expanded" })
-], exports.DaikinIconButton.prototype, "buttonAriaExpanded", 2);
-__decorateClass([
-  ddsProperty.property({
-    type: Number,
-    reflect: true,
-    attribute: "button-tabindex",
-    fallbackValue: 0
-  })
-], exports.DaikinIconButton.prototype, "buttonTabIndex", 2);
-__decorateClass([
-  ddsProperty.property({
-    type: String,
-    reflect: true,
-    fallbackValue: "s",
-    isAllowedValue: ddsProperty.oneOf(["s", "m"])
-  })
-], exports.DaikinIconButton.prototype, "size", 2);
-__decorateClass([
-  decorators_js.query("button")
-], exports.DaikinIconButton.prototype, "_button", 2);
-exports.DaikinIconButton = __decorateClass([
-  decorators.ddsElement("daikin-icon-button")
-], exports.DaikinIconButton);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: "fill",
+	isAllowedValue: require_dds_property.oneOf([
+		"outline",
+		"fill",
+		"ghost"
+	])
+})], DaikinIconButton.prototype, "variant", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: "default",
+	isAllowedValue: require_dds_property.oneOf([
+		"default",
+		"neutral",
+		"danger"
+	])
+})], DaikinIconButton.prototype, "color", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinIconButton.prototype, "disabled", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true
+})], DaikinIconButton.prototype, "href", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: "button",
+	isAllowedValue: require_dds_property.oneOf([
+		"button",
+		"submit",
+		"reset",
+		"link"
+	])
+})], DaikinIconButton.prototype, "type", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	attribute: "button-aria-label"
+})], DaikinIconButton.prototype, "buttonAriaLabel", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	attribute: "button-role"
+})], DaikinIconButton.prototype, "buttonRole", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	attribute: "button-aria-haspopup"
+})], DaikinIconButton.prototype, "buttonAriaHaspopup", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	attribute: "button-aria-expanded"
+})], DaikinIconButton.prototype, "buttonAriaExpanded", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Number,
+	reflect: true,
+	attribute: "button-tabindex",
+	fallbackValue: 0
+})], DaikinIconButton.prototype, "buttonTabIndex", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: "s",
+	isAllowedValue: require_dds_property.oneOf(["s", "m"])
+})], DaikinIconButton.prototype, "size", void 0);
+require_decorate.default([(0, lit_decorators_js.query)("button")], DaikinIconButton.prototype, "_button", void 0);
+DaikinIconButton = require_decorate.default([require_decorators.ddsElement("daikin-icon-button")], DaikinIconButton);
+//#endregion
+Object.defineProperty(exports, "DaikinIconButton", {
+	enumerable: true,
+	get: function() {
+		return DaikinIconButton;
+	}
+});

package/dist/cjs/components/icon-button/index.cjs

@@ -1,7 +1,8 @@
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const daikinIconButton = require("./daikin-icon-button.cjs");
+const require_daikin_icon_button = require("./daikin-icon-button.cjs");
 Object.defineProperty(exports, "DaikinIconButton", {
-  enumerable: true,
-  get: () => daikinIconButton.DaikinIconButton
+	enumerable: true,
+	get: function() {
+		return require_daikin_icon_button.DaikinIconButton;
+	}
 });