@abgov/react-components 4.0.0-alpha.102 → 4.0.0-alpha.103

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 (4) hide show
  1. package/lib/table/table.d.ts +4 -1
  2. package/package.json +1 -1
  3. package/react-components.esm.js +77 -42
  4. package/react-components.umd.js +77 -42
package/lib/table/table.d.ts CHANGED
@@ -1,8 +1,10 @@
1
1
  import React, { ReactNode } from "react";
2
2
  import { Margins } from "../../common/styling";
3
+ export declare type TableVariant = "normal" | "relaxed";
3
4
  interface WCProps extends Margins {
4
5
  width?: string;
5
6
  stickyheader?: boolean;
7
+ variant?: TableVariant;
6
8
  }
7
9
  declare global {
8
10
  namespace JSX {
@@ -13,7 +15,8 @@ declare global {
13
15
  }
14
16
  export interface TableProps extends Margins {
15
17
  width?: string;
16
- children?: ReactNode;
18
+ variant?: TableVariant;
19
+ children: ReactNode;
17
20
  }
18
21
  export declare function GoATable(props: TableProps): JSX.Element;
19
22
  export default GoATable;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abgov/react-components",
3
- "version": "4.0.0-alpha.102",
3
+ "version": "4.0.0-alpha.103",
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
@@ -11068,7 +11068,7 @@ function instance$c($$self, $$props, $$invalidate) {
11068
11068
  class Input extends SvelteElement {
11069
11069
  constructor(options) {
11070
11070
  super();
11071
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[type="text"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="number"]{font-family:var(--font-family)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--color-gray-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius);border-right:1px solid var(--color-gray-600)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-left:1px solid var(--color-gray-600)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--color-gray-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--color-gray-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
11071
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto;font-family:var(--font-family)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--color-gray-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius);border-right:1px solid var(--color-gray-600)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-left:1px solid var(--color-gray-600)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--color-gray-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--color-gray-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
11072
11072
  center center no-repeat}</style>`;
11073
11073
  init(this, {
11074
11074
  target: this.shadowRoot,
@@ -15147,23 +15147,28 @@ function create_fragment$4(ctx) {
15147
15147
  <tbody><tr><td></td></tr></tbody>
15148
15148
  <tfoot><tr><td></td></tr></tfoot>`;
15149
15149
  this.c = noop;
15150
+ attr(table, "class",
15151
+ /*variant*/
15152
+ ctx[1]);
15150
15153
  attr(table, "style", table_style_value = `
15151
- width: ${
15154
+ ${
15155
+ /*width*/
15156
+ ctx[0] ? `width: ${
15152
15157
  /*width*/
15153
- ctx[0]};
15158
+ ctx[0]};` : ``}
15154
15159
  ${calculateMargin(
15155
15160
  /*mt*/
15156
- ctx[1],
15157
- /*mr*/
15158
15161
  ctx[2],
15159
- /*mb*/
15162
+ /*mr*/
15160
15163
  ctx[3],
15164
+ /*mb*/
15165
+ ctx[4],
15161
15166
  /*ml*/
15162
- ctx[4])}
15167
+ ctx[5])}
15163
15168
  `);
15164
15169
  toggle_class(table, "sticky",
15165
15170
  /*_stickyHeader*/
15166
- ctx[6]);
15171
+ ctx[7]);
15167
15172
  },
15168
15173
 
15169
15174
  m(target, anchor) {
@@ -15173,35 +15178,45 @@ function create_fragment$4(ctx) {
15173
15178
  append(table, template);
15174
15179
  /*table_binding*/
15175
15180
 
15176
- ctx[8](table);
15181
+ ctx[9](table);
15177
15182
  },
15178
15183
 
15179
15184
  p(ctx, [dirty]) {
15185
+ if (dirty &
15186
+ /*variant*/
15187
+ 2) {
15188
+ attr(table, "class",
15189
+ /*variant*/
15190
+ ctx[1]);
15191
+ }
15192
+
15180
15193
  if (dirty &
15181
15194
  /*width, mt, mr, mb, ml*/
15182
- 31 && table_style_value !== (table_style_value = `
15183
- width: ${
15195
+ 61 && table_style_value !== (table_style_value = `
15196
+ ${
15184
15197
  /*width*/
15185
- ctx[0]};
15198
+ ctx[0] ? `width: ${
15199
+ /*width*/
15200
+ ctx[0]};` : ``}
15186
15201
  ${calculateMargin(
15187
15202
  /*mt*/
15188
- ctx[1],
15189
- /*mr*/
15190
15203
  ctx[2],
15191
- /*mb*/
15204
+ /*mr*/
15192
15205
  ctx[3],
15206
+ /*mb*/
15207
+ ctx[4],
15193
15208
  /*ml*/
15194
- ctx[4])}
15209
+ ctx[5])}
15195
15210
  `)) {
15196
15211
  attr(table, "style", table_style_value);
15197
15212
  }
15198
15213
 
15199
15214
  if (dirty &
15200
- /*_stickyHeader*/
15201
- 64) {
15215
+ /*variant, _stickyHeader*/
15216
+ 130) {
15202
15217
  toggle_class(table, "sticky",
15203
15218
  /*_stickyHeader*/
15204
- ctx[6]);
15219
+ ctx[7]);
15205
15220
  }
15206
15221
  },
15207
15222
 
@@ -15212,7 +15227,7 @@ function create_fragment$4(ctx) {
15212
15227
  if (detaching) detach(table);
15213
15228
  /*table_binding*/
15214
15229
 
15215
- ctx[8](null);
15230
+ ctx[9](null);
15216
15231
  }
15217
15232
 
15218
15233
  };
@@ -15221,12 +15236,16 @@ function create_fragment$4(ctx) {
15221
15236
  function instance$2($$self, $$props, $$invalidate) {
15222
15237
  let _stickyHeader;
15223
15238
 
15239
+ const [Variants, validateVariant] = typeValidator("Table variant", ["normal", "relaxed"], true);
15224
15240
  let {
15225
15241
  width = ""
15226
15242
  } = $$props;
15227
15243
  let {
15228
15244
  stickyheader = "false"
15229
15245
  } = $$props;
15246
+ let {
15247
+ variant = "normal"
15248
+ } = $$props;
15230
15249
  let {
15231
15250
  mt = null
15232
15251
  } = $$props;
@@ -15243,6 +15262,8 @@ function instance$2($$self, $$props, $$invalidate) {
15243
15262
  let _rootEl;
15244
15263
 
15245
15264
  onMount(() => {
15265
+ validateVariant(variant);
15266
+
15246
15267
  const slot = _rootEl.querySelector("slot");
15247
15268
 
15248
15269
  if (slot) {
@@ -15258,45 +15279,47 @@ function instance$2($$self, $$props, $$invalidate) {
15258
15279
  function table_binding($$value) {
15259
15280
  binding_callbacks[$$value ? 'unshift' : 'push'](() => {
15260
15281
  _rootEl = $$value;
15261
- $$invalidate(5, _rootEl);
15282
+ $$invalidate(6, _rootEl);
15262
15283
  });
15263
15284
  }
15264
15285
 
15265
15286
  $$self.$$set = $$props => {
15266
15287
  if ('width' in $$props) $$invalidate(0, width = $$props.width);
15267
- if ('stickyheader' in $$props) $$invalidate(7, stickyheader = $$props.stickyheader);
15268
- if ('mt' in $$props) $$invalidate(1, mt = $$props.mt);
15269
- if ('mr' in $$props) $$invalidate(2, mr = $$props.mr);
15270
- if ('mb' in $$props) $$invalidate(3, mb = $$props.mb);
15271
- if ('ml' in $$props) $$invalidate(4, ml = $$props.ml);
15288
+ if ('stickyheader' in $$props) $$invalidate(8, stickyheader = $$props.stickyheader);
15289
+ if ('variant' in $$props) $$invalidate(1, variant = $$props.variant);
15290
+ if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
15291
+ if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
15292
+ if ('mb' in $$props) $$invalidate(4, mb = $$props.mb);
15293
+ if ('ml' in $$props) $$invalidate(5, ml = $$props.ml);
15272
15294
  };
15273
15295
 
15274
15296
  $$self.$$.update = () => {
15275
15297
  if ($$self.$$.dirty &
15276
15298
  /*stickyheader*/
15277
- 128) {
15278
- $$invalidate(6, _stickyHeader = toBoolean(stickyheader));
15299
+ 256) {
15300
+ $$invalidate(7, _stickyHeader = toBoolean(stickyheader));
15279
15301
  }
15280
15302
  };
15281
15303
 
15282
- return [width, mt, mr, mb, ml, _rootEl, _stickyHeader, stickyheader, table_binding];
15304
+ return [width, variant, mt, mr, mb, ml, _rootEl, _stickyHeader, stickyheader, table_binding];
15283
15305
  }
15284
15306
 
15285
15307
  class Table extends SvelteElement {
15286
15308
  constructor(options) {
15287
15309
  super();
15288
- this.shadowRoot.innerHTML = `<style>table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{padding:1rem 1.5rem;border-bottom:1px solid var(--color-gray-200);line-height:1rem}th{background-color:var(--color-white);color:var(--goa-color-text-secondary);padding:1rem;vertical-align:middle;text-align:left;border-bottom:2px solid var(--color-gray-600)}tfoot td{background-color:var(--color-gray-100)}tfoot tr:first-child td{border-top:2px solid var(--color-gray-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
15310
+ this.shadowRoot.innerHTML = `<style>table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{padding:0.75rem 1rem 0.5rem;border-bottom:1px solid var(--color-gray-200);line-height:1rem}table.relaxed td{padding:1.25rem 1rem 1rem}th{background-color:var(--color-white);color:var(--goa-color-text-secondary);padding:1rem;vertical-align:middle;text-align:left;border-bottom:2px solid var(--color-gray-600)}tfoot td{background-color:var(--color-gray-100)}tfoot tr:first-child td{border-top:2px solid var(--color-gray-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
15289
15311
  init(this, {
15290
15312
  target: this.shadowRoot,
15291
15313
  props: attribute_to_object(this.attributes),
15292
15314
  customElement: true
15293
15315
  }, instance$2, create_fragment$4, safe_not_equal, {
15294
15316
  width: 0,
15295
- stickyheader: 7,
15296
- mt: 1,
15297
- mr: 2,
15298
- mb: 3,
15299
- ml: 4
15317
+ stickyheader: 8,
15318
+ variant: 1,
15319
+ mt: 2,
15320
+ mr: 3,
15321
+ mb: 4,
15322
+ ml: 5
15300
15323
  }, null);
15301
15324
 
15302
15325
  if (options) {
@@ -15312,7 +15335,7 @@ class Table extends SvelteElement {
15312
15335
  }
15313
15336
 
15314
15337
  static get observedAttributes() {
15315
- return ["width", "stickyheader", "mt", "mr", "mb", "ml"];
15338
+ return ["width", "stickyheader", "variant", "mt", "mr", "mb", "ml"];
15316
15339
  }
15317
15340
 
15318
15341
  get width() {
@@ -15327,7 +15350,7 @@ class Table extends SvelteElement {
15327
15350
  }
15328
15351
 
15329
15352
  get stickyheader() {
15330
- return this.$$.ctx[7];
15353
+ return this.$$.ctx[8];
15331
15354
  }
15332
15355
 
15333
15356
  set stickyheader(stickyheader) {
@@ -15337,10 +15360,21 @@ class Table extends SvelteElement {
15337
15360
  flush();
15338
15361
  }
15339
15362
 
15340
- get mt() {
15363
+ get variant() {
15341
15364
  return this.$$.ctx[1];
15342
15365
  }
15343
15366
 
15367
+ set variant(variant) {
15368
+ this.$$set({
15369
+ variant
15370
+ });
15371
+ flush();
15372
+ }
15373
+
15374
+ get mt() {
15375
+ return this.$$.ctx[2];
15376
+ }
15377
+
15344
15378
  set mt(mt) {
15345
15379
  this.$$set({
15346
15380
  mt
@@ -15349,7 +15383,7 @@ class Table extends SvelteElement {
15349
15383
  }
15350
15384
 
15351
15385
  get mr() {
15352
- return this.$$.ctx[2];
15386
+ return this.$$.ctx[3];
15353
15387
  }
15354
15388
 
15355
15389
  set mr(mr) {
@@ -15360,7 +15394,7 @@ class Table extends SvelteElement {
15360
15394
  }
15361
15395
 
15362
15396
  get mb() {
15363
- return this.$$.ctx[3];
15397
+ return this.$$.ctx[4];
15364
15398
  }
15365
15399
 
15366
15400
  set mb(mb) {
@@ -15371,7 +15405,7 @@ class Table extends SvelteElement {
15371
15405
  }
15372
15406
 
15373
15407
  get ml() {
15374
- return this.$$.ctx[4];
15408
+ return this.$$.ctx[5];
15375
15409
  }
15376
15410
 
15377
15411
  set ml(ml) {
@@ -17282,7 +17316,8 @@ const GoASpinner = ({
17282
17316
  function GoATable(props) {
17283
17317
  return jsx("goa-table", Object.assign({
17284
17318
  width: props.width,
17285
- stickyheader: false
17319
+ stickyheader: false,
17320
+ variant: props.variant
17286
17321
  }, {
17287
17322
  children: jsx("template", {
17288
17323
  children: jsx("table", {
package/react-components.umd.js CHANGED
@@ -11114,7 +11114,7 @@
11114
11114
  class Input extends SvelteElement {
11115
11115
  constructor(options) {
11116
11116
  super();
11117
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[type="text"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="number"]{font-family:var(--font-family)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--color-gray-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius);border-right:1px solid var(--color-gray-600)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-left:1px solid var(--color-gray-600)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--color-gray-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--color-gray-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
11117
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box}.container{position:relative;width:100%;display:inline-block}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);display:inline-flex;align-items:stretch;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto;font-family:var(--font-family)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}.prefix,.suffix,.leading-content ::slotted(div),.trailing-content ::slotted(div){background-color:var(--color-gray-100);padding:0 0.75rem;display:flex;align-items:center}.leading-content ::slotted(div),.trailing-content ::slotted(div){padding:0.5rem 0.75rem}.prefix,.leading-content ::slotted(div){border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius);border-right:1px solid var(--color-gray-600)}.suffix,.trailing-content ::slotted(div){border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius);border-left:1px solid var(--color-gray-600)}.goa-input--disabled .prefix,.goa-input--disabled .leading-content ::slotted(div){border-right:1px solid var(--color-gray-200)}.goa-input--disabled .suffix,.goa-input--disabled .trailing-content ::slotted(div){border-left:1px solid var(--color-gray-200)}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
11118
11118
  center center no-repeat}</style>`;
11119
11119
  init(this, {
11120
11120
  target: this.shadowRoot,
@@ -15194,23 +15194,28 @@
15194
15194
  <tbody><tr><td></td></tr></tbody>
15195
15195
  <tfoot><tr><td></td></tr></tfoot>`;
15196
15196
  this.c = noop;
15197
+ attr(table, "class",
15198
+ /*variant*/
15199
+ ctx[1]);
15197
15200
  attr(table, "style", table_style_value = `
15198
- width: ${
15201
+ ${
15202
+ /*width*/
15203
+ ctx[0] ? `width: ${
15199
15204
  /*width*/
15200
- ctx[0]};
15205
+ ctx[0]};` : ``}
15201
15206
  ${calculateMargin(
15202
15207
  /*mt*/
15203
- ctx[1],
15204
- /*mr*/
15205
15208
  ctx[2],
15206
- /*mb*/
15209
+ /*mr*/
15207
15210
  ctx[3],
15211
+ /*mb*/
15212
+ ctx[4],
15208
15213
  /*ml*/
15209
- ctx[4])}
15214
+ ctx[5])}
15210
15215
  `);
15211
15216
  toggle_class(table, "sticky",
15212
15217
  /*_stickyHeader*/
15213
- ctx[6]);
15218
+ ctx[7]);
15214
15219
  },
15215
15220
 
15216
15221
  m(target, anchor) {
@@ -15220,35 +15225,45 @@
15220
15225
  append(table, template);
15221
15226
  /*table_binding*/
15222
15227
 
15223
- ctx[8](table);
15228
+ ctx[9](table);
15224
15229
  },
15225
15230
 
15226
15231
  p(ctx, [dirty]) {
15232
+ if (dirty &
15233
+ /*variant*/
15234
+ 2) {
15235
+ attr(table, "class",
15236
+ /*variant*/
15237
+ ctx[1]);
15238
+ }
15239
+
15227
15240
  if (dirty &
15228
15241
  /*width, mt, mr, mb, ml*/
15229
- 31 && table_style_value !== (table_style_value = `
15230
- width: ${
15242
+ 61 && table_style_value !== (table_style_value = `
15243
+ ${
15231
15244
  /*width*/
15232
- ctx[0]};
15245
+ ctx[0] ? `width: ${
15246
+ /*width*/
15247
+ ctx[0]};` : ``}
15233
15248
  ${calculateMargin(
15234
15249
  /*mt*/
15235
- ctx[1],
15236
- /*mr*/
15237
15250
  ctx[2],
15238
- /*mb*/
15251
+ /*mr*/
15239
15252
  ctx[3],
15253
+ /*mb*/
15254
+ ctx[4],
15240
15255
  /*ml*/
15241
- ctx[4])}
15256
+ ctx[5])}
15242
15257
  `)) {
15243
15258
  attr(table, "style", table_style_value);
15244
15259
  }
15245
15260
 
15246
15261
  if (dirty &
15247
- /*_stickyHeader*/
15248
- 64) {
15262
+ /*variant, _stickyHeader*/
15263
+ 130) {
15249
15264
  toggle_class(table, "sticky",
15250
15265
  /*_stickyHeader*/
15251
- ctx[6]);
15266
+ ctx[7]);
15252
15267
  }
15253
15268
  },
15254
15269
 
@@ -15259,7 +15274,7 @@
15259
15274
  if (detaching) detach(table);
15260
15275
  /*table_binding*/
15261
15276
 
15262
- ctx[8](null);
15277
+ ctx[9](null);
15263
15278
  }
15264
15279
 
15265
15280
  };
@@ -15268,12 +15283,16 @@
15268
15283
  function instance$2($$self, $$props, $$invalidate) {
15269
15284
  let _stickyHeader;
15270
15285
 
15286
+ const [Variants, validateVariant] = typeValidator("Table variant", ["normal", "relaxed"], true);
15271
15287
  let {
15272
15288
  width = ""
15273
15289
  } = $$props;
15274
15290
  let {
15275
15291
  stickyheader = "false"
15276
15292
  } = $$props;
15293
+ let {
15294
+ variant = "normal"
15295
+ } = $$props;
15277
15296
  let {
15278
15297
  mt = null
15279
15298
  } = $$props;
@@ -15290,6 +15309,8 @@
15290
15309
  let _rootEl;
15291
15310
 
15292
15311
  onMount(() => {
15312
+ validateVariant(variant);
15313
+
15293
15314
  const slot = _rootEl.querySelector("slot");
15294
15315
 
15295
15316
  if (slot) {
@@ -15305,45 +15326,47 @@
15305
15326
  function table_binding($$value) {
15306
15327
  binding_callbacks[$$value ? 'unshift' : 'push'](() => {
15307
15328
  _rootEl = $$value;
15308
- $$invalidate(5, _rootEl);
15329
+ $$invalidate(6, _rootEl);
15309
15330
  });
15310
15331
  }
15311
15332
 
15312
15333
  $$self.$$set = $$props => {
15313
15334
  if ('width' in $$props) $$invalidate(0, width = $$props.width);
15314
- if ('stickyheader' in $$props) $$invalidate(7, stickyheader = $$props.stickyheader);
15315
- if ('mt' in $$props) $$invalidate(1, mt = $$props.mt);
15316
- if ('mr' in $$props) $$invalidate(2, mr = $$props.mr);
15317
- if ('mb' in $$props) $$invalidate(3, mb = $$props.mb);
15318
- if ('ml' in $$props) $$invalidate(4, ml = $$props.ml);
15335
+ if ('stickyheader' in $$props) $$invalidate(8, stickyheader = $$props.stickyheader);
15336
+ if ('variant' in $$props) $$invalidate(1, variant = $$props.variant);
15337
+ if ('mt' in $$props) $$invalidate(2, mt = $$props.mt);
15338
+ if ('mr' in $$props) $$invalidate(3, mr = $$props.mr);
15339
+ if ('mb' in $$props) $$invalidate(4, mb = $$props.mb);
15340
+ if ('ml' in $$props) $$invalidate(5, ml = $$props.ml);
15319
15341
  };
15320
15342
 
15321
15343
  $$self.$$.update = () => {
15322
15344
  if ($$self.$$.dirty &
15323
15345
  /*stickyheader*/
15324
- 128) {
15325
- $$invalidate(6, _stickyHeader = toBoolean(stickyheader));
15346
+ 256) {
15347
+ $$invalidate(7, _stickyHeader = toBoolean(stickyheader));
15326
15348
  }
15327
15349
  };
15328
15350
 
15329
- return [width, mt, mr, mb, ml, _rootEl, _stickyHeader, stickyheader, table_binding];
15351
+ return [width, variant, mt, mr, mb, ml, _rootEl, _stickyHeader, stickyheader, table_binding];
15330
15352
  }
15331
15353
 
15332
15354
  class Table extends SvelteElement {
15333
15355
  constructor(options) {
15334
15356
  super();
15335
- this.shadowRoot.innerHTML = `<style>table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{padding:1rem 1.5rem;border-bottom:1px solid var(--color-gray-200);line-height:1rem}th{background-color:var(--color-white);color:var(--goa-color-text-secondary);padding:1rem;vertical-align:middle;text-align:left;border-bottom:2px solid var(--color-gray-600)}tfoot td{background-color:var(--color-gray-100)}tfoot tr:first-child td{border-top:2px solid var(--color-gray-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
15357
+ this.shadowRoot.innerHTML = `<style>table{border-collapse:collapse}table.sticky{position:relative}table.sticky thead{position:sticky;top:0}td{padding:0.75rem 1rem 0.5rem;border-bottom:1px solid var(--color-gray-200);line-height:1rem}table.relaxed td{padding:1.25rem 1rem 1rem}th{background-color:var(--color-white);color:var(--goa-color-text-secondary);padding:1rem;vertical-align:middle;text-align:left;border-bottom:2px solid var(--color-gray-600)}tfoot td{background-color:var(--color-gray-100)}tfoot tr:first-child td{border-top:2px solid var(--color-gray-200)}tfoot tr:last-child td{border-bottom:none}</style>`;
15336
15358
  init(this, {
15337
15359
  target: this.shadowRoot,
15338
15360
  props: attribute_to_object(this.attributes),
15339
15361
  customElement: true
15340
15362
  }, instance$2, create_fragment$4, safe_not_equal, {
15341
15363
  width: 0,
15342
- stickyheader: 7,
15343
- mt: 1,
15344
- mr: 2,
15345
- mb: 3,
15346
- ml: 4
15364
+ stickyheader: 8,
15365
+ variant: 1,
15366
+ mt: 2,
15367
+ mr: 3,
15368
+ mb: 4,
15369
+ ml: 5
15347
15370
  }, null);
15348
15371
 
15349
15372
  if (options) {
@@ -15359,7 +15382,7 @@
15359
15382
  }
15360
15383
 
15361
15384
  static get observedAttributes() {
15362
- return ["width", "stickyheader", "mt", "mr", "mb", "ml"];
15385
+ return ["width", "stickyheader", "variant", "mt", "mr", "mb", "ml"];
15363
15386
  }
15364
15387
 
15365
15388
  get width() {
@@ -15374,7 +15397,7 @@
15374
15397
  }
15375
15398
 
15376
15399
  get stickyheader() {
15377
- return this.$$.ctx[7];
15400
+ return this.$$.ctx[8];
15378
15401
  }
15379
15402
 
15380
15403
  set stickyheader(stickyheader) {
@@ -15384,10 +15407,21 @@
15384
15407
  flush();
15385
15408
  }
15386
15409
 
15387
- get mt() {
15410
+ get variant() {
15388
15411
  return this.$$.ctx[1];
15389
15412
  }
15390
15413
 
15414
+ set variant(variant) {
15415
+ this.$$set({
15416
+ variant
15417
+ });
15418
+ flush();
15419
+ }
15420
+
15421
+ get mt() {
15422
+ return this.$$.ctx[2];
15423
+ }
15424
+
15391
15425
  set mt(mt) {
15392
15426
  this.$$set({
15393
15427
  mt
@@ -15396,7 +15430,7 @@
15396
15430
  }
15397
15431
 
15398
15432
  get mr() {
15399
- return this.$$.ctx[2];
15433
+ return this.$$.ctx[3];
15400
15434
  }
15401
15435
 
15402
15436
  set mr(mr) {
@@ -15407,7 +15441,7 @@
15407
15441
  }
15408
15442
 
15409
15443
  get mb() {
15410
- return this.$$.ctx[3];
15444
+ return this.$$.ctx[4];
15411
15445
  }
15412
15446
 
15413
15447
  set mb(mb) {
@@ -15418,7 +15452,7 @@
15418
15452
  }
15419
15453
 
15420
15454
  get ml() {
15421
- return this.$$.ctx[4];
15455
+ return this.$$.ctx[5];
15422
15456
  }
15423
15457
 
15424
15458
  set ml(ml) {
@@ -17323,7 +17357,8 @@
17323
17357
  function GoATable(props) {
17324
17358
  return jsxRuntime.jsx("goa-table", __assign({
17325
17359
  width: props.width,
17326
- stickyheader: false
17360
+ stickyheader: false,
17361
+ variant: props.variant
17327
17362
  }, {
17328
17363
  children: jsxRuntime.jsx("template", {
17329
17364
  children: jsxRuntime.jsx("table", {