Narrow component prop types, remove unused props and dead code (#2838)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>

shared/components/cards/BodyPlaceholder.astro

@@ -1,16 +1,15 @@
 ---
 interface Props {
-  width?: number
   height?: number
-  ratio?: string
   class?: string
 }
 
-const { width = 400, height = 200, ratio, class: className } = Astro.props
+const width = 400
+const { height = 200, class: className } = Astro.props
 ---
 
 <div class={`card-body${className ? ` ${className}` : ''}`}>
-  <svg xmlns="http://www.w3.org/2000/svg" class="w-100 border rounded" preserveAspectRatio={ratio ? 'xMidYMid meet' : 'none'} width={width} height={height} viewBox={`0 0 ${width} ${height}`} fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
+  <svg xmlns="http://www.w3.org/2000/svg" class="w-100 border rounded" preserveAspectRatio="none" width={width} height={height} viewBox={`0 0 ${width} ${height}`} fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
     <line x1="0" y1="0" x2={width} y2={height}></line>
     <line x1="0" y1={height} x2={width} y2="0"></line>
   </svg>

shared/components/cards/Card.astro

@@ -1,5 +1,4 @@
 ---
-import CardSubtitle from '@ui/CardSubtitle.astro';
 import Icon from '@ui/Icon.astro';
 import AvatarList from '@ui/AvatarList.astro';
 import Empty from '@ui/Empty.astro';
@@ -8,9 +7,6 @@ import photos from '@data/photos.json';
 import { requireIndex } from '@shared/lib/array';
 
 interface Props {
-	link?: boolean;
-	active?: boolean;
-	inactive?: boolean;
 	class?: string;
 	empty?: boolean;
 	imgTop?: boolean;
@@ -18,17 +14,9 @@ interface Props {
 	statusTop?: string;
 	statusBottom?: string;
 	statusStart?: string;
-	header?: boolean;
-	headerTitle?: string;
 	headerTabs?: boolean;
 	headerPills?: boolean;
-	alert?: string;
-	alertType?: string;
 	title?: string;
-	subtitle?: boolean;
-	body?: string;
-	button?: boolean;
-	footer?: boolean;
 	footerButton?: boolean;
 	footerButtons?: boolean;
 	/** a right-angle-bracket prefix pushes the element (and every following one) to the right — `right` is never reset */
@@ -37,9 +25,6 @@ interface Props {
 }
 
 const {
-	link = false,
-	active,
-	inactive,
 	class: className,
 	empty,
 	imgTop,
@@ -47,31 +32,16 @@ const {
 	statusTop,
 	statusBottom,
 	statusStart,
-	header,
-	headerTitle,
 	headerTabs,
 	headerPills,
-	alert,
-	alertType = 'success',
 	title,
-	subtitle,
-	body,
-	button,
-	footer,
 	footerButton,
 	footerButtons,
 	footerElements,
 	progress,
 }: Props = Astro.props;
 
-const Element = link ? 'a' : 'div';
-
-const classes = [
-	'card',
-	active && 'card-active',
-	inactive && 'card-inactive',
-	className,
-]
+const classes = ['card', className]
 
 // footer-elements parsing — `right` is never reset once set across iterations.
 let right = false;
@@ -84,14 +54,14 @@ const footerEls = (footerElements ?? []).map((element: string) => {
 		return { el, right };
 	});
 
-const hasHeader = header || headerTitle || headerTabs || headerPills;
-const hasFooter = footer || footerButton || footerButtons || footerElements;
+const hasHeader = headerTabs || headerPills;
+const hasFooter = footerButton || footerButtons || footerElements;
 
 const imgTopPhoto = requireIndex(photos as { file: string; title: string }[], 7);
 const imgBottomPhoto = requireIndex(photos as { file: string; title: string }[], 11);
 ---
 
-<Element href={link ? '#' : undefined} class:list={classes}>
+<div class:list={classes}>
 	{
 		empty ? (
 			<Empty illustration="not-found" height={160} />
@@ -142,32 +112,18 @@ const imgBottomPhoto = requireIndex(photos as { file: string; title: string }[],
 								</li>
 							</ul>
 						) : (
-							<h3 class="card-title" set:html={headerTitle ?? 'Header title'} />
+							<h3 class="card-title">Header title</h3>
 						)}
 					</div>
 				)}
 
-				{alert && <div class={`card-alert alert alert-${alertType} mb-0`} set:html={alert} />}
 				<div class="card-body">
 					{title && <h3 class="card-title" set:html={title} />}
-					{subtitle && <CardSubtitle as="div">Card subtitle</CardSubtitle>}
 
-					{body ? (
-						<p class="text-secondary" set:html={body} />
-					) : (
-						<p class="text-secondary">
-							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque
-							minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
-						</p>
-					)}
-
-					{button && (
-						<div class="card-text">
-							<a href="#" class="btn btn-primary">
-								Go somewhere
-							</a>
-						</div>
-					)}
+					<p class="text-secondary">
+						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque
+						minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
+					</p>
 				</div>
 
 				{hasFooter && (
@@ -228,4 +184,4 @@ const imgBottomPhoto = requireIndex(photos as { file: string; title: string }[],
 			</Fragment>
 		)
 	}
-</Element>
+</div>

shared/components/cards/CardTabs.astro

@@ -1,14 +1,11 @@
 ---
 // Tabs/content blocks are HTML strings (different order when `bottom`).
 interface Props {
-  /** tabs-count — present but unused */
-  count?: number
   id?: string
   bottom?: boolean
-  borderless?: boolean
 }
 
-const { id = 'top', bottom, borderless } = Astro.props
+const { id = 'top', bottom } = Astro.props
 
 const tabs = ['Activity', 'Profile', 'Settings']
 
@@ -37,7 +34,7 @@ ${tabs
 ---
 
 <!-- Cards with tabs component -->
-<div class={`card-tabs${borderless ? ' border-0' : ''}`}>
+<div class="card-tabs">
   {
     bottom ? (
       <Fragment>

shared/components/cards/CarouselCard.astro

@@ -14,12 +14,12 @@ interface Props {
   controls?: boolean
   captions?: boolean
   offset?: number
-  limit?: number
   fade?: boolean
 }
 
-const { id: idProp, title = 'Carousel', indicators, indicatorsThumb, indicatorsThumbRatio, indicatorsDot, indicatorsVertical, controls, captions, offset = 0, limit = 5, fade } = Astro.props
+const { id: idProp, title = 'Carousel', indicators, indicatorsThumb, indicatorsThumbRatio, indicatorsDot, indicatorsVertical, controls, captions, offset = 0, fade } = Astro.props
 
+const limit = 5
 const carouselId = idProp ?? 'carousel'
 const filteredPhotos = (photos as { file: string; title?: string; horizontal?: boolean }[]).filter((p) => p.horizontal)
 const slides = filteredPhotos.slice(offset, offset + limit)

shared/components/cards/MapVectorCard.astro

@@ -3,10 +3,10 @@ import MapVector from '@ui/MapVector.astro'
 
 interface Props {
   title?: string
-  map?: string
 }
 
-const { title, map = 'world' } = Astro.props
+const { title } = Astro.props
+const map = 'world'
 ---
 
 <div class="card">

shared/components/cards/ProfileContact.astro

@@ -12,10 +12,10 @@ interface Person {
 
 interface Props {
   person: Person
-  color?: string
 }
 
-const { person, color = 'yellow' } = Astro.props
+const { person } = Astro.props
+const color = 'yellow'
 ---
 
 <div class={`card card-gradient card-gradient-${color}`}>

shared/components/cards/ProjectKanban.astro

@@ -9,17 +9,16 @@ interface Props {
   badge?: string
   offset?: number
   limit?: number
-  percentage?: number | string
   percentageColor?: string
   due?: string
   value?: number | string
 }
 
-const { title = 'Task Title', badge, offset = 40, limit = 7, percentage, percentageColor = 'green', due = '2 days', value = 20 } = Astro.props
+const { title = 'Task Title', badge, offset = 40, limit = 7, percentageColor = 'green', due = '2 days', value = 20 } = Astro.props
 ---
 
 <div class="card">
-  <Progress value={percentage ?? value} class="card-progress" color={percentageColor} />
+  <Progress value={value} class="card-progress" color={percentageColor} />
   <div class="card-body">
     <CardTitle>
       <a href="#">{title}</a>

shared/components/cards/ProjectSummary.astro

@@ -4,31 +4,26 @@ import AvatarList from '@ui/AvatarList.astro'
 import Progress from '@ui/Progress.astro'
 
 interface Props {
-  title?: string
-  date?: string
   stageColor?: string
-  stage?: string
-  projectColor?: string
-  percentage?: number | string
-  percentageColor?: string
-  avatarOffset?: number
-  avatarLimit?: number
 }
 
-const { title = 'New website', date = '28 Aug 2019', stageColor = 'green', stage = 'Waiting', projectColor, percentage, percentageColor, avatarOffset, avatarLimit } = Astro.props
+const { stageColor = 'green' } = Astro.props
+const title = 'New website'
+const date = '28 Aug 2019'
+const stage = 'Waiting'
 ---
 
 <div class="card">
   <div class="card-body p-4 py-5 text-center">
-    <Avatar size="xl" placeholder="W" class="mb-4" color={projectColor} />
+    <Avatar size="xl" placeholder="W" class="mb-4" />
     <h3 class="mb-0">{title}</h3>
     <p class="text-secondary">Due to: {date}</p>
     <p class="mb-3">
       <span class={`badge bg-${stageColor}-lt`}>{stage}</span>
     </p>
     <div>
-      <AvatarList stacked offset={avatarOffset} limit={avatarLimit} />
+      <AvatarList stacked />
     </div>
   </div>
-  <Progress class="card-progress" value={percentage} color={percentageColor} />
+  <Progress class="card-progress" />
 </div>

shared/components/cards/SmallStats.astro

@@ -4,8 +4,6 @@
 import Icon from '@ui/Icon.astro'
 import Avatar from '@ui/Avatar.astro'
 import ChartSparkline from '@ui/ChartSparkline.astro'
-import Trending from '@ui/Trending.astro'
-import Button from '@ui/Button.astro'
 
 interface Props {
   icon?: string
@@ -19,16 +17,12 @@ interface Props {
   chartType?: string
   chartPosition?: string
   chartData?: string | number
-  chartLabel?: string
-  chartLabelIcon?: string
   smallIcon?: string
   descriptionValue?: string
   descriptionValueColor?: string
-  trending?: number
-  button?: string
 }
 
-const { icon, color, lt, title, description, class: className, id, personId, chartType = 'line', chartPosition = 'right', chartData, smallIcon, descriptionValue, descriptionValueColor, trending, button } = Astro.props
+const { icon, color, lt, title, description, class: className, id, personId, chartType = 'line', chartPosition = 'right', chartData, smallIcon, descriptionValue, descriptionValueColor } = Astro.props
 
 const chartColor = color ?? 'primary'
 const avatarClass = [color ? `bg-${color}${lt ? '-lt' : ' text-white'}` : '', 'avatar', 'avatar-square']
@@ -73,22 +67,6 @@ const avatarClass = [color ? `bg-${color}${lt ? '-lt' : ' text-white'}` : '', 'a
           </div>
         )
       }
-
-      {
-        trending && (
-          <div class="col-auto">
-            <Trending value={trending} />
-          </div>
-        )
-      }
-
-      {
-        button && (
-          <div class="col-auto">
-            <Button text={button} size="sm" />
-          </div>
-        )
-      }
     </div>
   </div>
 </div>

shared/components/cards/TabsCard.astro

@@ -5,8 +5,6 @@ import DropdownMenu from '@ui/DropdownMenu.astro'
 interface Props {
   id: string
   icons?: boolean
-  /** hide-text param; not used by current call sites */
-  hideText?: boolean
   reverse?: boolean
   justified?: boolean
   activity?: boolean
@@ -16,9 +14,8 @@ interface Props {
   animation?: boolean
 }
 
-const { id, icons, hideText, reverse = false, justified, activity, disabled, dropdown, settings, animation } = Astro.props
+const { id, icons, reverse = false, justified, activity, disabled, dropdown, settings, animation } = Astro.props
 
-const iconClass = hideText ? undefined : 'me-2'
 const navClass = `nav nav-tabs card-header-tabs${reverse ? ' flex-row-reverse' : ''}${justified ? ' nav-fill' : ''}`
 const paneClass = `tab-pane${animation ? ' fade' : ''}`
 ---
@@ -27,18 +24,18 @@ const paneClass = `tab-pane${animation ? ' fade' : ''}`
   <div class="card-header">
     <ul class={navClass} role="tablist">
       <li class="nav-item" role="presentation">
-        <a href={`#tabs-home-${id}`} id={`tabs-home-${id}-tab`} class="nav-link active" data-bs-toggle="tab" data-bs-target={`#tabs-home-${id}`} role="tab" aria-controls={`tabs-home-${id}`} aria-selected="true">{icons && <Icon name="home" class={iconClass} />}{!hideText && 'Home'}</a>
+        <a href={`#tabs-home-${id}`} id={`tabs-home-${id}-tab`} class="nav-link active" data-bs-toggle="tab" data-bs-target={`#tabs-home-${id}`} role="tab" aria-controls={`tabs-home-${id}`} aria-selected="true">{icons && <Icon name="home" class="me-2" />}Home</a>
       </li>
       <li class="nav-item" role="presentation">
-        <a href={`#tabs-profile-${id}`} id={`tabs-profile-${id}-tab`} class="nav-link" data-bs-toggle="tab" data-bs-target={`#tabs-profile-${id}`} role="tab" aria-controls={`tabs-profile-${id}`} aria-selected="false">{icons && <Icon name="user" class={iconClass} />}{!hideText && 'Profile'}</a>
+        <a href={`#tabs-profile-${id}`} id={`tabs-profile-${id}-tab`} class="nav-link" data-bs-toggle="tab" data-bs-target={`#tabs-profile-${id}`} role="tab" aria-controls={`tabs-profile-${id}`} aria-selected="false">{icons && <Icon name="user" class="me-2" />}Profile</a>
       </li>
 
       {
         activity && (
           <li class="nav-item" role="presentation">
             <a href={`#tabs-activity-${id}`} id={`tabs-activity-${id}-tab`} class="nav-link" data-bs-toggle="tab" data-bs-target={`#tabs-activity-${id}`} role="tab" aria-controls={`tabs-activity-${id}`} aria-selected="false">
-              {icons && <Icon name="activity" class={iconClass} />}
-              {!hideText && 'Activity'}
+              {icons && <Icon name="activity" class="me-2" />}
+              Activity
             </a>
           </li>
         )
@@ -48,8 +45,8 @@ const paneClass = `tab-pane${animation ? ' fade' : ''}`
         disabled && (
           <li class="nav-item" role="presentation">
             <a href="#" class="nav-link disabled" data-bs-toggle="tab" role="tab" aria-selected="false" aria-disabled="true" tabindex="-1">
-              {icons && <Icon name="x" class={iconClass} />}
-              {!hideText && 'Disabled'}
+              {icons && <Icon name="x" class="me-2" />}
+              Disabled
             </a>
           </li>
         )

shared/components/cards/UserInfo.astro

@@ -16,18 +16,12 @@ interface Person {
   [key: string]: unknown
 }
 
-interface Props {
-  title?: string
-  personId?: number
-}
-
-const { title = 'Basic info', personId = 25 } = Astro.props
-const person = requireIndex(people as Person[], personId - 1)
+const person = requireIndex(people as Person[], 24)
 ---
 
 <div class="card">
   <div class="card-body">
-    <h3 class="card-title">{title}</h3>
+    <h3 class="card-title">Basic info</h3>
     <div class="mb-2">
       <Icon name="book" class="me-2 text-secondary" />
       Went to: <strong>{person.university}</strong>

shared/components/cards/UsersList.astro

@@ -16,7 +16,6 @@ interface Person {
 }
 
 interface Props {
-  limit?: number
   offset?: number
   hoverable?: boolean
   checkbox?: boolean
@@ -32,7 +31,9 @@ interface Props {
   hover?: boolean
 }
 
-const { limit = 8, offset = 0, hoverable = false, checkbox, checkedIds, title = 'Last commits', class: className } = Astro.props
+const { offset = 0, hoverable = false, checkbox, checkedIds, title = 'Last commits', class: className } = Astro.props
+
+const limit = 8
 
 const colors = ['green', 'red', 'yellow', 'x', 'x']
 const commitList = commits as { description: string }[]

shared/components/cards/UsersList2.astro

@@ -12,13 +12,14 @@ interface Person {
 }
 
 interface Props {
-  limit?: number
-  offset?: number
-  title?: string
   class?: string
 }
 
-const { limit = 10, offset = 0, title = 'Top users', class: className } = Astro.props
+const { class: className } = Astro.props
+
+const limit = 10
+const offset = 0
+const title = 'Top users'
 
 const colors = ['green', 'red', 'yellow', 'x', 'x'] as const
 const statusLabels: Record<(typeof colors)[number], string> = { green: 'Online', red: 'Busy', yellow: 'Away', x: 'Offline' }

shared/components/cards/UsersListHeaders.astro

@@ -15,11 +15,7 @@ interface Person {
   [key: string]: unknown
 }
 
-interface Props {
-  title?: string
-}
-
-const { title = 'People' } = Astro.props
+const title = 'People'
 
 const commitList = commits as { description: string }[]
 

shared/components/layout/PageHeader.astro

@@ -2,7 +2,6 @@
 // Layout front-matter flags are plain props here.
 // TODO: layout-navbar-overlap && layout-navbar-dark → extra text-white class
 // on .page-header — both unset on the homepage.
-import Icon from '@ui/Icon.astro';
 import HeaderActionsButtons from './HeaderActionsButtons.astro';
 import HeaderActionsPrint from './HeaderActionsPrint.astro';
 import HeaderActionsPhotos from './HeaderActionsPhotos.astro';
@@ -24,15 +23,13 @@ interface Props {
 	actions?: string | undefined;
 	/** page-header-class */
 	class?: string;
-	/** page-header-icon */
-	icon?: string;
 	/** page-header-file — name of an include from layout/headers/, e.g. "profile" */
 	file?: string | undefined;
 	/** layout-navbar-overlap && layout-navbar-dark → text-white on .page-header */
 	textWhite?: boolean | undefined;
 }
 
-const { title, pretitle, description, actions, class: className, icon, file, textWhite } = Astro.props;
+const { title, pretitle, description, actions, class: className, file, textWhite } = Astro.props;
 ---
 
 {file === 'profile' && <HeaderProfile />}
@@ -50,7 +47,6 @@ const { title, pretitle, description, actions, class: className, icon, file, tex
 							</Fragment>
 						)}
 						<h1 class="page-title">
-							{icon && <Icon name={icon} />}
 							{title}
 						</h1>
 

shared/components/marketing/hero/Side.astro

@@ -28,7 +28,7 @@ const typedId = 'typed'
       </div>
       <div class="col-md-6">
         <div class="hero-img-side">
-          <Carousel id="carousel-controls" slideCount={3} interval={4000}>
+          <Carousel id="carousel-controls" interval={4000}>
             <div class="carousel-item active">
               <Illustration image="boy-with-key.svg" class="d-block mx-auto" height="350" />
             </div>

shared/components/marketing/sections/Cta.astro

@@ -3,13 +3,12 @@ import Button from '@ui/Button.astro'
 import ButtonList from '@ui/ButtonList.astro'
 
 interface Props {
-  background?: string
   class?: string
 }
 
-const { background, class: className } = Astro.props
+const { class: className } = Astro.props
 
-const sectionClass = ['section', background && `section-${background}`, className]
+const sectionClass = ['section', className]
 ---
 
 <section class:list={sectionClass}>

shared/components/marketing/sections/Features.astro

@@ -1,20 +1,16 @@
 ---
-import SectionDivider from '../SectionDivider.astro'
 import Icon from '@ui/Icon.astro'
 
 interface Props {
-  background?: string
   class?: string
-  divider?: string
 }
 
-const { background, class: className, divider } = Astro.props
+const { class: className } = Astro.props
 
-const sectionClass = ['section', background && `section-${background}`, className]
+const sectionClass = ['section', className]
 ---
 
 <section class:list={sectionClass}>
-  <SectionDivider divider={divider} />
   <div class="container">
     <div class="row items-center text-center g-lg-10">
       <div class="col-md-6 col-lg">

shared/components/marketing/sections/Features2.astro

@@ -1,20 +1,17 @@
 ---
-import SectionDivider from '../SectionDivider.astro'
 import Icon from '@ui/Icon.astro'
 
 interface Props {
   background?: string
   class?: string
-  divider?: string
 }
 
-const { background, class: className, divider } = Astro.props
+const { background, class: className } = Astro.props
 
 const sectionClass = ['section', background && `section-${background}`, className]
 ---
 
 <section class:list={sectionClass}>
-  <SectionDivider divider={divider} />
   <div class="container">
     <div class="section-header">
       <h2 class="section-title">Everything you need to deploy your app</h2>

shared/components/marketing/sections/Features3.astro

@@ -1,20 +1,17 @@
 ---
-import SectionDivider from '../SectionDivider.astro'
 import Icon from '@ui/Icon.astro'
 
 interface Props {
   background?: string
   class?: string
-  divider?: string
 }
 
-const { background, class: className, divider } = Astro.props
+const { background, class: className } = Astro.props
 
 const sectionClass = ['section', background && `section-${background}`, className]
 ---
 
 <section class:list={sectionClass}>
-  <SectionDivider divider={divider} />
   <div class="container">
     <div class="section-header">
       <h2 class="section-title">Everything you need to deploy your app</h2>

shared/components/marketing/sections/Pricing.astro

@@ -2,13 +2,12 @@
 import Icon from '@ui/Icon.astro'
 
 interface Props {
-  background?: string
   class?: string
 }
 
-const { background, class: className } = Astro.props
+const { class: className } = Astro.props
 
-const sectionClass = ['section', background && `section-${background}`, className]
+const sectionClass = ['section', className]
 ---
 
 <section class:list={sectionClass}>

shared/components/marketing/sections/PricingBanner.astro

@@ -1,13 +1,7 @@
 ---
 import Icon from '@ui/Icon.astro'
 
-interface Props {
-  background?: string
-}
-
-const { background } = Astro.props
-
-const sectionClass = ['section', background && `section-${background}`]
+const sectionClass = ['section']
 ---
 
 <section class:list={sectionClass}>

shared/components/marketing/sections/Subscribe.astro

@@ -2,13 +2,12 @@
 import Icon from '@ui/Icon.astro'
 
 interface Props {
-  background?: string
   class?: string
 }
 
-const { background, class: className } = Astro.props
+const { class: className } = Astro.props
 
-const sectionClass = ['section', background && `section-${background}`, className]
+const sectionClass = ['section', className]
 ---
 
 <section class:list={sectionClass}>

shared/components/marketing/sections/Testimonials.astro

@@ -13,15 +13,14 @@ interface Person {
 }
 
 interface Props {
-  background?: string
   class?: string
   limit?: number
   hideHeader?: boolean
 }
 
-const { background, class: className, limit = 99, hideHeader } = Astro.props
+const { class: className, limit = 99, hideHeader } = Astro.props
 
-const sectionClass = ['section', background && `section-${background}`, className]
+const sectionClass = ['section', className]
 
 // Slice testimonials and split into 3 columns.
 const list = (testimonials as string[]).slice(0, limit)

shared/components/modals/Modal.astro

@@ -3,24 +3,21 @@
 // end of <body> (see PageModals). For inline gallery demos use ModalInline.
 interface Props {
   modalId?: string
-  size?: string
+  /** core/scss/bootstrap/_modal.scss + ui/_modals.scss `.modal-{size}` modifier classes */
+  size?: 'sm' | 'lg' | 'xl' | 'fullscreen' | 'full-width' | undefined
   top?: boolean
-  scrollable?: boolean
   class?: string
-  show?: boolean
-  style?: string
-  /** id of the title element the root references via aria-labelledby; defaults to `modal-${modalId}-title` */
-  titleId?: string
 }
 
-const { modalId = 'simple', size, top, scrollable, class: className, show, style, titleId = `modal-${modalId}-title` } = Astro.props
+const { modalId = 'simple', size, top, class: className } = Astro.props
+const titleId = `modal-${modalId}-title`
 
-const modalClass = ['modal modal-blur fade', className, show && 'show'].filter(Boolean).join(' ')
-const dialogClass = ['modal-dialog', size && `modal-${size}`, !top && 'modal-dialog-centered', scrollable && 'modal-dialog-scrollable'].filter(Boolean).join(' ')
+const modalClass = ['modal modal-blur fade', className].filter(Boolean).join(' ')
+const dialogClass = ['modal-dialog', size && `modal-${size}`, !top && 'modal-dialog-centered'].filter(Boolean).join(' ')
 ---
 
 <!-- BEGIN MODAL -->
-<div class={modalClass} style={style} id={`modal-${modalId}`} tabindex="-1" role="dialog" aria-modal="true" aria-labelledby={titleId} aria-hidden={show ? undefined : 'true'}>
+<div class={modalClass} id={`modal-${modalId}`} tabindex="-1" role="dialog" aria-modal="true" aria-labelledby={titleId} aria-hidden="true">
   <div class={dialogClass}>
     <div class="modal-content">
       <slot />

shared/components/modals/ModalInline.astro

@@ -3,20 +3,19 @@
 // modals gallery page where each modal is shown inline with `inline show`.
 interface Props {
   modalId?: string
-  size?: string
-  top?: boolean
+  /** core/scss/bootstrap/_modal.scss + ui/_modals.scss `.modal-{size}` modifier classes */
+  size?: 'sm' | 'lg' | 'xl' | 'fullscreen' | 'full-width' | undefined
   scrollable?: boolean
   class?: string
   show?: boolean
   style?: string
-  /** id of the title element the root references via aria-labelledby; defaults to `modal-${modalId}-title` */
-  titleId?: string
 }
 
-const { modalId = 'simple', size, top, scrollable, class: className, show, style, titleId = `modal-${modalId}-title` } = Astro.props
+const { modalId = 'simple', size, scrollable, class: className, show, style } = Astro.props
+const titleId = `modal-${modalId}-title`
 
 const modalClass = ['modal modal-blur fade', className, show && 'show'].filter(Boolean).join(' ')
-const dialogClass = ['modal-dialog', size && `modal-${size}`, !top && 'modal-dialog-centered', scrollable && 'modal-dialog-scrollable'].filter(Boolean).join(' ')
+const dialogClass = ['modal-dialog', size && `modal-${size}`, 'modal-dialog-centered', scrollable && 'modal-dialog-scrollable'].filter(Boolean).join(' ')
 ---
 
 <!-- BEGIN MODAL -->

shared/components/navbar/Navbar.astro

@@ -17,7 +17,6 @@ interface Props {
 	hideSearch?: boolean;
 	/** equivalent of the page-menu front matter (active menu entry), e.g. "dashboards.default" */
 	pageMenu?: string | undefined;
-	breakpoint?: string;
 	condensed?: boolean | undefined;
 	dark?: boolean | undefined;
 	transparent?: boolean;
@@ -48,7 +47,6 @@ interface Props {
 const {
 	hideSearch = false,
 	pageMenu,
-	breakpoint = 'md',
 	condensed = false,
 	dark = false,
 	transparent = false,
@@ -67,6 +65,8 @@ const {
 	class: className,
 } = Astro.props;
 
+const breakpoint = 'md';
+
 const headerClass = [
 	`navbar navbar-expand-${breakpoint}`,
 	transparent ? 'navbar-transparent' : background && `bg-${background}`,

shared/components/navbar/NavbarSearch.astro

@@ -5,16 +5,15 @@ import InputIcon from '@ui/form/InputIcon.astro'
 
 interface Props {
   class?: string
-  rounded?: boolean
 }
 
-const { class: className, rounded = false } = Astro.props
+const { class: className } = Astro.props
 ---
 
 <!-- BEGIN NAVBAR SEARCH -->
 <div class={className}>
   <form action="./" method="get" autocomplete="off" novalidate role="search">
-    <InputIcon prepend rounded={rounded} ariaLabel="Search in website" />
+    <InputIcon prepend ariaLabel="Search in website" />
   </form>
 </div>
 <!-- END NAVBAR SEARCH -->

shared/components/navbar/NavbarSide.astro

@@ -7,9 +7,12 @@ import NavbarSideApps from './NavbarSideApps.astro'
 import NavbarSideLanguage from './NavbarSideLanguage.astro'
 import NavbarSideUser from './NavbarSideUser.astro'
 
+/** Bootstrap responsive breakpoint used for `d-{breakpoint}-flex` — $grid-breakpoints minus xs */
+export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+
 interface Props {
   class?: string
-  breakpoint?: string
+  breakpoint?: Breakpoint | undefined
   condensed?: boolean
   personId?: number | undefined
   hideUsername?: boolean

shared/components/navbar/Sidebar.astro

@@ -3,10 +3,11 @@ import NavbarToggler from './NavbarToggler.astro'
 import Logo from './Logo.astro'
 import NavbarSide from './NavbarSide.astro'
 import NavbarMenu from './NavbarMenu.astro'
+import type { Breakpoint } from './NavbarSide.astro'
 
 interface Props {
   dark?: boolean | undefined
-  breakpoint?: string
+  breakpoint?: Breakpoint | undefined
   /** layout-sidebar-end — navbar-end class */
   end?: boolean | undefined
   /** layout-navbar-transparent — navbar-transparent class */

shared/components/parts/Tasks.astro

@@ -12,11 +12,11 @@ interface Column {
 }
 
 interface Props {
-  data?: { columns: Column[] }
   class?: string
 }
 
-const { data = tasksData as unknown as { columns: Column[] }, class: className } = Astro.props
+const { class: className } = Astro.props
+const data = tasksData as unknown as { columns: Column[] }
 ---
 
 <div class={`row${className ? ` ${className}` : ''}`}>

shared/components/parts/charts/Activity.astro

@@ -2,13 +2,6 @@
 import CardTitle from '@ui/CardTitle.astro'
 import Chart from '@ui/Chart.astro'
 import DropdownDays from '@ui/DropdownDays.astro'
-
-interface Props {
-  /** hide-breakpoint — when set, the stats column drops the -md breakpoint */
-  hideBreakpoint?: boolean
-}
-
-const { hideBreakpoint } = Astro.props
 ---
 
 <div class="card">
@@ -24,7 +17,7 @@ const { hideBreakpoint } = Astro.props
       <div class="col">
         <Chart chartId="active-users-2" label="Active users" />
       </div>
-      <div class={`col${hideBreakpoint ? '' : '-md'}-auto`}>
+      <div class="col-md-auto">
         <div class="divide-y divide-y-fill">
           <div class="px-3">
             <div class="text-secondary">