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

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

@@ -0,0 +1,103 @@
+import __decorate from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.mjs";
+import ai_artifact_card_default from "./ai-artifact-card.mjs";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+//#region src/lib/ai-artifact-card/ai-artifact-card.ts
+var AiArtifactCardComponentTagName = "forge-ai-artifact-card";
+/** Set by `forge-ai-artifact-card-group` on cards it has collapsed. Cleared when the card leaves a group. */
+var AI_ARTIFACT_CARD_COLLAPSED_ATTRIBUTE = "data-collapsed";
+var GROUP_TAG_NAME = "forge-ai-artifact-card-group";
+var AiArtifactCardComponent = class AiArtifactCardComponent extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.titleText = "";
+		this.subtitleText = "";
+		this.assetId = "";
+		this.active = false;
+		this.disabled = false;
+		this._grouped = false;
+		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>
+  `;
+		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>
+  `;
+	}
+	static {
+		this.styles = unsafeCSS(ai_artifact_card_default);
+	}
+	#defaultIcon;
+	#arrowIcon;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#detectGroup();
+	}
+	#detectGroup() {
+		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() {
+		if (this.disabled) return;
+		this.dispatchEvent(new CustomEvent("forge-ai-artifact-card-open", {
+			detail: { assetId: this.assetId },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	get #actionLabel() {
+		if (!this.actionLabel) return nothing;
+		return html`<span class="sr-only">${this.actionLabel}</span>`;
+	}
+	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=${this.#handleClick}>
+        <span class="icon" aria-hidden="true">
+          <slot name="icon">${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">${this.#arrowIcon}</slot>
+        </span>
+        ${this.#actionLabel}
+        <span class="focus-indicator"></span>
+      </button>
+    `;
+	}
+};
+__decorate([property({ attribute: "title-text" })], AiArtifactCardComponent.prototype, "titleText", void 0);
+__decorate([property({ attribute: "subtitle-text" })], AiArtifactCardComponent.prototype, "subtitleText", void 0);
+__decorate([property({ attribute: "action-label" })], AiArtifactCardComponent.prototype, "actionLabel", void 0);
+__decorate([property({ attribute: "asset-id" })], AiArtifactCardComponent.prototype, "assetId", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], AiArtifactCardComponent.prototype, "active", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], AiArtifactCardComponent.prototype, "disabled", void 0);
+__decorate([state()], AiArtifactCardComponent.prototype, "_grouped", void 0);
+AiArtifactCardComponent = __decorate([customElement(AiArtifactCardComponentTagName)], AiArtifactCardComponent);
+//#endregion
+export { AI_ARTIFACT_CARD_COLLAPSED_ATTRIBUTE, AiArtifactCardComponent, AiArtifactCardComponentTagName };

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

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

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

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

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

@@ -1,137 +1,4 @@
-import { unsafeCSS, LitElement, html, nothing } from "lit";
-import { property, queryAssignedElements, customElement } from "lit/decorators.js";
-import { AI_ARTIFACT_CARD_COLLAPSED_ATTRIBUTE } from "../ai-artifact-card/ai-artifact-card.mjs";
-import styles from "./ai-artifact-card-group.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 _AiArtifactCardGroupComponent_instances, visibleCards_get, collapsedCount_get, overflowCount_get, _chevronDownIcon, _chevronUpIcon, syncCardVisibility_fn, handleSlotChange_fn, handleToggle_fn, toggle_get;
-const AiArtifactCardGroupComponentTagName = "forge-ai-artifact-card-group";
-const DEFAULT_VISIBLE_COUNT = 3;
-let AiArtifactCardGroupComponent = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _AiArtifactCardGroupComponent_instances);
-    this.visibleCount = DEFAULT_VISIBLE_COUNT;
-    this.expanded = false;
-    this.showMoreText = "{count} more";
-    this.showLessText = "Show less";
-    __privateAdd(this, _chevronDownIcon, html`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" aria-hidden="true">
-      <path
-        d="M4.5 6.75L9 11.25L13.5 6.75"
-        stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round" />
-    </svg>
-  `);
-    __privateAdd(this, _chevronUpIcon, html`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" aria-hidden="true">
-      <path
-        d="M13.5 11.25L9 6.75L4.5 11.25"
-        stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round" />
-    </svg>
-  `);
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    __privateMethod(this, _AiArtifactCardGroupComponent_instances, syncCardVisibility_fn).call(this);
-  }
-  render() {
-    return html`
-      <div class="artifact-card-group">
-        <div class="list" role="list">
-          <slot @slotchange=${__privateMethod(this, _AiArtifactCardGroupComponent_instances, handleSlotChange_fn)}></slot>
-        </div>
-        ${__privateGet(this, _AiArtifactCardGroupComponent_instances, toggle_get)}
-      </div>
-    `;
-  }
-};
-_AiArtifactCardGroupComponent_instances = /* @__PURE__ */ new WeakSet();
-visibleCards_get = function() {
-  return this._cards.filter((card) => !card.hidden);
-};
-collapsedCount_get = function() {
-  if (!Number.isFinite(this.visibleCount)) {
-    return DEFAULT_VISIBLE_COUNT;
-  }
-  return Math.max(1, Math.floor(this.visibleCount));
-};
-overflowCount_get = function() {
-  return Math.max(0, __privateGet(this, _AiArtifactCardGroupComponent_instances, visibleCards_get).length - __privateGet(this, _AiArtifactCardGroupComponent_instances, collapsedCount_get));
-};
-_chevronDownIcon = /* @__PURE__ */ new WeakMap();
-_chevronUpIcon = /* @__PURE__ */ new WeakMap();
-syncCardVisibility_fn = function() {
-  __privateGet(this, _AiArtifactCardGroupComponent_instances, visibleCards_get).forEach((card, index) => {
-    card.toggleAttribute(AI_ARTIFACT_CARD_COLLAPSED_ATTRIBUTE, !this.expanded && index >= __privateGet(this, _AiArtifactCardGroupComponent_instances, collapsedCount_get));
-  });
-};
-handleSlotChange_fn = function() {
-  this.requestUpdate();
-};
-handleToggle_fn = function() {
-  this.expanded = !this.expanded;
-  this.dispatchEvent(
-    new CustomEvent("forge-ai-artifact-card-group-toggle", {
-      detail: { expanded: this.expanded },
-      bubbles: true,
-      composed: true
-    })
-  );
-};
-toggle_get = function() {
-  if (__privateGet(this, _AiArtifactCardGroupComponent_instances, overflowCount_get) === 0) {
-    return nothing;
-  }
-  const label = this.expanded ? this.showLessText : this.showMoreText.replace("{count}", String(__privateGet(this, _AiArtifactCardGroupComponent_instances, overflowCount_get)));
-  return html`
-      <button class="toggle" type="button" aria-expanded=${this.expanded} @click=${__privateMethod(this, _AiArtifactCardGroupComponent_instances, handleToggle_fn)}>
-        ${this.expanded ? __privateGet(this, _chevronUpIcon) : __privateGet(this, _chevronDownIcon)}
-        <span>${label}</span>
-        <span class="focus-indicator"></span>
-      </button>
-    `;
-};
-AiArtifactCardGroupComponent.styles = unsafeCSS(styles);
-__decorateClass([
-  property({ type: Number, attribute: "visible-count" })
-], AiArtifactCardGroupComponent.prototype, "visibleCount", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], AiArtifactCardGroupComponent.prototype, "expanded", 2);
-__decorateClass([
-  property({ attribute: "show-more-text" })
-], AiArtifactCardGroupComponent.prototype, "showMoreText", 2);
-__decorateClass([
-  property({ attribute: "show-less-text" })
-], AiArtifactCardGroupComponent.prototype, "showLessText", 2);
-__decorateClass([
-  queryAssignedElements({ selector: "forge-ai-artifact-card", flatten: true })
-], AiArtifactCardGroupComponent.prototype, "_cards", 2);
-AiArtifactCardGroupComponent = __decorateClass([
-  customElement(AiArtifactCardGroupComponentTagName)
-], AiArtifactCardGroupComponent);
-export {
-  AiArtifactCardGroupComponent,
-  AiArtifactCardGroupComponentTagName
-};
+//#region src/lib/ai-artifact-card-group/ai-artifact-card-group.scss?inline
+var ai_artifact_card_group_default = "@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: block;\n}\n\n.artifact-card-group {\n  overflow: hidden;\n  border: 1px solid var(--forge-theme-outline, #e0e0e0);\n  border-radius: var(--forge-ai-artifact-card-group-border-radius, 12px);\n  background: var(--forge-theme-surface, #ffffff);\n}\n\n/*\n * Every row carries a top divider and the list is pulled up by one pixel so the first visible row's\n * divider hides under the group border, whichever row that is once cards are hidden or collapsed.\n */\n.list {\n  margin-top: -1px;\n}\n\n::slotted(*) {\n  border-top: 1px solid var(--forge-theme-outline, #e0e0e0);\n}\n\n/*\n * Rows meeting the group's rounded corners get its inner radius for their focus rings. The bottom row only\n * does when no toggle sits below it.\n */\n.list ::slotted(:nth-child(1 of :not([hidden], [data-collapsed]))) {\n  --_forge-ai-artifact-card-group-start-radius: calc(var(--forge-ai-artifact-card-group-border-radius, 12px) - 1px);\n}\n\n.artifact-card-group:not(:has(.toggle)) ::slotted(:nth-last-child(1 of :not([hidden], [data-collapsed]))) {\n  --_forge-ai-artifact-card-group-end-radius: calc(var(--forge-ai-artifact-card-group-border-radius, 12px) - 1px);\n}\n\n.toggle {\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  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--forge-spacing-xsmall, 8px);\n  width: 100%;\n  min-height: var(--forge-spacing-xxlarge, 48px);\n  padding: var(--forge-spacing-small, 12px);\n  border: none;\n  border-top: 1px solid var(--forge-theme-outline, #e0e0e0);\n  background: transparent;\n  color: var(--forge-theme-text-high, rgba(0, 0, 0, 0.87));\n  text-align: start;\n  cursor: pointer;\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.toggle::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.toggle:hover::before {\n  background-color: var(--_state-layer-hover-color);\n  opacity: var(--_state-layer-hover-opacity);\n}\n.toggle: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.toggle svg {\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n}\n\n.focus-indicator {\n  position: absolute;\n  display: none;\n}\n\n/* The toggle is always the bottom row, so its lower corners follow the group's inner radius */\n.toggle:focus-visible .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  display: block;\n  --forge-focus-indicator-shape-start-start: 0px;\n  --forge-focus-indicator-shape-start-end: 0px;\n  --forge-focus-indicator-shape-end-start: calc(var(--forge-ai-artifact-card-group-border-radius, 12px) - 1px);\n  --forge-focus-indicator-shape-end-end: calc(var(--forge-ai-artifact-card-group-border-radius, 12px) - 1px);\n}";
+//#endregion
+export { ai_artifact_card_group_default as default };

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

@@ -0,0 +1,100 @@
+import __decorate from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.mjs";
+import { AI_ARTIFACT_CARD_COLLAPSED_ATTRIBUTE } from "../ai-artifact-card/ai-artifact-card2.mjs";
+import ai_artifact_card_group_default from "./ai-artifact-card-group.mjs";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property, queryAssignedElements } from "lit/decorators.js";
+//#region src/lib/ai-artifact-card-group/ai-artifact-card-group.ts
+var AiArtifactCardGroupComponentTagName = "forge-ai-artifact-card-group";
+var DEFAULT_VISIBLE_COUNT = 3;
+var AiArtifactCardGroupComponent = class AiArtifactCardGroupComponent extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.visibleCount = DEFAULT_VISIBLE_COUNT;
+		this.expanded = false;
+		this.showMoreText = "{count} more";
+		this.showLessText = "Show less";
+		this.#chevronDownIcon = html`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+      <path d="M4.5 6.75L9 11.25L13.5 6.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+  `;
+		this.#chevronUpIcon = html`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+      <path d="M13.5 11.25L9 6.75L4.5 11.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+  `;
+	}
+	static {
+		this.styles = unsafeCSS(ai_artifact_card_group_default);
+	}
+	get #visibleCards() {
+		return this._cards.filter((card) => !card.hidden);
+	}
+	get #collapsedCount() {
+		if (!Number.isFinite(this.visibleCount)) return DEFAULT_VISIBLE_COUNT;
+		return Math.max(1, Math.floor(this.visibleCount));
+	}
+	get #overflowCount() {
+		return Math.max(0, this.#visibleCards.length - this.#collapsedCount);
+	}
+	#chevronDownIcon;
+	#chevronUpIcon;
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		this.#syncCardVisibility();
+	}
+	#syncCardVisibility() {
+		this.#visibleCards.forEach((card, index) => {
+			card.toggleAttribute(AI_ARTIFACT_CARD_COLLAPSED_ATTRIBUTE, !this.expanded && index >= this.#collapsedCount);
+		});
+	}
+	#handleSlotChange() {
+		this.requestUpdate();
+	}
+	#handleToggle() {
+		this.expanded = !this.expanded;
+		this.dispatchEvent(new CustomEvent("forge-ai-artifact-card-group-toggle", {
+			detail: { expanded: this.expanded },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	get #toggle() {
+		if (this.#overflowCount === 0) return nothing;
+		const label = this.expanded ? this.showLessText : this.showMoreText.replace("{count}", String(this.#overflowCount));
+		return html`
+      <button class="toggle" type="button" aria-expanded=${this.expanded} @click=${this.#handleToggle}>
+        ${this.expanded ? this.#chevronUpIcon : this.#chevronDownIcon}
+        <span>${label}</span>
+        <span class="focus-indicator"></span>
+      </button>
+    `;
+	}
+	render() {
+		return html`
+      <div class="artifact-card-group">
+        <div class="list" role="list">
+          <slot @slotchange=${this.#handleSlotChange}></slot>
+        </div>
+        ${this.#toggle}
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: Number,
+	attribute: "visible-count"
+})], AiArtifactCardGroupComponent.prototype, "visibleCount", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], AiArtifactCardGroupComponent.prototype, "expanded", void 0);
+__decorate([property({ attribute: "show-more-text" })], AiArtifactCardGroupComponent.prototype, "showMoreText", void 0);
+__decorate([property({ attribute: "show-less-text" })], AiArtifactCardGroupComponent.prototype, "showLessText", void 0);
+__decorate([queryAssignedElements({
+	selector: "forge-ai-artifact-card",
+	flatten: true
+})], AiArtifactCardGroupComponent.prototype, "_cards", void 0);
+AiArtifactCardGroupComponent = __decorate([customElement(AiArtifactCardGroupComponentTagName)], AiArtifactCardGroupComponent);
+//#endregion
+export { AiArtifactCardGroupComponent, AiArtifactCardGroupComponentTagName };

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

@@ -1 +1 @@
-export * from './ai-artifact-card-group';
+export * from './ai-artifact-card-group.js';

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

@@ -1,5 +1 @@
-import { AiArtifactCardGroupComponent, AiArtifactCardGroupComponentTagName } from "./ai-artifact-card-group.mjs";
-export {
-  AiArtifactCardGroupComponent,
-  AiArtifactCardGroupComponentTagName
-};
+export { AiArtifactCardGroupComponent, AiArtifactCardGroupComponentTagName } from "./ai-artifact-card-group2.mjs";

package/dist/ai-assistant-response/ai-assistant-response.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, TemplateResult, CSSResult } from 'lit';
-import { AssistantResponse, AnyToolDefinition } from '../ai-chatbot/types.js';
+import { AssistantResponse, AnyToolDefinition } from '../types/index.js';
 declare global {
     interface HTMLElementTagNameMap {
         'forge-ai-assistant-response': AiAssistantResponseComponent;
@@ -38,7 +38,6 @@ export declare class AiAssistantResponseComponent extends LitElement {
     enableReactions: boolean;
     debugMode: boolean;
     showThinking: boolean;
-    connectedCallback(): void;
     willUpdate(): void;
     render(): TemplateResult;
 }