{"_id":"@auriel/peppertino","_rev":"6-68c75c873f241f2517484ee7a2a44663","name":"@auriel/peppertino","dist-tags":{"latest":"0.5.0"},"versions":{"0.1.0":{"name":"@auriel/peppertino","version":"0.1.0","license":"MIT","_id":"@auriel/peppertino@0.1.0","maintainers":[{"name":"auriel","email":"debadityamalakar@aol.com"}],"dist":{"shasum":"400dc69247a4afce09e2b0f17f84a341a41bb3cb","tarball":"https://registry.npmjs.org/@auriel/peppertino/-/peppertino-0.1.0.tgz","fileCount":15,"integrity":"sha512-vuAXS7Md6Kse6AE5rPfTGy5W78GzhTWiUaaQEWA0vcH657qbyK7R3bp8z7PzWIqz+/CyZqrIhFDVTT9YsHgwfQ==","signatures":[{"sig":"MEQCIEJBxoUWKX/hj+2xigLZXeJ5aKtclhoz1nVns0iy24K3AiBoamqD5sqq53lttldZcVGZ8B26gcfeT3YK2a4TfsaTqA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":42592},"gitHead":"bdb8efefce7e6ae99ff3eea7c91976c04c3906e2","scripts":{"dev":"bun run build && concurrently \"bun run watch:css\" \"bun run watch:js\" \"bun run serve\"","build":"bun run build:css && bun run build:js","serve":"bunx --bun serve . --port 3000","build:js":"node build.js","watch:js":"node build.js --watch","build:css":"sass src/scss/main.scss dist/main.css --style=expanded --source-map","watch:css":"sass --watch src/scss/main.scss:dist/main.css --style=expanded --source-map","build:css:min":"sass src/scss/main.scss dist/main.min.css --style=compressed --no-source-map"},"_npmUser":{"name":"auriel","email":"debadityamalakar@aol.com"},"repository":{"url":"https://codeberg.org/debaditya/Peppertino","type":"git"},"_npmVersion":"11.8.0","description":"An Apple-inspired CSS framework with a spicy red accent. Clean geometry, restrained elegance, zero Cupertino lawsuits.","directories":{},"_nodeVersion":"22.20.0","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.89.0","serve":"^14.2.4","esbuild":"^0.25.4","concurrently":"^9.1.2"},"_npmOperationalInternal":{"tmp":"tmp/peppertino_0.1.0_1779865315583_0.7101850259338283","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@auriel/peppertino","version":"0.1.1","license":"MIT","_id":"@auriel/peppertino@0.1.1","maintainers":[{"name":"auriel","email":"debadityamalakar@aol.com"}],"dist":{"shasum":"4bd36c33214a62d4339f8a123dbd8f74c97e95e0","tarball":"https://registry.npmjs.org/@auriel/peppertino/-/peppertino-0.1.1.tgz","fileCount":15,"integrity":"sha512-hhtMiMc355WJeo2Fg30TuxtDhnWqVLIV0wUpETHkKejh1YT9Kghu+bsHqUmlvd6JFT47GmDpJpPBdaM1zE6PZg==","signatures":[{"sig":"MEQCIAwDz6Tj+ahwIOVMbi9kZk27cIaR7p8fU1XTcWM6cUqnAiAxb84OZ1613IoTKR1HCjwK26MTePI6WlHdF3F8NOsN4w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":42589},"gitHead":"51bbf241a16c5f6412a8ced420d968dc2cb5ad44","scripts":{"dev":"bun run build && concurrently \"bun run watch:css\" \"bun run watch:js\" \"bun run serve\"","build":"bun run build:css && bun run build:js","serve":"bunx --bun serve . --port 3000","build:js":"node build.js","watch:js":"node build.js --watch","build:css":"sass src/scss/main.scss dist/main.css --style=expanded --source-map","watch:css":"sass --watch src/scss/main.scss:dist/main.css --style=expanded --source-map","build:css:min":"sass src/scss/main.scss dist/main.min.css --style=compressed --no-source-map"},"_npmUser":{"name":"auriel","email":"debadityamalakar@aol.com"},"repository":{"url":"https://codeberg.org/debaditya/Peppertino","type":"git"},"_npmVersion":"11.8.0","description":"An Apple-inspired CSS framework with a spicy red accent. Clean geometry, restrained elegance, zero Cupertino lawsuits.","directories":{},"_nodeVersion":"22.20.0","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.89.0","serve":"^14.2.4","esbuild":"^0.25.4","concurrently":"^9.1.2"},"_npmOperationalInternal":{"tmp":"tmp/peppertino_0.1.1_1779866552819_0.03659656865705685","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@auriel/peppertino","version":"0.2.0","license":"MIT","_id":"@auriel/peppertino@0.2.0","maintainers":[{"name":"auriel","email":"debadityamalakar@aol.com"}],"dist":{"shasum":"ce992cb4c63e45e3d855b41f63dc0179ab10ff2a","tarball":"https://registry.npmjs.org/@auriel/peppertino/-/peppertino-0.2.0.tgz","fileCount":37,"integrity":"sha512-D0xu1c2zcU/fTG6zFASMqtJ3/83Q7x5z9b/z3VIy0izw77y0WY6wytphxv8sVw5O3mdme7EiE96D171Vc+/y8g==","signatures":[{"sig":"MEUCIC6xeUGubWjHlzLTkfSUhIkmFL2gMtb49lYcZVEbtsdeAiEAmxkQsG4ztgaCuHmN6/F8n3A5ZLW0eKpCBEI+IaAqbzA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":186025},"gitHead":"c4343558eb1dfaf2e6f5a28a3114d456b90ac5e4","scripts":{"dev":"bun run build && concurrently \"bun run watch:css\" \"bun run watch:js\" \"bun run serve\"","build":"bun run build:css && bun run build:js","serve":"bunx --bun serve . --port 3000","build:js":"node build.js","watch:js":"node build.js --watch","build:css":"sass src/scss/main.scss dist/main.css --style=expanded --source-map","watch:css":"sass --watch src/scss/main.scss:dist/main.css --style=expanded --source-map","build:css:min":"sass src/scss/main.scss dist/main.min.css --style=compressed --no-source-map"},"_npmUser":{"name":"auriel","email":"debadityamalakar@aol.com"},"repository":{"url":"https://codeberg.org/debaditya/Peppertino","type":"git"},"_npmVersion":"11.8.0","description":"An Apple-inspired CSS framework with a spicy red accent. Clean geometry, restrained elegance, zero Cupertino lawsuits.","directories":{},"_nodeVersion":"22.20.0","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.89.0","serve":"^14.2.4","esbuild":"^0.25.4","concurrently":"^9.1.2"},"_npmOperationalInternal":{"tmp":"tmp/peppertino_0.2.0_1780284003742_0.5405074906581415","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@auriel/peppertino","version":"0.3.0","license":"MIT","_id":"@auriel/peppertino@0.3.0","maintainers":[{"name":"auriel","email":"debadityamalakar@aol.com"}],"dist":{"shasum":"40fce0824e17a15a33857222c5d2ffbb9c72bb43","tarball":"https://registry.npmjs.org/@auriel/peppertino/-/peppertino-0.3.0.tgz","fileCount":50,"integrity":"sha512-cvmXygR8rbGgzZXwrC98POKZUJVNG+n2sH1eBKDsgJ/CGCAFSm32rRwoFnuUV0V7xQzSv7YzcWLwPELt5fVzxw==","signatures":[{"sig":"MEYCIQC23WfD0dkfNqpGlzVMgioyKYkKNMuziIi5elo75cjnVgIhAOIQ50FyH16bQWLrQ3TfTDdsLsSjUPVLR3eBRk8+wMrV","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":436275},"gitHead":"bf77fed0e1b3727b5aed2fb35fab3688dac90fa6","scripts":{"dev":"bun run build && concurrently \"bun run watch:css\" \"bun run watch:js\" \"bun run serve\"","build":"bun run build:css && bun run build:js","serve":"bunx --bun serve . --port 3000","build:js":"node build.js","watch:js":"node build.js --watch","build:css":"sass src/scss/main.scss dist/main.css --style=expanded --source-map","watch:css":"sass --watch src/scss/main.scss:dist/main.css --style=expanded --source-map","build:css:min":"sass src/scss/main.scss dist/main.min.css --style=compressed --no-source-map"},"_npmUser":{"name":"auriel","email":"debadityamalakar@aol.com"},"repository":{"url":"https://codeberg.org/debaditya/Peppertino","type":"git"},"_npmVersion":"11.8.0","description":"An Apple-inspired CSS framework with a spicy red accent. Clean geometry, restrained elegance, zero Cupertino lawsuits.","directories":{},"_nodeVersion":"22.20.0","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.89.0","serve":"^14.2.4","esbuild":"^0.25.4","concurrently":"^9.1.2"},"_npmOperationalInternal":{"tmp":"tmp/peppertino_0.3.0_1780662713996_0.3978072711819105","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@auriel/peppertino","version":"0.4.0","license":"MIT","_id":"@auriel/peppertino@0.4.0","maintainers":[{"name":"auriel","email":"debadityamalakar@aol.com"}],"dist":{"shasum":"f1f7fa95084cefcb404ce48f64758151bbc87c28","tarball":"https://registry.npmjs.org/@auriel/peppertino/-/peppertino-0.4.0.tgz","fileCount":57,"integrity":"sha512-6DkGBYD8NaXsRvOV/IhjC2DFHQHQ5WJny+kGSWSKIyZRPMQuGZkd7BqLcgNe8yKdQNJPnWlaghVVVPVAaiM3NQ==","signatures":[{"sig":"MEQCIH6SNZvsayGNffZ94YUesnsH0o572RDsExhYoYV0Ipq+AiB72A/He2u5LTeAf5lSa1Q/3HZjQ/V6zn48vKJj7pHcow==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":596829},"gitHead":"72bc71db66ad0f3c379c21adc2a82d33ca6c5d2e","scripts":{"dev":"bun run build && concurrently \"bun run watch:css\" \"bun run watch:js\" \"bun run serve\"","build":"bun run build:css && bun run build:js","serve":"bunx --bun serve . --port 3000","build:js":"node build.js","watch:js":"node build.js --watch","build:css":"sass src/scss/main.scss dist/main.css --style=expanded --source-map","watch:css":"sass --watch src/scss/main.scss:dist/main.css --style=expanded --source-map","build:css:min":"sass src/scss/main.scss dist/main.min.css --style=compressed --no-source-map"},"_npmUser":{"name":"auriel","email":"debadityamalakar@aol.com"},"repository":{"url":"https://codeberg.org/debaditya/Peppertino","type":"git"},"_npmVersion":"11.8.0","description":"An Apple-inspired CSS framework with a spicy red accent. Clean geometry, restrained elegance, zero Cupertino lawsuits.","directories":{},"_nodeVersion":"22.20.0","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.89.0","serve":"^14.2.4","esbuild":"^0.25.4","concurrently":"^9.1.2"},"_npmOperationalInternal":{"tmp":"tmp/peppertino_0.4.0_1781122115328_0.20132272896083503","host":"s3://npm-registry-packages-npm-production"}},"0.5.0":{"name":"@auriel/peppertino","version":"0.5.0","description":"An Apple-inspired CSS framework with a spicy red accent. Clean geometry, restrained elegance, zero Cupertino lawsuits.","repository":{"type":"git","url":"https://codeberg.org/debaditya/Peppertino"},"license":"MIT","scripts":{"build:css":"sass src/scss/main.scss dist/main.css --style=expanded --source-map","build:css:min":"sass src/scss/main.scss dist/main.min.css --style=compressed --no-source-map","build:js":"bun build.js","lint:colors":"bun scripts/lint-colors.mjs","lint:bem":"bun scripts/lint-bem.mjs","build":"bun run build:css && bun run build:js && bun run lint:colors && bun run lint:bem","watch:css":"sass --watch src/scss/main.scss:dist/main.css --style=expanded --source-map","watch:js":"bun build.js --watch","serve":"bunx --bun serve . --port 3000","dev":"bun run build && concurrently \"bun run watch:css\" \"bun run watch:js\" \"bun run serve\""},"devDependencies":{"concurrently":"^9.1.2","esbuild":"^0.25.4","sass":"^1.89.0","serve":"^14.2.4"},"gitHead":"72bc71db66ad0f3c379c21adc2a82d33ca6c5d2e","_id":"@auriel/peppertino@0.5.0","_nodeVersion":"24.16.0","_npmVersion":"11.17.0","dist":{"integrity":"sha512-XsmBFgayqJSVG+Kb0GjtdGuqtsu59DMJak2AxZr7pnetPq0BJ/FlIqAXpwyna+T+KcUSze9F4kZqcgPfAD88WA==","shasum":"e90f27803cb07e0f6f5a92bd382393cd3cc31a9a","tarball":"https://registry.npmjs.org/@auriel/peppertino/-/peppertino-0.5.0.tgz","fileCount":77,"unpackedSize":746905,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCpNXaZnJkF7Y5q2Y69e4f4UdXeCj2QLH4eD8QveZLs7wIgCItEwDDYyuNKfr5SORSJCg3zknU0XGBl90ctsaMH25s="}]},"_npmUser":{"name":"auriel","email":"debadityamalakar@aol.com"},"directories":{},"maintainers":[{"name":"auriel","email":"debadityamalakar@aol.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/peppertino_0.5.0_1781831391307_0.5968476308127451"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-27T07:01:55.383Z","modified":"2026-06-19T01:09:51.581Z","0.1.0":"2026-05-27T07:01:55.717Z","0.1.1":"2026-05-27T07:22:32.954Z","0.2.0":"2026-06-01T03:20:03.885Z","0.3.0":"2026-06-05T12:31:54.144Z","0.4.0":"2026-06-10T20:08:35.463Z","0.5.0":"2026-06-19T01:09:51.467Z"},"license":"MIT","repository":{"type":"git","url":"https://codeberg.org/debaditya/Peppertino"},"description":"An Apple-inspired CSS framework with a spicy red accent. Clean geometry, restrained elegance, zero Cupertino lawsuits.","maintainers":[{"name":"auriel","email":"debadityamalakar@aol.com"}],"readme":"# PeppertinoCSS — An Apple-inspired CSS framework with a little spice.\n\nPeppertinoCSS is an Apple-inspired CSS framework built with SCSS, featuring the clean geometry and restrained elegance of Cupertino design — but with a spicy red accent instead of blue, because we're not Apple and we're not pretending to be.\n\n---\n\n## Getting started\n\n```bash\nbun add @auriel/peppertino\n```\n\nCDN — stylesheet only:\n\n```html\n\n```\n\nCDN — with JS components:\n\n```html\n\n\n```\n\nSCSS import into your own build:\n\n```scss\n@use '@auriel/peppertino/src/scss/main';\n```\n\nClone and build locally:\n\n```bash\ngit clone https://codeberg.org/debaditya/Peppertino\ncd Peppertino\nbun install\nbun run dev\n```\n\nThen open `http://localhost:3000` in your browser.\n\n---\n\n## Build scripts\n\n| Command | Description |\n|---|---|\n| `bun run build` | Compile SCSS + JS to `dist/`, then run both linters |\n| `bun run build:css` | SCSS only, expanded with sourcemap |\n| `bun run build:css:min` | SCSS minified, no sourcemap |\n| `bun run build:js` | Bundle all `src/js/` components via esbuild |\n| `bun run lint:colors` | Fail if any component SCSS uses literal hex/SCSS color vars |\n| `bun run lint:bem` | Fail if any `.pp-*` class in `dist/main.css` violates BEM |\n| `bun run watch:css` | Watch and recompile SCSS on save |\n| `bun run watch:js` | Watch and rebundle JS on save |\n| `bun run serve` | Serve project on `http://localhost:3000` |\n| `bun run dev` | Build + watch CSS/JS + serve, all in parallel |\n\n---\n\n## Claude Code skill\n\nThe `agents/` directory ships a Claude Code skill that gives AI agents per-component reference documentation covering classes, variants, ARIA requirements, and JS APIs.\n\n### Install (project-level)\n\nCopy the skill into your project's Claude skills directory:\n\n```bash\ncp -r agents/peppertino .claude/skills/peppertino\n```\n\nThen invoke it in Claude Code:\n\n```\n/peppertino\n```\n\n### Install (user-level — available in all projects)\n\n```bash\ncp -r agents/peppertino ~/.claude/skills/peppertino\n```\n\n### What the skill contains\n\n| File | Covers |\n|---|---|\n| `skill.md` | Index, ARIA/WCAG requirements, conventions |\n| `base.md` | Design tokens, spacing, breakpoints, mixins |\n| `badge.md` | Badge variants, sizes, dot indicator |\n| `button.md` | All button variants |\n| `card.md` | Card parts, variants, grid |\n| `carousel.md` | Carousel markup, API, keyboard |\n| `footer.md` | Footer columns, social links |\n| `forms-fieldset.md` | Fieldset & legend |\n| `forms-form-instructions.md` | Pre-form instructions, hints |\n| `forms-label.md` | Label tiers, scale, icon row |\n| `forms-text-field.md` | Field wrapper, input, hint, validation |\n| `forms-validation.md` | Summary, confirmation checkbox, `ppValidation` API |\n| `gradient.md` | Gradient text |\n| `header.md` | Header, nav, dropdown, mobile drawer |\n| `modal.md` | Modal, actions, `ppModal` API |\n| `section.md` | Section variants, scrollbar |\n| `select.md` | Native select, custom dropdown |\n| `switch.md` | Toggle switch, sizes, `ppSwitch` events |\n| `table.md` | Table, column helpers |\n| `tabs.md` | Tabs, variants, keyboard nav |\n| `toast.md` | Toast positions, variants, `ppToast` API |\n| `tooltip.md` | Tooltip placements, CSS-only usage |\n| `typography.md` | All typography utility classes |\n\nThe skill's `skill.md` enforces ARIA and WCAG AA compliance rules and instructs the agent to fetch authoritative specs from w3.org when uncertain.\n\n---\n\n## What's inside\n\n### SCSS modules (`src/scss/`)\n\n| File | Purpose |\n|---|---|\n| `reset.scss` | Opinionated modern reset |\n| `base.scss` | Design tokens, CSS custom properties, helper functions, base element styles |\n| `accordion.scss` | `.pp-accordion` — collapsible panels; variants: `--flush`, `--dark`, `--primary` |\n| `alert.scss` | `.pp-alert` — inline feedback; variants: `--info/success/warning/error/primary/neutral`, `--filled` |\n| `badge.scss` | `.pp-badge` — pill badges; variants: `--primary/success/warning/error/info`, `--filled`, sizes `--sm/lg`, `--dot` |\n| `button.scss` | `.pp-button`, `.pp-button--outline`, semantic variants |\n| `card.scss` | `.pp-card` and variants |\n| `carousel.scss` | `.pp-carousel` — CSS scroll-snap carousel |\n| `dark-mode.scss` | `.dark` overrides for all `--pp-*` tokens — applied last |\n| `footer.scss` | `.pp-footer` — multi-column footer |\n| `forms.scss` | Aggregator for all form partials |\n| `forms/fieldset.scss` | `.pp-fieldset` + `.pp-legend` |\n| `forms/form-instructions.scss` | `.pp-form-instructions`, `.pp-form-hint` |\n| `forms/label.scss` | `.pp-label` — Apple HIG four-tier label system |\n| `forms/text-field.scss` | `.pp-field` — labelled input/textarea with validation states |\n| `forms/validation.scss` | `.pp-validation-summary`, `.pp-confirm`, `.pp-field--validate` |\n| `gradient.scss` | `.pp-gradient-text` |\n| `header.scss` | `.pp-header` — glassmorphism sticky header |\n| `modal.scss` | `.pp-modal-backdrop` + `.pp-modal` — glassmorphic modals |\n| `section.scss` | `.pp-section` — full-viewport sections + custom scrollbar |\n| `select.scss` | Native `\n Your full legal name.\n\n```\n\nStates: `--error` · `--success` · `--warning` · `--validating` \nSizes: `--sm` · `--lg`\n\n#### Validation\n\n```html\n\n
\n

Errors prevented submission

\n \n
\n\n\n\n\n```\n\nJS API (optional — CSS works without it):\n\n```js\nppValidation.setError(input, 'Message')\nppValidation.clearError(input)\nppValidation.setSuccess(input, 'Message')\nppValidation.setValidating(input)\nppValidation.setSummary([{ input, message }], summaryEl)\n```\n\n### Gradient text\n\n```html\n

PeppertinoCSS

\n```\n\n### Header\n\n```html\n
\n Brand\n \n \n
\n\n```\n\n### Modal\n\n```html\n\n\n
\n
\n \n

Title

\n

Description text.

\n \n
\n
\n\n```\n\n`window.ppModal.open(id)` / `.close(id)` / `.closeAll()`\n\n### Select\n\n```html\n
\n \n \n
\n\n```\n\nSizes: `.pp-select--sm` · `.pp-select--lg`\n\n### Switch\n\n```html\n\n\n\n\n\n\n\n\n\n```\n\nSizes: `--sm` (32×20px) · default (44×26px) · `--lg` (56×32px) \nJS handles `aria-checked` toggle on click and Space key. \nEvent: `pp:switch:change` with `{ checked: boolean }` on the switch element.\n\n### Tabs\n\n```html\n
\n \n \n
\n
Panel 1
\n\n\n```\n\nVariants: default · `--outline` · `--gradient` · `--gradient-outline` \nSizes: `--sm` · `--lg` \nKeyboard: `←` / `→` arrows, `Home`, `End` \nJS API: `ppTabs.get(ref).activate(index)` — programmatically activate a tab by index. \nEvent: `pp:tabs:change` with `{ index }` on the `.pp-tabs` element.\n\n### Table\n\n```html\n\n \n \n \n
LabelValue AValue B
\n```\n\nColumn helpers: `.pp-table--cols-1` → `.pp-table--cols-4`\n\n### Toast\n\n```js\n// Show a toast (JS required)\nppToast.show({ message: 'File saved.', variant: 'success' });\nppToast.show({ message: 'Sync failed.', title: 'Error', variant: 'error', duration: 6000 });\nppToast.show({ message: 'Update available.', variant: 'info', position: 'bottom-center' });\n```\n\n```html\n\n\n```\n\nVariants: `--info` · `--success` · `--warning` · `--error` · `--neutral` \nPositions: `top-right` (default) · `top-left` · `top-center` · `bottom-right` · `bottom-left` · `bottom-center` \nOptions: `message` · `title` · `variant` · `duration` (ms, default 4000) · `position` \nEvents: `pp:toast:show` / `pp:toast:dismiss` on the toast element.\n\n### Tooltip\n\n```html\n\n\n Hover me\n Helpful hint\n\n\n\n\n Click me\n \n Shown below\n \n\n```\n\nPlacements: default (top) · `--bottom` · `--left` · `--right` \nShown automatically on `:hover` and `:focus-within` — no JS required. \nAdd `data-show` to force-display for testing.\n\n### Section\n\n```html\n
\n
\n \n
\n
\n```\n\nVariants: `--primary` · `--dark` · `--muted` · `--gradient`\n\n---\n\n## Utilities\n\nSingle-purpose classes — no JavaScript required. Import `utilities.scss` or use the compiled CSS.\n\n| Group | Classes |\n|---|---|\n| Display | `.d-{block\\|inline\\|inline-block\\|flex\\|inline-flex\\|grid\\|inline-grid\\|none\\|contents}` |\n| Visibility | `.visible` `.invisible` `.sr-only` `.not-sr-only` |\n| Opacity | `.opacity-{0\\|25\\|50\\|75\\|100}` |\n| Margin | `.m-*` `.mt-*` `.mb-*` `.ml-*` `.mr-*` `.mx-*` `.my-*` (keys 0–32, `auto`) |\n| Padding | `.p-*` `.pt-*` `.pb-*` `.pl-*` `.pr-*` `.px-*` `.py-*` (keys 0–32) |\n| Gap | `.gap-*` `.gap-x-*` `.gap-y-*` (keys 0–32) |\n| Flex | direction, wrap, grow/shrink, justify-content, align-items, align-self |\n| Grid | `.grid-cols-{1–6,12}` `.grid-rows-{1–4}` `.col-span-*` `.row-span-*` |\n| Width | `.w-full` `.w-screen` `.w-auto` `.w-fit` `.w-min` `.w-max` `.w-half` |\n| Height | `.h-full` `.h-screen` `.h-auto` `.h-fit` |\n| Overflow | `.overflow-{auto\\|hidden\\|visible\\|scroll}`, x/y variants |\n| Position | `.static` `.relative` `.absolute` `.fixed` `.sticky` |\n| Z-index | `.z-{below\\|base\\|raised\\|overlay\\|modal\\|toast\\|tooltip}` |\n| Border-radius | `.rounded-{none\\|sm\\|base\\|md\\|lg\\|xl\\|2xl\\|full}` |\n| Shadow | `.shadow-{none\\|sm\\|md\\|lg\\|xl}` |\n| Cursor | `.cursor-{default\\|pointer\\|not-allowed\\|grab\\|text}` |\n| Responsive | `.sm-d-*` `.md-d-*` `.lg-d-*` `.xl-d-*` `.w2xl-d-*` (display only) |\n\n---\n\n## Dark mode\n\nAdd `class=\"dark\"` to `` (or any ancestor element). All component tokens flip automatically via CSS custom properties — no extra classes needed on individual components.\n\n```html\n\n \n\n```\n\nToggle from JS using the `ppTheme` API (requires `theme.js`):\n\n```js\nppTheme.set('dark'); // switch to dark mode\nppTheme.set('light'); // switch to light mode\nppTheme.toggle(); // flip current mode\nppTheme.get(); // → 'dark' | 'light'\n```\n\nOr add `data-theme-toggle` to any button — it wires automatically:\n\n```html\n\n```\n\nThe preference is persisted to `localStorage` under `pp-theme` and restored on page load. Event: `pp:theme:change` with `{ theme: 'dark' | 'light' }` dispatched on `document`.\n\nAll `--pp-*` tokens are defined on `:root` as light defaults. `dark-mode.scss` overrides them under `.dark`. The neutral scale is fully inverted (50 ↔ 900), surfaces swap, and glass/shadow values are strengthened for dark backgrounds.\n\n---\n\n## CustomEvents reference\n\nAll JS components dispatch `pp::` CustomEvents that bubble. Listen at any ancestor:\n\n| Event | Dispatched on | Detail |\n|---|---|---|\n| `pp:accordion:open` | `.pp-accordion` | `{ index, trigger, panel }` |\n| `pp:accordion:close` | `.pp-accordion` | `{ index, trigger, panel }` |\n| `pp:alert:dismiss` | `.pp-alert` | — |\n| `pp:carousel:change` | `.pp-carousel` | `{ index, total, label }` |\n| `pp:header:open` | `.pp-header` | — |\n| `pp:header:close` | `.pp-header` | — |\n| `pp:modal:open` | `.pp-modal-backdrop` | — |\n| `pp:modal:close` | `.pp-modal-backdrop` | — |\n| `pp:select:change` | `.pp-select` | `{ value }` |\n| `pp:switch:change` | `.pp-switch` | `{ checked: boolean }` |\n| `pp:tabs:change` | `.pp-tabs` | `{ index }` |\n| `pp:theme:change` | `document` | `{ theme: 'dark' \\| 'light' }` |\n| `pp:toast:show` | `.pp-toast` | — |\n| `pp:toast:dismiss` | `.pp-toast` | — |\n\n---\n\n## Changelog\n\nSee [CHANGELOG.txt](CHANGELOG.txt)\n\n---\n\n## License\n\nMIT — see [LICENSE](LICENSE)\n\n---\n\n[Codeberg](https://codeberg.org/debaditya/Peppertino)\n","readmeFilename":"README.md"}