@haiilo/catalyst 0.9.0 → 0.10.2

package/dist/components/cat-button2.js.map

@@ -1 +1 @@
-{"file":"cat-button2.js","mappings":"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","names":["log"],"sources":["./src/utils/breakpoints.ts","./src/utils/platform.ts","./src/utils/media-matcher.ts","./src/components/cat-button/cat-button.scss?tag=cat-button&encapsulation=shadow","./src/components/cat-button/cat-button.tsx"],"sourcesContent":["const _breakpoints = ['xs', 's', 'm', 'l', 'xl'] as const;\n\nexport type Breakpoint = typeof _breakpoints[number];\n\nexport const Breakpoints: { [breakpoint in Breakpoint]: string } = {\n  xs: '(max-width: 539.98px)',\n  s: '(max-width: 767.98px)',\n  m: '(max-width: 991.98px)',\n  l: '(max-width: 1199.98px)',\n  xl: '(max-width: 1399.98px)'\n};\n\nexport function isBreakpoint(value: unknown): value is Breakpoint {\n  return typeof value === 'string' && _breakpoints.includes(value as Breakpoint);\n}\n","// https://github.com/angular/components/blob/master/src/cdk/platform/platform.ts\n\n// Whether the current platform supports the V8 Break Iterator. The V8 check\n// is necessary to detect all Blink based browsers.\nlet hasV8BreakIterator: boolean;\n\n// We need a try/catch around the reference to `Intl`, because accessing it in some cases can\n// cause IE to throw. These cases are tied to particular versions of Windows and can happen if\n// the consumer is providing a polyfilled `Map`. See:\n// https://github.com/Microsoft/ChakraCore/issues/3189\n// https://github.com/angular/components/issues/15687\ntry {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  hasV8BreakIterator = typeof Intl !== 'undefined' && (Intl as any).v8BreakIterator;\n} catch {\n  hasV8BreakIterator = false;\n}\n\nexport class Platform {\n  /** Whether the current browser is Microsoft Edge. */\n  EDGE: boolean = /(edge)/i.test(navigator.userAgent);\n\n  /** Whether the current rendering engine is Microsoft Trident. */\n  TRIDENT: boolean = /(msie|trident)/i.test(navigator.userAgent);\n\n  // EdgeHTML and Trident mock Blink specific things and need to be excluded from this check.\n  /** Whether the current rendering engine is Blink. */\n  BLINK: boolean =\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    !!((window as any).chrome || hasV8BreakIterator) && typeof CSS !== 'undefined' && !this.EDGE && !this.TRIDENT;\n\n  // Webkit is part of the userAgent in EdgeHTML, Blink and Trident. Therefore we need to\n  // ensure that Webkit runs standalone and is not used as another engine's base.\n  /** Whether the current rendering engine is WebKit. */\n  WEBKIT: boolean = /AppleWebKit/i.test(navigator.userAgent) && !this.BLINK && !this.EDGE && !this.TRIDENT;\n\n  /** Whether the current platform is Apple iOS. */\n  IOS: boolean = /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window);\n\n  // It's difficult to detect the plain Gecko engine, because most of the browsers identify\n  // them self as Gecko-like browsers and modify the userAgent's according to that.\n  // Since we only cover one explicit Firefox case, we can simply check for Firefox\n  // instead of having an unstable check for Gecko.\n  /** Whether the current browser is Firefox. */\n  FIREFOX: boolean = /(firefox|minefield)/i.test(navigator.userAgent);\n\n  /** Whether the current platform is Android. */\n  // Trident on mobile adds the android platform to the userAgent to trick detections.\n  ANDROID: boolean = /android/i.test(navigator.userAgent) && !this.TRIDENT;\n\n  // Safari browsers will include the Safari keyword in their userAgent. Some browsers may fake\n  // this and just place the Safari keyword in the userAgent. To be more safe about Safari every\n  // Safari browser should also use Webkit as its layout engine.\n  /** Whether the current browser is Safari. */\n  SAFARI: boolean = /safari/i.test(navigator.userAgent) && this.WEBKIT;\n}\n","import log from 'loglevel';\nimport { Platform } from './platform';\n\n// https://github.com/angular/components/blob/master/src/cdk/layout/media-matcher.ts\n\n/** Global registry for all dynamically-created, injected media queries. */\nconst mediaQueriesForWebkitCompatibility: Set<string> = new Set<string>();\n\n/** Style tag that holds all of the dynamically-created media queries. */\nlet mediaQueryStyleNode: HTMLStyleElement | undefined;\n\n/** A utility for calling matchMedia queries. */\nexport class MediaMatcher {\n  private _platform;\n  private _matchMedia: (query: string) => MediaQueryList;\n\n  constructor() {\n    this._platform = new Platform();\n    this._matchMedia = window.matchMedia.bind(window);\n  }\n\n  /**\n   * Evaluates the given media query and returns the native MediaQueryList from which results\n   * can be retrieved.\n   * Confirms the layout engine will trigger for the selector query provided and returns the\n   * MediaQueryList for the query provided.\n   */\n  matchMedia(query: string): MediaQueryList {\n    if (this._platform.WEBKIT || this._platform.BLINK) {\n      createEmptyStyleRule(query);\n    }\n    return this._matchMedia(query);\n  }\n}\n\n/**\n * Creates an empty stylesheet that is used to work around browser inconsistencies related to\n * `matchMedia`. At the time of writing, it handles the following cases:\n * 1. On WebKit browsers, a media query has to have at least one rule in order for `matchMedia`\n * to fire. We work around it by declaring a dummy stylesheet with a `@media` declaration.\n * 2. In some cases Blink browsers will stop firing the `matchMedia` listener if none of the rules\n * inside the `@media` match existing elements on the page. We work around it by having one rule\n * targeting the `body`. See https://github.com/angular/components/issues/23546.\n */\nfunction createEmptyStyleRule(query: string) {\n  if (mediaQueriesForWebkitCompatibility.has(query)) {\n    return;\n  }\n\n  try {\n    if (!mediaQueryStyleNode) {\n      mediaQueryStyleNode = document.createElement('style');\n      mediaQueryStyleNode.setAttribute('type', 'text/css');\n      document.head.appendChild(mediaQueryStyleNode);\n    }\n    if (mediaQueryStyleNode.sheet) {\n      mediaQueryStyleNode.sheet.insertRule(`@media ${query} {body{ }}`, 0);\n      mediaQueriesForWebkitCompatibility.add(query);\n    }\n  } catch (e) {\n    log.error(e);\n  }\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: inline-block;\n  max-width: 100%;\n  vertical-align: middle;\n  @include cat-select(none);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.cat-button {\n  position: relative;\n  font: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: cat-border-radius('m');\n  text-decoration: none;\n  width: 100%;\n  box-sizing: border-box;\n  cursor: pointer;\n  transition: color cat-token('time.transition.s') linear, border-color cat-token('time.transition.s') linear,\n    background-color cat-token('time.transition.s') linear, box-shadow cat-token('time.transition.s') linear;\n\n  &:focus-visible {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n// ----- content\n\n.cat-button-content {\n  // flex: 1 1 auto;\n  // text-align: center;\n\n  .cat-button-ellipsed & {\n    @include cat-ellipsis;\n  }\n}\n\n// ----- disabled\n\n.cat-button-disabled {\n  @include cat-disabled;\n}\n\n// ----- round\n\n.cat-button-round {\n  border-radius: 10rem;\n}\n\n// ----- loading\n\n.cat-button-loading {\n  cursor: default;\n\n  cat-spinner {\n    position: absolute;\n  }\n\n  > *:not(cat-spinner) {\n    visibility: hidden;\n  }\n}\n\n// ----- theme\n\n.cat-button-filled {\n  background-color: cat-token-wrap(var(--bg));\n  color: cat-token-wrap(var(--fill));\n  font-weight: 600;\n  @include cat-font-smooth;\n}\n\n.cat-button-outlined {\n  background-color: cat-token('color.ui.background.body');\n  box-shadow: inset 0 0 0 1px cat-token-wrap(var(--base), $alpha: 0.2);\n  color: cat-token-wrap(var(--text));\n\n  &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n    background-color: cat-token-wrap(var(--base), $alpha: 0.05);\n  }\n\n  &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n    background-color: cat-token-wrap(var(--base), $alpha: 0.1);\n  }\n}\n\n.cat-button-text {\n  background-color: transparent;\n  color: cat-token-wrap(var(--text));\n  text-decoration: $cat-link-text-decoration;\n\n  &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n    text-decoration: $cat-link-text-decoration-hover;\n  }\n}\n\n@mixin theme($theme) {\n  .cat-button-#{$theme} {\n    --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n    --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    @if $theme == 'secondary' {\n      --base: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    } @else {\n      --base: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    }\n\n    &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n      --bg: #{cat-token('color.theme.#{$theme}.bgHover', $wrap: false)};\n      --fill: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};\n      --text: #{cat-token('color.theme.#{$theme}.textHover', $wrap: false)};\n    }\n\n    &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n      --bg: #{cat-token('color.theme.#{$theme}.bgActive', $wrap: false)};\n      --fill: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};\n      --text: #{cat-token('color.theme.#{$theme}.textActive', $wrap: false)};\n    }\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n\n// ----- size\n\n@mixin size($size, $fontSize, $padding) {\n  $-line-height: cat-body-line-height($fontSize);\n  $-total-height: cat-size($size);\n\n  .cat-button-#{$size} {\n    min-width: cat-size($size);\n    padding: ($-total-height - $-line-height) * 0.5 $padding;\n    @include cat-body($fontSize);\n\n    .cat-button-prefix {\n      margin-right: 0.25rem;\n    }\n\n    .cat-button-suffix {\n      margin-left: 0.25rem;\n    }\n\n    // normalize icon size for line height\n    @if $fontSize == 'm' {\n      cat-icon {\n        margin-top: -0.125rem;\n        margin-bottom: -0.125rem;\n      }\n    }\n\n    &.cat-button-icon {\n      width: $-total-height;\n      padding-left: 0;\n      padding-right: 0;\n    }\n\n    :host-context(nav) & {\n      padding-left: $cat-nav-padding-horizontal;\n      padding-right: $cat-nav-padding-horizontal;\n    }\n  }\n}\n\n@include size('xs', 's', 0.25rem);\n@include size('s', 'm', 0.5rem);\n@include size('m', 'm', 0.75rem);\n@include size('l', 'm', 1rem);\n@include size('xl', 'l', 1.25rem);\n\n// -- active state\n\n.cat-button-active::before {\n  content: '';\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0.25rem;\n  height: 100%;\n  background: cat-token-wrap(var(--base));\n}\n\n// ----- context\n\n:host-context(nav) {\n  width: 100%;\n\n  .cat-button {\n    box-shadow: none;\n    border-radius: 0;\n    justify-content: left;\n\n    &:focus-visible {\n      outline-offset: -2px;\n    }\n  }\n}\n\n:host(.cat-text-left) .cat-button {\n  justify-content: left;\n}\n\n:host(.cat-text-right) .cat-button {\n  justify-content: right;\n}\n","import { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\n\n/**\n * Buttons are used for interface actions. Primary style should be used only\n * once per view for main call-to-action.\n *\n * @part button - The native anchor or button element.\n * @part content - The textual content of the button.\n * @part prefix - The prefix icon.\n * @part suffix - The suffix icon.\n */\n@Component({\n  tag: 'cat-button',\n  styleUrl: 'cat-button.scss',\n  shadow: true\n})\nexport class CatButton {\n  private button!: HTMLButtonElement | HTMLAnchorElement;\n  private mediaMatcher?: MediaMatcher;\n  private mediaQueryList?: MediaQueryList;\n  private mediaQueryListener?: (event: MediaQueryListEvent) => void;\n\n  @State() _iconOnly = true;\n\n  /**\n   * The rendering style of the button.\n   */\n  @Prop() variant: 'filled' | 'outlined' | 'text' = 'outlined';\n\n  /**\n   * The color palette of the button.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'secondary';\n\n  /**\n   * Show an active status indicator on the left side of the button.\n   */\n  @Prop() active = false;\n\n  /**\n   * The size of the button.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The name of the button, which gets paired with the button's value when\n   * submitted as part of a form. Corresponds with the native HTML name\n   * attribute.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the button, which gets paired with the button's name when\n   * submitted as part of a form. Corresponds with the native HTML value\n   * attribute.\n   */\n  @Prop() value?: string;\n\n  /**\n   * Specifies that the button should be disabled. A disabled button is unusable\n   * and un-clickable. Corresponds with the native HTML disabled attribute.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Displays the button in a loading state with a spinner. Just like a disabled\n   * button, an inactive button is unusable and un-clickable. However, it\n   * retains the current focus state.\n   */\n  @Prop() loading = false;\n\n  /**\n   * Allows the button to submit a form.\n   */\n  @Prop() submit = false;\n\n  /**\n   * Disables ellipse overflowing button content.\n   */\n  @Prop() noEllipsis = false;\n\n  /**\n   * Use round button edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * A destination to link to, rendered in the href attribute of a link.\n   */\n  @Prop() url?: string;\n\n  /**\n   * Specifies where to open the linked document.\n   */\n  @Prop() urlTarget?: '_blank' | '_self';\n\n  /**\n   * The name of an icon to be displayed in the button.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Hide the actual button content and only display the icon.\n   */\n  @Prop() iconOnly: boolean | Breakpoint = false;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * Adds a unique identifier for the button. Please note that with this\n   * particular component this ID is added inside the web component. If you need\n   * an ID on the HTML element, use the regular `id` attribute instead.\n   */\n  @Prop() buttonId?: string;\n\n  /**\n   * Adds accessible label for the button that is only shown for screen\n   * readers. Typically, this label text replaces the visible text on the\n   * button for users who use assistive technology.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  @Watch('iconOnly')\n  onIconOnlyChanged(value: boolean | Breakpoint): void {\n    // teardown\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener!);\n    this.mediaQueryList = undefined;\n    this.mediaQueryListener = undefined;\n    // setup\n    if (isBreakpoint(value)) {\n      this.mediaMatcher ??= new MediaMatcher();\n      this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);\n      this.mediaQueryListener = (event: MediaQueryListEvent) => (this._iconOnly = event.matches);\n      this.mediaQueryList.addEventListener('change', this.mediaQueryListener);\n      this._iconOnly = this.mediaQueryList.matches;\n    } else {\n      this._iconOnly = value;\n    }\n  }\n\n  /**\n   * Emitted when the button is clicked.\n   */\n  @Event() catClick!: EventEmitter<MouseEvent>;\n\n  /**\n   * Emitted when the button received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the button loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad(): void {\n    this.onIconOnlyChanged(this.iconOnly);\n  }\n\n  componentWillRender(): void {\n    if (this.isIconButton && !this.a11yLabel) {\n      log.warn('[A11y] Missing ARIA label on icon button', this);\n    }\n  }\n\n  @Listen('click')\n  haltDisabledEvents(event: Event): void {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  /**\n   * Sets focus on the button. Use this method instead of `button.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.button.focus(options);\n  }\n\n  render() {\n    if (this.url) {\n      return (\n        <a\n          ref={el => (this.button = el as HTMLAnchorElement)}\n          href={this.disabled ? undefined : this.url}\n          target={this.urlTarget}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-label={this.a11yLabel}\n          id={this.buttonId}\n          part=\"button\"\n          class={{\n            'cat-button': true,\n            'cat-button-icon': this.isIconButton,\n            'cat-button-round': this.round,\n            'cat-button-loading': this.loading,\n            'cat-button-disabled': this.disabled,\n            'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n            [`cat-button-${this.variant}`]: Boolean(this.variant),\n            [`cat-button-${this.color}`]: Boolean(this.color),\n            [`cat-button-${this.size}`]: Boolean(this.size)\n          }}\n          onClick={this.onClick.bind(this)}\n          onFocus={this.onFocus.bind(this)}\n          onBlur={this.onBlur.bind(this)}\n        >\n          {this.content}\n        </a>\n      );\n    } else {\n      return (\n        <button\n          ref={el => (this.button = el as HTMLButtonElement)}\n          type={this.submit ? 'submit' : 'button'}\n          name={this.name}\n          value={this.value}\n          disabled={this.disabled}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-label={this.a11yLabel}\n          id={this.buttonId}\n          part=\"button\"\n          class={{\n            'cat-button': true,\n            'cat-button-active': this.active,\n            'cat-button-icon': this.isIconButton,\n            'cat-button-round': this.round ?? this.isIconButton,\n            'cat-button-loading': this.loading,\n            'cat-button-disabled': this.disabled,\n            'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n            [`cat-button-${this.variant}`]: Boolean(this.variant),\n            [`cat-button-${this.color}`]: Boolean(this.color),\n            [`cat-button-${this.size}`]: Boolean(this.size)\n          }}\n          onClick={this.onClick.bind(this)}\n          onFocus={this.onFocus.bind(this)}\n          onBlur={this.onBlur.bind(this)}\n        >\n          {this.content}\n        </button>\n      );\n    }\n  }\n\n  private get iconSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n    switch (this.size) {\n      case 'xs':\n        return 's';\n      default:\n        return 'l';\n    }\n  }\n\n  private get spinnerSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n    switch (this.size) {\n      case 'xs':\n        return 'xs';\n      default:\n        return 'm';\n    }\n  }\n\n  private get isIconButton() {\n    return Boolean(this.icon) && this._iconOnly;\n  }\n\n  private get hasPrefixIcon() {\n    return Boolean(this.icon) && !this._iconOnly && !this.iconRight;\n  }\n\n  private get hasSuffixIcon() {\n    return Boolean(this.icon) && !this._iconOnly && this.iconRight;\n  }\n\n  private get content() {\n    return [\n      this.hasPrefixIcon ? (\n        <cat-icon icon={this.icon} size={this.iconSize} class=\"cat-button-prefix\" part=\"prefix\"></cat-icon>\n      ) : null,\n      this.isIconButton ? (\n        <cat-icon icon={this.icon} size={this.iconSize}></cat-icon>\n      ) : (\n        <span class=\"cat-button-content\" part=\"content\">\n          <slot></slot>\n        </span>\n      ),\n      this.hasSuffixIcon ? (\n        <cat-icon icon={this.icon} size={this.iconSize} class=\"cat-button-suffix\" part=\"suffix\"></cat-icon>\n      ) : null,\n      this.loading ? <cat-spinner size={this.spinnerSize}></cat-spinner> : null\n    ];\n  }\n\n  private onClick(event: MouseEvent) {\n    this.catClick.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"],"version":3}
+{"file":"cat-button2.js","mappings":"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","names":["log"],"sources":["./src/utils/breakpoints.ts","./src/utils/platform.ts","./src/utils/media-matcher.ts","./src/components/cat-button/cat-button.scss?tag=cat-button&encapsulation=shadow","./src/components/cat-button/cat-button.tsx"],"sourcesContent":["const _breakpoints = ['xs', 's', 'm', 'l', 'xl'] as const;\n\nexport type Breakpoint = typeof _breakpoints[number];\n\nexport const Breakpoints: { [breakpoint in Breakpoint]: string } = {\n  xs: '(max-width: 539.98px)',\n  s: '(max-width: 767.98px)',\n  m: '(max-width: 991.98px)',\n  l: '(max-width: 1199.98px)',\n  xl: '(max-width: 1399.98px)'\n};\n\nexport function isBreakpoint(value: unknown): value is Breakpoint {\n  return typeof value === 'string' && _breakpoints.includes(value as Breakpoint);\n}\n","// https://github.com/angular/components/blob/master/src/cdk/platform/platform.ts\n\n// Whether the current platform supports the V8 Break Iterator. The V8 check\n// is necessary to detect all Blink based browsers.\nlet hasV8BreakIterator: boolean;\n\n// We need a try/catch around the reference to `Intl`, because accessing it in some cases can\n// cause IE to throw. These cases are tied to particular versions of Windows and can happen if\n// the consumer is providing a polyfilled `Map`. See:\n// https://github.com/Microsoft/ChakraCore/issues/3189\n// https://github.com/angular/components/issues/15687\ntry {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  hasV8BreakIterator = typeof Intl !== 'undefined' && (Intl as any).v8BreakIterator;\n} catch {\n  hasV8BreakIterator = false;\n}\n\nexport class Platform {\n  /** Whether the current browser is Microsoft Edge. */\n  EDGE: boolean = /(edge)/i.test(navigator.userAgent);\n\n  /** Whether the current rendering engine is Microsoft Trident. */\n  TRIDENT: boolean = /(msie|trident)/i.test(navigator.userAgent);\n\n  // EdgeHTML and Trident mock Blink specific things and need to be excluded from this check.\n  /** Whether the current rendering engine is Blink. */\n  BLINK: boolean =\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    !!((window as any).chrome || hasV8BreakIterator) && typeof CSS !== 'undefined' && !this.EDGE && !this.TRIDENT;\n\n  // Webkit is part of the userAgent in EdgeHTML, Blink and Trident. Therefore we need to\n  // ensure that Webkit runs standalone and is not used as another engine's base.\n  /** Whether the current rendering engine is WebKit. */\n  WEBKIT: boolean = /AppleWebKit/i.test(navigator.userAgent) && !this.BLINK && !this.EDGE && !this.TRIDENT;\n\n  /** Whether the current platform is Apple iOS. */\n  IOS: boolean = /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window);\n\n  // It's difficult to detect the plain Gecko engine, because most of the browsers identify\n  // them self as Gecko-like browsers and modify the userAgent's according to that.\n  // Since we only cover one explicit Firefox case, we can simply check for Firefox\n  // instead of having an unstable check for Gecko.\n  /** Whether the current browser is Firefox. */\n  FIREFOX: boolean = /(firefox|minefield)/i.test(navigator.userAgent);\n\n  /** Whether the current platform is Android. */\n  // Trident on mobile adds the android platform to the userAgent to trick detections.\n  ANDROID: boolean = /android/i.test(navigator.userAgent) && !this.TRIDENT;\n\n  // Safari browsers will include the Safari keyword in their userAgent. Some browsers may fake\n  // this and just place the Safari keyword in the userAgent. To be more safe about Safari every\n  // Safari browser should also use Webkit as its layout engine.\n  /** Whether the current browser is Safari. */\n  SAFARI: boolean = /safari/i.test(navigator.userAgent) && this.WEBKIT;\n}\n","import log from 'loglevel';\nimport { Platform } from './platform';\n\n// https://github.com/angular/components/blob/master/src/cdk/layout/media-matcher.ts\n\n/** Global registry for all dynamically-created, injected media queries. */\nconst mediaQueriesForWebkitCompatibility: Set<string> = new Set<string>();\n\n/** Style tag that holds all of the dynamically-created media queries. */\nlet mediaQueryStyleNode: HTMLStyleElement | undefined;\n\n/** A utility for calling matchMedia queries. */\nexport class MediaMatcher {\n  private _platform;\n  private _matchMedia: (query: string) => MediaQueryList;\n\n  constructor() {\n    this._platform = new Platform();\n    this._matchMedia = window.matchMedia.bind(window);\n  }\n\n  /**\n   * Evaluates the given media query and returns the native MediaQueryList from which results\n   * can be retrieved.\n   * Confirms the layout engine will trigger for the selector query provided and returns the\n   * MediaQueryList for the query provided.\n   */\n  matchMedia(query: string): MediaQueryList {\n    if (this._platform.WEBKIT || this._platform.BLINK) {\n      createEmptyStyleRule(query);\n    }\n    return this._matchMedia(query);\n  }\n}\n\n/**\n * Creates an empty stylesheet that is used to work around browser inconsistencies related to\n * `matchMedia`. At the time of writing, it handles the following cases:\n * 1. On WebKit browsers, a media query has to have at least one rule in order for `matchMedia`\n * to fire. We work around it by declaring a dummy stylesheet with a `@media` declaration.\n * 2. In some cases Blink browsers will stop firing the `matchMedia` listener if none of the rules\n * inside the `@media` match existing elements on the page. We work around it by having one rule\n * targeting the `body`. See https://github.com/angular/components/issues/23546.\n */\nfunction createEmptyStyleRule(query: string) {\n  if (mediaQueriesForWebkitCompatibility.has(query)) {\n    return;\n  }\n\n  try {\n    if (!mediaQueryStyleNode) {\n      mediaQueryStyleNode = document.createElement('style');\n      mediaQueryStyleNode.setAttribute('type', 'text/css');\n      document.head.appendChild(mediaQueryStyleNode);\n    }\n    if (mediaQueryStyleNode.sheet) {\n      mediaQueryStyleNode.sheet.insertRule(`@media ${query} {body{ }}`, 0);\n      mediaQueriesForWebkitCompatibility.add(query);\n    }\n  } catch (e) {\n    log.error(e);\n  }\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: inline-block;\n  max-width: 100%;\n  vertical-align: middle;\n  @include cat-select(none);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.cat-button {\n  position: relative;\n  font: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: cat-border-radius('m');\n  text-decoration: none;\n  width: 100%;\n  box-sizing: border-box;\n  cursor: pointer;\n  transition: color cat-token('time.transition.s') linear, border-color cat-token('time.transition.s') linear,\n    background-color cat-token('time.transition.s') linear, box-shadow cat-token('time.transition.s') linear;\n\n  &:focus-visible {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n// ----- content\n\n.cat-button-content {\n  // flex: 1 1 auto;\n  // text-align: center;\n\n  .cat-button-ellipsed & {\n    @include cat-ellipsis;\n  }\n}\n\n// ----- disabled\n\n.cat-button-disabled {\n  @include cat-disabled;\n}\n\n// ----- round\n\n.cat-button-round {\n  border-radius: 10rem;\n}\n\n// ----- loading\n\n.cat-button-loading {\n  cursor: default;\n\n  cat-spinner {\n    position: absolute;\n  }\n\n  > *:not(cat-spinner) {\n    visibility: hidden;\n  }\n}\n\n// ----- theme\n\n.cat-button-filled {\n  background-color: cat-token-wrap(var(--bg));\n  color: cat-token-wrap(var(--fill));\n  font-weight: 600;\n  @include cat-font-smooth;\n}\n\n.cat-button-outlined {\n  background-color: cat-token('color.ui.background.body');\n  box-shadow: inset 0 0 0 1px cat-token-wrap(var(--base), $alpha: 0.2);\n  color: cat-token-wrap(var(--text));\n\n  &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n    background-color: cat-token-wrap(var(--base), $alpha: 0.05);\n  }\n\n  &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n    background-color: cat-token-wrap(var(--base), $alpha: 0.1);\n  }\n}\n\n.cat-button-text {\n  background-color: transparent;\n  color: cat-token-wrap(var(--text));\n  text-decoration: $cat-link-text-decoration;\n\n  &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n    text-decoration: $cat-button-text-decoration-hover;\n    background-color: rgba(var(--base), 0.05);\n  }\n}\n\n@mixin theme($theme) {\n  .cat-button-#{$theme} {\n    --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n    --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    @if $theme == 'secondary' {\n      --base: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    } @else {\n      --base: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    }\n\n    &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n      --bg: #{cat-token('color.theme.#{$theme}.bgHover', $wrap: false)};\n      --fill: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};\n      --text: #{cat-token('color.theme.#{$theme}.textHover', $wrap: false)};\n    }\n\n    &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n      --bg: #{cat-token('color.theme.#{$theme}.bgActive', $wrap: false)};\n      --fill: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};\n      --text: #{cat-token('color.theme.#{$theme}.textActive', $wrap: false)};\n    }\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n\n// ----- size\n\n@mixin size($size, $fontSize, $padding) {\n  $-line-height: cat-body-line-height($fontSize);\n  $-total-height: cat-size($size);\n\n  .cat-button-#{$size} {\n    min-width: cat-size($size);\n    padding: ($-total-height - $-line-height) * 0.5 $padding;\n    @include cat-body($fontSize);\n\n    .cat-button-prefix {\n      margin-right: 0.25rem;\n    }\n\n    .cat-button-suffix {\n      margin-left: 0.25rem;\n    }\n\n    // normalize icon size for line height\n    @if $fontSize == 'm' {\n      cat-icon {\n        margin-top: -0.125rem;\n        margin-bottom: -0.125rem;\n      }\n    }\n\n    &.cat-button-icon {\n      width: $-total-height;\n      padding-left: 0;\n      padding-right: 0;\n    }\n\n    :host-context(nav) & {\n      padding-left: $cat-nav-padding-horizontal;\n      padding-right: $cat-nav-padding-horizontal;\n    }\n  }\n}\n\n@include size('xs', 's', 0.25rem);\n@include size('s', 'm', 0.5rem);\n@include size('m', 'm', 0.75rem);\n@include size('l', 'm', 1rem);\n@include size('xl', 'l', 1.25rem);\n\n// -- active state\n\n.cat-button-active::before {\n  content: '';\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0.25rem;\n  height: 100%;\n  background: cat-token-wrap(var(--base));\n}\n\n// ----- context\n\n:host-context(nav) {\n  width: 100%;\n\n  .cat-button {\n    box-shadow: none;\n    border-radius: 0;\n    justify-content: left;\n\n    &:focus-visible {\n      outline-offset: -2px;\n    }\n  }\n}\n\n:host(.cat-text-left) .cat-button {\n  justify-content: left;\n}\n\n:host(.cat-text-right) .cat-button {\n  justify-content: right;\n}\n","import { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\n\n/**\n * Buttons are used for interface actions. Primary style should be used only\n * once per view for main call-to-action.\n *\n * @part button - The native anchor or button element.\n * @part content - The textual content of the button.\n * @part prefix - The prefix icon.\n * @part suffix - The suffix icon.\n */\n@Component({\n  tag: 'cat-button',\n  styleUrl: 'cat-button.scss',\n  shadow: true\n})\nexport class CatButton {\n  private button!: HTMLButtonElement | HTMLAnchorElement;\n  private mediaMatcher?: MediaMatcher;\n  private mediaQueryList?: MediaQueryList;\n  private mediaQueryListener?: (event: MediaQueryListEvent) => void;\n\n  @State() _iconOnly = true;\n\n  /**\n   * The rendering style of the button.\n   */\n  @Prop() variant: 'filled' | 'outlined' | 'text' = 'outlined';\n\n  /**\n   * The color palette of the button.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'secondary';\n\n  /**\n   * Show an active status indicator on the left side of the button.\n   */\n  @Prop() active = false;\n\n  /**\n   * The size of the button.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The name of the button, which gets paired with the button's value when\n   * submitted as part of a form. Corresponds with the native HTML name\n   * attribute.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the button, which gets paired with the button's name when\n   * submitted as part of a form. Corresponds with the native HTML value\n   * attribute.\n   */\n  @Prop() value?: string;\n\n  /**\n   * Specifies that the button should be disabled. A disabled button is unusable\n   * and un-clickable. Corresponds with the native HTML disabled attribute.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Displays the button in a loading state with a spinner. Just like a disabled\n   * button, an inactive button is unusable and un-clickable. However, it\n   * retains the current focus state.\n   */\n  @Prop() loading = false;\n\n  /**\n   * Allows the button to submit a form.\n   */\n  @Prop() submit = false;\n\n  /**\n   * Disables ellipse overflowing button content.\n   */\n  @Prop() noEllipsis = false;\n\n  /**\n   * Use round button edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * A destination to link to, rendered in the href attribute of a link.\n   */\n  @Prop() url?: string;\n\n  /**\n   * Specifies where to open the linked document.\n   */\n  @Prop() urlTarget?: '_blank' | '_self';\n\n  /**\n   * The name of an icon to be displayed in the button.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Hide the actual button content and only display the icon.\n   */\n  @Prop() iconOnly: boolean | Breakpoint = false;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * Adds a unique identifier for the button. Please note that with this\n   * particular component this ID is added inside the web component. If you need\n   * an ID on the HTML element, use the regular `id` attribute instead.\n   */\n  @Prop() buttonId?: string;\n\n  /**\n   * Adds accessible label for the button that is only shown for screen\n   * readers. Typically, this label text replaces the visible text on the\n   * button for users who use assistive technology.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  @Watch('iconOnly')\n  onIconOnlyChanged(value: boolean | Breakpoint): void {\n    // teardown\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener!);\n    this.mediaQueryList = undefined;\n    this.mediaQueryListener = undefined;\n    // setup\n    if (isBreakpoint(value)) {\n      this.mediaMatcher ??= new MediaMatcher();\n      this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);\n      this.mediaQueryListener = (event: MediaQueryListEvent) => (this._iconOnly = event.matches);\n      this.mediaQueryList.addEventListener('change', this.mediaQueryListener);\n      this._iconOnly = this.mediaQueryList.matches;\n    } else {\n      this._iconOnly = value;\n    }\n  }\n\n  /**\n   * Emitted when the button is clicked.\n   */\n  @Event() catClick!: EventEmitter<MouseEvent>;\n\n  /**\n   * Emitted when the button received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the button loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad(): void {\n    this.onIconOnlyChanged(this.iconOnly);\n  }\n\n  componentWillRender(): void {\n    if (this.isIconButton && !this.a11yLabel) {\n      log.warn('[A11y] Missing ARIA label on icon button', this);\n    }\n  }\n\n  @Listen('click')\n  haltDisabledEvents(event: Event): void {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  /**\n   * Sets focus on the button. Use this method instead of `button.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.button.focus(options);\n  }\n\n  render() {\n    if (this.url) {\n      return (\n        <a\n          ref={el => (this.button = el as HTMLAnchorElement)}\n          href={this.disabled ? undefined : this.url}\n          target={this.urlTarget}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-label={this.a11yLabel}\n          id={this.buttonId}\n          part=\"button\"\n          class={{\n            'cat-button': true,\n            'cat-button-icon': this.isIconButton,\n            'cat-button-round': this.round,\n            'cat-button-loading': this.loading,\n            'cat-button-disabled': this.disabled,\n            'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n            [`cat-button-${this.variant}`]: Boolean(this.variant),\n            [`cat-button-${this.color}`]: Boolean(this.color),\n            [`cat-button-${this.size}`]: Boolean(this.size)\n          }}\n          onClick={this.onClick.bind(this)}\n          onFocus={this.onFocus.bind(this)}\n          onBlur={this.onBlur.bind(this)}\n        >\n          {this.content}\n        </a>\n      );\n    } else {\n      return (\n        <button\n          ref={el => (this.button = el as HTMLButtonElement)}\n          type={this.submit ? 'submit' : 'button'}\n          name={this.name}\n          value={this.value}\n          disabled={this.disabled}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-label={this.a11yLabel}\n          id={this.buttonId}\n          part=\"button\"\n          class={{\n            'cat-button': true,\n            'cat-button-active': this.active,\n            'cat-button-icon': this.isIconButton,\n            'cat-button-round': this.round ?? this.isIconButton,\n            'cat-button-loading': this.loading,\n            'cat-button-disabled': this.disabled,\n            'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n            [`cat-button-${this.variant}`]: Boolean(this.variant),\n            [`cat-button-${this.color}`]: Boolean(this.color),\n            [`cat-button-${this.size}`]: Boolean(this.size)\n          }}\n          onClick={this.onClick.bind(this)}\n          onFocus={this.onFocus.bind(this)}\n          onBlur={this.onBlur.bind(this)}\n        >\n          {this.content}\n        </button>\n      );\n    }\n  }\n\n  private get iconSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n    switch (this.size) {\n      case 'xs':\n        return 's';\n      default:\n        return 'l';\n    }\n  }\n\n  private get spinnerSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n    switch (this.size) {\n      case 'xs':\n        return 'xs';\n      default:\n        return 'm';\n    }\n  }\n\n  private get isIconButton() {\n    return Boolean(this.icon) && this._iconOnly;\n  }\n\n  private get hasPrefixIcon() {\n    return Boolean(this.icon) && !this._iconOnly && !this.iconRight;\n  }\n\n  private get hasSuffixIcon() {\n    return Boolean(this.icon) && !this._iconOnly && this.iconRight;\n  }\n\n  private get content() {\n    return [\n      this.hasPrefixIcon ? (\n        <cat-icon icon={this.icon} size={this.iconSize} class=\"cat-button-prefix\" part=\"prefix\"></cat-icon>\n      ) : null,\n      this.isIconButton ? (\n        <cat-icon icon={this.icon} size={this.iconSize}></cat-icon>\n      ) : (\n        <span class=\"cat-button-content\" part=\"content\">\n          <slot></slot>\n        </span>\n      ),\n      this.hasSuffixIcon ? (\n        <cat-icon icon={this.icon} size={this.iconSize} class=\"cat-button-suffix\" part=\"suffix\"></cat-icon>\n      ) : null,\n      this.loading ? <cat-spinner size={this.spinnerSize}></cat-spinner> : null\n    ];\n  }\n\n  private onClick(event: MouseEvent) {\n    this.catClick.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"],"version":3}

package/dist/components/cat-card.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const catCardCss = ":host{display:block;margin-bottom:1rem;border-radius:0.5rem;background-color:white;padding:1.5rem}:host([hidden]){display:none}::slotted(nav){margin:-1rem -1.5rem !important}::slotted(:last-child){margin-bottom:0}";
+const catCardCss = ":host{display:block;margin-bottom:1rem;border-radius:0.5rem;background-color:white;padding:1.5rem}:host([hidden]){display:none}::slotted(nav){margin:-0.5rem -1.5rem !important}::slotted(:last-child){margin-bottom:0}::slotted(.cat-card-pull){margin:-1.5rem !important;width:calc(100% + 3rem) !important;height:calc(100% + 3rem) !important}::slotted(.cat-card-pull-h){margin-left:-1.5rem !important;margin-right:-1.5rem !important;width:calc(100% + 3rem) !important}::slotted(.cat-card-pull-v){margin-top:-1.5rem !important;margin-bottom:-1.5rem !important;height:calc(100% + 3rem) !important}::slotted(.cat-card-pull-t){margin-top:-1.5rem !important}::slotted(.cat-card-pull-l){margin-left:-1.5rem !important}::slotted(.cat-card-pull-r){margin-right:-1.5rem !important}::slotted(.cat-card-pull-b){margin-bottom:-1.5rem !important}";
 
 const CatCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/cat-card.js.map

@@ -1 +1 @@
-{"file":"cat-card.js","mappings":";;AAAA,MAAM,UAAU,GAAG,uNAAuN;;MCW7NA,SAAO;;;;;;EAClB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":["CatCard"],"sources":["./src/components/cat-card/cat-card.scss?tag=cat-card&encapsulation=shadow","./src/components/cat-card/cat-card.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n$-padding: 1.5rem;\n\n:host {\n  display: block;\n  margin-bottom: $cat-body-margin-bottom;\n  border-radius: cat-border-radius('l');\n  background-color: cat-token('color.ui.background.body');\n  padding: $-padding;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n::slotted(nav) {\n  margin: #{$cat-body-margin-bottom * 0.5 - $-padding} #{-$-padding} !important;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * Cards are surfaces that display content and actions on a single topic. They\n * should be easy to scan for relevant and actionable information.\n */\n@Component({\n  tag: 'cat-card',\n  styleUrl: 'cat-card.scss',\n  shadow: true\n})\nexport class CatCard {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cat-card.js","mappings":";;AAAA,MAAM,UAAU,GAAG,+zBAA+zB;;MCWr0BA,SAAO;;;;;;EAClB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":["CatCard"],"sources":["./src/components/cat-card/cat-card.scss?tag=cat-card&encapsulation=shadow","./src/components/cat-card/cat-card.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n$-padding: 1.5rem;\n\n:host {\n  display: block;\n  margin-bottom: $cat-body-margin-bottom;\n  border-radius: cat-border-radius('l');\n  background-color: cat-token('color.ui.background.body');\n  padding: $-padding;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n::slotted(nav) {\n  margin: #{$cat-body-margin-bottom - $-padding} #{-$-padding} !important;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0;\n}\n\n// --- pull out helper classes\n\n::slotted(.cat-card-pull) {\n  margin: -$-padding !important;\n  width: calc(100% + #{2 * $-padding}) !important;\n  height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-h) {\n  margin-left: -$-padding !important;\n  margin-right: -$-padding !important;\n  width: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-v) {\n  margin-top: -$-padding !important;\n  margin-bottom: -$-padding !important;\n  height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-t) {\n  margin-top: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-l) {\n  margin-left: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-r) {\n  margin-right: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-b) {\n  margin-bottom: -$-padding !important;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * Cards are surfaces that display content and actions on a single topic. They\n * should be easy to scan for relevant and actionable information.\n */\n@Component({\n  tag: 'cat-card',\n  styleUrl: 'cat-card.scss',\n  shadow: true\n})\nexport class CatCard {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cat-checkbox.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { l as loglevel } from './loglevel.js';
 import { C as CatFormHint } from './cat-form-hint.js';
 
-const catCheckboxCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}input{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid #d7dbe0;border-radius:0.125rem;transition:background-color 0.13s ease, border-color 0.13s ease}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 0.13s ease;width:70%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
+const catCheckboxCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.label-left{flex-direction:row-reverse}input{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid #d7dbe0;border-radius:0.125rem;transition:background-color 0.13s ease, border-color 0.13s ease}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 0.13s ease;width:70%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
 
 let nextUniqueId = 0;
 const CatCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -39,6 +39,10 @@ const CatCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
      * Required state of the checkbox
      */
     this.required = false;
+    /**
+     * Whether the label should appear to the left of the checkbox.
+     */
+    this.labelLeft = false;
   }
   componentDidLoad() {
     if (this.input && this.indeterminate) {
@@ -61,7 +65,7 @@ const CatCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.input.focus(options);
   }
   render() {
-    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } }, h("input", { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, h("svg", { class: "check", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), h("svg", { class: "dash", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 5 10.5 5" }))), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
+    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, h("svg", { class: "check", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), h("svg", { class: "dash", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 5 10.5 5" }))), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
   }
   get hintSection() {
     const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
@@ -89,6 +93,7 @@ const CatCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "required": [4],
     "value": [1025],
     "hint": [1],
+    "labelLeft": [4, "label-left"],
     "hasSlottedLabel": [32],
     "setFocus": [64]
   }]);

package/dist/components/cat-checkbox.js.map

@@ -1 +1 @@
-{"file":"cat-checkbox.js","mappings":"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","names":["CatCheckbox","log"],"sources":["./src/components/cat-checkbox/cat-checkbox.scss?tag=cat-checkbox&encapsulation=shadow","./src/components/cat-checkbox/cat-checkbox.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nlabel {\n  flex: 0 1 auto;\n  display: flex;\n  gap: 0.5rem;\n  @include cat-body('m');\n  @include cat-select(none);\n  cursor: pointer;\n}\n\ninput {\n  @include cat-visually-hidden;\n}\n\n.box {\n  flex: 0 0 auto;\n  display: flex;\n  position: relative;\n  height: 1.25rem;\n  width: 1.25rem;\n  background-color: cat-token('color.ui.background.input');\n  border: 1px solid cat-token('color.ui.border.input');\n  border-radius: cat-border-radius(s);\n  transition: background-color cat-token('time.transition.s') ease, border-color cat-token('time.transition.s') ease;\n\n  svg {\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    stroke-dasharray: 16px;\n    stroke-dashoffset: 16px;\n    transition: all cat-token('time.transition.s') ease;\n    width: 70%;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) scale(0.99);\n  }\n\n  :checked + & {\n    background-color: cat-token('color.theme.primary.bg');\n    border-color: cat-token('color.theme.primary.bg');\n    stroke: cat-token('color.theme.primary.fill');\n\n    .check {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  :indeterminate + & {\n    background-color: cat-token('color.theme.primary.bg');\n    border-color: cat-token('color.theme.primary.bg');\n    stroke: cat-token('color.theme.primary.fill');\n\n    .dash {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  :focus-visible + & {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n.label {\n  flex: 1 1 auto;\n\n  .is-hidden & {\n    @include cat-visually-hidden;\n  }\n}\n\n.is-disabled {\n  cursor: not-allowed;\n  color: cat-token('color.ui.font.muted');\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Checkboxes are used to let a user choose one or more options from a limited\n * number of options.\n *\n * @slot hint - Optional hint element to be displayed with the checkbox.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part checkbox - The checkbox element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-checkbox',\n  styleUrls: ['cat-checkbox.scss'],\n  shadow: true\n})\nexport class CatCheckbox {\n  private readonly id = `cat-checkbox-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Checked state of the checkbox\n   */\n  @Prop() checked = false;\n\n  /**\n   * Disabled state of the checkbox\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Indeterminate state of the checkbox\n   */\n  @Prop() indeterminate = false;\n\n  /**\n   * Label of the checkbox which is presented in the UI\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the input\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the checkbox\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the checkbox\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Optional hint text(s) to be displayed with the checkbox.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Emitted when the checked status of the checkbox is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the checkbox received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the checkbox loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentDidLoad() {\n    if (this.input && this.indeterminate) {\n      this.input.indeterminate = true;\n    }\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on checkbox', this);\n    }\n  }\n\n  /**\n   * Sets focus on the checkbox. Use this method instead of `checkbox.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  render() {\n    return (\n      <Host>\n        <label htmlFor={this.id} class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled }}>\n          <input\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n          />\n          <span class=\"box\" aria-hidden=\"true\" part=\"checkbox\">\n            <svg class=\"check\" viewBox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n            </svg>\n            <svg class=\"dash\" viewBox=\"0 0 12 10\">\n              <polyline points=\"1.5 5 10.5 5\"></polyline>\n            </svg>\n          </span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hintSection}\n      </Host>\n    );\n  }\n\n  private get hintSection() {\n    const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    return (\n      (this.hint || hasSlottedHint) && (\n        <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n      )\n    );\n  }\n\n  private onInput(event: Event) {\n    this.value = this.input.value;\n    this.catChange.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"],"version":3}
+{"file":"cat-checkbox.js","mappings":"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","names":["CatCheckbox","log"],"sources":["./src/components/cat-checkbox/cat-checkbox.scss?tag=cat-checkbox&encapsulation=shadow","./src/components/cat-checkbox/cat-checkbox.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nlabel {\n  flex: 0 1 auto;\n  display: flex;\n  gap: 0.5rem;\n  @include cat-body('m');\n  @include cat-select(none);\n  cursor: pointer;\n}\n\n.label-left {\n  flex-direction: row-reverse;\n}\n\ninput {\n  @include cat-visually-hidden;\n}\n\n.box {\n  flex: 0 0 auto;\n  display: flex;\n  position: relative;\n  height: 1.25rem;\n  width: 1.25rem;\n  background-color: cat-token('color.ui.background.input');\n  border: 1px solid cat-token('color.ui.border.input');\n  border-radius: cat-border-radius(s);\n  transition: background-color cat-token('time.transition.s') ease, border-color cat-token('time.transition.s') ease;\n\n  svg {\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    stroke-dasharray: 16px;\n    stroke-dashoffset: 16px;\n    transition: all cat-token('time.transition.s') ease;\n    width: 70%;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) scale(0.99);\n  }\n\n  :checked + & {\n    background-color: cat-token('color.theme.primary.bg');\n    border-color: cat-token('color.theme.primary.bg');\n    stroke: cat-token('color.theme.primary.fill');\n\n    .check {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  :indeterminate + & {\n    background-color: cat-token('color.theme.primary.bg');\n    border-color: cat-token('color.theme.primary.bg');\n    stroke: cat-token('color.theme.primary.fill');\n\n    .dash {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  :focus-visible + & {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n.label {\n  flex: 1 1 auto;\n\n  .is-hidden & {\n    @include cat-visually-hidden;\n  }\n}\n\n.is-disabled {\n  cursor: not-allowed;\n  color: cat-token('color.ui.font.muted');\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Checkboxes are used to let a user choose one or more options from a limited\n * number of options.\n *\n * @slot hint - Optional hint element to be displayed with the checkbox.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part checkbox - The checkbox element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-checkbox',\n  styleUrls: ['cat-checkbox.scss'],\n  shadow: true\n})\nexport class CatCheckbox {\n  private readonly id = `cat-checkbox-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Checked state of the checkbox\n   */\n  @Prop() checked = false;\n\n  /**\n   * Disabled state of the checkbox\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Indeterminate state of the checkbox\n   */\n  @Prop() indeterminate = false;\n\n  /**\n   * Label of the checkbox which is presented in the UI\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the input\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the checkbox\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the checkbox\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Optional hint text(s) to be displayed with the checkbox.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the checkbox.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Emitted when the checked status of the checkbox is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the checkbox received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the checkbox loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentDidLoad() {\n    if (this.input && this.indeterminate) {\n      this.input.indeterminate = true;\n    }\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on checkbox', this);\n    }\n  }\n\n  /**\n   * Sets focus on the checkbox. Use this method instead of `checkbox.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n        >\n          <input\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n          />\n          <span class=\"box\" aria-hidden=\"true\" part=\"checkbox\">\n            <svg class=\"check\" viewBox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n            </svg>\n            <svg class=\"dash\" viewBox=\"0 0 12 10\">\n              <polyline points=\"1.5 5 10.5 5\"></polyline>\n            </svg>\n          </span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hintSection}\n      </Host>\n    );\n  }\n\n  private get hintSection() {\n    const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    return (\n      (this.hint || hasSlottedHint) && (\n        <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n      )\n    );\n  }\n\n  private onInput(event: Event) {\n    this.value = this.input.value;\n    this.catChange.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"],"version":3}

package/dist/components/cat-i18n-registry.js

@@ -41,10 +41,11 @@ class CatI18nRegistry {
   t(key, params) {
     var _a;
     const message = (_a = this._dicts.get(this._locale)) === null || _a === void 0 ? void 0 : _a.get(key);
-    if (!message) {
+    if (message === undefined) {
       loglevel.error(`[CatI18nRegistry] Unknown message for ${this._locale}: ${key}`);
+      return '';
     }
-    return (message === null || message === void 0 ? void 0 : message.replace(/{{\s*([-a-zA-Z._]+)\s*}}/g, (_match, key) => { var _a; return `${(_a = params === null || params === void 0 ? void 0 : params[key]) !== null && _a !== void 0 ? _a : ''}`; })) || '';
+    return message.replace(/{{\s*([-a-zA-Z._]+)\s*}}/g, (_match, key) => { var _a; return `${(_a = params === null || params === void 0 ? void 0 : params[key]) !== null && _a !== void 0 ? _a : ''}`; });
   }
   buildEvent(name, detail) {
     return new CustomEvent(name, {

package/dist/components/cat-i18n-registry.js.map

@@ -1 +1 @@
-{"file":"cat-i18n-registry.js","mappings":"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","names":["log"],"sources":["./src/components/cat-i18n/cat-i18n-registry.ts"],"sourcesContent":["import log from 'loglevel';\n\nexport class CatI18nRegistry {\n  private static instance: CatI18nRegistry;\n\n  private _locale = 'en';\n  private readonly _dicts: Map<string, Map<string, string>> = new Map();\n\n  private constructor() {\n    // hide constructor\n  }\n\n  static getInstance(): CatI18nRegistry {\n    if (!CatI18nRegistry.instance) {\n      CatI18nRegistry.instance = new CatI18nRegistry();\n    }\n    return CatI18nRegistry.instance;\n  }\n\n  locale(locale?: string): string {\n    if (locale) {\n      this._locale = locale;\n      log.info(`[CatI18nRegistry] Locale set to ${locale}`);\n      window.dispatchEvent(this.buildEvent('cat-i18n-locale', { locale }));\n    }\n    return this._locale;\n  }\n\n  register(locale: string, i18n: { [key: string]: string }): void {\n    const dict = this.getDict(locale);\n    Object.entries(i18n).forEach(([key, message]) => dict.set(key, message));\n    log.info(`[CatI18nRegistry] Registered messages for ${locale}`, i18n);\n    window.dispatchEvent(this.buildEvent('cat-i18n-register', { i18n }));\n  }\n\n  clear(locale?: string): void {\n    if (locale) {\n      this.getDict(locale).clear();\n      log.info(`[CatI18nRegistry] Cleared messages for ${locale}`);\n      window.dispatchEvent(this.buildEvent('cat-i18n-clear', { locale }));\n    } else {\n      this._dicts.clear();\n      log.info(`[CatI18nRegistry] Cleared messages`);\n      window.dispatchEvent(this.buildEvent('cat-i18n-clear'));\n    }\n  }\n\n  t(key: string, params?: { [key: string]: string | number }): string {\n    const message = this._dicts.get(this._locale)?.get(key);\n    if (!message) {\n      log.error(`[CatI18nRegistry] Unknown message for ${this._locale}: ${key}`);\n    }\n    return message?.replace(/{{\\s*([-a-zA-Z._]+)\\s*}}/g, (_match, key) => `${params?.[key] ?? ''}`) || '';\n  }\n\n  private buildEvent<T>(name: string, detail?: T) {\n    return new CustomEvent(name, {\n      bubbles: true,\n      composed: true,\n      detail\n    });\n  }\n\n  private getDict(lang: string) {\n    let dict = this._dicts.get(lang);\n    if (!dict) {\n      dict = new Map();\n      this._dicts.set(lang, dict);\n    }\n    return dict;\n  }\n}\n"],"version":3}
+{"file":"cat-i18n-registry.js","mappings":"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","names":["log"],"sources":["./src/components/cat-i18n/cat-i18n-registry.ts"],"sourcesContent":["import log from 'loglevel';\n\nexport class CatI18nRegistry {\n  private static instance: CatI18nRegistry;\n\n  private _locale = 'en';\n  private readonly _dicts: Map<string, Map<string, string>> = new Map();\n\n  private constructor() {\n    // hide constructor\n  }\n\n  static getInstance(): CatI18nRegistry {\n    if (!CatI18nRegistry.instance) {\n      CatI18nRegistry.instance = new CatI18nRegistry();\n    }\n    return CatI18nRegistry.instance;\n  }\n\n  locale(locale?: string): string {\n    if (locale) {\n      this._locale = locale;\n      log.info(`[CatI18nRegistry] Locale set to ${locale}`);\n      window.dispatchEvent(this.buildEvent('cat-i18n-locale', { locale }));\n    }\n    return this._locale;\n  }\n\n  register(locale: string, i18n: { [key: string]: string }): void {\n    const dict = this.getDict(locale);\n    Object.entries(i18n).forEach(([key, message]) => dict.set(key, message));\n    log.info(`[CatI18nRegistry] Registered messages for ${locale}`, i18n);\n    window.dispatchEvent(this.buildEvent('cat-i18n-register', { i18n }));\n  }\n\n  clear(locale?: string): void {\n    if (locale) {\n      this.getDict(locale).clear();\n      log.info(`[CatI18nRegistry] Cleared messages for ${locale}`);\n      window.dispatchEvent(this.buildEvent('cat-i18n-clear', { locale }));\n    } else {\n      this._dicts.clear();\n      log.info(`[CatI18nRegistry] Cleared messages`);\n      window.dispatchEvent(this.buildEvent('cat-i18n-clear'));\n    }\n  }\n\n  t(key: string, params?: { [key: string]: string | number }): string {\n    const message = this._dicts.get(this._locale)?.get(key);\n    if (message === undefined) {\n      log.error(`[CatI18nRegistry] Unknown message for ${this._locale}: ${key}`);\n      return '';\n    }\n    return message.replace(/{{\\s*([-a-zA-Z._]+)\\s*}}/g, (_match, key) => `${params?.[key] ?? ''}`);\n  }\n\n  private buildEvent<T>(name: string, detail?: T) {\n    return new CustomEvent(name, {\n      bubbles: true,\n      composed: true,\n      detail\n    });\n  }\n\n  private getDict(lang: string) {\n    let dict = this._dicts.get(lang);\n    if (!dict) {\n      dict = new Map();\n      this._dicts.set(lang, dict);\n    }\n    return dict;\n  }\n}\n"],"version":3}

package/dist/components/cat-radio-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CatRadioGroup extends Components.CatRadioGroup, HTMLElement {}
+export const CatRadioGroup: {
+  prototype: CatRadioGroup;
+  new (): CatRadioGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/cat-radio-group.js

@@ -0,0 +1,111 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const catRadioGroupCss = ":host{display:block}:host([hidden]){display:none}";
+
+const CatRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.catRadioGroup = [];
+    /**
+     * Whether this radio group is disabled.
+     */
+    this.disabled = false;
+    /**
+     * Whether the label of the radios should appear to the left of them.
+     */
+    this.labelLeft = false;
+  }
+  onNameChanged(newName) {
+    this.catRadioGroup.forEach(catRadio => {
+      catRadio.name = newName;
+    });
+  }
+  onDisabledChanged(disabled) {
+    this.catRadioGroup.forEach(catRadio => {
+      if (disabled) {
+        catRadio.disabled = disabled;
+      }
+    });
+  }
+  onLabelLeftChanged(labelLeft) {
+    this.catRadioGroup.forEach(catRadio => {
+      if (labelLeft) {
+        catRadio.labelLeft = labelLeft;
+      }
+    });
+  }
+  componentDidLoad() {
+    this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));
+    this.onNameChanged(this.name);
+    this.onDisabledChanged(this.disabled);
+    this.onLabelLeftChanged(this.labelLeft);
+    this.updateTabIndex();
+  }
+  onKeydown(event) {
+    var _a, _b;
+    if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {
+      const targetElements = this.catRadioGroup.filter(catRadio => !catRadio.disabled);
+      const activeElement = document.activeElement;
+      const activeIdx = this.catRadioGroup.findIndex(catRadio => catRadio === activeElement);
+      const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;
+      const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
+      targetElements[targetIdx].setFocus();
+      (_b = (_a = targetElements[targetIdx].shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.click();
+      this.updateTabIndex();
+      event.preventDefault();
+    }
+  }
+  onInput(event) {
+    const catRadioElement = this.catRadioGroup.find(value => value === event.target);
+    if (catRadioElement && catRadioElement.checked) {
+      const catRadioElements = this.catRadioGroup.filter(value => value !== catRadioElement);
+      catRadioElements.forEach(value => (value.checked = false));
+      this.updateTabIndex();
+    }
+  }
+  render() {
+    return (h("div", { role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", null)));
+  }
+  updateTabIndex() {
+    var _a, _b;
+    if (this.catRadioGroup.length) {
+      this.catRadioGroup.forEach(value => { var _a, _b; return (_b = (_a = value.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '-1'); });
+      const checkedRadioIndex = this.catRadioGroup.findIndex(value => value.checked);
+      (_b = (_a = this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
+    }
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "name": ["onNameChanged"],
+    "disabled": ["onDisabledChanged"],
+    "labelLeft": ["onLabelLeftChanged"]
+  }; }
+  static get style() { return catRadioGroupCss; }
+}, [1, "cat-radio-group", {
+    "name": [1],
+    "disabled": [4],
+    "a11yLabel": [1, "a11y-label"],
+    "labelLeft": [4, "label-left"]
+  }, [[0, "keydown", "onKeydown"], [0, "input", "onInput"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["cat-radio-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cat-radio-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CatRadioGroup$1);
+      }
+      break;
+  } });
+}
+
+const CatRadioGroup = CatRadioGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CatRadioGroup, defineCustomElement };
+
+//# sourceMappingURL=cat-radio-group.js.map

package/dist/components/cat-radio-group.js.map

@@ -0,0 +1 @@
+{"file":"cat-radio-group.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,mDAAmD;;MCO/DA,eAAa;EAL1B;;;;IAMU,kBAAa,GAA0B,EAAE,CAAC;;;;IAY1C,aAAQ,GAAG,KAAK,CAAC;;;;IAWjB,cAAS,GAAG,KAAK,CAAC;GA6E3B;EA1EC,aAAa,CAAC,OAAgB;IAC5B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,QAAQ;MACjC,QAAQ,CAAC,IAAI,GAAG,OAAO,CAAC;KACzB,CAAC,CAAC;GACJ;EAGD,iBAAiB,CAAC,QAAiB;IACjC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,QAAQ;MACjC,IAAI,QAAQ,EAAE;QACZ,QAAQ,CAAC,QAAQ,GAAG,QAAQ,CAAC;OAC9B;KACF,CAAC,CAAC;GACJ;EAGD,kBAAkB,CAAC,SAAkB;IACnC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,QAAQ;MACjC,IAAI,SAAS,EAAE;QACb,QAAQ,CAAC,SAAS,GAAG,SAAS,CAAC;OAChC;KACF,CAAC,CAAC;GACJ;EAED,gBAAgB;IACd,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;IAChF,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACxC,IAAI,CAAC,cAAc,EAAE,CAAC;GACvB;EAGD,SAAS,CAAC,KAAoB;;IAC5B,IAAI,CAAC,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE;MACxG,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;MACjF,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAoC,CAAC;MACpE,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,IAAI,QAAQ,KAAK,aAAa,CAAC,CAAC;MACvF,MAAM,SAAS,GAAG,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;MAC3E,MAAM,SAAS,GAAG,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,SAAS,GAAG,SAAS,GAAG,cAAc,CAAC,MAAM,IAAI,cAAc,CAAC,MAAM,CAAC;MAC9G,cAAc,CAAC,SAAS,CAAC,CAAC,QAAQ,EAAE,CAAC;MACrC,MAAA,MAAA,cAAc,CAAC,SAAS,CAAC,CAAC,UAAU,0CAAE,aAAa,CAAC,OAAO,CAAC,0CAAE,KAAK,EAAE,CAAC;MACtE,IAAI,CAAC,cAAc,EAAE,CAAC;MACtB,KAAK,CAAC,cAAc,EAAE,CAAC;KACxB;GACF;EAGD,OAAO,CAAC,KAAiB;IACvB,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC;IACjF,IAAI,eAAe,IAAI,eAAe,CAAC,OAAO,EAAE;MAC9C,MAAM,gBAAgB,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,eAAe,CAAC,CAAC;MACvF,gBAAgB,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC;MAC3D,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;GACF;EAED,MAAM;IACJ,QACE,WAAK,IAAI,EAAC,YAAY,gBAAa,IAAI,CAAC,SAAS,IAC/C,eAAa,CACT,EACN;GACH;EAEO,cAAc;;IACpB,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE;MAC7B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,kBAAI,OAAA,MAAA,MAAA,KAAK,CAAC,UAAU,0CAAE,aAAa,CAAC,OAAO,CAAC,0CAAE,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA,EAAA,CAAC,CAAC;MAC9G,MAAM,iBAAiB,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC;MAC/E,MAAA,MAAA,IAAI,CAAC,aAAa,CAAC,iBAAiB,IAAI,CAAC,GAAG,iBAAiB,GAAG,CAAC,CAAC,CAAC,UAAU,0CACzE,aAAa,CAAC,OAAO,CAAC,0CACtB,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;KACnC;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatRadioGroup"],"sources":["./src/components/cat-radio-group/cat-radio-group.scss?tag=cat-radio-group&encapsulation=shadow","./src/components/cat-radio-group/cat-radio-group.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import { Component, h, Prop, Element, Listen, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cat-radio-group',\n  styleUrl: 'cat-radio-group.scss',\n  shadow: true\n})\nexport class CatRadioGroup {\n  private catRadioGroup: HTMLCatRadioElement[] = [];\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The name of the radio group component.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether this radio group is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Adds an accessible label for the radio group that\n   * it is only shown in assistive technologies, like screen readers.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Whether the label of the radios should appear to the left of them.\n   */\n  @Prop() labelLeft = false;\n\n  @Watch('name')\n  onNameChanged(newName?: string) {\n    this.catRadioGroup.forEach(catRadio => {\n      catRadio.name = newName;\n    });\n  }\n\n  @Watch('disabled')\n  onDisabledChanged(disabled: boolean) {\n    this.catRadioGroup.forEach(catRadio => {\n      if (disabled) {\n        catRadio.disabled = disabled;\n      }\n    });\n  }\n\n  @Watch('labelLeft')\n  onLabelLeftChanged(labelLeft: boolean) {\n    this.catRadioGroup.forEach(catRadio => {\n      if (labelLeft) {\n        catRadio.labelLeft = labelLeft;\n      }\n    });\n  }\n\n  componentDidLoad(): void {\n    this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));\n    this.onNameChanged(this.name);\n    this.onDisabledChanged(this.disabled);\n    this.onLabelLeftChanged(this.labelLeft);\n    this.updateTabIndex();\n  }\n\n  @Listen('keydown')\n  onKeydown(event: KeyboardEvent): void {\n    if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {\n      const targetElements = this.catRadioGroup.filter(catRadio => !catRadio.disabled);\n      const activeElement = document.activeElement as HTMLCatRadioElement;\n      const activeIdx = this.catRadioGroup.findIndex(catRadio => catRadio === activeElement);\n      const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n      const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n      targetElements[targetIdx].setFocus();\n      targetElements[targetIdx].shadowRoot?.querySelector('input')?.click();\n      this.updateTabIndex();\n      event.preventDefault();\n    }\n  }\n\n  @Listen('input')\n  onInput(event: MouseEvent): void {\n    const catRadioElement = this.catRadioGroup.find(value => value === event.target);\n    if (catRadioElement && catRadioElement.checked) {\n      const catRadioElements = this.catRadioGroup.filter(value => value !== catRadioElement);\n      catRadioElements.forEach(value => (value.checked = false));\n      this.updateTabIndex();\n    }\n  }\n\n  render() {\n    return (\n      <div role=\"radiogroup\" aria-label={this.a11yLabel}>\n        <slot></slot>\n      </div>\n    );\n  }\n\n  private updateTabIndex() {\n    if (this.catRadioGroup.length) {\n      this.catRadioGroup.forEach(value => value.shadowRoot?.querySelector('input')?.setAttribute('tabindex', '-1'));\n      const checkedRadioIndex = this.catRadioGroup.findIndex(value => value.checked);\n      this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot\n        ?.querySelector('input')\n        ?.setAttribute('tabindex', '0');\n    }\n  }\n}\n"],"version":3}

package/dist/components/cat-radio.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { l as loglevel } from './loglevel.js';
 import { C as CatFormHint } from './cat-form-hint.js';
 
-const catRadioCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;cursor:pointer}.radio{display:flex;position:relative}.circle{position:absolute;width:0.75rem;height:0.75rem;background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-radius:10rem;top:calc(50% - 0.375rem);left:calc(50% - 0.375rem);visibility:hidden}input{margin:0;width:1.25rem;height:1.25rem;appearance:none;background-color:white;border:1px solid #d7dbe0;border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 32, 127, 138))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.is-disabled input{background-color:#f8f8fb}.is-disabled input:checked{border-color:#d7dbe0}.is-disabled .circle{background-color:#d7dbe0}";
+const catRadioCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;cursor:pointer}.label-left{flex-direction:row-reverse}.radio{display:flex;position:relative}.circle{position:absolute;width:0.75rem;height:0.75rem;background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-radius:10rem;top:calc(50% - 0.375rem);left:calc(50% - 0.375rem);visibility:hidden}input{margin:0;width:1.25rem;height:1.25rem;appearance:none;background-color:white;border:1px solid #d7dbe0;border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 32, 127, 138))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.is-disabled input{background-color:#f8f8fb}.is-disabled input:checked{border-color:#d7dbe0}.is-disabled .circle{background-color:#d7dbe0}";
 
 let nextUniqueId = 0;
 const CatRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -35,6 +35,10 @@ const CatRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Whether the radio is required.
      */
     this.required = false;
+    /**
+     * Whether the label should appear to the left of the radio component.
+     */
+    this.labelLeft = false;
   }
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
@@ -52,13 +56,14 @@ const CatRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.input.focus(options);
   }
   render() {
-    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } }, h("span", { class: "radio" }, h("input", { ref: el => (this.input = el), id: this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "circle" })), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
+    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { class: "radio" }, h("input", { ref: el => (this.input = el), id: this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "circle" })), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
   }
   get hintSection() {
     const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
     return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
   }
   onChange(event) {
+    this.checked = true;
     this.value = this.input.value;
     this.catChange.emit(event);
   }
@@ -71,7 +76,7 @@ const CatRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   get hostElement() { return this; }
   static get style() { return catRadioCss; }
 }, [1, "cat-radio", {
-    "checked": [4],
+    "checked": [1028],
     "disabled": [4],
     "label": [1],
     "labelHidden": [4, "label-hidden"],
@@ -79,6 +84,7 @@ const CatRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "required": [4],
     "value": [1025],
     "hint": [1],
+    "labelLeft": [4, "label-left"],
     "hasSlottedLabel": [32],
     "setFocus": [64]
   }]);

package/dist/components/cat-radio.js.map

@@ -1 +1 @@
-{"file":"cat-radio.js","mappings":"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","names":["CatRadio","log"],"sources":["./src/components/cat-radio/cat-radio.scss?tag=cat-radio&encapsulation=shadow","./src/components/cat-radio/cat-radio.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nlabel {\n  display: flex;\n  gap: 0.5rem;\n  @include cat-body('m');\n  cursor: pointer;\n}\n\n.radio {\n  display: flex;\n  position: relative;\n}\n\n.circle {\n  position: absolute;\n  width: calc(cat-size('xs') / 2);\n  height: calc(cat-size('xs') / 2);\n  background-color: cat-token('color.theme.primary.bg');\n  border-radius: 10rem;\n  top: calc(50% - cat-size('xs') / 4);\n  left: calc(50% - cat-size('xs') / 4);\n  visibility: hidden;\n}\n\ninput {\n  margin: 0;\n  width: calc(cat-size('m') / 2);\n  height: calc(cat-size('m') / 2);\n  appearance: none;\n  background-color: cat-token('color.ui.background.input');\n  border: 1px solid cat-token('color.ui.border.input');\n  border-radius: 10rem;\n  cursor: inherit;\n\n  &:checked {\n    border-color: cat-token('color.theme.primary.bg');\n\n    + .circle {\n      visibility: visible;\n    }\n  }\n\n  &:focus-visible {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n.label {\n  .is-hidden & {\n    @include cat-visually-hidden;\n  }\n}\n\n.is-disabled {\n  cursor: not-allowed;\n  color: cat-token('color.ui.font.muted');\n\n  input {\n    background-color: cat-token('color.ui.background.inputDisabled');\n\n    &:checked {\n      border-color: cat-token('color.ui.border.input');\n    }\n  }\n\n  .circle {\n    background-color: cat-token('color.ui.border.input');\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Radio Buttons are graphical interface elements that allow user to choose\n * only one of a predefined set of mutually exclusive options.\n *\n * @slot hint - Optional hint element to be displayed with the radio.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-radio',\n  styleUrl: 'cat-radio.scss',\n  shadow: true\n})\nexport class CatRadio {\n  private readonly id = `cat-radio-${++nextUniqueId}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Whether this radio is checked.\n   */\n  @Prop() checked = false;\n\n  /**\n   * Whether this radio is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The label of the radio that is visible.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the radio component.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the radio is required.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the radio component.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Optional hint text(s) to be displayed with the radio.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Emitted when the radio is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the radio received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the radio loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on radio', this);\n    }\n  }\n\n  /**\n   * Sets focus on the radio. Use this method instead of `radio.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  render() {\n    return (\n      <Host>\n        <label htmlFor={this.id} class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled }}>\n          <span class=\"radio\">\n            <input\n              ref={el => (this.input = el as HTMLInputElement)}\n              id={this.id}\n              type=\"radio\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              required={this.required}\n              disabled={this.disabled}\n              onInput={this.onChange.bind(this)}\n              onFocus={this.onFocus.bind(this)}\n              onBlur={this.onBlur.bind(this)}\n            />\n            <span class=\"circle\"></span>\n          </span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hintSection}\n      </Host>\n    );\n  }\n\n  private get hintSection() {\n    const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    return (\n      (this.hint || hasSlottedHint) && (\n        <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n      )\n    );\n  }\n\n  private onChange(event: Event) {\n    this.value = this.input.value;\n    this.catChange.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"],"version":3}
+{"file":"cat-radio.js","mappings":"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","names":["CatRadio","log"],"sources":["./src/components/cat-radio/cat-radio.scss?tag=cat-radio&encapsulation=shadow","./src/components/cat-radio/cat-radio.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nlabel {\n  display: flex;\n  gap: 0.5rem;\n  @include cat-body('m');\n  cursor: pointer;\n}\n\n.label-left {\n  flex-direction: row-reverse;\n}\n\n.radio {\n  display: flex;\n  position: relative;\n}\n\n.circle {\n  position: absolute;\n  width: calc(cat-size('xs') / 2);\n  height: calc(cat-size('xs') / 2);\n  background-color: cat-token('color.theme.primary.bg');\n  border-radius: 10rem;\n  top: calc(50% - cat-size('xs') / 4);\n  left: calc(50% - cat-size('xs') / 4);\n  visibility: hidden;\n}\n\ninput {\n  margin: 0;\n  width: calc(cat-size('m') / 2);\n  height: calc(cat-size('m') / 2);\n  appearance: none;\n  background-color: cat-token('color.ui.background.input');\n  border: 1px solid cat-token('color.ui.border.input');\n  border-radius: 10rem;\n  cursor: inherit;\n\n  &:checked {\n    border-color: cat-token('color.theme.primary.bg');\n\n    + .circle {\n      visibility: visible;\n    }\n  }\n\n  &:focus-visible {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n.label {\n  flex: 1 1 auto;\n\n  .is-hidden & {\n    @include cat-visually-hidden;\n  }\n}\n\n.is-disabled {\n  cursor: not-allowed;\n  color: cat-token('color.ui.font.muted');\n\n  input {\n    background-color: cat-token('color.ui.background.inputDisabled');\n\n    &:checked {\n      border-color: cat-token('color.ui.border.input');\n    }\n  }\n\n  .circle {\n    background-color: cat-token('color.ui.border.input');\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Radio Buttons are graphical interface elements that allow user to choose\n * only one of a predefined set of mutually exclusive options.\n *\n * @slot hint - Optional hint element to be displayed with the radio.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-radio',\n  styleUrl: 'cat-radio.scss',\n  shadow: true\n})\nexport class CatRadio {\n  private readonly id = `cat-radio-${++nextUniqueId}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Whether this radio is checked.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Whether this radio is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The label of the radio that is visible.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the radio component.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the radio is required.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the radio component.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Optional hint text(s) to be displayed with the radio.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the radio component.\n   */\n  @Prop() labelLeft = false;\n  /**\n   * Emitted when the radio is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the radio received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the radio loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on radio', this);\n    }\n  }\n\n  /**\n   * Sets focus on the radio. Use this method instead of `radio.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n          role=\"radio\"\n          aria-checked={this.checked ? 'true' : 'false'}\n        >\n          <span class=\"radio\">\n            <input\n              ref={el => (this.input = el as HTMLInputElement)}\n              id={this.id}\n              type=\"radio\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              required={this.required}\n              disabled={this.disabled}\n              onInput={this.onChange.bind(this)}\n              onFocus={this.onFocus.bind(this)}\n              onBlur={this.onBlur.bind(this)}\n            />\n            <span class=\"circle\"></span>\n          </span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hintSection}\n      </Host>\n    );\n  }\n\n  private get hintSection() {\n    const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    return (\n      (this.hint || hasSlottedHint) && (\n        <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n      )\n    );\n  }\n\n  private onChange(event: Event) {\n    this.checked = true;\n    this.value = this.input.value;\n    this.catChange.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"],"version":3}