@tessera-ui/core 0.4.0

package/dist/collection/components/toolbar/toolbar.css

@@ -0,0 +1,89 @@
+/* ==========================================================================
+   ts-toolbar — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-toolbar-bg            Background color
+     --ts-toolbar-border-color  Border color
+     --ts-toolbar-padding       Padding
+     --ts-toolbar-gap           Gap between items
+   ========================================================================== */
+
+:host {
+  display: block;
+  font-family: var(--ts-font-family-base);
+
+  --ts-toolbar-bg: var(--ts-color-bg-surface);
+  --ts-toolbar-border-color: var(--ts-color-border-subtle);
+  --ts-toolbar-padding: var(--ts-spacing-3);
+  --ts-toolbar-gap: var(--ts-spacing-2);
+}
+
+.toolbar__base {
+  display: flex;
+  align-items: center;
+  gap: var(--ts-toolbar-gap);
+  padding-inline: var(--ts-toolbar-padding);
+  padding-block: var(--ts-toolbar-padding);
+  background-color: var(--ts-toolbar-bg);
+}
+
+/* ---- Variants ---- */
+:host([variant="bordered"]) .toolbar__base {
+  border-block-end: 1px solid var(--ts-toolbar-border-color);
+}
+
+:host([variant="elevated"]) .toolbar__base {
+  box-shadow: var(--ts-shadow-sm);
+  border-radius: var(--ts-radius-md);
+}
+
+/* ---- Sizes ---- */
+:host([size="sm"]) .toolbar__base {
+  padding-inline: var(--ts-spacing-2);
+  padding-block: var(--ts-spacing-1);
+  gap: var(--ts-spacing-1);
+  font-size: var(--ts-font-size-sm);
+}
+
+:host([size="md"]) .toolbar__base {
+  padding-inline: var(--ts-spacing-3);
+  padding-block: var(--ts-spacing-2);
+  gap: var(--ts-spacing-2);
+  font-size: var(--ts-font-size-md);
+}
+
+:host([size="lg"]) .toolbar__base {
+  padding-inline: var(--ts-spacing-4);
+  padding-block: var(--ts-spacing-3);
+  gap: var(--ts-spacing-3);
+  font-size: var(--ts-font-size-lg);
+}
+
+/* ---- Layout sections ---- */
+.toolbar__start {
+  display: flex;
+  align-items: center;
+  gap: var(--ts-toolbar-gap);
+  flex-shrink: 0;
+}
+
+.toolbar__center {
+  display: flex;
+  align-items: center;
+  gap: var(--ts-toolbar-gap);
+  flex: 1;
+  min-inline-size: 0;
+}
+
+.toolbar__end {
+  display: flex;
+  align-items: center;
+  gap: var(--ts-toolbar-gap);
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+
+.toolbar__start:empty,
+.toolbar__end:empty {
+  display: none;
+}

package/dist/collection/components/toolbar/toolbar.js

@@ -0,0 +1,89 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for toolbar items (center).
+ * @slot start - Left/start-aligned items.
+ * @slot end - Right/end-aligned items.
+ *
+ * @part base - The toolbar container.
+ * @part start - The start slot wrapper.
+ * @part center - The center/default slot wrapper.
+ * @part end - The end slot wrapper.
+ */
+export class TsToolbar {
+    /** The toolbar variant style. */
+    variant = 'default';
+    /** The toolbar size. */
+    size = 'md';
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: '83f2c4baba0daca4e9ce04179c0a135ce7c015b9', class: {
+                'ts-toolbar': true,
+                [`ts-toolbar--${this.variant}`]: true,
+                [`ts-toolbar--${this.size}`]: true,
+            }, role: "toolbar", "aria-orientation": "horizontal" }, h("div", { key: '5c2b6c4b0050c0ca000aa475fedff456efee66c3', class: "toolbar__base", part: "base" }, h("div", { key: '2e1e1f97c6ba0481cc039aee8c5407c2eb4b55b5', class: "toolbar__start", part: "start" }, h("slot", { key: 'e147cb24308e4bc2de5bcd2d6bd0dbbed48bb029', name: "start" })), h("div", { key: '727603e4bfed0642feeba89288c64315cc0b1dbf', class: "toolbar__center", part: "center" }, h("slot", { key: 'b323e21f9290c0b07e2dae640287aabb739b71b6' })), h("div", { key: '33040658c7a58b1df7b16c2c01bf8a8460307efe', class: "toolbar__end", part: "end" }, h("slot", { key: '05209ec0a17ec31a4de2193d84456cdcb3207608', name: "end" })))));
+    }
+    static get is() { return "ts-toolbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["toolbar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["toolbar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'bordered' | 'elevated'",
+                    "resolved": "\"bordered\" | \"default\" | \"elevated\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The toolbar variant style."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TsSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "TsSize": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsSize",
+                            "referenceLocation": "TsSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The toolbar size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=toolbar.js.map

package/dist/collection/components/toolbar/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.js","sourceRoot":"","sources":["../../../src/components/toolbar/toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;;;;;;;GASG;AAMH,MAAM,OAAO,SAAS;IACpB,iCAAiC;IACR,OAAO,GAAwC,SAAS,CAAC;IAElF,wBAAwB;IACC,IAAI,GAAW,IAAI,CAAC;IAE7C,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,CAAC,eAAe,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBACrC,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;aACnC,EACD,IAAI,EAAC,SAAS,sBACG,YAAY;YAE7B,4DAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM;gBACpC,4DAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO;oBACtC,6DAAM,IAAI,EAAC,OAAO,GAAG,CACjB;gBAEN,4DAAK,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ;oBACxC,8DAAQ,CACJ;gBAEN,4DAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,KAAK;oBAClC,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\nimport type { TsSize } from '../../types';\n\n/**\n * @slot - Default slot for toolbar items (center).\n * @slot start - Left/start-aligned items.\n * @slot end - Right/end-aligned items.\n *\n * @part base - The toolbar container.\n * @part start - The start slot wrapper.\n * @part center - The center/default slot wrapper.\n * @part end - The end slot wrapper.\n */\n@Component({\n  tag: 'ts-toolbar',\n  styleUrl: 'toolbar.css',\n  shadow: true,\n})\nexport class TsToolbar {\n  /** The toolbar variant style. */\n  @Prop({ reflect: true }) variant: 'default' | 'bordered' | 'elevated' = 'default';\n\n  /** The toolbar size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-toolbar': true,\n          [`ts-toolbar--${this.variant}`]: true,\n          [`ts-toolbar--${this.size}`]: true,\n        }}\n        role=\"toolbar\"\n        aria-orientation=\"horizontal\"\n      >\n        <div class=\"toolbar__base\" part=\"base\">\n          <div class=\"toolbar__start\" part=\"start\">\n            <slot name=\"start\" />\n          </div>\n\n          <div class=\"toolbar__center\" part=\"center\">\n            <slot />\n          </div>\n\n          <div class=\"toolbar__end\" part=\"end\">\n            <slot name=\"end\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,131 @@
+// Hand-written stories for ts-toolbar
+export default {
+    title: 'Components/Toolbar',
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['default', 'bordered', 'elevated'],
+            description: 'The toolbar variant style.',
+        },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: 'The toolbar size.',
+        },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.variant !== undefined)
+        attrs.push(`variant="${args.variant}"`);
+    if (args.size !== undefined)
+        attrs.push(`size="${args.size}"`);
+    return `
+    <ts-toolbar ${attrs.join(' ')}>
+      <div slot="start">
+        <ts-button size="sm" appearance="ghost">Bold</ts-button>
+        <ts-button size="sm" appearance="ghost">Italic</ts-button>
+        <ts-button size="sm" appearance="ghost">Underline</ts-button>
+      </div>
+      <div slot="end">
+        <ts-button size="sm" appearance="outline">Preview</ts-button>
+      </div>
+    </ts-toolbar>
+  `;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        variant: 'bordered',
+        size: 'md',
+    },
+});
+export const Variants = () => `
+  <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;">Default</p>
+      <ts-toolbar variant="default">
+        <div slot="start">
+          <ts-button size="sm" appearance="ghost">Bold</ts-button>
+          <ts-button size="sm" appearance="ghost">Italic</ts-button>
+        </div>
+      </ts-toolbar>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Bordered</p>
+      <ts-toolbar variant="bordered">
+        <div slot="start">
+          <ts-button size="sm" appearance="ghost">Bold</ts-button>
+          <ts-button size="sm" appearance="ghost">Italic</ts-button>
+        </div>
+      </ts-toolbar>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Elevated</p>
+      <ts-toolbar variant="elevated">
+        <div slot="start">
+          <ts-button size="sm" appearance="ghost">Bold</ts-button>
+          <ts-button size="sm" appearance="ghost">Italic</ts-button>
+        </div>
+      </ts-toolbar>
+    </div>
+  </div>
+`;
+export const Sizes = () => `
+  <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;">Small</p>
+      <ts-toolbar variant="bordered" size="sm">
+        <div slot="start">
+          <ts-button size="sm" appearance="ghost">B</ts-button>
+          <ts-button size="sm" appearance="ghost">I</ts-button>
+          <ts-button size="sm" appearance="ghost">U</ts-button>
+        </div>
+      </ts-toolbar>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Medium</p>
+      <ts-toolbar variant="bordered" size="md">
+        <div slot="start">
+          <ts-button size="sm" appearance="ghost">B</ts-button>
+          <ts-button size="sm" appearance="ghost">I</ts-button>
+          <ts-button size="sm" appearance="ghost">U</ts-button>
+        </div>
+      </ts-toolbar>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Large</p>
+      <ts-toolbar variant="bordered" size="lg">
+        <div slot="start">
+          <ts-button size="sm" appearance="ghost">B</ts-button>
+          <ts-button size="sm" appearance="ghost">I</ts-button>
+          <ts-button size="sm" appearance="ghost">U</ts-button>
+        </div>
+      </ts-toolbar>
+    </div>
+  </div>
+`;
+export const Composition = () => `
+  <div style="max-width: 600px; font-family: sans-serif;">
+    <div style="border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden;">
+      <ts-toolbar variant="bordered">
+        <div slot="start" style="display: flex; gap: 4px;">
+          <ts-button size="sm" appearance="ghost">Bold</ts-button>
+          <ts-button size="sm" appearance="ghost">Italic</ts-button>
+          <ts-button size="sm" appearance="ghost">Underline</ts-button>
+          <ts-divider orientation="vertical" style="height: 24px; margin: 0 4px;"></ts-divider>
+          <ts-button size="sm" appearance="ghost">Link</ts-button>
+          <ts-button size="sm" appearance="ghost">Image</ts-button>
+        </div>
+        <div slot="end" style="display: flex; gap: 4px;">
+          <ts-button size="sm" appearance="ghost">Undo</ts-button>
+          <ts-button size="sm" appearance="ghost">Redo</ts-button>
+        </div>
+      </ts-toolbar>
+      <div style="padding: 16px; min-height: 200px;">
+        <p style="color: #94a3b8; margin: 0;">Start typing here...</p>
+      </div>
+    </div>
+  </div>
+`;
+//# sourceMappingURL=toolbar.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.stories.js","sourceRoot":"","sources":["../../../src/components/toolbar/toolbar.stories.ts"],"names":[],"mappings":"AAAA,sCAAsC;AAEtC,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,UAAU,EAAE,UAAU,CAAC;YAC5C,WAAW,EAAE,4BAA4B;SAC1C;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YAC3B,WAAW,EAAE,mBAAmB;SACjC;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IAC/D,OAAO;kBACS,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;;;;;GAU9B,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,OAAO,EAAE,UAAU;QACnB,IAAI,EAAE,IAAI;KACX;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BrC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiClC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;CAsBxC,CAAC","sourcesContent":["// Hand-written stories for ts-toolbar\n\nexport default {\n  title: 'Components/Toolbar',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['default', 'bordered', 'elevated'],\n      description: 'The toolbar variant style.',\n    },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: 'The toolbar size.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.variant !== undefined) attrs.push(`variant=\"${args.variant}\"`);\n  if (args.size !== undefined) attrs.push(`size=\"${args.size}\"`);\n  return `\n    <ts-toolbar ${attrs.join(' ')}>\n      <div slot=\"start\">\n        <ts-button size=\"sm\" appearance=\"ghost\">Bold</ts-button>\n        <ts-button size=\"sm\" appearance=\"ghost\">Italic</ts-button>\n        <ts-button size=\"sm\" appearance=\"ghost\">Underline</ts-button>\n      </div>\n      <div slot=\"end\">\n        <ts-button size=\"sm\" appearance=\"outline\">Preview</ts-button>\n      </div>\n    </ts-toolbar>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    variant: 'bordered',\n    size: 'md',\n  },\n});\n\nexport const Variants = (): 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;\">Default</p>\n      <ts-toolbar variant=\"default\">\n        <div slot=\"start\">\n          <ts-button size=\"sm\" appearance=\"ghost\">Bold</ts-button>\n          <ts-button size=\"sm\" appearance=\"ghost\">Italic</ts-button>\n        </div>\n      </ts-toolbar>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Bordered</p>\n      <ts-toolbar variant=\"bordered\">\n        <div slot=\"start\">\n          <ts-button size=\"sm\" appearance=\"ghost\">Bold</ts-button>\n          <ts-button size=\"sm\" appearance=\"ghost\">Italic</ts-button>\n        </div>\n      </ts-toolbar>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Elevated</p>\n      <ts-toolbar variant=\"elevated\">\n        <div slot=\"start\">\n          <ts-button size=\"sm\" appearance=\"ghost\">Bold</ts-button>\n          <ts-button size=\"sm\" appearance=\"ghost\">Italic</ts-button>\n        </div>\n      </ts-toolbar>\n    </div>\n  </div>\n`;\n\nexport const Sizes = (): 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;\">Small</p>\n      <ts-toolbar variant=\"bordered\" size=\"sm\">\n        <div slot=\"start\">\n          <ts-button size=\"sm\" appearance=\"ghost\">B</ts-button>\n          <ts-button size=\"sm\" appearance=\"ghost\">I</ts-button>\n          <ts-button size=\"sm\" appearance=\"ghost\">U</ts-button>\n        </div>\n      </ts-toolbar>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Medium</p>\n      <ts-toolbar variant=\"bordered\" size=\"md\">\n        <div slot=\"start\">\n          <ts-button size=\"sm\" appearance=\"ghost\">B</ts-button>\n          <ts-button size=\"sm\" appearance=\"ghost\">I</ts-button>\n          <ts-button size=\"sm\" appearance=\"ghost\">U</ts-button>\n        </div>\n      </ts-toolbar>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Large</p>\n      <ts-toolbar variant=\"bordered\" size=\"lg\">\n        <div slot=\"start\">\n          <ts-button size=\"sm\" appearance=\"ghost\">B</ts-button>\n          <ts-button size=\"sm\" appearance=\"ghost\">I</ts-button>\n          <ts-button size=\"sm\" appearance=\"ghost\">U</ts-button>\n        </div>\n      </ts-toolbar>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"max-width: 600px; font-family: sans-serif;\">\n    <div style=\"border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden;\">\n      <ts-toolbar variant=\"bordered\">\n        <div slot=\"start\" style=\"display: flex; gap: 4px;\">\n          <ts-button size=\"sm\" appearance=\"ghost\">Bold</ts-button>\n          <ts-button size=\"sm\" appearance=\"ghost\">Italic</ts-button>\n          <ts-button size=\"sm\" appearance=\"ghost\">Underline</ts-button>\n          <ts-divider orientation=\"vertical\" style=\"height: 24px; margin: 0 4px;\"></ts-divider>\n          <ts-button size=\"sm\" appearance=\"ghost\">Link</ts-button>\n          <ts-button size=\"sm\" appearance=\"ghost\">Image</ts-button>\n        </div>\n        <div slot=\"end\" style=\"display: flex; gap: 4px;\">\n          <ts-button size=\"sm\" appearance=\"ghost\">Undo</ts-button>\n          <ts-button size=\"sm\" appearance=\"ghost\">Redo</ts-button>\n        </div>\n      </ts-toolbar>\n      <div style=\"padding: 16px; min-height: 200px;\">\n        <p style=\"color: #94a3b8; margin: 0;\">Start typing here...</p>\n      </div>\n    </div>\n  </div>\n`;\n"]}

package/dist/collection/components/tooltip/tooltip.css

@@ -0,0 +1,124 @@
+/* ==========================================================================
+   ts-tooltip — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-tooltip-bg       Popup background
+     --ts-tooltip-color    Popup text color
+     --ts-tooltip-radius   Popup border radius
+   ========================================================================== */
+
+:host {
+  display: inline-block;
+  position: relative;
+  font-family: var(--ts-font-family-base);
+
+  --ts-tooltip-bg: var(--ts-ref-neutral-900);
+  --ts-tooltip-color: #ffffff;
+  --ts-tooltip-radius: var(--ts-shape-badge);
+}
+
+.tooltip__trigger {
+  display: inline-block;
+}
+
+/* ---- Popup ---- */
+.tooltip__popup {
+  position: absolute;
+  z-index: var(--ts-z-tooltip);
+  padding: var(--ts-spacing-1) var(--ts-spacing-2);
+  background-color: var(--ts-tooltip-bg);
+  color: var(--ts-tooltip-color);
+  font-size: var(--ts-font-size-xs);
+  font-weight: var(--ts-font-weight-medium);
+  line-height: var(--ts-line-height-normal);
+  border-radius: var(--ts-tooltip-radius);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.95);
+  transition:
+    opacity var(--ts-transition-fast),
+    transform var(--ts-transition-fast);
+}
+
+.tooltip__popup--visible {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* ---- Placements ---- */
+.tooltip__popup--top {
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform-origin: bottom center;
+}
+.tooltip__popup--top,
+.tooltip__popup--top-start,
+.tooltip__popup--top-end {
+  bottom: calc(100% + 8px);
+}
+.tooltip__popup--top { left: 50%; margin-left: -50%; }
+.tooltip__popup--top-start { inset-inline-start: 0; }
+.tooltip__popup--top-end { inset-inline-end: 0; }
+
+.tooltip__popup--bottom,
+.tooltip__popup--bottom-start,
+.tooltip__popup--bottom-end {
+  top: calc(100% + 8px);
+}
+.tooltip__popup--bottom { left: 50%; margin-left: -50%; }
+.tooltip__popup--bottom-start { inset-inline-start: 0; }
+.tooltip__popup--bottom-end { inset-inline-end: 0; }
+
+.tooltip__popup--left,
+.tooltip__popup--left-start,
+.tooltip__popup--left-end {
+  inset-inline-end: calc(100% + 8px);
+}
+.tooltip__popup--left { top: 50%; transform: translateY(-50%) scale(0.95); }
+.tooltip__popup--left.tooltip__popup--visible { transform: translateY(-50%) scale(1); }
+
+.tooltip__popup--right,
+.tooltip__popup--right-start,
+.tooltip__popup--right-end {
+  inset-inline-start: calc(100% + 8px);
+}
+.tooltip__popup--right { top: 50%; transform: translateY(-50%) scale(0.95); }
+.tooltip__popup--right.tooltip__popup--visible { transform: translateY(-50%) scale(1); }
+
+/* ---- Arrow ---- */
+.tooltip__arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: var(--ts-tooltip-bg);
+  transform: rotate(45deg);
+}
+
+.tooltip__popup--top .tooltip__arrow,
+.tooltip__popup--top-start .tooltip__arrow,
+.tooltip__popup--top-end .tooltip__arrow {
+  bottom: -4px;
+  left: 50%;
+  margin-left: -4px;
+}
+
+.tooltip__popup--bottom .tooltip__arrow,
+.tooltip__popup--bottom-start .tooltip__arrow,
+.tooltip__popup--bottom-end .tooltip__arrow {
+  top: -4px;
+  left: 50%;
+  margin-left: -4px;
+}
+
+.tooltip__popup--left .tooltip__arrow {
+  inset-inline-end: -4px;
+  top: 50%;
+  margin-top: -4px;
+}
+
+.tooltip__popup--right .tooltip__arrow {
+  inset-inline-start: -4px;
+  top: 50%;
+  margin-top: -4px;
+}