@sebgroup/green-core 3.27.0 → 3.28.0

package/components/index.d.ts

@@ -34,6 +34,7 @@ export * from './mask';
 export * from './menu-button';
 export * from './pagination';
 export * from './popover';
+export * from './progress';
 export * from './radio';
 export * from './rich-text';
 export * from './segmented-control';

package/components/index.js

@@ -34,6 +34,7 @@ export * from "./mask/index.js";
 export * from "./menu-button/index.js";
 export * from "./pagination/index.js";
 export * from "./popover/index.js";
+export * from "./progress/index.js";
 export * from "./radio/index.js";
 export * from "./rich-text/index.js";
 export * from "./segmented-control/index.js";

package/components/progress/index.d.ts

@@ -0,0 +1 @@
+export * from './progress';

package/components/progress/index.js

@@ -0,0 +1 @@
+export * from "./progress.js";

package/components/progress/progress.component.d.ts

@@ -0,0 +1,67 @@
+import { GdsElement } from '../../gds-element';
+export type GdsProgressVariant = 'information' | 'positive' | 'negative';
+declare class Progress extends GdsElement {
+    #private;
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * The accessible label for the progress bar. Also rendered as visible text
+     * unless `plain` is set.
+     */
+    label: string;
+    /**
+     * The current progress, expressed on a scale from 0 to `max`.
+     */
+    value: number;
+    /**
+     * The upper bound of the progress scale. Values of 0 or less fall back to 100.
+     */
+    max: number;
+    /**
+     * Visual state of the progress bar. `positive` and `negative` also swap the
+     * trailing value text for a status icon.
+     */
+    variant: GdsProgressVariant;
+    /**
+     * Controls the font-size of texts and the track height.
+     */
+    size: 'large' | 'small';
+    /**
+     * Style Expression Property that controls the `flex-direction` property.
+     * Supports all valid CSS `flex-direction` values. Use `column-reverse` to
+     * place the label row below the bar.
+     */
+    'flex-direction'?: string;
+    /**
+     * Renders an animated, non-measurable progress bar. The native `<progress>`
+     * element is left without a value, so assistive tech announces it as
+     * indeterminate.
+     */
+    indeterminate: boolean;
+    /**
+     * Hides the label row, while still keeping the accessible label.
+     */
+    plain: boolean;
+    /**
+     * Hides the trailing text and status icon.
+     */
+    hideValue: boolean;
+    /**
+     * Text rendered at the end of the label row, in place of the automatically
+     * formatted percentage or the status icon.
+     */
+    trail?: string;
+    private _currentLocale;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}
+declare const GdsProgress_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").LayoutChildProps) & typeof Progress;
+/**
+ * @element gds-progress
+ * @status beta
+ *
+ * @summary A progress bar built on the native `<progress>` element.
+ */
+export declare class GdsProgress extends GdsProgress_base {
+}
+export {};

package/components/progress/progress.component.js

@@ -0,0 +1,172 @@
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod
+} from "../../chunks/chunk.H2T4A5YY.js";
+var _handleLocaleStatus, _Progress_instances, percent_fn, displayValue_fn, renderTrail_fn;
+import { localized, msg } from "@lit/localize";
+import { property, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { when } from "lit/directives/when.js";
+import { GdsElement } from "../../gds-element.js";
+import { gdsCustomElement, html } from "../../scoping.js";
+import { tokens } from "../../tokens.style.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
+import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
+import {
+  withLayoutChildProps,
+  withMarginProps,
+  withSizeXProps
+} from "../../utils/mixins/declarative-layout-mixins.js";
+import { IconCircleCheck } from "../icon/icons/circle-check.component.js";
+import { IconCircleX } from "../icon/icons/circle-x.component.js";
+import ProgressStyles from "./progress.styles.js";
+let Progress = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _Progress_instances);
+    this.label = "";
+    this.value = 0;
+    this.max = 100;
+    this.variant = "information";
+    this.size = "large";
+    this.indeterminate = false;
+    this.plain = false;
+    this.hideValue = false;
+    this._currentLocale = navigator.language;
+    __privateAdd(this, _handleLocaleStatus, (e) => {
+      const detail = e.detail;
+      if (detail?.status === "ready") this._currentLocale = detail.readyLocale;
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("lit-localize-status", __privateGet(this, _handleLocaleStatus));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("lit-localize-status", __privateGet(this, _handleLocaleStatus));
+  }
+  render() {
+    const percent = __privateMethod(this, _Progress_instances, percent_fn).call(this);
+    return html`
+      ${when(
+      this.plain,
+      () => html`<span id="label" class="visually-hidden">${this.label}</span>`,
+      () => html`
+          <div id="label-row">
+            <span id="label">${this.label}</span>
+            ${__privateMethod(this, _Progress_instances, renderTrail_fn).call(this)}
+          </div>
+        `
+    )}
+
+      <div id="track">
+        <progress
+          id="control"
+          max=${percent.max}
+          value=${ifDefined(this.indeterminate ? void 0 : percent.value)}
+          aria-labelledby=${ifDefined(this.label ? "label" : void 0)}
+          aria-valuetext=${ifDefined(__privateMethod(this, _Progress_instances, displayValue_fn).call(this))}
+        ></progress>
+        ${when(
+      this.indeterminate,
+      () => html`<div id="indeterminate-fill" aria-hidden="true"></div>`
+    )}
+      </div>
+    `;
+  }
+};
+_handleLocaleStatus = new WeakMap();
+_Progress_instances = new WeakSet();
+percent_fn = function() {
+  const max = this.max > 0 ? this.max : 100;
+  const value = Math.max(0, Math.min(max, this.value));
+  return { value, max, ratio: value / max };
+};
+// Indeterminate progress has no meaningful value to announce, so no valuetext is set.
+displayValue_fn = function() {
+  if (this.trail) return this.trail;
+  if (this.indeterminate) return void 0;
+  return new Intl.NumberFormat(this._currentLocale, {
+    style: "percent"
+  }).format(__privateMethod(this, _Progress_instances, percent_fn).call(this).ratio);
+};
+renderTrail_fn = function() {
+  if (this.hideValue) return null;
+  if (this.trail) return html`<span id="trail">${this.trail}</span>`;
+  if (this.indeterminate) return null;
+  const iconSize = this.size === "small" ? "s" : "m";
+  return when(
+    this.variant === "positive",
+    () => html`<gds-icon-circle-check
+          class="status-icon"
+          solid
+          size=${iconSize}
+          label=${msg("Completed")}
+        ></gds-icon-circle-check>`,
+    () => when(
+      this.variant === "negative",
+      () => html`<gds-icon-circle-x
+              class="status-icon"
+              solid
+              size=${iconSize}
+              label=${msg("Failed")}
+            ></gds-icon-circle-x>`,
+      () => html`<span id="trail">${__privateMethod(this, _Progress_instances, displayValue_fn).call(this)}</span>`
+    )
+  );
+};
+Progress.styles = [tokens, ProgressStyles];
+__decorateClass([
+  property()
+], Progress.prototype, "label", 2);
+__decorateClass([
+  property({ type: Number })
+], Progress.prototype, "value", 2);
+__decorateClass([
+  property({ type: Number })
+], Progress.prototype, "max", 2);
+__decorateClass([
+  property({ reflect: true })
+], Progress.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], Progress.prototype, "size", 2);
+__decorateClass([
+  styleExpressionProperty()
+], Progress.prototype, "flex-direction", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Progress.prototype, "indeterminate", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Progress.prototype, "plain", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "hide-value" })
+], Progress.prototype, "hideValue", 2);
+__decorateClass([
+  property()
+], Progress.prototype, "trail", 2);
+__decorateClass([
+  state()
+], Progress.prototype, "_currentLocale", 2);
+Progress = __decorateClass([
+  localized(),
+  ariaForwarding({
+    labelledBy: "#control"
+  })
+], Progress);
+let GdsProgress = class extends withSizeXProps(
+  withMarginProps(withLayoutChildProps(Progress))
+) {
+};
+GdsProgress = __decorateClass([
+  gdsCustomElement("gds-progress", {
+    dependsOn: [IconCircleCheck, IconCircleX]
+  })
+], GdsProgress);
+export {
+  GdsProgress
+};

package/components/progress/progress.d.ts

@@ -0,0 +1,2 @@
+import { GdsProgress } from './progress.component';
+export { GdsProgress };

package/components/progress/progress.js

@@ -0,0 +1,6 @@
+import "../../chunks/chunk.H2T4A5YY.js";
+import { GdsProgress } from "./progress.component.js";
+GdsProgress.define();
+export {
+  GdsProgress
+};

package/components/progress/progress.styles.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("lit").CSSResult;
+export default styles;

package/components/progress/progress.styles.js

@@ -0,0 +1,175 @@
+import "../../chunks/chunk.H2T4A5YY.js";
+import { css } from "lit";
+const styles = css`
+  :host {
+    --_track-bg: var(--gds-sys-color-l3-neutral-02);
+    --_fill-color: var(--gds-sys-color-l3-neutral-03);
+    --_label-color: var(--gds-sys-color-content-neutral-01);
+    --_track-height: var(--gds-sys-space-3xs);
+    --_font: var(--gds-sys-text-detail-s-regular);
+    --_icon-size: var(--gds-sys-space-m);
+    --_row-gap: var(--gds-sys-space-xs);
+    --_label-gap: var(--gds-sys-space-s);
+    --_indeterminate-inset: 88%;
+    --_indeterminate-duration: 2.1s;
+    --_indeterminate-easing-lead: cubic-bezier(0.2, 0, 0.3, 1);
+    --_indeterminate-easing-trail: cubic-bezier(0.7, 0, 0.8, 1);
+    --_t-easing-out: cubic-bezier(var(--gds-sys-motion-easing-ease-out));
+    --_t-duration: var(--gds-sys-motion-duration-fast);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--_row-gap);
+  }
+
+  :host([size='small']) {
+    --_font: var(--gds-sys-text-detail-xs-regular);
+    --_icon-size: var(--gds-sys-space-s);
+    --_row-gap: var(--gds-sys-space-2xs);
+    --_label-gap: var(--gds-sys-space-xs);
+  }
+
+  :host([variant='positive']) {
+    --_fill-color: var(--gds-sys-color-content-positive-01);
+  }
+
+  :host([variant='negative']) {
+    --_fill-color: var(--gds-sys-color-content-negative-01);
+  }
+
+  .visually-hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
+
+  #label-row {
+    align-items: center;
+    display: flex;
+    font: var(--_font);
+    gap: var(--_label-gap);
+    justify-content: space-between;
+    min-height: var(--_icon-size);
+  }
+
+  #label {
+    color: var(--_label-color);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  #trail {
+    color: var(--_label-color);
+    flex: none;
+    white-space: nowrap;
+  }
+
+  .status-icon {
+    display: block;
+    flex: none;
+  }
+
+  :host([variant='positive']) .status-icon {
+    color: var(--gds-sys-color-content-positive-01);
+  }
+
+  :host([variant='negative']) .status-icon {
+    color: var(--gds-sys-color-content-negative-01);
+  }
+
+  #track {
+    border-radius: var(--gds-sys-radius-max);
+    overflow: hidden;
+    position: relative;
+  }
+
+  progress {
+    -webkit-appearance: none;
+    appearance: none;
+    background: var(--_track-bg);
+    border: none;
+    border-radius: var(--gds-sys-radius-max);
+    display: block;
+    height: var(--_track-height);
+    overflow: hidden;
+    width: 100%;
+  }
+
+  progress::-webkit-progress-bar {
+    background: var(--_track-bg);
+    border-radius: var(--gds-sys-radius-max);
+  }
+
+  progress::-webkit-progress-value {
+    background: var(--_fill-color);
+    border-radius: var(--gds-sys-radius-max);
+    transition: inline-size var(--_t-duration) var(--_t-easing-out);
+  }
+
+  progress::-moz-progress-bar {
+    background: var(--_fill-color);
+    border-radius: var(--gds-sys-radius-max);
+  }
+
+  /* Painted as a sibling of the native element rather than on it: an indeterminate
+     <progress> exposes no value pseudo-element in Chromium. Insets are animated
+     rather than transforms so the pill radius isn't squashed by scaling.
+
+     The two edges run as separate animations over the same span, so neither is ever
+     parked while the other catches up. The leading edge pulls away while the trailing
+     edge lags, which stretches the bar mid-track and collapses it against each end.
+
+     Both curves are shaped y1=0 / y2=1, so each edge starts and ends at zero velocity.
+     That matters because alternating mirrors the curve: any residual speed at the
+     turnaround would flip sign instantly and read as a hard bounce. The difference
+     between the curves is where the motion happens, not how it starts or stops. */
+  #indeterminate-fill {
+    animation:
+      gds-progress-indeterminate-head var(--_indeterminate-duration) infinite
+        alternate var(--_indeterminate-easing-lead),
+      gds-progress-indeterminate-tail var(--_indeterminate-duration) infinite
+        alternate var(--_indeterminate-easing-trail);
+    background: var(--_fill-color);
+    border-radius: var(--gds-sys-radius-max);
+    inset-block: 0;
+    position: absolute;
+  }
+
+  @keyframes gds-progress-indeterminate-head {
+    from {
+      inset-inline-end: var(--_indeterminate-inset);
+    }
+    to {
+      inset-inline-end: 0%;
+    }
+  }
+
+  @keyframes gds-progress-indeterminate-tail {
+    from {
+      inset-inline-start: 0%;
+    }
+    to {
+      inset-inline-start: var(--_indeterminate-inset);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    progress::-webkit-progress-value {
+      transition: none;
+    }
+
+    :host {
+      --_indeterminate-duration: 4s;
+    }
+  }
+`;
+var progress_styles_default = styles;
+export {
+  progress_styles_default as default
+};

package/components/rich-text/rich-text.component.js

@@ -37,11 +37,15 @@ let GdsRichText = class extends withLayoutChildProps(
    * Forwards innerHTML from the inner shadowRoot.
    */
   get innerHTML() {
-    return this.shadowRoot?.innerHTML || "";
+    if (this.shadowRoot) return this.shadowRoot.innerHTML;
+    return super.innerHTML;
   }
   set innerHTML(value) {
-    if (!this.shadowRoot) return;
-    this.shadowRoot.innerHTML = value;
+    if (this.shadowRoot) {
+      this.shadowRoot.innerHTML = value;
+      return;
+    }
+    super.innerHTML = value;
   }
   connectedCallback() {
     super.connectedCallback();