@daikin-oss/design-system-web-components 1.6.0 → 2.0.0

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

@@ -33,86 +33,66 @@ const cvaInputChipWrapper = classVarianceAuthority.cva(
   {
     variants: {
       variant: {
-        fill: [
-          "border-ddt-color-common-brand-default",
-          "bg-ddt-color-common-brand-default"
+        fill: ["border-(--border-color-fill)", "bg-(--bg-color-fill)"],
+        outline: ["border-(--border-color-outline)"]
+      },
+      elevated: {
+        true: [
+          "shadow-[0px_1px_2px_0px_var(--dds-color-common-background-overlay)]",
+          ""
         ],
-        outline: ["border-ddt-color-common-neutral-default"]
+        false: []
       }
-    }
-  }
-);
-const cvaInputChipIcon = classVarianceAuthority.cva(["icon-size-4", "slotted:flex-none"], {
-  variants: {
-    variant: {
-      fill: ["text-ddt-color-common-text-inverse"],
-      outline: ["text-ddt-color-common-text-primary"]
-    }
-  }
-});
-const cvaInputChipText = classVarianceAuthority.cva(
-  [
-    "text-(length:--dds-font-size-350)",
-    "px-1",
-    "mr-0.5",
-    "overflow-hidden",
-    "whitespace-nowrap",
-    "flex-1"
-  ],
-  {
-    variants: {
-      variant: {
-        fill: ["text-ddt-color-common-text-inverse"],
-        outline: ["text-ddt-color-common-text-primary"]
+    },
+    compoundVariants: [
+      {
+        variant: "outline",
+        elevated: true,
+        class: ["bg-(--dds-color-common-surface-elevated-lv1)"]
       }
-    }
-  }
-);
-const cvaRemoveButton = classVarianceAuthority.cva(
-  [
-    "flex-none",
-    "relative",
-    "w-4",
-    "h-4",
-    "flex",
-    "items-center",
-    "justify-center",
-    "rounded-full",
-    "focus-visible:outline",
-    "focus-visible:outline-2",
-    "text-(--color-primary)",
-    "bg-(--color-secondary)",
-    "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"
-  ],
-  {
-    variants: {
-      variant: {
-        fill: [
-          "text-ddt-color-common-text-inverse",
-          "focus-visible:outline-ddt-color-common-border-inverse",
-          "enabled:hover:[--color-secondary:var(--dds-color-common-brand-hover)]",
-          "enabled:active:[--color-secondary:var(--dds-color-common-brand-press)]"
-        ],
-        outline: [
-          "text-ddt-color-common-neutral-default",
-          "focus-visible:outline-ddt-color-common-border-focus",
-          "enabled:[--color-primary:var(--dds-color-common-neutral-default)]",
-          "enabled:hover:[--color-primary:var(--dds-color-common-neutral-hover)]",
-          "enabled:hover:[--color-secondary:var(--dds-color-common-surface-neutral-hover)]",
-          "enabled:active:[--color-primary:var(--dds-color-common-neutral-press)]",
-          "enabled:active:[--color-secondary:var(--dds-color-common-surface-neutral-press)]"
-        ]
-      }
-    }
+    ]
   }
 );
+const cvaInputChipIcon = classVarianceAuthority.cva([
+  "icon-size-4",
+  "slotted:flex-none",
+  "text-ddt-color-common-text-primary"
+]);
+const cvaInputChipText = classVarianceAuthority.cva([
+  "text-(length:--dds-font-size-350)",
+  "px-1",
+  "mr-0.5",
+  "overflow-hidden",
+  "whitespace-nowrap",
+  "flex-1",
+  "text-ddt-color-common-text-primary"
+]);
+const cvaRemoveButton = classVarianceAuthority.cva([
+  "flex-none",
+  "relative",
+  "w-4",
+  "h-4",
+  "flex",
+  "items-center",
+  "justify-center",
+  "rounded-full",
+  "focus-visible:outline",
+  "focus-visible:outline-2",
+  "text-(--color-primary)",
+  "bg-(--color-secondary)",
+  "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)]"
+]);
 const cvaFilterChipWrapper = classVarianceAuthority.cva(
   [
     "flex",
@@ -160,8 +140,32 @@ const cvaFilterChipWrapper = classVarianceAuthority.cva(
           "disabled:[--color-primary:var(--dds-color-common-disabled)]",
           "disabled:[--color-tertiary:var(--dds-color-common-disabled)]"
         ]
+      },
+      elevated: {
+        true: [
+          "shadow-[0px_1px_2px_0px_var(--dds-color-common-background-overlay)]"
+        ],
+        false: []
       }
-    }
+    },
+    compoundVariants: [
+      {
+        checked: true,
+        elevated: true,
+        class: [
+          "enabled:[--color-secondary:var(--dds-color-common-brand-elevated-default)]!",
+          "enabled:hover:[--color-secondary:var(--dds-color-common-brand-elevated-hover)]!",
+          "enabled:active:[--color-secondary:var(--dds-color-common-brand-elevated-press)]!"
+        ]
+      },
+      {
+        checked: false,
+        elevated: true,
+        class: [
+          "enabled:[--color-secondary:var(--dds-color-common-surface-elevated-lv1)]"
+        ]
+      }
+    ]
   }
 );
 const cvaFilterChipText = classVarianceAuthority.cva(
@@ -178,6 +182,8 @@ const cvaFilterChipText = classVarianceAuthority.cva(
 exports.DaikinChip = class DaikinChip extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
+    this.elevated = false;
+    this.hideRemoveButton = false;
     this.checked = false;
     this.disabled = false;
     this.withCheckedIcon = false;
@@ -226,32 +232,37 @@ exports.DaikinChip = class DaikinChip extends ddsElement.DDSElement {
         return lit.html`
           <div
             role="group"
-            class=${cvaInputChipWrapper({ variant: this.variant })}
+            part="chip"
+            class=${cvaInputChipWrapper({
+          variant: this.variant,
+          elevated: this.elevated
+        })}
             aria-label=${ifDefined_js.ifDefined(this.chipAriaLabel)}
           >
-            <slot
-              name="left-icon"
-              class=${cvaInputChipIcon({ variant: this.variant })}
-            ></slot>
-            <span class=${cvaInputChipText({ variant: this.variant })}>
+            <slot name="left-icon" class=${cvaInputChipIcon()}></slot>
+            <span class=${cvaInputChipText()}>
               <slot></slot>
             </span>
-            <button
-              type="button"
-              class=${cvaRemoveButton({ variant: this.variant })}
-              aria-label="Remove"
-              @click=${this._handleRemoveClick}
-            >
-              <span
-                class="icon-[daikin--close] text-(--color-primary) size-4 flex-none"
-              ></span>
-            </button>
+            ${this.hideRemoveButton ? lit.nothing : lit.html`<button
+                  type="button"
+                  class=${cvaRemoveButton()}
+                  aria-label="Remove"
+                  @click=${this._handleRemoveClick}
+                >
+                  <span
+                    class="icon-[daikin--close] text-(--color-primary) size-4 flex-none"
+                  ></span>
+                </button>`}
           </div>
         `;
       case "filter":
         return lit.html`<button
           type="button"
-          class=${cvaFilterChipWrapper({ checked: this.checked })}
+          part="chip"
+          class=${cvaFilterChipWrapper({
+          checked: this.checked,
+          elevated: this.elevated
+        })}
           aria-pressed=${this.checked}
           ?disabled=${this.disabled}
           @click=${this._handleChipClick}
@@ -281,6 +292,83 @@ exports.DaikinChip.styles = lit.css`
       display: inline-flex;
       width: max-content;
       vertical-align: middle;
+
+      --border-color-fill: var(--dds-color-common-accent-lv2-base-gray);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-base-gray);
+      --border-color-outline: var(--dds-color-common-accent-lv5-gray);
+    }
+
+    :host([color="gray"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-base-gray);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-base-gray);
+      --border-color-outline: var(--dds-color-common-accent-lv5-gray);
+    }
+    :host([color="red"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-base-red);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-base-red);
+      --border-color-outline: var(--dds-color-common-accent-lv5-red);
+    }
+    :host([color="blue"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-base-blue);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-base-blue);
+      --border-color-outline: var(--dds-color-common-accent-lv5-blue);
+    }
+    :host([color="yellow"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-base-yellow);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-base-yellow);
+      --border-color-outline: var(--dds-color-common-accent-lv5-yellow);
+    }
+    :host([color="green"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-base-green);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-base-green);
+      --border-color-outline: var(--dds-color-common-accent-lv5-green);
+    }
+    :host([color="orange"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-base-orange);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-base-orange);
+      --border-color-outline: var(--dds-color-common-accent-lv5-orange);
+    }
+    :host([color="purple"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-base-purple);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-base-purple);
+      --border-color-outline: var(--dds-color-common-accent-lv5-purple);
+    }
+
+    :host([elevated]),
+    :host([elevated][color="gray"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-elevated-gray);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-elevated-gray);
+      --border-color-outline: var(--dds-color-common-accent-lv5-gray);
+    }
+    :host([elevated][color="red"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-elevated-red);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-elevated-red);
+      --border-color-outline: var(--dds-color-common-accent-lv5-red);
+    }
+    :host([elevated][color="blue"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-elevated-blue);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-elevated-blue);
+      --border-color-outline: var(--dds-color-common-accent-lv5-blue);
+    }
+    :host([elevated][color="yellow"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-elevated-yellow);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-elevated-yellow);
+      --border-color-outline: var(--dds-color-common-accent-lv5-yellow);
+    }
+    :host([elevated][color="green"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-elevated-green);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-elevated-green);
+      --border-color-outline: var(--dds-color-common-accent-lv5-green);
+    }
+    :host([elevated][color="orange"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-elevated-orange);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-elevated-orange);
+      --border-color-outline: var(--dds-color-common-accent-lv5-orange);
+    }
+    :host([elevated][color="purple"]) {
+      --border-color-fill: var(--dds-color-common-accent-lv2-elevated-purple);
+      --bg-color-fill: var(--dds-color-common-accent-lv2-elevated-purple);
+      --border-color-outline: var(--dds-color-common-accent-lv5-purple);
     }
   `;
 __decorateClass([
@@ -299,6 +387,20 @@ __decorateClass([
     isAllowedValue: ddsProperty.oneOf(["fill", "outline"])
   })
 ], exports.DaikinChip.prototype, "variant", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "gray",
+    isAllowedValue: ddsProperty.oneOf(["gray", "red", "blue", "yellow", "green", "orange", "purple"])
+  })
+], exports.DaikinChip.prototype, "color", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true })
+], exports.DaikinChip.prototype, "elevated", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true, attribute: "hide-remove-button" })
+], exports.DaikinChip.prototype, "hideRemoveButton", 2);
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinChip.prototype, "checked", 2);

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

@@ -6,6 +6,8 @@ import { DDSElement } from "../../base/index.cjs";
  * @fires before-select - When type is "filter", a cancelable custom event emitted before changing the selected state of a filter type chip. Listeners can call `event.preventDefault()` to prevent the state change.
  * @fires select - When type is "filter", a custom event emitted after the selected state of a filter type chip has changed. The new selected state is provided in `event.detail.checked`.
  *
+ * @csspart chip - Targets the internal <span> element wrapping the chip. This is typically used to control the chip's styling and interactivity. For example, you can adjust spacing and customize the cursor appearance during dragging: daikin-chip::part(chip) { margin: -4px; padding: 4px; cursor: grab; } daikin-chip::part(chip):active { cursor: grabbing; }
+ *
  * @slot - A slot for the chip content.
  * @slot left-icon - When type is "input", a slot for an icon to be placed to the left of the text. Place `daikin-icon` or something similar.
  *
@@ -33,6 +35,24 @@ export declare class DaikinChip extends DDSElement {
      * @default "outline"
      */
     variant: "fill" | "outline";
+    /**
+     * Specify the color of the chip when type is "input".
+     *
+     * @default "gray"
+     */
+    color: "gray" | "red" | "blue" | "yellow" | "green" | "orange" | "purple";
+    /**
+     * Whether the chip has a shadow to indicate elevation.
+     *
+     * @default false
+     */
+    elevated: boolean;
+    /**
+     * When `true`, hides the remove button and makes the chip non-removable when type is "input".
+     *
+     * @default false
+     */
+    hideRemoveButton: boolean;
     /**
      * Specify the chip is selected when type is "filter".
      * When controlling this property externally, listen to the `select` event and update your state from `event.detail.checked` to keep it in sync.