@salesforcedevs/docs-components 1.34.4-topic-alpha.2 → 1.34.4-topic-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.34.4-topic-alpha.2",
+    "version": "1.34.4-topic-alpha.4",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/breadcrumbs/breadcrumbs.css

@@ -21,6 +21,7 @@ nav {
 
 dx-dropdown {
     --dx-c-dropdown-option-font-size: var(--dx-g-text-sm);
+    --dx-c-dropdown-option-font-weight: var(--dx-g-font-bold);
     --dx-c-dropdown-option-label-color: var(
         --dx-c-breadcrumbs-breadcrumb-color
     );

package/src/modules/doc/contentActionToolbar/contentActionToolbar.html

@@ -61,7 +61,6 @@
             options={menuOptions}
             placement="bottom-end"
             width-mode="fit-content"
-            show-option-icons
             onchange={handleMenuSelect}
             onopen={handleMenuOpen}
             onclose={handleMenuClose}

package/src/modules/doc/contentActionToolbar/contentActionToolbar.ts

@@ -127,26 +127,26 @@ export default class ContentActionToolbar extends LightningElement {
                     {
                         id: ACTION_COPY_MARKDOWN,
                         label: COPY_MARKDOWN_LABEL,
-                        iconSprite: "utility",
-                        iconSymbol: "copy"
+                        endIconSprite: "utility",
+                        endIconSymbol: "copy"
                     },
                     {
                         id: ACTION_VIEW_MARKDOWN,
                         label: VIEW_MARKDOWN_LABEL,
-                        iconSprite: "utility",
-                        iconSymbol: "new_window"
+                        endIconSprite: "utility",
+                        endIconSymbol: "new_window"
                     },
                     {
                         id: ACTION_COPY_MARKDOWN_URL,
                         label: COPY_MARKDOWN_URL_LABEL,
-                        iconSprite: "utility",
-                        iconSymbol: "link"
+                        endIconSprite: "utility",
+                        endIconSymbol: "link"
                     },
                     ...AI_ASSISTANTS.map(({ action, label }) => ({
                         id: action,
                         label,
-                        iconSprite: "utility",
-                        iconSymbol: "new_window"
+                        endIconSprite: "utility",
+                        endIconSymbol: "new_window"
                     }))
                 ]
             });
@@ -159,14 +159,14 @@ export default class ContentActionToolbar extends LightningElement {
                 {
                     id: ACTION_VIEW_LLMS,
                     label: VIEW_LLMS_LABEL,
-                    iconSprite: "utility",
-                    iconSymbol: "new_window"
+                    endIconSprite: "utility",
+                    endIconSymbol: "new_window"
                 },
                 {
                     id: ACTION_COPY_LLMS_URL,
                     label: COPY_LLMS_URL_LABEL,
-                    iconSprite: "utility",
-                    iconSymbol: "link"
+                    endIconSprite: "utility",
+                    endIconSymbol: "link"
                 }
             ]
         });

package/src/modules/doc/header/header.ts

@@ -5,7 +5,6 @@ import { HeaderBase } from "dxBaseElements/headerBase";
 import { toJson, normalizeBoolean } from "dxUtils/normalizers";
 import { track } from "dxUtils/analytics";
 
-const TABLET_MATCH = "980px";
 const MOBILE_MATCH = "768px";
 
 const isStorybook = () => {
@@ -47,8 +46,6 @@ export default class Header extends HeaderBase {
     }
 
     private _scopedNavItems!: OptionWithNested[];
-    private tablet = false;
-    private tabletMatchMedia!: MediaQueryList;
     private shouldRender: boolean = false;
     private showDocDivider: boolean = false;
     private _devCenter!: DevCenterConfig;
@@ -83,11 +80,6 @@ export default class Header extends HeaderBase {
 
     connectedCallback(): void {
         super.connectedCallback();
-        this.tabletMatchMedia = window.matchMedia(
-            `(max-width: ${TABLET_MATCH})`
-        );
-        this.onTabletChange(this.tabletMatchMedia);
-        this.tabletMatchMedia.addEventListener("change", this.onTabletChange);
 
         if (
             (!this.shouldHideHeader && this.isDocsPath) ||
@@ -106,23 +98,12 @@ export default class Header extends HeaderBase {
         }
     }
 
-    disconnectedCallback(): void {
-        super.disconnectedCallback();
-        this.tabletMatchMedia.removeEventListener(
-            "change",
-            this.onTabletChange
-        );
-    }
-
     renderedCallback(): void {
         if (this.hideDocHeader) {
             this.shouldRender = !this.shouldHideHeader && this.isDocsPath;
         }
     }
 
-    private onTabletChange = (e: MediaQueryListEvent | MediaQueryList) =>
-        (this.tablet = e.matches);
-
     protected additionalClasses(): string {
         return cx(
             this.brand && "has-brand",

package/src/modules/doc/nav/nav.css

@@ -8,7 +8,7 @@
 }
 
 dx-sidebar {
-    --dx-c-sidebar-width: unset;
+    --dx-c-sidebar-content-width: unset;
 
     display: block;
 }

package/src/modules/doc/versionPicker/versionPicker.css

@@ -1,7 +1,10 @@
 @import "dxHelpers/reset";
 
-/* NOTE: doc-version-picker-width width variable is used by both dx-button and dx-dropdown to maintain a consistent width. */
+/* The large picker fills its row (the sidebar sets the row padding). The small
+   menu stops at --doc-version-picker-width, which the sidebar sets. */
 :host {
+    display: block;
+
     /* Menu labels wrap; break long unspaced labels instead of overflowing. */
     --dx-c-dropdown-option-overflow-wrap: anywhere;
     --popover-container-open-transform: translateY(4px);
@@ -44,16 +47,35 @@
 
 .version-picker-button {
     display: flex;
-    width: var(--doc-version-picker-width, 296px);
+    width: 100%;
 
     --dx-c-button-horizontal-spacing: var(--dx-g-spacing-sm);
-    --dx-g-button-icon-color: var(--dx-g-gray-50);
+    --dx-c-button-icon-color: var(--dx-g-gray-50);
+
+    /* A real 1px border at rest. Hover and the open menu turn it dark blue and
+       add a 1px inset shadow, so the edge looks 2px without resizing. */
+    --dx-c-button-custom-color: var(--dx-g-gray-10);
+    --dx-c-button-custom-color-hover: var(--dx-g-gray-10);
+    --dx-c-button-custom-background: white;
+    --dx-c-button-custom-background-hover: var(--dx-g-blue-vibrant-95);
+    --dx-c-button-custom-border: var(--dx-g-gray-50);
+    --dx-c-button-custom-border-hover: var(--dx-g-blue-vibrant-20);
+    --dx-c-button-custom-border-shadow-hover: inset 0 0 0 1px
+        var(--dx-g-blue-vibrant-20);
+
+    /* Focus keeps the 2px edge inside the white band. WES shows the ring while
+       the menu is open too, as a select does. */
+    --dx-c-button-focus-shadow: inset 0 0 0 1px var(--dx-g-blue-vibrant-20),
+        0 0 0 2px white;
+    --dx-c-button-custom-focus-outline-active: var(--dx-c-button-focus-outline);
+    --dx-c-button-custom-focus-offset-active: var(--dx-c-button-focus-offset);
+    --dx-c-button-custom-focus-shadow-active: var(--dx-c-button-focus-shadow);
 }
 
 .version-picker-button:hover,
 .version-picker-button:focus-within,
 .version-picker-button[aria-expanded="true"] {
-    --dx-g-button-icon-color: var(--dx-g-blue-vibrant-20);
+    --dx-c-button-icon-color: var(--dx-g-blue-vibrant-20);
 }
 
 /**
@@ -65,27 +87,6 @@ dx-button::part(content) {
     overflow: hidden;
 }
 
-/* The border is an inset box-shadow so thickening it on hover/focus doesn't
-   resize the small variant's fit-content box. */
-.version-picker-button::part(container) {
-    background: white;
-    box-shadow: inset 0 0 0 1px var(--dx-g-gray-50);
-    color: var(--dx-g-gray-10);
-}
-
-.version-picker-button::part(container):hover {
-    background: var(--dx-g-blue-vibrant-95);
-    box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-20);
-}
-
-/* aria-expanded keeps the focus ring while the menu is open. */
-.version-picker-button:focus-within::part(container),
-.version-picker-button[aria-expanded="true"]::part(container) {
-    background: var(--dx-g-blue-vibrant-95);
-    box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-20), 0 0 0 2px white,
-        0 0 0 4px var(--dx-g-blue-vibrant-60);
-}
-
 .selected-version {
     display: flex;
     flex-direction: row;
@@ -138,7 +139,8 @@ dx-type-badge.not-latest-badge {
 }
 
 /* width:100% re-ties to the 104px-capped host (container is width:inherit,
-   which copies width but not max-width). Border/bg/states are shared above. */
+   which copies width but not max-width). Border, fill, and states come from the
+   dx-button hooks on .version-picker-button. */
 .version-picker-button-small::part(container) {
     width: 100%;
     height: var(--dx-g-spacing-lg);
@@ -170,7 +172,7 @@ dx-type-badge.not-latest-badge {
 .version-picker-readonly {
     box-sizing: border-box;
     display: inline-block;
-    width: var(--doc-version-picker-width, 296px);
+    width: 100%;
     height: var(--dx-g-spacing-xl);
     margin: 0;
     padding: 0 var(--dx-g-spacing-sm);

package/src/modules/doc/versionPicker/versionPicker.html

@@ -21,7 +21,7 @@
         >
             <dx-button
                 class={triggerClass}
-                variant="tertiary"
+                variant="custom"
                 size="small"
                 font="sans"
                 icon-symbol="chevrondown"