@fluentui/web-components 3.0.0-beta.7 → 3.0.0-beta.71

package/dist/esm/message-bar/message-bar.styles.js

@@ -0,0 +1,108 @@
+import { css } from '@microsoft/fast-element';
+import { borderRadiusMedium, colorNeutralBackground3, colorNeutralForeground3, colorNeutralStroke1, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBorder1, colorPaletteGreenBackground1, colorPaletteGreenBorder1, colorPaletteRedBackground1, colorPaletteRedBorder1, fontFamilyBase, fontSizeBase200, lineHeightBase200, spacingHorizontalM, spacingHorizontalS, spacingVerticalMNudge, spacingVerticalS, } from '../theme/design-tokens.js';
+import { errorState, multiLineState, squareState, successState, warningState } from '../styles/states/index.js';
+/**
+ * Styles for the MessageBar component.
+ *
+ * @public
+ */
+export const styles = css `
+  :host {
+    display: grid;
+    box-sizing: border-box;
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase200};
+    line-height: ${lineHeightBase200};
+    width: 100%;
+    background: ${colorNeutralBackground3};
+    border: 1px solid ${colorNeutralStroke1};
+    padding-inline: ${spacingHorizontalM};
+    border-radius: ${borderRadiusMedium};
+    min-height: 36px;
+    align-items: center;
+    grid-template: 'icon body actions dismiss' / auto 1fr auto auto;
+    contain: layout style paint;
+  }
+
+  :host(${squareState}) {
+    border-radius: 0;
+  }
+
+  :host(${successState}) {
+    background-color: ${colorPaletteGreenBackground1};
+    border-color: ${colorPaletteGreenBorder1};
+  }
+
+  :host(${warningState}) {
+    background-color: ${colorPaletteDarkOrangeBackground1};
+    border-color: ${colorPaletteDarkOrangeBorder1};
+  }
+
+  :host(${errorState}) {
+    background-color: ${colorPaletteRedBackground1};
+    border-color: ${colorPaletteRedBorder1};
+  }
+
+  :host(${multiLineState}) {
+    grid-template-areas:
+      'icon body dismiss'
+      'actions actions actions';
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto 1fr;
+    padding-block: ${spacingVerticalMNudge};
+    padding-inline: ${spacingHorizontalM};
+  }
+
+  .content {
+    grid-area: body;
+    max-width: 520px;
+    padding-block: ${spacingVerticalMNudge};
+    padding-inline: 0;
+  }
+
+  :host(${multiLineState}) .content {
+    padding: 0;
+  }
+
+  ::slotted([slot='icon']) {
+    display: flex;
+    grid-area: icon;
+    flex-direction: column;
+    align-items: center;
+    color: ${colorNeutralForeground3};
+    margin-inline-end: ${spacingHorizontalS};
+  }
+
+  :host(${multiLineState}) ::slotted([slot='icon']) {
+    align-items: start;
+    height: 100%;
+  }
+
+  ::slotted([slot='dismiss']) {
+    grid-area: dismiss;
+  }
+
+  .actions {
+    grid-area: actions;
+    display: flex;
+    justify-self: end;
+    margin-inline-end: ${spacingHorizontalS};
+    gap: ${spacingHorizontalS};
+  }
+
+  :host(${multiLineState}) .actions {
+    margin-block-start: ${spacingVerticalMNudge};
+    margin-inline-end: 0;
+  }
+
+  :host(${multiLineState}) ::slotted([slot='dismiss']) {
+    align-items: start;
+    height: 100%;
+    padding-block-start: ${spacingVerticalS};
+  }
+
+  ::slotted(*) {
+    font-size: inherit;
+  }
+`;
+//# sourceMappingURL=message-bar.styles.js.map

package/dist/esm/message-bar/message-bar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-bar.styles.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,iCAAiC,EACjC,6BAA6B,EAC7B,4BAA4B,EAC5B,wBAAwB,EACxB,0BAA0B,EAC1B,sBAAsB,EACtB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEhH;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;;;;mBAIrB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;kBAElB,uBAAuB;wBACjB,mBAAmB;sBACrB,kBAAkB;qBACnB,kBAAkB;;;;;;;UAO7B,WAAW;;;;UAIX,YAAY;wBACE,4BAA4B;oBAChC,wBAAwB;;;UAGlC,YAAY;wBACE,iCAAiC;oBACrC,6BAA6B;;;UAGvC,UAAU;wBACI,0BAA0B;oBAC9B,sBAAsB;;;UAGhC,cAAc;;;;;;qBAMH,qBAAqB;sBACpB,kBAAkB;;;;;;qBAMnB,qBAAqB;;;;UAIhC,cAAc;;;;;;;;;aASX,uBAAuB;yBACX,kBAAkB;;;UAGjC,cAAc;;;;;;;;;;;;;yBAaC,kBAAkB;WAChC,kBAAkB;;;UAGnB,cAAc;0BACE,qBAAqB;;;;UAIrC,cAAc;;;2BAGG,gBAAgB;;;;;;CAM1C,CAAC"}

package/dist/esm/message-bar/message-bar.template.js

@@ -0,0 +1,25 @@
+import { html } from '@microsoft/fast-element';
+/**
+ * Generates a template for the MessageBar component.
+ * @public
+ * @param {MessageBar} T - The type of the MessageBar.
+ * @returns {ElementViewTemplate<T>} - The template for the MessageBar component.
+ */
+export function messageBarTemplate() {
+    return html `
+    <slot name="icon"></slot>
+    <div class="content">
+      <slot></slot>
+    </div>
+    <div class="actions">
+      <slot name="actions"></slot>
+    </div>
+    <slot name="dismiss"></slot>
+  `;
+}
+/**
+ * The template for the MessageBar component.
+ * @type {ElementViewTemplate<MessageBar>}
+ */
+export const template = messageBarTemplate();
+//# sourceMappingURL=message-bar.template.js.map

package/dist/esm/message-bar/message-bar.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-bar.template.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpE;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB;IAChC,OAAO,IAAI,CAAG;;;;;;;;;GASb,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAoC,kBAAkB,EAAE,CAAC"}

package/dist/esm/patterns/aria-globals.js

@@ -0,0 +1,72 @@
+//Copied from @microsoft/fast-foundation
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+/**
+ * Some states and properties are applicable to all host language elements regardless of whether a role is applied.
+ * The following global states and properties are supported by all roles and by all base markup elements.
+ * {@link https://www.w3.org/TR/wai-aria-1.1/#global_states}
+ *
+ * This is intended to be used as a mixin. Be sure you extend FASTElement.
+ *
+ * @public
+ */
+export class ARIAGlobalStatesAndProperties {
+}
+__decorate([
+    attr({ attribute: 'aria-atomic' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", void 0);
+__decorate([
+    attr({ attribute: 'aria-busy' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", void 0);
+__decorate([
+    attr({ attribute: 'aria-controls' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaControls", void 0);
+__decorate([
+    attr({ attribute: 'aria-current' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", void 0);
+__decorate([
+    attr({ attribute: 'aria-describedby' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", void 0);
+__decorate([
+    attr({ attribute: 'aria-details' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", void 0);
+__decorate([
+    attr({ attribute: 'aria-disabled' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", void 0);
+__decorate([
+    attr({ attribute: 'aria-errormessage' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", void 0);
+__decorate([
+    attr({ attribute: 'aria-flowto' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", void 0);
+__decorate([
+    attr({ attribute: 'aria-haspopup' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", void 0);
+__decorate([
+    attr({ attribute: 'aria-hidden' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", void 0);
+__decorate([
+    attr({ attribute: 'aria-invalid' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", void 0);
+__decorate([
+    attr({ attribute: 'aria-keyshortcuts' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", void 0);
+__decorate([
+    attr({ attribute: 'aria-label' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", void 0);
+__decorate([
+    attr({ attribute: 'aria-labelledby' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", void 0);
+__decorate([
+    attr({ attribute: 'aria-live' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLive", void 0);
+__decorate([
+    attr({ attribute: 'aria-owns' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", void 0);
+__decorate([
+    attr({ attribute: 'aria-relevant' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", void 0);
+__decorate([
+    attr({ attribute: 'aria-roledescription' })
+], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", void 0);
+//# sourceMappingURL=aria-globals.js.map

package/dist/esm/patterns/aria-globals.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aria-globals.js","sourceRoot":"","sources":["../../../src/patterns/aria-globals.ts"],"names":[],"mappings":"AAAA,wCAAwC;;AAExC,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C;;;;;;;;GAQG;AACH,MAAM,OAAO,6BAA6B;CAwNzC;AA7MQ;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;iEACkB;AAY9C;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;+DACkB;AAW5C;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;mEACD;AAW7B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;kEACmE;AAWhG;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;sEACD;AAWhC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;kEACD;AAW5B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;mEACkB;AAWhD;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;uEACD;AAYjC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;iEACD;AAY3B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;mEACoE;AAWlG;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;iEACkB;AAW9C;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;kEAC2C;AAWxE;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;uEACD;AAWjC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;gEACD;AAW1B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;qEACD;AAY/B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;+DACgC;AAa1D;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;+DACD;AAWzB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;mEAC8D;AAW5F;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC;0EACD"}

package/dist/esm/patterns/index.js

@@ -0,0 +1,3 @@
+export * from './aria-globals.js';
+export * from './start-end.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/patterns/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/patterns/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC"}

package/dist/esm/patterns/start-end.js

@@ -0,0 +1,29 @@
+//Copied from @microsoft/fast-foundation
+import { html, ref } from '@microsoft/fast-element';
+import { staticallyCompose } from '../utils/index.js';
+/**
+ * A mixin class implementing start and end slots.
+ * These are generally used to decorate text elements with icons or other visual indicators.
+ * @public
+ */
+export class StartEnd {
+}
+/**
+ * The template for the end slot.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ */
+export function endSlotTemplate(options) {
+    return html ` <slot name="end" ${ref('end')}>${staticallyCompose(options.end)}</slot> `.inline();
+}
+/**
+ * The template for the start slots.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ */
+export function startSlotTemplate(options) {
+    return html ` <slot name="start" ${ref('start')}>${staticallyCompose(options.start)}</slot> `.inline();
+}
+//# sourceMappingURL=start-end.js.map

package/dist/esm/patterns/start-end.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"start-end.js","sourceRoot":"","sources":["../../../src/patterns/start-end.ts"],"names":[],"mappings":"AAAA,wCAAwC;AAExC,OAAO,EAAe,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAyBtD;;;;GAIG;AACH,MAAM,OAAO,QAAQ;CAGpB;AAED;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAC7B,OAAqC;IAErC,OAAO,IAAI,CAAA,qBAAqB,GAAG,CAAC,KAAK,CAAC,IAAI,iBAAiB,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;AAClG,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAC/B,OAAuC;IAEvC,OAAO,IAAI,CAAA,uBAAuB,GAAG,CAAC,OAAO,CAAC,IAAI,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;AACxG,CAAC"}

package/dist/esm/progress-bar/index.js

@@ -1,6 +1,6 @@
-export * from './progress-bar.js';
-export * from './progress-bar.options.js';
 export { definition as ProgressBarDefinition } from './progress-bar.definition.js';
+export { BaseProgressBar, ProgressBar } from './progress-bar.js';
+export { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
 export { styles as ProgressBarStyles } from './progress-bar.styles.js';
 export { template as ProgressBarTemplate } from './progress-bar.template.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/progress-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress-bar/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,UAAU,IAAI,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACnF,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,QAAQ,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACnF,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAC/G,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,QAAQ,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/esm/progress-bar/progress-bar.bench.js

@@ -0,0 +1,10 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './progress-bar.definition.js';
+definition.define(FluentDesignSystem.registry);
+const itemRenderer = () => {
+    const progressBar = document.createElement('fluent-progress-bar');
+    return progressBar;
+};
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';
+//# sourceMappingURL=progress-bar.bench.js.map

package/dist/esm/progress-bar/progress-bar.bench.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.bench.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAE1D,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAClE,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/progress-bar/progress-bar.js

@@ -1,25 +1,129 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { attr } from '@microsoft/fast-element';
-import { FASTProgress } from '@microsoft/fast-foundation/progress.js';
+import { __decorate } from "tslib";
+import { attr, FASTElement, nullableNumberConverter, volatile } from '@microsoft/fast-element';
+import { toggleState } from '../utils/element-internals.js';
 /**
- * The base class used for constructing a fluent-progress-bar custom element
+ * A Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ *
  * @public
  */
-export class ProgressBar extends FASTProgress {
+export class BaseProgressBar extends FASTElement {
+    /**
+     * Handles changes to validation-state attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    validationStateChanged(prev, next) {
+        if (prev) {
+            toggleState(this.elementInternals, `${prev}`, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, `${next}`, true);
+        }
+    }
+    /**
+     * Updates the percent complete when the `value` property changes.
+     *
+     * @internal
+     */
+    valueChanged(prev, next) {
+        this.elementInternals.ariaValueNow = typeof next === 'number' ? `${next}` : null;
+    }
+    /**
+     * Updates the percent complete when the `min` property changes.
+     *
+     * @param prev - The previous min value
+     * @param next - The current min value
+     */
+    minChanged(prev, next) {
+        this.elementInternals.ariaValueMin = typeof next === 'number' ? `${next}` : null;
+    }
+    /**
+     * Updates the percent complete when the `max` property changes.
+     *
+     * @param prev - The previous max value
+     * @param next - The current max value
+     * @internal
+     */
+    maxChanged(prev, next) {
+        this.elementInternals.ariaValueMax = typeof next === 'number' ? `${next}` : null;
+    }
+    /**
+     * Indicates progress in %
+     * @internal
+     */
+    get percentComplete() {
+        var _a, _b, _c;
+        const min = (_a = this.min) !== null && _a !== void 0 ? _a : 0;
+        const max = (_b = this.max) !== null && _b !== void 0 ? _b : 100;
+        const value = (_c = this.value) !== null && _c !== void 0 ? _c : 0;
+        const range = max - min;
+        return range === 0 ? 0 : Math.fround(((value - min) / range) * 100);
+    }
     constructor() {
-        super(...arguments);
+        super();
+        /**
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
+         * @internal
+         */
+        this.elementInternals = this.attachInternals();
         /**
          * The validation state of the progress bar
          * @public
-         * @remarks
-         * HTML Attribute: validation-state
+         * HTML Attribute: `validation-state`
          */
         this.validationState = null;
+        this.elementInternals.role = 'progressbar';
+    }
+}
+__decorate([
+    attr({ attribute: 'validation-state' })
+], BaseProgressBar.prototype, "validationState", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseProgressBar.prototype, "value", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseProgressBar.prototype, "min", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseProgressBar.prototype, "max", void 0);
+__decorate([
+    volatile
+], BaseProgressBar.prototype, "percentComplete", null);
+/**
+ * A Progress HTML Element.
+ * Based on BaseProgressBar and includes style and layout specific attributes
+ *
+ * @public
+ */
+export class ProgressBar extends BaseProgressBar {
+    /**
+     * Handles changes to thickness attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    thicknessChanged(prev, next) {
+        if (prev) {
+            toggleState(this.elementInternals, `${prev}`, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, `${next}`, true);
+        }
+    }
+    /**
+     * Handles changes to shape attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    shapeChanged(prev, next) {
+        if (prev) {
+            toggleState(this.elementInternals, `${prev}`, false);
+        }
+        if (next) {
+            toggleState(this.elementInternals, `${next}`, true);
+        }
     }
 }
 __decorate([
@@ -28,7 +132,4 @@ __decorate([
 __decorate([
     attr
 ], ProgressBar.prototype, "shape", void 0);
-__decorate([
-    attr({ attribute: 'validation-state' })
-], ProgressBar.prototype, "validationState", void 0);
 //# sourceMappingURL=progress-bar.js.map

package/dist/esm/progress-bar/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAGtE;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,YAAY;IAA7C;;QAoBE;;;;;WAKG;QAEI,oBAAe,GAAsC,IAAI,CAAC;IACnE,CAAC;CAAA;AAnBC;IADC,IAAI;8CACmC;AASxC;IADC,IAAI;0CAC2B;AAShC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;oDACyB"}
+{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.ts"],"names":[],"mappings":"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"}

package/dist/esm/progress-bar/progress-bar.options.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.options.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACxC,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;CACN,CAAC"}
+{"version":3,"file":"progress-bar.options.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.options.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACxC,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;CACN,CAAC"}