@nectary/components 5.33.0 → 5.34.0

package/floating-panel-button/index.js

@@ -0,0 +1,43 @@
+import { isAttrEqual, updateAttribute, getAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import "../button/index.js";
+const templateHTML = '<style>:host{display:flex;flex-shrink:0;height:100%;min-height:40px;color:var(--sinch-comp-floating-panel-color-text,var(--sinch-sys-color-primary-foreground))}sinch-button{height:100%;padding:0;white-space:nowrap;--sinch-button-shape-radius-base:0;--sinch-comp-button-color-subtle-secondary-default-border-initial:var(--sinch-sys-color-basic-transparent);--sinch-comp-button-color-subtle-secondary-disabled-border-initial:var(--sinch-sys-color-basic-transparent);--sinch-comp-button-spacing-padding-m:16px;--sinch-comp-button-color-subtle-secondary-default-text-initial:var(--sinch-comp-floating-panel-color-button-text-initial, var(--sinch-sys-color-primary-foreground));--sinch-comp-button-color-subtle-secondary-default-background-initial:var(--sinch-comp-floating-panel-color-button-background-initial, transparent);--sinch-comp-button-color-subtle-secondary-default-background-hover:var(--sinch-comp-floating-panel-color-button-background-hover);--sinch-comp-button-color-subtle-secondary-default-background-active:var(--sinch-comp-floating-panel-color-button-background-active);--sinch-comp-button-shadow-subtle-hover:none;--sinch-comp-button-shadow-subtle-active:none}sinch-button:focus-visible{--sinch-comp-button-color-subtle-secondary-default-background-initial:var(--sinch-comp-floating-panel-color-button-background-hover);--sinch-comp-button-shadow-subtle-focus:none}</style><sinch-button id="button" type="subtle-secondary"></sinch-button>';
+const template = document.createElement("template");
+template.innerHTML = templateHTML;
+class FloatingPanelButton extends NectaryElement {
+  #$button;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$button = shadowRoot.querySelector("#button");
+  }
+  static get observedAttributes() {
+    return ["text", "aria-label"];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    if (name === "text") {
+      this.#$button.setAttribute("text", newVal ?? "");
+    }
+    if (name === "aria-label") {
+      if (newVal !== null) {
+        this.#$button.setAttribute("aria-label", newVal);
+      } else {
+        this.#$button.removeAttribute("aria-label");
+      }
+    }
+  }
+  set text(value) {
+    updateAttribute(this, "text", value);
+  }
+  get text() {
+    return getAttribute(this, "text");
+  }
+}
+defineCustomElement("sinch-floating-panel-button", FloatingPanelButton);
+export {
+  FloatingPanelButton
+};

package/floating-panel-button/types.d.ts

@@ -0,0 +1,35 @@
+import type { NectaryComponentReact, NectaryComponentReactByType, NectaryComponentVanilla, NectaryComponentVanillaByType } from '../types';
+export type TSinchFloatingPanelButtonProps = {
+    /** The button label text */
+    text?: string;
+    'aria-label'?: string;
+};
+export type TSinchFloatingPanelButtonEvents = Record<string, never>;
+export type TSinchFloatingPanelButtonStyle = Record<string, never>;
+export type TSinchFloatingPanelButton = {
+    props: TSinchFloatingPanelButtonProps;
+    events: TSinchFloatingPanelButtonEvents;
+    style: TSinchFloatingPanelButtonStyle;
+};
+export type TSinchFloatingPanelButtonElement = NectaryComponentVanillaByType<TSinchFloatingPanelButton>;
+export type TSinchFloatingPanelButtonReact = NectaryComponentReactByType<TSinchFloatingPanelButton>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-floating-panel-button': TSinchFloatingPanelButton;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-floating-panel-button': NectaryComponentVanilla<'sinch-floating-panel-button'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-floating-panel-button': NectaryComponentReact<'sinch-floating-panel-button'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-floating-panel-button': NectaryComponentReact<'sinch-floating-panel-button'>;
+        }
+    }
+}

package/floating-panel-button/types.js

@@ -0,0 +1 @@
+

package/floating-panel-icon-button/index.d.ts

@@ -0,0 +1,12 @@
+import { NectaryElement } from '../utils';
+import '../button';
+import '../icon';
+export * from './types';
+export declare class FloatingPanelIconButton extends NectaryElement {
+    #private;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set icon(value: string | null);
+    get icon(): string | null;
+}

package/floating-panel-icon-button/index.js

@@ -0,0 +1,50 @@
+import { isAttrEqual, updateAttribute, getAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import "../button/index.js";
+import "../icon/index.js";
+const templateHTML = '<style>:host{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;box-sizing:border-box;cursor:pointer}sinch-button{display:flex;align-items:center;justify-content:center;width:100%;height:100%;--sinch-button-shape-radius-base:0;--sinch-comp-button-color-subtle-secondary-default-border-initial:var(--sinch-sys-color-basic-transparent);--sinch-comp-button-color-subtle-secondary-disabled-border-initial:var(--sinch-sys-color-basic-transparent);--sinch-comp-button-color-subtle-secondary-default-background-initial:transparent;--sinch-comp-button-color-subtle-secondary-default-icon-initial:var(--sinch-comp-floating-panel-color-text, var(--sinch-sys-color-primary-foreground));--sinch-comp-button-color-subtle-secondary-default-text-initial:var(--sinch-comp-floating-panel-color-text, var(--sinch-sys-color-primary-foreground));--sinch-comp-button-color-subtle-secondary-default-background-hover:var(--sinch-comp-floating-panel-color-button-background-hover);--sinch-comp-button-color-subtle-secondary-default-background-active:var(--sinch-comp-floating-panel-color-button-background-active);--sinch-comp-button-shadow-subtle-hover:none;--sinch-comp-button-shadow-subtle-active:none}sinch-button:focus-visible{--sinch-comp-button-color-subtle-secondary-default-background-initial:var(--sinch-comp-floating-panel-color-button-background-hover);--sinch-comp-button-shadow-subtle-focus:none}:host(.edge-start:active) sinch-button,:host(.edge-start:focus) sinch-button,:host(.edge-start:hover) sinch-button{--sinch-button-shape-radius-top-left:var(--sinch-comp-floating-panel-shape-radius);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-floating-panel-shape-radius)}:host(.edge-end:active) sinch-button,:host(.edge-end:focus) sinch-button,:host(.edge-end:hover) sinch-button{--sinch-button-shape-radius-top-right:var(--sinch-comp-floating-panel-shape-radius);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-floating-panel-shape-radius)}sinch-icon{--sinch-global-color-icon:var(--sinch-comp-floating-panel-color-text, var(--sinch-sys-color-primary-foreground));--sinch-global-size-icon:var(--sinch-comp-floating-panel-size-button-icon)}</style><sinch-button id="button" type="subtle-secondary"><sinch-icon id="icon" icons-version="2" slot="icon"></sinch-icon></sinch-button>';
+const template = document.createElement("template");
+template.innerHTML = templateHTML;
+class FloatingPanelIconButton extends NectaryElement {
+  #$icon;
+  #$button;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$icon = shadowRoot.querySelector("#icon");
+    this.#$button = shadowRoot.querySelector("#button");
+  }
+  static get observedAttributes() {
+    return ["icon", "aria-label"];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    if (name === "icon") {
+      if (newVal !== null) {
+        this.#$icon.setAttribute("name", newVal);
+      } else {
+        this.#$icon.removeAttribute("name");
+      }
+    }
+    if (name === "aria-label") {
+      if (newVal !== null) {
+        this.#$button.setAttribute("aria-label", newVal);
+      } else {
+        this.#$button.removeAttribute("aria-label");
+      }
+    }
+  }
+  set icon(value) {
+    updateAttribute(this, "icon", value);
+  }
+  get icon() {
+    return getAttribute(this, "icon");
+  }
+}
+defineCustomElement("sinch-floating-panel-icon-button", FloatingPanelIconButton);
+export {
+  FloatingPanelIconButton
+};

package/floating-panel-icon-button/types.d.ts

@@ -0,0 +1,35 @@
+import type { NectaryComponentReact, NectaryComponentReactByType, NectaryComponentVanilla, NectaryComponentVanillaByType } from '../types';
+export type TSinchFloatingPanelIconButtonProps = {
+    /** The icon name */
+    icon?: string;
+    'aria-label'?: string;
+};
+export type TSinchFloatingPanelIconButtonEvents = Record<string, never>;
+export type TSinchFloatingPanelIconButtonStyle = Record<string, never>;
+export type TSinchFloatingPanelIconButton = {
+    props: TSinchFloatingPanelIconButtonProps;
+    events: TSinchFloatingPanelIconButtonEvents;
+    style: TSinchFloatingPanelIconButtonStyle;
+};
+export type TSinchFloatingPanelIconButtonElement = NectaryComponentVanillaByType<TSinchFloatingPanelIconButton>;
+export type TSinchFloatingPanelIconButtonReact = NectaryComponentReactByType<TSinchFloatingPanelIconButton>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-floating-panel-icon-button': TSinchFloatingPanelIconButton;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-floating-panel-icon-button': NectaryComponentVanilla<'sinch-floating-panel-icon-button'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-floating-panel-icon-button': NectaryComponentReact<'sinch-floating-panel-icon-button'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-floating-panel-icon-button': NectaryComponentReact<'sinch-floating-panel-icon-button'>;
+        }
+    }
+}

package/floating-panel-icon-button/types.js

@@ -0,0 +1 @@
+

package/icon/index.js

@@ -14,13 +14,39 @@ class Icon extends NectaryElement {
   static get observedAttributes() {
     return ["name", "icons-version"];
   }
+  /* Font class is now set before the text content. Covered by new regression tests.
+  
+    Before:
+    1. textContent = "fa-clone" → Safari renders the text using the default font
+     (Material Icons)
+    2. _matchNameToFont() → switches font-family to Sinch Icons Zero To D via
+    class
+  
+    After:
+    1. _matchNameToFont() → sets the correct font-family class first
+    2. textContent = "fa-clone" → Safari renders the text using the correct font
+     from the start
+  
+    Reasoning:
+    * Safari caches the ligature layout from the first paint. When
+    the text was set in Material Icons (which doesn't have these ligatures),
+    Safari calculated glyph positions for individual characters. When the font
+    then switched to Sinch Icons, Safari reused some of that cached layout
+    instead of fully recalculating — shifting certain glyphs to the right.
+    * _matchNameToFont() reads this.name via getAttribute(this,
+    'name'), which reads the HTML attribute — not textContent. The attribute is
+    already set when the callback fires (that's what triggers the callback), so
+    the method gets the correct name regardless of when textContent is set.
+    */
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case "name": {
-        this.#$icon.textContent = newVal;
-        updateAttribute(this.#$icon, "aria-label", newVal);
-        if (getAttribute(this, "icons-version", "1") !== "1") {
-          this._matchNameToFont();
+        {
+          this.#$icon.textContent = newVal;
+          updateAttribute(this.#$icon, "aria-label", newVal);
+          if (getAttribute(this, "icons-version", "1") !== "1") {
+            this._matchNameToFont();
+          }
         }
         break;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.33.0",
+  "version": "5.34.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@nectary/assets": "3.6.9"
+    "@nectary/assets": "3.6.10"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",
@@ -40,6 +40,6 @@
     "vite": "^7.0.6"
   },
   "peerDependencies": {
-    "@nectary/theme-base": "1.15.1"
+    "@nectary/theme-base": "1.16.0"
   }
 }

package/pop/index.js

@@ -8,7 +8,7 @@ import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { isTargetEqual } from "../utils/event-target.js";
 import { getPlacementContext, toLocalRect } from "../utils/placement.js";
 import { orientationValues, disableOverscroll, enableOverscroll, getAnchorPosition, clampPosition } from "./utils.js";
-const templateHTML = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;transform:translate(var(--sinch-pop-offset-x),var(--sinch-pop-offset-y));margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1;background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}#content{position:relative;z-index:1}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}#focus{display:none;position:absolute;width:0;height:0}</style><slot id="target" name="target" aria-haspopup="dialog" aria-expanded="false"></slot><div id="focus"></div><dialog id="dialog"><div id="target-open"><slot name="target-open"></slot></div><div id="content"><slot name="content"></slot></div></dialog>';
+const templateHTML = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;transform:translate(var(--sinch-pop-offset-x),var(--sinch-pop-offset-y));margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:var(--sinch-comp-pop-z-index,1);background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}#content{position:relative;z-index:var(--sinch-comp-pop-z-index,1)}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}#focus{display:none;position:absolute;width:0;height:0}</style><slot id="target" name="target" aria-haspopup="dialog" aria-expanded="false"></slot><div id="focus"></div><dialog id="dialog"><div id="target-open"><slot name="target-open"></slot></div><div id="content"><slot name="content"></slot></div></dialog>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Pop extends NectaryElement {

package/standalone.d.ts

@@ -27,6 +27,9 @@ import './file-drop/index.js';
 import './file-picker/index.js';
 import './file-status/index.js';
 import './flag/index.js';
+import './floating-panel/index.js';
+import './floating-panel-button/index.js';
+import './floating-panel-icon-button/index.js';
 import './grid-item/index.js';
 import './grid/index.js';
 import './help-tooltip/index.js';

package/standalone.js

@@ -28,6 +28,9 @@ import "./file-drop/index.js";
 import "./file-picker/index.js";
 import "./file-status/index.js";
 import "./flag/index.js";
+import "./floating-panel/index.js";
+import "./floating-panel-button/index.js";
+import "./floating-panel-icon-button/index.js";
 import "./grid-item/index.js";
 import "./grid/index.js";
 import "./help-tooltip/index.js";

package/standalone.ts

@@ -35,6 +35,9 @@ import './file-drop/index.js'
 import './file-picker/index.js'
 import './file-status/index.js'
 import './flag/index.js'
+import './floating-panel/index.js'
+import './floating-panel-button/index.js'
+import './floating-panel-icon-button/index.js'
 import './grid-item/index.js'
 import './grid/index.js'
 import './help-tooltip/index.js'

package/tooltip/index.js

@@ -623,19 +623,19 @@ class Tooltip extends NectaryElement {
     let offsetX = 0;
     let offsetY = 0;
     if (orientation.startsWith("top")) {
-      if (bottomEdge > targetRect.y + OVERLAP_TOLERANCE) {
+      if (bottomEdge > targetRect.y + OVERLAP_TOLERANCE && topEdge < targetBottom) {
         offsetY = targetRect.y - bottomEdge;
       }
     } else if (orientation.startsWith("bottom")) {
-      if (topEdge < targetBottom - OVERLAP_TOLERANCE) {
+      if (topEdge < targetBottom - OVERLAP_TOLERANCE && bottomEdge > targetRect.y) {
         offsetY = targetBottom - topEdge;
       }
     } else if (orientation === "left") {
-      if (rightEdge > targetRect.x + OVERLAP_TOLERANCE) {
+      if (rightEdge > targetRect.x + OVERLAP_TOLERANCE && leftEdge < targetRight) {
         offsetX = targetRect.x - rightEdge;
       }
     } else if (orientation === "right") {
-      if (leftEdge < targetRight - OVERLAP_TOLERANCE) {
+      if (leftEdge < targetRight - OVERLAP_TOLERANCE && rightEdge > targetRect.x) {
         offsetX = targetRight - leftEdge;
       }
     }

package/utils/component-names.d.ts

@@ -1,3 +1,3 @@
-export declare const BASE_COMPONENT_NAMES_LIST: readonly ["accordion-item", "accordion", "action-menu-option", "action-menu", "alert", "avatar", "badge", "button-group-item", "button-group", "button", "card-container", "card-v2-title", "card-v2", "checkbox", "chip", "code-tag", "color-menu-option", "color-menu", "color-swatch", "date-picker", "dialog", "emoji-picker", "emoji", "field", "field-v2", "file-drop", "file-picker", "file-status", "flag", "grid-item", "grid", "help-tooltip", "icon", "inline-alert", "input", "link", "list-item", "list", "pagination", "persistent-overlay", "pop", "popover", "progress-stepper-item", "progress-stepper", "progress", "radio-option", "radio", "rich-text", "rich-textarea", "rich-textarea-chip", "segment-collapse", "segmented-control-option", "segmented-control", "segmented-icon-control-option", "segmented-icon-control", "select-button", "select-menu-option", "select-menu", "sheet", "sheet-title", "skeleton-item", "skeleton", "spinner", "stop-events", "table-body", "table-cell", "table-head-cell", "table-head", "table-row", "table", "tabs-icon-option", "tabs-option", "tabs", "tag", "text", "textarea", "time-picker", "title", "toast-manager", "toast", "toggle", "tooltip"];
-export declare const BASE_COMPONENT_NAMES: Set<"pop" | "button" | "dialog" | "input" | "link" | "progress" | "table" | "textarea" | "title" | "accordion-item" | "accordion" | "action-menu-option" | "action-menu" | "alert" | "avatar" | "badge" | "button-group-item" | "button-group" | "card-container" | "card-v2-title" | "card-v2" | "checkbox" | "chip" | "code-tag" | "color-menu-option" | "color-menu" | "color-swatch" | "date-picker" | "emoji-picker" | "emoji" | "field" | "field-v2" | "file-drop" | "file-picker" | "file-status" | "flag" | "grid-item" | "grid" | "help-tooltip" | "icon" | "inline-alert" | "list-item" | "list" | "pagination" | "persistent-overlay" | "popover" | "progress-stepper-item" | "progress-stepper" | "radio-option" | "radio" | "rich-text" | "rich-textarea" | "rich-textarea-chip" | "segment-collapse" | "segmented-control-option" | "segmented-control" | "segmented-icon-control-option" | "segmented-icon-control" | "select-button" | "select-menu-option" | "select-menu" | "sheet" | "sheet-title" | "skeleton-item" | "skeleton" | "spinner" | "stop-events" | "table-body" | "table-cell" | "table-head-cell" | "table-head" | "table-row" | "tabs-icon-option" | "tabs-option" | "tabs" | "tag" | "text" | "time-picker" | "toast-manager" | "toast" | "toggle" | "tooltip">;
+export declare const BASE_COMPONENT_NAMES_LIST: readonly ["accordion-item", "accordion", "action-menu-option", "action-menu", "alert", "avatar", "badge", "button-group-item", "button-group", "button", "card-container", "card-v2-title", "card-v2", "checkbox", "chip", "code-tag", "color-menu-option", "color-menu", "color-swatch", "date-picker", "dialog", "emoji-picker", "emoji", "field", "field-v2", "file-drop", "file-picker", "file-status", "flag", "floating-panel", "floating-panel-button", "floating-panel-icon-button", "grid-item", "grid", "help-tooltip", "icon", "inline-alert", "input", "link", "list-item", "list", "pagination", "persistent-overlay", "pop", "popover", "progress-stepper-item", "progress-stepper", "progress", "radio-option", "radio", "rich-text", "rich-textarea", "rich-textarea-chip", "segment-collapse", "segmented-control-option", "segmented-control", "segmented-icon-control-option", "segmented-icon-control", "select-button", "select-menu-option", "select-menu", "sheet", "sheet-title", "skeleton-item", "skeleton", "spinner", "stop-events", "table-body", "table-cell", "table-head-cell", "table-head", "table-row", "table", "tabs-icon-option", "tabs-option", "tabs", "tag", "text", "textarea", "time-picker", "title", "toast-manager", "toast", "toggle", "tooltip"];
+export declare const BASE_COMPONENT_NAMES: Set<"pop" | "button" | "dialog" | "input" | "link" | "progress" | "table" | "textarea" | "title" | "accordion-item" | "accordion" | "action-menu-option" | "action-menu" | "alert" | "avatar" | "badge" | "button-group-item" | "button-group" | "card-container" | "card-v2-title" | "card-v2" | "checkbox" | "chip" | "code-tag" | "color-menu-option" | "color-menu" | "color-swatch" | "date-picker" | "emoji-picker" | "emoji" | "field" | "field-v2" | "file-drop" | "file-picker" | "file-status" | "flag" | "floating-panel" | "floating-panel-button" | "floating-panel-icon-button" | "grid-item" | "grid" | "help-tooltip" | "icon" | "inline-alert" | "list-item" | "list" | "pagination" | "persistent-overlay" | "popover" | "progress-stepper-item" | "progress-stepper" | "radio-option" | "radio" | "rich-text" | "rich-textarea" | "rich-textarea-chip" | "segment-collapse" | "segmented-control-option" | "segmented-control" | "segmented-icon-control-option" | "segmented-icon-control" | "select-button" | "select-menu-option" | "select-menu" | "sheet" | "sheet-title" | "skeleton-item" | "skeleton" | "spinner" | "stop-events" | "table-body" | "table-cell" | "table-head-cell" | "table-head" | "table-row" | "tabs-icon-option" | "tabs-option" | "tabs" | "tag" | "text" | "time-picker" | "toast-manager" | "toast" | "toggle" | "tooltip">;
 export type ComponentName = `sinch-${typeof BASE_COMPONENT_NAMES_LIST[number]}`;

package/utils/component-names.js

@@ -28,6 +28,9 @@ const BASE_COMPONENT_NAMES_LIST = [
   "file-picker",
   "file-status",
   "flag",
+  "floating-panel",
+  "floating-panel-button",
+  "floating-panel-icon-button",
   "grid-item",
   "grid",
   "help-tooltip",

package/utils/element.d.ts

@@ -37,6 +37,9 @@ declare const BASE_COMPONENT_NAMES_LIST: readonly [
 	"file-picker",
 	"file-status",
 	"flag",
+	"floating-panel",
+	"floating-panel-button",
+	"floating-panel-icon-button",
 	"grid-item",
 	"grid",
 	"help-tooltip",