@cloudgrid-io/ui 0.32.0 → 0.32.4

package/README.md

@@ -48,8 +48,14 @@ The order matters, and getting it wrong fails quietly rather than loudly.
 - `console.css` is a **product preset**, not part of the base. It re-declares the body and
   display faces as the UI face, Manrope. The CloudGrid Console imports it; so should any
   product whose type is the UI face rather than the display face. Everyone else leaves the
-  line out and keeps the default. It has to sit after `tokens.css`, which is what it
-  re-declares, and before `theme.css`, which maps the utilities onto the result.
+  line out and keeps the default. It has to sit **after `tokens.css`**, which is what it
+  re-declares: import it before `tokens.css` and the default face wins at equal specificity,
+  silently. Its position relative to `theme.css` does not matter. `theme.css` is
+  `@theme inline`, so the utilities it emits are live `var()` references that resolve
+  wherever the token ends up, and Tailwind hoists theme output above plain CSS anyway;
+  measured with Tailwind 4, `console.css` before or after `theme.css` compiles byte-identical.
+  The order above is still the recommended one, because it keeps the presets beside the
+  tokens they change.
 - `shadcn.css` must come after whatever `:root` your own `shadcn init` wrote, because it
   overrides those values. Put it earlier and the stock grey palette wins.
 
@@ -190,6 +196,27 @@ are inlined in the component, and also ship as files for any other use:
 `@cloudgrid-io/ui/brand/creations/1.webp` to `4.webp` (164x94, 2 to 5KB each). After
 replacing a file, run `node scripts/generate-creation-previews.mjs`.
 
+## Pictures in a component: embed or resolve
+
+Two components ship pictures, and they do it two ways on purpose. A new component with
+pictures picks one by this rule rather than by whichever example its author read last.
+
+- **Embed** small decorative defaults that must work with no consumer wiring. The pictures
+  are inlined in the component as data URIs **and** ship as files under
+  `@cloudgrid-io/ui/brand/`, with a test that holds the two byte-equal. `EmptyCreations` is
+  the example: 4 thumbnails, about 13KB of files, about 18KB once inlined in
+  `empty-creations-previews.ts`. It renders correctly the moment it is imported.
+- **Resolve** large sets, or any set the consumer is expected to choose. The pictures ship as
+  files only, and the consumer hands the component a URL for each one (`resolveSrc`, or a
+  `src` per item) through its own bundler or public folder. `ShowcaseScroll` is the example:
+  19 pictures, about 205KB of files. Inlined, they would add over a quarter of a megabyte to
+  every bundle that imports the package barrel, whether or not that page shows them.
+
+Rough line: embed when it is a handful of pictures and **under about 20KB in total**, and
+the component is useless without them. Past that, resolve. Base64 grows a file by about a
+third, and an inlined picture is paid for by every consumer of the barrel rather than only by
+the page that renders it.
+
 ## The email layout
 
 ```ts

package/dist/badge/bubble.d.ts

@@ -5,7 +5,12 @@
  *
  * Kept apart from `visitor.ts` so the owner file can draw the bubble without
  * importing the visitor half.
+ *
+ * The design is the designer's overlay (ui#322,
+ * coolapps.cloudgrid.io/cloudgrid-overlay-acbb): three overlapping 24px discs in
+ * a white pill with a purple hairline. Left to right, chat on purple, thumbs-up
+ * on cyan, wrench on lime; each paints over the one to its left.
  */
-/** The bubble's three icons in their tones: thumbs-up purple, wrench blue, chat green. */
+/** The bubble's three icons in their tones, left to right: chat purple, thumbs-up cyan, wrench lime. */
 export declare function bubbleIcons(): string;
 //# sourceMappingURL=bubble.d.ts.map

package/dist/badge/bubble.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bubble.d.ts","sourceRoot":"","sources":["../../src/badge/bubble.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,0FAA0F;AAC1F,wBAAgB,WAAW,IAAI,MAAM,CAMpC"}
+{"version":3,"file":"bubble.d.ts","sourceRoot":"","sources":["../../src/badge/bubble.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAKH,wGAAwG;AACxG,wBAAgB,WAAW,IAAI,MAAM,CAMpC"}

package/dist/badge/bubble.js

@@ -5,13 +5,18 @@
  *
  * Kept apart from `visitor.ts` so the owner file can draw the bubble without
  * importing the visitor half.
+ *
+ * The design is the designer's overlay (ui#322,
+ * coolapps.cloudgrid.io/cloudgrid-overlay-acbb): three overlapping 24px discs in
+ * a white pill with a purple hairline. Left to right, chat on purple, thumbs-up
+ * on cyan, wrench on lime; each paints over the one to its left.
  */
-import { CHAT_CIRCLE, THUMBS_UP, WRENCH } from "./marks.js";
+import { CHAT_TEARDROP_TEXT, THUMBS_UP, WRENCH } from "./marks.js";
 import { glyph } from "./html.js";
-/** The bubble's three icons in their tones: thumbs-up purple, wrench blue, chat green. */
+/** The bubble's three icons in their tones, left to right: chat purple, thumbs-up cyan, wrench lime. */
 export function bubbleIcons() {
-    return (`<span class="cgb-bubble-ic" data-tone="like">${glyph(THUMBS_UP)}</span>` +
-        `<span class="cgb-bubble-ic" data-tone="fix">${glyph(WRENCH)}</span>` +
-        `<span class="cgb-bubble-ic" data-tone="talk">${glyph(CHAT_CIRCLE)}</span>`);
+    return (`<span class="cgb-bubble-ic" data-tone="talk">${glyph(CHAT_TEARDROP_TEXT)}</span>` +
+        `<span class="cgb-bubble-ic" data-tone="like">${glyph(THUMBS_UP)}</span>` +
+        `<span class="cgb-bubble-ic" data-tone="fix">${glyph(WRENCH)}</span>`);
 }
 //# sourceMappingURL=bubble.js.map

package/dist/badge/bubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"bubble.js","sourceRoot":"","sources":["../../src/badge/bubble.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,0FAA0F;AAC1F,MAAM,UAAU,WAAW;IACzB,OAAO,CACL,gDAAgD,KAAK,CAAC,SAAS,CAAC,SAAS;QACzE,+CAA+C,KAAK,CAAC,MAAM,CAAC,SAAS;QACrE,gDAAgD,KAAK,CAAC,WAAW,CAAC,SAAS,CAC5E,CAAA;AACH,CAAC"}
+{"version":3,"file":"bubble.js","sourceRoot":"","sources":["../../src/badge/bubble.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,wGAAwG;AACxG,MAAM,UAAU,WAAW;IACzB,OAAO,CACL,gDAAgD,KAAK,CAAC,kBAAkB,CAAC,SAAS;QAClF,gDAAgD,KAAK,CAAC,SAAS,CAAC,SAAS;QACzE,+CAA+C,KAAK,CAAC,MAAM,CAAC,SAAS,CACtE,CAAA;AACH,CAAC"}

package/dist/badge/css-base.d.ts

@@ -12,10 +12,17 @@
  *   phone     panels are a bottom sheet over a scrim (max-width 480px, or
  *             `data-cgb-layout="phone"` on the root, which the gallery uses
  *             to show a phone frame on a desktop screen)
- *   touch     the bubble's close x always shows (`hover: none`, or
- *             `data-cgb-touch` on the root)
+ *   touch     the close x on the live badge and the bubble always shows
+ *             (`hover: none`, or `data-cgb-touch` on the root); elsewhere it
+ *             shows only while the pointer is over its piece or a key has
+ *             focused it (ui issue 324)
  *
  * `data-cgb-layout="desktop"` pins the desktop answer on a narrow screen.
+ *
+ * Motion (ui issue 322): `cgb-rise` is the arrival the live badge and the bubble
+ * share, and where the browser draws `linear()` easing the root swaps
+ * `--cg-ease-spring` for the real damped spring. Reduced motion stops every
+ * animation and transition inside the root, so each piece shows at rest at once.
  */
 /** A phone rule set, written once against `r`, emitted for both roots. */
 export declare function phoneRules(rules: (r: string) => string): string;

package/dist/badge/css-base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css-base.d.ts","sourceRoot":"","sources":["../../src/badge/css-base.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAQH,0EAA0E;AAC1E,wBAAgB,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAE/D;AAED,iGAAiG;AACjG,wBAAgB,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAE/D;AAID,eAAO,MAAM,cAAc,EAAE,MAyEyC,CAAA"}
+{"version":3,"file":"css-base.d.ts","sourceRoot":"","sources":["../../src/badge/css-base.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAQH,0EAA0E;AAC1E,wBAAgB,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAE/D;AAED,iGAAiG;AACjG,wBAAgB,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAE/D;AAyCD,eAAO,MAAM,cAAc,EAAE,MA8EyC,CAAA"}

package/dist/badge/css-base.js

@@ -12,10 +12,17 @@
  *   phone     panels are a bottom sheet over a scrim (max-width 480px, or
  *             `data-cgb-layout="phone"` on the root, which the gallery uses
  *             to show a phone frame on a desktop screen)
- *   touch     the bubble's close x always shows (`hover: none`, or
- *             `data-cgb-touch` on the root)
+ *   touch     the close x on the live badge and the bubble always shows
+ *             (`hover: none`, or `data-cgb-touch` on the root); elsewhere it
+ *             shows only while the pointer is over its piece or a key has
+ *             focused it (ui issue 324)
  *
  * `data-cgb-layout="desktop"` pins the desktop answer on a narrow screen.
+ *
+ * Motion (ui issue 322): `cgb-rise` is the arrival the live badge and the bubble
+ * share, and where the browser draws `linear()` easing the root swaps
+ * `--cg-ease-spring` for the real damped spring. Reduced motion stops every
+ * animation and transition inside the root, so each piece shows at rest at once.
  */
 import { BADGE_TOKEN_DECLARATIONS } from "./palette.js";
 /** The two roots a phone rule is written against: the media query's, and the forced one. */
@@ -30,6 +37,41 @@ export function touchRules(rules) {
     return `@media (hover:none){${rules(".cgb")}}${rules(".cgb[data-cgb-touch]")}`;
 }
 const FOCUS = "outline:3px solid var(--cg-focus-ring);outline-offset:2px";
+/**
+ * The close x (ui issue 324), one look for every piece that has one: the live
+ * badge, the feedback bubble and the bubble's still preview in the owner panel.
+ * A 20px ink disc with a 12px bold x, at the top right of its piece's wrap,
+ * which is `.cgb-x-host` and leaves 22px above the pill for it, so the x sits
+ * 2px above the pill's right end. The hit area reaches 6px out and 2px down,
+ * to the pill's edge, so the pointer never crosses a gap between the two.
+ *
+ * Hidden at rest. It shows while the pointer is over the host (the pill or the
+ * x itself), while a key has focused anything in the host, and always where
+ * there is no hover (`touchRules`). It stays focusable and clickable while
+ * hidden: a pointer over it is over the host, and Tab onto it shows it. The
+ * host itself takes no pointer, so the strip above the pill never covers the
+ * app behind it. Leaving (`data-leaving` on the host) is the exit both pieces
+ * share; reduced motion shows and hides the x with no animation, through the
+ * root's rule.
+ */
+const CLOSE_X = `.cgb-x-host{pointer-events:none}
+.cgb-x-host>*{pointer-events:auto}
+.cgb-x{position:absolute;top:0;right:0;z-index:1;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;` +
+    `background:var(--cg-text-primary);color:var(--cg-text-on-primary);opacity:0;scale:.85;` +
+    `transition:opacity var(--cg-duration) var(--cg-ease-out),scale var(--cg-duration) var(--cg-ease-out),transform 320ms var(--cg-ease-spring)}
+.cgb-x::before{content:"";position:absolute;inset:-6px -6px -2px -6px}
+.cgb-x svg{width:12px;height:12px}
+.cgb-x-host:hover .cgb-x,.cgb-x:focus-visible{opacity:1;scale:1}
+.cgb-x-host:has(:focus-visible) .cgb-x{opacity:1;scale:1}
+@media (hover:hover){.cgb-x:hover{transform:scale(1.12)}}
+.cgb-x:active{transform:scale(.92)}
+.cgb .cgb-x:focus-visible{outline:2px solid var(--cg-primary);outline-offset:2px}
+.cgb-x-host[data-leaving]{animation:cgb-leave 260ms var(--cg-ease-in) forwards}
+.cgb-x-host[data-leaving]>*{pointer-events:none}
+@keyframes cgb-pop{from{opacity:0;scale:.4}}
+@keyframes cgb-leave{to{opacity:0;translate:0 12px;scale:.96}}
+@media (prefers-reduced-motion:reduce){.cgb-x:hover,.cgb-x:active{transform:none}}
+`;
 export const BADGE_BASE_CSS = /* @__PURE__ */ (() => `.cgb{all:initial;${BADGE_TOKEN_DECLARATIONS}display:block;position:fixed;inset:0;z-index:2147483000;pointer-events:none;` +
     `font-family:var(--cg-font-body);font-size:var(--cg-body-14);font-weight:var(--cg-weight-regular);line-height:var(--cg-body-line);` +
     `color:var(--cg-text-primary);text-align:left;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
@@ -86,8 +128,13 @@ export const BADGE_BASE_CSS = /* @__PURE__ */ (() => `.cgb{all:initial;${BADGE_T
 .cgb-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--cg-body-14);cursor:pointer}
 .cgb-desc{font-size:var(--cg-body-14);color:var(--cg-text-secondary)}
 .cgb-scrim{display:none}
+@keyframes cgb-rise{from{opacity:0;translate:0 30px}}
+@supports (transition-timing-function:linear(0,1)){.cgb{--cg-ease-spring:var(--cg-ease-spring-damped)}}
 @media (prefers-reduced-motion:reduce){.cgb *{animation:none!important;transition:none!important}}
 ` +
+    CLOSE_X +
+    touchRules((r) => `${r} .cgb-x{opacity:1;scale:1}`) +
+    "\n" +
     phoneRules((r) => `${r} .cgb-panel{left:0;right:0;top:auto;bottom:0;width:auto;max-height:88%;transform:none;border-radius:var(--cg-radius-container) var(--cg-radius-container) 0 0;border-bottom:0;animation-name:cgb-up}` +
         `${r} .cgb-scrim{display:block;position:absolute;inset:0;background:var(--cg-scrim)}` +
         `${r} .cgb-panel textarea{font-size:var(--cg-body-md)}` +

package/dist/badge/css-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"css-base.js","sourceRoot":"","sources":["../../src/badge/css-base.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAA;AAEvD,4FAA4F;AAC5F,MAAM,WAAW,GAAG,qCAAqC,CAAA;AACzD,MAAM,YAAY,GAAG,6BAA6B,CAAA;AAElD,0EAA0E;AAC1E,MAAM,UAAU,UAAU,CAAC,KAA4B;IACrD,OAAO,4BAA4B,KAAK,CAAC,WAAW,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,EAAE,CAAA;AAChF,CAAC;AAED,iGAAiG;AACjG,MAAM,UAAU,UAAU,CAAC,KAA4B;IACrD,OAAO,uBAAuB,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,sBAAsB,CAAC,EAAE,CAAA;AAChF,CAAC;AAED,MAAM,KAAK,GAAG,2DAA2D,CAAA;AAEzE,MAAM,CAAC,MAAM,cAAc,GAAW,eAAe,CAAC,CAAC,GAAG,EAAE,CAC1D,oBAAoB,wBAAwB,8EAA8E;IAC1H,mIAAmI;IACnI;;;;;;;;;;sBAUoB,KAAK;;;;mKAIwI;IACjK,mIAAmI;IACnI;;;;;;;;;;6IAU2I;IAC3I,4LAA4L;IAC5L;;;;;;;;;4IAS0I;IAC1I;;;+IAG6I;IAC7I;;;;;;;;;;;;;CAaD;IACC,UAAU,CACR,CAAC,CAAC,EAAE,EAAE,CACJ,GAAG,CAAC,sMAAsM;QAC1M,GAAG,CAAC,iFAAiF;QACrF,GAAG,CAAC,mDAAmD;QACvD,sEAAsE;QACtE,yEAAyE;QACzE,yDAAyD;QACzD,GAAG,CAAC,6CAA6C;QACjD,GAAG,CAAC,6BAA6B;QACjC,GAAG,CAAC,wCAAwC;QAC5C,GAAG,CAAC,0CAA0C;QAC9C,GAAG,CAAC,wBAAwB,CAC/B;IACD,iEAAiE,CAAC,EAAE,CAAA"}
+{"version":3,"file":"css-base.js","sourceRoot":"","sources":["../../src/badge/css-base.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAA;AAEvD,4FAA4F;AAC5F,MAAM,WAAW,GAAG,qCAAqC,CAAA;AACzD,MAAM,YAAY,GAAG,6BAA6B,CAAA;AAElD,0EAA0E;AAC1E,MAAM,UAAU,UAAU,CAAC,KAA4B;IACrD,OAAO,4BAA4B,KAAK,CAAC,WAAW,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,EAAE,CAAA;AAChF,CAAC;AAED,iGAAiG;AACjG,MAAM,UAAU,UAAU,CAAC,KAA4B;IACrD,OAAO,uBAAuB,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,sBAAsB,CAAC,EAAE,CAAA;AAChF,CAAC;AAED,MAAM,KAAK,GAAG,2DAA2D,CAAA;AAEzE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,OAAO,GACX;;2HAEyH;IACzH,wFAAwF;IACxF;;;;;;;;;;;;;CAaD,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAW,eAAe,CAAC,CAAC,GAAG,EAAE,CAC1D,oBAAoB,wBAAwB,8EAA8E;IAC1H,mIAAmI;IACnI;;;;;;;;;;sBAUoB,KAAK;;;;mKAIwI;IACjK,mIAAmI;IACnI;;;;;;;;;;6IAU2I;IAC3I,4LAA4L;IAC5L;;;;;;;;;4IAS0I;IAC1I;;;+IAG6I;IAC7I;;;;;;;;;;;;;;;CAeD;IACC,OAAO;IACP,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,4BAA4B,CAAC;IACnD,IAAI;IACJ,UAAU,CACR,CAAC,CAAC,EAAE,EAAE,CACJ,GAAG,CAAC,sMAAsM;QAC1M,GAAG,CAAC,iFAAiF;QACrF,GAAG,CAAC,mDAAmD;QACvD,sEAAsE;QACtE,yEAAyE;QACzE,yDAAyD;QACzD,GAAG,CAAC,6CAA6C;QACjD,GAAG,CAAC,6BAA6B;QACjC,GAAG,CAAC,wCAAwC;QAC5C,GAAG,CAAC,0CAA0C;QAC9C,GAAG,CAAC,wBAAwB,CAC/B;IACD,iEAAiE,CAAC,EAAE,CAAA"}

package/dist/badge/css-bubble.d.ts

@@ -1,10 +1,13 @@
 /**
- * The feedback bubble's look, written once against a selector: the white
- * speech bubble with its tail and the three tinted icons. The visitor
- * stylesheet applies it to the live bubble (`.cgb-bubble`) and adds the drift,
- * hover and close x; the owner stylesheet applies it to the still preview in
- * the "Ask visitors for feedback" explanation (ui#316). One source, so the two
- * cannot drift apart.
+ * The feedback bubble's look, written once against a selector: the white pill
+ * with its purple hairline and the three overlapping discs (ui issue 322, the
+ * designer's overlay). The visitor stylesheet applies it to the live bubble
+ * (`.cgb-bubble`) and adds the arrival, the hover spread and the close x; the
+ * owner stylesheet applies it to the still preview in the "Ask visitors for
+ * feedback" explanation (ui issue 316). One source, so the two cannot drift apart.
+ *
+ * Sizes are the design's: a 40px pill, 8px padding, 24px discs overlapping by
+ * 8px (4px on hover), 16px glyphs. The pill is 74px wide at rest.
  */
 export declare function bubbleLook(s: string): string;
 //# sourceMappingURL=css-bubble.d.ts.map

package/dist/badge/css-bubble.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css-bubble.d.ts","sourceRoot":"","sources":["../../src/badge/css-bubble.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,wBAAgB,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAa5C"}
+{"version":3,"file":"css-bubble.d.ts","sourceRoot":"","sources":["../../src/badge/css-bubble.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,wBAAgB,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAW5C"}

package/dist/badge/css-bubble.js

@@ -1,21 +1,22 @@
 /**
- * The feedback bubble's look, written once against a selector: the white
- * speech bubble with its tail and the three tinted icons. The visitor
- * stylesheet applies it to the live bubble (`.cgb-bubble`) and adds the drift,
- * hover and close x; the owner stylesheet applies it to the still preview in
- * the "Ask visitors for feedback" explanation (ui#316). One source, so the two
- * cannot drift apart.
+ * The feedback bubble's look, written once against a selector: the white pill
+ * with its purple hairline and the three overlapping discs (ui issue 322, the
+ * designer's overlay). The visitor stylesheet applies it to the live bubble
+ * (`.cgb-bubble`) and adds the arrival, the hover spread and the close x; the
+ * owner stylesheet applies it to the still preview in the "Ask visitors for
+ * feedback" explanation (ui issue 316). One source, so the two cannot drift apart.
+ *
+ * Sizes are the design's: a 40px pill, 8px padding, 24px discs overlapping by
+ * 8px (4px on hover), 16px glyphs. The pill is 74px wide at rest.
  */
 export function bubbleLook(s) {
-    return (`${s}{position:relative;display:inline-flex;align-items:center;padding:8px 12px 8px 9px;border:1px solid color-mix(in srgb,var(--cg-text-primary) 6%,transparent);` +
-        `border-radius:26px;background:var(--cg-surface-card);box-shadow:var(--cg-shadow-card),var(--cg-shadow-hover)}\n` +
-        `${s}::after{content:"";position:absolute;right:24px;bottom:-9px;width:16px;height:10px;background:var(--cg-surface-card);clip-path:polygon(0 0,100% 0,100% 100%)}\n` +
-        `${s} .cgb-bubble-ic{display:grid;place-items:center;width:34px;height:34px;margin-left:-7px;border-radius:50%;box-shadow:0 0 0 2px var(--cg-surface-card);transition:margin var(--cg-duration) var(--cg-ease-out),transform var(--cg-duration) var(--cg-ease-out)}\n` +
-        `${s} .cgb-bubble-ic:first-child{margin-left:0;transform:rotate(-8deg)}\n` +
-        `${s} .cgb-bubble-ic:nth-child(3){transform:rotate(8deg)}\n` +
-        `${s} .cgb-bubble-ic svg{width:18px;height:18px}\n` +
-        `${s} .cgb-bubble-ic[data-tone=like]{background:var(--cg-primary-tint);color:var(--cg-primary)}\n` +
-        `${s} .cgb-bubble-ic[data-tone=fix]{background:var(--cg-cyan-200);color:var(--cg-accent)}\n` +
-        `${s} .cgb-bubble-ic[data-tone=talk]{background:var(--cg-lime-200);color:var(--cg-online-strong)}\n`);
+    return (`${s}{position:relative;box-sizing:border-box;display:flex;align-items:center;height:40px;padding:8px;border:1px solid var(--cg-border-accent);` +
+        `border-radius:var(--cg-radius-pill);background:var(--cg-surface-card);box-shadow:var(--cg-shadow-card)}\n` +
+        `${s} .cgb-bubble-ic{position:relative;flex:none;display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--cg-surface-card);border-radius:50%}\n` +
+        `${s} .cgb-bubble-ic+.cgb-bubble-ic{margin-left:-8px}\n` +
+        `${s} .cgb-bubble-ic svg{width:16px;height:16px}\n` +
+        `${s} .cgb-bubble-ic[data-tone=talk]{z-index:1;background:var(--cg-primary);color:var(--cg-text-on-primary)}\n` +
+        `${s} .cgb-bubble-ic[data-tone=like]{z-index:2;background:var(--cg-tertiary);color:var(--cg-text-on-accent)}\n` +
+        `${s} .cgb-bubble-ic[data-tone=fix]{z-index:3;background:var(--cg-secondary);color:var(--cg-text-on-accent)}\n`);
 }
 //# sourceMappingURL=css-bubble.js.map

package/dist/badge/css-bubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"css-bubble.js","sourceRoot":"","sources":["../../src/badge/css-bubble.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,MAAM,UAAU,UAAU,CAAC,CAAS;IAClC,OAAO,CACL,GAAG,CAAC,+JAA+J;QACnK,iHAAiH;QACjH,GAAG,CAAC,iKAAiK;QACrK,GAAG,CAAC,kQAAkQ;QACtQ,GAAG,CAAC,sEAAsE;QAC1E,GAAG,CAAC,wDAAwD;QAC5D,GAAG,CAAC,+CAA+C;QACnD,GAAG,CAAC,8FAA8F;QAClG,GAAG,CAAC,wFAAwF;QAC5F,GAAG,CAAC,gGAAgG,CACrG,CAAA;AACH,CAAC"}
+{"version":3,"file":"css-bubble.js","sourceRoot":"","sources":["../../src/badge/css-bubble.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,UAAU,UAAU,CAAC,CAAS;IAClC,OAAO,CACL,GAAG,CAAC,4IAA4I;QAChJ,2GAA2G;QAC3G,GAAG,CAAC,iKAAiK;QACrK,GAAG,CAAC,oDAAoD;QACxD,GAAG,CAAC,+CAA+C;QACnD,GAAG,CAAC,2GAA2G;QAC/G,GAAG,CAAC,2GAA2G;QAC/G,GAAG,CAAC,2GAA2G,CAChH,CAAA;AACH,CAAC"}

package/dist/badge/css-live.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The live badge's stylesheet (ui issue 322), after `BADGE_BASE_CSS`.
+ *
+ * The design's sizes: a 28px pill, 4px padding, a 20px sign, the label 4px
+ * after the sign with 8px after it (12px to the pill's end). The label is the
+ * caption size (13px, the type floor; the design draws 12) in the UI face.
+ *
+ * The sign is ONE white box under three mask layers: the plug glyph, a cover
+ * that fills the box, and a disc. The mask is glyph + (cover x disc). At rest
+ * the cover sits above the box, so only the glyph shows; the arrival starts it
+ * over the box, so the whole disc is white, and slides it up and out, which
+ * cuts the plug out of the disc from the bottom up.
+ *
+ * Arrival (from `--cgb-start`, default 300ms): the pill rises 500ms; the sign
+ * swells from 70% at +150ms and the cut starts at +200ms; the pill opens to
+ * the label's width the moment the rise lands (a 0fr to 1fr grid column, so it
+ * opens to the real width of whatever face loaded); the label slides in 80ms
+ * after. Hover swells the sign to 108%; the pill itself stays still.
+ *
+ * The label's line is the sign's 20px, not 1: the clip that lets the pill open
+ * cuts at the line box, and a 13px line cut the bottom of the g (ui issue 324).
+ * At 20px the face's whole height, ascent to descent, sits inside it.
+ *
+ * The wrap places the badge and holds the close x, the base stylesheet's
+ * `.cgb-x`, 2px above the pill's right end (ui issue 324). On a touch screen,
+ * where the x always shows, it pops in once the label has landed.
+ */
+export declare const BADGE_LIVE_CSS: string;
+//# sourceMappingURL=css-live.d.ts.map

package/dist/badge/css-live.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-live.d.ts","sourceRoot":"","sources":["../../src/badge/css-live.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAoBH,eAAO,MAAM,cAAc,EAAE,MAwBpB,CAAA"}

package/dist/badge/css-live.js

@@ -0,0 +1,64 @@
+/**
+ * The live badge's stylesheet (ui issue 322), after `BADGE_BASE_CSS`.
+ *
+ * The design's sizes: a 28px pill, 4px padding, a 20px sign, the label 4px
+ * after the sign with 8px after it (12px to the pill's end). The label is the
+ * caption size (13px, the type floor; the design draws 12) in the UI face.
+ *
+ * The sign is ONE white box under three mask layers: the plug glyph, a cover
+ * that fills the box, and a disc. The mask is glyph + (cover x disc). At rest
+ * the cover sits above the box, so only the glyph shows; the arrival starts it
+ * over the box, so the whole disc is white, and slides it up and out, which
+ * cuts the plug out of the disc from the bottom up.
+ *
+ * Arrival (from `--cgb-start`, default 300ms): the pill rises 500ms; the sign
+ * swells from 70% at +150ms and the cut starts at +200ms; the pill opens to
+ * the label's width the moment the rise lands (a 0fr to 1fr grid column, so it
+ * opens to the real width of whatever face loaded); the label slides in 80ms
+ * after. Hover swells the sign to 108%; the pill itself stays still.
+ *
+ * The label's line is the sign's 20px, not 1: the clip that lets the pill open
+ * cuts at the line box, and a 13px line cut the bottom of the g (ui issue 324).
+ * At 20px the face's whole height, ascent to descent, sits inside it.
+ *
+ * The wrap places the badge and holds the close x, the base stylesheet's
+ * `.cgb-x`, 2px above the pill's right end (ui issue 324). On a touch screen,
+ * where the x always shows, it pops in once the label has landed.
+ */
+import { SIGN_GLYPH_PATH } from "./brand.js";
+import { touchRules } from "./css-base.js";
+/**
+ * The glyph in a 20px box, where the design draws it: the sign's socket glyph
+ * is the design's symbol at 2.05 times the size, so a 41-unit viewBox from
+ * (53, 14.977) lands it on the design's coordinates.
+ */
+const GLYPH_MASK = 'url("data:image/svg+xml,' +
+    encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='53 14.977 41 41'><path d='${SIGN_GLYPH_PATH}'/></svg>`) +
+    '")';
+// A mask reads only alpha, so any opaque token draws "keep"; the ink is one.
+const MASK = `${GLYPH_MASK},linear-gradient(var(--cg-text-primary) 0 0),radial-gradient(circle at 10.04px 10.1px,var(--cg-text-primary) 9.25px,transparent 9.75px)`;
+export const BADGE_LIVE_CSS = /* @__PURE__ */ (() => `.cgb-live-wrap{--cgb-t0:var(--cgb-start,300ms);position:absolute;left:calc(12px + env(safe-area-inset-left,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));padding-top:22px}
+.cgb-live{position:relative;display:flex;align-items:center;width:max-content;height:28px;padding:4px;border-radius:var(--cg-radius-pill);background:var(--cg-primary);color:var(--cg-text-on-primary);` +
+    `text-decoration:none;box-shadow:var(--cg-shadow-card);cursor:pointer;animation:cgb-rise 500ms var(--cg-ease-out-expo) var(--cgb-t0) both}
+.cgb-live:focus-visible{outline:2px solid var(--cg-primary);outline-offset:2px}
+.cgb-live-icon{flex:none;width:20px;height:20px;background:var(--cg-text-on-primary);` +
+    `-webkit-mask-image:${MASK};mask-image:${MASK};-webkit-mask-size:20px 20px;mask-size:20px 20px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;` +
+    `-webkit-mask-composite:source-over,source-in,source-over;mask-composite:add,intersect,add;-webkit-mask-position:0 0,0 -20px,0 0;mask-position:0 0,0 -20px,0 0;` +
+    `animation:cgb-plug 480ms var(--cg-ease-in-out-cubic) calc(var(--cgb-t0) + 200ms) both,cgb-swell 560ms var(--cg-ease-spring) calc(var(--cgb-t0) + 150ms) both;` +
+    `transition:transform 420ms var(--cg-ease-spring)}
+@media (hover:hover){.cgb-live:hover .cgb-live-icon{transform:scale(1.08)}}
+.cgb-live:focus-visible .cgb-live-icon{transform:scale(1.08)}
+.cgb-live:active .cgb-live-icon{transform:scale(.94);transition-duration:var(--cg-duration-fast)}
+.cgb-live-label{display:grid;grid-template-columns:1fr;animation:cgb-grow 560ms var(--cg-ease-out-quint) calc(var(--cgb-t0) + 500ms) both}
+.cgb-live-clip{min-width:0;overflow:hidden}
+.cgb-live-text{display:block;padding:0 8px 0 4px;white-space:nowrap;font-family:var(--cg-font-ui);font-size:var(--cg-caption);font-weight:var(--cg-weight-regular);line-height:20px;` +
+    `letter-spacing:0;animation:cgb-label 440ms var(--cg-ease-out-expo) calc(var(--cgb-t0) + 580ms) both}
+@keyframes cgb-plug{from{-webkit-mask-position:0 0,0 0,0 0;mask-position:0 0,0 0,0 0}}
+@keyframes cgb-swell{from{scale:.7}}
+@keyframes cgb-grow{from{grid-template-columns:0fr}}
+@keyframes cgb-label{from{opacity:0;translate:-8px 0}}
+@media (prefers-reduced-motion:reduce){.cgb-live:hover .cgb-live-icon,.cgb-live:focus-visible .cgb-live-icon,.cgb-live:active .cgb-live-icon{transform:none}}
+` +
+    touchRules((r) => `${r} .cgb-live-x{animation:cgb-pop 520ms var(--cg-ease-spring) calc(var(--cgb-t0) + 1020ms) both}`) +
+    "\n")();
+//# sourceMappingURL=css-live.js.map

package/dist/badge/css-live.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-live.js","sourceRoot":"","sources":["../../src/badge/css-live.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C;;;;GAIG;AACH,MAAM,UAAU,GACd,0BAA0B;IAC1B,kBAAkB,CAChB,qGAAqG,eAAe,WAAW,CAChI;IACD,IAAI,CAAA;AAEN,6EAA6E;AAC7E,MAAM,IAAI,GAAG,GAAG,UAAU,yIAAyI,CAAA;AAEnK,MAAM,CAAC,MAAM,cAAc,GAAW,eAAe,CAAC,CAAC,GAAG,EAAE,CAC1D;wMACsM;IACtM;;sFAEoF;IACpF,sBAAsB,IAAI,eAAe,IAAI,uGAAuG;IACpJ,gKAAgK;IAChK,+JAA+J;IAC/J;;;;;;qLAMmL;IACnL;;;;;;CAMD;IACC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,+FAA+F,CAAC;IACtH,IAAI,CAAC,EAAE,CAAA"}

package/dist/badge/css-owner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css-owner.d.ts","sourceRoot":"","sources":["../../src/badge/css-owner.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,eAAO,MAAM,eAAe,EAAE,MA0JxB,CAAA"}
+{"version":3,"file":"css-owner.d.ts","sourceRoot":"","sources":["../../src/badge/css-owner.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,eAAO,MAAM,eAAe,EAAE,MAgKxB,CAAA"}

package/dist/badge/css-owner.js

@@ -5,7 +5,14 @@
  */
 import { phoneRules } from "./css-base.js";
 import { bubbleLook } from "./css-bubble.js";
-export const BADGE_OWNER_CSS = /* @__PURE__ */ (() => `.cgb-tab{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;height:56px;max-width:46px;padding:0 10px 0 12px;` +
+export const BADGE_OWNER_CSS = /* @__PURE__ */ (() => 
+// One length for every step (cloudgrid-console 868): the owner panel is the
+// main step's height on main, Edit and Share alike, so switching steps never
+// resizes it. 506px is the main step measured on desktop (505.1), 415px on a
+// phone (414.1); a step longer than that scrolls inside the panel, and the
+// panel never grows. The visitor's panels keep their own heights.
+`.cgb-panel[data-step]{height:min(506px,calc(100% - 32px))}
+.cgb-tab{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;height:56px;max-width:46px;padding:0 10px 0 12px;` +
     `overflow:hidden;white-space:nowrap;background:var(--cg-surface-card);color:var(--cg-text-primary);border:1px solid var(--cg-border-hairline);border-right:0;` +
     `border-radius:var(--cg-radius-lg) 0 0 var(--cg-radius-lg);box-shadow:var(--cg-shadow-card),var(--cg-shadow-hover);cursor:grab;touch-action:none;user-select:none;` +
     `transition:max-width var(--cg-duration-slow) var(--cg-ease-out),padding var(--cg-duration-slow) var(--cg-ease-out)}
@@ -63,7 +70,7 @@ export const BADGE_OWNER_CSS = /* @__PURE__ */ (() => `.cgb-tab{position:absolut
     `background:var(--cg-surface-card);border:1px solid var(--cg-border-control);border-bottom-color:var(--cg-border-hairline);border-radius:var(--cg-radius-md) var(--cg-radius-md) 0 0;` +
     `box-shadow:var(--cg-shadow-card);font-family:var(--cg-font-body);font-weight:var(--cg-weight-regular);animation:cgb-in var(--cg-duration) var(--cg-ease-out)}
 .cgb-info-art{position:relative;flex:none;width:88px;height:60px;overflow:hidden;border-radius:var(--cg-radius-sm);background:var(--cg-surface-raised)}
-` + bubbleLook(".cgb-info-bubble") + `.cgb-info-art .cgb-info-bubble{position:absolute;right:6px;bottom:11px;transform:scale(.66);transform-origin:100% 100%}
+` + bubbleLook(".cgb-info-bubble") + `.cgb-info-wrap{position:absolute;right:8px;bottom:8px;padding-top:22px;transform:scale(.8);transform-origin:100% 100%}
 .cgb-info-copy{min-width:0;font-size:var(--cg-caption);line-height:1.4;color:var(--cg-text-secondary);text-wrap:pretty}
 .cgb-info-copy::before{content:"";float:right;width:22px;height:18px}
 .cgb-info-copy span{color:var(--cg-text-primary)}
@@ -121,7 +128,7 @@ export const BADGE_OWNER_CSS = /* @__PURE__ */ (() => `.cgb-tab{position:absolut
 .cgb-wt b{color:var(--cg-text-accent);font-weight:inherit}
 .cgb-wd{margin-top:2px;font-size:var(--cg-caption);color:var(--cg-text-secondary)}
 .cgb-prompt{position:relative;padding:12px 48px 12px 14px;border:1px solid var(--cg-border-control);border-radius:var(--cg-radius-sm);background:var(--cg-hover)}
-.cgb-prompt pre{margin:0;font-family:var(--cg-font-mono);font-size:var(--cg-mono-size);line-height:var(--cg-mono-line);color:var(--cg-text-secondary);white-space:pre-wrap;overflow-wrap:anywhere}
+.cgb-prompt pre{margin:0;font-family:var(--cg-font-mono);font-size:var(--cg-caption);line-height:1.5;color:var(--cg-text-secondary);white-space:pre-wrap;overflow-wrap:anywhere}
 .cgb-prompt pre b{font-weight:var(--cg-weight-medium);color:var(--cg-text-accent)}
 .cgb-prompt pre i{font-style:normal;color:var(--cg-text-muted)}
 .cgb-prompt-copy{position:absolute;top:10px;right:10px;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--cg-border-control);border-radius:var(--cg-radius-sm);` +
@@ -135,7 +142,8 @@ export const BADGE_OWNER_CSS = /* @__PURE__ */ (() => `.cgb-tab{position:absolut
 .cgb-who svg{width:16px;height:16px;margin-top:1px;color:var(--cg-text-secondary)}
 .cgb-who button{color:var(--cg-text-accent);text-decoration:underline;text-underline-offset:2px}
 ` +
-    phoneRules((r) => `${r} .cgb-tab{height:52px}` +
+    phoneRules((r) => `${r} .cgb-panel[data-step]{height:min(415px,88%)}` +
+        `${r} .cgb-tab{height:52px}` +
         `${r} .cgb-row{min-height:40px;padding:0 12px}` +
         `${r} .cgb-acts .cgb-btn{height:28px}` +
         `${r} .cgb-panel[data-step] .cgb-title{font-size:var(--cg-body-14)}` +
@@ -153,7 +161,6 @@ export const BADGE_OWNER_CSS = /* @__PURE__ */ (() => `.cgb-tab{position:absolut
         `${r} .cgb-aslot .cgb-confirm{padding:0 6px 0 10px}` +
         `${r} .cgb-ways{gap:6px}` +
         `${r} .cgb-prompt{padding:10px 44px 10px 12px}` +
-        `${r} .cgb-prompt pre{font-size:var(--cg-caption);line-height:1.5}` +
         `${r} .cgb-prompt-copy{top:8px;right:8px}` +
         `${r} .cgb-link-box{height:40px}`))();
 //# sourceMappingURL=css-owner.js.map

package/dist/badge/css-owner.js.map

@@ -1 +1 @@
-{"version":3,"file":"css-owner.js","sourceRoot":"","sources":["../../src/badge/css-owner.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE5C,MAAM,CAAC,MAAM,eAAe,GAAW,eAAe,CAAC,CAAC,GAAG,EAAE,CAC3D,iKAAiK;IACjK,8JAA8J;IAC9J,mKAAmK;IACnK;;;;;;;;;;;;;qKAamK;IACnK,oOAAoO;IACpO;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BD;IACC,4EAA4E;IAC5E,6EAA6E;IAC7E,oEAAoE;IACpE,2EAA2E;IAC3E,iDAAiD;IACjD;;;;8JAI4J;IAC5J,sLAAsL;IACtL;;CAED,GAAG,UAAU,CAAC,kBAAkB,CAAC,GAAG;;;;;;;;;6JASwH;IAC3J;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uJA+BqJ;IACrJ;;;;;;;;;;;;;;;;;;;2LAmByL;IACzL;;;;;;;;;CASD;IACC,UAAU,CACR,CAAC,CAAC,EAAE,EAAE,CACJ,GAAG,CAAC,wBAAwB;QAC5B,GAAG,CAAC,2CAA2C;QAC/C,GAAG,CAAC,kCAAkC;QACtC,GAAG,CAAC,gEAAgE;QACpE,sEAAsE;QACtE,4CAA4C;QAC5C,GAAG,CAAC,gDAAgD;QACpD,GAAG,CAAC,gCAAgC;QACpC,GAAG,CAAC,6BAA6B;QACjC,GAAG,CAAC,0BAA0B;QAC9B,GAAG,CAAC,yCAAyC;QAC7C,GAAG,CAAC,8BAA8B;QAClC,GAAG,CAAC,2CAA2C;QAC/C,GAAG,CAAC,8CAA8C;QAClD,GAAG,CAAC,8CAA8C;QAClD,GAAG,CAAC,gDAAgD;QACpD,GAAG,CAAC,qBAAqB;QACzB,GAAG,CAAC,2CAA2C;QAC/C,GAAG,CAAC,+DAA+D;QACnE,GAAG,CAAC,sCAAsC;QAC1C,GAAG,CAAC,6BAA6B,CACpC,CAAC,EAAE,CAAA"}
+{"version":3,"file":"css-owner.js","sourceRoot":"","sources":["../../src/badge/css-owner.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE5C,MAAM,CAAC,MAAM,eAAe,GAAW,eAAe,CAAC,CAAC,GAAG,EAAE;AAC3D,4EAA4E;AAC5E,6EAA6E;AAC7E,6EAA6E;AAC7E,2EAA2E;AAC3E,kEAAkE;AAClE;gKAC8J;IAC9J,8JAA8J;IAC9J,mKAAmK;IACnK;;;;;;;;;;;;;qKAamK;IACnK,oOAAoO;IACpO;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BD;IACC,4EAA4E;IAC5E,6EAA6E;IAC7E,oEAAoE;IACpE,2EAA2E;IAC3E,iDAAiD;IACjD;;;;8JAI4J;IAC5J,sLAAsL;IACtL;;CAED,GAAG,UAAU,CAAC,kBAAkB,CAAC,GAAG;;;;;;;;;6JASwH;IAC3J;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uJA+BqJ;IACrJ;;;;;;;;;;;;;;;;;;;2LAmByL;IACzL;;;;;;;;;CASD;IACC,UAAU,CACR,CAAC,CAAC,EAAE,EAAE,CACJ,GAAG,CAAC,+CAA+C;QACnD,GAAG,CAAC,wBAAwB;QAC5B,GAAG,CAAC,2CAA2C;QAC/C,GAAG,CAAC,kCAAkC;QACtC,GAAG,CAAC,gEAAgE;QACpE,sEAAsE;QACtE,4CAA4C;QAC5C,GAAG,CAAC,gDAAgD;QACpD,GAAG,CAAC,gCAAgC;QACpC,GAAG,CAAC,6BAA6B;QACjC,GAAG,CAAC,0BAA0B;QAC9B,GAAG,CAAC,yCAAyC;QAC7C,GAAG,CAAC,8BAA8B;QAClC,GAAG,CAAC,2CAA2C;QAC/C,GAAG,CAAC,8CAA8C;QAClD,GAAG,CAAC,8CAA8C;QAClD,GAAG,CAAC,gDAAgD;QACpD,GAAG,CAAC,qBAAqB;QACzB,GAAG,CAAC,2CAA2C;QAC/C,GAAG,CAAC,sCAAsC;QAC1C,GAAG,CAAC,6BAA6B,CACpC,CAAC,EAAE,CAAA"}

package/dist/badge/css-visitor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css-visitor.d.ts","sourceRoot":"","sources":["../../src/badge/css-visitor.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,eAAO,MAAM,iBAAiB,EAAE,MAgE1B,CAAA"}
+{"version":3,"file":"css-visitor.d.ts","sourceRoot":"","sources":["../../src/badge/css-visitor.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,eAAO,MAAM,iBAAiB,EAAE,MAkE1B,CAAA"}

package/dist/badge/css-visitor.js

@@ -5,22 +5,27 @@
  */
 import { phoneRules, touchRules } from "./css-base.js";
 import { bubbleLook } from "./css-bubble.js";
-export const BADGE_VISITOR_CSS = /* @__PURE__ */ (() => `.cgb-bubble-wrap{position:absolute;right:16px;bottom:24px}
+export const BADGE_VISITOR_CSS = /* @__PURE__ */ (() => 
+// The bubble (ui issue 322, the designer's overlay). It rises in 600ms after it is
+// inserted (`--cgb-start`, which `bubble({ delay })` sets), the three discs
+// follow 80ms apart from the left. Hover spreads the discs from an 8px
+// overlap to 4px and deepens the shadow; a press shrinks the pill to 97%.
+// The x is the base stylesheet's `.cgb-x` (ui issue 324): 2px above the
+// pill's right end, shown on hover or keyboard focus, and on a touch screen
+// always, where it pops in last.
+`.cgb-bubble-wrap{--cgb-t0:var(--cgb-start,600ms);position:absolute;right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));padding-top:22px}
 ` +
     bubbleLook(".cgb-bubble") +
-    `.cgb-bubble{animation:cgb-drift 3.6s ease-in-out infinite;transition:box-shadow var(--cg-duration) var(--cg-ease-out)}
-.cgb-bubble:hover,.cgb-bubble:focus-visible{animation-play-state:paused;box-shadow:var(--cg-shadow-card),var(--cg-shadow-hover),var(--cg-shadow-hover)}
-.cgb-bubble:hover .cgb-bubble-ic,.cgb-bubble:focus-visible .cgb-bubble-ic{margin-left:3px}
-.cgb-bubble:hover .cgb-bubble-ic:first-child,.cgb-bubble:focus-visible .cgb-bubble-ic:first-child{margin-left:0}
-.cgb-bubble:hover .cgb-bubble-ic:nth-child(odd){transform:translateY(-2px)}
-@keyframes cgb-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
-.cgb-bubble-x{position:absolute;top:-15px;right:-4px;width:32px;height:32px;display:grid;place-items:center;` +
-    `color:var(--cg-text-on-primary);opacity:0;pointer-events:none;transition:opacity var(--cg-duration-fast) var(--cg-ease-out)}
-.cgb-bubble-x::before{content:"";position:absolute;left:8px;top:8px;width:16px;height:16px;border-radius:50%;background:var(--cg-text-primary);box-shadow:0 0 0 1.5px var(--cg-surface-card)}
-.cgb-bubble-x svg{position:relative;width:7px;height:7px}
-.cgb-bubble-x:focus-visible{outline:none}
-.cgb-bubble-x:focus-visible::before{box-shadow:0 0 0 1.5px var(--cg-surface-card),0 0 0 4.5px var(--cg-focus-ring)}
-.cgb-bubble-wrap:hover .cgb-bubble-x,.cgb-bubble-x:focus-visible{opacity:1;pointer-events:auto}
+    `.cgb-bubble{cursor:pointer;animation:cgb-rise 640ms var(--cg-ease-out-expo) var(--cgb-t0) both;transition:box-shadow 240ms ease,scale 320ms var(--cg-ease-spring)}
+.cgb-bubble:focus-visible{outline:2px solid var(--cg-primary);outline-offset:2px}
+.cgb-bubble .cgb-bubble-ic{--cgb-i:0;animation:cgb-item 560ms var(--cg-ease-out-expo) calc(var(--cgb-t0) + 220ms + var(--cgb-i) * 80ms) both;transition:margin-left 380ms var(--cg-ease-out-quart)}
+.cgb-bubble .cgb-bubble-ic[data-tone=like]{--cgb-i:1}
+.cgb-bubble .cgb-bubble-ic[data-tone=fix]{--cgb-i:2}
+@media (hover:hover){.cgb-bubble:hover{box-shadow:var(--cg-shadow-card-hover)}.cgb-bubble:hover .cgb-bubble-ic+.cgb-bubble-ic{margin-left:-4px}}
+.cgb-bubble:focus-visible .cgb-bubble-ic+.cgb-bubble-ic{margin-left:-4px}
+.cgb-bubble:active{scale:.97;transition:scale var(--cg-duration-fast) ease,box-shadow 240ms ease}
+@keyframes cgb-item{from{opacity:0;translate:0 10px}}
+@media (prefers-reduced-motion:reduce){.cgb-bubble:active{scale:none}}
 .cgb-rx{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
 .cgb-rxb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:8px 0 6px;border:1px solid var(--cg-border-control);` +
     `border-radius:var(--cg-radius-md);background:var(--cg-surface-card);color:var(--cg-text-secondary);font-family:var(--cg-font-ui);font-size:var(--cg-caption);font-weight:var(--cg-weight-bold);line-height:1;` +
@@ -56,10 +61,8 @@ export const BADGE_VISITOR_CSS = /* @__PURE__ */ (() => `.cgb-bubble-wrap{positi
 .cgb-field-label{font-size:var(--cg-caption);font-weight:var(--cg-weight-medium);color:var(--cg-text-secondary)}
 .cgb-link{justify-self:start;font-size:var(--cg-caption);color:var(--cg-text-accent);text-decoration:underline;text-underline-offset:2px}
 ` +
-    // Hidden means not clickable too (Gilad, on PR 300): a device that reports
-    // hover:hover but gets taps would otherwise hit an invisible 32px target.
-    // The tab's own pattern, `.cgb-tab[data-hidden]`.
-    touchRules((r) => `${r} .cgb-bubble-x{opacity:1;pointer-events:auto}`) +
+    touchRules((r) => `${r} .cgb-bubble-x{animation:cgb-pop 520ms var(--cg-ease-spring) calc(var(--cgb-t0) + 680ms) both}`) +
+    "\n" +
     phoneRules((r) => `${r} .cgb-rxb{min-height:46px;padding:6px 0 4px}` +
         `${r} .cgb-note{gap:6px;padding-top:10px}` +
         `${r} .cgb-textarea{min-height:64px}` +

package/dist/badge/css-visitor.js.map

@@ -1 +1 @@
-{"version":3,"file":"css-visitor.js","sourceRoot":"","sources":["../../src/badge/css-visitor.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE5C,MAAM,CAAC,MAAM,iBAAiB,GAAW,eAAe,CAAC,CAAC,GAAG,EAAE,CAC7D;CACD;IACC,UAAU,CAAC,aAAa,CAAC;IACzB;;;;;;6GAM2G;IAC3G;;;;;;;2KAOyK;IACzK,+MAA+M;IAC/M;;;;;;;;;sJASoJ;IACpJ;;;;;;;;;;;;;yLAauL;IACvL;;;;;;;CAOD;IACC,2EAA2E;IAC3E,0EAA0E;IAC1E,kDAAkD;IAClD,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,+CAA+C,CAAC;IACtE,UAAU,CACR,CAAC,CAAC,EAAE,EAAE,CACJ,GAAG,CAAC,8CAA8C;QAClD,GAAG,CAAC,sCAAsC;QAC1C,GAAG,CAAC,iCAAiC;QACrC,GAAG,CAAC,uBAAuB;QAC3B,GAAG,CAAC,2BAA2B;QAC/B,GAAG,CAAC,0BAA0B,CACjC,CAAC,EAAE,CAAA"}
+{"version":3,"file":"css-visitor.js","sourceRoot":"","sources":["../../src/badge/css-visitor.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE5C,MAAM,CAAC,MAAM,iBAAiB,GAAW,eAAe,CAAC,CAAC,GAAG,EAAE;AAC7D,mFAAmF;AACnF,4EAA4E;AAC5E,uEAAuE;AACvE,0EAA0E;AAC1E,wEAAwE;AACxE,4EAA4E;AAC5E,iCAAiC;AACjC;CACD;IACC,UAAU,CAAC,aAAa,CAAC;IACzB;;;;;;;;;;;2KAWyK;IACzK,+MAA+M;IAC/M;;;;;;;;;sJASoJ;IACpJ;;;;;;;;;;;;;yLAauL;IACvL;;;;;;;CAOD;IACC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,gGAAgG,CAAC;IACvH,IAAI;IACJ,UAAU,CACR,CAAC,CAAC,EAAE,EAAE,CACJ,GAAG,CAAC,8CAA8C;QAClD,GAAG,CAAC,sCAAsC;QAC1C,GAAG,CAAC,iCAAiC;QACrC,GAAG,CAAC,uBAAuB;QAC3B,GAAG,CAAC,2BAA2B;QAC/B,GAAG,CAAC,0BAA0B,CACjC,CAAC,EAAE,CAAA"}

package/dist/badge/index.d.ts

@@ -9,8 +9,9 @@
  *   the stylesheet   `BADGE_BASE_CSS`, `BADGE_VISITOR_CSS`, `BADGE_OWNER_CSS`,
  *                    strings for a `<style>` in the shadow root, generated from
  *                    the library's tokens (`palette.ts`)
- *   the markup       builders that return HTML strings: the owner tab and panel
- *                    (main, edit, share), the feedback bubble and panel, the
+ *   the markup       builders that return HTML strings: the live badge (ui#322),
+ *                    the owner tab and panel (main, edit, share), the feedback
+ *                    bubble and panel, the
  *                    sign-in step, and the Select, switch and `PromptBlock`
  *                    looks they use
  *   the glyphs       Phosphor path data, generated with the library's marks
@@ -24,7 +25,8 @@
  * ```
  *
  * Three entries, so each of the badge's two files takes only its half:
- * `@cloudgrid-io/ui/badge/visitor` for the main file (25 KB gzip budget),
+ * `@cloudgrid-io/ui/badge/visitor` for the main file (25 KB gzip budget; it
+ * also carries `liveBadge` and `BADGE_LIVE_CSS`, which every viewer gets),
  * `@cloudgrid-io/ui/badge/owner` for the owner file it lazy-loads, and this one,
  * which carries both. Every export is side-effect free and every glyph is its
  * own export, so a bundler keeps only what a file draws.
@@ -38,6 +40,6 @@ export * from "./owner.js";
 export * from "./marks.js";
 export { BADGE_FONT_BODY, BADGE_FONT_FACES, BADGE_FONT_UI, BADGE_TOKEN_DECLARATIONS, BADGE_TOKENS } from "./palette.js";
 export { WORDMARK_PATHS, SIGN_BOX, SIGN_GLYPH_OFFSET, SIGN_GLYPH_PATH, SIGN_RADIUS } from "./brand.js";
-/** The whole stylesheet: base, visitor and owner. */
+/** The whole stylesheet: base, the live badge, visitor and owner. */
 export declare const BADGE_CSS: string;
 //# sourceMappingURL=index.d.ts.map

package/dist/badge/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/badge/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAMH,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,aAAa,EAAE,wBAAwB,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AACvH,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,iBAAiB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAEtG,qDAAqD;AACrD,eAAO,MAAM,SAAS,EAAE,MAA6D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/badge/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAOH,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,aAAa,EAAE,wBAAwB,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AACvH,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,iBAAiB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAEtG,qEAAqE;AACrE,eAAO,MAAM,SAAS,EAAE,MAA8E,CAAA"}

package/dist/badge/index.js

@@ -9,8 +9,9 @@
  *   the stylesheet   `BADGE_BASE_CSS`, `BADGE_VISITOR_CSS`, `BADGE_OWNER_CSS`,
  *                    strings for a `<style>` in the shadow root, generated from
  *                    the library's tokens (`palette.ts`)
- *   the markup       builders that return HTML strings: the owner tab and panel
- *                    (main, edit, share), the feedback bubble and panel, the
+ *   the markup       builders that return HTML strings: the live badge (ui#322),
+ *                    the owner tab and panel (main, edit, share), the feedback
+ *                    bubble and panel, the
  *                    sign-in step, and the Select, switch and `PromptBlock`
  *                    looks they use
  *   the glyphs       Phosphor path data, generated with the library's marks
@@ -24,7 +25,8 @@
  * ```
  *
  * Three entries, so each of the badge's two files takes only its half:
- * `@cloudgrid-io/ui/badge/visitor` for the main file (25 KB gzip budget),
+ * `@cloudgrid-io/ui/badge/visitor` for the main file (25 KB gzip budget; it
+ * also carries `liveBadge` and `BADGE_LIVE_CSS`, which every viewer gets),
  * `@cloudgrid-io/ui/badge/owner` for the owner file it lazy-loads, and this one,
  * which carries both. Every export is side-effect free and every glyph is its
  * own export, so a bundler keeps only what a file draws.
@@ -36,11 +38,12 @@
 import { BADGE_BASE_CSS } from "./css-base.js";
 import { BADGE_OWNER_CSS } from "./css-owner.js";
 import { BADGE_VISITOR_CSS } from "./css-visitor.js";
+import { BADGE_LIVE_CSS } from "./css-live.js";
 export * from "./visitor.js";
 export * from "./owner.js";
 export * from "./marks.js";
 export { BADGE_FONT_BODY, BADGE_FONT_FACES, BADGE_FONT_UI, BADGE_TOKEN_DECLARATIONS, BADGE_TOKENS } from "./palette.js";
 export { WORDMARK_PATHS, SIGN_BOX, SIGN_GLYPH_OFFSET, SIGN_GLYPH_PATH, SIGN_RADIUS } from "./brand.js";
-/** The whole stylesheet: base, visitor and owner. */
-export const BADGE_CSS = BADGE_BASE_CSS + BADGE_VISITOR_CSS + BADGE_OWNER_CSS;
+/** The whole stylesheet: base, the live badge, visitor and owner. */
+export const BADGE_CSS = BADGE_BASE_CSS + BADGE_LIVE_CSS + BADGE_VISITOR_CSS + BADGE_OWNER_CSS;
 //# sourceMappingURL=index.js.map