@newhighsco/chipset 6.17.5 → 6.18.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@newhighsco/chipset",
   "description": "Shareable, theme-able component library by New High Score",
-  "version": "6.17.5",
+  "version": "6.18.0",
   "author": "New High Score",
   "license": "ISC",
   "repository": {
@@ -28,6 +28,7 @@
     "test": "jest --runInBand",
     "test:list": "jest --listTests",
     "snapshot": "chromatic --storybook-build-dir build --auto-accept-changes main --exit-once-uploaded --only-changed",
+    "analyze": "omlet analyze",
     "lint": "concurrently yarn:lint:*",
     "lint:js": "eslint --cache --ignore-path .gitignore .",
     "lint:css": "stylelint --cache --ignore-path .gitignore '**/*.?(s)css'",
@@ -49,38 +50,39 @@
     "@newhighsco/browserslist-config": "2.0.0",
     "@newhighsco/commitlint-config": "1.1.46",
     "@newhighsco/editor-config": "1.2.0",
-    "@newhighsco/eslint-config": "4.1.39",
-    "@newhighsco/postcss-config": "3.5.339",
+    "@newhighsco/eslint-config": "4.1.43",
+    "@newhighsco/postcss-config": "3.5.341",
     "@newhighsco/prettier-config": "2.1.32",
     "@newhighsco/release-config": "1.4.6",
-    "@newhighsco/storybook-preset": "7.0.145",
+    "@newhighsco/storybook-preset": "7.1.1",
     "@newhighsco/stylelint-config": "4.0.17",
+    "@omlet/cli": "2.0.0",
     "@storybook/react-webpack5": "8.6.14",
-    "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.6.4",
     "@testing-library/react": "16.3.0",
     "babel-loader": "10.0.0",
-    "chromatic": "13.1.2",
+    "chromatic": "13.1.3",
     "concurrently": "9.2.0",
     "eslint": "8.57.1",
     "husky": "9.1.7",
     "identity-obj-proxy": "3.0.0",
-    "jest": "30.0.4",
-    "jest-environment-jsdom": "30.0.4",
+    "jest": "30.0.5",
+    "jest-environment-jsdom": "30.0.5",
     "jest-junit": "16.0.0",
     "postcss": "8.5.6",
     "prettier": "3.6.2",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
     "sass-true": "9.0.0",
     "semantic-release": "24.2.7",
     "storybook": "8.6.14",
-    "stylelint": "16.21.1",
-    "webpack": "5.100.2"
+    "stylelint": "16.23.1",
+    "webpack": "5.101.0"
   },
   "peerDependencies": {
-    "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react": "19.1.1",
+    "react-dom": "19.1.1"
   },
   "browserslist": [
     "extends @newhighsco/browserslist-config"
@@ -95,6 +97,14 @@
       "@newhighsco/eslint-config"
     ]
   },
+  "omlet": {
+    "exports": {
+      ".": "src/index.js"
+    },
+    "ignore": [
+      "example/**"
+    ]
+  },
   "prettier": "@newhighsco/prettier-config",
   "release": {
     "extends": "@newhighsco/release-config",

package/src/components/Backdrop/Backdrop.jsx

@@ -1,7 +1,7 @@
-import classNames from 'classnames'
 import { node, string } from 'prop-types'
 import React from 'react'
 
+import { classNames } from '../../utils'
 import Element from '../Element'
 import styles from './Backdrop.module.scss'
 

package/src/components/Button/Button.jsx

@@ -1,7 +1,7 @@
-import classNames from 'classnames'
 import { bool, func, node, object, oneOfType, shape, string } from 'prop-types'
 import React from 'react'
 
+import { classNames } from '../../utils'
 import SmartLink from '../SmartLink'
 
 const Button = ({ active, children, theme, className, setRef, ...rest }) => {

package/src/components/Button/ButtonGroup.jsx

@@ -1,7 +1,8 @@
-import classNames from 'classnames'
 import { node, shape, string } from 'prop-types'
 import React from 'react'
 
+import { classNames } from '../../utils'
+
 const ButtonGroup = ({ children, theme, className }) => {
   if (!children) return null
 

package/src/components/Card/Card.jsx

@@ -1,4 +1,3 @@
-import classNames from 'classnames'
 import {
   func,
   node,
@@ -10,6 +9,7 @@ import {
 } from 'prop-types'
 import React from 'react'
 
+import { classNames } from '../../utils'
 import CardHeading from './CardHeading'
 import CardImage from './CardImage'
 

package/src/components/ContentContainer/ContentContainer.jsx

@@ -1,7 +1,7 @@
-import classNames from 'classnames'
 import { bool, node, shape, string } from 'prop-types'
 import React from 'react'
 
+import { classNames } from '../../utils'
 import Element from '../Element'
 
 /**

package/src/components/CreditLockup/CreditLockup.module.scss

@@ -8,7 +8,6 @@
 .logo {
   $credit-content-margin: functions.spacing(1);
 
-  fill: currentColor;
   margin-right: $credit-content-margin;
   vertical-align: top;
   width: 50px;

package/src/components/Grid/Grid.jsx

@@ -1,7 +1,8 @@
-import classNames from 'classnames'
 import { bool, node, oneOf, shape, string } from 'prop-types'
 import React from 'react'
 
+import { classNames } from '../../utils'
+
 /**
  * `Grid` provides  a simple `inline-block` based responsive grid
  */

package/src/components/Grid/GridItem.jsx

@@ -1,7 +1,8 @@
-import classNames from 'classnames'
 import { arrayOf, node, oneOf, oneOfType, shape, string } from 'prop-types'
 import React from 'react'
 
+import { classNames } from '../../utils'
+
 const GridItem = ({ sizes, children, theme, className, ...rest }) => {
   if (!children) return null
 

package/src/components/Icon/Icon.jsx

@@ -1,7 +1,7 @@
-import classNames from 'classnames'
 import { node, number, oneOfType, shape, string } from 'prop-types'
 import React from 'react'
 
+import { classNames } from '../../utils'
 import VisuallyHidden from '../VisuallyHidden'
 
 /**

package/src/components/Icon/Icon.module.scss

@@ -1,5 +1,6 @@
 .root {
   display: inline-block;
+  fill: currentColor;
   vertical-align: middle;
   font-style: normal;
   width: 1em;

package/src/components/List/List.jsx

@@ -1,7 +1,7 @@
-import classNames from 'classnames'
 import { bool, node, oneOf, shape, string } from 'prop-types'
 import React from 'react'
 
+import { classNames } from '../../utils'
 import Element from '../Element'
 
 const List = ({

package/src/components/LiveStream/LiveStream.jsx

@@ -1,7 +1,7 @@
-import classNames from 'classnames'
 import { bool, shape, string } from 'prop-types'
 import React, { useEffect, useState } from 'react'
 
+import { classNames } from '../../utils'
 import Grid from '../Grid'
 import ResponsiveMedia from '../ResponsiveMedia'
 import VisuallyHidden from '../VisuallyHidden'

package/src/components/Navigation/Navigation.jsx

@@ -1,8 +1,8 @@
-import classNames from 'classnames'
 import { array, bool, func, shape, string } from 'prop-types'
 import React from 'react'
 
-import { useToggle } from '../../hooks'
+import { useIds, useToggle } from '../../hooks'
+import { classNames } from '../../utils'
 import Button from '../Button'
 import Icon from '../Icon'
 import List from '../List'
@@ -22,6 +22,7 @@ const Navigation = ({
   className
 }) => {
   const [visible, setVisibility] = useToggle(!toggle)
+  const [titleId, menuId] = useIds(['title', 'menu'])
 
   if (!links.length) return null
 
@@ -31,11 +32,18 @@ const Navigation = ({
   }
 
   return (
-    <nav role="navigation" className={classNames(theme?.root, className)}>
-      <VisuallyHidden as="h2">{title}</VisuallyHidden>
+    <nav
+      aria-labelledby={titleId}
+      role="navigation"
+      className={classNames(theme?.root, className)}
+    >
+      <VisuallyHidden as="h2" id={titleId}>
+        {title}
+      </VisuallyHidden>
       {toggle && (
         <Button
           active={visible}
+          aria-controls={menuId}
           aria-expanded={visible}
           onClick={toggleVisibility}
           theme={{ root: theme?.toggle, active: theme?.toggleActive }}
@@ -49,6 +57,7 @@ const Navigation = ({
         </Button>
       )}
       <List
+        id={menuId}
         role="menubar"
         unstyled
         inline={inline}

package/src/components/Prose/Prose.jsx

@@ -1,7 +1,8 @@
-import classNames from 'classnames'
 import { node, shape, string } from 'prop-types'
 import React from 'react'
 
+import { classNames } from '../../utils'
+
 const Prose = ({ html, children, theme, className, ...rest }) => {
   if (!html && !children) return null
 

package/src/components/SiteContainer/SiteContainer.jsx

@@ -1,7 +1,7 @@
-import classNames from 'classnames'
 import { node, shape, string } from 'prop-types'
 import React from 'react'
 
+import { classNames } from '../../utils'
 import Element from '../Element'
 
 /**

package/src/components/Tooltip/Tooltip.jsx

@@ -1,8 +1,8 @@
-import classNames from 'classnames'
 import { bool, node, oneOf, shape, string } from 'prop-types'
 import React from 'react'
 
 import { useToggle } from '../../hooks'
+import { classNames } from '../../utils'
 import SmartLink from '../SmartLink'
 
 /**

package/src/hooks/index.js

@@ -1 +1,2 @@
+export { useIds } from './use-ids'
 export { useToggle } from './use-toggle'

package/src/hooks/use-ids.js

@@ -0,0 +1,7 @@
+import { useId } from 'react'
+
+export const useIds = (elements = []) => {
+  const id = useId()
+
+  return elements.map(element => [id, element].join('-'))
+}

package/src/utils/class-names.js

@@ -0,0 +1,6 @@
+import classnames from 'classnames/dedupe'
+
+export const classNames = (...args) =>
+  classnames(...args)
+    .replace(undefined, '')
+    .trim()

package/src/utils/index.js

@@ -1 +1,2 @@
 export { absoluteUrl } from './absolute-url'
+export { classNames } from './class-names'