@api-client/ui 0.2.4 → 0.2.6

package/build/src/elements/highlight/MarkedHighlight.js

@@ -122,8 +122,8 @@ let MarkedHighlight = (() => {
             const child = nodes.find((node) => node.nodeType === 1 && node.getAttribute('slot') === 'markdown-html');
             return child || this.shadowRoot?.querySelector('#content');
         }
-        updated(cp) {
-            super.updated(cp);
+        willUpdate(cp) {
+            super.willUpdate(cp);
             if (cp.has('markdown') ||
                 cp.has('sanitizer') ||
                 cp.has('sanitize') ||
@@ -140,6 +140,18 @@ let MarkedHighlight = (() => {
                 this.renderMarkdown();
                 return;
             }
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.attachedValue = true;
+            this.processScript();
+            this.renderMarkdown();
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.attachedValue = false;
+        }
+        async processScript() {
             // Use the Markdown from the first `<script>` descendant whose MIME type
             // starts with "text/markdown". Script elements beyond the first are
             // ignored.
@@ -158,15 +170,6 @@ let MarkedHighlight = (() => {
             const observer = new MutationObserver(this.scriptAttributeHandler.bind(this));
             observer.observe(script, { attributes: true });
         }
-        connectedCallback() {
-            super.connectedCallback();
-            this.attachedValue = true;
-            this.renderMarkdown();
-        }
-        disconnectedCallback() {
-            super.disconnectedCallback();
-            this.attachedValue = false;
-        }
         /**
          * Renders `markdown` into this element's DOM.
          *

package/build/src/elements/highlight/MarkedHighlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkedHighlight.js","sourceRoot":"","sources":["../../../../src/elements/highlight/MarkedHighlight.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, TemplateResult, PropertyValues } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport DOMPurify from 'dompurify'\nimport { marked, MarkedOptions } from 'marked'\n// import { PrismHighlighter } from './PrismHighlighter.js';\n\n/**\nElement wrapper for the [marked](https://github.com/chjj/marked) library.\n\n`<marked-highlight>` accepts Markdown source and renders it to a child\nelement with the class `markdown-html`. This child element can be styled\nas you would a normal DOM element. If you do not provide a child element\nwith the `markdown-html` class, the Markdown source will still be rendered,\nbut to a shadow DOM child that cannot be styled.\n\n### Markdown Content\n\nThe Markdown source can be specified several ways:\n\n#### Use the `markdown` attribute to bind markdown\n\n```html\n<marked-highlight markdown=\"`Markdown` is _awesome_!\">\n  <div slot=\"markdown-html\"></div>\n</marked-highlight>\n```\n#### Use `<script type=\"text/markdown\">` element child to inline markdown\n\n```html\n<marked-highlight>\n  <div slot=\"markdown-html\"></div>\n  <script type=\"text/markdown\">\n    Check out my markdown!\n    We can even embed elements without fear of the HTML parser mucking up their\n    textual representation:\n  </script>\n</marked-highlight>\n```\n#### Use `<script type=\"text/markdown\" src=\"URL\">` element child to specify remote markdown\n\n```html\n<marked-highlight>\n  <div slot=\"markdown-html\"></div>\n  <script type=\"text/markdown\" src=\"../guidelines.md\"></script>\n</marked-highlight>\n```\n\nNote that the `<script type=\"text/markdown\">` approach is *static*. Changes to\nthe script content will *not* update the rendered markdown!\n\nThough, you can data bind to the `src` attribute to change the markdown.\n\n```html\n<marked-highlight>\n  <div slot=\"markdown-html\"></div>\n  <script type=\"text/markdown\" src$=\"[[source]]\"></script>\n</marked-highlight>\n<script>\n  ...\n  this.source = '../guidelines.md';\n</script>\n```\n\n### Styling\n\nIf you are using a child with the `markdown-html` class, you can style it\nas you would a regular DOM element:\n\n```css\n[slot=\"markdown-html\"] p {\n  color: red;\n}\n[slot=\"markdown-html\"] td:first-child {\n  padding-left: 24px;\n}\n```\n\n@fires markedrendercomplete - Event dispatched when the element renders the output.\n@fires markedloaded - Event dispatched when the element loads the script from the URL.\n@fires markedloaderror - An event dispatched when an error ocurred when downloading\n                         the script content. The detail has the original error.\n */\nexport default class MarkedHighlight extends LitElement {\n  /**\n   * The markdown source to be rendered by this element.\n   * @attribute\n   */\n  @property({ type: String }) accessor markdown: string | undefined\n\n  /**\n   * Enable GFM line breaks (regular newlines instead of two spaces for\n   * breaks)\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor breaks: boolean | undefined\n\n  /**\n   * Conform to obscure parts of markdown.pl as much as possible. Don't fix\n   * any of the original markdown bugs or poor behavior.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor pedantic: boolean | undefined\n\n  /**\n   * Function used to customize a renderer based on the [API specified in the\n   * Marked\n   * library](https://github.com/chjj/marked#overriding-renderer-methods).\n   * It takes one argument: a marked renderer object, which is mutated by the\n   * function.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\n  @property({ type: Object }) accessor renderer: Function | undefined\n\n  /**\n   * Sanitize the output. Ignore any HTML that has been input.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor sanitize: boolean | undefined\n\n  /**\n   * Function used to customize a sanitize behavior.\n   * It takes one argument: element String without text Contents.\n   *\n   * e.g. `<div>` `<a href=\"/\">` `</p>'.\n   * Note: To enable this function, must set `sanitize` to true.\n   * WARNING: If you are using this option to un-trusted text, you must to\n   * prevent XSS Attacks.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\n  @property({ type: Object }) accessor sanitizer: Function | undefined\n\n  /**\n   * If true, disables the default sanitization of any markdown received by\n   * a request and allows fetched un-sanitized markdown\n   *\n   * e.g. fetching markdown via `src` that has HTML.\n   * Note: this value overrides `sanitize` if a request is made.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor disableRemoteSanitization: boolean | undefined\n\n  /**\n   * @returns A reference to the output element.\n   */\n  get outputElement(): HTMLElement | null {\n    const slot = this.shadowRoot?.querySelector('slot[name=\"markdown-html\"]') as HTMLSlotElement | null\n    if (!slot) {\n      return null\n    }\n    const nodes = slot.assignedNodes()\n    const child = nodes.find(\n      (node) => node.nodeType === 1 && (node as HTMLElement).getAttribute('slot') === 'markdown-html'\n    ) as HTMLElement | undefined\n    return child || (this.shadowRoot?.querySelector('#content') as HTMLElement | null)\n  }\n\n  protected override updated(cp: PropertyValues<this>): void {\n    super.updated(cp)\n    if (\n      cp.has('markdown') ||\n      cp.has('sanitizer') ||\n      cp.has('sanitize') ||\n      cp.has('renderer') ||\n      cp.has('pedantic') ||\n      cp.has('breaks')\n    ) {\n      this.renderMarkdown()\n    }\n  }\n\n  protected markdownElement?: HTMLScriptElement | null\n\n  protected attachedValue = false\n\n  override firstUpdated(): void {\n    if (this.markdown) {\n      this.renderMarkdown()\n      return\n    }\n\n    // Use the Markdown from the first `<script>` descendant whose MIME type\n    // starts with \"text/markdown\". Script elements beyond the first are\n    // ignored.\n    const script = this.querySelector('[type=\"text/markdown\"]') as HTMLScriptElement | null\n    if (!script) {\n      return\n    }\n    this.markdownElement = script\n\n    if (script.src) {\n      this.requestMarkdown(script.src)\n    }\n    const content = script.textContent\n    if (content && content.trim() !== '') {\n      this.markdown = this.unindent(content)\n    }\n\n    const observer = new MutationObserver(this.scriptAttributeHandler.bind(this))\n    observer.observe(script, { attributes: true })\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.attachedValue = true\n    this.renderMarkdown()\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.attachedValue = false\n  }\n\n  /**\n   * Renders `markdown` into this element's DOM.\n   *\n   * This is automatically called whenever the `markdown` property is changed.\n   *\n   * The only case where you should be calling this is if you are providing\n   * markdown via `<script type=\"text/markdown\">` after this element has been\n   * constructed (or updating that markdown).\n   * @event markedrendercomplete\n   */\n  renderMarkdown(): void {\n    if (!this.attachedValue) {\n      return\n    }\n    const node = this.outputElement\n    if (!node) {\n      return\n    }\n\n    if (!this.markdown) {\n      node.innerHTML = ''\n      return\n    }\n    const renderer = new marked.Renderer()\n    if (this.renderer) {\n      this.renderer(renderer)\n    }\n    const data = this.markdown\n    const opts: MarkedOptions = {\n      renderer,\n      breaks: this.breaks,\n      pedantic: this.pedantic,\n      gfm: true,\n    }\n    let out = marked(data, opts) as string\n    if (this.sanitize) {\n      if (this.sanitizer) {\n        out = this.sanitizer(out)\n      } else {\n        const result = DOMPurify.sanitize(out)\n        if (typeof result === 'string') {\n          out = result\n        } else {\n          // @ts-expect-error Sometimes the result is an object!\n          out = result.toString()\n        }\n      }\n    }\n    node.innerHTML = out\n    this.dispatchEvent(new Event('markedrendercomplete'))\n  }\n\n  /**\n   * Un-indents the markdown source that will be rendered.\n   */\n  unindent(text?: string): string {\n    if (!text) {\n      return ''\n    }\n    const lines = text.replace(/\\t/g, '  ').split('\\n')\n    const indent = lines.reduce((prev: number | null, line: string): number | null => {\n      if (/^\\s*$/.test(line)) {\n        return prev // Completely ignore blank lines.\n      }\n      const match = line.match(/^(\\s*)/)\n      if (!match) {\n        return prev\n      }\n\n      const lineIndent = match[0].length\n      if (prev === null) {\n        return lineIndent\n      }\n\n      return lineIndent < prev ? lineIndent : prev\n    }, null)\n\n    if (indent === null) {\n      return text\n    }\n\n    return lines.map((l) => l.substring(indent)).join('\\n')\n  }\n\n  /**\n   * Fired when the XHR finishes loading\n   */\n  protected async requestMarkdown(url: string): Promise<void> {\n    try {\n      const response = await fetch(url, {\n        headers: { accept: 'text/markdown' },\n      })\n      const { status } = response\n      if (status === 0 || (status >= 200 && status < 300)) {\n        this.sanitize = !this.disableRemoteSanitization\n        this.markdown = await response.text()\n        this.dispatchEvent(new Event('markedloaded'))\n      } else {\n        throw new Error('Unable to download the data')\n      }\n    } catch (e) {\n      this.handleError(e as Error)\n    }\n  }\n\n  /**\n   * Fired when an error is received while fetching remote markdown content.\n   */\n  protected handleError(e: Error): void {\n    const evt = new CustomEvent('markedloaderror', {\n      composed: true,\n      bubbles: true,\n      cancelable: true,\n      detail: e,\n    })\n    this.dispatchEvent(evt)\n    if (!evt.defaultPrevented) {\n      this.markdown = 'Failed loading markdown source'\n    }\n  }\n\n  protected scriptAttributeHandler(mutation: MutationRecord[]): void {\n    if (mutation[0].attributeName !== 'src') {\n      return\n    }\n    const elm = this.markdownElement\n    if (elm) {\n      this.requestMarkdown(elm.src)\n    }\n  }\n\n  override render(): TemplateResult {\n    return html`<slot name=\"markdown-html\"><div id=\"content\"></div></slot>`\n  }\n}\n"]}
+{"version":3,"file":"MarkedHighlight.js","sourceRoot":"","sources":["../../../../src/elements/highlight/MarkedHighlight.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, TemplateResult, PropertyValues } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport DOMPurify from 'dompurify'\nimport { marked, MarkedOptions } from 'marked'\n// import { PrismHighlighter } from './PrismHighlighter.js';\n\n/**\nElement wrapper for the [marked](https://github.com/chjj/marked) library.\n\n`<marked-highlight>` accepts Markdown source and renders it to a child\nelement with the class `markdown-html`. This child element can be styled\nas you would a normal DOM element. If you do not provide a child element\nwith the `markdown-html` class, the Markdown source will still be rendered,\nbut to a shadow DOM child that cannot be styled.\n\n### Markdown Content\n\nThe Markdown source can be specified several ways:\n\n#### Use the `markdown` attribute to bind markdown\n\n```html\n<marked-highlight markdown=\"`Markdown` is _awesome_!\">\n  <div slot=\"markdown-html\"></div>\n</marked-highlight>\n```\n#### Use `<script type=\"text/markdown\">` element child to inline markdown\n\n```html\n<marked-highlight>\n  <div slot=\"markdown-html\"></div>\n  <script type=\"text/markdown\">\n    Check out my markdown!\n    We can even embed elements without fear of the HTML parser mucking up their\n    textual representation:\n  </script>\n</marked-highlight>\n```\n#### Use `<script type=\"text/markdown\" src=\"URL\">` element child to specify remote markdown\n\n```html\n<marked-highlight>\n  <div slot=\"markdown-html\"></div>\n  <script type=\"text/markdown\" src=\"../guidelines.md\"></script>\n</marked-highlight>\n```\n\nNote that the `<script type=\"text/markdown\">` approach is *static*. Changes to\nthe script content will *not* update the rendered markdown!\n\nThough, you can data bind to the `src` attribute to change the markdown.\n\n```html\n<marked-highlight>\n  <div slot=\"markdown-html\"></div>\n  <script type=\"text/markdown\" src$=\"[[source]]\"></script>\n</marked-highlight>\n<script>\n  ...\n  this.source = '../guidelines.md';\n</script>\n```\n\n### Styling\n\nIf you are using a child with the `markdown-html` class, you can style it\nas you would a regular DOM element:\n\n```css\n[slot=\"markdown-html\"] p {\n  color: red;\n}\n[slot=\"markdown-html\"] td:first-child {\n  padding-left: 24px;\n}\n```\n\n@fires markedrendercomplete - Event dispatched when the element renders the output.\n@fires markedloaded - Event dispatched when the element loads the script from the URL.\n@fires markedloaderror - An event dispatched when an error ocurred when downloading\n                         the script content. The detail has the original error.\n */\nexport default class MarkedHighlight extends LitElement {\n  /**\n   * The markdown source to be rendered by this element.\n   * @attribute\n   */\n  @property({ type: String }) accessor markdown: string | undefined\n\n  /**\n   * Enable GFM line breaks (regular newlines instead of two spaces for\n   * breaks)\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor breaks: boolean | undefined\n\n  /**\n   * Conform to obscure parts of markdown.pl as much as possible. Don't fix\n   * any of the original markdown bugs or poor behavior.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor pedantic: boolean | undefined\n\n  /**\n   * Function used to customize a renderer based on the [API specified in the\n   * Marked\n   * library](https://github.com/chjj/marked#overriding-renderer-methods).\n   * It takes one argument: a marked renderer object, which is mutated by the\n   * function.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\n  @property({ type: Object }) accessor renderer: Function | undefined\n\n  /**\n   * Sanitize the output. Ignore any HTML that has been input.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor sanitize: boolean | undefined\n\n  /**\n   * Function used to customize a sanitize behavior.\n   * It takes one argument: element String without text Contents.\n   *\n   * e.g. `<div>` `<a href=\"/\">` `</p>'.\n   * Note: To enable this function, must set `sanitize` to true.\n   * WARNING: If you are using this option to un-trusted text, you must to\n   * prevent XSS Attacks.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\n  @property({ type: Object }) accessor sanitizer: Function | undefined\n\n  /**\n   * If true, disables the default sanitization of any markdown received by\n   * a request and allows fetched un-sanitized markdown\n   *\n   * e.g. fetching markdown via `src` that has HTML.\n   * Note: this value overrides `sanitize` if a request is made.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor disableRemoteSanitization: boolean | undefined\n\n  /**\n   * @returns A reference to the output element.\n   */\n  get outputElement(): HTMLElement | null {\n    const slot = this.shadowRoot?.querySelector('slot[name=\"markdown-html\"]') as HTMLSlotElement | null\n    if (!slot) {\n      return null\n    }\n    const nodes = slot.assignedNodes()\n    const child = nodes.find(\n      (node) => node.nodeType === 1 && (node as HTMLElement).getAttribute('slot') === 'markdown-html'\n    ) as HTMLElement | undefined\n    return child || (this.shadowRoot?.querySelector('#content') as HTMLElement | null)\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    super.willUpdate(cp)\n    if (\n      cp.has('markdown') ||\n      cp.has('sanitizer') ||\n      cp.has('sanitize') ||\n      cp.has('renderer') ||\n      cp.has('pedantic') ||\n      cp.has('breaks')\n    ) {\n      this.renderMarkdown()\n    }\n  }\n\n  protected markdownElement?: HTMLScriptElement | null\n\n  protected attachedValue = false\n\n  override firstUpdated(): void {\n    if (this.markdown) {\n      this.renderMarkdown()\n      return\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.attachedValue = true\n    this.processScript()\n    this.renderMarkdown()\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.attachedValue = false\n  }\n\n  protected async processScript(): Promise<void> {\n    // Use the Markdown from the first `<script>` descendant whose MIME type\n    // starts with \"text/markdown\". Script elements beyond the first are\n    // ignored.\n    const script = this.querySelector('[type=\"text/markdown\"]') as HTMLScriptElement | null\n    if (!script) {\n      return\n    }\n    this.markdownElement = script\n\n    if (script.src) {\n      this.requestMarkdown(script.src)\n    }\n    const content = script.textContent\n    if (content && content.trim() !== '') {\n      this.markdown = this.unindent(content)\n    }\n\n    const observer = new MutationObserver(this.scriptAttributeHandler.bind(this))\n    observer.observe(script, { attributes: true })\n  }\n\n  /**\n   * Renders `markdown` into this element's DOM.\n   *\n   * This is automatically called whenever the `markdown` property is changed.\n   *\n   * The only case where you should be calling this is if you are providing\n   * markdown via `<script type=\"text/markdown\">` after this element has been\n   * constructed (or updating that markdown).\n   * @event markedrendercomplete\n   */\n  renderMarkdown(): void {\n    if (!this.attachedValue) {\n      return\n    }\n    const node = this.outputElement\n    if (!node) {\n      return\n    }\n\n    if (!this.markdown) {\n      node.innerHTML = ''\n      return\n    }\n    const renderer = new marked.Renderer()\n    if (this.renderer) {\n      this.renderer(renderer)\n    }\n    const data = this.markdown\n    const opts: MarkedOptions = {\n      renderer,\n      breaks: this.breaks,\n      pedantic: this.pedantic,\n      gfm: true,\n    }\n    let out = marked(data, opts) as string\n    if (this.sanitize) {\n      if (this.sanitizer) {\n        out = this.sanitizer(out)\n      } else {\n        const result = DOMPurify.sanitize(out)\n        if (typeof result === 'string') {\n          out = result\n        } else {\n          // @ts-expect-error Sometimes the result is an object!\n          out = result.toString()\n        }\n      }\n    }\n    node.innerHTML = out\n    this.dispatchEvent(new Event('markedrendercomplete'))\n  }\n\n  /**\n   * Un-indents the markdown source that will be rendered.\n   */\n  unindent(text?: string): string {\n    if (!text) {\n      return ''\n    }\n    const lines = text.replace(/\\t/g, '  ').split('\\n')\n    const indent = lines.reduce((prev: number | null, line: string): number | null => {\n      if (/^\\s*$/.test(line)) {\n        return prev // Completely ignore blank lines.\n      }\n      const match = line.match(/^(\\s*)/)\n      if (!match) {\n        return prev\n      }\n\n      const lineIndent = match[0].length\n      if (prev === null) {\n        return lineIndent\n      }\n\n      return lineIndent < prev ? lineIndent : prev\n    }, null)\n\n    if (indent === null) {\n      return text\n    }\n\n    return lines.map((l) => l.substring(indent)).join('\\n')\n  }\n\n  /**\n   * Fired when the XHR finishes loading\n   */\n  protected async requestMarkdown(url: string): Promise<void> {\n    try {\n      const response = await fetch(url, {\n        headers: { accept: 'text/markdown' },\n      })\n      const { status } = response\n      if (status === 0 || (status >= 200 && status < 300)) {\n        this.sanitize = !this.disableRemoteSanitization\n        this.markdown = await response.text()\n        this.dispatchEvent(new Event('markedloaded'))\n      } else {\n        throw new Error('Unable to download the data')\n      }\n    } catch (e) {\n      this.handleError(e as Error)\n    }\n  }\n\n  /**\n   * Fired when an error is received while fetching remote markdown content.\n   */\n  protected handleError(e: Error): void {\n    const evt = new CustomEvent('markedloaderror', {\n      composed: true,\n      bubbles: true,\n      cancelable: true,\n      detail: e,\n    })\n    this.dispatchEvent(evt)\n    if (!evt.defaultPrevented) {\n      this.markdown = 'Failed loading markdown source'\n    }\n  }\n\n  protected scriptAttributeHandler(mutation: MutationRecord[]): void {\n    if (mutation[0].attributeName !== 'src') {\n      return\n    }\n    const elm = this.markdownElement\n    if (elm) {\n      this.requestMarkdown(elm.src)\n    }\n  }\n\n  override render(): TemplateResult {\n    return html`<slot name=\"markdown-html\"><div id=\"content\"></div></slot>`\n  }\n}\n"]}

package/demo/elements/autocomplete/index.html

@@ -14,6 +14,46 @@
   <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
   <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
   <link href="../../page.css" rel="stylesheet" type="text/css" />
+  <style>
+    .share-input {
+      .input-container {
+        min-height: 3em;
+        border: none;
+        padding: 4px 12px;
+        display: flex;
+        flex-wrap: wrap;
+        box-sizing: border-box;
+        gap: 4px;
+        border-radius: 4px;
+        background-color: var(--md-sys-color-surface-container-lowest);
+
+        outline-color: var(--md-sys-color-primary);
+        outline-style: solid;
+        outline-width: 1px;
+        outline-offset: -1px;
+        transition:
+          outline-width 0.14s ease-in-out,
+          outline-offset 0.14s ease-in-out;
+
+        &:focus-within {
+          outline-width: 2px;
+          outline-offset: -2px;
+        }
+
+        .native-input {
+          flex: 1;
+          outline: none;
+          border: none;
+          background: transparent;
+          color: var(--md-sys-color-on-surface);
+          font-size: 1rem;
+          font-family: var(--md-sys-typescale-body-large-font-family);
+          line-height: var(--md-sys-typescale-body-large-line-height);
+          padding: 0;
+        }
+      }
+    }
+  </style>
 </head>
 
 <body class="demo">

package/demo/elements/autocomplete/index.ts

@@ -15,7 +15,9 @@ class ComponentDemoPage extends DemoPage {
 
   @reactive() accessor fixedValue = ''
   @reactive() accessor dynamicValue = ''
+  @reactive() accessor dynamicCustomValue = ''
   @reactive() accessor users: IUser[] = []
+  @reactive() accessor customUsers: IUser[] = []
 
   userMock = new User()
 
@@ -37,22 +39,33 @@ class ComponentDemoPage extends DemoPage {
   handleDynamicInput(event: InputEvent): void {
     const target = event.target as HTMLInputElement
     this.dynamicValue = target.value
-    this.generateMockUsers(target.value)
+    this.generateMockUsers(target.value, 'users')
   }
 
-  generateMockUsers(startsWith: string): void {
+  generateMockUsers(startsWith: string, prop: 'users' | 'customUsers'): void {
     const timeout = this.userMock.types.number({ min: 100, max: 1000 })
     const results = this.userMock.types.number({ min: 0, max: 30 })
     setTimeout(() => {
-      this.users = Array.from({ length: results }, () => {
+      this[prop] = Array.from({ length: results }, () => {
         const item = this.userMock.user()
         item.name = item.name.startsWith(startsWith) ? item.name : `${startsWith}${item.name}`
         return item
       })
-      console.log('Generated users:', this.users)
+      console.log('Generated users:', this[prop])
     }, timeout)
   }
 
+  handleDynamicCustomInput(event: InputEvent): void {
+    const target = event.target as HTMLInputElement
+    this.dynamicCustomValue = target.value
+    this.generateMockUsers(target.value, 'customUsers')
+  }
+
+  handleDynamicCustomAutocomplete(event: CustomEvent<{ item: HTMLElement }>): void {
+    const item = event.detail.item
+    this.dynamicCustomValue = item.dataset.name || ''
+  }
+
   override contentTemplate(): TemplateResult {
     return html`
       <a href="../">Back</a>
@@ -116,6 +129,41 @@ class ComponentDemoPage extends DemoPage {
           </autocomplete-input>
         </div>
       </section>
+
+      <section class="demo-section">
+        <h2 class="title-large">Custom Input</h2>
+
+        <div class="demo-row">
+          <autocomplete-input @autocomplete="${this.handleDynamicCustomAutocomplete}">
+            <div class="share-input" slot="anchor">
+              <div class="input-container">
+                <input
+                  type="text"
+                  slot="input"
+                  autocomplete="off"
+                  placeholder="Enter name or email"
+                  name="dynamic-custom"
+                  class="native-input"
+                  .value="${live(this.dynamicCustomValue)}"
+                  @input="${this.handleDynamicCustomInput}"
+                />
+              </div>
+            </div>
+            <ui-listbox slot="suggestions"
+              >${this.customUsers.map(
+                (user) =>
+                  html`<ui-list-item
+                    data-name="${user.name}"
+                    data-email="${user.email[0].email}"
+                    data-index="name email"
+                    role="option"
+                    >${user.name}<span slot="supporting-text">${user.email[0].email}</span></ui-list-item
+                  >`
+              )}</ui-listbox
+            >
+          </autocomplete-input>
+        </div>
+      </section>
     `
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",

package/src/elements/autocomplete/internals/autocomplete.ts

@@ -1,5 +1,5 @@
 import { html, LitElement, PropertyValues, TemplateResult } from 'lit'
-import { state } from 'lit/decorators.js'
+import { property, state } from 'lit/decorators.js'
 import type UiListbox from '../../../md/listbox/internals/Listbox.js'
 import type UiListItem from '../../../md/list/internals/ListItem.js'
 import { bound } from '../../../decorators/bound.js'
@@ -24,10 +24,20 @@ import { bound } from '../../../decorators/bound.js'
  *   - If a `ui-list-item` has a `data-index` attribute (e.g., `data-index="name email"`), filtering will search
  *     within the specified `data-*` attributes (e.g., `data-name`, `data-email`).
  * - **Mutation Awareness**: Reacts to changes in slotted suggestions, re-filtering them if necessary.
- * - **Event-Driven**: Notifies the parent application via an `autocomplete` event when a suggestion is selected,
- *   without directly modifying the input's value. This allows the application author to control the input update logic.
- * - **Accessibility**: Designed with accessibility in mind, ensuring keyboard navigability and proper ARIA attribute
- *   management (handled by `ui-listbox`).
+ * - **Event-Driven**: Notifies the application via an `autocomplete` event when a suggestion is selected.
+ *   The component itself does not modify the input's value, giving the application author full control.
+ *
+ * ### Accessibility
+ *
+ * The `autocomplete-input` component is designed with accessibility at its core:
+ * - **Keyboard Navigation**: Full keyboard support for navigating suggestions (ArrowUp, ArrowDown),
+ *   selecting (Enter), and closing (Escape), all while focus remains on the input field.
+ * - **ARIA Attributes**: While the `autocomplete-input` manages ARIA attributes related to the popover's
+ *   state, the slotted `ui-listbox` is responsible for its internal ARIA roles and states
+ *   (e.g., `role="listbox"`, `aria-activedescendant`).
+ * - **Labeling Suggestions**: It is **crucial** for accessibility that the slotted `ui-listbox`
+ *   has an `aria-label` attribute. This provides a descriptive name for the list of suggestions,
+ *   which is announced by screen readers.
  *
  * The component uses CSS anchor positioning to place the suggestions popover relative to the input.
  * Ensure your `ui-listbox` is styled appropriately for popover display (e.g., `popover="manual"`, `position-anchor`).
@@ -37,6 +47,10 @@ import { bound } from '../../../decorators/bound.js'
  *               or behave like one (have a `value` property and dispatch `input`, `focus`, `blur`, and `keydown`
  *               events).
  * @slot suggestions - The `ui-listbox` element containing `ui-list-item` elements as suggestions.
+ * @slot anchor - An optional element that points to element that will be used as the anchor for the popover.
+ *                This is useful if you want to position the suggestions relative to a different element than the input.
+ *                If not provided, the input element will be used as the anchor.
+ * @slot Any additional content that should be rendered inside the component.
  *
  * @fires autocomplete - Dispatched when a suggestion is selected by the user (e.g., via click or Enter key).
  * The `event.detail` object contains:
@@ -51,6 +65,12 @@ import { bound } from '../../../decorators/bound.js'
  *     <ui-list-item data-value="banana">Banana</ui-list-item>
  *     <ui-list-item data-value="cherry">Cherry</ui-list-item>
  *   </ui-listbox>
+ *   <!-- With aria-label for accessibility -->
+ *   <ui-listbox slot="suggestions" aria-label="Fruit suggestions">
+ *     <ui-list-item data-value="apple">Apple</ui-list-item>
+ *     <ui-list-item data-value="banana">Banana</ui-list-item>
+ *     <ui-list-item data-value="cherry">Cherry</ui-list-item>
+ *   </ui-listbox>
  * </autocomplete-input>
  *
  * <script>
@@ -70,7 +90,7 @@ import { bound } from '../../../decorators/bound.js'
  * ```html
  * <autocomplete-input @autocomplete="${this.handleUserSelection}">
  *   <input slot="input" type="text" placeholder="Search users..." />
- *   <ui-listbox slot="suggestions">
+ *   <ui-listbox slot="suggestions" aria-label="User suggestions">
  *     <ui-list-item data-id="1" data-name="Alice Wonderland" data-email="alice@example.com" data-index="name email">
  *       Alice Wonderland
  *       <span slot="supporting-text">alice@example.com</span>
@@ -97,6 +117,10 @@ import { bound } from '../../../decorators/bound.js'
  * ```
  */
 export default class Autocomplete extends LitElement {
+  protected override createRenderRoot(): HTMLElement | DocumentFragment {
+    return this
+  }
+
   /**
    * The MutationObserver instance used to watch for changes in slotted children.
    */
@@ -108,6 +132,20 @@ export default class Autocomplete extends LitElement {
    */
   @state() protected accessor inputId = ''
 
+  /**
+   * The position area for the suggestions popover.
+   * This can be 'bottom' or 'top', depending on available space.
+   * Default is 'bottom'.
+   *
+   * Note, this is set dynamically based on available space
+   * and the position of the input element. This only sets the initial value.
+   *
+   * @attribute
+   * @type {'bottom' | 'top'}
+   * @default 'bottom'
+   */
+  @property() accessor positionArea: 'bottom' | 'top' = 'bottom'
+
   /**
    * The reference to the slotted input element.
    * This should be an `HTMLInputElement` or behave like one.
@@ -130,6 +168,10 @@ export default class Autocomplete extends LitElement {
     super.connectedCallback()
     this.observer = new MutationObserver(this.handleMutations.bind(this))
     this.observer.observe(this, { childList: true })
+    if (!this.id) {
+      this.id = `autocomplete-${Math.random().toString(36).substring(2, 15)}`
+    }
+    this.classList.add(this.id)
   }
 
   override disconnectedCallback(): void {
@@ -151,20 +193,13 @@ export default class Autocomplete extends LitElement {
    */
   async firstSetup(): Promise<void> {
     await this.updateComplete
-    const input = this.shadowRoot?.querySelector('slot[name="input"]') as HTMLSlotElement | null
-    const suggestions = this.shadowRoot?.querySelector('slot[name="suggestions"]') as HTMLSlotElement | null
+    const input = this.querySelector('[slot="input"]') as HTMLElement | null
+    const suggestions = this.querySelector('[slot="suggestions"]') as HTMLElement | null
     if (input) {
-      const elements = input.assignedElements()
-      if (elements.length > 0 && elements[0] instanceof HTMLElement) {
-        this.setupInput(elements[0])
-      }
+      this.setupInput(input)
     }
     if (suggestions) {
-      const elements = suggestions.assignedElements()
-      if (elements.length > 0 && elements[0] instanceof HTMLElement) {
-        // Assuming the slotted element is ui-listbox or compatible
-        this.setupSuggestions(elements[0] as UiListbox)
-      }
+      this.setupSuggestions(suggestions as UiListbox)
     }
   }
 
@@ -239,20 +274,16 @@ export default class Autocomplete extends LitElement {
     } else {
       this.inputId = input.id
     }
+    const anchorElement = this.querySelector('[slot="anchor"]') as HTMLElement | null
     // Ensure CSS anchor positioning can work
-    input.style.setProperty('anchor-name', `--${this.inputId}`)
+    const anchor = anchorElement || input
+    anchor.style.setProperty('anchor-name', `--${this.inputId}`)
 
     this.inputRef = input as HTMLInputElement // Assuming it behaves like an input
     this.inputRef.addEventListener('focus', this.handleInputFocus)
     this.inputRef.addEventListener('input', this.handleInput)
     this.inputRef.addEventListener('keydown', this.handleKeydown as EventListener)
     this.inputRef.addEventListener('blur', this.handleInputBlur)
-
-    // Apply initial filtering if suggestions are already present
-    if (this.suggestionsRef) {
-      this.suggestionsRef.style.setProperty('position-anchor', `--${this.inputId}`)
-      this.filterSuggestions((this.inputRef as HTMLInputElement).value || '')
-    }
   }
 
   /**
@@ -267,10 +298,6 @@ export default class Autocomplete extends LitElement {
     this.suggestionsRef.popover = 'manual'
     this.suggestionsRef.tabIndex = -1 // Prevent direct focus
 
-    if (this.inputId) {
-      this.suggestionsRef.style.setProperty('position-anchor', `--${this.inputId}`)
-    }
-
     this.suggestionsRef.addEventListener('select', this.handleSuggestionSelect as EventListener)
     // The `List` dispatches `itemschange` when the slot changes, so we can listen to it.
     this.suggestionsRef.addEventListener('itemschange', this.handleSuggestionsSlotChange)
@@ -417,9 +444,53 @@ export default class Autocomplete extends LitElement {
    * Opens the suggestions popover if it's not already open and there are visible items.
    */
   protected openSuggestions(): void {
-    if (this.suggestionsRef && !this.suggestionsRef.matches(':popover-open')) {
-      this.suggestionsRef.showPopover()
+    const popover = this.suggestionsRef
+    if (!popover || popover.matches(':popover-open')) {
+      return
+    }
+    // we need to open the popover first to make any measurements
+    popover.showPopover()
+    const anchor = (this.querySelector('[slot="anchor"]') as HTMLElement | null) || this.inputRef
+    if (!anchor) {
+      return
+    }
+    this.positionArea = this.decidePositionArea(popover, anchor)
+  }
+
+  /**
+   * Decides the position area for the popover based on available space.
+   * It checks if there is enough space below or above the anchor element and decides accordingly.
+   *
+   * We need to do this because we set the popover height to `100%`, `-webkit-fill-available`, or `-moz-available`
+   * and it makes the popover to always open at the bottom, even if there is no space. The `position-try-fallbacks`
+   * will not work in this case, because from its perspective there is always enough space, even if that will cause
+   * the popover to have a height of just a few pixels.
+   *
+   * @param popover The popover element to position.
+   * @param anchor The anchor element relative to which the popover will be positioned.
+   * @returns 'top' or 'bottom' based on available space.
+   */
+  protected decidePositionArea(popover: HTMLElement, anchor: HTMLElement): 'top' | 'bottom' {
+    let newArea: 'top' | 'bottom' = 'bottom'
+    // Get bounding rectangles
+    const anchorRect = anchor.getBoundingClientRect()
+    const viewportHeight = window.innerHeight
+
+    const spaceBelow = viewportHeight - anchorRect.bottom
+    const spaceAbove = anchorRect.top
+
+    // Estimate a typical/minimum height the popover might need to be useful
+    const popoverThresholdHeight = popover.scrollHeight || 150
+    if (spaceBelow < popoverThresholdHeight && spaceAbove > spaceBelow && spaceAbove > popoverThresholdHeight) {
+      // Not enough space below, but more (and sufficient) space above
+      newArea = 'top'
+    } else if (spaceBelow < popoverThresholdHeight && spaceAbove > spaceBelow) {
+      // Not enough space below, and space above is more than space below (even if not "sufficient")
+      newArea = 'top'
+    } else {
+      newArea = 'bottom' // Default to bottom if enough space or if top is worse
     }
+    return newArea
   }
 
   /**
@@ -482,9 +553,42 @@ export default class Autocomplete extends LitElement {
   }
 
   protected override render(): TemplateResult {
+    const { id, positionArea, inputId } = this
+    /*
+    position-try-fallbacks:
+              flip-block,
+              flip-inline,
+              flip-block flip-inline;
+    */
     return html`
-      <slot name="input"></slot>
-      <slot name="suggestions"></slot>
+      <style>
+        .${id} {
+          display: inline-block;
+
+          [popover] {
+            border: none;
+            margin: 0;
+
+            box-shadow: var(--md-sys-elevation-1);
+            border-radius: var(--md-sys-shape-corner-medium);
+
+            position-area: ${positionArea};
+            position-anchor: --${inputId};
+
+            overflow: auto;
+            /* We try 100% and then vendor options which are more accurate */
+            height: 100%;
+            height: -webkit-fill-available;
+            height: -moz-available;
+            max-height: max-content;
+            width: anchor-size(width);
+          }
+
+          [popover]:not(:popover-open) {
+            display: none;
+          }
+        }
+      </style>
     `
   }
 }

package/src/elements/highlight/MarkedHighlight.ts

@@ -154,8 +154,8 @@ export default class MarkedHighlight extends LitElement {
     return child || (this.shadowRoot?.querySelector('#content') as HTMLElement | null)
   }
 
-  protected override updated(cp: PropertyValues<this>): void {
-    super.updated(cp)
+  protected override willUpdate(cp: PropertyValues<this>): void {
+    super.willUpdate(cp)
     if (
       cp.has('markdown') ||
       cp.has('sanitizer') ||
@@ -177,7 +177,21 @@ export default class MarkedHighlight extends LitElement {
       this.renderMarkdown()
       return
     }
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback()
+    this.attachedValue = true
+    this.processScript()
+    this.renderMarkdown()
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback()
+    this.attachedValue = false
+  }
 
+  protected async processScript(): Promise<void> {
     // Use the Markdown from the first `<script>` descendant whose MIME type
     // starts with "text/markdown". Script elements beyond the first are
     // ignored.
@@ -199,17 +213,6 @@ export default class MarkedHighlight extends LitElement {
     observer.observe(script, { attributes: true })
   }
 
-  override connectedCallback(): void {
-    super.connectedCallback()
-    this.attachedValue = true
-    this.renderMarkdown()
-  }
-
-  override disconnectedCallback(): void {
-    super.disconnectedCallback()
-    this.attachedValue = false
-  }
-
   /**
    * Renders `markdown` into this element's DOM.
    *