vira 31.1.2 → 31.2.0

package/dist/elements/pop-up/vira-menu-trigger.element.d.ts

@@ -23,6 +23,18 @@ export declare const ViraMenuTrigger: import("element-vir").DeclarativeElementDe
     popUpOffset: PopUpOffset;
     keepOpenAfterInteraction: boolean;
     menuCornerStyle: ViraMenuCornerStyle;
+    /**
+     * If true, the focus outline is moved inside the element.
+     *
+     * @default false
+     */
+    useInsideFocus: boolean;
+    /**
+     * When `true`, the trigger will focus itself when the pop-up closes.
+     *
+     * @default false
+     */
+    focusOnClose: boolean;
 } & PopUpTriggerPosition>, {
     navController: undefined | NavController;
     popUpManager: undefined | PopUpManager;

package/dist/elements/pop-up/vira-pop-up-trigger.element.d.ts

@@ -87,6 +87,10 @@ export declare const ViraPopUpTrigger: import("element-vir").DeclarativeElementD
     keepOpenAfterInteraction: boolean;
     /** All values in px. */
     popUpOffset: PopUpOffset;
+    /** If true, the focus outline is moved inside the element. */
+    useInsideFocus: boolean;
+    /** When `true`, the trigger will focus itself when the pop-up closes. */
+    focusOnClose: boolean;
 }>, {
     /** `undefined` means the pop up is not currently showing. */
     showPopUpResult: ShowPopUpResult | undefined;
@@ -102,4 +106,4 @@ export declare const ViraPopUpTrigger: import("element-vir").DeclarativeElementD
         navController: NavController;
         popUpManager: PopUpManager;
     }>;
-}, "vira-pop-up-trigger-disabled", "vira-pop-up-trigger-", readonly ["trigger", "popUp"], readonly []>;
+}, "vira-pop-up-trigger-disabled" | "vira-pop-up-trigger-inside-focus" | "vira-pop-up-trigger-outside-focus", "vira-pop-up-trigger-", readonly ["trigger", "popUp"], readonly []>;

package/dist/elements/pop-up/vira-pop-up-trigger.element.js

@@ -58,6 +58,8 @@ export const ViraPopUpTrigger = defineViraElement()({
     ],
     hostClasses: {
         'vira-pop-up-trigger-disabled': ({ inputs }) => !!inputs.isDisabled,
+        'vira-pop-up-trigger-inside-focus': ({ inputs }) => !!inputs.useInsideFocus,
+        'vira-pop-up-trigger-outside-focus': ({ inputs }) => !inputs.useInsideFocus,
     },
     styles: ({ hostClasses }) => css `
         :host {
@@ -75,11 +77,16 @@ export const ViraPopUpTrigger = defineViraElement()({
             position: relative;
             flex-grow: 1;
             box-sizing: border-box;
+        }
 
+        ${hostClasses['vira-pop-up-trigger-inside-focus'].selector} .dropdown-wrapper {
             ${createFocusStyles({
-        elementBorderSize: '1px',
+        renderInside: true,
     })}
         }
+        ${hostClasses['vira-pop-up-trigger-outside-focus'].selector} .dropdown-wrapper {
+            ${createFocusStyles()}
+        }
 
         .dropdown-trigger {
             box-sizing: border-box;
@@ -142,7 +149,7 @@ export const ViraPopUpTrigger = defineViraElement()({
                 showPopUpResult: undefined,
             });
             dispatch(new events.openChange(undefined));
-            if (!inputs.isDisabled) {
+            if (inputs.focusOnClose && !inputs.isDisabled) {
                 const dropdownWrapper = host.shadowRoot.querySelector('.dropdown-wrapper');
                 assert.instanceOf(dropdownWrapper, HTMLButtonElement, 'failed to find dropdown wrapper child');
                 dropdownWrapper.focus();

package/dist/elements/vira-dropdown.element.js

@@ -150,6 +150,7 @@ export const ViraDropdown = defineViraElement()({
         return html `
             <${ViraPopUpTrigger.assign({
             ...inputs,
+            focusOnClose: true,
             popUpOffset: {
                 vertical: -1,
                 right: 24,

package/dist/styles/focus.d.ts

@@ -9,17 +9,18 @@ import { type SingleCssVarDefinition } from 'lit-css-vars';
  *
  * @category Styles
  */
-export declare function createFocusStyles({ elementBorderSize, outlineGap, outlineWidth, noNesting, outlineColor, borderRadius, }: {
+export declare function createFocusStyles({ elementBorderSize, outlineGap, outlineWidth, noNesting, outlineColor, borderRadius, renderInside, }?: PartialWithUndefined<{
     /**
      * ElementBorderSize here is used to fix the outline when the element these styles are attached
      * to has a border. The dev must specify that border size here for the offsets to be calculated
      * correctly.
      */
     elementBorderSize: SingleCssVarDefinition | string;
-} & PartialWithUndefined<{
     outlineGap: SingleCssVarDefinition | string;
     outlineWidth: SingleCssVarDefinition | string;
     borderRadius: SingleCssVarDefinition | string;
     outlineColor: SingleCssVarDefinition | string;
     noNesting: boolean;
+    /** Render the focus outline inside the element instead of outside. */
+    renderInside: boolean;
 }>): CSSResult;

package/dist/styles/focus.js

@@ -17,21 +17,36 @@ function cssValueOrRaw(value) {
  *
  * @category Styles
  */
-export function createFocusStyles({ elementBorderSize, outlineGap = '2px', outlineWidth = '2px', noNesting, outlineColor = viraFormCssVars['vira-form-focus-outline-color'], borderRadius = viraFormCssVars['vira-form-focus-outline-border-radius'], }) {
-    const outlineSpacing = css `calc(${cssValueOrRaw(outlineWidth)} + ${cssValueOrRaw(outlineGap)} + ${cssValueOrRaw(elementBorderSize)})`;
-    const styles = css `
-        content: '';
-        top: calc(${outlineSpacing} * -1);
-        left: calc(${outlineSpacing} * -1);
-        position: absolute;
-        width: calc(100% + calc(${outlineSpacing} * 2));
-        height: calc(100% + calc(${outlineSpacing} * 2));
-        box-sizing: border-box;
-        pointer-events: none;
-        border: ${cssValueOrRaw(outlineWidth)} solid ${cssValueOrRaw(outlineColor)};
-        border-radius: ${cssValueOrRaw(borderRadius)};
-        z-index: 100;
-    `;
+export function createFocusStyles({ elementBorderSize = '1px', outlineGap = '2px', outlineWidth = '2px', noNesting, outlineColor = viraFormCssVars['vira-form-focus-outline-color'], borderRadius = viraFormCssVars['vira-form-focus-outline-border-radius'], renderInside, } = {}) {
+    const insetSpacing = css `calc(${cssValueOrRaw(outlineGap)})`;
+    const outsetSpacing = css `calc(${cssValueOrRaw(outlineWidth)} + ${cssValueOrRaw(outlineGap)} + ${cssValueOrRaw(elementBorderSize)})`;
+    const styles = renderInside
+        ? css `
+              content: '';
+              top: ${insetSpacing};
+              left: ${insetSpacing};
+              position: absolute;
+              width: calc(100% - calc(${insetSpacing} * 2));
+              height: calc(100% - calc(${insetSpacing} * 2));
+              box-sizing: border-box;
+              pointer-events: none;
+              border: ${cssValueOrRaw(outlineWidth)} solid ${cssValueOrRaw(outlineColor)};
+              border-radius: ${cssValueOrRaw(borderRadius)};
+              z-index: 100;
+          `
+        : css `
+              content: '';
+              top: calc(${outsetSpacing} * -1);
+              left: calc(${outsetSpacing} * -1);
+              position: absolute;
+              width: calc(100% + calc(${outsetSpacing} * 2));
+              height: calc(100% + calc(${outsetSpacing} * 2));
+              box-sizing: border-box;
+              pointer-events: none;
+              border: ${cssValueOrRaw(outlineWidth)} solid ${cssValueOrRaw(outlineColor)};
+              border-radius: ${cssValueOrRaw(borderRadius)};
+              z-index: 100;
+          `;
     if (noNesting) {
         return styles;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "31.1.2",
+    "version": "31.2.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",