@ably/ui 14.8.0-dev.bf71c2e → 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/core/styles/text.css

@@ -165,4 +165,20 @@
   .ui-figcaption {
     @apply font-mono text-p3 text-neutral-800;
   }
+
+  .ui-menu-label-1 {
+    @apply font-sans text-neutral-1000 text-p1 font-medium leading-snug;
+  }
+
+  .ui-menu-label-2 {
+    @apply font-sans text-neutral-1000 text-p2 font-medium leading-snug;
+  }
+
+  .ui-menu-label-3 {
+    @apply font-sans text-neutral-1000 text-p3 font-medium leading-snug;
+  }
+
+  .ui-menu-label-4 {
+    @apply font-sans text-neutral-1000 text-p4 font-medium leading-snug;
+  }
 }

package/index.d.ts

@@ -3,11 +3,27 @@
 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.
+ */
 export type AccordionData = {
+    /**
+     * The name of the accordion item.
+     */
     name: string;
+    /**
+     * The optional icon name to be displayed alongside the accordion item.
+     */
     icon?: IconName;
+    /**
+     * The content to be displayed when the accordion item is expanded.
+     */
     content: ReactNode;
+    /**
+     * Optional click handler function that is called when the accordion item is clicked.
+     * @param index - The index of the clicked accordion item.
+     */
     onClick?: (index: number) => void;
 };
 export type AccordionIcons = {
@@ -22,25 +38,98 @@ export type AccordionIcons = {
 };
 export const accordionThemes: readonly ["dark", "light", "transparent", "darkTransparent", "static", "darkStatic"];
 export type AccordionTheme = (typeof accordionThemes)[number];
+/**
+ * Represents the theme colors for an accordion component.
+ */
 export type AccordionThemeColors = {
+    /**
+     * Background color class for the accordion.
+     */
     bg: ColorClass;
+    /**
+     * Background color when the accordion item is hovered.
+     */
     hoverBg: string;
+    /**
+     * Text color class for the accordion.
+     */
     text: ColorClass;
+    /**
+     * Color class for the toggle icon of the accordion.
+     */
     toggleIconColor: ColorClass;
-    selectableBg?: DataStateOpenColorClass;
-    selectableText?: DataStateOpenColorClass;
+    /**
+     * Optional background color class for selectable accordion items.
+     */
+    selectableBg?: ColorClass;
+    /**
+     * Optional text color class for selectable accordion items.
+     */
+    selectableText?: ColorClass;
+    /**
+     * Optional border color for the accordion.
+     */
     border?: string;
 };
+/**
+ * Options for configuring the Accordion component.
+ */
 export type AccordionOptions = {
+    /**
+     * If true, only one accordion item can be open at a time.
+     * @default false
+     */
     autoClose?: boolean;
+    /**
+     * If true, accordion items can be selected.
+     * @default false
+     */
     selectable?: boolean;
+    /**
+     * If true, the accordion header will stick to the top when scrolling.
+     * @default false
+     */
     sticky?: boolean;
+    /**
+     * An array of indexes indicating which accordion items should be open by default.
+     * @default []
+     */
     defaultOpenIndexes?: number[];
+    /**
+     * If true, all accordion items will be fully open.
+     * @default false
+     */
     fullyOpen?: boolean;
+    /**
+     * Custom CSS class to apply to the accordion header.
+     * @default ""
+     */
     headerCSS?: string;
+    /**
+     * If true, borders between accordion items will be hidden.
+     * @default false
+     */
     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
 }
@@ -57,10 +146,21 @@ declare module '@ably/ui/core/Accordion' {
 import React from "react";
 import type { AccordionData, AccordionIcons, AccordionOptions, AccordionTheme } from "@ably/ui/core/Accordion/types";
 export type AccordionProps = {
+    /**
+     * The data for the accordion items.
+     */
     data: AccordionData[];
+    /**
+     * Icons for the accordion toggle.
+     */
     icons?: AccordionIcons;
+    /**
+     * Theme for the accordion.
+     */
     theme?: AccordionTheme;
-    headerCSS?: string;
+    /**
+     * Options for the accordion behavior.
+     */
     options?: AccordionOptions;
 } & React.HTMLAttributes<HTMLDivElement>;
 const Accordion: ({ data, theme, icons, options, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
@@ -261,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"];
 };
@@ -281,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})`;
@@ -1003,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.bf71c2e",
+  "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",

package/tailwind.config.js

@@ -26,6 +26,7 @@ module.exports = {
       p1: ["var(--fs-p1)", "var(--lh-extra-relaxed)"],
       p2: ["var(--fs-p2)", "var(--lh-extra-relaxed)"],
       p3: ["var(--fs-p3)", "var(--lh-extra-relaxed)"],
+      p4: ["var(--fs-p4)", "var(--lh-extra-relaxed)"],
       standfirst: ["var(--fs-standfirst)"],
       "standfirst-xl": ["var(--fs-standfirst-xl)"],
       "sub-header": ["var(--fs-sub-header)"],