@umbraco-ui/uui-menu-item 1.9.0-rc.1 → 1.10.0-rc.0

package/custom-elements.json

@@ -53,6 +53,12 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "caret-label",
+          "description": "Sets the aria-label for the caret button.",
+          "type": "string",
+          "default": "\"'Reveal the underlying items'\""
+        },
         {
           "name": "select-only",
           "description": "Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.",
@@ -138,6 +144,13 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "caretLabel",
+          "attribute": "caret-label",
+          "description": "Sets the aria-label for the caret button.",
+          "type": "string",
+          "default": "\"'Reveal the underlying items'\""
+        },
         {
           "name": "styles",
           "type": "CSSResult[]",

package/lib/index.js

@@ -32,6 +32,7 @@ let UUIMenuItemElement = class extends SelectOnlyMixin(
     this.showChildren = false;
     this.hasChildren = false;
     this.loading = false;
+    this.caretLabel = "Reveal the underlying items";
     this.iconSlotHasContent = false;
     this._labelButtonChanged = (label) => {
       this.selectableTarget = label || this;
@@ -105,8 +106,13 @@ let UUIMenuItemElement = class extends SelectOnlyMixin(
   render() {
     return html`
       <div id="menu-item" aria-label="menuitem" role="menuitem">
-        ${this.hasChildren ? html`<button id="caret-button" @click=${this._onCaretClicked}>
-              <uui-symbol-expand ?open=${this.showChildren}></uui-symbol-expand>
+        ${this.hasChildren ? html`<button
+              id="caret-button"
+              aria-label=${this.caretLabel}
+              @click=${this._onCaretClicked}>
+              <uui-symbol-expand
+                aria-hidden="true"
+                ?open=${this.showChildren}></uui-symbol-expand>
             </button>` : ""}
         ${this.href ? this._renderLabelAsAnchor() : this._renderLabelAsButton()}
 
@@ -514,6 +520,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "select-mode", reflect: true })
 ], UUIMenuItemElement.prototype, "selectMode", 2);
+__decorateClass([
+  property({ type: String, attribute: "caret-label" })
+], UUIMenuItemElement.prototype, "caretLabel", 2);
 __decorateClass([
   state()
 ], UUIMenuItemElement.prototype, "iconSlotHasContent", 2);

package/lib/uui-menu-item.element.d.ts

@@ -10,12 +10,14 @@ declare const UUIMenuItemElement_base: (new (...args: any[]) => import("@umbraco
  *  @cssprop --uui-menu-item-color-active - text color when active
  *  @cssprop --uui-menu-item-background-color-disabled - background color when disabled
  *  @cssprop --uui-menu-item-color-disabled - text color when disabled
- *   @cssprop --uui-menu-item-background-color-selected - background color when selected
+ *  @cssprop --uui-menu-item-background-color-selected - background color when selected
  *  @cssprop --uui-menu-item-color-selected - text color when selected
  *  @cssprop --uui-menu-item-color-background-selected-hover - text color when selected
  *  @fires {UUIMenuItemEvent} show-children - fires when the expand icon is clicked to show nested menu items
  *  @fires {UUIMenuItemEvent} hide-children - fires when the expend icon is clicked to hide nested menu items
  *  @fires {UUIMenuItemEvent} click-label - fires when the label is clicked
+ *  @fires {UUISelectableEvent} selected - fires when the media card is selected
+ *  @fires {UUISelectableEvent} deselected - fires when the media card is deselected
  *  @slot - nested menu items go here
  *  @slot icon - icon area
  *  @slot actions - actions area
@@ -32,14 +34,14 @@ export declare class UUIMenuItemElement extends UUIMenuItemElement_base {
     /**
      * Controls if nested items should be shown.
      * @type {boolean}
-     * @attr
+     * @attr show-children
      * @default false
      */
     showChildren: boolean;
     /**
      * Shows/hides the caret.
      * @type {boolean}
-     * @attr
+     * @attr has-children
      * @default false
      */
     hasChildren: boolean;
@@ -74,10 +76,17 @@ export declare class UUIMenuItemElement extends UUIMenuItemElement_base {
     /**
      * Sets the selection mode.
      * @type {string}
-     * @attr
+     * @attr select-mode
      * @default undefined
      */
     selectMode?: 'highlight' | 'persisting';
+    /**
+     * Sets the aria-label for the caret button.
+     * @remark Only used when the menu item has children.
+     * @attr caret-label
+     * @default 'Reveal the underlying items'
+     */
+    caretLabel: string;
     private iconSlotHasContent;
     connectedCallback(): void;
     focus(): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-menu-item",
-  "version": "1.9.0-rc.1",
+  "version": "1.10.0-rc.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,9 +30,9 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.9.0-rc.1",
-    "@umbraco-ui/uui-loader-bar": "1.9.0-rc.1",
-    "@umbraco-ui/uui-symbol-expand": "1.9.0-rc.1"
+    "@umbraco-ui/uui-base": "1.10.0-rc.0",
+    "@umbraco-ui/uui-loader-bar": "1.10.0-rc.0",
+    "@umbraco-ui/uui-symbol-expand": "1.10.0-rc.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build && rollup -c rollup.config.js",
@@ -43,5 +43,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-menu-item",
-  "gitHead": "7092b4717d8b9d4825b15e087508b8f75bf81a92"
+  "gitHead": "f7982264bca0f2db4109c638e458f10719b1c22f"
 }