@ncino/web-components 7.0.0-preview.7 → 7.0.0-preview.9

package/dist/styles/gator/_gator-typography.css

@@ -0,0 +1,186 @@
+@import '../../../src/styles/fonts';
+/* Body Text */
+body {
+    font-family: var(--text-family-body, "Open Sans"), sans-serif;
+}
+
+.gator-body-1 {
+	font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 400;
+	font-family: var(--text-family-body, "Open Sans");
+	color: var(--text-color-primary-base, #1F1F1F);
+	letter-spacing: var(--text-letter-spacing-default, 0);
+	font-size: var(--text-font-size-body-1, 17px);
+	line-height: var(--text-line-height-body-1, 24px);
+}
+
+.gator-body-2 {
+	font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 400;
+	font-family: var(--text-family-body, "Open Sans");
+	color: var(--text-color-primary-base, #1F1F1F);
+	letter-spacing: var(--text-letter-spacing-default, 0);
+	font-size: var(--text-font-size-body-2, 15px);
+	line-height: var(--text-line-height-body-2, 22px);
+}
+
+.gator-body-3 {
+	font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 400;
+	font-family: var(--text-family-body, "Open Sans");
+	color: var(--text-color-primary-base, #1F1F1F);
+	letter-spacing: var(--text-letter-spacing-default, 0);
+	font-size: var(--text-font-size-body-3, 13px);
+	line-height: var(--text-line-height-body-3, 18px);
+}
+
+.gator-body-bold {
+	font-weight: 700;
+}
+
+.gator-body-semibold {
+	font-weight: 600;
+}
+
+.gator-uppercase {
+	text-transform: uppercase;
+}
+
+/* Headings */
+.gator-heading-display-1 {
+    font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 700;
+	letter-spacing: var(--text-letter-spacing-narrow, -1px);
+	color: var(--text-color-primary-base, #1F1F1F);
+	font-family: var(--text-family-headings, 'nCino+Avenir');
+	font-size: var(--text-font-size-display-1, 72px);
+	line-height: var(--text-line-height-display-1, 90px);
+}
+
+.gator-heading-display-2 {
+	font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 700;
+	letter-spacing: var(--text-letter-spacing-narrow, -1px);
+	color: var(--text-color-primary-base, #1F1F1F);
+	font-family: var(--text-family-headings, 'nCino+Avenir');
+	font-size: var(--text-font-size-display-2, 64px);
+	line-height: var(--text-line-height-display-2, 78px);
+}
+
+.gator-heading-h1 {
+	font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 700;
+	letter-spacing: var(--text-letter-spacing-narrow, -1px);
+	color: var(--text-color-primary-base, #1F1F1F);
+	font-family: var(--text-family-headings, 'nCino+Avenir');
+	font-size: var(--text-font-size-heading-1, 40px);
+	line-height: var(--text-line-height-heading-1, 50px);
+}
+
+.gator-heading-h1 {
+	font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 700;
+	letter-spacing: var(--text-letter-spacing-narrow, -1px);
+	color: var(--text-color-primary-base, #1F1F1F);
+	font-family: var(--text-family-headings, 'nCino+Avenir');
+	font-size: var(--text-font-size-heading-1, 40px);
+	line-height: var(--text-line-height-heading-1, 50px);
+}
+
+.gator-heading-h2 {
+	font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 700;
+	letter-spacing: var(--text-letter-spacing-narrow, -1px);
+	color: var(--text-color-primary-base, #1F1F1F);
+	font-family: var(--text-family-headings, 'nCino+Avenir');
+	font-size: var(--text-font-size-heading-2, 32px);
+	line-height: var(--text-line-height-heading-2, 40px);
+}
+
+.gator-heading-h3 {
+	font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 700;
+	letter-spacing: var(--text-letter-spacing-narrow, -1px);
+	color: var(--text-color-primary-base, #1F1F1F);
+	font-family: var(--text-family-headings, 'nCino+Avenir');
+	font-size: var(--text-font-size-heading-3, 26px);
+	line-height: var(--text-line-height-heading-3, 36px);
+}
+
+.gator-heading-h4 {
+	font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 700;
+	letter-spacing: var(--text-letter-spacing-narrow, -1px);
+	color: var(--text-color-primary-base, #1F1F1F);
+	font-family: var(--text-family-headings, 'nCino+Avenir');
+	font-size: var(--text-font-size-heading-4, 22px);
+	line-height: var(--text-line-height-heading-4, 32px);
+	letter-spacing: var(--text-letter-spacing-default, 0);
+}
+.gator-heading-h5 {
+	font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 700;
+	letter-spacing: var(--text-letter-spacing-narrow, -1px);
+	color: var(--text-color-primary-base, #1F1F1F);
+	font-family: var(--text-family-headings, 'nCino+Avenir');
+	font-size: var(--text-font-size-heading-5, 20px);
+	line-height: var(--text-line-height-heading-5, 30px);
+	letter-spacing: var(--text-letter-spacing-default, 0);
+}
+.gator-heading-h6 {
+	font-feature-settings: 'liga' off, 'clig' off;
+	font-style: normal;
+	font-weight: 700;
+	letter-spacing: var(--text-letter-spacing-narrow, -1px);
+	color: var(--text-color-primary-base, #1F1F1F);
+	font-family: var(--text-family-headings, 'nCino+Avenir');
+	font-size: var(--text-font-size-heading-6, 18px);
+	line-height: var(--text-line-height-28, 28px);
+	letter-spacing: var(--text-letter-spacing-default, 0);
+}
+
+@media (max-width: 768px) {
+	.gator-heading-display-1 {
+		font-size: var(--text-font-size-sm-display-1, 48px);
+		line-height: var(--text-line-height-sm-display-1, 56px);
+	}
+	.gator-heading-display-2 {
+		font-size: var(--text-font-size-sm-display-2, 36px);
+		line-height: var(--text-line-height-sm-display-2, 48px);
+	}
+	.gator-heading-h1 {
+		font-size: var(--text-font-size-sm-heading-1, 28px);
+		line-height: var(--text-line-height-sm-heading-1, 36px);
+	}
+	.gator-heading-h2 {
+		font-size: var(--text-font-size-sm-heading-2, 24px);
+		line-height: var(--text-line-height-sm-heading-2, 32px);
+	}
+	.gator-heading-h3 {
+		font-size: var(--text-font-size-sm-heading-3, 22px);
+		line-height: var(--text-line-height-sm-heading-3, 32px);
+	}
+	.gator-heading-h4 {
+		font-size: var(--text-font-size-sm-heading-4, 20px);
+		line-height: var(--text-line-height-sm-heading-4, 30px);
+	}
+	.gator-heading-h5 {
+		font-size: var(--text-size-18, 18px);
+		line-height: var(--text-line-height-28, 28px);
+	}
+	.gator-heading-h6 {
+		font-size: var(--text-size-17, 17px);
+		line-height: var(--text-line-height-24, 24px);
+	}
+}

package/dist/styles/gator/gator-global-styles.css

@@ -1,10 +1,7 @@
 @import 'tokens/_gator-global-tokens.css';
 @import '_gator-grid.css';
 @import '_gator-sizing.css';
-
-body {
-    font-family: var(--text-family-body, "Open Sans"), sans-serif;
-}
+@import '_gator-typography.css';
 
 .gator-d-flex {
     display: flex;
@@ -12,4 +9,4 @@ body {
 
 .gator-d-inline-flex {
     display: inline-flex;
-}
+}

package/dist/types/components/guided-nav/gator/guided-nav/guided-nav.gator.d.ts

@@ -1,10 +1,19 @@
 import { NjcGuidedNav } from '../../guided-nav.ts';
 export declare class NgcGuidedNav extends NjcGuidedNav {
+    connectedCallback(): void;
     render(): import('lit').TemplateResult<1>;
     private _getStepState;
     private _handleStepSelected;
     private _handleSubstepSelected;
+    private _moveToStep;
+    private _moveToSubstep;
+    private _isSubstepCompleteOrNext;
+    private _createToaster;
+    private _showForwardNavigationErrorToast;
     private _dispatchChangeEvent;
+    moveToNextStep(): void;
+    moveToPreviousStep(): void;
+    getCurrentStepProgress(): number;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/types/components/guided-nav/gator/guided-nav-step/guided-nav-step.gator.d.ts

@@ -1,12 +1,19 @@
 import { NgcListItem } from '../../../list/gator/list-item/list-item.gator.ts';
 import { NJC_GUIDED_NAV_STEP_STATE, NjcGuidedNavSelectedStep, NjcGuidedNavStep, NjcGuidedNavSubstep } from '../../guided-nav.ts';
 export declare class NgcGuidedNavStep extends NgcListItem {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     static styles: import('lit').CSSResult[];
     step: NjcGuidedNavStep;
     selectedStep: NjcGuidedNavSelectedStep;
     state: NJC_GUIDED_NAV_STEP_STATE;
     onStepSelected: (event: Event, step: NjcGuidedNavStep) => void;
     onSubstepSelected: (event: Event, step: NjcGuidedNavSubstep) => void;
+    badgeContent: string | null;
     render(): import('lit').TemplateResult<1>;
     private get _stepClasses();
     private get _stepListItemClasses();

package/dist/types/components/guided-nav/gator/guided-nav-substep/guided-nav-substep.gator.d.ts

@@ -5,6 +5,7 @@ export declare class NgcGuidedNavSubstep extends NgcListItem {
     substep: NjcGuidedNavSubstep;
     selected: boolean;
     state: NJC_GUIDED_NAV_STEP_STATE;
+    badgeContent: string | undefined;
     onSubstepSelected: (event: Event, step: NjcGuidedNavSubstep) => void;
     render(): import('lit').TemplateResult<1>;
     private get _substepClasses();

package/dist/types/components/guided-nav/guided-nav.d.ts

@@ -1,3 +1,4 @@
+import { PropertyValues } from 'lit';
 import { TestableLitElement } from '../../utils/components/testable-lit-element/testable-lit-element';
 export type NJC_GUIDED_NAV_STEP_STATE = 'complete' | 'current' | 'incomplete';
 export type NjcGuidedNavSelectedStep = {
@@ -9,6 +10,7 @@ export type NjcGuidedNavSubstep = {
     text: string;
     value: string;
     complete: boolean;
+    badgeContent?: string;
 };
 export type NjcGuidedNavStep = {
     id: string;
@@ -16,8 +18,24 @@ export type NjcGuidedNavStep = {
     value: string;
     complete?: boolean;
     substeps?: NjcGuidedNavSubstep[];
+    badgeContent?: string;
 };
 export declare class NjcGuidedNav extends TestableLitElement {
     selectedStep: NjcGuidedNavSelectedStep | undefined;
     steps: NjcGuidedNavStep[];
+    /**
+     * @property {boolean} forwardNavigationDisabled
+     * @description If true, disables navigation past the current step.
+     */
+    forwardNavigationDisabled: boolean;
+    /**
+     * @property {string} forwardNavigationDisabledErrorMessage
+     * @description The error message displayed in an error toast when forward navigation is disabled and a user attempts to navigate forward.
+     */
+    forwardNavigationDisabledErrorMessage: string;
+    _totalStepsAndSubsteps: number;
+    currentStep: NjcGuidedNavStep | undefined;
+    currentSubstep: NjcGuidedNavSubstep | undefined;
+    protected updated(_changedProperties: PropertyValues): void;
+    protected _calculateTotalStepsAndSubsteps(): void;
 }

package/dist/types/components/list/gator/list-item/list-item.gator.d.ts

@@ -92,7 +92,7 @@ export declare class NgcListItem extends NgcComponent {
     get subtitleSpacerElement(): import('lit').TemplateResult<1>;
     get interactionIconContent(): import('lit').TemplateResult<1> | null;
     get leftIconContent(): import('lit').TemplateResult<1> | null;
-    get rightIconContent(): import('lit').TemplateResult<1> | null;
+    get endMarkup(): import('lit').TemplateResult<1> | null;
     click(): void;
     handleListItemClicked(): void;
     private handleItemKeyUp;

package/dist/utils/components/ngc-component.js

@@ -1 +1 @@
-import n from"../../packages/web-components/src/tokens/primitive.tokens.scss.js";import u from"../../packages/web-components/src/tokens/semantic.tokens.scss.js";import y from"../../packages/web-components/src/styles/_gator-utils.scss.js";import"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/reactive-element.js";import"../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/lit-html.js";import"../../node_modules/.pnpm/lit-element@4.2.0/node_modules/lit-element/lit-element.js";import{TestableLitElement as d}from"./testable-lit-element/testable-lit-element.js";import{AttributeDeletionMixin as v}from"../mixins/attribute-deletion.js";import{property as l}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/property.js";import{unsafeCSS as o}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/css-tag.js";var A=Object.defineProperty,f=(s,p,m,h)=>{for(var t=void 0,r=s.length-1,a;r>=0;r--)(a=s[r])&&(t=a(p,m,t)||t);return t&&A(p,m,t),t};const i=class i extends v(d){constructor(){super(...arguments),this.delegatesARIA=!0,this.skeleton=!1}};i.styles=[o(n),o(u),o(y)];let e=i;f([l({type:Boolean})],e.prototype,"delegatesARIA");f([l({type:Boolean})],e.prototype,"skeleton");export{e as NgcComponent};
+import f from"../../packages/web-components/src/tokens/primitive.tokens.scss.js";import u from"../../packages/web-components/src/tokens/semantic.tokens.scss.js";import y from"../../packages/web-components/src/styles/_gator-utils.scss.js";import"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/reactive-element.js";import"../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/lit-html.js";import"../../node_modules/.pnpm/lit-element@4.2.0/node_modules/lit-element/lit-element.js";import{TestableLitElement as d}from"./testable-lit-element/testable-lit-element.js";import{AttributeDeletionMixin as v}from"../mixins/attribute-deletion.js";import{property as l}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/property.js";import{unsafeCSS as o}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/css-tag.js";var A=Object.defineProperty,n=(s,p,m,h)=>{for(var t=void 0,r=s.length-1,a;r>=0;r--)(a=s[r])&&(t=a(p,m,t)||t);return t&&A(p,m,t),t};const i=class i extends v(d){constructor(){super(...arguments),this.delegatesARIA=!0,this.skeleton=!1}};i.styles=[o(f),o(u),o(y)];let e=i;n([l({type:Boolean})],e.prototype,"delegatesARIA");n([l({type:Boolean})],e.prototype,"skeleton");export{e as NgcComponent};

package/dist/utils/vitest-a11y-utils.js

@@ -1 +1 @@
-import{page as s}from"../node_modules/.pnpm/@vitest_browser@3.2.4_msw@2.7.3_@types_node@24.3.0_typescript@5.8.3__playwright@1.55.0__250fccbe5ed788e0688ecbf1c4e5e907/node_modules/@vitest/browser/context.js";import n from"../_virtual/axe.js";import{a as o}from"../node_modules/.pnpm/vitest@3.2.4_@types_debug@4.1.12_@types_node@24.3.0_@vitest_browser@3.2.4_@vitest_ui@3._ad1109fdae535cd946c9feed44178247/node_modules/vitest/dist/chunks/vi.bdSIJ99Y.js";const d="Supercalifragilisticexpialidocious".repeat(10);async function a(t){return(await n.run(t)).violations}async function p(t){const e=await a(t);o(e,`Expected no axe core violations, but got ${e.length}: ${JSON.stringify(e)}`).toHaveLength(0)}function x(){return s.viewport(320,256)}function h(t){let e;if(t.scrollWidth!==0?e=t:t.shadowRoot?e=t.shadowRoot.firstElementChild:e=t.firstElementChild,e){const r=e.scrollWidth>e.clientWidth;return o(r).toBe(!1)}return o(!0).toBe(!1)}function g(t,e,r){let i=t.querySelector(":focus-visible");if(i||(i=t.shadowRoot?.querySelector(":focus-visible")),i){const l=getComputedStyle(i).getPropertyValue(e);return o(l).toContain(r)}return o(!0).toBe(!1)}export{g as expectComponentFocusStyle,h as expectComponentNotToHaveHorizontalScrollbar,p as expectNoAxeViolations,x as resizeWindowForReflowTest,a as runAxeAndGetViolations,d as superLongStringForReflowTest};
+import{page as s}from"../node_modules/.pnpm/@vitest_browser@3.2.4_msw@2.7.3_@types_node@24.3.0_typescript@5.8.3__playwright@1.55.0__52d7c6cd144c32d9cfaaa0e5cd39c583/node_modules/@vitest/browser/context.js";import n from"../_virtual/axe.js";import{a as o}from"../node_modules/.pnpm/vitest@3.2.4_@types_debug@4.1.12_@types_node@24.3.0_@vitest_browser@3.2.4_@vitest_ui@3._b3f9e7a46c2fec06a40d2eaf7fb1b902/node_modules/vitest/dist/chunks/vi.bdSIJ99Y.js";const d="Supercalifragilisticexpialidocious".repeat(10);async function a(t){return(await n.run(t)).violations}async function p(t){const e=await a(t);o(e,`Expected no axe core violations, but got ${e.length}: ${JSON.stringify(e)}`).toHaveLength(0)}function x(){return s.viewport(320,256)}function h(t){let e;if(t.scrollWidth!==0?e=t:t.shadowRoot?e=t.shadowRoot.firstElementChild:e=t.firstElementChild,e){const r=e.scrollWidth>e.clientWidth;return o(r).toBe(!1)}return o(!0).toBe(!1)}function g(t,e,r){let i=t.querySelector(":focus-visible");if(i||(i=t.shadowRoot?.querySelector(":focus-visible")),i){const l=getComputedStyle(i).getPropertyValue(e);return o(l).toContain(r)}return o(!0).toBe(!1)}export{g as expectComponentFocusStyle,h as expectComponentNotToHaveHorizontalScrollbar,p as expectNoAxeViolations,x as resizeWindowForReflowTest,a as runAxeAndGetViolations,d as superLongStringForReflowTest};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ncino/web-components",
   "author": "nCino",
-  "version": "7.0.0-preview.7",
+  "version": "7.0.0-preview.9",
   "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -89,14 +89,14 @@
     "@custom-elements-manifest/analyzer": "0.10.4",
     "@figma/code-connect": "1.3.4",
     "@lit/localize-tools": "^0.8.0",
-    "@salesforce-ux/design-system": "^2.27.2",
+    "@salesforce-ux/design-system": "^2.28.0",
     "@storybook/addon-a11y": "^9.1.1",
     "@storybook/addon-designs": "^10.0.1",
     "@storybook/addon-docs": "^9.1.1",
     "@storybook/addon-links": "^9.1.1",
     "@storybook/web-components-vite": "^9.1.1",
     "@types/react": "^19.1.8",
-    "@typescript-eslint/parser": "^8.41.0",
+    "@typescript-eslint/parser": "^8.42.0",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "3.2.4",
@@ -106,7 +106,7 @@
     "conventional-changelog-conventionalcommits": "^9.1.0",
     "custom-element-jet-brains-integration": "^1.7.0",
     "custom-elements-manifest": "^2.1.0",
-    "eslint": "^9.34.0",
+    "eslint": "^9.35.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-json": "^4.0.1",
@@ -119,7 +119,7 @@
     "playwright": "1.55.0",
     "postcss": "^8.5.6",
     "rimraf": "^6.0.1",
-    "sass": "1.91.0",
+    "sass": "1.92.1",
     "storybook": "^9.1.1",
     "storybook-addon-code-editor": "^5.0.0",
     "storybook-design-token": "^4.1.0",