sid-ui 0.1.1 → 0.1.3

package/README.md

@@ -37,6 +37,18 @@ Next.js apps add `sid-ui` to `transpilePackages`, because the package ships Type
 | `sid-ui/places` | Place types and helpers |
 | `sid-ui/geoapify` | Server helper for place search. Pass `process.env.GEOAPIFY_API_KEY`. |
 | `sid-ui/brand-name` | Product name constant, without the component barrel |
+| `sid-ui/browser-theme` | `theme-color` values for the browser chrome, for server layouts |
+
+## Catalog
+
+The component catalog is the `sid-ui-theme` app in `theme/`. It is a static site on GitHub Pages: https://sid0709.github.io/sid-ui/
+
+```bash
+bun run dev:theme
+bun run build:theme
+```
+
+Address autocomplete stays on the product apps. GitHub Pages cannot keep a Geoapify key on a server.
 
 ## Theme source
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sid-ui",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "packageManager": "bun@1.4.2",
   "description": "React components, tokens, and theme used by Joined products.",
   "repository": {
@@ -13,6 +13,7 @@
   "homepage": "https://github.com/sid0709/sid-ui#readme",
   "keywords": ["react", "design-system", "components", "ui"],
   "sideEffects": ["*.css"],
+  "workspaces": ["theme"],
   "files": ["src", "!src/**/*.test.ts", "styles", "styles.css", "README.md"],
   "types": "./src/components/index.ts",
   "main": "./src/components/index.ts",
@@ -21,6 +22,7 @@
     "./places": "./src/components/places.ts",
     "./geoapify": "./src/places/geoapify.ts",
     "./brand-name": "./src/brand/name.ts",
+    "./browser-theme": "./src/brand/chrome.ts",
     "./styles.css": "./styles.css",
     "./styles/astryx.css": "./styles/astryx.css",
     "./styles/components.css": "./styles/components.css",
@@ -37,6 +39,8 @@
     "typecheck": "tsc --noEmit --incremental false -p tsconfig.json",
     "test": "bun test",
     "theme:build": "astryx theme build src/theme/joined.theme.ts -o src/theme/theme.css",
+    "dev:theme": "bun --filter sid-ui-theme dev",
+    "build:theme": "bun --filter sid-ui-theme build",
     "prepublishOnly": "bun run typecheck && bun test"
   },
   "dependencies": {

package/src/brand/BrandFooter.tsx

@@ -1,3 +1,5 @@
+import type { ReactNode } from "react";
+
 import { JoinedLogo } from "./JoinedLogo";
 import { JoinedMark } from "./JoinedMark";
 
@@ -11,14 +13,20 @@ export interface BrandFooterProps {
   href?: string;
   align?: "center" | "start";
   className?: string;
+  /** More footer content on its own line under the sign-off, such as legal links. */
+  children?: ReactNode;
 }
 
-/** A quiet sign-off under landing, auth, and error pages: the symbol, a lead, and the wordmark. */
+/**
+ * A quiet sign-off under landing, auth, and error pages: the symbol, a lead, and the
+ * wordmark. It is the page's footer landmark, so put the legal links inside it.
+ */
 export function BrandFooter({
   lead = "Part of",
   href,
   align = "center",
   className,
+  children,
 }: BrandFooterProps) {
   const classes = ["os-brand-footer", align === "start" && "os-brand-footer-start", className]
     .filter(Boolean)
@@ -40,6 +48,7 @@ export function BrandFooter({
       ) : (
         <span className="os-brand-footer-link">{signOff}</span>
       )}
+      {children && <div className="os-brand-footer-extra">{children}</div>}
     </footer>
   );
 }

package/src/brand/chrome.ts

@@ -0,0 +1,11 @@
+/**
+ * The browser's own chrome color (`<meta name="theme-color">`), per color scheme.
+ * It matches `--color-background-surface`, the top bar every app shell paints,
+ * so the mobile address bar runs straight into the header. A meta tag cannot
+ * read a CSS variable, so the values live here; a test keeps them equal to the theme.
+ * Also exported alone as `sid-ui/browser-theme` for server layouts.
+ */
+export const BROWSER_THEME_COLOR = {
+  light: "#fbfcff",
+  dark: "#1a1b22",
+} as const;

package/src/brand/index.ts

@@ -1,4 +1,5 @@
 export { BRAND_NAME } from "./name";
+export { BROWSER_THEME_COLOR } from "./chrome";
 export { JoinedLogo } from "./JoinedLogo";
 export type { JoinedLogoProps, JoinedLogoVariant } from "./JoinedLogo";
 export { JoinedMark } from "./JoinedMark";

package/src/components/Charts.tsx

@@ -35,13 +35,13 @@ export function SegmentBar({
     )
     .join(", ");
   return (
-    <div className="os-segments">
-      <div className="os-segment-track" role="img" aria-label={summary}>
+    <div className="os-segment-bar">
+      <div className="os-segment-bar-track" role="img" aria-label={summary}>
         {segments.map((segment, index) =>
           shares[index] ? (
             <span
               key={segment.label}
-              className="os-segment"
+              className="os-segment-bar-fill"
               data-tone={segment.tone ?? "blue"}
               style={{ width: `${shares[index]}%` }}
             />
@@ -49,10 +49,10 @@ export function SegmentBar({
         )}
       </div>
       {hasLegend ? (
-        <ul className="os-segment-legend">
+        <ul className="os-segment-bar-legend">
           {segments.map((segment) => (
             <li key={segment.label}>
-              <span className="os-segment-key" data-tone={segment.tone ?? "blue"} />
+              <span className="os-segment-bar-key" data-tone={segment.tone ?? "blue"} />
               <span>{segment.label}</span>
               <strong>{segment.display ?? segment.value}</strong>
             </li>

package/src/components/ConsentBanner.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from "react";
+
+export interface ConsentBannerProps {
+  /** Short heading, e.g. "Cookies on Joined". Also names the region for assistive tech. */
+  title: string;
+  /** One or two sentences on what is being asked. */
+  description: ReactNode;
+  /** The choices, most permissive last — usually a secondary and a primary Button. */
+  actions: ReactNode;
+  /** A quiet link to the full policy, shown under the description. */
+  link?: ReactNode;
+  /**
+   * `fixed` floats above the page at the bottom of the viewport. `inline` sits in
+   * the flow, for previews and settings pages that repeat the question.
+   */
+  placement?: "fixed" | "inline";
+}
+
+/**
+ * A request for consent that waits for an answer: cookies, tracking, a new terms
+ * version. It floats at the bottom of the viewport, a card-width panel on wide
+ * screens and an edge-to-edge sheet on phones, and never covers the whole page.
+ */
+export function ConsentBanner({
+  title,
+  description,
+  actions,
+  link,
+  placement = "fixed",
+}: ConsentBannerProps) {
+  return (
+    <section
+      className={placement === "fixed" ? "os-consent os-consent-fixed" : "os-consent"}
+      aria-label={title}
+    >
+      <div className="os-consent-body">
+        <h2 className="os-consent-title">{title}</h2>
+        <p className="os-consent-description">{description}</p>
+        {link && <div className="os-consent-link">{link}</div>}
+      </div>
+      <div className="os-consent-actions">{actions}</div>
+    </section>
+  );
+}

package/src/components/KanbanBoard.tsx

@@ -385,7 +385,7 @@ export function KanbanBoard<T extends KanbanItemBase>({
   );
 
   return (
-    <ScrollableArea label={label} axis="inline">
+    <ScrollableArea label={label} axis="inline" className="os-kanban-scroller">
       <VisuallyHidden>
         <span id={hintId}>{KEY_HINT}</span>
         <span aria-live="polite">{announcement}</span>

package/src/components/UptimeBar.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useState } from "react";
+
+/** How a day went: fine, degraded, down, or nothing measured yet. */
+export type UptimeTone = "up" | "degraded" | "down" | "none";
+
+export type UptimeDay = {
+  /** Shown as the tip's title, e.g. "Oct 11, 2026". */
+  label: string;
+  tone: UptimeTone;
+  /** One line per fact in the tip, e.g. "99.98% uptime", "Slow search". */
+  details?: string[];
+};
+
+const TONE_LABEL: Record<UptimeTone, string> = {
+  up: "No downtime",
+  degraded: "Degraded",
+  down: "Outage",
+  none: "No data",
+};
+
+/** Keeps the tip inside the bar near either end. */
+const EDGE_SHARE = 0.15;
+
+/**
+ * A status-page history: one slim bar per day, oldest on the left, coloured by how the
+ * day went. Each bar reads out its date and details on hover or focus.
+ */
+export function UptimeBar({
+  days,
+  label,
+  startLabel,
+  endLabel,
+  summary,
+}: {
+  days: UptimeDay[];
+  /** Accessible name for the row of days, e.g. "API uptime, last 90 days". */
+  label: string;
+  /** Under the left end, e.g. "90 days ago". */
+  startLabel?: string;
+  /** Under the right end, e.g. "Today". */
+  endLabel?: string;
+  /** Centered under the bars, e.g. "99.98% uptime". */
+  summary?: string;
+}) {
+  const [active, setActive] = useState<number | null>(null);
+  const align = (index: number) => {
+    const share = days.length > 1 ? index / (days.length - 1) : 0.5;
+    if (share < EDGE_SHARE) return "start";
+    if (share > 1 - EDGE_SHARE) return "end";
+    return "center";
+  };
+
+  return (
+    <div className="os-uptime">
+      <div className="os-uptime-days" role="group" aria-label={label}>
+        {days.map((day, index) => {
+          const details = day.details?.length ? day.details : [TONE_LABEL[day.tone]];
+          return (
+            <span
+              key={`${day.label}-${index}`}
+              className="os-uptime-day"
+              data-tone={day.tone}
+              tabIndex={0}
+              role="img"
+              aria-label={`${day.label}: ${details.join(", ")}`}
+              onPointerEnter={() => setActive(index)}
+              onPointerLeave={() => setActive(null)}
+              onFocus={() => setActive(index)}
+              onBlur={() => setActive(null)}
+            >
+              {active === index ? (
+                <span className="os-chart-tip" data-align={align(index)} role="presentation">
+                  <span className="os-chart-tip-title">{day.label}</span>
+                  {details.map((detail) => (
+                    <span key={detail} className="os-chart-tip-row">
+                      {detail}
+                    </span>
+                  ))}
+                </span>
+              ) : null}
+            </span>
+          );
+        })}
+      </div>
+      {startLabel || endLabel || summary ? (
+        <div className="os-uptime-axis">
+          <span>{startLabel}</span>
+          <span className="os-uptime-summary">{summary}</span>
+          <span>{endLabel}</span>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/index.ts

@@ -184,6 +184,8 @@ export { FunnelChart } from "./FunnelChart";
 export type { FunnelStage } from "./FunnelChart";
 export { HeatmapCalendar } from "./HeatmapCalendar";
 export type { HeatmapDay } from "./HeatmapCalendar";
+export { UptimeBar } from "./UptimeBar";
+export type { UptimeDay, UptimeTone } from "./UptimeBar";
 export { ChartLegend, CHART_TONES } from "./chartParts";
 export type { ChartTone, LegendItem } from "./chartParts";
 export { compactNumber } from "./chartMath";
@@ -191,5 +193,9 @@ export { compactNumber } from "./chartMath";
 // Mail — one line per message, for inboxes and reply feeds.
 export { MessageList } from "./MessageList";
 export type { MessageListItem } from "./MessageList";
+// Consent — a bottom-of-viewport question that waits for an answer (cookies, terms).
+export { ConsentBanner } from "./ConsentBanner";
+export type { ConsentBannerProps } from "./ConsentBanner";
+
 export { PageTabs } from "./PageTabs";
 export type { PageTab } from "./PageTabs";

package/src/styles/components/brand.css

@@ -86,6 +86,11 @@
 .os-brand-footer-start {
   justify-content: flex-start;
 }
+.os-brand-footer-extra {
+  display: flex;
+  flex-basis: 100%;
+  justify-content: inherit;
+}
 .os-brand-footer-link {
   display: inline-flex;
   align-items: center;

package/src/styles/components/charts.css

@@ -1,13 +1,13 @@
 /* SegmentBar — a proportion bar coloured from the theme's data tokens. */
 
-.os-segments {
+.os-segment-bar {
   display: flex;
   width: 100%;
   flex-direction: column;
   gap: var(--spacing-3);
 }
 
-.os-segment-track {
+.os-segment-bar-track {
   display: flex;
   width: 100%;
   gap: var(--spacing-0-5);
@@ -17,35 +17,35 @@
   background: var(--color-track);
 }
 
-.os-segment {
+.os-segment-bar-fill {
   min-width: var(--spacing-1);
   height: 100%;
   border-radius: var(--radius-full);
   transition: width var(--duration-slow) var(--ease-standard);
 }
 
-.os-segment[data-tone="blue"],
-.os-segment-key[data-tone="blue"] {
+.os-segment-bar-fill[data-tone="blue"],
+.os-segment-bar-key[data-tone="blue"] {
   background: var(--color-data-blue-3);
 }
-.os-segment[data-tone="green"],
-.os-segment-key[data-tone="green"] {
+.os-segment-bar-fill[data-tone="green"],
+.os-segment-bar-key[data-tone="green"] {
   background: var(--color-data-categorical-green);
 }
-.os-segment[data-tone="orange"],
-.os-segment-key[data-tone="orange"] {
+.os-segment-bar-fill[data-tone="orange"],
+.os-segment-bar-key[data-tone="orange"] {
   background: var(--color-data-categorical-orange);
 }
-.os-segment[data-tone="red"],
-.os-segment-key[data-tone="red"] {
+.os-segment-bar-fill[data-tone="red"],
+.os-segment-bar-key[data-tone="red"] {
   background: var(--color-data-categorical-red);
 }
-.os-segment[data-tone="neutral"],
-.os-segment-key[data-tone="neutral"] {
+.os-segment-bar-fill[data-tone="neutral"],
+.os-segment-bar-key[data-tone="neutral"] {
   background: var(--color-data-neutral);
 }
 
-.os-segment-legend {
+.os-segment-bar-legend {
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-1) var(--spacing-4);
@@ -56,25 +56,25 @@
   font-size: var(--font-size-sm);
 }
 
-.os-segment-legend li {
+.os-segment-bar-legend li {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-1-5);
 }
 
-.os-segment-legend strong {
+.os-segment-bar-legend strong {
   color: var(--color-text-primary);
   font-weight: var(--font-weight-semibold);
 }
 
-.os-segment-key {
+.os-segment-bar-key {
   width: var(--spacing-2);
   height: var(--spacing-2);
   border-radius: var(--radius-full);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .os-segment {
+  .os-segment-bar-fill {
     transition: none;
   }
 }
@@ -111,8 +111,8 @@
 [data-tone="neutral"] {
   --os-chart-tone: var(--color-data-neutral);
 }
-.os-segment[data-tone="purple"],
-.os-segment-key[data-tone="purple"] {
+.os-segment-bar-fill[data-tone="purple"],
+.os-segment-bar-key[data-tone="purple"] {
   background: var(--color-data-categorical-purple);
 }
 
@@ -657,3 +657,66 @@
     transition: none;
   }
 }
+
+/* ── UptimeBar ────────────────────────────────────────────────────── */
+
+.os-uptime {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.os-uptime-days {
+  display: flex;
+  height: var(--spacing-8);
+  gap: var(--spacing-0-5);
+}
+
+.os-uptime-day {
+  position: relative;
+  flex: 1 1 0;
+  min-width: 0;
+  border-radius: var(--radius-inner);
+  background: var(--color-data-categorical-green);
+  outline: none;
+}
+.os-uptime-day[data-tone="degraded"] {
+  background: var(--color-data-categorical-orange);
+}
+.os-uptime-day[data-tone="down"] {
+  background: var(--color-data-categorical-red);
+}
+.os-uptime-day[data-tone="none"] {
+  background: var(--color-background-muted);
+}
+.os-uptime-day:hover,
+.os-uptime-day:focus-visible {
+  box-shadow: 0 0 0 var(--spacing-0-5) var(--color-border-emphasized);
+}
+
+/* The tip sits above the hovered day, pulled inward at either end of the row. */
+.os-uptime-day .os-chart-tip {
+  inset: auto auto calc(100% + var(--spacing-2)) 50%;
+  transform: translateX(-50%);
+}
+.os-uptime-day .os-chart-tip[data-align="start"] {
+  left: 0;
+  transform: none;
+}
+.os-uptime-day .os-chart-tip[data-align="end"] {
+  right: 0;
+  left: auto;
+  transform: none;
+}
+
+.os-uptime-axis {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: var(--spacing-2);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+}
+.os-uptime-axis span:last-child {
+  text-align: end;
+}

package/src/styles/components/consent.css

@@ -0,0 +1,85 @@
+/* ConsentBanner — a card-width question at the bottom of the viewport.
+   Above page content, below dialogs and notifications. */
+
+.os-consent {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--spacing-4);
+  box-sizing: border-box;
+  padding: var(--spacing-5);
+  background: var(--color-background-popover);
+  color: var(--color-text-primary);
+  border-radius: var(--radius-container);
+  box-shadow:
+    0 0 0 1px var(--color-border),
+    var(--shadow-high);
+}
+
+.os-consent-fixed {
+  position: fixed;
+  z-index: 400;
+  inset-inline: var(--spacing-4);
+  bottom: calc(var(--spacing-4) + env(safe-area-inset-bottom));
+  max-width: var(--os-consent-width, 560px);
+  animation: os-consent-in var(--duration-slow) var(--ease-standard);
+}
+
+.os-consent-body {
+  display: flex;
+  flex: 1 1 280px;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.os-consent-title {
+  margin: 0;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--text-label-leading);
+}
+
+.os-consent-description {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.os-consent-link {
+  font-size: var(--font-size-sm);
+}
+
+.os-consent-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+}
+
+/* Phones: an edge-to-edge sheet with full-width choices. */
+@media (max-width: 480px) {
+  .os-consent-fixed {
+    inset-inline: var(--spacing-2);
+    bottom: calc(var(--spacing-2) + env(safe-area-inset-bottom));
+  }
+  .os-consent-actions {
+    flex: 1 1 100%;
+  }
+  .os-consent-actions > * {
+    flex: 1 1 0;
+  }
+}
+
+@keyframes os-consent-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--spacing-4));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .os-consent-fixed {
+    animation: none;
+  }
+}

package/src/styles/components/scroll.css

@@ -0,0 +1,71 @@
+/* Sideways scroll rows — filter chips, tab strips, kanban boards. The edge with
+   more content past it fades out, so a clipped item reads as "scroll for more"
+   instead of a cut-off label. Driven by the scroll position itself, so a row
+   that fits shows no fade. Browsers without scroll timelines keep a plain row. */
+
+@property --os-scroll-fade-start {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --os-scroll-fade-end {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@supports (animation-timeline: scroll()) {
+  .astryx-scrollable-area[data-axis="inline"] {
+    --os-scroll-fade-size: var(--spacing-10);
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      black var(--os-scroll-fade-start),
+      black calc(100% - var(--os-scroll-fade-end)),
+      transparent
+    );
+    animation: os-scroll-fade linear both;
+    animation-timeline: scroll(self inline);
+  }
+
+  [dir="rtl"] .astryx-scrollable-area[data-axis="inline"] {
+    animation-name: os-scroll-fade-rtl;
+  }
+}
+
+/* Each edge reaches full fade within the first and last few percent of travel. */
+@keyframes os-scroll-fade {
+  0% {
+    --os-scroll-fade-start: 0px;
+    --os-scroll-fade-end: var(--os-scroll-fade-size);
+  }
+  8% {
+    --os-scroll-fade-start: var(--os-scroll-fade-size);
+  }
+  92% {
+    --os-scroll-fade-end: var(--os-scroll-fade-size);
+  }
+  100% {
+    --os-scroll-fade-start: var(--os-scroll-fade-size);
+    --os-scroll-fade-end: 0px;
+  }
+}
+
+/* Right-to-left rows start at the right edge, so the gradient's ends swap. */
+@keyframes os-scroll-fade-rtl {
+  0% {
+    --os-scroll-fade-end: 0px;
+    --os-scroll-fade-start: var(--os-scroll-fade-size);
+  }
+  8% {
+    --os-scroll-fade-end: var(--os-scroll-fade-size);
+  }
+  92% {
+    --os-scroll-fade-start: var(--os-scroll-fade-size);
+  }
+  100% {
+    --os-scroll-fade-end: var(--os-scroll-fade-size);
+    --os-scroll-fade-start: 0px;
+  }
+}

package/src/styles/components.css

@@ -18,6 +18,8 @@
 @import "./components/code-input.css";
 @import "./components/brand.css";
 @import "./components/google.css";
+@import "./components/scroll.css";
+@import "./components/consent.css";
 
 /* Input / Field */
 .os-field-group {
@@ -108,6 +110,16 @@
   border-block-start-color: var(--color-error);
 }
 
+/* Columns settle on the board edge after a sideways scroll, so the last
+   visible column is whole or clearly past the fade, never sliced mid-card. */
+.os-kanban-scroller {
+  scroll-snap-type: inline proximity;
+}
+
+.os-kanban-row > .os-kanban-cell {
+  scroll-snap-align: start;
+}
+
 .os-kanban-cell [role="list"] {
   min-height: inherit;
 }
@@ -328,6 +340,17 @@ button.os-star {
   height: var(--size-element-lg);
 }
 
+/* Disabled actions go neutral instead of a faded fill. Half-opacity accent read
+   as a lighter, still-clickable blue. A loading button keeps its color: it is
+   busy, not unavailable. */
+.astryx-button[data-variant="primary"]:is(:disabled, [aria-disabled="true"]):not(
+    [aria-busy="true"]
+  ) {
+  background-color: var(--color-neutral);
+  color: var(--color-text-disabled);
+  opacity: 1;
+}
+
 .astryx-button:has(> span > span:only-child svg) {
   padding-inline: 0;
   padding-block: 0;
@@ -364,6 +387,29 @@ button.os-star {
   border-radius: var(--radius-full);
 }
 
+/* A text column beside other content shrinks before its siblings do. Without
+   this, a one-line truncated label (nowrap) holds the column at its full text
+   width and pushes the buttons next to it out of the card. */
+.astryx-stack[data-direction="horizontal"] > .astryx-stack[data-direction="vertical"] {
+  min-width: 0;
+}
+
+/* Rounded avatars hold logos. Every mark sits whole on the same light tile with
+   a hairline edge, so a transparent PNG, a full-bleed square, and a small file
+   all read as one set. Logos are drawn for light grounds, so the tile stays light
+   in dark mode too (the soft off-white of dark-mode text). Initials keep their fill. */
+.astryx-avatar[data-shape="rounded"]:has(img) {
+  background-color: light-dark(var(--color-background-surface), var(--color-text-primary));
+  outline: 1px solid var(--color-border);
+  outline-offset: -1px;
+}
+
+.astryx-avatar[data-shape="rounded"] img {
+  box-sizing: border-box;
+  padding: 8%;
+  object-fit: contain;
+}
+
 /* Pressed toggles stay outlined. A weak accent wash sits behind the accent
    icon and label, so on reads as color rather than a solid fill. */
 .astryx-toggle-button[data-is-pressed="true"] {