@tylertech/forge-ai 0.15.3-dev.0 → 0.16.0-dev.0

package/dist/ai-steps/ai-steps.mjs

@@ -1,163 +1,4 @@
-import { unsafeCSS, LitElement, html, nothing } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
-import { join } from "lit/directives/join.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { when } from "lit/directives/when.js";
-import { renderInlineMarkdown } from "../utils/markdown.mjs";
-import styles from "./ai-steps.scss.mjs";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _chevronIcon, _rowMarker, _AiStepsComponent_instances, renderInline_fn, summaryLabel_get, toggle_fn, renderNoDetailStep_fn, renderStep_fn, isExpanded_get, steps_get, stepsSummary_get, stepsCountLabel_get;
-const AiStepsComponentTagName = "forge-ai-steps";
-const MAX_DETAIL_LENGTH = 2e3;
-let AiStepsComponent = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _AiStepsComponent_instances);
-    this.steps = [];
-    this.running = false;
-    this._expanded = true;
-    __privateAdd(this, _chevronIcon, html`
-    <svg
-      class="chevron"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      height="20"
-      width="20"
-      fill="currentColor"
-      aria-hidden="true">
-      <path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z" />
-    </svg>
-  `);
-    __privateAdd(this, _rowMarker, html`<span class="row-marker"></span>`);
-  }
-  willUpdate(changedProperties) {
-    if (changedProperties.has("running") && !this.running && changedProperties.get("running") === true) {
-      this._expanded = false;
-    }
-  }
-  render() {
-    if (this.steps.length === 0) {
-      return nothing;
-    }
-    return html`
-      <div class="steps">
-        <div class="steps-count">${__privateGet(this, _AiStepsComponent_instances, stepsCountLabel_get)}</div>
-        ${__privateGet(this, _AiStepsComponent_instances, stepsSummary_get)} ${__privateGet(this, _AiStepsComponent_instances, steps_get)}
-      </div>
-    `;
-  }
-};
-_chevronIcon = /* @__PURE__ */ new WeakMap();
-_rowMarker = /* @__PURE__ */ new WeakMap();
-_AiStepsComponent_instances = /* @__PURE__ */ new WeakSet();
-renderInline_fn = function(value) {
-  return html`${unsafeHTML(renderInlineMarkdown(value))}`;
-};
-summaryLabel_get = function() {
-  const stepLabels = this.steps.map((step) => html`<span>${__privateMethod(this, _AiStepsComponent_instances, renderInline_fn).call(this, step.label)}</span>`);
-  const visibleLabels = stepLabels.slice(0, 2);
-  const remaining = stepLabels.length - visibleLabels.length;
-  return remaining > 0 ? html`${join(visibleLabels, html`, `)} +${remaining} more` : html`${join(visibleLabels, html`, `)}`;
-};
-toggle_fn = function() {
-  this._expanded = !this._expanded;
-};
-renderNoDetailStep_fn = function(step) {
-  return html`
-      <div class="timeline-row" data-status=${step.status ?? "complete"}>
-        <div class="row-header">
-          ${__privateGet(this, _rowMarker)}
-          <span class="row-label">
-            <span class="row-name">${__privateMethod(this, _AiStepsComponent_instances, renderInline_fn).call(this, step.label)}</span>
-          </span>
-        </div>
-      </div>
-    `;
-};
-renderStep_fn = function(step) {
-  const detail = step.detail;
-  if (!detail) {
-    return __privateMethod(this, _AiStepsComponent_instances, renderNoDetailStep_fn).call(this, step);
-  }
-  const truncated = detail.length > MAX_DETAIL_LENGTH ? `${detail.slice(0, MAX_DETAIL_LENGTH)}… (truncated)` : detail;
-  return html`
-      <div class="timeline-row" data-status=${step.status ?? "complete"}>
-        <div class="row-header">
-          ${__privateGet(this, _rowMarker)}
-          <div class="step-card">
-            <span class="step-card-title">${__privateMethod(this, _AiStepsComponent_instances, renderInline_fn).call(this, step.label)}</span>
-            <div class="step-card-body">
-              <div class="step-card-result">${__privateMethod(this, _AiStepsComponent_instances, renderInline_fn).call(this, truncated)}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-};
-isExpanded_get = function() {
-  return this.running || this._expanded;
-};
-steps_get = function() {
-  return html`
-      <div
-        id="timeline-content"
-        class="timeline ${__privateGet(this, _AiStepsComponent_instances, isExpanded_get) ? "expanded" : ""}"
-        aria-hidden=${__privateGet(this, _AiStepsComponent_instances, isExpanded_get) ? "false" : "true"}>
-        <div class="timeline-content">${this.steps.map((step) => __privateMethod(this, _AiStepsComponent_instances, renderStep_fn).call(this, step))}</div>
-      </div>
-    `;
-};
-stepsSummary_get = function() {
-  return when(
-    !this.running,
-    () => html`
-        <button
-          class="summary"
-          type="button"
-          aria-expanded=${this._expanded}
-          aria-controls="timeline-content"
-          @click=${__privateMethod(this, _AiStepsComponent_instances, toggle_fn)}>
-          ${__privateGet(this, _chevronIcon)}
-          <span class="status-text">${__privateGet(this, _AiStepsComponent_instances, summaryLabel_get)}</span>
-          <span class="focus-indicator"></span>
-        </button>
-      `
-  );
-};
-stepsCountLabel_get = function() {
-  const count = this.steps.length;
-  return `${count} step${count === 1 ? "" : "s"}`;
-};
-AiStepsComponent.styles = unsafeCSS(styles);
-__decorateClass([
-  property({ attribute: false })
-], AiStepsComponent.prototype, "steps", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], AiStepsComponent.prototype, "running", 2);
-__decorateClass([
-  state()
-], AiStepsComponent.prototype, "_expanded", 2);
-AiStepsComponent = __decorateClass([
-  customElement(AiStepsComponentTagName)
-], AiStepsComponent);
-export {
-  AiStepsComponent,
-  AiStepsComponentTagName
-};
+//#region src/lib/ai-steps/ai-steps.scss?inline
+var ai_steps_default = "@keyframes fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes forge-focus-indicator-outward-grow {\n  from {\n    outline-width: 0;\n  }\n  to {\n    outline-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-outward-shrink {\n  from {\n    outline-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-inward-grow {\n  from {\n    border-width: 0;\n  }\n  to {\n    border-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-inward-shrink {\n  from {\n    border-width: var(--_focus-indicator-active-width);\n  }\n}\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--forge-spacing-small, 12px);\n}\n\n.summary {\n  display: flex;\n  align-items: center;\n  gap: var(--forge-spacing-xsmall, 8px);\n  padding-block: var(--forge-spacing-xxsmall, 4px);\n  padding-inline: var(--forge-spacing-xsmall, 8px);\n  border: none;\n  background-color: var(--forge-theme-surface-container-minimum, #f5f5f5);\n  border-radius: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n  cursor: pointer;\n  text-align: start;\n  position: relative;\n  outline: none;\n  --_state-layer-display: var(--forge-state-layer-display, flex);\n  --_state-layer-color: var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));\n  --_state-layer-hover-color: var(--forge-state-layer-hover-color, var(--_state-layer-color));\n  --_state-layer-hover-opacity: var(--forge-state-layer-hover-opacity, 0.08);\n  --_state-layer-pressed-color: var(--forge-state-layer-pressed-color, var(--_state-layer-color));\n  --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.12);\n  --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 15ms);\n  --_state-layer-pressed-duration: var(--forge-state-layer-pressed-duration, 105ms);\n  --_state-layer-animation-duration: var(--forge-state-layer-animation-duration, 375ms);\n}\n.summary::before {\n  opacity: 0;\n  position: absolute;\n  backface-visibility: hidden;\n  transform: translateZ(0);\n  background-color: var(--_state-layer-hover-color);\n  inset: 0;\n  transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;\n  --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 100ms);\n  content: \"\";\n  opacity: 0;\n  border-radius: inherit;\n}\n.summary:hover::before {\n  background-color: var(--_state-layer-hover-color);\n  opacity: var(--_state-layer-hover-opacity);\n}\n.summary:active::before {\n  opacity: var(--_state-layer-pressed-opacity);\n  transition-duration: var(--_state-layer-pressed-duration);\n  --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.18);\n}\n\n.status-text {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));\n  font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-body1-font-weight, 400);\n  line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-body1-text-transform, inherit);\n  text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n}\n\n.chevron {\n  flex-shrink: 0;\n  transform: rotate(-90deg);\n  transition: transform var(--forge-animation-duration-short4, 200ms) var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n.summary[aria-expanded=true] .chevron {\n  transform: rotate(0deg);\n}\n\n.focus-indicator {\n  position: absolute;\n  display: none;\n}\n\n:host .summary:focus .focus-indicator {\n  --_focus-indicator-display: var(--forge-focus-indicator-display, flex);\n  --_focus-indicator-width: var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));\n  --_focus-indicator-active-width: var(--forge-focus-indicator-active-width, 6px);\n  --_focus-indicator-color: var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));\n  --_focus-indicator-shape: var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));\n  --_focus-indicator-duration: var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));\n  --_focus-indicator-easing: var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));\n  --_focus-indicator-shape-start-start: var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-start-end: var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-end-end: var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-end-start: var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));\n  --_focus-indicator-outward-offset: var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));\n  --_focus-indicator-inward-offset: var(--forge-focus-indicator-inward-offset, 0px);\n  --_focus-indicator-offset-block: var(--forge-focus-indicator-offset-block, 0);\n  --_focus-indicator-offset-inline: var(--forge-focus-indicator-offset-inline, 0);\n  animation-delay: 0s, calc(var(--_focus-indicator-duration) * 0.25);\n  animation-duration: calc(var(--_focus-indicator-duration) * 0.25), calc(var(--_focus-indicator-duration) * 0.75);\n  animation-timing-function: var(--_focus-indicator-easing);\n  box-sizing: border-box;\n  color: var(--_focus-indicator-color);\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  margin-block: var(--_focus-indicator-offset-block);\n  margin-inline: var(--_focus-indicator-offset-inline);\n  animation-name: forge-focus-indicator-inward-grow, forge-focus-indicator-inward-shrink;\n  border-end-end-radius: calc(var(--_focus-indicator-shape-end-end) - var(--_focus-indicator-inward-offset));\n  border-end-start-radius: calc(var(--_focus-indicator-shape-end-start) - var(--_focus-indicator-inward-offset));\n  border-start-end-radius: calc(var(--_focus-indicator-shape-start-end) - var(--_focus-indicator-inward-offset));\n  border-start-start-radius: calc(var(--_focus-indicator-shape-start-start) - var(--_focus-indicator-inward-offset));\n  border: var(--_focus-indicator-width) solid currentColor;\n  inset: var(--_focus-indicator-inward-offset);\n}\n:host .summary:focus .focus-indicator::before {\n  content: \"\";\n}\n:host .summary:focus .focus-indicator {\n  display: block;\n  --forge-focus-indicator-shape: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n}\n\n.steps {\n  display: flex;\n  flex-direction: column;\n  gap: var(--forge-spacing-xsmall, 8px);\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));\n  font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-body1-font-weight, 400);\n  line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-body1-text-transform, inherit);\n  text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n  font-size: var(--forge-ai-markdown-font-size, 0.875rem);\n  line-height: var(--forge-ai-markdown-line-height, 1.5rem);\n  color: var(--forge-theme-on-surface, #000000);\n  overflow-wrap: break-word;\n}\n.steps h1,\n.steps h2,\n.steps h3,\n.steps h4,\n.steps h5,\n.steps h6 {\n  margin: 1.75rem 0 var(--forge-spacing-small, 12px);\n}\n.steps strong {\n  font-weight: 500;\n}\n.steps a {\n  color: var(--forge-theme-primary, #3f51b5);\n}\n.steps hr {\n  border: none;\n  border-top: 1px solid var(--forge-theme-outline, #e0e0e0);\n}\n.steps code {\n  color: var(--forge-theme-on-surface-container-low, #000000);\n  background-color: var(--forge-theme-surface-container-low, #ebebeb);\n  border-radius: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n  padding: var(--forge-spacing-xxxsmall, 2px) var(--forge-spacing-xxsmall, 4px);\n  font-size: 0.75em;\n}\n.steps pre {\n  border: 1px solid var(--forge-theme-outline, #e0e0e0);\n  border-radius: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n  margin: 0;\n  max-width: 100%;\n  overflow-x: auto;\n}\n.steps pre:focus-visible {\n  outline: 2px solid var(--forge-theme-primary, #3f51b5);\n  outline-offset: 2px;\n}\n.steps pre code {\n  display: block;\n  padding: var(--forge-spacing-xsmall, 8px) var(--forge-spacing-small, 12px);\n  color: var(--forge-theme-on-surface-container-minimum, #000000);\n  background: var(--forge-theme-surface-container-minimum, #f5f5f5);\n  white-space: pre;\n}\n.steps [data-scroll-region=table] {\n  max-width: 100%;\n  overflow-x: auto;\n  border-radius: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n  margin-block: var(--forge-spacing-medium, 16px);\n}\n.steps [data-scroll-region=table]:focus-visible {\n  outline: 2px solid var(--forge-theme-primary, #3f51b5);\n  outline-offset: 2px;\n}\n.steps [data-scroll-region=table] table {\n  margin-block: 0;\n}\n.steps table {\n  width: 100%;\n  border-spacing: 0;\n  background-color: var(--forge-theme-surface, #ffffff);\n  border-radius: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n  overflow: hidden;\n  margin-block: var(--forge-spacing-medium, 16px);\n}\n.steps table thead {\n  color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n  font-weight: bold;\n  text-align: left;\n  font-size: calc(var(--forge-typography-font-size, 1rem) * 0.75);\n  box-sizing: border-box;\n}\n.steps table tr {\n  height: 36px;\n  height: 32px;\n}\n.steps table tr:nth-child(even) {\n  background-color: var(--forge-theme-surface-dim, #fafafa);\n}\n.steps table tr:last-child td {\n  border-bottom: none;\n}\n.steps table th,\n.steps table td {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));\n  font-size: var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.75)));\n  font-weight: var(--forge-typography-label1-font-weight, 400);\n  line-height: var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));\n  letter-spacing: var(--forge-typography-label1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-label1-text-transform, inherit);\n  text-decoration: var(--forge-typography-label1-text-decoration, inherit);\n  padding-block: var(--forge-spacing-xsmall, 8px);\n  padding-inline-start: var(--forge-spacing-xsmall, 8px);\n  padding-inline-end: var(--forge-spacing-medium, 16px);\n  border-bottom-width: 1px;\n  border-bottom-style: solid;\n  border-bottom-color: var(--forge-theme-outline, #e0e0e0);\n}\n.steps table th {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));\n  font-size: var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.8125)));\n  font-weight: var(--forge-typography-label2-font-weight, 400);\n  line-height: var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));\n  letter-spacing: var(--forge-typography-label2-letter-spacing, 0.0096153846em);\n  text-transform: var(--forge-typography-label2-text-transform, inherit);\n  text-decoration: var(--forge-typography-label2-text-decoration, inherit);\n  font-weight: 600;\n}\n.steps > p:has(+ ol),\n.steps > p:has(+ ul) {\n  margin-block-end: var(--forge-spacing-small, 12px);\n}\n.steps > ul {\n  list-style-type: disc;\n  padding-inline-start: 1.6875rem;\n}\n.steps > ol {\n  padding-inline-start: 1.75rem;\n}\n.steps > ol,\n.steps > ul {\n  margin: var(--forge-spacing-xsmall, 8px) 0;\n  margin-block-end: var(--forge-spacing-medium, 16px);\n}\n.steps > :first-child {\n  margin-block-start: 0;\n}\n.steps > p {\n  margin-block-end: var(--forge-spacing-medium, 16px);\n  overflow-wrap: anywhere;\n}\n.steps > p:first-child {\n  margin-block-start: 0;\n}\n.steps > p:last-child {\n  margin-block-end: 0;\n}\n.steps-count {\n  color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n.timeline {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--forge-animation-duration-medium2, 300ms) var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1));\n}\n.timeline.expanded {\n  grid-template-rows: 1fr;\n}\n\n.timeline-content {\n  overflow: hidden;\n  min-height: 0;\n  padding-inline-start: var(--forge-spacing-small, 12px);\n}\n\n.timeline-row {\n  position: relative;\n  padding-inline-start: var(--forge-spacing-large, 24px);\n  padding-block-end: var(--forge-spacing-medium, 16px);\n}\n.timeline-row::before {\n  content: \"\";\n  position: absolute;\n  inset-block-start: calc((var(--forge-spacing-medium-large, 20px) - var(--forge-spacing-xsmall, 8px)) / 2);\n  inset-block-end: calc(-1 * var(--forge-spacing-xsmall, 8px));\n  inset-inline-start: calc((var(--forge-spacing-medium-large, 20px) - 1px) / 2);\n  width: 1px;\n  background-color: var(--forge-theme-outline, #e0e0e0);\n}\n.timeline-row:last-child::before {\n  display: none;\n}\n\n.row-header {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--forge-spacing-small, 12px);\n  width: 100%;\n  min-height: var(--forge-spacing-medium-large, 20px);\n  margin-inline-start: calc(-1 * var(--forge-spacing-large, 24px));\n}\n\n.row-marker {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--forge-spacing-medium-large, 20px);\n  height: var(--forge-spacing-medium-large, 20px);\n  border-radius: calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1));\n}\n.row-marker::before {\n  content: \"\";\n  flex-shrink: 0;\n  width: var(--forge-spacing-xsmall, 8px);\n  height: var(--forge-spacing-xsmall, 8px);\n  border-radius: calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1));\n  background-color: currentColor;\n  position: relative;\n  z-index: 1;\n}\n\n.row-label {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  gap: var(--forge-spacing-xxxsmall, 2px);\n}\n\n.row-name {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));\n  font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-body1-font-weight, 400);\n  line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-body1-text-transform, inherit);\n  text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n  display: flex;\n  align-items: center;\n  gap: var(--forge-spacing-xsmall, 8px);\n  line-height: normal;\n  font-weight: 500;\n  color: var(--forge-theme-text-high, rgba(0, 0, 0, 0.87));\n}\n\n.step-card {\n  width: 100%;\n}\n.step-card-title {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));\n  font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-body1-font-weight, 400);\n  line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-body1-text-transform, inherit);\n  text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n  font-weight: 700;\n}\n.step-card-result {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));\n  font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-body1-font-weight, 400);\n  line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-body1-text-transform, inherit);\n  text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n}\n\n.row-name strong,\n.step-card-title strong {\n  font-weight: 700;\n}";
+//#endregion
+export { ai_steps_default as default };

package/dist/ai-steps/ai-steps2.mjs

@@ -0,0 +1,133 @@
+import { renderInlineMarkdown } from "../utils/markdown.mjs";
+import __decorate from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.mjs";
+import ai_steps_default from "./ai-steps.mjs";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { when } from "lit/directives/when.js";
+import { join } from "lit/directives/join.js";
+//#region src/lib/ai-steps/ai-steps.ts
+var AiStepsComponentTagName = "forge-ai-steps";
+var MAX_DETAIL_LENGTH = 2e3;
+var AiStepsComponent = class AiStepsComponent extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.steps = [];
+		this.running = false;
+		this._expanded = true;
+		this.#chevronIcon = html`
+    <svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="20" width="20" fill="currentColor" aria-hidden="true">
+      <path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z" />
+    </svg>
+  `;
+		this.#rowMarker = html`<span class="row-marker"></span>`;
+	}
+	static {
+		this.styles = unsafeCSS(ai_steps_default);
+	}
+	#chevronIcon;
+	#rowMarker;
+	/**
+	* Agent-authored text as sanitized inline markdown. Inline rather than block so a label stays on
+	* one line instead of gaining a `<p>` wrapper. Shared by the summary row, the timeline labels and
+	* the detail cards so a step reads the same wherever it appears.
+	*
+	* Unclosed syntax is left as literal characters — `renderInlineMarkdown` skips the partial-syntax
+	* repair that `renderMarkdown` applies, so a label caught mid-stream briefly shows its `**` rather
+	* than guessing at an emphasis the agent has not finished writing.
+	*
+	* The summary sits inside a `<button>`, so it renders links as text: a nested link would take the
+	* click and open a tab as well as toggling the timeline.
+	*/
+	#renderInline(value, options) {
+		return html`${unsafeHTML(renderInlineMarkdown(value, options))}`;
+	}
+	get #summaryLabel() {
+		const stepLabels = this.steps.map((step) => html`<span>${this.#renderInline(step.label, { links: false })}</span>`);
+		const visibleLabels = stepLabels.slice(0, 2);
+		const remaining = stepLabels.length - visibleLabels.length;
+		return remaining > 0 ? html`${join(visibleLabels, html`, `)} +${remaining} more` : html`${join(visibleLabels, html`, `)}`;
+	}
+	#toggle() {
+		this._expanded = !this._expanded;
+	}
+	#renderNoDetailStep(step) {
+		return html`
+      <div class="timeline-row" data-status=${step.status ?? "complete"}>
+        <div class="row-header">
+          ${this.#rowMarker}
+          <span class="row-label">
+            <span class="row-name">${this.#renderInline(step.label)}</span>
+          </span>
+        </div>
+      </div>
+    `;
+	}
+	#renderStep(step) {
+		const detail = step.detail;
+		if (!detail) return this.#renderNoDetailStep(step);
+		const truncated = detail.length > MAX_DETAIL_LENGTH ? `${detail.slice(0, MAX_DETAIL_LENGTH)}… (truncated)` : detail;
+		return html`
+      <div class="timeline-row" data-status=${step.status ?? "complete"}>
+        <div class="row-header">
+          ${this.#rowMarker}
+          <div class="step-card">
+            <span class="step-card-title">${this.#renderInline(step.label)}</span>
+            <div class="step-card-body">
+              <div class="step-card-result">${this.#renderInline(truncated)}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+	get #isExpanded() {
+		return this.running || this._expanded;
+	}
+	get #steps() {
+		return html`
+      <div id="timeline-content" class="timeline ${this.#isExpanded ? "expanded" : ""}" aria-hidden=${this.#isExpanded ? "false" : "true"}>
+        <div class="timeline-content">${this.steps.map((step) => this.#renderStep(step))}</div>
+      </div>
+    `;
+	}
+	get #stepsSummary() {
+		return when(!this.running, () => html`
+        <button class="summary" type="button" aria-expanded=${this._expanded} aria-controls="timeline-content" @click=${this.#toggle}>
+          ${this.#chevronIcon}
+          <span class="status-text">${this.#summaryLabel}</span>
+          <span class="focus-indicator"></span>
+        </button>
+      `);
+	}
+	/**
+	* Sentence case in the DOM; the display casing is applied by `text-transform` in CSS. Screen readers
+	* announce a literal `STEPS` as an initialism and spell it out letter by letter, so the accessible
+	* text stays lowercase and only the rendering is uppercased.
+	*/
+	get #stepsCountLabel() {
+		const count = this.steps.length;
+		return `${count} step${count === 1 ? "" : "s"}`;
+	}
+	willUpdate(changedProperties) {
+		if (changedProperties.has("running") && !this.running && changedProperties.get("running") === true) this._expanded = false;
+	}
+	render() {
+		if (this.steps.length === 0) return nothing;
+		return html`
+      <div class="steps">
+        <div class="steps-count">${this.#stepsCountLabel}</div>
+        ${this.#stepsSummary} ${this.#steps}
+      </div>
+    `;
+	}
+};
+__decorate([property({ attribute: false })], AiStepsComponent.prototype, "steps", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], AiStepsComponent.prototype, "running", void 0);
+__decorate([state()], AiStepsComponent.prototype, "_expanded", void 0);
+AiStepsComponent = __decorate([customElement(AiStepsComponentTagName)], AiStepsComponent);
+//#endregion
+export { AiStepsComponent, AiStepsComponentTagName };

package/dist/ai-steps/index.d.ts

@@ -1 +1 @@
-export * from './ai-steps';
+export * from './ai-steps.js';

package/dist/ai-steps/index.mjs

@@ -1,5 +1 @@
-import { AiStepsComponent, AiStepsComponentTagName } from "./ai-steps.mjs";
-export {
-  AiStepsComponent,
-  AiStepsComponentTagName
-};
+export { AiStepsComponent, AiStepsComponentTagName } from "./ai-steps2.mjs";

package/dist/ai-suggestions/ai-suggestions.d.ts

@@ -1,4 +1,5 @@
 import { LitElement, TemplateResult, PropertyValues, CSSResult } from 'lit';
+import { Suggestion } from '../types/index.js';
 declare global {
     interface HTMLElementTagNameMap {
         'forge-ai-suggestions': AiSuggestionsComponent;
@@ -7,10 +8,6 @@ declare global {
         'forge-ai-suggestions-select': CustomEvent<ForgeAiSuggestionsEventData>;
     }
 }
-export interface Suggestion {
-    text: string;
-    value: string;
-}
 export interface ForgeAiSuggestionsEventData {
     text: string;
     value: string;
@@ -26,7 +23,7 @@ export declare const AiSuggestionsComponentTagName: keyof HTMLElementTagNameMap;
  * @event {CustomEvent<ForgeAiSuggestionsEventData>} forge-ai-suggestions-select - Fired when a suggestion is selected.
  *
  * @cssproperty --forge-ai-suggestions-inline-size - The maximum inline size of the suggestions container.
- * @cssproperty --forge-ai-suggestion-max-width - The maximum width of the suggestion buttons in inline layout.
+ * @cssproperty --forge-ai-suggestion-max-width - The maximum width of the suggestion buttons. Defaults to `82.5cqi` (82.5% of the component width).
  */
 export declare class AiSuggestionsComponent extends LitElement {
     #private;

package/dist/ai-suggestions/ai-suggestions.mjs

@@ -1,164 +1,4 @@
-import { unsafeCSS, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { when } from "lit/directives/when.js";
-import { generateUniqueId, toggleState } from "../utils.mjs";
-import "../core/tooltip/tooltip.mjs";
-import styles from "./ai-suggestions.scss.mjs";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _internals, _AiSuggestionsComponent_instances, syncSuggestionState_fn, checkOverflows_fn, setCssState_fn, suggestionButtons_get, inlineLayout_get, blockLayout_get;
-const AiSuggestionsComponentTagName = "forge-ai-suggestions";
-let AiSuggestionsComponent = class extends LitElement {
-  constructor() {
-    super();
-    __privateAdd(this, _AiSuggestionsComponent_instances);
-    this.suggestions = [];
-    this.variant = "inline";
-    __privateAdd(this, _internals);
-    this._suggestionState = /* @__PURE__ */ new Map();
-    __privateSet(this, _internals, this.attachInternals());
-    __privateMethod(this, _AiSuggestionsComponent_instances, setCssState_fn).call(this);
-  }
-  willUpdate(changedProperties) {
-    if (changedProperties.has("variant")) {
-      __privateMethod(this, _AiSuggestionsComponent_instances, setCssState_fn).call(this);
-    }
-    if (changedProperties.has("suggestions")) {
-      __privateMethod(this, _AiSuggestionsComponent_instances, syncSuggestionState_fn).call(this);
-    }
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("suggestions")) {
-      __privateMethod(this, _AiSuggestionsComponent_instances, checkOverflows_fn).call(this);
-    }
-  }
-  _handleSuggestionClick(suggestion) {
-    const event = new CustomEvent("forge-ai-suggestions-select", {
-      detail: {
-        text: suggestion.text,
-        value: suggestion.value
-      },
-      bubbles: true,
-      composed: true,
-      cancelable: true
-    });
-    this.dispatchEvent(event);
-  }
-  render() {
-    return this.variant === "block" ? __privateGet(this, _AiSuggestionsComponent_instances, blockLayout_get) : __privateGet(this, _AiSuggestionsComponent_instances, inlineLayout_get);
-  }
-};
-_internals = /* @__PURE__ */ new WeakMap();
-_AiSuggestionsComponent_instances = /* @__PURE__ */ new WeakSet();
-syncSuggestionState_fn = function() {
-  const newState = /* @__PURE__ */ new Map();
-  for (const suggestion of this.suggestions) {
-    const existing = this._suggestionState.get(suggestion);
-    if (existing) {
-      newState.set(suggestion, existing);
-    } else {
-      newState.set(suggestion, {
-        id: generateUniqueId("suggestion"),
-        isOverflowing: false
-      });
-    }
-  }
-  this._suggestionState = newState;
-};
-checkOverflows_fn = function() {
-  setTimeout(() => {
-    let hasChanges = false;
-    const buttons = this.shadowRoot?.querySelectorAll(".suggestion");
-    buttons?.forEach((button) => {
-      const textSpan = button.querySelector(".suggestion-text");
-      const isOverflowing = textSpan.scrollWidth > textSpan.offsetWidth;
-      const id = button.id;
-      for (const [, state] of this._suggestionState.entries()) {
-        if (state.id === id && state.isOverflowing !== isOverflowing) {
-          state.isOverflowing = isOverflowing;
-          hasChanges = true;
-          break;
-        }
-      }
-    });
-    if (hasChanges) {
-      this.requestUpdate();
-    }
-  });
-};
-setCssState_fn = function() {
-  toggleState(__privateGet(this, _internals), "inline", this.variant === "inline");
-  toggleState(__privateGet(this, _internals), "block", this.variant === "block");
-};
-suggestionButtons_get = function() {
-  return this.suggestions?.map((suggestion) => {
-    const state = this._suggestionState.get(suggestion);
-    const id = state?.id ?? "";
-    const showTooltip = state?.isOverflowing ?? false;
-    return html`
-        <li class="forge-list-item custom-list-item">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon" aria-hidden="true">
-            <path
-              d="M9 22a1 1 0 0 1-1-1v-3H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6.1l-3.7 3.71c-.2.19-.45.29-.7.29zm1-6v3.08L13.08 16H20V4H4v12zM6 7h12v2H6zm0 4h9v2H6z" />
-          </svg>
-          <button id="${id}" class="action-title" @click=${() => this._handleSuggestionClick(suggestion)}>
-            <span class="suggestion-text">${suggestion.text}</span>
-          </button>
-          ${when(
-      showTooltip,
-      () => html`<forge-ai-tooltip class="suggestion-tooltip" for="${id}" role="presentation"
-                >${suggestion.text}</forge-ai-tooltip
-              >`
-    )}
-        </li>
-      `;
-  });
-};
-inlineLayout_get = function() {
-  return html`
-      <div class="scroll-container">
-        <ul class="forge-list suggestions-inline">
-          ${__privateGet(this, _AiSuggestionsComponent_instances, suggestionButtons_get)}
-        </ul>
-      </div>
-    `;
-};
-blockLayout_get = function() {
-  return html`
-      <div class="block-layout-container">
-        <ul class="forge-list forge-list--block-layout">
-          ${__privateGet(this, _AiSuggestionsComponent_instances, suggestionButtons_get)}
-        </ul>
-      </div>
-    `;
-};
-AiSuggestionsComponent.styles = unsafeCSS(styles);
-__decorateClass([
-  property({ type: Array, attribute: false })
-], AiSuggestionsComponent.prototype, "suggestions", 2);
-__decorateClass([
-  property({ type: String, attribute: "variant" })
-], AiSuggestionsComponent.prototype, "variant", 2);
-AiSuggestionsComponent = __decorateClass([
-  customElement(AiSuggestionsComponentTagName)
-], AiSuggestionsComponent);
-export {
-  AiSuggestionsComponent,
-  AiSuggestionsComponentTagName
-};
+//#region src/lib/ai-suggestions/ai-suggestions.scss?inline
+var ai_suggestions_default = "/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n.forge-icon {\n  --_icon-color:var(--forge-icon-color, currentColor);\n  --_icon-size:var(--forge-icon-size, 1em);\n  --_icon-width:var(--forge-icon-width, var(--_icon-size));\n  --_icon-height:var(--forge-icon-height, var(--_icon-size));\n  --_icon-font-size:var(--forge-icon-font-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));\n}\n\nimg.forge-icon, svg.forge-icon {\n  display: inline-block;\n  box-sizing: content-box;\n  contain: content;\n  font-size: var(--_icon-font-size);\n  display: inline-block;\n}\n\nimg.forge-icon {\n  width: var(--_icon-width);\n  height: var(--_icon-height);\n}\n\nsvg {\n  width: var(--_icon-width);\n  height: var(--_icon-height);\n  display: block;\n  fill: var(--_icon-color);\n  stroke: var(--_icon-color);\n  stroke-width: 0;\n}\n\n/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n@layer list, list-item, navlist, with-start-end, two-line, three-line, dense, wrap, selected, indented, disabled, multicolumn;\n@layer list {\n  .forge-list {\n    --_list-spacing:var(--forge-list-spacing, 0);\n    --_list-container-color:var(--forge-list-container-color, transparent);\n    --_list-column-width:var(--forge-list-column-width, 256px);\n    --_list-column-spacing:var(--forge-list-column-spacing, var(--_list-spacing));\n    --_list-navlist-spacing:var(--forge-list-navlist-spacing, var(--forge-spacing-xxsmall, 4px));\n    --_list-navlist-margin:var(--forge-list-navlist-margin, var(--forge-spacing-xxsmall, 4px) var(--forge-spacing-xsmall, 8px));\n    --_list-navlist-height:var(--forge-list-navlist-height, 40px);\n    --_list-navlist-padding:var(--forge-list-navlist-padding, 0 var(--forge-spacing-xsmall, 8px));\n    --_list-navlist-shape:var(--forge-list-navlist-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n    --_list-navlist-font-size:var(--forge-list-navlist-font-size, calc(var(--forge-typography-font-size, 1rem) * 0.875));\n    --_list-navlist-font-weight:var(--forge-list-navlist-font-weight, 500);\n  }\n  .forge-list {\n    outline: none;\n    background-color: var(--_list-container-color);\n    margin: 0;\n    border-radius: inherit;\n    min-width: inherit;\n  }\n  .forge-list--dense .forge-list-item {\n    --_list-item-gap:var(--_list-item-dense-gap);\n    height: var(--_list-item-dense-one-line-height);\n    min-height: var(--_list-item-dense-one-line-height);\n  }\n  .forge-list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n}\n@layer navlist {\n  .forge-list--navlist {\n    margin-block: var(--_list-navlist-spacing);\n  }\n  .forge-list--navlist .forge-list-item {\n    --forge-list-item-height: var(--_list-navlist-height);\n    --forge-list-item-margin: var(--_list-navlist-margin);\n    --forge-list-item-padding: var(--_list-navlist-padding);\n    --forge-list-item-shape: var(--_list-navlist-shape);\n    --forge-list-item-text-font-size: var(--_list-navlist-font-size);\n    --forge-list-item-text-font-weight: var(--_list-navlist-font-weight);\n  }\n}\n@layer with-start-end {\n  .forge-list-item:has(.forge-list-item__start, .forge-list-item__end) {\n    display: grid;\n    grid-template-columns: 1fr;\n    align-items: center;\n  }\n  .forge-list-item:has(.forge-list-item__start):not(:has(.forge-list-item__end)) {\n    grid-template-columns: auto 1fr;\n  }\n  .forge-list-item:has(.forge-list-item__end):not(:has(.forge-list-item__start)) {\n    grid-template-columns: 1fr auto;\n  }\n  .forge-list-item:has(.forge-list-item__start ~ .forge-list-item__end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .forge-list-item__start, .forge-list-item__end {\n    color: var(--_list-item-text-color);\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    fill: currentColor;\n  }\n}\n@layer list-item {\n  .forge-list-item {\n    --_list-item-background:var(--forge-list-item-background, transparent);\n    --_list-item-shape:var(--forge-list-item-shape, 0);\n    --_list-item-padding:var(--forge-list-item-padding, 0 var(--forge-spacing-medium, 16px));\n    --_list-item-margin:var(--forge-list-item-margin, 0);\n    --_list-item-height:var(--forge-list-item-height, 48px);\n    --_list-item-dense-height:var(--forge-list-item-dense-height, 32px);\n    --_list-item-indent:var(--forge-list-item-indent, var(--forge-spacing-xxlarge, 48px));\n    --_list-item-cursor:var(--forge-list-item-cursor, pointer);\n    --_list-item-gap:var(--forge-list-item-gap, var(--forge-spacing-large, 24px));\n    --_list-item-text-color:var(--forge-list-item-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));\n    --_list-item-text-font-size:var(--forge-list-item-text-font-size, var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1))));\n    --_list-item-text-font-weight:var(--forge-list-item-text-font-weight, var(--forge-typography-body2-font-weight, 400));\n    --_list-item-text-line-height:var(--forge-list-item-text-line-height, 1.5rem);\n    --_list-item-selected-color:var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));\n    --_list-item-selected-background:var(--forge-list-item-selected-background, var(--_list-item-selected-color));\n    --_list-item-selected-opacity:var(--forge-list-item-selected-opacity, 0.08);\n    --_list-item-selected-start-color:var(--forge-list-item-selected-start-color, var(--_list-item-selected-color));\n    --_list-item-selected-end-color:var(--forge-list-item-selected-end-color, var(--_list-item-selected-color));\n    --_list-item-selected-text-color:var(--forge-list-item-selected-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));\n    --_list-item-disabled-opacity:var(--forge-list-item-disabled-opacity, 0.38);\n    --_list-item-disabled-cursor:var(--forge-list-item-disabled-cursor, not-allowed);\n    --_list-item-one-line-height:var(--forge-list-item-one-line-height, var(--_list-item-height));\n    --_list-item-two-line-height:var(--forge-list-item-two-line-height, var(--forge-list-item-height, 72px));\n    --_list-item-three-line-height:var(--forge-list-item-three-line-height, var(--forge-list-item-height, 88px));\n    --_list-item-dense-one-line-height:var(--forge-list-item-dense-one-line-height, var(--_list-item-dense-height));\n    --_list-item-dense-two-line-height:var(--forge-list-item-dense-two-line-height, var(--forge-list-item-dense-height, 56px));\n    --_list-item-dense-three-line-height:var(--forge-list-item-dense-three-line-height, var(--forge-list-item-dense-height, 72px));\n    --_list-item-dense-font-size:var(--forge-list-item-dense-font-size, 0.875rem);\n    --_list-item-dense-indent:var(--forge-list-item-dense-indent, var(--forge-spacing-xxlarge, 48px));\n    --_list-item-dense-gap:var(--forge-list-item-dense-gap, var(--forge-spacing-xsmall, 8px));\n    --_list-item-start-selected-color:var(--forge-list-item-start-selected-color, var(--_list-item-selected-color));\n    --_list-item-end-selected-color:var(--forge-list-item-end-selected-color, var(--_list-item-selected-color));\n    --_list-item-wrap-padding:var(--forge-list-item-wrap-padding, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-medium, 16px));\n  }\n  .forge-list-item {\n    position: relative;\n    display: flex;\n    gap: var(--_list-item-gap);\n    align-items: center;\n    box-sizing: border-box;\n    outline: none;\n    text-decoration: none;\n    border-radius: var(--_list-item-shape);\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    background-color: var(--_list-item-background);\n    height: var(--_list-item-height);\n    min-height: var(--_list-item-height);\n    padding: var(--_list-item-padding);\n    margin: var(--_list-item-margin);\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n    font-family: var(--forge-typography-body2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));\n    letter-spacing: var(--forge-typography-body2-letter-spacing, 0.015625em);\n    text-transform: var(--forge-typography-body2-text-transform, inherit);\n    text-decoration: var(--forge-typography-body2-text-decoration, inherit);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    box-sizing: border-box;\n    isolation: isolate;\n    font-size: var(--_list-item-text-font-size);\n    font-weight: var(--_list-item-text-font-weight);\n    line-height: var(--_list-item-text-line-height);\n    flex: 1;\n    contain: layout;\n    display: block;\n    align-content: center;\n  }\n  .forge-list-item button {\n    appearance: none;\n    cursor: var(--_list-item-cursor);\n    border: none;\n    padding-block: 0;\n    padding-inline: 0;\n    margin: 0;\n    box-sizing: border-box;\n    width: 100%;\n    background: rgba(0, 0, 0, 0);\n    color: inherit;\n    outline: none;\n    font: inherit;\n    user-select: auto;\n    text-align: inherit;\n    letter-spacing: inherit;\n    word-spacing: inherit;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    display: block;\n  }\n  .forge-list-item a {\n    outline: none;\n    color: inherit !important;\n    text-decoration: none !important;\n  }\n  .forge-list-item--interactive:not(.forge-list-item--disabled), .forge-list-item button:not(:disabled), .forge-list-item a, .forge-list-item label {\n    --_state-layer-display:var(--forge-state-layer-display, flex);\n    --_state-layer-color:var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));\n    --_state-layer-hover-color:var(--forge-state-layer-hover-color, var(--_state-layer-color));\n    --_state-layer-hover-opacity:var(--forge-state-layer-hover-opacity, 0.08);\n    --_state-layer-pressed-color:var(--forge-state-layer-pressed-color, var(--_state-layer-color));\n    --_state-layer-pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.12);\n    --_state-layer-hover-duration:var(--forge-state-layer-hover-duration, 15ms);\n    --_state-layer-pressed-duration:var(--forge-state-layer-pressed-duration, 105ms);\n    --_state-layer-animation-duration:var(--forge-state-layer-animation-duration, 375ms);\n  }\n  .forge-list-item--interactive:not(.forge-list-item--disabled)::before, .forge-list-item button:not(:disabled)::before, .forge-list-item a::before, .forge-list-item label::before {\n    opacity: 0;\n    position: absolute;\n    backface-visibility: hidden;\n    transform: translateZ(0);\n    background-color: var(--_state-layer-hover-color);\n    inset: 0;\n    transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;\n    --_state-layer-hover-duration:var(--forge-state-layer-hover-duration, 100ms);\n    content: \"\";\n    opacity: 0;\n    border-radius: inherit;\n  }\n  .forge-list-item--interactive:not(.forge-list-item--disabled):hover::before, .forge-list-item button:not(:disabled):hover::before, .forge-list-item a:hover::before, .forge-list-item label:hover::before {\n    background-color: var(--_state-layer-hover-color);\n    opacity: var(--_state-layer-hover-opacity);\n  }\n  .forge-list-item--interactive:not(.forge-list-item--disabled):active::before, .forge-list-item button:not(:disabled):active::before, .forge-list-item a:active::before, .forge-list-item label:active::before {\n    opacity: var(--_state-layer-pressed-opacity);\n    transition-duration: var(--_state-layer-pressed-duration);\n    --_state-layer-pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.18);\n  }\n  .forge-list-item :is(forge-checkbox, forge-radio, forge-switch, input):is(.forge-list-item__start, .forge-list-item__end):not([forge-ignore]) {\n    --forge-focus-indicator-display: none;\n    --forge-state-layer-display: none;\n  }\n  .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) a, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) button, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) label, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled]), .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) .forge-list-item--interactive {\n    cursor: pointer;\n  }\n  @keyframes forge-focus-indicator-outward-grow {\n    from {\n      outline-width: 0;\n    }\n    to {\n      outline-width: var(--_focus-indicator-active-width);\n    }\n  }\n  @keyframes forge-focus-indicator-outward-shrink {\n    from {\n      outline-width: var(--_focus-indicator-active-width);\n    }\n  }\n  @keyframes forge-focus-indicator-inward-grow {\n    from {\n      border-width: 0;\n    }\n    to {\n      border-width: var(--_focus-indicator-active-width);\n    }\n  }\n  @keyframes forge-focus-indicator-inward-shrink {\n    from {\n      border-width: var(--_focus-indicator-active-width);\n    }\n  }\n  .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) a, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) button, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) label, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled]), .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) .forge-list-item--interactive {\n    outline: none;\n  }\n  .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) a:focus-visible::after, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) button:focus-visible::after, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) label:focus-visible::after, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled]):focus-visible::after, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) .forge-list-item--interactive:focus-visible::after {\n    --_focus-indicator-display:var(--forge-focus-indicator-display, flex);\n    --_focus-indicator-width:var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));\n    --_focus-indicator-active-width:var(--forge-focus-indicator-active-width, 6px);\n    --_focus-indicator-color:var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));\n    --_focus-indicator-shape:var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));\n    --_focus-indicator-duration:var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));\n    --_focus-indicator-easing:var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));\n    --_focus-indicator-shape-start-start:var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));\n    --_focus-indicator-shape-start-end:var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));\n    --_focus-indicator-shape-end-end:var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));\n    --_focus-indicator-shape-end-start:var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));\n    --_focus-indicator-outward-offset:var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));\n    --_focus-indicator-inward-offset:var(--forge-focus-indicator-inward-offset, 0px);\n    --_focus-indicator-offset-block:var(--forge-focus-indicator-offset-block, 0);\n    --_focus-indicator-offset-inline:var(--forge-focus-indicator-offset-inline, 0);\n  }\n  .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) a:focus-visible::after, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) button:focus-visible::after, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) label:focus-visible::after, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled]):focus-visible::after, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) .forge-list-item--interactive:focus-visible::after {\n    animation-delay: 0s, calc(var(--_focus-indicator-duration) * 0.25);\n    animation-duration: calc(var(--_focus-indicator-duration) * 0.25), calc(var(--_focus-indicator-duration) * 0.75);\n    animation-timing-function: var(--_focus-indicator-easing);\n    box-sizing: border-box;\n    color: var(--_focus-indicator-color);\n    display: none;\n    pointer-events: none;\n    position: absolute;\n    margin-block: var(--_focus-indicator-offset-block);\n    margin-inline: var(--_focus-indicator-offset-inline);\n    animation-name: forge-focus-indicator-inward-grow, forge-focus-indicator-inward-shrink;\n    border-end-end-radius: calc(var(--_focus-indicator-shape-end-end) - var(--_focus-indicator-inward-offset));\n    border-end-start-radius: calc(var(--_focus-indicator-shape-end-start) - var(--_focus-indicator-inward-offset));\n    border-start-end-radius: calc(var(--_focus-indicator-shape-start-end) - var(--_focus-indicator-inward-offset));\n    border-start-start-radius: calc(var(--_focus-indicator-shape-start-start) - var(--_focus-indicator-inward-offset));\n    border: var(--_focus-indicator-width) solid currentColor;\n    inset: var(--_focus-indicator-inward-offset);\n    content: \"\";\n    display: block;\n  }\n  .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) a, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) button, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) label, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled]), .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) .forge-list-item--interactive {\n    --forge-focus-indicator-shape: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n  }\n  .forge-list-item__text {\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n    font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));\n    font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n    font-weight: var(--forge-typography-body1-font-weight, 400);\n    line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n    letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n    text-transform: var(--forge-typography-body1-text-transform, inherit);\n    text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: var(--_list-item-text-color);\n    display: block;\n  }\n}\n@layer two-line {\n  .forge-list--two-line .forge-list-item, .forge-list-item--two-line {\n    height: var(--_list-item-two-line-height);\n    min-height: var(--_list-item-two-line-height);\n  }\n  .forge-list--three-line .forge-list-item, .forge-list-item--three-line {\n    height: var(--_list-item-three-line-height);\n    min-height: var(--_list-item-three-line-height);\n  }\n}\n@layer dense {\n  .forge-list--dense .forge-list-item, .forge-list-item--dense {\n    --_list-item-gap:var(--_list-item-dense-gap);\n    height: var(--_list-item-dense-one-line-height);\n    min-height: var(--_list-item-dense-one-line-height);\n    font-size: var(--_list-item-dense-font-size);\n  }\n  .forge-list--dense.forge-list--two-line .forge-list-item, .forge-list--dense .forge-list-item--two-line, .forge-list-item--dense.forge-list-item--two-line {\n    height: var(--_list-item-dense-two-line-height);\n    min-height: var(--_list-item-dense-two-line-height);\n  }\n  .forge-list--dense.forge-list--three-line .forge-list-item, .forge-list--dense .forge-list-item--three-line, .forge-list-item--dense.forge-list-item--three-line {\n    height: var(--_list-item-dense-three-line-height);\n    min-height: var(--_list-item-dense-three-line-height);\n  }\n  .forge-list-dense.forge-list--indented .forge-list-item, .forge-list--dense .forge-list-item--indented, .forge-list-item--dense.forge-list-item--indented {\n    margin-inline-start: var(--_list-item-dense-indent);\n  }\n}\n@layer wrap {\n  .forge-list--wrap .forge-list-item, .forge-list-item--wrap {\n    --_list-item-padding:var(--_list-item-wrap-padding);\n    height: auto;\n    white-space: normal;\n    overflow: visible;\n    text-overflow: clip;\n    line-height: normal;\n  }\n  .forge-list--wrap .forge-list-item .forge-list-item__text, .forge-list-item--wrap .forge-list-item__text {\n    white-space: normal;\n    overflow: visible;\n    text-overflow: clip;\n    line-height: normal;\n  }\n}\n@layer selected {\n  .forge-list-item--selected {\n    color: var(--_list-item-selected-color);\n  }\n  .forge-list-item--selected::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    opacity: var(--_list-item-selected-opacity);\n    background-color: var(--_list-item-selected-background);\n    pointer-events: none;\n  }\n  .forge-list-item--selected {\n    --forge-state-layer-color: var(--_list-item-selected-color);\n  }\n  .forge-list-item--selected .forge-list-item__start {\n    color: var(--_list-item-start-selected-color);\n  }\n  .forge-list-item--selected .forge-list-item__end {\n    color: var(--_list-item-end-selected-color);\n  }\n}\n@layer indented {\n  .forge-list--indented .forge-list-item, .forge-list-item--indented {\n    margin-inline-start: var(--_list-item-indent);\n  }\n}\n@layer disabled {\n  .forge-list--disabled .forge-list-item, .forge-list-item--disabled, .forge-list-item button:disabled {\n    cursor: var(--_list-item-disabled-cursor);\n    opacity: var(--_list-item-disabled-opacity);\n  }\n}\n@layer multicolumn {\n  .forge-list--multicolumn {\n    display: grid;\n    gap: var(--_list-spacing);\n    min-width: 0;\n    grid-template-columns: repeat(auto-fit, minmax(var(--_list-column-width), 1fr));\n    column-gap: var(--_list-column-spacing);\n  }\n}\n:host {\n  display: block;\n  container-type: inline-size;\n  width: 100%;\n  max-inline-size: var(--forge-ai-suggestions-inline-size, 768px);\n}\n\n.custom-list-item {\n  --forge-list-item-height: 32px;\n  --forge-list-item-padding: var(--forge-spacing-xxsmall, 4px);\n  --forge-list-item-shape: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n  --forge-icon-color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n  display: flex;\n  align-items: center;\n  justify-content: start;\n  gap: var(--forge-spacing-medium, 16px);\n  margin-inline: calc(var(--forge-spacing-xxsmall, 4px) * -1) 0;\n  margin-block: 0;\n  width: 100%;\n}\n.custom-list-item button {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));\n  font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-body1-font-weight, 400);\n  line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-body1-text-transform, inherit);\n  text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n  display: flex;\n  justify-content: start;\n  text-box-trim: both;\n  max-inline-size: var(--forge-ai-suggestion-max-width, 82.5cqi);\n  min-inline-size: 0;\n}\n.custom-list-item button .suggestion-text {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.custom-list-item button:hover, .custom-list-item button:focus-within, .custom-list-item button::after {\n  border-radius: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n}\n\n:host(:state(inline)) .custom-list-item {\n  flex: 0 0 auto; /* === don't grow, don't shrink, size to content */\n  width: fit-content; /* optional, just makes intent explicit */\n}\n\n:host(:state(block)) .forge-list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--forge-spacing-xxsmall, 4px);\n}\n\n.block-layout-container {\n  display: flex;\n  flex-direction: column;\n}\n\n.scroll-container {\n  overflow: scroll;\n  scrollbar-width: none;\n  -webkit-overflow-scrolling: touch;\n  width: 100%;\n  height: 100%;\n}\n\n.suggestions-inline {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  width: max-content;\n  gap: var(--forge-spacing-small, 12px);\n}\n\n.suggestion-tooltip {\n  --forge-tooltip-content-align: start;\n}";
+//#endregion
+export { ai_suggestions_default as default };