@idds/vue 1.3.3 → 1.4.0

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, inject, ref, computed, onMounted, onUnmounted, watch, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot, createTextVNode, toDisplayString, createVNode, createCommentVNode, createBlock, resolveDynamicComponent, Transition, withCtx, provide, withModifiers, normalizeStyle, nextTick, h, unref, Fragment, renderList, mergeProps, withDirectives, vModelDynamic, withKeys, vModelText, Teleport, createStaticVNode, vModelRadio, useAttrs } from "vue";
+import { defineComponent, inject, ref, computed, onMounted, onUnmounted, watch, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot, createTextVNode, toDisplayString, createVNode, createCommentVNode, createBlock, resolveDynamicComponent, Transition, withCtx, provide, withModifiers, normalizeStyle, nextTick, h, unref, Fragment, renderList, mergeProps, useAttrs, withDirectives, vModelDynamic, withKeys, vModelText, Teleport, createStaticVNode, vModelRadio } from "vue";
 const iddsColorTokens = {
   // Neutral Colors
   "neutral-25": "var(--ina-neutral-25)",
@@ -572,7 +572,7 @@ const _hoisted_7$j = {
   key: 0,
   class: "ina-accordion-card__subtitle"
 };
-const _hoisted_8$f = ["id", "aria-labelledby"];
+const _hoisted_8$e = ["id", "aria-labelledby"];
 const _hoisted_9$b = { class: "ina-accordion-card__body" };
 const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "AccordionCard",
@@ -667,7 +667,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
                 createElementVNode("div", _hoisted_9$b, [
                   renderSlot(_ctx.$slots, "default", {}, void 0, true)
                 ])
-              ], 8, _hoisted_8$f)) : createCommentVNode("", true)
+              ], 8, _hoisted_8$e)) : createCommentVNode("", true)
             ]),
             _: 3
           })
@@ -1694,7 +1694,7 @@ const _hoisted_6$i = {
   class: "ina-card__avatar"
 };
 const _hoisted_7$h = ["src", "alt"];
-const _hoisted_8$e = {
+const _hoisted_8$d = {
   key: 0,
   class: "ina-card__title"
 };
@@ -1843,7 +1843,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             ])
           ])) : createCommentVNode("", true),
           createElementVNode("div", null, [
-            __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("h3", _hoisted_8$e, [
+            __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("h3", _hoisted_8$d, [
               renderSlot(_ctx.$slots, "title", {}, () => [
                 createTextVNode(toDisplayString(__props.title), 1)
               ])
@@ -1990,6 +1990,9 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
       if (props.disabled) {
         classes.push("ina-checkbox--disabled");
       }
+      if (props.subtext) {
+        classes.push("ina-checkbox--with-subtext");
+      }
       return classes;
     });
     const boxClasses = computed(() => {
@@ -2054,11 +2057,12 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
             disabled: __props.disabled,
             readonly: __props.readonly,
             indeterminate: __props.indeterminate,
-            class: "ina-checkbox__input peer",
+            class: "ina-checkbox__input peer"
+          }, _ctx.$attrs, {
             onChange: handleChange,
             onFocus: handleFocus,
             onBlur: handleBlur
-          }, _ctx.$attrs), null, 16, _hoisted_2$v),
+          }), null, 16, _hoisted_2$v),
           createElementVNode("div", {
             class: normalizeClass(boxClasses.value)
           }, [
@@ -2313,7 +2317,7 @@ const _hoisted_4$n = {
   key: 0,
   class: "ina-text-field__prefix-icon"
 };
-const _hoisted_5$j = ["id", "type", "placeholder", "disabled", "readonly", "maxlength", "autocomplete", "spellcheck", "autocapitalize", "autocorrect", "inputmode", "dir"];
+const _hoisted_5$j = ["id", "name", "type", "placeholder", "disabled", "readonly", "maxlength", "autocomplete", "spellcheck", "autocapitalize", "autocorrect", "inputmode", "dir"];
 const _hoisted_6$g = {
   key: 1,
   class: "ina-text-field__char-count"
@@ -2350,6 +2354,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const attrs = useAttrs();
     const inputRef = ref();
     const inputValue = ref(getInitialValue());
     const debounceTimer = ref();
@@ -2363,9 +2368,20 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       }
       return value;
     }
-    const inputId = computed(
-      () => `text-field-${Math.random().toString(36).substr(2, 9)}`
-    );
+    const inputId = computed(() => {
+      const providedId = attrs.id || attrs.name;
+      if (providedId) {
+        return String(providedId);
+      }
+      if (props.label) {
+        return String(props.label).toLowerCase();
+      }
+      return `text-field-${Math.random().toString(36).substr(2, 9)}`;
+    });
+    const filteredAttrs = computed(() => {
+      const { id, name, ...rest } = attrs;
+      return rest;
+    });
     const wrapperClasses = computed(() => {
       const classes = ["ina-text-field__wrapper"];
       classes.push(`ina-text-field__wrapper--size-${props.size}`);
@@ -2534,11 +2550,12 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           __props.prefixIcon ? (openBlock(), createElementBlock("div", _hoisted_4$n, [
             (openBlock(), createBlock(resolveDynamicComponent(__props.prefixIcon), { size: 16 }))
           ])) : createCommentVNode("", true),
-          withDirectives(createElementVNode("input", mergeProps(_ctx.$attrs, {
+          withDirectives(createElementVNode("input", mergeProps(filteredAttrs.value, {
             id: inputId.value,
             ref_key: "inputRef",
             ref: inputRef,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
+            name: unref(attrs).name || void 0,
             type: __props.type,
             placeholder: __props.placeholder,
             disabled: __props.disabled,
@@ -3332,7 +3349,7 @@ const _hoisted_4$j = { class: "ina-file-upload__icon" };
 const _hoisted_5$h = { class: "ina-file-upload__text" };
 const _hoisted_6$f = { class: "ina-file-upload__title" };
 const _hoisted_7$f = { class: "ina-file-upload__description" };
-const _hoisted_8$d = ["disabled"];
+const _hoisted_8$c = ["disabled"];
 const _hoisted_9$9 = { class: "ina-file-upload__files" };
 const _hoisted_10$8 = { class: "ina-file-upload__file-indicator" };
 const _hoisted_11$8 = {
@@ -3614,7 +3631,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
               class: "ina-file-upload__button",
               disabled: __props.disabled,
               onClick: withModifiers(triggerFileInput, ["stop"])
-            }, " Pilih File ", 8, _hoisted_8$d)
+            }, " Pilih File ", 8, _hoisted_8$c)
           ])
         ], 34),
         files.value.length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
@@ -3944,7 +3961,7 @@ const _hoisted_4$h = ["id"];
 const _hoisted_5$g = ["aria-label"];
 const _hoisted_6$e = { class: "ina-modal__body" };
 const _hoisted_7$e = ["id"];
-const _hoisted_8$c = {
+const _hoisted_8$b = {
   key: 1,
   class: "ina-modal__footer"
 };
@@ -4080,7 +4097,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                     }, toDisplayString(__props.description), 9, _hoisted_7$e)) : createCommentVNode("", true),
                     renderSlot(_ctx.$slots, "default", {}, void 0, true)
                   ]),
-                  __props.showFooter ? (openBlock(), createElementBlock("div", _hoisted_8$c, [
+                  __props.showFooter ? (openBlock(), createElementBlock("div", _hoisted_8$b, [
                     renderSlot(_ctx.$slots, "footer", {}, void 0, true)
                   ])) : createCommentVNode("", true)
                 ], 10, _hoisted_2$o)
@@ -4112,15 +4129,14 @@ const _hoisted_2$n = {
   key: 0,
   class: "ina-month-picker__required"
 };
-const _hoisted_3$l = { class: "ina-month-picker__wrapper" };
-const _hoisted_4$g = ["id", "disabled", "aria-expanded", "aria-labelledby"];
-const _hoisted_5$f = {
+const _hoisted_3$l = ["id", "disabled", "aria-expanded", "aria-labelledby"];
+const _hoisted_4$g = {
   key: 0,
   class: "ina-month-picker__prefix-icon"
 };
-const _hoisted_6$d = { class: "ina-month-picker__trigger-text" };
-const _hoisted_7$d = { class: "ina-month-picker__grid" };
-const _hoisted_8$b = ["disabled", "onClick", "onMouseenter"];
+const _hoisted_5$f = { class: "ina-month-picker__trigger-text" };
+const _hoisted_6$d = { class: "ina-month-picker__grid" };
+const _hoisted_7$d = ["disabled", "onClick", "onMouseenter"];
 const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "MonthPicker",
   props: {
@@ -4140,6 +4156,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const containerRef = ref();
     const triggerRef = ref();
     const panelRef = ref();
     const isOpen = ref(false);
@@ -4236,39 +4253,23 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         let leftValue = void 0;
         let rightValue = void 0;
         if (isMobile) {
-          const threshold = 16;
-          const triggerCenter = triggerRect.left + triggerRect.width / 2;
-          const viewportCenter = viewportWidth / 2;
-          if (triggerRect.right > viewportWidth - threshold) {
-            shouldUseRight = true;
-            rightValue = `${viewportWidth - triggerRect.right}px`;
-            leftValue = void 0;
-          } else if (triggerRect.left < threshold) {
-            shouldUseRight = false;
-            leftValue = `${triggerRect.left}px`;
-            rightValue = void 0;
-          } else if (Math.abs(triggerCenter - viewportCenter) < panelWidthValue / 2) {
-            const panelLeft = triggerRect.left - (panelWidthValue - triggerRect.width) / 2;
-            if (panelLeft < 0) {
-              leftValue = "0";
-              rightValue = void 0;
-            } else if (panelLeft + panelWidthValue > viewportWidth) {
-              rightValue = "0";
-              leftValue = void 0;
-            } else {
-              leftValue = `${panelLeft}px`;
-              rightValue = void 0;
+          const panelCenterX = viewportWidth / 2;
+          const panelLeftFromViewport = panelCenterX - panelWidthValue / 2;
+          if (containerRef.value) {
+            const containerRect = containerRef.value.getBoundingClientRect();
+            const leftRelativeToContainer = panelLeftFromViewport - containerRect.left;
+            let calculatedLeft = Math.max(0, leftRelativeToContainer);
+            const maxLeft = viewportWidth - panelWidthValue - containerRect.left;
+            if (leftRelativeToContainer > maxLeft) {
+              calculatedLeft = Math.max(0, maxLeft);
             }
+            leftValue = `${calculatedLeft}px`;
+            rightValue = void 0;
             shouldUseRight = false;
           } else {
-            shouldUseRight = panelWidthValue > availableSpaceRight;
-            if (shouldUseRight) {
-              rightValue = `${viewportWidth - triggerRect.right}px`;
-              leftValue = void 0;
-            } else {
-              leftValue = `${triggerRect.left}px`;
-              rightValue = void 0;
-            }
+            leftValue = `${Math.max(0, panelLeftFromViewport)}px`;
+            rightValue = void 0;
+            shouldUseRight = false;
           }
         } else {
           shouldUseRight = panelWidthValue > availableSpaceRight;
@@ -4373,6 +4374,8 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
+        ref_key: "containerRef",
+        ref: containerRef,
         class: normalizeClass(["ina-month-picker", containerClasses.value])
       }, [
         __props.label ? (openBlock(), createElementBlock("label", {
@@ -4383,94 +4386,92 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
           createTextVNode(toDisplayString(__props.label) + " ", 1),
           __props.required ? (openBlock(), createElementBlock("span", _hoisted_2$n, "*")) : createCommentVNode("", true)
         ], 8, _hoisted_1$o)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$l, [
-          createElementVNode("button", {
-            id: triggerId.value,
-            ref_key: "triggerRef",
-            ref: triggerRef,
+        createElementVNode("button", {
+          id: triggerId.value,
+          ref_key: "triggerRef",
+          ref: triggerRef,
+          type: "button",
+          class: normalizeClass(triggerClasses.value),
+          disabled: __props.disabled || __props.readonly,
+          "aria-expanded": isOpen.value,
+          "aria-haspopup": true,
+          "aria-labelledby": __props.label ? `${triggerId.value}-label` : void 0,
+          onClick: togglePanel,
+          onKeydown: handleKeydown
+        }, [
+          __props.showIcon ? (openBlock(), createElementBlock("div", _hoisted_4$g, [..._cache[1] || (_cache[1] = [
+            createStaticVNode('<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-f53ade24><rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" data-v-f53ade24></rect><line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-f53ade24></line><line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-f53ade24></line><line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-f53ade24></line></svg>', 1)
+          ])])) : createCommentVNode("", true),
+          createElementVNode("span", _hoisted_5$f, toDisplayString(selectedMonthDisplay.value || __props.placeholder), 1),
+          __props.showClearButton && selectedMonth.value !== void 0 && !__props.disabled && !__props.readonly ? (openBlock(), createElementBlock("button", {
+            key: 1,
             type: "button",
-            class: normalizeClass(triggerClasses.value),
-            disabled: __props.disabled || __props.readonly,
-            "aria-expanded": isOpen.value,
-            "aria-haspopup": true,
-            "aria-labelledby": __props.label ? `${triggerId.value}-label` : void 0,
-            onClick: togglePanel,
-            onKeydown: handleKeydown
-          }, [
-            __props.showIcon ? (openBlock(), createElementBlock("div", _hoisted_5$f, [..._cache[1] || (_cache[1] = [
-              createStaticVNode('<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-452431d5><rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" data-v-452431d5></rect><line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-452431d5></line><line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-452431d5></line><line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-452431d5></line></svg>', 1)
-            ])])) : createCommentVNode("", true),
-            createElementVNode("span", _hoisted_6$d, toDisplayString(selectedMonthDisplay.value || __props.placeholder), 1),
-            __props.showClearButton && selectedMonth.value !== void 0 && !__props.disabled && !__props.readonly ? (openBlock(), createElementBlock("button", {
-              key: 1,
-              type: "button",
-              class: "ina-month-picker__clear-button",
-              onClick: withModifiers(handleClear, ["stop"])
-            }, [..._cache[2] || (_cache[2] = [
-              createElementVNode("svg", {
-                width: "16",
-                height: "16",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                xmlns: "http://www.w3.org/2000/svg"
-              }, [
-                createElementVNode("path", {
-                  d: "M18 6L6 18M6 6L18 18",
-                  stroke: "currentColor",
-                  "stroke-width": "2",
-                  "stroke-linecap": "round",
-                  "stroke-linejoin": "round"
-                })
-              ], -1)
-            ])])) : createCommentVNode("", true),
-            (openBlock(), createElementBlock("svg", {
-              class: normalizeClass(["ina-month-picker__chevron", { "ina-month-picker__chevron--open": isOpen.value }]),
+            class: "ina-month-picker__clear-button",
+            onClick: withModifiers(handleClear, ["stop"])
+          }, [..._cache[2] || (_cache[2] = [
+            createElementVNode("svg", {
               width: "16",
               height: "16",
               viewBox: "0 0 24 24",
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg"
-            }, [..._cache[3] || (_cache[3] = [
+            }, [
               createElementVNode("path", {
-                d: "M6 9L12 15L18 9",
+                d: "M18 6L6 18M6 6L18 18",
                 stroke: "currentColor",
                 "stroke-width": "2",
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round"
-              }, null, -1)
-            ])], 2))
-          ], 42, _hoisted_4$g),
-          createVNode(Transition, { name: "panel" }, {
-            default: withCtx(() => [
-              isOpen.value ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                ref_key: "panelRef",
-                ref: panelRef,
-                class: normalizeClass([
-                  "ina-month-picker__panel",
-                  { "ina-month-picker__panel--open": isOpen.value },
-                  { "ina-month-picker__panel--right-aligned": useRightPositioning.value }
-                ]),
-                style: normalizeStyle(panelStyle.value)
-              }, [
-                createElementVNode("div", _hoisted_7$d, [
-                  (openBlock(), createElementBlock(Fragment, null, renderList(monthNames, (month, index2) => {
-                    return createElementVNode("button", {
-                      key: index2,
-                      type: "button",
-                      class: normalizeClass(getMonthClasses(index2)),
-                      disabled: props.disabled,
-                      onClick: ($event) => selectMonth(index2),
-                      onMouseenter: ($event) => !props.disabled && (hoveredMonth.value = index2),
-                      onMouseleave: _cache[0] || (_cache[0] = ($event) => hoveredMonth.value = null)
-                    }, toDisplayString(month), 43, _hoisted_8$b);
-                  }), 64))
-                ])
-              ], 6)) : createCommentVNode("", true)
-            ]),
-            _: 1
-          })
-        ]),
+              })
+            ], -1)
+          ])])) : createCommentVNode("", true),
+          (openBlock(), createElementBlock("svg", {
+            class: normalizeClass(["ina-month-picker__chevron", { "ina-month-picker__chevron--open": isOpen.value }]),
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg"
+          }, [..._cache[3] || (_cache[3] = [
+            createElementVNode("path", {
+              d: "M6 9L12 15L18 9",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, null, -1)
+          ])], 2))
+        ], 42, _hoisted_3$l),
+        createVNode(Transition, { name: "panel" }, {
+          default: withCtx(() => [
+            isOpen.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              ref_key: "panelRef",
+              ref: panelRef,
+              class: normalizeClass([
+                "ina-month-picker__panel",
+                { "ina-month-picker__panel--open": isOpen.value },
+                { "ina-month-picker__panel--right-aligned": useRightPositioning.value }
+              ]),
+              style: normalizeStyle(panelStyle.value)
+            }, [
+              createElementVNode("div", _hoisted_6$d, [
+                (openBlock(), createElementBlock(Fragment, null, renderList(monthNames, (month, index2) => {
+                  return createElementVNode("button", {
+                    key: index2,
+                    type: "button",
+                    class: normalizeClass(getMonthClasses(index2)),
+                    disabled: props.disabled,
+                    onClick: ($event) => selectMonth(index2),
+                    onMouseenter: ($event) => !props.disabled && (hoveredMonth.value = index2),
+                    onMouseleave: _cache[0] || (_cache[0] = ($event) => hoveredMonth.value = null)
+                  }, toDisplayString(month), 43, _hoisted_7$d);
+                }), 64))
+              ])
+            ], 6)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }),
         __props.statusMessage ? (openBlock(), createElementBlock("div", {
           key: 1,
           class: normalizeClass(statusClasses.value)
@@ -4479,7 +4480,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const MonthPicker = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-452431d5"]]);
+const MonthPicker = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-f53ade24"]]);
 const _hoisted_1$n = {
   key: 0,
   class: "ina-multiple-choice-grid__title"
@@ -5584,6 +5585,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const containerRef = ref();
     const triggerRef = ref();
     const panelRef = ref();
     const isOpen = ref(false);
@@ -5679,48 +5681,32 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         const panelRect = panelRef.value.getBoundingClientRect();
         const viewportWidth = window.innerWidth;
         const viewportHeight = window.innerHeight;
-        const defaultPanelWidth = 320;
+        const isMobile = viewportWidth <= 640;
+        const defaultPanelWidth = isMobile ? 200 : 320;
         const panelWidthValue = panelRect.width || defaultPanelWidth;
         const availableSpaceRight = viewportWidth - triggerRect.right;
         triggerRect.left;
-        const isMobile = viewportWidth <= 640;
         let shouldUseRight = false;
         let leftValue = void 0;
         let rightValue = void 0;
         if (isMobile) {
-          const threshold = 16;
-          const triggerCenter = triggerRect.left + triggerRect.width / 2;
-          const viewportCenter = viewportWidth / 2;
-          if (triggerRect.right > viewportWidth - threshold) {
-            shouldUseRight = true;
-            rightValue = `${viewportWidth - triggerRect.right}px`;
-            leftValue = void 0;
-          } else if (triggerRect.left < threshold) {
-            shouldUseRight = false;
-            leftValue = `${triggerRect.left}px`;
-            rightValue = void 0;
-          } else if (Math.abs(triggerCenter - viewportCenter) < panelWidthValue / 2) {
-            const panelLeft = triggerRect.left - (panelWidthValue - triggerRect.width) / 2;
-            if (panelLeft < 0) {
-              leftValue = "0";
-              rightValue = void 0;
-            } else if (panelLeft + panelWidthValue > viewportWidth) {
-              rightValue = "0";
-              leftValue = void 0;
-            } else {
-              leftValue = `${panelLeft}px`;
-              rightValue = void 0;
+          const panelCenterX = viewportWidth / 2;
+          const panelLeftFromViewport = panelCenterX - panelWidthValue / 2;
+          if (containerRef.value) {
+            const containerRect = containerRef.value.getBoundingClientRect();
+            const leftRelativeToContainer = panelLeftFromViewport - containerRect.left;
+            let calculatedLeft = Math.max(0, leftRelativeToContainer);
+            const maxLeft = viewportWidth - panelWidthValue - containerRect.left;
+            if (leftRelativeToContainer > maxLeft) {
+              calculatedLeft = Math.max(0, maxLeft);
             }
+            leftValue = `${calculatedLeft}px`;
+            rightValue = void 0;
             shouldUseRight = false;
           } else {
-            shouldUseRight = panelWidthValue > availableSpaceRight;
-            if (shouldUseRight) {
-              rightValue = `${viewportWidth - triggerRect.right}px`;
-              leftValue = void 0;
-            } else {
-              leftValue = `${triggerRect.left}px`;
-              rightValue = void 0;
-            }
+            leftValue = `${Math.max(0, panelLeftFromViewport)}px`;
+            rightValue = void 0;
+            shouldUseRight = false;
           }
         } else {
           shouldUseRight = panelWidthValue > availableSpaceRight;
@@ -5844,6 +5830,8 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
+        ref_key: "containerRef",
+        ref: containerRef,
         class: normalizeClass(["ina-year-picker", containerClasses.value])
       }, [
         __props.label ? (openBlock(), createElementBlock("label", {
@@ -5869,7 +5857,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             onKeydown: handleKeydown
           }, [
             __props.showIcon ? (openBlock(), createElementBlock("div", _hoisted_5$9, [..._cache[1] || (_cache[1] = [
-              createStaticVNode('<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-3336f854><rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" data-v-3336f854></rect><line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-3336f854></line><line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-3336f854></line><line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-3336f854></line></svg>', 1)
+              createStaticVNode('<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-6e7c1cdf><rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" data-v-6e7c1cdf></rect><line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-6e7c1cdf></line><line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-6e7c1cdf></line><line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" data-v-6e7c1cdf></line></svg>', 1)
             ])])) : createCommentVNode("", true),
             createElementVNode("span", _hoisted_6$8, toDisplayString(selectedYear.value || __props.placeholder), 1),
             __props.showClearButton && selectedYear.value && !__props.disabled && !__props.readonly ? (openBlock(), createElementBlock("button", {
@@ -5953,7 +5941,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const YearPicker = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-3336f854"]]);
+const YearPicker = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-6e7c1cdf"]]);
 const _hoisted_1$g = ["for"];
 const _hoisted_2$g = {
   key: 0,
@@ -5978,13 +5966,15 @@ const _hoisted_15$2 = { class: "ina-date-picker__dropdown-container" };
 const _hoisted_16$1 = { class: "ina-date-picker__dropdown-container" };
 const _hoisted_17$1 = { class: "ina-date-picker__calendar-grid" };
 const _hoisted_18$1 = ["disabled", "onClick"];
-const _hoisted_19$1 = { class: "ina-date-picker__calendar" };
-const _hoisted_20$1 = { class: "ina-date-picker__next-month-header" };
-const _hoisted_21$1 = { class: "ina-date-picker__next-month-controls" };
-const _hoisted_22 = { class: "ina-date-picker__dropdown-container" };
+const _hoisted_19$1 = { class: "ina-date-picker__day-number" };
+const _hoisted_20$1 = { class: "ina-date-picker__calendar" };
+const _hoisted_21$1 = { class: "ina-date-picker__next-month-header" };
+const _hoisted_22 = { class: "ina-date-picker__next-month-controls" };
 const _hoisted_23 = { class: "ina-date-picker__dropdown-container" };
-const _hoisted_24 = { class: "ina-date-picker__calendar-grid" };
-const _hoisted_25 = ["disabled", "onClick"];
+const _hoisted_24 = { class: "ina-date-picker__dropdown-container" };
+const _hoisted_25 = { class: "ina-date-picker__calendar-grid" };
+const _hoisted_26 = ["disabled", "onClick"];
+const _hoisted_27 = { class: "ina-date-picker__day-number" };
 const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "DatePicker",
   props: {
@@ -6008,7 +5998,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     disabledFutureDate: { type: Boolean },
     disabledDateBefore: {},
     disabledDateAfter: {},
-    triggerWidth: { default: "100%" },
+    triggerWidth: { default: "" },
     panelMaxHeight: { default: void 0 },
     panelClassName: { default: "" },
     triggerClassname: { default: "" },
@@ -6937,12 +6927,14 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                       class: normalizeClass(getDayClasses(day)),
                       disabled: isDayDisabled(day.date),
                       onClick: ($event) => selectDay(day)
-                    }, toDisplayString(day.date.getDate()), 11, _hoisted_18$1);
+                    }, [
+                      createElementVNode("span", _hoisted_19$1, toDisplayString(day.date.getDate()), 1)
+                    ], 10, _hoisted_18$1);
                   }), 128))
                 ])
               ]),
-              createElementVNode("div", _hoisted_19$1, [
-                createElementVNode("div", _hoisted_20$1, [
+              createElementVNode("div", _hoisted_20$1, [
+                createElementVNode("div", _hoisted_21$1, [
                   createElementVNode("button", {
                     type: "button",
                     class: "ina-date-picker__nav-button",
@@ -6953,8 +6945,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                       class: "ina-date-picker__nav-icon"
                     })
                   ]),
-                  createElementVNode("div", _hoisted_21$1, [
-                    createElementVNode("div", _hoisted_22, [
+                  createElementVNode("div", _hoisted_22, [
+                    createElementVNode("div", _hoisted_23, [
                       createVNode(MonthPicker, {
                         "model-value": nextMonth.value,
                         disabled: __props.disabled,
@@ -6963,7 +6955,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                         "onUpdate:modelValue": handleNextMonthChange
                       }, null, 8, ["model-value", "disabled", "readonly"])
                     ]),
-                    createElementVNode("div", _hoisted_23, [
+                    createElementVNode("div", _hoisted_24, [
                       createVNode(YearPicker, {
                         "model-value": nextYear.value,
                         "min-year": 1900,
@@ -6987,7 +6979,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                     })
                   ])
                 ]),
-                createElementVNode("div", _hoisted_24, [
+                createElementVNode("div", _hoisted_25, [
                   (openBlock(), createElementBlock(Fragment, null, renderList(dayNames, (day) => {
                     return createElementVNode("div", {
                       key: `rh-${day}`,
@@ -7001,7 +6993,9 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                       class: normalizeClass(getDayClasses(day)),
                       disabled: isDayDisabled(day.date),
                       onClick: ($event) => selectDay(day)
-                    }, toDisplayString(day.date.getDate()), 11, _hoisted_25);
+                    }, [
+                      createElementVNode("span", _hoisted_27, toDisplayString(day.date.getDate()), 1)
+                    ], 10, _hoisted_26);
                   }), 128))
                 ])
               ])
@@ -7016,7 +7010,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-9cd9726e"]]);
+const DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-d43f3297"]]);
 const _hoisted_1$f = ["disabled"];
 const _hoisted_2$f = {
   key: 0,
@@ -7613,10 +7607,10 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(Teleport, { to: "body" }, [
         createVNode(Transition, { name: "drawer" }, {
           default: withCtx(() => [
-            isOpen.value ? (openBlock(), createElementBlock("div", {
+            isOpen.value ? (openBlock(), createElementBlock("div", mergeProps({
               key: 0,
-              class: normalizeClass(["ina-drawer", drawerClasses.value])
-            }, [
+              class: ["ina-drawer", drawerClasses.value]
+            }, _ctx.$attrs), [
               createElementVNode("div", {
                 class: "ina-drawer__backdrop",
                 onClick: handleBackdropClick
@@ -7677,7 +7671,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                   renderSlot(_ctx.$slots, "footer", {}, void 0, true)
                 ])) : createCommentVNode("", true)
               ], 10, _hoisted_1$e)
-            ], 2)) : createCommentVNode("", true)
+            ], 16)) : createCommentVNode("", true)
           ]),
           _: 3
         })
@@ -7685,7 +7679,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-cdbda5b3"]]);
+const Drawer = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-a924d690"]]);
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "Skeleton",
   props: {
@@ -8716,7 +8710,7 @@ const _hoisted_2$8 = {
   key: 0,
   class: "ina-text-area__required"
 };
-const _hoisted_3$6 = ["id", "placeholder", "disabled", "readonly", "maxlength", "rows", "autocomplete", "spellcheck", "autocapitalize", "autocorrect", "dir"];
+const _hoisted_3$6 = ["id", "name", "placeholder", "disabled", "readonly", "maxlength", "rows", "autocomplete", "spellcheck", "autocapitalize", "autocorrect", "dir"];
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "TextArea",
   props: {
@@ -8747,6 +8741,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const attrs = useAttrs();
     const textareaRef = ref();
     const inputValue = ref(getInitialValue());
     const validationError = ref(null);
@@ -8759,9 +8754,20 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       }
       return value;
     }
-    const textareaId = computed(
-      () => `text-area-${Math.random().toString(36).substr(2, 9)}`
-    );
+    const textareaId = computed(() => {
+      const providedId = attrs.id || attrs.name;
+      if (providedId) {
+        return String(providedId);
+      }
+      if (props.label) {
+        return String(props.label).toLowerCase();
+      }
+      return `text-area-${Math.random().toString(36).substr(2, 9)}`;
+    });
+    const filteredAttrs = computed(() => {
+      const { id, name, ...rest } = attrs;
+      return rest;
+    });
     const containerClasses = computed(() => {
       const classes = ["ina-text-area"];
       if (props.disabled) {
@@ -8919,11 +8925,12 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           class: normalizeClass(["ina-text-area__wrapper", wrapperClasses.value])
         }, [
-          withDirectives(createElementVNode("textarea", mergeProps({
+          withDirectives(createElementVNode("textarea", mergeProps(filteredAttrs.value, {
             id: textareaId.value,
             ref_key: "textareaRef",
             ref: textareaRef,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
+            name: unref(attrs).name || void 0,
             placeholder: __props.placeholder,
             disabled: __props.disabled,
             readonly: __props.readonly,
@@ -8934,8 +8941,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             autocapitalize: __props.autoCapitalize,
             autocorrect: __props.autoCorrect,
             dir: __props.dir,
-            class: textareaClasses.value
-          }, _ctx.$attrs, {
+            class: textareaClasses.value,
             onInput: handleInput,
             onBlur: handleBlur,
             onFocus: handleFocus