@cas-smartdesign/button 6.0.0 → 7.0.1

package/dist/docs/index.html

@@ -4,6 +4,7 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+		<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
 		<style>
 			.markdown-body {
 				box-sizing: border-box;
@@ -12,10 +13,6 @@
 				margin: 0 auto !important;
 				padding-bottom: 45px;
 			}
-
-			sd-button {
-				margin: 8px;
-			}
 		</style>
 		<script type="module" crossorigin src="./doc.mjs"></script>
 		<link rel="stylesheet" crossorigin href="./doc.css">

package/dist/docs/new.svg

@@ -1,6 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-  <g color="#000" fill="#1467ba">
-    <path style="marker:none" overflow="visible" d="M0 11h23v1H0z"/>
-    <path style="marker:none" overflow="visible" d="M11 23V0h1v23z"/>
-  </g>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 4.25a.75.75 0 0 1 .75.75v6.25H19a.75.75 0 0 1 0 1.5h-6.25V19a.75.75 0 0 1-1.5 0v-6.25H5a.75.75 0 0 1 0-1.5h6.25V5a.75.75 0 0 1 .75-.75" fill="currentColor"/>
 </svg>

package/npm-third-party-licenses.json

@@ -1,5 +1,5 @@
 {
-    "@cypress/vite-dev-server@7.2.1": {
+    "@cypress/vite-dev-server@7.3.2": {
         "licenses": "MIT",
         "repository": "https://github.com/cypress-io/cypress",
         "licenseUrl": "https://github.com/cypress-io/cypress/tree/develop/npm/vite-dev-server#readme"
@@ -19,6 +19,11 @@
         "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
         "licenseUrl": "https://unpkg.com/@types/postcss-prefix-selector@1.16.3/LICENSE"
     },
+    "@types/trusted-types@2.0.7": {
+        "licenses": "MIT",
+        "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
+        "licenseUrl": "https://unpkg.com/@types/trusted-types@2.0.7/LICENSE"
+    },
     "@types/yargs@17.0.35": {
         "licenses": "MIT",
         "repository": "https://github.com/DefinitelyTyped/DefinitelyTyped",
@@ -49,6 +54,11 @@
         "repository": "https://github.com/cypress-io/cypress",
         "licenseUrl": "https://cypress.io"
     },
+    "dompurify@3.4.7": {
+        "licenses": "(MPL-2.0 OR Apache-2.0)",
+        "repository": "https://github.com/cure53/DOMPurify",
+        "licenseUrl": "https://unpkg.com/dompurify@3.4.7/LICENSE"
+    },
     "github-markdown-css@5.9.0": {
         "licenses": "MIT",
         "repository": "https://github.com/sindresorhus/github-markdown-css",

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@cas-smartdesign/button",
-  "version": "6.0.0",
+  "version": "7.0.1",
   "description": "A button element which encloses the look and feel of the smartdesign button",
   "license": "SEE LICENSE IN LICENSE",
   "files": [
     "dist",
+    "scss",
     "npm-third-party-licenses.json"
   ],
   "type": "module",
@@ -16,12 +17,21 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "@cas-smartdesign/image-embed": "^1.0.1",
     "@cas-smartdesign/element-base": "^6.0.0"
   },
   "devDependencies": {
-    "@cas-smartdesign/element-preview": "^1.0.0",
+    "@cas-smartdesign/element-preview": "^1.1.0",
     "@cas-smartdesign/license-generator": "^1.10.0"
   },
+  "peerDependencies": {
+    "@cas-smartdesign/design-tokens": "^3.0.1"
+  },
+  "peerDependenciesMeta": {
+    "@cas-smartdesign/design-tokens": {
+      "optional": true
+    }
+  },
   "scripts": {
     "version": "pnpm version",
     "generate-declaration": "tsc -p tsconfig.types.json",

package/readme.md

@@ -1,6 +1,10 @@
 # @cas-smartdesign/button
 
-A button element which encloses the look and feel of the smartdesign button.
+A button element which encloses the look and feel of the SmartDesign 3.0 button.
+
+This element must be used together with the design tokens of SmartDesign.
+For an independent application, make sure to include the @cas-smartdesign/design-tokens package.
+For a web app / web widget, refer to the official documentation about design token usage.
 
 ## Attributes
 
@@ -12,11 +16,17 @@ A button element which encloses the look and feel of the smartdesign button.
   - Defines whether if the button is disabled. Note that it uses default disabled attribute, thus blocking pointer/mouse events.
 - `type`: string
   - Can be set to either `submit` or `reset` to make the button act like a HTML form button.
+- `variant`: string
+  - Defines the visual style of the button. One of `primary`, `outline`, `standard`, `ghost`, `outline-danger`, `ghost-danger`, `selection` or `custom`. Defaults to `standard` when unset or set to an unknown value.
+- `aria-pressed`: boolean
+  - Marks a `selection` button as selected (standard toggle-button semantics). When the variant is set to `selection` and the attribute is absent, the button initializes it to `false` so assistive tools announce it as a toggle; the consumer flips it to `true`/`false`.
 
 ## Properties
 
 - `disabled`: boolean
   - Makes the button looks like it is disabled & also prevents click events but used with a classname so mouse events are still triggered thus allowing for example tooltip usage in all browsers.
+- `variant`: ButtonVariant
+  - Gets or sets the button's visual style (`primary`, `outline`, `standard`, `ghost`, `outline-danger`, `ghost-danger`, `selection` or `custom`). Reading it returns `standard` when the `variant` attribute is missing or invalid.
 
 ## CSS Custom Properties
 
@@ -24,5 +34,69 @@ A button element which encloses the look and feel of the smartdesign button.
   - Defines the value of margin-left, margin-right (default is 8px)
 - `--sd-button-max-icon-size`
   - Defines the value of max-width, max-height (default is 32px)
-- `--sd-button-border-radius`
-  - Defines the border radius of the button
+
+### Colors & border
+
+Each `variant` sets sensible defaults for these. Override them to fully customize a variant, or to style the `custom` variant which sets none of them itself. Each property falls back to a smartdesign design token when unset.
+
+The `selection` variant additionally re-points these properties while selected (`[aria-pressed="true"]`): the background and border switch to the selection accent tokens, and the hover state is pinned to the selected colors so the selected look survives the cursor. To customize the selected appearance, set the same `--sd-button-*` properties under your own `[aria-pressed="true"]` selector.
+
+For the `custom` variant you only need to set the two rest colors — `--sd-button-background-color` and `--sd-button-color`. The hover and pressed states are derived from them automatically (the background darkens, the text color is kept), so a minimal override stays coherent. You can still pin any individual state by setting its `--sd-button-*` property explicitly.
+
+Mind the color contrast when relying on the derived states: because the background darkens while the text color is kept, a `--sd-button-color` that contrasts well against the rest background may fall below the required contrast ratio against the darker hover/pressed background. If the derived states do not meet your contrast requirements, set `--sd-button-color-hover` and `--sd-button-color-pressed` (and the matching background properties) explicitly.
+
+- `--sd-button-background-color`
+  - Background color in the default (rest) state.
+- `--sd-button-color`
+  - Foreground (text/icon) color in the default state.
+- `--sd-button-border`
+  - The `border` shorthand applied to the button (e.g. `1px solid …`). Used by the `outline` variants.
+- `--sd-button-background-color-hover`
+  - Background color on hover/focus.
+- `--sd-button-color-hover`
+  - Foreground color on hover/focus.
+- `--sd-button-border-color-hover`
+  - Border color on hover/focus (defaults to `transparent`).
+- `--sd-button-background-color-pressed`
+  - Background color while pressed (`:active`).
+- `--sd-button-color-pressed`
+  - Foreground color while pressed.
+- `--sd-button-border-color-pressed`
+  - Border color while pressed (defaults to `transparent`).
+- `--sd-button-background-color-disabled`
+  - Background color when disabled.
+- `--sd-button-color-disabled`
+  - Foreground color when disabled.
+- `--sd-button-border-color-disabled`
+  - Border color when disabled (defaults to `transparent`).
+
+## SCSS mixins
+
+The package ships SCSS mixins so a consumer app can apply the SmartDesign button look to its own elements (e.g. a native `<button>`), reusing the exact same variant definitions as the web component.
+
+```scss
+@use "@cas-smartdesign/button/scss/button" as sd-button;
+
+button.cta {
+  @include sd-button.button(primary);
+}
+
+// compose if you only want the variant colors onto an already-laid-out element
+.danger {
+  @include sd-button.appearance;
+  @include sd-button.variant("outline-danger");
+}
+```
+
+Available mixins:
+
+- `button($variant: standard)` — full look (layout + colors + variant). The default `standard` needs no variant. For `selection` it also emits the selected-state rules under `[aria-pressed="true"]` (you manage the attribute yourself on a native element).
+- `base` — structural styling only (layout, focus ring, disabled cursor), no colors.
+- `appearance` — the color engine (rest + hover/focus + pressed + disabled), driven by the `--sd-button-*` properties.
+- `variant($name)` — sets the `--sd-button-*` values for a named variant.
+- `selection-checked` — the selected-state rules of the `selection` variant (under `[aria-pressed="true"]`); include it alongside `variant("selection")` when composing manually instead of using `button(selection)`.
+
+Notes:
+
+- Resolving `@use "@cas-smartdesign/button/scss/button"` requires the consumer's build to resolve packages in Sass.
+- Themed colors resolve through the `@cas-smartdesign/design-tokens` CSS custom properties; without them, the built-in hex fallbacks apply. Consumers keep the same `--sd-button-*` override knobs documented above.

package/scss/_button.scss

@@ -0,0 +1,85 @@
+@use "config";
+
+// Public SCSS API for consumer apps that want the SmartDesign button look on their
+// own elements (e.g. a native <button>). Apply onto any selector:
+//
+//   @use "@cas-smartdesign/button/scss/button" as sd-button;
+//   button.cta    { @include sd-button.button(primary); }
+//   .danger       { @include sd-button.button(outline-danger); }
+//
+// Themed colors resolve through @cas-smartdesign/design-tokens CSS custom
+// properties; without them the hardcoded fallbacks apply. Consumers retain the
+// same --sd-button-* override knobs as the web component.
+
+// Structural styling (layout, focus ring, disabled cursor) — no colors.
+@mixin base {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	vertical-align: middle;
+	min-height: 36px;
+	padding: var(--spacing-x3, 6px) var(--spacing-x4, 8px);
+	border-radius: var(--radius-s, 4px);
+	cursor: pointer;
+	user-select: none;
+	outline: none;
+
+	&:focus-visible {
+		outline: 1px solid var(--color-border-interaction-focus, #111);
+		outline-offset: var(--spacing-x1, 2px);
+	}
+
+	&:is(:disabled, [disabled], [aria-disabled="true"]) {
+		cursor: default;
+	}
+}
+
+// Color engine: paints rest + hover/focus + pressed + disabled states.
+// The border lives on the element itself here (no ::after overlay), so the
+// state border colors must too.
+@mixin appearance {
+	@include config.state("base");
+	border: var(--sd-button-border, none);
+
+	&:is(:focus, :hover) {
+		@include config.state("hover", $border-on-after: false);
+	}
+
+	&:active {
+		@include config.state("pressed", $border-on-after: false);
+	}
+
+	&:is(:disabled, [disabled], [aria-disabled="true"]) {
+		@include config.state("disabled", $border-on-after: false);
+	}
+}
+
+// Just the --sd-button-* values for a variant (compose onto your own engine).
+@mixin variant($name) {
+	@include config.variant-vars($name);
+}
+
+// Selected-state look of the `selection` variant, applied on [aria-pressed="true"].
+// button(selection) emits this already; include it alongside variant("selection")
+// when composing manually. You manage the aria-pressed attribute yourself.
+@mixin selection-checked {
+	&[aria-pressed="true"] {
+		@include config.selection-checked-vars;
+	}
+}
+
+// Convenience: full button look in one call. `standard` needs no variant vars
+// because it is exactly the neutral fallback the engine already paints.
+@mixin button($variant: standard) {
+	@include base;
+	@include appearance;
+	@if $variant != standard {
+		@include config.variant-vars($variant);
+	}
+	// Selection is stateful: the selected look is driven by the standard
+	// aria-pressed attribute.
+	@if $variant == selection {
+		@include selection-checked;
+	}
+}

package/scss/_config.scss

@@ -0,0 +1,158 @@
+@use "sass:map";
+
+// Single source of truth shared by the component's shadow styles (../styles.scss)
+// and the public mixins (_button.scss). Keep selector-agnostic: declarations only,
+// callers provide the selector (`:host(...)` for the component, `&` for consumers).
+
+// Neutral (standard variant) colors per interactive state. These are the fallbacks
+// the engine paints with when no variant overrides the corresponding --sd-button-*.
+$neutral: (
+	"base": (
+		"bg": var(--color-bg-action-neutral-default, #d4d4d4),
+		"fg": var(--color-fg-action-neutral-default, #111111),
+	),
+	"hover": (
+		"bg": var(--color-bg-action-neutral-default-hover, #c6c6c6),
+		"fg": var(--color-fg-action-neutral-default-hover, #111111),
+	),
+	"pressed": (
+		"bg": var(--color-bg-action-neutral-default-pressed, #b3b3b3),
+		"fg": var(--color-fg-action-neutral-default-pressed, #111111),
+	),
+	"disabled": (
+		"bg": var(--color-bg-interaction-disabled, #e7e7e7),
+		"fg": var(--color-fg-interaction-disabled, #999999),
+	),
+);
+
+// Custom variant rest colors: the consumer's --sd-button-* override, falling back
+// to the neutral defaults the engine already paints. Used to derive coherent
+// hover/pressed states so a minimal override (just rest bg + fg) is enough.
+$_custom-bg: var(--sd-button-background-color, #{map.get(map.get($neutral, "base"), "bg")});
+$_custom-fg: var(--sd-button-color, #{map.get(map.get($neutral, "base"), "fg")});
+
+// Per-variant --sd-button-* values. Adding a variant is a single map entry.
+$variants: (
+	"primary": (
+		"background-color": var(--color-bg-action-accent-default, #1467ba),
+		"color": var(--color-fg-interaction-on-color, #ffffff),
+		"background-color-hover": var(--color-bg-action-accent-default-hover, #0f4d8b),
+		"color-hover": var(--color-fg-interaction-on-color, #ffffff),
+		"background-color-pressed": var(--color-bg-action-accent-default-pressed, #0b3a69),
+		"color-pressed": var(--color-fg-interaction-on-color, #ffffff),
+	),
+	"outline": (
+		"background-color": var(--color-bg-action-accent-weak, #e0ebf6),
+		"color": var(--color-fg-action-accent-default, #1467ba),
+		"border": 1px solid var(--color-border-action-accent-default, #1467ba),
+		"background-color-hover": var(--color-bg-action-accent-weak-hover, #d5e4f3),
+		"color-hover": var(--color-fg-action-accent-default-hover, #0f4d8b),
+		"border-color-hover": var(--color-border-action-accent-default-hover, #0f4d8b),
+		"background-color-pressed": var(--color-bg-action-accent-weak-pressed, #c7dbef),
+		"color-pressed": var(--color-fg-action-accent-default-pressed, #0b3a69),
+		"border-color-pressed": var(--color-border-action-accent-default-pressed, #0b3a69),
+		"background-color-disabled": transparent,
+		"border-color-disabled": var(--color-border-interaction-disabled, #c6c6c6),
+	),
+	"ghost": (
+		"background-color": transparent,
+		"color": var(--color-fg-action-accent-default, #1467ba),
+		"background-color-hover": var(--color-bg-action-accent-weakest-hover, #e0ebf6),
+		"color-hover": var(--color-fg-action-accent-default-hover, #0f4d8b),
+		"background-color-pressed": var(--color-bg-action-accent-weakest-pressed, #c7dbef),
+		"color-pressed": var(--color-fg-action-accent-default-pressed, #0b3a69),
+		"background-color-disabled": transparent,
+	),
+	"outline-danger": (
+		"background-color": var(--color-bg-action-danger-default, #fbdde0),
+		"color": var(--color-fg-action-danger-default, #a90014),
+		"border": 1px solid var(--color-border-action-danger-default, #a90014),
+		"background-color-hover": var(--color-bg-action-danger-default-hover, #fad2d6),
+		"color-hover": var(--color-fg-action-danger-default-hover, #7f000f),
+		"border-color-hover": var(--color-border-action-danger-default-hover, #7f000f),
+		"background-color-pressed": var(--color-bg-action-danger-default-pressed, #f8c3c9),
+		"color-pressed": var(--color-fg-action-danger-default-pressed, #5f000b),
+		"border-color-pressed": var(--color-border-action-danger-default-pressed, #5f000b),
+		"background-color-disabled": transparent,
+		"border-color-disabled": var(--color-border-interaction-disabled, #c6c6c6),
+	),
+	"ghost-danger": (
+		"background-color": transparent,
+		"color": var(--color-fg-action-danger-default, #a90014),
+		"background-color-hover": var(--color-bg-action-danger-default-hover, #fad2d6),
+		"color-hover": var(--color-fg-action-danger-default-hover, #7f000f),
+		"background-color-pressed": var(--color-bg-action-danger-default-pressed, #f8c3c9),
+		"color-pressed": var(--color-fg-action-danger-default-pressed, #5f000b),
+		"background-color-disabled": transparent,
+	),
+	// Toggle/selection look (segmented controls, filter chips): neutral at rest,
+	// accent colors when selected. The selected appearance is applied via
+	// selection-checked-vars on [aria-pressed="true"].
+	"selection": (
+			"background-color": var(--color-bg-selection-neutral-weakest, #ffffff),
+			"color": var(--color-fg-selection-neutral-default, #111111),
+			"border": 1px solid var(--color-border-selection-neutral-default, #999999),
+			"background-color-hover": var(--color-bg-selection-accent-weak-hover, #e0ebf6),
+			"color-hover": var(--color-fg-selection-neutral-default, #111111),
+			"border-color-hover": var(--color-border-selection-neutral-default, #999999),
+			"background-color-pressed": var(--color-bg-selection-accent-weak, #c7dbef),
+			"color-pressed": var(--color-fg-selection-neutral-default, #111111),
+			"border-color-pressed": var(--color-border-selection-accent-default, #1467ba),
+			"border-color-disabled": var(--color-border-interaction-disabled, #c6c6c6),
+		),
+	// Sets no rest colors of its own — the consumer supplies --sd-button-background-color
+	// and --sd-button-color, and hover/pressed are derived from them automatically.
+	// Any state can still be pinned by overriding the matching --sd-button-* property.
+	"custom": (
+			"background-color-hover": color-mix(in oklab, $_custom-bg, var(--color-fg-default, #111111) 12%),
+			"color-hover": $_custom-fg,
+			"background-color-pressed": color-mix(in oklab, $_custom-bg, var(--color-fg-default, #111111) 22%),
+			"color-pressed": $_custom-fg,
+		),
+);
+
+// Paint one interactive state: reads the public --sd-button-* override with the
+// neutral token as fallback. `$state` is one of the $neutral keys.
+// $border-on-after: the web component draws its border on the :host::after
+// overlay; consumer elements (mixin API) carry a real border, so the state
+// color must land on the element itself there.
+@mixin state($state, $border-on-after: true) {
+	$suffix: "";
+	@if $state != "base" {
+		$suffix: "-#{$state}";
+	}
+	$colors: map.get($neutral, $state);
+	background-color: var(--sd-button-background-color#{$suffix}, #{map.get($colors, "bg")});
+	color: var(--sd-button-color#{$suffix}, #{map.get($colors, "fg")});
+	@if $state != "base" {
+		$border-color: var(--sd-button-border-color#{$suffix}, transparent);
+		@if $border-on-after {
+			&::after {
+				border-color: $border-color;
+			}
+		} @else {
+			border-color: $border-color;
+		}
+	}
+}
+
+// Selected appearance of the `selection` variant: re-points the same public
+// --sd-button-* vars, pinning hover to the selected colors so the selected
+// look survives the cursor. Pressed already matches the selected colors.
+@mixin selection-checked-vars {
+	--sd-button-background-color: var(--color-bg-selection-accent-weak, #c7dbef);
+	--sd-button-border: 1px solid var(--color-border-selection-accent-default, #1467ba);
+	--sd-button-background-color-hover: var(--color-bg-selection-accent-weak, #c7dbef);
+	--sd-button-border-color-hover: var(--color-border-selection-accent-default, #1467ba);
+}
+
+// Emit the --sd-button-* assignments for a named variant.
+@mixin variant-vars($name) {
+	$props: map.get($variants, $name);
+	@if $props == null {
+		@error "Unknown button variant '#{$name}'. Known: #{map.keys($variants)}.";
+	}
+	@each $prop, $value in $props {
+		--sd-button-#{$prop}: #{$value};
+	}
+}

package/dist/docs/declarative_with_source.js

@@ -1 +0,0 @@
-import"./doc.mjs";document.querySelector(`#declarative-with-code`).addEventListener(`click`,e=>{e.currentTarget.innerText+=`!`,console.log(`Test!`)});

package/dist/docs/new_white.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-  <g color="#000" fill="#fff">
-    <path style="marker:none" overflow="visible" d="M0 11h23v1H0z"/>
-    <path style="marker:none" overflow="visible" d="M11 23V0h1v23z"/>
-  </g>
-</svg>