@mhmo91/schmancy 0.4.23 → 0.4.24

package/ai/tabs.md

@@ -1,71 +1,194 @@
 # Schmancy Tabs - AI Reference
 
-```js
-// Basic Tabs
-<schmancy-tabs value="tab1">
-  <schmancy-tab value="tab1" label="Tab 1"></schmancy-tab>
-  <schmancy-tab value="tab2" label="Tab 2"></schmancy-tab>
-  <schmancy-tab value="tab3" label="Tab 3"></schmancy-tab>
+## Components
+
+### schmancy-tab-group
+Container component that manages tab navigation and content display. Supports two modes: "tabs" (traditional tab interface) and "scroll" (scrollspy navigation).
+
+### schmancy-tab
+Individual tab component that must be placed inside schmancy-tab-group. Contains the content for each tab.
+
+## API Reference
+
+### schmancy-tab-group
+
+```typescript
+// Properties
+mode: 'tabs' | 'scroll' = 'tabs' // Navigation mode
+rounded: boolean = true // Apply rounded styling to tab navigation
+activeTab: string // Currently active tab value
+
+// Events
+@tab-changed // Fired when active tab changes, detail contains the active tab value
+
+// Slots
+default // Place schmancy-tab components here
+```
+
+### schmancy-tab
+
+```typescript
+// Properties
+label: string // Tab label displayed in navigation
+value: string // Unique identifier for the tab
+active: boolean // Whether tab is currently active (managed by tab-group)
+
+// Slots
+default // Tab content
+```
+
+## Usage Examples
+
+### Basic Tabs Mode (Default)
+```html
+<schmancy-tab-group activeTab="tab1" @tab-changed=${(e) => console.log('Active tab:', e.detail)}>
+  <schmancy-tab value="tab1" label="Profile">
+    <div class="p-4">
+      <h3>Profile Content</h3>
+      <p>User profile information goes here.</p>
+    </div>
+  </schmancy-tab>
   
-  <div slot="panel" data-tab="tab1">Content for Tab 1</div>
-  <div slot="panel" data-tab="tab2">Content for Tab 2</div>
-  <div slot="panel" data-tab="tab3">Content for Tab 3</div>
-</schmancy-tabs>
-
-// Tabs with Scrolling
-<schmancy-tabs value="tab1" scrollable>
-  <!-- Tab definitions -->
-</schmancy-tabs>
-
-// Tabs Groups (for complex tab structures)
-<schmancy-tabs-group value="tab1" @change=${handleTabChange}>
-  <schmancy-tab value="tab1" label="Tab 1"></schmancy-tab>
-  <schmancy-tab value="tab2" label="Tab 2"></schmancy-tab>
-  <schmancy-tab value="tab3" label="Tab 3"></schmancy-tab>
+  <schmancy-tab value="tab2" label="Settings">
+    <div class="p-4">
+      <h3>Settings Content</h3>
+      <p>Application settings go here.</p>
+    </div>
+  </schmancy-tab>
   
-  <div data-tab="tab1">Content for Tab 1</div>
-  <div data-tab="tab2">Content for Tab 2</div>
-  <div data-tab="tab3">Content for Tab 3</div>
-</schmancy-tabs-group>
-
-// Tabs with Icons
-<schmancy-tabs value="tab1">
-  <schmancy-tab value="tab1">
-    <schmancy-icon icon="home"></schmancy-icon>
-    <span>Home</span>
+  <schmancy-tab value="tab3" label="Security">
+    <div class="p-4">
+      <h3>Security Content</h3>
+      <p>Security options go here.</p>
+    </div>
   </schmancy-tab>
-  <schmancy-tab value="tab2">
-    <schmancy-icon icon="settings"></schmancy-icon>
-    <span>Settings</span>
+</schmancy-tab-group>
+```
+
+### Scroll Mode (Scrollspy)
+```html
+<!-- Navigation stays sticky at top, highlights active section while scrolling -->
+<schmancy-tab-group mode="scroll" activeTab="intro">
+  <schmancy-tab value="intro" label="Introduction">
+    <section class="min-h-screen p-8">
+      <h2>Introduction</h2>
+      <p>Long content that requires scrolling...</p>
+    </section>
+  </schmancy-tab>
+  
+  <schmancy-tab value="features" label="Features">
+    <section class="min-h-screen p-8">
+      <h2>Features</h2>
+      <p>Feature descriptions...</p>
+    </section>
   </schmancy-tab>
-</schmancy-tabs>
-
-// Tab Attributes
-value="tab-id" // Unique identifier for the tab
-label="Tab Label" // Text label (optional if using custom content)
-disabled? // Disabled state
-icon="icon-name" // Icon to display (alternative to using schmancy-icon in content)
-
-// Tab Methods and Events
-tabs.select(value) -> void // Programmatically select a tab
-@change // Fires when tab selection changes with { detail: { value } }
-
-// Examples
-// Basic usage
-<schmancy-tabs value="tab1" @change=${(e) => console.log('Selected tab:', e.detail.value)}>
-  <schmancy-tab value="tab1" label="Info"></schmancy-tab>
-  <schmancy-tab value="tab2" label="Settings"></schmancy-tab>
   
-  <div slot="panel" data-tab="tab1">Information content here</div>
-  <div slot="panel" data-tab="tab2">Settings content here</div>
-</schmancy-tabs>
-
-// Dynamic tabs from data
-${tabData.map(tab => html`
-  <schmancy-tab value=${tab.id} label=${tab.label}></schmancy-tab>
-`)}
-
-${tabData.map(tab => html`
-  <div slot="panel" data-tab=${tab.id}>${tab.content}</div>
-`)}
+  <schmancy-tab value="pricing" label="Pricing">
+    <section class="min-h-screen p-8">
+      <h2>Pricing</h2>
+      <p>Pricing information...</p>
+    </section>
+  </schmancy-tab>
+</schmancy-tab-group>
+```
+
+### Without Rounded Navigation
+```html
+<schmancy-tab-group rounded=${false} activeTab="tab1">
+  <schmancy-tab value="tab1" label="Tab 1">Content 1</schmancy-tab>
+  <schmancy-tab value="tab2" label="Tab 2">Content 2</schmancy-tab>
+</schmancy-tab-group>
+```
+
+### Programmatic Tab Selection
+```javascript
+// In component
+@query('schmancy-tab-group') tabGroup: any;
+
+selectTab(tabValue: string) {
+  this.tabGroup.activeTab = tabValue;
+}
+
+handleTabChange(e: CustomEvent) {
+  console.log('Tab changed to:', e.detail);
+  // Update application state, router, etc.
+}
+
+// In template
+html`
+  <schmancy-tab-group 
+    activeTab=${this.currentTab} 
+    @tab-changed=${this.handleTabChange}
+  >
+    <!-- tabs -->
+  </schmancy-tab-group>
+`
+```
+
+### Dynamic Tabs from Data
+```javascript
+const tabs = [
+  { value: 'overview', label: 'Overview', content: 'Overview content...' },
+  { value: 'details', label: 'Details', content: 'Detailed information...' },
+  { value: 'history', label: 'History', content: 'Historical data...' }
+];
+
+html`
+  <schmancy-tab-group activeTab=${tabs[0].value}>
+    ${tabs.map(tab => html`
+      <schmancy-tab value=${tab.value} label=${tab.label}>
+        <div class="p-4">${tab.content}</div>
+      </schmancy-tab>
+    `)}
+  </schmancy-tab-group>
+`
+```
+
+## Important Notes
+
+1. **Tab Structure**: Each schmancy-tab must have a unique `value` and a `label` for display
+2. **Active Tab**: The `activeTab` property on tab-group controls which tab is visible
+3. **Scroll Mode**: In scroll mode, the navigation becomes sticky and highlights based on scroll position
+4. **Event Handling**: Listen to `@tab-changed` event to react to tab changes
+5. **Styling**: The tab navigation uses theme colors and can be rounded or rectangular
+
+## Common Patterns
+
+### Tabs with Icons (using label slot)
+```html
+<schmancy-tab-group activeTab="home">
+  <schmancy-tab value="home" label="🏠 Home">
+    Home content
+  </schmancy-tab>
+  <schmancy-tab value="settings" label="⚙️ Settings">
+    Settings content
+  </schmancy-tab>
+</schmancy-tab-group>
+```
+
+### Full Page Scroll Navigation
+```html
+<schmancy-tab-group mode="scroll">
+  <schmancy-tab value="section1" label="Section 1">
+    <div style="height: 100vh;">Full height section 1</div>
+  </schmancy-tab>
+  <schmancy-tab value="section2" label="Section 2">
+    <div style="height: 100vh;">Full height section 2</div>
+  </schmancy-tab>
+</schmancy-tab-group>
+```
+
+### Integration with Router
+```javascript
+// React to route changes
+connectedCallback() {
+  super.connectedCallback();
+  // Set active tab based on route
+  this.activeTab = this.getTabFromRoute();
+}
+
+handleTabChange(e: CustomEvent) {
+  // Update route when tab changes
+  this.updateRoute(e.detail);
+}
 ```

package/dist/ai/select.md

@@ -61,6 +61,40 @@
   <!-- Many options -->
 </schmancy-select>
 
+// Different sizes
+<schmancy-select size="sm" label="Small Select">
+  <schmancy-option value="1">Option 1</schmancy-option>
+  <schmancy-option value="2">Option 2</schmancy-option>
+</schmancy-select>
+
+<schmancy-select size="md" label="Medium Select (default)">
+  <schmancy-option value="1">Option 1</schmancy-option>
+  <schmancy-option value="2">Option 2</schmancy-option>
+</schmancy-select>
+
+<schmancy-select size="lg" label="Large Select">
+  <schmancy-option value="1">Option 1</schmancy-option>
+  <schmancy-option value="2">Option 2</schmancy-option>
+</schmancy-select>
+
+// Aligned with input (same size)
+<div style="display: flex; gap: 16px;">
+  <schmancy-input 
+    size="md" 
+    label="First Name" 
+    placeholder="Enter first name">
+  </schmancy-input>
+  
+  <schmancy-select 
+    size="md" 
+    label="Country"
+    placeholder="Select country">
+    <schmancy-option value="us">United States</schmancy-option>
+    <schmancy-option value="uk">United Kingdom</schmancy-option>
+    <schmancy-option value="ca">Canada</schmancy-option>
+  </schmancy-select>
+</div>
+
 // Select Methods
 select.focus() -> void          // Focus the select
 select.blur() -> void           // Remove focus
@@ -80,6 +114,7 @@ required: boolean          // Whether a selection is required
 error: string              // Error message to display
 searchable: boolean        // Whether to allow searching within options
 open: boolean              // Whether the dropdown is open
+size: 'sm' | 'md' | 'lg'   // Size of the select (default: 'md')
 
 // Option Properties
 value: string              // Value of this option