@dryui/ui 0.0.1

package/dist/thumbnail/image.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { Svg } from '@dryui/primitives';
+	import { applySizeVars } from './apply-size.js';
+
+	interface Props {
+		size?: 'sm' | 'md' | 'lg' | number;
+		class?: string;
+	}
+
+	let { size = 'md', class: className }: Props = $props();
+</script>
+
+<span
+	data-thumbnail
+	data-size={typeof size === 'string' ? size : undefined}
+	class={className}
+	use:applySizeVars={size}
+>
+	<Svg viewBox="0 0 120 80" aria-label="image thumbnail" width="100%" height="100%">
+		<!-- Image frame -->
+		<rect
+			x="10"
+			y="8"
+			width="100"
+			height="64"
+			rx="6"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.12"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="1.5"
+		/>
+		<!-- Sky gradient hint -->
+		<rect
+			x="10"
+			y="8"
+			width="100"
+			height="32"
+			rx="6"
+			fill="var(--dry-color-fill-brand)"
+			opacity="0.08"
+		/>
+		<!-- Mountain landscape -->
+		<polygon
+			points="18,56 38,28 55,44 70,22 92,56"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.3"
+		/>
+		<!-- Ground -->
+		<rect x="10" y="56" width="100" height="16" fill="var(--dry-color-text-weak)" opacity="0.15" />
+		<!-- Sun circle -->
+		<circle cx="86" cy="22" r="8" fill="var(--dry-color-fill-brand)" opacity="0.3" />
+	</Svg>
+</span>
+
+<style>
+	[data-thumbnail] {
+		display: inline-grid;
+		width: var(--thumbnail-w);
+		height: var(--thumbnail-h);
+	}
+
+	[data-thumbnail][data-size='sm'] {
+		--thumbnail-w: 32px;
+		--thumbnail-h: 21px;
+	}
+	[data-thumbnail][data-size='md'] {
+		--thumbnail-w: 80px;
+		--thumbnail-h: 53px;
+	}
+	[data-thumbnail][data-size='lg'] {
+		--thumbnail-w: 160px;
+		--thumbnail-h: 107px;
+	}
+</style>

package/dist/thumbnail/image.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+	size?: 'sm' | 'md' | 'lg' | number;
+	class?: string;
+}
+declare const Image: import('svelte').Component<Props, {}, ''>;
+type Image = ReturnType<typeof Image>;
+export default Image;

package/dist/thumbnail/index.d.ts

@@ -0,0 +1,12 @@
+import type { Component, Snippet } from 'svelte';
+import ThumbnailRoot from './root.svelte';
+export interface ThumbnailProps {
+	name?: string;
+	size?: 'sm' | 'md' | 'lg' | number;
+	class?: string;
+	children?: Snippet;
+}
+export declare const thumbnailMap: Record<string, Component<any>>;
+export declare const Thumbnail: typeof ThumbnailRoot & {
+	Root: typeof ThumbnailRoot;
+};

package/dist/thumbnail/index.js

@@ -0,0 +1,359 @@
+import ThumbnailRoot from './root.svelte';
+import ThumbnailAccordion from './accordion.svelte';
+import ThumbnailAddOnSelector from './add-on-selector.svelte';
+import ThumbnailAlert from './alert.svelte';
+import ThumbnailAlertDialog from './alert-dialog.svelte';
+import ThumbnailAmenityGrid from './amenity-grid.svelte';
+import ThumbnailAspectRatio from './aspect-ratio.svelte';
+import ThumbnailAurora from './aurora.svelte';
+import ThumbnailAvatar from './avatar.svelte';
+import ThumbnailBackdrop from './backdrop.svelte';
+import ThumbnailBadge from './badge.svelte';
+import ThumbnailBookingConfirmation from './booking-confirmation.svelte';
+import ThumbnailBreadcrumb from './breadcrumb.svelte';
+import ThumbnailButton from './button.svelte';
+import ThumbnailButtonGroup from './button-group.svelte';
+import ThumbnailCalendar from './calendar.svelte';
+import ThumbnailCard from './card.svelte';
+import ThumbnailCarousel from './carousel.svelte';
+import ThumbnailChart from './chart.svelte';
+import ThumbnailChatThread from './chat-thread.svelte';
+import ThumbnailCheckbox from './checkbox.svelte';
+import ThumbnailChip from './chip.svelte';
+import ThumbnailChipGroup from './chip-group.svelte';
+import ThumbnailClipboard from './clipboard.svelte';
+import ThumbnailCodeBlock from './code-block.svelte';
+import ThumbnailCollapsible from './collapsible.svelte';
+import ThumbnailColorPicker from './color-picker.svelte';
+import ThumbnailCombobox from './combobox.svelte';
+import ThumbnailCommandPalette from './command-palette.svelte';
+import ThumbnailComparisonTable from './comparison-table.svelte';
+import ThumbnailContainer from './container.svelte';
+import ThumbnailContextMenu from './context-menu.svelte';
+import ThumbnailCountrySelect from './country-select.svelte';
+import ThumbnailCurrencySelector from './currency-selector.svelte';
+import ThumbnailDataGrid from './data-grid.svelte';
+import ThumbnailDateField from './date-field.svelte';
+import ThumbnailDatePicker from './date-picker.svelte';
+import ThumbnailDateRangePicker from './date-range-picker.svelte';
+import ThumbnailDateTimeInput from './date-time-input.svelte';
+import ThumbnailDescriptionList from './description-list.svelte';
+import ThumbnailDialog from './dialog.svelte';
+import ThumbnailDragAndDrop from './drag-and-drop.svelte';
+import ThumbnailDrawer from './drawer.svelte';
+import ThumbnailDropdownMenu from './dropdown-menu.svelte';
+import ThumbnailFareClassPicker from './fare-class-picker.svelte';
+import ThumbnailField from './field.svelte';
+import ThumbnailFieldset from './fieldset.svelte';
+import ThumbnailFileUpload from './file-upload.svelte';
+import ThumbnailFilterSidebar from './filter-sidebar.svelte';
+import ThumbnailFlexibleDatesGrid from './flexible-dates-grid.svelte';
+import ThumbnailFlightTimeline from './flight-timeline.svelte';
+import ThumbnailFlipCard from './flip-card.svelte';
+import ThumbnailFloatButton from './float-button.svelte';
+import ThumbnailFocusTrap from './focus-trap.svelte';
+import ThumbnailFormatBytes from './format-bytes.svelte';
+import ThumbnailFormatDate from './format-date.svelte';
+import ThumbnailFormatNumber from './format-number.svelte';
+import ThumbnailGauge from './gauge.svelte';
+import ThumbnailGuestRoomSelector from './guest-room-selector.svelte';
+import ThumbnailHeading from './heading.svelte';
+import ThumbnailHotelGallery from './hotel-gallery.svelte';
+import ThumbnailHotkey from './hotkey.svelte';
+import ThumbnailHoverCard from './hover-card.svelte';
+import ThumbnailImage from './image.svelte';
+import ThumbnailImageComparison from './image-comparison.svelte';
+import ThumbnailInfiniteScroll from './infinite-scroll.svelte';
+import ThumbnailInput from './input.svelte';
+import ThumbnailItineraryTimeline from './itinerary-timeline.svelte';
+import ThumbnailKbd from './kbd.svelte';
+import ThumbnailLabel from './label.svelte';
+import ThumbnailLayoutHeaderContentFooter from './layout-header-content-footer.svelte';
+import ThumbnailLayoutHeaderSidebarMain from './layout-header-sidebar-main.svelte';
+import ThumbnailLayoutSidebarMain from './layout-sidebar-main.svelte';
+import ThumbnailLink from './link.svelte';
+import ThumbnailLinkPreview from './link-preview.svelte';
+import ThumbnailList from './list.svelte';
+import ThumbnailListbox from './listbox.svelte';
+import ThumbnailLocationAutocomplete from './location-autocomplete.svelte';
+import ThumbnailLoyaltyPointsDisplay from './loyalty-points-display.svelte';
+import ThumbnailMap from './map.svelte';
+import ThumbnailMapListToggle from './map-list-toggle.svelte';
+import ThumbnailMarkdownRenderer from './markdown-renderer.svelte';
+import ThumbnailMarquee from './marquee.svelte';
+import ThumbnailMegaMenu from './mega-menu.svelte';
+import ThumbnailMenubar from './menubar.svelte';
+import ThumbnailMultiCitySearchForm from './multi-city-search-form.svelte';
+import ThumbnailMultiSelectCombobox from './multi-select-combobox.svelte';
+import ThumbnailNavigationMenu from './navigation-menu.svelte';
+import ThumbnailNoise from './noise.svelte';
+import ThumbnailNotificationCenter from './notification-center.svelte';
+import ThumbnailNumberInput from './number-input.svelte';
+import ThumbnailPagination from './pagination.svelte';
+import ThumbnailPassengerClassSelector from './passenger-class-selector.svelte';
+import ThumbnailPaymentCardInput from './payment-card-input.svelte';
+import ThumbnailPhoneInput from './phone-input.svelte';
+import ThumbnailPinInput from './pin-input.svelte';
+import ThumbnailPopover from './popover.svelte';
+import ThumbnailPortal from './portal.svelte';
+import ThumbnailPriceCalendar from './price-calendar.svelte';
+import ThumbnailPriceSummaryPanel from './price-summary-panel.svelte';
+import ThumbnailProgress from './progress.svelte';
+import ThumbnailProgressRing from './progress-ring.svelte';
+import ThumbnailPromoCodeInput from './promo-code-input.svelte';
+import ThumbnailPromptInput from './prompt-input.svelte';
+import ThumbnailQrCode from './qr-code.svelte';
+import ThumbnailRadioGroup from './radio-group.svelte';
+import ThumbnailRangeCalendar from './range-calendar.svelte';
+import ThumbnailRating from './rating.svelte';
+import ThumbnailRecentSearches from './recent-searches.svelte';
+import ThumbnailRelativeTime from './relative-time.svelte';
+import ThumbnailResultCardCar from './result-card-car.svelte';
+import ThumbnailResultCardFlight from './result-card-flight.svelte';
+import ThumbnailResultCardHotel from './result-card-hotel.svelte';
+import ThumbnailReveal from './reveal.svelte';
+import ThumbnailReviewCard from './review-card.svelte';
+import ThumbnailRichTextEditor from './rich-text-editor.svelte';
+import ThumbnailRoomTypePicker from './room-type-picker.svelte';
+import ThumbnailRouteMap from './route-map.svelte';
+import ThumbnailScrollArea from './scroll-area.svelte';
+import ThumbnailScrollToTop from './scroll-to-top.svelte';
+import ThumbnailSearchFormTabs from './search-form-tabs.svelte';
+import ThumbnailSeatMap from './seat-map.svelte';
+import ThumbnailSegmentedControl from './segmented-control.svelte';
+import ThumbnailSelect from './select.svelte';
+import ThumbnailSeparator from './separator.svelte';
+import ThumbnailSidebar from './sidebar.svelte';
+import ThumbnailSkeleton from './skeleton.svelte';
+import ThumbnailSlider from './slider.svelte';
+import ThumbnailSortBar from './sort-bar.svelte';
+import ThumbnailSpacer from './spacer.svelte';
+import ThumbnailSparkline from './sparkline.svelte';
+import ThumbnailSpinner from './spinner.svelte';
+import ThumbnailSplitter from './splitter.svelte';
+import ThumbnailSpotlight from './spotlight.svelte';
+import ThumbnailStepper from './stepper.svelte';
+import ThumbnailSystemMap from './system-map.svelte';
+import ThumbnailTable from './table.svelte';
+import ThumbnailTableOfContents from './table-of-contents.svelte';
+import ThumbnailTabs from './tabs.svelte';
+import ThumbnailTagsInput from './tags-input.svelte';
+import ThumbnailText from './text.svelte';
+import ThumbnailTextarea from './textarea.svelte';
+import ThumbnailTimeInput from './time-input.svelte';
+import ThumbnailTimeline from './timeline.svelte';
+import ThumbnailToast from './toast.svelte';
+import ThumbnailToggle from './toggle.svelte';
+import ThumbnailToggleGroup from './toggle-group.svelte';
+import ThumbnailToolbar from './toolbar.svelte';
+import ThumbnailTooltip from './tooltip.svelte';
+import ThumbnailTour from './tour.svelte';
+import ThumbnailTransfer from './transfer.svelte';
+import ThumbnailTree from './tree.svelte';
+import ThumbnailTripCard from './trip-card.svelte';
+import ThumbnailTrustBadges from './trust-badges.svelte';
+import ThumbnailTypingIndicator from './typing-indicator.svelte';
+import ThumbnailTypography from './typography.svelte';
+import ThumbnailVideoEmbed from './video-embed.svelte';
+import ThumbnailVirtualList from './virtual-list.svelte';
+import ThumbnailVisuallyHidden from './visually-hidden.svelte';
+import ThumbnailChromaticShift from './chromatic-shift.svelte';
+import ThumbnailDisplacement from './displacement.svelte';
+import ThumbnailGradientMesh from './gradient-mesh.svelte';
+import ThumbnailGlow from './glow.svelte';
+import ThumbnailHalftone from './halftone.svelte';
+import ThumbnailIcon from './icon.svelte';
+import ThumbnailMaskReveal from './mask-reveal.svelte';
+import ThumbnailShaderCanvas from './shader-canvas.svelte';
+import ThumbnailSvg from './svg.svelte';
+import ThumbnailFileSelect from './file-select.svelte';
+import ThumbnailAffixGroup from './affix-group.svelte';
+import ThumbnailSelectableTileGroup from './selectable-tile-group.svelte';
+import ThumbnailInputGroup from './input-group.svelte';
+import ThumbnailOptionSwatchGroup from './option-swatch-group.svelte';
+import ThumbnailPromoMosaic from './promo-mosaic.svelte';
+import ThumbnailCommerceHeader from './commerce-header.svelte';
+import ThumbnailDropZone from './drop-zone.svelte';
+import ThumbnailAlphaSlider from './alpha-slider.svelte';
+// Thumbnail lookup map for dynamic name resolution
+export const thumbnailMap = {
+    Accordion: ThumbnailAccordion,
+    AddOnSelector: ThumbnailAddOnSelector,
+    Alert: ThumbnailAlert,
+    AlertDialog: ThumbnailAlertDialog,
+    AmenityGrid: ThumbnailAmenityGrid,
+    AspectRatio: ThumbnailAspectRatio,
+    Aurora: ThumbnailAurora,
+    Avatar: ThumbnailAvatar,
+    Backdrop: ThumbnailBackdrop,
+    Badge: ThumbnailBadge,
+    BookingConfirmation: ThumbnailBookingConfirmation,
+    Breadcrumb: ThumbnailBreadcrumb,
+    Button: ThumbnailButton,
+    ButtonGroup: ThumbnailButtonGroup,
+    Calendar: ThumbnailCalendar,
+    Card: ThumbnailCard,
+    Carousel: ThumbnailCarousel,
+    Chart: ThumbnailChart,
+    ChatThread: ThumbnailChatThread,
+    Checkbox: ThumbnailCheckbox,
+    Chip: ThumbnailChip,
+    ChipGroup: ThumbnailChipGroup,
+    Clipboard: ThumbnailClipboard,
+    CodeBlock: ThumbnailCodeBlock,
+    Collapsible: ThumbnailCollapsible,
+    ColorPicker: ThumbnailColorPicker,
+    Combobox: ThumbnailCombobox,
+    CommandPalette: ThumbnailCommandPalette,
+    ComparisonTable: ThumbnailComparisonTable,
+    Container: ThumbnailContainer,
+    ContextMenu: ThumbnailContextMenu,
+    CountrySelect: ThumbnailCountrySelect,
+    CurrencySelector: ThumbnailCurrencySelector,
+    DataGrid: ThumbnailDataGrid,
+    DateField: ThumbnailDateField,
+    DatePicker: ThumbnailDatePicker,
+    DateRangePicker: ThumbnailDateRangePicker,
+    DateTimeInput: ThumbnailDateTimeInput,
+    DescriptionList: ThumbnailDescriptionList,
+    Dialog: ThumbnailDialog,
+    DragAndDrop: ThumbnailDragAndDrop,
+    Drawer: ThumbnailDrawer,
+    DropdownMenu: ThumbnailDropdownMenu,
+    FareClassPicker: ThumbnailFareClassPicker,
+    Field: ThumbnailField,
+    Fieldset: ThumbnailFieldset,
+    FileUpload: ThumbnailFileUpload,
+    FilterSidebar: ThumbnailFilterSidebar,
+    FlexibleDatesGrid: ThumbnailFlexibleDatesGrid,
+    FlightTimeline: ThumbnailFlightTimeline,
+    FlipCard: ThumbnailFlipCard,
+    FloatButton: ThumbnailFloatButton,
+    FocusTrap: ThumbnailFocusTrap,
+    FormatBytes: ThumbnailFormatBytes,
+    FormatDate: ThumbnailFormatDate,
+    FormatNumber: ThumbnailFormatNumber,
+    Gauge: ThumbnailGauge,
+    GuestRoomSelector: ThumbnailGuestRoomSelector,
+    Heading: ThumbnailHeading,
+    HotelGallery: ThumbnailHotelGallery,
+    Hotkey: ThumbnailHotkey,
+    HoverCard: ThumbnailHoverCard,
+    Image: ThumbnailImage,
+    ImageComparison: ThumbnailImageComparison,
+    InfiniteScroll: ThumbnailInfiniteScroll,
+    Input: ThumbnailInput,
+    ItineraryTimeline: ThumbnailItineraryTimeline,
+    Kbd: ThumbnailKbd,
+    Label: ThumbnailLabel,
+    LayoutHeaderContentFooter: ThumbnailLayoutHeaderContentFooter,
+    LayoutHeaderSidebarMain: ThumbnailLayoutHeaderSidebarMain,
+    LayoutSidebarMain: ThumbnailLayoutSidebarMain,
+    Link: ThumbnailLink,
+    LinkPreview: ThumbnailLinkPreview,
+    List: ThumbnailList,
+    Listbox: ThumbnailListbox,
+    LocationAutocomplete: ThumbnailLocationAutocomplete,
+    LoyaltyPointsDisplay: ThumbnailLoyaltyPointsDisplay,
+    Map: ThumbnailMap,
+    MapListToggle: ThumbnailMapListToggle,
+    MarkdownRenderer: ThumbnailMarkdownRenderer,
+    Marquee: ThumbnailMarquee,
+    MegaMenu: ThumbnailMegaMenu,
+    Menubar: ThumbnailMenubar,
+    MultiCitySearchForm: ThumbnailMultiCitySearchForm,
+    MultiSelectCombobox: ThumbnailMultiSelectCombobox,
+    NavigationMenu: ThumbnailNavigationMenu,
+    Noise: ThumbnailNoise,
+    NotificationCenter: ThumbnailNotificationCenter,
+    NumberInput: ThumbnailNumberInput,
+    Pagination: ThumbnailPagination,
+    PassengerClassSelector: ThumbnailPassengerClassSelector,
+    PaymentCardInput: ThumbnailPaymentCardInput,
+    PhoneInput: ThumbnailPhoneInput,
+    PinInput: ThumbnailPinInput,
+    Popover: ThumbnailPopover,
+    Portal: ThumbnailPortal,
+    PriceCalendar: ThumbnailPriceCalendar,
+    PriceSummaryPanel: ThumbnailPriceSummaryPanel,
+    Progress: ThumbnailProgress,
+    ProgressRing: ThumbnailProgressRing,
+    PromoCodeInput: ThumbnailPromoCodeInput,
+    PromptInput: ThumbnailPromptInput,
+    QrCode: ThumbnailQrCode,
+    RadioGroup: ThumbnailRadioGroup,
+    RangeCalendar: ThumbnailRangeCalendar,
+    Rating: ThumbnailRating,
+    RecentSearches: ThumbnailRecentSearches,
+    RelativeTime: ThumbnailRelativeTime,
+    ResultCardCar: ThumbnailResultCardCar,
+    ResultCardFlight: ThumbnailResultCardFlight,
+    ResultCardHotel: ThumbnailResultCardHotel,
+    Reveal: ThumbnailReveal,
+    ReviewCard: ThumbnailReviewCard,
+    RichTextEditor: ThumbnailRichTextEditor,
+    RoomTypePicker: ThumbnailRoomTypePicker,
+    RouteMap: ThumbnailRouteMap,
+    ScrollArea: ThumbnailScrollArea,
+    ScrollToTop: ThumbnailScrollToTop,
+    SearchFormTabs: ThumbnailSearchFormTabs,
+    SeatMap: ThumbnailSeatMap,
+    SegmentedControl: ThumbnailSegmentedControl,
+    Select: ThumbnailSelect,
+    Separator: ThumbnailSeparator,
+    Sidebar: ThumbnailSidebar,
+    Skeleton: ThumbnailSkeleton,
+    Slider: ThumbnailSlider,
+    SortBar: ThumbnailSortBar,
+    Spacer: ThumbnailSpacer,
+    Sparkline: ThumbnailSparkline,
+    Spinner: ThumbnailSpinner,
+    Splitter: ThumbnailSplitter,
+    Spotlight: ThumbnailSpotlight,
+    Stepper: ThumbnailStepper,
+    Table: ThumbnailTable,
+    TableOfContents: ThumbnailTableOfContents,
+    Tabs: ThumbnailTabs,
+    TagsInput: ThumbnailTagsInput,
+    Text: ThumbnailText,
+    Textarea: ThumbnailTextarea,
+    TimeInput: ThumbnailTimeInput,
+    Timeline: ThumbnailTimeline,
+    Toast: ThumbnailToast,
+    Toggle: ThumbnailToggle,
+    ToggleGroup: ThumbnailToggleGroup,
+    Toolbar: ThumbnailToolbar,
+    Tooltip: ThumbnailTooltip,
+    Tour: ThumbnailTour,
+    Transfer: ThumbnailTransfer,
+    Tree: ThumbnailTree,
+    TripCard: ThumbnailTripCard,
+    TrustBadges: ThumbnailTrustBadges,
+    TypingIndicator: ThumbnailTypingIndicator,
+    Typography: ThumbnailTypography,
+    SystemMap: ThumbnailSystemMap,
+    VideoEmbed: ThumbnailVideoEmbed,
+    VirtualList: ThumbnailVirtualList,
+    VisuallyHidden: ThumbnailVisuallyHidden,
+    ChromaticShift: ThumbnailChromaticShift,
+    Displacement: ThumbnailDisplacement,
+    GradientMesh: ThumbnailGradientMesh,
+    Glow: ThumbnailGlow,
+    Halftone: ThumbnailHalftone,
+    Icon: ThumbnailIcon,
+    MaskReveal: ThumbnailMaskReveal,
+    ShaderCanvas: ThumbnailShaderCanvas,
+    Svg: ThumbnailSvg,
+    FileSelect: ThumbnailFileSelect,
+    AffixGroup: ThumbnailAffixGroup,
+    SelectableTileGroup: ThumbnailSelectableTileGroup,
+    InputGroup: ThumbnailInputGroup,
+    OptionSwatchGroup: ThumbnailOptionSwatchGroup,
+    PromoMosaic: ThumbnailPromoMosaic,
+    CommerceHeader: ThumbnailCommerceHeader,
+    DropZone: ThumbnailDropZone,
+    AlphaSlider: ThumbnailAlphaSlider
+};
+export const Thumbnail = Object.assign(ThumbnailRoot, {
+    Root: ThumbnailRoot
+});

package/dist/thumbnail/infinite-scroll.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+	import { Svg } from '@dryui/primitives';
+	import { applySizeVars } from './apply-size.js';
+
+	interface Props {
+		size?: 'sm' | 'md' | 'lg' | number;
+		class?: string;
+	}
+
+	let { size = 'md', class: className }: Props = $props();
+</script>
+
+<span
+	data-thumbnail
+	data-size={typeof size === 'string' ? size : undefined}
+	class={className}
+	use:applySizeVars={size}
+>
+	<Svg viewBox="0 0 120 80" aria-label="infinite-scroll thumbnail" width="100%" height="100%">
+		<!-- Content rows -->
+		<rect
+			x="10"
+			y="6"
+			width="100"
+			height="13"
+			rx="3"
+			fill="var(--dry-color-bg-raised)"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="1"
+		/>
+		<rect
+			x="18"
+			y="11"
+			width="52"
+			height="3"
+			rx="1.5"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.6"
+		/>
+
+		<rect
+			x="10"
+			y="23"
+			width="100"
+			height="13"
+			rx="3"
+			fill="var(--dry-color-bg-raised)"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="1"
+		/>
+		<rect
+			x="18"
+			y="28"
+			width="40"
+			height="3"
+			rx="1.5"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.6"
+		/>
+
+		<rect
+			x="10"
+			y="40"
+			width="100"
+			height="13"
+			rx="3"
+			fill="var(--dry-color-bg-raised)"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="1"
+		/>
+		<rect
+			x="18"
+			y="45"
+			width="60"
+			height="3"
+			rx="1.5"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.6"
+		/>
+
+		<!-- Faded row -->
+		<rect
+			x="10"
+			y="57"
+			width="100"
+			height="13"
+			rx="3"
+			fill="var(--dry-color-bg-raised)"
+			stroke="var(--dry-color-stroke-weak)"
+			stroke-width="1"
+			opacity="0.4"
+		/>
+		<rect
+			x="18"
+			y="62"
+			width="44"
+			height="3"
+			rx="1.5"
+			fill="var(--dry-color-text-weak)"
+			opacity="0.25"
+		/>
+
+		<!-- Loading dots -->
+		<circle cx="52" cy="76" r="2.5" fill="var(--dry-color-fill-brand)" opacity="0.9" />
+		<circle cx="60" cy="76" r="2.5" fill="var(--dry-color-fill-brand)" opacity="0.55" />
+		<circle cx="68" cy="76" r="2.5" fill="var(--dry-color-fill-brand)" opacity="0.3" />
+	</Svg>
+</span>
+
+<style>
+	[data-thumbnail] {
+		display: inline-grid;
+		width: var(--thumbnail-w);
+		height: var(--thumbnail-h);
+	}
+
+	[data-thumbnail][data-size='sm'] {
+		--thumbnail-w: 32px;
+		--thumbnail-h: 21px;
+	}
+	[data-thumbnail][data-size='md'] {
+		--thumbnail-w: 80px;
+		--thumbnail-h: 53px;
+	}
+	[data-thumbnail][data-size='lg'] {
+		--thumbnail-w: 160px;
+		--thumbnail-h: 107px;
+	}
+</style>

package/dist/thumbnail/infinite-scroll.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+	size?: 'sm' | 'md' | 'lg' | number;
+	class?: string;
+}
+declare const InfiniteScroll: import('svelte').Component<Props, {}, ''>;
+type InfiniteScroll = ReturnType<typeof InfiniteScroll>;
+export default InfiniteScroll;

package/dist/thumbnail/input-group.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { Svg } from '@dryui/primitives';
+	import { applySizeVars } from './apply-size.js';
+
+	interface Props {
+		size?: 'sm' | 'md' | 'lg' | number;
+		class?: string;
+	}
+
+	let { size = 'md', class: className }: Props = $props();
+</script>
+
+<span
+	data-thumbnail
+	data-size={typeof size === 'string' ? size : undefined}
+	class={className}
+	use:applySizeVars={size}
+>
+	<Svg viewBox="0 0 120 80" aria-label="InputGroup thumbnail" width="100%" height="100%">
+		<rect
+			x="5"
+			y="5"
+			width="110"
+			height="70"
+			rx="8"
+			fill="var(--dry-color-surface)"
+			stroke="var(--dry-color-border)"
+			stroke-width="1"
+		/>
+		<text x="60" y="44" text-anchor="middle" font-size="10" fill="var(--dry-color-muted)">
+			InputGroup
+		</text>
+	</Svg>
+</span>
+
+<style>
+	[data-thumbnail] {
+		display: inline-grid;
+		width: var(--thumbnail-w);
+		height: var(--thumbnail-h);
+	}
+
+	[data-thumbnail][data-size='sm'] {
+		--thumbnail-w: 32px;
+		--thumbnail-h: 21px;
+	}
+	[data-thumbnail][data-size='md'] {
+		--thumbnail-w: 80px;
+		--thumbnail-h: 53px;
+	}
+	[data-thumbnail][data-size='lg'] {
+		--thumbnail-w: 160px;
+		--thumbnail-h: 107px;
+	}
+</style>

package/dist/thumbnail/input-group.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+	size?: 'sm' | 'md' | 'lg' | number;
+	class?: string;
+}
+declare const InputGroup: import('svelte').Component<Props, {}, ''>;
+type InputGroup = ReturnType<typeof InputGroup>;
+export default InputGroup;