@oicl/openbridge-webcomponents 2.0.0-next.80 → 2.0.0-next.82

package/dist/components/progress-button/progress-button.css.js

@@ -1,8 +1,7 @@
 import { css } from "lit";
-const componentStyle = css`
-          * {
-            -webkit-tap-highlight-color: transparent;
-          }
+const componentStyle = css`* {
+  -webkit-tap-highlight-color: transparent;
+}
 
 :host {
   display: inline-block;
@@ -32,71 +31,71 @@ const componentStyle = css`
 }
 
 .linear-wrapper.regular {
-            cursor: pointer;
+  cursor: pointer;
 }
 
 .linear-wrapper.regular:focus {
-            outline: none;
+  outline: none;
 }
 
 .linear-wrapper.regular .visible-wrapper {
-            border-color: var(--normal-enabled-border-color);
-            background-color: var(--normal-enabled-background-color);
-            border-width: 1px;
-            border-style: solid;
-            cursor: pointer;
-            --base-border-color: var(--normal-enabled-border-color);
-            --base-background-color: var(--normal-enabled-background-color);
+  border-color: var(--normal-enabled-border-color);
+  background-color: var(--normal-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
+  --base-border-color: var(--normal-enabled-border-color);
+  --base-background-color: var(--normal-enabled-background-color);
 }
 
 .linear-wrapper.regular.activated .visible-wrapper {
-            border-color: var(--normal-activated-border-color);
-            background-color: var(--normal-activated-background-color);
-            --base-border-color: var(--normal-activated-border-color);
-            --base-background-color: var(--normal-activated-background-color);
+  border-color: var(--normal-activated-border-color);
+  background-color: var(--normal-activated-background-color);
+  --base-border-color: var(--normal-activated-border-color);
+  --base-background-color: var(--normal-activated-background-color);
 }
 
 @media (hover:hover) {
 
 .linear-wrapper.regular:hover .visible-wrapper {
-                        border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-                        background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-            }
+    border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
+    background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
+  }
 }
 
 .linear-wrapper.regular:active .visible-wrapper {
-            border-color: var(--normal-pressed-border-color);
-            background-color: var(--normal-pressed-background-color);
+  border-color: var(--normal-pressed-border-color);
+  background-color: var(--normal-pressed-background-color);
 }
 
 .linear-wrapper.regular:focus-visible .visible-wrapper {
-            outline-color: var(--border-focus-color);
-            outline-width: var(--global-size-spacing-border-weight-focusframe);
-            outline-style: solid;
-            border-color: var(--container-global-color);
-            z-index: 1;
+  outline-color: var(--border-focus-color);
+  outline-width: var(--global-size-spacing-border-weight-focusframe);
+  outline-style: solid;
+  border-color: var(--container-global-color);
+  z-index: 1;
 }
 
 .linear-wrapper.regular:disabled .visible-wrapper {
-            border-color: var(--normal-disabled-border-color);
-            background-color: var(--normal-disabled-background-color);
-            cursor: not-allowed;
-            color: var(--on-normal-disabled-color) !important;
+  border-color: var(--normal-disabled-border-color);
+  background-color: var(--normal-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-normal-disabled-color) !important;
 }
 
 .linear-wrapper.regular.disabled .visible-wrapper {
-            border-color: var(--normal-disabled-border-color);
-            background-color: var(--normal-disabled-background-color);
-            cursor: not-allowed;
-            color: var(--on-normal-disabled-color) !important;
+  border-color: var(--normal-disabled-border-color);
+  background-color: var(--normal-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-normal-disabled-color) !important;
 }
 
 .linear-wrapper.regular:disabled {
-            cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 .linear-wrapper.regular.disabled {
-            cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 .linear-wrapper.regular .button-text {
@@ -108,71 +107,71 @@ const componentStyle = css`
   }
 
 .linear-wrapper.flat {
-            cursor: pointer;
+  cursor: pointer;
 }
 
 .linear-wrapper.flat:focus {
-            outline: none;
+  outline: none;
 }
 
 .linear-wrapper.flat .visible-wrapper {
-            border-color: var(--flat-enabled-border-color);
-            background-color: var(--flat-enabled-background-color);
-            border-width: 1px;
-            border-style: solid;
-            cursor: pointer;
-            --base-border-color: var(--flat-enabled-border-color);
-            --base-background-color: var(--flat-enabled-background-color);
+  border-color: var(--flat-enabled-border-color);
+  background-color: var(--flat-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
+  --base-border-color: var(--flat-enabled-border-color);
+  --base-background-color: var(--flat-enabled-background-color);
 }
 
 .linear-wrapper.flat.activated .visible-wrapper {
-            border-color: var(--flat-activated-border-color);
-            background-color: var(--flat-activated-background-color);
-            --base-border-color: var(--flat-activated-border-color);
-            --base-background-color: var(--flat-activated-background-color);
+  border-color: var(--flat-activated-border-color);
+  background-color: var(--flat-activated-background-color);
+  --base-border-color: var(--flat-activated-border-color);
+  --base-background-color: var(--flat-activated-background-color);
 }
 
 @media (hover:hover) {
 
 .linear-wrapper.flat:hover .visible-wrapper {
-                        border-color: color-mix(in srgb, var(--flat-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-                        background-color: color-mix(in srgb, var(--flat-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-            }
+    border-color: color-mix(in srgb, var(--flat-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
+    background-color: color-mix(in srgb, var(--flat-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
+  }
 }
 
 .linear-wrapper.flat:active .visible-wrapper {
-            border-color: var(--flat-pressed-border-color);
-            background-color: var(--flat-pressed-background-color);
+  border-color: var(--flat-pressed-border-color);
+  background-color: var(--flat-pressed-background-color);
 }
 
 .linear-wrapper.flat:focus-visible .visible-wrapper {
-            outline-color: var(--border-focus-color);
-            outline-width: var(--global-size-spacing-border-weight-focusframe);
-            outline-style: solid;
-            border-color: var(--container-global-color);
-            z-index: 1;
+  outline-color: var(--border-focus-color);
+  outline-width: var(--global-size-spacing-border-weight-focusframe);
+  outline-style: solid;
+  border-color: var(--container-global-color);
+  z-index: 1;
 }
 
 .linear-wrapper.flat:disabled .visible-wrapper {
-            border-color: var(--flat-disabled-border-color);
-            background-color: var(--flat-disabled-background-color);
-            cursor: not-allowed;
-            color: var(--on-flat-disabled-color) !important;
+  border-color: var(--flat-disabled-border-color);
+  background-color: var(--flat-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-flat-disabled-color) !important;
 }
 
 .linear-wrapper.flat.disabled .visible-wrapper {
-            border-color: var(--flat-disabled-border-color);
-            background-color: var(--flat-disabled-background-color);
-            cursor: not-allowed;
-            color: var(--on-flat-disabled-color) !important;
+  border-color: var(--flat-disabled-border-color);
+  background-color: var(--flat-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-flat-disabled-color) !important;
 }
 
 .linear-wrapper.flat:disabled {
-            cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 .linear-wrapper.flat.disabled {
-            cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 .linear-wrapper.flat .button-text {
@@ -184,71 +183,71 @@ const componentStyle = css`
   }
 
 .linear-wrapper.raised {
-            cursor: pointer;
+  cursor: pointer;
 }
 
 .linear-wrapper.raised:focus {
-            outline: none;
+  outline: none;
 }
 
 .linear-wrapper.raised .visible-wrapper {
-            border-color: var(--raised-enabled-border-color);
-            background-color: var(--raised-enabled-background-color);
-            border-width: 1px;
-            border-style: solid;
-            cursor: pointer;
-            --base-border-color: var(--raised-enabled-border-color);
-            --base-background-color: var(--raised-enabled-background-color);
+  border-color: var(--raised-enabled-border-color);
+  background-color: var(--raised-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
+  --base-border-color: var(--raised-enabled-border-color);
+  --base-background-color: var(--raised-enabled-background-color);
 }
 
 .linear-wrapper.raised.activated .visible-wrapper {
-            border-color: var(--raised-activated-border-color);
-            background-color: var(--raised-activated-background-color);
-            --base-border-color: var(--raised-activated-border-color);
-            --base-background-color: var(--raised-activated-background-color);
+  border-color: var(--raised-activated-border-color);
+  background-color: var(--raised-activated-background-color);
+  --base-border-color: var(--raised-activated-border-color);
+  --base-background-color: var(--raised-activated-background-color);
 }
 
 @media (hover:hover) {
 
 .linear-wrapper.raised:hover .visible-wrapper {
-                        border-color: color-mix(in srgb, var(--raised-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-                        background-color: color-mix(in srgb, var(--raised-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-            }
+    border-color: color-mix(in srgb, var(--raised-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
+    background-color: color-mix(in srgb, var(--raised-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
+  }
 }
 
 .linear-wrapper.raised:active .visible-wrapper {
-            border-color: var(--raised-pressed-border-color);
-            background-color: var(--raised-pressed-background-color);
+  border-color: var(--raised-pressed-border-color);
+  background-color: var(--raised-pressed-background-color);
 }
 
 .linear-wrapper.raised:focus-visible .visible-wrapper {
-            outline-color: var(--border-focus-color);
-            outline-width: var(--global-size-spacing-border-weight-focusframe);
-            outline-style: solid;
-            border-color: var(--container-global-color);
-            z-index: 1;
+  outline-color: var(--border-focus-color);
+  outline-width: var(--global-size-spacing-border-weight-focusframe);
+  outline-style: solid;
+  border-color: var(--container-global-color);
+  z-index: 1;
 }
 
 .linear-wrapper.raised:disabled .visible-wrapper {
-            border-color: var(--raised-disabled-border-color);
-            background-color: var(--raised-disabled-background-color);
-            cursor: not-allowed;
-            color: var(--on-raised-disabled-color) !important;
+  border-color: var(--raised-disabled-border-color);
+  background-color: var(--raised-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-raised-disabled-color) !important;
 }
 
 .linear-wrapper.raised.disabled .visible-wrapper {
-            border-color: var(--raised-disabled-border-color);
-            background-color: var(--raised-disabled-background-color);
-            cursor: not-allowed;
-            color: var(--on-raised-disabled-color) !important;
+  border-color: var(--raised-disabled-border-color);
+  background-color: var(--raised-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-raised-disabled-color) !important;
 }
 
 .linear-wrapper.raised:disabled {
-            cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 .linear-wrapper.raised.disabled {
-            cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 .linear-wrapper.raised .button-text {
@@ -375,71 +374,71 @@ const componentStyle = css`
 }
 
 .circular-wrapper {
-            cursor: pointer;
+  cursor: pointer;
 }
 
 .circular-wrapper:focus {
-            outline: none;
+  outline: none;
 }
 
 .circular-wrapper .circular-visible-wrapper {
-            border-color: var(--flat-enabled-border-color);
-            background-color: var(--flat-enabled-background-color);
-            border-width: 1px;
-            border-style: solid;
-            cursor: pointer;
-            --base-border-color: var(--flat-enabled-border-color);
-            --base-background-color: var(--flat-enabled-background-color);
+  border-color: var(--flat-enabled-border-color);
+  background-color: var(--flat-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
+  --base-border-color: var(--flat-enabled-border-color);
+  --base-background-color: var(--flat-enabled-background-color);
 }
 
 .circular-wrapper.activated .circular-visible-wrapper {
-            border-color: var(--flat-activated-border-color);
-            background-color: var(--flat-activated-background-color);
-            --base-border-color: var(--flat-activated-border-color);
-            --base-background-color: var(--flat-activated-background-color);
+  border-color: var(--flat-activated-border-color);
+  background-color: var(--flat-activated-background-color);
+  --base-border-color: var(--flat-activated-border-color);
+  --base-background-color: var(--flat-activated-background-color);
 }
 
 @media (hover:hover) {
 
 .circular-wrapper:hover .circular-visible-wrapper {
-                        border-color: color-mix(in srgb, var(--flat-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-                        background-color: color-mix(in srgb, var(--flat-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-            }
+    border-color: color-mix(in srgb, var(--flat-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
+    background-color: color-mix(in srgb, var(--flat-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
+  }
 }
 
 .circular-wrapper:active .circular-visible-wrapper {
-            border-color: var(--flat-pressed-border-color);
-            background-color: var(--flat-pressed-background-color);
+  border-color: var(--flat-pressed-border-color);
+  background-color: var(--flat-pressed-background-color);
 }
 
 .circular-wrapper:focus-visible .circular-visible-wrapper {
-            outline-color: var(--border-focus-color);
-            outline-width: var(--global-size-spacing-border-weight-focusframe);
-            outline-style: solid;
-            border-color: var(--container-global-color);
-            z-index: 1;
+  outline-color: var(--border-focus-color);
+  outline-width: var(--global-size-spacing-border-weight-focusframe);
+  outline-style: solid;
+  border-color: var(--container-global-color);
+  z-index: 1;
 }
 
 .circular-wrapper:disabled .circular-visible-wrapper {
-            border-color: var(--flat-disabled-border-color);
-            background-color: var(--flat-disabled-background-color);
-            cursor: not-allowed;
-            color: var(--on-flat-disabled-color) !important;
+  border-color: var(--flat-disabled-border-color);
+  background-color: var(--flat-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-flat-disabled-color) !important;
 }
 
 .circular-wrapper.disabled .circular-visible-wrapper {
-            border-color: var(--flat-disabled-border-color);
-            background-color: var(--flat-disabled-background-color);
-            cursor: not-allowed;
-            color: var(--on-flat-disabled-color) !important;
+  border-color: var(--flat-disabled-border-color);
+  background-color: var(--flat-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-flat-disabled-color) !important;
 }
 
 .circular-wrapper:disabled {
-            cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 .circular-wrapper.disabled {
-            cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 .circular-wrapper {

package/dist/components/progress-button/progress-button.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"progress-button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/progress-button/progress-button.d.ts

@@ -15,24 +15,122 @@ export declare enum ProgressMode {
 export interface ProgressButtonClickEvent {
     value: number;
 }
+/**
+ * `<obc-progress-button>` – A button with a built-in progress indicator for actions
+ * that take time to complete, such as uploads, downloads, or background processing.
+ *
+ * Combines a clickable button with an embedded progress visualization so a single
+ * control can both trigger a long-running action and communicate its ongoing status.
+ * The progress indicator is shown on demand (via `showProgress`) and can report either
+ * a known percentage or an open-ended "working" state.
+ *
+ * ## Features / Variants
+ *
+ * **Layout types (`type`)**
+ * - **Linear** (default): A text button (optionally with leading/trailing icons) with a
+ *   thin horizontal progress bar rendered above the label. Best for primary actions where
+ *   a descriptive label is helpful (e.g. "Upload File", "Download").
+ * - **Circular**: A compact icon-only button wrapped by a circular progress ring, with an
+ *   optional label rendered below it. Best for space-constrained or icon-driven actions.
+ *
+ * **Button styles (`buttonStyle`, Linear only)**
+ * - `regular` (default), `flat`, and `raised` elevation variants. The circular type always
+ *   uses a flat visual treatment.
+ *
+ * **Progress modes (`mode`)**
+ * - **Determinate** (default): Fills the bar/ring proportionally to `value` (0–100).
+ * - **Indeterminate**: Animated, looping indicator for work of unknown duration.
+ * - **Progressive indeterminate** (Circular only, via `progressiveIndeterminate`): A hybrid
+ *   ring that animates while still advancing toward `value`.
+ *
+ * **Other**
+ * - **Alert state** (`hasAlert`): Draws a red ring/border to flag an error or failed action.
+ * - **Disabled** (`disabled`): Blocks interaction; the `obc-click` event is suppressed.
+ *
+ * ## Usage Guidelines
+ *
+ * Use a progress button when a single action both starts and tracks a time-consuming task,
+ * keeping the trigger and its feedback in one place. Toggle `showProgress` on when the task
+ * begins and update `value` as it advances; switch to `mode="indeterminate"` (or
+ * `progressiveIndeterminate` for circular) when the duration or completion percentage is
+ * unknown. Choose the **linear** type when a text label aids comprehension, and the
+ * **circular** type for compact, icon-led actions. For a plain action with no progress
+ * tracking, prefer a standard button instead.
+ *
+ * ## Slots
+ *
+ * | Slot            | Renders When...                    | Purpose                                              |
+ * | --------------- | ---------------------------------- | ---------------------------------------------------- |
+ * | `leading-icon`  | `type="linear"` && `hasLeadingIcon`| Icon shown before the label.                         |
+ * | `trailing-icon` | `type="linear"` && `hasTrailingIcon`| Icon shown after the label.                          |
+ * | `icon`          | `type="circular"`                  | Central icon inside the circular progress ring.      |
+ *
+ * ## Events
+ *
+ * - `obc-click` – Fired when the button is activated (suppressed while `disabled`); the detail
+ *   carries the current progress `value`.
+ *
+ * @example
+ * ```html
+ * <obc-progress-button
+ *   type="linear"
+ *   buttonStyle="raised"
+ *   label="Upload File"
+ *   showProgress
+ *   mode="determinate"
+ *   value="45"
+ * >
+ *   <obi-placeholder slot="leading-icon"></obi-placeholder>
+ * </obc-progress-button>
+ * ```
+ *
+ * @slot leading-icon - Icon before the label (`type="linear"` && `hasLeadingIcon`).
+ * @slot trailing-icon - Icon after the label (`type="linear"` && `hasTrailingIcon`).
+ * @slot icon - Central icon for the circular variant (`type="circular"`).
+ * @fires obc-click {CustomEvent<ProgressButtonClickEvent>} When the button is activated; detail holds the current `value`.
+ */
 export declare class ObcProgressButton extends LitElement {
+    /** Layout type of the button: `linear` (label + bar) or `circular` (icon + ring). */
     type: ProgressButtonType;
-    /** @availableWhen type==Linear */
+    /**
+     * Elevation style of the button surface.
+     * @availableWhen type==linear
+     */
     buttonStyle: ButtonStyle;
-    /** @availableWhen showProgress==true */
+    /**
+     * Progress mode: `determinate` tracks `value`, `indeterminate` loops indefinitely.
+     * @availableWhen showProgress==true
+     */
     mode: ProgressMode;
+    /** Progress percentage (0–100); clamped when rendered. */
     value: number;
+    /** Text shown in the button (linear) or below it (circular, when `showLabel`). */
     label: string;
+    /** Blocks interaction and suppresses the `obc-click` event. */
     disabled: boolean;
+    /** Reveals the progress bar/ring. */
     showProgress: boolean;
-    /** @availableWhen type==Linear */
+    /**
+     * Renders the `leading-icon` slot.
+     * @availableWhen type==linear
+     */
     hasLeadingIcon: boolean;
-    /** @availableWhen type==Linear */
+    /**
+     * Renders the `trailing-icon` slot.
+     * @availableWhen type==linear
+     */
     hasTrailingIcon: boolean;
+    /** Shows an alert (error) ring/border around the button. */
     hasAlert: boolean;
-    /** @availableWhen type==Circular && showProgress==true */
+    /**
+     * Uses a progressive indeterminate ring that animates while advancing toward `value`.
+     * @availableWhen type==circular && showProgress==true
+     */
     progressiveIndeterminate: boolean;
-    /** @availableWhen type==Circular */
+    /**
+     * Shows the `label` below the circular button.
+     * @availableWhen type==circular
+     */
     showLabel: boolean;
     render(): import('lit-html').TemplateResult<1>;
     private renderLinearButton;

package/dist/components/progress-button/progress-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-button.d.ts","sourceRoot":"","sources":["../../../src/components/progress-button/progress-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAQzD,oBAAY,kBAAkB;IAC5B,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AAED,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,MAAM,WAAW;CAClB;AAED,oBAAY,YAAY;IACtB,WAAW,gBAAgB;IAC3B,aAAa,kBAAkB;CAChC;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,qBACa,iBAAkB,SAAQ,UAAU;IACrB,IAAI,EAAE,kBAAkB,CACtB;IAC5B,kCAAkC;IACR,WAAW,EAAE,WAAW,CAAuB;IACzE,wCAAwC;IACd,IAAI,EAAE,YAAY,CAA4B;IAC9C,KAAK,SAAK;IACV,KAAK,SAAM;IACV,QAAQ,UAAS;IACjB,YAAY,UAAS;IAChD,kCAAkC;IACP,cAAc,UAAS;IAClD,kCAAkC;IACP,eAAe,UAAS;IACxB,QAAQ,UAAS;IAC5C,0DAA0D;IAC/B,wBAAwB,UAAS;IAC5D,oCAAoC;IACT,SAAS,UAAS;IAEpC,MAAM;IAOf,OAAO,CAAC,kBAAkB;IAoD1B,OAAO,CAAC,oBAAoB;IAoB5B,OAAO,CAAC,oBAAoB;IA6C5B,OAAO,CAAC,uBAAuB;IAU/B,OAAO,CAAC,sBAAsB;IA8B9B,OAAO,CAAC,WAAW;IAiBnB,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
+{"version":3,"file":"progress-button.d.ts","sourceRoot":"","sources":["../../../src/components/progress-button/progress-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAQzD,oBAAY,kBAAkB;IAC5B,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AAED,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,MAAM,WAAW;CAClB;AAED,oBAAY,YAAY;IACtB,WAAW,gBAAgB;IAC3B,aAAa,kBAAkB;CAChC;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyEG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,qFAAqF;IAC3D,IAAI,EAAE,kBAAkB,CACtB;IAC5B;;;OAGG;IACuB,WAAW,EAAE,WAAW,CAAuB;IACzE;;;OAGG;IACuB,IAAI,EAAE,YAAY,CAA4B;IACxE,0DAA0D;IAChC,KAAK,SAAK;IACpC,kFAAkF;IACxD,KAAK,SAAM;IACrC,+DAA+D;IACpC,QAAQ,UAAS;IAC5C,qCAAqC;IACV,YAAY,UAAS;IAChD;;;OAGG;IACwB,cAAc,UAAS;IAClD;;;OAGG;IACwB,eAAe,UAAS;IACnD,4DAA4D;IACjC,QAAQ,UAAS;IAC5C;;;OAGG;IACwB,wBAAwB,UAAS;IAC5D;;;OAGG;IACwB,SAAS,UAAS;IAEpC,MAAM;IAOf,OAAO,CAAC,kBAAkB;IAoD1B,OAAO,CAAC,oBAAoB;IAoB5B,OAAO,CAAC,oBAAoB;IA6C5B,OAAO,CAAC,uBAAuB;IAU/B,OAAO,CAAC,sBAAsB;IA8B9B,OAAO,CAAC,WAAW;IAiBnB,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/components/progress-button/progress-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-button.js","sources":["../../../src/components/progress-button/progress-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport componentStyle from './progress-button.css?inline';\nimport {customElement} from '../../decorator.js';\nimport {CircularProgressMode} from '../../building-blocks/circular-progress/circular-progress.js';\n\nexport enum ProgressButtonType {\n  Linear = 'linear',\n  Circular = 'circular',\n}\n\nexport enum ButtonStyle {\n  Regular = 'regular',\n  Flat = 'flat',\n  Raised = 'raised',\n}\n\nexport enum ProgressMode {\n  Determinate = 'determinate',\n  Indeterminate = 'indeterminate',\n}\n\nexport interface ProgressButtonClickEvent {\n  value: number;\n}\n\n@customElement('obc-progress-button')\nexport class ObcProgressButton extends LitElement {\n  @property({type: String}) type: ProgressButtonType =\n    ProgressButtonType.Linear;\n  /** @availableWhen type==Linear */\n  @property({type: String}) buttonStyle: ButtonStyle = ButtonStyle.Regular;\n  /** @availableWhen showProgress==true */\n  @property({type: String}) mode: ProgressMode = ProgressMode.Determinate;\n  @property({type: Number}) value = 0;\n  @property({type: String}) label = '';\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean}) showProgress = false;\n  /** @availableWhen type==Linear */\n  @property({type: Boolean}) hasLeadingIcon = false;\n  /** @availableWhen type==Linear */\n  @property({type: Boolean}) hasTrailingIcon = false;\n  @property({type: Boolean}) hasAlert = false;\n  /** @availableWhen type==Circular && showProgress==true */\n  @property({type: Boolean}) progressiveIndeterminate = false;\n  /** @availableWhen type==Circular */\n  @property({type: Boolean}) showLabel = false;\n\n  override render() {\n    if (this.type === ProgressButtonType.Circular) {\n      return this.renderCircularButton();\n    }\n    return this.renderLinearButton();\n  }\n\n  private renderLinearButton() {\n    const wrapperClasses = {\n      wrapper: true,\n      'linear-wrapper': true,\n      [this.buttonStyle]: true,\n      disabled: this.disabled,\n    };\n\n    const visibleWrapperClasses = {\n      'visible-wrapper': true,\n      alert: this.hasAlert,\n    };\n\n    return html`\n      <button\n        class=\"${classMap(wrapperClasses)}\"\n        ?disabled=\"${this.disabled}\"\n        @click=\"${this.handleClick}\"\n        aria-label=\"${this.label}\"\n        aria-busy=\"${this.showProgress &&\n        this.mode === ProgressMode.Indeterminate}\"\n        aria-valuenow=\"${this.showProgress &&\n        this.mode === ProgressMode.Determinate\n          ? this.value\n          : nothing}\"\n        aria-valuemin=\"${this.showProgress &&\n        this.mode === ProgressMode.Determinate\n          ? 0\n          : nothing}\"\n        aria-valuemax=\"${this.showProgress &&\n        this.mode === ProgressMode.Determinate\n          ? 100\n          : nothing}\"\n        role=\"button\"\n      >\n        ${this.showProgress ? this.renderLinearProgress() : nothing}\n\n        <div class=\"${classMap(visibleWrapperClasses)}\">\n          <div class=\"linear-label-icon-container\">\n            ${this.hasLeadingIcon\n              ? html`<slot name=\"leading-icon\"></slot>`\n              : nothing}\n            <span class=\"button-text\">${this.label}</span>\n          </div>\n          ${this.hasTrailingIcon\n            ? html`<slot name=\"trailing-icon\"></slot>`\n            : nothing}\n        </div>\n      </button>\n    `;\n  }\n\n  private renderLinearProgress() {\n    const clampedValue = Math.max(0, Math.min(100, this.value));\n    const progressWidth = `${clampedValue}%`;\n\n    return html`\n      <div class=\"linear-progress-container\">\n        <div class=\"linear-progress-bar\">\n          ${this.mode === ProgressMode.Determinate\n            ? html`\n                <div\n                  class=\"linear-progress-fill\"\n                  style=${styleMap({width: progressWidth})}\n                ></div>\n              `\n            : html` <div class=\"linear-progress-indeterminate\"></div> `}\n        </div>\n      </div>\n    `;\n  }\n\n  private renderCircularButton() {\n    const wrapperClasses = {\n      wrapper: true,\n      'circular-wrapper': true,\n      disabled: this.disabled,\n      'with-label': this.showLabel,\n    };\n\n    return html`\n      <button\n        class=\"${classMap(wrapperClasses)}\"\n        ?disabled=\"${this.disabled}\"\n        @click=\"${this.handleClick}\"\n        aria-label=\"${this.label}\"\n        aria-busy=\"${this.showProgress &&\n        this.getCircularProgressMode() !== CircularProgressMode.determinate}\"\n        aria-valuenow=\"${this.showProgress &&\n        this.getCircularProgressMode() === CircularProgressMode.determinate\n          ? this.value\n          : nothing}\"\n        aria-valuemin=\"${this.showProgress &&\n        this.getCircularProgressMode() === CircularProgressMode.determinate\n          ? 0\n          : nothing}\"\n        aria-valuemax=\"${this.showProgress &&\n        this.getCircularProgressMode() === CircularProgressMode.determinate\n          ? 100\n          : nothing}\"\n        role=\"button\"\n      >\n        <div class=\"circular-icon-container\">\n          ${this.showProgress ? this.renderCircularProgress() : nothing}\n\n          <div class=\"circular-visible-wrapper\">\n            <slot name=\"icon\"></slot>\n          </div>\n        </div>\n\n        ${this.showLabel\n          ? html`<div class=\"circular-label\">${this.label}</div>`\n          : nothing}\n      </button>\n    `;\n  }\n\n  private getCircularProgressMode(): CircularProgressMode {\n    if (this.progressiveIndeterminate) {\n      return CircularProgressMode.progressiveIndeterminate;\n    }\n    if (this.mode === ProgressMode.Determinate) {\n      return CircularProgressMode.determinate;\n    }\n    return CircularProgressMode.indeterminate;\n  }\n\n  private renderCircularProgress() {\n    return html`\n      <div class=\"circular-progress-svg-container\">\n        ${this.hasAlert\n          ? html`<svg\n              class=\"circular-alert-svg\"\n              viewBox=\"0 0 42 42\"\n              preserveAspectRatio=\"xMidYMid meet\"\n            >\n              <circle\n                class=\"circular-alert-ring\"\n                cx=\"21\"\n                cy=\"21\"\n                r=\"20\"\n                stroke-width=\"2\"\n                fill=\"none\"\n              />\n            </svg>`\n          : nothing}\n        <obc-circular-progress\n          .mode=${this.getCircularProgressMode()}\n          .value=${this.value}\n          .viewBoxSize=${42}\n          .strokeWidth=${4}\n          .padding=${1}\n        ></obc-circular-progress>\n      </div>\n    `;\n  }\n\n  private handleClick(e: Event) {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    const event = new CustomEvent<ProgressButtonClickEvent>('obc-click', {\n      detail: {\n        value: this.value,\n      },\n      composed: true,\n    });\n\n    this.dispatchEvent(event);\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-progress-button': ObcProgressButton;\n  }\n}\n"],"names":["ProgressButtonType","ButtonStyle","ProgressMode"],"mappings":"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"}
+{"version":3,"file":"progress-button.js","sources":["../../../src/components/progress-button/progress-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport componentStyle from './progress-button.css?inline';\nimport {customElement} from '../../decorator.js';\nimport {CircularProgressMode} from '../../building-blocks/circular-progress/circular-progress.js';\n\nexport enum ProgressButtonType {\n  Linear = 'linear',\n  Circular = 'circular',\n}\n\nexport enum ButtonStyle {\n  Regular = 'regular',\n  Flat = 'flat',\n  Raised = 'raised',\n}\n\nexport enum ProgressMode {\n  Determinate = 'determinate',\n  Indeterminate = 'indeterminate',\n}\n\nexport interface ProgressButtonClickEvent {\n  value: number;\n}\n\n/**\n * `<obc-progress-button>` – A button with a built-in progress indicator for actions\n * that take time to complete, such as uploads, downloads, or background processing.\n *\n * Combines a clickable button with an embedded progress visualization so a single\n * control can both trigger a long-running action and communicate its ongoing status.\n * The progress indicator is shown on demand (via `showProgress`) and can report either\n * a known percentage or an open-ended \"working\" state.\n *\n * ## Features / Variants\n *\n * **Layout types (`type`)**\n * - **Linear** (default): A text button (optionally with leading/trailing icons) with a\n *   thin horizontal progress bar rendered above the label. Best for primary actions where\n *   a descriptive label is helpful (e.g. \"Upload File\", \"Download\").\n * - **Circular**: A compact icon-only button wrapped by a circular progress ring, with an\n *   optional label rendered below it. Best for space-constrained or icon-driven actions.\n *\n * **Button styles (`buttonStyle`, Linear only)**\n * - `regular` (default), `flat`, and `raised` elevation variants. The circular type always\n *   uses a flat visual treatment.\n *\n * **Progress modes (`mode`)**\n * - **Determinate** (default): Fills the bar/ring proportionally to `value` (0–100).\n * - **Indeterminate**: Animated, looping indicator for work of unknown duration.\n * - **Progressive indeterminate** (Circular only, via `progressiveIndeterminate`): A hybrid\n *   ring that animates while still advancing toward `value`.\n *\n * **Other**\n * - **Alert state** (`hasAlert`): Draws a red ring/border to flag an error or failed action.\n * - **Disabled** (`disabled`): Blocks interaction; the `obc-click` event is suppressed.\n *\n * ## Usage Guidelines\n *\n * Use a progress button when a single action both starts and tracks a time-consuming task,\n * keeping the trigger and its feedback in one place. Toggle `showProgress` on when the task\n * begins and update `value` as it advances; switch to `mode=\"indeterminate\"` (or\n * `progressiveIndeterminate` for circular) when the duration or completion percentage is\n * unknown. Choose the **linear** type when a text label aids comprehension, and the\n * **circular** type for compact, icon-led actions. For a plain action with no progress\n * tracking, prefer a standard button instead.\n *\n * ## Slots\n *\n * | Slot            | Renders When...                    | Purpose                                              |\n * | --------------- | ---------------------------------- | ---------------------------------------------------- |\n * | `leading-icon`  | `type=\"linear\"` && `hasLeadingIcon`| Icon shown before the label.                         |\n * | `trailing-icon` | `type=\"linear\"` && `hasTrailingIcon`| Icon shown after the label.                          |\n * | `icon`          | `type=\"circular\"`                  | Central icon inside the circular progress ring.      |\n *\n * ## Events\n *\n * - `obc-click` – Fired when the button is activated (suppressed while `disabled`); the detail\n *   carries the current progress `value`.\n *\n * @example\n * ```html\n * <obc-progress-button\n *   type=\"linear\"\n *   buttonStyle=\"raised\"\n *   label=\"Upload File\"\n *   showProgress\n *   mode=\"determinate\"\n *   value=\"45\"\n * >\n *   <obi-placeholder slot=\"leading-icon\"></obi-placeholder>\n * </obc-progress-button>\n * ```\n *\n * @slot leading-icon - Icon before the label (`type=\"linear\"` && `hasLeadingIcon`).\n * @slot trailing-icon - Icon after the label (`type=\"linear\"` && `hasTrailingIcon`).\n * @slot icon - Central icon for the circular variant (`type=\"circular\"`).\n * @fires obc-click {CustomEvent<ProgressButtonClickEvent>} When the button is activated; detail holds the current `value`.\n */\n@customElement('obc-progress-button')\nexport class ObcProgressButton extends LitElement {\n  /** Layout type of the button: `linear` (label + bar) or `circular` (icon + ring). */\n  @property({type: String}) type: ProgressButtonType =\n    ProgressButtonType.Linear;\n  /**\n   * Elevation style of the button surface.\n   * @availableWhen type==linear\n   */\n  @property({type: String}) buttonStyle: ButtonStyle = ButtonStyle.Regular;\n  /**\n   * Progress mode: `determinate` tracks `value`, `indeterminate` loops indefinitely.\n   * @availableWhen showProgress==true\n   */\n  @property({type: String}) mode: ProgressMode = ProgressMode.Determinate;\n  /** Progress percentage (0–100); clamped when rendered. */\n  @property({type: Number}) value = 0;\n  /** Text shown in the button (linear) or below it (circular, when `showLabel`). */\n  @property({type: String}) label = '';\n  /** Blocks interaction and suppresses the `obc-click` event. */\n  @property({type: Boolean}) disabled = false;\n  /** Reveals the progress bar/ring. */\n  @property({type: Boolean}) showProgress = false;\n  /**\n   * Renders the `leading-icon` slot.\n   * @availableWhen type==linear\n   */\n  @property({type: Boolean}) hasLeadingIcon = false;\n  /**\n   * Renders the `trailing-icon` slot.\n   * @availableWhen type==linear\n   */\n  @property({type: Boolean}) hasTrailingIcon = false;\n  /** Shows an alert (error) ring/border around the button. */\n  @property({type: Boolean}) hasAlert = false;\n  /**\n   * Uses a progressive indeterminate ring that animates while advancing toward `value`.\n   * @availableWhen type==circular && showProgress==true\n   */\n  @property({type: Boolean}) progressiveIndeterminate = false;\n  /**\n   * Shows the `label` below the circular button.\n   * @availableWhen type==circular\n   */\n  @property({type: Boolean}) showLabel = false;\n\n  override render() {\n    if (this.type === ProgressButtonType.Circular) {\n      return this.renderCircularButton();\n    }\n    return this.renderLinearButton();\n  }\n\n  private renderLinearButton() {\n    const wrapperClasses = {\n      wrapper: true,\n      'linear-wrapper': true,\n      [this.buttonStyle]: true,\n      disabled: this.disabled,\n    };\n\n    const visibleWrapperClasses = {\n      'visible-wrapper': true,\n      alert: this.hasAlert,\n    };\n\n    return html`\n      <button\n        class=\"${classMap(wrapperClasses)}\"\n        ?disabled=\"${this.disabled}\"\n        @click=\"${this.handleClick}\"\n        aria-label=\"${this.label}\"\n        aria-busy=\"${this.showProgress &&\n        this.mode === ProgressMode.Indeterminate}\"\n        aria-valuenow=\"${this.showProgress &&\n        this.mode === ProgressMode.Determinate\n          ? this.value\n          : nothing}\"\n        aria-valuemin=\"${this.showProgress &&\n        this.mode === ProgressMode.Determinate\n          ? 0\n          : nothing}\"\n        aria-valuemax=\"${this.showProgress &&\n        this.mode === ProgressMode.Determinate\n          ? 100\n          : nothing}\"\n        role=\"button\"\n      >\n        ${this.showProgress ? this.renderLinearProgress() : nothing}\n\n        <div class=\"${classMap(visibleWrapperClasses)}\">\n          <div class=\"linear-label-icon-container\">\n            ${this.hasLeadingIcon\n              ? html`<slot name=\"leading-icon\"></slot>`\n              : nothing}\n            <span class=\"button-text\">${this.label}</span>\n          </div>\n          ${this.hasTrailingIcon\n            ? html`<slot name=\"trailing-icon\"></slot>`\n            : nothing}\n        </div>\n      </button>\n    `;\n  }\n\n  private renderLinearProgress() {\n    const clampedValue = Math.max(0, Math.min(100, this.value));\n    const progressWidth = `${clampedValue}%`;\n\n    return html`\n      <div class=\"linear-progress-container\">\n        <div class=\"linear-progress-bar\">\n          ${this.mode === ProgressMode.Determinate\n            ? html`\n                <div\n                  class=\"linear-progress-fill\"\n                  style=${styleMap({width: progressWidth})}\n                ></div>\n              `\n            : html` <div class=\"linear-progress-indeterminate\"></div> `}\n        </div>\n      </div>\n    `;\n  }\n\n  private renderCircularButton() {\n    const wrapperClasses = {\n      wrapper: true,\n      'circular-wrapper': true,\n      disabled: this.disabled,\n      'with-label': this.showLabel,\n    };\n\n    return html`\n      <button\n        class=\"${classMap(wrapperClasses)}\"\n        ?disabled=\"${this.disabled}\"\n        @click=\"${this.handleClick}\"\n        aria-label=\"${this.label}\"\n        aria-busy=\"${this.showProgress &&\n        this.getCircularProgressMode() !== CircularProgressMode.determinate}\"\n        aria-valuenow=\"${this.showProgress &&\n        this.getCircularProgressMode() === CircularProgressMode.determinate\n          ? this.value\n          : nothing}\"\n        aria-valuemin=\"${this.showProgress &&\n        this.getCircularProgressMode() === CircularProgressMode.determinate\n          ? 0\n          : nothing}\"\n        aria-valuemax=\"${this.showProgress &&\n        this.getCircularProgressMode() === CircularProgressMode.determinate\n          ? 100\n          : nothing}\"\n        role=\"button\"\n      >\n        <div class=\"circular-icon-container\">\n          ${this.showProgress ? this.renderCircularProgress() : nothing}\n\n          <div class=\"circular-visible-wrapper\">\n            <slot name=\"icon\"></slot>\n          </div>\n        </div>\n\n        ${this.showLabel\n          ? html`<div class=\"circular-label\">${this.label}</div>`\n          : nothing}\n      </button>\n    `;\n  }\n\n  private getCircularProgressMode(): CircularProgressMode {\n    if (this.progressiveIndeterminate) {\n      return CircularProgressMode.progressiveIndeterminate;\n    }\n    if (this.mode === ProgressMode.Determinate) {\n      return CircularProgressMode.determinate;\n    }\n    return CircularProgressMode.indeterminate;\n  }\n\n  private renderCircularProgress() {\n    return html`\n      <div class=\"circular-progress-svg-container\">\n        ${this.hasAlert\n          ? html`<svg\n              class=\"circular-alert-svg\"\n              viewBox=\"0 0 42 42\"\n              preserveAspectRatio=\"xMidYMid meet\"\n            >\n              <circle\n                class=\"circular-alert-ring\"\n                cx=\"21\"\n                cy=\"21\"\n                r=\"20\"\n                stroke-width=\"2\"\n                fill=\"none\"\n              />\n            </svg>`\n          : nothing}\n        <obc-circular-progress\n          .mode=${this.getCircularProgressMode()}\n          .value=${this.value}\n          .viewBoxSize=${42}\n          .strokeWidth=${4}\n          .padding=${1}\n        ></obc-circular-progress>\n      </div>\n    `;\n  }\n\n  private handleClick(e: Event) {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    const event = new CustomEvent<ProgressButtonClickEvent>('obc-click', {\n      detail: {\n        value: this.value,\n      },\n      composed: true,\n    });\n\n    this.dispatchEvent(event);\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-progress-button': ObcProgressButton;\n  }\n}\n"],"names":["ProgressButtonType","ButtonStyle","ProgressMode"],"mappings":"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"}