(initialState: T): {
-`(partial: Partial | (prevState: T) => Partial) => T`
+`(partial: Partial | (prevState: T) => Partial) => void`
diff --git a/apps/react-kits-doc/stories/utils/use-animation.mdx b/apps/react-kits-doc/stories/utils/use-animation.mdx
new file mode 100644
index 00000000..f7dfa813
--- /dev/null
+++ b/apps/react-kits-doc/stories/utils/use-animation.mdx
@@ -0,0 +1,159 @@
+
+[//]: # (Do not edit directly)
+[//]: # (Generated by the Cocokits TypeDoc custom theme)
+
+import { Meta } from '@storybook/addon-docs';
+import { MdxPage } from '@cocokits/storybook-addon-theme';
+
+export const tocItems = [{"id":"selection_animationoption","name":"AnimationOption"},{"id":"selection_useanimation","name":"useAnimation()"}];
+
+
+
+
+## AnimationOption
+
+Options for the `useAnimation` hook.
+
+### Properties
+
+
+
+
+
+Property
+Type
+Description
+
+
+
+
+
+
+`initializeValues?`
+
+
+
+
+`DeepPartial`
+
+
+
+
+Initial partial values to apply immediately on mount.
+- `dimension` : width/height
+- `transform` : x, y, scale
+- `opacity` : opacity
+
+
+
+
+
+
+
+***
+
+
+## useAnimation()
+
+```ts
+function useAnimation(ref: RefObject
, options: AnimationOption): Animation | null
+```
+
+A custom hook that creates or reuses an `Animation` instance for the given element
+ref, applies any initial values immediately, and returns the instance.
+
+Internally it calls `Animation.getOrCreateInstance(ref.current)` from
+`@cocokits/common-utils`, sets up dimension, translate, scale, and opacity
+(if provided), then applies them before the first paint via `useLayoutEffect`.
+
+### Parameters
+
+
+
+
+
+Parameter
+Type
+Description
+
+
+
+
+
+
+`ref`
+
+
+
+
+`RefObject`
+
+
+
+
+A React ref pointing to an HTMLElement to animate.
+
+
+
+
+
+
+`options`
+
+
+
+
+`AnimationOption`
+
+
+
+
+Optional settings:
+ - `initializeValues` : partial animation properties to set immediately.
+
+
+
+
+
+
(null)
+ const animation = useAnimation(boxRef, {
+ initializeValues: {
+ opacity: 0,
+ transform: { scale: 0.5 }
+ }
+ })
+
+ // For other examples, check the Animation documentation.
+ onClick = () => {
+ if (animation) {
+ animation
+ .setDimension({ width: 100, height: 100 })
+ .setTranslate({ x: 50, y: 50 })
+ .animate()
+ }
+ }
+
+ return Hello
+}
+```
+
+### See
+
+ - Animation for more details on the animation API.
+ - AnimationProperties for the properties that can be set.
+
+
diff --git a/apps/react-kits-doc/stories/utils/use-debug.mdx b/apps/react-kits-doc/stories/utils/use-debug.mdx
index 93857dbf..20db757c 100644
--- a/apps/react-kits-doc/stories/utils/use-debug.mdx
+++ b/apps/react-kits-doc/stories/utils/use-debug.mdx
@@ -87,13 +87,12 @@ An optional array of dependencies. Debug messages are logged when these values c
### Example
```ts
+// In this example, the hook logs when the component is mounted, unmounted, and whenever the values in `changes` update.
// Usage example:
function MyComponent({ propA, propB }) {
useDebug("MyComponent", [propA, propB]);
return Hello, world!
;
}
-
-In this example, the hook logs when the component is mounted, unmounted, and whenever the values in `changes` update.
```
diff --git a/apps/react-kits-doc/stories/utils/use-on-destroy.mdx b/apps/react-kits-doc/stories/utils/use-on-destroy.mdx
new file mode 100644
index 00000000..b551b4b1
--- /dev/null
+++ b/apps/react-kits-doc/stories/utils/use-on-destroy.mdx
@@ -0,0 +1,75 @@
+
+[//]: # (Do not edit directly)
+[//]: # (Generated by the Cocokits TypeDoc custom theme)
+
+import { Meta } from '@storybook/addon-docs';
+import { MdxPage } from '@cocokits/storybook-addon-theme';
+
+export const tocItems = [{"id":"selection_useondestroy","name":"useOnDestroy()"}];
+
+
+
+
+## useOnDestroy()
+
+```ts
+function useOnDestroy(callback: () => void): void
+```
+
+A custom hook that runs a callback function when the component is destroyed.
+This is useful for performing cleanup tasks such as removing event listeners or cancelling subscriptions.
+It's same as `useEffect` with an empty dependency array, but specifically intended for cleanup actions.
+
+### Parameters
+
+
+
+
+
+Parameter
+Type
+Description
+
+
+
+
+
+
+`callback`
+
+
+
+
+`() => void`
+
+
+
+
+The function to run on component destruction.
+
+
+
+
+
+
+
+### Returns
+
+`void`
+
+### Example
+
+```ts
+// Usage example:
+function MyComponent() {
+ useOnDestroy(() => {
+ console.log('Component destroyed');
+ });
+
+ return
My Component
;
+}
+```
+
+
diff --git a/apps/react-kits-doc/stories/utils/use-on-init.mdx b/apps/react-kits-doc/stories/utils/use-on-init.mdx
new file mode 100644
index 00000000..3fefd774
--- /dev/null
+++ b/apps/react-kits-doc/stories/utils/use-on-init.mdx
@@ -0,0 +1,74 @@
+
+[//]: # (Do not edit directly)
+[//]: # (Generated by the Cocokits TypeDoc custom theme)
+
+import { Meta } from '@storybook/addon-docs';
+import { MdxPage } from '@cocokits/storybook-addon-theme';
+
+export const tocItems = [{"id":"selection_useoninit","name":"useOnInit()"}];
+
+
+
+
+## useOnInit()
+
+```ts
+function useOnInit(callback: () => void): void
+```
+
+A custom hook that runs a callback function only once when the component is initialized.
+This is useful for performing setup tasks that should only happen once, such as initializing state or fetching data.
+
+### Parameters
+
+
+
+
+
+Parameter
+Type
+Description
+
+
+
+
+
+
+`callback`
+
+
+
+
+`() => void`
+
+
+
+
+The function to run on initialization.
+
+
+
+
+
+
+
+### Returns
+
+`void`
+
+### Example
+
+```ts
+// Usage example:
+function MyComponent() {
+ useOnInit(() => {
+ console.log('Component initialized');
+ });
+
+ return
My Component
;
+}
+```
+
+
diff --git a/apps/react-kits-doc/stories/utils/use-selection.mdx b/apps/react-kits-doc/stories/utils/use-selection.mdx
new file mode 100644
index 00000000..1a6dbb84
--- /dev/null
+++ b/apps/react-kits-doc/stories/utils/use-selection.mdx
@@ -0,0 +1,164 @@
+
+[//]: # (Do not edit directly)
+[//]: # (Generated by the Cocokits TypeDoc custom theme)
+
+import { Meta } from '@storybook/addon-docs';
+import { MdxPage } from '@cocokits/storybook-addon-theme';
+
+export const tocItems = [{"id":"selection_useselection","name":"useSelection()"}];
+
+
+
+
+## useSelection()
+
+```ts
+function useSelection
(options: Partial>): {
+ selected: undefined | T[];
+ selection: Selection;
+ }
+```
+
+A custom hook that manages selection state for items of type `T` and exposes
+utility methods to manipulate the selection.
+
+Internally it creates a `Selection` instance from `@cocokits/common-utils`
+and sets up listeners to update React state whenever the selection changes.
+
+### Type Parameters
+
+
+
+
+
+Type Parameter
+
+
+
+
+
+
+`T`
+
+
+
+
+
+
+
+
+
+Parameter
+Type
+Description
+
+
+
+
+
+
+`options`
+
+
+
+
+`Partial>`
+
+
+
+
+Partial SelectionOptions\ to configure behavior such as
+ multi-select, comparison function, and initial selection.
+
+
+
+
+
+
;
+ }
+```
+
+An object containing:
+ - `selected`: the current array of selected items, or `undefined` before initialization.
+ - `selection`: the underlying `Selection` instance with methods to manipulate selection.
+
+
+
+
+
+Name
+Type
+
+
+
+
+
+
+`selected`
+
+
+
+
+`undefined | T[]`
+
+
+
+
+
+
+`selection`
+
+
+
+
+`Selection`
+
+
+
+
+
+
({multiple: true});
+
+ return (
+
+
Clear Selection
+ {users.map(user => (
+
+
+ ))}
+
diff --git a/apps/react-kits-doc/stories/utils/use-slot-children.mdx b/apps/react-kits-doc/stories/utils/use-slot-children.mdx
new file mode 100644
index 00000000..fb155939
--- /dev/null
+++ b/apps/react-kits-doc/stories/utils/use-slot-children.mdx
@@ -0,0 +1,154 @@
+
+[//]: # (Do not edit directly)
+[//]: # (Generated by the Cocokits TypeDoc custom theme)
+
+import { Meta } from '@storybook/addon-docs';
+import { MdxPage } from '@cocokits/storybook-addon-theme';
+
+export const tocItems = [{"id":"selection_useslotchildren","name":"useSlotChildren()"}];
+
+
+
+
+## useSlotChildren()
+
+```ts
+function useSlotChildren
(children: ReactNode, ...slotNames: T): SlotChildrenResult
+```
+
+A custom hook that splits a React children tree into N named “slots” (by
+matching each child’s `type.displayName`) plus a final “rest” array of all
+unmatched children.
+
+It returns a tuple of length = `slotNames.length + 1`. Each of the first N
+items is the combined ReactNode(s) for that slot, in the same order they
+appeared in the children. The last item is an array of all remaining children.
+
+### Type Parameters
+
+
+
+
+
+Type Parameter
+Description
+
+
+
+
+
+
+`T` *extends* `readonly string[]`
+
+
+
+
+A readonly tuple of slot displayName strings.
+
+
+
+
+
+
+
+
+
+Parameter
+Type
+Description
+
+
+
+
+
+
+`children`
+
+
+
+
+`ReactNode`
+
+
+
+
+The full React.ReactNode children tree to partition.
+
+
+
+
+
+
+...`slotNames`
+
+
+
+
+`T`
+
+
+
+
+A list of component displayName strings to extract, in order.
+ E.g. `['MyComponent.Header', 'MyComponent.Footer']`.
+
+
+
+
+
+
`
+
+A tuple `[slot1, slot2, …, rest]` where:
+ - `slot1` corresponds to the children of the component whose
+ `displayName === slotNames[0]`
+ - `slot2` corresponds to the children of the component whose
+ `displayName === slotNames[1]`
+ - …
+ - `rest` is an array of all other children not matched by any slotName.
+
+### Examples
+
+```ts
+// Single-slot usage: returns [headerNodes, restNodes]
+function MyComponent({ children }: { children: React.ReactNode }) {
+ const [header, rest] = useSlotChildren(children, 'MyComponent.Header')
+ return (
+
+ )
+}
+
+MyComponent.Header = ({ children }: { children: React.ReactNode }) => <>{children}
+MyComponent.Header.displayName = 'MyComponent.Header'
+```
+
+```ts
+// Multi-slot usage: returns [hdr, ftr, rest]
+const [hdr, ftr, rest] = useSlotChildren(
+ children,
+ 'MyComponent.Header',
+ 'MyComponent.Footer'
+)
+```
+
+### Warning
+
+- The hook relies on each slot component setting a unique `displayName`.
+- The returned slots are re-computed whenever `children` or any
+ `slotNames` change (shallow string compare).
+- Pushing large numbers of children through this hook can impact render
+ performance—use sparingly for layout slots, not deep content parsing.
+
+
diff --git a/package.json b/package.json
index 487f9015..6a45786e 100644
--- a/package.json
+++ b/package.json
@@ -107,6 +107,7 @@
"ng-packagr": "18.2.0",
"nx": "19.5.8",
"postcss": "8.4.38",
+ "postcss-selector-parser": "^7.1.0",
"postcss-url": "~10.1.3",
"prettier": "^3.4.2",
"resolve-url-loader": "^5.0.0",
diff --git a/packages/angular/accordion/.eslintrc.json b/packages/angular/accordion/.eslintrc.json
new file mode 100644
index 00000000..f6fdaca9
--- /dev/null
+++ b/packages/angular/accordion/.eslintrc.json
@@ -0,0 +1,19 @@
+{
+ "extends": ["../../../.eslintrc.json"],
+ "ignorePatterns": ["!**/*"],
+ "overrides": [
+ {
+ "files": ["*.ts"],
+ "extends": [
+ "plugin:@nx/angular",
+ "plugin:@angular-eslint/template/process-inline-templates",
+ "../../../tools/eslint/eslint.angular.json"
+ ]
+ },
+ {
+ "files": ["*.html"],
+ "extends": ["plugin:@nx/angular-template"],
+ "rules": {}
+ }
+ ]
+}
diff --git a/packages/angular/accordion/LICENSE b/packages/angular/accordion/LICENSE
new file mode 100644
index 00000000..637feac8
--- /dev/null
+++ b/packages/angular/accordion/LICENSE
@@ -0,0 +1,9 @@
+Copyright 2025 Milad Faghihi, Cocokits
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and limitations under the License.
diff --git a/packages/angular/accordion/README.md b/packages/angular/accordion/README.md
new file mode 100644
index 00000000..e29f0ce8
--- /dev/null
+++ b/packages/angular/accordion/README.md
@@ -0,0 +1,80 @@
+# @cocokits/angular-accordion
+
+The `@cocokits/angular-accordion` package provides a powerful and flexible accordion component for Angular applications. Built with customization, performance, and accessibility in mind, it supports advanced UI scenarios through lazy loading, nested panels, and custom interaction logic.
+
+## Included Components:
+- `AccordionComponent`
+- `AccordionPanelComponent`
+- `AccordionHeaderComponent`
+- `AccordionHeaderIconDirective`
+
+
+## Key Components Overview:
+
+### AccordionComponent
+The core wrapper component that manages the accordion structure. It handles state control, panel registration, keyboard accessibility, and global behaviors such as animation and expand/collapse all.
+
+**Features:**
+- **Custom Icon Template:**
+Allow developers to define a custom template for the expand/collapse icon, supporting branding or UI consistency.
+
+- **Expansion Mode:**
+Support both single and multiple expanded panels simultaneously, configurable via input.
+
+- **Icon Position:**
+Provide option to render the expand/collapse icon on either the left or right side of the header.
+
+- **Custom Header:**
+Support default text headers or fully custom templates for complete flexibility in UI design.
+
+- **Toggle Animation:**
+Option to enable or disable transition animation for smoother or snappier UX.
+
+- **Disabled Panel:**
+Disable specific panels to prevent user interaction and indicate non-interactive state.
+
+- **Dynamic Control:**
+Expose imperative methods to programmatically expand or collapse individual panels or groups.
+
+- **Expand/Collapse All:**
+Allow batch toggle actions to expand or collapse all panels at once, useful in dashboards or summaries.
+
+- **Nested Support:**
+Support placing accordions inside accordion content, enabling complex hierarchical layouts.
+
+
+### AccordionPanelComponent
+
+Defines an individual collapsible section inside the accordion. Works as a direct child of AccordionComponent, managing local state and enabling features like disabling and dynamic expansion.
+
+
+### AccordionHeaderComponent
+
+Renders the clickable trigger area of a panel. Allows full template customization while preserving accessibility and keyboard support.
+
+### AccordionHeaderIconDirective
+
+Angular structural directive (ng-template) that allows replacing the default header icon with custom visuals or animations.
+
+
+---
+
+## Styling and Theming
+As with other CocoKits components, these accordion related components do not come with built-in styles but apply CSS classes based on configuration. This allows you to style them or use CocoKits' theming options for a consistent look across your application.
+
+## Documentation and Examples
+For more information on configuring and using these components, visit the documentation:
+
+- [AccordionComponent](https://angular.cocokits.com/?path=/docs/ui-components-accordion--docs)
+
+
+---
+
+### Contributing
+We welcome contributions! If you'd like to contribute to this project, please read our [Contributing Guidelines](https://github.com/coco-base/cocokits/blob/main/CONTRIBUTING.md)
+
+---
+
+### License
+This project is licensed under the Apache License. See the [LICENSE](https://github.com/coco-base/cocokits/blob/main/LICENSE) file for details.
+
diff --git a/packages/angular/accordion/ng-package.json b/packages/angular/accordion/ng-package.json
new file mode 100644
index 00000000..45554de3
--- /dev/null
+++ b/packages/angular/accordion/ng-package.json
@@ -0,0 +1,8 @@
+{
+ "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+ "dest": "../../../dist/packages/angular/accordion",
+ "lib": {
+ "entryFile": "src/index.ts"
+ },
+ "allowedNonPeerDependencies": ["@cocokits/"]
+}
diff --git a/packages/angular/accordion/package.json b/packages/angular/accordion/package.json
new file mode 100644
index 00000000..0b80a392
--- /dev/null
+++ b/packages/angular/accordion/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "@cocokits/angular-accordion",
+ "version": "0.0.0",
+ "private": false,
+ "sideEffects": false,
+ "dependencies": {
+ "tslib": "^2.3.0",
+ "@cocokits/angular-core": "workspace:*",
+ "@cocokits/core": "workspace:*",
+ "@cocokits/common-utils": "workspace:*",
+ "@cocokits/angular-button": "workspace:*",
+ "@cocokits/angular-icon": "workspace:*"
+ },
+ "devDependencies": {},
+ "peerDependencies": {
+ "@angular/common": "^18.2.0",
+ "@angular/core": "^18.2.0"
+ },
+ "publishConfig": {
+ "directory": "../../../dist/packages/angular/accordion",
+ "access": "public"
+ }
+}
diff --git a/packages/angular/accordion/project.json b/packages/angular/accordion/project.json
new file mode 100644
index 00000000..ef3c6882
--- /dev/null
+++ b/packages/angular/accordion/project.json
@@ -0,0 +1,29 @@
+{
+ "name": "@cocokits/angular-accordion",
+ "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+ "sourceRoot": "/packages/angular/accordion/src",
+ "prefix": "lib",
+ "projectType": "library",
+ "tags": ["type:ui", "framework:angular"],
+ "targets": {
+ "build": {
+ "executor": "@nx/angular:package",
+ "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+ "options": {
+ "project": "packages/angular/accordion/ng-package.json"
+ },
+ "configurations": {
+ "production": {
+ "tsConfig": "packages/angular/accordion/tsconfig.lib.prod.json"
+ },
+ "development": {
+ "tsConfig": "packages/angular/accordion/tsconfig.lib.json"
+ }
+ },
+ "defaultConfiguration": "production"
+ },
+ "quick-fix-eslint": {
+ "executor": "@nx/eslint:lint"
+ }
+ }
+}
diff --git a/packages/angular/accordion/src/index.ts b/packages/angular/accordion/src/index.ts
new file mode 100644
index 00000000..d8ca18ce
--- /dev/null
+++ b/packages/angular/accordion/src/index.ts
@@ -0,0 +1,4 @@
+export * from './lib/accordion/accordion.component';
+export * from './lib/accordion-header/accordion-header.component';
+export * from './lib/accordion-header-icon.tmpl-directive';
+export * from './lib/accordion-panel/accordion-panel.component';
diff --git a/packages/angular/accordion/src/lib/accordion-header-icon.tmpl-directive.ts b/packages/angular/accordion/src/lib/accordion-header-icon.tmpl-directive.ts
new file mode 100644
index 00000000..9c561933
--- /dev/null
+++ b/packages/angular/accordion/src/lib/accordion-header-icon.tmpl-directive.ts
@@ -0,0 +1,19 @@
+import { Directive } from '@angular/core';
+
+export interface AccordionHeaderIconContext {
+ isExpanded: boolean;
+ disabled: boolean;
+}
+
+@Directive({
+ standalone: true,
+ selector: 'ng-template[cckAccordionHeaderIcon]',
+})
+export class AccordionHeaderIconTemplateDirective {
+ static ngTemplateContextGuard(
+ _dir: AccordionHeaderIconTemplateDirective,
+ ctx: unknown
+ ): ctx is AccordionHeaderIconContext {
+ return true;
+ }
+}
diff --git a/packages/angular/accordion/src/lib/accordion-header/accordion-header.component.html b/packages/angular/accordion/src/lib/accordion-header/accordion-header.component.html
new file mode 100644
index 00000000..d188b806
--- /dev/null
+++ b/packages/angular/accordion/src/lib/accordion-header/accordion-header.component.html
@@ -0,0 +1,12 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/angular/accordion/src/lib/accordion-header/accordion-header.component.scss b/packages/angular/accordion/src/lib/accordion-header/accordion-header.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/angular/accordion/src/lib/accordion-header/accordion-header.component.ts b/packages/angular/accordion/src/lib/accordion-header/accordion-header.component.ts
new file mode 100644
index 00000000..5c243209
--- /dev/null
+++ b/packages/angular/accordion/src/lib/accordion-header/accordion-header.component.ts
@@ -0,0 +1,89 @@
+import { CommonModule } from '@angular/common';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ computed,
+ contentChild,
+ inject,
+ TemplateRef,
+ viewChild,
+ ViewEncapsulation,
+} from '@angular/core';
+
+import { IconButtonComponent } from '@cocokits/angular-button';
+import { _UiBaseComponent } from '@cocokits/angular-core';
+import { SvgIconComponent } from '@cocokits/angular-icon';
+
+import { AccordionStore } from '../accordion.store';
+import { AccordionComponent } from '../accordion/accordion.component';
+import { AccordionHeaderIconTemplateDirective } from '../accordion-header-icon.tmpl-directive';
+import { AccordionPanelComponent } from '../accordion-panel/accordion-panel.component';
+
+@Component({
+ standalone: true,
+ imports: [IconButtonComponent, SvgIconComponent, CommonModule],
+ selector: 'cck-accordion-header',
+ templateUrl: './accordion-header.component.html',
+ styleUrls: ['./accordion-header.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ host: {
+ '[class]': 'hostClassNames()',
+ '(click)': 'onHostClick()',
+ },
+})
+export class AccordionHeaderComponent extends _UiBaseComponent<'accordionHeader'> {
+ protected readonly componentName = 'accordionHeader';
+ protected extraHostElementClassConditions = computed(() => [
+ { if: this.accordionRef.iconPosition() === 'left', classes: this.classNames().iconLeft },
+ { if: this.accordionRef.iconPosition() === 'right', classes: this.classNames().iconRight },
+ { if: this.accordionRef.toggleTrigger() === 'icon', classes: this.classNames().triggerIcon },
+ { if: this.accordionRef.toggleTrigger() === 'header', classes: this.classNames().triggerHeader },
+ ]);
+
+ protected accordionRef = inject(AccordionComponent);
+ protected panelRef = inject(AccordionPanelComponent);
+ protected store = inject(AccordionStore);
+
+ protected expandedIcon: string;
+ protected collapsedIcon: string;
+
+ protected readonly isExpanded = this.store.isExpanded(this.panelRef._id);
+
+ private customIconTemp = contentChild(AccordionHeaderIconTemplateDirective, { read: TemplateRef });
+ private defaultIconTemp = viewChild.required>('defaultIconTemp');
+
+ protected template = computed(
+ () => this.customIconTemp() ?? this.accordionRef._customIconTemp() ?? this.defaultIconTemp()
+ );
+
+ constructor() {
+ super();
+
+ const expandedIcon = this.themeConfig.components.accordion?.templates?.accordionExpandedIcon;
+ const collapsedIcon = this.themeConfig.components.accordion?.templates?.accordionCollapsedIcon;
+ if (!expandedIcon) {
+ throw new Error('`accordionExpandedIcon` has not defined in `ThemeConfig` of selected theme');
+ }
+ if (!collapsedIcon) {
+ throw new Error('`accordionCollapsedIcon` has not defined in `ThemeConfig` of selected theme');
+ }
+
+ this.expandedIcon = expandedIcon;
+ this.collapsedIcon = collapsedIcon;
+ }
+
+ protected onHostClick() {
+ if (this.panelRef.disabled() || this.accordionRef.toggleTrigger() !== 'header') {
+ return;
+ }
+ this.store.toggle(this.panelRef._id);
+ }
+
+ protected toggle() {
+ if (this.panelRef.disabled() || this.accordionRef.toggleTrigger() !== 'icon') {
+ return;
+ }
+ this.store.toggle(this.panelRef._id);
+ }
+}
diff --git a/packages/angular/accordion/src/lib/accordion-panel/accordion-panel.component.html b/packages/angular/accordion/src/lib/accordion-panel/accordion-panel.component.html
new file mode 100644
index 00000000..d7df3ed6
--- /dev/null
+++ b/packages/angular/accordion/src/lib/accordion-panel/accordion-panel.component.html
@@ -0,0 +1,5 @@
+
+
\ No newline at end of file
diff --git a/packages/angular/accordion/src/lib/accordion-panel/accordion-panel.component.scss b/packages/angular/accordion/src/lib/accordion-panel/accordion-panel.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/angular/accordion/src/lib/accordion-panel/accordion-panel.component.ts b/packages/angular/accordion/src/lib/accordion-panel/accordion-panel.component.ts
new file mode 100644
index 00000000..d143e154
--- /dev/null
+++ b/packages/angular/accordion/src/lib/accordion-panel/accordion-panel.component.ts
@@ -0,0 +1,85 @@
+import {
+ afterNextRender,
+ ChangeDetectionStrategy,
+ Component,
+ computed,
+ effect,
+ ElementRef,
+ inject,
+ input,
+ viewChild,
+ ViewEncapsulation,
+} from '@angular/core';
+
+import { _UiBaseComponent } from '@cocokits/angular-core';
+import { Animation, toBooleanOrPresent } from '@cocokits/common-utils';
+
+import { AccordionStore } from '../accordion.store';
+import { getOriginalHeight } from '../accordion.util';
+import { AccordionComponent } from '../accordion/accordion.component';
+
+let NEXT_ID = 1;
+
+@Component({
+ standalone: true,
+ imports: [],
+ selector: 'cck-accordion-panel',
+ templateUrl: './accordion-panel.component.html',
+ styleUrls: ['./accordion-panel.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ host: {
+ '[class]': 'hostClassNames()',
+ },
+})
+/* cspell:ignore */
+export class AccordionPanelComponent extends _UiBaseComponent<'accordionPanel'> {
+ public readonly _id = `cck-accordion-panel-${NEXT_ID++}`;
+ protected readonly componentName = 'accordionPanel';
+ protected extraHostElementClassConditions = computed(() => [
+ { if: this.isExpanded(), classes: this.classNames().expanded },
+ { if: !this.isExpanded(), classes: this.classNames().collapsed },
+ { if: this.disabled(), classes: this.classNames().disabled },
+ ]);
+
+ protected animation!: Animation;
+ private store = inject(AccordionStore);
+ private accordionRef = inject(AccordionComponent);
+ protected isExpanded = this.store.isExpanded(this._id);
+
+ /**
+ * The unique identifier for the accordion panel.
+ * @storybook argType will be overridden by storybook
+ */
+ public value = input(this._id as TValue);
+
+ /**
+ * Whether the panel is disabled.
+ * @storybook argType will be overridden by storybook
+ */
+ public disabled = input(undefined, { transform: toBooleanOrPresent });
+
+ private content = viewChild.required>('content');
+
+ private __onIsExpandedChange = effect(async () => {
+ const isExpanded = this.isExpanded();
+ const height = isExpanded ? getOriginalHeight(this.content().nativeElement) : 0;
+ this.animation.setDimension({ height });
+
+ this.accordionRef.instantAnimation()
+ ? await this.animation.apply()
+ : await this.animation.animate({ easing: cubicBezierEasing, duration: this.accordionRef.animationDuration() });
+
+ if (isExpanded) {
+ this.content().nativeElement.style.height = `auto`;
+ }
+ });
+
+ private __setInitSize = afterNextRender(() => {
+ this.animation = Animation.getOrCreateInstance(this.content().nativeElement);
+ this.animation.setDimension({ height: 0 }).applyImmediately();
+ });
+}
+
+// eslint-disable-next-line no-mixed-operators
+const cubicBezierEasing = (x: number) => 1 - (1 - x) * (1 - x);
diff --git a/packages/angular/accordion/src/lib/accordion.store.ts b/packages/angular/accordion/src/lib/accordion.store.ts
new file mode 100644
index 00000000..94424841
--- /dev/null
+++ b/packages/angular/accordion/src/lib/accordion.store.ts
@@ -0,0 +1,41 @@
+import { computed, Injectable, signal } from '@angular/core';
+
+import { Selection } from '@cocokits/common-utils';
+
+@Injectable()
+export class AccordionStore {
+ private selection = new Selection([], { multiple: false });
+ private _expandedPanelIds = signal([]);
+
+ public expandedPanelIds = this._expandedPanelIds.asReadonly();
+
+ constructor() {
+ this.selection.addChangeEventListener(() => {
+ this._expandedPanelIds.set(this.selection.selected);
+ });
+ }
+
+ public setExpandedPanelIds(ids: string[] | string) {
+ this.selection.setSelection(ids);
+ }
+
+ public setMultiMode(isMultiMode: boolean) {
+ this.selection.updateOptions({ multiple: isMultiMode });
+ }
+
+ public isExpanded(id: string) {
+ return computed(() => this._expandedPanelIds().includes(id));
+ }
+
+ public toggle(id: string) {
+ this.selection.toggle(id);
+ }
+
+ public expand(id: string) {
+ this.selection.select(id);
+ }
+
+ public collapse(id: string) {
+ this.selection.deselect(id);
+ }
+}
diff --git a/packages/angular/accordion/src/lib/accordion.util.ts b/packages/angular/accordion/src/lib/accordion.util.ts
new file mode 100644
index 00000000..43bfefcb
--- /dev/null
+++ b/packages/angular/accordion/src/lib/accordion.util.ts
@@ -0,0 +1,11 @@
+export function getOriginalHeight(element: HTMLElement): number {
+ element.style.opacity = '0';
+ element.style.display = 'block';
+ element.style.height = 'auto';
+
+ const height = element.offsetHeight;
+ element.style.height = '0';
+ element.style.opacity = '1';
+
+ return height;
+}
diff --git a/packages/angular/accordion/src/lib/accordion/accordion.component.html b/packages/angular/accordion/src/lib/accordion/accordion.component.html
new file mode 100644
index 00000000..95a0b70b
--- /dev/null
+++ b/packages/angular/accordion/src/lib/accordion/accordion.component.html
@@ -0,0 +1 @@
+ = input(false);
+
+ /**
+ * The duration of the animation in milliseconds when expanding or collapsing the accordion panels.
+ */
+ public animationDuration: InputSignal = input(300);
+
+ /**
+ * Whether to allow multiple accordion panels to be expanded at the same time.
+ * If set to true, multiple panels can be expanded simultaneously.
+ */
+ public multiMode: InputSignal = input(false);
+
+ /**
+ * The position of the icon in the accordion header.
+ * Can be either 'left' or 'right'.
+ */
+ public iconPosition = input<'left' | 'right'>('right');
+
+ /**
+ * The trigger for toggling the accordion header.
+ * Can be either 'header' or 'icon'.
+ */
+ public toggleTrigger = input<'header' | 'icon'>('header');
+
+ /**
+ * The values of the expanded accordion panels or an array of values in multiple mode.
+ */
+ public expanded = input();
+
+ /**
+ * Emitted when the expanded state of an accordion panel changes.
+ * The emitted value contains the id and index of the expanded panel.
+ */
+ public expandedChange = output();
+
+ /** @internal */
+ public _panelsRef = contentChildren(AccordionPanelComponent);
+
+ /** @internal */
+ public _customIconTemp = contentChild(AccordionHeaderIconTemplateDirective, { read: TemplateRef });
+
+ private __onInputExpandedChange = effect(() => {
+ const expanded = this.expanded();
+ untracked(() => {
+ const ids = toArray(expanded).map((value) => {
+ const panel = this._panelsRef().find((_panel) => _panel.value() === value);
+ if (!panel) {
+ throw new Error(`Can not find accordion panel with value: ${value}`);
+ }
+ return panel._id;
+ });
+ this.accordionStore.setExpandedPanelIds(ids);
+ });
+ });
+
+ private __onStoreExpandedChange = effect(() => {
+ const expandedPanelIds = this.accordionStore.expandedPanelIds();
+ untracked(() => {
+ const expandedValues: TValue[] = expandedPanelIds.map((id) => {
+ const value = this._panelsRef()
+ .find((panel) => panel._id === id)
+ ?.value() as TValue | undefined;
+ if (!value) {
+ throw new Error(`Can not find value for accordion panel with id: ${id}`);
+ }
+
+ return value;
+ });
+
+ this.expandedChange.emit(this.multiMode() ? expandedValues : (expandedValues[0] ?? null));
+ });
+ });
+
+ private __onMultiModeChange = effect(() => {
+ this.accordionStore.setMultiMode(this.multiMode());
+ });
+}
diff --git a/packages/angular/accordion/tsconfig.json b/packages/angular/accordion/tsconfig.json
new file mode 100644
index 00000000..8e62d6db
--- /dev/null
+++ b/packages/angular/accordion/tsconfig.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "target": "es2022",
+ "useDefineForClassFields": false,
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "noImplicitOverride": true,
+ "noPropertyAccessFromIndexSignature": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "files": [],
+ "include": [],
+ "references": [
+ {
+ "path": "./tsconfig.lib.json"
+ }
+ ],
+ "extends": "../../../tsconfig.base.json",
+ "angularCompilerOptions": {
+ "enableI18nLegacyMessageIdFormat": false,
+ "strictInjectionParameters": true,
+ "strictInputAccessModifiers": true,
+ "strictTemplates": true
+ }
+}
diff --git a/packages/angular/accordion/tsconfig.lib.json b/packages/angular/accordion/tsconfig.lib.json
new file mode 100644
index 00000000..f68063a5
--- /dev/null
+++ b/packages/angular/accordion/tsconfig.lib.json
@@ -0,0 +1,12 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../../dist/out-tsc",
+ "declaration": true,
+ "declarationMap": true,
+ "inlineSources": true,
+ "types": []
+ },
+ "exclude": ["src/**/*.spec.ts", "jest.config.ts", "src/**/*.test.ts"],
+ "include": ["src/**/*.ts"]
+}
diff --git a/packages/angular/accordion/tsconfig.lib.prod.json b/packages/angular/accordion/tsconfig.lib.prod.json
new file mode 100644
index 00000000..2a2faa88
--- /dev/null
+++ b/packages/angular/accordion/tsconfig.lib.prod.json
@@ -0,0 +1,9 @@
+{
+ "extends": "./tsconfig.lib.json",
+ "compilerOptions": {
+ "declarationMap": false
+ },
+ "angularCompilerOptions": {
+ "compilationMode": "partial"
+ }
+}
diff --git a/packages/angular/components/package.json b/packages/angular/components/package.json
index 2711091c..362fc2f9 100644
--- a/packages/angular/components/package.json
+++ b/packages/angular/components/package.json
@@ -16,7 +16,8 @@
"@cocokits/angular-utils": "workspace:*",
"@cocokits/common-utils": "workspace:*",
"@cocokits/core": "workspace:*",
- "tslib": "^2.3.0"
+ "tslib": "^2.3.0",
+ "@cocokits/angular-accordion": "workspace:*"
},
"devDependencies": {},
"peerDependencies": {},
diff --git a/packages/common/core/src/lib/class-names/accordion-class-names.ts b/packages/common/core/src/lib/class-names/accordion-class-names.ts
new file mode 100644
index 00000000..9a191ff6
--- /dev/null
+++ b/packages/common/core/src/lib/class-names/accordion-class-names.ts
@@ -0,0 +1,48 @@
+import { generateLayoutClassNameFromElement } from './class-names';
+import { LayoutClassNamesConfig, ThemeConfig, UIBaseComponentProps } from '../model/theme-config.model';
+import { validateUiBaseComponentProps } from '../ui-component-props/ui-component-props';
+
+export const accordionLayoutClassNamesConfig = {
+ componentName: 'accordion',
+ baseSelectorStructure: { block: 'accordion' },
+ elements: {
+ host: {
+ name: 'Host Element',
+ selectorStructure: [],
+ description: 'It will add to the host element of `Accordion` component.',
+ },
+ instantAnimation: {
+ name: 'Host Element',
+ selectorStructure: [{ modifier: 'instant-animation' }],
+ description: `Will be add to the host element, when the collapsing and expanding should not have any animation`,
+ },
+ singleMode: {
+ name: 'Host Element',
+ selectorStructure: [{ modifier: 'single-mode' }],
+ description: `Will be add to the host element, when accordion can expand only one panel`,
+ },
+ multiMode: {
+ name: 'Host Element',
+ selectorStructure: [{ modifier: 'multi-mode' }],
+ description: `Will be add to the host element, when accordion can expand multiple panels`,
+ },
+ },
+} satisfies LayoutClassNamesConfig;
+
+export function getAccordionClassNames(
+ componentProps: UIBaseComponentProps,
+ themeConfig: ThemeConfig
+): Record {
+ validateUiBaseComponentProps(accordionLayoutClassNamesConfig.componentName, componentProps, themeConfig);
+
+ return {
+ host: generateLayoutClassNameFromElement(accordionLayoutClassNamesConfig, 'host', themeConfig, componentProps),
+ instantAnimation: generateLayoutClassNameFromElement(
+ accordionLayoutClassNamesConfig,
+ 'instantAnimation',
+ themeConfig
+ ),
+ singleMode: generateLayoutClassNameFromElement(accordionLayoutClassNamesConfig, 'singleMode', themeConfig),
+ multiMode: generateLayoutClassNameFromElement(accordionLayoutClassNamesConfig, 'multiMode', themeConfig),
+ };
+}
diff --git a/packages/common/core/src/lib/class-names/accordion-header-class-names.ts b/packages/common/core/src/lib/class-names/accordion-header-class-names.ts
new file mode 100644
index 00000000..027ccd6e
--- /dev/null
+++ b/packages/common/core/src/lib/class-names/accordion-header-class-names.ts
@@ -0,0 +1,65 @@
+import { generateLayoutClassNameFromElement } from './class-names';
+import { LayoutClassNamesConfig, ThemeConfig, UIBaseComponentProps } from '../model/theme-config.model';
+import { validateUiBaseComponentProps } from '../ui-component-props/ui-component-props';
+
+export const accordionHeaderLayoutClassNamesConfig = {
+ componentName: 'accordionHeader',
+ baseSelectorStructure: { block: 'accordion-header' },
+ elements: {
+ host: {
+ name: 'Host Element',
+ selectorStructure: [],
+ description: 'It will add to the host element of `AccordionHeader` component.',
+ },
+ iconBtn: {
+ name: 'Icon Button Element',
+ selectorStructure: [{ element: 'icon-btn' }],
+ description: `The Icon button element that contains icon of header`,
+ },
+ iconLeft: {
+ name: 'Host Element',
+ selectorStructure: [{ modifier: 'icon-left' }],
+ description: `Will be add to the host element, when the icon is at left of header element`,
+ },
+ iconRight: {
+ name: 'Host Element',
+ selectorStructure: [{ modifier: 'icon-right' }],
+ description: `Will be add to the host element, when the icon is at right of header element`,
+ },
+ triggerIcon: {
+ name: 'Host Element',
+ selectorStructure: [{ modifier: 'trigger-icon' }],
+ description: `Will be add to the host element, when the icon is used as trigger for expanding/collapsing the panel`,
+ },
+ triggerHeader: {
+ name: 'Host Element',
+ selectorStructure: [{ modifier: 'trigger-header' }],
+ description: `Will be add to the host element, when the header is used as trigger for expanding/collapsing the panel`,
+ },
+ },
+} satisfies LayoutClassNamesConfig;
+
+export function getAccordionHeaderClassNames(
+ componentProps: UIBaseComponentProps,
+ themeConfig: ThemeConfig
+): Record {
+ validateUiBaseComponentProps(accordionHeaderLayoutClassNamesConfig.componentName, componentProps, themeConfig);
+
+ return {
+ host: generateLayoutClassNameFromElement(
+ accordionHeaderLayoutClassNamesConfig,
+ 'host',
+ themeConfig,
+ componentProps
+ ),
+ iconBtn: generateLayoutClassNameFromElement(accordionHeaderLayoutClassNamesConfig, 'iconBtn', themeConfig),
+ iconLeft: generateLayoutClassNameFromElement(accordionHeaderLayoutClassNamesConfig, 'iconLeft', themeConfig),
+ iconRight: generateLayoutClassNameFromElement(accordionHeaderLayoutClassNamesConfig, 'iconRight', themeConfig),
+ triggerIcon: generateLayoutClassNameFromElement(accordionHeaderLayoutClassNamesConfig, 'triggerIcon', themeConfig),
+ triggerHeader: generateLayoutClassNameFromElement(
+ accordionHeaderLayoutClassNamesConfig,
+ 'triggerHeader',
+ themeConfig
+ ),
+ };
+}
diff --git a/packages/common/core/src/lib/class-names/accordion-panel-class-names.ts b/packages/common/core/src/lib/class-names/accordion-panel-class-names.ts
new file mode 100644
index 00000000..a4c81258
--- /dev/null
+++ b/packages/common/core/src/lib/class-names/accordion-panel-class-names.ts
@@ -0,0 +1,60 @@
+import { generateLayoutClassNameFromElement } from './class-names';
+import { LayoutClassNamesConfig, ThemeConfig, UIBaseComponentProps } from '../model/theme-config.model';
+import { validateUiBaseComponentProps } from '../ui-component-props/ui-component-props';
+
+export const accordionPanelLayoutClassNamesConfig = {
+ componentName: 'accordionPanel',
+ baseSelectorStructure: { block: 'accordion-panel' },
+ elements: {
+ host: {
+ name: 'Host Element',
+ selectorStructure: [],
+ description: 'It will add to the host element of `AccordionPanel` component.',
+ },
+ contentWrapper: {
+ name: 'Content Wrapper Element',
+ selectorStructure: [{ element: 'content-wrapper' }],
+ description: `The Wrapper element that contains content of panel`,
+ },
+ // withLazyLoad: {
+ // name: 'Host Element',
+ // selectorStructure: [{ modifier: 'with-lazy-load' }],
+ // description: `Will be add to the host element, when the lazy loading template is available`,
+ // },
+ disabled: {
+ name: 'Host Element',
+ selectorStructure: [{ modifier: 'disabled' }],
+ description: `Will be add to the host element, when the panel is disabled`,
+ },
+ expanded: {
+ name: 'Host Element',
+ selectorStructure: [{ modifier: 'expanded' }],
+ description: `Will be add to the host element, when the panel is expanded`,
+ },
+ collapsed: {
+ name: 'Host Element',
+ selectorStructure: [{ modifier: 'collapsed' }],
+ description: `Will be add to the host element, when the panel is collapsed`,
+ },
+ },
+} satisfies LayoutClassNamesConfig;
+
+export function getAccordionPanelClassNames(
+ componentProps: UIBaseComponentProps,
+ themeConfig: ThemeConfig
+): Record {
+ validateUiBaseComponentProps(accordionPanelLayoutClassNamesConfig.componentName, componentProps, themeConfig);
+
+ return {
+ host: generateLayoutClassNameFromElement(accordionPanelLayoutClassNamesConfig, 'host', themeConfig, componentProps),
+ contentWrapper: generateLayoutClassNameFromElement(
+ accordionPanelLayoutClassNamesConfig,
+ 'contentWrapper',
+ themeConfig
+ ),
+ // withLazyLoad: generateLayoutClassNameFromElement(accordionPanelLayoutClassNamesConfig, 'withLazyLoad', themeConfig),
+ disabled: generateLayoutClassNameFromElement(accordionPanelLayoutClassNamesConfig, 'disabled', themeConfig),
+ expanded: generateLayoutClassNameFromElement(accordionPanelLayoutClassNamesConfig, 'expanded', themeConfig),
+ collapsed: generateLayoutClassNameFromElement(accordionPanelLayoutClassNamesConfig, 'collapsed', themeConfig),
+ };
+}
diff --git a/packages/common/core/src/lib/class-names/class-names.ts b/packages/common/core/src/lib/class-names/class-names.ts
index 94a7089c..63e7fb42 100644
--- a/packages/common/core/src/lib/class-names/class-names.ts
+++ b/packages/common/core/src/lib/class-names/class-names.ts
@@ -1,5 +1,8 @@
import { isNotNullish, recordForEach, safeMergeString } from '@cocokits/common-utils';
+import { getAccordionClassNames } from './accordion-class-names';
+import { getAccordionHeaderClassNames } from './accordion-header-class-names';
+import { getAccordionPanelClassNames } from './accordion-panel-class-names';
import { getAvatarClassNames } from './avatar-class-names';
import { getAvatarGroupClassNames } from './avatar-group-class-names';
import { getAvatarLabelClassNames } from './avatar-label-class-names';
@@ -72,6 +75,9 @@ export const CLASS_NAMES_FN_MAP = {
avatar: getAvatarClassNames,
avatarGroup: getAvatarGroupClassNames,
avatarLabel: getAvatarLabelClassNames,
+ accordion: getAccordionClassNames,
+ accordionHeader: getAccordionHeaderClassNames,
+ accordionPanel: getAccordionPanelClassNames,
};
export function getClassNames(
diff --git a/packages/common/core/src/lib/class-names/layout-class-names-config.ts b/packages/common/core/src/lib/class-names/layout-class-names-config.ts
index a7e979b4..47dbe29b 100644
--- a/packages/common/core/src/lib/class-names/layout-class-names-config.ts
+++ b/packages/common/core/src/lib/class-names/layout-class-names-config.ts
@@ -1,3 +1,6 @@
+import { accordionLayoutClassNamesConfig } from './accordion-class-names';
+import { accordionHeaderLayoutClassNamesConfig } from './accordion-header-class-names';
+import { accordionPanelLayoutClassNamesConfig } from './accordion-panel-class-names';
import { avatarLayoutClassNamesConfig } from './avatar-class-names';
import { avatarGroupLayoutClassNamesConfig } from './avatar-group-class-names';
import { avatarLabelLayoutClassNamesConfig } from './avatar-label-class-names';
@@ -73,4 +76,7 @@ export const layoutClassNamesConfigRecord = {
avatar: avatarLayoutClassNamesConfig,
avatarGroup: avatarGroupLayoutClassNamesConfig,
avatarLabel: avatarLabelLayoutClassNamesConfig,
+ accordion: accordionLayoutClassNamesConfig,
+ accordionHeader: accordionHeaderLayoutClassNamesConfig,
+ accordionPanel: accordionPanelLayoutClassNamesConfig,
};
diff --git a/packages/common/core/src/lib/model/theme-config.model.ts b/packages/common/core/src/lib/model/theme-config.model.ts
index 8194fbef..e86e9378 100644
--- a/packages/common/core/src/lib/model/theme-config.model.ts
+++ b/packages/common/core/src/lib/model/theme-config.model.ts
@@ -56,6 +56,8 @@ export interface ThemeComponentConfig {
dropdownIcon?: ThemeSvgIcon; // Require
optionSelectedIcon?: ThemeSvgIcon; // Optional
chipRemoveIcon?: ThemeSvgIcon; // Require
+ accordionExpandedIcon?: string; // Require
+ accordionCollapsedIcon?: string; // Require
};
}
diff --git a/packages/common/core/src/lib/model/ui-base-components-name.ts b/packages/common/core/src/lib/model/ui-base-components-name.ts
index 4a2e2fab..28734a68 100644
--- a/packages/common/core/src/lib/model/ui-base-components-name.ts
+++ b/packages/common/core/src/lib/model/ui-base-components-name.ts
@@ -9,7 +9,8 @@ export type UIBaseComponentsName =
| IconComponentName
| TabsComponentName
| OverlayComponentName
- | AvatarComponentName;
+ | AvatarComponentName
+ | AccordionComponentName;
type FormFieldComponentName =
| 'formField'
@@ -39,3 +40,4 @@ type IconComponentName = 'svgIcon';
type TabsComponentName = 'tabs' | 'tab' | 'tabLabel';
type OverlayComponentName = 'overlay';
type AvatarComponentName = 'avatar' | 'avatarGroup' | 'avatarLabel';
+type AccordionComponentName = 'accordion' | 'accordionHeader' | 'accordionPanel';
diff --git a/packages/common/icons/src/icons.ts b/packages/common/icons/src/icons.ts
index fa6be80b..51f176d9 100644
--- a/packages/common/icons/src/icons.ts
+++ b/packages/common/icons/src/icons.ts
@@ -172,6 +172,12 @@ const plus = `
`;
+const minus = `
+
+
+`;
+
const warning = `
{
+ return new Promise((resolve) => {
+ this.resolveAnimationPromise = resolve;
+ const _animate = (time: number) => {
+ if (isNullish(this.startTime)) {
+ throw new Error('Start time of animation can not be nullish');
+ }
+
+ const frame = Math.min(1, (time - this.startTime) / this.duration);
+ const progress = this.easing(frame);
+
+ callback(progress);
+
+ if (frame === 1) {
+ this.clearStates();
+ resolve(true);
+ return;
+ }
+
+ this.animationFrameId = requestAnimationFrame(_animate);
+ };
+
+ /**
+ * Initialize Animation
+ *
+ * This section sets up the initial animation frame.
+ * The 'time' parameter represents the current time at the start of the animation cycle.
+ * On the first 'requestAnimationFrame', it initializes the 'startTime' property with this 'time' value.
+ * This setup is crucial for accurately calculating
+ * the progress of the animation in subsequent frames. The animation then proceeds with the '_animate' function call.
+ */
+ this.animationFrameId = requestAnimationFrame((time) => {
+ this.startTime = time;
+ this.animationFrameId = requestAnimationFrame(_animate);
+ });
+ });
+ }
+}
diff --git a/packages/common/utils/src/lib/animation/animation-group.ts b/packages/common/utils/src/lib/animation/animation-group.ts
new file mode 100644
index 00000000..c7ff6caa
--- /dev/null
+++ b/packages/common/utils/src/lib/animation/animation-group.ts
@@ -0,0 +1,144 @@
+/** @module animation */
+
+import { Animation } from './animation';
+import { AnimationGroupConfig } from './animation.model';
+import { AnimationFrameManager } from './animation-frame-manager';
+
+const DEFAULT_CONFIG: AnimationGroupConfig = {
+ disableInstance: false,
+};
+
+/**
+ * AnimationGroup class for managing a group of animations.
+ *
+ * @example
+ * const anim1 = new Animation(element1);
+ * const anim2 = new Animation(element2);
+ * const group = new AnimationGroup([anim1, anim2]);
+ *
+ * anim1.setTranslate({x: 100, y: 0});
+ * anim2.setTranslate({x: 0, y: 100});
+ * group.animate({ duration: 500 });
+ */
+export class AnimationGroup {
+ private readonly config: AnimationGroupConfig;
+
+ private animationDelayTimerId!: ReturnType;
+ private frameManager!: AnimationFrameManager | null;
+
+ private instances = new Set();
+
+ /**
+ * Indicates whether any animation in the group is currently running.
+ */
+ public get isAnimating() {
+ return !!this.frameManager?.isAnimating;
+ }
+
+ constructor(instances: Animation[] = [], config: Partial = {}) {
+ this.config = { ...DEFAULT_CONFIG, ...config };
+ instances.forEach((instance) => this.add(instance));
+ }
+
+ /**
+ * Adds an animation instance to the group.
+ *
+ * @param instance - The Animation instance to add.
+ * @example
+ * const anim = new Animation(element);
+ * const group = new AnimationGroup();
+ * group.add(anim);
+ */
+ public add(instance: Animation) {
+ const animation = instance instanceof Animation ? instance : Animation.getOrCreateInstance(instance);
+ animation._disableAnimate = this.config.disableInstance;
+ this.instances.add(animation);
+ }
+
+ /**
+ * Removes an animation instance from the group.
+ *
+ * @param instance - The Animation instance to remove.
+ * @example
+ * const anim = new Animation(element);
+ * const group = new AnimationGroup([anim]);
+ * group.delete(anim);
+ */
+ public delete(instance: Animation) {
+ const animation = instance instanceof Animation ? instance : Animation.getOrCreateInstance(instance);
+ this.instances.delete(animation);
+ }
+
+ /**
+ * Stops all animations in the group.
+ */
+ public stopAnimation() {
+ this.instances.forEach((animation) => animation.stopAnimation());
+ clearTimeout(this.animationDelayTimerId);
+ this.frameManager?.cancel();
+ this.frameManager = null;
+ }
+
+ /**
+ * Applies all style changes to the DOM immediately for all animations in the group.
+ */
+ public applyImmediately() {
+ this.instances.forEach((animation) => animation.applyImmediately());
+ }
+
+ /**
+ * Applies all style changes to the DOM on the next requestAnimationFrame for all animations in the group.
+ *
+ * @returns A promise that resolves to true when the changes are applied.
+ */
+ public apply() {
+ return new Promise((resolve) => {
+ this.stopAnimation();
+ requestAnimationFrame(() => {
+ this.applyImmediately();
+ resolve(true);
+ });
+ });
+ }
+
+ /**
+ * Animates all style changes to the DOM for all animations in the group.
+ *
+ * @param options - Animation options including duration, easing, and delay.
+ * @returns A promise that resolves to true if the animation state is completed, otherwise false.
+ */
+ public async animate({ duration = 100, easing = (x: number) => x, delay = 0 } = {}): Promise {
+ if (duration <= 0) {
+ return this.apply();
+ }
+
+ this.stopAnimation();
+
+ return new Promise(async (resolve) => {
+ // Handel Delay
+ if (delay > 0) {
+ this.animationDelayTimerId = setTimeout(async () => {
+ const animateResult = await this.animate({ duration, easing });
+ resolve(animateResult);
+ }, delay);
+
+ return;
+ }
+
+ const onAnimateFrame = Array.from(this.instances).map((animation) => animation._getAnimationFrameCallback(true));
+ const hasValuesChanged = onAnimateFrame.some((callback) => callback !== null);
+
+ if (!hasValuesChanged) {
+ resolve(true);
+ return;
+ }
+
+ this.frameManager = new AnimationFrameManager(duration, easing);
+ const animateResult = await this.frameManager.animate((progress) =>
+ onAnimateFrame.forEach((onProgress) => onProgress?.(progress))
+ );
+ this.frameManager = null;
+ resolve(animateResult);
+ });
+ }
+}
diff --git a/packages/common/utils/src/lib/animation/animation-store.ts b/packages/common/utils/src/lib/animation/animation-store.ts
new file mode 100644
index 00000000..84680429
--- /dev/null
+++ b/packages/common/utils/src/lib/animation/animation-store.ts
@@ -0,0 +1,33 @@
+/** @module _hidden */
+
+import { deepClone } from '../uncategorized/deep-clone';
+import { deepMerge } from '../uncategorized/deep-merge';
+
+// TODO: It's duplicate between core and utils, but we can not use core in utils, so we need to keep it here.
+export type DeepPartial = {
+ [P in keyof T]?: T[P] extends object ? DeepPartial : T[P];
+};
+
+export class AnimationStore {
+ private _value: T;
+
+ public get value() {
+ return this._value;
+ }
+
+ constructor(value: T) {
+ this._value = deepClone(value);
+ }
+
+ public set(value: T) {
+ this._value = deepClone(value);
+ }
+
+ public deepSet(value: DeepPartial) {
+ this.set(deepMerge(this.value, value));
+ }
+
+ public clone(): T {
+ return deepClone(this.value);
+ }
+}
diff --git a/packages/common/utils/src/lib/animation/animation.model.ts b/packages/common/utils/src/lib/animation/animation.model.ts
new file mode 100644
index 00000000..10adf7ed
--- /dev/null
+++ b/packages/common/utils/src/lib/animation/animation.model.ts
@@ -0,0 +1,41 @@
+/** @module animation */
+
+export interface Coordinate {
+ x: number;
+ y: number;
+}
+
+export interface TransformProperty extends Coordinate {
+ scale: number;
+ scaleX?: number;
+ scaleY?: number;
+ rotateX?: number;
+ rotateY?: number;
+ rotateZ?: number;
+}
+
+export interface Dimension {
+ width: number;
+ height: number;
+}
+
+export interface AnimationProperties {
+ transform: TransformProperty;
+ dimension: Dimension;
+ opacity: number;
+}
+
+export interface AnimateResult {
+ state: AnimateState;
+ changes?: Partial; // only `Animating` state has changes
+}
+
+export enum AnimateState {
+ Animating = 'animating',
+ Completed = 'completed',
+ Canceled = 'canceled',
+}
+
+export interface AnimationGroupConfig {
+ disableInstance: boolean;
+}
diff --git a/packages/common/utils/src/lib/animation/animation.ts b/packages/common/utils/src/lib/animation/animation.ts
new file mode 100644
index 00000000..55ab0631
--- /dev/null
+++ b/packages/common/utils/src/lib/animation/animation.ts
@@ -0,0 +1,388 @@
+/** @module animation */
+import { lastValueFrom, Observable, ReplaySubject } from 'rxjs';
+
+import { AnimateResult, AnimateState, AnimationProperties, Coordinate, Dimension } from './animation.model';
+import { getAnimationValueOnProgress, getTransform2dValue } from './animation.util';
+import { AnimationFrameManager } from './animation-frame-manager';
+import { AnimationStore } from './animation-store';
+import { getObjectDiff } from '../differs/simple-object-diff';
+import { hasNotValue } from '../ensure/ensure-value';
+import { deepClone } from '../uncategorized/deep-clone';
+import { clamp } from '../uncategorized/math';
+
+/** @ignore */
+export type Callback = (data: T) => void;
+
+interface AnimationState {
+ properties: AnimationProperties;
+ previousProperties: AnimationProperties;
+}
+
+/**
+ * Animation class for handling element animations.
+ *
+ * @example
+ * // For always creating new instances:
+ * const anim1 = new Animation(element1); // Returns a new instance for element1
+ * const anim2 = new Animation(element1); // Returns another new instance for element1
+ *
+ * // For singleton instances per HTMLElement, use the getOrCreateInstance method:
+ * const anim1 = Animation.getOrCreateInstance(element1); // Returns a new instance for element1, as none exists yet
+ * const anim2 = Animation.getOrCreateInstance(element1); // Returns the existing instance for element1, anim1 and anim2 are now the same
+ * const anim3 = Animation.getOrCreateInstance(element2); // Returns a new instance for element2, as none exists yet
+ */
+export class Animation {
+ private static instances: Map = new Map();
+ private callbacks = new Set>();
+
+ private state: AnimationStore;
+ private frameManager!: AnimationFrameManager | null;
+
+ private element: HTMLElement;
+
+ private animationDelayTimerId!: ReturnType;
+
+ /**
+ * Current animation properties.
+ */
+ public get value() {
+ return this.state.value.properties;
+ }
+
+ /**
+ * Previous animation properties before the last update.
+ */
+ public get actualValue() {
+ return this.state.value.previousProperties;
+ }
+
+ /**
+ * Indicates whether the animation is currently running.
+ */
+ public get isAnimating() {
+ return !!this.frameManager?.isAnimating;
+ }
+
+ /** @ignore */
+ public _disableAnimate = false;
+
+ constructor(element: HTMLElement) {
+ this.element = element;
+ Animation.instances.set(element, this);
+
+ const currentOpacity = window.getComputedStyle(element).opacity;
+ const properties: AnimationProperties = {
+ transform: { x: 0, y: 0, scale: 1, rotateX: 0, rotateY: 0 },
+ dimension: {
+ width: element.offsetWidth,
+ height: element.offsetHeight,
+ },
+ opacity: currentOpacity === '' ? 1 : Number(currentOpacity),
+ };
+
+ this.state = new AnimationStore({
+ properties,
+ previousProperties: deepClone(properties),
+ isAnimating: false,
+ });
+ }
+
+ private emit() {
+ this.callbacks.forEach((fn) => fn(this.value));
+ }
+
+ /**
+ * Returns the singleton instance of Animation for a given element or create a new one if it doesn't exist.
+ * This method ensures that only one instance of Animation exists per HTMLElement.
+ * Yoy can use it on different code to make sure all instances are sync with each other.
+ */
+ public static getOrCreateInstance(element: HTMLElement): Animation {
+ if (!Animation.instances.has(element)) {
+ Animation.instances.set(element, new Animation(element));
+ }
+ return Animation.instances.get(element) as Animation;
+ }
+
+ // region --- Values ---
+ /**
+ * Adds a listener for value changes.
+ */
+ public addValueChangeListener(fn: Callback) {
+ this.callbacks.add(fn);
+ }
+
+ /**
+ * Removes a listener for value changes.
+ */
+ public removeValueChangeListener(fn: Callback) {
+ this.callbacks.delete(fn);
+ }
+
+ /**
+ * Adds translation values to the current transform.
+ *
+ * @param transform - The translation values to add.
+ * @example
+ * anim.addTranslate({ x: 50, y: 100 });
+ */
+ public addTranslate({ x = 0, y = 0 }: Partial) {
+ const transform = {
+ x: this.state.value.properties.transform.x + x,
+ y: this.state.value.properties.transform.y + y,
+ };
+ this.state.deepSet({ properties: { transform } });
+ return this;
+ }
+
+ /**
+ * Sets translation values for the current transform.
+ *
+ * @param transform - The translation values to set.
+ * @example
+ * anim.setTranslate({ x: 100, y: 50 });
+ */
+ public setTranslate(transform: Partial) {
+ const x = transform.x ?? this.state.value.properties.transform.x;
+ const y = transform.y ?? this.state.value.properties.transform.y;
+ this.state.deepSet({ properties: { transform: { x, y } } });
+ return this;
+ }
+
+ /**
+ * Adds dimension values to the current dimension.
+ *
+ * @param dimension - The dimension values to add.
+ * @example
+ * anim.addDimension({ width: 50, height: 100 });
+ */
+ public addDimension({ width = 0, height = 0 }: Partial) {
+ const dimension = {
+ width: this.state.value.properties.dimension.width + width,
+ height: this.state.value.properties.dimension.height + height,
+ };
+ this.state.deepSet({ properties: { dimension } });
+ return this;
+ }
+
+ /**
+ * Sets dimension values for the current dimension.
+ *
+ * @param dimension - The dimension values to set.
+ * @example
+ * anim.setDimension({ width: 200, height: 300 });
+ */
+ public setDimension(dimension: Partial) {
+ const width = dimension.width ?? this.state.value.properties.dimension.width;
+ const height = dimension.height ?? this.state.value.properties.dimension.height;
+ this.state.deepSet({ properties: { dimension: { width, height } } });
+ return this;
+ }
+
+ /**
+ * Flips the element horizontally.
+ */
+ public flipX() {
+ const rotateX = this.state.value.properties.transform.rotateX === 180 ? 0 : 180;
+ this.state.deepSet({ properties: { transform: { rotateX } } });
+ return this;
+ }
+
+ /**
+ * Flips the element vertically.
+ */
+ public flipY() {
+ const rotateY = this.state.value.properties.transform.rotateY === 180 ? 0 : 180;
+ this.state.deepSet({ properties: { transform: { rotateY } } });
+ return this;
+ }
+
+ /**
+ * Sets the scale of the element.
+ */
+ public setScale(scale: number | undefined | null) {
+ if (hasNotValue(scale)) {
+ return this;
+ }
+ this.state.deepSet({ properties: { transform: { scale: scale as number } } });
+ return this;
+ }
+
+ /**
+ * Sets the opacity of the element.
+ */
+ public setOpacity(opacity: number | undefined | null) {
+ if (hasNotValue(opacity)) {
+ return this;
+ }
+ const boundedOpacity = clamp(opacity as number, [0, 1]);
+ this.state.deepSet({ properties: { opacity: boundedOpacity } });
+ return this;
+ }
+
+ // endregion
+
+ // region --- animate ----
+
+ /**
+ * Stops the current animation.
+ */
+ public stopAnimation() {
+ clearTimeout(this.animationDelayTimerId);
+ this.frameManager?.cancel();
+ this.frameManager = null;
+ }
+
+ /**
+ * Apply all style changes to the DOM immediately.
+ * @return The changes that applied to the DOM
+ */
+ public applyImmediately(): Partial {
+ const changesValues = getObjectDiff(this.state.value.previousProperties, this.state.value.properties);
+
+ if (changesValues.transform !== undefined) {
+ this.element.style.transform = getTransform2dValue(this.state.value.properties.transform);
+ }
+
+ if (changesValues.dimension?.width !== undefined) {
+ this.element.style.width = `${this.state.value.properties.dimension.width}px`;
+ }
+
+ if (changesValues.dimension?.height !== undefined) {
+ this.element.style.height = `${this.state.value.properties.dimension.height}px`;
+ }
+
+ if (changesValues.opacity !== undefined) {
+ this.element.style.opacity = String(this.state.value.properties.opacity);
+ }
+
+ if (Object.keys(changesValues).length > 0) {
+ this.emit();
+ }
+
+ this.state.deepSet({ previousProperties: deepClone(this.state.value.properties) });
+
+ return changesValues;
+ }
+
+ /**
+ * Apply all style changes to the DOM on the next requestAnimationFrame.
+ * @return A promise of changes that applied to the DOM
+ */
+ public apply(): Promise> {
+ if (this._disableAnimate) {
+ return Promise.resolve({});
+ }
+
+ return new Promise>((resolve) => {
+ this.stopAnimation();
+ requestAnimationFrame(() => {
+ const changes = this.applyImmediately();
+ resolve(changes);
+ });
+ });
+ }
+
+ /** @ignore */
+ public _getAnimationFrameCallback(isAnimationGroup = false) {
+ const valueOnStart = deepClone(this.state.value.previousProperties);
+ const valueOnEnd = deepClone(this.state.value.properties);
+
+ if (Object.keys(getObjectDiff(valueOnStart, valueOnEnd)).length === 0) {
+ return null;
+ }
+
+ return (progress: number): Partial => {
+ this.state.deepSet({
+ properties: {
+ transform: {
+ x: getAnimationValueOnProgress(progress, valueOnStart.transform.x, valueOnEnd.transform.x),
+ y: getAnimationValueOnProgress(progress, valueOnStart.transform.y, valueOnEnd.transform.y),
+ scale: getAnimationValueOnProgress(progress, valueOnStart.transform.scale, valueOnEnd.transform.scale),
+ rotateX: getAnimationValueOnProgress(
+ progress,
+ valueOnStart.transform.rotateX,
+ valueOnEnd.transform.rotateX
+ ),
+ rotateY: getAnimationValueOnProgress(
+ progress,
+ valueOnStart.transform.rotateY,
+ valueOnEnd.transform.rotateY
+ ),
+ },
+ dimension: {
+ width: getAnimationValueOnProgress(progress, valueOnStart.dimension.width, valueOnEnd.dimension.width),
+ height: getAnimationValueOnProgress(progress, valueOnStart.dimension.height, valueOnEnd.dimension.height),
+ },
+ opacity: getAnimationValueOnProgress(progress, valueOnStart.opacity, valueOnEnd.opacity),
+ },
+ });
+
+ return isAnimationGroup || !this._disableAnimate ? this.applyImmediately() : {};
+ };
+ }
+
+ /**
+ * Animate all style changes to the DOM.
+ * @param options - Animation options including duration, easing, and delay.
+ * @return An Observable of changes on each frame, that apply to the DOM
+ */
+ public animate$({ duration = 100, easing = (x: number) => x, delay = 0 } = {}): Observable {
+ const changesSubject$ = new ReplaySubject();
+ const changes$ = changesSubject$.asObservable();
+
+ if (duration <= 0) {
+ this.apply().then((changes) => {
+ changesSubject$.next({ state: AnimateState.Animating, changes });
+ changesSubject$.next({ state: AnimateState.Completed });
+ changesSubject$.complete();
+ });
+ return changes$;
+ }
+
+ this.stopAnimation();
+
+ if (delay > 0) {
+ this.animationDelayTimerId = setTimeout(async () => {
+ this.animate$({ duration, easing }).subscribe({
+ next: (animationResult) => changesSubject$.next(animationResult),
+ complete: () => changesSubject$.complete(),
+ });
+ }, delay);
+
+ return changes$;
+ }
+
+ const onAnimateFrame = this._getAnimationFrameCallback();
+
+ if (!onAnimateFrame) {
+ changesSubject$.next({ state: AnimateState.Completed });
+ changesSubject$.complete();
+ return changes$;
+ }
+
+ this.frameManager = new AnimationFrameManager(duration, easing);
+ this.frameManager
+ .animate((progress) => {
+ const changes = onAnimateFrame(progress);
+ changesSubject$.next({ state: AnimateState.Animating, changes });
+ })
+ .then((isCompleted) => {
+ this.frameManager = null;
+ changesSubject$.next({ state: isCompleted ? AnimateState.Completed : AnimateState.Canceled });
+ changesSubject$.complete();
+ });
+
+ return changes$;
+ }
+
+ /**
+ * Animate all style changes to the DOM.
+ * @param options - Animation options including duration, easing, and delay.
+ * @return A promise that resolves to true if the animation state is completed, otherwise false
+ */
+ public async animate({ duration = 100, easing = (x: number) => x, delay = 0 } = {}): Promise {
+ const result = await lastValueFrom(this.animate$({ duration, easing, delay }));
+ return result.state === AnimateState.Completed;
+ }
+ // endregion
+}
diff --git a/packages/common/utils/src/lib/animation/animation.util.ts b/packages/common/utils/src/lib/animation/animation.util.ts
new file mode 100644
index 00000000..bea76738
--- /dev/null
+++ b/packages/common/utils/src/lib/animation/animation.util.ts
@@ -0,0 +1,38 @@
+/** @module _hidden */
+
+import { TransformProperty } from './animation.model';
+import { isNotNullish } from '../ensure/ensure-nullish';
+
+export function getTransform2dValue({
+ x = 0,
+ y = 0,
+ scale = 1,
+ scaleX,
+ scaleY,
+ rotateX,
+ rotateY,
+}: Partial): string {
+ const transformations = [
+ `translate(${x}px, ${y}px)`,
+ isNotNullish(rotateX) ? `rotateX(${rotateX}deg)` : '',
+ isNotNullish(rotateY) ? `rotateY(${rotateY}deg)` : '',
+ `scale(${scale}, ${scale})`,
+ isNotNullish(scaleX) ? `scaleX(${scaleX})` : '',
+ isNotNullish(scaleY) ? `scaleY(${scaleY})` : '',
+ ];
+
+ return transformations.filter(Boolean).join(' ');
+}
+
+/**
+ * No unit tests; implicitly tested via public functions that use this private helper.
+ */
+export function getAnimationValueOnProgress(progress: number, startValue?: number, endValue?: number) {
+ if (startValue === undefined || endValue === undefined) {
+ return startValue ?? endValue;
+ }
+
+ const progressFactor = endValue - startValue;
+ const valueOnProgress = progress * progressFactor;
+ return startValue + valueOnProgress;
+}
diff --git a/packages/common/utils/src/lib/differs/simple-object-diff.ts b/packages/common/utils/src/lib/differs/simple-object-diff.ts
new file mode 100644
index 00000000..35841d6f
--- /dev/null
+++ b/packages/common/utils/src/lib/differs/simple-object-diff.ts
@@ -0,0 +1,45 @@
+/** @module differs */
+
+/**
+ * Computes the difference between two objects, returning a new object that represents the changes.
+ *
+ * @template T - The type of the objects being compared.
+ * @param obj1 - The first object to compare.
+ * @param obj2 - The second object to compare.
+ * @returns A partial object containing the differences between `obj1` and `obj2`.
+ *
+ * @example
+ * const obj1 = { a: 1, b: { c: 2 }, d: 4 };
+ * const obj2 = { a: 1, b: { c: 3 }, e: 5 };
+ * const diff = getObjectDiff(obj1, obj2);
+ * console.log(diff); // Output: { b: { c: 3 }, d: null, e: 5 }
+ */
+export function getObjectDiff>(obj1: T, obj2: T): Partial {
+ const diff: Record = {};
+
+ for (const key in obj1) {
+ if (key in obj2) {
+ const areBothObjects = typeof obj1[key] === 'object' && typeof obj2[key] === 'object';
+ const isDifferent = obj1[key] !== obj2[key];
+
+ if (areBothObjects) {
+ const nestedDiff = getObjectDiff(obj1[key], obj2[key]);
+ if (Object.keys(nestedDiff).length > 0) {
+ diff[key] = nestedDiff;
+ }
+ } else if (isDifferent) {
+ diff[key] = obj2[key];
+ }
+ } else {
+ diff[key] = null;
+ }
+ }
+
+ for (const key in obj2) {
+ if (!(key in obj1)) {
+ diff[key] = obj2[key];
+ }
+ }
+
+ return diff as Partial;
+}
diff --git a/packages/common/utils/src/lib/selection/selection.ts b/packages/common/utils/src/lib/selection/selection.ts
index d6b7ed94..5b18e961 100644
--- a/packages/common/utils/src/lib/selection/selection.ts
+++ b/packages/common/utils/src/lib/selection/selection.ts
@@ -1,6 +1,7 @@
/** @module selection */
import { ArrayLikeDiff } from '../differs/array-like-differs';
+import { isNullish } from '../ensure/ensure-nullish';
import { CustomEventListener } from '../event-listener/custom-event-listener';
type TrackByFunction = (item: T) => any;
@@ -104,9 +105,13 @@ export class Selection {
private isMultiple: boolean;
private onlyEmitOnValueChange: boolean;
private readonly selectionSet: Set;
-
private differs: ArrayLikeDiff;
+ /**
+ * Get a list of selected items.
+ */
+ public selected = [] as T[];
+
/**
* Creates a new `Selection` instance.
*
@@ -120,6 +125,7 @@ export class Selection {
this.isMultiple = options.multiple ?? false;
this.onlyEmitOnValueChange = options.onlyEmitOnValueChange ?? true;
this.selectionSet = new Set(selectedValues);
+ this.selected = Array.from(this.selectionSet);
this.differs = new ArrayLikeDiff(this.selectionSet, { trackBy: options.trackBy });
}
@@ -153,7 +159,7 @@ export class Selection {
*/
public updateOptions(options: Partial>) {
this.isMultiple = options.multiple ?? this.isMultiple;
- this.verifyValueAssignment(Array.from(this.selectionSet));
+ this.verifyValueAssignment(this.selected);
this.differs = new ArrayLikeDiff(this.selectionSet, { trackBy: options.trackBy });
}
@@ -213,9 +219,10 @@ export class Selection {
/**
* Get a list of selected items.
+ * @deprecated Use `selected` instead.
*/
getSelected() {
- return Array.from(this.selectionSet);
+ return this.selected;
}
/**
@@ -225,6 +232,7 @@ export class Selection {
*/
clear(config?: SelectionUpdateConfig): void {
this.selectionSet.clear();
+ this.selected = [];
this.diffChangesAndEmit(config);
}
@@ -247,9 +255,11 @@ export class Selection {
if (!this.isMultiple) {
this.selectionSet.clear();
+ this.selected = [];
}
valuesArray.forEach((value) => this.selectionSet.add(value));
+ this.selected = Array.from(this.selectionSet);
this.diffChangesAndEmit(config);
}
@@ -271,6 +281,7 @@ export class Selection {
const valuesArray = Array.isArray(values) ? values : [values];
this.verifyValueAssignment(valuesArray);
valuesArray.forEach((value) => this.selectionSet.delete(value));
+ this.selected = Array.from(this.selectionSet);
this.diffChangesAndEmit(config);
}
@@ -288,12 +299,13 @@ export class Selection {
* console.log(selection.getSelected()); // [5, 6, 7]
* ```
*/
- setSelection(values: T | T[], config?: SelectionUpdateConfig): boolean | void {
- const valuesArray = Array.isArray(values) ? values : [values];
+ setSelection(values: T | T[] | null | undefined, config?: SelectionUpdateConfig): boolean | void {
+ const valuesArray = Array.isArray(values) ? values : isNullish(values) ? [] : [values];
this.verifyValueAssignment(valuesArray);
this.selectionSet.clear();
valuesArray.forEach((value) => this.selectionSet.add(value));
+ this.selected = Array.from(this.selectionSet);
this.diffChangesAndEmit(config);
}
diff --git a/packages/common/utils/src/lib/uncategorized/math.ts b/packages/common/utils/src/lib/uncategorized/math.ts
new file mode 100644
index 00000000..6b915b2c
--- /dev/null
+++ b/packages/common/utils/src/lib/uncategorized/math.ts
@@ -0,0 +1,24 @@
+/** @module math */
+
+/**
+ * Clamps a number within the specified bounds.
+ *
+ * @param value - The number to clamp.
+ * @param bounds - An array containing the minimum and maximum bounds [minBound, maxBound].
+ * @returns The clamped value.
+ *
+ * @example
+ * const clampedValue = clamp(10, [0, 5]);
+ * console.log(clampedValue); // Output: 5
+ *
+ * @example
+ * const clampedValue = clamp(-3, [0, 5]);
+ * console.log(clampedValue); // Output: 0
+ *
+ * @example
+ * const clampedValue = clamp(3, [0, 5]);
+ * console.log(clampedValue); // Output: 3
+ */
+export function clamp(value: number, [minBound, maxBound]: [number, number]): number {
+ return Math.max(minBound, Math.min(value, maxBound));
+}
diff --git a/packages/internal/common-kits-doc/stories/contributing/kits-doc-structure.mdx b/packages/internal/common-kits-doc/stories/contributing/kits-doc-structure.mdx
index e3db0b80..28f48a98 100644
--- a/packages/internal/common-kits-doc/stories/contributing/kits-doc-structure.mdx
+++ b/packages/internal/common-kits-doc/stories/contributing/kits-doc-structure.mdx
@@ -110,8 +110,10 @@ All stories must use the StoriesMeta interface, imported from:
Under the `parameters` object, define the `cckAddon` configuration:
- `componentName:` The name of the component (required).
-- `subcomponentNames:` Optional. Use this if the component has subcomponents that do not require their own documentation page (e.g., a prefix component used within a form field).
-- `subcomponentArgsTypes:` Optional. Use this to override subcomponent APIs if Storybook cannot generate them correctly.
+- `subcomponents:` Optional. Use this if the component has subcomponents that do not require their own documentation page (e.g., a prefix component used within a form field).
+ - `name`: The name of subComponent, if set to `null` then no documentation will be generate in API doc page.
+ - `argsType`: Optional. Use this to override subcomponent APIs if Storybook cannot generate them correctly.
+ - `description:` Optional. THe description of the component that should be shown under API tab
### Custom Story Parameters
CocoKits provides custom configurations for stories. Each story must use the `StoryObj` interface from the appropriate framework-specific addon.
diff --git a/packages/internal/common-kits-doc/stories/utils/_hidden.mdx b/packages/internal/common-kits-doc/stories/utils/_hidden.mdx
new file mode 100644
index 00000000..271077a0
--- /dev/null
+++ b/packages/internal/common-kits-doc/stories/utils/_hidden.mdx
@@ -0,0 +1,361 @@
+
+[//]: # (Do not edit directly)
+[//]: # (Generated by the Cocokits TypeDoc custom theme)
+
+import { Meta } from '@storybook/addon-docs';
+import { MdxPage } from '@cocokits/storybook-addon-theme';
+
+export const tocItems = [{"id":"selection_animationframemanager","name":"AnimationFrameManager"},{"id":"selection_animationstoret","name":"AnimationStore"},{"id":"selection_deeppartialt","name":"DeepPartial"},{"id":"selection_getanimationvalueonprogress","name":"getAnimationValueOnProgress()"},{"id":"selection_gettransform2dvalue","name":"getTransform2dValue()"}];
+
+
+
+
+## AnimationFrameManager
+
+### Accessors
+
+#### isAnimating
+
+```ts
+get isAnimating(): boolean
+```
+
+Check if Animation is Active
+
+Returns true if the animation is currently in progress.
+
+##### Returns
+
+`boolean`
+
+### Methods
+
+#### animate()
+
+```ts
+animate(callback: (progress: number) => void): Promise
+```
+
+Animate with Callback
+
+Executes the animation using a callback function to report progress.
+
+##### Parameters
+
+
+
+
+
+Parameter
+Type
+Description
+
+
+
+
+
+
+`callback`
+
+
+
+
+`(progress: number) => void`
+
+
+
+
+The function to call with the progress of the animation.
+
+
+
+
+
+
`
+
+A promise that resolves when the animation is either completed or cancelled.
+
+#### cancel()
+
+```ts
+cancel(): void
+```
+
+Cancel Animation
+
+This method stops the ongoing animation.
+
+##### Returns
+
+`void`
+
+***
+
+
+## AnimationStore\
+
+### Type Parameters
+
+
+
+
+
+Type Parameter
+
+
+
+
+
+
+`T`
+
+
+
+
+
+
): void
+```
+
+##### Parameters
+
+
+
+
+
+Parameter
+Type
+
+
+
+
+
+
+`value`
+
+
+
+
+`DeepPartial`
+
+
+
+
+
+
+
+
+
+Parameter
+Type
+
+
+
+
+
+
+`value`
+
+
+
+
+`T`
+
+
+
+
+
+
+## DeepPartial\
+
+```ts
+type DeepPartial: { [P in keyof T]?: T[P] extends object ? DeepPartial : T[P] };
+```
+
+### Type Parameters
+
+
+
+
+
+Type Parameter
+
+
+
+
+
+
+`T`
+
+
+
+
+
+
+## getAnimationValueOnProgress()
+
+```ts
+function getAnimationValueOnProgress(
+ progress: number,
+ startValue?: number,
+ endValue?: number): number
+```
+
+No unit tests; implicitly tested via public functions that use this private helper.
+
+### Parameters
+
+
+
+
+
+Parameter
+Type
+
+
+
+
+
+
+`progress`
+
+
+
+
+`number`
+
+
+
+
+
+
+`startValue`?
+
+
+
+
+`number`
+
+
+
+
+
+
+`endValue`?
+
+
+
+
+`number`
+
+
+
+
+
+
+
+### Returns
+
+`number`
+
+***
+
+
diff --git a/packages/internal/common-kits-doc/stories/utils/animation.mdx b/packages/internal/common-kits-doc/stories/utils/animation.mdx
new file mode 100644
index 00000000..1c6a4732
--- /dev/null
+++ b/packages/internal/common-kits-doc/stories/utils/animation.mdx
@@ -0,0 +1,1463 @@
+
+[//]: # (Do not edit directly)
+[//]: # (Generated by the Cocokits TypeDoc custom theme)
+
+import { Meta } from '@storybook/addon-docs';
+import { MdxPage } from '@cocokits/storybook-addon-theme';
+
+export const tocItems = [{"id":"selection_animatestate","name":"AnimateState"},{"id":"selection_animation","name":"Animation"},{"id":"selection_animationgroup","name":"AnimationGroup"},{"id":"selection_animateresult","name":"AnimateResult"},{"id":"selection_animationgroupconfig","name":"AnimationGroupConfig"},{"id":"selection_animationproperties","name":"AnimationProperties"},{"id":"selection_coordinate","name":"Coordinate"},{"id":"selection_dimension","name":"Dimension"},{"id":"selection_transformproperty","name":"TransformProperty"}];
+
+
+
+
+## AnimateState
+
+### Enumeration Members
+
+
+
+
+
+Enumeration Member
+Value
+
+
+
+
+
+
+`Animating`
+
+
+
+
+`"animating"`
+
+
+
+
+
+
+`Canceled`
+
+
+
+
+`"canceled"`
+
+
+
+
+
+
+`Completed`
+
+
+
+
+`"completed"`
+
+
+
+
+
+
+
+***
+
+
+## Animation
+
+Animation class for handling element animations.
+
+### Example
+
+```ts
+// For always creating new instances:
+const anim1 = new Animation(element1); // Returns a new instance for element1
+const anim2 = new Animation(element1); // Returns another new instance for element1
+
+// For singleton instances per HTMLElement, use the getOrCreateInstance method:
+const anim1 = Animation.getOrCreateInstance(element1); // Returns a new instance for element1, as none exists yet
+const anim2 = Animation.getOrCreateInstance(element1); // Returns the existing instance for element1, anim1 and anim2 are now the same
+const anim3 = Animation.getOrCreateInstance(element2); // Returns a new instance for element2, as none exists yet
+```
+
+### Accessors
+
+#### actualValue
+
+```ts
+get actualValue(): AnimationProperties
+```
+
+Previous animation properties before the last update.
+
+##### Returns
+
+`AnimationProperties`
+
+#### isAnimating
+
+```ts
+get isAnimating(): boolean
+```
+
+Indicates whether the animation is currently running.
+
+##### Returns
+
+`boolean`
+
+#### value
+
+```ts
+get value(): AnimationProperties
+```
+
+Current animation properties.
+
+##### Returns
+
+`AnimationProperties`
+
+### Methods
+
+#### addDimension()
+
+```ts
+addDimension(dimension: Partial
): Animation
+```
+
+Adds dimension values to the current dimension.
+
+##### Parameters
+
+
+
+
+
+Parameter
+Type
+Description
+
+
+
+
+
+
+`dimension`
+
+
+
+
+`Partial`
+
+
+
+
+The dimension values to add.
+
+
+
+
+
+
): Animation
+```
+
+Adds translation values to the current transform.
+
+##### Parameters
+
+
+
+
+
+Parameter
+Type
+Description
+
+
+
+
+
+
+`transform`
+
+
+
+
+`Partial`
+
+
+
+
+The translation values to add.
+
+
+
+
+
+
): void
+```
+
+Adds a listener for value changes.
+
+##### Parameters
+
+
+
+
+
+Parameter
+Type
+
+
+
+
+
+
+`fn`
+
+
+
+
+`Callback`
+
+
+
+
+
+
+```
+
+Animate all style changes to the DOM.
+
+##### Parameters
+
+
+
+
+
+Parameter
+Type
+Description
+
+
+
+
+
+
+`options`
+
+
+
+
+`object`
+
+
+
+
+Animation options including duration, easing, and delay.
+
+
+
+
+
+
+`options.delay`
+
+
+
+
+`number`
+
+
+
+
+‐
+
+
+
+
+
+
+`options.duration`
+
+
+
+
+`number`
+
+
+
+
+‐
+
+
+
+
+
+
+`options.easing`
+
+
+
+
+`(x: number) => number`
+
+
+
+
+‐
+
+
+
+
+
+
`
+
+A promise that resolves to true if the animation state is completed, otherwise false
+
+#### animate$()
+
+```ts
+animate$(options: {
+ delay: 0;
+ duration: 100;
+ easing: (x: number) => number;
+ }): Observable
+```
+
+Animate all style changes to the DOM.
+
+##### Parameters
+
+
+
+
+
+Parameter
+Type
+Description
+
+
+
+
+
+
+`options`
+
+
+
+
+`object`
+
+
+
+
+Animation options including duration, easing, and delay.
+
+
+
+
+
+
+`options.delay`
+
+
+
+
+`number`
+
+
+
+
+‐
+
+
+
+
+
+
+`options.duration`
+
+
+
+
+`number`
+
+
+
+
+‐
+
+
+
+
+
+
+`options.easing`
+
+
+
+
+`(x: number) => number`
+
+
+
+
+‐
+
+
+
+
+
+
`
+
+An Observable of changes on each frame, that apply to the DOM
+
+#### apply()
+
+```ts
+apply(): Promise>
+```
+
+Apply all style changes to the DOM on the next requestAnimationFrame.
+
+##### Returns
+
+`Promise>`
+
+A promise of changes that applied to the DOM
+
+#### applyImmediately()
+
+```ts
+applyImmediately(): Partial
+```
+
+Apply all style changes to the DOM immediately.
+
+##### Returns
+
+`Partial`
+
+The changes that applied to the DOM
+
+#### flipX()
+
+```ts
+flipX(): Animation
+```
+
+Flips the element horizontally.
+
+##### Returns
+
+`Animation`
+
+#### flipY()
+
+```ts
+flipY(): Animation
+```
+
+Flips the element vertically.
+
+##### Returns
+
+`Animation`
+
+#### removeValueChangeListener()
+
+```ts
+removeValueChangeListener(fn: Callback): void
+```
+
+Removes a listener for value changes.
+
+##### Parameters
+
+
+
+
+
+Parameter
+Type
+
+
+
+
+
+
+`fn`
+
+
+
+
+`Callback`
+
+
+
+
+
+
): Animation
+```
+
+Sets dimension values for the current dimension.
+
+##### Parameters
+
+
+
+
+
+Parameter
+Type
+Description
+
+
+
+
+
+
+`dimension`
+
+
+
+
+`Partial`
+
+
+
+
+The dimension values to set.
+
+
+
+
+
+
+
+
+
+Parameter
+Type
+
+
+
+
+
+
+`opacity`
+
+
+
+
+`number`
+
+
+
+
+
+
+
+
+
+Parameter
+Type
+
+
+
+
+
+
+`scale`
+
+
+
+
+`number`
+
+
+
+
+
+
): Animation
+```
+
+Sets translation values for the current transform.
+
+##### Parameters
+
+
+
+
+
+Parameter
+Type
+Description
+
+
+
+
+
+
+`transform`
+
+
+
+
+`Partial`
+
+
+
+
+The translation values to set.
+
+
+
+
+
+
+
+
+
+Parameter
+Type
+
+
+
+
+
+
+`element`
+
+
+
+
+`HTMLElement`
+
+
+
+
+
+
+## AnimationGroup
+
+AnimationGroup class for managing a group of animations.
+
+### Example
+
+```ts
+const anim1 = new Animation(element1);
+const anim2 = new Animation(element2);
+const group = new AnimationGroup([anim1, anim2]);
+
+anim1.setTranslate({x: 100, y: 0});
+anim2.setTranslate({x: 0, y: 100});
+group.animate({ duration: 500 });
+```
+
+### Accessors
+
+#### isAnimating
+
+```ts
+get isAnimating(): boolean
+```
+
+Indicates whether any animation in the group is currently running.
+
+##### Returns
+
+`boolean`
+
+### Methods
+
+#### add()
+
+```ts
+add(instance: Animation): void
+```
+
+Adds an animation instance to the group.
+
+##### Parameters
+
+
+
+
+
+Parameter
+Type
+Description
+
+
+
+
+
+
+`instance`
+
+
+
+
+`Animation`
+
+
+
+
+The Animation instance to add.
+
+
+
+
+
+
+
+##### Returns
+
+`void`
+
+##### Example
+
+```ts
+const anim = new Animation(element);
+const group = new AnimationGroup();
+group.add(anim);
+```
+
+#### animate()
+
+```ts
+animate(options: {
+ delay: 0;
+ duration: 100;
+ easing: (x: number) => number;
+ }): Promise
+```
+
+Animates all style changes to the DOM for all animations in the group.
+
+##### Parameters
+
+
+
+
+
+Parameter
+Type
+Description
+
+
+
+
+
+
+`options`
+
+
+
+
+`object`
+
+
+
+
+Animation options including duration, easing, and delay.
+
+
+
+
+
+
+`options.delay`
+
+
+
+
+`number`
+
+
+
+
+‐
+
+
+
+
+
+
+`options.duration`
+
+
+
+
+`number`
+
+
+
+
+‐
+
+
+
+
+
+
+`options.easing`
+
+
+
+
+`(x: number) => number`
+
+
+
+
+‐
+
+
+
+
+
+
`
+
+A promise that resolves to true if the animation state is completed, otherwise false.
+
+#### apply()
+
+```ts
+apply(): Promise
+```
+
+Applies all style changes to the DOM on the next requestAnimationFrame for all animations in the group.
+
+##### Returns
+
+`Promise`
+
+A promise that resolves to true when the changes are applied.
+
+#### applyImmediately()
+
+```ts
+applyImmediately(): void
+```
+
+Applies all style changes to the DOM immediately for all animations in the group.
+
+##### Returns
+
+`void`
+
+#### delete()
+
+```ts
+delete(instance: Animation): void
+```
+
+Removes an animation instance from the group.
+
+##### Parameters
+
+
+
+
+
+Parameter
+Type
+Description
+
+
+
+
+
+
+`instance`
+
+
+
+
+`Animation`
+
+
+
+
+The Animation instance to remove.
+
+
+
+
+
+
+## AnimateResult
+
+### Properties
+
+
+
+
+
+Property
+Type
+
+
+
+
+
+
+`changes?`
+
+
+
+
+`Partial`
+
+
+
+
+
+
+`state`
+
+
+
+
+`AnimateState`
+
+
+
+
+
+
+
+***
+
+
+## AnimationGroupConfig
+
+### Properties
+
+
+
+
+
+Property
+Type
+
+
+
+
+
+
+`disableInstance`
+
+
+
+
+`boolean`
+
+
+
+
+
+
+
+***
+
+
+## AnimationProperties
+
+### Properties
+
+
+
+
+
+Property
+Type
+
+
+
+
+
+
+`dimension`
+
+
+
+
+`Dimension`
+
+
+
+
+
+
+`opacity`
+
+
+
+
+`number`
+
+
+
+
+
+
+`transform`
+
+
+
+
+`TransformProperty`
+
+
+
+
+
+
+
+***
+
+
+## Coordinate
+
+### Extended by
+
+- `TransformProperty`
+
+### Properties
+
+
+
+
+
+Property
+Type
+
+
+
+
+
+
+`x`
+
+
+
+
+`number`
+
+
+
+
+
+
+`y`
+
+
+
+
+`number`
+
+
+
+
+
+
+
+***
+
+
+## Dimension
+
+### Properties
+
+
+
+
+
+Property
+Type
+
+
+
+
+
+
+`height`
+
+
+
+
+`number`
+
+
+
+
+
+
+`width`
+
+
+
+
+`number`
+
+
+
+
+
+
+
+***
+
+
diff --git a/packages/internal/common-kits-doc/stories/utils/differs.mdx b/packages/internal/common-kits-doc/stories/utils/differs.mdx
index 37f425a5..de677303 100644
--- a/packages/internal/common-kits-doc/stories/utils/differs.mdx
+++ b/packages/internal/common-kits-doc/stories/utils/differs.mdx
@@ -5,7 +5,7 @@
import { Meta } from '@storybook/addon-docs';
import { MdxPage } from '@cocokits/storybook-addon-theme';
-export const tocItems = [{"id":"selection_arraylikedifft","name":"ArrayLikeDiff"},{"id":"selection_arraylikediffchanget","name":"ArrayLikeDiffChange"},{"id":"selection_arraylikediffoptionst","name":"ArrayLikeDiffOptions"}];
+export const tocItems = [{"id":"selection_arraylikedifft","name":"ArrayLikeDiff"},{"id":"selection_arraylikediffchanget","name":"ArrayLikeDiffChange"},{"id":"selection_arraylikediffoptionst","name":"ArrayLikeDiffOptions"},{"id":"selection_getobjectdiff","name":"getObjectDiff()"}];
@@ -501,5 +501,108 @@ const options: ArrayLikeDiffOptions = {
+***
+
+
+## getObjectDiff()
+
+```ts
+function getObjectDiff
(obj1: T, obj2: T): Partial
+```
+
+Computes the difference between two objects, returning a new object that represents the changes.
+
+### Type Parameters
+
+
+
+
+
+Type Parameter
+Description
+
+
+
+
+
+
+`T` *extends* `Record`
+
+
+
+
+The type of the objects being compared.
+
+
+
+
+
+
+
+
+
+Parameter
+Type
+Description
+
+
+
+
+
+
+`obj1`
+
+
+
+
+`T`
+
+
+
+
+The first object to compare.
+
+
+
+
+
+
+`obj2`
+
+
+
+
+`T`
+
+
+
+
+The second object to compare.
+
+
+
+
+
+
`
+
+A partial object containing the differences between `obj1` and `obj2`.
+
+### Example
+
+```ts
+const obj1 = { a: 1, b: { c: 2 }, d: 4 };
+const obj2 = { a: 1, b: { c: 3 }, e: 5 };
+const diff = getObjectDiff(obj1, obj2);
+console.log(diff); // Output: { b: { c: 3 }, d: null, e: 5 }
+```
+
diff --git a/packages/internal/common-kits-doc/stories/utils/math.mdx b/packages/internal/common-kits-doc/stories/utils/math.mdx
new file mode 100644
index 00000000..d81190d6
--- /dev/null
+++ b/packages/internal/common-kits-doc/stories/utils/math.mdx
@@ -0,0 +1,96 @@
+
+[//]: # (Do not edit directly)
+[//]: # (Generated by the Cocokits TypeDoc custom theme)
+
+import { Meta } from '@storybook/addon-docs';
+import { MdxPage } from '@cocokits/storybook-addon-theme';
+
+export const tocItems = [{"id":"selection_clamp","name":"clamp()"}];
+
+
+
+
+## clamp()
+
+```ts
+function clamp(value: number, bounds: [number, number]): number
+```
+
+Clamps a number within the specified bounds.
+
+### Parameters
+
+
+
+
+
+Parameter
+Type
+Description
+
+
+
+
+
+
+`value`
+
+
+
+
+`number`
+
+
+
+
+The number to clamp.
+
+
+
+
+
+
+`bounds`
+
+
+
+
+`[number, number]`
+
+
+
+
+An array containing the minimum and maximum bounds [minBound, maxBound].
+
+
+
+
+
+
+
+### Returns
+
+`number`
+
+The clamped value.
+
+### Examples
+
+```ts
+const clampedValue = clamp(10, [0, 5]);
+console.log(clampedValue); // Output: 5
+```
+
+```ts
+const clampedValue = clamp(-3, [0, 5]);
+console.log(clampedValue); // Output: 0
+```
+
+```ts
+const clampedValue = clamp(3, [0, 5]);
+console.log(clampedValue); // Output: 3
+```
+
+
diff --git a/packages/internal/common-kits-doc/stories/utils/observer.mdx b/packages/internal/common-kits-doc/stories/utils/observer.mdx
index 81cc5657..a8042c53 100644
--- a/packages/internal/common-kits-doc/stories/utils/observer.mdx
+++ b/packages/internal/common-kits-doc/stories/utils/observer.mdx
@@ -348,7 +348,7 @@ observer$.subscribe(({ entries, observer }) => {
## mutationObserver$()
```ts
-function mutationObserver$(elems: Element | Element[] | Document, config: MutationObserverInit): Observable
+function mutationObserver$(elems: Element | Document | Element[], config: MutationObserverInit): Observable
```
Creates an observable that emits changes from a `MutationObserver` whenever
@@ -383,7 +383,7 @@ individually, and changes are emitted as they occur.
-`Element | Element[] | Document`
+`Element | Document | Element[]`
diff --git a/packages/internal/common-kits-doc/stories/utils/selection.mdx b/packages/internal/common-kits-doc/stories/utils/selection.mdx
index 307e4eeb..4b5389c2 100644
--- a/packages/internal/common-kits-doc/stories/utils/selection.mdx
+++ b/packages/internal/common-kits-doc/stories/utils/selection.mdx
@@ -149,6 +149,45 @@ An optional object to configure the selection behavior.
`Selection`
+### Properties
+
+
+
+
+
+Property
+Modifier
+Type
+Description
+
+
+
+
+
+
+`selected`
+
+
+
+
+`public`
+
+
+
+
+`T[]`
+
+
+
+
+Get a list of selected items.
+
+
+
+
+
+
(null);
+
+ useLayoutEffect(() => {
+ // Ensure the content is rendered after the component mounts
+ if (contentRef.current) {
+ contentRef.current.querySelectorAll('table').forEach((table) => {
+ table.classList.add('arg-type-table', 'arg-type-table--full-width');
+ });
+ }
+ }, [children]);
// const [html, setHtml] = useState('');
// useEffect(() => {
@@ -48,7 +58,7 @@ export const DocPageMarkdown = ({ children }: DocPageMarkdownProps) => {
// );
return (
-
+
{children as string}
);
diff --git a/packages/internal/storybook-addon-theme/src/lib/features/story-control/story-single-control.tsx b/packages/internal/storybook-addon-theme/src/lib/features/story-control/story-single-control.tsx
index a3c6361f..1dd19289 100644
--- a/packages/internal/storybook-addon-theme/src/lib/features/story-control/story-single-control.tsx
+++ b/packages/internal/storybook-addon-theme/src/lib/features/story-control/story-single-control.tsx
@@ -6,6 +6,7 @@ import { getInstance, hasNotValue } from '@cocokits/common-utils';
import { FormField, Option, Select, SelectPreview } from '@cocokits/react-form-field';
import { StoryControlStore } from './preview-story-args.store';
+import { StoreState } from './story-control.model';
import { AddonParameters, AddonParametersControlSelect, AddonParametersControlType } from '../../model/addon.model';
import { useTheme } from '../../utils/use-preview-theme';
@@ -25,33 +26,33 @@ export function StorySingleControl({ story, argName }: StorySingleControlProps)
const parameters = story.parameters as AddonParameters;
const themeComponentConfig = theme.themeConfig.components[parameters.cckAddon.componentName];
- if (!themeComponentConfig || !(argName in themeComponentConfig)) {
+ const targetAddonParametersControl = parameters.cckAddon.controls?.find((_control) => {
+ return _control.type === AddonParametersControlType.SelectThemeConfig
+ ? _control.prop === argName
+ : _control.storyArgKey === argName;
+ });
+
+ if(targetAddonParametersControl?.type === AddonParametersControlType.SelectThemeConfig) {
+ if (themeComponentConfig && argName in themeComponentConfig) {
+ const { targetControl, value } = getThemeConfigArgsTypeConfig(state, { story, argName });
+ setControl(targetControl);
+ setSelectedValue(value);
+ return;
+ }
setControl(undefined);
setSelectedValue(undefined);
return;
}
- const targetControl = state.controls.find((_control) => _control.storyArgKey === argName);
- const value = state.args[argName] as string;
-
- if (!targetControl) {
- throw new Error(`CckControl not found for story ID: ${story.id} and arg name: ${argName}`);
- }
-
- if (targetControl.type !== AddonParametersControlType.Select) {
- throw new Error(
- `singleControls accept only Select control type, but got ${targetControl.type} for story ID: ${story.id} and arg name: ${argName}`
- );
- }
-
- if (hasNotValue(value)) {
- throw new Error(
- `The argument '${argName}' does not exist in the CckControls configuration for story ID '${story.id}'.`
- );
+ if(targetAddonParametersControl?.type === AddonParametersControlType.Select) {
+ const value = state.args[argName] as string;
+ setControl(targetAddonParametersControl);
+ setSelectedValue(value);
+ return;
}
- setControl(targetControl);
- setSelectedValue(value);
+ setControl(undefined);
+ setSelectedValue(undefined);
});
return () => {
@@ -96,3 +97,26 @@ const StyledSelectPreviewType = styled.span`
color: var(--cck-doc-color-font-3);
margin-right: 8px;
`;
+
+function getThemeConfigArgsTypeConfig(state: StoreState, { story, argName }: StorySingleControlProps) {
+ const targetControl = state.controls.find((_control) => _control.storyArgKey === argName);
+ const value = state.args[argName] as string;
+
+ if (!targetControl) {
+ throw new Error(`CckControl not found for story ID: ${story.id} and arg name: ${argName}`);
+ }
+
+ if (targetControl.type !== AddonParametersControlType.Select) {
+ throw new Error(
+ `singleControls accept only Select control type, but got ${targetControl.type} for story ID: ${story.id} and arg name: ${argName}`
+ );
+ }
+
+ if (hasNotValue(value)) {
+ throw new Error(
+ `The argument '${argName}' does not exist in the CckControls configuration for story ID '${story.id}'.`
+ );
+ }
+
+ return { targetControl, value };
+}
diff --git a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api-table.tsx b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api-table.tsx
index e7211d11..2682db63 100644
--- a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api-table.tsx
+++ b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api-table.tsx
@@ -2,6 +2,7 @@ import { Markdown } from '@storybook/addon-docs';
import styled from 'styled-components';
import { StoryDocPageComponentArgType } from './story-doc-page-api.model';
+import { parseTypeDefinition } from './story-doc-page-api.utils';
interface StoryDocPageApiTableProps {
hideDefault?: boolean;
@@ -26,13 +27,11 @@ export function StoryDocPageApiTable({ hideDefault = false, argTypes }: StoryDoc
{argType.name}
- {argType.type.startsWith('{') ? (
- /* If the value is ab object such as `{'{ rounded: boolean }'}`, it will be displayed as a single code block. */
- {argType.type}
- ) : (
- /* If the type is multi such as `value1 | value2`, it will be displayed as separate code blocks. */
- argType.type.split('|').map((type) => {type})
- )}
+ {parseTypeDefinition(argType.type).map((type, i) => (
+ ') ? 'wrap' : ''}>
+ {type}
+
+ ))}
{!hideDefault && (
diff --git a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.model.ts b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.model.ts
index 16893b6f..cb24f08c 100644
--- a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.model.ts
+++ b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.model.ts
@@ -6,9 +6,9 @@ export interface StoryDocPageArgTypes {
}
export interface StoryDocPageComponentArgTypeGroup {
- props: StoryDocPageComponentArgType[];
- events: StoryDocPageComponentArgType[];
- methods: StoryDocPageComponentArgType[];
+ props?: StoryDocPageComponentArgType[];
+ events?: StoryDocPageComponentArgType[];
+ methods?: StoryDocPageComponentArgType[];
}
export interface StoryDocPageComponentArgType {
diff --git a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.tsx b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.tsx
index 8e77f194..7d3ee4e2 100644
--- a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.tsx
+++ b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.tsx
@@ -22,9 +22,9 @@ export function StoryDocPageAPI({ argTypes, themeName, ngTemplateMD }: StoryDocP
const isEmpty =
!argType.argTypeGroup ||
Object.keys(argType.argTypeGroup).length === 0 ||
- (argType.argTypeGroup.props.length === 0 &&
- argType.argTypeGroup.events.length === 0 &&
- argType.argTypeGroup.methods.length === 0);
+ (argType.argTypeGroup.props?.length === 0 &&
+ argType.argTypeGroup.events?.length === 0 &&
+ argType.argTypeGroup.methods?.length === 0);
return (
diff --git a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.utils.ts b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.utils.ts
index 180098df..248e032f 100644
--- a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.utils.ts
+++ b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page-api.utils.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
import { PreparedMeta, PreparedStory, StrictInputType } from '@storybook/types';
import { deepMerge, recordReduceDeepMerge, reduceDeepMerge } from '@cocokits/common-utils';
@@ -66,9 +67,9 @@ export function getArgTypesApiList(
const name = subcomponent.displayName ?? subcomponent.name;
const argTypes = deepMerge(
parameters.docs.extractArgTypes?.(subcomponent) ?? {},
- parameters.cckAddon.subcomponentArgsTypes?.[name] ?? {}
+ parameters.cckAddon.subcomponents?.[name]?.argsTypes ?? {}
);
- const subcomponentName = parameters.cckAddon.subcomponentNames?.[name];
+ const subcomponentName = parameters.cckAddon.subcomponents?.[name]?.name;
// Not all subcomponents are part of UIBaseComponents (e.g., MenuTriggerDirective).
// If a component has the value 'null', we skip taking the config from the theme and only show the APIs from the component.
if (subcomponentName === undefined) {
@@ -114,7 +115,7 @@ export function getComponentArgTypes({
}
const componentName = getStoryComponentName(componentRef);
const uiBaseComponentName = parameters.cckAddon.componentName;
- const overrideArgsType = parameters.cckAddon.subcomponentArgsTypes?.[componentName] ?? {};
+ const overrideArgsType = parameters.cckAddon.subcomponents?.[componentName]?.argsTypes ?? {};
if (!uiBaseComponentName) {
throw new Error(`Component name is missing in the story parameters for story: ${componentName}`);
@@ -316,3 +317,86 @@ function getValueWithoutCompodocIssue(value: string | unknown): string {
return _value;
}
+
+/**
+ * Parses a TypeScript type definition string into an array of individual types.
+ * This handles complex nested structures including functions, generics, and union types.
+ * Removes unnecessary outer parentheses from type definitions.
+ *
+ * @param {string} typeStrRaw - The TypeScript type definition string (e.g. "string | number | boolean")
+ * @returns {string[]} An array of individual types (e.g. ["string", "number", "boolean"])
+ *
+ * @example
+ * // Returns ["string", "number"]
+ * parseTypeDefinition("string | number")
+ *
+ * @example
+ * // Returns ["string", "number"] - removes unnecessary parentheses
+ * parseTypeDefinition("(string | number)")
+ *
+ * @example
+ * // Returns ["TValue", "TValue[]"]
+ * parseTypeDefinition("TValue | TValue[]")
+ *
+ * @example
+ * // Function types are preserved
+ * // Returns ["(value: TValue | TValue[] | null) => void"]
+ * parseTypeDefinition("(value: TValue | TValue[] | null) => void")
+ */
+export function parseTypeDefinition(typeStrRaw: string): string[] {
+ // Trim and remove leading pipe if present
+ let typeStr = typeStrRaw.trim();
+ if (typeStr.startsWith('|')) {
+ typeStr = typeStr.substring(1).trim();
+ }
+
+ // Prepare result array and tracking variables
+ const result = [];
+ let current = ''; // Builds the current type token
+ let depth = 0; // Tracks nesting level of brackets/braces/parentheses
+
+ // Process each character individually to properly handle nested structures
+ for (let i = 0; i < typeStr.length; i++) {
+ const char = typeStr[i];
+
+ // Detect opening brackets/braces/parentheses to track nesting depth
+ if ('({[<'.includes(char)) {
+ depth++; // Increase nesting level
+ current += char;
+ }
+ // Detect closing brackets/braces/parentheses to decrease nesting depth
+ else if (')}]>'.includes(char)) {
+ depth--; // Decrease nesting level
+ current += char;
+ }
+ // Split on pipe character only when at the root level (depth=0)
+ else if (char === '|' && depth === 0) {
+ // Only add non-empty types to the result array
+ if (current.trim()) {
+ result.push(removeUnnecessaryParentheses(current.trim()));
+ }
+ current = ''; // Reset current token builder
+ }
+ // For all other characters, keep building the current token
+ else {
+ current += char;
+ }
+ }
+
+ // Add the last type token after the loop completes
+ if (current.trim()) {
+ result.push(removeUnnecessaryParentheses(current.trim()));
+ }
+
+ return result;
+}
+
+/**
+ * Removes unnecessary parentheses wrapping a type.
+ * Only removes parentheses if they're surrounding the entire type and aren't part of a function type.
+ */
+function removeUnnecessaryParentheses(typeStrRaw: string): string {
+ const type = typeStrRaw.trim();
+ // While the type starts with '(' and ends with ')', check if we can remove them
+ return type.startsWith('(') && type.endsWith(')') ? type.slice(1, -1) : type;
+}
diff --git a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page.utils.tsx b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page.utils.tsx
index ca897d16..bea02900 100644
--- a/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page.utils.tsx
+++ b/packages/internal/storybook-addon-theme/src/lib/features/story-doc-page/story-doc-page.utils.tsx
@@ -71,13 +71,13 @@ export function getStylingProps(preparedMeta: PreparedMeta, parameters: AddonPar
name.startsWith('_') ||
// Not all subcomponents are part of UIBaseComponents (e.g., MenuTriggerDirective).
// If a component has the value 'null', we skip it because it has no styling.
- parameters.cckAddon.subcomponentNames?.[name] === null
+ parameters.cckAddon.subcomponents?.[name]?.name === null
);
})
.map((subcomponentRef) => {
// displayName for react and name for Angular
const name = subcomponentRef.displayName ?? subcomponentRef.name;
- const uIBaseComponentName = parameters.cckAddon.subcomponentNames?.[name];
+ const uIBaseComponentName = parameters.cckAddon.subcomponents?.[name]?.name;
if (!uIBaseComponentName) {
throw new Error(
`Subcomponent name is missing in the story parameters for story ID: ${preparedMeta.id}/${name}`
diff --git a/packages/internal/storybook-addon-theme/src/lib/model/addon.model.ts b/packages/internal/storybook-addon-theme/src/lib/model/addon.model.ts
index 6fe011c9..6e395aaf 100644
--- a/packages/internal/storybook-addon-theme/src/lib/model/addon.model.ts
+++ b/packages/internal/storybook-addon-theme/src/lib/model/addon.model.ts
@@ -58,26 +58,37 @@ export interface AddonParametersMeta {
export interface CckAddonStoriesMeta {
componentName: UIBaseComponentsName;
- /**
- * Will be use to detect the themeConfig for an component to generate API table.
- * If the value of a subComponent is null, means it's not part of themes and we will skip it from styling tab,
- * and for API tab we will only show the API of the component.
- */
- subcomponentNames?: Record;
- /**
- * Override the default argTypes for the story.
- * Can be used to override the subcomponent argsType.
- * Angular storybook has no ways to get the subcomponent argTypes. and it use compoDoc to get the argTypes.
- * ```
- * const resolved = useOf('meta');
- * const subComponentArgType = resolved.preparedMeta.parameters['docs'].extractArgTypes(resolved.preparedMeta.subcomponent[0]);
- * ```
- *
- * overrideArgsType will merge the subcomponent argTypes with the overrideArgsType.
- * The key is component name and the value is the argTypes.
- */
- subcomponentArgsTypes?: Record>;
+ subcomponents?: Record<
+ string,
+ {
+ /**
+ * Will be use to detect the themeConfig for an component to generate API table.
+ * If the value of a subComponent is null, means it's not part of themes and we will skip it from styling tab,
+ * and for API tab we will only show the API of the component.
+ */
+ name: UIBaseComponentsName | null;
+
+ /**
+ * The short deception of sub component. can be string or markdown format
+ */
+ description?: string;
+
+ /**
+ * Override the default argTypes for the story.
+ * Can be used to override the subcomponent argsType.
+ * Angular storybook has no ways to get the subcomponent argTypes. and it use compoDoc to get the argTypes.
+ * ```
+ * const resolved = useOf('meta');
+ * const subComponentArgType = resolved.preparedMeta.parameters['docs'].extractArgTypes(resolved.preparedMeta.subcomponent[0]);
+ * ```
+ *
+ * overrideArgsType will merge the subcomponent argTypes with the overrideArgsType.
+ * The key is component name and the value is the argTypes.
+ */
+ argsTypes?: DeepPartial;
+ }
+ >;
/**
* Ref to markdown file of ng-template that will be used on his component.
* If it's provided, the doc page show template section with the content of the markdown file.
diff --git a/packages/internal/storybook-addon-theme/src/lib/utils/control.config.ts b/packages/internal/storybook-addon-theme/src/lib/utils/control.config.ts
index ac78ed9a..499f0172 100644
--- a/packages/internal/storybook-addon-theme/src/lib/utils/control.config.ts
+++ b/packages/internal/storybook-addon-theme/src/lib/utils/control.config.ts
@@ -17,6 +17,17 @@ export const customText = (
type: AddonParametersControlType.Text,
});
+export const customNumber = (
+ displayName: string,
+ defaultValue: number,
+ storyArgKey?: string
+): AddonParametersControl => ({
+ displayName,
+ default: defaultValue,
+ storyArgKey: storyArgKey ?? camelCase(displayName),
+ type: AddonParametersControlType.Number,
+});
+
export const customSelect = (
displayName: string,
options: string[],
@@ -30,6 +41,17 @@ export const customSelect = (
type: AddonParametersControlType.Select,
});
+export const customBoolean = (
+ displayName: string,
+ defaultValue?: boolean,
+ storyArgKey?: string
+): AddonParametersControl => ({
+ displayName,
+ default: defaultValue ?? false,
+ storyArgKey: storyArgKey ?? camelCase(displayName),
+ type: AddonParametersControlType.Boolean,
+});
+
export const text = (defaultValue: string): AddonParametersControl => ({
displayName: 'Text',
default: defaultValue,
diff --git a/packages/internal/storybook-addon-theme/src/styles/arg-types-table.scss b/packages/internal/storybook-addon-theme/src/styles/arg-types-table.scss
index 4448c0a0..2980e85c 100644
--- a/packages/internal/storybook-addon-theme/src/styles/arg-types-table.scss
+++ b/packages/internal/storybook-addon-theme/src/styles/arg-types-table.scss
@@ -66,9 +66,13 @@
& code {
white-space: nowrap;
- font: var(--cck-doc-text-xs-regular);
+ font: var(--cck-doc-text-sm-regular);
color: var(--cck-doc-color-font-2);
padding: 0 6px;
+
+ &.wrap {
+ white-space: normal;
+ }
}
}
diff --git a/packages/internal/storybook-addon-theme/src/styles/cck-themes.scss b/packages/internal/storybook-addon-theme/src/styles/cck-themes-components.scss
similarity index 50%
rename from packages/internal/storybook-addon-theme/src/styles/cck-themes.scss
rename to packages/internal/storybook-addon-theme/src/styles/cck-themes-components.scss
index ce8ec7c0..56e1533e 100644
--- a/packages/internal/storybook-addon-theme/src/styles/cck-themes.scss
+++ b/packages/internal/storybook-addon-theme/src/styles/cck-themes-components.scss
@@ -1,12 +1,10 @@
@use '../../../../themes/cocokits/src/styles' as cocokitsTheme;
@use '../../../../themes/frames-x/src/styles' as framesXTheme;
-@forward '../../../../themes/cocokits/src/token/css/tokens';
-@forward '../../../../themes/frames-x/src/token/css/tokens';
-:where([data-cck-theme-name='cocokits']) {
+[data-cck-theme-name='cocokits'] {
@include cocokitsTheme.components_all;
}
-:where([data-cck-theme-name='frames-x']) {
+[data-cck-theme-name='frames-x'] {
@include framesXTheme.components_all;
}
diff --git a/packages/internal/storybook-addon-theme/src/styles/cck-themes-tokens.scss b/packages/internal/storybook-addon-theme/src/styles/cck-themes-tokens.scss
new file mode 100644
index 00000000..83b22f54
--- /dev/null
+++ b/packages/internal/storybook-addon-theme/src/styles/cck-themes-tokens.scss
@@ -0,0 +1,2 @@
+@forward '../../../../themes/cocokits/src/token/css/tokens';
+@forward '../../../../themes/frames-x/src/token/css/tokens';
diff --git a/packages/internal/storybook-addon-theme/src/styles/preview-styles.scss b/packages/internal/storybook-addon-theme/src/styles/preview-styles.scss
index a114b961..54379dc4 100644
--- a/packages/internal/storybook-addon-theme/src/styles/preview-styles.scss
+++ b/packages/internal/storybook-addon-theme/src/styles/preview-styles.scss
@@ -1,10 +1,10 @@
@use '../token/css/tokens.min.css';
@use './storybook';
@use './typography';
-@use './cck-themes';
@use './arg-types-table';
@use './collection-modes.selector-table';
@use './story-decorator-wrapper';
@use './mdx-page';
+@use './stories-styles';
@use '../theme' as cck-doc;
@include cck-doc.components_all;
diff --git a/packages/internal/storybook-addon-theme/src/styles/stories-styles.scss b/packages/internal/storybook-addon-theme/src/styles/stories-styles.scss
new file mode 100644
index 00000000..66354def
--- /dev/null
+++ b/packages/internal/storybook-addon-theme/src/styles/stories-styles.scss
@@ -0,0 +1,50 @@
+.cck-doc-story__radio-selection-group {
+ display: flex;
+ justify-content: center;
+ gap: 8px;
+}
+
+.cck-doc-story__radio-selection {
+ width: 32px;
+ height: 32px;
+ border: 1px solid var(--cck-doc-color-border-3);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--cck-doc-color-font-1);
+ font: var(--cck-doc-text-sm-light);
+ cursor: pointer;
+ user-select: none;
+}
+
+.cck-doc-story__radio-selection--selected {
+ background-color: var(--cck-doc-color-bg-selected-2);
+}
+
+.cck-doc-story__button--basic {
+ padding: 0 16px;
+ background-color: transparent;
+ color: var(--cck-doc-color-font-1);
+ gap: 8px;
+ height: 40px;
+ align-items: center;
+ border: none;
+ border-radius: var(--cck-doc-radius-sm);
+ box-sizing: border-box;
+ cursor: pointer;
+ display: flex;
+ font: var(--cck-doc-text-sm-medium);
+ justify-content: center;
+ margin: 0;
+ min-width: 80px;
+ outline: transparent;
+
+ &:hover {
+ background-color: var(--cck-doc-color-bg-hover-2);
+ }
+}
+
+.cck-doc-story__header {
+ width: 100%;
+}
diff --git a/packages/react/accordion/.eslintrc.json b/packages/react/accordion/.eslintrc.json
new file mode 100644
index 00000000..25dad472
--- /dev/null
+++ b/packages/react/accordion/.eslintrc.json
@@ -0,0 +1,11 @@
+{
+ "extends": ["plugin:@nx/react", "../../../.eslintrc.json"],
+ "ignorePatterns": ["!**/*"],
+ "overrides": [
+ {
+ "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+ "extends": ["../../../tools/eslint/eslint.react.json"],
+ "rules": {}
+ }
+ ]
+}
diff --git a/packages/react/accordion/LICENSE b/packages/react/accordion/LICENSE
new file mode 100644
index 00000000..637feac8
--- /dev/null
+++ b/packages/react/accordion/LICENSE
@@ -0,0 +1,9 @@
+Copyright 2025 Milad Faghihi, Cocokits
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and limitations under the License.
diff --git a/packages/react/accordion/README.md b/packages/react/accordion/README.md
new file mode 100644
index 00000000..b047c9a7
--- /dev/null
+++ b/packages/react/accordion/README.md
@@ -0,0 +1,75 @@
+# @cocokits/react-accordion
+
+The `@cocokits/react-accordion` package provides a modular accordion system for React applications. Designed with flexibility and performance in mind, it supports lazy rendering, nested structures, and complete customization over headers, icons, and interactivity.
+
+## Included Components:
+
+- `Accordion`
+- `AccordionPanel`
+- `AccordionHeader`
+
+
+### Accordion
+
+The core wrapper that manages the state and structure of all panels. It handles global behavior such as single/multiple expansion, nesting, accessibility, and keyboard control.
+
+**Features:**
+- **Custom Icon Template:**
+Allow developers to define a custom template for the expand/collapse icon, supporting branding or UI consistency.
+
+- **Expansion Mode:**
+Support both single and multiple expanded panels simultaneously, configurable via input.
+
+- **Icon Position:**
+Provide option to render the expand/collapse icon on either the left or right side of the header.
+
+- **Custom Header:**
+Support default text headers or fully custom templates for complete flexibility in UI design.
+
+- **Toggle Animation:**
+Option to enable or disable transition animation for smoother or snappier UX.
+
+- **Disabled Panel:**
+Disable specific panels to prevent user interaction and indicate non-interactive state.
+
+- **Dynamic Control:**
+Expose imperative methods to programmatically expand or collapse individual panels or groups.
+
+- **Expand/Collapse All:**
+Allow batch toggle actions to expand or collapse all panels at once, useful in dashboards or summaries.
+
+- **Nested Support:**
+Support placing accordions inside accordion content, enabling complex hierarchical layouts.
+
+### AccordionPanel
+
+A collapsible section inside an accordion. Each panel works independently but syncs with the parent for state tracking and expansion logic.
+
+### AccordionHeader
+
+Acts as the toggle button for the panel. It can be styled or fully replaced using custom children, enabling full flexibility in the header’s layout and content.
+
+### AccordionHeaderIcon
+
+In React, the icon is injected via a headerIcon prop or slot. It enables you to fully control the visuals for expand/collapse behavior.
+
+---
+
+## Styling and Theming
+As with other CocoKits components, these accordion related components do not come with built-in styles but apply CSS classes based on configuration. This allows you to style them or use CocoKits' theming options for a consistent look across your application.
+
+## Documentation and Examples
+For more information on configuring and using these components, visit the documentation:
+
+- [AccordionComponent](https://react.cocokits.com/?path=/docs/ui-components-accordion--docs)
+
+
+---
+
+### Contributing
+We welcome contributions! If you'd like to contribute to this project, please read our [Contributing Guidelines](https://github.com/coco-base/cocokits/blob/main/CONTRIBUTING.md)
+
+---
+
+### License
+This project is licensed under the Apache License. See the [LICENSE](https://github.com/coco-base/cocokits/blob/main/LICENSE) file for details.
\ No newline at end of file
diff --git a/packages/react/accordion/package.json b/packages/react/accordion/package.json
new file mode 100644
index 00000000..242ddacd
--- /dev/null
+++ b/packages/react/accordion/package.json
@@ -0,0 +1,32 @@
+{
+ "name": "@cocokits/react-accordion",
+ "version": "0.0.0",
+ "private": false,
+ "main": "./index.js",
+ "types": "./index.d.ts",
+ "dependencies": {
+ "@cocokits/react-core": "workspace:*",
+ "@cocokits/core": "workspace:*",
+ "@cocokits/common-utils": "workspace:*",
+ "@cocokits/react-utils": "workspace:*",
+ "@cocokits/react-icon": "workspace:*"
+ },
+ "peerDependencies": {
+ "react": "^18.3.0",
+ "react-dom": "^18.3.0"
+ },
+ "devDependencies": {
+ "@types/react": "^18.3.0",
+ "@types/react-dom": "^18.3.0"
+ },
+ "exports": {
+ ".": {
+ "import": "./index.mjs",
+ "require": "./index.js"
+ }
+ },
+ "publishConfig": {
+ "directory": "../../../dist/packages/react/accordion",
+ "access": "public"
+ }
+}
diff --git a/packages/react/accordion/project.json b/packages/react/accordion/project.json
new file mode 100644
index 00000000..379aef4a
--- /dev/null
+++ b/packages/react/accordion/project.json
@@ -0,0 +1,16 @@
+{
+ "name": "@cocokits/react-accordion",
+ "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+ "sourceRoot": "/packages/react/accordion/src",
+ "projectType": "library",
+ "tags": ["type:ui", "framework:react"],
+ "// targets": "to see all targets run: nx show project button --web",
+ "targets": {
+ "build": {
+ "outputs": ["{workspaceRoot}/dist/packages/react/accordion"]
+ },
+ "quick-fix-eslint": {
+ "executor": "@nx/eslint:lint"
+ }
+ }
+}
diff --git a/packages/react/accordion/src/index.ts b/packages/react/accordion/src/index.ts
new file mode 100644
index 00000000..ab6e3305
--- /dev/null
+++ b/packages/react/accordion/src/index.ts
@@ -0,0 +1,5 @@
+export * from './lib/accordion/accordion';
+
+export * from './lib/accordion-header/accordion-header';
+
+export * from './lib/accordion-panel/accordion-panel';
diff --git a/packages/react/accordion/src/lib/accordion-header/accordion-header.tsx b/packages/react/accordion/src/lib/accordion-header/accordion-header.tsx
new file mode 100644
index 00000000..a960c26c
--- /dev/null
+++ b/packages/react/accordion/src/lib/accordion-header/accordion-header.tsx
@@ -0,0 +1,113 @@
+/* eslint-disable max-lines-per-function */
+import React, { useCallback, useContext } from 'react';
+
+import { UIBaseComponentProps } from '@cocokits/core';
+import { ThemeConfigContext, useUiBaseComponentConfig } from '@cocokits/react-core';
+import { SvgIcon } from '@cocokits/react-icon';
+
+import { useAccordionStore } from '../accordion.store';
+import { AccordionPanelContext } from '../accordion-panel/accordion-panel';
+
+export interface AccordionHeaderProps extends UIBaseComponentProps {
+ /**
+ * Template for the accordion icon, that will apply to on;y this header.
+ * Can be a React node, an array of React nodes, or a function that returns a React node.
+ * If a function is provided, it receives an object containing the `isExpanded` and `disabled` properties.
+ */
+ iconTemplate?:
+ | React.ReactNode
+ | React.ReactNode[]
+ | ((props: { isExpanded: boolean; disabled: boolean }) => React.ReactNode);
+
+ /**
+ * The content of the accordion header, such as a title or any custom template.
+ */
+ children?: React.ReactNode;
+}
+
+export const AccordionHeader = ({ type, size, color, additional, iconTemplate, children }: AccordionHeaderProps) => {
+ const store = useAccordionStore();
+ const panelContext = useContext(AccordionPanelContext);
+ const themeConfig = useContext(ThemeConfigContext);
+
+ const expandedIcon = themeConfig?.components.accordion?.templates?.accordionExpandedIcon;
+ const collapsedIcon = themeConfig?.components.accordion?.templates?.accordionCollapsedIcon;
+
+ if(!store) {
+ throw new Error('AccordionHeader must be used within an Accordion.');
+ }
+ if (!panelContext) {
+ throw new Error('AccordionHeader must be used within an AccordionPanel.');
+ }
+
+ const isExpanded = store?.isExpanded(panelContext.id);
+ const iconPosition = store.useState((state) => state.iconPosition);
+ const toggleTrigger = store.useState((state) => state.toggleTrigger);
+
+ const { classNames, hostClassNames } = useUiBaseComponentConfig({
+ componentName: 'accordionHeader',
+ props: { type, size, color, additional },
+ extraHostElementClassConditions: [
+ { if: iconPosition === 'left', classes: (cn) => [cn.iconLeft] },
+ { if: iconPosition === 'right', classes: (cn) => [cn.iconRight] },
+ { if: toggleTrigger === 'icon', classes: (cn) => [cn.triggerIcon] },
+ { if: toggleTrigger === 'header', classes: (cn) => [cn.triggerHeader] },
+ ],
+ });
+
+ const onHostClick = () => {
+ if (panelContext.disabled || store?.getState().toggleTrigger !== 'header') {
+ return;
+ }
+
+ store?.toggle(panelContext.id);
+ };
+
+ const toggle = () => {
+ if (panelContext.disabled || store?.getState().toggleTrigger !== 'icon') {
+ return;
+ }
+
+ store?.toggle(panelContext.id);
+ };
+
+ const iconContent = useCallback(() => {
+ if (typeof iconTemplate === 'function') {
+ return iconTemplate({ isExpanded: isExpanded ?? false, disabled: panelContext.disabled ?? false });
+ }
+
+ if(iconTemplate) {
+ return iconTemplate as React.ReactNode;
+ }
+
+ const globalIconTemplate = store.getState().iconTemplate;
+
+ if (typeof globalIconTemplate === 'function') {
+ return globalIconTemplate({ isExpanded: isExpanded ?? false, disabled: panelContext.disabled ?? false });
+ }
+
+ if(globalIconTemplate) {
+ return globalIconTemplate as React.ReactNode;
+ }
+
+ if(!expandedIcon || !collapsedIcon) {
+ throw new Error('`expandedIcon` and `collapsedIcon` must be defined in the theme configuration.');
+ }
+
+ return (
+
+ {children}
+
+ {iconContent()}
+
+
+ );
+};
+
+AccordionHeader.displayName = 'AccordionHeader';
+export default AccordionHeader;
diff --git a/packages/react/accordion/src/lib/accordion-panel/accordion-panel.tsx b/packages/react/accordion/src/lib/accordion-panel/accordion-panel.tsx
new file mode 100644
index 00000000..20751be0
--- /dev/null
+++ b/packages/react/accordion/src/lib/accordion-panel/accordion-panel.tsx
@@ -0,0 +1,120 @@
+import React, { createContext, useRef } from 'react';
+
+import { UIBaseComponentProps } from '@cocokits/core';
+import { useUiBaseComponentConfig } from '@cocokits/react-core';
+import { useAnimation, useEffectAfterMount, useOnInit, useSlotChildren, useStaticText } from '@cocokits/react-utils';
+
+import { useAccordionStore } from '../accordion.store';
+
+export interface AccordionPanelProps extends UIBaseComponentProps {
+ /**
+ * The unique identifier for the accordion panel.
+ * @defaultValue The id will be generated automatically.
+ */
+ value?: TValue;
+
+ /**
+ * Whether the accordion panel is disabled.
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * The header and content type of the accordion panel.
+ */
+ children: React.ReactNode;
+}
+
+export const AccordionPanelContext = createContext<{
+ id: string,
+ disabled: boolean | undefined;
+} | null>(null);
+
+export const AccordionPanel = ({
+ type,
+ size,
+ color,
+ additional,
+ value: _value,
+ disabled,
+ children,
+}: AccordionPanelProps) => {
+ const id = useStaticText();
+ const value = _value ?? id;
+
+ const store = useAccordionStore();
+ const contentRef = useRef(null);
+ const animation = useAnimation(contentRef, {initializeValues: { dimension: { height: 0 } } });
+
+ if(!store) {
+ throw new Error('AccordionPanel must be used within an Accordion.');
+ }
+
+ useOnInit(() => store.addPanel({ id, value }));
+
+ // Must be called after addPanel to ensure the store is initialized
+ const isExpanded = store.isExpanded(id);
+
+ const { classNames, hostClassNames } = useUiBaseComponentConfig({
+ componentName: 'accordionPanel',
+ props: { type, size, color, additional },
+ extraHostElementClassConditions: [
+ { if: isExpanded, classes: (cn) => [cn.expanded] },
+ { if: !isExpanded, classes: (cn) => [cn.collapsed] },
+ { if: disabled, classes: (cn) => [cn.disabled] },
+ ],
+ });
+
+ // Run animation on expanded changed
+ useEffectAfterMount(() => {
+ if(!contentRef.current) {
+ return;
+ }
+
+ const height = isExpanded ? getOriginalHeight(contentRef.current) : 0;
+
+ animation?.setDimension({ height });
+
+ const animate = store.getState().instantAnimation
+ ? animation?.apply()
+ : animation?.animate({ easing: cubicBezierEasing, duration: store.getState().animationDuration });
+
+ if (isExpanded) {
+ animate?.then(() => {
+ if (contentRef.current) {
+ contentRef.current.style.height = `auto`;
+ }
+ });
+ }
+ }, [isExpanded]);
+
+ const [headerChild, contentChildren] = useSlotChildren(children, 'AccordionHeader');
+
+ return (
+
+
+ {headerChild}
+
{contentChildren}
+
+ );
+};
+
+AccordionPanel.displayName = 'AccordionPanel';
+export default AccordionPanel;
+
+
+export function getOriginalHeight(element: HTMLElement): number {
+ element.style.opacity = '0';
+ element.style.display = 'block';
+ element.style.height = 'auto';
+
+ const height = element.offsetHeight;
+ element.style.height = '0';
+ element.style.opacity = '1';
+
+ return height;
+}
+
+// eslint-disable-next-line no-mixed-operators
+const cubicBezierEasing = (x: number) => 1 - (1 - x) * (1 - x);
\ No newline at end of file
diff --git a/packages/react/accordion/src/lib/accordion.store.ts b/packages/react/accordion/src/lib/accordion.store.ts
new file mode 100644
index 00000000..34023f1c
--- /dev/null
+++ b/packages/react/accordion/src/lib/accordion.store.ts
@@ -0,0 +1,125 @@
+import { createContext, Provider, useContext, useMemo } from 'react';
+
+import { Selection } from '@cocokits/common-utils';
+import { createComponentStore } from '@cocokits/react-utils';
+
+interface AccordionState {
+ expandedPanelIds: string[];
+ multiple: boolean;
+ iconPosition: 'left' | 'right';
+ instantAnimation: boolean;
+ animationDuration: number;
+ toggleTrigger: 'header' | 'icon';
+ iconTemplate:
+ | React.ReactNode
+ | React.ReactNode[]
+ | ((props: { isExpanded: boolean; disabled: boolean }) => React.ReactNode);
+}
+
+export interface AccordionStoreOptions {
+ expandedPanelIds: string[];
+ multiple: boolean;
+ iconPosition: 'left' | 'right';
+ instantAnimation: boolean;
+ animationDuration: number;
+ toggleTrigger: 'header' | 'icon';
+ onSelectionChange: ((selected: string[] | string | null) => void) | undefined;
+ iconTemplate:
+ | React.ReactNode
+ | React.ReactNode[]
+ | ((props: { isExpanded: boolean; disabled: boolean }) => React.ReactNode);
+}
+
+export class AccordionStore {
+ private selection: Selection;
+ private panels = new Map();
+
+ private state: ReturnType>;
+ public useState: ReturnType>['useState'];
+ public getState: ReturnType>['getState'];
+ public updateState: ReturnType>['updateState'];
+
+ constructor({ onSelectionChange, ...options }: AccordionStoreOptions) {
+ this.state = createComponentStore(options);
+ this.useState = this.state.useState;
+ this.getState = this.state.getState;
+ this.updateState = this.state.updateState;
+
+ this.selection = new Selection([], { multiple: options.multiple });
+ this.selection.addChangeEventListener(() => {
+ this.state.updateState({
+ expandedPanelIds: this.selection.selected,
+ multiple: this.selection.isMultipleSelection(),
+ });
+
+ const selectedValues = this.selection.selected.map((id) => this.findValueFromId(id));
+ onSelectionChange?.(this.selection.isMultipleSelection() ? selectedValues : (selectedValues[0] ?? null));
+ });
+ }
+
+ public findPanelByValue(value: string) {
+ for (const panel of this.panels.values()) {
+ if (panel.value === value) {
+ return panel;
+ }
+ }
+ throw new Error(`Accordion panel with value "${value}" not found.`);
+ }
+
+ public addPanel(panel: { id: string; value: string }) {
+ this.panels.set(panel.id, panel);
+ }
+
+ public removePanel(id: string) {
+ this.panels.delete(id);
+ this.selection.deselect(id);
+ }
+
+ public setExpandedPanelIds(ids: string[] | string) {
+ this.selection.setSelection(ids);
+ }
+
+ public setMultiMode(isMultiMode: boolean) {
+ this.selection.updateOptions({ multiple: isMultiMode });
+ }
+
+ public isExpanded(id: string) {
+ return this.state.useState((state) => state.expandedPanelIds.includes(id));
+ }
+
+ public toggle(id: string) {
+ this.selection.toggle(id);
+ }
+
+ public expand(id: string) {
+ this.selection.select(id);
+ }
+
+ public collapse(id: string) {
+ this.selection.deselect(id);
+ }
+
+ private findValueFromId(id: string): string {
+ const panel = this.panels.get(id);
+ if (!panel) {
+ throw new Error(`Accordion panel with id "${id}" not found.`);
+ }
+ return panel.value;
+ }
+}
+
+const AccordionStoreContent = createContext(null);
+
+export function useCreateAccordionStore(config: AccordionStoreOptions) {
+ return useMemo(
+ () => ({
+ StoreProvider: AccordionStoreContent.Provider as Provider,
+ store: new AccordionStore(config),
+ }),
+ []
+ );
+}
+
+export function useAccordionStore() {
+ return useContext(AccordionStoreContent) as AccordionStore | null;
+}
diff --git a/packages/react/accordion/src/lib/accordion/accordion.tsx b/packages/react/accordion/src/lib/accordion/accordion.tsx
new file mode 100644
index 00000000..6fee49e2
--- /dev/null
+++ b/packages/react/accordion/src/lib/accordion/accordion.tsx
@@ -0,0 +1,129 @@
+import React, { useEffect } from 'react';
+
+import { UIBaseComponentProps } from '@cocokits/core';
+import { useUiBaseComponentConfig } from '@cocokits/react-core';
+import { useEffectAfterMount } from '@cocokits/react-utils';
+
+import { useCreateAccordionStore } from '../accordion.store';
+
+export interface AccordionProps extends UIBaseComponentProps {
+ /**
+ * Whether to show the animation for the accordion expansion and collapse.
+ * @default false
+ */
+ instantAnimation?: boolean;
+
+ /**
+ * The duration of the animation in milliseconds when expanding or collapsing the accordion panels.
+ * @default 300
+ */
+ animationDuration?: number;
+
+ /**
+ * Whether to allow multiple accordion panels to be expanded at the same time.
+ * If set to true, multiple panels can be expanded simultaneously.
+ * @default false
+ */
+ multiMode?: boolean;
+
+ /**
+ * The position of the icon in the accordion header.
+ * Can be either 'left' or 'right'.
+ */
+ iconPosition?: 'left' | 'right';
+
+ /**
+ * The trigger for toggling the accordion header.
+ * Can be either 'header' or 'icon'.
+ */
+ toggleTrigger?: 'header' | 'icon';
+
+ /**
+ * The values of the expanded accordion panels or an array of values in multiple mode.
+ */
+ expanded?: TValue | TValue[];
+
+ /**
+ * Emitted when the expanded state of an accordion panel changes.
+ * The emitted value contains the id and index of the expanded panel.
+ */
+ expandedChange?: (value: TValue | TValue[] | null) => void;
+
+ /**
+ * Template for the accordion icon, that will apply to all accordion headers.
+ * Can be a React node, an array of React nodes, or a function that returns a React node.
+ * If a function is provided, it receives an object containing the `isExpanded` and `disabled` properties.
+ */
+ iconTemplate?:
+ | React.ReactNode
+ | React.ReactNode[]
+ | ((props: { isExpanded: boolean; disabled: boolean }) => React.ReactNode);
+
+ /**
+ * he children of the Accordion component. Must only be `AccordionPanel` components.
+ */
+ children: React.ReactNode;
+}
+
+export const Accordion = ({
+ type,
+ size,
+ color,
+ additional,
+ instantAnimation = false,
+ animationDuration = 300,
+ multiMode = false,
+ iconPosition = 'right',
+ toggleTrigger = 'header',
+ expanded,
+ expandedChange,
+ iconTemplate,
+ children,
+}: AccordionProps) => {
+ const { store, StoreProvider } = useCreateAccordionStore({
+ onSelectionChange: expandedChange,
+ multiple: multiMode,
+ instantAnimation,
+ animationDuration,
+ iconPosition,
+ toggleTrigger,
+ expandedPanelIds: [],
+ iconTemplate
+ });
+
+ const { classNames, hostClassNames } = useUiBaseComponentConfig({
+ componentName: 'accordion',
+ props: { type, size, color, additional },
+ extraHostElementClassConditions: [
+ { if: instantAnimation, classes: (cn) => [cn.instantAnimation] },
+ { if: multiMode, classes: (cn) => [cn.multiMode] },
+ { if: !multiMode, classes: (cn) => [cn.singleMode] },
+ ],
+ });
+
+ useEffectAfterMount(() => store.setMultiMode(multiMode), [multiMode]);
+ useEffectAfterMount(
+ () =>
+ store.updateState({
+ instantAnimation,
+ animationDuration,
+ iconPosition,
+ toggleTrigger,
+ iconTemplate
+ }),
+ [instantAnimation, animationDuration, iconPosition, toggleTrigger, iconTemplate]
+ );
+ useEffect(() => {
+ const ids = expanded?.map((value: string) => store.findPanelByValue(value).id) ?? [];
+ store.setExpandedPanelIds(ids);
+ }, [expanded]);
+
+ return (
+
+ {children}
+
+ );
+};
+
+Accordion.displayName = 'Accordion';
+export default Accordion;
diff --git a/packages/react/accordion/tsconfig.json b/packages/react/accordion/tsconfig.json
new file mode 100644
index 00000000..89f8ac08
--- /dev/null
+++ b/packages/react/accordion/tsconfig.json
@@ -0,0 +1,17 @@
+{
+ "compilerOptions": {
+ "jsx": "react-jsx",
+ "allowJs": false,
+ "esModuleInterop": false,
+ "allowSyntheticDefaultImports": true,
+ "strict": true
+ },
+ "files": [],
+ "include": [],
+ "references": [
+ {
+ "path": "./tsconfig.lib.json"
+ }
+ ],
+ "extends": "../../../tsconfig.base.json"
+}
diff --git a/packages/react/accordion/tsconfig.lib.json b/packages/react/accordion/tsconfig.lib.json
new file mode 100644
index 00000000..02faf5d1
--- /dev/null
+++ b/packages/react/accordion/tsconfig.lib.json
@@ -0,0 +1,22 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "%= offsetPathToRoot /dist/out-tsc",
+ "types": ["node", "@nx/react/typings/cssmodule.d.ts", "@nx/react/typings/image.d.ts", "vite/client"]
+ },
+ "exclude": [
+ "**/*.spec.ts",
+ "**/*.test.ts",
+ "**/*.spec.tsx",
+ "**/*.test.tsx",
+ "**/*.spec.js",
+ "**/*.test.js",
+ "**/*.spec.jsx",
+ "**/*.test.jsx",
+ "**/*.stories.ts",
+ "**/*.stories.js",
+ "**/*.stories.jsx",
+ "**/*.stories.tsx"
+ ],
+ "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}
diff --git a/packages/react/accordion/vite.config.ts b/packages/react/accordion/vite.config.ts
new file mode 100644
index 00000000..42c1b156
--- /dev/null
+++ b/packages/react/accordion/vite.config.ts
@@ -0,0 +1,60 @@
+/// (initialState: T) {
let state = initialState;
const listeners = new Set<(state: T) => void>();
- const updateState = (partial: Partial | ((prevState: T) => Partial)): T => {
+ const updateState = (partial: Partial | ((prevState: T) => Partial)) => {
const nextState = typeof partial === 'function' ? partial(state) : partial;
state = { ...state, ...nextState };
listeners.forEach((listener) => listener(state));
-
- return state;
};
const setState = (newState: T) => {
diff --git a/packages/react/utils/src/lib/use-animation.ts b/packages/react/utils/src/lib/use-animation.ts
new file mode 100644
index 00000000..ad212500
--- /dev/null
+++ b/packages/react/utils/src/lib/use-animation.ts
@@ -0,0 +1,88 @@
+import { useLayoutEffect, useRef } from 'react';
+
+import { Animation, AnimationProperties } from '@cocokits/common-utils';
+
+// TODO: it's defined in `@cocokits/core`, but since we can not import core into utils, we have to redefine it here.'
+type DeepPartial = {
+ [P in keyof T]?: T[P] extends object ? DeepPartial : T[P];
+};
+
+/**
+ * Options for the `useAnimation` hook.
+ */
+export interface AnimationOption {
+ /**
+ * Initial partial values to apply immediately on mount.
+ * - `dimension` : width/height
+ * - `transform` : x, y, scale
+ * - `opacity` : opacity
+ */
+ initializeValues?: DeepPartial;
+}
+
+/**
+ * A custom hook that creates or reuses an `Animation` instance for the given element
+ * ref, applies any initial values immediately, and returns the instance.
+ *
+ * Internally it calls `Animation.getOrCreateInstance(ref.current)` from
+ * `@cocokits/common-utils`, sets up dimension, translate, scale, and opacity
+ * (if provided), then applies them before the first paint via `useLayoutEffect`.
+ *
+ * @param ref
+ * A React ref pointing to an HTMLElement to animate.
+ * @param options
+ * Optional settings:
+ * - `initializeValues` : partial animation properties to set immediately.
+ *
+ * @returns
+ * The `Animation` instance tied to the element, or `null` if the ref is not yet attached.
+ *
+ * @example
+ * function FadeInBox() {
+ * const boxRef = useRef(null)
+ * const animation = useAnimation(boxRef, {
+ * initializeValues: {
+ * opacity: 0,
+ * transform: { scale: 0.5 }
+ * }
+ * })
+ *
+ * // For other examples, check the Animation documentation.
+ * onClick = () => {
+ * if (animation) {
+ * animation
+ * .setDimension({ width: 100, height: 100 })
+ * .setTranslate({ x: 50, y: 50 })
+ * .animate()
+ * }
+ * }
+ *
+ * return Hello
+ * }
+ * @see {@link Animation} for more details on the animation API.
+ * @see {@link AnimationProperties} for the properties that can be set.
+ */
+export function useAnimation(ref: React.RefObject, options: AnimationOption = {}): Animation | null {
+ const animationRef = useRef(null);
+
+ useLayoutEffect(() => {
+ if (ref.current) {
+ const _animation = Animation.getOrCreateInstance(ref.current);
+ animationRef.current = _animation;
+ _animation
+ .setDimension({
+ width: options?.initializeValues?.dimension?.width,
+ height: options?.initializeValues?.dimension?.height,
+ })
+ .setTranslate({
+ x: options?.initializeValues?.transform?.x,
+ y: options?.initializeValues?.transform?.y,
+ })
+ .setScale(options?.initializeValues?.transform?.scale)
+ .setOpacity(options?.initializeValues?.opacity)
+ .applyImmediately();
+ }
+ }, [ref.current]);
+
+ return animationRef.current;
+}
diff --git a/packages/react/utils/src/lib/use-debug.ts b/packages/react/utils/src/lib/use-debug.ts
index 46ea489c..a5db6f8f 100644
--- a/packages/react/utils/src/lib/use-debug.ts
+++ b/packages/react/utils/src/lib/use-debug.ts
@@ -10,13 +10,13 @@ let NEXT_ID = 0;
* @param {any[]} [changes] - An optional array of dependencies. Debug messages are logged when these values change.
*
* @example
+ * // In this example, the hook logs when the component is mounted, unmounted, and whenever the values in `changes` update.
* // Usage example:
* function MyComponent({ propA, propB }) {
* useDebug("MyComponent", [propA, propB]);
* return Hello, world!
;
* }
*
- * In this example, the hook logs when the component is mounted, unmounted, and whenever the values in `changes` update.
*/
export function useDebug(prefix: string, changes: any[] = []) {
const id = useRef(NEXT_ID++);
diff --git a/packages/react/utils/src/lib/use-on-destroy.ts b/packages/react/utils/src/lib/use-on-destroy.ts
new file mode 100644
index 00000000..d80a9414
--- /dev/null
+++ b/packages/react/utils/src/lib/use-on-destroy.ts
@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+
+/**
+ * A custom hook that runs a callback function when the component is destroyed.
+ * This is useful for performing cleanup tasks such as removing event listeners or cancelling subscriptions.
+ * It's same as `useEffect` with an empty dependency array, but specifically intended for cleanup actions.
+ *
+ * @param {() => void} callback - The function to run on component destruction.
+ *
+ * @example
+ * // Usage example:
+ * function MyComponent() {
+ * useOnDestroy(() => {
+ * console.log('Component destroyed');
+ * });
+ *
+ * return My Component
;
+ * }
+ */
+export function useOnDestroy(callback: () => void) {
+ useEffect(() => {
+ return () => {
+ callback();
+ };
+ }, []);
+}
diff --git a/packages/react/utils/src/lib/use-on-init.ts b/packages/react/utils/src/lib/use-on-init.ts
new file mode 100644
index 00000000..68cb4f11
--- /dev/null
+++ b/packages/react/utils/src/lib/use-on-init.ts
@@ -0,0 +1,26 @@
+import { useRef } from 'react';
+
+/**
+ * A custom hook that runs a callback function only once when the component is initialized.
+ * This is useful for performing setup tasks that should only happen once, such as initializing state or fetching data.
+ *
+ * @param {() => void} callback - The function to run on initialization.
+ *
+ * @example
+ * // Usage example:
+ * function MyComponent() {
+ * useOnInit(() => {
+ * console.log('Component initialized');
+ * });
+ *
+ * return My Component
;
+ * }
+ */
+export function useOnInit(callback: () => void) {
+ const hasInitialized = useRef(false);
+
+ if (!hasInitialized.current) {
+ callback();
+ hasInitialized.current = true;
+ }
+}
diff --git a/packages/react/utils/src/lib/use-selection.ts b/packages/react/utils/src/lib/use-selection.ts
new file mode 100644
index 00000000..08040aef
--- /dev/null
+++ b/packages/react/utils/src/lib/use-selection.ts
@@ -0,0 +1,66 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { Selection, SelectionOptions } from '@cocokits/common-utils';
+
+/**
+ * A custom hook that manages selection state for items of type `T` and exposes
+ * utility methods to manipulate the selection.
+ *
+ * Internally it creates a `Selection` instance from `@cocokits/common-utils`
+ * and sets up listeners to update React state whenever the selection changes.
+ *
+ * @param options
+ * Partial {@link SelectionOptions} to configure behavior such as
+ * multi-select, comparison function, and initial selection.
+ *
+ * @returns
+ * An object containing:
+ * - `selected`: the current array of selected items, or `undefined` before initialization.
+ * - `selection`: the underlying `Selection` instance with methods to manipulate selection.
+ *
+ * @example
+ * function UserList() {
+ * const { selected, selection } = useSelection({multiple: true});
+ *
+ * return (
+ *
+ *
Clear Selection
+ * {users.map(user => (
+ *
+ *
+ * ))}
+ *
(options: Partial>) {
+ const [selected, setSelected] = useState();
+ const selectionRef = useRef(new Selection([], options));
+ const selection = selectionRef.current;
+
+ useEffect(() => {
+ const callback = () => setSelected(selection.selected);
+ selection.addChangeEventListener(() => {
+ callback();
+ });
+
+ return () => {
+ selection.removeChangeEventListener(callback);
+ };
+ }, []);
+
+ useEffect(() => {
+ selection.updateOptions(options);
+ }, [options]);
+
+ return { selected, selection };
+}
diff --git a/packages/react/utils/src/lib/use-slot-children.ts b/packages/react/utils/src/lib/use-slot-children.ts
new file mode 100644
index 00000000..72f0eff5
--- /dev/null
+++ b/packages/react/utils/src/lib/use-slot-children.ts
@@ -0,0 +1,95 @@
+import React, { useMemo } from 'react';
+
+/**
+ * A tuple of length = slotNames.length + 1,
+ * where the last item is always ReactNode[] (the “rest”).
+ */
+type SlotChildrenResult = [...{ [K in keyof T]: React.ReactNode }, React.ReactNode[]];
+
+/**
+ * A custom hook that splits a React children tree into N named “slots” (by
+ * matching each child’s `type.displayName`) plus a final “rest” array of all
+ * unmatched children.
+ *
+ * It returns a tuple of length = `slotNames.length + 1`. Each of the first N
+ * items is the combined ReactNode(s) for that slot, in the same order they
+ * appeared in the children. The last item is an array of all remaining children.
+ *
+ * @typeParam T
+ * A readonly tuple of slot displayName strings.
+ *
+ * @param children
+ * The full React.ReactNode children tree to partition.
+ * @param slotNames
+ * A list of component displayName strings to extract, in order.
+ * E.g. `['MyComponent.Header', 'MyComponent.Footer']`.
+ *
+ * @returns
+ * A tuple `[slot1, slot2, …, rest]` where:
+ * - `slot1` corresponds to the children of the component whose
+ * `displayName === slotNames[0]`
+ * - `slot2` corresponds to the children of the component whose
+ * `displayName === slotNames[1]`
+ * - …
+ * - `rest` is an array of all other children not matched by any slotName.
+ *
+ * @example
+ * // Single-slot usage: returns [headerNodes, restNodes]
+ * function MyComponent({ children }: { children: React.ReactNode }) {
+ * const [header, rest] = useSlotChildren(children, 'MyComponent.Header')
+ * return (
+ *
+ *
{header}
+ *
{rest}
+ *
(
+ children: React.ReactNode,
+ ...slotNames: T
+): SlotChildrenResult;
+
+export function useSlotChildren(
+ children: React.ReactNode,
+ ...slotNames: T
+): (React.ReactNode | React.ReactNode[])[] {
+ return useMemo(() => {
+ const slots: React.ReactNode[] = new Array(slotNames.length).fill(null);
+ const rest: React.ReactNode[] = [];
+
+ React.Children.forEach(children, (child) => {
+ if (!React.isValidElement(child) || typeof child.type === 'string') {
+ rest.push(child);
+ } else {
+ const name = (child.type as any).displayName;
+ const idx = slotNames.indexOf(name);
+ if (idx >= 0) {
+ slots[idx] = child;
+ } else {
+ rest.push(child);
+ }
+ }
+ });
+
+ return [...slots, rest];
+ }, [children, ...slotNames]);
+}
diff --git a/packages/themes/cocokits/src/lib/theme-config.ts b/packages/themes/cocokits/src/lib/theme-config.ts
index 898c3f10..081944b4 100644
--- a/packages/themes/cocokits/src/lib/theme-config.ts
+++ b/packages/themes/cocokits/src/lib/theme-config.ts
@@ -1,4 +1,5 @@
/* eslint-disable max-lines */
+import { Icons } from '@cocokits/common-icons';
import { ThemeComponentConfigRecord, ThemeConfig } from '@cocokits/core';
const components: ThemeComponentConfigRecord = {
@@ -322,6 +323,26 @@ const components: ThemeComponentConfigRecord = {
description: '',
},
},
+ accordion: {
+ type: {
+ name: 'type',
+ values: ['default', 'group', 'basic'],
+ default: 'default',
+ description: '',
+ },
+ size: {
+ name: 'size',
+ values: ['sm', 'md'],
+ default: 'md',
+ description: '',
+ },
+ templates: {
+ accordionExpandedIcon: Icons.arrowHeadUp,
+ accordionCollapsedIcon: Icons.arrowHeadDown,
+ },
+ },
+ accordionHeader: {},
+ accordionPanel: {},
};
export const cocokitsThemeConfig: ThemeConfig = {
diff --git a/packages/themes/cocokits/src/styles/css/components.css b/packages/themes/cocokits/src/styles/css/components.css
index b32661ed..5ba6000e 100644
--- a/packages/themes/cocokits/src/styles/css/components.css
+++ b/packages/themes/cocokits/src/styles/css/components.css
@@ -1,10 +1,10 @@
/**
* Do not edit directly
- * Generated by cocokits 'scss-builder' on Fri Mar 14 2025
+ * Generated by cocokits 'scss-builder'
*/
-.cck-button{
+:where(.cck-button){
display:inline-flex;
justify-content:center;
align-items:center;
@@ -14,7 +14,7 @@
cursor:pointer;
box-sizing:border-box;
}
-.cck-button:disabled{
+:where(.cck-button):disabled{
background-color:var(--color-disabled-surface);
fill:var(--color-disabled-font);
cursor:default;
@@ -22,241 +22,241 @@
-moz-user-select:none;
user-select:none;
}
-.cck-button .cck-svg-icon--default-color .cck-svg-icon__svg{
+:where(.cck-button .cck-svg-icon--default-color .cck-svg-icon__svg){
fill:currentcolor;
}
-.cck-button__backdrop{
+:where(.cck-button__backdrop){
display:none;
}
-.cck-button__size--sm{
+:where(.cck-button__size--sm){
padding:0 16px;
height:var(--button-primary-height-sm);
gap:8px;
}
-.cck-button__size--md{
+:where(.cck-button__size--md){
padding:0 20px;
height:32px;
gap:8px;
}
-.cck-button__size--lg{
+:where(.cck-button__size--lg){
padding:0 24px;
height:40px;
gap:10px;
}
-.cck-button__basic{
+:where(.cck-button__basic){
border-radius:4px;
}
-.cck-button__basic.cck-button__color--brand:not(:disabled){
+:where(.cck-button__basic.cck-button__color--brand):not(:disabled){
background-color:transparent;
color:var(--color-brand-default);
}
-.cck-button__basic.cck-button__color--brand:focus-visible{
+:where(.cck-button__basic.cck-button__color--brand):focus-visible{
box-shadow:0 0 0 3px var(--color-brand-alpha-5);
}
-.cck-button__basic.cck-button__color--info:not(:disabled){
+:where(.cck-button__basic.cck-button__color--info):not(:disabled){
background-color:transparent;
color:var(--color-info-default);
}
-.cck-button__basic.cck-button__color--info:focus-visible{
+:where(.cck-button__basic.cck-button__color--info):focus-visible{
box-shadow:0 0 0 3px var(--color-info-alpha-5);
}
-.cck-button__basic.cck-button__color--warning:not(:disabled){
+:where(.cck-button__basic.cck-button__color--warning):not(:disabled){
background-color:transparent;
color:var(--color-warning-default);
}
-.cck-button__basic.cck-button__color--warning:focus-visible{
+:where(.cck-button__basic.cck-button__color--warning):focus-visible{
box-shadow:0 0 0 3px var(--color-warning-alpha-5);
}
-.cck-button__basic.cck-button__color--error:not(:disabled){
+:where(.cck-button__basic.cck-button__color--error):not(:disabled){
background-color:transparent;
color:var(--color-error-default);
}
-.cck-button__basic.cck-button__color--error:focus-visible{
+:where(.cck-button__basic.cck-button__color--error):focus-visible{
box-shadow:0 0 0 3px var(--color-error-alpha-5);
}
-.cck-button__basic.cck-button__color--h-contrast:not(:disabled){
+:where(.cck-button__basic.cck-button__color--h-contrast):not(:disabled){
background-color:transparent;
color:var(--color-h-contrast-default);
}
-.cck-button__basic.cck-button__color--h-contrast:focus-visible{
+:where(.cck-button__basic.cck-button__color--h-contrast):focus-visible{
box-shadow:0 0 0 3px var(--color-h-contrast-alpha-5);
}
-.cck-button__light{
+:where(.cck-button__light){
border-radius:4px;
}
-.cck-button__light.cck-button__color--brand:not(:disabled){
+:where(.cck-button__light.cck-button__color--brand):not(:disabled){
background-color:var(--color-brand-alpha-5);
color:var(--color-brand-default);
}
-.cck-button__light.cck-button__color--brand:focus-visible{
+:where(.cck-button__light.cck-button__color--brand):focus-visible{
box-shadow:0 0 0 3px var(--color-brand-alpha-7);
}
-.cck-button__light.cck-button__color--info:not(:disabled){
+:where(.cck-button__light.cck-button__color--info):not(:disabled){
background-color:var(--color-info-alpha-5);
color:var(--color-info-default);
}
-.cck-button__light.cck-button__color--info:focus-visible{
+:where(.cck-button__light.cck-button__color--info):focus-visible{
box-shadow:0 0 0 3px var(--color-info-alpha-7);
}
-.cck-button__light.cck-button__color--warning:not(:disabled){
+:where(.cck-button__light.cck-button__color--warning):not(:disabled){
background-color:var(--color-warning-alpha-5);
color:var(--color-warning-default);
}
-.cck-button__light.cck-button__color--warning:focus-visible{
+:where(.cck-button__light.cck-button__color--warning):focus-visible{
box-shadow:0 0 0 3px var(--color-warning-alpha-7);
}
-.cck-button__light.cck-button__color--error:not(:disabled){
+:where(.cck-button__light.cck-button__color--error):not(:disabled){
background-color:var(--color-error-alpha-5);
color:var(--color-error-default);
}
-.cck-button__light.cck-button__color--error:focus-visible{
+:where(.cck-button__light.cck-button__color--error):focus-visible{
box-shadow:0 0 0 3px var(--color-error-alpha-7);
}
-.cck-button__light.cck-button__color--h-contrast:not(:disabled){
+:where(.cck-button__light.cck-button__color--h-contrast):not(:disabled){
background-color:var(--color-h-contrast-alpha-5);
color:var(--color-h-contrast-default);
}
-.cck-button__light.cck-button__color--h-contrast:focus-visible{
+:where(.cck-button__light.cck-button__color--h-contrast):focus-visible{
box-shadow:0 0 0 3px var(--color-h-contrast-alpha-7);
}
-.cck-button__outline{
+:where(.cck-button__outline){
border-radius:4px;
background-color:transparent;
}
-.cck-button__outline.cck-button__color--brand:not(:disabled){
+:where(.cck-button__outline.cck-button__color--brand):not(:disabled){
border:1px solid var(--color-brand-default);
color:var(--color-brand-default);
}
-.cck-button__outline.cck-button__color--brand:focus-visible{
+:where(.cck-button__outline.cck-button__color--brand):focus-visible{
box-shadow:0 0 0 3px var(--color-brand-alpha-6);
}
-.cck-button__outline.cck-button__color--info:not(:disabled){
+:where(.cck-button__outline.cck-button__color--info):not(:disabled){
border:1px solid var(--color-info-default);
color:var(--color-info-default);
}
-.cck-button__outline.cck-button__color--info:focus-visible{
+:where(.cck-button__outline.cck-button__color--info):focus-visible{
box-shadow:0 0 0 3px var(--color-info-alpha-6);
}
-.cck-button__outline.cck-button__color--warning:not(:disabled){
+:where(.cck-button__outline.cck-button__color--warning):not(:disabled){
border:1px solid var(--color-warning-default);
color:var(--color-warning-default);
}
-.cck-button__outline.cck-button__color--warning:focus-visible{
+:where(.cck-button__outline.cck-button__color--warning):focus-visible{
box-shadow:0 0 0 3px var(--color-warning-alpha-6);
}
-.cck-button__outline.cck-button__color--error:not(:disabled){
+:where(.cck-button__outline.cck-button__color--error):not(:disabled){
border:1px solid var(--color-error-default);
color:var(--color-error-default);
}
-.cck-button__outline.cck-button__color--error:focus-visible{
+:where(.cck-button__outline.cck-button__color--error):focus-visible{
box-shadow:0 0 0 3px var(--color-error-alpha-6);
}
-.cck-button__outline.cck-button__color--h-contrast:not(:disabled){
+:where(.cck-button__outline.cck-button__color--h-contrast):not(:disabled){
border:1px solid var(--color-h-contrast-default);
color:var(--color-h-contrast-default);
}
-.cck-button__outline.cck-button__color--h-contrast:focus-visible{
+:where(.cck-button__outline.cck-button__color--h-contrast):focus-visible{
box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6);
}
-.cck-button__primary{
+:where(.cck-button__primary){
border-radius:4px;
}
-.cck-button__primary.cck-button__color--brand:not(:disabled){
+:where(.cck-button__primary.cck-button__color--brand):not(:disabled){
background-color:var(--color-brand-default);
color:var(--color-font-inverse-default);
}
-.cck-button__primary.cck-button__color--brand:focus-visible{
+:where(.cck-button__primary.cck-button__color--brand):focus-visible{
box-shadow:0 0 0 3px var(--color-brand-alpha-6);
}
-.cck-button__primary.cck-button__color--info:not(:disabled){
+:where(.cck-button__primary.cck-button__color--info):not(:disabled){
background-color:var(--color-info-default);
color:var(--color-font-inverse-default);
}
-.cck-button__primary.cck-button__color--info:focus-visible{
+:where(.cck-button__primary.cck-button__color--info):focus-visible{
box-shadow:0 0 0 3px var(--color-info-alpha-6);
}
-.cck-button__primary.cck-button__color--warning:not(:disabled){
+:where(.cck-button__primary.cck-button__color--warning):not(:disabled){
background-color:var(--color-warning-default);
color:var(--color-font-inverse-default);
}
-.cck-button__primary.cck-button__color--warning:focus-visible{
+:where(.cck-button__primary.cck-button__color--warning):focus-visible{
box-shadow:0 0 0 3px var(--color-warning-alpha-6);
}
-.cck-button__primary.cck-button__color--error:not(:disabled){
+:where(.cck-button__primary.cck-button__color--error):not(:disabled){
background-color:var(--color-error-default);
color:var(--color-font-inverse-default);
}
-.cck-button__primary.cck-button__color--error:focus-visible{
+:where(.cck-button__primary.cck-button__color--error):focus-visible{
box-shadow:0 0 0 3px var(--color-error-alpha-6);
}
-.cck-button__primary.cck-button__color--h-contrast:not(:disabled){
+:where(.cck-button__primary.cck-button__color--h-contrast):not(:disabled){
background-color:var(--color-h-contrast-default);
color:var(--color-font-inverse-default);
}
-.cck-button__primary.cck-button__color--h-contrast:focus-visible{
+:where(.cck-button__primary.cck-button__color--h-contrast):focus-visible{
box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6);
}
-.cck-checkbox{
+:where(.cck-checkbox){
display:flex;
}
-.cck-checkbox__wrapper{
+:where(.cck-checkbox__wrapper){
display:inline-flex;
align-items:center;
vertical-align:middle;
gap:12px;
}
-.cck-checkbox__input-wrapper{
+:where(.cck-checkbox__input-wrapper){
display:inline-block;
position:relative;
box-sizing:content-box;
@@ -266,22 +266,22 @@
flex-shrink:0;
}
-.cck-checkbox__size--sm .cck-checkbox__input-wrapper{
+:where(.cck-checkbox__size--sm .cck-checkbox__input-wrapper){
width:var(--checkbox-size-sm);
height:var(--checkbox-size-sm);
}
-.cck-checkbox__size--md .cck-checkbox__input-wrapper{
+:where(.cck-checkbox__size--md .cck-checkbox__input-wrapper){
width:var(--checkbox-size-md);
height:var(--checkbox-size-md);
}
-.cck-checkbox__size--lg .cck-checkbox__input-wrapper{
+:where(.cck-checkbox__size--lg .cck-checkbox__input-wrapper){
width:var(--checkbox-size-lg);
height:var(--checkbox-size-lg);
}
-.cck-checkbox__input{
+:where(.cck-checkbox__input){
position:absolute;
margin:0;
padding:0;
@@ -294,7 +294,7 @@
right:0;
}
-.cck-checkbox__background{
+:where(.cck-checkbox__background){
position:absolute;
display:flex;
align-items:center;
@@ -309,55 +309,55 @@
transition:background-color 90ms cubic-bezier(0.4, 0, 0.6, 1), border-color 90ms cubic-bezier(0.4, 0, 0.6, 1);
}
-.cck-checkbox--disabled .cck-checkbox__background,
-.cck-checkbox--checked.cck-checkbox--disabled .cck-checkbox__background,
-.cck-checkbox--unchecked.cck-checkbox--disabled .cck-checkbox__background,
-.cck-checkbox--indeterminate.cck-checkbox--disabled .cck-checkbox__background{
+:where(.cck-checkbox--disabled .cck-checkbox__background),:where(
+.cck-checkbox--checked.cck-checkbox--disabled .cck-checkbox__background),:where(
+.cck-checkbox--unchecked.cck-checkbox--disabled .cck-checkbox__background),:where(
+.cck-checkbox--indeterminate.cck-checkbox--disabled .cck-checkbox__background){
background-color:var(--color-disabled-surface);
border-color:var(--color-disabled-border);
}
-.cck-checkbox--indeterminate.cck-checkbox__color--brand:not(.cck-checkbox--disabled) .cck-checkbox__background,
-.cck-checkbox--checked.cck-checkbox__color--brand:not(.cck-checkbox--disabled) .cck-checkbox__background{
+:where(.cck-checkbox--indeterminate.cck-checkbox__color--brand:not(.cck-checkbox--disabled) .cck-checkbox__background),:where(
+.cck-checkbox--checked.cck-checkbox__color--brand:not(.cck-checkbox--disabled) .cck-checkbox__background){
background-color:var(--color-brand-default);
border-color:var(--color-brand-default);
}
-.cck-checkbox--indeterminate.cck-checkbox__color--info:not(.cck-checkbox--disabled) .cck-checkbox__background,
-.cck-checkbox--checked.cck-checkbox__color--info:not(.cck-checkbox--disabled) .cck-checkbox__background{
+:where(.cck-checkbox--indeterminate.cck-checkbox__color--info:not(.cck-checkbox--disabled) .cck-checkbox__background),:where(
+.cck-checkbox--checked.cck-checkbox__color--info:not(.cck-checkbox--disabled) .cck-checkbox__background){
background-color:var(--color-info-default);
border-color:var(--color-info-default);
}
-.cck-checkbox--indeterminate.cck-checkbox__color--warning:not(.cck-checkbox--disabled) .cck-checkbox__background,
-.cck-checkbox--checked.cck-checkbox__color--warning:not(.cck-checkbox--disabled) .cck-checkbox__background{
+:where(.cck-checkbox--indeterminate.cck-checkbox__color--warning:not(.cck-checkbox--disabled) .cck-checkbox__background),:where(
+.cck-checkbox--checked.cck-checkbox__color--warning:not(.cck-checkbox--disabled) .cck-checkbox__background){
background-color:var(--color-warning-default);
border-color:var(--color-warning-default);
}
-.cck-checkbox--indeterminate.cck-checkbox__color--error:not(.cck-checkbox--disabled) .cck-checkbox__background,
-.cck-checkbox--checked.cck-checkbox__color--error:not(.cck-checkbox--disabled) .cck-checkbox__background{
+:where(.cck-checkbox--indeterminate.cck-checkbox__color--error:not(.cck-checkbox--disabled) .cck-checkbox__background),:where(
+.cck-checkbox--checked.cck-checkbox__color--error:not(.cck-checkbox--disabled) .cck-checkbox__background){
background-color:var(--color-error-default);
border-color:var(--color-error-default);
}
-.cck-checkbox__color--brand .cck-checkbox__input:focus-visible ~ .cck-checkbox__background{
+:where(.cck-checkbox__color--brand .cck-checkbox__input:focus-visible ~ .cck-checkbox__background){
box-shadow:0 0 0 3px var(--color-brand-alpha-5);
}
-.cck-checkbox__color--info .cck-checkbox__input:focus-visible ~ .cck-checkbox__background{
+:where(.cck-checkbox__color--info .cck-checkbox__input:focus-visible ~ .cck-checkbox__background){
box-shadow:0 0 0 3px var(--color-info-alpha-5);
}
-.cck-checkbox__color--warning .cck-checkbox__input:focus-visible ~ .cck-checkbox__background{
+:where(.cck-checkbox__color--warning .cck-checkbox__input:focus-visible ~ .cck-checkbox__background){
box-shadow:0 0 0 3px var(--color-warning-alpha-5);
}
-.cck-checkbox__color--error .cck-checkbox__input:focus-visible ~ .cck-checkbox__background{
+:where(.cck-checkbox__color--error .cck-checkbox__input:focus-visible ~ .cck-checkbox__background){
box-shadow:0 0 0 3px var(--color-error-alpha-5);
}
-.cck-checkbox__checkmark-path{
+:where(.cck-checkbox__checkmark-path){
transition:stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1);
stroke:currentcolor;
stroke-width:3.12px;
@@ -365,11 +365,11 @@
stroke-dasharray:29.7833;
}
-.cck-checkbox--checked .cck-checkbox__checkmark-path{
+:where(.cck-checkbox--checked .cck-checkbox__checkmark-path){
stroke-dashoffset:0;
}
-.cck-checkbox__checkmark{
+:where(.cck-checkbox__checkmark){
position:absolute;
inset:0;
width:100%;
@@ -379,21 +379,21 @@
padding:2px;
}
-.cck-checkbox--checked .cck-checkbox__checkmark{
+:where(.cck-checkbox--checked .cck-checkbox__checkmark){
opacity:1;
}
-.cck-checkbox--indeterminate .cck-checkbox__checkmark{
+:where(.cck-checkbox--indeterminate .cck-checkbox__checkmark){
transform:rotate(45deg);
opacity:0;
transition:opacity 90ms cubic-bezier(0.4, 0, 0.6, 1), transform 90ms cubic-bezier(0.4, 0, 0.6, 1);
}
-.cck-checkbox--disabled .cck-checkbox__checkmark{
+:where(.cck-checkbox--disabled .cck-checkbox__checkmark){
color:var(--color-disabled-border);
}
-.cck-checkbox__mixedmark{
+:where(.cck-checkbox__mixedmark){
width:100%;
height:0;
transform:scaleX(0) rotate(0deg);
@@ -405,12 +405,12 @@
margin:2px;
}
-.cck-checkbox--indeterminate .cck-checkbox__mixedmark{
+:where(.cck-checkbox--indeterminate .cck-checkbox__mixedmark){
transform:scaleX(1) rotate(0deg);
opacity:1;
}
-.cck-checkbox__label{
+:where(.cck-checkbox__label){
margin-left:0;
margin-right:auto;
padding-left:0;
@@ -423,23 +423,23 @@
white-space:nowrap;
}
-.cck-checkbox__label:empty{
+:where(.cck-checkbox__label):empty{
display:none;
}
-.cck-checkbox--disabled .cck-checkbox__label{
+:where(.cck-checkbox--disabled .cck-checkbox__label){
color:var(--color-disabled-font);
}
-.cck-checkbox--disabled .cck-checkbox__input-wrapper,
-.cck-checkbox--disabled .cck-checkbox__label{
+:where(.cck-checkbox--disabled .cck-checkbox__input-wrapper),:where(
+.cck-checkbox--disabled .cck-checkbox__label){
cursor:default;
-webkit-user-select:none;
-moz-user-select:none;
user-select:none;
}
-.cck-chip{
+:where(.cck-chip){
border-radius:6px;
border:1px solid var(--chip-color-border);
display:flex;
@@ -451,7 +451,7 @@
cursor:default;
}
-.cck-chip.cck-chip--disabled{
+:where(.cck-chip.cck-chip--disabled){
border:1px solid var(--chip-color-border-disabled);
color:var(--color-disabled-font);
pointer-events:none;
@@ -460,29 +460,29 @@
user-select:none;
}
-.cck-chip.cck-chip--removable{
+:where(.cck-chip.cck-chip--removable){
padding:0 2px 0 var(--chip-spacing-overlay-h-padding);
}
-.cck-chip__size--sm{
+:where(.cck-chip__size--sm){
height:var(--chip-size-height-sm);
}
-.cck-chip__size--md{
+:where(.cck-chip__size--md){
height:var(--chip-size-height-md);
}
-.cck-chip__size--lg{
+:where(.cck-chip__size--lg){
height:var(--chip-size-height-lg);
}
-.cck-chip__content-wrapper{
+:where(.cck-chip__content-wrapper){
display:flex;
justify-content:center;
align-items:center;
}
-.cck-chip__remove-icon-wrapper .cck-icon-button{
+:where(.cck-chip__remove-icon-wrapper .cck-icon-button){
background-color:transparent;
color:var(--color-font-alpha-7);
border-radius:50%;
@@ -491,17 +491,17 @@
padding:4px;
}
-.cck-chip__remove-icon-wrapper{
+:where(.cck-chip__remove-icon-wrapper){
display:flex;
justify-content:center;
align-items:center;
}
-.cck-chip__remove-icon-wrapper .cck-icon-button:hover{
+:where(.cck-chip__remove-icon-wrapper .cck-icon-button):hover{
background-color:var(--color-h-contrast-alpha-2);
}
-.cck-chip-list{
+:where(.cck-chip-list){
display:flex;
flex-wrap:wrap;
align-items:stretch;
@@ -509,96 +509,96 @@
gap:12px;
}
-.cck-chip-list__input{
+:where(.cck-chip-list__input){
flex:1;
background:transparent;
border:none;
outline:none;
font:var(--text-sm-regular);
}
-.cck-chip-list__input::-moz-placeholder{
+:where(.cck-chip-list__input::-moz-placeholder){
color:var(--color-font-alpha-6);
-moz-transition:color 100ms ease-in;
transition:color 100ms ease-in;
}
-.cck-chip-list__input::placeholder{
+:where(.cck-chip-list__input::placeholder){
color:var(--color-font-alpha-6);
transition:color 100ms ease-in;
}
-.cck-chip-list__input:not(:focus)::-moz-placeholder{
+:where(.cck-chip-list__input::-moz-placeholder):not(:focus){
color:transparent;
}
-.cck-chip-list__input:not(:focus)::placeholder{
+:where(.cck-chip-list__input::placeholder):not(:focus){
color:transparent;
}
-.cck-chip-list__size--sm .cck-chip-list__input{
+:where(.cck-chip-list__size--sm .cck-chip-list__input){
height:var(--chip-size-height-sm);
}
-.cck-chip-list__size--md .cck-chip-list__input{
+:where(.cck-chip-list__size--md .cck-chip-list__input){
height:var(--chip-size-height-md);
}
-.cck-chip-list__size--lg .cck-chip-list__input{
+:where(.cck-chip-list__size--lg .cck-chip-list__input){
height:var(--chip-size-height-lg);
}
-*{
+:where(*){
box-sizing:border-box;
}
-.cck-divider{
+:where(.cck-divider){
display:block;
flex-shrink:0;
}
-.cck-divider__horizontal{
+:where(.cck-divider__horizontal){
width:100%;
margin:var(--divider-spacing-margin) 0;
}
-.cck-divider__horizontal.cck-divider__size--md{
+:where(.cck-divider__horizontal.cck-divider__size--md){
height:1px;
}
-.cck-divider__horizontal.cck-divider__size--lg{
+:where(.cck-divider__horizontal.cck-divider__size--lg){
width:100%;
height:2px;
}
-.cck-divider__vertical{
+:where(.cck-divider__vertical){
height:100%;
margin:0 var(--divider-spacing-margin);
}
-.cck-divider__vertical.cck-divider__size--md{
+:where(.cck-divider__vertical.cck-divider__size--md){
width:1px;
}
-.cck-divider__vertical.cck-divider__size--lg{
+:where(.cck-divider__vertical.cck-divider__size--lg){
width:2px;
}
-.cck-divider__color--light{
+:where(.cck-divider__color--light){
background-color:var(--divider-color-light);
}
-.cck-divider__color--default{
+:where(.cck-divider__color--default){
background-color:var(--divider-color-default);
}
-.cck-divider__color--dark{
+:where(.cck-divider__color--dark){
background-color:var(--divider-color-dark);
}
-.cck-error{
+:where(.cck-error){
display:flex;
gap:6px;
font:var(--text-sm-regular);
color:var(--color-error-default);
}
-.cck-error .cck-svg-icon--default-color .cck-svg-icon__svg{
+:where(.cck-error .cck-svg-icon--default-color .cck-svg-icon__svg){
fill:currentcolor;
}
-.cck-form-field{
+:where(.cck-form-field){
display:flex;
flex-direction:column;
align-items:flex-start;
@@ -606,26 +606,26 @@
min-width:100px;
}
-.cck-form-field:not(:disabled) .cck-form-field__input-wrapper:hover{
+:where(.cck-form-field:not(:disabled) .cck-form-field__input-wrapper):hover{
background-color:var(--color-surface-inverse-alpha-1);
}
-.cck-form-field .cck-select{
+:where(.cck-form-field .cck-select){
height:100%;
width:100%;
flex:1;
}
-.cck-form-field .cck-input{
+:where(.cck-form-field .cck-input){
width:100%;
flex:1;
}
-.cck-form-field--disabled{
+:where(.cck-form-field--disabled){
opacity:0.5;
}
-.cck-form-field__wrapper{
+:where(.cck-form-field__wrapper){
width:100%;
display:flex;
flex-direction:row;
@@ -633,51 +633,51 @@
border-radius:var(--form_field-size-radius);
}
-.cck-form-field__wrapper:has(input:disabled){
+:where(.cck-form-field__wrapper):has(input:disabled){
background-color:var(--color-surface-inverse-alpha-3);
}
-.cck-form-field--with-input.cck-form-field__size--sm .cck-form-field__wrapper,
-.cck-form-field--with-select.cck-form-field__size--sm .cck-form-field__wrapper{
+:where(.cck-form-field--with-input.cck-form-field__size--sm .cck-form-field__wrapper),:where(
+.cck-form-field--with-select.cck-form-field__size--sm .cck-form-field__wrapper){
height:var(--form_field-size-height-sm);
}
-.cck-form-field--with-input.cck-form-field__size--md .cck-form-field__wrapper,
-.cck-form-field--with-select.cck-form-field__size--md .cck-form-field__wrapper{
+:where(.cck-form-field--with-input.cck-form-field__size--md .cck-form-field__wrapper),:where(
+.cck-form-field--with-select.cck-form-field__size--md .cck-form-field__wrapper){
height:var(--form_field-size-height-md);
}
-.cck-form-field--with-input.cck-form-field__size--lg .cck-form-field__wrapper,
-.cck-form-field--with-select.cck-form-field__size--lg .cck-form-field__wrapper{
+:where(.cck-form-field--with-input.cck-form-field__size--lg .cck-form-field__wrapper),:where(
+.cck-form-field--with-select.cck-form-field__size--lg .cck-form-field__wrapper){
height:var(--form_field-size-height-lg);
}
-.cck-form-field .cck-label{
+:where(.cck-form-field .cck-label){
margin-left:var(--form_field-spacing-balance-alignment-margin);
}
-.cck-form-field__feedback-wrapper{
+:where(.cck-form-field__feedback-wrapper){
display:flex;
flex-direction:column;
overflow:hidden;
margin-left:var(--form_field-spacing-balance-alignment-margin);
}
-.cck-form-field__feedback-wrapper:empty{
+:where(.cck-form-field__feedback-wrapper):empty{
display:none;
}
-.cck-form-field__wrapper > *:first-child{
+:where(.cck-form-field__wrapper > *):first-child{
border-top-left-radius:var(--form_field-size-radius);
border-bottom-left-radius:var(--form_field-size-radius);
}
-.cck-form-field__wrapper > *:last-child{
+:where(.cck-form-field__wrapper > *):last-child{
border-top-right-radius:var(--form_field-size-radius);
border-bottom-right-radius:var(--form_field-size-radius);
}
-.cck-form-field__input-wrapper{
+:where(.cck-form-field__input-wrapper){
min-width:0;
flex:1;
display:flex;
@@ -687,151 +687,151 @@
border:1px solid var(--form_field-color-border);
}
-.cck-form-field--with-input .cck-form-field__input-wrapper,
-.cck-form-field--with-select .cck-form-field__input-wrapper{
+:where(.cck-form-field--with-input .cck-form-field__input-wrapper),:where(
+.cck-form-field--with-select .cck-form-field__input-wrapper){
padding:0 var(--form_field-spacing-input-wrapper-h-padding);
}
-.cck-form-field--with-chip-list .cck-suffix,
-.cck-form-field--with-chip-list .cck-prefix{
+:where(.cck-form-field--with-chip-list .cck-suffix),:where(
+.cck-form-field--with-chip-list .cck-prefix){
align-self:flex-start;
}
-.cck-form-field--with-chip-list .cck-chip-list{
+:where(.cck-form-field--with-chip-list .cck-chip-list){
flex:1;
}
-.cck-form-field__size--sm.cck-form-field--with-chip-list .cck-suffix{
+:where(.cck-form-field__size--sm.cck-form-field--with-chip-list .cck-suffix){
margin-top:6px;
margin-right:4px;
}
-.cck-form-field__size--md.cck-form-field--with-chip-list .cck-suffix{
+:where(.cck-form-field__size--md.cck-form-field--with-chip-list .cck-suffix){
margin-top:8px;
margin-right:4px;
}
-.cck-form-field__size--lg.cck-form-field--with-chip-list .cck-suffix{
+:where(.cck-form-field__size--lg.cck-form-field--with-chip-list .cck-suffix){
margin-top:12px;
margin-right:8px;
margin-left:4px;
}
-.cck-form-field__size--sm.cck-form-field--with-chip-list .cck-prefix{
+:where(.cck-form-field__size--sm.cck-form-field--with-chip-list .cck-prefix){
margin-top:6px;
margin-left:4px;
}
-.cck-form-field__size--md.cck-form-field--with-chip-list .cck-prefix{
+:where(.cck-form-field__size--md.cck-form-field--with-chip-list .cck-prefix){
margin-top:8px;
margin-left:4px;
}
-.cck-form-field__size--lg.cck-form-field--with-chip-list .cck-prefix{
+:where(.cck-form-field__size--lg.cck-form-field--with-chip-list .cck-prefix){
margin-top:12px;
margin-left:8px;
margin-right:4px;
}
-.cck-form-field--with-chip-list .cck-form-field__input-wrapper{
+:where(.cck-form-field--with-chip-list .cck-form-field__input-wrapper){
padding:4px;
cursor:text;
}
-.cck-form-field--with-textarea .cck-form-field__input-wrapper{
+:where(.cck-form-field--with-textarea .cck-form-field__input-wrapper){
padding:8px;
}
-.cck-form-field--focused .cck-form-field__input-wrapper{
+:where(.cck-form-field--focused .cck-form-field__input-wrapper){
border:1px solid var(--color-brand-default);
box-shadow:inset 0 0 0 1px var(--color-brand-default);
}
-.cck-form-field--error .cck-form-field__input-wrapper{
+:where(.cck-form-field--error .cck-form-field__input-wrapper){
border:1px solid var(--form_field-color-error);
}
-.cck-form-field--focused.cck-form-field--error .cck-form-field__input-wrapper{
+:where(.cck-form-field--focused.cck-form-field--error .cck-form-field__input-wrapper){
box-shadow:inset 0 0 0 1px var(--form_field-color-error);
}
-.cck-hint{
+:where(.cck-hint){
display:flex;
gap:6px;
font:var(--text-sm-regular);
color:var(--color-font-alpha-7);
}
-.cck-hint .cck-svg-icon--default-color .cck-svg-icon__svg{
+:where(.cck-hint .cck-svg-icon--default-color .cck-svg-icon__svg){
fill:currentcolor;
}
-.cck-svg-icon{
+:where(.cck-svg-icon){
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
-.cck-svg-icon__svg{
+:where(.cck-svg-icon__svg){
width:100%;
height:100%;
}
-.cck-svg-icon__size--xs{
+:where(.cck-svg-icon__size--xs){
width:var(--icon-size-xs);
height:var(--icon-size-xs);
}
-.cck-svg-icon__size--sm{
+:where(.cck-svg-icon__size--sm){
width:var(--icon-size-sm);
height:var(--icon-size-sm);
}
-.cck-svg-icon__size--md{
+:where(.cck-svg-icon__size--md){
width:var(--icon-size-md);
height:var(--icon-size-md);
}
-.cck-svg-icon__size--lg{
+:where(.cck-svg-icon__size--lg){
width:var(--icon-size-lg);
height:var(--icon-size-lg);
}
-.cck-svg-icon__size--xl{
+:where(.cck-svg-icon__size--xl){
width:var(--icon-size-xl);
height:var(--icon-size-xl);
}
-.cck-svg-icon__size--2xl{
+:where(.cck-svg-icon__size--2xl){
width:var(--icon-size-2xl);
height:var(--icon-size-2xl);
}
-.cck-svg-icon__color--brand .cck-svg-icon__svg{
+:where(.cck-svg-icon__color--brand .cck-svg-icon__svg){
fill:var(--color-brand-default);
}
-.cck-svg-icon__color--info .cck-svg-icon__svg{
+:where(.cck-svg-icon__color--info .cck-svg-icon__svg){
fill:var(--color-info-default);
}
-.cck-svg-icon__color--warning .cck-svg-icon__svg{
+:where(.cck-svg-icon__color--warning .cck-svg-icon__svg){
fill:var(--color-warning-default);
}
-.cck-svg-icon__color--error .cck-svg-icon__svg{
+:where(.cck-svg-icon__color--error .cck-svg-icon__svg){
fill:var(--color-error-default);
}
-.cck-svg-icon__color--h-contrast .cck-svg-icon__svg{
+:where(.cck-svg-icon__color--h-contrast .cck-svg-icon__svg){
fill:var(--color-h-contrast-default);
}
-.cck-svg-icon__color--m-contrast .cck-svg-icon__svg{
+:where(.cck-svg-icon__color--m-contrast .cck-svg-icon__svg){
fill:var(--color-m-contrast-default);
}
-.cck-icon-button{
+:where(.cck-icon-button){
display:inline-flex;
justify-content:center;
align-items:center;
@@ -842,232 +842,232 @@
box-sizing:border-box;
flex-shrink:0;
}
-.cck-icon-button:disabled{
+:where(.cck-icon-button):disabled{
background-color:var(--color-disabled-surface);
fill:var(--color-disabled-font);
cursor:default;
}
-.cck-icon-button .cck-svg-icon{
+:where(.cck-icon-button .cck-svg-icon){
width:100%;
height:100%;
}
-.cck-icon-button .cck-svg-icon__svg{
+:where(.cck-icon-button .cck-svg-icon__svg){
fill:inherit;
}
-.cck-icon-button__rounded--false{
+:where(.cck-icon-button__rounded--false){
border-radius:4px;
}
-.cck-icon-button__rounded--true{
+:where(.cck-icon-button__rounded--true){
border-radius:50%;
}
-.cck-icon-button__size--sm{
+:where(.cck-icon-button__size--sm){
width:28px;
height:28px;
padding:6px;
}
-.cck-icon-button__size--md{
+:where(.cck-icon-button__size--md){
width:32px;
height:32px;
padding:6px;
}
-.cck-icon-button__size--lg{
+:where(.cck-icon-button__size--lg){
width:40px;
height:40px;
padding:8px;
}
-.cck-icon-button__basic.cck-icon-button__color--brand:not(:disabled){
+:where(.cck-icon-button__basic.cck-icon-button__color--brand):not(:disabled){
background-color:transparent;
fill:var(--color-brand-default);
}
-.cck-icon-button__basic.cck-icon-button__color--brand:focus-visible{
+:where(.cck-icon-button__basic.cck-icon-button__color--brand):focus-visible{
box-shadow:0 0 0 3px var(--color-brand-alpha-5);
}
-.cck-icon-button__basic.cck-icon-button__color--info:not(:disabled){
+:where(.cck-icon-button__basic.cck-icon-button__color--info):not(:disabled){
background-color:transparent;
fill:var(--color-info-default);
}
-.cck-icon-button__basic.cck-icon-button__color--info:focus-visible{
+:where(.cck-icon-button__basic.cck-icon-button__color--info):focus-visible{
box-shadow:0 0 0 3px var(--color-info-alpha-5);
}
-.cck-icon-button__basic.cck-icon-button__color--warning:not(:disabled){
+:where(.cck-icon-button__basic.cck-icon-button__color--warning):not(:disabled){
background-color:transparent;
fill:var(--color-warning-default);
}
-.cck-icon-button__basic.cck-icon-button__color--warning:focus-visible{
+:where(.cck-icon-button__basic.cck-icon-button__color--warning):focus-visible{
box-shadow:0 0 0 3px var(--color-warning-alpha-5);
}
-.cck-icon-button__basic.cck-icon-button__color--error:not(:disabled){
+:where(.cck-icon-button__basic.cck-icon-button__color--error):not(:disabled){
background-color:transparent;
fill:var(--color-error-default);
}
-.cck-icon-button__basic.cck-icon-button__color--error:focus-visible{
+:where(.cck-icon-button__basic.cck-icon-button__color--error):focus-visible{
box-shadow:0 0 0 3px var(--color-error-alpha-5);
}
-.cck-icon-button__basic.cck-icon-button__color--h-contrast:not(:disabled){
+:where(.cck-icon-button__basic.cck-icon-button__color--h-contrast):not(:disabled){
background-color:transparent;
fill:var(--color-h-contrast-default);
}
-.cck-icon-button__basic.cck-icon-button__color--h-contrast:focus-visible{
+:where(.cck-icon-button__basic.cck-icon-button__color--h-contrast):focus-visible{
box-shadow:0 0 0 3px var(--color-h-contrast-alpha-5);
}
-.cck-icon-button__light.cck-icon-button__color--brand:not(:disabled){
+:where(.cck-icon-button__light.cck-icon-button__color--brand):not(:disabled){
background-color:var(--color-brand-alpha-5);
fill:var(--color-brand-default);
}
-.cck-icon-button__light.cck-icon-button__color--brand:focus-visible{
+:where(.cck-icon-button__light.cck-icon-button__color--brand):focus-visible{
box-shadow:0 0 0 3px var(--color-brand-alpha-7);
}
-.cck-icon-button__light.cck-icon-button__color--info:not(:disabled){
+:where(.cck-icon-button__light.cck-icon-button__color--info):not(:disabled){
background-color:var(--color-info-alpha-5);
fill:var(--color-info-default);
}
-.cck-icon-button__light.cck-icon-button__color--info:focus-visible{
+:where(.cck-icon-button__light.cck-icon-button__color--info):focus-visible{
box-shadow:0 0 0 3px var(--color-info-alpha-7);
}
-.cck-icon-button__light.cck-icon-button__color--warning:not(:disabled){
+:where(.cck-icon-button__light.cck-icon-button__color--warning):not(:disabled){
background-color:var(--color-warning-alpha-5);
fill:var(--color-warning-default);
}
-.cck-icon-button__light.cck-icon-button__color--warning:focus-visible{
+:where(.cck-icon-button__light.cck-icon-button__color--warning):focus-visible{
box-shadow:0 0 0 3px var(--color-warning-alpha-7);
}
-.cck-icon-button__light.cck-icon-button__color--error:not(:disabled){
+:where(.cck-icon-button__light.cck-icon-button__color--error):not(:disabled){
background-color:var(--color-error-alpha-5);
fill:var(--color-error-default);
}
-.cck-icon-button__light.cck-icon-button__color--error:focus-visible{
+:where(.cck-icon-button__light.cck-icon-button__color--error):focus-visible{
box-shadow:0 0 0 3px var(--color-error-alpha-7);
}
-.cck-icon-button__light.cck-icon-button__color--h-contrast:not(:disabled){
+:where(.cck-icon-button__light.cck-icon-button__color--h-contrast):not(:disabled){
background-color:var(--color-h-contrast-alpha-5);
fill:var(--color-h-contrast-default);
}
-.cck-icon-button__light.cck-icon-button__color--h-contrast:focus-visible{
+:where(.cck-icon-button__light.cck-icon-button__color--h-contrast):focus-visible{
box-shadow:0 0 0 3px var(--color-h-contrast-alpha-7);
}
-.cck-icon-button__outline{
+:where(.cck-icon-button__outline){
background-color:transparent;
}
-.cck-icon-button__outline.cck-icon-button__color--brand:not(:disabled){
+:where(.cck-icon-button__outline.cck-icon-button__color--brand):not(:disabled){
border:1px solid var(--color-brand-default);
fill:var(--color-brand-default);
}
-.cck-icon-button__outline.cck-icon-button__color--brand:focus-visible{
+:where(.cck-icon-button__outline.cck-icon-button__color--brand):focus-visible{
box-shadow:0 0 0 3px var(--color-brand-alpha-6);
}
-.cck-icon-button__outline.cck-icon-button__color--info:not(:disabled){
+:where(.cck-icon-button__outline.cck-icon-button__color--info):not(:disabled){
border:1px solid var(--color-info-default);
fill:var(--color-info-default);
}
-.cck-icon-button__outline.cck-icon-button__color--info:focus-visible{
+:where(.cck-icon-button__outline.cck-icon-button__color--info):focus-visible{
box-shadow:0 0 0 3px var(--color-info-alpha-6);
}
-.cck-icon-button__outline.cck-icon-button__color--warning:not(:disabled){
+:where(.cck-icon-button__outline.cck-icon-button__color--warning):not(:disabled){
border:1px solid var(--color-warning-default);
fill:var(--color-warning-default);
}
-.cck-icon-button__outline.cck-icon-button__color--warning:focus-visible{
+:where(.cck-icon-button__outline.cck-icon-button__color--warning):focus-visible{
box-shadow:0 0 0 3px var(--color-warning-alpha-6);
}
-.cck-icon-button__outline.cck-icon-button__color--error:not(:disabled){
+:where(.cck-icon-button__outline.cck-icon-button__color--error):not(:disabled){
border:1px solid var(--color-error-default);
fill:var(--color-error-default);
}
-.cck-icon-button__outline.cck-icon-button__color--error:focus-visible{
+:where(.cck-icon-button__outline.cck-icon-button__color--error):focus-visible{
box-shadow:0 0 0 3px var(--color-error-alpha-6);
}
-.cck-icon-button__outline.cck-icon-button__color--h-contrast:not(:disabled){
+:where(.cck-icon-button__outline.cck-icon-button__color--h-contrast):not(:disabled){
border:1px solid var(--color-h-contrast-default);
fill:var(--color-h-contrast-default);
}
-.cck-icon-button__outline.cck-icon-button__color--h-contrast:focus-visible{
+:where(.cck-icon-button__outline.cck-icon-button__color--h-contrast):focus-visible{
box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6);
}
-.cck-icon-button__primary.cck-icon-button__color--brand:not(:disabled){
+:where(.cck-icon-button__primary.cck-icon-button__color--brand):not(:disabled){
background-color:var(--color-brand-default);
fill:var(--color-font-inverse-default);
}
-.cck-icon-button__primary.cck-icon-button__color--brand:focus-visible{
+:where(.cck-icon-button__primary.cck-icon-button__color--brand):focus-visible{
box-shadow:0 0 0 3px var(--color-brand-alpha-6);
}
-.cck-icon-button__primary.cck-icon-button__color--info:not(:disabled){
+:where(.cck-icon-button__primary.cck-icon-button__color--info):not(:disabled){
background-color:var(--color-info-default);
fill:var(--color-font-inverse-default);
}
-.cck-icon-button__primary.cck-icon-button__color--info:focus-visible{
+:where(.cck-icon-button__primary.cck-icon-button__color--info):focus-visible{
box-shadow:0 0 0 3px var(--color-info-alpha-6);
}
-.cck-icon-button__primary.cck-icon-button__color--warning:not(:disabled){
+:where(.cck-icon-button__primary.cck-icon-button__color--warning):not(:disabled){
background-color:var(--color-warning-default);
fill:var(--color-font-inverse-default);
}
-.cck-icon-button__primary.cck-icon-button__color--warning:focus-visible{
+:where(.cck-icon-button__primary.cck-icon-button__color--warning):focus-visible{
box-shadow:0 0 0 3px var(--color-warning-alpha-6);
}
-.cck-icon-button__primary.cck-icon-button__color--error:not(:disabled){
+:where(.cck-icon-button__primary.cck-icon-button__color--error):not(:disabled){
background-color:var(--color-error-default);
fill:var(--color-font-inverse-default);
}
-.cck-icon-button__primary.cck-icon-button__color--error:focus-visible{
+:where(.cck-icon-button__primary.cck-icon-button__color--error):focus-visible{
box-shadow:0 0 0 3px var(--color-error-alpha-6);
}
-.cck-icon-button__primary.cck-icon-button__color--h-contrast:not(:disabled){
+:where(.cck-icon-button__primary.cck-icon-button__color--h-contrast):not(:disabled){
background-color:var(--color-h-contrast-default);
fill:var(--color-font-inverse-default);
}
-.cck-icon-button__primary.cck-icon-button__color--h-contrast:focus-visible{
+:where(.cck-icon-button__primary.cck-icon-button__color--h-contrast):focus-visible{
box-shadow:0 0 0 3px var(--color-h-contrast-alpha-6);
}
-.cck-input{
+:where(.cck-input){
border:none;
outline:none;
background-color:transparent;
@@ -1076,23 +1076,23 @@
text-overflow:ellipsis;
}
-.cck-input::-moz-placeholder{
+:where(.cck-input::-moz-placeholder){
color:var(--color-font-alpha-6);
}
-.cck-input::placeholder{
+:where(.cck-input::placeholder){
color:var(--color-font-alpha-6);
}
-.cck-input:disabled::-moz-placeholder{
+:where(.cck-input::-moz-placeholder):disabled{
color:var(--color-font-alpha-5);
}
-.cck-input:disabled::placeholder{
+:where(.cck-input::placeholder):disabled{
color:var(--color-font-alpha-5);
}
-.cck-input:disabled{
+:where(.cck-input):disabled{
color:var(--color-font-alpha-6);
-webkit-user-select:none;
-moz-user-select:none;
@@ -1100,22 +1100,22 @@
cursor:default;
}
-.cck-label{
+:where(.cck-label){
display:flex;
}
-.cck-label__label-tag{
+:where(.cck-label__label-tag){
font:var(--text-sm-medium);
color:var(--color-font-default);
}
-.cck-label__required-marker{
+:where(.cck-label__required-marker){
font:var(--text-sm-medium);
color:var(--color-brand-default);
margin-left:var(--label-spacing-required-marker-padding-left);
}
-.cck-leading{
+:where(.cck-leading){
flex-grow:0;
color:var(--color-font-alpha-7);
border:1px solid var(--form_field-color-border);
@@ -1129,58 +1129,58 @@
user-select:none;
}
-.cck-leading .cck-select{
+:where(.cck-leading .cck-select){
color:currentcolor;
font:inherit;
}
-.cck-leading__regular{
+:where(.cck-leading__regular){
font:var(--text-sm-regular);
}
-.cck-leading__medium{
+:where(.cck-leading__medium){
font:var(--text-sm-medium);
}
-.cck-leading--clickable{
+:where(.cck-leading--clickable){
cursor:pointer;
transition:background-color 100ms;
}
-.cck-leading .cck-svg-icon.cck-svg-icon--default-size{
+:where(.cck-leading .cck-svg-icon.cck-svg-icon--default-size){
width:var(--icon-size-xs);
height:var(--icon-size-xs);
}
-.cck-leading__color--transparent{
+:where(.cck-leading__color--transparent){
background-color:transparent;
}
-.cck-leading__color--transparent.cck-leading--clickable:active{
+:where(.cck-leading__color--transparent.cck-leading--clickable):active{
background-color:var(--color-surface-inverse-alpha-4);
}
-.cck-leading__color--transparent.cck-leading--clickable:hover:not(:active){
+:where(.cck-leading__color--transparent.cck-leading--clickable):hover:not(:active){
background-color:var(--color-surface-inverse-alpha-1);
}
-.cck-leading__color--grey{
+:where(.cck-leading__color--grey){
background-color:var(--color-surface-inverse-alpha-1);
}
-.cck-leading__color--grey.cck-leading--clickable:active{
+:where(.cck-leading__color--grey.cck-leading--clickable):active{
background-color:var(--color-surface-inverse-alpha-4);
}
-.cck-leading__color--grey.cck-leading--clickable:hover:not(:active){
+:where(.cck-leading__color--grey.cck-leading--clickable):hover:not(:active){
background-color:var(--color-surface-inverse-alpha-3);
}
-.cck-leading .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg{
+:where(.cck-leading .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){
fill:var(--form_field-color-icon);
}
-.cck-menu{
+:where(.cck-menu){
display:flex;
flex-direction:column;
border:1px solid var(--menu-color-border);
@@ -1191,11 +1191,11 @@
background-color:var(--color-surface-default);
}
-.cck-menu__overlay .cck-overlay__backdrop{
+:where(.cck-menu__overlay .cck-overlay__backdrop){
background-color:rgba(0, 0, 0, 0);
}
-.cck-menu-item{
+:where(.cck-menu-item){
display:flex;
align-items:center;
justify-content:flex-start;
@@ -1206,55 +1206,55 @@
margin:0 4px;
}
-.cck-menu-item:not(.cck-menu-item--disabled){
+:where(.cck-menu-item):not(.cck-menu-item--disabled){
cursor:pointer;
}
-.cck-menu-item--disabled{
+:where(.cck-menu-item--disabled){
opacity:0.6;
}
-.cck-menu-item--disabled,
-.cck-menu-item--disabled .cck-svg-icon.cck-svg-icon--default-color{
+:where(.cck-menu-item--disabled),:where(
+.cck-menu-item--disabled .cck-svg-icon.cck-svg-icon--default-color){
color:var(--color-disabled-font);
}
-.cck-menu-item:not(.cck-menu-item--disabled):hover{
+:where(.cck-menu-item):not(.cck-menu-item--disabled):hover{
background-color:var(--color-surface-inverse-alpha-1);
}
-.cck-menu-item__color--default:not(.cck-menu-item--disabled),
-.cck-menu-item__color--default:not(.cck-menu-item--disabled) .cck-svg-icon.cck-svg-icon--default-color{
+:where(.cck-menu-item__color--default):not(.cck-menu-item--disabled),:where(
+.cck-menu-item__color--default:not(.cck-menu-item--disabled) .cck-svg-icon.cck-svg-icon--default-color){
color:var(--color-font-default);
}
-.cck-menu-item__color--error:not(.cck-menu-item--disabled),
-.cck-menu-item__color--error:not(.cck-menu-item--disabled) .cck-svg-icon.cck-svg-icon--default-color{
+:where(.cck-menu-item__color--error):not(.cck-menu-item--disabled),:where(
+.cck-menu-item__color--error:not(.cck-menu-item--disabled) .cck-svg-icon.cck-svg-icon--default-color){
color:var(--color-error-default);
}
-.cck-menu-item__size--sm{
+:where(.cck-menu-item__size--sm){
height:var(--menu_item-size-height-sm);
}
-.cck-menu-item__size--md{
+:where(.cck-menu-item__size--md){
height:var(--menu_item-size-height-md);
}
-.cck-menu-item__size--lg{
+:where(.cck-menu-item__size--lg){
height:var(--menu_item-size-height-lg);
}
-.cck-menu-item .cck-svg-icon.cck-svg-icon--default-size{
+:where(.cck-menu-item .cck-svg-icon.cck-svg-icon--default-size){
width:var(--icon-size-xs);
height:var(--icon-size-xs);
}
-.cck-menu-item .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg{
+:where(.cck-menu-item .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){
fill:currentcolor;
}
-.cck-option{
+:where(.cck-option){
padding:0 var(--option-spacing-item-h-padding);
display:flex;
align-items:center;
@@ -1265,11 +1265,11 @@
border-radius:6px;
}
-.cck-option:not(.cck-option--disabled){
+:where(.cck-option):not(.cck-option--disabled){
cursor:pointer;
}
-.cck-option--disabled{
+:where(.cck-option--disabled){
opacity:0.7;
color:var(--color-disabled-font);
-webkit-user-select:none;
@@ -1277,32 +1277,32 @@
user-select:none;
}
-.cck-option:not(.cck-option--disabled):hover{
+:where(.cck-option):not(.cck-option--disabled):hover{
background-color:var(--option-color-item-hover);
}
-.cck-option .cck-checkbox__input-wrapper{
+:where(.cck-option .cck-checkbox__input-wrapper){
width:var(--checkbox-size-sm);
height:var(--checkbox-size-sm);
}
-.cck-option--single.cck-option--selected{
+:where(.cck-option--single.cck-option--selected){
font:var(--text-sm-medium);
}
-.cck-option__size--sm{
+:where(.cck-option__size--sm){
height:var(--option-size-height-sm);
}
-.cck-option__size--md{
+:where(.cck-option__size--md){
height:var(--option-size-height-md);
}
-.cck-option__size--lg{
+:where(.cck-option__size--lg){
height:var(--option-size-height-lg);
}
-.cck-select__options-wrapper{
+:where(.cck-select__options-wrapper){
max-height:inherit;
height:inherit;
overflow:auto;
@@ -1313,21 +1313,21 @@
border-radius:var(--option-size-overlay-radius);
}
-.cck-option__content-wrapper{
+:where(.cck-option__content-wrapper){
flex:1;
}
-.cck-option__selected-checkmark .cck-svg-icon{
+:where(.cck-option__selected-checkmark .cck-svg-icon){
width:var(--icon-size-sm);
height:var(--icon-size-sm);
}
-.cck-option-group{
+:where(.cck-option-group){
display:flex;
flex-direction:column;
}
-.cck-option-group--label{
+:where(.cck-option-group--label){
display:flex;
align-items:center;
font:var(--text-sm-medium);
@@ -1335,49 +1335,49 @@
padding:0 var(--option-spacing-item-h-padding);
}
-.cck-option-group--disabled .cck-option-group--label{
+:where(.cck-option-group--disabled .cck-option-group--label){
color:var(--color-disabled-font);
-webkit-user-select:none;
-moz-user-select:none;
user-select:none;
}
-.cck-option-group .cck-option{
+:where(.cck-option-group .cck-option){
padding:0 calc(var(--option-spacing-item-h-padding) * 2);
}
-.cck-option-group__size--sm .cck-option-group--label{
+:where(.cck-option-group__size--sm .cck-option-group--label){
height:var(--option-size-height-sm);
}
-.cck-option-group__size--md .cck-option-group--label{
+:where(.cck-option-group__size--md .cck-option-group--label){
height:var(--option-size-height-md);
}
-.cck-option-group__size--lg .cck-option-group--label{
+:where(.cck-option-group__size--lg .cck-option-group--label){
height:var(--option-size-height-lg);
}
-.cck-prefix{
+:where(.cck-prefix){
flex-grow:0;
}
-.cck-prefix .cck-svg-icon.cck-svg-icon--default-size{
+:where(.cck-prefix .cck-svg-icon.cck-svg-icon--default-size){
width:var(--icon-size-xs);
height:var(--icon-size-xs);
}
-.cck-prefix .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg{
+:where(.cck-prefix .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){
fill:var(--form_field-color-icon);
}
-.cck-radio-button__wrapper{
+:where(.cck-radio-button__wrapper){
display:inline-flex;
align-items:center;
vertical-align:middle;
}
-.cck-radio-button__input-wrapper{
+:where(.cck-radio-button__input-wrapper){
display:inline-block;
position:relative;
flex:0 0 auto;
@@ -1386,25 +1386,25 @@
will-change:opacity, transform, border-color, color;
}
-.cck-radio-button__size--sm .cck-radio-button__input-wrapper{
+:where(.cck-radio-button__size--sm .cck-radio-button__input-wrapper){
width:var(--radio-size-sm);
height:var(--radio-size-sm);
padding:var(--radio-spacing-padding-input-sm);
}
-.cck-radio-button__size--md .cck-radio-button__input-wrapper{
+:where(.cck-radio-button__size--md .cck-radio-button__input-wrapper){
width:var(--radio-size-md);
height:var(--radio-size-md);
padding:var(--radio-spacing-padding-input-md);
}
-.cck-radio-button__size--lg .cck-radio-button__input-wrapper{
+:where(.cck-radio-button__size--lg .cck-radio-button__input-wrapper){
width:var(--radio-size-lg);
height:var(--radio-size-lg);
padding:var(--radio-spacing-padding-input-lg);
}
-.cck-radio-button__input{
+:where(.cck-radio-button__input){
position:absolute;
margin:0;
padding:0;
@@ -1418,7 +1418,7 @@
height:100%;
}
-.cck-radio-button__background{
+:where(.cck-radio-button__background){
display:inline-block;
position:relative;
box-sizing:border-box;
@@ -1426,7 +1426,7 @@
height:100%;
}
-.cck-radio-button__background--outer-circle{
+:where(.cck-radio-button__background--outer-circle){
position:absolute;
top:0;
left:0;
@@ -1440,36 +1440,36 @@
transition:border-color 90ms cubic-bezier(0, 0, 0.2, 1);
}
-.cck-radio-button--checked .cck-radio-button__background--outer-circle{
+:where(.cck-radio-button--checked .cck-radio-button__background--outer-circle){
border-width:2px;
}
-.cck-radio-button--disabled.cck-radio-button--unchecked .cck-radio-button__background--outer-circle{
+:where(.cck-radio-button--disabled.cck-radio-button--unchecked .cck-radio-button__background--outer-circle){
background-color:var(--color-disabled-surface);
border-color:var(--color-disabled-border);
}
-.cck-radio-button--disabled.cck-radio-button--checked .cck-radio-button__background--outer-circle{
+:where(.cck-radio-button--disabled.cck-radio-button--checked .cck-radio-button__background--outer-circle){
border-color:var(--color-disabled-border);
}
-.cck-radio-button__color--brand.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle{
+:where(.cck-radio-button__color--brand.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){
border-color:var(--color-brand-default);
}
-.cck-radio-button__color--info.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle{
+:where(.cck-radio-button__color--info.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){
border-color:var(--color-info-default);
}
-.cck-radio-button__color--warning.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle{
+:where(.cck-radio-button__color--warning.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){
border-color:var(--color-warning-default);
}
-.cck-radio-button__color--error.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle{
+:where(.cck-radio-button__color--error.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--outer-circle){
border-color:var(--color-error-default);
}
-.cck-radio-button__background--inner-circle{
+:where(.cck-radio-button__background--inner-circle){
position:absolute;
top:0;
left:0;
@@ -1481,32 +1481,32 @@
transition:transform 90ms cubic-bezier(0.4, 0, 0.6, 1), background-color 90ms cubic-bezier(0.4, 0, 0.6, 1);
}
-.cck-radio-button--checked .cck-radio-button__background--inner-circle{
+:where(.cck-radio-button--checked .cck-radio-button__background--inner-circle){
transform:scale(0.5);
transition:transform 90ms cubic-bezier(0, 0, 0.2, 1), border-color 90ms cubic-bezier(0, 0, 0.2, 1);
}
-.cck-radio-button--disabled.cck-radio-button--checked .cck-radio-button__background--inner-circle{
+:where(.cck-radio-button--disabled.cck-radio-button--checked .cck-radio-button__background--inner-circle){
background-color:var(--color-disabled-border);
}
-.cck-radio-button__color--brand.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle{
+:where(.cck-radio-button__color--brand.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){
background-color:var(--color-brand-default);
}
-.cck-radio-button__color--info.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle{
+:where(.cck-radio-button__color--info.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){
background-color:var(--color-info-default);
}
-.cck-radio-button__color--warning.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle{
+:where(.cck-radio-button__color--warning.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){
background-color:var(--color-warning-default);
}
-.cck-radio-button__color--error.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle{
+:where(.cck-radio-button__color--error.cck-radio-button--checked:not(.cck-radio-button--disabled) .cck-radio-button__background--inner-circle){
background-color:var(--color-error-default);
}
-.cck-radio-button__label{
+:where(.cck-radio-button__label){
margin-left:0;
margin-right:auto;
padding-left:4px;
@@ -1518,33 +1518,33 @@
white-space:nowrap;
}
-.cck-radio-button--disabled .cck-radio-button__label{
+:where(.cck-radio-button--disabled .cck-radio-button__label){
color:var(--color-disabled-font);
}
-.cck-radio-button--disabled .cck-radio-button__input-wrapper,
-.cck-radio-button--disabled .cck-radio-button__label{
+:where(.cck-radio-button--disabled .cck-radio-button__input-wrapper),:where(
+.cck-radio-button--disabled .cck-radio-button__label){
cursor:default;
-webkit-user-select:none;
-moz-user-select:none;
user-select:none;
}
-.cck-radio-group{
+:where(.cck-radio-group){
display:flex;
align-items:flex-start;
}
-.cck-radio-group__row{
+:where(.cck-radio-group__row){
flex-direction:row;
gap:24px;
}
-.cck-radio-group__column{
+:where(.cck-radio-group__column){
flex-direction:column;
}
-.cck-select{
+:where(.cck-select){
display:flex;
align-items:center;
border-radius:6px;
@@ -1553,18 +1553,18 @@
color:var(--color-font-default);
}
-.cck-select.cck-select--disabled{
+:where(.cck-select.cck-select--disabled){
cursor:initial;
-webkit-user-select:none;
-moz-user-select:none;
user-select:none;
}
-.cck-select__placeholder{
+:where(.cck-select__placeholder){
color:var(--color-font-alpha-6);
}
-.cck-select__trigger-wrapper{
+:where(.cck-select__trigger-wrapper){
overflow:hidden;
flex:1;
color:currentcolor;
@@ -1572,35 +1572,35 @@
padding-right:8px;
}
-.cck-select__trigger-value{
+:where(.cck-select__trigger-value){
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
-.cck-select__overlay .cck-overlay__backdrop{
+:where(.cck-select__overlay .cck-overlay__backdrop){
background-color:rgba(0, 0, 0, 0);
}
-.cck-select__dropdown-icon-wrapper .cck-svg-icon{
+:where(.cck-select__dropdown-icon-wrapper .cck-svg-icon){
width:var(--icon-size-sm);
height:var(--icon-size-sm);
}
-.cck-suffix{
+:where(.cck-suffix){
flex-grow:0;
}
-.cck-suffix .cck-svg-icon.cck-svg-icon--default-size{
+:where(.cck-suffix .cck-svg-icon.cck-svg-icon--default-size){
width:var(--icon-size-xs);
height:var(--icon-size-xs);
}
-.cck-suffix .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg{
+:where(.cck-suffix .cck-svg-icon.cck-svg-icon--default-color .cck-svg-icon__svg){
fill:var(--form_field-color-icon-light);
}
-.cck-textarea{
+:where(.cck-textarea){
border:none;
outline:none;
background-color:transparent;
@@ -1612,21 +1612,21 @@
min-width:100%;
}
-.cck-textarea::-moz-placeholder{
+:where(.cck-textarea::-moz-placeholder){
color:var(--color-font-alpha-6);
}
-.cck-textarea::placeholder{
+:where(.cck-textarea::placeholder){
color:var(--color-font-alpha-6);
}
-.cck-textarea::-webkit-resizer{
+:where(.cck-textarea::-webkit-resizer){
width:16px;
height:16px;
background-image:url('data:image/svg+xml;utf8, = () => {
+ return {
+ postcssPlugin: 'where-selector',
+ Rule(rule) {
+ // Skip @rules and existing :where()
+ if (rule.parent?.type === 'atrule' || rule.selector.includes(':where(')) {
+ return;
+ }
+
+ rule.selector = selectorParser((selectors) => {
+ selectors.each((selector) => {
+ // Skip if already wrapped
+ if (selector.nodes.some((node) => node.type === 'pseudo' && node.value === ':where')) {
+ return;
+ }
+
+ // Extract terminal pseudo-classes
+ const terminalPseudos = [];
+
+ // Find the last compound selector by getting the nodes after the last combinator
+ const selectorNodes = selector.nodes;
+ let lastCompoundNodes = [];
+
+ // If there are no combinators, all nodes are in the only compound selector
+ // Otherwise, get all nodes after the last combinator
+ let lastCombinatorIndex = -1;
+ for (let i = 0; i < selectorNodes.length; i++) {
+ if (selectorNodes[i].type === 'combinator') {
+ lastCombinatorIndex = i;
+ }
+ }
+
+ if (lastCombinatorIndex >= 0) {
+ lastCompoundNodes = selectorNodes.slice(lastCombinatorIndex + 1);
+ } else {
+ lastCompoundNodes = [...selectorNodes];
+ }
+
+ // Extract pseudo-classes from the last compound selector
+ const pseudosToExtract = [];
+
+ for (let i = 0; i < lastCompoundNodes.length; i++) {
+ const node = lastCompoundNodes[i];
+ if (node.type === 'pseudo' && !node.value.includes('::')) {
+ pseudosToExtract.push(node);
+ }
+ }
+
+ // Remove and store the terminal pseudos
+ for (const pseudo of pseudosToExtract) {
+ terminalPseudos.push(pseudo.clone());
+ pseudo.remove();
+ }
+
+ // Create deep clone of the selector without terminal pseudos
+ const selectorClone = selector.clone();
+
+ // Create a :where() wrapper around the selector without pseudos
+ const whereWrapper = selectorParser.pseudo({
+ value: ':where',
+ nodes: [selectorClone],
+ });
+
+ // Replace the original selector with the wrapper
+ selector.nodes = [whereWrapper];
+
+ // Append all the terminal pseudo-classes to the selector (outside the :where())
+ for (const pseudo of terminalPseudos) {
+ selector.append(pseudo);
+ }
+ });
+ }).processSync(rule.selector);
+ },
+ };
+};
+
+whereSelectorPlugin.postcss = true;
diff --git a/tools/workspace-plugin/src/executors/token-generator/builder/build-core.ts b/tools/workspace-plugin/src/executors/token-generator/builder/build-core.ts
index 6b0e9578..447d2479 100644
--- a/tools/workspace-plugin/src/executors/token-generator/builder/build-core.ts
+++ b/tools/workspace-plugin/src/executors/token-generator/builder/build-core.ts
@@ -77,12 +77,14 @@ function buildCoreFiles(tokenDictionary: TokenDictionary, coreDir: string, theme
}
function buildUseAllFile(generatedFileNames: string[], collectionModeNames: TokenCollectionModeNames, coreDir: string) {
+ // Imports
let useAllFileContent = getDefaultFileHeader();
generatedFileNames.forEach((fileName) => {
const usePath = getImportFileName(fileName);
useAllFileContent += `@use './${usePath}' as *;\n`;
});
+ // use_all
let useAllMixinContent = '@mixin use_all {';
const useAllMixinIncludeContent = Object.entries(collectionModeNames).reduce(
(result, [collectionName, modeNames]) => {
@@ -97,6 +99,7 @@ function buildUseAllFile(generatedFileNames: string[], collectionModeNames: Toke
useAllMixinContent += useAllMixinIncludeContent;
useAllMixinContent += '\n}';
+ // Save file
const useAllFilePath = path.join(coreDir, '_use-all.scss');
fs.writeFileSync(useAllFilePath, useAllFileContent + '\n\n' + useAllMixinContent);
Logger.success(`✔ [CREATED]: ${useAllFilePath}`);
diff --git a/tools/workspace-plugin/src/generators/ui-core-component/generator.ts b/tools/workspace-plugin/src/generators/ui-core-component/generator.ts
index ad091803..257a2081 100644
--- a/tools/workspace-plugin/src/generators/ui-core-component/generator.ts
+++ b/tools/workspace-plugin/src/generators/ui-core-component/generator.ts
@@ -36,7 +36,10 @@ export async function uiCoreComponentGenerator(tree: Tree, schema: UiCoreCompone
}
await generateComponent(options);
- generateStorybook(options);
+
+ if (!schema.skipStorybook) {
+ generateStorybook(options);
+ }
await formatFiles(tree);
}
diff --git a/tools/workspace-plugin/src/generators/ui-core-component/model.ts b/tools/workspace-plugin/src/generators/ui-core-component/model.ts
index 0e17159e..2f07a7e5 100644
--- a/tools/workspace-plugin/src/generators/ui-core-component/model.ts
+++ b/tools/workspace-plugin/src/generators/ui-core-component/model.ts
@@ -2,7 +2,6 @@ import { Tree } from '@nx/devkit';
export interface UiCoreComponentGeneratorOptions {
tree: Tree;
-
componentName: {
className: string; // `FormField`
propertyName: string; // `formField`
diff --git a/tools/workspace-plugin/src/generators/ui-core-component/schema.d.ts b/tools/workspace-plugin/src/generators/ui-core-component/schema.d.ts
index 8012f11b..0f0db7c1 100644
--- a/tools/workspace-plugin/src/generators/ui-core-component/schema.d.ts
+++ b/tools/workspace-plugin/src/generators/ui-core-component/schema.d.ts
@@ -2,4 +2,5 @@ export interface UiCoreComponentGeneratorSchema {
name: string; // Example: avatarGroup
exitingLibraryName: string; // Example: avatar
newLibraryName: string; // The name of the new library to create
+ skipStorybook: boolean; // Whether to skip Storybook setup
}
diff --git a/tools/workspace-plugin/src/generators/ui-core-component/schema.json b/tools/workspace-plugin/src/generators/ui-core-component/schema.json
index 4f88faae..7be5fcee 100644
--- a/tools/workspace-plugin/src/generators/ui-core-component/schema.json
+++ b/tools/workspace-plugin/src/generators/ui-core-component/schema.json
@@ -11,11 +11,28 @@
"exitingLibraryName": {
"type": "string",
"description": "The name of the library to add the component to",
- "enum": ["Avatar", "Button", "Checkbox", "Divider", "FormField", "Icon", "Menu", "Overlay", "Radio", "Toggle"]
+ "enum": [
+ "Avatar",
+ "Button",
+ "Checkbox",
+ "Divider",
+ "FormField",
+ "Icon",
+ "Menu",
+ "Overlay",
+ "Radio",
+ "Toggle",
+ "Accordion"
+ ]
},
"newLibraryName": {
"type": "string",
"description": "The name of the new library to create"
+ },
+ "skipStorybook": {
+ "type": "boolean",
+ "default": false,
+ "description": "Skip Storybook generation"
}
},
"required": ["name"]
diff --git a/tools/workspace-plugin/src/generators/ui-core-component/utils/generator-schema.util.ts b/tools/workspace-plugin/src/generators/ui-core-component/utils/generator-schema.util.ts
index 4c7021a1..3a8ae8e7 100644
--- a/tools/workspace-plugin/src/generators/ui-core-component/utils/generator-schema.util.ts
+++ b/tools/workspace-plugin/src/generators/ui-core-component/utils/generator-schema.util.ts
@@ -12,7 +12,7 @@ interface NxGeneratorSchema {
export function updateGeneratorSchema(options: UiCoreComponentGeneratorOptions) {
if (options.newLibrary) {
const schema = getSchemaJson(options);
- schema.properties.exitingLibraryName.enum.push(options.libraryName.fileName);
+ schema.properties.exitingLibraryName.enum.push(options.libraryName.className);
options.tree.write(options.generatorSchemaFilePath, JSON.stringify(schema, null, 2));
}
}
diff --git a/tools/workspace-plugin/src/generators/ui-core-component/utils/ui-base-components-name.util.ts b/tools/workspace-plugin/src/generators/ui-core-component/utils/ui-base-components-name.util.ts
index 619a5f46..0a47c933 100644
--- a/tools/workspace-plugin/src/generators/ui-core-component/utils/ui-base-components-name.util.ts
+++ b/tools/workspace-plugin/src/generators/ui-core-component/utils/ui-base-components-name.util.ts
@@ -2,17 +2,22 @@ import { errorMessages } from './errors';
import { UiCoreComponentGeneratorOptions } from '../model';
export function updateUiBaseComponentsNameFile(options: UiCoreComponentGeneratorOptions) {
- const originalFileContent = options.tree.read(options.uiBaseComponentsNameFilePath, 'utf-8');
+ let content = options.tree.read(options.uiBaseComponentsNameFilePath, 'utf-8');
- if (!originalFileContent) {
+ if (!content) {
throw new Error(errorMessages.uiBaseComponentsName.notFoundOrEmpty(options));
}
- const newContent = options.newLibrary
- ? getNewLibraryContent(originalFileContent, options)
- : getExitingLibraryContent(originalFileContent, options);
+ content = options.newLibrary ? getNewLibraryContent(content, options) : getExitingLibraryContent(content, options);
- options.tree.write(options.uiBaseComponentsNameFilePath, newContent);
+ if (options.newLibrary) {
+ content = content.replace(
+ /(UIBaseComponentsName[\s\S]*?)(;)/,
+ `$1 | ${options.libraryName.className}ComponentName$2`
+ );
+ }
+
+ options.tree.write(options.uiBaseComponentsNameFilePath, content);
}
function getExitingLibraryContent(originalFileContent: string, options: UiCoreComponentGeneratorOptions) {
@@ -36,6 +41,6 @@ function getNewLibraryContent(originalFileContent: string, options: UiCoreCompon
return (
originalFileContent +
- `\ntype ${options.libraryName.className}ComponentName = '${options.componentName.propertyName}';\n`
+ `type ${options.libraryName.className}ComponentName = '${options.componentName.propertyName}';\n`
);
}
diff --git a/tsconfig.base.json b/tsconfig.base.json
index aeea99eb..f9037527 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -20,6 +20,7 @@
"allowSyntheticDefaultImports": true,
"baseUrl": ".",
"paths": {
+ "@cocokits/angular-accordion": ["packages/angular/accordion/src/index.ts"],
"@cocokits/angular-avatar": ["packages/angular/avatar/src/index.ts"],
"@cocokits/angular-button": ["packages/angular/button/src/index.ts"],
"@cocokits/angular-cdk": ["packages/angular/cdk/src/index.ts"],
@@ -38,6 +39,7 @@
"@cocokits/common-kits-doc/*": ["packages/internal/common-kits-doc/src/*.ts"],
"@cocokits/common-utils": ["packages/common/utils/src/index.ts"],
"@cocokits/core": ["packages/common/core/src/index.ts"],
+ "@cocokits/react-accordion": ["packages/react/accordion/src/index.ts"],
"@cocokits/react-avatar": ["packages/react/avatar/src/index.ts"],
"@cocokits/react-button": ["packages/react/button/src/index.ts"],
"@cocokits/react-cdk": ["packages/react/cdk/src/index.ts"],
diff --git a/tsconfig.storybook-manager-paths.json b/tsconfig.storybook-manager-paths.json
index b95a515a..11cf23bf 100644
--- a/tsconfig.storybook-manager-paths.json
+++ b/tsconfig.storybook-manager-paths.json
@@ -235,6 +235,18 @@
"../packages/react/avatar/src/",
"../../packages/react/avatar/src/",
"../../../packages/react/avatar/src/"
+ ],
+ "@cocokits/angular-accordion": [
+ "packages/angular/accordion/src/",
+ "../packages/angular/accordion/src/",
+ "../../packages/angular/accordion/src/",
+ "../../../packages/angular/accordion/src/"
+ ],
+ "@cocokits/react-accordion": [
+ "packages/react/accordion/src/",
+ "../packages/react/accordion/src/",
+ "../../packages/react/accordion/src/",
+ "../../../packages/react/accordion/src/"
]
}
}