### Install Puppertino via NPM

Source: https://github.com/codedgar/puppertino/blob/master/README.md

Install Puppertino using NPM. The recommended method is directly from the GitHub repository.

```bash
# Via NPM (recommended)
npm install @codedgar/puppertino@github:codedgar/Puppertino

# Or install from a specific branch
npm install @codedgar/puppertino@github:codedgar/Puppertino#master

# Via SSH
npm install git+ssh://git@github.com/codedgar/Puppertino.git

# Via HTTPS
npm install https://github.com/codedgar/Puppertino.git
```

--------------------------------

### CDN Installation for Puppertino CSS

Source: https://context7.com/codedgar/puppertino/llms.txt

Include the full CSS framework or individual components via CDN links in your HTML.

```html
<!-- Full framework -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css">

<!-- Individual components (modular approach) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/buttons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/modals.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/forms.css">
```

--------------------------------

### Import Full Puppertino Framework in JavaScript/CSS

Source: https://github.com/codedgar/puppertino/blob/master/README.md

Import the entire Puppertino framework in your JavaScript or CSS files after installation.

```javascript
// In JavaScript/TypeScript
import '@codedgar/puppertino'

// In CSS
@import '@codedgar/puppertino';
```

--------------------------------

### Color Palette Examples HTML

Source: https://context7.com/codedgar/puppertino/llms.txt

Demonstrates applying background and text colors using Puppertino's predefined color classes and shades.

```html
<!-- Background colors: p-{color} or p-{color}-{shade} -->
<div class="p-strawberry">Strawberry (base)</div>
<div class="p-strawberry-500">Strawberry 500</div>
<div class="p-lime">Lime</div>
<div class="p-blueberry">Blueberry</div>
<div class="p-grape">Grape</div>

<!-- Text colors: add -color suffix -->
<p class="p-strawberry-color">Red text</p>
<p class="p-lime-color">Green text</p>
<p class="p-blueberry-color">Blue text</p>

<!-- Apple Colors -->
<div class="p-apple-red">Apple Red</div>
<div class="p-apple-blue">Apple Blue</div>
<div class="p-apple-green">Apple Green</div>
<div class="p-apple-orange">Apple Orange</div>
<div class="p-apple-purple">Apple Purple</div>

<!-- Available color palettes: strawberry, orange, banana, lime, mint,
     blueberry, grape, bubblegum, cocoa, silver, slate, dark
     Each with shades: 900, 700, 500, 300, 100 -->
```

--------------------------------

### Puppertino Icon Button Examples

Source: https://context7.com/codedgar/puppertino/llms.txt

Examples of icon-only buttons, including a default, a colored variant, and one with no border, suitable for actions or navigation.

```html
<!-- Icon Buttons -->
<a href="#" class="p-btn-icon" aria-label="Help Button">?</a>
<a href="#" class="p-btn-icon p-lime-color" aria-label="Dog Button">🐶</a>
<a href="#" class="p-btn-icon p-mint p-silver-100-color p-btn-icon-no-border" aria-label="Custom Icon">
  <svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2" fill="none">
    <!-- SVG content -->
  </svg>
</a>
```

--------------------------------

### Puppertino Push Button Examples

Source: https://context7.com/codedgar/puppertino/llms.txt

Demonstrates various styles for push buttons, including default, destructive, disabled, primary, rounded, and outline variants.

```html
<!-- Push Buttons -->
<button class="p-btn">Default</button>
<button class="p-btn p-btn-destructive">Destructive</button>
<button class="p-btn" disabled>Disabled</button>
<a href="#" class="p-btn p-prim-col">Primary</a>
<a href="#" class="p-btn p-btn-round">Rounded</a>
<a href="#" class="p-btn p-btn-outline">Outline</a>
<a href="#" class="p-btn p-btn-outline-dash">Outline Dashed</a>
```

--------------------------------

### Event Listener for Theme Toggle

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/dark_mode.html

An example of attaching an event listener to a button to trigger the theme toggle functionality.

```javascript
hljs.initHighlightingOnLoad();
document.querySelector('#the_button').addEventListener('click',function(e){
  e.preventDefault();
  puppertinoThemeMan.toggle();
});
```

--------------------------------

### Action Variations with Icons

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/actions.html

This example demonstrates action variations including destructive actions and icons. It shows how to use different classes for styling destructive actions and icons, both inline and with text. Ensure consistent use of variants within a single action.

```html
<div class="p-action-big-container" id="actions" data-p-close-on-outside="true">         <div class="p-action-container">           <div class="p-action-title">             <h3 class="p-action-title--intern">What do you want to do?</h3>             <p class="p-action-text">Select an option below...</p></div>           <a href="#" class="p-action--intern p-action-destructive p-action-icon"><!-- ICON --> Close this tab</a>           <a href="#" class="p-action--intern p-action-destructive p-action-icon-inline" ><!-- ICON --> Close this tab</a>           <a href="#" class="p-action--intern p-action-neutral">New private tab</a>           <a href="#" class="p-action--intern">New tab</a>         </div>         <div class="p-action-container">       <a href="#" class="p-action--intern p-action-cancel" data-p-cancel-action="true">Cancel</a>     </div>   </div>
```

--------------------------------

### Puppertino Icon Button Examples

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/buttons.html

Demonstrates the creation of icon buttons, which are circular buttons containing icons. Supports letters, font icons, or SVGs. Always include an `aria-label` for accessibility. Custom colors and border removal are supported.

```html
<a href="#" class="p-btn-icon" aria-label="Help Button">?</a>  <a href="#" class="p-btn-icon" aria-label="Custom Button"><!-- SVG ICON HERE --></a>  <a href="#" class="p-btn-icon p-mint p-silver-100-color" aria-label="Custom Color Button">Custom Color</a>
```

--------------------------------

### Puppertino Scope Button Styles

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/buttons.html

Provides examples of scope buttons, designed for navigation routes. Includes styles for default/active, inactive, and action buttons. These complement standard buttons in route-based contexts.

```html
[Default/Active](#) [Unactive](#) [Disabled](#) [Action](#) [Action](#)
```

--------------------------------

### Dark Mode Toggle Button Event Listener HTML and JavaScript

Source: https://context7.com/codedgar/puppertino/llms.txt

Provides an example of a button that triggers the dark mode toggle functionality when clicked.

```html
<!-- Dark mode toggle button example -->
<button id="theme-toggle" class="p-btn">Toggle Theme</button>

<script>
  document.querySelector('#theme-toggle').addEventListener('click', function(e) {
    e.preventDefault();
    puppertinoThemeMan.toggle();
  });
</script>
```

--------------------------------

### Puppertino Button Size Variants

Source: https://context7.com/codedgar/puppertino/llms.txt

Examples of buttons with different size classes: small (p-btn-sm), medium (p-btn-md), large (p-btn-lg), and block (p-btn-block) for full width.

```html
<!-- Button Sizes -->
<a href="#" class="p-btn p-btn-sm">Small size</a>
<a href="#" class="p-btn p-btn-md">Medium size</a>
<a href="#" class="p-btn p-btn-lg">Large size</a>
<a href="#" class="p-btn p-btn-block">Block size (full width)</a>
```

--------------------------------

### Initialize PuppertinoThemeMan

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/dark_mode.html

Call this function to set up theme management, optionally enabling auto-detection of system theme and customizing the dark theme class.

```javascript
puppertinoThemeMan.init({
  autoDetect: true, // Automatically detect system theme
  darkThemeClass: 'p-dark-mode' // Your custom dark theme class (optional)
});  
```

--------------------------------

### Initialize and Toggle Dark Mode with Puppertino

Source: https://github.com/codedgar/puppertino/blob/master/docs/index.html

This JavaScript snippet demonstrates how to initialize the Puppertino Dark Mode Manager, detect user preferences, and toggle themes. Ensure the Puppertino library is loaded before executing this code.

```javascript
document.querySelector('.toggles_dark_mode input').addEventListener('change',function(){ puppertinoThemeMan.toggle(); }); puppertinoThemeMan.init({autoDetect: true}); const isDarkActive = puppertinoThemeMan.isDarkThemeActive(); console.log(isDarkActive); if(isDarkActive){ document.querySelector('.toggles_dark_mode input').checked = true }
```

--------------------------------

### Modal Structure and Usage

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/modals.html

Learn how to set up the basic HTML structure for modals, including the background container, the modal itself, and trigger elements. This section covers general usage and the use of attributes like `data-p-open-modal` and `data-p-cancel`.

```APIDOC
## General Usage

To use modals, you need two principal components: a trigger for the modal and the modal itself. For the button to work, you need to add the attribute `data-p-open-modal` followed by the ID of the actual modal. The actual modal can have from 1 to 3 buttons, and if you add the attribute `data-p-close-on-outside="true"` the modal will close if you click outside of it. Also, modals appear a little bit at the bottom in lower resolutions, just to make them easier to tap in mobile devices.

### Triggering a Modal

```html
<!-- The button that toggles the modal -->
<a href="#" class="p-btn" data-p-open-modal="#example-modal">Default</a>

<!-- Modal container, all the modals you use should be inside of it. -->
<div class="p-modal-background">
    <!-- Your modals will be here -->
    <div class="p-modal" id="example-modal">
        <h2>Hey!</h2>
        <p>This is an example modal!</p>
        <div class="p-modal-button-container">
            <button data-p-cancel>OK</button>
        </div>
    </div>
</div>
```

### Multiple Buttons in a Modal

Modals support having several buttons on them without breaking, but due to composition, you should not add more than 3 buttons. To add more buttons, the only thing you need is to add another `<a>` element inside the Modal button container (`<div class="p-modal-button-container">`).

```html
<div class="p-modal-button-container">
    <a href="#" data-p-cancel>OK</a>
    <a href="#">Settings</a>
</div>
```
```

--------------------------------

### Apply Basic Shadows

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/shadows.html

Use these classes to apply predefined shadow effects to elements. Ensure the Puppertino CSS is included.

```html
<div class="p-shadow-1"></div>  <div class="p-shadow-2"></div>  <div class="p-shadow-3"></div>  <div class="p-shadow-4"></div>
```

--------------------------------

### Segmented Control Color Customization

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/segmented_controls.html

Customize the color of segmented controls by overriding CSS variables like --color-segmented and --color-lighter-segment. The 'p-segmented-grey' class is an example of this customization.

```html
<div class="p-segmented-controls p-segmented-grey">   <a href="#" class="active">Roadmap</a>   <a href="#">Satelite</a> </div>
```

--------------------------------

### Segmented Control Modifier Classes

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/segmented_controls.html

Apply modifier classes to change the visual appearance of segmented controls. Examples include radius, internal radius, alt, and outline variations.

```html
<div class="p-segmented-controls p-segmented-radius">     <a href="#" class="active">Doom</a>     <a href="#">Quake</a> </div>   <div class="p-segmented-controls p-segmented-radius p-segmented-internal-radius">   <a href="#" class="active">FIFA</a>   <a href="#">PES</a> </div>  <div class="p-segmented-controls p-segmented-controls-alt">   <a href="#" class="active">Thing</a>   <a href="#">Stuff</a>   <a href="#">Other</a> </div>  <div class="p-segmented-controls p-segmented-outline">   <a href="#" class="active">Can</a>   <a href="#">Dog</a>   <a href="#">Pup</a> </div>  <div class="p-segmented-controls p-segmented-controls-outline-alt">   <a href="#" class="active">Mini</a>   <a href="#">May</a>   <a href="#">Moe</a> </div>
```

--------------------------------

### Include Full Puppertino CSS

Source: https://github.com/codedgar/puppertino/blob/master/README.md

Add this to your HTML head to include the entire Puppertino framework. Ensure it's placed correctly for styles to apply.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css">
```

--------------------------------

### CSS Color Variables and Gradients CSS

Source: https://context7.com/codedgar/puppertino/llms.txt

Shows how to utilize CSS variables for colors and create gradients using Puppertino's color system.

```css
/* Using colors as CSS variables */
.custom-element {
  background: var(--p-strawberry-500);
  color: var(--p-silver-100);
  border: 1px solid var(--p-blueberry);
}

/* Creating gradients */
.gradient-button {
  background: linear-gradient(135deg, var(--p-grape), var(--p-bubblegum));
}
```

--------------------------------

### Initialize Highlight.js

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/buttons.html

Initializes Highlight.js on the page to enable syntax highlighting for code blocks. This script should be included after the DOM is loaded.

```javascript
hljs.initHighlightingOnLoad();
```

--------------------------------

### HTML Structure for Desktop Tabs

Source: https://context7.com/codedgar/puppertino/llms.txt

Implements desktop-style tabs with associated content panels. The 'p-tabs-container' holds both 'p-tabs' and 'p-panels'. Add the 'p-is-active' class to show a tab and its corresponding panel.

```html
<!-- Desktop Tabs -->
<div class="p-tabs-container" id="tab-example">
  <div class="p-tabs">
    <button class="p-tab p-is-active">Service 1</button>
    <button class="p-tab">Service 2</button>
    <button class="p-tab">Service 3</button>
  </div>
  <div class="p-panels">
    <div class="p-panel p-is-active">
      <h1>Service 1</h1>
      <p>Content for service 1...</p>
    </div>
    <div class="p-panel">
      <h1>Service 2</h1>
      <p>Content for service 2...</p>
    </div>
    <div class="p-panel">
      <h1>Service 3</h1>
      <p>Content for service 3...</p>
    </div>
  </div>
</div>
```

--------------------------------

### Import Individual Puppertino Components in JavaScript

Source: https://github.com/codedgar/puppertino/blob/master/README.md

Import specific components like buttons, modals, forms, and tabs to use a modular approach.

```javascript
// Import only what you need
import '@codedgar/puppertino/buttons'
import '@codedgar/puppertino/modals'
import '@codedgar/puppertino/forms'
import '@codedgar/puppertino/tabs'
```

--------------------------------

### Include Specific Puppertino Component CSS

Source: https://github.com/codedgar/puppertino/blob/master/README.md

Import only the buttons component to reduce file size. This is useful for modular integration.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/buttons.css">
```

--------------------------------

### Puppertino Button Styles

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/buttons.html

Demonstrates different styles for Puppertino buttons, including default/active, unactive, disabled, and outline actions. Ensure the correct classes are applied for desired button states.

```HTML
<a href="#" class="p-btn p-btn-scope">Default/Active</a>  <a href="#" class="p-btn p-btn-scope p-btn-scope-unactive">Unactive</a>  <a href="#" class="p-btn p-btn-scope p-btn-disabled" disabled="true" tabindex="-1">Disabled</a>  <a href="#" class="p-btn p-btn-scope p-btn-scope-outline">Action</a>
```

--------------------------------

### Puppertino Chip Styles

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/forms.html

Demonstrates various styling options for Puppertino chips, including default, dark, outline, and disabled states. These are implemented using HTML label and input elements.

```html
<label class="p-chip">   <input type="checkbox" />   <span>Default</span> </label>  <label class="p-chip p-chip-dark p-chip-radius-b">   <input type="checkbox" />   <span>Border</span> </label>  <label class="p-chip p-chip-outline">   <input type="checkbox" />   <span>Outline</span> </label>  <label class="p-chip p-chip-outline-to-bg">   <input type="checkbox" />   <span>Outline to bg</span> </label>  <label class="p-chip p-chip-radius-b">   <input type="checkbox" />   <span>Combined</span> </label>  <label class="p-chip">   <input type="checkbox" disabled />   <span>Disabled</span> </label>  <label class="p-chip p-chip-big">   <input type="checkbox" />   <span> <!-- SVG -->     Icon</span> </label>
```

--------------------------------

### Basic Segmented Control HTML

Source: https://context7.com/codedgar/puppertino/llms.txt

Demonstrates the basic structure for an iOS-style segmented control using anchor tags and buttons.

```html
<div class="p-segmented-controls">
  <a href="#" class="active">Roadmap</a>
  <button>Satellite</button>
</div>
```

--------------------------------

### Basic Action HTML Structure

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/actions.html

Use this HTML structure to create a basic action with a button to open it. Ensure the button's `data-p-open-actions` attribute matches the action container's ID. The `data-p-close-on-outside` attribute enables closing the action by clicking outside its area.

```html
<!-- The button that toggles the action -->  <button class="p-btn" data-p-open-actions="#actions_basic">Basic Actions</button>   <!-- Action container, all the actions you use should be inside of it. -->  <div class="p-action-background">  	<!-- Your actions will be here -->   <div class="p-action-big-container" id="actions_basic" data-p-close-on-outside="true">     <div class="p-action-container">       <div class="p-action-title">         <h3 class="p-action-title--intern">Welcome to actions</h3>         <p class="p-action-text">Select an option below...</p>       </div>       <a href="#" class="p-action--intern p-action-neutral">New private tab</a>       <a href="#" class="p-action--intern">New tab</a>     </div>     <div class="p-action-container">       <button class="p-action--intern p-action-cancel" data-p-cancel-action="true">Cancel</button>     </div>   </div>  </div>
```

--------------------------------

### Import Puppertino JavaScript Modules

Source: https://github.com/codedgar/puppertino/blob/master/README.md

Import specific JavaScript modules for functionality like modals, dark mode, and tabs using ES6 or CommonJS.

```javascript
// ES6 imports
import '@codedgar/puppertino/js/modals.js'
import '@codedgar/puppertino/js/dakmode_manager.js'
import '@codedgar/puppertino/js/tabs.js'

// CommonJS require
const modals = require('@codedgar/puppertino/src/js/modals.js')
```

--------------------------------

### Direct CSS Imports for Puppertino

Source: https://github.com/codedgar/puppertino/blob/master/README.md

Use direct CSS imports for the full framework or individual components in your CSS files.

```css
/* Import full framework */
@import '@codedgar/puppertino';

/* Or import individual components */
@import '@codedgar/puppertino/buttons';
@import '@codedgar/puppertino/modals';
@import '@codedgar/puppertino/dark-mode';
```

--------------------------------

### Puppertino Push Button Variants

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/buttons.html

Demonstrates the usage of different push button styles including default, destructive, disabled, primary, mobile-optimized, rounded, outline, and custom action buttons. Use `<a>` or `<button>` elements. Apply `disabled` and `tabindex="-1"` for disabled states.

```html
<a href="#" class="p-btn">Default</a>  <button class="p-btn p-btn-destructive">Destructive</button>  <a href="#" class="p-btn p-btn-disabled" disabled>Disabled</a>      <a href="#" class="p-btn p-prim-col">Primary</a>      <a href="#" class="p-btn p-btn-mob">Btn mob</a>      <a href="#" class="p-btn p-btn-round">Rounded</a>      <a href="#" class="p-btn p-btn-more">Custom action</a>
```

--------------------------------

### CSS Imports for Puppertino

Source: https://context7.com/codedgar/puppertino/llms.txt

Import the full Puppertino framework or individual CSS components using the @import directive.

```css
/* CSS imports */
@import '@codedgar/puppertino';

/* Or import individual components */
@import '@codedgar/puppertino/buttons';
@import '@codedgar/puppertino/modals';
@import '@codedgar/puppertino/dark-mode';
```

--------------------------------

### Segmented Control with Icons HTML

Source: https://context7.com/codedgar/puppertino/llms.txt

Shows how to implement segmented controls with SVG icons for each option. Ensure SVG elements are properly defined.

```html
<div class="p-segmented-controls">
  <a href="#" class="active">
    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none">
      <!-- Icon SVG -->
    </svg>
  </a>
  <a href="#">
    <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none">
      <!-- Icon SVG -->
    </svg>
  </a>
</div>
```

--------------------------------

### PuppertinoActionsManager.openAction

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/actions.html

Opens a specific action card using its CSS selector.

```APIDOC
## POST /actions/open

### Description
Opens the action card specified by the CSS selector.

### Method
POST

### Endpoint
/actions/open

### Parameters
#### Request Body
- **selector** (string) - Required - CSS selector for the action card to open.

### Request Example
{
  "selector": "#exampleAction"
}

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.

#### Response Example
{
  "status": "Action opened successfully"
}
```

--------------------------------

### Puppertino Button Color Customization

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/buttons.html

Shows how to apply custom colors to buttons using predefined palette classes or direct CSS. Previously, `p-btn-mob` was required for color changes, but now any button can be styled directly. Ensure text color contrast with `p-white-color`.

```html
<button class="p-btn p-prim-col p-grape p-white-color p-white-color">Primary Purple</button>  <button class="p-btn p-btn-mob p-lime p-white-color p-white-color">Success</button>      <button class="p-btn p-btn-mob p-orange p-white-color p-white-color">Danger</button>      <button class="p-btn p-btn-mob p-strawberry p-white-color p-white-color">Error</button>
```

--------------------------------

### Opening a Modal Programmatically

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/modals.html

Use the `PuppertinoModalManager.openModal()` method to open a modal using its CSS selector. This provides programmatic control over modal visibility.

```javascript
PuppertinoModalManager.openModal("#exampleModal");
```

--------------------------------

### Layout and Typography HTML

Source: https://context7.com/codedgar/puppertino/llms.txt

Applies global layout and typography classes to the body and demonstrates standard heading and content styles.

```html
<body class="p-layout">

  <h1>Title 1 (h1)</h1>
  <h2>Title 2 (h2)</h2>
  <h3>Title 3 (h3)</h3>
  <p>Content (p)</p>

  <h1 class="p-large-title">Large Title</h1>
  <h3 class="p-headline">Headline</h3>
  <p class="p-callout">Callout</p>
  <p class="p-subhead">Subhead</p>
  <p class="p-footnote">Footnote</p>
  <p class="p-caption">Caption</p>

</body>
```

--------------------------------

### Apply Blur Effects

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/shadows.html

Utilize these classes to apply curated blur levels to elements. These classes include a background that can be overridden.

```html
<div class="p-blur-1"></div>  <div class="p-blur-2"></div>  <div class="p-blur-3"></div>  <div class="p-blur-4"></div>
```

--------------------------------

### JavaScript Module Imports for Puppertino

Source: https://context7.com/codedgar/puppertino/llms.txt

Import the full framework or individual components into your JavaScript/TypeScript projects.

```javascript
// Import full framework in JavaScript/TypeScript
import '@codedgar/puppertino'

// Import individual components (modular approach)
import '@codedgar/puppertino/buttons'
import '@codedgar/puppertino/modals'
import '@codedgar/puppertino/forms'
import '@codedgar/puppertino/tabs'
import '@codedgar/puppertino/dark-mode'

// Import JavaScript modules
import '@codedgar/puppertino/js/modals.js'
import '@codedgar/puppertino/js/dakmode_manager.js'
import '@codedgar/puppertino/js/tabs.js'
```

--------------------------------

### Puppertino Deprecated Buttons

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/forms.html

Illustrates the usage of deprecated Puppertino buttons for simple actions. It is recommended to transition to the full button component for future development.

```html
<input type="submit" class="p-form-button p-form-send">  <input type="reset" class="p-form-button">
```

--------------------------------

### Dark Mode Manager Initialization and Control JavaScript

Source: https://context7.com/codedgar/puppertino/llms.txt

Initializes the dark mode manager, toggles themes, and checks the current dark mode status. Preferences are saved in localStorage and synced across tabs.

```javascript
// Initialize theme manager with options
puppertinoThemeMan.init({
  autoDetect: true,              // Automatically detect system theme
  darkThemeClass: 'p-dark-mode'  // Custom dark theme class (optional)
});

// Toggle between light and dark themes
puppertinoThemeMan.toggle();

// Check if dark theme is currently active
const isDarkMode = puppertinoThemeMan.isDarkThemeActive();
if (isDarkMode) {
  console.log("Dark mode is active");
}

// Theme changes sync automatically across browser tabs
// User preference is saved in localStorage
```

--------------------------------

### JS API Methods

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/modals.html

Programmatically control modals using the `PuppertinoModalManager` class. This section details methods for opening and closing modals.

```APIDOC
### openModal(selector)

Opens the modal specified by the CSS selector.

**Parameters:**

*   `selector` (string): CSS selector for the modal to open.

**Usage:**

```javascript
PuppertinoModalManager.openModal("#exampleModal");
```

### closeActiveModal()

Closes the currently active (open) modal.

**Usage:**

```javascript
PuppertinoModalManager.closeActiveModal();
```
```

--------------------------------

### Checkbox Implementation - Puppertino

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/forms.html

Implement checkboxes for multiple selections. Similar to radio buttons, checkboxes support adjustable dimensions without affecting layout. Each checkbox is contained within a label.

```html
<label class="p-form-checkbox-cont"> 	<input type="checkbox" name="example"> 	<span> 
	</span> 	Thing one 
</label>  
<label class="p-form-checkbox-cont"> 	<input type="checkbox" name="example"> 	<span>
	</span> 	Thing two 
</label>
```

--------------------------------

### Select Box Usage - Puppertino

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/forms.html

Use this HTML structure to implement a customizable select box. Note that select boxes do not have native validation, but invalid/valid states can be manually applied using CSS classes.

```html
<div class="p-form-select"> 	<select> 		<option>Option 1</option> 		<option>Option 2</option> 		<option>Option 3</option> 	</select> 
</div>
```

--------------------------------

### Puppertino Modals Structure

Source: https://context7.com/codedgar/puppertino/llms.txt

HTML structure for iOS-style modals, including containers, modal content, and button configurations. Supports backdrop blur and closing behavior via data attributes.

```html
<div class="p-modal-background">

  <!-- Modal with multiple buttons -->
  <div class="p-modal" id="example-modal" data-p-close-on-outside="true">
    <h2>Hello!</h2>
    <p>This modal has 3 buttons, please don't add more than 3 :)</p>
    <div class="p-modal-button-container">
      <a href="#"><strong>Confirm</strong></a>
      <a href="#">Settings</a>
      <button data-p-cancel>Cancel</button>
    </div>
  </div>

  <!-- Simple modal -->
  <div class="p-modal" id="alert-modal">
    <h2>Alert!</h2>
    <p>This modal does not close when clicking outside.</p>
    <div class="p-modal-button-container">
      <a href="#" data-p-cancel>OK</a>
    </div>
  </div>

</div>
```

```html
<button data-p-open-modal="#example-modal" class="p-btn">Open Modal</button>
```

--------------------------------

### PuppertinoActionsManager.isActionOpen

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/actions.html

Checks if a specific action card is currently open.

```APIDOC
## GET /actions/is-open

### Description
Checks if a specific action card is currently open.

### Method
GET

### Endpoint
/actions/is-open

### Parameters
#### Query Parameters
- **selector** (string) - Required - CSS selector for the action card to check.

### Request Example
GET /actions/is-open?selector=#exampleAction

### Response
#### Success Response (200)
- **isOpen** (boolean) - true if the action card is open, false otherwise.

#### Response Example
{
  "isOpen": true
}
```

--------------------------------

### HTML Structure for Action Sheets

Source: https://context7.com/codedgar/puppertino/llms.txt

Defines the HTML for an iOS-style action sheet with options and a button to trigger it. Ensure actions are placed within the 'p-action-background' and triggered by elements with 'data-p-open-actions'.

```html
<div class="p-action-background">

  <div class="p-action-big-container" id="actions-example" data-p-close-on-outside="true" aria-hidden="true">
    <div class="p-action-container">
      <div class="p-action-title">
        <h3 class="p-action-title--intern">What do you want to do?</h3>
        <p class="p-action-text">Select an option below...</p>
      </div>
      <a href="#" class="p-action--intern p-action-destructive p-action-icon">
        <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none">
          <!-- Warning icon SVG -->
        </svg>
        Close this tab
      </a>
      <a href="#" class="p-action--intern p-action-neutral">New private tab</a>
      <a href="#" class="p-action--intern">New tab</a>
    </div>
    <div class="p-action-container">
      <button class="p-action--intern p-action-cancel" data-p-cancel-action="true">Cancel</button>
    </div>
  </div>

</div>

<!-- Button to trigger action -->
<button class="p-btn" data-p-open-actions="#actions-example">Open Actions</button>
```

--------------------------------

### Radio Button Implementation - Puppertino

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/forms.html

Create radio buttons for single-selection groups. These elements feature smooth animations and adjustable sizing. Each radio button is wrapped in a label for better usability.

```html
<label class="p-form-radio-cont"> 	<input type="radio" name="example"> 	<span> 
	</span> 	Thing one 
</label>  
<label class="p-form-radio-cont"> 	<input type="radio" name="example"> 	<span> 
	</span> 	Thing two 
</label>
```

--------------------------------

### Apply Hover Shadow Transitions

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/shadows.html

Add a depth effect on hover using these classes. The 'to-' prefix indicates the transition to a shadow state.

```html
<div class="p-to-shadow-1"></div>  <div class="p-to-shadow-2"></div>  <div class="p-to-shadow-3"></div>  <div class="p-to-shadow-4"></div>
```

--------------------------------

### Puppertino Switch Component

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/forms.html

Provides the basic HTML structure for a Puppertino switch, which functions like a checkbox. The size can be adjusted via the --width variable in the p-form-switch class.

```html
<label class="p-form-switch"> 	<input type="checkbox"> 	<span></span> </label>
```

--------------------------------

### Google Analytics Configuration

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/color_palette.html

This snippet configures Google Analytics by initializing the dataLayer and setting up the gtag function. It's typically found in the head of an HTML document.

```javascript
window.dataLayer = window.dataLayer || [];
function gtag(){
  dataLayer.push(arguments);
}

gtag('js', new Date());
gtag('config', 'UA-176821843-1');
```

--------------------------------

### Basic Segmented Control Usage

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/segmented_controls.html

Use this for toggling different states or views. The 'active' class denotes the currently selected control.

```html
<div class="p-segmented-controls">   <a href="#" class="active">Roadmap</a>   <a href="#">Satelite</a> </div>
```

--------------------------------

### Open an Action Card

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/actions.html

Use this method to open a specific action card identified by its CSS selector. Ensure the selector accurately targets the desired action card.

```javascript
PuppertinoActionsManager.openAction("#exampleAction");
```

--------------------------------

### Desktop Tabs Component Usage

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/tabs.html

Use this HTML structure for the desktop tabs component. Ensure the 'p-is-active' class is applied to the initially visible tab and panel. JavaScript manages the toggling behavior.

```html
<div class="p-tabs-container" id="tab_example">     <div class="p-tabs">       <button class="p-tab p-is-active">Service 1</button>       <button class="p-tab">Service 2</button>       <button class="p-tab">Service 3</button>     </div>     <div class="p-panels">       <div class="p-panel p-is-active">         <!-- CONTENT HERE -->       </div>       <div class="p-panel">         <!-- CONTENT HERE -->       </div>       <div class="p-panel">         <!-- CONTENT HERE -->       </div>     </div> </div>
```

--------------------------------

### Basic Modal Structure

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/modals.html

A master div is required to contain all modals. Modals are placed inside this container.

```html
<div class="p-modal-background">
  <!-- Your modals will be here -->
</div>
```

--------------------------------

### Puppertino Modal Programmatic Control

Source: https://context7.com/codedgar/puppertino/llms.txt

JavaScript API for controlling modals using PuppertinoModalManager. Includes functions to open, close, and check the status of modals.

```javascript
// Programmatic Modal Control via PuppertinoModalManager

// Open a modal
PuppertinoModalManager.openModal("#example-modal");

// Close the currently active modal
PuppertinoModalManager.closeActiveModal();

// Close a specific modal
PuppertinoModalManager.closeModal("#example-modal");

// Check if a modal is open
if (PuppertinoModalManager.isModalOpen("#example-modal")) {
  console.log("The modal is open.");
}
```

--------------------------------

### Puppertino Custom Validation States

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/forms.html

Shows how to apply custom validation states to input fields using p-form-invalid and p-form-valid classes. These classes disable default HTML validation.

```html
<input type="text" class="p-form-text p-form-invalid">  <input type="text" class="p-form-text p-form-valid">
```

--------------------------------

### HTML Structure for Mobile Bottom Tabs

Source: https://context7.com/codedgar/puppertino/llms.txt

Provides a mobile bottom navigation tab interface. Content is managed within 'p-mobile-tabs--content' divs, linked to buttons/links in the 'p-mobile-tabs' container via 'data-p-mobile-toggle'.

```html
<!-- Mobile Bottom Tabs -->
<div class="p-mobile-tabs-content">
  <div class="p-mobile-tabs--content active" id="home">
    <h1>Home</h1>
    <p>Home content...</p>
  </div>
  <div class="p-mobile-tabs--content" id="news">
    <h1>News</h1>
    <p>News content...</p>
  </div>
  <div class="p-mobile-tabs--content" id="settings">
    <h1>Settings</h1>
    <p>Settings content...</p>
  </div>

  <div class="p-mobile-tabs">
    <div>
      <button class="active" data-p-mobile-toggle="#home">
        <svg viewBox="0 0 24 24" width="19" height="19" stroke="currentColor" stroke-width="2" fill="none">
          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
        </svg>
        Home
      </button>
    </div>
    <div>
      <a href="#" data-p-mobile-toggle="#news">
        <svg viewBox="0 0 24 24" width="19" height="19" stroke="currentColor" stroke-width="2" fill="none">
          <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
        </svg>
        News
      </a>
    </div>
    <div>
      <a href="#" data-p-mobile-toggle="#settings">
        <svg viewBox="0 0 24 24" width="19" height="19" stroke="currentColor" stroke-width="2" fill="none">
          <circle cx="12" cy="12" r="3"></circle>
        </svg>
        Settings
      </a>
    </div>
  </div>
</div>
```

--------------------------------

### Opening a Modal with a Trigger

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/modals.html

Use the `data-p-open-modal` attribute on a trigger element (like a link or button) to specify which modal to open. The modal itself needs a unique ID.

```html
<!-- The button that toggles the modal -->
<a href="#" class="p-btn" data-p-open-modal="#example-modal">Default</a>

<!-- Modal container, all the modals you use should be inside of it. -->
<div class="p-modal-background">
  <!-- Your modals will be here -->
  <div class="p-modal" id="example-modal">
    <h2>Hey!</h2>
    <p>This is an example modal!</p>
    <div class="p-modal-button-container">
      <button data-p-cancel>OK</button>
    </div>
  </div>
</div>
```

--------------------------------

### JavaScript Control for Action Sheets

Source: https://context7.com/codedgar/puppertino/llms.txt

Manages action sheets programmatically using the PuppertinoActionsManager. Use 'openAction', 'closeActiveAction', 'closeAction', and 'isActionOpen' for controlling visibility and state.

```javascript
// Programmatic Actions Control via PuppertinoActionsManager

// Open an action sheet
PuppertinoActionsManager.openAction("#actions-example");

// Close the currently active action sheet
PuppertinoActionsManager.closeActiveAction();

// Close a specific action sheet
PuppertinoActionsManager.closeAction("#actions-example");

// Check if an action sheet is open
if (PuppertinoActionsManager.isActionOpen("#actions-example")) {
  console.log("The action card is open.");
}
```

--------------------------------

### Toggle Dark Mode

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/dark_mode.html

Use this function to switch between light and dark themes. It updates the document's body class and saves the preference in localStorage.

```javascript
puppertinoThemeMan.toggle();
```

--------------------------------

### Puppertino Form Elements

Source: https://context7.com/codedgar/puppertino/llms.txt

HTML structure for various form elements including select boxes, text fields, radio buttons, checkboxes, switches, and chips. Supports custom validation states.

```html
<div class="p-form-select">
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>
```

```html
<input type="email" class="p-form-text" placeholder="Validated email input">
```

```html
<input type="text" class="p-form-text p-form-no-validate" placeholder="Non-validated input">
```

```html
<input type="text" class="p-form-text p-form-truncated" placeholder="Truncated text...">
```

```html
<label class="p-form-label">
  Email:
  <input type="email" class="p-form-text" placeholder="example@gmail.com">
</label>
```

```html
<input type="email" class="p-form-text-alt" placeholder="Large validated input">
```

```html
<label class="p-form-label-inline">
  Email:
  <input type="email" class="p-form-text-alt" placeholder="example@gmail.com">
</label>
```

```html
<label class="p-form-radio-cont">
  <input type="radio" name="example">
  <span></span>
  Option one
</label>
<label class="p-form-radio-cont">
  <input type="radio" name="example">
  <span></span>
  Option two
</label>
```

```html
<label class="p-form-checkbox-cont">
  <input type="checkbox" name="example">
  <span></span>
  Option one
</label>
<label class="p-form-checkbox-cont">
  <input type="checkbox" name="example">
  <span></span>
  Option two
</label>
```

```html
<label class="p-form-switch">
  <input type="checkbox">
  <span></span>
</label>
```

```html
<label class="p-chip">
  <input type="checkbox">
  <span>Default</span>
</label>
```

```html
<label class="p-chip p-chip-dark p-chip-radius-b">
  <input type="checkbox">
  <span>Border</span>
</label>
```

```html
<label class="p-chip p-chip-outline">
  <input type="checkbox">
  <span>Outline</span>
</label>
```

```html
<label class="p-chip p-chip-outline-to-bg">
  <input type="checkbox">
  <span>Outline to bg</span>
</label>
```

```html
<input type="text" class="p-form-text p-form-invalid" placeholder="Invalid Input">
```

```html
<input type="text" class="p-form-text p-form-valid" placeholder="Valid Input">
```

--------------------------------

### Modal Management API

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/modals.html

Provides methods to interact with modals, including closing them and checking their visibility.

```APIDOC
## closeModal(selector)

### Description
Closes a specific modal specified by the CSS selector.

### Method
Not applicable (JavaScript function)

### Endpoint
Not applicable (JavaScript function)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
PuppertinoModalManager.closeModal("#exampleModal");
```

### Response
#### Success Response (200)
None (function does not return a value)

#### Response Example
None
```

```APIDOC
## isModalOpen(selector)

### Description
Checks if a specific modal is currently open.

### Method
Not applicable (JavaScript function)

### Endpoint
Not applicable (JavaScript function)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
if (PuppertinoModalManager.isModalOpen("#exampleModal")) {
  console.log("The modal is open.");
}
```

### Response
#### Success Response (200)
- **boolean**: `true` if the modal is open, `false` otherwise.

#### Response Example
```json
true
```
```

--------------------------------

### Modal with Multiple Buttons

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/modals.html

Modals can accommodate multiple buttons within the `p-modal-button-container`. It is recommended to limit to three buttons for optimal composition.

```html
<div class="p-modal-button-container">
  <a href="#" data-p-cancel>OK</a>
  <a href="#">Settings</a>
</div>
```

--------------------------------

### Manual Dark Mode HTML

Source: https://context7.com/codedgar/puppertino/llms.txt

Applies a class to the body to manually enforce dark mode styling.

```html
<body class="p-dark-mode">
  <!-- Content -->
</body>
```

--------------------------------

### Copy Color Class to Clipboard

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/color_palette.html

This JavaScript code iterates through elements with the class 'color_base'. When clicked, it copies the element's color class to the clipboard, updates a text area, and provides visual feedback. It also applies the selected color to a preview element.

```javascript
var color_base = document.querySelectorAll(".color_base");
for (var item of color_base) {
  item.addEventListener("click", function (event) {
    event.preventDefault();
    var color_actual = this.classList[this.classList.length - 1];
    console.log(color_actual);
    document.getElementById("textarea_color").value = "";
    document.getElementById("textarea_color").value = color_actual;
    document.querySelector("#textarea_color").select();
    document.execCommand("copy");
    document.querySelector("#color_talk").classList.add(color_actual);
    document.querySelector("#color_talk").textContent = color_actual;
    document.querySelector(".copy_correct").classList.add("active");
    setTimeout(function () {
      document.querySelector(".copy_correct").classList.remove("active");
      setTimeout(function () {
        document.querySelector("#color_talk").className = "";
      }, 200);
    }, 700);
  });
}
```

--------------------------------

### Close a Modal with PuppertinoModalManager

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/modals.html

Use this function to programmatically close a modal. Provide the CSS selector of the modal you wish to close.

```javascript
PuppertinoModalManager.closeModal("#exampleModal");
```

--------------------------------

### HTML Body Classes for Dark Mode

Source: https://github.com/codedgar/puppertino/blob/master/docs/examples/dark_mode.html

Apply these classes to the body tag to enable automatic or manual dark mode.

```html
<body class="p-auto-dark-mode"></body> <!-- Automatic -->
<body class="p-dark-theme"></body> <!-- Manual -->
```