@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.81 → 2.0.0-next.82

package/postcss.config.mjs

@@ -1,4 +1,5 @@
 import path from 'path';
+import postcss from 'postcss';
 import postcssMixins from 'postcss-mixins';
 import postcssNesting from 'postcss-nesting';
 import postcssImport from 'postcss-import';
@@ -185,11 +186,14 @@ export default (ctx) => ({
     {
       postcssPlugin: 'append-global-styles',
       Once(root) {
-        root.prepend(`
-          * {
-            -webkit-tap-highlight-color: transparent;
-          }
-        `);
+        const source = root.first?.source ?? root.source;
+        const rule = postcss.rule({selector: '*', source});
+        rule.append({
+          prop: '-webkit-tap-highlight-color',
+          value: 'transparent',
+          source,
+        });
+        root.prepend(rule);
       },
     },
   ],

package/src/components/progress-bar/progress-bar.ts

@@ -22,28 +22,121 @@ export enum CircularProgressState {
   icon = 'icon',
 }
 
+/**
+ * `<obc-progress-bar>` – A status-only progress indicator (progress meter / spinner /
+ * loading indicator) for visualizing how far a task has advanced.
+ *
+ * Displays the progress of an ongoing operation either as a horizontal bar or as a circular
+ * ring. Unlike `<obc-progress-button>`, this is a passive, non-interactive display element:
+ * it shows status only and emits no events. Use it to communicate determinate progress
+ * (a known percentage) or an open-ended "working" state.
+ *
+ * ## Features / Variants
+ *
+ * **Layout types (`type`)**
+ * - **Linear** (default): A horizontal bar with an optional value label above and an optional
+ *   description below. Best inline within content where horizontal space is available.
+ * - **Circular**: A ring with centered content. Best for compact, icon-led, or centered status.
+ *
+ * **Linear modes (`mode`)**
+ * - **Determinate** (default): Fills proportionally to `value` (0–100); the label shows the
+ *   rounded percentage.
+ * - **Indeterminate**: Animated, looping fill for work of unknown duration; the label shows
+ *   "Loading".
+ *
+ * **Circular states (`circularState`)**
+ * - **Determinate**: Ring fills to `value`, with the rounded number (and optional `%` unit) centered.
+ * - **Indeterminate**: Animated ring with the `icon` slot centered.
+ * - **Icon**: A full ring acting as a frame around the centered `icon` slot (defaults to a placeholder).
+ *
+ * **Circular progressive indeterminate (`progressiveIndeterminate`)**
+ * - A spinning arc that also grows with `value`, blending an indeterminate animation with a
+ *   numeric readout. Takes precedence over `circularState` when enabled.
+ *
+ * ## Usage Guidelines
+ *
+ * Use a progress bar to report the status of a task the user is waiting on. Choose
+ * **determinate** when the completion percentage is known and **indeterminate** when it is not.
+ * Pick the **linear** type for inline, full-width contexts and the **circular** type for compact
+ * or centered placements. Because this component is display-only, pair it with a separate
+ * control (such as `<obc-progress-button>`) when the user also needs to trigger or cancel the action.
+ *
+ * ## Slots
+ *
+ * | Slot   | Renders When...                                              | Purpose                                   |
+ * | ------ | ----------------------------------------------------------- | ----------------------------------------- |
+ * | `icon` | `type="circular"` && `circularState` is `indeterminate` or `icon` | Centered icon inside the circular ring. |
+ *
+ * @example
+ * ```html
+ * <obc-progress-bar
+ *   type="linear"
+ *   mode="determinate"
+ *   value="65"
+ *   showValue
+ *   hasDescription
+ *   description="Uploading files..."
+ * ></obc-progress-bar>
+ * ```
+ *
+ * @slot icon - Centered icon for the circular `indeterminate` and `icon` states.
+ */
 @customElement('obc-progress-bar')
 export class ObcProgressBar extends LitElement {
+  /** Layout type: `linear` (horizontal bar) or `circular` (ring). */
   @property({type: String}) type: ProgressBarType = ProgressBarType.linear;
-  /** @availableWhen type==linear */
+  /**
+   * Progress mode: `determinate` tracks `value`, `indeterminate` loops indefinitely.
+   * @availableWhen type==linear
+   */
   @property({type: String}) mode: ProgressBarMode = ProgressBarMode.determinate;
-  /** @availableWhen type==circular */
+  /**
+   * Circular display state: `determinate` (numeric ring), `indeterminate` (animated ring with
+   * icon), or `icon` (ring framing the icon slot).
+   * @availableWhen type==circular
+   */
   @property({type: String}) circularState: CircularProgressState =
     CircularProgressState.determinate;
+  /** Progress percentage (0–100); clamped when rendered. */
   @property({type: Number}) value = 0;
-  /** @availableWhen type==linear */
+  /**
+   * Shows the value label above the bar (percentage when determinate, "Loading" when indeterminate).
+   * @availableWhen type==linear
+   */
   @property({type: Boolean}) showValue = false;
-  /** @availableWhen type==circular && (progressiveIndeterminate==true || circularState==determinate) */
+  /**
+   * Appends a `%` unit next to the centered value.
+   * @availableWhen type==circular && (progressiveIndeterminate==true || circularState==determinate)
+   */
   @property({type: Boolean}) showUnit = false;
-  /** @availableWhen type==linear */
+  /**
+   * Shows the `description` text below the bar.
+   * @availableWhen type==linear
+   */
   @property({type: Boolean}) hasDescription = false;
-  /** @availableWhen type==linear && hasDescription==true */
+  /**
+   * Description text rendered below the bar.
+   * @availableWhen type==linear && hasDescription==true
+   */
   @property({type: String}) description = 'Description text';
-  /** @availableWhen type==linear && showValue==true && mode==determinate */
+  /**
+   * Shows the `stateLabel` next to the value.
+   *
+   * **TODO(designer):** Confirm the intended purpose of the state indicator — the story labels
+   * this a "future feature".
+   * @availableWhen type==linear && showValue==true && mode==determinate
+   */
   @property({type: Boolean}) showState = false;
-  /** @availableWhen type==linear && showValue==true && mode==determinate && showState==true */
+  /**
+   * Text shown alongside the value when `showState` is enabled.
+   * @availableWhen type==linear && showValue==true && mode==determinate && showState==true
+   */
   @property({type: String}) stateLabel = 'Open';
-  /** @availableWhen type==circular */
+  /**
+   * Uses a progressive indeterminate ring (spinning arc that grows with `value`); takes
+   * precedence over `circularState`.
+   * @availableWhen type==circular
+   */
   @property({type: Boolean}) progressiveIndeterminate = false;
 
   override render() {

package/src/components/progress-button/progress-button.ts

@@ -26,26 +26,124 @@ 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`.
+ */
 @customElement('obc-progress-button')
 export class ObcProgressButton extends LitElement {
+  /** Layout type of the button: `linear` (label + bar) or `circular` (icon + ring). */
   @property({type: String}) type: ProgressButtonType =
     ProgressButtonType.Linear;
-  /** @availableWhen type==Linear */
+  /**
+   * Elevation style of the button surface.
+   * @availableWhen type==linear
+   */
   @property({type: String}) buttonStyle: ButtonStyle = ButtonStyle.Regular;
-  /** @availableWhen showProgress==true */
+  /**
+   * Progress mode: `determinate` tracks `value`, `indeterminate` loops indefinitely.
+   * @availableWhen showProgress==true
+   */
   @property({type: String}) mode: ProgressMode = ProgressMode.Determinate;
+  /** Progress percentage (0–100); clamped when rendered. */
   @property({type: Number}) value = 0;
+  /** Text shown in the button (linear) or below it (circular, when `showLabel`). */
   @property({type: String}) label = '';
+  /** Blocks interaction and suppresses the `obc-click` event. */
   @property({type: Boolean}) disabled = false;
+  /** Reveals the progress bar/ring. */
   @property({type: Boolean}) showProgress = false;
-  /** @availableWhen type==Linear */
+  /**
+   * Renders the `leading-icon` slot.
+   * @availableWhen type==linear
+   */
   @property({type: Boolean}) hasLeadingIcon = false;
-  /** @availableWhen type==Linear */
+  /**
+   * Renders the `trailing-icon` slot.
+   * @availableWhen type==linear
+   */
   @property({type: Boolean}) hasTrailingIcon = false;
+  /** Shows an alert (error) ring/border around the button. */
   @property({type: Boolean}) hasAlert = false;
-  /** @availableWhen type==Circular && showProgress==true */
+  /**
+   * Uses a progressive indeterminate ring that animates while advancing toward `value`.
+   * @availableWhen type==circular && showProgress==true
+   */
   @property({type: Boolean}) progressiveIndeterminate = false;
-  /** @availableWhen type==Circular */
+  /**
+   * Shows the `label` below the circular button.
+   * @availableWhen type==circular
+   */
   @property({type: Boolean}) showLabel = false;
 
   override render() {

package/vite.config.ts

@@ -12,6 +12,7 @@ const input = globbySync('src/**/*.ts', {
     'src/**/*.stories.ts',
     'src/**/*.spec.ts',
     'src/**/*.test.ts',
+    'src/**/*.d.ts',
     'src/storybook-util.ts',
     'src/ar/_test-utils.ts',
   ],
@@ -24,6 +25,7 @@ export default defineConfig(({mode}) => {
   return {
     build: {
       minify: false,
+      sourcemap: true,
       lib: {
         entry: 'src/index.ts',
         name: 'openbridge-webcomponents',
@@ -49,7 +51,6 @@ export default defineConfig(({mode}) => {
               format: 'es',
               entryFileNames: 'openbridge-webcomponents.bundle.js',
               dir: 'bundle',
-              sourcemap: true,
               preserveModules: false,
               inlineDynamicImports: true,
             }
@@ -59,7 +60,6 @@ export default defineConfig(({mode}) => {
               entryFileNames: (opt) => {
                 return `${opt.name}.js`;
               },
-              sourcemap: true,
               preserveModules: true,
               preserveModulesRoot: 'src',
               inlineDynamicImports: false,

package/xliff/es-419.xlf

@@ -6,10 +6,6 @@
   <source>No active alerts</source>
   <target>No alertas activas</target>
 </trans-unit>
-<trans-unit id="s3cd891731e99f7e6">
-  <source>Active alerts</source>
-  <target>Alertas activas</target>
-</trans-unit>
 <trans-unit id="s8119af112f965c78">
   <source>Brilliance</source>
   <target>Brillantez</target>

package/xliff/fi-FI.xlf

@@ -50,10 +50,6 @@
   <source>Go to the 'Alert list' for more details or to manage existing alerts.</source>
   <target>Siirry 'Hälytyslistaan' saadaksesi lisätietoja tai hallitaksesi olemassa olevia hälytyksiä.</target>
 </trans-unit>
-<trans-unit id="s3cd891731e99f7e6">
-  <source>Active alerts</source>
-  <target>Aktiiviset hälytykset</target>
-</trans-unit>
 <trans-unit id="sa6ef04345891fb38">
   <source>ACK visible</source>
   <target>Vahvistus näkyvissä</target>

package/dist/components/input/input.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=input.d.ts.map

package/dist/components/input/input.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.ts"],"names":[],"mappings":""}

package/dist/components/input/input.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=input.js.map

package/dist/components/input/input.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/vite-env.d.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=vite-env.d.js.map

package/dist/vite-env.d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vite-env.d.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}