@umbraco-ui/uui-ref-node 1.16.0-rc.0 → 1.17.0-rc.0

package/lib/index.js

@@ -3,7 +3,7 @@ import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { UUIRefElement } from '@umbraco-ui/uui-ref/lib';
 import { css, html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -46,6 +46,10 @@ let UUIRefNodeElement = class extends UUIRefElement {
     super.connectedCallback();
     demandCustomElement(this, "uui-icon");
   }
+  async focus() {
+    await this.updateComplete;
+    this._openPart?.focus();
+  }
   renderDetail() {
     return html`<small id="detail"
       >${this.detail}<slot name="detail"></slot
@@ -128,12 +132,17 @@ UUIRefNodeElement.styles = [
         padding: 1px;
       }
 
+      #actions-container {
+        --uui-focus-outline-color: var(--uui-color-focus,#3879ff);
+      }
+
       #content {
         display: flex;
         flex-grow: 1;
         align-items: center;
         line-height: 1.2em;
         padding: calc(var(--uui-size-3,9px));
+        width: calc(100% - 2 * var(--uui-size-3,9px));
       }
 
       #open-part {
@@ -142,6 +151,8 @@ UUIRefNodeElement.styles = [
         cursor: pointer;
         display: flex;
         flex-grow: 1;
+        width: calc(100%);
+        margin: 0 0 1px 0;
       }
 
       #icon {
@@ -159,12 +170,17 @@ UUIRefNodeElement.styles = [
         justify-content: center;
         height: 100%;
         padding-left: var(--uui-size-2,6px);
+        max-width: calc(100% - 2 * var(--uui-size-3,9px) - var(--uui-size-2,6px));
         margin-top: 1px;
       }
 
       #detail {
         opacity: 0.6;
         line-height: 1.2em;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        max-width: calc(100%);
       }
 
       :host([selectable]) #open-part {
@@ -214,6 +230,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], UUIRefNodeElement.prototype, "rel", 2);
+__decorateClass([
+  query("#open-part")
+], UUIRefNodeElement.prototype, "_openPart", 2);
 __decorateClass([
   state()
 ], UUIRefNodeElement.prototype, "_iconSlotHasContent", 2);

package/lib/uui-ref-node.element.d.ts

@@ -47,11 +47,13 @@ export declare class UUIRefNodeElement extends UUIRefElement {
      * @default undefined
      */
     rel?: string;
+    protected _openPart?: HTMLInputElement;
     private _iconSlotHasContent;
     protected fallbackIcon: string;
     connectedCallback(): void;
-    protected renderDetail(): import("lit-html").TemplateResult<1>;
-    render(): import("lit-html").TemplateResult<1>;
+    focus(): Promise<void>;
+    protected renderDetail(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }
 declare global {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-ref-node",
-  "version": "1.16.0-rc.0",
+  "version": "1.17.0-rc.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,9 +30,9 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.16.0-rc.0",
-    "@umbraco-ui/uui-icon": "1.16.0-rc.0",
-    "@umbraco-ui/uui-ref": "1.16.0-rc.0"
+    "@umbraco-ui/uui-base": "1.17.0-rc.0",
+    "@umbraco-ui/uui-icon": "1.17.0-rc.0",
+    "@umbraco-ui/uui-ref": "1.17.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-ref-node",
-  "gitHead": "7bf1acd40b60feb81d82067ba2342d2b3e33c057"
+  "gitHead": "028e20bd07ebf02164589b086e746c9cc587409c"
 }