+246 -3

app/components/README.md

reviewed

··· 1 1 # Peek UI Components 2 2 3 3 - A lightweight, themeable web component library built on [Lit.js](https://lit.dev/). Components use Shadow DOM for style encapsulation and CSS custom properties for theming. 3 3 + A lightweight, themeable web component library with a "native-first" approach. Uses [Lit.js](https://lit.dev/) minimally for reactive rendering while maximizing native browser APIs and following [Open UI](https://open-ui.org/) specifications. 4 4 + 5 5 + **Native APIs Used:** 6 6 + - `<dialog>` - Dialogs 7 7 + - `<details>`/`<summary>` - Disclosure/accordion 8 8 + - Popover API - Floating content, dropdowns 9 9 + - CSS scroll-snap - Carousels 10 10 + - ARIA patterns - Accessibility 4 11 5 12 ## Quick Start 6 13 ··· 775 782 776 783 --- 777 784 785 785 + ## Native/Open UI Components 786 786 + 787 787 + ### `<peek-popover>` 788 788 + 789 789 + Native Popover API wrapper for tooltips, dropdowns, and floating content. 790 790 + 791 791 + #### Properties 792 792 + 793 793 + | Property | Type | Default | Description | 794 794 + |----------|------|---------|-------------| 795 795 + | `mode` | `'auto' \| 'manual'` | `'auto'` | 'auto' enables light-dismiss (click outside closes) | 796 796 + | `open` | `boolean` | `false` | Whether popover is open | 797 797 + | `position` | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | Position relative to trigger | 798 798 + | `offset` | `number` | `8` | Offset from anchor (px) | 799 799 + 800 800 + #### Slots 801 801 + 802 802 + | Slot | Description | 803 803 + |------|-------------| 804 804 + | `trigger` | Element that triggers the popover (auto-wired) | 805 805 + | (default) | Popover content | 806 806 + 807 807 + #### CSS Parts 808 808 + 809 809 + | Part | Description | 810 810 + |------|-------------| 811 811 + | `popover` | The popover container | 812 812 + 813 813 + #### Events 814 814 + 815 815 + | Event | Detail | Description | 816 816 + |-------|--------|-------------| 817 817 + | `toggle` | `{ open }` | When open state changes | 818 818 + 819 819 + #### Methods 820 820 + 821 821 + | Method | Description | 822 822 + |--------|-------------| 823 823 + | `show()` | Open the popover | 824 824 + | `hide()` | Close the popover | 825 825 + | `toggle()` | Toggle open state | 826 826 + 827 827 + #### Example 828 828 + 829 829 + ```html 830 830 + <!-- Basic popover --> 831 831 + <peek-popover> 832 832 + <peek-button slot="trigger">Open Menu</peek-button> 833 833 + <div>Popover content here</div> 834 834 + </peek-popover> 835 835 + 836 836 + <!-- Tooltip-style (top position) --> 837 837 + <peek-popover position="top" offset="4"> 838 838 + <span slot="trigger">Hover target</span> 839 839 + <span>Tooltip text</span> 840 840 + </peek-popover> 841 841 + 842 842 + <!-- Manual control (no light-dismiss) --> 843 843 + <peek-popover mode="manual" id="menuPopover"> 844 844 + <peek-button slot="trigger">Settings</peek-button> 845 845 + <peek-list> 846 846 + <peek-list-item @click=${() => menuPopover.hide()}>Option 1</peek-list-item> 847 847 + <peek-list-item @click=${() => menuPopover.hide()}>Option 2</peek-list-item> 848 848 + </peek-list> 849 849 + </peek-popover> 850 850 + ``` 851 851 + 852 852 + --- 853 853 + 854 854 + ### `<peek-tabs>`, `<peek-tab>`, `<peek-tab-panel>` 855 855 + 856 856 + Accessible tabs following Open UI tablist/tab/tabpanel pattern with full ARIA support. 857 857 + 858 858 + #### `<peek-tabs>` Properties 859 859 + 860 860 + | Property | Type | Default | Description | 861 861 + |----------|------|---------|-------------| 862 862 + | `selected` | `number` | `0` | Selected tab index | 863 863 + | `activation` | `'auto' \| 'manual'` | `'auto'` | 'auto' selects on arrow keys, 'manual' requires Enter | 864 864 + 865 865 + #### `<peek-tab>` Properties 866 866 + 867 867 + | Property | Type | Default | Description | 868 868 + |----------|------|---------|-------------| 869 869 + | `selected` | `boolean` | `false` | Whether tab is selected (managed by parent) | 870 870 + | `disabled` | `boolean` | `false` | Disable this tab | 871 871 + 872 872 + #### Slots 873 873 + 874 874 + **`<peek-tabs>`:** Contains `<peek-tab>` elements (in tablist) and `<peek-tab-panel>` elements 875 875 + 876 876 + **`<peek-tab>`:** Tab label content 877 877 + 878 878 + **`<peek-tab-panel>`:** Panel content 879 879 + 880 880 + #### CSS Parts 881 881 + 882 882 + | Part | Element | Description | 883 883 + |------|---------|-------------| 884 884 + | `tablist` | `<peek-tabs>` | The tablist container | 885 885 + | `tab` | `<peek-tab>` | Individual tab button | 886 886 + | `panel` | `<peek-tab-panel>` | Tab panel container | 887 887 + 888 888 + #### Events 889 889 + 890 890 + | Event | Detail | Description | 891 891 + |-------|--------|-------------| 892 892 + | `tab-change` | `{ index, tab, panel }` | When selected tab changes | 893 893 + 894 894 + #### Keyboard Navigation 895 895 + 896 896 + | Key | Action | 897 897 + |-----|--------| 898 898 + | `ArrowLeft` / `ArrowUp` | Previous tab | 899 899 + | `ArrowRight` / `ArrowDown` | Next tab | 900 900 + | `Home` | First tab | 901 901 + | `End` | Last tab | 902 902 + 903 903 + #### Methods 904 904 + 905 905 + | Method | Description | 906 906 + |--------|-------------| 907 907 + | `select(index)` | Select tab by index | 908 908 + 909 909 + #### Example 910 910 + 911 911 + ```html 912 912 + <peek-tabs @tab-change=${handleTabChange}> 913 913 + <peek-tab>General</peek-tab> 914 914 + <peek-tab>Advanced</peek-tab> 915 915 + <peek-tab disabled>Locked</peek-tab> 916 916 + 917 917 + <peek-tab-panel> 918 918 + <p>General settings content</p> 919 919 + </peek-tab-panel> 920 920 + <peek-tab-panel> 921 921 + <p>Advanced settings content</p> 922 922 + </peek-tab-panel> 923 923 + <peek-tab-panel> 924 924 + <p>This panel is not accessible</p> 925 925 + </peek-tab-panel> 926 926 + </peek-tabs> 927 927 + 928 928 + <!-- Manual activation (requires Enter to select) --> 929 929 + <peek-tabs activation="manual"> 930 930 + <peek-tab>Tab 1</peek-tab> 931 931 + <peek-tab>Tab 2</peek-tab> 932 932 + <peek-tab-panel>Content 1</peek-tab-panel> 933 933 + <peek-tab-panel>Content 2</peek-tab-panel> 934 934 + </peek-tabs> 935 935 + ``` 936 936 + 937 937 + --- 938 938 + 939 939 + ### `<peek-details>` 940 940 + 941 941 + Native `<details>`/`<summary>` wrapper with styling and accordion support. 942 942 + 943 943 + #### Properties 944 944 + 945 945 + | Property | Type | Default | Description | 946 946 + |----------|------|---------|-------------| 947 947 + | `open` | `boolean` | `false` | Whether expanded | 948 948 + | `name` | `string` | `null` | Accordion group name (native exclusive behavior) | 949 949 + 950 950 + #### Slots 951 951 + 952 952 + | Slot | Description | 953 953 + |------|-------------| 954 954 + | `summary` | Trigger/header content | 955 955 + | (default) | Expandable content | 956 956 + 957 957 + #### CSS Parts 958 958 + 959 959 + | Part | Description | 960 960 + |------|-------------| 961 961 + | `details` | The native details element | 962 962 + | `summary` | The summary/trigger | 963 963 + | `content` | The expandable content area | 964 964 + 965 965 + #### Events 966 966 + 967 967 + | Event | Detail | Description | 968 968 + |-------|--------|-------------| 969 969 + | `toggle` | `{ open }` | When open state changes | 970 970 + 971 971 + #### Methods 972 972 + 973 973 + | Method | Description | 974 974 + |--------|-------------| 975 975 + | `show()` | Expand the details | 976 976 + | `hide()` | Collapse the details | 977 977 + | `toggle()` | Toggle open state | 978 978 + 979 979 + #### Example 980 980 + 981 981 + ```html 982 982 + <!-- Single disclosure --> 983 983 + <peek-details> 984 984 + <span slot="summary">Click to expand</span> 985 985 + <p>Hidden content revealed when expanded.</p> 986 986 + </peek-details> 987 987 + 988 988 + <!-- Initially open --> 989 989 + <peek-details open> 990 990 + <span slot="summary">Already expanded</span> 991 991 + <p>This content is visible by default.</p> 992 992 + </peek-details> 993 993 + 994 994 + <!-- Exclusive accordion (native behavior) --> 995 995 + <peek-details name="faq"> 996 996 + <span slot="summary">Question 1</span> 997 997 + <p>Answer 1</p> 998 998 + </peek-details> 999 999 + <peek-details name="faq"> 1000 1000 + <span slot="summary">Question 2</span> 1001 1001 + <p>Answer 2</p> 1002 1002 + </peek-details> 1003 1003 + <peek-details name="faq"> 1004 1004 + <span slot="summary">Question 3</span> 1005 1005 + <p>Answer 3</p> 1006 1006 + </peek-details> 1007 1007 + ``` 1008 1008 + 1009 1009 + --- 1010 1010 + 778 1011 ## Browser Support 779 1012 780 780 - Components use modern CSS features: 1013 1013 + Components use modern CSS and HTML features: 1014 1014 + 1015 1015 + **CSS:** 781 1016 - CSS custom properties 782 1017 - `color-mix()` for color adjustments 783 1018 - `:focus-visible` for keyboard focus styles 784 1019 - CSS Grid and Flexbox 1020 1020 + - CSS scroll-snap (carousels) 1021 1021 + - `@starting-style` for entry animations 785 1022 786 786 - Supported in all modern browsers (Chrome, Firefox, Safari, Edge). 1023 1023 + **Native APIs:** 1024 1024 + - Popover API (`popover` attribute, `showPopover()`) - Chrome 114+, Safari 17+, Firefox 125+ 1025 1025 + - `<dialog>` element - All modern browsers 1026 1026 + - `<details>`/`<summary>` elements - All modern browsers 1027 1027 + - `name` attribute for exclusive accordions - Chrome 120+, Safari 17.2+ 1028 1028 + 1029 1029 + Supported in all modern browsers (Chrome 120+, Firefox 125+, Safari 17.2+, Edge 120+).

+8

app/components/index.js

reviewed

··· 46 46 export { PeekGrid, PeekGridItem } from './peek-grid.js'; 47 47 export { PeekDialog } from './peek-dialog.js'; 48 48 49 49 + // Components - Native/Open UI 50 50 + export { PeekPopover } from './peek-popover.js'; 51 51 + export { PeekTabs, PeekTab, PeekTabPanel } from './peek-tabs.js'; 52 52 + export { PeekDetails } from './peek-details.js'; 53 53 + 49 54 // Side-effect imports to register all components 50 55 import './peek-button.js'; 51 56 import './peek-card.js'; ··· 54 59 import './peek-input.js'; 55 60 import './peek-grid.js'; 56 61 import './peek-dialog.js'; 62 62 + import './peek-popover.js'; 63 63 + import './peek-tabs.js'; 64 64 + import './peek-details.js';

+48

app/components/peek-details.js

reviewed

··· 1 1 + /** 2 2 + * Peek Details - Native <details>/<summary> wrapper 3 3 + * 4 4 + * @element peek-details 5 5 + * @prop {boolean} open - Whether expanded 6 6 + * @prop {string} name - Accordion group name (native exclusive) 7 7 + * @slot summary - Trigger content 8 8 + * @slot - Expandable content 9 9 + */ 10 10 + 11 11 + import { html, css } from 'lit'; 12 12 + import { PeekElement, sharedStyles } from './base.js'; 13 13 + 14 14 + export class PeekDetails extends PeekElement { 15 15 + static properties = { open: { type: Boolean, reflect: true }, name: { type: String, reflect: true } }; 16 16 + static styles = [sharedStyles, css` 17 17 + :host { display: block; } 18 18 + details { border: 1px solid var(--peek-details-border, var(--theme-border, #e0e0e0)); border-radius: var(--peek-details-radius, var(--peek-radius-md)); overflow: hidden; } 19 19 + summary { display: flex; align-items: center; gap: var(--peek-space-sm); padding: var(--peek-details-padding, var(--peek-space-md)); background: var(--theme-bg-secondary, #fff); cursor: pointer; user-select: none; font-weight: var(--peek-font-medium); list-style: none; } 20 20 + summary::-webkit-details-marker { display: none; } 21 21 + summary::before { content: ''; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform var(--peek-transition-fast); } 22 22 + details[open] summary::before { transform: rotate(90deg); } 23 23 + summary:hover { background: var(--theme-bg-tertiary, #f5f5f5); } 24 24 + summary:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: -2px; } 25 25 + .content { padding: var(--peek-details-padding, var(--peek-space-md)); padding-top: 0; color: var(--theme-text-secondary, #666); } 26 26 + :host([name]) + :host([name]) { margin-top: -1px; } 27 27 + :host([name]) details { border-radius: 0; } 28 28 + :host([name]):first-of-type details { border-top-left-radius: var(--peek-details-radius, var(--peek-radius-md)); border-top-right-radius: var(--peek-details-radius, var(--peek-radius-md)); } 29 29 + :host([name]):last-of-type details { border-bottom-left-radius: var(--peek-details-radius, var(--peek-radius-md)); border-bottom-right-radius: var(--peek-details-radius, var(--peek-radius-md)); } 30 30 + `]; 31 31 + 32 32 + constructor() { super(); this.open = false; this.name = null; } 33 33 + _handleToggle(e) { this.open = e.target.open; this.emit('toggle', { open: this.open }); } 34 34 + 35 35 + render() { 36 36 + return html`<details part="details" ?open=${this.open} name=${this.name || ''} @toggle=${this._handleToggle}> 37 37 + <summary part="summary"><slot name="summary">Details</slot></summary> 38 38 + <div part="content" class="content"><slot></slot></div> 39 39 + </details>`; 40 40 + } 41 41 + 42 42 + show() { this.open = true; } 43 43 + hide() { this.open = false; } 44 44 + toggle() { this.open = !this.open; } 45 45 + } 46 46 + 47 47 + customElements.define('peek-details', PeekDetails); 48 48 + export default PeekDetails;

+121

app/components/peek-popover.js

reviewed

··· 1 1 + /** 2 2 + * Peek Popover Component 3 3 + * 4 4 + * Native Popover API wrapper for tooltips, dropdowns, and floating content. 5 5 + * 6 6 + * @element peek-popover 7 7 + * 8 8 + * @prop {string} mode - 'auto' (light-dismiss) | 'manual' 9 9 + * @prop {boolean} open - Whether popover is open 10 10 + * @prop {string} position - 'top' | 'bottom' | 'left' | 'right' 11 11 + * @prop {number} offset - Offset from anchor (px) 12 12 + * 13 13 + * @slot trigger - Trigger element (auto-wired with popovertarget) 14 14 + * @slot - Popover content 15 15 + * 16 16 + * @fires toggle - When open state changes 17 17 + */ 18 18 + 19 19 + import { html, css } from 'lit'; 20 20 + import { PeekElement, sharedStyles } from './base.js'; 21 21 + 22 22 + let popoverIdCounter = 0; 23 23 + 24 24 + export class PeekPopover extends PeekElement { 25 25 + static properties = { 26 26 + mode: { type: String, reflect: true }, 27 27 + open: { type: Boolean, reflect: true }, 28 28 + position: { type: String, reflect: true }, 29 29 + offset: { type: Number } 30 30 + }; 31 31 + 32 32 + static styles = [ 33 33 + sharedStyles, 34 34 + css` 35 35 + :host { display: inline-block; position: relative; } 36 36 + .trigger-wrapper { display: contents; } 37 37 + .popover { 38 38 + margin: 0; 39 39 + padding: var(--peek-popover-padding, var(--peek-space-md)); 40 40 + border: 1px solid var(--peek-popover-border, var(--theme-border, #e0e0e0)); 41 41 + border-radius: var(--peek-radius-lg); 42 42 + background: var(--peek-popover-bg, var(--theme-bg-secondary, #fff)); 43 43 + box-shadow: var(--peek-shadow-lg); 44 44 + max-width: var(--peek-popover-max-width, 320px); 45 45 + position: absolute; 46 46 + inset: unset; 47 47 + } 48 48 + .popover { opacity: 0; transform: scale(0.95); transition: opacity var(--peek-transition-fast), transform var(--peek-transition-fast); } 49 49 + .popover:popover-open { opacity: 1; transform: scale(1); } 50 50 + @starting-style { .popover:popover-open { opacity: 0; transform: scale(0.95); } } 51 51 + ` 52 52 + ]; 53 53 + 54 54 + constructor() { 55 55 + super(); 56 56 + this._popoverId = `peek-popover-${++popoverIdCounter}`; 57 57 + this.mode = 'auto'; 58 58 + this.open = false; 59 59 + this.position = 'bottom'; 60 60 + this.offset = 8; 61 61 + } 62 62 + 63 63 + get popoverElement() { return this.shadowRoot?.querySelector('.popover'); } 64 64 + get triggerElement() { 65 65 + const slot = this.shadowRoot?.querySelector('slot[name="trigger"]'); 66 66 + return slot?.assignedElements()?.[0] || null; 67 67 + } 68 68 + 69 69 + firstUpdated() { this._setupTrigger(); if (this.open) this.show(); } 70 70 + updated(changedProps) { if (changedProps.has('open')) this.open ? this.show() : this.hide(); } 71 71 + 72 72 + _setupTrigger() { 73 73 + const trigger = this.triggerElement; 74 74 + if (trigger) { 75 75 + trigger.setAttribute('popovertarget', this._popoverId); 76 76 + trigger.setAttribute('popovertargetaction', 'toggle'); 77 77 + } 78 78 + } 79 79 + 80 80 + _handleToggle(e) { 81 81 + const isOpen = e.newState === 'open'; 82 82 + this.open = isOpen; 83 83 + if (isOpen) this._updatePosition(); 84 84 + this.emit('toggle', { open: isOpen }); 85 85 + } 86 86 + 87 87 + _updatePosition() { 88 88 + const popover = this.popoverElement; 89 89 + const anchorEl = this.triggerElement || this; 90 90 + if (!popover || !anchorEl) return; 91 91 + const anchorRect = anchorEl.getBoundingClientRect(); 92 92 + const popoverRect = popover.getBoundingClientRect(); 93 93 + let top, left; 94 94 + switch (this.position) { 95 95 + case 'top': top = anchorRect.top - popoverRect.height - this.offset; left = anchorRect.left + (anchorRect.width - popoverRect.width) / 2; break; 96 96 + case 'bottom': top = anchorRect.bottom + this.offset; left = anchorRect.left + (anchorRect.width - popoverRect.width) / 2; break; 97 97 + case 'left': top = anchorRect.top + (anchorRect.height - popoverRect.height) / 2; left = anchorRect.left - popoverRect.width - this.offset; break; 98 98 + case 'right': top = anchorRect.top + (anchorRect.height - popoverRect.height) / 2; left = anchorRect.right + this.offset; break; 99 99 + default: top = anchorRect.bottom + this.offset; left = anchorRect.left; 100 100 + } 101 101 + const vw = window.innerWidth, vh = window.innerHeight; 102 102 + left = Math.max(8, Math.min(left, vw - popoverRect.width - 8)); 103 103 + top = Math.max(8, Math.min(top, vh - popoverRect.height - 8)); 104 104 + popover.style.top = `${top}px`; 105 105 + popover.style.left = `${left}px`; 106 106 + } 107 107 + 108 108 + render() { 109 109 + return html` 110 110 + <div class="trigger-wrapper"><slot name="trigger" @slotchange=${this._setupTrigger}></slot></div> 111 111 + <div id="${this._popoverId}" part="popover" class="popover" popover=${this.mode} @toggle=${this._handleToggle}><slot></slot></div> 112 112 + `; 113 113 + } 114 114 + 115 115 + show() { try { this.popoverElement?.showPopover(); } catch (e) {} } 116 116 + hide() { try { this.popoverElement?.hidePopover(); } catch (e) {} } 117 117 + toggle() { try { this.popoverElement?.togglePopover(); } catch (e) {} } 118 118 + } 119 119 + 120 120 + customElements.define('peek-popover', PeekPopover); 121 121 + export default PeekPopover;

+83

app/components/peek-tabs.js

reviewed

··· 1 1 + /** 2 2 + * Peek Tabs - Open UI tablist/tab/tabpanel pattern 3 3 + * 4 4 + * @element peek-tabs 5 5 + * @prop {number} selected - Selected tab index 6 6 + * @prop {string} activation - 'auto' | 'manual' 7 7 + */ 8 8 + 9 9 + import { html, css } from 'lit'; 10 10 + import { PeekElement, sharedStyles } from './base.js'; 11 11 + 12 12 + let tabsIdCounter = 0; 13 13 + 14 14 + export class PeekTabs extends PeekElement { 15 15 + static properties = { selected: { type: Number, reflect: true }, activation: { type: String } }; 16 16 + static styles = [sharedStyles, css` 17 17 + :host { display: block; } 18 18 + .tablist { display: flex; gap: var(--peek-tabs-gap, var(--peek-space-xs)); border-bottom: 1px solid var(--peek-tabs-border, var(--theme-border, #e0e0e0)); margin-bottom: var(--peek-space-md); } 19 19 + `]; 20 20 + 21 21 + constructor() { super(); this._tabsId = `peek-tabs-${++tabsIdCounter}`; this.selected = 0; this.activation = 'auto'; } 22 22 + get tabs() { return Array.from(this.querySelectorAll('peek-tab')); } 23 23 + get panels() { return Array.from(this.querySelectorAll('peek-tab-panel')); } 24 24 + 25 25 + firstUpdated() { this._setupTabs(); this._updateSelection(); } 26 26 + updated(changedProps) { if (changedProps.has('selected')) this._updateSelection(); } 27 27 + 28 28 + _setupTabs() { 29 29 + this.tabs.forEach((tab, i) => { 30 30 + tab.id = `${this._tabsId}-tab-${i}`; tab._index = i; tab._tabsElement = this; 31 31 + if (this.panels[i]) { this.panels[i].id = `${this._tabsId}-panel-${i}`; tab.setAttribute('aria-controls', this.panels[i].id); this.panels[i].setAttribute('aria-labelledby', tab.id); } 32 32 + }); 33 33 + } 34 34 + 35 35 + _updateSelection() { 36 36 + this.tabs.forEach((tab, i) => { tab.selected = i === this.selected; tab.setAttribute('tabindex', i === this.selected ? '0' : '-1'); }); 37 37 + this.panels.forEach((panel, i) => { panel.hidden = i !== this.selected; }); 38 38 + } 39 39 + 40 40 + _handleKeydown(e) { 41 41 + const len = this.tabs.length; let idx = this.selected; 42 42 + if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); idx = idx > 0 ? idx - 1 : len - 1; } 43 43 + else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { e.preventDefault(); idx = idx < len - 1 ? idx + 1 : 0; } 44 44 + else if (e.key === 'Home') { e.preventDefault(); idx = 0; } 45 45 + else if (e.key === 'End') { e.preventDefault(); idx = len - 1; } 46 46 + else return; 47 47 + if (this.activation === 'auto') this._selectTab(idx); 48 48 + this.tabs[idx]?.focus(); 49 49 + } 50 50 + 51 51 + _selectTab(i) { if (i !== this.selected) { this.selected = i; this.emit('tab-change', { index: i, tab: this.tabs[i], panel: this.panels[i] }); } } 52 52 + select(i) { this._selectTab(i); } 53 53 + 54 54 + render() { 55 55 + return html`<div part="tablist" class="tablist" role="tablist" @keydown=${this._handleKeydown}><slot @slotchange=${() => { this._setupTabs(); this._updateSelection(); }}></slot></div>`; 56 56 + } 57 57 + } 58 58 + 59 59 + export class PeekTab extends PeekElement { 60 60 + static properties = { selected: { type: Boolean, reflect: true }, disabled: { type: Boolean, reflect: true } }; 61 61 + static styles = [sharedStyles, css` 62 62 + :host { display: inline-block; } 63 63 + .tab { display: inline-flex; align-items: center; padding: var(--peek-tab-padding, var(--peek-space-sm) var(--peek-space-md)); background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font: inherit; font-weight: var(--peek-font-medium); color: var(--peek-tab-color, var(--theme-text-secondary, #666)); cursor: pointer; outline: none; } 64 64 + .tab:hover:not(:disabled) { color: var(--theme-text, #333); } 65 65 + .tab:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 2px; } 66 66 + :host([selected]) .tab { color: var(--theme-accent, #007aff); border-bottom-color: var(--theme-accent, #007aff); } 67 67 + :host([disabled]) .tab { opacity: 0.5; cursor: not-allowed; } 68 68 + `]; 69 69 + constructor() { super(); this.selected = false; this.disabled = false; this._index = 0; this._tabsElement = null; } 70 70 + _handleClick() { if (!this.disabled) this._tabsElement?._selectTab(this._index); } 71 71 + render() { return html`<button part="tab" class="tab" role="tab" aria-selected=${this.selected} ?disabled=${this.disabled} @click=${this._handleClick}><slot></slot></button>`; } 72 72 + focus() { this.shadowRoot?.querySelector('.tab')?.focus(); } 73 73 + } 74 74 + 75 75 + export class PeekTabPanel extends PeekElement { 76 76 + static styles = [sharedStyles, css`:host { display: block; } :host([hidden]) { display: none; }`]; 77 77 + render() { return html`<div part="panel" role="tabpanel"><slot></slot></div>`; } 78 78 + } 79 79 + 80 80 + customElements.define('peek-tabs', PeekTabs); 81 81 + customElements.define('peek-tab', PeekTab); 82 82 + customElements.define('peek-tab-panel', PeekTabPanel); 83 83 + export default PeekTabs;