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

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

@@ -0,0 +1,49 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from '../../type-utils';
+import { icons } from './icons.json';
+
+export declare const iconList: string[];
+export type IconType = keyof typeof icons;
+declare const cvaIcon: (props?: ({
+    icon?: string | number | null | undefined;
+    size?: "s" | "m" | "l" | "xl" | null | undefined;
+    color?: "black" | "white" | "default" | "current" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
+/**
+ * The icon component is a versatile UI element used to display small graphical symbols or images that represent actions, objects, or concepts within an application.
+ * The icon set is provided by DDS.
+ *
+ * To use an arbitrary color, specify `"current"` for the `color` property and set the `color` CSS property to the color you want to use.
+ *
+ * If you try to use an icon that does not exist, a blank space will be displayed.
+ * In the development build, warnings will be displayed in the console, so please check there if you encounter any unexpected behavior.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-icon icon="information" color="black" size="m"></daikin-icon>
+ * ```
+ */
+export declare class DaikinIcon extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Specify the name of the icon
+     */
+    icon: IconType | null;
+    /**
+     * Specify icon color
+     */
+    color: IconVariantProps["color"];
+    /**
+     * Specify the height and width of the icon
+     */
+    size: IconVariantProps["size"];
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-icon": DaikinIcon;
+    }
+}
+export default DaikinIcon;

package/dist/cjs/components/icon/icons.json.cjs

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const icons = {
+  alarm: {
+    "class": "i-daikin-notification-status-alarm",
+    color: null
+  },
+  close: {
+    "class": "i-daikin-notification-close",
+    color: "#a0a0a0"
+  },
+  information: {
+    "class": "i-daikin-notification-status-information",
+    color: null
+  },
+  negative: {
+    "class": "i-daikin-notification-status-negative",
+    color: null
+  },
+  positive: {
+    "class": "i-daikin-notification-status-positive",
+    color: null
+  },
+  warning: {
+    "class": "i-daikin-notification-status-warning",
+    color: null
+  }
+};
+exports.icons = icons;

package/dist/cjs/components/icon/icons.json.d.ts

@@ -0,0 +1,31 @@
+declare const _default: {
+  "icons": {
+    "alarm": {
+      "class": "i-daikin-notification-status-alarm",
+      "color": null
+    },
+    "close": {
+      "class": "i-daikin-notification-close",
+      "color": "#a0a0a0"
+    },
+    "information": {
+      "class": "i-daikin-notification-status-information",
+      "color": null
+    },
+    "negative": {
+      "class": "i-daikin-notification-status-negative",
+      "color": null
+    },
+    "positive": {
+      "class": "i-daikin-notification-status-positive",
+      "color": null
+    },
+    "warning": {
+      "class": "i-daikin-notification-status-warning",
+      "color": null
+    }
+  }
+}
+;
+
+export default _default;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinIcon = require("./daikin-icon.cjs");
+Object.defineProperty(exports, "DaikinIcon", {
+  enumerable: true,
+  get: () => daikinIcon.DaikinIcon
+});
+exports.iconList = daikinIcon.iconList;

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

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

package/dist/cjs/components/index.cjs

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinAccordion = require("./accordion/daikin-accordion.cjs");
+const daikinAccordionItem = require("./accordion-item/daikin-accordion-item.cjs");
+const daikinButton = require("./button/daikin-button.cjs");
+const daikinCheckbox = require("./checkbox/daikin-checkbox.cjs");
+const daikinIcon = require("./icon/daikin-icon.cjs");
+const daikinInputGroup = require("./input-group/daikin-input-group.cjs");
+const daikinNotification = require("./notification/daikin-notification.cjs");
+const daikinPanelSwitcher = require("./panel-switcher/daikin-panel-switcher.cjs");
+const daikinRadio = require("./radio/daikin-radio.cjs");
+const daikinTab = require("./tab/daikin-tab.cjs");
+const daikinTabGroup = require("./tab-group/daikin-tab-group.cjs");
+const daikinTextInput = require("./text-input/daikin-text-input.cjs");
+const daikinTextarea = require("./textarea/daikin-textarea.cjs");
+const daikinToggle = require("./toggle/daikin-toggle.cjs");
+Object.defineProperty(exports, "DaikinAccordion", {
+  enumerable: true,
+  get: () => daikinAccordion.DaikinAccordion
+});
+Object.defineProperty(exports, "DaikinAccordionItem", {
+  enumerable: true,
+  get: () => daikinAccordionItem.DaikinAccordionItem
+});
+Object.defineProperty(exports, "DaikinButton", {
+  enumerable: true,
+  get: () => daikinButton.DaikinButton
+});
+Object.defineProperty(exports, "DaikinCheckbox", {
+  enumerable: true,
+  get: () => daikinCheckbox.DaikinCheckbox
+});
+Object.defineProperty(exports, "DaikinIcon", {
+  enumerable: true,
+  get: () => daikinIcon.DaikinIcon
+});
+exports.iconList = daikinIcon.iconList;
+Object.defineProperty(exports, "DaikinInputGroup", {
+  enumerable: true,
+  get: () => daikinInputGroup.DaikinInputGroup
+});
+Object.defineProperty(exports, "DaikinNotification", {
+  enumerable: true,
+  get: () => daikinNotification.DaikinNotification
+});
+Object.defineProperty(exports, "DaikinPanelSwitcher", {
+  enumerable: true,
+  get: () => daikinPanelSwitcher.DaikinPanelSwitcher
+});
+Object.defineProperty(exports, "DaikinRadio", {
+  enumerable: true,
+  get: () => daikinRadio.DaikinRadio
+});
+Object.defineProperty(exports, "DaikinTab", {
+  enumerable: true,
+  get: () => daikinTab.DaikinTab
+});
+Object.defineProperty(exports, "DaikinTabGroup", {
+  enumerable: true,
+  get: () => daikinTabGroup.DaikinTabGroup
+});
+Object.defineProperty(exports, "DaikinTextInput", {
+  enumerable: true,
+  get: () => daikinTextInput.DaikinTextInput
+});
+Object.defineProperty(exports, "DaikinTextarea", {
+  enumerable: true,
+  get: () => daikinTextarea.DaikinTextarea
+});
+Object.defineProperty(exports, "DaikinToggle", {
+  enumerable: true,
+  get: () => daikinToggle.DaikinToggle
+});

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

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

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

@@ -4,7 +4,33 @@ 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

@@ -3,20 +3,34 @@ 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,51 @@
+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/radio/daikin-radio.d.ts

@@ -9,7 +9,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
+});

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

@@ -0,0 +1,126 @@
+"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 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 cvaTab = classVarianceAuthority.cva(
+  [
+    "flex",
+    "w-full",
+    "h-full",
+    "items-center",
+    "justify-center",
+    "text-center",
+    "relative",
+    "font-daikinSerif",
+    "text-base",
+    "tracking-wide",
+    "whitespace-nowrap",
+    "contain-paint",
+    "disabled:cursor-default",
+    "after:content-['']",
+    "after:z-1",
+    "after:absolute",
+    "after:bottom-0",
+    "after:left-0",
+    "after:right-0",
+    "after:w-full",
+    "text-daikinBlue-500",
+    "hover:text-daikinBlue-400",
+    "active:text-daikinBlue-600",
+    "focus-visible:text-daikinBlue-700",
+    "disabled:text-daikinNeutral-300",
+    "aria-selected:after:h-1",
+    "aria-selected:after:bg-daikinBlue-500",
+    "hover:aria-selected:after:bg-daikinBlue-400",
+    "active:aria-selected:after:bg-daikinBlue-600",
+    "focus-visible:aria-selected:after:bg-daikinBlue-700",
+    "disabled:after:bg-daikinNeutral-300"
+  ],
+  {
+    variants: {
+      size: {
+        default: ["px-4"],
+        condensed: ["px-[10px]"]
+      }
+    }
+  }
+);
+exports.DaikinTab = class DaikinTab extends lit.LitElement {
+  constructor() {
+    super();
+    this.value = "";
+    this.size = "default";
+    this.disabled = false;
+    this.active = false;
+    this.addEventListener("click", this._handleClick);
+  }
+  _handleClick(event) {
+    if (this.disabled) {
+      event.stopImmediatePropagation();
+    }
+  }
+  /**
+   * Focuses on the inner button.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a, _b;
+    (_b = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("button")) == null ? void 0 : _b.focus(options);
+  }
+  render() {
+    const cn = cvaTab({
+      size: this.size
+    });
+    return lit.html`
+      <button
+        class=${cn}
+        ?disabled=${this.disabled}
+        role="tab"
+        aria-selected=${!this.disabled && this.active}
+        tabindex=${this.active ? 0 : -1}
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+};
+exports.DaikinTab.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-block;
+      width: fit-content;
+      height: 48px;
+    }
+
+    :host([size="condensed"]) {
+      height: 40px;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinTab.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinTab.prototype, "size", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTab.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTab.prototype, "active", 2);
+exports.DaikinTab = __decorateClass([
+  decorators_js.customElement("daikin-tab")
+], exports.DaikinTab);