@tessera-ui/core 0.4.0

package/dist/collection/components/row/row.stories.js

@@ -0,0 +1,172 @@
+// Hand-written stories for ts-row
+export default {
+    title: 'Layout/Row',
+    tags: ['autodocs'],
+    argTypes: {
+        gap: {
+            control: 'select',
+            options: ['0', '1', '2', '3', '4', '5', '6', '8', '10', '12', '16'],
+            description: 'Spacing token number controlling the gap between items.',
+        },
+        align: {
+            control: 'select',
+            options: ['start', 'center', 'end', 'stretch', 'baseline'],
+            description: 'Cross-axis alignment of items.',
+        },
+        justify: {
+            control: 'select',
+            options: ['start', 'center', 'end', 'between', 'around', 'evenly'],
+            description: 'Main-axis alignment of items.',
+        },
+        wrap: {
+            control: 'boolean',
+            description: 'Whether items should wrap to the next line.',
+        },
+        reverse: {
+            control: 'boolean',
+            description: 'Reverse the row direction.',
+        },
+        stackAt: {
+            control: 'select',
+            options: ['sm', 'md', 'lg', 'never'],
+            description: 'Breakpoint at which the row stacks vertically.',
+        },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.gap !== undefined)
+        attrs.push(`gap="${args.gap}"`);
+    if (args.align !== undefined)
+        attrs.push(`align="${args.align}"`);
+    if (args.justify !== undefined)
+        attrs.push(`justify="${args.justify}"`);
+    if (args.wrap === false)
+        attrs.push(`wrap="false"`);
+    if (args.reverse)
+        attrs.push(`reverse`);
+    if (args.stackAt !== undefined && args.stackAt !== 'never')
+        attrs.push(`stack-at="${args.stackAt}"`);
+    return `
+    <ts-row ${attrs.join(' ')}>
+      <ts-button variant="primary">Save</ts-button>
+      <ts-button variant="neutral" appearance="outline">Cancel</ts-button>
+      <ts-button variant="danger" appearance="ghost">Delete</ts-button>
+    </ts-row>
+  `;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        gap: '2',
+        align: 'center',
+        justify: 'start',
+        wrap: true,
+        reverse: false,
+        stackAt: 'never',
+    },
+});
+export const Justify = () => `
+  <div style="display: flex; flex-direction: column; gap: 24px; font-family: sans-serif;">
+    <div>
+      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">justify="start"</p>
+      <ts-row justify="start" gap="2" style="border: 1px dashed #cbd5e1; padding: 8px;">
+        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">A</div>
+        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">B</div>
+        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">C</div>
+      </ts-row>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">justify="center"</p>
+      <ts-row justify="center" gap="2" style="border: 1px dashed #cbd5e1; padding: 8px;">
+        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">A</div>
+        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">B</div>
+        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">C</div>
+      </ts-row>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">justify="end"</p>
+      <ts-row justify="end" gap="2" style="border: 1px dashed #cbd5e1; padding: 8px;">
+        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">A</div>
+        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">B</div>
+        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">C</div>
+      </ts-row>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">justify="between"</p>
+      <ts-row justify="between" gap="2" style="border: 1px dashed #cbd5e1; padding: 8px;">
+        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">A</div>
+        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">B</div>
+        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">C</div>
+      </ts-row>
+    </div>
+  </div>
+`;
+export const Alignment = () => `
+  <div style="display: flex; flex-direction: column; gap: 24px; font-family: sans-serif;">
+    <div>
+      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">align="start"</p>
+      <ts-row align="start" gap="2" style="border: 1px dashed #cbd5e1; padding: 8px; min-height: 80px;">
+        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">Short</div>
+        <div style="padding: 16px; background: #dbeafe; border-radius: 4px;">Tall item</div>
+        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">Short</div>
+      </ts-row>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">align="center"</p>
+      <ts-row align="center" gap="2" style="border: 1px dashed #cbd5e1; padding: 8px; min-height: 80px;">
+        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">Short</div>
+        <div style="padding: 16px; background: #dbeafe; border-radius: 4px;">Tall item</div>
+        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">Short</div>
+      </ts-row>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">align="stretch"</p>
+      <ts-row align="stretch" gap="2" style="border: 1px dashed #cbd5e1; padding: 8px; min-height: 80px;">
+        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">Short</div>
+        <div style="padding: 16px; background: #dbeafe; border-radius: 4px;">Tall item</div>
+        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">Short</div>
+      </ts-row>
+    </div>
+  </div>
+`;
+export const Wrap = () => `
+  <div style="font-family: sans-serif;">
+    <p style="margin: 0 0 8px; font-size: 14px; color: #666;">Resize browser to see wrapping behavior</p>
+    <ts-row gap="2" style="border: 1px dashed #cbd5e1; padding: 8px; max-width: 300px;">
+      <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">Item 1</div>
+      <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">Item 2</div>
+      <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">Item 3</div>
+      <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">Item 4</div>
+      <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">Item 5</div>
+    </ts-row>
+  </div>
+`;
+export const StackAt = () => `
+  <div style="font-family: sans-serif;">
+    <p style="margin: 0 0 8px; font-size: 14px; color: #666;">Resize the browser to see stacking at md breakpoint (767px)</p>
+    <ts-row stack-at="md" gap="3" style="border: 1px dashed #cbd5e1; padding: 8px;">
+      <div style="padding: 12px 24px; background: #dbeafe; border-radius: 4px;">Navigation</div>
+      <div style="padding: 12px 24px; background: #dbeafe; border-radius: 4px;">Content</div>
+      <div style="padding: 12px 24px; background: #dbeafe; border-radius: 4px;">Sidebar</div>
+    </ts-row>
+  </div>
+`;
+export const Composition = () => `
+  <div style="font-family: sans-serif;">
+    <div style="border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px;">
+      <ts-row justify="between" align="center">
+        <div style="font-weight: 600; font-size: 18px;">My App</div>
+        <ts-row gap="3">
+          <a href="#" style="text-decoration: none; color: #475569;">Home</a>
+          <a href="#" style="text-decoration: none; color: #475569;">About</a>
+          <a href="#" style="text-decoration: none; color: #475569;">Contact</a>
+        </ts-row>
+        <ts-row gap="2">
+          <ts-button variant="neutral" appearance="ghost" size="sm">Sign in</ts-button>
+          <ts-button variant="primary" size="sm">Sign up</ts-button>
+        </ts-row>
+      </ts-row>
+    </div>
+  </div>
+`;
+//# sourceMappingURL=row.stories.js.map

package/dist/collection/components/row/row.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.stories.js","sourceRoot":"","sources":["../../../src/components/row/row.stories.ts"],"names":[],"mappings":"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","sourcesContent":["// Hand-written stories for ts-row\n\nexport default {\n  title: 'Layout/Row',\n  tags: ['autodocs'],\n  argTypes: {\n    gap: {\n      control: 'select',\n      options: ['0', '1', '2', '3', '4', '5', '6', '8', '10', '12', '16'],\n      description: 'Spacing token number controlling the gap between items.',\n    },\n    align: {\n      control: 'select',\n      options: ['start', 'center', 'end', 'stretch', 'baseline'],\n      description: 'Cross-axis alignment of items.',\n    },\n    justify: {\n      control: 'select',\n      options: ['start', 'center', 'end', 'between', 'around', 'evenly'],\n      description: 'Main-axis alignment of items.',\n    },\n    wrap: {\n      control: 'boolean',\n      description: 'Whether items should wrap to the next line.',\n    },\n    reverse: {\n      control: 'boolean',\n      description: 'Reverse the row direction.',\n    },\n    stackAt: {\n      control: 'select',\n      options: ['sm', 'md', 'lg', 'never'],\n      description: 'Breakpoint at which the row stacks vertically.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.gap !== undefined) attrs.push(`gap=\"${args.gap}\"`);\n  if (args.align !== undefined) attrs.push(`align=\"${args.align}\"`);\n  if (args.justify !== undefined) attrs.push(`justify=\"${args.justify}\"`);\n  if (args.wrap === false) attrs.push(`wrap=\"false\"`);\n  if (args.reverse) attrs.push(`reverse`);\n  if (args.stackAt !== undefined && args.stackAt !== 'never') attrs.push(`stack-at=\"${args.stackAt}\"`);\n  return `\n    <ts-row ${attrs.join(' ')}>\n      <ts-button variant=\"primary\">Save</ts-button>\n      <ts-button variant=\"neutral\" appearance=\"outline\">Cancel</ts-button>\n      <ts-button variant=\"danger\" appearance=\"ghost\">Delete</ts-button>\n    </ts-row>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    gap: '2',\n    align: 'center',\n    justify: 'start',\n    wrap: true,\n    reverse: false,\n    stackAt: 'never',\n  },\n});\n\nexport const Justify = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; font-family: sans-serif;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">justify=\"start\"</p>\n      <ts-row justify=\"start\" gap=\"2\" style=\"border: 1px dashed #cbd5e1; padding: 8px;\">\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">A</div>\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">B</div>\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">C</div>\n      </ts-row>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">justify=\"center\"</p>\n      <ts-row justify=\"center\" gap=\"2\" style=\"border: 1px dashed #cbd5e1; padding: 8px;\">\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">A</div>\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">B</div>\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">C</div>\n      </ts-row>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">justify=\"end\"</p>\n      <ts-row justify=\"end\" gap=\"2\" style=\"border: 1px dashed #cbd5e1; padding: 8px;\">\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">A</div>\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">B</div>\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">C</div>\n      </ts-row>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">justify=\"between\"</p>\n      <ts-row justify=\"between\" gap=\"2\" style=\"border: 1px dashed #cbd5e1; padding: 8px;\">\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">A</div>\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">B</div>\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">C</div>\n      </ts-row>\n    </div>\n  </div>\n`;\n\nexport const Alignment = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; font-family: sans-serif;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">align=\"start\"</p>\n      <ts-row align=\"start\" gap=\"2\" style=\"border: 1px dashed #cbd5e1; padding: 8px; min-height: 80px;\">\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">Short</div>\n        <div style=\"padding: 16px; background: #dbeafe; border-radius: 4px;\">Tall item</div>\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">Short</div>\n      </ts-row>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">align=\"center\"</p>\n      <ts-row align=\"center\" gap=\"2\" style=\"border: 1px dashed #cbd5e1; padding: 8px; min-height: 80px;\">\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">Short</div>\n        <div style=\"padding: 16px; background: #dbeafe; border-radius: 4px;\">Tall item</div>\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">Short</div>\n      </ts-row>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">align=\"stretch\"</p>\n      <ts-row align=\"stretch\" gap=\"2\" style=\"border: 1px dashed #cbd5e1; padding: 8px; min-height: 80px;\">\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">Short</div>\n        <div style=\"padding: 16px; background: #dbeafe; border-radius: 4px;\">Tall item</div>\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">Short</div>\n      </ts-row>\n    </div>\n  </div>\n`;\n\nexport const Wrap = (): string => `\n  <div style=\"font-family: sans-serif;\">\n    <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">Resize browser to see wrapping behavior</p>\n    <ts-row gap=\"2\" style=\"border: 1px dashed #cbd5e1; padding: 8px; max-width: 300px;\">\n      <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">Item 1</div>\n      <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">Item 2</div>\n      <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">Item 3</div>\n      <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">Item 4</div>\n      <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">Item 5</div>\n    </ts-row>\n  </div>\n`;\n\nexport const StackAt = (): string => `\n  <div style=\"font-family: sans-serif;\">\n    <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">Resize the browser to see stacking at md breakpoint (767px)</p>\n    <ts-row stack-at=\"md\" gap=\"3\" style=\"border: 1px dashed #cbd5e1; padding: 8px;\">\n      <div style=\"padding: 12px 24px; background: #dbeafe; border-radius: 4px;\">Navigation</div>\n      <div style=\"padding: 12px 24px; background: #dbeafe; border-radius: 4px;\">Content</div>\n      <div style=\"padding: 12px 24px; background: #dbeafe; border-radius: 4px;\">Sidebar</div>\n    </ts-row>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"font-family: sans-serif;\">\n    <div style=\"border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px;\">\n      <ts-row justify=\"between\" align=\"center\">\n        <div style=\"font-weight: 600; font-size: 18px;\">My App</div>\n        <ts-row gap=\"3\">\n          <a href=\"#\" style=\"text-decoration: none; color: #475569;\">Home</a>\n          <a href=\"#\" style=\"text-decoration: none; color: #475569;\">About</a>\n          <a href=\"#\" style=\"text-decoration: none; color: #475569;\">Contact</a>\n        </ts-row>\n        <ts-row gap=\"2\">\n          <ts-button variant=\"neutral\" appearance=\"ghost\" size=\"sm\">Sign in</ts-button>\n          <ts-button variant=\"primary\" size=\"sm\">Sign up</ts-button>\n        </ts-row>\n      </ts-row>\n    </div>\n  </div>\n`;\n"]}

package/dist/collection/components/select/select.css

@@ -0,0 +1,200 @@
+/* ==========================================================================
+   ts-select — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-select-bg              Select background
+     --ts-select-border-color    Default border color
+     --ts-select-radius          Border radius
+     --ts-select-focus-ring      Focus ring box-shadow
+   ========================================================================== */
+
+:host {
+  display: block;
+  font-family: var(--ts-font-family-base);
+
+  --ts-select-bg: var(--ts-color-neutral-50);
+  --ts-select-border-color: var(--ts-color-border-default);
+  --ts-select-radius: var(--ts-radius-md);
+  --ts-select-focus-ring: var(--ts-focus-ring);
+}
+
+/* ---- Label ---- */
+.select__label {
+  display: block;
+  margin-block-end: var(--ts-spacing-1);
+  font-size: var(--ts-font-size-sm);
+  font-weight: var(--ts-font-weight-medium);
+  color: var(--ts-color-text-secondary);
+  line-height: var(--ts-line-height-normal);
+}
+
+.select__required {
+  color: var(--ts-color-danger-500);
+}
+
+/* ---- Container ---- */
+.select__container {
+  position: relative;
+}
+
+/* ---- Trigger button ---- */
+.select__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ts-spacing-2);
+  width: 100%;
+  border: 1px solid var(--ts-select-border-color);
+  border-radius: var(--ts-select-radius);
+  background-color: var(--ts-select-bg);
+  font-family: inherit;
+  color: var(--ts-color-text-primary);
+  cursor: pointer;
+  outline: none;
+  transition:
+    border-color var(--ts-transition-fast),
+    box-shadow var(--ts-transition-fast);
+  text-align: start;
+  appearance: none;
+}
+
+.select__trigger:focus-visible {
+  border-color: var(--ts-color-primary-500);
+  box-shadow: var(--ts-select-focus-ring);
+}
+
+.select__trigger--error {
+  border-color: var(--ts-color-danger-500);
+}
+
+.select__trigger--error:focus-visible {
+  box-shadow: 0 0 0 3px var(--ts-color-focus-ring-danger);
+}
+
+.select__trigger--disabled {
+  background-color: var(--ts-color-bg-disabled);
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.select__trigger--open {
+  border-color: var(--ts-color-primary-500);
+  box-shadow: var(--ts-select-focus-ring);
+}
+
+/* ---- Display text ---- */
+.select__display {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.select__display--placeholder {
+  color: var(--ts-color-text-tertiary);
+}
+
+/* ---- Chevron ---- */
+.select__chevron {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  transition: transform var(--ts-transition-fast);
+  color: var(--ts-color-text-tertiary);
+}
+
+:host(.ts-select--open) .select__chevron {
+  transform: rotate(180deg);
+}
+
+/* ---- Dropdown ---- */
+.select__dropdown {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  top: calc(100% + var(--ts-spacing-1));
+  z-index: 1000;
+  background-color: var(--ts-color-bg-elevated);
+  border: 1px solid var(--ts-color-border-default);
+  border-radius: var(--ts-radius-md);
+  box-shadow: var(--ts-shadow-lg);
+  max-height: 15rem;
+  overflow-y: auto;
+  padding-block: var(--ts-spacing-1);
+}
+
+/* ---- Option ---- */
+.select__option {
+  display: flex;
+  align-items: center;
+  padding: var(--ts-spacing-2) var(--ts-spacing-3);
+  cursor: pointer;
+  transition:
+    background-color var(--ts-transition-fast),
+    color var(--ts-transition-fast);
+  color: var(--ts-color-text-primary);
+  font-size: inherit;
+}
+
+.select__option:hover:not(.select__option--disabled) {
+  background-color: var(--ts-color-interactive-primary-subtle);
+}
+
+.select__option--focused {
+  background-color: var(--ts-color-bg-subtle);
+}
+
+.select__option--selected {
+  color: var(--ts-color-interactive-primary);
+  font-weight: var(--ts-font-weight-medium);
+}
+
+.select__option--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ---- Sizes ---- */
+:host([size="sm"]) .select__trigger {
+  padding: var(--ts-spacing-1) var(--ts-spacing-2);
+  font-size: var(--ts-font-size-sm);
+  border-radius: var(--ts-radius-sm);
+}
+
+:host([size="md"]) .select__trigger {
+  padding: var(--ts-spacing-2) var(--ts-spacing-3);
+  font-size: var(--ts-font-size-md);
+}
+
+:host([size="lg"]) .select__trigger {
+  padding: var(--ts-spacing-3) var(--ts-spacing-4);
+  font-size: var(--ts-font-size-lg);
+}
+
+:host([size="xl"]) .select__trigger {
+  padding: var(--ts-spacing-4) var(--ts-spacing-5);
+  font-size: var(--ts-font-size-xl);
+  border-radius: var(--ts-radius-lg);
+}
+
+/* ---- Hidden slot ---- */
+.select__hidden-slot {
+  display: none;
+}
+
+/* ---- Help & Error Text ---- */
+.select__help,
+.select__error {
+  margin-block-start: var(--ts-spacing-1);
+  font-size: var(--ts-font-size-xs);
+  line-height: var(--ts-line-height-normal);
+}
+
+.select__help {
+  color: var(--ts-color-text-tertiary);
+}
+
+.select__error {
+  color: var(--ts-color-danger-600);
+  font-weight: var(--ts-font-weight-medium);
+}