@ably/ui 15.1.0 → 15.1.2-dev.550bb95

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  @layer components {
2
2
  .ui-button-base {
3
- @apply inline-flex rounded justify-center items-center gap-12 text-neutral-000 transition-colors focus:outline-4 focus:outline-gui-blue-focus disabled:cursor-not-allowed;
3
+ @apply inline-flex rounded justify-center items-center gap-12 text-neutral-000 transition-colors focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-blue-focus disabled:cursor-not-allowed;
4
4
  }
5
5
 
6
6
  .ui-button-lg-base {
@@ -1,6 +1,6 @@
1
1
  @layer components {
2
2
  .ui-dropdown-base {
3
- @apply rounded-lg border border-neutral-400 hover:border-neutral-600 active:border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus:outline-gui-focus focus:outline-4 focus:outline-offset-0;
3
+ @apply rounded-lg border border-neutral-400 hover:border-neutral-600 active:border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus:outline-none focus-visible:outline-gui-focus focus-visible:outline-4 focus-visible:outline-offset-0;
4
4
  @apply bg-no-repeat text-p2 flex font-medium bg-neutral-100 transition-colors;
5
5
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNjY3MDg1IiBkPSJNMTIuOTA0NiAxMkw5LjAwNjcxIDE2LjMzMUwxMC40OTMzIDE3LjY2OUwxNC45OTMzIDEyLjY2OUwxNC45OTMzIDExLjMzMUwxMC40OTMzIDYuMzMxMDVMOS4wMDY3MSA3LjY2ODk4TDEyLjkwNDYgMTJaIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMiAxMikiLz4KPC9zdmc+Cg==");
6
6
  background-position: center right 16px;
@@ -71,7 +71,7 @@
71
71
  @apply p-input mb-16;
72
72
  @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
73
73
  @apply hover:bg-white hover:shadow-input hover:border-transparent;
74
- @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
74
+ @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-none focus-visible:outline-gui-focus;
75
75
  }
76
76
 
77
77
  .ui-textarea::placeholder {
@@ -123,7 +123,7 @@
123
123
 
124
124
  .ui-input {
125
125
  @apply ui-text-p2 font-medium bg-neutral-100 rounded p-input w-full leading-none appearance-none border border-neutral-400 transition-colors placeholder-neutral-600;
126
- @apply hover:border-neutral-700 focus:bg-white focus:outline-gui-focus focus:outline-offset-0 focus:outline-4;
126
+ @apply hover:border-neutral-700 focus:bg-white focus:outline-none focus-visible:outline-gui-focus focus-visible:outline-offset-0 focus-visible:outline-4;
127
127
  @apply max-w-screen-sm invalid:border-gui-error-red;
128
128
  }
129
129
 
@@ -140,7 +140,7 @@
140
140
  }
141
141
 
142
142
  .ui-radio {
143
- @apply border border-neutral-600 w-20 h-20 appearance-none cursor-pointer rounded-full focus:outline-gui-blue-focus focus:outline-4;
143
+ @apply border border-neutral-600 w-20 h-20 appearance-none cursor-pointer rounded-full focus-visible:outline-4 focus-visible:outline-gui-blue-focus;
144
144
  }
145
145
 
146
146
  .ui-radio:checked {
@@ -3,7 +3,7 @@
3
3
  @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
4
4
  @apply hover:text-white hover:bg-neutral-1100;
5
5
  @apply active:text-white active:bg-neutral-1200;
6
- @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
6
+ @apply focus:text-white focus:bg-cool-black focus:outline-offset-0 focus:outline-none focus-visible:outline-4 focus-visible:outline-gui-focus;
7
7
  @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
8
8
  @apply transition-colors;
9
9
  @apply inline-flex items-center justify-center;
@@ -25,7 +25,7 @@
25
25
  background-position: 0% 0%;
26
26
 
27
27
  @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn;
28
- @apply focus:outline-gui-focus;
28
+ @apply focus:outline-offset-0 focus:outline-none focus-visible:outline-4 focus-visible:outline-gui-focus;
29
29
  @apply inline-flex items-center justify-center;
30
30
  }
31
31
 
@@ -43,7 +43,7 @@
43
43
  @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn;
44
44
  @apply hover:text-white hover:bg-active-orange;
45
45
  @apply active:text-white active:bg-red-orange;
46
- @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
46
+ @apply focus:text-white focus:bg-cool-black focus:outline-offset-0 focus:outline-none focus-visible:outline-4 focus-visible:outline-gui-focus;
47
47
  @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
48
48
  @apply transition-colors;
49
49
  @apply inline-flex items-center justify-center;
@@ -53,7 +53,7 @@
53
53
  @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
54
54
  @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
55
55
  @apply active:border-red-orange active:bg-white;
56
- @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
56
+ @apply focus:border-cool-black focus:bg-white focus:outline-offset-0 focus:outline-none focus-visible:outline-4 focus-visible:outline-gui-focus;
57
57
  @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white disabled:cursor-not-allowed;
58
58
  @apply transition-colors;
59
59
  @apply inline-flex items-center justify-center;
@@ -63,7 +63,7 @@
63
63
  @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
64
64
  @apply hover:text-white hover:border-active-orange;
65
65
  @apply active:border-red-orange;
66
- @apply focus:outline-gui-focus;
66
+ @apply focus:outline-offset-0 focus:outline-none focus-visible:outline-4 focus-visible:outline-gui-focus;
67
67
  @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:cursor-not-allowed;
68
68
  @apply transition-colors;
69
69
  @apply inline-flex items-center justify-center;
@@ -176,21 +176,16 @@
176
176
  .ui-link {
177
177
  @apply text-gui-default;
178
178
  @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
179
- @apply focus:text-gui-default focus:outline-gui-focus;
179
+ @apply focus:text-gui-default focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-gui-focus;
180
180
  @apply no-underline;
181
181
  }
182
182
 
183
183
  .ui-link-neutral {
184
184
  @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
185
- @apply focus:text-charcoal-grey;
185
+ @apply focus:text-charcoal-grey focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-gui-focus;
186
186
  @apply underline;
187
187
  }
188
188
 
189
- /* focus:outline-gui-focus-neutral does not get created under Tailwind 3.3.5, not sure why */
190
- .ui-link-neutral:focus {
191
- outline: 2px solid var(--color-neutral-000);
192
- }
193
-
194
189
  .ui-figcaption {
195
190
  @apply font-mono text-p3 text-neutral-800;
196
191
  }
package/index.d.ts CHANGED
@@ -3,7 +3,7 @@
3
3
  declare module '@ably/ui/core/Accordion/types' {
4
4
  import { ReactNode } from "react";
5
5
  import { IconName, IconSize } from ".@ably/ui/core/Icon/types";
6
- import { ColorClass } from ".@ably/ui/core/styles/colors/types";
6
+ import { ColorThemeSet } from ".@ably/ui/core/styles/colors/types";
7
7
  /**
8
8
  * Represents the data structure for an Accordion component.
9
9
  */
@@ -36,7 +36,7 @@ export type AccordionIcons = {
36
36
  css?: string;
37
37
  };
38
38
  };
39
- export const accordionThemes: readonly ["dark", "light", "transparent", "darkTransparent", "static", "darkStatic"];
39
+ export const accordionThemes: readonly ["default", "transparent", "static"];
40
40
  export type AccordionTheme = (typeof accordionThemes)[number];
41
41
  /**
42
42
  * Represents the theme colors for an accordion component.
@@ -45,27 +45,27 @@ export type AccordionThemeColors = {
45
45
  /**
46
46
  * Background color class for the accordion.
47
47
  */
48
- bg: ColorClass;
48
+ bg: ColorThemeSet;
49
49
  /**
50
50
  * Background color when the accordion item is hovered.
51
51
  */
52
- hoverBg: string;
52
+ hoverBg: ColorThemeSet;
53
53
  /**
54
54
  * Text color class for the accordion.
55
55
  */
56
- text: ColorClass;
56
+ text: ColorThemeSet;
57
57
  /**
58
58
  * Color class for the toggle icon of the accordion.
59
59
  */
60
- toggleIconColor: ColorClass;
60
+ toggleIconColor: ColorThemeSet;
61
61
  /**
62
62
  * Optional background color class for selectable accordion items.
63
63
  */
64
- selectableBg?: ColorClass;
64
+ selectableBg?: ColorThemeSet;
65
65
  /**
66
66
  * Optional text color class for selectable accordion items.
67
67
  */
68
- selectableText?: ColorClass;
68
+ selectableText?: ColorThemeSet;
69
69
  /**
70
70
  * Optional border color for the accordion.
71
71
  */
@@ -137,8 +137,8 @@ export type AccordionOptions = {
137
137
  declare module '@ably/ui/core/Accordion/utils' {
138
138
  import { AccordionTheme, AccordionThemeColors } from "@ably/ui/core/types";
139
139
  export const themeClasses: Record<AccordionTheme, AccordionThemeColors>;
140
- export const isNonTransparentTheme: (theme: AccordionTheme) => boolean;
141
- export const isStaticTheme: (theme: AccordionTheme) => boolean;
140
+ export const isNonTransparentTheme: (theme: AccordionTheme) => theme is "default" | "static";
141
+ export const isStaticTheme: (theme: AccordionTheme) => theme is "static";
142
142
  //# sourceMappingURL=utils.d.ts.map
143
143
  }
144
144
 
@@ -393,7 +393,7 @@ export default EncapsulatedIcon;
393
393
  declare module '@ably/ui/core/Icon/computed-icons' {
394
394
  export const computedIcons: {
395
395
  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"];
396
- 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-fill", "icon-gui-warning"];
396
+ gui: readonly ["icon-gui-ably-badge", "icon-gui-arrow-bidirectional-horizontal", "icon-gui-arrow-bidirectional-vertical", "icon-gui-arrow-down-circled", "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-check-lotus-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-fill", "icon-gui-warning"];
397
397
  other: readonly ["icon-other-quote"];
398
398
  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"];
399
399
  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"];
@@ -410,7 +410,7 @@ export const defaultIconSecondaryColor: (name: IconName) => "text-neutral-000" |
410
410
 
411
411
  declare module '@ably/ui/core/Icon/types' {
412
412
  export const iconNames: {
413
- 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-fill", "icon-gui-warning"];
413
+ gui: readonly ["icon-gui-ably-badge", "icon-gui-arrow-bidirectional-horizontal", "icon-gui-arrow-bidirectional-vertical", "icon-gui-arrow-down-circled", "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-check-lotus-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-fill", "icon-gui-warning"];
414
414
  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"];
415
415
  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"];
416
416
  other: readonly ["icon-other-quote"];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ably/ui",
3
- "version": "15.1.0",
3
+ "version": "15.1.2-dev.550bb95",
4
4
  "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.",
5
5
  "repository": {
6
6
  "type": "git",