@rhavenside/baseline-ui 1.0.1 → 1.0.2

package/README.md

@@ -28,6 +28,21 @@ npm install @rhavenside/baseline-ui
 @import '@rhavenside/baseline-ui/dist/baseline.css';
 ```
 
+### 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
@@ -113,6 +128,42 @@ Alle Design-Tokens sind als CSS Custom Properties verfügbar:
 }
 ```
 
+### JavaScript API
+
+Baseline UI bietet optionales JavaScript für interaktive Komponenten:
+
+#### Auto-Initialisierung
+
+Alle Komponenten werden automatisch initialisiert, wenn das JavaScript geladen wird:
+
+```html
+<script type="module" src="node_modules/@rhavenside/baseline-ui/dist/baseline.js"></script>
+```
+
+#### Manuelle Verwendung
+
+```javascript
+import { initModal, openModal, closeModal } from '@rhavenside/baseline-ui/dist/baseline.js';
+
+// Modal öffnen
+openModal('my-modal');
+
+// Modal schließen
+closeModal('my-modal');
+
+// Manuell initialisieren
+const modal = document.getElementById('my-modal');
+initModal(modal);
+```
+
+#### Verfügbare Funktionen
+
+- **Modal**: `initModal()`, `openModal()`, `closeModal()`
+- **Dropdown**: `initDropdown()`
+- **Tooltip**: `initTooltip()`
+- **Tabs**: `initTabs()`
+- **Alert**: `initAlert()`, `dismissAlert()`
+
 ## Lizenz
 
 MIT License - siehe [LICENSE](LICENSE) Datei

package/dist/baseline.css

@@ -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;