@cloudgrid-io/ui 0.32.0 → 0.32.3

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

@@ -16,6 +16,11 @@
  *             `data-cgb-touch` on the root)
  *
  * `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;;;;;;;;;;;;;;;;;;;;;;;GAuBG;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,MA2EyC,CAAA"}

package/dist/badge/css-base.js

@@ -16,6 +16,11 @@
  *             `data-cgb-touch` on the root)
  *
  * `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. */
@@ -86,6 +91,8 @@ 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}}
 ` +
     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}` +

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;;;;;;;;;;;;;;;;;;;;;;;GAuBG;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;;;;;;;;;;;;;;;CAeD;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"}

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,21 @@
+/**
+ * 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.
+ */
+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;;;;;;;;;;;;;;;;;;GAkBG;AAmBH,eAAO,MAAM,cAAc,EAAE,MAsBzB,CAAA"}

package/dist/badge/css-live.js

@@ -0,0 +1,53 @@
+/**
+ * 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.
+ */
+import { SIGN_GLYPH_PATH } from "./brand.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{--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));` +
+    `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:1;` +
+    `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}}
+`)();
+//# 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;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAE5C;;;;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,kKAAkK;IAClK,6KAA6K;IAC7K;;sFAEoF;IACpF,sBAAsB,IAAI,eAAe,IAAI,uGAAuG;IACpJ,gKAAgK;IAChK,+JAA+J;IAC/J;;;;;;kLAMgL;IAChL;;;;;;CAMD,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-art .cgb-info-bubble{position:absolute;right:8px;bottom:8px;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,MAwE1B,CAAA"}

package/dist/badge/css-visitor.js

@@ -3,24 +3,37 @@
  * the feedback panel and its sign-in step. Ships in the badge's main file,
  * after `BADGE_BASE_CSS`.
  */
-import { phoneRules, touchRules } from "./css-base.js";
+import { phoneRules } 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, and the x pops in last. Hover spreads the
+// discs from an 8px overlap to 4px and deepens the shadow; a press shrinks
+// the pill to 97%. The x sits 2px above the pill's right end, always shown.
+`.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}
+.cgb-bubble-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);animation:cgb-pop 520ms var(--cg-ease-spring) calc(var(--cgb-t0) + 680ms) both;transition:transform 320ms var(--cg-ease-spring)}
+.cgb-bubble-x::before{content:"";position:absolute;inset:-6px -6px -2px -6px}
+.cgb-bubble-x svg{width:12px;height:12px}
+@media (hover:hover){.cgb-bubble-x:hover{transform:scale(1.12)}}
+.cgb-bubble-x:active{transform:scale(.92)}
+.cgb-bubble-x:focus-visible{outline:2px solid var(--cg-primary);outline-offset:2px}
+.cgb-bubble-wrap[data-leaving]{animation:cgb-leave 260ms var(--cg-ease-in) forwards;pointer-events:none}
+@keyframes cgb-item{from{opacity:0;translate:0 10px}}
+@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-bubble:active{scale:none}.cgb-bubble-x:hover,.cgb-bubble-x:active{transform: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 +69,6 @@ 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}`) +
     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,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE5C,MAAM,CAAC,MAAM,iBAAiB,GAAW,eAAe,CAAC,CAAC,GAAG,EAAE;AAC7D,mFAAmF;AACnF,4EAA4E;AAC5E,6EAA6E;AAC7E,2EAA2E;AAC3E,4EAA4E;AAC5E;CACD;IACC,UAAU,CAAC,aAAa,CAAC;IACzB;;;;;;;;kIAQgI;IAChI;;;;;;;;;;;;2KAYyK;IACzK,+MAA+M;IAC/M;;;;;;;;;sJASoJ;IACpJ;;;;;;;;;;;;;yLAauL;IACvL;;;;;;;CAOD;IACC,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

package/dist/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/badge/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEpD,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,MAAM,CAAC,MAAM,SAAS,GAAW,cAAc,GAAG,iBAAiB,GAAG,eAAe,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/badge/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE9C,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,MAAM,CAAC,MAAM,SAAS,GAAW,cAAc,GAAG,cAAc,GAAG,iBAAiB,GAAG,eAAe,CAAA"}

package/dist/badge/live.d.ts

@@ -0,0 +1,41 @@
+/**
+ * The live badge (ui#322): the purple pill in the bottom-left corner of every
+ * live app, the CloudGrid sign and "Live on the grid", linking to CloudGrid.
+ * The platform calls it the watermark (`branding.attribution`). Markup only.
+ *
+ * The design and its arrival are the designer's overlay
+ * (coolapps.cloudgrid.io/cloudgrid-overlay-acbb): the circle rises in, the plug
+ * is cut out of the white disc from the bottom up, the pill opens to the
+ * label's width and the label slides in. Reduced motion shows it at rest.
+ *
+ * Renders inside `badgeRoot()`, with `BADGE_BASE_CSS + BADGE_LIVE_CSS` in the
+ * shadow root, like every other piece of the badge.
+ */
+export { BADGE_LIVE_CSS } from "./css-live.js";
+/**
+ * The label today's badge shows ("Live on the grid", the platform's
+ * `DEFAULT_WATERMARK_TEXT`). The platform resolves the real copy per grid on
+ * the server and passes it in; this is only the default. The designer's page
+ * reads "Live on Grid"; the product copy is kept until the founder rules.
+ */
+export declare const LIVE_LABEL = "Live on the grid";
+export interface LiveBadgeOptions {
+    /** Where the badge links. Opens in a new tab. A non-http(s) URL becomes `#`. */
+    href: string;
+    /** The label. Default `LIVE_LABEL`. */
+    label?: string;
+    /**
+     * When the arrival starts, in ms after insertion. Default 300 (the bubble's
+     * default is 300ms later, so the two arrive in turn). `0` for a re-show.
+     */
+    delay?: number;
+}
+/** A non-negative whole number of milliseconds, as a `--cgb-start` declaration. */
+export declare function startStyle(delay: number | undefined): string;
+/**
+ * The live badge: a link holding the sign (a white plug glyph, drawn as a
+ * mask so the cut-out can animate), the label, and a screen-reader note that
+ * it opens a new tab.
+ */
+export declare function liveBadge({ href: url, label, delay }: LiveBadgeOptions): string;
+//# sourceMappingURL=live.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"live.d.ts","sourceRoot":"","sources":["../../src/badge/live.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAIH,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE9C;;;;;GAKG;AACH,eAAO,MAAM,UAAU,qBAAqB,CAAA;AAE5C,MAAM,WAAW,gBAAgB;IAC/B,gFAAgF;IAChF,IAAI,EAAE,MAAM,CAAA;IACZ,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,mFAAmF;AACnF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAG5D;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAkB,EAAE,KAAK,EAAE,EAAE,gBAAgB,GAAG,MAAM,CAQ5F"}

package/dist/badge/live.js

@@ -0,0 +1,41 @@
+/**
+ * The live badge (ui#322): the purple pill in the bottom-left corner of every
+ * live app, the CloudGrid sign and "Live on the grid", linking to CloudGrid.
+ * The platform calls it the watermark (`branding.attribution`). Markup only.
+ *
+ * The design and its arrival are the designer's overlay
+ * (coolapps.cloudgrid.io/cloudgrid-overlay-acbb): the circle rises in, the plug
+ * is cut out of the white disc from the bottom up, the pill opens to the
+ * label's width and the label slides in. Reduced motion shows it at rest.
+ *
+ * Renders inside `badgeRoot()`, with `BADGE_BASE_CSS + BADGE_LIVE_CSS` in the
+ * shadow root, like every other piece of the badge.
+ */
+import { esc, href } from "./html.js";
+export { BADGE_LIVE_CSS } from "./css-live.js";
+/**
+ * The label today's badge shows ("Live on the grid", the platform's
+ * `DEFAULT_WATERMARK_TEXT`). The platform resolves the real copy per grid on
+ * the server and passes it in; this is only the default. The designer's page
+ * reads "Live on Grid"; the product copy is kept until the founder rules.
+ */
+export const LIVE_LABEL = "Live on the grid";
+/** A non-negative whole number of milliseconds, as a `--cgb-start` declaration. */
+export function startStyle(delay) {
+    if (delay === undefined || !Number.isFinite(delay))
+        return "";
+    return ` style="--cgb-start:${Math.max(0, Math.round(delay))}ms"`;
+}
+/**
+ * The live badge: a link holding the sign (a white plug glyph, drawn as a
+ * mask so the cut-out can animate), the label, and a screen-reader note that
+ * it opens a new tab.
+ */
+export function liveBadge({ href: url, label = LIVE_LABEL, delay }) {
+    return (`<a class="cgb-live" href="${href(url)}" target="_blank" rel="noopener noreferrer"${startStyle(delay)}>` +
+        `<span class="cgb-live-icon" aria-hidden="true"></span>` +
+        `<span class="cgb-live-label"><span class="cgb-live-clip"><span class="cgb-live-text">${esc(label)}</span></span></span>` +
+        `<span class="cgb-sr"> (opens in a new tab)</span>` +
+        `</a>`);
+}
+//# sourceMappingURL=live.js.map

package/dist/badge/live.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"live.js","sourceRoot":"","sources":["../../src/badge/live.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAErC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE9C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAA;AAc5C,mFAAmF;AACnF,MAAM,UAAU,UAAU,CAAC,KAAyB;IAClD,IAAI,KAAK,KAAK,SAAS,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;QAAE,OAAO,EAAE,CAAA;IAC7D,OAAO,uBAAuB,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,CAAA;AACnE,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,UAAU,EAAE,KAAK,EAAoB;IAClF,OAAO,CACL,6BAA6B,IAAI,CAAC,GAAG,CAAC,8CAA8C,UAAU,CAAC,KAAK,CAAC,GAAG;QACxG,wDAAwD;QACxD,wFAAwF,GAAG,CAAC,KAAK,CAAC,uBAAuB;QACzH,mDAAmD;QACnD,MAAM,CACP,CAAA;AACH,CAAC"}

package/dist/badge/marks.d.ts

@@ -42,6 +42,10 @@ export declare const SHARE_NETWORK: readonly string[];
 export declare const GOOGLE_LOGO: readonly string[];
 /** Phosphor `info`, regular. */
 export declare const INFO: readonly string[];
-/** Where each glyph above came from. Read by the tests and the gallery, not by the badge. */
+/** Phosphor `chat-teardrop-text`, regular. */
+export declare const CHAT_TEARDROP_TEXT: readonly string[];
+/** Phosphor `x`, bold. */
+export declare const X_BOLD: readonly string[];
+/** Where each glyph above came from: the Phosphor file stem (`x-bold` is `x` at bold). Read by the tests and the gallery, not by the badge. */
 export declare const BADGE_MARK_SOURCES: Record<string, string>;
 //# sourceMappingURL=marks.d.ts.map