@rak200/ui 0.1.2 → 0.2.0

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 (14) hide show
  1. package/README.md +5 -5
  2. package/dist/button.d.ts +3 -3
  3. package/dist/button.d.ts.map +1 -1
  4. package/dist/button.js +11 -11
  5. package/dist/button.js.map +1 -1
  6. package/dist/index.d.ts +1 -1
  7. package/dist/index.d.ts.map +1 -1
  8. package/dist/index.js +1 -1
  9. package/dist/index.js.map +1 -1
  10. package/dist/tokens.d.ts +2 -2
  11. package/dist/tokens.d.ts.map +1 -1
  12. package/dist/tokens.js +17 -17
  13. package/dist/tokens.js.map +1 -1
  14. package/package.json +1 -1
package/README.md CHANGED
@@ -28,17 +28,17 @@ npm install @rak200/ui
28
28
  import '@rak200/ui';
29
29
  </script>
30
30
 
31
- <rak-button>Save</rak-button>
32
- <rak-button variant="secondary">Cancel</rak-button>
33
- <rak-button disabled>Unavailable</rak-button>
31
+ <ui-button>Save</ui-button>
32
+ <ui-button variant="secondary">Cancel</ui-button>
33
+ <ui-button disabled>Unavailable</ui-button>
34
34
  ```
35
35
 
36
36
  Every visual decision is a CSS custom property, so a host restyles the kit without forking it:
37
37
 
38
38
  ```css
39
39
  :root {
40
- --rak-color-accent: rebeccapurple;
41
- --rak-radius: 0;
40
+ --ui-color-accent: rebeccapurple;
41
+ --ui-radius: 0;
42
42
  }
43
43
  ```
44
44
 
package/dist/button.d.ts CHANGED
@@ -12,10 +12,10 @@ export type ButtonVariant = 'primary' | 'secondary';
12
12
  *
13
13
  * @example
14
14
  * ```html
15
- * <rak-button variant="primary">Save</rak-button>
15
+ * <ui-button variant="primary">Save</ui-button>
16
16
  * ```
17
17
  */
18
- export declare class RakButton extends LitElement {
18
+ export declare class UiButton extends LitElement {
19
19
  static readonly styles: import("lit").CSSResult;
20
20
  static readonly properties: {
21
21
  variant: {
@@ -43,7 +43,7 @@ export declare class RakButton extends LitElement {
43
43
  }
44
44
  declare global {
45
45
  interface HTMLElementTagNameMap {
46
- 'rak-button': RakButton;
46
+ 'ui-button': UiButton;
47
47
  }
48
48
  }
49
49
  //# sourceMappingURL=button.d.ts.map
package/dist/button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../src/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEjE,+CAA+C;AAC/C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,CAAC;AAEpD;;;;;;;;;;;;;GAaG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACrC,gBAAyB,MAAM,0BAoC7B;IAEF,gBAAyB,UAAU;;;;;;;;;MAGjC;IAEF;;;;;;;;OAQG;IACH,OAAO,EAAE,aAAa,CAAa;IAEnC,kFAAkF;IAClF,QAAQ,UAAS;IAER,MAAM,IAAI,cAAc;CAOpC;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,YAAY,EAAE,SAAS,CAAC;KAC3B;CACJ"}
1
+ {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../src/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEjE,+CAA+C;AAC/C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,CAAC;AAEpD;;;;;;;;;;;;;GAaG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACpC,gBAAyB,MAAM,0BAoC7B;IAEF,gBAAyB,UAAU;;;;;;;;;MAGjC;IAEF;;;;;;;;OAQG;IACH,OAAO,EAAE,aAAa,CAAa;IAEnC,kFAAkF;IAClF,QAAQ,UAAS;IAER,MAAM,IAAI,cAAc;CAOpC;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAC;KACzB;CACJ"}
package/dist/button.js CHANGED
@@ -10,10 +10,10 @@ import { LitElement, css, html } from 'lit';
10
10
  *
11
11
  * @example
12
12
  * ```html
13
- * <rak-button variant="primary">Save</rak-button>
13
+ * <ui-button variant="primary">Save</ui-button>
14
14
  * ```
15
15
  */
16
- export class RakButton extends LitElement {
16
+ export class UiButton extends LitElement {
17
17
  constructor() {
18
18
  super(...arguments);
19
19
  /**
@@ -36,10 +36,10 @@ export class RakButton extends LitElement {
36
36
 
37
37
  button {
38
38
  font: inherit;
39
- font-family: var(--rak-font, system-ui, sans-serif);
39
+ font-family: var(--ui-font, system-ui, sans-serif);
40
40
  border: 1px solid transparent;
41
- border-radius: var(--rak-radius, 0.375rem);
42
- padding: var(--rak-space, 0.5rem) calc(var(--rak-space, 0.5rem) * 2);
41
+ border-radius: var(--ui-radius, 0.375rem);
42
+ padding: var(--ui-space, 0.5rem) calc(var(--ui-space, 0.5rem) * 2);
43
43
  cursor: pointer;
44
44
  }
45
45
 
@@ -51,18 +51,18 @@ export class RakButton extends LitElement {
51
51
  /* A visible focus ring is not decoration: removing it is the single most common
52
52
  way a component stops being usable by keyboard. */
53
53
  button:focus-visible {
54
- outline: 2px solid var(--rak-color-focus, #f59e0b);
54
+ outline: 2px solid var(--ui-color-focus, #f59e0b);
55
55
  outline-offset: 2px;
56
56
  }
57
57
 
58
58
  button.primary {
59
- background: var(--rak-color-accent, #2563eb);
60
- color: var(--rak-color-accent-contrast, #ffffff);
59
+ background: var(--ui-color-accent, #2563eb);
60
+ color: var(--ui-color-accent-contrast, #ffffff);
61
61
  }
62
62
 
63
63
  button.secondary {
64
- background: var(--rak-color-surface, #ffffff);
65
- color: var(--rak-color-text, #1f2937);
64
+ background: var(--ui-color-surface, #ffffff);
65
+ color: var(--ui-color-text, #1f2937);
66
66
  border-color: currentcolor;
67
67
  }
68
68
  `; }
@@ -82,5 +82,5 @@ export class RakButton extends LitElement {
82
82
  // inside the warm process Stryker switches mutants in — so by the time a mutant on this
83
83
  // line is active the element is already defined under the original name, and no test can
84
84
  // observe the change. Outside the runner's reach, not an equivalent mutant.
85
- customElements.define('rak-button', RakButton);
85
+ customElements.define('ui-button', UiButton);
86
86
  //# sourceMappingURL=button.js.map
package/dist/button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.js","sourceRoot":"","sources":["../src/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAKjE;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QA4CI;;;;;;;;WAQG;QACH,YAAO,GAAkB,SAAS,CAAC;QAEnC,kFAAkF;QAClF,aAAQ,GAAG,KAAK,CAAC;IASrB,CAAC;aAhE4B,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoCpC,AApC8B,CAoC7B;aAEuB,eAAU,GAAG;QAClC,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;QACxC,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;KAC7C,AAHkC,CAGjC;IAgBO,MAAM;QACX,OAAO,IAAI,CAAA;4BACS,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,QAAQ;;;SAG1D,CAAC;IACN,CAAC;;AAGL,kFAAkF;AAClF,wFAAwF;AACxF,yFAAyF;AACzF,4EAA4E;AAC5E,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC"}
1
+ {"version":3,"file":"button.js","sourceRoot":"","sources":["../src/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAKjE;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QA4CI;;;;;;;;WAQG;QACH,YAAO,GAAkB,SAAS,CAAC;QAEnC,kFAAkF;QAClF,aAAQ,GAAG,KAAK,CAAC;IASrB,CAAC;aAhE4B,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoCpC,AApC8B,CAoC7B;aAEuB,eAAU,GAAG;QAClC,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;QACxC,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;KAC7C,AAHkC,CAGjC;IAgBO,MAAM;QACX,OAAO,IAAI,CAAA;4BACS,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,QAAQ;;;SAG1D,CAAC;IACN,CAAC;;AAGL,kFAAkF;AAClF,wFAAwF;AACxF,yFAAyF;AACzF,4EAA4E;AAC5E,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC"}
package/dist/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- export { RakButton, type ButtonVariant } from './button.js';
1
+ export { UiButton, type ButtonVariant } from './button.js';
2
2
  export { tokens, defaults, tokenStyleSheet, type Token } from './tokens.js';
3
3
  //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC"}
package/dist/index.js CHANGED
@@ -1,3 +1,3 @@
1
- export { RakButton } from './button.js';
1
+ export { UiButton } from './button.js';
2
2
  export { tokens, defaults, tokenStyleSheet } from './tokens.js';
3
3
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAc,MAAM,aAAa,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAc,MAAM,aAAa,CAAC"}
package/dist/tokens.d.ts CHANGED
@@ -6,11 +6,11 @@
6
6
  * native shell (RFC 0016, M4) can read the same values without the components. A token
7
7
  * added later is a token some target already hardcoded.
8
8
  *
9
- * Every token is a CSS custom property under `--rak-`, so a host overrides one by
9
+ * Every token is a CSS custom property under `--ui-`, so a host overrides one by
10
10
  * setting it anywhere above the component — no build step, no theme object, no fork.
11
11
  */
12
12
  /** The token names this package defines, as they appear in CSS. */
13
- export declare const tokens: readonly ["--rak-color-accent", "--rak-color-accent-contrast", "--rak-color-surface", "--rak-color-text", "--rak-color-focus", "--rak-radius", "--rak-space", "--rak-font"];
13
+ export declare const tokens: readonly ["--ui-color-accent", "--ui-color-accent-contrast", "--ui-color-surface", "--ui-color-text", "--ui-color-focus", "--ui-radius", "--ui-space", "--ui-font"];
14
14
  /** A CSS custom property this package defines. */
15
15
  export type Token = (typeof tokens)[number];
16
16
  /**
package/dist/tokens.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,mEAAmE;AACnE,eAAO,MAAM,MAAM,6KAST,CAAC;AAEX,kDAAkD;AAClD,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5C;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CASpD,CAAC;AAEF;;;GAGG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAIxC"}
1
+ {"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,mEAAmE;AACnE,eAAO,MAAM,MAAM,qKAST,CAAC;AAEX,kDAAkD;AAClD,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5C;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CASpD,CAAC;AAEF;;;GAGG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAIxC"}
package/dist/tokens.js CHANGED
@@ -6,19 +6,19 @@
6
6
  * native shell (RFC 0016, M4) can read the same values without the components. A token
7
7
  * added later is a token some target already hardcoded.
8
8
  *
9
- * Every token is a CSS custom property under `--rak-`, so a host overrides one by
9
+ * Every token is a CSS custom property under `--ui-`, so a host overrides one by
10
10
  * setting it anywhere above the component — no build step, no theme object, no fork.
11
11
  */
12
12
  /** The token names this package defines, as they appear in CSS. */
13
13
  export const tokens = [
14
- '--rak-color-accent',
15
- '--rak-color-accent-contrast',
16
- '--rak-color-surface',
17
- '--rak-color-text',
18
- '--rak-color-focus',
19
- '--rak-radius',
20
- '--rak-space',
21
- '--rak-font',
14
+ '--ui-color-accent',
15
+ '--ui-color-accent-contrast',
16
+ '--ui-color-surface',
17
+ '--ui-color-text',
18
+ '--ui-color-focus',
19
+ '--ui-radius',
20
+ '--ui-space',
21
+ '--ui-font',
22
22
  ];
23
23
  /**
24
24
  * The default value of every token, applied at `:root` by {@link tokenStyleSheet}.
@@ -27,14 +27,14 @@ export const tokens = [
27
27
  * system's defaults are what a host sees before it has decided anything.
28
28
  */
29
29
  export const defaults = {
30
- '--rak-color-accent': '#2563eb',
31
- '--rak-color-accent-contrast': '#ffffff',
32
- '--rak-color-surface': '#ffffff',
33
- '--rak-color-text': '#1f2937',
34
- '--rak-color-focus': '#f59e0b',
35
- '--rak-radius': '0.375rem',
36
- '--rak-space': '0.5rem',
37
- '--rak-font': 'system-ui, sans-serif',
30
+ '--ui-color-accent': '#2563eb',
31
+ '--ui-color-accent-contrast': '#ffffff',
32
+ '--ui-color-surface': '#ffffff',
33
+ '--ui-color-text': '#1f2937',
34
+ '--ui-color-focus': '#f59e0b',
35
+ '--ui-radius': '0.375rem',
36
+ '--ui-space': '0.5rem',
37
+ '--ui-font': 'system-ui, sans-serif',
38
38
  };
39
39
  /**
40
40
  * The token defaults as a CSS rule, for a host that wants them without importing a
package/dist/tokens.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,mEAAmE;AACnE,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,oBAAoB;IACpB,6BAA6B;IAC7B,qBAAqB;IACrB,kBAAkB;IAClB,mBAAmB;IACnB,cAAc;IACd,aAAa;IACb,YAAY;CACN,CAAC;AAKX;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAoC;IACrD,oBAAoB,EAAE,SAAS;IAC/B,6BAA6B,EAAE,SAAS;IACxC,qBAAqB,EAAE,SAAS;IAChC,kBAAkB,EAAE,SAAS;IAC7B,mBAAmB,EAAE,SAAS;IAC9B,cAAc,EAAE,UAAU;IAC1B,aAAa,EAAE,QAAQ;IACvB,YAAY,EAAE,uBAAuB;CACxC,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,eAAe;IAC3B,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEjF,OAAO,YAAY,IAAI,KAAK,CAAC;AACjC,CAAC"}
1
+ {"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,mEAAmE;AACnE,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,mBAAmB;IACnB,4BAA4B;IAC5B,oBAAoB;IACpB,iBAAiB;IACjB,kBAAkB;IAClB,aAAa;IACb,YAAY;IACZ,WAAW;CACL,CAAC;AAKX;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAoC;IACrD,mBAAmB,EAAE,SAAS;IAC9B,4BAA4B,EAAE,SAAS;IACvC,oBAAoB,EAAE,SAAS;IAC/B,iBAAiB,EAAE,SAAS;IAC5B,kBAAkB,EAAE,SAAS;IAC7B,aAAa,EAAE,UAAU;IACzB,YAAY,EAAE,QAAQ;IACtB,WAAW,EAAE,uBAAuB;CACvC,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,eAAe;IAC3B,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEjF,OAAO,YAAY,IAAI,KAAK,CAAC;AACjC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rak200/ui",
3
- "version": "0.1.2",
3
+ "version": "0.2.0",
4
4
  "description": "Host-agnostic custom-element UI components for the rak200 ecosystem",
5
5
  "license": "MIT",
6
6
  "author": "rak200 <rak.ricardo@windowslive.com>",