@cognite/aura 1.47174.0 → 1.47181.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognite/aura",
-  "version": "1.47174.0",
+  "version": "1.47181.0",
   "license": "MIT",
   "type": "module",
   "sideEffects": [

package/src/components/ui/core/count/count.md

@@ -0,0 +1,33 @@
+Use a Count to surface a quantity inline, such as a reading, a total, or a number of selected items.
+
+## When to use
+
+- Showing a quantity associated with a label, tab, list item, or [Card](?path=/docs/primitives-card--docs) header.
+- Surfacing unread counts or selection totals without taking primary focus.
+
+## When to use something else
+
+- Use a [Badge](?path=/docs/primitives-badge--docs) when the value represents a status or category rather than a quantity.
+- Use the `count` prop on a [Toggle](?path=/docs/primitives-toggle--docs) or a Badge in a [Tab](?path=/docs/primitives-tabs--docs) for small counts inside a control.
+
+## Content
+
+- Put the number in `CountValue`.
+- Add a `CountUnit` below the value for units of measure such as °C or %.
+- Keep values short; abbreviate large numbers, such as 1.2k.
+
+## Variants
+
+- `default` for neutral quantities.
+- `success`, `warning`, and `critical` when the value is within, near, or outside an expected range.
+- Pair a status variant with nearby text that explains it, so meaning does not rely on color alone.
+
+## Dos and don'ts
+
+- **Do** keep the same variant for the same meaning across a view.
+- **Don't** use status variants for decoration.
+- **Don't** put actions inside a Count.
+
+## Often used with
+
+[Card](?path=/docs/primitives-card--docs), [Tabs](?path=/docs/primitives-tabs--docs), [Badge](?path=/docs/primitives-badge--docs), [Label](?path=/docs/primitives-label--docs), and list items.

package/src/components/ui/core/separator/separator.md

@@ -0,0 +1,32 @@
+Use a Separator to draw a subtle 1px divider between distinct sections of content.
+
+## When to use
+
+- Creating visual relief between related groups of content.
+- Dividing sections within toolbars, menus, cards, or forms.
+
+## When to use something else
+
+- Use whitespace alone when the layout is sparse.
+- Use headings, a [Card](?path=/docs/primitives-card--docs), or background regions when sections need semantic grouping.
+
+## Orientation
+
+- Separators are horizontal by default and fill the width of their container.
+- Set `orientation="vertical"` to divide items in a row, such as [Buttons](?path=/docs/primitives-button--docs) in a [Toolbar](?path=/docs/primitives-toolbar--docs).
+- A vertical Separator fills the height of its container, so give the row a height, such as 16px between buttons or form elements.
+
+## Dos and don'ts
+
+- **Do** use 16px vertical Separators between buttons or horizontal form elements.
+- **Don't** place Separators between every element.
+- **Don't** use bold or colorful Separators; keep them subtle.
+- **Don't** replace semantic headings or landmarks with Separators.
+
+## Behavior
+
+- A Separator has the `separator` role and exposes its orientation to assistive technology.
+
+## Often used with
+
+[Toolbar](?path=/docs/primitives-toolbar--docs), [Card](?path=/docs/primitives-card--docs) headers and footers, [Accordion](?path=/docs/primitives-accordion--docs), menus, and dense form sections.

package/src/components/ui/core/skeleton/skeleton.md

@@ -0,0 +1,33 @@
+Use a Skeleton as a loading placeholder that mimics the shape of incoming content.
+Skeletons reduce perceived wait time and prevent layout shift when the content arrives.
+
+## When to use
+
+- Content is loading and the shape of the result is predictable, such as cards, lists, or table rows.
+- Reducing layout shift while data fetches in the background.
+
+## When to use something else
+
+- Show nothing when loading is very short, under about 300ms.
+- Use a [Loader](?path=/docs/primitives-loader--docs) or [Progress](?path=/docs/primitives-progress--docs) when the shape of the content is unpredictable.
+
+## Shapes
+
+- Size and shape each Skeleton with `className` to match the content it stands in for.
+- Use short, full-width bars for lines of text, `rounded-full` for avatars, and larger blocks for images or cards.
+- Compose several Skeletons to outline a whole card, list item, or table row.
+
+## Dos and don'ts
+
+- **Do** match Skeleton shapes to the actual content layout.
+- **Do** replace the whole placeholder at once when the content loads.
+- **Don't** add extra animation; the built-in subtle pulse is sufficient.
+
+## Accessibility
+
+- Skeletons have no role by default, so they are not announced.
+- Set `role="status"` and an `aria-label` such as "Loading" on the loading region so screen reader users know content is on its way.
+
+## Often used with
+
+[Card](?path=/docs/primitives-card--docs), [Data Grid](?path=/docs/primitives-datagrid--docs), [Item](?path=/docs/primitives-item--docs) lists, and pagination.

package/src/components/ui/core/slider/slider.md

@@ -0,0 +1,41 @@
+Use a Slider to select a single value or a range from a continuous scale.
+Sliders give quick visual feedback and suit approximate rather than precise values.
+
+## When to use
+
+- Adjusting continuous values where precision is less important than visual feedback, such as volume, brightness, or a price filter.
+- Providing immediate visual feedback, such as media scrubbing or live previews.
+- Selecting a minimum and maximum range.
+
+## When to use something else
+
+- Use an [Input](?path=/docs/primitives-input--docs) or [Select](?path=/docs/primitives-select--docs) when precise numeric entry is required.
+- Use a [Radio Group](?path=/docs/primitives-radio-group--docs) or [Select](?path=/docs/primitives-select--docs) when the choice is categorical rather than continuous.
+
+## Values
+
+- Pass one value, such as `defaultValue={[50]}`, for a single thumb.
+- Pass two values, such as `defaultValue={[20, 80]}`, for a range with two thumbs.
+- Set `min`, `max`, and `step` to match the scale; the defaults are 0, 100, and 1.
+- Add an adjacent [Input](?path=/docs/primitives-input--docs) when users may also need to type an exact value.
+
+## Feedback
+
+- Apply changes as the user drags when the result is cheap to show, such as a live preview.
+- Apply changes on submit when each change would reload the screen or cause visual disruption, and say so in [Helper Text](?path=/docs/primitives-helper-text--docs).
+
+## Dos and don'ts
+
+- **Do** give every Slider a visible [Label](?path=/docs/primitives-label--docs).
+- **Do** show the current value next to the Slider when it matters.
+- **Don't** use a Slider for small sets of discrete options.
+
+## Behavior
+
+- Arrow keys move the focused thumb by one `step`, and Page Up and Page Down move it in larger increments.
+- Set `orientation="vertical"` for a vertical Slider.
+- `disabled` blocks all interaction and dims the track and thumbs.
+
+## Often used with
+
+[Label](?path=/docs/primitives-label--docs), [Helper Text](?path=/docs/primitives-helper-text--docs), and an adjacent [Input](?path=/docs/primitives-input--docs) for precise numeric entry.

package/src/components/ui/core/toggle/toggle.md

@@ -0,0 +1,39 @@
+Use a Toggle for a single pressable button that turns one option or formatting command on or off.
+
+## When to use
+
+- A single binary option needs a visible pressed or unpressed state, such as bold text or mute.
+- A filter in a [Toolbar](?path=/docs/primitives-toolbar--docs) can be switched on or off and benefits from a count of matching items.
+
+## When to use something else
+
+- Use a Toggle Group when two to four related Toggles belong together.
+- Use a [Switch](?path=/docs/primitives-switch--docs) when the change takes immediate app-level effect.
+- Use a [Button](?path=/docs/primitives-button--docs) for a one-time command.
+
+## Content
+
+- Pass an icon as children for an icon-only Toggle, and give it an `aria-label`.
+- Use the `icon`, `label`, and `count` props for a composed Toggle with text and an optional count.
+- Keep labels to one or two words.
+
+## Sizes
+
+- `sm` is 28px tall, `lg` is 32px, and `default` is 36px.
+- Match the size of neighbouring controls in the same toolbar.
+
+## Dos and don'ts
+
+- **Do** pair icon-only Toggles with a [Tooltip](?path=/docs/primitives-tooltip--docs).
+- **Do** use `defaultPressed` for uncontrolled usage, or `pressed` with `onPressedChange` when the state lives elsewhere.
+- **Don't** change a Toggle's label when it is pressed; the pressed style already shows the state.
+
+## Behavior
+
+- Clicking or pressing Space or Enter flips the pressed state.
+- The pressed state is exposed to assistive technology through `aria-pressed`.
+- `disabled` blocks all pointer and keyboard interaction.
+
+## Often used with
+
+[Toolbar](?path=/docs/primitives-toolbar--docs), [Tooltip](?path=/docs/primitives-tooltip--docs) for icon-only Toggles, and Toggle Group.

package/src/components/ui/core/tooltip/tooltip.md

@@ -0,0 +1,41 @@
+Use a Tooltip to show a short hint when a user hovers over or focuses an element.
+Tooltips hold no interactive content.
+
+## When to use
+
+- Clarifying a control or icon in one line or sentence.
+- Naming an icon-only [Button](?path=/docs/primitives-button--docs) or [Toggle](?path=/docs/primitives-toggle--docs).
+- Showing the full text of a truncated label, for example in a [Breadcrumb](?path=/docs/primitives-breadcrumb--docs).
+
+## When to use something else
+
+- Show content that is essential to the task inline, or in a [Dialog](?path=/docs/primitives-dialog--docs).
+- Use a [Popover](?path=/docs/primitives-popover--docs) when users need to interact with the content.
+- Use a [Hover Card](?path=/docs/primitives-hover-card--docs) for a richer preview of a linked item.
+- Use [Helper Text](?path=/docs/primitives-helper-text--docs) to explain a form field.
+
+## Content
+
+- Keep Tooltip text to a single short sentence.
+- Don't repeat the trigger's visible label.
+
+## Placement
+
+- Tooltips appear above the trigger by default.
+- Set `side` on `TooltipContent` to `right`, `bottom`, or `left` when the top would cover important content or the screen edge.
+
+## Dos and don'ts
+
+- **Do** wrap the app or view in a single `TooltipProvider` so Tooltips share an open delay.
+- **Do** attach Tooltips to focusable triggers, so keyboard users can reach them.
+- **Don't** put links, buttons, or form controls inside a Tooltip.
+- **Don't** put a Tooltip on a disabled control; explain why it is disabled inline instead.
+
+## Behavior
+
+- Inside a `TooltipProvider`, a Tooltip opens after a 300ms hover delay, which `delayDuration` changes, or immediately on keyboard focus.
+- It closes when the pointer leaves the trigger, the trigger loses focus, or the user presses Escape.
+
+## Often used with
+
+Icon-only [Buttons](?path=/docs/primitives-button--docs), [Toggle](?path=/docs/primitives-toggle--docs), [Breadcrumb](?path=/docs/primitives-breadcrumb--docs), and [Label](?path=/docs/primitives-label--docs).