@tessera-ui/core 0.4.0

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

@@ -0,0 +1,88 @@
+// Hand-written stories for ts-breadcrumb
+export default {
+    title: 'Components/Breadcrumb',
+    tags: ['autodocs'],
+    argTypes: {
+        separator: {
+            control: 'text',
+            description: 'The separator character between breadcrumb items.',
+        },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.separator !== undefined && args.separator !== null)
+        attrs.push(`separator="${args.separator}"`);
+    return `
+    <ts-breadcrumb ${attrs.join(' ')}>
+      <ts-breadcrumb-item href="/">Home</ts-breadcrumb-item>
+      <ts-breadcrumb-item href="/products">Products</ts-breadcrumb-item>
+      <ts-breadcrumb-item href="/products/electronics">Electronics</ts-breadcrumb-item>
+      <ts-breadcrumb-item current>Headphones</ts-breadcrumb-item>
+    </ts-breadcrumb>
+  `;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        separator: '/',
+    },
+});
+export const Variants = () => `
+  <div style="display: flex; flex-direction: column; gap: 16px;">
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Slash separator (default)</p>
+      <ts-breadcrumb>
+        <ts-breadcrumb-item href="/">Home</ts-breadcrumb-item>
+        <ts-breadcrumb-item href="/docs">Docs</ts-breadcrumb-item>
+        <ts-breadcrumb-item current>Getting Started</ts-breadcrumb-item>
+      </ts-breadcrumb>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Arrow separator</p>
+      <ts-breadcrumb separator=">">
+        <ts-breadcrumb-item href="/">Home</ts-breadcrumb-item>
+        <ts-breadcrumb-item href="/docs">Docs</ts-breadcrumb-item>
+        <ts-breadcrumb-item current>Getting Started</ts-breadcrumb-item>
+      </ts-breadcrumb>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Pipe separator</p>
+      <ts-breadcrumb separator="|">
+        <ts-breadcrumb-item href="/">Home</ts-breadcrumb-item>
+        <ts-breadcrumb-item href="/docs">Docs</ts-breadcrumb-item>
+        <ts-breadcrumb-item current>Getting Started</ts-breadcrumb-item>
+      </ts-breadcrumb>
+    </div>
+  </div>
+`;
+export const Composition = () => `
+  <div style="display: flex; flex-direction: column; gap: 24px;">
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">E-commerce navigation</p>
+      <ts-breadcrumb>
+        <ts-breadcrumb-item href="/">Home</ts-breadcrumb-item>
+        <ts-breadcrumb-item href="/products">Products</ts-breadcrumb-item>
+        <ts-breadcrumb-item href="/products/electronics">Electronics</ts-breadcrumb-item>
+        <ts-breadcrumb-item current>Headphones</ts-breadcrumb-item>
+      </ts-breadcrumb>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Admin panel</p>
+      <ts-breadcrumb separator=">">
+        <ts-breadcrumb-item href="/admin">Admin</ts-breadcrumb-item>
+        <ts-breadcrumb-item href="/admin/users">Users</ts-breadcrumb-item>
+        <ts-breadcrumb-item href="/admin/users/42">John Doe</ts-breadcrumb-item>
+        <ts-breadcrumb-item current>Edit Profile</ts-breadcrumb-item>
+      </ts-breadcrumb>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Documentation path</p>
+      <ts-breadcrumb>
+        <ts-breadcrumb-item href="/docs">Documentation</ts-breadcrumb-item>
+        <ts-breadcrumb-item href="/docs/components">Components</ts-breadcrumb-item>
+        <ts-breadcrumb-item current>Breadcrumb</ts-breadcrumb-item>
+      </ts-breadcrumb>
+    </div>
+  </div>
+`;
+//# sourceMappingURL=breadcrumb.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.stories.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.stories.ts"],"names":[],"mappings":"AAAA,yCAAyC;AAEzC,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,mDAAmD;SACjE;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;IACzG,OAAO;qBACY,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;GAMjC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,SAAS,EAAE,GAAG;KACf;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BrC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BxC,CAAC","sourcesContent":["// Hand-written stories for ts-breadcrumb\n\nexport default {\n  title: 'Components/Breadcrumb',\n  tags: ['autodocs'],\n  argTypes: {\n    separator: {\n      control: 'text',\n      description: 'The separator character between breadcrumb items.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.separator !== undefined && args.separator !== null) attrs.push(`separator=\"${args.separator}\"`);\n  return `\n    <ts-breadcrumb ${attrs.join(' ')}>\n      <ts-breadcrumb-item href=\"/\">Home</ts-breadcrumb-item>\n      <ts-breadcrumb-item href=\"/products\">Products</ts-breadcrumb-item>\n      <ts-breadcrumb-item href=\"/products/electronics\">Electronics</ts-breadcrumb-item>\n      <ts-breadcrumb-item current>Headphones</ts-breadcrumb-item>\n    </ts-breadcrumb>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    separator: '/',\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Slash separator (default)</p>\n      <ts-breadcrumb>\n        <ts-breadcrumb-item href=\"/\">Home</ts-breadcrumb-item>\n        <ts-breadcrumb-item href=\"/docs\">Docs</ts-breadcrumb-item>\n        <ts-breadcrumb-item current>Getting Started</ts-breadcrumb-item>\n      </ts-breadcrumb>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Arrow separator</p>\n      <ts-breadcrumb separator=\">\">\n        <ts-breadcrumb-item href=\"/\">Home</ts-breadcrumb-item>\n        <ts-breadcrumb-item href=\"/docs\">Docs</ts-breadcrumb-item>\n        <ts-breadcrumb-item current>Getting Started</ts-breadcrumb-item>\n      </ts-breadcrumb>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Pipe separator</p>\n      <ts-breadcrumb separator=\"|\">\n        <ts-breadcrumb-item href=\"/\">Home</ts-breadcrumb-item>\n        <ts-breadcrumb-item href=\"/docs\">Docs</ts-breadcrumb-item>\n        <ts-breadcrumb-item current>Getting Started</ts-breadcrumb-item>\n      </ts-breadcrumb>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">E-commerce navigation</p>\n      <ts-breadcrumb>\n        <ts-breadcrumb-item href=\"/\">Home</ts-breadcrumb-item>\n        <ts-breadcrumb-item href=\"/products\">Products</ts-breadcrumb-item>\n        <ts-breadcrumb-item href=\"/products/electronics\">Electronics</ts-breadcrumb-item>\n        <ts-breadcrumb-item current>Headphones</ts-breadcrumb-item>\n      </ts-breadcrumb>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Admin panel</p>\n      <ts-breadcrumb separator=\">\">\n        <ts-breadcrumb-item href=\"/admin\">Admin</ts-breadcrumb-item>\n        <ts-breadcrumb-item href=\"/admin/users\">Users</ts-breadcrumb-item>\n        <ts-breadcrumb-item href=\"/admin/users/42\">John Doe</ts-breadcrumb-item>\n        <ts-breadcrumb-item current>Edit Profile</ts-breadcrumb-item>\n      </ts-breadcrumb>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Documentation path</p>\n      <ts-breadcrumb>\n        <ts-breadcrumb-item href=\"/docs\">Documentation</ts-breadcrumb-item>\n        <ts-breadcrumb-item href=\"/docs/components\">Components</ts-breadcrumb-item>\n        <ts-breadcrumb-item current>Breadcrumb</ts-breadcrumb-item>\n      </ts-breadcrumb>\n    </div>\n  </div>\n`;\n"]}

package/dist/collection/components/button/button.css

@@ -0,0 +1,260 @@
+/* ==========================================================================
+   ts-button — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-button-radius         Border radius
+     --ts-button-font-weight    Label font weight
+     --ts-button-focus-ring     Focus ring box-shadow
+   ========================================================================== */
+
+:host {
+  display: inline-block;
+  vertical-align: middle;
+
+  --ts-button-radius: var(--ts-shape-interactive);
+  --ts-button-font-weight: var(--ts-font-weight-medium);
+  --ts-button-focus-ring: var(--ts-focus-ring);
+}
+
+:host([block]) {
+  display: block;
+  width: 100%;
+}
+
+/* ---- Base native element ---- */
+.button__native {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ts-spacing-2);
+  width: 100%;
+  border: 1px solid transparent;
+  border-radius: var(--ts-button-radius);
+  font-family: var(--ts-font-family-base);
+  font-weight: var(--ts-button-font-weight);
+  line-height: var(--ts-line-height-tight);
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color var(--ts-transition-fast),
+    border-color var(--ts-transition-fast),
+    color var(--ts-transition-fast),
+    box-shadow var(--ts-transition-fast),
+    opacity var(--ts-transition-fast),
+    transform var(--ts-transition-fast);
+  position: relative;
+  white-space: nowrap;
+  user-select: none;
+  -webkit-appearance: none;
+  appearance: none;
+  outline: none;
+}
+
+/* ---- Focus visible ---- */
+.button__native:focus-visible {
+  box-shadow: var(--ts-button-focus-ring);
+}
+
+/* ---- Active press (M3 bouncier) ---- */
+.button__native:active:not([disabled]):not([aria-disabled="true"]) {
+  transform: scale(0.96);
+}
+
+/* ---- Sizes ---- */
+:host([size="xs"]) .button__native {
+  padding: calc(var(--ts-spacing-1) + 1px) var(--ts-spacing-2);
+  font-size: var(--ts-font-size-xs);
+}
+
+:host([size="sm"]) .button__native {
+  padding: calc(var(--ts-spacing-1) + 1px) var(--ts-spacing-3);
+  font-size: var(--ts-font-size-sm);
+}
+
+:host([size="md"]) .button__native {
+  padding: calc(var(--ts-spacing-2) + 1px) var(--ts-spacing-4);
+  font-size: var(--ts-font-size-md);
+}
+
+:host([size="lg"]) .button__native {
+  padding: calc(var(--ts-spacing-3) + 2px) var(--ts-spacing-6);
+  font-size: var(--ts-font-size-lg);
+}
+
+:host([size="xl"]) .button__native {
+  padding: calc(var(--ts-spacing-4) + 2px) var(--ts-spacing-8);
+  font-size: var(--ts-font-size-xl);
+}
+
+/* ---- Solid Appearance ---- */
+:host([appearance="solid"]) .button__native {
+  border-color: transparent;
+}
+:host([appearance="solid"][variant="primary"]) .button__native {
+  background-color: var(--ts-color-interactive-primary);
+  color: var(--ts-color-text-on-primary);
+}
+:host([appearance="solid"][variant="primary"]) .button__native:hover:not([disabled]) {
+  background-color: var(--ts-color-interactive-primary-hover);
+}
+
+:host([appearance="solid"][variant="success"]) .button__native {
+  background-color: var(--ts-color-success-600);
+  color: var(--ts-color-text-on-success);
+}
+:host([appearance="solid"][variant="success"]) .button__native:hover:not([disabled]) {
+  background-color: var(--ts-color-success-500);
+}
+
+:host([appearance="solid"][variant="danger"]) .button__native {
+  background-color: var(--ts-color-interactive-danger);
+  color: var(--ts-color-text-on-danger);
+}
+:host([appearance="solid"][variant="danger"]) .button__native:hover:not([disabled]) {
+  background-color: var(--ts-color-interactive-danger-hover);
+}
+
+:host([appearance="solid"][variant="warning"]) .button__native {
+  background-color: var(--ts-color-warning-600);
+  color: var(--ts-color-text-on-warning);
+}
+:host([appearance="solid"][variant="warning"]) .button__native:hover:not([disabled]) {
+  background-color: var(--ts-color-warning-500);
+}
+
+:host([appearance="solid"][variant="neutral"]) .button__native {
+  background-color: var(--ts-color-neutral-800);
+  color: var(--ts-color-text-on-primary);
+}
+:host([appearance="solid"][variant="neutral"]) .button__native:hover:not([disabled]) {
+  background-color: var(--ts-color-neutral-700);
+}
+
+:host([appearance="solid"][variant="secondary"]) .button__native {
+  background-color: var(--ts-color-neutral-200);
+  color: var(--ts-color-text-primary);
+}
+:host([appearance="solid"][variant="secondary"]) .button__native:hover:not([disabled]) {
+  background-color: var(--ts-color-neutral-300);
+}
+
+/* ---- Outline Appearance ---- */
+:host([appearance="outline"]) .button__native {
+  background-color: transparent;
+}
+:host([appearance="outline"][variant="primary"]) .button__native {
+  border-color: var(--ts-color-primary-500);
+  color: var(--ts-color-interactive-primary);
+}
+:host([appearance="outline"][variant="primary"]) .button__native:hover:not([disabled]) {
+  background-color: var(--ts-color-interactive-primary-subtle);
+}
+
+:host([appearance="outline"][variant="danger"]) .button__native {
+  border-color: var(--ts-color-danger-500);
+  color: var(--ts-color-interactive-danger);
+}
+:host([appearance="outline"][variant="danger"]) .button__native:hover:not([disabled]) {
+  background-color: var(--ts-color-interactive-danger-subtle);
+}
+
+:host([appearance="outline"][variant="neutral"]) .button__native {
+  border-color: var(--ts-color-border-default);
+  color: var(--ts-color-text-secondary);
+}
+:host([appearance="outline"][variant="neutral"]) .button__native:hover:not([disabled]) {
+  background-color: var(--ts-color-bg-subtle);
+}
+
+/* ---- Ghost Appearance ---- */
+:host([appearance="ghost"]) .button__native {
+  background-color: transparent;
+  border-color: transparent;
+}
+:host([appearance="ghost"][variant="primary"]) .button__native {
+  color: var(--ts-color-interactive-primary);
+}
+:host([appearance="ghost"][variant="primary"]) .button__native:hover:not([disabled]) {
+  background-color: var(--ts-color-interactive-primary-subtle);
+  border-color: var(--ts-color-primary-200);
+}
+
+:host([appearance="ghost"][variant="neutral"]) .button__native {
+  color: var(--ts-color-text-secondary);
+}
+:host([appearance="ghost"][variant="neutral"]) .button__native:hover:not([disabled]) {
+  background-color: var(--ts-color-neutral-100);
+  border-color: var(--ts-color-neutral-200);
+}
+
+/* ---- Link Appearance ---- */
+:host([appearance="link"]) .button__native {
+  background: none;
+  border: none;
+  padding: 0;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+:host([appearance="link"][variant="primary"]) .button__native {
+  color: var(--ts-color-interactive-primary);
+}
+:host([appearance="link"]) .button__native:hover:not([disabled]) {
+  text-decoration-thickness: 2px;
+}
+
+/* ---- Disabled State ---- */
+:host([disabled]) .button__native,
+.button__native[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ---- Loading State ---- */
+:host([loading]) .button__label,
+:host([loading]) .button__prefix,
+:host([loading]) .button__suffix {
+  visibility: hidden;
+}
+
+:host([loading]) .button__native {
+  cursor: wait;
+  position: relative;
+}
+
+/* ---- Spinner ---- */
+.button__spinner {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button__spinner svg {
+  width: 1.2em;
+  height: 1.2em;
+  animation: ts-spin 0.8s linear infinite;
+}
+
+@keyframes ts-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ---- Slot wrappers ---- */
+.button__prefix,
+.button__suffix {
+  display: inline-flex;
+  align-items: center;
+}
+
+.button__prefix:empty,
+.button__suffix:empty {
+  display: none;
+}
+
+.button__label {
+  display: inline-flex;
+  align-items: center;
+}