@dillingerstaffing/strand-vue 0.4.0 → 0.5.0

package/README.md

@@ -0,0 +1,58 @@
+# @dillingerstaffing/strand-vue
+
+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.
+
+## Quick Start
+
+```bash
+npm install @dillingerstaffing/strand @dillingerstaffing/strand-vue
+```
+
+Import CSS in your app entry point:
+
+```css
+@import '@dillingerstaffing/strand/css/reset.css';
+@import '@dillingerstaffing/strand/css/tokens.css';
+@import '@dillingerstaffing/strand/css/base.css';
+@import '@dillingerstaffing/strand-vue/css/strand-ui.css';
+```
+
+Use components:
+
+```vue
+<script setup>
+import { Button, Card, Stack, Input } from '@dillingerstaffing/strand-vue'
+</script>
+
+<template>
+  <Card variant="elevated" padding="lg">
+    <Stack :gap="4">
+      <Input placeholder="Enter your email" />
+      <Button variant="primary">Get Started</Button>
+    </Stack>
+  </Card>
+</template>
+```
+
+## Components
+
+31 components across 5 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
+**Layout:** Stack, Grid, Container, Divider, Section
+**Navigation:** Link, Tabs, Breadcrumb, Nav
+**Feedback:** Toast, Alert, Dialog, Tooltip, Progress, Spinner, Skeleton
+
+## Same CSS, Different Framework
+
+This package produces identical visual output to [@dillingerstaffing/strand-ui](https://www.npmjs.com/package/@dillingerstaffing/strand-ui) (Preact/React). Same CSS classes, same ARIA attributes, same design tokens. The only difference is the framework binding.
+
+## Links
+
+- [GitHub](https://github.com/dillingerstaffing/strand)
+- [Design Language](https://github.com/dillingerstaffing/strand/blob/main/DESIGN_LANGUAGE.md)
+- [HTML Reference (CSS-only API)](https://github.com/dillingerstaffing/strand/blob/main/HTML_REFERENCE.md)
+- [Documentation](https://dillingerstaffing.com/labs/strand)
+
+Created by [Dillinger Staffing](https://dillingerstaffing.com)

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

@@ -0,0 +1,13 @@
+interface Props {
+    /** The code content to display */
+    code: string;
+    /** Optional language label (e.g. "html", "css", "bash") */
+    language?: string;
+    /** Additional CSS class */
+    className?: string;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    className: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=CodeBlock.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.vue.d.ts","sourceRoot":"","sources":["../../../src/components/CodeBlock/CodeBlock.vue"],"names":[],"mappings":"AACA;AAkCA,UAAU,KAAK;IACb,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAA;IACZ,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;;eADa,MAAM;;AAqEpB,wBAQG"}

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

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

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

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

package/dist/css/strand-ui.css

@@ -647,6 +647,55 @@
 }
 
 
+/* CodeBlock */
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Layout ── */
+.strand-code-block {
+  position: relative;
+}
+
+/* ── Label (optional language indicator) ── */
+.strand-code-block__label {
+  display: block;
+  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;
+  color: var(--strand-gray-500);
+  margin-bottom: var(--strand-space-2);
+}
+
+/* ── Code area ── */
+.strand-code-block__pre {
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-sm);
+  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);
+  border-radius: var(--strand-radius-lg);
+  padding: var(--strand-space-3) var(--strand-space-4);
+  overflow-x: auto;
+  white-space: pre;
+  tab-size: 2;
+  margin: 0;
+}
+
+/* ── Inline code ── */
+.strand-code-inline {
+  font-family: var(--strand-font-mono);
+  font-size: 0.875em;
+  color: var(--strand-blue-deep);
+  background: var(--strand-surface-recessed);
+  padding: 0.125em 0.375em;
+  border-radius: var(--strand-radius-sm);
+}
+
+
 /* Container */
 /*! Strand UI | MIT License | dillingerstaffing.com */
 

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export { default as Avatar } from './components/Avatar/Avatar.vue';
 export { default as Tag } from './components/Tag/Tag.vue';
 export { default as Table } from './components/Table/Table.vue';
 export { default as DataReadout } from './components/DataReadout/DataReadout.vue';
+export { default as CodeBlock } from './components/CodeBlock/CodeBlock.vue';
 export { default as Stack } from './components/Stack/Stack.vue';
 export { default as Grid } from './components/Grid/Grid.vue';
 export { default as Container } from './components/Container/Container.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;AAGlF,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;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"}