tide-design-system 2.6.0 → 2.6.1

package/dist/style.css

@@ -54,23 +54,23 @@
     color: var(--tide-info-primary);
 }
 
-.tide-button-icon[data-v-2da25be7],
-  .tide-link-as-button-icon[data-v-2da25be7] {
+.tide-button-icon[data-v-6c9ffbf5],
+  .tide-link-as-button-icon[data-v-6c9ffbf5] {
     border: 1px solid var(--tide-white);
     background: var(--tide-white);
     color: var(--tide-secondary);
 }
-.tide-button-icon[data-v-2da25be7]:not(:disabled):hover,
-  .tide-link-as-button-icon[data-v-2da25be7]:not(:disabled):hover {
+.tide-button-icon[data-v-6c9ffbf5]:not(:disabled):hover,
+  .tide-link-as-button-icon[data-v-6c9ffbf5]:not(:disabled):hover {
     border: 1px solid var(--tide-surface-variant);
     background: var(--tide-surface-variant);
 }
-.tide-button-icon[data-v-2da25be7]:disabled,
-  .tide-link-as-button-icon[data-v-2da25be7]:disabled {
+.tide-button-icon[data-v-6c9ffbf5]:disabled,
+  .tide-link-as-button-icon[data-v-6c9ffbf5]:disabled {
     border: 1px solid var(--tide-border-high);
 }
-.tide-button-icon .label[data-v-2da25be7],
-  .tide-link-as-button-icon .label[data-v-2da25be7] {
+.tide-button-icon .label[data-v-6c9ffbf5],
+  .tide-link-as-button-icon .label[data-v-6c9ffbf5] {
     width: 1.5rem;
     height: 1.5rem;
 }
@@ -144,28 +144,36 @@ to {
     outline-offset: -2px;
 }
 
-.tide-carousel-button-overlay.hideaway[data-v-a9f0952b] {
+.tide-image-img[data-v-bfc515e8] {
+    border-radius: inherit;
+}
+
+.tide-carousel-button-overlay.hideaway[data-v-f3aba0f9] {
     opacity: 0;
 }
-.tide-carousel:hover .tide-carousel-button-overlay.hideaway[data-v-a9f0952b] {
+.tide-carousel:hover .tide-carousel-button-overlay.hideaway[data-v-f3aba0f9] {
     opacity: 1;
 }
-.tide-carousel-dot[data-v-a9f0952b] {
+.tide-carousel-dot[data-v-f3aba0f9] {
     width: 8px;
     height: 8px;
     opacity: 0.75;
     transform: scale(0.5);
     transition: opacity var(--tide-animate), transform var(--tide-animate);
 }
-.tide-carousel-dot-neighbor[data-v-a9f0952b] {
+.tide-carousel-dot-neighbor[data-v-f3aba0f9] {
     transform: scale(0.75);
 }
-.tide-carousel-dot-active[data-v-a9f0952b] {
+.tide-carousel-dot-active[data-v-f3aba0f9] {
     transform: scale(1);
     opacity: 1;
 }
+.tide-carousel-header-image[data-v-f3aba0f9] {
+    width: 73px;
+    height: 54px;
+}
 @media (pointer: coarse) {
-.tide-carousel .tide-carousel-button-overlay[data-v-a9f0952b] {
+.tide-carousel .tide-carousel-button-overlay[data-v-f3aba0f9] {
       display: none;
 }
 }
@@ -195,24 +203,20 @@ to {
     border-color: var(--tide-border-high);
 }
 
-.tide-columns-column[data-v-1f7e2e25] {
+.tide-columns-column[data-v-ea114d75] {
     width: 100%;
 }
-@media (min-width: 992px) {
-.tide-columns-column[data-v-1f7e2e25] {
+@container tide-responsive-root (min-width: 992px) {
+.tide-columns-column[data-v-ea114d75] {
       width: calc((100% - 2rem) / 2);
 }
 }
-@media (min-width: 1232px) {
-.tide-columns-column[data-v-1f7e2e25] {
+@container tide-responsive-root (min-width: 1232px) {
+.tide-columns-column[data-v-ea114d75] {
       width: calc((100% - 6rem) / 4);
 }
 }
 
-.tide-image-img[data-v-bfc515e8] {
-    border-radius: inherit;
-}
-
 [data-v-8695bcc4] .tide-image {
     z-index: -1;
 }
@@ -503,7 +507,7 @@ textarea[data-v-9b7af68f] {
     background-color: var(--tide-surface-variant);
 }
 
-.tide-modal[data-v-48b2fcd3] {
+.tide-modal[data-v-d0a4311b] {
     --modal-padding-x: 20px;
     max-width: unset;
     max-height: unset;
@@ -512,55 +516,55 @@ textarea[data-v-9b7af68f] {
     transition: all var(--tide-animate) allow-discrete;
     transform: translateY(100%);
 }
-.tide-modal[open][data-v-48b2fcd3] {
+.tide-modal[open][data-v-d0a4311b] {
     display: grid;
     transform: translateY(0%);
 }
-.tide-modal[data-v-48b2fcd3]::backdrop {
+.tide-modal[data-v-d0a4311b]::backdrop {
     background-color: transparent;
     transition: all var(--tide-animate) allow-discrete;
     backdrop-filter: blur(0px);
 }
-.tide-modal[open][data-v-48b2fcd3]::backdrop {
+.tide-modal[open][data-v-d0a4311b]::backdrop {
     background-color: var(--tide-transparent-400);
     backdrop-filter: var(--tide-bg-blur);
 }
 @starting-style {
-.tide-modal[open][data-v-48b2fcd3] {
+.tide-modal[open][data-v-d0a4311b] {
       display: grid;
       transform: translateY(100%);
 }
-.tide-modal[open][data-v-48b2fcd3]::backdrop {
+.tide-modal[open][data-v-d0a4311b]::backdrop {
       background-color: transparent;
       backdrop-filter: var(--tide-bg-blur);
 }
 }
-.tide-modal-body[data-v-48b2fcd3] {
+.tide-modal-body[data-v-d0a4311b] {
     width: var(--modal-width, 576px);
     max-height: calc(100% - var(--tide-spacing-2));
 }
-.tide-modal-header[data-v-48b2fcd3],
-  .tide-modal-footer[data-v-48b2fcd3] {
+.tide-modal-header[data-v-d0a4311b],
+  .tide-modal-footer[data-v-d0a4311b] {
     padding-inline: var(--modal-padding-x);
 }
-.tide-modal-content[data-v-48b2fcd3] {
+.tide-modal-content[data-v-d0a4311b] {
     grid-template-columns: var(--modal-padding-x) var(--tide-safe-fr) var(--modal-padding-x);
     contain: layout;
 }
-:where(.tide-modal-content[data-v-48b2fcd3]) > :where(*) {
+:where(.tide-modal-content[data-v-d0a4311b]) > :where(*) {
     grid-column: 2;
 }
-@media (max-width: 767px) {
-.tide-modal-body[data-v-48b2fcd3] {
+@container tide-responsive-root (max-width: 767px) {
+.tide-modal-body[data-v-d0a4311b] {
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
 }
 }
-@media (min-width: 768px) {
-.tide-modal[data-v-48b2fcd3] {
+@container tide-responsive-root (min-width: 768px) {
+.tide-modal[data-v-d0a4311b] {
       --modal-padding-x: var(--tide-spacing-2);
 }
-.tide-modal-body[data-v-48b2fcd3] {
+.tide-modal-body[data-v-d0a4311b] {
       max-height: 85%;
       bottom: initial;
 }
@@ -599,76 +603,80 @@ textarea[data-v-9b7af68f] {
     clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
 }
 
-.tide-realm-logo[data-v-dec575c7],
-  .tide-realm-logo.large[data-v-dec575c7] {
+.tide-realm-logo[data-v-a94b060d],
+  .tide-realm-logo.large[data-v-a94b060d] {
     width: var(--logo-width-full);
     height: var(--logo-height-full);
 }
-.tide-realm-logo.small[data-v-dec575c7] {
+.tide-realm-logo.small[data-v-a94b060d] {
     width: var(--logo-width-small);
     height: var(--logo-height-small);
 }
-.tide-realm-logo.mark[data-v-dec575c7] {
+.tide-realm-logo.mark[data-v-a94b060d] {
     width: var(--logo-width-mark);
     height: var(--logo-height-mark);
 }
-@media (min-width: 768px) {
-.tide-realm-logo.sm-small[data-v-dec575c7] {
+@container tide-responsive-root (min-width: 768px) {
+.tide-realm-logo.sm-small[data-v-a94b060d] {
       width: var(--logo-width-small);
       height: var(--logo-height-small);
 }
-.tide-realm-logo.sm-large[data-v-dec575c7] {
+.tide-realm-logo.sm-large[data-v-a94b060d] {
       width: var(--logo-width-full);
       height: var(--logo-height-full);
 }
 }
-@media (min-width: 992px) {
-.tide-realm-logo.md-small[data-v-dec575c7] {
+@container tide-responsive-root (min-width: 992px) {
+.tide-realm-logo.md-small[data-v-a94b060d] {
       width: var(--logo-width-small);
       height: var(--logo-height-small);
 }
-.tide-realm-logo.md-large[data-v-dec575c7] {
+.tide-realm-logo.md-large[data-v-a94b060d] {
       width: var(--logo-width-full);
       height: var(--logo-height-full);
 }
 }
-@media (min-width: 1232px) {
-.tide-realm-logo.lg-small[data-v-dec575c7] {
+@container tide-responsive-root (min-width: 1232px) {
+.tide-realm-logo.lg-small[data-v-a94b060d] {
       width: var(--logo-width-small);
       height: var(--logo-height-small);
 }
-.tide-realm-logo.lg-large[data-v-dec575c7] {
+.tide-realm-logo.lg-large[data-v-a94b060d] {
       width: var(--logo-width-full);
       height: var(--logo-height-full);
 }
 }
-@media (min-width: 1920px) {
-.tide-realm-logo.xl-small[data-v-dec575c7] {
+@container tide-responsive-root (min-width: 1920px) {
+.tide-realm-logo.xl-small[data-v-a94b060d] {
       width: var(--logo-width-small);
       height: var(--logo-height-small);
 }
-.tide-realm-logo.xl-large[data-v-dec575c7] {
+.tide-realm-logo.xl-large[data-v-a94b060d] {
       width: var(--logo-width-full);
       height: var(--logo-height-full);
 }
 }
 
+.tide-responsive-root[data-v-30d70813] {
+    container: var(--tide-responsive-root);
+}
+
   /* TODO: Refactor to accept breakpoint prop in order to accomplish this with neither custom breakpoints nor dependency on ViewportStore. */
-.tide-seo-link[data-v-5cd4472f] {
+.tide-seo-link[data-v-5904f65f] {
     width: 100%;
 }
-@media (min-width: 992px) {
-.tide-seo-link[data-v-5cd4472f] {
+@container tide-responsive-root (min-width: 992px) {
+.tide-seo-link[data-v-5904f65f] {
       width: calc((100% - 2rem) / 2);
 }
 }
-@media (min-width: 1232px) {
-.tide-seo-link[data-v-5cd4472f] {
+@container tide-responsive-root (min-width: 1232px) {
+.tide-seo-link[data-v-5904f65f] {
       width: calc((100% - 6rem) / 4);
 }
 }
 
-.tide-sheet[data-v-4f5c60b8] {
+.tide-sheet[data-v-d92b1eed] {
     --sheet-padding-x: var(--tide-spacing-1);
     max-width: unset;
     max-height: unset;
@@ -677,35 +685,35 @@ textarea[data-v-9b7af68f] {
     transition: all var(--tide-animate) allow-discrete;
     transform: translateX(100%);
 }
-.tide-sheet[open][data-v-4f5c60b8] {
+.tide-sheet[open][data-v-d92b1eed] {
     display: grid;
     transform: translateX(0%);
 }
-.tide-sheet[data-v-4f5c60b8]::backdrop {
+.tide-sheet[data-v-d92b1eed]::backdrop {
     background-color: transparent;
     transition: all var(--tide-animate) allow-discrete;
     backdrop-filter: blur(0px);
 }
-.tide-sheet[open][data-v-4f5c60b8]::backdrop {
+.tide-sheet[open][data-v-d92b1eed]::backdrop {
     background-color: var(--tide-transparent-400);
     backdrop-filter: var(--tide-bg-blur);
 }
-.tide-sheet-body[data-v-4f5c60b8] {
+.tide-sheet-body[data-v-d92b1eed] {
     max-width: min(calc(100vw - var(--tide-spacing-2)), 311px);
 }
-.tide-sheet-content[data-v-4f5c60b8] {
+.tide-sheet-content[data-v-d92b1eed] {
     grid-template-columns: var(--sheet-padding-x) var(--tide-safe-fr) var(--sheet-padding-x);
     contain: layout;
 }
-:where(.tide-sheet-content[data-v-4f5c60b8]) > :where(*) {
+:where(.tide-sheet-content[data-v-d92b1eed]) > :where(*) {
     grid-column: 2;
 }
 @starting-style {
-.tide-sheet[open][data-v-4f5c60b8] {
+.tide-sheet[open][data-v-d92b1eed] {
       display: grid;
       transform: translateX(100%);
 }
-.tide-sheet[open][data-v-4f5c60b8]::backdrop {
+.tide-sheet[open][data-v-d92b1eed]::backdrop {
       background-color: transparent;
       backdrop-filter: var(--tide-bg-blur);
 }
@@ -737,28 +745,28 @@ textarea[data-v-9b7af68f] {
     );
 }
 
-.rounded-border[data-v-92f91fcb] {
+.rounded-border[data-v-9787df1b] {
     height: 4px;
     border-radius: var(--tide-radius-full) var(--tide-radius-full) 0 0;
 }
 
-.pop-enter-active[data-v-158c6081],
-  .pop-leave-active[data-v-158c6081] {
+.pop-enter-active[data-v-6fb3700e],
+  .pop-leave-active[data-v-6fb3700e] {
     transition: var(--tide-animate);
     transition-property: opacity, transform, translate;
 }
-.pop-enter-from[data-v-158c6081] {
+.pop-enter-from[data-v-6fb3700e] {
     translate: 100% 0;
 }
-.pop-leave-to[data-v-158c6081] {
+.pop-leave-to[data-v-6fb3700e] {
     opacity: 0;
     z-index: 0 !important;
 }
-.pop-leave-active[data-v-158c6081] {
+.pop-leave-active[data-v-6fb3700e] {
     position: absolute;
 }
-@media (min-width: 768px) {
-.tide-toast-wrap[data-v-158c6081] {
+@container tide-responsive-root (min-width: 768px) {
+.tide-toast-wrap[data-v-6fb3700e] {
       width: 400px;
 }
 }
@@ -803,6 +811,7 @@ textarea[data-v-9b7af68f] {
 }
 body {
   color: var(--tide-on-surface);
+  container: var(--tide-responsive-root);
   font-size: var(--tide-font-16);
   font-weight: var(--tide-font-regular);
   line-height: 1.4;
@@ -947,6 +956,9 @@ input::-webkit-search-results-decoration {
   /* CSS Grid */
   --tide-safe-fr: minmax(0, 1fr);
 
+  /* Container Query Root */
+  --tide-responsive-root: tide-responsive-root / inline-size;
+
   /* Opacity */
   --tide-disabled: 0.333;
 
@@ -1548,7 +1560,7 @@ button.tide-button-quaternary:disabled,
 button.tide-button-floating:disabled {
   opacity: var(--tide-disabled);
 }
-@media (min-width: 768px) {
+@container tide-responsive-root (min-width: 768px) {
 	/* Reusable CSS Utility Library */
 	/* Position */
 	.sm-tide-position-absolute {position: absolute;}
@@ -2083,7 +2095,7 @@ button.tide-button-floating:disabled {
 	  opacity: var(--tide-disabled);
 	}
 }
-@media (min-width: 992px) {
+@container tide-responsive-root (min-width: 992px) {
 	/* Reusable CSS Utility Library */
 	/* Position */
 	.md-tide-position-absolute {position: absolute;}
@@ -2618,7 +2630,7 @@ button.tide-button-floating:disabled {
 	  opacity: var(--tide-disabled);
 	}
 }
-@media (min-width: 1232px) {
+@container tide-responsive-root (min-width: 1232px) {
 	/* Reusable CSS Utility Library */
 	/* Position */
 	.lg-tide-position-absolute {position: absolute;}
@@ -3153,7 +3165,7 @@ button.tide-button-floating:disabled {
 	  opacity: var(--tide-disabled);
 	}
 }
-@media (min-width: 1920px) {
+@container tide-responsive-root (min-width: 1920px) {
 	/* Reusable CSS Utility Library */
 	/* Position */
 	.xl-tide-position-absolute {position: absolute;}
@@ -3716,10 +3728,10 @@ button.tide-button-floating:disabled {
     var(--tide-column-width)
     minmax(var(--tide-gutter-width), 1fr);
 }
-@media (min-width: 768px) {
+@container tide-responsive-root (min-width: 768px) {
   .tide-grid-layout {--tide-gutter-width: var(--tide-spacing-2);}
 }
-@media (min-width: 1232px) {
+@container tide-responsive-root (min-width: 1232px) {
   .tide-grid-layout {--tide-gutter-width: var(--tide-spacing-4);}
 }
 .tide-grid-xl {--tide-max-content-width: var(--tide-1920px);}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tide-design-system",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "description": "TIDE Design System",
   "author": "Trader Interactive",
   "license": "MIT",