@digdir/designsystemet-react 1.0.0-next.47 → 1.0.0-next.49

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

@@ -1,16 +1,18 @@
 'use client';
 import { Field as Field$1 } from './Field.js';
-import { FieldAffixes, FieldAffix } from './FieldAffix.js';
+import { FieldAffix, FieldAffixes } from './FieldAffix.js';
 import { FieldCounter } from './FieldCounter.js';
 import { FieldDescription } from './FieldDescription.js';
 
 /**
+ * Field component, used to wrap a form field.
+ *
  * @example
- * <Field>
- *  <Label>Label text</Label>
- *  <Field.Description>Description</Field.Description>
- *  <Input />
- *  <ValidationMessage>Validation message</ValidationMessage>
+ * <Field data-my-field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
  * </Field>
  */
 const Field = Object.assign(Field$1, {

package/dist/esm/components/Fieldset/Fieldset.js

@@ -3,6 +3,21 @@ import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
+/**
+ * Fieldset component, used to wrap a form field. Uses native `fieldset` element.
+ *
+ * @example
+ * <Fieldset>
+ *   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ *   <Fieldset.Description>
+ *     Gi en kort beskrivelse i begge feltene
+ *   </Fieldset.Description>
+ *   <Field>
+ *     <Label>Kort beskrivelse</Label>
+ *     <Input />
+ *   </Field>
+ * </Fieldset>
+ */
 const Fieldset = forwardRef(function Fieldset({ className, ...rest }, ref) {
     return (jsx("fieldset", { className: cl('ds-fieldset', className), ref: ref, ...rest }));
 });

package/dist/esm/components/Fieldset/FieldsetDescription.js

@@ -3,6 +3,14 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Paragraph } from '../Paragraph/Paragraph.js';
 
+/**
+ * FieldsetDescription component, used to display a description for a fieldset.
+ *
+ * @example
+ * <Fieldset.Description>
+ *   Gi en kort beskrivelse i begge feltene
+ * </Fieldset.Description>
+ */
 const FieldsetDescription = forwardRef(function FieldsetDescription(rest, ref) {
     return jsx(Paragraph, { ref: ref, ...rest });
 });

package/dist/esm/components/Fieldset/FieldsetLegend.js

@@ -3,6 +3,12 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Label } from '../Label/Label.js';
 
+/**
+ * FieldsetLegend component, used to display a legend for a fieldset.
+ *
+ * @example
+ * <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ */
 const FieldsetLegend = forwardRef(function FieldsetLegend(rest, ref) {
     return (jsx(Label, { asChild: true, children: jsx("legend", { ref: ref, ...rest }) }));
 });

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

@@ -4,11 +4,18 @@ import { FieldsetDescription } from './FieldsetDescription.js';
 import { FieldsetLegend } from './FieldsetLegend.js';
 
 /**
+ * Fieldset component, used to wrap a form field.
+ *
  * @example
  * <Fieldset>
- *  <Fieldset.Legend>Legend text</Fieldset.Legend>
- *  <Fieldset.Description>Description text</Fieldset.Description>
- *  ...input components
+ *   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ *   <Fieldset.Description>
+ *     Gi en kort beskrivelse i begge feltene
+ *   </Fieldset.Description>
+ *   <Field>
+ *     <Label>Kort beskrivelse</Label>
+ *     <Input />
+ *   </Field>
  * </Fieldset>
  */
 const Fieldset = Object.assign(Fieldset$1, {

package/dist/esm/components/Input/Input.js

@@ -3,12 +3,11 @@ import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
-/** Input field
+/**
+ * Input renders a native `input` element.
  *
  * @example
- * ```tsx
  * <Input />
- * ```
  */
 const Input = forwardRef(function Input({ type = 'text', className, onChange, onClick, ...rest }, ref) {
     return (jsx("input", { className: cl(`ds-input`, className), ref: ref, type: type, onChange: (event) => rest.readOnly || onChange?.(event), onClick: (event) => {

package/dist/esm/components/Label/Label.js

@@ -5,10 +5,10 @@ import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
 /**
- * Use `Label` for labels.
+ * Use `Label` for labels. Renders a native `label` element.
  *
  * @example
- * <Label data-size='lg'>Label</Label>
+ * <Label data-size='lg' weight='medium'>Label</Label>
  */
 const Label = forwardRef(function Label({ className, weight = 'medium', asChild, ...rest }, ref) {
     const Component = asChild ? Slot : 'label';

package/dist/esm/components/Link/Link.js

@@ -4,6 +4,12 @@ import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
+/**
+ * Link component, renders a native `a` element.
+ *
+ * @example
+ * <Link href='#'>Link</Link>
+ */
 const Link = forwardRef(({ asChild, className, ...rest }, ref) => {
     const Component = asChild ? Slot : 'a';
     return (jsx(Component, { className: cl('ds-link', className), ref: ref, ...rest }));

package/dist/esm/components/List/Lists.js

@@ -8,9 +8,29 @@ const render = (tagName, { asChild, className, ...rest }, ref) => {
     const Component = asChild ? Slot : tagName;
     return jsx(Component, { className: cl(`ds-list`, className), ref: ref, ...rest });
 };
+/**
+ * ListUnordered component, used to display a list of items.
+ * Renders a native `ul` element.
+ *
+ * @example
+ * <List.Unordered>
+ *   <List.Item>Item 1</List.Item>
+ *   <List.Item>Item 2</List.Item>
+ * </List.Unordered>
+ */
 const ListUnordered = forwardRef(function ListUnordered(props, ref) {
     return render('ul', props, ref);
 });
+/**
+ * ListOrdered component, used to display a list of items.
+ * Renders a native `ol` element.
+ *
+ * @example
+ * <List.Ordered>
+ *   <List.Item>Item 1</List.Item>
+ *   <List.Item>Item 2</List.Item>
+ * </List.Ordered>
+ */
 const ListOrdered = forwardRef(function ListOrdered(props, ref) {
     return render('ol', props, ref);
 });

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

@@ -1,6 +1,6 @@
 'use client';
 import { ListItem } from './ListItem.js';
-import { ListOrdered, ListUnordered } from './Lists.js';
+import { ListUnordered, ListOrdered } from './Lists.js';
 
 const List = {
     Item: ListItem,

package/dist/esm/components/Pagination/Pagination.js

@@ -4,6 +4,24 @@ import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
+/**
+ * Pagination component, used to navigate through a list of items.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 1'>1</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 2'>2</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
 const Pagination = forwardRef(function Pagination({ 'aria-label': ariaLabel = 'Sidenavigering', asChild, className, ...rest }, ref) {
     const Component = asChild ? Slot : 'nav';
     return (jsx(Component, { "aria-label": ariaLabel, className: cl('ds-pagination', className), ref: ref, ...rest }));

package/dist/esm/components/Pagination/PaginationButton.js

@@ -3,6 +3,14 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Button } from '../Button/Button.js';
 
+/**
+ * PaginationButton component, use within a Pagination.Item.
+ *
+ * @example
+ * <Pagination.Item>
+ *   <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ * </Pagination.Item>
+ */
 const PaginationButton = forwardRef(function PaginationButton(rest, ref) {
     return jsx(Button, { ref: ref, ...rest });
 });

package/dist/esm/components/Pagination/PaginationItem.js

@@ -3,6 +3,16 @@ import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 
+/**
+ * PaginationItem component, use within a Pagination.List.
+ *
+ * @example
+ * <Pagination.List>
+ *   <Pagination.Item>
+ *     <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *   </Pagination.Item>
+ * </Pagination.List>
+ */
 const PaginationItem = forwardRef(function PaginationItem({ asChild, className, ...rest }, ref) {
     const Component = asChild ? Slot : 'li';
     return jsx(Component, { ref: ref, ...rest });

package/dist/esm/components/Pagination/PaginationList.js

@@ -3,6 +3,18 @@ import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 
+/**
+ * PaginationList component, use within a Pagination.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
 const PaginationList = forwardRef(function PaginationList({ asChild, ...rest }, ref) {
     const Component = asChild ? Slot : 'ul';
     return jsx(Component, { ref: ref, ...rest });

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

@@ -4,6 +4,24 @@ import { PaginationButton } from './PaginationButton.js';
 import { PaginationItem } from './PaginationItem.js';
 import { PaginationList } from './PaginationList.js';
 
+/**
+ * Pagination component, used to navigate through a list of items.
+ *
+ * @example
+ * <Pagination>
+ *   <Pagination.List>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 1'>1</Pagination.Button>
+ *     </Pagination.Item>
+ *     <Pagination.Item>
+ *       <Pagination.Button aria-label='Side 2'>2</Pagination.Button>
+ *     </Pagination.Item>
+ *   </Pagination.List>
+ * </Pagination>
+ */
 const Pagination = Object.assign(Pagination$1, {
     List: PaginationList,
     Item: PaginationItem,

package/dist/esm/components/Paragraph/Paragraph.js

@@ -6,6 +6,7 @@ import { forwardRef } from 'react';
 
 /**
  * Use `Paragraph` to display text with paragraph text styles.
+ * Renders a native `p` element.
  *
  * @example
  * <Paragraph data-size='lg'>Paragraph</Paragraph>

package/dist/esm/components/Popover/Popover.js

@@ -7,7 +7,24 @@ import cl from 'clsx/lite';
 import { forwardRef, useRef, useContext, useState, useEffect } from 'react';
 import { Context } from './PopoverTriggerContext.js';
 
-const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, open, placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
+/**
+ * Popover component, used to display content in a popover over an element.
+ *
+ * @example with TriggerContext
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ *
+ * @example without TriggerContext
+ * <Button popovertarget="my-popover">Open Popover</Button>
+ * <Popover id="my-popover">
+ *   Content
+ * </Popover>
+ */
+const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, open, 'data-variant': variant = 'default', placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
     const Component = asChild ? Slot : 'div';
     const popoverRef = useRef(null);
     const mergedRefs = useMergeRefs([popoverRef, ref]);
@@ -78,7 +95,7 @@ const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, op
     }, [id]);
     return (jsx(Component, { className: cl('ds-popover', className), id: id || popoverId, 
         // @ts-ignore @types/react-dom does not understand popover yet
-        popover: 'manual', ref: mergedRefs, ...rest }));
+        popover: 'manual', "data-variant": variant, ref: mergedRefs, ...rest }));
 });
 const arrowPseudoElement = {
     name: 'ArrowPseudoElement',

package/dist/esm/components/Popover/PopoverTrigger.js

@@ -1,18 +1,43 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
-import { forwardRef, useContext } from 'react';
+import { forwardRef, useContext, version } from 'react';
 import { Button } from '../Button/Button.js';
 import { Context } from './PopoverTriggerContext.js';
 
+/**
+ * PopoverTrigger component, used to trigger a popover.
+ *
+ * @example
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ *
+ * @example inline
+ * <Popover.TriggerContext>
+ *   <Paragraph>
+ *    We can use it <Popover.Trigger inline={true}>inline</Popover.Trigger>.
+ *   </Paragraph>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ */
 const PopoverTrigger = forwardRef(function PopoverTrigger({ id, inline, asChild, ...rest }, ref) {
     const { popoverId } = useContext(Context);
     const Component = asChild ? Slot : inline ? 'button' : Button;
-    return (jsx(Component, { ref: ref, popovertarget: popoverId, ...(inline
+    const popoverProps = Object.assign({
+        [version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: popoverId,
+        ...(inline
             ? {
                 'data-popover': 'inline',
             }
-            : {}), ...rest }));
+            : {}),
+    }, rest);
+    return jsx(Component, { ref: ref, ...popoverProps });
 });
 
 export { PopoverTrigger };

package/dist/esm/components/Popover/PopoverTriggerContext.js

@@ -2,6 +2,17 @@
 import { jsx } from 'react/jsx-runtime';
 import { useId, useState, createContext } from 'react';
 
+/**
+ * PopoverTriggerContext component, use to wrap a Popover.Trigger and Popover.
+ *
+ * @example
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ */
 const PopoverTriggerContext = ({ children, }) => {
     const randomPopoverId = useId();
     const [popoverId, setPopoverId] = useState(randomPopoverId);

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

@@ -3,9 +3,21 @@ import { Popover as Popover$1 } from './Popover.js';
 import { PopoverTrigger } from './PopoverTrigger.js';
 import { PopoverTriggerContext } from './PopoverTriggerContext.js';
 
-const Popover = Popover$1;
-Popover.TriggerContext = PopoverTriggerContext;
-Popover.Trigger = PopoverTrigger;
+/**
+ * Popover component, used to display content in a popover over an element.
+ *
+ * @example
+ * <Popover.TriggerContext>
+ *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ *   <Popover>
+ *     Content
+ *   </Popover>
+ * </Popover.TriggerContext>
+ */
+const Popover = Object.assign(Popover$1, {
+    TriggerContext: PopoverTriggerContext,
+    Trigger: PopoverTrigger,
+});
 Popover.TriggerContext.displayName = 'Popover.TriggerContext';
 Popover.Trigger.displayName = 'Popover.Trigger';
 

package/dist/esm/components/Radio/Radio.js

@@ -8,11 +8,12 @@ import { ValidationMessage } from '../ValidationMessage/ValidationMessage.js';
 
 /**
  * Radio used to select multiple options.
+ *
  * @example
  * <Radio label="I agree" value="agree" />
  */
-const Radio = forwardRef(function Radio({ 'data-size': size, className, style, children, label, description, validation, ...rest }, ref) {
-    return (jsxs(Field, { "data-size": size, className: className, style: style, children: [jsx(Input, { type: 'radio', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description }), !!validation && jsx(ValidationMessage, { children: validation })] }));
+const Radio = forwardRef(function Radio({ 'data-size': size, className, style, children, label, description, error, ...rest }, ref) {
+    return (jsxs(Field, { "data-size": size, className: className, style: style, children: [jsx(Input, { type: 'radio', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description }), !!error && jsx(ValidationMessage, { children: error })] }));
 });
 
 export { Radio };

package/dist/esm/components/Search/Search.js

@@ -3,6 +3,22 @@ import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
+/**
+ * Search component, use to display different variations of a search input
+ *
+ * @example with button
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ *   <Search.Button />
+ * </Search>
+ *
+ * @example with icon
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ * </Search>
+ */
 const Search = forwardRef(function Search({ className, ...rest }, ref) {
     return jsx("div", { ref: ref, className: cl('ds-search', className), ...rest });
 });

package/dist/esm/components/Search/SearchButton.js

@@ -3,6 +3,15 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Button } from '../Button/Button.js';
 
+/**
+ * SearchButton component, used to display a search button within a Search component.
+ *
+ * @example
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Button>Søk</Search.Button>
+ * </Search>
+ */
 const SearchButton = forwardRef(function SearchButton({ children = 'Søk', ...rest }, ref) {
     return (jsx(Button, { ref: ref, type: 'submit', ...rest, children: children }));
 });

package/dist/esm/components/Search/SearchClear.js

@@ -4,6 +4,15 @@ import { forwardRef } from 'react';
 import { setReactInputValue } from '../Combobox/utilities.js';
 import { Button } from '../Button/Button.js';
 
+/**
+ * SearchClear component, used to display a clear buttun when the search input is not empty.
+ *
+ * @example
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ * </Search>
+ */
 const SearchClear = forwardRef(function SearchClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
     const handleClear = (e) => {
         const target = e.target;

package/dist/esm/components/Search/SearchInput.js

@@ -3,6 +3,14 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Input } from '../Input/Input.js';
 
+/**
+ * SearchInput component, used to display a search input within the Search component.
+ *
+ * @example
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ * </Search>
+ */
 const SearchInput = forwardRef(function SearchInput({ ...rest }, ref) {
     return (jsx(Input, { ref: ref, type: 'search', 
         /* We need an empty placeholder for the clear button to be able to show/hide */

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

@@ -5,16 +5,20 @@ import { SearchClear } from './SearchClear.js';
 import { SearchInput } from './SearchInput.js';
 
 /**
- * Search field
+ * Search component, use to display different variations of a search input
  *
- * @example
- * ```tsx
+ * @example with button
  * <Search>
- *  <Search.Input aria-label='Søk' />
- *  <Search.Clear />
- *  <Search.Button />
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ *   <Search.Button />
+ * </Search>
+ *
+ * @example with icon
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
  * </Search>
- * ```
  */
 const Search = Object.assign(Search$1, {
     Clear: SearchClear,

package/dist/esm/components/Select/Select.js

@@ -3,6 +3,15 @@ import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
+/**
+ * Select component, used to display a native select.
+ *
+ * @example
+ * <Select>
+ *   <Select.Option value='1'>Option 1</Select.Option>
+ *   <Select.Option value='2'>Option 2</Select.Option>
+ * </Select>
+ */
 const Select = forwardRef(function Select({ className, onKeyDown, onMouseDown, width, ...rest }, ref) {
     return (jsx("select", { className: cl('ds-input', className), "data-width": width, ref: ref, onKeyDown: (event) => {
             if (event.key === 'Tab')

package/dist/esm/components/Select/SelectOptgroup.js

@@ -3,6 +3,17 @@ import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 
+/**
+ * SelectOptgroup component, used to display a native optgroup within a select.
+ *
+ * @example
+ * <Select>
+ *   <Select.Optgroup label='Group 1'>
+ *     <Select.Option value='1'>Option 1</Select.Option>
+ *     <Select.Option value='2'>Option 2</Select.Option>
+ *   </Select.Optgroup>
+ * </Select>
+ */
 const SelectOptgroup = forwardRef(function SelectOptgroup({ asChild, ...rest }, ref) {
     const Component = asChild ? Slot : 'optgroup';
     return jsx(Component, { ...rest, ref: ref });

package/dist/esm/components/Select/SelectOption.js

@@ -3,6 +3,15 @@ import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 
+/**
+ * SelectOption component, used to display a native option within a select.
+ *
+ * @example
+ * <Select>
+ *   <Select.Option value='1'>Option 1</Select.Option>
+ *   <Select.Option value='2'>Option 2</Select.Option>
+ * </Select>
+ */
 const SelectOption = forwardRef(function SelectOption({ asChild, ...rest }, ref) {
     const Component = asChild ? Slot : 'option';
     return jsx(Component, { ...rest, ref: ref });

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

@@ -3,6 +3,15 @@ import { Select as Select$1 } from './Select.js';
 import { SelectOptgroup } from './SelectOptgroup.js';
 import { SelectOption } from './SelectOption.js';
 
+/**
+ * Select component, used to display a native select.
+ *
+ * @example
+ * <Select>
+ *   <Select.Option value='1'>Option 1</Select.Option>
+ *   <Select.Option value='2'>Option 2</Select.Option>
+ * </Select>
+ */
 const Select = Object.assign(Select$1, {
     Option: SelectOption,
     Optgroup: SelectOptgroup,

package/dist/esm/components/Skeleton/Skeleton.js

@@ -7,11 +7,12 @@ import { forwardRef } from 'react';
 import { useSynchronizedAnimation } from '../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
 
 /**
- * Represent a draft of page while the content loads. Mix different skeleton components to create your layout.
+ * Skeleton is used to represent a draft of page while the content loads.
+ *
  * @example
- *   <Skeleton variant="circle" />
- *   <Skeleton variant="text" />
- *   <Skeleton variant="rectangle" />
+ * <Skeleton variant="circle" />
+ * <Skeleton variant="text" />
+ * <Skeleton variant="rectangle" />
  */
 const Skeleton = forwardRef(function Skeleton({ asChild, className, height, style, variant = 'rectangle', width, ...rest }, ref) {
     const Component = asChild ? Slot : 'span';

package/dist/esm/components/SkipLink/SkipLink.js

@@ -3,6 +3,13 @@ import { jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
+/**
+ * SkipLink component, used to display a skip link within the page.
+ * Place it at the top of the page to allow users to skip to the main content.
+ *
+ * @example
+ * <SkipLink href='#main-content'>Skip to main content</SkipLink>
+ */
 const SkipLink = forwardRef(function SkipLink({ children, className, ...rest }, ref) {
     return (jsx("a", { className: cl('ds-skiplink', className), ...rest, ref: ref, children: children }));
 });