@nysds/components 1.16.0-alpha-3 → 1.16.0-alpha4

package/dist/packages/nys-button/src/nys-button.d.ts

@@ -159,7 +159,6 @@ export declare class NysButton extends LitElement {
      * @default "_self"
      */
     target: "_self" | "_blank" | "_parent" | "_top" | "framename";
-    getButtonElement(): Promise<HTMLElement | null>;
     private _internals;
     /**
      * Lifecycle methods
@@ -183,10 +182,14 @@ export declare class NysButton extends LitElement {
     private _handleClick;
     private _handleKeydown;
     /**
-     * Vanilla JS & Native HTML keydown solution:
-     * The <nys-button onClick="doFunction();"></nys-button> onClick is an attribute here.
-     * Thus, we call it here. Otherwise, at this point, this.onClick is null as it isn't props, but a string attribute
-     * In vanilla HTML/JS, clicking with execute the attribute function, BUT now with keydown, hence this solution.
+     * A Solution to the Vanilla JS & Native HTML keydown:
+     *
+     * Handles inline onClick attributes set as strings in vanilla HTML
+     * (e.g. <nys-button onClick="doSomething()">).
+     *
+     * When onClick is set this way, it is a DOM attribute (not a property)
+     * so this.onClick remains null. Native clicks execute the attribute
+     * automatically, but keydown events do not, so we invoke it manually here.
      */
     private _handleAnyAttributeFunction;
     focus(options?: FocusOptions): void;

package/dist/packages/nys-checkbox/src/nys-checkboxgroup.d.ts

@@ -97,6 +97,7 @@ export declare class NysCheckboxgroup extends LitElement {
     private _handleCheckboxChange;
     private _handleChildError;
     private _handleChildErrorClear;
+    private _handleOtherInput;
     private _checkOtherInputs;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/packages/nys-globalheader/src/nys-globalheader.d.ts

@@ -25,8 +25,10 @@ export declare class NysGlobalHeader extends LitElement {
     agencyName: string;
     /** URL for the header title link. If empty, title is not clickable. */
     homepageLink: string;
-    private isMobileMenuOpen;
-    private hasLinkContent;
+    /** Internal state to track mobile menu open/closed status. */
+    private _isMobileMenuOpen;
+    /** Internal state to track if any navigation links are present in the slot. */
+    private _hasLinkContent;
     /**
      * Lifecycle Methods
      * --------------------------------------------------------------------------

package/dist/packages/nys-radiobutton/src/nys-radiobutton.d.ts

@@ -81,6 +81,7 @@ export declare class NysRadiobutton extends LitElement {
     formResetUpdate(): void;
     private _handleResize;
     private _clearOtherState;
+    private _dispatchClearErrorEvent;
     /**
      * Event Handlers
      * --------------------------------------------------------------------------

package/dist/packages/nys-radiobutton/src/nys-radiogroup.d.ts

@@ -104,5 +104,7 @@ export declare class NysRadiogroup extends LitElement {
     private _handleRadioButtonChange;
     private _handleInvalid;
     private _handleChildError;
+    private _handleChildErrorClear;
+    private _handleOtherInput;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/packages/nys-table/src/nys-table.d.ts

@@ -6,6 +6,8 @@ import { LitElement } from "lit";
  * @slot - Accepts a `<table>` element. Only the first table is rendered.
  *
  * @fires nys-click - Fired when the download button or sortable headers are clicked.
+ * @fires nys-column-sort - Fired when a sortable column header is clicked.  Can be prevented by calling `event.preventDefault()` to override default sort behavior.
+ *   Detail: { columnIndex: number, columnLabel: string, sortDirection: "asc" | "desc" | "none" }
  *
  * @method downloadFile - Triggers download of the CSV file if `download` is set.
  */
@@ -30,10 +32,19 @@ export declare class NysTable extends LitElement {
     willUpdate(): void;
     _addSortIcons(table: HTMLTableElement): void;
     _updateSortIcons(table: HTMLTableElement): void;
-    _onSortClick(columnIndex: number, table: HTMLTableElement): void;
+    private _onSortClick;
     _sortTable(table: HTMLTableElement, columnIndex: number, direction: "asc" | "desc"): void;
     _updateSortedColumnStyles(table: HTMLTableElement): void;
     downloadFile(): void;
     /****************** Event Handlers ******************/
+    /**
+     * Dispatches the `nys-column-sort` custom event.
+     *
+     * @param columnIndex - Zero-based index of the sorted column.
+     * @param columnLabel - The text label of the sorted column header.
+     * @param sortDirection - The new sort direction: "asc", "desc", or "none".
+     */
+    private _emitColumnSortEvent;
+    /****************** Render ******************/
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/packages/nys-video/src/nys-video.d.ts

@@ -1,4 +1,10 @@
 import { LitElement } from "lit";
+declare global {
+    interface Window {
+        YT: any;
+        onYouTubeIframeAPIReady: () => void;
+    }
+}
 export declare class NysVideo extends LitElement {
     static styles: import("lit").CSSResult;
     /** Full YouTube URL — required. Component will not render if invalid. */
@@ -11,7 +17,7 @@ export declare class NysVideo extends LitElement {
      * Largest size for the video player.
      * If not set, size is determined automatically by viewport width.
      */
-    size: "full" | "contained" | "compacted" | "";
+    size: "full" | "md" | "sm" | "";
     loading: "lazy" | "eager";
     /** Time in seconds where playback begins. **/
     starttime: number;
@@ -26,11 +32,10 @@ export declare class NysVideo extends LitElement {
     disabled: boolean;
     /** Tracks whether the user has clicked to load the player */
     private _playerActive;
-    /** Auto-computed size when no explicit size prop is set */
-    private _autoSize;
-    private _mediaFull;
-    private _mediaMobileLarge;
-    private _onMediaChange;
+    /** Screen reader announcement text */
+    private _announcement;
+    /** Tracks whether an ad is currently playing to suppress false "Video is playing" announcements */
+    private _adPlaying;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -38,15 +43,29 @@ export declare class NysVideo extends LitElement {
      * Functions
      * --------------------------------------------------------------------------
      */
-    private _updateAutoSize;
     private _isValidYouTubeUrl;
     private _getVideoId;
     private _getThumbnailUrl;
     private _getEmbedUrl;
+    /**
+     * Because I need to know if Youtube ADs are playing, I need to call YT's API.
+     * Hence, the YT API setup below. The VO has 2 types of announcements:
+     * - "Advertisement is playing"
+     * - "Video is playing"
+     *
+     * YT IFrame Player API: https://developers.google.com/youtube/iframe_api_reference
+     */
+    private _announceVideoVO;
     /**
      * Event Handlers
      * --------------------------------------------------------------------------
      */
     private _handleThumbnailClick;
+    /**
+     * Render Helpers
+     * --------------------------------------------------------------------------
+     */
+    private _renderAnnouncer;
+    private _renderPlayIcon;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/src/index.d.ts

@@ -28,3 +28,4 @@ export * from "../packages/nys-unavheader/src/index";
 export * from "../packages/nys-globalheader/src/index";
 export * from "../packages/nys-globalfooter/src/index";
 export * from "../packages/nys-unavfooter/src/index";
+export * from "../packages/nys-video/src/index";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/components",
-  "version": "1.16.0-alpha-3",
+  "version": "1.16.0-alpha4",
   "description": "New York State's design system and code component library.",
   "type": "module",
   "workspaces": [
@@ -32,16 +32,17 @@
     "build": "tsc --emitDeclarationOnly && vite build",
     "build:umd": "cross-env BUILD_FORMAT=umd vite build",
     "tsc:packages": "tsc -b tsconfig.build.json",
-    "build:packages": "npm run tsc:packages && turbo run build --filter='./packages/*'",
+    "build:packages": "npm run tsc:packages && turbo run build --filter='./packages/*' --log-order=grouped",
     "build:root": "cross-env NODE_ENV=production npm run build && cross-env NODE_ENV=production npm run build:umd",
-    "build:all": "npm run clean:dist && npm run lint && npm run lit-analyze || true&& cross-env NODE_ENV=production npm run build:packages && npm run build:root && npm run cem && npm run mcp-server:build",
-    "build:link": "npm run build:all && npm link",
+    "build:all": "npm run clean:dist && npm run lint && npm run lit-analyze || true && cross-env NODE_ENV=production npm run build:packages && npm run build:root && npm run cem && npm run mcp-server:build",
+    "build:link": "npm run build:all && npm link && cd packages/styles && npm link",
     "lint": "eslint --cache --cache-location node_modules/.cache/eslint && stylelint **/*.scss || true",
     "lint:fix": "eslint --fix && stylelint **/*.scss --fix",
     "lit-analyze": "find ./packages/nys-*/ -name '*.ts' ! -name '*.figma.*' | xargs lit-analyzer {}",
     "release": "cross-env NODE_ENV=production npm run build:all && cross-env NODE_ENV=production npm run test && npm run cem && cross-env NODE_ENV=production npm publish --workspaces --access public && cross-env NODE_ENV=production npm publish --access public",
     "release:dry-run": "cross-env NODE_ENV=production npm run build:all && cross-env NODE_ENV=production npm run test && npm run cem && node src/scripts/publish-dry-run.js",
-    "release:alpha": "npm run build && npm run build:umd && npm publish --tag next",
+    "release:alpha": "cross-env NODE_ENV=production npm run build:all && cross-env NODE_ENV=production npm run test && npm run cem && cross-env NODE_ENV=production npm publish --workspaces --access public --tag next && cross-env NODE_ENV=production npm publish --access public --tag next",
+    "release:zip": "npm run build:all && node src/scripts/create-release-zip.js",
     "test": "npx playwright install && wtr --node-resolve",
     "test:build": "npm run build:all && npm run test",
     "storybook": "cross-env NODE_ENV=production storybook dev -p 6006",
@@ -106,8 +107,8 @@
     "stylelint-config-standard": "^40.0.0",
     "stylelint-config-standard-scss": "^17.0.0",
     "tslib": "^2.8.1",
+    "turbo": "^2.8.20",
     "typescript": "^5.9.3",
-    "turbo": "^2.8.16",
     "vite": "^7.3.1"
   },
   "eslintConfig": {

package/packages/react/NysTable.d.ts

@@ -59,6 +59,9 @@ export interface NysTableProps extends Pick<
 
   /** Fired when the download button or sortable headers are clicked. */
   onNysClick?: (event: CustomEvent) => void;
+
+  /** Fired when a sortable column header is clicked.  Can be prevented by calling `event.preventDefault()` to override default sort behavior. Detail: { columnIndex: number, columnLabel: string, sortDirection: "asc" | "desc" | "none" } */
+  onNysColumnSort?: (event: CustomEvent) => void;
 }
 
 /**
@@ -69,6 +72,7 @@ export interface NysTableProps extends Pick<
  *
  * ### **Events:**
  *  - **nys-click** - Fired when the download button or sortable headers are clicked.
+ * - **nys-column-sort** - Fired when a sortable column header is clicked.  Can be prevented by calling `event.preventDefault()` to override default sort behavior. Detail: { columnIndex: number, columnLabel: string, sortDirection: "asc" | "desc" | "none" }
  *
  * ### **Slots:**
  *  - _default_ - Accepts a `<table>` element. Only the first table is rendered.

package/packages/react/NysTable.js

@@ -9,6 +9,7 @@ export const NysTable = forwardRef((props, forwardedRef) => {
 
   /** Event listeners - run once */
   useEventListener(ref, "nys-click", props.onNysClick);
+  useEventListener(ref, "nys-column-sort", props.onNysColumnSort);
 
   return React.createElement(
     "nys-table",

package/packages/react/NysVideo.d.ts

@@ -0,0 +1,77 @@
+import React from "react";
+import { NysVideo as NysVideoElement } from "../../dist/nysds.es.js";
+
+export type { NysVideoElement };
+
+export interface NysVideoProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Triggers autoplay when the iframe loads */
+  autoplay?: boolean;
+
+  /** Prevents the video from being played */
+  disabled?: boolean;
+
+  /** Full YouTube URL — required. Component will not render if invalid. */
+  id?: NysVideoElement["id"];
+
+  /** Title text for the thumbnail of the video */
+  titleText?: NysVideoElement["titleText"];
+
+  /** Full YouTube URL — required. Component will not render if invalid. */
+  videourl?: NysVideoElement["videourl"];
+
+  /** Largest size for the video player.
+If not set, size is determined automatically by viewport width. */
+  size?: NysVideoElement["size"];
+
+  /** undefined */
+  loading?: NysVideoElement["loading"];
+
+  /** Time in seconds where playback begins. * */
+  starttime?: NysVideoElement["starttime"];
+
+  /** Custom thumbnail image path.
+Falls back to YouTube's auto-generated thumbnail if not provided. */
+  thumbnail?: NysVideoElement["thumbnail"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+/**
+ *
+ * ---
+ *
+ */
+export const NysVideo: React.ForwardRefExoticComponent<NysVideoProps>;

package/packages/react/NysVideo.js

@@ -0,0 +1,40 @@
+import React, { forwardRef } from "react";
+import "../../dist/nysds.es.js";
+
+export const NysVideo = forwardRef((props, forwardedRef) => {
+  const {
+    autoplay,
+    disabled,
+    id,
+    titleText,
+    videourl,
+    size,
+    loading,
+    starttime,
+    thumbnail,
+    ...filteredProps
+  } = props;
+
+  return React.createElement(
+    "nys-video",
+    {
+      ...filteredProps,
+      id: props.id,
+      titleText: props.titleText,
+      videourl: props.videourl,
+      size: props.size,
+      loading: props.loading,
+      starttime: props.starttime,
+      thumbnail: props.thumbnail,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      autoplay: props.autoplay ? true : undefined,
+      disabled: props.disabled ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/packages/react/index.d.ts

@@ -1,37 +1,38 @@
 export * from "./NysAccordion.js";
 export * from "./NysAccordionItem.js";
-export * from "./NysAvatar.js";
 export * from "./NysAlert.js";
-export * from "./NysBadge.js";
+export * from "./NysAvatar.js";
 export * from "./NysBacktotop.js";
+export * from "./NysBadge.js";
 export * from "./NysButton.js";
 export * from "./NysCheckbox.js";
 export * from "./NysCheckboxgroup.js";
+export * from "./NysCombobox.js";
 export * from "./NysDatepicker.js";
 export * from "./NysDivider.js";
 export * from "./NysDropdownMenu.js";
 export * from "./NysDropdownMenuItem.js";
 export * from "./NysErrorMessage.js";
-export * from "./NysGlobalFooter.js";
 export * from "./NysFileinput.js";
 export * from "./NysFileItem.js";
+export * from "./NysGlobalFooter.js";
 export * from "./NysGlobalHeader.js";
 export * from "./NysIcon.js";
 export * from "./NysLabel.js";
+export * from "./NysModal.js";
 export * from "./NysPagination.js";
+export * from "./NysRadiobutton.js";
+export * from "./NysRadiogroup.js";
 export * from "./NysOption.js";
 export * from "./NysSelect.js";
 export * from "./NysSkipnav.js";
 export * from "./NysStep.js";
 export * from "./NysStepper.js";
-export * from "./NysModal.js";
 export * from "./NysTable.js";
 export * from "./NysTextarea.js";
-export * from "./NysRadiobutton.js";
-export * from "./NysRadiogroup.js";
-export * from "./NysCombobox.js";
-export * from "./NysToggle.js";
 export * from "./NysTextinput.js";
+export * from "./NysToggle.js";
 export * from "./NysTooltip.js";
-export * from "./NysUnavHeader.js";
 export * from "./NysUnavFooter.js";
+export * from "./NysUnavHeader.js";
+export * from "./NysVideo.js";

package/packages/react/index.js

@@ -1,37 +1,38 @@
 export * from "./NysAccordion.js";
 export * from "./NysAccordionItem.js";
-export * from "./NysAvatar.js";
 export * from "./NysAlert.js";
-export * from "./NysBadge.js";
+export * from "./NysAvatar.js";
 export * from "./NysBacktotop.js";
+export * from "./NysBadge.js";
 export * from "./NysButton.js";
 export * from "./NysCheckbox.js";
 export * from "./NysCheckboxgroup.js";
+export * from "./NysCombobox.js";
 export * from "./NysDatepicker.js";
 export * from "./NysDivider.js";
 export * from "./NysDropdownMenu.js";
 export * from "./NysDropdownMenuItem.js";
 export * from "./NysErrorMessage.js";
-export * from "./NysGlobalFooter.js";
 export * from "./NysFileinput.js";
 export * from "./NysFileItem.js";
+export * from "./NysGlobalFooter.js";
 export * from "./NysGlobalHeader.js";
 export * from "./NysIcon.js";
 export * from "./NysLabel.js";
+export * from "./NysModal.js";
 export * from "./NysPagination.js";
+export * from "./NysRadiobutton.js";
+export * from "./NysRadiogroup.js";
 export * from "./NysOption.js";
 export * from "./NysSelect.js";
 export * from "./NysSkipnav.js";
 export * from "./NysStep.js";
 export * from "./NysStepper.js";
-export * from "./NysModal.js";
 export * from "./NysTable.js";
 export * from "./NysTextarea.js";
-export * from "./NysRadiobutton.js";
-export * from "./NysRadiogroup.js";
-export * from "./NysCombobox.js";
-export * from "./NysToggle.js";
 export * from "./NysTextinput.js";
+export * from "./NysToggle.js";
 export * from "./NysTooltip.js";
-export * from "./NysUnavHeader.js";
 export * from "./NysUnavFooter.js";
+export * from "./NysUnavHeader.js";
+export * from "./NysVideo.js";

package/packages/react/react-utils.js

@@ -36,7 +36,5 @@ export function useEventListener(targetElement, eventName, eventHandler) {
     return () => {
       element.removeEventListener(eventName, listener);
     };
-    // Only re-subscribe when the element or event name changes.
-    // Handler changes are handled via the savedHandler ref above.
   }, [eventName, targetElement]);
 }