Merge 324e84fd88 into 6dc6489e69

.editorconfig

@@ -0,0 +1,33 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = crlf
+insert_final_newline = true
+charset = utf-8
+trim_trailing_whitespace = true
+indent_style = space
+indent_size = 2
+
+# JavaScript and JSON files
+[*.{js,json}]
+indent_size = 2
+
+# SCSS files
+[*.scss]
+indent_size = 2
+
+# Markdown files
+[*.md]
+trim_trailing_whitespace = false
+
+# Package files
+[package.json]
+indent_size = 2
+
+# Config files
+[*.{yml,yaml}]
+indent_size = 2

.github/CONTRIBUTING.md

@@ -1,22 +1,24 @@
 # Contributing to Pico
 
-Thanks for your interest in contributing to Pico CSS! Please take a moment to review this document before submitting a [bug report](https://github.com/picocss/pico/issues) or a [pull request](https://github.com/picocss/pico/pulls).
+Thanks for your interest in contributing to Pico CSS! Please take a moment to review this document before submitting a [bug report](https://github.com/Yohn/PicoCSS/issues) or a [pull request](https://github.com/Yohn/PicoCSS/pulls).
 
 ## Bug reports
 
-The [issue tracker]((https://github.com/picocss/pico/issues)) is the preferred channel for bug reports, but please respect the following restrictions:
+The [issue tracker]((https://github.com/Yohn/PicoCSS/issues)) is the preferred channel for bug reports, but please respect the following restrictions:
-- Please do not use the issue tracker for personal support requests. [Open a question in our discussion forums](https://github.com/picocss/pico/discussions/categories/help) instead.
+- Please do not use the issue tracker for personal support requests. [Open a question in our discussion forums](https://github.com/Yohn/PicoCSS/discussions/categories/help) instead.
-- Please do not use the issue tracker for feature requests.  Instead, use our discussion forums to [suggest any ideas](https://github.com/picocss/pico/discussions/categories/ideas) you have.
+- Please do not use the issue tracker for feature requests.  Instead, use our discussion forums to [suggest any ideas](https://github.com/Yohn/PicoCSS/discussions/categories/ideas) you have.
 
 ## Pull requests
 
 Good pull requests, patches, improvements, and new features are a fantastic help.
 
 **Please ask before starting work on any significant new features.**
-We recommend that you first [suggest your feature idea in our discussion forums](https://github.com/picocss/pico/discussions/categories/ideas).
+We recommend that you first [suggest your feature idea in our discussion forums](https://github.com/Yohn/PicoCSS/discussions/categories/ideas).
 
-[`dev`](https://github.com/picocss/pico/tree/dev) branch is open for pull requests on `v2`.
+<!-- [`dev`](https://github.com/Yohn/PicoCSS/tree/dev) branch is open for pull requests on `v3`.
 
-[`v1-dev`](https://github.com/picocss/pico/tree/v1-dev) branch is open to pull requests on `v1`.
+[`main`](https://github.com/Yohn/PicoCSS/tree/main) branch is open to pull requests on `v2`. -->
 
-**Do not edit [`/css`](https://github.com/picocss/pico/tree/master/css) files directly.** Edit the source files in [`/scss`](https://github.com/picocss/pico/tree/master/scss), then recompile the [`/css`](https://github.com/picocss/pico/tree/master/css) files with `yarn build`.
+**Do not edit [`/css`](https://github.com/Yohn/PicoCSS/tree/master/css) files directly.** 
+
+Edit the source files in [`/scss`](https://github.com/Yohn/PicoCSS/tree/master/scss), Github will automatically re-compile the css files after the pull request is merged.

.github/FUNDING.yml

@@ -0,0 +1,15 @@
+# These are supported funding model platforms
+
+github: [Yohn] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+#patreon: # Replace with a single Patreon username
+#open_collective: # Replace with a single Open Collective username
+#ko_fi: # Replace with a single Ko-fi username
+#tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+#community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+#liberapay: # Replace with a single Liberapay username
+#issuehunt: # Replace with a single IssueHunt username
+#lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+#polar: # Replace with a single Polar username
+#buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
+#thanks_dev: # Replace with a single thanks.dev username
+custom: ['http://cash.me/$yohnjohn84'] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +1,8 @@
 blank_issues_enabled: false
 contact_links:
   - name: Get Help
-    url: https://github.com/picocss/pico/discussions/categories/help
+    url: https://github.com/Yohn/PicoCSS/discussions/categories/help
     about: If you can't get something to work the way you expect, open a question in our discussion forums.
   - name: Feature Request
-    url: https://github.com/picocss/pico/discussions/categories/ideas
+    url: https://github.com/Yohn/PicoCSS/discussions/categories/ideas
     about: Suggest any ideas you have using our discussion forums.

.github/auto-build-maybe.yml.txt

@@ -0,0 +1 @@
+

.github/workflows/BuildCSS.yml

@@ -0,0 +1,40 @@
+name: Build CSS
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'scss/**'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v2
+      with:
+        node-version: '20'
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Build CSS
+      run: npm run build
+
+    - name: Commit and push changes
+      run: |
+        git config --global user.name 'github-actions[bot]'
+        git config --global user.email 'github-actions[bot]@users.noreply.github.com'
+        git add .
+        git commit -m 'Build CSS'
+        git push
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -30,3 +30,13 @@ Thumbs.db
 
 # Pico
 .pico
+package-lock.json
+/docs/orig
+/scss/components/_offcanvas.scss
+docs/js/DialogManager.js
+docs/modal.html
+
+/.yohn
+_docs/
+
+/zzz

.node-version

@@ -1 +1 @@
-18.19.0
+20

.nvmrc

@@ -1 +1 @@
-18.19.0
+20

README.md

@@ -1,17 +1,28 @@
 <p>
   <a href="https://picocss.com" target="_blank">
     <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg">
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/Yohn/PicoCSS/HEAD/.github/logo-dark.svg">
-      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/Yohn/PicoCSS/HEAD/.github/logo-light.svg">
-      <img alt="Pico CSS" src="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" width="auto" height="60">
+      <img alt="Pico CSS" src="https://raw.githubusercontent.com/Yohn/PicoCSS/HEAD/.github/logo-light.svg" width="auto" height="60">
     </picture>
   </a>
 </p>
 
-[![Github release](https://img.shields.io/github/v/release/picocss/pico?color=0172ad&logo=github&logoColor=white)](https://github.com/picocss/pico/releases/latest)
+[![Github release](https://img.shields.io/github/v/release/Yohn/PicoCSS?color=0172.ad&logo=github&logoColor=white)](https://github.com/Yohn/PicoCSS/releases/latest)
-[![npm version](https://img.shields.io/npm/v/@picocss/pico?color=0172ad)](https://www.npmjs.com/package/@picocss/pico)
+[![npm version](https://img.shields.io/npm/v/@yohns/picocss?color=0172ad)](https://www.npmjs.com/package/@yohns/picocss)
-[![License](https://img.shields.io/badge/license-MIT-%230172ad)](https://github.com/picocss/pico/blob/master/LICENSE.md)
+[![License](https://img.shields.io/badge/license-MIT-%230172ad)](https://github.com/Yohn/PicoCSS/blob/master/LICENSE.md)
-[![Twitter URL](https://img.shields.io/twitter/url/https/twitter.com/picocss.svg?style=social&label=Follow%20%40picocss)](https://twitter.com/picocss)
+<!-- [![Twitter URL](https://img.shields.io/twitter/url/https/twitter.com/picocss.svg?style=social&label=Follow%20%40picocss)](https://twitter.com/picocss) -->
+
+## Yohns Updated Version
+I'm not sure if the original [Pico CSS](https://github.com/picocss/pico) repository is abandoned or not, but I really liked what they had to offer, and wanted to help not let this awesomely simple and easy to use front end framework disappear, so I merged as many of open pull requests that fixed some issues, and / or enhanced the project that were available at the time. I'll try to help keep it viable and do some bug fixes if any arise, and would alway appreciate anyone elses help to continue keeping this alive!
+
+You can see the new features I, and many others have created pull requests for by going to [Yohns Pico CSS](https://yohn.github.io/PicoCSS). This page just has the demos of most of the features I have merged, or added to the project.
+
+## Extras Built on top of PicoCSS
+ - [Alert, Confirm, and Prompt Dialogs](https://github.com/Yohn/PicoCSS-Datatables/blob/main/src/CustomDialog.js) (Will work on that more later, but it works good!)
+ - [YoSelect](https://github.com/Yohn/YoSelect) Searchable `<select>` options, with tagging, image support, and a lot more!
+ - [PicoCSS-WYSIWYG](https://github.com/Yohn/PicoCSS-WYSIWYG) Simple editor wih card, accordion, image, links, lists, headers and more
+ - [PicoCSS-Datatables](https://github.com/Yohn/PicoCSS-Datatables) Searchable, sortable, editable, filterable table data helper.
 
 ## Minimal CSS Framework for Semantic HTML
 
@@ -38,13 +49,23 @@ With just the right amount of everything, Pico is great starting point for a cle
 
 ## Table of contents
 
-- [Quick start](#quick-start)
+1. [Yohns Updated Version](#yohns-updated-version)
-- [Class-less version](#class-less-version)
+2. [Extras Built on top of PicoCSS](#extras-built-on-top-of-picocss)
-- [Limitations](#limitations)
+3. [Minimal CSS Framework for Semantic HTML](#minimal-css-framework-for-semantic-html)
-- [Documentation](#documentation)
+4. [What’s new in v2?](#whats-new-in-v2)
-- [Browser Support](#browser-support)
+5. [A Superpowered HTML Reset](#a-superpowered-html-reset)
-- [Contributing](#contributing)
+6. [Table of contents](#table-of-contents)
-- [Copyright and license](#copyright-and-license)
+7. [Quick start](#quick-start)
+   1. [Install manually](#install-manually)
+   2. [Usage from CDN](#usage-from-cdn)
+   3. [Install with NPM](#install-with-npm)
+   4. [Starter HTML template](#starter-html-template)
+8. [Class-less version](#class-less-version)
+9. [Limitations](#limitations)
+10. [Documentation](#documentation)
+11. [Browser Support](#browser-support)
+12. [Contributing](#contributing)
+13. [Copyright and license](#copyright-and-license)
 
 ## Quick start
 
@@ -52,7 +73,7 @@ There are 4 ways to get started with pico.css:
 
 ### Install manually
 
-[Download Pico](https://github.com/picocss/pico/archive/refs/heads/main.zip) and link `/css/pico.min.css` in the `<head>` of your website.
+[Download Pico](https://github.com/Yohn/PicoCSS/archive/refs/heads/main.zip) and link `/css/pico.min.css` in the `<head>` of your website.
 
 ```html
 <link rel="stylesheet" href="css/pico.min.css" />
@@ -60,23 +81,23 @@ There are 4 ways to get started with pico.css:
 
 ### Usage from CDN
 
-Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@picocss/pico) to link pico.css.
+Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@yohns/picocss) to link pico.css.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.10/css/pico.min.css" />
 ```
 
 ### Install with NPM
 
 ```shell
-npm install @picocss/pico
+npm i @yohns/picocss
 ```
-
+<!--
 Or
 
 ```shell
 yarn add @picocss/pico
-```
+```-->
 
 Then, import Pico into your SCSS file with [@use](https://sass-lang.com/documentation/at-rules/use):
 
@@ -84,11 +105,11 @@ Then, import Pico into your SCSS file with [@use](https://sass-lang.com/document
 @use "pico";
 ```
 
-### Install with Composer
+<!--### Install with Composer
 
 ```shell
 composer require picocss/pico
-```
+```-->
 
 ### Starter HTML template
 
@@ -121,7 +142,7 @@ Use the default `.classless` version if you need centered viewports:
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
+  href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.10/css/pico.classless.min.css"
 />
 ```
 
@@ -130,7 +151,7 @@ Or use the `.fluid.classless` version if you need a fluid container:
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.fluid.classless.min.css"
+  href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.10/css/pico.fluid.classless.min.css"
 />
 ```
 
@@ -145,7 +166,7 @@ Then just write pure HTML, and it should look great:
     <meta name="color-scheme" content="light dark" />
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
+      href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.10/css/pico.classless.min.css"
     />
     <title>Hello, world!</title>
   </head>
@@ -167,6 +188,7 @@ Pico CSS can be used without custom CSS for quick or small projects. However, it
 
 **Getting started**
 
+- [Yohns Pico CSS Additions](https://yohn.github.io/PicoCSS/)
 - [Quick start](https://picocss.com/docs)
 - [Version picker `New`](https://picocss.com/docs/version-picker)
 - [Color schemes](https://picocss.com/docs/color-schemes)
@@ -231,8 +253,8 @@ Pico CSS is designed and tested for the latest stable Chrome, Firefox, Edge, and
 
 ## Contributing
 
-If you are interested in contributing to Pico CSS, please read our [contributing guidelines](https://github.com/picocss/pico/blob/master/.github/CONTRIBUTING.md).
+If you are interested in contributing to Pico CSS, please read our [contributing guidelines](https://github.com/Yohn/PicoCSS/blob/master/.github/CONTRIBUTING.md).
 
 ## Copyright and license
 
-Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).
+Licensed under the [MIT License](https://github.com/Yohn/PicoCSS/blob/master/LICENSE.md).

composer.json

@@ -1,5 +1,5 @@
 {
-  "name": "picocss/pico",
+  "name": "yohn/picocss",
   "description": "Minimal CSS Framework for semantic HTML.",
   "keywords": [
     "css",
@@ -14,17 +14,22 @@
     "scss-framework",
     "semantic"
   ],
-  "homepage": "https://picocss.com",
+  "homepage": "https://github.com/Yohn/PicoCSS",
   "authors": [
     {
       "name": "Lucas Larroche",
       "email": "lucas@larroche.com",
       "homepage": "https://lucaslarroche.com",
       "role": "Developer"
+    },
+    {
+      "name": "John Brittain III",
+      "homepage": "https://github.com/Yohn/PicoCSS",
+      "role": "Developer"
     }
   ],
   "support": {
-    "issues": "https://github.com/picocss/pico/issues/"
+    "issues": "https://github.com/Yohn/PicoCSS/issues/"
   },
   "license": "MIT"
 }

css/pico.colors.css

@@ -1,9 +1,10 @@
 @charset "UTF-8";
 /*!
- * Pico CSS ✨ v2.0.6 (https://picocss.com)
+ * Pico CSS ✨ v2.2.10 (https://github.com/Yohn/PicoCSS)
- * Copyright 2019-2024 - Licensed under MIT
+ * Copyright 2019-2025 - Licensed under MIT
  */
-:root {
+:root,
+:host {
   --pico-color-red-950: #1c0d06;
   --pico-color-red-900: #30130a;
   --pico-color-red-850: #45150c;