From ad444cb8533500e527f0380de04a02087a79072f Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 14 May 2026 17:51:40 +0300 Subject: [PATCH 1/7] feat(integration): add rehypeTableWrapper plugin and update igniteui-astro-components version --- docs/angular/package.json | 2 +- package-lock.json | 204 ++++++++++++++------------------------ package.json | 2 +- src/integration.ts | 2 + 4 files changed, 77 insertions(+), 133 deletions(-) diff --git a/docs/angular/package.json b/docs/angular/package.json index 9f396a5e3b..42dd14ecad 100644 --- a/docs/angular/package.json +++ b/docs/angular/package.json @@ -40,7 +40,7 @@ "dependencies": { "astro": "^6.1.6", "docs-template": "file:../../", - "igniteui-astro-components": "0.0.5", + "igniteui-astro-components": "file:../../../igniteui-astro-components/igniteui-astro-components-0.1.0.tgz", "sharp": "^0.34.2" }, "devDependencies": { diff --git a/package-lock.json b/package-lock.json index e716c814ac..8d567be91c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "@astrojs/check": "^0.9.8", "@astrojs/mdx": ">=5", "gray-matter": "^4.0.3", - "igniteui-astro-components": "0.0.5", + "igniteui-astro-components": "file:../igniteui-astro-components/igniteui-astro-components-0.1.0.tgz", "js-yaml": "^4.1.1", "jsdom": "^29.0.1", "pagefind": "^1.5.2" @@ -44,7 +44,7 @@ "dependencies": { "astro": "^6.1.6", "docs-template": "file:../../", - "igniteui-astro-components": "0.0.5", + "igniteui-astro-components": "file:../../../igniteui-astro-components/igniteui-astro-components-0.1.0.tgz", "sharp": "^0.34.2" }, "devDependencies": { @@ -91,6 +91,74 @@ "node": ">=22.12.0" } }, + "docs/xplat/node_modules/igniteui-astro-components": { + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/igniteui-astro-components/-/igniteui-astro-components-0.0.5.tgz", + "integrity": "sha512-w3F4Pl0UkJBUIQFP/0PlEj6sfBUg2Yyt1sJpczc9w+l3ErteLl2IqPKTdKV7FHEqUmXfZoczn/AT+lVMmn2WiA==", + "license": "MIT", + "workspaces": [ + "playground" + ], + "dependencies": { + "@fontsource-variable/instrument-sans": "^5.2.8", + "@fontsource-variable/jetbrains-mono": "^5.2.8", + "igniteui-webcomponents": "^7.1.3", + "js-yaml": "^4.1.0", + "jsdom": "^29.0.1" + }, + "engines": { + "node": "^20.19.0 || ^22.13.0 || >=24.0.0" + }, + "peerDependencies": { + "astro": "^5.0.0 || ^6.0.0", + "igniteui-webcomponents": "^7.1.3" + }, + "peerDependenciesMeta": { + "igniteui-webcomponents": { + "optional": true + } + } + }, + "docs/xplat/node_modules/igniteui-webcomponents": { + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-7.1.3.tgz", + "integrity": "sha512-iG4xBzooIOxtnAG8VIg39zKVWoo9jy2iEK3CDLGZYb9hU1LZx+4SAOPFkB9FSp15dgR4ql6kGKYf93T8oK0sdw==", + "license": "MIT", + "dependencies": { + "@floating-ui/dom": "^1.7.0", + "@lit-labs/virtualizer": "^2.1.0", + "@lit/context": "^1.1.0", + "igniteui-i18n-core": "^1.0.1", + "lit": "^3.3.0" + }, + "engines": { + "node": ">=22" + }, + "peerDependencies": { + "dompurify": "^3.3.0", + "igniteui-i18n-resources": "^1.0.1", + "marked": "^17.0.0", + "marked-shiki": "^1.2.0", + "shiki": "^3.20.0" + }, + "peerDependenciesMeta": { + "dompurify": { + "optional": true + }, + "igniteui-i18n-resources": { + "optional": true + }, + "marked": { + "optional": true + }, + "marked-shiki": { + "optional": true + }, + "shiki": { + "optional": true + } + } + }, "node_modules/@asamuzakjp/css-color": { "version": "5.1.11", "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-5.1.11.tgz", @@ -1812,7 +1880,6 @@ "version": "2.5.6", "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz", "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==", - "dev": true, "hasInstallScript": true, "license": "MIT", "optional": true, @@ -1852,7 +1919,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1873,7 +1939,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1894,7 +1959,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1915,7 +1979,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1936,7 +1999,6 @@ "cpu": [ "arm" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1957,7 +2019,6 @@ "cpu": [ "arm" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1978,7 +2039,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1999,7 +2059,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2020,7 +2079,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2041,7 +2099,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2062,7 +2119,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2083,7 +2139,6 @@ "cpu": [ "ia32" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2104,7 +2159,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -4830,9 +4884,9 @@ } }, "node_modules/igniteui-astro-components": { - "version": "0.0.5", - "resolved": "https://registry.npmjs.org/igniteui-astro-components/-/igniteui-astro-components-0.0.5.tgz", - "integrity": "sha512-w3F4Pl0UkJBUIQFP/0PlEj6sfBUg2Yyt1sJpczc9w+l3ErteLl2IqPKTdKV7FHEqUmXfZoczn/AT+lVMmn2WiA==", + "version": "0.1.0", + "resolved": "file:../igniteui-astro-components/igniteui-astro-components-0.1.0.tgz", + "integrity": "sha512-epOzWzioL4B+xy0e5+DGcPa0egePw0NcOtlyLK7xTOvzcMoZ8oWub8irPbCl0tKF5pLpFl+zAtT7ZiWk4hffTA==", "license": "MIT", "workspaces": [ "playground" @@ -4857,79 +4911,6 @@ } } }, - "node_modules/igniteui-astro-components/node_modules/@shikijs/core": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.23.0.tgz", - "integrity": "sha512-NSWQz0riNb67xthdm5br6lAkvpDJRTgB36fxlo37ZzM2yq0PQFFzbd8psqC2XMPgCzo1fW6cVi18+ArJ44wqgA==", - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "@shikijs/types": "3.23.0", - "@shikijs/vscode-textmate": "^10.0.2", - "@types/hast": "^3.0.4", - "hast-util-to-html": "^9.0.5" - } - }, - "node_modules/igniteui-astro-components/node_modules/@shikijs/engine-javascript": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.23.0.tgz", - "integrity": "sha512-aHt9eiGFobmWR5uqJUViySI1bHMqrAgamWE1TYSUoftkAeCCAiGawPMwM+VCadylQtF4V3VNOZ5LmfItH5f3yA==", - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "@shikijs/types": "3.23.0", - "@shikijs/vscode-textmate": "^10.0.2", - "oniguruma-to-es": "^4.3.4" - } - }, - "node_modules/igniteui-astro-components/node_modules/@shikijs/engine-oniguruma": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.23.0.tgz", - "integrity": "sha512-1nWINwKXxKKLqPibT5f4pAFLej9oZzQTsby8942OTlsJzOBZ0MWKiwzMsd+jhzu8YPCHAswGnnN1YtQfirL35g==", - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "@shikijs/types": "3.23.0", - "@shikijs/vscode-textmate": "^10.0.2" - } - }, - "node_modules/igniteui-astro-components/node_modules/@shikijs/langs": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.23.0.tgz", - "integrity": "sha512-2Ep4W3Re5aB1/62RSYQInK9mM3HsLeB91cHqznAJMuylqjzNVAVCMnNWRHFtcNHXsoNRayP9z1qj4Sq3nMqYXg==", - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "@shikijs/types": "3.23.0" - } - }, - "node_modules/igniteui-astro-components/node_modules/@shikijs/themes": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.23.0.tgz", - "integrity": "sha512-5qySYa1ZgAT18HR/ypENL9cUSGOeI2x+4IvYJu4JgVJdizn6kG4ia5Q1jDEOi7gTbN4RbuYtmHh0W3eccOrjMA==", - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "@shikijs/types": "3.23.0" - } - }, - "node_modules/igniteui-astro-components/node_modules/@shikijs/types": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.23.0.tgz", - "integrity": "sha512-3JZ5HXOZfYjsYSk0yPwBrkupyYSLpAE26Qc0HLghhZNGTZg/SKxXIIgoxOpmmeQP0RRSDJTk1/vPfw9tbw+jSQ==", - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "@shikijs/vscode-textmate": "^10.0.2", - "@types/hast": "^3.0.4" - } - }, "node_modules/igniteui-astro-components/node_modules/igniteui-webcomponents": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-7.1.3.tgz", @@ -4970,24 +4951,6 @@ } } }, - "node_modules/igniteui-astro-components/node_modules/shiki": { - "version": "3.23.0", - "resolved": "https://registry.npmjs.org/shiki/-/shiki-3.23.0.tgz", - "integrity": "sha512-55Dj73uq9ZXL5zyeRPzHQsK7Nbyt6Y10k5s7OjuFZGMhpp4r/rsLBH0o/0fstIzX1Lep9VxefWljK/SKCzygIA==", - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "@shikijs/core": "3.23.0", - "@shikijs/engine-javascript": "3.23.0", - "@shikijs/engine-oniguruma": "3.23.0", - "@shikijs/langs": "3.23.0", - "@shikijs/themes": "3.23.0", - "@shikijs/types": "3.23.0", - "@shikijs/vscode-textmate": "^10.0.2", - "@types/hast": "^3.0.4" - } - }, "node_modules/igniteui-i18n-core": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/igniteui-i18n-core/-/igniteui-i18n-core-1.0.5.tgz", @@ -5509,7 +5472,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", - "dev": true, "license": "MIT", "optional": true, "engines": { @@ -5529,7 +5491,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dev": true, "license": "MIT", "optional": true, "dependencies": { @@ -6980,7 +6941,6 @@ "version": "7.1.1", "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", - "dev": true, "license": "MIT", "optional": true }, @@ -7960,7 +7920,6 @@ "!riscv64", "!x64" ], - "dev": true, "license": "MIT", "optional": true, "dependencies": { @@ -7974,7 +7933,6 @@ "cpu": [ "arm" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -7991,7 +7949,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -8008,7 +7965,6 @@ "cpu": [ "riscv64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -8025,7 +7981,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -8042,7 +7997,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -8059,7 +8013,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -8076,7 +8029,6 @@ "cpu": [ "arm" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -8093,7 +8045,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -8110,7 +8061,6 @@ "cpu": [ "arm" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -8127,7 +8077,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -8144,7 +8093,6 @@ "cpu": [ "riscv64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -8161,7 +8109,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -8178,7 +8125,6 @@ "cpu": [ "riscv64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -8195,7 +8141,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -8209,7 +8154,6 @@ "version": "1.99.0", "resolved": "https://registry.npmjs.org/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.99.0.tgz", "integrity": "sha512-P7MxiUtL/XzGo3PX0CaB8lNNEFLQWKikPA8pbKytx9ZCLZSDkt2NJcdAbblB/sqMs4AV3EK2NadV8rI/diq3xg==", - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -8229,7 +8173,6 @@ "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -8246,7 +8189,6 @@ "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ diff --git a/package.json b/package.json index 6dfcad5256..084daa0ca4 100644 --- a/package.json +++ b/package.json @@ -101,7 +101,7 @@ "@astrojs/check": "^0.9.8", "@astrojs/mdx": ">=5", "gray-matter": "^4.0.3", - "igniteui-astro-components": "0.0.5", + "igniteui-astro-components": "file:../igniteui-astro-components/igniteui-astro-components-0.1.0.tgz", "js-yaml": "^4.1.1", "jsdom": "^29.0.1", "pagefind": "^1.5.2" diff --git a/src/integration.ts b/src/integration.ts index e7fc7acf35..e6f186a83d 100644 --- a/src/integration.ts +++ b/src/integration.ts @@ -66,6 +66,7 @@ import { getNavConfig, getPlatformHead } from './platform'; import type { HeadEntry, PlatformKey, NavLang } from './platform.ts'; import { JSDOM } from 'jsdom'; import { remarkDocfx, rehypeCodeView } from './plugins/remark-docfx'; +import { rehypeTableWrapper } from 'igniteui-astro-components/plugins/rehype-table-wrapper'; /** Build / deployment mode. Drives env-var `DOCS_BUILD_MODE`. */ export type DocsMode = 'development' | 'staging' | 'production'; @@ -807,6 +808,7 @@ export function createDocsSite(options: CreateDocsSiteOptions = {} as CreateDocs ], rehypePlugins: [ rehypeCodeView, + rehypeTableWrapper, ...((astroExtra as any).markdown?.rehypePlugins ?? []), ], }, From 2cd286830212857a04e73023c815d5ab134f2f31 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 14 May 2026 17:53:02 +0300 Subject: [PATCH 2/7] revert igniteui-astro-components version to 0.0.5 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 084daa0ca4..6dfcad5256 100644 --- a/package.json +++ b/package.json @@ -101,7 +101,7 @@ "@astrojs/check": "^0.9.8", "@astrojs/mdx": ">=5", "gray-matter": "^4.0.3", - "igniteui-astro-components": "file:../igniteui-astro-components/igniteui-astro-components-0.1.0.tgz", + "igniteui-astro-components": "0.0.5", "js-yaml": "^4.1.1", "jsdom": "^29.0.1", "pagefind": "^1.5.2" From 6c701ae37e2785b13e729aa7c08710f2d704f3ff Mon Sep 17 00:00:00 2001 From: dobromirts Date: Fri, 15 May 2026 10:17:52 +0300 Subject: [PATCH 3/7] add license indicator badge and multi-badge sidebar support --- src/lib/sidebar/types.ts | 2 +- src/routes/[...slug].astro | 5 +++-- src/sidebar.ts | 14 ++++++-------- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/lib/sidebar/types.ts b/src/lib/sidebar/types.ts index 9a8e238c2e..c992cfe360 100644 --- a/src/lib/sidebar/types.ts +++ b/src/lib/sidebar/types.ts @@ -22,7 +22,7 @@ export interface SidebarBadge { export interface SidebarLink { label: string; slug: string; - badge?: SidebarBadge; + badges?: SidebarBadge[]; attrs?: Record; } diff --git a/src/routes/[...slug].astro b/src/routes/[...slug].astro index bb3425ab12..68e1ae34c7 100644 --- a/src/routes/[...slug].astro +++ b/src/routes/[...slug].astro @@ -24,13 +24,14 @@ type EntryData = { description?: string | null; keywords?: string | null; tableOfContents?: false | { minHeadingLevel?: number; maxHeadingLevel?: number }; + license?: string; }; -const { title, description, keywords, tableOfContents } = entry.data as EntryData; +const { title, description, keywords, tableOfContents, license } = entry.data as EntryData; const currentSlug = entry.id.replace(/\.(md|mdx)$/i, ''); --- - +
diff --git a/src/sidebar.ts b/src/sidebar.ts index 279635e05e..95d49c7277 100644 --- a/src/sidebar.ts +++ b/src/sidebar.ts @@ -102,17 +102,15 @@ function convertTocItem( if (item.href) { if (!docExists(docsDir, item.href, exclude)) return null; const entry: SidebarLink = { label: item.name, slug: hrefToSlug(item.href) }; - // Status badge — only one slot available in Starlight, priority order: - if (item.new) entry.badge = { text: 'New', variant: 'new' }; - else if (item.preview) entry.badge = { text: 'Preview', variant: 'preview' }; - else if (item.updated) entry.badge = { text: 'Updated', variant: 'updated' }; - // Premium is rendered via data-premium attr so it can coexist with a - // status badge (CSS ::after pseudo-element adds the star icon). + const badges: NonNullable = []; + if (item.new) badges.push({ text: 'New', variant: 'new' }); + else if (item.preview) badges.push({ text: 'Preview', variant: 'preview' }); + else if (item.updated) badges.push({ text: 'Updated', variant: 'updated' }); if (item.premium) { entry.attrs = { 'data-premium': 'true' }; - // Only use the badge slot for premium when no status badge is shown. - if (!entry.badge) entry.badge = { text: 'Premium', variant: 'premium' }; + badges.push({ text: 'Premium', variant: 'premium' }); } + if (badges.length) entry.badges = badges; return entry; } From bbf4eeefd6d01eee71e2b9117bd3d6a6d63bd7e0 Mon Sep 17 00:00:00 2001 From: dobromirts Date: Fri, 15 May 2026 12:27:23 +0300 Subject: [PATCH 4/7] update tables --- .../public/images/general/greenCheck.png | Bin 0 -> 456 bytes docs/angular/public/images/general/redX.png | Bin 0 -> 335 bytes .../src/content/en/components/button.mdx | 1461 ++++------------- .../accessibility-compliance.mdx | 4 +- .../src/content/jp/components/button.mdx | 1455 ++++------------ .../accessibility-compliance.mdx | 4 +- .../public/images/general/greenCheck.png | Bin 0 -> 456 bytes docs/xplat/public/images/general/redX.png | Bin 0 -> 335 bytes .../accessibility-compliance.mdx | 4 +- .../accessibility-compliance.mdx | 4 +- 10 files changed, 663 insertions(+), 2269 deletions(-) create mode 100644 docs/angular/public/images/general/greenCheck.png create mode 100644 docs/angular/public/images/general/redX.png create mode 100644 docs/xplat/public/images/general/greenCheck.png create mode 100644 docs/xplat/public/images/general/redX.png diff --git a/docs/angular/public/images/general/greenCheck.png b/docs/angular/public/images/general/greenCheck.png new file mode 100644 index 0000000000000000000000000000000000000000..6d0936686946b6adce72ce8a636f6489624969f2 GIT binary patch literal 456 zcmV;(0XP1MP){YkEpl~1n(YrQHsK8-JsHPQFR1iebNU%s; z>o5exLv*j{wWZu$Z_FmUlP_=H%h^pKtqfr2wuy1+_OH@3dg8GHjS!Ww zOgaE;P<0lZDM)6);^uwx81r>(0er>nNexy@pA*#))Hqg4pDTeKD1Pt7Q~_@M{%)X-bz*DvosFPDdYS^NUxG=zen0}?g>00008Wl=i1r^%wu^ a{os^!=`&vTZoeVWpA4R^elF{r5}E+;)PuhO literal 0 HcmV?d00001 diff --git a/docs/angular/src/content/en/components/button.mdx b/docs/angular/src/content/en/components/button.mdx index b72b4cd922..7d8971096f 100644 --- a/docs/angular/src/content/en/components/button.mdx +++ b/docs/angular/src/content/en/components/button.mdx @@ -1,5 +1,5 @@ ---- -title: Angular Button Component – Ignite UI for Angular - MIT license +--- +title: Angular Button Component - Ignite UI for Angular - MIT license description: Enhance standard buttons with built-in text, images and more features using Ignite UI for Angular Button component. Try it now. keywords: Angular Button component, Angular Button control, Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Angular UI Components, license: MIT @@ -11,7 +11,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Button Overview -Angular Button directive is used for creating and adding actionable buttons to a web page/application. There are different Angular Button types that are easy to customize and include several built-in features. By default, Angular Material uses native `
+ + > **Note:** The resulting dependent properties may vary slightly depending on the selected theme (Material, Fluent, Bootstrap, Indigo). To style the button you can use our type-specific theme functions: [`flat-button-theme`]({environment:sassApiUrl}/themes#function-flat-button-theme), [`outlined-button-theme`]({environment:sassApiUrl}/themes#function-outlined-button-theme), [`contained-button-theme`]({environment:sassApiUrl}/themes#function-contained-button-theme), and [`fab-button-theme`]({environment:sassApiUrl}/themes#function-fab-button-theme). diff --git a/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx b/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx index 25005af2bc..1fdfe9c5f5 100644 --- a/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx +++ b/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx @@ -9,11 +9,11 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' diff --git a/docs/angular/src/content/jp/components/button.mdx b/docs/angular/src/content/jp/components/button.mdx index 12639a7b6e..d261a5c215 100644 --- a/docs/angular/src/content/jp/components/button.mdx +++ b/docs/angular/src/content/jp/components/button.mdx @@ -1,4 +1,4 @@ ---- +--- title: Angular Button コンポーネント – Ignite UI for Angular - MITライセンス description: Ignite UI for Angular Button コンポーネントで規格のボタンに定義済みテキスト、画像、およびその他の機能を追加します。今すぐお試しください。 keywords: Angular Button コンポーネント, Angular Button コントロール, Ignite UI for Angular, UI コントロール, Angular ウィジェット, web ウィジェット, UI ウィジェット, Angular, ネイティブ Angular コンポーネント スイート, ネイティブ Angular コントロール, Angular UI コンポーネント @@ -251,1154 +251,351 @@ protected get sizeStyle() {
-

Material Theme

-

Flat Button

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Primary PropertyDependent PropertyDescription
$foreground
$hover-backgroundBackground color for hovered button
$focus-backgroundBackground color for focused button
$focus-hover-backgroundBackground color for button on focus + hover
$active-backgroundBackground color for active button
$hover-foregroundForeground color for hovered button
$icon-color-hoverIcon color for hovered button
$focus-foregroundForeground color for focused button
$focus-hover-foregroundForeground color for button on focus + hover
$active-foregroundForeground color for active button
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
-

Contained Button

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Primary PropertyDependent PropertyDescription
$background
$foregroundForeground based on background
$icon-colorIcon color based on background
$hover-backgroundHover background color
$hover-foregroundForeground on hover
$icon-color-hoverIcon color on hover
$focus-backgroundFocus background color
$focus-foregroundForeground on focus
$focus-hover-backgroundFocus + hover background
$focus-hover-foregroundForeground on focus + hover
$active-backgroundActive background color
$active-foregroundActive foreground color
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
-

Outlined Button

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Primary PropertyDependent PropertyDescription
$foreground
$hover-backgroundBackground color for hovered button
$focus-backgroundBackground color for focused button
$focus-hover-backgroundBackground color for button on focus + hover
$active-backgroundBackground color for active button
$hover-foregroundForeground color for hovered button
$icon-color-hoverIcon color for hovered button
$focus-foregroundForeground color for focused button
$focus-hover-foregroundForeground color for button on focus + hover
$active-foregroundForeground color for active button
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
$border-colorThe border color for outlined buttons.
$hover-border-colorThe border color for hovered outlined buttons.
$focus-border-colorThe border color for focused outlined buttons.
$focus-visible-border-colorThe border color for outlined buttons when focus is visible.
$active-border-colorThe border color for active outlined buttons.
-

FAB Button

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Primary PropertyDependent PropertyDescription
$background
$foregroundForeground based on background
$icon-colorIcon color based on background
$hover-backgroundHover background color
$hover-foregroundForeground on hover
$icon-color-hoverIcon color on hover
$focus-backgroundFocus background color
$focus-foregroundForeground on focus
$active-backgroundActive background color
$active-foregroundActive foreground color
$focus-hover-backgroundFocus + hover background
$focus-hover-foregroundForeground on focus + hover
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
+### Material Theme + +#### Flat Button + +| Primary Property | Dependent Property | Description | +|:--|:--|:--| +| **$foreground** | $hover-background | Background color for hovered button | +| | $focus-background | Background color for focused button | +| | $focus-hover-background | Background color for button on focus + hover | +| | $active-background | Background color for active button | +| | $hover-foreground | Foreground color for hovered button | +| | $icon-color-hover | Icon color for hovered button | +| | $focus-foreground | Foreground color for focused button | +| | $focus-hover-foreground | Foreground color for button on focus + hover | +| | $active-foreground | Foreground color for active button | +| | $focus-visible-background | Background when focus is visible | +| | $focus-visible-foreground | Foreground when focus is visible | + +#### Contained Button + +| Primary Property | Dependent Property | Description | +|:--|:--|:--| +| **$background** | $foreground | Foreground based on background | +| | $icon-color | Icon color based on background | +| | $hover-background | Hover background color | +| | $hover-foreground | Foreground on hover | +| | $icon-color-hover | Icon color on hover | +| | $focus-background | Focus background color | +| | $focus-foreground | Foreground on focus | +| | $focus-hover-background | Focus + hover background | +| | $focus-hover-foreground | Foreground on focus + hover | +| | $active-background | Active background color | +| | $active-foreground | Active foreground color | +| | $focus-visible-background | Background when focus is visible | +| | $focus-visible-foreground | Foreground when focus is visible | + +#### Outlined Button + +| Primary Property | Dependent Property | Description | +|:--|:--|:--| +| **$foreground** | $hover-background | Background color for hovered button | +| | $focus-background | Background color for focused button | +| | $focus-hover-background | Background color for button on focus + hover | +| | $active-background | Background color for active button | +| | $hover-foreground | Foreground color for hovered button | +| | $icon-color-hover | Icon color for hovered button | +| | $focus-foreground | Foreground color for focused button | +| | $focus-hover-foreground | Foreground color for button on focus + hover | +| | $active-foreground | Foreground color for active button | +| | $focus-visible-background | Background when focus is visible | +| | $focus-visible-foreground | Foreground when focus is visible | +| | $border-color | The border color for outlined buttons. | +| | $hover-border-color | The border color for hovered outlined buttons. | +| | $focus-border-color | The border color for focused outlined buttons. | +| | $focus-visible-border-color | The border color for outlined buttons when focus is visible. | +| | $active-border-color | The border color for active outlined buttons. | + +#### FAB Button + +| Primary Property | Dependent Property | Description | +|:--|:--|:--| +| **$background** | $foreground | Foreground based on background | +| | $icon-color | Icon color based on background | +| | $hover-background | Hover background color | +| | $hover-foreground | Foreground on hover | +| | $icon-color-hover | Icon color on hover | +| | $focus-background | Focus background color | +| | $focus-foreground | Foreground on focus | +| | $active-background | Active background color | +| | $active-foreground | Active foreground color | +| | $focus-hover-background | Focus + hover background | +| | $focus-hover-foreground | Foreground on focus + hover | +| | $focus-visible-background | Background when focus is visible | +| | $focus-visible-foreground | Foreground when focus is visible |
-

Fluent Theme

-

Flat Button

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Primary PropertyDependent PropertyDescription
$foreground
$hover-backgroundBackground color for hovered button
$focus-backgroundBackground color for focused button
$focus-hover-backgroundBackground color for button on focus + hover
$active-backgroundBackground color for active button
$hover-foregroundForeground color for hovered button
$icon-color-hoverIcon color for hovered button
$focus-foregroundForeground color for focused button
$focus-hover-foregroundForeground color for button on focus + hover
$active-foregroundForeground color for active button
$focus-visible-foregroundForeground when focus is visible
$focus-visible-border-colorBorder color when focus is visible
-

Contained Button

- - - - - - - - - - - - - - - - - - -
Primary PropertyDependent PropertyDescription
$background
$foregroundForeground based on background
$icon-colorIcon color based on background
$hover-backgroundHover background color
$focus-backgroundFocus background color
$active-backgroundActive background color
$hover-foregroundForeground on hover
$icon-color-hoverIcon color on hover
$focus-foregroundForeground on focus
$active-foregroundActive foreground color
$focus-hover-backgroundFocus + hover background
$focus-hover-foregroundForeground on focus + hover
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
$focus-visible-border-colorBorder color when focus is visible
-

Outlined Button

- - - - - - - - - - - - - - - - - - - -
Primary PropertyDependent PropertyDescription
$foreground
$hover-backgroundBackground color for hovered outlined button.
$focus-backgroundBackground color for focused outlined button.
$focus-hover-backgroundBackground color for outlined button on focus + hover.
$active-backgroundBackground color for active outlined button.
$hover-foregroundForeground color for hovered outlined button.
$icon-color-hoverIcon color for hovered outlined button.
$focus-foregroundForeground color for focused outlined button.
$focus-hover-foregroundForeground color for outlined button on focus + hover.
$active-foregroundForeground color for active outlined button.
$focus-visible-foregroundForeground color for outlined button when focus is visible.
$focus-visible-border-colorBorder color for outlined button when focus is visible.
$border-colorBorder color for outlined button.
$hover-border-colorBorder color for hovered outlined button.
$focus-border-colorBorder color for focused outlined button.
$active-border-colorBorder color for active outlined button.
-

FAB Button

- - - - - - - - - - - - - - - - - - -
Primary PropertyDependent PropertyDescription
$background
$foregroundForeground based on background
$icon-colorIcon color based on background
$hover-backgroundHover background color
$hover-foregroundForeground on hover
$icon-color-hoverIcon color on hover
$active-backgroundActive background color
$active-foregroundActive foreground color
$focus-backgroundFocus background color
$focus-foregroundForeground on focus
$focus-hover-backgroundFocus + hover background
$focus-hover-foregroundForeground on focus + hover
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
$focus-visible-border-colorBorder color when focus is visible
+### Fluent Theme + +#### Flat Button + +| Primary Property | Dependent Property | Description | +|:--|:--|:--| +| **$foreground** | $hover-background | Background color for hovered button | +| | $focus-background | Background color for focused button | +| | $focus-hover-background | Background color for button on focus + hover | +| | $active-background | Background color for active button | +| | $hover-foreground | Foreground color for hovered button | +| | $icon-color-hover | Icon color for hovered button | +| | $focus-foreground | Foreground color for focused button | +| | $focus-hover-foreground | Foreground color for button on focus + hover | +| | $active-foreground | Foreground color for active button | +| | $focus-visible-foreground | Foreground when focus is visible | +| | $focus-visible-border-color | Border color when focus is visible | + +#### Contained Button + +| Primary Property | Dependent Property | Description | +|:--|:--|:--| +| **$background** | $foreground | Foreground based on background | +| | $icon-color | Icon color based on background | +| | $hover-background | Hover background color | +| | $focus-background | Focus background color | +| | $active-background | Active background color | +| | $hover-foreground | Foreground on hover | +| | $icon-color-hover | Icon color on hover | +| | $focus-foreground | Foreground on focus | +| | $active-foreground | Active foreground color | +| | $focus-hover-background | Focus + hover background | +| | $focus-hover-foreground | Foreground on focus + hover | +| | $focus-visible-background | Background when focus is visible | +| | $focus-visible-foreground | Foreground when focus is visible | +| | $focus-visible-border-color | Border color when focus is visible | + +#### Outlined Button + +| Primary Property | Dependent Property | Description | +|:--|:--|:--| +| **$foreground** | $hover-background | Background color for hovered outlined button. | +| | $focus-background | Background color for focused outlined button. | +| | $focus-hover-background | Background color for outlined button on focus + hover. | +| | $active-background | Background color for active outlined button. | +| | $hover-foreground | Foreground color for hovered outlined button. | +| | $icon-color-hover | Icon color for hovered outlined button. | +| | $focus-foreground | Foreground color for focused outlined button. | +| | $focus-hover-foreground | Foreground color for outlined button on focus + hover. | +| | $active-foreground | Foreground color for active outlined button. | +| | $focus-visible-foreground | Foreground color for outlined button when focus is visible. | +| | $focus-visible-border-color | Border color for outlined button when focus is visible. | +| | $border-color | Border color for outlined button. | +| | $hover-border-color | Border color for hovered outlined button. | +| | $focus-border-color | Border color for focused outlined button. | +| | $active-border-color | Border color for active outlined button. | + +#### FAB Button + +| Primary Property | Dependent Property | Description | +|:--|:--|:--| +| **$background** | $foreground | Foreground based on background | +| | $icon-color | Icon color based on background | +| | $hover-background | Hover background color | +| | $hover-foreground | Foreground on hover | +| | $icon-color-hover | Icon color on hover | +| | $active-background | Active background color | +| | $active-foreground | Active foreground color | +| | $focus-background | Focus background color | +| | $focus-foreground | Foreground on focus | +| | $focus-hover-background | Focus + hover background | +| | $focus-hover-foreground | Foreground on focus + hover | +| | $focus-visible-background | Background when focus is visible | +| | $focus-visible-foreground | Foreground when focus is visible | +| | $focus-visible-border-color | Border color when focus is visible | +
-

Bootstrap Theme

-

Flat Button

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Primary PropertyDependent PropertyDescription
$foreground
$hover-foregroundForeground color for hovered button
$icon-color-hoverIcon color for hovered button
$focus-foregroundForeground color for focused button
$focus-hover-foregroundForeground color for button on focus + hover
$active-foregroundForeground color for active button
$focus-visible-foregroundForeground when focus is visible
$focus-visible-border-colorBorder color when focus is visible
$disabled-foregroundForeground color for disabled button
$disabled-icon-colorIcon color for disabled button
$shadow-colorShadow color
-

Contained Button

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Primary PropertyDependent PropertyDescription
$background
$foregroundForeground based on background
$icon-colorIcon color based on background
$hover-backgroundHover background color
$focus-backgroundFocus background color
$active-backgroundActive background color
$hover-foregroundForeground on hover
$icon-color-hoverIcon color on hover
$focus-foregroundForeground on focus
$focus-hover-backgroundFocus + hover background
$focus-hover-foregroundForeground on focus + hover
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
$active-foregroundActive foreground color
$shadow-colorShadow color
$disabled-backgroundDisabled background color
$disabled-foregroundDisabled foreground color
$disabled-icon-colorDisabled icon color
-

Outlined Button

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Primary PropertyDependent PropertyDescription
$foreground
$hover-backgroundBackground color for hovered button
$focus-backgroundBackground color for focused button
$focus-hover-backgroundBackground color for button on focus + hover
$active-backgroundBackground color for active button
$hover-foregroundForeground color for hovered button
$icon-color-hoverIcon color for hovered button
$focus-foregroundForeground color for focused button
$focus-hover-foregroundForeground color for button on focus + hover
$active-foregroundForeground color for active button
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
$focus-visible-border-colorBorder color when focus is visible
$disabled-foregroundForeground color for disabled button
$disabled-icon-colorIcon color for disabled button
$disabled-border-colorBorder color for disabled button
$hover-border-colorHover border color
$focus-border-colorFocus border color
$focus-visible-border-colorFocus-visible border color
$active-border-colorActive border color
$shadow-colorShadow color
-

FAB Button

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Primary PropertyDependent PropertyDescription
$background
$foregroundForeground based on background
$icon-colorIcon color based on background
$hover-backgroundHover background color
$focus-backgroundFocus background color
$active-backgroundActive background color
$disabled-backgroundDisabled background color
$hover-foregroundForeground on hover
$icon-color-hoverIcon color on hover
$focus-foregroundForeground on focus
$focus-hover-backgroundFocus + hover background
$focus-hover-foregroundForeground on focus + hover
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
$active-foregroundActive foreground color
$shadow-colorShadow color
$disabled-foregroundDisabled foreground color
$disabled-icon-colorDisabled icon color
+### Bootstrap Theme + +#### Flat Button + +| Primary Property | Dependent Property | Description | +|:--|:--|:--| +| **$foreground** | $hover-foreground | Foreground color for hovered button | +| | $icon-color-hover | Icon color for hovered button | +| | $focus-foreground | Foreground color for focused button | +| | $focus-hover-foreground | Foreground color for button on focus + hover | +| | $active-foreground | Foreground color for active button | +| | $focus-visible-foreground | Foreground when focus is visible | +| | $focus-visible-border-color | Border color when focus is visible | +| | $disabled-foreground | Foreground color for disabled button | +| | $disabled-icon-color | Icon color for disabled button | +| | $shadow-color | Shadow color | + +#### Contained Button + +| Primary Property | Dependent Property | Description | +|:--|:--|:--| +| **$background** | $foreground | Foreground based on background | +| | $icon-color | Icon color based on background | +| | $hover-background | Hover background color | +| | $focus-background | Focus background color | +| | $active-background | Active background color | +| | $hover-foreground | Foreground on hover | +| | $icon-color-hover | Icon color on hover | +| | $focus-foreground | Foreground on focus | +| | $focus-hover-background | Focus + hover background | +| | $focus-hover-foreground | Foreground on focus + hover | +| | $focus-visible-background | Background when focus is visible | +| | $focus-visible-foreground | Foreground when focus is visible | +| | $active-foreground | Active foreground color | +| | $shadow-color | Shadow color | +| | $disabled-background | Disabled background color | +| | $disabled-foreground | Disabled foreground color | +| | $disabled-icon-color | Disabled icon color | + +#### Outlined Button + +| Primary Property | Dependent Property | Description | +|:--|:--|:--| +| **$foreground** | $hover-background | Background color for hovered button | +| | $focus-background | Background color for focused button | +| | $focus-hover-background | Background color for button on focus + hover | +| | $active-background | Background color for active button | +| | $hover-foreground | Foreground color for hovered button | +| | $icon-color-hover | Icon color for hovered button | +| | $focus-foreground | Foreground color for focused button | +| | $focus-hover-foreground | Foreground color for button on focus + hover | +| | $active-foreground | Foreground color for active button | +| | $focus-visible-background | Background when focus is visible | +| | $focus-visible-foreground | Foreground when focus is visible | +| | $focus-visible-border-color | Border color when focus is visible | +| | $disabled-foreground | Foreground color for disabled button | +| | $disabled-icon-color | Icon color for disabled button | +| | $disabled-border-color | Border color for disabled button | +| | $hover-border-color | Hover border color | +| | $focus-border-color | Focus border color | +| | $active-border-color | Active border color | +| | $shadow-color | Shadow color | + +#### FAB Button + +| Primary Property | Dependent Property | Description | +|:--|:--|:--| +| **$background** | $foreground | Foreground based on background | +| | $icon-color | Icon color based on background | +| | $hover-background | Hover background color | +| | $focus-background | Focus background color | +| | $active-background | Active background color | +| | $disabled-background | Disabled background color | +| | $hover-foreground | Foreground on hover | +| | $icon-color-hover | Icon color on hover | +| | $focus-foreground | Foreground on focus | +| | $focus-hover-background | Focus + hover background | +| | $focus-hover-foreground | Foreground on focus + hover | +| | $focus-visible-background | Background when focus is visible | +| | $focus-visible-foreground | Foreground when focus is visible | +| | $active-foreground | Active foreground color | +| | $shadow-color | Shadow color | +| | $disabled-foreground | Disabled foreground color | +| | $disabled-icon-color | Disabled icon color | +
+ ボタンにスタイルを設定する別の方法は、**Sass** とタイプ別テーマ関数を使用することです。[`flat-button-theme`]({environment:sassApiUrl}/themes#function-flat-button-theme)、[`outlined-button-theme`]({environment:sassApiUrl}/themes#function-outlined-button-theme)、[`contained-button-theme`]({environment:sassApiUrl}/themes#function-contained-button-theme)、および [`fab-button-theme`]({environment:sassApiUrl}/themes#function-fab-button-theme)。 それぞれは、特定のタイプのボタンのみをターゲットにします。
-

Indigo Theme

-

Flat Button

- - - - - - - - - - - - - - - - - -
Primary PropertyDependent PropertyDescription
$foreground
$hover-backgroundBackground color for hovered button
$focus-backgroundBackground color for focused button
$focus-hover-backgroundBackground color for button on focus + hover
$active-backgroundBackground color for active button
$hover-foregroundForeground color for hovered button
$icon-color-hoverIcon color for hovered button
$focus-foregroundForeground color for focused button
$focus-hover-foregroundForeground color for button on focus + hover
$active-foregroundForeground color for active button
$focus-visible-foregroundForeground when focus is visible
$disabled-foregroundDisabled foreground color
$disabled-icon-colorDisabled icon color
$shadow-colorShadow color
-

Contained Button

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Primary PropertyDependent PropertyDescription
$background
$foregroundForeground based on background
$icon-colorIcon color based on background
$hover-backgroundHover background color
$focus-backgroundFocus background color
$active-backgroundActive background color
$hover-foregroundForeground on hover
$icon-color-hoverIcon color on hover
$focus-foregroundForeground on focus
$focus-hover-backgroundFocus + hover background
$focus-hover-foregroundForeground on focus + hover
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
$active-foregroundActive foreground color
$shadow-colorShadow color
$disabled-backgroundDisabled background color
$disabled-foregroundDisabled foreground color
$disabled-icon-colorDisabled icon color
-

Outlined Button

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Primary PropertyDependent PropertyDescription
$foreground
$hover-backgroundBackground color for hovered button
$focus-backgroundBackground color for focused button
$focus-hover-backgroundBackground color for button on focus + hover
$active-backgroundBackground color for active button
$hover-foregroundForeground color for hovered button
$icon-color-hoverIcon color for hovered button
$focus-foregroundForeground color for focused button
$focus-hover-foregroundForeground color for button on focus + hover
$active-foregroundForeground color for active button
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
$focus-visible-border-colorBorder color when focus is visible
$border-colorBorder color
$hover-border-colorHover border color
$focus-border-colorFocus border color
$focus-visible-border-colorFocus-visible border color
$active-border-colorActive border color
$shadow-colorShadow color
-

FAB Button

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Primary PropertyDependent PropertyDescription
$background
$foregroundForeground based on background
$icon-colorIcon color based on background
$hover-backgroundHover background color
$focus-backgroundFocus background color
$active-backgroundActive background color
$disabled-backgroundDisabled background color
$hover-foregroundForeground on hover
$icon-color-hoverIcon color on hover
$focus-foregroundForeground on focus
$focus-hover-backgroundFocus + hover background
$focus-hover-foregroundForeground on focus + hover
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
$active-foregroundActive foreground color
$shadow-colorShadow color
$disabled-foregroundDisabled foreground color
$disabled-icon-colorDisabled icon color
+### Indigo Theme + +#### Flat Button + +| Primary Property | Dependent Property | Description | +|:--|:--|:--| +| **$foreground** | $hover-background | Background color for hovered button | +| | $focus-background | Background color for focused button | +| | $focus-hover-background | Background color for button on focus + hover | +| | $active-background | Background color for active button | +| | $hover-foreground | Foreground color for hovered button | +| | $icon-color-hover | Icon color for hovered button | +| | $focus-foreground | Foreground color for focused button | +| | $focus-hover-foreground | Foreground color for button on focus + hover | +| | $active-foreground | Foreground color for active button | +| | $focus-visible-foreground | Foreground when focus is visible | +| | $disabled-foreground | Disabled foreground color | +| | $disabled-icon-color | Disabled icon color | +| | $shadow-color | Shadow color | + +#### Contained Button + +| Primary Property | Dependent Property | Description | +|:--|:--|:--| +| **$background** | $foreground | Foreground based on background | +| | $icon-color | Icon color based on background | +| | $hover-background | Hover background color | +| | $focus-background | Focus background color | +| | $active-background | Active background color | +| | $hover-foreground | Foreground on hover | +| | $icon-color-hover | Icon color on hover | +| | $focus-foreground | Foreground on focus | +| | $focus-hover-background | Focus + hover background | +| | $focus-hover-foreground | Foreground on focus + hover | +| | $focus-visible-background | Background when focus is visible | +| | $focus-visible-foreground | Foreground when focus is visible | +| | $active-foreground | Active foreground color | +| | $shadow-color | Shadow color | +| | $disabled-background | Disabled background color | +| | $disabled-foreground | Disabled foreground color | +| | $disabled-icon-color | Disabled icon color | + +#### Outlined Button + +| Primary Property | Dependent Property | Description | +|:--|:--|:--| +| **$foreground** | $hover-background | Background color for hovered button | +| | $focus-background | Background color for focused button | +| | $focus-hover-background | Background color for button on focus + hover | +| | $active-background | Background color for active button | +| | $hover-foreground | Foreground color for hovered button | +| | $icon-color-hover | Icon color for hovered button | +| | $focus-foreground | Foreground color for focused button | +| | $focus-hover-foreground | Foreground color for button on focus + hover | +| | $active-foreground | Foreground color for active button | +| | $focus-visible-background | Background when focus is visible | +| | $focus-visible-foreground | Foreground when focus is visible | +| | $focus-visible-border-color | Border color when focus is visible | +| | $border-color | Border color | +| | $hover-border-color | Hover border color | +| | $focus-border-color | Focus border color | +| | $active-border-color | Active border color | +| | $shadow-color | Shadow color | + +#### FAB Button + +| Primary Property | Dependent Property | Description | +|:--|:--|:--| +| **$background** | $foreground | Foreground based on background | +| | $icon-color | Icon color based on background | +| | $hover-background | Hover background color | +| | $focus-background | Focus background color | +| | $active-background | Active background color | +| | $disabled-background | Disabled background color | +| | $hover-foreground | Foreground on hover | +| | $icon-color-hover | Icon color on hover | +| | $focus-foreground | Foreground on focus | +| | $focus-hover-background | Focus + hover background | +| | $focus-hover-foreground | Foreground on focus + hover | +| | $focus-visible-background | Background when focus is visible | +| | $focus-visible-foreground | Foreground when focus is visible | +| | $active-foreground | Active foreground color | +| | $shadow-color | Shadow color | +| | $disabled-foreground | Disabled foreground color | +| | $disabled-icon-color | Disabled icon color | +
+ + + > **注:** 結果の依存プロパティは、選択したテーマ (Material、Fluent、Bootstrap、Indigo) によって若干異なる場合があります。 ボタンのスタイルを設定するには、タイプ固有のテーマ関数を使用できます: [`flat-button-theme`]({environment:sassApiUrl}/themes#function-flat-button-theme)、[`outlined-button-theme`]({environment:sassApiUrl}/themes#function-outlined-button-theme)、[`contained-button-theme`]({environment:sassApiUrl}/themes#function-contained-button-theme)、および [`fab-button-theme`]({environment:sassApiUrl}/themes#function-fab-button-theme)。 diff --git a/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx b/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx index 3a3df16252..4745630e2a 100644 --- a/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx +++ b/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx @@ -10,11 +10,11 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' diff --git a/docs/xplat/public/images/general/greenCheck.png b/docs/xplat/public/images/general/greenCheck.png new file mode 100644 index 0000000000000000000000000000000000000000..6d0936686946b6adce72ce8a636f6489624969f2 GIT binary patch literal 456 zcmV;(0XP1MP){YkEpl~1n(YrQHsK8-JsHPQFR1iebNU%s; z>o5exLv*j{wWZu$Z_FmUlP_=H%h^pKtqfr2wuy1+_OH@3dg8GHjS!Ww zOgaE;P<0lZDM)6);^uwx81r>(0er>nNexy@pA*#))Hqg4pDTeKD1Pt7Q~_@M{%)X-bz*DvosFPDdYS^NUxG=zen0}?g>00008Wl=i1r^%wu^ a{os^!=`&vTZoeVWpA4R^elF{r5}E+;)PuhO literal 0 HcmV?d00001 diff --git a/docs/xplat/src/content/en/components/interactivity/accessibility-compliance.mdx b/docs/xplat/src/content/en/components/interactivity/accessibility-compliance.mdx index 9661371e96..6d7c64cfeb 100644 --- a/docs/xplat/src/content/en/components/interactivity/accessibility-compliance.mdx +++ b/docs/xplat/src/content/en/components/interactivity/accessibility-compliance.mdx @@ -9,11 +9,11 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' diff --git a/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx b/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx index 7d76cba09b..1eaadb665a 100644 --- a/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx +++ b/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx @@ -10,11 +10,11 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' From d2f0eebf27933552af6d645e13602c9aedcc0b3a Mon Sep 17 00:00:00 2001 From: desig9stein Date: Fri, 15 May 2026 14:36:32 +0300 Subject: [PATCH 5/7] feat(integration): add rehypeHeadingAnchors plugin to integration --- package-lock.json | 2 +- src/integration.ts | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 8d567be91c..7269959aa5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4886,7 +4886,7 @@ "node_modules/igniteui-astro-components": { "version": "0.1.0", "resolved": "file:../igniteui-astro-components/igniteui-astro-components-0.1.0.tgz", - "integrity": "sha512-epOzWzioL4B+xy0e5+DGcPa0egePw0NcOtlyLK7xTOvzcMoZ8oWub8irPbCl0tKF5pLpFl+zAtT7ZiWk4hffTA==", + "integrity": "sha512-wiXmtK2+8mqOClglVRykkk/0Xg/hTWq9NRFQVyxtAa0shQmtzAljpFwlCyPOCdiFtimwX7K3TTkjQhlD1JdjIQ==", "license": "MIT", "workspaces": [ "playground" diff --git a/src/integration.ts b/src/integration.ts index e6f186a83d..9c24f4ac3d 100644 --- a/src/integration.ts +++ b/src/integration.ts @@ -67,6 +67,7 @@ import type { HeadEntry, PlatformKey, NavLang } from './platform.ts'; import { JSDOM } from 'jsdom'; import { remarkDocfx, rehypeCodeView } from './plugins/remark-docfx'; import { rehypeTableWrapper } from 'igniteui-astro-components/plugins/rehype-table-wrapper'; +import { rehypeHeadingAnchors } from 'igniteui-astro-components/plugins/rehype-heading-anchors'; /** Build / deployment mode. Drives env-var `DOCS_BUILD_MODE`. */ export type DocsMode = 'development' | 'staging' | 'production'; @@ -809,6 +810,7 @@ export function createDocsSite(options: CreateDocsSiteOptions = {} as CreateDocs rehypePlugins: [ rehypeCodeView, rehypeTableWrapper, + rehypeHeadingAnchors, ...((astroExtra as any).markdown?.rehypePlugins ?? []), ], }, From 19f64601be7309bb886363c176b313808ae52c20 Mon Sep 17 00:00:00 2001 From: dobromirts Date: Wed, 20 May 2026 15:56:31 +0300 Subject: [PATCH 6/7] update ci node version --- .github/workflows/ci.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 1d984620e4..019b8720d0 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -22,7 +22,7 @@ jobs: - name: Use Node.js 22.x uses: actions/setup-node@v4 with: - node-version: 22 + node-version: 24 cache: 'npm' - name: Install dependencies From d0da0ef1d78f1ad1d7cc2e01ae3b371a9cbf55c8 Mon Sep 17 00:00:00 2001 From: dobromirts Date: Wed, 20 May 2026 15:58:25 +0300 Subject: [PATCH 7/7] update node step name --- .github/workflows/ci.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 019b8720d0..d5efe8d8f1 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -19,7 +19,7 @@ jobs: - name: Checkout uses: actions/checkout@v4 - - name: Use Node.js 22.x + - name: Use Node.js 24.x uses: actions/setup-node@v4 with: node-version: 24