@cloudgrid-io/ui 0.31.3 → 0.31.5

package/README.md

@@ -128,6 +128,7 @@ rest).
 | `@cloudgrid-io/ui/prose.css` | long-form text |
 | `@cloudgrid-io/ui/tokens.json` | the same values, machine-readable |
 | `@cloudgrid-io/ui/install-content` | the install content as plain data, no React |
+| `@cloudgrid-io/ui/email` | `renderEmail`: the CloudGrid email layout, content in, `{ html, text }` out, no React |
 
 The JSON sets under `tokens/` are DTCG and are the source the CSS is compiled from.
 
@@ -189,6 +190,37 @@ 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`.
 
+## The email layout
+
+```ts
+import { renderEmail } from "@cloudgrid-io/ui/email"
+
+const { html, text } = renderEmail({
+  headline: "expiring-soon",
+  title: "Pricing Grid expires in 5 days.",
+  points: ["Not opened in 25 days", "Expires Friday, October 16"],
+  action: { label: "Keep it", url: "https://my.cloudgrid.io/entities/ent_7a10?action=keep" },
+  note: "Kept pages don't expire.",
+  footer: { lines: ["You get this because you own Pricing Grid."] },
+  assetBaseUrl: "https://assets.example.com/email/", // where YOU serve brand/email/*
+})
+```
+
+No dependencies and no React. Tables and inline styles for Gmail, Outlook and Apple Mail, and
+a plain-text part with every link written out.
+
+**The library names no host.** Pictures and fonts load only from URLs the sender passes:
+
+- `assetBaseUrl`: serve this package's `dist/brand/email/*` (the wordmark, six headline images,
+  the grid tile) from your own domain and pass that base. Without it the email is image-free
+  for every client: the wordmark and headline are live text, which is also what Outlook for
+  Windows always gets.
+- `webFontsUrl`: a stylesheet for Space Grotesk and Manrope, on a host you choose
+  (`GOOGLE_FONTS_EMAIL_CSS` if you accept Google). Without it the system stack renders.
+- `items[].imageUrl`: your own picture URL, used as given.
+
+Previews of every frame, as Apple Mail, Gmail and Outlook: `/gallery/email` in the registry.
+
 ## Versioning
 
 Semver. Token value changes are minor; removals are major.

package/dist/badge/brand.d.ts

@@ -0,0 +1,8 @@
+/** The wordmark, in drawing order, on a 300x71 viewBox. The last path is the socket "o". */
+export declare const WORDMARK_PATHS: readonly string[];
+/** The sign: the socket glyph in a rounded square (LogoMark). */
+export declare const SIGN_BOX = 64;
+export declare const SIGN_RADIUS = 14;
+export declare const SIGN_GLYPH_OFFSET = "translate(-41.58 -3.28)";
+export declare const SIGN_GLYPH_PATH = "M73.507 15.918C79.2174 15.918 83.9637 17.7685 87.6718 21.3962C91.4541 25.0239 93.3088 29.6883 93.3088 35.4631C93.3088 41.2378 91.454 45.9761 87.6718 49.6038C85.0356 52.1829 81.8742 53.8602 78.215 54.6154C77.054 54.855 76.0252 53.9204 76.0252 52.7349V47.5482C76.0252 46.6336 76.6575 45.8569 77.493 45.4848C81.0368 43.9067 83.2962 40.1577 83.2962 35.4872C83.2962 34.0556 83.0947 32.7167 82.7167 31.5015C82.5932 31.1043 82.2168 30.8479 81.8008 30.8479H80.8927V27.1501C80.8923 25.785 79.7842 24.6784 78.4167 24.6783C77.0492 24.6783 75.941 25.785 75.9407 27.1501V30.8479H71.3901V27.1501C71.3897 25.785 70.2801 24.6783 68.9126 24.6783C67.5454 24.6787 66.4369 25.7852 66.4366 27.1501V30.8479H65.2899C64.88 30.8479 64.5075 31.0968 64.381 31.4867C63.9866 32.7028 63.7916 34.0384 63.7916 35.4872C63.7916 38.5967 64.6821 41.188 66.5362 43.261C67.4434 44.239 68.4572 44.9856 69.5949 45.4935C70.4337 45.868 71.0717 46.6457 71.0717 47.5643V52.7493C71.0717 53.9323 70.0469 54.8663 68.8877 54.6302C65.2186 53.8826 62.07 52.2003 59.416 49.6038C55.708 45.9761 53.8545 41.2377 53.8545 35.4631C53.8545 29.6884 55.708 25.0239 59.416 21.3962C63.1241 17.7685 67.7966 15.918 73.507 15.918Z";
+//# sourceMappingURL=brand.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"brand.d.ts","sourceRoot":"","sources":["../../src/badge/brand.ts"],"names":[],"mappings":"AAKA,4FAA4F;AAC5F,eAAO,MAAM,cAAc,EAAE,SAAS,MAAM,EAU3C,CAAA;AAED,iEAAiE;AACjE,eAAO,MAAM,QAAQ,KAAK,CAAA;AAC1B,eAAO,MAAM,WAAW,KAAK,CAAA;AAC7B,eAAO,MAAM,iBAAiB,4BAA4B,CAAA;AAC1D,eAAO,MAAM,eAAe,kpCAAkpC,CAAA"}

package/dist/badge/brand.js

@@ -0,0 +1,22 @@
+// GENERATED by scripts/build-badge.mjs from src/blocks/logo.tsx. Do not edit.
+//
+// The CloudGrid wordmark and sign as plain path data, for the badge. logo.tsx
+// holds the only copy of the brand paths; never redraw them here.
+/** The wordmark, in drawing order, on a 300x71 viewBox. The last path is the socket "o". */
+export const WORDMARK_PATHS = [
+    "M248.047 16.732H257.688V54.2679H248.047V16.732ZM252.868 0C256.057 0 258.726 2.5172 258.726 5.70072C258.726 8.95828 256.131 11.4014 252.868 11.4014C249.605 11.4014 247.009 8.95828 247.009 5.70072C247.009 2.5172 249.605 0 252.868 0Z",
+    "M244.625 16.3623V25.9869C241.585 25.9869 239.063 26.7273 237.135 28.208C235.281 29.6887 234.243 31.9838 234.094 35.1673V54.2684H224.453V16.7325H232.759L233.649 22.7293C235.059 18.9535 238.692 16.3623 244.625 16.3623Z",
+    "M198.628 24.9503C193.362 24.9503 189.654 28.9482 189.654 34.9451C189.654 40.9419 193.51 44.9398 198.628 44.9398C201.149 44.9398 203.374 44.0514 205.228 42.3486C207.082 40.5717 208.046 38.2026 208.12 35.2412V34.797C208.12 31.7615 207.156 29.3924 205.228 27.6156C203.374 25.8387 201.149 24.9503 198.628 24.9503ZM196.625 15.918C201.891 15.918 205.895 17.8429 208.565 21.7668L209.233 16.7324H217.613V53.3799C217.613 58.6364 215.833 62.8564 212.348 66.1139C208.862 69.3715 204.264 71.0003 198.702 71.0003C188.616 71.0003 181.274 66.188 180.31 56.4893H189.728C190.544 60.3392 193.51 62.2641 198.702 62.2641C204.561 62.2641 207.898 58.8585 207.898 53.602V49.0858C205.895 51.9732 201.742 54.0462 196.625 54.0462C191.731 54.0462 187.652 52.2693 184.463 48.7156C181.274 45.0879 179.716 40.4977 179.716 34.9451C179.716 29.3924 181.274 24.8022 184.463 21.2485C187.652 17.6948 191.656 15.918 196.625 15.918Z",
+    "M18.8371 15.918C28.0332 15.918 34.7819 20.8043 36.191 29.9847H26.8466C25.7342 26.6531 22.8419 24.6541 19.0596 24.6541C16.4639 24.6541 14.2391 25.6906 12.5334 27.7636C10.8276 29.7626 9.93769 32.3538 9.93769 35.5373C9.93769 41.7563 13.8683 46.2725 19.2821 46.2725C23.0643 46.2725 26.0308 44.0514 26.9208 41.016H36.3393C34.5594 50.1223 27.8107 55.0827 18.8371 55.0827C13.275 55.0827 8.7511 53.3058 5.26549 49.6781C1.77988 46.0504 0 41.3121 0 35.5373C0 29.8366 1.77988 25.1724 5.26549 21.4706C8.82526 17.7689 13.3491 15.918 18.8371 15.918Z",
+    "M40.3174 0.291016C42.9388 0.373933 48.0589 1.63074 49.958 6.14355V54.2676H40.3174V0.291016Z",
+    "M166.282 0.296875C169.013 0.433575 174.118 1.79168 175.869 6.45312L175.924 6.31055V54.2676H167.617L166.876 49.2334C164.206 53.1572 160.201 55.082 154.936 55.082C149.967 55.0819 145.814 53.2308 142.477 49.4551C139.139 45.6794 137.508 41.0153 137.508 35.4629C137.508 29.9103 139.139 25.3197 142.477 21.5439C145.814 17.7682 149.967 15.9171 155.01 15.917C160.053 15.917 163.835 17.5462 166.282 20.8037V0.296875ZM156.938 24.9492C151.599 24.9492 147.445 29.2439 147.445 35.4629C147.445 41.7557 151.525 46.0498 156.938 46.0498C159.534 46.0498 161.759 45.1614 163.613 43.3105C165.467 41.4597 166.431 38.868 166.431 35.6846V35.2402C166.356 32.0569 165.393 29.6135 163.539 27.7627C161.685 25.9119 159.46 24.9493 156.938 24.9492Z",
+    "M290.975 0.28418C293.179 0.284291 297.607 1.19024 300 4.5459V54.2686H291.694L290.952 49.2344C288.282 53.1581 284.277 55.083 279.012 55.083C274.043 55.0829 269.89 53.2317 266.553 49.4561C263.216 45.6804 261.584 41.0163 261.584 35.4639C261.584 29.9113 263.216 25.3207 266.553 21.5449C269.89 17.7692 274.043 15.9181 279.086 15.918C284.129 15.918 287.912 17.5471 290.359 20.8047V0.222656H290.939L290.975 0.28418ZM281.015 24.9502C275.675 24.9502 271.521 29.2449 271.521 35.4639C271.522 41.7567 275.601 46.0508 281.015 46.0508C283.61 46.0508 285.835 45.1624 287.689 43.3115C289.543 41.4606 290.507 38.869 290.507 35.6855V35.2412C290.433 32.0578 289.469 29.6145 287.615 27.7637C285.761 25.9128 283.536 24.9502 281.015 24.9502Z",
+    "M97.3374 37.7892V16.9668H106.608V37.7892C106.608 42.4744 110.412 46.2725 115.105 46.2725C119.799 46.2725 123.603 42.4744 123.603 37.7892V16.9668H132.873V37.7892C132.873 47.5855 124.918 55.5269 115.105 55.5269C105.292 55.5269 97.3374 47.5855 97.3374 37.7892Z",
+    "M73.507 15.918C79.2174 15.918 83.9637 17.7685 87.6718 21.3962C91.4541 25.0239 93.3088 29.6883 93.3088 35.4631C93.3088 41.2378 91.454 45.9761 87.6718 49.6038C85.0356 52.1829 81.8742 53.8602 78.215 54.6154C77.054 54.855 76.0252 53.9204 76.0252 52.7349V47.5482C76.0252 46.6336 76.6575 45.8569 77.493 45.4848C81.0368 43.9067 83.2962 40.1577 83.2962 35.4872C83.2962 34.0556 83.0947 32.7167 82.7167 31.5015C82.5932 31.1043 82.2168 30.8479 81.8008 30.8479H80.8927V27.1501C80.8923 25.785 79.7842 24.6784 78.4167 24.6783C77.0492 24.6783 75.941 25.785 75.9407 27.1501V30.8479H71.3901V27.1501C71.3897 25.785 70.2801 24.6783 68.9126 24.6783C67.5454 24.6787 66.4369 25.7852 66.4366 27.1501V30.8479H65.2899C64.88 30.8479 64.5075 31.0968 64.381 31.4867C63.9866 32.7028 63.7916 34.0384 63.7916 35.4872C63.7916 38.5967 64.6821 41.188 66.5362 43.261C67.4434 44.239 68.4572 44.9856 69.5949 45.4935C70.4337 45.868 71.0717 46.6457 71.0717 47.5643V52.7493C71.0717 53.9323 70.0469 54.8663 68.8877 54.6302C65.2186 53.8826 62.07 52.2003 59.416 49.6038C55.708 45.9761 53.8545 41.2377 53.8545 35.4631C53.8545 29.6884 55.708 25.0239 59.416 21.3962C63.1241 17.7685 67.7966 15.918 73.507 15.918Z",
+];
+/** The sign: the socket glyph in a rounded square (LogoMark). */
+export const SIGN_BOX = 64;
+export const SIGN_RADIUS = 14;
+export const SIGN_GLYPH_OFFSET = "translate(-41.58 -3.28)";
+export const SIGN_GLYPH_PATH = "M73.507 15.918C79.2174 15.918 83.9637 17.7685 87.6718 21.3962C91.4541 25.0239 93.3088 29.6883 93.3088 35.4631C93.3088 41.2378 91.454 45.9761 87.6718 49.6038C85.0356 52.1829 81.8742 53.8602 78.215 54.6154C77.054 54.855 76.0252 53.9204 76.0252 52.7349V47.5482C76.0252 46.6336 76.6575 45.8569 77.493 45.4848C81.0368 43.9067 83.2962 40.1577 83.2962 35.4872C83.2962 34.0556 83.0947 32.7167 82.7167 31.5015C82.5932 31.1043 82.2168 30.8479 81.8008 30.8479H80.8927V27.1501C80.8923 25.785 79.7842 24.6784 78.4167 24.6783C77.0492 24.6783 75.941 25.785 75.9407 27.1501V30.8479H71.3901V27.1501C71.3897 25.785 70.2801 24.6783 68.9126 24.6783C67.5454 24.6787 66.4369 25.7852 66.4366 27.1501V30.8479H65.2899C64.88 30.8479 64.5075 31.0968 64.381 31.4867C63.9866 32.7028 63.7916 34.0384 63.7916 35.4872C63.7916 38.5967 64.6821 41.188 66.5362 43.261C67.4434 44.239 68.4572 44.9856 69.5949 45.4935C70.4337 45.868 71.0717 46.6457 71.0717 47.5643V52.7493C71.0717 53.9323 70.0469 54.8663 68.8877 54.6302C65.2186 53.8826 62.07 52.2003 59.416 49.6038C55.708 45.9761 53.8545 41.2377 53.8545 35.4631C53.8545 29.6884 55.708 25.0239 59.416 21.3962C63.1241 17.7685 67.7966 15.918 73.507 15.918Z";
+//# sourceMappingURL=brand.js.map

package/dist/badge/brand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand.js","sourceRoot":"","sources":["../../src/badge/brand.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,EAAE;AACF,8EAA8E;AAC9E,kEAAkE;AAElE,4FAA4F;AAC5F,MAAM,CAAC,MAAM,cAAc,GAAsB;IAC/C,wOAAwO;IACxO,0NAA0N;IAC1N,g4BAAg4B;IACh4B,yhBAAyhB;IACzhB,6FAA6F;IAC7F,gtBAAgtB;IAChtB,itBAAitB;IACjtB,mQAAmQ;IACnQ,+oCAA+oC;CAChpC,CAAA;AAED,iEAAiE;AACjE,MAAM,CAAC,MAAM,QAAQ,GAAG,EAAE,CAAA;AAC1B,MAAM,CAAC,MAAM,WAAW,GAAG,EAAE,CAAA;AAC7B,MAAM,CAAC,MAAM,iBAAiB,GAAG,yBAAyB,CAAA;AAC1D,MAAM,CAAC,MAAM,eAAe,GAAG,+oCAA+oC,CAAA"}

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

@@ -0,0 +1,25 @@
+/**
+ * The badge stylesheet's shared half: the root, the panel frame, and the
+ * controls both panels use (the Select look, the switch, the cta button).
+ *
+ * Every rule reads a token by name. The values are declared on `.cgb`, the
+ * badge root, from the generated `palette.ts`, so a closed shadow root carries
+ * the brand with it and the host page's own custom properties never reach in.
+ *
+ * Layout has three answers and one rule each:
+ *
+ *   desktop   panels float beside their tab or above the bubble
+ *   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)
+ *
+ * `data-cgb-layout="desktop"` pins the desktop answer on a narrow screen.
+ */
+/** A phone rule set, written once against `r`, emitted for both roots. */
+export declare function phoneRules(rules: (r: string) => string): string;
+/** A touch rule set, written once against `r`, emitted for `hover: none` and the forced root. */
+export declare function touchRules(rules: (r: string) => string): string;
+export declare const BADGE_BASE_CSS: string;
+//# sourceMappingURL=css-base.d.ts.map

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

@@ -0,0 +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"}

package/dist/badge/css-base.js

@@ -0,0 +1,103 @@
+/**
+ * The badge stylesheet's shared half: the root, the panel frame, and the
+ * controls both panels use (the Select look, the switch, the cta button).
+ *
+ * Every rule reads a token by name. The values are declared on `.cgb`, the
+ * badge root, from the generated `palette.ts`, so a closed shadow root carries
+ * the brand with it and the host page's own custom properties never reach in.
+ *
+ * Layout has three answers and one rule each:
+ *
+ *   desktop   panels float beside their tab or above the bubble
+ *   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)
+ *
+ * `data-cgb-layout="desktop"` pins the desktop answer on a narrow screen.
+ */
+import { BADGE_TOKEN_DECLARATIONS } from "./palette.js";
+/** The two roots a phone rule is written against: the media query's, and the forced one. */
+const PHONE_MEDIA = ".cgb:not([data-cgb-layout=desktop])";
+const PHONE_FORCED = ".cgb[data-cgb-layout=phone]";
+/** A phone rule set, written once against `r`, emitted for both roots. */
+export function phoneRules(rules) {
+    return `@media (max-width:480px){${rules(PHONE_MEDIA)}}${rules(PHONE_FORCED)}`;
+}
+/** A touch rule set, written once against `r`, emitted for `hover: none` and the forced root. */
+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";
+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}
+.cgb[data-cgb-contained]{position:absolute;z-index:auto}
+.cgb *,.cgb *::before,.cgb *::after{box-sizing:border-box}
+.cgb>*{pointer-events:auto}
+.cgb [hidden]{display:none!important}
+.cgb :where(p,h2,h3,ol,ul,pre){margin:0;padding:0}
+.cgb :where(h2,h3,button,input,textarea){font:inherit;color:inherit;margin:0}
+.cgb :where(button){cursor:pointer;background:none;border:0;padding:0;text-align:inherit}
+.cgb :where(a){color:inherit}
+.cgb :where(svg){display:block;flex:none}
+.cgb :focus-visible{${FOCUS}}
+.cgb :focus:not(:focus-visible){outline:none}
+.cgb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+.cgb-wordmark{display:block;height:22px;width:auto;color:var(--cg-text-accent)}
+.cgb-panel{position:absolute;width:340px;max-height:calc(100% - 32px);overflow:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start;` +
+    `padding:18px 18px 16px;background:var(--cg-surface-card);color:var(--cg-text-primary);border:1px solid var(--cg-border-hairline);` +
+    `border-radius:var(--cg-radius-container);box-shadow:var(--cg-shadow-panel),var(--cg-shadow-hover);animation:cgb-in var(--cg-duration-slow) var(--cg-ease-out)}
+.cgb-panel[data-side=right]{right:16px;top:50%;transform:translateY(-50%)}
+.cgb-panel[data-side=left]{left:16px;top:50%;transform:translateY(-50%)}
+.cgb-panel[data-side=corner]{right:16px;bottom:16px}
+@keyframes cgb-in{from{opacity:0}}
+.cgb-head{display:flex;align-items:center;justify-content:space-between}
+.cgb-icon-btn{width:30px;height:30px;border-radius:var(--cg-radius-xs);display:grid;place-items:center;color:var(--cg-text-secondary);transition:background-color var(--cg-duration) var(--cg-ease-out)}
+.cgb-icon-btn:hover{background:var(--cg-surface-raised);color:var(--cg-text-primary)}
+.cgb-icon-btn svg{width:16px;height:16px}
+.cgb-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:var(--cg-body-18);font-weight:var(--cg-weight-bold);line-height:1.3}
+.cgb-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;border-radius:var(--cg-radius-lg);` +
+    `background:var(--cg-tertiary);color:var(--cg-text-on-accent);font-family:var(--cg-font-ui);font-size:var(--cg-body-sm);font-weight:var(--cg-weight-bold);line-height:1;white-space:nowrap;` +
+    `transition:background-color var(--cg-duration) var(--cg-ease-out)}
+.cgb-btn:hover{background:var(--cg-tertiary-press)}
+.cgb-btn svg{width:16px;height:16px}
+.cgb-btn[data-variant=outline]{background:var(--cg-surface-card);border:1px solid var(--cg-border-control);color:var(--cg-text-primary)}
+.cgb-btn[data-variant=outline]:hover{background:var(--cg-surface-raised)}
+.cgb-btn[data-variant=ink]{background:var(--cg-text-primary);color:var(--cg-text-on-primary)}
+.cgb-btn[data-size=sm]{height:28px;padding:0 12px;font-size:var(--cg-caption);border-radius:var(--cg-radius-pill)}
+.cgb-btn[data-block]{display:flex;width:100%}
+.cgb-sel{position:relative;display:inline-block}
+.cgb-sel-trigger{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 8px 0 10px;border:1px solid var(--cg-border-control);` +
+    `border-radius:var(--cg-radius-lg);font-size:var(--cg-body-sm);line-height:1;white-space:nowrap;color:var(--cg-text-primary);transition:border-color var(--cg-duration) var(--cg-ease-out)}
+.cgb-sel-trigger svg{width:16px;height:16px;color:var(--cg-text-muted)}
+.cgb-sel-trigger:focus-visible{outline:none;border-color:var(--cg-text-accent);box-shadow:0 0 0 3px var(--cg-focus-ring)}
+.cgb-menu{position:absolute;right:0;z-index:2;min-width:144px;padding:4px;border-radius:var(--cg-radius-lg);background:var(--cg-surface-card);` +
+    `box-shadow:var(--cg-shadow-card),0 0 0 1px color-mix(in srgb,var(--cg-text-primary) 10%,transparent)}
+.cgb-menu-item{position:relative;display:flex;align-items:center;width:100%;height:30px;padding:0 32px 0 6px;border-radius:var(--cg-radius-md);font-size:var(--cg-body-sm);white-space:nowrap;cursor:default}
+.cgb-menu-item:hover,.cgb-menu-item:focus{background:var(--cg-surface-subtle);outline:none}
+.cgb-menu-item svg{position:absolute;right:8px;width:16px;height:16px;visibility:hidden}
+.cgb-menu-item[aria-selected=true] svg{visibility:visible}
+.cgb-switch{position:relative;flex:none;width:32px;height:18.4px;border-radius:var(--cg-radius-pill);background:var(--cg-border-control);transition:background-color var(--cg-duration) var(--cg-ease-out)}
+.cgb-switch::after{content:"";position:absolute;top:1.2px;left:1.2px;width:16px;height:16px;border-radius:50%;background:var(--cg-surface-card);transition:transform var(--cg-duration) var(--cg-ease-out)}
+.cgb-switch[aria-checked=true]{background:var(--cg-primary)}
+.cgb-switch[aria-checked=true]::after{transform:translateX(13.6px)}
+.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}
+@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}` +
+        `${r} .cgb-scrim{display:block;position:absolute;inset:0;background:var(--cg-scrim)}` +
+        `${r} .cgb-panel textarea{font-size:var(--cg-body-md)}` +
+        // Phone only, and tighter (founder: no step may scroll). The sheet is
+        // capped at 88% of the viewport, 587px on a 375x667 phone, so every step
+        // is drawn to fit that with the type floor kept at 13px.
+        `${r} .cgb-panel{gap:8px;padding:12px 16px 12px}` +
+        `${r} .cgb-wordmark{height:20px}` +
+        `${r} .cgb-icon-btn{width:28px;height:28px}` +
+        `${r} .cgb-title{font-size:var(--cg-body-md)}` +
+        `${r} .cgb-btn{height:34px}`) +
+    "@keyframes cgb-up{from{transform:translateY(24px);opacity:0}}\n")();
+//# sourceMappingURL=css-base.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,7 @@
+/**
+ * The owner half of the badge stylesheet: the tab on the edge and the owner
+ * panel's three steps. Ships in the owner file the badge lazy-loads for the
+ * app's owner only, and assumes `BADGE_BASE_CSS` is already in the shadow root.
+ */
+export declare const BADGE_OWNER_CSS: string;
+//# sourceMappingURL=css-owner.d.ts.map

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

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

package/dist/badge/css-owner.js

@@ -0,0 +1,128 @@
+/**
+ * The owner half of the badge stylesheet: the tab on the edge and the owner
+ * panel's three steps. Ships in the owner file the badge lazy-loads for the
+ * app's owner only, and assumes `BADGE_BASE_CSS` is already in the shadow root.
+ */
+import { phoneRules } from "./css-base.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;` +
+    `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)}
+.cgb-tab .cgb-sign{width:24px;height:24px}
+.cgb-tab-dot{position:absolute;top:9px;left:30px;width:8px;height:8px;border-radius:50%;background:var(--cg-online);box-shadow:0 0 0 2px var(--cg-surface-card)}
+.cgb-tab-label{opacity:0;font-family:var(--cg-font-ui);font-size:var(--cg-body-sm);font-weight:var(--cg-weight-bold);line-height:1;transition:opacity var(--cg-duration) var(--cg-ease-out)}
+.cgb-tab:hover,.cgb-tab:focus-visible,.cgb-tab[data-state=open],.cgb-tab[data-state=peek]{max-width:190px;padding-right:14px}
+.cgb-tab:hover .cgb-tab-label,.cgb-tab:focus-visible .cgb-tab-label,.cgb-tab[data-state=open] .cgb-tab-label,.cgb-tab[data-state=peek] .cgb-tab-label{opacity:1}
+.cgb-tab[data-side=left]{right:auto;left:0;border-right:1px solid var(--cg-border-hairline);border-left:0;border-radius:0 var(--cg-radius-lg) var(--cg-radius-lg) 0;padding:0 12px 0 10px;flex-direction:row-reverse}
+.cgb-tab[data-side=left]:hover,.cgb-tab[data-side=left]:focus-visible,.cgb-tab[data-side=left][data-state=open],.cgb-tab[data-side=left][data-state=peek]{padding-left:14px}
+.cgb-tab[data-side=left] .cgb-tab-dot{left:auto;right:30px}
+.cgb-tab[data-dragging]{cursor:grabbing;transition:none;box-shadow:var(--cg-shadow-hover),var(--cg-shadow-hover),var(--cg-shadow-hover)}
+.cgb-tab[data-hidden]{opacity:0;pointer-events:none}
+.cgb-pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:var(--cg-radius-pill);background:var(--cg-online-fill);` +
+    `font-size:var(--cg-caption);font-weight:var(--cg-weight-medium);line-height:1.46;color:var(--cg-text-primary);white-space:nowrap}
+.cgb-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cg-online)}
+.cgb-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:0 14px;border:1px solid var(--cg-border-control);` +
+    `border-radius:var(--cg-radius-md);background:var(--cg-surface-card);color:var(--cg-text-primary);font-family:var(--cg-font-ui);font-size:var(--cg-body-sm);font-weight:var(--cg-weight-bold);line-height:1;text-decoration:none;` +
+    `transition:background-color var(--cg-duration) var(--cg-ease-out)}
+.cgb-row:hover{background:var(--cg-surface-raised)}
+.cgb-row>svg{width:16px;height:16px;color:var(--cg-text-secondary)}
+.cgb-row[data-tall]{padding:10px 14px;font-family:var(--cg-font-body);font-weight:var(--cg-weight-regular)}
+.cgb-row-lead{display:flex;align-items:center;gap:10px;min-width:0;text-align:left}
+.cgb-row-lead>svg{width:18px;height:18px;color:var(--cg-text-accent)}
+.cgb-row-lead>span{min-width:0}
+.cgb-row-k{display:flex;gap:4px;min-width:0;font-size:var(--cg-body-14);line-height:1.3;white-space:nowrap}
+.cgb-row-k b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:var(--cg-weight-bold)}
+.cgb-row-k span{flex:none;color:var(--cg-text-muted-strong)}
+.cgb-row-s{display:block;margin-top:2px;font-size:var(--cg-caption);line-height:1.3;color:var(--cg-text-secondary);white-space:nowrap}
+.cgb-row-s b{color:var(--cg-text-accent);font-weight:var(--cg-weight-bold)}
+.cgb-spark{margin-left:auto;display:inline-flex;align-items:flex-end;gap:2px;height:22px;flex:none}
+.cgb-spark i{display:block;width:4px;min-height:2px;border-radius:2px;background:var(--cg-primary);opacity:.35}
+.cgb-spark i:last-child{opacity:1}
+.cgb-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
+.cgb-box{border:1px solid var(--cg-border-control);border-radius:var(--cg-radius-md);overflow:hidden}
+.cgb-box .cgb-row{border:0;border-radius:0}
+.cgb-box .cgb-toggle{padding:11px 14px;border-top:1px solid var(--cg-border-hairline);font-family:var(--cg-font-ui);font-size:var(--cg-body-sm);font-weight:var(--cg-weight-bold)}
+.cgb-sec{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
+.cgb-sec h3{display:flex;align-items:baseline;gap:8px;font-size:var(--cg-caption);font-weight:var(--cg-weight-bold);line-height:1.3}
+.cgb-saved{font-size:var(--cg-caption);font-weight:var(--cg-weight-regular);line-height:1.3;color:var(--cg-online-strong)}
+.cgb-seg{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--cg-border-control);border-radius:var(--cg-radius-md);overflow:hidden}
+.cgb-seg button{display:grid;justify-items:center;gap:4px;padding:10px 4px;border-left:1px solid var(--cg-border-control);background:var(--cg-surface-card);` +
+    `font-family:var(--cg-font-ui);font-size:var(--cg-caption);font-weight:var(--cg-weight-bold);line-height:1.2;text-align:center;transition:background-color var(--cg-duration) var(--cg-ease-out)}
+.cgb-seg button:first-child{border-left:0}
+.cgb-seg button:hover{background:var(--cg-surface-raised)}
+.cgb-seg button svg{width:18px;height:18px;color:var(--cg-text-secondary)}
+.cgb-seg button[aria-checked=true]{background:var(--cg-primary);color:var(--cg-text-on-primary)}
+.cgb-seg button[aria-checked=true] svg{color:var(--cg-text-on-primary)}
+.cgb-seg button[data-pending]{background:var(--cg-surface-raised);color:var(--cg-text-primary);box-shadow:inset 0 0 0 1px var(--cg-border-control)}
+.cgb-seg button[data-pending] svg{color:var(--cg-text-primary)}
+.cgb-aslot{position:relative;display:flex;align-items:center;min-height:44px;margin-top:-4px}
+.cgb-aslot .cgb-desc{line-height:1.3}
+.cgb-aslot .cgb-confirm{position:absolute;inset:0;flex-wrap:nowrap;padding:0 6px 0 12px;line-height:1.3}
+.cgb-aslot .cgb-confirm>span:first-child{min-width:0}
+.cgb-aslot .cgb-confirm>span:last-child{flex:none}
+.cgb-srow{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
+.cgb-srow>span{font-size:var(--cg-body-14);color:var(--cg-text-secondary)}
+.cgb-srow .cgb-toggle{width:100%}
+.cgb-srow .cgb-menu{min-width:180px}
+.cgb-opt{position:relative;display:flex;align-items:center;gap:10px;font-size:var(--cg-body-14);cursor:pointer}
+.cgb-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
+.cgb-opt-box{display:grid;place-items:center;flex:none;width:16px;height:16px;border:1px solid var(--cg-border-control);border-radius:50%;background:var(--cg-surface-card)}
+.cgb-opt input[type=checkbox]+.cgb-opt-box{border-radius:4px}
+.cgb-opt input:checked+.cgb-opt-box{border-color:var(--cg-primary)}
+.cgb-opt input[type=radio]:checked+.cgb-opt-box::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--cg-primary)}
+.cgb-opt input[type=checkbox]:checked+.cgb-opt-box{background:var(--cg-primary)}
+.cgb-opt input[type=checkbox]:checked+.cgb-opt-box::after{content:"";width:4px;height:8px;border:solid var(--cg-text-on-primary);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
+.cgb-opt input:focus-visible+.cgb-opt-box{outline:3px solid var(--cg-focus-ring);outline-offset:2px}
+.cgb-spaces{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:-6px;padding-left:2px}
+.cgb-more{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:var(--cg-caption);font-weight:var(--cg-weight-medium);color:var(--cg-text-accent);text-decoration:none}
+.cgb-more:hover{text-decoration:underline;text-underline-offset:2px}
+.cgb-more svg{width:14px;height:14px}
+.cgb-yours{padding-top:12px;border-top:1px solid var(--cg-border-hairline);font-size:var(--cg-caption);color:var(--cg-text-muted-strong)}
+.cgb-confirm{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:10px 12px;border-radius:var(--cg-radius-md);` +
+    `background:var(--cg-expired-fill);border:1px solid var(--cg-expired-border);color:var(--cg-expired-strong);font-size:var(--cg-caption)}
+.cgb-confirm span:last-child{display:inline-flex;gap:6px}
+.cgb-step-head{display:flex;align-items:center;gap:6px;margin-left:-6px}
+.cgb-step-head h2{font-size:var(--cg-body-md);font-weight:var(--cg-weight-bold);line-height:1.3}
+.cgb-sure{display:flex;align-items:center;gap:10px;font-size:var(--cg-caption);color:var(--cg-text-secondary)}
+.cgb-sure svg{width:18px;height:18px;color:var(--cg-online)}
+.cgb-sure b{color:var(--cg-online-strong);font-weight:var(--cg-weight-bold)}
+.cgb-ways{list-style:none;display:grid;gap:10px}
+.cgb-ways li{display:flex;gap:10px;align-items:flex-start}
+.cgb-wn{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--cg-primary-tint);color:var(--cg-text-accent);font-family:var(--cg-font-ui);font-size:var(--cg-caption);font-weight:var(--cg-weight-bold);line-height:1}
+.cgb-wt{font-size:var(--cg-body-14);font-weight:var(--cg-weight-bold);line-height:1.4}
+.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 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);` +
+    `background:var(--cg-surface-card);color:var(--cg-text-muted);transition:color var(--cg-duration) var(--cg-ease-out),border-color var(--cg-duration) var(--cg-ease-out)}
+.cgb-prompt-copy:hover{border-color:var(--cg-border-accent);color:var(--cg-text-accent)}
+.cgb-prompt-copy svg{width:14px;height:14px}
+.cgb-link-box{display:flex;align-items:center;gap:8px;height:44px;padding:0 6px 0 12px;border:1px solid var(--cg-border-control);border-radius:var(--cg-radius-md)}
+.cgb-link-box span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--cg-body-14);color:var(--cg-text-secondary)}
+.cgb-link-box .cgb-btn svg{width:14px;height:14px}
+.cgb-who{display:flex;gap:8px;align-items:flex-start;font-size:var(--cg-caption);color:var(--cg-text-secondary)}
+.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}` +
+        `${r} .cgb-row{min-height:40px;padding:0 12px}` +
+        // The two tall rows keep their two lines (never cut a figure); only a
+        // very long grid name ellipses, at its end.
+        `${r} .cgb-row[data-tall]{gap:8px;padding:6px 12px}` +
+        `${r} .cgb-row-lead{flex:1;gap:8px}` +
+        `${r} .cgb-row-s{margin-top:1px}` +
+        `${r} .cgb-spark{height:18px}` +
+        `${r} .cgb-box .cgb-toggle{padding:9px 12px}` +
+        `${r} .cgb-seg button{padding:6px 4px;gap:2px}` +
+        `${r} .cgb-seg button svg{width:16px;height:16px}` +
+        `${r} .cgb-aslot{min-height:40px;margin-top:-2px}` +
+        `${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

@@ -0,0 +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;AAE1C,MAAM,CAAC,MAAM,eAAe,GAAW,eAAe,CAAC,CAAC,GAAG,EAAE,CAC3D,iKAAiK;IACjK,8JAA8J;IAC9J,mKAAmK;IACnK;;;;;;;;;;;gJAW8I;IAC9I;;qKAEmK;IACnK,kOAAkO;IAClO;;;;;;;;;;;;;;;;;;;;;;;6JAuB2J;IAC3J;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uJA+BqJ;IACrJ;;;;;;;;;;;;;;;;;2LAiByL;IACzL;;;;;;;;;CASD;IACC,UAAU,CACR,CAAC,CAAC,EAAE,EAAE,CACJ,GAAG,CAAC,wBAAwB;QAC5B,GAAG,CAAC,2CAA2C;QAC/C,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,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"}

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

@@ -0,0 +1,7 @@
+/**
+ * The visitor half of the badge stylesheet: the feedback bubble, its close x,
+ * the feedback panel and its sign-in step. Ships in the badge's main file,
+ * after `BADGE_BASE_CSS`.
+ */
+export declare const BADGE_VISITOR_CSS: string;
+//# sourceMappingURL=css-visitor.d.ts.map

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

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

package/dist/badge/css-visitor.js

@@ -0,0 +1,75 @@
+/**
+ * The visitor half of the badge stylesheet: the feedback bubble, its close x,
+ * 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";
+export const BADGE_VISITOR_CSS = /* @__PURE__ */ (() => `.cgb-bubble-wrap{position:absolute;right:16px;bottom:24px}
+.cgb-bubble{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);animation:cgb-drift 3.6s ease-in-out infinite;transition:box-shadow var(--cg-duration) var(--cg-ease-out)}
+.cgb-bubble::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%)}
+.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-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)}
+.cgb-bubble-ic:first-child{margin-left:0;transform:rotate(-8deg)}
+.cgb-bubble-ic:nth-child(3){transform:rotate(8deg)}
+.cgb-bubble-ic svg{width:18px;height:18px}
+.cgb-bubble-ic[data-tone=like]{background:var(--cg-primary-tint);color:var(--cg-primary)}
+.cgb-bubble-ic[data-tone=fix]{background:var(--cg-cyan-200);color:var(--cg-accent)}
+.cgb-bubble-ic[data-tone=talk]{background:var(--cg-lime-200);color:var(--cg-online-strong)}
+.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-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;` +
+    `transition:background-color var(--cg-duration) var(--cg-ease-out),border-color var(--cg-duration) var(--cg-ease-out)}
+.cgb-rxb svg{width:20px;height:20px}
+.cgb-rxb:hover{background:var(--cg-surface-raised)}
+.cgb-rxb[aria-pressed=true]{background:var(--cg-primary-tint);border-color:var(--cg-border-accent);color:var(--cg-text-accent)}
+.cgb-rxc{color:var(--cg-text-muted-strong);font-variant-numeric:tabular-nums}
+.cgb-rxb[aria-pressed=true] .cgb-rxc{color:var(--cg-text-accent)}
+.cgb-note{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding-top:12px;border-top:1px solid var(--cg-border-hairline)}
+.cgb-note-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
+.cgb-note-label{font-size:var(--cg-body-14);font-weight:var(--cg-weight-bold)}
+.cgb-textarea,.cgb-input{display:block;width:100%;border:1px solid var(--cg-border-control);border-radius:var(--cg-radius-lg);background:transparent;` +
+    `padding:8px 10px;font-size:var(--cg-body-sm);line-height:1.45;color:var(--cg-text-primary);transition:border-color var(--cg-duration) var(--cg-ease-out)}
+.cgb-textarea{resize:none;min-height:76px}
+.cgb-input{height:40px}
+.cgb-textarea::placeholder,.cgb-input::placeholder{color:var(--cg-text-muted);opacity:1}
+.cgb-textarea:focus-visible,.cgb-input:focus-visible{outline:none;border-color:var(--cg-text-accent);box-shadow:0 0 0 3px var(--cg-focus-ring)}
+.cgb-note-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}
+.cgb-hint{font-size:var(--cg-caption);color:var(--cg-text-muted-strong);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.cgb-sent{display:flex;align-items:center;gap:8px;font-size:var(--cg-body-14);color:var(--cg-online-strong)}
+.cgb-sent svg{width:18px;height:18px;color:var(--cg-online)}
+.cgb-made{justify-self:start;font-size:var(--cg-caption);color:var(--cg-text-muted-strong);text-decoration:underline;text-underline-offset:2px}
+.cgb-made:hover{color:var(--cg-text-primary)}
+.cgb-signin{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
+.cgb-signin .cgb-hint{white-space:normal}
+.cgb-method{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:44px;border:1px solid var(--cg-border-control);border-radius:var(--cg-radius-xl);` +
+    `background:var(--cg-surface-card);font-size:var(--cg-body-sm);font-weight:var(--cg-weight-medium);transition:background-color var(--cg-duration) var(--cg-ease-out)}
+.cgb-method:hover{background:var(--cg-surface-raised)}
+.cgb-method svg{position:absolute;left:16px;width:20px;height:20px}
+.cgb-or{display:flex;align-items:center;gap:12px;font-size:var(--cg-caption);font-weight:var(--cg-weight-medium);color:var(--cg-text-muted-strong)}
+.cgb-or::before,.cgb-or::after{content:"";flex:1;height:1px;background:var(--cg-border-hairline)}
+.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}` +
+        `${r} .cgb-signin{gap:8px}` +
+        `${r} .cgb-method{height:40px}` +
+        `${r} .cgb-input{height:38px}`))();
+//# sourceMappingURL=css-visitor.js.map

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

@@ -0,0 +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;AAEtD,MAAM,CAAC,MAAM,iBAAiB,GAAW,eAAe,CAAC,CAAC,GAAG,EAAE,CAC7D;yKACuK;IACvK;;;;;;;;;;;;;;6GAc2G;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"}

package/dist/badge/html.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The badge's markup helpers: escaping, glyphs, the wordmark and the sign.
+ *
+ * Every builder in this module returns an HTML STRING. The badge inserts it into
+ * its own closed shadow root, so nothing here touches the DOM, and the same
+ * strings render in the gallery and in a node test.
+ *
+ * Every string a caller passes is text, never HTML: it is escaped wherever it
+ * lands. A URL is attribute-escaped and refused (`#`) when its scheme is
+ * anything other than http or https.
+ */
+/** Text to HTML text, safe in an element body and in a quoted attribute. */
+export declare function esc(value: string | number): string;
+/**
+ * A link target, attribute-escaped. Anything but http(s) becomes `#`: the URLs
+ * here come from the API, and a `javascript:` one must never become a link.
+ * Control characters are dropped before the scheme is read, as a browser does.
+ */
+export declare function href(url: string): string;
+/** One glyph: Phosphor path data on its 256 canvas, in `currentColor`. */
+export declare function glyph(paths: readonly string[], cls?: string): string;
+/** The CloudGrid wordmark, `Logo`'s paths, named "CloudGrid". */
+export declare function wordmark(cls?: string): string;
+/** The CloudGrid sign, `LogoMark`'s brand tone. Decorative: the control around it carries the name. */
+export declare function sign(cls?: string): string;
+//# sourceMappingURL=html.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../src/badge/html.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAYH,4EAA4E;AAC5E,wBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAElD;AAED;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAKxC;AAED,0EAA0E;AAC1E,wBAAgB,KAAK,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,EAAE,GAAG,SAAK,GAAG,MAAM,CAMhE;AAED,iEAAiE;AACjE,wBAAgB,QAAQ,CAAC,GAAG,SAAiB,GAAG,MAAM,CAMrD;AAED,uGAAuG;AACvG,wBAAgB,IAAI,CAAC,GAAG,SAAa,GAAG,MAAM,CAO7C"}

package/dist/badge/html.js

@@ -0,0 +1,55 @@
+/**
+ * The badge's markup helpers: escaping, glyphs, the wordmark and the sign.
+ *
+ * Every builder in this module returns an HTML STRING. The badge inserts it into
+ * its own closed shadow root, so nothing here touches the DOM, and the same
+ * strings render in the gallery and in a node test.
+ *
+ * Every string a caller passes is text, never HTML: it is escaped wherever it
+ * lands. A URL is attribute-escaped and refused (`#`) when its scheme is
+ * anything other than http or https.
+ */
+import { SIGN_BOX, SIGN_GLYPH_OFFSET, SIGN_GLYPH_PATH, SIGN_RADIUS, WORDMARK_PATHS } from "./brand.js";
+const ESCAPES = {
+    "&": "&",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;",
+};
+/** Text to HTML text, safe in an element body and in a quoted attribute. */
+export function esc(value) {
+    return String(value).replace(/[&<>"']/g, (c) => ESCAPES[c] ?? c);
+}
+/**
+ * A link target, attribute-escaped. Anything but http(s) becomes `#`: the URLs
+ * here come from the API, and a `javascript:` one must never become a link.
+ * Control characters are dropped before the scheme is read, as a browser does.
+ */
+export function href(url) {
+    const probe = String(url).trim().replace(/[\u0000- \u007f]/g, "");
+    const scheme = probe.match(/^([a-z][a-z0-9+.-]*):/i);
+    if (scheme && !/^https?$/i.test(scheme[1]))
+        return "#";
+    return esc(String(url).trim());
+}
+/** One glyph: Phosphor path data on its 256 canvas, in `currentColor`. */
+export function glyph(paths, cls = "") {
+    return (`<svg${cls ? ` class="${cls}"` : ""} viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">` +
+        paths.map((d) => `<path d="${d}"/>`).join("") +
+        "</svg>");
+}
+/** The CloudGrid wordmark, `Logo`'s paths, named "CloudGrid". */
+export function wordmark(cls = "cgb-wordmark") {
+    return (`<svg class="${cls}" viewBox="0 0 300 71" fill="currentColor" role="img" aria-label="CloudGrid">` +
+        WORDMARK_PATHS.map((d) => `<path d="${d}"/>`).join("") +
+        "</svg>");
+}
+/** The CloudGrid sign, `LogoMark`'s brand tone. Decorative: the control around it carries the name. */
+export function sign(cls = "cgb-sign") {
+    return (`<svg class="${cls}" viewBox="0 0 ${SIGN_BOX} ${SIGN_BOX}" aria-hidden="true">` +
+        `<rect width="${SIGN_BOX}" height="${SIGN_BOX}" rx="${SIGN_RADIUS}" fill="var(--cg-primary)"/>` +
+        `<g transform="${SIGN_GLYPH_OFFSET}" fill="var(--cg-text-on-primary)"><path d="${SIGN_GLYPH_PATH}"/></g>` +
+        "</svg>");
+}
+//# sourceMappingURL=html.js.map

package/dist/badge/html.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html.js","sourceRoot":"","sources":["../../src/badge/html.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,eAAe,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAEtG,MAAM,OAAO,GAA2B;IACtC,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,MAAM;IACX,GAAG,EAAE,MAAM;IACX,GAAG,EAAE,QAAQ;IACb,GAAG,EAAE,OAAO;CACb,CAAA;AAED,4EAA4E;AAC5E,MAAM,UAAU,GAAG,CAAC,KAAsB;IACxC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAA;AAClE,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,IAAI,CAAC,GAAW;IAC9B,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAA;IACjE,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAA;IACpD,IAAI,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAAE,OAAO,GAAG,CAAA;IACtD,OAAO,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,CAAA;AAChC,CAAC;AAED,0EAA0E;AAC1E,MAAM,UAAU,KAAK,CAAC,KAAwB,EAAE,GAAG,GAAG,EAAE;IACtD,OAAO,CACL,OAAO,GAAG,CAAC,CAAC,CAAC,WAAW,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,gEAAgE;QACnG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;QAC7C,QAAQ,CACT,CAAA;AACH,CAAC;AAED,iEAAiE;AACjE,MAAM,UAAU,QAAQ,CAAC,GAAG,GAAG,cAAc;IAC3C,OAAO,CACL,eAAe,GAAG,+EAA+E;QACjG,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;QACtD,QAAQ,CACT,CAAA;AACH,CAAC;AAED,uGAAuG;AACvG,MAAM,UAAU,IAAI,CAAC,GAAG,GAAG,UAAU;IACnC,OAAO,CACL,eAAe,GAAG,kBAAkB,QAAQ,IAAI,QAAQ,uBAAuB;QAC/E,gBAAgB,QAAQ,aAAa,QAAQ,SAAS,WAAW,8BAA8B;QAC/F,iBAAiB,iBAAiB,+CAA+C,eAAe,SAAS;QACzG,QAAQ,CACT,CAAA;AACH,CAAC"}

package/dist/badge/index.d.ts

@@ -0,0 +1,43 @@
+/**
+ * THE ON-PAGE BADGE'S LOOK, FRAMEWORK-FREE (ui#299).
+ *
+ * The platform's badge (`packages/badge`) is vanilla TypeScript in a closed
+ * shadow root, running inside other people's apps. It builds from this module
+ * as a devDependency, inlined at build time, so there is no runtime dependency
+ * and no React anywhere in the badge's path. This module supplies:
+ *
+ *   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
+ *                    sign-in step, and the Select, switch and `PromptBlock`
+ *                    looks they use
+ *   the glyphs       Phosphor path data, generated with the library's marks
+ *   the type         the two family stacks and the font files the badge needs;
+ *                    the platform hosts and registers the files, this module
+ *                    never loads a font
+ *
+ * ```ts
+ * import { BADGE_BASE_CSS, BADGE_VISITOR_CSS, badgeRoot, bubble } from "@cloudgrid-io/ui/badge/visitor"
+ * shadow.innerHTML = `<style>${BADGE_BASE_CSS}${BADGE_VISITOR_CSS}</style>` + badgeRoot(bubble())
+ * ```
+ *
+ * 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/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.
+ *
+ * Behaviour is the badge's. Each control carries a `data-action` and the ARIA
+ * state the badge keeps in step, so one delegated listener per panel is enough
+ * and the first paint is already correct.
+ */
+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 declare const BADGE_CSS: string;
+//# sourceMappingURL=index.d.ts.map