@redvars/peacock 3.8.0 → 3.8.2

package/dist/{unsafe-html-BsGUjx94.js → unsafe-html-Ct0N2_UU.js}

@@ -1,4 +1,4 @@
-import { A, E } from './IndividualComponent-DUINtMGK.js';
+import { A, E } from './IndividualComponent-Bdwyrvd6.js';
 import { e as e$1, i, t } from './directive-ZPhl09Yt.js';
 
 /**
@@ -8,4 +8,4 @@ import { e as e$1, i, t } from './directive-ZPhl09Yt.js';
  */class e extends i{constructor(i){if(super(i),this.it=A,i.type!==t.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A||null==r)return this._t=void 0,this.it=r;if(r===E)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName="unsafeHTML",e.resultType=1;const o=e$1(e);
 
 export { e, o };
-//# sourceMappingURL=unsafe-html-BsGUjx94.js.map
+//# sourceMappingURL=unsafe-html-Ct0N2_UU.js.map

package/dist/{unsafe-html-BsGUjx94.js.map → unsafe-html-Ct0N2_UU.js.map}

@@ -1 +1 @@
-{"version":3,"file":"unsafe-html-BsGUjx94.js","sources":["../node_modules/lit-html/directives/unsafe-html.js"],"sourcesContent":["import{nothing as t,noChange as i}from\"../lit-html.js\";import{directive as r,Directive as s,PartType as n}from\"../directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class e extends s{constructor(i){if(super(i),this.it=t,i.type!==n.CHILD)throw Error(this.constructor.directiveName+\"() can only be used in child bindings\")}render(r){if(r===t||null==r)return this._t=void 0,this.it=r;if(r===i)return r;if(\"string\"!=typeof r)throw Error(this.constructor.directiveName+\"() called with a non-string value\");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName=\"unsafeHTML\",e.resultType=1;const o=r(e);export{e as UnsafeHTMLDirective,o as unsafeHTML};\n//# sourceMappingURL=unsafe-html.js.map\n"],"names":["s","t","n","i","r"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAG,MAAM,CAAC,SAASA,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAACC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAGC,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uCAAuC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAGD,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAGE,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,mCAAmC,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAM,MAAC,CAAC,CAACC,GAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"unsafe-html-Ct0N2_UU.js","sources":["../node_modules/lit-html/directives/unsafe-html.js"],"sourcesContent":["import{nothing as t,noChange as i}from\"../lit-html.js\";import{directive as r,Directive as s,PartType as n}from\"../directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class e extends s{constructor(i){if(super(i),this.it=t,i.type!==n.CHILD)throw Error(this.constructor.directiveName+\"() can only be used in child bindings\")}render(r){if(r===t||null==r)return this._t=void 0,this.it=r;if(r===i)return r;if(\"string\"!=typeof r)throw Error(this.constructor.directiveName+\"() called with a non-string value\");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName=\"unsafeHTML\",e.resultType=1;const o=r(e);export{e as UnsafeHTMLDirective,o as unsafeHTML};\n//# sourceMappingURL=unsafe-html.js.map\n"],"names":["s","t","n","i","r"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAG,MAAM,CAAC,SAASA,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAACC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAGC,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uCAAuC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAGD,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAGE,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,mCAAmC,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAM,MAAC,CAAC,CAACC,GAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}

package/dist/when-DEJm_QN9.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function n(n,r,t){return n?r(n):t?.(n)}
+
+export { n };
+//# sourceMappingURL=when-DEJm_QN9.js.map

package/dist/when-DEJm_QN9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"when-DEJm_QN9.js","sources":["../node_modules/lit-html/directives/when.js"],"sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nfunction n(n,r,t){return n?r(n):t?.(n)}export{n as when};\n//# sourceMappingURL=when.js.map\n"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;;;;","x_google_ignoreList":[0]}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@redvars/peacock",
   "description": "The foundation for beautiful user interfaces",
   "license": "Apache-2.0",
-  "version": "3.8.0",
+  "version": "3.8.2",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -31,6 +31,7 @@
   "scripts": {
     "analyze": "cem analyze --config \"./custom-elements-manifest.config.mjs\" && node bin/typedoc-gen.mjs",
     "start": "rollup -c && concurrently -k -r \"rollup -c -w\" \"web-dev-server\"",
+    "start:for-docs": "rollup -c -w",
     "build": "npm run build:lit && npm run analyze -- --exclude dist && npm run build:scss",
     "build:lit": "rollup -c",
     "build:scss": "node ./bin/scss-build.mjs",
@@ -126,7 +127,8 @@
         {
           "ignorePackages": true
         }
-      ]
+      ],
+      "class-methods-use-this": "off"
     }
   },
   "prettier": {

package/readme.md

@@ -44,9 +44,9 @@ Visit [https://peacock.redvars.com](https://peacock.redvars.com) to view the doc
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.8.0/dist/assets/styles.css"></link>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.8.2/dist/assets/styles.css"></link>
   <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.8.0/dist/peacock-loader.js'></script>
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.8.2/dist/loader.js'></script>
 </head>
 
 <wc-button>Button</wc-button>
@@ -109,7 +109,7 @@ include notifications, tooltips, and progress bars.
 | Name                                                                          | Component            | State |
 |-------------------------------------------------------------------------------|----------------------|-------|
 | [Badge](https://peacock.redvars.com/components/badge)                         | wc-badge             | 🟢    |
-| [Banner](https://peacock.redvars.com/components/banner)                       | wc-banner            | 🟡    |
+| [Alert](https://peacock.redvars.com/components/alert)                         | wc-alert             | 🟡    |
 | [Circular Progress](https://peacock.redvars.com/components/circular-progress) | wc-circular-progress | 🟢    |
 | [Linear Progress](https://peacock.redvars.com/components/linear-progress)     | wc-linear-progress   | 🟢    |
 | [Notification](https://peacock.redvars.com/components/notification)           | wc-notification      | 🟢    |

package/scss/mixin.scss

@@ -6,6 +6,10 @@
   .screen-reader-only {
     display: none !important;
   }
+
+  [hidden] {
+    display: none !important;
+  }
 }
 
 @mixin reset-button-styles {
@@ -33,7 +37,7 @@
 
 @mixin get-typography($name) {
   font-family: var(--typography-#{$name}-font-family) !important;
-  font-size:  var(--typography-#{$name}-font-size) !important;
+  font-size: var(--typography-#{$name}-font-size) !important;
   font-weight: var(--typography-#{$name}-font-weight) !important;
   line-height: var(--typography-#{$name}-line-height) !important;
   letter-spacing: var(--typography-#{$name}-letter-spacing) !important;
@@ -41,13 +45,13 @@
 
 @mixin get-typography-not-important($name) {
   font-family: var(--typography-#{$name}-font-family);
-  font-size:  var(--typography-#{$name}-font-size);
+  font-size: var(--typography-#{$name}-font-size);
   font-weight: var(--typography-#{$name}-font-weight);
   line-height: var(--typography-#{$name}-line-height);
   letter-spacing: var(--typography-#{$name}-letter-spacing);
 }
 
-@mixin focus-ring($color:var(--color-black)) {
+@mixin focus-ring($color: var(--color-black)) {
   outline: 2px solid $color;
 }
 
@@ -81,13 +85,11 @@
   }
 }
 
-
 // Layers
 @mixin layer-background {
-
 }
 
- // NOTE: `apply-container-shape` and `copy-container-shape` were removed.
+// NOTE: `apply-container-shape` and `copy-container-shape` were removed.
 // These helpers previously copied container-shape custom properties and
 // applied them as physical border radii. They are intentionally deleted
 // because the loader now manages container shape via CSS custom properties

package/src/__internal/aria/aria.ts

@@ -0,0 +1,293 @@
+/**
+ * Accessibility Object Model reflective aria property name types.
+ */
+// eslint-disable-next-line no-undef
+export type ARIAProperty = keyof ARIAMixin;
+
+/**
+ * Accessibility Object Model reflective aria properties.
+ */
+export const ARIA_PROPERTIES: ARIAProperty[] = [
+  'role',
+  'ariaAtomic',
+  'ariaAutoComplete',
+  'ariaBusy',
+  'ariaChecked',
+  'ariaColCount',
+  'ariaColIndex',
+  'ariaColSpan',
+  'ariaCurrent',
+  'ariaDisabled',
+  'ariaExpanded',
+  'ariaHasPopup',
+  'ariaHidden',
+  'ariaInvalid',
+  'ariaKeyShortcuts',
+  'ariaLabel',
+  'ariaLevel',
+  'ariaLive',
+  'ariaModal',
+  'ariaMultiLine',
+  'ariaMultiSelectable',
+  'ariaOrientation',
+  'ariaPlaceholder',
+  'ariaPosInSet',
+  'ariaPressed',
+  'ariaReadOnly',
+  'ariaRequired',
+  'ariaRoleDescription',
+  'ariaRowCount',
+  'ariaRowIndex',
+  'ariaRowSpan',
+  'ariaSelected',
+  'ariaSetSize',
+  'ariaSort',
+  'ariaValueMax',
+  'ariaValueMin',
+  'ariaValueNow',
+  'ariaValueText',
+];
+
+/**
+ * Accessibility Object Model aria attribute name types.
+ */
+// eslint-disable-next-line no-use-before-define
+export type ARIAAttribute = ARIAPropertyToAttribute<ARIAProperty>;
+
+/**
+ * Accessibility Object Model aria attributes.
+ */
+// eslint-disable-next-line no-use-before-define
+export const ARIA_ATTRIBUTES = ARIA_PROPERTIES.map(ariaPropertyToAttribute);
+
+/**
+ * Checks if an attribute is one of the AOM aria attributes.
+ *
+ * @example
+ * isAriaAttribute('aria-label'); // true
+ *
+ * @param attribute The attribute to check.
+ * @return True if the attribute is an aria attribute, or false if not.
+ */
+export function isAriaAttribute(attribute: string): attribute is ARIAAttribute {
+  return ARIA_ATTRIBUTES.includes(attribute as ARIAAttribute);
+}
+
+/**
+ * Converts an AOM aria property into its corresponding attribute.
+ *
+ * @example
+ * ariaPropertyToAttribute('ariaLabel'); // 'aria-label'
+ *
+ * @param property The aria property.
+ * @return The aria attribute.
+ */
+export function ariaPropertyToAttribute<K extends ARIAProperty>(property: K) {
+  return (
+    property
+      .replace('aria', 'aria-')
+      // IDREF attributes also include an "Element" or "Elements" suffix
+      .replace(/Elements?/g, '')
+      // eslint-disable-next-line no-use-before-define
+      .toLowerCase() as ARIAPropertyToAttribute<K>
+  );
+}
+
+// Converts an `ariaFoo` string type to an `aria-foo` string type.
+// eslint-disable-next-line no-unused-vars
+type ARIAPropertyToAttribute<K extends string> =
+  K extends `aria${infer Suffix}Element${infer OptS}` // eslint-disable-line
+    ? `aria-${Lowercase<Suffix>}`
+    : K extends `aria${infer Suffix}`
+      ? `aria-${Lowercase<Suffix>}`
+      : K;
+
+/**
+ * An extension of `ARIAMixin` that enforces strict value types for aria
+ * properties.
+ *
+ * This is needed for correct typing in render functions with lit analyzer.
+ *
+ * @example
+ * render() {
+ *   const {ariaLabel} = this as ARIAMixinStrict;
+ *   return html`
+ *     <button aria-label=${ariaLabel || nothing}>
+ *       <slot></slot>
+ *     </button>
+ *   `;
+ * }
+ */
+// eslint-disable-next-line no-undef
+export interface ARIAMixinStrict extends ARIAMixin {
+  ariaAtomic: 'true' | 'false' | null;
+  ariaAutoComplete: 'none' | 'inline' | 'list' | 'both' | null;
+  ariaBusy: 'true' | 'false' | null;
+  ariaChecked: 'true' | 'false' | null;
+  ariaColCount: `${number}` | null;
+  ariaColIndex: `${number}` | null;
+  ariaColSpan: `${number}` | null;
+  ariaCurrent:
+    | 'page'
+    | 'step'
+    | 'location'
+    | 'date'
+    | 'time'
+    | 'true'
+    | 'false'
+    | null;
+  ariaDisabled: 'true' | 'false' | null;
+  ariaExpanded: 'true' | 'false' | null;
+  ariaHasPopup:
+    | 'false'
+    | 'true'
+    | 'menu'
+    | 'listbox'
+    | 'tree'
+    | 'grid'
+    | 'dialog'
+    | null;
+  ariaHidden: 'true' | 'false' | null;
+  ariaInvalid: 'true' | 'false' | null;
+  ariaKeyShortcuts: string | null;
+  ariaLabel: string | null;
+  ariaLevel: `${number}` | null;
+  ariaLive: 'assertive' | 'off' | 'polite' | null;
+  ariaModal: 'true' | 'false' | null;
+  ariaMultiLine: 'true' | 'false' | null;
+  ariaMultiSelectable: 'true' | 'false' | null;
+  ariaOrientation: 'horizontal' | 'vertical' | 'undefined' | null;
+  ariaPlaceholder: string | null;
+  ariaPosInSet: `${number}` | null;
+  ariaPressed: 'true' | 'false' | null;
+  ariaReadOnly: 'true' | 'false' | null;
+  ariaRequired: 'true' | 'false' | null;
+  ariaRoleDescription: string | null;
+  ariaRowCount: `${number}` | null;
+  ariaRowIndex: `${number}` | null;
+  ariaRowSpan: `${number}` | null;
+  ariaSelected: 'true' | 'false' | null;
+  ariaSetSize: `${number}` | null;
+  ariaSort: 'ascending' | 'descending' | 'none' | 'other' | null;
+  ariaValueMax: `${number}` | null;
+  ariaValueMin: `${number}` | null;
+  ariaValueNow: `${number}` | null;
+  ariaValueText: string | null;
+  // eslint-disable-next-line no-use-before-define
+  role: ARIARole | null;
+}
+
+/**
+ * Valid values for `role`.
+ */
+export type ARIARole =
+  | 'alert'
+  | 'alertdialog'
+  | 'button'
+  | 'checkbox'
+  | 'dialog'
+  | 'gridcell'
+  | 'link'
+  | 'log'
+  | 'marquee'
+  | 'menuitem'
+  | 'menuitemcheckbox'
+  | 'menuitemradio'
+  | 'option'
+  | 'progressbar'
+  | 'radio'
+  | 'scrollbar'
+  | 'searchbox'
+  | 'slider'
+  | 'spinbutton'
+  | 'status'
+  | 'switch'
+  | 'tab'
+  | 'tabpanel'
+  | 'textbox'
+  | 'timer'
+  | 'tooltip'
+  | 'treeitem'
+  | 'combobox'
+  | 'grid'
+  | 'listbox'
+  | 'menu'
+  | 'menubar'
+  | 'radiogroup'
+  | 'tablist'
+  | 'tree'
+  | 'treegrid'
+  | 'application'
+  | 'article'
+  | 'cell'
+  | 'columnheader'
+  | 'definition'
+  | 'directory'
+  | 'document'
+  | 'feed'
+  | 'figure'
+  | 'group'
+  | 'heading'
+  | 'img'
+  | 'list'
+  | 'listitem'
+  | 'math'
+  | 'none'
+  | 'note'
+  | 'presentation'
+  | 'region'
+  | 'row'
+  | 'rowgroup'
+  | 'rowheader'
+  | 'separator'
+  | 'table'
+  | 'term'
+  | 'text'
+  | 'toolbar'
+  | 'banner'
+  | 'complementary'
+  | 'contentinfo'
+  | 'form'
+  | 'main'
+  | 'navigation'
+  | 'region'
+  | 'search'
+  | 'doc-abstract'
+  | 'doc-acknowledgments'
+  | 'doc-afterword'
+  | 'doc-appendix'
+  | 'doc-backlink'
+  | 'doc-biblioentry'
+  | 'doc-bibliography'
+  | 'doc-biblioref'
+  | 'doc-chapter'
+  | 'doc-colophon'
+  | 'doc-conclusion'
+  | 'doc-cover'
+  | 'doc-credit'
+  | 'doc-credits'
+  | 'doc-dedication'
+  | 'doc-endnote'
+  | 'doc-endnotes'
+  | 'doc-epigraph'
+  | 'doc-epilogue'
+  | 'doc-errata'
+  | 'doc-example'
+  | 'doc-footnote'
+  | 'doc-foreword'
+  | 'doc-glossary'
+  | 'doc-glossref'
+  | 'doc-index'
+  | 'doc-introduction'
+  | 'doc-noteref'
+  | 'doc-notice'
+  | 'doc-pagebreak'
+  | 'doc-pagelist'
+  | 'doc-part'
+  | 'doc-preface'
+  | 'doc-prologue'
+  | 'doc-pullquote'
+  | 'doc-qna'
+  | 'doc-subtitle'
+  | 'doc-tip'
+  | 'doc-toc';

package/src/__internal/aria/delegate.ts

@@ -0,0 +1,206 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { LitElement, ReactiveElement, isServer } from 'lit';
+
+import { MixinBase, MixinReturn } from '../mixins/mixin.js';
+import {
+  ARIA_PROPERTIES,
+  ariaPropertyToAttribute,
+  isAriaAttribute,
+} from './aria.js';
+
+// Private symbols
+const privateIgnoreAttributeChangesFor = Symbol(
+  'privateIgnoreAttributeChangesFor',
+);
+
+function ariaAttributeToDataAttribute(ariaAttribute: string) {
+  // aria-haspopup -> data-aria-haspopup
+  return `data-${ariaAttribute}`;
+}
+
+function ariaAttributeToDataProperty(ariaAttribute: string) {
+  // aria-haspopup -> dataset.ariaHaspopup
+  return ariaAttribute.replace(/-\w/, dashLetter =>
+    dashLetter[1].toUpperCase(),
+  );
+}
+
+/**
+ * Overrides the constructor's native `ARIAMixin` properties to ensure that
+ * aria properties reflect the values that were shifted to a data attribute.
+ *
+ * @param ctor The `ReactiveElement` constructor to patch.
+ */
+function setupDelegatesAriaProperties(ctor: typeof ReactiveElement) {
+  for (const ariaProperty of ARIA_PROPERTIES) {
+    // The casing between ariaProperty and the dataProperty may be different.
+    // ex: aria-haspopup -> ariaHasPopup
+    const ariaAttribute = ariaPropertyToAttribute(ariaProperty);
+    // ex: aria-haspopup -> data-aria-haspopup
+    const dataAttribute = ariaAttributeToDataAttribute(ariaAttribute);
+    // ex: aria-haspopup -> dataset.ariaHaspopup
+    const dataProperty = ariaAttributeToDataProperty(ariaAttribute);
+
+    // Call `ReactiveElement.createProperty()` so that the `aria-*` and `data-*`
+    // attributes are added to the `static observedAttributes` array. This
+    // triggers `attributeChangedCallback` for the delegates aria mixin to
+    // handle.
+    ctor.createProperty(ariaProperty, {
+      attribute: ariaAttribute,
+      noAccessor: true,
+    });
+    ctor.createProperty(Symbol(dataAttribute), {
+      attribute: dataAttribute,
+      noAccessor: true,
+    });
+
+    // Re-define the `ARIAMixin` properties to handle data attribute shifting.
+    // It is safe to use `Object.defineProperty` here because the properties
+    // are native and not renamed.
+    // tslint:disable-next-line:ban-unsafe-reflection
+    Object.defineProperty(ctor.prototype, ariaProperty, {
+      configurable: true,
+      enumerable: true,
+      get(this: ReactiveElement): string | null {
+        return this.dataset[dataProperty] ?? null;
+      },
+      set(this: ReactiveElement, value: string | null): void {
+        const prevValue = this.dataset[dataProperty] ?? null;
+        if (value === prevValue) {
+          return;
+        }
+
+        if (value === null) {
+          delete this.dataset[dataProperty];
+        } else {
+          this.dataset[dataProperty] = value;
+        }
+
+        this.requestUpdate(ariaProperty, prevValue);
+      },
+    });
+  }
+}
+
+/**
+ * Mixes in aria delegation for elements that delegate focus and aria to inner
+ * shadow root elements.
+ *
+ * This mixin fixes invalid aria announcements with shadow roots, caused by
+ * duplicate aria attributes on both the host and the inner shadow root element.
+ *
+ * Note: this mixin **does not yet support** ID reference attributes, such as
+ * `aria-labelledby` or `aria-controls`.
+ *
+ * @example
+ * ```ts
+ * class MyButton extends mixinDelegatesAria(LitElement) {
+ *   static shadowRootOptions = {mode: 'open', delegatesFocus: true};
+ *
+ *   render() {
+ *     return html`
+ *       <button aria-label=${this.ariaLabel || nothing}>
+ *         <slot></slot>
+ *       </button>
+ *     `;
+ *   }
+ * }
+ * ```
+ * ```html
+ * <my-button aria-label="Plus one">+1</my-button>
+ * ```
+ *
+ * Use `ARIAMixinStrict` for lit analyzer strict types, such as the "role"
+ * attribute.
+ *
+ * @example
+ * ```ts
+ * return html`
+ *   <button role=${(this as ARIAMixinStrict).role || nothing}>
+ *     <slot></slot>
+ *   </button>
+ * `;
+ * ```
+ *
+ * In the future, updates to the Accessibility Object Model (AOM) will provide
+ * built-in aria delegation features that will replace this mixin.
+ *
+ * @param base The class to mix functionality into.
+ * @return The provided class with aria delegation mixed in.
+ */
+export function mixinDelegatesAria<T extends MixinBase<LitElement>>(
+  base: T,
+): MixinReturn<T> {
+  if (isServer) {
+    // Don't shift attributes when running with lit-ssr. The SSR renderer
+    // implements a subset of DOM APIs, including the methods this mixin
+    // overrides, causing errors. We don't need to shift on the server anyway
+    // since elements will shift attributes immediately once they hydrate.
+    return base;
+  }
+
+  abstract class WithDelegatesAriaElement extends base {
+    [privateIgnoreAttributeChangesFor] = new Set();
+
+    override attributeChangedCallback(
+      name: string,
+      oldValue: string | null,
+      newValue: string | null,
+    ) {
+      if (!isAriaAttribute(name)) {
+        super.attributeChangedCallback(name, oldValue, newValue);
+        return;
+      }
+
+      if (this[privateIgnoreAttributeChangesFor].has(name)) {
+        return;
+      }
+
+      // Don't trigger another `attributeChangedCallback` once we remove the
+      // aria attribute from the host. We check the explicit name of the
+      // attribute to ignore since `attributeChangedCallback` can be called
+      // multiple times out of an expected order when hydrating an element with
+      // multiple attributes.
+      this[privateIgnoreAttributeChangesFor].add(name);
+      this.removeAttribute(name);
+      this[privateIgnoreAttributeChangesFor].delete(name);
+      const dataProperty = ariaAttributeToDataProperty(name);
+      if (newValue === null) {
+        delete this.dataset[dataProperty];
+      } else {
+        this.dataset[dataProperty] = newValue;
+      }
+
+      this.requestUpdate(ariaAttributeToDataProperty(name), oldValue);
+    }
+
+    override getAttribute(name: string) {
+      if (isAriaAttribute(name)) {
+        return super.getAttribute(ariaAttributeToDataAttribute(name));
+      }
+
+      return super.getAttribute(name);
+    }
+
+    override removeAttribute(name: string) {
+      super.removeAttribute(name);
+      if (isAriaAttribute(name)) {
+        super.removeAttribute(ariaAttributeToDataAttribute(name));
+        // Since `aria-*` attributes are already removed`, we need to request
+        // an update because `attributeChangedCallback` will not be called.
+        this.requestUpdate();
+      }
+    }
+  }
+
+  setupDelegatesAriaProperties(
+    WithDelegatesAriaElement as unknown as typeof ReactiveElement,
+  );
+
+  return WithDelegatesAriaElement;
+}