@sankhyatronics/sankhya-cms 0.1.14 → 0.1.15

package/custom-elements.json

@@ -6671,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/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";
@@ -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.14",
+  "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",