@well-insight/ui 0.1.6 → 0.1.8

package/dist/components/Breadcrumb/Breadcrumb.vue.d.ts

@@ -1,6 +1,18 @@
 import { BreadcrumbProps } from './types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-declare const __VLS_export: DefineComponent<BreadcrumbProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<BreadcrumbProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    separator?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: DefineComponent<BreadcrumbProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<BreadcrumbProps> & Readonly<{}>, {
+    separator: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
 //# sourceMappingURL=Breadcrumb.vue.d.ts.map

package/dist/components/Breadcrumb/Breadcrumb.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.vue"],"names":[],"mappings":";AAqDA,OAAO,KAAK,EAAkB,eAAe,EAAE,MAAM,SAAS,CAAA;AAuF9D,QAAA,MAAM,YAAY,0SAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"Breadcrumb.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.vue"],"names":[],"mappings":";AAyDA,OAAO,KAAK,EAAkB,eAAe,EAAE,MAAM,SAAS,CAAA;AA4F9D,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAKjD,QAAA,MAAM,UAAU;;6EAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/Breadcrumb/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC1D,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAA;AAChB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC1D,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/Breadcrumb/styles.css

@@ -0,0 +1,45 @@
+/* —— Menu: Breadcrumb —— */
+.wi-breadcrumb {
+    color: var(--wi-color-text-muted);
+    font-size: var(--wi-font-size-md);
+}
+
+.wi-breadcrumb__list {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--wi-space-2);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.wi-breadcrumb__item {
+    align-items: center;
+    display: inline-flex;
+    gap: var(--wi-space-2);
+}
+
+.wi-breadcrumb__link {
+    color: inherit;
+    text-decoration: none;
+}
+
+a.wi-breadcrumb__link:hover {
+    color: var(--wi-color-primary);
+}
+
+.wi-breadcrumb__link--current {
+    color: var(--wi-color-text);
+    font-weight: 600;
+}
+
+.wi-breadcrumb__link--disabled {
+    cursor: not-allowed;
+    opacity: var(--wi-opacity-disabled);
+}
+
+.wi-breadcrumb__separator {
+    color: var(--wi-color-text-muted);
+    opacity: 0.7;
+}

package/dist/components/Breadcrumb/types.d.ts

@@ -10,5 +10,7 @@ export interface BreadcrumbHome {
 export interface BreadcrumbProps {
     model: BreadcrumbItem[];
     home?: BreadcrumbHome;
+    /** Separator between items. Defaults to `/`. */
+    separator?: string;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Breadcrumb/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB"}

package/dist/components/Button/Button.vue.d.ts

@@ -24,6 +24,8 @@ declare const __VLS_base: DefineComponent<ButtonProps, {
     disabled: boolean;
     loading: boolean;
     outlined: boolean;
+    ghost: boolean;
+    quaternary: boolean;
     iconPos: ButtonIconPos;
     iconOnly: boolean;
     raised: boolean;

package/dist/components/Button/Button.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.vue"],"names":[],"mappings":";AA4IA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAsF1C,iBAAS,KAAK,SAEb;AAmHD,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO;;CAAU,EAAE,QAAQ,IAAY,CAAE;AAChE,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAChD;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAOhD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;6EAKd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"Button.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.vue"],"names":[],"mappings":";AAqJA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAgG1C,iBAAS,KAAK,SAEb;AAuHD,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO;;CAAU,EAAE,QAAQ,IAAY,CAAE;AAChE,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAChD;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAOhD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;6EAKd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/Button/ButtonGroup.vue.d.ts

@@ -0,0 +1,18 @@
+import { ButtonGroupProps } from './types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: DefineComponent<ButtonGroupProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ButtonGroupProps> & Readonly<{}>, {
+    fluid: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=ButtonGroup.vue.d.ts.map

package/dist/components/Button/ButtonGroup.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Button/ButtonGroup.vue"],"names":[],"mappings":";AAuBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAwC/C,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU;;6EAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/Button/index.d.ts

@@ -1,3 +1,4 @@
 export { default as WiButton } from './Button.vue';
-export type { ButtonBadgeSeverity, ButtonEmits, ButtonIconPos, ButtonInstance, ButtonProps, ButtonSeverity, ButtonSize, ButtonVariant, } from './types';
+export { default as WiButtonGroup } from './ButtonGroup.vue';
+export type { ButtonBadgeSeverity, ButtonEmits, ButtonGroupProps, ButtonIconPos, ButtonInstance, ButtonProps, ButtonSeverity, ButtonSize, ButtonVariant, } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,cAAc,CAAA;AAClD,YAAY,EACV,mBAAmB,EACnB,WAAW,EACX,aAAa,EACb,cAAc,EACd,WAAW,EACX,cAAc,EACd,UAAU,EACV,aAAa,GACd,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAA;AAEhB,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAC5D,YAAY,EACV,mBAAmB,EACnB,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,WAAW,EACX,cAAc,EACd,UAAU,EACV,aAAa,GACd,MAAM,SAAS,CAAA"}

package/dist/components/Button/styles.css

@@ -0,0 +1,492 @@
+.wi-button {
+    --wi-button-bg: var(--wi-color-primary);
+    --wi-button-fg: var(--wi-color-on-emphasis);
+    --wi-button-border: var(--wi-color-primary);
+    --wi-button-hover-bg: var(--wi-color-primary-hover);
+    --wi-button-hover-fg: var(--wi-color-on-emphasis);
+    --wi-button-hover-border: var(--wi-color-primary-hover);
+    --wi-button-active-bg: color-mix(in srgb, var(--wi-color-primary) 82%, black);
+    align-items: center;
+    background: var(--wi-button-bg);
+    border: 1px solid var(--wi-button-border);
+    border-radius: var(--wi-radius-control);
+    color: var(--wi-button-fg);
+    cursor: pointer;
+    display: inline-flex;
+    flex-direction: row;
+    font-size: var(--wi-control-font-medium);
+    font-weight: 600;
+    gap: var(--wi-space-2);
+    justify-content: center;
+    line-height: 1;
+    min-height: var(--wi-control-height-medium);
+    padding: 0 var(--wi-button-padding-x-medium);
+    position: relative;
+    transition:
+        background-color var(--wi-motion-fast) var(--wi-motion-ease),
+        border-color var(--wi-motion-fast) var(--wi-motion-ease),
+        color var(--wi-motion-fast) var(--wi-motion-ease),
+        box-shadow var(--wi-motion-fast) var(--wi-motion-ease);
+    vertical-align: middle;
+    white-space: nowrap;
+}
+
+.wi-button:hover:not(:disabled) {
+    background: var(--wi-button-hover-bg);
+    border-color: var(--wi-button-hover-border);
+    color: var(--wi-button-hover-fg);
+}
+
+.wi-button:active:not(:disabled) {
+    background: var(--wi-button-active-bg);
+}
+
+/* Naive-style focus: soft glow, not outline-offset ring */
+.wi-button:focus {
+    outline: none;
+}
+
+.wi-button:focus-visible {
+    box-shadow: var(--wi-focus-shadow);
+    outline: none;
+}
+
+.wi-button--primary {
+    --wi-button-bg: var(--wi-color-primary);
+    --wi-button-fg: var(--wi-color-on-emphasis);
+    --wi-button-border: var(--wi-color-primary);
+    --wi-button-hover-bg: var(--wi-color-primary-hover);
+    --wi-button-hover-fg: var(--wi-color-on-emphasis);
+    --wi-button-hover-border: var(--wi-color-primary-hover);
+    --wi-button-active-bg: color-mix(in srgb, var(--wi-color-primary) 82%, black);
+}
+
+.wi-button--secondary {
+    --wi-button-bg: color-mix(in srgb, var(--wi-color-text-muted) 16%, var(--wi-color-surface));
+    --wi-button-fg: var(--wi-color-text);
+    --wi-button-border: transparent;
+    --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-text-muted) 24%, var(--wi-color-surface));
+    --wi-button-hover-fg: var(--wi-color-text);
+    --wi-button-hover-border: transparent;
+    --wi-button-active-bg: color-mix(in srgb, var(--wi-color-text-muted) 32%, var(--wi-color-surface));
+}
+
+.wi-button--success {
+    --wi-button-bg: var(--wi-color-success);
+    --wi-button-fg: var(--wi-color-on-emphasis);
+    --wi-button-border: var(--wi-color-success);
+    --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-success) 85%, black);
+    --wi-button-hover-fg: var(--wi-color-on-emphasis);
+    --wi-button-hover-border: color-mix(in srgb, var(--wi-color-success) 85%, black);
+    --wi-button-active-bg: color-mix(in srgb, var(--wi-color-success) 75%, black);
+}
+
+.wi-button--info {
+    --wi-button-bg: var(--wi-color-info);
+    --wi-button-fg: var(--wi-color-on-emphasis);
+    --wi-button-border: var(--wi-color-info);
+    --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-info) 85%, black);
+    --wi-button-hover-fg: var(--wi-color-on-emphasis);
+    --wi-button-hover-border: color-mix(in srgb, var(--wi-color-info) 85%, black);
+    --wi-button-active-bg: color-mix(in srgb, var(--wi-color-info) 75%, black);
+}
+
+.wi-button--warn {
+    --wi-button-bg: var(--wi-color-warn);
+    --wi-button-fg: var(--wi-color-on-emphasis);
+    --wi-button-border: var(--wi-color-warn);
+    --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-warn) 85%, black);
+    --wi-button-hover-fg: var(--wi-color-on-emphasis);
+    --wi-button-hover-border: color-mix(in srgb, var(--wi-color-warn) 85%, black);
+    --wi-button-active-bg: color-mix(in srgb, var(--wi-color-warn) 75%, black);
+}
+
+.wi-button--help {
+    --wi-button-bg: var(--wi-color-help);
+    --wi-button-fg: var(--wi-color-on-emphasis);
+    --wi-button-border: var(--wi-color-help);
+    --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-help) 85%, black);
+    --wi-button-hover-fg: var(--wi-color-on-emphasis);
+    --wi-button-hover-border: color-mix(in srgb, var(--wi-color-help) 85%, black);
+    --wi-button-active-bg: color-mix(in srgb, var(--wi-color-help) 75%, black);
+}
+
+.wi-button--danger {
+    --wi-button-bg: var(--wi-color-danger);
+    --wi-button-fg: var(--wi-color-on-emphasis);
+    --wi-button-border: var(--wi-color-danger);
+    --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-danger) 85%, black);
+    --wi-button-hover-fg: var(--wi-color-on-emphasis);
+    --wi-button-hover-border: color-mix(in srgb, var(--wi-color-danger) 85%, black);
+    --wi-button-active-bg: color-mix(in srgb, var(--wi-color-danger) 75%, black);
+}
+
+.wi-button--contrast {
+    --wi-button-bg: var(--wi-color-contrast);
+    --wi-button-fg: var(--wi-color-contrast-fg);
+    --wi-button-border: var(--wi-color-contrast);
+    --wi-button-hover-bg: var(--wi-color-contrast-hover);
+    --wi-button-hover-fg: var(--wi-color-contrast-fg);
+    --wi-button-hover-border: var(--wi-color-contrast-hover);
+    --wi-button-active-bg: var(--wi-color-contrast-active);
+}
+
+.wi-button--outlined {
+    --wi-button-bg: transparent;
+    --wi-button-fg: var(--wi-button-border);
+    --wi-button-hover-bg: color-mix(in srgb, var(--wi-button-border) 10%, transparent);
+    --wi-button-hover-fg: var(--wi-button-border);
+    --wi-button-hover-border: var(--wi-button-border);
+    --wi-button-active-bg: color-mix(in srgb, var(--wi-button-border) 16%, transparent);
+}
+
+.wi-button--secondary.wi-button--outlined {
+    --wi-button-border: var(--wi-color-border);
+    --wi-button-fg: var(--wi-color-text);
+    --wi-button-hover-fg: var(--wi-color-text);
+}
+
+.wi-button--text,
+.wi-button--link {
+    --wi-button-bg: transparent;
+    --wi-button-border: transparent;
+    --wi-button-fg: var(--wi-color-primary);
+    --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-primary) 10%, transparent);
+    --wi-button-hover-fg: var(--wi-color-primary);
+    --wi-button-hover-border: transparent;
+    --wi-button-active-bg: color-mix(in srgb, var(--wi-color-primary) 16%, transparent);
+}
+
+.wi-button--secondary.wi-button--text,
+.wi-button--secondary.wi-button--link {
+    --wi-button-fg: var(--wi-color-text-muted);
+    --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-text-muted) 12%, transparent);
+    --wi-button-hover-fg: var(--wi-color-text);
+}
+
+.wi-button--success.wi-button--text,
+.wi-button--success.wi-button--link,
+.wi-button--success.wi-button--outlined {
+    --wi-button-fg: var(--wi-color-success);
+    --wi-button-border: var(--wi-color-success);
+    --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-success) 10%, transparent);
+    --wi-button-hover-fg: var(--wi-color-success);
+    --wi-button-hover-border: var(--wi-color-success);
+}
+
+.wi-button--info.wi-button--text,
+.wi-button--info.wi-button--link,
+.wi-button--info.wi-button--outlined {
+    --wi-button-fg: var(--wi-color-info);
+    --wi-button-border: var(--wi-color-info);
+    --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-info) 10%, transparent);
+    --wi-button-hover-fg: var(--wi-color-info);
+    --wi-button-hover-border: var(--wi-color-info);
+}
+
+.wi-button--warn.wi-button--text,
+.wi-button--warn.wi-button--link,
+.wi-button--warn.wi-button--outlined {
+    --wi-button-fg: var(--wi-color-warn);
+    --wi-button-border: var(--wi-color-warn);
+    --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-warn) 10%, transparent);
+    --wi-button-hover-fg: var(--wi-color-warn);
+    --wi-button-hover-border: var(--wi-color-warn);
+}
+
+.wi-button--help.wi-button--text,
+.wi-button--help.wi-button--link,
+.wi-button--help.wi-button--outlined {
+    --wi-button-fg: var(--wi-color-help);
+    --wi-button-border: var(--wi-color-help);
+    --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-help) 10%, transparent);
+    --wi-button-hover-fg: var(--wi-color-help);
+    --wi-button-hover-border: var(--wi-color-help);
+}
+
+.wi-button--danger.wi-button--text,
+.wi-button--danger.wi-button--link,
+.wi-button--danger.wi-button--outlined {
+    --wi-button-fg: var(--wi-color-danger);
+    --wi-button-border: var(--wi-color-danger);
+    --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-danger) 10%, transparent);
+    --wi-button-hover-fg: var(--wi-color-danger);
+    --wi-button-hover-border: var(--wi-color-danger);
+}
+
+.wi-button--contrast.wi-button--text,
+.wi-button--contrast.wi-button--link,
+.wi-button--contrast.wi-button--outlined {
+    --wi-button-fg: var(--wi-color-contrast);
+    --wi-button-border: var(--wi-color-contrast);
+    --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-contrast) 10%, transparent);
+    --wi-button-hover-fg: var(--wi-color-contrast);
+    --wi-button-hover-border: var(--wi-color-contrast);
+}
+
+.wi-button--plain.wi-button--text,
+.wi-button--plain.wi-button--outlined,
+.wi-button--plain.wi-button--link {
+    --wi-button-fg: var(--wi-color-text-muted);
+    --wi-button-border: var(--wi-color-border);
+    --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-text-muted) 12%, transparent);
+    --wi-button-hover-fg: var(--wi-color-text);
+    --wi-button-hover-border: var(--wi-color-border);
+}
+
+.wi-button--link {
+    height: auto;
+    min-height: 0;
+    padding: 0;
+}
+
+.wi-button--link:hover:not(:disabled) {
+    text-decoration: underline;
+}
+
+.wi-button--ghost {
+    --wi-button-bg: transparent;
+    --wi-button-fg: var(--wi-button-border);
+    --wi-button-hover-bg: color-mix(in srgb, var(--wi-button-border) 12%, transparent);
+    --wi-button-hover-fg: var(--wi-button-border);
+    --wi-button-hover-border: var(--wi-button-border);
+    --wi-button-active-bg: color-mix(in srgb, var(--wi-button-border) 18%, transparent);
+}
+
+.wi-button--secondary.wi-button--ghost {
+    --wi-button-border: var(--wi-color-border);
+    --wi-button-fg: var(--wi-color-text);
+    --wi-button-hover-fg: var(--wi-color-text);
+}
+
+.wi-button--success.wi-button--ghost {
+    --wi-button-fg: var(--wi-color-success);
+    --wi-button-border: var(--wi-color-success);
+}
+
+.wi-button--info.wi-button--ghost {
+    --wi-button-fg: var(--wi-color-info);
+    --wi-button-border: var(--wi-color-info);
+}
+
+.wi-button--warn.wi-button--ghost {
+    --wi-button-fg: var(--wi-color-warn);
+    --wi-button-border: var(--wi-color-warn);
+}
+
+.wi-button--help.wi-button--ghost {
+    --wi-button-fg: var(--wi-color-help);
+    --wi-button-border: var(--wi-color-help);
+}
+
+.wi-button--danger.wi-button--ghost {
+    --wi-button-fg: var(--wi-color-danger);
+    --wi-button-border: var(--wi-color-danger);
+}
+
+.wi-button--contrast.wi-button--ghost {
+    --wi-button-fg: var(--wi-color-contrast);
+    --wi-button-border: var(--wi-color-contrast);
+}
+
+.wi-button--quaternary {
+    --wi-button-bg: transparent;
+    --wi-button-border: transparent;
+    --wi-button-fg: var(--wi-color-text);
+    --wi-button-hover-bg: color-mix(in srgb, var(--wi-color-text-muted) 10%, transparent);
+    --wi-button-hover-fg: var(--wi-color-text);
+    --wi-button-hover-border: transparent;
+    --wi-button-active-bg: color-mix(in srgb, var(--wi-color-text-muted) 16%, transparent);
+}
+
+.wi-button--custom {
+    --wi-button-bg: var(--wi-button-color);
+    --wi-button-fg: var(--wi-color-on-emphasis);
+    --wi-button-border: var(--wi-button-color);
+    --wi-button-hover-bg: color-mix(in srgb, var(--wi-button-color) 85%, black);
+    --wi-button-hover-fg: var(--wi-color-on-emphasis);
+    --wi-button-hover-border: color-mix(in srgb, var(--wi-button-color) 85%, black);
+    --wi-button-active-bg: color-mix(in srgb, var(--wi-button-color) 75%, black);
+}
+
+.wi-button--custom.wi-button--outlined,
+.wi-button--custom.wi-button--ghost,
+.wi-button--custom.wi-button--text,
+.wi-button--custom.wi-button--quaternary,
+.wi-button--custom.wi-button--link {
+    --wi-button-bg: transparent;
+    --wi-button-fg: var(--wi-button-color);
+    --wi-button-border: var(--wi-button-color);
+    --wi-button-hover-bg: color-mix(in srgb, var(--wi-button-color) 12%, transparent);
+    --wi-button-hover-fg: var(--wi-button-color);
+    --wi-button-hover-border: var(--wi-button-color);
+}
+
+.wi-button--custom.wi-button--text,
+.wi-button--custom.wi-button--quaternary,
+.wi-button--custom.wi-button--link {
+    --wi-button-border: transparent;
+    --wi-button-hover-border: transparent;
+}
+
+.wi-button-group {
+    display: inline-flex;
+    vertical-align: middle;
+}
+
+.wi-button-group--fluid {
+    display: flex;
+    width: 100%;
+}
+
+.wi-button-group--fluid > .wi-button {
+    flex: 1;
+}
+
+.wi-button-group > .wi-button {
+    border-radius: 0;
+    margin: 0;
+}
+
+.wi-button-group > .wi-button + .wi-button {
+    margin-left: -1px;
+}
+
+.wi-button-group > .wi-button:first-child {
+    border-top-left-radius: var(--wi-radius-md);
+    border-bottom-left-radius: var(--wi-radius-md);
+}
+
+.wi-button-group > .wi-button:last-child {
+    border-top-right-radius: var(--wi-radius-md);
+    border-bottom-right-radius: var(--wi-radius-md);
+}
+
+.wi-button--raised {
+    box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--wi-color-text) 14%, transparent);
+}
+
+.wi-button--rounded {
+    border-radius: var(--wi-radius-full);
+}
+
+.wi-button--icon-only {
+    gap: 0;
+    min-width: var(--wi-control-height-medium);
+    padding: 0;
+    width: var(--wi-control-height-medium);
+}
+
+.wi-button--icon-only.wi-button--small {
+    min-width: var(--wi-control-height-small);
+    width: var(--wi-control-height-small);
+}
+
+.wi-button--icon-only.wi-button--large {
+    min-width: var(--wi-control-height-large);
+    width: var(--wi-control-height-large);
+}
+
+.wi-button--icon-right {
+    flex-direction: row-reverse;
+}
+
+.wi-button--icon-top {
+    flex-direction: column;
+    min-height: 3.25rem;
+    padding-block: var(--wi-space-2);
+}
+
+.wi-button--icon-bottom {
+    flex-direction: column-reverse;
+    min-height: 3.25rem;
+    padding-block: var(--wi-space-2);
+}
+
+.wi-button--fluid {
+    display: flex;
+    width: 100%;
+}
+
+.wi-button--small {
+    font-size: var(--wi-control-font-small);
+    min-height: var(--wi-control-height-small);
+    padding: 0 var(--wi-button-padding-x-small);
+}
+
+.wi-button--large {
+    font-size: var(--wi-control-font-large);
+    min-height: var(--wi-control-height-large);
+    padding: 0 var(--wi-button-padding-x-large);
+}
+
+.wi-button__icon,
+.wi-button__label {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+}
+
+.wi-button__icon {
+    flex: 0 0 auto;
+}
+
+.wi-button__badge {
+    align-items: center;
+    background: var(--wi-color-contrast);
+    border-radius: var(--wi-radius-full);
+    color: var(--wi-color-contrast-fg);
+    display: inline-flex;
+    font-size: 0.65rem;
+    font-weight: 700;
+    justify-content: center;
+    line-height: 1;
+    margin-inline-start: var(--wi-space-1);
+    min-width: 1.15rem;
+    padding: 0.2rem 0.35rem;
+}
+
+.wi-button__badge--secondary {
+    background: color-mix(in srgb, var(--wi-color-text-muted) 25%, var(--wi-color-surface));
+    color: var(--wi-color-text);
+}
+
+.wi-button__badge--success {
+    background: var(--wi-color-success);
+    color: var(--wi-color-on-emphasis);
+}
+
+.wi-button__badge--info {
+    background: var(--wi-color-info);
+    color: var(--wi-color-on-emphasis);
+}
+
+.wi-button__badge--warn {
+    background: var(--wi-color-warn);
+    color: var(--wi-color-on-emphasis);
+}
+
+.wi-button__badge--danger {
+    background: var(--wi-color-danger);
+    color: var(--wi-color-on-emphasis);
+}
+
+.wi-button__badge--contrast {
+    background: var(--wi-color-contrast);
+    color: var(--wi-color-contrast-fg);
+}
+
+.wi-button__spinner {
+    animation: wi-button-spin 700ms linear infinite;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: var(--wi-radius-full);
+    height: 0.875rem;
+    width: 0.875rem;
+}
+
+@keyframes wi-button-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}

package/dist/components/Button/types.d.ts

@@ -3,7 +3,7 @@ import { IconName } from '../Icon/types';
 /** Color tone aligned with `severity`. Omit for primary. */
 export type ButtonSeverity = 'secondary' | 'success' | 'info' | 'warn' | 'help' | 'danger' | 'contrast';
 /** Visual variant aligned with `variant`. */
-export type ButtonVariant = 'outlined' | 'text' | 'link';
+export type ButtonVariant = 'outlined' | 'text' | 'link' | 'ghost' | 'quaternary';
 export type ButtonSize = 'small' | 'large';
 export type ButtonIconPos = 'left' | 'right' | 'top' | 'bottom';
 export type ButtonBadgeSeverity = Exclude<ButtonSeverity, 'help'> | null;
@@ -18,6 +18,8 @@ export interface ButtonProps {
     iconOnly?: boolean;
     /** Semantic color. Omit for primary. */
     severity?: ButtonSeverity;
+    /** Custom fill/text color. Overrides `severity` tones when set. */
+    color?: string;
     /** Elevated shadow. */
     raised?: boolean;
     /** Fully rounded corners. */
@@ -28,9 +30,13 @@ export interface ButtonProps {
     outlined?: boolean;
     /** Link-styled button. */
     link?: boolean;
+    /** Ghost (transparent fill, tinted hover). */
+    ghost?: boolean;
+    /** Extra-quiet text button. */
+    quaternary?: boolean;
     /** Muted/plain treatment for text or outlined. */
     plain?: boolean;
-    /** Shortcut for outlined / text / link. */
+    /** Shortcut for outlined / text / link / ghost / quaternary. */
     variant?: ButtonVariant;
     /** Size alternative to the default. Also accepts legacy `sm` / `md` / `lg`. */
     size?: ButtonSize | 'sm' | 'md' | 'lg';
@@ -56,4 +62,10 @@ export interface ButtonInstance {
     focus: () => void;
     ref: HTMLButtonElement | null;
 }
+export interface ButtonGroupProps {
+    /** Stretch to full container width. */
+    fluid?: boolean;
+    /** Accessible name for the group. */
+    ariaLabel?: string;
+}
 //# sourceMappingURL=types.d.ts.map