@dillingerstaffing/strand-vue 0.5.1 → 0.7.0

package/README.md

@@ -36,13 +36,15 @@ import { Button, Card, Stack, Input } from '@dillingerstaffing/strand-vue'
 
 ## Components
 
-31 components across 5 categories. Every component includes all interaction states, keyboard navigation, ARIA compliance, and `prefers-reduced-motion` support.
+34 components across 7 categories. Every component includes all interaction states, keyboard navigation, ARIA compliance, and `prefers-reduced-motion` support.
 
 **Input:** Button, Input, Textarea, Select, Checkbox, Radio, Switch, Slider, FormField
-**Display:** Card, Badge, Avatar, Tag, Table, DataReadout
+**Display:** Card, Badge, Avatar, Tag, Table, DataReadout, CodeBlock
 **Layout:** Stack, Grid, Container, Divider, Section
 **Navigation:** Link, Tabs, Breadcrumb, Nav
 **Feedback:** Toast, Alert, Dialog, Tooltip, Progress, Spinner, Skeleton
+**Surface:** InstrumentViewport
+**Animation:** ScrollReveal
 
 ## Same CSS, Different Framework
 

package/dist/components/Alert/Alert.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.vue"],"names":[],"mappings":"AACA;AA0DA,MAAM,WAAW,UAAU;IACzB,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;IACjD,0BAA0B;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAoCD,iBAAS,cAAc;WAoCT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAaD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;YA9FV,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO;iBAEnC,OAAO;wFAqGrB,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"}
+{"version":3,"file":"Alert.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.vue"],"names":[],"mappings":"AACA;AAoEA,MAAM,WAAW,UAAU;IACzB,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;IACjD,0BAA0B;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AA6CD,iBAAS,cAAc;WAwCT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAcD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;YA5GV,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO;iBAEnC,OAAO;wFAmHrB,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"}

package/dist/components/InstrumentViewport/InstrumentViewport.vue.d.ts

@@ -0,0 +1,27 @@
+interface Props {
+    /** Show grid overlay lines */
+    grid?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    className: string;
+    grid: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=InstrumentViewport.vue.d.ts.map

package/dist/components/InstrumentViewport/InstrumentViewport.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InstrumentViewport.vue.d.ts","sourceRoot":"","sources":["../../../src/components/InstrumentViewport/InstrumentViewport.vue"],"names":[],"mappings":"AACA;AAoCA,UAAU,KAAK;IACb,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAwBD,iBAAS,cAAc;WAwBT,OAAO,IAA6B;;yBAXrB,GAAG;;;;EAgB/B;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;eAjEP,MAAM;UAFX,OAAO;wFA2Ed,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"}

package/dist/components/InstrumentViewport/index.d.ts

@@ -0,0 +1,2 @@
+export { default as InstrumentViewport } from './InstrumentViewport.vue';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/InstrumentViewport/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/InstrumentViewport/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/components/ScrollReveal/ScrollReveal.vue.d.ts

@@ -0,0 +1,34 @@
+interface Props {
+    /** Intersection threshold (0-1) to trigger reveal */
+    threshold?: number;
+    /** Only reveal once (do not hide on exit) */
+    once?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        elRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    className: string;
+    threshold: number;
+    once: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    elRef: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=ScrollReveal.vue.d.ts.map

package/dist/components/ScrollReveal/ScrollReveal.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollReveal.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollReveal/ScrollReveal.vue"],"names":[],"mappings":"AACA;AAwEA,UAAU,KAAK;IACb,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA2DD,iBAAS,cAAc;WA4BT,OAAO,IAA6B;;yBAZrB,GAAG;;;;;;EAiB/B;AAWD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;eAzGP,MAAM;eAJN,MAAM;UAEX,OAAO;;;kBAoHd,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"}

package/dist/components/ScrollReveal/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ScrollReveal } from './ScrollReveal.vue';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ScrollReveal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollReveal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/components/Toast/Toast.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.vue"],"names":[],"mappings":"AACA;AAmDA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAE7C,MAAM,WAAW,UAAU;IACzB,oBAAoB;IACpB,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,yBAAyB;IACzB,OAAO,EAAE,MAAM,CAAA;CAChB;;;;;;YAHU,WAAW;;AAoFtB,wBASG"}
+{"version":3,"file":"Toast.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.vue"],"names":[],"mappings":"AACA;AA6DA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAE7C,MAAM,WAAW,UAAU;IACzB,oBAAoB;IACpB,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,yBAAyB;IACzB,OAAO,EAAE,MAAM,CAAA;CAChB;;;;;;YAHU,WAAW;;AAkGtB,wBASG"}

package/dist/components/Toast/ToastProvider.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/ToastProvider.vue"],"names":[],"mappings":"AACA;AA2IA,iBAAS,cAAc;WA+CT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,+QAKnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAEpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ToastProvider.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/ToastProvider.vue"],"names":[],"mappings":"AACA;AAkKA,iBAAS,cAAc;WAmDT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAWD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,+QAKnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAEpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/css/strand-ui.css

@@ -13,34 +13,45 @@
   justify-content: space-between;
   width: 100%;
   padding: var(--strand-space-6);
-  padding-left: var(--strand-space-5);
   border-radius: var(--strand-radius-md);
-  border-left: 4px solid transparent;
   font-family: var(--strand-font-sans);
   font-size: var(--strand-text-sm);
+  background: var(--strand-surface-recessed);
 }
 
-/* ── Status variants ── */
+/* ── Status variants (neutral background, status color on prefix only) ── */
 .strand-alert--info {
-  background: var(--strand-blue-glow);
-  border-left-color: var(--strand-blue-primary);
+  background: var(--strand-surface-recessed);
 }
 
 .strand-alert--success {
-  background: rgba(34, 197, 94, 0.08);
-  border-left-color: var(--strand-green-positive);
+  background: var(--strand-surface-recessed);
 }
 
 .strand-alert--warning {
-  background: rgba(245, 158, 11, 0.08);
-  border-left-color: var(--strand-amber-caution);
+  background: var(--strand-surface-recessed);
 }
 
 .strand-alert--error {
-  background: rgba(239, 68, 68, 0.08);
-  border-left-color: var(--strand-red-alert);
+  background: var(--strand-surface-recessed);
 }
 
+/* ── Status prefix ── */
+.strand-alert__status {
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
+  font-weight: var(--strand-weight-semibold);
+  letter-spacing: var(--strand-tracking-wider);
+  text-transform: uppercase;
+  margin-right: var(--strand-space-3);
+  flex-shrink: 0;
+}
+
+.strand-alert--info .strand-alert__status { color: var(--strand-blue-primary); }
+.strand-alert--success .strand-alert__status { color: var(--strand-teal-vital); }
+.strand-alert--warning .strand-alert__status { color: var(--strand-amber-caution); }
+.strand-alert--error .strand-alert__status { color: var(--strand-red-alert); }
+
 /* ── Content ── */
 .strand-alert__content {
   flex: 1;
@@ -53,8 +64,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: var(--strand-space-6);
+  height: var(--strand-space-6);
   margin-left: var(--strand-space-4);
   padding: 0;
   border: none;
@@ -134,8 +145,8 @@
 }
 
 .strand-avatar--xl {
-  width: 64px;
-  height: 64px;
+  width: var(--strand-space-16);
+  height: var(--strand-space-16);
   font-size: var(--strand-text-lg);
 }
 
@@ -314,13 +325,13 @@
 .strand-btn--sm {
   padding: var(--strand-space-1) var(--strand-space-3);
   font-size: var(--strand-text-sm);
-  min-height: 32px;
+  min-height: var(--strand-touch-target);
 }
 
 .strand-btn--md {
   padding: calc(var(--strand-space-2) + var(--strand-space-1) / 2) var(--strand-space-5);
   font-size: var(--strand-text-sm);
-  min-height: 40px;
+  min-height: var(--strand-touch-target);
 }
 
 .strand-btn--lg {
@@ -332,12 +343,12 @@
 /* ── Icon-only ── */
 .strand-btn--icon-only.strand-btn--sm {
   padding: var(--strand-space-1);
-  min-width: 32px;
+  min-width: var(--strand-touch-target);
 }
 
 .strand-btn--icon-only.strand-btn--md {
   padding: var(--strand-space-2);
-  min-width: 40px;
+  min-width: var(--strand-touch-target);
 }
 
 .strand-btn--icon-only.strand-btn--lg {
@@ -555,6 +566,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--strand-space-2);
+  min-height: var(--strand-touch-target);
   cursor: pointer;
   user-select: none;
   font-family: var(--strand-font-sans);
@@ -581,8 +593,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 18px;
-  height: 18px;
+  width: var(--strand-control-size);
+  height: var(--strand-control-size);
   border: 1px solid var(--strand-gray-200);
   border-radius: var(--strand-radius-sm);
   background: var(--strand-surface-elevated);
@@ -676,7 +688,7 @@
   line-height: var(--strand-leading-relaxed);
   color: var(--strand-blue-midnight);
   background: var(--strand-surface-recessed);
-  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
+  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06); /* strand-blue-abyss at 6% opacity */
   border-radius: var(--strand-radius-lg);
   padding: var(--strand-space-3) var(--strand-space-4);
   overflow-x: auto;
@@ -919,10 +931,12 @@
 
 /* ── Label ── */
 .strand-form-field__label {
-  font-family: var(--strand-font-sans);
-  font-size: var(--strand-text-sm);
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
   font-weight: var(--strand-weight-medium);
-  color: var(--strand-gray-700);
+  letter-spacing: var(--strand-tracking-widest);
+  text-transform: uppercase;
+  color: var(--strand-gray-500);
   line-height: var(--strand-leading-snug);
 }
 
@@ -1081,6 +1095,47 @@
 }
 
 
+/* InstrumentViewport */
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+.strand-instrument-viewport {
+  background: var(--strand-blue-abyss);
+  color: var(--strand-gray-100);
+  border-radius: var(--strand-radius-lg);
+  overflow: hidden;
+  position: relative;
+}
+
+.strand-instrument-viewport__label {
+  color: var(--strand-gray-400);
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
+  font-weight: var(--strand-weight-medium);
+  letter-spacing: var(--strand-tracking-widest);
+  text-transform: uppercase;
+}
+
+.strand-instrument-viewport__value {
+  color: var(--strand-on-blue-primary);
+  font-family: var(--strand-font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Optional grid overlay */
+.strand-instrument-viewport--grid::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(rgba(59, 142, 246, 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(59, 142, 246, 0.04) 1px, transparent 1px);
+  background-size: var(--strand-viewport-grid-size) var(--strand-viewport-grid-size);
+  pointer-events: none;
+}
+
+
 /* Link */
 /*! Strand UI | MIT License | dillingerstaffing.com */
 
@@ -1125,7 +1180,7 @@
 .strand-nav {
   position: relative;
   width: 100%;
-  height: 64px;
+  height: var(--strand-nav-height);
   background: var(--strand-surface-elevated);
   border-bottom: 1px solid var(--strand-gray-200);
   font-family: var(--strand-font-sans);
@@ -1286,7 +1341,7 @@
 
   .strand-nav {
     height: auto;
-    min-height: 64px;
+    min-height: var(--strand-nav-height);
   }
 }
 
@@ -1408,6 +1463,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--strand-space-2);
+  min-height: var(--strand-touch-target);
   cursor: pointer;
   user-select: none;
   font-family: var(--strand-font-sans);
@@ -1434,8 +1490,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 18px;
-  height: 18px;
+  width: var(--strand-control-size);
+  height: var(--strand-control-size);
   border: 1px solid var(--strand-gray-200);
   border-radius: var(--strand-radius-full);
   background: var(--strand-surface-elevated);
@@ -1501,6 +1557,40 @@
 }
 
 
+/* ScrollReveal */
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+.strand-reveal {
+  opacity: 0;
+  transform: translateY(24px);
+  transition: opacity var(--strand-duration-glacial) var(--strand-ease-out-expo),
+              transform var(--strand-duration-glacial) var(--strand-ease-out-expo);
+}
+
+.strand-reveal--visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Stagger children */
+.strand-reveal-group > .strand-reveal:nth-child(1) { transition-delay: 0ms; }
+.strand-reveal-group > .strand-reveal:nth-child(2) { transition-delay: var(--strand-stagger-delay); }
+.strand-reveal-group > .strand-reveal:nth-child(3) { transition-delay: calc(var(--strand-stagger-delay) * 2); }
+.strand-reveal-group > .strand-reveal:nth-child(4) { transition-delay: calc(var(--strand-stagger-delay) * 3); }
+.strand-reveal-group > .strand-reveal:nth-child(5) { transition-delay: calc(var(--strand-stagger-delay) * 4); }
+.strand-reveal-group > .strand-reveal:nth-child(6) { transition-delay: var(--strand-duration-slow); }
+
+@media (prefers-reduced-motion: reduce) {
+  .strand-reveal {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}
+
+
 /* Section */
 /*! Strand UI | MIT License | dillingerstaffing.com */
 
@@ -1696,14 +1786,15 @@
   transition: background var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
-/* ── Thumb: Webkit ── */
+/* ── Thumb: Webkit (44px touch target, 20px visual) ── */
 .strand-slider__field::-webkit-slider-thumb {
   appearance: none;
   width: 20px;
   height: 20px;
   background: var(--strand-blue-primary);
-  border: 2px solid var(--strand-surface-elevated);
+  border: 12px solid transparent;
   border-radius: var(--strand-radius-full);
+  background-clip: padding-box;
   cursor: pointer;
   box-shadow: var(--strand-elevation-1);
   transition:
@@ -1713,21 +1804,24 @@
 
 .strand-slider__field:hover:not(:disabled)::-webkit-slider-thumb {
   background: var(--strand-blue-vivid);
+  background-clip: padding-box;
   transform: scale(1.15);
 }
 
 .strand-slider__field:active:not(:disabled)::-webkit-slider-thumb {
   background: var(--strand-blue-deep);
+  background-clip: padding-box;
   transform: scale(1.05);
 }
 
-/* ── Thumb: Firefox ── */
+/* ── Thumb: Firefox (44px touch target, 20px visual) ── */
 .strand-slider__field::-moz-range-thumb {
   width: 20px;
   height: 20px;
   background: var(--strand-blue-primary);
-  border: 2px solid var(--strand-surface-elevated);
+  border: 12px solid transparent;
   border-radius: var(--strand-radius-full);
+  background-clip: padding-box;
   cursor: pointer;
   box-shadow: var(--strand-elevation-1);
   transition:
@@ -1737,11 +1831,13 @@
 
 .strand-slider__field:hover:not(:disabled)::-moz-range-thumb {
   background: var(--strand-blue-vivid);
+  background-clip: padding-box;
   transform: scale(1.15);
 }
 
 .strand-slider__field:active:not(:disabled)::-moz-range-thumb {
   background: var(--strand-blue-deep);
+  background-clip: padding-box;
   transform: scale(1.05);
 }
 
@@ -1935,6 +2031,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--strand-space-2);
+  min-height: var(--strand-touch-target);
   cursor: pointer;
   user-select: none;
   font-family: var(--strand-font-sans);
@@ -2121,7 +2218,7 @@
 .strand-tabs [role="tablist"] {
   display: flex;
   gap: var(--strand-space-1);
-  border-bottom: 1px solid var(--strand-gray-400);
+  border-bottom: 1px solid var(--strand-gray-200);
 }
 
 /* ── Tab button ── */
@@ -2195,7 +2292,7 @@
 }
 
 .strand-tag--solid.strand-tag--teal {
-  background: rgba(20, 184, 166, 0.1);
+  background: var(--strand-surface-recessed);
   color: var(--strand-on-teal-tint);
 }
 
@@ -2205,12 +2302,12 @@
 }
 
 .strand-tag--solid.strand-tag--amber {
-  background: rgba(245, 158, 11, 0.1);
+  background: var(--strand-surface-recessed);
   color: var(--strand-on-amber-tint);
 }
 
 .strand-tag--solid.strand-tag--red {
-  background: rgba(239, 68, 68, 0.1);
+  background: var(--strand-surface-recessed);
   color: var(--strand-on-red-tint);
 }
 
@@ -2383,7 +2480,6 @@
   padding: var(--strand-space-4) var(--strand-space-5);
   background: var(--strand-surface-elevated);
   border-radius: var(--strand-radius-lg);
-  border-left: 4px solid transparent;
   box-shadow: var(--strand-elevation-3);
   font-family: var(--strand-font-sans);
   font-size: var(--strand-text-sm);
@@ -2391,22 +2487,21 @@
   animation: strand-toast-in var(--strand-duration-normal) var(--strand-ease-out-expo);
 }
 
-/* ── Status accents ── */
-.strand-toast--info {
-  border-left-color: var(--strand-blue-primary);
-}
-
-.strand-toast--success {
-  border-left-color: var(--strand-green-positive);
-}
-
-.strand-toast--warning {
-  border-left-color: var(--strand-amber-caution);
+/* ── Status prefix ── */
+.strand-toast__status {
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
+  font-weight: var(--strand-weight-semibold);
+  letter-spacing: var(--strand-tracking-wider);
+  text-transform: uppercase;
+  margin-right: var(--strand-space-3);
+  flex-shrink: 0;
 }
 
-.strand-toast--error {
-  border-left-color: var(--strand-red-alert);
-}
+.strand-toast--info .strand-toast__status { color: var(--strand-blue-primary); }
+.strand-toast--success .strand-toast__status { color: var(--strand-teal-vital); }
+.strand-toast--warning .strand-toast__status { color: var(--strand-amber-caution); }
+.strand-toast--error .strand-toast__status { color: var(--strand-red-alert); }
 
 /* ── Message ── */
 .strand-toast__message {
@@ -2421,8 +2516,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: var(--strand-space-6);
+  height: var(--strand-space-6);
   margin-left: var(--strand-space-3);
   padding: 0;
   border: none;

package/dist/index.d.ts

@@ -20,6 +20,8 @@ export { default as Grid } from './components/Grid/Grid.vue';
 export { default as Container } from './components/Container/Container.vue';
 export { default as Divider } from './components/Divider/Divider.vue';
 export { default as Section } from './components/Section/Section.vue';
+export { default as InstrumentViewport } from './components/InstrumentViewport/InstrumentViewport.vue';
+export { default as ScrollReveal } from './components/ScrollReveal/ScrollReveal.vue';
 export { default as Link } from './components/Link/Link.vue';
 export { default as Tabs } from './components/Tabs/Tabs.vue';
 export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.vue';

package/dist/index.d.ts.map

@@ -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;AAGtE,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"}
+{"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"}