srcdev-nuxt-components 9.1.2 → 9.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: GlassPanel
|
|
3
|
+
description: GlassPanel props, slots, CSS token API, and theming override
|
|
4
|
+
type: reference
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# GlassPanel
|
|
8
|
+
|
|
9
|
+
## Overview
|
|
10
|
+
|
|
11
|
+
`GlassPanel` is a semantic container with a frosted-glass visual effect — blurred background, border, drop shadow, and an angled specular highlight on the top-left corner. All visual properties are driven by CSS custom properties so they can be overridden per-theme.
|
|
12
|
+
|
|
13
|
+
## Props
|
|
14
|
+
|
|
15
|
+
| Prop | Type | Default | Description |
|
|
16
|
+
|------|------|---------|-------------|
|
|
17
|
+
| `tag` | `"div" \| "section" \| "article" \| "main" \| "header" \| "footer"` | `"div"` | Rendered HTML element |
|
|
18
|
+
| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root element |
|
|
19
|
+
|
|
20
|
+
## Slots
|
|
21
|
+
|
|
22
|
+
| Slot | Description |
|
|
23
|
+
|------|-------------|
|
|
24
|
+
| `default` | Panel content |
|
|
25
|
+
|
|
26
|
+
## Basic usage
|
|
27
|
+
|
|
28
|
+
```vue
|
|
29
|
+
<GlassPanel tag="section" :style-class-passthrough="['p-8']">
|
|
30
|
+
<p>Content here</p>
|
|
31
|
+
</GlassPanel>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## CSS token API
|
|
35
|
+
|
|
36
|
+
All four tokens must be defined — the component has no built-in fallbacks.
|
|
37
|
+
|
|
38
|
+
| Token | What it controls |
|
|
39
|
+
|-------|-----------------|
|
|
40
|
+
| `--glass-panel-bg` | Panel background (use `rgba` / `oklch` with alpha for the glass effect) |
|
|
41
|
+
| `--glass-panel-border-color` | 1px border colour (typically a translucent white) |
|
|
42
|
+
| `--glass-panel-shadow` | `box-shadow` value |
|
|
43
|
+
| `--glass-panel-highlight` | Colour of the `135deg` specular gradient overlay (`::before`) |
|
|
44
|
+
|
|
45
|
+
## Layer defaults
|
|
46
|
+
|
|
47
|
+
**Light mode** (`:root` / `[data-color-scheme="light"]`):
|
|
48
|
+
```css
|
|
49
|
+
--glass-panel-bg: rgba(255, 255, 255, 0.55);
|
|
50
|
+
--glass-panel-border-color: rgba(255, 255, 255, 0.8);
|
|
51
|
+
--glass-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
52
|
+
--glass-panel-highlight: rgba(255, 255, 255, 0.9);
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
**Dark mode** (`[data-color-scheme="dark"]`):
|
|
56
|
+
```css
|
|
57
|
+
--glass-panel-bg: rgba(12, 12, 20, 0.45);
|
|
58
|
+
--glass-panel-border-color: rgba(255, 255, 255, 0.07);
|
|
59
|
+
--glass-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
60
|
+
--glass-panel-highlight: rgba(255, 255, 255, 0.04);
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Overriding in a consuming app
|
|
64
|
+
|
|
65
|
+
Add overrides to `app/assets/styles/setup/03.theming/default/_light.css` and `_dark.css`.
|
|
66
|
+
|
|
67
|
+
For this site the background is dark/warm, so the dark-mode values are the primary brand values. Warm rose tints work well for the border and highlight:
|
|
68
|
+
|
|
69
|
+
```css
|
|
70
|
+
/* _dark.css — example warm-rose override */
|
|
71
|
+
--glass-panel-bg: oklch(12% 0.01 15 / 0.5); /* warm near-black, semi-transparent */
|
|
72
|
+
--glass-panel-border-color: oklch(60% 0.06 15 / 0.15); /* muted rose border */
|
|
73
|
+
--glass-panel-shadow: 0 8px 32px oklch(0% 0 0 / 0.6), 0 2px 8px oklch(0% 0 0 / 0.4);
|
|
74
|
+
--glass-panel-highlight: oklch(80% 0.04 15 / 0.06); /* faint rose specular */
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
```css
|
|
78
|
+
/* _light.css — example warm-rose override */
|
|
79
|
+
--glass-panel-bg: oklch(98% 0.005 15 / 0.6);
|
|
80
|
+
--glass-panel-border-color: oklch(100% 0 0 / 0.75);
|
|
81
|
+
--glass-panel-shadow: 0 8px 32px oklch(0% 0 0 / 0.06), 0 2px 8px oklch(0% 0 0 / 0.03);
|
|
82
|
+
--glass-panel-highlight: oklch(100% 0 0 / 0.85);
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## Notes
|
|
86
|
+
|
|
87
|
+
- The `backdrop-filter: blur(14px) saturate(180%)` is baked into the component — the blurred-background effect only looks right when the panel is layered over an image or textured background.
|
|
88
|
+
- `overflow: hidden` is set on the root — ensure content that needs to escape (e.g. tooltips, dropdowns) is portalled outside.
|
|
89
|
+
- The `::before` highlight overlay is `pointer-events: none` so it never blocks clicks.
|
package/.claude/skills/index.md
CHANGED
|
@@ -49,6 +49,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
|
|
|
49
49
|
├── contact-section.md — ContactSection props (stepperIndicatorSize pass-through), 3-item info+form layout, slot API
|
|
50
50
|
├── stepper-list.md — StepperList dynamic slots (item-{n}/indicator-{n}), props, connector behaviour
|
|
51
51
|
├── expanding-panel.md — ExpandingPanel v-model, forceOpened, slots (summary/icon/content), ARIA wiring
|
|
52
|
+
├── glass-panel.md — GlassPanel props, slots, CSS token API (--glass-panel-bg/border-color/shadow/highlight), theming override
|
|
52
53
|
├── navigation-horizontal.md — NavigationHorizontal props, NavItemData type, CSS token API, import path gotcha
|
|
53
54
|
├── input-copy-core.md — InputCopyCore: readonly copy-to-clipboard input; props, emits, slots, CSS classes, usage
|
|
54
55
|
└── site-navigation.md — SiteNavigation: responsive nav with auto-collapse, burger menu, decorator indicators, CSS token API
|
|
@@ -60,19 +61,24 @@ Each skill is a single markdown file named `<area>-<task>.md`.
|
|
|
60
61
|
# <Title>
|
|
61
62
|
|
|
62
63
|
## Overview
|
|
64
|
+
|
|
63
65
|
Brief description of what this skill does and why it exists.
|
|
64
66
|
|
|
65
67
|
## Prerequisites
|
|
68
|
+
|
|
66
69
|
What needs to be in place before starting (optional section).
|
|
67
70
|
|
|
68
71
|
## Steps
|
|
69
72
|
|
|
70
73
|
### 1. <Step name>
|
|
74
|
+
|
|
71
75
|
...
|
|
72
76
|
|
|
73
77
|
### 2. <Step name>
|
|
78
|
+
|
|
74
79
|
...
|
|
75
80
|
|
|
76
81
|
## Notes
|
|
82
|
+
|
|
77
83
|
Edge cases, gotchas, or links to related files (optional section).
|
|
78
84
|
```
|