@daikin-oss/design-system-web-components 1.0.0 → 1.2.0

package/dist/es-dev/utils/calendar-common.js

@@ -0,0 +1,151 @@
+import { cva } from "class-variance-authority";
+const DEFAULT_MIN_DATE = "1900-01-01";
+const DEFAULT_MAX_DATE = "2099-12-31";
+const cvaIconButton = cva(
+  ["flex", "justify-center", "items-center", "flex-none", "text-current"],
+  {
+    variants: {
+      intent: {
+        previous: ["size-5", "i-daikin-chevron-left"],
+        next: ["size-5", "i-daikin-chevron-right"],
+        calender: ["size-6", "i-daikin-calendar"],
+        pulldown: ["size-6", "i-daikin-pulldown-down"]
+      },
+      rotate: {
+        default: [],
+        inverse: ["scale-y-[-1]"]
+      }
+    },
+    defaultVariants: {
+      rotate: "default"
+    }
+  }
+);
+function isDateOutOfRange(base, min, max) {
+  const baseValue = base.getUTCFullYear() * 1e4 + base.getUTCMonth() * 100 + base.getUTCDate();
+  const minValue = min.getUTCFullYear() * 1e4 + min.getUTCMonth() * 100 + min.getUTCDate();
+  const maxValue = max.getUTCFullYear() * 1e4 + max.getUTCMonth() * 100 + max.getUTCDate();
+  return baseValue < minValue || baseValue > maxValue;
+}
+function isMonthOutOfRange(base, min, max) {
+  const baseValue = base.getUTCFullYear() * 100 + base.getUTCMonth();
+  const minValue = min.getUTCFullYear() * 100 + min.getUTCMonth();
+  const maxValue = max.getUTCFullYear() * 100 + max.getUTCMonth();
+  return baseValue < minValue || baseValue > maxValue;
+}
+function isSameYearMonth(a, b) {
+  return a.getUTCFullYear() === b.getUTCFullYear() && a.getUTCMonth() === b.getUTCMonth();
+}
+function formatDateForProperty(date) {
+  return `${String(date.getUTCFullYear()).padStart(4, "0")}-${String(date.getUTCMonth() + 1).padStart(2, "0")}-${String(date.getUTCDate()).padStart(2, "0")}`;
+}
+function parseDateFromProperty(value) {
+  return new Date(value);
+}
+function tryParseDateFromProperty(value) {
+  if (!/^\d\d\d\d-\d\d-\d\d$/.test(value)) {
+    return null;
+  }
+  const date = new Date(value);
+  if (isNaN(date.getTime())) {
+    return null;
+  }
+  return date;
+}
+function normalizeDate(base) {
+  return parseDateFromProperty(formatDateForProperty(base));
+}
+function cloneDate(base) {
+  return normalizeDate(base);
+}
+function clampDate(base, min, max) {
+  return cloneDate(
+    base.getTime() < min.getTime() ? min : base.getTime() > max.getTime() ? max : base
+  );
+}
+function createDateClamped(year, month, date) {
+  const newDate = new Date(Date.UTC(year, month, date));
+  if (newDate.getUTCMonth() !== month) {
+    newDate.setUTCDate(0);
+  }
+  return newDate;
+}
+function getDateByMonthOffsetClamped(base, monthOffset) {
+  const newDate = new Date(base.getTime());
+  const expectedMonth = ((base.getUTCMonth() + monthOffset) % 12 + 12) % 12;
+  newDate.setUTCMonth(base.getUTCMonth() + monthOffset);
+  if (newDate.getUTCMonth() !== expectedMonth) {
+    newDate.setUTCDate(0);
+  }
+  return newDate;
+}
+function calcWeeksOnCalendar(year, month) {
+  const firstDateOfMonth = createDateClamped(year, month, 1);
+  const lastDateOfMonth = createDateClamped(year, month, 31);
+  const currentMonthDates = lastDateOfMonth.getUTCDate() - firstDateOfMonth.getUTCDate() + 1;
+  const prevMonthDates = firstDateOfMonth.getDay();
+  const nextMonthDates = 6 - lastDateOfMonth.getDay();
+  const dates = [
+    // Days of the previous month to fill columns
+    Array.from({ length: prevMonthDates }, (_, index) => {
+      const date = cloneDate(firstDateOfMonth);
+      date.setUTCDate(date.getUTCDate() - index - 1);
+      return date;
+    }).reverse(),
+    // Days of the current month
+    Array.from({ length: currentMonthDates }, (_, index) => {
+      const date = cloneDate(firstDateOfMonth);
+      date.setUTCDate(index + 1);
+      return date;
+    }),
+    // Days of the next month to fill columns
+    Array.from({ length: nextMonthDates }, (_, index) => {
+      const date = cloneDate(lastDateOfMonth);
+      date.setUTCDate(date.getUTCDate() + index + 1);
+      return date;
+    })
+  ].flat();
+  const weeks = [];
+  for (let i = 0; i < dates.length / 7; i++) {
+    weeks.push(dates.slice(i * 7, i * 7 + 7));
+  }
+  return weeks;
+}
+const DAY_COUNTS_BASE = [
+  31,
+  28,
+  31,
+  30,
+  31,
+  30,
+  31,
+  31,
+  30,
+  31,
+  30,
+  31
+];
+function countDaysForYearMonth(year, month) {
+  if (month === 1 && (!(year % 4) && !!(year % 100) || !(year % 400))) {
+    return 29;
+  }
+  return DAY_COUNTS_BASE[month];
+}
+export {
+  DEFAULT_MAX_DATE,
+  DEFAULT_MIN_DATE,
+  calcWeeksOnCalendar,
+  clampDate,
+  cloneDate,
+  countDaysForYearMonth,
+  createDateClamped,
+  cvaIconButton,
+  formatDateForProperty,
+  getDateByMonthOffsetClamped,
+  isDateOutOfRange,
+  isMonthOutOfRange,
+  isSameYearMonth,
+  normalizeDate,
+  parseDateFromProperty,
+  tryParseDateFromProperty
+};

package/dist/es-dev/utils/is-similar-to-click.d.ts

@@ -0,0 +1 @@
+export declare const isSimilarToClick: (key: string) => boolean;

package/dist/es-dev/utils/is-similar-to-click.js

@@ -0,0 +1,4 @@
+const isSimilarToClick = (key) => ["Enter", " "].includes(key);
+export {
+  isSimilarToClick
+};

package/dist/es-dev/utils/notification-common.d.ts

@@ -3,7 +3,7 @@ export declare const TOAST_ANIMATION_DURATION = 200;
 export declare function formatDate(date: Date): string | null;
 export declare const cvaContainer: (props?: ({
     variant?: "toast" | "inline" | null | undefined;
-    status?: "alarm" | "information" | "negative" | "positive" | "warning" | null | undefined;
+    status?: "alarm" | "information" | "warning" | "negative" | "positive" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const cvaContent: (props?: ({
     layout?: "horizontal" | "vertical" | null | undefined;

package/dist/es-dev/utils/notification-common.js

@@ -46,23 +46,20 @@ const cvaContainer = cva(
       status: {
         positive: [
           "before:text-ddt-color-common-success",
-          "before:i-daikin-status-positive"
+          "before:i-daikin-success"
         ],
         negative: [
           "before:text-ddt-color-common-danger-default",
-          "before:i-daikin-status-negative"
+          "before:i-daikin-error"
         ],
         warning: [
           "before:text-ddt-color-common-warning",
-          "before:i-daikin-status-warning"
-        ],
-        alarm: [
-          "before:text-ddt-color-common-alarm",
-          "before:i-daikin-status-alarm"
+          "before:i-daikin-warning"
         ],
+        alarm: ["before:text-ddt-color-common-alarm", "before:i-daikin-alarm"],
         information: [
           "before:text-ddt-color-common-information",
-          "before:i-daikin-status-information"
+          "before:i-daikin-information"
         ]
       }
     }
@@ -92,15 +89,22 @@ const cvaTimestamp = cva(
     }
   }
 );
-const cvaTitle = cva(["inline-block", "font-bold"], {
-  variants: {
-    layout: {
-      vertical: [],
-      horizontal: ["whitespace-nowrap", "overflow-hidden", "overflow-ellipsis"]
+const cvaTitle = cva(
+  ["slotted:inline-block", "font-bold", "leading-[130%]"],
+  {
+    variants: {
+      layout: {
+        vertical: [],
+        horizontal: [
+          "slotted:whitespace-nowrap",
+          "slotted:overflow-hidden",
+          "slotted:overflow-ellipsis"
+        ]
+      }
     }
   }
-});
-const cvaDescription = cva(["inline-block"], {
+);
+const cvaDescription = cva(["inline-block", "leading-[130%]"], {
   variants: {
     layout: {
       vertical: [],

package/dist/es-dev/{components/tabs → utils}/scroller.d.ts

@@ -14,7 +14,7 @@ export declare function getEffectiveParentElement(element: HTMLElement): HTMLEle
  * @returns the first scrollable ancestor element (if any)
  */
 export declare function getFirstScrollableAncestor(element: HTMLElement, direction: Direction): HTMLElement | null;
-export declare function calcScrollIntoViewOffset(target: HTMLElement, container: HTMLElement): [x: number, y: number];
+export declare function calcScrollIntoViewOffset(target: HTMLElement, container: HTMLElement, center: boolean): [x: number, y: number];
 /**
  * An alternative `.scrollIntoView()` function which only scrolls the first scrollable ancestor element.
  *
@@ -22,4 +22,4 @@ export declare function calcScrollIntoViewOffset(target: HTMLElement, container:
  * @param direction direction
  * @returns `true` if success, `false` if scrollable parent not found
  */
-export declare function scrollIntoViewOnlyParent(target: HTMLElement, direction: Direction): boolean;
+export declare function scrollIntoViewOnlyParent(target: HTMLElement, direction: Direction, center: boolean): boolean;

package/dist/es-dev/{components/tabs → utils}/scroller.js

@@ -3,7 +3,7 @@ function getEffectiveParentElement(element) {
   return element.assignedSlot || element.parentElement || ((_a = element.parentNode) == null ? void 0 : _a.host);
 }
 function getBooleanForDirection(horizontal, vertical, direction) {
-  return horizontal;
+  return direction === "horizontal" ? horizontal : direction === "vertical" ? vertical : horizontal || vertical;
 }
 function isScrollableOverflowValue(overflow) {
   return overflow !== "visible" && overflow !== "hidden" && overflow !== "clip";
@@ -15,43 +15,51 @@ function getFirstScrollableAncestor(element, direction) {
   }
   const overflow = getBooleanForDirection(
     parent.scrollWidth > parent.clientWidth,
-    parent.scrollHeight > parent.clientHeight
+    parent.scrollHeight > parent.clientHeight,
+    direction
   );
   if (overflow) {
     const computedStyle = getComputedStyle(parent);
     const scrollableOverflow = getBooleanForDirection(
       isScrollableOverflowValue(computedStyle.overflowX),
-      isScrollableOverflowValue(computedStyle.overflowY)
+      isScrollableOverflowValue(computedStyle.overflowY),
+      direction
     );
     if (scrollableOverflow) {
       return parent;
     }
   }
-  return getFirstScrollableAncestor(parent);
+  return getFirstScrollableAncestor(parent, direction);
 }
-function calcScrollIntoViewOffset(target, container) {
+function calcScrollIntoViewOffset(target, container, center) {
   const bBoxContainer = container.getBoundingClientRect();
   const bBoxTarget = target.getBoundingClientRect();
+  const xOffset = center ? (bBoxContainer.width - bBoxTarget.width) / 2 : 0;
+  const yOffset = center ? (bBoxContainer.height - bBoxTarget.height) / 2 : 0;
   const scrollByX = (
     // If the left end of the target is to the left of the container, align the left end of the target so that it is in the viewport.
-    Math.min(bBoxTarget.left - bBoxContainer.left, 0) || // If the right end of the target is to the right of the container, align the right end of the target so that it is in the viewport.
-    Math.max(bBoxTarget.right - bBoxContainer.right, 0)
+    Math.min(bBoxTarget.left - bBoxContainer.left - xOffset, 0) || // If the right end of the target is to the right of the container, align the right end of the target so that it is in the viewport.
+    Math.max(bBoxTarget.right - bBoxContainer.right + xOffset, 0)
   );
-  const scrollByY = Math.min(bBoxTarget.top - bBoxContainer.top, 0) || Math.max(bBoxTarget.bottom - bBoxContainer.bottom, 0);
+  const scrollByY = Math.min(bBoxTarget.top - bBoxContainer.top - yOffset, 0) || Math.max(bBoxTarget.bottom - bBoxContainer.bottom + yOffset, 0);
   return [scrollByX, scrollByY];
 }
-function scrollIntoViewOnlyParent(target, direction) {
-  const scrollableParent = getFirstScrollableAncestor(target);
+function scrollIntoViewOnlyParent(target, direction, center) {
+  const scrollableParent = getFirstScrollableAncestor(target, direction);
   if (!scrollableParent) {
     return false;
   }
   let [scrollByX, scrollByY] = calcScrollIntoViewOffset(
     target,
-    scrollableParent
+    scrollableParent,
+    center
   );
-  {
+  if (direction === "horizontal") {
     scrollByY = 0;
   }
+  if (direction === "vertical") {
+    scrollByX = 0;
+  }
   if (scrollByX || scrollByY) {
     scrollableParent.scrollBy(scrollByX, scrollByY);
   }

package/icons/alarm.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM11 13H13V8H11V13ZM12 16C12.2833 16 12.5208 15.9042 12.7125 15.7125C12.9042 15.5208 13 15.2833 13 15C13 14.7167 12.9042 14.4792 12.7125 14.2875C12.5208 14.0958 12.2833 14 12 14C11.7167 14 11.4792 14.0958 11.2875 14.2875C11.0958 14.4792 11 14.7167 11 15C11 15.2833 11.0958 15.5208 11.2875 15.7125C11.4792 15.9042 11.7167 16 12 16Z" fill="currentColor"/>
+</svg>

package/icons/calendar.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6C3 5.45 3.19583 4.97917 3.5875 4.5875C3.97917 4.19583 4.45 4 5 4H6V2H8V4H16V2H18V4H19C19.55 4 20.0208 4.19583 20.4125 4.5875C20.8042 4.97917 21 5.45 21 6V20C21 20.55 20.8042 21.0208 20.4125 21.4125C20.0208 21.8042 19.55 22 19 22H5ZM5 20H19V10H5V20ZM5 8H19V6H5V8ZM12 14C11.7167 14 11.4792 13.9042 11.2875 13.7125C11.0958 13.5208 11 13.2833 11 13C11 12.7167 11.0958 12.4792 11.2875 12.2875C11.4792 12.0958 11.7167 12 12 12C12.2833 12 12.5208 12.0958 12.7125 12.2875C12.9042 12.4792 13 12.7167 13 13C13 13.2833 12.9042 13.5208 12.7125 13.7125C12.5208 13.9042 12.2833 14 12 14ZM8 14C7.71667 14 7.47917 13.9042 7.2875 13.7125C7.09583 13.5208 7 13.2833 7 13C7 12.7167 7.09583 12.4792 7.2875 12.2875C7.47917 12.0958 7.71667 12 8 12C8.28333 12 8.52083 12.0958 8.7125 12.2875C8.90417 12.4792 9 12.7167 9 13C9 13.2833 8.90417 13.5208 8.7125 13.7125C8.52083 13.9042 8.28333 14 8 14ZM16 14C15.7167 14 15.4792 13.9042 15.2875 13.7125C15.0958 13.5208 15 13.2833 15 13C15 12.7167 15.0958 12.4792 15.2875 12.2875C15.4792 12.0958 15.7167 12 16 12C16.2833 12 16.5208 12.0958 16.7125 12.2875C16.9042 12.4792 17 12.7167 17 13C17 13.2833 16.9042 13.5208 16.7125 13.7125C16.5208 13.9042 16.2833 14 16 14ZM12 18C11.7167 18 11.4792 17.9042 11.2875 17.7125C11.0958 17.5208 11 17.2833 11 17C11 16.7167 11.0958 16.4792 11.2875 16.2875C11.4792 16.0958 11.7167 16 12 16C12.2833 16 12.5208 16.0958 12.7125 16.2875C12.9042 16.4792 13 16.7167 13 17C13 17.2833 12.9042 17.5208 12.7125 17.7125C12.5208 17.9042 12.2833 18 12 18ZM8 18C7.71667 18 7.47917 17.9042 7.2875 17.7125C7.09583 17.5208 7 17.2833 7 17C7 16.7167 7.09583 16.4792 7.2875 16.2875C7.47917 16.0958 7.71667 16 8 16C8.28333 16 8.52083 16.0958 8.7125 16.2875C8.90417 16.4792 9 16.7167 9 17C9 17.2833 8.90417 17.5208 8.7125 17.7125C8.52083 17.9042 8.28333 18 8 18ZM16 18C15.7167 18 15.4792 17.9042 15.2875 17.7125C15.0958 17.5208 15 17.2833 15 17C15 16.7167 15.0958 16.4792 15.2875 16.2875C15.4792 16.0958 15.7167 16 16 16C16.2833 16 16.5208 16.0958 16.7125 16.2875C16.9042 16.4792 17 16.7167 17 17C17 17.2833 16.9042 17.5208 16.7125 17.7125C16.5208 17.9042 16.2833 18 16 18Z" fill="currentColor"/>
+</svg>

package/icons/chevron-down.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-<path d="M17 7.52227L15.355 6L10 10.9447L4.645 6L3 7.52227L10 14L17 7.52227Z" fill="currentColor"/>
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 15.4L6 9.4L7.4 8L12 12.6L16.6 8L18 9.4L12 15.4Z" fill="currentColor"/>
+</svg>

package/icons/chevron-left.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14 4.645L12.4777 3L6 10L12.4777 17L14 15.355L9.05533 10L14 4.645Z" fill="currentColor"/>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 18L8 12L14 6L15.4 7.4L10.8 12L15.4 16.6L14 18Z" fill="currentColor"/>
 </svg>

package/icons/chevron-right.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.52227 3L6 4.645L10.9447 10L6 15.355L7.52227 17L14 10L7.52227 3Z" fill="currentColor"/>
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6 12L8 7.4L9.4 6L15.4 12L9.4 18L8 16.6L12.6 12Z" fill="currentColor"/>
 </svg>

package/icons/chevron-up.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-<path d="M3 12.4777L4.645 14L10 9.05533L15.355 14L17 12.4777L10 6L3 12.4777Z" fill="currentColor"/>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 10.8L7.4 15.4L6 14L12 8L18 14L16.6 15.4L12 10.8Z" fill="currentColor"/>
 </svg>

package/icons/close.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.4 19L5 17.6L10.6 12L5 6.4L6.4 5L12 10.6L17.6 5L19 6.4L13.4 12L19 17.6L17.6 19L12 13.4L6.4 19Z" fill="currentColor"/>
+</svg>

package/icons/dropdown-chevron-down.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 17L5 9.7027L6.63333 8L12 13.5946L17.3667 8L19 9.7027L12 17Z" fill="currentColor"/>
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 15.4L6 9.4L7.4 8L12 12.6L16.6 8L18 9.4L12 15.4Z" fill="currentColor"/>
+</svg>

package/icons/error.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5208 15.0958 12.2833 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0958 15.4792 11 15.7167 11 16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM11 13H13V7H11V13ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" fill="currentColor"/>
+</svg>

package/icons/information.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11 17H13V11H11V17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" fill="currentColor"/>
+</svg>

package/icons/logo-negative.svg

@@ -0,0 +1,10 @@
+<svg width="171" height="37" viewBox="0 0 171 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M97.4597 28.7563L102.533 8.51896H93.5868L88.541 28.7563H97.4597Z" fill="#0097E0"/>
+<path d="M82.0771 8.51896H71.9039L60.4215 28.729H66.34L68.2492 25.3471H76.4587L77.086 28.729H85.8137L82.1044 8.51896H82.0771ZM73.1858 20.2468H71.1402L74.4404 14.4102L75.5313 20.2468H73.1858Z" fill="#0097E0"/>
+<path d="M138.289 28.7563L143.335 8.51896H134.389L129.343 28.7563H138.289Z" fill="#0097E0"/>
+<path d="M111.942 21.7742L110.169 28.7563H101.66L106.678 8.51896H115.27L113.579 15.1466L121.243 8.51896H130.407L119.17 18.1467L126.834 28.7563H116.497L111.942 21.7742Z" fill="#0097E0"/>
+<path d="M52.9757 8.54624H50.6574H39.475L34.4293 28.7563H49.921C56.1122 28.7563 62.1943 24.1743 62.1943 17.1103C62.1943 8.81898 52.9757 8.54624 52.9757 8.54624ZM53.4121 17.7103C53.4121 17.7103 52.8393 24.2834 47.2481 24.2834H44.0843L46.8663 13.3738H49.7301C50.7392 13.3738 53.7394 13.6465 53.4121 17.7103Z" fill="#0097E0"/>
+<path d="M142.735 28.7563L147.78 8.51896H157.708L161.69 20.4377L164.663 8.51896H170.854L165.808 28.7563H155.908L151.926 16.7285L148.899 28.7563H142.735Z" fill="#0097E0"/>
+<path d="M0.773132 0.88221H18.5013L0.773132 17.1376V0.88221Z" fill="#0097E0"/>
+<path d="M21.4469 0.88221H39.175L0.773132 36.3385V20.0831L21.4469 0.88221Z" fill="#0097E0"/>
+</svg>

package/icons/logo-positive.svg

@@ -0,0 +1,10 @@
+<svg width="171" height="37" viewBox="0 0 171 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M39.5 0.77H0.76V36.51L39.5 0.77Z" fill="#54C3F1"/>
+<path id="Vector_2" d="M20.13 0.77H0.76V18.65L20.13 0.77Z" fill="black"/>
+<path id="Vector_3" d="M93.59 8.53L88.53 28.74H97.47L102.52 8.53H93.59Z" fill="#0097E0"/>
+<path id="Vector_4" d="M71.91 8.52L60.42 28.74H66.33L68.24 25.37H76.44L77.05 28.74H85.77L82.06 8.52H71.91ZM73.18 20.24H71.13L74.43 14.41L75.5 20.24H73.17H73.18Z" fill="#0097E0"/>
+<path id="Vector_5" d="M134.39 8.53L129.34 28.74H138.28L143.32 8.53H134.39Z" fill="#0097E0"/>
+<path id="Vector_6" d="M130.4 8.53H121.24L113.58 15.14L115.25 8.53H106.69L101.65 28.74H110.18L111.92 21.77L116.49 28.74H126.82L119.17 18.16L130.4 8.53Z" fill="#0097E0"/>
+<path id="Vector_7" d="M52.96 8.54H50.65H39.47L34.43 28.75H49.92C56.1 28.75 62.19 24.15 62.19 17.1C62.19 8.81 52.96 8.55 52.96 8.55V8.54ZM53.41 17.72C53.41 17.72 52.83 24.29 47.23 24.29H44.06L46.85 13.39H49.72C50.75 13.39 53.72 13.66 53.4 17.73L53.41 17.72Z" fill="#0097E0"/>
+<path id="Vector_8" d="M164.66 8.52L161.68 20.43L157.71 8.52H147.77L142.73 28.74H148.9L151.91 16.74L155.89 28.74H165.79L170.84 8.52H164.66Z" fill="#0097E0"/>
+</svg>

package/icons/password-hidden.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.1 13.3008L14.65 11.8508C14.8 11.0674 14.575 10.3341 13.975 9.65078C13.375 8.96745 12.6 8.70078 11.65 8.85078L10.2 7.40078C10.4833 7.26745 10.7708 7.16745 11.0625 7.10078C11.3542 7.03411 11.6667 7.00078 12 7.00078C13.25 7.00078 14.3125 7.43828 15.1875 8.31328C16.0625 9.18828 16.5 10.2508 16.5 11.5008C16.5 11.8341 16.4667 12.1466 16.4 12.4383C16.3333 12.7299 16.2333 13.0174 16.1 13.3008ZM19.3 16.4508L17.85 15.0508C18.4833 14.5674 19.0458 14.0383 19.5375 13.4633C20.0292 12.8883 20.45 12.2341 20.8 11.5008C19.9667 9.81745 18.7708 8.47995 17.2125 7.48828C15.6542 6.49661 13.9167 6.00078 12 6.00078C11.5167 6.00078 11.0417 6.03411 10.575 6.10078C10.1083 6.16745 9.65 6.26745 9.2 6.40078L7.65 4.85078C8.33333 4.56745 9.03333 4.35495 9.75 4.21328C10.4667 4.07161 11.2167 4.00078 12 4.00078C14.5167 4.00078 16.7583 4.69661 18.725 6.08828C20.6917 7.47995 22.1167 9.28412 23 11.5008C22.6167 12.4841 22.1125 13.3966 21.4875 14.2383C20.8625 15.0799 20.1333 15.8174 19.3 16.4508ZM19.8 22.6008L15.6 18.4508C15.0167 18.6341 14.4292 18.7716 13.8375 18.8633C13.2458 18.9549 12.6333 19.0008 12 19.0008C9.48333 19.0008 7.24167 18.3049 5.275 16.9133C3.30833 15.5216 1.88333 13.7174 1 11.5008C1.35 10.6174 1.79167 9.79662 2.325 9.03828C2.85833 8.27995 3.46667 7.60078 4.15 7.00078L1.4 4.20078L2.8 2.80078L21.2 21.2008L19.8 22.6008ZM5.55 8.40078C5.06667 8.83412 4.625 9.30912 4.225 9.82578C3.825 10.3424 3.48333 10.9008 3.2 11.5008C4.03333 13.1841 5.22917 14.5216 6.7875 15.5133C8.34583 16.5049 10.0833 17.0008 12 17.0008C12.3333 17.0008 12.6583 16.9799 12.975 16.9383C13.2917 16.8966 13.6167 16.8508 13.95 16.8008L13.05 15.8508C12.8667 15.9008 12.6917 15.9383 12.525 15.9633C12.3583 15.9883 12.1833 16.0008 12 16.0008C10.75 16.0008 9.6875 15.5633 8.8125 14.6883C7.9375 13.8133 7.5 12.7508 7.5 11.5008C7.5 11.3174 7.5125 11.1424 7.5375 10.9758C7.5625 10.8091 7.6 10.6341 7.65 10.4508L5.55 8.40078Z" fill="currentColor"/>
+</svg>

package/icons/password-visible.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 16C13.25 16 14.3125 15.5625 15.1875 14.6875C16.0625 13.8125 16.5 12.75 16.5 11.5C16.5 10.25 16.0625 9.1875 15.1875 8.3125C14.3125 7.4375 13.25 7 12 7C10.75 7 9.6875 7.4375 8.8125 8.3125C7.9375 9.1875 7.5 10.25 7.5 11.5C7.5 12.75 7.9375 13.8125 8.8125 14.6875C9.6875 15.5625 10.75 16 12 16ZM12 14.2C11.25 14.2 10.6125 13.9375 10.0875 13.4125C9.5625 12.8875 9.3 12.25 9.3 11.5C9.3 10.75 9.5625 10.1125 10.0875 9.5875C10.6125 9.0625 11.25 8.8 12 8.8C12.75 8.8 13.3875 9.0625 13.9125 9.5875C14.4375 10.1125 14.7 10.75 14.7 11.5C14.7 12.25 14.4375 12.8875 13.9125 13.4125C13.3875 13.9375 12.75 14.2 12 14.2ZM12 19C9.56667 19 7.35 18.3208 5.35 16.9625C3.35 15.6042 1.9 13.7833 1 11.5C1.9 9.21667 3.35 7.39583 5.35 6.0375C7.35 4.67917 9.56667 4 12 4C14.4333 4 16.65 4.67917 18.65 6.0375C20.65 7.39583 22.1 9.21667 23 11.5C22.1 13.7833 20.65 15.6042 18.65 16.9625C16.65 18.3208 14.4333 19 12 19ZM12 17C13.8833 17 15.6125 16.5042 17.1875 15.5125C18.7625 14.5208 19.9667 13.1833 20.8 11.5C19.9667 9.81667 18.7625 8.47917 17.1875 7.4875C15.6125 6.49583 13.8833 6 12 6C10.1167 6 8.3875 6.49583 6.8125 7.4875C5.2375 8.47917 4.03333 9.81667 3.2 11.5C4.03333 13.1833 5.2375 14.5208 6.8125 15.5125C8.3875 16.5042 10.1167 17 12 17Z" fill="currentColor"/>
+</svg>

package/icons/profile.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="50" cy="35" r="15" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.1831 78.7441C26.635 67.7529 37.4121 60 50 60C62.5879 60 73.3651 67.7529 77.8169 78.7441C70.6183 85.712 60.8099 90 50 90C39.1901 90 29.3818 85.712 22.1831 78.7441Z" fill="currentColor"/>
+</svg>

package/icons/pulldown-down.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 15L6.80383 9H17.1961L12 15Z" fill="currentColor"/>
+</svg>

package/icons/search.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path  d="M19.6 21L13.3 14.7C12.8 15.1 12.225 15.4167 11.575 15.65C10.925 15.8833 10.2333 16 9.5 16C7.68333 16 6.14583 15.3708 4.8875 14.1125C3.62917 12.8542 3 11.3167 3 9.5C3 7.68333 3.62917 6.14583 4.8875 4.8875C6.14583 3.62917 7.68333 3 9.5 3C11.3167 3 12.8542 3.62917 14.1125 4.8875C15.3708 6.14583 16 7.68333 16 9.5C16 10.2333 15.8833 10.925 15.65 11.575C15.4167 12.225 15.1 12.8 14.7 13.3L21 19.6L19.6 21ZM9.5 14C10.75 14 11.8125 13.5625 12.6875 12.6875C13.5625 11.8125 14 10.75 14 9.5C14 8.25 13.5625 7.1875 12.6875 6.3125C11.8125 5.4375 10.75 5 9.5 5C8.25 5 7.1875 5.4375 6.3125 6.3125C5.4375 7.1875 5 8.25 5 9.5C5 10.75 5.4375 11.8125 6.3125 12.6875C7.1875 13.5625 8.25 14 9.5 14Z" fill="currentColor"/>
+</svg>

package/icons/success.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" fill="currentColor"/>
+</svg>

package/icons/warning.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M1 21L12 2L23 21H1ZM12 18C12.2833 18 12.5208 17.9042 12.7125 17.7125C12.9042 17.5208 13 17.2833 13 17C13 16.7167 12.9042 16.4792 12.7125 16.2875C12.5208 16.0958 12.2833 16 12 16C11.7167 16 11.4792 16.0958 11.2875 16.2875C11.0958 16.4792 11 16.7167 11 17C11 17.2833 11.0958 17.5208 11.2875 17.7125C11.4792 17.9042 11.7167 18 12 18ZM11 15H13V10H11V15Z" fill="currentColor"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@daikin-oss/design-system-web-components",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Design system using web components",
   "type": "module",
   "files": [
@@ -15,6 +15,7 @@
     "type": "git",
     "url": "https://github.com/dsv-rp/DDS.git"
   },
+  "license": "MIT",
   "main": "./dist/cjs/index.cjs",
   "module": "./dist/es/index.js",
   "types": "./dist/es/index.d.ts",
@@ -68,7 +69,7 @@
     "test:attw": "attw --pack .",
     "test:unit": "vitest",
     "test:interaction-wc": "start-server-and-test storybook:ci-wc http://localhost:6099 \"npx test-storybook --url http://localhost:6099\"",
-    "test:interaction-react": "start-server-and-test storybook:ci-react http://localhost:6099 \"npx test-storybook --url http://localhost:6099\"",
+    "test:interaction-react": "start-server-and-test storybook:ci-react http://localhost:6099 \"npx test-storybook --url http://localhost:6099 -c .storybook/react\"",
     "test:interaction": "npm run test:interaction-wc && npm run test:interaction-react",
     "test:visual-wc": "cross-env STORYBOOK_FW=web-components playwright test",
     "test:visual-react": "cross-env STORYBOOK_FW=react playwright test",
@@ -81,6 +82,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
     "class-variance-authority": "^0.7.1",
+    "focus-trap": "^7.6.4",
     "lit": "^3.2.1"
   },
   "devDependencies": {
@@ -114,6 +116,7 @@
     "@storybook/theming": "^8.5.5",
     "@storybook/web-components": "^8.5.5",
     "@storybook/web-components-vite": "^8.5.5",
+    "@testing-library/user-event": "^14.6.1",
     "@types/eslint__js": "^8.42.3",
     "@types/eslint-config-prettier": "^6.11.3",
     "@types/jest-image-snapshot": "^6.4.0",
@@ -130,6 +133,7 @@
     "eslint-plugin-lit-a11y": "^4.1.4",
     "eslint-plugin-wc": "^2.2.0",
     "fast-glob": "^3.3.3",
+    "hono": "^4.7.8",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
     "jiti": "^2.4.2",
@@ -138,7 +142,7 @@
     "playwright": "1.46.1",
     "playwright-core": "1.46.1",
     "postcss": "^8.5.2",
-    "prettier": "^3.5.0",
+    "prettier": "^3.5.3",
     "prettier-plugin-organize-imports": "^4.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/icons/cross.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path id="&#244;&#128;&#134;&#132;" d="M3.29813 20.7047C3.16196 20.576 3.07118 20.4246 3.02579 20.2505C2.98796 20.0763 2.99175 19.9022 3.03714 19.7281C3.08253 19.5539 3.16952 19.4025 3.29813 19.2738L10.5604 11.9943L3.29813 4.72618C3.16952 4.59748 3.08253 4.44606 3.03714 4.27192C2.99931 4.09779 2.99931 3.92366 3.03714 3.74953C3.08253 3.57539 3.16952 3.42397 3.29813 3.29527C3.42673 3.15899 3.57803 3.07192 3.75202 3.03407C3.92601 2.98864 4.10001 2.98864 4.274 3.03407C4.45556 3.07192 4.61064 3.15899 4.73924 3.29527L12.0015 10.5634L19.2639 3.29527C19.3925 3.15899 19.5438 3.07192 19.7177 3.03407C19.8917 2.98864 20.0657 2.98864 20.2397 3.03407C20.4137 3.07192 20.5688 3.15899 20.705 3.29527C20.8336 3.42397 20.9206 3.57539 20.966 3.74953C21.0113 3.92366 21.0113 4.09779 20.966 4.27192C20.9206 4.44606 20.8336 4.59748 20.705 4.72618L13.4427 11.9943L20.705 19.2738C20.8336 19.4025 20.9168 19.5539 20.9546 19.7281C21 19.9022 21 20.0763 20.9546 20.2505C20.9168 20.4246 20.8336 20.576 20.705 20.7047C20.5764 20.841 20.4213 20.9281 20.2397 20.9659C20.0657 21.0114 19.8917 21.0114 19.7177 20.9659C19.5438 20.9205 19.3925 20.8334 19.2639 20.7047L12.0015 13.4366L4.73924 20.7047C4.61064 20.8334 4.45934 20.9205 4.28535 20.9659C4.11135 21.0114 3.93736 21.0114 3.76337 20.9659C3.58937 20.9205 3.43429 20.8334 3.29813 20.7047Z" fill="currentColor"/>
-</svg>

package/icons/notification-close.svg

@@ -1,5 +0,0 @@
-<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd"
-    d="M16.75 1L10 7.75L3.24887 1L1 3.25112L7.75 10L1 16.75L3.24887 19L10 12.25L16.75 19L19 16.75L12.2489 10L19 3.25112L16.75 1Z"
-    fill="currentColor" />
-</svg>

package/icons/status-alarm.svg

@@ -1,5 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M18 16V11C18 7.93 16.36 5.36 13.5 4.68V4C13.5 3.17 12.83 2.5 12 2.5C11.17 2.5 10.5 3.17 10.5 4V4.68C7.63 5.36 6 7.92 6 11V16L4 18V19H20V18L18 16ZM13 16H11V14H13V16ZM13 12H11V8H13V12ZM12 22C13.1 22 14 21.1 14 20H10C10 21.1 10.89 22 12 22Z"
-    fill="currentColor" />
-</svg>

package/icons/status-error.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.16187 9.32814H8.82812V4.32939H7.16187V9.32814ZM7.99511 12.3036C7.46953 12.3036 7.04297 11.878 7.04297 11.3514C7.04297 10.8249 7.46953 10.3993 7.99511 10.3993C8.52069 10.3993 8.94725 10.8249 8.94725 11.3514C8.94725 11.878 8.52069 12.3036 7.99511 12.3036ZM7.99508 1.83002C4.31433 1.83002 1.33008 4.81427 1.33008 8.49502C1.33008 12.1758 4.31433 15.16 7.99508 15.16C11.6758 15.16 14.6601 12.1758 14.6601 8.49502C14.6601 4.81427 11.6758 1.83002 7.99508 1.83002Z" fill="currentColor"/>
-</svg>

package/icons/status-information.svg

@@ -1,5 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M12 1.19995C6.03841 1.19995 1.20001 6.03835 1.20001 12C1.20001 17.9615 6.03841 22.7999 12 22.7999C17.9616 22.7999 22.8 17.9615 22.8 12C22.8 6.03835 17.9616 1.19995 12 1.19995ZM13.08 17.4H10.92V10.92H13.08V17.4ZM13.08 8.75995H10.92V6.59995H13.08V8.75995Z"
-    fill="currentColor" />
-</svg>

package/icons/status-negative.svg

@@ -1,5 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V15H13V17ZM13 13H11V7H13V13Z"
-    fill="currentColor" />
-</svg>

package/icons/status-positive.svg

@@ -1,5 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"
-    fill="currentColor" />
-</svg>

package/icons/status-warning.svg

@@ -1,3 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path d="M1 22H23L12 3L1 22ZM13 19H11V17H13V19ZM13 15H11V11H13V15Z" fill="currentColor" />
-</svg>