@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.1

package/esm/core/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/breadcrumbs.css';
 declare type BreadcrumbsProps = {
     /**
      * Index of the currently active breadcrumb.

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useMergedRefs, useOverflow, SvgChevronRight, Box, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/breadcrumbs.css';
 /**
  * A breadcrumb trail is used as a navigational aid to help users keep track
  * of their place in the application. It is often placed before a page's main content.

package/esm/core/ButtonGroup/ButtonGroup.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 declare type ButtonGroupProps = {
     /**
      * Buttons in the ButtonGroup.

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useOverflow, useMergedRefs, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 /**
  * Group buttons together for common actions.
  * Handles responsive overflow when the `overflowButton` prop is specified.

package/esm/core/Buttons/Button/Button.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 export declare type ButtonProps = {
     /**
      * Modify size of the button.

package/esm/core/Buttons/Button/Button.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 /**
  * Generic button component
  * @example

package/esm/core/Buttons/DropdownButton/DropdownButton.d.ts

@@ -2,7 +2,6 @@
 import type { ButtonProps } from '../Button/Button.js';
 import type { DropdownMenuProps } from '../../DropdownMenu/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 export declare type DropdownButtonProps = {
     /**
      * Items in the dropdown menu.

package/esm/core/Buttons/DropdownButton/DropdownButton.js

@@ -7,7 +7,6 @@ import cx from 'classnames';
 import { Button } from '../Button/index.js';
 import { DropdownMenu } from '../../DropdownMenu/index.js';
 import { SvgCaretDownSmall, SvgCaretUpSmall, useMergedRefs, } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 /**
  * Button that opens a DropdownMenu.
  * @example

package/esm/core/Buttons/IconButton/IconButton.d.ts

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import type { ButtonProps } from '../Button/Button.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
-import '@itwin/itwinui-css/css/tooltip.css';
 export declare type IconButtonProps = {
     /**
      * Button gets active style.

package/esm/core/Buttons/IconButton/IconButton.js

@@ -5,8 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { VisuallyHidden, Popover, Box } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
-import '@itwin/itwinui-css/css/tooltip.css';
 /**
  * Icon button
  * @example

package/esm/core/Buttons/SplitButton/SplitButton.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import type { ButtonProps } from '../Button/Button.js';
 import type { Placement } from 'tippy.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 export declare type SplitButtonProps = ButtonProps & {
     /**
      * Items in the dropdown menu.

package/esm/core/Buttons/SplitButton/SplitButton.js

@@ -8,7 +8,6 @@ import { Button } from '../Button/index.js';
 import { IconButton } from '../IconButton/index.js';
 import { DropdownMenu } from '../../DropdownMenu/index.js';
 import { Box, SvgCaretDownSmall, SvgCaretUpSmall } from '../../utils/index.js';
-import '@itwin/itwinui-css/css/button.css';
 /**
  * Split button component with a DropdownMenu.
  *

package/esm/core/Carousel/Carousel.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/carousel.css';
 declare type CarouselProps = {
     /**
      * Index of the currently shown slide.

package/esm/core/Carousel/Carousel.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { getRandomValue, useMergedRefs, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/carousel.css';
 import { CarouselContext } from './CarouselContext.js';
 import { CarouselSlider } from './CarouselSlider.js';
 import { CarouselSlide } from './CarouselSlide.js';

package/esm/core/Carousel/CarouselDotsList.d.ts

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/carousel.css';
 declare type CarouselDotsListProps = {
     /** Number of total dots/slides in the carousel. Will be inferred from Carousel context or children. Otherwise, it is required to be passed. */
     length?: number;

package/esm/core/Carousel/CarouselDotsList.js

@@ -7,7 +7,6 @@ import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
 import { getBoundedValue, getWindow, useMergedRefs, useResizeObserver, Box, } from '../utils/index.js';
 import { CarouselDot } from './CarouselDot.js';
-import '@itwin/itwinui-css/css/carousel.css';
 /**
  * The `CarouselDotsList` component shows a list of `CarouselDot` components which can be used to
  * choose a specific slide. If used as a descendant of `Carousel`, then this component does not need

package/esm/core/Checkbox/Checkbox.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/checkbox.css';
 declare type CheckboxProps = {
     /**
      * Text that will be shown next to the checkbox.

package/esm/core/Checkbox/Checkbox.js

@@ -6,7 +6,6 @@ import cx from 'classnames';
 import * as React from 'react';
 import { ProgressRadial } from '../ProgressIndicators/index.js';
 import { useMergedRefs, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/checkbox.css';
 /**
  * Simple input checkbox
  * @example

package/esm/core/ColorPicker/ColorBuilder.d.ts

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/color-picker.css';
 /**
  * `ColorBuilder` consists of two parts:
  * a color canvas to adjust saturation and lightness values,

package/esm/core/ColorPicker/ColorBuilder.js

@@ -6,7 +6,6 @@ import * as React from 'react';
 import cx from 'classnames';
 import { ColorValue, getBoundedValue, useEventListener, useMergedRefs, Box, } from '../utils/index.js';
 import { Slider } from '../Slider/index.js';
-import '@itwin/itwinui-css/css/color-picker.css';
 import { useColorPickerContext } from './ColorPickerContext.js';
 const getVerticalPercentageOfRectangle = (rect, pointer) => {
     const position = getBoundedValue(pointer, rect.top, rect.bottom);

package/esm/core/ColorPicker/ColorInputPanel.d.ts

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/color-picker.css';
 declare type ColorInputPanelProps = {
     /**
      * The default color format to be inputted in the panel.

package/esm/core/ColorPicker/ColorInputPanel.js

@@ -8,7 +8,6 @@ import { IconButton } from '../Buttons/index.js';
 import { Input } from '../Input/index.js';
 import { ColorValue, InputContainer, SvgSwap, Box } from '../utils/index.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
-import '@itwin/itwinui-css/css/color-picker.css';
 /**
  * `ColorInputPanel` shows input fields to enter precise color values in the specified format.
  * It also allows switching between the specified formats using a swap button.

package/esm/core/ColorPicker/ColorPalette.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { ColorValue } from '../utils/index.js';
 import type { ColorType, PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/color-picker.css';
 export declare type ColorPaletteProps = {
     /**
      * Label shown above the palette.

package/esm/core/ColorPicker/ColorPalette.js

@@ -8,7 +8,6 @@ import { ColorValue, getFocusableElements, useMergedRefs, Box, } from '../utils/
 import { getColorValue } from './ColorPicker.js';
 import { ColorSwatch } from './ColorSwatch.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
-import '@itwin/itwinui-css/css/color-picker.css';
 /**
  * `ColorPalette` is used to show a group of `ColorSwatch` components.
  * @example

package/esm/core/ColorPicker/ColorPicker.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/color-picker.css';
 import { ColorValue } from '../utils/index.js';
 import type { ColorType, PolymorphicForwardRefComponent } from '../utils/index.js';
 export declare const getColorValue: (color: ColorType | ColorValue | undefined) => ColorValue;

package/esm/core/ColorPicker/ColorPicker.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import '@itwin/itwinui-css/css/color-picker.css';
 import { ColorValue, getTabbableElements, useMergedRefs, Box, } from '../utils/index.js';
 import cx from 'classnames';
 import { ColorPickerContext } from './ColorPickerContext.js';

package/esm/core/ColorPicker/ColorSwatch.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/color-picker.css';
 import { ColorValue } from '../utils/index.js';
 import type { ColorType, PolymorphicForwardRefComponent } from '../utils/index.js';
 declare type ColorSwatchProps = {

package/esm/core/ColorPicker/ColorSwatch.js

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/color-picker.css';
 import { ColorValue, Box } from '../utils/index.js';
 import { getColorValue } from './ColorPicker.js';
 /**

package/esm/core/ComboBox/ComboBox.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import type { SelectOption } from '../Select/index.js';
 import type { Input } from '../Input/Input.js';
 import type { PopoverProps, InputContainerProps, CommonProps } from '../utils/index.js';
-import 'tippy.js/animations/shift-away.css';
 declare type ActionType = 'added' | 'removed';
 declare type MultipleOnChangeProps<T> = {
     value: T;

package/esm/core/ComboBox/ComboBox.js

@@ -7,7 +7,6 @@ import { MenuExtraContent } from '../Menu/index.js';
 import SelectTag from '../Select/SelectTag.js';
 import { Text } from '../Typography/index.js';
 import { getRandomValue, mergeRefs, useLatestRef, useIsomorphicLayoutEffect, AutoclearingHiddenLiveRegion, } from '../utils/index.js';
-import 'tippy.js/animations/shift-away.css';
 import { ComboBoxActionContext, comboBoxReducer, ComboBoxRefsContext, ComboBoxStateContext, } from './helpers.js';
 import { ComboBoxDropdown } from './ComboBoxDropdown.js';
 import { ComboBoxEndIcon } from './ComboBoxEndIcon.js';

package/esm/core/DatePicker/DatePicker.d.ts

@@ -1,5 +1,4 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/date-picker.css';
 import type { TimePickerProps } from '../TimePicker/TimePicker.js';
 /**
  * Generate localized months and days strings using `Intl.DateTimeFormat` for passed locale to use in DatePicker component.

package/esm/core/DatePicker/DatePicker.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { SvgChevronLeft, SvgChevronRight, SvgChevronLeftDouble, SvgChevronRightDouble, isBefore, Box, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/date-picker.css';
 import { IconButton } from '../Buttons/IconButton/index.js';
 import { TimePicker } from '../TimePicker/index.js';
 const isSameDay = (a, b) => {

package/esm/core/Dialog/Dialog.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import '@itwin/itwinui-css/css/dialog.css';
 import type { DialogContextProps } from './DialogContext.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 declare type DialogProps = {

package/esm/core/Dialog/Dialog.js

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/dialog.css';
 import { DialogTitleBar } from './DialogTitleBar.js';
 import { DialogContent } from './DialogContent.js';
 import { DialogBackdrop } from './DialogBackdrop.js';
@@ -13,7 +12,7 @@ import { DialogButtonBar } from './DialogButtonBar.js';
 import { DialogMain } from './DialogMain.js';
 import { useMergedRefs, Box } from '../utils/index.js';
 const DialogComponent = React.forwardRef((props, ref) => {
-    const { trapFocus = false, setFocus = false, preventDocumentScroll = false, isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = false, onClose, isDraggable = false, isResizable = false, relativeTo = 'viewport', className, ...rest } = props;
+    const { trapFocus = false, setFocus = false, preventDocumentScroll = false, isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = false, onClose, isDraggable = false, isResizable = false, relativeTo = 'viewport', placement, className, ...rest } = props;
     const dialogRootRef = React.useRef(null);
     const refs = useMergedRefs(ref, dialogRootRef);
     return (React.createElement(DialogContext.Provider, { value: {
@@ -29,6 +28,7 @@ const DialogComponent = React.forwardRef((props, ref) => {
             isResizable,
             relativeTo,
             dialogRootRef,
+            placement,
         } },
         React.createElement(Box, { className: cx('iui-dialog-wrapper', className), "data-iui-relative": relativeTo === 'container', ref: refs, ...rest })));
 });

package/esm/core/Dialog/DialogButtonBar.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/dialog.css';
 /**
  * Container for Buttons in `Dialog`. Recommended to be used as a child of `Dialog`.
  * @example

package/esm/core/Dialog/DialogButtonBar.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/dialog.css';
 /**
  * Container for Buttons in `Dialog`. Recommended to be used as a child of `Dialog`.
  * @example

package/esm/core/Dialog/DialogContent.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/dialog.css';
 /**
  * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
  * @example

package/esm/core/Dialog/DialogContent.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/dialog.css';
 /**
  * Container for content in `Dialog`. Recommended to be used as a child of `Dialog`.
  * @example

package/esm/core/Dialog/DialogContext.d.ts

@@ -65,6 +65,10 @@ export declare type DialogContextProps = {
      * Dialog root ref. For internal use.
      */
     dialogRootRef?: React.RefObject<HTMLDivElement>;
+    /**
+     * Determines the positioning of Dialog on page.
+     */
+    placement?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 };
 export declare const DialogContext: React.Context<DialogContextProps | undefined>;
 export declare const useDialogContext: () => DialogContextProps;

package/esm/core/Dialog/DialogMain.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/dialog.css';
 import type { DialogContextProps } from './DialogContext.js';
 export declare type DialogMainProps = {
     /**

package/esm/core/Dialog/DialogMain.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { FocusTrap, getTranslateValues, Resizer, useMergedRefs, useIsomorphicLayoutEffect, Box, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/dialog.css';
 import { useDialogContext } from './DialogContext.js';
 import { CSSTransition } from 'react-transition-group';
 import { DialogDragContext } from './DialogDragContext.js';
@@ -32,7 +31,7 @@ import useDragAndDrop from '../utils/hooks/useDragAndDrop.js';
  */
 export const DialogMain = React.forwardRef((props, ref) => {
     const dialogContext = useDialogContext();
-    const { className, children, styleType = 'default', isOpen = dialogContext.isOpen, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, closeOnEsc = dialogContext.closeOnEsc, trapFocus = dialogContext.trapFocus, setFocus = dialogContext.setFocus, preventDocumentScroll = dialogContext.preventDocumentScroll, onKeyDown, isDraggable = dialogContext.isDraggable, isResizable = dialogContext.isResizable, style: propStyle, ...rest } = props;
+    const { className, children, styleType = 'default', isOpen = dialogContext.isOpen, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, closeOnEsc = dialogContext.closeOnEsc, trapFocus = dialogContext.trapFocus, setFocus = dialogContext.setFocus, preventDocumentScroll = dialogContext.preventDocumentScroll, onKeyDown, isDraggable = dialogContext.isDraggable, isResizable = dialogContext.isResizable, style: propStyle, placement = dialogContext.placement, ...rest } = props;
     const [style, setStyle] = React.useState();
     const dialogRef = React.useRef(null);
     const refs = useMergedRefs(dialogRef, ref);
@@ -113,7 +112,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
             'iui-dialog-full-page': styleType === 'fullPage',
             'iui-dialog-visible': isOpen,
             'iui-dialog-draggable': isDraggable,
-        }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, style: {
+        }, className), role: 'dialog', ref: refs, onKeyDown: handleKeyDown, tabIndex: -1, "data-iui-placement": placement, style: {
             transform,
             overflow: 'unset',
             ...style,

package/esm/core/Dialog/DialogTitleBar.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/dialog.css';
 import type { DialogContextProps } from './DialogContext.js';
 declare type DialogTitleBarProps = {
     /**

package/esm/core/Dialog/DialogTitleBar.js

@@ -6,7 +6,6 @@ import * as React from 'react';
 import cx from 'classnames';
 import { SvgClose, mergeEventHandlers, Box } from '../utils/index.js';
 import { IconButton } from '../Buttons/index.js';
-import '@itwin/itwinui-css/css/dialog.css';
 import { useDialogContext } from './DialogContext.js';
 import { DialogTitleBarTitle } from './DialogTitleBarTitle.js';
 import { useDialogDragContext } from './DialogDragContext.js';

package/esm/core/Dialog/DialogTitleBarTitle.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/dialog.css';
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example

package/esm/core/Dialog/DialogTitleBarTitle.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/dialog.css';
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example

package/esm/core/ExpandableBlock/ExpandableBlock.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/expandable-block.css';
 declare type ExpandableBlockProps = {
     /**
      * The main text displayed on the block, regardless of state.
@@ -44,6 +43,11 @@ declare type ExpandableBlockProps = {
      * @default 'default'
      */
     styleType?: 'default' | 'borderless';
+    /**
+     * Disables ExpandableBlock.
+     * @default false
+     */
+    disabled?: boolean;
 };
 /**
  * Container that allows content to be hidden behind a brief title and a caption.

package/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { StatusIconMap, WithCSSTransition, SvgChevronRight, Icon, Box, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/expandable-block.css';
 /**
  * Container that allows content to be hidden behind a brief title and a caption.
  * @example
@@ -16,18 +15,21 @@ import '@itwin/itwinui-css/css/expandable-block.css';
  * <ExpandableBlock title='Block with icon' endIcon={<SvgPlaceholder />}>Content</ExpandableBlock>
  */
 export const ExpandableBlock = React.forwardRef((props, ref) => {
-    const { caption, children, className, title, onToggle, style, isExpanded = false, endIcon, status, size = 'default', styleType = 'default', ...rest } = props;
+    const { caption, children, className, title, onToggle, style, isExpanded = false, endIcon, status, size = 'default', styleType = 'default', disabled = false, ...rest } = props;
     const icon = endIcon !== null && endIcon !== void 0 ? endIcon : (status && StatusIconMap[status]());
     const [expanded, setExpanded] = React.useState(isExpanded);
     React.useEffect(() => {
         setExpanded(isExpanded);
     }, [isExpanded]);
     const handleToggle = () => {
+        if (disabled) {
+            return;
+        }
         setExpanded(!expanded);
         onToggle === null || onToggle === void 0 ? void 0 : onToggle(!expanded);
     };
     const onKeyDown = (event) => {
-        if (event.altKey) {
+        if (event.altKey || disabled) {
             return;
         }
         if (event.key === 'Enter' ||
@@ -42,7 +44,7 @@ export const ExpandableBlock = React.forwardRef((props, ref) => {
             'iui-small': size === 'small',
             'iui-borderless': styleType === 'borderless',
         }, className), style: style, ref: ref, ...rest },
-        React.createElement(Box, { "aria-expanded": expanded, className: 'iui-header', tabIndex: 0, onClick: handleToggle, onKeyDown: onKeyDown },
+        React.createElement(Box, { role: 'button', "aria-expanded": expanded, className: 'iui-header', "aria-disabled": disabled, tabIndex: 0, onClick: handleToggle, onKeyDown: onKeyDown },
             React.createElement(SvgChevronRight, { className: 'iui-icon', "aria-hidden": true }),
             React.createElement(Box, { as: 'span', className: 'iui-expandable-block-label' },
                 React.createElement(Box, { className: 'iui-title' }, title),

package/esm/core/Fieldset/Fieldset.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/fieldset.css';
 declare type FieldsetProps = {
     /**
      * The caption or title for the fieldset.

package/esm/core/Fieldset/Fieldset.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import { Box } from '../utils/index.js';
 import cx from 'classnames';
-import '@itwin/itwinui-css/css/fieldset.css';
 /**
  * Fieldset component to group several inputs, controls and labels within a form.
  * @example

package/esm/core/FileUpload/FileUpload.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/file-upload.css';
 declare type FileUploadProps = {
     /**
      * Content shown over `children` when file is being dragged onto the component.

package/esm/core/FileUpload/FileUpload.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box, useMergedRefs } from '../utils/index.js';
-import '@itwin/itwinui-css/css/file-upload.css';
 /**
  * File upload component to be wrapped around `FileUploadTemplate` or any arbitrary component.
  * Provides support for dragging and dropping multiple files.

package/esm/core/FileUpload/FileUploadCard.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/file-upload.css';
 declare type FileUploadCardProps = {
     /**
      * Files to pass (only needed when passing a custom action)

package/esm/core/FileUpload/FileUploadCard.js

@@ -7,7 +7,6 @@ import { getWindow, SvgDocument, useMergedRefs, useSafeContext, useId, mergeEven
 import cx from 'classnames';
 import { FileEmptyCard } from './FileEmptyCard.js';
 import { Anchor } from '../Typography/Anchor/Anchor.js';
-import '@itwin/itwinui-css/css/file-upload.css';
 const toBytes = (bytes) => {
     const units = [' bytes', 'KB', 'MB', 'GB', 'TB'];
     let i = 0;
@@ -87,7 +86,7 @@ const FileUploadCardInput = React.forwardRef((props, ref) => {
         }
     }, [id, inputId, setInputId]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(VisuallyHidden, { as: 'input', type: 'file', onChange: mergeEventHandlers(onChange, (e) => {
+        React.createElement(VisuallyHidden, { as: 'input', type: 'file', unhideOnFocus: false, onChange: mergeEventHandlers(onChange, (e) => {
                 const _files = Array.from(e.currentTarget.files || []);
                 onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(_files);
                 setInternalFiles(_files);

package/esm/core/FileUpload/FileUploadTemplate.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import '@itwin/itwinui-css/css/file-upload.css';
 declare type FileUploadTemplateProps = {
     /**
      * Callback fired when a file is selected from the device.

package/esm/core/FileUpload/FileUploadTemplate.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { SvgUpload, Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/file-upload.css';
 import { Anchor } from '../Typography/Anchor/Anchor.js';
 /**
  * Default template to be used with the `FileUpload` wrapper component.

package/esm/core/Footer/Footer.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/footer.css';
 export declare type TitleTranslations = {
     termsOfService: string;
     privacy: string;

package/esm/core/Footer/Footer.js

@@ -5,7 +5,6 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../utils/index.js';
-import '@itwin/itwinui-css/css/footer.css';
 import { FooterItem } from './FooterItem.js';
 import { FooterSeparator } from './FooterSeparator.js';
 import { FooterList } from './FooterList.js';

package/esm/core/Footer/FooterItem.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/footer.css';
 /**
  * Footer item. Recommended to use inside `Footer.List`.
  */

package/esm/core/Footer/FooterItem.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/footer.css';
 /**
  * Footer item. Recommended to use inside `Footer.List`.
  */

package/esm/core/Footer/FooterList.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/footer.css';
 /**
  * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`.
  */

package/esm/core/Footer/FooterList.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../utils/index.js';
-import '@itwin/itwinui-css/css/footer.css';
 /**
  * Footer list. Recommended to use inside `Footer` with `Footer.Item` and `Footer.Separator`.
  */

package/esm/core/Footer/FooterSeparator.d.ts

@@ -1,4 +1,3 @@
-import '@itwin/itwinui-css/css/footer.css';
 /**
  * Footer separator. Recommended to use inside `Footer.List`.
  */