tide-design-system 2.0.23 → 2.0.25

package/package.json

@@ -28,6 +28,7 @@
     "storybook": "^8.0.9",
     "typescript": "^5.0.0",
     "vite": "^4.0.0",
+    "vite-plugin-dts": "^4.2.3",
     "vite-svg-loader": "^5.1.0",
     "vitest": "^0.31.0",
     "vue": "^3.2.45",
@@ -51,8 +52,5 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.0.23",
-  "dependencies": {
-    "vite-plugin-dts": "^4.2.3"
-  }
+  "version": "2.0.25"
 }

package/src/assets/css/utilities.css

@@ -317,6 +317,8 @@
 .tide-y-auto   {overflow-y: auto;}
 .tide-y-hidden {overflow-y: hidden;}
 
+.tide-z-index-1 {z-index: 1;}
+
 /* Small breakpoint */
 @media (min-width: 768px) {
   /* Position */
@@ -636,6 +638,8 @@
 
   .sm-tide-y-auto   {overflow-y: auto;}
   .sm-tide-y-hidden {overflow-y: hidden;}
+
+  .sm-tide-z-index-1 {z-index: 1;}
 }
 
 /* Medium breakpoint */
@@ -957,6 +961,8 @@
 
   .md-tide-y-auto   {overflow-y: auto;}
   .md-tide-y-hidden {overflow-y: hidden;}
+
+  .md-tide-z-index-1 {z-index: 1;}
 }
 
 /* Large breakpoint */
@@ -1278,6 +1284,8 @@
 
   .lg-tide-y-auto   {overflow-y: auto;}
   .lg-tide-y-hidden {overflow-y: hidden;}
+
+  .lg-tide-z-index-1 {z-index: 1;}
 }
 
 /* Large breakpoint */
@@ -1599,4 +1607,6 @@
 
   .xl-tide-y-auto   {overflow-y: auto;}
   .xl-tide-y-hidden {overflow-y: hidden;}
+
+  .xl-tide-z-index-1 {z-index: 1;}
 }

package/src/components/TideCarousel.vue

@@ -109,10 +109,9 @@
     scrollToSlide(previousSlide);
   };
 
-  window.addEventListener('resize', measureDom);
-
   onMounted(() => {
     measureDom();
+    window.addEventListener('resize', measureDom);
   });
 
   onUnmounted(() => {

package/src/components/TideIndicator.vue

@@ -13,26 +13,25 @@
 <template>
   <div
     :class="[
-      props.label ? 'tide-indicator-label' : 'tide-indicator',
-      'border-white',
+      'tide-indicator',
+      props.label && 'tide-indicator-background',
       CSS.BG.SURFACE.ACCENT,
-      CSS.BORDER.FULL.ONE,
       CSS.BORDER.RADIUS.FULL,
       props.label
-        ? [CSS.POSITION.RELATIVE, CSS.FONT.SIZE.TWELVE, CSS.FONT.WEIGHT.SEVEN_HUNDRED, CSS.FONT.COLOR.SURFACE.DEFAULT]
+        ? [
+            CSS.POSITION.RELATIVE,
+            CSS.FONT.SIZE.TWELVE,
+            CSS.FONT.WEIGHT.SEVEN_HUNDRED,
+            CSS.FONT.COLOR.SURFACE.DEFAULT,
+            CSS.DISPLAY.FLEX,
+            CSS.AXIS1.CENTER,
+            CSS.AXIS2.CENTER,
+          ]
         : [],
     ]"
   >
     <div
-      :class="[
-        CSS.POSITION.ABSOLUTE,
-        CSS.POSITIONING.TOP,
-        CSS.DISPLAY.FLEX,
-        CSS.AXIS1.CENTER,
-        CSS.AXIS2.CENTER,
-        CSS.WIDTH.FULL,
-        CSS.HEIGHT.FULL,
-      ]"
+      :class="['tide-indicator-label']"
       v-if="props.label"
     >
       {{ props.label }}
@@ -46,12 +45,13 @@
     height: 0.5rem;
   }
 
-  .tide-indicator-label {
-    width: 1rem;
-    height: 1rem;
+  .tide-indicator-background {
+    width: 1.125rem;
+    height: 1.125rem;
   }
 
-  .border-white {
-    border-color: white;
+  .tide-indicator-label {
+    /* Use bottom-weighting to offset the mathematical center to the optical center. */
+    margin-top: -1px;
   }
 </style>

package/src/types/Styles.ts

@@ -402,7 +402,10 @@ export const CSS = {
     FULL: 'tide-width-full',
     MAX_FULL: 'tide-max-width-full',
   },
-};
+  Z_INDEX: {
+    ONE: 'tide-z-index-1',
+  },
+} as const;
 
 export type CssUtility = (typeof CSS)[keyof typeof CSS];
 
@@ -546,6 +549,7 @@ export const cssSortOrder = [
   CSS.BREAK_WORD,
   CSS.CURSOR.NOT_ALLOWED,
   CSS.CURSOR.POINTER,
+  CSS.CURSOR.TEXT,
   CSS.FONT.SIZE.TWELVE,
   CSS.FONT.SIZE.FOURTEEN,
   CSS.FONT.SIZE.SIXTEEN,
@@ -574,9 +578,9 @@ export const cssSortOrder = [
   CSS.TEXT_TRANSFORM.LOWER,
   CSS.TEXT_TRANSFORM.NONE,
   CSS.TEXT_TRANSFORM.UPPER,
-  CSS.UNDERLINE,
   CSS.UNDERLINE.HOVER,
   CSS.UNDERLINE.OFF,
+  CSS.UNDERLINE.ON,
   CSS.VISIBILITY.ON,
   CSS.VISIBILITY.OFF,
   CSS.WHITESPACE_WRAP.OFF,
@@ -587,4 +591,5 @@ export const cssSortOrder = [
   CSS.OVERFLOW.X.SCROLL,
   CSS.OVERFLOW.Y.AUTO,
   CSS.OVERFLOW.Y.HIDDEN,
+  CSS.Z_INDEX.ONE,
 ] as const;

package/dist/IconWidth-023f69f2.js

@@ -1,16 +0,0 @@
-import { openBlock as e, createElementBlock as t, createElementVNode as o } from "vue";
-const n = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24"
-}, c = /* @__PURE__ */ o("path", { d: "M11 13H5v-2h6V5h2v6h6v2h-6v6h-2v-6Z" }, null, -1), h = [
-  c
-];
-function r(s, d) {
-  return e(), t("svg", n, h);
-}
-const v = { render: r };
-export {
-  v as default,
-  r as render
-};
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbldpZHRoLTAyM2Y2OWYyLmpzIiwic291cmNlcyI6WyIuLi9zcmMvYXNzZXRzL3N2Zy9pY29ucy9JY29uV2lkdGguc3ZnIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNyZWF0ZUVsZW1lbnRWTm9kZSBhcyBfY3JlYXRlRWxlbWVudFZOb2RlLCBvcGVuQmxvY2sgYXMgX29wZW5CbG9jaywgY3JlYXRlRWxlbWVudEJsb2NrIGFzIF9jcmVhdGVFbGVtZW50QmxvY2sgfSBmcm9tIFwidnVlXCJcblxuY29uc3QgX2hvaXN0ZWRfMSA9IHtcbiAgeG1sbnM6IFwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIixcbiAgdmlld0JveDogXCIwIDAgMjQgMjRcIlxufVxuY29uc3QgX2hvaXN0ZWRfMiA9IC8qI19fUFVSRV9fKi9fY3JlYXRlRWxlbWVudFZOb2RlKFwicGF0aFwiLCB7IGQ6IFwiTTExIDEzSDV2LTJoNlY1aDJ2Nmg2djJoLTZ2NmgtMnYtNlpcIiB9LCBudWxsLCAtMSlcbmNvbnN0IF9ob2lzdGVkXzMgPSBbXG4gIF9ob2lzdGVkXzJcbl1cblxuZXhwb3J0IGZ1bmN0aW9uIHJlbmRlcihfY3R4LCBfY2FjaGUpIHtcbiAgcmV0dXJuIChfb3BlbkJsb2NrKCksIF9jcmVhdGVFbGVtZW50QmxvY2soXCJzdmdcIiwgX2hvaXN0ZWRfMSwgX2hvaXN0ZWRfMykpXG59XG5leHBvcnQgZGVmYXVsdCB7IHJlbmRlcjogcmVuZGVyIH0iXSwibmFtZXMiOlsiX2hvaXN0ZWRfMSIsIl9ob2lzdGVkXzIiLCJfY3JlYXRlRWxlbWVudFZOb2RlIiwiX2hvaXN0ZWRfMyIsInJlbmRlciIsIl9jdHgiLCJfY2FjaGUiLCJfb3BlbkJsb2NrIiwiX2NyZWF0ZUVsZW1lbnRCbG9jayIsIkljb25XaWR0aCJdLCJtYXBwaW5ncyI6IjtBQUVBLE1BQU1BLElBQWE7QUFBQSxFQUNqQixPQUFPO0FBQUEsRUFDUCxTQUFTO0FBQ1gsR0FDTUMsSUFBMEJDLGdCQUFBQSxFQUFvQixRQUFRLEVBQUUsR0FBRyx5Q0FBeUMsTUFBTSxFQUFFLEdBQzVHQyxJQUFhO0FBQUEsRUFDakJGO0FBQ0Y7QUFFTyxTQUFTRyxFQUFPQyxHQUFNQyxHQUFRO0FBQ25DLFNBQVFDLEVBQVksR0FBRUMsRUFBb0IsT0FBT1IsR0FBWUcsQ0FBVTtBQUN6RTtBQUNBLE1BQWVNLElBQUEsRUFBRSxRQUFRTCxFQUFNOyJ9