@mhmo91/schmancy 0.9.3 → 0.9.5

package/src/tabs/Readme.md

@@ -1,397 +0,0 @@
-# Schmancy Tabs Component
-
-A versatile tab system with support for both traditional tab switching and scroll-based navigation modes.
-
-## Overview
-
-The Schmancy tabs system provides two distinct modes:
-- **Traditional tabs**: Click to switch between tab content panels
-- **Scroll navigation**: Automatically updates active tab based on scroll position
-- **Responsive design**: Adapts to different screen sizes with overflow handling
-- **Context-aware**: Uses Lit context for coordinated tab-content communication
-- **TypeScript support**: Complete type safety with proper interfaces
-
-## Installation
-
-```typescript
-import '@schmancy/tabs'
-// or
-import { SchmancyTabGroup, SchmancyTab } from '@schmancy/tabs'
-```
-
-## Basic Usage
-
-### Traditional Tab Mode (Default)
-
-```html
-<schmancy-tab-group activeTab="overview">
-  <schmancy-tab label="Overview" value="overview">
-    <div class="p-4">
-      <h2>Project Overview</h2>
-      <p>This is the overview content of the project.</p>
-    </div>
-  </schmancy-tab>
-
-  <schmancy-tab label="Details" value="details">
-    <div class="p-4">
-      <h2>Project Details</h2>
-      <p>Detailed information about the project specifications.</p>
-    </div>
-  </schmancy-tab>
-
-  <schmancy-tab label="Settings" value="settings">
-    <div class="p-4">
-      <h2>Project Settings</h2>
-      <p>Configure your project settings here.</p>
-    </div>
-  </schmancy-tab>
-</schmancy-tab-group>
-```
-
-### Scroll Navigation Mode
-
-Perfect for long-form content with automatic tab highlighting based on scroll position:
-
-```html
-<schmancy-tab-group mode="scroll" activeTab="introduction">
-  <schmancy-tab label="Introduction" value="introduction">
-    <section class="min-h-screen p-8">
-      <h1>Introduction</h1>
-      <p>Long content section that spans the viewport...</p>
-    </section>
-  </schmancy-tab>
-
-  <schmancy-tab label="Getting Started" value="getting-started">
-    <section class="min-h-screen p-8">
-      <h1>Getting Started</h1>
-      <p>Another long content section...</p>
-    </section>
-  </schmancy-tab>
-
-  <schmancy-tab label="Advanced" value="advanced">
-    <section class="min-h-screen p-8">
-      <h1>Advanced Topics</h1>
-      <p>Advanced content section...</p>
-    </section>
-  </schmancy-tab>
-</schmancy-tab-group>
-```
-
-## Properties
-
-### SchmancyTabGroup
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `mode` | `'tabs' \| 'scroll'` | `'tabs'` | Tab behavior mode |
-| `activeTab` | `string` | `undefined` | Currently active tab value |
-| `rounded` | `boolean` | `true` | Whether tab navigation has rounded corners |
-
-### SchmancyTab
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `label` | `string` | `undefined` | Display label for the tab |
-| `value` | `string` | `undefined` | Unique identifier for the tab |
-| `active` | `boolean` | `false` | Whether this tab is currently active |
-
-## Types
-
-```typescript
-type TSchmancyTabsMode = 'scroll' | 'tabs'
-
-interface TabChangedEvent extends CustomEvent {
-  detail: string // The active tab value
-}
-```
-
-## Events
-
-### tab-changed
-
-The tab group dispatches a `tab-changed` event when the active tab changes:
-
-```typescript
-// Event handling
-tabGroup.addEventListener('tab-changed', (e: TabChangedEvent) => {
-  console.log('Active tab:', e.detail)
-
-  // Update URL or perform other actions based on tab change
-  if (history.replaceState) {
-    history.replaceState(null, null, `#${e.detail}`)
-  }
-})
-```
-
-## Advanced Examples
-
-### Documentation Site Navigation
-
-```html
-<schmancy-tab-group mode="scroll" class="h-screen">
-  <schmancy-tab label="API Reference" value="api">
-    <div class="p-8">
-      <h1>API Reference</h1>
-      <div class="space-y-6">
-        <section id="properties">
-          <h2>Properties</h2>
-          <!-- Properties documentation -->
-        </section>
-        <section id="methods">
-          <h2>Methods</h2>
-          <!-- Methods documentation -->
-        </section>
-      </div>
-    </div>
-  </schmancy-tab>
-
-  <schmancy-tab label="Examples" value="examples">
-    <div class="p-8">
-      <h1>Examples</h1>
-      <div class="space-y-8">
-        <!-- Example content -->
-      </div>
-    </div>
-  </schmancy-tab>
-
-  <schmancy-tab label="Changelog" value="changelog">
-    <div class="p-8">
-      <h1>Changelog</h1>
-      <!-- Changelog content -->
-    </div>
-  </schmancy-tab>
-</schmancy-tab-group>
-```
-
-### Dashboard with Tab Persistence
-
-```typescript
-@customElement('dashboard-tabs')
-export class DashboardTabs extends LitElement {
-  @state() private activeTab = 'dashboard'
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    // Restore active tab from URL or localStorage
-    const urlHash = window.location.hash.slice(1)
-    const savedTab = localStorage.getItem('dashboard-active-tab')
-    this.activeTab = urlHash || savedTab || 'dashboard'
-  }
-
-  handleTabChanged(e: TabChangedEvent) {
-    this.activeTab = e.detail
-    localStorage.setItem('dashboard-active-tab', e.detail)
-    history.replaceState(null, null, `#${e.detail}`)
-  }
-
-  render() {
-    return html`
-      <schmancy-tab-group
-        .activeTab=${this.activeTab}
-        @tab-changed=${this.handleTabChanged}
-      >
-        <schmancy-tab label="Dashboard" value="dashboard">
-          <dashboard-overview></dashboard-overview>
-        </schmancy-tab>
-
-        <schmancy-tab label="Analytics" value="analytics">
-          <analytics-charts></analytics-charts>
-        </schmancy-tab>
-
-        <schmancy-tab label="Users" value="users">
-          <user-management></user-management>
-        </schmancy-tab>
-
-        <schmancy-tab label="Settings" value="settings">
-          <app-settings></app-settings>
-        </schmancy-tab>
-      </schmancy-tab-group>
-    `
-  }
-}
-```
-
-### Mobile-Responsive Tabs
-
-```html
-<schmancy-tab-group class="w-full">
-  <schmancy-tab label="Posts" value="posts">
-    <div class="grid gap-4 p-4">
-      <article class="bg-white rounded-lg shadow p-6">
-        <h3>Latest Posts</h3>
-        <!-- Post content -->
-      </article>
-    </div>
-  </schmancy-tab>
-
-  <schmancy-tab label="Photos" value="photos">
-    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
-      <!-- Photo grid -->
-    </div>
-  </schmancy-tab>
-
-  <schmancy-tab label="About" value="about">
-    <div class="max-w-2xl mx-auto p-4">
-      <!-- About content -->
-    </div>
-  </schmancy-tab>
-</schmancy-tab-group>
-
-<style>
-  schmancy-tab-group {
-    /* Tab navigation becomes scrollable on mobile */
-    --tab-nav-overflow: auto;
-  }
-
-  @media (max-width: 768px) {
-    schmancy-tab-group {
-      /* Smaller tab padding on mobile */
-      --tab-padding: 0.5rem 0.75rem;
-    }
-  }
-</style>
-```
-
-### Programmatic Tab Control
-
-```typescript
-// Get tab group reference
-const tabGroup = document.querySelector('schmancy-tab-group')
-
-// Change active tab programmatically
-tabGroup.activeTab = 'settings'
-
-// Listen for tab changes
-tabGroup.addEventListener('tab-changed', (e) => {
-  console.log('Tab changed to:', e.detail)
-
-  // Trigger specific actions based on tab
-  switch (e.detail) {
-    case 'analytics':
-      loadAnalyticsData()
-      break
-    case 'users':
-      refreshUserList()
-      break
-    case 'settings':
-      initializeSettingsForm()
-      break
-  }
-})
-
-// Dynamically add tabs
-function addTab(label: string, value: string, content: TemplateResult) {
-  const tab = document.createElement('schmancy-tab')
-  tab.label = label
-  tab.value = value
-  tab.appendChild(content)
-  tabGroup.appendChild(tab)
-}
-```
-
-## Styling and Customization
-
-### CSS Custom Properties
-
-```css
-schmancy-tab-group {
-  /* Tab navigation styling */
-  --tab-bg: var(--md-sys-color-surface);
-  --tab-text: var(--md-sys-color-on-surface);
-  --tab-active-text: var(--md-sys-color-primary);
-  --tab-active-border: var(--md-sys-color-primary);
-
-  /* Spacing and sizing */
-  --tab-padding: 0.75rem 1rem;
-  --tab-border-radius: 9999px; /* rounded-full */
-
-  /* Scroll mode specific */
-  --scroll-nav-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-}
-
-/* Custom tab styling */
-schmancy-tab-group::part(navigation) {
-  background: linear-gradient(to right, #f3f4f6, #e5e7eb);
-}
-
-schmancy-tab-group::part(tab-button) {
-  transition: all 0.2s ease;
-}
-
-schmancy-tab-group::part(tab-button):hover {
-  transform: translateY(-1px);
-}
-```
-
-### Mode-Specific Styling
-
-```css
-/* Traditional tabs mode */
-schmancy-tab-group[mode="tabs"] {
-  --tab-nav-position: static;
-  --tab-nav-shadow: none;
-}
-
-/* Scroll navigation mode */
-schmancy-tab-group[mode="scroll"] {
-  --tab-nav-position: sticky;
-  --tab-nav-top: 0;
-  --tab-nav-z-index: 50;
-  --tab-nav-shadow: var(--scroll-nav-shadow);
-}
-```
-
-## Accessibility Features
-
-### Keyboard Navigation
-- **Tab**: Navigate between tab buttons
-- **Arrow Keys**: Move between tabs within the group
-- **Enter/Space**: Activate focused tab
-- **Home**: Jump to first tab
-- **End**: Jump to last tab
-
-### ARIA Attributes
-The component automatically manages ARIA attributes:
-- `role="tablist"` on the tab navigation
-- `role="tab"` on each tab button
-- `role="tabpanel"` on tab content
-- `aria-selected` state management
-- `aria-controls` linking tabs to content
-- `aria-labelledby` for content-tab association
-
-### Screen Reader Support
-Full screen reader compatibility with proper announcements for:
-- Tab labels and descriptions
-- Active tab changes
-- Number of available tabs
-- Tab activation instructions
-
-## Browser Support
-
-The component uses modern web standards and requires browsers that support:
-- Custom Elements v1
-- Shadow DOM v1
-- ES2015+
-- CSS Custom Properties
-- Intersection Observer (for scroll mode)
-
-For older browsers, consider using appropriate polyfills.
-
-## Performance Considerations
-
-### Scroll Mode Optimization
-- Uses throttled scroll events (1000ms) to prevent excessive updates
-- Intersection Observer for efficient viewport detection
-- Automatic cleanup of event listeners on component disconnect
-
-### Large Tab Sets
-- Tab navigation becomes horizontally scrollable when needed
-- Virtual scrolling for content areas with many tabs
-- Lazy loading of tab content on first activation
-
-## Related Components
-
-- `schmancy-button` - Used internally for tab navigation buttons
-- `schmancy-typography` - Used for tab label styling
-- `schmancy-nav-drawer` - Alternative navigation for mobile layouts

package/src/teleport/readme.md

@@ -1,91 +0,0 @@
-# Mo Kit
-
-Mo Kit is a collection of web components built using Lit Element and RxJS. This project aims to provide a set of reusable components that can enhance the user experience and simplify development in web applications.
-
-## Components
-
-### Mo-Teleport
-
-The `mo-teleport` component allows you to dynamically move elements in the DOM without losing their state. It provides a convenient way to teleport elements from one location to another within your web application. With `mo-teleport`, you can easily create smooth transitions and animations when elements need to be moved around.
-
-#### Usage
-
-```html
-<mo-teleport to="destination">
-  <!-- Elements to be teleported -->
-</mo-teleport>
-```
-
-- The `to` attribute specifies the destination where the elements will be teleported. It can be an element ID or a CSS selector.
-
-### Mo-Animate
-
-The `mo-animate` component provides a simple yet powerful way to add animations to your web application. It leverages the power of RxJS to create smooth and interactive animations that can bring your UI to life. With `mo-animate`, you can easily define animations based on events or time intervals.
-
-#### Usage
-
-```html
-<mo-animate
-  @start="${handleAnimationStart}"
-  @end="${handleAnimationEnd}"
-  .duration="${300}"
-  .easing="${'ease-out'}"
->
-  <!-- Elements to be animated -->
-</mo-animate>
-```
-
-- The `start` and `end` events allow you to listen for animation start and end events respectively.
-- The `duration` attribute specifies the duration of the animation in milliseconds.
-- The `easing` attribute defines the easing function to be used for the animation.
-
-## Getting Started
-
-To use Mo Kit in your project, follow these steps:
-
-1. Install the package using your preferred package manager:
-
-   ```bash
-   npm install mo-kit
-   ```
-
-2. Import the components you want to use in your JavaScript or TypeScript file:
-
-   ```javascript
-   import { MoTeleport, MoAnimate } from "mo-kit";
-   ```
-
-3. Use the components in your HTML templates:
-
-   ```html
-   <mo-teleport to="#destination">
-     <!-- Elements to be teleported -->
-   </mo-teleport>
-
-   <mo-animate
-     @start="${handleAnimationStart}"
-     @end="${handleAnimationEnd}"
-     .duration="${300}"
-     .easing="${'ease-out'}"
-   >
-     <!-- Elements to be animated -->
-   </mo-animate>
-   ```
-
-4. Customize the components and explore their various options according to your specific needs. Refer to the documentation for detailed information on available properties, events, and methods.
-
-## Contributing
-
-Contributions to Mo Kit are welcome! If you would like to contribute, please follow the guidelines outlined in the [CONTRIBUTING.md](CONTRIBUTING.md) file.
-
-## License
-
-Mo Kit is released under the [MIT License](LICENSE).
-
-## Acknowledgments
-
-Mo Kit is built on top of the amazing Lit Element and RxJS libraries. We would like to express our gratitude to the respective development teams for their hard work and dedication.
-
-## Contact
-
-For any questions, suggestions, or feedback, please reach out to the project maintainers at [mo-kit@example.com](mailto:mo-kit@example.com).

package/src/tree/README.md

@@ -1,59 +0,0 @@
-It looks like you're interested in creating a README for a custom web component named `schmancy-tree`. A README file typically includes information about the component's purpose, usage, installation, and possibly some examples. Here's a template you can use and customize according to your specific component's features and requirements:
-
----
-
-# Schmancy Tree Component
-
-## Overview
-
-The `schmancy-tree` component is a customizable tree view designed for web applications. It allows for hierarchical data to be displayed in a structured, collapsible tree format.
-
-## Features
-
-- **Customizable Layout**: Easily style the tree view to match your application's theme.
-- **Expand/Collapse**: Users can expand or collapse branches to view the information that's relevant to them.
-- **Nested Items**: Supports multiple levels of nesting for complex hierarchical data.
-
-## Installation
-
-To use `schmancy-tree` in your project, follow these steps:
-
-1. Install the component via npm:
-   ```
-   npm install schmancy-tree
-   ```
-2. Import the component in your JavaScript file:
-   ```javascript
-   import 'schmancy-tree/schmancy-tree.js'
-   ```
-
-## Usage
-
-Here is a basic example of how to use the `schmancy-tree` component in your HTML:
-
-```html
-<schmancy-tree>
-	<div slot="root">root</div>
-	<schmancy-list>
-		<schmancy-list-item>Item 1.1</schmancy-list-item>
-		<schmancy-list-item>Item 1.2</schmancy-list-item>
-		<schmancy-list-item>Item 1.3</schmancy-list-item>
-	</schmancy-list>
-</schmancy-tree>
-```
-
-## Customization
-
-You can customize the appearance and behavior of `schmancy-tree` using CSS and JavaScript. For detailed documentation on available properties and events, see [Customization Guide](#).
-
-## Contributing
-
-We welcome contributions to the `schmancy-tree` project. Please read our [Contributing Guidelines](#) for more information on how to get involved.
-
-## License
-
-`schmancy-tree` is licensed under the [MIT License](#).
-
----
-
-Feel free to adjust the content to match the actual capabilities and usage of your component. This template is just a starting point.