@salt-ds/lab 1.0.0-alpha.90 → 1.0.0-alpha.92

package/css/salt-lab.css

@@ -1893,6 +1893,121 @@
   border-right: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-primary-borderColor);
 }
 
+/* src/mega-menu/MegaMenuContent.css */
+.saltMegaMenuContent {
+  padding: var(--salt-spacing-300);
+}
+
+/* src/mega-menu/MegaMenuGroup.css */
+.saltMegaMenuGroup {
+  display: flex;
+  flex-direction: column;
+}
+.saltMegaMenuGroup-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: var(--salt-spacing-fixed-100);
+  flex-direction: column;
+}
+
+/* src/mega-menu/MegaMenuHeader.css */
+.saltMegaMenuHeader-content {
+  display: flex;
+  align-items: center;
+  padding: var(--salt-spacing-50) var(--salt-spacing-100);
+  font-family: var(--salt-text-label-fontFamily);
+  font-size: var(--salt-text-label-fontSize);
+  font-weight: var(--salt-text-fontWeight-strong);
+  line-height: var(--salt-text-label-lineHeight);
+  min-height: var(--salt-size-base);
+  color: var(--salt-content-secondary-foreground);
+}
+.saltMegaMenuHeader {
+  margin-bottom: var(--salt-spacing-50);
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);
+}
+
+/* src/mega-menu/MegaMenuItem.css */
+.saltMegaMenuItem {
+  list-style: none;
+}
+.saltMegaMenuItem > a {
+  display: flex;
+  padding: var(--salt-spacing-50) var(--salt-spacing-100);
+  align-items: flex-start;
+  color: var(--salt-content-primary-foreground);
+  background: var(--salt-selectable-background);
+  cursor: var(--salt-cursor-hover);
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
+  box-sizing: border-box;
+  gap: var(--salt-spacing-100);
+  position: relative;
+  border-radius: var(--salt-palette-corner-weak);
+  text-decoration: none;
+}
+.saltMegaMenuItem > a > .saltIcon {
+  display: flex;
+  height: var(--salt-size-base);
+  align-items: center;
+}
+.saltMegaMenuItem > a:focus-visible {
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(var(--salt-size-fixed-100) * -2);
+}
+.saltMegaMenuItem > a:hover {
+  outline: none;
+  background: var(--salt-navigable-background-hover);
+}
+.saltMegaMenuItem > a:active {
+  background: var(--salt-navigable-accent-background-active);
+}
+.saltMegaMenuItem > a:active::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border-radius: inherit;
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-navigable-accent-borderColor-active);
+  pointer-events: none;
+}
+
+/* src/mega-menu/MegaMenuItemContent.css */
+.saltMegaMenuItemContent {
+  flex: 1 0;
+  margin: var(--salt-spacing-75) 0;
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+  line-height: var(--salt-text-lineHeight);
+}
+
+/* src/mega-menu/MegaMenuPanel.css */
+.saltMegaMenuPanel {
+  display: flex;
+  flex-wrap: wrap;
+  inline-size: var(--saltMegaMenuPanel-inlineSize, fit-content);
+  max-inline-size: var(--saltMegaMenuPanel-maxInlineSize, var(--saltMegaMenuPanel-availableWidth, calc(100vw - var(--salt-spacing-600))));
+  max-height: 90%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  box-sizing: border-box;
+  border-radius: var(--salt-palette-corner);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
+  background: var(--salt-container-primary-background);
+  box-shadow: var(--salt-overlayable-shadow-popout);
+}
+
+/* src/mega-menu/MegaMenuSection.css */
+.saltMegaMenuSection {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, var(--saltMegaMenuSection-columnWidth, 12rem));
+  gap: var(--salt-spacing-300);
+  padding: var(--salt-spacing-300);
+  max-inline-size: var(--saltMegaMenuPanel-availableWidth, calc(100vw - var(--salt-spacing-600)));
+}
+
 /* src/menu-button/MenuButton.css */
 
 /* src/menu-button/MenuButtonTrigger.css */
@@ -2107,118 +2222,6 @@
   z-index: var(--salt-zIndex-default);
 }
 
-/* src/rating/Rating.css */
-.saltRating {
-  display: inline-flex;
-  box-sizing: border-box;
-}
-.saltFormField .saltRating-container {
-  height: var(--salt-size-base);
-  padding-top: calc(var(--salt-spacing-100) + var(--salt-spacing-fixed-100));
-}
-.saltFormField .saltRating-label {
-  min-height: var(--salt-size-base);
-  padding-top: var(--salt-spacing-100);
-}
-.saltRating-labelBottom {
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--salt-spacing-75);
-}
-.saltRating-labelRight {
-  flex-direction: row;
-  gap: var(--salt-spacing-150);
-}
-.saltRating-container {
-  display: flex;
-  flex-direction: row;
-  gap: var(--salt-spacing-150);
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  padding-top: var(--salt-spacing-fixed-100);
-  padding-bottom: var(--salt-spacing-fixed-100);
-  box-sizing: border-box;
-}
-.saltRating-label {
-  color: var(--salt-content-primary-foreground);
-  font-family: var(--salt-text-fontFamily);
-  font-size: var(--salt-text-fontSize);
-  font-weight: var(--salt-text-fontWeight);
-  line-height: var(--salt-text-lineHeight);
-  box-sizing: border-box;
-}
-
-/* src/rating/RatingItem.css */
-.saltRatingItem {
-  height: var(--salt-size-icon);
-  width: var(--salt-size-icon);
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  cursor: var(--salt-cursor-hover);
-}
-.saltRatingItem-disabled,
-.saltRatingItem-readOnly {
-  cursor: default;
-}
-.saltRatingItem-input {
-  position: absolute;
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  cursor: inherit;
-  z-index: 1;
-}
-.saltRatingItem-input::before {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  padding: var(--salt-spacing-fixed-600);
-  transform: translate(-50%, -50%);
-  top: 50%;
-  left: 50%;
-  box-sizing: content-box;
-}
-.saltRatingItem-icon {
-  pointer-events: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--salt-sentiment-neutral-dataviz);
-}
-.saltRatingItem-icon .saltIcon {
-  --saltIcon-size: var(--salt-size-icon);
-}
-.saltRatingItem-input:focus-visible ~ .saltRatingItem-icon::after {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  padding: var(--salt-spacing-fixed-600);
-  transform: translate(-50%, -50%);
-  top: 50%;
-  left: 50%;
-  box-sizing: content-box;
-  border-radius: var(--salt-palette-corner-strongest);
-  outline: var(--salt-focused-outline);
-  outline-offset: calc(-1 * var(--salt-spacing-fixed-200));
-}
-.saltRatingItem-disabled {
-  cursor: var(--salt-cursor-disabled);
-  opacity: var(--salt-palette-opacity-disabled);
-}
-.saltRatingItem-disabled .saltRatingItem-input {
-  cursor: var(--salt-cursor-disabled);
-}
-.saltRatingItem-selected .saltRatingItem-icon,
-.saltRatingItem-hovered .saltRatingItem-icon,
-.saltRatingItem-unselecting .saltRatingItem-icon {
-  color: var(--salt-sentiment-accent-dataviz);
-}
-
 /* src/search-input/SearchInput.css */
 .saltSearchInput .saltInputLegacy-input::-webkit-search-cancel-button {
   display: none;
@@ -2226,12 +2229,17 @@
 
 /* src/side-panel/SidePanel.css */
 .saltSidePanel {
-  background-color: var(--sidePanel-background, var(--salt-container-primary-background));
   --saltSidePanel-width: 300px;
   --sidePanel-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--sidePanel-borderColor, var(--salt-container-primary-borderColor));
+  --saltSidePanel-padding: var(--salt-spacing-300);
+  position: relative;
   display: flex;
   flex-direction: column;
-  box-sizing: border-box;
+  flex: none;
+  width: var(--saltSidePanel-width);
+  height: 100%;
+  min-height: 0;
+  align-self: stretch;
 }
 .saltSidePanel-primary {
   --sidePanel-background: var(--salt-container-primary-background);
@@ -2245,69 +2253,71 @@
   --sidePanel-background: var(--salt-container-tertiary-background);
   --sidePanel-borderColor: var(--salt-container-tertiary-borderColor);
 }
-.saltSidePanel-left {
+.saltSidePanel-none {
+  --sidePanel-background: none;
+  --saltSidePanel-padding: var(--salt-spacing-200);
+}
+.saltSidePanel-inner {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  padding: var(--saltSidePanel-padding);
+  width: 100%;
+  background-color: var(--sidePanel-background, var(--salt-container-primary-background));
+}
+.saltSidePanel-left .saltSidePanel-inner {
   border-right: var(--sidePanel-border);
 }
-.saltSidePanel-right {
+.saltSidePanel-right .saltSidePanel-inner {
   border-left: var(--sidePanel-border);
 }
-.saltSidePanel-none {
-  --sidePanel-background: none;
-  border: none;
-}
 .saltSidePanel-none .saltSidePanel-inner {
-  padding: 0;
-}
-.saltSidePanel-left,
-.saltSidePanel-right {
-  width: var(--saltSidePanel-width);
-  height: 100%;
-  min-height: 0;
-  align-self: stretch;
+  border: none;
 }
 .saltSidePanel-enterAnimation,
 .saltSidePanel-exitAnimation {
-  overflow: hidden;
+  contain: paint;
 }
-.saltSidePanel-left.saltSidePanel-enterAnimation,
-.saltSidePanel-right.saltSidePanel-enterAnimation {
-  animation: saltSidePanel-expandWidth var(--salt-duration-perceptible) var(--salt-animation-timing-function);
+.saltSidePanel-enterAnimation .saltSidePanel-inner,
+.saltSidePanel-exitAnimation .saltSidePanel-inner {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  flex: none;
+  width: var(--saltSidePanel-animation-width, var(--saltSidePanel-width));
 }
-.saltSidePanel-left.saltSidePanel-exitAnimation,
-.saltSidePanel-right.saltSidePanel-exitAnimation {
-  animation: saltSidePanel-collapseWidth var(--salt-duration-perceptible) var(--salt-animation-timing-function) both;
+.saltSidePanel-left.saltSidePanel-enterAnimation .saltSidePanel-inner,
+.saltSidePanel-left.saltSidePanel-exitAnimation .saltSidePanel-inner {
+  right: 0;
 }
-.saltSidePanel-exitAnimation {
+.saltSidePanel-right.saltSidePanel-enterAnimation .saltSidePanel-inner,
+.saltSidePanel-right.saltSidePanel-exitAnimation .saltSidePanel-inner {
+  left: 0;
+}
+.saltSidePanel-exitAnimation .saltSidePanel-inner {
   pointer-events: none;
 }
-.saltSidePanel-inner {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  padding: var(--salt-spacing-300);
+.saltSidePanel-enterAnimation {
+  animation: saltSidePanel-open var(--salt-duration-perceptible) var(--salt-animation-timing-function);
 }
-.saltSidePanel-left .saltSidePanel-inner,
-.saltSidePanel-right .saltSidePanel-inner {
-  width: var(--saltSidePanel-width);
-  height: 100%;
+.saltSidePanel-exitAnimation {
+  animation: saltSidePanel-close var(--salt-duration-perceptible) var(--salt-animation-timing-function) both;
 }
-@keyframes saltSidePanel-expandWidth {
+@keyframes saltSidePanel-open {
   from {
     width: 0;
   }
 }
-@keyframes saltSidePanel-collapseWidth {
+@keyframes saltSidePanel-close {
   to {
     width: 0;
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .saltSidePanel-left.saltSidePanel-enterAnimation,
-  .saltSidePanel-right.saltSidePanel-enterAnimation,
-  .saltSidePanel-left.saltSidePanel-exitAnimation,
-  .saltSidePanel-right.saltSidePanel-exitAnimation {
+  .saltSidePanel-enterAnimation,
+  .saltSidePanel-exitAnimation {
     animation: none;
   }
 }
@@ -2318,17 +2328,17 @@
   flex-direction: column;
   flex: 1;
   min-height: 0;
-  box-sizing: border-box;
 }
 .saltSidePanelContent-body {
   flex: 1;
+  min-height: 0;
   overflow: auto;
 }
 
 /* src/side-panel/SidePanelHeader.css */
 .saltSidePanelHeader {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   flex-shrink: 0;
   gap: var(--salt-spacing-100);
   padding: 0 0 var(--salt-spacing-300);
@@ -2338,6 +2348,9 @@
 .saltSidePanelTitle {
   flex: 1;
   min-width: 0;
+  min-height: var(--salt-size-base);
+  display: flex;
+  align-items: center;
 }
 
 /* src/static-list/StaticList.css */
@@ -2726,254 +2739,6 @@
   --toolbar-depth: calc(var(--salt-size-basis-unit) * 7);
 }
 
-/* src/tabs-next/TabBar.css */
-.saltTabBar {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  position: relative;
-  box-sizing: border-box;
-  min-width: 0;
-  max-width: 100%;
-}
-.saltTabBar-strip {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  flex: 1 1 auto;
-  gap: var(--salt-spacing-100);
-  box-sizing: border-box;
-  min-width: 0;
-  max-width: 100%;
-}
-.saltTabBar-divider::before {
-  content: "";
-  position: absolute;
-  inset: auto 0 0 0;
-  height: var(--salt-size-fixed-100);
-  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);
-}
-.saltTabBar-inset {
-  padding-left: var(--salt-spacing-300);
-  padding-right: var(--salt-spacing-300);
-}
-
-/* src/tabs-next/TabListNext.css */
-.saltTabListNext {
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  position: relative;
-  background: transparent;
-  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
-  gap: var(--salt-spacing-100);
-  max-width: 100%;
-  min-width: 0;
-  flex: 0 1 auto;
-}
-.saltTabListNext-center {
-  justify-content: center;
-}
-.saltTabListNext-right {
-  justify-content: flex-end;
-}
-.saltTabListNext-activeColorPrimary {
-  --saltTabListNext-activeColor: var(--salt-container-primary-background);
-}
-.saltTabListNext-activeColorSecondary {
-  --saltTabListNext-activeColor: var(--salt-container-secondary-background);
-}
-.saltTabListNext-activeColorTertiary {
-  --saltTabListNext-activeColor: var(--salt-container-tertiary-background);
-}
-.saltTabListNext-measureContainer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 0;
-  overflow: hidden;
-  pointer-events: none;
-  visibility: hidden;
-  white-space: nowrap;
-}
-
-/* src/tabs-next/TabNext.css */
-.saltTabNext {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  appearance: none;
-  -webkit-appearance: none;
-  gap: var(--salt-spacing-100);
-  border: none;
-  border-left: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
-  border-right: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
-  white-space: pre;
-  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
-  min-width: 4em;
-  padding: var(--salt-spacing-50) var(--salt-spacing-100);
-  position: relative;
-  flex-shrink: 0;
-  box-sizing: border-box;
-  overflow: hidden;
-  cursor: var(--salt-cursor-hover);
-  color: var(--salt-content-primary-foreground);
-  font-weight: var(--salt-text-fontWeight);
-  font-family: var(--salt-text-fontFamily);
-  text-align: var(--salt-text-textAlign);
-  letter-spacing: var(--salt-text-letterSpacing);
-  line-height: var(--salt-text-lineHeight);
-  font-size: var(--salt-text-fontSize);
-  max-width: 100%;
-}
-@supports selector(:has(*)) {
-  .saltTabListNext:has([data-overflowbutton]) .saltTabNext {
-    max-width: calc(100% - var(--salt-spacing-100) - var(--salt-size-base));
-  }
-}
-.saltTabNext::after {
-  content: "";
-  position: absolute;
-  left: calc(var(--salt-size-fixed-100) * -1);
-  right: calc(var(--salt-size-fixed-100) * -1);
-  height: var(--salt-size-indicator);
-}
-.saltTabListNext-bordered .saltTabNext::after {
-  top: 0;
-}
-.saltTabListNext-transparent .saltTabNext::after {
-  bottom: 0;
-}
-.saltTabNext:hover::after,
-.saltTabNext-focusVisible::after {
-  background: var(--salt-navigable-indicator-hover);
-}
-.saltTabNext-disabled:hover::after,
-.saltTabNext-disabled.saltTabNext-focusVisible::after {
-  background: none;
-}
-.saltTabNext-focusVisible {
-  outline: var(--salt-focused-outline);
-}
-.saltTabListNext-bordered .saltTabNext.saltTabNext-selected {
-  background: var(--saltTabListNext-activeColor);
-  border-left: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);
-  border-right: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);
-}
-.saltTabNext.saltTabNext-selected::after {
-  background: var(--salt-navigable-accent-indicator-active);
-}
-.saltTabNext.saltTabNext-disabled {
-  cursor: var(--salt-cursor-disabled);
-  color: var(--salt-content-primary-foreground-disabled);
-}
-
-/* src/tabs-next/TabNextPanel.css */
-.saltTabNextPanel {
-  height: 100%;
-  width: 100%;
-}
-.saltTabNextPanel[hidden] {
-  display: none;
-}
-.saltTabNextPanel:focus-visible {
-  outline: var(--salt-focused-outline);
-}
-
-/* src/tabs-next/TabNextTrigger.css */
-.saltTabNextTrigger {
-  all: unset;
-  display: flex;
-  gap: var(--salt-spacing-100);
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  overflow: hidden;
-}
-.saltTabNextTrigger::before {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-}
-.saltTabNextTrigger:focus-visible {
-  outline: none;
-}
-
-/* src/tabs-next/TabOverflowList.css */
-.saltTabOverflow {
-  position: relative;
-}
-.saltTabOverflow-list {
-  background: var(--salt-container-primary-background);
-  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
-  overflow: hidden;
-  overflow-y: auto;
-  position: absolute;
-  box-shadow: var(--salt-overlayable-shadow-popout);
-  box-sizing: border-box;
-  border-radius: var(--salt-palette-corner, 0);
-  z-index: var(--salt-zIndex-flyover);
-}
-.saltTabOverflow-listContainer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--salt-spacing-fixed-100);
-  max-height: inherit;
-  min-height: inherit;
-}
-.saltTabOverflow-list .saltTabNext {
-  color: var(--salt-content-primary-foreground);
-  background: var(--salt-selectable-background);
-  font-size: var(--salt-text-fontSize);
-  font-weight: var(--salt-text-fontWeight);
-  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
-  padding-left: var(--salt-spacing-100);
-  padding-right: var(--salt-spacing-100);
-  display: flex;
-  gap: var(--salt-spacing-100);
-  position: relative;
-  align-items: center;
-  cursor: var(--salt-cursor-hover);
-  box-sizing: border-box;
-  flex-shrink: 0;
-  justify-content: flex-start;
-}
-@supports selector(:has(*)) {
-  .saltTabListNext:has([data-overflowbutton]) .saltTabOverflow-list .saltTabNext {
-    max-width: unset;
-  }
-}
-.saltTabOverflow-list .saltTabNext .saltTabNextTrigger {
-  justify-content: start;
-}
-.saltTabOverflow-list .saltTabNext::after {
-  display: none;
-}
-.saltTabOverflow-list .saltTabNext[aria-disabled=true] {
-  color: var(--salt-content-primary-foreground-disabled);
-  cursor: var(--salt-cursor-disabled);
-}
-.saltTabOverflow-list .saltTabNext-focusVisible {
-  outline: var(--salt-focused-outline);
-  outline-offset: calc(var(--salt-size-fixed-100) * -2);
-}
-.saltTabOverflow-list .saltTabNext:hover {
-  background: var(--salt-selectable-background-hover);
-}
-.saltTabOverflow-list .saltTabNext:active {
-  background: var(--salt-selectable-background-selected);
-  box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);
-}
-
-/* src/tabs-next/TabsNext.css */
-.saltTabsNext {
-  min-width: 0;
-}
-
 /* src/toast-group/ToastGroup.css */
 .saltToastGroup {
   width: var(--toastGroup-width);
@@ -3749,4 +3514,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/d5083ffa-84eb-437e-9087-af4a8e27d3cd.css */
+/* src/93ce53d7-3b64-4e16-8086-ef43a2ec8a13.css */