@lepid-labs/styles 1.0.0 → 1.0.2

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.
Files changed (50) hide show
  1. package/css.d.ts +8 -0
  2. package/luminous-precision/base.css +6 -2
  3. package/luminous-precision/components/badge.css +25 -0
  4. package/luminous-precision/components/button-group.css +130 -0
  5. package/luminous-precision/components/button-hold.css +112 -0
  6. package/luminous-precision/components/icon-button.css +71 -0
  7. package/luminous-precision/components/layout.css +348 -0
  8. package/luminous-precision/components/page.css +85 -0
  9. package/luminous-precision/components/pre.css +75 -0
  10. package/luminous-precision/components/shell.css +165 -0
  11. package/luminous-precision/components/status-card.css +159 -0
  12. package/luminous-precision/components/stepper.css +108 -0
  13. package/luminous-precision/components/table.css +20 -0
  14. package/luminous-precision/components/tabs.css +42 -0
  15. package/luminous-precision/design.md +64 -4
  16. package/luminous-precision/index.css +8 -0
  17. package/luminous-precision/tokens.css +6 -0
  18. package/neon-butterfly/base.css +6 -2
  19. package/neon-butterfly/components/badge.css +25 -0
  20. package/neon-butterfly/components/button-group.css +128 -0
  21. package/neon-butterfly/components/button-hold.css +112 -0
  22. package/neon-butterfly/components/icon-button.css +66 -0
  23. package/neon-butterfly/components/layout.css +348 -0
  24. package/neon-butterfly/components/page.css +85 -0
  25. package/neon-butterfly/components/pre.css +75 -0
  26. package/neon-butterfly/components/shell.css +196 -0
  27. package/neon-butterfly/components/status-card.css +156 -0
  28. package/neon-butterfly/components/stepper.css +107 -0
  29. package/neon-butterfly/components/table.css +20 -0
  30. package/neon-butterfly/components/tabs.css +42 -0
  31. package/neon-butterfly/design.md +60 -4
  32. package/neon-butterfly/index.css +8 -0
  33. package/neon-butterfly/tokens.css +6 -0
  34. package/package.json +58 -15
  35. package/summer-cloud/base.css +6 -2
  36. package/summer-cloud/components/badge.css +26 -0
  37. package/summer-cloud/components/button-group.css +131 -0
  38. package/summer-cloud/components/button-hold.css +132 -0
  39. package/summer-cloud/components/icon-button.css +76 -0
  40. package/summer-cloud/components/layout.css +348 -0
  41. package/summer-cloud/components/page.css +85 -0
  42. package/summer-cloud/components/pre.css +74 -0
  43. package/summer-cloud/components/shell.css +197 -0
  44. package/summer-cloud/components/status-card.css +158 -0
  45. package/summer-cloud/components/stepper.css +101 -0
  46. package/summer-cloud/components/table.css +20 -0
  47. package/summer-cloud/components/tabs.css +42 -0
  48. package/summer-cloud/design.md +64 -2
  49. package/summer-cloud/index.css +8 -0
  50. package/summer-cloud/tokens.css +6 -0
package/css.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ // Type declaration for every CSS entry point in this package.
2
+ //
3
+ // TypeScript >= 6 (and 5.6+ with noUncheckedSideEffectImports) requires a
4
+ // side-effect import such as `import "@lepid-labs/styles/neon-butterfly"` to
5
+ // resolve to a module with types. CSS files have none, so every CSS subpath
6
+ // in package.json's "exports" carries a "types" condition pointing here.
7
+ // Bundlers and Node keep resolving the "default" condition to the .css file.
8
+ export {};
package/luminous-precision/base.css CHANGED
@@ -33,8 +33,12 @@
33
33
 
34
34
  /* Opt-in page background: soft out-of-focus orchid/teal underlays over the
35
35
  * obsidian base — the "luminous underlay" treatment. Apply to <body>, or to
36
- * the attributed container itself. */
37
- :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-bg {
36
+ * the attributed container itself. An app shell
37
+ * (.ld-shell) always paints it, and so does the <body> around one, so the
38
+ * page stays covered past the shell (overscroll, short pages). */
39
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-bg,
40
+ :where(html[data-ld-style="luminous-precision"]) body:has(.ld-shell),
41
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell {
38
42
  background:
39
43
  radial-gradient(50rem 30rem at 12% -5%, rgba(198, 165, 255, 0.08), transparent 70%),
40
44
  radial-gradient(55rem 35rem at 90% 105%, rgba(0, 245, 255, 0.05), transparent 70%),
package/luminous-precision/components/badge.css CHANGED
@@ -17,3 +17,28 @@
17
17
  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-badge--success { background: rgba(71, 227, 78, 0.15); color: var(--ld-success); }
18
18
  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-badge--warning { background: rgba(255, 184, 108, 0.15); color: var(--ld-warning); }
19
19
  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-badge--danger { background: rgba(255, 77, 109, 0.15); color: var(--ld-danger); }
20
+
21
+ /* Compact size — dashboard pills inside .ld-status-card__meta and row trails. */
22
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-badge--sm {
23
+ padding: 0.125rem 0.375rem;
24
+ font-size: 9px;
25
+ letter-spacing: 0.06em;
26
+ }
27
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-badge[href] { text-decoration: none; }
28
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-badge[href]:hover { filter: brightness(1.1); }
29
+
30
+ /* Pulse — the one solid, glowing call to action (work is waiting on you). */
31
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-badge--pulse {
32
+ background: var(--ld-warning);
33
+ border-color: transparent;
34
+ color: var(--ld-on-primary);
35
+ box-shadow: 0 0 8px color-mix(in srgb, var(--ld-warning) 60%, transparent);
36
+ animation: ld-lp-badge-pulse 2s ease-in-out infinite;
37
+ }
38
+ @keyframes ld-lp-badge-pulse {
39
+ 0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--ld-warning) 50%, transparent); }
40
+ 50% { box-shadow: 0 0 16px color-mix(in srgb, var(--ld-warning) 90%, transparent); }
41
+ }
42
+ @media (prefers-reduced-motion: reduce) {
43
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-badge--pulse { animation: none; }
44
+ }
package/luminous-precision/components/button-group.css ADDED
@@ -0,0 +1,130 @@
1
+ /* luminous-precision — button group: one lit-border track on a sunken well;
2
+ * the segments inside go chromeless and the pressed one lights up in orchid. */
3
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group {
4
+ display: inline-flex;
5
+ align-items: stretch;
6
+ gap: 2px;
7
+ max-width: 100%;
8
+ padding: 3px;
9
+ background: var(--ld-surface-sunken);
10
+ border: 1px solid var(--ld-border-lit);
11
+ border-radius: var(--ld-radius);
12
+ }
13
+ /* --block: fill the row, equal-width segments */
14
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group--block {
15
+ display: flex;
16
+ }
17
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group--block > .ld-btn {
18
+ flex: 1 1 0;
19
+ }
20
+
21
+ /* segments: the track is the chrome, so the button drops its own */
22
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn {
23
+ justify-content: center;
24
+ background: transparent;
25
+ border-color: transparent;
26
+ border-radius: calc(var(--ld-radius) - 3px);
27
+ color: var(--ld-faint);
28
+ white-space: nowrap;
29
+ transition:
30
+ background var(--ld-transition),
31
+ border-color var(--ld-transition),
32
+ color var(--ld-transition),
33
+ box-shadow var(--ld-transition);
34
+ }
35
+ /* variants tint the label only — a solid fill would break the track */
36
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn--primary {
37
+ color: var(--ld-primary);
38
+ }
39
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn--accent {
40
+ color: var(--ld-accent);
41
+ }
42
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn--danger {
43
+ color: var(--ld-danger);
44
+ }
45
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn:hover,
46
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn:focus-visible {
47
+ background: var(--ld-surface);
48
+ border-color: transparent;
49
+ color: var(--ld-on-surface);
50
+ animation: none;
51
+ }
52
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn:focus-visible {
53
+ /* an outline, not the border: it must stay visible on the pressed segment */
54
+ outline: 1px solid var(--ld-primary);
55
+ outline-offset: 1px;
56
+ }
57
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn--primary:hover,
58
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn--primary:focus-visible {
59
+ color: var(--ld-primary);
60
+ }
61
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn--accent:hover,
62
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn--accent:focus-visible {
63
+ color: var(--ld-accent);
64
+ }
65
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn--danger:hover,
66
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn--danger:focus-visible {
67
+ color: var(--ld-danger);
68
+ }
69
+
70
+ /* pressed segment (toggle / segmented use): raised orchid pane with a soft glow */
71
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn--active,
72
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn[aria-pressed="true"] {
73
+ background: var(--ld-surface);
74
+ border-color: var(--ld-primary-border);
75
+ color: var(--ld-primary);
76
+ box-shadow: 0 0 12px var(--ld-primary-glow);
77
+ }
78
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn:disabled {
79
+ background: transparent;
80
+ color: var(--ld-faint);
81
+ }
82
+
83
+ /* Sliding pill: with exactly one pressed segment, its chrome moves to one
84
+ * lit segment on the track, pinned to the segment by anchor positioning, so a
85
+ * change of selection travels instead of blinking. Its inline edges transition
86
+ * separately — with data-ld-dir ("forward" | "back", set by ButtonGroup) the
87
+ * edge nearer the target leads and the far edge trails, stretching the pill
88
+ * across the gap; without it the pill just slides. Several pressed segments
89
+ * (multi-toggle), or no anchor positioning, keep the per-segment chrome above. */
90
+ @supports (anchor-name: --ld-a) and (anchor-scope: --ld-a) {
91
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group {
92
+ position: relative;
93
+ isolation: isolate;
94
+ anchor-scope: --ld-btn-group-active;
95
+ }
96
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group:not(:has(> :is(.ld-btn--active, .ld-btn[aria-pressed="true"]) ~ :is(.ld-btn--active, .ld-btn[aria-pressed="true"]))) > :is(.ld-btn--active, .ld-btn[aria-pressed="true"]) {
97
+ anchor-name: --ld-btn-group-active;
98
+ background: transparent;
99
+ border-color: transparent;
100
+ box-shadow: none;
101
+ }
102
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group:where(:has(> :is(.ld-btn--active, .ld-btn[aria-pressed="true"])):not(:has(> :is(.ld-btn--active, .ld-btn[aria-pressed="true"]) ~ :is(.ld-btn--active, .ld-btn[aria-pressed="true"]))))::before {
103
+ content: "";
104
+ position: absolute;
105
+ z-index: -1;
106
+ position-anchor: --ld-btn-group-active;
107
+ inset-block: anchor(top) anchor(bottom);
108
+ inset-inline: anchor(start) anchor(end);
109
+ background: var(--ld-surface);
110
+ border: 1px solid var(--ld-primary-border);
111
+ border-radius: calc(var(--ld-radius) - 3px);
112
+ box-shadow: 0 0 12px var(--ld-primary-glow);
113
+ pointer-events: none;
114
+ transition: inset-inline-start var(--ld-slide-lead), inset-inline-end var(--ld-slide-lead);
115
+ }
116
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group[data-ld-dir="forward"]::before {
117
+ transition: inset-inline-start var(--ld-slide-trail), inset-inline-end var(--ld-slide-lead);
118
+ }
119
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group[data-ld-dir="back"]::before {
120
+ transition: inset-inline-start var(--ld-slide-lead), inset-inline-end var(--ld-slide-trail);
121
+ }
122
+ }
123
+
124
+ @media (prefers-reduced-motion: reduce) {
125
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group > .ld-btn,
126
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group::before,
127
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn-group[data-ld-dir]::before {
128
+ transition: none;
129
+ }
130
+ }
package/luminous-precision/components/button-hold.css ADDED
@@ -0,0 +1,112 @@
1
+ /* luminous-precision — hold-to-confirm button: rose ring, orchid/teal for the other variants, bloom at 100%
2
+ *
3
+ * Contract: .ld-btn--hold composes with .ld-btn and any variant. The consumer
4
+ * writes one number, --ld-hold in [0, 1]; the ring fill is pure CSS.
5
+ * data-ld-hold="holding" | "fired" carries the behavioural state.
6
+ */
7
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn--hold {
8
+ --ld-hold: 0;
9
+ --ld-hold-color: var(--ld-on-surface); /* neutral on its own */
10
+ position: relative;
11
+ gap: var(--ld-space-3);
12
+ padding: var(--ld-space-2) var(--ld-space-3) var(--ld-space-2) var(--ld-space-2);
13
+ text-align: left;
14
+ user-select: none;
15
+ -webkit-user-select: none;
16
+ touch-action: none; /* a touch hold must not turn into a scroll */
17
+ }
18
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn--hold.ld-btn--primary {
19
+ --ld-hold-color: var(--ld-primary);
20
+ }
21
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn--hold.ld-btn--accent {
22
+ --ld-hold-color: var(--ld-accent);
23
+ }
24
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn--hold.ld-btn--danger {
25
+ --ld-hold-color: var(--ld-danger);
26
+ }
27
+
28
+ /* ring: the icon well, wrapped by a conic fill masked to a 3px stroke */
29
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn__ring {
30
+ position: relative;
31
+ display: inline-grid;
32
+ place-items: center;
33
+ flex: none;
34
+ width: 2.25rem;
35
+ height: 2.25rem;
36
+ border-radius: 50%;
37
+ background: var(--ld-surface-sunken);
38
+ color: var(--ld-hold-color);
39
+ }
40
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn__ring::before {
41
+ content: "";
42
+ position: absolute;
43
+ inset: 0;
44
+ border-radius: 50%;
45
+ background: conic-gradient(var(--ld-hold-color) calc(var(--ld-hold) * 360deg), var(--ld-border-lit) 0);
46
+ -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
47
+ mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
48
+ }
49
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn__ring > svg {
50
+ width: 1rem;
51
+ height: 1rem;
52
+ }
53
+
54
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn__body {
55
+ display: flex;
56
+ flex-direction: column;
57
+ align-items: flex-start;
58
+ gap: 0.125rem;
59
+ line-height: 1.2;
60
+ }
61
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn__label {
62
+ font-weight: var(--ld-font-weight-bold);
63
+ }
64
+ /* the hint and meter restate the ring, so state is never color-only */
65
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn__hint {
66
+ font-size: 11px;
67
+ font-weight: var(--ld-font-weight);
68
+ letter-spacing: normal;
69
+ text-transform: none;
70
+ color: var(--ld-faint);
71
+ }
72
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn__meter {
73
+ margin-left: auto;
74
+ min-width: 3.5ch;
75
+ text-align: right;
76
+ font-family: var(--ld-font-mono);
77
+ font-variant-numeric: tabular-nums;
78
+ font-size: 12px;
79
+ color: var(--ld-faint);
80
+ }
81
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn--hold[data-ld-hold="holding"] .ld-btn__meter {
82
+ color: var(--ld-hold-color);
83
+ }
84
+
85
+ /* fired: the post-commit flash */
86
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn--hold[data-ld-hold="fired"] {
87
+ box-shadow: 0 0 24px color-mix(in srgb, var(--ld-hold-color) 45%, transparent);
88
+ animation: ld-lp-hold-fired 0.6s ease-out;
89
+ }
90
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn--hold[data-ld-hold="fired"] .ld-btn__ring {
91
+ box-shadow: 0 0 16px color-mix(in srgb, var(--ld-hold-color) 55%, transparent);
92
+ }
93
+ @keyframes ld-lp-hold-fired {
94
+ from {
95
+ box-shadow: 0 0 32px color-mix(in srgb, var(--ld-hold-color) 70%, transparent);
96
+ }
97
+ to {
98
+ box-shadow: 0 0 24px color-mix(in srgb, var(--ld-hold-color) 45%, transparent);
99
+ }
100
+ }
101
+
102
+ /* reduced motion: the ring still fills (it is the state, not decoration);
103
+ * only the flash and glow go */
104
+ @media (prefers-reduced-motion: reduce) {
105
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn--hold[data-ld-hold="fired"] {
106
+ animation: none;
107
+ box-shadow: none;
108
+ }
109
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-btn--hold[data-ld-hold="fired"] .ld-btn__ring {
110
+ box-shadow: none;
111
+ }
112
+ }
package/luminous-precision/components/icon-button.css ADDED
@@ -0,0 +1,71 @@
1
+ /* luminous-precision — icon button: chromeless square, faint glyph that lights orchid with a soft glow.
2
+ * Icon-only control (<button> or <a>): give it an accessible name (aria-label).
3
+ * Active/current: .ld-icon-btn--active, [aria-pressed="true"], [aria-current="page"]. */
4
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-icon-btn {
5
+ display: inline-flex;
6
+ align-items: center;
7
+ justify-content: center;
8
+ flex: none;
9
+ width: 2rem;
10
+ height: 2rem;
11
+ padding: 0;
12
+ background: none;
13
+ border: none;
14
+ border-radius: var(--ld-radius);
15
+ color: var(--ld-faint);
16
+ font: inherit;
17
+ line-height: 1;
18
+ text-decoration: none;
19
+ cursor: pointer;
20
+ transition: color var(--ld-transition), background var(--ld-transition), box-shadow var(--ld-transition);
21
+ }
22
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-icon-btn > svg {
23
+ width: 1.25em;
24
+ height: 1.25em;
25
+ flex: none;
26
+ }
27
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-icon-btn:hover,
28
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-icon-btn:focus-visible {
29
+ color: var(--ld-primary);
30
+ background: rgba(210, 187, 255, 0.08);
31
+ box-shadow: 0 0 10px var(--ld-primary-glow);
32
+ outline: none;
33
+ }
34
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-icon-btn:focus-visible {
35
+ box-shadow: 0 0 0 1px var(--ld-primary-border), 0 0 10px var(--ld-primary-glow);
36
+ }
37
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-icon-btn--active,
38
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-icon-btn[aria-pressed="true"],
39
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-icon-btn[aria-current="page"] {
40
+ color: var(--ld-primary);
41
+ background: rgba(210, 187, 255, 0.12);
42
+ box-shadow: inset 0 0 0 1px var(--ld-primary-border);
43
+ }
44
+
45
+ /* danger: destructive action (delete, remove) — faint at rest, red on hover */
46
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-icon-btn--danger:hover,
47
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-icon-btn--danger:focus-visible {
48
+ color: var(--ld-danger);
49
+ background: transparent;
50
+ box-shadow: 0 0 10px rgba(255, 77, 109, 0.45);
51
+ }
52
+
53
+ /* disabled: dimmed and inert — hover never lights it; [aria-disabled] covers <a> */
54
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-icon-btn:disabled,
55
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-icon-btn[aria-disabled="true"] {
56
+ opacity: 0.4;
57
+ color: var(--ld-faint);
58
+ background: none;
59
+ box-shadow: none;
60
+ transform: none;
61
+ cursor: not-allowed;
62
+ }
63
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-icon-btn[aria-disabled="true"] {
64
+ pointer-events: none;
65
+ }
66
+
67
+ @media (prefers-reduced-motion: reduce) {
68
+ :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-icon-btn {
69
+ transition: none;
70
+ }
71
+ }