@daikin-oss/design-system-web-components 1.2.0 → 1.3.0-next.2

package/dist/cjs-dev/components/accordion-item/daikin-accordion-item.cjs

@@ -107,6 +107,7 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends ddsElement.DDSEl
     >
       <button
         id="summary"
+        type="button"
         ${ref_js.ref(this._summaryRef)}
         class=${cvaSummary({
       open,

package/dist/cjs-dev/components/avatar/daikin-avatar.cjs

@@ -91,6 +91,7 @@ exports.DaikinAvatar = class DaikinAvatar extends lit.LitElement {
       </span>`;
     } else if (this.type === "button") {
       return lit.html`<button
+        type="button"
         class=${cvaWrapper({ type: "button" })}
         aria-label=${ifDefined_js.ifDefined(this.alt ?? void 0)}
         aria-haspopup=${ifDefined_js.ifDefined(this.avatarAriaHaspopup ?? void 0)}

package/dist/cjs-dev/components/calendar/daikin-calendar.cjs

@@ -263,6 +263,7 @@ exports.DaikinCalendar = class DaikinCalendar extends lit.LitElement {
   }) {
     const variant = selected ? "selected" : today ? "today" : "default";
     return lit.html`<button
+      type="button"
       class=${cvaContentButton({ variant, date: false })}
       ?disabled=${disabled}
       role="radio"
@@ -386,6 +387,7 @@ exports.DaikinCalendar = class DaikinCalendar extends lit.LitElement {
         week,
         (date) => date.getTime(),
         (date) => lit.html`<button
+                    type="button"
                     class=${cvaContentButton({
           variant: date.getTime() === (value == null ? void 0 : value.getTime()) ? "selected" : date.getTime() === today.getTime() ? "today" : "default",
           date: true

package/dist/cjs-dev/components/card-header/daikin-card-header.cjs

@@ -25,7 +25,7 @@ const cvaTitle = classVarianceAuthority.cva([
 ])();
 const cvaDescription = classVarianceAuthority.cva([
   "flex-none",
-  "text-ddt-color-common-text-secondary",
+  "text-ddt-color-common-text-primary",
   "font-daikinSerif",
   "text-sm",
   "leading-normal",

package/dist/cjs-dev/components/carousel/daikin-carousel.cjs

@@ -153,13 +153,16 @@ exports.DaikinCarousel = class DaikinCarousel extends ddsElement.DDSElement {
           <span class=${cvaButton({ intent: "previous" })}></span>
         </daikin-icon-button>
         <div
-          class="w-full overflow-clip relative focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ddt-color-common-border-focus"
+          class="w-full overflow-clip relative focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ddt-color-common-border-focus [container-type:inline-size]"
           aria-live="polite"
         >
           <div
-            class="flex w-[calc(100%*var(--total))] transition-transform translate-x-[calc(-100%*var(--current)/var(--total))] duration-[--ddc-transition-duration]"
+            class="flex w-[calc(100cqw*var(--total))] transition-transform translate-x-[calc(-100%*var(--current)/var(--total))] duration-[--ddc-transition-duration]"
           >
-            <slot @slotchange=${this._handleSlotchange}></slot>
+            <slot
+              class="slotted:w-[calc(100%/var(--total))]"
+              @slotchange=${this._handleSlotchange}
+            ></slot>
           </div>
         </div>
         <daikin-icon-button
@@ -184,6 +187,7 @@ exports.DaikinCarousel = class DaikinCarousel extends ddsElement.DDSElement {
       this._items,
       (_, index) => index,
       (_, index) => lit.html`<button
+                type="button"
                 class=${INDICATOR_CLASS_NAME}
                 aria-label="Slide ${index + 1}"
                 aria-selected=${this.currentIndex === index}

package/dist/cjs-dev/components/carousel-item/daikin-carousel-item.cjs

@@ -40,12 +40,12 @@ exports.DaikinCarouselItem = class DaikinCarouselItem extends ddsElement.DDSElem
       >
         <slot
           name="title"
-          class="leading-[130%] font-bold"
+          class="leading-[130%] font-bold natural-break"
           @slotchange=${this._handleFooterSlotChange}
         ></slot>
         <slot
           name="description"
-          class="text-sm"
+          class="text-sm natural-break"
           @slotchange=${this._handleFooterSlotChange}
         ></slot>
       </div>

package/dist/cjs-dev/components/chip/daikin-chip.cjs

@@ -0,0 +1,106 @@
+"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");
+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 cvaWrapper = classVarianceAuthority.cva([
+  "flex",
+  "items-center",
+  "rounded-[100px]",
+  "overflow-hidden",
+  "size-full",
+  "border",
+  "px-1",
+  "border-ddt-color-common-neutral-default"
+]);
+const cvaRemoveButton = classVarianceAuthority.cva([
+  "w-4",
+  "h-4",
+  "flex",
+  "items-center",
+  "justify-center",
+  "rounded-full",
+  "overflow-hidden",
+  "focus-visible:outline",
+  "focus-visible:outline-2",
+  "focus-visible:outline-ddt-color-common-border-focus",
+  "enabled:var-color-ddt-color-common-neutral-default/color-primary",
+  "enabled:hover:var-color-ddt-color-common-neutral-hover/color-primary",
+  "enabled:hover:var-color-ddt-color-common-surface-neutral-hover/color-secondary",
+  "enabled:active:var-color-ddt-color-common-neutral-press/color-primary",
+  "enabled:active:var-color-ddt-color-common-surface-neutral-press/color-secondary",
+  "text-[--color-primary]",
+  "bg-[--color-secondary]"
+]);
+exports.DaikinChip = class DaikinChip extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.chipAriaLabel = null;
+  }
+  _handleRemoveClick(event) {
+    event.stopPropagation();
+    this.dispatchEvent(new Event("remove", { bubbles: true, composed: true }));
+  }
+  render() {
+    return lit.html`
+      <div
+        role="group"
+        class=${cvaWrapper()}
+        aria-label=${ifDefined_js.ifDefined(this.chipAriaLabel)}
+      >
+        <slot
+          name="left-icon"
+          class="icon-size-4 text-ddt-color-common-text-primary"
+        ></slot>
+        <span class="text-ddt-color-common-text-primary px-1 mr-[2px]">
+          <slot></slot>
+        </span>
+        <button
+          type="button"
+          class=${cvaRemoveButton()}
+          aria-label="Remove"
+          @click=${this._handleRemoveClick}
+        >
+          <span class="i-daikin-close text-[--color-primary]"></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);
+  }
+};
+exports.DaikinChip.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-flex;
+      width: max-content;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "chip-aria-label" })
+], exports.DaikinChip.prototype, "chipAriaLabel", 2);
+__decorateClass([
+  decorators_js.query("button")
+], exports.DaikinChip.prototype, "_focusableElement", 2);
+exports.DaikinChip = __decorateClass([
+  decorators_js.customElement("daikin-chip")
+], exports.DaikinChip);

package/dist/cjs-dev/components/chip/daikin-chip.d.cts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+/**
+ * A chip is a small UI component that represents a single piece of information, a filter, or a contact. Think of it as a compact tag or a small, clickable token.
+ *
+ * @fires remove - A custom event emitted when a user clicks the remove button.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/chip/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-chip chip-aria-label="Chip Text">Text</daikin-chip>
+ * ```
+ */
+export declare class DaikinChip extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Provides an accessible name of the chip.
+     */
+    chipAriaLabel: string | null;
+    private _focusableElement;
+    private _handleRemoveClick;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner remove button
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-chip": DaikinChip;
+    }
+}

package/dist/cjs-dev/components/chip/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinChip = require("./daikin-chip.cjs");
+Object.defineProperty(exports, "DaikinChip", {
+  enumerable: true,
+  get: () => daikinChip.DaikinChip
+});

package/dist/cjs-dev/components/chip/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-chip.cjs";