@artooi/ag-ui-web-component 0.47.0 → 0.49.0

package/src/dom/ring_color.ts

@@ -25,6 +25,14 @@ const PACKAGE_ACCENT = "#4f46e5";
  * host that themes `--ag-ui-accent` on its page keeps the rings it has; the
  * ring token sits above both so a host can keep the ring apart from the accent.
  *
+ * Only the chat's own accent is adjusted, because it follows the widget's
+ * scheme rather than the page's: a dark widget's near-white accent on a light
+ * page all but disappears. It is held to 3:1 against the surface behind the
+ * target (see {@link surfaceBehind}): the accent as resolved if it holds, else
+ * the other half of the chat's light-dark pair, else the accent stepped toward
+ * black or white. Every value above it is a choice someone made, and is drawn
+ * as given.
+ *
  * `chat` defaults to the most recently connected `<ag-ui-chat>`, the common
  * page with one widget. A page with two passes the one the ring speaks for.
  */
@@ -42,8 +50,130 @@ export function ringColor(target: HTMLElement, chat?: HTMLElement): string {
   if (accent !== "") {
     return accent;
   }
-  const chatAccent = owner === null ? "" : resolveOn(owner, CHAT_ACCENT);
-  return chatAccent === "" ? PACKAGE_ACCENT : chatAccent;
+  if (owner === null) {
+    return PACKAGE_ACCENT;
+  }
+  const chatAccent = resolveOn(owner, CHAT_ACCENT);
+  return chatAccent === "" ? PACKAGE_ACCENT : legible(owner, chatAccent, target);
+}
+
+/** The contrast a ring needs against what it is drawn on (WCAG 2.4.13). */
+const RING_CONTRAST = 3;
+
+/** How far each step moves a failing accent toward black or white. */
+const STEP = 0.1;
+
+type Rgba = readonly [number, number, number, number];
+
+/**
+ * `accent`, or the nearest variant of it that holds {@link RING_CONTRAST}
+ * against the surface behind `target`.
+ *
+ * Colours are compared as sRGB bytes painted onto a one-pixel canvas, the one
+ * reading that turns a resolved color-mix() or oklch() into numbers. Where
+ * there is no 2d context to paint on, nothing can be measured, and the accent
+ * is drawn as it was.
+ */
+function legible(chat: HTMLElement, accent: string, target: HTMLElement): string {
+  const paint = document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+  if (paint === null) {
+    return accent;
+  }
+  const bytes = (color: string): Rgba => {
+    paint.clearRect(0, 0, 1, 1);
+    paint.fillStyle = "rgb(0 0 0 / 0)";
+    paint.fillStyle = color;
+    paint.fillRect(0, 0, 1, 1);
+    const [r = 0, g = 0, b = 0, a = 0] = paint.getImageData(0, 0, 1, 1).data;
+    return [r, g, b, a / 255];
+  };
+  const surface = surfaceBehind(target, bytes);
+  const holds = (color: Rgba): boolean => contrast(over(color, surface), surface) >= RING_CONTRAST;
+  const own = [accent, resolveOn(chat, CHAT_ACCENT, "light"), resolveOn(chat, CHAT_ACCENT, "dark")];
+  const fit = own.find((candidate) => holds(bytes(candidate)));
+  if (fit !== undefined) {
+    return fit;
+  }
+  // Black or white, whichever the surface sets off better, holds at least
+  // 4.5:1 against any surface, so the walk always ends by the last step.
+  const from = over(bytes(accent), surface);
+  const black: Rgba = [0, 0, 0, 1];
+  const white: Rgba = [255, 255, 255, 1];
+  const toward = contrast(black, surface) > contrast(white, surface) ? black : white;
+  let step = 1;
+  while (!holds(mix(from, toward, step * STEP))) {
+    step += 1;
+  }
+  const [r, g, b] = mix(from, toward, step * STEP);
+  return `rgb(${r}, ${g}, ${b})`;
+}
+
+/**
+ * The colour of the surface a ring around `target` is drawn on, as opaque
+ * sRGB bytes.
+ *
+ * The ring sits outside the target's border box (the flash outline is offset
+ * from it, the overlay leaves a gap), so the target's own fill is not under
+ * it: a white field on a dark page is ringed on the dark page. The surface is
+ * every background from the target's parent up, composited until one is
+ * opaque, over the page canvas, which follows the root's colour scheme. A
+ * background image is not read; its colour beneath is.
+ */
+function surfaceBehind(target: HTMLElement, bytes: (color: string) => Rgba): Rgba {
+  const layers: Rgba[] = [];
+  for (let el = parentOf(target); el !== null; el = parentOf(el)) {
+    const layer = bytes(window.getComputedStyle(el).backgroundColor);
+    layers.push(layer);
+    if (layer[3] === 1) {
+      break;
+    }
+  }
+  const probe = document.createElement("span");
+  probe.hidden = true;
+  probe.style.color = "Canvas";
+  document.documentElement.appendChild(probe);
+  let surface = bytes(window.getComputedStyle(probe).color);
+  probe.remove();
+  for (const layer of layers.reverse()) {
+    surface = over(layer, surface);
+  }
+  return surface;
+}
+
+/** The element above `el`, crossing out of a shadow root to its host. */
+function parentOf(el: Element): Element | null {
+  if (el.parentElement !== null) {
+    return el.parentElement;
+  }
+  const root = el.getRootNode();
+  return root instanceof ShadowRoot ? root.host : null;
+}
+
+/** `top` painted over the opaque `under`. */
+function over(top: Rgba, under: Rgba): Rgba {
+  return mix(under, top, top[3]);
+}
+
+/** `from` moved `share` of the way to `to`, as opaque bytes. */
+function mix(from: Rgba, to: Rgba, share: number): Rgba {
+  const channel = (index: 0 | 1 | 2): number =>
+    Math.round(from[index] + (to[index] - from[index]) * share);
+  return [channel(0), channel(1), channel(2), 1];
+}
+
+/** WCAG relative luminance of opaque sRGB bytes. */
+function luminance([r, g, b]: Rgba): number {
+  const linear = (channel: number): number => {
+    const c = channel / 255;
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);
+}
+
+/** WCAG contrast ratio between two opaque colours. */
+function contrast(a: Rgba, b: Rgba): number {
+  const [la, lb] = [luminance(a), luminance(b)];
+  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
 }
 
 function readToken(el: HTMLElement, name: string): string {
@@ -62,9 +192,11 @@ function readToken(el: HTMLElement, name: string): string {
  * scheme, and its computed `color` is the resolved value.
  *
  * An element with no open shadow root (a host passing something other than a
- * chat) is read as it is, unresolved; that is the best it offers.
+ * chat) is read as it is, unresolved; that is the best it offers. `scheme`
+ * forces one half of the pair, which is how a ring finds the chat's other
+ * accent when its own scheme's is too faint against the page.
  */
-function resolveOn(chat: HTMLElement, name: string): string {
+function resolveOn(chat: HTMLElement, name: string, scheme?: "light" | "dark"): string {
   const value = readToken(chat, name);
   const root = chat.shadowRoot;
   if (value === "" || root === null) {
@@ -72,6 +204,11 @@ function resolveOn(chat: HTMLElement, name: string): string {
   }
   const probe = document.createElement("span");
   probe.hidden = true;
+  // A scheme named here picks that half of a light-dark() pair instead of
+  // the one the chat's own scheme picks.
+  if (scheme !== undefined) {
+    probe.style.colorScheme = scheme;
+  }
   probe.style.color = value;
   // An unparseable value leaves the declaration empty, and the probe would
   // then report the colour it inherits instead of saying it has none.

package/src/index.ts

@@ -2,6 +2,7 @@
 
 export {
   ATTACHMENT_EVENT,
+  BAR_HEIGHT_EVENT,
   CHART_ACTIVITY_TYPE,
   COMPACTION_ACTIVITY_TYPE,
   CUSTOM_AGENT_EVENT,
@@ -21,7 +22,9 @@ export {
   TOGGLE_EVENT,
   TOOL_CALL_STATUS,
   TOOL_DISPLAY,
+  TOOL_GROUP_DISPLAY,
   TOOL_OUTCOME,
+  type ToolGroupDisplayMode,
   UNREAD_EVENT,
   X_CONFIRM_KEY,
   X_DESTRUCTIVE_KEY,
@@ -58,6 +61,7 @@ export {
 } from "./core/create_http_agent.js";
 export { defineAgUiChat } from "./core/define_ag_ui_chat.js";
 export type { AttachmentsDetail } from "./core/events/attachments_detail.js";
+export type { BarHeightDetail } from "./core/events/bar_height_detail.js";
 export type { CustomAgentDetail } from "./core/events/custom_agent_detail.js";
 export type { FeedbackDetail } from "./core/events/feedback_detail.js";
 export type { InvalidateDetail } from "./core/events/invalidate_detail.js";

package/src/tools/chat_surface_tools.ts

@@ -1,4 +1,5 @@
 import { X_SUMMARY_KEY } from "../constants.js";
+import type { CollapseTarget } from "../ui/placement/surface_for.js";
 import type { ClientTool } from "./client_tool_registry.js";
 
 /** Every corner the panel can be sent to, in the order the schema states them. */
@@ -11,7 +12,13 @@ export type ChatCorner = (typeof CHAT_CORNERS)[number];
 export interface ChatSurfaceReport {
   /** The placement in force, or `null` when the host set none. */
   readonly placement: string | null;
-  /** Whether the panel is currently at its launcher. */
+  /**
+   * What the panel collapses to: `launcher`, `rail`, `header`, `bar` (the
+   * bottom bar it rises from), `none` (hidden, brought back by the host's own
+   * control), or `null` when it cannot collapse.
+   */
+  readonly collapseTo: CollapseTarget;
+  /** Whether the panel is currently collapsed. */
   readonly collapsed: boolean;
   /** Whether this placement has a collapsed state at all. */
   readonly collapsible: boolean;
@@ -166,9 +173,10 @@ export function createChatSurfaceTools(surface: ChatSurface): ClientTool[] {
     {
       name: "minimise_chat",
       description:
-        "Collapse your own panel to its launcher, so the user can see the whole page. " +
-        "The launcher stays visible and reopens it. Answers `minimised: false` when the " +
-        "placement has no collapsed state, which is the case for a full-page chat.",
+        "Collapse your own panel, so the user can see the whole page. The user reopens " +
+        "it from where it collapsed to (a launcher, a rail, a bottom bar or the page's " +
+        "own control). Answers `minimised: false` when the placement has no collapsed " +
+        "state, which is the case for a full-page chat.",
       parameters: {
         type: "object",
         properties: {},
@@ -180,7 +188,7 @@ export function createChatSurfaceTools(surface: ChatSurface): ClientTool[] {
         if (!report.collapsible) {
           return {
             minimised: false,
-            reason: "this placement has no collapsed state, so there is no launcher to return to",
+            reason: "this placement has no collapsed state, so there is nothing to minimise to",
           };
         }
         surface.setCollapsed(true, { announce: true });

package/src/ui/history/conversation_history.ts

@@ -216,6 +216,8 @@ export class ConversationHistory {
    * Also what tells a pick refused for a load from one refused for a run.
    */
   #loading: (() => void) | null = null;
+  /** The thread switch under way and the promise that settles it, or `null`. */
+  #switching: { readonly threadId: string; readonly done: Promise<void> } | null = null;
 
   constructor(host: ConversationHistoryHost) {
     this.#host = host;
@@ -331,17 +333,56 @@ export class ConversationHistory {
     this.#host.checkpoints.open();
   }
 
-  /** Switch the active conversation to an existing thread and replay it. */
-  async switchThread(threadId: string): Promise<void> {
+  /**
+   * Switch the active conversation to an existing thread and replay it.
+   *
+   * A call for the thread a switch is already loading is handed that switch's
+   * own promise, so it settles when the thread is drawn rather than at once,
+   * before the replay.
+   *
+   * A store that rejects the load leaves the element on the thread it was on:
+   * the switch has already cleared the transcript, so it points back at the
+   * old thread and draws it again, saying nothing, and then rejects with the
+   * store's error. Left as it was, the element named a thread it was not
+   * showing and never reported it.
+   */
+  switchThread(threadId: string): Promise<void> {
     if (threadId === this.#threadId) {
-      return;
+      return this.#switching?.threadId === threadId ? this.#switching.done : Promise.resolve();
     }
+    const previous = this.#threadId;
+    const done = this.#switchTo(threadId, previous).finally(() => {
+      if (this.#switching === entry) {
+        this.#switching = null;
+      }
+    });
+    const entry = { threadId, done };
+    this.#switching = entry;
+    return done;
+  }
+
+  async #switchTo(threadId: string, previous: string): Promise<void> {
     this.#host.cancelRun();
     this.#host.resetState();
     this.#host.conversationStore().setActiveThread(threadId);
     this.#threadId = threadId;
     this.#host.setRunning(false);
-    await this.rehydrate("switch");
+    try {
+      await this.rehydrate("switch");
+    } catch (error) {
+      // Only while this switch is still the one on screen: a newer switch, a
+      // new chat or a delete has moved the thread on, and undoing that would
+      // put the old one back over it.
+      if (this.#threadId === threadId) {
+        this.#threadId = previous;
+        this.#host.conversationStore().setActiveThread(previous);
+        // Drawn again without a word: the thread on screen is the one the last
+        // event reported, so there is nothing to tell a host. A store that
+        // cannot answer for it either leaves the screen as it is.
+        await this.rehydrate(null).catch(() => undefined);
+      }
+      throw error;
+    }
   }
 
   /** Rename a thread, then reload the list that shows its title. */
@@ -638,9 +679,10 @@ export class ConversationHistory {
    * instead; see `#forgetStopped`.
    *
    * `reason` is what the thread event this restore ends with reports as why
-   * the conversation changed. A restore that is stopped reports nothing.
+   * the conversation changed. A restore that is stopped reports nothing, and
+   * neither does one given `null`, which draws the thread already reported.
    */
-  async rehydrate(reason: ThreadDetail["reason"]): Promise<void> {
+  async rehydrate(reason: ThreadDetail["reason"] | null): Promise<void> {
     // Claimed before awaiting, and checked by `#restoring` wherever the restore
     // has waited or run host code. With a slow remote store, picking thread B
     // then C interleaved both replays into one transcript, and New chat drew
@@ -745,7 +787,9 @@ export class ConversationHistory {
       // still current: one that was stopped returned above, so two quick
       // switches report the second alone. Before a resume, because the resume
       // is a run, and waiting for it reported the change a whole answer late.
-      this.#host.threadChanged(threadId, reason);
+      if (reason !== null) {
+        this.#host.threadChanged(threadId, reason);
+      }
       if (checkpoint !== null) {
         // A listener is host code, and can stop the restore as a replayed
         // renderer can. Resuming then answered the call into the conversation

package/src/ui/placement/collapse_styles.ts

@@ -1,5 +1,6 @@
-// Collapsing and expanding: the animation toward the launcher, and the
-// in-flow and page placements that collapse differently or not at all.
+// Collapsing and expanding: the animation toward the launcher, the in-flow
+// and page placements that collapse differently or not at all, and the two
+// collapse-to targets: the bottom bar, and the host's own (hidden here).
 export const COLLAPSE_STYLES: string = `
 /* ── Collapse ───────────────────────────────────────────────────────────────
    Collapsing shrinks the widget to the round floating launcher: the panel
@@ -101,12 +102,18 @@ export const COLLAPSE_STYLES: string = `
 :host([collapsed][placement="embedded"]) .messages-wrap,
 :host([collapsed][placement="embedded"]) .messages,
 :host([collapsed][placement="embedded"]) .input-row,
+:host([collapsed][placement="embedded"]) slot[name="above-composer"],
 :host([collapsed][placement="embedded"]) .skill-chips,
 :host([collapsed][placement="embedded"]) .skill-palette,
 :host([collapsed][placement="embedded"]) .skill-hint {
   display: none;
 }
 
+/* The above-composer slot is in the list above because it is the host's content
+   against the composer: a bare slot has no box of its own, so hiding the input
+   row alone left the slotted row showing under the header bar. Its sibling slot
+   below the composer is a footer and is left to the host. */
+
 /* The page placement has no collapsed state, so it offers no control for one.
    A dedicated route has no "away" to go to: shrinking it left a strip of
    application chrome fixed over a route that no longer had an owner, and this
@@ -134,4 +141,243 @@ export const COLLAPSE_STYLES: string = `
   transform: none;
   visibility: visible;
 }
+
+/* ── Bottom bar (collapse-to="bar") ──────────────────────────────────────────
+   The round launcher drawn as a strip along the bottom edge: the title, the
+   unread badge and a running mark, with a history button beside it. The
+   wrapper draws no box anywhere else, so the launcher lays out against the
+   host as it always has; under the bar it is fixed to the bottom of the
+   viewport, outside the host's box, which sits where the panel opens.
+
+   Here rather than with the launcher because it restyles the launcher's
+   collapsed and pressed states, which this module follows in the cascade.
+   The strip stays drawn while the panel is open on a wide viewport, as the
+   way to minimise it; the phone block hides it then. */
+.dock-bar {
+  display: contents;
+}
+
+.bar-history {
+  display: none;
+}
+
+:host([data-collapsed-to="bar"]) .dock-bar {
+  position: fixed;
+  inset: auto var(--_viewport-inset-right) var(--_viewport-inset-bottom) var(--_viewport-inset-left);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  box-sizing: border-box;
+  min-height: 40px;
+  padding: 4px 8px;
+  border-top: 1px solid var(--_border);
+  background: var(--_bg);
+  color: var(--_fg);
+  pointer-events: auto;
+}
+
+/* A left-hand chat keeps its side: its controls and its panel at the left end. */
+:host([data-collapsed-to="bar"][placement="bottom-left"]) .dock-bar {
+  justify-content: flex-start;
+}
+
+/* The launcher as the strip's title button. Its resting state hides it behind
+   an open panel; the bar keeps it on screen, so every part of that state is
+   restated, and the hover and press scales are cancelled at the weight of the
+   rules that set them. The title truncates rather than taking a fixed width,
+   leaving room beside it for whatever a later release adds to the row. */
+:host([data-collapsed-to="bar"]) .launcher {
+  position: static;
+  inset: auto;
+  flex: 0 1 auto;
+  justify-content: flex-start;
+  gap: 8px;
+  width: auto;
+  min-width: 0;
+  max-width: 100%;
+  height: auto;
+  min-height: 32px;
+  padding: 4px 10px;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--_fg);
+  box-shadow: none;
+  touch-action: manipulation;
+  opacity: 1;
+  transform: none;
+  visibility: visible;
+}
+
+:host([data-collapsed-to="bar"]) .launcher:hover {
+  background: var(--_wash);
+}
+
+/* Bare at rest, like the history button beside it. The themes frame the
+   round launcher with a border or a shadow at the weight of the rule above
+   and later in the cascade, so the child combinator on the bar is there for
+   weight, not scope: the launcher is always the bar's direct child. */
+:host([data-collapsed-to="bar"]) .dock-bar > .launcher {
+  border: 0;
+  box-shadow: none;
+}
+
+:host([data-collapsed-to="bar"][collapsed]) .launcher:hover,
+:host([data-collapsed-to="bar"][collapsed]) .launcher:active {
+  transform: none;
+}
+
+:host([data-collapsed-to="bar"]) .launcher .icon-holder {
+  flex: none;
+  width: 18px;
+  height: 18px;
+}
+
+:host([data-collapsed-to="bar"]) .rail-label {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 0.9em;
+  font-weight: 600;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+:host([data-collapsed-to="bar"]) .launcher-badge {
+  position: static;
+  flex: none;
+  box-shadow: none;
+}
+
+/* The running mark: the element already reflects a run as data-running, so
+   the bar shows one without a state of its own. */
+:host([data-collapsed-to="bar"][data-running]) .launcher::after {
+  content: "";
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--_accent);
+  animation: ag-ui-dock-running 1.2s ease-in-out infinite;
+}
+
+@keyframes ag-ui-dock-running {
+  50% {
+    opacity: 0.35;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host([data-collapsed-to="bar"][data-running]) .launcher::after {
+    animation: none;
+  }
+}
+
+:host([data-collapsed-to="bar"]) .bar-history {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--_muted);
+  font: inherit;
+  cursor: pointer;
+}
+
+:host([data-collapsed-to="bar"]) .bar-history:hover {
+  background: var(--_wash);
+  color: var(--_fg);
+}
+
+/* Both declare a display of their own, so each needs its own hidden rule. */
+:host([data-collapsed-to]) .dock-bar[hidden],
+:host([data-collapsed-to]) .bar-history[hidden] {
+  display: none;
+}
+
+/* History from the bar: the panel's own drawer, moved beside the bar while
+   the panel is away, drawn as a popover standing on the bar's end. There is
+   no backdrop; a press outside the bar closes it, as Escape does.
+
+   Its outer edge keeps the panel's gutter, so the popover and the panel line
+   up on the side they share. The bar is already inset by the host's reserved
+   edges, so the gutter alone is the whole offset from it, and the width cap
+   leaves the gutter free on both sides. A phone keeps a narrow margin
+   instead, in the block below: the panel there is the whole screen, so there
+   is no edge to line up with. */
+:host([data-collapsed-to="bar"]) .dock-bar > .drawer {
+  inset: auto var(--_edge-gutter) calc(100% + 8px) auto;
+  width: min(320px, calc(var(--_viewport-width) - 2 * var(--_edge-gutter)));
+  height: min(440px, calc(var(--_viewport-height) - var(--_dock-bottom, 0px) - 16px));
+  border-radius: var(--_panel-radius);
+  box-shadow: var(--_shadow);
+  overflow: hidden;
+}
+
+:host([data-collapsed-to="bar"][placement="bottom-left"]) .dock-bar > .drawer {
+  inset: auto auto calc(100% + 8px) var(--_edge-gutter);
+}
+
+@media (max-width: 600px) {
+  :host([data-collapsed-to="bar"]:not([data-small-viewport="off"])) .dock-bar > .drawer {
+    inset: auto 8px calc(100% + 8px) auto;
+    width: min(320px, calc(100vw - 16px));
+  }
+
+  :host([data-collapsed-to="bar"][placement="bottom-left"]:not([data-small-viewport="off"])) .dock-bar > .drawer {
+    inset: auto auto calc(100% + 8px) 8px;
+  }
+}
+
+:host([data-collapsed-to="bar"]) .dock-bar > .drawer .drawer-backdrop {
+  display: none;
+}
+
+/* The popover closes in one step. The in-panel drawer slides its panel out
+   and holds the overlay's visibility until the slide ends; here the overlay
+   is the popover's own box, rounded and clipped, so the slide moved the list
+   inside a box that stayed put (read as a shrink) and the box went only once
+   the slide had finished. This outweighs the drawer's own hidden rule, so the
+   box hides at once, and whatever the list inside does is out of sight. The
+   way in needs no rule: the drawer is moved into the bar as it opens, and a
+   moved element starts no transition. Nothing is left for reduced motion. */
+:host([data-collapsed-to="bar"]) .dock-bar > .drawer {
+  transition: none;
+}
+
+/* Border-box, so the list's own border sits inside the popover's clipped box
+   rather than 2px past its bottom edge. */
+:host([data-collapsed-to="bar"]) .dock-bar > .drawer .drawer-panel {
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid var(--_border);
+  border-radius: inherit;
+  box-shadow: none;
+}
+
+/* ── The host's own bar (collapse-to="none") ─────────────────────────────────
+   Collapsed is hidden: no launcher, no rail, no header bar. The host's control
+   calls the public API, and the panel rises from its anchor (the dock module)
+   or from the placement's corner. Each placement's own collapsed rule is
+   overridden at its weight or above, later in the cascade. */
+:host([data-collapsed-to="none"][collapsed]) {
+  pointer-events: none;
+}
+
+:host([data-collapsed-to="none"][collapsed]) .launcher {
+  display: none;
+}
+
+:host([data-collapsed-to="none"][collapsed][placement="sidebar"]) {
+  width: 0;
+}
+
+:host([data-collapsed-to="none"][collapsed][placement="embedded"]) {
+  display: none;
+}
 `;