@cplieger/web-terminal-ui 3.5.0 → 4.0.0

package/README.md

@@ -49,11 +49,26 @@ pins the engine version explicitly.
 
 ## Usage
 
-Serve the bundled CSS (`css/` concatenated per `css/MANIFEST` into the
-`style.css` your page links) plus a minimal HTML page that has one empty
-container element for the terminal, then call `createTerminal(root, { features })`
-from your entry module. Feature bundles (presets) live at the `./presets`
-sub-path:
+Serve a CSS bundle matching how you embed the terminal, plus a minimal HTML
+page that has one empty container element, then call
+`createTerminal(root, { features })` from your entry module.
+
+**Full-page host** (the terminal IS the page — `web-terminal-server`,
+`web-terminal-kiro`): concatenate `css/MANIFEST` into the `style.css` your page
+links. That reference bundle is `css/page.css` (the page kit: `html/body`
+reset + the terminal web font's `@font-face`, expecting the font files at
+`/vendor/fonts/`) plus the complete component set.
+
+**Embedder** (the terminal lives inside your app's layout — a panel, a pane):
+concatenate the per-preset manifest matching your composition instead —
+`css/MANIFEST.single`, `css/MANIFEST.touch`, or `css/MANIFEST.tabbed`. These
+contain ONLY root-scoped component styles: no page reset, no fonts, no
+document-level rules, nothing to quarantine. Pass `layout: "container"` so the
+terminal fills (and positions its chrome against) your container element
+instead of the viewport.
+
+Feature bundles (presets) live at the `./presets` sub-path, with per-preset
+entry modules beside it:
 
 ```html
 <div id="terminal"></div>
@@ -81,14 +96,22 @@ sub-path:
 
 `createTerminal(root, opts?)` builds the entire terminal subtree (the kernel
 plus every feature's chrome) inside `root` itself — there is no element-id
-contract for the host page to reproduce. Call it exactly once; the engine's
+contract for the host page to reproduce, and every style and CSS custom
+property is scoped to the `wt-root` class it stamps on your element (removed
+again by `destroy()`). Call it exactly once; the engine's
 render/connection/scroll modules are single-instance per page (tabs multiplex
 sessions over the one kernel). `scaffold/index.html` is a complete reference page
 to copy and adapt.
 
-Four presets are provided (import from `@cplieger/web-terminal-ui/presets`); each
-is a plain feature-array factory, so you can spread and edit it, or hand-pick
-individual features instead:
+Four presets are provided; each is a plain feature-array factory, so you can
+spread and edit it. Import the barrel (`@cplieger/web-terminal-ui/presets`) for
+convenience, or a per-preset entry module for the minimal delivered import
+graph — `…/presets/single`, `…/presets/touch`, `…/presets/tabbed`,
+`…/presets/agent-tabbed` (the barrel statically reaches every feature; the
+touch entry, for example, never imports the tabs module). Individual features
+are importable from `…/features/<name>` (`clipboard`, `context-menu`,
+`scroll-to-bottom`, `predictive-echo`, `connection-banner`, `mobile-toolbar`,
+`tabs`, `activity-monitor`, `animations`) for hand-picked compositions:
 
 - `presetSingle()` — single-pane desktop UI (context menu, clipboard,
   scroll-to-bottom, predictive echo, connection banner).
@@ -110,25 +133,31 @@ individual features instead:
 
 ### Options
 
-| Option      | Default                    | Purpose                                                                                                                                                               |
-| ----------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `features`  | _(none — bare kernel)_     | The feature list. Omitted or empty builds only the terminal (no chrome). Use a preset from `./presets` or a hand-picked array.                                        |
-| `wsPath`    | `"/ws"`                    | WebSocket endpoint path the engine connects to.                                                                                                                       |
-| `fontReady` | `'14px "MonaspiceNe NFM"'` | CSS font shorthand awaited before the first resize, so the server is sized against the real web font's cell metrics rather than a fallback.                           |
-| `loading`   | _(none)_                   | A pre-JS loading overlay element (kept in your served HTML so it paints before this module loads); it is faded out and removed once the first frame renders.          |
-| `theme`     | _(none)_                   | Theme overrides (CSS custom properties on the terminal root): `--accent`, `--tab-hover-bg`, `--tab-active-bg`, `--tab-active-fg`. The library ships neutral defaults. |
+| Option      | Default                    | Purpose                                                                                                                                                                                                                                        |
+| ----------- | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `features`  | _(none — bare kernel)_     | The feature list. Omitted or empty builds only the terminal (no chrome). Use a preset from `./presets` or a hand-picked array.                                                                                                                 |
+| `layout`    | `"viewport"`               | How the terminal claims space. `"viewport"`: the root becomes a fixed full-viewport box (the full-page product). `"container"`: the root fills your container element, which becomes the styling and positioning boundary (the embedded case). |
+| `wsPath`    | `"/ws"`                    | WebSocket endpoint path the engine connects to.                                                                                                                                                                                                |
+| `fontReady` | `'14px "MonaspiceNe NFM"'` | CSS font shorthand awaited before the first resize, so the server is sized against the real web font's cell metrics rather than a fallback.                                                                                                    |
+| `loading`   | _(none)_                   | A pre-JS loading overlay element (kept in your served HTML so it paints before this module loads); it is faded out and removed once the first frame renders.                                                                                   |
+| `theme`     | _(none)_                   | Theme overrides (CSS custom properties on the terminal root): `--accent`, `--tab-bg`, `--tab-hover-bg`, `--tab-active-bg`, `--tab-active-fg`, `--tab-active-border`. The library ships neutral defaults.                                       |
 
 `createTerminal()` returns a handle: `focus()` re-focuses the terminal input
-(and opens the soft keyboard on touch), and `destroy()` tears every feature down
-and releases the kernel.
+(and opens the soft keyboard on touch); `send(bytes)` sends bytes to the active
+session through the kernel's sanitizing input funnel (the supported host path
+for a "type this command" affordance); `reset()` drops the local scrollback and
+screen without injecting keystrokes (send a redraw keystroke yourself if you
+want one — e.g. Ctrl+L); and `destroy()` tears every feature down and releases
+the kernel.
 
 ## What ships
 
-| Path                     | Purpose                                                                                                         |
-| ------------------------ | --------------------------------------------------------------------------------------------------------------- |
-| `src/**/*.ts`            | The UI modules: the kernel (`kernel/`), opt-in features (`features/`), presets, IME, predictive echo, viewport. |
-| `css/*.css` + `MANIFEST` | The default theme + layout; concatenate in MANIFEST order.                                                      |
-| `scaffold/index.html`    | A reference HTML page: `<head>` + one empty root element + importmap.                                           |
+| Path                    | Purpose                                                                                                                                                                                                                   |
+| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `src/**/*.ts`           | The UI modules: the kernel (`kernel/`), opt-in features (`features/`), per-preset entries (`presets/`), IME, predictive echo, viewport.                                                                                   |
+| `css/*.css` + manifests | Root-scoped component styles. `MANIFEST` = the reference full-page bundle (`page.css` + the tabbed set); `MANIFEST.single/touch/tabbed` = component-only per-preset bundles for embedders. Concatenate in manifest order. |
+| `css/page.css`          | The page kit (full-page hosts only): `html/body` reset + the terminal web font's `@font-face`.                                                                                                                            |
+| `scaffold/index.html`   | A reference full-page HTML host: `<head>` + one empty root element + importmap.                                                                                                                                           |
 
 ## Related projects
 

package/css/00-tokens.css

@@ -1,5 +1,11 @@
-/* ===== Tokens ===== */
-:root {
+/* ===== Tokens =====
+   Every token defaults on .wt-root (the class createTerminal stamps on the
+   consumer's root element), never on the document :root: the terminal subtree
+   inherits them, the host page never does, and a host page's identically-named
+   custom properties never reach the terminal (the class definition wins for the
+   subtree). The `theme` option overrides them as inline style on the same
+   element — the consumer contract is unchanged. */
+.wt-root {
   interpolate-size: allow-keywords;
 
   --bg: oklch(0% 0 0deg);

package/css/01-scope.css

@@ -0,0 +1,56 @@
+/* ===== Component scope + layout modes =====
+   Everything here is scoped under .wt-root — the class createTerminal stamps on
+   the consumer's root element. The library never styles the host document: page
+   concerns (html/body reset, fonts, viewport meta behavior) live in page.css,
+   served only by full-page hosts. This file owns the boundary itself: the
+   scoped box-sizing + font-smoothing baseline, the two layout modes, and the
+   scoped reduced-motion kill-switch. */
+
+/* Layout mode: how the root claims space (kernel stamps exactly one).
+   wt-viewport — the root IS the page surface: a fixed full-viewport box (the
+   full-page product; geometrically identical to the pre-v4 fixed-inset .term).
+   wt-container — the root fills its parent, which becomes the boundary: the
+   embedded case. overflow: clip keeps absolute chrome (menus, banners, the
+   switcher) inside the box, so an embedder needs no containment workarounds. */
+.wt-root.wt-viewport {
+  position: fixed;
+  inset: 0;
+}
+
+.wt-root.wt-container {
+  position: relative;
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: clip;
+}
+
+.wt-root,
+.wt-root *,
+.wt-root *::before,
+.wt-root *::after {
+  box-sizing: border-box;
+}
+
+.wt-root {
+  -webkit-font-smoothing: antialiased;
+}
+
+/* stylelint-disable declaration-no-important, time-min-milliseconds --
+   Canonical prefers-reduced-motion override. !important and near-zero
+   durations are required to forcibly defeat any animation/transition rule
+   regardless of specificity, which is the whole point of this a11y reset.
+   Scoped to the terminal subtree: the host page's own motion policy is the
+   host's business (pre-v4 this hit `*` and silently flattened the embedding
+   app's animations). */
+@media (prefers-reduced-motion: reduce) {
+  .wt-root,
+  .wt-root *,
+  .wt-root *::before,
+  .wt-root *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+/* stylelint-enable declaration-no-important, time-min-milliseconds */

package/css/{02-app.css → 02-terminal.css}

@@ -1,6 +1,11 @@
 /* ===== Terminal ===== */
-.term {
-  position: fixed;
+:where(.wt-root) .term {
+  /* Absolute against .wt-root (the positioning boundary in BOTH layout modes):
+     in wt-viewport the root is a fixed full-viewport box, so this is
+     geometrically identical to the pre-v4 `position: fixed`; in wt-container it
+     fills the embedder's panel. viewport.ts still pins top/bottom inline to
+     track the visual viewport around the soft keyboard. */
+  position: absolute;
   inset: 0;
   overflow: hidden auto;
   /* The scroll controller (vterm scroll.ts) is the single owner of
@@ -27,7 +32,7 @@
   color: var(--text);
 }
 
-.term-row {
+:where(.wt-root) .term-row {
   white-space: pre;
   min-height: 17px;
   font-variant-ligatures: none;
@@ -48,7 +53,7 @@
      cell tracks the column on every flush. */
 }
 
-.term-row:empty::after {
+:where(.wt-root) .term-row:empty::after {
   content: "\00a0";
 }
 
@@ -56,7 +61,7 @@
    as the first row when history older than the buffer holds was evicted —
    client-side cap or a server-reported resume gap). A quiet, centered,
    non-selectable divider so the user knows scrollback doesn't go further up. */
-.term-trim-marker {
+:where(.wt-root) .term-trim-marker {
   color: color-mix(in oklch, var(--text) 60%, transparent);
   font-size: 0.6875rem;
   text-align: center;
@@ -65,7 +70,7 @@
   font-family: var(--font-ui);
 }
 
-.term-input {
+:where(.wt-root) .term-input {
   /* The hidden keyboard target. position:absolute (NOT fixed) so it lives in
      the terminal's scroll/content coordinate space alongside .composition-view
      and .pred-cursor: composition.positionCompositionView() moves it to the
@@ -94,7 +99,7 @@
   font-size: 16px;
 }
 
-.term-output {
+:where(.wt-root) .term-output {
   position: relative;
   outline: none;
 
@@ -128,7 +133,7 @@
    so the candidate popup tracks what the user is typing.
    Visibility is gated by the `.active` class so empty state doesn't
    render a phantom box on top of the cursor. */
-.composition-view {
+:where(.wt-root) .composition-view {
   position: absolute;
   pointer-events: none;
   background: var(--surface);
@@ -143,7 +148,7 @@
   display: none;
 }
 
-.composition-view.active {
+:where(.wt-root) .composition-view.active {
   display: block;
 }
 
@@ -153,7 +158,7 @@
    cursor (predict.ts deactivates on bail and the renderer hides on
    coincidence). Dashed outline + reduced opacity reads as "tentative"
    — distinct from the solid block of the real cursor. */
-.pred-cursor {
+:where(.wt-root) .pred-cursor {
   position: absolute;
   pointer-events: none;
   border: 1px dashed var(--text);
@@ -163,7 +168,7 @@
   box-sizing: border-box;
 }
 
-.pred-cursor.visible {
+:where(.wt-root) .pred-cursor.visible {
   display: block;
 }
 
@@ -177,17 +182,17 @@
    Auto-detected bare URLs (.term-autolink) are tightly scoped to the URL text and
    never bleed, so they keep a subtle persistent underline. (The engine also only
    anchors runs with real link text, so the underline hugs the text either way.) */
-.term-link {
+:where(.wt-root) .term-link {
   color: inherit;
   text-decoration: none;
   cursor: pointer;
 }
 
-.term-autolink {
+:where(.wt-root) .term-autolink {
   text-decoration: underline dotted;
 }
 
-.term-link:hover {
+:where(.wt-root) .term-link:hover {
   text-decoration: underline solid;
 }
 
@@ -197,9 +202,9 @@
    the viewport. JS-driven instead of CSS animation because the cursor
    span is recreated every row update — a CSS animation would restart on
    each recreation and never reach the "off" frame during streaming. */
-.term-cursor,
-.term-cursor-underline,
-.term-cursor-bar {
+:where(.wt-root) .term-cursor,
+:where(.wt-root) .term-cursor-underline,
+:where(.wt-root) .term-cursor-bar {
   box-sizing: border-box;
   display: inline-block;
   height: 17px;
@@ -207,35 +212,35 @@
   vertical-align: top;
 }
 
-.term-cursor {
+:where(.wt-root) .term-cursor {
   background: var(--text);
   color: var(--bg);
 }
 
 /* Underline cursor (DECSCUSR 3/4) */
-.term-cursor-underline {
+:where(.wt-root) .term-cursor-underline {
   background: transparent;
   color: var(--text);
   border-bottom: 2px solid var(--text);
 }
 
 /* Bar cursor (DECSCUSR 5/6) */
-.term-cursor-bar {
+:where(.wt-root) .term-cursor-bar {
   background: transparent;
   color: var(--text);
   border-left: 2px solid var(--text);
 }
 
-.cursor-blink-off .term-cursor {
+:where(.wt-root) .cursor-blink-off .term-cursor {
   background: transparent;
   color: var(--text);
 }
 
-.term-blink {
-  animation: term-blink-anim 1s step-end infinite;
+:where(.wt-root) .term-blink {
+  animation: wt-blink-anim 1s step-end infinite;
 }
 
-@keyframes term-blink-anim {
+@keyframes wt-blink-anim {
   50% {
     opacity: 0;
   }
@@ -243,9 +248,9 @@
 
 /* When the terminal isn't focused, render the cursor as an outline
    rather than a filled block (xterm.js convention). */
-.term:not(.focus) .term-cursor,
-.term:not(.focus) .term-cursor-underline,
-.term:not(.focus) .term-cursor-bar {
+:where(.wt-root) .term:not(.focus) .term-cursor,
+:where(.wt-root) .term:not(.focus) .term-cursor-underline,
+:where(.wt-root) .term:not(.focus) .term-cursor-bar {
   background: transparent;
   color: var(--text);
   border: none;
@@ -257,280 +262,100 @@
 }
 
 /* ===== Terminal color classes (basic 16 — themeable) ===== */
-.term-fg-0 {
+:where(.wt-root) .term-fg-0 {
   color: #000;
 }
-.term-fg-1 {
+:where(.wt-root) .term-fg-1 {
   color: #a00;
 }
-.term-fg-2 {
+:where(.wt-root) .term-fg-2 {
   color: #0a0;
 }
-.term-fg-3 {
+:where(.wt-root) .term-fg-3 {
   color: #a50;
 }
-.term-fg-4 {
+:where(.wt-root) .term-fg-4 {
   color: #00a;
 }
-.term-fg-5 {
+:where(.wt-root) .term-fg-5 {
   color: #a0a;
 }
-.term-fg-6 {
+:where(.wt-root) .term-fg-6 {
   color: #0aa;
 }
-.term-fg-7 {
+:where(.wt-root) .term-fg-7 {
   color: #aaa;
 }
-.term-fg-8 {
+:where(.wt-root) .term-fg-8 {
   color: #555;
 }
-.term-fg-9 {
+:where(.wt-root) .term-fg-9 {
   color: #f55;
 }
-.term-fg-10 {
+:where(.wt-root) .term-fg-10 {
   color: #5f5;
 }
-.term-fg-11 {
+:where(.wt-root) .term-fg-11 {
   color: #ff5;
 }
-.term-fg-12 {
+:where(.wt-root) .term-fg-12 {
   color: #55f;
 }
-.term-fg-13 {
+:where(.wt-root) .term-fg-13 {
   color: #f5f;
 }
-.term-fg-14 {
+:where(.wt-root) .term-fg-14 {
   color: #5ff;
 }
-.term-fg-15 {
+:where(.wt-root) .term-fg-15 {
   color: #fff;
 }
 
-.term-bg-0 {
+:where(.wt-root) .term-bg-0 {
   background: #000;
 }
-.term-bg-1 {
+:where(.wt-root) .term-bg-1 {
   background: #a00;
 }
-.term-bg-2 {
+:where(.wt-root) .term-bg-2 {
   background: #0a0;
 }
-.term-bg-3 {
+:where(.wt-root) .term-bg-3 {
   background: #a50;
 }
-.term-bg-4 {
+:where(.wt-root) .term-bg-4 {
   background: #00a;
 }
-.term-bg-5 {
+:where(.wt-root) .term-bg-5 {
   background: #a0a;
 }
-.term-bg-6 {
+:where(.wt-root) .term-bg-6 {
   background: #0aa;
 }
-.term-bg-7 {
+:where(.wt-root) .term-bg-7 {
   background: #aaa;
 }
-.term-bg-8 {
+:where(.wt-root) .term-bg-8 {
   background: #555;
 }
-.term-bg-9 {
+:where(.wt-root) .term-bg-9 {
   background: #f55;
 }
-.term-bg-10 {
+:where(.wt-root) .term-bg-10 {
   background: #5f5;
 }
-.term-bg-11 {
+:where(.wt-root) .term-bg-11 {
   background: #ff5;
 }
-.term-bg-12 {
+:where(.wt-root) .term-bg-12 {
   background: #55f;
 }
-.term-bg-13 {
+:where(.wt-root) .term-bg-13 {
   background: #f5f;
 }
-.term-bg-14 {
+:where(.wt-root) .term-bg-14 {
   background: #5ff;
 }
-.term-bg-15 {
+:where(.wt-root) .term-bg-15 {
   background: #fff;
 }
-
-/* ===== Key toolbar (touch devices only) =====
-   Uses interpolate-size: allow-keywords (on :root) to animate
-   width/height between a fixed collapsed size and auto (intrinsic).
-   Toggle is first in DOM so it's at top-left of the grid — visible
-   when the container clips to 1-cell size. Container is right-anchored
-   so it grows leftward on open. */
-.key-toolbar {
-  display: contents;
-}
-
-/* Touch-only toolbar children: the on-screen Esc/Tab/arrows/hamburger
-   are useless on desktop where the user has a real keyboard. Hidden by
-   default; the @media (pointer: coarse) block below restores them. */
-.kb-key,
-.kb-toggle {
-  display: none;
-}
-
-@media (pointer: coarse) {
-  .key-toolbar {
-    position: fixed;
-    top: calc(var(--safe-top) + var(--sp-2) + var(--vv-top, 0px));
-    right: var(--sp-2);
-    z-index: 10;
-    display: grid;
-    grid-template-columns: repeat(4, var(--touch-target)) var(--touch-target);
-    grid-template-rows: var(--touch-target) var(--touch-target);
-    place-content: start end;
-    gap: var(--sp-1);
-    padding: var(--sp-1);
-    background: var(--surface);
-    backdrop-filter: var(--blur);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    overflow: hidden;
-    width: auto;
-    height: auto;
-    transition:
-      width var(--dur-enter) var(--ease-standard),
-      height var(--dur-enter) var(--ease-standard);
-  }
-
-  /* Collapsed: fixed size = 1 button + padding + border. Content is
-     right-aligned (justify-content:end) so the toggle (col 5) stays at
-     the right edge, visible within the clipped area. --pill-outer
-     includes the 2px border (box-sizing:border-box); omitting it left
-     the content box 2px short, pinning the button top-right with
-     unequal bottom/left gaps. */
-  .key-toolbar.collapsed {
-    width: var(--pill-outer);
-    height: var(--pill-outer);
-  }
-
-  /* Grid placement: toggle at col 5 row 1 (top-right). */
-  .kb-toggle {
-    grid-area: 1 / 5;
-    position: relative;
-  }
-  .kb-r1c1 {
-    grid-area: 1 / 1;
-  }
-  .kb-r1c2 {
-    grid-area: 1 / 2;
-  }
-  .kb-r1c3 {
-    grid-area: 1 / 3;
-  }
-  .kb-r1c4 {
-    grid-area: 1 / 4;
-  }
-  .kb-r2c1 {
-    grid-area: 2 / 1;
-  }
-  .kb-r2c2 {
-    grid-area: 2 / 2;
-  }
-  .kb-r2c3 {
-    grid-area: 2 / 3;
-  }
-  .kb-r2c4 {
-    grid-area: 2 / 4;
-  }
-
-  /* Keys fade in/out during open/close. The container's width/height
-     transition handles the background slide; opacity handles the
-     individual button appearance. Stagger the fade slightly after
-     the container starts growing (delay on open) and before it
-     finishes shrinking (no delay on close). */
-  .kb-key {
-    opacity: 1;
-    transition: opacity var(--dur-standard) var(--ease-enter) 0.05s;
-  }
-
-  .key-toolbar.collapsed .kb-key {
-    opacity: 0;
-    transition: opacity var(--dur-exit) var(--ease-exit);
-  }
-
-  /* Shared button */
-  .key-toolbar button {
-    width: var(--touch-target);
-    height: var(--touch-target);
-    background: transparent;
-    color: var(--text);
-    border: none;
-    border-radius: var(--radius-inner);
-    font-size: 0.9375rem;
-    font-family: var(--font-ui);
-    font-weight: 500;
-    cursor: pointer;
-    touch-action: manipulation;
-    user-select: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .key-toolbar button:active {
-    background: var(--text-active);
-  }
-
-  /* Sticky Ctrl, armed: inverted fill so the toggle state reads clearly
-     in the monochrome palette (stays filled while pressed). */
-  .kb-key.armed,
-  .kb-key.armed:active {
-    background: var(--text);
-    color: var(--bg);
-  }
-
-  .key-toolbar button svg {
-    width: var(--icon);
-    height: var(--icon);
-    stroke: currentcolor;
-    fill: none;
-    stroke-width: 2;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-  }
-
-  /* Toggle icon crossfade. Both icons are stacked absolute so they
-     can independently fade + rotate during the open<->close
-     transition. inset:0 + margin:auto centers them within the
-     button (works because the SVGs carry explicit width/height); a
-     bare `position: absolute` would pin them at the top-left, giving
-     the toggle visibly unequal left/right padding when collapsed. */
-  .kb-toggle .icon-hamburger,
-  .kb-toggle .icon-close {
-    position: absolute;
-    inset: 0;
-    margin: auto;
-    transition:
-      opacity var(--dur-standard) linear,
-      transform var(--dur-standard) linear;
-  }
-
-  .kb-toggle .icon-close {
-    opacity: 1;
-    transform: rotate(0deg);
-  }
-  .kb-toggle .icon-hamburger {
-    opacity: 0;
-    transform: rotate(-90deg);
-  }
-  .key-toolbar.collapsed .kb-toggle .icon-close {
-    opacity: 0;
-    transform: rotate(90deg);
-  }
-  .key-toolbar.collapsed .kb-toggle .icon-hamburger {
-    opacity: 1;
-    transform: rotate(0deg);
-  }
-
-  /* No-transition on first render */
-  .key-toolbar.no-transition,
-  .key-toolbar.no-transition .kb-toggle .icon-hamburger,
-  .key-toolbar.no-transition .kb-toggle .icon-close {
-    transition: none;
-  }
-}