@skyscanner/backpack-web 41.3.0 → 41.5.0

package/bpk-component-bubble/src/BpkBubble.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-bubble{position:relative;display:inline-flex;width:auto;height:1.25rem;padding:0 .5rem;flex-direction:column;justify-content:center;border-radius:.25rem;background-color:#e70866;font-family:"Larken","Noto Sans Arabic","Noto Sans Hebrew","Noto Serif","Noto Serif Devanagari","Noto Serif Thai","Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;text-align:center;white-space:nowrap;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-bubble__arrow{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);color:#e70866}
+.bpk-bubble{position:relative;display:inline-flex;width:auto;height:1.25rem;padding:0 .5rem;flex-direction:column;justify-content:center;border-radius:.25rem;background-color:#e70866;font-family:var(--bpk-larken-font-stack, "Larken", "Noto Sans Arabic", "Noto Serif Hebrew", "Noto Serif", "Noto Serif Devanagari", "Noto Serif Thai", "Noto Serif SC", "Noto Serif TC", "Noto Serif JP", "Noto Serif KR", sans-serif);text-align:center;white-space:nowrap;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-bubble__arrow{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);color:#e70866}

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{display:flex;overflow-x:hidden;box-sizing:border-box;gap:.25rem;margin-block:-1.5rem;padding-block:1.5rem;scroll-snap-stop:always;scroll-snap-type:x mandatory;scrollbar-width:none}@media(max-width: 32rem){.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{overflow-x:scroll}}.bpk-card-list-row-rail__row::-webkit-scrollbar,.bpk-card-list-row-rail__rail::-webkit-scrollbar{display:none}.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{position:relative;padding:0 .5rem;flex:0 0 calc((100% - .5rem*(var(--initially-shown-cards, 3) - 1))/var(--initially-shown-cards, 3));overflow:visible;box-sizing:border-box;scroll-snap-align:start}@media(max-width: 32rem){.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{flex:0 0 calc((100% - .5rem*(var(--initially-shown-cards, 3) - 1))/max(1,var(--initially-shown-cards, 3) - .8))}.bpk-card-list-row-rail__row__card:first-child,.bpk-card-list-row-rail__rail__card:first-child{padding-left:.25rem}html[dir=rtl] .bpk-card-list-row-rail__row__card:first-child,html[dir=rtl] .bpk-card-list-row-rail__rail__card:first-child{padding-right:.25rem;padding-left:.5rem}}.bpk-card-list-row-rail__rail{-webkit-overflow-scrolling:touch}
+.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{--spacing-offset: 0.5rem;--carousel-card-gap: 1.25rem;display:flex;overflow-x:hidden;box-sizing:border-box;gap:var(--carousel-card-gap);margin-block:-1.5rem;margin-inline:-0.5rem;padding-block:1.5rem;padding-inline:.5rem;scroll-snap-stop:always;scroll-snap-type:x mandatory;scrollbar-width:none}@media(max-width: 32rem){.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{--spacing-offset: 1rem;--carousel-card-gap: 1rem;overflow-x:scroll}}.bpk-card-list-row-rail__row::-webkit-scrollbar,.bpk-card-list-row-rail__rail::-webkit-scrollbar{display:none}.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{position:relative;flex:0 0 calc((100% - (var(--carousel-card-gap)*(var(--initially-shown-cards, 3) - 1) + var(--spacing-offset)*2/var(--initially-shown-cards, 3)))/var(--initially-shown-cards, 3));overflow:visible;box-sizing:border-box;scroll-margin-inline:var(--spacing-offset);scroll-snap-align:start}@media(max-width: 32rem){.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{flex:0 0 calc((100% - var(--carousel-card-gap)*(var(--initially-shown-cards, 3) - 1))/max(1,var(--initially-shown-cards, 3) - .8))}}.bpk-card-list-row-rail__rail{-webkit-overflow-scrolling:touch}@media(max-width: 32rem){.bpk-card-list-row-rail__rail{margin-inline:calc(-1*var(--spacing-offset));padding-inline:var(--spacing-offset)}}

package/bpk-component-code/index.d.ts

@@ -0,0 +1,6 @@
+import BpkCode from './src/BpkCode';
+import BpkCodeBlock from './src/BpkCodeBlock';
+import type { Props as BpkCodeProps } from './src/BpkCode';
+import type { Props as BpkCodeBlockProps } from './src/BpkCodeBlock';
+export type { BpkCodeProps, BpkCodeBlockProps };
+export { BpkCode, BpkCodeBlock };

package/bpk-component-code/index.js

@@ -14,6 +14,8 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import BpkCode from "./src/BpkCode";
+ */
+
+import BpkCode from "./src/BpkCode";
 import BpkCodeBlock from "./src/BpkCodeBlock";
 export { BpkCode, BpkCodeBlock };

package/bpk-component-code/src/BpkCode.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export type Props = {
+    children: ReactNode;
+    alternate?: boolean;
+    className?: string;
+    [rest: string]: any;
+};
+declare const BpkCode: ({ alternate, children, className, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkCode;

package/bpk-component-code/src/BpkCode.js

@@ -14,42 +14,23 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
+ */
+
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkCode.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkCode = props => {
-  const {
-    alternate,
-    children,
-    className,
-    ...rest
-  } = props;
-  const classNames = [getClassName('bpk-code')];
-  if (alternate) {
-    classNames.push(getClassName('bpk-code--alternate'));
-  }
-  if (className) {
-    classNames.push(className);
-  }
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx("code", {
-      className: classNames.join(' '),
-      ...rest,
-      children: children
-    })
-  );
-};
-BpkCode.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  alternate: PropTypes.bool
-};
-BpkCode.defaultProps = {
-  className: null,
-  alternate: false
+const BpkCode = ({
+  alternate = false,
+  children,
+  className,
+  ...rest
+}) => {
+  const classNames = getClassName('bpk-code', alternate && 'bpk-code--alternate', className);
+  return /*#__PURE__*/_jsx("code", {
+    className: classNames,
+    ...rest,
+    children: children
+  });
 };
 export default BpkCode;

package/bpk-component-code/src/BpkCodeBlock.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export type Props = {
+    children: ReactNode;
+    alternate?: boolean;
+    className?: string;
+    [rest: string]: any;
+};
+declare const BpkCodeBlock: ({ alternate, children, className, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkCodeBlock;

package/bpk-component-code/src/BpkCodeBlock.js

@@ -14,40 +14,27 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
+ */
+
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkCodeBlock.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkCodeBlock = props => {
-  const {
-    alternate,
-    children,
-    className,
-    ...rest
-  } = props;
+const BpkCodeBlock = ({
+  alternate = false,
+  children,
+  className,
+  ...rest
+}) => {
   const preClassNames = getClassName('bpk-code__pre', alternate && 'bpk-code__pre--alternate', className);
   const codeClassNames = getClassName('bpk-code', 'bpk-code--block');
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx("pre", {
-      className: preClassNames,
-      ...rest,
-      children: /*#__PURE__*/_jsx("code", {
-        className: codeClassNames,
-        children: children
-      })
+  return /*#__PURE__*/_jsx("pre", {
+    className: preClassNames,
+    ...rest,
+    children: /*#__PURE__*/_jsx("code", {
+      className: codeClassNames,
+      children: children
     })
-  );
-};
-BpkCodeBlock.propTypes = {
-  children: PropTypes.node.isRequired,
-  alternate: PropTypes.bool,
-  className: PropTypes.string
-};
-BpkCodeBlock.defaultProps = {
-  alternate: false,
-  className: null
+  });
 };
 export default BpkCodeBlock;

package/bpk-component-fieldset/src/BpkFieldset.js

@@ -19,7 +19,6 @@
 import { cloneElement } from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkFormValidation from "../../bpk-component-form-validation";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkLabel from "../../bpk-component-label";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkFieldset.module.css";

package/bpk-component-label/index.d.ts

@@ -0,0 +1,3 @@
+import BpkLabel from './src/BpkLabel';
+export type { Props as BpkLabelProps } from './src/BpkLabel';
+export default BpkLabel;

package/bpk-component-label/index.js

@@ -14,5 +14,7 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import BpkLabel from "./src/BpkLabel";
+ */
+
+import BpkLabel from "./src/BpkLabel";
 export default BpkLabel;

package/bpk-component-label/src/BpkLabel.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+export type Props = {
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    valid?: boolean | null;
+    required?: boolean;
+    white?: boolean;
+} & ComponentPropsWithoutRef<'label'>;
+declare const BpkLabel: ({ children, className, disabled, required, valid, white, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkLabel;

package/bpk-component-label/src/BpkLabel.js

@@ -14,14 +14,15 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
+ */
+
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkLabel.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkLabel = ({
   children,
-  className = null,
+  className,
   disabled = false,
   required = false,
   valid = null,
@@ -30,25 +31,13 @@ const BpkLabel = ({
 }) => {
   const invalid = valid === false;
   const classNames = getClassName('bpk-label', white && 'bpk-label--white', invalid && 'bpk-label--invalid', disabled && 'bpk-label--disabled', white && disabled && 'bpk-label--disabled--white', className);
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsxs("label", {
-      className: classNames,
-      ...rest,
-      children: [children, !disabled && required && /*#__PURE__*/_jsx("span", {
-        className: getClassName('bpk-label__asterisk'),
-        children: "*"
-      })]
-    })
-  );
-};
-BpkLabel.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  valid: PropTypes.bool,
-  required: PropTypes.bool,
-  white: PropTypes.bool
+  return /*#__PURE__*/_jsxs("label", {
+    className: classNames,
+    ...rest,
+    children: [children, !disabled && required && /*#__PURE__*/_jsx("span", {
+      className: getClassName('bpk-label__asterisk'),
+      children: "*"
+    })]
+  });
 };
 export default BpkLabel;

package/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup.js

@@ -82,6 +82,7 @@ const BpkNavigationTabGroup = ({
       children: tabs.map((tab, index) => {
         const selected = index === selectedTab;
         const {
+          badgeText,
           icon,
           text,
           ...tabWrapItem
@@ -103,10 +104,10 @@ const BpkNavigationTabGroup = ({
                 textStyle: TEXT_STYLES.label2,
                 children: text
               })]
-            }), tab.badgeText && /*#__PURE__*/_jsx("span", {
+            }), badgeText && /*#__PURE__*/_jsx("span", {
               className: getClassName('bpk-navigation-tab-bubble-wrapper'),
               children: /*#__PURE__*/_jsx(BpkBubble, {
-                children: tab.badgeText
+                children: badgeText
               })
             })]
           })

package/bpk-component-nudger/src/BpkNudger.js

@@ -21,7 +21,6 @@ import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
 import { withButtonAlignment } from "../../bpk-component-icon";
 import MinusIcon from "../../bpk-component-icon/sm/minus";
 import PlusIcon from "../../bpk-component-icon/sm/plus";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkLabel from "../../bpk-component-label";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules, setNativeValue } from "../../bpk-react-utils";

package/bpk-component-segmented-control/index.d.ts

@@ -1,3 +1,4 @@
-import BpkSegmentedControl, { type Props as BpkSegmentControlProps } from './src/BpkSegmentedControl';
-export type { BpkSegmentControlProps };
+import BpkSegmentedControl, { useSegmentedControlPanels, type Props as BpkSegmentControlProps, type TabPanelProps } from './src/BpkSegmentedControl';
+export type { BpkSegmentControlProps, TabPanelProps };
+export { useSegmentedControlPanels };
 export default BpkSegmentedControl;

package/bpk-component-segmented-control/index.js

@@ -16,5 +16,6 @@
  * limitations under the License.
  */
 
-import BpkSegmentedControl from "./src/BpkSegmentedControl";
+import BpkSegmentedControl, { useSegmentedControlPanels } from "./src/BpkSegmentedControl";
+export { useSegmentedControlPanels };
 export default BpkSegmentedControl;

package/bpk-component-segmented-control/src/BpkSegmentedControl.d.ts

@@ -6,16 +6,51 @@ export declare const SEGMENT_TYPES: {
     SurfaceContrast: string;
 };
 export type SegmentTypes = (typeof SEGMENT_TYPES)[keyof typeof SEGMENT_TYPES];
+export type TabPanelProps = {
+    id: string;
+    role: 'tabpanel';
+    'aria-labelledby': string;
+    hidden: boolean;
+    tabIndex: 0;
+};
+/**
+ * Custom hook to manage segmented control and its panels with automatic ID generation.
+ * Simplifies the API by eliminating the need to manually track IDs.
+ *
+ * Note: For optimal performance, memoize the buttonContents array in the parent component
+ * to prevent unnecessary recalculations (e.g., using useMemo or defining outside render).
+ *
+ * @param {Array<string | ReactNode>} buttonContents - Array of button content (strings or ReactNodes)
+ * @param {number} selectedIndex - Currently selected tab index
+ * @returns {Object} Object with controlProps (for BpkSegmentedControl) and getPanelProps function
+ */
+export declare const useSegmentedControlPanels: (buttonContents: string[] | ReactNode[], selectedIndex: number) => {
+    controlProps: {
+        id: string;
+        buttonContents: string[] | ReactNode[];
+        selectedIndex: number;
+    };
+    getPanelProps: (index: number) => TabPanelProps;
+};
 export type Props = {
     buttonContents: string[] | ReactNode[];
     /**
      * Accessible label for the segmented control group.
      */
     label?: string;
+    /**
+     * ID used to link the segmented control with its tab panels for accessibility.
+     * Created using controlProps from useSegmentedControlPanels hook.
+     */
+    id?: string;
     type?: SegmentTypes;
+    /**
+     * Callback fired when a tab is selected. Receives the index of the selected tab.
+     */
     onItemClick: (id: number) => void;
     selectedIndex: number;
     shadow?: boolean;
+    activationMode?: 'automatic' | 'manual';
 };
-declare const BpkSegmentedControl: ({ buttonContents, label, onItemClick, selectedIndex, shadow, type, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BpkSegmentedControl: ({ activationMode, buttonContents, id: providedId, label, onItemClick, selectedIndex, shadow, type, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkSegmentedControl;

package/bpk-component-segmented-control/src/BpkSegmentedControl.js

@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-import { useState } from 'react';
-import { cssModules } from "../../bpk-react-utils";
+import { useId, useMemo, useRef, useState } from 'react';
+import { cssModules, isRTL } from "../../bpk-react-utils";
 import STYLES from "./BpkSegmentedControl.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -27,40 +27,165 @@ export const SEGMENT_TYPES = {
   SurfaceDefault: 'surface-default',
   SurfaceContrast: 'surface-contrast'
 };
+const getPanelId = (baseId, index) => `${baseId}-panel-${index}`;
+const getTabId = (baseId, index) => `${baseId}-tab-${index}`;
+
+/**
+ * Helper function to get accessibility props for tab panel elements.
+ * Use this to ensure proper ARIA relationships between tabs and their panels.
+ *
+ * Note: For a simpler API, consider using the useSegmentedControlPanels hook instead,
+ * which manages IDs automatically and reduces boilerplate.
+ * This function is kept for backward compatibility.
+ *
+ * @param {string} baseId - The base ID used to generate unique IDs for tabs and panels.
+ * @param {number} index - The index of the tab panel.
+ * @param {number} selectedIndex - The currently selected tab index.
+ * @returns {TabPanelProps} An object containing the necessary props for a tab panel.
+ */
+const getTabPanelProps = (baseId, index, selectedIndex) => ({
+  id: getPanelId(baseId, index),
+  role: 'tabpanel',
+  'aria-labelledby': getTabId(baseId, index),
+  hidden: index !== selectedIndex,
+  tabIndex: 0
+});
+const getContainerAriaProps = (providedId, label) => {
+  const props = {};
+  if (providedId) {
+    props.role = 'tablist';
+    props['aria-orientation'] = 'horizontal';
+  }
+  if (label) {
+    props['aria-label'] = label;
+  }
+  return props;
+};
+const getButtonAriaProps = (providedId, isSelected, panelId) => {
+  if (!providedId) {
+    return {};
+  }
+  return {
+    role: 'tab',
+    'aria-selected': isSelected,
+    'aria-controls': panelId
+  };
+};
+const getTabIndex = (providedId, isSelected) => {
+  if (!providedId) {
+    return undefined;
+  }
+  return isSelected ? 0 : -1;
+};
+const getNextIndex = (current, max) => current === max ? 0 : current + 1;
+const getPrevIndex = (current, max) => current === 0 ? max : current - 1;
+
+/**
+ * Custom hook to manage segmented control and its panels with automatic ID generation.
+ * Simplifies the API by eliminating the need to manually track IDs.
+ *
+ * Note: For optimal performance, memoize the buttonContents array in the parent component
+ * to prevent unnecessary recalculations (e.g., using useMemo or defining outside render).
+ *
+ * @param {Array<string | ReactNode>} buttonContents - Array of button content (strings or ReactNodes)
+ * @param {number} selectedIndex - Currently selected tab index
+ * @returns {Object} Object with controlProps (for BpkSegmentedControl) and getPanelProps function
+ */
+export const useSegmentedControlPanels = (buttonContents, selectedIndex) => {
+  const baseId = useId();
+  const controlProps = useMemo(() => ({
+    id: baseId,
+    buttonContents,
+    selectedIndex
+  }), [baseId, buttonContents, selectedIndex]);
+  const getPanelProps = useMemo(() => index => getTabPanelProps(baseId, index, selectedIndex), [baseId, selectedIndex]);
+  return {
+    controlProps,
+    getPanelProps
+  };
+};
 const BpkSegmentedControl = ({
+  activationMode = 'automatic',
   buttonContents,
+  id: providedId,
   label,
   onItemClick,
   selectedIndex,
   shadow = false,
   type = SEGMENT_TYPES.CanvasDefault
 }) => {
+  const buttonRefs = useRef([]);
+  const panelIds = useMemo(() => Array.from({
+    length: buttonContents.length
+  }, (_, i) => providedId ? getPanelId(providedId, i) : undefined), [providedId, buttonContents.length]);
+
+  // TODO: Consider removing internal state - component is controlled via selectedIndex prop.
+  // Internal state may cause sync issues if selectedIndex changes externally.
   const [selectedButton, setSelectedButton] = useState(selectedIndex);
-  const handleButtonClick = id => {
-    if (id !== selectedButton) {
-      setSelectedButton(id);
-      onItemClick(id);
+  const handleButtonClick = index => {
+    if (index !== selectedButton) {
+      setSelectedButton(index);
+      onItemClick(index);
+    }
+  };
+  const handleKeyDown = (event, currentIndex) => {
+    const lastIndex = buttonContents.length - 1;
+    const rtl = isRTL();
+    let newIndex = currentIndex;
+    switch (event.key) {
+      case 'ArrowRight':
+        newIndex = rtl ? getPrevIndex(currentIndex, lastIndex) : getNextIndex(currentIndex, lastIndex);
+        break;
+      case 'ArrowLeft':
+        newIndex = rtl ? getNextIndex(currentIndex, lastIndex) : getPrevIndex(currentIndex, lastIndex);
+        break;
+      case 'Home':
+        newIndex = 0;
+        break;
+      case 'End':
+        newIndex = lastIndex;
+        break;
+      case ' ':
+      case 'Enter':
+        event.preventDefault();
+        if (activationMode === 'manual') {
+          setSelectedButton(currentIndex);
+          onItemClick(currentIndex);
+        }
+        return;
+      default:
+        return;
+    }
+    event.preventDefault();
+    if (activationMode === 'automatic') {
+      setSelectedButton(newIndex);
+      onItemClick(newIndex);
     }
+    buttonRefs.current[newIndex]?.focus();
   };
   const containerStyling = getClassName('bpk-segmented-control-group', shadow && 'bpk-segmented-control-group-shadow');
   return /*#__PURE__*/_jsx("div", {
     className: containerStyling,
-    role: "group",
-    ...(label ? {
-      'aria-label': label
-    } : {}),
+    ...getContainerAriaProps(providedId, label),
     children: buttonContents.map((content, index) => {
       const isSelected = index === selectedButton;
       const rightOfOption = index === selectedButton + 1;
       const buttonStyling = getClassName('bpk-segmented-control', `bpk-segmented-control--${type}`, isSelected && `bpk-segmented-control--${type}-selected`, rightOfOption && `bpk-segmented-control--${type}-rightOfOption`, shadow && isSelected && `bpk-segmented-control--${type}-selected-shadow`);
+      const buttonTabId = providedId ? getTabId(providedId, index) : undefined;
+      const tabIndexValue = getTabIndex(providedId, isSelected);
       return /*#__PURE__*/_jsx("button", {
-        id: index.toString(),
+        ref: el => {
+          buttonRefs.current[index] = el;
+        },
+        id: buttonTabId,
         type: "button",
         onClick: () => handleButtonClick(index),
+        onKeyDown: event => handleKeyDown(event, index),
         className: buttonStyling,
-        "aria-pressed": !!isSelected,
+        tabIndex: tabIndexValue,
+        ...getButtonAriaProps(providedId, isSelected, panelIds[index]),
         children: content
-      }, `index-${index.toString()}`);
+      }, buttonTabId || `${index}`);
     })
   });
 };

package/bpk-component-text/src/BpkText.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-text{margin:0}.bpk-text--xs{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--sm{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--base{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--lg{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--xl{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--xxl{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--xxxl{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--xxxxl{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--xxxxxl{font-size:4rem;line-height:4rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--caption{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--footnote{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--label-1{font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-text--label-2{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-text--label-3{font-size:.75rem;line-height:1rem;font-weight:700}.bpk-text--body-default{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--body-longform{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--subheading{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--heading-1{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--heading-2{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--heading-3{font-size:1.5rem;line-height:1.75rem;font-weight:700}.bpk-text--heading-4{font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-text--heading-5{font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-text--hero-1{font-size:7.5rem;line-height:7.5rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-2{font-size:6rem;line-height:6rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-3{font-size:4.75rem;line-height:4.75rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-4{font-size:4rem;line-height:4rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-5{font-size:3rem;line-height:3rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-6{font-size:2.5rem;line-height:2.5rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--editorial-1{font-family:"Larken","Noto Sans Arabic","Noto Sans Hebrew","Noto Serif","Noto Serif Devanagari","Noto Serif Thai","Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;font-size:3rem;line-height:3.5rem;font-weight:300}.bpk-text--editorial-2{font-family:"Larken","Noto Sans Arabic","Noto Sans Hebrew","Noto Serif","Noto Serif Devanagari","Noto Serif Thai","Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;font-size:2rem;line-height:2.5rem;font-weight:300}.bpk-text--editorial-3{font-family:"Larken","Noto Sans Arabic","Noto Sans Hebrew","Noto Serif","Noto Serif Devanagari","Noto Serif Thai","Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text.bpk-text--text-disabled{color:rgba(0,0,0,.2)}.bpk-text.bpk-text--text-disabled-on-dark{color:hsla(0,0%,100%,.5)}.bpk-text.bpk-text--text-error{color:#e70866}.bpk-text.bpk-text--text-hero{color:#0062e3}.bpk-text.bpk-text--text-link{color:#0062e3}.bpk-text.bpk-text--text-on-dark{color:#fff}.bpk-text.bpk-text--text-on-light{color:#161616}.bpk-text.bpk-text--text-primary{color:#161616}.bpk-text.bpk-text--text-primary-inverse{color:#fff}.bpk-text.bpk-text--text-secondary{color:#626971}.bpk-text.bpk-text--text-success{color:#0c838a}
+.bpk-text{margin:0}.bpk-text--xs{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--sm{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--base{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--lg{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--xl{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--xxl{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--xxxl{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--xxxxl{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--xxxxxl{font-size:4rem;line-height:4rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--caption{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--footnote{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--label-1{font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-text--label-2{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-text--label-3{font-size:.75rem;line-height:1rem;font-weight:700}.bpk-text--body-default{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--body-longform{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--subheading{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--heading-1{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--heading-2{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--heading-3{font-size:1.5rem;line-height:1.75rem;font-weight:700}.bpk-text--heading-4{font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-text--heading-5{font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-text--hero-1{font-size:7.5rem;line-height:7.5rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-2{font-size:6rem;line-height:6rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-3{font-size:4.75rem;line-height:4.75rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-4{font-size:4rem;line-height:4rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-5{font-size:3rem;line-height:3rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-6{font-size:2.5rem;line-height:2.5rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--editorial-1{font-family:var(--bpk-larken-font-stack, "Larken", "Noto Sans Arabic", "Noto Serif Hebrew", "Noto Serif", "Noto Serif Devanagari", "Noto Serif Thai", "Noto Serif SC", "Noto Serif TC", "Noto Serif JP", "Noto Serif KR", sans-serif);font-size:3rem;line-height:3.5rem;font-weight:300}.bpk-text--editorial-2{font-family:var(--bpk-larken-font-stack, "Larken", "Noto Sans Arabic", "Noto Serif Hebrew", "Noto Serif", "Noto Serif Devanagari", "Noto Serif Thai", "Noto Serif SC", "Noto Serif TC", "Noto Serif JP", "Noto Serif KR", sans-serif);font-size:2rem;line-height:2.5rem;font-weight:300}.bpk-text--editorial-3{font-family:var(--bpk-larken-font-stack, "Larken", "Noto Sans Arabic", "Noto Serif Hebrew", "Noto Serif", "Noto Serif Devanagari", "Noto Serif Thai", "Noto Serif SC", "Noto Serif TC", "Noto Serif JP", "Noto Serif KR", sans-serif);font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text.bpk-text--text-disabled{color:rgba(0,0,0,.2)}.bpk-text.bpk-text--text-disabled-on-dark{color:hsla(0,0%,100%,.5)}.bpk-text.bpk-text--text-error{color:#e70866}.bpk-text.bpk-text--text-hero{color:#0062e3}.bpk-text.bpk-text--text-link{color:#0062e3}.bpk-text.bpk-text--text-on-dark{color:#fff}.bpk-text.bpk-text--text-on-light{color:#161616}.bpk-text.bpk-text--text-primary{color:#161616}.bpk-text.bpk-text--text-primary-inverse{color:#fff}.bpk-text.bpk-text--text-secondary{color:#626971}.bpk-text.bpk-text--text-success{color:#0c838a}

package/bpk-component-theme-toggle/index.d.ts

@@ -0,0 +1,4 @@
+import BpkThemeToggle from './src/BpkThemeToggle';
+import updateOnThemeChange from './src/updateOnThemeChange';
+export default BpkThemeToggle;
+export { updateOnThemeChange };

package/bpk-component-theme-toggle/src/BpkThemeToggle.d.ts

@@ -0,0 +1,16 @@
+import type { ChangeEvent } from 'react';
+import { Component } from 'react';
+type Props = Record<string, never>;
+type State = {
+    selectedTheme: string;
+};
+declare class BpkThemeToggle extends Component<Props, State> {
+    constructor(props: Props);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    handleChange: (e: ChangeEvent<HTMLSelectElement>) => void;
+    cycleTheme: () => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default BpkThemeToggle;

package/bpk-component-theme-toggle/src/BpkThemeToggle.js

@@ -18,6 +18,7 @@
 
 import { Component } from 'react';
 import BpkLabel from "../../bpk-component-label";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkSelect from "../../bpk-component-select";
 import { cssModules } from "../../bpk-react-utils";
 import bpkCustomThemes from "./theming";
@@ -29,11 +30,13 @@ const getClassName = cssModules(STYLES);
 const availableThemes = Object.keys(bpkCustomThemes);
 const setTheme = theme => {
   const htmlElement = getHtmlElement();
-  htmlElement.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, {
-    detail: {
-      theme
-    }
-  }));
+  if (htmlElement) {
+    htmlElement.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, {
+      detail: {
+        theme
+      }
+    }));
+  }
 };
 class BpkThemeToggle extends Component {
   constructor(props) {
@@ -58,7 +61,7 @@ class BpkThemeToggle extends Component {
     this.setState({
       selectedTheme
     });
-    setTheme(bpkCustomThemes[selectedTheme]);
+    setTheme(selectedTheme ? bpkCustomThemes[selectedTheme] : undefined);
   };
   cycleTheme = () => {
     let {
@@ -73,7 +76,7 @@ class BpkThemeToggle extends Component {
     this.setState({
       selectedTheme
     });
-    setTheme(bpkCustomThemes[selectedTheme]);
+    setTheme(selectedTheme ? bpkCustomThemes[selectedTheme] : undefined);
   };
   render() {
     const {