Release/14.0.0

.changeset/calm-weeks-own.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': minor
+---
+
+Add elevation style to modal component

.changeset/chilled-lizards-ring.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': patch
+---
+
+Add ability to use a11y-disabled and maintain default disabled styling

.changeset/cold-jeans-fail.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': major
+---
+
+Update Toaster to use internally consistent component scoping

.changeset/eight-dots-cry.md

@@ -0,0 +1,6 @@
+---
+'@ithaka/pharos': major
+'@ithaka/pharos-site': major
+---
+
+Use is-on-background in place of on-background

.changeset/eleven-spoons-shop.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': patch
+---
+
+Remove deprecated onBackground attribute from sidenav storybook story

.changeset/five-moles-add.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': major
+---
+
+Remove `paint` value of contain property globally

.changeset/flat-clocks-brush.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': minor
+---
+
+Add default elevation and remove border from combobox component

.changeset/gorgeous-months-vanish.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': major
+---
+
+remove sidenav button, add consumer controls

.changeset/kind-cows-mix.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': patch
+---
+
+Update storybook stories to work with new sidenav display logic

.changeset/light-paws-listen.md

@@ -0,0 +1,7 @@
+---
+'@ithaka/pharos': patch
+'@ithaka/pharos-site': patch
+'@ithaka/pharos-cli': patch
+---
+
+Update onBackground prop to isOnBackground

.changeset/long-hotels-allow.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': major
+---
+
+Update all use of label attribute to a11y-label

.changeset/mighty-planes-poke.md

@@ -0,0 +1,7 @@
+---
+'@ithaka/pharos': major
+---
+
+Add additional ARIA attributes for Pharos button
+and use a new naming convention for these specific
+pharos attributes.

.changeset/perfect-cycles-drum.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': major
+---
+
+pharos-tab `selected` has been deprecated, see new property for pharos-tabs `selected-tab`

.changeset/pink-ties-tell.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': minor
+---
+
+Update popover component elevation to use design token

.changeset/quiet-garlics-compete.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': minor
+---
+
+Add default elevation and remove border from dropdown-menu

.changeset/sharp-kings-move.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': patch
+---
+
+Updates the Link to use a11yLabel values within Storybook

.changeset/sweet-singers-arrive.md

@@ -0,0 +1,6 @@
+---
+'@ithaka/pharos': major
+'@ithaka/pharos-site': major
+---
+
+individual file exports are no longer supported, import files based on the exports defined in the package.json

.changeset/thick-planes-wink.md

@@ -0,0 +1,6 @@
+---
+'@ithaka/pharos': major
+'@ithaka/pharos-site': major
+---
+
+Remove deprecated Google Translate widget

.changeset/thirty-carrots-suffer.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': patch
+---
+
+Require all icons to have a label or be explicitly hidden

.changeset/tough-buckets-press.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': major
+---
+
+Require an a11y-label for icon buttons

.changeset/weak-berries-hunt.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': major
+---
+
+Remove overflow-y from pharos-tabs tab panels

.storybook/initComponents.js

@@ -11,6 +11,7 @@ import {
   PharosDropdownMenuItem,
   PharosDropdownMenuNav,
   PharosDropdownMenuNavLink,
+  PharosDropdownMenuNavCategory,
   PharosFooter,
   PharosHeader,
   PharosHeading,
@@ -30,7 +31,6 @@ import {
   PharosSelect,
   PharosSheet,
   PharosSidenav,
-  PharosSidenavButton,
   PharosSidenavLink,
   PharosSidenavMenu,
   PharosSidenavSection,
@@ -61,6 +61,7 @@ registerComponents('storybook', [
   PharosDropdownMenuItem,
   PharosDropdownMenuNav,
   PharosDropdownMenuNavLink,
+  PharosDropdownMenuNavCategory,
   PharosFooter,
   PharosHeader,
   PharosHeading,
@@ -80,7 +81,6 @@ registerComponents('storybook', [
   PharosSelect,
   PharosSheet,
   PharosSidenav,
-  PharosSidenavButton,
   PharosSidenavLink,
   PharosSidenavMenu,
   PharosSidenavSection,

docs/architecture/decisions/0009-create-explicit-minimally-exhaustive-accessibility-properties-for-components.md

@@ -21,21 +21,15 @@ Create an (enforced) convention of property names that, when supplied at the cus
 When a custom element has a a11y-\* attribute, that attribute gets passed down to the appropriate (as decided on a per-component basis) underlying native element.
 
 ```html
-<pharos-button a11y-aria-describedby="the-tooltip">
-    Click me
-</pharos-button>
+<pharos-button a11y-aria-describedby="the-tooltip"> Click me </pharos-button>
 
-<pharos-tooltip id="the-tooltip">
-    I am a tooltip
-</pharos-tooltip>
+<pharos-tooltip id="the-tooltip"> I am a tooltip </pharos-tooltip>
 ```
 
 The button’s shadow DOM would then look like:
 
 ```html
-<button aria-describedby="the-tooltip">
-    Click me
-</button>
+<button aria-describedby="the-tooltip">Click me</button>
 ```
 
 Shorter attribute names could have been used for brevity, but we should in general avoid possible conflicts with valid HTML5 attribute names.

package.json

@@ -66,16 +66,16 @@
     "@commitlint/config-conventional": "^15.0.0",
     "@emotion/babel-plugin": "^11.9.2",
     "@size-limit/preset-small-lib": "^7.0.4",
-    "@storybook/addon-a11y": "^7.2.1",
-    "@storybook/addon-essentials": "^7.2.1",
-    "@storybook/addon-links": "^7.2.1",
+    "@storybook/addon-a11y": "^7.3.2",
+    "@storybook/addon-essentials": "^7.3.2",
+    "@storybook/addon-links": "^7.3.2",
     "@storybook/addon-styling": "^1.3.5",
-    "@storybook/blocks": "^7.2.1",
-    "@storybook/manager-api": "^7.2.1",
-    "@storybook/react-vite": "^7.2.1",
-    "@storybook/theming": "^7.2.1",
-    "@storybook/web-components": "^7.2.1",
-    "@storybook/web-components-vite": "^7.2.1",
+    "@storybook/blocks": "^7.3.2",
+    "@storybook/manager-api": "^7.3.2",
+    "@storybook/react-vite": "^7.3.2",
+    "@storybook/theming": "^7.3.2",
+    "@storybook/web-components": "^7.3.2",
+    "@storybook/web-components-vite": "^7.3.2",
     "@types/uuid": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
@@ -108,7 +108,7 @@
     "react-dom": "^17.0.0",
     "sass": "^1.63.6",
     "size-limit": "^7.0.4",
-    "storybook": "^7.2.1",
+    "storybook": "^7.3.2",
     "stylelint": "^15.10.1",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-standard-scss": "^10.0.0",

packages/pharos-site/initComponents.tsx

@@ -16,6 +16,7 @@ if (typeof window !== `undefined`) {
     pharos.PharosDropdownMenuItem,
     pharos.PharosDropdownMenuNav,
     pharos.PharosDropdownMenuNavLink,
+    pharos.PharosDropdownMenuNavCategory,
     pharos.PharosFooter,
     pharos.PharosHeader,
     pharos.PharosHeading,
@@ -33,7 +34,6 @@ if (typeof window !== `undefined`) {
     pharos.PharosRadioGroup,
     pharos.PharosSelect,
     pharos.PharosSidenav,
-    pharos.PharosSidenavButton,
     pharos.PharosSidenavLink,
     pharos.PharosSidenavMenu,
     pharos.PharosSidenavSection,

packages/pharos-site/src/components/layout.tsx

@@ -37,12 +37,11 @@ const Layout: FC<LayoutProps> = ({ children, location, fill }) => {
   const [MainContent, setMainContent] = useState<ReactElement | null>(null);
 
   useEffect(() => {
-    const { PharosSidenavButton, PharosLink, PharosLayout } = Pharos;
+    const { PharosLink, PharosLayout } = Pharos;
 
     const body = (
       <main className={main}>
         <div className={topBar}>
-          <PharosSidenavButton onBackground />
           <PharosLink id="skip-link" skip href="#sidenav-skip-link" onBackground>
             Skip to main navigation
           </PharosLink>

packages/pharos-site/src/components/statics/color/ColorCombos.tsx

@@ -1,6 +1,6 @@
 import type { FC, CSSProperties } from 'react';
 import { colorBox } from './ColorCombos.module.css';
-import tokens from '@ithaka/pharos/lib/styles/tokens.js';
+import tokens from '@ithaka/pharos/lib/styles/tokens';
 import CrossOut from '../CrossOut';
 import { toTitleCase } from '../../../utils/textConvert';
 

packages/pharos-site/src/components/statics/color/ColorGradients.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import type { FC, ReactElement } from 'react';
-import tokens from '@ithaka/pharos/lib/styles/tokens.js';
+import tokens from '@ithaka/pharos/lib/styles/tokens';
 import { colorGradient, gradientLabel, gradientContainer } from './ColorGradients.module.css';
 
 interface Gradient {

packages/pharos-site/src/components/statics/color/ColorSwatches.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import type { FC, ReactElement, CSSProperties } from 'react';
-import tokens from '@ithaka/pharos/lib/styles/tokens.js';
+import tokens from '@ithaka/pharos/lib/styles/tokens';
 import {
   figure,
   colorSwatch,

packages/pharos-site/src/components/statics/color/ColorTextSquares.tsx

@@ -1,6 +1,6 @@
 import type { FC, CSSProperties } from 'react';
 import { container, container_text } from './ColorTextSquares.module.css';
-import tokens from '@ithaka/pharos/lib/styles/tokens.js';
+import tokens from '@ithaka/pharos/lib/styles/tokens';
 import { toTitleCase } from '../../../utils/textConvert';
 
 interface ColorTextSquaresProps {

packages/pharos-site/static/guidelines/button.docs.mdx

@@ -314,8 +314,8 @@ import ellipsesExample from '@images/components/button/buttons_ellipses-example.
   <PageSection title="Buttons on dark background" subSectionLevel={1}>
     <p>
       When a button is used on a darker background (e.g., black or marble-gray-20), use the
-      on-background attribute. The four variants described above can all be used on dark backgrounds
-      and follow the same guidelines.
+      is-on-background attribute. The four variants described above can all be used on dark
+      backgrounds and follow the same guidelines.
     </p>
     <div
       style={{

packages/pharos-site/static/guidelines/footer.docs.mdx

@@ -354,7 +354,6 @@ import BestPractices from '@components/statics/BestPractices.tsx';
       </PharosLink>
     </li>
   </ul>
-  <div slot="google-widget" id="google_translate_element" aria-hidden="true"></div>
 </PharosFooter>
 ```
 

packages/pharos/package.json

@@ -90,5 +90,20 @@
     "ts-lit-plugin": "^1.2.1",
     "typescript": "^5.2.2"
   },
-  "customElements": "custom-elements.json"
+  "customElements": "custom-elements.json",
+  "exports": {
+    ".": "./lib/index.js",
+    "./lib": "./lib/index.js",
+    "./lib/index": "./lib/index.js",
+    "./lib/react-components": "./lib/react-components/index.js",
+    "./lib/styles/*": "./lib/styles/*.js",
+    "./lib/styles/*.css": "./lib/styles/*.css",
+    "./lib/styles/*.scss": "./lib/styles/*.scss",
+    "./lib/styles/pharos": "./lib/styles/pharos.scss",
+    "./lib/utils/scss/mixins": "./lib/utils/scss/_mixins.scss",
+    "./lib/utils/registerComponents": "./lib/utils/registerComponents.js",
+    "./lib/utils/PharosContext": "./lib/utils/PharosContext.js",
+    "./package.json": "./package.json",
+    "./custom-elements.json": "./custom-elements.json"
+  }
 }

packages/pharos/src/components/alert/pharos-alert.test.ts

@@ -39,7 +39,6 @@ describe('pharos-alert', () => {
           class="alert__icon"
           data-pharos-component="PharosIcon"
           a11y-hidden="true"
-          description=""
           name="info-inverse"
         >
         </pharos-icon>

packages/pharos/src/components/base/form-element.scss

@@ -51,7 +51,7 @@ $groupable-elements: radio-element checkbox-element;
     @include mixins.hidden;
   }
 
-  :host([on-background]) label[for='#{$element}'] {
+  :host([is-on-background]) label[for='#{$element}'] {
     color: var(--pharos-color-text-white);
   }