@dillingerstaffing/strand-vue 0.15.1 → 0.16.0
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.
- package/README.md +3 -3
- package/dist/components/Nav/Nav.vue.d.ts.map +1 -1
- package/dist/components/StarRating/StarRating.vue.d.ts +13 -0
- package/dist/components/StarRating/StarRating.vue.d.ts.map +1 -0
- package/dist/components/StarRating/index.d.ts +3 -0
- package/dist/components/StarRating/index.d.ts.map +1 -0
- package/dist/css/strand-ui.css +231 -16
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +554 -494
- package/dist/index.js.map +1 -1
- package/package.json +4 -3
- package/src/components/Nav/Nav.vue +13 -1
- package/src/components/StarRating/StarRating.test.ts +111 -0
- package/src/components/StarRating/StarRating.vue +97 -0
- package/src/components/StarRating/index.ts +2 -0
- package/src/index.ts +1 -0
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @dillingerstaffing/strand-vue
|
|
2
2
|
|
|
3
|
-
Vue 3 component library built on the [Strand Design Language](https://github.com/dillingerstaffing/strand/blob/main/
|
|
3
|
+
Vue 3 component library built on the [Strand Design Language](https://github.com/dillingerstaffing/strand/blob/main/docs/design-language.md). 31 components. Zero-runtime CSS. WCAG 2.2 AA.
|
|
4
4
|
|
|
5
5
|
## Quick Start
|
|
6
6
|
|
|
@@ -53,8 +53,8 @@ This package produces identical visual output to [@dillingerstaffing/strand-ui](
|
|
|
53
53
|
## Links
|
|
54
54
|
|
|
55
55
|
- [GitHub](https://github.com/dillingerstaffing/strand)
|
|
56
|
-
- [Design Language](https://github.com/dillingerstaffing/strand/blob/main/
|
|
57
|
-
- [HTML Reference (CSS-only API)](https://github.com/dillingerstaffing/strand/blob/main/
|
|
56
|
+
- [Design Language](https://github.com/dillingerstaffing/strand/blob/main/docs/design-language.md)
|
|
57
|
+
- [HTML Reference (CSS-only API)](https://github.com/dillingerstaffing/strand/blob/main/generated/html-reference.md)
|
|
58
58
|
- [Documentation](https://dillingerstaffing.com/labs/strand)
|
|
59
59
|
|
|
60
60
|
Created by [Dillinger Staffing](https://dillingerstaffing.com)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Nav.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Nav/Nav.vue"],"names":[],"mappings":"AAMA;
|
|
1
|
+
{"version":3,"file":"Nav.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Nav/Nav.vue"],"names":[],"mappings":"AAMA;AA2HA,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,QAAQ;IACvB,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAA;IACjB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAkCD,iBAAS,cAAc;WAoFT,OAAO,IAA6B;;sBAXxB,GAAG;yBACA,GAAG;;;;EAe/B;AAYD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;WA3IX,OAAO,EAAE;WAET,OAAO;qFAiJf,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export interface StarRatingProps {
|
|
2
|
+
value: number;
|
|
3
|
+
onChange?: (v: number) => void;
|
|
4
|
+
size?: 'sm' | 'md' | 'lg';
|
|
5
|
+
readOnly?: boolean;
|
|
6
|
+
ariaLabel: string;
|
|
7
|
+
}
|
|
8
|
+
declare const _default: import('vue').DefineComponent<StarRatingProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<StarRatingProps> & Readonly<{}>, {
|
|
9
|
+
size: "sm" | "md" | "lg";
|
|
10
|
+
readOnly: boolean;
|
|
11
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
12
|
+
export default _default;
|
|
13
|
+
//# sourceMappingURL=StarRating.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StarRating.vue.d.ts","sourceRoot":"","sources":["../../../src/components/StarRating/StarRating.vue"],"names":[],"mappings":"AAOA;AAqGA,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;CAClB;;UAHQ,IAAI,GAAG,IAAI,GAAG,IAAI;cACd,OAAO;;AA0HpB,wBAQG"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StarRating/index.ts"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA"}
|
package/dist/css/strand-ui.css
CHANGED
|
@@ -275,6 +275,12 @@ body:has(.strand-banner) .strand-instrument-viewport--full-bleed {
|
|
|
275
275
|
height: calc(100dvh - var(--strand-nav-height) - var(--strand-banner-height, 0px));
|
|
276
276
|
}
|
|
277
277
|
|
|
278
|
+
/* JS-managed fallback for browsers without :has() */
|
|
279
|
+
body.strand-banner-active .strand-instrument-viewport--full-bleed {
|
|
280
|
+
height: calc(100vh - var(--strand-nav-height) - var(--strand-banner-height, 0px));
|
|
281
|
+
height: calc(100dvh - var(--strand-nav-height) - var(--strand-banner-height, 0px));
|
|
282
|
+
}
|
|
283
|
+
|
|
278
284
|
/* ── Variants ── */
|
|
279
285
|
.strand-banner--info {
|
|
280
286
|
background: var(--strand-blue-glow);
|
|
@@ -514,10 +520,18 @@ body:has(.strand-banner) .strand-instrument-viewport--full-bleed {
|
|
|
514
520
|
background: var(--strand-blue-wash);
|
|
515
521
|
}
|
|
516
522
|
|
|
517
|
-
/* ── Ghost variant ──
|
|
523
|
+
/* ── Ghost variant ──
|
|
524
|
+
Uses blue-midnight rather than blue-primary because the ghost
|
|
525
|
+
variant has no solid surface underneath, so its text must
|
|
526
|
+
contrast against whatever page surface the button sits on.
|
|
527
|
+
blue-primary (#3b8ef6) only reaches ~2.8:1 against surface-primary
|
|
528
|
+
and blue-deep (#1d5ad8) still borderlines on glass-nav backdrops
|
|
529
|
+
(~4.27:1 when composited over section content). blue-midnight
|
|
530
|
+
(#1e3e5f) reaches ~7.5:1 against those same surfaces, clears
|
|
531
|
+
WCAG 2.2 AA 4.5:1 comfortably, and preserves the blue identity. */
|
|
518
532
|
.strand-btn--ghost {
|
|
519
533
|
background: transparent;
|
|
520
|
-
color: var(--strand-blue-
|
|
534
|
+
color: var(--strand-blue-midnight);
|
|
521
535
|
}
|
|
522
536
|
|
|
523
537
|
.strand-btn--ghost:hover:not(:disabled) {
|
|
@@ -1526,8 +1540,13 @@ body:has(.strand-banner) .strand-instrument-viewport--full-bleed {
|
|
|
1526
1540
|
border-radius: var(--strand-radius-lg);
|
|
1527
1541
|
overflow: hidden;
|
|
1528
1542
|
position: relative;
|
|
1543
|
+
padding: var(--strand-space-5);
|
|
1529
1544
|
}
|
|
1530
1545
|
|
|
1546
|
+
/* Dark-surface overrides: KV and log text needs higher contrast on #0F192A */
|
|
1547
|
+
.strand-instrument-viewport .strand-kv__label { color: var(--strand-gray-400); }
|
|
1548
|
+
.strand-instrument-viewport .strand-kv__value { color: var(--strand-gray-200); }
|
|
1549
|
+
|
|
1531
1550
|
.strand-instrument-viewport__label {
|
|
1532
1551
|
color: var(--strand-gray-400);
|
|
1533
1552
|
font-family: var(--strand-font-mono);
|
|
@@ -1986,7 +2005,7 @@ body:has(.strand-banner) .strand-instrument-viewport--full-bleed {
|
|
|
1986
2005
|
box-shadow var(--strand-duration-normal) ease;
|
|
1987
2006
|
}
|
|
1988
2007
|
|
|
1989
|
-
.strand-search-bar__inner:
|
|
2008
|
+
.strand-search-bar__inner:focus-within {
|
|
1990
2009
|
border-color: var(--strand-instrument-border-strong);
|
|
1991
2010
|
box-shadow:
|
|
1992
2011
|
var(--strand-instrument-shadow-deep),
|
|
@@ -3215,15 +3234,20 @@ body:has(.strand-banner) .strand-instrument-viewport--full-bleed {
|
|
|
3215
3234
|
}
|
|
3216
3235
|
}
|
|
3217
3236
|
|
|
3218
|
-
/* ── Glassmorphic variant (DL 11.5: "white or glassmorphic") ──
|
|
3237
|
+
/* ── Glassmorphic variant (DL 11.5: "white or glassmorphic") ──
|
|
3238
|
+
The glass nav's rendered height is the token. Previous versions set
|
|
3239
|
+
`height: auto; padding: var(--strand-space-4) 0` which produced a
|
|
3240
|
+
~77px render (token is 64px), so `body:has(.strand-nav--glass) {
|
|
3241
|
+
padding-top: var(--strand-nav-height) }` left content behind the nav.
|
|
3242
|
+
Pinning height to the token keeps the body offset rule honest across
|
|
3243
|
+
every consumer. */
|
|
3219
3244
|
.strand-nav--glass {
|
|
3220
3245
|
position: fixed;
|
|
3221
3246
|
top: 0;
|
|
3222
3247
|
left: 0;
|
|
3223
3248
|
right: 0;
|
|
3224
3249
|
z-index: 100;
|
|
3225
|
-
height:
|
|
3226
|
-
padding: var(--strand-space-4) 0;
|
|
3250
|
+
height: var(--strand-nav-height);
|
|
3227
3251
|
background: var(--strand-glass-bg);
|
|
3228
3252
|
-webkit-backdrop-filter: blur(var(--strand-glass-blur));
|
|
3229
3253
|
backdrop-filter: blur(var(--strand-glass-blur));
|
|
@@ -3578,9 +3602,15 @@ body:has(.strand-banner) .strand-instrument-viewport--full-bleed {
|
|
|
3578
3602
|
border-top: 1px solid var(--strand-gray-200);
|
|
3579
3603
|
}
|
|
3580
3604
|
|
|
3581
|
-
/* ── Scroll target (anchored section with nav offset) ──
|
|
3605
|
+
/* ── Scroll target (anchored section with nav offset) ──
|
|
3606
|
+
Global scroll-padding-top on html already offsets anchor scrolls
|
|
3607
|
+
by the nav+banner stack height (see packages/tokens/css/base.css).
|
|
3608
|
+
This modifier is retained as an explicit per-section opt-in for
|
|
3609
|
+
consumers who want to reinforce the contract locally, and it
|
|
3610
|
+
tracks the same tokens so a nav-height change propagates without
|
|
3611
|
+
hunting. */
|
|
3582
3612
|
.strand-section--scroll-target {
|
|
3583
|
-
scroll-margin-top:
|
|
3613
|
+
scroll-margin-top: calc(var(--strand-nav-height) + var(--strand-banner-height, 0px));
|
|
3584
3614
|
}
|
|
3585
3615
|
|
|
3586
3616
|
|
|
@@ -4038,6 +4068,110 @@ body:has(.strand-banner) .strand-instrument-viewport--full-bleed {
|
|
|
4038
4068
|
.strand-stack--gap-8 { gap: var(--strand-space-8); }
|
|
4039
4069
|
|
|
4040
4070
|
|
|
4071
|
+
/* StarRating */
|
|
4072
|
+
/*! Strand UI | MIT License | dillingerstaffing.com */
|
|
4073
|
+
|
|
4074
|
+
/*! Strand UI | MIT License | dillingerstaffing.com */
|
|
4075
|
+
|
|
4076
|
+
/* ── Base ── */
|
|
4077
|
+
.strand-star-rating {
|
|
4078
|
+
display: inline-flex;
|
|
4079
|
+
align-items: center;
|
|
4080
|
+
gap: var(--strand-space-1);
|
|
4081
|
+
color: var(--strand-gray-900);
|
|
4082
|
+
line-height: 1;
|
|
4083
|
+
}
|
|
4084
|
+
|
|
4085
|
+
/* ── Star button ── */
|
|
4086
|
+
.strand-star-rating__star {
|
|
4087
|
+
display: inline-flex;
|
|
4088
|
+
align-items: center;
|
|
4089
|
+
justify-content: center;
|
|
4090
|
+
background: transparent;
|
|
4091
|
+
border: 0;
|
|
4092
|
+
padding: 0;
|
|
4093
|
+
margin: 0;
|
|
4094
|
+
cursor: pointer;
|
|
4095
|
+
color: var(--strand-gray-200);
|
|
4096
|
+
border-radius: var(--strand-radius-sm);
|
|
4097
|
+
transition:
|
|
4098
|
+
color var(--strand-duration-fast) var(--strand-ease-out-quart),
|
|
4099
|
+
transform var(--strand-duration-fast) var(--strand-ease-out-quart);
|
|
4100
|
+
min-width: var(--strand-touch-target);
|
|
4101
|
+
min-height: var(--strand-touch-target);
|
|
4102
|
+
font-family: inherit;
|
|
4103
|
+
}
|
|
4104
|
+
|
|
4105
|
+
.strand-star-rating__star:focus-visible {
|
|
4106
|
+
outline: none;
|
|
4107
|
+
box-shadow: var(--strand-focus-ring);
|
|
4108
|
+
}
|
|
4109
|
+
|
|
4110
|
+
.strand-star-rating__star--active {
|
|
4111
|
+
color: var(--strand-amber-caution);
|
|
4112
|
+
}
|
|
4113
|
+
|
|
4114
|
+
.strand-star-rating__star:not(:disabled):hover .strand-star-rating__glyph,
|
|
4115
|
+
.strand-star-rating__star:not(:disabled):focus-visible .strand-star-rating__glyph {
|
|
4116
|
+
transform: scale(1.08);
|
|
4117
|
+
}
|
|
4118
|
+
|
|
4119
|
+
/* ── Glyph ── */
|
|
4120
|
+
.strand-star-rating__glyph {
|
|
4121
|
+
display: inline-block;
|
|
4122
|
+
font-size: inherit;
|
|
4123
|
+
line-height: 1;
|
|
4124
|
+
transition: transform var(--strand-duration-fast) var(--strand-ease-out-quart);
|
|
4125
|
+
}
|
|
4126
|
+
|
|
4127
|
+
/* ── Sizes ── */
|
|
4128
|
+
.strand-star-rating--sm {
|
|
4129
|
+
font-size: 1rem;
|
|
4130
|
+
}
|
|
4131
|
+
|
|
4132
|
+
.strand-star-rating--sm .strand-star-rating__star {
|
|
4133
|
+
min-width: 32px;
|
|
4134
|
+
min-height: 32px;
|
|
4135
|
+
}
|
|
4136
|
+
|
|
4137
|
+
.strand-star-rating--md {
|
|
4138
|
+
font-size: 1.5rem;
|
|
4139
|
+
}
|
|
4140
|
+
|
|
4141
|
+
.strand-star-rating--md .strand-star-rating__star {
|
|
4142
|
+
min-width: var(--strand-touch-target);
|
|
4143
|
+
min-height: var(--strand-touch-target);
|
|
4144
|
+
}
|
|
4145
|
+
|
|
4146
|
+
.strand-star-rating--lg {
|
|
4147
|
+
font-size: 2.25rem;
|
|
4148
|
+
}
|
|
4149
|
+
|
|
4150
|
+
.strand-star-rating--lg .strand-star-rating__star {
|
|
4151
|
+
min-width: 56px;
|
|
4152
|
+
min-height: 56px;
|
|
4153
|
+
}
|
|
4154
|
+
|
|
4155
|
+
/* ── Read-only ── */
|
|
4156
|
+
.strand-star-rating--readonly .strand-star-rating__star {
|
|
4157
|
+
cursor: default;
|
|
4158
|
+
pointer-events: none;
|
|
4159
|
+
}
|
|
4160
|
+
|
|
4161
|
+
/* ── Reduced motion ── */
|
|
4162
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4163
|
+
.strand-star-rating__star,
|
|
4164
|
+
.strand-star-rating__glyph {
|
|
4165
|
+
transition: none;
|
|
4166
|
+
}
|
|
4167
|
+
|
|
4168
|
+
.strand-star-rating__star:not(:disabled):hover .strand-star-rating__glyph,
|
|
4169
|
+
.strand-star-rating__star:not(:disabled):focus-visible .strand-star-rating__glyph {
|
|
4170
|
+
transform: none;
|
|
4171
|
+
}
|
|
4172
|
+
}
|
|
4173
|
+
|
|
4174
|
+
|
|
4041
4175
|
/* Switch */
|
|
4042
4176
|
/*! Strand UI | MIT License | dillingerstaffing.com */
|
|
4043
4177
|
|
|
@@ -4231,16 +4365,39 @@ body:has(.strand-banner) .strand-instrument-viewport--full-bleed {
|
|
|
4231
4365
|
|
|
4232
4366
|
/*! Strand UI | MIT License | dillingerstaffing.com */
|
|
4233
4367
|
|
|
4234
|
-
/* ── Tab list ──
|
|
4368
|
+
/* ── Tab list ──
|
|
4369
|
+
Horizontally scroll the tablist when the combined tab widths exceed
|
|
4370
|
+
the container. Without this, a tablist wider than the viewport
|
|
4371
|
+
pushes the document horizontally and every other section inherits
|
|
4372
|
+
the scrollbar. The tablist keeps its own overflow so the overflow
|
|
4373
|
+
stays local, keyboard users still focus every tab in order, and
|
|
4374
|
+
scroll-snap preserves the tactile feel of a control panel. */
|
|
4235
4375
|
.strand-tabs [role="tablist"] {
|
|
4236
4376
|
display: flex;
|
|
4237
4377
|
gap: var(--strand-space-1);
|
|
4238
4378
|
border-bottom: 1px solid var(--strand-gray-200);
|
|
4379
|
+
overflow-x: auto;
|
|
4380
|
+
scrollbar-width: none;
|
|
4381
|
+
-ms-overflow-style: none;
|
|
4382
|
+
scroll-snap-type: x proximity;
|
|
4383
|
+
/* Let flex children keep their intrinsic width so they don't shrink
|
|
4384
|
+
past their text before we allow scrolling. */
|
|
4385
|
+
flex-wrap: nowrap;
|
|
4239
4386
|
}
|
|
4240
4387
|
|
|
4241
|
-
|
|
4388
|
+
.strand-tabs [role="tablist"]::-webkit-scrollbar {
|
|
4389
|
+
display: none;
|
|
4390
|
+
}
|
|
4391
|
+
|
|
4392
|
+
/* ── Tab button ──
|
|
4393
|
+
flex-shrink: 0 keeps tabs at their intrinsic text width so the
|
|
4394
|
+
tablist scrolls instead of squeezing tab labels. scroll-snap-align
|
|
4395
|
+
pins each tab's start edge when the user flicks, preserving the
|
|
4396
|
+
control-panel tactile feel. */
|
|
4242
4397
|
.strand-tabs__tab {
|
|
4243
4398
|
position: relative;
|
|
4399
|
+
flex-shrink: 0;
|
|
4400
|
+
scroll-snap-align: start;
|
|
4244
4401
|
padding: var(--strand-space-2) var(--strand-space-4);
|
|
4245
4402
|
border: none;
|
|
4246
4403
|
border-bottom: 2px solid transparent;
|
|
@@ -4274,7 +4431,12 @@ body:has(.strand-banner) .strand-instrument-viewport--full-bleed {
|
|
|
4274
4431
|
the tab acts like a toggle on a control panel rather than a
|
|
4275
4432
|
content navigation. Pairs with strand-tabs__panel--reveal. */
|
|
4276
4433
|
.strand-tabs--instrument [role="tablist"] {
|
|
4277
|
-
|
|
4434
|
+
/* Use `safe center` so centering only applies when the content fits.
|
|
4435
|
+
When the tablist overflows, flex will clip the near edge, hiding
|
|
4436
|
+
the first tab from users who scrolled to the start. `safe center`
|
|
4437
|
+
degrades to `start` on overflow, which keeps every tab reachable
|
|
4438
|
+
via scroll. */
|
|
4439
|
+
justify-content: safe center;
|
|
4278
4440
|
gap: 0;
|
|
4279
4441
|
border-bottom: 1px solid var(--strand-surface-subtle);
|
|
4280
4442
|
}
|
|
@@ -4683,6 +4845,16 @@ body:has(.strand-banner) .strand-instrument-viewport--full-bleed {
|
|
|
4683
4845
|
.strand-tooltip__wrapper {
|
|
4684
4846
|
position: relative;
|
|
4685
4847
|
display: inline-flex;
|
|
4848
|
+
/* Scope tooltip popup layout to this wrapper so an absolutely
|
|
4849
|
+
positioned, nowrap tooltip cannot bloat an ancestor's scrollWidth
|
|
4850
|
+
on narrow viewports. Without this, a long tooltip next to a
|
|
4851
|
+
viewport-edge trigger overflows the trigger's containing card and
|
|
4852
|
+
fails overflow-budget tests like "card does not overflow 375px".
|
|
4853
|
+
See packages/strand-ui/src/components/Tooltip/Tooltip.tsx for the
|
|
4854
|
+
rendered DOM; the popup uses `position: absolute` + nowrap, which
|
|
4855
|
+
is enough to stop layout-flow contribution but NOT scroll-extent
|
|
4856
|
+
contribution without `contain: layout`. */
|
|
4857
|
+
contain: layout;
|
|
4686
4858
|
}
|
|
4687
4859
|
|
|
4688
4860
|
/* ── Tooltip ── */
|
|
@@ -4984,6 +5156,17 @@ body:has(.strand-banner) .strand-instrument-viewport--full-bleed {
|
|
|
4984
5156
|
font-size: var(--strand-text-xs);
|
|
4985
5157
|
}
|
|
4986
5158
|
|
|
5159
|
+
/* ── Font family utilities ──
|
|
5160
|
+
Pure typographic utilities for composing text styles when
|
|
5161
|
+
the full .strand-overline / .strand-kv / .strand-data-readout
|
|
5162
|
+
component semantics are too heavy. Use on inline meta rows,
|
|
5163
|
+
cadence lines, and data-adjacent body copy that should read
|
|
5164
|
+
as instrument output without inheriting the overline's letter
|
|
5165
|
+
spacing and weight. */
|
|
5166
|
+
.strand-font-mono {
|
|
5167
|
+
font-family: var(--strand-font-mono);
|
|
5168
|
+
}
|
|
5169
|
+
|
|
4987
5170
|
/* ══════════════════════════════════════════════════
|
|
4988
5171
|
COMPOSITION MOLECULES (DL Part XI-B Grammar)
|
|
4989
5172
|
Named derivations of DL composition primitives.
|
|
@@ -5011,7 +5194,7 @@ body:has(.strand-banner) .strand-instrument-viewport--full-bleed {
|
|
|
5011
5194
|
display: flex;
|
|
5012
5195
|
justify-content: space-between;
|
|
5013
5196
|
align-items: center;
|
|
5014
|
-
padding
|
|
5197
|
+
padding: var(--strand-space-2) var(--strand-space-4);
|
|
5015
5198
|
}
|
|
5016
5199
|
|
|
5017
5200
|
.strand-kv + .strand-kv {
|
|
@@ -5030,8 +5213,9 @@ body:has(.strand-banner) .strand-instrument-viewport--full-bleed {
|
|
|
5030
5213
|
.strand-kv__value {
|
|
5031
5214
|
font-family: var(--strand-font-mono);
|
|
5032
5215
|
font-size: var(--strand-text-xs);
|
|
5033
|
-
color: var(--strand-gray-
|
|
5216
|
+
color: var(--strand-gray-700);
|
|
5034
5217
|
font-variant-numeric: tabular-nums;
|
|
5218
|
+
text-align: right;
|
|
5035
5219
|
}
|
|
5036
5220
|
|
|
5037
5221
|
.strand-kv__value--status {
|
|
@@ -5043,8 +5227,9 @@ body:has(.strand-banner) .strand-instrument-viewport--full-bleed {
|
|
|
5043
5227
|
time(OVERLINE) + status(OVERLINE+COLOR_SEMANTIC) + text(SECONDARY) + RANK_BORDER */
|
|
5044
5228
|
.strand-log {
|
|
5045
5229
|
display: flex;
|
|
5230
|
+
align-items: baseline;
|
|
5046
5231
|
gap: var(--strand-space-3);
|
|
5047
|
-
padding
|
|
5232
|
+
padding: var(--strand-space-2) var(--strand-space-4);
|
|
5048
5233
|
}
|
|
5049
5234
|
|
|
5050
5235
|
.strand-log + .strand-log {
|
|
@@ -5076,6 +5261,18 @@ body:has(.strand-banner) .strand-instrument-viewport--full-bleed {
|
|
|
5076
5261
|
.strand-log__status--warning { color: var(--strand-amber-caution); }
|
|
5077
5262
|
.strand-log__status--error { color: var(--strand-red-alert); }
|
|
5078
5263
|
|
|
5264
|
+
.strand-log__text {
|
|
5265
|
+
font-family: var(--strand-font-mono);
|
|
5266
|
+
font-size: var(--strand-text-xs);
|
|
5267
|
+
color: var(--strand-gray-300);
|
|
5268
|
+
line-height: var(--strand-leading-normal);
|
|
5269
|
+
}
|
|
5270
|
+
|
|
5271
|
+
.strand-log__text strong {
|
|
5272
|
+
font-weight: var(--strand-weight-semibold);
|
|
5273
|
+
color: var(--strand-gray-100);
|
|
5274
|
+
}
|
|
5275
|
+
|
|
5079
5276
|
/* ── Metric Row ──
|
|
5080
5277
|
Derivation: centered-group (DL 11.10).
|
|
5081
5278
|
self-contained(atom)* with center distribution + responsive gap */
|
|
@@ -5094,8 +5291,8 @@ body:has(.strand-banner) .strand-instrument-viewport--full-bleed {
|
|
|
5094
5291
|
display: flex;
|
|
5095
5292
|
gap: var(--strand-space-2);
|
|
5096
5293
|
align-items: flex-end;
|
|
5097
|
-
height: var(--strand-space-
|
|
5098
|
-
padding: var(--strand-space-
|
|
5294
|
+
height: var(--strand-space-40);
|
|
5295
|
+
padding: var(--strand-space-4);
|
|
5099
5296
|
}
|
|
5100
5297
|
|
|
5101
5298
|
.strand-bar-chart__col {
|
|
@@ -5134,6 +5331,13 @@ body:has(.strand-banner) .strand-instrument-viewport--full-bleed {
|
|
|
5134
5331
|
color: var(--strand-gray-400);
|
|
5135
5332
|
}
|
|
5136
5333
|
|
|
5334
|
+
/* ── Bar chart size modifiers ── */
|
|
5335
|
+
.strand-bar-chart--sm { height: var(--strand-space-24); }
|
|
5336
|
+
.strand-bar-chart--lg { height: var(--strand-space-48); }
|
|
5337
|
+
|
|
5338
|
+
/* ── Nav offset for glass (fixed) nav ── */
|
|
5339
|
+
.strand-nav-offset { padding-top: var(--strand-space-16); }
|
|
5340
|
+
|
|
5137
5341
|
/* ══════════════════════════════════════════════════
|
|
5138
5342
|
UTILITIES
|
|
5139
5343
|
══════════════════════════════════════════════════ */
|
|
@@ -5250,6 +5454,17 @@ body:has(.strand-banner) .strand-instrument-viewport--full-bleed {
|
|
|
5250
5454
|
background: var(--strand-amber-tint);
|
|
5251
5455
|
}
|
|
5252
5456
|
|
|
5457
|
+
/* COMMITTED variant: post-RSVP confirmation on dark instrument
|
|
5458
|
+
viewports. Vital teal on translucent fill and 30% alpha border
|
|
5459
|
+
signals earned state (DL Principle 5: Earned Elevation) without
|
|
5460
|
+
stealing focus from the event title. The translucent composition
|
|
5461
|
+
lets the chip sit cleanly on both dark and light surfaces. */
|
|
5462
|
+
.strand-status-chip--committed {
|
|
5463
|
+
color: var(--strand-teal-vital);
|
|
5464
|
+
background: color-mix(in srgb, var(--strand-teal-vital) 16%, transparent);
|
|
5465
|
+
border: 1px solid color-mix(in srgb, var(--strand-teal-vital) 30%, transparent);
|
|
5466
|
+
}
|
|
5467
|
+
|
|
5253
5468
|
/* ── Viewport flex modifiers (component showcase layout) ── */
|
|
5254
5469
|
.strand-viewport--flex {
|
|
5255
5470
|
display: flex;
|
package/dist/index.d.ts
CHANGED
|
@@ -35,4 +35,5 @@ export { default as Tooltip } from './components/Tooltip/Tooltip.vue';
|
|
|
35
35
|
export { default as Progress } from './components/Progress/Progress.vue';
|
|
36
36
|
export { default as Spinner } from './components/Spinner/Spinner.vue';
|
|
37
37
|
export { default as Skeleton } from './components/Skeleton/Skeleton.vue';
|
|
38
|
+
export { default as StarRating } from './components/StarRating/StarRating.vue';
|
|
38
39
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,uDAAuD;AAGvD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAG5E,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAG5E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,wDAAwD,CAAC;AACvG,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAGrF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAG1D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,uDAAuD;AAGvD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAG5E,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAG5E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,wDAAwD,CAAC;AACvG,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAGrF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAG1D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wCAAwC,CAAC"}
|