# Fieldbook Original interface components with interactive React previews and framework versions. Published by Lizardi Studio: https://www.lizardi.mx/#org The preview, name, description, category and prop names are public. Member source code, prop configuration, installation and framework files require authorization. Component names, identifiers and code do not change with the interface language. ## Documentation - https://fieldbook.lizardi.mx/docs - https://fieldbook.lizardi.mx/docs/agents - https://fieldbook.lizardi.mx/docs/mcp - https://fieldbook.lizardi.mx/docs/security ## Machine endpoints - MCP: https://fieldbook.lizardi.mx/api/mcp (authorized bearer token) - Public catalog summaries: https://fieldbook.lizardi.mx/index/components.json - Registry: https://fieldbook.lizardi.mx/r//.json (member items require authorization) - Full public digest: https://fieldbook.lizardi.mx/llms-full.txt ## EN - https://fieldbook.lizardi.mx/ - https://fieldbook.lizardi.mx/components - https://fieldbook.lizardi.mx/blog ### Account Dropdown Menu https://fieldbook.lizardi.mx/components/account-dropdown-menu An avatar trigger that opens a grouped account menu with keyboard shortcut hints, a theme submenu, and a destructive sign-out row styled apart from the rest. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, showShortcuts, theme ### Account Menu Flyout https://fieldbook.lizardi.mx/components/account-menu-flyout A profile summary button that opens into an account menu of labeled rows, with a small curved indicator line that straightens when the menu is open. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: name, plan, align, accent ### Account signup https://fieldbook.lizardi.mx/components/account-signup-page A centered signup page with an email field, a primary create-account button, a divider, and two secondary continue-with buttons for alternate identity providers. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: brandName, accentColor, showProviders, providerCount ### Activity cell heatmap https://fieldbook.lizardi.mx/components/activity-cell-heatmap A calendar grid of small tinted squares that sweeps in on a diagonal wave and lets a level strip isolate one intensity at a time. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, weeks, gap, cornerRadius, weekStart, interactive ### Add Then Confirm Chip https://fieldbook.lizardi.mx/components/add-then-confirm-chip A dark chip with a warm label whose plus rocks side to side on hover, then rotates into a tick and reports the item added. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, addedLabel, accent, rockDegrees, added ### Addon Input Group https://fieldbook.lizardi.mx/components/addon-input-group A text field wrapped in one bordered shell that can carry a leading icon, a trailing button or text, and shares one focus ring across the whole group. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, trailingLabel, accentColor, showLeadingIcon ### Adjacent hover menubar https://fieldbook.lizardi.mx/components/adjacent-hover-menubar A desktop-style menu bar where clicking one menu opens it, and once open, hovering any adjacent menu switches straight to that one without an extra click. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: menuLabels, accent ### Amber upload pill https://fieldbook.lizardi.mx/components/amber-upload-pill A warm gradient upload pill with a bright rim that widens its coloured cast and lights the label from behind on hover. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, castSpread, showGlyph, size ### Anaglyph wobble button https://fieldbook.lizardi.mx/components/anaglyph-wobble-button A button that hangs in a slow 3D swing and, when hovered or focused, throws warm and cool duplicates of itself out of register with an overshooting wobble. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, coolColor, swingAngle, offsetDistance, autoSwing ### Analytics console page https://fieldbook.lizardi.mx/components/analytics-console-page A full analytics console: collapsible nav rail, four metric cards, a stacked area chart with a range switch, and a sortable, drag reorderable work item table. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, railOpen, range, rows, showTable ### Anchored detail popover https://fieldbook.lizardi.mx/components/anchored-detail-popover A trigger button that opens a small anchored panel holding a titled settings form, growing out of the trigger's edge and closing on Escape or an outside click. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, align, offset, width, accent ### Anchored info popover https://fieldbook.lizardi.mx/components/anchored-info-popover A trigger button that opens a small floating info panel anchored to one of its edges, fading and scaling in from that edge and dismissing on outside click or Escape. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: anchorSide, accentColor, showBackdrop, gap ### Anchored popover card https://fieldbook.lizardi.mx/components/anchored-popover-card A trigger button that opens a small settings card anchored to itself, scaling in from the edge it grows out of and closing on a second click, Escape, or a press outside. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: anchor, gap, accent, triggerLabel ### Anchored settings popover https://fieldbook.lizardi.mx/components/anchored-settings-popover A button that opens a small settings panel anchored beside it, growing from the corner nearest its trigger and flipping sides when space runs out. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, align, offset, accentColor, modal ### Anchored site preview https://fieldbook.lizardi.mx/components/anchored-site-preview A hover preview whose side, alignment and offset can be dialled in, with a pointing arrow that tracks the anchor and flips with it when there is no room. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, align, offset, showArrow, accent ### Android device frame https://fieldbook.lizardi.mx/components/android-device-frame A vector Android phone bezel that frames a photo or looping video inside its screen with correctly rounded corners. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: bezelTone, screenContent, accentColor ### Animated metric counter https://fieldbook.lizardi.mx/components/animated-metric-counter A large bare numeral that springs up from a starting value to its target the moment it scrolls into view, overshooting slightly before it settles, with thousands separators and an optional suffix. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: target, startValue, decimals, suffix, accent ### Animated Time Axis https://fieldbook.lizardi.mx/components/animated-time-axis A row of date labels beneath a line chart that auto-picks an evenly spaced subset to avoid crowding, and fades labels near the hovered point. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: numTicks, fadeNearCursor, accent ### Animated Value Axis https://fieldbook.lizardi.mx/components/animated-value-axis A column of value labels beside a chart that abbreviates large numbers and glides smoothly to new positions whenever the chart's data range changes. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: numTicks, formatLargeNumbers, highlightColor ### Annotated anatomy button https://fieldbook.lizardi.mx/components/annotated-anatomy-button A button that explains itself: hovering pops out measurement marks and leader lines naming its padding, fill, corner radius and icon slot. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, fill, paddingX, radius, pinned ### Answer call circle https://fieldbook.lizardi.mx/components/answer-call-circle-button A round icon-only accept button with a handset glyph, a slow outward ring while a call waits, and a soft press dip. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, ringing, ringSpeed ### App folder expand https://fieldbook.lizardi.mx/components/app-folder-expand A home screen style folder tile whose small app icons grow into a full panel, each icon traveling from its miniature to its large spot. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: title, appCount, accent, bounce, closeOnBackdrop ### App Menubar https://fieldbook.lizardi.mx/components/app-menubar A desktop-style horizontal menu bar where clicking a top-level label opens its dropdown, and once one is open, hovering across the other labels switches directly to their menus without an extra click. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, menuCount, showShortcuts ### Appointment Range Card https://fieldbook.lizardi.mx/components/appointment-range-card A card that pairs a single-month date grid with a start-time and end-time field below it, for picking one day plus a time window in one compact block. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, startTime, endTime, showIcons ### Appointment Scheduler Card https://fieldbook.lizardi.mx/components/appointment-scheduler-card A single date picker framed inside a titled card with a jump to today button in the corner, styled for booking one appointment. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, title, subtitle, startMonth ### Arcade dome button https://fieldbook.lizardi.mx/components/arcade-dome-button A round pushbutton whose domed cap floats above a darker base and seats flush with a visible drop when pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, size, travel, haloWidth ### Arcade plate button https://fieldbook.lizardi.mx/components/arcade-plate-button A wide game-menu button with a grey outlined plate, an inset dark bevel and stamped lettering that brightens on hover and darkens while held down. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, plate, ink, bevel, width ### Area chart lite https://fieldbook.lizardi.mx/components/area-chart-lite A responsive SVG area chart with round axis ticks, a gradient fill, a crosshair that reads the sample under the pointer, and a draw-on wipe. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: color, curve, grid ### ARIA Tablist Resize https://fieldbook.lizardi.mx/components/aria-tablist-resize A fully accessible roving-tabindex tab list with a gliding pill highlight, where the panel frame smoothly resizes to whichever tab's content is showing. Frameworks: react, svelte, astro, html Access: member Public prop names: resizeMode, tabOneLabel, tabTwoLabel, accent ### Arrow chip button https://fieldbook.lizardi.mx/components/arrow-chip-button A rounded action button with a glowing arrow chip docked in its right end that lifts off the page on hover with a hard offset shadow and sinks on press. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, radius, chipGlow, offset ### Arrow relay badge pill https://fieldbook.lizardi.mx/components/arrow-relay-badge-pill A pill button with a round left badge whose arrow exits through the top corner on hover while a fresh one arrives from below and the body eases to near-black. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, hoverBody, relayMs, badgeSize ### Arrow to label pill https://fieldbook.lizardi.mx/components/arrow-to-label-pill A round chevron button that stretches into a wide labeled pill on hover, trading the mark for a word as the flat fill becomes a two-stop ramp. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, partner, label, expandedWidth, duration ### Arrow wipe button https://fieldbook.lizardi.mx/components/arrow-wipe-button A pill button whose accent plate, cut into an arrowhead, sweeps in from the left on hover and inverts the label letter by letter as its point crosses. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, point, duration, radius ### Arrow wipe call to action https://fieldbook.lizardi.mx/components/arrow-wipe-cta A call to action whose darker plate wipes in from the left on hover while a tucked arrow slides out to meet the label, and pushes down a pixel when clicked. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, wipeMs, showArrow, radius ### Ascii Art Heading https://fieldbook.lizardi.mx/components/ascii-art-heading A large word is rendered as a mosaic of monospaced characters whose density mimics the letterforms, gently rippling and tilting toward the pointer. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, characterSize, waveIntensity ### Assistant Ripple Glow https://fieldbook.lizardi.mx/components/assistant-ripple-glow A ring shaped ripple washes outward over a duplicate of a panel's own content while its edge lights up for as long as a task is running. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: running, accentColor, secondColor, rippleDuration, edgeSpeed, strength ### Aurora band glow https://fieldbook.lizardi.mx/components/aurora-band-glow A soft ribbon of light lying across a dark frame, its edge wandering on layered noise while the color walks along its length. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: colorA, colorB, speed, bandHeight, brightness, interactive ### Aurora curtain https://fieldbook.lizardi.mx/components/aurora-curtain A soft curtain of light hanging from the top edge, its lower hem rising and falling on a slow noise wave while its color shifts across the width. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: colorStart, colorEnd, amplitude, softness, speed ### Aurora glow heading https://fieldbook.lizardi.mx/components/aurora-glow-heading A headline where one word carries a slow-drifting multicolor gradient fill clipped to its letterforms, like aurora light glowing behind the type. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, highlightWord, speed, colorA ### Aurora veil https://fieldbook.lizardi.mx/components/aurora-veil A full-bleed background of three drifting ribbons of light that add up where they cross, over a dark ground, with a caption layer that stays readable. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: colorA, colorB, speed, intensity ### Auto Grow Textarea https://fieldbook.lizardi.mx/components/auto-grow-textarea A multi-line text field that grows taller as the person types more, instead of scrolling inside a fixed box. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, accent, rows ### Auto height tabs https://fieldbook.lizardi.mx/components/auto-height-tabs A tab group whose content container smoothly resizes its height to fit each panel as you switch tabs, instead of jumping or leaving empty space. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, defaultTab, animationSpeed ### Auto-Hide Nav Bar https://fieldbook.lizardi.mx/components/auto-hide-nav-bar A sticky top bar that slides up out of view as the visitor scrolls down and slides back in as soon as they scroll up. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: hideThreshold, accentColor, transitionMs, blurBackground ### Auto-Scroll Message List https://fieldbook.lizardi.mx/components/auto-scroll-message-list A scrollable chat panel that keeps itself pinned to the newest message unless the reader scrolls up, at which point a floating jump-to-latest button appears. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: height, accent ### Autosize text field https://fieldbook.lizardi.mx/components/autosize-text-field A multi-line text input that grows taller as the person types, up to a generous limit, with an accent focus ring and a disabled state. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: placeholder, rows, disabled, accentColor ### Avatar Lineup Hover https://fieldbook.lizardi.mx/components/avatar-lineup-hover A row of overlapping avatar circles where hovering one lifts it above its neighbors and reveals a name tooltip. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, overlap, accent, liftDistance, showTooltip ### Avatar profile picker https://fieldbook.lizardi.mx/components/avatar-profile-picker A profile setup card: an avatar stage whose glow ring recolors per selection, a thumbnail strip to switch avatars, and a validated username field. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, username, minLength, avatarCount ### Avatar Stack https://fieldbook.lizardi.mx/components/avatar-stack-tooltip A row of overlapping circular avatars that separates and lifts the one under the pointer, revealing a name tooltip above it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: avatarSize, overlapAmount, ringColor, invertStackOrder ### Backlight Halo https://fieldbook.lizardi.mx/components/backlight-halo Wraps artwork in a blurred, colour boosted copy of itself so the panel appears to spill its own light onto the surface behind it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: blur, saturation, haloOpacity, accentColor, drift ### Banded stripe button https://fieldbook.lizardi.mx/components/banded-stripe-button A wide button whose face is cut into hard diagonal bands stepping through values of one accent, sliding one band over on hover. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, bands, angle, slideOnHover ### Banner header dialog https://fieldbook.lizardi.mx/components/banner-header-dialog A modal window with a colored banner strip across its top edge, sitting over a dimmed and fully inert copy of the page behind it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: bannerColor, panelWidth, closeOnOverlayClick ### Bar wave matrix https://fieldbook.lizardi.mx/components/bar-wave-matrix A grid of short bars where each bar slides along its own track, and the phase offset from row to row turns the whole grid into a travelling wave. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: colorA, colorB, columns, rows, speed, orientation ### Bare Sliding Tab Strip https://fieldbook.lizardi.mx/components/bare-sliding-tab-strip An unstyled-by-default tab strip whose panels sit side by side on a filmstrip that slides sideways on switch while the frame's height eases to match. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: tabOneLabel, tabTwoLabel, accent, slideStiffness ### Before/After Code Diff https://fieldbook.lizardi.mx/components/before-after-code-diff Two code panels side by side, labeled before and after, with added and removed lines tinted and a hover focus effect. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, fontSize, showLineDiff, focusBlurOnHover ### Before/After reveal handle https://fieldbook.lizardi.mx/components/before-after-reveal-handle A draggable divider over two stacked scenes that reveals one on the left and the other on the right, moved by pointer, click to jump and arrow keys. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: position, handleColor, leftLabel, rightLabel ### Bevel Edge Panel Card https://fieldbook.lizardi.mx/components/bevel-edge-panel-card A card with a one-pixel inner bevel that makes it look pressed into the page, and a frame mode that groups stacked sub-panels. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: grouped, radius, showFooter, accent ### Bevel frame button https://fieldbook.lizardi.mx/components/bevel-frame-button A square framed button whose two ends bevel into points on hover, turning the rectangle into a six sided badge. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, tilt, thickness, duration ### Bevel press pill https://fieldbook.lizardi.mx/components/bevel-press-pill A dark bevelled pill with a recessed round chip on its end that sinks into the surface when pressed. Frameworks: react Access: open Public prop names: label, accent, travel, showChip, size ### Bevel swap button https://fieldbook.lizardi.mx/components/bevel-swap-button A pale slab whose lit and shaded border sides trade corners on hover while a fan of fading offset copies stamps out behind it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, stackCount, offsetStep, duration ### Billing Ledger Table https://fieldbook.lizardi.mx/components/billing-ledger-table An invoice ledger table with a caption above it and a footer band that totals the amount column. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: rowCount, showFooterTotal, accentColor, caption ### Binary Decode Text https://fieldbook.lizardi.mx/components/binary-decode-text Each letter briefly flickers into a glowing binary digit before decoding back into its real character, stepping across the word left to right. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, letterInterval, letterAnimationDuration, accentColor ### Birthdate popover picker https://fieldbook.lizardi.mx/components/birthdate-popover-picker A labeled button that opens a floating calendar with month and year dropdowns for quickly reaching a birth year, closing itself the moment a day is picked. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, placeholder ### Empty State Panel https://fieldbook.lizardi.mx/components/blank-slate-card A centered placeholder shown in place of an empty list, with a title, description and one or two starting actions. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: title, description, accentColor, showSecondaryAction ### Blinking grid pattern https://fieldbook.lizardi.mx/components/blinking-grid-pattern A hairline square grid where scattered cells fade up and back down, each hopping to a fresh cell when its blink ends. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: cellSize, litCells, accent, maxOpacity, duration, dashed ### Blob cap button https://fieldbook.lizardi.mx/components/blob-cap-button A capsule button with a single-hue liquid blob that swells from a resting corner mark to fill the shape on hover. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, spread, blur, growth ### Blocking alert dialog https://fieldbook.lizardi.mx/components/blocking-alert-dialog A centered dialog that demands an explicit choice before it will close, used for irreversible actions the visitor must not dismiss by accident. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: question, detail, confirmLabel, accentColor ### Blur fade reveal https://fieldbook.lizardi.mx/components/blur-fade-reveal Content that arrives out of focus and transparent, then sharpens into place the first time it scrolls into view without shifting a single pixel. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: blurAmount, duration, delay, threshold, startOpacity ### Blur in word reveal https://fieldbook.lizardi.mx/components/blur-in-word-reveal Words in a sentence resolve from a soft blur into sharp focus one after another as the sentence scrolls into view. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, direction, staggerMs, blurPx ### Blur reveal https://fieldbook.lizardi.mx/components/blur-reveal-on-view A wrapper that keeps its child out of focus and slightly offset until it first enters the viewport, then resolves the blur and closes the gap in one move. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: blur, offset, direction, stagger, accent ### Bobble tile grid https://fieldbook.lizardi.mx/components/bobble-tile-grid A grid of colored tiles that bobble away from the pointer on a spring, bouncing harder the faster the pointer swept across them. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gridSize, accent, bounce, velocityScale, showIndex ### Booked Dates Picker https://fieldbook.lizardi.mx/components/booked-dates-picker A single date picker where a run of already reserved days shows a strike through the number and cannot be selected, leaving the open days pickable as normal. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, bookedStart, bookedCount, startMonth ### Bookmark save chip https://fieldbook.lizardi.mx/components/bookmark-save-chip A compact save chip whose bookmark mark snaps from outline to filled and gives one small tug downward the moment an item is saved. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, savedLabel, accent, saved, showLabel ### Bookmark save toggle https://fieldbook.lizardi.mx/components/bookmark-save-toggle A compact save chip whose bookmark glyph fills solid and keeps a hairline border once the item is saved. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, savedLabel, accent, initialSaved, compact ### Border brighten button https://fieldbook.lizardi.mx/components/border-brighten-button A dark button whose two pixel frame is the only moving part: it climbs to white on hover and collapses into a tight inner ring while the button is held. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, borderWidth, radius, duration ### Border trace button https://fieldbook.lizardi.mx/components/border-trace-button A quiet translucent button whose four edges draw themselves in sequence on hover while a soft band of light crosses the face. Frameworks: react Access: member Public prop names: label, accent, traceMs, tracking, sweep ### Bottom sheet panel https://fieldbook.lizardi.mx/components/bottom-sheet-panel A mobile-style sheet that rises from the bottom edge with a grabber handle and can be dragged back down to dismiss. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: title, accent, dragToDismiss ### Bounce drop toggle https://fieldbook.lizardi.mx/components/bounce-drop-toggle A tall vertical toggle switch whose ball drops to the bottom with a bouncy settle when switched off and glides back up with a tight spring when switched on. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: on, accentColor, trackHeight ### Bounce warning dialog https://fieldbook.lizardi.mx/components/bounce-warning-dialog A confirmation dialog that pops in with a springy overshoot and a bouncing icon badge, demanding a response before the page below becomes usable again. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, springBounce, icon ### Bouncing dot action button https://fieldbook.lizardi.mx/components/bouncing-dot-action-button A dark accent-toned button with a small dot parked by its right edge that hops while the block brightens and casts a soft glow on hover or keyboard focus. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, dotSize, hopHeight, hopSeconds, castSpread ### Bouncing download button https://fieldbook.lizardi.mx/components/bouncing-download-button A compact dark download chip that bounces gently on its own to draw the eye, goes still the moment a pointer or keyboard focus reaches it, and swaps its arrow with a dip when pressed. Frameworks: react Access: member Public prop names: accent, bounceHeight, period, showLabel ### Bouncing Photo Fan https://fieldbook.lizardi.mx/components/bouncing-photo-fan A row of overlapping square photo tiles that pop in with an elastic overshoot, then shove each other aside when one is hovered. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, spread, stagger, pushOnHover, accent ### Bouncing sphere pit https://fieldbook.lizardi.mx/components/bouncing-sphere-pit A boxed pit of weighty spheres that fall, knock into each other and pile up, scattering whenever the cursor wades through them. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, ballCount, gravity, bounce, maxSize, followCursor ### Bounded Stay Range Picker https://fieldbook.lizardi.mx/components/bounded-stay-range-picker A two month range picker that enforces both a minimum and a maximum number of nights, so only end dates inside that window stay pickable once a start is set. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, minNights, maxNights, startMonth ### Bracket lock cursor https://fieldbook.lizardi.mx/components/bracket-lock-cursor A custom pointer of four corner brackets that spins while idle and snaps open around any element marked as a target. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: spinDuration, accent, lockColor, cornerSize, hideNativeCursor ### Branching bolt https://fieldbook.lizardi.mx/components/branching-bolt A jagged bolt walks down the frame with short forks dying off its sides, flares white on the strike, then fades to an afterimage. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: boltColor, strikeInterval, intensity, thickness, branching, clickToStrike ### Branded Code Panel https://fieldbook.lizardi.mx/components/branded-code-panel A centred verification panel under a small brand lockup, where a rejected code shakes the row once, clears it and hands focus back to the first box. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, length, brandName, shakeOnError, title ### Breathing CTA pill https://fieldbook.lizardi.mx/components/breathing-cta-pill A round-ended call to action that swells on hover and settles into a slow breathing pulse of scale and brightness until the pointer leaves or the button is pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, hoverScale, pulseSeconds, pulse ### Breathing dot loader https://fieldbook.lizardi.mx/components/breathing-dot-loader Dots that stay put and breathe instead of moving, swelling and dimming in turn so the row reads as a slow heartbeat. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: dotCount, dotSize, peakScale, cycleSeconds, accent ### Breathing transport toggle https://fieldbook.lizardi.mx/components/breathing-transport-toggle A tinted playback chip that swaps between play and pause on click, its glyph breathing while the pointer rests on it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, playing, breathSpeed, tint ### Brightening gradient button https://fieldbook.lizardi.mx/components/brightening-gradient-button A deep two-tone chip whose vertical wash climbs to a much brighter pair of the same family on hover, with a fixed glass highlight along its top edge. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, baseColor, hoverColor, radius, shiftMs ### Browser window frame https://fieldbook.lizardi.mx/components/browser-window-frame A desktop browser window mockup with traffic-light dots and an address bar that frames a screenshot or looping video as its page content. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: url, screenContent, simpleMode ### Brushed metal knob https://fieldbook.lizardi.mx/components/brushed-metal-knob-button A round machined dial with a brushed radial finish and an engraved label that slowly turns a quarter revolution while hovered. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, size, turn, spinSeconds, accent, grooves ### Brushed Metal Pass https://fieldbook.lizardi.mx/components/brushed-metal-pass An access-pass card whose brushed metal face carries a specular band that swings with the pointer, over a rippled noise surface and a fine grain. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: sheen, grain, ripple, accent, holder ### Bubble burst menu https://fieldbook.lizardi.mx/components/bubble-burst-menu A floating logo pill and toggle that expand into a full screen overlay of oversized pill links, each bursting into place with a springy stagger. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: staggerDelay, linkCount, menuBackground ### Bulging dot field https://fieldbook.lizardi.mx/components/bulging-dot-field A fine grid of dots that swells outward under the cursor like fabric pushed from behind, springing back with one soft overshoot the moment the pointer moves on. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, dotSpacing, dotRadius, cursorRadius, bulgeStrength, halo ### Bulk action toolbar https://fieldbook.lizardi.mx/components/bulk-action-toolbar A floating toolbar for stepping through a queue of records one at a time, with icon actions that reveal their label on hover and a primary button that confirms the destination. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: current, total, destination, accent ### Burst particle emitter https://fieldbook.lizardi.mx/components/burst-particle-emitter Wraps any element and fires a staggered fan of small specks from a chosen edge, on click, on a loop, or the first time it scrolls into view. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, radius, spread, duration, accent, side ### Button set https://fieldbook.lizardi.mx/components/button-set A full button family covering six intents, six sizes, icon-only shapes and a loading state that swaps in a spinner without the button changing width. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: variant, size, accent, loading, disabled, label ### Camera flash pill https://fieldbook.lizardi.mx/components/camera-flash-pill-button A solid accent pill with a camera glyph that flickers like a struggling flash tube on hover or focus, and blanks its whole face white for one short beat when pressed. Frameworks: react Access: open Public prop names: label, accent, flickerOnHover, flickerPeriod, showCounter ### Candle Price Chart https://fieldbook.lizardi.mx/components/candle-price-chart An OHLC candlestick chart with up and down colored candles, a wick per period, and a hover tooltip showing open, high, low and close. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: upColor, downColor, periodCount, showGrid ### Caption Style Date Picker https://fieldbook.lizardi.mx/components/caption-style-date-picker A single date picker paired with a select menu that swaps its header between a combined month and year dropdown, a month only dropdown, or a year only dropdown. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: captionStyle, accent, startMonth, startYear ### Captioned Like Button https://fieldbook.lizardi.mx/components/captioned-like-button An icon-only heart button that reveals a caption rising from beneath on hover or focus, and fills solid with a quick overshoot when liked. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, caption, likedCaption, size, showCount, startLiked ### Card blur tabs https://fieldbook.lizardi.mx/components/card-blur-tabs Tabs framed in a bordered card whose content briefly blurs and crossfades when you switch panels, with a sliding pill behind the active tab label. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tabOneLabel, tabTwoLabel, accent ### Card Shuffle Stack https://fieldbook.lizardi.mx/components/card-shuffle-stack A fanned stack of panels that cycles on a timer: the front panel drops away, the rest step forward, and the dropped one swings in at the back. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: stepX, stepY, delayMs, skew, motionStyle, accent ### Card Style Invoice Table https://fieldbook.lizardi.mx/components/card-style-invoice-table An invoice table rendered as one elevated card, with its first and last rows rounded to match the card shape. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, rowCount, showHeader, currency ### Card to fullscreen modal https://fieldbook.lizardi.mx/components/card-to-fullscreen-modal A list card that morphs continuously into a near-fullscreen detail panel using its own image and title, then morphs back on close. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: title, accent, morphDuration ### Caret tail link https://fieldbook.lizardi.mx/components/caret-tail-link A quiet text link with a small angle bracket riding just past its last letter, which slides outward and gains an underline on hover. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, direction, travel, underline ### Cartridge fire button https://fieldbook.lizardi.mx/components/cartridge-fire-button A novelty button shaped like a brass shell case, with a projectile tucked behind its nose that shoots out and reloads when pressed. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, shotDistance, reloadMs, recoil ### Carved Pill Button https://fieldbook.lizardi.mx/components/carved-pill-button A pill carved into a soft matte surface by opposing inner shadows, rising into a raised pad the moment it is hovered or focused. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, surface, accent, depth, radius, raiseOnHover ### Cascading Letter Reveal https://fieldbook.lizardi.mx/components/cascading-letter-reveal A headline that reveals itself letter by letter with a soft rise and fade as it enters view, then holds steady once finished. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: headline, staggerMs, durationS, splitBy, textColor ### Category dot line https://fieldbook.lizardi.mx/components/category-dot-line A single smooth curve across five named categories where each point marker is colored from a hue-rotated accent ramp, so the markers double as the legend. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, hueRange, dotRadius, strokeWidth, showGrid ### Celebration burst https://fieldbook.lizardi.mx/components/celebration-burst A canvas burst of paper flakes fired from a button, arcing out in a spread, fluttering edge on as they tumble and settling out of frame under gravity. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: count, spread, power, gravity, accent, shape ### Center bloom button https://fieldbook.lizardi.mx/components/center-bloom-button A solid rounded pill that brightens from the middle out as a pale circular wash grows past its own edges, then sinks flat when pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, bloom, duration, shadow ### Center out fill button https://fieldbook.lizardi.mx/components/center-out-fill-button An outlined uppercase button whose accent fill opens from a hairline at the center out to both edges on hover or focus. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, borderWidth, duration ### Center out underline link https://fieldbook.lizardi.mx/components/center-out-underline-link A navigation link whose underline grows outward from the middle to both ends on hover and retracts back to a point when the pointer leaves. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, thickness, offset, duration ### Centered modal frame https://fieldbook.lizardi.mx/components/centered-modal-frame A plain centered modal that fades and scales in over a dimmed backdrop, with a header, body and footer, for everyday forms and confirmations. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: title, accent, showCloseButton, width ### Centered signup card https://fieldbook.lizardi.mx/components/centered-signup-card A centered page card that collects a full name, email, password and confirmation, each field with a short helper line, plus a connected-account signup button. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, accentColor, showSocialButton ### Chameleon pill navbar https://fieldbook.lizardi.mx/components/chameleon-pill-navbar A row of nav links in one dark capsule where the active link splits into its own pill and the rest close back up around it. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: activeIndex, accent, cornerRadius ### Channel tile row https://fieldbook.lizardi.mx/components/channel-tile-row A wrapping row of square icon tiles under a small caption, where each tile crossfades to its own reserved colour on hover. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: caption, tileSize, gap, accent, perTileTint ### Character budget counter https://fieldbook.lizardi.mx/components/character-budget-counter A compose field with a remaining-characters readout that punches on a spring and warms in color as the budget runs out. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: maxLength, warnAt, accent, placeholder, punch ### Character shuffle reveal https://fieldbook.lizardi.mx/components/character-shuffle-reveal Each character rolls through a strip of random glyphs like a slot reel before landing on the real letter, revealed on scroll with hover replay. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, direction, duration, accentColor ### Shimmer Wave Text https://fieldbook.lizardi.mx/components/character-wave-shimmer A brightness wave sweeps once across a line of text, lighting each character in turn before it dims back, then pauses briefly and repeats. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: duration, label, paused, accentColor ### Charge Up Action Button https://fieldbook.lizardi.mx/components/charge-up-action-button A charcoal pill that lights into a saturated gradient key on hover, lifting off the surface while its mark turns and brightens. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, lift, halo, duration ### Chart Plot Texture https://fieldbook.lizardi.mx/components/chart-plot-texture A repeating texture panel for a chart's plot area, switching between diagonal lines, dots, and a crosshatch, faded softly at every edge. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: pattern, patternColor, opacity, scale ### Chart reference band https://fieldbook.lizardi.mx/components/chart-reference-band A shaded horizontal band drawn behind a line chart to mark a target range or threshold zone, with feathered edges and an optional dashed border. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: topValue, bottomValue, borderStyle, showMarkers, fadeEdges, accent ### Chat launcher morph https://fieldbook.lizardi.mx/components/chat-launcher-morph-button A round launcher whose speech bubble outline redraws itself into a close mark while its three dots shrink away. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, open, morphSeconds, idlePulse, strokeWidth ### Chat message thread https://fieldbook.lizardi.mx/components/chat-message-thread A short chat transcript of rounded speech bubbles, incoming messages on the left with an avatar and name, outgoing messages on the right in the accent color. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, senderName, showAvatar ### Check draw toggle https://fieldbook.lizardi.mx/components/check-draw-toggle A square checkbox whose checkmark draws itself stroke by stroke when checked, with a soft press and hover scale. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: checked, size, variant, accentColor ### Check stroke submit https://fieldbook.lizardi.mx/components/check-stroke-submit-button A compact filled submit button whose leading checkmark draws itself stroke by stroke when the action succeeds. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, confirmLabel, accent, drawMs, holdMs ### Checkable action menu https://fieldbook.lizardi.mx/components/checkable-action-menu A menu that mixes plain actions with checkbox rows and a single-choice set, popping each tick in as it turns on and gliding one dot between the choices. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, align, accent, keepOpenOnCheck, showSubmenu ### Checkbox motion lab https://fieldbook.lizardi.mx/components/checkbox-motion-lab A single oversized checkbox for tuning exactly how firmly it presses and how slowly its checkmark draws in. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: drawDuration, pressScale, cornerRadius, accentColor ### Checkmark draw checkbox https://fieldbook.lizardi.mx/components/checkmark-draw-checkbox A square checkbox that answers a check by drawing a checkmark one stroke at a time, and shows a short dash instead when its state is only partly set. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, state, accent, size ### Chevron accordion list https://fieldbook.lizardi.mx/components/chevron-accordion-list A vertical stack of question rows that each expand to reveal an answer, with a chevron that flips upside down when its row is open. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: singleOpen, defaultOpenIndex, keepMounted, accent ### Chevron flip tile https://fieldbook.lizardi.mx/components/chevron-flip-tile A square icon tile whose chevron hinges flat and reopens pointing the other way, each half pivoting on the joint where they meet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: ink, accent, tileSize, duration, lift ### Chip legend pie https://fieldbook.lizardi.mx/components/chip-legend-pie A solid pie chart with no on-slice labels, paired with a wrapped row of color chips beneath it that names every slice and highlights in sync on hover. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, hueRange, gap, showValues, chipsPerRow ### Cipher reveal text https://fieldbook.lizardi.mx/components/cipher-reveal-text A label that starts scrambled into random symbols and decrypts into its real text on view, hover, or click. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, speed, sequential, accentColor ### Circle plus add button https://fieldbook.lizardi.mx/components/circle-plus-add-button A wordless add button whose plus sign draws its two strokes outward from the centre on hover while the fill deepens. Frameworks: react Access: member Public prop names: accent, width, strokeGrowth, spinRing ### Circle reveal sidebar https://fieldbook.lizardi.mx/components/circle-reveal-sidebar A menu panel that opens as a circle growing out of its own toggle, with rows springing up in sequence and the toggle bars folding into a cross. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: defaultOpen, itemCount, stagger, bounce, accent ### Circled Arrow Pill https://fieldbook.lizardi.mx/components/circled-arrow-pill-button A solid high-chroma pill with the label on the left and a ringed arrow on the right that nudges forward on hover. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, nudge, pressScale, iconSize ### Circular hover speed ring https://fieldbook.lizardi.mx/components/circular-hover-speed-ring A phrase spins slowly around a circle until the pointer arrives, then snaps to a fast spin and grows slightly before easing back once the pointer leaves. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, restSeconds, hoverSeconds, accent ### Circular wipe switcher https://fieldbook.lizardi.mx/components/circular-wipe-switcher A colour switcher where the new theme floods the whole surface as a circle expanding from the exact point you pressed, while the selection ring slides between swatches. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: colorA, colorB, colorC, duration, fromPointer ### Clamp jaws glow button https://fieldbook.lizardi.mx/components/clamp-jaws-glow-button A hollow outlined button whose side tick marks slide in, merge into jaws, and close over the label with an accent glow on hover or focus. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, glowStrength, sequenceMs, reflection ### Clean Text Field https://fieldbook.lizardi.mx/components/clean-text-field A no-frills bordered text input for a labeled form: neutral at rest, a crisp accent ring on focus, muted when disabled. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, placeholder, accentColor, invalid, disabled ### Click ripple burst https://fieldbook.lizardi.mx/components/click-ripple-burst A pointer-feedback effect that spawns a brief animated shape exactly where the user clicks or taps. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: variant, color, size, duration ### Click spark burst https://fieldbook.lizardi.mx/components/click-spark-burst Every press throws a ring of short lines out from the exact point of contact, each one stretching away and shrinking to nothing as it flies. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: sparkCount, radius, duration, easing, sparkColor ### Code cover card https://fieldbook.lizardi.mx/components/code-cover-card A wide verification card with the code form on one side and a cover panel on the other that fills a progress bar as digits are entered. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, length, autoSubmit, showCover, headline ### Coiled Spring Drag https://fieldbook.lizardi.mx/components/coiled-spring-drag A draggable tile tethered to its home spot by a drawn coil that stretches and thins as you pull, then whips the tile back when you let go. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: coils, stiffness, damping, strokeWidth, accent ### Collapsible app sidebar https://fieldbook.lizardi.mx/components/collapsible-app-sidebar A full application sidebar with grouped navigation links, an active-item highlight, a toggle that collapses it to an icon-only rail, and a slide-in drawer on narrow screens. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: collapsed, accentColor, mobileBreakpoint, showAccountRow ### Collapsible App Sidebar https://fieldbook.lizardi.mx/components/collapsible-app-sidebar-2 An application sidebar with grouped navigation links that collapses to an icon-only rail, slides in as an overlay on narrow screens, and toggles with a keyboard shortcut. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultCollapsed, itemCount ### Collapsible Icon Sidebar https://fieldbook.lizardi.mx/components/collapsible-icon-sidebar A full app shell with a left sidebar that collapses to icon-only width, nested menu sections that expand, and a hover highlight that glides between menu rows. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: defaultOpen, side, accent, width ### Collapsing share button https://fieldbook.lizardi.mx/components/collapsing-share-button A labelled pill that shrinks to a round glyph while a strip of link tiles floats into the space it left. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, items, direction, closeOnBlur ### Collapsing trail breadcrumb https://fieldbook.lizardi.mx/components/collapsing-trail-breadcrumb A path trail with chevron separators whose middle steps collapse into an ellipsis button that opens a menu of the hidden steps. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: segmentCount, separator, accent ### Color Band Text Reveal https://fieldbook.lizardi.mx/components/color-band-text-reveal A soft band of several colors glides once across a line of text with an ease-in ease-out motion, tinting each letter as it passes before the text settles into a solid color. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, duration, repeat, repeatDelay ### Color blend compare https://fieldbook.lizardi.mx/components/color-blend-compare Two swatches loop between the same pair of colors, one mixed in raw channel values and one in linear light, showing the dip a plain transition makes. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: fromColor, toColor, cycleSeconds, showLabels, pinMidpoint ### Color relay sign-in https://fieldbook.lizardi.mx/components/color-relay-sign-in-button A sign-in pill whose four-segment mark hands its colours off one by one to circular floods that sweep across the button in relay. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, secondColor, thirdColor, fourthColor, relaySeconds ### Color swap play button https://fieldbook.lizardi.mx/components/color-swap-play-button An uppercase play pill that trades its ground and text colors on hover, lifting as its colored glow turns dark. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, glow, lift ### Comb wipe invert button https://fieldbook.lizardi.mx/components/comb-wipe-invert-button Two interlocking striped combs slide in from above and below to cover a black pill, inverting the label as they pass. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, bars, duration, pill ### Combobox field https://fieldbook.lizardi.mx/components/combobox-field A searchable dropdown field: typing filters a list of options live, and picking one fills the field. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, accent, openOnLoad ### Comet rain https://fieldbook.lizardi.mx/components/comet-rain Streaks with bright heads fall from a glowing point near the top and curve outward as they drop, at speeds set by their depth. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: streakColor, glowColor, speed, density, streakLength, pointerPush ### Comic pop text https://fieldbook.lizardi.mx/components/comic-pop-text Chunky comic-book lettering with a thick outline and a halftone dot fill that pops onto the stage with a bouncy scale-and-rotate entrance. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, fontSize, fillColor, dotColor ### Command palette https://fieldbook.lizardi.mx/components/command-palette A search overlay opened by a button or Ctrl K that filters grouped commands, moves a highlight with the arrow keys, runs the selected one on Enter and reports the result. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: placeholder, accent ### Command Palette Search https://fieldbook.lizardi.mx/components/command-palette-search A keyboard-summoned overlay with a search field at top and a live-filtered, grouped list of commands below it, navigated entirely by keyboard and run with Enter. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, placeholder, groupCount ### Command search palette https://fieldbook.lizardi.mx/components/command-search-palette A search field that drops a filtered list of commands beneath itself as you type, with arrow-key highlighting, hover selection and a keyboard hint footer. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: placeholder, defaultOpen, accentColor ### Compact Time Range Picker https://fieldbook.lizardi.mx/components/compact-time-range-picker A month calendar card with a two-cell time range strip in the footer, the two time fields divided only by a short dash so the pair reads as one range control. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, startTime, endTime, cellSize ### Compass bar grid https://fieldbook.lizardi.mx/components/compass-bar-grid A grid of short bars that all rotate to point at the pointer, so the field reads like iron filings finding a magnet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rows, columns, barLength, restAngle, accent ### Compass share burst https://fieldbook.lizardi.mx/components/compass-share-burst A round share button that fans its destination chips out to the compass points in a staggered burst and pulls them back home in reverse order. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, radius, stagger, accent, latchOnClick ### Composable Reveal https://fieldbook.lizardi.mx/components/composable-reveal One reveal wrapper whose slide, fade, zoom and defocus parts can each be switched on and combined into a single spring transition. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: slide, fade, zoom, defocus, delay, accent ### Concentric goal rings https://fieldbook.lizardi.mx/components/concentric-goal-rings Three nested progress rings that draw themselves in sequence beside a readout of each goal's current and target value. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: outerValue, middleValue, innerValue, ringWidth, accent ### Concentric pulse rings https://fieldbook.lizardi.mx/components/concentric-pulse-rings A stack of concentric rings behind a caption, each one breathing on a staggered delay so a slow pulse travels outward from the centre. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: ringCount, baseSize, step, duration, accentColor ### Concentric ring button https://fieldbook.lizardi.mx/components/concentric-ring-button A button sitting over a huge stack of concentric rings that slides across on hover while the whole plate shifts from a warm ramp to a cool one. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, rings, ringWidth, shift ### Concentric Ring Chart https://fieldbook.lizardi.mx/components/concentric-ring-chart Nested progress rings that sweep to their own percentage on mount and share a live center total, like a multi-dial gauge. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: strokeWidth, ringGap, accent, animationSpeed, showCenterLabel ### Concentric Ring Radar https://fieldbook.lizardi.mx/components/concentric-ring-radar A polar chart whose scale is drawn as true concentric circles instead of nested polygons, so the plotted shape reads against a smooth target backdrop. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, rings, fillOpacity, dotRadius, showSpokes ### Confirm action dialog https://fieldbook.lizardi.mx/components/confirm-action-dialog A centered modal that interrupts the page to make someone explicitly confirm or cancel a serious action before it happens. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: confirmLabel, cancelLabel, accentColor, destructive ### Confirm action modal https://fieldbook.lizardi.mx/components/confirm-action-modal A centered confirmation dialog that springs open over a dimming backdrop, asking the visitor to confirm or cancel a destructive action. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: question, detail, accentColor, confirmLabel ### Confirm Delete Modal https://fieldbook.lizardi.mx/components/confirm-delete-modal A centered confirmation dialog that fades in over a dimmed backdrop, asks the user to confirm a destructive action, and animates back out on cancel, confirm, or outside click. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, title, closeOnBackdrop ### Connector Pulse Beam https://fieldbook.lizardi.mx/components/connector-pulse-beam Draws a curved connector between two elements and sends a bright gradient segment travelling along it on a loop. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: curvature, accent, duration, pathWidth, reverse ### Consequence confirm dialog https://fieldbook.lizardi.mx/components/consequence-confirm-dialog A confirmation dialog that tilts into view from a chosen edge and blocks the page until the visitor explicitly cancels or continues. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: from, accent, headline, continueLabel ### Content Divider Rule https://fieldbook.lizardi.mx/components/content-divider-rule A thin structural rule that separates stacked sections or short inline labels without drawing attention to itself. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: orientation, thickness, spacing, accentColor ### Content Loading Card https://fieldbook.lizardi.mx/components/content-loading-card A card-shaped placeholder that breathes with a slow opacity pulse while a large image block and two lines of text are still loading. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: layout, pulse ### Contour Field https://fieldbook.lizardi.mx/components/contour-field-backdrop A full-bleed animated backdrop of nested elevation contours that swell and merge, with the pointer raising a soft bump in the terrain. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, bands, speed, glow, pointerLift ### Contrast Boost Frame Button https://fieldbook.lizardi.mx/components/contrast-boost-frame-button A pale inner plate floats inside a thick painted frame, and hovering cranks the whole thing brighter and more saturated without moving anything. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, secondary, frameWidth, boost, rampAngle ### Converging chevron button https://fieldbook.lizardi.mx/components/converging-chevron-button Two arrow shaped plates fly in from opposite sides and meet in the middle of the button, sealing it shut behind the label. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, point, duration, radius ### Conversation bubbles https://fieldbook.lizardi.mx/components/conversation-bubbles A message thread of bubbles that size to their text, group by sender, and carry an overlapping reaction pill. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: variant, accent, maxWidth, showReactions, grouped ### Copy confirm button https://fieldbook.lizardi.mx/components/copy-confirm-button A square icon button that copies a string and swaps its glyph for a drawn tick, shrinking and blurring one out as the other arrives in place. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, size, skin, resetDelay, content ### Copy flick tile https://fieldbook.lizardi.mx/components/copy-flick-tile A square tile holding a stack of two pages; a long press flicks the top page away, confirms the copy in the caption, then resets the stack. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: caption, doneCaption, accent, holdMs, flingDistance, tileSize ### Corner bracket frame button https://fieldbook.lizardi.mx/components/corner-bracket-frame-button A bare uppercase label that gets boxed in by two L-shaped brackets sliding in from opposite sides and then growing to close the frame. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, thickness, stagger, width ### Corner bracket seal button https://fieldbook.lizardi.mx/components/corner-bracket-seal-button Two short corner brackets grow along the edges until they seal into a complete frame around the label on hover. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, thickness, stubLength, duration, halo ### Corner bracket target button https://fieldbook.lizardi.mx/components/corner-bracket-target-button A boxy button framed by four corner brackets that retract inward on hover, closing on the label like a sight. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, bracketSize, retract, crosshair ### Corner flood button https://fieldbook.lizardi.mx/components/corner-flood-button A dark rectangular button with a small colour chip parked half off its top left corner that swells until it floods the whole face when the button is engaged. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, chipSize, size, radius ### Corner light rays https://fieldbook.lizardi.mx/components/corner-light-rays Wide shafts of light fan in from one corner, two tinted fans crossing at slightly different angles and slowly breathing. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: colorA, colorB, origin, spread, speed, intensity ### Corner ticks frame button https://fieldbook.lizardi.mx/components/corner-ticks-frame-button A dark rectangle marked only by four corner ticks that run out to draw a full frame, after which a lit panel opens from the centre and the label inverts. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tickPx, stageMs, glow ### Count badge cluster https://fieldbook.lizardi.mx/components/count-badge-cluster A row of word pills and compact numeric tokens for labeling or counting things inline. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, variant, count, accentColor ### Count Sweep CTA https://fieldbook.lizardi.mx/components/count-sweep-cta A compact dark call to action with a leading mark, a divider and a live tally, crossed by a slow diagonal light streak on hover. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, count, accent, glintMs, showCount ### Count Up Number https://fieldbook.lizardi.mx/components/count-up-number A large numeral that springs from a starting value up to a target once it scrolls into view, overshooting slightly before it settles. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: to, from, duration, accentColor ### Count wheel badge https://fieldbook.lizardi.mx/components/count-wheel-badge A vertical number wheel that rolls through rounded steps to a total, with a center star that fills as the count climbs. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: target, step, rowHeight, direction, accent ### Counting follow chip https://fieldbook.lizardi.mx/components/counting-follow-chip An outlined chip that pairs a label with a follower count, rolling the changed digits up through a masked window when latched and back down when released. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, count, compact, duration ### Counting metric https://fieldbook.lizardi.mx/components/counting-metric A large number that eases from a starting value up to its target with a gentle spring the first time it is seen, formatted with thousands separators and fixed decimals. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: target, startValue, decimals, accent ### Counting number readout https://fieldbook.lizardi.mx/components/counting-number-readout A large stat that counts up to its value on a decelerating curve, writing the text directly each frame so the layout never jitters. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: target, duration, decimals, suffix, accent ### Counting readout https://fieldbook.lizardi.mx/components/counting-readout A metric figure that counts from a start value up to its target on a spring the first time it is seen, with fixed decimals and optional zero padding. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: target, decimals, delay, padStart, accent ### Crackling border frame https://fieldbook.lizardi.mx/components/crackling-border-frame A rounded frame whose outline is redrawn every frame as a jittering arc of light, with a steady glow beneath and perfectly still content on top. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: speed, chaos, radius, thickness, glow, color ### Cross morph menu button https://fieldbook.lizardi.mx/components/cross-morph-menu-button A thin three-bar menu icon that folds into a close cross, the outer bars travelling to the centre line before they scissor and recolour. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: restColor, activeColor, barWidth, duration, showTile ### Crossing ripple tile https://fieldbook.lizardi.mx/components/crossing-ripple-tile-button A square badge tile where two dots race in from opposite edges, swell into overlapping circles that flood the face, and unroll a caption underneath. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, caption, rippleMs, spin ### CRT terminal static https://fieldbook.lizardi.mx/components/crt-terminal-static A full bleed grid of glowing block glyphs that boils, rolls and tears like a failing monochrome monitor. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tint, cellSize, speed, scanline, glitch, pointerGlow ### Cube flip letters https://fieldbook.lizardi.mx/components/cube-flip-letters Hovering a line turns every letter a quarter turn in 3D, one after another from a chosen origin, revealing a second face that carries the same glyph in the accent. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, direction, origin, stagger, accent ### Cursor-chasing tooltip https://fieldbook.lizardi.mx/components/cursor-chase-tooltip A hint bubble that pops in on hover or focus and can glide to trail the pointer as it moves across the trigger. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, followCursor, accent ### Cursor drift link preview https://fieldbook.lizardi.mx/components/cursor-drift-link-preview A link preview panel that leans toward wherever the pointer sits on the link, trailing it on a soft spring. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: driftAxis, driftAmount, stiffness, accent ### Cursor fluid trail https://fieldbook.lizardi.mx/components/cursor-fluid-trail A dark field where dragging the pointer smears colored fluid across it, and the smear keeps curling and thinning out after the pointer stops. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, brushSize, force, dissipation, autoDrift ### Cursor magnifier lens https://fieldbook.lizardi.mx/components/cursor-magnifier-lens A round lens follows the pointer over an image and magnifies only the small patch beneath it, like a handheld loupe. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: zoomFactor, lensSize, followMode ### Cursor trail grid https://fieldbook.lizardi.mx/components/cursor-trail-grid A grid of outlined cells that snap lit under the pointer and cool slowly once it moves on, leaving a fading trail. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cellSize, columns, rows, fadeMs, accentColor ### Curtain line loader https://fieldbook.lizardi.mx/components/curtain-line-loader A loading curtain that retreats behind a bright travelling line, cutting the finished content into view instead of fading it in. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, duration, direction, lineWidth, loop ### Curtain scroll reveal https://fieldbook.lizardi.mx/components/curtain-scroll-reveal A row of images that each uncover from behind a sliding curtain mask as scroll progress carries them into view, and re-cover when they scroll back out. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: revealDirection, imageCount, settleScale ### Curved input bar https://fieldbook.lizardi.mx/components/curved-input-bar A pill text field bent into a gentle upward arc, with the typed text, caret and submit button following the same curve. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: placeholder, buttonText, accent, bend ### Curved Scroll Wall https://fieldbook.lizardi.mx/components/curved-scroll-wall A horizontally scrolling wall of photos rendered on a gently curved, bowed plane that keeps scrolling infinitely in either direction. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: bend, scrollSpeed, borderRadius, textColor ### Curved Text Loop https://fieldbook.lizardi.mx/components/curved-text-loop A line of text repeats endlessly along a gentle arched path, auto-scrolling sideways and draggable by hand with momentum that reverses direction. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, speed, curveAmount, accentColor ### Custom shell lightbox https://fieldbook.lizardi.mx/components/custom-shell-lightbox A gallery grid that opens a borderless full-bleed lightbox, showing how one open, close and focus engine can wear a completely custom shell. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: imageCount, backdropOpacity, showCaption ### Dark Pill Sign In https://fieldbook.lizardi.mx/components/dark-pill-sign-in-button A bordered dark pill for third party sign in that deepens toward black on hover while its label recedes and its border tightens. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, growth, borderStrength ### Dashed outline tooltip button https://fieldbook.lizardi.mx/components/dashed-outline-tooltip-button A dashed ghost button that floods with its accent on hover or focus while a pointed tooltip unrolls out of the edge nearest the button. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, tip, accent, dashWidth, gap, placement ### Date Range Picker https://fieldbook.lizardi.mx/components/date-range-picker A single month calendar for choosing a start and end date, where every day between them fills in as one continuous highlighted band once both ends are picked. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, startMonth, startYear ### Date Range Picker https://fieldbook.lizardi.mx/components/date-range-picker-2 A month calendar grid for picking a start and end date together, with the days between them shown as one connected span. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, weekStart ### Date and Time Duo Picker https://fieldbook.lizardi.mx/components/date-time-duo-picker Two side by side labeled fields, a compact date button that opens a calendar popover and a plain time field, for setting a date and a time as two independent steps. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, dateLabel, timeLabel, defaultTime ### Day Agenda Calendar https://fieldbook.lizardi.mx/components/day-agenda-calendar A card combining a compact month calendar with a scheduled-events list for the selected day and a button to add another event. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, selectedDate, eventCount ### Day night sweep toggle https://fieldbook.lizardi.mx/components/day-night-sweep-toggle An icon button that cycles a settings panel between light, dark and automatic, repainting it with a hard clipped edge that sweeps across instead of a fade. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: direction, includeAuto, accent, sweepMs, startMode ### Decline call circle https://fieldbook.lizardi.mx/components/decline-call-circle-button A round icon-only decline button whose handset glyph tilts into a hung-up pose while pressed, with a small refusal shake on hover. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, pressTilt, shakeOnHover ### Deep Slab Button https://fieldbook.lizardi.mx/components/deep-slab-button A tall slab that floats above the page on a long diagonal shadow and sinks onto it when hovered, then slams flat on click. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, sink, showArrow, shadowLength ### Deferred post card https://fieldbook.lizardi.mx/components/deferred-post-card A post card that shows a measured placeholder shell first, then swaps in the real post, with a retryable failure state. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: state, loadDelay, showMedia, accent ### Departing send button https://fieldbook.lizardi.mx/components/departing-send-button A send button that flies its glyph off the right edge and empties its label on hover, revealing a second line over a spreading accent wash. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, hoverLabel, lift, flightDistance ### Destructive confirm dialog https://fieldbook.lizardi.mx/components/destructive-confirm-dialog A confirmation dialog for destructive actions that only closes through its own buttons, refusing to dismiss on a backdrop click or Escape. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: title, confirmLabel, dangerColor ### Destructive sweep button https://fieldbook.lizardi.mx/components/destructive-sweep-button A delete action whose rose to crimson shading sweeps end to end on hover, tipping the bin lid, with an optional hold to confirm line along the bottom edge. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, holdToConfirm, holdMs ### Detached Ring Pill https://fieldbook.lizardi.mx/components/detached-ring-pill-button A dark pill orbited by a floating outline ring that pushes further out and floods the pill with color on hover. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, ringGap, ringWidth, growLabel ### Detail list item https://fieldbook.lizardi.mx/components/detail-list-item A list row combining a leading icon or avatar, a title and description, and a trailing action, for notification lists, menus, or settings rows. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: variant, size, mediaVariant, accent ### Detailed signup card https://fieldbook.lizardi.mx/components/detailed-signup-card A centered signup card collecting full name, email, password and confirmation, each with a helper line, before a primary create-account button. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: heading, accentColor, showAltProvider, providerLabel ### Diagonal blob flood button https://fieldbook.lizardi.mx/components/diagonal-blob-flood-button An outlined button flooded by a large rounded blob that slides in diagonally from off its top corner and darkens while held. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, pressAccent, duration, radius ### Diagonal Glare Sweep https://fieldbook.lizardi.mx/components/diagonal-glare-sweep A wrapper that slides a narrow band of light diagonally across whatever it contains when the pointer or keyboard focus arrives. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: angle, bandWidth, duration, glareColor, intensity, playOnce ### Diagonal Hatch Field https://fieldbook.lizardi.mx/components/diagonal-hatch-field A repeating field of parallel diagonal hairlines that tiles seamlessly across a container and can slant either way. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: spacing, thickness, slant, dashed, opacity, accentColor ### Diagonal orb fill button https://fieldbook.lizardi.mx/components/diagonal-orb-fill-button One oversized circle slides corner to corner across an outlined button, filling it on the diagonal, and darkens the instant you press. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, pressColor, travelSeconds, radius ### Diagonal shutter fill button https://fieldbook.lizardi.mx/components/diagonal-shutter-fill-button An outlined button that fills when two tilted blades swing in from opposite sides, straighten out mid flight and meet in the middle. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, duration, tilt, borderWidth ### Diagonal swipe button https://fieldbook.lizardi.mx/components/diagonal-swipe-button An outlined button holding a thin slanted blade that straightens and widens until it floods the frame on hover. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, tilt, borderWidth, durationMs ### Diagonal wedge button https://fieldbook.lizardi.mx/components/diagonal-wedge-button A squared button filled by a triangular wedge that grows along the diagonal until it covers the whole face. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, duration, rim, padX ### Dialog bevel button https://fieldbook.lizardi.mx/components/dialog-bevel-button A small grey system button built from two nested hard bevels and a dotted inner focus mark, whose bevel lines swap on press so it reads as pushed in. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, size, isDefault ### Directional Slide In https://fieldbook.lizardi.mx/components/directional-slide-in A reveal that pushes content in from any of the four sides by a set distance and lets a spring absorb the arrival. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: direction, offset, delay, stagger, accent ### Directional theme wipe https://fieldbook.lizardi.mx/components/directional-theme-wipe A light dark toggle that reveals the new theme with a directional wipe sweeping across the whole frame instead of an instant color swap. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: direction, wipeDuration, accentColor ### Disc to Pill CTA https://fieldbook.lizardi.mx/components/disc-to-pill-cta A small filled disc beside a bare uppercase label stretches into a full pill on hover or focus, revealing the text and carrying the arrow along. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, trackWidth, expandSeconds, arrowShift ### Dismiss exit card https://fieldbook.lizardi.mx/components/dismiss-exit-card A card that shrinks and fades on its way out and springs back in when restored, with the surrounding layout held still so nothing jumps. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: exitStyle, duration, accent, autoCycle, holdSpace ### Dismissible Dialog https://fieldbook.lizardi.mx/components/dismissible-dialog A general-purpose centered dialog that opens over a blurred backdrop and can be casually dismissed by its close button, the backdrop or Escape. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, detail, accentColor, confirmLabel ### Dock menu https://fieldbook.lizardi.mx/components/dock-menu A bottom dock whose icons take their size from the pointer distance, with a label above the icon under the cursor and a dot under the active one. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: magnification, distance, iconSize ### Dodging eyes button https://fieldbook.lizardi.mx/components/dodging-eyes-button A dark capsule with two blinking cartoon eyes that hops to the corner furthest from your pointer while its pupils keep watching you. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, eyeSize, dodge, blinkSeconds, moveMs ### Donut share chart https://fieldbook.lizardi.mx/components/donut-share-chart A five slice donut with a hollow centre and hairline gaps that sweeps open on mount and lifts whichever slice the pointer is over. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, hueRange, holeRatio, gap, showTooltip ### Donut with total https://fieldbook.lizardi.mx/components/donut-with-total A donut chart that puts the running total in its own hole and swaps that readout to whichever slice is hovered or focused. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, caption, holeRatio, hueRange, countUp ### Dot flood button https://fieldbook.lizardi.mx/components/dot-flood-button An outlined pill with a small dot beside its label; hovering grows the dot until it floods the whole button and the label swaps to its inverted twin. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, dotSize, floodMs, showDot ### Dot matrix arrow button https://fieldbook.lizardi.mx/components/dot-matrix-arrow-button A button drawn as rows of dots stepped into a rightward arrowhead that glides sideways and back in a slow loop while hovered or focused and compresses toward its point when pressed. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: dotSize, gap, accent, travel, loopSeconds ### Dot matrix status pill https://fieldbook.lizardi.mx/components/dot-matrix-status-pill A pill button whose left side is a five by five dot grid playing a short looping pattern for each state, with the caption swapping in step. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: state, frameMs, dotSize, accent, autoCycle ### Dot radio list https://fieldbook.lizardi.mx/components/dot-radio-list A vertical list of radio options with circular indicators, where selecting one fills it with a dot and clears the rest. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: optionCount, initialSelected, accentColor ### Dot Scale Page Indicator https://fieldbook.lizardi.mx/components/dot-scale-page-indicator A minimal pagination strip of small numbered dots that scale up and brighten on hover or when active, flanked by text previous and next links that fade when disabled. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: totalPages, currentPage, accentColor ### Dotted Trend Line https://fieldbook.lizardi.mx/components/dotted-trend-line A smooth single series curve with a filled marker on every point and a ringed marker that snaps to whichever point the pointer is nearest. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, strokeWidth, dotRadius, showGrid, animateOnMount ### Dotted World Map https://fieldbook.lizardi.mx/components/dotted-world-map A world map rendered entirely from small dots, with a few labeled locations that pulse outward like a radar ping. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, pulse, showLabels, dotColor ### Double bevel button https://fieldbook.lizardi.mx/components/double-bevel-button A pale button that reads as a moulded key thanks to two opposed inner shadows, one dark from above and one bright from below, meeting behind a cool grey ramp. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, bevel, radius, showMark ### Download Sweep Progress https://fieldbook.lizardi.mx/components/download-sweep-progress-button A download button where the icon panel expands over the label on hover, then runs a real progress fill and settles on a done state after the click. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, width, durationMs, showProgressBar ### Download tooltip button https://fieldbook.lizardi.mx/components/download-tooltip-button A square icon button whose download arrow nudges downward and takes the accent color while a file-size caption unfolds beneath it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: caption, accent, size, nudge ### Download tray pulse button https://fieldbook.lizardi.mx/components/download-tray-pulse-button A rounded action pill with a small tray mark on its leading edge, where an arrowhead drops through the tray on a loop while the pointer rests on it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, hoverColor, speed, direction ### Drag Dismiss Bottom Drawer https://fieldbook.lizardi.mx/components/drag-dismiss-bottom-drawer A panel that slides in from an edge with a small drag handle, tracks a finger or pointer drag with rubber-band resistance, and either snaps back open or dismisses depending on how far it is pulled. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: edge, showHandle, accentColor ### Drag reorder checklist https://fieldbook.lizardi.mx/components/drag-reorder-checklist A checklist whose rows can be dragged into a new order, with checked items drawing an animated check and a strikethrough. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, rowGap, dragEnabled ### Drag split panels https://fieldbook.lizardi.mx/components/drag-split-panels Panels divided by thin draggable handles that resize the adjacent panes in real time, arranged in a row or stacked. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: orientation, showHandleGrip, defaultSplit, accentColor ### Drag tile track https://fieldbook.lizardi.mx/components/drag-tile-track A tile you can throw around a bounded track that tilts into the drag, resists past the edges and coasts to a stop with momentum. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: axis, momentum, elasticity, accent, tilt ### Draining fill button https://fieldbook.lizardi.mx/components/draining-fill-button A flooded button that drains out of one edge on hover, leaving a hollow outline with the label flipped to the accent. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, direction, drainMs ### Draining fill button https://fieldbook.lizardi.mx/components/draining-fill-button-2 An outlined pill that starts fully flooded with colour and drains down to a slim band at the foot on hover, then refills from the bottom on leave. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, residual, duration, borderWidth ### Drawn check checkbox https://fieldbook.lizardi.mx/components/drawn-check-checkbox A checkbox whose check mark draws itself stroke by stroke as the box fills with a solid accent color. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, checked, accentColor, drawDuration ### Drifting aura button https://fieldbook.lizardi.mx/components/drifting-aura-button A softly embossed slanted pad that wakes a blurred band of color behind its edges and lets the brightest part drift around the outline. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, auraTint, label, blur, driftSeconds, skew ### Drifting border sheen https://fieldbook.lizardi.mx/components/drifting-border-sheen A panel whose outline is lit by a soft two-colour glow, several times the panel's own size, drifting slowly around the frame. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: borderWidth, duration, accentColor, secondColor, radius ### Drifting glass shards https://fieldbook.lizardi.mx/components/drifting-glass-shards A slow current of translucent slivers that flash as they tumble, scattering from the cursor and gathering back when the pointer holds still. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, shardCount, shardSize, speed, flow, pointerMode ### Drifting Gradient Button https://fieldbook.lizardi.mx/components/drifting-gradient-button A button whose diagonal two-tone fill is oversized and never stops sliding, running faster while hovered and squashing on click. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, companion, driftSeconds, pressScale ### Drifting gradient wash https://fieldbook.lizardi.mx/components/drifting-gradient-wash A two-tone gradient panel oversized past its frame and slowly panned back and forth, so the colour boundary drifts across the surface forever. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: fromColor, toColor, cycleSeconds, angle, grain ### Drifting halo button https://fieldbook.lizardi.mx/components/drifting-halo-button A dark button ringed by a slightly larger halo frame in which one bright band of the accent drifts endlessly around the perimeter, brightening and lifting the plate on hover. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, haloWidth, driftSeconds ### Drifting Light Beams https://fieldbook.lizardi.mx/components/drifting-light-beams Tall tilted bars of light drift upward at different speeds and blur together into a slowly shifting haze. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: beamCount, accent, intensity, speed, blur ### Drifting mesh tilt https://fieldbook.lizardi.mx/components/drifting-mesh-tilt-button A pill held at a slight three dimensional tilt while soft blooms of light drift beneath its surface, rocking between two poses while hovered or focused. Frameworks: react Access: member Public prop names: label, accent, tilt, driftSeconds, veil ### Drifting particle field https://fieldbook.lizardi.mx/components/drifting-particle-field A slowly tumbling cloud of small round points, each drifting on its own path, with the whole cloud leaning away from the pointer. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: color, count, spread, speed, baseSize, parallax ### Drifting starfield https://fieldbook.lizardi.mx/components/drifting-starfield A deep field of stars with cross shaped flares that twinkles, rotates very slowly, and parts around the pointer. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: starColor, density, twinkle, driftSpeed, glow, repel ### Drill-Down Sunburst Chart https://fieldbook.lizardi.mx/components/drilldown-sunburst-chart A radial hierarchy chart of nested arc rings that zooms into a segment's children when clicked, with a breadcrumb trail and a hover-grow highlight. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, hoverPop, showBreadcrumb, accent ### Drive through button https://fieldbook.lizardi.mx/components/drive-through-button A boxy console button whose caption clears out of the way so a flat vehicle mark can roll in from the left, park, and shoot off the right edge when activated. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, speed, borderWidth, autoDemo ### Dropdown Action Menu https://fieldbook.lizardi.mx/components/dropdown-action-menu A button-triggered dropdown menu with grouped items, right-aligned keyboard shortcut labels, and a toggle-style row, closing automatically after most selections. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, itemCount ### Dropdown Date Picker https://fieldbook.lizardi.mx/components/dropdown-date-picker A single month date picker whose header uses a month dropdown and a year dropdown side by side, so jumping to a distant date takes one selection instead of many arrow clicks. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, month, year, showOutsideDays ### Dropdown Date Time Picker https://fieldbook.lizardi.mx/components/dropdown-date-time-picker A labeled date field that opens a month calendar in a dropdown, paired with two plain time fields underneath for a start and end time. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, startTime, endTime, dateLabel ### Dual Month Date Picker https://fieldbook.lizardi.mx/components/dual-month-date-picker Two adjacent month grids sharing one selected date, with a single pair of arrows that steps both months forward or back together. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, startMonth, startYear, gap ### Easing preview tile https://fieldbook.lizardi.mx/components/easing-preview-tile A tile that plays the same scale-up under any easing curve you pick, with the curve drawn beside it and a marker riding it in sync. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: easing, duration, delay, mirror, accent ### Echo halo hover button https://fieldbook.lizardi.mx/components/echo-halo-hover-button A dark pill that on hover or keyboard focus throws stepped, fading copies of itself along the four diagonals while the pill itself grows. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, steps, spacing, growth ### Edge aware popover https://fieldbook.lizardi.mx/components/edge-aware-popover A popover that springs out of its trigger and flips or shifts to the opposite side when the side you asked for would run past the frame edge, staying glued as things scroll. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, offset, avoidCollisions, width, accent ### Edge Collapse Button https://fieldbook.lizardi.mx/components/edge-collapse-button A flat button with a thick colored lip along its bottom edge that folds down to a hairline as the button drops onto it. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, lip, snapMs ### Edge Faded Plot Grid https://fieldbook.lizardi.mx/components/edge-faded-plot-grid A plot backdrop of dashed rules that fade out at the edges, with a highlight baseline and a light band that sweeps along them. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, rows, columns, dashed, fadeEdges, sweep ### Edge lamp tracking bar https://fieldbook.lizardi.mx/components/edge-lamp-tracking-bar A wide translucent bar with two small lamps clipped to its top and bottom edges that stretch into glowing caps as the label spreads out. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, glowSpread, sheen, width ### Edge-slide panel https://fieldbook.lizardi.mx/components/edge-slide-panel A settings panel that springs in flush against a screen edge while the page behind it dims and blurs. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: side, accent, title, size ### Edge slide sheet https://fieldbook.lizardi.mx/components/edge-slide-sheet A panel that slides in from a screen edge to hold supplementary content like a cart or filters, without leaving the current page. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, panelSize, closeOnOverlayClick ### Edge-tilt alert modal https://fieldbook.lizardi.mx/components/edge-tilt-alert-modal A warning modal for irreversible actions that rises and tilts up from the bottom edge with a springy overshoot, and only closes through its own buttons. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: headline, continueLabel, accent, riseDistance ### Edge tracking glow card https://fieldbook.lizardi.mx/components/edge-tracking-glow-card A card whose outline only lights up where the pointer gets close to it, brightening as you approach the rim and going dark near the middle. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, cornerRadius, glowRadius, edgeSensitivity, autoSweep ### Edge wipe invert https://fieldbook.lizardi.mx/components/edge-wipe-invert-button An outlined button whose solid fill wipes in from one edge and inverts the label as it passes underneath. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, direction, durationMs, radius ### Editable date field https://fieldbook.lizardi.mx/components/editable-date-field A text field for a date that accepts free typing and can also be filled in from a small calendar popover opened by a trailing icon button. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, value ### Elastic toggle switch https://fieldbook.lizardi.mx/components/elastic-toggle-switch A pill toggle whose round thumb squashes into a blob while pressed and springs back to round with a soft bounce, sliding between a neutral off state and a solid accent fill. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, on, accent, size ### Elastic tug slider https://fieldbook.lizardi.mx/components/elastic-tug-slider A slider that stretches like an elastic band when dragged past its ends, snapping the track back with a bounce once released. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: value, stepped, accent ### Elastic weight headline https://fieldbook.lizardi.mx/components/elastic-weight-headline A single line of huge uppercase letters whose weight, width and slant swell around a lagging, eased cursor position. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: word, textColor, minFontSize, widthReacts, weightReacts, italicReacts ### Elevated chip button https://fieldbook.lizardi.mx/components/elevated-chip-button A pale rounded chip resting on stacked soft shadows that tints toward the accent on hover and sinks onto a deeper shadow with an accent outline when pressed. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, elevation, radius, paddingX ### Elevation ladder fill button https://fieldbook.lizardi.mx/components/elevation-ladder-fill-button A capsule that climbs three elevation steps between rest, hover and press while a soft-edged accent wash crosses its face. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, hoverLift, pressScale, feather, duration ### Emboss swap button https://fieldbook.lizardi.mx/components/emboss-swap-button A small saturated chip that trades its flat cast shadow for a four way moulded relief on hover, so the surface appears to be pressed out of the page. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, radius, depth, size ### Embossed press button https://fieldbook.lizardi.mx/components/embossed-press-button A solid rounded button that reads as a raised physical key at rest and flips to a recessed, pressed-into-the-surface look on hover, focus and press. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, radius, relief, size ### Empty State Panel https://fieldbook.lizardi.mx/components/empty-state-panel A centered panel for an empty list or view, with a fanned icon stack, a heading, a supporting line, and a primary action button. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: title, description, buttonLabel, icon ### Endless Feed Loader https://fieldbook.lizardi.mx/components/endless-feed-loader A news-style list that keeps appending fresh headline batches as a small spinner at the bottom scrolls into view. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: batchSize, loadDelayMs, accentColor, autoLoad ### Engraved label pie https://fieldbook.lizardi.mx/components/engraved-label-pie A solid pie chart that sets each category name inside its own slice in an inverted color, so the breakdown reads without any outside labels or leader lines. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, hueRange, labelInset, gap, showReadout ### Enter view reveal https://fieldbook.lizardi.mx/components/enter-view-reveal Blocks that slide and fade in the moment they cross into view and reset themselves once they leave, so the reveal plays again on every pass. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, distance, direction, duration, once ### Entrance timing playground https://fieldbook.lizardi.mx/components/entrance-timing-playground A disc replays the same entrance move on demand so you can feel exactly what duration, delay and easing curve each contribute. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: duration, delay, easing, accent, loop ### Expanding card navbar https://fieldbook.lizardi.mx/components/expanding-card-navbar A slim rounded navbar whose hamburger toggle expands it downward into a row of colored link cards, each card's links staggering into view. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cardCount, accentColor, ease ### Expanding chip back button https://fieldbook.lizardi.mx/components/expanding-chip-back-button A pale pill button whose accent chip stretches across the full width on hover, carrying its arrow to the far side while the label stays put and gets covered. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, width, duration, direction ### Expanding disc mute toggle https://fieldbook.lizardi.mx/components/expanding-disc-mute-toggle A round icon toggle where a dark disc grows from the centre to swallow the pastel face, flipping the glyph to light as it passes underneath. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, accent, restTint, duration, glyph, startOn ### Expanding icon pill https://fieldbook.lizardi.mx/components/expanding-icon-pill A round icon button that grows into a labelled pill on hover or focus, turning its glyph a full revolution as the label slides in. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, collapsed, expanded, spin ### Expanding icon pill https://fieldbook.lizardi.mx/components/expanding-icon-pill-2 A round icon button that stretches into a labelled pill on hover, trading its glyph for a word as an accent fill arrives. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, collapsed, expanded, cast ### Expanding icon toolbar https://fieldbook.lizardi.mx/components/expanding-icon-toolbar A row of circular icon buttons where the selected tool expands into a filled pill with its label, plus a bell that drops open a notification list and a two-state lock pill. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultTool, showLockToggle ### Expanding label toolbar https://fieldbook.lizardi.mx/components/expanding-label-toolbar A row of icon tool buttons where the selected one expands to show its label, with a floating confirmation bubble and a separate lock toggle. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: defaultSelected, accent, lockedByDefault ### Expanding panel gallery https://fieldbook.lizardi.mx/components/expanding-panel-gallery A row of cover panels where hovering, clicking, or arrow-keying to one expands it to full width while the rest compress into slivers. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: panelCount, expandRatio, trigger, accentColor ### Expanding ring loader https://fieldbook.lizardi.mx/components/expanding-ring-loader Thin rings that grow out of a single point and fade as they widen, released one after another so the pulse never stops. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: ringCount, size, strokeWidth, cycleSeconds, accent ### Experience Shelf https://fieldbook.lizardi.mx/components/experience-shelf A horizontally scrolling shelf of photo cards, each with a save button, badge, rating and price, that scrolls smoothly with arrow buttons or a swipe. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: itemCount, accentColor, currency, showRatings ### Exposure dial slider https://fieldbook.lizardi.mx/components/exposure-dial-slider A photo preview with a circular exposure readout in its corner above a draggable ruler of ticks that sets the exposure value in EV. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: exposure, accentColor, tone ### Extruded layer text https://fieldbook.lizardi.mx/components/extruded-layer-text A word rendered as many stacked color layers behind its face, forming an extruded 3D block that leans toward the pointer and drifts when idle. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, depth, tilt, faceColor, depthColor ### Extruded tilt button https://fieldbook.lizardi.mx/components/extruded-tilt-button A heavy display button leaning in perspective whose hollow letters are extruded by two hard offsets that flip sides as the plate swings on hover and slap flat when pressed. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, tiltDegrees, extrusion, sweep ### Fading edge scroll panel https://fieldbook.lizardi.mx/components/fading-edge-scroll-panel A scroll panel that hides the native bar, floats a slim thumb only while you are using it, and fades content out on whichever edge still has more to reach. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: panelHeight, itemCount, fadeEdges, alwaysShowBar, thumbColor ### Fanned wave threads https://fieldbook.lizardi.mx/components/fanned-wave-threads A bundle of hairline threads pinned flat at the left edge, fanning out to the right and waving on a slow noise field. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: color, amplitude, spread, lineCount, speed, interactive ### Fanning event markers https://fieldbook.lizardi.mx/components/fanning-event-markers Round event badges pinned above a plot with guide lines; clustered ones stack into a counted badge that fans open on hover. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, size, markers, maxFanned, showLines ### Fanning Spec Stack https://fieldbook.lizardi.mx/components/fanning-spec-stack A leaning pile of product cards that spreads into a fan on demand, each card springing into place a beat after the one before. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: count, spread, tilt, accent ### FAQ Accordion https://fieldbook.lizardi.mx/components/faq-accordion-panels A vertical list of question headings where opening one panel slides its answer into view and closes whichever panel was open before it. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: defaultOpen, accentColor, transitionMs, dividers ### Field with status icon https://fieldbook.lizardi.mx/components/field-with-status-icon A labeled input whose trailing edge shows a small check or warning icon that fades in the moment the field's validity changes, without shifting the layout. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, value, state, required ### File attachment chip https://fieldbook.lizardi.mx/components/file-attachment-chip A compact card for one attached file showing a type icon or thumbnail, its name and size, and an upload, processing, error or done state. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: state, orientation, accent ### Fill progress loading text https://fieldbook.lizardi.mx/components/fill-progress-loading-text A loading label sits as a faint outline of itself while a solid colored copy fills it in from the left like a progress bar shaped like the word, sweeping back and forth while work happens. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, accent, cycleSeconds, baseOpacity ### Fill sweep loading text https://fieldbook.lizardi.mx/components/fill-sweep-loading-text A loading label whose faint outline sits under a fully colored copy that sweeps in from the left, reaches full width, and drains back out, repeating for as long as something loads. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, cycleSeconds ### Film grain overlay https://fieldbook.lizardi.mx/components/film-grain-overlay A generated fractal grain layer that sits over any panel, tuned from fine dust to coarse tooth without loading a single image. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: grain, detail, contrast, opacity, animate ### Filterable action list https://fieldbook.lizardi.mx/components/filterable-action-list A search box paired with a live-filtered list of actions grouped under labels, highlighting the first match and showing an empty state when nothing fits the query. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: placeholder, accentColor, itemCount ### Filterable record table https://fieldbook.lizardi.mx/components/filterable-record-table A record table with a live text filter, colored status pills, and a right-aligned currency column that stays readable as it sorts. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, sortable, showFilter, density ### Filtered suggestion field https://fieldbook.lizardi.mx/components/filtered-suggestion-field A text field that filters a list of suggestions as you type and shows the matches in a dropdown below, with keyboard navigation and a clear button. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, accentColor, maxVisible ### Firework burst canvas https://fieldbook.lizardi.mx/components/firework-burst-canvas Shells launch from the bottom edge, arc up trailing a streak, then burst into sparks that fall away under gravity. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: density, accent, sparkCount, shellSpeed, gravity ### Flaming iris eye https://fieldbook.lizardi.mx/components/flaming-iris-eye A burning iris of radiating filaments around a narrow slit pupil that turns to keep the cursor in view. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, pupilSize, irisWidth, flameSpeed, glow, followStrength ### Flat to flow button https://fieldbook.lizardi.mx/components/flat-to-flow-button A flat solid button that swaps to a wide two-tone band scrolling endlessly across its face while hovered or focused. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, cycleSeconds, bandWidth, reverse, radius ### Flickering glyph grid https://fieldbook.lizardi.mx/components/flickering-glyph-grid A dense grid of monospaced characters where a random handful swaps letter and colour every tick, easing between shades as it goes. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, baseColor, glitchSpeed, smooth, vignette, characters ### Flickering square mesh https://fieldbook.lizardi.mx/components/flickering-square-mesh A canvas mesh of small squares where random cells jump to a new brightness every frame, giving a restless static that never repeats. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: squareSize, gap, flickerChance, maxOpacity, accentColor ### Flight path confirm button https://fieldbook.lizardi.mx/components/flight-path-confirm-button A booking button that flies a small plane in a lap around its face while three dots pulse, then turns green and reports the booking confirmed. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, doneLabel, accent, successColor, duration ### Flip face button https://fieldbook.lizardi.mx/components/flip-face-button A button with two faces that trades one for the other on a three dimensional turn, reversing from wherever it is when the pointer leaves. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: axis, duration, accentColor, frontLabel, backLabel ### Flip panel headline reveal https://fieldbook.lizardi.mx/components/flip-panel-headline-reveal A headline whose characters sit behind small hinged panels that flip down one after another, like an arrivals board, to reveal the letters underneath. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, staggerMs, flipMs, accent ### Flip reveal card https://fieldbook.lizardi.mx/components/flip-reveal-card A tall course card that turns over on hover to show its detail list, with the front's halo pulsing while it rests. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: title, flipOnHover, duration, accent ### Flip Side Hint Tooltip https://fieldbook.lizardi.mx/components/flip-side-hint-tooltip A hint bubble that appears on hover or keyboard focus and automatically flips to whichever side keeps it fully visible near the edge of the screen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: side, openDelay, accentColor ### Floating download pill https://fieldbook.lizardi.mx/components/floating-download-pill A fully rounded pill that appears to hover above the page and settles closer to it as you hover and press. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, lift, showGlyph ### Floating label input https://fieldbook.lizardi.mx/components/floating-label-input A text field whose label rests inside the box and rises to the top edge on focus or once the field has a value, with focused, valid and invalid looks. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, invalid, accent ### Floating text trail https://fieldbook.lizardi.mx/components/floating-text-trail A dark panel where moving the pointer drops floating copies of a word along the travel path, each bobbing briefly before fading away. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, spacing, followDirection, drift, maxTrail ### Flow Area Chart https://fieldbook.lizardi.mx/components/flow-area-chart A time-series area chart with a gradient fill that draws itself in on load and shows a crosshair with a value tooltip on hover. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, pointCount, showGrid, animationSeconds ### Flow Sankey Diagram https://fieldbook.lizardi.mx/components/flow-sankey-diagram A node-and-ribbon flow diagram where ribbon thickness shows volume moving between stages, drawing in with a traced reveal and highlighting connected paths on hover. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: nodeWidth, nodePadding, showLabels, useGradientLinks, accent ### Flowing gradient headline https://fieldbook.lizardi.mx/components/flowing-gradient-headline A headline whose letters are filled by a moving two-tone gradient, so a bright band drifts endlessly through the words, with an optional soft bloom behind. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, accent, speed, fontSize, bloom ### Flowing gradient text https://fieldbook.lizardi.mx/components/flowing-gradient-text A multi-color gradient continuously sweeps across the fill of a headline, optionally framed by a matching gradient border pill. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, speed, showBorder, colorFrom, colorTo ### Flowing line currents https://fieldbook.lizardi.mx/components/flowing-line-currents Dozens of long curved strokes sweep diagonally across the frame in three depth bands, braiding and bobbing like a slow current. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: lineCount, accent, amplitude, speed, headline ### Fluid Splash https://fieldbook.lizardi.mx/components/fluid-splash-cursor Dragging across the panel pushes ink through a fluid simulation, so color billows, curls and slowly dissipates behind the pointer. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, splatRadius, splatForce, dyeFade, curl, shading ### Flying send button https://fieldbook.lizardi.mx/components/flying-send-button A send button whose paper-plane glyph tilts, bobs and flies across the face while the label slides away behind it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tilt, bob ### Flyout Menu Highlight https://fieldbook.lizardi.mx/components/flyout-menu-highlight A dropdown menu whose items sit under a highlight box that glides from one hovered or focused row to the next, with a nested submenu that flies out to the side. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: triggerLabel, side, accent ### Focus Guard Form https://fieldbook.lizardi.mx/components/focus-guard-form A form that, on a failed submit, cancels the submission, moves keyboard focus straight to the first invalid field, and announces the problem for screen reader users. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: submitLabel, accentColor, requireAll ### Focus halo button https://fieldbook.lizardi.mx/components/focus-halo-button A solid button that inverts to an outline on pointer hover and grows two stacked translucent rings the moment it takes keyboard focus. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, radius, ringWidth, invert ### Focus in reveal https://fieldbook.lizardi.mx/components/focus-in-reveal A reveal that brings content in out of focus and lets it sharpen as it enters view, with an optional per item delay for a stack of rows. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: startBlur, endBlur, delay, stagger, accent ### Focus Lens https://fieldbook.lizardi.mx/components/focus-lens-outline An outlined shape that stays soft and out of focus everywhere except in a small circle that follows the pointer, where it snaps sharp. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: shape, lensSize, lensSoftness, strokeWeight, accent ### Focus ring text input https://fieldbook.lizardi.mx/components/focus-ring-text-input A single-line text field with a muted placeholder and a solid accent ring that appears only on focus. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, accentColor, disabled ### Focus scroll list https://fieldbook.lizardi.mx/components/focus-scroll-list A scrollable queue whose rows pop into full size and opacity as they reach the center of view, with hover and keyboard selection. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: itemCount, showGradients, enableArrowNavigation, accentColor ### Focus-Trapped Modal Kit https://fieldbook.lizardi.mx/components/focus-trapped-modal-kit A bare-bones modal foundation whose whole point is disciplined keyboard behavior: it traps focus while open and restores it precisely on close, wrapped in a tilt-in entrance. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: from, trapFocus, accent, label ### Foil frame button https://fieldbook.lizardi.mx/components/foil-frame-button An upgrade button built as a dark plate inside a thin metallic frame, where the frame's diagonal sheen slides to the opposite corner on hover while the plate lifts, brightens and gains an accent tinted shadow. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, showGlyph, frameWidth, hoverScale ### Follow count swipe https://fieldbook.lizardi.mx/components/follow-count-swipe-button An outlined follow pill whose round accent badge slides to the far end on hover, painting a band that uncovers the follower count; clicking commits the follow with a stamp and bumps the count. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, followedLabel, count, accent, slideMs ### Follow latch chip https://fieldbook.lizardi.mx/components/follow-latch-chip A follow chip that previews its filled state on hover and latches there on click, swapping to an unfollow prompt in a warning tint when hovered again. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, warning, label, following, duration ### Forecast tail line https://fieldbook.lizardi.mx/components/forecast-tail-line A dashed continuation that carries a series past its last real point to a horizon, drawing itself out and landing on a hollow marker. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, horizon, curveKind, dashed, fadeOut, showEndMarker ### Control Bench https://fieldbook.lizardi.mx/components/form-control-bench A page wide bench of working form parts side by side: a payment fieldset, inline input add-ons, a prompt composer, grouped buttons and a quiet empty state. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, columns, density, showComposer, showEmptyState ### Format toggle button https://fieldbook.lizardi.mx/components/format-toggle-button An icon button that holds an on or off state, fading a rounded plate in behind its glyph when pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: variant, size, accent, startPressed, showCaption ### Four edge wipe icon button https://fieldbook.lizardi.mx/components/four-edge-wipe-icon-button A square icon button whose glyph shrinks away while four tilted panels slide in from every edge and flood the tile with an accent color. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, glyph, size, duration, borderWidth ### Frame draw button https://fieldbook.lizardi.mx/components/frame-draw-button A filled button that drains its fill away on hover while four thin bars race out from opposite corners to draw a complete frame, then everything returns on leave. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, barWidth, speed, radius ### Friendly Date Range Picker https://fieldbook.lizardi.mx/components/friendly-date-range-picker A pill button that reads out a plain-English date span and opens a dropdown calendar for picking a start and end day together. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, rangeText ### Funnel vortex backdrop https://fieldbook.lizardi.mx/components/funnel-vortex-backdrop A wireframe funnel of shrinking rings and radial spokes pouring into a lit throat, with specks rising back out. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rings, spokes, accent, meshColor, specks ### Fusing blob fill button https://fieldbook.lizardi.mx/components/fusing-blob-fill-button A thick outlined button that fills on hover as liquid blobs rise from below and fuse into one wobbling surface. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, blobCount, mergeStrength, riseSeconds ### Future-Only Date Picker https://fieldbook.lizardi.mx/components/future-only-date-picker A single date picker where every day before a fixed cutoff renders greyed out and unclickable, so only that date or a later one can ever be picked. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, cutoffDay, startMonth, startYear ### Fuzzy static text https://fieldbook.lizardi.mx/components/fuzzy-static-text A word drawn on canvas and repainted in jittering scan-lines, buzzing like television static and distorting harder on hover or press. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, baseIntensity, hoverIntensity, color ### Gap stretch arrow button https://fieldbook.lizardi.mx/components/gap-stretch-arrow-button A fixed width pill whose trailing arrow walks to the far edge on hover, stretching the gap after a stationary label, with a faint trail copy following a beat behind. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, width, travel, trail ### Ghost echo lift button https://fieldbook.lizardi.mx/components/ghost-echo-lift-button A pill that lifts on hover while a ghost copy of itself swells outward behind it and dissolves. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, liftDistance, echoScale, echoSeconds ### Git status file tree https://fieldbook.lizardi.mx/components/git-status-file-tree A nested folder and file browser where every changed file carries a colored git status letter, and folders swap icon shape when opened. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rowHeight, showStatusColors, expandFirstFolder, accent ### Glare Pass Text https://fieldbook.lizardi.mx/components/glare-pass-text Muted label text that periodically catches a narrow band of light gliding across it, like a glare reflecting off glass, then goes quiet before repeating. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, shimmerWidth, showIcon ### Glass Block Bars https://fieldbook.lizardi.mx/components/glass-block-bars A bar chart rendered as glossy 3D glass blocks with perspective side and top faces, and a slow light sweep pulsing up the tallest bar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, barCount, activeIndex, pulseEnabled ### Glass tube element tile https://fieldbook.lizardi.mx/components/glass-tube-element-tile A square selectable tile framed like a length of lit glass tubing, with an element symbol inside that brightens on hover and latches on when selected. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: symbol, name, number, accent, glow, lit ### Glide highlight explorer https://fieldbook.lizardi.mx/components/glide-highlight-explorer A folder and file tree where a single glowing highlight bar glides from row to row on hover or focus instead of each row lighting up on its own. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: highlightColor, rowHeight, defaultExpandedDepth, showStatusDots ### Glide swap button https://fieldbook.lizardi.mx/components/glide-swap-button A fixed width button that slides its label off the right edge while the glyph glides into the centre, all sitting on a hard coloured ledge the button drops onto when pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, glyph, width, ledge ### Glitch slice button https://fieldbook.lizardi.mx/components/glitch-slice-button A ghost button whose label tears into horizontal slices that jump apart with split colour fringes while a thin frame lights up around it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, runMs, slices, autoPlay ### Edge light pill https://fieldbook.lizardi.mx/components/glossy-edge-light-pill A glossy pill lit by a blurred bar along its top rim and a bloom beneath its foot that swells and brightens on hover. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, glow, radius, paddingX, topLight ### Glow halo button https://fieldbook.lizardi.mx/components/glow-halo-button A pill button with a duplicate of itself blurred behind it, so hovering blooms a soft colored halo while the fill slowly drifts. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, companion, glow, driftSeconds ### Glyph Marker Line https://fieldbook.lizardi.mx/components/glyph-marker-line A monthly trend line whose data points are drawn glyphs rather than plain dots, each one punched out of the line so the stroke appears to pass behind it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, markerSize, strokeWidth, showGrid, showAxis ### Glyph Static Backdrop https://fieldbook.lizardi.mx/components/glyph-static-backdrop A canvas filled with small monospace symbols quietly flickers, a handful mutating to a new random glyph every tick, fading toward the bottom edge to sit behind foreground content. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cellSize, mutationRate, fadeBottom, accentColor ### Gooey blob field https://fieldbook.lizardi.mx/components/gooey-blob-field A field of soft blobs that orbit seeded paths and melt into each other on approach, with an extra blob that follows the pointer. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: ballCount, speed, spread, accent, pointerColor, followPointer ### Gooey blob trail https://fieldbook.lizardi.mx/components/gooey-blob-trail A chain of shapes chases the pointer and melts into one liquid blob that stretches on the move and gathers when it stops. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: trailCount, size, lag, shape, merge, fillColor ### Gooey Particle Nav https://fieldbook.lizardi.mx/components/gooey-particle-nav A horizontal nav list where selecting an item morphs a blurred goo pill to the new position while a burst of small particles scatters outward from it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: itemCount, particleCount, animationTime ### Gradient Area Chart https://fieldbook.lizardi.mx/components/gradient-fill-area-chart Two stacked monthly series drawn as smooth areas whose fills fade from a strong tint at the top edge down to nearly clear at the baseline. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, secondColor, gradientStrength, showGrid, animate ### Gradient flip uppercase button https://fieldbook.lizardi.mx/components/gradient-flip-uppercase-button An uppercase button filled with a two tone diagonal ramp that swaps end for end on hover, taking its tinted cast shadow along with it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tint, angle, shadow ### Gradient Rim Button https://fieldbook.lizardi.mx/components/gradient-rim-button A button built as two stacked layers so a two-pixel shaded rim frames a slightly darker face, with a game-pad glyph. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, rim, restOpacity ### Ring reveal button https://fieldbook.lizardi.mx/components/gradient-ring-reveal-button An oversized pill with a thick gradient ring border whose dark inner face clears on hover to expose the full colour wash, then fades back when the pointer leaves. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, ringWidth, paddingY, revealOnHover ### Gradient shift text https://fieldbook.lizardi.mx/components/gradient-shift-text A rounded pill whose text is filled with a two-color gradient that continuously sweeps sideways through the letters. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, speed, colorFrom, colorTo ### Gradient slat spotlight https://fieldbook.lizardi.mx/components/gradient-slat-spotlight Vertical slats hide a colour gradient until a soft spotlight tracks the pointer across them and lights each slat it touches. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, blindCount, spotlightRadius, softness, angle, grain ### Gradient swap button https://fieldbook.lizardi.mx/components/gradient-swap-button A rounded button whose diagonal shading trades its two stops on hover, so the light corner travels across the face. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, angle, radius ### Gradient sweep heading https://fieldbook.lizardi.mx/components/gradient-sweep-heading A large heading whose fill is a moving gradient band that sweeps continuously from one edge to the other, giving the text a glossy, ever-shifting sheen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: headline, speed, accentColor ### Gradient tilt pill https://fieldbook.lizardi.mx/components/gradient-tilt-pill A fully rounded pill whose two-tone gradient fill swings its angle on hover and tips darker toward the shade while pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tiltDegrees, size ### Grain Flicker https://fieldbook.lizardi.mx/components/grain-flicker-layer A grain layer that redraws itself every few frames, so flat backgrounds get the restless flicker of a running projector instead of a fixed texture. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: opacity, grainScale, refreshInterval, animate ### Grain wash https://fieldbook.lizardi.mx/components/grain-wash Two colour pools bleed into each other across the frame while a slow warp keeps their border moving, all under a heavy film grain. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: colorA, colorB, speed, warp, grain, followPointer ### Grained rim button https://fieldbook.lizardi.mx/components/grained-rim-button A dark machined button with a brushed metal rim, a faintly grainy face and a hollow play mark that deepens on hover and focus. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, grain, rim ### Graph paper grid https://fieldbook.lizardi.mx/components/graph-paper-grid A repeating grid of hairlines that tiles across its container, fading toward the edges, with a small cluster of cells that light to an accent color and drain away again. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cellSize, lineOpacity, dashed, highlightCount, accentColor ### Graphite Slab CTA https://fieldbook.lizardi.mx/components/graphite-slab-cta A fixed-width dark slab button with a subtle graphite ramp that lifts on hover and carries a thin accent rule along its bottom edge. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, width, lift, radius, showRule ### Gravity dust field https://fieldbook.lizardi.mx/components/gravity-dust-field A slow field of glowing dust specks that bend toward or away from the pointer and flare brighter the closer they get. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, accent, influenceRadius, mode, speed, collide ### Greeting Cycle https://fieldbook.lizardi.mx/components/greeting-cycle-text A short greeting beside a marker dot runs once through hellos in different languages, sliding each one up into place as the last one slides away. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: intervalMs, accentColor, autoplay ### Gridline area chart https://fieldbook.lizardi.mx/components/gridline-area-chart A card-framed area chart with two overlapping filled layers, rounded axis ticks, a faint gridline and a footer line calling out the trend. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: trendPercent, trendDirection, primaryColor, secondaryColor, showGrid ### Grounded download pill https://fieldbook.lizardi.mx/components/grounded-download-pill A fully rounded download button with an accent-tinted shadow that tightens on press while its arrow dips and springs back. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, shadowSpread, pressScale, showIcon ### Grouped backdrop popover https://fieldbook.lizardi.mx/components/grouped-backdrop-popover A popover trigger that scales open near its anchor with an optional dimmed backdrop, and closes any sibling popover in its group as soon as it opens. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: anchor, showBackdrop, gap, accent ### Grouped Code Boxes https://fieldbook.lizardi.mx/components/grouped-code-boxes A one-time code field of individual boxed digits split into two groups by a thin center divider, with a blinking caret marking the box waiting for input. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: length, groupSize, accentColor, caption ### Grouped filter popover https://fieldbook.lizardi.mx/components/grouped-filter-popover A row of small filter buttons where opening one button's panel automatically closes any other panel already open in the same row, each panel growing from whichever edge it was triggered from. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, filterCount, closeOnSelect ### Grouped icon toolbar https://fieldbook.lizardi.mx/components/grouped-icon-toolbar A compact horizontal toolbar that clusters icon buttons into groups divided by thin separators, for quick formatting-style actions. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, groupCount ### Grouped magnify dock https://fieldbook.lizardi.mx/components/grouped-magnify-dock A bottom dock of round icon buttons split into two clusters that grow the closer the pointer gets to each one. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: magnification, distance, iconSize, accent ### Grouped Section Fieldset https://fieldbook.lizardi.mx/components/grouped-section-fieldset A titled group of related fields under one legend and a thin rule, with a single switch at the top that dims and disables the entire group at once. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: legend, groupEnabled, accentColor ### Grouped select menu https://fieldbook.lizardi.mx/components/grouped-select-menu A dropdown select whose options are grouped under section headings, with edge arrow strips that auto-scroll long lists. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, accent ### Grouped settings dropdown https://fieldbook.lizardi.mx/components/grouped-settings-dropdown A button-triggered dropdown with labeled sections, a nested submenu, and a radio group for picking one of several settings values. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: triggerLabel, align, accent ### Grow bar chart https://fieldbook.lizardi.mx/components/grow-bar-chart A bar chart that grows its columns up from the baseline on load, switches between vertical and horizontal layout, and highlights one bar at a time on hover. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: orientation, accentColor, barCount, showGrid ### Growing back arrow https://fieldbook.lizardi.mx/components/growing-back-arrow A bare left-arrow back control that grows and stretches its shaft on hover, then snaps to rest when pressed. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, size, hoverScale, shaftStretch, tooltip ### Growing ledge button https://fieldbook.lizardi.mx/components/growing-ledge-button A solid accent button resting on a darker bottom ledge that thickens and lifts on hover, then thins and sinks under a press. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, ledge, hoverLedge, radius ### Growing Pill Backdrop https://fieldbook.lizardi.mx/components/growing-pill-backdrop-button A bare label with a tinted disc tucked behind its first letters that grows into a full pill on hover while the arrow slides into place. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, showArrow, discSize, duration ### Guide steps accordion https://fieldbook.lizardi.mx/components/guide-steps-accordion A numbered accordion of guide steps whose panels can stay mounted while collapsed, so a running timer inside one keeps counting across a close and reopen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: keepMounted, accentColor, transitionMs, showStepNumbers ### Hairline section divider https://fieldbook.lizardi.mx/components/hairline-divider A slim rule that closes out a heading and description, then splits a row of plain labels below it into separate segments. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: style, thickness, spacing, accentColor ### Hairline lift pill https://fieldbook.lizardi.mx/components/hairline-lift-ghost-pill A quiet translucent pill with an inner hairline edge that lifts off the surface and picks up an accent tint on hover. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lift, restOpacity, showIcon ### Hairline Note Card https://fieldbook.lizardi.mx/components/hairline-note-card A quiet paper-toned note card with a hairline border, a small optional heading and a single body slot. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: title, showTitle, compact, borderColor ### Hairline Tone Badge https://fieldbook.lizardi.mx/components/hairline-tone-badge An unfilled pill label whose border and text share one color, so a row of them reads like a printed legend. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tone, accent, label, showDot, size ### Hairline trace submit https://fieldbook.lizardi.mx/components/hairline-trace-submit A dark submit button whose one pixel hairline lights up, tracing around the perimeter from the edge the pointer entered, then retreats back out the same way. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, traceMs, radius, retrace ### Hairline utility button https://fieldbook.lizardi.mx/components/hairline-utility-button A quiet neutral action button that answers hover with a one pixel lift, a darker hairline and a soft shadow, then sinks flat again when pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, radius, lift, shadow ### Halftone print loupe https://fieldbook.lizardi.mx/components/halftone-print-loupe A picture rendered as a screen of printed ink dots, with a round loupe under the pointer where the dots dissolve back into the smooth original. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: density, angle, shape, revealRadius, duotone, inkColor ### Halftone ripple field https://fieldbook.lizardi.mx/components/halftone-ripple-field A field of tiny tiles that switch on and off with a drifting noise pattern, and every click sends a ring of lit tiles racing outward. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, shape, pixelSize, density, speed, ripples ### Halftone wave field https://fieldbook.lizardi.mx/components/halftone-wave-field A slow cloud of turbulence flattened to a handful of tones and printed as a grid of dots, so it reads like a newspaper photo that will not hold still. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, pixelSize, levels, waveScale, speed, pointerSwell ### Halo glow button https://fieldbook.lizardi.mx/components/halo-glow-button A dark pill whose blurred accent halo fades in on hover and travels around the edge while a thin inner ring brightens. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, spread, travelSeconds, alwaysOn ### Halo ring https://fieldbook.lizardi.mx/components/halo-ring A glowing ring whose rim wobbles on a drifting noise field while a hot bead runs laps around the inside edge. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, hue, hoverStrength, ringRadius, spin ### Halo ring button https://fieldbook.lizardi.mx/components/halo-ring-button An outlined button that throws a single ring outward when you hover it, the band expanding past the edge and thinning to nothing as it goes. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, spread, duration, radius ### Hand-drawn text marker https://fieldbook.lizardi.mx/components/hand-drawn-text-marker Wraps a span of text with a hand-drawn marker annotation, such as a highlight wash, underline, circle, or box, that draws itself on with a slightly imperfect sketched stroke. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: action, color, animateOnView, strokeWidth ### Handoff link button https://fieldbook.lizardi.mx/components/handoff-link-button A small high contrast button that hands the current item off to another tool in a new tab, showing a destination mark and a hint that the link leaves the page. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, itemName, accent, inverted, showExternalHint ### Hard edge key button https://fieldbook.lizardi.mx/components/hard-edge-key-button A compact hardware-style key that flips its highlight, outline and shadow inward the instant you press it. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, radius, speed ### Hard Shadow Button https://fieldbook.lizardi.mx/components/hard-shadow-button A thick-outlined button that lifts off its solid offset shadow on hover and presses back into it on click. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, borderWidth, offset ### Hard shadow store badge https://fieldbook.lizardi.mx/components/hard-shadow-store-badge A boxy store badge sitting on a solid offset shadow that steps closer on hover, sweeps a band of light across itself, and stamps flat when pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, kicker, label, offset, sweep ### Hatch sweep button https://fieldbook.lizardi.mx/components/hatch-sweep-button Fine diagonal hatching fades in over the button on hover and scrolls forever, inverting the label wherever a line crosses it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, angle, speed, density ### Heartbeat like button https://fieldbook.lizardi.mx/components/heartbeat-like-button A round like button whose heart grows on hover with a steady beat; clicking latches it liked and ticks the count beside it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, beat, count, startLiked ### Height Morph Accordion https://fieldbook.lizardi.mx/components/height-morph-accordion A question list whose answer panels grow and shrink to their natural height with a spring, pushing the rows below them. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, allowMultiple, duration, showRules ### Hero signal https://fieldbook.lizardi.mx/components/hero-signal A full-bleed landing hero whose headline arrives one word at a time over thin vertical lines that drift and carry short lit signals upward. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: headline, accent ### Hex cell grid https://fieldbook.lizardi.mx/components/hex-cell-grid A honeycomb of clipped hexagon cells that light under the pointer and cool back down, leaving a fading trail. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cellSize, seam, accent, coolMs ### Highlight focus swap https://fieldbook.lizardi.mx/components/highlight-focus-swap Words in a sentence take turns being sharp while the rest blur, with a glowing corner-bracket frame sliding over to box in whichever word is in focus. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: sentence, accentColor, blurAmount, manualMode, intervalMs ### Highlight trail chart https://fieldbook.lizardi.mx/components/highlight-trail-chart A multi-line trend chart where hovering brightens a short trailing segment of one series while the rest of it and the other lines dim. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: seriesCount, primaryColor, showMarkers, forecastTail ### Highlighted bar chart https://fieldbook.lizardi.mx/components/highlighted-bar-chart A category bar chart where one bar is called out with a dashed outline and a lighter fill, and the callout follows whichever bar you point at. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, activeIndex, barRadius, showValues, animate ### Hinged plate button https://fieldbook.lizardi.mx/components/hinged-plate-button Two identical label plates sit exactly on top of each other and swing apart on hover, like a pair of doors turning under perspective. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tilt, depth, duration ### Hinged progress button https://fieldbook.lizardi.mx/components/hinged-progress-button A button whose face hinges backward on hover, exposing a tray where a progress bar fills in uneven bursts and fades out at full width. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, tilt, barDuration, depth ### Hold ring confirm https://fieldbook.lizardi.mx/components/hold-ring-confirm-button A round button ringed by a stroke that draws itself while you hold, feeding one progress value into the ring, the button scale and the label color at once. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, holdMs, accent, ringWidth, showPercent ### Hold to delete https://fieldbook.lizardi.mx/components/hold-to-delete-button A destructive button that only fires after the pointer is held down long enough for a fill bar to sweep across it, and rewinds the moment you let go. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, holdMs, accent, showCountdown, glyph ### Hold to fill pad https://fieldbook.lizardi.mx/components/hold-to-fill-pad-button A translucent pad that fills upward from its base for as long as it is held, then commits and flashes its border when the fill reaches the top. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, borderTint, label, holdSeconds, sink ### Holographic ID card https://fieldbook.lizardi.mx/components/holographic-id-card A person card that tilts toward the pointer while a holographic sheen slides across its face, with a footer strip carrying the avatar, handle, status and a contact button. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: name, role, tilt, accent, showFooter ### Honeycomb lattice https://fieldbook.lizardi.mx/components/honeycomb-lattice A honeycomb of outlined hexagons tiling a container, with shared edges drawn only once so every seam stays a single hairline. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: radius, gap, orientation, litCells, accentColor ### Hop lift button https://fieldbook.lizardi.mx/components/hop-lift-button A rounded button that lifts and hops in a short repeating loop while pointed at, then drops flat into a darker press state. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, useAccentFill, hop, radius, liftDistance ### Hopping dot loader https://fieldbook.lizardi.mx/components/hopping-dot-loader A short row of dots that hop in a travelling wave, each one leaving the floor a beat after the dot beside it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: dotCount, dotSize, hopHeight, cycleSeconds, accent ### Horizon swell https://fieldbook.lizardi.mx/components/horizon-swell Rolling swells recede into fog toward a lit horizon, growing as they travel forward and catching a pale edge on each crest. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: waveColor, crestColor, speed, amplitude, fog, grain ### Horizontal bar chart https://fieldbook.lizardi.mx/components/horizontal-bar-chart A row based bar chart with category labels in a fixed left gutter and rounded bars that sweep out from a shared left edge, scaled against the largest value. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, rowCount, barRadius, labelWidth, animate ### Hover Decrypt Text https://fieldbook.lizardi.mx/components/hover-decrypt-text Letters scramble through random characters and resolve left to right into the real word over about a second, replaying the decode whenever the pointer enters the text. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, duration, animateOnHover, startOnView ### Hover duplicate text nav https://fieldbook.lizardi.mx/components/hover-duplicate-text-nav A vertical nav list slides each label upward and off the top on hover while a duplicate label slides in from below to take its place. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: items, accent, durationMs, showIndex ### Hover preview popover https://fieldbook.lizardi.mx/components/hover-preview-popover A small detail card that opens beside a link after a short hover and stays open long enough to move the pointer into it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, openDelay, closeDelay, offset, accent ### Hover slide nav labels https://fieldbook.lizardi.mx/components/hover-slide-nav-labels A vertical navigation list where hovering or focusing a label slides a duplicate copy up into view while the original slides out, so the label appears to refresh itself. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: items, slideSeconds, accent ### Hover speed text ring https://fieldbook.lizardi.mx/components/hover-speed-text-ring A phrase set in a ring of outward-facing letters that spins gently at rest and dramatically changes speed while the pointer hovers it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: phrase, spinSeconds, hoverMode, accent ### Hover weight ripple text https://fieldbook.lizardi.mx/components/hover-weight-ripple-text Ultra-light display type where hovering a letter snaps it to a heavy weight with a thin outline, easing outward so its neighbors thicken a little too. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, accentColor, thickenNeighbors ### Hover zoom frame https://fieldbook.lizardi.mx/components/hover-zoom-frame An image that magnifies smoothly around the cursor on hover, or on tap, letting a visitor inspect detail without leaving the page. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: zoomScale, zoomOnHover, zoomOnClick, cornerRadius ### Accessibility icon https://fieldbook.lizardi.mx/components/icon-accessibility A standing figure with open arms and a wide stance that breathes with a slow pulse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Activity icon https://fieldbook.lizardi.mx/components/icon-activity A vital-signs trace that draws itself left to right across a flat line, spikes once, then flattens again. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Airplay icon https://fieldbook.lizardi.mx/components/icon-airplay A display with a gap in its lower edge and a triangle below that slides down and back, beaming the picture out. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Alarm clock icon https://fieldbook.lizardi.mx/components/icon-alarm-clock A twin-bell alarm clock that jangles on its feet while the hands lag half a beat behind the case. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Arrow icon https://fieldbook.lizardi.mx/components/icon-arrow A full-length arrow that nudges along its own axis, with paired arrows for the two-way directions. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, direction ### Audio lines icon https://fieldbook.lizardi.mx/components/icon-audio-lines Five upright bars of different heights that lift in sequence, reading as a waveform running left to right. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### 3D axis icon https://fieldbook.lizardi.mx/components/icon-axis-3d Three axes drawing themselves out of one origin in turn: height, then width, then the depth diagonal. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Badge check icon https://fieldbook.lizardi.mx/components/icon-badge-check A scalloped seal that draws its eight lobes, then strokes a check across the middle a beat later. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Icon badge send https://fieldbook.lizardi.mx/components/icon-badge-send-button A rounded send button whose glyph sits in a translucent circular badge that brightens and turns while the whole button lifts on hover and settles on press. Frameworks: react Access: open Public prop names: label, accent, lift, spin, confirmOnPress ### Battery icon https://fieldbook.lizardi.mx/components/icon-battery A cell with a terminal nub whose bars blink in sequence; the charging reading swaps the bars for a bolt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, level ### Bell icon https://fieldbook.lizardi.mx/components/icon-bell A notification bell whose body swings from its crown and whose clapper lags behind by a beat. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, state ### Between icon https://fieldbook.lizardi.mx/components/icon-between An arrow and a pair of blocks showing where a new item lands: the blocks shift aside or the arrow slides in. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Blocks icon https://fieldbook.lizardi.mx/components/icon-blocks Three square blocks set in an L, hopping one after another like pieces being snapped into place. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Cast icon https://fieldbook.lizardi.mx/components/icon-cast A screen left open at its lower left corner, where a dot and two arcs push a signal toward it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Check icon https://fieldbook.lizardi.mx/components/icon-check A check mark that draws itself from the short arm to the long arm, then settles. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Chevron icon https://fieldbook.lizardi.mx/components/icon-chevron A bare chevron that leans the way it points, doubling up for the two-way directions. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, direction ### Clapperboard icon https://fieldbook.lizardi.mx/components/icon-clapperboard A slate with a striped clapper stick hinged at the top left corner, snapping shut and swinging back open. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Clipboard icon https://fieldbook.lizardi.mx/components/icon-clipboard A board whose spring clip hops against the top edge, with a blank, checked or ruled face. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Clock icon https://fieldbook.lizardi.mx/components/icon-clock A round face whose hands sweep the dial; the variant picks which hour the pair is frozen at. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, hour ### Cog icon https://fieldbook.lizardi.mx/components/icon-cog A fine toothed wheel with a hex bore, both turning together so the machine part reads as one piece. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Compass icon https://fieldbook.lizardi.mx/components/icon-compass A dial with a kite needle that swings off north and settles back on the pivot at the centre. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Copy icon https://fieldbook.lizardi.mx/components/icon-copy Two stacked sheets where the front one slides clear of the sheet behind it, as if peeling off a duplicate. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Corner arrow icon https://fieldbook.lizardi.mx/components/icon-corner-arrow An arrow slipping out through the open corner of a rounded square, toward the corner it names. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, direction ### Crop icon https://fieldbook.lizardi.mx/components/icon-crop Two crop rails that slide off each other, opening the rectangle they cut out between them. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Cross icon https://fieldbook.lizardi.mx/components/icon-cross An upright cross with a high crossbar and softly rounded arms, swelling gently on a slow pulse. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Icon crossfade switch https://fieldbook.lizardi.mx/components/icon-crossfade-switch A toggle switch whose thumb icon fades and scales into a different icon as the switch flips between off and on. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, on, iconStyle, accent ### Disc icon https://fieldbook.lizardi.mx/components/icon-disc A record with a still rim and hub while three grooves turn around the spindle, so the spin actually reads. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Download icon https://fieldbook.lizardi.mx/components/icon-download An arrow that slides down into a tray, or out of a cloud, for save and export actions. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, variant ### Ellipsis icon https://fieldbook.lizardi.mx/components/icon-ellipsis Three dots that blink in sequence, laid out across or down for an overflow menu. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, direction ### Not equal icon https://fieldbook.lizardi.mx/components/icon-equal-not Two level bars with a slash that draws itself across them, cancelling the equals sign as it lands. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### EV charger icon https://fieldbook.lizardi.mx/components/icon-ev-charger A charging pillar on a pad with a cable outlet, and a bolt on the face that blinks while it delivers. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Expand icon https://fieldbook.lizardi.mx/components/icon-expand Two arrows breaking away toward opposite corners, pulling the view open as they go. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### External link icon https://fieldbook.lizardi.mx/components/icon-external-link A framed page with an open corner, where the arrow slides out past the frame toward the top right. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Fingerprint icon https://fieldbook.lizardi.mx/components/icon-fingerprint Nested ridges that draw one after another from the outside in, the way a print is read by a scanner. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Frame icon https://fieldbook.lizardi.mx/components/icon-frame A viewfinder whose four rounded corners breathe in turn around a fixed center point. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Gallery icon https://fieldbook.lizardi.mx/components/icon-gallery A framed slide with its neighbours peeking in from the rails, the strip nudging along as if paged. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Gauge icon https://fieldbook.lizardi.mx/components/icon-gauge A dial arc with a hub and a needle that swings up the scale and settles back, like a meter finding its reading. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Heart icon https://fieldbook.lizardi.mx/components/icon-heart A heart with two round lobes and a soft point, beating on a loop and filling solid in the on state. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, state ### Kanban icon https://fieldbook.lizardi.mx/components/icon-kanban Three board lanes hanging from the top rail, each card column dropping a beat after the one before it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Key icon https://fieldbook.lizardi.mx/components/icon-key A ring-bow key with two teeth on the shaft, jiggling around its bow the way a key works a stiff lock. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Icon label tabs https://fieldbook.lizardi.mx/components/icon-label-tabs A row of icon-and-label tab chips with a sliding highlight, where the panel below slides in the direction of the chosen tab. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultTab, chipGap ### Icon label toolbar https://fieldbook.lizardi.mx/components/icon-label-toolbar A compact toolbar of quiet icon buttons, each drawn in its own tint, with a leading back button whose label unfurls out of the icon on hover. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, hueSpread, count, showBack, activeIndex ### Layers icon https://fieldbook.lizardi.mx/components/icon-layers Stacked sheets seen in perspective, the top one lifting first and the ones below following a beat later. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Layout dashboard icon https://fieldbook.lizardi.mx/components/icon-layout-dashboard Four dashboard tiles in two uneven columns, each breathing in turn so the grid ripples top-left to bottom-right. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Link icon https://fieldbook.lizardi.mx/components/icon-link A two part chain that jiggles when the connection is tugged, with a pushpin reading for pinned references. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Loader icon https://fieldbook.lizardi.mx/components/icon-loader A busy indicator in three readings: a three-quarter ring, a chasing ring of dots, and four turning blades. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Log in icon https://fieldbook.lizardi.mx/components/icon-log-in An arrow that slides right through an open doorway, the door frame holding still while it enters. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Log out icon https://fieldbook.lizardi.mx/components/icon-log-out An arrow that slides right and away from an open doorway, leaving the still door frame behind it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Map pin icon https://fieldbook.lizardi.mx/components/icon-map-pin A teardrop marker that hops off the map and drops back on its point, with an off state struck through. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, state ### Maximize icon https://fieldbook.lizardi.mx/components/icon-maximize Four corner brackets that push apart in pairs, stretching the frame out to fill the screen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Menu icon https://fieldbook.lizardi.mx/components/icon-menu Three stacked bars that ripple sideways one after the other, the handle for a nav drawer. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Minimize icon https://fieldbook.lizardi.mx/components/icon-minimize Four corner brackets tucked inward in pairs, pulling the frame back down to a window. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Minus icon https://fieldbook.lizardi.mx/components/icon-minus A single rule that swells and settles, for collapse, remove and decrement controls. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Move icon https://fieldbook.lizardi.mx/components/icon-move An arrow aimed at the edge it should land on, shoving that way once per cycle while the edge holds. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, direction ### NFC icon https://fieldbook.lizardi.mx/components/icon-nfc Four nested arcs that ripple outward one after another, the way a tap-to-pay field reaches for a reader. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Orbit icon https://fieldbook.lizardi.mx/components/icon-orbit A solid body ringed by a single track, with a bead that rides all the way around it once per cycle. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Panel icon https://fieldbook.lizardi.mx/components/icon-panel A window frame whose docked panel edge slides while a chevron shows which way the panel is headed. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, variant ### Paperclip icon https://fieldbook.lizardi.mx/components/icon-paperclip A bent-wire clip hanging by its top bend, swinging the way a clipped page tugs it back and forth. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Pause icon https://fieldbook.lizardi.mx/components/icon-pause Two upright bars that blink one after the other, keeping time while playback is held. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Pin icon https://fieldbook.lizardi.mx/components/icon-pin A thumbtack that hops once and lands on its needle, with an off state that draws a slash across it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, state ### Play icon https://fieldbook.lizardi.mx/components/icon-play A solid play triangle that swells and settles on a slow pulse, like a transport button asking to be pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Plug zap icon https://fieldbook.lizardi.mx/components/icon-plug-zap A two-pin plug with a bolt dropping into it, so the charge looks like it lands on the prongs. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Plus icon https://fieldbook.lizardi.mx/components/icon-plus A plus sign that swells on the beat, offered plain or held inside a circle or a rounded square. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Radio icon https://fieldbook.lizardi.mx/components/icon-radio A transmitting dot with two pairs of arcs that swell away from it, an inner pair leading and an outer pair following. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Radio tower icon https://fieldbook.lizardi.mx/components/icon-radio-tower A braced mast whose tip throws two pairs of arcs outward, the near pair leading and the far pair trailing. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Refresh icon https://fieldbook.lizardi.mx/components/icon-refresh Two chasing arrow arcs that turn a full revolution, with counter-clockwise, dotted and disabled readings. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Icon reveal chip https://fieldbook.lizardi.mx/components/icon-reveal-fill-chip A small outlined chip that floods with its accent on hover while the label slides left and a hidden glyph fades in from the right. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, glyph, duration, fontSize ### Rotate icon https://fieldbook.lizardi.mx/components/icon-rotate An open ring with a single arrowhead that turns one quarter-tick at a time, plus a key that twists in place. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Route icon https://fieldbook.lizardi.mx/components/icon-route Two stops joined by a stepped connector that draws itself from the first node through to the last. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Search icon https://fieldbook.lizardi.mx/components/icon-search A magnifier that drifts gently up and back down, for search fields, filters and find controls. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Send icon https://fieldbook.lizardi.mx/components/icon-send A paper plane that slides forward on release, folded on the diagonal or flying flat and horizontal. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, variant ### Settings icon https://fieldbook.lizardi.mx/components/icon-settings A six tooth gear turning slowly around an open hub, the tooth profile making the rotation easy to read. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Icon Shape Morph https://fieldbook.lizardi.mx/components/icon-shape-morph A single filled icon smoothly reshapes itself into the next icon in a sequence, with the outline warping continuously between shapes rather than cross-fading or swapping. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cycleSeconds, holdSeconds ### Shrink icon https://fieldbook.lizardi.mx/components/icon-shrink Two arrows drawn back in from opposite corners, folding the view down to size. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Signal icon https://fieldbook.lizardi.mx/components/icon-signal Four bars on a shared baseline that blink left to right; unreached bars shrink to stubs at the chosen level. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, level ### Sliders icon https://fieldbook.lizardi.mx/components/icon-sliders Three rails with handles that travel along them one after another, laid out across or down the grid. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, direction ### Star icon https://fieldbook.lizardi.mx/components/icon-star A five-point star that swells on a beat and fills solid once the on state marks it a favorite. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, state ### Icon sweep delete button https://fieldbook.lizardi.mx/components/icon-sweep-delete-button A destructive button whose darker icon tile sweeps from the right edge across the face on hover, covering the label while the bin lid tips open. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, width, sweepMs ### Icon swell tooltip https://fieldbook.lizardi.mx/components/icon-swell-tooltip-button A chromeless icon button whose glyph swells and recolors on hover while a label chip unfurls above it from its left edge. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, iconSize, swell, openDelay ### Icon takeover delete https://fieldbook.lizardi.mx/components/icon-takeover-delete-button A destructive button split into a bold word and a narrow icon cell; hovering or focusing grows the cell across the whole button until only the glyph remains, with a two-tap confirm on touch. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, cellWidth, glyph, confirmOnTap ### Thumbs icon https://fieldbook.lizardi.mx/components/icon-thumbs A hand with the thumb out, wiggling at the wrist. The direction prop flips the whole hand up or down. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, direction ### Icon tile flood button https://fieldbook.lizardi.mx/components/icon-tile-flood-button A button with a solid accent icon tile at its left edge; hovering pours that accent across the pale body and flips the label ink to white. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, floodMs, radius, maxLabelWidth ### Timer icon https://fieldbook.lizardi.mx/components/icon-timer A countdown timer with a pull handle on top whose hand sweeps out from the pivot, plus a stopped reading. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, state ### Toggle icon https://fieldbook.lizardi.mx/components/icon-toggle A pill track with a solid knob resting at one end, nudging along the run as if testing the way across. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, state ### Trash icon https://fieldbook.lizardi.mx/components/icon-trash A bin whose lid tips up on its hinge and drops back, with a plain or ribbed body. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Unplug icon https://fieldbook.lizardi.mx/components/icon-unplug A socket and a plug facing each other with their pins clear of contact; the plug slides further out and back. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Upload icon https://fieldbook.lizardi.mx/components/icon-upload An arrow that lifts out of a tray, or up into a cloud, for send and publish actions. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Volume icon https://fieldbook.lizardi.mx/components/icon-volume A speaker cone with waves that ring outward from its mouth, or a drawn slash and cross when sound is cut. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, level ### Wifi icon https://fieldbook.lizardi.mx/components/icon-wifi Arcs that ripple outward from a solid dot, one arc per strength step, with a drawn slash for the off reading. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, level ### X mark icon https://fieldbook.lizardi.mx/components/icon-x A cross that shakes off the action it cancels, offered plain or held inside a circle or a rounded square. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, variant ### Image panel login card https://fieldbook.lizardi.mx/components/image-panel-login-card A wide login card split into a form panel and a decorative image panel, with a row of three icon-only alternate sign-in buttons and terms text below. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: heading, accentColor, imageSide ### Image panel signup card https://fieldbook.lizardi.mx/components/image-panel-signup-card A wide signup card split into a form panel and a decorative image panel, with paired password fields and three icon-only provider buttons under a divider. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, accentColor, imageSide ### Select All Checklist https://fieldbook.lizardi.mx/components/indeterminate-select-all A parent checkbox that shows a dash when only some of its child items are checked, and a checkmark once every item is. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: itemCount, startState, accentColor ### Infinite loop path loader https://fieldbook.lizardi.mx/components/infinite-loop-path-loader A figure eight loader where a bright segment draws endlessly around a faint track, its head and tail moving at different rates so the dash breathes. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: strokeWidth, speed, accent, showTrack, label ### Initials avatar cluster https://fieldbook.lizardi.mx/components/initials-avatar-cluster A row of round initials tokens that summarizes a group of people, ending in a muted overflow count for the rest. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, accentColor, overflowCount, gap ### Initials fallback avatar https://fieldbook.lizardi.mx/components/initials-fallback-avatar A single avatar that shows a photo when given one, otherwise centers two letters of initials on a soft tinted shape. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, shape, accent, label ### Ink bloom button https://fieldbook.lizardi.mx/components/ink-bloom-button A heavy outlined button whose translucent tint is overtaken by a solid disc of accent that blooms out from the center on hover or keyboard focus. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, borderWidth, shadowOffset, duration, radius ### Inlaid edge button https://fieldbook.lizardi.mx/components/inlaid-edge-button A button built like an inlaid plate: a lit-to-dim rim, a recessed panel sunk inside it, and a label that brightens when the pointer arrives. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, rimWidth, radius, labelGlow ### Inline command list https://fieldbook.lizardi.mx/components/inline-command-list A search field over grouped, filterable action rows that narrows as you type and moves a highlight with the arrow keys, meant to sit inline rather than in a dialog. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: placeholder, accent, maxHeight ### Inline labeled bar chart https://fieldbook.lizardi.mx/components/inline-labeled-bar-chart A horizontal bar chart with the category name printed inside each bar and the value printed just past its tip, so no axis column is needed. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, barRadius, rowHeight, animate ### Inline term preview https://fieldbook.lizardi.mx/components/inline-term-preview An underlined term in body text that opens a small definition panel on hover or focus, scaling in from the corner nearest the term. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: openDelay, closeDelay, width, accent ### Inner Dome Viewer https://fieldbook.lizardi.mx/components/inner-dome-viewer A gallery of photo tiles arranged across the inside of a rotating sphere, dragged like looking around the inside of a dome, with tap-to-enlarge. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: segments, maxVerticalRotation, grayscale, imageBorderRadius ### Inner Rim Send Button https://fieldbook.lizardi.mx/components/inner-rim-send-button A send button lit from inside by a soft rim of light hugging its inner edge, with a hollow outlined paper plane that takes off along its own diagonal on hover, focus and press. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, rim, launch, outline ### Input with affix https://fieldbook.lizardi.mx/components/input-group-affix A text field fused with a leading icon or short label, like a URL scheme, sharing one bordered shell that focuses as a single control. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: prefixLabel, placeholder, accent, showIcon ### Inset Edge Pill https://fieldbook.lizardi.mx/components/inset-edge-pill-button A pale pill with a thin ring all round and a thicker lip along the bottom only, so it reads as a physical key that floods with color on hover. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, lip, width, duration ### Breathing Inset Button https://fieldbook.lizardi.mx/components/inset-panel-send-button A pale moulded button whose inner panel pulls away from the rim on hover while the send glyph slides a short distance toward the label. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, insetGap, glyphShift, radius ### Inset plate button https://fieldbook.lizardi.mx/components/inset-plate-button A button inside a button: an outer shell holds a smaller floating plate that carries the label, and pressing shrinks only the inner plate while the shell stays put. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, inset, pressScale, radius ### Inset sheen button https://fieldbook.lizardi.mx/components/inset-sheen-button A pale utility button with a hairline border, a one pixel highlight along its top edge and a pressed state that flips the sheen inward. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, radius, disabled ### Instant Hint Tooltip https://fieldbook.lizardi.mx/components/instant-hint-tooltip A small label that fades and scales into view beside an element on hover or keyboard focus, giving a quick hint without adding visible clutter. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: openDelay, side, accentColor ### Intent button set https://fieldbook.lizardi.mx/components/intent-button-set A complete button family in one file: solid, soft, outline, ghost, link and danger weights across four sizes, with icon slots, a busy state and a real focus ring. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: variant, size, accent, withIcon, busy, disabled ### Interactive spin globe https://fieldbook.lizardi.mx/components/interactive-spin-globe A shaded canvas globe that autorotates slowly, lights glowing markers over scattered locations, and can be grabbed and spun by hand. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, rotationSpeed, markerCount, glowIntensity ### Interlocking comb button https://fieldbook.lizardi.mx/components/interlocking-comb-button Two combs of vertical bars slide in from the top and the bottom and mesh together to fill the button, inverting the label as they pass. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, bars, duration, radius ### Interruptible hover swell https://fieldbook.lizardi.mx/components/interruptible-hover-swell A tile whose two stage hover swell always starts from its current size, so darting the pointer on and off never makes it snap. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: stageOneScale, peakScale, duration, accent, showValue ### Invert and grow button https://fieldbook.lizardi.mx/components/invert-and-grow-button A bordered block that swaps its ink and paper colors and grows from its center while hovered, then snaps flat under the press. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, growth, borderWidth ### Invert Fill Button https://fieldbook.lizardi.mx/components/invert-fill-button A small outlined button that fills solid on hover while its label crosses to the opposite value, trading foreground and background cleanly. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, height, radius, duration ### Invert and lift button https://fieldbook.lizardi.mx/components/invert-lift-outline-button A tall outlined button that inverts to a solid fill and lifts a couple of pixels on hover, then settles flat again when pressed. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, lift, borderWidth ### Invert on hover pill https://fieldbook.lizardi.mx/components/invert-on-hover-pill A filled pill that trades fill and label colors and swells slightly on hover or keyboard focus, squeezing below its resting size while pressed. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, hoverScale, radius, glow ### iPhone Device Frame https://fieldbook.lizardi.mx/components/iphone-device-frame A vector phone bezel with a camera cutout that frames a photo, a looping video, or a blank placeholder inside its own rounded screen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: bezelTone, screenContent, accentColor ### Iridescent sheen https://fieldbook.lizardi.mx/components/iridescent-sheen A silk like surface where light slides along soft folds, shifting between two hues as the folds move under it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, partner, speed, amplitude, followPointer ### Iron filings field https://fieldbook.lizardi.mx/components/iron-filings-field A square grid of tiny dashes that all rotate to point at the pointer, like iron filings snapping to a magnet dragged over them. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gridSize, accent, dashLength, stiffness, idleDrift ### Isometric Stack Button https://fieldbook.lizardi.mx/components/isometric-stack-button A button drawn in isometric projection that fans into a stack of parallel copies on hover and compresses again when pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, layers, spread ### Italic outline fill button https://fieldbook.lizardi.mx/components/italic-outline-fill-button A quiet outlined button set in italic type that inverts to a solid accent fill the moment a pointer or keyboard reaches it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, radius, italic, size ### Italic release pill button https://fieldbook.lizardi.mx/components/italic-release-pill-button A double-bordered pill whose heavy slanted label straightens on hover while the fill lightens and a colored hard shadow blooms beneath, then presses down onto it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lean, tracking, glow ### Ivory keycap button https://fieldbook.lizardi.mx/components/ivory-keycap-button A pale keycap raised on a matching ledge; hovering thickens its inset rim and pressing seats it flush against the surface. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, capColor, label, travel, tracking ### Jello squash button https://fieldbook.lizardi.mx/components/jello-squash-button An outlined button that floods with color on hover and wobbles through a squash and stretch sequence before it settles. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, intensity, duration ### Jelly skew button https://fieldbook.lizardi.mx/components/jelly-skew-button A pill button that wobbles when you hover it, skewing hard once then settling through a run of smaller and smaller counter skews. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, amplitude, duration, radius ### Jitter shake button https://fieldbook.lizardi.mx/components/jitter-shake-button A solid pill that buzzes in a tight diagonal loop for as long as the pointer rests on it and stops dead the instant you leave. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, amplitude, speed ### Joined action bar https://fieldbook.lizardi.mx/components/joined-action-bar A row of buttons welded into one bar with collapsed hairline seams, rounded only at the outer ends, and a trailing square segment that opens an overflow menu. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: orientation, segments, size, showTextSegment, accent ### Joined Button Group https://fieldbook.lizardi.mx/components/joined-button-group A row of buttons fused edge to edge into one segmented control, with shared seams that brighten between whichever two buttons are hovered or pressed. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: orientation, buttonCount, accent ### Key travel button https://fieldbook.lizardi.mx/components/key-travel-button A rounded key standing on a tall base that shortens on hover and disappears under the press, seating the key flat. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, travel, tracking ### Key Turn Chip https://fieldbook.lizardi.mx/components/key-turn-chip A small filled chip whose key glyph jiggles like it is feeling for a lock on hover, then turns a quarter and unlocks on click. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, unlockedLabel, accent, jiggleDegrees, unlocked ### Keyboard Context Menu https://fieldbook.lizardi.mx/components/keyboard-context-menu A dropdown action menu with grouped items, keyboard shortcuts, and a nested submenu, fully drivable from the keyboard with a sliding focus highlight. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, showShortcuts, accentColor ### Keyboard Dropdown Menu https://fieldbook.lizardi.mx/components/keyboard-dropdown-menu A trigger button opens a floating action list whose highlight background glides smoothly between whichever item is hovered or keyboard-focused, with full arrow-key and type-ahead navigation. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, itemCount, closeOnSelect ### Keyboard pill tabs https://fieldbook.lizardi.mx/components/keyboard-pill-tabs A two-tab switcher with a pill highlight that glides between labels and full roving-focus keyboard navigation between tabs. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: tabOneLabel, tabTwoLabel, accent, pillSpring ### Shortcut Key Chip https://fieldbook.lizardi.mx/components/keycap-combo-group Small pill tokens for individual keys that group together inline to spell out a keyboard shortcut. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: comboText, accentColor, size, grouped ### Keycap lift button https://fieldbook.lizardi.mx/components/keycap-lift-button A mechanical-key button that lifts on hover, keeps a solid bottom lip, and swaps its whole shadow stack inward when it is pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lipDepth, travel, height ### Keycap plate button https://fieldbook.lizardi.mx/components/keycap-plate-button A square plate framing a rounded key that travels down on a press and stays depressed while the button is held, by pointer or keyboard. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, travel, plateBorder, keyRadius ### Keycap press button https://fieldbook.lizardi.mx/components/keycap-press-button A pale keycap with real thickness built from stacked hard shadows, which travels down and loses height when pressed. Frameworks: react Access: member Public prop names: label, accent, depth, travel, size ### Keyframe morph loop https://fieldbook.lizardi.mx/components/keyframe-morph-loop A square that runs a looping routine of grow, spin and round into a circle, holding at each pose because the timing stops are uneven. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: duration, repeatDelay, maxScale, accent, paused ### Keystroke Text https://fieldbook.lizardi.mx/components/keystroke-text Text appears one character at a time as if being typed live, with a blinking cursor that keeps going after typing finishes. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: words, typeSpeedMs, loop, cursorColor ### Label icon swap button https://fieldbook.lizardi.mx/components/label-icon-swap-button A pill button that slides its label out and a tray arrow in on hover or focus, then runs a short repeating beat on the arrow while focused. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, width, height, beat ### Rolling Label Button https://fieldbook.lizardi.mx/components/label-roll-button A compact glowing pill that rolls its caption up out of view and brings a second line in from below on hover. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, hoverLabel, accent, glow, rollMs ### Label swap slide button https://fieldbook.lizardi.mx/components/label-swap-slide-button A bordered pill that swaps its whole contents on hover: the resting row slides up and out while a second row with its own icon and colour slides in from below. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: restLabel, hoverLabel, accent, surface, direction ### Labeled checkbox https://fieldbook.lizardi.mx/components/labeled-checkbox A small square checkbox paired with a text label, shown plain, with helper text, disabled, and as a card that highlights its border when checked. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, helperText, showDisabled ### Labeled field block https://fieldbook.lizardi.mx/components/labeled-field-block A form field wrapper that pairs a label, control, hint and error message, switching between stacked and side-by-side layouts as the container narrows. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: orientation, invalid, disabled, accent, gap ### Labeled hairline divider https://fieldbook.lizardi.mx/components/labeled-hairline-divider A thin rule that separates two sections, optionally breaking to show a small centered caption between two short lines. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: orientation, label, accent, thickness ### Labeled progress bar https://fieldbook.lizardi.mx/components/labeled-progress-bar A labeled progress track whose fill eases to a new width while a percentage readout counts smoothly to match. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: value, accentColor, label, trackHeight ### Labeled radio group https://fieldbook.lizardi.mx/components/labeled-radio-group A compact vertical group of radio options, each with an inline text label, for a single settings choice. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, defaultValue ### Labeled toggle row https://fieldbook.lizardi.mx/components/labeled-toggle-row A small on/off switch paired inline with its own text label, sized for a settings list row. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, checked, accent, size ### Lagging orb follower https://fieldbook.lizardi.mx/components/lagging-orb-follower A soft disc that chases the pointer on a deliberately floppy spring, swinging past it and wobbling back instead of locking on. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: stiffness, damping, size, accent, showTether ### Latching icon toggle https://fieldbook.lizardi.mx/components/latching-icon-toggle A square button that latches on and off: a filled plate fades in, the glyph swaps for its matched counterpart, and a caption beside it spells the state out in words. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: glyph, startPressed, accent, size, showCaption ### Latching square toggle https://fieldbook.lizardi.mx/components/latching-square-toggle A compact square icon button that latches between a faint outlined off state and a solid accent-filled pressed state. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: pressed, size, disabled, accentColor ### Launch orbit button https://fieldbook.lizardi.mx/components/launch-orbit-button A pill that breathes a ring outward on a loop, scatters its dust motes on hover, and sends a small craft looping across the label. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, dotCount, pulse, flightMs ### Launching send button https://fieldbook.lizardi.mx/components/launching-send-button A send button whose paper plane banks upward and flies off the right edge on hover while the word dissolves, then re-enters from the left after a click commits the flight. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, flyDistance, bankDegrees, bloom ### Layered Context Menu https://fieldbook.lizardi.mx/components/layered-context-menu A right-click menu with grouped actions, a nested submenu, checkbox items, and a radio group, all opening at the pointer's position. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: surfaceLabel, accent ### Layered ring loader https://fieldbook.lizardi.mx/components/layered-ring-loader A centered emblem of concentric partial rings spinning at different speeds and directions, with a status title and subtitle fading in below. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: title, subtitle, size, ringColor ### Layered shadow headline https://fieldbook.lizardi.mx/components/layered-shadow-headline A short bold headline with a duplicate copy offset behind it, diagonally hatched in an accent color, that slowly drifts to give the letters a slab of moving shadow. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, accent, offset, speed ### Layered trend chart https://fieldbook.lizardi.mx/components/layered-trend-chart A combination chart that layers a bar series, a filled area and a line on one shared time axis, so volume, cumulative total and rate can be read together. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: lineColor, areaColor, showBars, showArea ### Layout toggle switch https://fieldbook.lizardi.mx/components/layout-toggle-switch A switch whose knob crosses the track by animating an actual layout change rather than a translate, so the throw stays exact at any track width. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: on, accent, bounce, trackWidth, showLabels ### Leader line pie https://fieldbook.lizardi.mx/components/leader-line-pie A solid pie chart whose values sit outside the circle, each tied back to its slice by a two-segment leader line. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, hueRange, labelDistance, showLeaders, gap ### Leap and tint button https://fieldbook.lizardi.mx/components/leap-and-tint-button A pale pill that leaps upward on hover or focus while its fill turns to the accent and its neutral shadow blooms into a large tinted pool in the same hue. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, leapDistance, shadowSpread, letterSpacing ### Left Edge Fill Button https://fieldbook.lizardi.mx/components/left-edge-fill-button A soft rounded slab where a colored panel grows out of the left edge to fill the whole shape on hover, flipping the label as it passes. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, radius, duration, sinkOnPress ### Left Rule Notice https://fieldbook.lizardi.mx/components/left-rule-notice A quiet boxed message whose tone is carried by a single thick colored rule running down its left edge. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: tone, accent, title, message, dismissible ### Letter cascade button https://fieldbook.lizardi.mx/components/letter-cascade-button A wide solid button whose centred label drops away and is rebuilt one letter at a time as each character falls into place from above. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, stagger, tracking, sink ### Letter drop press button https://fieldbook.lizardi.mx/components/letter-drop-press-button A key-cap button on a darker ledge whose label drops away on hover and is rebuilt letter by letter from above, pressing down onto the ledge when clicked. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, stagger, ledge, tracking ### Letter roll in https://fieldbook.lizardi.mx/components/letter-roll-in A line of text where every character turns over on a horizontal axis, the old face rolling away as an identical face rolls in from below. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, stagger, delay, accent, duration ### Letter spread drop button https://fieldbook.lizardi.mx/components/letter-spread-drop-button A pale pill whose letters push apart as it fills with an accent colour and a soft pool blooms below it, then drops onto that pool while held. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, spread, dropPx, poolSize ### Letter swap copy button https://fieldbook.lizardi.mx/components/letter-swap-copy-button A raised copy button whose label rebuilds itself letter by letter on hover while its icon chip pulses and draws a check when the copy lands. Frameworks: react Access: open Public prop names: label, doneLabel, accent, stagger, resetMs ### Lift and fill pill https://fieldbook.lizardi.mx/components/lift-and-fill-pill An outlined pill that jumps a fixed distance straight up and fills solid with its accent while pointed at, then drops back on the same curve. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, lift, radius, duration ### Lift and settle button https://fieldbook.lizardi.mx/components/lift-and-settle-button A solid button that floats up and takes on the accent colour on hover, then sinks past its resting line into a collapsed shadow when pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lift, pressDepth, radius ### Lift and Sink Button https://fieldbook.lizardi.mx/components/lift-and-sink-button A tinted monospace button that floats up on hover and sinks into its own inset shadow when pressed. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, travel, height ### Lifting glyph row https://fieldbook.lizardi.mx/components/lifting-glyph-button-row A short row of icon-only buttons where the hovered glyph lifts off the baseline while a soft circular tint fades in behind it, each item tinted in its own hue. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: count, accent, lift, size, varyHues ### Lifting hard shadow pill https://fieldbook.lizardi.mx/components/lifting-hard-shadow-pill A thick outlined pill that drifts up and to the left on hover while its flat solid shadow stretches out underneath it, and presses flush against the page while held. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, restShadow, hoverShadow, radius, outline ### Lifting share chip https://fieldbook.lizardi.mx/components/lifting-share-chip A small solid chip with a glyph and a short caps label that lifts a few pixels and softens on hover, seats itself when pressed, and can toggle a filled glyph. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, glyph, lift ### Light Beam Flare https://fieldbook.lizardi.mx/components/light-beam-flare A narrow beam falls from the top of a dark stage into a wide horizontal flare, with drifting haze and a beam that leans toward the pointer. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, flowSpeed, hazeIntensity, beamWidth, tiltStrength ### Light beam slats https://fieldbook.lizardi.mx/components/light-beam-slats Long diagonal slats sliding past each other in the dark, each catching a band of light as it crosses so the panel breathes like a lit blind. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, beamCount, beamWidth, tilt, speed, grain ### Light column beam https://fieldbook.lizardi.mx/components/light-column-beam A single column of light stands in a dark frame, breathing in width while its inner texture scrolls upward through a two colour grade. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: topColor, bottomColor, intensity, width, rotationSpeed, followPointer ### Light cone beam https://fieldbook.lizardi.mx/components/light-cone-beam A grainy wedge of light flares up from a hot line at the foot of the frame, turning slowly so its edges catch different colors. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tint, glow, grain, baseWidth, motion, speed ### Light pool button https://fieldbook.lizardi.mx/components/light-pool-button A lit tube-sign button that spills a blurred pool of its own colour onto the surface beneath it and swaps figure for ground when hovered or focused. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, intensity, poolSize, invertOnHover ### Light sweep button https://fieldbook.lizardi.mx/components/light-sweep-button A quiet outlined button whose letters and hairline border are lit by a diagonal bar of light that sweeps across, rests a second, and sweeps again. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, sweepMs, restMs, bandWidth ### Light sweep effect https://fieldbook.lizardi.mx/components/light-sweep-effect A diagonal band of light that sweeps once across a button, triggered by hover, tap, or a repeating timer. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: trigger, duration, angle, accent ### Light sweep button https://fieldbook.lizardi.mx/components/light-sweep-outline-button A lit outline button whose glowing edge sends a narrow band of light sweeping across it on hover. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, glow, duration ### Light Threads https://fieldbook.lizardi.mx/components/light-thread-fan Glowing filaments fanned out from a single pinch point, braiding as their phases advance and flaring near white where they cross. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, threads, speed, spread, glow ### Line by line headline reveal https://fieldbook.lizardi.mx/components/line-by-line-headline-reveal A headline reveals one full wrapped line at a time: each line unclips left to right like a curtain lifting while a colored tick lands on its trailing edge and stays lit, leaving a visible trail once the sequence settles. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, staggerMs, riseDistance, accent ### Link preview card https://fieldbook.lizardi.mx/components/link-preview-card A small preview panel that appears near a link or username after a brief hover, showing a summary of what is behind it without requiring a click. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: openDelay, closeDelay, side ### Link Preview Card https://fieldbook.lizardi.mx/components/link-preview-card-2 A rich preview card that fades and slides in from whichever side it opens on when hovering a linked name, with a brief delay to avoid flicker. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: side, align, openDelay, accent ### Link thumbnail peek https://fieldbook.lizardi.mx/components/link-thumbnail-peek Hovering a link in running text lifts a small framed thumbnail of where it leads, with the page title and host underneath. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: openDelay, cardWidth, side, accent, showCaption ### Link thumbnail peek https://fieldbook.lizardi.mx/components/link-thumbnail-peek-2 An inline link that unfolds a small mock thumbnail of its destination above the word while the pointer rests on it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: openDelay, side, width, accent, showCaption ### Link Thumbnail Peek https://fieldbook.lizardi.mx/components/link-thumbnail-peek-3 An inline link that pops a small thumbnail of its destination above the text while the pointer rests on it. Frameworks: react Access: member Public prop names: openDelay, side, width, accent, showCaption ### Linked Profile Preview https://fieldbook.lizardi.mx/components/linked-profile-preview A rich preview card that appears when a visitor hovers or focuses a linked name, showing an avatar, bio and follower stats, with an optional cursor-following float. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, followCursor, accent, openDelay ### Liquid chrome emblem https://fieldbook.lizardi.mx/components/liquid-chrome-emblem A drawn emblem rendered as poured liquid metal, its highlights crawling and pooling across the shape as the pointer moves. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: speed, refraction, patternScale, tint, contrast, followPointer ### Liquid metal drift https://fieldbook.lizardi.mx/components/liquid-metal-drift Rim lit blobs of heavy liquid form, stretch and merge across a black field, bulging toward the pointer like iron filings toward a magnet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rimColor, speed, sharpness, flowDirection, glow, pointerMagnet ### Liquid metal swirl https://fieldbook.lizardi.mx/components/liquid-metal-swirl Molten ribbons wrap around a hot core and fling thin bright filaments outward as the whole mass turns over itself. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, speed, swirl, glow, detail, grain ### Liquid swirl vortex https://fieldbook.lizardi.mx/components/liquid-swirl-vortex Two pools of thick paint folded around a slow whirlpool, with hard edges and chunky pixels that make it look printed rather than rendered. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: colorA, colorB, spinSpeed, swirlAmount, pixelSize, autoRotate ### Liquid warp headline https://fieldbook.lizardi.mx/components/liquid-warp-headline A headline drawn on canvas that bends and ripples like light through water, with the distortion pooling wherever the pointer hovers. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: headline, textColor, warpStrength, speed, ripple ### Liquid wave button https://fieldbook.lizardi.mx/components/liquid-wave-button A dark pill half full of colored liquid whose surface rolls in a continuous, never-repeating wave. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, liquid, level, waveSeconds, paused ### Live keycap https://fieldbook.lizardi.mx/components/live-keycap A physical looking keycap that presses down when clicked and mirrors the matching key on the reader's real keyboard. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: keyLabel, accent, travel, watchKeyboard, tone ### Loading Placeholder Blocks https://fieldbook.lizardi.mx/components/loading-placeholder-blocks Dim rounded placeholder blocks that stand in for an avatar and stacked text lines while content loads, with a diagonal light band sweeping across them in sync. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: loaded, rows ### Localized booking calendar https://fieldbook.lizardi.mx/components/localized-booking-calendar A two month range picker inside a card whose title, subtitle, and month names switch between two languages from a small select menu in the header. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: language, title, accent ### Locked ratio frame https://fieldbook.lizardi.mx/components/locked-ratio-frame A container that keeps its content locked to a chosen width-to-height ratio no matter how wide it stretches. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: ratio, radius, accentColor ### Looping flight send button https://fieldbook.lizardi.mx/components/looping-flight-send-button A card-like send button that lifts off its shadow on hover while its paper plane loops up and away and returns, and squashes flat when clicked. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lift, loopSeconds, arcHeight ### Looping text ribbon https://fieldbook.lizardi.mx/components/looping-text-ribbon A colored ribbon carries a repeating phrase along a wavy, circular, or arched path, scrolling endlessly like a seal or badge. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: phrase, shape, ribbonColor, speed, pauseOnHover ### Looping typewriter text https://fieldbook.lizardi.mx/components/looping-typewriter-text A line of text types itself out character by character, holds, deletes back to nothing, and types the next phrase from a list, cycling forever behind a blinking caret. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: phrases, typeSpeed, holdSeconds, accent ### Lozenge swipe highlight https://fieldbook.lizardi.mx/components/lozenge-swipe-highlight-button A bare monospace label with a colored lozenge parked at its right that slides across and stretches into a full highlight on hover. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, dotSize, springiness, durationMs ### Luminous ribbon field https://fieldbook.lizardi.mx/components/luminous-ribbon-field A canvas backdrop where a few glowing ribbons weave across the frame, tapering to points at both edges and blooming toward white where they cross. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: ribbonCount, accent, speed, thickness, glow ### Magnetic button https://fieldbook.lizardi.mx/components/magnetic-button A button that drifts toward the pointer while it is inside a set radius and springs back to rest when it leaves, with the label and arrow shifting a little further than the body. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: strength, radius, label ### Magnetic dust button https://fieldbook.lizardi.mx/components/magnetic-dust-button A pill button surrounded by loose specks of dust that rush into its center on hover and drift back out to their own resting spots when released. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, speckCount, spread, pull ### Magnetic particle ring https://fieldbook.lizardi.mx/components/magnetic-particle-ring A drifting field of tiny specks that the pointer catches and reorganises into a rippling ring, releasing them again as it moves on. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, ringRadius, magnetRadius, wave, autoDrift, accent ### Magnetic project target https://fieldbook.lizardi.mx/components/magnetic-project-target A custom round cursor with text circling its rim that drifts after the pointer and snaps onto a call to action pill when it comes close. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, backdropWord, rimText, accent, captureRadius, followLag ### Magnetic pull target https://fieldbook.lizardi.mx/components/magnetic-pull-target A tile that leans toward the pointer whenever it comes inside a set radius, pulling harder the closer it gets and easing home when the pointer leaves. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: strength, range, onlyOnHover, showRadius, accent ### Magnifying icon dock https://fieldbook.lizardi.mx/components/magnifying-icon-dock A row of app icons in a translucent bar that grow larger the closer the pointer gets to each one, easing back to normal size when the pointer leaves. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, baseSize, magnification, iconCount ### Magnifying icon dock https://fieldbook.lizardi.mx/components/magnifying-icon-dock-2 A macOS-style dock of circular icon buttons that grow smoothly as the pointer nears them and reveal a label above the active icon. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: baseItemSize, magnification, itemCount ### Marker highlight https://fieldbook.lizardi.mx/components/marker-highlight-text A phrase with a marker band that wipes in behind it from left to right when the line first comes into view, leaving the words sitting on a colour block. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, duration, delay, bandHeight, skew ### Marquee reveal menu https://fieldbook.lizardi.mx/components/marquee-reveal-menu A stack of full-height rows where hovering a row slides in a scrolling colored band of its label and a thumbnail from the pointer's nearest edge. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rowCount, marqueeSpeed, bandColor ### Mascot zoom play button https://fieldbook.lizardi.mx/components/mascot-zoom-play-button An outlined pill carrying a small pixel mascot that scales up and slides across on hover, pushing one word out the right side while a second word arrives from the left. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: restLabel, hoverLabel, accent, zoom, staggerMs ### Masked Reveal Accordion https://fieldbook.lizardi.mx/components/masked-reveal-accordion An accordion whose panels are uncovered by a moving hard-edged mask as they open, so answers appear line by line instead of fading as a block. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, keepMounted, travel, duration, curve ### Masked reveal disclosure https://fieldbook.lizardi.mx/components/masked-reveal-disclosure A disclosure whose panel grows to its own natural height while a soft gradient edge wipes the content into view from the top, then runs backwards on close. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, defaultOpen, durationMs, keepRendered, accent ### Masonry flow https://fieldbook.lizardi.mx/components/masonry-flow A masonry wall that packs tiles of varying height into columns, lifts each one in as it scrolls into view, and re-seats the whole grid when the column count changes. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: columns, gap ### Media masked heading https://fieldbook.lizardi.mx/components/media-masked-heading A bold heading acts as a cutout window onto drifting media behind it, which leans opposite the pointer for a parallax feel and can replay its reveal on hover. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, reveal, parallax, align ### Meeting Slot Scheduler https://fieldbook.lizardi.mx/components/meeting-slot-scheduler A booking card that puts a month grid beside a scrollable list of quarter-hour time slots, some dates disabled and shown struck through, ending in a summary line and a Continue button. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, slotMinutes, unavailableCount ### Mega nav menu https://fieldbook.lizardi.mx/components/mega-nav-menu A horizontal top navigation bar whose triggers open dropdown or mega panels sharing one animated viewport that resizes to fit each panel's content. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, openOnHover, panelWidth ### Merging blob backdrop https://fieldbook.lizardi.mx/components/merging-blob-backdrop A wide backdrop of oversized soft blobs that slide and orbit on staggered loops, fusing into one liquid mass with a blur and threshold pass wherever they meet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, secondary, blobCount, speed, softness, followPointer ### Meshing gears chip https://fieldbook.lizardi.mx/components/meshing-gears-chip A settings chip with two interlocked cogs that turn in opposite directions whenever the pointer is on it, at speeds set by their tooth counts. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, spinSeconds, secondGear ### Meteor shower https://fieldbook.lizardi.mx/components/meteor-shower Tiny bright heads with thin trailing streaks fall across a panel on one shared angle, each with its own delay and speed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: count, angle, minDuration, maxDuration, tailLength, accentColor ### Metric switch bar chart https://fieldbook.lizardi.mx/components/metric-switch-bar-chart A dense daily bar chart with two metric tiles in the header; clicking a tile morphs the bars over to that metric. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, secondColor, days, defaultMetric, animate ### Milestone progress track https://fieldbook.lizardi.mx/components/milestone-progress-track A progress track marked at quarter intervals, with a big counting number above it and passed ticks that brighten. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: value, accentColor, trackHeight, showTicks ### Minimal email login https://fieldbook.lizardi.mx/components/minimal-email-login A password-free login page with a small brand mark, a welcome heading, one required email field, a single submit button, and two alternate sign-in options below a divider. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: brandName, accentColor ### Minimal email sign in https://fieldbook.lizardi.mx/components/minimal-email-sign-in A password-free sign-in page with a brand mark, a welcome heading, one email field, a primary button, and two alternative sign-in options below a divider. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: brandName, accentColor, welcomeText ### Minimal Single Date Picker https://fieldbook.lizardi.mx/components/minimal-single-date-picker A bare single month calendar with a plain text month and year heading and two arrow buttons, built for picking one date with the fewest visual parts possible. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, startMonth, startYear, bordered ### Minimum-Stay Range Picker https://fieldbook.lizardi.mx/components/minimum-stay-range-picker A single month range picker that enforces a minimum number of nights between the two picked dates, with a short caption below the grid explaining the rule. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, minNights, startMonth, startYear ### Mirror warp field https://fieldbook.lizardi.mx/components/mirror-warp-field A full bleed sheet of polished metal that folds and refolds itself, with a dent that spreads out from wherever the pointer touches it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: tint, speed, foldDepth, waveX, waveY, interactive ### Mobile date drawer https://fieldbook.lizardi.mx/components/mobile-date-drawer A date field styled for touch that opens its calendar as a bottom sheet sliding up from the edge of the frame instead of a small floating popover. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, caption ### Model picker prompt box https://fieldbook.lizardi.mx/components/model-picker-prompt-box A prompt composer with an auto growing field, a dropdown for choosing which assistant handles the request, an attach control and a send action. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, headline, accent, maxRows, showAttach ### Molded bevel button https://fieldbook.lizardi.mx/components/molded-bevel-button A hard-cornered slab button with four inset bevel bands, a blur-free offset shadow, and a press that drops it flush onto the surface. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, bevelWidth, dropDepth, uppercase ### Molded key send button https://fieldbook.lizardi.mx/components/molded-key-send-button A send button molded out of the page itself: a raised outer shell holding a recessed inner pill with a paper plane and a label. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, radius, depth, showIcon ### Month grid date picker https://fieldbook.lizardi.mx/components/month-grid-date-picker A single-month calendar grid for picking a date, with a weekday header, muted days from neighboring months, a filled accent circle on the picked day, and a dot marking today. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, showOutsideDays, weekStartsMonday ### Mood swap button https://fieldbook.lizardi.mx/components/mood-swap-button A round button holding a drawn face that shifts expression on hover and press, then locks the mood in when clicked. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, accent, mood, showCaption, strokeWeight ### Morph image carousel https://fieldbook.lizardi.mx/components/morph-image-carousel A full-bleed image carousel where slides do not cut or slide past each other but visually melt and warp into the next. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: autoplay, autoplaySeconds, transitionStyle, showCaptions ### Morph menu icon https://fieldbook.lizardi.mx/components/morph-menu-icon A menu button whose three bars spring into a cross and back, with the middle rung retracting as the outer two cross over. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color ### Morphing backdrop button https://fieldbook.lizardi.mx/components/morphing-backdrop-button A bare text label backed by a coloured slab and a translucent corner disc that swell and square off into a new button face on hover. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, discSize, duration, offset ### Morphing icon loop https://fieldbook.lizardi.mx/components/morphing-icon-loop A single filled icon continuously reshapes itself into the next icon in a short list, its outline flowing smoothly from one silhouette to the next while its fill color shifts to match. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: intervalSeconds, morphSeconds, size, advanceOnClick ### Morphing icon toggle https://fieldbook.lizardi.mx/components/morphing-icon-toggle A small icon continuously morphs its outline between two shapes and two colors on a steady loop. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: intervalSeconds, colorOne, colorTwo ### Morphing Pill Navbar https://fieldbook.lizardi.mx/components/morphing-pill-navbar A row of navigation labels in a dark pill where the active label breaks into its own filled pill and the remaining labels regroup into a second pill that reflows around it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultRoute, invertActivePill ### Morphing tab panel https://fieldbook.lizardi.mx/components/morphing-tab-panel A small tabbed panel where the active underline glides between tabs and the panel's big glyph morphs across instead of swapping, so the two views feel continuous. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, indicator, duration, springy, showCaption ### Mount pop in https://fieldbook.lizardi.mx/components/mount-pop-in A row of shapes that spring in from zero the moment they mount, staggered so the group reads as one wave, with a replay button to watch it again. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: itemCount, bounce, duration, stagger, direction, accent ### Particle Field https://fieldbook.lizardi.mx/components/mouse-reactive-particle-field A canvas field of soft floating dots that drift on their own and lean toward the pointer with a gentle magnetic pull, easing back once it moves away. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: density, dotColor, driftSpeed, pullStrength ### Multi-Date Picker https://fieldbook.lizardi.mx/components/multi-date-picker A two month calendar for picking a handful of individual, non-consecutive dates up to a maximum count, with every pick shown as its own filled day. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, maxDates, startMonth, startYear ### Multi open panel stack https://fieldbook.lizardi.mx/components/multi-open-panel-stack A stack of panel sections that can be expanded independently, with closed copy that browser find-in-page can still reach. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, allowMultiple, findable, railWidth, duration ### Multi select toggle row https://fieldbook.lizardi.mx/components/multi-select-toggle-row A row of independent toggle buttons, like text formatting options, where any number can stay pressed at once. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: variant, size, accentColor ### Muted social login https://fieldbook.lizardi.mx/components/muted-social-login A full login page on a gently tinted background with a brand mark, two social sign-in buttons, a divider, and an email and password form in one card. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, accentColor, socialProviderCount ### Muted compact signup https://fieldbook.lizardi.mx/components/muted-two-column-fields-signup A signup page with a centered card on a muted tinted background where the two password fields share one compact two-column row under a single helper line. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, accentColor ### Named point line https://fieldbook.lizardi.mx/components/named-point-line A line across five categories that prints each category name above its point instead of a number, leaving the value to the hover readout. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, labelSize, dotRadius, strokeWidth, showGrid ### Natural Language Date Field https://fieldbook.lizardi.mx/components/natural-language-date-field A text field that reads phrases like 'in 2 days' or 'next friday' as a real date, with a calendar popover and a live preview sentence below. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, phrase, previewPrefix ### Human Typing Rhythm https://fieldbook.lizardi.mx/components/natural-typing-sequence Types through a queue of phrases with irregular, human-like timing, deleting most before the next but leaving the final phrase on screen before the whole sequence loops. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: typingSpeed, loopDelay, autoLoop, naturalVariance ### Neon ribbon tubes https://fieldbook.lizardi.mx/components/neon-ribbon-tubes Two glowing tubes braid past each other across the frame, ringed with interference bands wherever they cross. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: colorA, colorB, speed, bend, rotation ### Neon trail cursor https://fieldbook.lizardi.mx/components/neon-trail-cursor A tapered beam of light strung through the pointer's recent path, hot and wide at the head, thinning and shifting colour toward the tail. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: trailLength, width, followSpeed, idleFade, color, tailColor ### Nested bezel send button https://fieldbook.lizardi.mx/components/nested-bezel-send-button Three nested frames make one chunky physical button: an outer bezel, a shaded well and an inner capsule whose glyph spins a full turn plus a quarter on hover. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, spin, hoverScale, radius ### Nested capsule button https://fieldbook.lizardi.mx/components/nested-capsule-button A pill button built from three nested capsules that flatten into the outer ring on hover while the label crossfades to the accent colour. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, showMark, gap, size ### Capsule in frame button https://fieldbook.lizardi.mx/components/nested-capsule-send-button A bordered outer tray holding a floating inner capsule that sinks into the frame for the length of a press. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, frameGap, sinkDepth, borderWidth ### Nested File Browser https://fieldbook.lizardi.mx/components/nested-file-browser An accessible file tree where several folders at different depths can stay open at once, joined by connecting guide lines. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, indentSize, rowHeight, showGuideLines ### Nested file tree https://fieldbook.lizardi.mx/components/nested-file-tree A directory tree whose folders expand and collapse with animated height, drawn indent guides and one selected file at a time. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, indentSize, showGuides, startExpanded, maxHeight ### Nested panel frame https://fieldbook.lizardi.mx/components/nested-panel-frame A muted outer shell with a compact header and footer strip that holds one or more crisper inset panels, grouping related content with clear depth. Frameworks: react Access: open Public prop names: title, description, footer ### Nested plate send button https://fieldbook.lizardi.mx/components/nested-plate-send-button A moulded pill seated inside a backing plate whose cast shadow tightens on hover and flattens on press. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, depth, plateRadius, showIcon ### Share Of Total Area Chart https://fieldbook.lizardi.mx/components/normalized-share-area-chart Three monthly series rescaled so their values always sum to the full plot height, turning raw counts into a band of shares that always add to one hundred percent. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, secondColor, thirdColor, showPercentAxis, animate ### Notched arc gauge https://fieldbook.lizardi.mx/components/notched-arc-gauge A score dial built from tapered notches that light up in sequence around an open arc, with a rolling number at its centre. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: value, accent, notches, spacing, orientation, uniformWidth ### Notched console button https://fieldbook.lizardi.mx/components/notched-console-button An angular panel button with a chamfered corner and a wedge cut from one side, plus two lit rules pumping along the top and bottom edges. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, notch, cycleMs, blur ### Notched offset slab button https://fieldbook.lizardi.mx/components/notched-offset-slab-button A blocky uppercase button floating above a hard offset shadow, finished with two folded corner tabs, that slides into its own shadow when pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, offset, width, uppercase ### Notification feed stack https://fieldbook.lizardi.mx/components/notification-feed-stack A vertical feed that reveals notification cards on a timer, sliding older cards down and dropping the oldest off the bottom as new ones arrive. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, interval, maxVisible, pauseOnHover ### Nudge arrow invert button https://fieldbook.lizardi.mx/components/nudge-arrow-invert-button A dark uppercase pill with an arrow pinned to its right edge; hovering inverts it to a pale surface and nudges the arrow forward, and pressing flashes a warm fill. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, nudge, tracking, uppercase ### Nudging chevron button https://fieldbook.lizardi.mx/components/nudging-chevron-button A quiet accent-tinted button whose chevron mark waits in negative space, then slides in on hover and shoves the label sideways while the palette cools to neutrals. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, shiftDistance, mark, coolOnHover ### Nudging message pill https://fieldbook.lizardi.mx/components/nudging-message-pill A solid chat pill whose bubble glyph jostles in an uneven loop while hovered or focused, and pops a brief unread dot on release. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, nudgeSpeed, size ### Number reel https://fieldbook.lizardi.mx/components/number-reel A windowed reel of stepped values that spins up from zero and springs to a stop with the target landing in a highlighted centre slot. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: target, increment, direction, delay, accent ### Odometer digit counter https://fieldbook.lizardi.mx/components/odometer-digit-counter A number shown as mechanical odometer digits that spring into their new position whenever the value changes. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: value, fontSize, accentColor, digitGap ### Odometer number https://fieldbook.lizardi.mx/components/odometer-number A number built from independent digit columns, each one rolling vertically to its new digit so the ones place spins while the leading digits barely move. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: value, grouping, decimals, stiffness, accent ### Offset bloom button https://fieldbook.lizardi.mx/components/offset-bloom-button A flat bright slab with no border that blooms a wide off-centre haze of its own colour on hover and compresses it when pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, bloomSpread, offsetX, pressScale ### Offset outline stack https://fieldbook.lizardi.mx/components/offset-outline-stack-button A bordered button face resting on stepped outline layers like a small pad of paper; hover slides the top sheet onto the stack and inverts its fill. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, offset, layers, duration ### Offset plate button https://fieldbook.lizardi.mx/components/offset-plate-button An outlined button with a solid plate parked down and to the right; hovering slides the plate home so the two shapes lock into one. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, offset, radius, duration ### Offset shadow icon orb https://fieldbook.lizardi.mx/components/offset-shadow-icon-orb A round icon-only button resting on a hard offset shadow that it drops flat into when pressed and lifts out of on release, sized for a row of sign-in choices. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, accent, offset, glyph ### Offset shadow press button https://fieldbook.lizardi.mx/components/offset-shadow-press-button A flat outlined button that sits on a hard offset shadow and slides down into it when pressed, like a real key bottoming out. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, offset, showArrow, borderWidth ### One Question Wizard https://fieldbook.lizardi.mx/components/one-question-wizard A multi-step form that shows a single question at a time with a progress readout, only moving forward once the current question has a valid answer. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: questionCount, accentColor, shortcuts, transitionMs ### Opposing rule text button https://fieldbook.lizardi.mx/components/opposing-rule-text-button A borderless uppercase text button bracketed by two rules that sweep in from opposite ends on hover or focus and retreat the way they came. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, thickness, duration, size ### Orbit drop zone https://fieldbook.lizardi.mx/components/orbit-drop-zone A file drop zone that simulates an upload with spinning colored arcs around a progress ring, shows the live percentage, and rejects oversized or unsupported files with an inline error. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, maxSizeMb, uploadSeconds, acceptHint ### Orbit loader https://fieldbook.lizardi.mx/components/orbit-loader A loading indicator whose three dots ride one orbit a third of a turn apart, each dragging a short trail, while an arc sweeps the outer ring the other way. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, speed, color ### Path Orbit https://fieldbook.lizardi.mx/components/orbit-path-carousel Cards ride a shared closed path, evenly spaced and endlessly circling, with the path shape switchable between an ellipse, a circle and a star. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: shape, itemCount, duration, tilt, showPath, accent ### Orbit Pointer Nav https://fieldbook.lizardi.mx/components/orbit-pointer-nav A circular navigation ring where a center pointer rotates to aim at whichever section button is active, and buttons expand into labeled pills on selection. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, accent, buttonSize, labelMaxWidth ### Orbit Ring Nav https://fieldbook.lizardi.mx/components/orbit-ring-nav A circular ring of navigation buttons with a rotating pointer that snaps to the active item and buttons that expand into labeled pills on hover. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, accentColor, pointerStiffness, expandLabels ### Orbiting Avatar Intro https://fieldbook.lizardi.mx/components/orbiting-avatar-intro A stack of round portraits that lifts, fans out onto a circle and then turns slowly around the center while every portrait stays upright. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, stageSize, orbitSeconds, tileSize, accent ### Orbiting badges https://fieldbook.lizardi.mx/components/orbiting-badges Small badges spaced evenly around one or two circular tracks, each ring turning at its own speed and direction while the badges stay upright. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: radius, count, duration, showPath, innerReverse, accent ### Orbiting border spark https://fieldbook.lizardi.mx/components/orbiting-border-spark A bright spark with a fading tail runs forever around the edge of a panel, following the exact corner radius instead of cutting the corners. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: duration, sparkSize, accentColor, trailColor, borderWidth, reverse ### Orbiting caption disc https://fieldbook.lizardi.mx/components/orbiting-caption-disc-button A circular button whose uppercase caption rides the inner rim in a slow endless orbit while a center badge relays its arrow on hover. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, diameter, spinSeconds, direction ### Orbiting confirm chips https://fieldbook.lizardi.mx/components/orbiting-confirm-chips-button A round icon button that flings out a confirm chip and a dismiss chip on hover or focus, then pulls them back underneath. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, spread, popMs, stagger ### Orbiting image spiral https://fieldbook.lizardi.mx/components/orbiting-image-spiral A stack of square photos arranged around an invisible spiral that turns continuously, each photo scaling, sharpening or blurring by how close it sits to the front. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: itemCount, speed, radius, pauseOnHover ### Orbiting rim light button https://fieldbook.lizardi.mx/components/orbiting-rim-light-button A dark pill whose one pixel rim is lit from behind by a slowly turning cone of colour, spinning faster while the button is held. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, spinSeconds, rimBlur, haloSize ### OTP code boxes https://fieldbook.lizardi.mx/components/otp-code-boxes A row of single-character boxes for entering a verification code, one digit per box with the cursor auto-advancing. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: length, accent, masked ### OTP field https://fieldbook.lizardi.mx/components/otp-field A one-time-code field of separate boxes over one hidden input, where an accent tile glides to the box being edited and the row pulses once the code is complete. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: length, masked, accent ### Passcode slot input https://fieldbook.lizardi.mx/components/otp-slot-input A one-time-passcode field of fused, shared-border slots over one hidden input, with a blinking caret in the active empty slot. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: length, value, accentColor, grouped ### Outline draw text https://fieldbook.lizardi.mx/components/outline-draw-text Display letters trace themselves one after another as glowing outlines, then a solid fill fades in behind the strokes to finish the word. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: headline, strokeColor, fillColor, trigger, drawDurationS ### Outline invert button https://fieldbook.lizardi.mx/components/outline-invert-button A dark slate button ringed in a warm outline that trades every color with its border on hover and lifts on a shifting glow. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, slate, glow, uppercase ### Outlined page nav https://fieldbook.lizardi.mx/components/outlined-page-nav A row of page-number buttons where the active page gets an outlined pill, flanked by previous and next controls and an ellipsis for skipped ranges. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: totalPages, currentPage, accentColor ### Outset ring tilt button https://fieldbook.lizardi.mx/components/outset-ring-tilt-button A badge-style button with a thick ring floating outside its edge that grows, tips a couple of degrees and drops a hard shadow on hover. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, hoverScale, tilt, ringOffset ### Outside Value Pie https://fieldbook.lizardi.mx/components/outside-value-pie A solid pie chart with bare numbers floating just outside each slice, positioned so every label reads outward from the centre with no connecting lines. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, hueRange, labelOffset, valueFormat, gap ### Overhead light pill https://fieldbook.lizardi.mx/components/overhead-light-pill A dark pill button lit by a soft pool of overhead light, dimming as a whole on hover and brightening its thick outer ring on focus. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lightSize, lightStrength, ring ### Overhead light rays https://fieldbook.lizardi.mx/components/overhead-light-rays Soft tapered beams hang from above a panel, each fading in and out and rocking gently on its own cycle so the group never pulses together. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rayCount, rayColor, blur, speed, length, intensity ### Overlay scroll panel https://fieldbook.lizardi.mx/components/overlay-scroll-panel A bounded panel that hides the platform scrollbar and draws its own slim overlay track, thumb sized to the content. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: orientation, height, thumbSize, autoHide, accent ### Overshoot icon button https://fieldbook.lizardi.mx/components/overshoot-icon-slide-button A pale pill with a large illustrated glyph parked in its left end that tugs outward past the rim and springs back on hover or focus. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, slide, springy, radius ### Paired bar chart https://fieldbook.lizardi.mx/components/paired-bar-chart A grouped bar chart where each month shows two side-by-side bars, one per series, for comparing two measures across the same categories. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: primaryColor, secondaryColor, barRadius, groupGap, animate ### Paired Code Split View https://fieldbook.lizardi.mx/components/paired-code-split-view A split screen verification step whose code boxes are grouped in pairs with dashes between, submitting itself the moment the last box fills. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, groups, perGroup, autoSubmit, showArtPanel ### Paired Series Line https://fieldbook.lizardi.mx/components/paired-series-line Two smoothed series over the same months on a shared scale, with a hover guide that reads both values side by side in one panel. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: primaryColor, secondaryColor, strokeWidth, showGuide, showGrid ### Panel swallow button https://fieldbook.lizardi.mx/components/panel-swallow-button A button with a darker icon panel docked at one edge; on hover or keyboard focus the panel grows across the whole width and the label fades beneath it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, iconSide, expandMs ### Panel Tab Switcher https://fieldbook.lizardi.mx/components/panel-tab-switcher A rounded tab bar where a background indicator morphs to the active tab's exact size and position, revealing a distinct content panel beneath it. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, variant, tabCount ### Panning gradient button https://fieldbook.lizardi.mx/components/panning-gradient-button A domed key whose oversized diagonal gradient pans across the face on hover, sweeping a lighter band from one corner to the other. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, deep, label, duration, dome ### Paper fold text https://fieldbook.lizardi.mx/components/paper-fold-text Text splits into characters, words, or lines that unfold open along a chosen hinge edge with a crease shadow, staggered across the phrase. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, hinge, splitBy, duration ### Parallax photo columns https://fieldbook.lizardi.mx/components/parallax-photo-columns A full-bleed wall of drifting photo columns in 3D perspective where tiles brighten and lift under the cursor or keyboard focus while their column pauses. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: columns, driftSpeed, tilt, overlayColor, pauseOnHover ### Parallax plate gallery https://fieldbook.lizardi.mx/components/parallax-plate-gallery A snapping vertical gallery where each plate's oversized index number drifts at a different rate to the plate itself, with a scroll progress rail along the bottom. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, panels, depth, snap, showProgress ### Parallax Starfield https://fieldbook.lizardi.mx/components/parallax-starfield Three layers of scattered dots scroll upward at different rates and slide against the pointer, so the field gains depth. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: density, starColor, speed, parallax ### Particle burst button https://fieldbook.lizardi.mx/components/particle-burst-button A button that throws a short spray of specks up and out of itself on every click, then quietly resets while the label confirms the action landed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, particleCount, spread, confirmMs ### Particle drift https://fieldbook.lizardi.mx/components/particle-drift A canvas field of slow drifting particles that wrap at the edges, and link with faint lines and ease away where the pointer passes. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, color, connectDistance ### Particle formation text https://fieldbook.lizardi.mx/components/particle-formation-text A canvas of tiny particles that gathers into the shape of a word, drifts once formed, and scatters away from the pointer. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, density, scatter, color, highlightColor ### Particle spray https://fieldbook.lizardi.mx/components/particle-spray-on-hold Hold the pointer down on a control and it sprays small particles from wherever the pointer is, each arcing up, spinning, then falling away and clearing itself. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: emitRate, size, lift, accent, shape ### Pass through wipe button https://fieldbook.lizardi.mx/components/pass-through-wipe-button A filled button whose bright panel wipes in from one edge on hover and leaves by the opposite edge when you go, so it keeps travelling. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, panelColor, label, duration, direction ### Paste Format Menu https://fieldbook.lizardi.mx/components/paste-format-menu-button A pill with a caret that opens a bordered list of paste formatting choices and squares off its lower corners so the two shapes read as one piece. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, openOnHover, itemCount, width ### Path Breadcrumb Trail https://fieldbook.lizardi.mx/components/path-breadcrumb-trail A horizontal trail of page-hierarchy links ending in the current page, with long trails collapsing behind an expandable ellipsis. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, segmentCount, collapseMiddle ### Path follower https://fieldbook.lizardi.mx/components/path-follower-loop A rounded tile that rides along a curling spiral track while the track itself draws in ahead of it, then reverses back to the start. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, duration, tileSize, alignToTangent, strokeWidth ### Peek Inside Folder https://fieldbook.lizardi.mx/components/peek-inside-folder A stylized folder icon that springs open on click to fan out three papers tucked inside, each nudging away from the pointer. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, size, open ### Peelable sticker https://fieldbook.lizardi.mx/components/peelable-sticker A vinyl sticker you can drag around its area, whose edge lifts off the surface on hover and peels further while you hold it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, rotate, peelAmount, peelAngle, shadow ### Perimeter draw button https://fieldbook.lizardi.mx/components/perimeter-draw-button A short thick bar parked under the label stretches and travels around all four sides on hover until it closes into a full outline, then retracts back into the bar on leave. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, strokeWidth, duration, wash ### Perimeter spark button https://fieldbook.lizardi.mx/components/perimeter-spark-button A dark pill with a single bright spark orbiting just inside its edge, hidden behind an inset core so only the rim ever catches the light. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, orbitMs, radius, sparkWidth ### Perspective floor grid https://fieldbook.lizardi.mx/components/perspective-floor-grid A grid plane tilted away from the camera so it recedes to a horizon and slides toward the viewer on a seamless one-cell loop. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: angle, cellSize, speed, lineColor, opacity ### Perspective reveal dialog https://fieldbook.lizardi.mx/components/perspective-reveal-dialog A general purpose dialog whose panel tilts in from a chosen edge in 3D, then flattens into place, for showing arbitrary content over a dimmed page. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: from, accent, title, showFooterButton ### Perspective sheen button https://fieldbook.lizardi.mx/components/perspective-sheen-button A solid rectangular button carrying a translucent sheen panel skewed in perspective that flattens flush on hover. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tilt, sheenOpacity, radius ### Physical keycap button https://fieldbook.lizardi.mx/components/physical-keycap-button A moulded keyboard key with a shaded top and real travel: it depresses, squashes and flashes when clicked or when its bound key is pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, size, travel, bindKey ### Physics drop text https://fieldbook.lizardi.mx/components/physics-drop-text A sentence breaks into words that fall, tumble and bounce under simulated gravity, then settle and can be flicked around with the pointer. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, gravity, highlightColor, trigger ### Pill tabs https://fieldbook.lizardi.mx/components/pill-tabs A tab strip where a single pill slides and stretches onto the selected tab, with arrow, Home and End key navigation and a panel that crossfades. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, tabCount ### Pin priority list https://fieldbook.lizardi.mx/components/pin-priority-list A two-section list where tapping a row's pin toggle animates it between a pinned group and the rest with one continuous spring motion. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: itemCount, accentColor, transitionStiffness, pinnedLabel ### Pin to top list https://fieldbook.lizardi.mx/components/pin-to-top-list A two-group list where clicking a pin button smoothly moves an item between a pinned section and an unpinned one. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, stiffness, damping, showLabels ### Pincer Fill Button https://fieldbook.lizardi.mx/components/pincer-fill-button A pale pill button whose two translucent curtains close in from the left and right edges on hover, stopping short so a band of the base stays lit in the middle. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, leftColor, rightColor, coverage, durationMs ### Pinned Card Stack Scroll https://fieldbook.lizardi.mx/components/pinned-card-stack-scroll A vertical sequence of cards that pin in place and shrink slightly as the next card scrolls up to stack on top of it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: itemDistance, itemScale, baseScale, rotationAmount ### Pinned lateral gallery https://fieldbook.lizardi.mx/components/pinned-lateral-gallery A section that sticks in place while your vertical scroll is spent dragging a row of panels sideways, then releases and lets the page continue. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, panels, heading, showProgress, scrollLength ### Pivot bars menu button https://fieldbook.lizardi.mx/components/pivot-bars-menu-button A menu button whose three ragged bars swing a quarter turn and shrink into a short column of dots, changing colour as they go. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: restColor, activeColor, tileSize, duration, showTile ### Pixel bevel button https://fieldbook.lizardi.mx/components/pixel-bevel-button A chunky slab button with hard pixel-width bevel edges that floods with an accent colour on hover and flips its bevel to look pressed in while held. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, bevel, size ### Pixel Bloom Card https://fieldbook.lizardi.mx/components/pixel-bloom-card A card whose surface fills with tiny squares that bloom outward from the centre on hover, shimmer while held, and shrink away on leave. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gap, speed, accent, shimmer, label ### Pixel Curtain https://fieldbook.lizardi.mx/components/pixel-curtain-reveal A block of colored squares floods across a card in random order, hides the swap underneath, then clears in the same scattered way. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gridSize, stepDuration, pixelColor, accent, once ### Pixel mosaic reveal https://fieldbook.lizardi.mx/components/pixel-mosaic-reveal An image assembles itself from a grid of tiles that fade in on a random stagger, then shifts from grayscale to full color. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gridColumns, gridRows, grayscaleReveal, revealDurationMs ### Pixel snowfall https://fieldbook.lizardi.mx/components/pixel-snowfall Chunky low resolution snow falling through a deep volume, near flakes fat and bright, far ones dim single specks. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, density, speed, windAngle, blockSize, shape ### Pixel Wake https://fieldbook.lizardi.mx/components/pixel-wake-grid A coarse grid of cells lights up under the pointer and cools back down behind it, leaving a blocky wake across the panel. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gridSize, brushRadius, fade, accent, softEdges ### Plain Share Pie https://fieldbook.lizardi.mx/components/plain-share-pie The bare essentials of a pie chart: five flush slices, a thin dividing stroke, and a hover tooltip, with nothing else added. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, hueRange, strokeWidth, sweepSeconds, showTooltip ### Plain trend line https://fieldbook.lizardi.mx/components/plain-trend-line A minimal single series line chart with a smooth undecorated curve and no point markers, kept as bare and legible as a trend line can be. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, strokeWidth, showGrid, animate ### Plan radio list https://fieldbook.lizardi.mx/components/plan-radio-list A vertical list of radio choices styled for picking a pricing plan, one filled dot marking the current selection. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, defaultPlan ### Plane straighten send https://fieldbook.lizardi.mx/components/plane-straighten-button A send button built as a bordered shell around an inset pill, where a tilted paper plane rotates level and the label steps forward on hover. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, restAngle, flyOnPress ### Plane tilt send button https://fieldbook.lizardi.mx/components/plane-tilt-send-button A dished send control whose paper plane tips up on hover and flies out of frame on click before the label resets. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, sentLabel, accent, tilt, resetDelay ### Plasma plume https://fieldbook.lizardi.mx/components/plasma-plume A tall column of luminous vapor that rises, folds over on itself and thins toward the top, tinted to a single color over near black. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: tint, speed, scale, direction, detail, interactive ### Plate spin swap button https://fieldbook.lizardi.mx/components/plate-spin-swap-button A boxy outlined button whose label plate spins off to the right on hover while an identical plate spins in from the left to replace it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, borderWidth, tracking, duration ### Plinth lift button https://fieldbook.lizardi.mx/components/plinth-lift-button A heavy framed label plate on a checkered base that lifts diagonally off its plinth and takes on color when hovered or focused. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, lift, patternSize, baseHeight ### Plus to cross tile https://fieldbook.lizardi.mx/components/plus-to-cross-tile A small square tile carrying a plus sign that spins forty five degrees into a close cross and swells a fraction as it turns. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: ink, accent, tileSize, duration, grow ### Pointer angle sweep https://fieldbook.lizardi.mx/components/pointer-angle-sweep A panel lit by a conic sweep whose origin sits under the pointer and whose bright edge points back at it, easing to a slow idle spin when the pointer leaves. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, wedgeSoftness, followLag, idleSpin, intensity ### Pointer label cursor https://fieldbook.lizardi.mx/components/pointer-label-cursor Inside a bounded panel the system cursor is replaced by a drawn arrow with a small name chip trailing behind it on a soft spring. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, side, sideOffset, stiffness, showChip ### Pointer lit lattice https://fieldbook.lizardi.mx/components/pointer-lit-lattice A canvas lattice whose cells light as the pointer passes, hold, then decay, with a press sending a ring of light expanding to the far corners. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cellSize, radius, falloff, fadeDuration, clickPulse, color ### Pointer Magnet https://fieldbook.lizardi.mx/components/pointer-magnet-wrap A wrapper that lets whatever it holds drift toward the pointer while it is inside a padded catch zone, then glide back to rest. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: padding, strength, label, accent, disabled ### Pointer reactive ASCII text https://fieldbook.lizardi.mx/components/pointer-reactive-ascii-text A word rendered entirely out of monospace characters instead of solid letterforms, its glyph density and a subtle color shift responding continuously to how close the pointer sits. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, cellSize, reactRadius, accent ### Pointer Ripple Button https://fieldbook.lizardi.mx/components/pointer-ripple-button A button that plants a circle of light exactly where it was pressed and expands it out past the edges as it fades. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, rippleColor, duration, opacity, variant ### Pointer ripple mesh https://fieldbook.lizardi.mx/components/pointer-ripple-mesh A colour plate is sampled through a coarse mesh whose cells remember where the pointer has been, so dragging smears the image and the smear relaxes back. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, gridSize, strength, relaxation, radius, autoSweep ### Pointer scatter headline https://fieldbook.lizardi.mx/components/pointer-scatter-headline A headline split into single characters that shove aside and tumble as the pointer sweeps through them, then drift back into line. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, accent, radius, strength, rotation ### Pointer scramble text https://fieldbook.lizardi.mx/components/pointer-scramble-text Moving the pointer across a paragraph scrambles the nearby characters into symbols that settle back to the real letters as the cursor moves away. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, radius, speed ### Pointer spotlight card https://fieldbook.lizardi.mx/components/pointer-spotlight-card A card whose border lights only along the arc nearest the cursor, with a soft interior wash that follows the pointer and retreats when it leaves. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: spotlightSize, accentColor, edgeColor, mode, intensity, lag ### Pointer Spotlight Panel https://fieldbook.lizardi.mx/components/pointer-spotlight-panel A content panel with a soft light that follows the pointer across its face and pins to the centre on keyboard focus. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, radius, intensity, fadeMs ### Pointer takeover zone https://fieldbook.lizardi.mx/components/pointer-takeover-zone A panel that hides the system cursor while the pointer is inside it and draws its own mark in its place, popping in on entry and out on exit. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: shape, size, accent, label, showLabel ### Tile trail https://fieldbook.lizardi.mx/components/pointer-tile-trail A pointer trail that drops small rounded tiles along the path, each popping in from a recycled pool and drifting away as newer ones take its place. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tileCount, spawnDistance, lifetime, accent, tilt ### Pointer tilt card https://fieldbook.lizardi.mx/components/pointer-tilt-card A card that leans in 3D toward the pointer, with a sheen that slides across its face and a spring that settles it back level on exit. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: maxTilt, perspective, accent, sheen, stiffness ### Pointer tilt photo card https://fieldbook.lizardi.mx/components/pointer-tilt-photo-card A captioned photo card that tips toward the pointer on a spring, with a soft highlight sliding across the face as it turns. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: maxTilt, stiffness, hoverScale, showGlare, accent ### Polished metal button https://fieldbook.lizardi.mx/components/polished-metal-button A button finished like brushed metal, with a banded highlight that zooms and catches the light as the pointer arrives. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, finish, tint, zoom, size ### Pop scale panel https://fieldbook.lizardi.mx/components/pop-scale-panel A popover that springs open from half size, points a small arrow back at its trigger, dims the page behind it and closes on Escape or an outside click. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, align, showArrow, dimBackdrop, accent ### Presence Avatar Clusters https://fieldbook.lizardi.mx/components/presence-avatar-clusters Two overlapping avatar clusters, online and offline, where clicking an avatar slides it into the other cluster while its portrait crossfades to or from grayscale. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: avatarSize, clusterGap, accentColor, showTooltips ### Press block button https://fieldbook.lizardi.mx/components/press-block-button A rounded block button resting on a solid ledge of shadow that shortens as the button travels down under a press. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, depth, disabled ### Press down sweep button https://fieldbook.lizardi.mx/components/press-down-sweep-button A solid button whose fill washes brighter from one side on hover and drops flat against the page while it is held. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, pressDepth, sweep, radius ### Press and hover scale tile https://fieldbook.lizardi.mx/components/press-hover-scale-tile A tile that swells on hover and squashes on press, with press always beating hover and both resolved from one spring so gestures never fight. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: hoverScale, pressScale, stiffness, accent, showState ### Press plate toggle https://fieldbook.lizardi.mx/components/press-plate-toggle A bare two-state button whose filled plate cross-fades in behind its content when pressed, with the state readable and settable from outside the button itself. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: startPressed, accent, radius, fadeMs, showControls ### Press response tile https://fieldbook.lizardi.mx/components/press-response-tile A tactile tile that compresses under the press point and springs back on release, tilting toward wherever on its face you pushed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, pressScale, tilt, stiffness, label ### Press ripple button https://fieldbook.lizardi.mx/components/press-ripple-button A solid button that spawns a circle of light at the exact point you press, expanding past the edges and fading as you release. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, rippleOpacity, expandSeconds, cornerRadius ### Press spring button https://fieldbook.lizardi.mx/components/press-spring-button A base button family in six skins and four sizes whose press compresses on a spring and overshoots back, identically for pointer and keyboard. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: skin, size, accentColor, label, disabled ### Settings Toggle Row https://fieldbook.lizardi.mx/components/press-stretch-switch A labeled settings row ending in an on off switch whose thumb stretches under a press and springs back when it settles. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, on, accentColor ### Pressable icon toggle https://fieldbook.lizardi.mx/components/pressable-icon-toggle A button with an icon and label that stays visually pressed once clicked, for a standalone on or off action such as muting or bolding. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, pressed, variant ### Pressed highlight toggle https://fieldbook.lizardi.mx/components/pressed-highlight-toggle A two state icon button that keeps its pressed state visible with a rounded highlight block growing behind the glyph from the centre out. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, size, skin, pressed, disabled ### Pressed ledge button https://fieldbook.lizardi.mx/components/pressed-ledge-button A solid button resting on a thick darker bottom edge that collapses when pressed, so the cap drops flush like a real key. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, depth, size ### Pressed tile icon button https://fieldbook.lizardi.mx/components/pressed-tile-icon-button A soft moulded icon tile that sits proud of a pale surface and, on hover, sinks into it by turning its shadow pair inside out. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, depth, radius, sink ### Priced stay range calendar https://fieldbook.lizardi.mx/components/priced-stay-range-calendar A range calendar where every day cell shows a small price under its number, weekends priced higher than weekdays, with month and year chosen from dropdowns. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, weekdayPrice, weekendPrice ### Printing icon button https://fieldbook.lizardi.mx/components/printing-icon-button A tiny line-drawn printer that only starts feeding and ejecting a sheet while the pointer is over it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: ink, accent, scale, cycle ### Prismatic light bands https://fieldbook.lizardi.mx/components/prismatic-light-bands A dark canvas panel where a few long bands of light sweep and bend across the field, splitting into warm and cool fringes at their edges like a beam through a prism. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, bandCount, bandWidth, warp, dispersion, speed ### Profile flip card https://fieldbook.lizardi.mx/components/profile-flip-card A portrait profile card that turns over in 3D on hover or tap to reveal a bio, follower counts and a follow action on its back. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: flipOn, axis, durationMs, accent, showStats ### Profile hover card https://fieldbook.lizardi.mx/components/profile-hover-card Hovering or focusing a small avatar chip opens a profile panel with a name, handle, bio and follower counts. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: openDelay, placement, showStats, accent ### Profit/Loss Line Chart https://fieldbook.lizardi.mx/components/profit-loss-line-chart A line chart whose stroke changes color depending on whether the value is above or below zero, splitting cleanly at each crossing point. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: positiveColor, negativeColor, strokeWidth, smooth ### Progress ring https://fieldbook.lizardi.mx/components/progress-ring A circular gauge that sweeps from zero to its value while the number in the middle counts along, with two threshold marks that light up as the arc passes them. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: value, size, stroke, color ### Progressive edge blur https://fieldbook.lizardi.mx/components/progressive-edge-blur A band pinned to one edge of a scrolling panel that blurs and fades its content gradually into the background instead of cutting it off at a hard line. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: position, strength, thickness, layers, curve ### Proximity variable type https://fieldbook.lizardi.mx/components/proximity-variable-type Inline paragraph text thickens and widens letter by letter only within a set radius around the pointer, tapering smoothly back to normal outside it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: sentence, radius, falloff, textColor ### Pulse button https://fieldbook.lizardi.mx/components/pulse-button A button that answers a click with a single expanding ring from the pointer position and a short press-down, then settles. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, ringColor, duration, rounded ### Pulse grid mesh https://fieldbook.lizardi.mx/components/pulse-grid-mesh A square wire mesh that swells outward in slow rings from the middle, brightest at the center and gone before it reaches the edges. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, gridSize, rippleDepth, thickness, glow, interactive ### Pulse halo button https://fieldbook.lizardi.mx/components/pulse-halo-button A solid button that keeps emitting a soft halo of its own color, either breathing in place or throwing off expanding rings on a loop. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, variant, cycleMs, distance ### Ring bloom https://fieldbook.lizardi.mx/components/pulse-ring-bloom Concentric light rings are born at the center, swell outward and fade, each one lagging the last, with a burst on click. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: innerColor, outerColor, ringCount, speed, thickness, parallax ### Pulsing Dot Field https://fieldbook.lizardi.mx/components/pulsing-dot-field A tiled lattice of tiny dots that fills its container, each one breathing brighter and dimmer on its own independent cycle. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: spacing, dotRadius, pulse, speed, accentColor, maskSize ### Pulsing play orb https://fieldbook.lizardi.mx/components/pulsing-play-orb A round play button that throws a ring of light outward on a steady beat, swells under the pointer and slows its pulse once paused. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, accentDeep, size, pulseSeconds, playing ### Quantity Stepper Field https://fieldbook.lizardi.mx/components/quantity-stepper-field A labeled quantity control: a rounded two-button stepper with a number in the middle that increments or decrements within a set range. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, value, min, max, accentColor ### Quarter Turn Add Button https://fieldbook.lizardi.mx/components/quarter-turn-add-button A circled plus that turns a quarter revolution and floods solid when pointed at, then flips instantly to a light stroke while held. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, size, turn, strokeWidth, fillOnHover ### Quick launch palette https://fieldbook.lizardi.mx/components/quick-launch-palette A keyboard-triggered command palette that opens with a spring pop, filters a grouped action list as you type, and supports full arrow-key navigation. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, placeholder, showShortcuts, startOpen ### Quick menu orb https://fieldbook.lizardi.mx/components/quick-menu-orb-button A round accent trigger whose glyph folds into a close mark while a small titled menu of icon rows scales up beneath it. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, triggerSize, side, open, caption, gap ### Quick Pick Date Card https://fieldbook.lizardi.mx/components/quick-pick-date-card A month calendar card with a row of relative-date shortcut buttons below it, so a common date is one click away without opening a menu. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, shortcutCount ### Quiet File Tree https://fieldbook.lizardi.mx/components/quiet-file-tree A folder and file tree where a soft highlight glides between rows as the pointer or keyboard focus moves. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, indentSize, rowHeight, highlightOnHover ### Quiet Ring Spinner https://fieldbook.lizardi.mx/components/quiet-ring-spinner A minimal single-element loading ring: a thin circle with one colored quarter that spins continuously to mark a busy state. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, accentColor, speedMs ### Radial action wheel https://fieldbook.lizardi.mx/components/radial-action-wheel Right-clicking a zone opens a circular ring of icon actions centered on the pointer, each wedge highlighting as it is hovered and firing on click. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: wheelSize, iconSize, accentColor ### Radial cable pulses https://fieldbook.lizardi.mx/components/radial-cable-pulses Tapered cables fan out from a point at the centre and curve to the edges while bright pulses race along them. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: pulseColor, cableColor, cableCount, pulseSpeed, waviness, direction ### Radial light burst https://fieldbook.lizardi.mx/components/radial-light-burst Blades of light streak out of a dark center, twisting in three dimensions and smeared as if shot on a long exposure. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, blades, intensity, speed, distort, motion ### Radial Share Fan https://fieldbook.lizardi.mx/components/radial-share-fan A round share trigger that throws a stack of destination buttons out along an arc, each one tumbling a full turn into place. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, count, radius, spread, stagger, spin ### Radial sheen button https://fieldbook.lizardi.mx/components/radial-sheen-button A short key-like button lit from its top-right corner, with a hairline base edge that inverts when pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, sheen, radius ### Radio dot select https://fieldbook.lizardi.mx/components/radio-dot-select A vertical radio group where picking an option pops a dot into its circle while the previous dot shrinks and fades away. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: option1, option2, option3, selected, accent ### Raised bezel button https://fieldbook.lizardi.mx/components/raised-bezel-button A tactile action key built from three stacked plates, a machined rim, a rounded body and an inset capsule face, that sinks into its shadow when pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, bezelWidth, pressDepth, showIcon ### Raised Slice Donut https://fieldbook.lizardi.mx/components/raised-slice-donut A donut where one slice is permanently raised above the ring by extending its outer radius, and the raise glides to any other slice on hover. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, activeIndex, raise, holeRatio, hueRange ### Range filter area chart https://fieldbook.lizardi.mx/components/range-filter-area-chart A daily traffic area chart with a range picker in the header that narrows the window to three months, thirty days or seven days and re-tweens the shape. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, secondColor, defaultRange, showLegend, animate ### Range Filtered Bar Report https://fieldbook.lizardi.mx/components/range-filtered-bar-report An analytics card with a bar chart of daily visitor counts that redraws to only the days inside a date range chosen from a dropdown calendar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, title, subtitle, rangeLabel ### Range span slider https://fieldbook.lizardi.mx/components/range-span-slider A slider with two thumbs on one track, letting someone pick a low and high value together as a filled span. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: low, high, accent ### Ranked Share Bar Chart https://fieldbook.lizardi.mx/components/ranked-share-bar-chart A horizontal ranking chart of one series split by category, where every bar takes its own hue from an ordered palette and rows sort from largest to smallest share. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: paletteBase, rowCount, barRadius, animate ### Reactive bento panels https://fieldbook.lizardi.mx/components/reactive-bento-panels A bento grid of panels that glow at the pointer, tilt in 3D, drift toward the cursor, and burst with particles and a ripple on click. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: glowColor, spotlightRadius, particleCount, enableTilt ### Reading highlight copy https://fieldbook.lizardi.mx/components/reading-highlight-copy A paragraph that lights up word by word as you scroll it, leaving read words bright and unread words dim so scroll position doubles as a reading position. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, accent, dimOpacity, unit, showRail ### Receding stack carousel https://fieldbook.lizardi.mx/components/receding-stack-carousel A carousel where cards recede into the distance behind the focused card, darkening and blurring the further back they sit. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: visibleCards, depth, tilt, autoplay ### Record toggle pulse https://fieldbook.lizardi.mx/components/record-toggle-pulse-pill A near-black pill with an accent microphone that toggles recording, breathing in time while armed and counting elapsed time in place of the label. Frameworks: react Access: member Public prop names: label, accent, pulseSpeed, showTimer ### Reflowing Notification Stack https://fieldbook.lizardi.mx/components/reflowing-notification-stack A stack of notification cards that reflows smoothly when a new one is added or an old one is dismissed, instead of jumping. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, autoDismissSeconds, stackGap, addButtonLabel ### Refracted glass player https://fieldbook.lizardi.mx/components/refracted-glass-player A media player panel that behaves like a thick slab of glass, bending whatever sits behind it near the rounded edges while the keys refract more strongly than the body. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: distortion, frost, radius, accent ### Refractive Glass Panel https://fieldbook.lizardi.mx/components/refractive-glass-panel A rounded panel whose backdrop bends and splits into faint red, green and blue fringes near its edge, like looking through a real pane of thick glass. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: cornerRadius, refractionStrength, edgeThickness, tintColor ### Refresh sweep spin https://fieldbook.lizardi.mx/components/refresh-sweep-spin-button A refresh button whose darker icon panel sweeps across the face on hover while the arrow makes exactly one turn, then keeps spinning through a busy run before easing back to rest. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, width, spinMs, busyMs ### Region heat map https://fieldbook.lizardi.mx/components/region-heat-map A zoomable hex-tile world map where each region is filled from a five-step color scale by its value, brightens on hover, and shows a tooltip with its name and number. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: scaleColor, zoomEnabled, showGraticule, maxZoom ### Relay fill button https://fieldbook.lizardi.mx/components/relay-fill-button A half-rounded button that fills on hover through a relay of two racing bars which climb to full height before the label changes colour. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, sweepMs, gap, radius ### Repeat mode cycler https://fieldbook.lizardi.mx/components/repeat-mode-cycler A tinted chip that cycles a loop setting through off, once and all on each click, spinning its arrow backwards through every change. Frameworks: react Access: member Public prop names: mode, accent, spinSeconds, showLabel ### Repelling dot field card https://fieldbook.lizardi.mx/components/repelling-dot-field-card A promo panel filled with a field of dots that push away from the pointer and brighten as it passes. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: dotSpacing, dotSize, repelRadius, repelStrength, accent ### Resizing hint tooltip https://fieldbook.lizardi.mx/components/resizing-hint-tooltip A hover label whose bubble smoothly resizes itself when its text is longer or shorter, instead of snapping between sizes. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: openDelay, closeDelay, side, accent ### Return to top chip https://fieldbook.lizardi.mx/components/return-to-top-chip A small corner chip that slides into view once its panel scrolls past a threshold, lifts under the pointer, and glides the panel back to the top on click. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: threshold, accent, corner, chipSize, smooth ### Revenue Area Card https://fieldbook.lizardi.mx/components/revenue-area-stat-card A metric card whose body is a filled area sparkline; hovering a month swaps the headline, caption and change pill to that month's reading. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, areaOpacity, smoothing, trend, title ### Reversing bars menu button https://fieldbook.lizardi.mx/components/reversing-bars-menu-button A small square menu tile whose three stacked bars trade widths on hover while the tile itself cross fades from one fill color to another. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, hoverColor, size, barThickness, duration ### RGB glitch heading https://fieldbook.lizardi.mx/components/rgb-glitch-heading A heading that splits into red and cyan offset copies clipped to jumping horizontal bands, flickering like a broadcast signal losing sync. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, speed, enableOnHover, enableShadows ### Ribbon light streams https://fieldbook.lizardi.mx/components/ribbon-light-streams Bundles of hairlines sweep across the dark like ribbons of light, crossing near the middle and bending away from the pointer. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, ribbonCount, lineCount, speed, bendStrength, parallax ### Ribbon trail flow https://fieldbook.lizardi.mx/components/ribbon-trail-flow Several colored ribbons chase the pointer on their own springs, tapering to a point and braiding apart as the pointer turns. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: ribbonCount, thickness, spring, friction, accent, fadeTail ### Right click context menu https://fieldbook.lizardi.mx/components/right-click-context-menu A menu that appears exactly where a right click or long press lands, with actions, a checkbox, a radio group, and a hover submenu. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, showSubmenu, showCheckableItems ### Right Click Menu https://fieldbook.lizardi.mx/components/right-click-menu A popup menu that appears at the pointer when a target area is right-clicked, offering grouped actions, keyboard shortcut hints, and a nested submenu. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, itemCount, showShortcuts ### Rim ramp button https://fieldbook.lizardi.mx/components/rim-ramp-button A thick coloured rim surrounds a dark inner face; on hover the face clears and the rim's colour ramp floods the whole button. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, hueShift, inset, duration ### Rim to fill gradient button https://fieldbook.lizardi.mx/components/rim-to-fill-gradient-button A dark button shows only a thin gradient rim at rest; hovering drops the inner panel so the gradient floods the whole face, and pressing squeezes it down. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, endColor, rimWidth, angle, pressScale ### Ring halo button https://fieldbook.lizardi.mx/components/ring-halo-button A solid accent button that darkens on hover and grows a concentric outline ring with a soft colored cast underneath. Frameworks: react Access: member Public prop names: label, accent, size, ringGap, disabled ### Ring halo pill button https://fieldbook.lizardi.mx/components/ring-halo-pill-button A pill button that keeps a clear gap around its colored core, fills that gap with a lightened accent ring on hover or keyboard focus, and squeezes inward while pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, ringWidth, pressScale, uppercase ### Ringing bell badge https://fieldbook.lizardi.mx/components/ringing-bell-badge A notification bell button drawn from plain shapes that swings both ways with a small scale kick and carries a live unread count. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, accent, size, ring ### Ripple lens https://fieldbook.lizardi.mx/components/ripple-lens-surface A picture surface that warps where the pointer touches it, each ripple expanding, swirling the image under it and settling back flat. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: strength, swirl, brushSize, rings, trigger, highlight ### Ripple Origin Grid https://fieldbook.lizardi.mx/components/ripple-origin-grid A grid of colored tiles that light up in a ripple radiating outward from one chosen tile, timed by distance from that tile. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gridSize, delayPerUnit, accentColor ### Ripple tap button https://fieldbook.lizardi.mx/components/ripple-tap-button A solid button that sends a circle outward from the exact point you pressed, clipped to its rounded shape. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, rippleSeconds, pressScale, size ### Rising arrow link button https://fieldbook.lizardi.mx/components/rising-arrow-link-button A read more button where the label slides sideways to open a gap and an arrow climbs into it from below the clipped bottom edge. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, duration, radius, labelShift ### Rising Circle Fill https://fieldbook.lizardi.mx/components/rising-circle-fill-button An outlined pill that fills on hover as a large accent circle rises from below its rim while the label tracking widens. Frameworks: react Access: member Public prop names: label, accent, trackingGrowth, speed ### Rising disc icon row https://fieldbook.lizardi.mx/components/rising-disc-icon-row A row of ringed icon buttons where hovering lifts a filled disc up out from behind its ring, leaving the glyph darkened inside the empty outline. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, count, hueSpread, size, lift ### Rising Fill Badge https://fieldbook.lizardi.mx/components/rising-fill-badge-button A square tile whose round badge shrinks and climbs while a large circle wipes upward from below and a caption rises into the space it leaves. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, caption, wipeMs, spin ### Rising Fill Button https://fieldbook.lizardi.mx/components/rising-fill-button A hollow bordered button that fills with color from the bottom edge upward, like liquid rising, when you hover or focus it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, duration, radius ### Rising tooltip icon button https://fieldbook.lizardi.mx/components/rising-tooltip-icon-button A chrome-free icon button whose glyph swells and turns warning-colored on hover while a small label chip rises in above it after a short delay. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, growth, delaySeconds, size ### Rocking archive tint pill https://fieldbook.lizardi.mx/components/rocking-archive-tint-pill A tinted pill button whose folder glyph rocks side to side on hover or keyboard focus and settles level while pressed. Frameworks: react Access: open Public prop names: label, accent, tintStrength, rockDegrees, rockSpeed ### Rocking icon CTA https://fieldbook.lizardi.mx/components/rocking-icon-cta A solid accent pill whose leading calendar icon rocks like a metronome on hover and, when clicked, draws a tick and swaps the wording to a confirmed label before settling back. Frameworks: react Access: open Public prop names: label, confirmLabel, accent, rockDegrees, rockSeconds ### Rolling cube label button https://fieldbook.lizardi.mx/components/rolling-cube-label-button A button whose label rides on the face of a shallow box, so pointing at it rolls the box a quarter turn and a second message arrives from above. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, hoverLabel, accent, duration, uppercase ### Rolling stat tiles https://fieldbook.lizardi.mx/components/rolling-stat-tiles A row of stat tiles whose big numbers roll digit by digit to a new value instead of snapping. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, tileCount, compactNotation ### Rotating backer button https://fieldbook.lizardi.mx/components/rotating-backer-glow-button A dark plate with a tinted panel hidden just behind it that spins a half turn on hover while the light spilling past its edges spreads wider. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, bloom, rotation, pressScale ### Rotating badge text https://fieldbook.lizardi.mx/components/rotating-badge-text A short repeating phrase is arranged letter by letter around a full circle and spins slowly and continuously, like a stamped badge or vinyl label. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: phrase, durationSeconds, reverse, accent ### Rotating beam rim button https://fieldbook.lizardi.mx/components/rotating-beam-rim-button A leaf shaped button with a bright two tone beam spinning around its rim, visible only in the gap around the face plate. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, secondary, cycle, rim ### Rotating face plate https://fieldbook.lizardi.mx/components/rotating-face-plate-button A button whose labelled dark plate turns a corner and grows when engaged, exposing the accent slab underneath as four triangles, then shrinks and swaps colors with it while pressed. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, angle, scale, size ### Rotating sky explore button https://fieldbook.lizardi.mx/components/rotating-sky-explore-button A button whose fill is a huge swept disc parked below it; hovering rotates the disc into frame like a turning night sky while tiny stars drift down at staggered heights. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, starCount, sweepDegrees, sweepSeconds, radius ### Rotating Word Swap https://fieldbook.lizardi.mx/components/rotating-word-swap A lead-in phrase stays fixed while a trailing word cycles through a list, each swap sliding characters up and out as the next word slides up and in. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: words, interval, accentColor ### Round lift action button https://fieldbook.lizardi.mx/components/round-lift-action-button A circular action button with a solid triangle arrow that swells and lifts on hover, darkens while held, and turns its arrow toward any of four directions. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, diameter, direction, growth, shadow ### Rounded bar chart https://fieldbook.lizardi.mx/components/rounded-bar-chart A plain single series bar chart with generously rounded bar tops, faint gridlines and a value chip that appears over whichever bar is hovered. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, months, barRadius, barGap, animate ### Roving focus tabs https://fieldbook.lizardi.mx/components/roving-focus-tabs A keyboard-first tab list built around roving tab order, where only the active or focused tab is ever reachable by Tab and a thin marker tracks the current one. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultTab, markerThickness ### Rubber sheet panel https://fieldbook.lizardi.mx/components/rubber-sheet-panel A panel that behaves like stretched rubber: the pointer grabs it, neighboring points drag along, and letting go snaps it back with a wobble. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: stiffness, damping, grabRadius, pull, showGrid, accent ### Scale in on view https://fieldbook.lizardi.mx/components/scale-in-on-view A wrapper that holds its child small until it first scrolls into view, then springs it to full size, with an optional per-item stagger for lists. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: startScale, stagger, delay, damping, accent ### Scaling dot carousel https://fieldbook.lizardi.mx/components/scaling-dot-carousel A slide carousel whose active card sits at full scale while its neighbors shrink slightly, paired with dot indicators that widen into labeled pills. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: loop, accentColor, slideCount ### Scanline sweep button https://fieldbook.lizardi.mx/components/scanline-sweep-button A dark console-style button that drops a thin glowing bar down its face on hover while the heavy edge of its border migrates from bottom to top. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, sweepSeconds, barHeight, bloom ### Scanning wire grid https://fieldbook.lizardi.mx/components/scanning-wire-grid A fine wire grid in perspective tilts with the pointer while a bright band sweeps across it on a loop, lighting every line it crosses. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: scanColor, lineColor, gridScale, scanDuration, lineStyle, jitter ### Scattering glyph pill https://fieldbook.lizardi.mx/components/scattering-glyph-pill A rounded pill that swells on hover while three small glyphs shoot out from behind the label and tumble away into the space around it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, hoverScale, spread, glow ### Scene reveal button https://fieldbook.lizardi.mx/components/scene-reveal-button A button whose label plate slides up on hover to uncover a small weather scene of drifting clouds, rising hills, a turning sun and scattered flakes. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, flakes, width, spinSpeed ### Scramble text https://fieldbook.lizardi.mx/components/scramble-text Monospace text that lands one character at a time from rolling glyphs behind a write head, and comes loose again wherever the pointer brushes it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, speed, glyphSet ### Scribble Edit Chip https://fieldbook.lizardi.mx/components/scribble-edit-chip An edit chip whose pencil skates a short scribble back and forth on hover while a wobbly underline draws itself beneath the label, and clicking pins it as the active edit target. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, scribbleSeconds, underline ### Scribble strike checklist https://fieldbook.lizardi.mx/components/scribble-strike-checklist A task list where checking a row draws a wobbling hand-drawn line across the label, and unchecking retracts it. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: strokeMs, accent, wobble, dimCompleted ### Scroll blur reveal text https://fieldbook.lizardi.mx/components/scroll-blur-reveal-text A block of text that starts blurred and offset, then sharpens into focus word by word or letter by letter the first time it scrolls into view. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, splitBy, direction, delayMs ### Scroll cue button https://fieldbook.lizardi.mx/components/scroll-cue-button A small scroll affordance whose chevron falls through its clipped window on hover or focus in an endless loop, and whose click glides the nearest scrollable area toward the next section. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: caption, accent, cycle, direction, showCaption ### Scroll cue pill https://fieldbook.lizardi.mx/components/scroll-cue-pill A tall capsule holding a long thin arrow that drifts on a loop, grows under the pointer and collapses once used. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, direction, height, driftDistance, loop ### Scroll dim text reveal https://fieldbook.lizardi.mx/components/scroll-dim-text-reveal A paragraph sits dimmed and brightens word by word in lockstep with scroll progress, then dims again as you scroll back. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, scrollSpan, dimOpacity, accent ### Scroll entrance wrapper https://fieldbook.lizardi.mx/components/scroll-entrance-wrapper A wrapper that keeps its children parked off position until they scroll into view, then plays one eased arrival and never repeats it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: distance, direction, duration, scale, threshold, accent ### Scroll expand stage https://fieldbook.lizardi.mx/components/scroll-expand-stage A small rounded frame grows to fill the whole viewport as you scroll, its title lifting away while the article underneath fades up. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: startWidth, startRadius, zoom, smoothing, title, accent ### Scroll float reveal https://fieldbook.lizardi.mx/components/scroll-float-reveal Heading characters float up from below and settle into shape as their section scrolls through the viewport, scrubbed directly to scroll position. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, stagger, duration ### Scroll focus column https://fieldbook.lizardi.mx/components/scroll-focus-column A scrolling column where each row fades and shrinks as it leaves the reading band and comes back to full presence as it enters, so only the middle is ever fully solid. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, rows, minOpacity, minScale, showBand ### Scroll focus reveal https://fieldbook.lizardi.mx/components/scroll-focus-reveal A paragraph starts tilted, dim, and blurred, then straightens and sharpens word by word as the reader scrolls through it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, baseOpacity, blurStrength ### Scroll hint button https://fieldbook.lizardi.mx/components/scroll-hint-mouse-button A narrow upright capsule with a bead that slides down inside it on a loop, captioned below, that scrolls the nearest scrollable area one screen when pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, caption, cycleSeconds, height, glow ### Scroll Position Progress Bar https://fieldbook.lizardi.mx/components/scroll-position-progress-bar A thin bar that grows across a container's width as the user scrolls it from start to end. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, barHeight, springStiffness, trackGlobalPage ### Scroll progress rail https://fieldbook.lizardi.mx/components/scroll-progress-rail A hairline bar pinned to the top of a scrollable panel that fills left to right in exact sync with how far the content is scrolled, and drains back when you scroll up. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, thickness, showTrack ### Scroll Progress Text Reveal https://fieldbook.lizardi.mx/components/scroll-progress-text-reveal A long sentence sits pinned on screen while the page scrolls past it, and each word individually brightens from dim to fully lit as the scroll position reaches its turn. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, dimOpacity, scrollLength ### Scroll snap word list https://fieldbook.lizardi.mx/components/scroll-snap-word-list A tall list of words scrolls inside a fixed window and the word crossing the center band lights up with a spring pop while the rest stay dim and tilted. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: rotationDepth, dimOpacity, accentColor ### Scrollable modal dialog https://fieldbook.lizardi.mx/components/scrollable-modal-dialog A general-purpose modal with a header, a body that scrolls independently once its content overflows, and a footer, closable by its own close button, an outside click, or Escape. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: title, description, accentColor ### Scrolling content strip https://fieldbook.lizardi.mx/components/scrolling-content-strip A horizontal strip of small cards drifts sideways in an unbroken loop, pausing in place the moment a pointer rests over any card in it. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: speed, reverse, pauseOnHover, accent, gap ### Scrolling tile lattice https://fieldbook.lizardi.mx/components/scrolling-tile-lattice An endless outlined lattice that scrolls in one direction, filling the cells under the pointer and letting them fade out behind it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: shape, direction, tileSize, speed, fillColor, trailLength ### Scrub Number Input https://fieldbook.lizardi.mx/components/scrub-number-input A number field with increment and decrement buttons plus a draggable label that scrubs the value up or down as you drag it sideways. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, value, min, max, accentColor ### Scrubbing tooltip chart https://fieldbook.lizardi.mx/components/scrubbing-tooltip-chart A line chart with a spring-eased crosshair, a value dot glued to the line, a floating panel that flips sides near the edges, and a date pill at the bottom. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, showDatePill, dotStyle ### Sealing frame button https://fieldbook.lizardi.mx/components/sealing-frame-button A square outlined call to action whose border sits broken by three gaps at rest; hovering seals the frame shut as the fill inverts. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, borderWidth, ruleLength, uppercase ### Seamless share pie https://fieldbook.lizardi.mx/components/seamless-share-pie A solid pie with its slices fused edge to edge and no gap or stroke between them, so hovering is the only thing that reveals where one share ends and the next begins. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, hueRange, seamOnHover, dimOthers, showReadout ### Search Composer Field https://fieldbook.lizardi.mx/components/search-composer-field A message box that grows with what you type, with a lookup toggle whose label slides open and a send action that wakes up once there is text. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: placeholder, toggleLabel, lookupOn, accent, maxHeight ### Searchable Select https://fieldbook.lizardi.mx/components/searchable-select A button that opens a small popover with a search field and a filterable list of options, so someone can type to narrow choices instead of scrolling a long dropdown. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, placeholder, searchPlaceholder, optionCount ### Seasonal Range Picker https://fieldbook.lizardi.mx/components/seasonal-range-picker A two month range picker restricted to a fixed open season, dimming out every date before or after the allowed window across both visible months. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, seasonStartMonth, seasonEndMonth ### Segment Fade Spinner https://fieldbook.lizardi.mx/components/segment-fade-spinner A loading indicator of eight radial segments that fade in and out in sequence so a bright arc appears to chase itself around the ring. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: color, size, speed ### Segment Spring Lab https://fieldbook.lizardi.mx/components/segment-spring-lab A single-select segmented control for tuning how stiff or loose the spring feels as its highlight glides between segments. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: springStiffness, springDamping, accentColor ### Segmented choice bar https://fieldbook.lizardi.mx/components/segmented-choice-bar A row of connected toggle buttons for picking one or several options at once, styled as one continuous bar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: mode, size, disabled, accentColor ### Segmented Choice Switch https://fieldbook.lizardi.mx/components/segmented-choice-switch A rounded pill switcher where exactly one option is active and a sliding highlight glides beneath whichever choice is picked. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, optionOne, optionTwo, optionThree, highlightColor ### Segmented progress meter https://fieldbook.lizardi.mx/components/segmented-progress-meter A progress meter drawn as a row of notches that light up in turn, with a partly filled leading notch and a caption naming the current stage. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: segments, value, autoplay, accent, showCaption ### Segmented Toggle Row https://fieldbook.lizardi.mx/components/segmented-toggle-row A row of icon buttons fused into one bar where exactly one segment stays pressed, like an alignment picker. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: defaultValue ### Segmented toggle tabs https://fieldbook.lizardi.mx/components/segmented-toggle-tabs A compact pill-shaped segmented control for switching between a small number of short options, with a filled block sliding to whichever segment is selected. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, defaultRange, size ### Compact select menu https://fieldbook.lizardi.mx/components/select-menu-compact A trigger button that opens a floating list of choices, with the current pick shown on the button and a check beside it in the list. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: defaultValue, accent ### Send flight button https://fieldbook.lizardi.mx/components/send-flight-button A brushed light button that plays a short send sequence: the paper glyph flies off, a sending label counts its dots, then a check drops in. Frameworks: react Access: open Public prop names: label, sentLabel, accent, sequenceMs, autoReplay ### Send flyaway bezel https://fieldbook.lizardi.mx/components/send-flyaway-bezel-button A chunky bezelled send button where the paper plane bobs, then flies off the right edge on hover or keyboard focus while the label chases after it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, width, flyMs, bobbing ### Sequential terminal log https://fieldbook.lizardi.mx/components/sequential-terminal-log A terminal window that replays a scripted session once it scrolls into view, typing commands and fading in status lines one after another. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: typingSpeedMs, accentColor, autoplayOnView ### Series icon area chart https://fieldbook.lizardi.mx/components/series-icon-area-chart A stacked area chart whose legend gives every series a small drawn direction glyph beside its swatch, and lets you mute a band by clicking it. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, secondColor, fillOpacity, showLegend, animate ### Series Legend List https://fieldbook.lizardi.mx/components/series-legend-list A legend that doubles as a ranked list: dot, label, rolling value, share of total and a thin bar, with hover that mutes the other rows. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, title, items, showPercentage, showProgress ### Series Switch Trend https://fieldbook.lizardi.mx/components/series-switch-trend A ninety-day trend line with two total tiles in the header; picking a tile morphs the line to that series and tweens the stroke to its accent. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: primaryColor, secondaryColor, days, strokeWidth, showGrid ### Sessions Line Card https://fieldbook.lizardi.mx/components/sessions-line-stat-card A seven day session card where the reading sits inside the plot, anchored bottom right, and a highlight dot rides the spline as you scrub. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, strokeWidth, smoothing, trend, title ### Preference checklist https://fieldbook.lizardi.mx/components/settings-checklist-rows A stack of labeled preference rows, each with its own accent-colored checkbox that fills and draws a checkmark independently. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rowCount, size, variant, accentColor ### Settings Group Accordion https://fieldbook.lizardi.mx/components/settings-group-accordion A vertical group of labeled sections that can each expand independently, so more than one stays open at once unlike a typical single-open accordion. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: allowMultiple, accentColor, transitionMs, showChevron ### Settings toggle switch https://fieldbook.lizardi.mx/components/settings-toggle-switch A small pill on/off switch with a sliding knob that flips a single setting, its track going from muted to a solid accent while the knob stretches like elastic if pressed mid-slide. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: checked, accent, disabled ### Settling Add Pill https://fieldbook.lizardi.mx/components/settling-add-pill A compact capsule with a plus mark that settles down through three shadow depths as you hover and then press it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, restDepth, fontSize ### Settling photo masonry https://fieldbook.lizardi.mx/components/settling-photo-masonry A masonry grid of variable-height photo tiles that fly in from off screen and settle into their packed columns, blurring into focus as they land. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: columns, animateFrom, stagger, scaleOnHover ### Settling shadow button https://fieldbook.lizardi.mx/components/settling-shadow-button A warm gradient pill that floats above a large accent tinted shadow and lands on hover as the shadow disappears. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, lift, shadowSize, width ### Shape toggle morph icon https://fieldbook.lizardi.mx/components/shape-toggle-morph-icon A single filled icon flips between two shapes only when clicked, its outline flowing directly from one silhouette into the other and its color crossfading to match, then holding until clicked again. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: shapeA, shapeB, colorA, colorB, size ### Shape wipe theme toggle https://fieldbook.lizardi.mx/components/shape-wipe-theme-toggle A sun and moon icon button that switches the panel theme with a shape wipe that grows from the button, swaps the colors at full cover, then shrinks away. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: shape, duration, accentColor, fromCenter ### Share fan button https://fieldbook.lizardi.mx/components/share-fan-button A share button that dissolves on hover while a row of square destination buttons unrolls out of its left edge, one after another. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, count, accent, openOn, stagger ### Share row lift https://fieldbook.lizardi.mx/components/share-row-lift-button A share pill that lifts a matching pill of destination icons up out of itself on hover and drops it back the moment attention leaves. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, destinations, liftDistance, stagger ### Share target swap button https://fieldbook.lizardi.mx/components/share-target-swap-button A compact share button that keeps one footprint and swaps its label for a staggered row of destination glyphs on hover or focus. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, size, glyphSide, accent, lift ### Share tile row https://fieldbook.lizardi.mx/components/share-tile-row A short row of square share tiles that each scale up and flood with their own colour, flipping the glyph to the plate tone, when engaged. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, uniform, size, gap, scale ### Share toggle chip https://fieldbook.lizardi.mx/components/share-toggle-chip A recessed chip that flips from an invitation to a confirmed state on click, its glyph popping past full size before settling. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: idleLabel, activeLabel, accent, popScale, recessed ### Button-to-dialog morph https://fieldbook.lizardi.mx/components/shared-button-to-dialog A pill-shaped button that grows directly into a confirmation dialog, keeping its rounded shape and label continuous through the transition instead of popping a separate modal open. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, confirmLabel, accent ### Shared-Element Lightbox https://fieldbook.lizardi.mx/components/shared-element-lightbox A grid of thumbnails where clicking one morphs it seamlessly into a large centered overlay, and closing morphs it back to its original spot. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: columns, gap, closeOnBackdrop ### Shared layout card expand https://fieldbook.lizardi.mx/components/shared-layout-card-expand A grid of cards where clicking one grows it in place into a large detail panel, and switching directly to another card retargets the same reflow instead of closing then reopening. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: columns, title, accent ### Shared-Layout Tab Switch https://fieldbook.lizardi.mx/components/shared-layout-tab-switch A row of plain text tabs where a solid pill background slides and resizes to match whichever tab is selected, using spring-driven shared-layout motion. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: selected, accentColor, pillRadius ### Sheen scale button https://fieldbook.lizardi.mx/components/sheen-scale-button A fixed size filled button with a diagonal two tone sheen that swells slightly and casts a matching halo when hovered or focused. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, growth, halo ### Sheen sweep card https://fieldbook.lizardi.mx/components/sheen-sweep-card A card with a band of light parked off one corner that travels across the face on hover and slides back the moment the pointer leaves. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: angle, bandSize, duration, playOnce, glareColor ### Sheen upload button https://fieldbook.lizardi.mx/components/sheen-upload-button A compact upload button with a top-lit face; pressing it sweeps a sheen across and nudges the cloud arrow upward, and a busy state loops the sheen until turned off. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, busy, sheenMs, radius ### Sheet drawer https://fieldbook.lizardi.mx/components/sheet-drawer A slide-over panel that springs in from one edge over a dimmed backdrop, holds focus inside, and closes on Escape, the close button, or a pull on its header. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: side, width ### Shifting frame button https://fieldbook.lizardi.mx/components/shifting-frame-button A dark tracked button framed by a few pixels of a wide two-tone ramp that slides slowly so the visible frame keeps changing tone. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, secondary, cycle, frameWidth ### Shifting gradient pill https://fieldbook.lizardi.mx/components/shifting-gradient-pill A capsule button painted with an oversized diagonal ramp that slides across the face when engaged, while two corner glows swap between a light and a deep tint of the same hue. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, shift, glow, pressTilt ### Shimmer sweep button https://fieldbook.lizardi.mx/components/shimmer-sweep-button A tinted translucent button with a hairline edge that sends a slanted band of light sweeping across its face on hover. Frameworks: react Access: member Public prop names: label, accent, sweepMs, bandWidth, growOnHover ### Shimmer sweep text https://fieldbook.lizardi.mx/components/shimmer-sweep-text A line of text where each letter brightens and dims in turn, sending a band of light travelling along the phrase on a loop. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, duration, restDelay, highlight, wave ### Shockwave dot grid https://fieldbook.lizardi.mx/components/shockwave-dot-grid A grid of dots that tints toward the cursor and blasts outward in a ring when you click or flick across it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, dotSize, gap, proximity, shockRadius, returnSeconds ### Shortcut chip button https://fieldbook.lizardi.mx/components/shortcut-chip-button A small chip button that advertises a keyboard shortcut, tilts its glyph on hover and wipes a thin band of light across itself. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: keyLabel, modifier, accent, sweepMs, showGlyph ### Shortcut key chip https://fieldbook.lizardi.mx/components/shortcut-key-chip Small pill-shaped chips representing individual keyboard keys, placed side by side to spell out a shortcut. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: keys, size, tone, accent ### Shrink and emphasize button https://fieldbook.lizardi.mx/components/shrink-emphasis-button A button that contracts on hover while its label grows larger and heavier, so the type presses outward against the shrinking shell. Frameworks: react Access: member Public prop names: label, accent, shrink, tracking ### Shrink to icon button https://fieldbook.lizardi.mx/components/shrink-to-icon-button A wide labelled capsule that narrows into a round icon button on hover or focus while the label drops out of frame and the icon flies in. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, expandedWidth, height, duration, fromRight ### Shrinking cap icon row https://fieldbook.lizardi.mx/components/shrinking-cap-icon-buttons A row of round icon buttons whose fill hides behind a dark cap that collapses away on hover, uncovering the colour from the rim inward. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, count, size, revealMs, pressScale ### Sign-in card with photo https://fieldbook.lizardi.mx/components/sign-in-card-with-photo A wide sign-in card split into a form half and a photo half, centered on a tinted page, with icon-only provider buttons. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, accentColor, providerCount ### Signal jitter heading https://fieldbook.lizardi.mx/components/signal-jitter-heading A bold headline drawn in three tinted layers that jaggedly nudge apart and snap back together like a broken video signal. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, intensity, colorTheme, isStatic ### Signal sweep bands https://fieldbook.lizardi.mx/components/signal-sweep-bands A banner of interference-warped light bands with a bright sweep travelling through them and the color channels fringed slightly apart. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: colorA, colorB, bandDensity, sweepSpeed, direction, grain ### Signed value bar chart https://fieldbook.lizardi.mx/components/signed-value-bar-chart A monthly bar chart centered on a zero line, with bars rising in one colour and dropping in another depending on their sign. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: positiveColor, negativeColor, barRadius, animate ### Signup card on tint https://fieldbook.lizardi.mx/components/signup-card-on-tint A centered signup card on a tinted page background, pairing the password and confirm-password fields side by side under one shared helper line. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: heading, accentColor, brandName ### Signup card with photo https://fieldbook.lizardi.mx/components/signup-card-with-photo A wide signup card split into a form half and a clipped photo half, collecting email and paired passwords before a row of icon-only provider buttons. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, accentColor, providerCount ### Signup page with social https://fieldbook.lizardi.mx/components/signup-page-with-social A card-free signup page collecting name, email and matching passwords above one outlined alternate provider button and a centered sign-in link. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: heading, accentColor, providerLabel ### Simple centered login https://fieldbook.lizardi.mx/components/simple-centered-login A centered sign-in page card with email and password fields, a full-width submit button, an optional single sign-on button and a link to create an account. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, accentColor, showSocialButton ### Simple sign-in card https://fieldbook.lizardi.mx/components/simple-sign-in-card A centered sign-in page card with a labeled email field, a password field with a forgot-password link, a primary submit button and an outlined alternate provider button. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: heading, accentColor, showAltProvider, providerLabel ### Single Date Grid https://fieldbook.lizardi.mx/components/single-date-grid A plain, unframed month grid for picking one date, with a month header, weekday row, and generously sized day cells. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, cellSize, showOutsideDays ### Single glyph spinner https://fieldbook.lizardi.mx/components/single-glyph-spinner A minimal ring spinner: one thin stroked arc that continuously rotates to signal a background task is running. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, color, speed ### Single Hoop Radar https://fieldbook.lizardi.mx/components/single-hoop-radar A pared back polar chart with exactly one reference hoop and no spokes, so the series shape is read against a single threshold ring. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, hoopScale, hoopStroke, fillOpacity, showLabels ### Single line typewriter caret https://fieldbook.lizardi.mx/components/single-line-typewriter-caret A single sentence types itself out once at an uneven, human pace, then a solid caret keeps blinking steadily beside the finished line forever. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, baseSpeedMs, accent, blinkMs ### Single Panel Disclosure https://fieldbook.lizardi.mx/components/single-panel-disclosure One trigger and one panel: a compact show and hide block that drops its content in under a soft mask. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, defaultOpen, keepMounted, travel, duration ### Single value slider https://fieldbook.lizardi.mx/components/single-value-slider A horizontal slider with one draggable thumb that fills the track behind it so the current value reads at a glance. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: value, accent ### Sinking lip button https://fieldbook.lizardi.mx/components/sinking-lip-button A chunky rounded cap on a darker lip band that collapses on press so the cap sinks flush into its base, then pops back on release. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lipDepth, radius, disabled ### Sketched outline button https://fieldbook.lizardi.mx/components/sketched-outline-button An outlined button whose four corners are deliberately uneven, redrawing into a second lopsided shape with a dashed stroke on hover or focus. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, stroke, wobble, dashOnHover, duration ### Skewed blade invert https://fieldbook.lizardi.mx/components/skewed-blade-invert-button A dark rounded button that inverts as a slanted accent blade opens outward from its center on hover or keyboard focus. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, skew, durationMs, radius ### Skewed shutter button https://fieldbook.lizardi.mx/components/skewed-shutter-button A button whose two sheared panels park outside its edges and drive inward on hover, closing behind the label on a diagonal seam. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, trailing, label, skew, duration ### Skewed slab button https://fieldbook.lizardi.mx/components/skewed-slab-button A sheared slab button that rests slightly transparent and comes to full strength on hover, scaling up on keyboard focus. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lean, borderWidth, restOpacity ### Skewed slab press https://fieldbook.lizardi.mx/components/skewed-slab-press-button A slanted slab button standing on a hard ledge that drops flat and tightens its lettering while held, then springs back on release. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, ledgeColor, label, skew, ledge ### Skewed wipe button https://fieldbook.lizardi.mx/components/skewed-wipe-button A button masked by a slanted dark panel that slides off to the right on hover, uncovering the colour underneath. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, skew, duration ### Skewed wipe reveal button https://fieldbook.lizardi.mx/components/skewed-wipe-reveal-button A pill hidden under a slanted dark panel; hovering slides the panel off the right edge to uncover the bright fill while the label flips to dark. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, skew, duration, direction ### Skewed wipe swap button https://fieldbook.lizardi.mx/components/skewed-wipe-swap-button A button that swaps its label on hover or focus while a sheared accent panel wipes up across its face. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: restLabel, hoverLabel, accent, skew, speed ### Slab Lift Icon Button https://fieldbook.lizardi.mx/components/slab-lift-icon-button A translucent icon tile that rises off a solid slab of light on hover, then slams back down and swallows the slab when it is pressed. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, lift, tint, size, radius ### Slanted outline button https://fieldbook.lizardi.mx/components/slanted-outline-button A hollow parallelogram button whose outline arrives in two stages: the slanted sides swing into their lean first, then the flat top and bottom draw in to close the shape. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, slant, lineWidth, glow ### Slanted shutter button https://fieldbook.lizardi.mx/components/slanted-shutter-button Two slanted accent panels drop from above and below to close over the pill on a diagonal seam while the label rolls once and inverts through the fill. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, skew, duration, radius ### Slice picker donut https://fieldbook.lizardi.mx/components/slice-picker-donut A donut driven by a dropdown in its header: the chosen slice pushes out and grows a detached outer arc, while the hole shows that slice's number. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, holeRatio, raise, ringGap, hueRange ### Slide away destructive https://fieldbook.lizardi.mx/components/slide-away-destructive-button A destructive button whose label slides left to leave only a cross, then flips to a success face with a checkmark for a moment when pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, confirmColor, slideMs, confirmMs ### Slide out tabs button https://fieldbook.lizardi.mx/components/slide-out-tabs-download-button A download button with two dark caption tabs stacked behind it that slide out above and below on hover and pull halfway back when it is held. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, topCaption, bottomCaption, accent, travel ### Slide under download button https://fieldbook.lizardi.mx/components/slide-under-download-button A labelled button that slides a bright action tray out from under its plate on hover or focus, with a bobbing download arrow inside the tray. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, direction, duration, bobbing ### Slide up panel dialog https://fieldbook.lizardi.mx/components/slide-up-panel-dialog A centered dialog that rises into place over a dimmed scrim, for any content that needs a moment of full attention. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, closeOnOverlayClick, panelWidth ### Sliding content tabs https://fieldbook.lizardi.mx/components/sliding-content-tabs A content viewport paired with a capsule tab bar below it, where switching tabs slides the panel in from the side of the chosen tab while a colored highlight glides behind the active label. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: activeTab, accent ### Sliding digit counter https://fieldbook.lizardi.mx/components/sliding-digit-counter A total that counts up by rolling each digit column into place while a star fills alongside it and bursts a few particles when it lands. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: value, duration, accent, particles, label ### Sliding fill send pill https://fieldbook.lizardi.mx/components/sliding-fill-send-pill A wide outlined pill with a solid disc at one end; hovering slides that fill across the whole pill and flips the label as it passes. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, height, slideSeconds, capSide ### Sliding height tabs https://fieldbook.lizardi.mx/components/sliding-height-tabs Tabs framed in a card where switching panels slides the whole content track sideways like a filmstrip while the card's height eases to match the new panel. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: tabOneLabel, tabTwoLabel, accent ### Sliding highlight menu https://fieldbook.lizardi.mx/components/sliding-highlight-menu A button-triggered action menu where one rounded plate glides between rows as the pointer or the arrow keys move, rather than each row lighting up on its own. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, align, offset, accent, showShortcuts ### Sliding highlight tabs https://fieldbook.lizardi.mx/components/sliding-highlight-tabs An accessible tab list where a rounded highlight block glides beneath the active label as selection moves between tabs, revealing a matching content panel below. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultTab, fullWidth ### Sliding highlight toggle group https://fieldbook.lizardi.mx/components/sliding-highlight-toggle-group A row of icon buttons with a highlight panel that glides beneath the active one, or fades independently behind each active one in multi-select mode. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: mode, iconCount, defaultActive, accent ### Sliding label button https://fieldbook.lizardi.mx/components/sliding-label-button A solid button whose label rolls straight up out of the frame while a second line rolls in from below to take its place. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, hoverLabel, variant, accent, slideMs ### Sliding panel button https://fieldbook.lizardi.mx/components/sliding-panel-button A bordered button whose second label rides in on a colored panel from the right edge, covering the first label completely. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, hoverLabel, accent, companion, duration ### Sliding Panel Tabs https://fieldbook.lizardi.mx/components/sliding-panel-tabs Two tabs in a rounded pill track with a highlight that slides between them, crossfading a settings-style panel underneath without any layout jump. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, defaultTab ### Sliding Pin Swap https://fieldbook.lizardi.mx/components/sliding-pin-swap-button A ramped button whose pin glyph glides from one side to the other while the resting word fades out and a reply fades in behind it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, idleLabel, hoverLabel, travel, duration ### Sliding segment tabs https://fieldbook.lizardi.mx/components/sliding-segment-tabs A pill-shaped segmented control whose background indicator glides beneath the active label while the panel below slides in from the direction of travel. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, segments, transitionSpeed, defaultIndex ### Sliding segment toggle https://fieldbook.lizardi.mx/components/sliding-segment-toggle A single-select segmented control where a highlight pill glides beneath the active label whenever a different segment is chosen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: variant, size, accentColor ### Sliding Selection Highlight https://fieldbook.lizardi.mx/components/sliding-selection-highlight A shared floating background chip that glides from one item to another inside a row of options, tracking whichever item is hovered or clicked. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: mode, accent, exitDelay ### Sliding send button https://fieldbook.lizardi.mx/components/sliding-send-button A flat send button that slides right on hover while the gap between its label and arrow opens, recoils a few pixels under press, and settles back on leave. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, travel, tracking ### Sliding Thumb Switch https://fieldbook.lizardi.mx/components/sliding-thumb-switch An on/off switch built from a hidden checkbox: a pill track that recolors and a round thumb that slides to the opposite edge. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: checked, accentColor, disabled ### Slotted panel card https://fieldbook.lizardi.mx/components/slotted-panel-card A composable surface with header, action, body and footer slots that keep their spacing however many are used. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: title, showAction, showDivider, accent ### Smoke trail cursor https://fieldbook.lizardi.mx/components/smoke-trail-cursor A soft churning cloud that follows the pointer like smoke, curling back on itself when you change direction and dissolving when you stop. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: trailLength, inertia, grain, brightness, color ### Smoke veil drift https://fieldbook.lizardi.mx/components/smoke-veil-drift Broad sheets of colored haze crossing a black field at an angle, thinning and thickening as they slide past each other. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, speed, veilCount, hueDrift, scanlines ### Smooth Area Trend https://fieldbook.lizardi.mx/components/smooth-area-trend-chart A single series area chart with a smoothly curved top edge, a soft tinted fill, faint horizontal gridlines and a readout that follows the pointer. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, months, fillOpacity, showGrid, animate ### Snap back icon button https://fieldbook.lizardi.mx/components/snap-back-icon-button A bare glyph button that grows smoothly under the pointer and snaps back to its resting size the instant it is pressed. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, size, hoverScale, strokeWidth ### Social Post Card https://fieldbook.lizardi.mx/components/social-post-card A full social post with author header, linkified body, a media grid that adapts to one through four items, and a metrics row. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: mediaCount, verified, showMetrics, accent ### Social proof avatar row https://fieldbook.lizardi.mx/components/social-proof-avatar-row A tight row of overlapping avatar circles closing with a bubble that totals everyone left out of the row. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, overlap, accent, overflowCount ### Social sign-in card https://fieldbook.lizardi.mx/components/social-sign-in-card A sign-in page card on a tinted background that leads with full-width provider buttons, then offers an email and password fallback with terms fine print below. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: brandName, accentColor, providerCount ### Soft bloom fill button https://fieldbook.lizardi.mx/components/soft-bloom-fill-button A hairline pill lit from inside by a blurred dot that swells slowly from one corner until it fills the whole face. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, blur, duration, startSize ### Soft fiber curtain https://fieldbook.lizardi.mx/components/soft-fiber-curtain Layered curtains of pale filaments lean and twist across a deep field, brightening as they cross like light through fabric. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: glowColor, layers, speed, twist, brightness, grain ### Soft inset press button https://fieldbook.lizardi.mx/components/soft-inset-press-button A near-black slab that sits above a matching panel on two opposing soft shadows, sinks into the surface while held and rises again on release. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, depth, radius, restOpacity ### Soft Pad Button https://fieldbook.lizardi.mx/components/soft-pad-button A rounded pad standing on a matte surface with paired light and dark shadows, settling closer to the page under the press. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, surface, lift, radius ### Soft relief button https://fieldbook.lizardi.mx/components/soft-relief-button A pale pill lifted by a warm highlight on one side and a cool shadow on the other, both tightening on hover and vanishing entirely when it is held flush. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, depth, radius, showIcon ### Soft relief send button https://fieldbook.lizardi.mx/components/soft-relief-send-button A send button moulded out of a light surface: a two tone rim around a soft inner pad with a filled send glyph that sinks flat while held. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, depth, radius, sink ### Solid Ring Spinner https://fieldbook.lizardi.mx/components/solid-ring-spinner A padded, boxed loading indicator: a thick-stroked ring with one accent-colored edge spinning at a constant linear speed inside a rounded panel. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, size, durationMs ### Spacebar Keycap https://fieldbook.lizardi.mx/components/spacebar-keycap-button A wide mechanical keycap you can push with the pointer or with the real space key, complete with a homing bump and a sculpted travel. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: legend, keyTint, width, travel, bindSpaceKey ### Spark line https://fieldbook.lizardi.mx/components/spark-line A row of metric tiles whose sparklines draw themselves on mount and follow the pointer with a crosshair that reads the value under it. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: color, smooth, points ### Sparkling highlight text https://fieldbook.lizardi.mx/components/sparkling-highlight-text Bold display text with a handful of tiny four-pointed stars popping in and out at random spots across the letters, each one growing, spinning briefly, then vanishing to be replaced somewhere else. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, sparkleCount, accentA, accentB ### Speaking glow button https://fieldbook.lizardi.mx/components/speaking-glow-button A dark pill whose bottom edge carries luminous bands running on offset loops, so it reads as a live waveform while it listens. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, listening, bandCount, speed ### Speckled gradient button https://fieldbook.lizardi.mx/components/speckled-gradient-button A two-stop gradient face overlaid with generated fractal noise in a soft blend, so the color reads as printed on rough stock. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, partner, label, grain, grainStrength ### Specular edge button https://fieldbook.lizardi.mx/components/specular-edge-button A dark button whose rounded outline behaves like polished metal, with a highlight riding the edges facing a light that steers toward the pointer anywhere on the page. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, lineColor, intensity, radius, proximity, autoSweep ### Spin count tile https://fieldbook.lizardi.mx/components/spin-count-tile A square that turns a whole number of times on demand and lands square again, with a faint arc showing how far through the turn it is. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, turns, duration, easing, continuous ### Spin Off Thanks https://fieldbook.lizardi.mx/components/spin-off-thanks-button A two-faced call to action where the top face spins away and drops out while a second face rises up behind it to take over. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: frontLabel, backLabel, accent, backColor, spinDegrees, latchOnClick ### Spinning square flood button https://fieldbook.lizardi.mx/components/spinning-square-flood-button An outlined button that floods with its accent as a spinning rounded square slides in from the corner, so the fill arrives behind a wavy rolling edge. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, spinSeconds, floodSeconds, squareSize, radius ### Spinning text ring https://fieldbook.lizardi.mx/components/spinning-text-ring A short repeated phrase set letter by letter around a circle that turns steadily in place, like a coin edge or a stamp seal. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, durationSeconds, radius, reverse, accent ### Split cover login https://fieldbook.lizardi.mx/components/split-cover-login A two-column login page with a centered sign-in form beside a full-bleed decorative cover panel that drops away on narrow screens. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: brandName, accentColor, imageSide ### Split cover signup https://fieldbook.lizardi.mx/components/split-cover-signup A two column signup page: a narrow centered form with a brand mark on one side and a full bleed illustrated cover on the other, collapsing to a single column when narrow. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: brandName, accentColor, imageSide ### Split curtain reveal button https://fieldbook.lizardi.mx/components/split-curtain-reveal-button A button hidden under four accent panels that part sideways first and vertically a beat later, uncovering the label in two staged moves. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, duration, stagger, borderWidth ### Split flap display https://fieldbook.lizardi.mx/components/split-flap-display A row of mechanical flip-board tiles cycles through a list of short phrases, and only the tiles whose letter changes tumble through a few random flaps before landing. Frameworks: react, svelte, astro, html Access: member Public prop names: phrases, cycleDelay, tileColor, textColor ### Split flap face button https://fieldbook.lizardi.mx/components/split-flap-face-button The filled face drops out of the bottom of the button on hover and the label rebuilds itself letter by letter from behind it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, stagger, travel, duration ### Split panes https://fieldbook.lizardi.mx/components/split-panes Two panes divided by a handle that resizes them by drag or arrow key, keeps a minimum size on both sides, and snaps back on double-click. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: initialSplit, direction ### Split Reveal Hover Text https://fieldbook.lizardi.mx/components/split-reveal-hover-text Text is sliced into a top and bottom half; on hover the top half slides away and fades while the bottom half glides up to complete the word, and it reverses when the pointer leaves. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, splitGap, accentColor ### Split shutter reveal button https://fieldbook.lizardi.mx/components/split-shutter-reveal-button A round button whose two label halves retract to the edges at different speeds, uncovering the breathing mark underneath as the whole thing tilts. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, rotation, scale, revealSeconds ### Split sign-in page https://fieldbook.lizardi.mx/components/split-sign-in-page A two-column login page pairing a narrow form column with a full-height cover image on the opposite side, the image dropping away on small screens. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: brandName, accentColor, imageSide ### Split text entrance https://fieldbook.lizardi.mx/components/split-text-entrance Copy that is cut into characters, words or lines and animated in piece by piece on a shared stagger, with a few entrance presets to pick between. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: unit, preset, stagger, delay, accent ### Split text reveal https://fieldbook.lizardi.mx/components/split-text-reveal A headline whose words or characters rise out of a clip mask, blurred and tinted, staggered left to right on mount, and replayed on click. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, split, stagger, duration ### Spoke area chart https://fieldbook.lizardi.mx/components/spoke-area-chart A polar plot where labelled spokes carry one series as a translucent closed shape over a polygon grid, with a readout that snaps to the nearest spoke. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, fillOpacity, rings, strokeWidth, animate ### Spoke Radar Plot https://fieldbook.lizardi.mx/components/spoke-radar-plot Metrics on radiating spokes with concentric rings, where each series inflates from the centre and lights up on hover. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, secondary, levels, series, showPoints, showGrid ### Spokeless Ring Radar https://fieldbook.lizardi.mx/components/spokeless-ring-radar A polar chart with concentric scale rings and no radial spokes, plotting one dotted series whose corners carry the category labels. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, rings, dotRadius, fillOpacity, animate ### Spotlight card https://fieldbook.lizardi.mx/components/spotlight-card Cards whose 1px border and surface light up around the pointer, with the highlight carrying across a row of stat tiles. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: color, radius, borderOnly ### Spotlight fill button https://fieldbook.lizardi.mx/components/spotlight-fill-button A pill button in one saturated accent that dims its fill under a dark veil on hover while a soft oval spotlight follows the pointer. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, spotSize, dim, followPointer ### Spotlight profile grid https://fieldbook.lizardi.mx/components/spotlight-profile-grid A grid of profile cards that stays desaturated and dim except for a soft spotlight that follows the pointer and reveals full color underneath. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: spotlightRadius, columns, damping, accentColor ### Spotlight shafts https://fieldbook.lizardi.mx/components/spotlight-shafts Shafts of light fan out from a point on one edge of the frame, breathing in and out and steering toward the pointer. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rayColor, origin, spread, rayLength, speed, followPointer ### Spring dot radio group https://fieldbook.lizardi.mx/components/spring-dot-radio-group A radio group whose selected dot springs in with a small overshoot while the previous dot shrinks away, crossing over instead of snapping. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, dotSize, layout, showDescriptions, disabledIndex ### Spring drag carousel https://fieldbook.lizardi.mx/components/spring-drag-carousel A draggable card carousel that snaps to the nearest card with spring physics and can autoplay in a loop. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: autoplay, autoplayDelay, loop, baseWidth, accentColor ### Spring easing toggle https://fieldbook.lizardi.mx/components/spring-easing-toggle A tile that slides between two stops on a spring curve baked into a plain CSS transition, with the generated curve plotted beside it. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: bounce, duration, accent, showCurve, spin ### Spring Fill Progress https://fieldbook.lizardi.mx/components/spring-fill-progress A slim progress track whose fill glides to each new value on a spring, with a readout that counts along with it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: autoplay, value, trackHeight, accent, showReadout ### Spring lag trail https://fieldbook.lizardi.mx/components/spring-lag-trail A chain of circles that chase the pointer with progressively softer springs, so fast movement stretches them into a comet tail that gathers back together at rest. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, trailCount, stiffness, damping, headSize ### Spring layout toggle https://fieldbook.lizardi.mx/components/spring-layout-toggle A switch whose knob is aligned to one end of the track by layout alone and springs between the two measured positions whenever the state flips. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: on, bounce, size, label, accent ### Spring press button https://fieldbook.lizardi.mx/components/spring-press-button A plain button that grows a little under the pointer and dips while held, both on a short spring, with the two scales and the spring stiffness exposed as knobs. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, hoverScale, tapScale, stiffness, accent ### Spring Push Collapsible https://fieldbook.lizardi.mx/components/spring-push-collapsible A settings row that opens a detail panel and pushes the rows below it down on one shared spring instead of a height jump. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, defaultOpen, stiffness, damping, keepMounted ### Spring reveal button https://fieldbook.lizardi.mx/components/spring-reveal-button A playful capsule with a spinning token at its left; on hover the token collapses and an oversized shape springs up from below, rocking as it lands. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, rockDegrees, spinSeconds, showTags ### Spring tuner https://fieldbook.lizardi.mx/components/spring-tuner-tile A tile that springs between two states while a live trace plots its overshoot, so stiffness, damping and mass can be felt and read at the same time. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, stiffness, damping, mass, property, showTrace ### Springing radio group https://fieldbook.lizardi.mx/components/springing-radio-group A radio group where the chosen dot springs up from nothing with a small overshoot while the previous one shrinks away, and every ring grows slightly under the pointer. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, orientation, ringSize, bounce, showDescriptions ### Squaring backer button https://fieldbook.lizardi.mx/components/squaring-backer-button A solid pill with a tilted twin behind it that snaps level and lit on hover while an arrow unfolds from the left beside the label. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, tilt, scale, showArrow ### Squash key button https://fieldbook.lizardi.mx/components/squash-key-button A key-cap button that squashes flat under the pointer while a base slab slides out from beneath it, then drops onto the slab when held. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, squash, dropPx, showIcon ### Stacked Alert Toasts https://fieldbook.lizardi.mx/components/stacked-alert-toasts A corner-anchored toast stack where new notifications compress behind the newest card and the whole stack expands into a readable list on hover. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: position, durationSeconds, expandOnHover, color ### Stacked Area Chart https://fieldbook.lizardi.mx/components/stacked-area-chart Two monthly series stacked into filled bands where the outer edge traces the combined total and the seam between them shows how the split moves. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, secondColor, fillOpacity, showTotal, animate ### Stacked blur fade https://fieldbook.lizardi.mx/components/stacked-blur-fade A scroll panel edge that dissolves into the panel colour through several stacked backdrop blurs instead of one flat blur band. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: height, position, layers, maxBlur, autoHide, accentColor ### Stacked option checklist https://fieldbook.lizardi.mx/components/stacked-checkbox-list A stacked list of labeled checkboxes that share one combined selection, with a running count of how many items are chosen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, gap, orientation ### Stacked FAQ accordion https://fieldbook.lizardi.mx/components/stacked-faq-accordion A vertical list of questions that expand one at a time into an answer panel, with a chevron that rotates to match the open state. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: defaultOpenIndex, allowMultipleOpen, accentColor, animationMs ### Stacked notification drawer https://fieldbook.lizardi.mx/components/stacked-notification-drawer A compact stack of notification cards that hides behind its top card until hovered, then fans out into a fully readable list before collapsing back. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cardCount, accentColor, expandOnHover, stiffness ### Stacked notification tray https://fieldbook.lizardi.mx/components/stacked-notification-tray A phone-style pile of notification cards that fans out into a readable list when tapped and collapses back into a single deck. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, accent, startExpanded, collapsedOffset, stagger ### Stacked plate press button https://fieldbook.lizardi.mx/components/stacked-plate-press-button A chunky rounded button built from three nested plates that telescope apart on press and snap back on release. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, pressScale, plateLift, radius, showGlyph ### Stacked ripple button https://fieldbook.lizardi.mx/components/stacked-ripple-button An outlined button that keeps every ripple alive at once, so quick repeated taps overlap into layered rings. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, rippleColor, spread, rippleSeconds, maxRipples ### Stacked segment bar chart https://fieldbook.lizardi.mx/components/stacked-segment-bar-chart A bar chart where two series stack into one column per month, the bottom segment in one accent and the top segment in another, with a small legend explaining the split. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: baseColor, topColor, barRadius, columnGap, animate ### Stacked shadow outline button https://fieldbook.lizardi.mx/components/stacked-shadow-outline-button A monospaced outline button resting on a ladder of stacked shadows that compresses and settles as the accent floods its face, then springs back one layer at a time. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, shadowLayers, settleDepth ### Stacked shadow text https://fieldbook.lizardi.mx/components/stacked-shadow-text Bold italic display text sits in front of several staggered drop shadows in different colors, giving it a layered, extruded look that flattens to a clean line on hover. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, shadowColor, depth ### Stacked shell sign in https://fieldbook.lizardi.mx/components/stacked-shell-sign-in A sign in button built from three nested rounded shells, so the label sits in a small raised well that settles flat when you press it. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, height, lift, showMark ### Stacked swap cart button https://fieldbook.lizardi.mx/components/stacked-swap-cart-button Two full width buttons stacked inside a one button window, so pointing at the window slides the pair up and trades the browse action for the buy action. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: topLabel, bottomLabel, accent, secondary, duration ### Staged expand delete button https://fieldbook.lizardi.mx/components/staged-expand-delete-button A square bin icon tile that widens after a short hover delay, fades its label in, and asks for a confirming second click before it fires. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, confirmLabel, accent, expandedWidth, delay, open ### Stagger bar row https://fieldbook.lizardi.mx/components/stagger-bar-row A row of bars that rise into place one after another, with the wave starting from either end or from the middle outward. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, count, stagger, origin, distance ### Staggered Fade List https://fieldbook.lizardi.mx/components/staggered-fade-list Rows that fade up from a chosen starting opacity one after another as the group enters view, with the gap between them adjustable. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: startOpacity, endOpacity, stagger, delay, accent ### Staggered Offer Drawer https://fieldbook.lizardi.mx/components/staggered-offer-drawer A bottom drawer promoting a limited offer, where the heading, price and buttons spring in one after another instead of all appearing at once. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: title, price, discountedPrice, accent ### Staggered Reveal Text https://fieldbook.lizardi.mx/components/staggered-reveal-text A sentence appears in staggered pieces, split into words, characters, or lines, using a chosen entrance style such as fade, blur, slide, or scale. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, splitBy, style, durationSeconds, replayOnRescroll ### Staggered text entrance https://fieldbook.lizardi.mx/components/staggered-text-entrance A headline enters using one of several selectable entrance styles, split into words, characters, or lines and staggered so pieces settle in sequence rather than all at once. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, splitBy, style, staggerMs ### Stair step shadow button https://fieldbook.lizardi.mx/components/stair-step-shadow-button A pale button that hands its accent border to the opposite two sides on hover while a staircase of hard, graded shadows steps out behind it and a tinted fill rises to meet the label. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, steps, stepSize, radius ### Stamped cursor trail https://fieldbook.lizardi.mx/components/stamped-cursor-trail Small cards stamped along the pointer path at fixed distance intervals, each dropping in with a tilt and aging out behind the cursor. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: trailLength, spacing, accent, tilt, fadeSeconds ### Star count button https://fieldbook.lizardi.mx/components/star-count-button A repository star button whose total rolls up column by column into view and throws a short burst of tiny stars when pressed. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, count, rollDuration, skin, burst ### Starfield glow button https://fieldbook.lizardi.mx/components/starfield-glow-button A dark pill that wakes on hover or focus with a twinkling star field, a corner glow wash, and a cool-toned press state. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, starCount, glowStrength, shootingStars ### Starred repos disclosure https://fieldbook.lizardi.mx/components/starred-repos-disclosure A header row with a toggle button that reveals a short hidden list of starred repositories beneath one row that always stays visible. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, defaultOpen, rowCount ### Status Alert Banner https://fieldbook.lizardi.mx/components/status-alert-banner A bordered banner that pairs an icon with a title and optional description to surface a success or error state inline. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: variant, title, description, accentColor ### Status Avatar https://fieldbook.lizardi.mx/components/status-avatar A round avatar that falls back to initials without an image and can carry a small online-status badge or stack with others. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, status, accent, showBadge ### Status cycle pill https://fieldbook.lizardi.mx/components/status-cycle-pill A pill that steps through idle, working, done, and error states on each tap, swapping its label, icon, and color with a quick pop transition. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, initialState, autoAdvance, intervalSeconds ### Stay Dates Picker https://fieldbook.lizardi.mx/components/stay-dates-picker A booking-style pair of fields, Check-in and Check-out, each opening its own dropdown calendar next to a fixed time box, for choosing a two-ended stay. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, checkInLabel, checkOutLabel, showTime ### Stay range popover picker https://fieldbook.lizardi.mx/components/stay-range-popover-picker A trigger button that shows two dates joined by a hyphen and opens a floating range calendar for picking a start and end day, for a hotel-style stay selection. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, nights ### Steady fill button https://fieldbook.lizardi.mx/components/steady-fill-button A large near-black primary button whose fill lightens two steps on hover while its geometry stays fixed, with horizontal padding that grows with available container width. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, radius, roomy ### Step area chart https://fieldbook.lizardi.mx/components/step-area-chart A single series area chart drawn as a staircase where each value is held flat across its slot and jumps vertically at the boundary. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, months, fillOpacity, stepAlign, animate ### Step goal progress bar https://fieldbook.lizardi.mx/components/step-goal-progress-bar A rounded progress bar that tracks completed steps out of a total, showing a fraction label above a smoothly animated fill. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: current, total, color ### Stepped Value Line https://fieldbook.lizardi.mx/components/stepped-value-line A single series drawn as flat runs and vertical jumps, the shape you want when a value holds steady until it changes. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, stepMode, strokeWidth, showGrid, showAxis ### Sticky zoom hero https://fieldbook.lizardi.mx/components/sticky-zoom-hero A hero panel that stays pinned while you scroll, pushing its backdrop toward you until it blurs out and hands the page to the text below. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: headline, accent, maxScale, maxBlur, textLift ### Stitched disc button https://fieldbook.lizardi.mx/components/stitched-disc-button A tilted, moulded sewing-button disc that straightens and stretches open into a labelled pill on hover or focus. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tilt, size ### Stitched rule link button https://fieldbook.lizardi.mx/components/stitched-rule-link-button A quiet uppercase text link with a chevron that nudges on a loop at rest; hover or focus holds the chevron forward, widens the tracking and wipes a stitched accent rule under the label. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, nudge, ruleStyle, cycle ### Straight Segment Area Chart https://fieldbook.lizardi.mx/components/straight-segment-area-chart A single series area chart built from straight segments between points, so the outline reads as a sharp faceted polyline instead of a curve. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, months, fillOpacity, dotSize, animate ### Straight segment line https://fieldbook.lizardi.mx/components/straight-segment-line A bare single series chart drawn as straight segments from point to point, with no markers, so every turn in the data stays exactly where it happened. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, strokeWidth, showGrid, showAxis, animateOnMount ### Streak border button https://fieldbook.lizardi.mx/components/streak-border-button A pill button with a soft point of light sliding along its top and bottom edges, the two streaks traveling in opposite directions. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, speed, thickness ### Streaming signal line https://fieldbook.lizardi.mx/components/streaming-signal-line A live line chart that scrolls through a fixed time window, easing toward each new reading with a pulsing tip and a value pill. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, windowSeconds, smoothing, volatility, showFill, paused ### Striped shadow heading https://fieldbook.lizardi.mx/components/striped-shadow-heading A bold heading with a duplicate copy offset behind it, filled with diagonal stripes that keep drifting like a long cast shadow. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, shadowColor, speed, fontSize ### Stroke drawing board https://fieldbook.lizardi.mx/components/stroke-drawing-board A grid of outlined shapes that draw themselves stroke by stroke in a staggered wave, as if a pen were working across the board. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, stagger, duration, strokeWidth, loop ### Styled native dropdown https://fieldbook.lizardi.mx/components/styled-native-dropdown A native select restyled with a custom border, focus ring and chevron while the operating system keeps providing the option menu and keyboard behavior. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: selected, accentColor, disabled, invalid ### Suffix reveal button https://fieldbook.lizardi.mx/components/suffix-reveal-button A solid action button whose label opens a gap on hover and slides a second trailing word into it, so one verb becomes a full phrase. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, suffix, width, glow ### Sun moon morph toggle https://fieldbook.lizardi.mx/components/sun-moon-morph-toggle A theme toggle where a ringed sun swings its rays away and grows while a second disc slides in to bite a crescent out of it. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: ink, startDark, tileSize, duration, showTile ### Sun Moon Switch https://fieldbook.lizardi.mx/components/sun-moon-switch A pill switch whose thumb slides between two resting positions while a sun icon and a moon icon flanking the track fade in and out to match. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: on, size, accentColor ### Survey route map https://fieldbook.lizardi.mx/components/survey-route-map A full-bleed dark survey map with hairline elevation contours, scattered survey points, and a route that traces itself between two markers. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, density, seed, showRoute, caption, pointerLift ### Swallowing Chip Button https://fieldbook.lizardi.mx/components/swallowing-chip-button A pill button with a small light chip pinned at its right edge that widens on hover until it covers the whole button. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, duration, expandOnFocus ### Layer swap button https://fieldbook.lizardi.mx/components/swap-fill-button Two rounded layers anchored to a corner trade sizes on hover, the resting fill collapsing into a seed while the seed grows to fill the button. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, restColor, duration, seedSize ### Swap timing modes https://fieldbook.lizardi.mx/components/swap-timing-modes Three badges swap the same pair of icons side by side under three different exit rules, so overlapping, sequential and out-of-flow removals can be compared at a glance. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: duration, autoPlay, interval, showLabels, accent ### Swarm trail cursor https://fieldbook.lizardi.mx/components/swarm-trail-cursor A cloud of soft blobs orbits the pointer inside a panel, leaving tapering trails and merging into one shape where they overlap. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, accent, blobSize, speed, trail, scatterOnPress ### Sweep invert button https://fieldbook.lizardi.mx/components/sweep-invert-button A deep navy button whose bright fill sweeps in from the right edge and flips the label to the dark tone with a quick squeeze. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, base, tracking, durationMs ### Sweep scope https://fieldbook.lizardi.mx/components/sweep-scope A round scope where rings pulse outward from the middle, spokes cut it into sectors and a lobe of light sweeps around the center. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: color, rings, spokes, sweepSpeed, brightness, interactive ### Sweeping band button https://fieldbook.lizardi.mx/components/sweeping-band-button A filled button holding a colour band twice its own width, which slides end to end on hover so the fill looks like it is travelling. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, sweepMs, highlight ### Sweeping progress bar https://fieldbook.lizardi.mx/components/sweeping-progress-bar An indeterminate loading bar in a pill-shaped frame, growing from nothing to full width and back to nothing in a smooth endless loop. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, widthPx, durationS ### Sweeping shine text https://fieldbook.lizardi.mx/components/sweeping-shine-text Text filled with a muted gradient and one bright diagonal band that sweeps back and forth like a glint of light, and can freeze in place while hovered. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, speed, baseColor, shineColor ### Sweeping status text https://fieldbook.lizardi.mx/components/sweeping-status-text A large status word that swaps on a steady beat while a bright band sweeps endlessly across the letterforms. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: interval, fontSize, sweepDuration, accent ### Swelling pill button https://fieldbook.lizardi.mx/components/swelling-gradient-pill A one-hue gradient pill that swells larger on hover while a tinted shadow spreads beneath it, and compresses briefly when pressed. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, hoverScale, shadowSpread, paddingX ### Swelling pill add button https://fieldbook.lizardi.mx/components/swelling-pill-add-button A heavy accent pill with a slowly breathing plus mark that swells about a tenth larger on a long slow ease and sinks into an inner shadow when held. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, growth, easeMs, pulse ### Swipe action row https://fieldbook.lizardi.mx/components/swipe-action-row A message-style list row that reveals colored action buttons behind it as you drag it sideways. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: name, preview, actionCount, dangerColor ### Swipe away card deck https://fieldbook.lizardi.mx/components/swipe-away-card-deck A fanned deck of photo cards you can drag or tap to send the top one to the back, one at a time. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cards, sensitivity, randomRotation, autoplay ### Swipe fill press pill https://fieldbook.lizardi.mx/components/swipe-fill-press-pill A pale capsule whose colored sheet swipes in from the left edge on hover or focus with a slight swell, then squashes hard while pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, swellScale, pressScale, duration, uppercase ### Swipe photo stack https://fieldbook.lizardi.mx/components/swipe-photo-stack A pile of photo cards where the top one can be flung left or right, sending it to the back as the stack shuffles forward. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: peek, rotation, threshold, accent ### Swipe Reveal Actions https://fieldbook.lizardi.mx/components/swipe-reveal-actions A list row that reveals colored action icons behind it as it is dragged sideways, snapping open, springing shut, or auto-completing a full swipe. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: senderName, avatarColor, actionCount ### Swipeable slide deck https://fieldbook.lizardi.mx/components/swipeable-slide-deck A single-item-at-a-time slide viewer with round previous and next buttons, keyboard arrow support and snap-aligned swipe scrolling. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: slideCount, loop, accentColor, showCounter ### Switch Spring Lab https://fieldbook.lizardi.mx/components/switch-spring-lab A bare on off switch for tuning how bouncy its thumb spring feels and how wide the thumb stretches under a press. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: pressedWidth, springStiffness, springDamping, accentColor ### Syntax Tab Switcher https://fieldbook.lizardi.mx/components/syntax-tab-switcher A row of labeled tabs above a syntax-highlighted code panel, with a sliding highlight under the active tab and a one-click copy button. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultTab, showCopyButton ### Tag chips field https://fieldbook.lizardi.mx/components/tag-chips-field A text field that turns each entry into a small removable chip, for collecting a short list of keywords or labels. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, accent ### Tall Code Keypad https://fieldbook.lizardi.mx/components/tall-code-keypad A borderless verification form built on unusually tall code boxes, with digits that land with a short bounce and a held backspace that clears everything. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, length, cellHeight, holdToClear, heading ### Tapered Funnel Stages https://fieldbook.lizardi.mx/components/tapered-funnel-stages A conversion funnel where each stage is a smooth tapering band backed by halo layers that spread when you hover it. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, layers, gap, stagger, edges, showBands ### Task Log Loader https://fieldbook.lizardi.mx/components/task-log-loader A working indicator that pairs a nested ring spinner with a short numbered log whose lines scroll up as each step completes. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: lineInterval, visibleLines, accent, showLineNumbers ### Team size stepper https://fieldbook.lizardi.mx/components/team-size-stepper A stepper for picking a team size where each step reveals or tucks away one avatar in an overlapping stack above the count. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, label, avatarCount ### Text field https://fieldbook.lizardi.mx/components/text-field-basic A single-line text field with a soft border, an accent focus ring, a muted placeholder and a proper disabled state. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, accent, disabled ### Morphing Headline https://fieldbook.lizardi.mx/components/text-morph-cycle A headline that dissolves one phrase into the next, letting matching letters glide into their new spot while the rest blur and scale away or in. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: holdDelay, loop, accentColor, phraseSet ### Text style toggle group https://fieldbook.lizardi.mx/components/text-style-toggle-group A joined trio of style toggles for bold, italic and underline that restyle a live sample line sitting right beneath the group. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: sampleText, accent, cellSize, boldOn, italicOn ### Theme toggle button https://fieldbook.lizardi.mx/components/theme-toggle-button A labelled switch that flips between light and dark, spinning its sun mark a full turn on hover and cross fading the word beside it on every switch. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: showLabel, size, accent, spinOnHover, startDark ### Themed chart frame https://fieldbook.lizardi.mx/components/themed-chart-frame A reusable grouped bar chart frame that gives every series a consistent color, a styled floating tooltip, and a legend that dims other series on hover. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: barGap, cornerRadius, primaryColor, secondaryColor, showLegend ### Threaded post card https://fieldbook.lizardi.mx/components/threaded-post-card A social post rendered as a framed panel with a verified author, a multi-line body and one nested reply below a rule. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: handle, verified, showReply, accent ### Three layer push button https://fieldbook.lizardi.mx/components/three-layer-push-button A tactile key built from three stacked plates, a cast shadow, a dark side wall and a floating face, that springs up on hover and bottoms out instantly on press. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, liftHeight, radius, springy ### Three weight button https://fieldbook.lizardi.mx/components/three-weight-button A quiet three-weight button (filled, outlined, bare) with a near-square radius and a single fast background step on hover, no shadow anywhere. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: variant, label, accent, radius, fullWidth ### Threshold level meter https://fieldbook.lizardi.mx/components/threshold-level-meter A horizontal level gauge whose fill switches from green to amber to red as the current value crosses two thresholds, the way a storage or battery indicator would. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, value, warnAt, criticalAt ### Thumb icon switch https://fieldbook.lizardi.mx/components/thumb-icon-switch A pill switch whose sliding thumb carries its own small icon, swapping as the thumb reaches each end of the track. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: on, pressedWidth, accentColor ### Thumbnail-to-video lightbox https://fieldbook.lizardi.mx/components/thumbnail-to-video-lightbox A video thumbnail with a play button that opens a contained lightbox, the video panel arriving from a chosen direction over a blurred, dimmed backdrop. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: animationStyle, accent, thumbnailLabel ### Ticker swap button https://fieldbook.lizardi.mx/components/ticker-swap-button A pill button whose label is replaced on hover by an endless ticker of the same word running sideways across its face. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, speed, gap, radius ### Tide fill button https://fieldbook.lizardi.mx/components/tide-fill-button A button whose resting accent bar rises to flood the whole plate on hover, with the bar thickness, the rise speed and the label delay all exposed as knobs. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, barHeight, riseMs, labelDelayMs, accent, hoverScale ### Tile reveal swap https://fieldbook.lizardi.mx/components/tile-reveal-swap Two panels trade places tile by tile, each tile spinning and scaling as it flips, in an order steered from the center, the edges or a spiral. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tileSize, pattern, duration, spin, trigger, accent ### Tilt card https://fieldbook.lizardi.mx/components/tilt-card A content card that rotates in 3D toward the pointer with a moving glare, lifts while engaged, and springs back to level when the pointer leaves. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: maxTilt, glare, lift ### Tilt-in content frame https://fieldbook.lizardi.mx/components/tilt-in-content-frame An informational panel that tilts in from an edge, dismisses freely on outside click or Escape, and grows smoothly as a second section of content is revealed. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: from, accent, showMore, title ### Tilt Parallax Tile https://fieldbook.lizardi.mx/components/tilt-parallax-tile A tile that tilts in 3D toward the pointer on springs, lifts an overlay layer above its face, and trails a small caption that leans with cursor speed. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tilt, hoverScale, caption, showCaption, accent ### Tilt pop button https://fieldbook.lizardi.mx/components/tilt-pop-button A small solid button that pops larger and cocks a couple of degrees to one side on hover, then flattens back into the surface when pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, scale, rotation, radius ### Tilt Spotlight Grid https://fieldbook.lizardi.mx/components/tilt-spotlight-feature-grid A capability grid where the hovered card tilts toward the pointer and lights up while every other card dims and shrinks back. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: columns, accent, tiltMax, dimOthers, heading ### Tilted deck button https://fieldbook.lizardi.mx/components/tilted-deck-button A button laid back in perspective like a key on a sloped deck, tipping further away and sliding down as it is hovered and pressed. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, tilt, shadow ### Tilted perspective button https://fieldbook.lizardi.mx/components/tilted-perspective-button A rounded call-to-action that sits in permanent 3D perspective and rocks toward the pointer as it crosses the plate. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tilt, lift, track ### Tilted plinth call to action https://fieldbook.lizardi.mx/components/tilted-plinth-cta-button A chunky call to action resting on a solid colored plinth, tilted slightly in space, that lifts off its base on hover and sinks under a press. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, tilt, depth, showArrow ### Tilted Stack CTA https://fieldbook.lizardi.mx/components/tilted-stacked-cta A chunky call to action that rests rotated over a stack of hard offset shadows, then stands upright under the pointer. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tilt, depth, radius ### Tilted tile parallax https://fieldbook.lizardi.mx/components/tilted-tile-parallax Rows of labelled tiles on a tilted oversized grid slide in opposite directions as the pointer crosses, each row arriving on its own delay. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, rows, tilt, travel, inertia, idleSway ### Tilting Backer Tile https://fieldbook.lizardi.mx/components/tilting-backer-tile-button A square translucent tile with a solid colored plate sitting exactly behind it that tilts out from under the face on hover. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, size, tilt, duration ### Tilting cube field https://fieldbook.lizardi.mx/components/tilting-cube-field A grid of hollow cubes that lean toward the pointer within a falloff radius, wander on their own when left alone, and flash outward in rings on a click. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gridSize, maxAngle, radius, rippleSpeed, autoDrift, accent ### Tilting Rocket Button https://fieldbook.lizardi.mx/components/tilting-rocket-button A dark launch button whose tilted rocket glyph swings upright and slides forward while the label follows behind. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, restTilt, duration ### Tilting send button https://fieldbook.lizardi.mx/components/tilting-send-button A pale send button whose glyph tips nose-up on keyboard focus and arcs off the edge when fired, then resets. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tiltAngle, flightDistance, resetDelay ### Timeline marker row https://fieldbook.lizardi.mx/components/timeline-marker-row One line of a compact activity log: a small icon paired with muted text, or a centered label between two rule lines marking a break between groups of entries. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: variant, label, accent ### Timeline scatter chart https://fieldbook.lizardi.mx/components/timeline-scatter-chart A time-series scatter plot where each reading is a small ring marker, popping in on load and dimming its neighbors when you hover near a point in time. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: pointRadius, showSecondSeries, hoverDimOpacity, primaryColor, secondaryColor ### Tinted disc swell button https://fieldbook.lizardi.mx/components/tinted-disc-swell-button A dark monospaced key with a bottom vignette; hovering swells a translucent coloured disc from its centre that tints the face without hiding it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, discOpacity, swellSeconds, pressScale ### Tinted ring radar https://fieldbook.lizardi.mx/components/tinted-ring-radar A polar chart on a softly tinted circular scale: every grid ring carries a faint wash of the accent so the backdrop deepens quietly toward the center. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, gridTint, fillOpacity, rings, showSpokes ### Tinted shadow buttons https://fieldbook.lizardi.mx/components/tinted-shadow-buttons A row of solid buttons that each cast a soft shadow in their own hue, so the color of every action bleeds onto the surface underneath it. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, count, hueSpread, shadowStrength, radius ### Tinted web radar https://fieldbook.lizardi.mx/components/tinted-web-radar A polar chart whose polygon web is filled rather than drawn, giving a faceted tinted ground that the series shape sits inside. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, gridTint, fillOpacity, rings, strokeWidth ### Toast stack https://fieldbook.lizardi.mx/components/toast-stack A corner notification stack where older toasts tuck behind the newest, pointing at it fans them into a list, and each one drains a hairline before it leaves. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: position, maxVisible, duration ### Todo strike checkbox https://fieldbook.lizardi.mx/components/todo-strike-checkbox A task checkbox that draws its checkmark and strikes a line through the task label at the same time. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: taskCount, strikeDuration, accentColor ### Toggle Reveal Panel https://fieldbook.lizardi.mx/components/toggle-reveal-panel A single content block that expands open or collapses shut when its toggle button is pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: defaultOpen, accentColor, transitionMs, width ### Tonal tint action button https://fieldbook.lizardi.mx/components/tonal-tint-action-button A quiet button using a pale tint of its accent as the fill and a deep shade of the same hue for the label and icon. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, radius, size, showIcon, tintStrength ### Tone Pill Label https://fieldbook.lizardi.mx/components/tone-pill-label A compact status chip for tagging items, available as a solid fill, a soft tint, or an outline, each colored by a status tone. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, tone, variant, withDot ### Tone Rule Alert https://fieldbook.lizardi.mx/components/tone-rule-alert An inline notice banner with an icon and a colored accent that shifts between neutral, info, success, warning, and error tones. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tone, title, description, dismissible ### Toolbar icon tooltip https://fieldbook.lizardi.mx/components/toolbar-icon-tooltip A row of icon-only toolbar buttons that pop a small arrow-pointed label near whichever one is hovered or focused. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, align, sideOffset, accent ### Tooltip tint icon row https://fieldbook.lizardi.mx/components/tooltip-tint-icon-row A row of circular icon buttons where hovering one lifts a labelled bubble above it and floods both in that item's own tint. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, gap, accent, perItemTint, lift, bounce ### Toss to bin delete https://fieldbook.lizardi.mx/components/toss-to-bin-delete-button A drawn waste bin whose lid hinges open on press while a crumpled sheet arcs up and drops into it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: ink, accent, lidAngle, tossDuration ### Tracing edge button https://fieldbook.lizardi.mx/components/tracing-edge-button A solid button where four hairlines start at opposite corners and draw the whole perimeter on hover, meeting exactly as the outline closes. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, traceMs, cornerRadius ### Tracking crosshair overlay https://fieldbook.lizardi.mx/components/tracking-crosshair-overlay Full width and full height hairlines that trail the pointer with a little lag and shiver into static whenever they cross a target. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: smoothing, thickness, showCoords, wobble, color ### Trail breadcrumbs https://fieldbook.lizardi.mx/components/trail-breadcrumbs A horizontal breadcrumb trail with separators between each step, muted ancestor links, a bold current page, and an ellipsis that collapses long paths. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: separator, maxVisible, accentColor ### Trailing arrows text button https://fieldbook.lizardi.mx/components/trailing-arrows-text-button A borderless text link that widens its letter spacing on hover while a trail of arrows fans out to the right, each one further and fainter than the last. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, arrowCount, spread, stagger ### Trailing cursor https://fieldbook.lizardi.mx/components/trailing-cursor-arrow A drawn cursor that chases the real pointer on a spring, trailing a soft glow and fading afterimages while it turns to face the direction it is travelling. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: stiffness, damping, size, accent, rotate ### Trailing echo text https://fieldbook.lizardi.mx/components/trailing-echo-text A headline with a stack of blurred, translucent copies that lag behind its pointer-driven lean, stretching into an echo trail and fading back to the front line when idle. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, echoes, offset, tint ### Transfer status card https://fieldbook.lizardi.mx/components/transfer-status-card A money-transfer card that plays through a processing state into a completed state, with a spinning icon settling into a checkmark and the two account rows merging together. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: amount, exchangeRate, accent, autoplay ### Translucent wash button https://fieldbook.lizardi.mx/components/translucent-wash-button A deep capsule lit from the middle out by a translucent white disc that scales past its edges on hover or focus, tinting the face brighter instead of covering it, then drains the light back inward. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, washOpacity, washScale, duration, radius ### Traveling border pill https://fieldbook.lizardi.mx/components/traveling-border-pill A small pill button whose hairline border carries one bright accent segment endlessly around the outline while the label text picks up the same travelling sheen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, lapMs, segment, showDivider ### Traveling edge glow card https://fieldbook.lizardi.mx/components/traveling-edge-glow-card A dark card ringed by a two-tone gradient border that slides endlessly, doubled by a blurred echo that lights the surface behind it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: borderSize, radius, speed, colorStart, colorEnd ### Traveling glow rim button https://fieldbook.lizardi.mx/components/traveling-glow-rim-button A dark slab button that stays flat until pointed at, when a bright band of accent light appears to travel endlessly around its edge. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, blur, speed, alwaysOn ### Traveling Toolbar Tooltip https://fieldbook.lizardi.mx/components/traveling-toolbar-tooltip A single floating tooltip that glides smoothly from one toolbar icon to the next as hover or focus moves between them, instead of disappearing and reappearing each time. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: openDelay, closeDelay, accentColor ### Traveling underglow pill https://fieldbook.lizardi.mx/components/traveling-underglow-pill A capsule whose two tone color band travels sideways on hover while a blurred copy behind it lights the surface underneath. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, secondary, cycleSeconds, glowBlur, width ### Travelling knob follow button https://fieldbook.lizardi.mx/components/travelling-knob-follow-button An outlined pill whose round knob rolls to the far end on hover, painting an accent track behind it and sliding a follower count into view; clicking keeps the followed state and bumps the count. Frameworks: react Access: open Public prop names: label, count, accent, travelMs, followed ### Tri-state checkbox https://fieldbook.lizardi.mx/components/tri-state-checkbox A checkbox with unchecked, checked and indeterminate states that fills solid in the accent color and swaps a check mark for a dash. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: state, accentColor, size, disabled ### True hover swatch https://fieldbook.lizardi.mx/components/true-hover-swatch A color swatch that grows only for a genuine pointer hover, ignoring the fake hover a touch tap fires so it never gets stuck enlarged. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: hoverScale, duration, accent, radius, showState ### Tube screen plasma https://fieldbook.lizardi.mx/components/tube-screen-plasma A bulging glass screen showing slow plasma blobs, complete with scanlines, chunky pixels, a color fringe and a soft glow off the phosphors. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, curvature, scanlineStrength, pixelSize, channelShift, speed ### Tunnel Warp Panel https://fieldbook.lizardi.mx/components/tunnel-warp-panel Content sits at the mouth of a four walled grid tunnel while narrow beams race down each wall toward the viewer. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: perspective, beamsPerSide, beamSize, beamDuration, accentColor, gridOpacity ### Turbulence Decay Card https://fieldbook.lizardi.mx/components/turbulence-decay-card An artwork panel that smears into noise while the pointer moves fast and re-forms when it slows, drifting and tilting toward the cursor as it goes. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: grain, octaves, maxSmear, driftBound, accent ### Twin Bubble Rise https://fieldbook.lizardi.mx/components/twin-bubble-rise-button Two oversized ellipses rise from below a thin outlined button on hover or focus, a faint one leading and the accent one following, so the fill arrives as a rolling curve. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, riseSeconds, bubbleScale, radius ### Twin ring chart https://fieldbook.lizardi.mx/components/twin-ring-chart Two concentric rings, an inner disc and a separated outer band, that compare the same five categories across two time periods at a glance. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, hueRange, innerRadius, ringGap, outerBand ### Twin Sweep Tile https://fieldbook.lizardi.mx/components/twin-sweep-tile-button A square outlined tile that tilts as it lifts, runs two slanted light bands across itself in opposite directions and trades its glyph for a caption. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, caption, tilt, sweep ### Twinkle highlight text https://fieldbook.lizardi.mx/components/twinkle-highlight-text Bold highlighted text with small four-pointed sparkle stars that continuously pop in and out at random positions around and over the letters. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, sparkleCount, colorOne, colorTwo ### Two bar close tile https://fieldbook.lizardi.mx/components/two-bar-close-tile A two-line menu tile that closes in two beats: the bars slide together onto one line, then scissor apart into a cross. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: ink, accent, tileSize, gap, beat ### Two face flip button https://fieldbook.lizardi.mx/components/two-face-flip-button A button with two stacked faces that rotate past each other in 3D on hover, the front tipping away toward a chosen edge while the back swings in to take its place. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: frontLabel, backLabel, from, accent, tapScale ### Two-Mode Resize Tabs https://fieldbook.lizardi.mx/components/two-mode-resize-tabs A tab bar with a morphing pill highlight whose content frame can either grow to fit each panel's natural height or resize as one animated box, chosen by a mode switch. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: resizeMode, tabOneLabel, tabTwoLabel, accent ### Two-Month Range Picker https://fieldbook.lizardi.mx/components/two-month-range-picker A date range picker that shows two consecutive months at once, so a range spanning a month boundary stays fully visible while it is being chosen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, startMonth, startYear, gap ### Two series area legend https://fieldbook.lizardi.mx/components/two-series-area-legend A stacked two series area chart with a legend beneath the plot that shows each series total and can isolate one series at a time. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, secondColor, fillOpacity, showTotals, animate ### Two Tone Frame Pill https://fieldbook.lizardi.mx/components/two-tone-frame-pill A pale capsule sits inside a thick rounded frame split into two flat colour bands, and a solid glyph swells on hover. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, topBand, bottomBand, frameWidth, splitPoint ### Typed confirm dialog https://fieldbook.lizardi.mx/components/typed-confirm-dialog A destructive-action dialog whose confirm button only unlocks once someone types an exact matching phrase, guarding against accidental clicks. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: confirmPhrase, accentColor, dangerLabel ### Typewriter caption https://fieldbook.lizardi.mx/components/typewriter-caption A caption types itself out one character at a time at a steady pace, with a solid block cursor that keeps blinking after the line is complete. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, typeSpeedMs, cursorColor ### Typewriter code block https://fieldbook.lizardi.mx/components/typewriter-code-block A syntax-colored code panel that reveals a short snippet one character at a time like it is being typed live. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: speed, startDelay, loop, accent ### Typewriter code panel https://fieldbook.lizardi.mx/components/typewriter-code-panel A code editor panel that types out a snippet character by character behind a blinking caret, with a filename header and a copy button. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: typingSpeed, startDelay, showCursor, accentColor ### Typewriter reveal button https://fieldbook.lizardi.mx/components/typewriter-reveal-button A solid monospace button that drains to an outline and retypes its own label from zero width behind a blinking caret whenever it is hovered or focused. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, typeMs, glow, caret ### Typewriter sentence cycle https://fieldbook.lizardi.mx/components/typewriter-sentence-cycle A blinking-cursor typewriter types out one sentence at a time, pauses, deletes it, and moves on to the next in an endless cycle. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: sentenceOne, typingSpeed, pauseDuration, loop, cursorColor ### Typing cursor text https://fieldbook.lizardi.mx/components/typing-cursor-text A sentence types out one character at a time behind a blinking cursor, pauses, then erases backward and types the next line in an endless loop. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: duration, holdDelay, loop, showCursor ### Underglow border button https://fieldbook.lizardi.mx/components/underglow-border-button A button whose two pixel border is a tinted band traveling sideways on an endless loop, with a matching blurred glow underneath that moves in step with it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, variant, speed, glow ### Underglow glitch button https://fieldbook.lizardi.mx/components/underglow-glitch-button A dark inset slab with a glowing word that tears a hidden glyph into view and lifts a bar of light from beneath its lower edge. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, glow, glitch, radius ### Underline flood button https://fieldbook.lizardi.mx/components/underline-flood-button A button with a hairline accent band on its bottom edge that widens and then climbs into a full flood on hover or focus, the label switching colour only once the fill has landed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, intent, size, accent, fillMs ### Underline hint tooltip https://fieldbook.lizardi.mx/components/underline-hint-tooltip A dotted-underline word that reveals a short hint bubble above or below it on hover or keyboard focus, driven entirely by CSS. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, tip, position, accent ### Underline sweep link https://fieldbook.lizardi.mx/components/underline-sweep-link A bare text button whose rule grows from the left on hover and retreats to the right on exit, with a long arrow that stretches forward. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, travel, ruleWidth ### Underline tabs https://fieldbook.lizardi.mx/components/underline-tabs A row of section tabs with a colored bar that slides and resizes beneath the active label instead of a filled background. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultTab, underlineThickness ### Underline Wipe Link https://fieldbook.lizardi.mx/components/underline-wipe-link-button An uppercase text link whose rule wipes in from the left on hover and retracts to the right on leave, with a long arrow that slides home. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, tracking, duration, showArrow ### Unfurling chevron ring button https://fieldbook.lizardi.mx/components/unfurling-chevron-ring-button A tinted outline button that grows a translucent ring, scales its label up and unrolls a chevron on hover, snapping the ring solid while pressed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, ringWidth, tintOpacity, showChevron ### Unrolling message pill https://fieldbook.lizardi.mx/components/unrolling-message-pill A filled pill whose short prompt is replaced by a longer message that unrolls from the left edge as the fill drains away behind it. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, idleLabel, revealLabel, revealMs, radius ### Upload Progress Line https://fieldbook.lizardi.mx/components/upload-progress-line A slim, animated progress bar that counts a task like a file upload from zero to complete, with a percentage readout and a settle animation at the finish. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, value, autoPlay, color ### Uppercase action button https://fieldbook.lizardi.mx/components/uppercase-action-button A compact filled action button with an uppercase tracked label, square corners and quiet fill-only hover and pressed states for toolbars and panel headers. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, tracking, uppercase, disabled ### Usage pricing https://fieldbook.lizardi.mx/components/usage-pricing A pricing section where a volume slider drives a counting monthly bill, with the included allowance, the overage rate and one call to action. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: currency, basePrice, accent ### Validated Signup Form https://fieldbook.lizardi.mx/components/validated-signup-form A small form runtime that tracks values, validates on blur and submit, wires errors to their inputs, and shows a submitting then submitted state. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, validateOn, showCounter, submitDelay, submitLabel ### Value labeled line https://fieldbook.lizardi.mx/components/value-labeled-line A monthly line chart that prints every value above its own point, so the numbers can be read without hovering anything. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, showValues, labelOffset, strokeWidth, showGrid ### Value tagged bar chart https://fieldbook.lizardi.mx/components/value-tagged-bar-chart A vertical bar chart where each bar carries its own number floating just above its tip, so the plot reads correctly without checking an axis. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, barRadius, barGap, showGrid, animate ### Vector Flow Field https://fieldbook.lizardi.mx/components/vector-flow-field A full-bleed canvas background where thousands of tiny glowing points drift along a slowly evolving current, leaving soft fading trails behind them. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: density, speed, accentColor, trailFade ### Velocity comet trail https://fieldbook.lizardi.mx/components/velocity-comet-trail A chain of dots that each chase the one ahead with inertia, stretching into a comet on fast flicks and coiling back into a cluster at rest. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: dotCount, accent, inertia, stretch, headSize ### Velocity marquee https://fieldbook.lizardi.mx/components/velocity-marquee Two rows of repeating text that drift in opposite directions and speed up or reverse with the page scroll, then coast back to their base pace. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, baseSpeed, reactive, fadeEdges, accent ### Velocity marquee text https://fieldbook.lizardi.mx/components/velocity-marquee-text Rows of repeating uppercase text drift sideways at a steady pace, and page scrolling speeds them up or briefly reverses a row before everything eases back to base speed. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, baseSpeed, rows ### Velocity wave carousel https://fieldbook.lizardi.mx/components/velocity-wave-carousel A wide row of image tiles that drifts sideways with page scroll and ripples into a vertical wave that grows steeper the faster the visitor scrolls. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: waveIntensity, tileCount, accentColor ### Verification Code Card https://fieldbook.lizardi.mx/components/verification-code-card A boxed verification step with a labelled code field, a Verify button that unlocks only when the code is complete, and a resend link on a countdown. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: length, accentColor, resendSeconds, autoSubmit, title ### Vertex Dot Radar https://fieldbook.lizardi.mx/components/vertex-dot-radar-chart A single series polar chart that pins a solid dot on every axis corner so each measured value reads as a point rather than only as a silhouette. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, dotRadius, fillOpacity, rings, showLabels ### Vertical brightness slider https://fieldbook.lizardi.mx/components/vertical-brightness-slider A tall pill slider that fills with light from the bottom as you drag, resists past either end and springs back on release. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: value, accentColor, icon ### Vertical choice dial https://fieldbook.lizardi.mx/components/vertical-choice-dial A tall column of labels that spins under drag with momentum and snaps the option nearest the center into place as the active choice. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: activeColor, textColor, spacing, loop ### Vertical rail tabs https://fieldbook.lizardi.mx/components/vertical-rail-tabs A vertical column of section tabs down the left edge with content displayed to the right, where a highlight block slides up and down the rail to track the active section. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, railWidth, defaultSection ### Vertical word swap https://fieldbook.lizardi.mx/components/vertical-word-swap A sentence with one word held in a fixed-size window that slides up and out on a timer while the next word in the list rises in to take its place. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: prefix, words, intervalSeconds, accent ### Video Fill Text https://fieldbook.lizardi.mx/components/video-fill-text Big letters act as a window: their interior shows continuously moving footage-like motion instead of a flat color, clipped exactly to the letterforms. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, fontSize, speedSeconds ### Video fill text mask https://fieldbook.lizardi.mx/components/video-fill-text-mask Enormous letters act as a window onto a generated looping backdrop, so moving color is visible only inside the shape of the word. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, motif, fontWeight ### View mode toggle switch https://fieldbook.lizardi.mx/components/view-mode-toggle-switch A two-state switch that flips a view between two named modes, with a sliding thumb that shrinks under a press and swaps a small icon inside it. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: checked, onLabel, offLabel, accent ### Visitor Map Card https://fieldbook.lizardi.mx/components/visitor-map-stat-card A wide traffic card built on a coarse tile map of the world, where each region is tinted by its share and hovering swaps the headline to that region. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, cellSize, total, trend, title ### Voice Capture Button https://fieldbook.lizardi.mx/components/voice-capture-button A press to record control with a running timer and a bar meter that jumps to life while listening and flattens the moment it stops. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: barCount, accent, autoDemo, idleCaption, activeCaption ### Warm band action button https://fieldbook.lizardi.mx/components/warm-band-action-button A large rounded call to action carrying a warm color band that slides under the label on hover, with a bolt glyph in front. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, showIcon, radius, scale ### Warp lane streaks https://fieldbook.lizardi.mx/components/warp-lane-streaks A night road seen from the driver's seat, where two streams of light streaks rush toward and away from a vanishing point and holding the pointer down accelerates everything. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: approachColor, recedeColor, speed, streakCount, curve, boostOnHold ### Warped line flow https://fieldbook.lizardi.mx/components/warped-line-flow A frame packed with diagonal hairlines is pushed by a moving warp field, so the lines bunch into bright ridges and splay into black troughs. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: colorA, colorB, lineCount, speed, warp, rotation ### Warped tile tunnel https://fieldbook.lizardi.mx/components/warped-tile-tunnel A dark backdrop tiled with glowing squares that bulge through a lens, with rings of brightness pushing outward from the center forever. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, density, speed, waveDepth, zoom, grain ### Wash swap pill https://fieldbook.lizardi.mx/components/wash-swap-pill A tall black pill whose fill dissolves on hover to reveal a soft tinted wash underneath while the label flips from light to dark. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, height, duration, angle ### Wavy letter heading https://fieldbook.lizardi.mx/components/wavy-letter-heading A heading whose letters ride a slow wave, each one lagging the last so the line ripples like a flag without losing its baseline. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, waveWord, amplitude, cycleSeconds, letterDelay, accent ### Wedge Pop Pie https://fieldbook.lizardi.mx/components/wedge-pop-pie A pie or donut whose wedges sweep open in turn and push outward under the pointer, with the centre swapping to the hovered slice. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, slices, innerRadius, padAngle, cornerRadius, hoverOffset ### Weekday-Only Range Picker https://fieldbook.lizardi.mx/components/weekday-only-range-picker A two-month range picker that strikes out every Saturday and Sunday, so a chosen range can only start, end, and run across weekdays. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, startMonth, startYear ### Wheel hint scroll button https://fieldbook.lizardi.mx/components/wheel-hint-scroll-button A small mouse outline with a bobbing wheel bar that scrolls the next screenful into view on click and fades out when nothing is left to scroll. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, showLabel, height, cycle ### Winged crest button https://fieldbook.lizardi.mx/components/winged-crest-button A button clipped to a wide winged crest silhouette that fills from the centre outward on hover while the label inverts and a broad glow blooms beneath it. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, width, fillMs, bloom ### Wipe fill button https://fieldbook.lizardi.mx/components/wipe-fill-button A pill button whose coin sized disc grows to cover the whole shape on hover, wiping the accent fill out from under a label that never moves. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, wipeMs, direction, borderWidth ### Left Wipe Button https://fieldbook.lizardi.mx/components/wipe-fill-button-2 A solid button on a hard ledge whose brighter tint wipes in from the left edge over a slow, deliberate sweep on hover. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, wipeMs, ledge ### Left wipe button https://fieldbook.lizardi.mx/components/wipe-fill-button-3 A button standing on a hard ledge whose brighter tint sweeps in from the left edge on hover, like a gauge filling. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, wipeMs, ledge ### Wiping multi series line https://fieldbook.lizardi.mx/components/wiping-multi-series-line A multi series line chart that wipes in on first paint, glides to a new range as the data changes, and shows a snapping crosshair readout across every series. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, secondary, points, curved, showFill, showCrosshair ### Wire Curtain https://fieldbook.lizardi.mx/components/wire-curtain-drift A curtain of closely spaced vertical wires that folds like cloth in a slow draft and tears open along the path of the pointer. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, spacing, amplitude, speed, pointerForce ### Word morph blend https://fieldbook.lizardi.mx/components/word-morph-blend One large word dissolves through a heavy blur and re-solidifies into the next word in a short rotating list, the two never crossfading cleanly but visibly melting into each other. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: words, holdSeconds, morphSeconds, accent ### Word Crossfade Blend https://fieldbook.lizardi.mx/components/word-morph-blend-2 One word smoothly dissolves and reshapes into the next, cycling through a short list, using a soft blur-and-blend crossfade rather than a hard cut. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: words, morphSeconds, holdSeconds ### Word swap loop https://fieldbook.lizardi.mx/components/word-swap-loop A sentence with one word slot that cycles through a list on a timer, each word sliding up and out as the next one rises into its place. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: words, interval, travel, accent, paused ### Word Swap Rotator https://fieldbook.lizardi.mx/components/word-swap-rotator One word in a line is swapped for the next in a short list every few seconds, sliding the old word up and out while the new one slides up and in. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: words, intervalSeconds, accent ### Word tumble button https://fieldbook.lizardi.mx/components/word-tumble-button Hovering rolls the uppercase label over itself inside a clipped slot while a diagonal accent fill sweeps the panel behind it and a difference blend flips the word color. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, rollDuration, travel, fillDuration ### Woven silk drape https://fieldbook.lizardi.mx/components/woven-silk-drape A satin sheet with soft diagonal folds that slide slowly across it, finished with a fine grain so it never looks like plastic. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, speed, scale, grain, rotation ### Zoned cursor tag https://fieldbook.lizardi.mx/components/zoned-cursor-tag A custom pointer whose trailing tag rewrites itself and flips to the other side as it crosses between the zones of a split panel. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: zoneOne, zoneTwo, zoneThree, accent, trailDistance, stiffness ## ES - https://fieldbook.lizardi.mx/es - https://fieldbook.lizardi.mx/es/components - https://fieldbook.lizardi.mx/es/blog ### Account Dropdown Menu https://fieldbook.lizardi.mx/es/components/account-dropdown-menu Un disparador de avatar que abre un menú de cuenta agrupado con sugerencias de atajos de teclado, un submenú temático y una fila de cierre de sesión destructiva con un estilo aparte del resto. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, showShortcuts, theme ### Account Menu Flyout https://fieldbook.lizardi.mx/es/components/account-menu-flyout Un botón de resumen de perfil que se abre en un menú de cuenta de filas etiquetadas, con una pequeña línea indicadora curva que se endereza cuando el menú está abierto. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: name, plan, align, accent ### Account signup https://fieldbook.lizardi.mx/es/components/account-signup-page Una página de registro centrada con un campo de correo electrónico, un botón principal para crear una cuenta, un divisor y dos botones secundarios para continuar con proveedores de identidad alternativos. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: brandName, accentColor, showProviders, providerCount ### Activity cell heatmap https://fieldbook.lizardi.mx/es/components/activity-cell-heatmap Una cuadrícula de calendario de pequeños cuadrados teñidos que se desplaza en una onda diagonal y permite que una franja de nivel aísle una intensidad a la vez. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, weeks, gap, cornerRadius, weekStart, interactive ### Add Then Confirm Chip https://fieldbook.lizardi.mx/es/components/add-then-confirm-chip Un chip oscuro con una etiqueta cálida cuyo signo más se balancea de lado a lado al pasar el mouse, luego gira hasta convertirse en una marca e informa el elemento agregado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, addedLabel, accent, rockDegrees, added ### Addon Input Group https://fieldbook.lizardi.mx/es/components/addon-input-group Un campo de texto envuelto en un caparazón con borde que puede contener un ícono inicial, un botón final o texto, y comparte un anillo de enfoque en todo el grupo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, trailingLabel, accentColor, showLeadingIcon ### Adjacent hover menubar https://fieldbook.lizardi.mx/es/components/adjacent-hover-menubar Una barra de menú estilo escritorio donde se abre al hacer clic en un menú y, una vez abierto, al pasar el cursor sobre cualquier menú adyacente se cambia directamente a ese sin hacer un clic adicional. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: menuLabels, accent ### Amber upload pill https://fieldbook.lizardi.mx/es/components/amber-upload-pill Una cálida pastilla de carga en degradado con un borde brillante que amplía su tono de color e ilumina la etiqueta desde atrás al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, castSpread, showGlyph, size ### Anaglyph wobble button https://fieldbook.lizardi.mx/es/components/anaglyph-wobble-button Un botón que cuelga en un lento movimiento 3D y, cuando se mantiene suspendido o enfocado, arroja duplicados cálidos y fríos de sí mismo fuera de registro con una oscilación excesiva. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, coolColor, swingAngle, offsetDistance, autoSwing ### Analytics console page https://fieldbook.lizardi.mx/es/components/analytics-console-page Una consola de análisis completa: barra de navegación plegable, cuatro tarjetas métricas, un gráfico de áreas apiladas con un interruptor de rango y una tabla de elementos de trabajo que se puede ordenar y reordenar mediante arrastre. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, railOpen, range, rows, showTable ### Anchored detail popover https://fieldbook.lizardi.mx/es/components/anchored-detail-popover Un botón disparador que abre un pequeño panel anclado que contiene un formulario de configuración titulado, que crece desde el borde del disparador y se cierra con Escape o un clic externo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, align, offset, width, accent ### Anchored info popover https://fieldbook.lizardi.mx/es/components/anchored-info-popover Un botón disparador que abre un pequeño panel de información flotante anclado a uno de sus bordes, desvaneciéndose y escalando desde ese borde y descartándose con un clic externo o Escape. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: anchorSide, accentColor, showBackdrop, gap ### Anchored popover card https://fieldbook.lizardi.mx/es/components/anchored-popover-card Un botón disparador que abre una pequeña tarjeta de configuración anclada a sí misma, que se amplía desde el borde del que crece y se cierra con un segundo clic, Escape o una pulsación exterior. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: anchor, gap, accent, triggerLabel ### Anchored settings popover https://fieldbook.lizardi.mx/es/components/anchored-settings-popover Un botón que abre un pequeño panel de configuración anclado a su lado, que crece desde la esquina más cercana a su gatillo y voltea los lados cuando se acaba el espacio. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, align, offset, accentColor, modal ### Anchored site preview https://fieldbook.lizardi.mx/es/components/anchored-site-preview Una vista previa al pasar el mouse cuyo lado, alineación y desplazamiento se pueden marcar, con una flecha apuntando que sigue el ancla y gira con ella cuando no hay espacio. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, align, offset, showArrow, accent ### Android device frame https://fieldbook.lizardi.mx/es/components/android-device-frame Un bisel vectorial de teléfono Android que enmarca una foto o un vídeo en bucle dentro de su pantalla con esquinas correctamente redondeadas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: bezelTone, screenContent, accentColor ### Animated metric counter https://fieldbook.lizardi.mx/es/components/animated-metric-counter Un gran número simple que surge desde un valor inicial hasta su objetivo en el momento en que aparece a la vista, sobrepasándose ligeramente antes de estabilizarse, con separadores de miles y un sufijo opcional. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: target, startValue, decimals, suffix, accent ### Animated Time Axis https://fieldbook.lizardi.mx/es/components/animated-time-axis Una fila de etiquetas de fecha debajo de un gráfico de líneas que selecciona automáticamente un subconjunto espaciado uniformemente para evitar aglomeraciones y desvanece las etiquetas cerca del punto sobre el que se sitúa el cursor. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: numTicks, fadeNearCursor, accent ### Animated Value Axis https://fieldbook.lizardi.mx/es/components/animated-value-axis Una columna de etiquetas de valores al lado de un gráfico que abrevia números grandes y se desliza suavemente a nuevas posiciones cada vez que cambia el rango de datos del gráfico. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: numTicks, formatLargeNumbers, highlightColor ### Annotated anatomy button https://fieldbook.lizardi.mx/es/components/annotated-anatomy-button Un botón que se explica por sí mismo: al pasar el mouse, aparecen marcas de medición y líneas guía que nombran su relleno, relleno, radio de esquina y ranura de icono. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, fill, paddingX, radius, pinned ### Answer call circle https://fieldbook.lizardi.mx/es/components/answer-call-circle-button Un botón de aceptación redondo con solo un ícono y un glifo de teléfono, un timbre lento mientras espera una llamada y una pulsación suave. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, ringing, ringSpeed ### App folder expand https://fieldbook.lizardi.mx/es/components/app-folder-expand Un mosaico de carpetas estilo pantalla de inicio cuyos pequeños íconos de aplicaciones crecen hasta convertirse en un panel completo, cada ícono viaja desde su miniatura hasta su lugar grande. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: title, appCount, accent, bounce, closeOnBackdrop ### App Menubar https://fieldbook.lizardi.mx/es/components/app-menubar Una barra de menú horizontal estilo escritorio donde al hacer clic en una etiqueta de nivel superior se abre su menú desplegable y, una vez que una está abierta, al pasar el cursor sobre las otras etiquetas se cambia directamente a sus menús sin un clic adicional. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, menuCount, showShortcuts ### Appointment Range Card https://fieldbook.lizardi.mx/es/components/appointment-range-card Una tarjeta que combina una cuadrícula de fecha de un solo mes con un campo de hora de inicio y hora de finalización debajo, para seleccionar un día más una ventana de tiempo en un bloque compacto. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, startTime, endTime, showIcons ### Appointment Scheduler Card https://fieldbook.lizardi.mx/es/components/appointment-scheduler-card Un selector de fecha único enmarcado dentro de una tarjeta titulada con un botón para saltar a hoy en la esquina, diseñado para reservar una cita. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, title, subtitle, startMonth ### Arcade dome button https://fieldbook.lizardi.mx/es/components/arcade-dome-button Un botón redondo cuya tapa abovedada flota sobre una base más oscura y se asienta al ras con una caída visible cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, size, travel, haloWidth ### Arcade plate button https://fieldbook.lizardi.mx/es/components/arcade-plate-button Un botón de menú de juego ancho con una placa con contorno gris, un bisel oscuro insertado y letras estampadas que se iluminan al pasar el mouse y se oscurecen cuando se mantiene presionado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, plate, ink, bevel, width ### Area chart lite https://fieldbook.lizardi.mx/es/components/area-chart-lite Un gráfico de área SVG responsivo con marcas de eje redondo, un relleno degradado, una cruz que lee la muestra debajo del puntero y un borrado de dibujo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: color, curve, grid ### ARIA Tablist Resize https://fieldbook.lizardi.mx/es/components/aria-tablist-resize Una lista de pestañas de índice de pestañas móvil totalmente accesible con un resaltado de píldora deslizante, donde el marco del panel cambia suavemente de tamaño según el contenido de la pestaña que se muestra. Frameworks: react, svelte, astro, html Access: member Public prop names: resizeMode, tabOneLabel, tabTwoLabel, accent ### Arrow chip button https://fieldbook.lizardi.mx/es/components/arrow-chip-button Un botón de acción redondeado con un chip de flecha brillante acoplado en su extremo derecho que se levanta de la página al pasar el mouse con una sombra desplazada y se hunde al presionarlo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, radius, chipGlow, offset ### Arrow relay badge pill https://fieldbook.lizardi.mx/es/components/arrow-relay-badge-pill Un botón de pastilla con una insignia redonda izquierda cuya flecha sale por la esquina superior al pasar el mouse, mientras que una nueva llega desde abajo y el cuerpo se vuelve casi negro. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, hoverBody, relayMs, badgeSize ### Arrow to label pill https://fieldbook.lizardi.mx/es/components/arrow-to-label-pill Un botón redondo de chevrón que se extiende hasta convertirse en una píldora ancha etiquetada al pasar el cursor, intercambiando la marca por una palabra mientras el relleno plano se convierte en una rampa de dos paradas. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, partner, label, expandedWidth, duration ### Arrow wipe button https://fieldbook.lizardi.mx/es/components/arrow-wipe-button Un botón de pastilla cuya placa decorativa, cortada en forma de punta de flecha, se desplaza desde la izquierda al pasar el mouse e invierte la etiqueta letra por letra a medida que su punta se cruza. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, point, duration, radius ### Arrow wipe call to action https://fieldbook.lizardi.mx/es/components/arrow-wipe-cta Una llamada a la acción cuya placa más oscura aparece desde la izquierda al pasar el mouse mientras una flecha escondida se desliza hacia afuera para encontrarse con la etiqueta y empuja un píxel hacia abajo cuando se hace clic. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, wipeMs, showArrow, radius ### Ascii Art Heading https://fieldbook.lizardi.mx/es/components/ascii-art-heading Una palabra grande se representa como un mosaico de caracteres monoespaciados cuya densidad imita las formas de las letras, ondulándose e inclinándose suavemente hacia el puntero. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, characterSize, waveIntensity ### Assistant Ripple Glow https://fieldbook.lizardi.mx/es/components/assistant-ripple-glow Una onda en forma de anillo se extiende hacia afuera sobre un duplicado del propio contenido de un panel mientras su borde se ilumina mientras se ejecuta una tarea. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: running, accentColor, secondColor, rippleDuration, edgeSpeed, strength ### Aurora band glow https://fieldbook.lizardi.mx/es/components/aurora-band-glow Una suave cinta de luz que se extiende a lo largo de un marco oscuro, su borde vaga sobre el ruido en capas mientras el color camina a lo largo de su longitud. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: colorA, colorB, speed, bandHeight, brightness, interactive ### Aurora curtain https://fieldbook.lizardi.mx/es/components/aurora-curtain Una suave cortina de luz que cuelga del borde superior, su dobladillo inferior sube y baja en una lenta onda de ruido mientras su color cambia a lo ancho. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: colorStart, colorEnd, amplitude, softness, speed ### Aurora glow heading https://fieldbook.lizardi.mx/es/components/aurora-glow-heading Un título donde una palabra lleva un relleno degradado multicolor que se desplaza lentamente recortado en las formas de las letras, como la luz de una aurora que brilla detrás del tipo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, highlightWord, speed, colorA ### Aurora veil https://fieldbook.lizardi.mx/es/components/aurora-veil Un fondo sin bordes de tres cintas de luz a la deriva que se suman donde se cruzan, sobre un fondo oscuro, con una capa de leyenda que permanece legible. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: colorA, colorB, speed, intensity ### Auto Grow Textarea https://fieldbook.lizardi.mx/es/components/auto-grow-textarea Un campo de texto de varias líneas que crece a medida que la persona escribe más, en lugar de desplazarse dentro de un cuadro fijo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, accent, rows ### Auto height tabs https://fieldbook.lizardi.mx/es/components/auto-height-tabs Un grupo de pestañas cuyo contenedor de contenido cambia suavemente su altura para adaptarse a cada panel a medida que cambia de pestaña, en lugar de saltar o dejar espacios vacíos. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, defaultTab, animationSpeed ### Auto-Hide Nav Bar https://fieldbook.lizardi.mx/es/components/auto-hide-nav-bar Una barra superior adhesiva que se desliza hacia arriba fuera de la vista cuando el visitante se desplaza hacia abajo y se desliza hacia adentro tan pronto como se desplaza hacia arriba. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: hideThreshold, accentColor, transitionMs, blurBackground ### Auto-Scroll Message List https://fieldbook.lizardi.mx/es/components/auto-scroll-message-list Un panel de chat desplazable que se mantiene fijado al mensaje más reciente a menos que el lector se desplace hacia arriba, momento en el que aparece un botón flotante para saltar al último. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: height, accent ### Autosize text field https://fieldbook.lizardi.mx/es/components/autosize-text-field Una entrada de texto de varias líneas que crece a medida que la persona escribe, hasta un límite generoso, con un anillo de enfoque de acento y un estado deshabilitado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: placeholder, rows, disabled, accentColor ### Avatar Lineup Hover https://fieldbook.lizardi.mx/es/components/avatar-lineup-hover Una fila de círculos de avatar superpuestos donde, al pasar el cursor sobre uno, se eleva por encima de sus vecinos y se revela una información sobre herramientas con el nombre. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, overlap, accent, liftDistance, showTooltip ### Avatar profile picker https://fieldbook.lizardi.mx/es/components/avatar-profile-picker Una tarjeta de configuración de perfil: una etapa de avatar cuyo anillo luminoso cambia de color según la selección, una franja de miniaturas para cambiar de avatar y un campo de nombre de usuario validado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, username, minLength, avatarCount ### Avatar Stack https://fieldbook.lizardi.mx/es/components/avatar-stack-tooltip Una fila de avatares circulares superpuestos que separa y levanta el que está debajo del puntero, revelando una información sobre herramientas con el nombre encima. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: avatarSize, overlapAmount, ringColor, invertStackOrder ### Backlight Halo https://fieldbook.lizardi.mx/es/components/backlight-halo Envuelve la obra de arte en una copia borrosa y realzada de sí misma para que el panel parezca derramar su propia luz sobre la superficie detrás de él. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: blur, saturation, haloOpacity, accentColor, drift ### Banded stripe button https://fieldbook.lizardi.mx/es/components/banded-stripe-button Un botón ancho cuya cara está cortada en bandas diagonales duras que avanzan a través de los valores de un acento y deslizan una banda al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, bands, angle, slideOnHover ### Banner header dialog https://fieldbook.lizardi.mx/es/components/banner-header-dialog Una ventana modal con una franja de color en su borde superior, colocada sobre una copia atenuada y completamente inerte de la página detrás de ella. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: bannerColor, panelWidth, closeOnOverlayClick ### Bar wave matrix https://fieldbook.lizardi.mx/es/components/bar-wave-matrix Una cuadrícula de barras cortas donde cada barra se desliza a lo largo de su propia pista, y el desplazamiento de fase de una fila a otra convierte toda la cuadrícula en una onda viajera. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: colorA, colorB, columns, rows, speed, orientation ### Bare Sliding Tab Strip https://fieldbook.lizardi.mx/es/components/bare-sliding-tab-strip Una tira de pestañas sin estilo por defecto cuyos paneles se ubican uno al lado del otro en una tira de película que se desliza hacia los lados al cambiar mientras la altura del marco se adapta fácilmente. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: tabOneLabel, tabTwoLabel, accent, slideStiffness ### Before/After Code Diff https://fieldbook.lizardi.mx/es/components/before-after-code-diff Dos paneles de código uno al lado del otro, etiquetados antes y después, con líneas agregadas y eliminadas teñidas y un efecto de enfoque flotante. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, fontSize, showLineDiff, focusBlurOnHover ### Before/After reveal handle https://fieldbook.lizardi.mx/es/components/before-after-reveal-handle Un divisor que se puede arrastrar sobre dos escenas apiladas que revela una a la izquierda y la otra a la derecha, movidas por el puntero, clic para saltar y las teclas de flecha. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: position, handleColor, leftLabel, rightLabel ### Bevel Edge Panel Card https://fieldbook.lizardi.mx/es/components/bevel-edge-panel-card Una tarjeta con un bisel interior de un píxel que hace que parezca presionada en la página y un modo de marco que agrupa subpaneles apilados. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: grouped, radius, showFooter, accent ### Bevel frame button https://fieldbook.lizardi.mx/es/components/bevel-frame-button Un botón con marco cuadrado cuyos dos extremos se biselan en puntos al pasar el mouse, convirtiendo el rectángulo en una insignia de seis lados. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, tilt, thickness, duration ### Bevel press pill https://fieldbook.lizardi.mx/es/components/bevel-press-pill Una pastilla oscura biselada con un chip redondo empotrado en su extremo que se hunde en la superficie cuando se presiona. Frameworks: react Access: open Public prop names: label, accent, travel, showChip, size ### Bevel swap button https://fieldbook.lizardi.mx/es/components/bevel-swap-button Una losa pálida cuyos bordes iluminados y sombreados intercambian esquinas al pasar el mouse mientras un abanico de copias offset descoloridas aparece detrás de ella. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, stackCount, offsetStep, duration ### Billing Ledger Table https://fieldbook.lizardi.mx/es/components/billing-ledger-table Una tabla del libro mayor de facturas con un título encima y una banda de pie de página que totaliza la columna de importe. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: rowCount, showFooterTotal, accentColor, caption ### Binary Decode Text https://fieldbook.lizardi.mx/es/components/binary-decode-text Cada letra parpadea brevemente hasta convertirse en un dígito binario brillante antes de descodificarse nuevamente en su carácter real, atravesando la palabra de izquierda a derecha. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, letterInterval, letterAnimationDuration, accentColor ### Birthdate popover picker https://fieldbook.lizardi.mx/es/components/birthdate-popover-picker Un botón etiquetado que abre un calendario flotante con menús desplegables de meses y años para llegar rápidamente a un año de nacimiento, cerrándose en el momento en que se elige un día. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, placeholder ### Empty State Panel https://fieldbook.lizardi.mx/es/components/blank-slate-card Un marcador de posición centrado que se muestra en lugar de una lista vacía, con un título, una descripción y una o dos acciones iniciales. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: title, description, accentColor, showSecondaryAction ### Blinking grid pattern https://fieldbook.lizardi.mx/es/components/blinking-grid-pattern Una cuadrícula cuadrada fina donde las células dispersas se desvanecen hacia arriba y hacia abajo, cada una saltando a una celda nueva cuando termina su parpadeo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: cellSize, litCells, accent, maxOpacity, duration, dashed ### Blob cap button https://fieldbook.lizardi.mx/es/components/blob-cap-button Un botón de cápsula con una gota de líquido de un solo tono que se hincha desde una marca de esquina en reposo para llenar la forma al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, spread, blur, growth ### Blocking alert dialog https://fieldbook.lizardi.mx/es/components/blocking-alert-dialog Un diálogo centrado que exige una elección explícita antes de cerrarse, utilizado para acciones irreversibles que el visitante no debe descartar por accidente. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: question, detail, confirmLabel, accentColor ### Blur fade reveal https://fieldbook.lizardi.mx/es/components/blur-fade-reveal Contenido que llega desenfocado y transparente, luego se enfoca en su lugar la primera vez que se desplaza a la vista sin mover un solo píxel. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: blurAmount, duration, delay, threshold, startOpacity ### Blur in word reveal https://fieldbook.lizardi.mx/es/components/blur-in-word-reveal Las palabras de una oración pasan de un desenfoque suave a un enfoque nítido, una tras otra, a medida que la oración aparece a la vista. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, direction, staggerMs, blurPx ### Blur reveal https://fieldbook.lizardi.mx/es/components/blur-reveal-on-view Un contenedor que mantiene a su hijo desenfocado y ligeramente desplazado hasta que ingresa por primera vez a la ventana gráfica, luego resuelve el desenfoque y cierra la brecha en un solo movimiento. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: blur, offset, direction, stagger, accent ### Bobble tile grid https://fieldbook.lizardi.mx/es/components/bobble-tile-grid Una cuadrícula de mosaicos de colores que se alejan del puntero sobre un resorte, rebotando con más fuerza cuanto más rápido el puntero los recorre. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gridSize, accent, bounce, velocityScale, showIndex ### Booked Dates Picker https://fieldbook.lizardi.mx/es/components/booked-dates-picker Un selector de fecha única donde una serie de días ya reservados muestra un número tachado y no se puede seleccionar, lo que permite seleccionar los días abiertos con normalidad. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, bookedStart, bookedCount, startMonth ### Bookmark save chip https://fieldbook.lizardi.mx/es/components/bookmark-save-chip Un chip de guardado compacto cuya marca de marcador pasa del contorno al relleno y da un pequeño tirón hacia abajo en el momento en que se guarda un elemento. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, savedLabel, accent, saved, showLabel ### Bookmark save toggle https://fieldbook.lizardi.mx/es/components/bookmark-save-toggle Un chip de guardado compacto cuyo glifo de marcador se llena de forma sólida y mantiene un borde fino una vez que se guarda el elemento. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, savedLabel, accent, initialSaved, compact ### Border brighten button https://fieldbook.lizardi.mx/es/components/border-brighten-button Un botón oscuro cuyo marco de dos píxeles es la única parte móvil: sube a blanco al pasar el mouse y colapsa en un anillo interior apretado mientras se mantiene presionado el botón. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, borderWidth, radius, duration ### Border trace button https://fieldbook.lizardi.mx/es/components/border-trace-button Un botón silencioso y translúcido cuyos cuatro bordes se dibujan en secuencia al pasar el mouse mientras una suave banda de luz cruza la cara. Frameworks: react Access: member Public prop names: label, accent, traceMs, tracking, sweep ### Bottom sheet panel https://fieldbook.lizardi.mx/es/components/bottom-sheet-panel Una hoja de estilo móvil que se eleva desde el borde inferior con un asa y se puede arrastrar hacia abajo para descartarla. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: title, accent, dragToDismiss ### Bounce drop toggle https://fieldbook.lizardi.mx/es/components/bounce-drop-toggle Un interruptor de palanca vertical alto cuya bola cae al fondo con un rebote cuando se apaga y se desliza hacia arriba con un resorte apretado cuando se enciende. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: on, accentColor, trackHeight ### Bounce warning dialog https://fieldbook.lizardi.mx/es/components/bounce-warning-dialog Un cuadro de diálogo de confirmación que aparece con un exceso elástico y una insignia de icono que rebota, exigiendo una respuesta antes de que la página siguiente vuelva a ser utilizable. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, springBounce, icon ### Bouncing dot action button https://fieldbook.lizardi.mx/es/components/bouncing-dot-action-button Un botón de tono oscuro con un pequeño punto estacionado en su borde derecho que salta mientras el bloque se ilumina y proyecta un brillo suave al pasar el mouse o al enfocar el teclado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, dotSize, hopHeight, hopSeconds, castSpread ### Bouncing download button https://fieldbook.lizardi.mx/es/components/bouncing-download-button Un chip compacto de descarga oscura que rebota suavemente por sí solo para llamar la atención, se queda quieto en el momento en que un puntero o el enfoque del teclado lo alcanza y cambia su flecha con una caída cuando se presiona. Frameworks: react Access: member Public prop names: accent, bounceHeight, period, showLabel ### Bouncing Photo Fan https://fieldbook.lizardi.mx/es/components/bouncing-photo-fan Una fila de mosaicos de fotografías cuadrados superpuestos que aparecen con un exceso elástico y luego se empujan entre sí cuando se pasa el cursor sobre uno de ellos. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, spread, stagger, pushOnHover, accent ### Bouncing sphere pit https://fieldbook.lizardi.mx/es/components/bouncing-sphere-pit Un pozo encajonado de esferas pesadas que caen, chocan entre sí y se acumulan, dispersándose cada vez que el cursor las atraviesa. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, ballCount, gravity, bounce, maxSize, followCursor ### Bounded Stay Range Picker https://fieldbook.lizardi.mx/es/components/bounded-stay-range-picker Un selector de rango de dos meses que aplica un número mínimo y máximo de noches, por lo que solo se pueden seleccionar las fechas de finalización dentro de esa ventana una vez que se establece un inicio. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, minNights, maxNights, startMonth ### Bracket lock cursor https://fieldbook.lizardi.mx/es/components/bracket-lock-cursor Un puntero personalizado de cuatro soportes de esquina que gira mientras está inactivo y se abre alrededor de cualquier elemento marcado como objetivo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: spinDuration, accent, lockColor, cornerSize, hideNativeCursor ### Branching bolt https://fieldbook.lizardi.mx/es/components/branching-bolt Un perno dentado recorre el marco con horquillas cortas que se desprenden de sus costados, se ilumina de color blanco en el impacto y luego se desvanece en una imagen residual. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: boltColor, strikeInterval, intensity, thickness, branching, clickToStrike ### Branded Code Panel https://fieldbook.lizardi.mx/es/components/branded-code-panel Un panel de verificación centrado debajo de un pequeño bloqueo de marca, donde un código rechazado agita la fila una vez, la borra y vuelve a centrarse en el primer cuadro. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, length, brandName, shakeOnError, title ### Breathing CTA pill https://fieldbook.lizardi.mx/es/components/breathing-cta-pill Una llamada a la acción de final redondo que aumenta al pasar el mouse y se asienta en un pulso de respiración lenta de escala y brillo hasta que el puntero se aleja o se presiona el botón. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, hoverScale, pulseSeconds, pulse ### Breathing dot loader https://fieldbook.lizardi.mx/es/components/breathing-dot-loader Puntos que permanecen quietos y respiran en lugar de moverse, hinchándose y atenuándose a su vez para que la fila se lea como un latido cardíaco lento. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: dotCount, dotSize, peakScale, cycleSeconds, accent ### Breathing transport toggle https://fieldbook.lizardi.mx/es/components/breathing-transport-toggle Un chip de reproducción teñido que cambia entre reproducción y pausa al hacer clic, su glifo respira mientras el puntero descansa sobre él. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, playing, breathSpeed, tint ### Brightening gradient button https://fieldbook.lizardi.mx/es/components/brightening-gradient-button Un chip profundo de dos tonos cuyo lavado vertical sube a un par mucho más brillante de la misma familia al pasar el mouse, con un resaltado de vidrio fijo a lo largo de su borde superior. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, baseColor, hoverColor, radius, shiftMs ### Browser window frame https://fieldbook.lizardi.mx/es/components/browser-window-frame Una maqueta de ventana de navegador de escritorio con puntos de semáforo y una barra de direcciones que enmarca una captura de pantalla o un vídeo en bucle como contenido de la página. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: url, screenContent, simpleMode ### Brushed metal knob https://fieldbook.lizardi.mx/es/components/brushed-metal-knob-button Una esfera redonda mecanizada con un acabado radial cepillado y una etiqueta grabada que gira lentamente un cuarto de revolución mientras está suspendida. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, size, turn, spinSeconds, accent, grooves ### Brushed Metal Pass https://fieldbook.lizardi.mx/es/components/brushed-metal-pass Una tarjeta de acceso cuya cara de metal cepillado lleva una banda especular que oscila con el puntero, sobre una superficie de ruido ondulada y de grano fino. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: sheen, grain, ripple, accent, holder ### Bubble burst menu https://fieldbook.lizardi.mx/es/components/bubble-burst-menu Una pastilla con un logotipo flotante y un interruptor que se expanden hasta convertirse en una superposición de pantalla completa de enlaces de pastillas de gran tamaño, cada uno de los cuales estalla en su lugar con un tambaleo elástico. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: staggerDelay, linkCount, menuBackground ### Bulging dot field https://fieldbook.lizardi.mx/es/components/bulging-dot-field Una fina cuadrícula de puntos que se hincha hacia afuera debajo del cursor como una tela empujada desde atrás, regresando con un suave sobrepaso en el momento en que el puntero avanza. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, dotSpacing, dotRadius, cursorRadius, bulgeStrength, halo ### Bulk action toolbar https://fieldbook.lizardi.mx/es/components/bulk-action-toolbar Una barra de herramientas flotante para recorrer una cola de registros uno a la vez, con acciones de íconos que revelan su etiqueta al pasar el mouse y un botón principal que confirma el destino. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: current, total, destination, accent ### Burst particle emitter https://fieldbook.lizardi.mx/es/components/burst-particle-emitter Envuelve cualquier elemento y dispara un abanico escalonado de pequeñas motas desde un borde elegido, al hacer clic, en un bucle o la primera vez que se desplaza a la vista. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, radius, spread, duration, accent, side ### Button set https://fieldbook.lizardi.mx/es/components/button-set Una familia de botones completa que cubre seis intenciones, seis tamaños, formas de solo íconos y un estado de carga que se intercambia en una rueda giratoria sin que el botón cambie de ancho. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: variant, size, accent, loading, disabled, label ### Camera flash pill https://fieldbook.lizardi.mx/es/components/camera-flash-pill-button Una píldora de acento sólido con un glifo de cámara que parpadea como un tubo de flash que lucha al pasar el cursor o al enfocar, y deja toda su cara en blanco durante un breve latido cuando se presiona. Frameworks: react Access: open Public prop names: label, accent, flickerOnHover, flickerPeriod, showCounter ### Candle Price Chart https://fieldbook.lizardi.mx/es/components/candle-price-chart Un gráfico de velas OHLC con velas de colores hacia arriba y hacia abajo, una mecha por período y una información sobre herramientas flotante que muestra la apertura, el máximo, el mínimo y el cierre. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: upColor, downColor, periodCount, showGrid ### Caption Style Date Picker https://fieldbook.lizardi.mx/es/components/caption-style-date-picker Un selector de fecha única combinado con un menú de selección que intercambia su encabezado entre un menú desplegable combinado de mes y año, un menú desplegable de solo mes o un menú desplegable de solo año. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: captionStyle, accent, startMonth, startYear ### Captioned Like Button https://fieldbook.lizardi.mx/es/components/captioned-like-button Un botón de corazón solo con ícono que revela un título que se eleva desde abajo al pasar el cursor o al enfocar, y se llena con un rápido sobrepaso cuando se desea. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, caption, likedCaption, size, showCount, startLiked ### Card blur tabs https://fieldbook.lizardi.mx/es/components/card-blur-tabs Pestañas enmarcadas en una tarjeta con bordes cuyo contenido se difumina y se desvanece brevemente cuando cambias de panel, con una pastilla deslizante detrás de la etiqueta de la pestaña activa. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tabOneLabel, tabTwoLabel, accent ### Card Shuffle Stack https://fieldbook.lizardi.mx/es/components/card-shuffle-stack Una pila de paneles ventilados que funcionan con un temporizador: el panel frontal se cae, el resto da un paso hacia adelante y el que se cayó se mueve hacia atrás. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: stepX, stepY, delayMs, skew, motionStyle, accent ### Card Style Invoice Table https://fieldbook.lizardi.mx/es/components/card-style-invoice-table Una tabla de facturas representada como una tarjeta elevada, con la primera y la última fila redondeadas para que coincidan con la forma de la tarjeta. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, rowCount, showHeader, currency ### Card to fullscreen modal https://fieldbook.lizardi.mx/es/components/card-to-fullscreen-modal Una tarjeta de lista que se transforma continuamente en un panel de detalles casi a pantalla completa usando su propia imagen y título, y luego vuelve a transformarse al cerrarse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: title, accent, morphDuration ### Caret tail link https://fieldbook.lizardi.mx/es/components/caret-tail-link Un enlace de texto silencioso con un pequeño corchete en ángulo justo después de su última letra, que se desliza hacia afuera y se subraya al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, direction, travel, underline ### Cartridge fire button https://fieldbook.lizardi.mx/es/components/cartridge-fire-button Un botón novedoso con forma de carcasa de latón, con un proyectil escondido detrás de su nariz que se dispara y recarga cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, shotDistance, reloadMs, recoil ### Carved Pill Button https://fieldbook.lizardi.mx/es/components/carved-pill-button Una pastilla tallada en una suave superficie mate mediante sombras internas opuestas, que se eleva hasta convertirse en una plataforma elevada en el momento en que se suspende o se enfoca. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, surface, accent, depth, radius, raiseOnHover ### Cascading Letter Reveal https://fieldbook.lizardi.mx/es/components/cascading-letter-reveal Un titular que se revela letra por letra con un suave ascenso y desvanecimiento a medida que aparece, y luego se mantiene estable una vez terminado. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: headline, staggerMs, durationS, splitBy, textColor ### Category dot line https://fieldbook.lizardi.mx/es/components/category-dot-line Una única curva suave a través de cinco categorías con nombre donde cada marcador de punto se colorea a partir de una rampa de acento rotada por tono, por lo que los marcadores funcionan como leyenda. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, hueRange, dotRadius, strokeWidth, showGrid ### Celebration burst https://fieldbook.lizardi.mx/es/components/celebration-burst Una ráfaga de lienzo de copos de papel disparados desde un botón, arqueándose en una extensión, revoloteando mientras caen y se asientan fuera del marco bajo la gravedad. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: count, spread, power, gravity, accent, shape ### Center bloom button https://fieldbook.lizardi.mx/es/components/center-bloom-button Una pastilla sólida y redondeada que se ilumina desde el centro hacia afuera a medida que un lavado circular pálido crece más allá de sus propios bordes y luego se hunde cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, bloom, duration, shadow ### Center out fill button https://fieldbook.lizardi.mx/es/components/center-out-fill-button Un botón en mayúscula delineado cuyo relleno de acento se abre desde una línea fina en el centro hacia ambos bordes al pasar el cursor o enfocar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, borderWidth, duration ### Center out underline link https://fieldbook.lizardi.mx/es/components/center-out-underline-link Un enlace de navegación cuyo subrayado crece hacia afuera desde el centro hasta ambos extremos al pasar el cursor y se retrae hasta un punto cuando el puntero se aleja. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, thickness, offset, duration ### Centered modal frame https://fieldbook.lizardi.mx/es/components/centered-modal-frame Un modal sencillo y centrado que se desvanece y escala sobre un fondo atenuado, con encabezado, cuerpo y pie de página, para formas y confirmaciones cotidianas. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: title, accent, showCloseButton, width ### Centered signup card https://fieldbook.lizardi.mx/es/components/centered-signup-card Una tarjeta de página centrada que recopila un nombre completo, correo electrónico, contraseña y confirmación, cada campo con una breve línea auxiliar, además de un botón de registro de cuenta conectada. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, accentColor, showSocialButton ### Chameleon pill navbar https://fieldbook.lizardi.mx/es/components/chameleon-pill-navbar Una fila de enlaces de navegación en una cápsula oscura donde el enlace activo se divide en su propia píldora y el resto se cierra a su alrededor. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: activeIndex, accent, cornerRadius ### Channel tile row https://fieldbook.lizardi.mx/es/components/channel-tile-row Una fila envolvente de mosaicos de íconos cuadrados debajo de un título pequeño, donde cada mosaico se funde con su propio color reservado al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: caption, tileSize, gap, accent, perTileTint ### Character budget counter https://fieldbook.lizardi.mx/es/components/character-budget-counter Un cuadro de redacción con una lectura de caracteres restantes que golpea un resorte y se calienta en color a medida que se agota el presupuesto. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: maxLength, warnAt, accent, placeholder, punch ### Character shuffle reveal https://fieldbook.lizardi.mx/es/components/character-shuffle-reveal Cada personaje recorre una franja de glifos aleatorios como un carrete de tragamonedas antes de aterrizar en la letra real, que se revela en el desplazamiento con la repetición del cursor. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, direction, duration, accentColor ### Shimmer Wave Text https://fieldbook.lizardi.mx/es/components/character-wave-shimmer Una onda de brillo recorre una vez una línea de texto, iluminando cada carácter por turno antes de que se atenúe, luego se detiene brevemente y se repite. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: duration, label, paused, accentColor ### Charge Up Action Button https://fieldbook.lizardi.mx/es/components/charge-up-action-button Una pastilla de carbón que se enciende en una tecla de gradiente saturado al flotar y se eleva de la superficie mientras su marca gira y se ilumina. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, lift, halo, duration ### Chart Plot Texture https://fieldbook.lizardi.mx/es/components/chart-plot-texture Un panel de textura repetida para el área de trazado de un gráfico, que cambia entre líneas diagonales, puntos y un rayado, se desvaneció suavemente en cada borde. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: pattern, patternColor, opacity, scale ### Chart reference band https://fieldbook.lizardi.mx/es/components/chart-reference-band Una banda horizontal sombreada dibujada detrás de un gráfico de líneas para marcar un rango objetivo o una zona de umbral, con bordes difuminados y un borde discontinuo opcional. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: topValue, bottomValue, borderStyle, showMarkers, fadeEdges, accent ### Chat launcher morph https://fieldbook.lizardi.mx/es/components/chat-launcher-morph-button Un lanzador redondo cuyo contorno de bocadillo se vuelve a dibujar hasta convertirse en una marca cercana mientras sus tres puntos se alejan. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, open, morphSeconds, idlePulse, strokeWidth ### Chat message thread https://fieldbook.lizardi.mx/es/components/chat-message-thread Una breve transcripción de chat con bocadillos redondeados, mensajes entrantes a la izquierda con un avatar y nombre, mensajes salientes a la derecha con color destacado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, senderName, showAvatar ### Check draw toggle https://fieldbook.lizardi.mx/es/components/check-draw-toggle Una casilla de verificación cuadrada cuya marca de verificación se dibuja trazo a trazo cuando está marcada, con una presión suave y una escala de desplazamiento. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: checked, size, variant, accentColor ### Check stroke submit https://fieldbook.lizardi.mx/es/components/check-stroke-submit-button Un botón de envío compacto y relleno cuya marca de verificación inicial se dibuja trazo a trazo cuando la acción se realiza correctamente. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, confirmLabel, accent, drawMs, holdMs ### Checkable action menu https://fieldbook.lizardi.mx/es/components/checkable-action-menu Un menú que combina acciones simples con filas de casillas de verificación y un conjunto de opciones únicas, haciendo aparecer cada marca cuando se enciende y deslizando un punto entre las opciones. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, align, accent, keepOpenOnCheck, showSubmenu ### Checkbox motion lab https://fieldbook.lizardi.mx/es/components/checkbox-motion-lab Una única casilla de verificación de gran tamaño para ajustar exactamente con qué firmeza se presiona y con qué lentitud se dibuja la marca de verificación. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: drawDuration, pressScale, cornerRadius, accentColor ### Checkmark draw checkbox https://fieldbook.lizardi.mx/es/components/checkmark-draw-checkbox Una casilla de verificación cuadrada que responde a una verificación dibujando una marca de verificación un trazo a la vez y, en su lugar, muestra un guión corto cuando su estado está solo parcialmente establecido. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, state, accent, size ### Chevron accordion list https://fieldbook.lizardi.mx/es/components/chevron-accordion-list Una pila vertical de filas de preguntas que se expanden para revelar una respuesta, con un galón que se voltea cuando su fila está abierta. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: singleOpen, defaultOpenIndex, keepMounted, accent ### Chevron flip tile https://fieldbook.lizardi.mx/es/components/chevron-flip-tile Un ícono cuadrado cuyo galón se articula plano y se vuelve a abrir apuntando hacia el otro lado, cada mitad girando sobre la junta donde se encuentran. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: ink, accent, tileSize, duration, lift ### Chip legend pie https://fieldbook.lizardi.mx/es/components/chip-legend-pie Un gráfico circular sólido sin etiquetas en los sectores, combinado con una fila envuelta de chips de colores debajo que nombra cada sector y resalta en sincronización al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, hueRange, gap, showValues, chipsPerRow ### Cipher reveal text https://fieldbook.lizardi.mx/es/components/cipher-reveal-text Una etiqueta que comienza codificada en símbolos aleatorios y se descifra en su texto real al verla, pasar el cursor o hacer clic. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, speed, sequential, accentColor ### Circle plus add button https://fieldbook.lizardi.mx/es/components/circle-plus-add-button Un botón para agregar sin palabras cuyo signo más dibuja sus dos trazos hacia afuera desde el centro al pasar el cursor mientras el relleno se profundiza. Frameworks: react Access: member Public prop names: accent, width, strokeGrowth, spinRing ### Circle reveal sidebar https://fieldbook.lizardi.mx/es/components/circle-reveal-sidebar Un panel de menú que se abre como un círculo que surge de su propia palanca, con filas que surgen en secuencia y las barras de palanca se pliegan formando una cruz. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: defaultOpen, itemCount, stagger, bounce, accent ### Circled Arrow Pill https://fieldbook.lizardi.mx/es/components/circled-arrow-pill-button Una píldora sólida de alto croma con la etiqueta a la izquierda y una flecha anillada a la derecha que avanza al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, nudge, pressScale, iconSize ### Circular hover speed ring https://fieldbook.lizardi.mx/es/components/circular-hover-speed-ring Una frase gira lentamente alrededor de un círculo hasta que llega el puntero, luego gira rápidamente y crece ligeramente antes de retroceder una vez que el puntero se va. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, restSeconds, hoverSeconds, accent ### Circular wipe switcher https://fieldbook.lizardi.mx/es/components/circular-wipe-switcher Un conmutador de color donde el nuevo tema inunda toda la superficie como un círculo que se expande desde el punto exacto que presionaste, mientras el anillo de selección se desliza entre muestras. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: colorA, colorB, colorC, duration, fromPointer ### Clamp jaws glow button https://fieldbook.lizardi.mx/es/components/clamp-jaws-glow-button Un botón de contorno hueco cuyas marcas laterales se deslizan hacia adentro, se fusionan en mandíbulas y se cierran sobre la etiqueta con un brillo acentuado al pasar el mouse o enfocar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, glowStrength, sequenceMs, reflection ### Clean Text Field https://fieldbook.lizardi.mx/es/components/clean-text-field Una entrada de texto con bordes sencillos para un formulario etiquetado: neutral en reposo, un anillo de acento nítido en el foco, silenciado cuando está deshabilitado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, placeholder, accentColor, invalid, disabled ### Click ripple burst https://fieldbook.lizardi.mx/es/components/click-ripple-burst Un efecto de retroalimentación de puntero que genera una breve forma animada exactamente donde el usuario hace clic o toca. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: variant, color, size, duration ### Click spark burst https://fieldbook.lizardi.mx/es/components/click-spark-burst Cada presión arroja un anillo de líneas cortas desde el punto exacto de contacto, cada una de las cuales se estira y se reduce a nada a medida que vuela. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: sparkCount, radius, duration, easing, sparkColor ### Code cover card https://fieldbook.lizardi.mx/es/components/code-cover-card Una tarjeta de verificación ancha con el código en un lado y un panel de cubierta en el otro que llena una barra de progreso a medida que se ingresan los dígitos. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, length, autoSubmit, showCover, headline ### Coiled Spring Drag https://fieldbook.lizardi.mx/es/components/coiled-spring-drag Una loseta que se puede arrastrar y que está atada a su lugar de origen mediante una bobina que se estira y se adelgaza a medida que tiras, y luego lanza la loseta hacia atrás cuando la sueltas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: coils, stiffness, damping, strokeWidth, accent ### Collapsible app sidebar https://fieldbook.lizardi.mx/es/components/collapsible-app-sidebar Una barra lateral completa de la aplicación con enlaces de navegación agrupados, un resaltado de elementos activos, una palanca que la colapsa en un riel de solo íconos y un cajón deslizable en pantallas estrechas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: collapsed, accentColor, mobileBreakpoint, showAccountRow ### Collapsible App Sidebar https://fieldbook.lizardi.mx/es/components/collapsible-app-sidebar-2 Una barra lateral de la aplicación con enlaces de navegación agrupados que se colapsa en un riel de solo íconos, se desliza como una superposición en pantallas estrechas y alterna con un atajo de teclado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultCollapsed, itemCount ### Collapsible Icon Sidebar https://fieldbook.lizardi.mx/es/components/collapsible-icon-sidebar Un shell de aplicación completo con una barra lateral izquierda que se contrae al ancho de solo íconos, secciones de menú anidadas que se expanden y un resaltado que se desliza entre las filas del menú. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: defaultOpen, side, accent, width ### Collapsing share button https://fieldbook.lizardi.mx/es/components/collapsing-share-button Una píldora etiquetada que se reduce a un glifo redondo mientras una tira de mosaicos de enlaces flota en el espacio que dejó. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, items, direction, closeOnBlur ### Collapsing trail breadcrumb https://fieldbook.lizardi.mx/es/components/collapsing-trail-breadcrumb Un sendero con separadores de chevrón cuyos escalones centrales colapsan en un botón de puntos suspensivos que abre un menú de los pasos ocultos. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: segmentCount, separator, accent ### Color Band Text Reveal https://fieldbook.lizardi.mx/es/components/color-band-text-reveal Una banda suave de varios colores se desliza una vez a través de una línea de texto con un movimiento de entrada y salida suave, tiñendo cada letra a medida que pasa antes de que el texto se asiente en un color sólido. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, duration, repeat, repeatDelay ### Color blend compare https://fieldbook.lizardi.mx/es/components/color-blend-compare Dos muestras se repiten entre el mismo par de colores, una mezclada con valores de canal sin procesar y otra con luz lineal, lo que muestra la caída que produce una transición simple. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: fromColor, toColor, cycleSeconds, showLabels, pinMidpoint ### Color relay sign-in https://fieldbook.lizardi.mx/es/components/color-relay-sign-in-button Una píldora de inicio de sesión cuya marca de cuatro segmentos transmite sus colores uno por uno a inundaciones circulares que recorren el botón en relevo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, secondColor, thirdColor, fourthColor, relaySeconds ### Color swap play button https://fieldbook.lizardi.mx/es/components/color-swap-play-button Una píldora de juego en mayúsculas que intercambia sus colores de fondo y de texto al pasar el mouse, elevándose a medida que su brillo de color se vuelve oscuro. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, glow, lift ### Comb wipe invert button https://fieldbook.lizardi.mx/es/components/comb-wipe-invert-button Dos peines a rayas entrelazadas se deslizan desde arriba y desde abajo para cubrir una pastilla negra, invirtiendo la etiqueta a medida que pasan. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, bars, duration, pill ### Combobox field https://fieldbook.lizardi.mx/es/components/combobox-field Un campo desplegable con capacidad de búsqueda: al escribir se filtra una lista de opciones en vivo y al seleccionar una se completa el campo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, accent, openOnLoad ### Comet rain https://fieldbook.lizardi.mx/es/components/comet-rain Rayas con cabezas brillantes caen desde un punto brillante cerca de la parte superior y se curvan hacia afuera a medida que caen, a velocidades determinadas por su profundidad. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: streakColor, glowColor, speed, density, streakLength, pointerPush ### Comic pop text https://fieldbook.lizardi.mx/es/components/comic-pop-text Letras gruesas de cómic con un contorno grueso y un relleno de puntos de semitono que aparece en el escenario con una entrada saltarina de escala y rotación. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, fontSize, fillColor, dotColor ### Command palette https://fieldbook.lizardi.mx/es/components/command-palette Una superposición de búsqueda abierta con un botón o Ctrl K que filtra comandos agrupados, mueve un resaltado con las teclas de flecha, ejecuta el seleccionado en Enter e informa el resultado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: placeholder, accent ### Command Palette Search https://fieldbook.lizardi.mx/es/components/command-palette-search Una superposición convocada por teclado con un campo de búsqueda en la parte superior y una lista de comandos agrupados y filtrados en vivo debajo, navegable completamente por teclado y ejecutado con Enter. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, placeholder, groupCount ### Command search palette https://fieldbook.lizardi.mx/es/components/command-search-palette Un campo de búsqueda que coloca una lista filtrada de comandos debajo de sí mismo a medida que escribe, con resaltado de teclas de flecha, selección al pasar el mouse y un pie de página de sugerencia de teclado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: placeholder, defaultOpen, accentColor ### Compact Time Range Picker https://fieldbook.lizardi.mx/es/components/compact-time-range-picker Una tarjeta de calendario mensual con una franja de rango de tiempo de dos celdas en el pie de página, los dos campos de tiempo divididos solo por un guión corto para que el par se lea como un control de rango. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, startTime, endTime, cellSize ### Compass bar grid https://fieldbook.lizardi.mx/es/components/compass-bar-grid Una cuadrícula de barras cortas que giran para apuntar al puntero, de modo que el campo se lee como limaduras de hierro que encuentran un imán. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rows, columns, barLength, restAngle, accent ### Compass share burst https://fieldbook.lizardi.mx/es/components/compass-share-burst Un botón redondo para compartir que abre su destino hacia los puntos de la brújula en una ráfaga escalonada y los lleva de regreso a casa en orden inverso. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, radius, stagger, accent, latchOnClick ### Composable Reveal https://fieldbook.lizardi.mx/es/components/composable-reveal Un envoltorio de revelación cuyas partes de diapositiva, desvanecimiento, zoom y desenfoque se pueden activar y combinar en una única transición de resorte. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: slide, fade, zoom, defocus, delay, accent ### Concentric goal rings https://fieldbook.lizardi.mx/es/components/concentric-goal-rings Tres anillos de progreso anidados que se dibujan en secuencia junto a una lectura del valor objetivo y actual de cada objetivo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: outerValue, middleValue, innerValue, ringWidth, accent ### Concentric pulse rings https://fieldbook.lizardi.mx/es/components/concentric-pulse-rings Una pila de anillos concéntricos detrás de una leyenda, cada uno de los cuales respira con un retraso escalonado de modo que un pulso lento viaja hacia afuera desde el centro. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: ringCount, baseSize, step, duration, accentColor ### Concentric ring button https://fieldbook.lizardi.mx/es/components/concentric-ring-button Un botón ubicado sobre una enorme pila de anillos concéntricos que se desliza al flotar mientras todo el plato pasa de una rampa cálida a una fría. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, rings, ringWidth, shift ### Concentric Ring Chart https://fieldbook.lizardi.mx/es/components/concentric-ring-chart Anillos de progreso anidados que barren su propio porcentaje en la montura y comparten un total central en vivo, como un indicador de múltiples diales. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: strokeWidth, ringGap, accent, animationSpeed, showCenterLabel ### Concentric Ring Radar https://fieldbook.lizardi.mx/es/components/concentric-ring-radar Un gráfico polar cuya escala se dibuja como verdaderos círculos concéntricos en lugar de polígonos anidados, de modo que la forma trazada se lee sobre un fondo de destino suave. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, rings, fillOpacity, dotRadius, showSpokes ### Confirm action dialog https://fieldbook.lizardi.mx/es/components/confirm-action-dialog Un modal centrado que interrumpe la página para que alguien confirme o cancele explícitamente una acción seria antes de que suceda. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: confirmLabel, cancelLabel, accentColor, destructive ### Confirm action modal https://fieldbook.lizardi.mx/es/components/confirm-action-modal Un cuadro de diálogo de confirmación centrado que se abre sobre un fondo que se oscurece y le pide al visitante que confirme o cancele una acción destructiva. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: question, detail, accentColor, confirmLabel ### Confirm Delete Modal https://fieldbook.lizardi.mx/es/components/confirm-delete-modal Un cuadro de diálogo de confirmación centrado que se desvanece sobre un fondo atenuado, le pide al usuario que confirme una acción destructiva y se anima al cancelar, confirmar o hacer clic externo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, title, closeOnBackdrop ### Connector Pulse Beam https://fieldbook.lizardi.mx/es/components/connector-pulse-beam Dibuja un conector curvo entre dos elementos y envía un segmento degradado brillante que viaja a lo largo de él en un bucle. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: curvature, accent, duration, pathWidth, reverse ### Consequence confirm dialog https://fieldbook.lizardi.mx/es/components/consequence-confirm-dialog Un cuadro de diálogo de confirmación que aparece desde un borde elegido y bloquea la página hasta que el visitante cancela o continúa explícitamente. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: from, accent, headline, continueLabel ### Content Divider Rule https://fieldbook.lizardi.mx/es/components/content-divider-rule Una regla estructural delgada que separa secciones apiladas o etiquetas cortas en línea sin llamar la atención. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: orientation, thickness, spacing, accentColor ### Content Loading Card https://fieldbook.lizardi.mx/es/components/content-loading-card Un marcador de posición en forma de tarjeta que respira con un lento pulso opacity mientras aún se cargan un gran bloque de imagen y dos líneas de texto. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: layout, pulse ### Contour Field https://fieldbook.lizardi.mx/es/components/contour-field-backdrop Un fondo animado a sangre completa de contornos de elevación anidados que se expanden y se fusionan, con el puntero levantando un suave bulto en el terreno. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, bands, speed, glow, pointerLift ### Contrast Boost Frame Button https://fieldbook.lizardi.mx/es/components/contrast-boost-frame-button Una placa interior pálida flota dentro de un marco grueso pintado, y al flotar hace que todo se vuelva más brillante y saturado sin mover nada. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, secondary, frameWidth, boost, rampAngle ### Converging chevron button https://fieldbook.lizardi.mx/es/components/converging-chevron-button Dos placas en forma de flecha vuelan desde lados opuestos y se encuentran en el centro del botón, sellándolo detrás de la etiqueta. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, point, duration, radius ### Conversation bubbles https://fieldbook.lizardi.mx/es/components/conversation-bubbles Un hilo de mensajes de burbujas del mismo tamaño que su texto, agrupadas por remitente y con una pastilla de reacción superpuesta. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: variant, accent, maxWidth, showReactions, grouped ### Copy confirm button https://fieldbook.lizardi.mx/es/components/copy-confirm-button Un botón de icono cuadrado que copia una cadena e intercambia su glifo por una marca dibujada, encogiéndose y difuminando una a medida que la otra llega a su lugar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, size, skin, resetDelay, content ### Copy flick tile https://fieldbook.lizardi.mx/es/components/copy-flick-tile Un mosaico cuadrado que contiene una pila de dos páginas; una pulsación larga desplaza la página superior, confirma la copia en el título y luego restablece la pila. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: caption, doneCaption, accent, holdMs, flingDistance, tileSize ### Corner bracket frame button https://fieldbook.lizardi.mx/es/components/corner-bracket-frame-button Una etiqueta en mayúsculas desnuda que queda encerrada por dos soportes en forma de L que se deslizan desde lados opuestos y luego crecen para cerrar el marco. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, thickness, stagger, width ### Corner bracket seal button https://fieldbook.lizardi.mx/es/components/corner-bracket-seal-button Dos soportes de esquina cortos crecen a lo largo de los bordes hasta que se sellan formando un marco completo alrededor de la etiqueta al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, thickness, stubLength, duration, halo ### Corner bracket target button https://fieldbook.lizardi.mx/es/components/corner-bracket-target-button Un botón cuadrado enmarcado por cuatro soportes en las esquinas que se retraen hacia adentro al pasar el mouse, cerrándose sobre la etiqueta como una vista. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, bracketSize, retract, crosshair ### Corner flood button https://fieldbook.lizardi.mx/es/components/corner-flood-button Un botón rectangular oscuro con un pequeño chip de color colocado en la mitad de su esquina superior izquierda que se hincha hasta inundar toda la cara cuando se presiona el botón. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, chipSize, size, radius ### Corner light rays https://fieldbook.lizardi.mx/es/components/corner-light-rays Amplios rayos de luz se abren en abanico desde una esquina, dos ventiladores tintados se cruzan en ángulos ligeramente diferentes y respiran lentamente. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: colorA, colorB, origin, spread, speed, intensity ### Corner ticks frame button https://fieldbook.lizardi.mx/es/components/corner-ticks-frame-button Un rectángulo oscuro marcado solo por cuatro marcas en las esquinas que se extienden para dibujar un fotograma completo, después del cual se abre un panel iluminado desde el centro y la etiqueta se invierte. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tickPx, stageMs, glow ### Count badge cluster https://fieldbook.lizardi.mx/es/components/count-badge-cluster Una fila de píldoras de palabras y fichas numéricas compactas para etiquetar o contar cosas en línea. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, variant, count, accentColor ### Count Sweep CTA https://fieldbook.lizardi.mx/es/components/count-sweep-cta Un llamado a la acción compacto y oscuro con una marca principal, un divisor y un conteo en vivo, atravesado por una lenta raya de luz diagonal al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, count, accent, glintMs, showCount ### Count Up Number https://fieldbook.lizardi.mx/es/components/count-up-number Un número grande que salta desde un valor inicial hasta un objetivo una vez que aparece a la vista, sobrepasándose ligeramente antes de estabilizarse. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: to, from, duration, accentColor ### Count wheel badge https://fieldbook.lizardi.mx/es/components/count-wheel-badge Una rueda numérica vertical que avanza a través de pasos redondeados hasta un total, con una estrella central que se llena a medida que aumenta la cuenta. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: target, step, rowHeight, direction, accent ### Counting follow chip https://fieldbook.lizardi.mx/es/components/counting-follow-chip Un chip delineado que empareja una etiqueta con un conteo de seguidores, haciendo rodar los dígitos modificados hacia arriba a través de una ventana enmascarada cuando se cierra y hacia abajo cuando se suelta. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, count, compact, duration ### Counting metric https://fieldbook.lizardi.mx/es/components/counting-metric Un número grande que avanza desde un valor inicial hasta su objetivo con un suave resorte la primera vez que se ve, formateado con separadores de miles y decimales fijos. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: target, startValue, decimals, accent ### Counting number readout https://fieldbook.lizardi.mx/es/components/counting-number-readout Una estadística grande que cuenta hasta su valor en una curva de desaceleración, escribiendo el texto directamente en cada fotograma para que el diseño nunca se mueva. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: target, duration, decimals, suffix, accent ### Counting readout https://fieldbook.lizardi.mx/es/components/counting-readout Una cifra métrica que cuenta desde un valor inicial hasta su objetivo en un resorte la primera vez que se ve, con decimales fijos y relleno de ceros opcional. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: target, decimals, delay, padStart, accent ### Crackling border frame https://fieldbook.lizardi.mx/es/components/crackling-border-frame Un marco redondeado cuyo contorno se vuelve a dibujar en cada fotograma como un arco de luz tembloroso, con un brillo constante debajo y un contenido perfectamente quieto en la parte superior. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: speed, chaos, radius, thickness, glow, color ### Cross morph menu button https://fieldbook.lizardi.mx/es/components/cross-morph-menu-button Un ícono de menú delgado de tres barras que se pliega en una cruz cerrada, las barras exteriores viajan hacia la línea central antes de cortarse y volver a colorear. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: restColor, activeColor, barWidth, duration, showTile ### Crossing ripple tile https://fieldbook.lizardi.mx/es/components/crossing-ripple-tile-button Un mosaico de insignia cuadrado donde dos puntos corren desde bordes opuestos, se hinchan en círculos superpuestos que inundan la cara y desenrollan un título debajo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, caption, rippleMs, spin ### CRT terminal static https://fieldbook.lizardi.mx/es/components/crt-terminal-static Una cuadrícula de sangrado completo de glifos de bloques brillantes que hierve, rueda y se rasga como un monitor monocromático defectuoso. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tint, cellSize, speed, scanline, glitch, pointerGlow ### Cube flip letters https://fieldbook.lizardi.mx/es/components/cube-flip-letters Al pasar el cursor sobre una línea, cada letra gira un cuarto de vuelta en 3D, una tras otra desde un origen elegido, revelando una segunda cara que lleva el mismo glifo en el acento. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, direction, origin, stagger, accent ### Cursor-chasing tooltip https://fieldbook.lizardi.mx/es/components/cursor-chase-tooltip Una burbuja de pistas que aparece al pasar el cursor o al enfocar y puede deslizarse para seguir el puntero a medida que se mueve a través del gatillo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, followCursor, accent ### Cursor drift link preview https://fieldbook.lizardi.mx/es/components/cursor-drift-link-preview Un panel de vista previa de enlaces que se inclina hacia donde se encuentra el puntero en el enlace, arrastrándolo sobre un resorte suave. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: driftAxis, driftAmount, stiffness, accent ### Cursor fluid trail https://fieldbook.lizardi.mx/es/components/cursor-fluid-trail Un campo oscuro donde al arrastrar el puntero se mancha un líquido coloreado, y la mancha sigue curvandose y adelgazándose después de que el puntero se detiene. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, brushSize, force, dissipation, autoDrift ### Cursor magnifier lens https://fieldbook.lizardi.mx/es/components/cursor-magnifier-lens Una lente redonda sigue el puntero sobre una imagen y magnifica sólo el pequeño parche debajo de ella, como una lupa de mano. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: zoomFactor, lensSize, followMode ### Cursor trail grid https://fieldbook.lizardi.mx/es/components/cursor-trail-grid Una cuadrícula de celdas delineadas que se encienden debajo del puntero y se enfrían lentamente una vez que avanza, dejando un rastro que se desvanece. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cellSize, columns, rows, fadeMs, accentColor ### Curtain line loader https://fieldbook.lizardi.mx/es/components/curtain-line-loader Una cortina de carga que se retira detrás de una línea viajera brillante, cortando el contenido terminado a la vista en lugar de desvanecerlo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, duration, direction, lineWidth, loop ### Curtain scroll reveal https://fieldbook.lizardi.mx/es/components/curtain-scroll-reveal Una fila de imágenes que se descubren detrás de una máscara de cortina deslizante a medida que avanza el desplazamiento las muestra y se vuelve a cubrir cuando se desplaza hacia afuera. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: revealDirection, imageCount, settleScale ### Curved input bar https://fieldbook.lizardi.mx/es/components/curved-input-bar Un campo de texto en forma de píldora doblado en un suave arco hacia arriba, con el texto escrito, el cursor y el botón de enviar siguiendo la misma curva. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: placeholder, buttonText, accent, bend ### Curved Scroll Wall https://fieldbook.lizardi.mx/es/components/curved-scroll-wall Una pared de fotografías que se desplaza horizontalmente representadas en un plano suavemente curvado y arqueado que sigue desplazándose infinitamente en cualquier dirección. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: bend, scrollSpeed, borderRadius, textColor ### Curved Text Loop https://fieldbook.lizardi.mx/es/components/curved-text-loop Una línea de texto se repite sin cesar a lo largo de un suave camino arqueado, desplazándose automáticamente hacia los lados y arrastrándose con la mano con impulso que invierte la dirección. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, speed, curveAmount, accentColor ### Custom shell lightbox https://fieldbook.lizardi.mx/es/components/custom-shell-lightbox Una cuadrícula de galería que abre una caja de luz sin bordes, que muestra cómo un motor de apertura, cierre y enfoque puede usar una carcasa completamente personalizada. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: imageCount, backdropOpacity, showCaption ### Dark Pill Sign In https://fieldbook.lizardi.mx/es/components/dark-pill-sign-in-button Una pastilla oscura con borde para el inicio de sesión de terceros que se profundiza hacia el negro al pasar el mouse mientras su etiqueta retrocede y su borde se estrecha. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, growth, borderStrength ### Dashed outline tooltip button https://fieldbook.lizardi.mx/es/components/dashed-outline-tooltip-button Un botón fantasma discontinuo que se inunda con su acento al pasar el cursor o al enfocar mientras una información sobre herramientas puntiaguda se despliega desde el borde más cercano al botón. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, tip, accent, dashWidth, gap, placement ### Date Range Picker https://fieldbook.lizardi.mx/es/components/date-range-picker Un calendario de un solo mes para elegir una fecha de inicio y finalización, donde cada día entre ellas se completa como una banda resaltada continua una vez que se seleccionan ambos extremos. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, startMonth, startYear ### Date Range Picker https://fieldbook.lizardi.mx/es/components/date-range-picker-2 Una cuadrícula de calendario mensual para seleccionar una fecha de inicio y una fecha de finalización juntas, con los días entre ellas mostrados como un lapso conectado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, weekStart ### Date and Time Duo Picker https://fieldbook.lizardi.mx/es/components/date-time-duo-picker Dos campos etiquetados uno al lado del otro, un botón de fecha compacto que abre una ventana emergente de calendario y un campo de hora simple, para configurar una fecha y una hora como dos pasos independientes. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, dateLabel, timeLabel, defaultTime ### Day Agenda Calendar https://fieldbook.lizardi.mx/es/components/day-agenda-calendar Una tarjeta que combina un calendario mensual compacto con una lista de eventos programados para el día seleccionado y un botón para agregar otro evento. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, selectedDate, eventCount ### Day night sweep toggle https://fieldbook.lizardi.mx/es/components/day-night-sweep-toggle Un botón de ícono que alterna un panel de configuración entre claro, oscuro y automático, repintándolo con un borde recortado que se desplaza en lugar de desvanecerse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: direction, includeAuto, accent, sweepMs, startMode ### Decline call circle https://fieldbook.lizardi.mx/es/components/decline-call-circle-button Un botón de rechazo redondo que solo tiene un ícono cuyo glifo del teléfono se inclina en una posición de colgado mientras se presiona, con una pequeña sacudida de rechazo al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, pressTilt, shakeOnHover ### Deep Slab Button https://fieldbook.lizardi.mx/es/components/deep-slab-button Una losa alta que flota sobre la página en una larga sombra diagonal y se hunde sobre ella cuando se suspende, luego se aplasta al hacer clic. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, sink, showArrow, shadowLength ### Deferred post card https://fieldbook.lizardi.mx/es/components/deferred-post-card Una tarjeta postal que muestra primero un contenedor de marcador de posición medido y luego se intercambia en la publicación real, con un estado de error que se puede volver a intentar. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: state, loadDelay, showMedia, accent ### Departing send button https://fieldbook.lizardi.mx/es/components/departing-send-button Un botón de enviar que saca su glifo del borde derecho y vacía su etiqueta al pasar el mouse, revelando una segunda línea sobre un lavado de acento que se extiende. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, hoverLabel, lift, flightDistance ### Destructive confirm dialog https://fieldbook.lizardi.mx/es/components/destructive-confirm-dialog Un cuadro de diálogo de confirmación para acciones destructivas que solo se cierra a través de sus propios botones y se niega a cerrarse al hacer clic en el fondo o escapar. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: title, confirmLabel, dangerColor ### Destructive sweep button https://fieldbook.lizardi.mx/es/components/destructive-sweep-button Una acción de eliminación cuyo sombreado de rosa a carmesí se desplaza de un extremo a otro al pasar el mouse, inclinando la tapa del contenedor, con una línea opcional de retención para confirmar a lo largo del borde inferior. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, holdToConfirm, holdMs ### Detached Ring Pill https://fieldbook.lizardi.mx/es/components/detached-ring-pill-button Una pastilla oscura orbitada por un anillo de contorno flotante que empuja más hacia afuera e inunda la pastilla con color al flotar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, ringGap, ringWidth, growLabel ### Detail list item https://fieldbook.lizardi.mx/es/components/detail-list-item Una fila de lista que combina un icono o avatar principal, un título y una descripción, y una acción final, para listas de notificaciones, menús o filas de configuración. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: variant, size, mediaVariant, accent ### Detailed signup card https://fieldbook.lizardi.mx/es/components/detailed-signup-card Una tarjeta de registro centrada que recopila el nombre completo, el correo electrónico, la contraseña y la confirmación, cada uno con una línea de ayuda, antes de un botón principal de creación de cuenta. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: heading, accentColor, showAltProvider, providerLabel ### Diagonal blob flood button https://fieldbook.lizardi.mx/es/components/diagonal-blob-flood-button Un botón delineado inundado por una gran mancha redondeada que se desliza diagonalmente desde su esquina superior y se oscurece mientras se mantiene presionado. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, pressAccent, duration, radius ### Diagonal Glare Sweep https://fieldbook.lizardi.mx/es/components/diagonal-glare-sweep Un envoltorio que desliza una estrecha banda de luz en diagonal a través de lo que contiene cuando llega el puntero o el foco del teclado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: angle, bandWidth, duration, glareColor, intensity, playOnce ### Diagonal Hatch Field https://fieldbook.lizardi.mx/es/components/diagonal-hatch-field Un campo repetitivo de líneas diagonales paralelas que se colocan perfectamente a lo largo de un contenedor y pueden inclinarse en cualquier dirección. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: spacing, thickness, slant, dashed, opacity, accentColor ### Diagonal orb fill button https://fieldbook.lizardi.mx/es/components/diagonal-orb-fill-button Un círculo de gran tamaño se desliza de esquina a esquina a través de un botón delineado, llenándolo en diagonal y se oscurece en el instante en que lo presionas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, pressColor, travelSeconds, radius ### Diagonal shutter fill button https://fieldbook.lizardi.mx/es/components/diagonal-shutter-fill-button Un botón delineado que se llena cuando dos hojas inclinadas se balancean desde lados opuestos, se enderezan en mitad del vuelo y se encuentran en el medio. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, duration, tilt, borderWidth ### Diagonal swipe button https://fieldbook.lizardi.mx/es/components/diagonal-swipe-button Un botón delineado que sostiene una delgada hoja inclinada que se endereza y se ensancha hasta que inunda el marco al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, tilt, borderWidth, durationMs ### Diagonal wedge button https://fieldbook.lizardi.mx/es/components/diagonal-wedge-button Un botón cuadrado relleno por una cuña triangular que crece en diagonal hasta cubrir todo el rostro. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, duration, rim, padX ### Dialog bevel button https://fieldbook.lizardi.mx/es/components/dialog-bevel-button Un pequeño botón de sistema gris construido a partir de dos biseles duros anidados y una marca de enfoque interna punteada, cuyas líneas de bisel se intercambian al presionar para que se lea como si estuviera presionado. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, size, isDefault ### Directional Slide In https://fieldbook.lizardi.mx/es/components/directional-slide-in Una revelación que empuja el contenido desde cualquiera de los cuatro lados a una distancia determinada y permite que un resorte absorba la llegada. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: direction, offset, delay, stagger, accent ### Directional theme wipe https://fieldbook.lizardi.mx/es/components/directional-theme-wipe Un interruptor claro y oscuro que revela el nuevo tema con un barrido direccional que recorre todo el marco en lugar de un cambio de color instantáneo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: direction, wipeDuration, accentColor ### Disc to Pill CTA https://fieldbook.lizardi.mx/es/components/disc-to-pill-cta Un pequeño disco lleno al lado de una etiqueta en mayúsculas desnuda se extiende hasta convertirse en una pastilla completa al pasar el cursor o enfocar, revelando el texto y arrastrando la flecha. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, trackWidth, expandSeconds, arrowShift ### Dismiss exit card https://fieldbook.lizardi.mx/es/components/dismiss-exit-card Una tarjeta que se encoge y se desvanece al salir y vuelve a aparecer cuando se restaura, con el diseño circundante inmóvil para que nada salte. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: exitStyle, duration, accent, autoCycle, holdSpace ### Dismissible Dialog https://fieldbook.lizardi.mx/es/components/dismissible-dialog Un cuadro de diálogo centrado en un propósito general que se abre sobre un fondo borroso y que puede cerrarse casualmente con el botón de cerrar, el fondo o Escape. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, detail, accentColor, confirmLabel ### Dock menu https://fieldbook.lizardi.mx/es/components/dock-menu Un muelle inferior cuyos íconos toman su tamaño de la distancia del puntero, con una etiqueta encima del ícono debajo del cursor y un punto debajo del activo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: magnification, distance, iconSize ### Dodging eyes button https://fieldbook.lizardi.mx/es/components/dodging-eyes-button Una cápsula oscura con dos ojos de dibujos animados parpadeantes que salta a la esquina más alejada de tu puntero mientras sus pupilas siguen mirándote. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, eyeSize, dodge, blinkSeconds, moveMs ### Donut share chart https://fieldbook.lizardi.mx/es/components/donut-share-chart Un donut de cinco rebanadas con un centro hueco y espacios finos que se abren en la montura y levantan cualquier rebanada sobre la que esté el puntero. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, hueRange, holeRatio, gap, showTooltip ### Donut with total https://fieldbook.lizardi.mx/es/components/donut-with-total Un gráfico de anillos que coloca el total acumulado en su propio agujero e intercambia esa lectura con cualquier porción que esté enfocada o sobre la que se encuentre. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, caption, holeRatio, hueRange, countUp ### Dot flood button https://fieldbook.lizardi.mx/es/components/dot-flood-button Una pastilla delineada con un pequeño punto al lado de la etiqueta; Al pasar el cursor, el punto crece hasta que inunda todo el botón y la etiqueta cambia a su gemelo invertido. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, dotSize, floodMs, showDot ### Dot matrix arrow button https://fieldbook.lizardi.mx/es/components/dot-matrix-arrow-button Un botón dibujado como filas de puntos se convierte en una punta de flecha hacia la derecha que se desliza hacia los lados y hacia atrás en un bucle lento mientras está suspendido o enfocado y se comprime hacia su punta cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: dotSize, gap, accent, travel, loopSeconds ### Dot matrix status pill https://fieldbook.lizardi.mx/es/components/dot-matrix-status-pill Un botón de pastilla cuyo lado izquierdo es una cuadrícula de cinco por cinco puntos que reproduce un patrón de bucle corto para cada estado, con el título intercambiando paso a paso. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: state, frameMs, dotSize, accent, autoCycle ### Dot radio list https://fieldbook.lizardi.mx/es/components/dot-radio-list Una lista vertical de opciones de radio con indicadores circulares, donde al seleccionar una se rellena con un punto y se borra el resto. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: optionCount, initialSelected, accentColor ### Dot Scale Page Indicator https://fieldbook.lizardi.mx/es/components/dot-scale-page-indicator Una franja de paginación mínima de pequeños puntos numerados que aumentan de tamaño y se iluminan al pasar el mouse o cuando están activos, flanqueados por texto de enlaces anteriores y siguientes que se desvanecen cuando están deshabilitados. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: totalPages, currentPage, accentColor ### Dotted Trend Line https://fieldbook.lizardi.mx/es/components/dotted-trend-line Una curva suave de serie única con un marcador relleno en cada punto y un marcador anillado que se ajusta al punto más cercano al puntero. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, strokeWidth, dotRadius, showGrid, animateOnMount ### Dotted World Map https://fieldbook.lizardi.mx/es/components/dotted-world-map Un mapa mundial renderizado enteramente a partir de pequeños puntos, con algunas ubicaciones etiquetadas que pulsan hacia afuera como un ping de radar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, pulse, showLabels, dotColor ### Double bevel button https://fieldbook.lizardi.mx/es/components/double-bevel-button Un botón pálido que se lee como una tecla moldeada gracias a dos sombras interiores opuestas, una oscura desde arriba y otra brillante desde abajo, que se encuentran detrás de una fría rampa gris. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, bevel, radius, showMark ### Download Sweep Progress https://fieldbook.lizardi.mx/es/components/download-sweep-progress-button Un botón de descarga donde el panel de íconos se expande sobre la etiqueta al pasar el mouse, luego ejecuta un relleno de progreso real y se establece en un estado listo después del clic. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, width, durationMs, showProgressBar ### Download tooltip button https://fieldbook.lizardi.mx/es/components/download-tooltip-button Un botón de icono cuadrado cuya flecha de descarga se mueve hacia abajo y toma el color de acento mientras se despliega un título del tamaño de un archivo debajo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: caption, accent, size, nudge ### Download tray pulse button https://fieldbook.lizardi.mx/es/components/download-tray-pulse-button Una píldora de acción redondeada con una pequeña marca de bandeja en su borde anterior, donde una punta de flecha cae a través de la bandeja en un bucle mientras el puntero descansa sobre ella. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, hoverColor, speed, direction ### Drag Dismiss Bottom Drawer https://fieldbook.lizardi.mx/es/components/drag-dismiss-bottom-drawer Un panel que se desliza hacia adentro desde un borde con una pequeña manija de arrastre, rastrea el arrastre de un dedo o puntero con resistencia de banda elástica y se abre nuevamente o se cierra dependiendo de qué tan lejos se tira. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: edge, showHandle, accentColor ### Drag reorder checklist https://fieldbook.lizardi.mx/es/components/drag-reorder-checklist Una lista de verificación cuyas filas se pueden arrastrar a un nuevo orden, con los elementos marcados dibujando una marca animada y un tachado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, rowGap, dragEnabled ### Drag split panels https://fieldbook.lizardi.mx/es/components/drag-split-panels Paneles divididos por controles delgados que se pueden arrastrar y que cambian el tamaño de los paneles adyacentes en tiempo real, dispuestos en fila o apilados. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: orientation, showHandleGrip, defaultSplit, accentColor ### Drag tile track https://fieldbook.lizardi.mx/es/components/drag-tile-track Una ficha que puedes lanzar alrededor de una pista delimitada que se inclina hacia el arrastre, resiste más allá de los bordes y se detiene con impulso. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: axis, momentum, elasticity, accent, tilt ### Draining fill button https://fieldbook.lizardi.mx/es/components/draining-fill-button Un botón inundado que sale de un borde al pasar el cursor, dejando un contorno hueco con la etiqueta volteada para resaltar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, direction, drainMs ### Draining fill button https://fieldbook.lizardi.mx/es/components/draining-fill-button-2 Una pastilla delineada que comienza completamente inundada de color y drena hasta una banda delgada en el pie al pasar el mouse, luego se vuelve a llenar desde abajo al salir. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, residual, duration, borderWidth ### Drawn check checkbox https://fieldbook.lizardi.mx/es/components/drawn-check-checkbox Una casilla de verificación cuya marca de verificación se dibuja trazo a trazo a medida que el cuadro se llena con un color de acento sólido. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, checked, accentColor, drawDuration ### Drifting aura button https://fieldbook.lizardi.mx/es/components/drifting-aura-button Una almohadilla inclinada con un suave relieve que despierta una banda de color borrosa detrás de sus bordes y deja que la parte más brillante se desplace alrededor del contorno. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, auraTint, label, blur, driftSeconds, skew ### Drifting border sheen https://fieldbook.lizardi.mx/es/components/drifting-border-sheen Un panel cuyo contorno está iluminado por un suave resplandor bicolor, varias veces el tamaño del panel, que se desplaza lentamente alrededor del marco. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: borderWidth, duration, accentColor, secondColor, radius ### Drifting glass shards https://fieldbook.lizardi.mx/es/components/drifting-glass-shards Una lenta corriente de astillas translúcidas que destellan mientras caen, se dispersan desde el cursor y se reúnen cuando el puntero se mantiene quieto. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, shardCount, shardSize, speed, flow, pointerMode ### Drifting Gradient Button https://fieldbook.lizardi.mx/es/components/drifting-gradient-button Un botón cuyo relleno diagonal de dos tonos es de gran tamaño y nunca deja de deslizarse, corre más rápido mientras está suspendido y se aplasta al hacer clic. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, companion, driftSeconds, pressScale ### Drifting gradient wash https://fieldbook.lizardi.mx/es/components/drifting-gradient-wash Un panel degradado de dos tonos sobredimensionado más allá de su marco y lentamente se desplaza hacia adelante y hacia atrás, de modo que el límite de color se desplaza a lo largo de la superficie para siempre. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: fromColor, toColor, cycleSeconds, angle, grain ### Drifting halo button https://fieldbook.lizardi.mx/es/components/drifting-halo-button Un botón oscuro rodeado por un marco de halo ligeramente más grande en el que una banda brillante del acento se desplaza sin cesar alrededor del perímetro, iluminando y levantando la placa al flotar. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, haloWidth, driftSeconds ### Drifting Light Beams https://fieldbook.lizardi.mx/es/components/drifting-light-beams Altas barras de luz inclinadas se elevan a diferentes velocidades y se confunden en una neblina que cambia lentamente. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: beamCount, accent, intensity, speed, blur ### Drifting mesh tilt https://fieldbook.lizardi.mx/es/components/drifting-mesh-tilt-button Una píldora sostenida con una ligera inclinación tridimensional mientras suaves rayos de luz flotan debajo de su superficie, balanceándose entre dos posturas mientras flota o está enfocada. Frameworks: react Access: member Public prop names: label, accent, tilt, driftSeconds, veil ### Drifting particle field https://fieldbook.lizardi.mx/es/components/drifting-particle-field Una nube de pequeños puntos redondos que gira lentamente, cada uno a la deriva en su propio camino, con toda la nube inclinándose hacia afuera del puntero. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: color, count, spread, speed, baseSize, parallax ### Drifting starfield https://fieldbook.lizardi.mx/es/components/drifting-starfield Un campo profundo de estrellas con llamaradas en forma de cruz que parpadean, giran muy lentamente y se separan alrededor del puntero. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: starColor, density, twinkle, driftSpeed, glow, repel ### Drill-Down Sunburst Chart https://fieldbook.lizardi.mx/es/components/drilldown-sunburst-chart Un gráfico de jerarquía radial de anillos de arco anidados que se acerca a los hijos de un segmento cuando se hace clic, con un rastro de ruta de navegación y un resaltado de crecimiento al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, hoverPop, showBreadcrumb, accent ### Drive through button https://fieldbook.lizardi.mx/es/components/drive-through-button Un botón de consola cuadrado cuyo título se quita del camino para que una marca de vehículo plana pueda entrar desde la izquierda, estacionarse y dispararse desde el borde derecho cuando se activa. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, speed, borderWidth, autoDemo ### Dropdown Action Menu https://fieldbook.lizardi.mx/es/components/dropdown-action-menu Un menú desplegable activado por botón con elementos agrupados, etiquetas de atajos de teclado alineadas a la derecha y una fila de estilo de alternancia, que se cierra automáticamente después de la mayoría de las selecciones. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, itemCount ### Dropdown Date Picker https://fieldbook.lizardi.mx/es/components/dropdown-date-picker Un selector de fecha de un solo mes cuyo encabezado utiliza un menú desplegable de mes y un menú desplegable de año uno al lado del otro, por lo que saltar a una fecha lejana requiere una selección en lugar de muchos clics de flecha. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, month, year, showOutsideDays ### Dropdown Date Time Picker https://fieldbook.lizardi.mx/es/components/dropdown-date-time-picker Un campo de fecha etiquetado que abre un calendario mensual en un menú desplegable, junto con dos campos de hora simples debajo para una hora de inicio y finalización. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, startTime, endTime, dateLabel ### Dual Month Date Picker https://fieldbook.lizardi.mx/es/components/dual-month-date-picker Dos cuadrículas de meses adyacentes que comparten una fecha seleccionada, con un solo par de flechas que avanzan o retroceden ambos meses. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, startMonth, startYear, gap ### Easing preview tile https://fieldbook.lizardi.mx/es/components/easing-preview-tile Un mosaico que reproduce la misma ampliación bajo cualquier curva de relajación que elijas, con la curva dibujada al lado y un marcador que la recorre en sincronía. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: easing, duration, delay, mirror, accent ### Echo halo hover button https://fieldbook.lizardi.mx/es/components/echo-halo-hover-button Una píldora oscura que, al pasar el mouse o enfocarse en el teclado, arroja copias escalonadas y descoloridas de sí misma a lo largo de las cuatro diagonales mientras la píldora crece. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, steps, spacing, growth ### Edge aware popover https://fieldbook.lizardi.mx/es/components/edge-aware-popover Un popover que surge de su gatillo y se voltea o se desplaza hacia el lado opuesto cuando el lado que usted solicitó pasa por el borde del marco y permanece pegado mientras las cosas se desplazan. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, offset, avoidCollisions, width, accent ### Edge Collapse Button https://fieldbook.lizardi.mx/es/components/edge-collapse-button Un botón plano con un labio grueso de color a lo largo de su borde inferior que se pliega hasta formar una línea de cabello cuando el botón cae sobre él. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, lip, snapMs ### Edge Faded Plot Grid https://fieldbook.lizardi.mx/es/components/edge-faded-plot-grid Un telón de fondo de reglas discontinuas que se desvanecen en los bordes, con una línea de base resaltada y una banda ligera que las recorre. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, rows, columns, dashed, fadeEdges, sweep ### Edge lamp tracking bar https://fieldbook.lizardi.mx/es/components/edge-lamp-tracking-bar Una amplia barra translúcida con dos pequeñas lámparas sujetas a sus bordes superior e inferior que se extienden hasta convertirse en tapas brillantes a medida que la etiqueta se extiende. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, glowSpread, sheen, width ### Edge-slide panel https://fieldbook.lizardi.mx/es/components/edge-slide-panel Un panel de configuración que aparece al ras del borde de la pantalla mientras la página detrás de él se oscurece y se vuelve borrosa. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: side, accent, title, size ### Edge slide sheet https://fieldbook.lizardi.mx/es/components/edge-slide-sheet Un panel que se desliza desde el borde de la pantalla para contener contenido complementario como un carrito o filtros, sin salir de la página actual. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, panelSize, closeOnOverlayClick ### Edge-tilt alert modal https://fieldbook.lizardi.mx/es/components/edge-tilt-alert-modal Un modal de advertencia para acciones irreversibles que se eleva y se inclina desde el borde inferior con un sobrepaso elástico y se cierra solo mediante sus propios botones. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: headline, continueLabel, accent, riseDistance ### Edge tracking glow card https://fieldbook.lizardi.mx/es/components/edge-tracking-glow-card Una tarjeta cuyo contorno solo se ilumina cuando el puntero se acerca a él, se ilumina a medida que te acercas al borde y se oscurece cerca del centro. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, cornerRadius, glowRadius, edgeSensitivity, autoSweep ### Edge wipe invert https://fieldbook.lizardi.mx/es/components/edge-wipe-invert-button Un botón delineado cuyo relleno sólido se desplaza desde un borde e invierte la etiqueta a medida que pasa por debajo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, direction, durationMs, radius ### Editable date field https://fieldbook.lizardi.mx/es/components/editable-date-field Un campo de texto para una fecha que acepta escritura libre y que también se puede completar desde una pequeña ventana emergente del calendario abierta por un botón con un ícono al final. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, value ### Elastic toggle switch https://fieldbook.lizardi.mx/es/components/elastic-toggle-switch Un interruptor de píldora cuyo pulgar redondo se aplasta hasta formar una masa mientras se presiona y vuelve a su forma redonda con un rebote suave, deslizándose entre un estado neutral y un relleno de acento sólido. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, on, accent, size ### Elastic tug slider https://fieldbook.lizardi.mx/es/components/elastic-tug-slider Un control deslizante que se estira como una banda elástica cuando se arrastra más allá de sus extremos, haciendo retroceder la pista con un rebote una vez soltado. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: value, stepped, accent ### Elastic weight headline https://fieldbook.lizardi.mx/es/components/elastic-weight-headline Una sola línea de enormes letras mayúsculas cuyo peso, ancho e inclinación se expanden alrededor de una posición retrasada y relajada del cursor. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: word, textColor, minFontSize, widthReacts, weightReacts, italicReacts ### Elevated chip button https://fieldbook.lizardi.mx/es/components/elevated-chip-button Un chip pálido y redondeado que descansa sobre sombras suaves apiladas que se tiñen hacia el acento al pasar el mouse y se hunden en una sombra más profunda con un contorno acentuado cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, elevation, radius, paddingX ### Elevation ladder fill button https://fieldbook.lizardi.mx/es/components/elevation-ladder-fill-button Una cápsula que sube tres escalones de elevación entre descansar, flotar y presionar mientras un lavado de acento de bordes suaves cruza su cara. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, hoverLift, pressScale, feather, duration ### Emboss swap button https://fieldbook.lizardi.mx/es/components/emboss-swap-button Un pequeño chip saturado que cambia su sombra plana por un relieve moldeado en cuatro direcciones al pasar el mouse, por lo que la superficie parece extraída de la página. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, radius, depth, size ### Embossed press button https://fieldbook.lizardi.mx/es/components/embossed-press-button Un botón sólido y redondeado que se lee como una tecla física elevada en reposo y que se voltea hasta quedar empotrado y presionado en la superficie al pasar el mouse, enfocar y presionar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, radius, relief, size ### Empty State Panel https://fieldbook.lizardi.mx/es/components/empty-state-panel Un panel centrado para una lista o vista vacía, con una pila de iconos en abanico, un encabezado, una línea de apoyo y un botón de acción principal. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: title, description, buttonLabel, icon ### Endless Feed Loader https://fieldbook.lizardi.mx/es/components/endless-feed-loader Una lista de estilo de noticias que sigue agregando lotes de titulares nuevos a medida que aparece una pequeña rueda giratoria en la parte inferior. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: batchSize, loadDelayMs, accentColor, autoLoad ### Engraved label pie https://fieldbook.lizardi.mx/es/components/engraved-label-pie Un gráfico circular sólido que establece cada nombre de categoría dentro de su propio sector en un color invertido, de modo que el desglose se lee sin etiquetas ni líneas guía externas. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, hueRange, labelInset, gap, showReadout ### Enter view reveal https://fieldbook.lizardi.mx/es/components/enter-view-reveal Bloques que se deslizan y se desvanecen en el momento en que aparecen a la vista y se reinician una vez que salen, por lo que la revelación se reproduce nuevamente en cada pase. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, distance, direction, duration, once ### Entrance timing playground https://fieldbook.lizardi.mx/es/components/entrance-timing-playground Un disco reproduce el mismo movimiento de entrada a pedido para que puedas sentir exactamente qué duración, retardo y curva de relajación contribuyen cada uno. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: duration, delay, easing, accent, loop ### Expanding card navbar https://fieldbook.lizardi.mx/es/components/expanding-card-navbar Una barra de navegación delgada y redondeada cuya palanca de hamburguesa la expande hacia abajo en una fila de tarjetas de enlaces de colores, los enlaces de cada tarjeta se tambalean a la vista. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cardCount, accentColor, ease ### Expanding chip back button https://fieldbook.lizardi.mx/es/components/expanding-chip-back-button Un botón de pastilla pálido cuyo chip decorativo se extiende a todo lo ancho al pasar el mouse, llevando su flecha hacia el otro lado mientras la etiqueta permanece en su lugar y se cubre. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, width, duration, direction ### Expanding disc mute toggle https://fieldbook.lizardi.mx/es/components/expanding-disc-mute-toggle Un ícono redondo alterna donde un disco oscuro crece desde el centro para tragarse la cara pastel, volteando el glifo a claro a medida que pasa por debajo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, accent, restTint, duration, glyph, startOn ### Expanding icon pill https://fieldbook.lizardi.mx/es/components/expanding-icon-pill Un botón de icono redondo que crece hasta convertirse en una pastilla etiquetada al pasar el cursor o al enfocar, girando su glifo una revolución completa a medida que la etiqueta se desliza hacia adentro. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, collapsed, expanded, spin ### Expanding icon pill https://fieldbook.lizardi.mx/es/components/expanding-icon-pill-2 Un botón de ícono redondo que se extiende hasta convertirse en una píldora etiquetada al pasar el mouse, intercambiando su glifo por una palabra cuando llega un relleno de acento. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, collapsed, expanded, cast ### Expanding icon toolbar https://fieldbook.lizardi.mx/es/components/expanding-icon-toolbar Una fila de botones de íconos circulares donde la herramienta seleccionada se expande en una píldora llena con su etiqueta, además de una campana que abre una lista de notificaciones y una píldora de bloqueo de dos estados. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultTool, showLockToggle ### Expanding label toolbar https://fieldbook.lizardi.mx/es/components/expanding-label-toolbar Una fila de botones de herramientas de íconos donde el seleccionado se expande para mostrar su etiqueta, con una burbuja de confirmación flotante y un interruptor de bloqueo separado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: defaultSelected, accent, lockedByDefault ### Expanding panel gallery https://fieldbook.lizardi.mx/es/components/expanding-panel-gallery Una fila de paneles de cubierta donde al pasar el cursor, hacer clic o presionar las teclas de flecha sobre uno se expande a su ancho completo mientras el resto se comprime en astillas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: panelCount, expandRatio, trigger, accentColor ### Expanding ring loader https://fieldbook.lizardi.mx/es/components/expanding-ring-loader Anillos finos que crecen a partir de un solo punto y se desvanecen a medida que se ensanchan, se liberan uno tras otro para que el pulso nunca se detenga. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: ringCount, size, strokeWidth, cycleSeconds, accent ### Experience Shelf https://fieldbook.lizardi.mx/es/components/experience-shelf Un estante de tarjetas fotográficas que se desplaza horizontalmente, cada una con un botón para guardar, una insignia, una calificación y un precio, que se desplaza suavemente con los botones de flecha o deslizando el dedo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: itemCount, accentColor, currency, showRatings ### Exposure dial slider https://fieldbook.lizardi.mx/es/components/exposure-dial-slider Una vista previa de la foto con una lectura de exposición circular en su esquina encima de una regla de marcas que se puede arrastrar y que establece el valor de exposición en EV. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: exposure, accentColor, tone ### Extruded layer text https://fieldbook.lizardi.mx/es/components/extruded-layer-text Una palabra representa tantas capas de colores apiladas detrás de su cara, formando un bloque 3D extruido que se inclina hacia el puntero y se desplaza cuando está inactivo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, depth, tilt, faceColor, depthColor ### Extruded tilt button https://fieldbook.lizardi.mx/es/components/extruded-tilt-button Un botón de pantalla pesado inclinado en perspectiva cuyas letras huecas son extruidas por dos desplazamientos duros que giran los lados cuando la placa se balancea al flotar y se aplana cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, tiltDegrees, extrusion, sweep ### Fading edge scroll panel https://fieldbook.lizardi.mx/es/components/fading-edge-scroll-panel Un panel de desplazamiento que oculta la barra nativa, hace flotar un pulgar delgado solo mientras lo estás usando y desvanece el contenido en cualquier borde que aún tenga más por alcanzar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: panelHeight, itemCount, fadeEdges, alwaysShowBar, thumbColor ### Fanned wave threads https://fieldbook.lizardi.mx/es/components/fanned-wave-threads Un haz de hilos finos fijados con alfileres en el borde izquierdo, desplegados en abanico hacia la derecha y ondeando en un campo de ruido lento. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: color, amplitude, spread, lineCount, speed, interactive ### Fanning event markers https://fieldbook.lizardi.mx/es/components/fanning-event-markers Insignias de eventos redondas fijadas sobre una trama con líneas guía; los agrupados se apilan en una insignia contada que los fanáticos abren al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, size, markers, maxFanned, showLines ### Fanning Spec Stack https://fieldbook.lizardi.mx/es/components/fanning-spec-stack Una pila inclinada de tarjetas de productos que se extiende en un abanico a pedido, y cada tarjeta se coloca en su lugar un ritmo después de la anterior. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: count, spread, tilt, accent ### FAQ Accordion https://fieldbook.lizardi.mx/es/components/faq-accordion-panels Una lista vertical de encabezados de preguntas donde al abrir un panel se desliza su respuesta a la vista y se cierra el panel que estaba abierto antes. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: defaultOpen, accentColor, transitionMs, dividers ### Field with status icon https://fieldbook.lizardi.mx/es/components/field-with-status-icon Una entrada etiquetada cuyo borde posterior muestra un pequeño ícono de verificación o advertencia que se desvanece en el momento en que cambia la validez del campo, sin cambiar el diseño. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, value, state, required ### File attachment chip https://fieldbook.lizardi.mx/es/components/file-attachment-chip Una tarjeta compacta para un archivo adjunto que muestra un icono de tipo o miniatura, su nombre y tamaño, y un estado de carga, procesamiento, error o finalización. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: state, orientation, accent ### Fill progress loading text https://fieldbook.lizardi.mx/es/components/fill-progress-loading-text Una etiqueta de carga se asienta como un tenue contorno de sí misma, mientras que una copia de color sólido la completa desde la izquierda como una barra de progreso con la forma de la palabra, deslizándose hacia adelante y hacia atrás mientras se realiza el trabajo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, accent, cycleSeconds, baseOpacity ### Fill sweep loading text https://fieldbook.lizardi.mx/es/components/fill-sweep-loading-text Una etiqueta de carga cuyo contorno tenue se encuentra debajo de una copia completamente coloreada que avanza desde la izquierda, alcanza todo su ancho y desaparece, repitiéndose mientras algo se carga. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, cycleSeconds ### Film grain overlay https://fieldbook.lizardi.mx/es/components/film-grain-overlay Una capa de grano fractal generada que se asienta sobre cualquier panel, adaptada desde polvo fino hasta dientes gruesos sin cargar una sola imagen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: grain, detail, contrast, opacity, animate ### Filterable action list https://fieldbook.lizardi.mx/es/components/filterable-action-list Un cuadro de búsqueda combinado con una lista filtrada en vivo de acciones agrupadas bajo etiquetas, resaltando la primera coincidencia y mostrando un estado vacío cuando nada se ajusta a la consulta. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: placeholder, accentColor, itemCount ### Filterable record table https://fieldbook.lizardi.mx/es/components/filterable-record-table Una tabla de registros con un filtro de texto en vivo, píldoras de estado de colores y una columna de moneda alineada a la derecha que permanece legible mientras se ordena. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, sortable, showFilter, density ### Filtered suggestion field https://fieldbook.lizardi.mx/es/components/filtered-suggestion-field Un campo de texto que filtra una lista de sugerencias a medida que escribe y muestra las coincidencias en un menú desplegable a continuación, con navegación por teclado y un botón para borrar. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, accentColor, maxVisible ### Firework burst canvas https://fieldbook.lizardi.mx/es/components/firework-burst-canvas Los proyectiles se lanzan desde el borde inferior, forman un arco hacia arriba dejando un rastro y luego estallan en chispas que caen bajo la gravedad. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: density, accent, sparkCount, shellSpeed, gravity ### Flaming iris eye https://fieldbook.lizardi.mx/es/components/flaming-iris-eye Un iris ardiente de filamentos radiantes alrededor de una pupila con hendidura estrecha que gira para mantener el cursor a la vista. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, pupilSize, irisWidth, flameSpeed, glow, followStrength ### Flat to flow button https://fieldbook.lizardi.mx/es/components/flat-to-flow-button Un botón plano y sólido que cambia a una banda ancha de dos tonos que se desplaza sin cesar por su cara mientras está suspendido o enfocado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, cycleSeconds, bandWidth, reverse, radius ### Flickering glyph grid https://fieldbook.lizardi.mx/es/components/flickering-glyph-grid Una densa cuadrícula de caracteres monoespaciados donde un puñado aleatorio intercambia letras y colores en cada tick, cambiando de tono a medida que avanza. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, baseColor, glitchSpeed, smooth, vignette, characters ### Flickering square mesh https://fieldbook.lizardi.mx/es/components/flickering-square-mesh Una malla de lienzo de pequeños cuadrados donde células aleatorias saltan a un nuevo brillo en cada fotograma, dando una estática inquieta que nunca se repite. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: squareSize, gap, flickerChance, maxOpacity, accentColor ### Flight path confirm button https://fieldbook.lizardi.mx/es/components/flight-path-confirm-button Un botón de reserva que hace volar un avión pequeño en una vuelta alrededor de su frente mientras tres puntos pulsan, luego se vuelve verde e informa la reserva confirmada. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, doneLabel, accent, successColor, duration ### Flip face button https://fieldbook.lizardi.mx/es/components/flip-face-button Un botón con dos caras que intercambia una por la otra en un giro tridimensional, invirtiendo su posición cuando el puntero sale. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: axis, duration, accentColor, frontLabel, backLabel ### Flip panel headline reveal https://fieldbook.lizardi.mx/es/components/flip-panel-headline-reveal Un titular cuyos personajes se encuentran detrás de pequeños paneles con bisagras que se abren uno tras otro, como un tablero de llegadas, para revelar las letras que hay debajo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, staggerMs, flipMs, accent ### Flip reveal card https://fieldbook.lizardi.mx/es/components/flip-reveal-card Una tarjeta de rumbo alta que se gira al pasar el cursor para mostrar su lista de detalles, con el halo del frente pulsando mientras descansa. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: title, flipOnHover, duration, accent ### Flip Side Hint Tooltip https://fieldbook.lizardi.mx/es/components/flip-side-hint-tooltip Una burbuja de sugerencia que aparece al pasar el mouse o al foco del teclado y que se voltea automáticamente hacia cualquier lado la mantiene completamente visible cerca del borde de la pantalla. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: side, openDelay, accentColor ### Floating download pill https://fieldbook.lizardi.mx/es/components/floating-download-pill Una pastilla completamente redondeada que parece flotar sobre la página y se acerca a ella cuando pasas el cursor y presionas. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, lift, showGlyph ### Floating label input https://fieldbook.lizardi.mx/es/components/floating-label-input Un campo de texto cuya etiqueta descansa dentro del cuadro y se eleva hasta el borde superior cuando está enfocado o una vez que el campo tiene un valor, con apariencia enfocada, válida e inválida. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, invalid, accent ### Floating text trail https://fieldbook.lizardi.mx/es/components/floating-text-trail Un panel oscuro donde, al mover el puntero, se caen copias flotantes de una palabra a lo largo del recorrido, cada una de las cuales se balancea brevemente antes de desvanecerse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, spacing, followDirection, drift, maxTrail ### Flow Area Chart https://fieldbook.lizardi.mx/es/components/flow-area-chart Un gráfico de áreas de serie temporal con un relleno degradado que se dibuja a sí mismo al cargar y muestra una cruz con información sobre herramientas de valor al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, pointCount, showGrid, animationSeconds ### Flow Sankey Diagram https://fieldbook.lizardi.mx/es/components/flow-sankey-diagram Un diagrama de flujo de nodo y cinta donde el espesor de la cinta muestra el volumen que se mueve entre etapas, atrayendo con un trazado trazado y resaltando caminos conectados al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: nodeWidth, nodePadding, showLabels, useGradientLinks, accent ### Flowing gradient headline https://fieldbook.lizardi.mx/es/components/flowing-gradient-headline Un titular cuyas letras están rellenas con un degradado en movimiento de dos tonos, de modo que una banda brillante se desplaza sin cesar a través de las palabras, con un suave florecimiento opcional detrás. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, accent, speed, fontSize, bloom ### Flowing gradient text https://fieldbook.lizardi.mx/es/components/flowing-gradient-text Un degradado multicolor recorre continuamente el relleno de un título, opcionalmente enmarcado por una pastilla de borde degradado a juego. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, speed, showBorder, colorFrom, colorTo ### Flowing line currents https://fieldbook.lizardi.mx/es/components/flowing-line-currents Docenas de trazos largos y curvos recorren diagonalmente el marco en tres bandas de profundidad, trenzándose y balanceándose como una corriente lenta. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: lineCount, accent, amplitude, speed, headline ### Fluid Splash https://fieldbook.lizardi.mx/es/components/fluid-splash-cursor Arrastrar por el panel empuja la tinta a través de una simulación fluida, por lo que el color ondea, se curva y se disipa lentamente detrás del puntero. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, splatRadius, splatForce, dyeFade, curl, shading ### Flying send button https://fieldbook.lizardi.mx/es/components/flying-send-button Un botón de envío cuyo glifo de avión de papel se inclina, se balancea y vuela por la cara mientras la etiqueta se desliza detrás de ella. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tilt, bob ### Flyout Menu Highlight https://fieldbook.lizardi.mx/es/components/flyout-menu-highlight Un menú desplegable cuyos elementos se encuentran debajo de un cuadro resaltado que se desliza de una fila enfocada o suspendida a la siguiente, con un submenú anidado que sale volando hacia un lado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: triggerLabel, side, accent ### Focus Guard Form https://fieldbook.lizardi.mx/es/components/focus-guard-form Un formulario que, en caso de un envío fallido, cancela el envío, mueve el foco del teclado directamente al primer campo no válido y anuncia el problema a los usuarios de lectores de pantalla. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: submitLabel, accentColor, requireAll ### Focus halo button https://fieldbook.lizardi.mx/es/components/focus-halo-button Un botón sólido que se invierte en un contorno al pasar el puntero y crece en dos anillos translúcidos apilados en el momento en que se enfoca el teclado. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, radius, ringWidth, invert ### Focus in reveal https://fieldbook.lizardi.mx/es/components/focus-in-reveal Una revelación que desenfoca el contenido y le permite enfocarlo cuando entra a la vista, con un retraso opcional por elemento para una pila de filas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: startBlur, endBlur, delay, stagger, accent ### Focus Lens https://fieldbook.lizardi.mx/es/components/focus-lens-outline Una forma delineada que permanece suave y desenfocada en todas partes excepto en un pequeño círculo que sigue al puntero, donde se recorta. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: shape, lensSize, lensSoftness, strokeWeight, accent ### Focus ring text input https://fieldbook.lizardi.mx/es/components/focus-ring-text-input Un campo de texto de una sola línea con un marcador de posición silenciado y un anillo de acento sólido que aparece solo cuando está enfocado. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, accentColor, disabled ### Focus scroll list https://fieldbook.lizardi.mx/es/components/focus-scroll-list Una cola desplazable cuyas filas aparecen en tamaño completo y opacity cuando llegan al centro de la vista, con selección de teclado y desplazamiento. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: itemCount, showGradients, enableArrowNavigation, accentColor ### Focus-Trapped Modal Kit https://fieldbook.lizardi.mx/es/components/focus-trapped-modal-kit Una base modal básica cuyo objetivo principal es el comportamiento disciplinado del teclado: atrapa el enfoque mientras está abierto y lo restaura precisamente al cerrar, envuelto en una entrada inclinable. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: from, trapFocus, accent, label ### Foil frame button https://fieldbook.lizardi.mx/es/components/foil-frame-button Un botón de actualización construido como una placa oscura dentro de un marco metálico delgado, donde el brillo diagonal del marco se desliza hacia la esquina opuesta al pasar el mouse mientras la placa se eleva, se ilumina y gana una sombra teñida acentuada. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, showGlyph, frameWidth, hoverScale ### Follow count swipe https://fieldbook.lizardi.mx/es/components/follow-count-swipe-button Una tableta de seguimiento delineada cuya insignia decorativa redonda se desliza hacia el otro extremo al pasar el mouse, dibujando una banda que revela el recuento de seguidores; al hacer clic se confirma el seguimiento con un sello y se aumenta el conteo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, followedLabel, count, accent, slideMs ### Follow latch chip https://fieldbook.lizardi.mx/es/components/follow-latch-chip Un chip de seguimiento que obtiene una vista previa de su estado de llenado al pasar el cursor y se bloquea allí al hacer clic, cambiando a un mensaje para dejar de seguir con un tono de advertencia cuando se vuelve a colocar el cursor sobre él. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, warning, label, following, duration ### Forecast tail line https://fieldbook.lizardi.mx/es/components/forecast-tail-line Una continuación discontinua que lleva una serie más allá de su último punto real hasta un horizonte, alargándose y aterrizando en un marcador hueco. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, horizon, curveKind, dashed, fadeOut, showEndMarker ### Control Bench https://fieldbook.lizardi.mx/es/components/form-control-bench Un banco de páginas de piezas de formulario que funcionan una al lado de la otra: un conjunto de campos de pago, complementos de entrada en línea, un compositor de avisos, botones agrupados y un estado vacío silencioso. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, columns, density, showComposer, showEmptyState ### Format toggle button https://fieldbook.lizardi.mx/es/components/format-toggle-button Un botón de icono que mantiene un estado de encendido o apagado y que, al presionarlo, difumina una placa redondeada detrás de su glifo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: variant, size, accent, startPressed, showCaption ### Four edge wipe icon button https://fieldbook.lizardi.mx/es/components/four-edge-wipe-icon-button Un botón de icono cuadrado cuyo glifo se reduce mientras cuatro paneles inclinados se deslizan desde cada borde e inundan el mosaico con un color de acento. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, glyph, size, duration, borderWidth ### Frame draw button https://fieldbook.lizardi.mx/es/components/frame-draw-button Un botón lleno que drena su relleno al pasar el mouse mientras cuatro barras delgadas salen corriendo desde esquinas opuestas para dibujar un cuadro completo, luego todo regresa al salir. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, barWidth, speed, radius ### Friendly Date Range Picker https://fieldbook.lizardi.mx/es/components/friendly-date-range-picker Un botón de píldora que lee un intervalo de fechas en inglés simple y abre un calendario desplegable para elegir un día de inicio y fin juntos. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, rangeText ### Funnel vortex backdrop https://fieldbook.lizardi.mx/es/components/funnel-vortex-backdrop Un embudo de estructura metálica de anillos que se encogen y radios radiales que se vierten en una garganta iluminada, con motas que vuelven a salir. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rings, spokes, accent, meshColor, specks ### Fusing blob fill button https://fieldbook.lizardi.mx/es/components/fusing-blob-fill-button Un botón de contorno grueso que se llena al flotar mientras las gotas de líquido se elevan desde abajo y se fusionan en una superficie tambaleante. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, blobCount, mergeStrength, riseSeconds ### Future-Only Date Picker https://fieldbook.lizardi.mx/es/components/future-only-date-picker Un selector de fecha única donde todos los días anteriores a un límite fijo aparecen atenuados y no se puede hacer clic, por lo que solo se puede seleccionar esa fecha o una posterior. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, cutoffDay, startMonth, startYear ### Fuzzy static text https://fieldbook.lizardi.mx/es/components/fuzzy-static-text Una palabra dibujada en un lienzo y repintada en líneas de escaneo temblorosas, zumbando como estática de televisión y distorsionándose más al pasar el mouse o presionar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, baseIntensity, hoverIntensity, color ### Gap stretch arrow button https://fieldbook.lizardi.mx/es/components/gap-stretch-arrow-button Una pastilla de ancho fijo cuya flecha se desplaza hasta el borde más alejado al pasar el mouse, ampliando el espacio después de una etiqueta estacionaria, con una copia tenue del rastro siguiendo un ritmo detrás. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, width, travel, trail ### Ghost echo lift button https://fieldbook.lizardi.mx/es/components/ghost-echo-lift-button Una píldora que se eleva al flotar mientras una copia fantasma de sí misma se hincha detrás de ella y se disuelve. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, liftDistance, echoScale, echoSeconds ### Git status file tree https://fieldbook.lizardi.mx/es/components/git-status-file-tree Una carpeta anidada y un explorador de archivos donde cada archivo modificado lleva una letra de estado de git de color y las carpetas cambian la forma del icono cuando se abren. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rowHeight, showStatusColors, expandFirstFolder, accent ### Glare Pass Text https://fieldbook.lizardi.mx/es/components/glare-pass-text Texto de etiqueta apagado que periódicamente capta una estrecha banda de luz que se desliza a través de ella, como un resplandor que se refleja en el vidrio, y luego se silencia antes de repetirse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, shimmerWidth, showIcon ### Glass Block Bars https://fieldbook.lizardi.mx/es/components/glass-block-bars Un gráfico de barras representado como bloques de vidrio 3D brillantes con caras laterales y superiores en perspectiva, y un lento barrido de luz pulsando hacia arriba en la barra más alta. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, barCount, activeIndex, pulseEnabled ### Glass tube element tile https://fieldbook.lizardi.mx/es/components/glass-tube-element-tile Un mosaico cuadrado seleccionable enmarcado como un tubo de vidrio iluminado, con un símbolo de elemento en su interior que se ilumina al pasar el cursor y se engancha cuando se selecciona. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: symbol, name, number, accent, glow, lit ### Glide highlight explorer https://fieldbook.lizardi.mx/es/components/glide-highlight-explorer Un árbol de carpetas y archivos donde una única barra resaltada brillante se desliza de fila en fila al pasar el mouse o enfocar en lugar de que cada fila se ilumine por sí sola. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: highlightColor, rowHeight, defaultExpandedDepth, showStatusDots ### Glide swap button https://fieldbook.lizardi.mx/es/components/glide-swap-button Un botón de ancho fijo que desliza su etiqueta por el borde derecho mientras el glifo se desliza hacia el centro, todo ello asentado sobre una repisa de color duro sobre la que cae el botón cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, glyph, width, ledge ### Glitch slice button https://fieldbook.lizardi.mx/es/components/glitch-slice-button Un botón fantasma cuya etiqueta se rompe en rodajas horizontales que se separan con franjas de colores divididas mientras un marco delgado se ilumina a su alrededor. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, runMs, slices, autoPlay ### Edge light pill https://fieldbook.lizardi.mx/es/components/glossy-edge-light-pill Una pastilla brillante iluminada por una barra borrosa a lo largo de su borde superior y una flor debajo de su pie que se hincha y brilla al flotar. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, glow, radius, paddingX, topLight ### Glow halo button https://fieldbook.lizardi.mx/es/components/glow-halo-button Un botón de pastilla con un duplicado de sí mismo difuminado detrás de él, por lo que al flotar florece un halo de color suave mientras el relleno se desplaza lentamente. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, companion, glow, driftSeconds ### Glyph Marker Line https://fieldbook.lizardi.mx/es/components/glyph-marker-line Una línea de tendencia mensual cuyos puntos de datos son glifos dibujados en lugar de puntos simples, cada uno de ellos perforado fuera de la línea para que el trazo parezca pasar detrás de él. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, markerSize, strokeWidth, showGrid, showAxis ### Glyph Static Backdrop https://fieldbook.lizardi.mx/es/components/glyph-static-backdrop Un lienzo lleno de pequeños símbolos monoespaciales parpadea silenciosamente, un puñado muta a un nuevo glifo aleatorio en cada tic, desvaneciéndose hacia el borde inferior para ubicarse detrás del contenido en primer plano. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cellSize, mutationRate, fadeBottom, accentColor ### Gooey blob field https://fieldbook.lizardi.mx/es/components/gooey-blob-field Un campo de manchas suaves que orbitan caminos sembrados y se funden entre sí al acercarse, con una mancha adicional que sigue al puntero. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: ballCount, speed, spread, accent, pointerColor, followPointer ### Gooey blob trail https://fieldbook.lizardi.mx/es/components/gooey-blob-trail Una cadena de formas persigue el puntero y se funde en una masa líquida que se estira con el movimiento y se acumula cuando se detiene. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: trailCount, size, lag, shape, merge, fillColor ### Gooey Particle Nav https://fieldbook.lizardi.mx/es/components/gooey-particle-nav Una lista de navegación horizontal donde al seleccionar un elemento se transforma una pastilla viscosa borrosa en la nueva posición mientras una ráfaga de pequeñas partículas se dispersa hacia afuera. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: itemCount, particleCount, animationTime ### Gradient Area Chart https://fieldbook.lizardi.mx/es/components/gradient-fill-area-chart Dos series mensuales apiladas dibujadas como áreas suaves cuyos rellenos se desvanecen desde un tinte fuerte en el borde superior hasta casi aclararse en la línea de base. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, secondColor, gradientStrength, showGrid, animate ### Gradient flip uppercase button https://fieldbook.lizardi.mx/es/components/gradient-flip-uppercase-button Un botón en mayúscula lleno de una rampa diagonal de dos tonos que cambia de extremo a extremo al pasar el mouse, llevándose consigo su sombra teñida. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tint, angle, shadow ### Gradient Rim Button https://fieldbook.lizardi.mx/es/components/gradient-rim-button Un botón construido como dos capas apiladas, de modo que un borde sombreado de dos píxeles enmarca una cara ligeramente más oscura, con un glifo de gamepad. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, rim, restOpacity ### Ring reveal button https://fieldbook.lizardi.mx/es/components/gradient-ring-reveal-button Una pastilla de gran tamaño con un borde anular degradado grueso cuya cara interior oscura se aclara al pasar el cursor para exponer el lavado de color completo y luego se desvanece cuando el puntero se aleja. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, ringWidth, paddingY, revealOnHover ### Gradient shift text https://fieldbook.lizardi.mx/es/components/gradient-shift-text Una pastilla redondeada cuyo texto está relleno con un degradado de dos colores que recorre continuamente las letras de lado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, speed, colorFrom, colorTo ### Gradient slat spotlight https://fieldbook.lizardi.mx/es/components/gradient-slat-spotlight Las lamas verticales ocultan un degradado de color hasta que un foco suave sigue el puntero a través de ellas e ilumina cada lama que toca. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, blindCount, spotlightRadius, softness, angle, grain ### Gradient swap button https://fieldbook.lizardi.mx/es/components/gradient-swap-button Un botón redondeado cuyo sombreado diagonal cambia sus dos paradas al pasar el mouse, de modo que la esquina luminosa recorre la cara. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, angle, radius ### Gradient sweep heading https://fieldbook.lizardi.mx/es/components/gradient-sweep-heading Un título grande cuyo relleno es una banda de degradado en movimiento que se desplaza continuamente de un borde al otro, dando al texto un brillo brillante y en constante cambio. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: headline, speed, accentColor ### Gradient tilt pill https://fieldbook.lizardi.mx/es/components/gradient-tilt-pill Una pastilla completamente redondeada cuyo relleno degradado de dos tonos oscila su ángulo al pasar el cursor y se inclina hacia la sombra más oscura mientras se presiona. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tiltDegrees, size ### Grain Flicker https://fieldbook.lizardi.mx/es/components/grain-flicker-layer Una capa de grano que se vuelve a dibujar cada pocos fotogramas, por lo que los fondos planos obtienen el parpadeo inquieto de un proyector en funcionamiento en lugar de una textura fija. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: opacity, grainScale, refreshInterval, animate ### Grain wash https://fieldbook.lizardi.mx/es/components/grain-wash Dos grupos de colores se funden entre sí a lo largo del encuadre mientras una deformación lenta mantiene el borde en movimiento, todo bajo un grano de película pesado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: colorA, colorB, speed, warp, grain, followPointer ### Grained rim button https://fieldbook.lizardi.mx/es/components/grained-rim-button Un botón oscuro mecanizado con un borde de metal cepillado, una cara ligeramente granulada y una marca de reproducción hueca que se profundiza al pasar el mouse y enfocar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, grain, rim ### Graph paper grid https://fieldbook.lizardi.mx/es/components/graph-paper-grid Una cuadrícula repetitiva de líneas finas que se extienden a lo largo de su contenedor, desvaneciéndose hacia los bordes, con un pequeño grupo de células que se iluminan con un color de acento y se escurren nuevamente. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cellSize, lineOpacity, dashed, highlightCount, accentColor ### Graphite Slab CTA https://fieldbook.lizardi.mx/es/components/graphite-slab-cta Un botón de losa oscura de ancho fijo con una sutil rampa de grafito que se levanta al pasar el mouse y lleva una delgada regla decorativa a lo largo de su borde inferior. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, width, lift, radius, showRule ### Gravity dust field https://fieldbook.lizardi.mx/es/components/gravity-dust-field Un campo lento de motas de polvo brillantes que se inclinan hacia o alejándose del puntero y brillan más a medida que se acercan. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, accent, influenceRadius, mode, speed, collide ### Greeting Cycle https://fieldbook.lizardi.mx/es/components/greeting-cycle-text Un breve saludo al lado de un punto marcador recorre una vez los saludos en diferentes idiomas, deslizando cada uno hacia su lugar mientras el último se aleja. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: intervalMs, accentColor, autoplay ### Gridline area chart https://fieldbook.lizardi.mx/es/components/gridline-area-chart Un gráfico de áreas enmarcado en una tarjeta con dos capas rellenas superpuestas, ejes redondeados, una línea de cuadrícula tenue y una línea de pie de página que indica la tendencia. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: trendPercent, trendDirection, primaryColor, secondaryColor, showGrid ### Grounded download pill https://fieldbook.lizardi.mx/es/components/grounded-download-pill Un botón de descarga completamente redondeado con una sombra teñida que se aprieta al presionarlo mientras su flecha desciende y retrocede. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, shadowSpread, pressScale, showIcon ### Grouped backdrop popover https://fieldbook.lizardi.mx/es/components/grouped-backdrop-popover Un disparador de ventana emergente que se abre cerca de su ancla con un fondo atenuado opcional y cierra cualquier ventana emergente hermana en su grupo tan pronto como se abre. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: anchor, showBackdrop, gap, accent ### Grouped Code Boxes https://fieldbook.lizardi.mx/es/components/grouped-code-boxes Un campo de código de un solo uso de dígitos en cuadros individuales divididos en dos grupos mediante un divisor central delgado, con un símbolo de intercalación parpadeante marcando el cuadro en espera de entrada. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: length, groupSize, accentColor, caption ### Grouped filter popover https://fieldbook.lizardi.mx/es/components/grouped-filter-popover Una fila de pequeños botones de filtro donde al abrir el panel de un botón se cierra automáticamente cualquier otro panel que ya esté abierto en la misma fila, cada panel crece desde cualquier borde desde el que se activó. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, filterCount, closeOnSelect ### Grouped icon toolbar https://fieldbook.lizardi.mx/es/components/grouped-icon-toolbar Una barra de herramientas horizontal compacta que agrupa los botones de íconos en grupos divididos por separadores delgados, para acciones rápidas de estilo de formato. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, groupCount ### Grouped magnify dock https://fieldbook.lizardi.mx/es/components/grouped-magnify-dock Una base inferior de botones de iconos redondos se divide en dos grupos que crecen cuanto más se acerca el puntero a cada uno. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: magnification, distance, iconSize, accent ### Grouped Section Fieldset https://fieldbook.lizardi.mx/es/components/grouped-section-fieldset Un grupo titulado de campos relacionados bajo una leyenda y una regla delgada, con un único interruptor en la parte superior que atenúa y desactiva todo el grupo a la vez. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: legend, groupEnabled, accentColor ### Grouped select menu https://fieldbook.lizardi.mx/es/components/grouped-select-menu Una selección desplegable cuyas opciones se agrupan bajo encabezados de sección, con franjas de flechas en los bordes que se desplazan automáticamente por largas listas. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, accent ### Grouped settings dropdown https://fieldbook.lizardi.mx/es/components/grouped-settings-dropdown Un menú desplegable activado por botón con secciones etiquetadas, un submenú anidado y un grupo de radio para elegir uno de varios valores de configuración. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: triggerLabel, align, accent ### Grow bar chart https://fieldbook.lizardi.mx/es/components/grow-bar-chart Un gráfico de barras que aumenta sus columnas desde la línea base cuando se carga, cambia entre diseño vertical y horizontal y resalta una barra a la vez al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: orientation, accentColor, barCount, showGrid ### Growing back arrow https://fieldbook.lizardi.mx/es/components/growing-back-arrow Un control trasero de flecha izquierda desnudo que crece y estira su eje al flotar, luego se detiene cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, size, hoverScale, shaftStretch, tooltip ### Growing ledge button https://fieldbook.lizardi.mx/es/components/growing-ledge-button Un botón de acento sólido que descansa sobre un borde inferior más oscuro que se espesa y se levanta al flotar, luego se adelgaza y se hunde al presionarlo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, ledge, hoverLedge, radius ### Growing Pill Backdrop https://fieldbook.lizardi.mx/es/components/growing-pill-backdrop-button Una etiqueta desnuda con un disco tintado escondido detrás de sus primeras letras que crece hasta convertirse en una pastilla completa al pasar el cursor mientras la flecha se desliza hacia su lugar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, showArrow, discSize, duration ### Guide steps accordion https://fieldbook.lizardi.mx/es/components/guide-steps-accordion Un acordeón numerado de escalones guía cuyos paneles pueden permanecer montados mientras están plegados, por lo que un temporizador en funcionamiento dentro de uno sigue contando el cierre y la reapertura. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: keepMounted, accentColor, transitionMs, showStepNumbers ### Hairline section divider https://fieldbook.lizardi.mx/es/components/hairline-divider Una regla delgada que cierra un título y una descripción, luego divide una fila de etiquetas simples debajo en segmentos separados. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: style, thickness, spacing, accentColor ### Hairline lift pill https://fieldbook.lizardi.mx/es/components/hairline-lift-ghost-pill Una pastilla silenciosa y translúcida con un borde interior fino que se levanta de la superficie y adquiere un tinte acentuado al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lift, restOpacity, showIcon ### Hairline Note Card https://fieldbook.lizardi.mx/es/components/hairline-note-card Una tranquila tarjeta de notas en tonos papel con un borde fino, un pequeño encabezado opcional y una sola ranura en el cuerpo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: title, showTitle, compact, borderColor ### Hairline Tone Badge https://fieldbook.lizardi.mx/es/components/hairline-tone-badge Una etiqueta de pastilla sin llenar cuyo borde y texto comparten un color, por lo que una fila de ellos se lee como una leyenda impresa. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tone, accent, label, showDot, size ### Hairline trace submit https://fieldbook.lizardi.mx/es/components/hairline-trace-submit Un botón de envío oscuro cuya línea de un píxel se ilumina, recorre el perímetro desde el borde en el que ingresó el puntero y luego retrocede de la misma manera. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, traceMs, radius, retrace ### Hairline utility button https://fieldbook.lizardi.mx/es/components/hairline-utility-button Un botón de acción neutral y silencioso que responde al desplazamiento con una elevación de un píxel, una línea de cabello más oscura y una sombra suave, y luego vuelve a hundirse cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, radius, lift, shadow ### Halftone print loupe https://fieldbook.lizardi.mx/es/components/halftone-print-loupe Una imagen representada como una pantalla de puntos de tinta impresos, con una lupa redonda debajo del puntero donde los puntos se disuelven nuevamente en el original suave. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: density, angle, shape, revealRadius, duotone, inkColor ### Halftone ripple field https://fieldbook.lizardi.mx/es/components/halftone-ripple-field Un campo de pequeños mosaicos que se encienden y apagan con un patrón de ruido a la deriva, y cada clic envía un anillo de mosaicos iluminados hacia afuera. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, shape, pixelSize, density, speed, ripples ### Halftone wave field https://fieldbook.lizardi.mx/es/components/halftone-wave-field Una lenta nube de turbulencia aplanada en un puñado de tonos e impresa como una cuadrícula de puntos, de modo que se lee como una fotografía de periódico que no se detiene. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, pixelSize, levels, waveScale, speed, pointerSwell ### Halo glow button https://fieldbook.lizardi.mx/es/components/halo-glow-button Una pastilla oscura cuyo halo de acento borroso se desvanece al flotar y viaja alrededor del borde mientras un delgado anillo interior se ilumina. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, spread, travelSeconds, alwaysOn ### Halo ring https://fieldbook.lizardi.mx/es/components/halo-ring Un anillo brillante cuyo borde se tambalea en un campo de ruido a la deriva mientras una perla caliente recorre el borde interior. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, hue, hoverStrength, ringRadius, spin ### Halo ring button https://fieldbook.lizardi.mx/es/components/halo-ring-button Un botón delineado que lanza un único anillo hacia afuera cuando lo pasas por encima, la banda se expande más allá del borde y se adelgaza hasta quedar en nada a medida que avanza. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, spread, duration, radius ### Hand-drawn text marker https://fieldbook.lizardi.mx/es/components/hand-drawn-text-marker Envuelve un tramo de texto con una anotación de marcador dibujada a mano, como un lavado de resaltado, un subrayado, un círculo o un cuadro, que se dibuja a sí mismo con un trazo esbozado ligeramente imperfecto. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: action, color, animateOnView, strokeWidth ### Handoff link button https://fieldbook.lizardi.mx/es/components/handoff-link-button Un pequeño botón de alto contraste que transfiere el elemento actual a otra herramienta en una nueva pestaña, mostrando una marca de destino y una pista de que el enlace sale de la página. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, itemName, accent, inverted, showExternalHint ### Hard edge key button https://fieldbook.lizardi.mx/es/components/hard-edge-key-button Una tecla compacta estilo hardware que voltea las luces, el contorno y la sombra hacia adentro en el momento en que la presionas. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, radius, speed ### Hard Shadow Button https://fieldbook.lizardi.mx/es/components/hard-shadow-button Un botón de contorno grueso que levanta su sólida sombra desplazada al pasar el mouse y vuelve a presionarla al hacer clic. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, borderWidth, offset ### Hard shadow store badge https://fieldbook.lizardi.mx/es/components/hard-shadow-store-badge Una insignia de tienda cuadrada colocada sobre una sombra sólida y desplazada que se acerca al flotar, barre una banda de luz sobre sí misma y se queda plana cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, kicker, label, offset, sweep ### Hatch sweep button https://fieldbook.lizardi.mx/es/components/hatch-sweep-button Un fino sombreado diagonal se desvanece sobre el botón al pasar el mouse y se desplaza para siempre, invirtiendo la etiqueta dondequiera que una línea la cruce. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, angle, speed, density ### Heartbeat like button https://fieldbook.lizardi.mx/es/components/heartbeat-like-button Un botón redondo cuyo corazón crece al flotar con un latido constante; al hacer clic en los pestillos que le gustaron y marca la cuenta al lado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, beat, count, startLiked ### Height Morph Accordion https://fieldbook.lizardi.mx/es/components/height-morph-accordion Una lista de preguntas cuyos paneles de respuestas crecen y se reducen a su altura natural con un resorte, empujando las filas debajo de ellos. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, allowMultiple, duration, showRules ### Hero signal https://fieldbook.lizardi.mx/es/components/hero-signal Un héroe de aterrizaje completo cuyo titular llega palabra a palabra sobre delgadas líneas verticales que se desplazan y transmiten breves señales luminosas hacia arriba. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: headline, accent ### Hex cell grid https://fieldbook.lizardi.mx/es/components/hex-cell-grid Un panal de celdas hexagonales recortadas que se iluminan bajo el puntero y se enfrían nuevamente, dejando un rastro que se desvanece. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cellSize, seam, accent, coolMs ### Highlight focus swap https://fieldbook.lizardi.mx/es/components/highlight-focus-swap Las palabras de una oración se turnan para ser nítidas mientras que el resto se vuelve borrosa, con un marco de soporte de esquina brillante que se desliza hacia el cuadro de la palabra que está enfocada. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: sentence, accentColor, blurAmount, manualMode, intervalMs ### Highlight trail chart https://fieldbook.lizardi.mx/es/components/highlight-trail-chart Un gráfico de tendencia de varias líneas en el que al pasar el cursor se ilumina un breve segmento final de una serie, mientras que el resto y las otras líneas se atenúan. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: seriesCount, primaryColor, showMarkers, forecastTail ### Highlighted bar chart https://fieldbook.lizardi.mx/es/components/highlighted-bar-chart Un gráfico de barras de categorías donde una barra se destaca con un contorno discontinuo y un relleno más claro, y la leyenda sigue a la barra a la que apunte. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, activeIndex, barRadius, showValues, animate ### Hinged plate button https://fieldbook.lizardi.mx/es/components/hinged-plate-button Dos placas de identificación idénticas se colocan exactamente una encima de la otra y se separan al flotar, como un par de puertas que giran en perspectiva. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tilt, depth, duration ### Hinged progress button https://fieldbook.lizardi.mx/es/components/hinged-progress-button Un botón cuya cara gira hacia atrás al pasar el mouse, exponiendo una bandeja donde una barra de progreso llena ráfagas desiguales y se desvanece en todo su ancho. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, tilt, barDuration, depth ### Hold ring confirm https://fieldbook.lizardi.mx/es/components/hold-ring-confirm-button Un botón redondo rodeado por un trazo que se dibuja a sí mismo mientras lo mantienes presionado, ingresando un valor de progreso en el anillo, la escala del botón y el color de la etiqueta a la vez. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, holdMs, accent, ringWidth, showPercent ### Hold to delete https://fieldbook.lizardi.mx/es/components/hold-to-delete-button Un botón destructivo que solo se activa después de mantener presionado el puntero el tiempo suficiente para que una barra de relleno lo recorra y rebobina en el momento en que lo sueltas. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, holdMs, accent, showCountdown, glyph ### Hold to fill pad https://fieldbook.lizardi.mx/es/components/hold-to-fill-pad-button Una almohadilla translúcida que se llena hacia arriba desde su base mientras se sostiene, luego se compromete y muestra su borde cuando el relleno llega a la parte superior. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, borderTint, label, holdSeconds, sink ### Holographic ID card https://fieldbook.lizardi.mx/es/components/holographic-id-card Una tarjeta de persona que se inclina hacia el puntero mientras un brillo holográfico se desliza por su cara, con una tira de pie de página que muestra el avatar, el identificador, el estado y un botón de contacto. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: name, role, tilt, accent, showFooter ### Honeycomb lattice https://fieldbook.lizardi.mx/es/components/honeycomb-lattice Un panal de hexágonos delineados que forman mosaicos en un contenedor, con bordes compartidos dibujados solo una vez para que cada costura permanezca como una sola línea fina. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: radius, gap, orientation, litCells, accentColor ### Hop lift button https://fieldbook.lizardi.mx/es/components/hop-lift-button Un botón redondeado que se levanta y salta en un bucle corto y repetido mientras se apunta, luego cae plano en un estado de presión más oscuro. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, useAccentFill, hop, radius, liftDistance ### Hopping dot loader https://fieldbook.lizardi.mx/es/components/hopping-dot-loader Una fila corta de puntos que saltan en una onda viajera y cada uno abandona el suelo un latido después del punto que está a su lado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: dotCount, dotSize, hopHeight, cycleSeconds, accent ### Horizon swell https://fieldbook.lizardi.mx/es/components/horizon-swell Las olas onduladas se desvanecen en la niebla hacia un horizonte iluminado, crecen a medida que avanzan y alcanzan un borde pálido en cada cresta. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: waveColor, crestColor, speed, amplitude, fog, grain ### Horizontal bar chart https://fieldbook.lizardi.mx/es/components/horizontal-bar-chart Un gráfico de barras basado en filas con etiquetas de categoría en un margen izquierdo fijo y barras redondeadas que se extienden desde un borde izquierdo compartido, escaladas según el valor más grande. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, rowCount, barRadius, labelWidth, animate ### Hover Decrypt Text https://fieldbook.lizardi.mx/es/components/hover-decrypt-text Las letras se mezclan a través de caracteres aleatorios y se resuelven de izquierda a derecha en la palabra real en aproximadamente un segundo, reproduciendo la decodificación cada vez que el puntero ingresa al texto. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, duration, animateOnHover, startOnView ### Hover duplicate text nav https://fieldbook.lizardi.mx/es/components/hover-duplicate-text-nav Una lista de navegación vertical desliza cada etiqueta hacia arriba y fuera de la parte superior al pasar el mouse, mientras que una etiqueta duplicada se desliza desde abajo para ocupar su lugar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: items, accent, durationMs, showIndex ### Hover preview popover https://fieldbook.lizardi.mx/es/components/hover-preview-popover Una pequeña tarjeta de detalles que se abre junto a un enlace después de un breve desplazamiento y permanece abierta el tiempo suficiente para mover el puntero hacia él. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, openDelay, closeDelay, offset, accent ### Hover slide nav labels https://fieldbook.lizardi.mx/es/components/hover-slide-nav-labels Una lista de navegación vertical donde, al pasar el cursor o enfocar una etiqueta, se muestra una copia duplicada mientras el original se desliza hacia afuera, de modo que la etiqueta parece actualizarse sola. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: items, slideSeconds, accent ### Hover speed text ring https://fieldbook.lizardi.mx/es/components/hover-speed-text-ring Una frase situada en un anillo de letras orientadas hacia afuera que gira suavemente en reposo y cambia dramáticamente de velocidad mientras el puntero lo suspende. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: phrase, spinSeconds, hoverMode, accent ### Hover weight ripple text https://fieldbook.lizardi.mx/es/components/hover-weight-ripple-text Tipo de pantalla ultraligera en la que, al pasar el cursor sobre una letra, se convierte en un peso pesado con un contorno delgado, que se mueve hacia afuera para que sus vecinas también se engrosen un poco. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, accentColor, thickenNeighbors ### Hover zoom frame https://fieldbook.lizardi.mx/es/components/hover-zoom-frame Una imagen que se amplía suavemente alrededor del cursor al pasar el cursor o al tocarla, lo que permite al visitante inspeccionar los detalles sin salir de la página. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: zoomScale, zoomOnHover, zoomOnClick, cornerRadius ### Accessibility icon https://fieldbook.lizardi.mx/es/components/icon-accessibility Una figura de pie con los brazos abiertos y una postura amplia que respira con un pulso lento. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Activity icon https://fieldbook.lizardi.mx/es/components/icon-activity Un trazo de signos vitales que se dibuja de izquierda a derecha a lo largo de una línea plana, se eleva una vez y luego se aplana de nuevo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Airplay icon https://fieldbook.lizardi.mx/es/components/icon-airplay Una pantalla con un espacio en el borde inferior y un triángulo debajo que se desliza hacia abajo y hacia atrás, proyectando la imagen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Alarm clock icon https://fieldbook.lizardi.mx/es/components/icon-alarm-clock Un despertador de dos campanas que suena sobre sus pies mientras las manecillas van medio latido por detrás de la caja. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Arrow icon https://fieldbook.lizardi.mx/es/components/icon-arrow Una flecha de longitud completa que se desplaza a lo largo de su propio eje, con flechas emparejadas para las direcciones bidireccionales. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, direction ### Audio lines icon https://fieldbook.lizardi.mx/es/components/icon-audio-lines Cinco barras verticales de diferentes alturas que se elevan en secuencia, leídas como una forma de onda que va de izquierda a derecha. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### 3D axis icon https://fieldbook.lizardi.mx/es/components/icon-axis-3d Tres ejes se dibujan sucesivamente desde un origen: altura, luego anchura, luego profundidad diagonal. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Badge check icon https://fieldbook.lizardi.mx/es/components/icon-badge-check Un sello festoneado que dibuja sus ocho lóbulos y luego, un segundo después, traza un cheque en el medio. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Icon badge send https://fieldbook.lizardi.mx/es/components/icon-badge-send-button Un botón de envío redondeado cuyo glifo se encuentra en una insignia circular translúcida que se ilumina y gira mientras todo el botón se levanta al pasar el cursor y se fija al presionarlo. Frameworks: react Access: open Public prop names: label, accent, lift, spin, confirmOnPress ### Battery icon https://fieldbook.lizardi.mx/es/components/icon-battery Una celda con una protuberancia terminal cuyas barras parpadean en secuencia; la lectura de carga cambia las barras por un perno. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, level ### Bell icon https://fieldbook.lizardi.mx/es/components/icon-bell Una campana de notificación cuyo cuerpo se balancea desde su corona y cuyo badajo se retrasa un tiempo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, state ### Between icon https://fieldbook.lizardi.mx/es/components/icon-between Una flecha y un par de bloques que muestran dónde aterriza un nuevo elemento: los bloques se desplazan hacia un lado o la flecha se desliza hacia adentro. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Blocks icon https://fieldbook.lizardi.mx/es/components/icon-blocks Tres bloques cuadrados dispuestos en forma de L, saltando uno tras otro como piezas que se encajan en su lugar. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Cast icon https://fieldbook.lizardi.mx/es/components/icon-cast Una pantalla abierta en su esquina inferior izquierda, donde un punto y dos arcos empujan una señal hacia ella. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Check icon https://fieldbook.lizardi.mx/es/components/icon-check Una marca de verificación que se extiende desde el brazo corto hasta el brazo largo y luego se fija. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Chevron icon https://fieldbook.lizardi.mx/es/components/icon-chevron Un galón desnudo que se inclina en la dirección que señala, doblándose para las direcciones bidireccionales. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, direction ### Clapperboard icon https://fieldbook.lizardi.mx/es/components/icon-clapperboard Una pizarra con un badajo rayado con bisagras en la esquina superior izquierda, que se cierra de golpe y se abre de nuevo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Clipboard icon https://fieldbook.lizardi.mx/es/components/icon-clipboard Un tablero cuyo clip de resorte salta contra el borde superior, con una cara en blanco, a cuadros o rayada. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Clock icon https://fieldbook.lizardi.mx/es/components/icon-clock Una cara redonda cuyas manecillas recorren la esfera; la variante elige en qué hora está congelado el par. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, hour ### Cog icon https://fieldbook.lizardi.mx/es/components/icon-cog Una rueda de dientes finos con un orificio hexagonal, ambas giran juntas para que la pieza de la máquina parezca una sola pieza. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Compass icon https://fieldbook.lizardi.mx/es/components/icon-compass Un dial con una aguja tipo cometa que gira hacia el norte y se posa sobre el pivote en el centro. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Copy icon https://fieldbook.lizardi.mx/es/components/icon-copy Dos hojas apiladas donde la del frente se desliza fuera de la hoja detrás, como si estuviera despegando un duplicado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Corner arrow icon https://fieldbook.lizardi.mx/es/components/icon-corner-arrow Una flecha que se desliza por la esquina abierta de un cuadrado redondeado, hacia la esquina que nombra. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, direction ### Crop icon https://fieldbook.lizardi.mx/es/components/icon-crop Dos rieles de cultivo que se deslizan entre sí, abriendo el rectángulo que cortaron entre ellos. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Cross icon https://fieldbook.lizardi.mx/es/components/icon-cross Una cruz erguida con un travesaño alto y brazos suavemente redondeados, que se hinchan suavemente con un pulso lento. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Icon crossfade switch https://fieldbook.lizardi.mx/es/components/icon-crossfade-switch Un interruptor de palanca cuyo ícono del pulgar se desvanece y se escala hasta convertirse en un ícono diferente a medida que el interruptor cambia entre encendido y apagado. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, on, iconStyle, accent ### Disc icon https://fieldbook.lizardi.mx/es/components/icon-disc Un disco con un borde y un cubo quietos mientras tres ranuras giran alrededor del eje, para que el giro realmente se lea. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Download icon https://fieldbook.lizardi.mx/es/components/icon-download Una flecha que se desliza hacia abajo en una bandeja, o fuera de una nube, para guardar y exportar acciones. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, variant ### Ellipsis icon https://fieldbook.lizardi.mx/es/components/icon-ellipsis Tres puntos que parpadean en secuencia, dispuestos transversalmente o hacia abajo para formar un menú adicional. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, direction ### Not equal icon https://fieldbook.lizardi.mx/es/components/icon-equal-not Dos barras de nivel con una barra que las atraviesa, cancelando el signo igual cuando aterriza. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### EV charger icon https://fieldbook.lizardi.mx/es/components/icon-ev-charger Un pilar de carga en una plataforma con salida de cable y un perno en la cara que parpadea mientras se entrega. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Expand icon https://fieldbook.lizardi.mx/es/components/icon-expand Dos flechas se separan hacia esquinas opuestas, abriendo la vista a medida que avanzan. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### External link icon https://fieldbook.lizardi.mx/es/components/icon-external-link Una página enmarcada con una esquina abierta, donde la flecha se desliza más allá del marco hacia la parte superior derecha. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Fingerprint icon https://fieldbook.lizardi.mx/es/components/icon-fingerprint Crestas anidadas que se dibujan una tras otra de afuera hacia adentro, de la misma manera que un escáner lee una impresión. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Frame icon https://fieldbook.lizardi.mx/es/components/icon-frame Un visor cuyas cuatro esquinas redondeadas respiran a su vez alrededor de un punto central fijo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Gallery icon https://fieldbook.lizardi.mx/es/components/icon-gallery Una diapositiva enmarcada con sus vecinas asomándose desde los rieles, la tira avanzando como si estuviera paginada. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Gauge icon https://fieldbook.lizardi.mx/es/components/icon-gauge Un arco de dial con un cubo y una aguja que sube y baja en la escala, como un medidor que encuentra su lectura. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Heart icon https://fieldbook.lizardi.mx/es/components/icon-heart Un corazón con dos lóbulos redondos y una punta blanda, que late en un bucle y se llena de forma sólida cuando está encendido. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, state ### Kanban icon https://fieldbook.lizardi.mx/es/components/icon-kanban Tres carriles de tablero que cuelgan del riel superior, cada columna de cartas cae un ritmo después de la anterior. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Key icon https://fieldbook.lizardi.mx/es/components/icon-key Una llave de aro con dos dientes en el eje, que se mueve alrededor de su arco del mismo modo que una llave acciona una cerradura rígida. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Icon label tabs https://fieldbook.lizardi.mx/es/components/icon-label-tabs Una fila de fichas de íconos y etiquetas con un resaltado deslizante, donde el panel de abajo se desliza en la dirección de la pestaña elegida. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultTab, chipGap ### Icon label toolbar https://fieldbook.lizardi.mx/es/components/icon-label-toolbar Una barra de herramientas compacta de botones de íconos silenciosos, cada uno dibujado con su propio tono, con un botón de retroceso cuya etiqueta se despliega fuera del ícono al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, hueSpread, count, showBack, activeIndex ### Layers icon https://fieldbook.lizardi.mx/es/components/icon-layers Hojas apiladas vistas en perspectiva, la de arriba se levanta primero y las de abajo un segundo después. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Layout dashboard icon https://fieldbook.lizardi.mx/es/components/icon-layout-dashboard Cuatro mosaicos del tablero en dos columnas desiguales, cada una respirando a su vez para que la cuadrícula se ondula de arriba a la izquierda a abajo a la derecha. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Link icon https://fieldbook.lizardi.mx/es/components/icon-link Una cadena de dos partes que se mueve cuando se tira de la conexión, con una lectura de chincheta para referencias fijadas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Loader icon https://fieldbook.lizardi.mx/es/components/icon-loader Un indicador de ocupado en tres lecturas: un anillo de tres cuartos, un anillo de puntos y cuatro hojas giratorias. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Log in icon https://fieldbook.lizardi.mx/es/components/icon-log-in Una flecha que se desliza a través de una puerta abierta, manteniendo el marco de la puerta quieto mientras entra. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Log out icon https://fieldbook.lizardi.mx/es/components/icon-log-out Una flecha que se desliza hacia la derecha y alejándose de una puerta abierta, dejando el marco de la puerta quieto detrás de ella. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Map pin icon https://fieldbook.lizardi.mx/es/components/icon-map-pin Un marcador en forma de lágrima que salta del mapa y vuelve a caer en su punta, con un estado apagado tachado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, state ### Maximize icon https://fieldbook.lizardi.mx/es/components/icon-maximize Cuatro soportes de esquina que se separan en pares, estirando el marco para llenar la pantalla. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Menu icon https://fieldbook.lizardi.mx/es/components/icon-menu Tres barras apiladas que se ondulan lateralmente una tras otra, el tirador de un cajón de navegación. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Minimize icon https://fieldbook.lizardi.mx/es/components/icon-minimize Cuatro soportes de esquina metidos hacia adentro en pares, tirando del marco hacia abajo hasta una ventana. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Minus icon https://fieldbook.lizardi.mx/es/components/icon-minus Una sola regla que se hincha y se asienta, para colapsar, quitar y decrementar los controles. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Move icon https://fieldbook.lizardi.mx/es/components/icon-move Una flecha apunta al borde en el que debería aterrizar, empujándose en esa dirección una vez por ciclo mientras el borde se mantiene. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, direction ### NFC icon https://fieldbook.lizardi.mx/es/components/icon-nfc Cuatro arcos anidados que se extienden uno tras otro, de la misma manera que un campo de tocar para pagar llega a un lector. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Orbit icon https://fieldbook.lizardi.mx/es/components/icon-orbit Un cuerpo sólido rodeado por una única pista, con un talón que lo rodea completamente una vez por ciclo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Panel icon https://fieldbook.lizardi.mx/es/components/icon-panel Un marco de ventana cuyo borde del panel acoplado se desliza mientras un galón muestra en qué dirección se dirige el panel. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, variant ### Paperclip icon https://fieldbook.lizardi.mx/es/components/icon-paperclip Un clip de alambre doblado que cuelga de su curva superior, balanceándose de la misma manera que una página recortada lo tira hacia adelante y hacia atrás. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Pause icon https://fieldbook.lizardi.mx/es/components/icon-pause Dos barras verticales que parpadean una tras otra, manteniendo el tiempo mientras se mantiene la reproducción. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Pin icon https://fieldbook.lizardi.mx/es/components/icon-pin Una chincheta que salta una vez y aterriza en su aguja, con un estado apagado que dibuja una barra a través de ella. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, state ### Play icon https://fieldbook.lizardi.mx/es/components/icon-play Un sólido triángulo de juego que se hincha y se asienta con un pulso lento, como un botón de transporte que pide ser presionado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Plug zap icon https://fieldbook.lizardi.mx/es/components/icon-plug-zap Un enchufe de dos clavijas con un perno dentro, por lo que parece que la carga aterriza en las clavijas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Plus icon https://fieldbook.lizardi.mx/es/components/icon-plus Un signo más que aumenta con el ritmo, ofrecido simple o dentro de un círculo o un cuadrado redondeado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Radio icon https://fieldbook.lizardi.mx/es/components/icon-radio Un punto transmisor con dos pares de arcos que se alejan de él, un par interior al frente y un par exterior a continuación. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Radio tower icon https://fieldbook.lizardi.mx/es/components/icon-radio-tower Un mástil arriostrado cuya punta proyecta dos pares de arcos hacia afuera, el par cercano al frente y el par lejano al final. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Refresh icon https://fieldbook.lizardi.mx/es/components/icon-refresh Dos arcos de flechas persiguientes que giran una revolución completa, con lecturas en sentido antihorario, punteadas y deshabilitadas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Icon reveal chip https://fieldbook.lizardi.mx/es/components/icon-reveal-fill-chip Un pequeño chip delineado que se inunda con su acento al pasar el mouse mientras la etiqueta se desliza hacia la izquierda y un glifo oculto se desvanece desde la derecha. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, glyph, duration, fontSize ### Rotate icon https://fieldbook.lizardi.mx/es/components/icon-rotate Un anillo abierto con una sola punta de flecha que gira un cuarto de tic a la vez, además de una llave que gira en su lugar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Route icon https://fieldbook.lizardi.mx/es/components/icon-route Dos topes unidos por un conector escalonado que se arrastra desde el primer nudo hasta el último. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Search icon https://fieldbook.lizardi.mx/es/components/icon-search Una lupa que sube y baja suavemente para campos de búsqueda, filtros y controles de búsqueda. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Send icon https://fieldbook.lizardi.mx/es/components/icon-send Un avión de papel que se desliza hacia adelante al soltarlo, se dobla en diagonal o vuela plano y horizontal. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, variant ### Settings icon https://fieldbook.lizardi.mx/es/components/icon-settings Un engranaje de seis dientes que gira lentamente alrededor de un cubo abierto y el perfil de los dientes hace que la rotación sea fácil de leer. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Icon Shape Morph https://fieldbook.lizardi.mx/es/components/icon-shape-morph Un único ícono relleno cambia suavemente su forma al siguiente ícono en una secuencia, con el contorno deformándose continuamente entre formas en lugar de desvanecerse o intercambiarse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cycleSeconds, holdSeconds ### Shrink icon https://fieldbook.lizardi.mx/es/components/icon-shrink Dos flechas retrocedidas desde esquinas opuestas, plegando la vista al tamaño adecuado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Signal icon https://fieldbook.lizardi.mx/es/components/icon-signal Cuatro barras en una línea base compartida que parpadean de izquierda a derecha; las barras no alcanzadas se reducen a trozos en el nivel elegido. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, level ### Sliders icon https://fieldbook.lizardi.mx/es/components/icon-sliders Tres carriles con asas que se desplazan uno tras otro, dispuestos a lo largo o abajo de la rejilla. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, direction ### Star icon https://fieldbook.lizardi.mx/es/components/icon-star Una estrella de cinco puntas que se hincha con un ritmo y se llena una vez que el estado encendido la marca como favorita. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, state ### Icon sweep delete button https://fieldbook.lizardi.mx/es/components/icon-sweep-delete-button Un botón destructivo cuyo ícono más oscuro se desplaza desde el borde derecho a través de la cara al pasar el mouse, cubriendo la etiqueta mientras la tapa del contenedor se abre. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, width, sweepMs ### Icon swell tooltip https://fieldbook.lizardi.mx/es/components/icon-swell-tooltip-button Un botón de ícono sin cromo cuyo glifo se hincha y cambia de color al pasar el mouse mientras un chip de etiqueta se despliega sobre él desde su borde izquierdo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, iconSize, swell, openDelay ### Icon takeover delete https://fieldbook.lizardi.mx/es/components/icon-takeover-delete-button Un botón destructivo dividido en una palabra en negrita y una celda de icono estrecha; Al pasar el cursor o enfocar, la celda crece en todo el botón hasta que solo queda el glifo, con dos toques para confirmar al tocar. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, cellWidth, glyph, confirmOnTap ### Thumbs icon https://fieldbook.lizardi.mx/es/components/icon-thumbs Una mano con el pulgar hacia afuera, moviéndose a la altura de la muñeca. El accesorio de dirección gira toda la mano hacia arriba o hacia abajo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, direction ### Icon tile flood button https://fieldbook.lizardi.mx/es/components/icon-tile-flood-button Un botón con un icono de acento sólido en su borde izquierdo; Al flotar se vierte ese acento sobre el cuerpo pálido y la tinta de la etiqueta se vuelve blanca. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, floodMs, radius, maxLabelWidth ### Timer icon https://fieldbook.lizardi.mx/es/components/icon-timer Un cronómetro de cuenta regresiva con un tirador en la parte superior cuya mano sale del pivote, además de una lectura detenida. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, state ### Toggle icon https://fieldbook.lizardi.mx/es/components/icon-toggle Una pista de pastillas con una perilla sólida apoyada en un extremo, empujando a lo largo del recorrido como si probara el camino. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, state ### Trash icon https://fieldbook.lizardi.mx/es/components/icon-trash Papelera cuya tapa se inclina sobre su bisagra y cae hacia atrás, con cuerpo liso o acanalado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Unplug icon https://fieldbook.lizardi.mx/es/components/icon-unplug Un enchufe y un enchufe uno frente al otro con sus clavijas sin contacto; el enchufe se desliza más hacia afuera y hacia atrás. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Upload icon https://fieldbook.lizardi.mx/es/components/icon-upload Una flecha que se levanta de una bandeja o sube a una nube para realizar acciones de envío y publicación. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Volume icon https://fieldbook.lizardi.mx/es/components/icon-volume Un cono de altavoz con ondas que resuenan desde su boca, o una barra y una cruz dibujadas cuando se corta el sonido. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, level ### Wifi icon https://fieldbook.lizardi.mx/es/components/icon-wifi Arcos que se ondulan hacia afuera desde un punto sólido, un arco por paso de fuerza, con una barra dibujada para la lectura de apagado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, level ### X mark icon https://fieldbook.lizardi.mx/es/components/icon-x Una cruz que se desprende de la acción que anula, ofrecida sola o contenida dentro de un círculo o un cuadrado redondeado. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, variant ### Image panel login card https://fieldbook.lizardi.mx/es/components/image-panel-login-card Una tarjeta de inicio de sesión ancha dividida en un panel de formulario y un panel de imagen decorativa, con una fila de tres botones de inicio de sesión alternativos solo con íconos y texto de términos debajo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: heading, accentColor, imageSide ### Image panel signup card https://fieldbook.lizardi.mx/es/components/image-panel-signup-card Una tarjeta de registro ancha dividida en un panel de formulario y un panel de imagen decorativa, con campos de contraseña emparejados y tres botones de proveedor solo con íconos debajo de un divisor. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, accentColor, imageSide ### Select All Checklist https://fieldbook.lizardi.mx/es/components/indeterminate-select-all Una casilla de verificación principal que muestra un guión cuando solo algunos de sus elementos secundarios están marcados y una marca de verificación una vez que todos los elementos lo están. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: itemCount, startState, accentColor ### Infinite loop path loader https://fieldbook.lizardi.mx/es/components/infinite-loop-path-loader Un cargador en forma de ocho donde un segmento brillante se dibuja sin cesar alrededor de una pista tenue, su cabeza y su cola se mueven a diferentes velocidades para que el tablero respire. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: strokeWidth, speed, accent, showTrack, label ### Initials avatar cluster https://fieldbook.lizardi.mx/es/components/initials-avatar-cluster Una fila de tokens con iniciales redondas que resume a un grupo de personas y termina en un conteo de desbordamiento silenciado para el resto. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, accentColor, overflowCount, gap ### Initials fallback avatar https://fieldbook.lizardi.mx/es/components/initials-fallback-avatar Un solo avatar que muestra una foto cuando se le da una; de lo contrario, centra dos letras de iniciales en una forma de color suave. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, shape, accent, label ### Ink bloom button https://fieldbook.lizardi.mx/es/components/ink-bloom-button Un botón de contorno pesado cuyo tinte translúcido es superado por un disco sólido de acento que florece desde el centro al pasar el mouse o al enfocar el teclado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, borderWidth, shadowOffset, duration, radius ### Inlaid edge button https://fieldbook.lizardi.mx/es/components/inlaid-edge-button Un botón construido como una placa con incrustaciones: un borde que se ilumina o se oscurece, un panel empotrado en su interior y una etiqueta que se ilumina cuando llega el puntero. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, rimWidth, radius, labelGlow ### Inline command list https://fieldbook.lizardi.mx/es/components/inline-command-list Un campo de búsqueda sobre filas de acción agrupadas y filtrables que se estrecha a medida que escribe y mueve un resaltado con las teclas de flecha, destinado a permanecer en línea en lugar de en un cuadro de diálogo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: placeholder, accent, maxHeight ### Inline labeled bar chart https://fieldbook.lizardi.mx/es/components/inline-labeled-bar-chart Un gráfico de barras horizontales con el nombre de la categoría impreso dentro de cada barra y el valor impreso justo después de su punta, por lo que no se necesita ninguna columna de eje. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, barRadius, rowHeight, animate ### Inline term preview https://fieldbook.lizardi.mx/es/components/inline-term-preview Un término subrayado en el cuerpo del texto que abre un pequeño panel de definición al pasar el cursor o enfocar, ampliando desde la esquina más cercana al término. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: openDelay, closeDelay, width, accent ### Inner Dome Viewer https://fieldbook.lizardi.mx/es/components/inner-dome-viewer Una galería de mosaicos de fotografías dispuestas en el interior de una esfera giratoria, arrastradas como si se mirara alrededor del interior de una cúpula, con solo tocar para ampliar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: segments, maxVerticalRotation, grayscale, imageBorderRadius ### Inner Rim Send Button https://fieldbook.lizardi.mx/es/components/inner-rim-send-button Un botón de envío iluminado desde el interior por un suave borde de luz que abraza su borde interior, con un avión de papel con un contorno hueco que despega a lo largo de su propia diagonal al pasar el mouse, enfocar y presionar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, rim, launch, outline ### Input with affix https://fieldbook.lizardi.mx/es/components/input-group-affix Un campo de texto fusionado con un ícono inicial o una etiqueta corta, como un esquema de URL, que comparte un caparazón con borde que se enfoca como un control único. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: prefixLabel, placeholder, accent, showIcon ### Inset Edge Pill https://fieldbook.lizardi.mx/es/components/inset-edge-pill-button Una pastilla pálida con un anillo delgado alrededor y un labio más grueso solo en la parte inferior, por lo que se lee como una clave física que se inunda de color al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, lip, width, duration ### Breathing Inset Button https://fieldbook.lizardi.mx/es/components/inset-panel-send-button Un botón moldeado pálido cuyo panel interior se aleja del borde al pasar el mouse mientras el glifo de envío se desliza una corta distancia hacia la etiqueta. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, insetGap, glyphShift, radius ### Inset plate button https://fieldbook.lizardi.mx/es/components/inset-plate-button Un botón dentro de un botón: una capa exterior sostiene una placa flotante más pequeña que lleva la etiqueta, y al presionar se encoge solo la placa interior mientras la cáscara permanece en su lugar. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, inset, pressScale, radius ### Inset sheen button https://fieldbook.lizardi.mx/es/components/inset-sheen-button Un botón de utilidad pálido con un borde fino, un resaltado de un píxel a lo largo de su borde superior y un estado presionado que invierte el brillo hacia adentro. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, radius, disabled ### Instant Hint Tooltip https://fieldbook.lizardi.mx/es/components/instant-hint-tooltip Una pequeña etiqueta que se desvanece y se escala a la vista junto a un elemento al pasar el mouse o al foco del teclado, brindando una pista rápida sin agregar desorden visible. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: openDelay, side, accentColor ### Intent button set https://fieldbook.lizardi.mx/es/components/intent-button-set Una familia de botones completa en un solo archivo: sólido, suave, contorno, fantasma, enlace y pesos de peligro en cuatro tamaños, con ranuras para íconos, un estado de ocupado y un anillo de enfoque real. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: variant, size, accent, withIcon, busy, disabled ### Interactive spin globe https://fieldbook.lizardi.mx/es/components/interactive-spin-globe Un globo de lona sombreado que gira lentamente, enciende marcadores brillantes en lugares dispersos y se puede agarrar y girar con la mano. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, rotationSpeed, markerCount, glowIntensity ### Interlocking comb button https://fieldbook.lizardi.mx/es/components/interlocking-comb-button Dos peines de barras verticales se deslizan desde arriba y desde abajo y se entrelazan para llenar el botón, invirtiendo la etiqueta a medida que pasan. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, bars, duration, radius ### Interruptible hover swell https://fieldbook.lizardi.mx/es/components/interruptible-hover-swell Un mosaico cuyo aumento de desplazamiento en dos etapas siempre comienza desde su tamaño actual, por lo que activar y desactivar el puntero nunca hace que se rompa. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: stageOneScale, peakScale, duration, accent, showValue ### Invert and grow button https://fieldbook.lizardi.mx/es/components/invert-and-grow-button Un bloque con bordes que intercambia los colores de la tinta y el papel y crece desde su centro mientras está suspendido, luego se aplana bajo la prensa. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, growth, borderWidth ### Invert Fill Button https://fieldbook.lizardi.mx/es/components/invert-fill-button Un pequeño botón delineado que se llena de manera continua al pasar el mouse mientras su etiqueta cruza al valor opuesto, intercambiando el primer plano y el fondo de manera limpia. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, height, radius, duration ### Invert and lift button https://fieldbook.lizardi.mx/es/components/invert-lift-outline-button Un botón alto y delineado que se invierte en un relleno sólido y levanta un par de píxeles al pasar el mouse, luego vuelve a quedar plano cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, lift, borderWidth ### Invert on hover pill https://fieldbook.lizardi.mx/es/components/invert-on-hover-pill Una pastilla llena que cambia los colores de relleno y etiqueta y se hincha ligeramente al pasar el mouse o al enfocar con el teclado, apretándose por debajo de su tamaño en reposo mientras se presiona. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, hoverScale, radius, glow ### iPhone Device Frame https://fieldbook.lizardi.mx/es/components/iphone-device-frame Un bisel de teléfono vectorial con un recorte de cámara que enmarca una foto, un vídeo en bucle o un marcador de posición en blanco dentro de su propia pantalla redondeada. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: bezelTone, screenContent, accentColor ### Iridescent sheen https://fieldbook.lizardi.mx/es/components/iridescent-sheen Una superficie sedosa donde la luz se desliza a lo largo de suaves pliegues, cambiando entre dos tonos a medida que los pliegues se mueven debajo de ella. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, partner, speed, amplitude, followPointer ### Iron filings field https://fieldbook.lizardi.mx/es/components/iron-filings-field Una cuadrícula cuadrada de pequeños guiones que giran para apuntar al puntero, como limaduras de hierro que se enganchan en un imán arrastrado sobre ellas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gridSize, accent, dashLength, stiffness, idleDrift ### Isometric Stack Button https://fieldbook.lizardi.mx/es/components/isometric-stack-button Un botón dibujado en proyección isométrica que se abre en una pila de copias paralelas al pasar el mouse y se comprime nuevamente cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, layers, spread ### Italic outline fill button https://fieldbook.lizardi.mx/es/components/italic-outline-fill-button Un botón silencioso y delineado en cursiva que se invierte en un acento sólido en el momento en que un puntero o teclado lo alcanza. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, radius, italic, size ### Italic release pill button https://fieldbook.lizardi.mx/es/components/italic-release-pill-button Una pastilla de doble borde cuya pesada etiqueta inclinada se endereza al pasar el cursor mientras el relleno se aclara y una sombra dura y coloreada florece debajo y luego se presiona sobre ella. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lean, tracking, glow ### Ivory keycap button https://fieldbook.lizardi.mx/es/components/ivory-keycap-button Una tecla pálida levantada sobre una repisa a juego; Al flotar se espesa su borde insertado y al presionarlo se asienta al ras de la superficie. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, capColor, label, travel, tracking ### Jello squash button https://fieldbook.lizardi.mx/es/components/jello-squash-button Un botón delineado que se inunda de color al pasar el mouse y se tambalea a través de una secuencia de aplastamiento y estiramiento antes de asentarse. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, intensity, duration ### Jelly skew button https://fieldbook.lizardi.mx/es/components/jelly-skew-button Un botón de pastilla que se tambalea cuando lo mueves, torciendo con fuerza una vez y luego asentándose a través de una serie de sesgos cada vez más pequeños. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, amplitude, duration, radius ### Jitter shake button https://fieldbook.lizardi.mx/es/components/jitter-shake-button Una pastilla sólida que zumba en un estrecho bucle diagonal mientras el puntero permanece sobre ella y se detiene en el instante en que te vas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, amplitude, speed ### Joined action bar https://fieldbook.lizardi.mx/es/components/joined-action-bar Una fila de botones soldados en una barra con costuras finas colapsadas, redondeadas solo en los extremos exteriores y un segmento cuadrado final que abre un menú adicional. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: orientation, segments, size, showTextSegment, accent ### Joined Button Group https://fieldbook.lizardi.mx/es/components/joined-button-group Una fila de botones fusionados borde con borde en un control segmentado, con costuras compartidas que se iluminan entre los dos botones que se desplazan o presionan. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: orientation, buttonCount, accent ### Key travel button https://fieldbook.lizardi.mx/es/components/key-travel-button Una tecla redondeada que se apoya sobre una base alta que se acorta al pasar el mouse y desaparece bajo la presión, dejando la llave plana. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, travel, tracking ### Key Turn Chip https://fieldbook.lizardi.mx/es/components/key-turn-chip Un pequeño chip lleno cuyo glifo clave se mueve como si estuviera buscando un candado al pasar el cursor, luego gira una moneda de veinticinco centavos y se desbloquea al hacer clic. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, unlockedLabel, accent, jiggleDegrees, unlocked ### Keyboard Context Menu https://fieldbook.lizardi.mx/es/components/keyboard-context-menu Un menú de acciones desplegable con elementos agrupados, atajos de teclado y un submenú anidado, totalmente manejable desde el teclado con un resaltado de enfoque deslizante. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, showShortcuts, accentColor ### Keyboard Dropdown Menu https://fieldbook.lizardi.mx/es/components/keyboard-dropdown-menu Un botón de activación abre una lista de acciones flotantes cuyo fondo resaltado se desliza suavemente entre cualquier elemento que esté sobre el cursor o enfocado en el teclado, con teclas de flecha completas y navegación de escritura anticipada. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, itemCount, closeOnSelect ### Keyboard pill tabs https://fieldbook.lizardi.mx/es/components/keyboard-pill-tabs Un conmutador de dos pestañas con una pastilla resaltada que se desliza entre las etiquetas y navegación completa por teclado con enfoque itinerante entre pestañas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: tabOneLabel, tabTwoLabel, accent, pillSpring ### Shortcut Key Chip https://fieldbook.lizardi.mx/es/components/keycap-combo-group Pequeñas fichas de píldora para teclas individuales que se agrupan en línea para deletrear un atajo de teclado. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: comboText, accentColor, size, grouped ### Keycap lift button https://fieldbook.lizardi.mx/es/components/keycap-lift-button Un botón de llave mecánica que se levanta al pasar el mouse, mantiene un borde inferior sólido e intercambia toda su pila de sombras hacia adentro cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lipDepth, travel, height ### Keycap plate button https://fieldbook.lizardi.mx/es/components/keycap-plate-button Una placa cuadrada que enmarca una tecla redondeada que desciende al presionarla y permanece presionada mientras se mantiene presionado el botón, mediante un puntero o un teclado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, travel, plateBorder, keyRadius ### Keycap press button https://fieldbook.lizardi.mx/es/components/keycap-press-button Una tecla pálida con un grosor real construida a partir de sombras duras apiladas, que viaja hacia abajo y pierde altura cuando se presiona. Frameworks: react Access: member Public prop names: label, accent, depth, travel, size ### Keyframe morph loop https://fieldbook.lizardi.mx/es/components/keyframe-morph-loop Un cuadrado que ejecuta una rutina en bucle de crecer, girar y redondear en un círculo, manteniéndose en cada postura porque las paradas de tiempo son desiguales. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: duration, repeatDelay, maxScale, accent, paused ### Keystroke Text https://fieldbook.lizardi.mx/es/components/keystroke-text El texto aparece un carácter a la vez como si se escribiera en vivo, con un cursor parpadeante que continúa después de terminar de escribir. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: words, typeSpeedMs, loop, cursorColor ### Label icon swap button https://fieldbook.lizardi.mx/es/components/label-icon-swap-button Un botón de pastilla que desliza su etiqueta hacia afuera y una flecha de bandeja hacia adentro al pasar el mouse o enfocar, luego ejecuta un breve ritmo repetido en la flecha mientras está enfocado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, width, height, beat ### Rolling Label Button https://fieldbook.lizardi.mx/es/components/label-roll-button Una pastilla compacta y brillante que enrolla su título fuera de la vista y muestra una segunda línea desde abajo al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, hoverLabel, accent, glow, rollMs ### Label swap slide button https://fieldbook.lizardi.mx/es/components/label-swap-slide-button Una píldora con borde que intercambia todo su contenido al pasar el mouse: la fila en reposo se desliza hacia arriba y hacia afuera, mientras que una segunda fila con su propio ícono y color se desliza hacia adentro desde abajo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: restLabel, hoverLabel, accent, surface, direction ### Labeled checkbox https://fieldbook.lizardi.mx/es/components/labeled-checkbox Una pequeña casilla de verificación cuadrada combinada con una etiqueta de texto, que se muestra sin formato, con texto auxiliar, deshabilitada y como una tarjeta que resalta su borde cuando está marcada. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, helperText, showDisabled ### Labeled field block https://fieldbook.lizardi.mx/es/components/labeled-field-block Un contenedor de campo de formulario que combina una etiqueta, un control, una sugerencia y un mensaje de error, cambiando entre diseños apilados y uno al lado del otro a medida que el contenedor se estrecha. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: orientation, invalid, disabled, accent, gap ### Labeled hairline divider https://fieldbook.lizardi.mx/es/components/labeled-hairline-divider Una regla delgada que separa dos secciones, rompiéndose opcionalmente para mostrar un pequeño título centrado entre dos líneas cortas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: orientation, label, accent, thickness ### Labeled progress bar https://fieldbook.lizardi.mx/es/components/labeled-progress-bar Una pista de progreso etiquetada cuyo relleno se reduce a un nuevo ancho mientras que una lectura de porcentaje cuenta suavemente para coincidir. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: value, accentColor, label, trackHeight ### Labeled radio group https://fieldbook.lizardi.mx/es/components/labeled-radio-group Un grupo vertical compacto de opciones de radio, cada una con una etiqueta de texto en línea, para una única opción de configuración. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, defaultValue ### Labeled toggle row https://fieldbook.lizardi.mx/es/components/labeled-toggle-row Un pequeño interruptor de encendido/apagado emparejado en línea con su propia etiqueta de texto, del tamaño de una fila de la lista de configuraciones. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, checked, accent, size ### Lagging orb follower https://fieldbook.lizardi.mx/es/components/lagging-orb-follower Un disco blando que persigue el puntero sobre un resorte deliberadamente flexible, pasando por delante de él y tambaleándose hacia atrás en lugar de bloquearse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: stiffness, damping, size, accent, showTether ### Latching icon toggle https://fieldbook.lizardi.mx/es/components/latching-icon-toggle Un botón cuadrado que se enciende y apaga: una placa llena se desvanece, el glifo se intercambia por su contraparte coincidente y un título al lado explica el estado en palabras. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: glyph, startPressed, accent, size, showCaption ### Latching square toggle https://fieldbook.lizardi.mx/es/components/latching-square-toggle Un botón de icono cuadrado compacto que se engancha entre un estado apagado con un contorno tenue y un estado presionado lleno de acento sólido. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: pressed, size, disabled, accentColor ### Launch orbit button https://fieldbook.lizardi.mx/es/components/launch-orbit-button Una píldora que emite un anillo hacia afuera en un bucle, dispersa sus motas de polvo al flotar y envía una pequeña nave girando a través de la etiqueta. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, dotCount, pulse, flightMs ### Launching send button https://fieldbook.lizardi.mx/es/components/launching-send-button Un botón de enviar cuyo avión de papel se inclina hacia arriba y sale volando del borde derecho al pasar el mouse mientras la palabra se disuelve, luego vuelve a ingresar desde la izquierda después de un clic y confirma el vuelo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, flyDistance, bankDegrees, bloom ### Layered Context Menu https://fieldbook.lizardi.mx/es/components/layered-context-menu Un menú contextual con acciones agrupadas, un submenú anidado, elementos de casilla de verificación y un grupo de radio, todos los cuales se abren en la posición del puntero. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: surfaceLabel, accent ### Layered ring loader https://fieldbook.lizardi.mx/es/components/layered-ring-loader Un emblema centrado de anillos parciales concéntricos que giran a diferentes velocidades y direcciones, con un título de estado y un subtítulo que se desvanecen debajo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: title, subtitle, size, ringColor ### Layered shadow headline https://fieldbook.lizardi.mx/es/components/layered-shadow-headline Un título breve y en negrita con una copia duplicada detrás, sombreado en diagonal con un color de acento, que se desplaza lentamente para darle a las letras una losa de sombra en movimiento. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, accent, offset, speed ### Layered trend chart https://fieldbook.lizardi.mx/es/components/layered-trend-chart Un gráfico combinado que superpone una serie de barras, un área rellena y una línea en un eje de tiempo compartido, de modo que el volumen, el total acumulado y la tasa se puedan leer juntos. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: lineColor, areaColor, showBars, showArea ### Layout toggle switch https://fieldbook.lizardi.mx/es/components/layout-toggle-switch Un interruptor cuya perilla cruza la pista animando un cambio de diseño real en lugar de una traducción, por lo que el recorrido se mantiene exacto en cualquier ancho de pista. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: on, accent, bounce, trackWidth, showLabels ### Leader line pie https://fieldbook.lizardi.mx/es/components/leader-line-pie Un gráfico circular sólido cuyos valores se encuentran fuera del círculo, cada uno vinculado a su sector mediante una línea guía de dos segmentos. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, hueRange, labelDistance, showLeaders, gap ### Leap and tint button https://fieldbook.lizardi.mx/es/components/leap-and-tint-button Una pastilla pálida que salta hacia arriba al pasar el cursor o enfocarse mientras su relleno se convierte en acento y su sombra neutra florece en un gran charco teñido del mismo tono. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, leapDistance, shadowSpread, letterSpacing ### Left Edge Fill Button https://fieldbook.lizardi.mx/es/components/left-edge-fill-button Una losa suave y redondeada donde un panel de color crece desde el borde izquierdo para llenar toda la forma al pasar el mouse, volteando la etiqueta a medida que pasa. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, radius, duration, sinkOnPress ### Left Rule Notice https://fieldbook.lizardi.mx/es/components/left-rule-notice Un mensaje tranquilo en un recuadro cuyo tono se transmite mediante una única regla gruesa de color que recorre su borde izquierdo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: tone, accent, title, message, dismissible ### Letter cascade button https://fieldbook.lizardi.mx/es/components/letter-cascade-button Un botón ancho y sólido cuya etiqueta centrada cae y se reconstruye una letra a la vez a medida que cada carácter cae en su lugar desde arriba. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, stagger, tracking, sink ### Letter drop press button https://fieldbook.lizardi.mx/es/components/letter-drop-press-button Un botón de tecla en una repisa más oscura cuya etiqueta cae al pasar el mouse y se reconstruye letra por letra desde arriba, presionando hacia abajo sobre la repisa cuando se hace clic. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, stagger, ledge, tracking ### Letter roll in https://fieldbook.lizardi.mx/es/components/letter-roll-in Una línea de texto donde cada personaje gira sobre un eje horizontal, la cara antigua se aleja mientras una cara idéntica aparece desde abajo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, stagger, delay, accent, duration ### Letter spread drop button https://fieldbook.lizardi.mx/es/components/letter-spread-drop-button Una pastilla pálida cuyas letras se separan mientras se llena con un color acentuado y un charco suave florece debajo de ella, luego cae sobre ese charco mientras se sostiene. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, spread, dropPx, poolSize ### Letter swap copy button https://fieldbook.lizardi.mx/es/components/letter-swap-copy-button Un botón de copia en relieve cuya etiqueta se reconstruye letra por letra al pasar el mouse mientras su chip de icono pulsa y dibuja un cheque cuando llega la copia. Frameworks: react Access: open Public prop names: label, doneLabel, accent, stagger, resetMs ### Lift and fill pill https://fieldbook.lizardi.mx/es/components/lift-and-fill-pill Una pastilla delineada que salta una distancia fija hacia arriba y se llena con su acento mientras se la apunta, luego vuelve a caer en la misma curva. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, lift, radius, duration ### Lift and settle button https://fieldbook.lizardi.mx/es/components/lift-and-settle-button Un botón sólido que flota hacia arriba y adquiere el color de acento al pasar el mouse, luego se hunde más allá de su línea de reposo en una sombra colapsada cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lift, pressDepth, radius ### Lift and Sink Button https://fieldbook.lizardi.mx/es/components/lift-and-sink-button Un botón monoespacial tintado que flota al pasar el mouse y se hunde en su propia sombra cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, travel, height ### Lifting glyph row https://fieldbook.lizardi.mx/es/components/lifting-glyph-button-row Una fila corta de botones de solo íconos donde el glifo suspendido se eleva de la línea de base mientras un suave tinte circular se desvanece detrás de él, cada elemento teñido en su propio tono. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: count, accent, lift, size, varyHues ### Lifting hard shadow pill https://fieldbook.lizardi.mx/es/components/lifting-hard-shadow-pill Una pastilla de contorno grueso que se desplaza hacia arriba y hacia la izquierda al pasar el mouse mientras su sombra plana y sólida se extiende debajo de ella y presiona al ras de la página mientras la sostiene. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, restShadow, hoverShadow, radius, outline ### Lifting share chip https://fieldbook.lizardi.mx/es/components/lifting-share-chip Un pequeño chip sólido con un glifo y una etiqueta de mayúsculas cortas que levanta unos cuantos píxeles y se suaviza al pasar el cursor, se asienta cuando se presiona y puede alternar entre un glifo relleno. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, glyph, lift ### Light Beam Flare https://fieldbook.lizardi.mx/es/components/light-beam-flare Un haz estrecho cae desde lo alto de un escenario oscuro en un amplio destello horizontal, con neblina a la deriva y un haz que se inclina hacia el puntero. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, flowSpeed, hazeIntensity, beamWidth, tiltStrength ### Light beam slats https://fieldbook.lizardi.mx/es/components/light-beam-slats Lamas diagonales largas que se deslizan unas sobre otras en la oscuridad, cada una de las cuales capta una banda de luz a medida que se cruza, de modo que el panel respira como una persiana iluminada. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, beamCount, beamWidth, tilt, speed, grain ### Light column beam https://fieldbook.lizardi.mx/es/components/light-column-beam Una sola columna de luz se encuentra en un marco oscuro, respirando a lo ancho mientras su textura interna se desplaza hacia arriba a través de una gradación de dos colores. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: topColor, bottomColor, intensity, width, rotationSpeed, followPointer ### Light cone beam https://fieldbook.lizardi.mx/es/components/light-cone-beam Una cuña de luz granulada surge de una línea viva al pie del marco y gira lentamente para que sus bordes adquieran diferentes colores. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tint, glow, grain, baseWidth, motion, speed ### Light pool button https://fieldbook.lizardi.mx/es/components/light-pool-button Un botón de señal de tubo iluminado que derrama un charco borroso de su propio color sobre la superficie debajo de él y cambia la figura por el suelo cuando se suspende o se enfoca. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, intensity, poolSize, invertOnHover ### Light sweep button https://fieldbook.lizardi.mx/es/components/light-sweep-button Un botón de contorno silencioso cuyas letras y su borde fino están iluminados por una barra de luz diagonal que lo atraviesa, descansa un segundo y vuelve a barrer. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, sweepMs, restMs, bandWidth ### Light sweep effect https://fieldbook.lizardi.mx/es/components/light-sweep-effect Una banda diagonal de luz que pasa una vez por un botón y se activa al pasar el cursor, tocar o repetir el temporizador. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: trigger, duration, angle, accent ### Light sweep button https://fieldbook.lizardi.mx/es/components/light-sweep-outline-button Un botón de contorno iluminado cuyo borde brillante envía una estrecha banda de luz que lo recorre al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, glow, duration ### Light Threads https://fieldbook.lizardi.mx/es/components/light-thread-fan Los filamentos brillantes se desplegaron en abanico desde un único punto de pellizco, trenzándose a medida que avanzan sus fases y destellando casi en blanco donde se cruzan. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, threads, speed, spread, glow ### Line by line headline reveal https://fieldbook.lizardi.mx/es/components/line-by-line-headline-reveal Un titular revela una línea completa a la vez: cada línea se suelta de izquierda a derecha como una cortina que se levanta mientras una marca de color aterriza en su borde posterior y permanece encendida, dejando un rastro visible una vez que la secuencia se establece. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, staggerMs, riseDistance, accent ### Link preview card https://fieldbook.lizardi.mx/es/components/link-preview-card Un pequeño panel de vista previa que aparece cerca de un enlace o nombre de usuario después de un breve desplazamiento y muestra un resumen de lo que hay detrás sin necesidad de hacer clic. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: openDelay, closeDelay, side ### Link Preview Card https://fieldbook.lizardi.mx/es/components/link-preview-card-2 Una tarjeta de vista previa enriquecida que se desvanece y se desliza desde cualquier lado en el que se abra al pasar el cursor sobre un nombre vinculado, con un breve retraso para evitar el parpadeo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: side, align, openDelay, accent ### Link thumbnail peek https://fieldbook.lizardi.mx/es/components/link-thumbnail-peek Al pasar el cursor sobre un enlace en el texto en ejecución, aparece una pequeña miniatura enmarcada de hacia dónde conduce, con el título de la página y el host debajo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: openDelay, cardWidth, side, accent, showCaption ### Link thumbnail peek https://fieldbook.lizardi.mx/es/components/link-thumbnail-peek-2 Un enlace en línea que despliega una pequeña miniatura simulada de su destino encima de la palabra mientras el puntero descansa sobre ella. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: openDelay, side, width, accent, showCaption ### Link Thumbnail Peek https://fieldbook.lizardi.mx/es/components/link-thumbnail-peek-3 Un enlace en línea que muestra una pequeña miniatura de su destino encima del texto mientras el puntero descansa sobre él. Frameworks: react Access: member Public prop names: openDelay, side, width, accent, showCaption ### Linked Profile Preview https://fieldbook.lizardi.mx/es/components/linked-profile-preview Una tarjeta de vista previa enriquecida que aparece cuando un visitante se desplaza o enfoca un nombre vinculado, que muestra un avatar, una biografía y estadísticas de seguidores, con un cursor opcional que sigue el cursor. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, followCursor, accent, openDelay ### Liquid chrome emblem https://fieldbook.lizardi.mx/es/components/liquid-chrome-emblem Un emblema dibujado representado como metal líquido vertido, sus reflejos se arrastran y se acumulan a lo largo de la forma a medida que se mueve el puntero. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: speed, refraction, patternScale, tint, contrast, followPointer ### Liquid metal drift https://fieldbook.lizardi.mx/es/components/liquid-metal-drift Bordes iluminados con forma de líquido pesado, se estiran y fusionan a través de un campo negro, abultándose hacia el puntero como limaduras de hierro hacia un imán. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rimColor, speed, sharpness, flowDirection, glow, pointerMagnet ### Liquid metal swirl https://fieldbook.lizardi.mx/es/components/liquid-metal-swirl Cintas fundidas se envuelven alrededor de un núcleo caliente y arrojan finos filamentos brillantes hacia afuera mientras toda la masa gira sobre sí misma. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, speed, swirl, glow, detail, grain ### Liquid swirl vortex https://fieldbook.lizardi.mx/es/components/liquid-swirl-vortex Dos charcos de pintura espesa doblados alrededor de un lento remolino, con bordes duros y píxeles gruesos que hacen que parezca impreso en lugar de renderizado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: colorA, colorB, spinSpeed, swirlAmount, pixelSize, autoRotate ### Liquid warp headline https://fieldbook.lizardi.mx/es/components/liquid-warp-headline Un titular dibujado en un lienzo que se dobla y ondula como la luz a través del agua, y la distorsión se acumula dondequiera que se cierne el puntero. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: headline, textColor, warpStrength, speed, ripple ### Liquid wave button https://fieldbook.lizardi.mx/es/components/liquid-wave-button Una pastilla oscura medio llena de líquido coloreado cuya superficie rueda en una onda continua que nunca se repite. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, liquid, level, waveSeconds, paused ### Live keycap https://fieldbook.lizardi.mx/es/components/live-keycap Una tecla de aspecto físico que se presiona hacia abajo cuando se hace clic y refleja la tecla correspondiente en el teclado real del lector. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: keyLabel, accent, travel, watchKeyboard, tone ### Loading Placeholder Blocks https://fieldbook.lizardi.mx/es/components/loading-placeholder-blocks Bloques de marcador de posición redondeados y tenues que sustituyen a un avatar y líneas de texto apiladas mientras se carga el contenido, con una banda de luz diagonal que los recorre sincronizadamente. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: loaded, rows ### Localized booking calendar https://fieldbook.lizardi.mx/es/components/localized-booking-calendar Un selector de rango de dos meses dentro de una tarjeta cuyo título, subtítulo y nombres de mes cambian entre dos idiomas desde un pequeño menú de selección en el encabezado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: language, title, accent ### Locked ratio frame https://fieldbook.lizardi.mx/es/components/locked-ratio-frame Un contenedor que mantiene su contenido bloqueado en una proporción elegida de ancho y alto sin importar cuán ancho se extienda. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: ratio, radius, accentColor ### Looping flight send button https://fieldbook.lizardi.mx/es/components/looping-flight-send-button Un botón de envío similar a una tarjeta que levanta su sombra al pasar el cursor mientras su avión de papel gira hacia arriba, se aleja y regresa, y se aplasta cuando se hace clic. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lift, loopSeconds, arcHeight ### Looping text ribbon https://fieldbook.lizardi.mx/es/components/looping-text-ribbon Una cinta de color lleva una frase repetida a lo largo de un camino ondulado, circular o arqueado, desplazándose sin cesar como un sello o una insignia. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: phrase, shape, ribbonColor, speed, pauseOnHover ### Looping typewriter text https://fieldbook.lizardi.mx/es/components/looping-typewriter-text Una línea de texto se escribe carácter por carácter, se retiene, se elimina y escribe la siguiente frase de una lista, ciclando para siempre detrás de un símbolo de intercalación parpadeante. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: phrases, typeSpeed, holdSeconds, accent ### Lozenge swipe highlight https://fieldbook.lizardi.mx/es/components/lozenge-swipe-highlight-button Una etiqueta monoespacial desnuda con un rombo de color estacionado a su derecha que se desliza y se extiende hasta resaltar completamente al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, dotSize, springiness, durationMs ### Luminous ribbon field https://fieldbook.lizardi.mx/es/components/luminous-ribbon-field Un fondo de lienzo donde unas cuantas cintas brillantes se entrelazan a lo largo del marco, estrechándose en puntas en ambos bordes y floreciendo hacia el blanco donde se cruzan. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: ribbonCount, accent, speed, thickness, glow ### Magnetic button https://fieldbook.lizardi.mx/es/components/magnetic-button Un botón que se desplaza hacia el puntero mientras está dentro de un radio establecido y vuelve a descansar cuando sale, con la etiqueta y la flecha desplazándose un poco más que el cuerpo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: strength, radius, label ### Magnetic dust button https://fieldbook.lizardi.mx/es/components/magnetic-dust-button Un botón de pastilla rodeado de motas de polvo sueltas que se precipitan hacia su centro al flotar y regresan a sus propios lugares de descanso cuando se sueltan. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, speckCount, spread, pull ### Magnetic particle ring https://fieldbook.lizardi.mx/es/components/magnetic-particle-ring Un campo a la deriva de pequeñas motas que el puntero atrapa y reorganiza en un anillo ondulado, soltándolos nuevamente a medida que avanza. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, ringRadius, magnetRadius, wave, autoDrift, accent ### Magnetic project target https://fieldbook.lizardi.mx/es/components/magnetic-project-target Un cursor redondo personalizado con texto rodeando su borde que se desplaza detrás del puntero y se ajusta a una pastilla de llamada a la acción cuando se acerca. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, backdropWord, rimText, accent, captureRadius, followLag ### Magnetic pull target https://fieldbook.lizardi.mx/es/components/magnetic-pull-target Un mosaico que se inclina hacia el puntero cada vez que entra dentro de un radio establecido, tirando con más fuerza cuanto más se acerca y acercándose cuando el puntero se aleja. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: strength, range, onlyOnHover, showRadius, accent ### Magnifying icon dock https://fieldbook.lizardi.mx/es/components/magnifying-icon-dock Una fila de íconos de aplicaciones en una barra translúcida que crece a medida que el puntero se acerca a cada uno, volviendo a su tamaño normal cuando el puntero se aleja. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, baseSize, magnification, iconCount ### Magnifying icon dock https://fieldbook.lizardi.mx/es/components/magnifying-icon-dock-2 Una base estilo macOS de botones de íconos circulares que crecen suavemente a medida que el puntero se acerca a ellos y revelan una etiqueta sobre el ícono activo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: baseItemSize, magnification, itemCount ### Marker highlight https://fieldbook.lizardi.mx/es/components/marker-highlight-text Una frase con una banda marcadora que se desplaza detrás de ella de izquierda a derecha cuando la línea aparece por primera vez, dejando las palabras en un bloque de color. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, duration, delay, bandHeight, skew ### Marquee reveal menu https://fieldbook.lizardi.mx/es/components/marquee-reveal-menu Una pila de filas de altura completa donde, al pasar el cursor sobre una fila, se desliza una banda coloreada que se desplaza de su etiqueta y una miniatura desde el borde más cercano del puntero. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rowCount, marqueeSpeed, bandColor ### Mascot zoom play button https://fieldbook.lizardi.mx/es/components/mascot-zoom-play-button Una píldora delineada que lleva una pequeña mascota de píxeles que se escala y se desliza al pasar el mouse, empujando una palabra hacia el lado derecho mientras llega una segunda palabra desde el izquierdo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: restLabel, hoverLabel, accent, zoom, staggerMs ### Masked Reveal Accordion https://fieldbook.lizardi.mx/es/components/masked-reveal-accordion Un acordeón cuyos paneles quedan descubiertos por una máscara móvil de bordes duros a medida que se abren, de modo que las respuestas aparecen línea por línea en lugar de desvanecerse como un bloque. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, keepMounted, travel, duration, curve ### Masked reveal disclosure https://fieldbook.lizardi.mx/es/components/masked-reveal-disclosure Una divulgación cuyo panel crece hasta su propia altura natural mientras un borde de gradiente suave borra el contenido a la vista desde la parte superior y luego corre hacia atrás al cerrarse. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, defaultOpen, durationMs, keepRendered, accent ### Masonry flow https://fieldbook.lizardi.mx/es/components/masonry-flow Un muro de mampostería que empaqueta azulejos de diferentes alturas en columnas, levanta cada uno a medida que se desplaza a la vista y vuelve a asentar toda la cuadrícula cuando cambia el número de columnas. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: columns, gap ### Media masked heading https://fieldbook.lizardi.mx/es/components/media-masked-heading Un título en negrita actúa como una ventana recortada hacia los medios que se mueven detrás de él, que se inclina frente al puntero para una sensación de paralaje y puede reproducir su revelación al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, reveal, parallax, align ### Meeting Slot Scheduler https://fieldbook.lizardi.mx/es/components/meeting-slot-scheduler Una tarjeta de reserva que coloca una cuadrícula mensual al lado de una lista desplazable de intervalos de tiempo de un cuarto de hora, algunas fechas deshabilitadas y mostradas tachadas, terminando en una línea de resumen y un botón Continuar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, slotMinutes, unavailableCount ### Mega nav menu https://fieldbook.lizardi.mx/es/components/mega-nav-menu Una barra de navegación superior horizontal cuyos activadores abren menús desplegables o megapaneles que comparten una ventana gráfica animada que cambia de tamaño para adaptarse al contenido de cada panel. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, openOnHover, panelWidth ### Merging blob backdrop https://fieldbook.lizardi.mx/es/components/merging-blob-backdrop Un amplio telón de fondo de masas blandas de gran tamaño que se deslizan y orbitan en bucles escalonados, fusionándose en una masa líquida con un desenfoque y un umbral dondequiera que se encuentren. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, secondary, blobCount, speed, softness, followPointer ### Meshing gears chip https://fieldbook.lizardi.mx/es/components/meshing-gears-chip Un chip de configuración con dos engranajes entrelazados que giran en direcciones opuestas cada vez que el puntero está sobre él, a velocidades determinadas por el número de dientes. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, spinSeconds, secondGear ### Meteor shower https://fieldbook.lizardi.mx/es/components/meteor-shower Pequeñas cabezas brillantes con finas rayas caen sobre un panel en un ángulo compartido, cada una con su propio retraso y velocidad. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: count, angle, minDuration, maxDuration, tailLength, accentColor ### Metric switch bar chart https://fieldbook.lizardi.mx/es/components/metric-switch-bar-chart Un gráfico de barras diario denso con dos mosaicos métricos en el encabezado; Al hacer clic en un mosaico, las barras se transforman en esa métrica. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, secondColor, days, defaultMetric, animate ### Milestone progress track https://fieldbook.lizardi.mx/es/components/milestone-progress-track Una pista de progreso marcada a intervalos de un cuarto, con un gran número de conteo encima y marcas pasadas que se iluminan. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: value, accentColor, trackHeight, showTicks ### Minimal email login https://fieldbook.lizardi.mx/es/components/minimal-email-login Una página de inicio de sesión sin contraseña con una pequeña marca, un encabezado de bienvenida, un campo de correo electrónico obligatorio, un único botón de envío y dos opciones de inicio de sesión alternativas debajo de un divisor. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: brandName, accentColor ### Minimal email sign in https://fieldbook.lizardi.mx/es/components/minimal-email-sign-in Una página de inicio de sesión sin contraseña con una marca, un encabezado de bienvenida, un campo de correo electrónico, un botón principal y dos opciones de inicio de sesión alternativas debajo de un divisor. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: brandName, accentColor, welcomeText ### Minimal Single Date Picker https://fieldbook.lizardi.mx/es/components/minimal-single-date-picker Un calendario simple de un solo mes con un encabezado de mes y año en texto plano y dos botones de flecha, creado para elegir una fecha con la menor cantidad de partes visuales posible. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, startMonth, startYear, bordered ### Minimum-Stay Range Picker https://fieldbook.lizardi.mx/es/components/minimum-stay-range-picker Un selector de rango de un solo mes que impone un número mínimo de noches entre las dos fechas seleccionadas, con un breve título debajo de la cuadrícula que explica la regla. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, minNights, startMonth, startYear ### Mirror warp field https://fieldbook.lizardi.mx/es/components/mirror-warp-field Una hoja de metal pulido con sangrado completo que se pliega y se repliega, con una abolladura que se extiende dondequiera que la toque el puntero. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: tint, speed, foldDepth, waveX, waveY, interactive ### Mobile date drawer https://fieldbook.lizardi.mx/es/components/mobile-date-drawer Un campo de fecha diseñado para tocar que abre su calendario como una hoja inferior que se desliza hacia arriba desde el borde del marco en lugar de una pequeña ventana emergente flotante. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, caption ### Model picker prompt box https://fieldbook.lizardi.mx/es/components/model-picker-prompt-box Un compositor de mensajes con un campo de crecimiento automático, un menú desplegable para elegir qué asistente maneja la solicitud, un control de adjuntar y una acción de envío. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, headline, accent, maxRows, showAttach ### Molded bevel button https://fieldbook.lizardi.mx/es/components/molded-bevel-button Un botón de losa de esquinas duras con cuatro bandas biseladas insertadas, una sombra desplazada sin desenfoque y una prensa que lo deja caer al ras de la superficie. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, bevelWidth, dropDepth, uppercase ### Molded key send button https://fieldbook.lizardi.mx/es/components/molded-key-send-button Un botón de envío moldeado a partir de la propia página: una carcasa exterior elevada que contiene una pastilla interior empotrada con un avión de papel y una etiqueta. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, radius, depth, showIcon ### Month grid date picker https://fieldbook.lizardi.mx/es/components/month-grid-date-picker Una cuadrícula de calendario de un solo mes para elegir una fecha, con un encabezado de día de la semana, días silenciados de los meses vecinos, un círculo de acento relleno en el día elegido y un punto que marca el día de hoy. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, showOutsideDays, weekStartsMonday ### Mood swap button https://fieldbook.lizardi.mx/es/components/mood-swap-button Un botón redondo que sostiene una cara dibujada que cambia de expresión al pasar el cursor y presionar, luego bloquea el estado de ánimo cuando se hace clic. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, accent, mood, showCaption, strokeWeight ### Morph image carousel https://fieldbook.lizardi.mx/es/components/morph-image-carousel Un carrusel de imágenes a sangre completa donde las diapositivas no se cortan ni se deslizan unas sobre otras, sino que visualmente se funden y se deforman entre sí. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: autoplay, autoplaySeconds, transitionStyle, showCaptions ### Morph menu icon https://fieldbook.lizardi.mx/es/components/morph-menu-icon Un botón de menú cuyas tres barras forman una cruz y regresan, con el peldaño del medio retrayéndose cuando los dos exteriores se cruzan. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color ### Morphing backdrop button https://fieldbook.lizardi.mx/es/components/morphing-backdrop-button Una etiqueta de texto simple respaldada por una losa de color y un disco de esquina translúcido que se hincha y se cuadra en una nueva cara del botón al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, discSize, duration, offset ### Morphing icon loop https://fieldbook.lizardi.mx/es/components/morphing-icon-loop Un único ícono relleno cambia continuamente de forma al siguiente ícono en una lista corta, su contorno fluye suavemente de una silueta a la siguiente mientras su color de relleno cambia para coincidir. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: intervalSeconds, morphSeconds, size, advanceOnClick ### Morphing icon toggle https://fieldbook.lizardi.mx/es/components/morphing-icon-toggle Un pequeño icono cambia continuamente su contorno entre dos formas y dos colores en un bucle constante. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: intervalSeconds, colorOne, colorTwo ### Morphing Pill Navbar https://fieldbook.lizardi.mx/es/components/morphing-pill-navbar Una fila de etiquetas de navegación en una pastilla oscura donde la etiqueta activa se divide en su propia pastilla llena y las etiquetas restantes se reagrupan en una segunda pastilla que vuelve a fluir a su alrededor. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultRoute, invertActivePill ### Morphing tab panel https://fieldbook.lizardi.mx/es/components/morphing-tab-panel Un pequeño panel con pestañas donde el subrayado activo se desliza entre las pestañas y el gran glifo del panel se transforma en lugar de intercambiarse, por lo que las dos vistas se sienten continuas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, indicator, duration, springy, showCaption ### Mount pop in https://fieldbook.lizardi.mx/es/components/mount-pop-in Una fila de formas que surgen desde cero en el momento en que se montan, escalonadas para que el grupo las lea como una ola, con un botón de repetición para verla nuevamente. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: itemCount, bounce, duration, stagger, direction, accent ### Particle Field https://fieldbook.lizardi.mx/es/components/mouse-reactive-particle-field Un campo de lienzo de suaves puntos flotantes que flotan por sí solos y se inclinan hacia el puntero con un suave tirón magnético, retrocediendo una vez que se aleja. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: density, dotColor, driftSpeed, pullStrength ### Multi-Date Picker https://fieldbook.lizardi.mx/es/components/multi-date-picker Un calendario de dos meses para seleccionar un puñado de fechas individuales no consecutivas hasta un recuento máximo, y cada selección se muestra como su propio día completo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, maxDates, startMonth, startYear ### Multi open panel stack https://fieldbook.lizardi.mx/es/components/multi-open-panel-stack Una pila de secciones del panel que se pueden expandir de forma independiente, con una copia cerrada a la que el navegador aún puede acceder. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, allowMultiple, findable, railWidth, duration ### Multi select toggle row https://fieldbook.lizardi.mx/es/components/multi-select-toggle-row Una fila de botones de alternancia independientes, como opciones de formato de texto, donde cualquier número puede permanecer presionado a la vez. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: variant, size, accentColor ### Muted social login https://fieldbook.lizardi.mx/es/components/muted-social-login Una página de inicio de sesión completa sobre un fondo ligeramente teñido con una marca, dos botones de inicio de sesión social, un divisor y un formulario de correo electrónico y contraseña en una sola tarjeta. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, accentColor, socialProviderCount ### Muted compact signup https://fieldbook.lizardi.mx/es/components/muted-two-column-fields-signup Una página de registro con una tarjeta centrada sobre un fondo tintado apagado donde los dos campos de contraseña comparten una fila compacta de dos columnas bajo una única línea auxiliar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, accentColor ### Named point line https://fieldbook.lizardi.mx/es/components/named-point-line Una línea que atraviesa cinco categorías que imprime el nombre de cada categoría encima de su punto en lugar de un número, dejando el valor en la lectura al pasar el cursor. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, labelSize, dotRadius, strokeWidth, showGrid ### Natural Language Date Field https://fieldbook.lizardi.mx/es/components/natural-language-date-field Un campo de texto que lee frases como "en 2 días" o "el próximo viernes" como una fecha real, con una ventana emergente de calendario y una oración de vista previa en vivo debajo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, phrase, previewPrefix ### Human Typing Rhythm https://fieldbook.lizardi.mx/es/components/natural-typing-sequence Escribe a través de una cola de frases con una sincronización irregular, similar a la humana, eliminando la mayoría antes de la siguiente, pero dejando la frase final en la pantalla antes de que se repita toda la secuencia. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: typingSpeed, loopDelay, autoLoop, naturalVariance ### Neon ribbon tubes https://fieldbook.lizardi.mx/es/components/neon-ribbon-tubes Dos tubos luminosos se entrelazan a lo largo del marco y están rodeados de bandas de interferencia cuando se cruzan. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: colorA, colorB, speed, bend, rotation ### Neon trail cursor https://fieldbook.lizardi.mx/es/components/neon-trail-cursor Un haz de luz cónico atravesó la trayectoria reciente del puntero, cálido y ancho en la cabeza, adelgazando y cambiando de color hacia la cola. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: trailLength, width, followSpeed, idleFade, color, tailColor ### Nested bezel send button https://fieldbook.lizardi.mx/es/components/nested-bezel-send-button Tres marcos anidados forman un botón físico grueso: un bisel exterior, un pozo sombreado y una cápsula interior cuyo glifo gira una vuelta completa más una cuarta parte al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, spin, hoverScale, radius ### Nested capsule button https://fieldbook.lizardi.mx/es/components/nested-capsule-button Un botón de pastilla construido a partir de tres cápsulas anidadas que se aplanan en el anillo exterior al pasar el mouse mientras la etiqueta se funde con el color de acento. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, showMark, gap, size ### Capsule in frame button https://fieldbook.lizardi.mx/es/components/nested-capsule-send-button Una bandeja exterior con borde que sostiene una cápsula interior flotante que se hunde en el marco a lo largo de una prensa. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, frameGap, sinkDepth, borderWidth ### Nested File Browser https://fieldbook.lizardi.mx/es/components/nested-file-browser Un árbol de archivos accesible donde varias carpetas en diferentes profundidades pueden permanecer abiertas a la vez, unidas mediante líneas guía de conexión. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, indentSize, rowHeight, showGuideLines ### Nested file tree https://fieldbook.lizardi.mx/es/components/nested-file-tree Un árbol de directorios cuyas carpetas se expanden y contraen con altura animada, guías de sangría dibujadas y un archivo seleccionado a la vez. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, indentSize, showGuides, startExpanded, maxHeight ### Nested panel frame https://fieldbook.lizardi.mx/es/components/nested-panel-frame Una capa exterior discreta con una tira compacta de encabezado y pie de página que contiene uno o más paneles insertados más nítidos, agrupando contenido relacionado con una profundidad clara. Frameworks: react Access: open Public prop names: title, description, footer ### Nested plate send button https://fieldbook.lizardi.mx/es/components/nested-plate-send-button Una pastilla moldeada asentada dentro de una placa de respaldo cuya sombra proyectada se tensa al flotar y se aplana al presionar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, depth, plateRadius, showIcon ### Share Of Total Area Chart https://fieldbook.lizardi.mx/es/components/normalized-share-area-chart Tres series mensuales reescaladas para que sus valores siempre sumen la altura completa de la trama, convirtiendo los recuentos brutos en una banda de participaciones que siempre suman el cien por ciento. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, secondColor, thirdColor, showPercentAxis, animate ### Notched arc gauge https://fieldbook.lizardi.mx/es/components/notched-arc-gauge Un dial de partitura construido a partir de muescas cónicas que se iluminan en secuencia alrededor de un arco abierto, con un número rodante en el centro. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: value, accent, notches, spacing, orientation, uniformWidth ### Notched console button https://fieldbook.lizardi.mx/es/components/notched-console-button Un botón de panel angular con una esquina biselada y un corte en cuña desde un lado, además de dos reglas iluminadas que bombean a lo largo de los bordes superior e inferior. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, notch, cycleMs, blur ### Notched offset slab button https://fieldbook.lizardi.mx/es/components/notched-offset-slab-button Un botón en mayúsculas en bloque que flota sobre una sombra desplazada, terminado con dos pestañas en las esquinas dobladas, que se desliza hacia su propia sombra cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, offset, width, uppercase ### Notification feed stack https://fieldbook.lizardi.mx/es/components/notification-feed-stack Una fuente vertical que revela tarjetas de notificación con un temporizador, deslizando las tarjetas más antiguas hacia abajo y dejando caer las más antiguas a medida que llegan las nuevas. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, interval, maxVisible, pauseOnHover ### Nudge arrow invert button https://fieldbook.lizardi.mx/es/components/nudge-arrow-invert-button Una pastilla oscura en mayúsculas con una flecha clavada en el borde derecho; Al pasar el cursor, se invierte a una superficie pálida y empuja la flecha hacia adelante, y al presionar se muestra un relleno cálido. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, nudge, tracking, uppercase ### Nudging chevron button https://fieldbook.lizardi.mx/es/components/nudging-chevron-button Un botón silencioso y teñido con acento cuya marca de chevrón espera en el espacio negativo, luego se desliza al pasar el mouse y empuja la etiqueta hacia un lado mientras la paleta se enfría a neutrales. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, shiftDistance, mark, coolOnHover ### Nudging message pill https://fieldbook.lizardi.mx/es/components/nudging-message-pill Una píldora de chat sólida cuyo glifo de burbuja se mueve en un bucle desigual mientras está suspendido o enfocado, y muestra un breve punto no leído al soltarlo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, nudgeSpeed, size ### Number reel https://fieldbook.lizardi.mx/es/components/number-reel Un carrete con ventana de valores escalonados que gira desde cero y se detiene con el objetivo aterrizando en una ranura central resaltada. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: target, increment, direction, delay, accent ### Odometer digit counter https://fieldbook.lizardi.mx/es/components/odometer-digit-counter Un número que se muestra como dígitos del odómetro mecánico que saltan a su nueva posición cada vez que cambia el valor. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: value, fontSize, accentColor, digitGap ### Odometer number https://fieldbook.lizardi.mx/es/components/odometer-number Un número construido a partir de columnas de dígitos independientes, cada una de las cuales gira verticalmente hasta su nuevo dígito, de modo que las unidades giran mientras que los dígitos principales apenas se mueven. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: value, grouping, decimals, stiffness, accent ### Offset bloom button https://fieldbook.lizardi.mx/es/components/offset-bloom-button Una losa plana y brillante sin borde que genera una amplia neblina descentrada de su propio color al flotar y la comprime cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, bloomSpread, offsetX, pressScale ### Offset outline stack https://fieldbook.lizardi.mx/es/components/offset-outline-stack-button Una cara de botón con bordes que descansa sobre capas de contorno escalonadas como una pequeña libreta de papel; hover desliza la hoja superior sobre la pila e invierte su relleno. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, offset, layers, duration ### Offset plate button https://fieldbook.lizardi.mx/es/components/offset-plate-button Un botón delineado con una placa sólida estacionado hacia abajo y hacia la derecha; Al pasar el cursor, el plato se desliza hacia casa para que las dos formas se bloqueen en una. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, offset, radius, duration ### Offset shadow icon orb https://fieldbook.lizardi.mx/es/components/offset-shadow-icon-orb Un botón redondo con solo ícono que descansa sobre una sombra desplazada en la que cae plano cuando se presiona y se levanta al soltarlo, con el tamaño adecuado para una fila de opciones de inicio de sesión. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, accent, offset, glyph ### Offset shadow press button https://fieldbook.lizardi.mx/es/components/offset-shadow-press-button Un botón de contorno plano que se asienta sobre una sombra desplazada y se desliza hacia abajo cuando se presiona, como una tecla real que toca fondo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, offset, showArrow, borderWidth ### One Question Wizard https://fieldbook.lizardi.mx/es/components/one-question-wizard Un formulario de varios pasos que muestra una sola pregunta a la vez con una lectura del progreso, y solo avanza una vez que la pregunta actual tiene una respuesta válida. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: questionCount, accentColor, shortcuts, transitionMs ### Opposing rule text button https://fieldbook.lizardi.mx/es/components/opposing-rule-text-button Un botón de texto en mayúsculas sin bordes entre corchetes por dos reglas que barren desde extremos opuestos al pasar el cursor o enfocar y retroceden por donde vinieron. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, thickness, duration, size ### Orbit drop zone https://fieldbook.lizardi.mx/es/components/orbit-drop-zone Una zona de colocación de archivos que simula una carga con arcos de colores giratorios alrededor de un anillo de progreso, muestra el porcentaje en vivo y rechaza archivos de gran tamaño o no compatibles con un error en línea. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, maxSizeMb, uploadSeconds, acceptHint ### Orbit loader https://fieldbook.lizardi.mx/es/components/orbit-loader Un indicador de carga cuyos tres puntos recorren una órbita con una separación de un tercio de vuelta, cada uno arrastrando un rastro corto, mientras que un arco barre el anillo exterior en la otra dirección. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, speed, color ### Path Orbit https://fieldbook.lizardi.mx/es/components/orbit-path-carousel Las cartas recorren un camino cerrado compartido, espaciados uniformemente y dando vueltas sin fin, con la forma del camino conmutable entre una elipse, un círculo y una estrella. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: shape, itemCount, duration, tilt, showPath, accent ### Orbit Pointer Nav https://fieldbook.lizardi.mx/es/components/orbit-pointer-nav Un anillo de navegación circular donde un puntero central gira para apuntar a cualquier botón de sección que esté activo, y los botones se expanden en píldoras etiquetadas al seleccionarlos. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, accent, buttonSize, labelMaxWidth ### Orbit Ring Nav https://fieldbook.lizardi.mx/es/components/orbit-ring-nav Un anillo circular de botones de navegación con un puntero giratorio que se ajusta al elemento activo y botones que se expanden en píldoras etiquetadas al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, accentColor, pointerStiffness, expandLabels ### Orbiting Avatar Intro https://fieldbook.lizardi.mx/es/components/orbiting-avatar-intro Una pila de retratos redondos que se levanta, se abre en abanico formando un círculo y luego gira lentamente alrededor del centro mientras cada retrato permanece en posición vertical. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, stageSize, orbitSeconds, tileSize, accent ### Orbiting badges https://fieldbook.lizardi.mx/es/components/orbiting-badges Pequeñas insignias espaciadas uniformemente alrededor de una o dos pistas circulares, cada anillo gira a su propia velocidad y dirección mientras las insignias permanecen en posición vertical. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: radius, count, duration, showPath, innerReverse, accent ### Orbiting border spark https://fieldbook.lizardi.mx/es/components/orbiting-border-spark Una chispa brillante con una cola que se desvanece corre eternamente alrededor del borde de un panel, siguiendo el radio exacto de la esquina en lugar de cortar las esquinas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: duration, sparkSize, accentColor, trailColor, borderWidth, reverse ### Orbiting caption disc https://fieldbook.lizardi.mx/es/components/orbiting-caption-disc-button Un botón circular cuya leyenda en mayúscula recorre el borde interior en una órbita lenta e interminable mientras una insignia central transmite su flecha al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, diameter, spinSeconds, direction ### Orbiting confirm chips https://fieldbook.lizardi.mx/es/components/orbiting-confirm-chips-button Un botón de ícono redondo que arroja un chip de confirmación y un chip de descartado al pasar el mouse o enfocar, y luego los vuelve a colocar debajo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, spread, popMs, stagger ### Orbiting image spiral https://fieldbook.lizardi.mx/es/components/orbiting-image-spiral Una pila de fotografías cuadradas dispuestas alrededor de una espiral invisible que gira continuamente, y cada fotografía se escala, se agudiza o se difumina según lo cerca que se encuentre del frente. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: itemCount, speed, radius, pauseOnHover ### Orbiting rim light button https://fieldbook.lizardi.mx/es/components/orbiting-rim-light-button Una pastilla oscura cuyo borde de un píxel está iluminado desde atrás por un cono de color que gira lentamente y gira más rápido mientras se mantiene presionado el botón. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, spinSeconds, rimBlur, haloSize ### OTP code boxes https://fieldbook.lizardi.mx/es/components/otp-code-boxes Una fila de cuadros de un solo carácter para ingresar un código de verificación, un dígito por cuadro con el cursor avanzando automáticamente. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: length, accent, masked ### OTP field https://fieldbook.lizardi.mx/es/components/otp-field Un campo de código de un solo uso de cuadros separados sobre una entrada oculta, donde un mosaico de acento se desliza hasta el cuadro que se está editando y la fila pulsa una vez que se completa el código. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: length, masked, accent ### Passcode slot input https://fieldbook.lizardi.mx/es/components/otp-slot-input Un campo de código de acceso de un solo uso de ranuras de borde compartido fusionadas sobre una entrada oculta, con un símbolo de intercalación parpadeante en la ranura vacía activa. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: length, value, accentColor, grouped ### Outline draw text https://fieldbook.lizardi.mx/es/components/outline-draw-text Las letras en pantalla se trazan una tras otra como contornos brillantes, luego un relleno sólido se desvanece detrás de los trazos para terminar la palabra. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: headline, strokeColor, fillColor, trigger, drawDurationS ### Outline invert button https://fieldbook.lizardi.mx/es/components/outline-invert-button Un botón de pizarra oscura rodeado por un contorno cálido que intercambia todos los colores con su borde al pasar el cursor y se eleva con un brillo cambiante. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, slate, glow, uppercase ### Outlined page nav https://fieldbook.lizardi.mx/es/components/outlined-page-nav Una fila de botones de número de página donde la página activa tiene una pastilla delineada, flanqueada por controles anterior y siguiente y puntos suspensivos para los rangos omitidos. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: totalPages, currentPage, accentColor ### Outset ring tilt button https://fieldbook.lizardi.mx/es/components/outset-ring-tilt-button Un botón estilo insignia con un anillo grueso flotando fuera de su borde que crece, se inclina un par de grados y deja caer una sombra dura al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, hoverScale, tilt, ringOffset ### Outside Value Pie https://fieldbook.lizardi.mx/es/components/outside-value-pie Un gráfico circular sólido con números simples flotando justo afuera de cada sector, colocado de manera que cada etiqueta se lea hacia afuera desde el centro sin líneas de conexión. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, hueRange, labelOffset, valueFormat, gap ### Overhead light pill https://fieldbook.lizardi.mx/es/components/overhead-light-pill Un botón de pastilla oscuro iluminado por un suave charco de luz cenital, que se atenúa en su conjunto al flotar e ilumina su grueso anillo exterior al enfocar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lightSize, lightStrength, ring ### Overhead light rays https://fieldbook.lizardi.mx/es/components/overhead-light-rays Suaves vigas cónicas cuelgan de encima de un panel, cada una de las cuales aparece y desaparece y se balancea suavemente en su propio ciclo para que el grupo nunca pulse al mismo tiempo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rayCount, rayColor, blur, speed, length, intensity ### Overlay scroll panel https://fieldbook.lizardi.mx/es/components/overlay-scroll-panel Un panel delimitado que oculta la barra de desplazamiento de la plataforma y dibuja su propia pista superpuesta delgada, del tamaño del pulgar según el contenido. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: orientation, height, thumbSize, autoHide, accent ### Overshoot icon button https://fieldbook.lizardi.mx/es/components/overshoot-icon-slide-button Una pastilla pálida con un gran glifo ilustrado estacionado en su extremo izquierdo que tira hacia afuera más allá del borde y regresa al flotar o enfocar. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, slide, springy, radius ### Paired bar chart https://fieldbook.lizardi.mx/es/components/paired-bar-chart Un gráfico de barras agrupadas donde cada mes muestra dos barras una al lado de la otra, una por serie, para comparar dos medidas en las mismas categorías. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: primaryColor, secondaryColor, barRadius, groupGap, animate ### Paired Code Split View https://fieldbook.lizardi.mx/es/components/paired-code-split-view Un paso de verificación en pantalla dividida cuyos cuadros de código se agrupan en pares con guiones entre ellos, presentándose en el momento en que se llena el último cuadro. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, groups, perGroup, autoSubmit, showArtPanel ### Paired Series Line https://fieldbook.lizardi.mx/es/components/paired-series-line Dos series suavizadas durante los mismos meses en una escala compartida, con una guía flotante que lee ambos valores uno al lado del otro en un panel. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: primaryColor, secondaryColor, strokeWidth, showGuide, showGrid ### Panel swallow button https://fieldbook.lizardi.mx/es/components/panel-swallow-button Un botón con un panel de iconos más oscuro acoplado en un borde; Al pasar el cursor o enfocar el teclado, el panel crece en todo el ancho y la etiqueta se desvanece debajo de él. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, iconSide, expandMs ### Panel Tab Switcher https://fieldbook.lizardi.mx/es/components/panel-tab-switcher Una barra de pestañas redondeada donde un indicador de fondo se transforma al tamaño y posición exactos de la pestaña activa, revelando un panel de contenido distinto debajo de ella. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, variant, tabCount ### Panning gradient button https://fieldbook.lizardi.mx/es/components/panning-gradient-button Una tecla abovedada cuyo degradado diagonal de gran tamaño se desplaza por la cara al pasar el mouse, barriendo una banda más clara de una esquina a la otra. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, deep, label, duration, dome ### Paper fold text https://fieldbook.lizardi.mx/es/components/paper-fold-text El texto se divide en caracteres, palabras o líneas que se abren a lo largo de un borde de bisagra elegido con una sombra de pliegue, escalonada a lo largo de la frase. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, hinge, splitBy, duration ### Parallax photo columns https://fieldbook.lizardi.mx/es/components/parallax-photo-columns Una pared completa de columnas de fotografías a la deriva en perspectiva 3D donde los mosaicos se iluminan y se elevan bajo el cursor o el foco del teclado mientras la columna se detiene. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: columns, driftSpeed, tilt, overlayColor, pauseOnHover ### Parallax plate gallery https://fieldbook.lizardi.mx/es/components/parallax-plate-gallery Una galería vertical donde el número de índice de gran tamaño de cada placa se desplaza a un ritmo diferente al de la propia placa, con un riel de progreso de desplazamiento a lo largo de la parte inferior. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, panels, depth, snap, showProgress ### Parallax Starfield https://fieldbook.lizardi.mx/es/components/parallax-starfield Tres capas de puntos dispersos se desplazan hacia arriba a diferentes velocidades y se deslizan contra el puntero, por lo que el campo gana profundidad. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: density, starColor, speed, parallax ### Particle burst button https://fieldbook.lizardi.mx/es/components/particle-burst-button Un botón que lanza una pequeña lluvia de motas hacia arriba y fuera de sí mismo con cada clic, luego se reinicia silenciosamente mientras la etiqueta confirma que la acción se realizó. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, particleCount, spread, confirmMs ### Particle drift https://fieldbook.lizardi.mx/es/components/particle-drift Un campo de lienzo de partículas a la deriva lenta que se envuelven en los bordes, se unen con líneas tenues y se alejan por donde pasa el puntero. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, color, connectDistance ### Particle formation text https://fieldbook.lizardi.mx/es/components/particle-formation-text Un lienzo de partículas diminutas que se reúnen en forma de palabra, se desplazan una vez formada y se dispersan lejos del puntero. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, density, scatter, color, highlightColor ### Particle spray https://fieldbook.lizardi.mx/es/components/particle-spray-on-hold Mantenga presionado el puntero en un control y rociará pequeñas partículas desde donde esté el puntero, cada una formando un arco, girando, luego cayendo y limpiándose. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: emitRate, size, lift, accent, shape ### Pass through wipe button https://fieldbook.lizardi.mx/es/components/pass-through-wipe-button Un botón lleno cuyo panel brillante aparece desde un borde al pasar el mouse y sale por el borde opuesto cuando lo haces, por lo que sigue desplazándose. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, panelColor, label, duration, direction ### Paste Format Menu https://fieldbook.lizardi.mx/es/components/paste-format-menu-button Una pastilla con un símbolo de intercalación que abre una lista bordeada de opciones de formato de pegado y cuadra sus esquinas inferiores para que las dos formas se lean como una sola pieza. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, openOnHover, itemCount, width ### Path Breadcrumb Trail https://fieldbook.lizardi.mx/es/components/path-breadcrumb-trail Un sendero horizontal de enlaces de jerarquía de páginas que terminan en la página actual, con senderos largos que colapsan detrás de una elipsis expandible. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, segmentCount, collapseMiddle ### Path follower https://fieldbook.lizardi.mx/es/components/path-follower-loop Una loseta redondeada que avanza a lo largo de una pista en espiral mientras la pista se adelanta y luego retrocede hasta el inicio. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, duration, tileSize, alignToTangent, strokeWidth ### Peek Inside Folder https://fieldbook.lizardi.mx/es/components/peek-inside-folder Un ícono de carpeta estilizado que se abre al hacer clic para desplegar tres papeles escondidos en el interior, cada uno alejándose del puntero. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, size, open ### Peelable sticker https://fieldbook.lizardi.mx/es/components/peelable-sticker Una pegatina de vinilo que puedes arrastrar por su área, cuyo borde se levanta de la superficie al pasar el cursor y se despega más mientras la sostienes. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, rotate, peelAmount, peelAngle, shadow ### Perimeter draw button https://fieldbook.lizardi.mx/es/components/perimeter-draw-button Una barra corta y gruesa estacionada debajo de la etiqueta se estira y viaja alrededor de los cuatro lados al pasar el mouse hasta que se cierra en un contorno completo, luego se retrae hacia la barra al salir. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, strokeWidth, duration, wash ### Perimeter spark button https://fieldbook.lizardi.mx/es/components/perimeter-spark-button Una pastilla oscura con una única chispa brillante orbitando justo dentro de su borde, escondida detrás de un núcleo insertado para que solo el borde capte la luz. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, orbitMs, radius, sparkWidth ### Perspective floor grid https://fieldbook.lizardi.mx/es/components/perspective-floor-grid Un plano de cuadrícula inclinado lejos de la cámara para retroceder hacia un horizonte y deslizarse hacia el espectador en un bucle continuo de una celda. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: angle, cellSize, speed, lineColor, opacity ### Perspective reveal dialog https://fieldbook.lizardi.mx/es/components/perspective-reveal-dialog Un cuadro de diálogo de uso general cuyo panel se inclina desde un borde elegido en 3D y luego se aplana en su lugar para mostrar contenido arbitrario en una página atenuada. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: from, accent, title, showFooterButton ### Perspective sheen button https://fieldbook.lizardi.mx/es/components/perspective-sheen-button Un botón rectangular sólido que lleva un panel brillante translúcido sesgado en perspectiva que se aplana al flotar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tilt, sheenOpacity, radius ### Physical keycap button https://fieldbook.lizardi.mx/es/components/physical-keycap-button Una tecla moldeada con una parte superior sombreada y un recorrido real: se presiona, aplasta y parpadea cuando se hace clic o cuando se presiona la tecla enlazada. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, size, travel, bindKey ### Physics drop text https://fieldbook.lizardi.mx/es/components/physics-drop-text Una oración se divide en palabras que caen, dan vueltas y rebotan bajo una gravedad simulada, luego se asientan y pueden moverse con el puntero. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, gravity, highlightColor, trigger ### Pill tabs https://fieldbook.lizardi.mx/es/components/pill-tabs Una tira de pestañas donde una sola pastilla se desliza y se extiende sobre la pestaña seleccionada, con flecha, teclas de navegación Inicio y Fin y un panel que se fusiona. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, tabCount ### Pin priority list https://fieldbook.lizardi.mx/es/components/pin-priority-list Una lista de dos secciones en la que al tocar el interruptor de una fila se anima entre un grupo fijado y el resto con un movimiento de resorte continuo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: itemCount, accentColor, transitionStiffness, pinnedLabel ### Pin to top list https://fieldbook.lizardi.mx/es/components/pin-to-top-list Una lista de dos grupos en la que al hacer clic en un botón de fijación se mueve suavemente un elemento entre una sección fijada y una no fijada. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, stiffness, damping, showLabels ### Pincer Fill Button https://fieldbook.lizardi.mx/es/components/pincer-fill-button Un botón de pastilla pálido cuyas dos cortinas translúcidas se cierran desde los bordes izquierdo y derecho al flotar, deteniéndose en seco para que una banda de la base permanezca iluminada en el medio. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, leftColor, rightColor, coverage, durationMs ### Pinned Card Stack Scroll https://fieldbook.lizardi.mx/es/components/pinned-card-stack-scroll Una secuencia vertical de cartas que se fijan en su lugar y se encogen ligeramente a medida que la siguiente carta se desplaza hacia arriba para apilarse encima de ella. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: itemDistance, itemScale, baseScale, rotationAmount ### Pinned lateral gallery https://fieldbook.lizardi.mx/es/components/pinned-lateral-gallery Una sección que se mantiene en su lugar mientras se desplaza verticalmente arrastrando una fila de paneles hacia los lados, luego se suelta y deja que la página continúe. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, panels, heading, showProgress, scrollLength ### Pivot bars menu button https://fieldbook.lizardi.mx/es/components/pivot-bars-menu-button Un botón de menú cuyas tres barras irregulares giran un cuarto de vuelta y se reducen hasta convertirse en una corta columna de puntos, cambiando de color a medida que avanzan. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: restColor, activeColor, tileSize, duration, showTile ### Pixel bevel button https://fieldbook.lizardi.mx/es/components/pixel-bevel-button Un botón de losa grueso con bordes biselados del ancho de un píxel que se inunda con un color de acento al pasar el cursor y gira su bisel para que parezca presionado mientras se mantiene presionado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, bevel, size ### Pixel Bloom Card https://fieldbook.lizardi.mx/es/components/pixel-bloom-card Una tarjeta cuya superficie se llena de pequeños cuadrados que florecen hacia afuera desde el centro al pasar el mouse, brillan cuando se sostiene y se encogen al salir. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gap, speed, accent, shimmer, label ### Pixel Curtain https://fieldbook.lizardi.mx/es/components/pixel-curtain-reveal Un bloque de cuadrados de colores inunda una tarjeta en orden aleatorio, oculta el intercambio debajo y luego se borra de la misma manera dispersa. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gridSize, stepDuration, pixelColor, accent, once ### Pixel mosaic reveal https://fieldbook.lizardi.mx/es/components/pixel-mosaic-reveal Una imagen se ensambla a partir de una cuadrícula de mosaicos que se desvanecen en un escalonamiento aleatorio y luego cambia de escala de grises a todo color. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gridColumns, gridRows, grayscaleReveal, revealDurationMs ### Pixel snowfall https://fieldbook.lizardi.mx/es/components/pixel-snowfall Nieve gruesa de baja resolución que cae a través de un volumen profundo, cerca de copos gruesos y brillantes, y a lo lejos, motas individuales y tenues. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, density, speed, windAngle, blockSize, shape ### Pixel Wake https://fieldbook.lizardi.mx/es/components/pixel-wake-grid Una cuadrícula gruesa de celdas se ilumina debajo del puntero y se enfría detrás de él, dejando una estela en bloques a lo largo del panel. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gridSize, brushRadius, fade, accent, softEdges ### Plain Share Pie https://fieldbook.lizardi.mx/es/components/plain-share-pie Lo esencial de un gráfico circular: cinco sectores alineados, un trazo divisorio fino y una información sobre herramientas al pasar el mouse, sin agregar nada más. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, hueRange, strokeWidth, sweepSeconds, showTooltip ### Plain trend line https://fieldbook.lizardi.mx/es/components/plain-trend-line Un gráfico de líneas mínimo de una sola serie con una curva suave sin decoración y sin marcadores de puntos, mantenido tan simple y legible como puede serlo una línea de tendencia. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, strokeWidth, showGrid, animate ### Plan radio list https://fieldbook.lizardi.mx/es/components/plan-radio-list Una lista vertical de opciones de radio diseñadas para elegir un plan de precios, con un punto relleno que marca la selección actual. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, defaultPlan ### Plane straighten send https://fieldbook.lizardi.mx/es/components/plane-straighten-button Un botón de envío construido como un caparazón bordeado alrededor de una pastilla insertada, donde un plano de papel inclinado gira nivelado y la etiqueta avanza al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, restAngle, flyOnPress ### Plane tilt send button https://fieldbook.lizardi.mx/es/components/plane-tilt-send-button Un control de envío en forma de plato cuyo avión de papel se inclina al pasar el mouse y sale volando del marco al hacer clic antes de que la etiqueta se reinicie. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, sentLabel, accent, tilt, resetDelay ### Plasma plume https://fieldbook.lizardi.mx/es/components/plasma-plume Una alta columna de vapor luminoso que se eleva, se pliega sobre sí misma y se adelgaza hacia la parte superior, teñida de un solo color casi negro. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: tint, speed, scale, direction, detail, interactive ### Plate spin swap button https://fieldbook.lizardi.mx/es/components/plate-spin-swap-button Un botón con un contorno cuadrado cuya placa de etiqueta gira hacia la derecha al pasar el cursor, mientras que una placa idéntica gira desde la izquierda para reemplazarla. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, borderWidth, tracking, duration ### Plinth lift button https://fieldbook.lizardi.mx/es/components/plinth-lift-button Una placa de identificación con marco pesado sobre una base a cuadros que se levanta diagonalmente de su pedestal y adquiere color cuando se la sitúa sobre ella o se la enfoca. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, lift, patternSize, baseHeight ### Plus to cross tile https://fieldbook.lizardi.mx/es/components/plus-to-cross-tile Una pequeña losa cuadrada con un signo más que gira cuarenta y cinco grados formando una cruz cerrada y se hincha una fracción a medida que gira. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: ink, accent, tileSize, duration, grow ### Pointer angle sweep https://fieldbook.lizardi.mx/es/components/pointer-angle-sweep Un panel iluminado por un barrido cónico cuyo origen se encuentra debajo del puntero y cuyo borde brillante apunta hacia él, disminuyendo a un giro lento inactivo cuando el puntero se aleja. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, wedgeSoftness, followLag, idleSpin, intensity ### Pointer label cursor https://fieldbook.lizardi.mx/es/components/pointer-label-cursor Dentro de un panel delimitado, el cursor del sistema es reemplazado por una flecha dibujada con un pequeño chip con el nombre detrás de él sobre un resorte suave. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, side, sideOffset, stiffness, showChip ### Pointer lit lattice https://fieldbook.lizardi.mx/es/components/pointer-lit-lattice Una celosía de lienzo cuyas células se iluminan a medida que pasa el puntero, se mantienen y luego se descomponen; al presionar, se envía un anillo de luz que se expande hasta las esquinas más alejadas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cellSize, radius, falloff, fadeDuration, clickPulse, color ### Pointer Magnet https://fieldbook.lizardi.mx/es/components/pointer-magnet-wrap Un envoltorio que permite que todo lo que contiene se desplace hacia el puntero mientras está dentro de una zona de captura acolchada y luego se deslice de regreso al reposo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: padding, strength, label, accent, disabled ### Pointer reactive ASCII text https://fieldbook.lizardi.mx/es/components/pointer-reactive-ascii-text Una palabra representada completamente a partir de caracteres monoespaciados en lugar de letras sólidas, su densidad de glifos y un sutil cambio de color responden continuamente a qué tan cerca se encuentra el puntero. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, cellSize, reactRadius, accent ### Pointer Ripple Button https://fieldbook.lizardi.mx/es/components/pointer-ripple-button Un botón que coloca un círculo de luz exactamente donde fue presionado y lo expande más allá de los bordes a medida que se desvanece. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, rippleColor, duration, opacity, variant ### Pointer ripple mesh https://fieldbook.lizardi.mx/es/components/pointer-ripple-mesh Se toma una muestra de una placa de color a través de una malla gruesa cuyas celdas recuerdan dónde ha estado el puntero, por lo que al arrastrarla se emborrona la imagen y la mancha se relaja. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, gridSize, strength, relaxation, radius, autoSweep ### Pointer scatter headline https://fieldbook.lizardi.mx/es/components/pointer-scatter-headline Un titular dividido en caracteres individuales que se hacen a un lado y giran a medida que el puntero los recorre, para luego volver a alinearse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, accent, radius, strength, rotation ### Pointer scramble text https://fieldbook.lizardi.mx/es/components/pointer-scramble-text Al mover el puntero a lo largo de un párrafo, los caracteres cercanos se convierten en símbolos que vuelven a las letras reales a medida que el cursor se aleja. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, radius, speed ### Pointer spotlight card https://fieldbook.lizardi.mx/es/components/pointer-spotlight-card Una tarjeta cuyo borde se ilumina solo a lo largo del arco más cercano al cursor, con un suave lavado interior que sigue al puntero y retrocede cuando se aleja. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: spotlightSize, accentColor, edgeColor, mode, intensity, lag ### Pointer Spotlight Panel https://fieldbook.lizardi.mx/es/components/pointer-spotlight-panel Un panel de contenido con una luz suave que sigue el puntero a lo largo de su cara y se fija en el centro del foco del teclado. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, radius, intensity, fadeMs ### Pointer takeover zone https://fieldbook.lizardi.mx/es/components/pointer-takeover-zone Un panel que oculta el cursor del sistema mientras el puntero está dentro de él y dibuja su propia marca en su lugar, apareciendo al entrar y salir al salir. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: shape, size, accent, label, showLabel ### Tile trail https://fieldbook.lizardi.mx/es/components/pointer-tile-trail Un sendero de puntero que deja caer pequeñas baldosas redondeadas a lo largo del camino, cada una de las cuales surge de una piscina reciclada y se aleja a medida que otras nuevas ocupan su lugar. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tileCount, spawnDistance, lifetime, accent, tilt ### Pointer tilt card https://fieldbook.lizardi.mx/es/components/pointer-tilt-card Una tarjeta que se inclina en 3D hacia el puntero, con un brillo que se desliza por su cara y un resorte que la vuelve a nivelar al salir. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: maxTilt, perspective, accent, sheen, stiffness ### Pointer tilt photo card https://fieldbook.lizardi.mx/es/components/pointer-tilt-photo-card Una tarjeta fotográfica con subtítulos que se inclina hacia el puntero sobre un resorte, con un suave resaltado que se desliza por la cara a medida que gira. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: maxTilt, stiffness, hoverScale, showGlare, accent ### Polished metal button https://fieldbook.lizardi.mx/es/components/polished-metal-button Un botón con acabado de metal cepillado, con una banda resaltada que hace zoom y capta la luz cuando llega el puntero. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, finish, tint, zoom, size ### Pop scale panel https://fieldbook.lizardi.mx/es/components/pop-scale-panel Un popover que se abre desde la mitad del tamaño, apunta una pequeña flecha hacia su gatillo, atenúa la página detrás de él y se cierra con Escape o un clic externo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, align, showArrow, dimBackdrop, accent ### Presence Avatar Clusters https://fieldbook.lizardi.mx/es/components/presence-avatar-clusters Dos grupos de avatares superpuestos, en línea y fuera de línea, donde al hacer clic en un avatar se desliza hacia el otro grupo mientras su retrato se desvanece hacia o desde la escala de grises. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: avatarSize, clusterGap, accentColor, showTooltips ### Press block button https://fieldbook.lizardi.mx/es/components/press-block-button Un botón de bloque redondeado que descansa sobre una sólida repisa de sombra que se acorta a medida que el botón desciende al presionarlo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, depth, disabled ### Press down sweep button https://fieldbook.lizardi.mx/es/components/press-down-sweep-button Un botón sólido cuyo relleno se vuelve más brillante desde un lado al pasar el cursor y cae plano contra la página mientras se mantiene presionado. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, pressDepth, sweep, radius ### Press and hover scale tile https://fieldbook.lizardi.mx/es/components/press-hover-scale-tile Un mosaico que se hincha al pasar el mouse y se aplasta al presionar, con la prensa siempre superando al mouse y ambos resueltos desde un solo resorte para que los gestos nunca peleen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: hoverScale, pressScale, stiffness, accent, showState ### Press plate toggle https://fieldbook.lizardi.mx/es/components/press-plate-toggle Un botón simple de dos estados cuya placa llena se desvanece detrás de su contenido cuando se presiona, con el estado legible y configurable desde fuera del botón. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: startPressed, accent, radius, fadeMs, showControls ### Press response tile https://fieldbook.lizardi.mx/es/components/press-response-tile Una loseta táctil que se comprime bajo el punto de presión y regresa al soltarse, inclinándose hacia cualquier parte de su cara que hayas empujado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, pressScale, tilt, stiffness, label ### Press ripple button https://fieldbook.lizardi.mx/es/components/press-ripple-button Un botón sólido que genera un círculo de luz en el punto exacto que presionas, expandiéndose más allá de los bordes y desvaneciéndose a medida que lo sueltas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, rippleOpacity, expandSeconds, cornerRadius ### Press spring button https://fieldbook.lizardi.mx/es/components/press-spring-button Una familia de botones básicos en seis diseños y cuatro tamaños cuya presión se comprime sobre un resorte y sobresale hacia atrás, de manera idéntica para el puntero y el teclado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: skin, size, accentColor, label, disabled ### Settings Toggle Row https://fieldbook.lizardi.mx/es/components/press-stretch-switch Una fila de configuraciones etiquetadas que termina en un interruptor de encendido y apagado cuyo pulgar se estira al presionarlo y regresa cuando se asienta. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, on, accentColor ### Pressable icon toggle https://fieldbook.lizardi.mx/es/components/pressable-icon-toggle Un botón con un ícono y una etiqueta que permanece presionado visualmente una vez que se hace clic, para una acción independiente de encendido o apagado, como silenciar o poner en negrita. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, pressed, variant ### Pressed highlight toggle https://fieldbook.lizardi.mx/es/components/pressed-highlight-toggle Un botón de icono de dos estados que mantiene visible su estado presionado con un bloque resaltado redondeado que crece detrás del glifo desde el centro hacia afuera. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, size, skin, pressed, disabled ### Pressed ledge button https://fieldbook.lizardi.mx/es/components/pressed-ledge-button Un botón sólido que descansa sobre un borde inferior grueso y oscuro que se colapsa cuando se presiona, por lo que la tapa cae al ras como una llave real. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, depth, size ### Pressed tile icon button https://fieldbook.lizardi.mx/es/components/pressed-tile-icon-button Un ícono de mosaico suave y moldeado que se alza orgulloso de una superficie pálida y, al flotar, se hunde en ella al girar su par de sombras del revés. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, depth, radius, sink ### Priced stay range calendar https://fieldbook.lizardi.mx/es/components/priced-stay-range-calendar Un calendario de rango donde cada celda diaria muestra un pequeño precio debajo de su número, los fines de semana tienen un precio más alto que los días laborables, con el mes y el año elegidos en los menús desplegables. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, weekdayPrice, weekendPrice ### Printing icon button https://fieldbook.lizardi.mx/es/components/printing-icon-button Una pequeña impresora de líneas que solo comienza a alimentar y expulsar una hoja cuando el puntero está sobre ella. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: ink, accent, scale, cycle ### Prismatic light bands https://fieldbook.lizardi.mx/es/components/prismatic-light-bands Un panel de lienzo oscuro donde unas pocas bandas largas de luz barren y se curvan a través del campo, dividiéndose en franjas cálidas y frías en sus bordes como un rayo a través de un prisma. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, bandCount, bandWidth, warp, dispersion, speed ### Profile flip card https://fieldbook.lizardi.mx/es/components/profile-flip-card Una tarjeta de perfil vertical que se gira en 3D al pasar el cursor o al tocarla para revelar una biografía, un recuento de seguidores y una acción de seguimiento en su reverso. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: flipOn, axis, durationMs, accent, showStats ### Profile hover card https://fieldbook.lizardi.mx/es/components/profile-hover-card Al pasar el cursor o enfocar un pequeño chip de avatar, se abre un panel de perfil con un nombre, identificador, biografía y recuento de seguidores. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: openDelay, placement, showStats, accent ### Profit/Loss Line Chart https://fieldbook.lizardi.mx/es/components/profit-loss-line-chart Un gráfico de líneas cuyo trazo cambia de color dependiendo de si el valor está por encima o por debajo de cero, dividiéndose limpiamente en cada punto de cruce. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: positiveColor, negativeColor, strokeWidth, smooth ### Progress ring https://fieldbook.lizardi.mx/es/components/progress-ring Un indicador circular que recorre desde cero hasta su valor mientras el número en el medio cuenta, con dos marcas de umbral que se iluminan a medida que el arco las pasa. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: value, size, stroke, color ### Progressive edge blur https://fieldbook.lizardi.mx/es/components/progressive-edge-blur Una banda fijada a un borde de un panel de desplazamiento que difumina y desvanece su contenido gradualmente hacia el fondo en lugar de cortarlo en una línea dura. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: position, strength, thickness, layers, curve ### Proximity variable type https://fieldbook.lizardi.mx/es/components/proximity-variable-type El texto del párrafo en línea se espesa y amplía letra por letra sólo dentro de un radio establecido alrededor del puntero, y se estrecha suavemente hasta volver a la normalidad fuera de él. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: sentence, radius, falloff, textColor ### Pulse button https://fieldbook.lizardi.mx/es/components/pulse-button Un botón que responde a un clic con un único anillo de expansión desde la posición del puntero y una breve presión hacia abajo, luego se asienta. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, ringColor, duration, rounded ### Pulse grid mesh https://fieldbook.lizardi.mx/es/components/pulse-grid-mesh Una malla de alambre cuadrada que se hincha hacia afuera en lentos anillos desde el centro, más brillante en el centro y desaparece antes de llegar a los bordes. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, gridSize, rippleDepth, thickness, glow, interactive ### Pulse halo button https://fieldbook.lizardi.mx/es/components/pulse-halo-button Un botón sólido que sigue emitiendo un suave halo de su propio color, ya sea respirando en su lugar o lanzando anillos en expansión en un bucle. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, variant, cycleMs, distance ### Ring bloom https://fieldbook.lizardi.mx/es/components/pulse-ring-bloom Anillos de luz concéntricos nacen en el centro, se hinchan hacia afuera y se desvanecen, cada uno detrás del anterior, con un estallido al hacer clic. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: innerColor, outerColor, ringCount, speed, thickness, parallax ### Pulsing Dot Field https://fieldbook.lizardi.mx/es/components/pulsing-dot-field Un entramado de mosaicos de pequeños puntos que llena su contenedor, cada uno respirando más brillante y más tenuemente en su propio ciclo independiente. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: spacing, dotRadius, pulse, speed, accentColor, maskSize ### Pulsing play orb https://fieldbook.lizardi.mx/es/components/pulsing-play-orb Un botón de reproducción redondo que lanza un anillo de luz hacia afuera con un ritmo constante, se hincha bajo el puntero y ralentiza su pulso una vez en pausa. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, accentDeep, size, pulseSeconds, playing ### Quantity Stepper Field https://fieldbook.lizardi.mx/es/components/quantity-stepper-field Un control de cantidad etiquetado: un paso a paso redondeado de dos botones con un número en el medio que aumenta o disminuye dentro de un rango establecido. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, value, min, max, accentColor ### Quarter Turn Add Button https://fieldbook.lizardi.mx/es/components/quarter-turn-add-button Un signo más con un círculo que gira un cuarto de revolución y se solidifica cuando se le apunta, luego cambia instantáneamente a un trazo ligero mientras se sostiene. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, size, turn, strokeWidth, fillOnHover ### Quick launch palette https://fieldbook.lizardi.mx/es/components/quick-launch-palette Una paleta de comandos activada por el teclado que se abre con un mensaje emergente, filtra una lista de acciones agrupadas a medida que escribe y admite navegación completa con las teclas de flecha. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, placeholder, showShortcuts, startOpen ### Quick menu orb https://fieldbook.lizardi.mx/es/components/quick-menu-orb-button Un disparador de acento redondo cuyo glifo se pliega en una marca de cierre mientras un pequeño menú titulado de filas de íconos se amplía debajo de él. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, triggerSize, side, open, caption, gap ### Quick Pick Date Card https://fieldbook.lizardi.mx/es/components/quick-pick-date-card Una tarjeta de calendario mensual con una fila de botones de acceso directo de fechas relativas debajo, por lo que una fecha común está a un clic de distancia sin abrir un menú. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, shortcutCount ### Quiet File Tree https://fieldbook.lizardi.mx/es/components/quiet-file-tree Un árbol de carpetas y archivos donde un resaltado suave se desliza entre las filas a medida que se mueve el puntero o el foco del teclado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, indentSize, rowHeight, highlightOnHover ### Quiet Ring Spinner https://fieldbook.lizardi.mx/es/components/quiet-ring-spinner Un anillo de carga mínimo de un solo elemento: un círculo delgado con un cuarto de color que gira continuamente para marcar un estado de actividad. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, accentColor, speedMs ### Radial action wheel https://fieldbook.lizardi.mx/es/components/radial-action-wheel Al hacer clic con el botón derecho en una zona, se abre un anillo circular de acciones de iconos centrado en el puntero, cada cuña se resalta al pasar sobre ella y se activa al hacer clic. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: wheelSize, iconSize, accentColor ### Radial cable pulses https://fieldbook.lizardi.mx/es/components/radial-cable-pulses Los cables cónicos se abren en abanico desde un punto en el centro y se curvan hacia los bordes mientras pulsos brillantes corren a lo largo de ellos. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: pulseColor, cableColor, cableCount, pulseSpeed, waviness, direction ### Radial light burst https://fieldbook.lizardi.mx/es/components/radial-light-burst Filos de luz surgen de un centro oscuro, girando en tres dimensiones y difuminados como si hubieran sido disparados en una exposición prolongada. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, blades, intensity, speed, distort, motion ### Radial Share Fan https://fieldbook.lizardi.mx/es/components/radial-share-fan Un disparador de ronda compartida que lanza una pila de botones de destino a lo largo de un arco, cada uno de los cuales da una vuelta completa hasta colocarse en su lugar. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, count, radius, spread, stagger, spin ### Radial sheen button https://fieldbook.lizardi.mx/es/components/radial-sheen-button Un botón corto parecido a una llave iluminado desde su esquina superior derecha, con un borde de base fino que se invierte cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, sheen, radius ### Radio dot select https://fieldbook.lizardi.mx/es/components/radio-dot-select Un grupo de radio vertical donde al seleccionar una opción aparece un punto en su círculo mientras que el punto anterior se encoge y se desvanece. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: option1, option2, option3, selected, accent ### Raised bezel button https://fieldbook.lizardi.mx/es/components/raised-bezel-button Una tecla de acción táctil construida a partir de tres placas apiladas, un borde mecanizado, un cuerpo redondeado y una cara de cápsula insertada, que se hunde en su sombra cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, bezelWidth, pressDepth, showIcon ### Raised Slice Donut https://fieldbook.lizardi.mx/es/components/raised-slice-donut Un donut donde una porción se eleva permanentemente sobre el anillo al extender su radio exterior, y la elevación se desliza hacia cualquier otra porción al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, activeIndex, raise, holeRatio, hueRange ### Range filter area chart https://fieldbook.lizardi.mx/es/components/range-filter-area-chart Un gráfico de área de tráfico diario con un selector de rango en el encabezado que reduce la ventana a tres meses, treinta días o siete días y vuelve a interpolar la forma. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, secondColor, defaultRange, showLegend, animate ### Range Filtered Bar Report https://fieldbook.lizardi.mx/es/components/range-filtered-bar-report Una tarjeta de análisis con un gráfico de barras de recuentos diarios de visitantes que se redibuja solo a los días dentro de un rango de fechas elegido de un calendario desplegable. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, title, subtitle, rangeLabel ### Range span slider https://fieldbook.lizardi.mx/es/components/range-span-slider Un control deslizante con dos pulgares en una pista, que permite a alguien elegir un valor alto y bajo juntos como un lapso completo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: low, high, accent ### Ranked Share Bar Chart https://fieldbook.lizardi.mx/es/components/ranked-share-bar-chart Un gráfico de clasificación horizontal de una serie dividida por categoría, donde cada barra toma su propio tono de una paleta ordenada y las filas se clasifican de mayor a menor. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: paletteBase, rowCount, barRadius, animate ### Reactive bento panels https://fieldbook.lizardi.mx/es/components/reactive-bento-panels Una cuadrícula bento de paneles que brillan cuando el puntero, se inclinan en 3D, se desplazan hacia el cursor y estallan con partículas y una onda al hacer clic. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: glowColor, spotlightRadius, particleCount, enableTilt ### Reading highlight copy https://fieldbook.lizardi.mx/es/components/reading-highlight-copy Un párrafo que se ilumina palabra por palabra a medida que se desplaza, dejando las palabras leídas brillantes y las no leídas atenuadas, de modo que la posición de desplazamiento también funciona como posición de lectura. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, accent, dimOpacity, unit, showRail ### Receding stack carousel https://fieldbook.lizardi.mx/es/components/receding-stack-carousel Un carrusel donde las cartas retroceden en la distancia detrás de la carta enfocada, oscureciéndose y borrándose cuanto más atrás se sientan. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: visibleCards, depth, tilt, autoplay ### Record toggle pulse https://fieldbook.lizardi.mx/es/components/record-toggle-pulse-pill Una pastilla casi negra con un micrófono decorativo que alterna la grabación, respira en el tiempo mientras está armado y cuenta el tiempo transcurrido en lugar de la etiqueta. Frameworks: react Access: member Public prop names: label, accent, pulseSpeed, showTimer ### Reflowing Notification Stack https://fieldbook.lizardi.mx/es/components/reflowing-notification-stack Una pila de tarjetas de notificación que fluyen suavemente cuando se agrega una nueva o se descarta una antigua, en lugar de saltar. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, autoDismissSeconds, stackGap, addButtonLabel ### Refracted glass player https://fieldbook.lizardi.mx/es/components/refracted-glass-player Un panel de reproductor multimedia que se comporta como una gruesa losa de vidrio, doblando todo lo que se encuentra detrás de él cerca de los bordes redondeados mientras las teclas se refractan con más fuerza que el cuerpo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: distortion, frost, radius, accent ### Refractive Glass Panel https://fieldbook.lizardi.mx/es/components/refractive-glass-panel Un panel redondeado cuyo fondo se dobla y se divide en tenues franjas rojas, verdes y azules cerca de su borde, como si se mirara a través de un verdadero panel de vidrio grueso. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: cornerRadius, refractionStrength, edgeThickness, tintColor ### Refresh sweep spin https://fieldbook.lizardi.mx/es/components/refresh-sweep-spin-button Un botón de actualización cuyo panel de íconos más oscuro recorre la cara al pasar el mouse mientras la flecha hace exactamente una vuelta, luego sigue girando a lo largo de una carrera ocupada antes de volver a descansar. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, width, spinMs, busyMs ### Region heat map https://fieldbook.lizardi.mx/es/components/region-heat-map Un mapa mundial de mosaicos hexagonales con zoom donde cada región se completa a partir de una escala de color de cinco pasos según su valor, se ilumina al pasar el mouse y muestra información sobre herramientas con su nombre y número. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: scaleColor, zoomEnabled, showGraticule, maxZoom ### Relay fill button https://fieldbook.lizardi.mx/es/components/relay-fill-button Un botón semicircular que se llena al pasar el mouse a través de un relevo de dos barras de carrera que suben a su altura máxima antes de que la etiqueta cambie de color. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, sweepMs, gap, radius ### Repeat mode cycler https://fieldbook.lizardi.mx/es/components/repeat-mode-cycler Un chip teñido que desactiva un bucle, una vez por todas con cada clic, haciendo girar su flecha hacia atrás en cada cambio. Frameworks: react Access: member Public prop names: mode, accent, spinSeconds, showLabel ### Repelling dot field card https://fieldbook.lizardi.mx/es/components/repelling-dot-field-card Un panel promocional lleno de un campo de puntos que se alejan del puntero y se iluminan a medida que pasa. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: dotSpacing, dotSize, repelRadius, repelStrength, accent ### Resizing hint tooltip https://fieldbook.lizardi.mx/es/components/resizing-hint-tooltip Una etiqueta flotante cuya burbuja cambia suavemente de tamaño cuando el texto es más largo o más corto, en lugar de cambiar de tamaño. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: openDelay, closeDelay, side, accent ### Return to top chip https://fieldbook.lizardi.mx/es/components/return-to-top-chip Un pequeño chip de esquina que se desliza a la vista una vez que su panel pasa un umbral, se levanta debajo del puntero y desliza el panel hacia la parte superior al hacer clic. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: threshold, accent, corner, chipSize, smooth ### Revenue Area Card https://fieldbook.lizardi.mx/es/components/revenue-area-stat-card Una tarjeta métrica cuyo cuerpo es un minigráfico de área rellena; Al pasar el cursor sobre un mes, se cambia el título, el título y la píldora de cambio a la lectura de ese mes. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, areaOpacity, smoothing, trend, title ### Reversing bars menu button https://fieldbook.lizardi.mx/es/components/reversing-bars-menu-button Un pequeño mosaico de menú cuadrado cuyas tres barras apiladas intercambian anchos al pasar el mouse mientras el mosaico en sí se desvanece de un color de relleno a otro. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, hoverColor, size, barThickness, duration ### RGB glitch heading https://fieldbook.lizardi.mx/es/components/rgb-glitch-heading Un encabezado que se divide en copias desplazadas en rojo y cian recortadas en bandas horizontales saltantes, parpadeando como una señal de transmisión perdiendo sincronización. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, speed, enableOnHover, enableShadows ### Ribbon light streams https://fieldbook.lizardi.mx/es/components/ribbon-light-streams Mechones de líneas de cabello recorren la oscuridad como cintas de luz, se cruzan cerca del centro y se alejan del puntero. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, ribbonCount, lineCount, speed, bendStrength, parallax ### Ribbon trail flow https://fieldbook.lizardi.mx/es/components/ribbon-trail-flow Varias cintas de colores persiguen la aguja con sus propios resortes, se estrechan hasta formar una punta y se trenzan a medida que la aguja gira. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: ribbonCount, thickness, spring, friction, accent, fadeTail ### Right click context menu https://fieldbook.lizardi.mx/es/components/right-click-context-menu Un menú que aparece exactamente donde aterriza un clic derecho o una pulsación larga, con acciones, una casilla de verificación, un grupo de radio y un submenú flotante. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, showSubmenu, showCheckableItems ### Right Click Menu https://fieldbook.lizardi.mx/es/components/right-click-menu Un menú emergente que aparece en el puntero cuando se hace clic derecho en un área de destino y ofrece acciones agrupadas, sugerencias de atajos de teclado y un submenú anidado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, itemCount, showShortcuts ### Rim ramp button https://fieldbook.lizardi.mx/es/components/rim-ramp-button Un borde grueso de color rodea una cara interior oscura; Al pasar el cursor, la cara se aclara y la rampa de color del borde inunda todo el botón. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, hueShift, inset, duration ### Rim to fill gradient button https://fieldbook.lizardi.mx/es/components/rim-to-fill-gradient-button Un botón oscuro muestra sólo un fino borde degradado en reposo; Al pasar el cursor, se cae el panel interior para que el degradado inunde toda la cara, y al presionarlo se presiona hacia abajo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, endColor, rimWidth, angle, pressScale ### Ring halo button https://fieldbook.lizardi.mx/es/components/ring-halo-button Un botón de acento sólido que se oscurece al pasar el mouse y desarrolla un anillo de contorno concéntrico con un tono de color suave debajo. Frameworks: react Access: member Public prop names: label, accent, size, ringGap, disabled ### Ring halo pill button https://fieldbook.lizardi.mx/es/components/ring-halo-pill-button Un botón tipo pastilla que mantiene un espacio claro alrededor de su núcleo de color, llena ese espacio con un anillo de acento iluminado al pasar el mouse o al enfocar el teclado, y se aprieta hacia adentro mientras se presiona. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, ringWidth, pressScale, uppercase ### Ringing bell badge https://fieldbook.lizardi.mx/es/components/ringing-bell-badge Un botón de campana de notificación elaborado a partir de formas simples que se mueve en ambos sentidos con una patada a pequeña escala y lleva un conteo en vivo no leído. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, accent, size, ring ### Ripple lens https://fieldbook.lizardi.mx/es/components/ripple-lens-surface Una superficie de imagen que se deforma donde la toca el puntero, cada onda se expande, hace girar la imagen debajo de ella y vuelve a quedar plana. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: strength, swirl, brushSize, rings, trigger, highlight ### Ripple Origin Grid https://fieldbook.lizardi.mx/es/components/ripple-origin-grid Una cuadrícula de mosaicos de colores que se iluminan en una onda que irradia hacia afuera desde un mosaico elegido, cronometrada por la distancia desde ese mosaico. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gridSize, delayPerUnit, accentColor ### Ripple tap button https://fieldbook.lizardi.mx/es/components/ripple-tap-button Un botón sólido que envía un círculo hacia afuera desde el punto exacto que presionaste, recortado a su forma redondeada. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, rippleSeconds, pressScale, size ### Rising arrow link button https://fieldbook.lizardi.mx/es/components/rising-arrow-link-button Un botón de leer más donde la etiqueta se desliza hacia los lados para abrir un espacio y una flecha sube desde debajo del borde inferior recortado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, duration, radius, labelShift ### Rising Circle Fill https://fieldbook.lizardi.mx/es/components/rising-circle-fill-button Una pastilla delineada que se llena al pasar el mouse mientras un gran círculo de acento se eleva desde debajo de su borde mientras el seguimiento de la etiqueta se amplía. Frameworks: react Access: member Public prop names: label, accent, trackingGrowth, speed ### Rising disc icon row https://fieldbook.lizardi.mx/es/components/rising-disc-icon-row Una fila de botones con íconos anillados donde al pasar el mouse levanta un disco lleno desde detrás de su anillo, dejando el glifo oscurecido dentro del contorno vacío. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, count, hueSpread, size, lift ### Rising Fill Badge https://fieldbook.lizardi.mx/es/components/rising-fill-badge-button Un mosaico cuadrado cuya insignia redonda se encoge y sube mientras un gran círculo se desplaza hacia arriba desde abajo y una leyenda se eleva en el espacio que deja. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, caption, wipeMs, spin ### Rising Fill Button https://fieldbook.lizardi.mx/es/components/rising-fill-button Un botón con borde hueco que se llena de color desde el borde inferior hacia arriba, como si fuera un líquido que se eleva, cuando lo enfocas o lo colocas sobre él. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, duration, radius ### Rising tooltip icon button https://fieldbook.lizardi.mx/es/components/rising-tooltip-icon-button Un botón de icono sin cromo cuyo glifo se hincha y adquiere un color de advertencia al pasar el cursor, mientras que un pequeño chip de etiqueta se eleva sobre él después de un breve retraso. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, growth, delaySeconds, size ### Rocking archive tint pill https://fieldbook.lizardi.mx/es/components/rocking-archive-tint-pill Un botón de pastilla tintado cuyo glifo de carpeta se balancea de lado a lado al pasar el mouse o al foco del teclado y se estabiliza mientras se presiona. Frameworks: react Access: open Public prop names: label, accent, tintStrength, rockDegrees, rockSpeed ### Rocking icon CTA https://fieldbook.lizardi.mx/es/components/rocking-icon-cta Una píldora de acento sólido cuyo ícono de calendario principal se balancea como un metrónomo al pasar el mouse y, cuando se hace clic, dibuja una marca y cambia el texto a una etiqueta confirmada antes de regresar. Frameworks: react Access: open Public prop names: label, confirmLabel, accent, rockDegrees, rockSeconds ### Rolling cube label button https://fieldbook.lizardi.mx/es/components/rolling-cube-label-button Un botón cuya etiqueta se encuentra en la cara de una caja poco profunda, por lo que al apuntar hacia él, la caja hace rodar un cuarto de vuelta y llega un segundo mensaje desde arriba. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, hoverLabel, accent, duration, uppercase ### Rolling stat tiles https://fieldbook.lizardi.mx/es/components/rolling-stat-tiles Una fila de mosaicos de estadísticas cuyos números grandes avanzan dígito a dígito hasta alcanzar un nuevo valor en lugar de romperse. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, tileCount, compactNotation ### Rotating backer button https://fieldbook.lizardi.mx/es/components/rotating-backer-glow-button Una placa oscura con un panel tintado escondido justo detrás que gira media vuelta al flotar mientras la luz que se derrama más allá de sus bordes se extiende más. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, bloom, rotation, pressScale ### Rotating badge text https://fieldbook.lizardi.mx/es/components/rotating-badge-text Una frase corta que se repite se organiza letra por letra alrededor de un círculo completo y gira lenta y continuamente, como una insignia estampada o una etiqueta de vinilo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: phrase, durationSeconds, reverse, accent ### Rotating beam rim button https://fieldbook.lizardi.mx/es/components/rotating-beam-rim-button Un botón en forma de hoja con un haz brillante de dos tonos que gira alrededor de su borde, visible sólo en el espacio alrededor de la placa frontal. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, secondary, cycle, rim ### Rotating face plate https://fieldbook.lizardi.mx/es/components/rotating-face-plate-button Un botón cuya placa oscura etiquetada gira en una esquina y crece cuando se activa, exponiendo la losa decorativa debajo como cuatro triángulos, luego se encoge e intercambia colores mientras se presiona. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, angle, scale, size ### Rotating sky explore button https://fieldbook.lizardi.mx/es/components/rotating-sky-explore-button Un botón cuyo relleno es un enorme disco barrido estacionado debajo; Al flotar, el disco gira hacia el marco como un cielo nocturno que gira mientras pequeñas estrellas caen a alturas escalonadas. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, starCount, sweepDegrees, sweepSeconds, radius ### Rotating Word Swap https://fieldbook.lizardi.mx/es/components/rotating-word-swap Una frase introductoria permanece fija mientras una palabra final recorre una lista, cada una intercambia caracteres deslizantes hacia arriba y hacia afuera a medida que la siguiente palabra se desliza hacia arriba y hacia adentro. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: words, interval, accentColor ### Round lift action button https://fieldbook.lizardi.mx/es/components/round-lift-action-button Un botón de acción circular con una flecha triangular sólida que se hincha y se eleva al pasar el mouse, se oscurece mientras se mantiene presionado y gira su flecha hacia cualquiera de las cuatro direcciones. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, diameter, direction, growth, shadow ### Rounded bar chart https://fieldbook.lizardi.mx/es/components/rounded-bar-chart Un gráfico de barras sencillo de una sola serie con barras superiores generosamente redondeadas, líneas de cuadrícula tenues y un chip de valor que aparece sobre cualquier barra sobre la que se coloque el cursor. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, months, barRadius, barGap, animate ### Roving focus tabs https://fieldbook.lizardi.mx/es/components/roving-focus-tabs Una lista de pestañas con el teclado primero creada en torno al orden de las pestañas itinerantes, donde Tab solo puede acceder a la pestaña activa o enfocada y un marcador delgado rastrea la actual. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultTab, markerThickness ### Rubber sheet panel https://fieldbook.lizardi.mx/es/components/rubber-sheet-panel Un panel que se comporta como goma estirada: el puntero lo agarra, los puntos vecinos lo arrastran y, al soltarlo, lo devuelve con un bamboleo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: stiffness, damping, grabRadius, pull, showGrid, accent ### Scale in on view https://fieldbook.lizardi.mx/es/components/scale-in-on-view Un contenedor que mantiene a su hijo pequeño hasta que aparece por primera vez en la vista, luego lo eleva a tamaño completo, con un escalonamiento opcional por elemento para las listas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: startScale, stagger, delay, damping, accent ### Scaling dot carousel https://fieldbook.lizardi.mx/es/components/scaling-dot-carousel Un carrusel de diapositivas cuya tarjeta activa se encuentra a escala completa mientras sus vecinas se encogen ligeramente, junto con indicadores de puntos que se ensanchan hasta convertirse en píldoras etiquetadas. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: loop, accentColor, slideCount ### Scanline sweep button https://fieldbook.lizardi.mx/es/components/scanline-sweep-button Un botón oscuro estilo consola que deja caer una delgada barra brillante por su cara al pasar el mouse mientras el borde pesado de su borde migra de abajo hacia arriba. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, sweepSeconds, barHeight, bloom ### Scanning wire grid https://fieldbook.lizardi.mx/es/components/scanning-wire-grid Una fina rejilla de alambre en perspectiva se inclina con el puntero mientras una banda brillante la recorre formando un bucle, iluminando cada línea que cruza. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: scanColor, lineColor, gridScale, scanDuration, lineStyle, jitter ### Scattering glyph pill https://fieldbook.lizardi.mx/es/components/scattering-glyph-pill Una pastilla redondeada que se hincha al flotar mientras tres pequeños glifos salen disparados de detrás de la etiqueta y caen en el espacio que la rodea. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, hoverScale, spread, glow ### Scene reveal button https://fieldbook.lizardi.mx/es/components/scene-reveal-button Un botón cuya placa de etiqueta se desliza hacia arriba al pasar el mouse para descubrir una pequeña escena meteorológica de nubes a la deriva, colinas en aumento, un sol cambiante y copos dispersos. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, flakes, width, spinSpeed ### Scramble text https://fieldbook.lizardi.mx/es/components/scramble-text Texto monoespaciado que aparece un carácter a la vez a partir de glifos rodantes detrás de un cabezal de escritura y se suelta nuevamente dondequiera que el puntero lo roce. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, speed, glyphSet ### Scribble Edit Chip https://fieldbook.lizardi.mx/es/components/scribble-edit-chip Un chip de edición cuyo lápiz hace un garabato corto de un lado a otro al pasar el cursor mientras un subrayado tambaleante se dibuja debajo de la etiqueta y al hacer clic lo fija como el objetivo de edición activo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, scribbleSeconds, underline ### Scribble strike checklist https://fieldbook.lizardi.mx/es/components/scribble-strike-checklist Una lista de tareas en la que marcar una fila dibuja una línea oscilante dibujada a mano a lo largo de la etiqueta y al desmarcarla se retrae. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: strokeMs, accent, wobble, dimCompleted ### Scroll blur reveal text https://fieldbook.lizardi.mx/es/components/scroll-blur-reveal-text Un bloque de texto que comienza borroso y desplazado, luego se enfoca palabra por palabra o letra por letra la primera vez que aparece en la vista. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, splitBy, direction, delayMs ### Scroll cue button https://fieldbook.lizardi.mx/es/components/scroll-cue-button Una pequeña posibilidad de desplazamiento cuyo galón cae a través de su ventana recortada al pasar el mouse o enfocarse en un bucle sin fin, y cuyo clic desliza el área desplazable más cercana hacia la siguiente sección. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: caption, accent, cycle, direction, showCaption ### Scroll cue pill https://fieldbook.lizardi.mx/es/components/scroll-cue-pill Una cápsula alta que sostiene una flecha larga y delgada que flota en un bucle, crece debajo del puntero y colapsa una vez utilizada. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, direction, height, driftDistance, loop ### Scroll dim text reveal https://fieldbook.lizardi.mx/es/components/scroll-dim-text-reveal Un párrafo permanece atenuado y se ilumina palabra por palabra al mismo ritmo que el progreso del desplazamiento, luego se oscurece nuevamente a medida que retrocede. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, scrollSpan, dimOpacity, accent ### Scroll entrance wrapper https://fieldbook.lizardi.mx/es/components/scroll-entrance-wrapper Un envoltorio que mantiene a sus hijos estacionados en su posición hasta que aparecen en la vista, luego reproduce una llegada facilitada y nunca la repite. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: distance, direction, duration, scale, threshold, accent ### Scroll expand stage https://fieldbook.lizardi.mx/es/components/scroll-expand-stage Un pequeño marco redondeado crece para llenar toda la ventana gráfica a medida que se desplaza, su título se eleva mientras el artículo que se encuentra debajo se desvanece. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: startWidth, startRadius, zoom, smoothing, title, accent ### Scroll float reveal https://fieldbook.lizardi.mx/es/components/scroll-float-reveal Los caracteres de encabezado flotan desde abajo y toman forma a medida que su sección se desplaza por la ventana gráfica, deslizándose directamente a la posición de desplazamiento. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, stagger, duration ### Scroll focus column https://fieldbook.lizardi.mx/es/components/scroll-focus-column Una columna de desplazamiento donde cada fila se desvanece y se reduce a medida que sale de la banda de lectura y vuelve a su presencia total cuando ingresa, por lo que solo el medio es completamente sólido. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, rows, minOpacity, minScale, showBand ### Scroll focus reveal https://fieldbook.lizardi.mx/es/components/scroll-focus-reveal Un párrafo comienza inclinado, oscuro y borroso, luego se endereza y se afina palabra por palabra a medida que el lector se desplaza por él. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, baseOpacity, blurStrength ### Scroll hint button https://fieldbook.lizardi.mx/es/components/scroll-hint-mouse-button Una cápsula estrecha y vertical con una cuenta que se desliza hacia abajo en su interior mediante un bucle, como se describe a continuación, que desplaza el área desplazable más cercana una pantalla cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, caption, cycleSeconds, height, glow ### Scroll Position Progress Bar https://fieldbook.lizardi.mx/es/components/scroll-position-progress-bar Una barra delgada que crece a lo ancho de un contenedor a medida que el usuario lo desplaza de principio a fin. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, barHeight, springStiffness, trackGlobalPage ### Scroll progress rail https://fieldbook.lizardi.mx/es/components/scroll-progress-rail Una barra fina fijada en la parte superior de un panel desplazable que se llena de izquierda a derecha en sincronización exacta con la distancia que se desplaza el contenido y regresa cuando se desplaza hacia arriba. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, thickness, showTrack ### Scroll Progress Text Reveal https://fieldbook.lizardi.mx/es/components/scroll-progress-text-reveal Una oración larga permanece fijada en la pantalla mientras la página se desplaza, y cada palabra se ilumina individualmente desde tenue hasta completamente iluminada a medida que la posición de desplazamiento llega a su turno. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, dimOpacity, scrollLength ### Scroll snap word list https://fieldbook.lizardi.mx/es/components/scroll-snap-word-list Una larga lista de palabras se desplaza dentro de una ventana fija y la palabra que cruza la banda central se ilumina con un pop primaveral mientras el resto permanece oscuro e inclinado. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: rotationDepth, dimOpacity, accentColor ### Scrollable modal dialog https://fieldbook.lizardi.mx/es/components/scrollable-modal-dialog Un modal de uso general con un encabezado, un cuerpo que se desplaza de forma independiente una vez que su contenido se desborda y un pie de página, que se puede cerrar con su propio botón de cierre, un clic externo o Escape. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: title, description, accentColor ### Scrolling content strip https://fieldbook.lizardi.mx/es/components/scrolling-content-strip Una franja horizontal de tarjetas pequeñas se desplaza hacia los lados en un bucle ininterrumpido y se detiene en el momento en que un puntero se posa sobre cualquier tarjeta que contenga. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: speed, reverse, pauseOnHover, accent, gap ### Scrolling tile lattice https://fieldbook.lizardi.mx/es/components/scrolling-tile-lattice Una celosía delineada sin fin que se desplaza en una dirección, llenando las celdas debajo del puntero y dejándolas desvanecerse detrás de él. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: shape, direction, tileSize, speed, fillColor, trailLength ### Scrub Number Input https://fieldbook.lizardi.mx/es/components/scrub-number-input Un campo numérico con botones de incremento y disminución más una etiqueta que se puede arrastrar y que desplaza el valor hacia arriba o hacia abajo a medida que lo arrastra hacia los lados. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, value, min, max, accentColor ### Scrubbing tooltip chart https://fieldbook.lizardi.mx/es/components/scrubbing-tooltip-chart Un gráfico de líneas con una cruz con resorte, un punto de valor pegado a la línea, un panel flotante que gira los lados cerca de los bordes y una pastilla con fecha en la parte inferior. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, showDatePill, dotStyle ### Sealing frame button https://fieldbook.lizardi.mx/es/components/sealing-frame-button Un cuadrado delinea un llamado a la acción cuya frontera se encuentra interrumpida por tres espacios en reposo; flotar sella el marco y se invierte el relleno. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, borderWidth, ruleLength, uppercase ### Seamless share pie https://fieldbook.lizardi.mx/es/components/seamless-share-pie Un pastel sólido con sus porciones fusionadas de borde a borde y sin espacios ni trazos entre ellas, por lo que pasar el cursor es lo único que revela dónde termina una porción y comienza la siguiente. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, hueRange, seamOnHover, dimOthers, showReadout ### Search Composer Field https://fieldbook.lizardi.mx/es/components/search-composer-field Un cuadro de mensaje que crece con lo que escribes, con un interruptor de búsqueda cuya etiqueta se abre y una acción de envío que se activa una vez que hay texto. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: placeholder, toggleLabel, lookupOn, accent, maxHeight ### Searchable Select https://fieldbook.lizardi.mx/es/components/searchable-select Un botón que abre una pequeña ventana emergente con un campo de búsqueda y una lista filtrable de opciones, para que alguien pueda escribir para limitar las opciones en lugar de desplazarse por un largo menú desplegable. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, placeholder, searchPlaceholder, optionCount ### Seasonal Range Picker https://fieldbook.lizardi.mx/es/components/seasonal-range-picker Un selector de rango de dos meses restringido a una temporada abierta fija, que atenúa cada fecha antes o después de la ventana permitida en ambos meses visibles. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, seasonStartMonth, seasonEndMonth ### Segment Fade Spinner https://fieldbook.lizardi.mx/es/components/segment-fade-spinner Un indicador de carga de ocho segmentos radiales que aparecen y desaparecen en secuencia para que un arco brillante parezca perseguirse alrededor del anillo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: color, size, speed ### Segment Spring Lab https://fieldbook.lizardi.mx/es/components/segment-spring-lab Un control segmentado de selección única para ajustar qué tan rígido o flojo se siente el resorte cuando su punto culminante se desliza entre segmentos. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: springStiffness, springDamping, accentColor ### Segmented choice bar https://fieldbook.lizardi.mx/es/components/segmented-choice-bar Una fila de botones de alternancia conectados para elegir una o varias opciones a la vez, con el estilo de una barra continua. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: mode, size, disabled, accentColor ### Segmented Choice Switch https://fieldbook.lizardi.mx/es/components/segmented-choice-switch Un conmutador de píldoras redondeado donde exactamente una opción está activa y un resaltado deslizante se desliza debajo de la opción elegida. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, optionOne, optionTwo, optionThree, highlightColor ### Segmented progress meter https://fieldbook.lizardi.mx/es/components/segmented-progress-meter Un medidor de progreso dibujado como una fila de muescas que se iluminan a su vez, con una muesca inicial parcialmente llena y una leyenda que nombra la etapa actual. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: segments, value, autoplay, accent, showCaption ### Segmented Toggle Row https://fieldbook.lizardi.mx/es/components/segmented-toggle-row Una fila de botones de íconos fusionados en una barra donde exactamente un segmento permanece presionado, como un selector de alineación. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: defaultValue ### Segmented toggle tabs https://fieldbook.lizardi.mx/es/components/segmented-toggle-tabs Un control segmentado compacto en forma de píldora para cambiar entre una pequeña cantidad de opciones cortas, con un bloque lleno que se desliza hacia cualquier segmento seleccionado. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, defaultRange, size ### Compact select menu https://fieldbook.lizardi.mx/es/components/select-menu-compact Un botón de activación que abre una lista flotante de opciones, con la selección actual mostrada en el botón y una marca de verificación al lado en la lista. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: defaultValue, accent ### Send flight button https://fieldbook.lizardi.mx/es/components/send-flight-button Un botón de luz cepillado que reproduce una breve secuencia de envío: el glifo de papel sale volando, una etiqueta de envío cuenta sus puntos y luego cae un cheque. Frameworks: react Access: open Public prop names: label, sentLabel, accent, sequenceMs, autoReplay ### Send flyaway bezel https://fieldbook.lizardi.mx/es/components/send-flyaway-bezel-button Un botón de envío con bisel grueso donde el avión de papel se balancea y luego sale volando del borde derecho al pasar el mouse o enfocar con el teclado mientras la etiqueta lo persigue. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, width, flyMs, bobbing ### Sequential terminal log https://fieldbook.lizardi.mx/es/components/sequential-terminal-log Una ventana de terminal que reproduce una sesión programada una vez que aparece, escribiendo comandos y apareciendo líneas de estado una tras otra. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: typingSpeedMs, accentColor, autoplayOnView ### Series icon area chart https://fieldbook.lizardi.mx/es/components/series-icon-area-chart Un gráfico de áreas apiladas cuya leyenda le da a cada serie un pequeño glifo de dirección dibujado al lado de su muestra y le permite silenciar una banda haciendo clic en ella. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, secondColor, fillOpacity, showLegend, animate ### Series Legend List https://fieldbook.lizardi.mx/es/components/series-legend-list Una leyenda que también funciona como una lista clasificada: punto, etiqueta, valor móvil, porcentaje del total y una barra delgada, con un desplazamiento que silencia las otras filas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, title, items, showPercentage, showProgress ### Series Switch Trend https://fieldbook.lizardi.mx/es/components/series-switch-trend Una línea de tendencia de noventa días con dos mosaicos en total en el encabezado; Al elegir un mosaico, la línea se transforma en esa serie y se intercala el trazo con su acento. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: primaryColor, secondaryColor, days, strokeWidth, showGrid ### Sessions Line Card https://fieldbook.lizardi.mx/es/components/sessions-line-stat-card Una tarjeta de sesión de siete días donde la lectura se encuentra dentro de la trama, anclada en la parte inferior derecha, y un punto resaltado recorre el spline mientras navegas. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, strokeWidth, smoothing, trend, title ### Preference checklist https://fieldbook.lizardi.mx/es/components/settings-checklist-rows Una pila de filas de preferencias etiquetadas, cada una con su propia casilla de verificación de color destacado que rellena y dibuja una marca de verificación de forma independiente. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rowCount, size, variant, accentColor ### Settings Group Accordion https://fieldbook.lizardi.mx/es/components/settings-group-accordion Un grupo vertical de secciones etiquetadas que pueden expandirse de forma independiente, por lo que más de una permanece abierta a la vez, a diferencia del típico acordeón de una sola apertura. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: allowMultiple, accentColor, transitionMs, showChevron ### Settings toggle switch https://fieldbook.lizardi.mx/es/components/settings-toggle-switch Un pequeño interruptor de encendido/apagado con una perilla deslizante que activa una sola configuración, su pista pasa de un acento apagado a un acento sólido mientras la perilla se estira como un elástico si se presiona en mitad de la diapositiva. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: checked, accent, disabled ### Settling Add Pill https://fieldbook.lizardi.mx/es/components/settling-add-pill Una cápsula compacta con una marca más que se asienta en tres profundidades de sombra cuando la mueves y luego la presionas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, restDepth, fontSize ### Settling photo masonry https://fieldbook.lizardi.mx/es/components/settling-photo-masonry Una cuadrícula de mampostería de mosaicos fotográficos de altura variable que vuelan desde fuera de la pantalla y se asientan en sus columnas apretadas, desdibujando su enfoque a medida que aterrizan. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: columns, animateFrom, stagger, scaleOnHover ### Settling shadow button https://fieldbook.lizardi.mx/es/components/settling-shadow-button Una pastilla de gradiente cálido que flota sobre una gran sombra teñida y aterriza cuando la sombra desaparece. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, lift, shadowSize, width ### Shape toggle morph icon https://fieldbook.lizardi.mx/es/components/shape-toggle-morph-icon Un único ícono relleno cambia entre dos formas solo cuando se hace clic, su contorno fluye directamente de una silueta a la otra y su color se desvanece para coincidir, luego se mantiene hasta que se hace clic nuevamente. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: shapeA, shapeB, colorA, colorB, size ### Shape wipe theme toggle https://fieldbook.lizardi.mx/es/components/shape-wipe-theme-toggle Un botón con el ícono del sol y la luna que cambia el tema del panel con una forma que crece desde el botón, intercambia los colores cuando está completamente cubierto y luego se encoge. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: shape, duration, accentColor, fromCenter ### Share fan button https://fieldbook.lizardi.mx/es/components/share-fan-button Un botón para compartir que se disuelve al pasar el mouse mientras una fila de botones cuadrados de destino se desenrolla desde su borde izquierdo, uno tras otro. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, count, accent, openOn, stagger ### Share row lift https://fieldbook.lizardi.mx/es/components/share-row-lift-button Una pastilla para compartir que levanta una pastilla correspondiente con íconos de destino fuera de sí misma al pasar el mouse y la deja caer en el momento en que la atención se va. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, destinations, liftDistance, stagger ### Share target swap button https://fieldbook.lizardi.mx/es/components/share-target-swap-button Un botón compacto para compartir que mantiene una huella e intercambia su etiqueta por una fila escalonada de glifos de destino al pasar el mouse o enfocar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, size, glyphSide, accent, lift ### Share tile row https://fieldbook.lizardi.mx/es/components/share-tile-row Una fila corta de mosaicos cuadrados comparten escala y se inundan con su propio color, cambiando el glifo al tono del plato cuando se activan. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, uniform, size, gap, scale ### Share toggle chip https://fieldbook.lizardi.mx/es/components/share-toggle-chip Un chip empotrado que pasa de una invitación a un estado confirmado al hacer clic, y su glifo supera su tamaño completo antes de asentarse. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: idleLabel, activeLabel, accent, popScale, recessed ### Button-to-dialog morph https://fieldbook.lizardi.mx/es/components/shared-button-to-dialog Un botón en forma de píldora que crece directamente hasta convertirse en un cuadro de diálogo de confirmación, manteniendo su forma redondeada y su etiqueta continua durante la transición en lugar de abrir un modal separado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, confirmLabel, accent ### Shared-Element Lightbox https://fieldbook.lizardi.mx/es/components/shared-element-lightbox Una cuadrícula de miniaturas donde al hacer clic en una se transforma perfectamente en una gran superposición centrada, y al cerrarla se transforma de nuevo a su lugar original. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: columns, gap, closeOnBackdrop ### Shared layout card expand https://fieldbook.lizardi.mx/es/components/shared-layout-card-expand Una cuadrícula de tarjetas donde al hacer clic en una crece en su lugar hasta convertirse en un gran panel de detalles, y al cambiar directamente a otra tarjeta se reorienta el mismo reflujo en lugar de cerrarse y volver a abrirse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: columns, title, accent ### Shared-Layout Tab Switch https://fieldbook.lizardi.mx/es/components/shared-layout-tab-switch Una fila de pestañas de texto sin formato donde un fondo de píldora sólido se desliza y cambia de tamaño para coincidir con la pestaña seleccionada, utilizando un movimiento de diseño compartido impulsado por resorte. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: selected, accentColor, pillRadius ### Sheen scale button https://fieldbook.lizardi.mx/es/components/sheen-scale-button Un botón relleno de tamaño fijo con un brillo diagonal de dos tonos que se hincha ligeramente y proyecta un halo a juego cuando se coloca sobre él o se enfoca. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, growth, halo ### Sheen sweep card https://fieldbook.lizardi.mx/es/components/sheen-sweep-card Una tarjeta con una banda de luz estacionada en una esquina que viaja a través de la cara al pasar el mouse y se desliza hacia atrás en el momento en que el puntero se aleja. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: angle, bandSize, duration, playOnce, glareColor ### Sheen upload button https://fieldbook.lizardi.mx/es/components/sheen-upload-button Un botón de carga compacto con una cara iluminada desde arriba; al presionarlo, se desplaza un brillo y se empuja la flecha de la nube hacia arriba, y un estado ocupado repite el brillo hasta que se apaga. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, busy, sheenMs, radius ### Sheet drawer https://fieldbook.lizardi.mx/es/components/sheet-drawer Un panel deslizable que surge desde un borde sobre un fondo atenuado, mantiene el foco en el interior y se cierra con Escape, el botón de cerrar o al tirar de su encabezado. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: side, width ### Shifting frame button https://fieldbook.lizardi.mx/es/components/shifting-frame-button Un botón oscuro con seguimiento enmarcado por unos pocos píxeles de una amplia rampa de dos tonos que se desliza lentamente para que el marco visible siga cambiando de tono. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, secondary, cycle, frameWidth ### Shifting gradient pill https://fieldbook.lizardi.mx/es/components/shifting-gradient-pill Un botón de cápsula pintado con una rampa diagonal de gran tamaño que se desliza por la cara cuando se activa, mientras que dos luces en las esquinas intercambian entre un tinte claro y uno profundo del mismo tono. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, shift, glow, pressTilt ### Shimmer sweep button https://fieldbook.lizardi.mx/es/components/shimmer-sweep-button Un botón translúcido teñido con un borde fino que envía una banda inclinada de luz que recorre su cara al flotar. Frameworks: react Access: member Public prop names: label, accent, sweepMs, bandWidth, growOnHover ### Shimmer sweep text https://fieldbook.lizardi.mx/es/components/shimmer-sweep-text Una línea de texto donde cada letra se ilumina y se atenúa a su vez, enviando una banda de luz que viaja a lo largo de la frase en un bucle. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, duration, restDelay, highlight, wave ### Shockwave dot grid https://fieldbook.lizardi.mx/es/components/shockwave-dot-grid Una cuadrícula de puntos que se tiñe hacia el cursor y explota hacia afuera en un anillo cuando haces clic o lo deslizas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, dotSize, gap, proximity, shockRadius, returnSeconds ### Shortcut chip button https://fieldbook.lizardi.mx/es/components/shortcut-chip-button Un pequeño botón de chip que anuncia un atajo de teclado, inclina su glifo al pasar el mouse y pasa una delgada banda de luz sobre sí mismo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: keyLabel, modifier, accent, sweepMs, showGlyph ### Shortcut key chip https://fieldbook.lizardi.mx/es/components/shortcut-key-chip Pequeños chips en forma de píldora que representan teclas individuales del teclado, colocados uno al lado del otro para deletrear un atajo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: keys, size, tone, accent ### Shrink and emphasize button https://fieldbook.lizardi.mx/es/components/shrink-emphasis-button Un botón que se contrae al pasar el cursor mientras su etiqueta se hace más grande y pesada, de modo que el tipo presiona hacia afuera contra el caparazón que se encoge. Frameworks: react Access: member Public prop names: label, accent, shrink, tracking ### Shrink to icon button https://fieldbook.lizardi.mx/es/components/shrink-to-icon-button Una cápsula ancha con etiquetas que se estrecha hasta convertirse en un botón de icono redondo al pasar el cursor o al enfocar mientras la etiqueta se sale del marco y el icono aparece volando. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, expandedWidth, height, duration, fromRight ### Shrinking cap icon row https://fieldbook.lizardi.mx/es/components/shrinking-cap-icon-buttons Una fila de botones de íconos redondos cuyo relleno se esconde detrás de una tapa oscura que se colapsa al pasar el mouse, descubriendo el color desde el borde hacia adentro. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, count, size, revealMs, pressScale ### Sign-in card with photo https://fieldbook.lizardi.mx/es/components/sign-in-card-with-photo Una tarjeta de inicio de sesión ancha dividida en la mitad de un formulario y la mitad de una foto, centrada en una página teñida, con botones de proveedor solo con íconos. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, accentColor, providerCount ### Signal jitter heading https://fieldbook.lizardi.mx/es/components/signal-jitter-heading Un titular en negrita dibujado en tres capas teñidas que se separan irregularmente y se vuelven a unir como una señal de video rota. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, intensity, colorTheme, isStatic ### Signal sweep bands https://fieldbook.lizardi.mx/es/components/signal-sweep-bands Una pancarta de bandas de luz distorsionadas por interferencias con un barrido brillante que las atraviesa y los canales de color ligeramente separados. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: colorA, colorB, bandDensity, sweepSpeed, direction, grain ### Signed value bar chart https://fieldbook.lizardi.mx/es/components/signed-value-bar-chart Un gráfico de barras mensual centrado en una línea cero, con barras que suben en un color y bajan en otro según su signo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: positiveColor, negativeColor, barRadius, animate ### Signup card on tint https://fieldbook.lizardi.mx/es/components/signup-card-on-tint Una tarjeta de registro centrada sobre un fondo de página tintado, que combina los campos de contraseña y confirmación de contraseña uno al lado del otro bajo una línea de ayuda compartida. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: heading, accentColor, brandName ### Signup card with photo https://fieldbook.lizardi.mx/es/components/signup-card-with-photo Una tarjeta de registro ancha dividida en la mitad de un formulario y la mitad de una foto recortada, que recopila correos electrónicos y contraseñas emparejadas antes de una fila de botones de proveedores solo con íconos. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, accentColor, providerCount ### Signup page with social https://fieldbook.lizardi.mx/es/components/signup-page-with-social Una página de registro sin tarjeta que recopila nombre, correo electrónico y contraseñas coincidentes encima de un botón de proveedor alternativo delineado y un enlace de inicio de sesión centrado. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: heading, accentColor, providerLabel ### Simple centered login https://fieldbook.lizardi.mx/es/components/simple-centered-login Una tarjeta de página de inicio de sesión centrada con campos de correo electrónico y contraseña, un botón de envío de ancho completo, un botón de inicio de sesión único opcional y un enlace para crear una cuenta. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, accentColor, showSocialButton ### Simple sign-in card https://fieldbook.lizardi.mx/es/components/simple-sign-in-card Una tarjeta de página de inicio de sesión centrada con un campo de correo electrónico etiquetado, un campo de contraseña con un enlace para olvidar la contraseña, un botón de envío principal y un botón de proveedor alternativo delineado. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: heading, accentColor, showAltProvider, providerLabel ### Single Date Grid https://fieldbook.lizardi.mx/es/components/single-date-grid Una cuadrícula mensual sencilla y sin marco para elegir una fecha, con un encabezado de mes, una fila de días de la semana y celdas de días de tamaño generoso. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, cellSize, showOutsideDays ### Single glyph spinner https://fieldbook.lizardi.mx/es/components/single-glyph-spinner Un anillo giratorio mínimo: un arco fino que gira continuamente para indicar que se está ejecutando una tarea en segundo plano. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, color, speed ### Single Hoop Radar https://fieldbook.lizardi.mx/es/components/single-hoop-radar Una carta polar reducida con exactamente un aro de referencia y sin radios, por lo que la forma de la serie se lee en un único anillo de umbral. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, hoopScale, hoopStroke, fillOpacity, showLabels ### Single line typewriter caret https://fieldbook.lizardi.mx/es/components/single-line-typewriter-caret Una sola frase se escribe sola una vez a un ritmo humano desigual, luego un símbolo de intercalación sólido sigue parpadeando constantemente junto a la línea terminada para siempre. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, baseSpeedMs, accent, blinkMs ### Single Panel Disclosure https://fieldbook.lizardi.mx/es/components/single-panel-disclosure Un disparador y un panel: un bloque compacto para mostrar y ocultar que coloca su contenido debajo de una máscara suave. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, defaultOpen, keepMounted, travel, duration ### Single value slider https://fieldbook.lizardi.mx/es/components/single-value-slider Un control deslizante horizontal con un pulgar que se puede arrastrar y que llena la pista detrás de él para que el valor actual se lea de un vistazo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: value, accent ### Sinking lip button https://fieldbook.lizardi.mx/es/components/sinking-lip-button Una tapa redondeada y gruesa con una banda labial más oscura que se colapsa al presionarla para que la tapa se hunda al ras de su base y luego vuelve a aparecer al soltarla. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lipDepth, radius, disabled ### Sketched outline button https://fieldbook.lizardi.mx/es/components/sketched-outline-button Un botón delineado cuyas cuatro esquinas son deliberadamente desiguales, redibujándose en una segunda forma torcida con un trazo discontinuo al pasar el mouse o enfocar. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, stroke, wobble, dashOnHover, duration ### Skewed blade invert https://fieldbook.lizardi.mx/es/components/skewed-blade-invert-button Un botón oscuro y redondeado que se invierte como una hoja decorativa inclinada se abre hacia afuera desde su centro al pasar el mouse o al enfocar con el teclado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, skew, durationMs, radius ### Skewed shutter button https://fieldbook.lizardi.mx/es/components/skewed-shutter-button Un botón cuyos dos paneles cortados se estacionan fuera de sus bordes y se mueven hacia adentro al flotar, cerrándose detrás de la etiqueta en una costura diagonal. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, trailing, label, skew, duration ### Skewed slab button https://fieldbook.lizardi.mx/es/components/skewed-slab-button Un botón de losa cortada que permanece ligeramente transparente y alcanza toda su fuerza al pasar el mouse, ampliándose cuando se enfoca el teclado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lean, borderWidth, restOpacity ### Skewed slab press https://fieldbook.lizardi.mx/es/components/skewed-slab-press-button Un botón de losa inclinado que se encuentra sobre una repisa dura que cae plano y aprieta sus letras mientras se sostiene, luego vuelve a saltar al soltarlo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, ledgeColor, label, skew, ledge ### Skewed wipe button https://fieldbook.lizardi.mx/es/components/skewed-wipe-button Un botón enmascarado por un panel oscuro inclinado que se desliza hacia la derecha al pasar el cursor, descubriendo el color que se encuentra debajo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, skew, duration ### Skewed wipe reveal button https://fieldbook.lizardi.mx/es/components/skewed-wipe-reveal-button Una pastilla escondida bajo un panel oscuro inclinado; Al pasar el cursor, se desliza el panel fuera del borde derecho para descubrir el relleno brillante mientras la etiqueta se vuelve oscura. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, skew, duration, direction ### Skewed wipe swap button https://fieldbook.lizardi.mx/es/components/skewed-wipe-swap-button Un botón que cambia su etiqueta al pasar el cursor o al enfocar mientras un panel decorativo recortado se desplaza por su cara. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: restLabel, hoverLabel, accent, skew, speed ### Slab Lift Icon Button https://fieldbook.lizardi.mx/es/components/slab-lift-icon-button Un icono translúcido que se eleva desde una sólida losa de luz al flotar, luego vuelve a caer y se traga la losa cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, lift, tint, size, radius ### Slanted outline button https://fieldbook.lizardi.mx/es/components/slanted-outline-button Un botón hueco en forma de paralelogramo cuyo contorno llega en dos etapas: los lados inclinados se inclinan primero, luego la parte superior e inferior planas se cierran para cerrar la forma. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, slant, lineWidth, glow ### Slanted shutter button https://fieldbook.lizardi.mx/es/components/slanted-shutter-button Dos paneles decorativos inclinados caen desde arriba y desde abajo para cerrar sobre la pastilla en una costura diagonal mientras la etiqueta rueda una vez y se invierte a través del relleno. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, skew, duration, radius ### Slice picker donut https://fieldbook.lizardi.mx/es/components/slice-picker-donut Una dona impulsada por un menú desplegable en su encabezado: la porción elegida se empuja hacia afuera y crece en un arco exterior separado, mientras que el agujero muestra el número de esa porción. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, holeRatio, raise, ringGap, hueRange ### Slide away destructive https://fieldbook.lizardi.mx/es/components/slide-away-destructive-button Un botón destructivo cuya etiqueta se desliza hacia la izquierda para dejar solo una cruz, luego cambia a una cara de éxito con una marca de verificación por un momento cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, confirmColor, slideMs, confirmMs ### Slide out tabs button https://fieldbook.lizardi.mx/es/components/slide-out-tabs-download-button Un botón de descarga con dos pestañas de subtítulos oscuros apiladas detrás que se deslizan hacia arriba y hacia abajo al pasar el cursor y se retiran hasta la mitad cuando se mantiene presionado. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, topCaption, bottomCaption, accent, travel ### Slide under download button https://fieldbook.lizardi.mx/es/components/slide-under-download-button Un botón etiquetado que desliza una bandeja de acción brillante fuera de su placa al pasar el mouse o enfocar, con una flecha de descarga oscilante dentro de la bandeja. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, direction, duration, bobbing ### Slide up panel dialog https://fieldbook.lizardi.mx/es/components/slide-up-panel-dialog Un diálogo centrado que se eleva sobre una pantalla atenuada, para cualquier contenido que necesite un momento de atención total. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, closeOnOverlayClick, panelWidth ### Sliding content tabs https://fieldbook.lizardi.mx/es/components/sliding-content-tabs Una ventana gráfica de contenido emparejada con una barra de pestañas de cápsula debajo, donde al cambiar de pestaña se desliza el panel desde el costado de la pestaña elegida mientras un resaltado de color se desliza detrás de la etiqueta activa. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: activeTab, accent ### Sliding digit counter https://fieldbook.lizardi.mx/es/components/sliding-digit-counter Un total que cuenta haciendo rodar cada columna de dígitos hasta su lugar mientras una estrella se llena a su lado y explota algunas partículas cuando aterriza. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: value, duration, accent, particles, label ### Sliding fill send pill https://fieldbook.lizardi.mx/es/components/sliding-fill-send-pill Una pastilla de contorno ancho con un disco sólido en un extremo; desliza los portaobjetos que llenan toda la pastilla y voltea la etiqueta a medida que pasa. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, height, slideSeconds, capSide ### Sliding height tabs https://fieldbook.lizardi.mx/es/components/sliding-height-tabs Pestañas enmarcadas en una tarjeta donde los paneles de cambio deslizan toda la pista de contenido hacia los lados como una tira de película mientras la altura de la tarjeta se reduce para coincidir con el nuevo panel. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: tabOneLabel, tabTwoLabel, accent ### Sliding highlight menu https://fieldbook.lizardi.mx/es/components/sliding-highlight-menu Un menú de acción activado por botón donde una placa redondeada se desliza entre filas a medida que se mueven el puntero o las teclas de flecha, en lugar de que cada fila se ilumine por sí sola. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, align, offset, accent, showShortcuts ### Sliding highlight tabs https://fieldbook.lizardi.mx/es/components/sliding-highlight-tabs Una lista de pestañas accesible donde un bloque resaltado redondeado se desliza debajo de la etiqueta activa a medida que la selección se mueve entre pestañas, revelando un panel de contenido coincidente debajo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultTab, fullWidth ### Sliding highlight toggle group https://fieldbook.lizardi.mx/es/components/sliding-highlight-toggle-group Una fila de botones de íconos con un panel resaltado que se desliza debajo del activo o se desvanece de forma independiente detrás de cada uno activo en el modo de selección múltiple. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: mode, iconCount, defaultActive, accent ### Sliding label button https://fieldbook.lizardi.mx/es/components/sliding-label-button Un botón sólido cuya etiqueta sale del marco hacia arriba, mientras que una segunda línea entra desde abajo para ocupar su lugar. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, hoverLabel, variant, accent, slideMs ### Sliding panel button https://fieldbook.lizardi.mx/es/components/sliding-panel-button Un botón con borde cuya segunda etiqueta se inserta en un panel de color desde el borde derecho, cubriendo completamente la primera etiqueta. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, hoverLabel, accent, companion, duration ### Sliding Panel Tabs https://fieldbook.lizardi.mx/es/components/sliding-panel-tabs Dos pestañas en una pista de píldora redondeada con un resaltado que se desliza entre ellas, fundiendo un panel de estilo de configuración debajo sin ningún salto de diseño. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, defaultTab ### Sliding Pin Swap https://fieldbook.lizardi.mx/es/components/sliding-pin-swap-button Un botón en rampa cuyo glifo de pin se desliza de un lado a otro mientras la palabra en reposo se desvanece y una respuesta se desvanece detrás de ella. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, idleLabel, hoverLabel, travel, duration ### Sliding segment tabs https://fieldbook.lizardi.mx/es/components/sliding-segment-tabs Un control segmentado en forma de píldora cuyo indicador de fondo se desliza debajo de la etiqueta activa mientras que el panel de abajo se desliza hacia adentro desde la dirección de desplazamiento. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, segments, transitionSpeed, defaultIndex ### Sliding segment toggle https://fieldbook.lizardi.mx/es/components/sliding-segment-toggle Un control segmentado de selección única donde una pastilla resaltada se desliza debajo de la etiqueta activa cada vez que se elige un segmento diferente. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: variant, size, accentColor ### Sliding Selection Highlight https://fieldbook.lizardi.mx/es/components/sliding-selection-highlight Un chip de fondo flotante compartido que se desliza de un elemento a otro dentro de una fila de opciones, rastreando cualquier elemento sobre el que se hace clic o sobre el que se hace clic. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: mode, accent, exitDelay ### Sliding send button https://fieldbook.lizardi.mx/es/components/sliding-send-button Un botón de envío plano que se desliza hacia la derecha al pasar el mouse mientras se abre el espacio entre su etiqueta y la flecha, retrocede unos pocos píxeles al presionarlo y vuelve a colocarse al salir. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, travel, tracking ### Sliding Thumb Switch https://fieldbook.lizardi.mx/es/components/sliding-thumb-switch Un interruptor de encendido/apagado construido a partir de una casilla de verificación oculta: una pastilla que cambia de color y un pulgar redondo que se desliza hacia el borde opuesto. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: checked, accentColor, disabled ### Slotted panel card https://fieldbook.lizardi.mx/es/components/slotted-panel-card Una superficie componible con ranuras de encabezado, acción, cuerpo y pie de página que mantienen su espaciado sin importar cuántas se utilicen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: title, showAction, showDivider, accent ### Smoke trail cursor https://fieldbook.lizardi.mx/es/components/smoke-trail-cursor Una nube suave y agitada que sigue el puntero como si fuera humo, se enrosca sobre sí misma cuando cambias de dirección y se disuelve cuando te detienes. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: trailLength, inertia, grain, brightness, color ### Smoke veil drift https://fieldbook.lizardi.mx/es/components/smoke-veil-drift Amplias láminas de neblina de colores cruzan un campo negro en ángulo, adelgazándose y engrosándose a medida que se deslizan unas sobre otras. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, speed, veilCount, hueDrift, scanlines ### Smooth Area Trend https://fieldbook.lizardi.mx/es/components/smooth-area-trend-chart Un gráfico de áreas de una sola serie con un borde superior suavemente curvado, un relleno teñido suave, líneas de cuadrícula horizontales tenues y una lectura que sigue al puntero. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, months, fillOpacity, showGrid, animate ### Snap back icon button https://fieldbook.lizardi.mx/es/components/snap-back-icon-button Un botón de glifo simple que crece suavemente debajo del puntero y vuelve a su tamaño de reposo en el instante en que se presiona. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, size, hoverScale, strokeWidth ### Social Post Card https://fieldbook.lizardi.mx/es/components/social-post-card Una publicación social completa con encabezado de autor, cuerpo vinculado, una cuadrícula de medios que se adapta de uno a cuatro elementos y una fila de métricas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: mediaCount, verified, showMetrics, accent ### Social proof avatar row https://fieldbook.lizardi.mx/es/components/social-proof-avatar-row Una fila apretada de círculos de avatar superpuestos que se cierran con una burbuja que suma a todos los que quedan fuera de la fila. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, overlap, accent, overflowCount ### Social sign-in card https://fieldbook.lizardi.mx/es/components/social-sign-in-card Una tarjeta de página de inicio de sesión sobre un fondo teñido que conduce con botones de proveedor de ancho completo y luego ofrece un correo electrónico y una contraseña alternativos con los términos en letra pequeña a continuación. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: brandName, accentColor, providerCount ### Soft bloom fill button https://fieldbook.lizardi.mx/es/components/soft-bloom-fill-button Una pastilla fina iluminada desde dentro por un punto difuminado que se va hinchando lentamente desde una esquina hasta llenar todo el rostro. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, blur, duration, startSize ### Soft fiber curtain https://fieldbook.lizardi.mx/es/components/soft-fiber-curtain Cortinas en capas de filamentos pálidos se inclinan y giran a lo largo de un campo profundo, iluminándose a medida que atraviesan como la luz a través de la tela. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: glowColor, layers, speed, twist, brightness, grain ### Soft inset press button https://fieldbook.lizardi.mx/es/components/soft-inset-press-button Una losa casi negra que se asienta sobre un panel a juego sobre dos sombras suaves opuestas, se hunde en la superficie mientras se sostiene y se eleva nuevamente al soltarse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, depth, radius, restOpacity ### Soft Pad Button https://fieldbook.lizardi.mx/es/components/soft-pad-button Un bloc redondeado sobre una superficie mate con sombras claras y oscuras emparejadas, que se ubica más cerca de la página debajo de la imprenta. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, surface, lift, radius ### Soft relief button https://fieldbook.lizardi.mx/es/components/soft-relief-button Una pastilla pálida levantada por una luz cálida en un lado y una sombra fría en el otro, ambas se tensan al flotar y desaparecen por completo cuando se mantiene al ras. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, depth, radius, showIcon ### Soft relief send button https://fieldbook.lizardi.mx/es/components/soft-relief-send-button Un botón de envío moldeado a partir de una superficie clara: un borde de dos tonos alrededor de una almohadilla interior suave con un glifo de envío relleno que se hunde mientras se mantiene presionado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, depth, radius, sink ### Solid Ring Spinner https://fieldbook.lizardi.mx/es/components/solid-ring-spinner Un indicador de carga acolchado y en caja: un anillo de trazo grueso con un borde de color acentuado que gira a una velocidad lineal constante dentro de un panel redondeado. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, size, durationMs ### Spacebar Keycap https://fieldbook.lizardi.mx/es/components/spacebar-keycap-button Una amplia tecla mecánica que puedes presionar con el puntero o con la tecla de espacio real, completa con un tope de referencia y un recorrido esculpido. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: legend, keyTint, width, travel, bindSpaceKey ### Spark line https://fieldbook.lizardi.mx/es/components/spark-line Una fila de mosaicos métricos cuyos minigráficos se dibujan en la montura y siguen el puntero con una cruz que lee el valor debajo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: color, smooth, points ### Sparkling highlight text https://fieldbook.lizardi.mx/es/components/sparkling-highlight-text Texto en negrita con un puñado de pequeñas estrellas de cuatro puntas que aparecen y desaparecen en puntos aleatorios a lo largo de las letras, cada una de las cuales crece, gira brevemente y luego desaparece para ser reemplazada en otro lugar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, sparkleCount, accentA, accentB ### Speaking glow button https://fieldbook.lizardi.mx/es/components/speaking-glow-button Una pastilla oscura cuyo borde inferior lleva bandas luminosas que se ejecutan en bucles desplazados, por lo que se lee como una forma de onda en vivo mientras se escucha. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, listening, bandCount, speed ### Speckled gradient button https://fieldbook.lizardi.mx/es/components/speckled-gradient-button Una cara degradada de dos pasos superpuesta con ruido fractal generado en una mezcla suave, de modo que el color se lee como si estuviera impreso en material rugoso. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, partner, label, grain, grainStrength ### Specular edge button https://fieldbook.lizardi.mx/es/components/specular-edge-button Un botón oscuro cuyo contorno redondeado se comporta como metal pulido, con un resaltado en los bordes frente a una luz que dirige hacia el puntero en cualquier lugar de la página. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, lineColor, intensity, radius, proximity, autoSweep ### Spin count tile https://fieldbook.lizardi.mx/es/components/spin-count-tile Un cuadrado que gira un número entero de veces a pedido y aterriza nuevamente en el cuadrado, con un arco tenue que muestra qué tan lejos está el giro. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, turns, duration, easing, continuous ### Spin Off Thanks https://fieldbook.lizardi.mx/es/components/spin-off-thanks-button Una llamada a la acción de dos caras en la que la cara superior gira y cae mientras una segunda cara se eleva detrás para tomar el control. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: frontLabel, backLabel, accent, backColor, spinDegrees, latchOnClick ### Spinning square flood button https://fieldbook.lizardi.mx/es/components/spinning-square-flood-button Un botón delineado que inunda con su acento mientras un cuadrado redondeado giratorio se desliza desde la esquina, por lo que el relleno llega detrás de un borde ondulado. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, spinSeconds, floodSeconds, squareSize, radius ### Spinning text ring https://fieldbook.lizardi.mx/es/components/spinning-text-ring Una frase corta repetida escrita letra por letra alrededor de un círculo que gira constantemente en su lugar, como el borde de una moneda o el sello de un sello. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, durationSeconds, radius, reverse, accent ### Split cover login https://fieldbook.lizardi.mx/es/components/split-cover-login Una página de inicio de sesión de dos columnas con un formulario de inicio de sesión centrado junto a un panel de cubierta decorativo de sangrado completo que cae en pantallas estrechas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: brandName, accentColor, imageSide ### Split cover signup https://fieldbook.lizardi.mx/es/components/split-cover-signup Una página de registro de dos columnas: un formulario estrecho y centrado con una marca en un lado y una cubierta ilustrada a sangrado completo en el otro, que se colapsa en una sola columna cuando es estrecha. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: brandName, accentColor, imageSide ### Split curtain reveal button https://fieldbook.lizardi.mx/es/components/split-curtain-reveal-button Un botón escondido debajo de cuatro paneles decorativos que se abren de lado primero y verticalmente un segundo después, dejando al descubierto la etiqueta en dos movimientos escalonados. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, duration, stagger, borderWidth ### Split flap display https://fieldbook.lizardi.mx/es/components/split-flap-display Una fila de fichas mecánicas de tablero giratorio recorre una lista de frases cortas, y solo las fichas cuyas letras cambian pasan por algunas solapas aleatorias antes de aterrizar. Frameworks: react, svelte, astro, html Access: member Public prop names: phrases, cycleDelay, tileColor, textColor ### Split flap face button https://fieldbook.lizardi.mx/es/components/split-flap-face-button La cara llena sale de la parte inferior del botón al pasar el mouse y la etiqueta se reconstruye letra por letra desde detrás de ella. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, stagger, travel, duration ### Split panes https://fieldbook.lizardi.mx/es/components/split-panes Dos paneles divididos por un controlador que cambia su tamaño arrastrando o con la tecla de flecha, mantiene un tamaño mínimo en ambos lados y vuelve a ajustarse al hacer doble clic. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: initialSplit, direction ### Split Reveal Hover Text https://fieldbook.lizardi.mx/es/components/split-reveal-hover-text El texto se divide en una mitad superior e inferior; Al pasar el cursor, la mitad superior se desliza y se desvanece mientras que la mitad inferior se desliza hacia arriba para completar la palabra y se invierte cuando el puntero se va. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, splitGap, accentColor ### Split shutter reveal button https://fieldbook.lizardi.mx/es/components/split-shutter-reveal-button Un botón redondo cuyas dos mitades de etiqueta se retraen hacia los bordes a diferentes velocidades, descubriendo la marca de respiración debajo mientras todo se inclina. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, rotation, scale, revealSeconds ### Split sign-in page https://fieldbook.lizardi.mx/es/components/split-sign-in-page Una página de inicio de sesión de dos columnas que combina una columna de formulario estrecha con una imagen de portada de altura completa en el lado opuesto, la imagen desaparece en pantallas pequeñas. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: brandName, accentColor, imageSide ### Split text entrance https://fieldbook.lizardi.mx/es/components/split-text-entrance Copia cortada en caracteres, palabras o líneas y animada pieza por pieza en un escalonamiento compartido, con algunos ajustes preestablecidos de entrada para elegir. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: unit, preset, stagger, delay, accent ### Split text reveal https://fieldbook.lizardi.mx/es/components/split-text-reveal Un titular cuyas palabras o caracteres surgen de una máscara de clip, borrosos y teñidos, escalonados de izquierda a derecha en el montaje y reproducidos al hacer clic. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, split, stagger, duration ### Spoke area chart https://fieldbook.lizardi.mx/es/components/spoke-area-chart Un gráfico polar donde los radios etiquetados llevan una serie como una forma cerrada translúcida sobre una cuadrícula poligonal, con una lectura que se ajusta al radio más cercano. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, fillOpacity, rings, strokeWidth, animate ### Spoke Radar Plot https://fieldbook.lizardi.mx/es/components/spoke-radar-plot Métricas sobre radios radiantes con anillos concéntricos, donde cada serie se infla desde el centro y se ilumina al flotar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, secondary, levels, series, showPoints, showGrid ### Spokeless Ring Radar https://fieldbook.lizardi.mx/es/components/spokeless-ring-radar Un gráfico polar con anillos de escala concéntricos y sin radios radiales, que traza una serie de puntos cuyas esquinas llevan las etiquetas de categorías. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, rings, dotRadius, fillOpacity, animate ### Spotlight card https://fieldbook.lizardi.mx/es/components/spotlight-card Tarjetas cuyo borde y superficie de 1 px se iluminan alrededor del puntero, con el resaltado a lo largo de una fila de mosaicos de estadísticas. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: color, radius, borderOnly ### Spotlight fill button https://fieldbook.lizardi.mx/es/components/spotlight-fill-button Un botón de pastilla con un acento saturado que atenúa su relleno bajo un velo oscuro al pasar el mouse mientras un suave foco ovalado sigue el puntero. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, spotSize, dim, followPointer ### Spotlight profile grid https://fieldbook.lizardi.mx/es/components/spotlight-profile-grid Una cuadrícula de tarjetas de perfil que permanece desaturada y tenue excepto por un foco suave que sigue el puntero y revela todo el color debajo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: spotlightRadius, columns, damping, accentColor ### Spotlight shafts https://fieldbook.lizardi.mx/es/components/spotlight-shafts Rayos de luz se abren en abanico desde un punto en un borde del marco, inhalando y exhalando y dirigiéndose hacia el puntero. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rayColor, origin, spread, rayLength, speed, followPointer ### Spring dot radio group https://fieldbook.lizardi.mx/es/components/spring-dot-radio-group Un grupo de radio cuyo punto seleccionado aparece con un pequeño sobrepaso mientras que el punto anterior se encoge, cruzándose en lugar de romperse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, dotSize, layout, showDescriptions, disabledIndex ### Spring drag carousel https://fieldbook.lizardi.mx/es/components/spring-drag-carousel Un carrusel de cartas arrastrable que se ajusta a la carta más cercana con física de resorte y puede reproducirse automáticamente en un bucle. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: autoplay, autoplayDelay, loop, baseWidth, accentColor ### Spring easing toggle https://fieldbook.lizardi.mx/es/components/spring-easing-toggle Un mosaico que se desliza entre dos topes en una curva de resorte incorporada en una transición CSS simple, con la curva generada trazada al lado. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: bounce, duration, accent, showCurve, spin ### Spring Fill Progress https://fieldbook.lizardi.mx/es/components/spring-fill-progress Una pista de progreso delgada cuyo relleno se desliza hasta cada nuevo valor en un resorte, con una lectura que cuenta junto con él. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: autoplay, value, trackHeight, accent, showReadout ### Spring lag trail https://fieldbook.lizardi.mx/es/components/spring-lag-trail Una cadena de círculos que persiguen el puntero con resortes cada vez más suaves, de modo que un movimiento rápido los estira hasta formar una cola de cometa que se vuelve a juntar en reposo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, trailCount, stiffness, damping, headSize ### Spring layout toggle https://fieldbook.lizardi.mx/es/components/spring-layout-toggle Un interruptor cuya perilla está alineada con un extremo de la pista solo por diseño y salta entre las dos posiciones medidas cada vez que cambia el estado. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: on, bounce, size, label, accent ### Spring press button https://fieldbook.lizardi.mx/es/components/spring-press-button Un botón simple que crece un poco debajo del puntero y se hunde mientras se sostiene, ambos sobre un resorte corto, con las dos escalas y la rigidez del resorte expuestas como perillas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, hoverScale, tapScale, stiffness, accent ### Spring Push Collapsible https://fieldbook.lizardi.mx/es/components/spring-push-collapsible Una fila de configuración que abre un panel de detalles y empuja las filas debajo de él hacia abajo en un resorte compartido en lugar de un salto de altura. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, defaultOpen, stiffness, damping, keepMounted ### Spring reveal button https://fieldbook.lizardi.mx/es/components/spring-reveal-button Una cápsula divertida con una ficha giratoria a su izquierda; Al pasar el cursor, la ficha colapsa y una forma de gran tamaño surge desde abajo, balanceándose al aterrizar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, rockDegrees, spinSeconds, showTags ### Spring tuner https://fieldbook.lizardi.mx/es/components/spring-tuner-tile Una loseta que salta entre dos estados mientras una traza viva traza su sobrepaso, de modo que la rigidez, la amortiguación y la masa se pueden sentir y leer al mismo tiempo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, stiffness, damping, mass, property, showTrace ### Springing radio group https://fieldbook.lizardi.mx/es/components/springing-radio-group Un grupo de radio donde el punto elegido surge de la nada con un pequeño sobrepaso, mientras que el anterior se encoge y cada anillo crece ligeramente debajo del puntero. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, orientation, ringSize, bounce, showDescriptions ### Squaring backer button https://fieldbook.lizardi.mx/es/components/squaring-backer-button Una pastilla sólida con un gemelo inclinado detrás que se nivela y se enciende al flotar mientras una flecha se despliega desde la izquierda al lado de la etiqueta. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, tilt, scale, showArrow ### Squash key button https://fieldbook.lizardi.mx/es/components/squash-key-button Un botón de tecla que se aplasta debajo del puntero mientras una losa de base se desliza desde debajo y luego cae sobre la losa cuando se sostiene. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, squash, dropPx, showIcon ### Stacked Alert Toasts https://fieldbook.lizardi.mx/es/components/stacked-alert-toasts Una pila de brindis anclada en una esquina donde las nuevas notificaciones se comprimen detrás de la tarjeta más nueva y toda la pila se expande en una lista legible al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: position, durationSeconds, expandOnHover, color ### Stacked Area Chart https://fieldbook.lizardi.mx/es/components/stacked-area-chart Dos series mensuales apiladas en bandas rellenas donde el borde exterior traza el total combinado y la costura entre ellas muestra cómo se mueve la división. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, secondColor, fillOpacity, showTotal, animate ### Stacked blur fade https://fieldbook.lizardi.mx/es/components/stacked-blur-fade Un borde del panel de desplazamiento que se disuelve en el color del panel a través de varios desenfoques de fondo apilados en lugar de una banda de desenfoque plana. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: height, position, layers, maxBlur, autoHide, accentColor ### Stacked option checklist https://fieldbook.lizardi.mx/es/components/stacked-checkbox-list Una lista apilada de casillas de verificación etiquetadas que comparten una selección combinada, con un recuento continuo de cuántos elementos se eligen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, gap, orientation ### Stacked FAQ accordion https://fieldbook.lizardi.mx/es/components/stacked-faq-accordion Una lista vertical de preguntas que se expanden una a la vez en un panel de respuestas, con un galón que gira para coincidir con el estado abierto. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: defaultOpenIndex, allowMultipleOpen, accentColor, animationMs ### Stacked notification drawer https://fieldbook.lizardi.mx/es/components/stacked-notification-drawer Una pila compacta de tarjetas de notificación que se esconde detrás de la tarjeta superior hasta que se coloca sobre ella, luego se despliega en una lista completamente legible antes de volver a colapsar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cardCount, accentColor, expandOnHover, stiffness ### Stacked notification tray https://fieldbook.lizardi.mx/es/components/stacked-notification-tray Una pila de tarjetas de notificación estilo teléfono que se despliega en una lista legible cuando se toca y se colapsa nuevamente en una sola baraja. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, accent, startExpanded, collapsedOffset, stagger ### Stacked plate press button https://fieldbook.lizardi.mx/es/components/stacked-plate-press-button Un botón redondeado y grueso construido a partir de tres placas anidadas que se separan telescópicamente al presionarlo y se cierran al soltarlo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, pressScale, plateLift, radius, showGlyph ### Stacked ripple button https://fieldbook.lizardi.mx/es/components/stacked-ripple-button Un botón delineado que mantiene viva cada onda a la vez, por lo que los toques rápidos y repetidos se superponen en anillos en capas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, rippleColor, spread, rippleSeconds, maxRipples ### Stacked segment bar chart https://fieldbook.lizardi.mx/es/components/stacked-segment-bar-chart Un gráfico de barras donde dos series se apilan en una columna por mes, el segmento inferior con un acento y el segmento superior con otro, con una pequeña leyenda que explica la división. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: baseColor, topColor, barRadius, columnGap, animate ### Stacked shadow outline button https://fieldbook.lizardi.mx/es/components/stacked-shadow-outline-button Un botón de contorno monoespaciado que descansa sobre una escalera de sombras apiladas que se comprime y se asienta a medida que el acento inunda su rostro y luego regresa una capa a la vez. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, shadowLayers, settleDepth ### Stacked shadow text https://fieldbook.lizardi.mx/es/components/stacked-shadow-text El texto mostrado en negrita y cursiva se ubica frente a varias sombras paralelas escalonadas en diferentes colores, lo que le da una apariencia extruida y en capas que se aplana hasta formar una línea limpia al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, shadowColor, depth ### Stacked shell sign in https://fieldbook.lizardi.mx/es/components/stacked-shell-sign-in Un botón de inicio de sesión construido a partir de tres carcasas redondeadas anidadas, de modo que la etiqueta se asienta en un pequeño hueco elevado que queda plano cuando la presionas. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, height, lift, showMark ### Stacked swap cart button https://fieldbook.lizardi.mx/es/components/stacked-swap-cart-button Dos botones de ancho completo apilados dentro de una ventana de un solo botón, por lo que apuntar a la ventana desliza el par hacia arriba e intercambia la acción de exploración por la acción de compra. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: topLabel, bottomLabel, accent, secondary, duration ### Staged expand delete button https://fieldbook.lizardi.mx/es/components/staged-expand-delete-button Un icono de contenedor cuadrado que se ensancha después de un breve retraso, desvanece su etiqueta y solicita un segundo clic de confirmación antes de dispararse. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, confirmLabel, accent, expandedWidth, delay, open ### Stagger bar row https://fieldbook.lizardi.mx/es/components/stagger-bar-row Una fila de barras que se elevan una tras otra, con la onda comenzando desde cualquier extremo o desde el centro hacia afuera. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, count, stagger, origin, distance ### Staggered Fade List https://fieldbook.lizardi.mx/es/components/staggered-fade-list Filas que se desvanecen desde un opacity inicial elegido una tras otra a medida que el grupo aparece a la vista, con el espacio entre ellas ajustable. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: startOpacity, endOpacity, stagger, delay, accent ### Staggered Offer Drawer https://fieldbook.lizardi.mx/es/components/staggered-offer-drawer Un cajón inferior que promociona una oferta limitada, donde el título, el precio y los botones aparecen uno tras otro en lugar de aparecer todos a la vez. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: title, price, discountedPrice, accent ### Staggered Reveal Text https://fieldbook.lizardi.mx/es/components/staggered-reveal-text Una oración aparece en partes escalonadas, divididas en palabras, caracteres o líneas, usando un estilo de entrada elegido, como desvanecimiento, desenfoque, diapositiva o escala. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, splitBy, style, durationSeconds, replayOnRescroll ### Staggered text entrance https://fieldbook.lizardi.mx/es/components/staggered-text-entrance Un titular ingresa usando uno de varios estilos de entrada seleccionables, dividido en palabras, caracteres o líneas y escalonado para que las piezas se coloquen en secuencia en lugar de todas a la vez. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, splitBy, style, staggerMs ### Stair step shadow button https://fieldbook.lizardi.mx/es/components/stair-step-shadow-button Un botón pálido que entrega su borde de acento a los dos lados opuestos al pasar el mouse mientras una escalera de sombras duras y graduadas sale detrás de él y un relleno teñido se eleva para encontrarse con la etiqueta. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, steps, stepSize, radius ### Stamped cursor trail https://fieldbook.lizardi.mx/es/components/stamped-cursor-trail Tarjetas pequeñas estampadas a lo largo de la trayectoria del puntero a intervalos de distancia fijos, cada una de las cuales cae con una inclinación y envejece detrás del cursor. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: trailLength, spacing, accent, tilt, fadeSeconds ### Star count button https://fieldbook.lizardi.mx/es/components/star-count-button Un botón de estrella del repositorio cuyo total se acumula columna por columna a la vista y arroja una breve ráfaga de pequeñas estrellas cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, count, rollDuration, skin, burst ### Starfield glow button https://fieldbook.lizardi.mx/es/components/starfield-glow-button Una pastilla oscura que se despierta al flotar o enfocar con un campo de estrellas parpadeantes, un brillo en las esquinas y un estado de prensa en tonos fríos. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, starCount, glowStrength, shootingStars ### Starred repos disclosure https://fieldbook.lizardi.mx/es/components/starred-repos-disclosure Una fila de encabezado con un botón de alternancia que revela una breve lista oculta de repositorios destacados debajo de una fila que siempre permanece visible. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, defaultOpen, rowCount ### Status Alert Banner https://fieldbook.lizardi.mx/es/components/status-alert-banner Un banner con borde que combina un ícono con un título y una descripción opcional para mostrar un estado de éxito o error en línea. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: variant, title, description, accentColor ### Status Avatar https://fieldbook.lizardi.mx/es/components/status-avatar Un avatar redondo que recurre a iniciales sin imagen y puede llevar una pequeña insignia de estado en línea o apilarse con otros. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, status, accent, showBadge ### Status cycle pill https://fieldbook.lizardi.mx/es/components/status-cycle-pill Una tableta que recorre los estados de inactividad, funcionamiento, finalización y error en cada toque, intercambiando su etiqueta, icono y color con una rápida transición emergente. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, initialState, autoAdvance, intervalSeconds ### Stay Dates Picker https://fieldbook.lizardi.mx/es/components/stay-dates-picker Un par de campos de estilo reserva, Check-in y Check-out, cada uno de los cuales abre su propio calendario desplegable junto a un cuadro de tiempo fijo, para elegir una estadía de dos finales. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, checkInLabel, checkOutLabel, showTime ### Stay range popover picker https://fieldbook.lizardi.mx/es/components/stay-range-popover-picker Un botón de activación que muestra dos fechas unidas por un guión y abre un calendario de rango flotante para elegir un día de inicio y finalización, para una selección de estadía estilo hotel. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, nights ### Steady fill button https://fieldbook.lizardi.mx/es/components/steady-fill-button Un gran botón primario casi negro cuyo relleno se aclara dos pasos al pasar el mouse mientras su geometría permanece fija, con un relleno horizontal que crece con el ancho disponible del contenedor. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, radius, roomy ### Step area chart https://fieldbook.lizardi.mx/es/components/step-area-chart Un gráfico de áreas de una sola serie dibujado como una escalera donde cada valor se mantiene plano a lo largo de su ranura y salta verticalmente en el límite. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, months, fillOpacity, stepAlign, animate ### Step goal progress bar https://fieldbook.lizardi.mx/es/components/step-goal-progress-bar Una barra de progreso redondeada que rastrea los pasos completados de un total y muestra una etiqueta de fracción encima de un relleno suavemente animado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: current, total, color ### Stepped Value Line https://fieldbook.lizardi.mx/es/components/stepped-value-line Una serie única dibujada como recorridos planos y saltos verticales, la forma que desea cuando un valor se mantiene estable hasta que cambia. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, stepMode, strokeWidth, showGrid, showAxis ### Sticky zoom hero https://fieldbook.lizardi.mx/es/components/sticky-zoom-hero Un panel de héroe que permanece fijado mientras te desplazas, empujando su fondo hacia ti hasta que se difumina y entrega la página al texto a continuación. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: headline, accent, maxScale, maxBlur, textLift ### Stitched disc button https://fieldbook.lizardi.mx/es/components/stitched-disc-button Un disco de botón de costura moldeado e inclinado que se endereza y se abre hasta convertirse en una pastilla etiquetada al pasar el mouse o enfocar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tilt, size ### Stitched rule link button https://fieldbook.lizardi.mx/es/components/stitched-rule-link-button Un enlace de texto silencioso en mayúsculas con un galón que se mueve en un bucle en reposo; Pasar el cursor o enfocar mantiene el galón hacia adelante, amplía el seguimiento y borra una regla de acento cosida debajo de la etiqueta. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, nudge, ruleStyle, cycle ### Straight Segment Area Chart https://fieldbook.lizardi.mx/es/components/straight-segment-area-chart Un gráfico de áreas de una sola serie creado a partir de segmentos rectos entre puntos, de modo que el contorno se lee como una polilínea facetada nítida en lugar de una curva. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, months, fillOpacity, dotSize, animate ### Straight segment line https://fieldbook.lizardi.mx/es/components/straight-segment-line Un gráfico de serie única dibujado como segmentos rectos de un punto a otro, sin marcadores, para que cada giro de los datos permanezca exactamente donde ocurrió. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, strokeWidth, showGrid, showAxis, animateOnMount ### Streak border button https://fieldbook.lizardi.mx/es/components/streak-border-button Un botón de pastilla con un suave punto de luz deslizándose a lo largo de sus bordes superior e inferior, las dos rayas viajando en direcciones opuestas. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, speed, thickness ### Streaming signal line https://fieldbook.lizardi.mx/es/components/streaming-signal-line Un gráfico de líneas en vivo que se desplaza a través de una ventana de tiempo fija, avanzando hacia cada nueva lectura con una punta pulsante y una pastilla de valor. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, windowSeconds, smoothing, volatility, showFill, paused ### Striped shadow heading https://fieldbook.lizardi.mx/es/components/striped-shadow-heading Un título en negrita con una copia duplicada detrás, lleno de franjas diagonales que siguen flotando como una larga sombra proyectada. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, shadowColor, speed, fontSize ### Stroke drawing board https://fieldbook.lizardi.mx/es/components/stroke-drawing-board Una cuadrícula de formas delineadas que se dibujan trazo a trazo en una onda escalonada, como si un bolígrafo trabajara en todo el tablero. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, stagger, duration, strokeWidth, loop ### Styled native dropdown https://fieldbook.lizardi.mx/es/components/styled-native-dropdown Una selección nativa rediseñada con un borde personalizado, un anillo de enfoque y un galón mientras el sistema operativo sigue brindando el menú de opciones y el comportamiento del teclado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: selected, accentColor, disabled, invalid ### Suffix reveal button https://fieldbook.lizardi.mx/es/components/suffix-reveal-button Un botón de acción sólido cuya etiqueta abre un espacio al pasar el cursor y desliza una segunda palabra final en él, de modo que un verbo se convierte en una frase completa. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, suffix, width, glow ### Sun moon morph toggle https://fieldbook.lizardi.mx/es/components/sun-moon-morph-toggle Un tema alterna donde un sol anillado aleja sus rayos y crece mientras un segundo disco se desliza para arrancarle una media luna. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: ink, startDark, tileSize, duration, showTile ### Sun Moon Switch https://fieldbook.lizardi.mx/es/components/sun-moon-switch Un interruptor de pastilla cuyo pulgar se desliza entre dos posiciones de reposo mientras un ícono de sol y un ícono de luna que flanquean la pista aparecen y desaparecen para coincidir. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: on, size, accentColor ### Survey route map https://fieldbook.lizardi.mx/es/components/survey-route-map Un mapa topográfico oscuro y sin bordes con contornos de elevación finos, puntos topográficos dispersos y una ruta que se traza entre dos marcadores. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, density, seed, showRoute, caption, pointerLift ### Swallowing Chip Button https://fieldbook.lizardi.mx/es/components/swallowing-chip-button Un botón tipo pastilla con un pequeño chip ligero fijado en su borde derecho que se ensancha al pasar el cursor hasta cubrir todo el botón. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, duration, expandOnFocus ### Layer swap button https://fieldbook.lizardi.mx/es/components/swap-fill-button Dos capas redondeadas ancladas a una esquina cambian de tamaño al pasar el mouse, el relleno en reposo se colapsa en una semilla mientras la semilla crece para llenar el botón. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, restColor, duration, seedSize ### Swap timing modes https://fieldbook.lizardi.mx/es/components/swap-timing-modes Tres insignias intercambian el mismo par de íconos uno al lado del otro bajo tres reglas de salida diferentes, por lo que las eliminaciones superpuestas, secuenciales y fuera de flujo se pueden comparar de un vistazo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: duration, autoPlay, interval, showLabels, accent ### Swarm trail cursor https://fieldbook.lizardi.mx/es/components/swarm-trail-cursor Una nube de manchas suaves orbita el puntero dentro de un panel, dejando rastros ahusados y fusionándose en una forma donde se superponen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, accent, blobSize, speed, trail, scatterOnPress ### Sweep invert button https://fieldbook.lizardi.mx/es/components/sweep-invert-button Un botón azul marino intenso cuyo relleno brillante se extiende desde el borde derecho y cambia la etiqueta al tono oscuro con solo apretarlo rápidamente. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, base, tracking, durationMs ### Sweep scope https://fieldbook.lizardi.mx/es/components/sweep-scope Un visor redondo donde los anillos pulsan hacia afuera desde el centro, los radios lo cortan en sectores y un lóbulo de luz recorre el centro. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: color, rings, spokes, sweepSpeed, brightness, interactive ### Sweeping band button https://fieldbook.lizardi.mx/es/components/sweeping-band-button Un botón relleno que contiene una banda de color del doble de su ancho, que se desliza de un extremo a otro al pasar el cursor para que parezca que el relleno se está desplazando. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, sweepMs, highlight ### Sweeping progress bar https://fieldbook.lizardi.mx/es/components/sweeping-progress-bar Una barra de carga indeterminada en un marco en forma de píldora, que crece desde la nada hasta todo su ancho y vuelve a la nada en un suave bucle sin fin. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, widthPx, durationS ### Sweeping shine text https://fieldbook.lizardi.mx/es/components/sweeping-shine-text Texto lleno de un degradado tenue y una banda diagonal brillante que se mueve hacia adelante y hacia atrás como un destello de luz y puede congelarse en su lugar mientras está suspendido. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, speed, baseColor, shineColor ### Sweeping status text https://fieldbook.lizardi.mx/es/components/sweeping-status-text Una palabra de estado grande que cambia a un ritmo constante mientras una banda brillante recorre sin cesar las formas de las letras. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: interval, fontSize, sweepDuration, accent ### Swelling pill button https://fieldbook.lizardi.mx/es/components/swelling-gradient-pill Una pastilla de gradiente de un tono que se hincha al pasar el mouse mientras una sombra teñida se extiende debajo y se comprime brevemente cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, hoverScale, shadowSpread, paddingX ### Swelling pill add button https://fieldbook.lizardi.mx/es/components/swelling-pill-add-button Una pastilla de acento fuerte con una marca más que respira lentamente y que se hincha aproximadamente una décima parte con un ritmo lento y prolongado y se hunde en una sombra interior cuando se sostiene. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, growth, easeMs, pulse ### Swipe action row https://fieldbook.lizardi.mx/es/components/swipe-action-row Una fila de lista con estilo de mensaje que revela botones de acción de colores detrás cuando la arrastra hacia los lados. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: name, preview, actionCount, dangerColor ### Swipe away card deck https://fieldbook.lizardi.mx/es/components/swipe-away-card-deck Una baraja de tarjetas fotográficas en abanico que puedes arrastrar o tocar para enviar la superior hacia atrás, una a la vez. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cards, sensitivity, randomRotation, autoplay ### Swipe fill press pill https://fieldbook.lizardi.mx/es/components/swipe-fill-press-pill Una cápsula pálida cuya hoja de color se desliza hacia adentro desde el borde izquierdo al pasar el mouse o enfocarse con una ligera hinchazón, luego se aplasta con fuerza mientras se presiona. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, swellScale, pressScale, duration, uppercase ### Swipe photo stack https://fieldbook.lizardi.mx/es/components/swipe-photo-stack Una pila de tarjetas con fotografías donde la de arriba se puede lanzar hacia la izquierda o hacia la derecha, enviándola hacia atrás a medida que la pila avanza. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: peek, rotation, threshold, accent ### Swipe Reveal Actions https://fieldbook.lizardi.mx/es/components/swipe-reveal-actions Una fila de lista que revela íconos de acción de colores detrás de ella cuando se arrastra hacia los lados, se abre, se cierra o se completa automáticamente un deslizamiento completo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: senderName, avatarColor, actionCount ### Swipeable slide deck https://fieldbook.lizardi.mx/es/components/swipeable-slide-deck Un visor de diapositivas de un solo elemento a la vez con botones redondos anterior y siguiente, compatibilidad con flechas de teclado y desplazamiento deslizante alineado a presión. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: slideCount, loop, accentColor, showCounter ### Switch Spring Lab https://fieldbook.lizardi.mx/es/components/switch-spring-lab Un simple interruptor de encendido y apagado para ajustar el rebote que se siente el resorte del pulgar y la amplitud del pulgar cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: pressedWidth, springStiffness, springDamping, accentColor ### Syntax Tab Switcher https://fieldbook.lizardi.mx/es/components/syntax-tab-switcher Una fila de pestañas etiquetadas encima de un panel de código resaltado con sintaxis, con un resaltado deslizante debajo de la pestaña activa y un botón de copia con un solo clic. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultTab, showCopyButton ### Tag chips field https://fieldbook.lizardi.mx/es/components/tag-chips-field Un campo de texto que convierte cada entrada en un pequeño chip extraíble, para recopilar una breve lista de palabras clave o etiquetas. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, accent ### Tall Code Keypad https://fieldbook.lizardi.mx/es/components/tall-code-keypad Un formulario de verificación sin bordes construido sobre cuadros de códigos inusualmente altos, con dígitos que llegan con un rebote corto y un retroceso mantenido que borra todo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, length, cellHeight, holdToClear, heading ### Tapered Funnel Stages https://fieldbook.lizardi.mx/es/components/tapered-funnel-stages Un embudo de conversión donde cada etapa es una banda suave y estrecha respaldada por capas de halo que se extienden cuando la pasas por encima. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, layers, gap, stagger, edges, showBands ### Task Log Loader https://fieldbook.lizardi.mx/es/components/task-log-loader Un indicador de funcionamiento que combina un anillo giratorio anidado con un registro numerado corto cuyas líneas se desplazan hacia arriba a medida que se completa cada paso. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: lineInterval, visibleLines, accent, showLineNumbers ### Team size stepper https://fieldbook.lizardi.mx/es/components/team-size-stepper Un paso a paso para elegir el tamaño de un equipo donde cada paso revela o esconde un avatar en una pila superpuesta encima del conteo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, label, avatarCount ### Text field https://fieldbook.lizardi.mx/es/components/text-field-basic Un campo de texto de una sola línea con un borde suave, un anillo de énfasis, un marcador de posición silenciado y un estado deshabilitado adecuado. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, accent, disabled ### Morphing Headline https://fieldbook.lizardi.mx/es/components/text-morph-cycle Un titular que disuelve una frase en la siguiente, permitiendo que las letras coincidentes se deslicen hacia su nuevo lugar mientras el resto se difumina y se aleja o se acerca. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: holdDelay, loop, accentColor, phraseSet ### Text style toggle group https://fieldbook.lizardi.mx/es/components/text-style-toggle-group Un trío de estilos unidos alterna entre negrita, cursiva y subrayado que renuevan el estilo de una línea de muestra en vivo que se encuentra justo debajo del grupo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: sampleText, accent, cellSize, boldOn, italicOn ### Theme toggle button https://fieldbook.lizardi.mx/es/components/theme-toggle-button Un interruptor etiquetado que cambia entre claro y oscuro, girando su sol marca un giro completo al pasar el mouse y desvaneciendo la palabra al lado en cada interruptor. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: showLabel, size, accent, spinOnHover, startDark ### Themed chart frame https://fieldbook.lizardi.mx/es/components/themed-chart-frame Un marco de gráfico de barras agrupado reutilizable que le da a cada serie un color consistente, una información sobre herramientas flotante con estilo y una leyenda que atenúa otras series al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: barGap, cornerRadius, primaryColor, secondaryColor, showLegend ### Threaded post card https://fieldbook.lizardi.mx/es/components/threaded-post-card Una publicación social representada como un panel enmarcado con un autor verificado, un cuerpo de varias líneas y una respuesta anidada debajo de una regla. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: handle, verified, showReply, accent ### Three layer push button https://fieldbook.lizardi.mx/es/components/three-layer-push-button Una tecla táctil construida a partir de tres placas apiladas, una sombra proyectada, una pared lateral oscura y una cara flotante, que surge al flotar y toca fondo instantáneamente al presionarla. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, liftHeight, radius, springy ### Three weight button https://fieldbook.lizardi.mx/es/components/three-weight-button Un botón silencioso de tres pesos (relleno, delineado, desnudo) con un radio casi cuadrado y un único paso de fondo rápido al pasar el mouse, sin sombras en ninguna parte. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: variant, label, accent, radius, fullWidth ### Threshold level meter https://fieldbook.lizardi.mx/es/components/threshold-level-meter Un indicador de nivel horizontal cuyo llenado cambia de verde a ámbar y a rojo cuando el valor actual cruza dos umbrales, como lo haría un indicador de almacenamiento o de batería. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, value, warnAt, criticalAt ### Thumb icon switch https://fieldbook.lizardi.mx/es/components/thumb-icon-switch Un interruptor de píldora cuyo pulgar deslizante lleva su propio ícono pequeño, que se intercambia cuando el pulgar llega a cada extremo de la pista. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: on, pressedWidth, accentColor ### Thumbnail-to-video lightbox https://fieldbook.lizardi.mx/es/components/thumbnail-to-video-lightbox Una miniatura de video con un botón de reproducción que abre una caja de luz contenida, el panel de video llega desde una dirección elegida sobre un fondo borroso y atenuado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: animationStyle, accent, thumbnailLabel ### Ticker swap button https://fieldbook.lizardi.mx/es/components/ticker-swap-button Un botón de pastilla cuya etiqueta se reemplaza al pasar el cursor por un símbolo interminable de la misma palabra que se desplaza de lado a través de su frente. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, speed, gap, radius ### Tide fill button https://fieldbook.lizardi.mx/es/components/tide-fill-button Un botón cuya barra de acento en reposo se eleva para inundar toda la placa al pasar el mouse, con el grosor de la barra, la velocidad de subida y el retraso de la etiqueta, todos expuestos como perillas. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, barHeight, riseMs, labelDelayMs, accent, hoverScale ### Tile reveal swap https://fieldbook.lizardi.mx/es/components/tile-reveal-swap Dos paneles intercambian baldosa por baldosa, cada baldosa gira y escala a medida que se voltea, en un orden dirigido desde el centro, los bordes o en espiral. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tileSize, pattern, duration, spin, trigger, accent ### Tilt card https://fieldbook.lizardi.mx/es/components/tilt-card Una tarjeta de contenido que gira en 3D hacia el puntero con un resplandor en movimiento, se levanta mientras está activada y vuelve a nivelarse cuando el puntero se aleja. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: maxTilt, glare, lift ### Tilt-in content frame https://fieldbook.lizardi.mx/es/components/tilt-in-content-frame Un panel informativo que se inclina desde un borde, se cierra libremente con un clic externo o Escape y crece suavemente a medida que se revela una segunda sección de contenido. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: from, accent, showMore, title ### Tilt Parallax Tile https://fieldbook.lizardi.mx/es/components/tilt-parallax-tile Un mosaico que se inclina en 3D hacia el puntero sobre resortes, levanta una capa superpuesta sobre su cara y sigue un pequeño título que se inclina con la velocidad del cursor. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tilt, hoverScale, caption, showCaption, accent ### Tilt pop button https://fieldbook.lizardi.mx/es/components/tilt-pop-button Un pequeño botón sólido que se hace más grande y se inclina un par de grados hacia un lado al pasar el mouse, luego se aplana hacia la superficie cuando se presiona. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, scale, rotation, radius ### Tilt Spotlight Grid https://fieldbook.lizardi.mx/es/components/tilt-spotlight-feature-grid Una cuadrícula de capacidades donde la tarjeta suspendida se inclina hacia el puntero y se ilumina mientras que las demás tarjetas se atenúan y se encogen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: columns, accent, tiltMax, dimOthers, heading ### Tilted deck button https://fieldbook.lizardi.mx/es/components/tilted-deck-button Un botón colocado en perspectiva como una llave en una plataforma inclinada, inclinándose más hacia afuera y deslizándose hacia abajo cuando se suspende y se presiona. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, tilt, shadow ### Tilted perspective button https://fieldbook.lizardi.mx/es/components/tilted-perspective-button Una llamada a la acción redondeada que se encuentra en una perspectiva 3D permanente y se balancea hacia el puntero a medida que cruza la placa. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tilt, lift, track ### Tilted plinth call to action https://fieldbook.lizardi.mx/es/components/tilted-plinth-cta-button Un llamado a la acción grueso que descansa sobre un pedestal de color sólido, ligeramente inclinado en el espacio, que se levanta de su base al flotar y se hunde bajo una prensa. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, tilt, depth, showArrow ### Tilted Stack CTA https://fieldbook.lizardi.mx/es/components/tilted-stacked-cta Una llamada a la acción gruesa que permanece girada sobre una pila de sombras desplazadas y luego se mantiene en posición vertical debajo del puntero. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tilt, depth, radius ### Tilted tile parallax https://fieldbook.lizardi.mx/es/components/tilted-tile-parallax Filas de mosaicos etiquetados en una cuadrícula inclinada de gran tamaño se deslizan en direcciones opuestas a medida que el puntero cruza, y cada fila llega con su propio retraso. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, rows, tilt, travel, inertia, idleSway ### Tilting Backer Tile https://fieldbook.lizardi.mx/es/components/tilting-backer-tile-button Un mosaico cuadrado translúcido con una placa de color sólido exactamente detrás de él que se inclina desde debajo de la cara al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, size, tilt, duration ### Tilting cube field https://fieldbook.lizardi.mx/es/components/tilting-cube-field Una cuadrícula de cubos huecos que se inclinan hacia el puntero dentro de un radio de caída, deambulan por sí solos cuando se los deja solos y destellan hacia afuera formando anillos con un clic. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gridSize, maxAngle, radius, rippleSpeed, autoDrift, accent ### Tilting Rocket Button https://fieldbook.lizardi.mx/es/components/tilting-rocket-button Un botón de lanzamiento oscuro cuyo glifo de cohete inclinado se balancea hacia arriba y se desliza hacia adelante mientras la etiqueta lo sigue detrás. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, restTilt, duration ### Tilting send button https://fieldbook.lizardi.mx/es/components/tilting-send-button Un botón de envío pálido cuyo glifo se inclina hacia arriba cuando se enfoca el teclado y se arquea en el borde cuando se dispara, luego se reinicia. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tiltAngle, flightDistance, resetDelay ### Timeline marker row https://fieldbook.lizardi.mx/es/components/timeline-marker-row Una línea de un registro de actividad compacto: un pequeño ícono emparejado con texto silenciado o una etiqueta centrada entre dos líneas de regla que marcan una separación entre grupos de entradas. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: variant, label, accent ### Timeline scatter chart https://fieldbook.lizardi.mx/es/components/timeline-scatter-chart Un diagrama de dispersión de series temporales donde cada lectura es un pequeño marcador de anillo, que aparece con la carga y atenúa a sus vecinos cuando se desplaza cerca de un punto en el tiempo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: pointRadius, showSecondSeries, hoverDimOpacity, primaryColor, secondaryColor ### Tinted disc swell button https://fieldbook.lizardi.mx/es/components/tinted-disc-swell-button Una clave oscura monoespaciada con una viñeta inferior; Flotando se hincha un disco de color translúcido desde su centro que tiñe el rostro sin ocultarlo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, discOpacity, swellSeconds, pressScale ### Tinted ring radar https://fieldbook.lizardi.mx/es/components/tinted-ring-radar Una carta polar en una escala circular suavemente teñida: cada anillo de cuadrícula lleva un ligero toque de acento para que el fondo se profundice silenciosamente hacia el centro. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, gridTint, fillOpacity, rings, showSpokes ### Tinted shadow buttons https://fieldbook.lizardi.mx/es/components/tinted-shadow-buttons Una fila de botones sólidos que proyectan cada uno una sombra suave en su propio tono, por lo que el color de cada acción se filtra en la superficie debajo de él. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, count, hueSpread, shadowStrength, radius ### Tinted web radar https://fieldbook.lizardi.mx/es/components/tinted-web-radar Una carta polar cuya red poligonal está rellena en lugar de dibujada, lo que proporciona un fondo facetado y teñido en el que se asienta la forma de la serie. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, gridTint, fillOpacity, rings, strokeWidth ### Toast stack https://fieldbook.lizardi.mx/es/components/toast-stack Una pila de notificaciones en la esquina donde las tostadas más antiguas se esconden detrás de las más nuevas, apuntándolas, las organiza en una lista, y cada una drena una línea antes de irse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: position, maxVisible, duration ### Todo strike checkbox https://fieldbook.lizardi.mx/es/components/todo-strike-checkbox Una casilla de verificación de tarea que dibuja su marca de verificación y traza una línea a través de la etiqueta de la tarea al mismo tiempo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: taskCount, strikeDuration, accentColor ### Toggle Reveal Panel https://fieldbook.lizardi.mx/es/components/toggle-reveal-panel Un único bloque de contenido que se expande o se cierra cuando se presiona el botón de alternancia. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: defaultOpen, accentColor, transitionMs, width ### Tonal tint action button https://fieldbook.lizardi.mx/es/components/tonal-tint-action-button Un botón silencioso que utiliza un tono pálido de su acento como relleno y un tono profundo del mismo tono para la etiqueta y el ícono. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, radius, size, showIcon, tintStrength ### Tone Pill Label https://fieldbook.lizardi.mx/es/components/tone-pill-label Un chip de estado compacto para etiquetar elementos, disponible como relleno sólido, tinte suave o contorno, cada uno coloreado con un tono de estado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, tone, variant, withDot ### Tone Rule Alert https://fieldbook.lizardi.mx/es/components/tone-rule-alert Un banner de aviso en línea con un ícono y un acento de color que cambia entre tonos neutrales, de información, de éxito, de advertencia y de error. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tone, title, description, dismissible ### Toolbar icon tooltip https://fieldbook.lizardi.mx/es/components/toolbar-icon-tooltip Una fila de botones de la barra de herramientas que solo contienen íconos y que muestran una pequeña etiqueta con punta de flecha cerca del que esté sobre el cursor o enfocado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, align, sideOffset, accent ### Tooltip tint icon row https://fieldbook.lizardi.mx/es/components/tooltip-tint-icon-row Una fila de botones de iconos circulares donde, al pasar el cursor sobre uno, se levanta una burbuja etiquetada encima y los inunda con el propio tinte de ese elemento. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, gap, accent, perItemTint, lift, bounce ### Toss to bin delete https://fieldbook.lizardi.mx/es/components/toss-to-bin-delete-button Un contenedor de basura dibujado cuya tapa se abre con una prensa mientras una hoja arrugada se arquea y cae en él. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: ink, accent, lidAngle, tossDuration ### Tracing edge button https://fieldbook.lizardi.mx/es/components/tracing-edge-button Un botón sólido donde cuatro líneas finas comienzan en esquinas opuestas y dibujan todo el perímetro al pasar el mouse, reuniéndose exactamente cuando se cierra el contorno. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, traceMs, cornerRadius ### Tracking crosshair overlay https://fieldbook.lizardi.mx/es/components/tracking-crosshair-overlay Líneas finas de ancho y alto completo que siguen el puntero con un pequeño retraso y tiemblan hasta quedar estáticas cada vez que cruzan un objetivo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: smoothing, thickness, showCoords, wobble, color ### Trail breadcrumbs https://fieldbook.lizardi.mx/es/components/trail-breadcrumbs Un rastro de ruta de navegación horizontal con separadores entre cada paso, enlaces de antepasados silenciados, una página actual en negrita y puntos suspensivos que colapsan los caminos largos. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: separator, maxVisible, accentColor ### Trailing arrows text button https://fieldbook.lizardi.mx/es/components/trailing-arrows-text-button Un enlace de texto sin bordes que amplía el espacio entre letras al pasar el mouse mientras un rastro de flechas se abre en abanico hacia la derecha, cada una más lejos y más tenue que la anterior. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, arrowCount, spread, stagger ### Trailing cursor https://fieldbook.lizardi.mx/es/components/trailing-cursor-arrow Un cursor dibujado que persigue el puntero real sobre un resorte, dejando un rastro de brillo suave y desvaneciendo imágenes residuales mientras gira para mirar en la dirección en la que viaja. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: stiffness, damping, size, accent, rotate ### Trailing echo text https://fieldbook.lizardi.mx/es/components/trailing-echo-text Un titular con una pila de copias borrosas y translúcidas que van por detrás de su inclinación impulsada por el puntero, extendiéndose hasta convertirse en un rastro de eco y desapareciendo hasta la primera línea cuando está inactivo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, echoes, offset, tint ### Transfer status card https://fieldbook.lizardi.mx/es/components/transfer-status-card Una tarjeta de transferencia de dinero que pasa de un estado de procesamiento a un estado completado, con un ícono giratorio que se convierte en una marca de verificación y las dos filas de cuentas fusionándose. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: amount, exchangeRate, accent, autoplay ### Translucent wash button https://fieldbook.lizardi.mx/es/components/translucent-wash-button Una cápsula profunda iluminada desde el centro hacia afuera por un disco blanco translúcido que escala más allá de sus bordes al flotar o enfocar, tiñendo la cara más brillante en lugar de cubrirla, luego drena la luz hacia adentro. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, washOpacity, washScale, duration, radius ### Traveling border pill https://fieldbook.lizardi.mx/es/components/traveling-border-pill Un pequeño botón tipo pastilla cuyo borde fino lleva un segmento de acento brillante interminablemente alrededor del contorno, mientras que el texto de la etiqueta adquiere el mismo brillo itinerante. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, lapMs, segment, showDivider ### Traveling edge glow card https://fieldbook.lizardi.mx/es/components/traveling-edge-glow-card Una tarjeta oscura rodeada por un borde degradado de dos tonos que se desliza sin cesar, duplicado por un eco borroso que ilumina la superficie detrás de ella. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: borderSize, radius, speed, colorStart, colorEnd ### Traveling glow rim button https://fieldbook.lizardi.mx/es/components/traveling-glow-rim-button Un botón de losa oscura que permanece plano hasta que se apunta hacia él, cuando una banda brillante de luz decorativa parece viajar sin cesar alrededor de su borde. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, blur, speed, alwaysOn ### Traveling Toolbar Tooltip https://fieldbook.lizardi.mx/es/components/traveling-toolbar-tooltip Una única información sobre herramientas flotante que se desliza suavemente de un ícono de la barra de herramientas al siguiente cuando el cursor o el foco se mueven entre ellos, en lugar de desaparecer y reaparecer cada vez. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: openDelay, closeDelay, accentColor ### Traveling underglow pill https://fieldbook.lizardi.mx/es/components/traveling-underglow-pill Una cápsula cuya banda de color de dos tonos viaja de lado al flotar mientras una copia borrosa detrás de ella ilumina la superficie debajo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, secondary, cycleSeconds, glowBlur, width ### Travelling knob follow button https://fieldbook.lizardi.mx/es/components/travelling-knob-follow-button Una píldora delineada cuya perilla redonda rueda hasta el otro extremo al pasar el mouse, pintando una pista de acento detrás de ella y deslizando un conteo de seguidores a la vista; hacer clic mantiene el estado seguido y aumenta el recuento. Frameworks: react Access: open Public prop names: label, count, accent, travelMs, followed ### Tri-state checkbox https://fieldbook.lizardi.mx/es/components/tri-state-checkbox Una casilla de verificación con estados no marcados, marcados e indeterminados que se llena con un color sólido y cambia una marca de verificación por un guión. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: state, accentColor, size, disabled ### True hover swatch https://fieldbook.lizardi.mx/es/components/true-hover-swatch Una muestra de color que crece solo durante un desplazamiento del puntero genuino, ignorando el desplazamiento falso al pulsar un toque para que nunca se quede atascado y ampliado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: hoverScale, duration, accent, radius, showState ### Tube screen plasma https://fieldbook.lizardi.mx/es/components/tube-screen-plasma Una pantalla de vidrio abultada que muestra lentas gotas de plasma, completa con líneas de escaneo, píxeles gruesos, una franja de color y un suave brillo de los fósforos. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, curvature, scanlineStrength, pixelSize, channelShift, speed ### Tunnel Warp Panel https://fieldbook.lizardi.mx/es/components/tunnel-warp-panel El contenido se encuentra en la boca de un túnel de cuatro paredes mientras vigas estrechas corren por cada pared hacia el espectador. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: perspective, beamsPerSide, beamSize, beamDuration, accentColor, gridOpacity ### Turbulence Decay Card https://fieldbook.lizardi.mx/es/components/turbulence-decay-card Un panel de arte que se mancha con ruido mientras el puntero se mueve rápido y se vuelve a formar cuando se desacelera, desplazándose e inclinándose hacia el cursor a medida que avanza. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: grain, octaves, maxSmear, driftBound, accent ### Twin Bubble Rise https://fieldbook.lizardi.mx/es/components/twin-bubble-rise-button Dos elipses de gran tamaño se elevan desde debajo de un botón de contorno delgado al pasar el cursor o al enfocar, uno débil al frente y el de acento a continuación, por lo que el relleno llega como una curva ondulada. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, riseSeconds, bubbleScale, radius ### Twin ring chart https://fieldbook.lizardi.mx/es/components/twin-ring-chart Dos anillos concéntricos, un disco interior y una banda exterior separada, que comparan las mismas cinco categorías en dos períodos de tiempo de un vistazo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, hueRange, innerRadius, ringGap, outerBand ### Twin Sweep Tile https://fieldbook.lizardi.mx/es/components/twin-sweep-tile-button Un mosaico de contorno cuadrado que se inclina a medida que se levanta, pasa dos bandas de luz inclinadas a través de sí mismo en direcciones opuestas y cambia su glifo por un título. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, caption, tilt, sweep ### Twinkle highlight text https://fieldbook.lizardi.mx/es/components/twinkle-highlight-text Texto resaltado en negrita con pequeñas estrellas brillantes de cuatro puntas que aparecen y desaparecen continuamente en posiciones aleatorias alrededor y sobre las letras. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, sparkleCount, colorOne, colorTwo ### Two bar close tile https://fieldbook.lizardi.mx/es/components/two-bar-close-tile Un mosaico de menú de dos líneas que se cierra en dos tiempos: las barras se deslizan juntas en una línea y luego se separan formando una cruz. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: ink, accent, tileSize, gap, beat ### Two face flip button https://fieldbook.lizardi.mx/es/components/two-face-flip-button Un botón con dos caras apiladas que giran entre sí en 3D al pasar el mouse, el frente se inclina hacia un borde elegido mientras que la parte posterior se balancea para ocupar su lugar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: frontLabel, backLabel, from, accent, tapScale ### Two-Mode Resize Tabs https://fieldbook.lizardi.mx/es/components/two-mode-resize-tabs Una barra de pestañas con una píldora transformadora resaltada cuyo marco de contenido puede crecer para adaptarse a la altura natural de cada panel o cambiar de tamaño como un cuadro animado, elegido mediante un interruptor de modo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: resizeMode, tabOneLabel, tabTwoLabel, accent ### Two-Month Range Picker https://fieldbook.lizardi.mx/es/components/two-month-range-picker Un selector de rango de fechas que muestra dos meses consecutivos a la vez, por lo que un rango que abarca un límite de mes permanece completamente visible mientras se elige. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, startMonth, startYear, gap ### Two series area legend https://fieldbook.lizardi.mx/es/components/two-series-area-legend Un gráfico de áreas de dos series apiladas con una leyenda debajo del gráfico que muestra el total de cada serie y puede aislar una serie a la vez. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, secondColor, fillOpacity, showTotals, animate ### Two Tone Frame Pill https://fieldbook.lizardi.mx/es/components/two-tone-frame-pill Una cápsula pálida se encuentra dentro de un marco grueso y redondeado dividido en dos bandas de colores planos, y un glifo sólido se hincha al flotar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, topBand, bottomBand, frameWidth, splitPoint ### Typed confirm dialog https://fieldbook.lizardi.mx/es/components/typed-confirm-dialog Un cuadro de diálogo de acción destructiva cuyo botón de confirmación solo se desbloquea una vez que alguien escribe una frase que coincida exactamente, lo que protege contra clics accidentales. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: confirmPhrase, accentColor, dangerLabel ### Typewriter caption https://fieldbook.lizardi.mx/es/components/typewriter-caption Un título se escribe solo un carácter a la vez a un ritmo constante, con un cursor de bloque sólido que sigue parpadeando una vez completada la línea. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, typeSpeedMs, cursorColor ### Typewriter code block https://fieldbook.lizardi.mx/es/components/typewriter-code-block Un panel de código de color de sintaxis que revela un breve fragmento, un carácter a la vez, como si se estuviera escribiendo en vivo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: speed, startDelay, loop, accent ### Typewriter code panel https://fieldbook.lizardi.mx/es/components/typewriter-code-panel Un panel de edición de código que escribe un fragmento carácter por carácter detrás de un símbolo de intercalación parpadeante, con un encabezado de nombre de archivo y un botón de copiar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: typingSpeed, startDelay, showCursor, accentColor ### Typewriter reveal button https://fieldbook.lizardi.mx/es/components/typewriter-reveal-button Un botón monoespaciado sólido que se convierte en un contorno y vuelve a escribir su propia etiqueta desde el ancho cero detrás de un símbolo de intercalación parpadeante cada vez que se coloca el cursor sobre él o se enfoca. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, typeMs, glow, caret ### Typewriter sentence cycle https://fieldbook.lizardi.mx/es/components/typewriter-sentence-cycle Una máquina de escribir con cursor parpadeante escribe una frase a la vez, la pausa, la borra y pasa a la siguiente en un ciclo interminable. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: sentenceOne, typingSpeed, pauseDuration, loop, cursorColor ### Typing cursor text https://fieldbook.lizardi.mx/es/components/typing-cursor-text Una oración escribe un carácter a la vez detrás de un cursor parpadeante, hace una pausa, luego se borra hacia atrás y escribe la siguiente línea en un bucle sin fin. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: duration, holdDelay, loop, showCursor ### Underglow border button https://fieldbook.lizardi.mx/es/components/underglow-border-button Un botón cuyo borde de dos píxeles es una banda teñida que se desplaza hacia los lados en un bucle sin fin, con un brillo borroso a juego debajo que se mueve al ritmo de él. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, variant, speed, glow ### Underglow glitch button https://fieldbook.lizardi.mx/es/components/underglow-glitch-button Una losa oscura insertada con una palabra brillante que deja a la vista un glifo oculto y levanta una barra de luz desde debajo de su borde inferior. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, glow, glitch, radius ### Underline flood button https://fieldbook.lizardi.mx/es/components/underline-flood-button Un botón con una fina banda decorativa en su borde inferior que se ensancha y luego sube hasta convertirse en una inundación completa al pasar el mouse o enfocar, la etiqueta cambia de color solo una vez que el relleno ha aterrizado. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, intent, size, accent, fillMs ### Underline hint tooltip https://fieldbook.lizardi.mx/es/components/underline-hint-tooltip Una palabra subrayada con puntos que revela una breve burbuja de sugerencia encima o debajo de ella al pasar el cursor o con el teclado, impulsada completamente por CSS. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, tip, position, accent ### Underline sweep link https://fieldbook.lizardi.mx/es/components/underline-sweep-link Un botón de texto simple cuya regla crece desde la izquierda al pasar el mouse y retrocede hacia la derecha al salir, con una flecha larga que se extiende hacia adelante. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, travel, ruleWidth ### Underline tabs https://fieldbook.lizardi.mx/es/components/underline-tabs Una fila de pestañas de sección con una barra de color que se desliza y cambia de tamaño debajo de la etiqueta activa en lugar de un fondo relleno. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultTab, underlineThickness ### Underline Wipe Link https://fieldbook.lizardi.mx/es/components/underline-wipe-link-button Un enlace de texto en mayúsculas cuya regla se desplaza desde la izquierda al pasar el mouse y se retrae hacia la derecha al salir, con una flecha larga que se desliza hacia casa. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, tracking, duration, showArrow ### Unfurling chevron ring button https://fieldbook.lizardi.mx/es/components/unfurling-chevron-ring-button Un botón de contorno teñido al que le crece un anillo translúcido, aumenta su etiqueta y desenrolla un galón al pasar el cursor, rompiendo el anillo mientras se presiona. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, ringWidth, tintOpacity, showChevron ### Unrolling message pill https://fieldbook.lizardi.mx/es/components/unrolling-message-pill Una pastilla llena cuyo breve mensaje es reemplazado por un mensaje más largo que se desenrolla desde el borde izquierdo a medida que el relleno se escurre detrás de ella. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, idleLabel, revealLabel, revealMs, radius ### Upload Progress Line https://fieldbook.lizardi.mx/es/components/upload-progress-line Una barra de progreso delgada y animada que cuenta una tarea como la carga de un archivo desde cero hasta completarse, con una lectura de porcentaje y una animación de finalización al final. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, value, autoPlay, color ### Uppercase action button https://fieldbook.lizardi.mx/es/components/uppercase-action-button Un botón de acción compacto y relleno con una etiqueta con seguimiento en mayúsculas, esquinas cuadradas y estados silenciosos de solo relleno y de desplazamiento para barras de herramientas y encabezados de paneles. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, tracking, uppercase, disabled ### Usage pricing https://fieldbook.lizardi.mx/es/components/usage-pricing Una sección de precios donde un control deslizante de volumen genera una factura mensual de conteo, con la asignación incluida, la tarifa excedente y una llamada a la acción. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: currency, basePrice, accent ### Validated Signup Form https://fieldbook.lizardi.mx/es/components/validated-signup-form Un tiempo de ejecución de formulario pequeño que rastrea los valores, valida el desenfoque y el envío, conecta errores a sus entradas y muestra el estado de envío y luego de envío. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, validateOn, showCounter, submitDelay, submitLabel ### Value labeled line https://fieldbook.lizardi.mx/es/components/value-labeled-line Un gráfico de líneas mensual que imprime cada valor por encima de su propio punto, para que los números se puedan leer sin tener que desplazarse sobre nada. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, showValues, labelOffset, strokeWidth, showGrid ### Value tagged bar chart https://fieldbook.lizardi.mx/es/components/value-tagged-bar-chart Un gráfico de barras verticales donde cada barra lleva su propio número flotando justo encima de su punta, por lo que el gráfico se lee correctamente sin verificar un eje. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, barRadius, barGap, showGrid, animate ### Vector Flow Field https://fieldbook.lizardi.mx/es/components/vector-flow-field Un fondo de lienzo sin bordes donde miles de pequeños puntos brillantes flotan a lo largo de una corriente que evoluciona lentamente, dejando suaves rastros que se desvanecen detrás de ellos. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: density, speed, accentColor, trailFade ### Velocity comet trail https://fieldbook.lizardi.mx/es/components/velocity-comet-trail Una cadena de puntos que cada uno persigue al que está delante con inercia, estirándose hasta convertirse en un cometa con movimientos rápidos y enroscándose nuevamente formando un cúmulo en reposo. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: dotCount, accent, inertia, stretch, headSize ### Velocity marquee https://fieldbook.lizardi.mx/es/components/velocity-marquee Dos filas de texto repetido que se desplazan en direcciones opuestas y aceleran o retroceden con el desplazamiento de la página, luego regresan a su ritmo base. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, baseSpeed, reactive, fadeEdges, accent ### Velocity marquee text https://fieldbook.lizardi.mx/es/components/velocity-marquee-text Las filas de texto en mayúsculas repetidas se desplazan hacia los lados a un ritmo constante, y el desplazamiento de la página las acelera o invierte brevemente una fila antes de que todo vuelva a la velocidad base. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, baseSpeed, rows ### Velocity wave carousel https://fieldbook.lizardi.mx/es/components/velocity-wave-carousel Una amplia fila de mosaicos de imágenes que se desplazan hacia los lados con el desplazamiento de la página y se ondulan en una onda vertical que se hace más pronunciada cuanto más rápido se desplaza el visitante. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: waveIntensity, tileCount, accentColor ### Verification Code Card https://fieldbook.lizardi.mx/es/components/verification-code-card Un paso de verificación en cuadro con un campo de código etiquetado, un botón Verificar que se desbloquea solo cuando se completa el código y un enlace de reenvío en una cuenta regresiva. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: length, accentColor, resendSeconds, autoSubmit, title ### Vertex Dot Radar https://fieldbook.lizardi.mx/es/components/vertex-dot-radar-chart Un gráfico polar de una sola serie que fija un punto sólido en cada esquina del eje para que cada valor medido se lea como un punto y no solo como una silueta. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, dotRadius, fillOpacity, rings, showLabels ### Vertical brightness slider https://fieldbook.lizardi.mx/es/components/vertical-brightness-slider Un control deslizante alto que se llena de luz desde la parte inferior a medida que lo arrastras, resiste más allá de cada extremo y regresa al soltarlo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: value, accentColor, icon ### Vertical choice dial https://fieldbook.lizardi.mx/es/components/vertical-choice-dial Una columna alta de etiquetas que gira bajo arrastre con impulso y coloca la opción más cercana al centro en su lugar como opción activa. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: activeColor, textColor, spacing, loop ### Vertical rail tabs https://fieldbook.lizardi.mx/es/components/vertical-rail-tabs Una columna vertical de pestañas de sección baja por el borde izquierdo y el contenido se muestra a la derecha, donde un bloque resaltado se desliza hacia arriba y hacia abajo por el riel para rastrear la sección activa. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, railWidth, defaultSection ### Vertical word swap https://fieldbook.lizardi.mx/es/components/vertical-word-swap Una oración con una palabra contenida en una ventana de tamaño fijo que se desliza hacia arriba y hacia afuera con un temporizador mientras la siguiente palabra de la lista sube para ocupar su lugar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: prefix, words, intervalSeconds, accent ### Video Fill Text https://fieldbook.lizardi.mx/es/components/video-fill-text Las letras grandes actúan como una ventana: su interior muestra un movimiento continuo similar a un metraje en lugar de un color plano, recortado exactamente a las formas de las letras. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, fontSize, speedSeconds ### Video fill text mask https://fieldbook.lizardi.mx/es/components/video-fill-text-mask Letras enormes actúan como una ventana hacia un fondo en bucle generado, por lo que el color en movimiento solo es visible dentro de la forma de la palabra. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, motif, fontWeight ### View mode toggle switch https://fieldbook.lizardi.mx/es/components/view-mode-toggle-switch Un interruptor de dos estados que cambia una vista entre dos modos con nombre, con un pulgar deslizante que se encoge al presionarlo e intercambia un pequeño ícono dentro de él. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: checked, onLabel, offLabel, accent ### Visitor Map Card https://fieldbook.lizardi.mx/es/components/visitor-map-stat-card Una amplia tarjeta de tráfico construida sobre un mapa burdo del mundo en mosaico, donde cada región está teñida por su participación y al pasar el cursor se cambia el titular a esa región. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, cellSize, total, trend, title ### Voice Capture Button https://fieldbook.lizardi.mx/es/components/voice-capture-button Un control de prensa para grabar con un cronómetro en funcionamiento y un medidor de barra que cobra vida mientras escucha y se aplana en el momento en que se detiene. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: barCount, accent, autoDemo, idleCaption, activeCaption ### Warm band action button https://fieldbook.lizardi.mx/es/components/warm-band-action-button Un llamado a la acción grande y redondeado que lleva una banda de color cálido que se desliza debajo de la etiqueta al pasar el mouse, con un glifo de perno al frente. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, showIcon, radius, scale ### Warp lane streaks https://fieldbook.lizardi.mx/es/components/warp-lane-streaks Una carretera nocturna vista desde el asiento del conductor, donde dos corrientes de rayos de luz se acercan y se alejan de un punto de fuga y al mantener el puntero presionado se acelera todo. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: approachColor, recedeColor, speed, streakCount, curve, boostOnHold ### Warped line flow https://fieldbook.lizardi.mx/es/components/warped-line-flow Un marco lleno de líneas diagonales es empujado por un campo de deformación en movimiento, por lo que las líneas se agrupan en crestas brillantes y se extienden en canales negros. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: colorA, colorB, lineCount, speed, warp, rotation ### Warped tile tunnel https://fieldbook.lizardi.mx/es/components/warped-tile-tunnel Un fondo oscuro repleto de cuadrados brillantes que sobresalen a través de una lente, con anillos de brillo que se extienden hacia afuera desde el centro para siempre. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, density, speed, waveDepth, zoom, grain ### Wash swap pill https://fieldbook.lizardi.mx/es/components/wash-swap-pill Una pastilla negra alta cuyo relleno se disuelve al pasar el mouse para revelar un suave lavado teñido debajo mientras la etiqueta cambia de claro a oscuro. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, height, duration, angle ### Wavy letter heading https://fieldbook.lizardi.mx/es/components/wavy-letter-heading Un título cuyas letras viajan en una ola lenta, cada una detrás de la anterior, de modo que la línea se ondula como una bandera sin perder su línea de base. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, waveWord, amplitude, cycleSeconds, letterDelay, accent ### Wedge Pop Pie https://fieldbook.lizardi.mx/es/components/wedge-pop-pie Un pastel o rosquilla cuyas cuñas se abren a su vez y se empujan hacia afuera debajo del puntero, con el centro cambiando a la porción suspendida. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, slices, innerRadius, padAngle, cornerRadius, hoverOffset ### Weekday-Only Range Picker https://fieldbook.lizardi.mx/es/components/weekday-only-range-picker Un selector de rango de dos meses que se activa todos los sábados y domingos, por lo que un rango elegido solo puede comenzar, finalizar y ejecutarse entre semana. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, startMonth, startYear ### Wheel hint scroll button https://fieldbook.lizardi.mx/es/components/wheel-hint-scroll-button Un pequeño contorno de mouse con una barra de rueda oscilante que desplaza la siguiente pantalla a la vista al hacer clic y se desvanece cuando no queda nada por desplazar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, showLabel, height, cycle ### Winged crest button https://fieldbook.lizardi.mx/es/components/winged-crest-button Un botón recortado en una silueta de cresta con alas anchas que se llena desde el centro hacia afuera al pasar el mouse mientras la etiqueta se invierte y un amplio resplandor florece debajo de ella. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, width, fillMs, bloom ### Wipe fill button https://fieldbook.lizardi.mx/es/components/wipe-fill-button Un botón de pastilla cuyo disco del tamaño de una moneda crece para cubrir toda la forma al pasar el mouse, borrando el relleno de acento debajo de una etiqueta que nunca se mueve. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, wipeMs, direction, borderWidth ### Left Wipe Button https://fieldbook.lizardi.mx/es/components/wipe-fill-button-2 Un botón sólido en una repisa dura cuyo tinte más brillante se desliza desde el borde izquierdo mediante un barrido lento y deliberado al pasar el mouse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, wipeMs, ledge ### Left wipe button https://fieldbook.lizardi.mx/es/components/wipe-fill-button-3 Un botón que se encuentra sobre una repisa dura cuyo tinte más brillante se extiende desde el borde izquierdo al pasar el mouse, como el relleno de un medidor. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, wipeMs, ledge ### Wiping multi series line https://fieldbook.lizardi.mx/es/components/wiping-multi-series-line Un gráfico de líneas de varias series que se desplaza sobre la primera pintura, se desliza a un nuevo rango a medida que cambian los datos y muestra una lectura en forma de cruz en cada serie. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, secondary, points, curved, showFill, showCrosshair ### Wire Curtain https://fieldbook.lizardi.mx/es/components/wire-curtain-drift Una cortina de alambres verticales poco espaciados que se pliega como tela en una corriente lenta y se abre a lo largo del recorrido del puntero. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, spacing, amplitude, speed, pointerForce ### Word morph blend https://fieldbook.lizardi.mx/es/components/word-morph-blend Una palabra grande se disuelve a través de una densa mancha y se vuelve a solidificar en la siguiente palabra en una breve lista rotativa, las dos nunca se fusionan limpiamente, sino que se funden visiblemente entre sí. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: words, holdSeconds, morphSeconds, accent ### Word Crossfade Blend https://fieldbook.lizardi.mx/es/components/word-morph-blend-2 Una palabra se disuelve suavemente y cambia de forma a la siguiente, recorriendo una lista corta, utilizando un suave fundido cruzado de desenfoque y fusión en lugar de un corte duro. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: words, morphSeconds, holdSeconds ### Word swap loop https://fieldbook.lizardi.mx/es/components/word-swap-loop Una oración con un espacio para una palabra que recorre una lista en un cronómetro, cada palabra se desliza hacia arriba y hacia afuera a medida que la siguiente ocupa su lugar. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: words, interval, travel, accent, paused ### Word Swap Rotator https://fieldbook.lizardi.mx/es/components/word-swap-rotator Una palabra de una línea se cambia por la siguiente en una lista corta cada pocos segundos, deslizando la palabra antigua hacia arriba y hacia afuera mientras la nueva se desliza hacia arriba y hacia adentro. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: words, intervalSeconds, accent ### Word tumble button https://fieldbook.lizardi.mx/es/components/word-tumble-button Al pasar el cursor, la etiqueta en mayúsculas se desplaza sobre sí misma dentro de una ranura recortada mientras un relleno de acento diagonal recorre el panel detrás de ella y una combinación de diferencias invierte el color de la palabra. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, rollDuration, travel, fillDuration ### Woven silk drape https://fieldbook.lizardi.mx/es/components/woven-silk-drape Una sábana satinada con suaves pliegues diagonales que se deslizan lentamente sobre ella, rematada con una veta fina para que nunca parezca plástico. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, speed, scale, grain, rotation ### Zoned cursor tag https://fieldbook.lizardi.mx/es/components/zoned-cursor-tag Un puntero personalizado cuya etiqueta final se reescribe y gira hacia el otro lado a medida que cruza las zonas de un panel dividido. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: zoneOne, zoneTwo, zoneThree, accent, trailDistance, stiffness ## DE - https://fieldbook.lizardi.mx/de - https://fieldbook.lizardi.mx/de/components - https://fieldbook.lizardi.mx/de/blog ### Account Dropdown Menu https://fieldbook.lizardi.mx/de/components/account-dropdown-menu Ein Avatar-Auslöser, der ein gruppiertes Kontomenü mit Hinweisen zu Tastenkombinationen, einem Themen-Untermenü und einer destruktiven Abmeldezeile öffnet, die sich vom Rest abhebt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, showShortcuts, theme ### Account Menu Flyout https://fieldbook.lizardi.mx/de/components/account-menu-flyout Eine Profilübersichtsschaltfläche, die ein Kontomenü mit beschrifteten Zeilen öffnet, mit einer kleinen gebogenen Indikatorlinie, die gerade wird, wenn das Menü geöffnet ist. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: name, plan, align, accent ### Account signup https://fieldbook.lizardi.mx/de/components/account-signup-page Eine zentrierte Anmeldeseite mit einem E-Mail-Feld, einer primären Schaltfläche zum Erstellen eines Kontos, einer Trennlinie und zwei sekundären Weiterschaltflächen für alternative Identitätsanbieter. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: brandName, accentColor, showProviders, providerCount ### Activity cell heatmap https://fieldbook.lizardi.mx/de/components/activity-cell-heatmap Ein Kalenderraster aus kleinen getönten Quadraten, das in einer diagonalen Welle verläuft und es einem ebenen Streifen ermöglicht, jeweils eine Intensität zu isolieren. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, weeks, gap, cornerRadius, weekStart, interactive ### Add Then Confirm Chip https://fieldbook.lizardi.mx/de/components/add-then-confirm-chip Ein dunkler Chip mit einem warmen Etikett, dessen Plus beim Schweben hin und her wackelt, sich dann in ein Häkchen verwandelt und meldet, dass das Element hinzugefügt wurde. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, addedLabel, accent, rockDegrees, added ### Addon Input Group https://fieldbook.lizardi.mx/de/components/addon-input-group Ein Textfeld, das von einer umrandeten Hülle umgeben ist, die ein führendes Symbol, eine nachgestellte Schaltfläche oder Text enthalten kann und einen gemeinsamen Fokusring für die gesamte Gruppe aufweist. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, trailingLabel, accentColor, showLeadingIcon ### Adjacent hover menubar https://fieldbook.lizardi.mx/de/components/adjacent-hover-menubar Eine Menüleiste im Desktop-Stil, in der durch Klicken auf ein Menü dieses geöffnet wird. Sobald Sie den Mauszeiger über ein benachbartes Menü bewegen, wird dieses ohne zusätzlichen Klick direkt dorthin weitergeleitet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: menuLabels, accent ### Amber upload pill https://fieldbook.lizardi.mx/de/components/amber-upload-pill Ein warmer Farbverlaufs-Upload-Pill mit einem hellen Rand, der den Farbstich verbreitert und das Etikett beim Schweben von hinten beleuchtet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, castSpread, showGlyph, size ### Anaglyph wobble button https://fieldbook.lizardi.mx/de/components/anaglyph-wobble-button Ein Knopf, der in einer langsamen 3D-Schwingung hängt und beim Schweben oder Fokussieren warme und kühle Duplikate seiner selbst mit einem überschießenden Wackeln aus dem Register wirft. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, coolColor, swingAngle, offsetDistance, autoSwing ### Analytics console page https://fieldbook.lizardi.mx/de/components/analytics-console-page Eine vollständige Analysekonsole: einklappbare Navigationsleiste, vier Messkarten, ein gestapeltes Flächendiagramm mit Bereichsschalter und eine sortierbare, per Drag & Drop neu anordenbare Arbeitsaufgabentabelle. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, railOpen, range, rows, showTable ### Anchored detail popover https://fieldbook.lizardi.mx/de/components/anchored-detail-popover Eine Auslöserschaltfläche, die ein kleines verankertes Bedienfeld mit einem betitelten Einstellungsformular öffnet, aus der Auslöserkante herauswächst und sich bei Escape oder einem Klick von außen schließt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, align, offset, width, accent ### Anchored info popover https://fieldbook.lizardi.mx/de/components/anchored-info-popover Eine Auslöseschaltfläche, die ein kleines schwebendes Infofeld öffnet, das an einem seiner Ränder verankert ist, von diesem Rand aus ausgeblendet und vergrößert wird und bei einem Klick oder Escape von außen wieder ausgeblendet wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: anchorSide, accentColor, showBackdrop, gap ### Anchored popover card https://fieldbook.lizardi.mx/de/components/anchored-popover-card Eine Auslösetaste, die eine kleine Einstellungskarte öffnet, die an sich selbst verankert ist, sich vom Rand aus verkleinert und bei einem zweiten Klick, Escape oder einem Druck von außen schließt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: anchor, gap, accent, triggerLabel ### Anchored settings popover https://fieldbook.lizardi.mx/de/components/anchored-settings-popover Eine Schaltfläche, die ein kleines Einstellungsfeld öffnet, das daneben verankert ist und sich von der Ecke aus erstreckt, die dem Auslöser am nächsten liegt, und die Seiten umdreht, wenn der Platz knapp wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, align, offset, accentColor, modal ### Anchored site preview https://fieldbook.lizardi.mx/de/components/anchored-site-preview Eine Hover-Vorschau, deren Seite, Ausrichtung und Versatz eingestellt werden können, mit einem zeigenden Pfeil, der den Anker verfolgt und sich mit ihm dreht, wenn kein Platz mehr ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, align, offset, showArrow, accent ### Android device frame https://fieldbook.lizardi.mx/de/components/android-device-frame Eine vektorisierte Android-Telefonblende, die ein Foto oder ein Loop-Video mit korrekt abgerundeten Ecken in den Bildschirm einrahmt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: bezelTone, screenContent, accentColor ### Animated metric counter https://fieldbook.lizardi.mx/de/components/animated-metric-counter Eine große, bloße Zahl, die in dem Moment, in dem sie ins Bild gescrollt wird, von einem Startwert zu ihrem Ziel hochspringt und leicht über das Ziel hinausschießt, bevor sie sich stabilisiert, mit Tausendertrennzeichen und einem optionalen Suffix. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: target, startValue, decimals, suffix, accent ### Animated Time Axis https://fieldbook.lizardi.mx/de/components/animated-time-axis Eine Reihe von Datumsbeschriftungen unter einem Liniendiagramm, das automatisch eine gleichmäßig verteilte Teilmenge auswählt, um Überfüllung zu vermeiden, und Beschriftungen in der Nähe des schwebenden Punkts ausblendet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: numTicks, fadeNearCursor, accent ### Animated Value Axis https://fieldbook.lizardi.mx/de/components/animated-value-axis Eine Spalte mit Wertebeschriftungen neben einem Diagramm, die große Zahlen abkürzt und sanft zu neuen Positionen gleitet, wenn sich der Datenbereich des Diagramms ändert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: numTicks, formatLargeNumbers, highlightColor ### Annotated anatomy button https://fieldbook.lizardi.mx/de/components/annotated-anatomy-button Eine Schaltfläche, die sich von selbst erklärt: Wenn Sie den Mauszeiger darüber bewegen, werden Messmarkierungen und Führungslinien angezeigt, die den Abstand, die Füllung, den Eckenradius und den Symbolplatz benennen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, fill, paddingX, radius, pinned ### Answer call circle https://fieldbook.lizardi.mx/de/components/answer-call-circle-button Eine runde, nur symbolische Annahmetaste mit einem Hörersymbol, einem langsamen Klingelton, während ein Anruf wartet, und einem sanften Druckabfall. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, ringing, ringSpeed ### App folder expand https://fieldbook.lizardi.mx/de/components/app-folder-expand Eine Ordnerkachel im Startbildschirm-Stil, deren kleine App-Symbole zu einem vollständigen Bedienfeld wachsen, wobei jedes Symbol von seiner Miniaturansicht zu seiner großen Position wandert. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: title, appCount, accent, bounce, closeOnBackdrop ### App Menubar https://fieldbook.lizardi.mx/de/components/app-menubar Eine horizontale Menüleiste im Desktop-Stil, in der durch Klicken auf eine Beschriftung der obersten Ebene deren Dropdown-Liste geöffnet wird. Sobald eine geöffnet ist, wechselt der Mauszeiger über die anderen Beschriftungen direkt zu deren Menüs, ohne dass ein zusätzlicher Klick erforderlich ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, menuCount, showShortcuts ### Appointment Range Card https://fieldbook.lizardi.mx/de/components/appointment-range-card Eine Karte, die ein Datumsraster für einen Monat mit einem Feld für Startzeit und Endzeit darunter kombiniert, um einen Tag und ein Zeitfenster in einem kompakten Block auszuwählen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, startTime, endTime, showIcons ### Appointment Scheduler Card https://fieldbook.lizardi.mx/de/components/appointment-scheduler-card Eine einzelne Datumsauswahl, eingerahmt in einer betitelten Karte mit einer Schaltfläche „Zu heute springen“ in der Ecke, gestaltet für die Buchung eines Termins. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, title, subtitle, startMonth ### Arcade dome button https://fieldbook.lizardi.mx/de/components/arcade-dome-button Ein runder Druckknopf, dessen gewölbte Kappe über einem dunkleren Sockel schwebt und beim Drücken bündig mit einem sichtbaren Tropfen sitzt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, size, travel, haloWidth ### Arcade plate button https://fieldbook.lizardi.mx/de/components/arcade-plate-button Eine breite Spielmenütaste mit einer grau umrandeten Platte, einer eingelassenen dunklen Abschrägung und einem eingeprägten Schriftzug, der beim Schweben heller wird und beim Gedrückthalten dunkler wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, plate, ink, bevel, width ### Area chart lite https://fieldbook.lizardi.mx/de/components/area-chart-lite Ein reaktionsfähiges SVG-Flächendiagramm mit runden Achsenstrichen, einer Verlaufsfüllung, einem Fadenkreuz, das das Muster unter dem Zeiger liest, und einem Wischtuch zum Zeichnen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: color, curve, grid ### ARIA Tablist Resize https://fieldbook.lizardi.mx/de/components/aria-tablist-resize Eine vollständig zugängliche Roving-Tabindex-Tab-Liste mit einer gleitenden Pillen-Hervorhebung, bei der sich die Größe des Bedienfeldrahmens nahtlos an den angezeigten Tab-Inhalt anpasst. Frameworks: react, svelte, astro, html Access: member Public prop names: resizeMode, tabOneLabel, tabTwoLabel, accent ### Arrow chip button https://fieldbook.lizardi.mx/de/components/arrow-chip-button Eine abgerundete Aktionstaste mit einem leuchtenden Pfeilchip am rechten Ende, der beim Schweben mit einem harten, versetzten Schatten von der Seite abhebt und beim Drücken sinkt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, radius, chipGlow, offset ### Arrow relay badge pill https://fieldbook.lizardi.mx/de/components/arrow-relay-badge-pill Ein Pillenknopf mit einem runden linken Abzeichen, dessen Pfeil beim Schweben durch die obere Ecke austritt, während ein neuer von unten eintrifft und der Körper fast schwarz wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, hoverBody, relayMs, badgeSize ### Arrow to label pill https://fieldbook.lizardi.mx/de/components/arrow-to-label-pill Ein runder Chevron-Knopf, der sich beim Schweben in eine breite beschriftete Pille ausdehnt und die Markierung gegen ein Wort eintauscht, während die flache Füllung zu einer Rampe mit zwei Stopps wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, partner, label, expandedWidth, duration ### Arrow wipe button https://fieldbook.lizardi.mx/de/components/arrow-wipe-button Ein Pillenknopf, dessen Akzentplatte, die in eine Pfeilspitze geschnitten ist, beim Schweben von links nach innen streicht und die Beschriftung Buchstabe für Buchstabe umdreht, wenn sich die Spitze kreuzt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, point, duration, radius ### Arrow wipe call to action https://fieldbook.lizardi.mx/de/components/arrow-wipe-cta Ein Aufruf zum Handeln, dessen dunklere Platte beim Schweben von links nach innen wischt, während ein versteckter Pfeil herausgleitet, um auf die Beschriftung zu treffen, und beim Klicken ein Pixel nach unten drückt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, wipeMs, showArrow, radius ### Ascii Art Heading https://fieldbook.lizardi.mx/de/components/ascii-art-heading Ein großes Wort wird als Mosaik aus monospaced-Zeichen dargestellt, deren Dichte die Buchstabenformen nachahmt und sich sanft kräuselt und zum Zeiger hin neigt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, characterSize, waveIntensity ### Assistant Ripple Glow https://fieldbook.lizardi.mx/de/components/assistant-ripple-glow Eine ringförmige Welle breitet sich nach außen über ein Duplikat des eigenen Inhalts eines Panels aus, während der Rand so lange aufleuchtet, wie eine Aufgabe ausgeführt wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: running, accentColor, secondColor, rippleDuration, edgeSpeed, strength ### Aurora band glow https://fieldbook.lizardi.mx/de/components/aurora-band-glow Ein weiches Lichtband, das über einen dunklen Rahmen liegt, dessen Rand auf geschichtetem Rauschen wandert, während die Farbe über seine Länge wandert. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: colorA, colorB, speed, bandHeight, brightness, interactive ### Aurora curtain https://fieldbook.lizardi.mx/de/components/aurora-curtain Am oberen Rand hängt ein weicher Lichtvorhang, dessen unterer Saum sich auf einer langsamen Rauschwelle hebt und senkt, während sich seine Farbe über die Breite ändert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: colorStart, colorEnd, amplitude, softness, speed ### Aurora glow heading https://fieldbook.lizardi.mx/de/components/aurora-glow-heading Eine Überschrift, in der ein Wort eine langsam wandernde, mehrfarbige Farbverlaufsfüllung trägt, die auf die Buchstabenformen zugeschnitten ist, wie ein Polarlicht, das hinter der Schrift leuchtet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, highlightWord, speed, colorA ### Aurora veil https://fieldbook.lizardi.mx/de/components/aurora-veil Ein randloser Hintergrund aus drei wandernden Lichtbändern, die sich dort kreuzen, wo sie sich kreuzen, auf einem dunklen Grund, mit einer Beschriftungsebene, die lesbar bleibt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: colorA, colorB, speed, intensity ### Auto Grow Textarea https://fieldbook.lizardi.mx/de/components/auto-grow-textarea Ein mehrzeiliges Textfeld, das größer wird, wenn die Person mehr tippt, anstatt in einem festen Feld zu scrollen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, accent, rows ### Auto height tabs https://fieldbook.lizardi.mx/de/components/auto-height-tabs Eine Registerkartengruppe, deren Inhaltscontainer beim Wechseln der Registerkarten die Höhe stufenlos an die Größe jedes Panels anpasst, anstatt zu springen oder leeren Raum zu hinterlassen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, defaultTab, animationSpeed ### Auto-Hide Nav Bar https://fieldbook.lizardi.mx/de/components/auto-hide-nav-bar Eine klebrige obere Leiste, die nach oben aus dem Blickfeld gleitet, wenn der Besucher nach unten scrollt, und wieder hineingleitet, sobald er nach oben scrollt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: hideThreshold, accentColor, transitionMs, blurBackground ### Auto-Scroll Message List https://fieldbook.lizardi.mx/de/components/auto-scroll-message-list Ein scrollbares Chat-Panel, das an die neueste Nachricht angeheftet bleibt, es sei denn, der Leser scrollt nach oben, woraufhin eine schwebende Schaltfläche „Zur neuesten Nachricht springen“ erscheint. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: height, accent ### Autosize text field https://fieldbook.lizardi.mx/de/components/autosize-text-field Eine mehrzeilige Texteingabe, die größer wird, wenn die Person tippt, bis zu einer großzügigen Grenze, mit einem Akzentfokusring und einem deaktivierten Status. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: placeholder, rows, disabled, accentColor ### Avatar Lineup Hover https://fieldbook.lizardi.mx/de/components/avatar-lineup-hover Eine Reihe überlappender Avatar-Kreise, in denen man ihn über seine Nachbarn hebt, wenn man mit der Maus darüber fährt, und einen Namens-Tooltip anzeigt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, overlap, accent, liftDistance, showTooltip ### Avatar profile picker https://fieldbook.lizardi.mx/de/components/avatar-profile-picker Eine Profil-Setup-Karte: eine Avatar-Bühne, deren Leuchtring sich je nach Auswahl ändert, ein Miniaturbildstreifen zum Wechseln des Avatars und ein validiertes Benutzernamenfeld. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, username, minLength, avatarCount ### Avatar Stack https://fieldbook.lizardi.mx/de/components/avatar-stack-tooltip Eine Reihe überlappender kreisförmiger Avatare, die den Avatar unter dem Zeiger trennt und anhebt und darüber einen Namens-Tooltip anzeigt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: avatarSize, overlapAmount, ringColor, invertStackOrder ### Backlight Halo https://fieldbook.lizardi.mx/de/components/backlight-halo Umhüllt das Kunstwerk mit einer unscharfen, farbverstärkten Kopie seiner selbst, sodass das Panel sein eigenes Licht auf die Oberfläche dahinter zu streuen scheint. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: blur, saturation, haloOpacity, accentColor, drift ### Banded stripe button https://fieldbook.lizardi.mx/de/components/banded-stripe-button Ein breiter Knopf, dessen Vorderseite in harte diagonale Bänder geschnitten ist, die durch Werte mit einem Akzent schreiten und beim Schweben ein Band darüber gleiten lassen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, bands, angle, slideOnHover ### Banner header dialog https://fieldbook.lizardi.mx/de/components/banner-header-dialog Ein modales Fenster mit einem farbigen Bannerstreifen am oberen Rand, das sich über einer abgeblendeten und völlig inaktiven Kopie der Seite dahinter befindet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: bannerColor, panelWidth, closeOnOverlayClick ### Bar wave matrix https://fieldbook.lizardi.mx/de/components/bar-wave-matrix Ein Gitter aus kurzen Stäben, bei dem jeder Stab auf seiner eigenen Bahn gleitet und der Phasenversatz von Reihe zu Reihe das gesamte Gitter in eine Wanderwelle verwandelt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: colorA, colorB, columns, rows, speed, orientation ### Bare Sliding Tab Strip https://fieldbook.lizardi.mx/de/components/bare-sliding-tab-strip Eine standardmäßig nicht gestylte Laschenleiste, deren Panels nebeneinander auf einem Filmstreifen sitzen, der auf Knopfdruck seitlich verschiebbar ist und sich gleichzeitig an die Höhe des Rahmens anpasst. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: tabOneLabel, tabTwoLabel, accent, slideStiffness ### Before/After Code Diff https://fieldbook.lizardi.mx/de/components/before-after-code-diff Zwei Codefelder nebeneinander, mit Vorher- und Nachherbeschriftung, mit eingefärbten hinzugefügten und entfernten Linien und einem Hover-Fokus-Effekt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, fontSize, showLineDiff, focusBlurOnHover ### Before/After reveal handle https://fieldbook.lizardi.mx/de/components/before-after-reveal-handle Eine verschiebbare Trennlinie über zwei gestapelten Szenen, die eine auf der linken Seite und die andere auf der rechten Seite sichtbar macht und mit dem Zeiger, der Maus zum Springen und den Pfeiltasten verschoben werden kann. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: position, handleColor, leftLabel, rightLabel ### Bevel Edge Panel Card https://fieldbook.lizardi.mx/de/components/bevel-edge-panel-card Eine Karte mit einer inneren Abschrägung von einem Pixel, die den Eindruck erweckt, sie sei in die Seite gedrückt, und einem Rahmenmodus, der gestapelte Unterfelder gruppiert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: grouped, radius, showFooter, accent ### Bevel frame button https://fieldbook.lizardi.mx/de/components/bevel-frame-button Ein Knopf mit quadratischem Rahmen, dessen beide Enden beim Schweben zu Punkten abgeschrägt sind und das Rechteck in ein sechsseitiges Abzeichen verwandeln. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, tilt, thickness, duration ### Bevel press pill https://fieldbook.lizardi.mx/de/components/bevel-press-pill Eine dunkle, abgeschrägte Pille mit einem eingelassenen runden Chip am Ende, der beim Drücken in die Oberfläche einsinkt. Frameworks: react Access: open Public prop names: label, accent, travel, showChip, size ### Bevel swap button https://fieldbook.lizardi.mx/de/components/bevel-swap-button Eine blasse Platte, deren beleuchtete und schattierte Randseiten beim Schweben die Ecken vertauschen, während dahinter ein Fächer aus verblassenden Offsetkopien hervorstanzt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, stackCount, offsetStep, duration ### Billing Ledger Table https://fieldbook.lizardi.mx/de/components/billing-ledger-table Eine Rechnungsbuchtabelle mit einer Überschrift darüber und einem Fußzeilenband, das die Betragsspalte summiert. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: rowCount, showFooterTotal, accentColor, caption ### Binary Decode Text https://fieldbook.lizardi.mx/de/components/binary-decode-text Jeder Buchstabe flackert kurz in eine leuchtende Binärziffer auf, bevor er wieder in seinen wahren Charakter entschlüsselt wird und von links nach rechts über das Wort wandert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, letterInterval, letterAnimationDuration, accentColor ### Birthdate popover picker https://fieldbook.lizardi.mx/de/components/birthdate-popover-picker Eine beschriftete Schaltfläche, die einen schwebenden Kalender mit Dropdown-Listen für Monat und Jahr öffnet, um schnell zu einem Geburtsjahr zu gelangen, und sich selbst schließt, sobald ein Tag ausgewählt wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, placeholder ### Empty State Panel https://fieldbook.lizardi.mx/de/components/blank-slate-card Ein zentrierter Platzhalter, der anstelle einer leeren Liste angezeigt wird, mit einem Titel, einer Beschreibung und einer oder zwei Startaktionen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: title, description, accentColor, showSecondaryAction ### Blinking grid pattern https://fieldbook.lizardi.mx/de/components/blinking-grid-pattern Ein haarfeine quadratische Gitterstruktur, in der verstreute Zellen nach oben und unten verblassen und jeweils zu einer neuen Zelle springen, wenn ihr Blinzeln endet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: cellSize, litCells, accent, maxOpacity, duration, dashed ### Blob cap button https://fieldbook.lizardi.mx/de/components/blob-cap-button Eine Kapselschaltfläche mit einem einfarbigen Flüssigkeitsklecks, der aus einer ruhenden Eckmarkierung anschwillt, um beim Schweben die Form zu füllen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, spread, blur, growth ### Blocking alert dialog https://fieldbook.lizardi.mx/de/components/blocking-alert-dialog Ein zentraler Dialog, der eine explizite Auswahl erfordert, bevor er geschlossen wird, und der für irreversible Aktionen verwendet wird, die der Besucher nicht versehentlich ablehnen darf. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: question, detail, confirmLabel, accentColor ### Blur fade reveal https://fieldbook.lizardi.mx/de/components/blur-fade-reveal Inhalte, die unscharf und transparent ankommen, werden dann beim ersten Scrollen in die Ansicht geschärft, ohne dass sich ein einziges Pixel verschiebt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: blurAmount, duration, delay, threshold, startOpacity ### Blur in word reveal https://fieldbook.lizardi.mx/de/components/blur-in-word-reveal Wörter in einem Satz lösen sich nacheinander von einer sanften Unschärfe in einen scharfen Fokus auf, während der Satz ins Blickfeld gescrollt wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, direction, staggerMs, blurPx ### Blur reveal https://fieldbook.lizardi.mx/de/components/blur-reveal-on-view Ein Wrapper, der sein untergeordnetes Element unscharf und leicht versetzt hält, bis es zum ersten Mal in das Ansichtsfenster eintritt, dann die Unschärfe auflöst und die Lücke in einer Bewegung schließt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: blur, offset, direction, stagger, accent ### Bobble tile grid https://fieldbook.lizardi.mx/de/components/bobble-tile-grid Ein Gitter aus farbigen Kacheln, die auf einer Feder vom Zeiger wegbewegen und umso stärker abprallen, je schneller der Zeiger darüber gleitet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gridSize, accent, bounce, velocityScale, showIndex ### Booked Dates Picker https://fieldbook.lizardi.mx/de/components/booked-dates-picker Eine einzelne Datumsauswahl, bei der eine Reihe bereits reservierter Tage durchgestrichen angezeigt wird und nicht ausgewählt werden kann, sodass die offenen Tage wie gewohnt ausgewählt werden können. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, bookedStart, bookedCount, startMonth ### Bookmark save chip https://fieldbook.lizardi.mx/de/components/bookmark-save-chip Ein kompakter Speicherchip, dessen Lesezeichenmarkierung von der Umrisslinie zur gefüllten Position springt und einen kleinen Zug nach unten ausführt, sobald ein Element gespeichert wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, savedLabel, accent, saved, showLabel ### Bookmark save toggle https://fieldbook.lizardi.mx/de/components/bookmark-save-toggle Ein kompakter Speicherchip, dessen Lesezeichen-Glyphe sich vollständig ausfüllt und nach dem Speichern des Elements einen Haarlinienrand beibehält. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, savedLabel, accent, initialSaved, compact ### Border brighten button https://fieldbook.lizardi.mx/de/components/border-brighten-button Eine dunkle Schaltfläche, deren Zwei-Pixel-Rahmen der einzige bewegliche Teil ist: Beim Schweben wird sie weiß und verkleinert sich zu einem engen inneren Ring, während die Schaltfläche gedrückt gehalten wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, borderWidth, radius, duration ### Border trace button https://fieldbook.lizardi.mx/de/components/border-trace-button Ein ruhiger, durchscheinender Knopf, dessen vier Kanten sich beim Schweben nacheinander zeichnen, während ein weiches Lichtband die Vorderseite kreuzt. Frameworks: react Access: member Public prop names: label, accent, traceMs, tracking, sweep ### Bottom sheet panel https://fieldbook.lizardi.mx/de/components/bottom-sheet-panel Ein Blatt im mobilen Stil, das mit einem Greifgriff an der Unterkante angehoben wird und zum Verwerfen wieder nach unten gezogen werden kann. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: title, accent, dragToDismiss ### Bounce drop toggle https://fieldbook.lizardi.mx/de/components/bounce-drop-toggle Ein hoher vertikaler Kippschalter, dessen Kugel beim Ausschalten federnd zu Boden fällt und beim Einschalten mit einer festen Feder wieder nach oben gleitet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: on, accentColor, trackHeight ### Bounce warning dialog https://fieldbook.lizardi.mx/de/components/bounce-warning-dialog Ein Bestätigungsdialog erscheint mit einem federnden Überschwingen und einem springenden Symbolabzeichen und fordert eine Antwort auf, bevor die Seite unten wieder nutzbar ist. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, springBounce, icon ### Bouncing dot action button https://fieldbook.lizardi.mx/de/components/bouncing-dot-action-button Eine Taste mit dunklem Akzent und einem kleinen Punkt am rechten Rand, der hüpft, während der Block heller wird und beim Hovern oder Tastaturfokus ein sanftes Leuchten erzeugt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, dotSize, hopHeight, hopSeconds, castSpread ### Bouncing download button https://fieldbook.lizardi.mx/de/components/bouncing-download-button Ein kompakter, dunkler Download-Chip, der von selbst sanft springt, um die Aufmerksamkeit auf sich zu ziehen, stillsteht, sobald ein Zeiger oder der Tastaturfokus ihn erreicht, und beim Drücken seinen Pfeil mit einer Neigung vertauscht. Frameworks: react Access: member Public prop names: accent, bounceHeight, period, showLabel ### Bouncing Photo Fan https://fieldbook.lizardi.mx/de/components/bouncing-photo-fan Eine Reihe überlappender quadratischer Fotokacheln, die mit einer elastischen Überschwingung auftauchen und sich dann gegenseitig zur Seite schieben, wenn man darüber schwebt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, spread, stagger, pushOnHover, accent ### Bouncing sphere pit https://fieldbook.lizardi.mx/de/components/bouncing-sphere-pit Eine kastenförmige Grube aus schweren Kugeln, die fallen, aneinander stoßen und sich stapeln und zerstreuen, wann immer der Cursor durch sie watet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, ballCount, gravity, bounce, maxSize, followCursor ### Bounded Stay Range Picker https://fieldbook.lizardi.mx/de/components/bounded-stay-range-picker Eine Zwei-Monats-Bereichsauswahl, die sowohl eine Mindest- als auch eine Höchstanzahl an Nächten erzwingt, sodass nur Enddaten innerhalb dieses Fensters auswählbar bleiben, sobald ein Anfang festgelegt ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, minNights, maxNights, startMonth ### Bracket lock cursor https://fieldbook.lizardi.mx/de/components/bracket-lock-cursor Ein benutzerdefinierter Zeiger aus vier Eckklammern, der sich im Leerlauf dreht und um jedes als Ziel markierte Element herum einrastet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: spinDuration, accent, lockColor, cornerSize, hideNativeCursor ### Branching bolt https://fieldbook.lizardi.mx/de/components/branching-bolt Ein gezackter Bolzen läuft am Rahmen entlang, wobei kurze Gabeln an den Seiten absterben, beim Aufprall weiß aufflackert und dann zu einem Nachbild verblasst. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: boltColor, strikeInterval, intensity, thickness, branching, clickToStrike ### Branded Code Panel https://fieldbook.lizardi.mx/de/components/branded-code-panel Ein zentriertes Verifizierungsfeld unter einem kleinen Markenschloss, bei dem ein abgelehnter Code die Zeile einmal schüttelt, sie löscht und die Hände wieder auf das erste Kästchen konzentriert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, length, brandName, shakeOnError, title ### Breathing CTA pill https://fieldbook.lizardi.mx/de/components/breathing-cta-pill Ein Aufruf zum Handeln mit rundem Ende, der beim Schweben anschwillt und sich in einen langsamen, atmenden Puls von Größe und Helligkeit verwandelt, bis der Zeiger weggeht oder die Taste gedrückt wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, hoverScale, pulseSeconds, pulse ### Breathing dot loader https://fieldbook.lizardi.mx/de/components/breathing-dot-loader Punkte, die an Ort und Stelle bleiben und atmen, anstatt sich abwechselnd zu bewegen, anzuschwellen und zu verblassen, sodass die Reihe wie ein langsamer Herzschlag aussieht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: dotCount, dotSize, peakScale, cycleSeconds, accent ### Breathing transport toggle https://fieldbook.lizardi.mx/de/components/breathing-transport-toggle Ein getönter Wiedergabechip, der beim Klicken zwischen Wiedergabe und Pause wechselt und dessen Glyphe atmet, während der Zeiger darauf ruht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, playing, breathSpeed, tint ### Brightening gradient button https://fieldbook.lizardi.mx/de/components/brightening-gradient-button Ein tiefer zweifarbiger Chip, dessen vertikale Waschung beim Schweben zu einem viel helleren Paar derselben Familie aufsteigt, mit einem festen Glas-Highlight an der Oberkante. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, baseColor, hoverColor, radius, shiftMs ### Browser window frame https://fieldbook.lizardi.mx/de/components/browser-window-frame Ein Desktop-Browserfenster-Mockup mit Ampelpunkten und einer Adressleiste, die einen Screenshot oder ein Endlosvideo als Seiteninhalt einrahmt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: url, screenContent, simpleMode ### Brushed metal knob https://fieldbook.lizardi.mx/de/components/brushed-metal-knob-button Ein rundes, bearbeitetes Zifferblatt mit gebürstetem, radialem Finish und einem eingravierten Etikett, das sich im Schwebezustand langsam eine Viertelumdrehung dreht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, size, turn, spinSeconds, accent, grooves ### Brushed Metal Pass https://fieldbook.lizardi.mx/de/components/brushed-metal-pass Eine Zugangskarte, deren Oberfläche aus gebürstetem Metall ein Spiegelband trägt, das mit dem Zeiger schwingt, über einer gewellten, rauschenden Oberfläche und einer feinen Körnung. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: sheen, grain, ripple, accent, holder ### Bubble burst menu https://fieldbook.lizardi.mx/de/components/bubble-burst-menu Eine schwebende Logo-Pille und ein Umschalter, die sich zu einer bildschirmfüllenden Überlagerung übergroßer Pillen-Links erweitern, die jeweils mit einer federnden Staffelung an ihren Platz platzen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: staggerDelay, linkCount, menuBackground ### Bulging dot field https://fieldbook.lizardi.mx/de/components/bulging-dot-field Ein feines Punktraster, das sich unter dem Cursor nach außen ausdehnt, wie von hinten geschobener Stoff, und in dem Moment, in dem der Zeiger weiterbewegt wird, mit einem sanften Überschwingen zurückfedert. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, dotSpacing, dotRadius, cursorRadius, bulgeStrength, halo ### Bulk action toolbar https://fieldbook.lizardi.mx/de/components/bulk-action-toolbar Eine schwebende Symbolleiste, mit der Sie nacheinander durch eine Warteschlange von Datensätzen blättern können, mit Symbolaktionen, deren Bezeichnung beim Bewegen der Maus angezeigt wird, und einer primären Schaltfläche, die das Ziel bestätigt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: current, total, destination, accent ### Burst particle emitter https://fieldbook.lizardi.mx/de/components/burst-particle-emitter Umhüllt jedes Element und feuert einen gestaffelten Fächer kleiner Flecken von einer ausgewählten Kante ab, beim Klicken, in einer Schleife oder beim ersten Scrollen in die Ansicht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, radius, spread, duration, accent, side ### Button set https://fieldbook.lizardi.mx/de/components/button-set Eine vollständige Schaltflächenfamilie, die sechs Absichten, sechs Größen, reine Symbolformen und einen Ladestatus abdeckt, der in einem Spinner wechselt, ohne dass sich die Breite der Schaltfläche ändert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: variant, size, accent, loading, disabled, label ### Camera flash pill https://fieldbook.lizardi.mx/de/components/camera-flash-pill-button Eine solide Akzentpille mit einem Kamerasymbol, das beim Schweben oder Fokussieren wie eine kämpfende Blitzröhre flackert und beim Drücken für einen kurzen Schlag sein gesamtes Gesicht weiß erhellt. Frameworks: react Access: open Public prop names: label, accent, flickerOnHover, flickerPeriod, showCounter ### Candle Price Chart https://fieldbook.lizardi.mx/de/components/candle-price-chart Ein OHLC-Kerzendiagramm mit farbigen Auf- und Abwärtskerzen, einem Docht pro Periode und einem Hover-Tooltip, der den Eröffnungs-, Höchst-, Tiefst- und Schlusskurs anzeigt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: upColor, downColor, periodCount, showGrid ### Caption Style Date Picker https://fieldbook.lizardi.mx/de/components/caption-style-date-picker Eine einzelne Datumsauswahl gepaart mit einem Auswahlmenü, dessen Kopfzeile zwischen einem kombinierten Dropdown-Menü für Monat und Jahr, einem Dropdown-Menü nur für einen Monat oder einem Dropdown-Menü nur für ein Jahr wechselt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: captionStyle, accent, startMonth, startYear ### Captioned Like Button https://fieldbook.lizardi.mx/de/components/captioned-like-button Eine nur aus Symbolen bestehende Herzschaltfläche, die beim Schweben oder Fokussieren eine Beschriftung anzeigt, die von unten aufsteigt und sich bei Bedarf schnell ausfüllt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, caption, likedCaption, size, showCount, startLiked ### Card blur tabs https://fieldbook.lizardi.mx/de/components/card-blur-tabs Tabs, eingerahmt von einer umrandeten Karte, deren Inhalt kurzzeitig verschwimmt und überblendet, wenn Sie zwischen den Panels wechseln, mit einer verschiebbaren Pille hinter der aktiven Tab-Beschriftung. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tabOneLabel, tabTwoLabel, accent ### Card Shuffle Stack https://fieldbook.lizardi.mx/de/components/card-shuffle-stack Ein aufgefächerter Stapel von Paneelen, der mit einem Timer abläuft: Das vordere Paneel fällt weg, der Rest tritt nach vorne und das heruntergefallene schwenkt hinten ein. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: stepX, stepY, delayMs, skew, motionStyle, accent ### Card Style Invoice Table https://fieldbook.lizardi.mx/de/components/card-style-invoice-table Eine Rechnungstabelle, die als eine erhöhte Karte gerendert wird, wobei die erste und letzte Zeile abgerundet sind, um der Kartenform zu entsprechen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, rowCount, showHeader, currency ### Card to fullscreen modal https://fieldbook.lizardi.mx/de/components/card-to-fullscreen-modal Eine Listenkarte, die sich unter Verwendung ihres eigenen Bilds und Titels kontinuierlich in ein nahezu bildschirmfüllendes Detailfenster verwandelt und sich beim Schließen wieder zurück verwandelt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: title, accent, morphDuration ### Caret tail link https://fieldbook.lizardi.mx/de/components/caret-tail-link Ein ruhiger Textlink mit einer kleinen spitzen Klammer direkt hinter dem letzten Buchstaben, die nach außen gleitet und beim Schweben unterstrichen wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, direction, travel, underline ### Cartridge fire button https://fieldbook.lizardi.mx/de/components/cartridge-fire-button Ein neuartiger Knopf in Form einer Patronenhülse aus Messing, hinter dessen Nase ein Projektil steckt, das herausschießt und sich nachlädt, wenn es gedrückt wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, shotDistance, reloadMs, recoil ### Carved Pill Button https://fieldbook.lizardi.mx/de/components/carved-pill-button Eine Pille, die durch gegensätzliche innere Schatten in eine weiche, matte Oberfläche geschnitzt wird und in dem Moment, in dem man darüber schwebt oder fokussiert wird, zu einem erhabenen Polster aufsteigt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, surface, accent, depth, radius, raiseOnHover ### Cascading Letter Reveal https://fieldbook.lizardi.mx/de/components/cascading-letter-reveal Eine Überschrift, die sich Buchstabe für Buchstabe offenbart, mit einem sanften Auf- und Abschwellen, wenn sie sichtbar wird, und dann unverändert bleibt, wenn sie fertig ist. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: headline, staggerMs, durationS, splitBy, textColor ### Category dot line https://fieldbook.lizardi.mx/de/components/category-dot-line Eine einzelne glatte Kurve über fünf benannte Kategorien, wobei jede Punktmarkierung anhand einer farblich gedrehten Akzentrampe gefärbt wird, sodass die Markierungen gleichzeitig als Legende dienen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, hueRange, dotRadius, strokeWidth, showGrid ### Celebration burst https://fieldbook.lizardi.mx/de/components/celebration-burst Eine Leinwandexplosion aus Papierflocken, die von einem Knopf abgefeuert wird, sich in einem Bogen ausbreitet, die Kante flattert, während sie fallen und unter der Schwerkraft aus dem Rahmen fallen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: count, spread, power, gravity, accent, shape ### Center bloom button https://fieldbook.lizardi.mx/de/components/center-bloom-button Eine solide, abgerundete Pille, die von der Mitte nach außen heller wird, während ein blasser, kreisförmiger Schimmer über die eigenen Ränder hinauswächst und dann beim Drücken flach zusammensinkt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, bloom, duration, shadow ### Center out fill button https://fieldbook.lizardi.mx/de/components/center-out-fill-button Eine umrandete Schaltfläche in Großbuchstaben, deren Akzentfüllung sich beim Schweben oder Fokussieren von einem Haaransatz in der Mitte nach außen zu beiden Rändern öffnet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, borderWidth, duration ### Center out underline link https://fieldbook.lizardi.mx/de/components/center-out-underline-link Ein Navigationslink, dessen Unterstreichung beim Schweben von der Mitte nach außen zu beiden Enden wächst und beim Verlassen des Zeigers wieder zu einem Punkt zurückgezogen wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, thickness, offset, duration ### Centered modal frame https://fieldbook.lizardi.mx/de/components/centered-modal-frame Ein einfaches, zentriertes Modal, das vor einem abgedunkelten Hintergrund ausgeblendet und skaliert wird, mit Kopf-, Haupt- und Fußzeile, für alltägliche Formulare und Bestätigungen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: title, accent, showCloseButton, width ### Centered signup card https://fieldbook.lizardi.mx/de/components/centered-signup-card Eine zentrierte Seitenkarte, die einen vollständigen Namen, eine E-Mail-Adresse, ein Passwort und eine Bestätigung sammelt, jedes Feld mit einer kurzen Hilfszeile sowie einer Schaltfläche zur Registrierung eines verbundenen Kontos. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, accentColor, showSocialButton ### Chameleon pill navbar https://fieldbook.lizardi.mx/de/components/chameleon-pill-navbar Eine Reihe von Navigationslinks in einer dunklen Kapsel, wobei sich der aktive Link in seine eigene Pille aufteilt und der Rest sich wieder um ihn herum schließt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: activeIndex, accent, cornerRadius ### Channel tile row https://fieldbook.lizardi.mx/de/components/channel-tile-row Eine umlaufende Reihe quadratischer Symbolkacheln unter einer kleinen Beschriftung, wobei jede Kachel beim Schweben in ihre eigene reservierte Farbe überblendet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: caption, tileSize, gap, accent, perTileTint ### Character budget counter https://fieldbook.lizardi.mx/de/components/character-budget-counter Ein Schreibfeld mit einer Anzeige für die verbleibenden Zeichen, die auf eine Feder schlägt und sich in der Farbe erwärmt, wenn das Budget aufgebraucht ist. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: maxLength, warnAt, accent, placeholder, punch ### Character shuffle reveal https://fieldbook.lizardi.mx/de/components/character-shuffle-reveal Jeder Charakter rollt durch einen Streifen zufälliger Glyphen wie eine Slot-Walze, bevor er auf dem echten Buchstaben landet, der beim Scrollen mit Hover-Wiederholung angezeigt wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, direction, duration, accentColor ### Shimmer Wave Text https://fieldbook.lizardi.mx/de/components/character-wave-shimmer Eine Helligkeitswelle streicht einmal über eine Textzeile und beleuchtet nacheinander jedes Zeichen, bevor es wieder gedimmt wird, dann kurz anhält und sich wiederholt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: duration, label, paused, accentColor ### Charge Up Action Button https://fieldbook.lizardi.mx/de/components/charge-up-action-button Eine Kohlepille, die beim Schweben zu einem gesättigten Farbverlaufsschlüssel aufleuchtet und von der Oberfläche abhebt, während sich ihre Markierung dreht und heller wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, lift, halo, duration ### Chart Plot Texture https://fieldbook.lizardi.mx/de/components/chart-plot-texture Ein sich wiederholendes Texturfeld für den Plotbereich eines Diagramms, das zwischen diagonalen Linien, Punkten und einer Kreuzschraffur wechselt und an jeder Kante sanft verblasst. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: pattern, patternColor, opacity, scale ### Chart reference band https://fieldbook.lizardi.mx/de/components/chart-reference-band Ein schattiertes horizontales Band, das hinter einem Liniendiagramm gezeichnet wird, um einen Zielbereich oder eine Schwellenzone zu markieren, mit gefiederten Kanten und einem optionalen gestrichelten Rand. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: topValue, bottomValue, borderStyle, showMarkers, fadeEdges, accent ### Chat launcher morph https://fieldbook.lizardi.mx/de/components/chat-launcher-morph-button Ein runder Werfer, dessen Umriss der Sprechblase sich zu einer engen Markierung zusammenfügt, während seine drei Punkte verschwinden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, open, morphSeconds, idlePulse, strokeWidth ### Chat message thread https://fieldbook.lizardi.mx/de/components/chat-message-thread Ein kurzes Chat-Transkript aus abgerundeten Sprechblasen, eingehende Nachrichten links mit einem Avatar und Namen, rechts ausgehende Nachrichten in der Akzentfarbe. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, senderName, showAvatar ### Check draw toggle https://fieldbook.lizardi.mx/de/components/check-draw-toggle Ein quadratisches Kontrollkästchen, dessen Häkchen sich beim Aktivieren Strich für Strich selbst zeichnet, mit sanftem Drücken und Hover-Skala. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: checked, size, variant, accentColor ### Check stroke submit https://fieldbook.lizardi.mx/de/components/check-stroke-submit-button Eine kompakt gefüllte Absenden-Schaltfläche, deren führendes Häkchen sich Strich für Strich selbst zeichnet, wenn die Aktion erfolgreich ist. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, confirmLabel, accent, drawMs, holdMs ### Checkable action menu https://fieldbook.lizardi.mx/de/components/checkable-action-menu Ein Menü, das einfache Aktionen mit Kontrollkästchenzeilen und einem Single-Choice-Set kombiniert, wobei jedes Häkchen beim Einschalten eingeblendet wird und ein Punkt zwischen den Auswahlmöglichkeiten gleitet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, align, accent, keepOpenOnCheck, showSubmenu ### Checkbox motion lab https://fieldbook.lizardi.mx/de/components/checkbox-motion-lab Ein einzelnes übergroßes Kontrollkästchen, mit dem Sie genau einstellen können, wie fest es drückt und wie langsam das Häkchen eingezogen wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: drawDuration, pressScale, cornerRadius, accentColor ### Checkmark draw checkbox https://fieldbook.lizardi.mx/de/components/checkmark-draw-checkbox Ein quadratisches Kontrollkästchen, das auf eine Prüfung antwortet, indem es Strich für Strich ein Häkchen zeichnet und stattdessen einen kurzen Strich anzeigt, wenn sein Status nur teilweise festgelegt ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, state, accent, size ### Chevron accordion list https://fieldbook.lizardi.mx/de/components/chevron-accordion-list Ein vertikaler Stapel von Fragenreihen, die jeweils erweitert werden, um eine Antwort preiszugeben, mit einem Chevron, das sich umdreht, wenn die Reihe geöffnet ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: singleOpen, defaultOpenIndex, keepMounted, accent ### Chevron flip tile https://fieldbook.lizardi.mx/de/components/chevron-flip-tile Eine quadratische Symbolkachel, deren Chevron flach klappt und sich in die andere Richtung wieder öffnet, wobei sich jede Hälfte an der Verbindung dreht, an der sie sich treffen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: ink, accent, tileSize, duration, lift ### Chip legend pie https://fieldbook.lizardi.mx/de/components/chip-legend-pie Ein solides Kreisdiagramm ohne Beschriftungen auf den Segmenten, gepaart mit einer umwickelten Reihe von Farbchips darunter, die jedes Segment benennen und beim Bewegen des Mauszeigers synchron hervorheben. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, hueRange, gap, showValues, chipsPerRow ### Cipher reveal text https://fieldbook.lizardi.mx/de/components/cipher-reveal-text Ein Etikett, das zunächst in zufällige Symbole zerlegt wird und sich beim Betrachten, Bewegen oder Klicken in seinen echten Text entschlüsselt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, speed, sequential, accentColor ### Circle plus add button https://fieldbook.lizardi.mx/de/components/circle-plus-add-button Eine wortlose Schaltfläche zum Hinzufügen, deren Pluszeichen beim Schweben zwei Striche von der Mitte nach außen zieht, während die Füllung tiefer wird. Frameworks: react Access: member Public prop names: accent, width, strokeGrowth, spinRing ### Circle reveal sidebar https://fieldbook.lizardi.mx/de/components/circle-reveal-sidebar Ein Menüfeld, das sich als Kreis öffnet, der aus seinem eigenen Umschalter herauswächst, wobei Zeilen nacheinander auftauchen und die Umschaltleisten sich zu einem Kreuz falten. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: defaultOpen, itemCount, stagger, bounce, accent ### Circled Arrow Pill https://fieldbook.lizardi.mx/de/components/circled-arrow-pill-button Eine solide Pille mit hohem Chroma-Wert, mit der Beschriftung auf der linken Seite und einem ringförmigen Pfeil auf der rechten Seite, der sich beim Schweben nach vorne bewegt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, nudge, pressScale, iconSize ### Circular hover speed ring https://fieldbook.lizardi.mx/de/components/circular-hover-speed-ring Eine Phrase dreht sich langsam um einen Kreis, bis der Zeiger ankommt, dreht sich dann schnell und wächst leicht an, bevor sie sich wieder entspannt, sobald der Zeiger weggeht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, restSeconds, hoverSeconds, accent ### Circular wipe switcher https://fieldbook.lizardi.mx/de/components/circular-wipe-switcher Ein Farbumschalter, bei dem das neue Thema die gesamte Oberfläche als Kreis überflutet, der sich von genau dem Punkt aus ausdehnt, auf den Sie gedrückt haben, während der Auswahlring zwischen den Farbfeldern gleitet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: colorA, colorB, colorC, duration, fromPointer ### Clamp jaws glow button https://fieldbook.lizardi.mx/de/components/clamp-jaws-glow-button Ein hohler, umrissener Knopf, dessen seitliche Häkchen hineingleiten, in Backen übergehen und sich über dem Etikett schließen, wobei beim Schweben oder Fokussieren ein akzentuiertes Leuchten entsteht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, glowStrength, sequenceMs, reflection ### Clean Text Field https://fieldbook.lizardi.mx/de/components/clean-text-field Eine schnörkellose, umrandete Texteingabe für ein beschriftetes Formular: neutral im Ruhezustand, ein klarer Akzentring im Fokus, stummgeschaltet, wenn deaktiviert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, placeholder, accentColor, invalid, disabled ### Click ripple burst https://fieldbook.lizardi.mx/de/components/click-ripple-burst Ein Zeiger-Feedback-Effekt, der eine kurze animierte Form genau dort erzeugt, wo der Benutzer klickt oder tippt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: variant, color, size, duration ### Click spark burst https://fieldbook.lizardi.mx/de/components/click-spark-burst Jede Presse wirft einen Ring aus kurzen Linien vom genauen Kontaktpunkt aus, jede einzelne dehnt sich aus und schrumpft im Flug zu nichts. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: sparkCount, radius, duration, easing, sparkColor ### Code cover card https://fieldbook.lizardi.mx/de/components/code-cover-card Eine breite Verifizierungskarte mit dem Codeformular auf der einen Seite und einem Abdeckfeld auf der anderen Seite, das bei der Eingabe von Ziffern einen Fortschrittsbalken ausfüllt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, length, autoSubmit, showCover, headline ### Coiled Spring Drag https://fieldbook.lizardi.mx/de/components/coiled-spring-drag Eine ziehbare Kachel, die durch eine gezogene Spule an ihrer Ausgangsposition befestigt ist, die sich beim Ziehen ausdehnt und dünner macht und die Kachel dann zurückschleudert, wenn Sie loslassen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: coils, stiffness, damping, strokeWidth, accent ### Collapsible app sidebar https://fieldbook.lizardi.mx/de/components/collapsible-app-sidebar Eine vollständige Anwendungsseitenleiste mit gruppierten Navigationslinks, einer Hervorhebung des aktiven Elements, einem Schalter, der es auf eine reine Symbolleiste reduziert, und einer einschiebbaren Schublade auf schmalen Bildschirmen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: collapsed, accentColor, mobileBreakpoint, showAccountRow ### Collapsible App Sidebar https://fieldbook.lizardi.mx/de/components/collapsible-app-sidebar-2 Eine Anwendungsseitenleiste mit gruppierten Navigationslinks, die sich zu einer Leiste nur aus Symbolen zusammenfalten lässt, auf schmalen Bildschirmen als Overlay eingeschoben wird und mit einer Tastenkombination umgeschaltet werden kann. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultCollapsed, itemCount ### Collapsible Icon Sidebar https://fieldbook.lizardi.mx/de/components/collapsible-icon-sidebar Eine vollständige App-Shell mit einer linken Seitenleiste, die auf die Breite nur eines Symbols reduziert wird, verschachtelten Menüabschnitten, die erweitert werden können, und einer Hover-Hervorhebung, die zwischen Menüzeilen gleitet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: defaultOpen, side, accent, width ### Collapsing share button https://fieldbook.lizardi.mx/de/components/collapsing-share-button Eine beschriftete Pille, die zu einer runden Glyphe schrumpft, während ein Streifen Verbindungsplättchen in den Raum schwebt, den sie hinterlassen hat. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, items, direction, closeOnBlur ### Collapsing trail breadcrumb https://fieldbook.lizardi.mx/de/components/collapsing-trail-breadcrumb Ein Pfad mit Chevron-Trennzeichen, dessen mittlere Stufen zu einer Schaltfläche mit Auslassungspunkten zusammenfallen, die ein Menü mit den versteckten Stufen öffnet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: segmentCount, separator, accent ### Color Band Text Reveal https://fieldbook.lizardi.mx/de/components/color-band-text-reveal Ein weiches Band aus mehreren Farben gleitet mit einer sanften Hin- und Herbewegung einmal über eine Textzeile und färbt jeden Buchstaben ein, bevor der Text eine feste Farbe annimmt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, duration, repeat, repeatDelay ### Color blend compare https://fieldbook.lizardi.mx/de/components/color-blend-compare Zwei Farbfelder durchlaufen dasselbe Farbpaar, eines gemischt mit rohen Kanalwerten und eines mit linearem Licht, und zeigen den Rückgang, den ein einfacher Übergang verursacht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: fromColor, toColor, cycleSeconds, showLabels, pinMidpoint ### Color relay sign-in https://fieldbook.lizardi.mx/de/components/color-relay-sign-in-button Ein Anmeldetablett, dessen Vier-Segment-Markierung ihre Farben nacheinander an kreisförmige Fluten weitergibt, die im Relais über die Schaltfläche streichen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, secondColor, thirdColor, fourthColor, relaySeconds ### Color swap play button https://fieldbook.lizardi.mx/de/components/color-swap-play-button Eine Spielpille in Großbuchstaben, die beim Schweben ihre Grund- und Textfarben wechselt und sich anhebt, während ihr farbiges Leuchten dunkel wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, glow, lift ### Comb wipe invert button https://fieldbook.lizardi.mx/de/components/comb-wipe-invert-button Zwei ineinandergreifende, gestreifte Kämme gleiten von oben und unten hinein, um eine schwarze Pille abzudecken, und drehen dabei das Etikett um. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, bars, duration, pill ### Combobox field https://fieldbook.lizardi.mx/de/components/combobox-field Ein durchsuchbares Dropdown-Feld: Durch Eingabe wird eine Liste mit Optionen live gefiltert, und wenn Sie eine auswählen, wird das Feld ausgefüllt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, accent, openOnLoad ### Comet rain https://fieldbook.lizardi.mx/de/components/comet-rain Streifen mit hellen Köpfen fallen von einem leuchtenden Punkt nahe der Spitze und krümmen sich beim Fallen nach außen, wobei die Geschwindigkeit durch ihre Tiefe bestimmt wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: streakColor, glowColor, speed, density, streakLength, pointerPush ### Comic pop text https://fieldbook.lizardi.mx/de/components/comic-pop-text Klobiger Comic-Schriftzug mit dicker Kontur und Halbton-Punktfüllung, der mit einem federnden, skalierbaren und drehbaren Eingang auf die Bühne springt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, fontSize, fillColor, dotColor ### Command palette https://fieldbook.lizardi.mx/de/components/command-palette Ein durch eine Schaltfläche oder Strg K geöffnetes Such-Overlay, das gruppierte Befehle filtert, eine Hervorhebung mit den Pfeiltasten verschiebt, den ausgewählten Befehl mit der Eingabetaste ausführt und das Ergebnis meldet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: placeholder, accent ### Command Palette Search https://fieldbook.lizardi.mx/de/components/command-palette-search Ein über die Tastatur aufrufbares Overlay mit einem Suchfeld oben und einer live gefilterten, gruppierten Liste von Befehlen darunter, die vollständig über die Tastatur navigiert und mit der Eingabetaste ausgeführt werden kann. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, placeholder, groupCount ### Command search palette https://fieldbook.lizardi.mx/de/components/command-search-palette Ein Suchfeld, das während der Eingabe eine gefilterte Liste von Befehlen unter sich ablegt, mit Pfeiltasten-Hervorhebung, Hover-Auswahl und einer Fußzeile mit Tastaturhinweisen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: placeholder, defaultOpen, accentColor ### Compact Time Range Picker https://fieldbook.lizardi.mx/de/components/compact-time-range-picker Eine Monatskalenderkarte mit einem zweizelligen Zeitbereichsstreifen in der Fußzeile, wobei die beiden Zeitfelder nur durch einen kurzen Strich getrennt sind, sodass das Paar als eine Bereichssteuerung gelesen wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, startTime, endTime, cellSize ### Compass bar grid https://fieldbook.lizardi.mx/de/components/compass-bar-grid Ein Gitter aus kurzen Balken, die sich alle drehen, um auf den Zeiger zu zeigen, sodass das Feld aussieht, als würden Eisenspäne einen Magneten finden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rows, columns, barLength, restAngle, accent ### Compass share burst https://fieldbook.lizardi.mx/de/components/compass-share-burst Ein runder Share-Button, der sein Ziel auffächert, verteilt sich in einem gestaffelten Stoß auf die Himmelsrichtungen und zieht sie in umgekehrter Reihenfolge wieder nach Hause. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, radius, stagger, accent, latchOnClick ### Composable Reveal https://fieldbook.lizardi.mx/de/components/composable-reveal Ein Reveal-Wrapper, dessen Schiebe-, Fade-, Zoom- und Defokussierungsteile jeweils eingeschaltet und zu einem einzigen Federübergang kombiniert werden können. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: slide, fade, zoom, defocus, delay, accent ### Concentric goal rings https://fieldbook.lizardi.mx/de/components/concentric-goal-rings Drei ineinander verschachtelte Fortschrittsringe, die sich nacheinander zeichnen, neben einer Anzeige des aktuellen und Zielwerts jedes Ziels. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: outerValue, middleValue, innerValue, ringWidth, accent ### Concentric pulse rings https://fieldbook.lizardi.mx/de/components/concentric-pulse-rings Ein Stapel konzentrischer Ringe hinter einer Bildunterschrift, von denen jeder mit einer versetzten Verzögerung atmet, sodass sich ein langsamer Puls von der Mitte nach außen ausbreitet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: ringCount, baseSize, step, duration, accentColor ### Concentric ring button https://fieldbook.lizardi.mx/de/components/concentric-ring-button Ein Knopf, der über einem riesigen Stapel konzentrischer Ringe sitzt und beim Schweben hinübergleitet, während die gesamte Platte von einer warmen Rampe zu einer kühlen wechselt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, rings, ringWidth, shift ### Concentric Ring Chart https://fieldbook.lizardi.mx/de/components/concentric-ring-chart Ineinander verschachtelte Fortschrittsringe, die sich bei der Montage auf ihren eigenen Prozentsatz bewegen und einen Live-Center-Gesamtwert teilen, wie ein Messgerät mit mehreren Skalen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: strokeWidth, ringGap, accent, animationSpeed, showCenterLabel ### Concentric Ring Radar https://fieldbook.lizardi.mx/de/components/concentric-ring-radar Ein Polardiagramm, dessen Maßstab als echte konzentrische Kreise statt als verschachtelte Polygone gezeichnet wird, sodass die gezeichnete Form vor einem glatten Zielhintergrund angezeigt wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, rings, fillOpacity, dotRadius, showSpokes ### Confirm action dialog https://fieldbook.lizardi.mx/de/components/confirm-action-dialog Ein zentriertes Modal, das die Seite unterbricht, damit jemand eine schwerwiegende Aktion explizit bestätigt oder abbricht, bevor sie geschieht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: confirmLabel, cancelLabel, accentColor, destructive ### Confirm action modal https://fieldbook.lizardi.mx/de/components/confirm-action-modal Ein zentrierter Bestätigungsdialog, der sich über einem dunkler werdenden Hintergrund öffnet und den Besucher auffordert, eine destruktive Aktion zu bestätigen oder abzubrechen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: question, detail, accentColor, confirmLabel ### Confirm Delete Modal https://fieldbook.lizardi.mx/de/components/confirm-delete-modal Ein zentrierter Bestätigungsdialog, der vor einem abgedunkelten Hintergrund eingeblendet wird, den Benutzer auffordert, eine destruktive Aktion zu bestätigen, und bei Abbrechen, Bestätigen oder einem Klick von außen wieder ausgeblendet wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, title, closeOnBackdrop ### Connector Pulse Beam https://fieldbook.lizardi.mx/de/components/connector-pulse-beam Zeichnet eine gekrümmte Verbindung zwischen zwei Elementen und sendet ein helles Farbverlaufssegment in einer Schleife entlang dieser Verbindung. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: curvature, accent, duration, pathWidth, reverse ### Consequence confirm dialog https://fieldbook.lizardi.mx/de/components/consequence-confirm-dialog Ein Bestätigungsdialog, der von einem ausgewählten Rand aus angezeigt wird und die Seite blockiert, bis der Besucher den Vorgang ausdrücklich abbricht oder fortfährt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: from, accent, headline, continueLabel ### Content Divider Rule https://fieldbook.lizardi.mx/de/components/content-divider-rule Eine dünne Strukturlinie, die gestapelte Abschnitte oder kurze Inline-Beschriftungen trennt, ohne die Aufmerksamkeit auf sich zu ziehen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: orientation, thickness, spacing, accentColor ### Content Loading Card https://fieldbook.lizardi.mx/de/components/content-loading-card Ein kartenförmiger Platzhalter, der mit einem langsamen opacity-Puls atmet, während noch ein großer Bildblock und zwei Textzeilen geladen werden. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: layout, pulse ### Contour Field https://fieldbook.lizardi.mx/de/components/contour-field-backdrop Ein vollständig animierter Hintergrund aus verschachtelten Höhenkonturen, die anschwellen und verschmelzen, wobei der Zeiger eine sanfte Erhebung im Gelände erzeugt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, bands, speed, glow, pointerLift ### Contrast Boost Frame Button https://fieldbook.lizardi.mx/de/components/contrast-boost-frame-button Eine blasse Innenplatte schwebt in einem dicken bemalten Rahmen, und durch das Schweben wird das Ganze heller und gesättigter, ohne dass sich etwas bewegt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, secondary, frameWidth, boost, rampAngle ### Converging chevron button https://fieldbook.lizardi.mx/de/components/converging-chevron-button Zwei pfeilförmige Platten fliegen von gegenüberliegenden Seiten ein, treffen in der Mitte des Knopfes zusammen und verschließen ihn hinter dem Etikett. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, point, duration, radius ### Conversation bubbles https://fieldbook.lizardi.mx/de/components/conversation-bubbles Ein Nachrichtenthread aus Blasen in der Größe ihres Textes, gruppiert nach Absender und mit einer überlappenden Reaktionspille. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: variant, accent, maxWidth, showReactions, grouped ### Copy confirm button https://fieldbook.lizardi.mx/de/components/copy-confirm-button Eine quadratische Symbolschaltfläche, die eine Zeichenfolge kopiert und deren Glyphe gegen ein gezeichnetes Häkchen austauscht, wobei das eine verkleinert und unscharf wird, während das andere an der richtigen Stelle eintrifft. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, size, skin, resetDelay, content ### Copy flick tile https://fieldbook.lizardi.mx/de/components/copy-flick-tile Eine quadratische Kachel mit einem Stapel von zwei Seiten; Durch langes Drücken wird die oberste Seite weggeblättert, die Kopie in der Überschrift bestätigt und dann der Stapel zurückgesetzt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: caption, doneCaption, accent, holdMs, flingDistance, tileSize ### Corner bracket frame button https://fieldbook.lizardi.mx/de/components/corner-bracket-frame-button Ein leeres Etikett in Großbuchstaben, das von zwei L-förmigen Klammern umschlossen wird, die von gegenüberliegenden Seiten her eingeschoben werden und dann wachsen, um den Rahmen zu schließen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, thickness, stagger, width ### Corner bracket seal button https://fieldbook.lizardi.mx/de/components/corner-bracket-seal-button Zwei kurze Eckwinkel wachsen an den Kanten entlang, bis sie beim Schweben einen vollständigen Rahmen um das Etikett bilden. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, thickness, stubLength, duration, halo ### Corner bracket target button https://fieldbook.lizardi.mx/de/components/corner-bracket-target-button Ein kastenförmiger Knopf, eingerahmt von vier Eckklammern, die sich beim Schweben nach innen zurückziehen und sich wie ein Visier auf dem Etikett schließen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, bracketSize, retract, crosshair ### Corner flood button https://fieldbook.lizardi.mx/de/components/corner-flood-button Ein dunkler, rechteckiger Knopf mit einem kleinen Farbchip, der halb an der oberen linken Ecke angebracht ist und sich anschwillt, bis er die gesamte Fläche überflutet, wenn der Knopf betätigt wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, chipSize, size, radius ### Corner light rays https://fieldbook.lizardi.mx/de/components/corner-light-rays Breite Lichtstrahlen strahlen aus einer Ecke, zwei getönte Fächer kreuzen sich in leicht unterschiedlichen Winkeln und atmen langsam. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: colorA, colorB, origin, spread, speed, intensity ### Corner ticks frame button https://fieldbook.lizardi.mx/de/components/corner-ticks-frame-button Ein dunkles Rechteck, das nur durch vier Eckhäkchen gekennzeichnet ist, die auslaufen, um einen vollständigen Rahmen zu zeichnen. Anschließend öffnet sich in der Mitte ein beleuchtetes Feld und die Beschriftung wird umgekehrt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tickPx, stageMs, glow ### Count badge cluster https://fieldbook.lizardi.mx/de/components/count-badge-cluster Eine Reihe von Wortpillen und kompakten numerischen Token zum Beschriften oder Inline-Zählen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, variant, count, accentColor ### Count Sweep CTA https://fieldbook.lizardi.mx/de/components/count-sweep-cta Ein kompakter dunkler Aufruf zum Handeln mit einer führenden Markierung, einem Teiler und einer Live-Zählung, gekreuzt von einem langsamen diagonalen Lichtstreifen beim Schweben. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, count, accent, glintMs, showCount ### Count Up Number https://fieldbook.lizardi.mx/de/components/count-up-number Eine große Zahl, die von einem Startwert bis zu einem Ziel springt, sobald sie ins Blickfeld gescrollt wird, und leicht übersteigt, bevor sie sich einpendelt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: to, from, duration, accentColor ### Count wheel badge https://fieldbook.lizardi.mx/de/components/count-wheel-badge Ein vertikales Zahlenrad, das durch abgerundete Schritte zu einer Gesamtsumme rollt, mit einem Stern in der Mitte, der sich mit steigender Zahl füllt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: target, step, rowHeight, direction, accent ### Counting follow chip https://fieldbook.lizardi.mx/de/components/counting-follow-chip Ein umrissener Chip, der ein Etikett mit einer Follower-Zählung verbindet und die geänderten Ziffern beim Einrasten durch ein maskiertes Fenster nach oben und beim Loslassen wieder nach unten rollt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, count, compact, duration ### Counting metric https://fieldbook.lizardi.mx/de/components/counting-metric Eine große Zahl, die sich beim ersten Betrachten sanft von einem Startwert bis zu ihrem Ziel bewegt, formatiert mit Tausendertrennzeichen und festen Dezimalstellen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: target, startValue, decimals, accent ### Counting number readout https://fieldbook.lizardi.mx/de/components/counting-number-readout Ein großer Wert, der auf einer langsamer werdenden Kurve bis zu seinem Wert hochzählt und den Text direkt in jedem Frame schreibt, sodass das Layout nie ins Wanken gerät. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: target, duration, decimals, suffix, accent ### Counting readout https://fieldbook.lizardi.mx/de/components/counting-readout Eine metrische Zahl, die von einem Startwert bis zu ihrem Ziel auf einer Feder zählt, wenn sie zum ersten Mal angezeigt wird, mit festen Dezimalstellen und optionaler Nullauffüllung. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: target, decimals, delay, padStart, accent ### Crackling border frame https://fieldbook.lizardi.mx/de/components/crackling-border-frame Ein abgerundeter Rahmen, dessen Umriss in jedem Rahmen als flackernder Lichtbogen neu gezeichnet wird, mit einem gleichmäßigen Leuchten darunter und vollkommener Stille darüber. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: speed, chaos, radius, thickness, glow, color ### Cross morph menu button https://fieldbook.lizardi.mx/de/components/cross-morph-menu-button Ein dünnes Menüsymbol mit drei Balken, das sich zu einem engen Kreuz zusammenfaltet, wobei die äußeren Balken zur Mittellinie verlaufen, bevor sie geschert und neu eingefärbt werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: restColor, activeColor, barWidth, duration, showTile ### Crossing ripple tile https://fieldbook.lizardi.mx/de/components/crossing-ripple-tile-button Eine quadratische Abzeichenkachel, bei der zwei Punkte von gegenüberliegenden Kanten her einlaufen, sich zu überlappenden Kreisen anschwellen lassen, die das Gesicht überfluten, und darunter eine Bildunterschrift entfalten. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, caption, rippleMs, spin ### CRT terminal static https://fieldbook.lizardi.mx/de/components/crt-terminal-static Ein vollflächiges Raster aus leuchtenden Blockglyphen, das brodelt, rollt und zerreißt wie ein versagender Monochrom-Monitor. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tint, cellSize, speed, scanline, glitch, pointerGlow ### Cube flip letters https://fieldbook.lizardi.mx/de/components/cube-flip-letters Wenn Sie den Mauszeiger über eine Linie bewegen, wird jeder Buchstabe um eine Vierteldrehung in 3D gedreht, einer nach dem anderen von einem gewählten Ursprung aus, wodurch ein zweites Gesicht sichtbar wird, das denselben Glyphen im Akzent trägt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, direction, origin, stagger, accent ### Cursor-chasing tooltip https://fieldbook.lizardi.mx/de/components/cursor-chase-tooltip Eine Hinweisblase, die beim Schweben oder Fokussieren erscheint und gleiten kann, um dem Zeiger zu folgen, während er sich über den Auslöser bewegt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, followCursor, accent ### Cursor drift link preview https://fieldbook.lizardi.mx/de/components/cursor-drift-link-preview Ein Link-Vorschaufenster, das sich dorthin neigt, wo sich der Zeiger auf dem Link befindet, und ihn auf einer weichen Feder nachzieht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: driftAxis, driftAmount, stiffness, accent ### Cursor fluid trail https://fieldbook.lizardi.mx/de/components/cursor-fluid-trail Ein dunkles Feld, über das beim Ziehen des Zeigers farbige Flüssigkeit verschmiert wird und der Fleck sich nach dem Anhalten des Zeigers weiter wellt und dünner wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, brushSize, force, dissipation, autoDrift ### Cursor magnifier lens https://fieldbook.lizardi.mx/de/components/cursor-magnifier-lens Eine runde Linse folgt dem Zeiger über ein Bild und vergrößert nur den kleinen Bereich darunter, wie eine Handlupe. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: zoomFactor, lensSize, followMode ### Cursor trail grid https://fieldbook.lizardi.mx/de/components/cursor-trail-grid Ein Gitter aus umrissenen Zellen, die unter dem Zeiger aufleuchten, langsam abkühlen, sobald er sich bewegt, und eine verblassende Spur hinterlassen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cellSize, columns, rows, fadeMs, accentColor ### Curtain line loader https://fieldbook.lizardi.mx/de/components/curtain-line-loader Ein Ladevorhang, der sich hinter einer hellen Wanderlinie zurückzieht und den fertigen Inhalt sichtbar macht, anstatt ihn einzublenden. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, duration, direction, lineWidth, loop ### Curtain scroll reveal https://fieldbook.lizardi.mx/de/components/curtain-scroll-reveal Eine Reihe von Bildern, die beim Scrollen jeweils hinter einer verschiebbaren Vorhangmaske zum Vorschein kommen, bringt sie ins Blickfeld und verdeckt sie wieder, wenn sie wieder herausscrollen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: revealDirection, imageCount, settleScale ### Curved input bar https://fieldbook.lizardi.mx/de/components/curved-input-bar Ein Pillentextfeld, das in einem sanften Aufwärtsbogen gebogen ist, wobei der eingegebene Text, die Einfügemarke und die Schaltfläche „Senden“ derselben Kurve folgen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: placeholder, buttonText, accent, bend ### Curved Scroll Wall https://fieldbook.lizardi.mx/de/components/curved-scroll-wall Eine horizontal scrollende Wand aus Fotos, die auf einer sanft gekrümmten, gebogenen Ebene gerendert wird und endlos in beide Richtungen scrollt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: bend, scrollSpeed, borderRadius, textColor ### Curved Text Loop https://fieldbook.lizardi.mx/de/components/curved-text-loop Eine Textzeile wiederholt sich endlos entlang eines sanft gewölbten Pfads, scrollt automatisch seitwärts und kann mit der Hand mit Schwung gezogen werden, der die Richtung umkehrt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, speed, curveAmount, accentColor ### Custom shell lightbox https://fieldbook.lizardi.mx/de/components/custom-shell-lightbox Ein Galerieraster, das einen randlosen, vollflächigen Leuchtkasten öffnet und zeigt, wie eine einzige Öffnungs-, Schließ- und Fokus-Engine eine völlig individuelle Hülle tragen kann. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: imageCount, backdropOpacity, showCaption ### Dark Pill Sign In https://fieldbook.lizardi.mx/de/components/dark-pill-sign-in-button Eine umrandete dunkle Pille für die Anmeldung durch Dritte, die beim Schweben dunkler wird, während die Beschriftung zurücktritt und der Rand enger wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, growth, borderStrength ### Dashed outline tooltip button https://fieldbook.lizardi.mx/de/components/dashed-outline-tooltip-button Eine gestrichelte Geisterschaltfläche, die beim Schweben oder Fokussieren mit ihrem Akzent überflutet, während sich ein spitzer Tooltip aus dem Rand entfaltet, der der Schaltfläche am nächsten liegt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, tip, accent, dashWidth, gap, placement ### Date Range Picker https://fieldbook.lizardi.mx/de/components/date-range-picker Ein Einzelmonatskalender zur Auswahl eines Start- und Enddatums, wobei jeder Tag dazwischen als ein fortlaufender hervorgehobener Streifen ausgefüllt wird, sobald beide Enden ausgewählt sind. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, startMonth, startYear ### Date Range Picker https://fieldbook.lizardi.mx/de/components/date-range-picker-2 Ein Monatskalenderraster zur gemeinsamen Auswahl eines Start- und Enddatums, wobei die Tage dazwischen als eine zusammenhängende Zeitspanne angezeigt werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, weekStart ### Date and Time Duo Picker https://fieldbook.lizardi.mx/de/components/date-time-duo-picker Zwei nebeneinander beschriftete Felder, eine kompakte Datumsschaltfläche, die ein Kalender-Popover öffnet, und ein einfaches Zeitfeld zum Festlegen eines Datums und einer Uhrzeit in zwei unabhängigen Schritten. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, dateLabel, timeLabel, defaultTime ### Day Agenda Calendar https://fieldbook.lizardi.mx/de/components/day-agenda-calendar Eine Karte, die einen kompakten Monatskalender mit einer Liste geplanter Ereignisse für den ausgewählten Tag und einer Schaltfläche zum Hinzufügen eines weiteren Ereignisses kombiniert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, selectedDate, eventCount ### Day night sweep toggle https://fieldbook.lizardi.mx/de/components/day-night-sweep-toggle Eine Symbolschaltfläche, die ein Einstellungsfeld zwischen hell, dunkel und automatisch umschaltet und es mit einer harten, abgeschnittenen Kante neu streicht, die über die Kante verläuft, statt mit einer Überblendung. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: direction, includeAuto, accent, sweepMs, startMode ### Decline call circle https://fieldbook.lizardi.mx/de/components/decline-call-circle-button Eine runde, nur aus Symbolen bestehende Ablehnungstaste, deren Mobilteil-Glyphe sich beim Drücken in eine aufgehängte Pose neigt, mit einem kleinen Ablehnungsschütteln beim Schweben. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, pressTilt, shakeOnHover ### Deep Slab Button https://fieldbook.lizardi.mx/de/components/deep-slab-button Eine hohe Platte, die auf einem langen diagonalen Schatten über der Seite schwebt und beim Schweben darauf sinkt und dann beim Klicken flach aufschlägt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, sink, showArrow, shadowLength ### Deferred post card https://fieldbook.lizardi.mx/de/components/deferred-post-card Eine Postkarte, die zuerst eine gemessene Platzhalterhülle anzeigt und dann den echten Beitrag mit einem wiederholbaren Fehlerstatus einfügt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: state, loadDelay, showMedia, accent ### Departing send button https://fieldbook.lizardi.mx/de/components/departing-send-button Eine Schaltfläche „Senden“, deren Glyphe vom rechten Rand wegfliegt und beim Schweben ihre Beschriftung leert, wodurch eine zweite Linie über einer sich ausbreitenden Akzentwäsche sichtbar wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, hoverLabel, lift, flightDistance ### Destructive confirm dialog https://fieldbook.lizardi.mx/de/components/destructive-confirm-dialog Ein Bestätigungsdialog für destruktive Aktionen, der nur über seine eigenen Schaltflächen geschlossen wird und sich nicht bei einem Hintergrundklick oder Escape schließen lässt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: title, confirmLabel, dangerColor ### Destructive sweep button https://fieldbook.lizardi.mx/de/components/destructive-sweep-button Eine Löschaktion, deren rosafarbene bis purpurrote Schattierung beim Schweben von einem Ende zum anderen streicht und dabei den Behälterdeckel kippt, mit optionalem Halten zum Bestätigen der Linie entlang der Unterkante. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, holdToConfirm, holdMs ### Detached Ring Pill https://fieldbook.lizardi.mx/de/components/detached-ring-pill-button Eine dunkle Pille, die von einem schwebenden Umrissring umkreist wird, der weiter nach außen drückt und die Pille beim Schweben mit Farbe überflutet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, ringGap, ringWidth, growLabel ### Detail list item https://fieldbook.lizardi.mx/de/components/detail-list-item Eine Listenzeile, die ein führendes Symbol oder einen Avatar, einen Titel und eine Beschreibung sowie eine nachgestellte Aktion für Benachrichtigungslisten, Menüs oder Einstellungszeilen kombiniert. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: variant, size, mediaVariant, accent ### Detailed signup card https://fieldbook.lizardi.mx/de/components/detailed-signup-card Eine zentrale Anmeldekarte, auf der der vollständige Name, die E-Mail-Adresse, das Passwort und die Bestätigung erfasst sind, jeweils mit einer Hilfszeile, vor einer primären Schaltfläche zum Erstellen eines Kontos. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: heading, accentColor, showAltProvider, providerLabel ### Diagonal blob flood button https://fieldbook.lizardi.mx/de/components/diagonal-blob-flood-button Ein umrissener Knopf, der von einem großen runden Klecks überflutet ist, der von der oberen Ecke diagonal nach innen gleitet und beim Halten dunkler wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, pressAccent, duration, radius ### Diagonal Glare Sweep https://fieldbook.lizardi.mx/de/components/diagonal-glare-sweep Ein Wrapper, der ein schmales Lichtband diagonal über den Inhalt gleitet, wenn der Zeiger- oder Tastaturfokus erreicht wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: angle, bandWidth, duration, glareColor, intensity, playOnce ### Diagonal Hatch Field https://fieldbook.lizardi.mx/de/components/diagonal-hatch-field Ein sich wiederholendes Feld aus parallelen, diagonalen Haarlinien, das sich nahtlos über einen Behälter erstreckt und in beide Richtungen geneigt sein kann. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: spacing, thickness, slant, dashed, opacity, accentColor ### Diagonal orb fill button https://fieldbook.lizardi.mx/de/components/diagonal-orb-fill-button Ein übergroßer Kreis gleitet von Ecke zu Ecke über eine umrandete Schaltfläche, füllt diese diagonal aus und wird in dem Moment, in dem Sie darauf drücken, dunkler. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, pressColor, travelSeconds, radius ### Diagonal shutter fill button https://fieldbook.lizardi.mx/de/components/diagonal-shutter-fill-button Ein umrissener Knopf, der sich füllt, wenn zwei geneigte Blätter von entgegengesetzten Seiten her einschwenken, sich in der Mitte des Fluges gerade ausrichten und sich in der Mitte treffen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, duration, tilt, borderWidth ### Diagonal swipe button https://fieldbook.lizardi.mx/de/components/diagonal-swipe-button Ein umrissener Knopf, der eine dünne, schräge Klinge hält, die sich aufrichtet und verbreitert, bis sie beim Schweben den Rahmen überschwemmt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, tilt, borderWidth, durationMs ### Diagonal wedge button https://fieldbook.lizardi.mx/de/components/diagonal-wedge-button Ein quadratischer Knopf, der mit einem dreieckigen Keil gefüllt ist, der diagonal wächst, bis er das gesamte Gesicht bedeckt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, duration, rim, padX ### Dialog bevel button https://fieldbook.lizardi.mx/de/components/dialog-bevel-button Ein kleiner grauer Systemknopf, der aus zwei ineinander verschachtelten harten Abschrägungen und einer gepunkteten inneren Fokusmarkierung besteht, deren abgeschrägte Linien sich beim Drücken vertauschen, sodass sie als „eingedrückt“ angezeigt werden. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, size, isDefault ### Directional Slide In https://fieldbook.lizardi.mx/de/components/directional-slide-in Eine Enthüllung, die den Inhalt von einer der vier Seiten um einen festgelegten Abstand nach innen schiebt und es einer Feder ermöglicht, den ankommenden Inhalt aufzufangen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: direction, offset, delay, stagger, accent ### Directional theme wipe https://fieldbook.lizardi.mx/de/components/directional-theme-wipe Ein Hell-Dunkel-Schalter, der das neue Thema mit einem gerichteten Wischen über den gesamten Rahmen sichtbar macht, statt eines sofortigen Farbwechsels. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: direction, wipeDuration, accentColor ### Disc to Pill CTA https://fieldbook.lizardi.mx/de/components/disc-to-pill-cta Eine kleine gefüllte Scheibe neben einem leeren Etikett in Großbuchstaben dehnt sich beim Schweben oder Fokussieren zu einer vollen Pille aus, gibt den Text frei und trägt den Pfeil mit. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, trackWidth, expandSeconds, arrowShift ### Dismiss exit card https://fieldbook.lizardi.mx/de/components/dismiss-exit-card Eine Karte, die beim Herausgehen schrumpft und verblasst und beim Wiederherstellen wieder hineinspringt, wobei das umgebende Layout stillgehalten wird, damit nichts springt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: exitStyle, duration, accent, autoCycle, holdSpace ### Dismissible Dialog https://fieldbook.lizardi.mx/de/components/dismissible-dialog Ein universeller zentrierter Dialog, der vor einem unscharfen Hintergrund geöffnet wird und durch die Schaltfläche „Schließen“, den Hintergrund oder Escape einfach geschlossen werden kann. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, detail, accentColor, confirmLabel ### Dock menu https://fieldbook.lizardi.mx/de/components/dock-menu Ein unteres Dock, dessen Symbole ihre Größe vom Zeigerabstand annehmen, mit einer Beschriftung über dem Symbol unter dem Cursor und einem Punkt unter dem aktiven. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: magnification, distance, iconSize ### Dodging eyes button https://fieldbook.lizardi.mx/de/components/dodging-eyes-button Eine dunkle Kapsel mit zwei blinkenden Cartoon-Augen, die in die Ecke springt, die am weitesten von Ihrem Zeiger entfernt ist, während ihre Pupillen Sie weiterhin beobachten. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, eyeSize, dodge, blinkSeconds, moveMs ### Donut share chart https://fieldbook.lizardi.mx/de/components/donut-share-chart Ein Donut aus fünf Scheiben mit einer hohlen Mitte und haarfeinen Lücken, der sich auf der Halterung öffnet und diejenige Scheibe anhebt, über der sich der Zeiger befindet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, hueRange, holeRatio, gap, showTooltip ### Donut with total https://fieldbook.lizardi.mx/de/components/donut-with-total Ein Donut-Diagramm, das die laufende Summe in ein eigenes Loch einfügt und diese Anzeige auf das Segment austauscht, auf dem sich der Mauszeiger befindet oder der fokussiert ist. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, caption, holeRatio, hueRange, countUp ### Dot flood button https://fieldbook.lizardi.mx/de/components/dot-flood-button Eine umrissene Pille mit einem kleinen Punkt neben dem Etikett; Beim Schweben vergrößert sich der Punkt, bis er die gesamte Schaltfläche überflutet und die Beschriftung zu ihrem umgekehrten Zwilling wechselt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, dotSize, floodMs, showDot ### Dot matrix arrow button https://fieldbook.lizardi.mx/de/components/dot-matrix-arrow-button Eine als Punktreihen gezeichnete Schaltfläche trat in eine nach rechts gerichtete Pfeilspitze ein, die beim Schweben oder Fokussieren in einer langsamen Schleife seitwärts und zurück gleitet und beim Drücken in Richtung ihrer Spitze komprimiert wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: dotSize, gap, accent, travel, loopSeconds ### Dot matrix status pill https://fieldbook.lizardi.mx/de/components/dot-matrix-status-pill Eine Pillentaste, deren linke Seite aus einem Raster mit fünf mal fünf Punkten besteht und für jeden Zustand ein kurzes Schleifenmuster abspielt, wobei die Beschriftung im Takt wechselt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: state, frameMs, dotSize, accent, autoCycle ### Dot radio list https://fieldbook.lizardi.mx/de/components/dot-radio-list Eine vertikale Liste von Radiooptionen mit kreisförmigen Indikatoren, wobei die Auswahl einer Option mit einem Punkt gefüllt und der Rest gelöscht wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: optionCount, initialSelected, accentColor ### Dot Scale Page Indicator https://fieldbook.lizardi.mx/de/components/dot-scale-page-indicator Ein minimaler Paginierungsstreifen aus kleinen nummerierten Punkten, die beim Schweben oder bei Aktivierung vergrößert und heller werden, flankiert von vorherigen und nächsten Textlinks, die bei Deaktivierung ausgeblendet werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: totalPages, currentPage, accentColor ### Dotted Trend Line https://fieldbook.lizardi.mx/de/components/dotted-trend-line Eine glatte Einzelserienkurve mit einer gefüllten Markierung an jedem Punkt und einer ringförmigen Markierung, die an dem Punkt einrastet, der dem Zeiger am nächsten liegt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, strokeWidth, dotRadius, showGrid, animateOnMount ### Dotted World Map https://fieldbook.lizardi.mx/de/components/dotted-world-map Eine Weltkarte, die vollständig aus kleinen Punkten besteht, mit einigen beschrifteten Orten, die wie ein Radarping nach außen pulsieren. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, pulse, showLabels, dotColor ### Double bevel button https://fieldbook.lizardi.mx/de/components/double-bevel-button Ein heller Knopf, der wie ein geformter Schlüssel aussieht, dank zweier entgegengesetzter innerer Schatten, einer von oben dunkel und einer von unten hell, die sich hinter einer kühlen grauen Rampe treffen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, bevel, radius, showMark ### Download Sweep Progress https://fieldbook.lizardi.mx/de/components/download-sweep-progress-button Eine Download-Schaltfläche, bei der sich das Symbolfeld beim Bewegen des Mauszeigers über die Beschriftung ausdehnt, dann eine echte Fortschrittsanzeige ausführt und nach dem Klicken in den Status „Fertig“ wechselt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, width, durationMs, showProgressBar ### Download tooltip button https://fieldbook.lizardi.mx/de/components/download-tooltip-button Eine quadratische Symbolschaltfläche, deren Download-Pfeil sich nach unten bewegt und die Akzentfarbe annimmt, während sich darunter eine dateigroße Beschriftung entfaltet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: caption, accent, size, nudge ### Download tray pulse button https://fieldbook.lizardi.mx/de/components/download-tray-pulse-button Eine Pille mit abgerundeter Wirkung und einer kleinen Tablettmarkierung an der Vorderkante, wo eine Pfeilspitze auf einer Schleife durch das Tablett fällt, während der Zeiger darauf ruht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, hoverColor, speed, direction ### Drag Dismiss Bottom Drawer https://fieldbook.lizardi.mx/de/components/drag-dismiss-bottom-drawer Ein Bedienfeld, das mit einem kleinen Ziehgriff von einer Kante her hineingleitet, die Bewegung eines Fingers oder Zeigers mit Gummibandwiderstand verfolgt und je nach der Stärke des Ziehens entweder wieder aufschnappt oder sich löst. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: edge, showHandle, accentColor ### Drag reorder checklist https://fieldbook.lizardi.mx/de/components/drag-reorder-checklist Eine Checkliste, deren Zeilen in eine neue Reihenfolge gezogen werden können, wobei markierte Elemente ein animiertes Häkchen und eine Durchstreichung darstellen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, rowGap, dragEnabled ### Drag split panels https://fieldbook.lizardi.mx/de/components/drag-split-panels Durch dünne ziehbare Griffe unterteilte Bereiche, die die Größe der angrenzenden Bereiche in Echtzeit ändern, in einer Reihe angeordnet oder gestapelt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: orientation, showHandleGrip, defaultSplit, accentColor ### Drag tile track https://fieldbook.lizardi.mx/de/components/drag-tile-track Ein Plättchen, das Sie um eine begrenzte Strecke werfen können, das sich in den Widerstand neigt, über die Kanten hinweg Widerstand leistet und mit Schwung zum Stillstand kommt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: axis, momentum, elasticity, accent, tilt ### Draining fill button https://fieldbook.lizardi.mx/de/components/draining-fill-button Ein überfluteter Knopf, der beim Schweben aus einer Kante herausläuft und einen hohlen Umriss hinterlässt, wobei die Beschriftung zum Akzent gedreht ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, direction, drainMs ### Draining fill button https://fieldbook.lizardi.mx/de/components/draining-fill-button-2 Eine umrissene Pille, die zu Beginn vollständig mit Farbe überflutet ist und beim Schweben zu einem schmalen Band am Fuß abfließt und sich beim Belassen von unten wieder auffüllt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, residual, duration, borderWidth ### Drawn check checkbox https://fieldbook.lizardi.mx/de/components/drawn-check-checkbox Ein Kontrollkästchen, dessen Häkchen sich Strich für Strich selbst zeichnet, während das Kästchen mit einer durchgehenden Akzentfarbe gefüllt wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, checked, accentColor, drawDuration ### Drifting aura button https://fieldbook.lizardi.mx/de/components/drifting-aura-button Ein sanft geprägtes, schräges Pad, das hinter seinen Rändern einen verschwommenen Farbstreifen hervorruft und den hellsten Teil um die Kontur gleiten lässt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, auraTint, label, blur, driftSeconds, skew ### Drifting border sheen https://fieldbook.lizardi.mx/de/components/drifting-border-sheen Ein Panel, dessen Umriss durch ein sanftes zweifarbiges Leuchten beleuchtet wird, das um ein Vielfaches größer ist als das Panel selbst und langsam um den Rahmen wandert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: borderWidth, duration, accentColor, secondColor, radius ### Drifting glass shards https://fieldbook.lizardi.mx/de/components/drifting-glass-shards Ein langsamer Strom aus durchscheinenden Splittern, die aufblitzen, während sie fallen, sich vom Cursor verstreuen und sich wieder sammeln, wenn der Zeiger stillsteht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, shardCount, shardSize, speed, flow, pointerMode ### Drifting Gradient Button https://fieldbook.lizardi.mx/de/components/drifting-gradient-button Eine Schaltfläche, deren diagonale zweifarbige Füllung übergroß ist und nie aufhört zu gleiten, schneller zu laufen, wenn man mit der Maus darüber fährt, und beim Klicken zusammengedrückt wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, companion, driftSeconds, pressScale ### Drifting gradient wash https://fieldbook.lizardi.mx/de/components/drifting-gradient-wash Ein zweifarbiges Farbverlaufspanel, das über seinen Rahmen hinausgeht und langsam vor und zurück geschwenkt wird, sodass die Farbgrenze für immer über die Oberfläche wandert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: fromColor, toColor, cycleSeconds, angle, grain ### Drifting halo button https://fieldbook.lizardi.mx/de/components/drifting-halo-button Ein dunkler Knopf, umgeben von einem etwas größeren Halo-Rahmen, in dem ein helles Akzentband endlos um den Umfang wandert und die Platte beim Schweben aufhellt und anhebt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, haloWidth, driftSeconds ### Drifting Light Beams https://fieldbook.lizardi.mx/de/components/drifting-light-beams Hohe, geneigte Lichtbalken wandern mit unterschiedlicher Geschwindigkeit nach oben und verschmelzen zu einem sich langsam verändernden Dunst. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: beamCount, accent, intensity, speed, blur ### Drifting mesh tilt https://fieldbook.lizardi.mx/de/components/drifting-mesh-tilt-button Eine Pille, die in einer leichten dreidimensionalen Neigung gehalten wird, während sanfte Lichtblüten unter ihrer Oberfläche schweben und beim Schweben oder Fokussieren zwischen zwei Posen hin- und herschaukeln. Frameworks: react Access: member Public prop names: label, accent, tilt, driftSeconds, veil ### Drifting particle field https://fieldbook.lizardi.mx/de/components/drifting-particle-field Eine langsam taumelnde Wolke aus kleinen runden Punkten, von denen jeder auf seinem eigenen Weg treibt, wobei sich die gesamte Wolke vom Zeiger weg neigt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: color, count, spread, speed, baseSize, parallax ### Drifting starfield https://fieldbook.lizardi.mx/de/components/drifting-starfield Ein tiefes Sternenfeld mit kreuzförmigen Ausläufern, das blinkt, sich sehr langsam dreht und sich um den Zeiger teilt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: starColor, density, twinkle, driftSpeed, glow, repel ### Drill-Down Sunburst Chart https://fieldbook.lizardi.mx/de/components/drilldown-sunburst-chart Ein radiales Hierarchiediagramm aus verschachtelten Bogenringen, das beim Klicken in die untergeordneten Elemente eines Segments hineinzoomt, mit einer Brotkrümelspur und einer Hover-Grow-Hervorhebung. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, hoverPop, showBreadcrumb, accent ### Drive through button https://fieldbook.lizardi.mx/de/components/drive-through-button Eine kastenförmige Konsolentaste, deren Beschriftung nicht im Weg ist, sodass bei Aktivierung ein flaches Fahrzeug von links heranrollen, parken und am rechten Rand abschießen kann. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, speed, borderWidth, autoDemo ### Dropdown Action Menu https://fieldbook.lizardi.mx/de/components/dropdown-action-menu Ein durch eine Schaltfläche ausgelöstes Dropdown-Menü mit gruppierten Elementen, rechtsbündigen Tastenkombinationsbeschriftungen und einer Zeile im Umschaltstil, die nach den meisten Auswahlmöglichkeiten automatisch geschlossen wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, itemCount ### Dropdown Date Picker https://fieldbook.lizardi.mx/de/components/dropdown-date-picker Eine Einzelmonats-Datumsauswahl, deren Kopfzeile ein Monats-Dropdown-Menü und ein Jahres-Dropdown-Menü nebeneinander verwendet. Das Springen zu einem entfernten Datum erfordert also eine Auswahl statt vieler Pfeilklicks. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, month, year, showOutsideDays ### Dropdown Date Time Picker https://fieldbook.lizardi.mx/de/components/dropdown-date-time-picker Ein beschriftetes Datumsfeld, das einen Monatskalender in einem Dropdown-Menü öffnet, gepaart mit zwei einfachen Zeitfeldern darunter für eine Start- und Endzeit. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, startTime, endTime, dateLabel ### Dual Month Date Picker https://fieldbook.lizardi.mx/de/components/dual-month-date-picker Zwei benachbarte Monatsraster teilen sich ein ausgewähltes Datum, mit einem einzelnen Pfeilpaar, das beide Monate gemeinsam vor- oder zurückschaltet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, startMonth, startYear, gap ### Easing preview tile https://fieldbook.lizardi.mx/de/components/easing-preview-tile Eine Kachel, die unter jeder von Ihnen ausgewählten Beschleunigungskurve die gleiche Skalierung abspielt, wobei die Kurve daneben gezeichnet wird und eine Markierung synchron darauf verläuft. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: easing, duration, delay, mirror, accent ### Echo halo hover button https://fieldbook.lizardi.mx/de/components/echo-halo-hover-button Eine dunkle Pille, die bei Hover- oder Tastaturfokus abgestufte, verblassende Kopien ihrer selbst entlang der vier Diagonalen wirft, während die Pille selbst wächst. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, steps, spacing, growth ### Edge aware popover https://fieldbook.lizardi.mx/de/components/edge-aware-popover Ein Popover, das aus seinem Auslöser herausspringt und auf die gegenüberliegende Seite klappt oder sich verschiebt, wenn die von Ihnen gewünschte Seite über die Rahmenkante hinausläuft und beim Scrollen festklebt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, offset, avoidCollisions, width, accent ### Edge Collapse Button https://fieldbook.lizardi.mx/de/components/edge-collapse-button Ein flacher Knopf mit einer dicken farbigen Lippe an der Unterkante, die sich zu einem Haaransatz zusammenfaltet, wenn der Knopf darauf fällt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, lip, snapMs ### Edge Faded Plot Grid https://fieldbook.lizardi.mx/de/components/edge-faded-plot-grid Ein Handlungshintergrund aus gestrichelten Linien, die an den Rändern ausgeblendet werden, mit einer hervorgehobenen Grundlinie und einem daran entlang verlaufenden Lichtband. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, rows, columns, dashed, fadeEdges, sweep ### Edge lamp tracking bar https://fieldbook.lizardi.mx/de/components/edge-lamp-tracking-bar Eine breite durchscheinende Leiste mit zwei kleinen Lampen, die an der Ober- und Unterkante befestigt sind und sich beim Ausbreiten des Etiketts zu leuchtenden Kappen ausdehnen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, glowSpread, sheen, width ### Edge-slide panel https://fieldbook.lizardi.mx/de/components/edge-slide-panel Ein Einstellungsfeld, das bündig am Bildschirmrand anliegt, während die Seite dahinter abgedunkelt und unscharf wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: side, accent, title, size ### Edge slide sheet https://fieldbook.lizardi.mx/de/components/edge-slide-sheet Ein Bereich, der vom Bildschirmrand aus eingeschoben wird, um zusätzliche Inhalte wie einen Warenkorb oder Filter aufzunehmen, ohne die aktuelle Seite zu verlassen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, panelSize, closeOnOverlayClick ### Edge-tilt alert modal https://fieldbook.lizardi.mx/de/components/edge-tilt-alert-modal Ein Warnmodal für irreversible Aktionen, das sich mit einem federnden Überschwingen von der Unterkante anhebt und nach oben kippt und nur über seine eigenen Tasten schließt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: headline, continueLabel, accent, riseDistance ### Edge tracking glow card https://fieldbook.lizardi.mx/de/components/edge-tracking-glow-card Eine Karte, deren Umriss nur dort aufleuchtet, wo sich der Zeiger der Karte nähert. Sie wird heller, wenn Sie sich dem Rand nähern, und wird in der Nähe der Mitte dunkel. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, cornerRadius, glowRadius, edgeSensitivity, autoSweep ### Edge wipe invert https://fieldbook.lizardi.mx/de/components/edge-wipe-invert-button Eine umrandete Schaltfläche, deren Volltonfüllung von einer Kante nach innen verläuft und die Beschriftung umdreht, wenn sie darunter verläuft. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, direction, durationMs, radius ### Editable date field https://fieldbook.lizardi.mx/de/components/editable-date-field Ein Textfeld für ein Datum, das frei eingegeben werden kann und auch über ein kleines Kalender-Popover ausgefüllt werden kann, das über eine Schaltfläche mit einem nachgestellten Symbol geöffnet wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, value ### Elastic toggle switch https://fieldbook.lizardi.mx/de/components/elastic-toggle-switch Ein Pillenschalter, dessen runder Daumen sich beim Drücken zu einem Klecks zusammendrückt und mit einem sanften Sprung wieder in die runde Form zurückspringt, wobei er zwischen einem neutralen Aus-Zustand und einer festen Akzentfüllung wechselt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, on, accent, size ### Elastic tug slider https://fieldbook.lizardi.mx/de/components/elastic-tug-slider Ein Schieber, der sich wie ein Gummiband dehnt, wenn er über seine Enden gezogen wird, und den Track nach dem Loslassen mit einem Sprung zurückschnappt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: value, stepped, accent ### Elastic weight headline https://fieldbook.lizardi.mx/de/components/elastic-weight-headline Eine einzelne Zeile aus riesigen Großbuchstaben, deren Gewicht, Breite und Neigung um eine verzögerte, entspannte Cursorposition anschwellen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: word, textColor, minFontSize, widthReacts, weightReacts, italicReacts ### Elevated chip button https://fieldbook.lizardi.mx/de/components/elevated-chip-button Ein blasser, abgerundeter Chip, der auf gestapelten weichen Schatten ruht, der sich beim Schweben zum Akzent hin verfärbt und beim Drücken auf einen tieferen Schatten mit einer Akzentkontur absinkt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, elevation, radius, paddingX ### Elevation ladder fill button https://fieldbook.lizardi.mx/de/components/elevation-ladder-fill-button Eine Kapsel, die zwischen Ruhe, Schweben und Drücken drei Höhenstufen erklimmt, während eine sanfte Akzentwaschung über ihre Vorderseite verläuft. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, hoverLift, pressScale, feather, duration ### Emboss swap button https://fieldbook.lizardi.mx/de/components/emboss-swap-button Ein kleiner gesättigter Chip, der beim Schweben seinen flachen Schlagschatten gegen ein vierfach geformtes Relief eintauscht, sodass die Oberfläche aus der Seite herausgedrückt zu sein scheint. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, radius, depth, size ### Embossed press button https://fieldbook.lizardi.mx/de/components/embossed-press-button Eine solide, abgerundete Taste, die im Ruhezustand wie eine erhabene physische Taste aussieht und sich beim Schweben, Fokussieren und Drücken in eine versenkte, in die Oberfläche gedrückte Optik verwandelt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, radius, relief, size ### Empty State Panel https://fieldbook.lizardi.mx/de/components/empty-state-panel Ein zentrierter Bereich für eine leere Liste oder Ansicht mit einem aufgefächerten Symbolstapel, einer Überschrift, einer Hilfslinie und einer primären Aktionsschaltfläche. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: title, description, buttonLabel, icon ### Endless Feed Loader https://fieldbook.lizardi.mx/de/components/endless-feed-loader Eine Liste im Nachrichtenstil, die immer wieder neue Schlagzeilen hinzufügt, während unten ein kleiner Spinner ins Bild scrollt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: batchSize, loadDelayMs, accentColor, autoLoad ### Engraved label pie https://fieldbook.lizardi.mx/de/components/engraved-label-pie Ein solides Kreisdiagramm, das jeden Kategorienamen in seinem eigenen Segment in einer invertierten Farbe einfügt, sodass die Aufschlüsselung ohne äußere Beschriftungen oder Führungslinien angezeigt wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, hueRange, labelInset, gap, showReadout ### Enter view reveal https://fieldbook.lizardi.mx/de/components/enter-view-reveal Blöcke, die in dem Moment, in dem sie ins Blickfeld kommen, gleiten und verblassen, und sich selbst zurücksetzen, sobald sie es verlassen, sodass die Enthüllung bei jedem Durchgang erneut abgespielt wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, distance, direction, duration, once ### Entrance timing playground https://fieldbook.lizardi.mx/de/components/entrance-timing-playground Eine Disc spielt auf Abruf den gleichen Eingangszug ab, sodass Sie genau spüren können, welchen Beitrag Dauer, Verzögerung und Entspannungskurve jeweils leisten. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: duration, delay, easing, accent, loop ### Expanding card navbar https://fieldbook.lizardi.mx/de/components/expanding-card-navbar Eine schlanke, abgerundete Navigationsleiste, deren Hamburger-Schalter sie nach unten in eine Reihe farbiger Linkkarten erweitert, wobei die Links jeder Karte gestaffelt ins Blickfeld geraten. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cardCount, accentColor, ease ### Expanding chip back button https://fieldbook.lizardi.mx/de/components/expanding-chip-back-button Ein heller Pillenknopf, dessen Akzentchip sich beim Schweben über die gesamte Breite erstreckt und seinen Pfeil zur anderen Seite trägt, während das Etikett an Ort und Stelle bleibt und abgedeckt wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, width, duration, direction ### Expanding disc mute toggle https://fieldbook.lizardi.mx/de/components/expanding-disc-mute-toggle Ein rundes Symbol zum Umschalten, bei dem eine dunkle Scheibe von der Mitte aus wächst, das pastellfarbene Gesicht verschluckt und die Glyphe auf dem Weg darunter ins Helle verwandelt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, accent, restTint, duration, glyph, startOn ### Expanding icon pill https://fieldbook.lizardi.mx/de/components/expanding-icon-pill Eine runde Symbolschaltfläche, die beim Schweben oder Fokussieren zu einer beschrifteten Pille heranwächst und deren Glyphe eine volle Umdrehung macht, wenn die Beschriftung hineingleitet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, collapsed, expanded, spin ### Expanding icon pill https://fieldbook.lizardi.mx/de/components/expanding-icon-pill-2 Eine runde Symbolschaltfläche, die sich beim Schweben in eine beschriftete Pille ausdehnt und bei Eintreffen einer Akzentfüllung ihre Glyphe gegen ein Wort eintauscht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, collapsed, expanded, cast ### Expanding icon toolbar https://fieldbook.lizardi.mx/de/components/expanding-icon-toolbar Eine Reihe kreisförmiger Symbolschaltflächen, bei denen sich das ausgewählte Werkzeug zu einem gefüllten Feld mit seiner Beschriftung erweitert, sowie eine Glocke, die eine Benachrichtigungsliste öffnet, und ein zweistufiges Sperrfeld. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultTool, showLockToggle ### Expanding label toolbar https://fieldbook.lizardi.mx/de/components/expanding-label-toolbar Eine Reihe von Symbol-Werkzeugschaltflächen, bei denen das ausgewählte Symbol erweitert wird, um seine Beschriftung anzuzeigen, mit einer schwebenden Bestätigungsblase und einem separaten Sperrschalter. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: defaultSelected, accent, lockedByDefault ### Expanding panel gallery https://fieldbook.lizardi.mx/de/components/expanding-panel-gallery Eine Reihe von Abdeckfeldern, bei denen durch Bewegen des Mauszeigers, Klicken oder Drücken der Pfeiltaste auf eines dieses auf die volle Breite erweitert wird, während der Rest in Splitter komprimiert wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: panelCount, expandRatio, trigger, accentColor ### Expanding ring loader https://fieldbook.lizardi.mx/de/components/expanding-ring-loader Dünne Ringe, die aus einem einzigen Punkt herauswachsen und mit der Weitung verblassen, werden nacheinander freigegeben, damit der Puls nie aufhört. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: ringCount, size, strokeWidth, cycleSeconds, accent ### Experience Shelf https://fieldbook.lizardi.mx/de/components/experience-shelf Ein horizontal scrollendes Regal mit Fotokarten, jede mit einer Schaltfläche zum Speichern, einem Abzeichen, einer Bewertung und einem Preis, das sich mit den Pfeiltasten oder einem Wischen reibungslos scrollen lässt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: itemCount, accentColor, currency, showRatings ### Exposure dial slider https://fieldbook.lizardi.mx/de/components/exposure-dial-slider Eine Fotovorschau mit einer kreisförmigen Belichtungsanzeige in der Ecke über einem verschiebbaren Strichmaßstab, der den Belichtungswert in EV festlegt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: exposure, accentColor, tone ### Extruded layer text https://fieldbook.lizardi.mx/de/components/extruded-layer-text Ein Wort, das so viele gestapelte Farbschichten hinter seinem Gesicht darstellt, dass ein extrudierter 3D-Block entsteht, der sich zum Zeiger hin neigt und im Leerlauf driftet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, depth, tilt, faceColor, depthColor ### Extruded tilt button https://fieldbook.lizardi.mx/de/components/extruded-tilt-button Ein schwerer, in die Perspektive geneigter Anzeigeknopf, dessen hohle Buchstaben durch zwei harte Versätze extrudiert werden, die die Seiten umdrehen, wenn die Platte im Schwebezustand schwingt, und beim Drücken flach werden. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, tiltDegrees, extrusion, sweep ### Fading edge scroll panel https://fieldbook.lizardi.mx/de/components/fading-edge-scroll-panel Ein Scroll-Bedienfeld, das die native Leiste verbirgt, einen schlanken Daumen nur dann schweben lässt, wenn Sie ihn verwenden, und den Inhalt an der Kante ausblendet, die noch zu erreichen ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: panelHeight, itemCount, fadeEdges, alwaysShowBar, thumbColor ### Fanned wave threads https://fieldbook.lizardi.mx/de/components/fanned-wave-threads Ein Bündel haarfeiner Fäden, die am linken Rand flach festgesteckt sind, sich nach rechts ausbreiten und auf einem langsamen Rauschfeld wehen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: color, amplitude, spread, lineCount, speed, interactive ### Fanning event markers https://fieldbook.lizardi.mx/de/components/fanning-event-markers Runde Veranstaltungsabzeichen, die über einem Grundstück mit Hilfslinien befestigt sind; Die gebündelten Exemplare werden zu einem gezählten Abzeichen gestapelt, das die Fans öffnen, wenn sie mit der Maus darüber fahren. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, size, markers, maxFanned, showLines ### Fanning Spec Stack https://fieldbook.lizardi.mx/de/components/fanning-spec-stack Ein Stapel von Produktkarten, der sich bei Bedarf zu einem Fächer ausbreitet, wobei jede Karte einen Schlag nach der vorherigen an ihren Platz springt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: count, spread, tilt, accent ### FAQ Accordion https://fieldbook.lizardi.mx/de/components/faq-accordion-panels Eine vertikale Liste mit Fragenüberschriften, bei der beim Öffnen eines Bereichs die Antwort angezeigt wird und der davor geöffnete Bereich geschlossen wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: defaultOpen, accentColor, transitionMs, dividers ### Field with status icon https://fieldbook.lizardi.mx/de/components/field-with-status-icon Eine beschriftete Eingabe, an deren hinterer Kante ein kleines Häkchen- oder Warnsymbol angezeigt wird, das ausgeblendet wird, sobald sich die Gültigkeit des Felds ändert, ohne dass sich das Layout ändert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, value, state, required ### File attachment chip https://fieldbook.lizardi.mx/de/components/file-attachment-chip Eine kompakte Karte für eine angehängte Datei mit einem Typsymbol oder einer Miniaturansicht, ihrem Namen und ihrer Größe sowie einem Upload-, Verarbeitungs-, Fehler- oder Fertigstatus. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: state, orientation, accent ### Fill progress loading text https://fieldbook.lizardi.mx/de/components/fill-progress-loading-text Ein Ladeetikett ist nur ein schwacher Umriss seiner selbst, während eine einfarbige Kopie es von links ausfüllt, wie ein Fortschrittsbalken in Form des Wortes, der sich während der Arbeit hin und her bewegt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, accent, cycleSeconds, baseOpacity ### Fill sweep loading text https://fieldbook.lizardi.mx/de/components/fill-sweep-loading-text Ein Ladeetikett, dessen schwache Umrisse sich unter einer vollständig farbigen Kopie befinden, die von links hereingestrichen wird, die volle Breite erreicht und wieder herausläuft und sich so lange wiederholt, wie etwas geladen wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, cycleSeconds ### Film grain overlay https://fieldbook.lizardi.mx/de/components/film-grain-overlay Eine generierte fraktale Körnungsschicht, die über jedem Panel liegt und von feinem Staub bis zu groben Zähnen abgestimmt ist, ohne ein einziges Bild zu laden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: grain, detail, contrast, opacity, animate ### Filterable action list https://fieldbook.lizardi.mx/de/components/filterable-action-list Ein Suchfeld gepaart mit einer live gefilterten Liste von Aktionen, die unter Labels gruppiert sind, wobei die erste Übereinstimmung hervorgehoben wird und ein leerer Status angezeigt wird, wenn nichts zur Suchanfrage passt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: placeholder, accentColor, itemCount ### Filterable record table https://fieldbook.lizardi.mx/de/components/filterable-record-table Eine Datensatztabelle mit einem Live-Textfilter, farbigen Statuspillen und einer rechtsbündigen Währungsspalte, die beim Sortieren lesbar bleibt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, sortable, showFilter, density ### Filtered suggestion field https://fieldbook.lizardi.mx/de/components/filtered-suggestion-field Ein Textfeld, das während der Eingabe eine Liste mit Vorschlägen filtert und die Übereinstimmungen unten in einem Dropdown-Menü mit Tastaturnavigation und einer Schaltfläche zum Löschen anzeigt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, accentColor, maxVisible ### Firework burst canvas https://fieldbook.lizardi.mx/de/components/firework-burst-canvas Die Granaten werden von der Unterkante abgefeuert, fliegen in einem Bogen nach oben und zerplatzen dann in Funken, die durch die Schwerkraft abfallen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: density, accent, sparkCount, shellSpeed, gravity ### Flaming iris eye https://fieldbook.lizardi.mx/de/components/flaming-iris-eye Eine brennende Iris aus strahlenden Filamenten um eine schmale Schlitzpupille, die sich dreht, um den Cursor im Blickfeld zu halten. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, pupilSize, irisWidth, flameSpeed, glow, followStrength ### Flat to flow button https://fieldbook.lizardi.mx/de/components/flat-to-flow-button Ein flacher, solider Knopf, der sich in ein breites zweifarbiges Band verwandelt, das endlos über die Vorderseite läuft, wenn man darüber schwebt oder fokussiert ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, cycleSeconds, bandWidth, reverse, radius ### Flickering glyph grid https://fieldbook.lizardi.mx/de/components/flickering-glyph-grid Ein dichtes Raster aus monospaced Zeichen, in denen eine zufällige Handvoll Buchstaben und Farben bei jedem Tick vertauscht und dabei zwischen den Farbtönen wechselt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, baseColor, glitchSpeed, smooth, vignette, characters ### Flickering square mesh https://fieldbook.lizardi.mx/de/components/flickering-square-mesh Ein Leinwandnetz aus kleinen Quadraten, in dem zufällige Zellen in jedem Bild eine neue Helligkeit annehmen und so eine unruhige Statik erzeugen, die sich nie wiederholt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: squareSize, gap, flickerChance, maxOpacity, accentColor ### Flight path confirm button https://fieldbook.lizardi.mx/de/components/flight-path-confirm-button Ein Buchungsknopf, der ein kleines Flugzeug in einer Runde um sein Gesicht fliegt, während drei Punkte pulsieren, dann grün wird und die Buchung als bestätigt meldet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, doneLabel, accent, successColor, duration ### Flip face button https://fieldbook.lizardi.mx/de/components/flip-face-button Ein Knopf mit zwei Flächen, die bei einer dreidimensionalen Drehung die eine gegen die andere tauschen und sich von der Stelle, an der sie sich befindet, umkehren, wenn der Zeiger weggeht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: axis, duration, accentColor, frontLabel, backLabel ### Flip panel headline reveal https://fieldbook.lizardi.mx/de/components/flip-panel-headline-reveal Eine Schlagzeile, deren Zeichen hinter kleinen, aufklappbaren Tafeln sitzen, die nacheinander heruntergeklappt werden, wie bei einer Ankunftstafel, um die darunter liegenden Buchstaben freizugeben. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, staggerMs, flipMs, accent ### Flip reveal card https://fieldbook.lizardi.mx/de/components/flip-reveal-card Eine große Kurskarte, die sich beim Schweben umdreht, um ihre Detailliste anzuzeigen, wobei der Heiligenschein auf der Vorderseite pulsiert, während sie ruht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: title, flipOnHover, duration, accent ### Flip Side Hint Tooltip https://fieldbook.lizardi.mx/de/components/flip-side-hint-tooltip Eine Hinweisblase, die beim Schweben oder im Tastaturfokus erscheint und sich automatisch auf die entsprechende Seite dreht, sodass sie in der Nähe des Bildschirmrands vollständig sichtbar bleibt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: side, openDelay, accentColor ### Floating download pill https://fieldbook.lizardi.mx/de/components/floating-download-pill Eine vollständig abgerundete Pille, die über der Seite zu schweben scheint und sich beim Bewegen und Drücken näher daran bewegt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, lift, showGlyph ### Floating label input https://fieldbook.lizardi.mx/de/components/floating-label-input Ein Textfeld, dessen Beschriftung innerhalb des Felds liegt und beim Fokussieren oder sobald das Feld einen Wert hat, an den oberen Rand ansteigt, mit fokussiertem, gültigem und ungültigem Aussehen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, invalid, accent ### Floating text trail https://fieldbook.lizardi.mx/de/components/floating-text-trail Ein dunkles Feld, auf dem durch Bewegen des Zeigers schwebende Kopien eines Wortes entlang des Bewegungspfads fallen gelassen werden, die jeweils kurz auf und ab wackeln, bevor sie verschwinden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, spacing, followDirection, drift, maxTrail ### Flow Area Chart https://fieldbook.lizardi.mx/de/components/flow-area-chart Ein Zeitreihen-Flächendiagramm mit einer Verlaufsfüllung, die sich beim Laden einzieht und beim Bewegen des Mauszeigers ein Fadenkreuz mit einem Wert-Tooltip anzeigt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, pointCount, showGrid, animationSeconds ### Flow Sankey Diagram https://fieldbook.lizardi.mx/de/components/flow-sankey-diagram Ein Knoten-und-Band-Flussdiagramm, bei dem die Banddicke das Volumen anzeigt, das sich zwischen den Phasen bewegt, mit einer nachgezeichneten Laibung gezeichnet wird und beim Schweben verbundene Pfade hervorgehoben werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: nodeWidth, nodePadding, showLabels, useGradientLinks, accent ### Flowing gradient headline https://fieldbook.lizardi.mx/de/components/flowing-gradient-headline Eine Überschrift, deren Buchstaben mit einem beweglichen zweifarbigen Farbverlauf gefüllt sind, sodass ein helles Band endlos durch die Wörter gleitet, mit optionalem sanftem Blütenhintergrund dahinter. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, accent, speed, fontSize, bloom ### Flowing gradient text https://fieldbook.lizardi.mx/de/components/flowing-gradient-text Ein mehrfarbiger Farbverlauf verläuft kontinuierlich über die Füllung einer Überschrift, optional umrahmt von einem passenden Farbverlaufsrahmen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, speed, showBorder, colorFrom, colorTo ### Flowing line currents https://fieldbook.lizardi.mx/de/components/flowing-line-currents Dutzende langer, geschwungener Striche streichen in drei Tiefenbändern diagonal über den Rahmen und flechten und wippen wie eine langsame Strömung. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: lineCount, accent, amplitude, speed, headline ### Fluid Splash https://fieldbook.lizardi.mx/de/components/fluid-splash-cursor Beim Ziehen über das Bedienfeld wird die Tinte durch eine flüssige Simulation gedrückt, sodass die Farbe hinter dem Zeiger aufsteigt, sich kräuselt und sich langsam auflöst. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, splatRadius, splatForce, dyeFade, curl, shading ### Flying send button https://fieldbook.lizardi.mx/de/components/flying-send-button Eine Sendeschaltfläche, deren Papierebenen-Glyphe sich neigt, bewegt und über das Gesicht fliegt, während die Beschriftung dahinter weggleitet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tilt, bob ### Flyout Menu Highlight https://fieldbook.lizardi.mx/de/components/flyout-menu-highlight Ein Dropdown-Menü, dessen Elemente sich unter einem Hervorhebungsfeld befinden, das von einer schwebenden oder fokussierten Zeile zur nächsten gleitet, mit einem verschachtelten Untermenü, das zur Seite hinausfliegt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: triggerLabel, side, accent ### Focus Guard Form https://fieldbook.lizardi.mx/de/components/focus-guard-form Ein Formular, das bei einer fehlgeschlagenen Übermittlung die Übermittlung abbricht, den Tastaturfokus direkt auf das erste ungültige Feld verschiebt und das Problem für Benutzer von Bildschirmleseprogrammen ankündigt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: submitLabel, accentColor, requireAll ### Focus halo button https://fieldbook.lizardi.mx/de/components/focus-halo-button Eine durchgehende Schaltfläche, die sich beim Bewegen des Mauszeigers in einen Umriss umwandelt und in dem Moment, in dem sie den Tastaturfokus erhält, zwei übereinanderliegende durchsichtige Ringe wachsen lässt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, radius, ringWidth, invert ### Focus in reveal https://fieldbook.lizardi.mx/de/components/focus-in-reveal Eine Enthüllung, die den Inhalt unscharf macht und ihn beim Erscheinen schärfer erscheinen lässt, mit einer optionalen Verzögerung pro Element für einen Zeilenstapel. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: startBlur, endBlur, delay, stagger, accent ### Focus Lens https://fieldbook.lizardi.mx/de/components/focus-lens-outline Eine umrissene Form, die überall weich und unscharf bleibt, außer in einem kleinen Kreis, der dem Zeiger folgt und dort scharf einrastet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: shape, lensSize, lensSoftness, strokeWeight, accent ### Focus ring text input https://fieldbook.lizardi.mx/de/components/focus-ring-text-input Ein einzeiliges Textfeld mit einem gedämpften Platzhalter und einem durchgehenden Akzentring, der nur bei Fokus angezeigt wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, accentColor, disabled ### Focus scroll list https://fieldbook.lizardi.mx/de/components/focus-scroll-list Eine scrollbare Warteschlange, deren Zeilen in voller Größe und opacity erscheinen, wenn sie die Mitte der Ansicht erreichen, mit Hover und Tastaturauswahl. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: itemCount, showGradients, enableArrowNavigation, accentColor ### Focus-Trapped Modal Kit https://fieldbook.lizardi.mx/de/components/focus-trapped-modal-kit Ein schlichtes modales Fundament, bei dem es vor allem um ein diszipliniertes Tastaturverhalten geht: Es fängt den Fokus beim Öffnen ein und stellt ihn beim Schließen präzise wieder her, verpackt in einer nach innen klappbaren Vorderseite. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: from, trapFocus, accent, label ### Foil frame button https://fieldbook.lizardi.mx/de/components/foil-frame-button Ein Upgrade-Knopf, der als dunkle Platte in einem dünnen Metallrahmen gebaut ist, wobei der diagonale Glanz des Rahmens beim Schweben in die gegenüberliegende Ecke gleitet, während sich die Platte anhebt, heller wird und einen akzentuierten Schatten erhält. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, showGlyph, frameWidth, hoverScale ### Follow count swipe https://fieldbook.lizardi.mx/de/components/follow-count-swipe-button Ein umrissenes Follow-Plugin, dessen rundes Akzentabzeichen beim Schweben an das andere Ende gleitet und ein Band malt, das die Follower-Anzahl anzeigt; Durch Klicken wird die Folge mit einem Stempel festgeschrieben und die Zählung erhöht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, followedLabel, count, accent, slideMs ### Follow latch chip https://fieldbook.lizardi.mx/de/components/follow-latch-chip Ein Follow-Chip, der beim Schweben eine Vorschau seines gefüllten Zustands anzeigt und beim Klicken dort einrastet. Wenn er erneut mit der Maus darüber bewegt wird, wechselt er zu einer Unfollow-Eingabeaufforderung in einem Warnton. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, warning, label, following, duration ### Forecast tail line https://fieldbook.lizardi.mx/de/components/forecast-tail-line Eine gestrichelte Fortsetzung, die eine Serie über ihren letzten wirklichen Punkt hinaus bis zum Horizont führt, sich ausdehnt und auf einer hohlen Markierung landet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, horizon, curveKind, dashed, fadeOut, showEndMarker ### Control Bench https://fieldbook.lizardi.mx/de/components/form-control-bench Eine seitenweite Datenbank mit funktionierenden Formularteilen nebeneinander: ein Zahlungsfeldsatz, Inline-Eingabe-Add-ons, ein Eingabeaufforderungs-Composer, gruppierte Schaltflächen und ein ruhiger leerer Zustand. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, columns, density, showComposer, showEmptyState ### Format toggle button https://fieldbook.lizardi.mx/de/components/format-toggle-button Eine Symbolschaltfläche, die den Ein- oder Ausschaltzustand beibehält und beim Drücken eine abgerundete Platte hinter ihrem Glyphen einblendet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: variant, size, accent, startPressed, showCaption ### Four edge wipe icon button https://fieldbook.lizardi.mx/de/components/four-edge-wipe-icon-button Eine quadratische Symbolschaltfläche, deren Glyphe kleiner wird, während vier geneigte Felder von jeder Kante nach innen gleiten und die Kachel mit einer Akzentfarbe überfluten. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, glyph, size, duration, borderWidth ### Frame draw button https://fieldbook.lizardi.mx/de/components/frame-draw-button Ein gefüllter Knopf, der beim Schweben seine Füllung entleert, während vier dünne Balken aus gegenüberliegenden Ecken herausragen, um einen vollständigen Rahmen zu zeichnen, und beim Verlassen kehrt dann alles zurück. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, barWidth, speed, radius ### Friendly Date Range Picker https://fieldbook.lizardi.mx/de/components/friendly-date-range-picker Eine Pillenschaltfläche, die eine Datumsspanne in Klartext vorliest und einen Dropdown-Kalender öffnet, in dem Sie einen Start- und einen Endtag auswählen können. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, rangeText ### Funnel vortex backdrop https://fieldbook.lizardi.mx/de/components/funnel-vortex-backdrop Ein Drahtgitter-Trichter aus schrumpfenden Ringen und radialen Speichen, der sich in eine brennende Kehle ergießt, aus dem wieder Flecken aufsteigen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rings, spokes, accent, meshColor, specks ### Fusing blob fill button https://fieldbook.lizardi.mx/de/components/fusing-blob-fill-button Ein dicker, umrandeter Knopf, der sich beim Schweben füllt, während Flüssigkeitstropfen von unten aufsteigen und zu einer wackeligen Oberfläche verschmelzen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, blobCount, mergeStrength, riseSeconds ### Future-Only Date Picker https://fieldbook.lizardi.mx/de/components/future-only-date-picker Eine einzelne Datumsauswahl, bei der jeder Tag vor einem festen Stichtag ausgegraut und nicht anklickbar ist, sodass immer nur dieses oder ein späteres Datum ausgewählt werden kann. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, cutoffDay, startMonth, startYear ### Fuzzy static text https://fieldbook.lizardi.mx/de/components/fuzzy-static-text Ein auf Leinwand gezeichnetes und in zitternden Scanlinien neu gemaltes Wort, das wie ein Fernsehrauschen summt und sich beim Schweben oder Drücken noch stärker verzerrt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, baseIntensity, hoverIntensity, color ### Gap stretch arrow button https://fieldbook.lizardi.mx/de/components/gap-stretch-arrow-button Eine Pille mit fester Breite, deren nachlaufender Pfeil beim Schweben zum äußersten Rand wandert und die Lücke nach einem stationären Etikett erweitert, wobei eine schwache Spurkopie einem Schlag dahinter folgt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, width, travel, trail ### Ghost echo lift button https://fieldbook.lizardi.mx/de/components/ghost-echo-lift-button Eine Pille, die sich beim Schweben anhebt, während eine Geisterkopie ihrer selbst dahinter anschwillt und sich auflöst. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, liftDistance, echoScale, echoSeconds ### Git status file tree https://fieldbook.lizardi.mx/de/components/git-status-file-tree Ein verschachtelter Ordner- und Dateibrowser, in dem jede geänderte Datei einen farbigen Git-Statusbuchstaben trägt und Ordner beim Öffnen die Symbolform wechseln. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rowHeight, showStatusColors, expandFirstFolder, accent ### Glare Pass Text https://fieldbook.lizardi.mx/de/components/glare-pass-text Gedämpfter Etikettentext, der in regelmäßigen Abständen einen schmalen Lichtstreifen einfängt, der darüber gleitet, wie ein grelles Licht, das von Glas reflektiert wird, und dann verstummt, bevor er sich wiederholt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, shimmerWidth, showIcon ### Glass Block Bars https://fieldbook.lizardi.mx/de/components/glass-block-bars Ein Balkendiagramm, dargestellt als glänzende 3D-Glasblöcke mit perspektivischen Seiten- und Oberseiten und einem langsamen Lichtstrahl, der den höchsten Balken hinauf pulsiert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, barCount, activeIndex, pulseEnabled ### Glass tube element tile https://fieldbook.lizardi.mx/de/components/glass-tube-element-tile Eine quadratische, auswählbare Kachel, die wie ein beleuchtetes Glasrohr eingerahmt ist und in der sich ein Elementsymbol befindet, das beim Schweben aufleuchtet und bei Auswahl einrastet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: symbol, name, number, accent, glow, lit ### Glide highlight explorer https://fieldbook.lizardi.mx/de/components/glide-highlight-explorer Ein Ordner- und Dateibaum, in dem beim Schweben oder Fokussieren eine einzelne leuchtende Hervorhebungsleiste von Zeile zu Zeile gleitet, anstatt dass jede Zeile einzeln aufleuchtet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: highlightColor, rowHeight, defaultExpandedDepth, showStatusDots ### Glide swap button https://fieldbook.lizardi.mx/de/components/glide-swap-button Eine Schaltfläche mit fester Breite, deren Beschriftung vom rechten Rand abrutscht, während die Glyphe in die Mitte gleitet. Alles sitzt auf einer harten farbigen Leiste, auf die die Schaltfläche beim Drücken fällt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, glyph, width, ledge ### Glitch slice button https://fieldbook.lizardi.mx/de/components/glitch-slice-button Ein Geisterknopf, dessen Beschriftung in horizontale Scheiben zerreißt, die mit geteilten Farbsäumen auseinanderspringen, während ein dünner Rahmen darum herum aufleuchtet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, runMs, slices, autoPlay ### Edge light pill https://fieldbook.lizardi.mx/de/components/glossy-edge-light-pill Eine glänzende Pille, die durch einen verschwommenen Balken am oberen Rand und eine Blüte unter ihrem Fuß beleuchtet wird, die beim Schweben anschwillt und heller wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, glow, radius, paddingX, topLight ### Glow halo button https://fieldbook.lizardi.mx/de/components/glow-halo-button Ein Pillenknopf mit einem Duplikat seiner selbst, das dahinter verschwommen ist, so dass schwebend ein heller, farbiger Heiligenschein erblüht, während die Füllung langsam dahinschwebt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, companion, glow, driftSeconds ### Glyph Marker Line https://fieldbook.lizardi.mx/de/components/glyph-marker-line Eine monatliche Trendlinie, deren Datenpunkte gezeichnete Glyphen und keine einfachen Punkte sind, die jeweils aus der Linie ausgestanzt sind, sodass der Strich scheinbar dahinter verläuft. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, markerSize, strokeWidth, showGrid, showAxis ### Glyph Static Backdrop https://fieldbook.lizardi.mx/de/components/glyph-static-backdrop Eine mit kleinen Monospace-Symbolen gefüllte Leinwand flackert leise, eine Handvoll mutiert bei jedem Tick zu einer neuen zufälligen Glyphe, die zum unteren Rand hin verblasst und hinter dem Vordergrundinhalt verschwindet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cellSize, mutationRate, fadeBottom, accentColor ### Gooey blob field https://fieldbook.lizardi.mx/de/components/gooey-blob-field Ein Feld aus weichen Klecksen, die gesäte Pfade umkreisen und bei Annäherung miteinander verschmelzen, mit einem zusätzlichen Klecks, der dem Zeiger folgt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: ballCount, speed, spread, accent, pointerColor, followPointer ### Gooey blob trail https://fieldbook.lizardi.mx/de/components/gooey-blob-trail Eine Kette von Formen verfolgt den Zeiger und verschmilzt zu einem flüssigen Klumpen, der sich bei der Bewegung ausdehnt und sich sammelt, wenn er anhält. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: trailCount, size, lag, shape, merge, fillColor ### Gooey Particle Nav https://fieldbook.lizardi.mx/de/components/gooey-particle-nav Eine horizontale Navigationsliste, in der durch Auswahl eines Elements eine verschwommene klebrige Pille an die neue Position gebracht wird, während eine Explosion kleiner Partikel von ihr nach außen verstreut wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: itemCount, particleCount, animationTime ### Gradient Area Chart https://fieldbook.lizardi.mx/de/components/gradient-fill-area-chart Zwei gestapelte monatliche Serien, die als glatte Bereiche gezeichnet sind, deren Füllungen von einem kräftigen Farbton am oberen Rand nach unten zu einem nahezu klaren Farbton an der Grundlinie verblassen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, secondColor, gradientStrength, showGrid, animate ### Gradient flip uppercase button https://fieldbook.lizardi.mx/de/components/gradient-flip-uppercase-button Eine Schaltfläche in Großbuchstaben, gefüllt mit einer zweifarbigen diagonalen Rampe, die beim Schweben Ende für Ende vertauscht und dabei den getönten Schlagschatten mitnimmt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tint, angle, shadow ### Gradient Rim Button https://fieldbook.lizardi.mx/de/components/gradient-rim-button Eine Schaltfläche, die aus zwei übereinander liegenden Ebenen besteht, sodass ein zwei Pixel schattierter Rand ein etwas dunkleres Gesicht mit einem Gamepad-Glyphen umrahmt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, rim, restOpacity ### Ring reveal button https://fieldbook.lizardi.mx/de/components/gradient-ring-reveal-button Eine übergroße Pille mit einem dicken Ringrand mit Farbverlauf, deren dunkle Innenseite beim Schweben klar wird, um die vollständige Farbverwaschung freizulegen, und beim Verlassen des Zeigers wieder ausgeblendet wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, ringWidth, paddingY, revealOnHover ### Gradient shift text https://fieldbook.lizardi.mx/de/components/gradient-shift-text Eine abgerundete Pille, deren Text mit einem zweifarbigen Farbverlauf gefüllt ist, der kontinuierlich seitwärts durch die Buchstaben verläuft. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, speed, colorFrom, colorTo ### Gradient slat spotlight https://fieldbook.lizardi.mx/de/components/gradient-slat-spotlight Vertikale Lamellen verbergen einen Farbverlauf, bis ein sanfter Scheinwerfer den Zeiger über sie führt und jede Lamelle beleuchtet, die er berührt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, blindCount, spotlightRadius, softness, angle, grain ### Gradient swap button https://fieldbook.lizardi.mx/de/components/gradient-swap-button Eine abgerundete Schaltfläche, deren diagonale Schattierung beim Schweben ihre beiden Stopps wechselt, sodass die helle Ecke über das Gesicht wandert. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, angle, radius ### Gradient sweep heading https://fieldbook.lizardi.mx/de/components/gradient-sweep-heading Eine große Überschrift, deren Füllung aus einem sich bewegenden Farbverlaufsband besteht, das kontinuierlich von einem Rand zum anderen verläuft und dem Text einen glänzenden, sich ständig verändernden Glanz verleiht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: headline, speed, accentColor ### Gradient tilt pill https://fieldbook.lizardi.mx/de/components/gradient-tilt-pill Eine vollständig abgerundete Pille, deren zweifarbige Farbverlaufsfüllung beim Schweben ihren Winkel ändert und beim Drücken dunkler in Richtung des Farbtons kippt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tiltDegrees, size ### Grain Flicker https://fieldbook.lizardi.mx/de/components/grain-flicker-layer Eine Körnungsebene, die sich alle paar Bilder neu zeichnet, sodass flache Hintergründe das unruhige Flackern eines laufenden Projektors anstelle einer festen Textur erhalten. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: opacity, grainScale, refreshInterval, animate ### Grain wash https://fieldbook.lizardi.mx/de/components/grain-wash Zwei Farbpools gehen über das Bild hinweg ineinander über, während eine langsame Verzerrung ihren Rand in Bewegung hält, alles unter einer starken Filmkörnung. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: colorA, colorB, speed, warp, grain, followPointer ### Grained rim button https://fieldbook.lizardi.mx/de/components/grained-rim-button Ein dunkel bearbeiteter Knopf mit einem Rand aus gebürstetem Metall, einer leicht körnigen Oberfläche und einer hohlen Spielmarkierung, die sich beim Schweben und Fokussieren vertieft. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, grain, rim ### Graph paper grid https://fieldbook.lizardi.mx/de/components/graph-paper-grid Ein sich wiederholendes Gitter aus Haarlinien, das sich über den Behälter erstreckt und zu den Rändern hin verblasst, mit einer kleinen Ansammlung von Zellen, die zu einer Akzentfarbe aufleuchten und wieder abfließen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cellSize, lineOpacity, dashed, highlightCount, accentColor ### Graphite Slab CTA https://fieldbook.lizardi.mx/de/components/graphite-slab-cta Ein dunkler Plattenknopf mit fester Breite und einer dezenten Graphitrampe, die sich beim Schweben anhebt und an der Unterkante eine dünne Akzentlinie trägt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, width, lift, radius, showRule ### Gravity dust field https://fieldbook.lizardi.mx/de/components/gravity-dust-field Ein langsames Feld leuchtender Staubflecken, die sich zum Zeiger hin oder von ihm weg biegen und umso heller aufleuchten, je näher sie kommen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, accent, influenceRadius, mode, speed, collide ### Greeting Cycle https://fieldbook.lizardi.mx/de/components/greeting-cycle-text Eine kurze Begrüßung neben einem Markierungspunkt durchläuft einmal Hallos in verschiedenen Sprachen und verschiebt jedes einzelne an seinen Platz, während das letzte weggleitet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: intervalMs, accentColor, autoplay ### Gridline area chart https://fieldbook.lizardi.mx/de/components/gridline-area-chart Ein kartengerahmtes Flächendiagramm mit zwei überlappenden gefüllten Ebenen, Häkchen mit abgerundeten Achsen, einer schwachen Gitterlinie und einer Fußzeile, die den Trend angibt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: trendPercent, trendDirection, primaryColor, secondaryColor, showGrid ### Grounded download pill https://fieldbook.lizardi.mx/de/components/grounded-download-pill Ein vollständig abgerundeter Download-Button mit einem akzentfarbenen Schatten, der beim Drücken enger wird, während sein Pfeil nach unten zeigt und zurückspringt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, shadowSpread, pressScale, showIcon ### Grouped backdrop popover https://fieldbook.lizardi.mx/de/components/grouped-backdrop-popover Ein Popover-Auslöser, der sich in der Nähe seines Ankers mit einem optional abgeblendeten Hintergrund öffnet und jedes gleichgeordnete Popover in seiner Gruppe schließt, sobald es geöffnet wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: anchor, showBackdrop, gap, accent ### Grouped Code Boxes https://fieldbook.lizardi.mx/de/components/grouped-code-boxes Ein einmaliges Codefeld aus einzelnen Ziffern in Kästchen, die durch eine dünne Trennlinie in der Mitte in zwei Gruppen unterteilt sind, wobei ein blinkendes Caret das Kästchen markiert, das auf die Eingabe wartet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: length, groupSize, accentColor, caption ### Grouped filter popover https://fieldbook.lizardi.mx/de/components/grouped-filter-popover Eine Reihe kleiner Filterschaltflächen, bei denen das Öffnen des Bedienfelds einer Schaltfläche automatisch alle anderen bereits geöffneten Bedienfelder in derselben Reihe schließt, wobei jedes Bedienfeld von der Kante aus wächst, von der aus es ausgelöst wurde. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, filterCount, closeOnSelect ### Grouped icon toolbar https://fieldbook.lizardi.mx/de/components/grouped-icon-toolbar Eine kompakte horizontale Symbolleiste, die Symbolschaltflächen in Gruppen gruppiert, die durch dünne Trennzeichen unterteilt sind, für schnelle Aktionen im Formatierungsstil. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, groupCount ### Grouped magnify dock https://fieldbook.lizardi.mx/de/components/grouped-magnify-dock Ein unteres Dock aus runden Symbolschaltflächen, die in zwei Cluster unterteilt sind, die größer werden, je näher der Zeiger an die einzelnen Cluster herankommt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: magnification, distance, iconSize, accent ### Grouped Section Fieldset https://fieldbook.lizardi.mx/de/components/grouped-section-fieldset Eine betitelte Gruppe verwandter Felder unter einer Legende und einem dünnen Lineal, mit einem einzigen Schalter oben, der die gesamte Gruppe auf einmal abblendet und deaktiviert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: legend, groupEnabled, accentColor ### Grouped select menu https://fieldbook.lizardi.mx/de/components/grouped-select-menu Eine Dropdown-Auswahl, deren Optionen unter Abschnittsüberschriften gruppiert sind, mit Pfeilstreifen am Rand, die lange Listen automatisch scrollen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, accent ### Grouped settings dropdown https://fieldbook.lizardi.mx/de/components/grouped-settings-dropdown Ein durch eine Schaltfläche ausgelöstes Dropdown-Menü mit beschrifteten Abschnitten, einem verschachtelten Untermenü und einer Optionsgruppe zum Auswählen eines von mehreren Einstellungswerten. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: triggerLabel, align, accent ### Grow bar chart https://fieldbook.lizardi.mx/de/components/grow-bar-chart Ein Balkendiagramm, dessen Spalten beim Laden von der Grundlinie nach oben wachsen, zwischen vertikalem und horizontalem Layout wechselt und beim Bewegen des Mauszeigers jeweils einen Balken hervorhebt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: orientation, accentColor, barCount, showGrid ### Growing back arrow https://fieldbook.lizardi.mx/de/components/growing-back-arrow Eine bloße Linkspfeil-Rückensteuerung, die beim Schweben wächst und ihren Schaft ausdehnt und dann beim Drücken in den Ruhezustand einrastet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, size, hoverScale, shaftStretch, tooltip ### Growing ledge button https://fieldbook.lizardi.mx/de/components/growing-ledge-button Ein solider Akzentknopf, der auf einer dunkleren unteren Leiste ruht, die beim Schweben dicker wird und sich anhebt, dann dünner wird und unter Druck sinkt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, ledge, hoverLedge, radius ### Growing Pill Backdrop https://fieldbook.lizardi.mx/de/components/growing-pill-backdrop-button Ein nacktes Etikett mit einer getönten Scheibe hinter den Anfangsbuchstaben, die beim Schweben zu einer vollen Pille heranwächst, während der Pfeil an seinen Platz gleitet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, showArrow, discSize, duration ### Guide steps accordion https://fieldbook.lizardi.mx/de/components/guide-steps-accordion Ein nummeriertes Akkordeon aus Führungsstufen, deren Paneele im zusammengeklappten Zustand montiert bleiben können, so dass ein laufender Timer im Inneren der Stufen beim Schließen und Wiederöffnen weiterzählt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: keepMounted, accentColor, transitionMs, showStepNumbers ### Hairline section divider https://fieldbook.lizardi.mx/de/components/hairline-divider Eine schlanke Regel, die eine Überschrift und eine Beschreibung abschließt und dann eine Reihe einfacher Beschriftungen darunter in separate Segmente aufteilt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: style, thickness, spacing, accentColor ### Hairline lift pill https://fieldbook.lizardi.mx/de/components/hairline-lift-ghost-pill Eine leise, durchscheinende Pille mit einem inneren Haaransatz, der sich von der Oberfläche abhebt und beim Schweben einen Akzentton aufnimmt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lift, restOpacity, showIcon ### Hairline Note Card https://fieldbook.lizardi.mx/de/components/hairline-note-card Eine ruhige, papierfarbene Notizkarte mit Haarlinienrand, einer kleinen optionalen Überschrift und einem einzelnen Textschlitz. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: title, showTitle, compact, borderColor ### Hairline Tone Badge https://fieldbook.lizardi.mx/de/components/hairline-tone-badge Ein unbefülltes Pillenetikett, dessen Rand und Text dieselbe Farbe haben, sodass eine Reihe davon wie eine gedruckte Legende liest. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tone, accent, label, showDot, size ### Hairline trace submit https://fieldbook.lizardi.mx/de/components/hairline-trace-submit Eine dunkle Senden-Schaltfläche, deren ein Pixel langer Haaransatz aufleuchtet, der von der Kante, auf die der Mauszeiger eingegeben hat, um den Umfang herum verläuft und sich dann auf die gleiche Weise wieder zurückzieht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, traceMs, radius, retrace ### Hairline utility button https://fieldbook.lizardi.mx/de/components/hairline-utility-button Eine leise, neutrale Aktionstaste, die beim Schweben mit einem Anheben um ein Pixel, einem dunkleren Haaransatz und einem weichen Schatten reagiert und beim Drücken wieder flach sinkt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, radius, lift, shadow ### Halftone print loupe https://fieldbook.lizardi.mx/de/components/halftone-print-loupe Ein Bild, das als Bildschirm aus gedruckten Tintenpunkten dargestellt wird, mit einer runden Lupe unter dem Zeiger, wo sich die Punkte wieder in das glatte Original auflösen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: density, angle, shape, revealRadius, duotone, inkColor ### Halftone ripple field https://fieldbook.lizardi.mx/de/components/halftone-ripple-field Ein Feld aus winzigen Kacheln, die sich mit einem treibenden Geräuschmuster ein- und ausschalten, und bei jedem Klick rast ein Ring aus leuchtenden Kacheln nach außen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, shape, pixelSize, density, speed, ripples ### Halftone wave field https://fieldbook.lizardi.mx/de/components/halftone-wave-field Eine langsame Wolke aus Turbulenzen, die auf eine Handvoll Töne abgeflacht und als Punktgitter gedruckt ist, so dass sie sich wie ein Zeitungsfoto liest, das nicht stehen bleibt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, pixelSize, levels, waveScale, speed, pointerSwell ### Halo glow button https://fieldbook.lizardi.mx/de/components/halo-glow-button Eine dunkle Pille, deren verschwommener Akzent-Heiligenschein beim Schweben einblendet und sich um den Rand bewegt, während ein dünner innerer Ring heller wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, spread, travelSeconds, alwaysOn ### Halo ring https://fieldbook.lizardi.mx/de/components/halo-ring Ein leuchtender Ring, dessen Rand auf einem treibenden Geräuschfeld wackelt, während eine heiße Perle um den Innenrand läuft. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, hue, hoverStrength, ringRadius, spin ### Halo ring button https://fieldbook.lizardi.mx/de/components/halo-ring-button Ein umrissener Knopf, der einen einzelnen Ring nach außen wirft, wenn Sie mit der Maus darüber fahren, wobei sich das Band über den Rand hinaus ausdehnt und dabei immer dünner wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, spread, duration, radius ### Hand-drawn text marker https://fieldbook.lizardi.mx/de/components/hand-drawn-text-marker Umschließt einen Textabschnitt mit einer handgezeichneten Markierungsanmerkung, z. B. einer Hervorhebung, Unterstreichung, einem Kreis oder einem Kästchen, die sich selbst mit einem leicht unvollständigen skizzierten Strich zeichnet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: action, color, animateOnView, strokeWidth ### Handoff link button https://fieldbook.lizardi.mx/de/components/handoff-link-button Eine kleine Schaltfläche mit hohem Kontrast, die das aktuelle Element an ein anderes Tool in einem neuen Tab übergibt und eine Zielmarkierung sowie einen Hinweis darauf anzeigt, dass der Link die Seite verlässt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, itemName, accent, inverted, showExternalHint ### Hard edge key button https://fieldbook.lizardi.mx/de/components/hard-edge-key-button Eine kompakte Taste im Hardware-Stil, die Glanzlichter, Umrisse und Schatten nach innen dreht, sobald Sie sie drücken. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, radius, speed ### Hard Shadow Button https://fieldbook.lizardi.mx/de/components/hard-shadow-button Eine Schaltfläche mit dickem Umriss, die sich beim Schweben von ihrem festen versetzten Schatten löst und beim Klicken wieder hineingedrückt wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, borderWidth, offset ### Hard shadow store badge https://fieldbook.lizardi.mx/de/components/hard-shadow-store-badge Ein kastenförmiges Geschäftsschild, das auf einem festen, versetzten Schatten sitzt, der beim Schweben näher kommt, einen Lichtstreifen über sich selbst zieht und beim Drücken flach aufstampft. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, kicker, label, offset, sweep ### Hatch sweep button https://fieldbook.lizardi.mx/de/components/hatch-sweep-button Eine feine diagonale Schraffur wird beim Hovern über der Schaltfläche eingeblendet und scrollt für immer, wobei die Beschriftung überall dort invertiert wird, wo eine Linie sie kreuzt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, angle, speed, density ### Heartbeat like button https://fieldbook.lizardi.mx/de/components/heartbeat-like-button Ein runder Knopf, dessen Herz beim Schweben mit gleichmäßigem Schlag wächst; Wenn Sie darauf klicken, wird das gewünschte Symbol eingerastet und die Zahl daneben angekreuzt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, beat, count, startLiked ### Height Morph Accordion https://fieldbook.lizardi.mx/de/components/height-morph-accordion Eine Fragenliste, deren Antworttafeln mithilfe einer Feder auf ihre natürliche Höhe wachsen und schrumpfen und dabei die Reihen darunter verschieben. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, allowMultiple, duration, showRules ### Hero signal https://fieldbook.lizardi.mx/de/components/hero-signal Ein vollwertiger Landungsheld, dessen Schlagzeile Wort für Wort über dünne vertikale Linien erscheint, die schweben und kurz leuchtende Signale nach oben tragen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: headline, accent ### Hex cell grid https://fieldbook.lizardi.mx/de/components/hex-cell-grid Eine Wabe aus abgeschnittenen Sechseckzellen, die unter dem Zeiger aufleuchten, dann wieder abkühlen und eine verblassende Spur hinterlassen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cellSize, seam, accent, coolMs ### Highlight focus swap https://fieldbook.lizardi.mx/de/components/highlight-focus-swap Wörter in einem Satz werden abwechselnd scharf dargestellt, während der Rest verschwimmt, wobei ein leuchtender Eckklammerrahmen zum Kästchen des im Fokus stehenden Wortes verschoben wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: sentence, accentColor, blurAmount, manualMode, intervalMs ### Highlight trail chart https://fieldbook.lizardi.mx/de/components/highlight-trail-chart Ein mehrzeiliges Trenddiagramm, bei dem durch Bewegen des Mauszeigers ein kurzes nachlaufendes Segment einer Reihe aufgehellt wird, während der Rest davon und die anderen Linien abgedunkelt werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: seriesCount, primaryColor, showMarkers, forecastTail ### Highlighted bar chart https://fieldbook.lizardi.mx/de/components/highlighted-bar-chart Ein Kategorie-Balkendiagramm, bei dem ein Balken mit einer gestrichelten Umrandung und einer helleren Füllung hervorgehoben wird und die Beschriftung dem Balken folgt, auf den Sie zeigen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, activeIndex, barRadius, showValues, animate ### Hinged plate button https://fieldbook.lizardi.mx/de/components/hinged-plate-button Zwei identische Beschriftungsschilder sitzen genau übereinander und schwenken beim Schweben auseinander, wie ein Paar Türen, die sich perspektivisch drehen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tilt, depth, duration ### Hinged progress button https://fieldbook.lizardi.mx/de/components/hinged-progress-button Eine Schaltfläche, deren Vorderseite beim Schweben nach hinten schwenkt und ein Fach freigibt, in dem ein Fortschrittsbalken ungleichmäßige Bursts ausfüllt und in voller Breite ausgeblendet wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, tilt, barDuration, depth ### Hold ring confirm https://fieldbook.lizardi.mx/de/components/hold-ring-confirm-button Eine runde Schaltfläche, die von einem Strich umgeben ist, der sich selbst zeichnet, während Sie gedrückt halten, und gleichzeitig einen Fortschrittswert in den Ring, die Schaltflächenskala und die Beschriftungsfarbe einspeist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, holdMs, accent, ringWidth, showPercent ### Hold to delete https://fieldbook.lizardi.mx/de/components/hold-to-delete-button Eine zerstörerische Schaltfläche, die erst ausgelöst wird, wenn der Zeiger lange genug gedrückt gehalten wird, damit ein Füllbalken darüber läuft, und der zurückspult, sobald Sie ihn loslassen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, holdMs, accent, showCountdown, glyph ### Hold to fill pad https://fieldbook.lizardi.mx/de/components/hold-to-fill-pad-button Ein durchscheinendes Pad, das sich von der Basis aus nach oben füllt, solange es gehalten wird, und dann feststeht und seinen Rand zum Vorschein bringt, wenn die Füllung die Oberseite erreicht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, borderTint, label, holdSeconds, sink ### Holographic ID card https://fieldbook.lizardi.mx/de/components/holographic-id-card Eine Personenkarte, die sich in Richtung des Zeigers neigt, während ein holografischer Glanz über ihre Vorderseite gleitet, mit einem Fußzeilenstreifen, der den Avatar, den Griff, den Status und eine Kontakttaste trägt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: name, role, tilt, accent, showFooter ### Honeycomb lattice https://fieldbook.lizardi.mx/de/components/honeycomb-lattice Eine Wabe aus umrissenen Sechsecken, die einen Behälter kacheln, wobei die gemeinsamen Kanten nur einmal gezeichnet werden, sodass jede Naht ein einziger Haaransatz bleibt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: radius, gap, orientation, litCells, accentColor ### Hop lift button https://fieldbook.lizardi.mx/de/components/hop-lift-button Ein abgerundeter Knopf, der sich anhebt und in einer kurzen, sich wiederholenden Schleife hüpft, während man darauf zeigt, und dann flach in einen dunkleren Druckzustand absinkt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, useAccentFill, hop, radius, liftDistance ### Hopping dot loader https://fieldbook.lizardi.mx/de/components/hopping-dot-loader Eine kurze Reihe von Punkten, die in einer Wanderwelle hüpfen und jeweils einen Schlag nach dem Punkt daneben den Boden verlassen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: dotCount, dotSize, hopHeight, cycleSeconds, accent ### Horizon swell https://fieldbook.lizardi.mx/de/components/horizon-swell Die sanften Wellen verschwinden in Nebel und nähern sich einem erleuchteten Horizont, werden immer größer, während sie sich vorwärtsbewegen, und fangen auf jedem Kamm einen blassen Rand ein. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: waveColor, crestColor, speed, amplitude, fog, grain ### Horizontal bar chart https://fieldbook.lizardi.mx/de/components/horizontal-bar-chart Ein zeilenbasiertes Balkendiagramm mit Kategoriebeschriftungen in einem festen linken Bundsteg und abgerundeten Balken, die von einem gemeinsamen linken Rand ausgehen und anhand des größten Werts skaliert werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, rowCount, barRadius, labelWidth, animate ### Hover Decrypt Text https://fieldbook.lizardi.mx/de/components/hover-decrypt-text Buchstaben wandern durch zufällige Zeichen und lösen sich innerhalb von etwa einer Sekunde von links nach rechts in das echte Wort auf, wobei die Dekodierung jedes Mal wiederholt wird, wenn der Zeiger in den Text eintritt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, duration, animateOnHover, startOnView ### Hover duplicate text nav https://fieldbook.lizardi.mx/de/components/hover-duplicate-text-nav Eine vertikale Navigationsliste verschiebt jedes Etikett beim Schweben nach oben und von oben weg, während ein doppeltes Etikett von unten eingeschoben wird, um seinen Platz einzunehmen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: items, accent, durationMs, showIndex ### Hover preview popover https://fieldbook.lizardi.mx/de/components/hover-preview-popover Eine kleine Detailkarte, die sich nach kurzem Bewegen des Mauszeigers neben einem Link öffnet und lange genug geöffnet bleibt, um den Zeiger darauf zu bewegen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, openDelay, closeDelay, offset, accent ### Hover slide nav labels https://fieldbook.lizardi.mx/de/components/hover-slide-nav-labels Eine vertikale Navigationsliste, bei der durch Bewegen des Mauszeigers oder Fokussierens einer Beschriftung eine Duplikatkopie nach oben in die Ansicht geschoben wird, während das Original herausgeschoben wird, sodass die Beschriftung sich scheinbar selbst aktualisiert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: items, slideSeconds, accent ### Hover speed text ring https://fieldbook.lizardi.mx/de/components/hover-speed-text-ring Ein Satz in einem Ring aus nach außen gerichteten Buchstaben, der sich im Ruhezustand sanft dreht und die Geschwindigkeit dramatisch ändert, während der Zeiger darüber schwebt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: phrase, spinSeconds, hoverMode, accent ### Hover weight ripple text https://fieldbook.lizardi.mx/de/components/hover-weight-ripple-text Ultraleichter Anzeigetyp, bei dem durch Schweben eines Buchstabens dieser zu einem schweren Gewicht mit dünnem Umriss wird und sich nach außen bewegt, sodass auch seine Nachbarn etwas dicker werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, accentColor, thickenNeighbors ### Hover zoom frame https://fieldbook.lizardi.mx/de/components/hover-zoom-frame Ein Bild, das sich beim Bewegen des Mauszeigers oder beim Tippen sanft um den Cursor herum vergrößert, sodass ein Besucher Details betrachten kann, ohne die Seite zu verlassen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: zoomScale, zoomOnHover, zoomOnClick, cornerRadius ### Accessibility icon https://fieldbook.lizardi.mx/de/components/icon-accessibility Eine stehende Figur mit offenen Armen und breiter Haltung, die mit langsamem Puls atmet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Activity icon https://fieldbook.lizardi.mx/de/components/icon-activity Eine Vitalzeichenkurve, die sich von links nach rechts über eine flache Linie zieht, einmal spitzt und dann wieder abflacht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Airplay icon https://fieldbook.lizardi.mx/de/components/icon-airplay Ein Display mit einer Lücke am unteren Rand und einem Dreieck darunter, das nach unten und hinten gleitet und das Bild ausstrahlt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Alarm clock icon https://fieldbook.lizardi.mx/de/components/icon-alarm-clock Ein Wecker mit zwei Glocken, der auf seinen Füßen klingelt, während die Zeiger einen halben Schlag hinter dem Gehäuse zurückbleiben. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Arrow icon https://fieldbook.lizardi.mx/de/components/icon-arrow Ein Pfeil in voller Länge, der sich entlang seiner eigenen Achse bewegt, mit gepaarten Pfeilen für die beiden Richtungen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, direction ### Audio lines icon https://fieldbook.lizardi.mx/de/components/icon-audio-lines Fünf aufrecht stehende Stangen unterschiedlicher Höhe, die sich nacheinander anheben und wie eine von links nach rechts verlaufende Wellenform wirken. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### 3D axis icon https://fieldbook.lizardi.mx/de/components/icon-axis-3d Drei Achsen ziehen sich abwechselnd aus einem Ursprung heraus: Höhe, dann Breite, dann die Tiefendiagonale. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Badge check icon https://fieldbook.lizardi.mx/de/components/icon-badge-check Eine Wellenrobbe, die ihre acht Lappen einzieht und einen Schlag später ein Karo über die Mitte streicht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Icon badge send https://fieldbook.lizardi.mx/de/components/icon-badge-send-button Eine abgerundete Sendeschaltfläche, deren Glyphe sich in einem durchscheinenden kreisförmigen Abzeichen befindet, das heller wird und sich dreht, während die gesamte Schaltfläche beim Schweben angehoben und beim Drücken zur Ruhe kommt. Frameworks: react Access: open Public prop names: label, accent, lift, spin, confirmOnPress ### Battery icon https://fieldbook.lizardi.mx/de/components/icon-battery Eine Zelle mit einem Endknoten, dessen Balken nacheinander blinken; Die Ladeanzeige tauscht die Balken gegen einen Bolzen aus. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, level ### Bell icon https://fieldbook.lizardi.mx/de/components/icon-bell Eine Benachrichtigungsglocke, deren Körper an der Krone schwingt und deren Klöppel einen Schlag nacheilt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, state ### Between icon https://fieldbook.lizardi.mx/de/components/icon-between Ein Pfeil und ein Paar Blöcke zeigen an, wo ein neuer Gegenstand landet: Die Blöcke verschieben sich zur Seite oder der Pfeil gleitet hinein. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Blocks icon https://fieldbook.lizardi.mx/de/components/icon-blocks Drei quadratische Blöcke, die in einem L angeordnet sind und einer nach dem anderen hüpfen, als würden Teile zusammengesteckt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Cast icon https://fieldbook.lizardi.mx/de/components/icon-cast In der unteren linken Ecke bleibt ein Bildschirm offen, auf den ein Punkt und zwei Bögen ein Signal lenken. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Check icon https://fieldbook.lizardi.mx/de/components/icon-check Ein Häkchen, das sich vom kurzen Arm zum langen Arm zieht und dann zur Ruhe kommt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Chevron icon https://fieldbook.lizardi.mx/de/components/icon-chevron Ein nackter Chevron, der sich in die Richtung neigt, in die er zeigt, und sich in beide Richtungen verdoppelt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, direction ### Clapperboard icon https://fieldbook.lizardi.mx/de/components/icon-clapperboard Eine Schiefertafel mit einem gestreiften Klöppelstab, der an der oberen linken Ecke angelenkt ist, einrastet und wieder aufschwingt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Clipboard icon https://fieldbook.lizardi.mx/de/components/icon-clipboard Ein Brett, dessen Federklammer gegen die Oberkante springt, mit einer leeren, karierten oder linierten Oberfläche. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Clock icon https://fieldbook.lizardi.mx/de/components/icon-clock Ein rundes Gesicht, dessen Zeiger über das Zifferblatt streichen; Die Variante wählt aus, zu welcher Stunde das Paar eingefroren ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, hour ### Cog icon https://fieldbook.lizardi.mx/de/components/icon-cog Ein feines Zahnrad mit einer Sechskantbohrung, beide drehen sich zusammen, sodass das Maschinenteil wie ein Stück aussieht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Compass icon https://fieldbook.lizardi.mx/de/components/icon-compass Ein Zifferblatt mit einer Drachennadel, die nach Norden schwenkt und wieder auf dem Drehpunkt in der Mitte sitzt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Copy icon https://fieldbook.lizardi.mx/de/components/icon-copy Zwei gestapelte Blätter, bei denen das vordere vom dahinter liegenden Blatt wegrutscht, als würde man ein Duplikat abziehen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Corner arrow icon https://fieldbook.lizardi.mx/de/components/icon-corner-arrow Ein Pfeil, der durch die offene Ecke eines abgerundeten Quadrats in Richtung der von ihm benannten Ecke gleitet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, direction ### Crop icon https://fieldbook.lizardi.mx/de/components/icon-crop Zwei Ernteschienen, die voneinander gleiten und das Rechteck öffnen, das sie dazwischen ausschneiden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Cross icon https://fieldbook.lizardi.mx/de/components/icon-cross Ein aufrechtes Kreuz mit hoher Querlatte und sanft gerundeten Armen, sanft anschwellend in langsamem Puls. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Icon crossfade switch https://fieldbook.lizardi.mx/de/components/icon-crossfade-switch Ein Kippschalter, dessen Daumensymbol ausgeblendet und in ein anderes Symbol skaliert wird, wenn der Schalter zwischen Aus und Ein wechselt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, on, iconStyle, accent ### Disc icon https://fieldbook.lizardi.mx/de/components/icon-disc Eine Schallplatte mit ruhendem Rand und Nabe, während sich drei Rillen um die Spindel drehen, sodass sich tatsächlich die Drehung ergibt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Download icon https://fieldbook.lizardi.mx/de/components/icon-download Ein Pfeil, der für Speicher- und Exportaktionen in ein Fach oder aus einer Wolke gleitet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, variant ### Ellipsis icon https://fieldbook.lizardi.mx/de/components/icon-ellipsis Drei Punkte, die nacheinander blinken und quer oder unten angeordnet sind, um ein Überlaufmenü zu bilden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, direction ### Not equal icon https://fieldbook.lizardi.mx/de/components/icon-equal-not Zwei ebene Balken mit einem Schrägstrich, der sich über sie zieht und beim Landen das Gleichheitszeichen aufhebt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### EV charger icon https://fieldbook.lizardi.mx/de/components/icon-ev-charger Eine Ladesäule auf einem Pad mit Kabelausgang und einem Bolzen auf der Vorderseite, der während der Abgabe blinkt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Expand icon https://fieldbook.lizardi.mx/de/components/icon-expand Zwei Pfeile brechen in Richtung gegenüberliegender Ecken ab und öffnen dabei die Sicht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### External link icon https://fieldbook.lizardi.mx/de/components/icon-external-link Eine gerahmte Seite mit einer offenen Ecke, bei der der Pfeil über den Rahmen hinaus nach rechts oben gleitet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Fingerprint icon https://fieldbook.lizardi.mx/de/components/icon-fingerprint Ineinander verschachtelte Grate, die nacheinander von außen nach innen zeichnen, so wie ein Abdruck von einem Scanner gelesen wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Frame icon https://fieldbook.lizardi.mx/de/components/icon-frame Ein Sucher, dessen vier abgerundete Ecken abwechselnd um einen festen Mittelpunkt atmen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Gallery icon https://fieldbook.lizardi.mx/de/components/icon-gallery Ein gerahmtes Dia, dessen Nachbarn von den Schienen herabschauen, während der Streifen sich vorwärtsbewegt, als wäre er geblättert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Gauge icon https://fieldbook.lizardi.mx/de/components/icon-gauge Ein Zifferblattbogen mit einer Nabe und einer Nadel, die auf der Skala nach oben schwenkt und sich wieder zurückstellt, wie ein Messgerät, das seinen Messwert ermittelt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Heart icon https://fieldbook.lizardi.mx/de/components/icon-heart Ein Herz mit zwei runden Lappen und einer weichen Spitze, das auf einer Schleife schlägt und sich im eingeschalteten Zustand fest füllt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, state ### Kanban icon https://fieldbook.lizardi.mx/de/components/icon-kanban Drei Spielbahnen hängen an der oberen Schiene, wobei jede Kartenspalte einen Schlag nach der davor liegenden abfällt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Key icon https://fieldbook.lizardi.mx/de/components/icon-key Ein Ringbügelschlüssel mit zwei Zähnen am Schaft, der um seinen Bügel wackelt, so wie ein Schlüssel ein steifes Schloss betätigt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Icon label tabs https://fieldbook.lizardi.mx/de/components/icon-label-tabs Eine Reihe von Symbol- und Beschriftungs-Tab-Chips mit einer verschiebbaren Hervorhebung, wobei das Feld darunter in Richtung des ausgewählten Tabs verschoben wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultTab, chipGap ### Icon label toolbar https://fieldbook.lizardi.mx/de/components/icon-label-toolbar Eine kompakte Symbolleiste mit leisen Symbolschaltflächen, die jeweils in einem eigenen Farbton gezeichnet sind, mit einer führenden Zurück-Schaltfläche, deren Beschriftung sich beim Bewegen des Mauszeigers aus dem Symbol entfaltet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, hueSpread, count, showBack, activeIndex ### Layers icon https://fieldbook.lizardi.mx/de/components/icon-layers Gestapelte Blätter in der Perspektive gesehen, wobei das obere zuerst angehoben wird und die unteren einen Schlag später folgen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Layout dashboard icon https://fieldbook.lizardi.mx/de/components/icon-layout-dashboard Vier Armaturenbrettkacheln in zwei ungleichmäßigen Spalten, die jeweils abwechselnd atmen, sodass das Raster von links oben nach rechts unten wellenförmig verläuft. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Link icon https://fieldbook.lizardi.mx/de/components/icon-link Eine zweiteilige Kette, die wackelt, wenn an der Verbindung gezogen wird, mit einer Pin-Anzeige für angeheftete Referenzen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Loader icon https://fieldbook.lizardi.mx/de/components/icon-loader Ein geschäftiger Indikator in drei Lesarten: ein Dreiviertelring, ein Verfolgungsring aus Punkten und vier sich drehende Klingen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Log in icon https://fieldbook.lizardi.mx/de/components/icon-log-in Ein Pfeil, der direkt durch eine offene Tür gleitet, wobei der Türrahmen beim Betreten stillsteht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Log out icon https://fieldbook.lizardi.mx/de/components/icon-log-out Ein Pfeil, der nach rechts von einer offenen Tür weggleitet und dabei den stillstehenden Türrahmen zurücklässt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Map pin icon https://fieldbook.lizardi.mx/de/components/icon-map-pin Eine tropfenförmige Markierung, die von der Karte springt und auf ihren Punkt zurückfällt, wobei ein Aus-Zustand durchgestrichen ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, state ### Maximize icon https://fieldbook.lizardi.mx/de/components/icon-maximize Vier Eckhalterungen, die sich paarweise auseinanderschieben lassen und den Rahmen so ausdehnen, dass er den Bildschirm ausfüllt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Menu icon https://fieldbook.lizardi.mx/de/components/icon-menu Drei übereinander gestapelte Stäbe, die sich nacheinander seitlich wellen, der Griff für eine Navigationsschublade. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Minimize icon https://fieldbook.lizardi.mx/de/components/icon-minimize Vier Eckwinkel werden paarweise nach innen gesteckt und ziehen den Rahmen wieder nach unten zum Fenster. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Minus icon https://fieldbook.lizardi.mx/de/components/icon-minus Eine einzige Regel, die sich ausdehnt und stabilisiert, zum Reduzieren, Entfernen und Dekrementieren von Steuerelementen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Move icon https://fieldbook.lizardi.mx/de/components/icon-move Ein Pfeil, der auf die Kante zielt, auf der er landen soll, und einmal pro Zyklus in diese Richtung stößt, während die Kante hält. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, direction ### NFC icon https://fieldbook.lizardi.mx/de/components/icon-nfc Vier ineinander verschachtelte Bögen, die sich nacheinander nach außen wellen, so wie ein Tap-to-Pay-Feld nach einem Leser greift. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Orbit icon https://fieldbook.lizardi.mx/de/components/icon-orbit Ein fester Körper, der von einer einzelnen Schiene umgeben ist und von einer Perle einmal pro Zyklus umrundet wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Panel icon https://fieldbook.lizardi.mx/de/components/icon-panel Ein Fensterrahmen, dessen angedockte Paneelkante gleitet, während ein Chevron anzeigt, in welche Richtung das Paneel ausgerichtet ist. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, variant ### Paperclip icon https://fieldbook.lizardi.mx/de/components/icon-paperclip Eine gebogene Drahtklammer hängt an der oberen Biegung und schwingt so, wie eine abgeschnittene Seite sie hin und her zieht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Pause icon https://fieldbook.lizardi.mx/de/components/icon-pause Zwei aufrechte Balken, die nacheinander blinken und die Zeit anzeigen, während die Wiedergabe angehalten wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Pin icon https://fieldbook.lizardi.mx/de/components/icon-pin Eine Reißzwecke, die einmal hüpft und auf ihrer Nadel landet, mit einem ausgeschalteten Zustand, der einen Strich darüber zeichnet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, state ### Play icon https://fieldbook.lizardi.mx/de/components/icon-play Ein solides Spieldreieck, das langsam anschwillt und zur Ruhe kommt, wie ein Transportknopf, der zum Drücken auffordert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Plug zap icon https://fieldbook.lizardi.mx/de/components/icon-plug-zap Ein zweipoliger Stecker, in den ein Bolzen eintaucht, sodass die Ladung aussieht, als würde sie auf den Zinken landen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Plus icon https://fieldbook.lizardi.mx/de/components/icon-plus Ein Pluszeichen, das im Takt ansteigt und entweder schlicht oder in einem Kreis oder einem abgerundeten Quadrat gehalten wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Radio icon https://fieldbook.lizardi.mx/de/components/icon-radio Ein sendender Punkt mit zwei Bogenpaaren, die sich von ihm wegbewegen, wobei ein inneres Paar vorangeht und ein äußeres Paar folgt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate ### Radio tower icon https://fieldbook.lizardi.mx/de/components/icon-radio-tower Ein verstrebter Mast, dessen Spitze zwei Bogenpaare nach außen wirft, wobei das nahe Paar vorne und das ferne Paar hinten liegt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Refresh icon https://fieldbook.lizardi.mx/de/components/icon-refresh Zwei verfolgende Pfeilbögen, die eine volle Umdrehung machen, mit gegen den Uhrzeigersinn gerichteten, gepunkteten und deaktivierten Anzeigen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Icon reveal chip https://fieldbook.lizardi.mx/de/components/icon-reveal-fill-chip Ein kleiner umrissener Chip, der beim Schweben mit seinem Akzent überflutet, während die Beschriftung nach links gleitet und ein verstecktes Glyph von rechts eingeblendet wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, glyph, duration, fontSize ### Rotate icon https://fieldbook.lizardi.mx/de/components/icon-rotate Ein offener Ring mit einer einzelnen Pfeilspitze, die sich jeweils um einen Viertel-Tick dreht, sowie einem Schlüssel, der sich an Ort und Stelle dreht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Route icon https://fieldbook.lizardi.mx/de/components/icon-route Zwei Haltestellen, verbunden durch einen Stufenverbinder, der sich vom ersten Knoten bis zum letzten zieht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Search icon https://fieldbook.lizardi.mx/de/components/icon-search Eine Lupe, die sich sanft nach oben und unten bewegt, für Suchfelder, Filter und Suchsteuerungen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Send icon https://fieldbook.lizardi.mx/de/components/icon-send Ein Papierflieger, der beim Loslassen nach vorne gleitet, diagonal gefaltet oder flach und horizontal fliegt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, variant ### Settings icon https://fieldbook.lizardi.mx/de/components/icon-settings Ein Zahnrad mit sechs Zähnen dreht sich langsam um eine offene Nabe, wobei das Zahnprofil die Drehung leicht ablesbar macht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Icon Shape Morph https://fieldbook.lizardi.mx/de/components/icon-shape-morph Ein einzelnes gefülltes Symbol formt sich nahtlos in das nächste Symbol in einer Sequenz um, wobei sich der Umriss kontinuierlich zwischen den Formen verzieht, anstatt zu überblenden oder zu vertauschen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cycleSeconds, holdSeconds ### Shrink icon https://fieldbook.lizardi.mx/de/components/icon-shrink Zwei Pfeile, die von gegenüberliegenden Ecken nach innen gezogen werden und die Ansicht auf die richtige Größe verkleinern. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Signal icon https://fieldbook.lizardi.mx/de/components/icon-signal Vier Balken auf einer gemeinsamen Grundlinie, die von links nach rechts blinken; Nicht erreichte Balken werden auf der gewählten Ebene zu Stubs verkleinert. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, level ### Sliders icon https://fieldbook.lizardi.mx/de/components/icon-sliders Drei Schienen mit Griffen, die nacheinander entlangfahren und quer oder unten am Gitter angeordnet sind. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, direction ### Star icon https://fieldbook.lizardi.mx/de/components/icon-star Ein fünfzackiger Stern, der im Takt ansteigt und sich vollständig füllt, sobald der Ein-Zustand ihn als Favoriten markiert. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, state ### Icon sweep delete button https://fieldbook.lizardi.mx/de/components/icon-sweep-delete-button Eine zerstörerische Schaltfläche, deren dunklere Symbolkachel beim Schweben vom rechten Rand über das Gesicht wandert und das Etikett verdeckt, während sich der Mülleimerdeckel öffnet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, width, sweepMs ### Icon swell tooltip https://fieldbook.lizardi.mx/de/components/icon-swell-tooltip-button Eine chromlose Symbolschaltfläche, deren Glyphe beim Schweben anschwillt und sich neu verfärbt, während sich darüber am linken Rand ein Beschriftungschip entfaltet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, iconSize, swell, openDelay ### Icon takeover delete https://fieldbook.lizardi.mx/de/components/icon-takeover-delete-button Eine destruktive Schaltfläche, aufgeteilt in ein fettes Wort und eine schmale Symbolzelle; Durch Bewegen des Mauszeigers oder Fokussierens wird die Zelle über die gesamte Schaltfläche vergrößert, bis nur noch die Glyphe übrig bleibt. Bei Berührung erfolgt eine Bestätigung durch zweimaliges Tippen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, cellWidth, glyph, confirmOnTap ### Thumbs icon https://fieldbook.lizardi.mx/de/components/icon-thumbs Eine Hand mit ausgestrecktem Daumen, die am Handgelenk wackelt. Die Richtungsstütze dreht die ganze Hand nach oben oder unten. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, direction ### Icon tile flood button https://fieldbook.lizardi.mx/de/components/icon-tile-flood-button Eine Schaltfläche mit einer Symbolkachel mit durchgehendem Akzent am linken Rand; Beim Schweben wird dieser Akzent über den blassen Körper gegossen und die Etikettentinte wird weiß. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, floodMs, radius, maxLabelWidth ### Timer icon https://fieldbook.lizardi.mx/de/components/icon-timer Ein Countdown-Timer mit einem Zuggriff an der Oberseite, dessen Zeiger sich vom Drehpunkt abhebt, sowie einer gestoppten Anzeige. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, state ### Toggle icon https://fieldbook.lizardi.mx/de/components/icon-toggle Eine Pillenschiene mit einem festen Knopf, der an einem Ende ruht und sich entlang der Strecke bewegt, als würde sie den Weg darüber testen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, state ### Trash icon https://fieldbook.lizardi.mx/de/components/icon-trash Ein Behälter, dessen Deckel an seinem Scharnier hochgeklappt und zurückgeklappt werden kann, mit einem glatten oder gerippten Gehäuse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Unplug icon https://fieldbook.lizardi.mx/de/components/icon-unplug Eine Steckdose und ein Stecker stehen einander gegenüber und ihre Stifte dürfen sich nicht berühren. Der Stecker gleitet weiter heraus und zurück. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate ### Upload icon https://fieldbook.lizardi.mx/de/components/icon-upload Ein Pfeil, der für Sende- und Veröffentlichungsaktionen aus einem Fach oder in eine Wolke gehoben wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, variant ### Volume icon https://fieldbook.lizardi.mx/de/components/icon-volume Ein Lautsprecherkegel mit Wellen, die von seiner Mündung nach außen erklingen, oder ein gezeichneter Schrägstrich und ein Kreuz, wenn der Ton abgeschnitten wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, level ### Wifi icon https://fieldbook.lizardi.mx/de/components/icon-wifi Bögen, die sich von einem durchgezogenen Punkt aus nach außen wellen, ein Bogen pro Kraftstufe, mit einem gezeichneten Schrägstrich für die Off-Anzeige. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color, animate, level ### X mark icon https://fieldbook.lizardi.mx/de/components/icon-x Ein Kreuz, das die Aktion, die es aufhebt, abschüttelt, wird einfach dargeboten oder in einem Kreis oder einem abgerundeten Quadrat gehalten. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, stroke, color, animate, variant ### Image panel login card https://fieldbook.lizardi.mx/de/components/image-panel-login-card Eine breite Anmeldekarte, die in einen Formularbereich und einen dekorativen Bildbereich unterteilt ist, mit einer Reihe von drei alternativen Anmeldeschaltflächen, die nur aus Symbolen bestehen, und einem Begriffstext darunter. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: heading, accentColor, imageSide ### Image panel signup card https://fieldbook.lizardi.mx/de/components/image-panel-signup-card Eine breite Anmeldekarte, aufgeteilt in ein Formularfeld und ein dekoratives Bildfeld, mit gepaarten Passwortfeldern und drei Anbieterschaltflächen, die nur aus Symbolen bestehen, unter einer Trennwand. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, accentColor, imageSide ### Select All Checklist https://fieldbook.lizardi.mx/de/components/indeterminate-select-all Ein übergeordnetes Kontrollkästchen, das einen Bindestrich anzeigt, wenn nur einige seiner untergeordneten Elemente aktiviert sind, und ein Häkchen, sobald alle Elemente aktiviert sind. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: itemCount, startState, accentColor ### Infinite loop path loader https://fieldbook.lizardi.mx/de/components/infinite-loop-path-loader Ein Lader in Form einer Acht, bei dem sich ein helles Segment endlos um eine schwache Spur zieht, wobei sich Kopf und Schwanz unterschiedlich schnell bewegen, damit das Armaturenbrett atmet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: strokeWidth, speed, accent, showTrack, label ### Initials avatar cluster https://fieldbook.lizardi.mx/de/components/initials-avatar-cluster Eine Reihe runder Initialen-Token, die eine Gruppe von Personen zusammenfassen und in einer gedämpften Überlaufzählung für den Rest enden. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, accentColor, overflowCount, gap ### Initials fallback avatar https://fieldbook.lizardi.mx/de/components/initials-fallback-avatar Ein einzelner Avatar, der ein Foto zeigt, wenn ihm eines gegeben wird, ansonsten zwei Initialen auf einer sanft getönten Form zentriert. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, shape, accent, label ### Ink bloom button https://fieldbook.lizardi.mx/de/components/ink-bloom-button Ein stark umrissener Knopf, dessen durchscheinende Tönung von einer massiven Akzentscheibe überlagert wird, die beim Hovern oder Tastaturfokus aus der Mitte herausblüht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, borderWidth, shadowOffset, duration, radius ### Inlaid edge button https://fieldbook.lizardi.mx/de/components/inlaid-edge-button Ein Knopf, der wie eine eingelegte Platte aufgebaut ist: ein beleuchteter Rand, eine darin versenkte Blende und eine Beschriftung, die aufleuchtet, wenn der Zeiger ankommt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, rimWidth, radius, labelGlow ### Inline command list https://fieldbook.lizardi.mx/de/components/inline-command-list Ein Suchfeld über gruppierten, filterbaren Aktionszeilen, das sich während der Eingabe verengt und eine Hervorhebung mit den Pfeiltasten verschiebt. Es soll inline und nicht in einem Dialog angezeigt werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: placeholder, accent, maxHeight ### Inline labeled bar chart https://fieldbook.lizardi.mx/de/components/inline-labeled-bar-chart Ein horizontales Balkendiagramm, bei dem der Kategoriename in jedem Balken und der Wert direkt hinter der Spitze gedruckt ist, sodass keine Achsenspalte erforderlich ist. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, barRadius, rowHeight, animate ### Inline term preview https://fieldbook.lizardi.mx/de/components/inline-term-preview Ein unterstrichener Begriff im Textkörper, der beim Schweben oder Fokussieren ein kleines Definitionsfenster öffnet, das von der Ecke, die dem Begriff am nächsten liegt, verkleinert wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: openDelay, closeDelay, width, accent ### Inner Dome Viewer https://fieldbook.lizardi.mx/de/components/inner-dome-viewer Eine Galerie mit Fotokacheln, die im Inneren einer rotierenden Kugel angeordnet sind und so gezogen werden, als würde man sich im Inneren einer Kuppel umsehen, mit Tipp zum Vergrößern. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: segments, maxVerticalRotation, grayscale, imageBorderRadius ### Inner Rim Send Button https://fieldbook.lizardi.mx/de/components/inner-rim-send-button Eine Sendetaste, die von innen durch einen weichen Lichtrand beleuchtet wird, der ihre Innenkante umschließt, mit einer hohlen, umrissenen Papierebene, die beim Schweben, Fokussieren und Drücken entlang ihrer eigenen Diagonale abhebt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, rim, launch, outline ### Input with affix https://fieldbook.lizardi.mx/de/components/input-group-affix Ein Textfeld, das wie ein URL-Schema mit einem führenden Symbol oder einer Kurzbezeichnung verschmolzen ist und eine umrandete Hülle teilt, die als einzelnes Steuerelement fungiert. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: prefixLabel, placeholder, accent, showIcon ### Inset Edge Pill https://fieldbook.lizardi.mx/de/components/inset-edge-pill-button Eine blasse Pille mit einem dünnen Ring rundherum und einer dickeren Lippe nur an der Unterseite, so dass sie wie ein physischer Schlüssel liest, der beim Schweben mit Farbe überflutet wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, lip, width, duration ### Breathing Inset Button https://fieldbook.lizardi.mx/de/components/inset-panel-send-button Ein hell geformter Knopf, dessen inneres Panel sich beim Schweben vom Rand löst, während das Sendezeichen ein kurzes Stück in Richtung der Beschriftung gleitet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, insetGap, glyphShift, radius ### Inset plate button https://fieldbook.lizardi.mx/de/components/inset-plate-button Ein Knopf in einem Knopf: Eine äußere Hülle hält eine kleinere schwimmende Platte, die das Etikett trägt, und durch Drücken schrumpft nur die innere Platte, während die Hülle an Ort und Stelle bleibt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, inset, pressScale, radius ### Inset sheen button https://fieldbook.lizardi.mx/de/components/inset-sheen-button Eine blasse Utility-Taste mit einem haarfeinen Rand, einer Hervorhebung von einem Pixel am oberen Rand und einem gedrückten Zustand, der den Glanz nach innen dreht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, radius, disabled ### Instant Hint Tooltip https://fieldbook.lizardi.mx/de/components/instant-hint-tooltip Eine kleine Beschriftung, die eingeblendet und skaliert wird, wenn Sie mit der Maus darüber fahren oder den Tastaturfokus neben einem Element anzeigen, um einen schnellen Hinweis zu geben, ohne sichtbare Unordnung zu verursachen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: openDelay, side, accentColor ### Intent button set https://fieldbook.lizardi.mx/de/components/intent-button-set Eine komplette Button-Familie in einer Datei: Solid-, Soft-, Outline-, Ghost-, Link- und Danger-Gewichtungen in vier Größen, mit Icon-Slots, einem Beschäftigt-Status und einem echten Fokusring. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: variant, size, accent, withIcon, busy, disabled ### Interactive spin globe https://fieldbook.lizardi.mx/de/components/interactive-spin-globe Eine schattierte Leinwandkugel, die sich langsam automatisch dreht, leuchtende Markierungen an verstreuten Stellen beleuchtet und von Hand gegriffen und gedreht werden kann. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, rotationSpeed, markerCount, glowIntensity ### Interlocking comb button https://fieldbook.lizardi.mx/de/components/interlocking-comb-button Zwei Kämme aus vertikalen Balken gleiten von oben und unten hinein und greifen ineinander, um den Knopf auszufüllen, wobei sie das Etikett beim Vorbeigehen umdrehen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, bars, duration, radius ### Interruptible hover swell https://fieldbook.lizardi.mx/de/components/interruptible-hover-swell Eine Kachel, deren zweistufiges Hover-Anschwellen immer bei ihrer aktuellen Größe beginnt, sodass sie beim Ein- und Ausschalten des Zeigers niemals einrastet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: stageOneScale, peakScale, duration, accent, showValue ### Invert and grow button https://fieldbook.lizardi.mx/de/components/invert-and-grow-button Ein umrandeter Block, der seine Tinten- und Papierfarben austauscht und beim Schweben aus seiner Mitte heraus wächst und dann flach unter der Presse einrastet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, growth, borderWidth ### Invert Fill Button https://fieldbook.lizardi.mx/de/components/invert-fill-button Eine kleine umrandete Schaltfläche, die sich beim Schweben ausfüllt, während ihre Beschriftung zum entgegengesetzten Wert wechselt und Vorder- und Hintergrund sauber vertauscht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, height, radius, duration ### Invert and lift button https://fieldbook.lizardi.mx/de/components/invert-lift-outline-button Eine große, umrandete Schaltfläche, die sich in eine durchgehende Füllung umwandelt, beim Schweben ein paar Pixel anhebt und beim Drücken wieder flach wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, lift, borderWidth ### Invert on hover pill https://fieldbook.lizardi.mx/de/components/invert-on-hover-pill Eine gefüllte Pille, die Füll- und Beschriftungsfarben austauscht und beim Schweben oder Tastaturfokus leicht anschwillt und beim Drücken unter ihre Ruhegröße schrumpft. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, hoverScale, radius, glow ### iPhone Device Frame https://fieldbook.lizardi.mx/de/components/iphone-device-frame Eine Vektor-Telefonblende mit einem Kameraausschnitt, der ein Foto, ein sich wiederholendes Video oder einen leeren Platzhalter in seinem eigenen abgerundeten Bildschirm umrahmt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: bezelTone, screenContent, accentColor ### Iridescent sheen https://fieldbook.lizardi.mx/de/components/iridescent-sheen Eine seidenartige Oberfläche, auf der das Licht entlang weicher Falten gleitet und zwischen zwei Farbtönen wechselt, wenn sich die Falten darunter bewegen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, partner, speed, amplitude, followPointer ### Iron filings field https://fieldbook.lizardi.mx/de/components/iron-filings-field Ein quadratisches Gitter aus winzigen Strichen, die sich alle drehen, um auf den Zeiger zu zeigen, wie Eisenspäne, die an einem darüber gezogenen Magneten einrasten. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gridSize, accent, dashLength, stiffness, idleDrift ### Isometric Stack Button https://fieldbook.lizardi.mx/de/components/isometric-stack-button Eine in isometrischer Projektion gezeichnete Schaltfläche, die sich beim Schweben in einen Stapel paralleler Kopien auffächert und beim Drücken wieder komprimiert wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, layers, spread ### Italic outline fill button https://fieldbook.lizardi.mx/de/components/italic-outline-fill-button Eine ruhig umrandete Schaltfläche in Kursivschrift, die sich in eine durchgehende Akzentfüllung umwandelt, sobald ein Zeiger oder eine Tastatur sie erreicht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, radius, italic, size ### Italic release pill button https://fieldbook.lizardi.mx/de/components/italic-release-pill-button Eine Pille mit doppeltem Rand, deren schweres, schräges Etikett sich beim Schweben aufrichtet, während die Füllung heller wird und ein farbiger harter Schatten darunter erblüht und dann darauf drückt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lean, tracking, glow ### Ivory keycap button https://fieldbook.lizardi.mx/de/components/ivory-keycap-button Eine helle Tastenkappe, die auf einem passenden Sims steht; Beim Schweben verdickt sich der eingelassene Rand und beim Drücken setzt er sich bündig mit der Oberfläche ab. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, capColor, label, travel, tracking ### Jello squash button https://fieldbook.lizardi.mx/de/components/jello-squash-button Ein umrissener Knopf, der beim Schweben mit Farbe überflutet wird und durch eine Squash- und Stretch-Sequenz wackelt, bevor er zur Ruhe kommt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, intensity, duration ### Jelly skew button https://fieldbook.lizardi.mx/de/components/jelly-skew-button Ein Pillenknopf, der wackelt, wenn Sie darüber schweben, sich einmal stark neigt und sich dann durch eine Reihe kleinerer und kleinerer Gegenschrägungen stabilisiert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, amplitude, duration, radius ### Jitter shake button https://fieldbook.lizardi.mx/de/components/jitter-shake-button Eine solide Pille, die in einer engen diagonalen Schleife summt, solange der Zeiger darauf ruht, und sofort stoppt, sobald Sie sie verlassen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, amplitude, speed ### Joined action bar https://fieldbook.lizardi.mx/de/components/joined-action-bar Eine Reihe von Knöpfen, die in eine Leiste eingeschweißt sind, mit zusammengelegten Haarliniennähten, nur an den äußeren Enden abgerundet, und einem abschließenden quadratischen Segment, das ein Überlaufmenü öffnet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: orientation, segments, size, showTextSegment, accent ### Joined Button Group https://fieldbook.lizardi.mx/de/components/joined-button-group Eine Reihe von Knöpfen, die Kante an Kante zu einem segmentierten Steuerelement verschmolzen sind, mit gemeinsamen Nähten, die zwischen den beiden Tasten, über die man den Mauszeiger bewegt oder die man drückt, heller werden. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: orientation, buttonCount, accent ### Key travel button https://fieldbook.lizardi.mx/de/components/key-travel-button Ein abgerundeter Schlüssel, der auf einem hohen Sockel steht, der sich beim Schweben verkürzt und unter dem Druck verschwindet, so dass der Schlüssel flach sitzt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, travel, tracking ### Key Turn Chip https://fieldbook.lizardi.mx/de/components/key-turn-chip Ein kleiner gefüllter Chip, dessen Schlüsselsymbol beim Schweben wackelt, als würde er nach einem Schloss suchen, sich dann um ein Viertel drehen und beim Klicken entriegeln. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, unlockedLabel, accent, jiggleDegrees, unlocked ### Keyboard Context Menu https://fieldbook.lizardi.mx/de/components/keyboard-context-menu Ein Dropdown-Aktionsmenü mit gruppierten Elementen, Tastaturkürzeln und einem verschachtelten Untermenü, das vollständig über die Tastatur gesteuert werden kann und über eine verschiebbare Fokushervorhebung verfügt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, showShortcuts, accentColor ### Keyboard Dropdown Menu https://fieldbook.lizardi.mx/de/components/keyboard-dropdown-menu Eine Auslöseschaltfläche öffnet eine schwebende Aktionsliste, deren Hervorhebungshintergrund reibungslos zwischen dem Element gleitet, auf dem sich der Mauszeiger befindet oder auf dem die Tastatur fokussiert ist, mit vollständiger Pfeiltasten- und Tipp-Navigation. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, itemCount, closeOnSelect ### Keyboard pill tabs https://fieldbook.lizardi.mx/de/components/keyboard-pill-tabs Ein Zwei-Tab-Umschalter mit einer Pillenmarkierung, die zwischen Beschriftungen gleitet, und vollständiger Tastaturnavigation mit beweglichem Fokus zwischen den Tabs. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: tabOneLabel, tabTwoLabel, accent, pillSpring ### Shortcut Key Chip https://fieldbook.lizardi.mx/de/components/keycap-combo-group Kleine Pillen-Tokens für einzelne Tasten, die inline gruppiert werden, um eine Tastenkombination zu bilden. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: comboText, accentColor, size, grouped ### Keycap lift button https://fieldbook.lizardi.mx/de/components/keycap-lift-button Ein mechanischer Tastenknopf, der sich beim Schweben anhebt, eine feste Unterlippe beibehält und beim Drücken seinen gesamten Schattenstapel nach innen verlagert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lipDepth, travel, height ### Keycap plate button https://fieldbook.lizardi.mx/de/components/keycap-plate-button Eine quadratische Platte, die eine abgerundete Taste umrahmt, die sich beim Drücken nach unten bewegt und gedrückt bleibt, während die Taste per Zeiger oder Tastatur gedrückt gehalten wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, travel, plateBorder, keyRadius ### Keycap press button https://fieldbook.lizardi.mx/de/components/keycap-press-button Eine helle Tastenkappe mit echter Dicke, die aus gestapelten harten Schatten besteht, die sich nach unten bewegt und beim Drücken an Höhe verliert. Frameworks: react Access: member Public prop names: label, accent, depth, travel, size ### Keyframe morph loop https://fieldbook.lizardi.mx/de/components/keyframe-morph-loop Ein Quadrat, das eine Schleifenroutine aus Wachsen, Drehen und Runden zu einem Kreis durchführt und dabei jede Pose beibehält, da die Timing-Stopps ungleichmäßig sind. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: duration, repeatDelay, maxScale, accent, paused ### Keystroke Text https://fieldbook.lizardi.mx/de/components/keystroke-text Der Text wird zeichenweise angezeigt, als würde er live eingegeben, mit einem blinkenden Cursor, der nach Abschluss der Eingabe weiterläuft. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: words, typeSpeedMs, loop, cursorColor ### Label icon swap button https://fieldbook.lizardi.mx/de/components/label-icon-swap-button Eine Pillentaste, die beim Schweben oder Fokussieren ihre Beschriftung herausschiebt und einen Tablettpfeil hineinschiebt und dann bei Fokussierung einen kurzen, sich wiederholenden Schlag auf dem Pfeil ausführt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, width, height, beat ### Rolling Label Button https://fieldbook.lizardi.mx/de/components/label-roll-button Eine kompakte leuchtende Pille, deren Beschriftung nach oben aus dem Blickfeld rollt und beim Schweben eine zweite Zeile von unten einblendet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, hoverLabel, accent, glow, rollMs ### Label swap slide button https://fieldbook.lizardi.mx/de/components/label-swap-slide-button Eine umrandete Pille, die beim Schweben ihren gesamten Inhalt vertauscht: Die ruhende Reihe gleitet nach oben und heraus, während eine zweite Reihe mit eigenem Symbol und eigener Farbe von unten hineingleitet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: restLabel, hoverLabel, accent, surface, direction ### Labeled checkbox https://fieldbook.lizardi.mx/de/components/labeled-checkbox Ein kleines quadratisches Kontrollkästchen gepaart mit einer Textbeschriftung, einfach dargestellt, mit Hilfstext, deaktiviert und als Karte, die ihren Rand hervorhebt, wenn sie aktiviert ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, helperText, showDisabled ### Labeled field block https://fieldbook.lizardi.mx/de/components/labeled-field-block Ein Formularfeld-Wrapper, der eine Beschriftung, ein Steuerelement, einen Hinweis und eine Fehlermeldung koppelt und zwischen gestapelten und nebeneinander liegenden Layouts wechselt, wenn der Container schmaler wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: orientation, invalid, disabled, accent, gap ### Labeled hairline divider https://fieldbook.lizardi.mx/de/components/labeled-hairline-divider Eine dünne Linie, die zwei Abschnitte trennt und optional unterbrochen wird, um eine kleine zentrierte Beschriftung zwischen zwei kurzen Linien anzuzeigen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: orientation, label, accent, thickness ### Labeled progress bar https://fieldbook.lizardi.mx/de/components/labeled-progress-bar Eine beschriftete Fortschrittsspur, deren Füllung sich auf eine neue Breite ausdehnt, während eine Prozentanzeige gleichmäßig zählt, um mit ihr übereinzustimmen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: value, accentColor, label, trackHeight ### Labeled radio group https://fieldbook.lizardi.mx/de/components/labeled-radio-group Eine kompakte vertikale Gruppe von Radiooptionen mit jeweils einer Inline-Textbeschriftung für eine einzelne Einstellungsauswahl. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, defaultValue ### Labeled toggle row https://fieldbook.lizardi.mx/de/components/labeled-toggle-row Ein kleiner Ein-/Ausschalter, gepaart mit einer eigenen Textbeschriftung, in der Größe einer Einstellungslistenzeile. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, checked, accent, size ### Lagging orb follower https://fieldbook.lizardi.mx/de/components/lagging-orb-follower Eine weiche Scheibe, die auf einer bewusst nachgiebigen Feder dem Zeiger nachjagt, an ihm vorbeischwingt und zurückwackelt, anstatt festzuhalten. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: stiffness, damping, size, accent, showTether ### Latching icon toggle https://fieldbook.lizardi.mx/de/components/latching-icon-toggle Ein quadratischer Knopf, der ein- und ausgeschaltet werden kann: Eine gefüllte Platte wird eingeblendet, die Glyphe wird durch das entsprechende Gegenstück ersetzt und eine Beschriftung daneben verdeutlicht den Zustand in Worten. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: glyph, startPressed, accent, size, showCaption ### Latching square toggle https://fieldbook.lizardi.mx/de/components/latching-square-toggle Eine kompakte, quadratische Symbolschaltfläche, die zwischen einem schwach umrissenen Aus-Zustand und einem durchgehenden, mit Akzenten gefüllten, gedrückten Zustand wechselt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: pressed, size, disabled, accentColor ### Launch orbit button https://fieldbook.lizardi.mx/de/components/launch-orbit-button Eine Pille, die auf einer Schleife einen Ring nach außen spuckt, beim Schweben ihre Staubkörnchen verstreut und ein kleines Schiff über das Etikett kreisen lässt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, dotCount, pulse, flightMs ### Launching send button https://fieldbook.lizardi.mx/de/components/launching-send-button Eine Sendeschaltfläche, deren Papierebene sich nach oben neigt und beim Schweben vom rechten Rand abfliegt, während sich das Wort auflöst, und dann von links wieder eindringt, nachdem ein Klick den Flug bestätigt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, flyDistance, bankDegrees, bloom ### Layered Context Menu https://fieldbook.lizardi.mx/de/components/layered-context-menu Ein Rechtsklick-Menü mit gruppierten Aktionen, einem verschachtelten Untermenü, Kontrollkästchenelementen und einer Optionsgruppe, die sich alle an der Position des Zeigers öffnen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: surfaceLabel, accent ### Layered ring loader https://fieldbook.lizardi.mx/de/components/layered-ring-loader Ein zentriertes Emblem aus konzentrischen Teilringen, die sich mit unterschiedlicher Geschwindigkeit und Richtung drehen, darunter werden ein Statustitel und ein Untertitel eingeblendet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: title, subtitle, size, ringColor ### Layered shadow headline https://fieldbook.lizardi.mx/de/components/layered-shadow-headline Eine kurze, fette Überschrift mit einem dahinter versetzten Duplikat, diagonal schraffiert in einer Akzentfarbe, die langsam verschiebt, um den Buchstaben einen beweglichen Schatten zu verleihen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, accent, offset, speed ### Layered trend chart https://fieldbook.lizardi.mx/de/components/layered-trend-chart Ein Kombinationsdiagramm, das eine Balkenreihe, eine gefüllte Fläche und eine Linie auf einer gemeinsamen Zeitachse überlagert, sodass Volumen, kumulative Summe und Rate zusammen gelesen werden können. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: lineColor, areaColor, showBars, showArea ### Layout toggle switch https://fieldbook.lizardi.mx/de/components/layout-toggle-switch Ein Schalter, dessen Knopf die Spur kreuzt, indem er eine tatsächliche Layoutänderung anstelle einer Verschiebung animiert, sodass der Ausschlag bei jeder Spurbreite exakt bleibt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: on, accent, bounce, trackWidth, showLabels ### Leader line pie https://fieldbook.lizardi.mx/de/components/leader-line-pie Ein solides Kreisdiagramm, dessen Werte außerhalb des Kreises liegen und jeweils durch eine aus zwei Segmenten bestehende Führungslinie an ihren Ausschnitt gebunden sind. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, hueRange, labelDistance, showLeaders, gap ### Leap and tint button https://fieldbook.lizardi.mx/de/components/leap-and-tint-button Eine blasse Pille, die beim Schweben oder Fokussieren nach oben springt, während sich ihre Füllung in den Akzent verwandelt und ihr neutraler Schatten zu einem großen, getönten Pool im gleichen Farbton erblüht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, leapDistance, shadowSpread, letterSpacing ### Left Edge Fill Button https://fieldbook.lizardi.mx/de/components/left-edge-fill-button Eine weiche, abgerundete Platte, bei der beim Schweben ein farbiges Feld aus dem linken Rand herauswächst, um die gesamte Form auszufüllen und dabei das Etikett umzudrehen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, radius, duration, sinkOnPress ### Left Rule Notice https://fieldbook.lizardi.mx/de/components/left-rule-notice Eine leise Box-Nachricht, deren Ton von einem einzelnen dicken farbigen Lineal getragen wird, das am linken Rand entlang verläuft. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: tone, accent, title, message, dismissible ### Letter cascade button https://fieldbook.lizardi.mx/de/components/letter-cascade-button Ein breiter, fester Knopf, dessen zentrierte Beschriftung wegfällt und Buchstabe für Buchstabe neu aufgebaut wird, während jedes Zeichen von oben an seinen Platz fällt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, stagger, tracking, sink ### Letter drop press button https://fieldbook.lizardi.mx/de/components/letter-drop-press-button Eine Tastenkappentaste auf einer dunkleren Leiste, deren Beschriftung beim Schweben verschwindet und von oben Buchstabe für Buchstabe neu aufgebaut wird, wobei sie beim Klicken auf die Leiste drückt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, stagger, ledge, tracking ### Letter roll in https://fieldbook.lizardi.mx/de/components/letter-roll-in Eine Textzeile, in der sich jedes Zeichen um eine horizontale Achse dreht und das alte Gesicht wegrollt, während ein identisches Gesicht von unten hereinrollt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, stagger, delay, accent, duration ### Letter spread drop button https://fieldbook.lizardi.mx/de/components/letter-spread-drop-button Eine blasse Pille, deren Buchstaben sich auseinanderschieben, während sie sich mit einer Akzentfarbe füllt und unter der sich ein weicher Teich bildet, der dann, während er gehalten wird, auf diesen Teich fällt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, spread, dropPx, poolSize ### Letter swap copy button https://fieldbook.lizardi.mx/de/components/letter-swap-copy-button Ein erhabener Kopierknopf, dessen Beschriftung sich beim Schweben Buchstabe für Buchstabe neu aufbaut, während sein Symbolchip pulsiert und einen Scheck zieht, wenn die Kopie landet. Frameworks: react Access: open Public prop names: label, doneLabel, accent, stagger, resetMs ### Lift and fill pill https://fieldbook.lizardi.mx/de/components/lift-and-fill-pill Eine umrissene Pille, die eine feste Distanz gerade nach oben springt und sich beim Zeigen mit ihrem Akzent vollständig ausfüllt und dann auf derselben Kurve zurückfällt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, lift, radius, duration ### Lift and settle button https://fieldbook.lizardi.mx/de/components/lift-and-settle-button Eine durchgezogene Schaltfläche, die nach oben schwebt und beim Schweben die Akzentfarbe annimmt und dann beim Drücken über ihre Ruhelinie hinaus in einen reduzierten Schatten sinkt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lift, pressDepth, radius ### Lift and Sink Button https://fieldbook.lizardi.mx/de/components/lift-and-sink-button Eine getönte Monospace-Taste, die beim Schweben nach oben schwebt und beim Drücken in ihrem eigenen Schatten versinkt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, travel, height ### Lifting glyph row https://fieldbook.lizardi.mx/de/components/lifting-glyph-button-row Eine kurze Reihe von Nur-Symbol-Schaltflächen, bei denen sich die schwebende Glyphe von der Grundlinie abhebt, während dahinter ein sanfter kreisförmiger Farbton eingeblendet wird, wobei jedes Element in seinem eigenen Farbton getönt ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: count, accent, lift, size, varyHues ### Lifting hard shadow pill https://fieldbook.lizardi.mx/de/components/lifting-hard-shadow-pill Eine dick umrissene Pille, die beim Schweben nach oben und nach links driftet, während sich ihr flacher, fester Schatten darunter ausdehnt und beim Halten bündig gegen die Seite drückt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, restShadow, hoverShadow, radius, outline ### Lifting share chip https://fieldbook.lizardi.mx/de/components/lifting-share-chip Ein kleiner fester Chip mit einem Glyphen und einer kurzen Kappenbeschriftung, der sich beim Schweben um einige Pixel anhebt und weicher wird, sich beim Drücken einrastet und ein gefülltes Glyph umschalten kann. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, glyph, lift ### Light Beam Flare https://fieldbook.lizardi.mx/de/components/light-beam-flare Ein schmaler Strahl fällt von der Spitze einer dunklen Bühne in einen breiten horizontalen Lichtkegel mit treibendem Dunst und einem Strahl, der sich zum Zeiger hin neigt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, flowSpeed, hazeIntensity, beamWidth, tiltStrength ### Light beam slats https://fieldbook.lizardi.mx/de/components/light-beam-slats Lange diagonale Lamellen gleiten im Dunkeln aneinander vorbei und fangen beim Überqueren jeweils einen Lichtstreifen ein, sodass die Platte wie eine beleuchtete Jalousie atmet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, beamCount, beamWidth, tilt, speed, grain ### Light column beam https://fieldbook.lizardi.mx/de/components/light-column-beam Eine einzelne Lichtsäule steht in einem dunklen Rahmen und atmet in die Breite, während ihre innere Textur durch einen Zweifarbgrad nach oben scrollt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: topColor, bottomColor, intensity, width, rotationSpeed, followPointer ### Light cone beam https://fieldbook.lizardi.mx/de/components/light-cone-beam Ein körniger Lichtkeil flammt von einer heißen Linie am Fuß des Rahmens auf und dreht sich langsam, sodass seine Ränder unterschiedliche Farben einfangen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tint, glow, grain, baseWidth, motion, speed ### Light pool button https://fieldbook.lizardi.mx/de/components/light-pool-button Ein beleuchteter Röhrenzeichenknopf, der einen verschwommenen Pool seiner eigenen Farbe auf die Oberfläche darunter ergießt und beim Schweben oder Fokussieren die Figur gegen den Boden tauscht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, intensity, poolSize, invertOnHover ### Light sweep button https://fieldbook.lizardi.mx/de/components/light-sweep-button Ein ruhig umrissener Knopf, dessen Buchstaben und haarfeine Umrandung von einem diagonalen Lichtbalken beleuchtet werden, der über die Fläche streicht, eine Sekunde innehält und erneut streicht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, sweepMs, restMs, bandWidth ### Light sweep effect https://fieldbook.lizardi.mx/de/components/light-sweep-effect Ein diagonales Lichtband, das einmal über eine Schaltfläche streicht und durch Bewegen, Tippen oder einen sich wiederholenden Timer ausgelöst wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: trigger, duration, angle, accent ### Light sweep button https://fieldbook.lizardi.mx/de/components/light-sweep-outline-button Eine beleuchtete Umrisstaste, deren leuchtende Kante beim Schweben ein schmales Lichtband darüber streichen lässt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, glow, duration ### Light Threads https://fieldbook.lizardi.mx/de/components/light-thread-fan Leuchtende Filamente fächerten sich von einem einzigen Quetschpunkt aus auf, verflochten sich, während ihre Phasen fortschritten, und flackerten an der Stelle, an der sie sich kreuzten, fast weiß auf. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, threads, speed, spread, glow ### Line by line headline reveal https://fieldbook.lizardi.mx/de/components/line-by-line-headline-reveal In einer Überschrift wird jeweils eine vollständig umbrochene Zeile angezeigt: Jede Zeile wird von links nach rechts geöffnet, als würde sich ein Vorhang heben, während ein farbiges Häkchen an der Hinterkante landet und erleuchtet bleibt und eine sichtbare Spur hinterlässt, sobald sich die Sequenz beruhigt hat. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, staggerMs, riseDistance, accent ### Link preview card https://fieldbook.lizardi.mx/de/components/link-preview-card Ein kleines Vorschaufenster, das nach einem kurzen Hover neben einem Link oder Benutzernamen erscheint und eine Zusammenfassung dessen anzeigt, was sich dahinter verbirgt, ohne dass ein Klick erforderlich ist. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: openDelay, closeDelay, side ### Link Preview Card https://fieldbook.lizardi.mx/de/components/link-preview-card-2 Eine umfangreiche Vorschaukarte, die von der Seite, auf der sie geöffnet wird, eingeblendet und eingeblendet wird, wenn Sie mit der Maus über einen verknüpften Namen fahren, mit einer kurzen Verzögerung, um ein Flackern zu vermeiden. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: side, align, openDelay, accent ### Link thumbnail peek https://fieldbook.lizardi.mx/de/components/link-thumbnail-peek Wenn Sie mit der Maus über einen Link im laufenden Text fahren, wird eine kleine gerahmte Miniaturansicht angezeigt, die zeigt, wohin er führt, mit dem Seitentitel und dem Host darunter. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: openDelay, cardWidth, side, accent, showCaption ### Link thumbnail peek https://fieldbook.lizardi.mx/de/components/link-thumbnail-peek-2 Ein Inline-Link, der über dem Wort ein kleines simuliertes Miniaturbild seines Ziels entfaltet, während der Zeiger darauf ruht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: openDelay, side, width, accent, showCaption ### Link Thumbnail Peek https://fieldbook.lizardi.mx/de/components/link-thumbnail-peek-3 Ein Inline-Link, der eine kleine Miniaturansicht seines Ziels über dem Text einblendet, während der Zeiger darauf ruht. Frameworks: react Access: member Public prop names: openDelay, side, width, accent, showCaption ### Linked Profile Preview https://fieldbook.lizardi.mx/de/components/linked-profile-preview Eine umfangreiche Vorschaukarte, die angezeigt wird, wenn ein Besucher mit der Maus über einen verknüpften Namen fährt oder diesen fokussiert. Sie zeigt einen Avatar, eine Biografie und Follower-Statistiken sowie optional einen Cursor-Folge-Float. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, followCursor, accent, openDelay ### Liquid chrome emblem https://fieldbook.lizardi.mx/de/components/liquid-chrome-emblem Ein gezeichnetes Emblem, das als gegossenes flüssiges Metall wiedergegeben wird, dessen Glanzlichter sich über die Form bewegen und sammeln, während sich der Zeiger bewegt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: speed, refraction, patternScale, tint, contrast, followPointer ### Liquid metal drift https://fieldbook.lizardi.mx/de/components/liquid-metal-drift Vom Rand beleuchtete Klumpen schwerer Flüssigkeit bilden sich, dehnen sich aus und verschmelzen über ein schwarzes Feld und wölben sich zum Zeiger hin wie Eisenspäne zu einem Magneten. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rimColor, speed, sharpness, flowDirection, glow, pointerMagnet ### Liquid metal swirl https://fieldbook.lizardi.mx/de/components/liquid-metal-swirl Geschmolzene Bänder wickeln sich um einen heißen Kern und schleudern dünne, helle Fäden nach außen, während sich die gesamte Masse umdreht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, speed, swirl, glow, detail, grain ### Liquid swirl vortex https://fieldbook.lizardi.mx/de/components/liquid-swirl-vortex Zwei Pfützen dicker Farbe, gefaltet um einen langsamen Strudel, mit harten Kanten und klobigen Pixeln, die den Eindruck erwecken, gedruckt und nicht gerendert zu sein. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: colorA, colorB, spinSpeed, swirlAmount, pixelSize, autoRotate ### Liquid warp headline https://fieldbook.lizardi.mx/de/components/liquid-warp-headline Eine auf Leinwand gezeichnete Schlagzeile, die sich biegt und kräuselt wie Licht durch Wasser, wobei sich die Verzerrung überall dort sammelt, wo der Zeiger schwebt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: headline, textColor, warpStrength, speed, ripple ### Liquid wave button https://fieldbook.lizardi.mx/de/components/liquid-wave-button Eine dunkle Pille, halbvoll mit farbiger Flüssigkeit, deren Oberfläche in einer kontinuierlichen, sich nie wiederholenden Welle rollt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, liquid, level, waveSeconds, paused ### Live keycap https://fieldbook.lizardi.mx/de/components/live-keycap Eine physisch aussehende Tastenkappe, die beim Klicken nach unten gedrückt wird und die entsprechende Taste auf der echten Tastatur des Lesers widerspiegelt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: keyLabel, accent, travel, watchKeyboard, tone ### Loading Placeholder Blocks https://fieldbook.lizardi.mx/de/components/loading-placeholder-blocks Verdunkeln Sie abgerundete Platzhalterblöcke, die für einen Avatar und gestapelte Textzeilen stehen, während der Inhalt geladen wird, und synchronisieren Sie sie mit einem diagonalen Lichtband. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: loaded, rows ### Localized booking calendar https://fieldbook.lizardi.mx/de/components/localized-booking-calendar Eine Zwei-Monats-Bereichsauswahl innerhalb einer Karte, deren Titel, Untertitel und Monatsnamen über ein kleines Auswahlmenü in der Kopfzeile zwischen zwei Sprachen wechseln. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: language, title, accent ### Locked ratio frame https://fieldbook.lizardi.mx/de/components/locked-ratio-frame Ein Container, dessen Inhalt unabhängig von der Ausdehnung in einem gewählten Verhältnis von Breite zu Höhe bleibt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: ratio, radius, accentColor ### Looping flight send button https://fieldbook.lizardi.mx/de/components/looping-flight-send-button Eine kartenähnliche Sendeschaltfläche, die beim Schweben ihren Schatten abhebt, während ihre Papierebene sich nach oben und unten bewegt und beim Klicken flach zusammengedrückt wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lift, loopSeconds, arcHeight ### Looping text ribbon https://fieldbook.lizardi.mx/de/components/looping-text-ribbon Ein farbiges Band trägt einen sich wiederholenden Satz entlang einer wellenförmigen, kreisförmigen oder bogenförmigen Bahn und rollt endlos wie ein Siegel oder Abzeichen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: phrase, shape, ribbonColor, speed, pauseOnHover ### Looping typewriter text https://fieldbook.lizardi.mx/de/components/looping-typewriter-text Eine Textzeile tippt sich Zeichen für Zeichen ein, hält an, löscht wieder ins Nichts und gibt den nächsten Satz aus einer Liste ein, wobei sie ewig hinter einem blinkenden Caretzeichen weiterläuft. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: phrases, typeSpeed, holdSeconds, accent ### Lozenge swipe highlight https://fieldbook.lizardi.mx/de/components/lozenge-swipe-highlight-button Ein nacktes Monospace-Etikett mit einer farbigen Raute auf der rechten Seite, die beim Schweben darüber gleitet und sich zu einem vollen Highlight ausdehnt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, dotSize, springiness, durationMs ### Luminous ribbon field https://fieldbook.lizardi.mx/de/components/luminous-ribbon-field Ein Leinwandhintergrund, auf dem sich ein paar leuchtende Bänder über den Rahmen winden, an beiden Rändern spitz zulaufen und dort, wo sie sich kreuzen, ins Weiße übergehen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: ribbonCount, accent, speed, thickness, glow ### Magnetic button https://fieldbook.lizardi.mx/de/components/magnetic-button Eine Schaltfläche, die sich auf den Zeiger zubewegt, während er sich innerhalb eines festgelegten Radius befindet, und in die Ruhestellung zurückspringt, wenn er ihn verlässt, wobei sich die Beschriftung und der Pfeil etwas weiter als der Körper verschieben. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: strength, radius, label ### Magnetic dust button https://fieldbook.lizardi.mx/de/components/magnetic-dust-button Ein Pillenknopf, umgeben von losen Staubkörnchen, die beim Schweben in die Mitte strömen und beim Loslassen wieder an ihre eigenen Ruheplätze abdriften. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, speckCount, spread, pull ### Magnetic particle ring https://fieldbook.lizardi.mx/de/components/magnetic-particle-ring Ein schwebendes Feld winziger Punkte, die der Zeiger einfängt, zu einem welligen Ring neu anordnet und sie bei der Weiterbewegung wieder freigibt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, ringRadius, magnetRadius, wave, autoDrift, accent ### Magnetic project target https://fieldbook.lizardi.mx/de/components/magnetic-project-target Ein benutzerdefinierter runder Cursor mit umlaufendem Text, der dem Zeiger folgt und bei Annäherung an einer Call-to-Action-Pille einrastet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, backdropWord, rimText, accent, captureRadius, followLag ### Magnetic pull target https://fieldbook.lizardi.mx/de/components/magnetic-pull-target Eine Kachel, die sich in Richtung des Zeigers neigt, wenn sie sich innerhalb eines festgelegten Radius befindet, wobei sie umso stärker zieht, je näher sie kommt, und sich nach unten bewegt, wenn der Zeiger ihn verlässt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: strength, range, onlyOnHover, showRadius, accent ### Magnifying icon dock https://fieldbook.lizardi.mx/de/components/magnifying-icon-dock Eine Reihe von App-Symbolen in einer durchsichtigen Leiste, die größer werden, je näher der Zeiger einem einzelnen Symbol kommt, und wieder auf die normale Größe zurückkehren, wenn der Zeiger weggeht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, baseSize, magnification, iconCount ### Magnifying icon dock https://fieldbook.lizardi.mx/de/components/magnifying-icon-dock-2 Ein Dock im macOS-Stil mit kreisförmigen Symbolschaltflächen, die sich gleichmäßig vergrößern, wenn sich der Zeiger ihnen nähert, und eine Beschriftung über dem aktiven Symbol anzeigen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: baseItemSize, magnification, itemCount ### Marker highlight https://fieldbook.lizardi.mx/de/components/marker-highlight-text Eine Phrase mit einem Markierungsband, das von links nach rechts dahinter verläuft, wenn die Zeile zum ersten Mal sichtbar ist, sodass die Wörter auf einem Farbblock bleiben. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, duration, delay, bandHeight, skew ### Marquee reveal menu https://fieldbook.lizardi.mx/de/components/marquee-reveal-menu Ein Stapel von Zeilen mit voller Höhe, bei dem beim Schweben über eine Zeile ein scrollendes farbiges Band ihrer Beschriftung und eine Miniaturansicht von der nächsten Kante des Zeigers eingeblendet werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rowCount, marqueeSpeed, bandColor ### Mascot zoom play button https://fieldbook.lizardi.mx/de/components/mascot-zoom-play-button Eine umrissene Pille mit einem kleinen Pixelmaskottchen, das sich vergrößert und beim Schweben darüber gleitet, wobei ein Wort auf der rechten Seite herausgeschoben wird, während ein zweites Wort von der linken Seite eintrifft. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: restLabel, hoverLabel, accent, zoom, staggerMs ### Masked Reveal Accordion https://fieldbook.lizardi.mx/de/components/masked-reveal-accordion Ein Akkordeon, dessen Felder beim Öffnen von einer sich bewegenden Maske mit harten Kanten freigelegt werden, sodass Antworten Zeile für Zeile angezeigt werden, anstatt als Block zu verschwinden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, keepMounted, travel, duration, curve ### Masked reveal disclosure https://fieldbook.lizardi.mx/de/components/masked-reveal-disclosure Eine Offenlegung, deren Panel auf seine natürliche Höhe anwächst, während ein weicher Verlaufsrand den Inhalt von oben ins Blickfeld wischt und beim Schließen dann rückwärts läuft. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, defaultOpen, durationMs, keepRendered, accent ### Masonry flow https://fieldbook.lizardi.mx/de/components/masonry-flow Eine Mauerwerkswand, die Kacheln unterschiedlicher Höhe in Säulen packt, jede einzelne anhebt, während sie ins Blickfeld gescrollt wird, und das gesamte Raster neu positioniert, wenn sich die Anzahl der Säulen ändert. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: columns, gap ### Media masked heading https://fieldbook.lizardi.mx/de/components/media-masked-heading Eine fett gedruckte Überschrift fungiert als ausgeschnittenes Fenster für die dahinter schwebenden Medien, die sich für ein Parallaxengefühl gegenüber dem Zeiger neigen und ihre Enthüllung beim Schweben wiedergeben können. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, reveal, parallax, align ### Meeting Slot Scheduler https://fieldbook.lizardi.mx/de/components/meeting-slot-scheduler Eine Buchungskarte, die ein Monatsraster neben einer scrollbaren Liste von Zeitfenstern im Viertelstundentakt einfügt, einige Daten deaktiviert und durchgestrichen anzeigt und in einer Zusammenfassungszeile und einer Schaltfläche „Weiter“ endet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, slotMinutes, unavailableCount ### Mega nav menu https://fieldbook.lizardi.mx/de/components/mega-nav-menu Eine horizontale obere Navigationsleiste, deren Auslöser Dropdown- oder Mega-Panels öffnen, die sich ein animiertes Ansichtsfenster teilen, dessen Größe sich an den Inhalt jedes Panels anpasst. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, openOnHover, panelWidth ### Merging blob backdrop https://fieldbook.lizardi.mx/de/components/merging-blob-backdrop Ein breiter Hintergrund aus übergroßen weichen Klecksen, die auf versetzten Schleifen gleiten und kreisen und zu einer flüssigen Masse verschmelzen, wobei sie überall dort, wo sie sich treffen, verschwimmen und an der Schwelle passieren. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, secondary, blobCount, speed, softness, followPointer ### Meshing gears chip https://fieldbook.lizardi.mx/de/components/meshing-gears-chip Ein Einstellchip mit zwei ineinandergreifenden Zahnrädern, die sich in entgegengesetzte Richtungen drehen, wenn sich der Zeiger darauf befindet, und zwar mit einer Geschwindigkeit, die durch die Anzahl ihrer Zähne bestimmt wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, spinSeconds, secondGear ### Meteor shower https://fieldbook.lizardi.mx/de/components/meteor-shower Winzige helle Köpfe mit dünnen nachlaufenden Streifen fallen in einem gemeinsamen Winkel über ein Panel, jeder mit seiner eigenen Verzögerung und Geschwindigkeit. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: count, angle, minDuration, maxDuration, tailLength, accentColor ### Metric switch bar chart https://fieldbook.lizardi.mx/de/components/metric-switch-bar-chart Ein dichtes tägliches Balkendiagramm mit zwei metrischen Kacheln in der Kopfzeile; Wenn Sie auf eine Kachel klicken, werden die Balken in diese Metrik umgewandelt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, secondColor, days, defaultMetric, animate ### Milestone progress track https://fieldbook.lizardi.mx/de/components/milestone-progress-track Eine Fortschrittsanzeige, die in Viertelintervallen markiert ist, mit einer großen Zählzahl darüber und bestandenen Häkchen, die aufhellen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: value, accentColor, trackHeight, showTicks ### Minimal email login https://fieldbook.lizardi.mx/de/components/minimal-email-login Eine passwortfreie Anmeldeseite mit einem kleinen Markenzeichen, einer Begrüßungsüberschrift, einem erforderlichen E-Mail-Feld, einer einzelnen Schaltfläche zum Senden und zwei alternativen Anmeldeoptionen unter einer Trennlinie. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: brandName, accentColor ### Minimal email sign in https://fieldbook.lizardi.mx/de/components/minimal-email-sign-in Eine passwortfreie Anmeldeseite mit einem Markenzeichen, einer Begrüßungsüberschrift, einem E-Mail-Feld, einer primären Schaltfläche und zwei alternativen Anmeldeoptionen unter einer Trennlinie. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: brandName, accentColor, welcomeText ### Minimal Single Date Picker https://fieldbook.lizardi.mx/de/components/minimal-single-date-picker Ein einfacher Einzelmonatskalender mit einer Klartext-Monats- und Jahresüberschrift und zwei Pfeilschaltflächen, der für die Auswahl eines Datums mit möglichst wenigen visuellen Teilen konzipiert ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, startMonth, startYear, bordered ### Minimum-Stay Range Picker https://fieldbook.lizardi.mx/de/components/minimum-stay-range-picker Eine Einzelmonatsbereichsauswahl, die eine Mindestanzahl von Nächten zwischen den beiden ausgewählten Daten erzwingt, mit einer kurzen Überschrift unter dem Raster, die die Regel erklärt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, minNights, startMonth, startYear ### Mirror warp field https://fieldbook.lizardi.mx/de/components/mirror-warp-field Ein vollflächiges Blatt aus poliertem Metall, das sich immer wieder faltet, mit einer Delle, die sich überall dort ausbreitet, wo der Zeiger sie berührt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: tint, speed, foldDepth, waveX, waveY, interactive ### Mobile date drawer https://fieldbook.lizardi.mx/de/components/mobile-date-drawer Ein für die Berührung gestaltetes Datumsfeld, das seinen Kalender als unteres Blatt öffnet, das vom Rand des Rahmens nach oben gleitet, und nicht als kleines schwebendes Popover. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, caption ### Model picker prompt box https://fieldbook.lizardi.mx/de/components/model-picker-prompt-box Ein Eingabeaufforderungs-Composer mit einem automatisch wachsenden Feld, einem Dropdown-Menü zur Auswahl des Assistenten, der die Anfrage bearbeitet, einem Steuerelement zum Anhängen und einer Sendeaktion. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, headline, accent, maxRows, showAttach ### Molded bevel button https://fieldbook.lizardi.mx/de/components/molded-bevel-button Ein hartkantiger Plattenknopf mit vier eingesetzten abgeschrägten Bändern, einem verwischungsfreien, versetzten Schatten und einer Presse, die ihn bündig auf die Oberfläche fallen lässt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, bevelWidth, dropDepth, uppercase ### Molded key send button https://fieldbook.lizardi.mx/de/components/molded-key-send-button Ein aus der Seite selbst geformter Sendeknopf: eine erhabene äußere Hülle, die eine vertiefte innere Pille mit einem Papierflieger und einem Etikett enthält. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, radius, depth, showIcon ### Month grid date picker https://fieldbook.lizardi.mx/de/components/month-grid-date-picker Ein einmonatiges Kalenderraster zum Auswählen eines Datums, mit einer Wochentagsüberschrift, gedämpften Tagen aus benachbarten Monaten, einem ausgefüllten Akzentkreis am ausgewählten Tag und einem Punkt, der den heutigen Tag markiert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, showOutsideDays, weekStartsMonday ### Mood swap button https://fieldbook.lizardi.mx/de/components/mood-swap-button Ein runder Knopf mit einem gezeichneten Gesicht, der beim Schweben und Drücken den Gesichtsausdruck ändert und beim Klicken die Stimmung fixiert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, accent, mood, showCaption, strokeWeight ### Morph image carousel https://fieldbook.lizardi.mx/de/components/morph-image-carousel Ein randloses Bildkarussell, bei dem Dias nicht aneinander vorbeischneiden oder aneinander vorbeigleiten, sondern optisch ineinander übergehen und sich verformen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: autoplay, autoplaySeconds, transitionStyle, showCaptions ### Morph menu icon https://fieldbook.lizardi.mx/de/components/morph-menu-icon Eine Menütaste, deren drei Balken kreuzförmig nach hinten springen, wobei die mittlere Sprosse zurückgezogen wird, wenn sich die beiden äußeren kreuzen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, stroke, color ### Morphing backdrop button https://fieldbook.lizardi.mx/de/components/morphing-backdrop-button Ein leeres Textetikett, das von einer farbigen Platte und einer durchscheinenden Eckscheibe unterstützt wird, die beim Schweben anschwellen und zu einer neuen Schaltflächenfläche quadratisch werden. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, discSize, duration, offset ### Morphing icon loop https://fieldbook.lizardi.mx/de/components/morphing-icon-loop Ein einzelnes gefülltes Symbol formt sich kontinuierlich in das nächste Symbol in einer kurzen Liste um, wobei seine Umrisse fließend von einer Silhouette zur nächsten übergehen, während sich seine Füllfarbe entsprechend ändert. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: intervalSeconds, morphSeconds, size, advanceOnClick ### Morphing icon toggle https://fieldbook.lizardi.mx/de/components/morphing-icon-toggle Ein kleines Symbol verändert seinen Umriss in einer stetigen Schleife kontinuierlich zwischen zwei Formen und zwei Farben. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: intervalSeconds, colorOne, colorTwo ### Morphing Pill Navbar https://fieldbook.lizardi.mx/de/components/morphing-pill-navbar Eine Reihe von Navigationsbeschriftungen in einer dunklen Pille, wobei die aktive Beschriftung in ihre eigene gefüllte Pille aufbricht und die verbleibenden Beschriftungen sich zu einer zweiten Pille zusammenschließen, die um sie herum neu fließt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultRoute, invertActivePill ### Morphing tab panel https://fieldbook.lizardi.mx/de/components/morphing-tab-panel Ein kleines Bedienfeld mit Registerkarten, in dem die aktive Unterstreichung zwischen den Registerkarten gleitet und die großen Glyphen des Bedienfelds sich übereinander bewegen, anstatt sich zu vertauschen, sodass die beiden Ansichten zusammenhängend wirken. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, indicator, duration, springy, showCaption ### Mount pop in https://fieldbook.lizardi.mx/de/components/mount-pop-in Eine Reihe von Formen, die in dem Moment, in dem sie aufsteigen, aus dem Nullpunkt springen, versetzt, sodass die Gruppe als eine Welle gelesen wird, mit einer Wiederholungstaste, um sie noch einmal anzusehen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: itemCount, bounce, duration, stagger, direction, accent ### Particle Field https://fieldbook.lizardi.mx/de/components/mouse-reactive-particle-field Ein Leinwandfeld aus weichen, schwebenden Punkten, die von selbst schweben und sich mit einer sanften magnetischen Anziehungskraft zum Zeiger neigen und sich zurückziehen, sobald er sich entfernt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: density, dotColor, driftSpeed, pullStrength ### Multi-Date Picker https://fieldbook.lizardi.mx/de/components/multi-date-picker Ein Zweimonatskalender zur Auswahl einer Handvoll einzelner, nicht aufeinanderfolgender Daten bis zu einer maximalen Anzahl, wobei jede Auswahl als eigener ausgefüllter Tag angezeigt wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, maxDates, startMonth, startYear ### Multi open panel stack https://fieldbook.lizardi.mx/de/components/multi-open-panel-stack Ein Stapel von Bedienfeldabschnitten, die unabhängig voneinander erweitert werden können, mit geschlossener Kopie, die über die Browser-Suche auf der Seite weiterhin erreicht werden kann. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, allowMultiple, findable, railWidth, duration ### Multi select toggle row https://fieldbook.lizardi.mx/de/components/multi-select-toggle-row Eine Reihe unabhängiger Umschalttasten, wie Textformatierungsoptionen, bei denen eine beliebige Zahl gleichzeitig gedrückt bleiben kann. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: variant, size, accentColor ### Muted social login https://fieldbook.lizardi.mx/de/components/muted-social-login Eine vollständige Anmeldeseite auf einem sanft getönten Hintergrund mit einem Markenzeichen, zwei Social-Sign-in-Schaltflächen, einer Trennwand sowie einem E-Mail- und Passwortformular auf einer Karte. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, accentColor, socialProviderCount ### Muted compact signup https://fieldbook.lizardi.mx/de/components/muted-two-column-fields-signup Eine Anmeldeseite mit einer zentrierten Karte auf einem gedämpft getönten Hintergrund, auf der sich die beiden Passwortfelder eine kompakte zweispaltige Zeile unter einer einzelnen Hilfszeile teilen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, accentColor ### Named point line https://fieldbook.lizardi.mx/de/components/named-point-line Eine Linie über fünf Kategorien, die jeden Kategorienamen über seinem Punkt anstelle einer Zahl druckt und den Wert der Hover-Anzeige überlässt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, labelSize, dotRadius, strokeWidth, showGrid ### Natural Language Date Field https://fieldbook.lizardi.mx/de/components/natural-language-date-field Ein Textfeld, das Sätze wie „in 2 Tagen“ oder „nächsten Freitag“ als echtes Datum liest, mit einem Kalender-Popover und einem Live-Vorschausatz darunter. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, phrase, previewPrefix ### Human Typing Rhythm https://fieldbook.lizardi.mx/de/components/natural-typing-sequence Tippt eine Reihe von Phrasen mit unregelmäßigem, menschenähnlichem Timing durch, löscht die meisten vor der nächsten, lässt die letzte Phrase jedoch auf dem Bildschirm, bevor die gesamte Sequenz in einer Schleife abläuft. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: typingSpeed, loopDelay, autoLoop, naturalVariance ### Neon ribbon tubes https://fieldbook.lizardi.mx/de/components/neon-ribbon-tubes Zwei leuchtende Röhren schlängeln sich über den Rahmen aneinander vorbei und sind überall, wo sie sich kreuzen, von Interferenzbändern umgeben. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: colorA, colorB, speed, bend, rotation ### Neon trail cursor https://fieldbook.lizardi.mx/de/components/neon-trail-cursor Ein sich verjüngender Lichtstrahl lief durch den aktuellen Weg des Zeigers, heiß und breit am Kopf, dünner werdend und zum Schwanz hin wechselnd. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: trailLength, width, followSpeed, idleFade, color, tailColor ### Nested bezel send button https://fieldbook.lizardi.mx/de/components/nested-bezel-send-button Drei verschachtelte Rahmen bilden einen klobigen physischen Knopf: eine äußere Lünette, eine schattierte Vertiefung und eine innere Kapsel, deren Glyphe sich beim Schweben um eine volle Umdrehung plus eine Vierteldrehung dreht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, spin, hoverScale, radius ### Nested capsule button https://fieldbook.lizardi.mx/de/components/nested-capsule-button Ein Pillenknopf, der aus drei ineinander verschachtelten Kapseln besteht, die sich beim Schweben in den äußeren Ring abflachen, während das Etikett zur Akzentfarbe überblendet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, showMark, gap, size ### Capsule in frame button https://fieldbook.lizardi.mx/de/components/nested-capsule-send-button Ein umrandetes äußeres Tablett, das eine schwebende innere Kapsel enthält, die für die Länge einer Presse im Rahmen versinkt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, frameGap, sinkDepth, borderWidth ### Nested File Browser https://fieldbook.lizardi.mx/de/components/nested-file-browser Ein zugänglicher Dateibaum, in dem mehrere Ordner in unterschiedlichen Tiefen gleichzeitig geöffnet bleiben können, verbunden durch verbindende Hilfslinien. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, indentSize, rowHeight, showGuideLines ### Nested file tree https://fieldbook.lizardi.mx/de/components/nested-file-tree Ein Verzeichnisbaum, dessen Ordner mit animierter Höhe, gezeichneten Einrückungshilfen und jeweils einer ausgewählten Datei erweitert und reduziert werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, indentSize, showGuides, startExpanded, maxHeight ### Nested panel frame https://fieldbook.lizardi.mx/de/components/nested-panel-frame Eine gedämpfte Außenhülle mit einem kompakten Kopf- und Fußzeilenstreifen, der ein oder mehrere klarere Einsatzfelder enthält und verwandte Inhalte mit klarer Tiefe gruppiert. Frameworks: react Access: open Public prop names: title, description, footer ### Nested plate send button https://fieldbook.lizardi.mx/de/components/nested-plate-send-button Eine geformte Pille, die in einer Trägerplatte sitzt, deren Schlagschatten sich beim Schweben verdichtet und beim Drücken flacher wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, depth, plateRadius, showIcon ### Share Of Total Area Chart https://fieldbook.lizardi.mx/de/components/normalized-share-area-chart Drei monatliche Serien wurden neu skaliert, sodass ihre Werte immer die volle Plothöhe ergeben, wodurch die Rohzählungen in ein Anteilsband umgewandelt werden, das sich immer auf einhundert Prozent summiert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, secondColor, thirdColor, showPercentAxis, animate ### Notched arc gauge https://fieldbook.lizardi.mx/de/components/notched-arc-gauge Eine Partiturskala, die aus sich verjüngenden Kerben besteht, die nacheinander um einen offenen Bogen herum aufleuchten, mit einer fortlaufenden Zahl in der Mitte. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: value, accent, notches, spacing, orientation, uniformWidth ### Notched console button https://fieldbook.lizardi.mx/de/components/notched-console-button Ein eckiger Panel-Knopf mit einer abgeschrägten Ecke und einem Keilschnitt an einer Seite sowie zwei beleuchteten Linien, die entlang der Ober- und Unterkante verlaufen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, notch, cycleMs, blur ### Notched offset slab button https://fieldbook.lizardi.mx/de/components/notched-offset-slab-button Ein blockiger Knopf in Großbuchstaben, der über einem harten, versetzten Schatten schwebt und mit zwei gefalteten Ecklaschen versehen ist, der beim Drücken in seinen eigenen Schatten gleitet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, offset, width, uppercase ### Notification feed stack https://fieldbook.lizardi.mx/de/components/notification-feed-stack Ein vertikaler Feed, der Benachrichtigungskarten auf einem Timer anzeigt, ältere Karten nach unten schiebt und die ältesten von unten fallen lässt, wenn neue eintreffen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, interval, maxVisible, pauseOnHover ### Nudge arrow invert button https://fieldbook.lizardi.mx/de/components/nudge-arrow-invert-button Eine dunkle Pille in Großbuchstaben mit einem Pfeil am rechten Rand; Wenn Sie den Mauszeiger darüber bewegen, wird es zu einer blassen Oberfläche und bewegt den Pfeil nach vorne. Wenn Sie darauf drücken, blinkt eine warme Füllung auf. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, nudge, tracking, uppercase ### Nudging chevron button https://fieldbook.lizardi.mx/de/components/nudging-chevron-button Ein ruhiger, akzentuierter Knopf, dessen Chevron-Markierung im negativen Bereich wartet, dann beim Schweben hineingleitet und das Etikett zur Seite schiebt, während die Palette auf Neutraltöne abkühlt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, shiftDistance, mark, coolOnHover ### Nudging message pill https://fieldbook.lizardi.mx/de/components/nudging-message-pill Ein solides Chat-Tablet, dessen Blasensymbol in einer ungleichmäßigen Schleife hin- und herbewegt, wenn man mit der Maus darüber fährt oder fokussiert ist, und beim Loslassen einen kurzen ungelesenen Punkt platzt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, nudgeSpeed, size ### Number reel https://fieldbook.lizardi.mx/de/components/number-reel Eine mit einem Fenster versehene Walze mit abgestuften Werten, die sich von Null an dreht und zum Stillstand kommt, wobei das Ziel in einem hervorgehobenen mittleren Schlitz landet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: target, increment, direction, delay, accent ### Odometer digit counter https://fieldbook.lizardi.mx/de/components/odometer-digit-counter Eine Zahl, die als mechanische Ziffern des Kilometerzählers angezeigt wird und bei jeder Wertänderung in ihre neue Position springt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: value, fontSize, accentColor, digitGap ### Odometer number https://fieldbook.lizardi.mx/de/components/odometer-number Eine Zahl, die aus unabhängigen Ziffernspalten besteht, wobei jede vertikal zu ihrer neuen Ziffer rollt, sodass die Einsen Spins platzieren, während sich die führenden Ziffern kaum bewegen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: value, grouping, decimals, stiffness, accent ### Offset bloom button https://fieldbook.lizardi.mx/de/components/offset-bloom-button Eine flache, helle Platte ohne Rand, die beim Schweben einen breiten, außermittigen Schleier ihrer eigenen Farbe entstehen lässt und ihn beim Drücken komprimiert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, bloomSpread, offsetX, pressScale ### Offset outline stack https://fieldbook.lizardi.mx/de/components/offset-outline-stack-button Eine umrandete Knopfleiste, die wie ein kleiner Block Papier auf abgestuften Umrissschichten ruht; Hover schiebt das oberste Blatt auf den Stapel und dreht seine Füllung um. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, offset, layers, duration ### Offset plate button https://fieldbook.lizardi.mx/de/components/offset-plate-button Ein umrissener Knopf mit einer massiven Platte, die unten und rechts geparkt ist; Wenn Sie den Mauszeiger bewegen, wird die Platte nach Hause geschoben, sodass die beiden Formen zu einer Einheit verschmelzen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, offset, radius, duration ### Offset shadow icon orb https://fieldbook.lizardi.mx/de/components/offset-shadow-icon-orb Eine runde Schaltfläche, die nur aus Symbolen besteht und auf einem harten, versetzten Schatten ruht, in den sie beim Drücken flach eintaucht und beim Loslassen wieder herausgehoben wird, in der Größe für eine Reihe von Anmeldeoptionen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, accent, offset, glyph ### Offset shadow press button https://fieldbook.lizardi.mx/de/components/offset-shadow-press-button Ein flach umrandeter Knopf, der auf einem harten, versetzten Schatten sitzt und beim Drücken hineingleitet, wie bei einer echten Taste, die auf den Boden fällt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, offset, showArrow, borderWidth ### One Question Wizard https://fieldbook.lizardi.mx/de/components/one-question-wizard Ein mehrstufiges Formular, das jeweils eine einzelne Frage mit einer Fortschrittsanzeige anzeigt und erst dann weitergeht, wenn die aktuelle Frage eine gültige Antwort hat. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: questionCount, accentColor, shortcuts, transitionMs ### Opposing rule text button https://fieldbook.lizardi.mx/de/components/opposing-rule-text-button Eine randlose Textschaltfläche in Großbuchstaben, eingeklammert von zwei Linien, die beim Schweben oder Fokussieren von entgegengesetzten Enden her einfahren und sich zurückziehen, so wie sie gekommen sind. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, thickness, duration, size ### Orbit drop zone https://fieldbook.lizardi.mx/de/components/orbit-drop-zone Eine Datei-Drop-Zone, die einen Upload mit sich drehenden farbigen Bögen um einen Fortschrittsring simuliert, den Live-Prozentsatz anzeigt und übergroße oder nicht unterstützte Dateien mit einem Inline-Fehler ablehnt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, maxSizeMb, uploadSeconds, acceptHint ### Orbit loader https://fieldbook.lizardi.mx/de/components/orbit-loader Ein Ladeindikator, dessen drei Punkte im Abstand von einer Dritteldrehung auf einer Umlaufbahn laufen und dabei jeweils eine kurze Spur ziehen, während ein Bogen den äußeren Ring in die andere Richtung streicht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, speed, color ### Path Orbit https://fieldbook.lizardi.mx/de/components/orbit-path-carousel Karten bewegen sich auf einem gemeinsamen geschlossenen Pfad, gleichmäßig verteilt und endlos kreisend, wobei die Pfadform zwischen einer Ellipse, einem Kreis und einem Stern umschaltbar ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: shape, itemCount, duration, tilt, showPath, accent ### Orbit Pointer Nav https://fieldbook.lizardi.mx/de/components/orbit-pointer-nav Ein kreisförmiger Navigationsring, bei dem sich ein mittlerer Zeiger dreht, um auf die aktive Abschnittsschaltfläche zu zielen, und bei der sich die Schaltflächen bei Auswahl zu beschrifteten Pillen erweitern. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, accent, buttonSize, labelMaxWidth ### Orbit Ring Nav https://fieldbook.lizardi.mx/de/components/orbit-ring-nav Ein kreisförmiger Ring aus Navigationsschaltflächen mit einem rotierenden Zeiger, der zum aktiven Element springt, und Schaltflächen, die sich beim Schweben zu beschrifteten Pillen erweitern. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, accentColor, pointerStiffness, expandLabels ### Orbiting Avatar Intro https://fieldbook.lizardi.mx/de/components/orbiting-avatar-intro Ein Stapel runder Porträts, der sich anhebt, zu einem Kreis auffächert und sich dann langsam um die Mitte dreht, während jedes Porträt aufrecht bleibt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, stageSize, orbitSeconds, tileSize, accent ### Orbiting badges https://fieldbook.lizardi.mx/de/components/orbiting-badges Kleine Abzeichen, die gleichmäßig um eine oder zwei kreisförmige Schienen verteilt sind, wobei sich jeder Ring mit seiner eigenen Geschwindigkeit und Richtung dreht, während die Abzeichen aufrecht bleiben. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: radius, count, duration, showPath, innerReverse, accent ### Orbiting border spark https://fieldbook.lizardi.mx/de/components/orbiting-border-spark Ein heller Funke mit einem verblassenden Schwanz läuft ewig um die Kante einer Platte herum und folgt dabei dem genauen Eckenradius, anstatt die Ecken abzuschneiden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: duration, sparkSize, accentColor, trailColor, borderWidth, reverse ### Orbiting caption disc https://fieldbook.lizardi.mx/de/components/orbiting-caption-disc-button Ein kreisförmiger Knopf, dessen Beschriftung in Großbuchstaben in einer langsamen, endlosen Umlaufbahn über den inneren Rand gleitet, während ein mittleres Abzeichen beim Schweben seinen Pfeil weiterleitet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, diameter, spinSeconds, direction ### Orbiting confirm chips https://fieldbook.lizardi.mx/de/components/orbiting-confirm-chips-button Eine runde Symbolschaltfläche, die beim Schweben oder Fokussieren einen Bestätigungschip und einen Entlassungschip herausschleudert und sie dann wieder darunter zurückzieht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, spread, popMs, stagger ### Orbiting image spiral https://fieldbook.lizardi.mx/de/components/orbiting-image-spiral Ein Stapel quadratischer Fotos, die um eine unsichtbare Spirale herum angeordnet sind, die sich kontinuierlich dreht, wobei jedes Foto je nach seinem Abstand zur Vorderseite skaliert, schärfer oder unschärfer wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: itemCount, speed, radius, pauseOnHover ### Orbiting rim light button https://fieldbook.lizardi.mx/de/components/orbiting-rim-light-button Eine dunkle Pille, deren ein Pixelrand von hinten durch einen sich langsam drehenden Farbkegel beleuchtet wird, der sich schneller dreht, während der Knopf gedrückt gehalten wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, spinSeconds, rimBlur, haloSize ### OTP code boxes https://fieldbook.lizardi.mx/de/components/otp-code-boxes Eine Reihe von Einzelzeichenfeldern zur Eingabe eines Bestätigungscodes, eine Ziffer pro Feld, wobei der Cursor automatisch vorrückt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: length, accent, masked ### OTP field https://fieldbook.lizardi.mx/de/components/otp-field Ein einmaliges Codefeld mit separaten Kästchen über einem versteckten Eingang, wobei eine Akzentkachel zu dem zu bearbeitenden Kästchen gleitet und die Zeile pulsiert, sobald der Code vollständig ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: length, masked, accent ### Passcode slot input https://fieldbook.lizardi.mx/de/components/otp-slot-input Ein einmaliges Passcode-Feld aus verschmolzenen Slots mit gemeinsamem Rand über einem versteckten Eingang, mit einem blinkenden Caret im aktiven leeren Slot. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: length, value, accentColor, grouped ### Outline draw text https://fieldbook.lizardi.mx/de/components/outline-draw-text Die angezeigten Buchstaben zeichnen sich nacheinander als leuchtende Umrisse ab, dann wird hinter den Strichen eine durchgehende Füllung eingeblendet, um das Wort zu vervollständigen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: headline, strokeColor, fillColor, trigger, drawDurationS ### Outline invert button https://fieldbook.lizardi.mx/de/components/outline-invert-button Ein dunkler Schieferknopf, umgeben von einem warmen Umriss, dessen Rand beim Schweben alle Farben wechselt und bei wechselndem Leuchten ansteigt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, slate, glow, uppercase ### Outlined page nav https://fieldbook.lizardi.mx/de/components/outlined-page-nav Eine Reihe von Seitennummernschaltflächen, in denen die aktive Seite eine umrandete Pille erhält, flankiert von vorherigen und nächsten Steuerelementen und Auslassungspunkten für übersprungene Bereiche. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: totalPages, currentPage, accentColor ### Outset ring tilt button https://fieldbook.lizardi.mx/de/components/outset-ring-tilt-button Ein Knopf im Abzeichen-Stil mit einem dicken Ring, der an der Außenseite schwebt, der wächst, sich um ein paar Grad neigt und beim Schweben einen harten Schatten wirft. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, hoverScale, tilt, ringOffset ### Outside Value Pie https://fieldbook.lizardi.mx/de/components/outside-value-pie Ein solides Kreisdiagramm mit bloßen Zahlen, die direkt außerhalb jedes Segments schweben und so positioniert sind, dass jede Beschriftung von der Mitte nach außen zeigt, ohne Verbindungslinien. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, hueRange, labelOffset, valueFormat, gap ### Overhead light pill https://fieldbook.lizardi.mx/de/components/overhead-light-pill Ein dunkler Pillenknopf, der von einem sanften Lichtkegel über dem Kopf beleuchtet wird, der beim Schweben als Ganzes dunkler wird und beim Fokussieren seinen dicken äußeren Ring aufhellt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lightSize, lightStrength, ring ### Overhead light rays https://fieldbook.lizardi.mx/de/components/overhead-light-rays Über einer Platte hängen weiche, sich verjüngende Balken, die jeweils ein- und ausblenden und in ihrem eigenen Zyklus sanft hin- und herschaukeln, sodass die Gruppe nie zusammen pulsiert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rayCount, rayColor, blur, speed, length, intensity ### Overlay scroll panel https://fieldbook.lizardi.mx/de/components/overlay-scroll-panel Ein begrenztes Panel, das die Bildlaufleiste der Plattform verbirgt und eine eigene schlanke Overlay-Spur zeichnet, die in Daumengröße dem Inhalt entspricht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: orientation, height, thumbSize, autoHide, accent ### Overshoot icon button https://fieldbook.lizardi.mx/de/components/overshoot-icon-slide-button Eine blasse Pille mit einer großen illustrierten Glyphe am linken Ende, die über den Rand hinaus nach außen zieht und beim Schweben oder Fokussieren zurückspringt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, slide, springy, radius ### Paired bar chart https://fieldbook.lizardi.mx/de/components/paired-bar-chart Ein gruppiertes Balkendiagramm, in dem jeder Monat zwei nebeneinander liegende Balken anzeigt, einen pro Serie, zum Vergleich zweier Kennzahlen in denselben Kategorien. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: primaryColor, secondaryColor, barRadius, groupGap, animate ### Paired Code Split View https://fieldbook.lizardi.mx/de/components/paired-code-split-view Ein Verifizierungsschritt mit geteiltem Bildschirm, dessen Codefelder in Paaren mit Bindestrichen dazwischen gruppiert sind und sich selbst senden, sobald das letzte Feld ausgefüllt ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, groups, perGroup, autoSubmit, showArtPanel ### Paired Series Line https://fieldbook.lizardi.mx/de/components/paired-series-line Zwei geglättete Reihen über dieselben Monate auf einer gemeinsamen Skala, mit einem Hover-Leitfaden, der beide Werte nebeneinander in einem Panel anzeigt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: primaryColor, secondaryColor, strokeWidth, showGuide, showGrid ### Panel swallow button https://fieldbook.lizardi.mx/de/components/panel-swallow-button Eine Schaltfläche mit einem dunkleren Symbolfeld, das an einer Kante angedockt ist. Beim Bewegen des Mauszeigers oder beim Fokussieren über die Tastatur vergrößert sich das Bedienfeld über die gesamte Breite und die Beschriftung wird darunter ausgeblendet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, iconSide, expandMs ### Panel Tab Switcher https://fieldbook.lizardi.mx/de/components/panel-tab-switcher Eine abgerundete Tab-Leiste, in der sich ein Hintergrundindikator an die exakte Größe und Position des aktiven Tabs anpasst und einen deutlichen Inhaltsbereich darunter freigibt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, variant, tabCount ### Panning gradient button https://fieldbook.lizardi.mx/de/components/panning-gradient-button Eine gewölbte Taste, deren übergroßer diagonaler Farbverlauf beim Schweben über die Fläche schwebt und ein helleres Band von einer Ecke zur anderen zieht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, deep, label, duration, dome ### Paper fold text https://fieldbook.lizardi.mx/de/components/paper-fold-text Der Text wird in Zeichen, Wörter oder Zeilen aufgeteilt, die sich entlang einer ausgewählten Scharnierkante mit einem Knickschatten entfalten und über die Phrase hinweg versetzt sind. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, hinge, splitBy, duration ### Parallax photo columns https://fieldbook.lizardi.mx/de/components/parallax-photo-columns Eine randlose Wand aus schwebenden Fotospalten in 3D-Perspektive, wobei die Kacheln unter dem Cursor- oder Tastaturfokus heller werden und sich anheben, während ihre Spalte anhält. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: columns, driftSpeed, tilt, overlayColor, pauseOnHover ### Parallax plate gallery https://fieldbook.lizardi.mx/de/components/parallax-plate-gallery Eine einrastende vertikale Galerie, in der die übergroße Indexnummer jeder Platte mit einer anderen Geschwindigkeit als die Platte selbst wandert, mit einer Scroll-Fortschrittsschiene am unteren Rand. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, panels, depth, snap, showProgress ### Parallax Starfield https://fieldbook.lizardi.mx/de/components/parallax-starfield Drei Schichten verstreuter Punkte scrollen unterschiedlich schnell nach oben und gleiten gegen den Zeiger, sodass das Feld an Tiefe gewinnt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: density, starColor, speed, parallax ### Particle burst button https://fieldbook.lizardi.mx/de/components/particle-burst-button Eine Schaltfläche, die bei jedem Klick einen kurzen Spritzer Sprühstoß nach oben und aus sich herauswirft und sich dann leise zurücksetzt, während die Beschriftung bestätigt, dass die Aktion ausgeführt wurde. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, particleCount, spread, confirmMs ### Particle drift https://fieldbook.lizardi.mx/de/components/particle-drift Ein Leinwandfeld aus langsam treibenden Partikeln, die sich an den Rändern umhüllen, sich mit schwachen Linien verbinden und an der Stelle verschwinden, an der der Zeiger vorbeiläuft. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, color, connectDistance ### Particle formation text https://fieldbook.lizardi.mx/de/components/particle-formation-text Eine Leinwand aus winzigen Partikeln, die sich in der Form eines Wortes zusammenfügt, nach ihrer Bildung driftet und vom Zeiger wegfliegt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, density, scatter, color, highlightColor ### Particle spray https://fieldbook.lizardi.mx/de/components/particle-spray-on-hold Halten Sie den Zeiger auf ein Bedienelement gedrückt, und überall dort, wo sich der Zeiger befindet, werden kleine Partikel versprüht, die sich jeweils in einem Bogen nach oben bewegen, sich drehen, dann abfallen und sich von selbst entfernen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: emitRate, size, lift, accent, shape ### Pass through wipe button https://fieldbook.lizardi.mx/de/components/pass-through-wipe-button Ein gefüllter Knopf, dessen helles Feld beim Schweben von einer Kante nach innen wischt und beim Bewegen an der gegenüberliegenden Kante wieder verschwindet, sodass es sich weiterbewegt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, panelColor, label, duration, direction ### Paste Format Menu https://fieldbook.lizardi.mx/de/components/paste-format-menu-button Eine Pille mit einem Cursor, der eine umrandete Liste mit Optionen zum Einfügen von Formatierungen öffnet und dessen untere Ecken quadriert, sodass die beiden Formen als ein Stück angezeigt werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, openOnHover, itemCount, width ### Path Breadcrumb Trail https://fieldbook.lizardi.mx/de/components/path-breadcrumb-trail Eine horizontale Spur von Seitenhierarchie-Links, die auf der aktuellen Seite endet, wobei lange Spuren hinter einer erweiterbaren Ellipse zusammenfallen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, segmentCount, collapseMiddle ### Path follower https://fieldbook.lizardi.mx/de/components/path-follower-loop Eine abgerundete Kachel, die sich entlang einer spiralförmigen Bahn bewegt, während die Bahn selbst vor ihr einfährt und dann rückwärts zum Start zurückfährt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, duration, tileSize, alignToTangent, strokeWidth ### Peek Inside Folder https://fieldbook.lizardi.mx/de/components/peek-inside-folder Ein stilisiertes Ordnersymbol, das beim Klicken aufspringt und drei darin versteckte Papiere auffächert, die sich jeweils vom Zeiger wegbewegen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, size, open ### Peelable sticker https://fieldbook.lizardi.mx/de/components/peelable-sticker Ein Vinylaufkleber, den Sie über seine Fläche ziehen können, dessen Kante sich beim Schweben von der Oberfläche abhebt und sich weiter ablöst, während Sie ihn halten. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, rotate, peelAmount, peelAngle, shadow ### Perimeter draw button https://fieldbook.lizardi.mx/de/components/perimeter-draw-button Eine kurze, dicke Stange, die unter dem Etikett geparkt ist, dehnt sich aus und bewegt sich beim Schweben um alle vier Seiten, bis sie sich zu einem vollständigen Umriss schließt, und zieht sich dann beim Verlassen wieder in die Stange zurück. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, strokeWidth, duration, wash ### Perimeter spark button https://fieldbook.lizardi.mx/de/components/perimeter-spark-button Eine dunkle Pille mit einem einzelnen hellen Funken, der knapp innerhalb ihres Randes kreist und hinter einem eingesetzten Kern verborgen ist, sodass nur der Rand jemals das Licht einfängt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, orbitMs, radius, sparkWidth ### Perspective floor grid https://fieldbook.lizardi.mx/de/components/perspective-floor-grid Eine von der Kamera weg geneigte Gitterebene, sodass sie sich zum Horizont zurückzieht und in einer nahtlosen Ein-Zellen-Schleife auf den Betrachter zu gleitet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: angle, cellSize, speed, lineColor, opacity ### Perspective reveal dialog https://fieldbook.lizardi.mx/de/components/perspective-reveal-dialog Ein Allzweckdialog, dessen Bedienfeld von einer ausgewählten Kante in 3D nach innen geneigt und dann abgeflacht wird, um beliebigen Inhalt auf einer abgeblendeten Seite anzuzeigen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: from, accent, title, showFooterButton ### Perspective sheen button https://fieldbook.lizardi.mx/de/components/perspective-sheen-button Ein solider rechteckiger Knopf mit einer perspektivisch schrägen durchscheinenden Glanzplatte, die beim Schweben flach wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tilt, sheenOpacity, radius ### Physical keycap button https://fieldbook.lizardi.mx/de/components/physical-keycap-button Eine geformte Tastaturtaste mit schattierter Oberseite und echtem Hub: Sie wird gedrückt, gequetscht und blinkt, wenn darauf geklickt oder die gebundene Taste gedrückt wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, size, travel, bindKey ### Physics drop text https://fieldbook.lizardi.mx/de/components/physics-drop-text Ein Satz zerfällt in Wörter, die unter der simulierten Schwerkraft fallen, taumeln und hüpfen, sich dann setzen und mit dem Zeiger hin und her bewegt werden können. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, gravity, highlightColor, trigger ### Pill tabs https://fieldbook.lizardi.mx/de/components/pill-tabs Ein Tab-Strip, in dem ein einzelnes Tablet auf den ausgewählten Tab gleitet und sich dort ausdehnt, mit Pfeil, Navigationstasten „Pos1“ und „Ende“ und einem Bedienfeld zum Überblenden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, tabCount ### Pin priority list https://fieldbook.lizardi.mx/de/components/pin-priority-list Eine Liste mit zwei Abschnitten, bei der durch Tippen auf den Pin einer Zeile der Wechsel zwischen einer fixierten Gruppe und dem Rest mit einer kontinuierlichen Federbewegung animiert wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: itemCount, accentColor, transitionStiffness, pinnedLabel ### Pin to top list https://fieldbook.lizardi.mx/de/components/pin-to-top-list Eine Liste mit zwei Gruppen, bei der durch Klicken auf eine Pin-Schaltfläche ein Element reibungslos zwischen einem angehefteten und einem nicht angehefteten Abschnitt verschoben wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, stiffness, damping, showLabels ### Pincer Fill Button https://fieldbook.lizardi.mx/de/components/pincer-fill-button Ein heller Pillenknopf, dessen zwei durchscheinende Vorhänge sich beim Schweben vom linken und rechten Rand schließen und kurz anhalten, sodass ein Streifen der Basis in der Mitte beleuchtet bleibt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, leftColor, rightColor, coverage, durationMs ### Pinned Card Stack Scroll https://fieldbook.lizardi.mx/de/components/pinned-card-stack-scroll Eine vertikale Abfolge von Karten, die festsitzen und leicht schrumpfen, während die nächste Karte nach oben gescrollt wird, um darauf gestapelt zu werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: itemDistance, itemScale, baseScale, rotationAmount ### Pinned lateral gallery https://fieldbook.lizardi.mx/de/components/pinned-lateral-gallery Ein Abschnitt, der an Ort und Stelle bleibt, während Sie mit dem vertikalen Scrollen eine Reihe von Bedienfeldern seitwärts ziehen, dann loslässt und die Seite fortfahren lässt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, panels, heading, showProgress, scrollLength ### Pivot bars menu button https://fieldbook.lizardi.mx/de/components/pivot-bars-menu-button Eine Menüschaltfläche, deren drei gezackte Balken eine Vierteldrehung drehen und zu einer kurzen Punktsäule schrumpfen, wobei sich dabei die Farbe ändert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: restColor, activeColor, tileSize, duration, showTile ### Pixel bevel button https://fieldbook.lizardi.mx/de/components/pixel-bevel-button Eine klobige, plattenförmige Schaltfläche mit harten, pixelbreiten, abgeschrägten Kanten, die beim Schweben mit einer Akzentfarbe überflutet wird und deren Abschrägung sich umdreht, sodass es aussieht, als wäre sie eingedrückt, während man sie gedrückt hält. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, bevel, size ### Pixel Bloom Card https://fieldbook.lizardi.mx/de/components/pixel-bloom-card Eine Karte, deren Oberfläche sich mit winzigen Quadraten füllt, die beim Schweben aus der Mitte heraus aufblühen, beim Halten schimmern und beim Verlassen verschwinden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gap, speed, accent, shimmer, label ### Pixel Curtain https://fieldbook.lizardi.mx/de/components/pixel-curtain-reveal Ein Block aus farbigen Quadraten strömt in zufälliger Reihenfolge über eine Karte, verbirgt den Tausch darunter und verschwindet dann auf die gleiche verstreute Weise. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gridSize, stepDuration, pixelColor, accent, once ### Pixel mosaic reveal https://fieldbook.lizardi.mx/de/components/pixel-mosaic-reveal Ein Bild setzt sich aus einem Raster von Kacheln zusammen, die in zufälliger Reihenfolge eingeblendet werden, und wechselt dann von Graustufen zu Vollfarbe. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gridColumns, gridRows, grayscaleReveal, revealDurationMs ### Pixel snowfall https://fieldbook.lizardi.mx/de/components/pixel-snowfall Klobiger Schnee mit niedriger Auflösung, der durch ein tiefes Volumen fällt, in der Nähe sind die Flocken fett und hell, in der Ferne sind es nur schwache einzelne Flecken. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, density, speed, windAngle, blockSize, shape ### Pixel Wake https://fieldbook.lizardi.mx/de/components/pixel-wake-grid Unter dem Zeiger leuchtet ein grobes Zellengitter auf, kühlt sich dahinter wieder ab und hinterlässt eine blockartige Spur auf dem Panel. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gridSize, brushRadius, fade, accent, softEdges ### Plain Share Pie https://fieldbook.lizardi.mx/de/components/plain-share-pie Das Nötigste eines Kreisdiagramms: fünf bündige Abschnitte, ein dünner Trennstrich und ein Hover-Tooltip, ohne dass sonst etwas hinzugefügt wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, hueRange, strokeWidth, sweepSeconds, showTooltip ### Plain trend line https://fieldbook.lizardi.mx/de/components/plain-trend-line Ein minimalistisches Liniendiagramm mit einer einzelnen Serie mit einer glatten, unverzierten Kurve und ohne Punktmarkierungen, das so schlicht und lesbar gehalten ist, wie eine Trendlinie nur sein kann. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, strokeWidth, showGrid, animate ### Plan radio list https://fieldbook.lizardi.mx/de/components/plan-radio-list Eine vertikale Liste mit Radiooptionen, die für die Auswahl eines Preisplans gestaltet sind. Ein ausgefüllter Punkt markiert die aktuelle Auswahl. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, defaultPlan ### Plane straighten send https://fieldbook.lizardi.mx/de/components/plane-straighten-button Eine Sendetaste, die als umrandete Hülle um eine eingesetzte Pille gebaut ist, wobei sich eine geneigte Papierebene gerade dreht und das Etikett beim Schweben nach vorne tritt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, restAngle, flyOnPress ### Plane tilt send button https://fieldbook.lizardi.mx/de/components/plane-tilt-send-button Ein gewölbtes Sendesteuerelement, dessen Papierebene beim Schweben nach oben kippt und beim Klicken aus dem Rahmen fliegt, bevor die Beschriftung zurückgesetzt wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, sentLabel, accent, tilt, resetDelay ### Plasma plume https://fieldbook.lizardi.mx/de/components/plasma-plume Eine hohe Säule aus leuchtendem Dampf, die aufsteigt, sich zusammenfaltet und nach oben hin dünner wird und zu einer einzigen Farbe fast schwarz gefärbt ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: tint, speed, scale, direction, detail, interactive ### Plate spin swap button https://fieldbook.lizardi.mx/de/components/plate-spin-swap-button Ein kastenförmiger Knopf, dessen Beschriftungsschild sich beim Schweben nach rechts dreht, während sich ein identisches Schild von links nach innen dreht, um es zu ersetzen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, borderWidth, tracking, duration ### Plinth lift button https://fieldbook.lizardi.mx/de/components/plinth-lift-button Ein schweres, gerahmtes Beschriftungsschild auf einem karierten Sockel, das sich diagonal von seinem Sockel abhebt und beim Schweben oder Fokussieren Farbe annimmt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, lift, patternSize, baseHeight ### Plus to cross tile https://fieldbook.lizardi.mx/de/components/plus-to-cross-tile Eine kleine quadratische Kachel mit einem Pluszeichen, die sich um fünfundvierzig Grad zu einem engen Kreuz dreht und sich beim Drehen um einen Bruchteil vergrößert. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: ink, accent, tileSize, duration, grow ### Pointer angle sweep https://fieldbook.lizardi.mx/de/components/pointer-angle-sweep Ein Panel, das durch eine konische Kurve beleuchtet wird, deren Ursprung unter dem Zeiger liegt und deren helle Kante darauf zurückzeigt und die sich langsam im Leerlauf dreht, wenn der Zeiger weggeht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, wedgeSoftness, followLag, idleSpin, intensity ### Pointer label cursor https://fieldbook.lizardi.mx/de/components/pointer-label-cursor Innerhalb eines begrenzten Panels wird der Systemcursor durch einen gezeichneten Pfeil ersetzt, hinter dem auf einer weichen Feder ein kleiner Namenschip läuft. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, side, sideOffset, stiffness, showChip ### Pointer lit lattice https://fieldbook.lizardi.mx/de/components/pointer-lit-lattice Ein Leinwandgitter, dessen Zellen aufleuchten, wenn der Zeiger vorbeiläuft, gehalten wird und dann abklingt, wobei ein Druck einen Lichtring sendet, der sich bis in die entferntesten Ecken ausdehnt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cellSize, radius, falloff, fadeDuration, clickPulse, color ### Pointer Magnet https://fieldbook.lizardi.mx/de/components/pointer-magnet-wrap Eine Hülle, die alles, was sie hält, in Richtung des Zeigers treiben lässt, während sie sich in einer gepolsterten Fangzone befindet, und dann zurückgleiten kann, um zur Ruhe zu kommen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: padding, strength, label, accent, disabled ### Pointer reactive ASCII text https://fieldbook.lizardi.mx/de/components/pointer-reactive-ascii-text Ein Wort, das vollständig aus Monospace-Zeichen statt aus festen Buchstabenformen gerendert wird, wobei seine Glyphendichte und eine subtile Farbverschiebung kontinuierlich darauf reagieren, wie nah der Zeiger positioniert ist. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, cellSize, reactRadius, accent ### Pointer Ripple Button https://fieldbook.lizardi.mx/de/components/pointer-ripple-button Ein Knopf, der einen Lichtkreis genau dort platziert, wo er gedrückt wurde, und ihn beim Verblassen über die Ränder hinaus ausdehnt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, rippleColor, duration, opacity, variant ### Pointer ripple mesh https://fieldbook.lizardi.mx/de/components/pointer-ripple-mesh Eine Farbplatte wird durch ein grobes Netz abgetastet, dessen Zellen sich merken, wo sich der Zeiger befunden hat. Durch Ziehen wird das Bild verwischt und die Verschmierung entspannt sich wieder. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, gridSize, strength, relaxation, radius, autoSweep ### Pointer scatter headline https://fieldbook.lizardi.mx/de/components/pointer-scatter-headline Eine in einzelne Zeichen aufgeteilte Überschrift, die sich zur Seite schieben und fallen lassen, während der Zeiger darüber hinwegstreicht, und dann wieder in die richtige Zeile zurückkehren. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, accent, radius, strength, rotation ### Pointer scramble text https://fieldbook.lizardi.mx/de/components/pointer-scramble-text Wenn Sie den Mauszeiger über einen Absatz bewegen, werden die in der Nähe befindlichen Zeichen in Symbole umgewandelt, die wieder zu den echten Buchstaben werden, wenn sich der Cursor wegbewegt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, radius, speed ### Pointer spotlight card https://fieldbook.lizardi.mx/de/components/pointer-spotlight-card Eine Karte, deren Rand nur entlang des Bogens leuchtet, der dem Cursor am nächsten liegt, mit einer weichen Innenfarbe, die dem Zeiger folgt und sich zurückzieht, wenn er ihn verlässt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: spotlightSize, accentColor, edgeColor, mode, intensity, lag ### Pointer Spotlight Panel https://fieldbook.lizardi.mx/de/components/pointer-spotlight-panel Ein Inhaltsbereich mit einem sanften Licht, das dem Zeiger über die Oberfläche folgt und beim Fokussieren der Tastatur in der Mitte fixiert wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, radius, intensity, fadeMs ### Pointer takeover zone https://fieldbook.lizardi.mx/de/components/pointer-takeover-zone Ein Panel, das den Systemcursor verbirgt, während sich der Zeiger darin befindet, und an dessen Stelle eine eigene Markierung zeichnet, die beim Betreten ein- und beim Beenden wieder verschwindet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: shape, size, accent, label, showLabel ### Tile trail https://fieldbook.lizardi.mx/de/components/pointer-tile-trail Ein Wegweiser, der kleine abgerundete Kacheln entlang des Weges fallen lässt, die jeweils aus einem recycelten Pool auftauchen und verschwinden, während neuere an ihre Stelle treten. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tileCount, spawnDistance, lifetime, accent, tilt ### Pointer tilt card https://fieldbook.lizardi.mx/de/components/pointer-tilt-card Eine Karte, die sich dreidimensional zum Zeiger neigt, mit einem Glanz, der über die Vorderseite gleitet, und einer Feder, die sie beim Herausnehmen wieder auf die gleiche Höhe bringt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: maxTilt, perspective, accent, sheen, stiffness ### Pointer tilt photo card https://fieldbook.lizardi.mx/de/components/pointer-tilt-photo-card Eine beschriftete Fotokarte, die sich auf einer Feder in Richtung des Zeigers neigt und bei der Drehung ein sanfter Glanz über die Vorderseite gleitet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: maxTilt, stiffness, hoverScale, showGlare, accent ### Polished metal button https://fieldbook.lizardi.mx/de/components/polished-metal-button Ein Knopf aus gebürstetem Metall mit einer gebänderten Markierung, die zoomt und das Licht einfängt, wenn der Zeiger ankommt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, finish, tint, zoom, size ### Pop scale panel https://fieldbook.lizardi.mx/de/components/pop-scale-panel Ein Popover, das aus halber Größe aufspringt, einen kleinen Pfeil zurück auf seinen Auslöser zeigt, die Seite dahinter abdunkelt und sich bei Escape oder einem Klick von außen schließt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, align, showArrow, dimBackdrop, accent ### Presence Avatar Clusters https://fieldbook.lizardi.mx/de/components/presence-avatar-clusters Zwei überlappende Avatar-Cluster, online und offline, wobei durch Klicken auf einen Avatar dieser in den anderen Cluster verschoben wird, während sein Porträt von oder zu Graustufen überblendet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: avatarSize, clusterGap, accentColor, showTooltips ### Press block button https://fieldbook.lizardi.mx/de/components/press-block-button Ein abgerundeter Blockknopf, der auf einer soliden Schattenleiste ruht, die sich beim Drücken des Knopfes nach unten verkürzt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, depth, disabled ### Press down sweep button https://fieldbook.lizardi.mx/de/components/press-down-sweep-button Ein fester Knopf, dessen Füllung beim Schweben von einer Seite heller wird und beim Halten flach auf die Seite fällt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, pressDepth, sweep, radius ### Press and hover scale tile https://fieldbook.lizardi.mx/de/components/press-hover-scale-tile Eine Kachel, die beim Schweben anschwillt und beim Drücken zusammendrückt, wobei das Drücken immer das Schweben schlägt und beide von einer Feder gelöst werden, sodass die Gesten niemals miteinander in Konflikt geraten. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: hoverScale, pressScale, stiffness, accent, showState ### Press plate toggle https://fieldbook.lizardi.mx/de/components/press-plate-toggle Eine bloße Schaltfläche mit zwei Zuständen, deren gefüllte Platte beim Drücken hinter dem Inhalt eingeblendet wird, wobei der Zustand von außerhalb der Schaltfläche selbst lesbar und einstellbar ist. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: startPressed, accent, radius, fadeMs, showControls ### Press response tile https://fieldbook.lizardi.mx/de/components/press-response-tile Eine taktile Fliese, die unter dem Druckpunkt zusammengedrückt wird und beim Loslassen zurückfedert und sich in die Richtung neigt, in die Sie auf der Oberfläche gedrückt haben. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, pressScale, tilt, stiffness, label ### Press ripple button https://fieldbook.lizardi.mx/de/components/press-ripple-button Ein fester Knopf, der genau an der Stelle, an der Sie drücken, einen Lichtkreis erzeugt, der sich über die Ränder hinaus ausdehnt und beim Loslassen verblasst. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, rippleOpacity, expandSeconds, cornerRadius ### Press spring button https://fieldbook.lizardi.mx/de/components/press-spring-button Eine Basistastenfamilie in sechs Skins und vier Größen, deren Druck durch eine Feder komprimiert wird und nach hinten schwingt, identisch für Zeiger und Tastatur. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: skin, size, accentColor, label, disabled ### Settings Toggle Row https://fieldbook.lizardi.mx/de/components/press-stretch-switch Eine beschriftete Einstellungsreihe, die in einem Ein-Aus-Schalter endet, dessen Daumen sich beim Drücken ausdehnt und zurückspringt, wenn er zur Ruhe kommt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, on, accentColor ### Pressable icon toggle https://fieldbook.lizardi.mx/de/components/pressable-icon-toggle Eine Schaltfläche mit einem Symbol und einer Beschriftung, die nach dem Klicken optisch gedrückt bleibt, für eine eigenständige Ein- oder Ausschaltaktion wie Stummschalten oder Fettdruck. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, pressed, variant ### Pressed highlight toggle https://fieldbook.lizardi.mx/de/components/pressed-highlight-toggle Eine Symbolschaltfläche mit zwei Zuständen, die ihren gedrückten Zustand mit einem abgerundeten Hervorhebungsblock sichtbar hält, der von der Mitte nach außen hinter dem Glyphen wächst. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, size, skin, pressed, disabled ### Pressed ledge button https://fieldbook.lizardi.mx/de/components/pressed-ledge-button Ein solider Knopf, der auf einer dicken, dunkleren Unterkante ruht und sich beim Drücken zusammenfaltet, sodass die Kappe wie ein echter Schlüssel bündig abfällt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, depth, size ### Pressed tile icon button https://fieldbook.lizardi.mx/de/components/pressed-tile-icon-button Eine weich geformte Symbolkachel, die stolz auf einer hellen Oberfläche steht und beim Schweben darin versinkt, indem sie ihr Schattenpaar umstülpt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, size, depth, radius, sink ### Priced stay range calendar https://fieldbook.lizardi.mx/de/components/priced-stay-range-calendar Ein Bereichskalender, bei dem in jeder Tageszelle unter ihrer Nummer ein kleiner Preis angezeigt wird, an Wochenenden höhere Preise als an Wochentagen gelten und Monat und Jahr aus Dropdown-Listen ausgewählt werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, weekdayPrice, weekendPrice ### Printing icon button https://fieldbook.lizardi.mx/de/components/printing-icon-button Ein winziger Zeilendrucker, der erst dann mit dem Einziehen und Auswerfen eines Blattes beginnt, wenn sich der Zeiger darüber befindet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: ink, accent, scale, cycle ### Prismatic light bands https://fieldbook.lizardi.mx/de/components/prismatic-light-bands Eine dunkle Leinwandplatte, auf der ein paar lange Lichtbänder über das Feld streichen und sich biegen und sich an ihren Rändern in warme und kühle Streifen aufteilen wie ein Strahl durch ein Prisma. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, bandCount, bandWidth, warp, dispersion, speed ### Profile flip card https://fieldbook.lizardi.mx/de/components/profile-flip-card Eine Porträt-Profilkarte, die sich beim Bewegen oder Tippen in 3D umdreht, um eine Biografie, die Anzahl der Follower und eine Folgeaktion auf der Rückseite anzuzeigen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: flipOn, axis, durationMs, accent, showStats ### Profile hover card https://fieldbook.lizardi.mx/de/components/profile-hover-card Wenn Sie mit der Maus über einen kleinen Avatar-Chip fahren oder ihn darauf fokussieren, wird ein Profilfenster mit Namen, Benutzername, Biografie und Anzahl der Follower geöffnet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: openDelay, placement, showStats, accent ### Profit/Loss Line Chart https://fieldbook.lizardi.mx/de/components/profit-loss-line-chart Ein Liniendiagramm, dessen Strich die Farbe ändert, je nachdem, ob der Wert über oder unter Null liegt, und das an jedem Kreuzungspunkt sauber geteilt wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: positiveColor, negativeColor, strokeWidth, smooth ### Progress ring https://fieldbook.lizardi.mx/de/components/progress-ring Eine kreisförmige Anzeige, die von Null bis zu ihrem Wert läuft, während die Zahl in der Mitte mitzählt, mit zwei Schwellenwertmarkierungen, die aufleuchten, wenn der Bogen sie passiert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: value, size, stroke, color ### Progressive edge blur https://fieldbook.lizardi.mx/de/components/progressive-edge-blur Ein Band, das an einer Kante eines Bildlauffelds befestigt ist und dessen Inhalt allmählich in den Hintergrund tritt, anstatt ihn an einer harten Linie abzuschneiden. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: position, strength, thickness, layers, curve ### Proximity variable type https://fieldbook.lizardi.mx/de/components/proximity-variable-type Inline-Absatztext wird Buchstabe für Buchstabe nur innerhalb eines festgelegten Radius um den Zeiger herum dicker und breiter und verläuft außerhalb davon sanft wieder zur Normalität zurück. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: sentence, radius, falloff, textColor ### Pulse button https://fieldbook.lizardi.mx/de/components/pulse-button Eine Taste, die auf einen Klick mit einem einzigen expandierenden Ring aus der Zeigerposition und einem kurzen Herunterdrücken reagiert und sich dann beruhigt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, ringColor, duration, rounded ### Pulse grid mesh https://fieldbook.lizardi.mx/de/components/pulse-grid-mesh Ein quadratisches Drahtgeflecht, das in langsamen Ringen von der Mitte nach außen anschwillt, in der Mitte am hellsten ist und verschwindet, bevor es die Ränder erreicht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, gridSize, rippleDepth, thickness, glow, interactive ### Pulse halo button https://fieldbook.lizardi.mx/de/components/pulse-halo-button Ein fester Knopf, der immer wieder einen sanften Lichtschein in seiner eigenen Farbe ausstrahlt, entweder an Ort und Stelle atmet oder expandierende Ringe in einer Schleife abwirft. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, variant, cycleMs, distance ### Ring bloom https://fieldbook.lizardi.mx/de/components/pulse-ring-bloom Konzentrische Lichtringe entstehen in der Mitte, schwellen nach außen an und verblassen, wobei jeder einzelne dem letzten hinterherhinkt und beim Klicken einen Ausbruch auslöst. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: innerColor, outerColor, ringCount, speed, thickness, parallax ### Pulsing Dot Field https://fieldbook.lizardi.mx/de/components/pulsing-dot-field Ein gekacheltes Gitter aus winzigen Punkten, das seinen Behälter füllt, wobei jeder einzelne in seinem eigenen, unabhängigen Zyklus heller und dunkler atmet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: spacing, dotRadius, pulse, speed, accentColor, maskSize ### Pulsing play orb https://fieldbook.lizardi.mx/de/components/pulsing-play-orb Eine runde Wiedergabetaste, die in einem gleichmäßigen Takt einen Lichtring nach außen wirft, unter dem Zeiger anschwillt und nach einer Pause seinen Puls verlangsamt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, accentDeep, size, pulseSeconds, playing ### Quantity Stepper Field https://fieldbook.lizardi.mx/de/components/quantity-stepper-field Ein beschrifteter Mengenregler: ein abgerundeter Zwei-Tasten-Schrittmotor mit einer Zahl in der Mitte, der innerhalb eines festgelegten Bereichs erhöht oder verringert wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, value, min, max, accentColor ### Quarter Turn Add Button https://fieldbook.lizardi.mx/de/components/quarter-turn-add-button Ein umkreistes Plus, das sich eine Viertelumdrehung dreht und beim Zeigen sofort in einen leichten Strich übergeht, wenn es gehalten wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, size, turn, strokeWidth, fillOnHover ### Quick launch palette https://fieldbook.lizardi.mx/de/components/quick-launch-palette Eine über die Tastatur ausgelöste Befehlspalette, die mit einem Federdruck geöffnet wird, während der Eingabe eine gruppierte Aktionsliste filtert und die vollständige Pfeiltastennavigation unterstützt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, placeholder, showShortcuts, startOpen ### Quick menu orb https://fieldbook.lizardi.mx/de/components/quick-menu-orb-button Ein runder Akzentauslöser, dessen Glyphe sich zu einer Abschlussmarkierung zusammenfaltet, während darunter ein kleines betiteltes Menü mit Symbolreihen vergrößert wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, triggerSize, side, open, caption, gap ### Quick Pick Date Card https://fieldbook.lizardi.mx/de/components/quick-pick-date-card Eine Monatskalenderkarte mit einer Reihe von Verknüpfungsschaltflächen für relative Datumsangaben darunter, sodass ein gemeinsames Datum nur einen Klick entfernt ist, ohne dass ein Menü geöffnet werden muss. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, shortcutCount ### Quiet File Tree https://fieldbook.lizardi.mx/de/components/quiet-file-tree Ein Ordner- und Dateibaum, in dem eine sanfte Hervorhebung zwischen den Zeilen gleitet, wenn sich der Zeiger oder der Tastaturfokus bewegt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, indentSize, rowHeight, highlightOnHover ### Quiet Ring Spinner https://fieldbook.lizardi.mx/de/components/quiet-ring-spinner Ein minimaler Ladering mit einem Element: ein dünner Kreis mit einem farbigen Viertel, der sich kontinuierlich dreht, um einen Besetztzustand zu markieren. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, accentColor, speedMs ### Radial action wheel https://fieldbook.lizardi.mx/de/components/radial-action-wheel Wenn Sie mit der rechten Maustaste auf eine Zone klicken, wird ein kreisförmiger Ring mit Symbolaktionen geöffnet, die auf dem Zeiger zentriert sind. Jeder Keil wird hervorgehoben, wenn der Mauszeiger darüber bewegt wird, und wird beim Klicken ausgelöst. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: wheelSize, iconSize, accentColor ### Radial cable pulses https://fieldbook.lizardi.mx/de/components/radial-cable-pulses Konische Kabel fächern sich von einem Punkt in der Mitte auf und krümmen sich zu den Rändern, während helle Impulse an ihnen entlang rasen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: pulseColor, cableColor, cableCount, pulseSpeed, waviness, direction ### Radial light burst https://fieldbook.lizardi.mx/de/components/radial-light-burst Aus einem dunklen Zentrum strömen Lichtstreifen, die sich dreidimensional verdrehen und verschwimmen, als wären sie mit Langzeitbelichtung aufgenommen worden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, blades, intensity, speed, distort, motion ### Radial Share Fan https://fieldbook.lizardi.mx/de/components/radial-share-fan Ein runder Share-Auslöser, der einen Stapel von Zielknöpfen entlang eines Bogens auswirft, wobei jeder einzelne eine ganze Drehung lang an seinen Platz fällt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, count, radius, spread, stagger, spin ### Radial sheen button https://fieldbook.lizardi.mx/de/components/radial-sheen-button Ein kurzer, schlüsselartiger Knopf, der von der oberen rechten Ecke aus beleuchtet ist und eine haarfeine Basiskante hat, die sich beim Drücken umdreht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, sheen, radius ### Radio dot select https://fieldbook.lizardi.mx/de/components/radio-dot-select Eine vertikale Optionsgruppe, bei der durch Auswahl einer Option ein Punkt in den Kreis eingefügt wird, während der vorherige Punkt kleiner wird und verschwindet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: option1, option2, option3, selected, accent ### Raised bezel button https://fieldbook.lizardi.mx/de/components/raised-bezel-button Eine taktile Aktionstaste, die aus drei gestapelten Platten, einem bearbeiteten Rand, einem abgerundeten Körper und einer eingelassenen Kapseloberfläche besteht, die beim Drücken in ihren Schatten einsinkt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, bezelWidth, pressDepth, showIcon ### Raised Slice Donut https://fieldbook.lizardi.mx/de/components/raised-slice-donut Ein Donut, bei dem ein Slice dauerhaft über den Ring angehoben wird, indem sein Außenradius erweitert wird, und die Erhöhung beim Schweben zu jedem anderen Slice gleitet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, activeIndex, raise, holeRatio, hueRange ### Range filter area chart https://fieldbook.lizardi.mx/de/components/range-filter-area-chart Ein tägliches Verkehrsflächendiagramm mit einer Bereichsauswahl in der Kopfzeile, die das Fenster auf drei Monate, dreißig Tage oder sieben Tage einschränkt und die Form neu anpasst. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, secondColor, defaultRange, showLegend, animate ### Range Filtered Bar Report https://fieldbook.lizardi.mx/de/components/range-filtered-bar-report Eine Analysekarte mit einem Balkendiagramm der täglichen Besucherzahlen, das nur die Tage innerhalb eines aus einem Dropdown-Kalender ausgewählten Datumsbereichs neu darstellt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, title, subtitle, rangeLabel ### Range span slider https://fieldbook.lizardi.mx/de/components/range-span-slider Ein Schieberegler mit zwei Daumen auf einer Spur, mit dem jemand einen niedrigen und einen hohen Wert zusammen als gefüllte Spanne auswählen kann. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: low, high, accent ### Ranked Share Bar Chart https://fieldbook.lizardi.mx/de/components/ranked-share-bar-chart Ein horizontales Rangdiagramm einer Reihe, aufgeteilt nach Kategorien, wobei jeder Balken seinen eigenen Farbton aus einer geordneten Palette erhält und die Zeilen vom größten zum kleinsten Anteil sortiert werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: paletteBase, rowCount, barRadius, animate ### Reactive bento panels https://fieldbook.lizardi.mx/de/components/reactive-bento-panels Ein Bento-Gitter aus Panels, die auf den Mauszeiger leuchten, sich in 3D neigen, in Richtung des Cursors driften und beim Klicken vor Partikeln und Wellen platzen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: glowColor, spotlightRadius, particleCount, enableTilt ### Reading highlight copy https://fieldbook.lizardi.mx/de/components/reading-highlight-copy Ein Absatz, der beim Scrollen Wort für Wort aufleuchtet, sodass gelesene Wörter hell und ungelesene Wörter abgeblendet bleiben, sodass die Scroll-Position gleichzeitig als Leseposition dient. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, accent, dimOpacity, unit, showRail ### Receding stack carousel https://fieldbook.lizardi.mx/de/components/receding-stack-carousel Ein Karussell, bei dem Karten in die Ferne hinter der fokussierten Karte verschwinden und je weiter hinten sie liegen, dunkler und unschärfer wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: visibleCards, depth, tilt, autoplay ### Record toggle pulse https://fieldbook.lizardi.mx/de/components/record-toggle-pulse-pill Ein fast schwarzes Tablet mit einem Akzentmikrofon, das die Aufnahme umschaltet, im aktivierten Zustand die Zeit einatmet und anstelle des Etiketts die verstrichene Zeit zählt. Frameworks: react Access: member Public prop names: label, accent, pulseSpeed, showTimer ### Reflowing Notification Stack https://fieldbook.lizardi.mx/de/components/reflowing-notification-stack Ein Stapel von Benachrichtigungskarten, der reibungslos neu fließt, wenn eine neue hinzugefügt oder eine alte verworfen wird, anstatt zu springen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, autoDismissSeconds, stackGap, addButtonLabel ### Refracted glass player https://fieldbook.lizardi.mx/de/components/refracted-glass-player Ein Media-Player-Panel, das sich wie eine dicke Glasplatte verhält und alles, was sich dahinter befindet, in der Nähe der abgerundeten Kanten verbiegt, während die Tasten stärker gebrochen werden als das Gehäuse. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: distortion, frost, radius, accent ### Refractive Glass Panel https://fieldbook.lizardi.mx/de/components/refractive-glass-panel Eine abgerundete Platte, deren Hintergrund sich am Rand biegt und in schwache rote, grüne und blaue Ränder aufteilt, als würde man durch eine echte dicke Glasscheibe blicken. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: cornerRadius, refractionStrength, edgeThickness, tintColor ### Refresh sweep spin https://fieldbook.lizardi.mx/de/components/refresh-sweep-spin-button Eine Aktualisierungstaste, deren dunkleres Symbolfeld beim Schweben über das Gesicht streicht, während der Pfeil genau eine Umdrehung macht, sich dann während eines geschäftigen Laufs weiter dreht, bevor er wieder in den Ruhezustand zurückkehrt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, width, spinMs, busyMs ### Region heat map https://fieldbook.lizardi.mx/de/components/region-heat-map Eine zoombare Hex-Kachel-Weltkarte, bei der jede Region anhand einer fünfstufigen Farbskala mit ihrem Wert gefüllt wird, beim Schweben heller wird und eine QuickInfo mit ihrem Namen und ihrer Nummer anzeigt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: scaleColor, zoomEnabled, showGraticule, maxZoom ### Relay fill button https://fieldbook.lizardi.mx/de/components/relay-fill-button Ein halbrunder Knopf, der sich beim Schweben durch eine Reihe von zwei Rennstangen füllt, die auf ihre volle Höhe steigen, bevor das Etikett seine Farbe ändert. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, sweepMs, gap, radius ### Repeat mode cycler https://fieldbook.lizardi.mx/de/components/repeat-mode-cycler Ein getönter Chip, der bei jedem Klick eine Loop-Einstellung ein- und ausschaltet und seinen Pfeil bei jeder Änderung rückwärts dreht. Frameworks: react Access: member Public prop names: mode, accent, spinSeconds, showLabel ### Repelling dot field card https://fieldbook.lizardi.mx/de/components/repelling-dot-field-card Ein Werbefeld, das mit einem Feld aus Punkten gefüllt ist, die sich vom Zeiger wegbewegen und beim Vorbeigehen heller werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: dotSpacing, dotSize, repelRadius, repelStrength, accent ### Resizing hint tooltip https://fieldbook.lizardi.mx/de/components/resizing-hint-tooltip Ein Hover-Label, dessen Blase sich automatisch in der Größe ändert, wenn der Text länger oder kürzer ist, anstatt zwischen den Größen zu wechseln. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: openDelay, closeDelay, side, accent ### Return to top chip https://fieldbook.lizardi.mx/de/components/return-to-top-chip Ein kleiner Eckchip, der ins Sichtfeld gleitet, sobald sein Panel einen Schwellenwert überschreitet, sich unter dem Zeiger anhebt und das Panel beim Klicken wieder nach oben gleitet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: threshold, accent, corner, chipSize, smooth ### Revenue Area Card https://fieldbook.lizardi.mx/de/components/revenue-area-stat-card Eine metrische Karte, deren Körper eine gefüllte Sparkline-Fläche ist; Wenn Sie mit der Maus über einen Monat fahren, werden die Überschrift, die Bildunterschrift und das Änderungsfeld mit der Lektüre dieses Monats vertauscht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, areaOpacity, smoothing, trend, title ### Reversing bars menu button https://fieldbook.lizardi.mx/de/components/reversing-bars-menu-button Eine kleine quadratische Menükachel, deren drei gestapelte Balken beim Schweben die Breite ändern, während die Kachel selbst von einer Füllfarbe zur anderen übergeht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, hoverColor, size, barThickness, duration ### RGB glitch heading https://fieldbook.lizardi.mx/de/components/rgb-glitch-heading Eine Überschrift, die sich in versetzte Kopien in Rot und Cyan aufspaltet, die auf springende horizontale Bänder zugeschnitten sind und wie ein Rundfunksignal flackern, das die Synchronisierung verliert. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, speed, enableOnHover, enableShadows ### Ribbon light streams https://fieldbook.lizardi.mx/de/components/ribbon-light-streams Haarbündel ziehen sich wie Lichtbänder durch die Dunkelheit, kreuzen sich in der Mitte und biegen sich vom Zeiger weg. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, ribbonCount, lineCount, speed, bendStrength, parallax ### Ribbon trail flow https://fieldbook.lizardi.mx/de/components/ribbon-trail-flow Mehrere farbige Bänder jagen den Zeiger auf ihren eigenen Federn, verjüngen sich zu einer Spitze und flechten sich auseinander, während sich der Zeiger dreht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: ribbonCount, thickness, spring, friction, accent, fadeTail ### Right click context menu https://fieldbook.lizardi.mx/de/components/right-click-context-menu Ein Menü, das genau dort erscheint, wo ein Rechtsklick oder langes Drücken landet, mit Aktionen, einem Kontrollkästchen, einer Optionsgruppe und einem Hover-Untermenü. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, showSubmenu, showCheckableItems ### Right Click Menu https://fieldbook.lizardi.mx/de/components/right-click-menu Ein Popup-Menü, das am Zeiger angezeigt wird, wenn mit der rechten Maustaste auf einen Zielbereich geklickt wird, und gruppierte Aktionen, Hinweise zu Tastenkombinationen und ein verschachteltes Untermenü bietet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, itemCount, showShortcuts ### Rim ramp button https://fieldbook.lizardi.mx/de/components/rim-ramp-button Ein dicker farbiger Rand umgibt eine dunkle Innenseite; Beim Schweben wird das Gesicht klarer und der Farbverlauf der Felge überflutet den gesamten Knopf. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, hueShift, inset, duration ### Rim to fill gradient button https://fieldbook.lizardi.mx/de/components/rim-to-fill-gradient-button Eine dunkle Schaltfläche zeigt im Ruhezustand nur einen dünnen Farbverlaufsrand; Wenn Sie den Mauszeiger darüber bewegen, wird das innere Panel abgelegt, sodass der Farbverlauf die gesamte Fläche überflutet, und durch Drücken wird es nach unten gedrückt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, endColor, rimWidth, angle, pressScale ### Ring halo button https://fieldbook.lizardi.mx/de/components/ring-halo-button Ein solider Akzentknopf, der beim Schweben dunkler wird und einen konzentrischen Umrissring mit einem sanften Farbstich darunter entstehen lässt. Frameworks: react Access: member Public prop names: label, accent, size, ringGap, disabled ### Ring halo pill button https://fieldbook.lizardi.mx/de/components/ring-halo-pill-button Eine Pillentaste, die um ihren farbigen Kern herum eine klare Lücke lässt, diese Lücke mit einem aufgehellten Akzentring beim Schweben oder auf der Tastatur füllt und sich beim Drücken nach innen drückt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, ringWidth, pressScale, uppercase ### Ringing bell badge https://fieldbook.lizardi.mx/de/components/ringing-bell-badge Ein Benachrichtigungsklingelknopf aus schlichten Formen, der mit einem kleinen Tritt in beide Richtungen schwingt und eine Live-Zählung der ungelesenen Nachrichten anzeigt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, accent, size, ring ### Ripple lens https://fieldbook.lizardi.mx/de/components/ripple-lens-surface Eine Bildoberfläche, die sich dort verzieht, wo der Zeiger sie berührt, wobei sich jede Welle ausdehnt, das Bild darunter verwirbelt und wieder flach wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: strength, swirl, brushSize, rings, trigger, highlight ### Ripple Origin Grid https://fieldbook.lizardi.mx/de/components/ripple-origin-grid Ein Gitter aus farbigen Kacheln, die in einer Welle aufleuchten, die von einer ausgewählten Kachel nach außen ausstrahlt, abhängig von der Entfernung zu dieser Kachel. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gridSize, delayPerUnit, accentColor ### Ripple tap button https://fieldbook.lizardi.mx/de/components/ripple-tap-button Eine solide Schaltfläche, die einen Kreis nach außen sendet, der genau von dem Punkt ausgeht, den Sie gedrückt haben, und der auf seine abgerundete Form zugeschnitten ist. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, rippleSeconds, pressScale, size ### Rising arrow link button https://fieldbook.lizardi.mx/de/components/rising-arrow-link-button Eine Schaltfläche zum Weiterlesen, bei der das Etikett zur Seite gleitet, um eine Lücke zu öffnen, und ein Pfeil von unterhalb der abgeschnittenen Unterkante hineinklettert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, duration, radius, labelShift ### Rising Circle Fill https://fieldbook.lizardi.mx/de/components/rising-circle-fill-button Eine umrissene Pille, die sich beim Schweben füllt, während ein großer Akzentkreis unterhalb ihres Randes aufsteigt, während die Beschriftungsspur breiter wird. Frameworks: react Access: member Public prop names: label, accent, trackingGrowth, speed ### Rising disc icon row https://fieldbook.lizardi.mx/de/components/rising-disc-icon-row Eine Reihe ringförmiger Symbolschaltflächen, bei denen beim Schweben eine gefüllte Scheibe hinter ihrem Ring hervorgehoben wird und die Glyphe im leeren Umriss abgedunkelt bleibt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, count, hueSpread, size, lift ### Rising Fill Badge https://fieldbook.lizardi.mx/de/components/rising-fill-badge-button Eine quadratische Kachel, deren rundes Abzeichen schrumpft und steigt, während ein großer Kreis von unten nach oben wischt und eine Beschriftung in den Raum, den sie verlässt, aufsteigt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, caption, wipeMs, spin ### Rising Fill Button https://fieldbook.lizardi.mx/de/components/rising-fill-button Ein hohler, umrandeter Knopf, der sich vom unteren Rand nach oben mit Farbe füllt, als ob eine aufsteigende Flüssigkeit entsteht, wenn Sie den Mauszeiger darüber bewegen oder darauf fokussieren. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, duration, radius ### Rising tooltip icon button https://fieldbook.lizardi.mx/de/components/rising-tooltip-icon-button Eine chromfreie Symbolschaltfläche, deren Glyphe beim Schweben anschwillt und eine Warnfarbe annimmt, während nach einer kurzen Verzögerung ein kleiner Beschriftungschip darüber aufsteigt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, growth, delaySeconds, size ### Rocking archive tint pill https://fieldbook.lizardi.mx/de/components/rocking-archive-tint-pill Eine getönte Pillentaste, deren Ordnersymbol bei Hover oder Tastaturfokus hin und her wackelt und sich beim Drücken stabilisiert. Frameworks: react Access: open Public prop names: label, accent, tintStrength, rockDegrees, rockSpeed ### Rocking icon CTA https://fieldbook.lizardi.mx/de/components/rocking-icon-cta Eine solide Akzentpille, deren führendes Kalendersymbol beim Schweben wie ein Metronom wackelt und beim Anklicken ein Häkchen zeichnet und den Wortlaut durch eine bestätigte Bezeichnung ersetzt, bevor es wieder zur Ruhe kommt. Frameworks: react Access: open Public prop names: label, confirmLabel, accent, rockDegrees, rockSeconds ### Rolling cube label button https://fieldbook.lizardi.mx/de/components/rolling-cube-label-button Ein Knopf, dessen Beschriftung auf der Vorderseite eines flachen Kastens sitzt. Wenn man also darauf zeigt, dreht sich der Kasten um eine Vierteldrehung, und von oben kommt eine zweite Nachricht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, hoverLabel, accent, duration, uppercase ### Rolling stat tiles https://fieldbook.lizardi.mx/de/components/rolling-stat-tiles Eine Reihe von Statistikplättchen, deren große Zahlen Ziffer für Ziffer auf einen neuen Wert rollen, anstatt einzurasten. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, tileCount, compactNotation ### Rotating backer button https://fieldbook.lizardi.mx/de/components/rotating-backer-glow-button Eine dunkle Platte mit einer direkt dahinter verborgenen getönten Platte, die sich im Schwebeflug eine halbe Umdrehung dreht, während sich das Licht, das über ihre Ränder hinausfällt, weiter ausbreitet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, bloom, rotation, pressScale ### Rotating badge text https://fieldbook.lizardi.mx/de/components/rotating-badge-text Ein kurzer, sich wiederholender Satz wird Buchstabe für Buchstabe um einen vollen Kreis herum angeordnet und dreht sich langsam und kontinuierlich, wie ein gestanztes Abzeichen oder Vinyletikett. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: phrase, durationSeconds, reverse, accent ### Rotating beam rim button https://fieldbook.lizardi.mx/de/components/rotating-beam-rim-button Ein blattförmiger Knopf mit einem hellen zweifarbigen Strahl, der sich um seinen Rand dreht und nur in der Lücke um die Frontplatte sichtbar ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, secondary, cycle, rim ### Rotating face plate https://fieldbook.lizardi.mx/de/components/rotating-face-plate-button Ein Knopf, dessen beschriftete dunkle Platte sich um eine Ecke dreht und beim Betätigen größer wird, wodurch die darunter liegende Akzentplatte als vier Dreiecke sichtbar wird, dann beim Drücken kleiner wird und mit ihr die Farben wechselt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, angle, scale, size ### Rotating sky explore button https://fieldbook.lizardi.mx/de/components/rotating-sky-explore-button Ein Knopf, dessen Füllung eine riesige geschwungene Scheibe ist, die darunter geparkt ist; Beim Schweben dreht sich die Scheibe ins Bild wie ein sich drehender Nachthimmel, während winzige Sterne in unterschiedlichen Höhen herabschweben. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, starCount, sweepDegrees, sweepSeconds, radius ### Rotating Word Swap https://fieldbook.lizardi.mx/de/components/rotating-word-swap Eine Einleitungsphrase bleibt fixiert, während ein nachfolgendes Wort eine Liste durchläuft. Dabei werden jeweils die Gleitzeichen nach oben und außen vertauscht, während das nächste Wort nach oben und nach innen gleitet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: words, interval, accentColor ### Round lift action button https://fieldbook.lizardi.mx/de/components/round-lift-action-button Eine kreisförmige Aktionstaste mit einem durchgezogenen dreieckigen Pfeil, der beim Schweben anschwillt und sich anhebt, beim Halten dunkler wird und seinen Pfeil in eine von vier Richtungen dreht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, diameter, direction, growth, shadow ### Rounded bar chart https://fieldbook.lizardi.mx/de/components/rounded-bar-chart Ein einfaches Balkendiagramm mit einer einzelnen Serie mit großzügig abgerundeten Balkenoberseiten, schwachen Gitternetzlinien und einem Wertchip, der über dem Balken angezeigt wird, auf dem sich der Mauszeiger befindet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, months, barRadius, barGap, animate ### Roving focus tabs https://fieldbook.lizardi.mx/de/components/roving-focus-tabs Eine auf der Tastatur zuerst angezeigte Tab-Liste, die auf einer wechselnden Tab-Reihenfolge basiert, wobei immer nur der aktive oder fokussierte Tab per Tab erreichbar ist und eine dünne Markierung den aktuellen Tab verfolgt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultTab, markerThickness ### Rubber sheet panel https://fieldbook.lizardi.mx/de/components/rubber-sheet-panel Ein Panel, das sich wie gedehntes Gummi verhält: Der Zeiger greift danach, benachbarte Punkte ziehen mit, und wenn man es loslässt, schnappt es mit einem Wackeln zurück. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: stiffness, damping, grabRadius, pull, showGrid, accent ### Scale in on view https://fieldbook.lizardi.mx/de/components/scale-in-on-view Ein Wrapper, der sein untergeordnetes Element klein hält, bis es zum ersten Mal in die Ansicht gescrollt wird, und es dann auf die volle Größe zurückversetzt, mit einer optionalen Staffelung pro Element für Listen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: startScale, stagger, delay, damping, accent ### Scaling dot carousel https://fieldbook.lizardi.mx/de/components/scaling-dot-carousel Ein Schiebekarussell, dessen aktive Karte sich in voller Größe befindet, während ihre Nachbarn leicht schrumpfen, gepaart mit Punktindikatoren, die sich zu beschrifteten Pillen erweitern. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: loop, accentColor, slideCount ### Scanline sweep button https://fieldbook.lizardi.mx/de/components/scanline-sweep-button Eine dunkle Schaltfläche im Konsolenstil, die beim Schweben einen dünnen leuchtenden Balken über die Vorderseite fallen lässt, während die dicke Kante ihres Randes von unten nach oben wandert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, sweepSeconds, barHeight, bloom ### Scanning wire grid https://fieldbook.lizardi.mx/de/components/scanning-wire-grid Ein perspektivisches feines Drahtgitter neigt sich mit dem Zeiger, während ein helles Band in einer Schleife darüber streicht und jede Linie, die es kreuzt, beleuchtet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: scanColor, lineColor, gridScale, scanDuration, lineStyle, jitter ### Scattering glyph pill https://fieldbook.lizardi.mx/de/components/scattering-glyph-pill Eine runde Pille, die beim Schweben anschwillt, während drei kleine Glyphen hinter dem Etikett hervorschießen und in den Raum um sie herum fallen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, hoverScale, spread, glow ### Scene reveal button https://fieldbook.lizardi.mx/de/components/scene-reveal-button Ein Knopf, dessen Beschriftungsschild beim Schweben nach oben gleitet, um eine kleine Wetterszene aus ziehenden Wolken, aufsteigenden Hügeln, einer sich drehenden Sonne und verstreuten Flocken freizulegen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, flakes, width, spinSpeed ### Scramble text https://fieldbook.lizardi.mx/de/components/scramble-text Monospace-Text, der ein Zeichen nach dem anderen durch rollende Glyphen hinter einem Schreibkopf landet und sich überall dort wieder löst, wo der Zeiger darüber streift. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, speed, glyphSet ### Scribble Edit Chip https://fieldbook.lizardi.mx/de/components/scribble-edit-chip Ein Bearbeitungschip, dessen Bleistift beim Schweben ein kurzes Gekritzel hin- und herbewegt, während sich eine wackelige Unterstreichung unter das Etikett zeichnet und es durch Klicken als aktives Bearbeitungsziel fixiert. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, scribbleSeconds, underline ### Scribble strike checklist https://fieldbook.lizardi.mx/de/components/scribble-strike-checklist Eine Aufgabenliste, bei der beim Markieren einer Zeile eine wackelige, handgezeichnete Linie über das Etikett gezeichnet wird und bei der Deaktivierung sie zurückgezogen wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: strokeMs, accent, wobble, dimCompleted ### Scroll blur reveal text https://fieldbook.lizardi.mx/de/components/scroll-blur-reveal-text Ein Textblock, der zunächst verschwommen und versetzt erscheint und beim ersten Scrollen Wort für Wort oder Buchstabe für Buchstabe scharf wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, splitBy, direction, delayMs ### Scroll cue button https://fieldbook.lizardi.mx/de/components/scroll-cue-button Ein kleines Scroll-Angebot, dessen Chevron beim Schweben oder Fokussieren in einer Endlosschleife durch das zugeschnittene Fenster fällt und dessen Klick den nächstgelegenen scrollbaren Bereich zum nächsten Abschnitt gleitet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: caption, accent, cycle, direction, showCaption ### Scroll cue pill https://fieldbook.lizardi.mx/de/components/scroll-cue-pill Eine hohe Kapsel mit einem langen, dünnen Pfeil, der auf einer Schleife schwebt, unter dem Zeiger wächst und nach dem Gebrauch wieder zusammenfällt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, direction, height, driftDistance, loop ### Scroll dim text reveal https://fieldbook.lizardi.mx/de/components/scroll-dim-text-reveal Ein Absatz bleibt abgeblendet und wird im Gleichschritt mit dem Scrollen Wort für Wort heller. Beim Zurückscrollen wird er dann wieder abgedunkelt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, scrollSpan, dimOpacity, accent ### Scroll entrance wrapper https://fieldbook.lizardi.mx/de/components/scroll-entrance-wrapper Ein Wrapper, der seine Kinder in der geparkten Position hält, bis sie ins Sichtfeld scrollen, dann eine erleichterte Ankunft abspielt und diese nie wiederholt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: distance, direction, duration, scale, threshold, accent ### Scroll expand stage https://fieldbook.lizardi.mx/de/components/scroll-expand-stage Während Sie scrollen, vergrößert sich ein kleiner abgerundeter Rahmen, der das gesamte Ansichtsfenster ausfüllt. Der Titel verschwindet, während der Artikel darunter ausgeblendet wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: startWidth, startRadius, zoom, smoothing, title, accent ### Scroll float reveal https://fieldbook.lizardi.mx/de/components/scroll-float-reveal Überschriftszeichen schweben von unten nach oben und nehmen ihre Form an, während ihr Abschnitt durch das Ansichtsfenster scrollt und direkt an die Scrollposition verschoben wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, stagger, duration ### Scroll focus column https://fieldbook.lizardi.mx/de/components/scroll-focus-column Eine scrollende Spalte, in der jede Zeile beim Verlassen des Lesebereichs verblasst und schrumpft und beim Eintritt wieder vollständig präsent wird, sodass nur die Mitte jemals vollständig durchgezogen ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, rows, minOpacity, minScale, showBand ### Scroll focus reveal https://fieldbook.lizardi.mx/de/components/scroll-focus-reveal Ein Absatz beginnt schief, dunkel und verschwommen und wird dann Wort für Wort gerade und schärfer, während der Leser durch ihn scrollt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, baseOpacity, blurStrength ### Scroll hint button https://fieldbook.lizardi.mx/de/components/scroll-hint-mouse-button Eine schmale, aufrecht stehende Kapsel mit einer Perle, die an einer Schlaufe darin nach unten gleitet (siehe Bildunterschrift unten) und beim Drücken zum nächstgelegenen scrollbaren Bereich um einen Bildschirm scrollt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, caption, cycleSeconds, height, glow ### Scroll Position Progress Bar https://fieldbook.lizardi.mx/de/components/scroll-position-progress-bar Ein dünner Balken, der über die Breite eines Containers wächst, wenn der Benutzer vom Anfang bis zum Ende scrollt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, barHeight, springStiffness, trackGlobalPage ### Scroll progress rail https://fieldbook.lizardi.mx/de/components/scroll-progress-rail Eine Haarlinienleiste, die am oberen Rand eines scrollbaren Bedienfelds befestigt ist und sich von links nach rechts exakt synchron mit der Scrollweite des Inhalts füllt und beim Scrollen nach oben wieder entleert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, thickness, showTrack ### Scroll Progress Text Reveal https://fieldbook.lizardi.mx/de/components/scroll-progress-text-reveal Ein langer Satz bleibt auf dem Bildschirm angeheftet, während die Seite daran vorbeiscrollt, und jedes Wort wird einzeln von dunkel auf hell beleuchtet, sobald die Bildlaufposition an der Reihe ist. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, dimOpacity, scrollLength ### Scroll snap word list https://fieldbook.lizardi.mx/de/components/scroll-snap-word-list Eine lange Liste von Wörtern rollt in einem festen Fenster und das Wort, das das Mittelband kreuzt, leuchtet mit einem springenden Knall auf, während der Rest dunkel und geneigt bleibt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: rotationDepth, dimOpacity, accentColor ### Scrollable modal dialog https://fieldbook.lizardi.mx/de/components/scrollable-modal-dialog Ein allgemeines Modal mit einer Kopfzeile, einem Textkörper, der unabhängig scrollt, sobald sein Inhalt überläuft, und einer Fußzeile, die durch eine eigene Schließen-Schaltfläche, einen externen Klick oder Escape geschlossen werden kann. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: title, description, accentColor ### Scrolling content strip https://fieldbook.lizardi.mx/de/components/scrolling-content-strip Ein horizontaler Streifen kleiner Karten bewegt sich in einer ununterbrochenen Schleife seitwärts und bleibt stehen, sobald ein Zeiger über einer Karte darin ruht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: speed, reverse, pauseOnHover, accent, gap ### Scrolling tile lattice https://fieldbook.lizardi.mx/de/components/scrolling-tile-lattice Ein endloses, umrissenes Gitter, das in eine Richtung scrollt, die Zellen unter dem Zeiger füllt und sie dahinter ausblenden lässt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: shape, direction, tileSize, speed, fillColor, trailLength ### Scrub Number Input https://fieldbook.lizardi.mx/de/components/scrub-number-input Ein Zahlenfeld mit Schaltflächen zum Erhöhen und Verringern sowie einer verschiebbaren Beschriftung, die den Wert beim seitlichen Ziehen nach oben oder unten verschiebt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, value, min, max, accentColor ### Scrubbing tooltip chart https://fieldbook.lizardi.mx/de/components/scrubbing-tooltip-chart Ein Liniendiagramm mit einem federbelasteten Fadenkreuz, einem auf die Linie geklebten Wertepunkt, einem schwebenden Feld, das die Seiten an den Rändern umdreht, und einer Datumspille am unteren Rand. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, showDatePill, dotStyle ### Sealing frame button https://fieldbook.lizardi.mx/de/components/sealing-frame-button Ein Aufruf zum Handeln mit quadratischem Umriss, dessen Rand durch drei ruhende Lücken unterbrochen ist; Durch das Schweben wird der Rahmen verschlossen, während sich die Füllung umdreht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, borderWidth, ruleLength, uppercase ### Seamless share pie https://fieldbook.lizardi.mx/de/components/seamless-share-pie Eine feste Torte, deren Scheiben Kante an Kante miteinander verbunden sind und zwischen denen keine Lücken oder Striche vorhanden sind. Das Schweben ist also das Einzige, was verrät, wo ein Teil endet und der nächste beginnt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, hueRange, seamOnHover, dimOthers, showReadout ### Search Composer Field https://fieldbook.lizardi.mx/de/components/search-composer-field Ein Nachrichtenfeld, das mit Ihrer Eingabe wächst, mit einem Suchschalter, dessen Beschriftung sich öffnet, und einer Sendeaktion, die aktiviert wird, sobald Text vorhanden ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: placeholder, toggleLabel, lookupOn, accent, maxHeight ### Searchable Select https://fieldbook.lizardi.mx/de/components/searchable-select Eine Schaltfläche, die ein kleines Popover mit einem Suchfeld und einer filterbaren Liste von Optionen öffnet, sodass jemand tippen kann, um die Auswahl einzugrenzen, anstatt durch ein langes Dropdown-Menü zu scrollen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, placeholder, searchPlaceholder, optionCount ### Seasonal Range Picker https://fieldbook.lizardi.mx/de/components/seasonal-range-picker Eine zweimonatige Bereichsauswahl, die auf eine feste Öffnungszeit beschränkt ist und jedes Datum vor oder nach dem zulässigen Fenster in beiden sichtbaren Monaten abblendet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, seasonStartMonth, seasonEndMonth ### Segment Fade Spinner https://fieldbook.lizardi.mx/de/components/segment-fade-spinner Eine Ladeanzeige aus acht radialen Segmenten, die nacheinander ein- und ausgeblendet werden, sodass es scheint, als würde ein heller Bogen um den Ring jagen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: color, size, speed ### Segment Spring Lab https://fieldbook.lizardi.mx/de/components/segment-spring-lab Eine segmentierte Einzelauswahlsteuerung zum Einstellen, wie steif oder locker sich die Feder anfühlt, wenn ihre Spitze zwischen den Segmenten gleitet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: springStiffness, springDamping, accentColor ### Segmented choice bar https://fieldbook.lizardi.mx/de/components/segmented-choice-bar Eine Reihe verbundener Umschalttasten zum gleichzeitigen Auswählen einer oder mehrerer Optionen, gestaltet als eine durchgehende Leiste. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: mode, size, disabled, accentColor ### Segmented Choice Switch https://fieldbook.lizardi.mx/de/components/segmented-choice-switch Ein abgerundeter Pillenschalter, bei dem genau eine Option aktiv ist und eine verschiebbare Markierung unter der ausgewählten Option gleitet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, optionOne, optionTwo, optionThree, highlightColor ### Segmented progress meter https://fieldbook.lizardi.mx/de/components/segmented-progress-meter Eine Fortschrittsanzeige, dargestellt als Reihe von Kerben, die nacheinander aufleuchten, mit einer teilweise ausgefüllten vorderen Kerbe und einer Beschriftung, die die aktuelle Stufe benennt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: segments, value, autoplay, accent, showCaption ### Segmented Toggle Row https://fieldbook.lizardi.mx/de/components/segmented-toggle-row Eine Reihe von Symbolschaltflächen, die in einer Leiste verschmolzen sind, in der genau ein Segment gedrückt bleibt, wie bei einem Ausrichtungswähler. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: defaultValue ### Segmented toggle tabs https://fieldbook.lizardi.mx/de/components/segmented-toggle-tabs Eine kompakte, pillenförmige segmentierte Steuerung zum Umschalten zwischen einer kleinen Anzahl kurzer Optionen, wobei ein gefüllter Block zu dem ausgewählten Segment gleitet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, defaultRange, size ### Compact select menu https://fieldbook.lizardi.mx/de/components/select-menu-compact Eine Auslöseschaltfläche, die eine schwebende Auswahlliste öffnet, wobei die aktuelle Auswahl auf der Schaltfläche und ein Häkchen daneben in der Liste angezeigt werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: defaultValue, accent ### Send flight button https://fieldbook.lizardi.mx/de/components/send-flight-button Ein gebürsteter Lichtknopf, der eine kurze Sendesequenz abspielt: Das Papierzeichen fliegt weg, ein Sendeetikett zählt seine Punkte, dann fällt ein Scheck ein. Frameworks: react Access: open Public prop names: label, sentLabel, accent, sequenceMs, autoReplay ### Send flyaway bezel https://fieldbook.lizardi.mx/de/components/send-flyaway-bezel-button Eine klobige, umrandete Sendetaste, bei der der Papierflieger hüpft und dann beim Schweben oder im Tastaturfokus vom rechten Rand wegfliegt, während das Etikett ihm nachjagt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, width, flyMs, bobbing ### Sequential terminal log https://fieldbook.lizardi.mx/de/components/sequential-terminal-log Ein Terminalfenster, das eine Skriptsitzung wiedergibt, sobald sie in die Ansicht gescrollt wird, Befehle eingibt und Statuszeilen nacheinander einblendet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: typingSpeedMs, accentColor, autoplayOnView ### Series icon area chart https://fieldbook.lizardi.mx/de/components/series-icon-area-chart Ein gestapeltes Flächendiagramm, dessen Legende neben dem Farbfeld jeder Reihe ein kleines Richtungssymbol anzeigt und mit dem Sie ein Band stummschalten können, indem Sie darauf klicken. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, secondColor, fillOpacity, showLegend, animate ### Series Legend List https://fieldbook.lizardi.mx/de/components/series-legend-list Eine Legende, die gleichzeitig als Rangliste dient: Punkt, Beschriftung, rollierender Wert, Anteil am Gesamtwert und ein dünner Balken, mit Hover, der die anderen Zeilen stummschaltet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, title, items, showPercentage, showProgress ### Series Switch Trend https://fieldbook.lizardi.mx/de/components/series-switch-trend Eine 90-Tage-Trendlinie mit insgesamt zwei Kacheln in der Kopfzeile; Wenn Sie eine Kachel auswählen, wird die Linie in diese Serie umgewandelt und der Strich an seinen Akzent angepasst. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: primaryColor, secondaryColor, days, strokeWidth, showGrid ### Sessions Line Card https://fieldbook.lizardi.mx/de/components/sessions-line-stat-card Eine Sieben-Tage-Sitzungskarte, bei der die Lektüre in der Handlung sitzt, unten rechts verankert ist und ein hervorgehobener Punkt beim Scrubben auf dem Spline verläuft. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, strokeWidth, smoothing, trend, title ### Preference checklist https://fieldbook.lizardi.mx/de/components/settings-checklist-rows Ein Stapel beschrifteter Präferenzzeilen, jede mit einem eigenen Kontrollkästchen mit Akzentfarbe, das unabhängig voneinander ein Häkchen ausfüllt und zeichnet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rowCount, size, variant, accentColor ### Settings Group Accordion https://fieldbook.lizardi.mx/de/components/settings-group-accordion Eine vertikale Gruppe beschrifteter Abschnitte, die jeweils unabhängig voneinander erweitert werden können, sodass im Gegensatz zu einem typischen einfach geöffneten Akkordeon mehr als einer gleichzeitig geöffnet bleibt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: allowMultiple, accentColor, transitionMs, showChevron ### Settings toggle switch https://fieldbook.lizardi.mx/de/components/settings-toggle-switch Ein kleiner Pillen-Ein/Aus-Schalter mit einem Schiebeknopf, der eine einzelne Einstellung umschaltet, wobei die Spur von gedämpft zu einem soliden Akzent wechselt, während sich der Knopf wie ein Gummi dehnt, wenn er mitten im Schieberegler gedrückt wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: checked, accent, disabled ### Settling Add Pill https://fieldbook.lizardi.mx/de/components/settling-add-pill Eine kompakte Kapsel mit einem Pluszeichen, die sich durch drei Schattentiefen bewegt, wenn Sie darüber schweben und dann darauf drücken. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, restDepth, fontSize ### Settling photo masonry https://fieldbook.lizardi.mx/de/components/settling-photo-masonry Ein Mauerwerksgitter aus Fotokacheln unterschiedlicher Höhe, die von außerhalb des Bildschirms einfliegen, sich in ihren gepackten Säulen niederlassen und bei der Landung unscharf werden. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: columns, animateFrom, stagger, scaleOnHover ### Settling shadow button https://fieldbook.lizardi.mx/de/components/settling-shadow-button Eine warme Farbverlaufspille, die über einem großen, akzentuierten Schatten schwebt und im Schwebezustand landet, wenn der Schatten verschwindet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, lift, shadowSize, width ### Shape toggle morph icon https://fieldbook.lizardi.mx/de/components/shape-toggle-morph-icon Ein einzelnes gefülltes Symbol wechselt nur dann zwischen zwei Formen, wenn darauf geklickt wird, wobei seine Umrisse direkt von einer Silhouette in die andere übergehen und seine Farbe entsprechend überblendet und dann gehalten wird, bis erneut geklickt wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: shapeA, shapeB, colorA, colorB, size ### Shape wipe theme toggle https://fieldbook.lizardi.mx/de/components/shape-wipe-theme-toggle Eine Schaltfläche mit Sonnen- und Mondsymbolen, die das Panel-Thema mit einem Formwischer wechselt, der von der Schaltfläche aus wächst, die Farben bei voller Abdeckung austauscht und dann wieder verschwindet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: shape, duration, accentColor, fromCenter ### Share fan button https://fieldbook.lizardi.mx/de/components/share-fan-button Eine Schaltfläche „Teilen“, die sich beim Schweben auflöst, während sich am linken Rand nacheinander eine Reihe quadratischer Zielschaltflächen entfaltet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, count, accent, openOn, stagger ### Share row lift https://fieldbook.lizardi.mx/de/components/share-row-lift-button Eine Share-Pille, die beim Schweben eine passende Pille mit Zielsymbolen aus sich heraushebt und sie wieder fallen lässt, sobald die Aufmerksamkeit verschwindet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, destinations, liftDistance, stagger ### Share target swap button https://fieldbook.lizardi.mx/de/components/share-target-swap-button Eine kompakte Schaltfläche zum Teilen, die einen Footprint beibehält und beim Schweben oder Fokussieren die Beschriftung gegen eine versetzte Reihe von Zielglyphen austauscht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, size, glyphSide, accent, lift ### Share tile row https://fieldbook.lizardi.mx/de/components/share-tile-row Eine kurze Reihe quadratischer Gemeinschaftsplättchen, die jeweils vergrößert werden und mit ihrer eigenen Farbe überflutet werden, wodurch die Glyphe bei Aktivierung in den Plattenton umgewandelt wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, uniform, size, gap, scale ### Share toggle chip https://fieldbook.lizardi.mx/de/components/share-toggle-chip Ein versenkter Chip, der beim Klicken von einer Einladung in einen bestätigten Zustand wechselt, wobei sein Glyph über die volle Größe hinausgeht, bevor es sich niederlässt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: idleLabel, activeLabel, accent, popScale, recessed ### Button-to-dialog morph https://fieldbook.lizardi.mx/de/components/shared-button-to-dialog Eine pillenförmige Schaltfläche, die direkt in einen Bestätigungsdialog hineinwächst und ihre abgerundete Form und Beschriftung während des Übergangs beibehält, anstatt ein separates Modal zu öffnen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, confirmLabel, accent ### Shared-Element Lightbox https://fieldbook.lizardi.mx/de/components/shared-element-lightbox Ein Raster aus Miniaturansichten, bei dem durch Klicken auf eine davon diese nahtlos in eine große zentrierte Überlagerung umgewandelt wird und durch Schließen wieder an ihre ursprüngliche Stelle zurückverwandelt wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: columns, gap, closeOnBackdrop ### Shared layout card expand https://fieldbook.lizardi.mx/de/components/shared-layout-card-expand Ein Kartenraster, bei dem durch Klicken auf eine Karte ein großes Detailfenster angezeigt wird und beim direkten Wechsel zu einer anderen Karte derselbe Reflow neu ausgerichtet wird, anstatt ihn zu schließen und dann wieder zu öffnen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: columns, title, accent ### Shared-Layout Tab Switch https://fieldbook.lizardi.mx/de/components/shared-layout-tab-switch Eine Reihe von Tabs mit reinem Text, bei denen ein einfarbiger Pillenhintergrund verschiebbar ist und dessen Größe mithilfe einer federgesteuerten Bewegung im gemeinsamen Layout an die ausgewählte Registerkarte angepasst wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: selected, accentColor, pillRadius ### Sheen scale button https://fieldbook.lizardi.mx/de/components/sheen-scale-button Ein gefüllter Knopf mit fester Größe und einem diagonalen zweifarbigen Glanz, der leicht anschwillt und beim Schweben oder Fokussieren einen passenden Heiligenschein wirft. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, growth, halo ### Sheen sweep card https://fieldbook.lizardi.mx/de/components/sheen-sweep-card Eine Karte mit einem Lichtband an einer Ecke, das sich beim Schweben über die Vorderseite bewegt und zurückgleitet, sobald der Zeiger weggeht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: angle, bandSize, duration, playOnce, glareColor ### Sheen upload button https://fieldbook.lizardi.mx/de/components/sheen-upload-button Ein kompakter Upload-Button mit einer von oben beleuchteten Vorderseite; Wenn man darauf drückt, wird ein Glanz über den Wolkenpfeil gestrichen und nach oben geschoben, und in einem Besetztzustand wird der Glanz wiederholt, bis er ausgeschaltet wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, busy, sheenMs, radius ### Sheet drawer https://fieldbook.lizardi.mx/de/components/sheet-drawer Ein verschiebbares Panel, das von einer Kante über einen abgedunkelten Hintergrund einspringt, den Fokus darin hält und sich bei Escape, der Schließen-Taste oder einem Ziehen an der Kopfzeile schließt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: side, width ### Shifting frame button https://fieldbook.lizardi.mx/de/components/shifting-frame-button Eine dunkle, verfolgte Schaltfläche, umrahmt von einigen Pixeln einer breiten zweifarbigen Rampe, die langsam gleitet, sodass der sichtbare Rahmen ständig den Ton ändert. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, secondary, cycle, frameWidth ### Shifting gradient pill https://fieldbook.lizardi.mx/de/components/shifting-gradient-pill Ein Kapselknopf mit einer übergroßen diagonalen Rampe, die beim Betätigen über das Gesicht gleitet, während zwei leuchtende Ecken zwischen einem hellen und einem tiefen Farbton desselben Farbtons wechseln. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, shift, glow, pressTilt ### Shimmer sweep button https://fieldbook.lizardi.mx/de/components/shimmer-sweep-button Ein getönter, durchscheinender Knopf mit einer haarfeinen Kante, der beim Schweben ein schräges Lichtband über die Vorderseite streichen lässt. Frameworks: react Access: member Public prop names: label, accent, sweepMs, bandWidth, growOnHover ### Shimmer sweep text https://fieldbook.lizardi.mx/de/components/shimmer-sweep-text Eine Textzeile, in der jeder Buchstabe abwechselnd heller und dunkler wird und ein Lichtband in einer Schleife entlang der Phrase wandert. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, duration, restDelay, highlight, wave ### Shockwave dot grid https://fieldbook.lizardi.mx/de/components/shockwave-dot-grid Ein Punktraster, das sich zum Cursor hin verfärbt und sich ringförmig nach außen ausdehnt, wenn Sie darauf klicken oder darüber streichen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, dotSize, gap, proximity, shockRadius, returnSeconds ### Shortcut chip button https://fieldbook.lizardi.mx/de/components/shortcut-chip-button Ein kleiner Chip-Knopf, der eine Tastenkombination ankündigt, seine Glyphe beim Schweben neigt und einen dünnen Lichtstreifen über sich selbst streicht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: keyLabel, modifier, accent, sweepMs, showGlyph ### Shortcut key chip https://fieldbook.lizardi.mx/de/components/shortcut-key-chip Kleine pillenförmige Chips, die einzelne Tastaturtasten darstellen und nebeneinander platziert sind, um eine Tastenkombination zu buchstabieren. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: keys, size, tone, accent ### Shrink and emphasize button https://fieldbook.lizardi.mx/de/components/shrink-emphasis-button Ein Knopf, der sich beim Schweben zusammenzieht, während seine Beschriftung größer und schwerer wird, sodass der Typ nach außen gegen die schrumpfende Hülle drückt. Frameworks: react Access: member Public prop names: label, accent, shrink, tracking ### Shrink to icon button https://fieldbook.lizardi.mx/de/components/shrink-to-icon-button Eine breite beschriftete Kapsel, die sich beim Schweben oder Fokussieren zu einer runden Symbolschaltfläche verengt, während die Beschriftung aus dem Rahmen fällt und das Symbol hineinfliegt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, expandedWidth, height, duration, fromRight ### Shrinking cap icon row https://fieldbook.lizardi.mx/de/components/shrinking-cap-icon-buttons Eine Reihe runder Symbolschaltflächen, deren Füllung sich hinter einer dunklen Kappe verbirgt, die beim Schweben zusammenfällt und die Farbe vom Rand nach innen freilegt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, count, size, revealMs, pressScale ### Sign-in card with photo https://fieldbook.lizardi.mx/de/components/sign-in-card-with-photo Eine breite Anmeldekarte, aufgeteilt in eine Formularhälfte und eine Fotohälfte, zentriert auf einer getönten Seite, mit Anbieterschaltflächen, die nur aus Symbolen bestehen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, accentColor, providerCount ### Signal jitter heading https://fieldbook.lizardi.mx/de/components/signal-jitter-heading Eine fette Überschrift, die in drei getönten Schichten gezeichnet ist, die sich wie ein unterbrochenes Videosignal zackig auseinander bewegen und wieder zusammenfügen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, intensity, colorTheme, isStatic ### Signal sweep bands https://fieldbook.lizardi.mx/de/components/signal-sweep-bands Ein Banner aus interferenzverzerrten Lichtbändern, durch die ein heller Schwung wandert und dessen Farbkanäle leicht auseinanderliegen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: colorA, colorB, bandDensity, sweepSpeed, direction, grain ### Signed value bar chart https://fieldbook.lizardi.mx/de/components/signed-value-bar-chart Ein monatliches Balkendiagramm mit Mittelpunkt auf einer Nulllinie, wobei die Balken je nach Vorzeichen in einer Farbe steigen und in einer anderen fallen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: positiveColor, negativeColor, barRadius, animate ### Signup card on tint https://fieldbook.lizardi.mx/de/components/signup-card-on-tint Eine zentrierte Anmeldekarte auf einem getönten Seitenhintergrund, auf der die Felder „Passwort“ und „Passwort bestätigen“ nebeneinander unter einer gemeinsamen Hilfszeile zusammengefasst sind. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: heading, accentColor, brandName ### Signup card with photo https://fieldbook.lizardi.mx/de/components/signup-card-with-photo Eine breite Anmeldekarte, aufgeteilt in eine Formularhälfte und eine ausgeschnittene Fotohälfte, sammelt E-Mails und gepaarte Passwörter vor einer Reihe von Anbieterschaltflächen, die nur aus Symbolen bestehen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, accentColor, providerCount ### Signup page with social https://fieldbook.lizardi.mx/de/components/signup-page-with-social Eine kartenlose Anmeldeseite, auf der Name, E-Mail-Adresse und passende Passwörter über einer umrissenen Schaltfläche für einen alternativen Anbieter und einem zentralen Anmeldelink gesammelt werden. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: heading, accentColor, providerLabel ### Simple centered login https://fieldbook.lizardi.mx/de/components/simple-centered-login Eine zentrierte Anmeldeseitenkarte mit E-Mail- und Passwortfeldern, einer Senden-Schaltfläche in voller Breite, einer optionalen Single-Sign-On-Schaltfläche und einem Link zum Erstellen eines Kontos. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: heading, accentColor, showSocialButton ### Simple sign-in card https://fieldbook.lizardi.mx/de/components/simple-sign-in-card Eine zentrierte Anmeldeseitenkarte mit einem beschrifteten E-Mail-Feld, einem Passwortfeld mit einem Link zum Vergessen des Passworts, einer primären Schaltfläche zum Senden und einer umrissenen Schaltfläche für einen alternativen Anbieter. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: heading, accentColor, showAltProvider, providerLabel ### Single Date Grid https://fieldbook.lizardi.mx/de/components/single-date-grid Ein einfaches, ungerahmtes Monatsraster zur Auswahl eines Datums, mit einer Monatsüberschrift, einer Wochentagszeile und großzügigen Tageszellen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, cellSize, showOutsideDays ### Single glyph spinner https://fieldbook.lizardi.mx/de/components/single-glyph-spinner Ein minimaler Ringspinner: ein dünn gestrichelter Bogen, der sich kontinuierlich dreht, um zu signalisieren, dass eine Hintergrundaufgabe ausgeführt wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, color, speed ### Single Hoop Radar https://fieldbook.lizardi.mx/de/components/single-hoop-radar Eine reduzierte Polarkarte mit genau einem Referenzring und ohne Speichen, sodass die Serienform anhand eines einzelnen Schwellenwertrings gelesen wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, hoopScale, hoopStroke, fillOpacity, showLabels ### Single line typewriter caret https://fieldbook.lizardi.mx/de/components/single-line-typewriter-caret Ein einzelner Satz wird einmal in einem ungleichmäßigen, menschlichen Tempo getippt, dann blinkt eine durchgehende Einfügemarke ununterbrochen neben der fertigen Zeile. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, baseSpeedMs, accent, blinkMs ### Single Panel Disclosure https://fieldbook.lizardi.mx/de/components/single-panel-disclosure Ein Auslöser und ein Panel: ein kompakter Block zum Ein- und Ausblenden, der seinen Inhalt unter einer weichen Maske ablegt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, defaultOpen, keepMounted, travel, duration ### Single value slider https://fieldbook.lizardi.mx/de/components/single-value-slider Ein horizontaler Schieberegler mit einem verschiebbaren Daumen, der die Spur dahinter ausfüllt, sodass der aktuelle Wert auf einen Blick ablesbar ist. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: value, accent ### Sinking lip button https://fieldbook.lizardi.mx/de/components/sinking-lip-button Eine klobige, abgerundete Kappe auf einem dunkleren Lippenband, die beim Drücken zusammenfällt, sodass die Kappe bündig in ihre Basis einsinkt und beim Loslassen wieder zurückspringt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lipDepth, radius, disabled ### Sketched outline button https://fieldbook.lizardi.mx/de/components/sketched-outline-button Eine umrissene Schaltfläche, deren vier Ecken absichtlich ungleichmäßig sind und die sich beim Schweben oder Fokussieren mit einem gestrichelten Strich in eine zweite schiefe Form neu zeichnet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, stroke, wobble, dashOnHover, duration ### Skewed blade invert https://fieldbook.lizardi.mx/de/components/skewed-blade-invert-button Eine dunkle, abgerundete Taste, die sich in eine schräge Akzentklinge umdreht, die sich bei Hover oder Tastaturfokus von ihrer Mitte nach außen öffnet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, skew, durationMs, radius ### Skewed shutter button https://fieldbook.lizardi.mx/de/components/skewed-shutter-button Ein Knopf, dessen zwei gescherte Bahnen außerhalb seiner Kanten liegen und sich beim Schweben nach innen bewegen, wobei er sich hinter dem Etikett an einer diagonalen Naht schließt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, trailing, label, skew, duration ### Skewed slab button https://fieldbook.lizardi.mx/de/components/skewed-slab-button Eine gescherte Plattentaste, die leicht transparent bleibt und beim Schweben ihre volle Stärke entfaltet und bei Tastaturfokus vergrößert wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, lean, borderWidth, restOpacity ### Skewed slab press https://fieldbook.lizardi.mx/de/components/skewed-slab-press-button Ein schräger, plattenförmiger Knopf, der auf einer harten Kante steht und beim Halten flach herunterfällt und seine Beschriftung festigt, um dann beim Loslassen wieder zurückzufedern. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, ledgeColor, label, skew, ledge ### Skewed wipe button https://fieldbook.lizardi.mx/de/components/skewed-wipe-button Eine Schaltfläche, die von einem schrägen dunklen Feld verdeckt wird, das beim Schweben nach rechts gleitet und die Farbe darunter freilegt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, skew, duration ### Skewed wipe reveal button https://fieldbook.lizardi.mx/de/components/skewed-wipe-reveal-button Eine Pille, versteckt unter einer schrägen dunklen Platte; Wenn Sie den Mauszeiger darüber bewegen, wird das Panel vom rechten Rand verschoben, um die helle Füllung freizulegen, während die Beschriftung dunkel wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, skew, duration, direction ### Skewed wipe swap button https://fieldbook.lizardi.mx/de/components/skewed-wipe-swap-button Eine Schaltfläche, deren Beschriftung beim Schweben oder Fokussieren wechselt, während ein geschertes Akzentfeld über die Vorderseite gewischt wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: restLabel, hoverLabel, accent, skew, speed ### Slab Lift Icon Button https://fieldbook.lizardi.mx/de/components/slab-lift-icon-button Eine durchscheinende Symbolkachel, die sich beim Schweben von einer festen Lichtplatte erhebt, dann wieder nach unten knallt und die Platte verschluckt, wenn man darauf drückt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, lift, tint, size, radius ### Slanted outline button https://fieldbook.lizardi.mx/de/components/slanted-outline-button Ein hohler Parallelogrammknopf, dessen Umriss in zwei Stufen vorliegt: Die schrägen Seiten schwenken zuerst in ihre Neigung, dann ziehen sich die flache Ober- und Unterseite nach innen, um die Form zu schließen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, slant, lineWidth, glow ### Slanted shutter button https://fieldbook.lizardi.mx/de/components/slanted-shutter-button Zwei schräge Akzentfelder fallen von oben und unten herab und schließen über der Pille an einer diagonalen Naht, während das Etikett einmal aufgerollt und durch die Füllung umgedreht wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, skew, duration, radius ### Slice picker donut https://fieldbook.lizardi.mx/de/components/slice-picker-donut Ein Donut, der durch ein Dropdown-Menü in seiner Kopfzeile gesteuert wird: Das ausgewählte Stück schiebt sich nach außen und bildet einen freistehenden äußeren Bogen, während das Loch die Nummer dieses Stücks anzeigt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, holeRatio, raise, ringGap, hueRange ### Slide away destructive https://fieldbook.lizardi.mx/de/components/slide-away-destructive-button Eine destruktive Schaltfläche, deren Beschriftung nach links verschiebt und nur noch ein Kreuz hinterlässt. Beim Drücken wechselt sie dann für einen Moment in die Erfolgsanzeige mit einem Häkchen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, confirmColor, slideMs, confirmMs ### Slide out tabs button https://fieldbook.lizardi.mx/de/components/slide-out-tabs-download-button Eine Download-Schaltfläche mit zwei dahinter gestapelten dunklen Beschriftungsregistern, die beim Schweben nach oben und unten herausgleiten und beim Halten halb zurückgezogen werden. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, topCaption, bottomCaption, accent, travel ### Slide under download button https://fieldbook.lizardi.mx/de/components/slide-under-download-button Ein beschrifteter Knopf, der beim Schweben oder Fokussieren ein helles Aktionsfach unter seiner Platte hervorzieht, mit einem wackelnden Download-Pfeil im Inneren des Fachs. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, direction, duration, bobbing ### Slide up panel dialog https://fieldbook.lizardi.mx/de/components/slide-up-panel-dialog Ein zentrierter Dialog, der über einem gedimmten Geflecht entsteht, für jeden Inhalt, der einen Moment voller Aufmerksamkeit erfordert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, closeOnOverlayClick, panelWidth ### Sliding content tabs https://fieldbook.lizardi.mx/de/components/sliding-content-tabs Ein Inhaltsansichtsfenster gepaart mit einer Kapsel-Tab-Leiste darunter, bei der beim Wechseln der Tabs das Bedienfeld von der Seite des ausgewählten Tabs eingeschoben wird, während eine farbige Hervorhebung hinter die aktive Beschriftung gleitet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: activeTab, accent ### Sliding digit counter https://fieldbook.lizardi.mx/de/components/sliding-digit-counter Eine Summe, die hochgezählt wird, indem jede Ziffernspalte an ihren Platz gerollt wird, während sich daneben ein Stern füllt und bei der Landung ein paar Partikel zerplatzt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: value, duration, accent, particles, label ### Sliding fill send pill https://fieldbook.lizardi.mx/de/components/sliding-fill-send-pill Eine Pille mit breitem Umriss und einer festen Scheibe an einem Ende; schwebende Schieber, die sich über die gesamte Pille füllen und das Etikett beim Vorbeigehen umdrehen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, height, slideSeconds, capSide ### Sliding height tabs https://fieldbook.lizardi.mx/de/components/sliding-height-tabs In einer Karte eingerahmte Tabs, bei denen beim Wechseln der Felder der gesamte Inhalt wie bei einem Filmstreifen zur Seite verschoben wird, während die Höhe der Karte an das neue Feld angepasst wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: tabOneLabel, tabTwoLabel, accent ### Sliding highlight menu https://fieldbook.lizardi.mx/de/components/sliding-highlight-menu Ein durch Tasten ausgelöstes Aktionsmenü, bei dem eine abgerundete Platte zwischen den Zeilen gleitet, wenn sich der Zeiger oder die Pfeiltasten bewegen, anstatt dass jede Zeile einzeln aufleuchtet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, align, offset, accent, showShortcuts ### Sliding highlight tabs https://fieldbook.lizardi.mx/de/components/sliding-highlight-tabs Eine zugängliche Tab-Liste, bei der ein abgerundeter Hervorhebungsblock unter der aktiven Beschriftung gleitet, während sich die Auswahl zwischen den Tabs bewegt, und darunter ein entsprechendes Inhaltsfeld freigibt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultTab, fullWidth ### Sliding highlight toggle group https://fieldbook.lizardi.mx/de/components/sliding-highlight-toggle-group Eine Reihe von Symbolschaltflächen mit einem Hervorhebungsfeld, das unter dem aktiven Symbol gleitet oder im Mehrfachauswahlmodus unabhängig hinter jedem aktiven Symbol ausgeblendet wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: mode, iconCount, defaultActive, accent ### Sliding label button https://fieldbook.lizardi.mx/de/components/sliding-label-button Ein solider Knopf, dessen Beschriftung direkt nach oben aus dem Rahmen rollt, während eine zweite Linie von unten nach innen rollt, um ihren Platz einzunehmen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, hoverLabel, variant, accent, slideMs ### Sliding panel button https://fieldbook.lizardi.mx/de/components/sliding-panel-button Ein umrandeter Knopf, dessen zweites Etikett auf einem farbigen Feld vom rechten Rand aus gleitet und das erste Etikett vollständig abdeckt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, hoverLabel, accent, companion, duration ### Sliding Panel Tabs https://fieldbook.lizardi.mx/de/components/sliding-panel-tabs Zwei Registerkarten in einer abgerundeten Pillenspur mit einer Hervorhebung, die dazwischen gleitet und ein darunter liegendes Bedienfeld im Einstellungsstil überblendet, ohne dass es zu einem Layoutsprung kommt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, defaultTab ### Sliding Pin Swap https://fieldbook.lizardi.mx/de/components/sliding-pin-swap-button Eine rampenförmige Schaltfläche, deren Pin-Glyphe von einer Seite zur anderen gleitet, während das ruhende Wort ausgeblendet und dahinter eine Antwort eingeblendet wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, idleLabel, hoverLabel, travel, duration ### Sliding segment tabs https://fieldbook.lizardi.mx/de/components/sliding-segment-tabs Ein pillenförmiges, segmentiertes Steuerelement, dessen Hintergrundanzeige unter der aktiven Beschriftung gleitet, während das Feld darunter aus der Fahrtrichtung hineingleitet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, segments, transitionSpeed, defaultIndex ### Sliding segment toggle https://fieldbook.lizardi.mx/de/components/sliding-segment-toggle Ein segmentiertes Einzelauswahl-Steuerelement, bei dem ein Hervorhebungssymbol unter der aktiven Beschriftung gleitet, wenn ein anderes Segment ausgewählt wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: variant, size, accentColor ### Sliding Selection Highlight https://fieldbook.lizardi.mx/de/components/sliding-selection-highlight Ein gemeinsamer schwebender Hintergrundchip, der innerhalb einer Reihe von Optionen von einem Element zum anderen gleitet und verfolgt, welches Element mit der Maus bewegt oder angeklickt wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: mode, accent, exitDelay ### Sliding send button https://fieldbook.lizardi.mx/de/components/sliding-send-button Eine flache Sendeschaltfläche, die beim Schweben nach rechts gleitet, während sich die Lücke zwischen Beschriftung und Pfeil öffnet, beim Drücken ein paar Pixel zurückweicht und beim Verlassen wieder zur Ruhe kommt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, travel, tracking ### Sliding Thumb Switch https://fieldbook.lizardi.mx/de/components/sliding-thumb-switch Ein Ein-/Ausschalter, der aus einem versteckten Kontrollkästchen besteht: einer Pillenleiste, die sich neu einfärbt, und einem runden Daumen, der an die gegenüberliegende Kante gleitet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: checked, accentColor, disabled ### Slotted panel card https://fieldbook.lizardi.mx/de/components/slotted-panel-card Eine zusammensetzbare Oberfläche mit Header-, Action-, Body- und Footer-Slots, die ihren Abstand beibehalten, egal wie viele verwendet werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: title, showAction, showDivider, accent ### Smoke trail cursor https://fieldbook.lizardi.mx/de/components/smoke-trail-cursor Eine sanfte, wirbelnde Wolke, die dem Zeiger wie Rauch folgt, sich wieder zusammenrollt, wenn Sie die Richtung ändern, und sich auflöst, wenn Sie anhalten. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: trailLength, inertia, grain, brightness, color ### Smoke veil drift https://fieldbook.lizardi.mx/de/components/smoke-veil-drift Breite Schichten aus farbigem Dunst überqueren schräg ein schwarzes Feld und werden dünner und dicker, während sie aneinander vorbeigleiten. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, speed, veilCount, hueDrift, scanlines ### Smooth Area Trend https://fieldbook.lizardi.mx/de/components/smooth-area-trend-chart Ein Flächendiagramm mit einer einzigen Reihe mit einer sanft geschwungenen Oberkante, einer sanft getönten Füllung, schwachen horizontalen Gitterlinien und einer Anzeige, die dem Zeiger folgt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, months, fillOpacity, showGrid, animate ### Snap back icon button https://fieldbook.lizardi.mx/de/components/snap-back-icon-button Eine bloße Glyphen-Schaltfläche, die sanft unter dem Zeiger wächst und in dem Moment, in dem sie gedrückt wird, wieder auf ihre Ruhegröße zurückkehrt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, size, hoverScale, strokeWidth ### Social Post Card https://fieldbook.lizardi.mx/de/components/social-post-card Ein vollständiger Social-Media-Beitrag mit Autorenkopf, verlinktem Hauptteil, einem Medienraster, das sich an ein bis vier Elemente anpasst, und einer Metrikzeile. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: mediaCount, verified, showMetrics, accent ### Social proof avatar row https://fieldbook.lizardi.mx/de/components/social-proof-avatar-row Eine enge Reihe überlappender Avatarkreise schließt sich mit einer Blase, die alle Personen zählt, die nicht in der Reihe sind. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: size, overlap, accent, overflowCount ### Social sign-in card https://fieldbook.lizardi.mx/de/components/social-sign-in-card Eine Anmeldeseitenkarte auf einem getönten Hintergrund, die mit Anbieterschaltflächen in voller Breite beginnt und dann einen E-Mail- und Passwort-Fallback mit untenstehenden Kleingedruckten der Bedingungen bietet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: brandName, accentColor, providerCount ### Soft bloom fill button https://fieldbook.lizardi.mx/de/components/soft-bloom-fill-button Eine Haaransatzpille, die von innen durch einen verschwommenen Punkt beleuchtet wird, der langsam von einer Ecke anschwillt, bis er das ganze Gesicht ausfüllt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, blur, duration, startSize ### Soft fiber curtain https://fieldbook.lizardi.mx/de/components/soft-fiber-curtain Geschichtete Vorhänge aus hellen Fäden neigen und winden sich über ein tiefes Feld und werden heller, wenn sie sich wie Licht durch den Stoff kreuzen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: glowColor, layers, speed, twist, brightness, grain ### Soft inset press button https://fieldbook.lizardi.mx/de/components/soft-inset-press-button Eine nahezu schwarze Platte, die über einem passenden Panel auf zwei gegenüberliegenden weichen Schatten liegt, sinkt beim Halten in die Oberfläche und erhebt sich beim Loslassen wieder. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, depth, radius, restOpacity ### Soft Pad Button https://fieldbook.lizardi.mx/de/components/soft-pad-button Ein abgerundeter Block, der auf einer matten Oberfläche mit gepaarten hellen und dunklen Schatten steht und näher an der Seite unter der Druckmaschine liegt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, surface, lift, radius ### Soft relief button https://fieldbook.lizardi.mx/de/components/soft-relief-button Eine blasse Pille, die auf der einen Seite von einem warmen Glanzlicht und auf der anderen von einem kühlen Schatten hervorgehoben wird. Beim Schweben wird sie enger und verschwindet vollständig, wenn sie bündig gehalten wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, depth, radius, showIcon ### Soft relief send button https://fieldbook.lizardi.mx/de/components/soft-relief-send-button Eine aus einer hellen Oberfläche geformte Sendetaste: ein zweifarbiger Rand um ein weiches Innenpolster mit einem gefüllten Sendezeichen, das beim Halten flach sinkt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, depth, radius, sink ### Solid Ring Spinner https://fieldbook.lizardi.mx/de/components/solid-ring-spinner Eine gepolsterte, kastenförmige Ladeanzeige: ein dicker Ring mit einer akzentfarbenen Kante, der sich mit konstanter linearer Geschwindigkeit innerhalb einer abgerundeten Platte dreht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, size, durationMs ### Spacebar Keycap https://fieldbook.lizardi.mx/de/components/spacebar-keycap-button Eine breite mechanische Tastenkappe, die Sie mit dem Zeiger oder der echten Leertaste drücken können, komplett mit einer Referenzmarkierung und einem geformten Hub. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: legend, keyTint, width, travel, bindSpaceKey ### Spark line https://fieldbook.lizardi.mx/de/components/spark-line Eine Reihe metrischer Kacheln, deren Sparklines sich selbst auf der Halterung zeichnen und dem Zeiger mit einem Fadenkreuz folgen, das den darunter liegenden Wert anzeigt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: color, smooth, points ### Sparkling highlight text https://fieldbook.lizardi.mx/de/components/sparkling-highlight-text Fettgedruckter Displaytext mit einer Handvoll winziger vierzackiger Sterne, die an zufälligen Stellen über den Buchstaben auftauchen und verschwinden, wobei jeder einzelne wächst, sich kurz dreht und dann verschwindet, um an anderer Stelle ersetzt zu werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, sparkleCount, accentA, accentB ### Speaking glow button https://fieldbook.lizardi.mx/de/components/speaking-glow-button Eine dunkle Pille, deren unterer Rand leuchtende Bänder trägt, die in versetzten Schleifen verlaufen, sodass sie beim Zuhören wie eine Live-Wellenform gelesen wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, listening, bandCount, speed ### Speckled gradient button https://fieldbook.lizardi.mx/de/components/speckled-gradient-button Eine Fläche mit Farbverlauf mit zwei Stufen, überlagert mit erzeugtem fraktalem Rauschen in einer weichen Mischung, sodass die Farbe aussieht, als wäre sie auf rauem Material gedruckt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, partner, label, grain, grainStrength ### Specular edge button https://fieldbook.lizardi.mx/de/components/specular-edge-button Ein dunkler Knopf, dessen abgerundeter Umriss sich wie poliertes Metall verhält, mit einer Hervorhebung an den Kanten, die einem Licht zugewandt ist, das auf den Zeiger an einer beliebigen Stelle auf der Seite gerichtet ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, lineColor, intensity, radius, proximity, autoSweep ### Spin count tile https://fieldbook.lizardi.mx/de/components/spin-count-tile Ein Quadrat, das sich bei Bedarf eine ganze Reihe von Malen dreht und wieder im Quadrat landet, wobei ein schwacher Bogen anzeigt, wie weit die Drehung bereits entfernt ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, turns, duration, easing, continuous ### Spin Off Thanks https://fieldbook.lizardi.mx/de/components/spin-off-thanks-button Ein Aufruf zum Handeln mit zwei Gesichtern, bei dem sich die obere Seite wegdreht und herausfällt, während sich dahinter eine zweite Seite erhebt, um zu übernehmen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: frontLabel, backLabel, accent, backColor, spinDegrees, latchOnClick ### Spinning square flood button https://fieldbook.lizardi.mx/de/components/spinning-square-flood-button Ein umrissener Knopf, der als sich drehendes, abgerundetes Quadrat mit seinem Akzent überflutet, gleitet aus der Ecke hinein, sodass die Füllung hinter einer wellenförmigen Rollkante ankommt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, spinSeconds, floodSeconds, squareSize, radius ### Spinning text ring https://fieldbook.lizardi.mx/de/components/spinning-text-ring Eine kurze, wiederholte Phrase, die Buchstabe für Buchstabe um einen Kreis herum angeordnet ist, der sich stetig dreht, wie die Kante einer Münze oder ein Briefmarkensiegel. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, durationSeconds, radius, reverse, accent ### Split cover login https://fieldbook.lizardi.mx/de/components/split-cover-login Eine zweispaltige Anmeldeseite mit einem zentrierten Anmeldeformular neben einem vollflächigen, dekorativen Abdeckfeld, das auf schmalen Bildschirmen verschwindet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: brandName, accentColor, imageSide ### Split cover signup https://fieldbook.lizardi.mx/de/components/split-cover-signup Eine zweispaltige Anmeldeseite: ein schmales, zentriertes Formular mit einem Markenzeichen auf der einen Seite und einem randlosen illustrierten Einband auf der anderen Seite, das bei schmaler Seite auf eine einzelne Spalte reduziert wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: brandName, accentColor, imageSide ### Split curtain reveal button https://fieldbook.lizardi.mx/de/components/split-curtain-reveal-button Ein Knopf, der unter vier Akzentfeldern verborgen ist, die sich zunächst seitlich und einen Schlag später vertikal öffnen und das Etikett in zwei Stufen freilegen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, duration, stagger, borderWidth ### Split flap display https://fieldbook.lizardi.mx/de/components/split-flap-display Eine Reihe mechanischer Flipboard-Kacheln durchläuft eine Liste mit kurzen Sätzen, und nur die Kacheln, deren Buchstaben sich ändern, fallen vor der Landung durch ein paar zufällige Klappen. Frameworks: react, svelte, astro, html Access: member Public prop names: phrases, cycleDelay, tileColor, textColor ### Split flap face button https://fieldbook.lizardi.mx/de/components/split-flap-face-button Das gefüllte Gesicht fällt beim Schweben aus der Unterseite der Schaltfläche heraus und das Etikett baut sich Buchstabe für Buchstabe dahinter neu auf. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, stagger, travel, duration ### Split panes https://fieldbook.lizardi.mx/de/components/split-panes Zwei Bereiche, die durch einen Griff getrennt sind, der ihre Größe durch Ziehen oder Pfeiltasten ändert, auf beiden Seiten eine Mindestgröße beibehält und bei Doppelklick wieder einrastet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: initialSplit, direction ### Split Reveal Hover Text https://fieldbook.lizardi.mx/de/components/split-reveal-hover-text Der Text wird in eine obere und eine untere Hälfte unterteilt; Beim Schweben gleitet die obere Hälfte weg und wird ausgeblendet, während die untere Hälfte nach oben gleitet, um das Wort zu vervollständigen, und die Umkehrung erfolgt, wenn der Zeiger weggeht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, splitGap, accentColor ### Split shutter reveal button https://fieldbook.lizardi.mx/de/components/split-shutter-reveal-button Ein runder Knopf, dessen zwei Beschriftungshälften sich unterschiedlich schnell zu den Rändern zurückziehen und beim Kippen des Ganzen das Atemzeichen darunter freilegen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, rotation, scale, revealSeconds ### Split sign-in page https://fieldbook.lizardi.mx/de/components/split-sign-in-page Eine zweispaltige Anmeldeseite, die eine schmale Formularspalte mit einem Titelbild in voller Höhe auf der gegenüberliegenden Seite kombiniert, wobei das Bild auf kleinen Bildschirmen verschwindet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: brandName, accentColor, imageSide ### Split text entrance https://fieldbook.lizardi.mx/de/components/split-text-entrance Text, der in Zeichen, Wörter oder Zeilen geschnitten und Stück für Stück auf einem gemeinsamen Stapel animiert wird, wobei mehrere Eingangsvoreinstellungen zur Auswahl stehen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: unit, preset, stagger, delay, accent ### Split text reveal https://fieldbook.lizardi.mx/de/components/split-text-reveal Eine Überschrift, deren Wörter oder Zeichen aus einer Clip-Maske auftauchen, verschwommen und getönt sind, beim Mounten von links nach rechts versetzt und beim Klicken wiedergegeben werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, split, stagger, duration ### Spoke area chart https://fieldbook.lizardi.mx/de/components/spoke-area-chart Ein Polardiagramm, bei dem beschriftete Speichen eine Reihe als durchscheinende geschlossene Form über einem Polygongitter tragen, mit einer Anzeige, die an der nächstgelegenen Speiche einrastet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, fillOpacity, rings, strokeWidth, animate ### Spoke Radar Plot https://fieldbook.lizardi.mx/de/components/spoke-radar-plot Metriken auf strahlenden Speichen mit konzentrischen Ringen, wobei sich jede Reihe von der Mitte aus aufbläst und beim Schweben aufleuchtet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, secondary, levels, series, showPoints, showGrid ### Spokeless Ring Radar https://fieldbook.lizardi.mx/de/components/spokeless-ring-radar Ein Polardiagramm mit konzentrischen Skalenringen und ohne radiale Speichen, das eine gepunktete Reihe darstellt, deren Ecken die Kategoriebeschriftungen tragen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, rings, dotRadius, fillOpacity, animate ### Spotlight card https://fieldbook.lizardi.mx/de/components/spotlight-card Karten, deren 1-Pixel-Rand und -Oberfläche um den Zeiger herum aufleuchten, wobei sich die Hervorhebung über eine Reihe von Statistikkacheln erstreckt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: color, radius, borderOnly ### Spotlight fill button https://fieldbook.lizardi.mx/de/components/spotlight-fill-button Ein Pillenknopf mit einem satten Akzent, der beim Schweben seine Füllung unter einem dunklen Schleier dimmt, während ein sanfter ovaler Scheinwerfer dem Zeiger folgt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, spotSize, dim, followPointer ### Spotlight profile grid https://fieldbook.lizardi.mx/de/components/spotlight-profile-grid Ein Raster aus Profilkarten, das entsättigt und gedimmt bleibt, mit Ausnahme eines sanften Scheinwerferlichts, das dem Zeiger folgt und die volle Farbe darunter zum Vorschein bringt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: spotlightRadius, columns, damping, accentColor ### Spotlight shafts https://fieldbook.lizardi.mx/de/components/spotlight-shafts Von einem Punkt an einer Kante des Rahmens strömen Lichtstrahlen aus, atmen ein und aus und steuern auf den Zeiger zu. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: rayColor, origin, spread, rayLength, speed, followPointer ### Spring dot radio group https://fieldbook.lizardi.mx/de/components/spring-dot-radio-group Eine Radiogruppe, deren ausgewählter Punkt mit einem kleinen Überschwinger einspringt, während der vorherige Punkt kleiner wird und sich kreuzt, anstatt einzurasten. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, dotSize, layout, showDescriptions, disabledIndex ### Spring drag carousel https://fieldbook.lizardi.mx/de/components/spring-drag-carousel Ein ziehbares Kartenkarussell, das mit Federphysik zur nächsten Karte springt und automatisch in einer Schleife abgespielt werden kann. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: autoplay, autoplayDelay, loop, baseWidth, accentColor ### Spring easing toggle https://fieldbook.lizardi.mx/de/components/spring-easing-toggle Eine Kachel, die zwischen zwei Stopps auf einer Federkurve gleitet, die in einen einfachen CSS-Übergang eingebettet ist, wobei die generierte Kurve daneben dargestellt wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: bounce, duration, accent, showCurve, spin ### Spring Fill Progress https://fieldbook.lizardi.mx/de/components/spring-fill-progress Eine schlanke Fortschrittsanzeige, deren Füllung auf einer Feder zu jedem neuen Wert gleitet, mit einer Anzeige, die mitzählt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: autoplay, value, trackHeight, accent, showReadout ### Spring lag trail https://fieldbook.lizardi.mx/de/components/spring-lag-trail Eine Kette von Kreisen, die den Zeiger mit immer weicheren Federn verfolgen, sodass sie sich bei schneller Bewegung zu einem Kometenschweif ausdehnen, der sich im Ruhezustand wieder zusammenzieht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, trailCount, stiffness, damping, headSize ### Spring layout toggle https://fieldbook.lizardi.mx/de/components/spring-layout-toggle Ein Schalter, dessen Knopf allein aufgrund der Anordnung an einem Ende der Schiene ausgerichtet ist und bei jedem Zustandswechsel zwischen den beiden gemessenen Positionen springt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: on, bounce, size, label, accent ### Spring press button https://fieldbook.lizardi.mx/de/components/spring-press-button Ein schlichter Knopf, der ein wenig unter dem Zeiger wächst und beim Halten eintaucht, beides auf einer kurzen Feder, wobei die beiden Skalen und die Federsteifigkeit als Knöpfe sichtbar sind. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, hoverScale, tapScale, stiffness, accent ### Spring Push Collapsible https://fieldbook.lizardi.mx/de/components/spring-push-collapsible Eine Einstellungszeile, die ein Detailfenster öffnet und die darunter liegenden Zeilen auf einer gemeinsamen Feder nach unten drückt, statt auf einen Höhensprung. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, defaultOpen, stiffness, damping, keepMounted ### Spring reveal button https://fieldbook.lizardi.mx/de/components/spring-reveal-button Eine verspielte Kapsel mit einem sich drehenden Spielstein auf der linken Seite; Beim Schweben kollabiert der Token und eine übergroße Form springt von unten nach oben und schaukelt bei der Landung. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, rockDegrees, spinSeconds, showTags ### Spring tuner https://fieldbook.lizardi.mx/de/components/spring-tuner-tile Eine Kachel, die zwischen zwei Zuständen hin- und herspringt, während eine Live-Kurve ihre Überschreitung aufzeichnet, sodass Steifheit, Dämpfung und Masse gleichzeitig gefühlt und abgelesen werden können. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, stiffness, damping, mass, property, showTrace ### Springing radio group https://fieldbook.lizardi.mx/de/components/springing-radio-group Eine Radiogruppe, bei der der ausgewählte Punkt mit einer kleinen Überschreitung aus dem Nichts hervorspringt, während der vorherige kleiner wird und jeder Ring unter dem Zeiger leicht wächst. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, orientation, ringSize, bounce, showDescriptions ### Squaring backer button https://fieldbook.lizardi.mx/de/components/squaring-backer-button Eine solide Pille mit einem geneigten Zwilling dahinter, der beim Schweben gerade einrastet und aufleuchtet, während sich von links neben dem Etikett ein Pfeil entfaltet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, tilt, scale, showArrow ### Squash key button https://fieldbook.lizardi.mx/de/components/squash-key-button Ein Tastenkappenknopf, der flach unter den Zeiger gedrückt wird, während eine Grundplatte darunter herausgleitet und dann beim Festhalten auf die Platte fällt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, squash, dropPx, showIcon ### Stacked Alert Toasts https://fieldbook.lizardi.mx/de/components/stacked-alert-toasts Ein in einer Ecke verankerter Toaststapel, bei dem neue Benachrichtigungen hinter der neuesten Karte komprimiert werden und der gesamte Stapel beim Schweben zu einer lesbaren Liste erweitert wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: position, durationSeconds, expandOnHover, color ### Stacked Area Chart https://fieldbook.lizardi.mx/de/components/stacked-area-chart Zwei monatliche Serien, gestapelt in gefüllten Bändern, wobei der äußere Rand die kombinierte Summe darstellt und die Naht zwischen ihnen zeigt, wie sich die Teilung bewegt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, secondColor, fillOpacity, showTotal, animate ### Stacked blur fade https://fieldbook.lizardi.mx/de/components/stacked-blur-fade Eine Scroll-Panel-Kante, die durch mehrere gestapelte Hintergrundunschärfen anstelle eines flachen Unschärfebands in die Panelfarbe übergeht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: height, position, layers, maxBlur, autoHide, accentColor ### Stacked option checklist https://fieldbook.lizardi.mx/de/components/stacked-checkbox-list Eine gestapelte Liste beschrifteter Kontrollkästchen, die eine gemeinsame Auswahl haben, mit einer laufenden Zählung der Anzahl ausgewählter Elemente. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, gap, orientation ### Stacked FAQ accordion https://fieldbook.lizardi.mx/de/components/stacked-faq-accordion Eine vertikale Liste von Fragen, die sich nacheinander zu einem Antwortfeld erweitern, mit einem Chevron, das sich entsprechend dem offenen Zustand dreht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: defaultOpenIndex, allowMultipleOpen, accentColor, animationMs ### Stacked notification drawer https://fieldbook.lizardi.mx/de/components/stacked-notification-drawer Ein kompakter Stapel von Benachrichtigungskarten, der sich hinter der obersten Karte verbirgt, bis er mit der Maus darüber bewegt wird, und sich dann zu einer vollständig lesbaren Liste auffächert, bevor er wieder zusammenfällt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cardCount, accentColor, expandOnHover, stiffness ### Stacked notification tray https://fieldbook.lizardi.mx/de/components/stacked-notification-tray Ein Stapel von Benachrichtigungskarten im Telefonstil, der sich beim Antippen zu einer lesbaren Liste auffächert und wieder zu einem einzigen Stapel zusammenfällt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, accent, startExpanded, collapsedOffset, stagger ### Stacked plate press button https://fieldbook.lizardi.mx/de/components/stacked-plate-press-button Ein klobiger, abgerundeter Knopf, der aus drei ineinandergreifenden Platten besteht, die beim Drücken auseinandergeschoben werden und beim Loslassen wieder einrasten. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, pressScale, plateLift, radius, showGlyph ### Stacked ripple button https://fieldbook.lizardi.mx/de/components/stacked-ripple-button Ein umrissener Knopf, der jede Welle gleichzeitig am Leben hält, sodass sich durch schnelles, wiederholtes Tippen überlappende Ringe bilden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, rippleColor, spread, rippleSeconds, maxRipples ### Stacked segment bar chart https://fieldbook.lizardi.mx/de/components/stacked-segment-bar-chart Ein Balkendiagramm, in dem pro Monat zwei Reihen in einer Spalte gestapelt sind, wobei das untere Segment einen Akzent und das obere Segment einen anderen Akzent hat, mit einer kleinen Legende, die die Aufteilung erklärt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: baseColor, topColor, barRadius, columnGap, animate ### Stacked shadow outline button https://fieldbook.lizardi.mx/de/components/stacked-shadow-outline-button Ein monospaced-Umrissknopf, der auf einer Leiter aus gestapelten Schatten ruht, der sich zusammenzieht und beruhigt, während der Akzent sein Gesicht überflutet, und dann eine Schicht nach der anderen zurückfedert. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, shadowLayers, settleDepth ### Stacked shadow text https://fieldbook.lizardi.mx/de/components/stacked-shadow-text Fetter, kursiver Anzeigetext befindet sich vor mehreren versetzten Schlagschatten in unterschiedlichen Farben, was ihm ein geschichtetes, extrudiertes Aussehen verleiht, das sich beim Schweben zu einer klaren Linie verflacht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, shadowColor, depth ### Stacked shell sign in https://fieldbook.lizardi.mx/de/components/stacked-shell-sign-in Ein Anmeldeknopf, der aus drei ineinander verschachtelten runden Schalen besteht, sodass das Etikett in einer kleinen erhabenen Vertiefung sitzt, die beim Drücken flach wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, height, lift, showMark ### Stacked swap cart button https://fieldbook.lizardi.mx/de/components/stacked-swap-cart-button Zwei Schaltflächen in voller Breite, die in einem Fenster mit einer Schaltfläche gestapelt sind. Wenn Sie also auf das Fenster zeigen, wird das Paar nach oben geschoben und die Aktion „Durchsuchen“ gegen die Aktion „Kaufen“ ausgetauscht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: topLabel, bottomLabel, accent, secondary, duration ### Staged expand delete button https://fieldbook.lizardi.mx/de/components/staged-expand-delete-button Eine quadratische Mülleimer-Symbolkachel, die sich nach einer kurzen Verzögerung beim Schweben vergrößert, ihre Beschriftung einblendet und nach einem bestätigenden zweiten Klick fragt, bevor sie ausgelöst wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, confirmLabel, accent, expandedWidth, delay, open ### Stagger bar row https://fieldbook.lizardi.mx/de/components/stagger-bar-row Eine Reihe von Stäben, die nacheinander an ihren Platz steigen, wobei die Welle an einem der Enden oder in der Mitte nach außen beginnt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, count, stagger, origin, distance ### Staggered Fade List https://fieldbook.lizardi.mx/de/components/staggered-fade-list Zeilen, die von einem ausgewählten Start-opacity nacheinander ausgeblendet werden, wenn die Gruppe angezeigt wird, wobei der Abstand zwischen ihnen einstellbar ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: startOpacity, endOpacity, stagger, delay, accent ### Staggered Offer Drawer https://fieldbook.lizardi.mx/de/components/staggered-offer-drawer Eine unterste Schublade, die für ein begrenztes Angebot wirbt, wobei Überschrift, Preis und Schaltflächen nacheinander angezeigt werden, anstatt alle auf einmal zu erscheinen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: title, price, discountedPrice, accent ### Staggered Reveal Text https://fieldbook.lizardi.mx/de/components/staggered-reveal-text Ein Satz erscheint in gestaffelten Teilen, aufgeteilt in Wörter, Zeichen oder Zeilen, wobei ein ausgewählter Eingangsstil wie Einblenden, Unschärfe, Gleiten oder Skalieren verwendet wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, splitBy, style, durationSeconds, replayOnRescroll ### Staggered text entrance https://fieldbook.lizardi.mx/de/components/staggered-text-entrance Eine Überschrift wird in einem von mehreren wählbaren Eingangsstilen eingegeben, in Wörter, Zeichen oder Zeilen aufgeteilt und gestaffelt, sodass die Teile der Reihe nach und nicht alle auf einmal angeordnet werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, splitBy, style, staggerMs ### Stair step shadow button https://fieldbook.lizardi.mx/de/components/stair-step-shadow-button Ein blasser Knopf, der seinen Akzentrand beim Schweben an die beiden gegenüberliegenden Seiten weitergibt, während dahinter eine Treppe aus harten, abgestuften Schatten hervortritt und eine getönte Füllung aufsteigt, um der Beschriftung zu begegnen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, steps, stepSize, radius ### Stamped cursor trail https://fieldbook.lizardi.mx/de/components/stamped-cursor-trail Kleine Karten, die in festgelegten Abständen entlang des Zeigerpfads eingestanzt sind, fallen jeweils mit einer Neigung hinein und altern hinter dem Cursor heraus. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: trailLength, spacing, accent, tilt, fadeSeconds ### Star count button https://fieldbook.lizardi.mx/de/components/star-count-button Eine Repository-Sterntaste, deren Gesamtsumme Spalte für Spalte angezeigt wird und beim Drücken eine kurze Explosion winziger Sterne auslöst. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, count, rollDuration, skin, burst ### Starfield glow button https://fieldbook.lizardi.mx/de/components/starfield-glow-button Eine dunkle Pille, die beim Schweben oder Fokussieren mit einem funkelnden Sternenfeld, einem leuchtenden Eckeffekt und einem kühlen Druckzustand aktiviert wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, starCount, glowStrength, shootingStars ### Starred repos disclosure https://fieldbook.lizardi.mx/de/components/starred-repos-disclosure Eine Kopfzeile mit einer Umschalttaste, die eine kurze, ausgeblendete Liste markierter Repositorys unter einer Zeile anzeigt, die immer sichtbar bleibt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, defaultOpen, rowCount ### Status Alert Banner https://fieldbook.lizardi.mx/de/components/status-alert-banner Ein umrandetes Banner, das ein Symbol mit einem Titel und einer optionalen Beschreibung kombiniert, um einen Erfolgs- oder Fehlerstatus inline anzuzeigen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: variant, title, description, accentColor ### Status Avatar https://fieldbook.lizardi.mx/de/components/status-avatar Ein runder Avatar, der auf Initialen ohne Bild zurückgreift und ein kleines Online-Statusabzeichen tragen oder mit anderen stapeln kann. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, status, accent, showBadge ### Status cycle pill https://fieldbook.lizardi.mx/de/components/status-cycle-pill Ein Tablet, das bei jedem Tippen durch die Zustände „Leerlauf“, „Arbeitet“, „Fertig“ und „Fehler“ wechselt und dabei Beschriftung, Symbol und Farbe mit einem schnellen Pop-Übergang austauscht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, initialState, autoAdvance, intervalSeconds ### Stay Dates Picker https://fieldbook.lizardi.mx/de/components/stay-dates-picker Ein Feldpaar im Buchungsstil, Check-in und Check-out, jedes öffnet seinen eigenen Dropdown-Kalender neben einem Feld mit fester Zeit, um einen Aufenthalt mit zwei Enden auszuwählen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, checkInLabel, checkOutLabel, showTime ### Stay range popover picker https://fieldbook.lizardi.mx/de/components/stay-range-popover-picker Eine Auslöseschaltfläche, die zwei durch einen Bindestrich verbundene Daten anzeigt und einen schwebenden Bereichskalender zur Auswahl eines Start- und Endtages öffnet, um einen Aufenthalt im Hotelstil auszuwählen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, nights ### Steady fill button https://fieldbook.lizardi.mx/de/components/steady-fill-button Eine große, fast schwarze Primärschaltfläche, deren Füllung beim Schweben um zwei Schritte heller wird, während die Geometrie unverändert bleibt, mit horizontaler Polsterung, die mit der verfügbaren Containerbreite wächst. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, radius, roomy ### Step area chart https://fieldbook.lizardi.mx/de/components/step-area-chart Ein Flächendiagramm mit einer einzelnen Reihe, das als Treppe gezeichnet ist, wobei jeder Wert flach über seinem Schlitz gehalten wird und an der Grenze vertikal springt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, months, fillOpacity, stepAlign, animate ### Step goal progress bar https://fieldbook.lizardi.mx/de/components/step-goal-progress-bar Ein abgerundeter Fortschrittsbalken, der die abgeschlossenen Schritte einer Gesamtsumme verfolgt und eine Bruchteilbeschriftung über einer sanft animierten Füllung anzeigt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: current, total, color ### Stepped Value Line https://fieldbook.lizardi.mx/de/components/stepped-value-line Eine einzelne Reihe, die als flache Strecken und vertikale Sprünge gezeichnet ist, die gewünschte Form, wenn ein Wert konstant bleibt, bis er sich ändert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, stepMode, strokeWidth, showGrid, showAxis ### Sticky zoom hero https://fieldbook.lizardi.mx/de/components/sticky-zoom-hero Ein Hero-Panel, das angeheftet bleibt, während Sie scrollen, und dessen Hintergrund in Ihre Richtung schiebt, bis er verschwimmt und die Seite an den darunter liegenden Text übergibt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: headline, accent, maxScale, maxBlur, textLift ### Stitched disc button https://fieldbook.lizardi.mx/de/components/stitched-disc-button Eine geneigte, geformte Nähknopfscheibe, die sich beim Schweben oder Fokussieren aufrichtet und zu einer beschrifteten Pille öffnet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tilt, size ### Stitched rule link button https://fieldbook.lizardi.mx/de/components/stitched-rule-link-button Ein ruhiger Textlink in Großbuchstaben mit einem Chevron, der in einer ruhenden Schleife anstößt; Schweben oder Fokus halten den Chevron nach vorne, verbreitern die Spurweite und wischen eine gestickte Akzentlinie unter dem Etikett ab. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, nudge, ruleStyle, cycle ### Straight Segment Area Chart https://fieldbook.lizardi.mx/de/components/straight-segment-area-chart Ein Flächendiagramm mit einer einzigen Reihe, das aus geraden Segmenten zwischen Punkten besteht, sodass die Kontur wie eine scharfe, facettierte Polylinie und nicht wie eine Kurve aussieht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, months, fillOpacity, dotSize, animate ### Straight segment line https://fieldbook.lizardi.mx/de/components/straight-segment-line Ein einfaches Einzelreihendiagramm, das als gerade Segmente von Punkt zu Punkt ohne Markierungen gezeichnet wird, sodass jede Wendung in den Daten genau dort bleibt, wo sie passiert ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, strokeWidth, showGrid, showAxis, animateOnMount ### Streak border button https://fieldbook.lizardi.mx/de/components/streak-border-button Ein Pillenknopf mit einem weichen Lichtpunkt, der an der Ober- und Unterkante entlang gleitet, wobei sich die beiden Streifen in entgegengesetzte Richtungen bewegen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, speed, thickness ### Streaming signal line https://fieldbook.lizardi.mx/de/components/streaming-signal-line Ein Live-Liniendiagramm, das durch ein festes Zeitfenster scrollt und sich mit einem pulsierenden Tipp und einer Wertpille auf jeden neuen Messwert zubewegt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, windowSeconds, smoothing, volatility, showFill, paused ### Striped shadow heading https://fieldbook.lizardi.mx/de/components/striped-shadow-heading Eine fettgedruckte Überschrift mit einer dahinter versetzten Duplikatkopie, gefüllt mit diagonalen Streifen, die wie ein langer Schlagschatten weiterziehen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, shadowColor, speed, fontSize ### Stroke drawing board https://fieldbook.lizardi.mx/de/components/stroke-drawing-board Ein Raster aus umrissenen Formen, die sich Strich für Strich in einer versetzten Welle zeichnen, als würde ein Stift quer über die Tafel arbeiten. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, stagger, duration, strokeWidth, loop ### Styled native dropdown https://fieldbook.lizardi.mx/de/components/styled-native-dropdown Eine native Auswahl mit benutzerdefiniertem Rahmen, Fokusring und Chevron neu gestaltet, während das Betriebssystem weiterhin das Optionsmenü und das Tastaturverhalten bereitstellt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: selected, accentColor, disabled, invalid ### Suffix reveal button https://fieldbook.lizardi.mx/de/components/suffix-reveal-button Eine solide Aktionsschaltfläche, deren Beschriftung beim Schweben eine Lücke öffnet und ein zweites nachgestelltes Wort hineinschiebt, sodass aus einem Verb eine vollständige Phrase wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, suffix, width, glow ### Sun moon morph toggle https://fieldbook.lizardi.mx/de/components/sun-moon-morph-toggle Ein Themenwechsel, bei dem eine ringförmige Sonne ihre Strahlen wegschwenkt und wächst, während eine zweite Scheibe hineingleitet, um einen Halbmond herauszubeißen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: ink, startDark, tileSize, duration, showTile ### Sun Moon Switch https://fieldbook.lizardi.mx/de/components/sun-moon-switch Ein Pillenschalter, dessen Daumen zwischen zwei Ruhepositionen gleitet, während ein Sonnensymbol und ein Mondsymbol, die die Spur flankieren, passend ein- und ausgeblendet werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: on, size, accentColor ### Survey route map https://fieldbook.lizardi.mx/de/components/survey-route-map Eine vollrandige, dunkle Vermessungskarte mit haarfeinen Höhenkonturen, verstreuten Vermessungspunkten und einer Route, die sich zwischen zwei Markierungen nachzeichnet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, density, seed, showRoute, caption, pointerLift ### Swallowing Chip Button https://fieldbook.lizardi.mx/de/components/swallowing-chip-button Ein Pillenknopf mit einem kleinen Lichtchip am rechten Rand, der sich beim Schweben ausdehnt, bis er den gesamten Knopf bedeckt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, duration, expandOnFocus ### Layer swap button https://fieldbook.lizardi.mx/de/components/swap-fill-button Zwei abgerundete Schichten, die an einer Ecke verankert sind, tauschen Größen beim Schweben aus, wobei die ruhende Füllung zu einem Samen zusammenfällt, während der Samen wächst, um den Knopf zu füllen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, restColor, duration, seedSize ### Swap timing modes https://fieldbook.lizardi.mx/de/components/swap-timing-modes Drei Abzeichen tauschen dasselbe Symbolpaar nebeneinander unter drei unterschiedlichen Ausgangsregeln aus, sodass überlappende, aufeinanderfolgende und Out-of-Flow-Entfernungen auf einen Blick verglichen werden können. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: duration, autoPlay, interval, showLabels, accent ### Swarm trail cursor https://fieldbook.lizardi.mx/de/components/swarm-trail-cursor Eine Wolke aus weichen Klecksen umkreist den Zeiger innerhalb eines Panels, hinterlässt sich verjüngende Spuren und verschmelzt dort, wo sie sich überlappen, zu einer Form. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, accent, blobSize, speed, trail, scatterOnPress ### Sweep invert button https://fieldbook.lizardi.mx/de/components/sweep-invert-button Ein Knopf in tiefem Marineblau, dessen helle Füllung vom rechten Rand ausgeht und das Etikett durch kurzes Drücken in den dunklen Ton umwandelt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, base, tracking, durationMs ### Sweep scope https://fieldbook.lizardi.mx/de/components/sweep-scope Ein rundes Zielfernrohr, bei dem Ringe von der Mitte nach außen pulsieren, Speichen es in Sektoren schneiden und ein Lichtkegel um die Mitte streicht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: color, rings, spokes, sweepSpeed, brightness, interactive ### Sweeping band button https://fieldbook.lizardi.mx/de/components/sweeping-band-button Eine gefüllte Schaltfläche, die ein Farbband enthält, das doppelt so breit ist wie es selbst, und das beim Hover von Ende zu Ende verschiebt, sodass die Füllung aussieht, als ob sie sich bewegt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, sweepMs, highlight ### Sweeping progress bar https://fieldbook.lizardi.mx/de/components/sweeping-progress-bar Eine unbestimmte Ladestange in einem pillenförmigen Rahmen, die in einer sanften Endlosschleife vom Nichts zur vollen Breite und wieder zurück ins Nichts wächst. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, widthPx, durationS ### Sweeping shine text https://fieldbook.lizardi.mx/de/components/sweeping-shine-text Mit einem gedämpften Farbverlauf und einem hellen diagonalen Band gefüllter Text, der wie ein Lichtschimmer hin und her schwebt und beim Bewegen an Ort und Stelle einfrieren kann. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, speed, baseColor, shineColor ### Sweeping status text https://fieldbook.lizardi.mx/de/components/sweeping-status-text Ein großes Statuswort, das in einem gleichmäßigen Takt wechselt, während ein heller Streifen endlos über die Buchstabenformen streicht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: interval, fontSize, sweepDuration, accent ### Swelling pill button https://fieldbook.lizardi.mx/de/components/swelling-gradient-pill Eine Farbverlaufspille mit einem Farbton, die beim Schweben größer anschwillt, während sich darunter ein getönter Schatten ausbreitet und beim Drücken kurz komprimiert wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, hoverScale, shadowSpread, paddingX ### Swelling pill add button https://fieldbook.lizardi.mx/de/components/swelling-pill-add-button Eine Pille mit starkem Akzent und einem langsam atmenden Pluszeichen, das bei langer, langsamer Entspannung um etwa ein Zehntel größer wird und beim Halten in einen inneren Schatten sinkt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, growth, easeMs, pulse ### Swipe action row https://fieldbook.lizardi.mx/de/components/swipe-action-row Eine Listenzeile im Nachrichtenstil, hinter der beim seitlichen Ziehen farbige Aktionsschaltflächen sichtbar werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: name, preview, actionCount, dangerColor ### Swipe away card deck https://fieldbook.lizardi.mx/de/components/swipe-away-card-deck Ein aufgefächerter Stapel Fotokarten, den Sie ziehen oder antippen können, um die oberste Karte einzeln nach hinten zu verschieben. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: cards, sensitivity, randomRotation, autoplay ### Swipe fill press pill https://fieldbook.lizardi.mx/de/components/swipe-fill-press-pill Eine blasse Kapsel, deren farbiges Blatt beim Schweben oder Fokussieren vom linken Rand her nach innen gleitet und dabei leicht ansteigt, um dann beim Drücken kräftig zusammengedrückt zu werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, swellScale, pressScale, duration, uppercase ### Swipe photo stack https://fieldbook.lizardi.mx/de/components/swipe-photo-stack Ein Stapel Fotokarten, bei dem die oberste Karte nach links oder rechts geschleudert werden kann, sodass sie nach hinten rutscht, während der Stapel nach vorne geschoben wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: peek, rotation, threshold, accent ### Swipe Reveal Actions https://fieldbook.lizardi.mx/de/components/swipe-reveal-actions Eine Listenzeile, hinter der farbige Aktionssymbole angezeigt werden, wenn sie seitwärts gezogen wird, aufschnappt, zuspringt oder einen vollständigen Wischvorgang automatisch abschließt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: senderName, avatarColor, actionCount ### Swipeable slide deck https://fieldbook.lizardi.mx/de/components/swipeable-slide-deck Ein Folienbetrachter für jeweils ein einzelnes Element mit runden Schaltflächen „Zurück“ und „Weiter“, Unterstützung für Tastaturpfeile und einrastbarem Wisch-Bildlauf. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: slideCount, loop, accentColor, showCounter ### Switch Spring Lab https://fieldbook.lizardi.mx/de/components/switch-spring-lab Ein einfacher Ein-Aus-Schalter, mit dem Sie einstellen können, wie federnd sich die Daumenfeder anfühlt und wie weit sich der Daumen beim Drücken ausdehnt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: pressedWidth, springStiffness, springDamping, accentColor ### Syntax Tab Switcher https://fieldbook.lizardi.mx/de/components/syntax-tab-switcher Eine Reihe beschrifteter Registerkarten über einem durch Syntax hervorgehobenen Codebereich mit einer verschiebbaren Hervorhebung unter der aktiven Registerkarte und einer Schaltfläche zum Kopieren mit einem Klick. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultTab, showCopyButton ### Tag chips field https://fieldbook.lizardi.mx/de/components/tag-chips-field Ein Textfeld, das jeden Eintrag in einen kleinen herausnehmbaren Chip verwandelt, um eine kurze Liste mit Schlüsselwörtern oder Labels zu sammeln. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, accent ### Tall Code Keypad https://fieldbook.lizardi.mx/de/components/tall-code-keypad Ein randloses Verifizierungsformular, das auf ungewöhnlich hohen Codefeldern basiert, mit Ziffern, die mit einem kurzen Sprung landen, und einer gedrückten Rücktaste, die alles löscht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, length, cellHeight, holdToClear, heading ### Tapered Funnel Stages https://fieldbook.lizardi.mx/de/components/tapered-funnel-stages Ein Konvertierungstrichter, bei dem jede Stufe ein glattes, sich verjüngendes Band mit Halo-Schichten ist, die sich ausbreiten, wenn Sie darüber schweben. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, layers, gap, stagger, edges, showBands ### Task Log Loader https://fieldbook.lizardi.mx/de/components/task-log-loader Ein funktionierender Indikator, der einen verschachtelten Ringspinner mit einem kurzen nummerierten Baumstamm verbindet, dessen Linien nach Abschluss jedes Schritts nach oben scrollen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: lineInterval, visibleLines, accent, showLineNumbers ### Team size stepper https://fieldbook.lizardi.mx/de/components/team-size-stepper Ein Stepper zum Auswählen einer Teamgröße, bei der jeder Schritt einen Avatar in einem überlappenden Stapel über der Zählung aufdeckt oder verbirgt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: count, label, avatarCount ### Text field https://fieldbook.lizardi.mx/de/components/text-field-basic Ein einzeiliges Textfeld mit weichem Rand, einem Akzentfokusring, einem stummgeschalteten Platzhalter und einem ordnungsgemäßen Deaktivierungsstatus. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: placeholder, accent, disabled ### Morphing Headline https://fieldbook.lizardi.mx/de/components/text-morph-cycle Eine Überschrift, die eine Phrase in die nächste übergeht und passende Buchstaben an ihre neue Stelle gleiten lässt, während der Rest verschwimmt und verschwindet oder verschwindet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: holdDelay, loop, accentColor, phraseSet ### Text style toggle group https://fieldbook.lizardi.mx/de/components/text-style-toggle-group Ein verbundenes Trio von Stilschaltern für Fett, Kursiv und Unterstrichen, die eine Live-Beispiellinie direkt unter der Gruppe neu gestalten. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: sampleText, accent, cellSize, boldOn, italicOn ### Theme toggle button https://fieldbook.lizardi.mx/de/components/theme-toggle-button Ein beschrifteter Schalter, der zwischen hell und dunkel umschaltet, die Sonne beim Schweben dreht und das Wort daneben bei jedem Schalter überblendet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: showLabel, size, accent, spinOnHover, startDark ### Themed chart frame https://fieldbook.lizardi.mx/de/components/themed-chart-frame Ein wiederverwendbarer gruppierter Balkendiagrammrahmen, der jeder Reihe eine einheitliche Farbe, einen schwebenden Tooltip mit Stil und eine Legende verleiht, die andere Reihen beim Bewegen des Mauszeigers abblendet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: barGap, cornerRadius, primaryColor, secondaryColor, showLegend ### Threaded post card https://fieldbook.lizardi.mx/de/components/threaded-post-card Ein Social-Media-Beitrag, der als gerahmtes Panel mit einem verifizierten Autor, einem mehrzeiligen Textkörper und einer verschachtelten Antwort unter einer Regel dargestellt wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: handle, verified, showReply, accent ### Three layer push button https://fieldbook.lizardi.mx/de/components/three-layer-push-button Eine taktile Taste, die aus drei gestapelten Platten, einem Schlagschatten, einer dunklen Seitenwand und einer schwebenden Oberfläche besteht, die beim Schweben nach oben springt und beim Drücken sofort auf dem Boden landet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, liftHeight, radius, springy ### Three weight button https://fieldbook.lizardi.mx/de/components/three-weight-button Ein leiser Knopf mit drei Gewichten (ausgefüllt, umrandet, leer) mit einem nahezu quadratischen Radius und einem einzigen schnellen Hintergrundschritt beim Schweben, nirgendwo Schatten. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: variant, label, accent, radius, fullWidth ### Threshold level meter https://fieldbook.lizardi.mx/de/components/threshold-level-meter Eine horizontale Füllstandsanzeige, deren Füllstand von Grün über Gelb zu Rot wechselt, wenn der aktuelle Wert zwei Schwellenwerte überschreitet, wie es bei einer Speicher- oder Batterieanzeige der Fall wäre. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, value, warnAt, criticalAt ### Thumb icon switch https://fieldbook.lizardi.mx/de/components/thumb-icon-switch Ein Pillenschalter, dessen verschiebbarer Daumen ein eigenes kleines Symbol trägt, das wechselt, wenn der Daumen jedes Ende der Spur erreicht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: on, pressedWidth, accentColor ### Thumbnail-to-video lightbox https://fieldbook.lizardi.mx/de/components/thumbnail-to-video-lightbox Ein Video-Miniaturbild mit einer Wiedergabeschaltfläche, die einen enthaltenen Leuchtkasten öffnet, wobei das Videofeld aus einer ausgewählten Richtung vor einem unscharfen, abgedunkelten Hintergrund eintrifft. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: animationStyle, accent, thumbnailLabel ### Ticker swap button https://fieldbook.lizardi.mx/de/components/ticker-swap-button Ein Pillenknopf, dessen Beschriftung beim Schweben durch einen endlosen Ticker mit demselben Wort ersetzt wird, der seitwärts über die Vorderseite läuft. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, speed, gap, radius ### Tide fill button https://fieldbook.lizardi.mx/de/components/tide-fill-button Eine Schaltfläche, deren ruhender Akzentbalken beim Schweben ansteigt, um die gesamte Platte zu überfluten, wobei die Balkenstärke, die Anstiegsgeschwindigkeit und die Beschriftungsverzögerung alle als Knöpfe angezeigt werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, barHeight, riseMs, labelDelayMs, accent, hoverScale ### Tile reveal swap https://fieldbook.lizardi.mx/de/components/tile-reveal-swap Zwei Felder tauschen ihre Plätze Kachel für Kachel, wobei sich jede Kachel dreht und skaliert, während sie umgedreht wird, in einer Reihenfolge, die von der Mitte, den Rändern oder einer Spirale aus gesteuert wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tileSize, pattern, duration, spin, trigger, accent ### Tilt card https://fieldbook.lizardi.mx/de/components/tilt-card Eine Inhaltskarte, die sich mit einem beweglichen Blick in 3D in Richtung des Zeigers dreht, beim Einrasten angehoben wird und beim Verlassen des Zeigers wieder auf die gleiche Ebene zurückspringt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: maxTilt, glare, lift ### Tilt-in content frame https://fieldbook.lizardi.mx/de/components/tilt-in-content-frame Ein Informationsfeld, das sich von einer Kante nach innen neigt, sich durch Klicken oder Escape von außen frei schließen lässt und sich sanft vergrößert, wenn ein zweiter Inhaltsabschnitt angezeigt wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: from, accent, showMore, title ### Tilt Parallax Tile https://fieldbook.lizardi.mx/de/components/tilt-parallax-tile Eine Kachel, die sich auf Federn in 3D in Richtung des Zeigers neigt, eine Überlagerungsebene über ihre Oberfläche hebt und eine kleine Beschriftung nachzieht, die sich mit der Cursorgeschwindigkeit neigt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tilt, hoverScale, caption, showCaption, accent ### Tilt pop button https://fieldbook.lizardi.mx/de/components/tilt-pop-button Ein kleiner, fester Knopf, der sich beim Schweben vergrößert und um ein paar Grad zur Seite neigt und dann beim Drücken wieder flach auf die Oberfläche sinkt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, scale, rotation, radius ### Tilt Spotlight Grid https://fieldbook.lizardi.mx/de/components/tilt-spotlight-feature-grid Ein Fähigkeitsraster, bei dem die schwebende Karte zum Zeiger geneigt wird und aufleuchtet, während alle anderen Karten dunkler werden und zurückschrumpfen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: columns, accent, tiltMax, dimOthers, heading ### Tilted deck button https://fieldbook.lizardi.mx/de/components/tilted-deck-button Ein perspektivisch zurückgelegter Knopf wie ein Schlüssel auf einem geneigten Deck, der beim Schweben und Drücken weiter wegkippt und nach unten rutscht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, tilt, shadow ### Tilted perspective button https://fieldbook.lizardi.mx/de/components/tilted-perspective-button Ein runder Call-to-Action, der in einer permanenten 3D-Perspektive angezeigt wird und beim Überqueren der Platte in Richtung des Zeigers wackelt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tilt, lift, track ### Tilted plinth call to action https://fieldbook.lizardi.mx/de/components/tilted-plinth-cta-button Ein klobiger Call-to-Action, der auf einem einfarbigen Sockel ruht, leicht im Raum geneigt ist, der sich beim Schweben von seiner Basis abhebt und unter einer Presse sinkt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, tilt, depth, showArrow ### Tilted Stack CTA https://fieldbook.lizardi.mx/de/components/tilted-stacked-cta Ein klobiger Call-to-Action, der gedreht über einem Stapel hart versetzter Schatten ruht und dann aufrecht unter dem Zeiger steht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tilt, depth, radius ### Tilted tile parallax https://fieldbook.lizardi.mx/de/components/tilted-tile-parallax Reihen beschrifteter Kacheln auf einem geneigten, übergroßen Gitter gleiten beim Überqueren des Zeigers in entgegengesetzte Richtungen, wobei jede Reihe mit ihrer eigenen Verzögerung ankommt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, rows, tilt, travel, inertia, idleSway ### Tilting Backer Tile https://fieldbook.lizardi.mx/de/components/tilting-backer-tile-button Eine quadratische, durchscheinende Fliese mit einer genau dahinter liegenden einfarbigen Platte, die beim Schweben unter der Fläche hervorkippt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, size, tilt, duration ### Tilting cube field https://fieldbook.lizardi.mx/de/components/tilting-cube-field Ein Gitter aus hohlen Würfeln, die sich innerhalb eines Abfallradius zum Zeiger neigen, von alleine wandern, wenn sie in Ruhe gelassen werden, und bei einem Klick in Ringen nach außen blitzen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: gridSize, maxAngle, radius, rippleSpeed, autoDrift, accent ### Tilting Rocket Button https://fieldbook.lizardi.mx/de/components/tilting-rocket-button Ein dunkler Startknopf, dessen geneigtes Raketensymbol aufrecht schwingt und nach vorne gleitet, während die Beschriftung dahinter folgt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, restTilt, duration ### Tilting send button https://fieldbook.lizardi.mx/de/components/tilting-send-button Eine blasse Sendeschaltfläche, deren Glyphe beim Auslösen auf der Tastatur mit der Nase nach oben zeigt und beim Auslösen einen Bogen über die Kante bildet und dann zurückgesetzt wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, tiltAngle, flightDistance, resetDelay ### Timeline marker row https://fieldbook.lizardi.mx/de/components/timeline-marker-row Eine Zeile eines kompakten Aktivitätsprotokolls: ein kleines Symbol gepaart mit gedämpftem Text oder eine zentrierte Beschriftung zwischen zwei Regelzeilen, die eine Pause zwischen Eintragsgruppen markiert. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: variant, label, accent ### Timeline scatter chart https://fieldbook.lizardi.mx/de/components/timeline-scatter-chart Ein Zeitreihen-Streudiagramm, bei dem jeder Messwert ein kleiner Ringmarker ist, der unter Last erscheint und seine Nachbarn verdunkelt, wenn Sie sich in der Nähe eines Zeitpunkts bewegen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: pointRadius, showSecondSeries, hoverDimOpacity, primaryColor, secondaryColor ### Tinted disc swell button https://fieldbook.lizardi.mx/de/components/tinted-disc-swell-button Ein dunkler Monospace-Schlüssel mit einer unteren Vignette; Beim Schweben schwillt in der Mitte eine durchscheinende farbige Scheibe an, die das Gesicht tönt, ohne es zu verbergen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, discOpacity, swellSeconds, pressScale ### Tinted ring radar https://fieldbook.lizardi.mx/de/components/tinted-ring-radar Eine Polarkarte auf einer sanft getönten kreisförmigen Skala: Jeder Gitterring weist einen schwachen Akzent auf, sodass der Hintergrund zur Mitte hin sanft dunkler wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, gridTint, fillOpacity, rings, showSpokes ### Tinted shadow buttons https://fieldbook.lizardi.mx/de/components/tinted-shadow-buttons Eine Reihe fester Tasten, die jeweils einen weichen Schatten in ihrem eigenen Farbton werfen, sodass die Farbe jeder Aktion auf die darunter liegende Oberfläche übertragen wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, count, hueSpread, shadowStrength, radius ### Tinted web radar https://fieldbook.lizardi.mx/de/components/tinted-web-radar Ein Polardiagramm, dessen Polygonnetz gefüllt und nicht gezeichnet ist, wodurch ein facettierter, getönter Grund entsteht, in dem sich die Reihenform befindet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, gridTint, fillOpacity, rings, strokeWidth ### Toast stack https://fieldbook.lizardi.mx/de/components/toast-stack Ein Benachrichtigungsstapel in der Ecke, in dem ältere Toasts sich hinter den neuesten stecken und darauf zeigen, sie in einer Liste auffächern und jeder einen Haaransatz abträgt, bevor er verschwindet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: position, maxVisible, duration ### Todo strike checkbox https://fieldbook.lizardi.mx/de/components/todo-strike-checkbox Ein Aufgaben-Kontrollkästchen, das sein Häkchen setzt und gleichzeitig eine Linie durch die Aufgabenbeschriftung zieht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: taskCount, strikeDuration, accentColor ### Toggle Reveal Panel https://fieldbook.lizardi.mx/de/components/toggle-reveal-panel Ein einzelner Inhaltsblock, der auf- oder zugeklappt wird, wenn die Umschalttaste gedrückt wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: defaultOpen, accentColor, transitionMs, width ### Tonal tint action button https://fieldbook.lizardi.mx/de/components/tonal-tint-action-button Eine ruhige Schaltfläche, die einen blassen Farbton ihres Akzents als Füllung und einen tiefen Farbton desselben Farbtons für die Beschriftung und das Symbol verwendet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, radius, size, showIcon, tintStrength ### Tone Pill Label https://fieldbook.lizardi.mx/de/components/tone-pill-label Ein kompakter Statuschip zum Markieren von Elementen, verfügbar als Volltonfüllung, sanfter Farbton oder Umriss, jeweils gefärbt durch einen Statuston. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, tone, variant, withDot ### Tone Rule Alert https://fieldbook.lizardi.mx/de/components/tone-rule-alert Ein Inline-Benachrichtigungsbanner mit einem Symbol und einem farbigen Akzent, der zwischen Neutral-, Info-, Erfolgs-, Warn- und Fehlertönen wechselt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: tone, title, description, dismissible ### Toolbar icon tooltip https://fieldbook.lizardi.mx/de/components/toolbar-icon-tooltip Eine Reihe von Symbolleistenschaltflächen, die nur aus Symbolen bestehen und eine kleine pfeilförmige Beschriftung in der Nähe der Schaltfläche anzeigen, auf der sich der Mauszeiger befindet oder die den Fokus hat. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: side, align, sideOffset, accent ### Tooltip tint icon row https://fieldbook.lizardi.mx/de/components/tooltip-tint-icon-row Eine Reihe kreisförmiger Symbolschaltflächen, bei denen beim Schweben eine beschriftete Blase darüber angehoben wird und beide in der jeweiligen Farbe des Elements überflutet werden. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: size, gap, accent, perItemTint, lift, bounce ### Toss to bin delete https://fieldbook.lizardi.mx/de/components/toss-to-bin-delete-button Ein gezogener Abfallbehälter, dessen Deckel sich beim Drücken öffnet, während ein zerknittertes Blatt nach oben ragt und hineinfällt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: ink, accent, lidAngle, tossDuration ### Tracing edge button https://fieldbook.lizardi.mx/de/components/tracing-edge-button Eine durchgezogene Schaltfläche, bei der vier Haarlinien an gegenüberliegenden Ecken beginnen und beim Schweben den gesamten Umfang zeichnen und sich genau dann treffen, wenn der Umriss endet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, traceMs, cornerRadius ### Tracking crosshair overlay https://fieldbook.lizardi.mx/de/components/tracking-crosshair-overlay Haarlinien in voller Breite und Höhe, die dem Zeiger mit einer kleinen Verzögerung folgen und in ein statisches Rauschen übergehen, wenn sie ein Ziel überqueren. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: smoothing, thickness, showCoords, wobble, color ### Trail breadcrumbs https://fieldbook.lizardi.mx/de/components/trail-breadcrumbs Ein horizontaler Breadcrumb-Pfad mit Trennzeichen zwischen den einzelnen Schritten, stummgeschalteten Vorfahren-Links, einer fetten aktuellen Seite und einem Auslassungszeichen, das lange Pfade ausblendet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: separator, maxVisible, accentColor ### Trailing arrows text button https://fieldbook.lizardi.mx/de/components/trailing-arrows-text-button Ein randloser Textlink, dessen Buchstabenabstand sich beim Schweben vergrößert, während sich nach rechts eine Pfeilspur ausbreitet, einer weiter und schwächer als der andere. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, arrowCount, spread, stagger ### Trailing cursor https://fieldbook.lizardi.mx/de/components/trailing-cursor-arrow Ein gezeichneter Cursor, der dem echten Zeiger auf einer Feder folgt und dabei ein sanftes Leuchten und verblassende Nachbilder hinterlässt, während er sich in die Richtung dreht, in die er sich bewegt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: stiffness, damping, size, accent, rotate ### Trailing echo text https://fieldbook.lizardi.mx/de/components/trailing-echo-text Eine Schlagzeile mit einem Stapel verschwommener, durchscheinender Kopien, die hinter ihrer zeigergesteuerten Neigung zurückbleiben, sich zu einer Echospur ausdehnen und im Leerlauf wieder in die vordere Zeile übergehen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, echoes, offset, tint ### Transfer status card https://fieldbook.lizardi.mx/de/components/transfer-status-card Eine Geldtransferkarte, die von einem Verarbeitungsstatus in einen abgeschlossenen Status übergeht, wobei sich ein sich drehendes Symbol in ein Häkchen verwandelt und die beiden Kontozeilen miteinander verschmelzen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: amount, exchangeRate, accent, autoplay ### Translucent wash button https://fieldbook.lizardi.mx/de/components/translucent-wash-button Eine tiefe Kapsel, die von der Mitte nach außen von einer durchscheinenden weißen Scheibe beleuchtet wird, die beim Schweben oder Fokussieren über ihre Ränder hinausragt, das Gesicht heller tönt, anstatt es zu verdecken, und das Licht dann wieder nach innen leitet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, washOpacity, washScale, duration, radius ### Traveling border pill https://fieldbook.lizardi.mx/de/components/traveling-border-pill Ein kleiner Pillenknopf, dessen haarfeiner Rand ein helles Akzentsegment endlos um den Umriss trägt, während der Etikettentext den gleichen reisenden Glanz erhält. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, lapMs, segment, showDivider ### Traveling edge glow card https://fieldbook.lizardi.mx/de/components/traveling-edge-glow-card Eine dunkle Karte, umgeben von einem zweifarbigen Farbverlaufsrand, der endlos gleitet, verdoppelt durch ein verschwommenes Echo, das die Oberfläche dahinter erhellt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: borderSize, radius, speed, colorStart, colorEnd ### Traveling glow rim button https://fieldbook.lizardi.mx/de/components/traveling-glow-rim-button Ein dunkler Plattenknopf, der flach bleibt, bis man darauf zeigt, woraufhin ein helles Band aus Akzentlicht scheinbar endlos um seinen Rand wandert. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, blur, speed, alwaysOn ### Traveling Toolbar Tooltip https://fieldbook.lizardi.mx/de/components/traveling-toolbar-tooltip Ein einzelner schwebender Tooltip, der sanft von einem Symbol in der Symbolleiste zum nächsten gleitet, wenn der Mauszeiger oder der Fokus zwischen ihnen bewegt wird, anstatt jedes Mal zu verschwinden und wieder aufzutauchen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: openDelay, closeDelay, accentColor ### Traveling underglow pill https://fieldbook.lizardi.mx/de/components/traveling-underglow-pill Eine Kapsel, deren zweifarbiges Farbband sich beim Schweben seitwärts bewegt, während eine verschwommene Kopie dahinter die Oberfläche darunter beleuchtet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, secondary, cycleSeconds, glowBlur, width ### Travelling knob follow button https://fieldbook.lizardi.mx/de/components/travelling-knob-follow-button Eine umrissene Pille, deren runder Knopf beim Schweben zum anderen Ende rollt, eine Akzentspur dahinter malt und eine Follower-Zählung ins Blickfeld schiebt; Durch Klicken bleibt der verfolgte Status erhalten und die Anzahl erhöht sich. Frameworks: react Access: open Public prop names: label, count, accent, travelMs, followed ### Tri-state checkbox https://fieldbook.lizardi.mx/de/components/tri-state-checkbox Ein Kontrollkästchen mit den Zuständen „nicht aktiviert“, „aktiviert“ und „unbestimmt“, das die Akzentfarbe voll ausfüllt und ein Häkchen durch einen Bindestrich ersetzt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: state, accentColor, size, disabled ### True hover swatch https://fieldbook.lizardi.mx/de/components/true-hover-swatch Ein Farbfeld, das nur bei einem echten Zeiger-Hover wächst und den gefälschten Hover, der durch Antippen ausgelöst wird, ignoriert, sodass es nie vergrößert bleibt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: hoverScale, duration, accent, radius, showState ### Tube screen plasma https://fieldbook.lizardi.mx/de/components/tube-screen-plasma Ein gewölbter Glasbildschirm, der langsame Plasmakleckse zeigt, komplett mit Scanlinien, klobigen Pixeln, einem Farbsaum und einem sanften Leuchten der Leuchtstoffe. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, curvature, scanlineStrength, pixelSize, channelShift, speed ### Tunnel Warp Panel https://fieldbook.lizardi.mx/de/components/tunnel-warp-panel Der Inhalt befindet sich an der Mündung eines vierwandigen Gittertunnels, während schmale Strahlen an jeder Wand entlang zum Betrachter rasen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: perspective, beamsPerSide, beamSize, beamDuration, accentColor, gridOpacity ### Turbulence Decay Card https://fieldbook.lizardi.mx/de/components/turbulence-decay-card Ein Grafikfeld, das zu Rauschen wird, wenn sich der Zeiger schnell bewegt, und sich neu formiert, wenn er langsamer wird, wobei es beim Bewegen in Richtung des Cursors driftet und sich neigt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: grain, octaves, maxSmear, driftBound, accent ### Twin Bubble Rise https://fieldbook.lizardi.mx/de/components/twin-bubble-rise-button Beim Schweben oder Fokussieren erheben sich zwei übergroße Ellipsen unter einer dünn umrandeten Schaltfläche, eine schwache Ellipse voran und die Akzent-Ellipse dahinter, so dass die Füllung als rollende Kurve erscheint. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, riseSeconds, bubbleScale, radius ### Twin ring chart https://fieldbook.lizardi.mx/de/components/twin-ring-chart Zwei konzentrische Ringe, eine innere Scheibe und ein getrenntes äußeres Band, die auf einen Blick dieselben fünf Kategorien über zwei Zeiträume hinweg vergleichen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, hueRange, innerRadius, ringGap, outerBand ### Twin Sweep Tile https://fieldbook.lizardi.mx/de/components/twin-sweep-tile-button Eine Kachel mit quadratischem Umriss, die sich beim Anheben neigt, zwei schräge Lichtbänder in entgegengesetzte Richtungen über sich zieht und ihre Glyphe gegen eine Beschriftung eintauscht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, label, caption, tilt, sweep ### Twinkle highlight text https://fieldbook.lizardi.mx/de/components/twinkle-highlight-text Fett hervorgehobener Text mit kleinen vierzackigen Glitzersternen, die kontinuierlich an zufälligen Positionen um und über den Buchstaben herum auf- und abspringen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, sparkleCount, colorOne, colorTwo ### Two bar close tile https://fieldbook.lizardi.mx/de/components/two-bar-close-tile Eine zweizeilige Menükachel, die in zwei Takten endet: Die Balken gleiten auf einer Linie zusammen und werden dann zu einem Kreuz auseinandergezogen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: ink, accent, tileSize, gap, beat ### Two face flip button https://fieldbook.lizardi.mx/de/components/two-face-flip-button Ein Knopf mit zwei gestapelten Flächen, die beim Schweben in 3D aneinander vorbei rotieren, wobei die Vorderseite in Richtung einer ausgewählten Kante kippt, während die Rückseite nach innen schwenkt, um ihren Platz einzunehmen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: frontLabel, backLabel, from, accent, tapScale ### Two-Mode Resize Tabs https://fieldbook.lizardi.mx/de/components/two-mode-resize-tabs Eine Tab-Leiste mit einer Morphing-Pill-Hervorhebung, deren Inhaltsrahmen entweder vergrößert werden kann, um sich der natürlichen Höhe jedes Panels anzupassen, oder die Größe als ein animiertes Feld ändern kann, ausgewählt durch einen Modusschalter. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: resizeMode, tabOneLabel, tabTwoLabel, accent ### Two-Month Range Picker https://fieldbook.lizardi.mx/de/components/two-month-range-picker Eine Datumsbereichsauswahl, die zwei aufeinanderfolgende Monate gleichzeitig anzeigt, sodass ein Bereich, der sich über eine Monatsgrenze erstreckt, während der Auswahl vollständig sichtbar bleibt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, startMonth, startYear, gap ### Two series area legend https://fieldbook.lizardi.mx/de/components/two-series-area-legend Ein gestapeltes Flächendiagramm mit zwei Reihen und einer Legende unter dem Diagramm, die die Gesamtsumme jeder Reihe anzeigt und jeweils eine Reihe isolieren kann. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, secondColor, fillOpacity, showTotals, animate ### Two Tone Frame Pill https://fieldbook.lizardi.mx/de/components/two-tone-frame-pill Eine blasse Kapsel befindet sich in einem dicken, abgerundeten Rahmen, der in zwei flache Farbbänder geteilt ist, und ein einfarbiges Glyph schwillt beim Schweben an. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, topBand, bottomBand, frameWidth, splitPoint ### Typed confirm dialog https://fieldbook.lizardi.mx/de/components/typed-confirm-dialog Ein Dialog mit zerstörerischen Aktionen, dessen Bestätigungsschaltfläche nur dann entsperrt wird, wenn jemand einen genau passenden Ausdruck eingibt, um versehentliches Klicken zu verhindern. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: confirmPhrase, accentColor, dangerLabel ### Typewriter caption https://fieldbook.lizardi.mx/de/components/typewriter-caption Eine Beschriftung wird zeichenweise in einem gleichmäßigen Tempo eingegeben, mit einem durchgehenden Blockcursor, der weiter blinkt, nachdem die Zeile fertig ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, typeSpeedMs, cursorColor ### Typewriter code block https://fieldbook.lizardi.mx/de/components/typewriter-code-block Ein syntaxfarbenes Codefeld, das zeichenweise einen kurzen Ausschnitt anzeigt, als würde er live eingegeben. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: speed, startDelay, loop, accent ### Typewriter code panel https://fieldbook.lizardi.mx/de/components/typewriter-code-panel Ein Code-Editor-Panel, das ein Snippet Zeichen für Zeichen hinter einem blinkenden Caret eingibt, mit einem Dateinamen-Header und einer Schaltfläche zum Kopieren. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: typingSpeed, startDelay, showCursor, accentColor ### Typewriter reveal button https://fieldbook.lizardi.mx/de/components/typewriter-reveal-button Eine solide Monospace-Schaltfläche, die zu einem Umriss verläuft und ihre eigene Beschriftung von der Breite Null hinter einem blinkenden Caret neu eingibt, wann immer sie mit der Maus darüber bewegt oder fokussiert wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, typeMs, glow, caret ### Typewriter sentence cycle https://fieldbook.lizardi.mx/de/components/typewriter-sentence-cycle Eine Schreibmaschine mit blinkendem Cursor tippt einen Satz nach dem anderen ein, hält inne, löscht ihn und fährt in einem endlosen Zyklus mit dem nächsten fort. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: sentenceOne, typingSpeed, pauseDuration, loop, cursorColor ### Typing cursor text https://fieldbook.lizardi.mx/de/components/typing-cursor-text Ein Satz tippt ein Zeichen nach dem anderen hinter einem blinkenden Cursor ein, hält an, löscht dann rückwärts und gibt die nächste Zeile in einer Endlosschleife ein. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: duration, holdDelay, loop, showCursor ### Underglow border button https://fieldbook.lizardi.mx/de/components/underglow-border-button Eine Schaltfläche, deren Zwei-Pixel-Rand ein getöntes Band ist, das sich seitwärts in einer Endlosschleife bewegt, mit einem passenden verschwommenen Schimmer darunter, der sich im Gleichschritt mitbewegt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, variant, speed, glow ### Underglow glitch button https://fieldbook.lizardi.mx/de/components/underglow-glitch-button Eine dunkle eingelassene Platte mit einem leuchtenden Wort, das eine verborgene Glyphe sichtbar macht und einen Lichtbalken unter der Unterkante hervorhebt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, glow, glitch, radius ### Underline flood button https://fieldbook.lizardi.mx/de/components/underline-flood-button Eine Schaltfläche mit einem Haarlinien-Akzentband an der Unterkante, das sich beim Schweben oder Fokussieren verbreitert und dann zu einer vollen Flut ansteigt, wobei die Beschriftung die Farbe erst ändert, wenn die Füllung gelandet ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, intent, size, accent, fillMs ### Underline hint tooltip https://fieldbook.lizardi.mx/de/components/underline-hint-tooltip Ein gepunktetes und unterstrichenes Wort, das bei Hover- oder Tastaturfokus eine kurze Hinweisblase darüber oder darunter anzeigt, die vollständig von CSS gesteuert wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, tip, position, accent ### Underline sweep link https://fieldbook.lizardi.mx/de/components/underline-sweep-link Eine bloße Textschaltfläche, deren Regel beim Schweben von links nach oben wächst und beim Beenden nach rechts zurückweicht, mit einem langen Pfeil, der sich nach vorne erstreckt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, travel, ruleWidth ### Underline tabs https://fieldbook.lizardi.mx/de/components/underline-tabs Eine Reihe von Abschnittsregisterkarten mit einem farbigen Balken, der unter der aktiven Beschriftung verschoben und in der Größe geändert wird, anstelle eines gefüllten Hintergrunds. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, defaultTab, underlineThickness ### Underline Wipe Link https://fieldbook.lizardi.mx/de/components/underline-wipe-link-button Ein Textlink in Großbuchstaben, dessen Regel beim Schweben von links nach innen wischt und beim Verlassen nach rechts zurückfährt, mit einem langen Pfeil, der nach Hause gleitet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, tracking, duration, showArrow ### Unfurling chevron ring button https://fieldbook.lizardi.mx/de/components/unfurling-chevron-ring-button Ein Knopf mit getöntem Umriss, der einen durchsichtigen Ring wachsen lässt, seine Beschriftung vergrößert und beim Schweben ein Chevron ausrollt, wobei der Ring beim Drücken fest einrastet. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, ringWidth, tintOpacity, showChevron ### Unrolling message pill https://fieldbook.lizardi.mx/de/components/unrolling-message-pill Eine gefüllte Pille, deren kurze Aufforderung durch eine längere Nachricht ersetzt wird, die sich am linken Rand entfaltet, während die Füllung dahinter abfließt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, idleLabel, revealLabel, revealMs, radius ### Upload Progress Line https://fieldbook.lizardi.mx/de/components/upload-progress-line Ein schlanker, animierter Fortschrittsbalken, der eine Aufgabe wie das Hochladen einer Datei von Null bis zum Abschluss zählt, mit einer Prozentanzeige und einer Beruhigungsanimation am Ende. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, value, autoPlay, color ### Uppercase action button https://fieldbook.lizardi.mx/de/components/uppercase-action-button Eine kompakte gefüllte Aktionsschaltfläche mit einer verfolgten Großbuchstabenbeschriftung, eckigen Ecken und leisen, nur gefüllten Hover- und Gedrückt-Zuständen für Symbolleisten und Panel-Header. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, tracking, uppercase, disabled ### Usage pricing https://fieldbook.lizardi.mx/de/components/usage-pricing Ein Preisabschnitt, in dem ein Volumenschieberegler eine zählende monatliche Rechnung steuert, mit der enthaltenen Vergütung, der Überschreitungsrate und einem Call-to-Action. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: currency, basePrice, accent ### Validated Signup Form https://fieldbook.lizardi.mx/de/components/validated-signup-form Eine kleine Formularlaufzeit, die Werte verfolgt, beim Verwischen und Senden validiert, Fehler mit ihren Eingaben verknüpft und den Status „Senden“ und „Senden“ anzeigt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, validateOn, showCounter, submitDelay, submitLabel ### Value labeled line https://fieldbook.lizardi.mx/de/components/value-labeled-line Ein monatliches Liniendiagramm, das jeden Wert über seinem eigenen Punkt ausdruckt, sodass die Zahlen abgelesen werden können, ohne dass etwas darüber schweben muss. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, showValues, labelOffset, strokeWidth, showGrid ### Value tagged bar chart https://fieldbook.lizardi.mx/de/components/value-tagged-bar-chart Ein vertikales Balkendiagramm, bei dem jeder Balken direkt über seiner Spitze eine eigene Zahl trägt, sodass das Diagramm korrekt angezeigt wird, ohne dass eine Achse überprüft werden muss. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, barRadius, barGap, showGrid, animate ### Vector Flow Field https://fieldbook.lizardi.mx/de/components/vector-flow-field Ein vollflächiger Leinwandhintergrund, auf dem Tausende winziger leuchtender Punkte entlang einer sich langsam entwickelnden Strömung treiben und sanfte, verblassende Spuren hinterlassen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: density, speed, accentColor, trailFade ### Velocity comet trail https://fieldbook.lizardi.mx/de/components/velocity-comet-trail Eine Kette von Punkten, von denen jeder mit Trägheit den vor ihm liegenden Punkt verfolgt, sich bei schnellen Bewegungen zu einem Kometen ausdehnt und sich im Ruhezustand wieder zu einem Cluster zusammenrollt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: dotCount, accent, inertia, stretch, headSize ### Velocity marquee https://fieldbook.lizardi.mx/de/components/velocity-marquee Zwei Zeilen mit sich wiederholendem Text, die in entgegengesetzte Richtungen driften und sich beim Scrollen der Seite beschleunigen oder umkehren, um dann wieder in ihr ursprüngliches Tempo zurückzukehren. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, baseSpeed, reactive, fadeEdges, accent ### Velocity marquee text https://fieldbook.lizardi.mx/de/components/velocity-marquee-text Zeilen mit sich wiederholendem Text in Großbuchstaben bewegen sich in gleichmäßigem Tempo seitwärts, und das Scrollen der Seite beschleunigt sie oder kehrt eine Zeile kurz zurück, bevor alles wieder auf die Grundgeschwindigkeit zurückkehrt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, baseSpeed, rows ### Velocity wave carousel https://fieldbook.lizardi.mx/de/components/velocity-wave-carousel Eine breite Reihe von Bildkacheln, die beim Scrollen der Seite seitwärts driftet und sich in eine vertikale Welle verwandelt, die steiler wird, je schneller der Besucher scrollt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: waveIntensity, tileCount, accentColor ### Verification Code Card https://fieldbook.lizardi.mx/de/components/verification-code-card Ein umrahmter Verifizierungsschritt mit einem beschrifteten Codefeld, einer Verifizierungsschaltfläche, die erst entsperrt wird, wenn der Code vollständig ist, und einem Link zum erneuten Senden bei einem Countdown. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: length, accentColor, resendSeconds, autoSubmit, title ### Vertex Dot Radar https://fieldbook.lizardi.mx/de/components/vertex-dot-radar-chart Ein Polardiagramm mit einer einzelnen Serie, das an jeder Achsenecke einen durchgezogenen Punkt anheftet, sodass jeder Messwert als Punkt und nicht nur als Silhouette angezeigt wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, dotRadius, fillOpacity, rings, showLabels ### Vertical brightness slider https://fieldbook.lizardi.mx/de/components/vertical-brightness-slider Ein hoher Pillenschieber, der sich beim Ziehen von unten mit Licht füllt, über beide Enden hinweg Widerstand leistet und beim Loslassen zurückspringt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: value, accentColor, icon ### Vertical choice dial https://fieldbook.lizardi.mx/de/components/vertical-choice-dial Eine hohe Beschriftungsspalte, die sich unter dem Widerstand mit Schwung dreht und die der Mitte am nächsten liegende Option als aktive Auswahl einrastet. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: activeColor, textColor, spacing, loop ### Vertical rail tabs https://fieldbook.lizardi.mx/de/components/vertical-rail-tabs Am linken Rand verläuft eine vertikale Spalte mit Abschnittsregisterkarten, deren Inhalte rechts angezeigt werden. Dort gleitet ein Markierungsblock entlang der Schiene nach oben und unten, um den aktiven Abschnitt zu verfolgen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accentColor, railWidth, defaultSection ### Vertical word swap https://fieldbook.lizardi.mx/de/components/vertical-word-swap Ein Satz mit einem Wort in einem Fenster fester Größe, das auf einem Timer nach oben und unten gleitet, während das nächste Wort in der Liste an seine Stelle tritt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: prefix, words, intervalSeconds, accent ### Video Fill Text https://fieldbook.lizardi.mx/de/components/video-fill-text Große Buchstaben fungieren als Fenster: Ihr Inneres zeigt eine kontinuierlich bewegte filmartige Bewegung anstelle einer flachen Farbe, die genau auf die Buchstabenformen zugeschnitten ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, fontSize, speedSeconds ### Video fill text mask https://fieldbook.lizardi.mx/de/components/video-fill-text-mask Riesige Buchstaben fungieren als Fenster zu einem generierten Schleifenhintergrund, sodass bewegte Farben nur innerhalb der Wortform sichtbar sind. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: text, motif, fontWeight ### View mode toggle switch https://fieldbook.lizardi.mx/de/components/view-mode-toggle-switch Ein Schalter mit zwei Zuständen, der eine Ansicht zwischen zwei benannten Modi umschaltet, mit einem verschiebbaren Daumen, der bei Druck kleiner wird und ein kleines Symbol darin austauscht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: checked, onLabel, offLabel, accent ### Visitor Map Card https://fieldbook.lizardi.mx/de/components/visitor-map-stat-card Eine breite Verkehrskarte, die auf einer grobkacheligen Weltkarte aufgebaut ist, wobei jede Region durch ihren Anteil eingefärbt wird und beim Bewegen des Mauszeigers die Überschrift auf diese Region verlagert wird. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, cellSize, total, trend, title ### Voice Capture Button https://fieldbook.lizardi.mx/de/components/voice-capture-button Eine Drucktaste zur Aufnahmesteuerung mit laufendem Timer und einem Balkenmesser, der beim Hören zum Leben erwacht und in dem Moment, in dem er stoppt, abflacht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: barCount, accent, autoDemo, idleCaption, activeCaption ### Warm band action button https://fieldbook.lizardi.mx/de/components/warm-band-action-button Ein großer runder Call-to-Action mit einem warmen Farbband, das beim Schweben unter das Etikett gleitet, mit einem Bolzen-Glyphen davor. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, showIcon, radius, scale ### Warp lane streaks https://fieldbook.lizardi.mx/de/components/warp-lane-streaks Eine nächtliche Straße, vom Fahrersitz aus gesehen, wo zwei Ströme von Lichtstreifen auf einen Fluchtpunkt zu- und wieder wegströmen und das Gedrückthalten des Zeigers alles beschleunigt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: approachColor, recedeColor, speed, streakCount, curve, boostOnHold ### Warped line flow https://fieldbook.lizardi.mx/de/components/warped-line-flow Ein mit diagonalen Haarlinien gefüllter Rahmen wird von einem sich bewegenden Warp-Feld verschoben, sodass sich die Linien zu hellen Graten bündeln und in schwarze Täler aufweiten. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: colorA, colorB, lineCount, speed, warp, rotation ### Warped tile tunnel https://fieldbook.lizardi.mx/de/components/warped-tile-tunnel Ein dunkler Hintergrund, gefliest mit leuchtenden Quadraten, die sich durch eine Linse wölben, mit hellen Ringen, die sich von der Mitte für immer nach außen drängen. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, density, speed, waveDepth, zoom, grain ### Wash swap pill https://fieldbook.lizardi.mx/de/components/wash-swap-pill Eine große schwarze Pille, deren Füllung sich beim Schweben auflöst und eine sanft getönte Waschung darunter zum Vorschein bringt, während das Etikett von hell nach dunkel wechselt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, height, duration, angle ### Wavy letter heading https://fieldbook.lizardi.mx/de/components/wavy-letter-heading Eine Überschrift, deren Buchstaben auf einer langsamen Welle schweben, wobei jeder einzelne dem letzten hinterherhinkt, sodass sich die Zeile wie eine Fahne bewegt, ohne ihre Grundlinie zu verlieren. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: text, waveWord, amplitude, cycleSeconds, letterDelay, accent ### Wedge Pop Pie https://fieldbook.lizardi.mx/de/components/wedge-pop-pie Ein Kuchen oder Donut, dessen Stücke sich abwechselnd öffnen und unter dem Zeiger nach außen schieben, wobei die Mitte zum schwebenden Stück wechselt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, slices, innerRadius, padAngle, cornerRadius, hoverOffset ### Weekday-Only Range Picker https://fieldbook.lizardi.mx/de/components/weekday-only-range-picker Ein zweimonatiger Bereichswähler, der jeden Samstag und Sonntag streicht, sodass ein ausgewählter Bereich nur an Wochentagen beginnen, enden und laufen kann. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, startMonth, startYear ### Wheel hint scroll button https://fieldbook.lizardi.mx/de/components/wheel-hint-scroll-button Ein kleiner Mausumriss mit einem beweglichen Radbalken, der beim Klicken den nächsten Bildschirminhalt ins Blickfeld scrollt und ausgeblendet wird, wenn nichts mehr zum Scrollen übrig ist. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: accent, label, showLabel, height, cycle ### Winged crest button https://fieldbook.lizardi.mx/de/components/winged-crest-button Ein Knopf, der an einer breiten, geflügelten Wappensilhouette befestigt ist, die sich beim Schweben von der Mitte nach außen ausfüllt, während sich das Etikett umdreht und darunter ein breites Leuchten erblüht. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, width, fillMs, bloom ### Wipe fill button https://fieldbook.lizardi.mx/de/components/wipe-fill-button Ein Pillenknopf, dessen münzgroße Scheibe beim Schweben wächst und die gesamte Form bedeckt, wobei die Akzentfüllung unter einem Etikett weggewischt wird, das sich nie bewegt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: label, accent, wipeMs, direction, borderWidth ### Left Wipe Button https://fieldbook.lizardi.mx/de/components/wipe-fill-button-2 Ein solider Knopf auf einer harten Kante, dessen hellerer Farbton beim Schweben langsam und bewusst vom linken Rand her nach innen streicht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, wipeMs, ledge ### Left wipe button https://fieldbook.lizardi.mx/de/components/wipe-fill-button-3 Ein Knopf, der auf einer harten Kante steht und deren hellerer Farbton beim Schweben vom linken Rand her eindringt, wie eine Füllanzeige. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, wipeMs, ledge ### Wiping multi series line https://fieldbook.lizardi.mx/de/components/wiping-multi-series-line Ein Liniendiagramm mit mehreren Serien, das beim ersten Anstrich einblendet, bei sich ändernden Daten zu einem neuen Bereich gleitet und über jede Serie hinweg eine einrastende Fadenkreuzanzeige anzeigt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accent, secondary, points, curved, showFill, showCrosshair ### Wire Curtain https://fieldbook.lizardi.mx/de/components/wire-curtain-drift Ein Vorhang aus eng beieinander liegenden vertikalen Drähten, der sich in einem langsamen Luftzug wie Stoff faltet und entlang des Zeigerpfads aufreißt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: accentColor, spacing, amplitude, speed, pointerForce ### Word morph blend https://fieldbook.lizardi.mx/de/components/word-morph-blend Ein großes Wort löst sich durch eine starke Unschärfe auf und verfestigt sich wieder zum nächsten Wort in einer kurzen, rotierenden Liste, wobei die beiden nie sauber überblenden, sondern sichtbar ineinander verschmelzen. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: words, holdSeconds, morphSeconds, accent ### Word Crossfade Blend https://fieldbook.lizardi.mx/de/components/word-morph-blend-2 Ein Wort löst sich sanft auf und geht in das nächste über, wobei eine kurze Liste durchlaufen wird und dabei eher eine sanfte Überblendung mit Unschärfe und Überblendung als ein harter Schnitt verwendet wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: words, morphSeconds, holdSeconds ### Word swap loop https://fieldbook.lizardi.mx/de/components/word-swap-loop Ein Satz mit einem Wortschlitz, der auf einem Timer durch eine Liste läuft, wobei jedes Wort nach oben und außen gleitet, während das nächste an seine Stelle tritt. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: words, interval, travel, accent, paused ### Word Swap Rotator https://fieldbook.lizardi.mx/de/components/word-swap-rotator In einer kurzen Liste wird alle paar Sekunden ein Wort in einer Zeile gegen das nächste ausgetauscht, wobei das alte Wort nach oben und außen verschoben wird, während das neue nach oben und nach innen verschoben wird. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: words, intervalSeconds, accent ### Word tumble button https://fieldbook.lizardi.mx/de/components/word-tumble-button Wenn Sie den Mauszeiger darüber bewegen, wird die Großbuchstabenbeschriftung in einem abgeschnittenen Schlitz über sich selbst gerollt, während eine diagonale Akzentfüllung das Feld dahinter überstreicht und eine Differenzmischung die Wortfarbe umdreht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: label, accent, rollDuration, travel, fillDuration ### Woven silk drape https://fieldbook.lizardi.mx/de/components/woven-silk-drape Ein Satinlaken mit sanften diagonalen Falten, die langsam darüber gleiten, mit einer feinen Maserung versehen, sodass es nie wie Plastik aussieht. Frameworks: react, vue, svelte, astro, html Access: member Public prop names: color, speed, scale, grain, rotation ### Zoned cursor tag https://fieldbook.lizardi.mx/de/components/zoned-cursor-tag Ein benutzerdefinierter Zeiger, dessen nachgestelltes Tag sich selbst neu schreibt und auf die andere Seite dreht, wenn er zwischen den Zonen eines geteilten Panels wechselt. Frameworks: react, vue, svelte, astro, html Access: open Public prop names: zoneOne, zoneTwo, zoneThree, accent, trailDistance, stiffness