@spectrum-web-components/truncated 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/truncated",
-    "version": "1.1.0",
+    "version": "1.1.2",
     "publishConfig": {
         "access": "public"
     },
@@ -58,10 +58,10 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^1.1.0",
-        "@spectrum-web-components/overlay": "^1.1.0",
-        "@spectrum-web-components/styles": "^1.1.0",
-        "@spectrum-web-components/tooltip": "^1.1.0"
+        "@spectrum-web-components/base": "^1.1.2",
+        "@spectrum-web-components/overlay": "^1.1.2",
+        "@spectrum-web-components/styles": "^1.1.2",
+        "@spectrum-web-components/tooltip": "^1.1.2"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
@@ -69,5 +69,5 @@
         "./sp-*.js",
         "./**/*.dev.js"
     ],
-    "gitHead": "e3c6e52501451acc6fa85b10dd718267b80a01ab"
+    "gitHead": "9ee45f2dfd3ac1939072726d00195c6c05d9a562"
 }

package/sp-truncated.d.ts

@@ -0,0 +1,6 @@
+import { Truncated } from './src/Truncated.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-truncated': Truncated;
+    }
+}

package/sp-truncated.dev.js

@@ -0,0 +1,4 @@
+"use strict";
+import { Truncated } from "./src/Truncated.dev.js";
+customElements.define("sp-truncated", Truncated);
+//# sourceMappingURL=sp-truncated.dev.js.map

package/sp-truncated.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-truncated.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { Truncated } from './src/Truncated.dev.js'\n\ncustomElements.define('sp-truncated', Truncated);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-truncated': Truncated;\n    }\n}\n"],
+  "mappings": ";AAYA,SAAS,iBAAiB;AAE1B,eAAe,OAAO,gBAAgB,SAAS;",
+  "names": []
+}

package/sp-truncated.js

@@ -0,0 +1,2 @@
+"use strict";import{Truncated as e}from"./src/Truncated.js";customElements.define("sp-truncated",e);
+//# sourceMappingURL=sp-truncated.js.map

package/sp-truncated.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-truncated.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { Truncated } from './src/Truncated.js';\n\ncustomElements.define('sp-truncated', Truncated);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-truncated': Truncated;\n    }\n}\n"],
+  "mappings": "aAYA,OAAS,aAAAA,MAAiB,qBAE1B,eAAe,OAAO,eAAgBA,CAAS",
+  "names": ["Truncated"]
+}

package/src/Truncated.d.ts

@@ -0,0 +1,33 @@
+import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
+import type { Placement } from '@spectrum-web-components/overlay';
+import '@spectrum-web-components/overlay/sp-overlay.js';
+import '@spectrum-web-components/tooltip/sp-tooltip.js';
+/**
+ * @element sp-truncated
+ */
+export declare class Truncated extends SpectrumElement {
+    static get styles(): CSSResultArray;
+    /**
+     * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
+     */
+    placement: Placement;
+    successMessage: string;
+    hasCopied: boolean;
+    private fullText;
+    private overflowing;
+    private content;
+    private overlayEl?;
+    private slottedContent;
+    private slottedOverflow;
+    get hasCustomOverflow(): boolean;
+    private resizeObserver;
+    private mutationObserver;
+    render(): TemplateResult;
+    private renderTooltip;
+    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    private handleOverflowSlotchange;
+    private handleClick;
+    private measureOverflow;
+    private copyText;
+}

package/src/Truncated.dev.js

@@ -0,0 +1,159 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import {
+  html,
+  SpectrumElement
+} from "@spectrum-web-components/base";
+import "@spectrum-web-components/overlay/sp-overlay.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import {
+  property,
+  query,
+  queryAssignedElements,
+  queryAssignedNodes,
+  state
+} from "@spectrum-web-components/base/src/decorators.js";
+import styles from "./truncated.css.js";
+export class Truncated extends SpectrumElement {
+  constructor() {
+    super(...arguments);
+    this.placement = "top-start";
+    this.successMessage = "Copied to clipboard";
+    this.hasCopied = false;
+    this.fullText = "";
+    this.overflowing = false;
+    this.resizeObserver = new ResizeObserver(() => {
+      this.measureOverflow();
+    });
+    this.mutationObserver = new MutationObserver(() => {
+      this.copyText();
+    });
+  }
+  static get styles() {
+    return [styles];
+  }
+  get hasCustomOverflow() {
+    return this.slottedOverflow.length > 0;
+  }
+  render() {
+    return html`
+            <span id="content" @click=${this.handleClick}>
+                <slot></slot>
+            </span>
+            ${this.renderTooltip()}
+        `;
+  }
+  renderTooltip() {
+    if (!this.overflowing) {
+      return html`
+                <slot
+                    name="overflow"
+                    style="display: none"
+                    @slotchange=${this.handleOverflowSlotchange}
+                ></slot>
+            `;
+    }
+    return html`
+            <sp-overlay
+                id="overlay"
+                .triggerElement=${this}
+                .triggerInteraction=${"hover"}
+                type="hint"
+                placement=${this.placement}
+            >
+                <sp-tooltip name="tooltip">
+                    ${!this.hasCopied ? html`
+                              <slot
+                                  name="overflow"
+                                  @slotchange=${this.handleOverflowSlotchange}
+                              >
+                                  ${this.fullText}
+                              </slot>
+                          ` : this.successMessage}
+                </sp-tooltip>
+            </sp-overlay>
+        `;
+  }
+  firstUpdated(_changedProperties) {
+    this.resizeObserver.observe(this);
+    this.resizeObserver.observe(this.content);
+    this.copyText();
+    this.measureOverflow();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("hasCopied") && this.hasCopied && this.overlayEl) {
+      this.overlayEl.open = true;
+    }
+  }
+  handleOverflowSlotchange() {
+    this.mutationObserver.disconnect();
+    if (!this.hasCustomOverflow) {
+      this.mutationObserver.observe(this.content, {
+        subtree: true,
+        childList: true,
+        characterData: true
+      });
+    }
+  }
+  handleClick() {
+    if (!this.overflowing) return;
+    const textToCopy = this.slottedContent.map((node) => {
+      var _a;
+      return (_a = node.textContent) != null ? _a : "";
+    }).join("").trim();
+    navigator.clipboard.writeText(textToCopy);
+    this.hasCopied = true;
+    setTimeout(() => {
+      this.hasCopied = false;
+    }, 6e3);
+  }
+  measureOverflow() {
+    this.overflowing = this.content.offsetWidth > this.clientWidth + 1;
+  }
+  // Copies just the textContent of slotted nodes into the tooltip to avoid duplicating the user's DOM
+  copyText() {
+    if (this.hasCustomOverflow) return;
+    this.fullText = this.slottedContent.map((node) => {
+      var _a;
+      return (_a = node.textContent) != null ? _a : "";
+    }).join("");
+  }
+}
+__decorateClass([
+  property()
+], Truncated.prototype, "placement", 2);
+__decorateClass([
+  property({ type: String, attribute: "success-message" })
+], Truncated.prototype, "successMessage", 2);
+__decorateClass([
+  state()
+], Truncated.prototype, "hasCopied", 2);
+__decorateClass([
+  state()
+], Truncated.prototype, "fullText", 2);
+__decorateClass([
+  state()
+], Truncated.prototype, "overflowing", 2);
+__decorateClass([
+  query("#content")
+], Truncated.prototype, "content", 2);
+__decorateClass([
+  query("#overlay")
+], Truncated.prototype, "overlayEl", 2);
+__decorateClass([
+  queryAssignedNodes({ flatten: true })
+], Truncated.prototype, "slottedContent", 2);
+__decorateClass([
+  queryAssignedElements({ slot: "overflow", flatten: true })
+], Truncated.prototype, "slottedOverflow", 2);
+//# sourceMappingURL=Truncated.dev.js.map

package/src/Truncated.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["Truncated.ts"],
+  "sourcesContent": ["/*\nCopyright 2021 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport type { Overlay, Placement } from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport {\n    property,\n    query,\n    queryAssignedElements,\n    queryAssignedNodes,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport styles from './truncated.css.js';\n\n/**\n * @element sp-truncated\n */\nexport class Truncated extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    /**\n     * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n     */\n    @property()\n    placement: Placement = 'top-start';\n\n    /*\n     * @type {String}\n     * @attr success-message\n     * @description The message to display when the text is copied to the clipboard after clicking on the truncated text\n     */\n    @property({ type: String, attribute: 'success-message' })\n    successMessage = 'Copied to clipboard';\n\n    @state()\n    hasCopied = false;\n\n    @state()\n    private fullText = '';\n\n    @state()\n    private overflowing = false;\n\n    @query('#content')\n    private content!: HTMLElement;\n\n    @query('#overlay')\n    private overlayEl?: Overlay;\n\n    @queryAssignedNodes({ flatten: true })\n    private slottedContent!: Node[];\n\n    // elements instead of nodes because, according to spec,\n    // flattened assignedNodes will return a slot's *children* if there are no assigned nodes.\n    // \u00AF\\_(\u30C4)_/\u00AF\n    @queryAssignedElements({ slot: 'overflow', flatten: true })\n    private slottedOverflow!: HTMLElement[];\n\n    get hasCustomOverflow(): boolean {\n        return this.slottedOverflow.length > 0;\n    }\n\n    private resizeObserver = new ResizeObserver(() => {\n        this.measureOverflow();\n    });\n\n    private mutationObserver = new MutationObserver(() => {\n        this.copyText();\n    });\n\n    override render(): TemplateResult {\n        /* eslint-disable lit-a11y/click-events-have-key-events */\n        return html`\n            <span id=\"content\" @click=${this.handleClick}>\n                <slot></slot>\n            </span>\n            ${this.renderTooltip()}\n        `;\n        /* eslint-enable lit-a11y/click-events-have-key-events */\n    }\n\n    private renderTooltip(): TemplateResult | undefined {\n        if (!this.overflowing) {\n            return html`\n                <slot\n                    name=\"overflow\"\n                    style=\"display: none\"\n                    @slotchange=${this.handleOverflowSlotchange}\n                ></slot>\n            `;\n        }\n        return html`\n            <sp-overlay\n                id=\"overlay\"\n                .triggerElement=${this as HTMLElement}\n                .triggerInteraction=${'hover'}\n                type=\"hint\"\n                placement=${this.placement}\n            >\n                <sp-tooltip name=\"tooltip\">\n                    ${!this.hasCopied\n                        ? html`\n                              <slot\n                                  name=\"overflow\"\n                                  @slotchange=${this.handleOverflowSlotchange}\n                              >\n                                  ${this.fullText}\n                              </slot>\n                          `\n                        : this.successMessage}\n                </sp-tooltip>\n            </sp-overlay>\n        `;\n    }\n\n    protected override firstUpdated(\n        _changedProperties: PropertyValues<this>\n    ): void {\n        this.resizeObserver.observe(this);\n        this.resizeObserver.observe(this.content);\n        this.copyText();\n        this.measureOverflow();\n    }\n\n    protected override updated(changedProperties: PropertyValues<this>): void {\n        super.updated(changedProperties);\n        if (\n            changedProperties.has('hasCopied') &&\n            this.hasCopied &&\n            this.overlayEl\n        ) {\n            // we know overlayEl exists because it couldn't copy the text otherwise\n            this.overlayEl.open = true;\n        }\n    }\n\n    private handleOverflowSlotchange(): void {\n        this.mutationObserver.disconnect();\n        if (!this.hasCustomOverflow) {\n            /* c8 ignore next 5 */\n            this.mutationObserver.observe(this.content, {\n                subtree: true,\n                childList: true,\n                characterData: true,\n            });\n        }\n    }\n\n    private handleClick(): void {\n        if (!this.overflowing) return;\n\n        const textToCopy = this.slottedContent\n            .map((node) => node.textContent ?? '')\n            .join('')\n            .trim();\n        navigator.clipboard.writeText(textToCopy);\n        this.hasCopied = true;\n        /* c8 ignore next 3 */\n        setTimeout(() => {\n            this.hasCopied = false;\n        }, 6000);\n    }\n\n    private measureOverflow(): void {\n        // Add 1 because Safari sometimes rounds by 1px, breaking the calculation otherwise\n        this.overflowing = this.content.offsetWidth > this.clientWidth + 1;\n    }\n\n    // Copies just the textContent of slotted nodes into the tooltip to avoid duplicating the user's DOM\n    private copyText(): void {\n        if (this.hasCustomOverflow) return;\n        this.fullText = this.slottedContent\n            .map((node) => node.textContent ?? '')\n            .join('');\n    }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/src/Truncated.js

@@ -0,0 +1,32 @@
+"use strict";var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var s=(l,o,e,r)=>{for(var t=r>1?void 0:r?m(o,e):o,a=l.length-1,n;a>=0;a--)(n=l[a])&&(t=(r?n(o,e,t):n(t))||t);return r&&t&&d(o,e,t),t};import{html as i,SpectrumElement as u}from"@spectrum-web-components/base";import"@spectrum-web-components/overlay/sp-overlay.js";import"@spectrum-web-components/tooltip/sp-tooltip.js";import{property as h,query as v,queryAssignedElements as c,queryAssignedNodes as f,state as p}from"@spectrum-web-components/base/src/decorators.js";import y from"./truncated.css.js";export class Truncated extends u{constructor(){super(...arguments);this.placement="top-start";this.successMessage="Copied to clipboard";this.hasCopied=!1;this.fullText="";this.overflowing=!1;this.resizeObserver=new ResizeObserver(()=>{this.measureOverflow()});this.mutationObserver=new MutationObserver(()=>{this.copyText()})}static get styles(){return[y]}get hasCustomOverflow(){return this.slottedOverflow.length>0}render(){return i`
+            <span id="content" @click=${this.handleClick}>
+                <slot></slot>
+            </span>
+            ${this.renderTooltip()}
+        `}renderTooltip(){return this.overflowing?i`
+            <sp-overlay
+                id="overlay"
+                .triggerElement=${this}
+                .triggerInteraction=${"hover"}
+                type="hint"
+                placement=${this.placement}
+            >
+                <sp-tooltip name="tooltip">
+                    ${this.hasCopied?this.successMessage:i`
+                              <slot
+                                  name="overflow"
+                                  @slotchange=${this.handleOverflowSlotchange}
+                              >
+                                  ${this.fullText}
+                              </slot>
+                          `}
+                </sp-tooltip>
+            </sp-overlay>
+        `:i`
+                <slot
+                    name="overflow"
+                    style="display: none"
+                    @slotchange=${this.handleOverflowSlotchange}
+                ></slot>
+            `}firstUpdated(e){this.resizeObserver.observe(this),this.resizeObserver.observe(this.content),this.copyText(),this.measureOverflow()}updated(e){super.updated(e),e.has("hasCopied")&&this.hasCopied&&this.overlayEl&&(this.overlayEl.open=!0)}handleOverflowSlotchange(){this.mutationObserver.disconnect(),this.hasCustomOverflow||this.mutationObserver.observe(this.content,{subtree:!0,childList:!0,characterData:!0})}handleClick(){if(!this.overflowing)return;const e=this.slottedContent.map(r=>{var t;return(t=r.textContent)!=null?t:""}).join("").trim();navigator.clipboard.writeText(e),this.hasCopied=!0,setTimeout(()=>{this.hasCopied=!1},6e3)}measureOverflow(){this.overflowing=this.content.offsetWidth>this.clientWidth+1}copyText(){this.hasCustomOverflow||(this.fullText=this.slottedContent.map(e=>{var r;return(r=e.textContent)!=null?r:""}).join(""))}}s([h()],Truncated.prototype,"placement",2),s([h({type:String,attribute:"success-message"})],Truncated.prototype,"successMessage",2),s([p()],Truncated.prototype,"hasCopied",2),s([p()],Truncated.prototype,"fullText",2),s([p()],Truncated.prototype,"overflowing",2),s([v("#content")],Truncated.prototype,"content",2),s([v("#overlay")],Truncated.prototype,"overlayEl",2),s([f({flatten:!0})],Truncated.prototype,"slottedContent",2),s([c({slot:"overflow",flatten:!0})],Truncated.prototype,"slottedOverflow",2);
+//# sourceMappingURL=Truncated.js.map

package/src/Truncated.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["Truncated.ts"],
+  "sourcesContent": ["/*\nCopyright 2021 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport type { Overlay, Placement } from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport {\n    property,\n    query,\n    queryAssignedElements,\n    queryAssignedNodes,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport styles from './truncated.css.js';\n\n/**\n * @element sp-truncated\n */\nexport class Truncated extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    /**\n     * @type {\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"}\n     */\n    @property()\n    placement: Placement = 'top-start';\n\n    /*\n     * @type {String}\n     * @attr success-message\n     * @description The message to display when the text is copied to the clipboard after clicking on the truncated text\n     */\n    @property({ type: String, attribute: 'success-message' })\n    successMessage = 'Copied to clipboard';\n\n    @state()\n    hasCopied = false;\n\n    @state()\n    private fullText = '';\n\n    @state()\n    private overflowing = false;\n\n    @query('#content')\n    private content!: HTMLElement;\n\n    @query('#overlay')\n    private overlayEl?: Overlay;\n\n    @queryAssignedNodes({ flatten: true })\n    private slottedContent!: Node[];\n\n    // elements instead of nodes because, according to spec,\n    // flattened assignedNodes will return a slot's *children* if there are no assigned nodes.\n    // \u00AF\\_(\u30C4)_/\u00AF\n    @queryAssignedElements({ slot: 'overflow', flatten: true })\n    private slottedOverflow!: HTMLElement[];\n\n    get hasCustomOverflow(): boolean {\n        return this.slottedOverflow.length > 0;\n    }\n\n    private resizeObserver = new ResizeObserver(() => {\n        this.measureOverflow();\n    });\n\n    private mutationObserver = new MutationObserver(() => {\n        this.copyText();\n    });\n\n    override render(): TemplateResult {\n        /* eslint-disable lit-a11y/click-events-have-key-events */\n        return html`\n            <span id=\"content\" @click=${this.handleClick}>\n                <slot></slot>\n            </span>\n            ${this.renderTooltip()}\n        `;\n        /* eslint-enable lit-a11y/click-events-have-key-events */\n    }\n\n    private renderTooltip(): TemplateResult | undefined {\n        if (!this.overflowing) {\n            return html`\n                <slot\n                    name=\"overflow\"\n                    style=\"display: none\"\n                    @slotchange=${this.handleOverflowSlotchange}\n                ></slot>\n            `;\n        }\n        return html`\n            <sp-overlay\n                id=\"overlay\"\n                .triggerElement=${this as HTMLElement}\n                .triggerInteraction=${'hover'}\n                type=\"hint\"\n                placement=${this.placement}\n            >\n                <sp-tooltip name=\"tooltip\">\n                    ${!this.hasCopied\n                        ? html`\n                              <slot\n                                  name=\"overflow\"\n                                  @slotchange=${this.handleOverflowSlotchange}\n                              >\n                                  ${this.fullText}\n                              </slot>\n                          `\n                        : this.successMessage}\n                </sp-tooltip>\n            </sp-overlay>\n        `;\n    }\n\n    protected override firstUpdated(\n        _changedProperties: PropertyValues<this>\n    ): void {\n        this.resizeObserver.observe(this);\n        this.resizeObserver.observe(this.content);\n        this.copyText();\n        this.measureOverflow();\n    }\n\n    protected override updated(changedProperties: PropertyValues<this>): void {\n        super.updated(changedProperties);\n        if (\n            changedProperties.has('hasCopied') &&\n            this.hasCopied &&\n            this.overlayEl\n        ) {\n            // we know overlayEl exists because it couldn't copy the text otherwise\n            this.overlayEl.open = true;\n        }\n    }\n\n    private handleOverflowSlotchange(): void {\n        this.mutationObserver.disconnect();\n        if (!this.hasCustomOverflow) {\n            /* c8 ignore next 5 */\n            this.mutationObserver.observe(this.content, {\n                subtree: true,\n                childList: true,\n                characterData: true,\n            });\n        }\n    }\n\n    private handleClick(): void {\n        if (!this.overflowing) return;\n\n        const textToCopy = this.slottedContent\n            .map((node) => node.textContent ?? '')\n            .join('')\n            .trim();\n        navigator.clipboard.writeText(textToCopy);\n        this.hasCopied = true;\n        /* c8 ignore next 3 */\n        setTimeout(() => {\n            this.hasCopied = false;\n        }, 6000);\n    }\n\n    private measureOverflow(): void {\n        // Add 1 because Safari sometimes rounds by 1px, breaking the calculation otherwise\n        this.overflowing = this.content.offsetWidth > this.clientWidth + 1;\n    }\n\n    // Copies just the textContent of slotted nodes into the tooltip to avoid duplicating the user's DOM\n    private copyText(): void {\n        if (this.hasCustomOverflow) return;\n        this.fullText = this.slottedContent\n            .map((node) => node.textContent ?? '')\n            .join('');\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["html", "SpectrumElement", "property", "query", "queryAssignedElements", "queryAssignedNodes", "state", "styles", "_changedProperties", "changedProperties", "textToCopy", "node", "_a", "__decorateClass"]
+}

package/src/index.d.ts

@@ -0,0 +1 @@
+export * from './Truncated.js';

package/src/index.dev.js

@@ -0,0 +1,3 @@
+"use strict";
+export * from "./Truncated.dev.js";
+//# sourceMappingURL=index.dev.js.map

package/src/index.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["index.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nexport * from './Truncated.dev.js'\n"],
+  "mappings": ";AAWA,cAAc;",
+  "names": []
+}

package/src/index.js

@@ -0,0 +1,2 @@
+"use strict";export*from"./Truncated.js";
+//# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["index.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nexport * from './Truncated.js';\n"],
+  "mappings": "aAWA,WAAc",
+  "names": []
+}

package/src/truncated.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("@spectrum-web-components/base").CSSResult;
+export default styles;

package/src/truncated.css.dev.js

@@ -0,0 +1,7 @@
+"use strict";
+import { css } from "@spectrum-web-components/base";
+const styles = css`
+    :host{min-width:0;max-width:100%;white-space:nowrap;text-overflow:ellipsis;display:inline-block;overflow:hidden}
+`;
+export default styles;
+//# sourceMappingURL=truncated.css.dev.js.map

package/src/truncated.css.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["truncated.css.ts"],
+  "sourcesContent": ["/*\nCopyright 2025 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{min-width:0;max-width:100%;white-space:nowrap;text-overflow:ellipsis;display:inline-block;overflow:hidden}\n`;\nexport default styles;"],
+  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
+  "names": []
+}

package/src/truncated.css.js

@@ -0,0 +1,4 @@
+"use strict";import{css as e}from"@spectrum-web-components/base";const i=e`
+    :host{min-width:0;max-width:100%;white-space:nowrap;text-overflow:ellipsis;display:inline-block;overflow:hidden}
+`;export default i;
+//# sourceMappingURL=truncated.css.js.map

package/src/truncated.css.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["truncated.css.ts"],
+  "sourcesContent": ["/*\nCopyright 2025 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n    :host{min-width:0;max-width:100%;white-space:nowrap;text-overflow:ellipsis;display:inline-block;overflow:hidden}\n`;\nexport default styles;"],
+  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
+  "names": ["css", "styles"]
+}

package/stories/truncated.stories.js

@@ -0,0 +1,40 @@
+"use strict";
+import { html } from "@spectrum-web-components/base";
+import "../sp-truncated.js";
+const Dog = "data:image/jpeg;base64,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";
+export default {
+  title: "Truncated",
+  component: "sp-truncated"
+};
+export const Default = () => {
+  return html`
+        <p
+            style="width: 200px; color: #000; border: solid 1px #ccc; overflow: hidden; resize: both;"
+        >
+            <sp-truncated>
+                This is a
+                <strong>very long</strong>
+                🦋 sentence that 🦋 should be truncated
+            </sp-truncated>
+            <sp-truncated>
+                ThisIsAVeryLongWordThatShouldBeTruncated
+            </sp-truncated>
+            <sp-truncated>
+                We can even
+                <img src=${Dog} alt="kitten" />
+                truncate around a picture
+            </sp-truncated>
+            <sp-truncated>
+                Custom overflow content can also be provided for the tooltip
+                <span slot="overflow">
+                    <span style="font-size: 24px;">Like this!</span>
+                </span>
+            </sp-truncated>
+            <sp-truncated placement="right">
+                Alternative placements can be specified
+            </sp-truncated>
+            <sp-truncated>Should have no tooltip</sp-truncated>
+        </p>
+    `;
+};
+//# sourceMappingURL=truncated.stories.js.map

package/stories/truncated.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["truncated.stories.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport '../sp-truncated.js';\n\nconst Dog =\n    'data:image/jpeg;base64,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';\n\nexport default {\n    title: 'Truncated',\n    component: 'sp-truncated',\n};\n\nexport const Default = (): TemplateResult => {\n    return html`\n        <p\n            style=\"width: 200px; color: #000; border: solid 1px #ccc; overflow: hidden; resize: both;\"\n        >\n            <sp-truncated>\n                This is a\n                <strong>very long</strong>\n                \uD83E\uDD8B sentence that \uD83E\uDD8B should be truncated\n            </sp-truncated>\n            <sp-truncated>\n                ThisIsAVeryLongWordThatShouldBeTruncated\n            </sp-truncated>\n            <sp-truncated>\n                We can even\n                <img src=${Dog} alt=\"kitten\" />\n                truncate around a picture\n            </sp-truncated>\n            <sp-truncated>\n                Custom overflow content can also be provided for the tooltip\n                <span slot=\"overflow\">\n                    <span style=\"font-size: 24px;\">Like this!</span>\n                </span>\n            </sp-truncated>\n            <sp-truncated placement=\"right\">\n                Alternative placements can be specified\n            </sp-truncated>\n            <sp-truncated>Should have no tooltip</sp-truncated>\n        </p>\n    `;\n};\n"],
+  "mappings": ";AAYA,SAAS,YAA4B;AACrC,OAAO;AAEP,MAAM,MACF;AAEJ,eAAe;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AACf;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAcgB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe9B;",
+  "names": []
+}

package/test/benchmark/basic-test.js

@@ -0,0 +1,13 @@
+"use strict";
+import "@spectrum-web-components/truncated/sp-truncated.js";
+import { html } from "@spectrum-web-components/base";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
+measureFixtureCreation(html`
+    <p style="width: 200px">
+        <sp-truncated>
+            This is a very long text that will overflow into a tooltip with the
+            help of sp-truncated.
+        </sp-truncated>
+    </p>
+`);
+//# sourceMappingURL=basic-test.js.map

package/test/benchmark/basic-test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["basic-test.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport '@spectrum-web-components/truncated/sp-truncated.js';\nimport { html } from '@spectrum-web-components/base';\nimport { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';\n\nmeasureFixtureCreation(html`\n    <p style=\"width: 200px\">\n        <sp-truncated>\n            This is a very long text that will overflow into a tooltip with the\n            help of sp-truncated.\n        </sp-truncated>\n    </p>\n`);\n"],
+  "mappings": ";AAWA,OAAO;AACP,SAAS,YAAY;AACrB,SAAS,8BAA8B;AAEvC,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAOtB;",
+  "names": []
+}

package/test/truncated.test-vrt.js

@@ -0,0 +1,5 @@
+"use strict";
+import * as stories from "../stories/truncated.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("TruncatedStories", stories);
+//# sourceMappingURL=truncated.test-vrt.js.map

package/test/truncated.test-vrt.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["truncated.test-vrt.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport * as stories from '../stories/truncated.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\nimport type { TestsType } from '../../../test/visual/test.js';\n\nregressVisuals('TruncatedStories', stories as unknown as TestsType);\n"],
+  "mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAG/B,eAAe,oBAAoB,OAA+B;",
+  "names": []
+}

package/test/truncated.test.js

@@ -0,0 +1,82 @@
+"use strict";
+import { expect, fixture, html, oneEvent } from "@open-wc/testing";
+import { sendMouse } from "@web/test-runner-commands";
+import "../sp-truncated.js";
+describe("Truncated", () => {
+  it("loads default truncated accessibly", async () => {
+    const el = await fixture(
+      html`
+                <sp-truncated></sp-truncated>
+            `
+    );
+    await expect(el).to.be.accessible();
+  });
+  it("renders a tooltip when overflowing", async () => {
+    const p = await fixture(html`
+            <p style="width: 20px">
+                <sp-truncated>This will overflow into a tooltip</sp-truncated>
+            </p>
+        `);
+    const el = p.querySelector("sp-truncated");
+    const tooltip = el.shadowRoot.querySelector("sp-tooltip");
+    const rect = el.getBoundingClientRect();
+    await sendMouse({
+      type: "move",
+      position: [Math.round(rect.left + 2), Math.round(rect.top + 2)]
+    });
+    const opened = oneEvent(el, "sp-opened");
+    await opened;
+    expect(tooltip.open).to.be.true;
+  });
+  it("does not render a tooltip when content fits", async () => {
+    const p = await fixture(html`
+            <p style="width: 200px">
+                <sp-truncated>Short</sp-truncated>
+            </p>
+        `);
+    const el = p.querySelector("sp-truncated");
+    const tooltip = el.shadowRoot.querySelector(
+      "sp-tooltip"
+    );
+    const rect = el.getBoundingClientRect();
+    await sendMouse({
+      type: "move",
+      position: [Math.round(rect.left + 2), Math.round(rect.top + 2)]
+    });
+    expect(tooltip).to.be.null;
+  });
+  it("detects whether or not custom overflow is specified for optimization", async () => {
+    const defaultOverflow = await fixture(
+      html`
+                <sp-truncated>This will overflow into a tooltip</sp-truncated>
+            `
+    );
+    const customOverflow = await fixture(
+      html`
+                <sp-truncated>
+                    Default
+                    <span slot="overflow">Custom</span>
+                </sp-truncated>
+            `
+    );
+    expect(defaultOverflow.hasCustomOverflow).to.be.false;
+    expect(customOverflow.hasCustomOverflow).to.be.true;
+  });
+  it("copies the text when clicked", async () => {
+    const text = "This will overflow into a  tooltiptooltiptooltiptooltipmtooltipv tooltip tooltiptooltip";
+    const defaultOverflow = await fixture(
+      html`
+                <p style="width: 200px">
+                    <sp-truncated>${text}</sp-truncated>
+                </p>
+            `
+    );
+    const truncated = defaultOverflow.querySelector("sp-truncated");
+    const content = truncated == null ? void 0 : truncated.shadowRoot.querySelector(
+      "#content"
+    );
+    content.click();
+    expect(truncated == null ? void 0 : truncated.hasCopied).to.be.true;
+  });
+});
+//# sourceMappingURL=truncated.test.js.map

package/test/truncated.test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["truncated.test.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { expect, fixture, html, oneEvent } from '@open-wc/testing';\nimport { Tooltip } from '@spectrum-web-components/tooltip/src/Tooltip.js';\nimport { sendMouse } from '@web/test-runner-commands';\n\nimport { Truncated } from '../src/index.js';\nimport '../sp-truncated.js';\n\ndescribe('Truncated', () => {\n    it('loads default truncated accessibly', async () => {\n        const el = await fixture<Truncated>(\n            html`\n                <sp-truncated></sp-truncated>\n            `\n        );\n\n        await expect(el).to.be.accessible();\n    });\n    it('renders a tooltip when overflowing', async () => {\n        const p = await fixture(html`\n            <p style=\"width: 20px\">\n                <sp-truncated>This will overflow into a tooltip</sp-truncated>\n            </p>\n        `);\n        const el = p.querySelector('sp-truncated') as Truncated;\n        const tooltip = el.shadowRoot!.querySelector('sp-tooltip') as Tooltip;\n        const rect = el.getBoundingClientRect();\n\n        await sendMouse({\n            type: 'move',\n            position: [Math.round(rect.left + 2), Math.round(rect.top + 2)],\n        });\n        const opened = oneEvent(el, 'sp-opened');\n\n        await opened;\n        expect(tooltip.open).to.be.true;\n    });\n    it('does not render a tooltip when content fits', async () => {\n        const p = await fixture(html`\n            <p style=\"width: 200px\">\n                <sp-truncated>Short</sp-truncated>\n            </p>\n        `);\n        const el = p.querySelector('sp-truncated') as Truncated;\n        const tooltip = el.shadowRoot!.querySelector(\n            'sp-tooltip'\n        ) as Tooltip | null;\n        const rect = el.getBoundingClientRect();\n        await sendMouse({\n            type: 'move',\n            position: [Math.round(rect.left + 2), Math.round(rect.top + 2)],\n        });\n\n        expect(tooltip).to.be.null;\n    });\n    it('detects whether or not custom overflow is specified for optimization', async () => {\n        const defaultOverflow = await fixture<Truncated>(\n            html`\n                <sp-truncated>This will overflow into a tooltip</sp-truncated>\n            `\n        );\n        const customOverflow = await fixture<Truncated>(\n            html`\n                <sp-truncated>\n                    Default\n                    <span slot=\"overflow\">Custom</span>\n                </sp-truncated>\n            `\n        );\n\n        expect(defaultOverflow.hasCustomOverflow).to.be.false;\n        expect(customOverflow.hasCustomOverflow).to.be.true;\n    });\n    it('copies the text when clicked', async () => {\n        const text =\n            'This will overflow into a  tooltiptooltiptooltiptooltipmtooltipv tooltip tooltiptooltip';\n\n        const defaultOverflow = await fixture<Truncated>(\n            html`\n                <p style=\"width: 200px\">\n                    <sp-truncated>${text}</sp-truncated>\n                </p>\n            `\n        );\n\n        const truncated = defaultOverflow.querySelector('sp-truncated');\n        const content = truncated?.shadowRoot.querySelector(\n            '#content'\n        ) as Truncated;\n        content.click();\n        expect(truncated?.hasCopied).to.be.true;\n    });\n});\n"],
+  "mappings": ";AAWA,SAAS,QAAQ,SAAS,MAAM,gBAAgB;AAEhD,SAAS,iBAAiB;AAG1B,OAAO;AAEP,SAAS,aAAa,MAAM;AACxB,KAAG,sCAAsC,YAAY;AACjD,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA,IAGJ;AAEA,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AACD,KAAG,sCAAsC,YAAY;AACjD,UAAM,IAAI,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,SAIvB;AACD,UAAM,KAAK,EAAE,cAAc,cAAc;AACzC,UAAM,UAAU,GAAG,WAAY,cAAc,YAAY;AACzD,UAAM,OAAO,GAAG,sBAAsB;AAEtC,UAAM,UAAU;AAAA,MACZ,MAAM;AAAA,MACN,UAAU,CAAC,KAAK,MAAM,KAAK,OAAO,CAAC,GAAG,KAAK,MAAM,KAAK,MAAM,CAAC,CAAC;AAAA,IAClE,CAAC;AACD,UAAM,SAAS,SAAS,IAAI,WAAW;AAEvC,UAAM;AACN,WAAO,QAAQ,IAAI,EAAE,GAAG,GAAG;AAAA,EAC/B,CAAC;AACD,KAAG,+CAA+C,YAAY;AAC1D,UAAM,IAAI,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,SAIvB;AACD,UAAM,KAAK,EAAE,cAAc,cAAc;AACzC,UAAM,UAAU,GAAG,WAAY;AAAA,MAC3B;AAAA,IACJ;AACA,UAAM,OAAO,GAAG,sBAAsB;AACtC,UAAM,UAAU;AAAA,MACZ,MAAM;AAAA,MACN,UAAU,CAAC,KAAK,MAAM,KAAK,OAAO,CAAC,GAAG,KAAK,MAAM,KAAK,MAAM,CAAC,CAAC;AAAA,IAClE,CAAC;AAED,WAAO,OAAO,EAAE,GAAG,GAAG;AAAA,EAC1B,CAAC;AACD,KAAG,wEAAwE,YAAY;AACnF,UAAM,kBAAkB,MAAM;AAAA,MAC1B;AAAA;AAAA;AAAA,IAGJ;AACA,UAAM,iBAAiB,MAAM;AAAA,MACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMJ;AAEA,WAAO,gBAAgB,iBAAiB,EAAE,GAAG,GAAG;AAChD,WAAO,eAAe,iBAAiB,EAAE,GAAG,GAAG;AAAA,EACnD,CAAC;AACD,KAAG,gCAAgC,YAAY;AAC3C,UAAM,OACF;AAEJ,UAAM,kBAAkB,MAAM;AAAA,MAC1B;AAAA;AAAA,oCAEwB,IAAI;AAAA;AAAA;AAAA,IAGhC;AAEA,UAAM,YAAY,gBAAgB,cAAc,cAAc;AAC9D,UAAM,UAAU,uCAAW,WAAW;AAAA,MAClC;AAAA;AAEJ,YAAQ,MAAM;AACd,WAAO,uCAAW,SAAS,EAAE,GAAG,GAAG;AAAA,EACvC,CAAC;AACL,CAAC;",
+  "names": []
+}