@sebgroup/green-core 3.27.0 → 3.29.0-rc.20261012203419455

package/components/checkbox/checkbox-group/checkbox-group.component.d.ts

@@ -7,10 +7,18 @@ declare class CheckboxGroup extends GdsFormControlElement<string[]> {
      * Controls the font-size of label and supporting text on group form control header and single checkbox buttons respectively.
      */
     size: 'large' | 'small';
+    /**
+     * Style Expression Property that controls the `flex-direction` property of
+     * the checkbox list. Supports all valid CSS `flex-direction` values.
+     */
+    'flex-direction'?: string;
     /**
      * The flex-direction in which checkbox buttons are displayed.
+     *
+     * @deprecated Use `flex-direction` instead.
      */
-    flexDirection: 'row' | 'column';
+    get flexDirection(): string | undefined;
+    set flexDirection(value: string | undefined);
     /**
      * Whether to hide the label for the checkbox group. Usable if you want a single checkbox to act as the label.
      */

package/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -13,6 +13,7 @@ import { GdsFormControlHeader } from "../../../primitives/form-control-header/fo
 import { gdsCustomElement, html } from "../../../scoping.js";
 import { observeLightDOM } from "../../../utils/decorators/index.js";
 import { ariaForwarding } from "../../../utils/decorators/aria-forwarding.js";
+import { styleExpressionProperty } from "../../../utils/decorators/style-expression-property.js";
 import { watch } from "../../../utils/decorators/watch.js";
 import {
   withLayoutChildProps,
@@ -26,7 +27,6 @@ let CheckboxGroup = class extends GdsFormControlElement {
     super(...arguments);
     __privateAdd(this, _CheckboxGroup_instances);
     this.size = "large";
-    this.flexDirection = "column";
     this.hideLabel = false;
     this.supportingText = "";
     this.showExtendedSupportingText = false;
@@ -38,6 +38,17 @@ let CheckboxGroup = class extends GdsFormControlElement {
       });
     });
   }
+  /**
+   * The flex-direction in which checkbox buttons are displayed.
+   *
+   * @deprecated Use `flex-direction` instead.
+   */
+  get flexDirection() {
+    return this["flex-direction"];
+  }
+  set flexDirection(value) {
+    this["flex-direction"] = value;
+  }
   get value() {
     return this._internalValue || [];
   }
@@ -73,15 +84,10 @@ let CheckboxGroup = class extends GdsFormControlElement {
     this.addEventListener("gds-validity-state", __privateGet(this, _syncCheckboxes));
   }
   render() {
-    const classes = {
-      "checkbox-group": true,
-      "direction-row": this.flexDirection === "row",
-      "direction-column": this.flexDirection === "column"
-    };
     return html`<div
       role="group"
       id="checkboxgroup"
-      class=${classMap(classes)}
+      class="checkbox-group"
       aria-labelledby="group-label"
       aria-describedby="supporting-text extended-supporting-text footer"
       aria-invalid=${this.invalid}
@@ -162,8 +168,8 @@ __decorateClass([
   property()
 ], CheckboxGroup.prototype, "size", 2);
 __decorateClass([
-  property({ attribute: "flex-direction" })
-], CheckboxGroup.prototype, "flexDirection", 2);
+  styleExpressionProperty({ selector: ".content" })
+], CheckboxGroup.prototype, "flex-direction", 2);
 __decorateClass([
   property({ type: Boolean, attribute: "hide-label" })
 ], CheckboxGroup.prototype, "hideLabel", 2);

package/components/checkbox/checkbox-group/checkbox-group.styles.js

@@ -38,27 +38,18 @@ const styles = css`
 
   .content {
     display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    /* row-gap/column-gap set once: the browser only renders whichever axis the
+       resolved flex-direction actually uses, so this reproduces the former
+       per-direction gap values without needing to key off direction. */
+    gap: var(--gds-sys-space-s) var(--gds-sys-space-xl);
     position: relative;
     max-width: max-content;
     color: var(--_checkbox-label-color);
   }
 
-  .direction-row .content {
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: var(--gds-sys-space-s) var(--gds-sys-space-xl);
-  }
-
-  .direction-column .content {
-    flex-direction: column;
-    gap: var(--gds-sys-space-s);
-  }
-
-  :host([size='small']) .direction-column .content {
-    gap: var(--gds-sys-space-xs);
-  }
-
-  :host([size='small']) .direction-row .content {
+  :host([size='small']) .content {
     gap: var(--gds-sys-space-xs) var(--gds-sys-space-m);
   }
 

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/radio/radio-group/radio-group.component.d.ts

@@ -7,10 +7,18 @@ declare class RadioGroup extends GdsFormControlElement<string | boolean> {
      * Controls the font-size of label and supporting text on group form control header and single radio buttons respectively.
      */
     size: 'large' | 'small';
+    /**
+     * Style Expression Property that controls the `flex-direction` property of
+     * the radio list. Supports all valid CSS `flex-direction` values.
+     */
+    'flex-direction'?: string;
     /**
      * The flex-direction in which radio buttons are displayed.
+     *
+     * @deprecated Use `flex-direction` instead.
      */
-    flexDirection: 'row' | 'column';
+    get flexDirection(): string | undefined;
+    set flexDirection(value: string | undefined);
     /**
      * The supporting text displayed between the label and the field.
      * This text provides additional context or information to the user.

package/components/radio/radio-group/radio-group.component.js

@@ -6,12 +6,12 @@ import {
 var _RadioGroup_instances, initializeFocusable_fn, handleFocus_fn, dispatchChangeEvents_fn, handleRadioChange_fn, handleKeyDown_fn, focusAndSelectRadio_fn, renderRadioGroupContents_fn, renderFieldControlHeader_fn, renderRadios_fn, renderFieldControlFooter_fn;
 import { localized } from "@lit/localize";
 import { property, query } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
 import { GdsFormControlFooter } from "../../../primitives/form-control-footer/form-control-footer.component.js";
 import { GdsFormControlHeader } from "../../../primitives/form-control-header/form-control-header.component.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 { watch } from "../../../utils/decorators/watch.js";
 import {
   withLayoutChildProps,
@@ -25,11 +25,21 @@ let RadioGroup = class extends GdsFormControlElement {
     super(...arguments);
     __privateAdd(this, _RadioGroup_instances);
     this.size = "large";
-    this.flexDirection = "column";
     this.supportingText = "";
     this.showExtendedSupportingText = false;
     this._isConnected = false;
   }
+  /**
+   * The flex-direction in which radio buttons are displayed.
+   *
+   * @deprecated Use `flex-direction` instead.
+   */
+  get flexDirection() {
+    return this["flex-direction"];
+  }
+  set flexDirection(value) {
+    this["flex-direction"] = value;
+  }
   /**
    * Returns an array of `<gds-radio>` elements in the radio group.
    *
@@ -80,15 +90,10 @@ let RadioGroup = class extends GdsFormControlElement {
     });
   }
   render() {
-    const classes = {
-      "radio-group": true,
-      "direction-row": this.flexDirection === "row",
-      "direction-column": this.flexDirection === "column"
-    };
     return html`<div
       role="radiogroup"
       id="radiogroup"
-      class=${classMap(classes)}
+      class="radio-group"
       aria-labelledby="group-label"
       aria-describedby="supporting-text extended-supporting-text footer"
       aria-invalid=${this.invalid}
@@ -236,8 +241,8 @@ __decorateClass([
   property()
 ], RadioGroup.prototype, "size", 2);
 __decorateClass([
-  property({ attribute: "flex-direction" })
-], RadioGroup.prototype, "flexDirection", 2);
+  styleExpressionProperty({ selector: ".content" })
+], RadioGroup.prototype, "flex-direction", 2);
 __decorateClass([
   property({ attribute: "supporting-text" })
 ], RadioGroup.prototype, "supportingText", 2);