@dillingerstaffing/strand-svelte 0.6.0 → 0.7.0

package/README.md

@@ -1,6 +1,6 @@
 # @dillingerstaffing/strand-svelte
 
-Svelte component library built on the [Strand Design Language](https://github.com/dillingerstaffing/strand/blob/main/DESIGN_LANGUAGE.md). 32 components. Zero-runtime CSS. WCAG 2.2 AA.
+Svelte component library built on the [Strand Design Language](https://github.com/dillingerstaffing/strand/blob/main/DESIGN_LANGUAGE.md). 34 components. Zero-runtime CSS. WCAG 2.2 AA.
 
 ## Quick Start
 
@@ -34,13 +34,15 @@ Use components:
 
 ## Components
 
-32 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, 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/InstrumentViewport/InstrumentViewport.svelte.d.ts

@@ -0,0 +1 @@
+export { SvelteComponent as default } from 'svelte';

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

@@ -0,0 +1,3 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+export { default as InstrumentViewport } from './InstrumentViewport.svelte';
+//# 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,0DAA0D;AAC1D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAA"}

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

@@ -0,0 +1 @@
+export { SvelteComponent as default } from 'svelte';

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

@@ -0,0 +1,3 @@
+/*! Strand Svelte | MIT License | dillingerstaffing.com */
+export { default as ScrollReveal } from './ScrollReveal.svelte';
+//# 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,0DAA0D;AAC1D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/css/strand-ui.css

@@ -145,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);
 }
 
@@ -325,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 {
@@ -343,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 {
@@ -566,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);
@@ -592,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);
@@ -1094,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 */
 
@@ -1138,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);
@@ -1299,7 +1341,7 @@
 
   .strand-nav {
     height: auto;
-    min-height: 64px;
+    min-height: var(--strand-nav-height);
   }
 }
 
@@ -1421,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);
@@ -1447,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);
@@ -1514,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 */
 
@@ -1709,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:
@@ -1726,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:
@@ -1750,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);
 }
 
@@ -1948,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);

package/dist/index.d.ts

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

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0DAA0D;AAG1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mCAAmC,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uCAAuC,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mCAAmC,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uCAAuC,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mCAAmC,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mCAAmC,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,yCAAyC,CAAA;AAG9E,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mCAAmC,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,6CAA6C,CAAA;AACpF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,yCAAyC,CAAA;AAG9E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,yCAAyC,CAAA;AAC9E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,qCAAqC,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,qCAAqC,CAAA;AAGxE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,2CAA2C,CAAA;AACjF,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,6BAA6B,CAAA;AAG5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,yCAAyC,CAAA;AAClF,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AACjF,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAC3G,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mCAAmC,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,qCAAqC,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uCAAuC,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,qCAAqC,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uCAAuC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0DAA0D;AAG1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mCAAmC,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uCAAuC,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mCAAmC,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uCAAuC,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mCAAmC,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mCAAmC,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,yCAAyC,CAAA;AAG9E,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mCAAmC,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,6CAA6C,CAAA;AACpF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,yCAAyC,CAAA;AAG9E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,yCAAyC,CAAA;AAC9E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,qCAAqC,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,qCAAqC,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,2DAA2D,CAAA;AACzG,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,+CAA+C,CAAA;AAGvF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,2CAA2C,CAAA;AACjF,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,6BAA6B,CAAA;AAG5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,yCAAyC,CAAA;AAClF,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AACjF,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAC3G,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,iCAAiC,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mCAAmC,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,qCAAqC,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uCAAuC,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,qCAAqC,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uCAAuC,CAAA"}