@sankhyatronics/sankhya-cms 0.1.13 → 0.1.15

package/custom-elements.json

@@ -910,6 +910,125 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/chip/Chip.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A small rounded status pill: text in the default slot, with an optional leading dot. Tones map\nto the theme's status tokens (soft background, text colour on that background), so a chip reads\nthe same in every theme. Use `neutral` for plain labels, `accent` for the brand tint, and the\nstatus tones for meaning only (success = done, warning = due soon, danger = overdue).\n\nThe pill's box (padding, background) sits on an inner element, not on `:host`: an outer page's\nCSS reset (Tailwind's preflight zeroes padding on every element) beats a component's `:host`\nrules, which would leave the pill without its padding.",
+          "name": "Chip",
+          "members": [
+            {
+              "kind": "field",
+              "name": "tone",
+              "type": {
+                "text": "'neutral' | 'accent' | 'success' | 'warning' | 'danger'"
+              },
+              "default": "'neutral'",
+              "description": "Colour treatment: a soft tint of the matching theme token.",
+              "attribute": "tone",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'md' | 'sm'"
+              },
+              "default": "'md'",
+              "description": "`sm` for dense lists and table cells.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "translucent",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "A see-through white pill with white text, for a chip on a coloured card.",
+              "attribute": "translucent",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dot",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Shows a leading dot in the chip's text colour.",
+              "attribute": "dot",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "tone",
+              "type": {
+                "text": "'neutral' | 'accent' | 'success' | 'warning' | 'danger'"
+              },
+              "default": "'neutral'",
+              "description": "Colour treatment: a soft tint of the matching theme token.",
+              "fieldName": "tone"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'md' | 'sm'"
+              },
+              "default": "'md'",
+              "description": "`sm` for dense lists and table cells.",
+              "fieldName": "size"
+            },
+            {
+              "name": "translucent",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "A see-through white pill with white text, for a chip on a coloured card.",
+              "fieldName": "translucent"
+            },
+            {
+              "name": "dot",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Shows a leading dot in the chip's text colour.",
+              "fieldName": "dot"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "st-chip",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Chip",
+          "declaration": {
+            "name": "Chip",
+            "module": "src/chip/Chip.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "st-chip",
+          "declaration": {
+            "name": "Chip",
+            "module": "src/chip/Chip.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/content-block/ContentBlock.ts",
@@ -1096,105 +1215,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/chip/Chip.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A small rounded status pill: text in the default slot, with an optional leading dot. Tones map\nto the theme's status tokens (soft background, text colour on that background), so a chip reads\nthe same in every theme. Use `neutral` for plain labels, `accent` for the brand tint, and the\nstatus tones for meaning only (success = done, warning = due soon, danger = overdue).\n\nThe pill's box (padding, background) sits on an inner element, not on `:host`: an outer page's\nCSS reset (Tailwind's preflight zeroes padding on every element) beats a component's `:host`\nrules, which would leave the pill without its padding.",
-          "name": "Chip",
-          "members": [
-            {
-              "kind": "field",
-              "name": "tone",
-              "type": {
-                "text": "'neutral' | 'accent' | 'success' | 'warning' | 'danger'"
-              },
-              "default": "'neutral'",
-              "description": "Colour treatment: a soft tint of the matching theme token.",
-              "attribute": "tone",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'md' | 'sm'"
-              },
-              "default": "'md'",
-              "description": "`sm` for dense lists and table cells.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "dot",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Shows a leading dot in the chip's text colour.",
-              "attribute": "dot",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "tone",
-              "type": {
-                "text": "'neutral' | 'accent' | 'success' | 'warning' | 'danger'"
-              },
-              "default": "'neutral'",
-              "description": "Colour treatment: a soft tint of the matching theme token.",
-              "fieldName": "tone"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'md' | 'sm'"
-              },
-              "default": "'md'",
-              "description": "`sm` for dense lists and table cells.",
-              "fieldName": "size"
-            },
-            {
-              "name": "dot",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Shows a leading dot in the chip's text colour.",
-              "fieldName": "dot"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "st-chip",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Chip",
-          "declaration": {
-            "name": "Chip",
-            "module": "src/chip/Chip.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "st-chip",
-          "declaration": {
-            "name": "Chip",
-            "module": "src/chip/Chip.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/cookie-consent/CookieConsent.ts",
@@ -6651,6 +6671,64 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tooltip/Tooltip.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A small label that shows above a control on hover and on keyboard focus. Wrap the control (a button\nor an icon button) in it and pass the same words as its accessible name in `text`. The bubble is\ndecorative (`aria-hidden`): the control's own `aria-label` is what a screen reader announces, so the\nwords aren't read twice.\n\nThe bubble is positioned by the wrapper, so put the tooltip where it has room above: it's not\nclipped by the wrapper's own box, but it is clipped by an ancestor with `overflow: hidden`.",
+          "name": "Tooltip",
+          "members": [
+            {
+              "kind": "field",
+              "name": "text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The words shown in the bubble: the same words as the control's accessible name.",
+              "attribute": "text"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The words shown in the bubble: the same words as the control's accessible name.",
+              "fieldName": "text"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "st-tooltip",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Tooltip",
+          "declaration": {
+            "name": "Tooltip",
+            "module": "src/tooltip/Tooltip.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "st-tooltip",
+          "declaration": {
+            "name": "Tooltip",
+            "module": "src/tooltip/Tooltip.ts"
+          }
+        }
+      ]
     }
   ]
 }

package/dist/chip/index.d.ts

@@ -17,6 +17,8 @@ declare class Chip extends LitElement {
     tone: 'neutral' | 'accent' | 'success' | 'warning' | 'danger';
     /** `sm` for dense lists and table cells. */
     size: 'md' | 'sm';
+    /** A see-through white pill with white text, for a chip on a coloured card. */
+    translucent: boolean;
     /** Shows a leading dot in the chip's text colour. */
     dot: boolean;
     render(): lit.TemplateResult<1>;

package/dist/chip/index.js

@@ -1,6 +1,6 @@
 import {
   Chip
-} from "../chunk-M5RNFNBI.js";
+} from "../chunk-AKJQ345O.js";
 import "../chunk-KMU6ABQF.js";
 import "../chunk-EUXUH3YW.js";
 export {

package/dist/{chunk-M5RNFNBI.js → chunk-AKJQ345O.js}

@@ -13,6 +13,7 @@ var Chip = class extends LitElement {
     super(...arguments);
     this.tone = "neutral";
     this.size = "md";
+    this.translucent = false;
     this.dot = false;
   }
   render() {
@@ -67,6 +68,13 @@ Chip.styles = css`
       color: var(--st-color-danger-text);
     }
 
+    /* A see-through pill for a chip on a coloured card (the blue hero): white at a low opacity, with white
+       text, like the License Server's hero chips. */
+    :host([translucent]) .pill {
+      background: rgb(255 255 255 / 0.18);
+      color: var(--st-color-on-solid);
+    }
+
     .dot {
       width: 6px;
       height: 6px;
@@ -85,6 +93,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, reflect: true })
 ], Chip.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Chip.prototype, "translucent", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], Chip.prototype, "dot", 2);
@@ -95,4 +106,4 @@ Chip = __decorateClass([
 export {
   Chip
 };
-//# sourceMappingURL=chunk-M5RNFNBI.js.map
+//# sourceMappingURL=chunk-AKJQ345O.js.map

package/dist/{chunk-M5RNFNBI.js.map → chunk-AKJQ345O.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/chip/Chip.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { fontFamilyStyles } from '../shared/styles';\n\n/**\n * A small rounded status pill: text in the default slot, with an optional leading dot. Tones map\n * to the theme's status tokens (soft background, text colour on that background), so a chip reads\n * the same in every theme. Use `neutral` for plain labels, `accent` for the brand tint, and the\n * status tones for meaning only (success = done, warning = due soon, danger = overdue).\n *\n * The pill's box (padding, background) sits on an inner element, not on `:host`: an outer page's\n * CSS reset (Tailwind's preflight zeroes padding on every element) beats a component's `:host`\n * rules, which would leave the pill without its padding.\n */\n@customElement('st-chip')\nexport class Chip extends LitElement {\n  static styles = css`\n    ${fontFamilyStyles}\n\n    :host {\n      display: inline-flex;\n      max-width: 100%;\n    }\n\n    .pill {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--st-space-6);\n      padding: var(--st-space-2) var(--st-space-10);\n      border-radius: var(--st-radius-full);\n      font-size: var(--st-text-sm);\n      font-weight: var(--st-font-weight-medium);\n      line-height: 1.4;\n      white-space: nowrap;\n      background: var(--st-color-subtle);\n      color: var(--st-color-text-secondary);\n      font-variant-numeric: tabular-nums;\n    }\n\n    :host([size='sm']) .pill {\n      padding: 0 var(--st-space-8);\n      font-size: var(--st-text-xs);\n    }\n\n    :host([tone='accent']) .pill {\n      background: var(--st-color-accent-subtle);\n      color: var(--st-color-accent-text);\n    }\n\n    :host([tone='success']) .pill {\n      background: var(--st-color-success-subtle);\n      color: var(--st-color-success-text);\n    }\n\n    :host([tone='warning']) .pill {\n      background: var(--st-color-warning-subtle);\n      color: var(--st-color-warning-text);\n    }\n\n    :host([tone='danger']) .pill {\n      background: var(--st-color-danger-subtle);\n      color: var(--st-color-danger-text);\n    }\n\n    .dot {\n      width: 6px;\n      height: 6px;\n      border-radius: var(--st-radius-circle);\n      background: currentColor;\n      flex: none;\n    }\n\n    :host(:not([dot])) .dot {\n      display: none;\n    }\n  `;\n\n  /** Colour treatment: a soft tint of the matching theme token. */\n  @property({ type: String, reflect: true })\n  tone: 'neutral' | 'accent' | 'success' | 'warning' | 'danger' = 'neutral';\n\n  /** `sm` for dense lists and table cells. */\n  @property({ type: String, reflect: true })\n  size: 'md' | 'sm' = 'md';\n\n  /** Shows a leading dot in the chip's text colour. */\n  @property({ type: Boolean, reflect: true })\n  dot = false;\n\n  render() {\n    return html`<span class=\"pill\" part=\"pill\"><span class=\"dot\" part=\"dot\" aria-hidden=\"true\"></span><slot></slot></span>`;\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAejC,IAAM,OAAN,cAAmB,WAAW;AAAA,EAA9B;AAAA;AAgEL,gBAAgE;AAIhE,gBAAoB;AAIpB,eAAM;AAAA;AAAA,EAEN,SAAS;AACP,WAAO;AAAA,EACT;AACF;AA7Ea,KACJ,SAAS;AAAA,MACZ,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8DpB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA/D9B,KAgEX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAnE9B,KAoEX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAvE/B,KAwEX;AAxEW,OAAN;AAAA,EADN,cAAc,SAAS;AAAA,GACX;","names":[]}
+{"version":3,"sources":["../src/chip/Chip.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { fontFamilyStyles } from '../shared/styles';\n\n/**\n * A small rounded status pill: text in the default slot, with an optional leading dot. Tones map\n * to the theme's status tokens (soft background, text colour on that background), so a chip reads\n * the same in every theme. Use `neutral` for plain labels, `accent` for the brand tint, and the\n * status tones for meaning only (success = done, warning = due soon, danger = overdue).\n *\n * The pill's box (padding, background) sits on an inner element, not on `:host`: an outer page's\n * CSS reset (Tailwind's preflight zeroes padding on every element) beats a component's `:host`\n * rules, which would leave the pill without its padding.\n */\n@customElement('st-chip')\nexport class Chip extends LitElement {\n  static styles = css`\n    ${fontFamilyStyles}\n\n    :host {\n      display: inline-flex;\n      max-width: 100%;\n    }\n\n    .pill {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--st-space-6);\n      padding: var(--st-space-2) var(--st-space-10);\n      border-radius: var(--st-radius-full);\n      font-size: var(--st-text-sm);\n      font-weight: var(--st-font-weight-medium);\n      line-height: 1.4;\n      white-space: nowrap;\n      background: var(--st-color-subtle);\n      color: var(--st-color-text-secondary);\n      font-variant-numeric: tabular-nums;\n    }\n\n    :host([size='sm']) .pill {\n      padding: 0 var(--st-space-8);\n      font-size: var(--st-text-xs);\n    }\n\n    :host([tone='accent']) .pill {\n      background: var(--st-color-accent-subtle);\n      color: var(--st-color-accent-text);\n    }\n\n    :host([tone='success']) .pill {\n      background: var(--st-color-success-subtle);\n      color: var(--st-color-success-text);\n    }\n\n    :host([tone='warning']) .pill {\n      background: var(--st-color-warning-subtle);\n      color: var(--st-color-warning-text);\n    }\n\n    :host([tone='danger']) .pill {\n      background: var(--st-color-danger-subtle);\n      color: var(--st-color-danger-text);\n    }\n\n    /* A see-through pill for a chip on a coloured card (the blue hero): white at a low opacity, with white\n       text, like the License Server's hero chips. */\n    :host([translucent]) .pill {\n      background: rgb(255 255 255 / 0.18);\n      color: var(--st-color-on-solid);\n    }\n\n    .dot {\n      width: 6px;\n      height: 6px;\n      border-radius: var(--st-radius-circle);\n      background: currentColor;\n      flex: none;\n    }\n\n    :host(:not([dot])) .dot {\n      display: none;\n    }\n  `;\n\n  /** Colour treatment: a soft tint of the matching theme token. */\n  @property({ type: String, reflect: true })\n  tone: 'neutral' | 'accent' | 'success' | 'warning' | 'danger' = 'neutral';\n\n  /** `sm` for dense lists and table cells. */\n  @property({ type: String, reflect: true })\n  size: 'md' | 'sm' = 'md';\n\n  /** A see-through white pill with white text, for a chip on a coloured card. */\n  @property({ type: Boolean, reflect: true })\n  translucent = false;\n\n  /** Shows a leading dot in the chip's text colour. */\n  @property({ type: Boolean, reflect: true })\n  dot = false;\n\n  render() {\n    return html`<span class=\"pill\" part=\"pill\"><span class=\"dot\" part=\"dot\" aria-hidden=\"true\"></span><slot></slot></span>`;\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAejC,IAAM,OAAN,cAAmB,WAAW;AAAA,EAA9B;AAAA;AAuEL,gBAAgE;AAIhE,gBAAoB;AAIpB,uBAAc;AAId,eAAM;AAAA;AAAA,EAEN,SAAS;AACP,WAAO;AAAA,EACT;AACF;AAxFa,KACJ,SAAS;AAAA,MACZ,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqEpB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAtE9B,KAuEX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA1E9B,KA2EX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA9E/B,KA+EX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAlF/B,KAmFX;AAnFW,OAAN;AAAA,EADN,cAAc,SAAS;AAAA,GACX;","names":[]}

package/dist/chunk-HO44NKJ5.js

@@ -0,0 +1,68 @@
+import {
+  fontFamilyStyles
+} from "./chunk-KMU6ABQF.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/tooltip/Tooltip.ts
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var Tooltip = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.text = "";
+  }
+  render() {
+    return html`<slot></slot><span class="bubble" part="bubble" aria-hidden="true">${this.text}</span>`;
+  }
+};
+Tooltip.styles = css`
+    ${fontFamilyStyles}
+
+    :host {
+      position: relative;
+      display: inline-flex;
+    }
+
+    .bubble {
+      position: absolute;
+      bottom: calc(100% + 6px);
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 20;
+      padding: var(--st-space-4) var(--st-space-8);
+      border-radius: var(--st-radius-xs);
+      background: var(--st-color-text-strong);
+      color: var(--st-color-on-solid);
+      font-size: var(--st-text-xs);
+      font-weight: var(--st-font-weight-medium);
+      line-height: 1.3;
+      white-space: nowrap;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.12s ease;
+    }
+
+    :host(:hover) .bubble,
+    :host(:focus-within) .bubble {
+      opacity: 1;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .bubble {
+        transition: none;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], Tooltip.prototype, "text", 2);
+Tooltip = __decorateClass([
+  customElement("st-tooltip")
+], Tooltip);
+
+export {
+  Tooltip
+};
+//# sourceMappingURL=chunk-HO44NKJ5.js.map

package/dist/chunk-HO44NKJ5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tooltip/Tooltip.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { fontFamilyStyles } from '../shared/styles';\n\n/**\n * A small label that shows above a control on hover and on keyboard focus. Wrap the control (a button\n * or an icon button) in it and pass the same words as its accessible name in `text`. The bubble is\n * decorative (`aria-hidden`): the control's own `aria-label` is what a screen reader announces, so the\n * words aren't read twice.\n *\n * The bubble is positioned by the wrapper, so put the tooltip where it has room above: it's not\n * clipped by the wrapper's own box, but it is clipped by an ancestor with `overflow: hidden`.\n */\n@customElement('st-tooltip')\nexport class Tooltip extends LitElement {\n  static styles = css`\n    ${fontFamilyStyles}\n\n    :host {\n      position: relative;\n      display: inline-flex;\n    }\n\n    .bubble {\n      position: absolute;\n      bottom: calc(100% + 6px);\n      left: 50%;\n      transform: translateX(-50%);\n      z-index: 20;\n      padding: var(--st-space-4) var(--st-space-8);\n      border-radius: var(--st-radius-xs);\n      background: var(--st-color-text-strong);\n      color: var(--st-color-on-solid);\n      font-size: var(--st-text-xs);\n      font-weight: var(--st-font-weight-medium);\n      line-height: 1.3;\n      white-space: nowrap;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity 0.12s ease;\n    }\n\n    :host(:hover) .bubble,\n    :host(:focus-within) .bubble {\n      opacity: 1;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .bubble {\n        transition: none;\n      }\n    }\n  `;\n\n  /** The words shown in the bubble: the same words as the control's accessible name. */\n  @property({ type: String })\n  text = '';\n\n  render() {\n    return html`<slot></slot><span class=\"bubble\" part=\"bubble\" aria-hidden=\"true\">${this.text}</span>`;\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAcjC,IAAM,UAAN,cAAsB,WAAW;AAAA,EAAjC;AAAA;AA0CL,gBAAO;AAAA;AAAA,EAEP,SAAS;AACP,WAAO,0EAA0E,KAAK,IAAI;AAAA,EAC5F;AACF;AA/Ca,QACJ,SAAS;AAAA,MACZ,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCpB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAzCf,QA0CX;AA1CW,UAAN;AAAA,EADN,cAAc,YAAY;AAAA,GACd;","names":[]}

package/dist/index.d.ts

@@ -27,4 +27,5 @@ export { SegmentChangeEventDetail, SegmentedControl, SegmentedOption } from './s
 export { Select, SelectChangedEventDetail, SelectOption } from './select/index.js';
 export { StatItem, Stats } from './stats/index.js';
 export { TestimonialItem, TestimonialMetric, Testimonials, TestimonialsLinkEventDetail } from './testimonials/index.js';
+export { Tooltip } from './tooltip/index.js';
 import 'lit';

package/dist/index.js

@@ -1,6 +1,9 @@
 import {
   Testimonials
 } from "./chunk-DH53HZPB.js";
+import {
+  Tooltip
+} from "./chunk-HO44NKJ5.js";
 import {
   PromoBanner
 } from "./chunk-VWS53WY4.js";
@@ -82,7 +85,7 @@ import {
 } from "./chunk-EMCQBT3S.js";
 import {
   Chip
-} from "./chunk-M5RNFNBI.js";
+} from "./chunk-AKJQ345O.js";
 import {
   ContentBlock
 } from "./chunk-BMHMNXIA.js";
@@ -124,6 +127,7 @@ export {
   SegmentedControl,
   Select,
   Stats,
-  Testimonials
+  Testimonials,
+  Tooltip
 };
 //# sourceMappingURL=index.js.map

package/dist/tooltip/index.d.ts

@@ -0,0 +1,20 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * A small label that shows above a control on hover and on keyboard focus. Wrap the control (a button
+ * or an icon button) in it and pass the same words as its accessible name in `text`. The bubble is
+ * decorative (`aria-hidden`): the control's own `aria-label` is what a screen reader announces, so the
+ * words aren't read twice.
+ *
+ * The bubble is positioned by the wrapper, so put the tooltip where it has room above: it's not
+ * clipped by the wrapper's own box, but it is clipped by an ancestor with `overflow: hidden`.
+ */
+declare class Tooltip extends LitElement {
+    static styles: lit.CSSResult;
+    /** The words shown in the bubble: the same words as the control's accessible name. */
+    text: string;
+    render(): lit.TemplateResult<1>;
+}
+
+export { Tooltip };

package/dist/tooltip/index.js

@@ -0,0 +1,9 @@
+import {
+  Tooltip
+} from "../chunk-HO44NKJ5.js";
+import "../chunk-KMU6ABQF.js";
+import "../chunk-EUXUH3YW.js";
+export {
+  Tooltip
+};
+//# sourceMappingURL=index.js.map

package/dist/tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sankhyatronics/sankhya-cms",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "repository": {
     "type": "git",
     "url": "https://github.com/sankhyatronics/SankhyaCMS.git",
@@ -24,6 +24,10 @@
       "types": "./dist/bento-grid/index.d.ts",
       "import": "./dist/bento-grid/index.js"
     },
+    "./tooltip": {
+      "types": "./dist/tooltip/index.d.ts",
+      "import": "./dist/tooltip/index.js"
+    },
     "./card": {
       "types": "./dist/card/index.d.ts",
       "import": "./dist/card/index.js"
@@ -177,7 +181,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsup src/index.ts src/schema/index.ts src/theming/index.ts src/shared/styles.ts src/shared/icons.ts src/attention-panel/index.ts src/bar-chart/index.ts src/chip/index.ts src/date-tile/index.ts src/kpi-card/index.ts src/segmented-control/index.ts src/bento-grid/index.ts src/card/index.ts src/carousel/index.ts src/content-block/index.ts src/cookie-consent/index.ts src/dropdown/index.ts src/feature-split/index.ts src/features-section/index.ts src/footer/index.ts src/header/index.ts src/hero/index.ts src/icon-button/index.ts src/items-accordion/index.ts src/markdown/index.ts src/mega-menu/index.ts src/menu-grid/index.ts src/menu-grid-item/index.ts src/menu-item/index.ts src/promo-banner/index.ts src/section/index.ts src/select/index.ts src/stats/index.ts src/testimonials/index.ts --format esm --dts --sourcemap --clean && node scripts/copy-theme.mjs && node scripts/copy-fonts.mjs && cem analyze",
+    "build": "tsup src/index.ts src/schema/index.ts src/theming/index.ts src/shared/styles.ts src/shared/icons.ts src/attention-panel/index.ts src/bar-chart/index.ts src/chip/index.ts src/date-tile/index.ts src/kpi-card/index.ts src/segmented-control/index.ts src/tooltip/index.ts src/bento-grid/index.ts src/card/index.ts src/carousel/index.ts src/content-block/index.ts src/cookie-consent/index.ts src/dropdown/index.ts src/feature-split/index.ts src/features-section/index.ts src/footer/index.ts src/header/index.ts src/hero/index.ts src/icon-button/index.ts src/items-accordion/index.ts src/markdown/index.ts src/mega-menu/index.ts src/menu-grid/index.ts src/menu-grid-item/index.ts src/menu-item/index.ts src/promo-banner/index.ts src/section/index.ts src/select/index.ts src/stats/index.ts src/testimonials/index.ts --format esm --dts --sourcemap --clean && node scripts/copy-theme.mjs && node scripts/copy-fonts.mjs && cem analyze",
     "dev": "tsup src/index.ts --watch --format esm --dts",
     "typecheck": "tsc --noEmit",
     "lint": "oxlint",