mtrl-addons 0.2.2 → 0.2.3

package/dist/styles.css

@@ -0,0 +1,254 @@
+/**
+ * Creates a color with alpha transparency using RGB values
+ * This version uses string.unquote to preserve the rgba function correctly
+ * @param {String} $key - Color token name
+ * @param {Number} $opacity - Opacity value (0-1)
+ * @return {String} rgba CSS function with variable
+ */
+@keyframes placeholder-pulse {
+  0%, 100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+@keyframes fade-in {
+  from {
+    opacity: 0.6;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes item-updated {
+  0% {
+    background-color: rgba(var(--mtrl-sys-color-primary-rgb), 0.25);
+    box-shadow: inset 0 0 0 2px rgba(var(--mtrl-sys-color-primary-rgb), 0.4);
+  }
+  100% {
+    background-color: transparent;
+    box-shadow: inset 0 0 0 2px transparent;
+  }
+}
+.mtrl-vlist {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 100px;
+  background-color: var(--mtrl-sys-color-surface);
+  border: 2px solid var(--mtrl-sys-color-outline-variant);
+  border-radius: 3px;
+  transition: background-color 400ms cubic-bezier(0.2, 0, 0, 1);
+  contain: layout style paint;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
+.mtrl-vlist--selection {
+  cursor: pointer;
+}
+.mtrl-vlist--selection .mtrl-viewport-item:hover {
+  background-color: rgba(var(--mtrl-sys-color-on-surface-variant-rgb), 0.1);
+}
+.mtrl-vlist--selection .mtrl-viewport-item--selected,
+.mtrl-vlist--selection .mtrl-viewport-item--selected:hover {
+  background-color: var(--mtrl-sys-color-secondary-container);
+  color: var(--mtrl-sys-color-on-secondary-container);
+  transition: background-color 400ms cubic-bezier(0.2, 0, 0, 1), color 400ms cubic-bezier(0.2, 0, 0, 1);
+}
+.mtrl-vlist--selection .mtrl-viewport-item--selected .mtrl-vlist-item-leading, .mtrl-vlist--selection .mtrl-viewport-item--selected .mtrl-vlist-item-trailing, .mtrl-vlist--selection .mtrl-viewport-item--selected .mtrl-vlist-item-supporting, .mtrl-vlist--selection .mtrl-viewport-item--selected .mtrl-vlist-item-overline, .mtrl-vlist--selection .mtrl-viewport-item--selected .mtrl-vlist-item-meta,
+.mtrl-vlist--selection .mtrl-viewport-item--selected:hover .mtrl-vlist-item-leading,
+.mtrl-vlist--selection .mtrl-viewport-item--selected:hover .mtrl-vlist-item-trailing,
+.mtrl-vlist--selection .mtrl-viewport-item--selected:hover .mtrl-vlist-item-supporting,
+.mtrl-vlist--selection .mtrl-viewport-item--selected:hover .mtrl-vlist-item-overline,
+.mtrl-vlist--selection .mtrl-viewport-item--selected:hover .mtrl-vlist-item-meta {
+  color: var(--mtrl-sys-color-on-secondary-container);
+  transition: color 400ms cubic-bezier(0.2, 0, 0, 1);
+}
+.mtrl-vlist--disabled {
+  pointer-events: none;
+  opacity: 0.38;
+  transition: opacity 400ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.mtrl-viewport {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.mtrl-viewport-items {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 8px 0;
+  will-change: transform;
+}
+
+.mtrl-viewport-item {
+  user-select: none;
+  opacity: 1;
+  transition: opacity 400ms cubic-bezier(0.2, 0, 0, 1);
+  will-change: transform;
+}
+.mtrl-viewport-item--replaced {
+  animation: fade-in 0.3s ease-out;
+}
+.mtrl-viewport-item--updated, .mtrl-viewport-item--updated > * {
+  animation: item-updated 0.6s ease-out;
+}
+.mtrl-viewport-item .item--updated {
+  animation: item-updated 0.6s ease-out;
+}
+
+.mtrl-viewport-item {
+  padding: 11px 12px;
+  display: flex;
+  align-items: start;
+  transition: background-color 0.2s ease;
+  min-height: 48px;
+  left: 0;
+  right: 0;
+  width: 100%;
+  will-change: transform;
+  contain: layout style;
+  gap: 16px;
+  color: var(--mtrl-sys-color-on-surface);
+  overflow: hidden;
+}
+
+.mtrl-viewport-item__avatar,
+.mtrl-viewport-item__image {
+  width: 40px;
+  height: 40px;
+  margin-top: 4px;
+  border-radius: 50%;
+  background-color: var(--mtrl-sys-color-primary-container);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  flex-shrink: 0;
+}
+
+.mtrl-viewport-item__details {
+  flex: 1;
+  min-width: 0;
+  margin-left: 12px;
+}
+
+.mtrl-viewport-item__headline {
+  font-weight: 500;
+}
+
+.mtrl-viewport-item__text {
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mtrl-viewport-item__meta {
+  color: var(--mtrl-sys-color-on-surface-variant);
+  font-size: 12px;
+  margin-top: 2px;
+}
+
+.mtrl-viewport-item--placeholder {
+  opacity: 0.6;
+  animation: placeholder-pulse 2s ease-in-out infinite;
+}
+.mtrl-viewport-item--placeholder .mtrl-viewport-item__headline,
+.mtrl-viewport-item--placeholder .mtrl-viewport-item__text,
+.mtrl-viewport-item--placeholder .mtrl-viewport-item__meta {
+  position: relative;
+  display: inline-block;
+  font-size: 0.8em;
+  color: transparent;
+  background-color: var(--mtrl-sys-color-on-surface);
+  border-radius: 0.1em;
+  opacity: 0.4;
+  text-decoration: none;
+  line-height: 1;
+  padding: 0 0 0.05em;
+  vertical-align: middle;
+}
+.mtrl-viewport-item--placeholder .mtrl-viewport-item__text,
+.mtrl-viewport-item--placeholder .mtrl-viewport-item__meta {
+  margin-top: 0.2em;
+}
+.mtrl-viewport-item--placeholder .mtrl-viewport-item__meta {
+  font-size: 10px;
+}
+.mtrl-viewport-item--placeholder .mtrl-viewport-item__user-headline,
+.mtrl-viewport-item--placeholder .mtrl-viewport-item__user-text {
+  text-transform: capitalize;
+}
+.mtrl-viewport-item--placeholder .mtrl-viewport-item__avatar {
+  background-color: var(--mtrl-sys-color-primary-container);
+  color: var(--mtrl-sys-color-primary-container);
+  opacity: 1;
+}
+
+.mtrl-viewport__scrollbar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 8px;
+  height: 100%;
+  padding: 0;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  cursor: pointer;
+  z-index: 10;
+}
+.mtrl-viewport__scrollbar--visible, .mtrl-viewport__scrollbar--dragging, .mtrl-viewport__scrollbar:hover {
+  opacity: 1;
+}
+.mtrl-viewport__scrollbar:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+.mtrl-viewport__scrollbar-thumb {
+  position: absolute;
+  top: 0;
+  width: 6px;
+  padding: 1px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  will-change: transform;
+  cursor: grab;
+  transition: background 0.2s ease;
+}
+.mtrl-viewport__scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.5);
+}
+.mtrl-viewport__scrollbar-thumb:active, .mtrl-viewport__scrollbar-thumb--dragging {
+  cursor: grabbing;
+  background: rgba(0, 0, 0, 0.6);
+  transition: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  .mtrl-viewport__scrollbar {
+    background: transparent;
+  }
+  .mtrl-viewport__scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.4);
+  }
+  .mtrl-viewport__scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.6);
+  }
+  .mtrl-viewport__scrollbar-thumb:active, .mtrl-viewport__scrollbar-thumb--dragging {
+    background: rgba(255, 255, 255, 0.4);
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  .mtrl-viewport-item {
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+/*# sourceMappingURL=styles.css.map */

package/dist/styles.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../mtrl/src/styles/abstract/_theme.scss","../src/styles/components/_vlist.scss"],"names":[],"mappings":"AAkDA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACpBA;EACI;IAEI;;EAEJ;IACI;;;AAIR;EACI;IACI;;EAEJ;IACI;;;AAIR;EACI;IACI;IACA;;EAEJ;IACI;IACA;;;AAQR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YAjDY;EAoDZ;EACA;EACA;;AAGA;EACI;;AACA;EACI;;AAGJ;AAAA;EAEI;EACA;EACA;;AASI;AAAA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA,YAnFD;;AA0Ff;EACI;EACA;EACA,YA3Fa;;;AAmGrB;EACI;EACA;EACA;EACA;;AAGA;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA,YAtHiB;EAuHjB;;AAEA;EACI;;AAGJ;EAEI;;AAIJ;EACI;;;AAIR;EACI;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EAEI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAOJ;EACI;EACA;;AAGA;AAAA;AAAA;EAGI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;AAAA;EAEI;;AAGJ;EACI;;AAIJ;AAAA;EAEI;;AAIJ;EACI;EACA;EACA;;;AAQR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EAGI;;AAGJ;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EAEI;EACA;EACA;;;AASZ;EACI;IACI;;EAEA;IACI;;EAEA;IACI;;EAGJ;IAEI;;;AAWhB;EACI;IACI;IACA;IACA","file":"styles.css"}

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "mtrl-addons",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Additional components and utilities for the mtrl system, featuring forms, specialized elements, and extended functionality for modern applications",
   "type": "module",
   "main": "index.ts",
+  "files": [
+    "dist",
+    "src/styles"
+  ],
   "scripts": {
     "build": "bun run ./build.js",
     "build:app": "bun run ../mtrl-app/build.js",

package/.cursorrules

@@ -1,117 +0,0 @@
-# mtrl-addons Package Development Rules
-
-## Package Overview
-
-mtrl-addons is an extension library for the mtrl Material Design 3 component system, providing specialized elements and extended functionality for modern applications. It maintains the same "less is more" philosophy with zero external dependencies (mtrl as peer dependency only).
-
-## Environment & Architecture
-
-- Part of workspace alongside mtrl and mtrl-app packages
-- mtrl-app serves as the information hub with documentation and showcases
-- Follows mtrl core architecture patterns and conventions
-- Primary dependency: mtrl
-
-## Development Philosophy
-
-- Follow "less is more" philosophy - minimalist but complete
-- Optimize for size, memory usage, and speed
-- Keep modules small and reusable for bundling
-- Find root causes and fix problems elegantly with minimal code
-- Avoid over-engineering and workarounds
-
-## Pre-Development Checklist
-
-1. Check if functionality already exists in mtrl (mtrl/src/core)
-2. Check mtrl styles system (mtrl/src/styles) before creating new styles
-3. Create tests first (mtrl-addons/test/) - test-driven development
-4. Use mtrl-app/docs for all documentation (no .md files in this package)
-
-## Code Standards
-
-### TypeScript & Structure
-
-- Use TypeScript for all components
-- Follow mtrl component and core structure conventions
-- Use pipe pattern for core and component composition
-- Add comprehensive TypeDoc comments for all public APIs
-- Maintain zero external dependencies policy
-
-### CSS & Styling
-
-- No inline CSS - use external SCSS files in src/styles/
-- Follow BEM naming: mtrl-component\_\_element--modifier
-- Use mtrl styles system as foundation
-
-### File Management
-
-- Prefer editing existing files over creating new ones
-- Avoid hyphens in filenames if possible
-- Prefer short filenames if clear enough
-- If you need to create html or js debugging files, just ./debugging folder (will be .git ignored)
-- No summary .md files for coding sessions
-- Component and Core usual ts files: index, main(module name), types, constant, api(special feature), features
-- If features become to large, create a folder and split the file by concern ans move api in it if appropriate
-
-### Component Development
-
-- Follow established mtrl component patterns (config, types, constants, features)
-- Always use functional composition over class inheritance
-- Implement proper lifecycle management
-- Ensure accessibility compliance - this is important!
-- Focus on the specific issue when fixing bugs - avoid enhancements during fixes
-
-## Testing Rules
-
-- Use Bun test runner for all tests
-- Mock components to avoid circular dependencies
-- Always use JSDOM for DOM testing
-- Comprehensive but lightweight tests
-- Follow test-first development approach
-
-## Showcase & Documentation
-
-- Create showcases in mtrl-app/client/content only and follow the hierarchy
-- Always use mtrl components via layout system (mtrl-app/docs/layout/usages.md)
-- Prefer array-based layout schema
-- Format schema following the formatting convention (mtrl-app/docs/core/layout/array-schema.md)
-- Avoid manual DOM element creation in showcases
-- Never inline CSS in showcases
-- Focus on demonstrating component capabilities
-- Keep the showcases small, maintainable and readable
-
-## Build & Deployment
-
-- Build using `bun run build:app` not `bun run build`
-- Fix TypeScript declaration errors immediately
-- Do not start development servers (bun/node)
-- Follow conventional commit format
-- Use `bun run build` for package builds
-- Ensure compatibility with both ES modules and CommonJS
-
-## Performance & Optimization
-
-- When enhancing/optimizing/refactoring: focus on size, memory usage, and speed
-- Minimize bundle size impact
-- Avoid unnecessary re-renders or DOM manipulations
-- Use efficient algorithms and data structures
-- Design for tree-shaking compatibility
-
-## Extension Development
-
-- Build upon mtrl core without duplicating functionality
-- Create specialized components not found in base mtrl package
-- Ensure seamless integration with mtrl component ecosystem
-- Maintain API consistency with mtrl patterns
-- Design for modularity - components should be importable individually
-
-## Prohibited Actions
-
-- Do not use React (pure TypeScript/JavaScript library)
-- Do not create markdown documentation for enhancements
-- Do not run server commands
-- Do not create workarounds or hacks
-- Do not duplicate mtrl core functionality
-- Do not enhance during bug fixes - stay focused on the issue
-- Do not harcode prefix
-- Do not use global Window object to store things
-- Do not build using bun run build (this is used for package build, use bun run build:app)

package/AI.md

@@ -1,39 +0,0 @@
-# AI Assistant Guide
-
-## 👋 Hello AI Assistant!
-
-This project uses **CLAUDE.md** as the primary development guide and documentation for AI assistants.
-
-### If you are Claude:
-→ **See [CLAUDE.md](./CLAUDE.md)** for complete development guidelines
-
-### If you are another AI assistant:
-→ **See [CLAUDE.md](./CLAUDE.md)** for complete development guidelines
-
----
-
-## Quick Links
-
-- **[CLAUDE.md](./CLAUDE.md)** - Complete development guide
-  - Project overview and architecture
-  - VList component with virtual scrolling
-  - Viewport system for virtual positioning
-  - Layout schema for declarative UI (JSX-like)
-  - Gesture system for touch interactions
-  - Development philosophy and standards
-  - TypeScript and SCSS guidelines
-  - Testing strategy and performance benchmarks
-  - Integration with mtrl core
-  - Git commit/push rules
-
-- **[mtrl](../mtrl/CLAUDE.md)** - Core Material Design 3 library
-- **[mtrl-app](../mtrl-app/.cursorrules)** - Documentation and showcase
-
----
-
-**Package:** mtrl-addons - Extended Components for mtrl  
-**Philosophy:** "Less is more" - Zero dependencies (mtrl peer only)  
-**Key Features:** VList (virtual list), Viewport system, Layout schema, Gesture handling  
-**Documentation:** Everything you need is in CLAUDE.md
-
-Enjoy building with mtrl-addons! 🚀