@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 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/DESIGN_LANGUAGE.md). 31 components. Zero-runtime CSS. WCAG 2.2 AA.
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/DESIGN_LANGUAGE.md)
57
- - [HTML Reference (CSS-only API)](https://github.com/dillingerstaffing/strand/blob/main/HTML_REFERENCE.md)
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;AA+GA,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;AAsBD,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;WA/HX,OAAO,EAAE;WAET,OAAO;qFAqIf,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"}
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,3 @@
1
+ /*! Strand Vue | MIT License | dillingerstaffing.com */
2
+ export { default as StarRating } from './StarRating.vue';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -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"}
@@ -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-primary);
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:has(.strand-search-bar__input:focus) {
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: auto;
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: 5rem;
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
- /* ── Tab button ── */
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
- justify-content: center;
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-block: var(--strand-space-2);
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-600);
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-block: var(--strand-space-2);
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-24);
5098
- padding: var(--strand-space-5);
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
@@ -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"}