@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

package/src/primitives/index.ts

@@ -1,60 +1,137 @@
-export { AbsoluteBox } from './AbsoluteBox';
-export type { AbsoluteBoxProps, WorkbenchRect } from './AbsoluteBox';
-export { Badge } from './Badge';
-export type { BadgeProps } from './Badge';
-export { Button } from './Button';
-export type { ButtonProps } from './Button';
-export { Checkbox } from './Checkbox';
-export type { CheckboxProps } from './Checkbox';
-export { EmptyState } from './EmptyState';
-export type { EmptyStateProps } from './EmptyState';
-export { Field } from './Field';
-export type { FieldProps } from './Field';
-export { IconButton } from './IconButton';
-export type { IconButtonProps } from './IconButton';
-export { List, ListEmptyState, ListItem, ListItemActionButton } from './List';
+export { AbsoluteBox } from './absolute-box/AbsoluteBox';
+export type { AbsoluteBoxProps, WorkbenchRect } from './absolute-box/AbsoluteBox';
+export { Badge } from './badge/Badge';
+export type { BadgeProps } from './badge/Badge';
+export { Button } from './button/Button';
+export type { ButtonProps } from './button/Button';
+export { Checkbox } from './checkbox/Checkbox';
+export type { CheckboxProps } from './checkbox/Checkbox';
+export { Chip } from './chip';
+export type { ChipProps } from './chip';
+export { EmptyState } from './empty-state/EmptyState';
+export type { EmptyStateProps } from './empty-state/EmptyState';
+export { PanelLoading } from './panel-loading/PanelLoading';
+export type { PanelLoadingProps } from './panel-loading/PanelLoading';
+export { Field } from './field/Field';
+export type { FieldProps } from './field/Field';
+export { Codicon } from './codicon/Codicon';
+export type { CodiconProps } from './codicon/Codicon';
+export { IconButton } from './icon-button/IconButton';
+export type { IconButtonProps } from './icon-button/IconButton';
+export { List, ListEmptyState, ListItem, ListItemActionButton } from './list/List';
 export type {
   ListEmptyStateProps,
   ListItemActionButtonProps,
   ListItemProps,
   ListProps,
-} from './List';
-export { NumberInput } from './NumberInput';
-export type { NumberInputProps } from './NumberInput';
-export { Select } from './Select';
-export type { SelectProps } from './Select';
-export { ScrollArea } from './ScrollArea';
+} from './list/List';
+export { NumberInput } from './number-input/NumberInput';
+export type { NumberInputProps } from './number-input/NumberInput';
+export { Select } from './select';
+export type { SelectProps } from './select';
+export { SearchableMultiSelect } from './searchable-multi-select';
+export type {
+  SearchableMultiSelectOption,
+  SearchableMultiSelectProps,
+} from './searchable-multi-select';
+export {
+  SEARCHABLE_MULTI_SELECT_LISTBOX_ATTR,
+  isSearchableMultiSelectPortalTarget,
+} from './searchable-multi-select';
+export { ScrollArea } from './scroll-area/ScrollArea';
 export type {
   ScrollAreaGutter,
   ScrollAreaOrientation,
   ScrollAreaProps,
   ScrollAreaScrollbarVisibility,
-} from './ScrollArea';
-export { StatusBar, StatusBarLabel, StatusBarSection } from './StatusBar';
-export type {
-  StatusBarLabelProps,
-  StatusBarProps,
-  StatusBarSectionAlign,
-  StatusBarSectionProps,
-  StatusBarSeverity,
-} from './StatusBar';
-export { TextInput } from './TextInput';
-export type { ControlWidth, TextInputProps } from './TextInput';
-export { TextArea } from './TextArea';
-export type { TextAreaProps } from './TextArea';
-export { Toolbar } from './Toolbar';
-export type { ToolbarProps } from './Toolbar';
-export { ActivityBar, Collapsible, SideBar, TabbedPanels, WorkbenchShell } from './WorkbenchChrome';
-export type {
-  ActivityBarProps,
-  ActivityItem,
-  CollapsibleProps,
-  SideBarProps,
-  TabbedPanelItem,
-  TabbedPanelsProps,
-  WorkbenchShellProps,
-} from './WorkbenchChrome';
-export { ButtonGroup, EditorTabs, ResizablePanels, SegmentedControl } from './WorkbenchEditor';
+} from './scroll-area/ScrollArea';
+export { ClearableTextInput } from './clearable-text-input/ClearableTextInput';
+export type { ClearableTextInputProps } from './clearable-text-input/ClearableTextInput';
+export { ExternalLinkButton, ExternalLinkRow } from './external-link-button/ExternalLinkButton';
+export { TextInput } from './text-input/TextInput';
+export type { ControlWidth, TextInputProps } from './text-input/TextInput';
+export { TextArea } from './text-area/TextArea';
+export type { TextAreaProps } from './text-area/TextArea';
+export { Toolbar } from './toolbar/Toolbar';
+export type { ToolbarProps } from './toolbar/Toolbar';
+export { ViewEmptyState } from '../layout/ViewEmptyState';
+export type { ViewEmptyStateProps } from '../layout/ViewEmptyState';
+export { SidebarToolbar } from '../layout/sidebar';
+export type { SidebarToolbarProps } from '../layout/sidebar';
+export { TabbedPanels } from './tabbed-panels';
+export type { TabbedPanelItem, TabbedPanelsProps } from './tabbed-panels';
+export { FileIcon, UI_FILE_ICON_CLASS } from './file-icon/FileIcon';
+export type { FileIconProps } from './file-icon/FileIcon';
+export { CatalogBrowseCard } from './catalog-browse-card/CatalogBrowseCard';
+export type {
+  CatalogBrowseCardProps,
+  CatalogBrowseCardVariant,
+} from './catalog-browse-card/CatalogBrowseCard';
+export { RecordMediaHero } from './record-media-hero/RecordMediaHero';
+export type {
+  RecordMediaHeroLayout,
+  RecordMediaHeroProps,
+} from './record-media-hero/RecordMediaHero';
+export { CatalogBrowseFacetChips } from './catalog-browse-pane/CatalogBrowseFacetChips';
+export type {
+  CatalogBrowseFacetChipsProps,
+  CatalogBrowseFacetOption,
+} from './catalog-browse-pane/CatalogBrowseFacetChips';
+export { CatalogBrowsePane } from './catalog-browse-pane/CatalogBrowsePane';
+export type {
+  CatalogBrowseItem,
+  CatalogBrowseItemRenderState,
+  CatalogBrowsePaneProps,
+  CatalogBrowseViewMode,
+} from './catalog-browse-pane/CatalogBrowsePane';
+export {
+  filterCatalogBrowseItems,
+  matchCatalogBrowseItem,
+} from './catalog-browse-pane/filterCatalogBrowseItems';
+export { LibraryFacetFilterStrip } from './library-facet-filter-strip/LibraryFacetFilterStrip';
+export type {
+  LibraryFacetActiveChip,
+  LibraryFacetField,
+  LibraryFacetFieldKind,
+  LibraryFacetFieldOption,
+  LibraryFacetFieldPresentation,
+  LibraryFacetFilterStripProps,
+} from './library-facet-filter-strip/LibraryFacetFilterStrip';
+export { LibraryFacetFilterPanel } from './library-facet-filter-panel/LibraryFacetFilterPanel';
+export type {
+  LibraryFacetFilterPanelLabels,
+  LibraryFacetFilterPanelProps,
+  LibraryFacetSection,
+} from './library-facet-filter-panel/LibraryFacetFilterPanel';
+export { CatalogFilterOverlay } from './catalog-filter-overlay/CatalogFilterOverlay';
+export type { CatalogFilterOverlayProps } from './catalog-filter-overlay/CatalogFilterOverlay';
+export { LibraryDetailLayout } from './library-detail-layout/LibraryDetailLayout';
+export type {
+  LibraryDetailLayoutMode,
+  LibraryDetailLayoutProps,
+} from './library-detail-layout/LibraryDetailLayout';
+export { ScrollAreaInfiniteSentinel } from './scroll-area-infinite-load/ScrollAreaInfiniteSentinel';
+export type { ScrollAreaInfiniteSentinelProps } from './scroll-area-infinite-load/ScrollAreaInfiniteSentinel';
+export { useScrollAreaInfiniteLoad } from './scroll-area-infinite-load/useScrollAreaInfiniteLoad';
+export type {
+  UseScrollAreaInfiniteLoadOptions,
+  UseScrollAreaInfiniteLoadResult,
+} from './scroll-area-infinite-load/useScrollAreaInfiniteLoad';
+export { WorkbenchMediaPlaceholder } from './workbench-media-slot/WorkbenchMediaPlaceholder';
+export type { WorkbenchMediaPlaceholderProps } from './workbench-media-slot/WorkbenchMediaPlaceholder';
+export { WorkbenchMediaSlot } from './workbench-media-slot/WorkbenchMediaSlot';
+export type { WorkbenchMediaSlotProps } from './workbench-media-slot/WorkbenchMediaSlot';
+export { WorkbenchThumbnail } from './workbench-thumbnail/WorkbenchThumbnail';
+export type {
+  WorkbenchThumbnailProps,
+  WorkbenchThumbnailSize,
+} from './workbench-thumbnail/WorkbenchThumbnail';
+export {
+  ButtonGroup,
+  EditorTabs,
+  ResizablePanels,
+  SegmentedControl,
+} from './workbench-editor/WorkbenchEditor';
 export type {
   ButtonGroupProps,
   EditorTab,
@@ -63,30 +140,90 @@ export type {
   ResizablePanelsProps,
   SegmentedControlOption,
   SegmentedControlProps,
-} from './WorkbenchEditor';
+} from './workbench-editor/WorkbenchEditor';
 export {
   FilterBar,
   FilterBarActiveChips,
+  FilterBarRow,
   FilterChip,
   HelpText,
   Panel,
   PanelBody,
   PanelFooter,
   PanelHeader,
-} from '../layout/Panel';
+} from '../layout/panel';
+export { WorkbenchLabeledPane } from '../layout/panel';
+export {
+  WorkbenchAuthoringShell,
+  WorkbenchPlainTextSource,
+  WorkbenchSurfaceMeta,
+  WorkbenchSurfaceToolbar,
+} from '../layout/panel';
+export { WorkbenchSidebarStack } from '../layout/panel';
 export type {
   FilterBarActiveChipsProps,
   FilterBarProps,
+  FilterBarRowProps,
   FilterChipProps,
   HelpTextProps,
   PanelBodyProps,
   PanelFooterProps,
   PanelHeaderProps,
   PanelProps,
-} from '../layout/Panel';
+  WorkbenchAuthoringShellProps,
+  WorkbenchLabeledPaneChrome,
+  WorkbenchLabeledPaneProps,
+  WorkbenchLabeledPaneTone,
+  WorkbenchPlainTextSourceProps,
+  WorkbenchSurfaceMetaProps,
+  WorkbenchSurfaceToolbarProps,
+  WorkbenchSidebarStackProps,
+} from '../layout/panel';
+export {
+  WorkbenchBanner,
+  WorkbenchBannerIcon,
+  WorkbenchBannerMessage,
+  WorkbenchCenter,
+  WorkbenchFill,
+  WorkbenchFillChain,
+  WorkbenchPane,
+  WorkbenchPanelScroll,
+  WorkbenchPanelSurface,
+  WorkbenchRoot,
+  WorkbenchScrollRegion,
+} from '../layout/WorkbenchLayoutBase';
+export type {
+  WorkbenchBannerIconProps,
+  WorkbenchBannerMessageProps,
+  WorkbenchBannerProps,
+  WorkbenchCenterProps,
+  WorkbenchFillChainProps,
+  WorkbenchFillProps,
+  WorkbenchPaneProps,
+  WorkbenchPanelScrollProps,
+  WorkbenchPanelSurfaceProps,
+  WorkbenchRootProps,
+  WorkbenchScrollRegionProps,
+} from '../layout/WorkbenchLayoutBase';
+export {
+  WORKBENCH_FILL_SCROLL_ROLE_ATTR,
+  isWorkbenchFillOwner,
+  isWorkbenchScrollOwner,
+  resolveWorkbenchFillScrollRole,
+  workbenchFillScrollRoleProps,
+} from '../layout/fillScrollContract';
+export type {
+  WorkbenchFillScrollOwnerRegistry,
+  WorkbenchFillScrollRole,
+  WorkbenchFillScrollRoleProps,
+} from '../layout/fillScrollContract';
 export {
   WorkbenchParseError,
+  WorkbenchPropertyCard,
+  WorkbenchPropertyGrid,
   WorkbenchPropertyHint,
+  WorkbenchPropertyKeyValue,
+  WorkbenchMetricGrid,
   WorkbenchPropertyNumberRow,
   WorkbenchPropertyPanel,
   WorkbenchPropertyRow,
@@ -96,10 +233,33 @@ export {
 } from '../layout/WorkbenchPropertyPanel';
 export type {
   WorkbenchParseErrorProps,
+  WorkbenchPropertyCardProps,
+  WorkbenchPropertyGridProps,
+  WorkbenchPropertyKeyValueProps,
   WorkbenchPropertyNumberRowProps,
   WorkbenchPropertyPanelProps,
   WorkbenchPropertyRowProps,
+  WorkbenchMetricGridEntry,
+  WorkbenchMetricGridItem,
+  WorkbenchMetricGridProps,
+  WorkbenchPropertySectionLevel,
   WorkbenchPropertySectionProps,
   WorkbenchPropertyStackProps,
   WorkbenchPropertyTextRowProps,
 } from '../layout/WorkbenchPropertyPanel';
+export { WorkbenchPropertyOverrideLabel } from '../layout/WorkbenchPropertyOverrideLabel';
+export type {
+  WorkbenchPropertyOverrideLabelProps,
+  WorkbenchPropertyOverrideResetAppearance,
+} from '../layout/WorkbenchPropertyOverrideLabel';
+export { WorkbenchPropertySearch } from '../layout/WorkbenchPropertySearch';
+export type { WorkbenchPropertySearchProps } from '../layout/WorkbenchPropertySearch';
+export {
+  filterWorkbenchPropertyFields,
+  isWorkbenchPropertySearchActive,
+} from '../layout/propertyFieldFilter';
+export type {
+  WorkbenchPropertyFieldFilterInput,
+  WorkbenchPropertyFieldFilterResult,
+  WorkbenchPropertyFieldManifestEntry,
+} from '../layout/propertyFieldFilter';

package/src/primitives/library-detail-layout/LibraryDetailLayout.tsx

@@ -0,0 +1,135 @@
+import './library-detail-layout.css';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+
+import { cx } from '../../utils/cx';
+import { WorkbenchMediaSlot } from '../workbench-media-slot';
+import { RecordMediaHero } from '../record-media-hero';
+import { ScrollArea } from '../scroll-area';
+
+export type LibraryDetailLayoutMode = 'background' | 'banner' | 'compact';
+
+export interface LibraryDetailLayoutProps extends Omit<
+  ComponentPropsWithRef<'div'>,
+  'children' | 'title'
+> {
+  readonly actions?: ReactNode;
+  readonly backgroundImageUrl?: string | null | undefined;
+  readonly children?: ReactNode;
+  readonly coverAlt?: string | undefined;
+  readonly coverImageUrl?: string | null | undefined;
+  readonly description?: ReactNode;
+  readonly logoImageUrl?: string | null | undefined;
+  readonly mode?: LibraryDetailLayoutMode | undefined;
+  readonly summary?: ReactNode;
+  readonly title: ReactNode;
+  readonly toolbar?: ReactNode;
+}
+
+export function LibraryDetailLayout({
+  actions,
+  backgroundImageUrl = null,
+  children,
+  className,
+  coverAlt,
+  coverImageUrl = null,
+  description,
+  logoImageUrl = null,
+  mode = 'banner',
+  summary,
+  title,
+  toolbar,
+  ...props
+}: LibraryDetailLayoutProps): ReactNode {
+  const resolvedMode =
+    mode === 'background' ? 'background' : mode === 'compact' ? 'compact' : 'banner';
+
+  return (
+    <div
+      className={cx(
+        'ui-library-detail-layout',
+        `ui-library-detail-layout--${resolvedMode}`,
+        className,
+      )}
+      data-ui-library-detail-layout={resolvedMode}
+      {...props}
+    >
+      {toolbar}
+      {resolvedMode === 'background' ? (
+        <div className="ui-library-detail-layout__band" data-ui-library-detail-band="true">
+          <RecordMediaHero
+            alt={coverAlt}
+            className="ui-library-detail-layout__band-media"
+            fallbackIcon="library"
+            imageUrl={backgroundImageUrl}
+            layout="background"
+          />
+          <div aria-hidden className="ui-library-detail-layout__band-overlay" />
+          <div className="ui-library-detail-layout__band-content">
+            <LibraryDetailIdentity logoImageUrl={logoImageUrl} summary={summary} title={title} />
+            {actions ? <div className="ui-library-detail-layout__actions">{actions}</div> : null}
+            {description ? (
+              <div className="ui-library-detail-layout__description">{description}</div>
+            ) : null}
+          </div>
+        </div>
+      ) : (
+        <div className="ui-library-detail-layout__hero" data-ui-library-detail-hero="true">
+          <RecordMediaHero
+            alt={coverAlt}
+            className="ui-library-detail-layout__cover"
+            fallbackIcon="library"
+            imageUrl={coverImageUrl}
+            layout="compact"
+            logoUrl={logoImageUrl}
+          />
+          <div className="ui-library-detail-layout__hero-content">
+            <div className="ui-library-detail-layout__title">{title}</div>
+            {summary ? <div className="ui-library-detail-layout__summary">{summary}</div> : null}
+            {actions ? <div className="ui-library-detail-layout__actions">{actions}</div> : null}
+            {description ? (
+              <div className="ui-library-detail-layout__description">{description}</div>
+            ) : null}
+          </div>
+        </div>
+      )}
+      {children ? (
+        <ScrollArea
+          className="ui-library-detail-layout__body"
+          data-ui-library-detail-body="true"
+          orientation="vertical"
+        >
+          {children}
+        </ScrollArea>
+      ) : null}
+    </div>
+  );
+}
+
+function LibraryDetailIdentity({
+  logoImageUrl,
+  summary,
+  title,
+}: {
+  logoImageUrl: string | null | undefined;
+  summary: ReactNode | undefined;
+  title: ReactNode;
+}): ReactNode {
+  return (
+    <div className="ui-library-detail-layout__identity">
+      <WorkbenchMediaSlot
+        as="div"
+        className="ui-library-detail-layout__logo-slot"
+        fallbackClassName="ui-library-detail-layout__logo-fallback"
+        fallbackIcon="library"
+        fill
+        imageClassName="ui-library-detail-layout__logo"
+        imageUrl={logoImageUrl}
+        loading="eager"
+      />
+      <div className="ui-library-detail-layout__identity-text">
+        <div className="ui-library-detail-layout__title">{title}</div>
+        {summary ? <div className="ui-library-detail-layout__summary">{summary}</div> : null}
+      </div>
+    </div>
+  );
+}

package/src/primitives/library-detail-layout/index.ts

@@ -0,0 +1 @@
+export * from './LibraryDetailLayout';

package/src/primitives/library-detail-layout/library-detail-layout.css

@@ -0,0 +1,169 @@
+.ui-library-detail-layout {
+  --shell-library-capsule-aspect: 116 / 43;
+  --shell-library-capsule-list-width: 116px;
+  --shell-library-capsule-list-height: 43px;
+  --shell-detail-hero-cover-width: 231px;
+  --shell-detail-hero-cover-height: calc(var(--shell-detail-hero-cover-width, 231px) * 43 / 116);
+  --shell-library-detail-logo-size: 56px;
+  --shell-library-detail-thumb-width: var(--shell-library-capsule-list-width, 116px);
+  --shell-library-detail-thumb-height: var(--shell-library-capsule-list-height, 43px);
+  --shell-detail-hero-band-height: 200px;
+  --shell-detail-hero-region-height: var(--shell-detail-hero-band-height, 200px);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+  min-width: 0;
+  height: 100%;
+}
+
+.ui-library-detail-layout__hero {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: var(--shell-detail-hero-region-height, var(--shell-detail-hero-band-height, 200px));
+  height: var(--shell-detail-hero-region-height, var(--shell-detail-hero-band-height, 200px));
+}
+
+.ui-library-detail-layout__hero-content {
+  display: grid;
+  flex: 1 1 auto;
+  gap: 8px;
+  min-width: 0;
+}
+
+.ui-library-detail-layout__title {
+  font-size: var(--shell-font-size-title, 1.125rem);
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.ui-library-detail-layout__summary {
+  color: var(--shell-color-text-muted, var(--color-text-muted));
+  font-size: var(--shell-font-size-caption, 0.75rem);
+}
+
+.ui-library-detail-layout__description {
+  color: var(--shell-color-text-muted, var(--color-text-muted));
+  font-size: var(--shell-font-size-caption, 0.75rem);
+  line-height: 1.45;
+}
+
+.ui-library-detail-layout__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.ui-library-detail-layout__band {
+  position: relative;
+  box-sizing: border-box;
+  height: var(--shell-detail-hero-region-height, var(--shell-detail-hero-band-height, 200px));
+  min-height: var(--shell-detail-hero-region-height, var(--shell-detail-hero-band-height, 200px));
+  overflow: hidden;
+  border: 1px solid
+    var(--shell-color-border-subtle, var(--color-border-subtle, rgba(255, 255, 255, 0.08)));
+  border-radius: var(--shell-radius-md, 6px);
+}
+
+.ui-library-detail-layout__band-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.72) 100%);
+  pointer-events: none;
+}
+
+.ui-library-detail-layout__band-content {
+  position: relative;
+  z-index: 2;
+  display: grid;
+  gap: 10px;
+  min-height: var(--shell-detail-hero-region-height, var(--shell-detail-hero-band-height, 200px));
+  padding: 16px;
+  justify-content: end;
+  align-content: end;
+}
+
+.ui-library-detail-layout__identity {
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
+}
+
+.ui-library-detail-layout__identity-text {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.ui-library-detail-layout__logo-slot {
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+  flex-shrink: 0;
+  width: var(--shell-library-detail-logo-size, 56px);
+  height: var(--shell-library-detail-logo-size, 56px);
+  min-width: var(--shell-library-detail-logo-size, 56px);
+  min-height: var(--shell-library-detail-logo-size, 56px);
+  max-width: var(--shell-library-detail-logo-size, 56px);
+  max-height: var(--shell-library-detail-logo-size, 56px);
+  overflow: hidden;
+  background: var(--shell-color-surface-sunken, rgba(255, 255, 255, 0.04));
+  border: 1px solid
+    var(--shell-color-border-subtle, var(--color-border-subtle, rgba(255, 255, 255, 0.08)));
+  border-radius: var(--shell-radius-sm, 4px);
+}
+
+.ui-library-detail-layout__logo {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  object-fit: var(--shell-library-logo-object-fit, cover);
+  object-position: center;
+}
+
+.ui-library-detail-layout__logo-fallback,
+.ui-library-detail-layout__logo-slot .ui-workbench-media-slot__placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.ui-library-detail-layout__logo-fallback {
+  font-size: 28px;
+}
+
+.ui-library-detail-layout__body {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.ui-library-detail-layout--compact .ui-library-detail-layout__hero {
+  gap: 12px;
+}
+
+.ui-library-detail-layout__cover.ui-record-media-hero--compact {
+  box-sizing: border-box;
+  width: min(100%, var(--shell-detail-hero-cover-width, 231px));
+  min-width: min(100%, var(--shell-detail-hero-cover-width, 231px));
+  max-width: min(100%, var(--shell-detail-hero-cover-width, 231px));
+  height: var(
+    --shell-detail-hero-cover-height,
+    calc(var(--shell-detail-hero-cover-width, 231px) * 43 / 116)
+  );
+  min-height: var(
+    --shell-detail-hero-cover-height,
+    calc(var(--shell-detail-hero-cover-width, 231px) * 43 / 116)
+  );
+  max-height: var(
+    --shell-detail-hero-cover-height,
+    calc(var(--shell-detail-hero-cover-width, 231px) * 43 / 116)
+  );
+  aspect-ratio: var(--shell-library-capsule-aspect, 116 / 43);
+  flex: 0 0 auto;
+}