diff --git a/.changeset/lazy-crabs-yell.md b/.changeset/lazy-crabs-yell.md new file mode 100644 index 0000000..947ef5a --- /dev/null +++ b/.changeset/lazy-crabs-yell.md @@ -0,0 +1,9 @@ +--- +'@api-viewer/common': patch +'@api-viewer/demo': patch +'@api-viewer/docs': patch +'@api-viewer/tabs': patch +'api-viewer-element': patch +--- + +Added the ability to show whether a property is static diff --git a/docs/assets/custom-elements.json b/docs/assets/custom-elements.json index 981a68b..dfd2ab0 100644 --- a/docs/assets/custom-elements.json +++ b/docs/assets/custom-elements.json @@ -105,6 +105,16 @@ "name": "_boundBodyKeyup", "privacy": "private" }, + { + "kind": "field", + "name": "version", + "type": { + "text": "string" + }, + "static": true, + "default": "'1.0.0'", + "description": "Version of the component" + }, { "kind": "method", "name": "focus", @@ -334,6 +344,16 @@ "privacy": "private", "default": "this._onOpened.bind(this)" }, + { + "kind": "field", + "name": "version", + "type": { + "text": "string" + }, + "static": true, + "default": "'1.0.0'", + "description": "Version of the component" + }, { "kind": "field", "name": "focused", @@ -500,6 +520,16 @@ "default": "'en-GB'", "description": "Locale code used for formatting.", "attribute": "locale" + }, + { + "kind": "field", + "name": "version", + "type": { + "text": "string" + }, + "static": true, + "default": "'1.0.0'", + "description": "Version of the component" } ], "attributes": [ @@ -691,6 +721,16 @@ "attribute": "indeterminate", "reflects": true }, + { + "kind": "field", + "name": "version", + "type": { + "text": "string" + }, + "static": true, + "default": "'1.0.0'", + "description": "Version of the component" + }, { "kind": "method", "name": "setBounds", diff --git a/docs/docs/api/styling.md b/docs/docs/api/styling.md index 91c9f16..5aaa223 100644 --- a/docs/docs/api/styling.md +++ b/docs/docs/api/styling.md @@ -24,6 +24,9 @@ The following custom CSS properties are available: | `--ave-tab-color` | Inactive tabs color | | `--ave-tab-selected-color` | Selected tab color | | `--ave-tab-indicator-size` | Size of the selected tab indicator | +| `--ave-tag-background-color` | Background color of tags (e.g., `static`) | +| `--ave-tag-border-color` | Color of tag borders | +| `--ave-tag-color` | Color of tags | ## CSS shadow parts diff --git a/fixtures/lit/src/expansion-panel.ts b/fixtures/lit/src/expansion-panel.ts index 8c9b1fc..d54e29d 100644 --- a/fixtures/lit/src/expansion-panel.ts +++ b/fixtures/lit/src/expansion-panel.ts @@ -51,6 +51,11 @@ export class ExpansionPanel extends OpenedMixin(LitElement) { private _boundBodyKeyup = this._onBodyKeyup.bind(this); + /** + * Version of the component + */ + static version = '1.0.0'; + static get styles(): CSSResult { return css` :host { diff --git a/fixtures/lit/src/fancy-accordion.ts b/fixtures/lit/src/fancy-accordion.ts index 032474a..6398537 100644 --- a/fixtures/lit/src/fancy-accordion.ts +++ b/fixtures/lit/src/fancy-accordion.ts @@ -41,6 +41,11 @@ export class FancyAccordion extends LitElement { private _boundOnOpened = this._onOpened.bind(this) as EventListener; + /** + * Version of the component + */ + static version = '1.0.0'; + static get styles(): CSSResult { return css` :host { diff --git a/fixtures/lit/src/intl-currency.ts b/fixtures/lit/src/intl-currency.ts index 1aa28fb..93adb0b 100644 --- a/fixtures/lit/src/intl-currency.ts +++ b/fixtures/lit/src/intl-currency.ts @@ -44,6 +44,11 @@ export class IntlCurrency extends LitElement { */ @property() locale: string | null | undefined = 'en-GB'; + /** + * Version of the component + */ + static version = '1.0.0'; + static get styles(): CSSResult { return css` :host { diff --git a/fixtures/lit/src/progress-bar.ts b/fixtures/lit/src/progress-bar.ts index 35cca50..9fe81b0 100644 --- a/fixtures/lit/src/progress-bar.ts +++ b/fixtures/lit/src/progress-bar.ts @@ -59,6 +59,11 @@ export class ProgressBar extends LitElement { */ @property({ type: Boolean, reflect: true }) indeterminate = false; + /** + * Version of the component + */ + static version = '1.0.0'; + static get styles(): CSSResult { return css` :host { diff --git a/packages/api-common/src/shared-styles.ts b/packages/api-common/src/shared-styles.ts index dc74e57..3c66d9c 100644 --- a/packages/api-common/src/shared-styles.ts +++ b/packages/api-common/src/shared-styles.ts @@ -25,6 +25,9 @@ export default css` --ave-link-hover-color: #d63200; --ave-tab-indicator-size: 2px; --ave-tab-color: rgba(0, 0, 0, 0.54); + --ave-tag-background-color: #e2e3e5; + --ave-tag-border-color: #d6d8db; + --ave-tag-color: #383d41; --ave-monospace-font: Menlo, 'DejaVu Sans Mono', 'Liberation Mono', Consolas, 'Courier New', monospace; } diff --git a/packages/api-docs/src/layout.ts b/packages/api-docs/src/layout.ts index aa22bc2..a2f5a42 100644 --- a/packages/api-docs/src/layout.ts +++ b/packages/api-docs/src/layout.ts @@ -25,9 +25,13 @@ const renderItem = ( description?: string, valueType?: string, value?: unknown, - attribute?: string + attribute?: string, + isStatic?: boolean ): TemplateResult => html`