style(embed): give <ote-subscribe> badges the colored-pill icon look

layout="badges" triggers now match the icon+solid-color badge design this
element was ported from (calendar icon on blue, feed icon on RSS orange),
with per-group colors overridable via --ote-subscribe-ics-color/
-rss-color/-ote-color. layout="menu"'s single trigger is unchanged.

Left under CHANGELOG's Unreleased heading rather than folded into the
already-tagged/published v0.5.0.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: hhkaos

apps/embed/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ## Unreleased
 
+### Changed
+
+- `<ote-subscribe layout="badges">` triggers now match the colored-pill
+  icon+text badge design this element was ported from (a distinct
+  currentColor icon and solid background per group — calendar icon on
+  `--ote-subscribe-ics-color`/`--ote-subscribe-ote-color`, feed icon on
+  `--ote-subscribe-rss-color`), instead of the plain neutral soft-accent
+  button. `layout="menu"`'s single trigger is unchanged — it's a generic
+  action button, not a feed-type-branded badge. All three colors are
+  overridable via those CSS custom properties.
+
 ## 0.5.0
 
 ### Added

apps/embed/src/subscribe-render.ts

@@ -17,6 +17,9 @@ const STRINGS = {
     calendarGroup: "Calendar",
     rssGroup: "RSS",
     oteGroup: "OTE feed",
+    icsBadge: "ICS",
+    rssBadge: "RSS feed",
+    oteBadge: "OTE feed",
     google: "Subscribe with Google Calendar",
     webcal: "Subscribe with app (Apple Calendar, Outlook desktop…)",
     icsDownload: "Open/download ICS",
@@ -33,6 +36,9 @@ const STRINGS = {
     calendarGroup: "Calendario",
     rssGroup: "RSS",
     oteGroup: "Feed OTE",
+    icsBadge: "ICS",
+    rssBadge: "Feed RSS",
+    oteBadge: "Feed OTE",
     google: "Suscribirse con Google Calendar",
     webcal: "Suscribirse con app (Apple Calendar, Outlook de escritorio…)",
     icsDownload: "Abrir/descargar ICS",
@@ -59,6 +65,13 @@ interface RenderGroup {
   items: RenderItem[];
 }
 
+// Simple currentColor outline icons, small enough to inline directly — no icon font/sprite dependency for a widget that has to work standalone in a Shadow DOM.
+const ICONS: Record<GroupKey, string> = {
+  ics: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4.5" width="18" height="16" rx="2"/><path d="M8 2.5v4M16 2.5v4M3 9.5h18"/></svg>`,
+  rss: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1" fill="currentColor" stroke="none"/></svg>`,
+  ote: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1" fill="currentColor" stroke="none"/></svg>`,
+};
+
 const ICS_TOKENS: readonly ShowToken[] = ["google", "webcal", "ics-download"];
 const RSS_TOKENS: readonly ShowToken[] = ["feedly", "feed-protocol", "rss-download"];
 const OTE_TOKENS: readonly ShowToken[] = ["ote-reader", "ote-preview", "json-download"];
@@ -139,6 +152,7 @@ function renderTrigger(
     disabled: boolean;
     open: boolean;
     menuId: string;
+    iconSvg?: string;
     buildMenuContent: () => HTMLElement;
     onClick: () => void;
   },
@@ -152,6 +166,12 @@ function renderTrigger(
   trigger.setAttribute("aria-expanded", String(options.open));
   trigger.setAttribute("aria-label", options.ariaLabel);
 
+  if (options.iconSvg) {
+    const icon = el("span", "icon");
+    icon.innerHTML = options.iconSvg;
+    trigger.append(icon);
+  }
+
   const slot = document.createElement("slot");
   slot.name = options.slotName;
   slot.textContent = options.fallbackLabel;
@@ -192,15 +212,21 @@ export function renderSubscribe(container: HTMLElement, state: SubscribeState):
   }
 
   if (state.layout === "badges") {
+    const badgeLabel: Record<GroupKey, string> = {
+      ics: strings.icsBadge,
+      rss: strings.rssBadge,
+      ote: strings.oteBadge,
+    };
     for (const group of groups) {
       renderTrigger(container, {
         groupKey: group.key,
         slotName: `${group.key}-trigger`,
-        fallbackLabel: group.label,
+        fallbackLabel: badgeLabel[group.key],
         ariaLabel: group.label,
         disabled: false,
         open: state.openGroup === group.key,
         menuId: `menu-${state.instanceId}-${group.key}`,
+        iconSvg: ICONS[group.key],
         buildMenuContent: () => buildMenu(`menu-${state.instanceId}-${group.key}`, group.items),
         onClick: () => state.onToggle(group.key),
       });

apps/embed/src/subscribe.css.ts

@@ -18,6 +18,9 @@ export const SUBSCRIBE_CSS = `
   --ote-accent-hover: #2a46a8;
   --ote-accent-soft: #eef1fb;
   --ote-radius: 8px;
+  --ote-subscribe-ics-color: var(--ote-accent);
+  --ote-subscribe-rss-color: #ee7203;
+  --ote-subscribe-ote-color: var(--ote-accent);
   font-family: var(--ote-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
   font-size: var(--ote-font-size, 1rem);
   color: var(--ote-text);
@@ -58,6 +61,7 @@ export const SUBSCRIBE_CSS = `
 .trigger {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 0.35rem;
   min-height: 2rem;
   padding: 0.35rem 0.65rem;
@@ -69,6 +73,7 @@ export const SUBSCRIBE_CSS = `
   font-size: 0.8125rem;
   font-weight: 600;
   line-height: 1.2;
+  text-align: center;
   cursor: pointer;
 }
 
@@ -85,6 +90,59 @@ export const SUBSCRIBE_CSS = `
   opacity: 0.5;
 }
 
+.icon {
+  display: inline-flex;
+  width: 1.1em;
+  height: 1.1em;
+  flex: 0 0 auto;
+}
+
+.icon svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* The colored-pill "badge" look (layout="badges"), matching the icon+text
+   badge design this element was ported from. The plain layout="menu"
+   trigger keeps the neutral soft-accent style above — it's a generic
+   action button, not a feed-type-branded badge. */
+.trigger[data-group="ics"],
+.trigger[data-group="rss"],
+.trigger[data-group="ote"] {
+  border-radius: 999px;
+  border-color: transparent;
+  padding: 0.4rem 0.9rem;
+  color: #fff;
+}
+
+.trigger[data-group="ics"] {
+  background: var(--ote-subscribe-ics-color);
+}
+
+.trigger[data-group="rss"] {
+  background: var(--ote-subscribe-rss-color);
+}
+
+.trigger[data-group="ote"] {
+  background: var(--ote-subscribe-ote-color);
+}
+
+.trigger[data-group="ics"]:hover,
+.trigger[data-group="ics"]:focus-visible,
+.trigger[data-group="ics"][aria-expanded="true"],
+.trigger[data-group="rss"]:hover,
+.trigger[data-group="rss"]:focus-visible,
+.trigger[data-group="rss"][aria-expanded="true"],
+.trigger[data-group="ote"]:hover,
+.trigger[data-group="ote"]:focus-visible,
+.trigger[data-group="ote"][aria-expanded="true"] {
+  border-color: transparent;
+  color: #fff;
+  filter: brightness(0.92);
+  outline: none;
+}
+
 .menu {
   position: absolute;
   inset-block-start: calc(100% + 0.25rem);