npm - @rhavenside/baseline-ui - Versions diffs - 1.0.0 → 1.0.2 - Mend

@rhavenside/baseline-ui 1.0.0 → 1.0.2

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 (19) hide show

package/README.md +71 -174
package/dist/baseline.css +144 -14
package/dist/baseline.css.map +1 -1
package/dist/baseline.js +184 -0
package/dist/baseline.js.map +7 -0
package/dist/baseline.min.css +1 -1
package/dist/baseline.min.js +2 -0
package/dist/baseline.min.js.map +7 -0
package/package.json +14 -12
package/src/components/_card.scss +6 -10
package/src/components/_dropdown.scss +4 -1
package/src/components/_form.scss +157 -6
package/src/js/baseline.js +58 -0
package/src/js/components/alert.js +25 -0
package/src/js/components/dropdown.js +40 -0
package/src/js/components/modal.js +67 -0
package/src/js/components/tabs.js +49 -0
package/src/js/components/tooltip.js +21 -0
package/src/tokens/_z-index.scss +1 -1

package/README.md CHANGED Viewed

@@ -1,43 +1,51 @@
-# Baseline Design Framework
+# Baseline UI
-Ein neutrales, konfigurierbares Design-Framework mit SCSS-Quellen und kompiliertem CSS. Framework-unabhängig und für alle Projekte nutzbar.
+Ein technisches Glas-Design-Framework mit SCSS-Quellen und kompiliertem CSS.
-## 🎯 Philosophie
+## Installation
-Baseline ist **kein Projekt-CSS**, sondern ein **Design-Framework**:
-- ✅ **Darf**: Layout, Grid, Spacing, Typografie, Komponenten liefern
-- ✅ **Darf**: Neutral, konfigurierbar und stabil sein
-- ❌ **Darf nicht**: Projektbezogene Farben, Logos oder Sonderfälle enthalten
-- ❌ **Darf nicht**: App-Logik oder Zustände kennen
-## 📦 Installation
-### CDN (Schnellstart)
+### npm
-```html
-<link rel="stylesheet" href="https://cdn.example.com/baseline/1.0.0/baseline.min.css">
+```bash
+npm install @rhavenside/baseline-ui
 ```
-### npm
+### CDN
-```bash
-npm install @baseline/ui
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rhavenside/baseline-ui@latest/dist/baseline.min.css">
 ```
 ### SCSS Import
 ```scss
-@use '@baseline/ui/src/baseline';
+@use '@rhavenside/baseline-ui/src/baseline';
 ```
 ### CSS Import
 ```css
-@import '@baseline/ui/dist/baseline.css';
+@import '@rhavenside/baseline-ui/dist/baseline.css';
 ```
-## 🚀 Schnellstart
+### JavaScript (Optional)
+```html
+<!-- CDN -->
+<script type="module" src="https://cdn.jsdelivr.net/npm/@rhavenside/baseline-ui@latest/dist/baseline.min.js"></script>
+```
+```javascript
+// ES Module Import
+import '@rhavenside/baseline-ui/dist/baseline.js';
+// Oder manuell
+import { initModal, openModal, closeModal } from '@rhavenside/baseline-ui/dist/baseline.js';
+```
+## Verwendung
+### HTML
 ```html
 <!DOCTYPE html>
@@ -45,62 +53,18 @@ npm install @baseline/ui
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Baseline Framework</title>
-  <link rel="stylesheet" href="dist/baseline.min.css">
+  <title>Baseline UI</title>
+  <link rel="stylesheet" href="node_modules/@rhavenside/baseline-ui/dist/baseline.css">
 </head>
 <body>
   <div class="bl-container">
-    <h1>Willkommen bei Baseline</h1>
+    <h1>Willkommen</h1>
     <button class="bl-btn bl-btn-primary">Klick mich</button>
   </div>
 </body>
 </html>
 ```
-## 📚 Dokumentation
-### Design Tokens
-Alle Design-Tokens sind als CSS Custom Properties verfügbar:
-```css
-:root {
-  --color-primary: #111827;
-  --spacing-md: 1rem;
-  --font-size-base: 1rem;
-  --border-radius-md: 0.25rem;
-  /* ... */
-}
-```
-### Layout-System
-#### Container
-```html
-<div class="bl-container">Maximale Breite mit Padding</div>
-<div class="bl-container-fluid">Volle Breite mit Padding</div>
-```
-#### Flexbox Grid (12 Spalten)
-```html
-<div class="bl-row">
-  <div class="bl-col-6">50% Breite</div>
-  <div class="bl-col-6">50% Breite</div>
-</div>
-```
-#### CSS Grid
-```html
-<div class="bl-grid bl-grid-cols-3 bl-gap-md">
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
-</div>
-```
 ### Komponenten
 #### Button
@@ -122,9 +86,6 @@ Alle Design-Tokens sind als CSS Custom Properties verfügbar:
   <div class="bl-card-body">
     <p>Inhalt</p>
   </div>
-  <div class="bl-card-footer">
-    <button class="bl-btn bl-btn-primary">Aktion</button>
-  </div>
 </div>
 ```
@@ -134,139 +95,75 @@ Alle Design-Tokens sind als CSS Custom Properties verfügbar:
 <div class="bl-form-group">
   <label class="bl-form-label" for="email">E-Mail</label>
   <input type="email" id="email" class="bl-input" placeholder="name@example.com">
-  <span class="bl-form-helper">Wir teilen Ihre E-Mail nicht.</span>
 </div>
 ```
-### Utilities
-#### Spacing
-```html
-<div class="m-md p-lg">Margin & Padding</div>
-<div class="mt-xl mb-sm">Top & Bottom</div>
-```
-#### Text
+#### Grid
 ```html
-<p class="bl-text-center bl-text-lg bl-font-bold">Zentrierter, großer, fetter Text</p>
-```
-#### Display
-```html
-<div class="bl-d-flex bl-justify-center bl-items-center">Flexbox Center</div>
-```
-## 🎨 Theming
-### Dark Mode (Automatisch)
-Das Framework unterstützt automatisch `prefers-color-scheme: dark`:
-```css
-@media (prefers-color-scheme: dark) {
-  /* Dark Mode Styles werden automatisch angewendet */
-}
+<div class="bl-row">
+  <div class="bl-col-6">50% Breite</div>
+  <div class="bl-col-6">50% Breite</div>
+</div>
 ```
-### Manuelles Theme-Toggle
+### Utilities
 ```html
-<html class="bl-theme-dark">
-  <!-- Dark Mode aktiviert -->
-</html>
+<div class="m-md p-lg">Margin & Padding</div>
+<div class="bl-text-center bl-text-lg">Zentrierter Text</div>
+<div class="bl-d-flex bl-justify-center">Flexbox Center</div>
 ```
-Oder via Data-Attribut:
-```html
-<html data-theme="dark">
-  <!-- Dark Mode aktiviert -->
-</html>
-```
+### Design Tokens
-### Custom Properties überschreiben
+Alle Design-Tokens sind als CSS Custom Properties verfügbar:
 ```css
 :root {
-  --color-primary: #3b82f6; /* Eigene Primärfarbe */
-  --spacing-md: 1.25rem;     /* Eigene Abstände */
+  --color-accent: #4A9EFF;
+  --color-bg: #1A1A1A;
+  --spacing-md: 1rem;
+  --font-size-base: 1rem;
 }
 ```
-## ♿ Accessibility
-Baseline ist **WCAG 2.1 AA-konform**:
-- Focus-Styles für alle interaktiven Elemente
-- Screen-Reader-Utilities (`.bl-sr-only`)
-- Skip-Links (`.bl-skip-link`)
-- High-Contrast-Mode Support
-- Reduced Motion Support
-## 🛠️ Entwicklung
-### Build
-```bash
-npm run build
-```
+### JavaScript API
-### Watch Mode
+Baseline UI bietet optionales JavaScript für interaktive Komponenten:
-```bash
-npm run watch
-```
+#### Auto-Initialisierung
-### Storybook
+Alle Komponenten werden automatisch initialisiert, wenn das JavaScript geladen wird:
-```bash
-npm run docs:dev
+```html
+<script type="module" src="node_modules/@rhavenside/baseline-ui/dist/baseline.js"></script>
 ```
-## 📖 Komponenten-Übersicht
+#### Manuelle Verwendung
-- **Button** - Primäre, sekundäre, Outline, Ghost, Link Varianten
-- **Form** - Input, Select, Textarea, Checkbox, Radio, Switch, File, Range
-- **Card** - Header, Body, Footer mit Varianten
-- **Alert** - Info, Success, Warning, Error mit Dismiss-Funktion
-- **Badge** - Varianten + Pills
-- **Modal** - Dialog mit Backdrop, Header, Body, Footer
-- **Dropdown** - Trigger + Menu
-- **Navigation** - Horizontal, Vertical, Tabs, Pills, Breadcrumb, Pagination
-- **Table** - Striped, Bordered, Hover, Responsive
-- **Tooltip** - Alle Positionen (top, right, bottom, left)
-- **Progress** - Determinate, Indeterminate, Striped
-- **Spinner** - Loading-Indikatoren
+```javascript
+import { initModal, openModal, closeModal } from '@rhavenside/baseline-ui/dist/baseline.js';
-## 🌐 Browser-Support
+// Modal öffnen
+openModal('my-modal');
-- Chrome (letzte 2 Versionen)
-- Firefox (letzte 2 Versionen)
-- Safari (letzte 2 Versionen)
-- Edge (letzte 2 Versionen)
+// Modal schließen
+closeModal('my-modal');
-## 📝 Versionierung
+// Manuell initialisieren
+const modal = document.getElementById('my-modal');
+initModal(modal);
+```
-Baseline verwendet [Semantic Versioning](https://semver.org/):
+#### Verfügbare Funktionen
-- **1.x** = Stabil
-- Breaking Changes nur bei Major-Version
-- Changelog wird immer gepflegt
+- **Modal**: `initModal()`, `openModal()`, `closeModal()`
+- **Dropdown**: `initDropdown()`
+- **Tooltip**: `initTooltip()`
+- **Tabs**: `initTabs()`
+- **Alert**: `initAlert()`, `dismissAlert()`
-## 📄 Lizenz
+## Lizenz
 MIT License - siehe [LICENSE](LICENSE) Datei
-## 🤝 Beitragen
-Beiträge sind willkommen! Bitte erstelle ein Issue oder einen Pull Request.
-## 🔗 Links
-- [GitHub](https://github.com/yourusername/baseline)
-- [Dokumentation](https://baseline.example.com)
-- [Changelog](CHANGELOG.md)

package/dist/baseline.css CHANGED Viewed

@@ -120,7 +120,7 @@
 :root {
   --z-index-base: 0;
-  --z-index-dropdown: 1000;
+  --z-index-dropdown: 9999;
   --z-index-sticky: 1020;
   --z-index-fixed: 1030;
   --z-index-modal-backdrop: 1040;
@@ -3066,29 +3066,159 @@ textarea {
   font-size: var(--form-input-font-size);
   line-height: var(--form-input-line-height);
   color: var(--color-text);
-  background: var(--glass-bg-light);
+  background: var(--glass-bg-medium);
   border: 1px solid var(--glass-border-medium);
-  border-radius: var(--tech-border-radius-sm);
-  backdrop-filter: blur(var(--glass-blur-md));
-  -webkit-backdrop-filter: blur(var(--glass-blur-md));
+  border-radius: var(--tech-border-radius-md);
+  backdrop-filter: blur(var(--glass-blur-lg));
+  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
   transition: var(--transition-base);
   cursor: pointer;
   appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23ffffff' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right var(--form-input-padding-x) center;
   background-size: 0.75rem;
+  box-shadow: var(--glass-shadow-sm);
 }
 .bl-select:focus {
   outline: none;
   border-width: 2px;
   border-color: var(--color-accent);
   background-color: var(--glass-bg-medium);
+  box-shadow: var(--glass-shadow-md), 0 0 0 1px var(--color-accent);
+}
+.bl-select:hover {
+  background-color: var(--glass-bg-heavy);
+  border-color: var(--glass-border-heavy);
 }
 .bl-select:disabled {
   opacity: var(--form-input-opacity-disabled);
   cursor: not-allowed;
   background-color: var(--glass-bg-dark);
+  box-shadow: none;
+}
+.bl-select.bl-select-converted {
+  display: none;
+}
+.bl-select-dropdown {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+.bl-select-dropdown .bl-select-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--form-input-padding-y) var(--form-input-padding-x);
+  font-family: var(--font-family-base);
+  font-size: var(--form-input-font-size);
+  line-height: var(--form-input-line-height);
+  color: var(--color-text);
+  background: var(--glass-bg-medium);
+  border: 1px solid var(--glass-border-medium);
+  border-radius: var(--tech-border-radius-md);
+  backdrop-filter: blur(var(--glass-blur-lg));
+  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
+  transition: var(--transition-base);
+  cursor: pointer;
+  box-shadow: var(--glass-shadow-sm);
+  text-align: left;
+  border: none;
+}
+.bl-select-dropdown .bl-select-toggle::after {
+  display: inline-block;
+  margin-left: var(--spacing-xs);
+  vertical-align: 0.255em;
+  content: "";
+  border-top: 0.3em solid var(--color-text);
+  border-right: 0.3em solid transparent;
+  border-bottom: 0;
+  border-left: 0.3em solid transparent;
+  flex-shrink: 0;
+}
+.bl-select-dropdown .bl-select-toggle:focus {
+  outline: none;
+  border-width: 2px;
+  border-color: var(--color-accent);
+  box-shadow: var(--glass-shadow-md), 0 0 0 1px var(--color-accent);
+}
+.bl-select-dropdown .bl-select-toggle:hover {
+  background-color: var(--glass-bg-heavy);
+  border-color: var(--glass-border-heavy);
+}
+.bl-select-dropdown .bl-select-toggle:disabled {
+  opacity: var(--form-input-opacity-disabled);
+  cursor: not-allowed;
+  background-color: var(--glass-bg-dark);
+}
+.bl-select-dropdown .bl-select-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 999999 !important;
+  display: none;
+  width: 100%;
+  min-width: 100%;
+  padding: var(--spacing-xs) 0;
+  margin: var(--spacing-xs) 0 0 0;
+  font-size: var(--font-size-base);
+  color: var(--color-text);
+  text-align: left;
+  list-style: none;
+  background: var(--glass-bg-medium);
+  backdrop-filter: blur(var(--glass-blur-lg));
+  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
+  border: 1px solid var(--glass-border-medium);
+  border-radius: var(--tech-border-radius-md);
+  overflow: hidden;
+  overflow-y: auto;
+  max-height: 300px;
+  box-shadow: var(--glass-shadow-lg);
+}
+.bl-select-dropdown .bl-select-menu.bl-show {
+  display: block;
+}
+.bl-select-dropdown .bl-select-item {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-sm) var(--spacing-md);
+  clear: both;
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text);
+  text-align: inherit;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: var(--transition-base);
+}
+.bl-select-dropdown .bl-select-item:hover, .bl-select-dropdown .bl-select-item:focus {
+  color: var(--color-text);
+  text-decoration: none;
+  background: var(--glass-bg-heavy);
+}
+.bl-select-dropdown .bl-select-item:active {
+  color: var(--color-text);
+  background: var(--glass-bg-heavy);
+}
+.bl-select-dropdown .bl-select-item.bl-selected {
+  background: var(--glass-bg-heavy);
+  color: var(--color-accent);
+}
+.bl-select-dropdown .bl-select-item.bl-selected::before {
+  content: "✓ ";
+  margin-right: var(--spacing-xs);
+}
+.bl-select-dropdown .bl-select-item.bl-disabled, .bl-select-dropdown .bl-select-item:disabled {
+  color: var(--color-text-muted);
+  pointer-events: none;
+  background-color: transparent;
+  opacity: 0.6;
 }
 .bl-input-error,
@@ -3300,8 +3430,11 @@ textarea {
   transition: var(--transition-base);
   position: relative;
 }
-.bl-card.bl-card-accent {
-  border-left: 2px solid var(--color-accent);
+.bl-card.bl-card-accent-left {
+  border-left: 4px solid var(--color-accent);
+}
+.bl-card.bl-card-accent-right {
+  border-right: 4px solid var(--color-accent);
 }
 .bl-card-header {
@@ -3342,16 +3475,10 @@ textarea {
 .bl-card-primary {
   border-color: var(--color-accent);
 }
-.bl-card-primary.bl-card-accent {
-  border-left-color: var(--color-accent);
-}
 .bl-card-secondary {
   border-color: var(--glass-border-heavy);
 }
-.bl-card-secondary.bl-card-accent {
-  border-left-color: var(--color-secondary);
-}
 .bl-card-shadow {
   box-shadow: var(--glass-shadow-md);
@@ -3703,7 +3830,7 @@ textarea {
   position: absolute;
   top: 100%;
   left: 0;
-  z-index: var(--z-index-dropdown);
+  z-index: 99999 !important;
   display: none;
   min-width: 10rem;
   padding: var(--spacing-xs) 0;
@@ -3718,6 +3845,9 @@ textarea {
   border: 1px solid var(--glass-border-medium);
   border-radius: var(--tech-border-radius-md);
   overflow: hidden;
+  overflow-y: auto;
+  max-height: 300px;
+  box-shadow: var(--glass-shadow-lg);
 }
 .bl-dropdown-menu.bl-show {
   display: block;