tide-design-system 2.2.11 → 2.2.12

package/package.json

@@ -61,7 +61,7 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.2.11",
+  "version": "2.2.12",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

package/src/components/TideCarousel.vue

@@ -93,7 +93,7 @@
 
   const measureDom = () => {
     if (containerRef.value === null) return;
-    contentRightEdge.value = containerRef.value.scrollLeft + containerRef.value.clientWidth;
+    contentRightEdge.value = Math.round(containerRef.value.scrollLeft + containerRef.value.clientWidth);
     contentWidth.value = containerRef.value.scrollWidth;
     frameWidth.value = containerRef.value.clientWidth;
     hasOverflow.value = contentWidth.value > frameWidth.value;
@@ -200,7 +200,7 @@
       CSS.POSITION.RELATIVE,
       CSS.DISPLAY.FLEX,
       CSS.FLEX.DIRECTION.COLUMN,
-      CSS.GAP.TWO,
+      CSS.GAP.ONE,
       CSS.WIDTH.MAX_FULL,
     ]"
     ref="carouselRef"
@@ -254,6 +254,7 @@
       <ul
         :class="[
           'tide-carousel-container',
+          props.bleed && 'bleed',
           CSS.DISPLAY.FLEX,
           CSS.GAP.ONE,
           CSS.LIST_BULLETS.OFF,
@@ -303,7 +304,7 @@
 </template>
 
 <style scoped>
-  .tide-carousel-container {
+  .tide-carousel-container.bleed {
     transition: margin var(--tide-animate), padding var(--tide-animate);
   }
 

package/src/components/TideInputCheckbox.vue

@@ -42,6 +42,7 @@
       CSS.FONT.ROLE.BODY_1,
       disabled ? ['disabled', CSS.POINTER_EVENTS.OFF] : CSS.CURSOR.POINTER,
     ]"
+    :data-track="props.dataTrack"
   >
     <input
       :checked="isChecked"

package/src/components/TideInputRadio.vue

@@ -46,6 +46,7 @@
     <input
       :checked="checked"
       :class="[CSS.DISPLAY.NONE]"
+      :data-track="props.dataTrack"
       :id="props.inputId"
       name=""
       type="radio"

package/src/components/TideModal.vue

@@ -50,6 +50,14 @@
     });
   };
 
+  const handleBackdropClick = () => {
+    if (props.isDismissible) triggerNativeDialogClose();
+  };
+
+  const handleEscapeKeydown = (e: Event) => {
+    if (!props.isDismissible) e.preventDefault();
+  };
+
   watch(
     () => props.isOpen,
     (newValue) => {
@@ -76,8 +84,9 @@
     :class="['tide-modal', CSS.BG.INITIAL, CSS.HEIGHT.FULL, CSS.WIDTH.FULL, CSS.OVERFLOW.XY.HIDDEN]"
     ref="modalDialog"
     :style="{ '--modal-width': props.width }"
-    @click.self="triggerNativeDialogClose"
+    @click.self="handleBackdropClick"
     @close="emit('close')"
+    @keydown.escape="handleEscapeKeydown"
   >
     <div
       :class="[