@rolemodel/optics 2.1.5 → 2.3.0

package/.github/pull_request_template.md

@@ -1,6 +1,6 @@
-## Task
+# Task
 
-[TR #XXX]()
+[OP-XXX](link to ticket)
 
 ## Why?
 
@@ -15,15 +15,24 @@ What changed in this PR?
 - [ ] Change 2
 - [ ] ...
 
-## Sanity Check
+## Quality Assurance
 
+Add an X to all that apply like this: [X]
+Cross out all that don't apply with ~~ ~~ around it like ~~this~~
+
+- [ ] Have you tagged the PR with the correct labels?
+- [ ] Have you validated the changes?
+  - [ ] Have you run linters? (yarn sanity-check)
+  - [ ] Have you run prettier?
+  - [ ] Have you tried building the css?
+  - [ ] Have you tried building storybook?
 - [ ] Have you updated any usage of changed tokens?
-- [ ] Have you updated the docs with any component changes?
-- [ ] Have you updated the dependency graph with any component changes?
-- [ ] Have you run linters?
-- [ ] Have you run prettier?
-- [ ] Have you tried building the css?
-- [ ] Have you tried building storybook?
+- [ ] Did you add a component?
+  - [ ] Have you added it to the dependency graph?
+  - [ ] Have you added it to the docs?
+- [ ] Did you update a component?
+  - [ ] Have you updated the dependency graph?
+  - [ ] Have you updated the docs?
 - [ ] Do you need to update the package version?
 
 ## Screenshots

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
@@ -18,7 +19,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '18.x'
+          node-version: '24.x'
           cache: 'npm'
       - name: Install
         run: yarn install

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
@@ -16,7 +17,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: '18.x'
+          node-version: '24.x'
           registry-url: 'https://registry.npmjs.org'
       - name: Install 🔧
         run: | # Install npm packages

package/.github/workflows/release-package.yml

@@ -3,7 +3,8 @@ name: Deploy to NPM and GHP
 on:
   release:
     types: [published]
-
+permissions:
+  contents: read
 jobs:
   build-npm:
     runs-on: ubuntu-latest
@@ -11,7 +12,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '18.x'
+          node-version: '24.x'
           registry-url: 'https://registry.npmjs.org'
       - run: yarn install --immutable
       - run: yarn build
@@ -24,7 +25,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '18.x'
+          node-version: '24.x'
           registry-url: https://npm.pkg.github.com/
       - run: yarn install --immutable
       - run: yarn build

package/.node-version

@@ -0,0 +1 @@
+22.14.0

package/.prettierignore

@@ -1,3 +1,4 @@
 # Tools
 tools/templates
 .yarn/*
+optics-design-system.code-workspace

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 {
@@ -259,7 +258,8 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
   .form-label,
   .form-error,
   .form-hint,
-  .form-control:not([type='radio'], [type='checkbox']) {
+  .form-control:not([type='radio'], [type='checkbox']),
+  .segmented-control {
     grid-column: 1 / 3;
   }
   /* stylelint-enable no-descending-specificity */

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/index.css

@@ -14,6 +14,7 @@
 @import 'modal';
 @import 'navbar';
 @import 'pagination';
+@import 'segmented-control';
 @import 'sidebar';
 @import 'side_panel';
 @import 'spinner';

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);
+    }
   }
 }