Skip to content

Add Tabs components #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Jeremy-Walton merged 11 commits into from
Feb 16, 2026
Merged

Add Tabs components #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
37a8e9a
Add new page for demo
Jeremy-Walton Feb 13, 2026
866f4ad
Add tabs components
Jeremy-Walton Feb 13, 2026
8ffb27c
Add demos to page
Jeremy-Walton Feb 13, 2026
6b48c89
Add preview and interface details
Jeremy-Walton Feb 13, 2026
d246d7d
Clean up styles and add css snippet
Jeremy-Walton Feb 16, 2026
8e71ed1
bump package version
Jeremy-Walton Feb 16, 2026
1c91816
Update PDF components to use new parent component
Jeremy-Walton Feb 16, 2026
d125822
Add tests for tabs
Jeremy-Walton Feb 16, 2026
416238f
Add blurb about usage with Optics
Jeremy-Walton Feb 16, 2026
6f757de
Rename setActive to activate
Jeremy-Walton Feb 16, 2026
ef5b310
Update readme to detail new tabs and usage
Jeremy-Walton Feb 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
139 changes: 123 additions & 16 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
# Spider Web Components
By RoleModel Software

# PDF Viewer
By RoleModel Software

[PDF.js](https://mozilla.github.io/pdf.js) is awesome, but you will notice this paragraph in their setup instructions:
> The viewer is built on the display layer and is the UI for PDF viewer in Firefox and the other browser extensions within the project. It can be a good starting point for building your own viewer. However, we do ask if you plan to embed the viewer in your own site, that it not just be an unmodified version. Please re-skin it or build upon it.
Spider is a set of reusable web components built with Lit. It currently provides:

This component aims to be that skin layer built upon PDF.js packaged in a lovely drop-in web component.
- `rm-pdf-viewer`: reskinned PDF viewer built on [PDF.js](https://mozilla.github.io/pdf.js)
- `rm-tabs-root`, `rm-tabs-trigger`, `rm-tabs-panel`: unstyled behavior-first tabs primitives

A customizable PDF viewer web component built on [PDF.js](https://mozilla.github.io/pdf.js). This component provides a reskinned, embeddable PDF viewing experience with text selection, zoom controls, thumbnail navigation, and theme customization.

Expand All @@ -16,6 +15,34 @@ A customizable PDF viewer web component built on [PDF.js](https://mozilla.github
yarn add @rolemodel/spider
```

## Usage

Import once to register all components:

```js
import '@rolemodel/spider'
```

Or import specific component modules from the package distribution output.

## Development

```bash
yarn dev
yarn test
```

## Components

### PDF Viewer `rm-pdf-viewer`

[PDF.js](https://mozilla.github.io/pdf.js) is awesome, but you will notice this paragraph in their setup instructions:
> The viewer is built on the display layer and is the UI for PDF viewer in Firefox and the other browser extensions within the project. It can be a good starting point for building your own viewer. However, we do ask if you plan to embed the viewer in your own site, that it not just be an unmodified version. Please re-skin it or build upon it.

This component aims to be that skin layer built upon PDF.js packaged in a lovely drop-in web component.

#### Basic usage

```html
<!doctype html>
<html>
Expand All @@ -25,7 +52,7 @@ yarn add @rolemodel/spider
</html>
```

### With Custom Close Button
#### With custom close button

```html
<rm-pdf-viewer src="/document.pdf">
Expand All @@ -35,21 +62,101 @@ yarn add @rolemodel/spider
</rm-pdf-viewer>
```

## Properties
#### Attributes / properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `src` | String | `''` | Path to the PDF file |
| `initial-page` | Number | `1` | Initial page to display |
| `close-url` | String | `''` | URL to redirect when close button is clicked |
| `theme-hue` | Number | `217` | Hue value (0-360) for theme color |
| `theme-saturation` | Number | `89` | Saturation value (0-100) for theme color |
| Name | Type | Default | Description |
|------|------|---------|-------------|
| `src` | `string` | `''` | PDF URL/path |
| `open` | `boolean` | `false` | Shows the viewer when present/true |
| `initial-page` | `number` | `1` | Initial page to open |
| `theme-hue` | `number` | `217` | Theme hue (`0-360`) |
| `theme-saturation` | `number` | `89` | Theme saturation (`0-100`) |
| `escape-closes-viewer` | `boolean` | `false` | Closes viewer on `Escape` when search is not open |

## Slots
#### Slot

| Slot | Description |
|------|-------------|
| `close-button` | Custom close button element |
| `close-button` | Custom close action element rendered in the toolbar |

#### Public methods

| Method | Description |
|--------|-------------|
| `loadPDF()` | Loads the PDF from `src` |
| `printPDF()` | Opens browser print flow for the loaded PDF |
| `downloadPDF()` | Downloads the current `src` |
| `fitPDFToScreen()` | Applies calculated fit-to-screen zoom |
| `performSearch(term)` | Searches text across pages |
| `goToNextMatch()` / `goToPreviousMatch()` | Navigates search matches |

### Tabs components

Tabs are split into three composable components so behavior is provided without enforcing styling.

#### `rm-tabs-root`

Owns the active tab state and coordinates triggers/panels.

| Name | Type | Description |
|------|------|-------------|
| `active` | `string` | Current active tab name |

#### `rm-tabs-trigger`

Declares a selectable tab trigger.

| Name | Type | Description |
|------|------|-------------|
| `name` | `string` | Tab name this trigger controls |
| `activeClass` | `string` | Class toggled on slotted elements when active |

| Member | Type | Description |
|--------|------|-------------|
| `isActive` | getter | `true` when this trigger is selected |
| `activate()` | method | Dispatches a tab select event for this trigger |

#### `rm-tabs-panel`

Declares content for a tab.

| Name | Type | Description |
|------|------|-------------|
| `name` | `string` | Tab name this panel belongs to |

| Member | Type | Description |
|--------|------|-------------|
| `active` | getter | `true` when this panel is visible |
| `activate()` | method | Dispatches a tab select event for this panel |

#### Tabs event

| Event | Detail | Description |
|-------|--------|-------------|
| `rm-tab-select` | `{ name: string }` | Emitted by triggers/panels to request active tab changes |

#### Tabs usage example

```html
<rm-tabs-root class="tabs" active="first">
<div role="tablist">
<rm-tabs-trigger name="first" activeClass="active">
<button type="button">First</button>
</rm-tabs-trigger>
<rm-tabs-trigger name="second" activeClass="active">
<button type="button">Second</button>
</rm-tabs-trigger>
</div>

<rm-tabs-panel name="first">
<span>First tab content</span>
</rm-tabs-panel>

<rm-tabs-panel name="second">
<span>Second tab content</span>
</rm-tabs-panel>
</rm-tabs-root>
```

## License

Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "@rolemodel/spider",
"description": "Shared high level web components for RoleModel Software and beyond",
"packageManager": "yarn@4.12.0",
"version": "0.0.3",
"version": "0.0.4",
"author": "RoleModel Software",
"license": "MIT",
"type": "module",
Expand All @@ -11,6 +11,7 @@
"import": "./dist/index.js"
},
"./dist/components/*": "./dist/components/*",
"./dist/events/*": "./dist/events/*",
"./dist/assets/*": "./dist/assets/*"
},
"files": [
Expand Down
Loading