@rolemodel/optics 2.2.0 → 2.3.1

package/.github/pull_request_template.md

@@ -34,6 +34,9 @@ Cross out all that don't apply with ~~ ~~ around it like ~~this~~
   - [ ] Have you updated the dependency graph?
   - [ ] Have you updated the docs?
 - [ ] Do you need to update the package version?
+  - [ ] Did you update the example pages in `.storybook/assets`?
+- [ ] Were any changes made to the top level optics.css file?
+  - [ ] Were those changes reflected in the other top level files?
 
 ## Screenshots
 

package/.github/workflows/deploy-to-ghp.yml

@@ -0,0 +1,20 @@
+name: Deploy to GHP
+
+on:
+  workflow_dispatch:
+  release:
+    types: [published]
+jobs:
+  build-gph:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '24.x'
+          registry-url: 'https://npm.pkg.github.com/'
+      - run: yarn install --immutable
+      - run: yarn build
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

package/.github/workflows/{release-package.yml → deploy-to-npm.yml}

@@ -1,9 +1,11 @@
-name: Deploy to NPM and GHP
+name: Deploy to NPM
 
 on:
+  workflow_dispatch:
   release:
     types: [published]
-
+permissions:
+  contents: write
 jobs:
   build-npm:
     runs-on: ubuntu-latest
@@ -18,16 +20,3 @@ jobs:
       - run: npm publish --access public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-  build-gph:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: '24.x'
-          registry-url: https://npm.pkg.github.com/
-      - run: yarn install --immutable
-      - run: yarn build
-      - run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

package/.github/workflows/linting.yml

@@ -7,7 +7,8 @@ on:
     branches: ['main']
   pull_request:
     branches: ['main']
-
+permissions:
+  contents: read
 jobs:
   build:
     name: Run linters and check build scripts

package/.github/workflows/publish-storybook.yml

@@ -4,7 +4,8 @@ on:
   workflow_dispatch:
   release:
     types: [created]
-
+permissions:
+  contents: write
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest

package/.stylelintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["stylelint-config-idiomatic-order"],
-  "plugins": ["stylelint-prettier"],
+  "plugins": ["stylelint-prettier", "stylelint-use-logical"],
   "overrides": [],
   "rules": {
     "prettier/prettier": true,
@@ -10,6 +10,7 @@
         "message": "CSS variables should be prefixed with op-"
       }
     ],
-    "selector-class-pattern": null
+    "selector-class-pattern": null,
+    "csstools/use-logical": "always"
   }
 }

package/build_token_json.js

@@ -108,16 +108,17 @@ function addToJson(keys, data, value) {
 }
 
 try {
-  const arguments = {}
+  const parsedArgs = {}
+
   process.argv.forEach((argument) => {
     const values = argument.slice(2).split('=')
     if (values.length === 2) {
-      arguments[values[0]] = values[1]
+      parsedArgs[values[0]] = values[1]
     }
   })
 
-  const source = arguments['source'] || 'src/core/tokens'
-  const output = arguments['output'] || './dist/tokens'
+  const source = parsedArgs['source'] || 'src/core/tokens'
+  const output = parsedArgs['output'] || './dist/tokens'
   const outputPath = path.dirname(output)
   const outputFile = path.basename(output)
 

package/dist/css/addons/panel.css

@@ -3,10 +3,10 @@
 
   position: absolute;
   z-index: var(--op-z-index-sidebar);
-  width: var(--op-panel-width);
-  height: 100vh;
   background-color: var(--op-color-background);
+  block-size: 100vh;
   color: var(--op-color-on-background);
+  inline-size: var(--op-panel-width);
   inset-inline-end: calc(-1 * var(--op-panel-width)); /* this pushes the panel off the screen to the right */
   overflow-y: scroll;
   padding-block-end: var(--op-space-large);
@@ -23,7 +23,7 @@
   padding: var(--op-space-medium);
   border-radius: 100%;
   cursor: pointer;
-  float: right;
+  float: inline-end;
 
   &:hover {
     background-color: var(--op-color-neutral-plus-seven);

package/dist/css/addons/tom-select.css

@@ -2,7 +2,6 @@
 .ts-wrapper {
   /* Control */
   .ts-control {
-    min-height: var(--op-input-height-large);
     align-items: center;
     border: none;
     border-radius: var(--op-radius-large);
@@ -12,13 +11,14 @@
     font-size: var(--op-font-x-small);
     font-weight: var(--op-font-weight-light);
     line-height: var(--op-line-height-base);
+    min-block-size: var(--op-input-height-large);
   }
 
   /* Active control */
   &.dropdown-active {
     .ts-control {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
+      border-end-end-radius: 0;
+      border-end-start-radius: 0;
     }
   }
 
@@ -26,8 +26,8 @@
   .ts-dropdown {
     border: none;
     margin: 0;
-    border-bottom-left-radius: var(--op-radius-large);
-    border-bottom-right-radius: var(--op-radius-large);
+    border-end-end-radius: var(--op-radius-large);
+    border-end-start-radius: var(--op-radius-large);
     box-shadow: var(--op-border-all) var(--op-color-border);
     contain: paint;
 

package/dist/css/components/accordion.css

@@ -9,11 +9,11 @@
 
   summary {
     display: grid;
-    min-height: var(--_op-accordion-summary-min-height);
     align-items: center;
     cursor: pointer;
     gap: var(--op-space-2x-small);
     grid-template-columns: auto 1fr auto;
+    min-block-size: var(--_op-accordion-summary-min-height);
 
     &::marker,
     &::-webkit-details-marker {
@@ -38,7 +38,7 @@
   }
 
   &::details-content {
-    height: 0;
+    block-size: 0;
     transition: var(--op-transition-accordion-content);
   }
 
@@ -48,7 +48,7 @@
     }
 
     &::details-content {
-      height: auto;
+      block-size: auto;
     }
   }
 

package/dist/css/components/alert.css

@@ -36,9 +36,9 @@
   &.alert--flash {
     position: fixed;
     z-index: var(--op-z-index-alert-group);
-    top: var(--op-space-large);
-    right: var(--op-space-large);
     animation: var(--op-animation-flash);
+    inset-block-start: var(--op-space-large);
+    inset-inline-end: var(--op-space-large);
   }
 
   &.alert--warning {

package/dist/css/components/avatar.css

@@ -18,11 +18,11 @@
   z-index: 1;
   display: block;
   overflow: hidden;
-  width: var(--__op-avatar-size);
-  min-width: var(--__op-avatar-size);
-  height: var(--__op-avatar-size);
-  min-height: var(--__op-avatar-size);
   border-radius: var(--_op-avatar-border-radius);
+  block-size: var(--__op-avatar-size);
+  inline-size: var(--__op-avatar-size);
+  min-block-size: var(--__op-avatar-size);
+  min-inline-size: var(--__op-avatar-size);
 
   &::before {
     position: absolute;
@@ -43,8 +43,8 @@
   }
 
   img {
-    width: 100%;
-    height: 100%;
+    block-size: 100%;
+    inline-size: 100%;
     object-fit: cover;
   }
 

package/dist/css/components/button.css

@@ -16,7 +16,6 @@
   --__op-btn-padding: var(--_op-btn-padding-large);
 
   display: inline-flex;
-  min-height: var(--__op-btn-height);
   align-items: center;
   justify-content: center;
   padding: var(--__op-btn-padding);
@@ -29,6 +28,7 @@
   font-size: var(--__op-btn-font-size);
   font-weight: var(--op-font-weight-normal);
   gap: var(--op-space-x-small);
+  min-block-size: var(--__op-btn-height);
   text-align: center;
   text-decoration: none;
   transition: var(--op-transition-input);
@@ -92,9 +92,9 @@
 
   /* Icon Modifier */
   &.btn--icon {
-    width: var(--__op-btn-height);
-    min-width: var(--__op-btn-height);
     padding: 0;
+    inline-size: var(--__op-btn-height);
+    min-inline-size: var(--__op-btn-height);
   }
 
   /* Icon With Label Modifier */

package/dist/css/components/button_group.css

@@ -30,13 +30,13 @@
     }
 
     &:first-child:not(:last-child) {
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
+      border-end-end-radius: 0;
+      border-start-end-radius: 0;
     }
 
     &:last-child:not(:first-child) {
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
+      border-end-start-radius: 0;
+      border-start-start-radius: 0;
     }
   }
 }

package/dist/css/components/card.css

@@ -50,8 +50,8 @@
   }
 
   .card__header {
-    border-top-left-radius: var(--_op-card-radius);
-    border-top-right-radius: var(--_op-card-radius);
+    border-start-end-radius: var(--_op-card-radius);
+    border-start-start-radius: var(--_op-card-radius);
 
     h1,
     h2,
@@ -64,7 +64,7 @@
   }
 
   .card__footer {
-    border-bottom-left-radius: var(--_op-card-radius);
-    border-bottom-right-radius: var(--_op-card-radius);
+    border-end-end-radius: var(--_op-card-radius);
+    border-end-start-radius: var(--_op-card-radius);
   }
 }

package/dist/css/components/confirm-dialog.css

@@ -44,13 +44,13 @@
   --_op-confirm-dialog-width: calc(100 * var(--op-size-unit)); /* 400px */
 
   z-index: var(--op-z-index-dialog-content);
-  width: var(--_op-confirm-dialog-width);
   border-radius: var(--op-radius-medium);
   background-color: var(--op-color-background);
   box-shadow: var(--op-border-all) var(--op-color-border);
   color: var(--op-color-on-background);
   contain: paint;
   font-size: var(--op-font-medium);
+  inline-size: var(--_op-confirm-dialog-width);
   line-height: var(--op-line-height-base);
   opacity: var(--op-opacity-none);
   transform: scale(0.7);

package/dist/css/components/divider.css

@@ -11,12 +11,12 @@
   /* Private API (component option defaults) */
   --__op-divider-height: var(--_op-divider-height-small);
   --__op-divider-padding: 0;
-
-  width: 100%;
-  height: var(--__op-divider-height);
   background-color: var(--op-color-border);
+  block-size: var(--__op-divider-height);
+  inline-size: 100%;
   margin-block: var(--__op-divider-padding);
   margin-inline: 0;
+  min-block-size: var(--__op-divider-height);
 
   /* Size Modifiers */
   &.divider--small {
@@ -46,10 +46,11 @@
 
   /* Direction Modifier */
   &.divider--vertical {
-    width: var(--__op-divider-height);
-    height: 100%;
-    min-height: var(--_op-divider-vertical-min-height);
+    block-size: 100%;
+    inline-size: var(--__op-divider-height);
     margin-block: 0;
     margin-inline: var(--__op-divider-padding);
+    min-block-size: var(--_op-divider-vertical-min-height);
+    min-inline-size: var(--__op-divider-height);
   }
 }

package/dist/css/components/form.css

@@ -10,9 +10,8 @@
   /* Private API (component option defaults) */
   --__op-form-control-height: var(--_op-form-control-height-large);
   --__op-form-control-font-size: var(--_op-form-control-font-large);
-
-  min-width: var(--__op-form-control-height);
-  height: var(--__op-form-control-height);
+  block-size: var(--__op-form-control-height);
+  min-inline-size: var(--__op-form-control-height);
 
   /* Size Modifiers */
   &.form-control--small {
@@ -60,12 +59,12 @@
   --_op-form-control-height-medium: var(--op-space-large);
   --_op-form-control-height-large: var(--op-space-x-large);
 
-  width: var(--__op-form-control-height);
-  height: var(--__op-form-control-height);
   align-self: center;
   margin: 0;
   accent-color: var(--op-color-primary-base);
+  block-size: var(--__op-form-control-height);
   cursor: pointer;
+  inline-size: var(--__op-form-control-height);
 
   & + label {
     align-self: center;
@@ -81,18 +80,18 @@
   --__op-form-control-border-color: var(--op-color-neutral-plus-four);
 
   display: block;
-  width: 100%;
-  min-width: var(--__op-form-control-height);
-  height: var(--__op-form-control-height);
   border: none;
   border-radius: var(--op-radius-medium);
   appearance: none;
   background-color: var(--op-color-neutral-plus-eight);
+  block-size: var(--__op-form-control-height);
   box-shadow: var(--op-border-all) var(--__op-form-control-border-color);
   color: var(--op-color-neutral-on-plus-eight);
   cursor: text;
   font-size: var(--__op-form-control-font-size);
+  inline-size: 100%;
   line-height: var(--op-line-height-base);
+  min-inline-size: var(--__op-form-control-height);
   padding-block: var(--op-space-2x-small);
   padding-inline: var(--op-space-small) var(--op-space-x-small);
 
@@ -159,7 +158,6 @@
     --__op-btn-height: var(--__op-btn-base-height);
 
     display: inline-flex;
-    min-height: var(--__op-btn-height);
     align-items: center;
     justify-content: center;
     border: none;
@@ -173,6 +171,7 @@
     font-weight: var(--op-font-weight-normal);
     gap: var(--op-space-x-small);
     margin-block: calc((var(--__op-form-control-height) / 2) - (var(--__op-btn-height) / 2));
+    min-block-size: var(--__op-btn-height);
     padding-block: 0;
     padding-inline: var(--op-space-x-small);
     text-align: center;
@@ -199,13 +198,13 @@ select.form-control:not([multiple], [type='radio'], [type='checkbox']) {
 }
 
 select.form-control[multiple] {
-  min-height: calc(2 * var(--__op-form-control-height));
+  min-block-size: calc(2 * var(--__op-form-control-height));
 }
 
 textarea.form-control:not([type='radio'], [type='checkbox']) {
-  max-width: 100%;
-  height: calc(2 * var(--__op-form-control-height));
-  min-height: var(--__op-form-control-height);
+  block-size: calc(2 * var(--__op-form-control-height));
+  max-inline-size: 100%;
+  min-block-size: var(--__op-form-control-height);
 }
 
 .form-label {
@@ -217,9 +216,9 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
 }
 
 .form-error {
-  width: fit-content;
   color: var(--op-color-alerts-danger-base);
   font-size: var(--op-font-x-small);
+  inline-size: fit-content;
 }
 
 .form-hint {

package/dist/css/components/icon.css

@@ -34,10 +34,10 @@
   --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
 
   display: inline-block;
-  width: var(--__op-icon-font-size);
-  height: var(--__op-icon-font-size);
+  block-size: var(--__op-icon-font-size);
   font-size: var(--__op-icon-font-size);
   font-weight: var(--__op-icon-weight);
+  inline-size: var(--__op-icon-font-size);
   line-height: var(--op-line-height-densest);
   vertical-align: middle;
 
@@ -115,7 +115,7 @@
 /* Custom SVG Icons app specific */
 .custom-icons {
   svg {
-    width: 100%;
-    height: 100%;
+    block-size: 100%;
+    inline-size: 100%;
   }
 }

package/dist/css/components/modal.css

@@ -41,20 +41,19 @@
   }
 }
 
-/* stylelint-disable no-descending-specificity */
 .modal {
   /* Public API (customizable component options) */
   --_op-modal-width: calc(141 * var(--op-size-unit)); /* 564px */
   --_op-modal-max-height: calc(125 * var(--op-size-unit)); /* 500px */
 
   z-index: var(--op-z-index-dialog-content);
-  width: var(--_op-modal-width);
   border-radius: var(--op-radius-medium);
   background-color: var(--op-color-background);
   box-shadow: var(--op-border-all) var(--op-color-border);
   color: var(--op-color-on-background);
   contain: paint;
   font-size: var(--op-font-medium);
+  inline-size: var(--_op-modal-width);
   line-height: var(--op-line-height-base);
   opacity: var(--op-opacity-none);
   transform: scale(0.7);
@@ -75,8 +74,8 @@
   }
 
   .modal__body {
-    max-height: var(--_op-modal-max-height);
     box-shadow: var(--op-border-all) var(--op-color-border);
+    max-block-size: var(--_op-modal-max-height);
     overflow-y: auto;
   }
 
@@ -87,63 +86,46 @@
     gap: var(--op-space-small);
   }
 }
-/* stylelint-enable no-descending-specificity */
 
 dialog.modal {
-  position: fixed;
-  display: block;
   padding: 0;
   border: none;
-  inset: 0;
+  overscroll-behavior: contain;
+  transform: scale(0.7);
+  transition:
+    display var(--op-transition-modal-time) allow-discrete,
+    overlay var(--op-transition-modal-time) allow-discrete,
+    transform var(--op-transition-modal-time),
+    opacity var(--op-transition-modal-time);
 
   &::backdrop {
-    /* The Dialog backdrop does not inheret from :root so these need to be duplicated here. */
-    --op-color-black: hsl(0deg 0% 0%);
-    --_op-modal-backdrop-active-opacity: 0.5;
-    --op-opacity-none: 0;
-    --op-opacity-full: 1;
-
-    animation: show-backdrop 300ms ease-in;
-    background: var(--op-color-black);
-    opacity: var(--_op-modal-backdrop-active-opacity);
+    overflow: hidden;
+    background-color: var(--op-color-black);
+    opacity: var(--op-opacity-none);
+    overscroll-behavior: contain;
+    transition:
+      display var(--op-transition-modal-time) allow-discrete,
+      overlay var(--op-transition-modal-time) allow-discrete,
+      transform var(--op-transition-modal-time),
+      opacity var(--op-transition-modal-time);
   }
 
   &[open] {
     opacity: var(--op-opacity-full);
     transform: scale(1);
-  }
-
-  &.modal--closing {
-    opacity: var(--op-opacity-none);
-    transform: scale(0.7);
 
     &::backdrop {
-      animation: hide-backdrop 300ms ease-in;
-      opacity: var(--op-opacity-none);
+      opacity: var(--op-opacity-half);
     }
   }
 }
 
-/* Using the Dialog element */
-
-/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog */
-
-@keyframes show-backdrop {
-  from {
-    opacity: var(--op-opacity-none);
-  }
-
-  to {
-    opacity: var(--_op-modal-backdrop-active-opacity);
-  }
-}
-
-@keyframes hide-backdrop {
-  from {
-    opacity: var(--_op-modal-backdrop-active-opacity);
-  }
+@starting-style {
+  dialog.modal[open] {
+    transform: scale(0.7);
 
-  to {
-    opacity: var(--op-opacity-none);
+    &::backdrop {
+      opacity: var(--op-opacity-none);
+    }
   }
 }

package/dist/css/components/navbar.css

@@ -16,18 +16,20 @@
   align-items: center;
   padding: var(--op-space-small) var(--_op-navbar-horizontal-spacing);
   background-color: var(--_op-navbar-background-color);
-  box-shadow: var(--op-border-bottom) var(--_op-navbar-border-color);
+  box-shadow:
+    var(--op-border-top) var(--_op-navbar-border-color),
+    var(--op-border-bottom) var(--_op-navbar-border-color);
   color: var(--_op-navbar-text-color);
   gap: var(--_op-navbar-content-spacing);
 
   /* Elements */
 
   .navbar__brand {
-    height: var(--_op-navbar-brand-height);
-    margin-right: var(--_op-navbar-horizontal-spacing);
+    block-size: var(--_op-navbar-brand-height);
+    margin-inline-end: var(--_op-navbar-horizontal-spacing);
 
     img {
-      height: 100%;
+      block-size: 100%;
     }
   }
 

package/dist/css/components/pagination.css

@@ -18,7 +18,7 @@
 
   /* ... Gap */
   .pagination__divider {
-    height: 100%;
+    block-size: 100%;
     padding-inline: var(--op-space-x-small);
   }
 }

package/dist/css/components/segmented-control.css

@@ -36,19 +36,19 @@
 
   position: relative;
   display: grid;
-  width: fit-content;
-  height: var(--__op-segmented-control-height);
   padding: var(--op-space-2x-small);
   border-radius: var(--op-radius-medium);
   background-color: var(--op-color-neutral-plus-eight);
+  block-size: var(--__op-segmented-control-height);
   box-shadow: var(--op-border-all) var(--op-color-border);
   color: var(--op-color-neutral-on-plus-eight);
   font-size: var(--__op-segmented-control-font-size);
   gap: var(--op-space-2x-small);
   grid-auto-flow: column;
+  inline-size: fit-content;
 
   &.segmented-control--full-width {
-    width: 100%;
+    inline-size: 100%;
   }
 
   .icon {
@@ -58,12 +58,12 @@
   .segmented-control__input {
     position: absolute;
     overflow: hidden;
-    width: 1px;
-    height: 1px;
     padding: 0;
     border-width: 0;
     margin: -1px;
+    block-size: 1px;
     clip: rect(0, 0, 0, 0);
+    inline-size: 1px;
     white-space: nowrap;
 
     /* Selected Option */