@pantheon-systems/pds-toolkit-react 2.0.0-alpha.31 → 2.0.0-alpha.33

package/dist/index.source.d.ts

@@ -59,11 +59,11 @@ export * from './components/navigation/ButtonNav/ButtonNav';
 export * from './components/navigation/DropdownMenu/DropdownMenu';
 export * from './components/navigation/Navbar/Navbar';
 export * from './components/navigation/SideNav/SideNav';
-export * from './components/navigation/SideNavCompact/SideNavCompact';
 export * from './components/navigation/SideNavGlobal/SideNavGlobal';
 export * from './components/navigation/SideNavGlobal/SideNavGlobalItem';
 export * from './components/navigation/SiteMenu/SiteMenu';
 export * from './components/navigation/TabMenu/TabMenu';
+export * from './components/navigation/TreeNav/TreeNav';
 export * from './components/navigation/UserMenu/UserMenu';
 export * from './components/navigation/WorkspaceSelector/WorkspaceSelector';
 export * from './components/notifications/Banner/Banner';

package/dist/layouts/AppLayout/AppLayout.d.ts

@@ -55,7 +55,7 @@ export interface AppLayoutProps extends ComponentPropsWithoutRef<'div'> {
     };
     /**
      * Background color for the main content area. Use a PDS CSS custom property
-     * (e.g. 'var(--pds-color-bg-default-secondary)') so dark mode works automatically.
+     * (e.g. 'var(--pds-color-surface-default-secondary)') so dark mode works automatically.
      */
     mainBackground?: string;
     /**
@@ -81,7 +81,7 @@ export interface AppLayoutProps extends ComponentPropsWithoutRef<'div'> {
     scrollableContent?: boolean;
     /**
      * Background color for the sidebar. Use a PDS CSS custom property
-     * (e.g. 'var(--pds-color-bg-default)') so dark mode works automatically.
+     * (e.g. 'var(--pds-color-surface-default)') so dark mode works automatically.
      */
     sidebarBackground?: string;
     /**

package/dist/libs/types/custom-types.d.ts

@@ -3,7 +3,7 @@ import { PDSIcon } from '../../components/icons/Icon/Icon';
 export type ButtonDisplayType = 'label-only' | 'icon-start' | 'icon-end';
 export type ButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl';
 export type ButtonType = 'button' | 'submit' | 'reset';
-export type ButtonVariant = 'primary' | 'secondary' | 'subtle' | 'brand' | 'accent' | 'reverse' | 'reverse-secondary' | 'critical' | 'critical-secondary' | 'navbar' | 'inline';
+export type ButtonVariant = 'primary' | 'secondary' | 'subtle' | 'brand' | 'highlight' | 'reverse' | 'reverse-secondary' | 'critical' | 'critical-secondary' | 'navbar' | 'inline';
 export type ContainerWidth = 'narrow' | 'standard' | 'wide' | 'x-wide' | 'full';
 export type DataContext = 'product' | 'marketing';
 export type Display = 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'flow-root' | 'none' | 'contents' | 'table' | 'table-row' | 'table-cell' | 'table-caption' | 'table-column' | 'table-column-group' | 'table-footer-group' | 'table-header-group' | 'table-row-group' | 'list-item' | 'inherit' | 'initial' | 'revert' | 'unset';

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@pantheon-systems/pds-toolkit-react",
 	"technology": "React",
-	"version": "2.0.0-alpha.31",
+	"version": "2.0.0-alpha.33",
 	"description": "PDS toolkit built using the React framework",
 	"publishConfig": {
 		"access": "public",
@@ -54,7 +54,7 @@
 		"prebuild": "npm run build:css && npm run build:css:components && npm run build:css:layouts && npm run build:css:packageExtraCss && npm run generate:ux-writing-search-index && npm run generate:ux-writing-guide",
 		"build": "NODE_OPTIONS=--max-old-space-size=4096 NODE_ENV=production storybook build",
 		"build-storybook": "NODE_ENV=production storybook build",
-		"postbuild": "node scripts/copy-mcp-assets.js && node scripts/build-starter-template.js && node scripts/generate-html-docs.js && node scripts/verify-mcp-build.js",
+		"postbuild": "node scripts/generate-html-docs.js && node scripts/build-starter-template.js && node scripts/copy-mcp-assets.js && node scripts/verify-mcp-build.js",
 		"verify:mcp": "node scripts/verify-mcp-build.js",
 		"start": "node index.js",
 		"develop": "npm run storybook",
@@ -163,7 +163,7 @@
 		"@dnd-kit/utilities": "^3.2.2",
 		"@floating-ui/react": "^0.24.3",
 		"@floating-ui/react-dom": "~1.3.0",
-		"@pantheon-systems/pds-design-tokens": "^2.0.0-alpha.43",
+		"@pantheon-systems/pds-design-tokens": "^2.0.0-alpha.45",
 		"@reactuses/core": "^5.0.15",
 		"date-fns": "^4.1.0",
 		"downshift": "^9.3.2",

package/dist/components/navigation/SideNavCompact/SideNavCompact.d.ts

@@ -1,53 +0,0 @@
-import { ComponentPropsWithoutRef, ReactElement } from 'react';
-import { NavigationItem } from '../../../libs/types/navigation-types';
-import './side-nav-compact.css';
-export type SideNavCompactItem = NavigationItem & {
-    /**
-     * A boolean indicating whether the item is a submenu.
-     */
-    path?: string;
-};
-/**
- * Prop types for SideNavCompact
- */
-export interface SideNavCompactProps extends ComponentPropsWithoutRef<'nav'> {
-    /**
-     * Aria label for the navigation.
-     */
-    ariaLabel: string;
-    /**
-     * Additional class names
-     */
-    className?: string;
-    /**
-     * Whether the menu should be rendered as a mobile menu when the viewport is at or below the mobileMenuMaxWidth.
-     */
-    hasMobileMenu?: boolean;
-    /**
-     * Heading text. If a link is passed, it will be rendered as a link.
-     */
-    headingText?: string | ReactElement;
-    /**
-     * Labels for translatable strings.
-     */
-    labels?: {
-        submenu: string;
-        toggle: string;
-    };
-    /**
-     * Menu items to render.
-     */
-    menuItems: SideNavCompactItem[];
-    /**
-     *  Mobile menu will be enabled when viewport is at or below this number in pixels.
-     */
-    mobileMenuMaxWidth?: number;
-    /**
-     * Text to display in the mobile menu trigger button when no active link is found.
-     */
-    mobileMenuSelectTextFallback?: string;
-}
-/**
- * SideNavCompact UI component
- */
-export declare const SideNavCompact: ({ ariaLabel, className, hasMobileMenu, headingText, labels, menuItems, mobileMenuMaxWidth, mobileMenuSelectTextFallback, ...props }: SideNavCompactProps) => import("react/jsx-runtime").JSX.Element;

package/dist/css/component-css/pds-side-nav-compact.css

@@ -1 +0,0 @@
-.pds-side-nav-compact{color:var(--pds-color-fg-default);font-family:var(--pds-typography-ff-default)}.pds-side-nav-compact a{color:var(--pds-color-fg-default);text-decoration:none}.pds-side-nav-compact a:focus-visible{border-radius:var(--pds-border-radius-default);outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:1px}.pds-side-nav-compact .pds-icon{pointer-events:none}h2.pds-side-nav-compact__heading{font-weight:var(--pds-typography-fw-semibold);margin-block-end:var(--pds-spacing-l)}h2.pds-side-nav-compact__heading a{color:var(--pds-color-fg-default);text-decoration:none}h2.pds-side-nav-compact__heading a:hover{color:var(--pds-color-nav-item-default-foreground-hover)}.pds-side-nav-compact__menu{display:flex;flex-direction:column;list-style-type:none;margin:0;padding:0;row-gap:var(--pds-spacing-s)}.pds-side-nav-compact__item{line-height:var(--pds-typography-lh-m);list-style-type:none;margin-block-start:var(--pds-spacing-2xs)}.pds-side-nav-compact__item a{color:var(--pds-color-fg-default);text-decoration:none}.pds-side-nav-compact__item a:hover{color:var(--pds-color-nav-item-default-foreground-hover)}.pds-side-nav-compact__menu--fourth-level,.pds-side-nav-compact__menu--second-level,.pds-side-nav-compact__menu--third-level{display:none}.pds-side-nav-compact__menu--fourth-level.pds-side-nav-compact__menu--expanded,.pds-side-nav-compact__menu--second-level.pds-side-nav-compact__menu--expanded,.pds-side-nav-compact__menu--third-level.pds-side-nav-compact__menu--expanded{display:flex;margin-block-start:var(--pds-spacing-xs)}.pds-side-nav-compact__menu--fourth-level,.pds-side-nav-compact__menu--second-level,.pds-side-nav-compact__menu--third-level{margin-inline-start:var(--pds-spacing-m)}.pds-side-nav-compact__item--active>.pds-side-nav-compact__item-wrapper>a,.pds-side-nav-compact__item--active>a{color:var(--pds-color-nav-item-default-foreground-active);font-weight:var(--pds-typography-fw-semibold)}.pds-side-nav-compact__toggle{background-color:transparent;border:none;border-radius:var(--pds-border-radius-default);color:var(--pds-color-nav-item-default-foreground-trigger);cursor:pointer;margin-inline-start:calc(var(--pds-spacing-l)*-1 - .175rem)}.pds-side-nav-compact__toggle:hover{color:var(--pds-color-nav-item-default-foreground-hover)}.pds-side-nav-compact__toggle:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);transition:var(--pds-animation-transition-focus)}.pds-side-nav-compact__toggle .pds-icon{height:1.2rem;margin-block-end:-.125rem;pointer-events:none;transform:rotate(-90deg);transition:var(--pds-animation-transition-button)}.pds-side-nav-compact__toggle--expanded .pds-icon{transform:rotate(0deg);transition:var(--pds-animation-transition-button)}