::part syling for a11y-menu-button

haxtheweb · May 6, 2021 · 65bd03f · 65bd03f
1 parent 6825232
commit 65bd03f
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 7 deletions.
diff --git a/elements/a11y-menu-button/a11y-menu-button.js b/elements/a11y-menu-button/a11y-menu-button.js
@@ -19,7 +19,7 @@ const A11yMenuButtonBehaviors = function (SuperClass) {
         css`
           :host {
             padding: 0;
-            display: inline-block;
+            display: inline-flex;
             position: relative;
             z-index: 1;
           }
@@ -267,6 +267,7 @@ const A11yMenuButtonBehaviors = function (SuperClass) {
           aria-haspopup="true"
           aria-controls="menu"
           aria-expanded="${this.expanded ? "true" : "false"}"
+          part="button"
         >
           <slot name="button"></slot>
         </button>

diff --git a/elements/a11y-menu-button/lib/a11y-menu-button-item.js b/elements/a11y-menu-button/lib/a11y-menu-button-item.js
@@ -149,7 +149,12 @@ const A11yMenuButtonItemBehaviors = function (SuperClass) {
      */
     get linkTemplate() {
       return html` <li role="none">
-        <a role="menuitem" href="${this.href}" ?disabled="${this.disabled}">
+        <a
+          role="menuitem"
+          href="${this.href}"
+          ?disabled="${this.disabled}"
+          part="button"
+        >
           <slot></slot>
         </a>
       </li>`;
@@ -166,6 +171,7 @@ const A11yMenuButtonItemBehaviors = function (SuperClass) {
             role="menuitem"
             controls="${this.controls}"
             ?disabled="${this.disabled}"
+            part="button"
           >
             <slot></slot>
           </button>

diff --git a/elements/a11y-menu-button/lib/dist/a11y-menu-button-item.dev.js b/elements/a11y-menu-button/lib/dist/a11y-menu-button-item.dev.js
@@ -29,7 +29,7 @@ function _templateObject3() {
   var data = _taggedTemplateLiteral([
     '\n        <li role="none">\n          <button\n            role="menuitem"\n            controls="',
     '"\n            ?disabled="',
-    '"\n          >\n            <slot></slot>\n          </button>\n        </li>\n      ',
+    '"\n            part="button"\n          >\n            <slot></slot>\n          </button>\n        </li>\n      ',
   ]);
 
   _templateObject3 = function _templateObject3() {
@@ -43,7 +43,7 @@ function _templateObject2() {
   var data = _taggedTemplateLiteral([
     ' <li role="none">\n        <a role="menuitem" href="',
     '" ?disabled="',
-    '">\n          <slot></slot>\n        </a>\n      </li>',
+    '"\n            part="button">\n          <slot></slot>\n        </a>\n      </li>',
   ]);
 
   _templateObject2 = function _templateObject2() {

diff --git a/elements/a11y-menu-button/src/a11y-menu-button.js b/elements/a11y-menu-button/src/a11y-menu-button.js
@@ -19,7 +19,7 @@ const A11yMenuButtonBehaviors = function (SuperClass) {
         css`
           :host {
             padding: 0;
-            display: inline-block;
+            display: inline-flex;
             position: relative;
             z-index: 1;
           }
@@ -267,6 +267,7 @@ const A11yMenuButtonBehaviors = function (SuperClass) {
           aria-haspopup="true"
           aria-controls="menu"
           aria-expanded="${this.expanded ? "true" : "false"}"
+          part="button"
         >
           <slot name="button"></slot>
         </button>

diff --git a/elements/a11y-menu-button/src/dist/a11y-menu-button.dev.js b/elements/a11y-menu-button/src/dist/a11y-menu-button.dev.js
@@ -42,7 +42,7 @@ function _templateObject6() {
 function _templateObject5() {
   var data = _taggedTemplateLiteral([
     '\n        <button\n          id="menubutton"\n          aria-haspopup="true"\n          aria-controls="menu"\n          aria-expanded="',
-    '"\n        >\n          <slot name="button"></slot>\n        </button>\n      ',
+    '"\n          part="button"\n        >\n          <slot name="button"></slot>\n        </button>\n      ',
   ]);
 
   _templateObject5 = function _templateObject5() {
@@ -113,7 +113,7 @@ function _templateObject3() {
 
 function _templateObject2() {
   var data = _taggedTemplateLiteral([
-    '\n          :host {\n            padding: 0;\n            display: inline-block;\n            position: relative;\n            z-index: 1;\n          }\n          :host([expanded]) {\n            z-index: var(--a11y-menu-button-focus-z-index, 1000);\n          }\n          button[part="button"] {\n            display: block;\n            text-decoration: inherit;\n            font-family: inherit;\n            font-size: inherit;\n            margin: 0;\n            width: 100%;\n          }\n          absolute-position-behavior {\n            z-index: -1;\n            overflow: hidden;\n          }\n          :host([expanded]) absolute-position-behavior {\n            z-index: var(--a11y-menu-button-focus-z-index, 1000);\n          }\n          :host(:not([expanded])) absolute-position-behavior {\n            border-color: none !important;\n          }\n          ul {\n            margin: 0;\n            padding: 0;\n            list-style: none;\n          }\n        ',
+    '\n          :host {\n            padding: 0;\n            display: inline-flex;\n            position: relative;\n            z-index: 1;\n          }\n          :host([expanded]) {\n            z-index: var(--a11y-menu-button-focus-z-index, 1000);\n          }\n          button[part="button"] {\n            display: block;\n            text-decoration: inherit;\n            font-family: inherit;\n            font-size: inherit;\n            margin: 0;\n            width: 100%;\n          }\n          absolute-position-behavior {\n            z-index: -1;\n            overflow: hidden;\n          }\n          :host([expanded]) absolute-position-behavior {\n            z-index: var(--a11y-menu-button-focus-z-index, 1000);\n          }\n          :host(:not([expanded])) absolute-position-behavior {\n            border-color: none !important;\n          }\n          ul {\n            margin: 0;\n            padding: 0;\n            list-style: none;\n          }\n        ',
   ]);
 
   _templateObject2 = function _templateObject2() {