@ably/ui 14.8.0-dev.b90585a → 14.8.0-dev.cbf00c0

package/core/styles/properties.css

@@ -185,6 +185,7 @@
     --fs-p1: 1rem;
     --fs-p2: 0.938rem;
     --fs-p3: 0.875rem;
+    --fs-p4: 0.813rem;
     --fs-standfirst-xl: 2.25rem;
     --fs-standfirst: 1.5rem;
     --fs-sub-header: 1.125rem;

package/index.d.ts

@@ -3,7 +3,7 @@
 declare module '@ably/ui/core/Accordion/types' {
 import { ReactNode } from "react";
 import { IconName, IconSize } from ".@ably/ui/core/Icon/types";
-import { ColorClass, DataStateOpenColorClass } from ".@ably/ui/core/styles/colors/types";
+import { ColorClass } from ".@ably/ui/core/styles/colors/types";
 /**
  * Represents the data structure for an Accordion component.
  */
@@ -61,11 +61,11 @@ export type AccordionThemeColors = {
     /**
      * Optional background color class for selectable accordion items.
      */
-    selectableBg?: DataStateOpenColorClass;
+    selectableBg?: ColorClass;
     /**
      * Optional text color class for selectable accordion items.
      */
-    selectableText?: DataStateOpenColorClass;
+    selectableText?: ColorClass;
     /**
      * Optional border color for the accordion.
      */
@@ -112,12 +112,24 @@ export type AccordionOptions = {
     hideBorders?: boolean;
     /**
      * Size of the row icon.
+     * @default "32px"
      */
     rowIconSize?: IconSize;
     /**
      * Size of the accordion icon.
+     * @default "16px"
      */
     iconSize?: IconSize;
+    /**
+     * Custom CSS classes to apply to the selected accordion header.
+     * @default ""
+     */
+    selectedHeaderCSS?: string;
+    /**
+     * Custom CSS classes to apply to the accordion content.
+     * @default ""
+     */
+    contentCSS?: string;
 };
 //# sourceMappingURL=types.d.ts.map
 }
@@ -349,7 +361,7 @@ export const computedIcons: {
     display: readonly ["icon-display-48hrs", "icon-display-ably-channels", "icon-display-about-ably-col", "icon-display-api-keys", "icon-display-api", "icon-display-architectural-guidance", "icon-display-asset-tracking-col", "icon-display-authentication", "icon-display-avatar-stack", "icon-display-browser", "icon-display-calendar", "icon-display-call-mobile", "icon-display-careers-col", "icon-display-case-studies-col", "icon-display-chat-col", "icon-display-chat-mono", "icon-display-chat-stack-col", "icon-display-chat-stack", "icon-display-cloud-servers", "icon-display-compare-tech-col", "icon-display-connection-state-&-recovery", "icon-display-consumer-groups", "icon-display-custom-cname", "icon-display-custom", "icon-display-customers-col", "icon-display-data-broadcast-col", "icon-display-data-broadcast-mono", "icon-display-data-synchronization-col", "icon-display-dedicated-cluster", "icon-display-deltas", "icon-display-docs-col", "icon-display-documentation", "icon-display-dynamic-channel-groups", "icon-display-edge-network", "icon-display-elasticity", "icon-display-equalisers-mono", "icon-display-events-col", "icon-display-exactly-once-delivery", "icon-display-examples-col", "icon-display-fan-out", "icon-display-firehose", "icon-display-gdpr", "icon-display-general-comms", "icon-display-granular-permissions", "icon-display-hipaa-mono", "icon-display-hipaa", "icon-display-history", "icon-display-integrations-col", "icon-display-integrations", "icon-display-it-support-access", "icon-display-it-support-helpdesk", "icon-display-kafka-at-the-edge-col", "icon-display-laptop", "icon-display-lightbulb-col", "icon-display-live-chat", "icon-display-live-updates-results-metrics-col", "icon-display-map-pin", "icon-display-message-batching", "icon-display-message-persistence", "icon-display-message-queues", "icon-display-message", "icon-display-multi-user-spaces-col", "icon-display-observe-analytics", "icon-display-padlock-closed", "icon-display-platform", "icon-display-play", "icon-display-premium-support", "icon-display-privacy-shield-framework", "icon-display-private-link", "icon-display-push-notifications-col", "icon-display-push-notifications-mono", "icon-display-push-notifications", "icon-display-quickstart-guides-col", "icon-display-resources-col", "icon-display-rewind", "icon-display-sdks-col", "icon-display-send-received-messages", "icon-display-servers", "icon-display-shopping-cart", "icon-display-sla", "icon-display-soc2-type2-mono", "icon-display-soc2-type2", "icon-display-subscription-filters", "icon-display-support-chat-mono", "icon-display-system-metadata", "icon-display-tech-account-comms", "icon-display-tutorials-demos-col", "icon-display-virtual-events-col", "icon-display-virtual-events"];
     gui: readonly ["icon-gui-ably-badge", "icon-gui-arrow-bidirectional-horizontal", "icon-gui-arrow-bidirectional-vertical", "icon-gui-arrow-down", "icon-gui-arrow-left", "icon-gui-arrow-right", "icon-gui-arrow-up", "icon-gui-burger-menu", "icon-gui-check-circled-fill-black", "icon-gui-check-circled-fill", "icon-gui-check-circled", "icon-gui-checklist-checked", "icon-gui-chevron-down", "icon-gui-chevron-up", "icon-gui-clock", "icon-gui-close", "icon-gui-copy", "icon-gui-cross-circled-fill", "icon-gui-cross-circled", "icon-gui-dash-circled", "icon-gui-disclosure-arrow", "icon-gui-document-generic", "icon-gui-enlarge", "icon-gui-external-link", "icon-gui-filter-flow-step-1", "icon-gui-filter-flow-step-2", "icon-gui-filter-flow-step-3", "icon-gui-hand", "icon-gui-history", "icon-gui-info", "icon-gui-link-arrow", "icon-gui-link", "icon-gui-live-chat", "icon-gui-minus", "icon-gui-partial", "icon-gui-plus", "icon-gui-quote-marks-solid", "icon-gui-refresh", "icon-gui-resources", "icon-gui-search", "icon-gui-tick", "icon-gui-warning"];
     other: readonly ["icon-other-quote"];
-    product: readonly ["icon-product-asset-tracking-mono", "icon-product-asset-tracking", "icon-product-chat-mono", "icon-product-chat", "icon-product-liveobjects", "icon-product-livesync-mono", "icon-product-livesync", "icon-product-platform-mono", "icon-product-pub-sub-mono", "icon-product-pubsub", "icon-product-spaces-mono", "icon-product-spaces"];
+    product: readonly ["icon-product-asset-tracking-mono", "icon-product-asset-tracking", "icon-product-chat-mono", "icon-product-chat", "icon-product-liveobjects", "icon-product-livesync-mono", "icon-product-livesync", "icon-product-platform-mono", "icon-product-pubsub-mono", "icon-product-pubsub", "icon-product-spaces-mono", "icon-product-spaces"];
     social: readonly ["icon-social-discord", "icon-social-facebook", "icon-social-github", "icon-social-glassdoor", "icon-social-google", "icon-social-linkedin", "icon-social-stackoverflow", "icon-social-twitter", "icon-social-x", "icon-social-youtube"];
     tech: readonly ["icon-tech-amqp10", "icon-tech-apache-kafka", "icon-tech-apachepulsar", "icon-tech-awskinesis", "icon-tech-awslambda", "icon-tech-awssqs", "icon-tech-azureservicebus", "icon-tech-cloudflareworkers", "icon-tech-csharp", "icon-tech-flutter", "icon-tech-gcloudfunctions", "icon-tech-go", "icon-tech-ifttt", "icon-tech-java", "icon-tech-javascript", "icon-tech-net", "icon-tech-objectivec", "icon-tech-php", "icon-tech-python", "icon-tech-react", "icon-tech-ruby", "icon-tech-swift", "icon-tech-terraform", "icon-tech-zapier"];
 };
@@ -369,7 +381,7 @@ export const iconNames: {
     social: readonly ["icon-social-discord", "icon-social-facebook", "icon-social-github", "icon-social-glassdoor", "icon-social-google", "icon-social-linkedin", "icon-social-stackoverflow", "icon-social-twitter", "icon-social-x", "icon-social-youtube"];
     other: readonly ["icon-other-quote"];
     tech: readonly ["icon-tech-amqp10", "icon-tech-apache-kafka", "icon-tech-apachepulsar", "icon-tech-awskinesis", "icon-tech-awslambda", "icon-tech-awssqs", "icon-tech-azureservicebus", "icon-tech-cloudflareworkers", "icon-tech-csharp", "icon-tech-flutter", "icon-tech-gcloudfunctions", "icon-tech-go", "icon-tech-ifttt", "icon-tech-java", "icon-tech-javascript", "icon-tech-net", "icon-tech-objectivec", "icon-tech-php", "icon-tech-python", "icon-tech-react", "icon-tech-ruby", "icon-tech-swift", "icon-tech-terraform", "icon-tech-zapier"];
-    product: readonly ["icon-product-asset-tracking-mono", "icon-product-asset-tracking", "icon-product-chat-mono", "icon-product-chat", "icon-product-liveobjects", "icon-product-livesync-mono", "icon-product-livesync", "icon-product-platform-mono", "icon-product-pub-sub-mono", "icon-product-pubsub", "icon-product-spaces-mono", "icon-product-spaces"];
+    product: readonly ["icon-product-asset-tracking-mono", "icon-product-asset-tracking", "icon-product-chat-mono", "icon-product-chat", "icon-product-liveobjects", "icon-product-livesync-mono", "icon-product-livesync", "icon-product-platform-mono", "icon-product-pubsub-mono", "icon-product-pubsub", "icon-product-spaces-mono", "icon-product-spaces"];
 };
 export type IconName = (typeof iconNames.gui)[number] | (typeof iconNames.display)[number] | (typeof iconNames.social)[number] | (typeof iconNames.other)[number] | (typeof iconNames.tech)[number] | (typeof iconNames.product)[number];
 export type IconSize = `${number}px` | `${number}em` | `${number}rem` | `calc(${string})`;
@@ -1091,7 +1103,6 @@ export const colors: readonly ["neutral", "orange", "blue", "yellow", "green", "
 export type ColorClassColorGroups = (typeof colors)[number];
 export type Theme = "light" | "dark";
 export type ColorClass = `${ColorClassVariants}${ColorClassPrefixes}-${ColorName}`;
-export type DataStateOpenColorClass = `data-[state=open]:${ColorClass}`;
 export const neutralColors: readonly ["neutral-000", "neutral-100", "neutral-200", "neutral-300", "neutral-400", "neutral-500", "neutral-600", "neutral-700", "neutral-800", "neutral-900", "neutral-1000", "neutral-1100", "neutral-1200", "neutral-1300"];
 export const orangeColors: readonly ["orange-100", "orange-200", "orange-300", "orange-400", "orange-500", "orange-600", "orange-700", "orange-800", "orange-900", "orange-1000", "orange-1100"];
 export const yellowColors: readonly ["yellow-100", "yellow-200", "yellow-300", "yellow-400", "yellow-500", "yellow-600", "yellow-700", "yellow-800", "yellow-900"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.8.0-dev.b90585a",
+  "version": "14.8.0-dev.cbf00c0",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",