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

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

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

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

@@ -1,68 +1,54 @@
-import { cva } from "class-variance-authority";
-import { unsafeCSS, css, html } from "lit";
 import { DDSElement } from "../../base/dds-element.js";
-import "../../base/dds-form-element.js";
 import { property } 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 cvaContainer = cva(
-  [
-    "flex",
-    "flex-col",
-    "gap-4",
-    "size-full",
-    "rounded-lg",
-    "bg-ddt-color-common-background-default"
-  ],
-  {
-    variants: {
-      outline: {
-        true: ["border", "border-ddt-color-divider", "p-2.75"],
-        false: ["p-3"]
-      }
-    }
-  }
-);
-let DaikinCard = class extends DDSElement {
-  constructor() {
-    super(...arguments);
-    this.outline = false;
-  }
-  render() {
-    return html`<div
-      class=${cvaContainer({
-      outline: this.outline
-    })}
-    >
-      <slot class="text-ddt-color-common-text-primary"></slot>
-    </div>`;
-  }
-};
-DaikinCard.styles = css`
-    ${unsafeCSS(tailwindStyles)}
+import "../../base/index.js";
+import tailwind_default from "../../tailwind.css.js";
+import { css, html, unsafeCSS } from "lit";
+import { cva } from "class-variance-authority";
+//#region src/components/card/daikin-card.ts
+var cvaContainer = cva([
+	"flex",
+	"flex-col",
+	"gap-4",
+	"size-full",
+	"rounded-lg",
+	"bg-ddt-color-common-background-default"
+], { variants: { outline: {
+	true: [
+		"border",
+		"border-ddt-color-divider",
+		"p-2.75"
+	],
+	false: ["p-3"]
+} } });
+var DaikinCard = class DaikinCard extends DDSElement {
+	constructor(..._args) {
+		super(..._args);
+		this.outline = false;
+	}
+	static {
+		this.styles = css`
+    ${unsafeCSS(tailwind_default)}
 
     :host {
       display: block;
       width: 100%;
     }
   `;
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinCard.prototype, "outline", 2);
-DaikinCard = __decorateClass([
-  ddsElement("daikin-card")
-], DaikinCard);
-export {
-  DaikinCard
+	}
+	render() {
+		return html`<div
+      class=${cvaContainer({ outline: this.outline })}
+    >
+      <slot class="text-ddt-color-common-text-primary"></slot>
+    </div>`;
+	}
 };
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], DaikinCard.prototype, "outline", void 0);
+DaikinCard = __decorate([ddsElement("daikin-card")], DaikinCard);
+//#endregion
+export { DaikinCard };

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

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

package/dist/es/components/card-footer/daikin-card-footer.js

@@ -1,25 +1,14 @@
-import { unsafeCSS, css, html } from "lit";
 import { DDSElement } from "../../base/dds-element.js";
-import "../../base/dds-form-element.js";
-import "lit/decorators.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 __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 = decorator(result) || result;
-  return result;
-};
-let DaikinCardFooter = class extends DDSElement {
-  render() {
-    return html`<slot></slot>`;
-  }
-};
-DaikinCardFooter.styles = css`
-    ${unsafeCSS(tailwindStyles)}
+import "../../base/index.js";
+import tailwind_default from "../../tailwind.css.js";
+import { css, html, unsafeCSS } from "lit";
+//#region src/components/card-footer/daikin-card-footer.ts
+var DaikinCardFooter = class DaikinCardFooter extends DDSElement {
+	static {
+		this.styles = css`
+    ${unsafeCSS(tailwind_default)}
 
     :host {
       display: flex;
@@ -28,9 +17,11 @@ DaikinCardFooter.styles = css`
       justify-content: flex-end;
     }
   `;
-DaikinCardFooter = __decorateClass([
-  ddsElement("daikin-card-footer")
-], DaikinCardFooter);
-export {
-  DaikinCardFooter
+	}
+	render() {
+		return html`<slot></slot>`;
+	}
 };
+DaikinCardFooter = __decorate([ddsElement("daikin-card-footer")], DaikinCardFooter);
+//#endregion
+export { DaikinCardFooter };

package/dist/es/components/card-footer/index.js

@@ -1,4 +1,2 @@
 import { DaikinCardFooter } from "./daikin-card-footer.js";
-export {
-  DaikinCardFooter
-};
+export { DaikinCardFooter };

package/dist/es/components/card-header/daikin-card-header.js

@@ -1,40 +1,42 @@
-import { cva } from "class-variance-authority";
-import { unsafeCSS, css, html } from "lit";
 import { DDSElement } from "../../base/dds-element.js";
-import "../../base/dds-form-element.js";
-import "lit/decorators.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 __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 = decorator(result) || result;
-  return result;
-};
-const cvaTitle = cva([
-  "flex-none",
-  "text-ddt-color-common-text-primary",
-  "text-base",
-  "leading-[1.3]",
-  "not-italic",
-  "font-bold",
-  "natural-break"
+import "../../base/index.js";
+import tailwind_default from "../../tailwind.css.js";
+import { css, html, unsafeCSS } from "lit";
+import { cva } from "class-variance-authority";
+//#region src/components/card-header/daikin-card-header.ts
+var cvaTitle = cva([
+	"flex-none",
+	"text-ddt-color-common-text-primary",
+	"text-base",
+	"leading-[1.3]",
+	"not-italic",
+	"font-bold",
+	"natural-break"
 ])();
-const cvaDescription = cva([
-  "flex-none",
-  "text-ddt-color-common-text-primary",
-  "text-sm",
-  "leading-normal",
-  "not-italic",
-  "font-normal",
-  "natural-break"
+var cvaDescription = cva([
+	"flex-none",
+	"text-ddt-color-common-text-primary",
+	"text-sm",
+	"leading-normal",
+	"not-italic",
+	"font-normal",
+	"natural-break"
 ])();
-let DaikinCardHeader = class extends DDSElement {
-  render() {
-    return html`<div class="flex w-full gap-1">
+var DaikinCardHeader = class DaikinCardHeader extends DDSElement {
+	static {
+		this.styles = css`
+    ${unsafeCSS(tailwind_default)}
+
+    :host {
+      display: flex;
+      align-items: center;
+    }
+  `;
+	}
+	render() {
+		return html`<div class="flex w-full gap-1">
       <slot
         name="left-icon"
         class="flex-none icon-size-6 text-ddt-color-common-text-primary"
@@ -44,19 +46,8 @@ let DaikinCardHeader = class extends DDSElement {
         <slot name="description" class=${cvaDescription}></slot>
       </div>
     </div>`;
-  }
-};
-DaikinCardHeader.styles = css`
-    ${unsafeCSS(tailwindStyles)}
-
-    :host {
-      display: flex;
-      align-items: center;
-    }
-  `;
-DaikinCardHeader = __decorateClass([
-  ddsElement("daikin-card-header")
-], DaikinCardHeader);
-export {
-  DaikinCardHeader
+	}
 };
+DaikinCardHeader = __decorate([ddsElement("daikin-card-header")], DaikinCardHeader);
+//#endregion
+export { DaikinCardHeader };

package/dist/es/components/card-header/index.js

@@ -1,4 +1,2 @@
 import { DaikinCardHeader } from "./daikin-card-header.js";
-export {
-  DaikinCardHeader
-};
+export { DaikinCardHeader };

package/dist/es/components/carousel/daikin-carousel.d.ts

@@ -3,16 +3,20 @@ import { DDSElement } from "../../base/index.js";
 /**
  * A carousel is a component that displays multiple pieces of information by sliding left and right within a fixed height area.
  *
- * The carousel component can be operated in several ways (Control, Indicator, and Swipe), but it is not possible to hide all of these, as this would prevent the user from being able to operate the carousel component.
+ * Powered by embla-carousel for smooth, native-feeling interactions and infinite loops.
  *
  * Hierarchy:
  * - `daikin-carousel` > `daikin-carousel-item`
  *
- * @fires select - If an item in the carousel is selected in some way, the method used to select it, the index number of the item displayed before it, and the index number of the item currently displayed are passed.
+ * @fires select - Fired when the carousel index changes. `event.detail` contains the triggering `operation` (`"prev"`, `"next"`, `"indicator"`, or `"swipe"`) and `beforeCurrentIndex`; read `currentIndex` for the selected index.
  *
  * @slot - A slot for carousel items. Place `daikin-carousel-item` elements here.
  *
- * @cssprop [--ddc-transition-duration=600ms] - Specify the interval for the slide animation.
+ * @cssprop [--ddc-transition-duration=600ms] - Legacy transition duration in milliseconds. **Warning:** Mapped to Embla's duration option using 600ms = 25. This property may be removed in a future release; gradually migrate to the `duration` property instead.
+ * @cssprop [--ddc-item-aspect-ratio=16/9] - The aspect ratio of every carousel item's media container.
+ * @cssprop [--ddc-item-object-fit=contain] - How image/video content fits inside every carousel item's media container.
+ * @cssprop [--ddc-item-background-color=var(--dds-color-common-surface-secondary)] - The default background color for the carousel items.
+ * @cssprop [--ddc-item-gap=var(--dds-space-100)] - The gap between carousel items.
  *
  * @example
  *
@@ -33,19 +37,58 @@ export declare class DaikinCarousel extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * The index number of the content currently being displayed.
-     * When controlling this property externally, listen to the `select` event and read the updated `currentIndex` from the component to keep your state in sync.
      */
     currentIndex: number;
+    /**
+     * Whether the carousel should loop back to the first item when the last item is reached.
+     */
+    loop: boolean;
+    /**
+     * The position of the navigation arrows. Can be either "outside" or "inside".
+     * - "outside": Arrows are placed outside the carousel viewport.
+     * - "inside": Arrows are placed inside the carousel viewport.
+     * The inside option is useful for carousels with a smaller width, where the arrows can be placed over the content without taking up additional space.
+     * When the width of viewport is smaller than mobile breakpoint (768px), the arrows will always be placed inside regardless of this property.
+     *
+     * @default "outside"
+     */
+    arrows: "outside" | "inside";
+    /**
+     * The higher this value, the slower the image scrolling animation. However, this value does not affect the sliding speed when the user is dragging the image, as that depends on the user's dragging speed.
+     *
+     * @default 25
+     */
+    duration: number;
     private readonly _items;
+    /**
+     * Keeps track of the total number of slotted carousel items.
+     */
     private _itemCount;
-    private _prevButton;
-    private _nextButton;
+    private _emblaApi?;
+    private _mediaResizeObserver?;
     private _indicatorButtonsContainer;
+    private _viewport;
+    private _track;
+    private _pendingOperation;
+    private _isDragging;
+    private _getEmblaDuration;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private _emitSelect;
+    /**
+     * Initializes or re-initializes the Embla instance when properties or slots change.
+     */
+    private _initEmbla;
+    private _onEmblaPointerDown;
+    private _onEmblaSettle;
+    /**
+     * Embla event listener that synchronizes internal state when the user swipes or slides.
+     */
+    private _onEmblaSelect;
     private _handleClickIndicator;
     private _handleKeydownIndicator;
-    private _handleSlotchange;
     private _moveBy;
+    private _handleSlotchange;
     private _updateItemActive;
     render(): import('lit-html').TemplateResult<1>;
     protected updated(changedProperties: PropertyValues): void;