@api-client/ui 0.5.47 → 0.5.49

package/src/md/focus-ring/ui-focus-ring.ts

@@ -0,0 +1,46 @@
+import type { CSSResultOrNative } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/focus-ring.js'
+import styles from './internals/focus-ring.styles.js'
+
+/**
+ * A focus ring component that provides a visible focus indicator.
+ *
+ * This component replaces the Material Design `md-focus-ring` component
+ * and provides the same functionality with customizable styling.
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <ui-focus-ring></ui-focus-ring>
+ *
+ * <!-- With specific control -->
+ * <ui-focus-ring .control="${buttonElement}"></ui-focus-ring>
+ *
+ * <!-- Using for attribute -->
+ * <ui-focus-ring for="my-button"></ui-focus-ring>
+ *
+ * <!-- Inward focus ring -->
+ * <ui-focus-ring inward></ui-focus-ring>
+ * ```
+ *
+ * @cssprop --ui-focus-ring-color - The color of the focus ring border.
+ * @cssprop --ui-focus-ring-width - The width of the focus ring border.
+ * @cssprop --ui-focus-ring-style - The style of the focus ring border (solid, dashed, etc.).
+ * @cssprop --ui-focus-ring-shape-start-start - The start-start corner radius.
+ * @cssprop --ui-focus-ring-shape-start-end - The start-end corner radius.
+ * @cssprop --ui-focus-ring-shape-end-end - The end-end corner radius.
+ * @cssprop --ui-focus-ring-shape-end-start - The end-start corner radius.
+ *
+ * @csspart focus-ring - The focus ring element.
+ */
+@customElement('ui-focus-ring')
+export class UiFocusRingElement extends Element {
+  static override styles: CSSResultOrNative[] = [styles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ui-focus-ring': Element
+  }
+}

package/src/md/list/internals/ListItem.ts

@@ -6,7 +6,7 @@ import { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionCon
 import UiRipple from '../../ripple/internals/ripple.js'
 import { setDisabled } from '../../../lib/disabled.js'
 
-import '@material/web/focus/md-focus-ring.js'
+import '../../focus-ring/ui-focus-ring.js'
 import '../../ripple/ui-ripple.js'
 
 export enum ListItemLines {
@@ -57,7 +57,7 @@ export default class UiListItem extends UiElement {
   }
 
   /**
-   * Whether the chip is disabled. The user can't interact with the chip when `true`.
+   * Whether the list item is disabled. The user can't interact with the list item when `true`.
    * @attribute
    */
   @property({ type: Boolean, reflect: true }) accessor disabled = false
@@ -261,17 +261,17 @@ export default class UiListItem extends UiElement {
     `
   }
 
-  protected renderRipple = (): TemplateResult => {
+  protected renderRipple(): TemplateResult {
     return html`<ui-ripple class="ripple" ?disabled="${this.disabled || this.static}"></ui-ripple>`
   }
 
   protected renderFocusRing(): TemplateResult {
-    return html`<md-focus-ring
+    return html`<ui-focus-ring
       part="focus-ring"
       class="focus-ring"
       .control="${this as HTMLElement}"
       inward
-    ></md-focus-ring>`
+    ></ui-focus-ring>`
   }
 
   protected getStartClasses(): ClassInfo {

package/src/md/menu/internal/MenuItem.ts

@@ -6,8 +6,6 @@ import UiSubMenu from './SubMenu.js'
 import { findElementInShadowRoots } from '../../../lib/Dom.js'
 import { nanoid } from 'nanoid'
 
-import '@material/web/focus/md-focus-ring.js'
-import '../../ripple/ui-ripple.js'
 import '../../icons/ui-icon.js'
 
 /**

package/src/md/radio/internals/Radio.styles.ts

@@ -5,12 +5,12 @@ export default css`
     display: inline-flex;
     align-items: center;
     vertical-align: middle;
-    /* outline: none; */
     min-width: 48px;
     height: 48px;
     cursor: pointer;
     position: relative;
     -webkit-tap-highlight-color: transparent;
+    outline: none;
     --md-ripple-hover-state-layer-color: var(--md-sys-color-on-surface);
     --md-ripple-focus-state-layer-color: var(--md-sys-color-on-surface);
     --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);

package/src/md/radio/internals/RadioElement.ts

@@ -8,6 +8,7 @@ import { ripple } from '../../effects/rippleDirective.js'
 import UiRipple from '../../ripple/internals/ripple.js'
 import { EndPressConfig } from '../../../controllers/ActionController.js'
 import '../../ripple/ui-ripple.js'
+import '../../focus-ring/ui-focus-ring.js'
 
 /**
  * A form-associated radio button.
@@ -110,6 +111,7 @@ export default class RadioElement extends CheckedElement {
       pressed,
     })
     return html`
+      <ui-focus-ring part="focus-ring" .control="${this as HTMLElement}"></ui-focus-ring>
       <div class="${surfaceClasses}" ${ripple(this.getRipple)}>
         <div class="container"></div>
         <div class="state"></div>

package/src/md/select/internals/Select.ts

@@ -10,7 +10,7 @@ import { nanoid } from 'nanoid'
 import '../../text-field/ui-outlined-text-field.js'
 import '../../menu/ui-menu.js'
 import '../../icons/ui-icon.js'
-import '@material/web/focus/md-focus-ring.js'
+import '../../focus-ring/ui-focus-ring.js'
 
 export interface UiSelectChangeEvent {
   value: string | undefined
@@ -576,7 +576,7 @@ export default class UiSelect extends LitElement {
   }
 
   protected renderFocusRing(): TemplateResult {
-    return html`<md-focus-ring part="focus-ring" class="focus-ring" .control="${this as HTMLElement}"></md-focus-ring>`
+    return html`<ui-focus-ring part="focus-ring" class="focus-ring" .control="${this as HTMLElement}"></ui-focus-ring>`
   }
 
   override render(): TemplateResult {

package/src/md/tabs/internals/Tab.ts

@@ -7,7 +7,9 @@ import { isDisabled, setDisabled } from '../../../lib/disabled.js'
 import { UiElement } from '../../UiElement.js'
 import type { SizingInfo, TabsPriority } from './Tabs.js'
 import { Easing } from '../../motion/animation.js'
+
 import '../../ripple/ui-ripple.js'
+import '../../focus-ring/ui-focus-ring.js'
 
 export default class UiTab extends UiElement {
   get disabled(): boolean {
@@ -229,12 +231,12 @@ export default class UiTab extends UiElement {
   }
 
   protected renderFocusRing(): TemplateResult {
-    return html`<md-focus-ring
+    return html`<ui-focus-ring
       part="focus-ring"
       class="focus-ring"
       inward
       .control="${this as HTMLElement}"
-    ></md-focus-ring>`
+    ></ui-focus-ring>`
   }
 
   protected renderRipple(): TemplateResult {

package/src/md/tabs/internals/Tabs.ts

@@ -85,10 +85,10 @@ export default class UiTabs extends LitElement {
       //
       // ```ts
       // html`
-      //   <md-tabs .activeTabIndex=${1}>
-      //     <md-tab>First</md-tab>
-      //     <md-tab>Second</md-tab>
-      //   </md-tabs>
+      //   <ui-tabs .activeTabIndex=${1}>
+      //     <ui-tab>First</ui-tab>
+      //     <ui-tab>Second</ui-tab>
+      //   </ui-tabs>
       // `;
       // ```
       //