@scouterna/ui-webc 2.0.0 → 2.2.0

package/dist/cjs/scout-switch.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"scout-switch.entry.cjs.js","sources":["src/components/switch/switch.css?tag=scout-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":[".switch {\n  width: var(--spacing-12);\n  height: var(--spacing-6);\n  appearance: none;\n  -webkit-appearance: none;\n  border-radius: var(--spacing-8);\n  background-color: var(--color-text-brand-inverse);\n  border: 1px solid var(--color-gray-300);\n  position: relative;\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  transition-property: border-color;\n  transition-duration: 0.3s;\n  transition-timing-function: ease-in-out;\n  cursor: pointer;\n  --switch-ball-size: calc((var(--spacing-6) - var(--spacing-1) / 2) + 1px);\n}\n\n.switch:hover {\n  transition-property: none;\n  border-color: var(--color-gray-400);\n  background-color: var(--color-background-brand-subtle-hovered);\n}\n\n.switch:active {\n  background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.switch:checked {\n  border-color: var(--color-background-brand-base);\n}\n\n.switch:hover::before {\n  background-color: var(--color-gray-400);\n}\n\n.switch::before {\n  content: \"\";\n  background-color: var(--color-gray-300);\n  width: var(--switch-ball-size);\n  height: var(--switch-ball-size);\n  border-radius: 50%;\n  position: absolute;\n  left: -1px;\n  right: 0;\n  transition-duration: 0.3s;\n  transition-property: left, right;\n}\n.switch:checked::before {\n  content: \"\";\n  background-color: var(--color-background-brand-base);\n  left: calc(100% - calc(var(--spacing-6) - var(--spacing-1) / 2) + 1px);\n}\n\n.switch:disabled {\n  pointer-events: none;\n  background-color: var(--color-gray-100);\n  border-color: var(--color-gray-100);\n}\n\n.switch:disabled::before {\n  background-color: var(--color-gray-300);\n}\n\nlabel {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  font: var(--type-label-base);\n  color: var(--color-text-base);\n}\n\n.inlineDivider {\n  width: var(--spacing-2);\n}\n","import {\n  Component,\n  Event,\n  type EventEmitter,\n  h,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\n@Component({\n  tag: \"scout-switch\",\n  styleUrl: \"switch.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutSwitch {\n  /**\n   * Indicates whether the switch is toggled on or off.\n   */\n  @Prop() toggled: boolean = false;\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Use this prop if you need to connect your switch with another element describing its use, other than the property label.\n   */\n  @Prop() ariaLabelledby: string;\n\n  @Prop() label: string;\n\n  @State() ariaId: string;\n\n  @Event() scoutSwitchToggled: EventEmitter<{\n    toggled: boolean;\n    element: HTMLInputElement;\n  }>;\n  /**\n   * Internal event used for form field association.\n   */\n  @Event() _fieldId: EventEmitter<string>;\n\n  componentWillLoad(): Promise<void> | void {\n    this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;\n    this._fieldId.emit(this.ariaId);\n  }\n\n  onClick(event: Event) {\n    const switchElement = event.target as HTMLInputElement;\n\n    this.scoutSwitchToggled.emit({\n      toggled: switchElement.checked,\n      element: switchElement,\n    });\n  }\n\n  render() {\n    const Tag = this.label && this.label.length ? \"label\" : \"div\";\n    return (\n      <Tag>\n        {this.label}\n        <span class=\"inlineDivider\"></span>\n        <input\n          class=\"switch\"\n          onChange={(event) => this.onClick(event)}\n          type=\"checkbox\"\n          id={this.ariaId}\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.disabled}\n          disabled={this.disabled}\n          checked={this.toggled}\n        />\n      </Tag>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,omDAAomD;;MCgBzmD,WAAW,GAAA,MAAA;;;;;;AACtB;;AAEG;IACK,OAAO,GAAY,KAAK;IAExB,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,cAAc;AAEd,IAAA,KAAK;AAEJ,IAAA,MAAM;AAEN,IAAA,kBAAkB;AAI3B;;AAEG;AACM,IAAA,QAAQ;IAEjB,iBAAiB,GAAA;QACf,IAAI,CAAC,MAAM,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA,CAAE;QAC9D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;AAGjC,IAAA,OAAO,CAAC,KAAY,EAAA;AAClB,QAAA,MAAM,aAAa,GAAG,KAAK,CAAC,MAA0B;AAEtD,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;YAC3B,OAAO,EAAE,aAAa,CAAC,OAAO;AAC9B,YAAA,OAAO,EAAE,aAAa;AACvB,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,OAAO,GAAG,KAAK;QAC7D,QACEA,QAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,IAAI,CAAC,KAAK,EACXA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAQ,CAAA,EACnCA,OACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EACxC,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,MAAM,EAAA,iBAAA,EACE,IAAI,CAAC,cAAc,mBACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,CACrB,CACE;;;;;;;;"}
+{"version":3,"file":"scout-switch.entry.cjs.js","sources":["src/components/switch/switch.css?tag=scout-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":[".switch {\n  width: var(--spacing-12);\n  height: var(--spacing-6);\n  appearance: none;\n  -webkit-appearance: none;\n  border-radius: var(--spacing-8);\n  background-color: var(--color-text-brand-inverse);\n  border: 1px solid var(--color-gray-300);\n  position: relative;\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  transition-property: border-color;\n  transition-duration: 0.3s;\n  transition-timing-function: ease-in-out;\n  cursor: pointer;\n  --switch-ball-size: calc((var(--spacing-6) - var(--spacing-1) / 2) + 1px);\n}\n\n.switch:hover {\n  transition-property: none;\n  border-color: var(--color-gray-400);\n  background-color: var(--color-background-brand-subtle-hovered);\n}\n\n.switch:active {\n  background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.switch:checked {\n  border-color: var(--color-background-brand-base);\n}\n\n.switch:hover::before {\n  background-color: var(--color-gray-400);\n}\n\n.switch::before {\n  content: \"\";\n  background-color: var(--color-gray-300);\n  width: var(--switch-ball-size);\n  height: var(--switch-ball-size);\n  border-radius: 50%;\n  position: absolute;\n  left: -1px;\n  right: 0;\n  transition-duration: 0.3s;\n  transition-property: left, right;\n}\n.switch:checked::before {\n  content: \"\";\n  background-color: var(--color-background-brand-base);\n  left: calc(100% - calc(var(--spacing-6) - var(--spacing-1) / 2) + 1px);\n}\n\n.switch:disabled {\n  pointer-events: none;\n  background-color: var(--color-gray-100);\n  border-color: var(--color-gray-100);\n}\n\n.switch:disabled::before {\n  background-color: var(--color-gray-300);\n}\n\nlabel {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  font: var(--type-label-base);\n  color: var(--color-text-base);\n}\n\n.inlineDivider {\n  width: var(--spacing-2);\n}\n","import {\n  Component,\n  Event,\n  type EventEmitter,\n  h,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\n@Component({\n  tag: \"scout-switch\",\n  styleUrl: \"switch.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutSwitch {\n  /**\n   * Indicates whether the switch is toggled on or off.\n   */\n  @Prop() toggled: boolean = false;\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Use this prop if you need to connect your switch with another element describing its use, other than the property label.\n   */\n  @Prop() ariaLabelledby: string;\n\n  @Prop() label: string;\n\n  @State() ariaId: string;\n\n  @Event() scoutSwitchToggled: EventEmitter<{\n    toggled: boolean;\n    element: HTMLInputElement;\n  }>;\n  /**\n   * Internal event used for form field association.\n   */\n  @Event() _fieldId: EventEmitter<string>;\n\n  componentWillLoad(): Promise<void> | void {\n    this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;\n    this._fieldId.emit(this.ariaId);\n  }\n\n  onClick(event: Event) {\n    const switchElement = event.target as HTMLInputElement;\n\n    this.scoutSwitchToggled.emit({\n      toggled: switchElement.checked,\n      element: switchElement,\n    });\n  }\n\n  render() {\n    const Tag = this.label?.length ? \"label\" : \"div\";\n    return (\n      <Tag>\n        {this.label}\n        <span class=\"inlineDivider\"></span>\n        <input\n          class=\"switch\"\n          onChange={(event) => this.onClick(event)}\n          type=\"checkbox\"\n          id={this.ariaId}\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.disabled}\n          disabled={this.disabled}\n          checked={this.toggled}\n        />\n      </Tag>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,omDAAomD;;MCgBzmD,WAAW,GAAA,MAAA;;;;;;AACtB;;AAEG;IACK,OAAO,GAAY,KAAK;IAExB,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,cAAc;AAEd,IAAA,KAAK;AAEJ,IAAA,MAAM;AAEN,IAAA,kBAAkB;AAI3B;;AAEG;AACM,IAAA,QAAQ;IAEjB,iBAAiB,GAAA;QACf,IAAI,CAAC,MAAM,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA,CAAE;QAC9D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;AAGjC,IAAA,OAAO,CAAC,KAAY,EAAA;AAClB,QAAA,MAAM,aAAa,GAAG,KAAK,CAAC,MAA0B;AAEtD,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;YAC3B,OAAO,EAAE,aAAa,CAAC,OAAO;AAC9B,YAAA,OAAO,EAAE,aAAa;AACvB,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK;QAChD,QACEA,QAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,IAAI,CAAC,KAAK,EACXA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAQ,CAAA,EACnCA,OACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EACxC,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,MAAM,EAAA,iBAAA,EACE,IAAI,CAAC,cAAc,mBACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,CACrB,CACE;;;;;;;;"}

package/dist/cjs/ui-webc.cjs.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-D42maJcS.js');
+var index = require('./index-CtwQwhfH.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
- Stencil Client Patch Browser v4.38.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.38.3 | MIT Licensed | https://stenciljs.com
  */
 
 var patchBrowser = () => {
@@ -18,7 +18,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await index.globalScripts();
-  return index.bootstrapLazy([["scout-bottom-bar.cjs",[[273,"scout-bottom-bar"]]],["scout-bottom-bar-item.cjs",[[273,"scout-bottom-bar-item",{"type":[1],"href":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button.cjs",[[273,"scout-button",{"type":[1],"variant":[1],"icon":[1]}]]],["scout-card.cjs",[[273,"scout-card"]]],["scout-checkbox.cjs",[[258,"scout-checkbox",{"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]}]]],["scout-field.cjs",[[262,"scout-field",{"label":[1],"helpText":[1,"help-text"],"inputId":[32],"errorText":[32],"errorHidden":[32]},[[0,"_fieldId","catchFieldId"],[0,"scoutInputChange","handleInputChange"],[0,"scoutBlur","handleValidationBlur"]]]]],["scout-input.cjs",[[258,"scout-input",{"type":[1],"inputmode":[1],"pattern":[1],"value":[1],"disabled":[4],"validate":[16],"ariaId":[32]}]]],["scout-switch.cjs",[[273,"scout-switch",{"toggled":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]}]]]], options);
+  return index.bootstrapLazy([["scout-list-view-item.cjs",[[785,"scout-list-view-item",{"icon":[1],"primary":[1],"secondary":[1],"type":[1],"href":[1],"target":[1],"rel":[1],"name":[1],"value":[1],"checked":[4]}]]],["scout-app-bar.cjs",[[785,"scout-app-bar",{"titleText":[1,"title-text"]}]]],["scout-bottom-bar.cjs",[[273,"scout-bottom-bar"]]],["scout-bottom-bar-item.cjs",[[785,"scout-bottom-bar-item",{"type":[1],"href":[1],"target":[1],"rel":[1],"icon":[1],"label":[1],"active":[4]}]]],["scout-button.cjs",[[785,"scout-button",{"type":[1],"href":[1],"target":[1],"rel":[1],"variant":[1],"icon":[1],"iconOnly":[4,"icon-only"]}]]],["scout-card.cjs",[[273,"scout-card"]]],["scout-divider.cjs",[[273,"scout-divider"]]],["scout-field.cjs",[[774,"scout-field",{"label":[1],"helpText":[1,"help-text"],"inputId":[32],"errorText":[32],"errorHidden":[32]},[[0,"_fieldId","catchFieldId"],[0,"scoutInputChange","handleInputChange"],[0,"scoutBlur","handleValidationBlur"]]]]],["scout-input.cjs",[[770,"scout-input",{"type":[1],"inputmode":[1],"pattern":[1],"value":[1],"name":[1],"disabled":[4],"validate":[16],"ariaId":[32]}]]],["scout-link.cjs",[[785,"scout-link",{"href":[1],"label":[1],"rel":[1],"linkAriaLabel":[1,"link-aria-label"],"type":[1],"target":[1]}]]],["scout-list-view.cjs",[[273,"scout-list-view",null,[[0,"scoutChecked","onScoutChecked"]]]]],["scout-list-view-subheader.cjs",[[785,"scout-list-view-subheader",{"text":[1],"headingLevel":[1,"heading-level"]}]]],["scout-loader.cjs",[[769,"scout-loader",{"text":[1],"size":[1]}]]],["scout-select.cjs",[[774,"scout-select",{"value":[1],"disabled":[4],"name":[1],"validate":[16],"ariaId":[32]}]]],["scout-stack.cjs",[[785,"scout-stack",{"direction":[1],"gapSize":[1,"gap-size"]}]]],["scout-switch.cjs",[[785,"scout-switch",{"toggled":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"ariaId":[32]}]]],["scout-checkbox_2.cjs",[[770,"scout-checkbox",{"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]}],[770,"scout-radio-button",{"checked":[4],"disabled":[4],"ariaLabelledby":[1,"aria-labelledby"],"label":[1],"value":[1],"name":[1],"ariaId":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/ui-webc.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-webc.cjs.js","sources":["../../node_modules/.pnpm/@stencil+core@4.38.1/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.38.1 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":["promiseResolve","globalScripts","bootstrapLazy"],"mappings":";;;;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,gQAAe;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,mBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"ui-webc.cjs.js","sources":["../../node_modules/.pnpm/@stencil+core@4.38.3/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.38.3 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":["promiseResolve","globalScripts","bootstrapLazy"],"mappings":";;;;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,gQAAe;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,mBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC;;;;","x_google_ignoreList":[0]}

package/dist/collection/collection-manifest.json

@@ -1,17 +1,27 @@
 {
   "entries": [
+    "components/app-bar/app-bar.js",
+    "components/bottom-bar/bottom-bar.js",
     "components/bottom-bar-item/bottom-bar-item.js",
     "components/button/button.js",
-    "components/input/input.js",
-    "components/bottom-bar/bottom-bar.js",
     "components/card/card.js",
     "components/checkbox/checkbox.js",
+    "components/divider/divider.js",
     "components/field/field.js",
+    "components/input/input.js",
+    "components/link/link.js",
+    "components/list-view/list-view.js",
+    "components/list-view-item/list-view-item.js",
+    "components/list-view-subheader/list-view-subheader.js",
+    "components/loader/loader.js",
+    "components/radio-button/radio-button.js",
+    "components/select/select.js",
+    "components/stack/stack.js",
     "components/switch/switch.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.38.1",
+    "version": "4.38.3",
     "typescriptVersion": "5.9.3"
   },
   "collections": [],

package/dist/collection/components/app-bar/app-bar.css

@@ -0,0 +1,27 @@
+:host {
+  display: flex;
+  width: 100%;
+}
+
+::slotted(scout-button) {
+  height: 100%;
+}
+
+.container {
+  display: flex;
+  flex: 1;
+  height: var(--spacing-14);
+  background-color: var(--color-white);
+  border-bottom: 1px solid var(--color-neutral-100);
+  color: var(--color-text-brand-base);
+  padding: var(--spacing-1);
+}
+
+.title {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  font: var(--type-body-lg);
+  font-weight: 500;
+  padding: 0 var(--spacing-2);
+}

package/dist/collection/components/app-bar/app-bar.js

@@ -0,0 +1,44 @@
+import { h } from "@stencil/core";
+export class ScoutAppBar {
+    titleText;
+    render() {
+        return (h("header", { key: '041b27816bb20c69b19b27ef90515c2cec8f2131', class: "container" }, h("slot", { key: '0171b39a13600bc784df175ad4499891415a58b2', name: "prefix" }), h("div", { key: '43c4905c019583a11ae290e4c049f1ccb7c08242', class: "title" }, this.titleText), h("slot", { key: '26741e8d7ec8559a720dd52a152d939ef857e2b5', name: "suffix" })));
+    }
+    static get is() { return "scout-app-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["app-bar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["app-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "titleText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title-text"
+            }
+        };
+    }
+}
+//# sourceMappingURL=app-bar.js.map

package/dist/collection/components/app-bar/app-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-bar.js","sourceRoot":"","sources":["../../../src/components/app-bar/app-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,WAAW;IACd,SAAS,CAAU;IAE3B,MAAM;QACJ,OAAO,CACL,+DAAQ,KAAK,EAAC,WAAW;YACvB,6DAAM,IAAI,EAAC,QAAQ,GAAG;YACtB,4DAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAO;YACzC,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACf,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: \"scout-app-bar\",\n  styleUrl: \"app-bar.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutAppBar {\n  @Prop() titleText?: string;\n\n  render() {\n    return (\n      <header class=\"container\">\n        <slot name=\"prefix\" />\n        <div class=\"title\">{this.titleText}</div>\n        <slot name=\"suffix\" />\n      </header>\n    );\n  }\n}\n"]}

package/dist/collection/components/bottom-bar/bottom-bar.css

@@ -8,4 +8,4 @@
   flex: 1;
   height: var(--spacing-14);
   border-top: 1px solid var(--color-neutral-100);
-}
+}

package/dist/collection/components/bottom-bar/bottom-bar.js

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class ScoutBottomBar {
     render() {
-        return (h("nav", { key: '0904c3ec8b60ca5fe9a2ed4d68ea2b6fcb55f0dc', class: "container" }, h("slot", { key: '18223004272416c7ced4ff31a160adbb451a7367' })));
+        return (h("nav", { key: '5f2fb6d34977a9a83fb2c2e254562b129fe40535', class: "container" }, h("slot", { key: '6833b584719bf53edfa90875d8798707a7fccbe4' })));
     }
     static get is() { return "scout-bottom-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bottom-bar-item/bottom-bar-item.css

@@ -36,4 +36,4 @@
 a {
   -webkit-text-decoration: none;
   text-decoration: none;
-}
+}

package/dist/collection/components/bottom-bar-item/bottom-bar-item.js

@@ -14,6 +14,8 @@ export class ScoutBottomBarItem {
      * `type` is set to "link".
      */
     href;
+    target;
+    rel;
     /**
      * An icon to display above the label. Must be an SVG string.
      */
@@ -33,9 +35,13 @@ export class ScoutBottomBarItem {
         const props = this.type === "link"
             ? {
                 href: this.href,
+                target: this.target,
+                // This might not be our job, but better safe than sorry.
+                rel: this.rel ??
+                    (this.target === "_blank" ? "noopener noreferrer" : undefined),
             }
             : {};
-        return (h(Tag, { key: 'da439bd71733883dd610eb24b9ffffb9bb2369e1', class: clsx("button", this.active && "active"), onClick: () => this.scoutClick.emit(), ...props }, h("span", { key: 'e3267d4487d643265984555155760cbdb242ef81', class: "icon", innerHTML: this.icon }), h("span", { key: '02ade513642f237b24ef25856bf4b56e386b7b2a', class: "label" }, this.label)));
+        return (h(Tag, { key: '96f414836614c63073d7d4250e5d51e9b4f0fe18', class: clsx("button", this.active && "active"), onClick: () => this.scoutClick.emit(), ...props }, h("span", { key: '9a6715eb90b616aa62bd4120ff49aeb687d43d27', class: "icon", innerHTML: this.icon }), h("span", { key: 'b66e620d12e0da541e4b6366a2eb373383dff4b8', class: "label" }, this.label)));
     }
     static get is() { return "scout-bottom-bar-item"; }
     static get encapsulation() { return "shadow"; }
@@ -61,7 +67,7 @@ export class ScoutBottomBarItem {
                     "references": {
                         "ItemType": {
                             "location": "local",
-                            "path": "/home/runner/work/j26-web-components/j26-web-components/packages/ui-webc/src/components/bottom-bar-item/bottom-bar-item.tsx",
+                            "path": "/home/runner/work/j26-components/j26-components/packages/ui-webc/src/components/bottom-bar-item/bottom-bar-item.tsx",
                             "id": "src/components/bottom-bar-item/bottom-bar-item.tsx::ItemType"
                         }
                     }
@@ -97,6 +103,44 @@ export class ScoutBottomBarItem {
                 "reflect": false,
                 "attribute": "href"
             },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rel"
+            },
             "icon": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/bottom-bar-item/bottom-bar-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"bottom-bar-item.js","sourceRoot":"","sources":["../../../src/components/bottom-bar-item/bottom-bar-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,IAAI,MAAM,MAAM,CAAC;AAIxB;;;GAGG;AAQH,MAAM,OAAO,kBAAkB;IAC7B;;OAEG;IACK,IAAI,GAAa,QAAQ,CAAC;IAElC;;;OAGG;IACK,IAAI,CAAU;IAEtB;;OAEG;IACK,IAAI,CAAU;IAEtB;;OAEG;IACK,KAAK,CAAU;IAEvB;;;OAGG;IACK,MAAM,CAAW;IAEhB,UAAU,CAAqB;IAExC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QAElD,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK,MAAM;YAClB,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;YACH,CAAC,CAAC,EAAE,CAAC;QAET,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,IAAI,QAAQ,CAAC,EAC9C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK;YAET,6DAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI;YAC3C,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CACnC,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, type EventEmitter, h, Prop } from \"@stencil/core\";\nimport clsx from \"clsx\";\n\nexport type ItemType = \"button\" | \"link\";\n\n/**\n * A bottom bar item used within the bottom bar for navigation. Should not be\n * used outside of a bottom bar.\n */\n@Component({\n  tag: \"scout-bottom-bar-item\",\n  styleUrl: \"bottom-bar-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutBottomBarItem {\n  /**\n   * The type of the bottom bar item, either a button or a link.\n   */\n  @Prop() type: ItemType = \"button\";\n\n  /**\n   * An optional link to navigate to when the item is clicked. Only used when\n   * `type` is set to \"link\".\n   */\n  @Prop() href?: string;\n\n  /**\n   * An icon to display above the label. Must be an SVG string.\n   */\n  @Prop() icon!: string;\n\n  /**\n   * The label to display below the icon.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Whether the item is currently active. Should be set to true when the item\n   * represents the current page.\n   */\n  @Prop() active?: boolean;\n\n  @Event() scoutClick: EventEmitter<void>;\n\n  render() {\n    const Tag = this.type === \"link\" ? \"a\" : \"button\";\n\n    const props =\n      this.type === \"link\"\n        ? {\n            href: this.href,\n          }\n        : {};\n\n    return (\n      <Tag\n        class={clsx(\"button\", this.active && \"active\")}\n        onClick={() => this.scoutClick.emit()}\n        {...props}\n      >\n        <span class=\"icon\" innerHTML={this.icon} />\n        <span class=\"label\">{this.label}</span>\n      </Tag>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bottom-bar-item.js","sourceRoot":"","sources":["../../../src/components/bottom-bar-item/bottom-bar-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,IAAI,MAAM,MAAM,CAAC;AAIxB;;;GAGG;AAQH,MAAM,OAAO,kBAAkB;IAC7B;;OAEG;IACK,IAAI,GAAa,QAAQ,CAAC;IAElC;;;OAGG;IACK,IAAI,CAAU;IACd,MAAM,CAAU;IAChB,GAAG,CAAU;IAErB;;OAEG;IACK,IAAI,CAAU;IAEtB;;OAEG;IACK,KAAK,CAAU;IAEvB;;;OAGG;IACK,MAAM,CAAW;IAEhB,UAAU,CAAqB;IAExC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QAElD,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK,MAAM;YAClB,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,yDAAyD;gBACzD,GAAG,EACD,IAAI,CAAC,GAAG;oBACR,CAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC;aACjE;YACH,CAAC,CAAC,EAAE,CAAC;QAET,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,IAAI,QAAQ,CAAC,EAC9C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK;YAET,6DAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI;YAC3C,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CACnC,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, type EventEmitter, h, Prop } from \"@stencil/core\";\nimport clsx from \"clsx\";\n\nexport type ItemType = \"button\" | \"link\";\n\n/**\n * A bottom bar item used within the bottom bar for navigation. Should not be\n * used outside of a bottom bar.\n */\n@Component({\n  tag: \"scout-bottom-bar-item\",\n  styleUrl: \"bottom-bar-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutBottomBarItem {\n  /**\n   * The type of the bottom bar item, either a button or a link.\n   */\n  @Prop() type: ItemType = \"button\";\n\n  /**\n   * An optional link to navigate to when the item is clicked. Only used when\n   * `type` is set to \"link\".\n   */\n  @Prop() href?: string;\n  @Prop() target?: string;\n  @Prop() rel?: string;\n\n  /**\n   * An icon to display above the label. Must be an SVG string.\n   */\n  @Prop() icon!: string;\n\n  /**\n   * The label to display below the icon.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Whether the item is currently active. Should be set to true when the item\n   * represents the current page.\n   */\n  @Prop() active?: boolean;\n\n  @Event() scoutClick: EventEmitter<void>;\n\n  render() {\n    const Tag = this.type === \"link\" ? \"a\" : \"button\";\n\n    const props =\n      this.type === \"link\"\n        ? {\n            href: this.href,\n            target: this.target,\n            // This might not be our job, but better safe than sorry.\n            rel:\n              this.rel ??\n              (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n          }\n        : {};\n\n    return (\n      <Tag\n        class={clsx(\"button\", this.active && \"active\")}\n        onClick={() => this.scoutClick.emit()}\n        {...props}\n      >\n        <span class=\"icon\" innerHTML={this.icon} />\n        <span class=\"label\">{this.label}</span>\n      </Tag>\n    );\n  }\n}\n"]}

package/dist/collection/components/button/button.css

@@ -1,18 +1,20 @@
 :host {
   display: inline-flex;
+  height: var(--spacing-10);
 }
 
-button {
+.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-3);
-  height: var(--spacing-10);
   padding: 0 var(--spacing-4);
   font: var(--type-body-base);
   border-radius: var(--spacing-2);
   border: 1px solid transparent;
   cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
 .icon {
@@ -26,69 +28,90 @@ button {
   height: 100%;
 }
 
-button.primary {
+.button.icon-only {
+  aspect-ratio: 1 / 1;
+  justify-content: center;
+  padding: 0;
+}
+
+.button.icon-only .icon {
+  margin: 0;
+}
+
+.button.icon-only .content {
+  /* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.button.primary {
   background-color: var(--color-background-brand-base);
   color: var(--color-text-brand-inverse);
 }
 
-button.primary:hover {
+.button.primary:hover {
     background-color: var(--color-background-brand-hovered);
   }
 
-button.primary:active {
+.button.primary:active {
     background-color: var(--color-background-brand-pressed);
   }
 
-button.outlined {
+.button.outlined {
   background-color: transparent;
   border-color: var(--color-background-brand-subtle-base);
   color: var(--color-text-brand-base);
 }
 
-button.outlined:hover {
+.button.outlined:hover {
     background-color: var(--color-background-brand-subtle-hovered);
   }
 
-button.outlined:active {
+.button.outlined:active {
     background-color: var(--color-background-brand-subtle-pressed);
   }
 
-button.text {
+.button.text {
   background-color: transparent;
   border-color: transparent;
   color: var(--color-text-brand-base);
 }
 
-button.text:hover {
+.button.text:hover {
     background-color: var(--color-background-brand-subtle-hovered);
   }
 
-button.text:active {
+.button.text:active {
     background-color: var(--color-background-brand-subtle-pressed);
   }
 
-button.caution {
+.button.caution {
   background-color: var(--color-background-caution-bold-base);
   color: var(--color-text-caution-bold-base);
 }
 
-button.caution:hover {
+.button.caution:hover {
     background-color: var(--color-background-caution-bold-hovered);
   }
 
-button.caution:active {
+.button.caution:active {
     background-color: var(--color-background-caution-bold-pressed);
   }
 
-button.danger {
+.button.danger {
   background-color: var(--color-background-danger-bold-base);
   color: var(--color-text-danger-bold-base);
 }
 
-button.danger:hover {
+.button.danger:hover {
     background-color: var(--color-background-danger-bold-hovered);
   }
 
-button.danger:active {
+.button.danger:active {
     background-color: var(--color-background-danger-bold-pressed);
   }

package/dist/collection/components/button/button.js

@@ -4,6 +4,9 @@ import { h } from "@stencil/core";
  */
 export class ScoutButton {
     type = "button";
+    href;
+    target;
+    rel;
     /**
      * The variant primarily affects the color of the button.
      */
@@ -12,9 +15,22 @@ export class ScoutButton {
      * An optional icon to display alongside the button text. Must be an SVG string.
      */
     icon;
+    iconOnly = false;
     scoutClick;
     render() {
-        return (h("button", { key: '7c5b9b8b4dbb40537b923585af17c81dc6ee1644', type: this.type, class: this.variant, onClick: () => this.scoutClick.emit() }, h("slot", { key: 'a89b795dbbd004cd8d9123bacf338cb87cca4953' }), this.icon && h("span", { key: '12ac9a0668ebd4d84fd02e5065f1c9802d188171', class: "icon", innerHTML: this.icon })));
+        const Tag = this.type === "link" ? "a" : "button";
+        const props = this.type === "link"
+            ? {
+                href: this.href,
+                target: this.target,
+                // This might not be our job, but better safe than sorry.
+                rel: this.rel ??
+                    (this.target === "_blank" ? "noopener noreferrer" : undefined),
+            }
+            : {
+                type: this.type,
+            };
+        return (h(Tag, { key: 'e82f79602197488fbf8e013259203ae5862da824', class: `button ${this.variant} ${this.iconOnly ? "icon-only" : ""}`, onClick: () => this.scoutClick.emit(), ...props }, h("span", { key: '1be7c7ccdb6f6570f08f06a81539174c76cbaa8c', class: "content" }, h("slot", { key: '556d6b6497cbcd437fbd4d77bff8b814511c844a' })), this.icon && h("span", { key: '9cf1e36f3cd767e2ac65dd0bdb1401759bf71e9e', class: "icon", innerHTML: this.icon })));
     }
     static get is() { return "scout-button"; }
     static get encapsulation() { return "shadow"; }
@@ -35,8 +51,8 @@ export class ScoutButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"button\" | \"submit\" | \"reset\"",
-                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "original": "\"button\" | \"submit\" | \"reset\" | \"link\"",
+                    "resolved": "\"button\" | \"link\" | \"reset\" | \"submit\"",
                     "references": {}
                 },
                 "required": false,
@@ -51,6 +67,63 @@ export class ScoutButton {
                 "attribute": "type",
                 "defaultValue": "\"button\""
             },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rel"
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,
@@ -60,7 +133,7 @@ export class ScoutButton {
                     "references": {
                         "Variant": {
                             "location": "local",
-                            "path": "/home/runner/work/j26-web-components/j26-web-components/packages/ui-webc/src/components/button/button.tsx",
+                            "path": "/home/runner/work/j26-components/j26-components/packages/ui-webc/src/components/button/button.tsx",
                             "id": "src/components/button/button.tsx::Variant"
                         }
                     }
@@ -95,6 +168,26 @@ export class ScoutButton {
                 "setter": false,
                 "reflect": false,
                 "attribute": "icon"
+            },
+            "iconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-only",
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAI7E;;GAEG;AAQH,MAAM,OAAO,WAAW;IACd,IAAI,GAAkC,QAAQ,CAAC;IAEvD;;OAEG;IACK,OAAO,GAAY,UAAU,CAAC;IAEtC;;OAEG;IACK,IAAI,CAAU;IAEb,UAAU,CAAqB;IAExC,MAAM;QACJ,OAAO,CACL,+DACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;YAErC,8DAAQ;YACP,IAAI,CAAC,IAAI,IAAI,6DAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAClD,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, type EventEmitter, h, Prop } from \"@stencil/core\";\n\nexport type Variant = \"primary\" | \"outlined\" | \"text\" | \"caution\" | \"danger\";\n\n/**\n * A simple button component.\n */\n@Component({\n  tag: \"scout-button\",\n  styleUrl: \"button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutButton {\n  @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n\n  /**\n   * The variant primarily affects the color of the button.\n   */\n  @Prop() variant: Variant = \"outlined\";\n\n  /**\n   * An optional icon to display alongside the button text. Must be an SVG string.\n   */\n  @Prop() icon?: string;\n\n  @Event() scoutClick: EventEmitter<void>;\n\n  render() {\n    return (\n      <button\n        type={this.type}\n        class={this.variant}\n        onClick={() => this.scoutClick.emit()}\n      >\n        <slot />\n        {this.icon && <span class=\"icon\" innerHTML={this.icon} />}\n      </button>\n    );\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAI7E;;GAEG;AAQH,MAAM,OAAO,WAAW;IACd,IAAI,GAA2C,QAAQ,CAAC;IAExD,IAAI,CAAU;IACd,MAAM,CAAU;IAChB,GAAG,CAAU;IAErB;;OAEG;IACK,OAAO,GAAY,UAAU,CAAC;IAEtC;;OAEG;IACK,IAAI,CAAU;IACd,QAAQ,GAAY,KAAK,CAAC;IAEzB,UAAU,CAAqB;IAExC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QAElD,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK,MAAM;YAClB,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,yDAAyD;gBACzD,GAAG,EACD,IAAI,CAAC,GAAG;oBACR,CAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC;aACjE;YACH,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC;QAER,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE,UAAU,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,EACnE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KACjC,KAAK;YAET,6DAAM,KAAK,EAAC,SAAS;gBACnB,8DAAQ,CACH;YACN,IAAI,CAAC,IAAI,IAAI,6DAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CACrD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, type EventEmitter, h, Prop } from \"@stencil/core\";\n\nexport type Variant = \"primary\" | \"outlined\" | \"text\" | \"caution\" | \"danger\";\n\n/**\n * A simple button component.\n */\n@Component({\n  tag: \"scout-button\",\n  styleUrl: \"button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutButton {\n  @Prop() type: \"button\" | \"submit\" | \"reset\" | \"link\" = \"button\";\n\n  @Prop() href?: string;\n  @Prop() target?: string;\n  @Prop() rel?: string;\n\n  /**\n   * The variant primarily affects the color of the button.\n   */\n  @Prop() variant: Variant = \"outlined\";\n\n  /**\n   * An optional icon to display alongside the button text. Must be an SVG string.\n   */\n  @Prop() icon?: string;\n  @Prop() iconOnly: boolean = false;\n\n  @Event() scoutClick: EventEmitter<void>;\n\n  render() {\n    const Tag = this.type === \"link\" ? \"a\" : \"button\";\n\n    const props =\n      this.type === \"link\"\n        ? {\n            href: this.href,\n            target: this.target,\n            // This might not be our job, but better safe than sorry.\n            rel:\n              this.rel ??\n              (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n          }\n        : {\n            type: this.type,\n          };\n\n    return (\n      <Tag\n        class={`button ${this.variant} ${this.iconOnly ? \"icon-only\" : \"\"}`}\n        onClick={() => this.scoutClick.emit()}\n        {...props}\n      >\n        <span class=\"content\">\n          <slot />\n        </span>\n        {this.icon && <span class=\"icon\" innerHTML={this.icon} />}\n      </Tag>\n    );\n  }\n}\n"]}

package/dist/collection/components/card/card.css

@@ -4,5 +4,7 @@
   border: 1px solid var(--color-gray-100);
   padding: var(--spacing-2);
   /* TODO: We don't have tokens for shadows yet */
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-}
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px -1px rgba(0, 0, 0, 0.1);
+}

package/dist/collection/components/card/card.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class ScoutCard {
     render() {
-        return h("slot", { key: 'bde708b7482da31d53fbc29581bed3f068e26279' });
+        return h("slot", { key: '44e84e98fac4b83c20fdec40a532c752f41dffd7' });
     }
     static get is() { return "scout-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkbox/checkbox.css

@@ -25,7 +25,7 @@
 
 .checkbox:checked:hover {
   background-color: var(--color-background-brand-hovered);
-  border: 2px solid var(--color-background-brand-hovered);
+  border-color: var(--color-background-brand-hovered);
   box-shadow: none;
 }
 
@@ -70,12 +70,8 @@
 
 label {
   display: flex;
-  flex-direction: row-reverse;
   align-items: center;
+  gap: var(--spacing-2);
   font: var(--type-label-base);
   color: var(--color-text-base);
 }
-
-.inlineDivider {
-  width: var(--spacing-2);
-}