le-kit 0.5.2 → 0.5.4

package/dist/components/le-turntable.js.map

@@ -1 +0,0 @@
-{"file":"le-turntable.js","mappings":"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","names":["LeTurntable","__stencil_proxyCustomElement"],"sources":["src/components/le-turntable/le-turntable.css?tag=le-turntable&encapsulation=shadow","src/components/le-turntable/le-turntable.tsx"],"sourcesContent":[":host {\n  display: block;\n  cursor: grab;\n}\n\ndiv.turntable {\n  width: 100%;\n  height: 100%;\n  padding: 1px;\n}\n","import { Component, Element, Prop, Listen, h, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'le-turntable',\n  styleUrl: 'le-turntable.css',\n  shadow: true,\n})\nexport class LeTurntable {\n  // host element\n  @Element() el: HTMLElement;\n\n  // transform origin\n  // gets the same values as transform-origin css property\n  @Prop() center: string = 'center';\n\n  // transform rotate\n  @Prop() value: number = 0;\n\n  @Watch('value')\n  updateValue(newValue) {\n    if (!this.rotating) {\n      this.currentAngle = parseFloat(newValue);\n      this.setAngle(this.currentAngle);\n    }\n  }\n\n  /**\n   * Internal state\n   *\n   * using properties instead of @State decoratorm\n   * because we are only changing styles of the element and don't\n   * need the element to be rerendered\n   */\n\n  // indicates is the element being manually rotated right now\n  rotating = false;\n\n  // coordinates of the transform origin in pixels\n  centerX: number;\n  centerY: number;\n\n  // element page (body?) offset in pixels\n  pageX: number;\n  pageY: number;\n\n  currentAngle: number = 0;\n  // angle at the start of the drag\n  startAngle: number;\n\n  /**\n   * Event listeners\n   */\n  handleMouseDown(evt: MouseEvent) {\n    // set rotating mode on\n    this.rotating = true;\n\n    // get start angle\n    //   getting pageX/Y, because when the element is transformed\n    //   relative values are useless\n    this.startAngle = this.getAngle(evt.pageX, evt.pageY);\n\n    // cancel the event to prevent text selection\n    evt.preventDefault();\n    evt.stopPropagation();\n    return false;\n  }\n\n  /**\n   * Fires when the mouse moves\n   * checks is the element rotating right now and if it is\n   * then calc the current angle and rotate the element\n   *\n   * TODO: attach events only after the dragStart?\n   */\n  @Listen('mousemove', { target: 'window' })\n  handleMouseMove(evt: MouseEvent) {\n    if (this.rotating) {\n      // calc angle update and rotate element\n      this.setAngle(this.currentAngle + (this.getAngle(evt.pageX, evt.pageY) - this.startAngle));\n      return false;\n    }\n  }\n\n  @Listen('mouseup', { target: 'window' })\n  handleMouseUp(evt: MouseEvent) {\n    if (this.rotating) {\n      const angle = this.currentAngle + (this.getAngle(evt.pageX, evt.pageY) - this.startAngle);\n      this.setAngle(angle);\n      this.currentAngle = angle;\n      this.rotating = false;\n      return false;\n    }\n  }\n\n  // on window resize the center should be recalculated\n  @Listen('resize', { target: 'window' })\n  handleWindowResize() {\n    this.getTransformOrigin();\n  }\n\n  /**\n   * Component lifecycles\n   */\n  componentDidLoad() {\n    this.el.style.transformOrigin = this.center;\n    this.currentAngle = this.value;\n\n    this.getTransformOrigin();\n    this.setAngle(this.currentAngle);\n  }\n\n  componentDidUpdate() {\n    this.getTransformOrigin();\n  }\n\n  /**\n   * Calculates the transform origin of the component\n   * and the page offset in pixels\n   *\n   * We'll need these values to calculate the angle of pointer event\n   */\n  getTransformOrigin() {\n    // transform origin\n    [this.centerX, this.centerY] = window\n      .getComputedStyle(this.el, null)\n      .transformOrigin.split(' ')\n      .map(val => Math.round(parseFloat(val)));\n    // page offset\n    let t = null;\n    const scrollContainer = ((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollLeft === 'number' ? t : document.body;\n    const clientRects = this.el.getBoundingClientRect();\n    this.pageX = Math.round(clientRects.left + scrollContainer.scrollLeft);\n    this.pageY = Math.round(clientRects.top + scrollContainer.scrollTop);\n  }\n\n  /**\n   * Calculates current angle\n   *\n   * @param {number} posX  horizontal mouse position\n   * @param {number} posY  vertical mouse position\n   */\n  getAngle(posX: number, posY: number) {\n    const x = posX - this.pageX - this.centerX;\n    const y = posY - this.pageY - this.centerY;\n    const angle = Math.round(((Math.atan2(y, x) * 180) / Math.PI) * 100) / 100;\n    return angle;\n  }\n\n  setAngle(angle) {\n    this.el.style.transform = `rotate(${angle}deg)`;\n  }\n\n  render() {\n    return (\n      <div class=\"turntable\" onMouseDown={this.handleMouseDown.bind(this)}>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utils.js

@@ -1,146 +0,0 @@
-import { g as getMode } from './app.js';
-
-/**
- * Utility functions for le-kit components
- */
-/**
- * Generates a unique ID for component instances
- */
-function generateId(prefix = 'le') {
-    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;
-}
-/**
- * Parses a comma-separated string into an array
- */
-function parseCommaSeparated(value) {
-    if (!value)
-        return [];
-    return value
-        .split(',')
-        .map(s => s.trim())
-        .filter(Boolean);
-}
-/**
- * Checks if a slot has content
- */
-function slotHasContent(el, slotName = '') {
-    const selector = slotName ? `[slot="${slotName}"]` : ':not([slot])';
-    return el.querySelector(selector) !== null;
-}
-/**
- * Sets up a MutationObserver to track mode changes on ancestor elements.
- * Returns a cleanup function to disconnect the observer.
- *
- * If the element or any ancestor has an explicit `mode` attribute, that creates
- * a "mode boundary" - the mode is determined from that point, not from further up.
- * This allows components like le-popover to force default mode for their children.
- *
- * @param el - The component's host element
- * @param callback - Function to call when mode changes, receives the new mode
- * @returns Cleanup function to disconnect the observer
- *
- * @example
- * ```tsx
- * export class MyComponent {
- *   @Element() el: HTMLElement;
- *   @State() adminMode: boolean = false;
- *   private disconnectModeObserver?: () => void;
- *
- *   connectedCallback() {
- *     this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {
- *       this.adminMode = mode === 'admin';
- *     });
- *   }
- *
- *   disconnectedCallback() {
- *     this.disconnectModeObserver?.();
- *   }
- * }
- * ```
- */
-function observeModeChanges(el, callback) {
-    // Call immediately with current mode
-    callback(getMode(el));
-    // Set up observer for mode attribute changes
-    const observer = new MutationObserver(() => {
-        callback(getMode(el));
-    });
-    // Observe the element itself (for mode boundary changes)
-    observer.observe(el, {
-        attributes: true,
-        attributeFilter: ['mode'],
-    });
-    // Observe document root
-    observer.observe(document.documentElement, {
-        attributes: true,
-        attributeFilter: ['mode'],
-    });
-    // Traverse up, crossing shadow boundaries, and observe each element
-    let current = el;
-    while (current) {
-        if (current instanceof Element && current.parentElement) {
-            current = current.parentElement;
-            observer.observe(current, {
-                attributes: true,
-                attributeFilter: ['mode'],
-            });
-            // If this element has an explicit mode, it's a boundary
-            if (current.hasAttribute('mode')) {
-                break;
-            }
-        }
-        else {
-            // Check if we're in a shadow root
-            const root = current.getRootNode();
-            if (root instanceof ShadowRoot) {
-                // Cross the shadow boundary and observe the host
-                current = root.host;
-                observer.observe(current, {
-                    attributes: true,
-                    attributeFilter: ['mode'],
-                });
-                // If the host has an explicit mode, it's a boundary
-                if (current.hasAttribute('mode')) {
-                    break;
-                }
-            }
-            else {
-                break;
-            }
-        }
-    }
-    // Return cleanup function
-    return () => observer.disconnect();
-}
-/**
- * Combines multiple class names into a single string, filtering out falsy values.
- *
- * @param classes - arguments of class names, undefined, arrays, objects with boolean values and nested combinations of these
- * @returns Combined class names string
- */
-function classnames(...classes) {
-    const result = [];
-    classes.forEach(cls => {
-        if (!cls)
-            return;
-        if (typeof cls === 'string') {
-            result.push(cls);
-        }
-        else if (Array.isArray(cls)) {
-            result.push(classnames(...cls));
-        }
-        else if (typeof cls === 'object') {
-            Object.entries(cls).forEach(([key, value]) => {
-                if (value) {
-                    result.push(key);
-                }
-            });
-        }
-    });
-    return result.join(' ');
-}
-
-export { classnames as c, generateId as g, observeModeChanges as o, parseCommaSeparated as p, slotHasContent as s };
-//# sourceMappingURL=utils.js.map
-
-//# sourceMappingURL=utils.js.map

package/dist/components/utils.js.map

@@ -1 +0,0 @@
-{"file":"utils.js","mappings":"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","names":[],"sources":["src/utils/utils.ts"],"sourcesContent":["/**\n * Utility functions for le-kit components\n */\n\nimport { getMode } from '../global/app';\n\n/**\n * Generates a unique ID for component instances\n */\nexport function generateId(prefix: string = 'le'): string {\n  return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n}\n\n/**\n * Parses a comma-separated string into an array\n */\nexport function parseCommaSeparated(value: string | undefined): string[] {\n  if (!value) return [];\n  return value\n    .split(',')\n    .map(s => s.trim())\n    .filter(Boolean);\n}\n\n/**\n * Checks if a slot has content\n */\nexport function slotHasContent(el: HTMLElement, slotName: string = ''): boolean {\n  const selector = slotName ? `[slot=\"${slotName}\"]` : ':not([slot])';\n  return el.querySelector(selector) !== null;\n}\n\n/**\n * Sets up a MutationObserver to track mode changes on ancestor elements.\n * Returns a cleanup function to disconnect the observer.\n * \n * If the element or any ancestor has an explicit `mode` attribute, that creates\n * a \"mode boundary\" - the mode is determined from that point, not from further up.\n * This allows components like le-popover to force default mode for their children.\n * \n * @param el - The component's host element\n * @param callback - Function to call when mode changes, receives the new mode\n * @returns Cleanup function to disconnect the observer\n * \n * @example\n * ```tsx\n * export class MyComponent {\n *   @Element() el: HTMLElement;\n *   @State() adminMode: boolean = false;\n *   private disconnectModeObserver?: () => void;\n * \n *   connectedCallback() {\n *     this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {\n *       this.adminMode = mode === 'admin';\n *     });\n *   }\n * \n *   disconnectedCallback() {\n *     this.disconnectModeObserver?.();\n *   }\n * }\n * ```\n */\nexport function observeModeChanges(\n  el: HTMLElement,\n  callback: (mode: string) => void\n): () => void {\n  // Call immediately with current mode\n  callback(getMode(el));\n\n  // Set up observer for mode attribute changes\n  const observer = new MutationObserver(() => {\n    callback(getMode(el));\n  });\n\n  // Observe the element itself (for mode boundary changes)\n  observer.observe(el, {\n    attributes: true,\n    attributeFilter: ['mode'],\n  });\n\n  // Observe document root\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['mode'],\n  });\n\n  // Traverse up, crossing shadow boundaries, and observe each element\n  let current: Node | null = el;\n  while (current) {\n    if (current instanceof Element && current.parentElement) {\n      current = current.parentElement;\n      observer.observe(current, {\n        attributes: true,\n        attributeFilter: ['mode'],\n      });\n      // If this element has an explicit mode, it's a boundary\n      if ((current as Element).hasAttribute('mode')) {\n        break;\n      }\n    } else {\n      // Check if we're in a shadow root\n      const root = current.getRootNode();\n      if (root instanceof ShadowRoot) {\n        // Cross the shadow boundary and observe the host\n        current = root.host;\n        observer.observe(current, {\n          attributes: true,\n          attributeFilter: ['mode'],\n        });\n        // If the host has an explicit mode, it's a boundary\n        if ((current as Element).hasAttribute('mode')) {\n          break;\n        }\n      } else {\n        break;\n      }\n    }\n  }\n\n  // Return cleanup function\n  return () => observer.disconnect();\n}\n\n/**\n * Combines multiple class names into a single string, filtering out falsy values.\n * \n * @param classes - arguments of class names, undefined, arrays, objects with boolean values and nested combinations of these\n * @returns Combined class names string\n */\nexport function classnames(...classes: any[]): string {\n  const result: string[] = [];\n\n  classes.forEach(cls => {\n    if (!cls) return;\n\n    if (typeof cls === 'string') {\n      result.push(cls);\n    } else if (Array.isArray(cls)) {\n      result.push(classnames(...cls));\n    } else if (typeof cls === 'object') {\n      Object.entries(cls).forEach(([key, value]) => {\n        if (value) {\n          result.push(key);\n        }\n      });\n    }\n  });\n\n  return result.join(' ');\n}\n"],"version":3}

package/dist/docs.d.ts

@@ -1,443 +0,0 @@
-
-/**
- * This is an autogenerated file created by the Stencil compiler.
- * DO NOT MODIFY IT MANUALLY
- */
-interface ComponentCompilerPropertyComplexType {
-  /**
-   * The string of the original type annotation in the Stencil source code
-   */
-  original: string;
-  /**
-   * A 'resolved' type, where e.g. imported types have been resolved and inlined
-   *
-   * For instance, an annotation like `(foo: Foo) => string;` will be
-   * converted to `(foo: { foo: string }) => string;`.
-   */
-  resolved: string;
-  /**
-   * A record of the types which were referenced in the assorted type
-   * annotation in the original source file.
-   */
-  references: ComponentCompilerTypeReferences;
-}
-type ComponentCompilerTypeReferences = Record<string, ComponentCompilerTypeReference>;
-interface ComponentCompilerTypeReference {
-  /**
-   * A type may be defined:
-   * - locally (in the same file as the component that uses it)
-   * - globally
-   * - by importing it into a file (and is defined elsewhere)
-   */
-  location: "local" | "global" | "import";
-  /**
-   * The path to the type reference, if applicable (global types should not need a path associated with them)
-   */
-  path?: string;
-  /**
-   * An ID for this type which is unique within a Stencil project.
-   */
-  id: string;
-}
-interface ComponentCompilerReferencedType {
-  /**
-   * The path to the module where the type is declared.
-   */
-  path: string;
-  /**
-   * The string of the original type annotation in the Stencil source code
-   */
-  declaration: string;
-  /**
-   * An extracted docstring
-   */
-  docstring: string;
-}
-interface ComponentCompilerEventComplexType {
-  original: string;
-  resolved: string;
-  references: ComponentCompilerTypeReferences;
-}
-interface ComponentCompilerMethodComplexType {
-  signature: string;
-  parameters: JsonDocMethodParameter[];
-  references: ComponentCompilerTypeReferences;
-  return: string;
-}
-/**
- * The Type Library holds information about the types which are used in a
- * Stencil project. During compilation, Stencil gathers information about the
- * types which form part of a component's public API, such as properties
- * decorated with `@Prop`, `@Event`, `@Watch`, etc. This type information is
- * then added to the Type Library, where it can be accessed later on for
- * generating documentation.
- *
- * This information is included in the file written by the `docs-json` output
- * target (see {@link JsonDocs.typeLibrary}).
- */
-export type JsonDocsTypeLibrary = Record<string, ComponentCompilerReferencedType>;
-/**
- * A container for JSDoc metadata for a project
- */
-export interface JsonDocs {
-  /**
-   * The metadata for the JSDocs for each component in a Stencil project
-   */
-  components: JsonDocsComponent[];
-  /**
-   * The timestamp at which the metadata was generated, in the format YYYY-MM-DDThh:mm:ss
-   */
-  timestamp: string;
-  compiler: {
-    /**
-     * The name of the compiler that generated the metadata
-     */
-    name: string;
-    /**
-     * The version of the Stencil compiler that generated the metadata
-     */
-    version: string;
-    /**
-     * The version of TypeScript that was used to generate the metadata
-     */
-    typescriptVersion: string;
-  };
-  typeLibrary: JsonDocsTypeLibrary;
-}
-/**
- * Container for JSDoc metadata for a single Stencil component
- */
-export interface JsonDocsComponent {
-  /**
-   * The directory containing the Stencil component, minus the file name.
-   *
-   * @example /workspaces/stencil-project/src/components/my-component
-   */
-  dirPath?: string;
-  /**
-   * The name of the file containing the Stencil component, with no path
-   *
-   * @example my-component.tsx
-   */
-  fileName?: string;
-  /**
-   * The full path of the file containing the Stencil component
-   *
-   * @example /workspaces/stencil-project/src/components/my-component/my-component.tsx
-   */
-  filePath?: string;
-  /**
-   * The path to the component's `readme.md` file, including the filename
-   *
-   * @example /workspaces/stencil-project/src/components/my-component/readme.md
-   */
-  readmePath?: string;
-  /**
-   * The path to the component's `usage` directory
-   *
-   * @example /workspaces/stencil-project/src/components/my-component/usage/
-   */
-  usagesDir?: string;
-  /**
-   * The encapsulation strategy for a component
-   */
-  encapsulation: "shadow" | "scoped" | "none";
-  /**
-   * The tag name for the component, for use in HTML
-   */
-  tag: string;
-  /**
-   * The contents of a component's `readme.md` that are user generated.
-   *
-   * Auto-generated contents are not stored in this reference.
-   */
-  readme: string;
-  /**
-   * The description of a Stencil component, found in the JSDoc that sits above the component's declaration
-   */
-  docs: string;
-  /**
-   * JSDoc tags found in the JSDoc comment written atop a component's declaration
-   */
-  docsTags: JsonDocsTag[];
-  /**
-   * The text from the class-level JSDoc for a Stencil component, if present.
-   */
-  overview?: string;
-  /**
-   * A mapping of usage example file names to their contents for the component.
-   */
-  usage: JsonDocsUsage;
-  /**
-   * Array of metadata for a component's `@Prop`s
-   */
-  props: JsonDocsProp[];
-  /**
-   * Array of metadata for a component's `@Method`s
-   */
-  methods: JsonDocsMethod[];
-  /**
-   * Array of metadata for a component's `@Event`s
-   */
-  events: JsonDocsEvent[];
-  /**
-   * Array of metadata for a component's `@Listen` handlers
-   */
-  listeners: JsonDocsListener[];
-  /**
-   * Array of metadata for a component's CSS styling information
-   */
-  styles: JsonDocsStyle[];
-  /**
-   * Array of component Slot information, generated from `@slot` tags
-   */
-  slots: JsonDocsSlot[];
-  /**
-   * Array of component Parts information, generate from `@part` tags
-   */
-  parts: JsonDocsPart[];
-  /**
-   * Array of metadata describing where the current component is used
-   */
-  dependents: string[];
-  /**
-   * Array of metadata listing the components which are used in current component
-   */
-  dependencies: string[];
-  /**
-   * Describes a tree of components coupling
-   */
-  dependencyGraph: JsonDocsDependencyGraph;
-  /**
-   * A deprecation reason/description found following a `@deprecated` tag
-   */
-  deprecation?: string;
-}
-export interface JsonDocsDependencyGraph {
-  [tagName: string]: string[];
-}
-/**
- * A descriptor for a single JSDoc tag found in a block comment
- */
-export interface JsonDocsTag {
-  /**
-   * The tag name (immediately following the '@')
-   */
-  name: string;
-  /**
-   * The description that immediately follows the tag name
-   */
-  text?: string;
-}
-export interface JsonDocsValue {
-  value?: string;
-  type: string;
-}
-/**
- * A mapping of file names to their contents.
- *
- * This type is meant to be used when reading one or more usage markdown files associated with a component. For the
- * given directory structure:
- * ```
- * src/components/my-component
- * ├── my-component.tsx
- * └── usage
- *     ├── bar.md
- *     └── foo.md
- * ```
- * an instance of this type would include the name of the markdown file, mapped to its contents:
- * ```ts
- * {
- *   'bar': STRING_CONTENTS_OF_BAR.MD
- *   'foo': STRING_CONTENTS_OF_FOO.MD
- * }
- * ```
- */
-export interface JsonDocsUsage {
-  [key: string]: string;
-}
-/**
- * An intermediate representation of a `@Prop` decorated member's JSDoc
- */
-export interface JsonDocsProp {
-  /**
-   * the name of the prop
-   */
-  name: string;
-  complexType?: ComponentCompilerPropertyComplexType;
-  /**
-   * the type of the prop, in terms of the TypeScript type system (as opposed to JavaScript's or HTML's)
-   */
-  type: string;
-  /**
-   * `true` if the prop was configured as "mutable" where it was declared, `false` otherwise
-   */
-  mutable: boolean;
-  /**
-   * The name of the attribute that is exposed to configure a compiled web component
-   */
-  attr?: string;
-  /**
-   * `true` if the prop was configured to "reflect" back to HTML where it (the prop) was declared, `false` otherwise
-   */
-  reflectToAttr: boolean;
-  /**
-   * the JSDoc description text associated with the prop
-   */
-  docs: string;
-  /**
-   * JSDoc tags associated with the prop
-   */
-  docsTags: JsonDocsTag[];
-  /**
-   * The default value of the prop
-   */
-  default?: string;
-  /**
-   * Deprecation text associated with the prop. This is the text that immediately follows a `@deprecated` tag
-   */
-  deprecation?: string;
-  values: JsonDocsValue[];
-  /**
-   * `true` if a component is declared with a '?', `false` otherwise
-   *
-   * @example
-   * ```tsx
-   * @Prop() componentProps?: any;
-   * ```
-   */
-  optional: boolean;
-  /**
-   * `true` if a component is declared with a '!', `false` otherwise
-   *
-   * @example
-   * ```tsx
-   * @Prop() componentProps!: any;
-   * ```
-   */
-  required: boolean;
-  /**
-   * `true` if the prop has a `get()`. `false` otherwise
-   */
-  getter: boolean;
-  /**
-   * `true` if the prop has a `set()`. `false` otherwise
-   */
-  setter: boolean;
-}
-export interface JsonDocsMethod {
-  name: string;
-  docs: string;
-  docsTags: JsonDocsTag[];
-  deprecation?: string;
-  signature: string;
-  returns: JsonDocsMethodReturn;
-  parameters: JsonDocMethodParameter[];
-  complexType: ComponentCompilerMethodComplexType;
-}
-export interface JsonDocsMethodReturn {
-  type: string;
-  docs: string;
-}
-export interface JsonDocMethodParameter {
-  name: string;
-  type: string;
-  docs: string;
-}
-export interface JsonDocsEvent {
-  event: string;
-  bubbles: boolean;
-  cancelable: boolean;
-  composed: boolean;
-  complexType: ComponentCompilerEventComplexType;
-  docs: string;
-  docsTags: JsonDocsTag[];
-  deprecation?: string;
-  detail: string;
-}
-/**
- * Type describing a CSS Style, as described by a JSDoc-style comment
- */
-export interface JsonDocsStyle {
-  /**
-   * The name of the style
-   */
-  name: string;
-  /**
-   * The type/description associated with the style
-   */
-  docs: string;
-  /**
-   * The annotation used in the JSDoc of the style (e.g. `@prop`)
-   */
-  annotation: string;
-  /**
-   * The mode associated with the style
-   */
-  mode: string | undefined;
-}
-export interface JsonDocsListener {
-  event: string;
-  target?: string;
-  capture: boolean;
-  passive: boolean;
-}
-/**
- * A descriptor for a slot
- *
- * Objects of this type are translated from the JSDoc tag, `@slot`
- */
-export interface JsonDocsSlot {
-  /**
-   * The name of the slot. Defaults to an empty string for an unnamed slot.
-   */
-  name: string;
-  /**
-   * A textual description of the slot.
-   */
-  docs: string;
-}
-/**
- * A descriptor of a CSS Shadow Part
- *
- * Objects of this type are translated from the JSDoc tag, `@part`, or the 'part'
- * attribute on a component in TSX
- */
-export interface JsonDocsPart {
-  /**
-   * The name of the Shadow part
-   */
-  name: string;
-  /**
-   * A textual description of the Shadow part.
-   */
-  docs: string;
-}
-/**
- * Represents a parsed block comment in a CSS, Sass, etc. file for a custom property.
- */
-export interface StyleDoc {
-  /**
-   * The name of the CSS property
-   */
-  name: string;
-  /**
-   * The user-defined description of the CSS property
-   */
-  docs: string;
-  /**
-   * The JSDoc-style annotation (e.g. `@prop`) that was used in the block comment to detect the comment.
-   * Used to inform Stencil where the start of a new property's description starts (and where the previous description
-   * ends).
-   */
-  annotation: "prop";
-  /**
-   * The Stencil style-mode that is associated with this property.
-   */
-  mode: string | undefined;
-}
-
-export {};
-
-declare const _default: JsonDocs;
-export default _default;