Add cssPlugins prop to ScreenshotLayout for enhanced CSS plugin support

screenshots/layouts/ScreenshotLayout.astro

@@ -24,11 +24,13 @@ interface Props {
   zoom?: number
   /** third-party libs from libs.json the component needs, e.g. ['apexcharts'] */
   pageLibs?: string[]
+  /** core CSS plugins (site.cssPlugins), e.g. ['socials'] for tabler-socials.css */
+  cssPlugins?: string[]
   /** extra classes on the component wrapper */
   class?: string
 }
 
-const { title, rtl = false, showLogo = true, columns, zoom = 1, pageLibs = [], class: className } = Astro.props
+const { title, rtl = false, showLogo = true, columns, zoom = 1, pageLibs = [], cssPlugins = [], class: className } = Astro.props
 const targetStyle = [columns && `max-width: ${columns * 310}px`, `zoom: ${zoom}`].filter(Boolean).join('; ')
 const rtlSuffix = rtl ? '.rtl' : ''
 // core/dist only has .min. files after a full `pnpm build`; `astro dev` (this
@@ -56,6 +58,8 @@ const libJsFiles = pageLibEntries.flatMap(([, lib]) => (lib.js ?? []).map((file)
 
     <link href={`/dist/css/tabler${rtlSuffix}${min}.css`} rel="stylesheet" />
 
+    {cssPlugins.map((plugin) => <link href={`/dist/css/tabler-${plugin}${rtlSuffix}${min}.css`} rel="stylesheet" />)}
+
     {libCssFiles.map((href) => <link href={href} rel="stylesheet" />)}
 
     <style is:inline>

screenshots/pages/authenticate-your-account.astro

@@ -0,0 +1,8 @@
+---
+import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
+import AuthenticateAccount from '@shared/components/cards/AuthenticateAccount.astro'
+---
+
+<ScreenshotLayout title="Authenticate Your Account" columns={1.5}>
+  <AuthenticateAccount />
+</ScreenshotLayout>

screenshots/pages/card-gradient.astro

@@ -0,0 +1,52 @@
+---
+// .card-gradient + .card-gradient-{variant} come from core/scss/ui/_cards.scss
+// (bundled in the base tabler.css — no cssPlugins needed here). Content follows
+// shared/components/cards/StatGradient.astro's pattern (subheader + big stat +
+// icon avatar + progress bar) rather than reusing it directly — its `color`
+// prop assumes a single real theme color drives BOTH the gradient background
+// and the icon/progress accent, which doesn't hold for the named palettes
+// below (rainbow, ocean, ...); accentColor is picked separately so the icon
+// stays legible in dark mode too ("dark" text is invisible on a dark theme).
+import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
+import Subheader from '@ui/Subheader.astro'
+import Avatar from '@ui/Avatar.astro'
+import Progress from '@ui/Progress.astro'
+
+const variants = [
+  { name: 'rainbow', accentColor: 'pink', label: 'Palettes', icon: 'palette', value: '24', progress: 80 },
+  { name: 'ocean', accentColor: 'azure', label: 'Revenue', icon: 'droplet', value: '$12.4k', progress: 62 },
+  { name: 'sun', accentColor: 'orange', label: 'Temperature', icon: 'sun', value: '32°C', progress: 74 },
+  { name: 'snow', accentColor: 'cyan', label: 'Temperature', icon: 'snowflake', value: '-4°C', progress: 18 },
+  { name: 'gold', accentColor: 'yellow', label: 'Rank', icon: 'trophy', value: '#1', progress: 96 },
+  { name: 'disco', accentColor: 'purple', label: 'Tempo', icon: 'music', value: '128 BPM', progress: 55 },
+]
+---
+
+<ScreenshotLayout title="Card gradient" columns={2}>
+  <div class="row row-cards">
+    {
+      variants.map((variant) => (
+        <div class="col-6">
+          <div class={`card card-gradient card-gradient-${variant.name}`}>
+            <div class="card-body">
+              <div class="row g-3 align-items-center">
+                <div class="col">
+                  <Subheader as="h4" class="mb-1">
+                    {variant.label}
+                  </Subheader>
+                  <div class="h3 m-0">{variant.value}</div>
+                </div>
+                <div class="col-auto">
+                  <Avatar icon={variant.icon} color={variant.accentColor} />
+                </div>
+                <div class="col-12">
+                  <Progress value={variant.progress} color={variant.accentColor} size="sm" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      ))
+    }
+  </div>
+</ScreenshotLayout>

screenshots/pages/flags-list.astro

@@ -0,0 +1,20 @@
+---
+import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
+import allFlags from '@data/flags.json'
+
+// 12 most popular countries, by population/economy/recognizability.
+const popularCodes = ['us', 'gb', 'de', 'fr', 'cn', 'jp', 'in', 'br', 'ca', 'au', 'pl', 'es']
+const flags = popularCodes.map((code) => allFlags.find((country) => country.flag === code)).filter((country) => country !== undefined)
+---
+
+<ScreenshotLayout title="Flags list" columns={2} cssPlugins={['flags']} zoom={1.5}>
+  <div class="d-grid gap-4" style="grid-template-columns: repeat(4, auto); justify-content: center; align-items: center;">
+    {
+      flags.map((country) => (
+        <span title={country.name}>
+          <span class={`flag flag-country-${country.flag}`} />
+        </span>
+      ))
+    }
+  </div>
+</ScreenshotLayout>

screenshots/pages/payments-list.astro

@@ -0,0 +1,21 @@
+---
+import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
+import Payment from '@ui/Payment.astro'
+import allPayments from '@data/payments.json'
+
+// 12 most globally recognized payment providers.
+const popularLogos = ['visa', 'mastercard', 'paypal', 'applepay', 'google-pay', 'stripe', 'americanexpress', 'klarna', 'amazon-pay', 'samsung-pay', 'unionpay', 'alipay']
+const payments = popularLogos.map((logo) => allPayments.find((item) => item.logo === logo)).filter((item) => item !== undefined)
+---
+
+<ScreenshotLayout title="Payments list" columns={2} cssPlugins={['payments']} zoom={1.5}>
+  <div class="d-grid gap-4" style="grid-template-columns: repeat(4, auto); justify-content: center; align-items: center;">
+    {
+      payments.map((item) => (
+        <span title={item.name}>
+          <Payment payment={item.logo} dark={true} />
+        </span>
+      ))
+    }
+  </div>
+</ScreenshotLayout>

screenshots/pages/social-icons.astro

@@ -0,0 +1,23 @@
+---
+// .social-app-{file} icon classes come from the "socials" core CSS plugin
+// (tabler-socials.css) — not bundled in the base tabler.css, hence cssPlugins.
+// The grid itself is built from scratch here (not preview's .demo-icons-list)
+// since that class lives in preview/scss/demo.scss, which this app never loads.
+import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
+import Card from '@ui/Card.astro'
+import CardHeader from '@ui/CardHeader.astro'
+import CardBody from '@ui/CardBody.astro'
+import socials from '@data/socials.json'
+---
+
+<ScreenshotLayout title="List of all social media icons" columns={2} cssPlugins={['socials']} zoom={1.25}>
+  <div class="d-flex flex-wrap gap-4 justify-content-center align-items-center">
+    {
+      socials.map((item) => (
+        <span title={item.name}>
+          <span class={`social social-app-${item.file}`} />
+        </span>
+      ))
+    }
+  </div>
+</ScreenshotLayout>

screenshots/pages/social-referrals.astro

@@ -0,0 +1,8 @@
+---
+import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
+import SocialReferrals from '@shared/components/cards/charts/SocialReferrals.astro'
+---
+
+<ScreenshotLayout title="Social referrals" columns={2} pageLibs={['apexcharts']}>
+  <SocialReferrals />
+</ScreenshotLayout>

screenshots/pages/vimeo-player.astro

@@ -0,0 +1,12 @@
+---
+import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
+import InlinePlayer from '@ui/InlinePlayer.astro'
+---
+
+<ScreenshotLayout title="Vimeo Player" columns={2} pageLibs={['plyr']}>
+  <div class="card">
+    <div class="card-body">
+      <InlinePlayer id="charlotte" type="vimeo" embedId={707012696} />
+    </div>
+  </div>
+</ScreenshotLayout>

shared/components/cards/AuthenticateAccount.astro

@@ -0,0 +1,72 @@
+---
+import FormFooter from '@ui/FormFooter.astro'
+import Button from '@ui/Button.astro'
+import ButtonList from '@ui/ButtonList.astro'
+import CaptureScript from '../CaptureScript.astro'
+---
+
+<form class="card card-md" action="#" method="get" autocomplete="off" novalidate>
+  <div class="card-body">
+    <h2 class="card-title card-title-lg text-center mb-4">Authenticate Your Account</h2>
+
+    <p class="my-4 text-center">
+      Please confirm your account by entering the authorization code sent to <strong>+1 856-672-8552</strong>.
+    </p>
+
+    <div class="my-5">
+      <div class="row g-4">
+        {
+          Array.from({ length: 2 }).map(() => (
+            <div class="col">
+              <div class="row g-2">
+                {Array.from({ length: 3 }).map(() => (
+                  <div class="col">
+                    <input type="text" class="form-control form-control-lg text-center px-3 py-3" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-code-input />
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))
+        }
+      </div>
+    </div>
+
+    <div class="my-4">
+      <label class="form-check">
+        <input type="checkbox" class="form-check-input" />
+        Don't ask for codes again on this device
+      </label>
+    </div>
+
+    <FormFooter>
+      <ButtonList class="flex-nowrap">
+        <Button text="Cancel" block href="#" />
+        <Button text="Verify" block color="primary" />
+      </ButtonList>
+    </FormFooter>
+  </div>
+</form>
+
+<CaptureScript>
+  <!-- BEGIN CODE INPUT SCRIPT -->
+  <script is:inline>
+    const inputs = document.querySelectorAll('[data-code-input]')
+
+    inputs.forEach((input, i) => {
+      input.addEventListener('input', (e) => {
+        const target = e.target
+        if (target.value.length === target.maxLength && i + 1 < inputs.length) {
+          inputs[i + 1].focus()
+        }
+      })
+
+      input.addEventListener('keydown', (e) => {
+        const target = e.target
+        if (target.value.length === 0 && e.key === 'Backspace' && i > 0) {
+          inputs[i - 1].focus()
+        }
+      })
+    })
+  </script>
+  <!-- END CODE INPUT SCRIPT -->
+</CaptureScript>