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

package/dist/nysds.es.js

@@ -2,7 +2,7 @@ import { LitElement as f, unsafeCSS as g, html as d } from "lit";
 import { property as a, query as Dt, state as _ } from "lit/decorators.js";
 import { ifDefined as y } from "lit/directives/if-defined.js";
 /*!
-   * New York State Design System v1.16.0-alpha-2
+   * New York State Design System v1.16.0-alpha-3
    * Description: A design system for New York State's digital products.
    * Repository: https://github.com/its-hcd/nysds
    * License: MIT

package/dist/nysds.js

@@ -1,5 +1,5 @@
 (function(b,me){typeof exports=="object"&&typeof module<"u"?me(exports):typeof define=="function"&&define.amd?define(["exports"],me):(b=typeof globalThis<"u"?globalThis:b||self,me(b.NYSDS={}))})(this,(function(b){"use strict";/*!
-   * New York State Design System v1.16.0-alpha-2
+   * New York State Design System v1.16.0-alpha-3
    * Description: A design system for New York State's digital products.
    * Repository: https://github.com/its-hcd/nysds
    * License: MIT

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

@@ -0,0 +1 @@
+export * from "./nys-video";

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

@@ -0,0 +1,52 @@
+import { LitElement } from "lit";
+export declare class NysVideo extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Full YouTube URL — required. Component will not render if invalid. */
+    id: string;
+    /** Title text for the thumbnail of the video */
+    titleText: string;
+    /** Full YouTube URL — required. Component will not render if invalid. */
+    videourl: string;
+    /**
+     * Largest size for the video player.
+     * If not set, size is determined automatically by viewport width.
+     */
+    size: "full" | "contained" | "compacted" | "";
+    loading: "lazy" | "eager";
+    /** Time in seconds where playback begins. **/
+    starttime: number;
+    /**
+     * Custom thumbnail image path.
+     * Falls back to YouTube's auto-generated thumbnail if not provided.
+     */
+    thumbnail: string | null;
+    /** Triggers autoplay when the iframe loads */
+    autoplay: boolean;
+    /** Prevents the video from being played */
+    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;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Functions
+     * --------------------------------------------------------------------------
+     */
+    private _updateAutoSize;
+    private _isValidYouTubeUrl;
+    private _getVideoId;
+    private _getThumbnailUrl;
+    private _getEmbedUrl;
+    /**
+     * Event Handlers
+     * --------------------------------------------------------------------------
+     */
+    private _handleThumbnailClick;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/components",
-  "version": "1.16.0-alpha-2",
+  "version": "1.16.0-alpha-3",
   "description": "New York State's design system and code component library.",
   "type": "module",
   "workspaces": [
@@ -20,21 +20,23 @@
       "import": "./dist/nysds.es.js",
       "require": "./dist/nysds.js"
     },
-  "./react": {
-    "import": "./packages/react/index.js",
-    "types": "./packages/react/index.d.ts"
-  }
+    "./react": {
+      "import": "./packages/react/index.js",
+      "types": "./packages/react/index.d.ts"
+    }
   },
   "customElements": "custom-elements.json",
   "scripts": {
     "dev": "vite",
     "gen": "plop",
     "build": "tsc --emitDeclarationOnly && vite build",
-    "build:umd": "tsc --emitDeclarationOnly && vite build --config vite.config.umd.js",
-    "build:packages": "node src/scripts/build-order.js",
-    "build:all": "npm run clean:dist && npm run lint && cross-env NODE_ENV=production npm run build:packages && cross-env NODE_ENV=production npm run build && cross-env NODE_ENV=production npm run build:umd && npm run lit-analyze || true && npm run cem && npm run cem:copy && npm run mcp-server: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: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",
-    "lint": "eslint && stylelint **/*.scss || true",
+    "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",
@@ -46,13 +48,12 @@
     "storybook:build:all": "cross-env NODE_ENV=production npm run build:all && npm run storybook",
     "build-storybook": "npm run build:packages && storybook build",
     "storybook:cibuild": "storybook build",
-    "mcp-server:build": "node src/scripts/build-mcp-server.js",
+    "mcp-server:build": "turbo run build --filter=@nysds/mcp-server",
     "clean:node": "rm -rf node_modules && rm -rf packages/*/node_modules && rm -rf packages/**/*/node_modules",
     "clean:dist": "rm -rf storybook-static && rm -rf coverage && rm -rf packages/*/coverage && rm -rf dist && find packages -type d -name dist ! -path '*/mcp-server/dist' -exec rm -rf {} + 2>/dev/null || true",
-    "clean:all": "npm run clean:dist && npm run clean:node",
+    "clean:all": "npm run clean:dist && npm run clean:node && find packages -name '*.tsbuildinfo' -delete 2>/dev/null || true",
     "code-connect": "dotenv -- npx figma connect publish",
-    "cem": "npx cem analyze --config ./custom-elements-manifest.config.mjs",
-    "cem:copy": "cp ./custom-elements.json dist/"
+    "cem": "npx cem analyze --config ./custom-elements-manifest.config.mjs && cp ./custom-elements.json dist/ && node src/scripts/patch-react-utils.js"
   },
   "repository": {
     "type": "git",
@@ -64,6 +65,7 @@
     "url": "https://github.com/ITS-HCD/nysds/issues"
   },
   "homepage": "https://designsystem.ny.gov/",
+  "packageManager": "npm@11.6.2",
   "devDependencies": {
     "@chromatic-com/storybook": "^5.0.1",
     "@custom-elements-manifest/analyzer": "^0.11.0",
@@ -105,6 +107,7 @@
     "stylelint-config-standard-scss": "^17.0.0",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
+    "turbo": "^2.8.16",
     "vite": "^7.3.1"
   },
   "eslintConfig": {

package/packages/react/README.md

@@ -1,6 +1,6 @@
 # `@nysds/components/react` — Auto-generated React Wrappers
 
-This folder is **fully auto-generated** — do not edit files inside it directly.
+⚠️ This folder is **fully auto-generated** — do not edit files inside it directly!
 Files are regenerated every time `npm run cem` runs, which is called automatically by `npm run build:all`.
 
 ---
@@ -12,11 +12,11 @@ npm run cem
   └─► cem analyze --config custom-elements-manifest.config.mjs
         └─► customElementReactWrapperPlugin  (custom-element-react-wrappers)
               └─► packages/react/
-                    ├── index.js        ← barrel, one export per component
-                    ├── index.d.ts      ← TypeScript types
-                    ├── react-utils.js  ← internal hooks used by wrappers, do not use directly
-                    ├── NysButton.js    ← one file per component
-                    └── … etc.
+                    ├── index.js        <= barrel, one export per component
+                    ├── index.d.ts      <= TypeScript types
+                    ├── react-utils.js  <= auto generated internal hooks used by wrappers, do not use directly
+                    ├── NysButton.js    <= one file per component
+                    └── ...etc.
 ```
 
 The plugin is configured in `custom-elements-manifest.config.mjs` at the repo root.
@@ -81,12 +81,12 @@ React 19 improves web component interop but doesn't bridge custom events to `on*
 ## Repo layout
 
 ```
-custom-elements-manifest.config.mjs  ← plugin configured here
-package.json                         ← "./react" subpath export declared here
+custom-elements-manifest.config.mjs  <= plugin configured here
+package.json                         <= "./react" subpath export declared here
 packages/
-  react/                             ← auto-generated, do not edit
+  react/                             <= auto-generated, do not edit
     index.js
     index.d.ts
     react-utils.js
-    NysButton.js  … etc.
+    NysButton.js  ...etc.
 ```

package/packages/react/index.d.ts

@@ -1,37 +1,37 @@
 export * from "./NysAccordion.js";
 export * from "./NysAccordionItem.js";
 export * from "./NysAvatar.js";
-export * from "./NysBacktotop.js";
-export * from "./NysBadge.js";
 export * from "./NysAlert.js";
+export * from "./NysBadge.js";
+export * from "./NysBacktotop.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 "./NysErrorMessage.js";
-export * from "./NysDatepicker.js";
 export * from "./NysGlobalHeader.js";
 export * from "./NysIcon.js";
-export * from "./NysModal.js";
+export * from "./NysLabel.js";
 export * from "./NysPagination.js";
 export * from "./NysOption.js";
 export * from "./NysSelect.js";
 export * from "./NysSkipnav.js";
-export * from "./NysLabel.js";
-export * from "./NysRadiobutton.js";
-export * from "./NysRadiogroup.js";
 export * from "./NysStep.js";
 export * from "./NysStepper.js";
+export * from "./NysModal.js";
 export * from "./NysTable.js";
-export * from "./NysTooltip.js";
-export * from "./NysToggle.js";
-export * from "./NysUnavFooter.js";
 export * from "./NysTextarea.js";
-export * from "./NysUnavHeader.js";
+export * from "./NysRadiobutton.js";
+export * from "./NysRadiogroup.js";
+export * from "./NysCombobox.js";
+export * from "./NysToggle.js";
 export * from "./NysTextinput.js";
+export * from "./NysTooltip.js";
+export * from "./NysUnavHeader.js";
+export * from "./NysUnavFooter.js";

package/packages/react/index.js

@@ -1,37 +1,37 @@
 export * from "./NysAccordion.js";
 export * from "./NysAccordionItem.js";
 export * from "./NysAvatar.js";
-export * from "./NysBacktotop.js";
-export * from "./NysBadge.js";
 export * from "./NysAlert.js";
+export * from "./NysBadge.js";
+export * from "./NysBacktotop.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 "./NysErrorMessage.js";
-export * from "./NysDatepicker.js";
 export * from "./NysGlobalHeader.js";
 export * from "./NysIcon.js";
-export * from "./NysModal.js";
+export * from "./NysLabel.js";
 export * from "./NysPagination.js";
 export * from "./NysOption.js";
 export * from "./NysSelect.js";
 export * from "./NysSkipnav.js";
-export * from "./NysLabel.js";
-export * from "./NysRadiobutton.js";
-export * from "./NysRadiogroup.js";
 export * from "./NysStep.js";
 export * from "./NysStepper.js";
+export * from "./NysModal.js";
 export * from "./NysTable.js";
-export * from "./NysTooltip.js";
-export * from "./NysToggle.js";
-export * from "./NysUnavFooter.js";
 export * from "./NysTextarea.js";
-export * from "./NysUnavHeader.js";
+export * from "./NysRadiobutton.js";
+export * from "./NysRadiogroup.js";
+export * from "./NysCombobox.js";
+export * from "./NysToggle.js";
 export * from "./NysTextinput.js";
+export * from "./NysTooltip.js";
+export * from "./NysUnavHeader.js";
+export * from "./NysUnavFooter.js";

package/packages/react/react-utils.js

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect } from "react";
+import { useEffect, useRef } from "react";
 
 export function useProperties(targetElement, propName, value) {
   useEffect(() => {
@@ -7,28 +7,36 @@ export function useProperties(targetElement, propName, value) {
       targetElement.current &&
       targetElement.current[propName] !== value
     ) {
-      // add try catch to avoid errors when setting read-only properties
       try {
         targetElement.current[propName] = value;
       } catch (e) {
         console.warn(e);
       }
     }
-  }, [value, targetElement.current]);
+  }, [value, targetElement]);
 }
 
 export function useEventListener(targetElement, eventName, eventHandler) {
-  useLayoutEffect(() => {
-    if (eventHandler !== undefined) {
-      targetElement?.current?.addEventListener(eventName, eventHandler);
-    }
+  // Store the latest handler in a ref so we never need to re-subscribe
+  // just because the consumer passed a new function reference.
+  const savedHandler = useRef(eventHandler);
+  useEffect(() => {
+    savedHandler.current = eventHandler;
+  }, [eventHandler]);
 
-    return () => {
-      if (eventHandler?.cancel) {
-        eventHandler.cancel();
-      }
+  useEffect(() => {
+    const element = targetElement.current;
+    if (!element || eventHandler === undefined) return;
+
+    // Stable wrapper — identity never changes, so add/remove are always paired.
+    const listener = (event) => savedHandler.current(event);
 
-      targetElement?.current?.removeEventListener(eventName, eventHandler);
+    element.addEventListener(eventName, listener);
+
+    return () => {
+      element.removeEventListener(eventName, listener);
     };
-  }, [eventName, eventHandler, targetElement.current]);
+    // Only re-subscribe when the element or event name changes.
+    // Handler changes are handled via the savedHandler ref above.
+  }, [eventName, targetElement]);
 }