@ticatec/topside-elements 1.0.0

package/dist/general/button/TextButton.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    import type {Size} from "../../types";
+    import type { Snippet } from 'svelte';
+
+    type ButtonType = 'default' | 'primary' | 'secondary' | 'third' | 'forth';
+
+    interface Props {
+        disabled?: boolean;
+        /** 尺寸档位 */
+        size?: Size;
+        label?: string;
+        type?: ButtonType;
+        htmlType?: 'button' | 'submit' | 'reset';
+        onclick?: (event: MouseEvent) => void;
+        style?: string;
+        theme?: string;
+        tooltip?: string;
+        children?: Snippet;
+        tabindex?: number;
+        outer?: boolean;
+        variant?: 'plain' | 'round' | '';
+    }
+
+    let {
+        disabled = false,
+        size = 'medium',
+        label = '',
+        type = 'default',
+        htmlType = 'button',
+        onclick = undefined,
+        style = '',
+        theme,
+        tooltip,
+        children,
+        tabindex = -1,
+        outer = true,
+        variant = 'round'
+    }: Props = $props();
+
+
+    let enableClick = $state(true);
+
+    const handleClick = (e: MouseEvent) => {
+        if (!disabled && enableClick) {
+            enableClick = false;
+            onclick?.(e);
+            setTimeout(() => {
+                enableClick = true;
+            }, 500);
+        }
+        e.stopPropagation();
+    };
+
+
+</script>
+
+<button
+    type={htmlType}
+    class="topside-button text-button {variant} {size} {type} {theme}"
+    class:outer
+    class:no-outer={!outer}
+    {style}
+    class:disabled
+    {disabled}
+    tabindex={disabled ? -1 : tabindex}
+    data-tip={disabled ? null : tooltip}
+    onclick={handleClick}
+>
+    {#if children}
+        {@render children()}
+    {:else if label != null && label.length > 0}
+        <span>{label}</span>
+    {/if}
+</button>

package/dist/general/button/TextButton.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Size } from "../../types";
+import type { Snippet } from 'svelte';
+type ButtonType = 'default' | 'primary' | 'secondary' | 'third' | 'forth';
+interface Props {
+    disabled?: boolean;
+    /** 尺寸档位 */
+    size?: Size;
+    label?: string;
+    type?: ButtonType;
+    htmlType?: 'button' | 'submit' | 'reset';
+    onclick?: (event: MouseEvent) => void;
+    style?: string;
+    theme?: string;
+    tooltip?: string;
+    children?: Snippet;
+    tabindex?: number;
+    outer?: boolean;
+    variant?: 'plain' | 'round' | '';
+}
+declare const TextButton: import("svelte").Component<Props, {}, "">;
+type TextButton = ReturnType<typeof TextButton>;
+export default TextButton;

package/dist/general/button/TextButton_README.md

@@ -0,0 +1,569 @@
+# TextButton Component
+
+A minimalist text-based button component designed for subtle actions, navigation links, and secondary interactions where a full button appearance might be too prominent.
+
+## Features
+
+- **Text-Focused Design**: Clean, minimal appearance emphasizing text content
+- **Multiple Types**: Default, primary, secondary, third, and forth button styles
+- **Size Options**: Big, medium, and small sizes
+- **Tooltip Support**: Built-in tooltip via `data-tip` attribute with markdown support
+- **Keyboard Navigation**: Defaults to `tabindex={-1}` to avoid Tab stops during keyboard navigation; supports explicit `tabindex` override
+- **Event Handling**: Click event support
+- **Accessibility**: Proper semantic button element with disabled state
+- **Custom Styling**: Flexible style customization
+- **Snippet Support**: Custom content via children prop
+
+## Basic Usage
+
+```svelte
+<script>
+import TextButton from '@ticatec/topside-elements/TextButton';
+
+const handleClick = (event) => {
+  console.log('Text button clicked!', event);
+};
+</script>
+
+<TextButton 
+  label="Click Me" 
+  onclick={handleClick} 
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `disabled` | `boolean` | `false` | Whether the button is disabled |
+| `size` | `'big' \| 'medium' \| 'small'` | `'medium'` | Button size |
+| `label` | `string` | `''` | Button text label |
+| `type` | `'default' \| 'primary' \| 'secondary' \| 'third' \| 'forth'` | `'default'` | Button type/style |
+| `onclick` | `(event: MouseEvent) => void` | - | Click event handler |
+| `style` | `string` | `''` | Custom CSS styles |
+| `theme` | `string` | - | Theme variant |
+| `tooltip` | `string` | - | Tooltip text (supports markdown, use `\n` for line breaks) |
+| `children` | `Snippet` | - | Custom content snippet |
+| `tabindex` | `number` | `-1` | Tab index (defaults to -1 so button does not take Tab focus) |
+| `outer` | `boolean` | `true` | Whether to show outer frame/ring when focused or active (defaults to true; set to false to remove focus/active outer frame) |
+| `variant` | `'plain' \| 'round' \| ''` | `'round'` | Button shape variant (defaults to `'round'` for pill-shaped outer frame; `'plain'` for rectangular) |
+
+## Button Types
+
+```svelte
+<!-- Default text button -->
+<TextButton label="Default" type="default" onclick={handleClick} />
+
+<!-- Primary text button -->
+<TextButton label="Primary" type="primary" onclick={handleClick} />
+
+<!-- Secondary text button -->
+<TextButton label="Secondary" type="secondary" onclick={handleClick} />
+
+<!-- Third level text button -->
+<TextButton label="Third" type="third" onclick={handleClick} />
+
+<!-- Fourth level text button -->
+<TextButton label="Fourth" type="forth" onclick={handleClick} />
+```
+
+## Button Sizes
+
+```svelte
+<!-- Small text button -->
+<TextButton label="Small" size="small" onclick={handleClick} />
+
+<!-- Medium text button (default) -->
+<TextButton label="Medium" size="medium" onclick={handleClick} />
+
+<!-- Big text button -->
+<TextButton label="Big" size="big" onclick={handleClick} />
+```
+
+## Tooltip Support
+
+The TextButton component includes built-in tooltip support via the `tooltip` prop. Tooltips are shown automatically when hovering over the button.
+
+```svelte
+<!-- Text button with tooltip -->
+<TextButton label="Save" tooltip="Save your work" type="primary" onclick={handleSave} />
+<TextButton label="Cancel" tooltip="Close without saving" onclick={handleCancel} />
+
+<!-- Multi-line tooltip with markdown -->
+<TextButton
+  label="Delete"
+  type="secondary"
+  tooltip="> **Warning**:\n> This action cannot be undone"
+  onclick={handleDelete}
+/>
+
+<!-- Tooltip is not shown for disabled buttons -->
+<TextButton label="Disabled" tooltip="This won't show" disabled={true} />
+```
+
+**Note**: The `Tooltip` component must be mounted in your app for tooltips to work:
+
+```svelte
+<script>
+  import Tooltip from '@ticatec/topside-elements/Tooltip';
+</script>
+
+<Tooltip />
+<!-- Your app content -->
+```
+
+## Common Use Cases
+
+### Navigation Links
+
+```svelte
+<nav class="breadcrumb">
+  <TextButton label="Home" onclick={() => goto('/')} />
+  <span class="separator">›</span>
+  <TextButton label="Products" onclick={() => goto('/products')} />
+  <span class="separator">›</span>
+  <span>Current Page</span>
+</nav>
+```
+
+### Secondary Actions
+
+```svelte
+<div class="action-group">
+  <Button label="Save" type="primary" onclick={handleSave} />
+  <TextButton label="Cancel" onclick={handleCancel} />
+  <TextButton label="Save as Draft" onclick={handleSaveDraft} />
+</div>
+```
+
+### Tab Navigation
+
+```svelte
+<script>
+let activeTab = 'overview';
+
+const switchTab = (tab) => (event) => {
+  activeTab = tab;
+};
+</script>
+
+<div class="tabs">
+  <TextButton 
+    label="Overview" 
+    type={activeTab === 'overview' ? 'primary' : 'default'}
+    onclick={switchTab('overview')} 
+  />
+  <TextButton 
+    label="Details" 
+    type={activeTab === 'details' ? 'primary' : 'default'}
+    onclick={switchTab('details')} 
+  />
+  <TextButton 
+    label="Reviews" 
+    type={activeTab === 'reviews' ? 'primary' : 'default'}
+    onclick={switchTab('reviews')} 
+  />
+</div>
+```
+
+### Menu Items
+
+```svelte
+<div class="menu">
+  <TextButton label="Profile Settings" onclick={openProfile} />
+  <TextButton label="Account" onclick={openAccount} />
+  <TextButton label="Preferences" onclick={openPreferences} />
+  <TextButton label="Log Out" type="secondary" onclick={logout} />
+</div>
+```
+
+## Event Handling
+
+```svelte
+<script>
+const handleClick = (event) => {
+  console.log('Text button clicked:', event);
+};
+</script>
+
+<TextButton
+  label="Interactive Text"
+  onclick={handleClick}
+/>
+```
+
+## Disabled State
+
+```svelte
+<TextButton 
+  label="Disabled Action" 
+  disabled={true}
+  onclick={handleClick} 
+/>
+```
+
+## Custom Styling
+
+```svelte
+<TextButton 
+  label="Custom Styled"
+  style="
+    color: #007acc;
+    text-decoration: underline;
+    font-weight: bold;
+    padding: 4px 8px;
+  "
+  onclick={handleClick}
+/>
+```
+
+## Snippet Support
+
+Use the `children` prop to provide custom content:
+
+```svelte
+<!-- Custom content instead of label -->
+<TextButton onclick={handleCustomAction}>
+  {#snippet children()}
+    <span class="custom-text">
+      <i class="fas fa-arrow-right"></i>
+      Learn More
+    </span>
+  {/snippet}
+</TextButton>
+
+<!-- Rich content -->
+<TextButton onclick={handleRichAction}>
+  {#snippet children()}
+    <div class="rich-content">
+      <strong>Advanced Options</strong>
+      <small>Configure detailed settings</small>
+    </div>
+  {/snippet}
+</TextButton>
+```
+
+## Advanced Examples
+
+### Conditional Text Button
+
+```svelte
+<script>
+let isEditing = false;
+
+const toggleEdit = (event) => {
+  isEditing = !isEditing;
+};
+</script>
+
+<TextButton 
+  label={isEditing ? "Save Changes" : "Edit"}
+  type={isEditing ? "primary" : "default"}
+  onclick={toggleEdit}
+/>
+```
+
+### Link-Style Button
+
+```svelte
+<TextButton 
+  label="Visit our website"
+  style="
+    color: #007acc;
+    text-decoration: underline;
+    background: none;
+    border: none;
+    padding: 0;
+  "
+  onclick={() => window.open('https://example.com', '_blank')}
+/>
+```
+
+### Expandable Section
+
+```svelte
+<script>
+let isExpanded = false;
+
+const toggleSection = (event) => {
+  isExpanded = !isExpanded;
+};
+</script>
+
+<div class="expandable-section">
+  <TextButton 
+    label={isExpanded ? "Show Less ▲" : "Show More ▼"}
+    onclick={toggleSection}
+  />
+  
+  {#if isExpanded}
+    <div class="expanded-content">
+      <p>Additional content goes here...</p>
+    </div>
+  {/if}
+</div>
+```
+
+### Pagination Controls
+
+```svelte
+<script>
+let currentPage = 1;
+let totalPages = 10;
+
+const goToPage = (page) => (event) => {
+  if (page >= 1 && page <= totalPages) {
+    currentPage = page;
+  }
+};
+</script>
+
+<div class="pagination">
+  <TextButton 
+    label="Previous"
+    disabled={currentPage === 1}
+    onclick={goToPage(currentPage - 1)}
+  />
+  
+  <span class="page-info">Page {currentPage} of {totalPages}</span>
+  
+  <TextButton 
+    label="Next"
+    disabled={currentPage === totalPages}
+    onclick={goToPage(currentPage + 1)}
+  />
+</div>
+```
+
+### Filter Options
+
+```svelte
+<script>
+let activeFilters = new Set();
+
+const toggleFilter = (filter) => (event) => {
+  if (activeFilters.has(filter)) {
+    activeFilters.delete(filter);
+  } else {
+    activeFilters.add(filter);
+  }
+  activeFilters = activeFilters; // Trigger reactivity
+};
+</script>
+
+<div class="filters">
+  <TextButton 
+    label="All"
+    type={activeFilters.size === 0 ? 'primary' : 'default'}
+    onclick={() => activeFilters = new Set()}
+  />
+  <TextButton 
+    label="Active"
+    type={activeFilters.has('active') ? 'primary' : 'default'}
+    onclick={toggleFilter('active')}
+  />
+  <TextButton 
+    label="Completed"
+    type={activeFilters.has('completed') ? 'primary' : 'default'}
+    onclick={toggleFilter('completed')}
+  />
+</div>
+```
+
+### Form Actions
+
+```svelte
+<div class="form-actions">
+  <Button label="Submit" type="primary" onclick={handleSubmit} />
+  
+  <div class="secondary-actions">
+    <TextButton label="Save as Draft" onclick={saveDraft} />
+    <TextButton label="Preview" onclick={showPreview} />
+    <TextButton label="Reset" type="secondary" onclick={resetForm} />
+  </div>
+</div>
+
+<style>
+  .form-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+  }
+  
+  .secondary-actions {
+    display: flex;
+    gap: 16px;
+  }
+</style>
+```
+
+### Dropdown Menu Trigger
+
+```svelte
+<script>
+let showDropdown = false;
+
+const toggleDropdown = (event) => {
+  showDropdown = !showDropdown;
+};
+</script>
+
+<div class="dropdown-container">
+  <TextButton 
+    label="Options ▼"
+    type={showDropdown ? 'primary' : 'default'}
+    onclick={toggleDropdown}
+  />
+  
+  {#if showDropdown}
+    <div class="dropdown-menu">
+      <TextButton label="Option 1" onclick={selectOption1} />
+      <TextButton label="Option 2" onclick={selectOption2} />
+      <TextButton label="Option 3" onclick={selectOption3} />
+    </div>
+  {/if}
+</div>
+```
+
+## Accessibility
+
+The TextButton component follows accessibility best practices:
+
+- Uses semantic `<button>` element
+- By default sets `tabindex={-1}` so it does not take Tab keyboard focus, preventing unnecessary tab stops in subtle actions and navigation links
+- Supports explicit `tabindex` override (e.g. `tabindex={0}`) when Tab focus is desired
+- Proper disabled state handling (always not focusable when disabled)
+- Visible focus indicator when focused
+
+### Keyboard Navigation
+
+- **Tab** - Bypassed by default (`tabindex={-1}`); when overridden to `0`, moves focus to/from button
+- **Enter / Space** - Activate button when focused
+- **Focus visible** - Shows an external border ring (4px) with a 2px transparent gap when focused. The ring color matches the button's type color (primary=blue, secondary=red, etc.)
+
+### Improving Accessibility
+
+```svelte
+<!-- Provide context for screen readers -->
+<TextButton
+  label="Delete"
+  tooltip="Delete this item permanently"
+  onclick={handleDelete}
+  aria-label="Delete this item permanently"
+/>
+
+<!-- Add role and description -->
+<TextButton
+  label="Learn More"
+  tooltip="Opens detailed information"
+  onclick={showDetails}
+/>
+```
+
+## Styling
+
+The component uses the following CSS classes:
+
+- `.topside-button` - Base button class
+- `.text-button` - Text button specific styling
+- `.{size}` - Size-specific styles (big, medium, small)
+- `.{type}` - Type-specific styles (default, primary, etc.)
+- `.disabled` - Disabled state styles
+
+### CSS Variables
+
+```css
+:root {
+  /* Text button colors */
+  --text-btn-text: #374151;
+  --text-btn-hover-bg: rgba(0, 0, 0, 0.05);
+  --text-btn-disabled-text: #B3BCCA;
+}
+```
+
+### Embedded CSS
+
+The component uses embedded CSS (no external SCSS imports required).
+
+### Focus States
+
+Keyboard focus is handled using `:focus-visible` pseudo-class for keyboard-only focus indication. When focused via keyboard (Tab), the button shows the same background color as hover state.
+
+## Best Practices
+
+1. **Appropriate Context**: Use text buttons for secondary actions and navigation
+2. **Clear Labels**: Provide descriptive labels that clearly indicate the action
+3. **Visual Hierarchy**: Use different types to establish proper visual hierarchy
+4. **Consistent Spacing**: Maintain consistent spacing between text buttons
+5. **Hover States**: Ensure hover states provide clear feedback
+6. **Accessibility**: Always consider keyboard navigation and screen readers
+7. **Context Awareness**: Ensure text buttons work well within their surrounding context
+
+## Common Patterns
+
+### Inline Actions
+
+```svelte
+<p>
+  Your changes have been saved.
+  <TextButton label="Undo" onclick={undoChanges} />
+</p>
+```
+
+### Card Actions
+
+```svelte
+<div class="card">
+  <h3>Article Title</h3>
+  <p>Article excerpt...</p>
+  
+  <div class="card-actions">
+    <TextButton label="Read More" type="primary" onclick={readMore} />
+    <TextButton label="Share" onclick={shareArticle} />
+    <TextButton label="Save" onclick={saveArticle} />
+  </div>
+</div>
+```
+
+### List Item Actions
+
+```svelte
+<div class="list-item">
+  <span class="item-name">Document.pdf</span>
+  <div class="item-actions">
+    <TextButton label="Download" onclick={download} />
+    <TextButton label="Share" onclick={share} />
+    <TextButton label="Delete" type="secondary" onclick={deleteFile} />
+  </div>
+</div>
+```
+
+## Integration with Other Components
+
+```svelte
+<!-- With modals -->
+<Modal bind:open={showModal}>
+  <h2>Confirm Action</h2>
+  <p>Are you sure you want to continue?</p>
+
+  <div class="modal-actions">
+    <Button label="Confirm" type="primary" onclick={confirm} />
+    <TextButton label="Cancel" onclick={() => showModal = false} />
+  </div>
+</Modal>
+```
+
+## Browser Support
+
+The TextButton component works in all modern browsers that support:
+- ES6+ JavaScript
+- CSS Flexbox
+- Semantic button elements
+
+## Performance
+
+- Minimal styling for fast rendering
+- Built-in click debouncing
+- Efficient event handling
+- Lightweight DOM structure