@ncino/web-components 6.1.0-preview.1 → 6.1.0-preview.11

package/dist/types/components/skip-link/gator/base/skip-link.gator.d.ts

@@ -0,0 +1,36 @@
+import { NgcComponent } from '../../../../utils/components/ngc-component';
+import { Ref } from 'lit/directives/ref.js';
+import { Placement } from '@floating-ui/dom';
+export declare class NgcSkipLink extends NgcComponent {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    variant: 'list' | 'button';
+    target: string | HTMLElement;
+    text: string;
+    placement: Placement;
+    xOffset: number;
+    yOffset: number;
+    referenceElement: string | HTMLElement;
+    listTitle: string | undefined;
+    static styles: import('lit').CSSResult[];
+    _skipLinkRef: Ref<HTMLElement>;
+    _cleanup: (() => void) | undefined;
+    render(): import('lit').TemplateResult<1>;
+    get skipLinkButtonVariantMarkup(): import('lit').TemplateResult<1>;
+    get skipLinkListVariantMarkup(): import('lit').TemplateResult<1>;
+    get _referenceElement(): HTMLElement | null;
+    assignPosition(): void;
+    showSkipLink(): void;
+    hideSkipLink(): void;
+    handleSkipLinkButtonKeyup(event: KeyboardEvent): void;
+    handleSkipLinkButtonClick(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ngc-skip-link': NgcSkipLink;
+    }
+}

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

@@ -0,0 +1,13 @@
+import { NgcComponent } from '../../../../utils/components/ngc-component';
+export declare class NgcSkipLinkListItem extends NgcComponent {
+    target: string | HTMLElement;
+    text: string;
+    static styles: import('lit').CSSResult[];
+    render(): import('lit').TemplateResult<1>;
+    handleClick(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ngc-skip-link-list-item': NgcSkipLinkListItem;
+    }
+}

package/dist/types/components/skip-link/index.d.ts

@@ -0,0 +1,2 @@
+export * as NgcSkipLink from './gator/base/skip-link.gator';
+export * as NgcSkipLinkListItem from './gator/list-item/skip-link-list-item.gator';

package/dist/types/components/table/gator/table-bulk-controls/table-bulk-controls.gator.d.ts

@@ -1,6 +1,12 @@
 import { nothing } from 'lit';
 import { NgcComponent } from '../../../../utils/components/ngc-component.ts';
 export declare class NgcTableBulkControls extends NgcComponent {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     /**
      * Whether the bulk controls should be visible
      */
@@ -22,7 +28,6 @@ export declare class NgcTableBulkControls extends NgcComponent {
     render(): import('lit').TemplateResult<1>;
     get bulkControlsMarkup(): import('lit').TemplateResult<1> | typeof nothing;
     get selectedRowsMessage(): string;
-    focus(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/types/components/table/gator/table.gator.d.ts

@@ -6,8 +6,6 @@ export declare class NgcTable extends NjcTable {
     static styles: import('lit').CSSResult[];
     selectedRows: RowData[];
     _currentPage: number;
-    justSelectedRow: RowData | null;
-    showJumpLink: boolean;
     protected updated(_changedProperties: PropertyValues): void;
     render(): import('lit').TemplateResult<1> | null;
     get tableElevatedClass(): "" | "gator-table-elevated";
@@ -15,9 +13,6 @@ export declare class NgcTable extends NjcTable {
     renderWrapper(header: unknown, body: unknown): import('lit').TemplateResult<1>;
     handlePageChanged(event: CustomEvent): void;
     handleItemsPerPageChanged(event: CustomEvent): void;
-    private handleJumpLinkClick;
-    private handleJumpLinkBlur;
-    private handleRowSelectCheckboxBlur;
     private getTableHeader;
     handleSelectAll(event: CustomEvent): void;
     private getTableHeaderColumn;
@@ -28,8 +23,10 @@ export declare class NgcTable extends NjcTable {
     private formatTotal;
     private getTableBodyRow;
     private getTableHeaderRow;
-    handleKeyDown: (e: KeyboardEvent) => void;
     handleTableBodyRowSelected(event: CustomEvent, rowData: RowData): void;
+    addSkipLinkToBulkActions(referenceElement: Node): void;
+    getSkipToBulkActionsMarkup(referenceElement: Node): HTMLElement;
+    removeSkipLinkToBulkActions(referenceElement: Node): void;
     get displayedRowData(): RowData[];
     private getTableBodyCell;
     private getValueForCell;

package/dist/types/components/text-link/gator/text-link.gator.d.ts

@@ -1,8 +1,19 @@
 import { NjcTextLink } from '../text-link.ts';
 export declare class NgcTextLink extends NjcTextLink {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     static styles: import('lit').CSSResult[];
     render(): import('lit').TemplateResult<1>;
+    get anchorMarkup(): import('lit').TemplateResult<1>;
+    get customLinkMarkup(): import('lit').TemplateResult<1>;
+    get textLinkInnerMarkup(): import('lit').TemplateResult<1>;
     get variantClass(): string | null;
+    handleKeyup(event: KeyboardEvent): void;
+    handleClick(event: MouseEvent): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/types/index.d.ts

@@ -43,3 +43,4 @@ export * from './components/toast';
 export * from './components/toast-container';
 export * from './components/toaster';
 export * from './components/tooltip';
+export * from './components/skip-link';

package/dist/types/index.gator.d.ts

@@ -33,6 +33,7 @@ export { NgcRadioGroup } from './components/radio-group';
 export { NgcSelectionBox } from './components/selection-box';
 export { NgcSelectionBoxGroup } from './components/selection-box-group';
 export { NgcSkeletonLoader } from './components/skeleton-loader';
+export { NgcSkipLink } from './components/skip-link';
 export { NgcSwitch } from './components/switch';
 export * from './components/tabs/index.gator.ts';
 export { NgcTextDetail } from './components/text-detail';

package/dist/types/index.utils.d.ts

@@ -0,0 +1 @@
+export { setBrandColor, getBrandColor } from './utils/brand-color-utils.ts';

package/dist/types/utils/brand-color-utils.d.ts

@@ -0,0 +1,2 @@
+export declare function setBrandColor(hexColor: string): void;
+export declare function getBrandColor(): string;

package/dist/types/utils/storybook-args.d.ts

@@ -95,6 +95,16 @@ export declare const INPUT_BASE_ARGS: {
             };
         };
     };
+    minLength: {
+        description: string;
+        control: string;
+        table: {};
+    };
+    maxLength: {
+        description: string;
+        control: string;
+        table: {};
+    };
 };
 export declare const INPUT_TEXT_ARGS: {
     pattern: {

package/dist/utils/brand-color-utils.js

@@ -0,0 +1 @@
+import o from"../node_modules/.pnpm/color@5.0.0/node_modules/color/index.js";function d(t){try{const[r,e]=o(t).hsl().array();document.documentElement.style.setProperty("--color-brand-base",t),document.documentElement.style.setProperty("--color-brand-hue",Math.round(r).toString()),document.documentElement.style.setProperty("--color-brand-saturation",`${Math.round(e)}%`)}catch(r){console.error("Invalid brand color provided:",t,r)}}function a(){return getComputedStyle(document.documentElement).getPropertyValue("--color-brand-base").trim()||"#103656"}export{a as getBrandColor,d as setBrandColor};

package/dist/utils/storybook-args.js

@@ -1 +1 @@
-const n={errorText:{name:"error-text",description:"Custom error message to be displayed. This value overrides any native or internal error messaging. If this is set, the component will be styled in an error state.",table:{category:"Base Input",defaultValue:{summary:""}}},helpText:{name:"help-text",description:"Custom help text to be displayed inline below the component.",table:{category:"Base Input",defaultValue:{summary:""}}},placeholder:{description:"Placeholder text to be displayed in the input.",table:{category:"Base Input",defaultValue:{summary:""}}},value:{description:"Value of the component.",table:{category:"Base Input",defaultValue:{summary:"undefined"}}},label:{description:"Visible label for the component. This is the gold standard, best practice way to label an input for built in accessibility support. If this is not set, you must set the ariaLabelledByElements property for correct programmatic association between your custom label and the input element.",table:{category:"Base Input",defaultValue:{summary:""}}},ariaLabelledByElements:{name:"aria-labelled-by-elements",description:"Used to programmatically associate a custom label to the input. This should only be used when you are using a custom label outside of the ngc input component due to limitations of the shadow dom. Accepts a list of elements. For more information on ARIA element reflection, see [here](https://wicg.github.io/aom/aria-reflection-explainer.html).",type:{summary:"Element[]"},table:{category:"Base Input",defaultValue:{summary:""}}},required:{description:"Whether the component is required.",table:{category:"Base Input",defaultValue:{summary:"false"}}},disabled:{description:"Whether the component is disabled.",table:{category:"Base Input",defaultValue:{summary:"false"}}},readonly:{description:"Whether the component is readonly.",table:{category:"Base Input",defaultValue:{summary:"false"}}},id:{description:"Unique ID for the component. Required for accessibility.",table:{category:"Base Input",defaultValue:{summary:""}}}},i={pattern:{description:"The pattern attribute to be passed to the input. See more information [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern).",control:"text",table:{defaultValue:{summary:"undefined"}}}},r={min:{description:"The min attribute defines the minimum value that is acceptable and valid for the input containing the attribute. If the value of the element is less than this, the element fails validation. This value must be less than or equal to the value of the max attribute. See more information [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min).",control:"string"},max:{description:"The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute. If the value of the element is greater than this, the element fails validation. This value must be greater than or equal to the value of the min attribute. See more information [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max).",control:"string"},step:{description:"The step attribute to be passed to the input for number inputs. See more information [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step).",control:"number",table:{defaultValue:{summary:"1"}}}},l={ariaDescription:{name:"aria-description",description:"The aria-description attribute for the component."}},s={skeleton:{description:"Whether the component should be rendered in a skeleton/loading state.",control:{type:"boolean"},table:{defaultValue:{summary:"false"}}}},u={startIcon:{name:"start-icon",description:"Icon to be displayed at the start of the component. Should be a valid icon name from the [icon library](?path=/story/components-icon--gator-icon-list).",control:{type:"text"},table:{category:"Optional Icon(s)"}}},c={endIcon:{name:"end-icon",description:"Icon to be displayed at the end of the component. Should be a valid icon name from the [icon library](?path=/story/components-icon--gator-icon-list).",control:{type:"text"},table:{category:"Optional Icon(s)"}}},m=(t,o)=>{let e,a={};for(e in t)t.hasOwnProperty(e)&&!o.includes(e)&&(a[e]=t[e]);return a},d=(t,o)=>{let e,a={};for(e in t)t.hasOwnProperty(e)&&o.includes(e)&&(a[e]=t[e]);return a};export{c as END_ICON_ARG,l as INPUT_A11Y_ARGS,n as INPUT_BASE_ARGS,r as INPUT_NUMERIC_ARGS,i as INPUT_TEXT_ARGS,s as SKELETON_ARG,u as START_ICON_ARG,m as argsExclude,d as argsOnly};
+const n={errorText:{name:"error-text",description:"Custom error message to be displayed. This value overrides any native or internal error messaging. If this is set, the component will be styled in an error state.",table:{category:"Base Input",defaultValue:{summary:""}}},helpText:{name:"help-text",description:"Custom help text to be displayed inline below the component.",table:{category:"Base Input",defaultValue:{summary:""}}},placeholder:{description:"Placeholder text to be displayed in the input.",table:{category:"Base Input",defaultValue:{summary:""}}},value:{description:"Value of the component.",table:{category:"Base Input",defaultValue:{summary:"undefined"}}},label:{description:"Visible label for the component. This is the gold standard, best practice way to label an input for built in accessibility support. If this is not set, you must set the ariaLabelledByElements property for correct programmatic association between your custom label and the input element.",table:{category:"Base Input",defaultValue:{summary:""}}},ariaLabelledByElements:{name:"aria-labelled-by-elements",description:"Used to programmatically associate a custom label to the input. This should only be used when you are using a custom label outside of the ngc input component due to limitations of the shadow dom. Accepts a list of elements. For more information on ARIA element reflection, see [here](https://wicg.github.io/aom/aria-reflection-explainer.html).",type:{summary:"Element[]"},table:{category:"Base Input",defaultValue:{summary:""}}},required:{description:"Whether the component is required.",table:{category:"Base Input",defaultValue:{summary:"false"}}},disabled:{description:"Whether the component is disabled.",table:{category:"Base Input",defaultValue:{summary:"false"}}},readonly:{description:"Whether the component is readonly.",table:{category:"Base Input",defaultValue:{summary:"false"}}},id:{description:"Unique ID for the component. Required for accessibility.",table:{category:"Base Input",defaultValue:{summary:""}}},minLength:{description:"The minimum length of the input value. See more information [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength).",control:"number",table:{}},maxLength:{description:"The maximum length of the input value. See more information [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength).",control:"number",table:{}}},i={pattern:{description:"The pattern attribute to be passed to the input. See more information [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern).",control:"text",table:{defaultValue:{summary:"undefined"}}}},r={min:{description:"The min attribute defines the minimum value that is acceptable and valid for the input containing the attribute. If the value of the element is less than this, the element fails validation. This value must be less than or equal to the value of the max attribute. See more information [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min).",control:"string"},max:{description:"The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute. If the value of the element is greater than this, the element fails validation. This value must be greater than or equal to the value of the min attribute. See more information [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max).",control:"string"},step:{description:"The step attribute to be passed to the input for number inputs. See more information [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step).",control:"number",table:{defaultValue:{summary:"1"}}}},l={ariaDescription:{name:"aria-description",description:"The aria-description attribute for the component."}},s={skeleton:{description:"Whether the component should be rendered in a skeleton/loading state.",control:{type:"boolean"},table:{defaultValue:{summary:"false"}}}},u={startIcon:{name:"start-icon",description:"Icon to be displayed at the start of the component. Should be a valid icon name from the [icon library](?path=/story/components-icon--gator-icon-list).",control:{type:"text"},table:{category:"Optional Icon(s)"}}},m={endIcon:{name:"end-icon",description:"Icon to be displayed at the end of the component. Should be a valid icon name from the [icon library](?path=/story/components-icon--gator-icon-list).",control:{type:"text"},table:{category:"Optional Icon(s)"}}},c=(t,a)=>{let e,o={};for(e in t)t.hasOwnProperty(e)&&!a.includes(e)&&(o[e]=t[e]);return o},d=(t,a)=>{let e,o={};for(e in t)t.hasOwnProperty(e)&&a.includes(e)&&(o[e]=t[e]);return o};export{m as END_ICON_ARG,l as INPUT_A11Y_ARGS,n as INPUT_BASE_ARGS,r as INPUT_NUMERIC_ARGS,i as INPUT_TEXT_ARGS,s as SKELETON_ARG,u as START_ICON_ARG,c as argsExclude,d as argsOnly};

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.2.1_typescript@5.8.3__playwright@1.54.1__6e6aa2c9b4102560da2d8ed1e4176ee9/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.2.1_@vitest_browser@3.2.4_@vitest_ui@3._7f1cfb627fdb82ddd833112aba9e7b0b/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__558558d730596f7c5e09b21ff26a3e74/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._f0774390203a57f267156838cb4cb2c5/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": "6.1.0-preview.1",
+  "version": "6.1.0-preview.11",
   "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -19,7 +19,8 @@
   "exports": {
     "./gator": {
       "import": "./dist/index.gator.js",
-      "types": "./dist/types/index.gator.d.ts"
+      "types": "./dist/types/index.gator.d.ts",
+      "require": "./dist/index.gator.js"
     },
     "./types": {
       "types": "./dist/types/index.d.ts"
@@ -34,7 +35,13 @@
     },
     "./services": {
       "import": "./dist/index.services.js",
-      "types": "./dist/types/index.services.d.ts"
+      "types": "./dist/types/index.services.d.ts",
+      "require": "./dist/index.services.js"
+    },
+    "./utils": {
+      "import": "./dist/index.utils.js",
+      "types": "./dist/types/index.utils.d.ts",
+      "require": "./dist/index.utils.js"
     },
     "./gator-global-styles.css": {
       "import": "./dist/styles/gator/gator-global-styles.css"
@@ -72,6 +79,7 @@
     "@floating-ui/dom": "^1.7.2",
     "@lit/localize": "^0.12.2",
     "ckeditor5": "^45.2.1",
+    "color": "^5.0.0",
     "libphonenumber-js": "^1.12.9",
     "lit": "^3.3.0"
   },
@@ -88,7 +96,7 @@
     "@storybook/addon-links": "^9.1.1",
     "@storybook/web-components-vite": "^9.1.1",
     "@types/react": "^19.1.8",
-    "@typescript-eslint/parser": "^8.39.0",
+    "@typescript-eslint/parser": "^8.40.0",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "3.2.4",
@@ -98,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.33.0",
+    "eslint": "^9.34.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-json": "^4.0.1",
@@ -108,7 +116,7 @@
     "eslint-plugin-yml": "1.18.0",
     "glob": "^11.0.3",
     "jsdom": "26.1.0",
-    "playwright": "1.54.1",
+    "playwright": "1.55.0",
     "postcss": "^8.5.6",
     "rimraf": "^6.0.1",
     "sass": "1.90.0",