npm - rizzo-css - Versions diffs - 0.0.53 → 0.0.55 - Mend

rizzo-css 0.0.53 → 0.0.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (252) hide show

package/scaffold/vanilla/components/tooltip.html CHANGED Viewed

@@ -68,70 +68,7 @@
 </head>
 <body>
   <a href="#main-content" class="skip-link">Skip to main content</a>
-  <header class="container flex flex-wrap items-center justify-between gap-4" style="padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--border);">
-    <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
-    <div class="flex items-center gap-3 flex-wrap">
-      <div class="search" data-search>
-        <div class="search__trigger-wrapper">
-          <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel" data-search-trigger>
-            <svg class="search__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
-            <span class="search__trigger-text">Search</span>
-            <kbd class="search__kbd" aria-hidden="true">
-              <span class="search__kbd-modifier"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" aria-hidden="true"><path d="M4.5 2a2.5 2.5 0 0 0 0 5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a2.5 2.5 0 0 0 0 5A2.5 2.5 0 0 0 7 11.5v-1a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a2.5 2.5 0 0 0 5 0A2.5 2.5 0 0 0 11.5 9h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h1a2.5 2.5 0 0 0 0-5A2.5 2.5 0 0 0 9 4.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1A2.5 2.5 0 0 0 4.5 2M9 7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5zm-3-3v1a.5.5 0 0 1-.5.5h-1A1.5 1.5 0 1 1 6 4.5M11.5 6h-1a.5.5 0 0 1-.5-.5v-1A1.5 1.5 0 1 1 11.5 6M6 11.5v-1a.5.5 0 0 0-.5-.5h-1A1.5 1.5 0 1 0 6 11.5m5.5-1.5h-1a.5.5 0 0 0-.5.5v1a1.5 1.5 0 1 0 1.5-1.5"/></svg></span>
-              <kbd>K</kbd>
-            </kbd>
-          </button>
-        </div>
-        <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
-          <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
-            <h2 id="search-header-title" class="sr-only">Search</h2>
-            <div class="search__header">
-              <div class="search__input-wrapper">
-                <svg class="search__input-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
-                <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
-              </div>
-              <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg>
-              </button>
-            </div>
-            <div class="search__results" role="listbox" aria-label="Search results">
-              <div class="search__empty">
-                <p class="search__empty-text">Start typing to search…</p>
-              </div>
-              <div class="search__results-list" role="group" aria-label="Sample results">
-                <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Getting started</div></a>
-                <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Components</div></a>
-                <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Theming</div></a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <label for="theme-select" class="sr-only">Theme</label>
-      <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
-        <option value="system">System</option>
-        <optgroup label="Dark themes">
-          <option value="github-dark-classic">GitHub Dark Classic</option>
-          <option value="shades-of-purple">Shades of Purple</option>
-          <option value="sandstorm-classic">Sandstorm Classic</option>
-          <option value="rocky-blood-orange">Rocky Blood Orange</option>
-          <option value="minimal-dark-neon-yellow">Minimal Dark Neon Yellow</option>
-          <option value="hack-the-box">Hack The Box</option>
-          <option value="pink-cat-boo">Pink Cat Boo</option>
-        </optgroup>
-        <optgroup label="Light themes">
-          <option value="github-light">GitHub Light</option>
-          <option value="red-velvet-cupcake">Red Velvet Cupcake</option>
-          <option value="orangy-one-light">Orangy One Light</option>
-          <option value="sunflower">Sunflower</option>
-          <option value="green-breeze-light">Green Breeze Light</option>
-          <option value="cute-pink">Cute Pink</option>
-          <option value="semi-light-purple">Semi Light Purple</option>
-        </optgroup>
-      </select>
-      <button type="button" class="btn btn-outline" aria-label="Open settings" onclick="window.openSettings && window.openSettings()">Settings</button>
-    </div>
-  </header>
+  {{NAVBAR_HTML}}
   <!-- Settings panel (same structure as main site; CSS from Rizzo) -->
   <div class="settings" data-settings aria-hidden="true">
@@ -404,6 +341,41 @@
@@ -600,6 +572,41 @@

package/scaffold/vanilla/index.html CHANGED Viewed

@@ -68,70 +68,7 @@
 </head>
 <body>
   <a href="#main-content" class="skip-link">Skip to main content</a>
-  <header class="container flex flex-wrap items-center justify-between gap-4" style="padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--border);">
-    <a href="#" class="font-semibold" style="font-size: var(--font-size-lg); color: var(--text); text-decoration: none;">{{TITLE}}</a>
-    <div class="flex items-center gap-3 flex-wrap">
-      <div class="search" data-search>
-        <div class="search__trigger-wrapper">
-          <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-header-panel" data-search-trigger>
-            <svg class="search__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
-            <span class="search__trigger-text">Search</span>
-            <kbd class="search__kbd" aria-hidden="true">
-              <span class="search__kbd-modifier"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" aria-hidden="true"><path d="M4.5 2a2.5 2.5 0 0 0 0 5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a2.5 2.5 0 0 0 0 5A2.5 2.5 0 0 0 7 11.5v-1a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a2.5 2.5 0 0 0 5 0A2.5 2.5 0 0 0 11.5 9h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h1a2.5 2.5 0 0 0 0-5A2.5 2.5 0 0 0 9 4.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1A2.5 2.5 0 0 0 4.5 2M9 7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5zm-3-3v1a.5.5 0 0 1-.5.5h-1A1.5 1.5 0 1 1 6 4.5M11.5 6h-1a.5.5 0 0 1-.5-.5v-1A1.5 1.5 0 1 1 11.5 6M6 11.5v-1a.5.5 0 0 0-.5-.5h-1A1.5 1.5 0 1 0 6 11.5m5.5-1.5h-1a.5.5 0 0 0-.5.5v1a1.5 1.5 0 1 0 1.5-1.5"/></svg></span>
-              <kbd>K</kbd>
-            </kbd>
-          </button>
-        </div>
-        <div class="search__overlay" id="search-header-panel" aria-hidden="true" role="dialog" aria-modal="true" data-search-overlay>
-          <div class="search__panel" role="dialog" aria-modal="true" aria-labelledby="search-header-title" aria-hidden="true" tabindex="-1">
-            <h2 id="search-header-title" class="sr-only">Search</h2>
-            <div class="search__header">
-              <div class="search__input-wrapper">
-                <svg class="search__input-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
-                <input type="search" class="search__input" placeholder="Search…" aria-label="Search" />
-              </div>
-              <button type="button" class="search__close-btn" aria-label="Close search" data-search-close>
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg>
-              </button>
-            </div>
-            <div class="search__results" role="listbox" aria-label="Search results">
-              <div class="search__empty">
-                <p class="search__empty-text">Start typing to search…</p>
-              </div>
-              <div class="search__results-list" role="group" aria-label="Sample results">
-                <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Getting started</div></a>
-                <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Components</div></a>
-                <a href="#" class="search__result-item" tabindex="-1"><div class="search__result-category">Docs</div><div class="search__result-title">Theming</div></a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <label for="theme-select" class="sr-only">Theme</label>
-      <select id="theme-select" class="form-control" style="width: auto; min-width: 12rem;" aria-label="Theme">
-        <option value="system">System</option>
-        <optgroup label="Dark themes">
-          <option value="github-dark-classic">GitHub Dark Classic</option>
-          <option value="shades-of-purple">Shades of Purple</option>
-          <option value="sandstorm-classic">Sandstorm Classic</option>
-          <option value="rocky-blood-orange">Rocky Blood Orange</option>
-          <option value="minimal-dark-neon-yellow">Minimal Dark Neon Yellow</option>
-          <option value="hack-the-box">Hack The Box</option>
-          <option value="pink-cat-boo">Pink Cat Boo</option>
-        </optgroup>
-        <optgroup label="Light themes">
-          <option value="github-light">GitHub Light</option>
-          <option value="red-velvet-cupcake">Red Velvet Cupcake</option>
-          <option value="orangy-one-light">Orangy One Light</option>
-          <option value="sunflower">Sunflower</option>
-          <option value="green-breeze-light">Green Breeze Light</option>
-          <option value="cute-pink">Cute Pink</option>
-          <option value="semi-light-purple">Semi Light Purple</option>
-        </optgroup>
-      </select>
-      <button type="button" class="btn btn-outline" aria-label="Open settings" onclick="window.openSettings && window.openSettings()">Settings</button>
-    </div>
-  </header>
+  {{NAVBAR_HTML}}
   <!-- Settings panel (same structure as main site; CSS from Rizzo) -->
   <div class="settings" data-settings aria-hidden="true">
@@ -404,6 +341,41 @@
@@ -451,8 +423,8 @@
           </div>
           <div class="home__card home__card--featured">
             <span class="home__card-icon" aria-hidden="true">Components</span>
-            <h3>31 ready components</h3>
-            <p>Navbar, Settings, Theme Switcher, Font Switcher, Modal, Dropdown, Tabs, Forms, and more — all accessible and themeable.</p>
+            <h3>All components</h3>
+            <p>Navbar, Settings, Theme Switcher, Font Switcher, Modal, Dropdown, Tabs, Forms, Slider, Sheet, and more — all accessible and themeable.</p>
           </div>
         </div>
         <h3 class="home__features-supporting-label">And more</h3>
@@ -690,6 +662,41 @@

package/scaffold/vanilla/variants/dashboard/index.html ADDED Viewed

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="{{DATA_THEME}}">{{THEME_LIST_COMMENT}}
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>{{TITLE}}</title>
+  <link rel="stylesheet" href="{{LINK_HREF}}" />
+</head>
+<body>
+  <a href="#main-content" class="skip-link">Skip to main content</a>
+  <div class="dashboard">
+    <aside class="dashboard__sidebar" aria-label="Dashboard navigation">
+      <nav class="dashboard__nav">
+        <a href="index.html" class="dashboard__nav-link dashboard__nav-link--active" aria-current="page">Dashboard</a>
+        <a href="index.html" class="dashboard__nav-link">Items</a>
+        <a href="index.html" class="dashboard__nav-link">Settings</a>
+      </nav>
+    </aside>
+    <main id="main-content" class="dashboard__main">
+      <header class="dashboard-page__header">
+        <h1>Dashboard</h1>
+        <p>Overview of your app. Replace with your own content.</p>
+      </header>
+      <section aria-labelledby="stats-heading">
+        <h2 id="stats-heading" class="sr-only">Key metrics</h2>
+        <div class="dashboard-page__stats-grid" style="display:grid;grid-template-columns:repeat(auto-fill, minmax(12rem, 1fr));gap:var(--spacing-4);margin-bottom:var(--spacing-6);">
+          <div class="card"><div class="card__body"><span class="card__label">Total users</span><span class="card__value">1,234</span></div></div>
+          <div class="card"><div class="card__body"><span class="card__label">Revenue</span><span class="card__value">$12,345</span></div></div>
+          <div class="card"><div class="card__body"><span class="card__label">Active</span><span class="card__value">89%</span></div></div>
+        </div>
+      </section>
+    </main>
+  </div>
+  <style>
+    .dashboard { display: flex; min-height: 100vh; }
+    .dashboard__sidebar { width: 16rem; flex-shrink: 0; border-right: 1px solid var(--border); padding: var(--spacing-4); background: var(--background-alt); }
+    .dashboard__nav { display: flex; flex-direction: column; gap: var(--spacing-1); }
+    .dashboard__nav-link { display: block; padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-md); color: var(--text); text-decoration: none; }
+    .dashboard__nav-link:hover { background: var(--background); }
+    .dashboard__nav-link--active { background: var(--accent); color: var(--accent-text); }
+    .dashboard__main { flex: 1; padding: var(--spacing-6); }
+    @media (max-width: 768px) { .dashboard { flex-direction: column; } .dashboard__sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); } }
+  </style>
+</body>
+</html>

package/scaffold/vanilla/variants/docs/index.html ADDED Viewed

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="{{DATA_THEME}}">{{THEME_LIST_COMMENT}}
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>{{TITLE}}</title>
+  <link rel="stylesheet" href="{{LINK_HREF}}" />
+</head>
+<body>
+  <a href="#main-content" class="skip-link">Skip to main content</a>
+  <div class="docs-layout">
+    <aside class="docs-layout__sidebar" aria-label="Documentation navigation">
+      <nav class="docs-layout__nav">
+        <a href="index.html" class="docs-layout__nav-link">Home</a>
+        <a href="getting-started.html" class="docs-layout__nav-link">Getting started</a>
+      </nav>
+    </aside>
+    <main id="main-content" class="docs-layout__main">
+      <h1>Documentation</h1>
+      <p>Welcome to your docs. Add more pages and link them from the sidebar.</p>
+      <ul>
+        <li><a href="getting-started.html">Getting started</a></li>
+      </ul>
+    </main>
+  </div>
+  <style>
+    .docs-layout { display: flex; min-height: 100vh; }
+    .docs-layout__sidebar { width: 16rem; flex-shrink: 0; border-right: 1px solid var(--border); padding: var(--spacing-4); background: var(--background-alt); }
+    .docs-layout__nav { display: flex; flex-direction: column; gap: var(--spacing-1); }
+    .docs-layout__nav-link { display: block; padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-md); color: var(--text); text-decoration: none; }
+    .docs-layout__nav-link:hover { background: var(--background); }
+    .docs-layout__main { flex: 1; padding: var(--spacing-6); max-width: 65ch; }
+    @media (max-width: 768px) { .docs-layout { flex-direction: column; } .docs-layout__sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); } }
+  </style>
+</body>
+</html>