Kodza changelog

version

0.1.7 → 0.1.8

version

0.1.6 → 0.1.7

https://kodza.dev/llms.txt

− - Components take the page's font. The Kodza look is Geist and Geist Mono, from Google Fonts: https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap− - [Textarea](https://kodza.dev/components/textarea.md): A textarea whose label folds up, whose height eases to fit the text, and whose ring fills as you near the limit, with the characters left in the last fifth.− - [Code Block](https://kodza.dev/components/code-block.md): Code to read and copy: file name, line numbers, highlighted lines and a monochrome syntax in weight and light. Copy rolls to Copied; a terminal copies its commands only.− - [Marquee](https://kodza.dev/components/scrolling-text-loop.md): An endless ticker that never jumps, eases to a stop under the pointer and fades at both edges. Runs either way.+ - Images: the house images at https://kodza.dev/media/ are free to use with the components. Copy them into the project rather than linking kodza.dev, whose addresses can change.+ - Components take the page's font. A site with its own type sets it once, on `:root`, for every component: `--kz-font-display` (headings, big numbers, wordmarks) with `--kz-font-display-weight`, `--kz-font-display-scale` (a multiplier on their sizes), `--kz-font-display-tracking` and `--kz-font-display-case`, `--kz-font-label` (small labels: meta, captions, counters, hints, footer links, button labels) with `--kz-font-label-size`, `--kz-font-label-weight`, `--kz-font-label-tracking`, `--kz-font-+ - Corners follow the site too: `--kz-radius-scale` on `:root` multiplies every corner of every component (`0` square, `0.5` softer, `1` Kodza) and `--kz-radius-pill` sets the pills (`0` squares them). Unset, nothing changes.+ - Form fields share one width: `--kz-field-width` on a form (or `:root`) sizes every Kodza field in it (`100%` fills the column).+ - Motion follows the site too: `--kz-motion-scale` on `:root` multiplies every duration of every component, CSS and JS (`0.5` twice as fast, `2` twice as slow, `0` no motion at all). Unset, nothing changes.+ - [Choice Cards](https://kodza.dev/components/choice-cards.md): Cards to compare and pick, on real radio buttons or checkboxes, with a title, a line and an optional price. The picked card's ink border draws itself around it from the corner while a check draws in its mark. Pure CSS.+ - [Combobox](https://kodza.dev/components/combobox.md): A real select you can type into: the list filters as you type, accents and case aside, the matched letters underlined and the best match lit for Enter. Codes on the right are searched too.+ - [Date Range](https://kodza.dev/components/date-range.md): Two real date inputs behind one field and a two-month calendar: the ink band follows the pointer from the start to the end, the length counted as it goes, with optional shortcuts. Full keyboard.+ - [Form Wizard](https://kodza.dev/components/form-wizard.md): One real form cut into steps: Next checks the step first, the steps slide while the height eases, and the last one reads the answers back, each with its Edit. Sends via kodza:submit or a fetch.+ - [Inline Edit](https://kodza.dev/components/inline-edit.md): Text that becomes its own field when clicked: the caret lands under the pointer, Enter saves with a check, Escape rolls the old text back in. A real input or textarea underneath, with a kodza:save event.+ - [Number Stepper](https://kodza.dev/components/number-stepper.md): A real number input between − and +. Changed digits roll with the count, a held button speeds up, the edge button dims at the limit. Typed values are put back in range on leaving.+ - [Phone Input](https://kodza.dev/components/phone-input.md): A real tel input with its country code in front and a searchable list of countries: the number groups itself as it is typed, a pasted or typed +44 picks the country, and the form gets the number in E.164.+ - [Rating Scale](https://kodza.dev/components/rating-scale.md): A score on real radio buttons, from 0 to 10 or 1 to 5. The picked score fills with ink from the bottom, its end lights up, and an optional follow-up question unfolds and rolls to match the score. Pure CSS.+ - [Segmented Control](https://kodza.dev/components/segmented-control.md): Two to five exclusive choices on real radio buttons. An ink pill slides to the one you pick, stretching on the way, and the labels turn white exactly at its edges.+ - [Signature Pad](https://kodza.dev/components/signature-pad.md): A box to sign with a finger, a mouse or a stylus: the ink thins as the pen speeds up, Undo backs the last stroke out along its path, and a typed name signs too. The form gets a trimmed PNG.+ - [Subscribe Field](https://kodza.dev/components/subscribe-field.md): An email field and its button in one pill: the address is checked in place, the button rolls to a turning ring, then the thanks rises where the pill was. Posts to the form action or to your code.+ - [Tags Input](https://kodza.dev/components/tags-input.md): Free values as tags over a real text input, sent joined by commas. Enter or a comma makes a tag, a pasted list is split, a duplicate shakes its twin. Caps with data-max, checks emails.+ - [Textarea](https://kodza.dev/components/textarea.md): A textarea whose label folds up, whose height eases to fit the text, and whose ring fills from the first character as you near the limit, with the characters left in the last fifth.+ - [Time Picker](https://kodza.dev/components/time-picker.md): A time field over the real input: a wheel that snaps and takes the time once it stops, or the free slots of a day.+ - [Toggle Group](https://kodza.dev/components/toggle-group.md): Several on/off choices on real checkboxes. A picked option fills with ink from its centre and its plus turns into a check; picked days side by side join into one band. Pure CSS.+ - [Was This Helpful](https://kodza.dev/components/was-this-helpful.md): A question and two thumbs: the chosen one fills with ink, No unfolds an optional note, then the thanks rolls in where the question was. Posts to the form action or to your code.+ - [A–Z Index](https://kodza.dev/components/a-z-index.md): A bar of letters over a grouped list: a click glides to the group, an ink pill follows the letter you read, empty letters stay dimmed. Sticks to the top.+ - [Theme Toggle](https://kodza.dev/components/theme-toggle.md): A button that switches the page between light and dark, sun to moon. It starts from the system, keeps the visitor's choice, and swaps images that have a night version.+ - [Code Block](https://kodza.dev/components/code-block.md): Code to read and copy: file name, line numbers, highlighted and folded lines, a monochrome syntax in weight and light. Copy rolls to Copied and takes everything, folded lines too; a terminal copies its commands only.+ - [Departure Board](https://kodza.dev/components/departure-board.md): The next departures from a place, worked out at its own time: the day's timetable by season and weekday, the next trip on top with a countdown that rolls every minute, gone trips faded, a line once the day is over.+ - [Menu Board](https://kodza.dev/components/menu-board.md): A restaurant menu by service: dish, original name, a tabular price on a dotted leader, marks in icon and words. Opens on the service served now; tabs, or stacked with pinned titles (data-layout="stack").+ - [Inline Image Text](https://kodza.dev/components/inline-image-text.md): A large sentence with small pictures set in its lines, at letter height. Lines rise from their mask and each picture opens as its line lands. Sized in em; a muted loop works too.+ - [Marquee](https://kodza.dev/components/scrolling-text-loop.md): An endless ticker that never jumps, eases to a stop under the pointer and fades at both edges. Runs either way, with words or with logos, every logo given the same visual weight.+ - [Direction-Aware Hover](https://kodza.dev/components/direction-aware-hover.md): Tiles whose caption, or a second photo, slides in from the edge the pointer comes from and leaves by the edge it goes out. The keyboard opens it from the bottom; on touch the caption sits under the photo.+ - [Expanding Panels](https://kodza.dev/components/expanding-panels.md): Full-height photo panels side by side: the one you hover, focus or tap widens as the others close in, its spine title slides away and rises upright with a line of text and a link. Stacked when narrow.+ - [Ken Burns Slider](https://kodza.dev/components/ken-burns-slider.md): A background slideshow behind fixed words: each photo drifts slowly toward its point of interest, and the next is uncovered by a slow curtain in the same direction. A thin line counts the time, with a pause button.+ - [Make Way Grid](https://kodza.dev/components/make-way-grid.md): A grid of pictures where the one you click takes two by two cells and the others slide out of its way, then its caption card unfolds from the name pill. Two columns in narrow containers.+ - [Pixel Reveal](https://kodza.dev/components/pixel-reveal.md): Lazy images come into focus: a flat placeholder holds their place, then the decoded image is drawn on a canvas in four pixel steps before turning sharp. Cached images show at once.+ - [Progressive Blur](https://kodza.dev/components/progressive-blur.md): A blur that builds up toward an edge with no hard line, eight backdrop-filter layers deep. Under a photo caption, under a bar on top of a list, at the bottom of what scrolls. CSS only.+ - [Image Split Cards](https://kodza.dev/components/image-split-cards.md): One image laid over a row of cards. Pinned while you scroll, it splits along the gaps, then each piece turns over to show its card, one after the other. Scroll back and the picture comes back together.+ - [Inner Parallax Image](https://kodza.dev/components/inner-parallax-image.md): A picture that drifts slower than the page inside a frame that stays put. It wraps the image WordPress writes in its own frame, and the picture overhangs by its whole travel, so no gap ever shows.+ - [Media Expand](https://kodza.dev/components/media-expand.md): An image or a video in a rounded frame, set in from the edges, takes the full width as the scroll brings it to the middle of the screen. The corners square off, the caption rises, and it all reverses on the way back up.+ - [Reading Progress](https://kodza.dev/components/reading-progress.md): A thin line under the header that fills as you read the article, not the whole page. Cut at each section, it can show the minutes left, and runs on the scroll itself where the browser can.+ - [Scroll Gauge](https://kodza.dev/components/scroll-gauge.md): A figure pinned in a corner of a long page. Each section carries its value, and as you read, the figure rolls to it digit by digit, with its unit, a note and a scale of the whole story.+ - [Scroll Sequence](https://kodza.dev/components/scroll-sequence.md): A numbered series of pictures drawn on one canvas as the scroll runs through a section that holds the screen. Captions come in on cue, and the frames load coarse to fine: a fast scroll never shows a blank.

• + build_page
• + replace_element
• + find_component

icon_url

— → https://kodza.dev/icon-512.png

version

0.1.1 → 0.1.6

https://kodza.dev/llms.txt

+ - [Add to Cart](https://kodza.dev/components/add-to-cart.md): Add-to-cart button that confirms with a tick while a copy of the product picture flies into the cart icon and its count rolls up by one. Rolls back if the request fails.+ - [Ink Like](https://kodza.dev/components/ink-like.md): Like button whose heart fills with ink, a small wave riding the surface, and drains when the like is taken back. The count rolls digit by digit with carries (999 → 1,000) and rolls back if the request fails.+ - [Scroll Down](https://kodza.dev/components/scroll-down.md): The cue at the bottom of a hero: an arrow in a ring or a mouse whose wheel rolls now and then. One click glides to the next section, the first scroll fades it out, and it comes back at the top.+ - [Download Link](https://kodza.dev/components/download-link.md): A download link that shows the file's type and weight beside its words, read from the file itself. On hover the arrow sinks into its tray; a click sends it through and back from the top.+ - [Footnote Link](https://kodza.dev/components/footnote-link.md): Footnotes that stay on their line. Wide, the note sits in the margin level with its line and inks with its number; narrow, it folds out under the line. Picks up WordPress footnotes as they are.+ - [Heading Anchor](https://kodza.dev/components/heading-anchor.md): A # beside every heading. It slides out of the margin when the heading is pointed at, or waits after the last word on a touch screen. Click it, or the heading, to put the section in the bar and copy the link.+ - [Quote Link](https://kodza.dev/components/quote-link.md): Select words in an article and a pill offers a link to them: the page's address with a text fragment, which opens it scrolled to the quote and highlighted. It rolls to Link copied with a check.+ - [Burger Button](https://kodza.dev/components/burger-button.md): A menu button: the lines meet, then cross, and Menu rolls to Close at a fixed width. It follows aria-expanded and fires kodza:burger, so it drives the menu you already have.+ - [Expanding Pill Menu](https://kodza.dev/components/expanding-pill-menu.md): A Menu button that grows into the menu around itself: the card widens, then unfolds, Close stays on the button, and each link rises as the edge uncovers it. Grows upward near the bottom.+ - [Fullscreen Menu](https://kodza.dev/components/fullscreen-menu.md): A fullscreen menu: a curtain comes down with its edge bending as it moves, the page backs off under it, and each link rises as the edge passes. Closing plays it backwards.+ - [Multi-Level Menu](https://kodza.dev/components/multi-level-menu.md): A burger drawer for menus with levels: each sub-menu slides in over the last, the top row rolls to the level's name and leads back, and it reads the list wp_nav_menu() writes.+ - [Shutter Menu](https://kodza.dev/components/shutter-menu.md): A menu that comes down under your header like a shutter: each link rises as the edge reaches it, Menu rolls to Close. The panel is a native popover, so Escape, a click outside and focus return come free.+ - [Side Reveal Menu](https://kodza.dev/components/side-reveal-menu.md): A menu under the page: the page slides left and shrinks into a card, the menu was underneath, and each link rises as the page's edge passes. A click on the card closes it.+ - [Caustics](https://kodza.dev/components/caustics.md): A hero over the floor of a pool in the sun: a net of bright lines ray-traced by native WebGL 2 from two dozen swells, and calm water under the text.+ - [Cymatics](https://kodza.dev/components/cymatics.md): A hero beside a speaker drawn in sand: the frame and screws hold their lines while the cone rings through a sweeping tone, its sand sliding to one to five still circles. A woofer, or the whole box.+ - [Dimension Lines](https://kodza.dev/components/dimension-lines.md): A hero dimensioned like a technical drawing: arrowed lines measure its real margins, columns, title and height, and recompute on resize. They open one by one on entry.+ - [Dot Map](https://kodza.dev/components/dot-map.md): A hero over a world map in fine dots, framed on the places you list. Each one shows its local time, and a ring tours them, lighting the land it crosses. A plain list without the script.+ - [Ruled Paper](https://kodza.dev/components/ruled-paper.md): A section ruled like a notebook page, with an ink margin line. The rules follow the text's line height and every line of text sits on its rule, at every size.+ - [Topographic Lines](https://kodza.dev/components/topographic-lines.md): A hero over a contour map drawn by a native WebGL shader: the lines drift very slowly, the pointer raises a hill under it, and they thin out under the text. Plain CSS rings without WebGL.+ - [Hero Centered](https://kodza.dev/components/hero-centered.md): A centred hero with an announcement pill, a headline whose lines rise out of their masks, one sentence and two pill buttons. CSS only, the entrance plays on load.+ - [Hero Collage](https://kodza.dev/components/hero-collage.md): A centred hero with pictures scattered around the title: they open one after the other, then follow the mouse a little, each at its own depth.+ - [Hero Cover](https://kodza.dev/components/hero-cover.md): A cover hero: a full-width picture under a monochrome veil with the title at the bottom left. The picture opens from the top edge and settles, the title lines rise. CSS only.+ - [Hero Event](https://kodza.dev/components/hero-event.md): An event hero that counts down to the start date in its markup, each digit dropping out of its window, then gives way to "Live now" at the start and to the replay link at the end.+ - [Hero Exit](https://kodza.dev/components/hero-exit.md): A centred title in two big lines. On scroll the scene holds, the lines part, a picture opens between them and tightens into a card, then the next section slides over it.+ - [Hero Focus](https://kodza.dev/components/hero-focus.md): A title sharp over a blurred picture. On scroll the focus moves to the picture, the title blurs and leaves, a readout counts the distance, then notes point out the details. It rewinds.+ - [Hero Open](https://kodza.dev/components/hero-open.md): A hero for a place with opening hours: a status line works out, at the place's own time, if it's open ("Open now · closes 23:00", "Closes in 25 min") and rolls to the new words on the minute.+ - [Hero Paths](https://kodza.dev/components/hero-paths.md): A hero that splits visitors in two: a title, then two tall pictures that are links, and the one under the pointer widens while its call to action rises.+ - [Hero Rotate](https://kodza.dev/components/hero-rotate.md): A studio hero whose headline changes one word at a time: the next word rolls up into place while a matching picture opens over the last one, in the same stroke. A ring around the pause button shows the time left.+ - [Hero Screen](https://kodza.dev/components/hero-screen.md): A centred title and its buttons over a screenshot of the product, leaning back in perspective. On scroll the screen stands up to face you and grows while the title steps back.+ - [Hero Search](https://kodza.dev/components/hero-search.md): A hero with a real search card: Buy and Rent swap the budget list under a sliding pill, the place field rolls through its examples, the selects unroll like Kodza Select, and the result count rolls in the button.+ - [Hero Showcase](https://kodza.dev/components/hero-showcase.md): A title over a wall of project thumbnails laid back like prints on a table. On scroll the rows slide in opposite directions and click into line as the wall stands up, every thumbnail a link.+ - [Hero Showreel](https://kodza.dev/components/hero-showreel.md): A showreel hero: a muted loop under the title and a Play reel pill that follows the pointer. A click grows the pill into a player with sound, pause, mute and a seek track.+ - [Hero Statement](https://kodza.dev/components/hero-statement.md): A studio statement set very large over a mono line with the city, a live local time and the booking window. The words rise out of their masks one after the other on load.+ - [Hero Wordmark](https://kodza.dev/components/hero-wordmark.md): A hero that sets the name across the whole width, ink edge to ink edge: its letters rise one by one and a wide picture opens right under them.+ ## Header+ - [Header Announcement](https://kodza.dev/components/header-announcement.md): A site header with a strip of news on top: messages roll and pause on hover or focus; the cross folds the strip, the header slides up without a jump, and it stays closed. Below 900 px, a shutter menu.+ - [Header Centered](https://kodza.dev/components/header-centered.md): A centred header for a restaurant or a shop: the name in the middle, links on both sides, a line above that says whether it's open now. On scroll the bar tightens; below 900 px, a full-screen menu.+ - [Header Classic](https://kodza.dev/components/header-classic.md): A site header with a logo, links and one button: a line glides under the links, front edge first, and returns under the current page; below 900 px the links become a shutter menu.+ - [Header Mega](https://kodza.dev/components/header-mega.md): A full site header whose mega menus share one panel: from a link to the next it changes shape and slides instead of closing, a soft pill follows the pointer, and below 900 px the links become a drawer with levels.+ - [Header Overlay](https://kodza.dev/components/header-overlay.md): A transparent header over the hero photo: once the hero passes under it, a solid bar comes down and the text turns dark along its edge; below 900 px, a full-screen menu.

repository_url

— → https://github.com/kodza-dev/kodza

version

0.1.0 → 0.1.1