@orangelogic/design-system 2.170.0 → 2.172.0

package/library/package.json

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

package/library/packages/molecules/src/dynamic-select/dynamic-select.d.ts

@@ -209,6 +209,12 @@ export default class CxDynamicSelect extends CortexElement {
      */
     noFlip: boolean;
     customChangeEvent: string;
+    /**
+     * When set to true, after options are fetched, the select falls back to the first option's value
+     * when the current `value` does not match any fetched option (including when no `value` was provided).
+     * Has no effect when `multiple` is enabled.
+     */
+    autoFallbackFirstOption: boolean;
     options: Option[];
     start: number;
     searchTerm: string;
@@ -228,6 +234,7 @@ export default class CxDynamicSelect extends CortexElement {
     private tableFilterCallback;
     private getCellValue;
     private getColWidth;
+    private getFallbackValue;
     private handleInputChange;
     private handleLoadMore;
     private handleCustomChange;

package/library/packages/molecules/src/folder-select/folder-select.d.ts

@@ -59,6 +59,20 @@ export default class CxFolderSelect extends CortexElement {
     private handleSearchTermInputChange;
     private handleSearchTermSelectChange;
     private handleTreeLoadingChange;
+    /**
+     * Lazy-loaded tree children can grow the popup's content well past its
+     * original height. cx-popup only recomputes flip/placement on scroll,
+     * resize, or viewport changes (Floating UI's autoUpdate) — not on
+     * internal content mutations — so without this the popup can stay
+     * anchored below the trigger even after it no longer fits there.
+     *
+     * Clearing --auto-size-available-height/-width first matters as much as
+     * the reposition() call itself: cx-select's own auto-size CSS clamps the
+     * listbox to the *previous* available space, so flip's overflow check
+     * still measures the clamped (small) height and never decides to flip
+     * (see the same clear in cx-select's filterOptionsByInput()).
+     */
+    private handleTreeChildrenLoaded;
     private handleSelectClear;
     /**
      * cx-folder-select-tree owns `currentRootIDsSet` (the real source of

package/library/packages/organisms/src/content-builder/content-builder.d.ts

@@ -111,6 +111,15 @@ export default class CxContentBuilder extends CortexElement {
      * @default false
      */
     enableAssetFormatControls: boolean;
+    /**
+     * Whether the content builder emits `ol:ui-metric` events timing each user action,
+     * for collection as browser OpenTelemetry histograms.
+     *
+     * Off by default: when false no timers are armed and no events are dispatched, so an
+     * unmonitored site pays nothing for this being here.
+     * @default false
+     */
+    enableMetrics: boolean;
     /**
      * Default asset format applied to image blocks.
      * Used as the initial format when a block is added, whether or not
@@ -221,6 +230,20 @@ export default class CxContentBuilder extends CortexElement {
     private readonly initializeCustomFrame;
     private containerDropdownObservers;
     private nextMapHoveredBadgeState;
+    /**
+     * Host callbacks handed to GrapesJS blocks and config UI, each timed via
+     * `measurePromise` so the promise's own settling is the completion signal.
+     *
+     * Getters, not fields set once in the constructor: a host can override
+     * `onRequestAsset` (etc.) on the element instance after construction but before
+     * these are read (e.g. `el.onRequestAsset = customFn`), and a constructor-time
+     * `.bind()` would have captured the original method forever, silently ignoring
+     * that override.
+     */
+    private get measuredOnRequestAsset();
+    private get measuredOnRequestDownloadFormat();
+    private get measuredOnConfigureWorkflow();
+    private get measuredOnRequestAssetFormat();
     get isDesigner(): boolean;
     get isTemplateEditable(): boolean;
     get isMultiLanguage(): boolean;

package/library/packages/organisms/src/content-builder/content-builder.telemetry.d.ts

@@ -0,0 +1,67 @@
+import { Component } from 'grapesjs';
+
+export declare const UiAction: {
+    readonly AddBlock: "add_block";
+    readonly ConfigureWorkflow: "configure_workflow";
+    readonly DeviceSwitch: "device_switch";
+    readonly DuplicateBlock: "duplicate_block";
+    readonly EditorBoot: "editor_boot";
+    readonly MoveBlock: "move_block";
+    readonly OpenConfig: "open_config";
+    readonly PickAsset: "pick_asset";
+    readonly PickAssetFormat: "pick_asset_format";
+    readonly PickDownloadFormat: "pick_download_format";
+    readonly Redo: "redo";
+    readonly RemoveBlock: "remove_block";
+    readonly RichTextEdit: "rich_text_edit";
+    readonly SaveConfig: "save_config";
+    readonly SelectBlock: "select_block";
+    readonly Undo: "undo";
+};
+export type UiActionName = (typeof UiAction)[keyof typeof UiAction];
+/** Mirrors the CMS5_BO.Data.MetricsIsEnabled parameter, passed in by the host VForm. */
+export declare function setEditorMetricsEnabled(enabled: boolean): void;
+/** Whether metrics are currently armed - the same flag `measureSync` and friends check. */
+export declare function isEditorMetricsEnabled(): boolean;
+export declare function dispatch(action: string, durationMs: number, component: string, blockType?: string): void;
+/**
+ * Derive the block-type label from a GrapesJS component.
+ *
+ * Returns undefined for anything that is not a CMS5 block - a raw text node, a wrapper,
+ * an element the builder does not own - so those actions are recorded without a block
+ * dimension rather than under a misleading one.
+ */
+export declare function blockTypeOf(component?: Component): string | undefined;
+/**
+ * Time a synchronous action through to the paint that shows its result.
+ *
+ * Two nested frames, not one: the first callback still runs before the browser
+ * paints, so ending there would time the JavaScript and miss the layout and paint
+ * the user is actually waiting on.
+ */
+export declare function measureSync(action: UiActionName, blockType?: string): void;
+/**
+ * Time a synchronous action that started earlier, through to the paint that shows it.
+ *
+ * Needed for the editor commands: the only place that knows which block was
+ * involved is *after* the command has run, but the clock has to start before it.
+ * The caller keeps the start time and supplies the block type at the end, so the
+ * sample covers the whole action rather than only its trailing paint.
+ */
+export declare function measureSyncFrom(startedAt: number, action: UiActionName, blockType?: string): void;
+/**
+ * Start timing an action that finishes on its own schedule, and return the ender.
+ *
+ * Used where a paint is not the completion signal - opening the asset picker, saving
+ * a config, booting the editor. The returned function is safe to call more than once;
+ * only the first call records.
+ */
+export declare function measureAsync(action: UiActionName, blockType?: string): () => void;
+/**
+ * Wrap a promise-returning host callback so it reports how long it took.
+ *
+ * The picker is host code we hand control to, so the promise settling is the only
+ * reliable completion signal. Rejections are timed too and then rethrown untouched:
+ * a picker that fails slowly is exactly the case worth seeing.
+ */
+export declare function measurePromise<TArgs extends unknown[], TResult>(action: UiActionName, fn: (...args: TArgs) => Promise<TResult>, blockType?: string): (...args: TArgs) => Promise<TResult>;

package/library/packages/organisms/src/content-builder/plugins/index.d.ts

@@ -19,6 +19,7 @@ export { default as RichTextEditorPlugin } from './rich-text-editor';
 export * from './rich-text-editor/components';
 export { default as SearchBoxPlugin } from './search-box';
 export { default as TabsPlugin } from './tab-group';
+export { default as TelemetryPlugin } from './telemetry';
 export { default as TextPlugin } from './text';
 export { default as TimelinePlugin } from './timeline';
 export { default as VideoPlugin } from './video';

package/library/packages/organisms/src/content-builder/plugins/telemetry.d.ts

@@ -0,0 +1,15 @@
+import { Editor } from 'grapesjs';
+
+export type TelemetryPluginOptions = {
+    bootStartedAt: number;
+};
+/**
+ * Subscribe to the editor's own event bus for edit-mode timing.
+ *
+ * A GrapesJS plugin rather than a function called after `grapesjs.init()`: all
+ * edit-mode instrumentation then lives alongside the other editor plugins and is
+ * wired the same way (`plugins: [...]`), instead of being a one-off call the reader
+ * has to notice separately.
+ */
+declare const TelemetryPlugin: (editor: Editor, options: TelemetryPluginOptions) => void;
+export default TelemetryPlugin;

package/library/packages/organisms/src/content-builder/styleController.d.ts

@@ -152,6 +152,7 @@ export default class StyleController {
         };
         required?: boolean;
         selectConfigs?: {
+            autoFallbackFirstOption?: boolean;
             fullWidthPopup?: boolean;
             placement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end" | "center";
         };

package/library/packages/types/src/content-builder.d.ts

@@ -175,6 +175,11 @@ export type PropertyConfig<T = Record<string, any>> = Omit<TraitProperties, 'opt
     };
     required?: boolean;
     selectConfigs?: {
+        /**
+         * When true (dynamic select only), falls back to the first fetched option's value
+         * when the current value does not match any fetched option (or when no value is set).
+         */
+        autoFallbackFirstOption?: boolean;
         fullWidthPopup?: boolean;
         placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end' | 'center';
     };

package/library/packages/utils/src/custom-element/modal.d.ts

@@ -17,6 +17,13 @@ export default class Modal {
     activateExternal(): void;
     /** Deactivates external modal behavior and re-enables focus trapping. */
     deactivateExternal(): void;
+    /**
+     * Focus counts as inside if either tree says so. `:focus-within` follows the
+     * render tree and covers content slotted in from elsewhere, but stops at the
+     * top layer (e.g. a hoisted listbox in a popover); the active element chain
+     * follows the DOM tree and covers that.
+     */
+    private hasFocusInside;
     private checkFocus;
     private handleFocusIn;
     private possiblyHasTabbableChildren;

package/library/react-web-component.d.ts

@@ -5977,6 +5977,10 @@
           * 
         */
         customChangeEvent?: string;
+        /**
+          * When set to true, after options are fetched, the select falls back to the first option's value when the current `value` does not match any fetched option (including when no `value` was provided). Has no effect when `multiple` is enabled.
+        */
+        autoFallbackFirstOption?: boolean;
         /**
           * Make localization attributes reactive eslint-disable-next-line lit/no-native-attributes
         */
@@ -9765,6 +9769,10 @@
           * Whether to expose the asset format / transformation / download-format / asset-format-picker controls in the per-block config sidebar for image, video, gallery, carousel, and timeline blocks. <br/>@default false
         */
         enableAssetFormatControls?: boolean;
+        /**
+          * Whether the content builder emits `ol:ui-metric` events timing each user action, for collection as browser OpenTelemetry histograms. <br/> Off by default: when false no timers are armed and no events are dispatched, so an unmonitored site pays nothing for this being here. <br/>@default false
+        */
+        enableMetrics?: boolean;
         /**
           * Default asset format applied to image blocks. Used as the initial format when a block is added, whether or not `enable-asset-format-controls` is on. <br/>@default 'TR1'
         */

package/library/utils.js

@@ -15,7 +15,7 @@ import { f as k } from "./chunks/form.CP9KLGjF.js";
 import { F as Ue, c as _e, g as Pe, v as Xe, a as He } from "./chunks/form.CP9KLGjF.js";
 import { L as Be, r as $e } from "./chunks/i18n.DbXTTLXx.js";
 import { c as ze, q as qe } from "./chunks/math.DuKzLacZ.js";
-import { g as Ze } from "./chunks/modal.jdGhujoh.js";
+import { g as Ze } from "./chunks/modal.Ct0bJBSe.js";
 import { g as Je, l as Ke, s as tr, u as er } from "./chunks/scroll.xtO5yojm.js";
 import { k as y } from "./chunks/dom.C5aVLhKS.js";
 import { c as ar, d as sr, h as or, m as nr, a as ir, g as lr, j as cr, b as ur, f as mr, i as fr, e as hr, l as gr, s as dr } from "./chunks/dom.C5aVLhKS.js";

package/package.json

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

package/library/chunks/button.styles.BersilzZ.js

@@ -1,5 +0,0 @@
-import { i as t } from "./lit-element.jLBm65_O.js";
-const r = t`:host{--background-color:var(--cx-color-primary);--color:light-dark(var(--cx-color-neutral-0),var(--cx-color-neutral-1000));--font-size:var(--cx-font-size-medium);--font-weight:var(--cx-font-weight-medium);--height:var(--cx-input-height-medium);--justify-content:center;--gap:0;--min-height:auto;--padding:0;--label-line-height:1.15;--button-custom-height:32px;--button-custom-padding:4px 8px 4px 8px;--button-custom-font-size:var(--cx-font-size-medium);cursor:pointer;width:auto;max-width:100%;line-height:normal;display:inline-block;position:relative}:host([width-type=fill]),:host([width-type=adaptive][device-type=tablet]),:host([width-type=adaptive][device-type=mobile]){width:100%}.button{align-items:center;justify-content:var(--justify-content,center);gap:var(--gap,0);border-style:solid;border-width:var(--cx-input-border-width);width:100%;font-family:var(--font-family,var(--cx-input-font-family)), var(--cx-font-sans);font-style:var(--font-style,normal);font-weight:var(--font-weight,var(--cx-font-weight-regular));font-size:var(--font-size,var(--cx-font-size-medium));height:var(--height,var(--cx-input-height-medium));min-height:var(--min-height,auto);padding:var(--padding,0);text-transform:var(--cx-button-text-transform,none);-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;transition:var(--cx-transition-x-fast) background-color, var(--cx-transition-x-fast) color, var(--cx-transition-x-fast) border, var(--cx-transition-x-fast) box-shadow;cursor:inherit;text-decoration:none;display:inline-flex}.button::-moz-focus-inner{border:0}.button:focus{outline:none}.button:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.button--disabled{opacity:.5;cursor:default}.button--disabled *{pointer-events:none}.button__prefix,.button__suffix{pointer-events:none;flex:none;align-items:center;display:flex}.button__label{line-height:var(--label-line-height);white-space:nowrap;text-overflow:ellipsis;display:none;overflow:hidden}.button__label::slotted(cx-icon){vertical-align:-2px}.button__label--has-label{display:inline-block}.button--standard.button--default{background-color:var(--cx-color-neutral-100);border-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral-700)}.button--standard.button--default:hover:not(.button--disabled),.button--standard.button--default.button--focused:not(.button--disabled){background-color:var(--cx-color-neutral-200);border-color:var(--cx-color-neutral-200);color:var(--cx-color-neutral-700)}.button--standard.button--default:active:not(.button--disabled){background-color:var(--cx-color-neutral-300);border-color:var(--cx-color-neutral-300);color:var(--cx-color-neutral-700)}.button--standard.button--primary{background-color:var(--cx-color-primary);border-color:var(--cx-color-primary);color:var(--cx-color-neutral-0)}.button--standard.button--primary:hover:not(.button--disabled),.button--standard.button--primary.button--focused:not(.button--disabled){background-color:var(--cx-color-primary-500);border-color:var(--cx-color-primary-500);color:var(--cx-color-neutral-0)}.button--standard.button--primary:active:not(.button--disabled){background-color:var(--cx-color-primary-700);border-color:var(--cx-color-primary-700);color:var(--cx-color-neutral-0)}.button--standard.button--success{background-color:var(--cx-color-success);border-color:var(--cx-color-success);color:var(--cx-color-neutral-0)}.button--standard.button--success:hover:not(.button--disabled),.button--standard.button--success.button--focused:not(.button--disabled){background-color:var(--cx-color-success-500);border-color:var(--cx-color-success-500);color:var(--cx-color-neutral-0)}.button--standard.button--success:active:not(.button--disabled){background-color:var(--cx-color-success-700);border-color:var(--cx-color-success-700);color:var(--cx-color-neutral-0)}.button--standard.button--warning{background-color:var(--cx-color-warning);border-color:var(--cx-color-warning);color:var(--cx-color-neutral-0)}.button--standard.button--warning:hover:not(.button--disabled),.button--standard.button--warning.button--focused:not(.button--disabled){background-color:var(--cx-color-warning-500);border-color:var(--cx-color-warning-500);color:var(--cx-color-neutral-0)}.button--standard.button--warning:active:not(.button--disabled){background-color:var(--cx-color-warning-700);border-color:var(--cx-color-warning-700);color:var(--cx-color-neutral-0)}.button--standard.button--danger{background-color:var(--cx-color-danger);border-color:var(--cx-color-danger);color:var(--cx-color-neutral-0)}.button--standard.button--danger:hover:not(.button--disabled),.button--standard.button--danger.button--focused:not(.button--disabled){background-color:var(--cx-color-danger-500);border-color:var(--cx-color-danger-500);color:var(--cx-color-neutral-0)}.button--standard.button--danger:active:not(.button--disabled){background-color:var(--cx-color-danger-700);border-color:var(--cx-color-danger-700);color:var(--cx-color-neutral-0)}.button--standard.button--custom{background-color:var(--background-color);border-color:var(--background-color);color:var(--color)}.button--standard.button--custom:hover:not(.button--disabled),.button--standard.button--custom.button--focused:not(.button--disabled){background-color:var(--background-color-focus,var(--background-color));border-color:var(--background-color-focus,var(--background-color));color:var(--color-focus,var(--color))}.button--standard.button--custom:active:not(.button--disabled){background-color:var(--background-color-active,var(--background-color));border-color:var(--background-color-active,var(--background-color));color:var(--color-active,var(--color))}.button--outline{border:solid var(--cx-input-border-width);background:0 0}.button--outline.button--default{border-color:var(--cx-input-border-color);color:var(--cx-color-neutral)}.button--outline.button--default:hover:not(.button--disabled),.button--outline.button--default.button--focused:not(.button--disabled),.button--outline.button--default.button--checked:not(.button--disabled){border-color:var(--cx-color-neutral-300);background-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral)}.button--outline.button--default:active:not(.button--disabled){border-color:var(--cx-color-neutral-300);background-color:var(--cx-color-neutral-200);color:var(--cx-color-neutral)}.button--outline.button--primary{border-color:var(--cx-color-primary);color:var(--cx-color-primary)}.button--outline.button--primary:hover:not(.button--disabled),.button--outline.button--primary.button--focused:not(.button--disabled),.button--outline.button--primary.button--checked:not(.button--disabled){background-color:var(--cx-color-primary-500);color:var(--cx-color-neutral-0)}.button--outline.button--primary:active:not(.button--disabled){border-color:var(--cx-color-primary-700);background-color:var(--cx-color-primary-700);color:var(--cx-color-neutral-0)}.button--outline.button--success{border-color:var(--cx-color-success);color:var(--cx-color-success)}.button--outline.button--success:hover:not(.button--disabled),.button--outline.button--success.button--focused:not(.button--disabled),.button--outline.button--success.button--checked:not(.button--disabled){background-color:var(--cx-color-success-500);color:var(--cx-color-neutral-0)}.button--outline.button--success:active:not(.button--disabled){border-color:var(--cx-color-success);background-color:var(--cx-color-success);color:var(--cx-color-neutral-0)}.button--outline.button--warning{border-color:var(--cx-color-warning);color:var(--cx-color-warning)}.button--outline.button--warning:hover:not(.button--disabled),.button--outline.button--warning.button--focused:not(.button--disabled),.button--outline.button--warning.button--checked:not(.button--disabled){background-color:var(--cx-color-warning-500);color:var(--cx-color-neutral-0)}.button--outline.button--warning:active:not(.button--disabled){border-color:var(--cx-color-warning-700);background-color:var(--cx-color-warning-700);color:var(--cx-color-neutral-0)}.button--outline.button--danger{border-color:var(--cx-color-danger);color:var(--cx-color-danger)}.button--outline.button--danger:hover:not(.button--disabled),.button--outline.button--danger.button--focused:not(.button--disabled),.button--outline.button--danger.button--checked:not(.button--disabled){background-color:var(--cx-color-danger-500);color:var(--cx-color-neutral-0)}.button--outline.button--danger:active:not(.button--disabled){border-color:var(--cx-color-danger-700);background-color:var(--cx-color-danger-700);color:var(--cx-color-neutral-0)}@media (forced-colors:active){.button.button--outline.button--checked:not(.button--disabled){outline:2px solid #0000}}.button--text{color:var(--cx-color-neutral);background-color:#0000;border-color:#0000}.button--text:hover:not(.button--disabled),.button--text.button--focused:not(.button--disabled){background-color:var(--cx-color-neutral-100);border-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral)}.button--text:focus-visible:not(.button--disabled){color:var(--cx-color-neutral-800);background-color:#0000;border-color:#0000}.button--text:active:not(.button--disabled){background-color:var(--cx-color-neutral-200);border-color:var(--cx-color-neutral-200);color:var(--cx-color-neutral)}.button--tertiary{color:var(--cx-color-neutral);background-color:#0000;border-color:#0000}.button--tertiary:hover:not(.button--disabled),.button--tertiary.button--focused:not(.button--disabled){background-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral);border-color:#0000}.button--tertiary:focus-visible:not(.button--disabled){background-color:var(--cx-color-neutral-200);color:var(--cx-color-neutral);border-color:#0000}.button--tertiary:active:not(.button--disabled){background-color:var(--cx-color-neutral-300);color:var(--cx-color-neutral);border-color:#0000}.button--small{height:auto;min-height:var(--cx-input-height-small);font-size:var(--cx-button-font-size-medium);border-radius:var(--cx-button-border-radius-small)}.button--small ::slotted(cx-icon){--font-size:var(--cx-font-size-medium)}.button--medium{height:auto;min-height:var(--cx-input-height-medium);font-size:var(--cx-button-font-size-medium);border-radius:var(--cx-button-border-radius-medium)}.button--large{height:auto;min-height:var(--cx-input-height-large);font-size:var(--cx-button-font-size-medium);border-radius:var(--cx-button-border-radius-large)}.button--x-large{height:auto;min-height:var(--cx-input-height-x-large);font-size:var(--cx-button-font-size-medium);border-radius:var(--cx-button-border-radius-large)}.button--custom-size{--height:var(--button-custom-height);--padding:var(--button-custom-padding);--font-size:var(--button-custom-font-size);--font-family:var(--button-custom-font-family), var(--cx-font-sans);--font-style:var(--button-custom-font-style);--font-weight:var(--button-custom-font-weight);border-radius:var(--cx-button-border-radius-medium)}.button--pill.button--small{border-radius:var(--cx-input-height-small)}.button--pill.button--medium{border-radius:var(--cx-input-height-medium)}.button--pill.button--large{border-radius:var(--cx-input-height-large)}.button--pill.button--x-large{border-radius:var(--cx-input-height-x-large)}.button--circle{padding-left:0;padding-right:0}.button--circle.button--small{width:var(--cx-input-height-small);border-radius:50%}.button--circle.button--medium{width:var(--cx-input-height-medium);border-radius:50%}.button--circle.button--large{width:var(--cx-input-height-large);border-radius:50%}.button--circle.button--x-large{width:var(--cx-input-height-x-large);border-radius:50%}.button--circle .button__prefix,.button--circle .button__suffix,.button--circle .button__caret{display:none}.button--circle .button__label{justify-content:center;align-items:center;line-height:1;display:inline-flex}.button--caret .button__caret{--font-size:var(--caret-font-size,var(--cx-font-size-large));margin-block:auto}.button--caret.button--small .button__caret{--font-size:var(--caret-font-size,var(--cx-font-size-medium))}.button--caret .button__suffix{display:none}.button--loading{cursor:wait;position:relative}.button--loading .button__prefix,.button--loading .button__label,.button--loading .button__suffix,.button--loading .button__caret{visibility:hidden}.button--loading cx-spinner{--indicator-color:currentColor;width:1em;height:1em;font-size:1em;position:absolute;top:calc(50% - .5em);left:calc(50% - .5em)}.button ::slotted(cx-badge){pointer-events:none;position:absolute;top:0;right:0;translate:50% -50%}.button--rtl ::slotted(cx-badge){left:0;right:auto;translate:-50% -50%}.button--has-label.button--small .button__label{padding:0 var(--cx-spacing-x-small)}.button--has-label.button--medium .button__label{padding:0 var(--cx-spacing-small)}.button--has-label.button--large .button__label{padding:0 var(--cx-spacing-medium)}.button--has-label.button--x-large .button__label{padding:0 var(--cx-spacing-large)}.button--has-prefix.button--small,.button--has-prefix.button--small .button__label,.button--has-prefix.button--medium,.button--has-prefix.button--medium .button__label{padding-inline-start:var(--cx-spacing-x-small)}.button--has-prefix.button--large{padding-inline-start:var(--cx-spacing-small)}.button--has-prefix.button--large .button__label{padding-inline-start:var(--cx-spacing-x-small)}.button--has-prefix.button--x-large,.button--has-prefix.button--x-large .button__label{padding-inline-start:var(--cx-spacing-medium)}.button--has-suffix.button--small,.button--caret.button--small,.button--has-suffix.button--small .button__label,.button--caret.button--small .button__label,.button--has-suffix.button--medium,.button--caret.button--medium,.button--has-suffix.button--medium .button__label,.button--caret.button--medium .button__label{padding-inline-end:var(--cx-spacing-x-small)}.button--has-suffix.button--large,.button--caret.button--large{padding-inline-end:var(--cx-spacing-small)}.button--has-suffix.button--large .button__label,.button--caret.button--large .button__label{padding-inline-end:var(--cx-spacing-x-small)}.button--has-suffix.button--x-large,.button--caret.button--x-large,.button--has-suffix.button--x-large .button__label,.button--caret.button--x-large .button__label{padding-inline-end:var(--cx-spacing-medium)}.button--caret cx-icon::part(span){height:auto}:host([data-cx-button-group__button--first]:not([data-cx-button-group__button--last])) .button{border-start-end-radius:0;border-end-end-radius:0}:host([data-cx-button-group__button--inner]) .button{border-radius:0}:host([data-cx-button-group__button--last]:not([data-cx-button-group__button--first])) .button{border-start-start-radius:0;border-end-start-radius:0}:host([data-cx-button-group__button]:not([data-cx-button-group__button--first])){margin-inline-start:calc(-1 * var(--cx-input-border-width))}:host([data-cx-button-group__button]:not([data-cx-button-group__button--first],[data-cx-button-group__button--radio],[variant=default]):not(:hover)) .button:after{content:"";top:0;inset-inline-start:0;mix-blend-mode:multiply;border-left:1px solid #80808054;position:absolute;bottom:0}:host([data-cx-button-group__button--hover]){z-index:1}:host([data-cx-button-group__button--focus]),:host([data-cx-button-group__button][checked]){z-index:2}`;
-export {
-  r as b
-};