@aquera/nile-elements 0.1.34-beta-1.0 → 0.1.34-beta-1.2

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.34-beta-1.0",
+  "version": "0.1.34-beta-1.2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-code-editor/extensionSetup.ts

@@ -56,7 +56,8 @@ export interface BasicSetupOptions extends MinimalSetupOptions {
   completionKeymap?: boolean;
   lintKeymap?: boolean;
   tabSize?: number;
-  readonly?: false;
+  readonly?: boolean;
+  enableSearch?: boolean;
 }
 
 export const isValidSetup = (item: any) => {
@@ -88,6 +89,17 @@ export const basicSetup = (options: BasicSetupOptions = {}): Extension[] => {
   isValidSetup(options.crosshairCursor) && extensions.push(crosshairCursor());
   isValidSetup(options.highlightActiveLine) && extensions.push(highlightActiveLine());
   isValidSetup(options.highlightSelectionMatches) && extensions.push(highlightSelectionMatches());
+
+  if(!options.enableSearch){
+  extensions.push(
+    keymap.of([{
+      key: "Mod-f", // Ctrl+F (Cmd+F on Mac)
+      run: () => {
+        return true;
+      }
+    }]))
+  }
+
   if (options.tabSize && typeof options.tabSize === 'number')
     extensions.push(indentUnit.of(' '.repeat(options.tabSize)));
   return extensions.concat([keymap.of(keymaps.flat())]).filter(Boolean);

package/src/nile-code-editor/nile-code-editor.ts

@@ -68,9 +68,11 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: String, reflect: true , attribute: 'error-message' }) errorMessage: string = '';
 
-  @property({ type: Boolean, reflect: true , attribute: 'error' }) error: boolean = false;
+  @property({ type: Boolean, reflect: true , attribute: true }) error: boolean = false;
 
-  @property({ type: Boolean, reflect: true , attribute: 'noborder' }) noborder: boolean = false;
+  @property({ type: Boolean, reflect: true , attribute: true }) enableSearch: boolean = false;
+
+  @property({ type: Boolean, reflect: true , attribute: true }) noborder: boolean = false;
 
   @property({ type: Boolean, reflect: true , attribute: true }) multiline: boolean = false;
 
@@ -262,6 +264,7 @@ export class NileCodeEditor extends NileElement {
         basicSetup({
           highlightActiveLine: false,
           foldGutter: this.enableFoldGutters,
+          enableSearch:this.enableSearch
         }),
         lineNumbersExtension,
         readOnlyExtension,

package/src/nile-progress-bar/nile-progress-bar.css.ts

@@ -15,6 +15,7 @@ export default css`
     display: flex;
     height: 6px;
     justify-content: space-between;
+    display: inline-block;
   }
 
   .nile-progress-bar__progress-bar li {

package/src/nile-tooltip/nile-tooltip-utils.ts

@@ -30,26 +30,46 @@ export function getValidTooltipPosition(
         top = triggerRect.top - tooltipRect.height - distance;
         left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;
         break;
-      case 'top-start':
+      case 'top-start': { 
         top = triggerRect.top - tooltipRect.height - distance;
-        left = triggerCenterX - caretSize + skidding;
-        break;
-      case 'top-end':
-        top = triggerRect.top - tooltipRect.height - distance;
-        left = triggerCenterX - tooltipRect.width + caretSize + 10 + skidding;
-        break;
+          const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
+          left = Math.max(triggerRect.left + skidding, centeredLeft); 
+        break;}
+        case 'top-end': {
+          
+          top = triggerRect.top - tooltipRect.height - distance;
+          
+          
+          const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
+          
+          
+          const maxLeft = triggerRect.right - tooltipRect.width + skidding;
+          
+          
+          left = Math.min(centeredLeft, maxLeft);
+          break;
+        }
+        
       case 'bottom':
         top = triggerRect.bottom + distance;
         left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + skidding;
         break;
-      case 'bottom-start':
-        top = triggerRect.bottom + distance;
-        left = triggerCenterX - caretSize - 10 + skidding;
-        break;
-      case 'bottom-end':
-        top = triggerRect.bottom + distance;
-        left = triggerCenterX - (tooltipRect.width - caretSize) + 10 + skidding;
-        break;
+        case 'bottom-start': {
+          top = triggerRect.bottom + distance;
+          const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
+          left = Math.max(triggerRect.left + skidding, centeredLeft);
+        
+          break;
+        }
+        
+        case 'bottom-end': {
+          top = triggerRect.bottom + distance;
+          const centeredLeft = triggerRect.left + (triggerRect.width / 2) - (tooltipRect.width / 2) + skidding;
+          const maxLeft = triggerRect.right - tooltipRect.width + skidding;
+          left = Math.min(centeredLeft, maxLeft);
+          break;
+        }
+        
       case 'left':
         top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + skidding;
         left = triggerRect.left - tooltipRect.width - distance;
@@ -92,10 +112,38 @@ export function getValidTooltipPosition(
   let candidate = getCandidatePosition(placement);
 
   if (!candidateFits(candidate.top, candidate.left)) {
-    if (!placement.startsWith('bottom')) {
+    if (['top', 'top-start', 'top-end'].includes(originalPlacement)) {
       placement = 'bottom';
+    } else if (['bottom', 'bottom-start', 'bottom-end'].includes(originalPlacement)) {
+      placement = 'top';
+    } else if (['right', 'right-start', 'right-end'].includes(originalPlacement)) {
+      placement = 'left';
+    } else if (['left', 'left-start', 'left-end'].includes(originalPlacement)) {
+      placement = 'right';
+    }
+    candidate = getCandidatePosition(placement);
+    const leftCandidate = getCandidatePosition('left');
+    const bottomCandidate = getCandidatePosition('bottom');
+    const topCandidate = getCandidatePosition('top');
+    if (
+      !candidateFits(leftCandidate.top, leftCandidate.left) &&
+      !candidateFits(bottomCandidate.top, bottomCandidate.left) &&
+      !candidateFits(topCandidate.top, topCandidate.left)
+    ) {
+      placement = 'right';
       candidate = getCandidatePosition(placement);
     }
+    else {
+      const rightCandidate = getCandidatePosition('right');
+      if (
+        !candidateFits(rightCandidate.top, rightCandidate.left) &&
+        !candidateFits(bottomCandidate.top, bottomCandidate.left) &&
+        !candidateFits(topCandidate.top, topCandidate.left)
+      ) {
+        placement = 'left';
+        candidate = getCandidatePosition(placement);
+      }
+    }
   }
 
   if (candidate.left < 0) {
@@ -113,6 +161,8 @@ export function getValidTooltipPosition(
   return { ...candidate, placement };
 }
 
+
+
 export interface CaretPositionInput {
   placement: string;
   tooltipRect: DOMRect;

package/src/nile-tooltip/nile-tooltip.css.ts

@@ -39,13 +39,9 @@ export const styles = css`
       visibility: visible;
       pointer-events: auto;
     }
-    .tooltip__body--large {
-      font-size: var(--nile-tooltip-font-size-lg, 16px);
-      line-height: var(--nile-tooltip-line-height-lg, 1.75);
-    }
     .tooltip-content {
       overflow: auto;
-      max-width: 252px;
+      max-width: 250px;
       max-height: 116px;
     }
     .tooltip-caret {
@@ -60,7 +56,41 @@ export const styles = css`
       display: inline-block;
     }
  
+ 
+:host([open]) .tooltip {
+  visibility: visible;
+  pointer-events: auto;
+  animation: fadeIn 150ms forwards;
+}
+
+ 
+.tooltip.hide {
+  animation: fadeOut 100ms forwards;
+}
 
+ 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+ 
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+}
 
 
 

package/src/nile-tooltip/nile-tooltip.test.ts

@@ -8,7 +8,6 @@ describe('NileTooltip', () => {
     const el = await fixture<NileTooltip>(html`<nile-tooltip content="Hello"><button>Hover me</button></nile-tooltip>`);
     assert.equal(el.content, 'Hello');
     assert.equal(el.placement, 'bottom');
-    assert.equal(el.size, 'small');
     assert.equal(el.disabled, false);
     assert.equal(el.open, false);
   });
@@ -96,15 +95,6 @@ describe('NileTooltip', () => {
     assert.isFalse(el.open);
   });
 
-  it('applies size class correctly', async () => {
-    const el = await fixture<NileTooltip>(html`
-      <nile-tooltip content="Tooltip" size="large">
-        <button>Trigger</button>
-      </nile-tooltip>
-    `);
-    const tooltip = el.shadowRoot!.querySelector('.tooltip')!;
-    assert.isTrue(tooltip.classList.contains('tooltip__body--large'));
-  });
 
   it('emits nile-show and nile-after-show events', async () => {
     const el = await fixture<NileTooltip>(html`

package/src/nile-tooltip/nile-tooltip.ts

@@ -10,17 +10,16 @@ import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './nile-tooltip.css';
 import NileElement from '../internal/nile-element';
 import { isInViewport, getValidTooltipPosition, getCaretPosition } from './nile-tooltip-utils';
+
 /**
- * Nile icon component.
+ * Nile tooltip component.
  *
  * @tag nile-tooltip
  *
  */
-
 @customElement('nile-tooltip')
 export class NileTooltip extends NileElement {
   @property({ type: String }) content = '';
-  @property({ reflect: true }) size: 'small' | 'large' = 'small';
   @property({ type: String })
   placement:
     | 'top'
@@ -42,10 +41,10 @@ export class NileTooltip extends NileElement {
    * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
    * programmatically.
    */
-  @property() trigger = 'hover focus';  
+  @property() trigger = 'hover focus';
   @property({ type: Number }) distance = 8;
   private readonly SHIFT_OFFSET = 16;
-/** The distance in pixels from which to offset the tooltip along its target. */
+  /** The distance in pixels from which to offset the tooltip along its target. */
   @property({ type: Number }) skidding = 0;
   @property({ type: Boolean, reflect: true }) hoist = false;
 
@@ -88,6 +87,14 @@ export class NileTooltip extends NileElement {
     if (!validPlacements.includes(this.originalPlacement)) {
       this.originalPlacement = 'bottom';
     }
+ 
+    if (changedProps.has('open') && this.open) {
+      this.updateComplete.then(() => {
+        requestAnimationFrame(() => {
+          this.updateTooltipPosition();
+        });
+      });
+    }
   }
 
   disconnectedCallback() {
@@ -113,7 +120,8 @@ export class NileTooltip extends NileElement {
     const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
 
-    const { top, left, placement } = getValidTooltipPosition(
+   
+    let { top, left, placement } = getValidTooltipPosition(
       triggerRect,
       tooltipRect,
       this.originalPlacement,
@@ -124,6 +132,33 @@ export class NileTooltip extends NileElement {
       viewportHeight
     );
 
+ 
+    if (this.originalPlacement.startsWith('bottom')) {
+      const availableSpaceBelow = viewportHeight - triggerRect.bottom;
+      if (availableSpaceBelow < tooltipRect.height + this.distance) {
+        let newPlacement: typeof this.originalPlacement = 'top';
+        if (this.originalPlacement === 'bottom-start') {
+          newPlacement = 'top';
+        } else if (this.originalPlacement === 'bottom-end') {
+          newPlacement = 'top';
+        }
+    
+        const newPosition = getValidTooltipPosition(
+          triggerRect,
+          tooltipRect,
+          newPlacement,
+          this.distance,
+          this.skidding,
+          this.caretSize,
+          viewportWidth,
+          viewportHeight
+        );
+        top = newPosition.top;
+        left = newPosition.left;
+        placement = newPosition.placement;
+      }
+    }
+
     this.setAttribute('placement', placement);
     this.tooltip.style.top = `${top}px`;
     this.tooltip.style.left = `${left}px`;
@@ -150,8 +185,10 @@ export class NileTooltip extends NileElement {
       this.emit('nile-show');
       this.open = true;
       this.updateComplete.then(() => {
-        this.updateTooltipPosition();
-        this.emit('nile-after-show');
+        requestAnimationFrame(() => {
+          this.updateTooltipPosition();
+          this.emit('nile-after-show');
+        });
       });
     } else {
       this.open = false;
@@ -169,14 +206,14 @@ export class NileTooltip extends NileElement {
   private handleMouseOver = () => {
     if (this.trigger.includes('hover')) {
       clearTimeout(this.hoverTimeout);
-      this.hoverTimeout = window.setTimeout(() => this.showTooltip(), 150);
+      this.hoverTimeout = window.setTimeout(() => this.showTooltip(), 300);
     }
   };
 
   private handleMouseOut = () => {
     if (this.trigger.includes('hover')) {
       clearTimeout(this.hoverTimeout);
-      this.hoverTimeout = window.setTimeout(() => this.hideTooltip(), 0);
+      this.hoverTimeout = window.setTimeout(() => this.hideTooltip(), 150);
     }
   };
 
@@ -195,6 +232,7 @@ export class NileTooltip extends NileElement {
       this.showTooltip();
     }
   };
+  
 
   private handleBlur = () => {
     if (this.trigger.includes('focus')) {
@@ -205,10 +243,7 @@ export class NileTooltip extends NileElement {
   render() {
     return html`
       <div
-        class=${classMap({
-          tooltip: true,
-          'tooltip__body--large': this.size === 'large',
-        })}
+        class="tooltip"
         id="tooltip"
       >
         <div class="tooltip-content" part="content">
@@ -228,7 +263,7 @@ export class NileTooltip extends NileElement {
         @focusout=${this.handleBlur}
         aria-describedby="tooltip"
       >
-        <slot></slot>
+      <slot></slot>
       </div>
     `;
   }

package/vscode-html-custom-data.json

@@ -818,7 +818,7 @@
     },
     {
       "name": "nile-code-editor",
-      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-focus` {`Event`} - \n\n  * `nile-blur` {`Event`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `error-message` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `enableFoldGutters` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\nProperties:\n\n  * `codeEditor` {`HTMLInputElement`} - \n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `errorMessage` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `enableFoldGutters` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `disableSyntaxHighlighting` {`boolean`} - \n\n  * `customThemeCSS` {`object | null`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `view` - \n\n  * `viewState` - \n\n  * `timeOut` - \n\n  * `lineNumbersComp` - \n\n  * `restrictSingleLineComp` - \n\n  * `readOnlyComp` - \n\n  * `customCompletionComp` - \n\n  * `placeholderComp` - \n\n  * `defaultSyntaxHighlightingComp` - \n\n  * `themeComp` - \n\n  * `customAutocomplete` - Custom autocomplete handler for code editor suggestions\n\n  * `insertBetweenCode` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-focus` {`Event`} - \n\n  * `nile-blur` {`Event`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `error-message` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `enableSearch` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `enableFoldGutters` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\nProperties:\n\n  * `codeEditor` {`HTMLInputElement`} - \n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `errorMessage` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `enableSearch` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `enableFoldGutters` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `disableSyntaxHighlighting` {`boolean`} - \n\n  * `customThemeCSS` {`object | null`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `view` - \n\n  * `viewState` - \n\n  * `timeOut` - \n\n  * `lineNumbersComp` - \n\n  * `restrictSingleLineComp` - \n\n  * `readOnlyComp` - \n\n  * `customCompletionComp` - \n\n  * `placeholderComp` - \n\n  * `defaultSyntaxHighlightingComp` - \n\n  * `themeComp` - \n\n  * `customAutocomplete` - Custom autocomplete handler for code editor suggestions\n\n  * `insertBetweenCode` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "value",
@@ -867,6 +867,11 @@
           "description": "`error` {`boolean`} - \n\nProperty: error\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "enableSearch",
+          "description": "`enableSearch` {`boolean`} - \n\nProperty: enableSearch\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "noborder",
           "description": "`noborder` {`boolean`} - \n\nProperty: noborder\n\nDefault: false",
@@ -3765,24 +3770,12 @@
     },
     {
       "name": "nile-tooltip",
-      "description": "Nile icon component.\n\nAttributes:\n\n  * `content` {`string`} - \n\n  * `size` {`\"small\" | \"large\"`} - \n\n  * `placement` {`\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `open` {`boolean`} - \n\n  * `trigger` {`string`} - Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.\n\n  * `distance` {`number`} - \n\n  * `skidding` {`number`} - The distance in pixels from which to offset the tooltip along its target.\n\n  * `hoist` {`boolean`} - \n\nProperties:\n\n  * `content` {`string`} - \n\n  * `size` {`\"small\" | \"large\"`} - \n\n  * `placement` {`\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `open` {`boolean`} - \n\n  * `trigger` {`string`} - Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.\n\n  * `distance` {`number`} - \n\n  * `SHIFT_OFFSET` {`16`} - \n\n  * `skidding` {`number`} - The distance in pixels from which to offset the tooltip along its target.\n\n  * `hoist` {`boolean`} - \n\n  * `tooltip` {`HTMLElement`} - \n\n  * `triggerContainer` {`HTMLElement`} - \n\n  * `caret` {`HTMLElement`} - \n\n  * `tooltipSlot` {`HTMLSlotElement`} - \n\n  * `hasTooltipSlot` {`boolean`} - \n\n  * `hoverTimeout` {`number`} - \n\n  * `caretSize` {`number`} - \n\n  * `originalPlacement` {`string`} - \n\n  * `updateTooltipPosition` - \n\n  * `showTooltip` - \n\n  * `hideTooltip` - \n\n  * `handleMouseOver` - \n\n  * `handleMouseOut` - \n\n  * `handleClick` - \n\n  * `handleFocus` - \n\n  * `handleBlur` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile tooltip component.\n\nAttributes:\n\n  * `content` {`string`} - \n\n  * `placement` {`\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `open` {`boolean`} - \n\n  * `trigger` {`string`} - Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.\n\n  * `distance` {`number`} - \n\n  * `skidding` {`number`} - The distance in pixels from which to offset the tooltip along its target.\n\n  * `hoist` {`boolean`} - \n\nProperties:\n\n  * `content` {`string`} - \n\n  * `placement` {`\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `open` {`boolean`} - \n\n  * `trigger` {`string`} - Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.\n\n  * `distance` {`number`} - \n\n  * `SHIFT_OFFSET` {`16`} - \n\n  * `skidding` {`number`} - The distance in pixels from which to offset the tooltip along its target.\n\n  * `hoist` {`boolean`} - \n\n  * `tooltip` {`HTMLElement`} - \n\n  * `triggerContainer` {`HTMLElement`} - \n\n  * `caret` {`HTMLElement`} - \n\n  * `tooltipSlot` {`HTMLSlotElement`} - \n\n  * `hasTooltipSlot` {`boolean`} - \n\n  * `hoverTimeout` {`number`} - \n\n  * `caretSize` {`number`} - \n\n  * `originalPlacement` {`string`} - \n\n  * `updateTooltipPosition` - \n\n  * `showTooltip` - \n\n  * `hideTooltip` - \n\n  * `handleMouseOver` - \n\n  * `handleMouseOut` - \n\n  * `handleClick` - \n\n  * `handleFocus` - \n\n  * `handleBlur` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "content",
           "description": "`content` {`string`} - \n\nProperty: content\n\nDefault: "
         },
-        {
-          "name": "size",
-          "description": "`size` {`\"small\" | \"large\"`} - \n\nProperty: size\n\nDefault: small",
-          "values": [
-            {
-              "name": "small"
-            },
-            {
-              "name": "large"
-            }
-          ]
-        },
         {
           "name": "placement",
           "description": "`placement` {`\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"`} - \n\nProperty: placement\n\nDefault: bottom",