@manufosela/lcd-digit

A 7-segment LCD digit display web component. Built with Lit.

Installation

``bash
npm install @manufosela/lcd-digit
`

Usage

`javascript
import '@manufosela/lcd-digit';
`

`html

`

Features

- 7-segment LED/LCD display style
- Supports digits 0-9, minus sign, and blank
- Optional colon for clock displays
- Glow effect on active segments
- Increment/decrement methods
- Fully customizable via CSS properties

Attributes

| Attribute | Type | Default | Description |
| ---------- | ------- | ------- | ------------------------------ |
| digit | String | 0 | Digit to display (0-9, -, space) |
| colon | Boolean | false | Show colon after digit |
| colon-on | Boolean | false | Whether colon is lit |

Methods

| Method | Description |
| ------------- | ------------------------------ |
| setDigit(d) | Set the digit (0-9, -, space) |
| increment() | Increase digit (wraps 9→0) |
| decrement() | Decrease digit (wraps 0→9) |

Events

| Event | Detail | Description |
| -------------- | ------------------ | ---------------------- |
| digit-changed| { digit: string }| Fired when digit changes |

`javascript
lcdDigit.addEventListener('digit-changed', (e) => {
console.log('New digit:', e.detail.digit);
});
`

CSS Custom Properties

| Property | Default | Description |
| ------------------------- | -------------------- | ------------------------ |
| --lcd-segment-length | 30px | Segment length |
| --lcd-segment-width | 6px | Segment width |
| --lcd-digit-on-color | #22c55e | Active segment color |
| --lcd-digit-off-color | rgba(0,0,0,0.1) | Inactive segment color |
| --lcd-digit-glow-color | rgba(34,197,94,0.5)| Glow effect color |

Examples

$3


`html

+
`

$3

`html




`

$3

`html
digit="8"
style="--lcd-digit-on-color: #3b82f6; --lcd-digit-glow-color: rgba(59, 130, 246, 0.5);">

`

$3

`html


``

License

MIT