Update table classes for consistency

.storybook/assets/example-layout.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Example layout for the Optics design system" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/optics@2.5.0/dist/css/optics.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/optics@2.5.1/dist/css/optics.min.css" />
     <!-- <link rel="stylesheet" href="../src/optics.css" /> Enable this during development to see local changes -->
     <script type="module" src="https://esm.sh/invokers-polyfill"></script>
     <title>Optics Example Layout</title>
@@ -535,7 +535,7 @@ <h3>Timeline with Icons</h3>
             rutrum. Quisque et iaculis lectus.
           </p>
 
-          <table class="table table--auto-layout table--default-density">
+          <table class="table table--layout-auto table--density-default">
             <thead>
               <tr>
                 <th>Movie</th>

.storybook/assets/login-layout.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Example layout for the Optics design system" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/optics@2.5.0/dist/css/optics.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/optics@2.5.1/dist/css/optics.min.css" />
     <!-- <link rel="stylesheet" href="../src/optics.css" /> Enable this during development to see local changes -->
     <title>Optics Login Layout</title>
     <style>

.storybook/assets/spinner-layout.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Example layout for the Optics design system" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/optics@2.5.0/dist/css/optics.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/optics@2.5.1/dist/css/optics.min.css" />
     <!-- <link rel="stylesheet" href="../src/optics.css" /> Enable this during development to see local changes -->
     <title>Optics Spinner Layout</title>
     <style>

CHANGELOG.md

@@ -4,6 +4,29 @@ All notable changes to this project will be documented in this file.
 
 This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.5.1] - 2026-10-01
+
+### Component Changes
+
+- Update table classes for consistency by @Jeremy-Walton in https://github.com/RoleModel/optics/pull/364
+  - The table modifiers now put the modifier name before its value: `.table--layout-auto`, `.table--layout-fixed`, `.table--density-default`, `.table--density-comfortable`, `.table--density-compact`, `.table--striped-even` and `.table--striped-odd`. The old names (such as `.table--comfortable-density`) still work, so no change is needed.
+
+### Dependencies
+
+- Bump brace-expansion from 1.1.16 to 1.1.21 by @dependabot[bot] in https://github.com/RoleModel/optics/pull/361
+  - A development dependency was updated in the lockfile. It does not affect the shipped CSS.
+- Bump undici from 7.29.0 to 7.30.0 by @dependabot[bot] in https://github.com/RoleModel/optics/pull/362
+  - A development dependency was updated in the lockfile. It does not affect the shipped CSS.
+
+### Repository Changes
+
+- Add a github-release skill by @dallasbpeters in https://github.com/RoleModel/optics/pull/360
+  - Added a Claude Code skill that runs the same release steps every time.
+- Publish to npm with Trusted Publishing by @dallasbpeters in https://github.com/RoleModel/optics/pull/363
+  - The package is now published to npm with Trusted Publishing, so no npm token is stored. Each published version now has provenance, which shows the GitHub workflow that built it.
+
+**Full Changelog**: https://github.com/RoleModel/optics/compare/v2.5.0...v2.5.1
+
 ## [2.5.0] - 2026-09-30
 
 ### Component Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolemodel/optics",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "packageManager": "yarn@4.8.1",
   "description": "Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.",
   "main": "dist/css/optics.css",

src/components/table.css

@@ -81,35 +81,45 @@
   }
 
   /* Layout Modifiers */
+  /* The *-layout names are kept for backwards compatibility */
+  &.table--layout-auto,
   &.table--auto-layout {
     table-layout: auto;
   }
 
+  &.table--layout-fixed,
   &.table--fixed-layout {
     table-layout: fixed;
   }
 
   /* Table Density Modifiers */
+  /* The *-density names are kept for backwards compatibility */
+  &.table--density-default,
   &.table--default-density {
     --__op-table-cell-height: var(--_op-table-cell-height-default);
   }
 
+  &.table--density-comfortable,
   &.table--comfortable-density {
     --__op-table-cell-height: var(--_op-table-cell-height-comfortable);
   }
 
+  &.table--density-compact,
   &.table--compact-density {
     --__op-table-cell-height: var(--_op-table-cell-height-compact);
   }
 
   /* Striped Modifiers */
+  /* The *-striped names are kept for backwards compatibility */
+  &.table--striped-even,
   &.table--even-striped {
     tbody tr:nth-child(even) {
       background-color: var(--op-color-neutral-plus-seven);
       color: var(--op-color-neutral-on-plus-seven);
     }
   }
 
+  &.table--striped-odd,
   &.table--odd-striped {
     tbody tr:nth-child(odd) {
       background-color: var(--op-color-neutral-plus-seven);

src/stories/Components/Table/Table.js

@@ -26,9 +26,9 @@ export const createTable = ({
   table.className = [
     'table',
     style !== 'default' ? `table--${style}` : '',
-    `table--${layout}-layout`,
-    `table--${density}-density`,
-    striped === 'off' ? '' : `table--${striped}-striped`,
+    `table--layout-${layout}`,
+    `table--density-${density}`,
+    striped === 'off' ? '' : `table--striped-${striped}`,
     stickyClass,
   ]
     .filter(Boolean)

src/stories/Components/Table/Table.mdx

@@ -56,21 +56,21 @@ Table can be used as a standalone component, however, it does have a few depende
 
 ### Layout
 
-`.table.table--auto-layout`, `.table.table--fixed-layout` (with auto being the default) modify the table layout. Auto will adjust according to the contents, fixed will evenly divide based on the amount of columns.
+`.table.table--layout-auto`, `.table.table--layout-fixed` (with auto being the default) modify the table layout. Auto will adjust according to the contents, fixed will evenly divide based on the amount of columns.
 
 <Canvas of={TableStories.FixedLayout} />
 
 ### Density
 
-`.table.table--default-density`, `.table.table--comfortable-density`, `.table.table--compact-density` (with default being the default) modify the table cell padding to expand or contract how much space they use.
+`.table.table--density-default`, `.table.table--density-comfortable`, `.table.table--density-compact` (with default being the default) modify the table cell padding to expand or contract how much space they use.
 
 <Canvas of={TableStories.ComfortableDensity} />
 
 <Canvas of={TableStories.CompactDensity} />
 
 ### Striping
 
-`.table.table--even-striped`, `.table.table--odd-striped` color every other (odd or even) row with a light color on the neutral scale.
+`.table.table--striped-even`, `.table.table--striped-odd` color every other (odd or even) row with a light color on the neutral scale.
 
 <Canvas of={TableStories.StripedEven} />