@planningcenter/tapestry 4.11.0-rc.0 → 4.11.0

package/dist/components/link/IconLink.d.ts

@@ -29,6 +29,9 @@ export declare const IconLink: React.ForwardRefExoticComponent<Omit<{
     target?: React.HTMLAttributeAnchorTarget | undefined;
     popover?: "" | "auto" | "manual" | undefined;
     "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+    type?: string | undefined | undefined;
+    id?: string | undefined | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -39,7 +42,6 @@ export declare const IconLink: React.ForwardRefExoticComponent<Omit<{
     contextMenu?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     hidden?: boolean | undefined | undefined;
-    id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
     nonce?: string | undefined | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
@@ -89,7 +91,6 @@ export declare const IconLink: React.ForwardRefExoticComponent<Omit<{
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
     "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
     "aria-errormessage"?: string | undefined | undefined;
-    "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
     "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
@@ -287,7 +288,6 @@ export declare const IconLink: React.ForwardRefExoticComponent<Omit<{
     onTransitionEnd?: React.TransitionEventHandler<HTMLAnchorElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLAnchorElement> | undefined;
     media?: string | undefined | undefined;
-    type?: string | undefined | undefined;
     download?: any;
     hrefLang?: string | undefined | undefined;
     ping?: string | undefined | undefined;

package/dist/components/segmented-control/IconSegment.d.ts

@@ -24,5 +24,5 @@ export type IconSegmentElementProps = Omit<ButtonHTMLAttributes<HTMLButtonElemen
  * @component
  * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/forms-segmentedcontrol--docs | Storybook Documentation}
  */
-export declare const IconSegment: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "tabIndex" | "role" | "aria-checked" | "onKeyDown" | "onClick" | "type" | keyof IconSegmentProps> & IconSegmentProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const IconSegment: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type" | "tabIndex" | "role" | "aria-checked" | "onKeyDown" | "onClick" | keyof IconSegmentProps> & IconSegmentProps & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=IconSegment.d.ts.map

package/dist/components/segmented-control/Segment.d.ts

@@ -29,5 +29,5 @@ export type SegmentElementProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>,
  * @component
  * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/forms-segmentedcontrol--docs | Storybook Documentation}
  */
-export declare const Segment: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "tabIndex" | "role" | "aria-checked" | "onKeyDown" | "onClick" | "type" | keyof SegmentProps> & SegmentProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Segment: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type" | "tabIndex" | "role" | "aria-checked" | "onKeyDown" | "onClick" | keyof SegmentProps> & SegmentProps & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=Segment.d.ts.map

package/dist/components/segmented-control/SegmentBase.d.ts

@@ -14,5 +14,5 @@ export type SegmentBaseElementProps = Omit<ButtonHTMLAttributes<HTMLButtonElemen
  * and disabled propagation all live here so the two public components only
  * differ in what they render inside the button.
  */
-export declare const SegmentBase: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "tabIndex" | "role" | "aria-checked" | "onKeyDown" | "onClick" | "type" | keyof SegmentBaseProps> & SegmentBaseProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const SegmentBase: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type" | "tabIndex" | "role" | "aria-checked" | "onKeyDown" | "onClick" | keyof SegmentBaseProps> & SegmentBaseProps & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=SegmentBase.d.ts.map

package/dist/components/sidenav/Sidenav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidenav.d.ts","sourceRoot":"","sources":["../../../src/components/sidenav/Sidenav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,SAAS,EACT,SAAS,GACV,EAAE;IACD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,qBAcA"}
+{"version":3,"file":"Sidenav.d.ts","sourceRoot":"","sources":["../../../src/components/sidenav/Sidenav.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAmB,EACnB,iBAAiB,EACjB,SAAS,EACT,SAAS,GACV,EAAE;IACD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,qBAuBA"}

package/dist/components/sidenav/Sidenav.js

@@ -1,4 +1,7 @@
+import { useId } from '../../utilities/useId.js';
+import classNames from 'classnames';
 import React from 'react';
+import { SidenavResponsiveHeader } from './private/SidenavResponsiveHeader.js';
 
 /**
  * The sidenav lets users navigate through subsets of data pertaining to a resource.
@@ -12,9 +15,17 @@ import React from 'react';
  * @component
  * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/application-admin-sidenav--docs | Storybook Documentation}
  */
-function Sidenav({ children, label, selectedItemLabel, className, popoverId, }) {
-    const popoverIdProp = popoverId && popoverId.trim() ? { "popover-id": popoverId } : {};
-    return (React.createElement("tds-sidenav", { label: label, "selected-item-label": selectedItemLabel, class: className, ...popoverIdProp }, children));
+function Sidenav({ children, label = "Secondary", selectedItemLabel, className, popoverId, }) {
+    const id = useId();
+    const menuId = `tds-sidenav-menu-${id}`;
+    const resolvedPopoverId = popoverId?.trim() || `${menuId}-popover`;
+    // `tds-sidenav-collapse` takes the place of Stencil's
+    // `tds-popover-container`, so Rails can render the same markup without React.
+    return (React.createElement("div", { className: classNames("tds-sidenav", className) },
+        React.createElement("nav", { id: menuId, className: "tds-sidenav-nav", "aria-label": label },
+            React.createElement(SidenavResponsiveHeader, { label: selectedItemLabel, popoverId: resolvedPopoverId }),
+            React.createElement("tds-sidenav-collapse", { id: resolvedPopoverId, class: "tds-sidenav-collapse" },
+                React.createElement("div", { className: "tds-sidenav-scroll-container" }, children)))));
 }
 
 export { Sidenav };

package/dist/components/sidenav/Sidenav.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidenav.js","sources":["../../../src/components/sidenav/Sidenav.tsx"],"sourcesContent":["import React from \"react\"\n\n/**\n * The sidenav lets users navigate through subsets of data pertaining to a resource.\n * It can be nested under the page header navigation, as secondary navigation.\n *\n * The expected structure of a `Sidenav` is:\n * `<Sidenav> <SidenavSection> <SidenavItem /> </SidenavSection> </Sidenav>`\n *\n * Please refer to each component's documentation for more information on how to use them.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/application-admin-sidenav--docs | Storybook Documentation}\n */\nexport function Sidenav({\n  children,\n  label,\n  selectedItemLabel,\n  className,\n  popoverId,\n}: {\n  /**\n   * Default slot used to nest `SidenavSection` components.\n   */\n  children: React.ReactNode\n  className?: string\n  /**\n   * Label for the sidenav, used for accessibility.\n   */\n  label?: string\n  /**\n   * The id of the popover container.\n   */\n  popoverId?: string\n  /**\n   * Label displayed in the responsive header of the sidenav.\n   */\n  selectedItemLabel?: string\n}) {\n  const popoverIdProp =\n    popoverId && popoverId.trim() ? { \"popover-id\": popoverId } : {}\n\n  return (\n    <tds-sidenav\n      label={label}\n      selected-item-label={selectedItemLabel}\n      class={className}\n      {...popoverIdProp}\n    >\n      {children}\n    </tds-sidenav>\n  )\n}\n"],"names":[],"mappings":";;AAEA;;;;;;;;;;;AAWG;AACG,SAAU,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,SAAS,EACT,SAAS,GAmBV,EAAA;IACC,MAAM,aAAa,GACjB,SAAS,IAAI,SAAS,CAAC,IAAI,EAAE,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE;AAElE,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA,EACE,KAAK,EAAE,KAAK,yBACS,iBAAiB,EACtC,KAAK,EAAE,SAAS,EAAA,GACZ,aAAa,IAEhB,QAAQ,CACG;AAElB;;;;"}
+{"version":3,"file":"Sidenav.js","sources":["../../../src/components/sidenav/Sidenav.tsx"],"sourcesContent":["import { useId } from \"@utilities/useId\"\nimport classnames from \"classnames\"\nimport React from \"react\"\n\nimport { SidenavResponsiveHeader } from \"./private/SidenavResponsiveHeader\"\n\n/**\n * The sidenav lets users navigate through subsets of data pertaining to a resource.\n * It can be nested under the page header navigation, as secondary navigation.\n *\n * The expected structure of a `Sidenav` is:\n * `<Sidenav> <SidenavSection> <SidenavItem /> </SidenavSection> </Sidenav>`\n *\n * Please refer to each component's documentation for more information on how to use them.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/application-admin-sidenav--docs | Storybook Documentation}\n */\nexport function Sidenav({\n  children,\n  label = \"Secondary\",\n  selectedItemLabel,\n  className,\n  popoverId,\n}: {\n  /**\n   * Default slot used to nest `SidenavSection` components.\n   */\n  children: React.ReactNode\n  className?: string\n  /**\n   * Label for the sidenav, used for accessibility.\n   */\n  label?: string\n  /**\n   * The id of the popover container.\n   */\n  popoverId?: string\n  /**\n   * Label displayed in the responsive header of the sidenav.\n   */\n  selectedItemLabel?: string\n}) {\n  const id = useId()\n  const menuId = `tds-sidenav-menu-${id}`\n  const resolvedPopoverId = popoverId?.trim() || `${menuId}-popover`\n\n  // `tds-sidenav-collapse` takes the place of Stencil's\n  // `tds-popover-container`, so Rails can render the same markup without React.\n  return (\n    <div className={classnames(\"tds-sidenav\", className)}>\n      <nav id={menuId} className=\"tds-sidenav-nav\" aria-label={label}>\n        <SidenavResponsiveHeader\n          label={selectedItemLabel}\n          popoverId={resolvedPopoverId}\n        />\n        <tds-sidenav-collapse\n          id={resolvedPopoverId}\n          class=\"tds-sidenav-collapse\"\n        >\n          <div className=\"tds-sidenav-scroll-container\">{children}</div>\n        </tds-sidenav-collapse>\n      </nav>\n    </div>\n  )\n}\n"],"names":["classnames"],"mappings":";;;;;AAMA;;;;;;;;;;;AAWG;AACG,SAAU,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,GAAG,WAAW,EACnB,iBAAiB,EACjB,SAAS,EACT,SAAS,GAmBV,EAAA;AACC,IAAA,MAAM,EAAE,GAAG,KAAK,EAAE;AAClB,IAAA,MAAM,MAAM,GAAG,CAAA,iBAAA,EAAoB,EAAE,EAAE;IACvC,MAAM,iBAAiB,GAAG,SAAS,EAAE,IAAI,EAAE,IAAI,CAAA,EAAG,MAAM,CAAA,QAAA,CAAU;;;IAIlE,QACE,6BAAK,SAAS,EAAEA,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,EAAA;QAClD,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAC,iBAAiB,gBAAa,KAAK,EAAA;YAC5D,KAAA,CAAA,aAAA,CAAC,uBAAuB,IACtB,KAAK,EAAE,iBAAiB,EACxB,SAAS,EAAE,iBAAiB,EAAA,CAC5B;AACF,YAAA,KAAA,CAAA,aAAA,CAAA,sBAAA,EAAA,EACE,EAAE,EAAE,iBAAiB,EACrB,KAAK,EAAC,sBAAsB,EAAA;gBAE5B,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8BAA8B,EAAA,EAAE,QAAQ,CAAO,CACzC,CACnB,CACF;AAEV;;;;"}

package/dist/components/sidenav/SidenavItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidenavItem.d.ts","sourceRoot":"","sources":["../../../src/components/sidenav/SidenavItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE;IACD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,qBAOA"}
+{"version":3,"file":"SidenavItem.d.ts","sourceRoot":"","sources":["../../../src/components/sidenav/SidenavItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE;IACD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,qBAQA"}

package/dist/components/sidenav/SidenavItem.js

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React from 'react';
 
 /**
@@ -21,8 +22,9 @@ import React from 'react';
  * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/application-admin-sidenav--docs | Storybook Documentation}
  */
 function SidenavItem({ children, className, selected, }) {
-    const selectedProps = selected ? { selected: true } : {};
-    return (React.createElement("tds-sidenav-item", { class: className, ...selectedProps }, children));
+    // `tds-sidenav-collapse` sets `aria-current="page"` on the selected item's
+    // link or button, so React and Rails render the same markup.
+    return (React.createElement("li", { className: classNames("tds-sidenav-item", className, { selected }) }, children));
 }
 
 export { SidenavItem };

package/dist/components/sidenav/SidenavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidenavItem.js","sources":["../../../src/components/sidenav/SidenavItem.tsx"],"sourcesContent":["import React from \"react\"\n\n/**\n * The `SidenavItem` component is used to display a single item in the sidenav.\n *\n * @example\n * ```html\n * <SidenavItem>\n *   <a href=\"#\">Home</a>\n * </SidenavItem>\n *\n * <SidenavItem>\n *   <button>Foo</button>\n *   <SidenavSection subnav>\n *     <SidenavItem><a href=\"#\">Nested Link</a></SidenavItem>\n *   </SidenavSection>\n * </SidenavItem>\n * ```\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/application-admin-sidenav--docs | Storybook Documentation}\n */\nexport function SidenavItem({\n  children,\n  className,\n  selected,\n}: {\n  /**\n   * Should be a link or button without any classes or styles applied.\n   */\n  children: React.ReactNode\n  className?: string\n  /**\n   * Whether the sidenav item is selected.\n   */\n  selected?: boolean\n}) {\n  const selectedProps = selected ? { selected: true } : {}\n  return (\n    <tds-sidenav-item class={className} {...selectedProps}>\n      {children}\n    </tds-sidenav-item>\n  )\n}\n"],"names":[],"mappings":";;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;AACG,SAAU,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,QAAQ,GAWT,EAAA;AACC,IAAA,MAAM,aAAa,GAAG,QAAQ,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE;IACxD,QACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA,EAAkB,KAAK,EAAE,SAAS,EAAA,GAAM,aAAa,EAAA,EAClD,QAAQ,CACQ;AAEvB;;;;"}
+{"version":3,"file":"SidenavItem.js","sources":["../../../src/components/sidenav/SidenavItem.tsx"],"sourcesContent":["import classnames from \"classnames\"\nimport React from \"react\"\n\n/**\n * The `SidenavItem` component is used to display a single item in the sidenav.\n *\n * @example\n * ```html\n * <SidenavItem>\n *   <a href=\"#\">Home</a>\n * </SidenavItem>\n *\n * <SidenavItem>\n *   <button>Foo</button>\n *   <SidenavSection subnav>\n *     <SidenavItem><a href=\"#\">Nested Link</a></SidenavItem>\n *   </SidenavSection>\n * </SidenavItem>\n * ```\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/application-admin-sidenav--docs | Storybook Documentation}\n */\nexport function SidenavItem({\n  children,\n  className,\n  selected,\n}: {\n  /**\n   * Should be a link or button without any classes or styles applied.\n   */\n  children: React.ReactNode\n  className?: string\n  /**\n   * Whether the sidenav item is selected.\n   */\n  selected?: boolean\n}) {\n  // `tds-sidenav-collapse` sets `aria-current=\"page\"` on the selected item's\n  // link or button, so React and Rails render the same markup.\n  return (\n    <li className={classnames(\"tds-sidenav-item\", className, { selected })}>\n      {children}\n    </li>\n  )\n}\n"],"names":["classnames"],"mappings":";;;AAGA;;;;;;;;;;;;;;;;;;;AAmBG;AACG,SAAU,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,QAAQ,GAWT,EAAA;;;AAGC,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAEA,UAAU,CAAC,kBAAkB,EAAE,SAAS,EAAE,EAAE,QAAQ,EAAE,CAAC,IACnE,QAAQ,CACN;AAET;;;;"}

package/dist/components/sidenav/SidenavSection.d.ts

@@ -1,14 +1,5 @@
 import React from "react";
-/**
- * The `SidenavSection` component is used to display a section of the sidenav.
- * All `SidenavItem` components should be nested within a `SidenavSection`.
- *
- * If the `label` prop is provided, it will be used to generate a header for the section, and the section will be labelled by the `aria-labelledby` attribute.
- *
- * @component
- * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/application-admin-sidenav--docs | Storybook Documentation}
- */
-export declare function SidenavSection({ children, className, label, subnav, }: {
+type SidenavSectionProps = {
     /**
      * Default slot used to nest `SidenavItem` components.
      */
@@ -18,9 +9,28 @@ export declare function SidenavSection({ children, className, label, subnav, }:
      * Label for the section.
      */
     label?: string;
+    /**
+     * Actions shown next to the section label. Only rendered when `label` is set.
+     */
+    labelActions?: React.ReactNode;
+    /**
+     * Actions shown below the section's items.
+     */
+    sectionActions?: React.ReactNode;
     /**
      * Add subnav if this section is a subnav of a SidenavItem.
      */
     subnav?: boolean;
-}): React.JSX.Element;
+};
+/**
+ * The `SidenavSection` component is used to display a section of the sidenav.
+ * All `SidenavItem` components should be nested within a `SidenavSection`.
+ *
+ * If the `label` prop is provided, it will be used to generate a header for the section, and the section will be labelled by the `aria-labelledby` attribute.
+ *
+ * @component
+ * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/application-admin-sidenav--docs | Storybook Documentation}
+ */
+export declare function SidenavSection(props: SidenavSectionProps): React.JSX.Element;
+export {};
 //# sourceMappingURL=SidenavSection.d.ts.map

package/dist/components/sidenav/SidenavSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidenavSection.d.ts","sourceRoot":"","sources":["../../../src/components/sidenav/SidenavSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,KAAK,EACL,MAAM,GACP,EAAE;IACD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,qBAOA"}
+{"version":3,"file":"SidenavSection.d.ts","sourceRoot":"","sources":["../../../src/components/sidenav/SidenavSection.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,KAAK,mBAAmB,GAAG;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAiCxD"}

package/dist/components/sidenav/SidenavSection.js

@@ -1,4 +1,7 @@
+import { useId } from '../../utilities/useId.js';
+import classNames from 'classnames';
 import React from 'react';
+import { withSlotChildrenAsActions } from './private/withSlotChildrenAsActions.js';
 
 /**
  * The `SidenavSection` component is used to display a section of the sidenav.
@@ -9,9 +12,17 @@ import React from 'react';
  * @component
  * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/application-admin-sidenav--docs | Storybook Documentation}
  */
-function SidenavSection({ children, className, label, subnav, }) {
-    const subnavProps = subnav ? { slot: "subnav" } : {};
-    return (React.createElement("tds-sidenav-section", { class: className, label: label, ...subnavProps }, children));
+function SidenavSection(props) {
+    // Remove in DE-1292, along with withSlotChildrenAsActions.
+    const { children, className, label, labelActions, sectionActions, subnav } = withSlotChildrenAsActions(props);
+    const id = useId();
+    const headerId = `tds-sidenav-section-header-${id}`;
+    return (React.createElement("div", { className: classNames("tds-sidenav-section", className), slot: subnav ? "subnav" : undefined },
+        label && (React.createElement("div", { className: "tds-sidenav-section-header" },
+            React.createElement("h2", { id: headerId }, label),
+            labelActions && (React.createElement("div", { className: "tds-sidenav-section-label-actions" }, labelActions)))),
+        React.createElement("ul", { className: "tds-sidenav-section-list", "aria-labelledby": label ? headerId : undefined }, children),
+        sectionActions && (React.createElement("div", { className: "tds-sidenav-section-actions" }, sectionActions))));
 }
 
 export { SidenavSection };

package/dist/components/sidenav/SidenavSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidenavSection.js","sources":["../../../src/components/sidenav/SidenavSection.tsx"],"sourcesContent":["import React from \"react\"\n\n/**\n * The `SidenavSection` component is used to display a section of the sidenav.\n * All `SidenavItem` components should be nested within a `SidenavSection`.\n *\n * If the `label` prop is provided, it will be used to generate a header for the section, and the section will be labelled by the `aria-labelledby` attribute.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/application-admin-sidenav--docs | Storybook Documentation}\n */\nexport function SidenavSection({\n  children,\n  className,\n  label,\n  subnav,\n}: {\n  /**\n   * Default slot used to nest `SidenavItem` components.\n   */\n  children: React.ReactNode\n  className?: string\n  /**\n   * Label for the section.\n   */\n  label?: string\n  /**\n   * Add subnav if this section is a subnav of a SidenavItem.\n   */\n  subnav?: boolean\n}) {\n  const subnavProps = subnav ? { slot: \"subnav\" } : {}\n  return (\n    <tds-sidenav-section class={className} label={label} {...subnavProps}>\n      {children}\n    </tds-sidenav-section>\n  )\n}\n"],"names":[],"mappings":";;AAEA;;;;;;;;AAQG;AACG,SAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,KAAK,EACL,MAAM,GAeP,EAAA;AACC,IAAA,MAAM,WAAW,GAAG,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE;AACpD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,EAAqB,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,KAAM,WAAW,EAAA,EACjE,QAAQ,CACW;AAE1B;;;;"}
+{"version":3,"file":"SidenavSection.js","sources":["../../../src/components/sidenav/SidenavSection.tsx"],"sourcesContent":["import { useId } from \"@utilities/useId\"\nimport classnames from \"classnames\"\nimport React from \"react\"\n\nimport { withSlotChildrenAsActions } from \"./private/withSlotChildrenAsActions\"\n\ntype SidenavSectionProps = {\n  /**\n   * Default slot used to nest `SidenavItem` components.\n   */\n  children: React.ReactNode\n  className?: string\n  /**\n   * Label for the section.\n   */\n  label?: string\n  /**\n   * Actions shown next to the section label. Only rendered when `label` is set.\n   */\n  labelActions?: React.ReactNode\n  /**\n   * Actions shown below the section's items.\n   */\n  sectionActions?: React.ReactNode\n  /**\n   * Add subnav if this section is a subnav of a SidenavItem.\n   */\n  subnav?: boolean\n}\n\n/**\n * The `SidenavSection` component is used to display a section of the sidenav.\n * All `SidenavItem` components should be nested within a `SidenavSection`.\n *\n * If the `label` prop is provided, it will be used to generate a header for the section, and the section will be labelled by the `aria-labelledby` attribute.\n *\n * @component\n * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/application-admin-sidenav--docs | Storybook Documentation}\n */\nexport function SidenavSection(props: SidenavSectionProps) {\n  // Remove in DE-1292, along with withSlotChildrenAsActions.\n  const { children, className, label, labelActions, sectionActions, subnav } =\n    withSlotChildrenAsActions(props)\n  const id = useId()\n  const headerId = `tds-sidenav-section-header-${id}`\n\n  return (\n    <div\n      className={classnames(\"tds-sidenav-section\", className)}\n      slot={subnav ? \"subnav\" : undefined}\n    >\n      {label && (\n        <div className=\"tds-sidenav-section-header\">\n          <h2 id={headerId}>{label}</h2>\n          {labelActions && (\n            <div className=\"tds-sidenav-section-label-actions\">\n              {labelActions}\n            </div>\n          )}\n        </div>\n      )}\n      <ul\n        className=\"tds-sidenav-section-list\"\n        aria-labelledby={label ? headerId : undefined}\n      >\n        {children}\n      </ul>\n      {sectionActions && (\n        <div className=\"tds-sidenav-section-actions\">{sectionActions}</div>\n      )}\n    </div>\n  )\n}\n"],"names":["classnames"],"mappings":";;;;;AA8BA;;;;;;;;AAQG;AACG,SAAU,cAAc,CAAC,KAA0B,EAAA;;AAEvD,IAAA,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,EAAE,GACxE,yBAAyB,CAAC,KAAK,CAAC;AAClC,IAAA,MAAM,EAAE,GAAG,KAAK,EAAE;AAClB,IAAA,MAAM,QAAQ,GAAG,CAAA,2BAAA,EAA8B,EAAE,EAAE;IAEnD,QACE,6BACE,SAAS,EAAEA,UAAU,CAAC,qBAAqB,EAAE,SAAS,CAAC,EACvD,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,EAAA;AAElC,QAAA,KAAK,KACJ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA;AACzC,YAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,EAAE,EAAE,QAAQ,EAAA,EAAG,KAAK,CAAM;YAC7B,YAAY,KACX,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,EAC/C,YAAY,CACT,CACP,CACG,CACP;AACD,QAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAC,0BAA0B,EAAA,iBAAA,EACnB,KAAK,GAAG,QAAQ,GAAG,SAAS,EAAA,EAE5C,QAAQ,CACN;AACJ,QAAA,cAAc,KACb,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,EAAE,cAAc,CAAO,CACpE,CACG;AAEV;;;;"}

package/dist/components/sidenav/index.js

@@ -1,6 +1,7 @@
 import './tds-sidenav-collapse.js';
 import { defineSidenavElements } from './defineElements.js';
 import 'react';
+import 'classnames';
 
 defineSidenavElements();
 //# sourceMappingURL=index.js.map

package/dist/components/sidenav/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/sidenav/index.tsx"],"sourcesContent":["import \"./index.css\"\nimport \"./tds-sidenav-collapse\"\n\nimport { defineSidenavElements } from \"./defineElements\"\n\ndefineSidenavElements()\n\nexport { Sidenav } from \"./Sidenav\"\nexport { SidenavItem } from \"./SidenavItem\"\nexport { SidenavSection } from \"./SidenavSection\"\n"],"names":[],"mappings":";;;;AAKA,qBAAqB,EAAE"}
+{"version":3,"file":"index.js","sources":["../../../src/components/sidenav/index.tsx"],"sourcesContent":["import \"./index.css\"\nimport \"./tds-sidenav-collapse\"\n\nimport { defineSidenavElements } from \"./defineElements\"\n\ndefineSidenavElements()\n\nexport { Sidenav } from \"./Sidenav\"\nexport { SidenavItem } from \"./SidenavItem\"\nexport { SidenavSection } from \"./SidenavSection\"\n"],"names":[],"mappings":";;;;;AAKA,qBAAqB,EAAE"}

package/dist/components/sidenav/private/SidenavResponsiveHeader.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare function SidenavResponsiveHeader({ label, popoverId, }: {
+    label?: string;
+    popoverId: string;
+}): React.JSX.Element;
+//# sourceMappingURL=SidenavResponsiveHeader.d.ts.map

package/dist/components/sidenav/private/SidenavResponsiveHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidenavResponsiveHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/sidenav/private/SidenavResponsiveHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EACL,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;CAClB,qBA6BA"}

package/dist/components/sidenav/private/SidenavResponsiveHeader.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+function SidenavResponsiveHeader({ label, popoverId, }) {
+    return (React.createElement("div", { className: "tds-sidenav-responsive-header" },
+        label && (React.createElement("h2", { className: "tds-sidenav-responsive-header-label" }, label)),
+        React.createElement("button", { type: "button", className: "tds-btn tds-btn--outline-neutral tds-btn--icononly tds-sidenav-responsive-header-toggle", "aria-label": "Menu", "aria-controls": popoverId, popovertarget: popoverId },
+            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" },
+                React.createElement("path", { d: "M0 6.91104H16V8.68904H0V6.91104ZM0 13.133H16V11.356H0V13.133ZM0 2.46704V4.24404H16V2.46704H0Z", fill: "currentColor" })))));
+}
+
+export { SidenavResponsiveHeader };
+//# sourceMappingURL=SidenavResponsiveHeader.js.map

package/dist/components/sidenav/private/SidenavResponsiveHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidenavResponsiveHeader.js","sources":["../../../../src/components/sidenav/private/SidenavResponsiveHeader.tsx"],"sourcesContent":["import React from \"react\"\n\nexport function SidenavResponsiveHeader({\n  label,\n  popoverId,\n}: {\n  label?: string\n  popoverId: string\n}) {\n  return (\n    <div className=\"tds-sidenav-responsive-header\">\n      {label && (\n        <h2 className=\"tds-sidenav-responsive-header-label\">{label}</h2>\n      )}\n      <button\n        type=\"button\"\n        className=\"tds-btn tds-btn--outline-neutral tds-btn--icononly tds-sidenav-responsive-header-toggle\"\n        aria-label=\"Menu\"\n        aria-controls={popoverId}\n        popovertarget={popoverId}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M0 6.91104H16V8.68904H0V6.91104ZM0 13.133H16V11.356H0V13.133ZM0 2.46704V4.24404H16V2.46704H0Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </button>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;SAEgB,uBAAuB,CAAC,EACtC,KAAK,EACL,SAAS,GAIV,EAAA;AACC,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,+BAA+B,EAAA;QAC3C,KAAK,KACJ,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,qCAAqC,EAAA,EAAE,KAAK,CAAM,CACjE;AACD,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yFAAyF,EAAA,YAAA,EACxF,MAAM,EAAA,eAAA,EACF,SAAS,EACxB,aAAa,EAAE,SAAS,EAAA;YAExB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,iBACC,MAAM,EAAA;AAElB,gBAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,+FAA+F,EACjG,IAAI,EAAC,cAAc,EAAA,CACnB,CACE,CACC,CACL;AAEV;;;;"}

package/dist/components/sidenav/private/withSlotChildrenAsActions.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+type SectionActionProps = {
+    children: React.ReactNode;
+    labelActions?: React.ReactNode;
+    sectionActions?: React.ReactNode;
+};
+/**
+ * Backward compatibility for `SidenavSection` children marked with
+ * `slot="label-actions"` or `slot="section-actions"`, from when it wrapped the
+ * `tds-sidenav-section` web component. Moves them into the `labelActions` and
+ * `sectionActions` props. Remove in DE-1292.
+ */
+export declare function withSlotChildrenAsActions<P extends SectionActionProps>(props: P): P;
+export {};
+//# sourceMappingURL=withSlotChildrenAsActions.d.ts.map

package/dist/components/sidenav/private/withSlotChildrenAsActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withSlotChildrenAsActions.d.ts","sourceRoot":"","sources":["../../../../src/components/sidenav/private/withSlotChildrenAsActions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACjC,CAAA;AAID;;;;;GAKG;AACH,wBAAgB,yBAAyB,CAAC,CAAC,SAAS,kBAAkB,EACpE,KAAK,EAAE,CAAC,GACP,CAAC,CA0BH"}

package/dist/components/sidenav/private/withSlotChildrenAsActions.js

@@ -0,0 +1,62 @@
+import React from 'react';
+
+let warned = false;
+/**
+ * Backward compatibility for `SidenavSection` children marked with
+ * `slot="label-actions"` or `slot="section-actions"`, from when it wrapped the
+ * `tds-sidenav-section` web component. Moves them into the `labelActions` and
+ * `sectionActions` props. Remove in DE-1292.
+ */
+function withSlotChildrenAsActions(props) {
+    const labelActions = [];
+    const sectionActions = [];
+    const children = partitionSlotChildren(props.children, {
+        labelActions,
+        sectionActions,
+    });
+    if (!labelActions.length && !sectionActions.length)
+        return props;
+    if (!warned) {
+        warned = true;
+        console.warn('[tapestry] SidenavSection children with slot="label-actions" or ' +
+            'slot="section-actions" are deprecated and will be removed in the ' +
+            "next major version. Pass them as the labelActions and " +
+            "sectionActions props instead.");
+    }
+    return {
+        ...props,
+        children,
+        labelActions: appendActions(props.labelActions, labelActions),
+        sectionActions: appendActions(props.sectionActions, sectionActions),
+    };
+}
+// Fragments render no DOM, so the web component slotted their children too.
+function partitionSlotChildren(node, slotted, keyPrefix = "") {
+    return React.Children.toArray(node).flatMap((child) => {
+        if (!React.isValidElement(child))
+            return [child];
+        if (child.type === React.Fragment) {
+            const rest = partitionSlotChildren(child.props.children, slotted, `${keyPrefix}${child.key}`);
+            return [React.cloneElement(child, undefined, ...rest)];
+        }
+        const { slot } = child.props;
+        if (slot !== "label-actions" && slot !== "section-actions")
+            return [child];
+        const keyed = keyPrefix
+            ? React.cloneElement(child, { key: `${keyPrefix}${child.key}` })
+            : child;
+        if (slot === "label-actions")
+            slotted.labelActions.push(keyed);
+        else
+            slotted.sectionActions.push(keyed);
+        return [];
+    });
+}
+function appendActions(actions, slotted) {
+    if (!slotted.length)
+        return actions;
+    return React.createElement(React.Fragment, null, actions, ...slotted);
+}
+
+export { withSlotChildrenAsActions };
+//# sourceMappingURL=withSlotChildrenAsActions.js.map

package/dist/components/sidenav/private/withSlotChildrenAsActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withSlotChildrenAsActions.js","sources":["../../../../src/components/sidenav/private/withSlotChildrenAsActions.ts"],"sourcesContent":["import React from \"react\"\n\ntype SectionActionProps = {\n  children: React.ReactNode\n  labelActions?: React.ReactNode\n  sectionActions?: React.ReactNode\n}\n\nlet warned = false\n\n/**\n * Backward compatibility for `SidenavSection` children marked with\n * `slot=\"label-actions\"` or `slot=\"section-actions\"`, from when it wrapped the\n * `tds-sidenav-section` web component. Moves them into the `labelActions` and\n * `sectionActions` props. Remove in DE-1292.\n */\nexport function withSlotChildrenAsActions<P extends SectionActionProps>(\n  props: P\n): P {\n  const labelActions: React.ReactNode[] = []\n  const sectionActions: React.ReactNode[] = []\n  const children = partitionSlotChildren(props.children, {\n    labelActions,\n    sectionActions,\n  })\n\n  if (!labelActions.length && !sectionActions.length) return props\n\n  if (!warned) {\n    warned = true\n    console.warn(\n      '[tapestry] SidenavSection children with slot=\"label-actions\" or ' +\n        'slot=\"section-actions\" are deprecated and will be removed in the ' +\n        \"next major version. Pass them as the labelActions and \" +\n        \"sectionActions props instead.\"\n    )\n  }\n\n  return {\n    ...props,\n    children,\n    labelActions: appendActions(props.labelActions, labelActions),\n    sectionActions: appendActions(props.sectionActions, sectionActions),\n  }\n}\n\ntype SlotChildren = {\n  labelActions: React.ReactNode[]\n  sectionActions: React.ReactNode[]\n}\n\n// Fragments render no DOM, so the web component slotted their children too.\nfunction partitionSlotChildren(\n  node: React.ReactNode,\n  slotted: SlotChildren,\n  keyPrefix = \"\"\n): React.ReactNode[] {\n  return React.Children.toArray(node).flatMap((child) => {\n    if (\n      !React.isValidElement<{ children?: React.ReactNode; slot?: string }>(\n        child\n      )\n    )\n      return [child]\n\n    if (child.type === React.Fragment) {\n      const rest = partitionSlotChildren(\n        child.props.children,\n        slotted,\n        `${keyPrefix}${child.key}`\n      )\n      return [React.cloneElement(child, undefined, ...rest)]\n    }\n\n    const { slot } = child.props\n    if (slot !== \"label-actions\" && slot !== \"section-actions\") return [child]\n\n    const keyed = keyPrefix\n      ? React.cloneElement(child, { key: `${keyPrefix}${child.key}` })\n      : child\n    if (slot === \"label-actions\") slotted.labelActions.push(keyed)\n    else slotted.sectionActions.push(keyed)\n    return []\n  })\n}\n\nfunction appendActions(actions: React.ReactNode, slotted: React.ReactNode[]) {\n  if (!slotted.length) return actions\n  return React.createElement(React.Fragment, null, actions, ...slotted)\n}\n"],"names":[],"mappings":";;AAQA,IAAI,MAAM,GAAG,KAAK;AAElB;;;;;AAKG;AACG,SAAU,yBAAyB,CACvC,KAAQ,EAAA;IAER,MAAM,YAAY,GAAsB,EAAE;IAC1C,MAAM,cAAc,GAAsB,EAAE;AAC5C,IAAA,MAAM,QAAQ,GAAG,qBAAqB,CAAC,KAAK,CAAC,QAAQ,EAAE;QACrD,YAAY;QACZ,cAAc;AACf,KAAA,CAAC;IAEF,IAAI,CAAC,YAAY,CAAC,MAAM,IAAI,CAAC,cAAc,CAAC,MAAM;AAAE,QAAA,OAAO,KAAK;IAEhE,IAAI,CAAC,MAAM,EAAE;QACX,MAAM,GAAG,IAAI;QACb,OAAO,CAAC,IAAI,CACV,kEAAkE;YAChE,mEAAmE;YACnE,wDAAwD;AACxD,YAAA,+BAA+B,CAClC;IACH;IAEA,OAAO;AACL,QAAA,GAAG,KAAK;QACR,QAAQ;QACR,YAAY,EAAE,aAAa,CAAC,KAAK,CAAC,YAAY,EAAE,YAAY,CAAC;QAC7D,cAAc,EAAE,aAAa,CAAC,KAAK,CAAC,cAAc,EAAE,cAAc,CAAC;KACpE;AACH;AAOA;AACA,SAAS,qBAAqB,CAC5B,IAAqB,EACrB,OAAqB,EACrB,SAAS,GAAG,EAAE,EAAA;AAEd,IAAA,OAAO,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACpD,QAAA,IACE,CAAC,KAAK,CAAC,cAAc,CACnB,KAAK,CACN;YAED,OAAO,CAAC,KAAK,CAAC;QAEhB,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,QAAQ,EAAE;YACjC,MAAM,IAAI,GAAG,qBAAqB,CAChC,KAAK,CAAC,KAAK,CAAC,QAAQ,EACpB,OAAO,EACP,CAAA,EAAG,SAAS,CAAA,EAAG,KAAK,CAAC,GAAG,CAAA,CAAE,CAC3B;AACD,YAAA,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,CAAC;QACxD;AAEA,QAAA,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,KAAK;AAC5B,QAAA,IAAI,IAAI,KAAK,eAAe,IAAI,IAAI,KAAK,iBAAiB;YAAE,OAAO,CAAC,KAAK,CAAC;QAE1E,MAAM,KAAK,GAAG;AACZ,cAAE,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,CAAA,EAAG,SAAS,CAAA,EAAG,KAAK,CAAC,GAAG,CAAA,CAAE,EAAE;cAC7D,KAAK;QACT,IAAI,IAAI,KAAK,eAAe;AAAE,YAAA,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;;AACzD,YAAA,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;AACvC,QAAA,OAAO,EAAE;AACX,IAAA,CAAC,CAAC;AACJ;AAEA,SAAS,aAAa,CAAC,OAAwB,EAAE,OAA0B,EAAA;IACzE,IAAI,CAAC,OAAO,CAAC,MAAM;AAAE,QAAA,OAAO,OAAO;AACnC,IAAA,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;AACvE;;;;"}

package/dist/index.css

@@ -1954,12 +1954,12 @@
     padding-top:0;
   }
 
-.tds-sidenav-section-header [slot="label-actions"]{
+.tds-sidenav-section-header .tds-sidenav-section-label-actions,.tds-sidenav-section-header [slot="label-actions"]{
     display:flex;
     gap:var(--t-spacing-half);
     align-items:center;
   }
-
+.tds-sidenav-section-actions,
 .tds-sidenav-section [slot="section-actions"]{
   display:flex;
   gap:12px;
@@ -1967,6 +1967,10 @@
   min-height:42px;
   padding:var(--t-spacing-1) 0;
 }
+.tds-sidenav-section-label-actions > [slot="label-actions"],
+.tds-sidenav-section-actions > [slot="section-actions"]{
+  display:contents;
+}
 
 .tds-sidenav-section-list,
 .tds-sidenav-item{