@abgov/react-components 4.0.0-alpha.31 → 4.0.0-alpha.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/react-components.esm.js +2 -2
  3. package/react-components.umd.js +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abgov/react-components",
3
- "version": "4.0.0-alpha.31",
3
+ "version": "4.0.0-alpha.32",
4
4
  "description": "Government of Alberta - UI components for React",
5
5
  "bugs": {
6
6
  "url": "https://github.com/GovAlta/ui-components/issues"
package/react-components.esm.js CHANGED
@@ -2199,7 +2199,7 @@ function instance$w($$self, $$props, $$invalidate) {
2199
2199
  class Button extends SvelteElement {
2200
2200
  constructor(options) {
2201
2201
  super();
2202
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@media(max-width: 480px){:host{width:100%}button{width:100%}}button{display:flex;box-sizing:border-box;border-radius:0.25rem;border:2px solid var(--goa-color-interactive);box-sizing:border-box;cursor:pointer;font-family:var(--font-family);font-size:var(--fs-lg);font-weight:400;height:var(--button-height);letter-spacing:0.5px;line-height:100%;padding:0 0.75rem;gap:0.5rem;align-items:center;justify-content:center;transition:transform 0.1s ease-in-out, background-color 0.2s ease-in-out,
2202
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@media(max-width: 480px){:host{width:100%}button{width:100%}}button{display:inline-flex;box-sizing:border-box;border-radius:0.25rem;border:2px solid var(--goa-color-interactive);box-sizing:border-box;cursor:pointer;font-family:var(--font-family);font-size:var(--fs-lg);font-weight:400;height:var(--button-height);letter-spacing:0.5px;line-height:100%;padding:0 0.75rem;gap:0.5rem;align-items:center;justify-content:center;transition:transform 0.1s ease-in-out, background-color 0.2s ease-in-out,
2203
2203
  border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--fs-base)}button.start{height:var(--button-height-tall);font-weight:var(--fw-bold)}button.start,button.primary{border:2px solid var(--goa-color-interactive);background:var(--goa-color-interactive);color:var(--goa-color-text-light)}button.start:hover,button.primary:hover{border-color:var(--goa-color-interactive--hover);background:var(--goa-color-interactive--hover)}button.start:focus,button.start:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive--focus);border-color:var(--goa-color-interactive--active);background:var(--goa-color-interactive--active);outline:none}button.secondary{border:2px solid var(--goa-color-interactive);background:var(--color-white);color:var(--goa-color-interactive)}button.secondary:hover{border-color:var(--goa-color-interactive--hover);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);background:var(--color-gray-100);outline:none}button.tertiary{border:1px solid transparent;background:transparent;color:var(--goa-color-interactive);text-decoration:underline}button.tertiary:hover{border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--color-gray-100);background:var(--color-gray-100);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.primary.danger{color:var(--color-white);background:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency)}.primary.danger:hover{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.primary.danger:focus,.primary.danger:active{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.secondary.danger{color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);background:var(--color-white)}.secondary.danger:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.secondary.danger:focus,.secondary.danger:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.danger{color:var(--goa-color-status-emergency);border-color:var(--color-gray-200);background:var(--color-white)}.tertiary.danger:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.danger:focus,.tertiary.danger:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}</style>`;
2204
2204
  init(this, {
2205
2205
  target: this.shadowRoot,
@@ -6412,7 +6412,7 @@ function instance$i($$self, $$props, $$invalidate) {
6412
6412
  class IconButton extends SvelteElement {
6413
6413
  constructor(options) {
6414
6414
  super();
6415
- this.shadowRoot.innerHTML = `<style>:host{display:flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}.goa-icon-button,.goa-icon-button *{box-sizing:border-box}.goa-icon-button{display:inline-flex;align-items:center;background:transparent;cursor:pointer;padding:0;border:none}.goa-icon-button--color{border-radius:0.5rem;padding:calc(var(--size) / 4)}.goa-icon-button--color{border-radius:0.5rem;color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.goa-icon-button--color:active,.goa-icon-button--nocolor:active{transform:scale(0.9);border:none}.goa-icon-button--color:hover{background-color:var(--goa-color-primary-light)}.goa-icon-button--color.goa-icon-button--inverted:hover{background-color:var(--goa-color-primary-dark)}.goa-icon-button:disabled{color:var(--color-gray-200);fill:var(--color-gray-200);transform:none;cursor:default}.goa-icon-button:disabled:hover{background-color:transparent}</style>`;
6415
+ this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}.goa-icon-button,.goa-icon-button *{box-sizing:border-box}.goa-icon-button{display:inline-flex;align-items:center;background:transparent;cursor:pointer;padding:0;border:none}.goa-icon-button--color{border-radius:0.5rem;padding:calc(var(--size) / 4)}.goa-icon-button--color{border-radius:0.5rem;color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.goa-icon-button--color:active,.goa-icon-button--nocolor:active{transform:scale(0.9);border:none}.goa-icon-button--color:hover{background-color:var(--goa-color-primary-light)}.goa-icon-button--color.goa-icon-button--inverted:hover{background-color:var(--goa-color-primary-dark)}.goa-icon-button:disabled{color:var(--color-gray-200);fill:var(--color-gray-200);transform:none;cursor:default}.goa-icon-button:disabled:hover{background-color:transparent}</style>`;
6416
6416
  init(this, {
6417
6417
  target: this.shadowRoot,
6418
6418
  props: attribute_to_object(this.attributes),
package/react-components.umd.js CHANGED
@@ -2255,7 +2255,7 @@
2255
2255
  class Button extends SvelteElement {
2256
2256
  constructor(options) {
2257
2257
  super();
2258
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@media(max-width: 480px){:host{width:100%}button{width:100%}}button{display:flex;box-sizing:border-box;border-radius:0.25rem;border:2px solid var(--goa-color-interactive);box-sizing:border-box;cursor:pointer;font-family:var(--font-family);font-size:var(--fs-lg);font-weight:400;height:var(--button-height);letter-spacing:0.5px;line-height:100%;padding:0 0.75rem;gap:0.5rem;align-items:center;justify-content:center;transition:transform 0.1s ease-in-out, background-color 0.2s ease-in-out,
2258
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}@media(max-width: 480px){:host{width:100%}button{width:100%}}button{display:inline-flex;box-sizing:border-box;border-radius:0.25rem;border:2px solid var(--goa-color-interactive);box-sizing:border-box;cursor:pointer;font-family:var(--font-family);font-size:var(--fs-lg);font-weight:400;height:var(--button-height);letter-spacing:0.5px;line-height:100%;padding:0 0.75rem;gap:0.5rem;align-items:center;justify-content:center;transition:transform 0.1s ease-in-out, background-color 0.2s ease-in-out,
2259
2259
  border-color 0.2s ease-in-out}.text{padding-bottom:var(--font-valign-fix)}button:disabled{pointer-events:none;opacity:0.5}button.compact{height:var(--button-height-compact);font-size:var(--fs-base)}button.start{height:var(--button-height-tall);font-weight:var(--fw-bold)}button.start,button.primary{border:2px solid var(--goa-color-interactive);background:var(--goa-color-interactive);color:var(--goa-color-text-light)}button.start:hover,button.primary:hover{border-color:var(--goa-color-interactive--hover);background:var(--goa-color-interactive--hover)}button.start:focus,button.start:active,button.primary:focus,button.primary:active{box-shadow:0 0 0 3px var(--goa-color-interactive--focus);border-color:var(--goa-color-interactive--active);background:var(--goa-color-interactive--active);outline:none}button.secondary{border:2px solid var(--goa-color-interactive);background:var(--color-white);color:var(--goa-color-interactive)}button.secondary:hover{border-color:var(--goa-color-interactive--hover);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.secondary:focus,button.secondary:active{border-color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);background:var(--color-gray-100);outline:none}button.tertiary{border:1px solid transparent;background:transparent;color:var(--goa-color-interactive);text-decoration:underline}button.tertiary:hover{border-color:var(--color-gray-100);color:var(--goa-color-interactive--hover);background:var(--color-gray-100)}button.tertiary:focus,button.tertiary:active{border-color:var(--color-gray-100);background:var(--color-gray-100);color:var(--goa-color-interactive--active);box-shadow:0 0 0 3px var(--goa-color-interactive--focus);outline:none}.primary.danger{color:var(--color-white);background:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency)}.primary.danger:hover{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.primary.danger:focus,.primary.danger:active{background:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark)}.secondary.danger{color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);background:var(--color-white)}.secondary.danger:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.secondary.danger:focus,.secondary.danger:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.danger{color:var(--goa-color-status-emergency);border-color:var(--color-gray-200);background:var(--color-white)}.tertiary.danger:hover{border-color:var(--goa-color-status-emergency-dark);color:var(--goa-color-status-emergency-dark);background:var(--color-white)}.tertiary.danger:focus,.tertiary.danger:active{color:var(--goa-color-status-emergency-dark);border-color:var(--goa-color-status-emergency-dark);background:var(--color-white)}</style>`;
2260
2260
  init(this, {
2261
2261
  target: this.shadowRoot,
@@ -6455,7 +6455,7 @@
6455
6455
  class IconButton extends SvelteElement {
6456
6456
  constructor(options) {
6457
6457
  super();
6458
- this.shadowRoot.innerHTML = `<style>:host{display:flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}.goa-icon-button,.goa-icon-button *{box-sizing:border-box}.goa-icon-button{display:inline-flex;align-items:center;background:transparent;cursor:pointer;padding:0;border:none}.goa-icon-button--color{border-radius:0.5rem;padding:calc(var(--size) / 4)}.goa-icon-button--color{border-radius:0.5rem;color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.goa-icon-button--color:active,.goa-icon-button--nocolor:active{transform:scale(0.9);border:none}.goa-icon-button--color:hover{background-color:var(--goa-color-primary-light)}.goa-icon-button--color.goa-icon-button--inverted:hover{background-color:var(--goa-color-primary-dark)}.goa-icon-button:disabled{color:var(--color-gray-200);fill:var(--color-gray-200);transform:none;cursor:default}.goa-icon-button:disabled:hover{background-color:transparent}</style>`;
6458
+ this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}.goa-icon-button,.goa-icon-button *{box-sizing:border-box}.goa-icon-button{display:inline-flex;align-items:center;background:transparent;cursor:pointer;padding:0;border:none}.goa-icon-button--color{border-radius:0.5rem;padding:calc(var(--size) / 4)}.goa-icon-button--color{border-radius:0.5rem;color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.goa-icon-button--color:active,.goa-icon-button--nocolor:active{transform:scale(0.9);border:none}.goa-icon-button--color:hover{background-color:var(--goa-color-primary-light)}.goa-icon-button--color.goa-icon-button--inverted:hover{background-color:var(--goa-color-primary-dark)}.goa-icon-button:disabled{color:var(--color-gray-200);fill:var(--color-gray-200);transform:none;cursor:default}.goa-icon-button:disabled:hover{background-color:transparent}</style>`;
6459
6459
  init(this, {
6460
6460
  target: this.shadowRoot,
6461
6461
  props: attribute_to_object(this.attributes),