@westpac/ui 0.52.0 → 0.53.2

package/dist/components/table/table.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'mb-4 w-full',
+        base: 'mb-4 w-full [&_:focus-visible]:focus-outline',
         wrapper: 'max-xsl:mb-3 max-xsl:w-full max-xsl:overflow-x-auto max-xsl:overflow-y-hidden'
     },
     variants: {}

package/dist/components/tabs/components/tabs-tab/tabs-tab.styles.js

@@ -22,7 +22,7 @@ export const styles = tv({
             hero: ''
         },
         isFocusVisible: {
-            true: 'focus-outline',
+            true: 'z-10 focus-outline',
             false: 'outline-none'
         }
     },

package/dist/components/tabs/components/tabs-tab-panel/tabs-tab-panel.styles.d.ts

@@ -6,7 +6,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     isFocused: {
         true: string;
     };
-}, undefined, "flex-1 bg-white p-4", {
+}, undefined, "flex-1 bg-white p-4 [&_:focus-visible]:focus-outline", {
     responsiveVariants: string[];
 }, {
     look: {
@@ -24,6 +24,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     isFocused: {
         true: string;
     };
-}, undefined, "flex-1 bg-white p-4", {
+}, undefined, "flex-1 bg-white p-4 [&_:focus-visible]:focus-outline", {
     responsiveVariants: string[];
 }, unknown, unknown, undefined>>;

package/dist/components/tabs/components/tabs-tab-panel/tabs-tab-panel.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'flex-1 bg-white p-4',
+    base: 'flex-1 bg-white p-4 [&_:focus-visible]:focus-outline',
     variants: {
         look: {
             default: 'border border-border',

package/dist/components/well/well.styles.d.ts

@@ -3,7 +3,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         light: string;
         white: string;
     };
-}, undefined, "rounded border border-border p-2 sm:p-4", {
+}, undefined, "rounded border border-border p-2 sm:p-4 [&_:focus-visible]:focus-outline", {
     responsiveVariants: string[];
 }, {
     color: {
@@ -15,6 +15,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         light: string;
         white: string;
     };
-}, undefined, "rounded border border-border p-2 sm:p-4", {
+}, undefined, "rounded border border-border p-2 sm:p-4 [&_:focus-visible]:focus-outline", {
     responsiveVariants: string[];
 }, unknown, unknown, undefined>>;

package/dist/components/well/well.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'rounded border border-border p-2 sm:p-4',
+    base: 'rounded border border-border p-2 sm:p-4 [&_:focus-visible]:focus-outline',
     variants: {
         color: {
             light: 'bg-light',

package/dist/css/westpac-ui.css

@@ -3307,8 +3307,8 @@ body {
 .-left-1 {
   left: -0.375rem;
 }
-.-right-1 {
-  right: -0.375rem;
+.-right-2 {
+  right: -0.75rem;
 }
 .bottom-full {
   bottom: 100%;
@@ -3376,6 +3376,9 @@ body {
 .z-10 {
   z-index: 10;
 }
+.z-\[11\] {
+  z-index: 11;
+}
 .z-\[999\] {
   z-index: 999;
 }
@@ -4466,15 +4469,18 @@ body {
 .overflow-visible {
   overflow: visible;
 }
-.overflow-x-auto {
-  overflow-x: auto;
-}
 .overflow-y-auto {
   overflow-y: auto;
 }
+.overflow-x-clip {
+  overflow-x: clip;
+}
 .overflow-y-visible {
   overflow-y: visible;
 }
+.overflow-x-scroll {
+  overflow-x: scroll;
+}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -5741,6 +5747,9 @@ body {
 .p-1 {
   padding: 0.375rem;
 }
+.p-10 {
+  padding: 3.75rem;
+}
 .p-2 {
   padding: 0.75rem;
 }
@@ -6298,10 +6307,6 @@ body {
   --tw-text-opacity: 1 !important;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
 }
-.text-\[blue\] {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 255 / var(--tw-text-opacity, 1));
-}
 .text-background {
   --tw-text-opacity: 1;
   color: rgba(var(--colors-background), var(--tw-text-opacity, 1));
@@ -6491,12 +6496,20 @@ body {
 .\!outline-offset-0 {
   outline-offset: 0px !important;
 }
+.\!outline-offset-\[-3px\] {
+  outline-offset: -3px !important;
+}
 .outline-offset-\[3px\] {
   outline-offset: 3px;
 }
 .outline-focus {
   outline-color: rgb(var(--colors-focus));
 }
+.ring {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -8147,6 +8160,15 @@ body {
 .first-of-type\:-mt-1:first-of-type {
   margin-top: -0.375rem;
 }
+.focus-within\:z-20:focus-within {
+  z-index: 20;
+}
+.focus-within\:focus-outline:focus-within {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 3px;
+  outline-color: rgb(var(--colors-focus));
+}
 @media (hover: hover) and (pointer: fine) {
   .hover\:cursor-pointer:hover {
     cursor: pointer;
@@ -8233,6 +8255,9 @@ body {
 .focus\:top-0:focus {
   top: 0rem;
 }
+.focus\:z-10:focus {
+  z-index: 10;
+}
 .focus\:touch-auto:focus {
   touch-action: auto;
 }
@@ -8293,6 +8318,10 @@ body {
   --tw-shadow-colored: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
 .focus\:-outline-offset-2:focus {
   outline-offset: -2px;
 }
@@ -9921,6 +9950,9 @@ body {
     outline: 2px solid transparent;
     outline-offset: 2px;
   }
+  .xsl\:\!outline-offset-\[-3px\] {
+    outline-offset: -3px !important;
+  }
   .xsl\:transition-colors {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -11665,6 +11697,9 @@ body {
     outline: 2px solid transparent;
     outline-offset: 2px;
   }
+  .sm\:\!outline-offset-\[-3px\] {
+    outline-offset: -3px !important;
+  }
   .sm\:transition-colors {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -13476,6 +13511,9 @@ body {
     outline: 2px solid transparent;
     outline-offset: 2px;
   }
+  .md\:\!outline-offset-\[-3px\] {
+    outline-offset: -3px !important;
+  }
   .md\:transition-colors {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -15262,6 +15300,9 @@ body {
     outline: 2px solid transparent;
     outline-offset: 2px;
   }
+  .lg\:\!outline-offset-\[-3px\] {
+    outline-offset: -3px !important;
+  }
   .lg\:transition-colors {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -16976,6 +17017,9 @@ body {
     outline: 2px solid transparent;
     outline-offset: 2px;
   }
+  .xl\:\!outline-offset-\[-3px\] {
+    outline-offset: -3px !important;
+  }
   .xl\:transition-colors {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -17412,6 +17456,12 @@ body {
 .\[\&\:not\(\:last-child\)\]\:pb-1:not(:last-child) {
   padding-bottom: 0.375rem;
 }
+.\[\&_\:focus-visible\]\:focus-outline :focus-visible {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 3px;
+  outline-color: rgb(var(--colors-focus));
+}
 .\[\&_a\]\:underline a {
   text-decoration-line: underline;
 }

package/dist/css/westpac-ui.min.css

@@ -3307,8 +3307,8 @@ body {
 .-left-1 {
   left: -0.375rem;
 }
-.-right-1 {
-  right: -0.375rem;
+.-right-2 {
+  right: -0.75rem;
 }
 .bottom-full {
   bottom: 100%;
@@ -3376,6 +3376,9 @@ body {
 .z-10 {
   z-index: 10;
 }
+.z-\[11\] {
+  z-index: 11;
+}
 .z-\[999\] {
   z-index: 999;
 }
@@ -4466,15 +4469,18 @@ body {
 .overflow-visible {
   overflow: visible;
 }
-.overflow-x-auto {
-  overflow-x: auto;
-}
 .overflow-y-auto {
   overflow-y: auto;
 }
+.overflow-x-clip {
+  overflow-x: clip;
+}
 .overflow-y-visible {
   overflow-y: visible;
 }
+.overflow-x-scroll {
+  overflow-x: scroll;
+}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -5741,6 +5747,9 @@ body {
 .p-1 {
   padding: 0.375rem;
 }
+.p-10 {
+  padding: 3.75rem;
+}
 .p-2 {
   padding: 0.75rem;
 }
@@ -6298,10 +6307,6 @@ body {
   --tw-text-opacity: 1 !important;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
 }
-.text-\[blue\] {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 255 / var(--tw-text-opacity, 1));
-}
 .text-background {
   --tw-text-opacity: 1;
   color: rgba(var(--colors-background), var(--tw-text-opacity, 1));
@@ -6491,12 +6496,20 @@ body {
 .\!outline-offset-0 {
   outline-offset: 0px !important;
 }
+.\!outline-offset-\[-3px\] {
+  outline-offset: -3px !important;
+}
 .outline-offset-\[3px\] {
   outline-offset: 3px;
 }
 .outline-focus {
   outline-color: rgb(var(--colors-focus));
 }
+.ring {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -8147,6 +8160,15 @@ body {
 .first-of-type\:-mt-1:first-of-type {
   margin-top: -0.375rem;
 }
+.focus-within\:z-20:focus-within {
+  z-index: 20;
+}
+.focus-within\:focus-outline:focus-within {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 3px;
+  outline-color: rgb(var(--colors-focus));
+}
 @media (hover: hover) and (pointer: fine) {
   .hover\:cursor-pointer:hover {
     cursor: pointer;
@@ -8233,6 +8255,9 @@ body {
 .focus\:top-0:focus {
   top: 0rem;
 }
+.focus\:z-10:focus {
+  z-index: 10;
+}
 .focus\:touch-auto:focus {
   touch-action: auto;
 }
@@ -8293,6 +8318,10 @@ body {
   --tw-shadow-colored: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
 .focus\:-outline-offset-2:focus {
   outline-offset: -2px;
 }
@@ -9921,6 +9950,9 @@ body {
     outline: 2px solid transparent;
     outline-offset: 2px;
   }
+  .xsl\:\!outline-offset-\[-3px\] {
+    outline-offset: -3px !important;
+  }
   .xsl\:transition-colors {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -11665,6 +11697,9 @@ body {
     outline: 2px solid transparent;
     outline-offset: 2px;
   }
+  .sm\:\!outline-offset-\[-3px\] {
+    outline-offset: -3px !important;
+  }
   .sm\:transition-colors {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -13476,6 +13511,9 @@ body {
     outline: 2px solid transparent;
     outline-offset: 2px;
   }
+  .md\:\!outline-offset-\[-3px\] {
+    outline-offset: -3px !important;
+  }
   .md\:transition-colors {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -15262,6 +15300,9 @@ body {
     outline: 2px solid transparent;
     outline-offset: 2px;
   }
+  .lg\:\!outline-offset-\[-3px\] {
+    outline-offset: -3px !important;
+  }
   .lg\:transition-colors {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -16976,6 +17017,9 @@ body {
     outline: 2px solid transparent;
     outline-offset: 2px;
   }
+  .xl\:\!outline-offset-\[-3px\] {
+    outline-offset: -3px !important;
+  }
   .xl\:transition-colors {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -17412,6 +17456,12 @@ body {
 .\[\&\:not\(\:last-child\)\]\:pb-1:not(:last-child) {
   padding-bottom: 0.375rem;
 }
+.\[\&_\:focus-visible\]\:focus-outline :focus-visible {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 3px;
+  outline-color: rgb(var(--colors-focus));
+}
 .\[\&_a\]\:underline a {
   text-decoration-line: underline;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.52.0",
+  "version": "0.53.2",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -255,8 +255,8 @@
     "typescript": "^5.5.4",
     "vite": "^7.0.5",
     "vitest": "^3.2.4",
-    "@westpac/test-config": "~0.0.0",
     "@westpac/eslint-config": "~1.0.1",
+    "@westpac/test-config": "~0.0.0",
     "@westpac/ts-config": "~0.0.0"
   },
   "dependencies": {

package/src/components/accordion/components/accordion-item/accordion-item.styles.ts

@@ -7,7 +7,7 @@ export const styles = tv(
       itemHeader: 'typography-body-9 flex w-full flex-1 items-center justify-between px-3 py-2 group-first:border-t-0',
       headerTitleWrapper: 'flex-1 pr-2 text-left',
       indicator: 'size-3 rotate-90',
-      content: '',
+      content: '[&_:focus-visible]:focus-outline',
       motionContent: '',
     },
     variants: {

package/src/components/alert/alert.styles.ts

@@ -5,7 +5,7 @@ export const styles = tv(
     slots: {
       base: 'typography-body-10 relative mb-5 xsl:flex',
       icon: 'float-left flex-none',
-      body: 'relative flex-1 overflow-hidden xsl:top-[0.125rem] [&_a]:underline',
+      body: 'relative flex-1 xsl:top-[0.125rem] [&_:focus-visible]:focus-outline [&_a]:underline',
       heading: 'typography-body-9 mb-1 font-bold',
       close: 'absolute right-0.5 top-0.5 h-5.5 p-1 hover:opacity-80',
     },

package/src/components/autocomplete/autocomplete.styles.ts

@@ -6,7 +6,7 @@ export const styles = tv(
       base: 'relative flex flex-1 flex-col',
       label: 'block text-left text-sm font-medium text-text',
       outerWrapper:
-        'form-control relative flex flex-1 flex-row items-stretch overflow-hidden pr-2 disabled:form-control-disabled group-[.input-group-after]:rounded-r-none group-[.input-group-before]:rounded-l-none group-[.input-group-after]:border-r-0 group-[.input-group-before]:border-l-0',
+        'form-control relative flex flex-1 flex-row items-stretch pr-2 disabled:form-control-disabled group-[.input-group-after]:rounded-r-none group-[.input-group-before]:rounded-l-none group-[.input-group-after]:border-r-0 group-[.input-group-before]:border-l-0',
       input: 'appearance-none bg-[transparent] outline-none',
       clearButton: 'flex cursor-default items-center justify-center text-text-50 hover:text-border-60',
       iconWrapper: 'flex flex-col justify-center',

package/src/components/badge/badge.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'inline-block w-fit whitespace-nowrap border text-center',
+    base: 'inline-block w-fit whitespace-nowrap border text-center [&_:focus-visible]:focus-outline',
     variants: {
       color: {
         danger: 'border-danger bg-danger text-white',
@@ -24,7 +24,7 @@ export const styles = tv(
         'warning-inverted': 'border-none bg-white text-warning',
       },
       type: {
-        pill: 'typography-body-10 flex h-4 min-w-4 w-fit items-center justify-center rounded-xl px-[0.4375rem] font-medium leading-none',
+        pill: 'typography-body-10 inline-flex h-4 w-fit min-w-4 items-center justify-center rounded-xl px-[0.4375rem] font-medium leading-none',
         default: 'h-[1.25rem] rounded-sm px-1 text-[0.75rem] leading-[1.125rem]',
       },
       soft: {

package/src/components/bottom-sheet/components/bottom-sheet-dialog/bottom-sheet-dialog.styles.ts

@@ -3,9 +3,9 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'relative flex max-h-screen max-w-full flex-1 flex-col overflow-hidden rounded-t-md bg-white shadow-sm md:w-[37.5rem] md:rounded-md',
+      base: 'relative flex max-h-screen max-w-full flex-1 flex-col overflow-hidden rounded-t-md bg-white shadow-sm focus-visible:focus-outline md:w-[37.5rem] md:rounded-md',
       title: 'typography-body-7 p-7 pb-4 pt-9 font-bold text-text max-md:px-5',
-      body: 'flex-1 overflow-auto px-7 pb-7 text-text max-md:px-5',
+      body: 'flex-1 overflow-auto px-7 pb-7 text-text max-md:px-5 [&_:focus-visible]:focus-outline',
       closeBtn: 'absolute right-3 top-3 p-0',
       buttonWrapper: '-mt-2 flex gap-1 px-7 pb-7 max-md:flex-col max-md:px-5 max-md:pb-5',
       primaryBtn: '',

package/src/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.component.tsx

@@ -33,7 +33,7 @@ export function BaseBreadcrumbItem(
     ref as RefObject<HTMLElement>,
   );
   return (
-    <li className="inline-flex items-center">
+    <li className="inline-flex items-center [&_:focus-visible]:focus-outline">
       <FinalTag
         {...({ ...itemProps, ref: propRef, href: FinalTag === 'a' ? href : undefined } as object)}
         className={styles({ className, isDisabled, isCurrent })}

package/src/components/button/button.styles.ts

@@ -33,7 +33,7 @@ export const styles = tv(
         },
         hero: { base: 'border border-hero bg-hero text-white hover:bg-hero-70 active:bg-hero-50' },
         faint: { base: 'border border-borderDark bg-light text-muted hover:bg-white active:bg-white' },
-        link: { base: 'text-link underline' },
+        link: { base: 'px-0 text-link underline' },
         unstyled: { base: 'p-0 text-left' },
       },
       soft: {

package/src/components/button-dropdown/button-dropdown.component.tsx

@@ -19,9 +19,12 @@ export function ButtonDropdown({
   text,
   children,
   size,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelBy,
   look = 'hero',
   soft = false,
   block = false,
+  dropDownIcon: Icon = DropDownIcon,
   shouldFlip,
 }: ButtonDropdownProps) {
   const ref = useRef<HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement & HTMLDivElement>(null);
@@ -50,12 +53,16 @@ export function ButtonDropdown({
     <>
       <Button
         ref={ref}
-        iconAfter={(props: IconProps) => <DropDownIcon aria-hidden {...props} />}
+        iconAfter={
+          !(look === 'link' || look === 'unstyled') ? (props: IconProps) => <Icon aria-hidden {...props} /> : undefined
+        }
         iconBefore={IconBefore}
         size={size}
         look={look}
         soft={soft}
         block={block}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelBy}
         aria-expanded={state.isOpen}
         aria-controls={panelId}
         className={styles.base()}

package/src/components/button-dropdown/button-dropdown.types.ts

@@ -2,6 +2,7 @@ import { ButtonHTMLAttributes, ReactNode } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 
 import { ButtonProps } from '../button/index.js';
+import { IconProps } from '../icon/icon.types.js';
 
 import { styles } from './button-dropdown.styles.js';
 import { ButtonDropdownPanelProps } from './components/button-dropdown-panel/button-dropdown-panel.types.js';
@@ -20,7 +21,7 @@ export type ButtonDropdownProps = {
   /**
    * Look for button
    */
-  look?: 'primary' | 'hero' | 'faint';
+  look?: 'primary' | 'hero' | 'faint' | 'unstyled' | 'link';
   /**
    * State of whether the Popover is open
    */
@@ -32,7 +33,11 @@ export type ButtonDropdownProps = {
   /**
    * Button text
    */
-  text: string;
+  text?: ReactNode;
+  /**
+   * Dropdown icon
+   */
+  dropDownIcon?: (props: IconProps) => ReactNode;
 } & ButtonHTMLAttributes<Element> &
   Pick<ButtonProps, 'size' | 'iconBefore' | 'block'> &
   Pick<ButtonDropdownPanelProps, 'shouldFlip'>;

package/src/components/button-dropdown/components/button-dropdown-panel/button-dropdown-panel.styles.ts

@@ -4,7 +4,7 @@ export const styles = tv(
   {
     slots: {
       base: 'my-0.5 rounded border border-border bg-white p-2 shadow-[0_0.375rem_0.75rem_rgba(0,0,0,0.175)]',
-      dialog: '',
+      dialog: '[&_:focus-visible]:focus-outline',
     },
     variants: {
       isFocused: {

package/src/components/collapsible/collapsible.styles.ts

@@ -4,7 +4,7 @@ export const styles = tv(
   {
     slots: {
       base: 'px-0 text-text no-underline hover:underline',
-      content: 'typography-body-10 mb-2 block',
+      content: 'typography-body-10 mb-2 block [&_:focus-visible]:focus-outline',
     },
     variants: {
       open: {

package/src/components/compacta/compacta.styles.ts

@@ -14,7 +14,7 @@ export const styles = tv(
       addBtn: 'h-auto p-0 no-underline hover:underline',
       toggleBtn: 'p-0',
       collapsible: '',
-      content: 'px-3 pb-5 pt-0 md:px-9',
+      content: 'px-3 pb-5 pt-0 md:px-9 [&_:focus-visible]:focus-outline',
       footer: '',
       titlePrimary: 'typography-body-9 font-bold',
       titleSecondary: 'mt-1 items-center',

package/src/components/date-picker-beta/components/calendar/components/calendar-grid/calendar-grid.component.tsx

@@ -16,7 +16,7 @@ export function CalendarGrid({ state, weekdayStyle = 'short', ...props }: Calend
       <thead {...headerProps}>
         <tr>
           {weekDays.map((day, index) => (
-            <th key={index} className="text-text size-6 text-center text-[0.75rem] font-semibold leading-9">
+            <th key={index} className="size-6 text-center text-[0.75rem] font-semibold leading-9 text-text">
               {day.toUpperCase().slice(0, 2)}
             </th>
           ))}

package/src/components/date-picker-beta/components/date-field/components/date-segment/date-segment.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'font-light disabled:form-control-disabled',
+    base: 'font-light disabled:form-control-disabled focus:focus-outline',
     variants: {
       isPlaceholder: {
         true: 'text-text-50 opacity-100',

package/src/components/date-picker-beta/components/popover/popover.styles.ts

@@ -22,7 +22,7 @@ export const styles = tv(
         false: {
           underlay: '',
           closeButton:
-            'border-border pointer-events-none absolute right-0 top-0 size-5 -translate-y-1/2 translate-x-1/2 touch-none rounded-full border bg-white opacity-0 focus:pointer-events-auto focus:touch-auto focus:opacity-100',
+            'pointer-events-none absolute right-0 top-0 size-5 -translate-y-1/2 translate-x-1/2 touch-none rounded-full border border-border bg-white opacity-0 focus:pointer-events-auto focus:touch-auto focus:opacity-100',
           headerLabel: 'hidden',
           popover:
             'absolute mt-1 scale-100 animate-fadeIn rounded border border-border bg-white opacity-100 shadow-[0_5px_10px_rgba(0,0,0,0.2)]',

package/src/components/filter/components/filter-buttons/filter-buttons.component.tsx

@@ -46,7 +46,7 @@ export function FilterButtons({
         let targetElement;
         let scrollX;
         let scrollBy = true;
-        const buttonPaddingOffset = 20;
+        const buttonPaddingOffset = 26;
         if (direction === 'left') {
           if (scrollTarget.left === -1) {
             scrollX = -container.clientWidth;
@@ -204,7 +204,6 @@ export function FilterButtons({
         style={{
           scrollbarWidth: 'none',
           msOverflowStyle: 'none',
-          overflowX: 'scroll',
         }}
         {...props}
         ref={scrollContainerRef}