@salt-ds/lab 1.0.0-alpha.72 → 1.0.0-alpha.74

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @salt-ds/lab
 
+## 1.0.0-alpha.74
+
+### Minor Changes
+
+- 7440996: A new component (`VerticalNavigation`) has been introduced to replace the existing `NavigationItem` component for vertical navigation. The new component provides a more structured and flexible way to create vertical navigation.
+- 7440996: Added `Collapsible`, `CollapsibleTrigger` and `CollapsiblePanel`.
+
+  Collapsible enables content to be either collapsed (hidden) or expanded (visible). It has two elements: a trigger and a panel whose visibility is controlled by the button.
+
+  ```tsx
+  <Collapsible>
+    <CollapsibleTrigger>
+      <Button>Click</Button>
+    </CollapsibleTrigger>
+    <CollapsiblePanel>Content</CollapsiblePanel>
+  </Collapsible>
+  ```
+
+### Patch Changes
+
+- d747775: Updated Table's footer text style to body strong.
+- Updated dependencies [c58279f]
+- Updated dependencies [239d20c]
+- Updated dependencies [fe8da62]
+  - @salt-ds/core@1.47.4
+
+## 1.0.0-alpha.73
+
+### Patch Changes
+
+- 86877dd: Fixed extra margin appearing on StaticList.
+- Updated dependencies [55e7bc5]
+- Updated dependencies [3481308]
+- Updated dependencies [851e4cb]
+  - @salt-ds/core@1.47.3
+
 ## 1.0.0-alpha.72
 
 ### Patch Changes

package/css/salt-lab.css

@@ -309,6 +309,28 @@
   --list-boxShadow: var(--salt-overlayable-shadow-popout);
 }
 
+/* src/collapsible/CollapsiblePanel.css */
+.saltCollapsiblePanel {
+  display: grid;
+  transition:
+    grid-template-rows var(--salt-duration-perceptible) ease-in-out,
+    opacity var(--salt-duration-perceptible) ease-in-out,
+    visibility var(--salt-duration-perceptible) ease-in-out;
+}
+.saltCollapsiblePanel[aria-hidden=true] {
+  grid-template-rows: 0fr;
+  opacity: 0;
+  visibility: hidden;
+}
+.saltCollapsiblePanel {
+  grid-template-rows: 1fr;
+  opacity: 1;
+  visibility: visible;
+}
+.saltCollapsiblePanel-inner {
+  overflow: hidden;
+}
+
 /* src/color-chooser/ColorChooser.css */
 .saltColorChooser-overlayButtonSwatch {
   margin-right: 10px;
@@ -2681,6 +2703,7 @@
 .saltStaticList {
   overflow-y: auto;
   padding: 0;
+  margin: 0;
 }
 
 /* src/static-list/StaticListItem.css */
@@ -2760,6 +2783,166 @@
   color: var(--salt-content-bold-foreground);
 }
 
+/* src/table/Table.css */
+.saltTable {
+  --table-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));
+  --table-footer-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));
+  --table-row-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));
+}
+.saltTable-primary {
+  --table-background: var(--salt-container-primary-background);
+}
+.saltTable-secondary {
+  --table-background: var(--salt-container-secondary-background);
+}
+.saltTable-tertiary {
+  --table-background: var(--salt-container-tertiary-background);
+}
+.saltTable-divider-primary {
+  --table-divider-color: var(--salt-separable-primary-borderColor);
+}
+.saltTable-divider-secondary {
+  --table-divider-color: var(--salt-separable-secondary-borderColor);
+}
+.saltTable-divider-tertiary {
+  --table-divider-color: var(--salt-separable-tertiary-borderColor);
+}
+table.saltTable-zebra-primary tbody tr:nth-of-type(odd) {
+  --table-background: var(--salt-container-primary-background);
+}
+table.saltTable-zebra-secondary tbody tr:nth-of-type(odd) {
+  --table-background: var(--salt-container-secondary-background);
+}
+table.saltTable-zebra-tertiary tbody tr:nth-of-type(odd) {
+  --table-background: var(--salt-container-tertiary-background);
+}
+table.saltTable {
+  border-spacing: 0;
+  border-radius: var(--salt-palette-corner, 0);
+  border-collapse: collapse;
+  color: var(--salt-content-primary-foreground);
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  line-height: var(--salt-text-lineHeight);
+  table-layout: fixed;
+  width: 100%;
+}
+table.saltTable thead {
+  border-start-start-radius: var(--salt-palette-corner);
+  border-start-end-radius: var(--salt-palette-corner);
+  color: var(--salt-content-secondary-foreground);
+  height: var(--table-header-height);
+  min-height: var(--table-header-height);
+  font-size: var(--salt-text-label-fontSize);
+  font-weight: var(--salt-text-label-fontWeight-strong);
+  line-height: var(--salt-text-label-lineHeight);
+  white-space: nowrap;
+}
+table.saltTable thead.saltTable-thead-sticky {
+  position: sticky;
+  top: 0;
+}
+table.saltTable thead.saltTable-thead-primary tr {
+  background: var(--salt-container-primary-background);
+}
+table.saltTable thead.saltTable-thead-secondary tr {
+  background: var(--salt-container-secondary-background);
+}
+table.saltTable thead.saltTable-thead-tertiary tr {
+  background: var(--salt-container-tertiary-background);
+}
+table.saltTable thead.saltTable-thead tr {
+  border-bottom: var(--salt-borderStyle-solid) var(--table-header-divider-color) var(--salt-size-fixed-100);
+}
+table.saltTable thead.saltTable-thead-divider-primary {
+  --table-header-divider-color: var(--salt-separable-primary-borderColor);
+}
+table.saltTable thead.saltTable-thead-divider-secondary {
+  --table-header-divider-color: var(--salt-separable-secondary-borderColor);
+}
+table.saltTable thead.saltTable-thead-divider-tertiary {
+  --table-header-divider-color: var(--salt-separable-tertiary-borderColor);
+}
+table.saltTable thead.saltTable-thead-divider-none {
+  --table-header-divider-color: transparent;
+}
+table.saltTable tfoot {
+  border-end-start-radius: var(--salt-palette-corner);
+  border-end-end-radius: var(--salt-palette-corner);
+  color: var(--salt-content-primary-foreground);
+  height: var(--table-footer-height);
+  min-height: var(--table-footer-height);
+  font-size: var(--salt-text-fontSize);
+  line-height: var(--salt-text-lineHeight);
+  font-weight: var(--salt-text-fontWeight-strong);
+  white-space: nowrap;
+}
+table.saltTable tfoot.saltTable-tfoot-sticky {
+  position: sticky;
+  bottom: 0;
+}
+table.saltTable tfoot.saltTable-tfoot tr {
+  border-top: var(--salt-borderStyle-solid) var(--table-footer-divider-color) var(--salt-size-fixed-100);
+}
+table.saltTable tfoot.saltTable-tfoot-primary tr {
+  background: var(--salt-container-primary-background);
+}
+table.saltTable tfoot.saltTable-tfoot-secondary tr {
+  background: var(--salt-container-secondary-background);
+}
+table.saltTable tfoot.saltTable-tfoot-tertiary tr {
+  background: var(--salt-container-tertiary-background);
+}
+table.saltTable tfoot.saltTable-tfoot-divider-primary tr {
+  --table-footer-divider-color: var(--salt-separable-primary-borderColor);
+}
+table.saltTable tfoot.saltTable-tfoot-divider-secondary tr {
+  --table-footer-divider-color: var(--salt-separable-secondary-borderColor);
+}
+table.saltTable tfoot.saltTable-tfoot-divider-tertiary tr {
+  --table-footer-divider-color: var(--salt-separable-tertiary-borderColor);
+}
+table.saltTable tfoot.saltTable-tfoot-divider-none tr {
+  --table-footer-divider-color: transparent;
+}
+table.saltTable th {
+  overflow: hidden;
+  padding: var(--salt-spacing-100);
+  position: relative;
+  text-align: start;
+}
+.table.saltTable th[scope=row] {
+  font-weight: var(--salt-text-fontWeight-strong);
+  line-height: var(--salt-text-lineHeight);
+}
+table.saltTable th + th::before {
+  --table-th-separator-height: calc(var(--salt-size-base) / 2 - 2 * var(--salt-size-fixed-100));
+  background: var(--salt-separable-tertiary-borderColor);
+  content: "";
+  position: absolute;
+  z-index: 1;
+  display: block;
+  width: var(--salt-size-border);
+  height: var(--table-th-separator-height);
+  top: calc(50% - var(--table-th-separator-height) * 0.5);
+  left: 0;
+}
+table.saltTable tr {
+  background: var(--table-background);
+  height: var(--table-row-height);
+  min-height: var(--table-row-height);
+}
+table.saltTable tbody tr:not(:last-child) {
+  border-bottom: var(--salt-borderStyle-solid) var(--table-divider-color) var(--salt-size-fixed-100);
+}
+table.saltTable-divider-none tbody tr {
+  --table-divider-color: transparent;
+}
+table.saltTable td {
+  height: 100%;
+  padding: var(--salt-spacing-100);
+}
+
 /* src/tabs/Tab.css */
 .saltTab {
   --saltEditableLabel-padding: 0;
@@ -3978,6 +4161,154 @@
   width: 12px;
 }
 
+/* src/vertical-navigation/VerticalNavigation.css */
+.saltVerticalNavigation {
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-fixed-100);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  position: relative;
+}
+.saltVerticalNavigation > .saltDivider-horizontal,
+.saltVerticalNavigationSubMenu > .saltDivider-horizontal,
+.saltVerticalNavigationItem > .saltDivider-horizontal {
+  margin-bottom: calc(var(--salt-size-fixed-100) * -1);
+}
+.saltVerticalNavigation[data-has-direct-icons=false] .saltCollapsiblePanel-inner {
+  margin-bottom: calc(var(--salt-size-fixed-100) * -1);
+}
+.saltVerticalNavigation[data-has-direct-icons=false] .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu {
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);
+}
+.saltVerticalNavigation .saltCollapsiblePanel-inner .saltCollapsiblePanel-inner,
+.saltVerticalNavigation .saltCollapsiblePanel[aria-hidden=true] .saltCollapsiblePanel-inner {
+  margin-bottom: 0;
+}
+.saltVerticalNavigation .saltCollapsiblePanel-inner .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu,
+.saltVerticalNavigation .saltCollapsiblePanel[aria-hidden=true] .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu {
+  border-bottom: none;
+}
+
+/* src/vertical-navigation/VerticalNavigationItemContent.css */
+.saltVerticalNavigationItemContent {
+  --verticalNavigationItem-iconPadding: calc(var(--saltVerticalNavigationItem-iconPaddingMultiplier, 0) * (var(--salt-size-icon) + var(--salt-spacing-100)));
+  --verticalNavigationItem-depthPadding: calc(var(--salt-spacing-100) * max(0, calc(var(--verticalNavigationItem-depth, 0) - 1)));
+}
+.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent {
+  --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-150) + var(--salt-size-indicator) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));
+  --verticalNavigationItem-paddingBlock: var(--salt-spacing-50);
+}
+.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {
+  --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-100) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));
+  --verticalNavigationItem-paddingBlock: calc(var(--salt-spacing-50) - var(--salt-size-fixed-100));
+}
+.saltVerticalNavigationItemContent {
+  display: flex;
+  flex-direction: row;
+  gap: var(--salt-spacing-100);
+  appearance: none;
+  -webkit-appearance: none;
+  white-space: pre;
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
+  min-width: 4em;
+  padding: var(--verticalNavigationItem-paddingBlock) var(--salt-spacing-100) var(--verticalNavigationItem-paddingBlock) var(--verticalNavigationItem-paddingLeft);
+  position: relative;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border-radius: var(--salt-palette-corner-weak, 0);
+  overflow: hidden;
+  cursor: var(--salt-cursor-hover);
+  color: var(--salt-content-primary-foreground);
+  font-weight: var(--salt-text-h4-fontWeight);
+  font-family: var(--salt-text-h4-fontFamily);
+  text-align: var(--salt-text-textAlign);
+  letter-spacing: var(--salt-text-letterSpacing);
+  line-height: var(--salt-text-h4-lineHeight);
+  font-size: var(--salt-text-h4-fontSize);
+}
+.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active,
+.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active:hover {
+  background: var(--salt-navigable-accent-background-active);
+}
+.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent::before {
+  left: var(--salt-spacing-50);
+  content: "";
+  position: absolute;
+  height: var(--salt-size-base);
+  border-radius: var(--salt-palette-corner-strongest);
+  width: var(--salt-size-indicator);
+}
+.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active::before {
+  background: var(--salt-navigable-accent-indicator-active);
+}
+.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
+}
+.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active,
+.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active:hover {
+  background: var(--salt-navigable-accent-background-active);
+  border-color: var(--salt-navigable-accent-borderColor-active);
+}
+.saltVerticalNavigationItemContent .saltIcon,
+.saltVerticalNavigationItemContent .saltBadge {
+  min-height: var(--salt-text-lineHeight);
+}
+.saltVerticalNavigationItemContent-focused {
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(var(--salt-size-fixed-100) * -2);
+  z-index: 1;
+}
+.saltVerticalNavigationItemContent:hover {
+  background: var(--salt-navigable-background-hover);
+}
+.saltVerticalNavigation .saltVerticalNavigationItemContent-active,
+.saltVerticalNavigation .saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent-active {
+  font-weight: var(--salt-text-h4-fontWeight);
+}
+@supports selector(:has(*)) {
+  .saltVerticalNavigationItemContent-active:hover:has(.saltVerticalNavigationItemTrigger[aria-controls]) {
+    background: linear-gradient(var(--salt-navigable-background-hover), var(--salt-navigable-background-hover)) var(--salt-navigable-accent-background-active);
+  }
+}
+
+/* src/vertical-navigation/VerticalNavigationItemLabel.css */
+.saltVerticalNavigationItemLabel {
+  flex: 1;
+}
+
+/* src/vertical-navigation/VerticalNavigationItemTrigger.css */
+.saltVerticalNavigationItemTrigger {
+  all: unset;
+  padding: var(--salt-spacing-75) 0;
+  display: flex;
+  gap: var(--salt-spacing-100);
+  width: 100%;
+}
+.saltVerticalNavigationItemTrigger::before {
+  content: "";
+  display: block;
+  width: 100%;
+  position: absolute;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+/* src/vertical-navigation/VerticalNavigationSubMenu.css */
+.saltVerticalNavigationSubMenu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-fixed-100);
+  list-style: none;
+  padding: var(--salt-spacing-fixed-100) 0 0;
+  margin: 0;
+}
+.saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent {
+  font-weight: var(--salt-text-h4-fontWeight-small);
+}
+
 /* src/window/ElectronWindow.css */
 .saltWindow {
   --saltDialog-boxShadow: none;
@@ -4221,4 +4552,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/74e77887-c876-4d5f-a3d9-425bdfc6918b.css */
+/* src/9b30d833-bf54-4fa1-a1f3-00a5f8cf8f5a.css */

package/dist-cjs/collapsible/Collapsible.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var react = require('react');
+var CollapsibleContext = require('./CollapsibleContext.js');
+
+const withBaseName = core.makePrefixer("saltCollapsible");
+const Collapsible = react.forwardRef(
+  function Collapsible2(props, ref) {
+    const {
+      className,
+      open: openProp,
+      defaultOpen,
+      onOpenChange,
+      ...rest
+    } = props;
+    const [open, setOpenState] = core.useControlled({
+      default: Boolean(defaultOpen),
+      controlled: openProp,
+      name: "Collapsible",
+      state: "open"
+    });
+    const [panelId, setPanelId] = react.useState(void 0);
+    const setOpen = react.useCallback(
+      (event, newOpen) => {
+        setOpenState(newOpen);
+        onOpenChange == null ? void 0 : onOpenChange(event, newOpen);
+      },
+      [onOpenChange]
+    );
+    const contextValue = react.useMemo(
+      () => ({
+        open,
+        setOpen,
+        panelId,
+        setPanelId
+      }),
+      [open, setOpen, panelId]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContext.CollapsibleContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName(), className), ref, ...rest }) });
+  }
+);
+
+exports.Collapsible = Collapsible;
+//# sourceMappingURL=Collapsible.js.map

package/dist-cjs/collapsible/Collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.js","sources":["../src/collapsible/Collapsible.tsx"],"sourcesContent":["import { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type SyntheticEvent,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { CollapsibleContext } from \"./CollapsibleContext\";\n\nexport interface CollapsibleProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onToggle\"> {\n  /**\n   * Whether the accordion is open.\n   */\n  open?: boolean;\n  /**\n   * Whether the accordion is open by default.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Callback fired when the accordion is opened or closed.\n   */\n  onOpenChange?: (\n    event: SyntheticEvent<HTMLButtonElement>,\n    open: boolean,\n  ) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltCollapsible\");\n\nexport const Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(\n  function Collapsible(props, ref) {\n    const {\n      className,\n      open: openProp,\n      defaultOpen,\n      onOpenChange,\n      ...rest\n    } = props;\n\n    const [open, setOpenState] = useControlled({\n      default: Boolean(defaultOpen),\n      controlled: openProp,\n      name: \"Collapsible\",\n      state: \"open\",\n    });\n\n    const [panelId, setPanelId] = useState<string | undefined>(undefined);\n\n    const setOpen = useCallback(\n      (event: SyntheticEvent<HTMLButtonElement>, newOpen: boolean) => {\n        setOpenState(newOpen);\n        onOpenChange?.(event, newOpen);\n      },\n      [onOpenChange],\n    );\n\n    const contextValue = useMemo(\n      () => ({\n        open,\n        setOpen,\n        panelId,\n        setPanelId,\n      }),\n      [open, setOpen, panelId],\n    );\n\n    return (\n      <CollapsibleContext.Provider value={contextValue}>\n        <div className={clsx(withBaseName(), className)} ref={ref} {...rest} />\n      </CollapsibleContext.Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Collapsible","useControlled","useState","useCallback","useMemo","CollapsibleContext","jsx","clsx"],"mappings":";;;;;;;;AA+BA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA;AAE5C,MAAM,WAAc,GAAAC,gBAAA;AAAA,EACzB,SAASC,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,IAAM,EAAA,QAAA;AAAA,MACN,WAAA;AAAA,MACA,YAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,CAAC,IAAA,EAAM,YAAY,CAAA,GAAIC,kBAAc,CAAA;AAAA,MACzC,OAAA,EAAS,QAAQ,WAAW,CAAA;AAAA,MAC5B,UAAY,EAAA,QAAA;AAAA,MACZ,IAAM,EAAA,aAAA;AAAA,MACN,KAAO,EAAA;AAAA,KACR,CAAA;AAED,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAA6B,MAAS,CAAA;AAEpE,IAAA,MAAM,OAAU,GAAAC,iBAAA;AAAA,MACd,CAAC,OAA0C,OAAqB,KAAA;AAC9D,QAAA,YAAA,CAAa,OAAO,CAAA;AACpB,QAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAe,KAAO,EAAA,OAAA,CAAA;AAAA,OACxB;AAAA,MACA,CAAC,YAAY;AAAA,KACf;AAEA,IAAA,MAAM,YAAe,GAAAC,aAAA;AAAA,MACnB,OAAO;AAAA,QACL,IAAA;AAAA,QACA,OAAA;AAAA,QACA,OAAA;AAAA,QACA;AAAA,OACF,CAAA;AAAA,MACA,CAAC,IAAM,EAAA,OAAA,EAAS,OAAO;AAAA,KACzB;AAEA,IAAA,sCACGC,qCAAmB,CAAA,QAAA,EAAnB,EAA4B,KAAA,EAAO,cAClC,QAAC,kBAAAC,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAAC,SAAA,CAAK,cAAgB,EAAA,SAAS,GAAG,GAAW,EAAA,GAAG,MAAM,CACvE,EAAA,CAAA;AAAA;AAGN;;;;"}

package/dist-cjs/collapsible/CollapsibleContext.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var react = require('react');
+
+const CollapsibleContext = core.createContext(
+  "CollapsibleContext",
+  {
+    open: false,
+    setOpen: () => {
+    },
+    panelId: void 0,
+    setPanelId: () => {
+    }
+  }
+);
+function useCollapsibleContext() {
+  return react.useContext(CollapsibleContext);
+}
+
+exports.CollapsibleContext = CollapsibleContext;
+exports.useCollapsibleContext = useCollapsibleContext;
+//# sourceMappingURL=CollapsibleContext.js.map

package/dist-cjs/collapsible/CollapsibleContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleContext.js","sources":["../src/collapsible/CollapsibleContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { type SyntheticEvent, useContext } from \"react\";\n\nexport type CollapsibleContextValue = {\n  open: boolean;\n  setOpen: (event: SyntheticEvent<HTMLButtonElement>, open: boolean) => void;\n  panelId?: string;\n  setPanelId?: (panelId: string) => void;\n};\n\nexport const CollapsibleContext = createContext<CollapsibleContextValue>(\n  \"CollapsibleContext\",\n  {\n    open: false,\n    setOpen: () => {},\n    panelId: undefined,\n    setPanelId: () => {},\n  },\n);\n\nexport function useCollapsibleContext() {\n  return useContext(CollapsibleContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;AAUO,MAAM,kBAAqB,GAAAA,kBAAA;AAAA,EAChC,oBAAA;AAAA,EACA;AAAA,IACE,IAAM,EAAA,KAAA;AAAA,IACN,SAAS,MAAM;AAAA,KAAC;AAAA,IAChB,OAAS,EAAA,MAAA;AAAA,IACT,YAAY,MAAM;AAAA;AAAC;AAEvB;AAEO,SAAS,qBAAwB,GAAA;AACtC,EAAA,OAAOC,iBAAW,kBAAkB,CAAA;AACtC;;;;;"}

package/dist-cjs/collapsible/CollapsiblePanel.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltCollapsiblePanel {\n  display: grid;\n  transition:\n    grid-template-rows var(--salt-duration-perceptible) ease-in-out,\n    opacity var(--salt-duration-perceptible) ease-in-out,\n    visibility var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltCollapsiblePanel[aria-hidden=\"true\"] {\n  grid-template-rows: 0fr;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.saltCollapsiblePanel {\n  grid-template-rows: 1fr;\n  opacity: 1;\n  visibility: visible;\n}\n\n.saltCollapsiblePanel-inner {\n  overflow: hidden;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=CollapsiblePanel.css.js.map

package/dist-cjs/collapsible/CollapsiblePanel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsiblePanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/collapsible/CollapsiblePanel.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var CollapsibleContext = require('./CollapsibleContext.js');
+var CollapsiblePanel$1 = require('./CollapsiblePanel.css.js');
+
+const withBaseName = core.makePrefixer("saltCollapsiblePanel");
+const CollapsiblePanel = (props) => {
+  const { children, className, id: idProp, ...rest } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-collapsible-panel",
+    css: CollapsiblePanel$1,
+    window: targetWindow
+  });
+  const id = core.useId(idProp);
+  const { open, setPanelId } = CollapsibleContext.useCollapsibleContext();
+  react.useEffect(() => {
+    if (id) {
+      setPanelId == null ? void 0 : setPanelId(id);
+    }
+  }, [id, setPanelId]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: clsx.clsx(withBaseName(), className),
+      id,
+      "aria-hidden": !open ? "true" : void 0,
+      hidden: !open,
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("inner"), children })
+    }
+  );
+};
+
+exports.CollapsiblePanel = CollapsiblePanel;
+//# sourceMappingURL=CollapsiblePanel.js.map

package/dist-cjs/collapsible/CollapsiblePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsiblePanel.js","sources":["../src/collapsible/CollapsiblePanel.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, useEffect } from \"react\";\n\nimport { useCollapsibleContext } from \"./CollapsibleContext\";\nimport collapsiblePanelCss from \"./CollapsiblePanel.css\";\n\nexport interface CollapsiblePanelProps\n  extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltCollapsiblePanel\");\n\nexport const CollapsiblePanel = (props: CollapsiblePanelProps) => {\n  const { children, className, id: idProp, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-collapsible-panel\",\n    css: collapsiblePanelCss,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n  const { open, setPanelId } = useCollapsibleContext();\n\n  useEffect(() => {\n    if (id) {\n      setPanelId?.(id);\n    }\n  }, [id, setPanelId]);\n\n  return (\n    <div\n      className={clsx(withBaseName(), className)}\n      id={id}\n      aria-hidden={!open ? \"true\" : undefined}\n      hidden={!open}\n      {...rest}\n    >\n      <div className={withBaseName(\"inner\")}>{children}</div>\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","collapsiblePanelCss","useId","useCollapsibleContext","useEffect","jsx","clsx"],"mappings":";;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,sBAAsB,CAAA;AAE3C,MAAA,gBAAA,GAAmB,CAAC,KAAiC,KAAA;AAChE,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,IAAI,MAAQ,EAAA,GAAG,MAAS,GAAA,KAAA;AAErD,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAA,GAAKC,WAAM,MAAM,CAAA;AACvB,EAAA,MAAM,EAAE,IAAA,EAAM,UAAW,EAAA,GAAIC,wCAAsB,EAAA;AAEnD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,EAAI,EAAA;AACN,MAAa,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAA,EAAA,CAAA;AAAA;AACf,GACC,EAAA,CAAC,EAAI,EAAA,UAAU,CAAC,CAAA;AAEnB,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,EAAA;AAAA,MACA,aAAA,EAAa,CAAC,IAAA,GAAO,MAAS,GAAA,MAAA;AAAA,MAC9B,QAAQ,CAAC,IAAA;AAAA,MACR,GAAG,IAAA;AAAA,MAEJ,yCAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,OAAO,GAAI,QAAS,EAAA;AAAA;AAAA,GACnD;AAEJ;;;;"}

package/dist-cjs/collapsible/CollapsibleTrigger.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var react = require('react');
+var CollapsibleContext = require('./CollapsibleContext.js');
+
+const withBaseName = core.makePrefixer("saltCollapsibleTrigger");
+const CollapsibleTrigger = react.forwardRef(function CollapsibleTrigger2(props, ref) {
+  const { children, className, onClick} = props;
+  const { open, setOpen, panelId } = CollapsibleContext.useCollapsibleContext();
+  const handleClick = (event) => {
+    setOpen(event, !open);
+    onClick == null ? void 0 : onClick(event);
+  };
+  if (!children || !react.isValidElement(children)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  return react.cloneElement(children, {
+    ...core.mergeProps(
+      {
+        className: clsx.clsx(withBaseName(), className),
+        type: "button",
+        "aria-expanded": open,
+        "aria-controls": panelId,
+        onClick: handleClick
+      },
+      children.props
+    ),
+    ref
+  });
+});
+
+exports.CollapsibleTrigger = CollapsibleTrigger;
+//# sourceMappingURL=CollapsibleTrigger.js.map

package/dist-cjs/collapsible/CollapsibleTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleTrigger.js","sources":["../src/collapsible/CollapsibleTrigger.tsx"],"sourcesContent":["import { makePrefixer, mergeProps } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { useCollapsibleContext } from \"./CollapsibleContext\";\n\nexport interface CollapsibleTriggerProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  children: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltCollapsibleTrigger\");\n\nexport const CollapsibleTrigger = forwardRef<\n  HTMLButtonElement,\n  CollapsibleTriggerProps\n>(function CollapsibleTrigger(props, ref) {\n  const { children, className, onClick, ...rest } = props;\n\n  const { open, setOpen, panelId } = useCollapsibleContext();\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    setOpen(event, !open);\n    onClick?.(event);\n  };\n\n  if (!children || !isValidElement<{ ref?: Ref<unknown> }>(children)) {\n    // Should we log or throw error?\n    return <>{children}</>;\n  }\n\n  return cloneElement(children, {\n    ...mergeProps(\n      {\n        className: clsx(withBaseName(), className),\n        type: \"button\",\n        \"aria-expanded\": open,\n        \"aria-controls\": panelId,\n        onClick: handleClick,\n      },\n      children.props,\n    ),\n    ref,\n  });\n});\n"],"names":["makePrefixer","forwardRef","CollapsibleTrigger","useCollapsibleContext","isValidElement","cloneElement","mergeProps","clsx"],"mappings":";;;;;;;;AAkBA,MAAM,YAAA,GAAeA,kBAAa,wBAAwB,CAAA;AAEnD,MAAM,kBAAqB,GAAAC,gBAAA,CAGhC,SAASC,mBAAAA,CAAmB,OAAO,GAAK,EAAA;AACxC,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,OAAiB,CAAI,GAAA,KAAA;AAElD,EAAA,MAAM,EAAE,IAAA,EAAM,OAAS,EAAA,OAAA,KAAYC,wCAAsB,EAAA;AAEzD,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAQ,OAAA,CAAA,KAAA,EAAO,CAAC,IAAI,CAAA;AACpB,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAA,IAAI,CAAC,QAAA,IAAY,CAACC,oBAAA,CAAuC,QAAQ,CAAG,EAAA;AAElE,IAAA,6DAAU,QAAS,EAAA,CAAA;AAAA;AAGrB,EAAA,OAAOC,mBAAa,QAAU,EAAA;AAAA,IAC5B,GAAGC,eAAA;AAAA,MACD;AAAA,QACE,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,IAAM,EAAA,QAAA;AAAA,QACN,eAAiB,EAAA,IAAA;AAAA,QACjB,eAAiB,EAAA,OAAA;AAAA,QACjB,OAAS,EAAA;AAAA,OACX;AAAA,MACA,QAAS,CAAA;AAAA,KACX;AAAA,IACA;AAAA,GACD,CAAA;AACH,CAAC;;;;"}

package/dist-cjs/index.js

@@ -13,6 +13,9 @@ var useCalendar = require('./calendar/useCalendar.js');
 var useCalendarDay = require('./calendar/useCalendarDay.js');
 var useCalendarSelection = require('./calendar/useCalendarSelection.js');
 var CascadingMenu = require('./cascading-menu/CascadingMenu.js');
+var Collapsible = require('./collapsible/Collapsible.js');
+var CollapsiblePanel = require('./collapsible/CollapsiblePanel.js');
+var CollapsibleTrigger = require('./collapsible/CollapsibleTrigger.js');
 var Color = require('./color-chooser/Color.js');
 var ColorChooser = require('./color-chooser/ColorChooser.js');
 var ColorHelpers = require('./color-chooser/ColorHelpers.js');
@@ -127,6 +130,13 @@ var StaticListItemContent = require('./static-list/StaticListItemContent.js');
 var SystemStatus = require('./system-status/SystemStatus.js');
 var SystemStatusActions = require('./system-status/SystemStatusActions.js');
 var SystemStatusContent = require('./system-status/SystemStatusContent.js');
+var Table = require('./table/Table.js');
+var TBody = require('./table/TBody.js');
+var TD = require('./table/TD.js');
+var TFoot = require('./table/TFoot.js');
+var TH = require('./table/TH.js');
+var THead = require('./table/THead.js');
+var TR = require('./table/TR.js');
 var Tab = require('./tabs/Tab.js');
 var TabActivationIndicator = require('./tabs/TabActivationIndicator.js');
 var TabPanel = require('./tabs/TabPanel.js');
@@ -150,6 +160,13 @@ var ToolbarButton = require('./toolbar/ToolbarButton.js');
 var Tooltray = require('./toolbar/Tooltray.js');
 var ToolbarField = require('./toolbar/toolbar-field/ToolbarField.js');
 var Tree = require('./tree/Tree.js');
+var VerticalNavigation = require('./vertical-navigation/VerticalNavigation.js');
+var VerticalNavigationItem = require('./vertical-navigation/VerticalNavigationItem.js');
+var VerticalNavigationItemContent = require('./vertical-navigation/VerticalNavigationItemContent.js');
+var VerticalNavigationItemExpansionIcon = require('./vertical-navigation/VerticalNavigationItemExpansionIcon.js');
+var VerticalNavigationItemLabel = require('./vertical-navigation/VerticalNavigationItemLabel.js');
+var VerticalNavigationItemTrigger = require('./vertical-navigation/VerticalNavigationItemTrigger.js');
+var VerticalNavigationSubMenu = require('./vertical-navigation/VerticalNavigationSubMenu.js');
 var ElectronWindow = require('./window/ElectronWindow.js');
 var WindowContext = require('./window/WindowContext.js');
 
@@ -171,6 +188,9 @@ exports.isDateRangeSelection = useCalendarSelection.isDateRangeSelection;
 exports.useCalendarSelection = useCalendarSelection.useCalendarSelection;
 exports.useCalendarSelectionDay = useCalendarSelection.useCalendarSelectionDay;
 exports.CascadingMenu = CascadingMenu.CascadingMenu;
+exports.Collapsible = Collapsible.Collapsible;
+exports.CollapsiblePanel = CollapsiblePanel.CollapsiblePanel;
+exports.CollapsibleTrigger = CollapsibleTrigger.CollapsibleTrigger;
 exports.Color = Color.Color;
 exports.ColorChooser = ColorChooser.ColorChooser;
 exports.convertColorMapValueToHex = ColorHelpers.convertColorMapValueToHex;
@@ -320,6 +340,14 @@ exports.StaticListItemContent = StaticListItemContent.StaticListItemContent;
 exports.SystemStatus = SystemStatus.SystemStatus;
 exports.SystemStatusActions = SystemStatusActions.SystemStatusActions;
 exports.SystemStatusContent = SystemStatusContent.SystemStatusContent;
+exports.Table = Table.Table;
+exports.withTableBaseName = Table.withTableBaseName;
+exports.TBody = TBody.TBody;
+exports.TD = TD.TD;
+exports.TFoot = TFoot.TFoot;
+exports.TH = TH.TH;
+exports.THead = THead.THead;
+exports.TR = TR.TR;
 exports.Tab = Tab.Tab;
 exports.TabActivationIndicator = TabActivationIndicator.TabActivationIndicator;
 exports.TabPanel = TabPanel.TabPanel;
@@ -343,6 +371,14 @@ exports.ToolbarButton = ToolbarButton.ToolbarButton;
 exports.Tooltray = Tooltray.Tooltray;
 exports.ToolbarField = ToolbarField.ToolbarField;
 exports.Tree = Tree.Tree;
+exports.VerticalNavigation = VerticalNavigation.VerticalNavigation;
+exports.VerticalNavigationItem = VerticalNavigationItem.VerticalNavigationItem;
+exports.useVerticalNavigationItem = VerticalNavigationItem.useVerticalNavigationItem;
+exports.VerticalNavigationItemContent = VerticalNavigationItemContent.VerticalNavigationItemContent;
+exports.VerticalNavigationItemExpansionIcon = VerticalNavigationItemExpansionIcon.VerticalNavigationItemExpansionIcon;
+exports.VerticalNavigationItemLabel = VerticalNavigationItemLabel.VerticalNavigationItemLabel;
+exports.VerticalNavigationItemTrigger = VerticalNavigationItemTrigger.VerticalNavigationItemTrigger;
+exports.VerticalNavigationSubMenu = VerticalNavigationSubMenu.VerticalNavigationSubMenu;
 exports.ElectronWindow = ElectronWindow.ElectronWindow;
 exports.Window = WindowContext.Window;
 exports.WindowContext = WindowContext.WindowContext;