@broxus/react-uikit 0.21.0 → 0.23.0

package/dist/esm/components/Subnav/Subnav.d.ts

@@ -3,4 +3,4 @@ export interface SubnavProps extends React.HTMLAttributes<HTMLUListElement> {
     prefixCls?: string;
     type?: 'divider' | 'pill';
 }
-export declare function Subnav(props: SubnavProps): React.JSX.Element;
+export declare function Subnav({ className, type, ...props }: SubnavProps): React.ReactElement;

package/dist/esm/components/Subnav/Subnav.js

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
-export function Subnav(props) {
+export function Subnav({ className, type, ...props }) {
     const config = useConfig();
-    const { className, prefixCls = config.prefixCls, type, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'subnav'), [config, prefixCls]);
     return (React.createElement("ul", { className: classNames(rootCls, {
             [`${rootCls}-${type}`]: type !== undefined,

package/dist/esm/components/Switch/index.d.ts

@@ -2,7 +2,7 @@ import { type SwitchChangeEventHandler, type SwitchClickEventHandler } from '@rc
 import * as React from 'react';
 import { type Direction } from '../../types';
 export type SwitchSize = 'small';
-export type SwitchProps = {
+export interface SwitchProps {
     autoFocus?: boolean;
     checked?: boolean;
     checkedChildren?: React.ReactNode;
@@ -22,5 +22,5 @@ export type SwitchProps = {
     onChange?: SwitchChangeEventHandler;
     onClick?: SwitchClickEventHandler;
     onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
-};
+}
 export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/esm/components/Switch/index.js

@@ -3,10 +3,9 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
 import { Spinner } from '../../components/Spinner';
-export const Switch = React.forwardRef((props, ref) => {
+export const Switch = React.forwardRef(({ className, loading, loadingIcon, size, ...props }, ref) => {
     const config = useConfig();
-    const { className, direction = config.direction, loading, loadingIcon, prefixCls = config.prefixCls, ...restProps } = props;
-    const { size } = props;
+    const { direction = config.direction, prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'switch'), [config, prefixCls]);
     const mergedLoadingIcon = React.useMemo(() => (React.createElement("div", { className: `${rootCls}-handle` }, loading && (loadingIcon ?? React.createElement(Spinner, { className: `${rootCls}-loading-icon` })))), [loading, loadingIcon, rootCls]);
     return (React.createElement(RcSwitch, { ref: ref, className: classNames({

package/dist/esm/components/Tabs/index.d.ts

@@ -1,10 +1,10 @@
 import { type TabsProps as RcTabsProps } from '@rc-component/tabs';
 import * as React from 'react';
+import { type Direction } from '../../types';
 export type TabsPosition = 'left' | 'right' | 'top' | 'bottom';
-export interface Tab {
+export interface Tab extends React.PropsWithChildren {
     active?: boolean;
     animated?: boolean;
-    children?: React.ReactNode;
     className?: string;
     closable?: boolean;
     closeIcon?: React.ReactNode;
@@ -17,12 +17,14 @@ export interface Tab {
     label: React.ReactNode;
     prefixCls?: string;
     style?: React.CSSProperties;
+    tab?: React.ReactNode;
     tabKey?: string;
 }
 export type TabType = 'line' | 'card' | 'editable-card';
-export interface TabsProps extends Exclude<RcTabsProps, 'editable' | 'items' | 'tabPosition'> {
+export interface TabsProps extends Exclude<RcTabsProps, 'direction' | 'editable' | 'items' | 'tabPosition'> {
     addIcon?: React.ReactNode;
     centered?: boolean;
+    direction?: Direction;
     hideAdd?: boolean;
     items?: Tab[];
     size?: 'medium' | 'large';
@@ -30,4 +32,4 @@ export interface TabsProps extends Exclude<RcTabsProps, 'editable' | 'items' | '
     type?: TabType;
     onEdit?: (event: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void;
 }
-export declare function Tabs(props: TabsProps): React.JSX.Element;
+export declare function Tabs({ addIcon, animated, centered, className, direction, hideAdd, items, more, size, type, onEdit, ...props }: TabsProps): React.ReactElement;

package/dist/esm/components/Tabs/index.js

@@ -5,27 +5,28 @@ import { useConfig } from '../../components/ConfigProvider';
 import { Icon } from '../../components/Icon';
 import { useAnimateConfig } from '../../components/Tabs/hooks';
 import { getMotionName } from '../../utils';
-export function Tabs(props) {
+export function Tabs({ addIcon, animated, centered, className, direction, hideAdd, items, more, size, type, onEdit, ...props }) {
     const config = useConfig();
-    const { addIcon, animated, centered, className, direction, hideAdd, items, more, prefixCls = config.prefixCls, size, type, onEdit, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'tabs'), [config, prefixCls]);
     const editable = React.useMemo(() => (type === 'editable-card'
         ? {
-            addIcon: addIcon || React.createElement(Icon, { icon: "add" }),
-            removeIcon: React.createElement(Icon, { icon: "close" }),
+            addIcon: addIcon || config.tabs?.addIcon || React.createElement(Icon, { icon: "add" }),
+            removeIcon: config.tabs?.removeIcon || React.createElement(Icon, { icon: "close" }),
             showAdd: hideAdd !== true,
             onEdit: (editType, { event, key }) => {
                 onEdit?.(editType === 'add' ? event : key, editType);
             },
         }
-        : undefined), [addIcon, hideAdd, onEdit, type]);
-    return (React.createElement(RcTabs, { animated: useAnimateConfig(rootCls, animated), direction: direction, items: items, ...restProps, className: classNames({
+        : undefined), [addIcon, config.tabs?.addIcon, config.tabs?.removeIcon, hideAdd, onEdit, type]);
+    return (React.createElement(RcTabs, { animated: useAnimateConfig(rootCls, animated), classNames: {
+            popup: 'test',
+        }, direction: direction, items: items, ...restProps, className: classNames({
             [`${rootCls}-${size}`]: size,
-            [`${rootCls}-card`]: ['card', 'editable-card'].includes(type),
+            [`${rootCls}-card`]: type && ['card', 'editable-card'].includes(type),
             [`${rootCls}-centered`]: centered,
-            [`${rootCls}-editable-card`]: type === 'editable-card',
         }, className), editable: editable, more: {
-            icon: React.createElement(Icon, { icon: "more_horizontal" }),
+            icon: config.tabs?.moreIcon || React.createElement(Icon, { icon: "more_horizontal" }),
             transitionName: getMotionName(prefixCls || config.prefixCls, 'slide-bottom-small'),
             ...more,
         }, prefixCls: rootCls }));

package/dist/esm/components/Text/index.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
 import { type BreakpointsConfig } from '../../types';
 export type TextAlign = 'left' | 'right' | 'center' | 'justify';
-export type TextOwnProps = {
+export interface TextOwnProps {
     align?: TextAlign | BreakpointsConfig<TextAlign>;
     className?: string;
     color?: 'muted' | 'emphasis' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger';
@@ -18,8 +18,8 @@ export type TextOwnProps = {
     verticalAlign?: 'top' | 'middle' | 'bottom' | 'baseline';
     weight?: 'thin' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'lighter' | 'bolder';
     wrap?: 'truncate' | 'break' | 'nowrap';
-};
-export type TextProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<TextOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, TextOwnProps>;
+}
+export type TextProps<E extends React.ElementType = React.ElementType> = TextOwnProps & PolymorphicProps<E> & PolymorphicProps<E, TextOwnProps>;
 declare const defaultElement = "span";
-export declare function Text<E extends React.ElementType = typeof defaultElement>(props: TextProps<E>): React.JSX.Element;
+export declare function Text<E extends React.ElementType = typeof defaultElement>({ align, className, color, column, component, decoration, dropcap, italic, kind, loading, size, transform, verticalAlign, weight, wrap, ...props }: React.PropsWithChildren<TextProps<E>>): React.ReactElement;
 export {};

package/dist/esm/components/Text/index.js

@@ -4,9 +4,9 @@ import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 import { getBreakpointsConfigClasses } from '../../utils';
 const defaultElement = 'span';
-export function Text(props) {
+export function Text({ align, className, color, column, component = defaultElement, decoration, dropcap, italic, kind, loading, size, transform, verticalAlign, weight, wrap, ...props }) {
     const config = useConfig();
-    const { align, className, color, column, decoration, dropcap, italic, kind, loading, prefixCls = config.prefixCls, size, transform, verticalAlign, weight, wrap, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'text'), [config, prefixCls]);
     const alignClassName = React.useMemo(() => (typeof align === 'string'
         ? `${rootCls}-${align}`
@@ -44,5 +44,5 @@ export function Text(props) {
             [`${rootCls}-decoration-none`]: decoration === 'none',
             [`${rootCls}-italic`]: italic,
             [`${rootCls}-loading`]: loading,
-        }, className), component: defaultElement, ...restProps }));
+        }, className), component: component, ...restProps }));
 }

package/dist/esm/components/Tile/index.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
-export type TileOwnProps = {
+export interface TileOwnProps {
     kind?: 'default' | 'muted' | 'primary' | 'secondary' | 'tertiary';
     prefixCls?: string;
     preserveColor?: boolean;
     size?: 'xsmall' | 'small' | 'large' | 'xlarge';
-};
-export type TileProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<TileOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, TileOwnProps>;
+}
+export type TileProps<E extends React.ElementType = React.ElementType> = TileOwnProps & PolymorphicProps<E> & PolymorphicProps<E, TileOwnProps>;
 declare const defaultElement = "div";
-export declare function Tile<E extends React.ElementType = typeof defaultElement>(props: TileProps<E>): React.JSX.Element;
+export declare function Tile<E extends React.ElementType = typeof defaultElement>({ className, component, kind, preserveColor, size, ...props }: React.PropsWithChildren<TileProps<E>>): React.ReactElement;
 export {};

package/dist/esm/components/Tile/index.js

@@ -3,13 +3,13 @@ import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
-export function Tile(props) {
+export function Tile({ className, component = defaultElement, kind, preserveColor, size, ...props }) {
     const config = useConfig();
-    const { className, kind, prefixCls = config.prefixCls, preserveColor, size, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'tile'), [config, prefixCls]);
     return (React.createElement(Component, { className: classNames(rootCls, {
             [`${prefixCls || config.prefixCls}-preserve-color`]: preserveColor,
             [`${rootCls}-${kind}`]: kind && ['default', 'muted', 'primary', 'secondary', 'tertiary'].includes(kind),
             [`${rootCls}-${size}`]: size && ['xsmall', 'small', 'large', 'xlarge'].includes(size),
-        }, className), component: defaultElement, ...restProps }));
+        }, className), component: component, ...restProps }));
 }

package/dist/esm/components/Width/Width.d.ts

@@ -5,7 +5,7 @@ export interface WidthOwnProps extends Omit<WidthBreakpointsConfig, 'default'> {
     prefixCls?: string;
     size?: WidthSize | WidthBreakpointsConfig;
 }
-export type WidthProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<WidthOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, WidthOwnProps>;
+export type WidthProps<E extends React.ElementType = React.ElementType> = WidthOwnProps & PolymorphicProps<E> & PolymorphicProps<E, WidthOwnProps>;
 declare const defaultElement = "div";
-export declare function Width<E extends React.ElementType = typeof defaultElement>(props: WidthProps<E>): React.JSX.Element;
+export declare function Width<E extends React.ElementType = typeof defaultElement>({ className, component, l, m, s, size, xl, ...props }: React.PropsWithChildren<WidthProps<E>>): React.ReactElement;
 export {};

package/dist/esm/components/Width/Width.js

@@ -4,8 +4,8 @@ import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 import { getWidthClassname } from '../../components/Width/utils';
 const defaultElement = 'div';
-export function Width(props) {
+export function Width({ className, component = defaultElement, l, m, s, size, xl, ...props }) {
     const config = useConfig();
-    const { className, l, m, prefixCls = config.prefixCls, s, size, xl, ...restProps } = props;
-    return (React.createElement(Component, { className: classNames(getWidthClassname(size, prefixCls || config.prefixCls), getWidthClassname({ l, m, s, xl }, prefixCls || config.prefixCls), className), component: defaultElement, ...restProps }));
+    const { prefixCls = config.prefixCls, ...restProps } = props;
+    return (React.createElement(Component, { className: classNames(getWidthClassname(size, prefixCls || config.prefixCls), getWidthClassname({ l, m, s, xl }, prefixCls || config.prefixCls), className), component: component, ...restProps }));
 }

package/dist/esm/constants.d.ts

@@ -0,0 +1,12 @@
+export declare enum KeyCode {
+    ArrowDown = "ArrowDown",
+    ArrowLeft = "ArrowLeft",
+    ArrowRight = "ArrowRight",
+    ArrowUp = "ArrowUp",
+    End = "End",
+    Enter = "Enter",
+    Escape = "Escape",
+    Home = "Home",
+    Space = "Space",
+    Tab = "Tab"
+}

package/dist/esm/constants.js

@@ -0,0 +1,13 @@
+export var KeyCode;
+(function (KeyCode) {
+    KeyCode["ArrowDown"] = "ArrowDown";
+    KeyCode["ArrowLeft"] = "ArrowLeft";
+    KeyCode["ArrowRight"] = "ArrowRight";
+    KeyCode["ArrowUp"] = "ArrowUp";
+    KeyCode["End"] = "End";
+    KeyCode["Enter"] = "Enter";
+    KeyCode["Escape"] = "Escape";
+    KeyCode["Home"] = "Home";
+    KeyCode["Space"] = "Space";
+    KeyCode["Tab"] = "Tab";
+})(KeyCode || (KeyCode = {}));

package/dist/esm/index.d.ts

@@ -8,6 +8,7 @@ export * from './components/Form';
 export * from './components/Control';
 export * from './components/Button';
 export * from './components/Progress';
+export * from './components/Slider';
 export * from './components/Switch';
 export * from './components/Close';
 export * from './components/Spinner';

package/dist/esm/index.js

@@ -9,6 +9,7 @@ export * from './components/Form';
 export * from './components/Control';
 export * from './components/Button';
 export * from './components/Progress';
+export * from './components/Slider';
 export * from './components/Switch';
 export * from './components/Close';
 export * from './components/Spinner';

package/dist/esm/utils/motion.d.ts

@@ -1,4 +1,4 @@
-import { type CSSMotionProps } from 'rc-motion';
+import { type CSSMotionProps } from '@rc-component/motion';
 export declare function getMotionName(prefixCls: string, motion: string, transitionName?: string): string;
 export declare function getCollapseMotion(prefixCls: string): CSSMotionProps;
 export declare function mergeDropMaskMotion(prefixCls: string, motion?: CSSMotionProps): CSSMotionProps;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@broxus/react-uikit",
-    "version": "0.21.0",
+    "version": "0.23.0",
     "description": "React-based UIkit library",
     "license": "MIT",
     "keywords": [
@@ -25,6 +25,7 @@
             "require": "./dist/cjs/index.js",
             "import": "./dist/esm/index.js"
         },
+        "./assets/*": "./dist/assets/*",
         "./styles/*": "./styles/*",
         "./package.json": "./package.json"
     },
@@ -44,12 +45,15 @@
         "npm": ">=8"
     },
     "scripts": {
-        "build": "npx yarn build:js",
+        "build": "npx yarn build:js & npx yarn build:css",
         "build:js": "npx yarn build:cjs & npx yarn build:esm",
         "build:cjs": "tsc -p tsconfig.cjs.json && tsc-alias -p tsconfig.cjs.json",
         "build:esm": "tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json",
-        "watch:js": "npx chokidar \"src/**/*.{ts,tsx}\" -c \"npx yarn build:esm -- --incremental\"",
+        "build:css": "npx yarn build:css:base & npx yarn build:css:uikit",
+        "build:css:base": "npx sass styles:dist/assets --no-source-map",
+        "build:css:uikit": "npx sass styles/_import.scss dist/assets/uikit.min.css --no-source-map --style compressed",
         "dev": "npx yarn watch:js",
+        "watch:js": "npx chokidar \"src/**/*.{ts,tsx}\" -c \"npx yarn build:esm -- --incremental\"",
         "lint": "npx eslint src --ext .ts,.tsx",
         "lint:fix": "npx eslint src --ext .ts,.tsx --fix",
         "cleanup": "npx rimraf dist",
@@ -57,29 +61,29 @@
     },
     "dependencies": {
         "@broxus/js-utils": "^1.5.1",
-        "@rc-component/collapse": "^1.1.1",
-        "@rc-component/dialog": "^1.5.0",
-        "@rc-component/drawer": "1.1.0",
-        "@rc-component/dropdown": "^1.0.0",
-        "@rc-component/input": "^1.1.1",
-        "@rc-component/input-number": "^1.3.0",
-        "@rc-component/motion": "^1.1.4",
-        "@rc-component/picker": "^1.6.0",
-        "@rc-component/resize-observer": "^1.0.0",
-        "@rc-component/segmented": "^1.2.2",
-        "@rc-component/select": "^1.1.5",
-        "@rc-component/switch": "^1.0.2",
-        "@rc-component/tabs": "^1.6.0",
-        "@rc-component/textarea": "^1.1.1",
-        "@rc-component/trigger": "^3.6.15",
-        "@rc-component/util": "^1.3.0",
+        "@rc-component/collapse": "~1.1.2",
+        "@rc-component/dialog": "~1.5.1",
+        "@rc-component/drawer": "~1.1.0",
+        "@rc-component/dropdown": "~1.0.2",
+        "@rc-component/input": "~1.1.2",
+        "@rc-component/input-number": "~1.6.2",
+        "@rc-component/motion": "~1.1.6",
+        "@rc-component/picker": "~1.6.0",
+        "@rc-component/resize-observer": "~1.0.1",
+        "@rc-component/segmented": "~1.2.3",
+        "@rc-component/select": "~1.3.4",
+        "@rc-component/slider": "~1.0.1",
+        "@rc-component/switch": "~1.0.3",
+        "@rc-component/tabs": "~1.7.0",
+        "@rc-component/textarea": "~1.1.2",
+        "@rc-component/trigger": "~3.7.1",
+        "@rc-component/util": "~1.4.0",
         "classnames": "^2.5.1",
-        "rc-motion": "npm:@rc-component/motion@^1.1.4",
-        "rc-overflow": "^1.4.1",
-        "rc-resize-observer": "npm:@rc-component/resize-observer@^1.0.0",
-        "rc-slider": "^11.1.9",
-        "rc-util": "npm:@rc-component/util@^1.3.0",
-        "shallowequal": "^1.1.0",
+        "rc-dialog": "npm:@rc-component/dialog@~1.5.1",
+        "rc-motion": "npm:@rc-component/motion@~1.1.6",
+        "rc-overflow": "~1.5.0",
+        "rc-resize-observer": "npm:@rc-component/resize-observer@~1.0.1",
+        "rc-util": "npm:@rc-component/util@~1.4.0",
         "uikit": "^3.24.2"
     },
     "peerDependencies": {
@@ -87,8 +91,5 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
     },
-    "resolutions": {
-        "@rc-component/input": "^1.1.1"
-    },
-    "gitHead": "fa7a48a57ed1ad72d4d2dea298cf15a00cf56753"
+    "gitHead": "ba4aebd93f9870285da09017e289a6b0a468f2ce"
 }

package/styles/_import.components.scss

@@ -8,8 +8,7 @@
 @forward 'heading';
 @forward 'divider';
 @forward 'list';
-@forward 'description-list';
-
+@forward 'description-list'; //
 // @forward 'table';
 @forward 'icon';
 @forward 'form'; // After: Icon
@@ -21,6 +20,7 @@
 @forward 'datepicker';
 @forward 'button';
 @forward 'progress';
+@forward 'slider';
 @forward 'switch';
 
 // Layout
@@ -39,7 +39,6 @@
 @forward 'placeholder';
 @forward 'badge';
 @forward 'label';
-
 @forward 'overlay'; // After: Icon
 @forward 'article'; // After: Subnav
 // @forward 'comment';
@@ -50,8 +49,7 @@
 @forward 'navbar'; // After: Card, Grid, Nav, Icon, Search
 @forward 'subnav';
 @forward 'segmented';
-@forward 'breadcrumb';
-
+@forward 'breadcrumb'; //
 // @forward 'pagination';
 @forward 'tabs';
 @forward 'dotnav';

package/styles/_import.scss

@@ -8,8 +8,7 @@
 @forward 'heading';
 @forward 'divider';
 @forward 'list';
-@forward 'description-list';
-
+@forward 'description-list'; //
 // @forward 'table';
 @forward 'icon';
 @forward 'form'; // After: Icon
@@ -21,11 +20,13 @@
 @forward 'datepicker';
 @forward 'button';
 @forward 'progress';
+@forward 'slider';
 @forward 'switch';
 
 // Layout
 @forward 'section';
 @forward 'container';
+@forward 'grid';
 @forward 'tile';
 @forward 'card';
 
@@ -50,16 +51,12 @@
 @forward 'modal'; // After: Close
 @forward 'drawer';
 @forward 'datepicker';
-@forward 'sticky';
-
+@forward 'sticky'; //
 // @forward 'leader';
-@forward 'tooltip';
-
+@forward 'tooltip'; //
 // @forward 'sortable';
 // @forward 'countdown';
 
-@forward 'grid';
-
 // Navs
 @forward 'nav';
 @forward 'navbar'; // After: Card, Grid, Nav, Icon, Search

package/styles/accordion.scss

@@ -28,6 +28,9 @@
  ========================================================================== */
 
 .uk-accordion {
+    display: flex;
+    flex-direction: column;
+    gap: var(--accordion-gutter);
     list-style: none;
     padding: 0;
     @if meta.mixin-exists('hook-accordion') {
@@ -39,8 +42,7 @@
 /* Item
  ========================================================================== */
 
-.uk-accordion > :nth-child(n+2) {
-    margin-top: var(--accordion-item-margin-top);
+.uk-accordion-item {
     @if meta.mixin-exists('hook-accordion-item') {
         @include hook-accordion-item;
     }
@@ -55,36 +57,61 @@
     color: var(--accordion-header-color);
     cursor: pointer;
     display: flex;
-    font-size: var(--accordion-header-font-size);
-    line-height: var(--accordion-header-line-height);
     @if meta.mixin-exists('hook-accordion-header') {
         @include hook-accordion-header;
     }
+}
+
+/*
+ * Header collapsible area
+ */
+.uk-accordion-collapsible-header {
+    cursor: default;
+    @if meta.mixin-exists('hook-accordion-collapsible-header') {
+        @include hook-accordion-collapsible-header;
+    }
+}
+
+.uk-accordion-collapsible-header .uk-accordion-title {
+    cursor: pointer;
+}
 
+.uk-accordion-collapsible-header .uk-accordion-expand-icon {
+    pointer-events: none;
 }
 
-.uk-accordion-header-collapsible-only {
+/*
+ * Icon collapsible area
+ */
+.uk-accordion-collapsible-icon {
     cursor: default;
-    @if meta.mixin-exists('hook-accordion-header-collapsible-only') {
-        @include hook-accordion-header-collapsible-only;
+    @if meta.mixin-exists('hook-accordion-collapsible-icon') {
+        @include hook-accordion-collapsible-icon;
     }
+}
+
+.uk-accordion-collapsible-icon .uk-accordion-expand-icon {
+    cursor: pointer;
+}
 
-    .uk-accordion-header-text {
-        cursor: pointer;
+/* Title */
+.uk-accordion-title {
+    color: var(--accordion-title-color);
+    font-size: var(--accordion-title-font-size);
+    line-height: var(--accordion-title-line-height);
+    @if meta.mixin-exists('hook-accordion-title') {
+        @include hook-accordion-title;
     }
 }
 
 /* Hover + Focus */
-.uk-accordion-header:hover,
-.uk-accordion-header:focus {
+:not(.uk-accordion-collapsible-disabled, .uk-accordion-collapsible-icon):hover > .uk-accordion-title,
+:not(.uk-accordion-collapsible-disabled, .uk-accordion-collapsible-icon) > .uk-accordion-title:hover {
+    color: var(--accordion-title-hover-color);
     outline: none;
     text-decoration: none;
-    @if meta.mixin-exists('hook-accordion-header-hover') {
-        @include hook-accordion-header-hover;
-    }
-
-    &:not(.uk-accordion-item-disabled) {
-        color: var(--accordion-header-hover-color);
+    @if meta.mixin-exists('hook-accordion-title-hover') {
+        @include hook-accordion-title-hover;
     }
 }
 
@@ -94,20 +121,17 @@
     margin-right: var(--accordion-icon-margin-right);
 }
 
+
 /* Disabled item
  ========================================================================== */
 
-.uk-accordion-item-disabled {
+.uk-accordion-collapsible-disabled {
     color: var(--accordion-item-disabled-color);
     cursor: not-allowed;
     opacity: 0.7;
     @if meta.mixin-exists('hook-accordion-item-disable') {
         @include hook-accordion-item-disable;
     }
-
-    .uk-accordion-header {
-        cursor: not-allowed;
-    }
 }
 
 
@@ -115,6 +139,7 @@
  ========================================================================== */
 
 .uk-accordion-panel {
+    box-sizing: border-box;
     display: flow-root;
     overflow: hidden;
     @if meta.mixin-exists('hook-accordion-panel') {
@@ -129,7 +154,8 @@
 .uk-accordion-panel > :last-child { margin-bottom: 0; }
 
 .uk-accordion-body {
-    margin-top: var(--accordion-panel-margin-top);
+    box-sizing: border-box;
+    margin-top: var(--accordion-gutter);
     @if meta.mixin-exists('hook-accordion-body') {
         @include hook-accordion-body;
     }
@@ -179,20 +205,20 @@
 // ========================================================================
 
 :root {
-    --accordion-item-margin-top: var(--global-margin);
+    --accordion-gutter: var(--global-margin);
     --accordion-item-disabled-color: var(--global-muted-color);
-    --accordion-header-font-size: var(--global-medium-font-size);
-    --accordion-header-line-height: #{$accordion-title-line-height};
     --accordion-header-color: var(--global-emphasis-color);
-    --accordion-header-hover-color: var(--global-color);
+    --accordion-title-font-size: var(--global-medium-font-size);
+    --accordion-title-line-height: #{$accordion-title-line-height};
+    --accordion-title-color: var(--global-emphasis-color);
+    --accordion-title-hover-color: var(--global-color);
     --accordion-extra-margin-horizontal: var(--global-small-margin);
-    --accordion-panel-margin-top: var(--global-margin);
     --accordion-icon-margin-right: var(--global-small-margin);
     --accordion-icon-color: var(--global-color);
     --accordion-icon-size: #{$accordion-icon-size};
 
     // Inverse
-    --inverse-accordion-header-color: var(--inverse-global-emphasis-color);
-    --inverse-accordion-header-hover-color: var(--inverse-global-color);
+    --inverse-accordion-title-color: var(--inverse-global-emphasis-color);
+    --inverse-accordion-title-hover-color: var(--inverse-global-color);
     --inverse-accordion-item-disabled-color: var(--inverse-global-emphasis-color);
 }

package/styles/alert.scss

@@ -150,11 +150,12 @@
 .uk-alert-motion-leave {
     opacity: 1;
     overflow: hidden;
-    transition: max-height var(--transition-duration) var(--ease-in-out-circ),
-    opacity var(--transition-duration) var(--ease-in-out-circ),
-    padding-top var(--transition-duration) var(--ease-in-out-circ),
-    padding-bottom var(--transition-duration) var(--ease-in-out-circ),
-    margin-bottom var(--transition-duration) var(--ease-in-out-circ);
+    transition:
+        max-height var(--transition-duration) var(--ease-in-out-circ),
+        opacity var(--transition-duration) var(--ease-in-out-circ),
+        padding-top var(--transition-duration) var(--ease-in-out-circ),
+        padding-bottom var(--transition-duration) var(--ease-in-out-circ),
+        margin-bottom var(--transition-duration) var(--ease-in-out-circ);
 }
 
 .uk-alert-motion-leave-active {