@rolemodel/optics 2.1.5 → 2.2.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

@@ -18,7 +18,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

@@ -16,7 +16,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

@@ -11,7 +11,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 +24,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/dist/css/components/form.css

@@ -259,7 +259,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/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/segmented-control.css

@@ -0,0 +1,135 @@
+.segmented-control {
+  --op-input-inner-focus: 0 0 0 var(--op-border-width-large);
+  --op-input-focus-primary:
+    var(--op-input-inner-focus) var(--op-color-primary-plus-two),
+    var(--op-input-outer-focus) var(--op-color-primary-plus-five);
+
+  /* Public API (customizable component options) */
+  --_op-segmented-control-height-small: var(--op-input-height-small);
+  --_op-segmented-control-height-medium: var(--op-input-height-medium);
+  --_op-segmented-control-height-large: var(--op-input-height-large);
+
+  --_op-segmented-control-font-small: var(--op-font-x-small);
+  --_op-segmented-control-font-medium: var(--op-font-small);
+  --_op-segmented-control-font-large: var(--op-font-small);
+
+  --_op-segmented-control-label-padding-small: var(--op-space-x-small);
+  --_op-segmented-control-label-padding-medium: var(--op-space-small);
+  --_op-segmented-control-label-padding-large: var(--op-space-small);
+
+  --_op-segmented-control-label-gap-small: var(--op-space-3x-small);
+  --_op-segmented-control-label-gap-medium: var(--op-space-2x-small);
+  --_op-segmented-control-label-gap-large: var(--op-space-2x-small);
+
+  --_op-segmented-control-color-icon-default: var(--op-color-neutral-on-plus-eight-alt);
+  --_op-segmented-control-color-icon-active: light-dark(
+    var(--op-color-primary-plus-four),
+    var(--op-color-primary-minus-six)
+  );
+
+  /* Private API (component option defaults) */
+  --__op-segmented-control-height: var(--_op-segmented-control-height-large);
+  --__op-segmented-control-font-size: var(--_op-segmented-control-font-large);
+  --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-large);
+  --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-large);
+  --__op-segmented-control-color-icon: var(--_op-segmented-control-color-icon-default);
+
+  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);
+  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;
+
+  &.segmented-control--full-width {
+    width: 100%;
+  }
+
+  .icon {
+    color: var(--__op-segmented-control-color-icon);
+  }
+
+  .segmented-control__input {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border-width: 0;
+    margin: -1px;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+
+    /* Selected Option */
+    &:checked + .segmented-control__label {
+      --__op-segmented-control-color-icon: var(--_op-segmented-control-color-icon-active);
+
+      background-color: var(--op-color-primary-plus-one);
+      color: var(--op-color-primary-on-plus-one);
+    }
+
+    &:focus-visible {
+      + .segmented-control__label {
+        box-shadow: var(--op-input-focus-primary);
+      }
+    }
+  }
+
+  .segmented-control__label {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--op-radius-small);
+    gap: var(--__op-segmented-control-label-gap);
+    padding-inline: var(--__op-segmented-control-label-padding);
+    white-space: nowrap;
+
+    &:hover {
+      background-color: var(--op-color-neutral-plus-five);
+      color: var(--op-color-neutral-on-plus-five);
+    }
+  }
+
+  /* Size Modifiers */
+  &.segmented-control--small {
+    --__op-segmented-control-height: var(--_op-segmented-control-height-small);
+    --__op-segmented-control-font-size: var(--_op-segmented-control-font-small);
+    --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-small);
+    --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-small);
+
+    .icon {
+      --__op-icon-font-size: var(--_op-icon-font-size-small);
+      --__op-icon-optical-size: var(--_op-icon-optical-size-small);
+    }
+  }
+
+  &.segmented-control--medium {
+    --__op-segmented-control-height: var(--_op-segmented-control-height-medium);
+    --__op-segmented-control-font-size: var(--_op-segmented-control-font-medium);
+    --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-medium);
+    --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-medium);
+
+    .icon {
+      --__op-icon-font-size: var(--_op-icon-font-size-medium);
+      --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
+    }
+  }
+
+  &.segmented-control--large {
+    --__op-segmented-control-height: var(--_op-segmented-control-height-large);
+    --__op-segmented-control-font-size: var(--_op-segmented-control-font-large);
+    --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-large);
+    --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-large);
+
+    .icon {
+      --__op-icon-font-size: var(--_op-icon-font-size-medium);
+      --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
+    }
+  }
+}

package/dist/css/core/tokens/base_tokens.css

@@ -297,17 +297,23 @@
   */
   --op-input-inner-focus: inset 0 0 0 var(--op-border-width-large);
   --op-input-outer-focus: 0 0 0 var(--op-border-width-x-large);
-  --op-input-focus-primary: var(--op-input-inner-focus) var(--op-color-primary-plus-two),
+  --op-input-focus-primary:
+    var(--op-input-inner-focus) var(--op-color-primary-plus-two),
     var(--op-input-outer-focus) var(--op-color-primary-plus-five);
-  --op-input-focus-neutral: var(--op-input-inner-focus) var(--op-color-neutral-plus-two),
+  --op-input-focus-neutral:
+    var(--op-input-inner-focus) var(--op-color-neutral-plus-two),
     var(--op-input-outer-focus) var(--op-color-neutral-plus-five);
-  --op-input-focus-danger: var(--op-input-inner-focus) var(--op-color-alerts-danger-plus-two),
+  --op-input-focus-danger:
+    var(--op-input-inner-focus) var(--op-color-alerts-danger-plus-two),
     var(--op-input-outer-focus) var(--op-color-alerts-danger-plus-five);
-  --op-input-focus-warning: var(--op-input-inner-focus) var(--op-color-alerts-warning-plus-two),
+  --op-input-focus-warning:
+    var(--op-input-inner-focus) var(--op-color-alerts-warning-plus-two),
     var(--op-input-outer-focus) var(--op-color-alerts-warning-plus-five);
-  --op-input-focus-info: var(--op-input-inner-focus) var(--op-color-alerts-info-plus-two),
+  --op-input-focus-info:
+    var(--op-input-inner-focus) var(--op-color-alerts-info-plus-two),
     var(--op-input-outer-focus) var(--op-color-alerts-info-plus-five);
-  --op-input-focus-notice: var(--op-input-inner-focus) var(--op-color-alerts-notice-plus-two),
+  --op-input-focus-notice:
+    var(--op-input-inner-focus) var(--op-color-alerts-notice-plus-two),
     var(--op-input-outer-focus) var(--op-color-alerts-notice-plus-five);
 }
 

package/dist/css/optics.css

@@ -392,17 +392,23 @@ Noto Sans supports:
   */
   --op-input-inner-focus: inset 0 0 0 var(--op-border-width-large);
   --op-input-outer-focus: 0 0 0 var(--op-border-width-x-large);
-  --op-input-focus-primary: var(--op-input-inner-focus) var(--op-color-primary-plus-two),
+  --op-input-focus-primary:
+    var(--op-input-inner-focus) var(--op-color-primary-plus-two),
     var(--op-input-outer-focus) var(--op-color-primary-plus-five);
-  --op-input-focus-neutral: var(--op-input-inner-focus) var(--op-color-neutral-plus-two),
+  --op-input-focus-neutral:
+    var(--op-input-inner-focus) var(--op-color-neutral-plus-two),
     var(--op-input-outer-focus) var(--op-color-neutral-plus-five);
-  --op-input-focus-danger: var(--op-input-inner-focus) var(--op-color-alerts-danger-plus-two),
+  --op-input-focus-danger:
+    var(--op-input-inner-focus) var(--op-color-alerts-danger-plus-two),
     var(--op-input-outer-focus) var(--op-color-alerts-danger-plus-five);
-  --op-input-focus-warning: var(--op-input-inner-focus) var(--op-color-alerts-warning-plus-two),
+  --op-input-focus-warning:
+    var(--op-input-inner-focus) var(--op-color-alerts-warning-plus-two),
     var(--op-input-outer-focus) var(--op-color-alerts-warning-plus-five);
-  --op-input-focus-info: var(--op-input-inner-focus) var(--op-color-alerts-info-plus-two),
+  --op-input-focus-info:
+    var(--op-input-inner-focus) var(--op-color-alerts-info-plus-two),
     var(--op-input-outer-focus) var(--op-color-alerts-info-plus-five);
-  --op-input-focus-notice: var(--op-input-inner-focus) var(--op-color-alerts-notice-plus-two),
+  --op-input-focus-notice:
+    var(--op-input-inner-focus) var(--op-color-alerts-notice-plus-two),
     var(--op-input-outer-focus) var(--op-color-alerts-notice-plus-five);
 }
 /* Animations */
@@ -3621,7 +3627,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 */
@@ -4064,6 +4071,141 @@ dialog.modal {
     padding-inline: var(--op-space-x-small);
   }
 }
+.segmented-control {
+  --op-input-inner-focus: 0 0 0 var(--op-border-width-large);
+  --op-input-focus-primary:
+    var(--op-input-inner-focus) var(--op-color-primary-plus-two),
+    var(--op-input-outer-focus) var(--op-color-primary-plus-five);
+
+  /* Public API (customizable component options) */
+  --_op-segmented-control-height-small: var(--op-input-height-small);
+  --_op-segmented-control-height-medium: var(--op-input-height-medium);
+  --_op-segmented-control-height-large: var(--op-input-height-large);
+
+  --_op-segmented-control-font-small: var(--op-font-x-small);
+  --_op-segmented-control-font-medium: var(--op-font-small);
+  --_op-segmented-control-font-large: var(--op-font-small);
+
+  --_op-segmented-control-label-padding-small: var(--op-space-x-small);
+  --_op-segmented-control-label-padding-medium: var(--op-space-small);
+  --_op-segmented-control-label-padding-large: var(--op-space-small);
+
+  --_op-segmented-control-label-gap-small: var(--op-space-3x-small);
+  --_op-segmented-control-label-gap-medium: var(--op-space-2x-small);
+  --_op-segmented-control-label-gap-large: var(--op-space-2x-small);
+
+  --_op-segmented-control-color-icon-default: var(--op-color-neutral-on-plus-eight-alt);
+  --_op-segmented-control-color-icon-active: light-dark(
+    var(--op-color-primary-plus-four),
+    var(--op-color-primary-minus-six)
+  );
+
+  /* Private API (component option defaults) */
+  --__op-segmented-control-height: var(--_op-segmented-control-height-large);
+  --__op-segmented-control-font-size: var(--_op-segmented-control-font-large);
+  --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-large);
+  --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-large);
+  --__op-segmented-control-color-icon: var(--_op-segmented-control-color-icon-default);
+
+  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);
+  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;
+
+  &.segmented-control--full-width {
+    width: 100%;
+  }
+
+  .icon {
+    color: var(--__op-segmented-control-color-icon);
+  }
+
+  .segmented-control__input {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border-width: 0;
+    margin: -1px;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+
+    /* Selected Option */
+    &:checked + .segmented-control__label {
+      --__op-segmented-control-color-icon: var(--_op-segmented-control-color-icon-active);
+
+      background-color: var(--op-color-primary-plus-one);
+      color: var(--op-color-primary-on-plus-one);
+    }
+
+    &:focus-visible {
+      + .segmented-control__label {
+        box-shadow: var(--op-input-focus-primary);
+      }
+    }
+  }
+
+  .segmented-control__label {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--op-radius-small);
+    gap: var(--__op-segmented-control-label-gap);
+    padding-inline: var(--__op-segmented-control-label-padding);
+    white-space: nowrap;
+
+    &:hover {
+      background-color: var(--op-color-neutral-plus-five);
+      color: var(--op-color-neutral-on-plus-five);
+    }
+  }
+
+  /* Size Modifiers */
+  &.segmented-control--small {
+    --__op-segmented-control-height: var(--_op-segmented-control-height-small);
+    --__op-segmented-control-font-size: var(--_op-segmented-control-font-small);
+    --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-small);
+    --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-small);
+
+    .icon {
+      --__op-icon-font-size: var(--_op-icon-font-size-small);
+      --__op-icon-optical-size: var(--_op-icon-optical-size-small);
+    }
+  }
+
+  &.segmented-control--medium {
+    --__op-segmented-control-height: var(--_op-segmented-control-height-medium);
+    --__op-segmented-control-font-size: var(--_op-segmented-control-font-medium);
+    --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-medium);
+    --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-medium);
+
+    .icon {
+      --__op-icon-font-size: var(--_op-icon-font-size-medium);
+      --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
+    }
+  }
+
+  &.segmented-control--large {
+    --__op-segmented-control-height: var(--_op-segmented-control-height-large);
+    --__op-segmented-control-font-size: var(--_op-segmented-control-font-large);
+    --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-large);
+    --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-large);
+
+    .icon {
+      --__op-icon-font-size: var(--_op-icon-font-size-medium);
+      --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
+    }
+  }
+}
 .sidebar {
   /* Public API (customizable component options) */