@pantheon-systems/pds-toolkit-react 2.0.0-alpha.76 → 2.0.0-alpha.78

package/dist/components/Dropdown/Dropdown.d.ts

@@ -1,5 +1,6 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { UseDropdownOptions } from '../../utilities/hooks/useDropdown';
+import { MenuButtonProps } from '../buttons/MenuButton/MenuButton';
 import './dropdown.css';
 export interface DropdownProps extends UseDropdownOptions {
     /**
@@ -19,12 +20,19 @@ export interface DropdownProps extends UseDropdownOptions {
 }
 /**
  * Root Dropdown component. Provides dropdown context to sub-components.
+ *
+ * Wraps the actual implementation in a Floating UI tree boundary: when
+ * nested inside another floating panel, it joins that panel's tree so
+ * outside-clicks and Escape inside this dropdown resolve to this (innermost)
+ * dropdown without wrongly dismissing the parent. When not nested, it
+ * provides its own single-node tree — no consumer opt-in needed.
  */
 export declare const Dropdown: {
-    ({ children, className, inline, ...options }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+    (props: DropdownProps): import("react/jsx-runtime").JSX.Element;
     Trigger: ({ children, className, showTriggerIcon, ...props }: DropdownTriggerProps) => import("react/jsx-runtime").JSX.Element;
     Panel: ({ children, className, ...props }: DropdownPanelProps) => import("react/jsx-runtime").JSX.Element;
     Item: ({ children, className, closeOnSelect, description, disabled, icon, index, isActive, isCritical, onClick, onKeyDown, trailingIcon, ...props }: DropdownItemProps) => import("react/jsx-runtime").JSX.Element;
+    ActionItem: ({ children, className, closeOnSelect, description, disabled, icon, index, isActive, linkContent, menuAriaLabel, menuItems, onClick, onKeyDown, ...props }: DropdownActionItemProps) => import("react/jsx-runtime").JSX.Element;
     CheckboxItem: ({ checked, children, className, description, disabled, indeterminate, index, onCheckedChange, onClick, onKeyDown, ...props }: DropdownCheckboxItemProps) => import("react/jsx-runtime").JSX.Element;
     Heading: ({ children, className, ...props }: DropdownHeadingProps) => import("react/jsx-runtime").JSX.Element;
     Separator: ({ className, ...props }: DropdownSeparatorProps) => import("react/jsx-runtime").JSX.Element;
@@ -99,6 +107,63 @@ export interface DropdownItemProps extends ComponentPropsWithoutRef<'li'> {
      */
     trailingIcon?: ReactNode;
 }
+export interface DropdownActionItemProps extends Omit<ComponentPropsWithoutRef<'li'>, 'onClick'> {
+    /**
+     * Item content — label text. Rendered inside `linkContent` when provided.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Close the dropdown when the row is selected (default: true).
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Secondary text displayed below the label.
+     */
+    description?: ReactNode;
+    /**
+     * Disabled state. Disables row selection only — the trailing kebab menu
+     * stays available.
+     */
+    disabled?: boolean;
+    /**
+     * Leading content — PDSIcon name, or custom ReactNode (Avatar, etc.).
+     */
+    icon?: ReactNode;
+    /**
+     * Index of this item in the list (required for keyboard navigation).
+     */
+    index: number;
+    /**
+     * Selected or current state.
+     */
+    isActive?: boolean;
+    /**
+     * Link element to navigate to on selection (e.g. `<a href='...'>` or a
+     * router `Link`). Takes precedence over `onClick` when both are given —
+     * pass whichever matches how selecting this row should behave.
+     */
+    linkContent?: ReactNode;
+    /**
+     * Contextual label for the row's kebab menu, e.g. `Actions for ${item.title}`.
+     * Supplied per-row by the consumer — required, since a plain "Actions"
+     * label isn't distinguishable between rows for screen reader users.
+     */
+    menuAriaLabel: string;
+    /**
+     * Menu items for the kebab's menu — passed straight through to the
+     * underlying `MenuButton`.
+     */
+    menuItems: MenuButtonProps['menuItems'];
+    /**
+     * Callback fired when the row is selected. Ignored when `linkContent` is
+     * given — the link's own navigation is the selection behavior.
+     */
+    onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;
+}
 export interface DropdownCheckboxItemProps extends Omit<ComponentPropsWithoutRef<'li'>, 'onChange'> {
     /**
      * Checked state of the item.

package/dist/components/RowActionsMenu/RowActionsMenu.d.ts

@@ -0,0 +1,46 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { MenuButton } from '../buttons/MenuButton/MenuButton';
+import './row-actions-menu.css';
+/**
+ * Prop types for RowActionsMenu
+ */
+export interface RowActionsMenuProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Arbitrary leading row content.
+     */
+    children: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Contextual label for the row's kebab menu, e.g. `Actions for ${item.title}`.
+     * Supplied per-row by the consumer — required, since a plain "Actions"
+     * label isn't distinguishable between rows for screen reader users.
+     */
+    menuAriaLabel: string;
+    /**
+     * Menu items for the kebab's menu — passed straight through to the
+     * underlying `MenuButton`. Use `isCritical`/`criticalLabel` on an item
+     * for a destructive action (e.g. "Remove").
+     */
+    menuItems: ComponentPropsWithoutRef<typeof MenuButton>['menuItems'];
+    /**
+     * Where this row is being used, for the hover/active fill style. `dropdown`
+     * (default) is an inset rounded pill, matching a floating menu's own items
+     * (e.g. nested inside `Dropdown`). `panel` fills edge-to-edge with square
+     * corners, matching a flush list inside a panel/widget (e.g. `WidgetPanel`).
+     */
+    variant?: 'dropdown' | 'panel';
+}
+/**
+ * RowActionsMenu UI component.
+ *
+ * A generic row primitive: arbitrary leading content plus a trailing kebab
+ * button that's visually revealed on hover and keyboard focus, opening a
+ * `MenuButton` actions menu. Not specific to any one consumer — meant to be
+ * reused anywhere a list needs a per-row actions menu (e.g. bookmarks,
+ * recent sites). Safe to nest inside another floating panel (e.g. a
+ * `Dropdown`) — see `MenuButton`/`Dropdown`'s Floating UI tree handling.
+ */
+export declare const RowActionsMenu: ({ children, className, menuAriaLabel, menuItems, variant, ...props }: RowActionsMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/MenuButton/MenuButton.d.ts

@@ -57,6 +57,14 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
      * Optional callback function for when the button is clicked or activated by the keyboard.
      */
     onClick?: () => void;
+    /**
+     * Optional callback fired whenever the menu's open state changes. Use
+     * this to manage focus deliberately when this MenuButton is nested
+     * inside another floating panel — e.g. return focus to the row that
+     * owns this menu when it closes, rather than leaving it to Floating UI's
+     * default (which can otherwise leave focus on an ancestor panel).
+     */
+    onOpenChange?: (isOpen: boolean) => void;
     /**
      * Which size of button to render.
      */
@@ -91,7 +99,13 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
     variant?: Extract<ButtonVariant, 'primary' | 'secondary' | 'subtle' | 'reverse-secondary'> | 'navbar';
 }
 /**
- * MenuButton UI component
+ * MenuButton UI component.
+ *
+ * Wraps the actual implementation in a Floating UI tree boundary: when
+ * nested inside another floating panel (e.g. a `Dropdown`'s panel), it joins
+ * that panel's tree so outside-clicks and Escape inside this menu resolve to
+ * this (innermost) menu without wrongly dismissing the parent. When not
+ * nested, it provides its own single-node tree — no consumer opt-in needed.
  */
-export declare const MenuButton: ({ className, disabled, iconName, iconOnly, id, isMobileAccordion, isSplitButton, label, menuItems, onClick, size, statusDot, tally, testId, undefinedLabel, variant, ...props }: MenuButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuButton: (props: MenuButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/cards/Card/Card.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { CardBackground, CardPaddingScale } from '../../../libs/types/layout-types';
+import { CardBackground, CardPaddingScale, ImageDisplayVariant } from '../../../libs/types/layout-types';
 import './card.css';
-export type CardImageVariant = 'bleed' | 'inset';
+export type CardImageVariant = ImageDisplayVariant;
 /**
  * Prop types for Card
  */

package/dist/components/empty-states/VerticalEmptyState/VerticalEmptyState.d.ts

@@ -24,10 +24,11 @@ export interface VerticalEmptyStateProps extends ComponentPropsWithoutRef<'div'>
     headingLevel?: HeadingLevel;
     /**
      * PDS illustration image to display above the heading.
-     * Should be a link to an SVG file, either from Brandfolder or local.
+     * Can be a string (a link to an SVG file, either from Brandfolder or
+     * local) or a React node (e.g. a Spinner, for in-progress empty states).
      * See full documentation for details.
      */
-    image?: string;
+    image?: string | ReactNode;
     /**
      * Height of the image (CSS value like '200px', '50%', etc.)
      */

package/dist/components/icons/Icon/generated-icon-data.d.ts

@@ -3,7 +3,7 @@
  *
  * Generated by: npm run generate:icon-data
  * Source: icon-registry.ts + Font Awesome packages + custom-icons.tsx
- * Generated: 2026-08-26T17:15:13.189Z
+ * Generated: 2026-08-31T17:35:35.642Z
  */
 import { customIcons } from './custom-icons';
 export { customIcons };

package/dist/components/links/CTALink/CTALink.d.ts

@@ -10,9 +10,9 @@ export interface CTALinkProps extends ComponentPropsWithoutRef<'div'> {
      */
     linkContent?: ReactNode;
     /**
-     * Size of link
+     * Size of link. `s` (default) is 14px text; `m` is 16px text.
      */
-    size?: 'xs' | 's' | 'm';
+    size?: 's' | 'm';
 }
 /**
  * CTA Link UI component

package/dist/components/links/LinkNewWindow/LinkNewWindow.d.ts

@@ -15,7 +15,7 @@ export interface LinkNewWindowProps extends ComponentPropsWithoutRef<'a'> {
     /**
      * Optional font size for the LinkNewWindow. If not provided, the font size will be inherited from the parent element.
      */
-    fontSize?: 's' | 'm' | 'l';
+    fontSize?: 's' | 'm';
     /**
      * Is the link in the process of loading?
      */

package/dist/components/panels/FeaturePanel/FeaturePanel.d.ts

@@ -0,0 +1,72 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ImageDisplayVariant } from '../../../libs/types/layout-types';
+import { Button } from '../../buttons/Button/Button';
+import { ButtonLink } from '../../buttons/ButtonLink/ButtonLink';
+import './feature-panel.css';
+/**
+ * Prop types for FeaturePanel
+ */
+export interface FeaturePanelProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Body content.
+     */
+    content: string;
+    /**
+     * Props for an optional call to action. Pass `ButtonLink` props (must
+     * include `linkContent`) to render a link, or `Button` props to render a
+     * button. Always renders at `variant="brand"` `size="sm"` regardless of
+     * what's passed in.
+     */
+    cta?: ComponentPropsWithoutRef<typeof Button> | ComponentPropsWithoutRef<typeof ButtonLink>;
+    /**
+     * Label for the close button. Provide a translation string if needed.
+     */
+    dismissLabel?: string;
+    /**
+     * Heading text. Rendered as an `h2`.
+     */
+    heading: string;
+    /**
+     * An optional image. Pass the full element, e.g.
+     * `<img alt="..." src="..." />`. Aspect ratio isn't enforced, but
+     * `1:1`–`3:2` works best in `vertical` layout, and `1:1` is a reasonable
+     * starting point for `horizontal` (see the MDX docs for why — that one
+     * shifts with panel width and copy length, so preview it for real).
+     */
+    image?: ReactNode;
+    /**
+     * Controls how the image fills its side of the panel. Only relevant when
+     * an image is provided.
+     * - `bleed` (default): image extends to the panel edges, corners rounded
+     *   only where it meets the panel's own edge.
+     * - `inset`: image has padding on all sides, all corners rounded.
+     */
+    imageVariant?: ImageDisplayVariant;
+    /**
+     * Shows a close button in the upper-right corner that calls `onDismiss`
+     * when clicked. The panel does not remove or hide itself — that's up to
+     * the consumer.
+     */
+    isDismissible?: boolean;
+    /**
+     * Which way the panel lays out its image and content.
+     * - `vertical` (default): image on top, content below.
+     * - `horizontal`: image on the left, content on the right. Only takes
+     *   effect at the `bp-m` breakpoint and up — below that it collapses to
+     *   the same stacked layout as `vertical`.
+     */
+    layout?: 'horizontal' | 'vertical';
+    /**
+     * Called when the close button is clicked. Required in practice when
+     * `isDismissible` is true.
+     */
+    onDismiss?: () => void;
+}
+/**
+ * FeaturePanel UI component
+ */
+export declare const FeaturePanel: ({ className, content, cta, dismissLabel, heading, image, imageVariant, isDismissible, layout, onDismiss, ...props }: FeaturePanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/panels/WidgetPanel/WidgetPanel.d.ts

@@ -0,0 +1,39 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { PDSIcon } from '../../icons/Icon/Icon';
+import './widget-panel.css';
+/**
+ * Prop types for WidgetPanel
+ */
+export interface WidgetPanelProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Main content. Unslotted -- fully composable (list rows, a search
+     * input, inline CTAs, dividers, etc). Pass a child with `slot="footer"`
+     * to render it in the footer instead.
+     */
+    children: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Caps the height of the content region only -- the header and footer
+     * stay fixed-size. Set in `vh`, `rem`, or `px`. Without it, the content
+     * region fills and scrolls within whatever height a parent container
+     * constrains the panel to.
+     */
+    contentMaxHeight?: string;
+    /**
+     * Heading text. Always rendered as an `h2`, but sized smaller than an
+     * `h2` default -- semantic level and visual size are decoupled here.
+     */
+    heading: string;
+    /**
+     * An optional icon shown before the heading. Encouraged, but not
+     * required.
+     */
+    icon?: PDSIcon;
+}
+/**
+ * WidgetPanel UI component
+ */
+export declare const WidgetPanel: ({ children, className, contentMaxHeight, heading, icon, ...props }: WidgetPanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/css/component-css/pds-cta-link.css

@@ -1 +1 @@
-@layer pds-v1, pds-v2;@layer pds-v2{.pds-cta-link{--cta-link-size:var(--pds-typography-size-m);--cta-link-color:var(--pds-color-interactive-link-default);--cta-link-gap:var(--pds-spacing-3xs);align-items:center;display:inline-flex;gap:var(--cta-link-gap);padding:.25rem 0}.pds-cta-link a,.pds-cta-link button{color:var(--cta-link-color);font-family:var(--pds-typography-ff-default);font-size:var(--cta-link-size);font-weight:var(--pds-typography-fw-bold);letter-spacing:var(--pds-typography-ls-s);line-height:var(--pds-typography-lh-s);text-decoration:none;transition:var(--pds-animation-transition-link)}.pds-cta-link a:hover,.pds-cta-link button:hover{color:var(--cta-link-color)}.pds-cta-link a:focus-visible,.pds-cta-link button:focus-visible{border-radius:var(--pds-border-radius-default);outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:.25rem;text-decoration:none}.pds-cta-link button{background:none;border:none;cursor:pointer;padding:0}.pds-cta-link .pds-cta-link__icon{color:var(--cta-link-color);transition:var(--pds-animation-transition-link)}.pds-cta-link:hover{--cta-link-color:var(--pds-color-interactive-link-hover)}.pds-cta-link:active{--cta-link-color:var(--pds-color-interactive-link-active);outline:none;text-decoration:none}.pds-cta-link--xs{--cta-link-gap:var(--pds-spacing-3xs);--cta-link-size:var(--pds-typography-size-s)}.pds-cta-link--m{--cta-link-gap:var(--pds-spacing-2xs);--cta-link-size:var(--pds-typography-size-l)}.pds-link-group{display:flex;flex-direction:column;row-gap:var(--pds-spacing-m)}}
+@layer pds-v1, pds-v2;@layer pds-v2{.pds-cta-link{--cta-link-size:var(--pds-typography-size-s);--cta-link-color:var(--pds-color-interactive-link-default);--cta-link-gap:var(--pds-spacing-3xs);align-items:center;display:inline-flex;gap:var(--cta-link-gap);padding:.25rem 0}.pds-cta-link a,.pds-cta-link button{color:var(--cta-link-color);font-family:var(--pds-typography-ff-default);font-size:var(--cta-link-size);font-weight:var(--pds-typography-fw-medium);letter-spacing:var(--pds-typography-ls-s);line-height:var(--pds-typography-lh-s);text-decoration:none;transition:var(--pds-animation-transition-link)}.pds-cta-link a:hover,.pds-cta-link button:hover{color:var(--cta-link-color)}.pds-cta-link a:focus-visible,.pds-cta-link button:focus-visible{border-radius:var(--pds-border-radius-default);outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:.25rem;text-decoration:none}.pds-cta-link button{background:none;border:none;cursor:pointer;padding:0}.pds-cta-link .pds-cta-link__icon{color:var(--cta-link-color);transition:var(--pds-animation-transition-link)}.pds-cta-link:hover{--cta-link-color:var(--pds-color-interactive-link-hover)}.pds-cta-link:active{--cta-link-color:var(--pds-color-interactive-link-active);outline:none;text-decoration:none}.pds-cta-link--m{--cta-link-gap:var(--pds-spacing-2xs);--cta-link-size:var(--pds-typography-size-m)}.pds-link-group{display:flex;flex-direction:column;row-gap:var(--pds-spacing-m)}}

package/dist/css/component-css/pds-dropdown.css

@@ -1,2 +1,3 @@
-@layer pds-v1, pds-v2;@layer pds-v2{.pds-dropdown{position:relative}.pds-dropdown--inline{display:inline-block}.pds-dropdown__trigger{align-items:center;background:transparent;border:none;border-radius:var(--pds-border-radius-container);color:inherit;cursor:pointer;display:inline-flex;font-family:inherit;gap:var(--pds-spacing-3xs);padding:var(--pds-spacing-3xs) var(--pds-spacing-2xs);transition:background-color .15s ease}.pds-dropdown__trigger:hover{background-color:var(--pds-color-interactive-background-hover)}.pds-dropdown__trigger:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:1px}.pds-dropdown__trigger-icon{color:var(--pds-color-foreground-default-secondary);transition:var(--pds-animation-transition-rotation)}.pds-dropdown__trigger[aria-expanded=true] .pds-dropdown__trigger-icon{transform:rotate(180deg)}.pds-dropdown__panel{background-color:var(--pds-color-dropdown-background);box-shadow:var(--pds-elevation-overlay);flex-direction:column;gap:var(--pds-spacing-4xs);margin:0;min-width:10rem;overflow-y:auto;padding-inline:var(--pds-spacing-2xs);z-index:var(--pds-z-index-dropdown)}.pds-dropdown__item,.pds-dropdown__panel{border-radius:var(--pds-border-radius-container);display:flex;list-style:none;outline:none;padding-block:var(--pds-spacing-2xs)}.pds-dropdown__item{align-items:center;color:var(--pds-color-dropdown-foreground);cursor:pointer;font-size:var(--pds-typography-size-s);gap:var(--pds-spacing-s);justify-content:space-between;min-height:var(--pds-spacing-2xl);padding-inline:var(--pds-spacing-xs)}.pds-dropdown__item:focus-visible:not(:hover){outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:-1px}.pds-dropdown__item--focused,.pds-dropdown__item:hover{background-color:var(--pds-color-dropdown-item-background-hover)}.pds-dropdown__item:active{background-color:var(--pds-color-dropdown-item-background-active)}.pds-dropdown__selected-icon{align-self:center;color:var(--pds-color-foreground-default);display:flex;flex-shrink:0;height:.875em;width:.875em}.pds-dropdown__item--critical{color:var(--pds-color-status-critical-foreground)}.pds-dropdown__item--critical.pds-dropdown__item--focused,.pds-dropdown__item--critical:hover{background-color:var(--pds-color-status-critical-background)}.pds-dropdown__item--disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.pds-dropdown__item-content{align-items:center;display:flex;gap:var(--pds-spacing-2xs)}.pds-dropdown__item-icon{display:flex;flex-shrink:0}.pds-dropdown__item-label{display:flex;flex-direction:column}.pds-dropdown__item-description{color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-xs);line-height:var(--pds-typography-lh-s);margin-block-start:var(--pds-spacing-4xs)}.pds-dropdown__item-trailing{display:flex;flex-shrink:0}.pds-dropdown__checkbox-box{align-items:center;background-color:transparent;border:var(--pds-border-width-default) solid var(--pds-color-foreground-default);border-radius:var(--pds-border-radius-default);color:var(--pds-color-input-selected-foreground);display:flex;flex-shrink:0;height:1rem;justify-content:center;padding:.0625rem;transition:var(--pds-animation-transition-default);width:1rem}.pds-dropdown__checkbox-box--checked,.pds-dropdown__checkbox-box--indeterminate{background-color:var(--pds-color-input-selected-background);border-color:var(--pds-color-input-selected-background)}.pds-dropdown__checkbox-icon{height:100%;width:100%}.pds-dropdown__heading{color:var(--pds-color-dropdown-heading);font-family:var(--pds-typography-ff-compact);font-size:var(--pds-typography-size-xs);font-weight:var(--pds-typography-fw-regular);line-height:var(--pds-typography-lh-s);list-style:none;padding:var(--pds-spacing-xs) var(--pds-spacing-xs) var(--pds-spacing-3xs)}.pds-dropdown__separator{border-block-end:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);list-style:none;margin-block-end:2px;margin-inline:calc(var(--pds-spacing-2xs)*-1);padding-block:2px}.pds-dropdown__filter{list-style:none;margin-block-start:calc(var(--pds-spacing-2xs)*-1);margin-inline:calc(var(--pds-spacing-2xs)*-1);padding:0}.pds-dropdown__filter-wrapper{align-items:center;display:flex;position:relative}.pds-dropdown__filter-icon{block-size:.875rem;color:var(--pds-color-foreground-default-secondary);inline-size:.875rem;left:var(--pds-spacing-s);pointer-events:none;position:absolute}.pds-dropdown__filter-wrapper:has(.pds-dropdown__filter-icon)
+@layer pds-v1, pds-v2;@layer pds-v2{.pds-dropdown{position:relative}.pds-dropdown--inline{display:inline-block}.pds-dropdown__trigger{align-items:center;background:transparent;border:none;border-radius:var(--pds-border-radius-container);color:inherit;cursor:pointer;display:inline-flex;font-family:inherit;gap:var(--pds-spacing-3xs);padding:var(--pds-spacing-3xs) var(--pds-spacing-2xs);transition:background-color .15s ease}.pds-dropdown__trigger:hover{background-color:var(--pds-color-interactive-background-hover)}.pds-dropdown__trigger:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:1px}.pds-dropdown__trigger-icon{color:var(--pds-color-foreground-default-secondary);transition:var(--pds-animation-transition-rotation)}.pds-dropdown__trigger[aria-expanded=true] .pds-dropdown__trigger-icon{transform:rotate(180deg)}.pds-dropdown__panel{background-color:var(--pds-color-dropdown-background);box-shadow:var(--pds-elevation-overlay);flex-direction:column;gap:var(--pds-spacing-4xs);margin:0;min-width:10rem;overflow-y:auto;padding-inline:var(--pds-spacing-2xs);z-index:var(--pds-z-index-dropdown)}.pds-dropdown__item,.pds-dropdown__panel{border-radius:var(--pds-border-radius-container);display:flex;list-style:none;outline:none;padding-block:var(--pds-spacing-2xs)}.pds-dropdown__item{align-items:center;color:var(--pds-color-dropdown-foreground);cursor:pointer;font-size:var(--pds-typography-size-s);gap:var(--pds-spacing-s);justify-content:space-between;min-height:var(--pds-spacing-2xl);padding-inline:var(--pds-spacing-xs)}.pds-dropdown__item:focus-visible:not(:hover){outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:-1px}.pds-dropdown__item--focused,.pds-dropdown__item:hover{background-color:var(--pds-color-dropdown-item-background-hover)}.pds-dropdown__item:active{background-color:var(--pds-color-dropdown-item-background-active)}.pds-dropdown__selected-icon{align-self:center;color:var(--pds-color-foreground-default);display:flex;flex-shrink:0;height:.875em;width:.875em}.pds-dropdown__item--critical{color:var(--pds-color-status-critical-foreground)}.pds-dropdown__item--critical.pds-dropdown__item--focused,.pds-dropdown__item--critical:hover{background-color:var(--pds-color-status-critical-background)}.pds-dropdown__item--disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.pds-dropdown__item-content{align-items:center;display:flex;gap:var(--pds-spacing-2xs)}.pds-dropdown__item-icon{display:flex;flex-shrink:0}.pds-dropdown__item-label{display:flex;flex-direction:column}.pds-dropdown__item-description{color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-xs);line-height:var(--pds-typography-lh-s);margin-block-start:var(--pds-spacing-4xs)}.pds-dropdown__item-trailing{display:flex;flex-shrink:0}.pds-dropdown__action-item .pds-dropdown__item-label a{color:inherit;text-decoration:none}.pds-dropdown__action-item{padding-block:var(--pds-spacing-4xs)}.pds-dropdown__action-item-trigger{display:flex;flex-shrink:0;opacity:0;pointer-events:none;transition:opacity .15s ease}.pds-dropdown__action-item:focus-within .pds-dropdown__action-item-trigger,.pds-dropdown__action-item:has(.pds-menu-button--expanded)
+	.pds-dropdown__action-item-trigger,.pds-dropdown__action-item:hover .pds-dropdown__action-item-trigger{opacity:1;pointer-events:auto}.pds-dropdown__checkbox-box{align-items:center;background-color:transparent;border:var(--pds-border-width-default) solid var(--pds-color-foreground-default);border-radius:var(--pds-border-radius-default);color:var(--pds-color-input-selected-foreground);display:flex;flex-shrink:0;height:1rem;justify-content:center;padding:.0625rem;transition:var(--pds-animation-transition-default);width:1rem}.pds-dropdown__checkbox-box--checked,.pds-dropdown__checkbox-box--indeterminate{background-color:var(--pds-color-input-selected-background);border-color:var(--pds-color-input-selected-background)}.pds-dropdown__checkbox-icon{height:100%;width:100%}.pds-dropdown__heading{color:var(--pds-color-dropdown-heading);font-family:var(--pds-typography-ff-compact);font-size:var(--pds-typography-size-xs);font-weight:var(--pds-typography-fw-regular);line-height:var(--pds-typography-lh-s);list-style:none;padding:var(--pds-spacing-xs) var(--pds-spacing-xs) var(--pds-spacing-3xs)}.pds-dropdown__separator{border-block-end:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);list-style:none;margin-block-end:2px;margin-inline:calc(var(--pds-spacing-2xs)*-1);padding-block:2px}.pds-dropdown__filter{list-style:none;margin-block-start:calc(var(--pds-spacing-2xs)*-1);margin-inline:calc(var(--pds-spacing-2xs)*-1);padding:0}.pds-dropdown__filter-wrapper{align-items:center;display:flex;position:relative}.pds-dropdown__filter-icon{block-size:.875rem;color:var(--pds-color-foreground-default-secondary);inline-size:.875rem;left:var(--pds-spacing-s);pointer-events:none;position:absolute}.pds-dropdown__filter-wrapper:has(.pds-dropdown__filter-icon)
 	.pds-dropdown__filter-input{padding-inline-start:calc(var(--pds-spacing-s) + var(--pds-spacing-xl))}.pds-dropdown__filter-input{background-color:transparent;border:none;border-block-end:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);border-radius:0;box-sizing:border-box;color:var(--pds-color-foreground-default);font-family:inherit;font-size:var(--pds-typography-size-s);padding:var(--pds-spacing-s);width:100%}.pds-dropdown__filter-input::placeholder{color:var(--pds-color-input-placeholder);font-size:var(--pds-typography-size-s)}.pds-dropdown__filter-input:focus-visible{border-radius:var(--pds-border-radius-container) var(--pds-border-radius-container) 0 0;outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:-3px}.pds-dropdown__no-results{color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-s);padding-block-end:var(--pds-spacing-s);padding-block-start:var(--pds-spacing-xs);padding-inline:var(--pds-spacing-s)}.pds-dropdown__footer{background-color:var(--pds-color-dropdown-background);border-block-start:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);bottom:calc(var(--pds-spacing-2xs)*-1);list-style:none;margin-block-end:calc(var(--pds-spacing-2xs)*-1);margin-block-start:var(--pds-spacing-3xs);margin-inline:calc(var(--pds-spacing-2xs)*-1);padding:var(--pds-spacing-s);position:sticky}.pds-dropdown__footer a,.pds-dropdown__footer button{align-items:center;background:none;border:none;color:var(--pds-color-interactive-link-default);cursor:pointer;display:flex;font:inherit;gap:var(--pds-spacing-3xs);padding:0;text-decoration:none;width:100%}.pds-dropdown__footer a:hover,.pds-dropdown__footer button:hover{color:var(--pds-color-interactive-link-hover);text-decoration:underline}.pds-dropdown__footer a:focus-visible,.pds-dropdown__footer button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:2px}}

package/dist/css/component-css/pds-feature-panel.css

@@ -0,0 +1,15 @@
+@layer pds-v1, pds-v2;@layer pds-v2{.pds-feature-panel{--bg-color:var(--pds-color-surface-default);--body-padding:var(--pds-spacing-m);background:linear-gradient(var(--bg-color),var(--bg-color)) padding-box,var(--pds-gradient-avatar-12) border-box;border:var(--pds-border-width-default) solid transparent;border-radius:var(--pds-border-radius-panel);display:flex;flex-direction:column;position:relative}.pds-feature-panel__dismiss{inset-block-start:var(--pds-spacing-s);inset-inline-end:var(--pds-spacing-s);position:absolute;z-index:1}.pds-feature-panel__image{border-radius:var(--pds-border-radius-panel) var(--pds-border-radius-panel) 0 0;display:block;overflow:hidden}.pds-feature-panel__image img{display:block;height:100%;object-fit:cover;object-position:top;width:100%}.pds-feature-panel__body{display:flex;flex-direction:column;padding:var(--body-padding);width:100%}.pds-feature-panel__heading{font-size:var(--pds-typography-size-l)}.pds-feature-panel__content{font-size:var(--pds-typography-size-s);margin:0;margin-block-start:var(--pds-spacing-2xs)}.pds-feature-panel__cta{align-self:flex-start;margin-block-start:var(--pds-spacing-l)}.pds-feature-panel--hasDismiss .pds-feature-panel__heading{padding-inline-end:var(--pds-spacing-xl)}.pds-feature-panel--image-inset .pds-feature-panel__image{border-radius:var(--pds-border-radius-panel);margin:var(--body-padding) var(--body-padding) 0;width:auto}.pds-feature-panel--image-inset .pds-feature-panel__dismiss{inset-block-start:var(--pds-spacing-xl);inset-inline-end:var(--pds-spacing-xl)}.pds-feature-panel--has-image{--dismiss-scrim:rgba(0,0,0,.35);--dismiss-scrim-hover:rgba(0,0,0,.5);--dismiss-scrim-active:rgba(0,0,0,.6)}.pds-feature-panel--has-image:not(.pds-feature-panel--horizontal)
+	.pds-feature-panel__dismiss
+	.pds-close-button{background-color:var(--dismiss-scrim);color:#fff}.pds-feature-panel--has-image:not(.pds-feature-panel--horizontal)
+	.pds-feature-panel__dismiss
+	.pds-close-button:hover{background-color:var(--dismiss-scrim-hover)}.pds-feature-panel--has-image:not(.pds-feature-panel--horizontal)
+	.pds-feature-panel__dismiss
+	.pds-close-button:active:enabled{background-color:var(--dismiss-scrim-active);box-shadow:none}@media (max-width:767px){.pds-feature-panel--has-image.pds-feature-panel--horizontal
+		.pds-feature-panel__dismiss
+		.pds-close-button{background-color:var(--dismiss-scrim);color:#fff}.pds-feature-panel--has-image.pds-feature-panel--horizontal
+		.pds-feature-panel__dismiss
+		.pds-close-button:hover{background-color:var(--dismiss-scrim-hover)}.pds-feature-panel--has-image.pds-feature-panel--horizontal
+		.pds-feature-panel__dismiss
+		.pds-close-button:active:enabled{background-color:var(--dismiss-scrim-active);box-shadow:none}}@media (min-width:768px){.pds-feature-panel--horizontal{flex-direction:row;gap:var(--pds-spacing-3xs)}.pds-feature-panel--horizontal .pds-feature-panel__image{border-radius:var(--pds-border-radius-panel) 0 0 var(--pds-border-radius-panel);flex:0 1 40%;max-width:50%;min-width:30%;position:relative}.pds-feature-panel--horizontal .pds-feature-panel__image img{height:100%;inset:0;position:absolute;width:100%}.pds-feature-panel--horizontal.pds-feature-panel--image-inset
+		.pds-feature-panel__image{border-radius:var(--pds-border-radius-panel);margin:var(--body-padding) 0 var(--body-padding) var(--body-padding)}.pds-feature-panel--horizontal .pds-feature-panel__body{flex:1}.pds-feature-panel--horizontal.pds-feature-panel--image-inset
+		.pds-feature-panel__dismiss{inset-block-start:var(--pds-spacing-s);inset-inline-end:var(--pds-spacing-s)}}}