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

package/dist/ai-artifact-card/ai-artifact-card.d.ts

@@ -0,0 +1,75 @@
+import { LitElement, TemplateResult, CSSResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-ai-artifact-card': AiArtifactCardComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-ai-artifact-card-open': CustomEvent<ForgeAiArtifactCardOpenEventData>;
+    }
+}
+export interface ForgeAiArtifactCardOpenEventData {
+    assetId: string;
+}
+export declare const AiArtifactCardComponentTagName: keyof HTMLElementTagNameMap;
+/** Set by `forge-ai-artifact-card-group` on cards it has collapsed. Cleared when the card leaves a group. */
+export declare const AI_ARTIFACT_CARD_COLLAPSED_ATTRIBUTE = "data-collapsed";
+/**
+ * @tag forge-ai-artifact-card
+ *
+ * @summary A compact, clickable card representing an artifact an agent produced.
+ *
+ * @description
+ * Displays a leading icon, two lines of truncating text, and a trailing action glyph inside a single
+ * button that covers the whole card. Activating it emits an event; the consumer decides what
+ * opens. Placed in a `forge-ai-artifact-card-group`, it renders as a row of that list. The component
+ * is presentational — it holds no knowledge of what the artifact is or where it lives.
+ *
+ * @slot icon - The leading icon, shown inside a bordered tile. Replaces the default artifact glyph.
+ * @slot action-icon - The trailing action glyph. Replaces the default arrow, and unlike the arrow stays
+ * visible while `active`, so consumers that collapse on a second activation can show a matching glyph.
+ *
+ * @event {CustomEvent<ForgeAiArtifactCardOpenEventData>} forge-ai-artifact-card-open - Fired
+ * when the card is activated by click, Enter, or Space. Not fired while disabled.
+ *
+ * @cssproperty --forge-ai-artifact-card-accent-color - Color of the active border and ring
+ * @cssproperty --forge-ai-artifact-card-background - Background color of the card
+ * @cssproperty --forge-ai-artifact-card-border-radius - Corner radius of the card
+ * @cssproperty --forge-ai-artifact-card-padding - Padding inside the card
+ * @cssproperty --forge-ai-artifact-card-gap - Gap between the icon and the text
+ */
+export declare class AiArtifactCardComponent extends LitElement {
+    #private;
+    static styles: CSSResult;
+    /**
+     * The primary line of text. Truncates to a single line.
+     */
+    titleText: string;
+    /**
+     * The secondary line of text. Truncates to a single line.
+     */
+    subtitleText: string;
+    /**
+     * Describes what activating the card does, for assistive technology only. Appended to the button's
+     * accessible name after the title and subtitle. Set it when activation does something other than
+     * open, such as collapsing an already-open artifact ("Collapse report"). Omit it and the name is
+     * just the card text.
+     */
+    actionLabel?: string;
+    /**
+     * An opaque identifier echoed back in the open event detail. The component never
+     * interprets it.
+     */
+    assetId: string;
+    /**
+     * Whether the artifact this card points at is the one currently being viewed. Exposed to
+     * assistive technology as `aria-current`.
+     */
+    active: boolean;
+    /**
+     * Whether the card can be activated.
+     */
+    disabled: boolean;
+    private _grouped;
+    connectedCallback(): void;
+    render(): TemplateResult;
+}

package/dist/ai-artifact-card/ai-artifact-card.mjs

@@ -0,0 +1,142 @@
+import { unsafeCSS, LitElement, html, nothing } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import styles from "./ai-artifact-card.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 _defaultIcon, _arrowIcon, _AiArtifactCardComponent_instances, detectGroup_fn, handleClick_fn, actionLabel_get;
+const AiArtifactCardComponentTagName = "forge-ai-artifact-card";
+const AI_ARTIFACT_CARD_COLLAPSED_ATTRIBUTE = "data-collapsed";
+const GROUP_TAG_NAME = "forge-ai-artifact-card-group";
+let AiArtifactCardComponent = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _AiArtifactCardComponent_instances);
+    this.titleText = "";
+    this.subtitleText = "";
+    this.assetId = "";
+    this.active = false;
+    this.disabled = false;
+    this._grouped = false;
+    __privateAdd(this, _defaultIcon, html`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+      <path
+        d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5V5h14zM7 10h2v7H7zm4-3h2v10h-2zm4 6h2v4h-2z" />
+    </svg>
+  `);
+    __privateAdd(this, _arrowIcon, html`
+    <svg class="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+      <path
+        d="M5.25 5.25H12.75V12.75M5.25 12.75L12.75 5.25"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round" />
+    </svg>
+  `);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    __privateMethod(this, _AiArtifactCardComponent_instances, detectGroup_fn).call(this);
+  }
+  render() {
+    return html`
+      <button
+        class=${classMap({ "artifact-card": true, "artifact-card--grouped": this._grouped })}
+        type="button"
+        aria-current=${this.active ? "true" : nothing}
+        ?disabled=${this.disabled}
+        @click=${__privateMethod(this, _AiArtifactCardComponent_instances, handleClick_fn)}>
+        <span class="icon" aria-hidden="true">
+          <slot name="icon">${__privateGet(this, _defaultIcon)}</slot>
+        </span>
+        <span class="text">
+          <span class="title">${this.titleText}</span>
+          <span class="subtitle">${this.subtitleText}</span>
+        </span>
+        <span class="action" aria-hidden="true">
+          <slot name="action-icon">${__privateGet(this, _arrowIcon)}</slot>
+        </span>
+        ${__privateGet(this, _AiArtifactCardComponent_instances, actionLabel_get)}
+        <span class="focus-indicator"></span>
+      </button>
+    `;
+  }
+};
+_defaultIcon = /* @__PURE__ */ new WeakMap();
+_arrowIcon = /* @__PURE__ */ new WeakMap();
+_AiArtifactCardComponent_instances = /* @__PURE__ */ new WeakSet();
+detectGroup_fn = function() {
+  this._grouped = this.parentElement?.tagName.toLowerCase() === GROUP_TAG_NAME;
+  if (this._grouped) {
+    this.setAttribute("role", "listitem");
+    return;
+  }
+  if (this.getAttribute("role") === "listitem") {
+    this.removeAttribute("role");
+  }
+  this.removeAttribute(AI_ARTIFACT_CARD_COLLAPSED_ATTRIBUTE);
+};
+handleClick_fn = function() {
+  if (this.disabled) {
+    return;
+  }
+  this.dispatchEvent(
+    new CustomEvent("forge-ai-artifact-card-open", {
+      detail: { assetId: this.assetId },
+      bubbles: true,
+      composed: true
+    })
+  );
+};
+actionLabel_get = function() {
+  if (!this.actionLabel) {
+    return nothing;
+  }
+  return html`<span class="sr-only">${this.actionLabel}</span>`;
+};
+AiArtifactCardComponent.styles = unsafeCSS(styles);
+__decorateClass([
+  property({ attribute: "title-text" })
+], AiArtifactCardComponent.prototype, "titleText", 2);
+__decorateClass([
+  property({ attribute: "subtitle-text" })
+], AiArtifactCardComponent.prototype, "subtitleText", 2);
+__decorateClass([
+  property({ attribute: "action-label" })
+], AiArtifactCardComponent.prototype, "actionLabel", 2);
+__decorateClass([
+  property({ attribute: "asset-id" })
+], AiArtifactCardComponent.prototype, "assetId", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], AiArtifactCardComponent.prototype, "active", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], AiArtifactCardComponent.prototype, "disabled", 2);
+__decorateClass([
+  state()
+], AiArtifactCardComponent.prototype, "_grouped", 2);
+AiArtifactCardComponent = __decorateClass([
+  customElement(AiArtifactCardComponentTagName)
+], AiArtifactCardComponent);
+export {
+  AI_ARTIFACT_CARD_COLLAPSED_ATTRIBUTE,
+  AiArtifactCardComponent,
+  AiArtifactCardComponentTagName
+};

package/dist/ai-artifact-card/ai-artifact-card.scss.mjs

@@ -0,0 +1,283 @@
+const styles = `/* prettier-ignore */
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes forge-focus-indicator-outward-grow {
+  from {
+    outline-width: 0;
+  }
+  to {
+    outline-width: var(--_focus-indicator-active-width);
+  }
+}
+@keyframes forge-focus-indicator-outward-shrink {
+  from {
+    outline-width: var(--_focus-indicator-active-width);
+  }
+}
+@keyframes forge-focus-indicator-inward-grow {
+  from {
+    border-width: 0;
+  }
+  to {
+    border-width: var(--_focus-indicator-active-width);
+  }
+}
+@keyframes forge-focus-indicator-inward-shrink {
+  from {
+    border-width: var(--_focus-indicator-active-width);
+  }
+}
+:host {
+  --_accent-color: var(--forge-ai-artifact-card-accent-color, var(--forge-theme-primary, #3f51b5));
+  --_border-radius: var(--forge-ai-artifact-card-border-radius, 12px);
+  display: block;
+}
+
+:host([hidden]),
+:host([data-collapsed]) {
+  display: none;
+}
+
+/*
+ * Hover and press feedback come from the Forge state layer. The active ring is drawn outside the border
+ * with a spread shadow rather than a thicker border, so the card's layout never shifts between states.
+ */
+.artifact-card {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 64px;
+  gap: var(--forge-ai-artifact-card-gap, var(--forge-spacing-small, 12px));
+  padding: var(--forge-ai-artifact-card-padding, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-small, 12px));
+  border: 1px solid var(--forge-theme-outline, #e0e0e0);
+  border-radius: var(--_border-radius);
+  background: var(--forge-ai-artifact-card-background, var(--forge-theme-surface, #ffffff));
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+  outline: none;
+  transition: box-shadow 150ms ease, border-color 150ms ease;
+  --_state-layer-display: var(--forge-state-layer-display, flex);
+  --_state-layer-color: var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));
+  --_state-layer-hover-color: var(--forge-state-layer-hover-color, var(--_state-layer-color));
+  --_state-layer-hover-opacity: var(--forge-state-layer-hover-opacity, 0.08);
+  --_state-layer-pressed-color: var(--forge-state-layer-pressed-color, var(--_state-layer-color));
+  --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.12);
+  --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 15ms);
+  --_state-layer-pressed-duration: var(--forge-state-layer-pressed-duration, 105ms);
+  --_state-layer-animation-duration: var(--forge-state-layer-animation-duration, 375ms);
+}
+.artifact-card::before {
+  opacity: 0;
+  position: absolute;
+  backface-visibility: hidden;
+  transform: translateZ(0);
+  background-color: var(--_state-layer-hover-color);
+  inset: 0;
+  transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;
+  --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 100ms);
+  content: "";
+  opacity: 0;
+  border-radius: inherit;
+}
+.artifact-card:hover::before {
+  background-color: var(--_state-layer-hover-color);
+  opacity: var(--_state-layer-hover-opacity);
+}
+.artifact-card:active::before {
+  opacity: var(--_state-layer-pressed-opacity);
+  transition-duration: var(--_state-layer-pressed-duration);
+  --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.18);
+}
+.artifact-card:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.artifact-card:disabled::before {
+  display: none;
+}
+
+:host([active]) .artifact-card {
+  border-color: color-mix(in srgb, var(--_accent-color) 40%, transparent);
+  background: var(--forge-theme-surface-container-minimum, #f5f5f5);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent-color) 8%, transparent);
+}
+
+.focus-indicator {
+  position: absolute;
+  display: none;
+}
+
+.artifact-card:focus-visible .focus-indicator {
+  --_focus-indicator-display: var(--forge-focus-indicator-display, flex);
+  --_focus-indicator-width: var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));
+  --_focus-indicator-active-width: var(--forge-focus-indicator-active-width, 6px);
+  --_focus-indicator-color: var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));
+  --_focus-indicator-shape: var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));
+  --_focus-indicator-duration: var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));
+  --_focus-indicator-easing: var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));
+  --_focus-indicator-shape-start-start: var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));
+  --_focus-indicator-shape-start-end: var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));
+  --_focus-indicator-shape-end-end: var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));
+  --_focus-indicator-shape-end-start: var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));
+  --_focus-indicator-outward-offset: var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));
+  --_focus-indicator-inward-offset: var(--forge-focus-indicator-inward-offset, 0px);
+  --_focus-indicator-offset-block: var(--forge-focus-indicator-offset-block, 0);
+  --_focus-indicator-offset-inline: var(--forge-focus-indicator-offset-inline, 0);
+  animation-delay: 0s, calc(var(--_focus-indicator-duration) * 0.25);
+  animation-duration: calc(var(--_focus-indicator-duration) * 0.25), calc(var(--_focus-indicator-duration) * 0.75);
+  animation-timing-function: var(--_focus-indicator-easing);
+  box-sizing: border-box;
+  color: var(--_focus-indicator-color);
+  display: none;
+  pointer-events: none;
+  position: absolute;
+  margin-block: var(--_focus-indicator-offset-block);
+  margin-inline: var(--_focus-indicator-offset-inline);
+  animation-name: forge-focus-indicator-inward-grow, forge-focus-indicator-inward-shrink;
+  border-end-end-radius: calc(var(--_focus-indicator-shape-end-end) - var(--_focus-indicator-inward-offset));
+  border-end-start-radius: calc(var(--_focus-indicator-shape-end-start) - var(--_focus-indicator-inward-offset));
+  border-start-end-radius: calc(var(--_focus-indicator-shape-start-end) - var(--_focus-indicator-inward-offset));
+  border-start-start-radius: calc(var(--_focus-indicator-shape-start-start) - var(--_focus-indicator-inward-offset));
+  border: var(--_focus-indicator-width) solid currentColor;
+  inset: var(--_focus-indicator-inward-offset);
+  display: block;
+  --forge-focus-indicator-shape: var(--_border-radius);
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: var(--forge-spacing-xlarge, 32px);
+  height: var(--forge-spacing-xlarge, 32px);
+  border: 1px solid var(--forge-theme-outline, #e0e0e0);
+  border-radius: 6px;
+  background: var(--forge-theme-surface-container-minimum, #f5f5f5);
+  color: var(--forge-theme-text-high, rgba(0, 0, 0, 0.87));
+}
+
+.icon svg,
+.icon ::slotted(*) {
+  display: block;
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.title {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));
+  font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));
+  font-weight: var(--forge-typography-body1-font-weight, 400);
+  line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));
+  letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);
+  text-transform: var(--forge-typography-body1-text-transform, inherit);
+  text-decoration: var(--forge-typography-body1-text-decoration, inherit);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 500;
+  color: var(--forge-theme-text-high, rgba(0, 0, 0, 0.87));
+}
+
+.subtitle {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: var(--forge-typography-label1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));
+  font-size: var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.75)));
+  font-weight: var(--forge-typography-label1-font-weight, 400);
+  line-height: var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));
+  letter-spacing: var(--forge-typography-label1-letter-spacing, 0.0357142857em);
+  text-transform: var(--forge-typography-label1-text-transform, inherit);
+  text-decoration: var(--forge-typography-label1-text-decoration, inherit);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));
+}
+
+.action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--forge-spacing-xlarge, 32px);
+  height: var(--forge-spacing-xlarge, 32px);
+  color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));
+}
+
+.action svg,
+.action ::slotted(*) {
+  display: block;
+  width: 18px;
+  height: 18px;
+  fill: currentColor;
+}
+
+/*
+ * The default arrow promises the card opens something, which the active card already is. Its space is
+ * kept so the text doesn't reflow when a card becomes active. Slotted action icons stay visible.
+ */
+:host([active]) .arrow {
+  visibility: hidden;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/*
+ * Inside a group the card becomes a list row: the group draws the border, corners, and dividers,
+ * so the row gives those up and shows active as a fill rather than a ring.
+ */
+.artifact-card--grouped {
+  min-height: var(--forge-spacing-xxxlarge, 56px);
+  border: none;
+  border-radius: 0;
+}
+
+/*
+ * Square, because the group clips its rows to its own rounded corners. The group hands the top and bottom
+ * rows its inner radius so their rings follow the curve instead of being cut off.
+ */
+.artifact-card--grouped:focus-visible .focus-indicator {
+  --forge-focus-indicator-shape-start-start: var(--_forge-ai-artifact-card-group-start-radius, 0px);
+  --forge-focus-indicator-shape-start-end: var(--_forge-ai-artifact-card-group-start-radius, 0px);
+  --forge-focus-indicator-shape-end-start: var(--_forge-ai-artifact-card-group-end-radius, 0px);
+  --forge-focus-indicator-shape-end-end: var(--_forge-ai-artifact-card-group-end-radius, 0px);
+}
+
+:host([active]) .artifact-card--grouped {
+  background: color-mix(in srgb, var(--_accent-color) 8%, transparent);
+  box-shadow: none;
+}`;
+export {
+  styles as default
+};

package/dist/ai-artifact-card/index.d.ts

@@ -0,0 +1 @@
+export { AiArtifactCardComponent, AiArtifactCardComponentTagName, type ForgeAiArtifactCardOpenEventData } from './ai-artifact-card';

package/dist/ai-artifact-card/index.mjs

@@ -0,0 +1,5 @@
+import { AiArtifactCardComponent, AiArtifactCardComponentTagName } from "./ai-artifact-card.mjs";
+export {
+  AiArtifactCardComponent,
+  AiArtifactCardComponentTagName
+};

package/dist/ai-artifact-card-group/ai-artifact-card-group.d.ts

@@ -0,0 +1,57 @@
+import { LitElement, PropertyValues, TemplateResult, CSSResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-ai-artifact-card-group': AiArtifactCardGroupComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-ai-artifact-card-group-toggle': CustomEvent<ForgeAiArtifactCardGroupToggleEventData>;
+    }
+}
+export interface ForgeAiArtifactCardGroupToggleEventData {
+    expanded: boolean;
+}
+export declare const AiArtifactCardGroupComponentTagName: keyof HTMLElementTagNameMap;
+/**
+ * @tag forge-ai-artifact-card-group
+ *
+ * @summary Presents several artifact cards as a single list that collapses past a set count.
+ *
+ * @description
+ * Wraps `forge-ai-artifact-card` elements in one bordered container with dividers between them.
+ * Cards inside a group switch to a flatter row style on their own. When there are more cards than
+ * `visibleCount`, the extras are collapsed behind a toggle that expands and collapses the list. Each
+ * card still emits its own open event. Cards a consumer has set `hidden` on stay hidden and are not
+ * counted; collapsing uses a separate marker so the two never clobber each other.
+ *
+ * @slot - The `forge-ai-artifact-card` elements to list. Other elements are not styled as rows and
+ * break the list semantics, so keep the slot to cards.
+ *
+ * @event {CustomEvent<ForgeAiArtifactCardGroupToggleEventData>} forge-ai-artifact-card-group-toggle -
+ * Fired when the user expands or collapses the list with the toggle.
+ *
+ * @cssproperty --forge-ai-artifact-card-group-border-radius - Corner radius of the group
+ */
+export declare class AiArtifactCardGroupComponent extends LitElement {
+    #private;
+    static styles: CSSResult;
+    /**
+     * How many cards show while the list is collapsed. Values below 1 are treated as 1, and
+     * non-numeric values fall back to the default of 3.
+     */
+    visibleCount: number;
+    /**
+     * Whether every card is showing.
+     */
+    expanded: boolean;
+    /**
+     * Label of the toggle while collapsed. `{count}` is replaced with the number of hidden cards.
+     */
+    showMoreText: string;
+    /**
+     * Label of the toggle while expanded.
+     */
+    showLessText: string;
+    private _cards;
+    updated(changedProperties: PropertyValues<this>): void;
+    render(): TemplateResult;
+}