@orioncactuscorp/ui 1.14.0 → 1.15.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +116 -0
- package/README.md +65 -36
- package/dist/components/BackgroundIconButton/BackgroundIconButton.css +1 -1
- package/dist/components/Button/Button.css +1 -1
- package/dist/components/CheckMark/CheckMark.js +19 -17
- package/dist/components/Checkbox/Checkbox.css +1 -1
- package/dist/components/Checkbox/Checkbox.js +38 -36
- package/dist/components/FloatingWindow/FloatingWindow.js +138 -137
- package/dist/components/Interaction/Interaction.css +1 -1
- package/dist/components/Menu/Menu.css +1 -1
- package/dist/components/Menu/Menu.js +95 -87
- package/dist/components/Modal/Modal.css +1 -1
- package/dist/components/Modal/Modal.js +504 -488
- package/dist/components/Modal/Modal.module.scss.js +69 -62
- package/dist/components/Modal/keyboardSession.js +104 -0
- package/dist/components/Modal/snapPoints.js +95 -82
- package/dist/components/Modal/useModalDrag.js +587 -637
- package/dist/components/Modal/useModalKeyboardAvoidance.js +159 -0
- package/dist/components/Modal/useModalViewportGeometry.js +36 -0
- package/dist/components/PositionSnap/PositionSnap.css +1 -0
- package/dist/components/PositionSnap/PositionSnap.js +330 -0
- package/dist/components/PositionSnap/PositionSnap.module.scss.js +9 -0
- package/dist/components/PositionSnap/contexts.js +12 -0
- package/dist/components/PositionSnap/geometry.js +75 -0
- package/dist/components/PositionSnap/gesture.js +7 -0
- package/dist/components/PositionSnap/policy.js +60 -0
- package/dist/components/PositionSnap.d.ts +6 -0
- package/dist/components/PositionSnap.js +7 -0
- package/dist/components/ProgressIndicator/ProgressIndicator.css +1 -0
- package/dist/components/ProgressIndicator/ProgressIndicator.js +45 -0
- package/dist/components/ProgressIndicator/ProgressIndicator.module.scss.js +13 -0
- package/dist/components/ProgressIndicator.d.ts +6 -0
- package/dist/components/ProgressIndicator.js +4 -0
- package/dist/components/Radio/Radio.css +1 -1
- package/dist/components/Radio/Radio.js +26 -24
- package/dist/components/Switch/Switch.css +1 -1
- package/dist/components/Switch/Switch.js +18 -16
- package/dist/components/Tabs/Tabs.css +1 -1
- package/dist/components/Tooltip/Tooltip.css +1 -1
- package/dist/components/Tooltip/Tooltip.js +59 -56
- package/dist/components/Tooltip/Tooltip.module.scss.js +6 -4
- package/dist/components/internal/ModalPresentation.js +126 -124
- package/dist/components/internal/OverlayPortalContext.js +20 -0
- package/dist/index.js +133 -126
- package/dist/styles.css +12 -10
- package/dist/ui/src/components/CheckMark/CheckMark.d.ts +1 -1
- package/dist/ui/src/components/CheckMark/CheckMark.d.ts.map +1 -1
- package/dist/ui/src/components/CheckMark/types.d.ts +2 -1
- package/dist/ui/src/components/CheckMark/types.d.ts.map +1 -1
- package/dist/ui/src/components/Checkbox/Checkbox.d.ts +1 -1
- package/dist/ui/src/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/ui/src/components/Checkbox/types.d.ts +2 -1
- package/dist/ui/src/components/Checkbox/types.d.ts.map +1 -1
- package/dist/ui/src/components/FloatingWindow/FloatingWindow.d.ts.map +1 -1
- package/dist/ui/src/components/FloatingWindow/types.d.ts +1 -1
- package/dist/ui/src/components/FloatingWindow/types.d.ts.map +1 -1
- package/dist/ui/src/components/Interaction/index.d.ts +1 -1
- package/dist/ui/src/components/Interaction/index.d.ts.map +1 -1
- package/dist/ui/src/components/Interaction/types.d.ts +9 -1
- package/dist/ui/src/components/Interaction/types.d.ts.map +1 -1
- package/dist/ui/src/components/Menu/Menu.d.ts +2 -2
- package/dist/ui/src/components/Menu/Menu.d.ts.map +1 -1
- package/dist/ui/src/components/Menu/types.d.ts +9 -2
- package/dist/ui/src/components/Menu/types.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/Modal.d.ts +1 -1
- package/dist/ui/src/components/Modal/Modal.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/keyboardSession.d.ts +46 -0
- package/dist/ui/src/components/Modal/keyboardSession.d.ts.map +1 -0
- package/dist/ui/src/components/Modal/snapPoints.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/types.d.ts +8 -1
- package/dist/ui/src/components/Modal/types.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/useModalDrag.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/useModalKeyboardAvoidance.d.ts +17 -0
- package/dist/ui/src/components/Modal/useModalKeyboardAvoidance.d.ts.map +1 -0
- package/dist/ui/src/components/Modal/useModalViewportGeometry.d.ts +9 -0
- package/dist/ui/src/components/Modal/useModalViewportGeometry.d.ts.map +1 -0
- package/dist/ui/src/components/PositionSnap/PositionSnap.d.ts +11 -0
- package/dist/ui/src/components/PositionSnap/PositionSnap.d.ts.map +1 -0
- package/dist/ui/src/components/PositionSnap/contexts.d.ts +17 -0
- package/dist/ui/src/components/PositionSnap/contexts.d.ts.map +1 -0
- package/dist/ui/src/components/PositionSnap/geometry.d.ts +31 -0
- package/dist/ui/src/components/PositionSnap/geometry.d.ts.map +1 -0
- package/dist/ui/src/components/PositionSnap/gesture.d.ts +2 -0
- package/dist/ui/src/components/PositionSnap/gesture.d.ts.map +1 -0
- package/dist/ui/src/components/PositionSnap/index.d.ts +3 -0
- package/dist/ui/src/components/PositionSnap/index.d.ts.map +1 -0
- package/dist/ui/src/components/PositionSnap/policy.d.ts +24 -0
- package/dist/ui/src/components/PositionSnap/policy.d.ts.map +1 -0
- package/dist/ui/src/components/PositionSnap/types.d.ts +31 -0
- package/dist/ui/src/components/PositionSnap/types.d.ts.map +1 -0
- package/dist/ui/src/components/ProgressIndicator/ProgressIndicator.d.ts +4 -0
- package/dist/ui/src/components/ProgressIndicator/ProgressIndicator.d.ts.map +1 -0
- package/dist/ui/src/components/ProgressIndicator/index.d.ts +3 -0
- package/dist/ui/src/components/ProgressIndicator/index.d.ts.map +1 -0
- package/dist/ui/src/components/ProgressIndicator/types.d.ts +17 -0
- package/dist/ui/src/components/ProgressIndicator/types.d.ts.map +1 -0
- package/dist/ui/src/components/Radio/Radio.d.ts +1 -1
- package/dist/ui/src/components/Radio/Radio.d.ts.map +1 -1
- package/dist/ui/src/components/Radio/types.d.ts +2 -1
- package/dist/ui/src/components/Radio/types.d.ts.map +1 -1
- package/dist/ui/src/components/Switch/Switch.d.ts +1 -1
- package/dist/ui/src/components/Switch/Switch.d.ts.map +1 -1
- package/dist/ui/src/components/Switch/types.d.ts +2 -1
- package/dist/ui/src/components/Switch/types.d.ts.map +1 -1
- package/dist/ui/src/components/Tooltip/Tooltip.d.ts +1 -1
- package/dist/ui/src/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/ui/src/components/Tooltip/types.d.ts +6 -0
- package/dist/ui/src/components/Tooltip/types.d.ts.map +1 -1
- package/dist/ui/src/components/internal/ModalPresentation.d.ts +2 -1
- package/dist/ui/src/components/internal/ModalPresentation.d.ts.map +1 -1
- package/dist/ui/src/components/internal/OverlayPortalContext.d.ts +10 -0
- package/dist/ui/src/components/internal/OverlayPortalContext.d.ts.map +1 -0
- package/dist/ui/src/index.d.ts +5 -1
- package/dist/ui/src/index.d.ts.map +1 -1
- package/docs/api-conventions.md +4 -0
- package/docs/overlay-stacking.md +48 -0
- package/docs/responsive-foundation-profile.md +1 -1
- package/docs/scss-helpers.md +110 -5
- package/docs/selector-contract.md +77 -2
- package/docs/tokens.md +2 -0
- package/package.json +1 -1
- package/src/scss/foundations/atomic.scss +9 -8
- package/src/scss/index.scss +2 -0
- package/src/scss/mixins/_fluid.scss +57 -0
- package/src/scss/mixins/_fluid.test.ts +87 -0
- package/src/scss/mixins/_gradient.scss +99 -0
- package/src/scss/mixins/_gradient.test.ts +111 -0
- package/src/scss/mixins/_responsive.scss +2 -1
- package/src/scss/mixins/_typo.scss +2 -1
- package/src/scss/mixins/_units.scss +14 -0
- package/src/scss/mixins/_utils.scss +3 -22
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type ProgressIndicatorSize = 'small' | 'medium' | 'large';
|
|
3
|
+
type ProgressIndicatorAccessibleName = {
|
|
4
|
+
'aria-label': string;
|
|
5
|
+
'aria-labelledby'?: string;
|
|
6
|
+
} | {
|
|
7
|
+
'aria-label'?: never;
|
|
8
|
+
'aria-labelledby': string;
|
|
9
|
+
};
|
|
10
|
+
type ProgressIndicatorBaseProps = Omit<React.ComponentPropsWithRef<'div'>, 'aria-hidden' | 'aria-valuemax' | 'aria-valuemin' | 'aria-valuenow' | 'children' | 'role'> & {
|
|
11
|
+
value: number;
|
|
12
|
+
max?: number;
|
|
13
|
+
size?: ProgressIndicatorSize;
|
|
14
|
+
};
|
|
15
|
+
export type ProgressIndicatorProps = ProgressIndicatorBaseProps & ProgressIndicatorAccessibleName;
|
|
16
|
+
export {};
|
|
17
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressIndicator/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEjE,KAAK,+BAA+B,GAChC;IACE,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,GACD;IACE,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEN,KAAK,0BAA0B,GAAG,IAAI,CACpC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAChC,aAAa,GACb,eAAe,GACf,eAAe,GACf,eAAe,GACf,UAAU,GACV,MAAM,CACT,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,qBAAqB,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,0BAA0B,GAC7D,+BAA+B,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { RadioProps } from './types';
|
|
2
|
-
declare function Radio({ children, className, size, fill, trailingCompound, onChange, onCheckedChange, ref, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare function Radio({ children, className, size, fill, trailingCompound, onChange, onCheckedChange, ref, 'data-oc-interaction-variant': interactionVariant, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default Radio;
|
|
4
4
|
//# sourceMappingURL=Radio.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,iBAAS,KAAK,CAAC,EACb,QAAQ,EACR,SAAc,EACd,IAAe,EACf,IAAY,EACZ,gBAAgB,EAChB,QAAQ,EACR,eAAe,EACf,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,iBAAS,KAAK,CAAC,EACb,QAAQ,EACR,SAAc,EACd,IAAe,EACf,IAAY,EACZ,gBAAgB,EAChB,QAAQ,EACR,eAAe,EACf,GAAG,EACH,6BAA6B,EAAE,kBAAkB,EACjD,GAAG,KAAK,EACT,EAAE,UAAU,2CA4DZ;AAED,eAAe,KAAK,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
import { InteractionHostProps } from '../Interaction';
|
|
2
3
|
export type RadioSize = 'medium' | 'small';
|
|
3
|
-
export interface RadioProps extends Omit<React.ComponentPropsWithRef<'input'>, 'type' | 'size'> {
|
|
4
|
+
export interface RadioProps extends InteractionHostProps, Omit<React.ComponentPropsWithRef<'input'>, 'type' | 'size' | keyof InteractionHostProps> {
|
|
4
5
|
children?: React.ReactNode;
|
|
5
6
|
size?: RadioSize;
|
|
6
7
|
fill?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Radio/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Radio/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAE3D,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3C,MAAM,WAAW,UACf,SACE,oBAAoB,EACpB,IAAI,CACF,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC,EACpC,MAAM,GAAG,MAAM,GAAG,MAAM,oBAAoB,CAC7C;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { SwitchProps } from './types';
|
|
2
|
-
declare function Switch({ children, className, size, onChange, onCheckedChange, ref, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare function Switch({ children, className, size, onChange, onCheckedChange, ref, 'data-oc-interaction-variant': interactionVariant, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default Switch;
|
|
4
4
|
//# sourceMappingURL=Switch.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,iBAAS,MAAM,CAAC,EACd,QAAQ,EACR,SAAc,EACd,IAAe,EACf,QAAQ,EACR,eAAe,EACf,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,iBAAS,MAAM,CAAC,EACd,QAAQ,EACR,SAAc,EACd,IAAe,EACf,QAAQ,EACR,eAAe,EACf,GAAG,EACH,6BAA6B,EAAE,kBAAkB,EACjD,GAAG,KAAK,EACT,EAAE,WAAW,2CAiCb;AAED,eAAe,MAAM,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
import { InteractionHostProps } from '../Interaction';
|
|
2
3
|
export type SwitchSize = 'medium' | 'small';
|
|
3
|
-
export interface SwitchProps extends Omit<React.ComponentPropsWithRef<'input'>, 'type' | 'size'> {
|
|
4
|
+
export interface SwitchProps extends InteractionHostProps, Omit<React.ComponentPropsWithRef<'input'>, 'type' | 'size' | keyof InteractionHostProps> {
|
|
4
5
|
children?: React.ReactNode;
|
|
5
6
|
size?: SwitchSize;
|
|
6
7
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Switch/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Switch/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAE3D,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE5C,MAAM,WAAW,WACf,SACE,oBAAoB,EACpB,IAAI,CACF,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC,EACpC,MAAM,GAAG,MAAM,GAAG,MAAM,oBAAoB,CAC7C;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C"}
|
|
@@ -3,6 +3,6 @@ import { TooltipContentProps, TooltipRootProps, TooltipTriggerProps } from './ty
|
|
|
3
3
|
export declare const TooltipProvider: React.FC<import('@base-ui-components/react/tooltip').TooltipProviderProps>;
|
|
4
4
|
export declare function TooltipRoot({ children, open: openProp, defaultOpen, onOpenChange, ...props }: TooltipRootProps): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
export declare function TooltipTrigger({ className, children, render, tapToOpen, }: TooltipTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
-
export declare function TooltipContent({ className, sideOffset, alignment, side, children, }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare function TooltipContent({ className, sideOffset, alignment, side, children, container, }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export default TooltipRoot;
|
|
8
8
|
//# sourceMappingURL=Tooltip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EACV,mBAAmB,EACnB,gBAAgB,EAChB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAcjB,eAAO,MAAM,eAAe,4EAAuB,CAAC;AAEpD,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,IAAI,EAAE,QAAQ,EACd,WAAmB,EACnB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAwBlB;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAc,EACd,QAAQ,EACR,MAAM,EACN,SAAiB,GAClB,EAAE,mBAAmB,2CAqErB;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAc,EACd,UAAc,EACd,SAAoB,EACpB,IAAI,EACJ,QAAQ,EACR,SAAS,GACV,EAAE,mBAAmB,2CA4BrB;AAED,eAAe,WAAW,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
import { Tooltip as BaseTooltip } from '@base-ui-components/react/tooltip';
|
|
2
3
|
export interface TooltipRootProps {
|
|
3
4
|
children?: React.ReactNode;
|
|
4
5
|
open?: boolean;
|
|
@@ -17,5 +18,10 @@ export interface TooltipContentProps {
|
|
|
17
18
|
side?: 'top' | 'right' | 'bottom' | 'left';
|
|
18
19
|
alignment?: 'start' | 'center' | 'end';
|
|
19
20
|
sideOffset?: number;
|
|
21
|
+
/**
|
|
22
|
+
* Portal container override. By default, content uses the nearest oc-ui
|
|
23
|
+
* overlay boundary and falls back to the document body.
|
|
24
|
+
*/
|
|
25
|
+
container?: React.ComponentPropsWithoutRef<typeof BaseTooltip.Portal>['container'];
|
|
20
26
|
}
|
|
21
27
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAEhF,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,YAAY,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAChE;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,wBAAwB,CACxC,OAAO,WAAW,CAAC,MAAM,CAC1B,CAAC,WAAW,CAAC,CAAC;CAChB"}
|
|
@@ -29,6 +29,7 @@ interface ModalSurfaceFrameProps {
|
|
|
29
29
|
}
|
|
30
30
|
export declare function ModalSurfaceFrame({ children, className, contentTransition, placement, ref, resize, scrollable, size, style, variant, }: ModalSurfaceFrameProps): import("react/jsx-runtime").JSX.Element;
|
|
31
31
|
interface ModalHeaderFrameProps extends Omit<React.ComponentPropsWithRef<'header'>, 'children' | 'title'> {
|
|
32
|
+
bottomSlot?: React.ReactNode;
|
|
32
33
|
children?: React.ReactNode;
|
|
33
34
|
closeContent?: React.ReactNode;
|
|
34
35
|
dragEnabled?: boolean;
|
|
@@ -38,7 +39,7 @@ interface ModalHeaderFrameProps extends Omit<React.ComponentPropsWithRef<'header
|
|
|
38
39
|
titleContent?: React.ReactNode;
|
|
39
40
|
trailingContent?: React.ReactNode;
|
|
40
41
|
}
|
|
41
|
-
export declare function ModalHeaderFrame({ children, className, closeContent, dragEnabled, handleContent, leadingContent, sticky, titleContent, trailingContent, ...props }: ModalHeaderFrameProps): import("react/jsx-runtime").JSX.Element;
|
|
42
|
+
export declare function ModalHeaderFrame({ bottomSlot, children, className, closeContent, dragEnabled, handleContent, leadingContent, sticky, titleContent, trailingContent, ...props }: ModalHeaderFrameProps): import("react/jsx-runtime").JSX.Element;
|
|
42
43
|
interface ModalNavigationSectionFrameProps extends ModalNavigationSectionProps {
|
|
43
44
|
canRenderHandle: boolean;
|
|
44
45
|
handleProps?: React.ComponentPropsWithoutRef<'div'>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalPresentation.d.ts","sourceRoot":"","sources":["../../../../../src/components/internal/ModalPresentation.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAS1E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,KAAK,EACV,eAAe,EAEf,2BAA2B,EAC3B,cAAc,EACd,WAAW,EACX,SAAS,EACT,YAAY,EACb,MAAM,gBAAgB,CAAC;AAIxB,wBAAgB,mBAAmB,CACjC,GAAG,UAAU,EAAE,KAAK,CAAC,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC,UAGjD;AAED,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,WAOjE;AAED,wBAAgB,4BAA4B,CAC1C,UAAU,EAAE,OAAO,GAAG,MAAM,EAC5B,WAAW,EAAE,gBAAgB,WAQ9B;AAED,UAAU,8BAA8B;IACtC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IACjC,WAAW,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,cAAc,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;CACnD;AAED,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,OAAO,EACP,WAAW,EACX,cAAc,GACf,EAAE,8BAA8B;uBAQtB,WAAW,GAAG,IAAI;8BANlB,WAAW,GAAG,IAAI;EA4B5B;AAED,UAAU,sBAAsB;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpC,SAAS,EAAE,cAAc,CAAC;IAC1B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,iBAAiB,EACjB,SAAS,EACT,GAAG,EACH,MAAM,EACN,UAAU,EACV,IAAI,EACJ,KAAK,EACL,OAAO,GACR,EAAE,sBAAsB,2CAiBxB;AAED,UAAU,qBAAsB,SAAQ,IAAI,CAC1C,KAAK,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EACrC,UAAU,GAAG,OAAO,CACrB;IACC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAc,EACd,YAAY,EACZ,WAAW,EACX,aAAa,EACb,cAAc,EACd,MAAM,EACN,YAAY,EACZ,eAAe,EACf,GAAG,KAAK,EACT,EAAE,qBAAqB,
|
|
1
|
+
{"version":3,"file":"ModalPresentation.d.ts","sourceRoot":"","sources":["../../../../../src/components/internal/ModalPresentation.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type OverlayPortalContainer = HTMLElement | ShadowRoot | React.RefObject<HTMLElement | ShadowRoot | null> | null;
|
|
3
|
+
interface OverlayPortalProviderProps {
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
container: OverlayPortalContainer;
|
|
6
|
+
}
|
|
7
|
+
export declare function OverlayPortalProvider({ children, container, }: OverlayPortalProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare function useOverlayPortalContainer(explicitContainer: OverlayPortalContainer | undefined): OverlayPortalContainer | undefined;
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=OverlayPortalContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"OverlayPortalContext.d.ts","sourceRoot":"","sources":["../../../../../src/components/internal/OverlayPortalContext.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,sBAAsB,GAC9B,WAAW,GACX,UAAU,GACV,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,GAAG,IAAI,CAAC,GAChD,IAAI,CAAC;AAMT,UAAU,0BAA0B;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,EAAE,sBAAsB,CAAC;CACnC;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,SAAS,GACV,EAAE,0BAA0B,2CAM5B;AAED,wBAAgB,yBAAyB,CACvC,iBAAiB,EAAE,sBAAsB,GAAG,SAAS,sCAKtD"}
|
package/dist/ui/src/index.d.ts
CHANGED
|
@@ -2,6 +2,8 @@ export { default as SectionHeader } from './components/SectionHeader';
|
|
|
2
2
|
export type { SectionHeaderProps, SectionHeaderSize, SectionHeaderViewport, } from './components/SectionHeader';
|
|
3
3
|
export { default as Button } from './components/Button';
|
|
4
4
|
export type { ButtonProps } from './components/Button';
|
|
5
|
+
export { default as PositionSnap, PositionSnapHandle, PositionSnapPositioner, PositionSnapRoot, } from './components/PositionSnap';
|
|
6
|
+
export type { PositionSnapBoundary, PositionSnapDrag, PositionSnapHandleProps, PositionSnapPosition, PositionSnapPositionerProps, PositionSnapRootProps, } from './components/PositionSnap';
|
|
5
7
|
export { default as ActionArea, ActionAreaButton, ActionAreaLayout, ActionAreaLayoutActionArea, ActionAreaLayoutBody, ActionAreaLayoutFooter, ActionAreaLayoutRoot, } from './components/ActionArea';
|
|
6
8
|
export type { ActionAreaButtonPriority, ActionAreaButtonProps, ActionAreaLayoutActionAreaBackground, ActionAreaLayoutActionAreaProps, ActionAreaLayoutBodyProps, ActionAreaLayoutFooterProps, ActionAreaLayoutProps, ActionAreaLayoutScrollState, ActionAreaProps, ActionAreaVariant, } from './components/ActionArea';
|
|
7
9
|
export { default as Badge } from './components/Badge';
|
|
@@ -12,6 +14,8 @@ export { default as Divider } from './components/Divider';
|
|
|
12
14
|
export type { DividerProps } from './components/Divider';
|
|
13
15
|
export { default as Loading } from './components/Loading';
|
|
14
16
|
export type { LoadingProps } from './components/Loading';
|
|
17
|
+
export { default as ProgressIndicator } from './components/ProgressIndicator';
|
|
18
|
+
export type { ProgressIndicatorProps, ProgressIndicatorSize, } from './components/ProgressIndicator';
|
|
15
19
|
export { default as Skeleton } from './components/Skeleton';
|
|
16
20
|
export type { SkeletonAlign, SkeletonDimension, SkeletonOpacity, SkeletonProps, SkeletonRadius, SkeletonVariant, } from './components/Skeleton';
|
|
17
21
|
export { default as Cell, CellItem } from './components/Cell';
|
|
@@ -25,7 +29,7 @@ export type { BackgroundIconButtonProps } from './components/BackgroundIconButto
|
|
|
25
29
|
export { default as SvgIcon } from './components/SvgIcon';
|
|
26
30
|
export type { SvgIconProps } from './components/SvgIcon';
|
|
27
31
|
export { default as Interaction } from './components/Interaction';
|
|
28
|
-
export type { InteractionProps } from './components/Interaction';
|
|
32
|
+
export type { InteractionHostProps, InteractionProps, InteractionVariant, } from './components/Interaction';
|
|
29
33
|
export { default as Field, FieldControl, FieldErrorMessage, FieldLabel, FieldMessage, } from './components/Field';
|
|
30
34
|
export type { FieldControlProps, FieldOrientation, FieldLabelProps, FieldMessageProps, FieldProps, } from './components/Field';
|
|
31
35
|
export { default as Fieldset, FieldGroup, FieldLegend, FieldsetContent, } from './components/Fieldset';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,YAAY,EACV,kBAAkB,EAClB,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,gBAAgB,EAChB,gBAAgB,EAChB,0BAA0B,EAC1B,oBAAoB,EACpB,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,yBAAyB,CAAC;AACjC,YAAY,EACV,wBAAwB,EACxB,qBAAqB,EACrB,oCAAoC,EACpC,+BAA+B,EAC/B,yBAAyB,EACzB,2BAA2B,EAC3B,qBAAqB,EACrB,2BAA2B,EAC3B,eAAe,EACf,iBAAiB,GAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EACV,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,aAAa,EACb,cAAc,EACd,eAAe,GAChB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC9D,YAAY,EACV,WAAW,EACX,aAAa,EACb,SAAS,EACT,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,YAAY,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,YAAY,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"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"}
|
package/docs/api-conventions.md
CHANGED
|
@@ -85,3 +85,7 @@ named preset이 아니라 외부 문맥이나 직접 지정한 치수로 크기
|
|
|
85
85
|
|
|
86
86
|
`Badge`의 작은 preset도 `size='xsmall'`을 사용하므로 모든 named size가 이
|
|
87
87
|
표준 순서를 따릅니다.
|
|
88
|
+
|
|
89
|
+
`ProgressIndicator`는 선의 block size를 `small | medium | large`로 제공합니다.
|
|
90
|
+
기본 `small`은 모바일과 navigation chrome에 사용하고, `medium`과 `large`는
|
|
91
|
+
태블릿·데스크톱의 독립적인 작업 진행 표시에 사용합니다.
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
# Overlay Stacking
|
|
2
|
+
|
|
3
|
+
oc-ui의 `--oc-zindex-*` 토큰은 그림자·블러·radius로 표현하는 시각적 elevation이 아니라 브라우저 paint order를 위한 단계입니다. Material elevation의 상대적 계층 개념처럼, 자식 overlay는 전역 숫자만 높이는 대신 자신을 소유한 surface의 stacking context 안에서 위로 올라갑니다.
|
|
4
|
+
|
|
5
|
+
## 단계
|
|
6
|
+
|
|
7
|
+
| 토큰 | 기본값 | 의미 |
|
|
8
|
+
| --------------- | -----: | -------------------------------------------------------------- |
|
|
9
|
+
| `--oc-zindex-0` | `-1` | 명시적으로 뒤로 보내는 장식·비활성 layer |
|
|
10
|
+
| `--oc-zindex-1` | `0` | 기본 document flow와 component 내부 base layer |
|
|
11
|
+
| `--oc-zindex-2` | `10` | 같은 layout context 안의 docked·raised control |
|
|
12
|
+
| `--oc-zindex-3` | `1000` | trigger에 연결된 Menu·popover 같은 transient disclosure |
|
|
13
|
+
| `--oc-zindex-4` | `1400` | Modal·dialog·FloatingWindow처럼 작업 맥락을 소유하는 surface |
|
|
14
|
+
| `--oc-zindex-5` | `1800` | Tooltip·toast처럼 현재 맥락 위에서 전달되는 advisory/status UI |
|
|
15
|
+
|
|
16
|
+
숫자 간격은 각 단계 안에서 component-owned stack offset을 사용할 여유를 둡니다. 새 component가 생겼다는 이유만으로 다음 전역 단계를 추가하거나 큰 정수를 하드코딩하지 않습니다.
|
|
17
|
+
|
|
18
|
+
## 상대적 overlay boundary
|
|
19
|
+
|
|
20
|
+
`ModalContent`와 `FloatingWindowContent`는 자신을 가장 가까운 overlay boundary로 제공합니다. 그 안에서 렌더링된 `MenuContent`와 `TooltipContent`는 별도 설정 없이 해당 surface를 portal container로 사용합니다.
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
<ModalRoot>
|
|
24
|
+
<ModalContent>
|
|
25
|
+
<ModalHeader title='설정' />
|
|
26
|
+
<ModalBody>
|
|
27
|
+
<MenuRoot>
|
|
28
|
+
<MenuTrigger>더보기</MenuTrigger>
|
|
29
|
+
<MenuContent>
|
|
30
|
+
<MenuItem>복제</MenuItem>
|
|
31
|
+
</MenuContent>
|
|
32
|
+
</MenuRoot>
|
|
33
|
+
</ModalBody>
|
|
34
|
+
</ModalContent>
|
|
35
|
+
</ModalRoot>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
이때 Menu는 여전히 `--oc-zindex-3`을 사용하지만 Modal의 stacking context 안에 있으므로 Modal backdrop이나 surface 뒤로 내려가지 않습니다. Tooltip도 같은 방식으로 자기 의미인 `--oc-zindex-5`를 유지합니다. 중첩 surface에서는 가장 가까운 boundary가 우선됩니다.
|
|
39
|
+
|
|
40
|
+
surface 밖에서 단독으로 사용하면 기존처럼 document body에 portal됩니다. Shadow DOM이나 별도 overlay root가 필요한 경우 `MenuContent`, `TooltipContent`, `ModalContent`, `FloatingWindowContent`의 `container` prop으로 명시적으로 덮어쓸 수 있습니다. 명시적 `container`는 자동 boundary보다 우선하며, focus trap과 `aria-hidden` 범위도 소비자가 함께 책임져야 합니다.
|
|
41
|
+
|
|
42
|
+
## Component authoring 규칙
|
|
43
|
+
|
|
44
|
+
- 화면 맥락을 소유하는 새 portaled surface는 전역 z-index를 올리기 전에 기존 `--oc-zindex-*` 의미 단계에 매핑합니다.
|
|
45
|
+
- surface 안에서 다시 열리는 disclosure/advisory overlay는 가장 가까운 owner surface를 portal boundary로 사용합니다.
|
|
46
|
+
- Modal의 focus trap 밖에 portal host를 두면 overlay가 inert 또는 `aria-hidden` 처리될 수 있으므로, host는 접근성 tree에서도 owner surface 안에 있어야 합니다.
|
|
47
|
+
- DOM 중첩, computed z-index만으로 완료를 판단하지 않고 실제 브라우저의 `elementFromPoint()`와 pointer/keyboard interaction으로 paint order를 검증합니다.
|
|
48
|
+
- 그림자·블러·radius 같은 시각적 elevation과 `--oc-zindex-*` paint order를 서로 대체하지 않습니다.
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
|
|
27
27
|
### `$oc-responsive-mode`
|
|
28
28
|
|
|
29
|
-
- `fluid`: 기본값. 기존 출력과 동일하게 stop 사이를 `
|
|
29
|
+
- `fluid`: 기본값. 기존 출력과 동일하게 stop 사이를 `oc-fluid()`로 보간한다.
|
|
30
30
|
- `stepped`: `clamp()` 없이 stop 값이 breakpoint에서 계단식으로 바뀐다.
|
|
31
31
|
- `static`: 선택한 stop 하나를 전체 viewport에 고정한다.
|
|
32
32
|
|
package/docs/scss-helpers.md
CHANGED
|
@@ -116,6 +116,101 @@ oc-alpha($color, $opacity)
|
|
|
116
116
|
}
|
|
117
117
|
```
|
|
118
118
|
|
|
119
|
+
## oc-easing-gradient / oc-gradient-mask — 부드러운 gradient 경계
|
|
120
|
+
|
|
121
|
+
`@orioncactuscorp/ui/scss/mixins/gradient`
|
|
122
|
+
|
|
123
|
+
```scss
|
|
124
|
+
oc-easing-gradient($direction, $from, $to, $start: 0%, $end: 100%)
|
|
125
|
+
|
|
126
|
+
@include oc-gradient-mask(
|
|
127
|
+
$direction,
|
|
128
|
+
$start-fade-size: 0px,
|
|
129
|
+
$end-fade-size: 0px,
|
|
130
|
+
$content-size: 100%
|
|
131
|
+
);
|
|
132
|
+
|
|
133
|
+
@include oc-gradient-mask-edges(
|
|
134
|
+
$top-fade-size: 0px,
|
|
135
|
+
$right-fade-size: 0px,
|
|
136
|
+
$bottom-fade-size: 0px,
|
|
137
|
+
$left-fade-size: 0px,
|
|
138
|
+
$inline-content-size: 100%,
|
|
139
|
+
$block-content-size: 100%
|
|
140
|
+
);
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
`oc-easing-gradient`는 gradient line을 따라 색상을 선형 비율로 섞지 않고 smoothstep easing으로 샘플링한 중간 color stop을 생성합니다. 경계의 시작과 끝에서 색 변화 속도가 부드럽게 이어져 content fade, scrim, 이미지 overlay에 사용할 수 있습니다. 8개 구간은 부드러운 경계와 생성되는 CSS 크기 사이의 균형을 위한 고정값입니다.
|
|
144
|
+
|
|
145
|
+
- `$direction`: `top | right | bottom | left` 물리 방향
|
|
146
|
+
- `$from`, `$to`: Sass color, `transparent`, CSS `var(...)`
|
|
147
|
+
- `$start`, `$end`: gradient 변화가 시작하고 끝나는 위치
|
|
148
|
+
|
|
149
|
+
```scss
|
|
150
|
+
@use '@orioncactuscorp/ui/scss/mixins/gradient' as *;
|
|
151
|
+
|
|
152
|
+
.scrim {
|
|
153
|
+
background-image: oc-easing-gradient(
|
|
154
|
+
bottom,
|
|
155
|
+
transparent,
|
|
156
|
+
var(--oc-color-theme-background-normal),
|
|
157
|
+
0%,
|
|
158
|
+
var(--scrim-size)
|
|
159
|
+
);
|
|
160
|
+
}
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
`oc-gradient-mask`는 같은 easing curve로 시작·끝 경계를 감추고 Safari용 `-webkit-mask-image`와 표준 `mask-image`를 함께 출력합니다. fade 길이와 전체 content 길이는 호출부가 소유한 CSS 변수를 전달해 runtime에 조정합니다. `$start-fade-size + $end-fade-size`는 `$content-size`를 넘지 않도록 설정하세요.
|
|
164
|
+
|
|
165
|
+
```scss
|
|
166
|
+
.scrollViewport {
|
|
167
|
+
--example-start-fade-size: 0px;
|
|
168
|
+
--example-end-fade-size: 3rem;
|
|
169
|
+
--example-content-size: 100%;
|
|
170
|
+
|
|
171
|
+
@include oc-gradient-mask(
|
|
172
|
+
right,
|
|
173
|
+
var(--example-start-fade-size),
|
|
174
|
+
var(--example-end-fade-size),
|
|
175
|
+
var(--example-content-size)
|
|
176
|
+
);
|
|
177
|
+
}
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
2D 스크롤 영역은 `oc-gradient-mask-edges`로 block·inline mask를 교차 합성합니다. 앞의 네 인자는 CSS shorthand와 같은 `top → right → bottom → left` 순서이며 fade를 독립적으로 조절합니다. 표준 `mask-composite: intersect`와 WebKit용 `source-in`을 함께 출력합니다. 각 축의 양쪽 fade 합은 해당 content 길이를 넘지 않도록 설정하세요.
|
|
181
|
+
|
|
182
|
+
```scss
|
|
183
|
+
.canvasViewport {
|
|
184
|
+
--example-top-fade-size: 0px;
|
|
185
|
+
--example-right-fade-size: 3rem;
|
|
186
|
+
--example-bottom-fade-size: 3rem;
|
|
187
|
+
--example-left-fade-size: 0px;
|
|
188
|
+
|
|
189
|
+
@include oc-gradient-mask-edges(
|
|
190
|
+
var(--example-top-fade-size),
|
|
191
|
+
var(--example-right-fade-size),
|
|
192
|
+
var(--example-bottom-fade-size),
|
|
193
|
+
var(--example-left-fade-size)
|
|
194
|
+
);
|
|
195
|
+
}
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
마스크 상태를 전환할 때는 `mask-image` 자체를 transition하지 않고 fade 길이 custom property를 `@property`로 등록한 뒤 `oc-motion(..., fade)`를 적용합니다. gradient의 공간적 색 easing과 상태 변화의 시간적 motion을 별도 계약으로 유지합니다.
|
|
199
|
+
|
|
200
|
+
```scss
|
|
201
|
+
@use '@orioncactuscorp/ui/scss/mixins/motion' as *;
|
|
202
|
+
|
|
203
|
+
@property --example-start-fade-size {
|
|
204
|
+
syntax: '<length>';
|
|
205
|
+
inherits: false;
|
|
206
|
+
initial-value: 0;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.scrollViewport {
|
|
210
|
+
@include oc-motion(--example-start-fade-size, fade, $pace: quick);
|
|
211
|
+
}
|
|
212
|
+
```
|
|
213
|
+
|
|
119
214
|
## typo — typography 토큰 조합
|
|
120
215
|
|
|
121
216
|
`@orioncactuscorp/ui/scss/mixins/typo`
|
|
@@ -161,24 +256,34 @@ named breakpoint: `sm`(480px), `md`(768px), `lg`(1280px), `xl`(1600px), `hg`(192
|
|
|
161
256
|
|
|
162
257
|
oc-ui SCSS는 mobile-first가 기본입니다: base rule은 narrow viewport 기준으로 쓰고, desktop 이상 차이는 `respond-to(min, md)`에서 더합니다. `respond-to(md)`(max-width)는 `Mobile(md)` 전용 예외 보정에만 사용합니다.
|
|
163
258
|
|
|
164
|
-
## fluidClamp / toRem — fluid 값 유틸
|
|
259
|
+
## oc-fluid / fluidClamp / toRem — fluid 값 유틸
|
|
165
260
|
|
|
166
|
-
`@orioncactuscorp/ui/scss/mixins/utils`
|
|
261
|
+
`@orioncactuscorp/ui/scss/mixins/fluid`, `@orioncactuscorp/ui/scss/mixins/utils`
|
|
167
262
|
|
|
168
263
|
```scss
|
|
169
|
-
|
|
264
|
+
oc-fluid($min, $max, $bp, $anchor: to)
|
|
170
265
|
```
|
|
171
266
|
|
|
172
|
-
`clamp($
|
|
267
|
+
`clamp($min, <viewport 비례식>, $max)`를 출력합니다. `$min`과 `$max`는 `px` 또는 `rem` 단위 값을 사용하고, `$bp`는 기준 viewport(px)입니다. `$bp`에는 Sass breakpoint 변수 또는 직접 입력한 값(`375px`, `375`)을 사용할 수 있습니다. `$anchor`는 비례식이 어느 끝값에 정렬될지 정하며 기본값은 `to`입니다.
|
|
173
268
|
|
|
174
269
|
```scss
|
|
270
|
+
@use '@orioncactuscorp/ui/scss/mixins/fluid' as *;
|
|
271
|
+
@use '@orioncactuscorp/ui/scss/mixins/breakpoint' as *;
|
|
175
272
|
@use '@orioncactuscorp/ui/scss/mixins/utils' as *;
|
|
176
273
|
|
|
177
274
|
.hero {
|
|
178
|
-
padding-block:
|
|
275
|
+
padding-block: oc-fluid(toRem(24), toRem(64), 1280px);
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.radius {
|
|
279
|
+
border-radius: oc-fluid(toRem(10), toRem(12), $breakpoint-md, from);
|
|
179
280
|
}
|
|
180
281
|
```
|
|
181
282
|
|
|
283
|
+
`anchor: to`는 `$bp`에서 `$max`에 도달하며, `anchor: from`은 `$bp`에서 `$min`을 기준으로 이후 viewport에서 증가합니다. `oc-fluid()`는 값 생성 함수이므로 `font-size`, `line-height`, `padding`, `gap`, `border-radius` 등 CSS length 속성에 조합해서 사용할 수 있습니다.
|
|
284
|
+
|
|
285
|
+
기존 `fluidClamp($from, $bp, $anchor: to, $to)`도 호환성을 위해 유지됩니다. 신규 코드는 `oc-fluid()`를 사용하세요.
|
|
286
|
+
|
|
182
287
|
`toRem($px)`는 `16px = 1rem` 기준으로 숫자를 rem으로 변환합니다.
|
|
183
288
|
|
|
184
289
|
## Motion / Spring
|
|
@@ -34,6 +34,25 @@
|
|
|
34
34
|
- 스타일 override는 paint property를 직접 재선언하기보다 컴포넌트가 노출하는 contract 변수(`--oc-{component}-*`)를 덮는 방식을 우선하세요. 상태 전이·모션과의 일관성이 유지됩니다.
|
|
35
35
|
- 방향성 계약(`--oc-*` 변수, `data-oc-*` 값, prop)은 물리 방향(top/right/bottom/left)이 아니라 논리 방향(`block-start`, `inline-end`, `start`, `end` 등)을 사용합니다. RTL에서 자동으로 뒤집힙니다.
|
|
36
36
|
|
|
37
|
+
## 채워진 컨트롤 색상 계약
|
|
38
|
+
|
|
39
|
+
채워진 컨트롤은 배경과 그 위의 전경을 한 쌍의 component contract 변수로 노출합니다. 기본값은 package theme과 같고, consumer는 내부 slot이나 상태 selector를 복제하지 않고 컴포넌트 루트에서 두 색을 함께 조정할 수 있습니다.
|
|
40
|
+
|
|
41
|
+
| Component | Background contract | Foreground contract | 적용 상태 |
|
|
42
|
+
| ---------------------- | ---------------------------------------------- | ----------------------------------- | ------------------------------- |
|
|
43
|
+
| `Checkbox` | `--oc-checkbox-background-color` | `--oc-checkbox-color` | checked, indeterminate |
|
|
44
|
+
| `Radio` | `--oc-radio-background-color` | `--oc-radio-color` | checked |
|
|
45
|
+
| `Switch` | `--oc-switch-background-color` | `--oc-switch-color` | checked track, thumb |
|
|
46
|
+
| `BackgroundIconButton` | `--oc-background-icon-button-background-color` | `--oc-background-icon-button-color` | 모든 variant의 background, icon |
|
|
47
|
+
|
|
48
|
+
```css
|
|
49
|
+
.darkPrimaryControl {
|
|
50
|
+
--oc-radio-background-color: var(--oc-color-theme-label-strong);
|
|
51
|
+
--oc-radio-color: var(--oc-color-theme-background-normal-normal);
|
|
52
|
+
--oc-interaction-color: var(--oc-radio-color);
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
37
56
|
## Interaction 프리미티브
|
|
38
57
|
|
|
39
58
|
`Interaction`은 hover/press/focus 피드백을 그리는 passive 시각 레이어입니다. `pointer-events: none`이고 자기 상태를 갖지 않으며, 부모 컴포넌트가 자기 상태 selector로 자식 Interaction의 opacity를 제어합니다.
|
|
@@ -52,7 +71,40 @@
|
|
|
52
71
|
}
|
|
53
72
|
```
|
|
54
73
|
|
|
55
|
-
variant
|
|
74
|
+
`Interaction variant="light|normal|strong"`는 primitive 인스턴스의 기본 강도를 정합니다. 색을 커스텀한 host나 합성 영역에서 강도를 함께 바꾸려면 Interaction을 직접 찾지 말고 host에 `data-oc-interaction-variant="light|normal|strong"`를 설정하세요. host selector가 primitive 기본값보다 우선하며 custom property 상속을 통해 모든 하위 Interaction에 적용됩니다.
|
|
75
|
+
|
|
76
|
+
상태 레이어 색은 host-scoped contract인 `--oc-interaction-color`로 지정합니다. 기본 fallback은 `--oc-color-theme-label-normal`이며 Button처럼 appearance나 variant별 기본값이 fallback과 다른 owner component만 같은 변수를 설정합니다. 별도 매핑이 없는 owner는 primitive fallback과 host 상속을 그대로 사용합니다. consumer는 나중에 로드되는 단일 host 클래스에서 이 변수를 덮을 수 있습니다. 채워진 surface를 커스텀할 때 상태 레이어가 전경색을 따르게 하려면 `--oc-interaction-color: var(--oc-{component}-color)`처럼 명시적으로 연결하세요. foreground와 state-layer를 강제로 결합하지 않으므로 기존 기본 시각과 별도 상태색 customization을 함께 유지할 수 있습니다.
|
|
77
|
+
|
|
78
|
+
`:root` 또는 바깥 theme scope에서 선언한 값도 상속되지만, owner가 appearance나 variant 기본값을 같은 변수에 직접 선언하면 더 가까운 owner 값이 우선합니다. 따라서 `--oc-interaction-color`는 모든 Interaction을 일괄 교체하는 global theme token이 아니며, 일관된 customization이 필요하면 대상 component host에 설정합니다.
|
|
79
|
+
|
|
80
|
+
커스텀 React host의 props를 선언할 때는 package root에서 `InteractionHostProps`를 import해 같은 named contract를 재사용할 수 있습니다.
|
|
81
|
+
|
|
82
|
+
```tsx
|
|
83
|
+
<Button
|
|
84
|
+
className={styles.brandButton}
|
|
85
|
+
data-oc-interaction-variant='strong'
|
|
86
|
+
>
|
|
87
|
+
확인
|
|
88
|
+
</Button>
|
|
89
|
+
|
|
90
|
+
<ActionArea data-oc-interaction-variant='strong'>
|
|
91
|
+
<ActionAreaButton priority='main'>저장</ActionAreaButton>
|
|
92
|
+
<ActionAreaButton priority='sub'>취소</ActionAreaButton>
|
|
93
|
+
</ActionArea>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
중첩 영역은 `normal`을 명시해 바깥 scope를 재설정할 수 있습니다. `Menu`는 content가 portal에 렌더링되므로 trigger나 `MenuRoot`가 아니라 `MenuContent`에 selector를 설정합니다.
|
|
97
|
+
|
|
98
|
+
| Contract | 기본값 | 용도 |
|
|
99
|
+
| ----------------------------------------------------- | ------------------------------------------------ | ----------------------------------------- |
|
|
100
|
+
| `--oc-interaction-color` | `--oc-color-theme-label-normal` | host와 하위 Interaction의 상태 레이어 색 |
|
|
101
|
+
| `data-oc-interaction-variant="light\|normal\|strong"` | 미설정 | host와 하위 Interaction의 named 강도 선택 |
|
|
102
|
+
| `--oc-interaction-opacity-factor` | primitive `variant`의 `0.75\|1\|1.5` | host 범위의 직접 강도 조정 escape hatch |
|
|
103
|
+
| `--oc-interaction-opacity-hover` | `--oc-color-global-opacity-5 × resolved factor` | Interaction이 제공하는 hover 출력값 |
|
|
104
|
+
| `--oc-interaction-opacity-focus` | `--oc-color-global-opacity-8 × resolved factor` | Interaction이 제공하는 focus 출력값 |
|
|
105
|
+
| `--oc-interaction-opacity-active` | `--oc-color-global-opacity-12 × resolved factor` | Interaction이 제공하는 active 출력값 |
|
|
106
|
+
|
|
107
|
+
`--oc-interaction-opacity-*`는 custom host가 상태 selector에서 읽는 resolved output 계약입니다. 임의 강도를 지정할 때는 이 출력값을 자식 selector로 덮지 말고 host에서 `--oc-interaction-opacity-factor`를 설정하세요.
|
|
56
108
|
|
|
57
109
|
## Badge 계약
|
|
58
110
|
|
|
@@ -113,6 +165,16 @@ slot content 프리미티브는 독립 컴포넌트 selector를 노출합니다.
|
|
|
113
165
|
- `verticalAlign=top`은 첫 content 줄 기준 정렬, `center`는 전체 content 높이 기준 중앙 정렬입니다.
|
|
114
166
|
- `interactive=true`일 때 row 활성화와 별개로 동작해야 하는 내부 control은 `data-oc-cell-control`로 opt-in한 경우에만 row 클릭이 활성화합니다.
|
|
115
167
|
|
|
168
|
+
## PositionSnap 계약
|
|
169
|
+
|
|
170
|
+
`PositionSnapPositioner`는 위치와 drag 상태를 소유하며, 내부 control의 transform이나 시맨틱을 변경하지 않습니다.
|
|
171
|
+
|
|
172
|
+
| Component | Root selector | Visual selectors | Stable parts |
|
|
173
|
+
| -------------- | ----------------------------------- | -------------------------------------------------------------------------- | ------------------------------------ |
|
|
174
|
+
| `PositionSnap` | `data-oc-component="position-snap"` | `data-oc-drag="content\|handle"`, `data-oc-dragging`, `data-oc-positioned` | `positioner`, `position-snap-handle` |
|
|
175
|
+
|
|
176
|
+
위치 좌표는 PositionSnap runtime의 내부 계약이며 consumer는 `position`, `boundary`, `boundaryPadding` prop으로 제어합니다. 기본 paint order는 docked·raised control 단계인 `--oc-zindex-2`이며, owner 문맥에서 조정해야 할 때만 공개 계약인 `--oc-position-snap-z-index`를 덮습니다.
|
|
177
|
+
|
|
116
178
|
## Runtime Motion 계약
|
|
117
179
|
|
|
118
180
|
runtime motion wrapper는 SCSS `oc-motion`과 같은 intent/phase/pace/reduced vocabulary를 사용하며, 시맨틱 상태와 진행 중 애니메이션 상태를 분리해 노출합니다.
|
|
@@ -193,6 +255,16 @@ Tab content는 inline padding 없이 배치되고 배경색이 transparent인 se
|
|
|
193
255
|
|
|
194
256
|
`Skeleton`은 기본 장식이라 `aria-hidden="true"`를 강제하고 consumer의 `role`/`tabIndex` prop을 무시합니다. 폭·높이·radius·색·opacity는 `--oc-skeleton-*` 변수로 노출됩니다.
|
|
195
257
|
|
|
258
|
+
## Progress indicator 계약
|
|
259
|
+
|
|
260
|
+
`ProgressIndicator`는 알려진 범위 안의 진행률을 표시하는 읽기 전용 선형 요소입니다. `value`와 `max`는 시각적 길이와 `aria-valuenow`/`aria-valuemax`에 함께 반영되며, consumer는 `aria-label` 또는 `aria-labelledby`로 접근 가능한 이름을 제공합니다.
|
|
261
|
+
|
|
262
|
+
| Component | Root selector | Visual selectors | Stable parts |
|
|
263
|
+
| ------------------- | ---------------------------------------- | ---------------- | ------------ |
|
|
264
|
+
| `ProgressIndicator` | `data-oc-component="progress-indicator"` | `data-oc-size` | `indicator` |
|
|
265
|
+
|
|
266
|
+
배경 track과 진행 indicator 색, 선 두께, radius는 `--oc-progress-indicator-background-color`, `--oc-progress-indicator-color`, `--oc-progress-indicator-block-size`, `--oc-progress-indicator-radius` 변수로 조정할 수 있습니다.
|
|
267
|
+
|
|
196
268
|
## Action Area 계약
|
|
197
269
|
|
|
198
270
|
`ActionAreaLayout`은 스크롤 가능한 body와 고정 footer slot 사이의 scroll 경계를 소유합니다.
|
|
@@ -264,7 +336,7 @@ Modal은 transition motion과 시각 clipping을 분리합니다.
|
|
|
264
336
|
| Motion layer | `data-oc-component="modal-content"` + `data-oc-part="surface-motion"` | dialog 시맨틱, Base UI transition 상태, opacity/transform/drag translate |
|
|
265
337
|
| Visual surface | `data-oc-part="surface"` | background, radius, overflow clipping, layout, header/body/footer slot, `data-oc-scrollable="true\|false"` |
|
|
266
338
|
| Bottom fill | `data-oc-component="modal-bottom-fill"` + `data-oc-part="bottom-fill"` | bottom sheet overshoot fill |
|
|
267
|
-
| Header | `data-oc-component="modal-header"` + `data-oc-part="header"` | 타이틀
|
|
339
|
+
| Header | `data-oc-component="modal-header"` + `data-oc-part="header"` | 타이틀 영역, optional drag handle, `header-bottom` 보조 chrome slot |
|
|
268
340
|
| Navigation | `data-oc-component="modal-navigation-section"` | 고정 chrome row + 확장 panel |
|
|
269
341
|
| Body | `data-oc-component="modal-body"` + `data-oc-part="body"` | scroll area wrapper |
|
|
270
342
|
| Body content | `data-oc-component="modal-body-content"` + `data-oc-part="body-content"` + `data-oc-layout="content\|fill"` | padded content 영역 |
|
|
@@ -275,6 +347,8 @@ Modal은 transition motion과 시각 clipping을 분리합니다.
|
|
|
275
347
|
Modal의 기본 `initialFocus="auto"`는 `ModalHeader`의 visible title을 `tabIndex={-1}`인 정적 문맥 시작점으로 사용합니다. title이 없으면 첫 tabbable 요소로 fallback합니다. `first-interactive`, `title`, ref/function으로 업무 의미에 맞는 대상을 명시할 수 있으며, 되돌리기 어려운 확인 dialog는 가장 덜 파괴적인 action을 지정하는 것이 권장됩니다. title focus는 일반 Tab 순서에 추가되지 않으며 첫 Tab부터 기존 control 순환이 시작됩니다.
|
|
276
348
|
|
|
277
349
|
- `ModalContent`의 `className`은 motion layer, visual surface, bottom fill 세 레이어에 적용됩니다 — 공개 `--oc-modal-*` 변수 override가 layout 계산까지 도달하게 하기 위함입니다. `style`은 visual surface에 적용되며, `style`의 CSS custom property는 motion/bottom fill 레이어로도 전달됩니다.
|
|
350
|
+
- `ModalHeader bottomContent`는 기본 header row 아래 `data-oc-part="header-bottom"`에 보조 chrome을 렌더링합니다. Modal은 이 slot을 header 높이에 포함하고 `--oc-modal-container-padding-block-start`를 현재 size의 `--oc-modal-container-padding-block`으로 자동 설정해 body와 scroll 시작 간격을 예약합니다. 명시적인 `ModalContent style` 변수는 이 기본값을 override할 수 있습니다.
|
|
351
|
+
- `ModalHeader bottomContent`의 직계 `ProgressIndicator`는 edge-attached navigation chrome으로 취급해 `--oc-progress-indicator-radius: 0`을 자동 적용합니다. 별도 wrapper 없이 slot에 직접 배치하는 구성이 canonical usage입니다.
|
|
278
352
|
- `data-starting-style`/`data-ending-style`은 Base UI가 motion layer에 방출합니다.
|
|
279
353
|
- `data-oc-modal-backdrop="hidden"`으로 정착하면 backdrop 레이어는 렌더링되지 않습니다. 전환 중 잠시 남는 exiting backdrop 요소에 layout/hit-testing/커스터마이즈를 의존하지 마세요.
|
|
280
354
|
- `backdropFrom` snap 임계 아래에 정착한 bottom sheet는 backdrop 레이어에 `data-oc-modal-backdrop-passthrough="true"`를 방출합니다. 이 상태는 non-modal이며 배경이 상호작용 가능합니다. attribute는 드래그 프레임 단위가 아니라 정착(rest) 시점에 바뀝니다.
|
|
@@ -285,6 +359,7 @@ Modal의 기본 `initialFocus="auto"`는 `ModalHeader`의 visible title을 `tabI
|
|
|
285
359
|
- `ModalBody layout="fill"`은 header/footer/content padding 예약을 유지한 채 body content slot을 iframe·map·viewer 같은 embedded 표면용 fill container로 바꿉니다.
|
|
286
360
|
- size별 공개 변수: `--oc-modal-small-width`/`--oc-modal-medium-width`/`--oc-modal-large-width`와 `--oc-modal-{size}-padding-*`이 내부 `--oc-modal-container-padding-*` 계약으로 매핑됩니다. header/body/footer padding은 기본적으로 container padding을 상속하며, `--oc-modal-header-padding-*`/`--oc-modal-footer-padding-*`로 slot별 예외를 둘 수 있습니다. edge 정렬 chrome control용으로 `--oc-modal-header-edge-offset-inline`이 있습니다.
|
|
287
361
|
- 닫기 시도가 차단되어 피드백 중일 때 motion layer에 `data-oc-modal-feedback="reject"`가 방출됩니다. transform을 직접 덮지 말고 `--oc-modal-reject-distance` 같은 contract 변수를 사용하세요.
|
|
362
|
+
- bottom placement에서 소프트 키보드 회피 세션이 활성일 때 viewport 레이어(`data-oc-part="viewport"`)에 `data-oc-modal-keyboard-avoiding="true"`가 방출됩니다. 키보드 geometry 추격 transition의 게이트로 쓰이는 내부 지향 상태이며, 소비자는 이 attribute의 방출 타이밍(세션 시작/해제 시점의 지연 포함)에 의존하지 않는 것이 좋습니다.
|
|
288
363
|
- `ModalNavigationSection`은 body content가 아니라 Modal chrome입니다. 루트는 `data-oc-state="open|closed"`, toggle row는 `data-oc-component="modal-navigation"` + `data-oc-part="navigation"` + `aria-expanded`/`aria-controls`, indicator는 `data-oc-part="indicator"`/`indicator-frame`, panel은 `data-oc-component="modal-navigation-panel"`(collapsed 동안 `aria-hidden`/`inert`), panel content는 `data-oc-part="panel-inner"`를 노출합니다.
|
|
289
364
|
|
|
290
365
|
## Provider 소유 예외
|
package/docs/tokens.md
CHANGED
|
@@ -543,6 +543,8 @@ spring preset의 timing/duration scale입니다. 자세한 사용법은 [Spring
|
|
|
543
543
|
|
|
544
544
|
## Z-index
|
|
545
545
|
|
|
546
|
+
브라우저 paint order 단계이며 시각적 elevation과 별도입니다. 의미별 단계와 중첩 portal 규칙은 [Overlay Stacking](./overlay-stacking.md)을 참조하세요.
|
|
547
|
+
|
|
546
548
|
- `--oc-zindex-0`
|
|
547
549
|
- `--oc-zindex-1`
|
|
548
550
|
- `--oc-zindex-2`
|