# Puppertino

> A CSS framework that brings macOS and iOS aesthetics to the web, following Apple's Human Interface Guidelines. Plain CSS with optional vanilla JavaScript helpers, no dependencies and no build step.

- Version: 2.0.0
- Full bundle: `https://cdn.jsdelivr.net/npm/@codedgar/puppertino@2.0.0/dist/css/puppertino.min.css`
- Platform bundles: `puppertino-desktop.min.css` and `puppertino-mobile.min.css` in the same folder
- npm: `npm install @codedgar/puppertino`, then `import '@codedgar/puppertino'`, `'@codedgar/puppertino/desktop'`, `'@codedgar/puppertino/mobile'`, or one component such as `'@codedgar/puppertino/buttons'`
- JavaScript helpers: `@codedgar/puppertino/js/<file>.js`, each documented on the page of the component it drives
- Every class and custom property is prefixed `p-`
- Dark mode: `.p-auto-dark-mode` follows the system setting, `.p-dark-mode` forces dark, `.p-light-mode` pins a region to light

## Foundations

- [Getting started](https://puppertino.com/docs/getting-started/): Install Puppertino and bring Apple's design language to the web in a few minutes.
- [Materials](https://puppertino.com/docs/materials/): Materials are surfaces that blur the content behind them. Five thickness levels, full dark mode support, and accessibility built in.
- [Colors](https://puppertino.com/docs/colors/): Puppertino's color system follows Apple's macOS 27 and iOS 27 specifications. System accents, fill levels, text hierarchy, and semantic backgrounds.
- [Typography](https://puppertino.com/docs/typography/): Puppertino's type system. Apple's text styles for iOS and macOS, ported faithfully to the web.
- [Layout](https://puppertino.com/docs/layout/): Size classes, split views, containers, and readable width. How a layout adapts between a phone, an iPad, and an iPad sharing its screen with another app.
- [Dark mode](https://puppertino.com/docs/dark-mode/): Dark mode in Puppertino. Automatic detection, manual toggling, cross-tab sync, and how the color tokens flip.
- [Icons](https://puppertino.com/docs/icons/): Puppertino does not ship icons. We recommend Phosphor for the closest match to Apple's SF Symbols, with notes on alignment, sizing, and color.
- [Accessibility](https://puppertino.com/docs/accessibility/): What Puppertino does for accessibility on its own, and what you still have to do in your markup and content.

## Mobile components

- [Buttons](https://puppertino.com/docs/mobile/buttons/): Capsule push buttons sized for fingers. Three touch sizes, six styles, Liquid Glass buttons, exact iOS metrics, no JavaScript.
- [Forms](https://puppertino.com/docs/mobile/forms/): Text fields, selects, switches, sliders, and pop-up buttons at iOS metrics. Grouped field rows, 44px targets, 17px type.
- [Color pickers](https://puppertino.com/docs/mobile/color-pickers/): The iOS color picker. A 402px glass panel with a 12 x 10 color grid, spectrum and slider modes, an opacity track, and saved swatches. Plus the iOS color well.
- [Modals](https://puppertino.com/docs/mobile/modals/): The iOS alert and the iOS sheet. Exact iOS metrics, driven by the shared modal manager, no component-specific JavaScript.
- [Actions](https://puppertino.com/docs/mobile/actions/): The iOS action sheet. A 300px material panel of capsule rows, anchored to the bottom, driven by the shared modal manager.
- [Tabs](https://puppertino.com/docs/mobile/tabs/): The iOS tab bar. A floating glass capsule of two to five sections with a selected pill, an optional search circle, a minimized state, and the iPad top tab bar.
- [Bars](https://puppertino.com/docs/mobile/bars/): The iOS navigation bar and toolbar. Floating titles, glass circle buttons, a floating toolbar capsule, and a bar search field, on the same glass as the tab bar.
- [Menus & popovers](https://puppertino.com/docs/mobile/menus/): The iOS menu, context menu, and popover. Material surfaces raised by a long press or a control, at exact iOS metrics.
- [Sidebars](https://puppertino.com/docs/mobile/sidebars/): The iPadOS sidebar. A 320px column attached to the window edge, with glass header controls and 44px capsule rows, plus the iPad app window it sits in.
- [Lists](https://puppertino.com/docs/mobile/lists/): The iOS list. 52px rows on a plate, hairline separators, inset grouped sections, swipe actions, and a section index.
- [Notifications](https://puppertino.com/docs/mobile/notifications/): The iOS notification. A 66px glass banner with a 38px app icon, the stack iOS uses when there is more than one, and the expanded long look with its quick actions.
- [Empty states](https://puppertino.com/docs/mobile/empty-states/): What a screen shows when it has nothing to show. A glyph, a short message, a sentence, and one action that fixes it.
- [Date pickers](https://puppertino.com/docs/mobile/date-pickers/): The iOS calendar. A glass panel with 38px day circles, 20px numbers, a neutral circle for the selected day, opened from a capsule value button.

## Desktop components

- [Buttons](https://puppertino.com/docs/desktop/buttons/): Push buttons for macOS interfaces. Six styles, four sizes, full state coverage, retinted by dropping any color class on the element.
- [Forms](https://puppertino.com/docs/desktop/forms/): macOS form controls. Text fields, pop-ups, steppers, checkboxes, radios, switches, and grouped settings forms with exact macOS 27 metrics, tintable through the color system.
- [Segmented controls](https://puppertino.com/docs/desktop/segmented-controls/): A linear set of segments, each of which functions as a button. macOS 27 metrics, five sizes, accent and gray styles, no JavaScript required.
- [Sliders and Dials](https://puppertino.com/docs/desktop/sliders/): A horizontal track with a thumb, or a circular dial, that people adjust between a minimum and maximum value. Native range inputs with macOS 27 metrics.
- [Disclosure controls](https://puppertino.com/docs/desktop/disclosure-controls/): Chevron buttons that reveal and hide related content. Five sizes, rounded squares at the small end and circles at the large end, works with native details and summary, no JavaScript.
- [Color wells](https://puppertino.com/docs/desktop/color-wells/): Circular and capsule color controls that show the current color and wrap the native color picker.
- [Image wells](https://puppertino.com/docs/desktop/image-wells/): An editable image slot with the classic inset well frame, wrapping a native file input.
- [Date pickers](https://puppertino.com/docs/desktop/date-pickers/): The graphical month calendar, plus the compact field-and-stepper composition.
- [Menus](https://puppertino.com/docs/desktop/menus/): macOS-style menus for the web. Translucent surface, selection pills, keyboard shortcuts, headers, separators, submenus, and a small JS helper for floating menus.
- [Popovers](https://puppertino.com/docs/desktop/popovers/): A transient glass surface anchored to a control, with an edge arrow. Free-form content, four placements, and a small JS helper for floating popovers.
- [Tooltips](https://puppertino.com/docs/desktop/tooltips/): The macOS tooltip as one HTML attribute. Pure CSS, shows on hover and keyboard focus after a short delay, with a flat light box and a dark glass one.
- [Modals](https://puppertino.com/docs/desktop/modals/): Desktop alert modals for macOS-style interfaces. Glass surfaces, stacked or side-by-side actions, and a small JS API for opening and closing.
- [Dialogs & sheets](https://puppertino.com/docs/desktop/dialogs/): macOS-style dialog windows and sheets. A 16px radius surface with form rows, footer actions, an expanded file-browser layout, and slide-down sheet presentation.
- [Notifications](https://puppertino.com/docs/desktop/notifications/): The macOS notification banner. App icon, bold title, up to two body lines, a timestamp, and an optional attachment on a glass surface, 344 pixels wide.
- [Windows](https://puppertino.com/docs/desktop/windows/): A presentational window shell with traffic lights, a translucent titlebar with a leading title, glass toolbar groups, an optional full-height sidebar, and group boxes.
- [Sidebars](https://puppertino.com/docs/desktop/sidebars/): A full-height navigation strip on the window's leading edge with tinted icons, quiet capsule selection, section headers, and a three-step size ladder.
- [Toolbars](https://puppertino.com/docs/desktop/toolbars/): Liquid Glass item clusters with icon buttons, dividers, two sizes and both orientations, plus round glass buttons and popup chips.
- [Menu bar & Dock](https://puppertino.com/docs/desktop/menu-bar-dock/): The transparent top bar with capsule item highlights, and the glass dock platter with magnification and launch bounce.
- [Lists & tables](https://puppertino.com/docs/desktop/lists-tables/): Rows with capsule selection for lists, and real table styling on a dense striped grid with sortable headers and full-row selection.
- [Progress indicators](https://puppertino.com/docs/desktop/progress-indicators/): Progress bars, circular progress and the spinner that show your app is working. Native determinate bars, an indeterminate bar, and macOS 27 circular indicators, all tintable.
- [Scrollbars](https://puppertino.com/docs/desktop/scrollbars/): Overlay-style scrollbars with a 6px capsule thumb and no visible track, for any scroll container.

## Optional

- [Full documentation](https://puppertino.com/llms-full.txt): every page above in one file, followed by an index of every class in each stylesheet