@orangelogic/design-system 4.2.0 → 4.3.0

package/library/css/ol-base.css

@@ -110,6 +110,7 @@
   --cx-input-height-small           : 24px;
   --cx-input-letter-spacing         : var(--cx-letter-spacing-normal);
   --cx-input-required-content       : '*';
+  --cx-input-required-content-display: inline;
   --cx-input-required-content-offset: -2px;
   --cx-input-spacing-large          : var(--cx-spacing-medium);
   --cx-input-spacing-medium         : var(--cx-spacing-medium);

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/atoms/src/components/box/box.d.ts

@@ -0,0 +1,26 @@
+import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary A generic layout container. Style it with ordinary CSS (`display: grid`,
+ * `grid-template-columns`, `gap`, …) and its slotted children become the layout items.
+ *
+ * @description The box renders a single default slot and no layout of its own beyond
+ * `display: block`. Because a slot is `display: contents`, whatever layout the consumer puts on
+ * the element applies to the light-DOM children directly, so a `cx-box` can be a CSS grid whose
+ * children place themselves with `grid-column` / `grid-area`, or a grid nested in another grid with
+ * the same track list (grid-in-grid). Use `cx-space` when you only need evenly spaced items.
+ *
+ * @slot - The children to lay out.
+ *
+ * @csspart base - The slot that holds the children.
+ */
+export default class CxBox extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-box': CxBox;
+    }
+}

package/library/packages/atoms/src/components/box/box.styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The host is the layout container: slotted children are its flow/flex/grid items in the flat tree,
+ * so consumers set `display`, tracks, gaps and alignment on the element itself with ordinary CSS.
+ * Nothing here should get in the way of that.
+ */
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/atoms/src/components/button/button.d.ts

@@ -27,6 +27,10 @@ import { default as CxSpinner } from '../spinner/spinner';
  * @cssproperty [--justify-content] - Flex alignment along the main axis (defaults to `center`).
  * @cssproperty [--gap] - Gap between flex items in the button (defaults to `0`).
  * @cssproperty [--label-line-height] - Line-height of the label (defaults to `1.15`).
+ * @cssproperty [--button-custom-hover-shift] - OKLCH lightness step for the Custom appearance's derived hover
+ *  background (defaults to `0.06`). Ignored when `--background-color-focus` is set.
+ * @cssproperty [--button-custom-active-shift] - OKLCH lightness step for the Custom appearance's derived active
+ *  background (defaults to `0.12`). Ignored when `--background-color-active` is set.
  * @cssproperty [--caret-font-size] - Overrides the caret icon's font size (defaults to `--cx-font-size-large`, or
  *  `--cx-font-size-medium` when `size="small"`). Useful when embedding the button somewhere it must match a
  *  smaller surrounding line-height.

package/library/packages/atoms/src/components/card/card.d.ts

@@ -22,6 +22,7 @@ import { CSSResultGroup } from 'lit';
  * @cssproperty --padding - The padding to use for the card's sections.
  * @cssproperty [--card-width=auto] - The width of the card.
  * @cssproperty [--card-height=auto] - The height of the card.
+ * @cssproperty [--card-overflow=auto] - How the card's base handles overflowing content. Set to `clip` for cards that must never scroll.
  */
 export default class CxCard extends CortexElement {
     static readonly styles: CSSResultGroup;

package/library/packages/atoms/src/components/color-picker/color-picker.d.ts

@@ -120,6 +120,13 @@ export default class CxColorPicker extends CortexElement implements CortexFormCo
     private saturation;
     private brightness;
     private alpha;
+    /**
+     * The alpha carried by the color most recently loaded, kept even while `opacity` is off.
+     * With opacity disabled, `alpha` collapses to 100 and `syncValues()` rewrites `value` to an
+     * alpha-less string, so the original transparency is otherwise unrecoverable once opacity is
+     * switched back on.
+     */
+    private lastParsedAlpha;
     /** The gradient being edited in the Gradient tab. */
     private gradientValue;
     /** The id of the gradient stop that the color controls currently edit. */
@@ -337,6 +344,10 @@ export default class CxColorPicker extends CortexElement implements CortexFormCo
     private handleGradientTypeChange;
     private handleGradientAngleInput;
     handleFormatChange(): void;
+    /**
+     * Keeps `alpha` in step when the opacity slider is toggled. Disabling opacity collapses the
+     * color to fully opaque; enabling it restores `lastParsedAlpha` instead of resetting to 100.
+     */
     handleOpacityChange(): void;
     /**
      * Parses a swatch list once per change rather than on every render. `render()` used to

package/library/packages/atoms/src/components/copy-button/copy-button.d.ts

@@ -32,6 +32,7 @@ import { default as CxTooltip } from '../tooltip/tooltip';
  * @cssproperty --button-font-weight - The font weight to use for the button.
  * @cssproperty --button-padding - The padding to use for the button.
  * @cssproperty --button-background-color - The background color to use for the button.
+ * @cssproperty [--button-text-color=var(--cx-color-neutral)] - The text color to use for the button's label, including its hover and active states.
  *
  * @animation copy.in - The animation to use when feedback icons animate in.
  * @animation copy.out - The animation to use when feedback icons animate out.

package/library/packages/atoms/src/components/details/details.d.ts

@@ -16,7 +16,8 @@ import { default as CxIcon } from '../icon/icon';
  * @event cx-after-hide - Emitted after the details closes and all animations are complete.
  *
  * @csspart base - The component's base wrapper.
- * @csspart header - The header that wraps both the summary and the expand/collapse icon.
+ * @csspart header - The bar around the summary row: background, border and padding.
+ * @csspart header-content - The row holding the summary and the expand/collapse icon. Constrain this — with a max-width, say — to inset the title while the header keeps spanning the section.
  * @csspart summary - The container that wraps the summary.
  * @csspart summary-icon - The container that wraps the expand/collapse icons. Use `icon-start` to place this before the summary.
  * @csspart content - The details content.
@@ -27,6 +28,10 @@ import { default as CxIcon } from '../icon/icon';
  * @cssproperty --details-background-color - The background color of the details.
  * @cssproperty --details-border - The border of the details.
  * @cssproperty --expand-icon-size - The size of the expand/collapse icon.
+ * @cssproperty [--header-hover-background-color=var(--header-background-color)] - The header's background color while hovered and closed.
+ * @cssproperty [--header-hover-color=var(--header-color)] - The header's text color while hovered and closed.
+ * @cssproperty [--header-hover-border=var(--header-border)] - The header's border while hovered and closed.
+ * @cssproperty [--summary-icon-open-rotate=90deg] - How far the expand/collapse icon rotates when open; set to `0deg` when supplying an icon that already points the right way.
  */
 export default class CxDetails extends CortexElement {
     static styles: CSSResultGroup;

package/library/packages/atoms/src/components/header/header.d.ts

@@ -1,5 +1,6 @@
 import { default as CxCopyButton } from '../copy-button/copy-button.ts';
 import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { DeviceType } from '../../../../types/src/content-builder';
 import { Alignment, Variant } from '../../../../types/src/header';
 import { CSSResultGroup, TemplateResult } from 'lit';
 
@@ -17,9 +18,30 @@ export default class CxHeader extends CortexElement {
     variant: Variant;
     /**
      * The font size of the heading.
-     * Will override the default font size by the variant if provided
+     * Will override the default font size by the variant if provided.
+     * Applied on mobile, and on tablet/desktop when they have no size of their own.
      */
     fontSize: string | undefined;
+    /**
+     * The font size of the heading on tablet. Falls back to the base font size
+     * when unset.
+     */
+    fontSizeTablet: string | undefined;
+    /**
+     * The font size of the heading on desktop. Falls back to the base font size
+     * when unset.
+     */
+    fontSizeDesktop: string | undefined;
+    /**
+     * Device type.
+     * Don't use this prop since it is controlled by the window resize event.
+     * Picks which of the three font sizes applies.
+     */
+    deviceType: DeviceType;
+    /**
+     * Breakpoints for responsive design.
+     */
+    breakpoints: [number, number, number];
     /**
      * Enables the anchor link for the header.
      */
@@ -52,16 +74,23 @@ export default class CxHeader extends CortexElement {
      * Otherwise, it generates an anchor based on the text content of the header,
      */
     get anchorID(): string;
+    /**
+     * The font size for the current device. The base font size is the fallback,
+     * so a heading with no tablet/desktop size of its own keeps the same size on
+     * every breakpoint.
+     */
+    private get currentFontSize();
     scrollToAnchor: () => void;
     constructor();
     runFirstUpdated(): void;
-    runConnectedCallback(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     /**
      * Scroll to anchor after CMS5 page is ready
      * Wait 100ms for repaint reflow shift layout (not affect by fetching api in web component)
      */
     handleCMS5PageReady(): void;
+    private handleWindowResize;
     private handleClick;
     getAnchorID(): string;
     /**
@@ -69,6 +98,13 @@ export default class CxHeader extends CortexElement {
      * This method is used to re-add the slot element.
      */
     addSlotElement(): void;
+    /**
+     * `device-type` is runtime state, not one of the block's saved attributes, so the
+     * content builder drops it whenever it re-applies its own attribute set to the
+     * element and Lit turns the removed attribute into `null`. Re-derive it so the
+     * heading keeps the size of the device it is actually viewed at.
+     */
+    handleDeviceTypeChange(): void;
     handleHeadingChange(): void;
     private handleCopyButtonClick;
     renderHeading(): TemplateResult;

package/library/packages/atoms/src/components/image/image.d.ts

@@ -1,6 +1,7 @@
 import { default as ResizableElement } from '../../../../base/src/resizable-element.ts';
 import { ObjectFit } from '../../../../types/src/index.ts';
 import { ClickHandlerType } from '../../../../types/src/image';
+import { PositionPickerValue } from '../../../../types/src/position-picker';
 import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
 import { nothing, TemplateResult } from 'lit';
 import { Zoom } from 'medium-zoom';
@@ -95,6 +96,11 @@ export default class CxImage extends ResizableElement {
      * The object-fit property of the image.
      */
     objectFit: ObjectFit;
+    /**
+     * The focal point used to position the image within its container
+     * (applies whenever object-fit leaves free space to position within: cover, contain, none, scale-down).
+     */
+    cropFocus: PositionPickerValue;
     /**
      * Should the skeleton be shown when the image is loading.
      */
@@ -160,6 +166,14 @@ export default class CxImage extends ResizableElement {
     get currentSrc(): string;
     get highlighterTabindex(): "0" | undefined;
     get highlighterRole(): "button" | "img";
+    /**
+     * `object-position` only shifts content already stretched to fill the `<img>` box, so
+     * under `contain` (where the image shrinks to fit and never fills that box on both axes)
+     * the focal point must instead be applied by aligning the `<img>` within this flex parent.
+     */
+    get highlighterCropFocusClass(): {
+        [x: string]: boolean;
+    };
     get highlighterClass(): {
         [x: string]: boolean;
         'highlightable-item': boolean;

package/library/packages/atoms/src/components/mutation-observer/mutation-observer.d.ts

@@ -14,7 +14,7 @@ import { CSSResultGroup } from 'lit';
  */
 export default class CxMutationObserver extends CortexElement {
     static styles: CSSResultGroup;
-    private mutationObserver;
+    private mutationObserver?;
     mutationSlot: HTMLSlotElement;
     /**
      * Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g.

package/library/packages/atoms/src/components/radio-card/radio-card.d.ts

@@ -24,6 +24,7 @@ import { default as CxRadio } from '../radio/radio';
  * @cssproperty [--description-color=var(--cx-input-label-color)] - The color of the description text.
  * @cssproperty [--card-width=auto] - The width of the radio card.
  * @cssproperty [--card-height=auto] - The height of the radio card.
+ * @cssproperty [--radio-card-overflow=auto] - How the radio card handles overflowing content. Set to `clip` for tiles that must never scroll.
  *
  * @slot - The radio’s label.
  * @slot image - The radio’s image.

package/library/packages/atoms/src/components/tab/tab.d.ts

@@ -14,6 +14,23 @@ import { default as CxLineClamp } from '../line-clamp/line-clamp';
  * @csspart label - The tab's label wrapper (cx-line-clamp).
  * @csspart close-button - The close button, an `<cx-icon-button>`.
  * @csspart close-button__base - The close button's exported `base` part.
+ *
+ * @cssproperty [--tab-padding=var(--cx-spacing-x-small)] - The tab's padding.
+ * @cssproperty --tab-color - The tab's text color.
+ * @cssproperty --tab-active-color - The tab's text color when active.
+ * @cssproperty --tab-background-color - The tab's background color.
+ * @cssproperty --tab-active-background-color - The tab's background color when active.
+ * @cssproperty --tab-border-radius - The tab's border radius (button variant).
+ * @cssproperty [--tab-border=transparent 0] - The tab's border, as a `<color> <width>` pair.
+ * @cssproperty [--tab-border-top-style=solid] - The style of the tab's top border; `none` hides that side.
+ * @cssproperty [--tab-border-right-style=solid] - The style of the tab's right border; `none` hides that side.
+ * @cssproperty [--tab-border-bottom-style=solid] - The style of the tab's bottom border; `none` hides that side.
+ * @cssproperty [--tab-border-left-style=solid] - The style of the tab's left border; `none` hides that side.
+ * @cssproperty [--tab-label-font-family=var(--cx-font-sans)] - The tab label's font family.
+ * @cssproperty [--tab-label-font-style=normal] - The tab label's font style.
+ * @cssproperty [--tab-label-font-size=var(--cx-font-size-small)] - The tab label's font size.
+ * @cssproperty [--tab-label-font-weight=var(--cx-font-weight-medium)] - The tab label's font weight.
+ * @cssproperty [--tab-max-width=none] - The tab's maximum width.
  */
 export default class CxTab extends CortexElement {
     static styles: CSSResultGroup;

package/library/packages/atoms/src/components/typography/typography.d.ts

@@ -5,6 +5,10 @@ import { CSSResultGroup, TemplateResult } from 'lit';
 /**
  * @summary Use headings for page titles or subheadings to introduce content.
  * Headings are sized to contrast with content, increase visual hierarchy, and help readers easily understand the structure of content.
+ * @description With `editable`, the text can be changed in place: the element becomes a plain-text
+ * editor, Enter or leaving it commits, Escape restores the previous text.
+ *
+ * @event cx-change - Emitted after an inline edit changed the text and was committed; read the new text from `value`.
  *
  * @csspart base - The component’s base wrapper.
  *
@@ -13,7 +17,34 @@ import { CSSResultGroup, TemplateResult } from 'lit';
  */
 export default class CxTypography extends CortexElement {
     static readonly styles: CSSResultGroup;
+    /** Text when the current inline edit started: restored on Escape, compared against on commit. */
+    private valueBeforeEdit;
     variant: TypographyVariant;
+    /**
+     * Lets the reader edit the text in place. The element itself becomes a plain-text
+     * `contenteditable`, so the slotted text stays the single source of truth: Enter commits,
+     * Escape restores the text from before the edit, and focus leaving the element commits too.
+     * A commit that changed the text emits `cx-change`; an emptied text is restored instead.
+     */
+    editable: boolean;
+    /**
+     * The current text, trimmed. Assigning replaces the slotted text, so a host can read back an
+     * inline edit or reset it. Declared on the setter so the wrapper generators see the property.
+     */
+    set value(text: string);
+    get value(): string;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEditableChange(): void;
+    private handleFocusIn;
+    private handleFocusOut;
+    private handleKeyDown;
+    /**
+     * Normalises the edited text and reports it. Runs from focusout, so both Enter and clicking
+     * away end up here exactly once per edit.
+     */
+    private commitEdit;
     render(): TemplateResult;
 }
 declare global {

package/library/packages/atoms/src/components/video/video.d.ts

@@ -1,6 +1,8 @@
 import { default as CxImage } from '../image/image.ts';
 import { default as CxResizeObserver } from '../resize-observer/resize-observer.ts';
 import { default as ResizableElement } from '../../../../base/src/resizable-element.ts';
+import { ObjectFit } from '../../../../types/src/index.ts';
+import { PositionPickerValue } from '../../../../types/src/position-picker';
 import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
 import { TemplateResult } from 'lit';
 import { VideoJsPlayer } from './videojs/index.js';
@@ -14,6 +16,7 @@ import { VideoJsPlayer } from './videojs/index.js';
  * @cssproperty [--padding=0] - The padding of the image.
  * @cssproperty --border-radius - The border-radius of the video container.
  * @cssproperty --border - The border of the video container.
+ * @cssproperty [--empty-aspect-ratio=16 / 9] - The aspect ratio held by the empty state (no `src`, no `poster`) when `height-mode` is `auto`.
  *
  * @event cx-play - Emitted when playback starts.
  * @event cx-pause - Emitted when playback pauses.
@@ -26,6 +29,13 @@ import { VideoJsPlayer } from './videojs/index.js';
  *
  * @slot placeholder - The placeholder element, shown while the `src` is not set.
  */
+/**
+ * `background-size` only accepts `cover`/`contain` — map the crop-style
+ * options exposed by the video config (Fit/Fill) to their closest
+ * `background-size` equivalent for VideoJS's native `.vjs-poster` layer,
+ * which is a CSS background-image, not an `<img>` that supports `object-fit`.
+ */
+export declare const VIDEO_BACKGROUND_SIZE_BY_OBJECT_FIT: Record<ObjectFit, string>;
 export default class CxVideo extends ResizableElement {
     static readonly styles: import('lit').CSSResult[];
     static readonly dependencies: {
@@ -60,6 +70,14 @@ export default class CxVideo extends ResizableElement {
      * The poster image to show before the video loads.
      */
     poster: string;
+    /**
+     * The object-fit style applied to both the video and its poster.
+     */
+    objectFit: ObjectFit;
+    /**
+     * The focal point used to position the video/poster within their container.
+     */
+    cropFocus: PositionPickerValue;
     /**
      * Determines if the video should autoplay.
      */

package/library/packages/atoms/src/index.d.ts

@@ -6,6 +6,7 @@ export { default as CxArrayLineClamp } from './components/array-line-clamp/array
 export { default as CxAudio } from './components/audio/audio';
 export { default as CxAvatar } from './components/avatar/avatar';
 export { default as CxBadge } from './components/badge/badge';
+export { default as CxBox } from './components/box/box';
 export { default as CxBreadcrumb } from './components/breadcrumb/breadcrumb';
 export { default as CxBreadcrumbItem } from './components/breadcrumb-item/breadcrumb-item';
 export { default as CxButton } from './components/button/button';

package/library/packages/events/src/cx-color-swatch-picker-columns-change.d.ts

@@ -0,0 +1,15 @@
+import { ColorSwatchCustomColumn } from '../../types/src/color-swatch-group';
+
+/**
+ * The full custom-column list after the color dialog added a free-form
+ * metadata field. Adding a field on one color declares a column for every
+ * color, so the picker hands the merged list back to be stored on the block.
+ */
+export type CxColorSwatchPickerColumnsChangeEvent = CustomEvent<{
+    columns: ColorSwatchCustomColumn[];
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-color-swatch-picker-columns-change': CxColorSwatchPickerColumnsChangeEvent;
+    }
+}

package/library/packages/events/src/events.d.ts

@@ -42,6 +42,7 @@ export * from './cx-close';
 export * from './cx-code-block-language-change';
 export * from './cx-collapse';
 export * from './cx-color-swatch-picker-add';
+export * from './cx-color-swatch-picker-columns-change';
 export * from './cx-color-swatch-picker-edit';
 export * from './cx-column-group-scroll';
 export * from './cx-column-resizable-change';

package/library/packages/hybrid/table-core/src/table/table.d.ts

@@ -40,8 +40,11 @@ import { CxTableColumnEditor, CxTableFooter, CxTableHeaderMenu, CxTableRowAction
  * @cssproperty [--row-hover-background-color=var(--cx-color-neutral-50)] - The background color of the table rows on hover.
  * @cssproperty [--row-even-hover-background-color=var(--cx-color-neutral-100)] - The background color of the even table rows on hover.
  * @cssproperty [--frozen-border-color=var(--cx-color-neutral-300)] - The color of the frozen table rows border.
+ * @cssproperty [--row-gap=0] - Vertical space between consecutive rows. Rendered as a transparent border so it is included in the row height the renderer measures.
  * @cssproperty [--header-background-color=var(--cx-color-neutral-50)] - The background color of the table header.
  * @cssproperty [--header-hover-background-color=var(--cx-color-neutral-200)] - The background color of the table header on hover.
+ * @cssproperty [--header-font-family=var(--cx-font-sans)] - The font family of the table header.
+ * @cssproperty [--header-font-style=normal] - The font style of the table header.
  * @cssproperty [--header-font-weight=var(--cx-font-weight-regular)] - The font weight of the table header.
  * @cssproperty [--header-font-size=var(--cx-font-size-small)] - The font size of the table header.
  * @cssproperty [--header-color=var(--cx-color-neutral-800)] - The color of the table header.
@@ -49,7 +52,13 @@ import { CxTableColumnEditor, CxTableFooter, CxTableHeaderMenu, CxTableRowAction
  * @cssproperty [--header-height=var(--cx-spacing-3x-large)] - The height of the table header.
  * @cssproperty [--header-horizontal-padding=var(--cx-spacing-2x-small)] - The horizontal padding of the table header.
  * @cssproperty [--cell-border-color=var(--cx-color-neutral-200)] - The color of the table cell border.
- * @cssproperty [--cell-horizontal-padding=var(--cx-spacing-2x-small)] - The horizontal padding of the table cell.
+ * @cssproperty [--cell-horizontal-padding=var(--cx-spacing-2x-small)] - The horizontal padding of the table cell. Used as the default for `--cell-padding-left` / `--cell-padding-right`.
+ * @cssproperty [--cell-padding-top=var(--cx-spacing-2x-small)] - The top padding of the table cell.
+ * @cssproperty [--cell-padding-right=var(--cell-horizontal-padding)] - The right padding of the table cell.
+ * @cssproperty [--cell-padding-bottom=var(--cx-spacing-2x-small)] - The bottom padding of the table cell.
+ * @cssproperty [--cell-padding-left=var(--cell-horizontal-padding)] - The left padding of the table cell.
+ * @cssproperty [--cell-font-family=var(--cx-font-sans)] - The font family of the table cell.
+ * @cssproperty [--column-gap=0px] - Extra horizontal space between columns, added after every column but the last (header and cells alike).
  * @cssproperty [--group-count-color=var(--cx-color-danger-500)] - The color of the table group count.
  * @cssproperty [--group-row-background-color=var(--cx-color-neutral-300)] - The background color of the table group row.
  * @cssproperty [--group-row-hover-background-color=var(--cx-color-neutral-400)] - The background color of the table group row on hover.

package/library/packages/molecules/src/color-swatch/color-swatch.d.ts

@@ -4,7 +4,7 @@ import { default as CxResizeObserver } from '../../../atoms/src/components/resiz
 import { default as CxSpace } from '../../../atoms/src/components/space/space.ts';
 import { default as CxTypography } from '../../../atoms/src/components/typography/typography.ts';
 import { default as CortexElement } from '../../../base/src/cortex-element.ts';
-import { CxColorSwatchVariant } from '../../../types/src/color-swatch';
+import { CxColorSwatchCodeAlignment, CxColorSwatchCodeSeparator, CxColorSwatchHexFormat, CxColorSwatchVariant } from '../../../types/src/color-swatch';
 import { CSSResultGroup } from 'lit';
 
 /**
@@ -14,6 +14,13 @@ import { CSSResultGroup } from 'lit';
  * @cssproperty --swatch-size - Size of color swatch container (Circle will use as width for aspect ratio, Oval & Gird will use as height)
  * @cssproperty --swatch-content-padding - Padding of color swatch content
  * @cssproperty --swatch-grid-min-width - Minimum width of color swatch container
+ * @cssproperty [--swatch-circle-size=var(--swatch-size, 350px)] - Size of a circle/oval swatch (kept apart from --swatch-size, which the grid variant reads as its min-height floor)
+ * @cssproperty --swatch-circle-border-radius - Corner radius of a circle/oval swatch
+ * @cssproperty [--swatch-circle-content-align=center] - Horizontal alignment of the content inside a circle/oval swatch
+ * @cssproperty [--swatch-circle-content-justify=center] - Vertical alignment of the content inside a circle/oval swatch
+ * @cssproperty [--swatch-circle-content-margin=0] - Margin around the content inside a circle/oval swatch
+ * @cssproperty [--swatch-content-justify=space-between] - Vertical distribution of the content inside a grid-variant card
+ * @cssproperty [--swatch-content-margin=var(--cx-spacing-medium)] - Padding around the content inside a grid-variant card
  *
  * @csspart base - The component's base wrapper.
  * @csspart name - The color swatch's name wrapper.
@@ -24,6 +31,9 @@ import { CSSResultGroup } from 'lit';
  * @csspart value - Value in information row.
  *
  * @typedef CxColorSwatchVariant - 'circle' | 'grid-item' | 'oval'
+ * @typedef CxColorSwatchCodeAlignment - 'same-line' | 'separate-line'
+ * @typedef CxColorSwatchCodeSeparator - 'comma' | 'slash'
+ * @typedef CxColorSwatchHexFormat - 'leading-hash' | 'leading-hex' | 'none'
  */
 export default class CxColorSwatch extends CortexElement {
     static readonly styles: CSSResultGroup;
@@ -83,6 +93,24 @@ export default class CxColorSwatch extends CortexElement {
      * No auto convert color codes
      */
     noAutoConvert: boolean;
+    /**
+     * Whether a code's label and value share a line or stack on separate lines
+     */
+    codeAlignment: CxColorSwatchCodeAlignment;
+    /**
+     * Separator between the numeric parts of the RGB and CMYK codes
+     */
+    codeSeparator: CxColorSwatchCodeSeparator;
+    /**
+     * Which prefix the HEX code carries: `#`, `0x`, or none
+     */
+    hexFormat: CxColorSwatchHexFormat;
+    /**
+     * This swatch's slice of a row-wide ramp, as `linear-gradient` stops
+     * (`"#000 0%, #888 100%"`). The group works them out — only it knows where
+     * this swatch sits. Empty leaves the flat swatch color showing.
+     */
+    gradientStops: string;
     /**
      * Text color that contrast to the background
      * Using black and white so as not to be affected by theme switching
@@ -98,6 +126,12 @@ export default class CxColorSwatch extends CortexElement {
     canFocusContainer: boolean;
     isContainerFocused: boolean;
     runFirstUpdated(): void;
+    /**
+     * `gradientStops` as a paintable image. Horizontal so the slice hands off
+     * along a shared edge; a diagonal ramp meets the next color in one corner
+     * only, leaving a visible break at the seam.
+     */
+    private get gradientImage();
     /**
      * Change to default color
      */

package/library/packages/molecules/src/data-tab-group/data-tab-group.d.ts

@@ -7,7 +7,29 @@ import { TabGroupAlignment, TabGroupHidePanelVariant, TabGroupOverflowVariant }
 import { CSSResultGroup } from 'lit';
 
 /**
- * @summary CxDataTabGroup
+ * @summary Renders a tab group from a list of items, exposing the tabs' look as CSS custom properties.
+ *
+ * @slot slot-{id} - The panel content for the item with the matching `id`.
+ *
+ * @cssproperty [--tab-gap=0px] - The gap between tabs.
+ * @cssproperty [--tab-padding=var(--cx-spacing-x-small)] - A tab's padding.
+ * @cssproperty [--tab-panel-padding] - The panel's padding.
+ * @cssproperty [--tab-border-radius=var(--cx-border-radius-small)] - A tab's border radius.
+ * @cssproperty [--tab-color] - A tab's text color.
+ * @cssproperty [--tab-hover-color=var(--tab-color)] - A tab's text color on hover.
+ * @cssproperty [--tab-active-color=#fff] - A tab's text color when active.
+ * @cssproperty [--tab-background-color] - A tab's background color.
+ * @cssproperty [--tab-hover-background-color=var(--tab-background-color)] - A tab's background color on hover.
+ * @cssproperty [--tab-active-background-color=var(--cx-color-primary)] - A tab's background color when active.
+ * @cssproperty [--tab-border=transparent 0px] - A tab's border, as a `<color> <width>` pair.
+ * @cssproperty [--tab-hover-border=var(--tab-border)] - A tab's border on hover.
+ * @cssproperty [--tab-active-border=var(--tab-border)] - A tab's border when active.
+ * @cssproperty [--tab-label-font-family] - The tab label's font family.
+ * @cssproperty [--tab-label-font-style] - The tab label's font style.
+ * @cssproperty [--tab-label-font-weight] - The tab label's font weight.
+ * @cssproperty [--tab-label-font-size=var(--cx-font-size-small)] - The tab label's font size.
+ * @cssproperty [--bottom-line=var(--cx-color-neutral-200) 1px] - The line under the tabs, as a `<color> <width>` pair; only drawn when `show-bottom-line` is set.
+ * @cssproperty [--min-height=200px] - The height reserved when there are no tabs.
  */
 export default class CxDataTabGroup extends CortexElement {
     static readonly styles: CSSResultGroup;
@@ -26,6 +48,13 @@ export default class CxDataTabGroup extends CortexElement {
     hidePanelVariant: TabGroupHidePanelVariant;
     /** Use max panel height. */
     useMaxPanelHeight: boolean;
+    /** Draws the line that separates the tabs from the panel. */
+    showBottomLine: boolean;
+    /**
+     * The tab border sides to draw, as a space-separated list of
+     * `top` / `right` / `bottom` / `left` (e.g. `"top bottom"`).
+     */
+    tabBorderSides: string;
     multiLanguage: boolean;
     render(): import('lit').TemplateResult<1>;
 }