@byline/ui 0.9.3 → 0.10.1

package/src/components/button/button.module.css

@@ -0,0 +1,542 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+@layer byline-components {
+  .button,
+  :global(.infonomic-button) {
+    border: none;
+    cursor: pointer;
+    font-weight: normal;
+    text-align: center;
+    display: inline-flex;
+    gap: var(--gap-2);
+    line-height: 0;
+    align-items: center;
+    white-space: nowrap;
+    justify-content: center;
+    outline: 1px solid transparent;
+    outline-offset: 2px;
+    transition:
+      background-color var(--transition-normal),
+      outline-color var(--transition-normal);
+    border-radius: var(--border-radius-sm);
+  }
+
+  .button:disabled,
+  .button[disabled],
+  :global(.infonomic-button):disabled,
+  :global(.infonomic-button)[disabled] {
+    pointer-events: none;
+  }
+
+  .button:focus,
+  .button:active,
+  :global(.infonomic-button):focus,
+  :global(.infonomic-button):active {
+    outline-color: var(--ring-color);
+  }
+
+  .button.square,
+  :global(.infonomic-button-square) {
+    aspect-ratio: 1 / 1;
+    padding: 0;
+    border-radius: var(--border-radius-sm);
+  }
+
+  .button.round,
+  :global(.infonomic-button-round) {
+    aspect-ratio: 1 / 1;
+    padding: 0;
+    border-radius: var(--border-radius-full);
+  }
+
+  /* Sizes */
+  .xs,
+  :global(.infonomic-button-xs) {
+    min-height: 26px;
+    font-size: 0.7rem;
+    padding: 0.2rem 0.4rem;
+  }
+
+  .sm,
+  :global(.infonomic-button-sm) {
+    min-height: 32px;
+    font-size: 0.775rem;
+    padding: 0.25rem 0.5rem;
+  }
+
+  .md,
+  :global(.infonomic-button-md) {
+    min-height: 38px;
+    font-size: 0.95rem;
+    padding: 0.625rem 1.25rem;
+  }
+
+  .lg,
+  :global(.infonomic-button-lg) {
+    min-height: 46px;
+    font-size: 1.1rem;
+    padding: 0.75rem 1.5rem;
+  }
+
+  .xl,
+  :global(.infonomic-button-xl) {
+    min-height: 54px;
+    font-size: 1.2rem;
+    padding: 0.75rem 1.5rem;
+  }
+
+  /* Variants - Consuming Variables */
+  .filled,
+  :global(.infonomic-button-filled) {
+    color: var(--button-variant-filled-foreground);
+    background-color: var(--button-variant-filled);
+  }
+
+  .filled:hover,
+  :global(.infonomic-button-filled):hover {
+    background-color: var(--button-variant-filled-hover);
+  }
+
+  .filled:focus,
+  .filled:active,
+  :global(.infonomic-button-filled):focus,
+  :global(.infonomic-button-filled):active {
+    --ring-color: var(--button-ring-color);
+  }
+
+  .filled:disabled,
+  .filled[disabled],
+  :global(.infonomic-button-filled):disabled,
+  :global(.infonomic-button-filled)[disabled] {
+    background-color: var(
+      --button-variant-filled-disabled,
+      oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * 0.85) h)
+    );
+    color: var(
+      --button-variant-filled-foreground-disabled,
+      oklch(from var(--button-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h)
+    );
+  }
+
+  /* -------------------------------------------------------- */
+  /* Weak variant for close button on selected button */
+
+  .filled-weak,
+  :global(.infonomic-button-filled-weak) {
+    color: var(--button-variant-filled-weak-foreground);
+    background-color: var(--button-variant-filled-weak);
+  }
+
+  .filled-weak:hover,
+  :global(.infonomic-button-filled-weak):hover {
+    background-color: var(--button-variant-filled-weak-hover);
+  }
+
+  .filled-weak:focus,
+  .filled-weak:active,
+  :global(.infonomic-button-filled-weak):focus,
+  :global(.infonomic-button-filled-weak):active {
+    --ring-color: var(--button-ring-color);
+  }
+
+  .filled-weak:disabled,
+  .filled-weak[disabled],
+  :global(.infonomic-button-filled-weak):disabled,
+  :global(.infonomic-button-filled-weak)[disabled] {
+    background-color: var(
+      --button-variant-filled-weak-disabled,
+      oklch(from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h)
+    );
+    color: var(
+      --button-variant-filled-weak-foreground-disabled,
+      oklch(from var(--button-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h)
+    );
+  }
+
+  .outlined,
+  :global(.infonomic-button-outlined) {
+    border: 1px solid var(--button-variant-outlined-border);
+    color: var(--button-variant-outlined-foreground);
+    background-color: var(--button-variant-outlined);
+  }
+
+  .outlined:disabled,
+  .outlined[disabled],
+  :global(.infonomic-button-outlined):disabled,
+  :global(.infonomic-button-outlined)[disabled] {
+    border-color: var(
+      --button-variant-outlined-border-disabled,
+      oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h)
+    );
+    color: var(
+      --button-variant-outlined-foreground-disabled,
+      oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h)
+    );
+  }
+
+  .outlined:hover,
+  :global(.infonomic-button-outlined):hover {
+    background-color: var(--button-variant-outlined-hover);
+  }
+
+  .outlined:focus,
+  .outlined:active,
+  :global(.infonomic-button-outlined):focus,
+  :global(.infonomic-button-outlined):active {
+    --ring-color: var(--button-ring-color);
+  }
+
+  .gradient,
+  :global(.infonomic-button-gradient) {
+    color: var(--button-variant-gradient-foreground);
+    background: linear-gradient(
+      45deg,
+      var(--button-variant-gradient-start),
+      var(--button-variant-gradient-end)
+    );
+  }
+
+  .gradient:disabled,
+  .gradient[disabled],
+  :global(.infonomic-button-gradient):disabled,
+  :global(.infonomic-button-gradient)[disabled] {
+    background: unset;
+    background-color: var(
+      --button-variant-gradient-disabled,
+      oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * 0.85) h)
+    );
+    color: var(
+      --button-variant-gradient-foreground-disabled,
+      oklch(from var(--button-variant-gradient-foreground) calc(l * 0.9) calc(c * 0.85) h)
+    );
+  }
+
+  .gradient:hover,
+  :global(.infonomic-button-gradient):hover {
+    color: var(--button-variant-gradient-foreground);
+    background: linear-gradient(
+      45deg,
+      var(--button-variant-gradient-start),
+      var(--button-variant-gradient-end)
+    );
+  }
+
+  .gradient:focus,
+  .gradient:active,
+  :global(.infonomic-button-gradient):focus,
+  :global(.infonomic-button-gradient):active {
+    --ring-color: var(--button-ring-color);
+  }
+
+  .text,
+  :global(.infonomic-button-text) {
+    background-color: var(--button-variant-text);
+    color: var(--button-variant-text-foreground);
+  }
+
+  .text:disabled,
+  .text[disabled],
+  :global(.infonomic-button-text):disabled,
+  :global(.infonomic-button-text)[disabled] {
+    color: oklch(from var(--button-variant-text-foreground) calc(l * 1.5) calc(c * 0.5) h);
+  }
+
+  .text:hover,
+  :global(.infonomic-button-text):hover {
+    background-color: var(--button-variant-text-hover);
+  }
+
+  .text:focus,
+  .text:active,
+  :global(.infonomic-button-text):focus,
+  :global(.infonomic-button-text):active {
+    --ring-color: var(--button-ring-color);
+  }
+
+  /* Intents - Defining Variables */
+  .primary,
+  :global(.infonomic-button-primary) {
+    --button-ring-color: var(--ring-primary);
+
+    /* Filled */
+    --button-variant-filled: var(--fill-primary-strong);
+    --button-variant-filled-hover: var(--fill-primary-strong-hover);
+    --button-variant-filled-disabled: var(--fill-primary-strong-disabled);
+    --button-variant-filled-foreground: var(--text-on-primary-strong);
+    --button-variant-filled-foreground-disabled: var(--text-on-primary-strong-disabled);
+
+    /* Filled Weak */
+    --button-variant-filled-weak: var(--fill-primary-weak);
+    --button-variant-filled-weak-hover: var(--fill-primary-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-primary-weak-disabled);
+    --button-variant-filled-weak-foreground: var(--text-on-primary-weak);
+    --button-variant-filled-weak-foreground-disabled: var(--text-on-primary-weak-disabled);
+
+    /* Outlined */
+    --button-variant-outlined: var(--fill-primary-outlined);
+    --button-variant-outlined-hover: var(--fill-primary-outlined-hover);
+    --button-variant-outlined-border: var(--stroke-primary);
+    --button-variant-outlined-border-disabled: var(--stroke-primary-disabled);
+    --button-variant-outlined-foreground: var(--text-on-primary-outlined);
+    --button-variant-outlined-foreground-disabled: var(--text-on-primary-outlined-disabled);
+
+    /* Text */
+    --button-variant-text: var(--fill-primary-text);
+    --button-variant-text-hover: var(--fill-primary-text-hover);
+    --button-variant-text-foreground: var(--text-primary);
+
+    /* Gradient */
+    --button-variant-gradient-start: var(--gradient-primary-start);
+    --button-variant-gradient-end: var(--gradient-primary-end);
+    --button-variant-gradient-foreground: var(--gradient-primary-foreground);
+    --button-variant-gradient-disabled: var(--gradient-primary-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-primary-strong-disabled);
+  }
+
+  .secondary,
+  :global(.infonomic-button-secondary) {
+    --button-ring-color: var(--ring-secondary);
+
+    /* Filled */
+    --button-variant-filled: var(--fill-secondary-strong);
+    --button-variant-filled-hover: var(--fill-secondary-strong-hover);
+    --button-variant-filled-disabled: var(--fill-secondary-strong-disabled);
+    --button-variant-filled-foreground: var(--text-on-secondary-strong);
+    --button-variant-filled-foreground-disabled: var(--text-on-secondary-strong-disabled);
+
+    /* Filled Weak */
+    --button-variant-filled-weak: var(--fill-secondary-weak);
+    --button-variant-filled-weak-hover: var(--fill-secondary-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-secondary-weak-disabled);
+    --button-variant-filled-weak-foreground: var(--text-on-secondary-weak);
+    --button-variant-filled-weak-foreground-disabled: var(--text-on-secondary-weak-disabled);
+
+    /* Outlined */
+    --button-variant-outlined: var(--fill-secondary-outlined);
+    --button-variant-outlined-border: var(--stroke-secondary);
+    --button-variant-outlined-border-disabled: var(--stroke-secondary-disabled);
+    --button-variant-outlined-hover: var(--fill-secondary-outlined-hover);
+    --button-variant-outlined-foreground: var(--text-on-secondary-outlined);
+    --button-variant-outlined-foreground-disabled: var(--text-on-secondary-outlined-disabled);
+
+    /* Text */
+    --button-variant-text: var(--fill-secondary-text);
+    --button-variant-text-hover: var(--fill-secondary-text-hover);
+    --button-variant-text-foreground: var(--text-secondary);
+
+    /* Gradient */
+    --button-variant-gradient-start: var(--gradient-secondary-start);
+    --button-variant-gradient-end: var(--gradient-secondary-end);
+    --button-variant-gradient-foreground: var(--gradient-secondary-foreground);
+    --button-variant-gradient-disabled: var(--gradient-secondary-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-secondary-strong-disabled);
+  }
+
+  .noeffect,
+  :global(.infonomic-button-noeffect) {
+    --button-ring-color: var(--ring-noeffect);
+
+    /* Filled */
+    --button-variant-filled: var(--fill-noeffect-strong);
+    --button-variant-filled-hover: var(--fill-noeffect-strong-hover);
+    --button-variant-filled-disabled: var(--fill-noeffect-strong-disabled);
+    --button-variant-filled-foreground: var(--text-on-noeffect-strong);
+    --button-variant-filled-foreground-disabled: var(--text-on-noeffect-strong-disabled);
+
+    /* Filled Weak */
+    --button-variant-filled-weak: var(--fill-noeffect-weak);
+    --button-variant-filled-weak-hover: var(--fill-noeffect-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-noeffect-weak-disabled);
+    --button-variant-filled-weak-foreground: var(--text-on-noeffect-weak);
+    --button-variant-filled-weak-foreground-disabled: var(--text-on-noeffect-weak-disabled);
+
+    /* Outlined */
+    --button-variant-outlined: var(--fill-noeffect-outlined);
+    --button-variant-outlined-hover: var(--fill-noeffect-outlined-hover);
+    --button-variant-outlined-disabled: var(--fill-noeffect-outlined-disabled);
+    --button-variant-outlined-border: var(--stroke-noeffect);
+    --button-variant-outlined-border-disabled: var(--stroke-noeffect-disabled);
+    --button-variant-outlined-foreground: var(--text-on-noeffect-outlined);
+    --button-variant-outlined-foreground-disabled: var(--text-on-noeffect-outlined-disabled);
+
+    /* Text */
+    --button-variant-text: var(--fill-noeffect-text);
+    --button-variant-text-hover: var(--fill-noeffect-text-hover);
+    --button-variant-text-foreground: var(--text-noeffect);
+
+    /* Gradient */
+    --button-variant-gradient-start: var(--gradient-noeffect-start);
+    --button-variant-gradient-end: var(--gradient-noeffect-end);
+    --button-variant-gradient-foreground: var(--gradient-noeffect-foreground);
+    --button-variant-gradient-disabled: var(--gradient-noeffect-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-noeffect-strong-disabled);
+  }
+
+  .success,
+  :global(.infonomic-button-success) {
+    --button-ring-color: var(--ring-success);
+
+    /* Filled */
+    --button-variant-filled: var(--fill-success-strong);
+    --button-variant-filled-hover: var(--fill-success-strong-hover);
+    --button-variant-filled-disabled: var(--fill-success-strong-disabled);
+    --button-variant-filled-foreground: var(--text-on-success-strong);
+    --button-variant-filled-foreground-disabled: var(--text-on-success-strong-disabled);
+
+    /* Filled Weak */
+    --button-variant-filled-weak: var(--fill-success-weak);
+    --button-variant-filled-weak-hover: var(--fill-success-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-success-weak-disabled);
+    --button-variant-filled-weak-foreground: var(--text-on-success-weak);
+    --button-variant-filled-weak-foreground-disabled: var(--text-on-success-weak-disabled);
+
+    /* Outlined */
+    --button-variant-outlined: var(--fill-success-outlined);
+    --button-variant-outlined-hover: var(--fill-success-outlined-hover);
+    --button-variant-outlined-border: var(--stroke-success);
+    --button-variant-outlined-border-disabled: var(--stroke-success-disabled);
+    --button-variant-outlined-foreground: var(--text-on-success-outlined);
+    --button-variant-outlined-foreground-disabled: var(--text-on-success-outlined-disabled);
+
+    /* Text */
+    --button-variant-text: transparent;
+    --button-variant-text-hover: var(--fill-success-text-hover);
+    --button-variant-text-foreground: var(--text-success);
+
+    /* Gradient */
+    --button-variant-gradient-start: var(--gradient-success-start);
+    --button-variant-gradient-end: var(--gradient-success-end);
+    --button-variant-gradient-foreground: var(--gradient-success-foreground);
+    --button-variant-gradient-disabled: var(--gradient-success-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-success-strong-disabled);
+  }
+
+  .info,
+  :global(.infonomic-button-info) {
+    --button-ring-color: var(--ring-info);
+
+    /* Filled */
+    --button-variant-filled: var(--fill-info-strong);
+    --button-variant-filled-hover: var(--fill-info-strong-hover);
+    --button-variant-filled-disabled: var(--fill-info-strong-disabled);
+    --button-variant-filled-foreground: var(--text-on-info-strong);
+    --button-variant-filled-foreground-disabled: var(--text-on-info-strong-disabled);
+
+    /* Filled Weak */
+    --button-variant-filled-weak: var(--fill-info-weak);
+    --button-variant-filled-weak-hover: var(--fill-info-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-info-weak-disabled);
+    --button-variant-filled-weak-foreground: var(--text-on-info-weak);
+    --button-variant-filled-weak-foreground-disabled: var(--text-on-info-weak-disabled);
+
+    /* Outlined */
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-hover: var(--fill-info-outlined-hover);
+    --button-variant-outlined-border: var(--stroke-info);
+    --button-variant-outlined-border-disabled: var(--stroke-info-disabled);
+    --button-variant-outlined-foreground: var(--text-on-info-outlined);
+    --button-variant-outlined-foreground-disabled: var(--text-on-info-outlined-disabled);
+
+    /* Text */
+    --button-variant-text: transparent;
+    --button-variant-text-hover: var(--fill-info-text-hover);
+    --button-variant-text-foreground: var(--text-info);
+
+    /* Gradient */
+    --button-variant-gradient-start: var(--gradient-info-start);
+    --button-variant-gradient-end: var(--gradient-info-end);
+    --button-variant-gradient-foreground: var(--gradient-info-foreground);
+    --button-variant-gradient-disabled: var(--gradient-info-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-info-strong-disabled);
+  }
+
+  .warning,
+  :global(.infonomic-button-warning) {
+    --button-ring-color: var(--ring-warning);
+
+    /* Filled */
+    --button-variant-filled: var(--fill-warning-strong);
+    --button-variant-filled-hover: var(--fill-warning-strong-hover);
+    --button-variant-filled-disabled: var(--fill-warning-strong-disabled);
+    --button-variant-filled-foreground: var(--text-on-warning-strong);
+    --button-variant-filled-foreground-disabled: var(--text-on-warning-strong-disabled);
+
+    /* Filled Weak */
+    --button-variant-filled-weak: var(--fill-warning-weak);
+    --button-variant-filled-weak-hover: var(--fill-warning-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-warning-weak-disabled);
+    --button-variant-filled-weak-foreground: var(--text-on-warning-weak);
+    --button-variant-filled-weak-foreground-disabled: var(--text-on-warning-weak-disabled);
+
+    /* Outlined */
+    --button-variant-outlined: var(--fill-warning-outlined);
+    --button-variant-outlined-hover: var(--fill-warning-outlined-hover);
+    --button-variant-outlined-border: var(--stroke-warning);
+    --button-variant-outlined-border-disabled: var(--stroke-warning-disabled);
+    --button-variant-outlined-foreground: var(--text-on-warning-outlined);
+    --button-variant-outlined-foreground-disabled: var(--text-on-warning-outlined-disabled);
+
+    /* Text */
+    --button-variant-text: transparent;
+    --button-variant-text-hover: var(--fill-warning-text-hover);
+    --button-variant-text-foreground: var(--text-warning);
+
+    /* Gradient */
+    --button-variant-gradient-start: var(--gradient-warning-start);
+    --button-variant-gradient-end: var(--gradient-warning-end);
+    --button-variant-gradient-foreground: var(--gradient-warning-foreground);
+    --button-variant-gradient-disabled: var(--gradient-warning-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-warning-strong-disabled);
+  }
+
+  .danger,
+  :global(.infonomic-button-danger) {
+    --button-ring-color: var(--ring-danger);
+
+    /* Filled */
+    --button-variant-filled: var(--fill-danger-strong);
+    --button-variant-filled-hover: var(--fill-danger-strong-hover);
+    --button-variant-filled-disabled: var(--fill-danger-strong-disabled);
+    --button-variant-filled-foreground: var(--text-on-danger-strong);
+    --button-variant-filled-foreground-disabled: var(--text-on-danger-strong-disabled);
+
+    /* Filled Weak */
+    --button-variant-filled-weak: var(--fill-danger-weak);
+    --button-variant-filled-weak-hover: var(--fill-danger-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-danger-weak-disabled);
+    --button-variant-filled-weak-foreground: var(--text-on-danger-weak);
+    --button-variant-filled-weak-foreground-disabled: var(--text-on-danger-weak-disabled);
+
+    /* Outlined */
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-hover: var(--fill-danger-outlined-hover);
+    --button-variant-outlined-border: var(--stroke-danger);
+    --button-variant-outlined-border-disabled: var(--stroke-danger-disabled);
+    --button-variant-outlined-foreground: var(--text-on-danger-outlined);
+    --button-variant-outlined-foreground-disabled: var(--text-on-danger-outlined-disabled);
+
+    /* Text */
+    --button-variant-text: transparent;
+    --button-variant-text-hover: var(--fill-danger-text-hover);
+    --button-variant-text-foreground: var(--text-danger);
+
+    /* Gradient */
+    --button-variant-gradient-start: var(--gradient-danger-start);
+    --button-variant-gradient-end: var(--gradient-danger-end);
+    --button-variant-gradient-foreground: var(--gradient-danger-foreground);
+    --button-variant-gradient-disabled: var(--gradient-danger-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-danger-strong-disabled);
+  }
+
+  /* Full width */
+  .fullWidth,
+  :global(.infonomic-button-full-width) {
+    width: 100%;
+    display: flex;
+  }
+}

package/src/components/button/button.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import type React from 'react'
+
+import { mergeProps } from '@base-ui/react/merge-props'
+import { useRender } from '@base-ui/react/use-render'
+import cx from 'classnames'
+
+import { Ripple } from '../../lib/ripple.js'
+import styles from './button.module.css'
+import type { Intent, Size, Variant } from './@types/button.js'
+
+export type ButtonProps = useRender.ComponentProps<'button'> & {
+  variant?: Variant
+  size?: Size
+  type?: 'submit' | 'reset' | 'button'
+  intent?: Intent
+  fullWidth?: boolean
+  ripple?: boolean
+  className?: string
+  children?: React.ReactNode
+  ref?: React.Ref<HTMLButtonElement>
+} & React.HTMLAttributes<HTMLElement>
+
+export const Button = ({
+  variant = 'filled',
+  size = 'md',
+  type = 'button',
+  intent = 'primary',
+  fullWidth = false,
+  ripple = true,
+  className,
+  children,
+  render,
+  ref,
+  ...rest
+}: ButtonProps) => {
+  const defaultProps: Record<string, unknown> = {
+    type,
+    className: cx(
+      'infonomic-button',
+      `infonomic-button-${intent}`,
+      `infonomic-button-${variant}`,
+      `infonomic-button-${size}`,
+      styles.button,
+      styles[variant],
+      styles[size],
+      styles[intent],
+      { [styles.fullWidth]: fullWidth === true },
+      className
+    ),
+    children,
+  }
+
+  if (ripple === true) {
+    const rippleEffect = new Ripple()
+    defaultProps.onMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {
+      rippleEffect.create(e, variant === 'filled' || variant === 'gradient' ? 'light' : 'dark')
+    }
+  }
+
+  const element = useRender({
+    defaultTagName: 'button',
+    render,
+    ref,
+    props: mergeProps<'button'>(defaultProps, rest),
+  })
+
+  return element
+}

package/src/components/button/combo-button.module.css

@@ -0,0 +1,52 @@
+@layer byline-base, byline-utilities, byline-theme, byline-components;
+
+@layer byline-components {
+  .combo-button-wrapper,
+  :global(.infonomic-combo-button-wrapper) {
+    display: flex;
+    align-items: center;
+    gap: 0.075rem;
+    border-radius: var(--border-radius-sm);
+    outline: 1px solid transparent;
+    outline-offset: 2px;
+    transition: outline-color var(--transition-normal);
+  }
+
+  .combo-button-wrapper:focus-within,
+  .combo-button-wrapper:has([data-popup-open]),
+  :global(.infonomic-combo-button-wrapper):focus-within,
+  :global(.infonomic-combo-button-wrapper):has([data-popup-open]) {
+    outline-color: var(--ring-color);
+  }
+
+  .combo-button-button,
+  :global(.infonomic-combo-button-button) {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .combo-button-button:focus,
+  .combo-button-button:active {
+    outline-color: transparent;
+  }
+
+  .combo-button-trigger,
+  :global(.infonomic-combo-button-trigger) {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+  .combo-button-trigger:focus,
+  .combo-button-trigger:active {
+    outline-color: transparent;
+  }
+
+  .combo-button-options,
+  :global(.infonomic-combo-button-options) {
+    min-width: 120px;
+  }
+
+  .combo-button-options-item,
+  :global(.infonomic-combo-button-options-item) {
+  }
+}