@qingmingmu/components 0.1.0-beta.0

package/es/components/splitter/style.css

@@ -0,0 +1,53 @@
+.qm-splitter {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+}
+.qm-splitter--horizontal {
+  flex-direction: row;
+}
+.qm-splitter--vertical {
+  flex-direction: column;
+}
+.qm-splitter--dragging {
+  user-select: none;
+}
+.qm-splitter__panel {
+  flex: 0 0 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+.qm-splitter__bar {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  touch-action: none;
+  cursor: col-resize;
+  background-color: var(--qm-splitter-bar-bg);
+  transition: background-color var(--qm-splitter-transition) ease;
+}
+.qm-splitter__bar:hover, .qm-splitter__bar:focus-visible {
+  background-color: var(--qm-splitter-bar-hover-bg);
+}
+.qm-splitter__bar:active {
+  background-color: var(--qm-splitter-bar-active-bg);
+}
+.qm-splitter--horizontal .qm-splitter__bar {
+  width: var(--qm-splitter-bar-size);
+  height: 100%;
+}
+.qm-splitter--vertical .qm-splitter__bar {
+  width: 100%;
+  height: var(--qm-splitter-bar-size);
+  cursor: row-resize;
+}
+.qm-splitter__bar-handle {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

package/es/components/statistic/index.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const statistic = require('../../shared/components.BZeq4M6i.cjs');
+require('vue');
+require('../../shared/components.DUidQ77e.cjs');
+
+
+
+exports.QmStatistic = statistic.Statistic;
+exports.default = statistic.Statistic;
+exports.formatStatisticValue = statistic.formatStatisticValue;
+exports.statisticProps = statistic.statisticProps;

package/es/components/statistic/index.d.cts

@@ -0,0 +1,10 @@
+import { S as Statistic } from '../../shared/components.ChFQqcD8.cjs';
+export { a as StatisticEmits, f as formatStatisticValue, s as statisticProps } from '../../shared/components.ChFQqcD8.cjs';
+import 'vue';
+import '../../shared/components.OJRSZE6i.cjs';
+
+
+
+// @ts-ignore
+export = Statistic;
+export { Statistic as QmStatistic };

package/es/components/statistic/index.d.mts

@@ -0,0 +1,8 @@
+import { S as Statistic } from '../../shared/components.Dfe4D-8g.mjs';
+export { a as StatisticEmits, f as formatStatisticValue, s as statisticProps } from '../../shared/components.Dfe4D-8g.mjs';
+import 'vue';
+import '../../shared/components.OJRSZE6i.mjs';
+
+
+
+export { Statistic as QmStatistic, Statistic as default };

package/es/components/statistic/index.d.ts

@@ -0,0 +1,10 @@
+import { S as Statistic } from '../../shared/components.BIm7FYRN.js';
+export { a as StatisticEmits, f as formatStatisticValue, s as statisticProps } from '../../shared/components.BIm7FYRN.js';
+import 'vue';
+import '../../shared/components.OJRSZE6i.js';
+
+
+
+// @ts-ignore
+export = Statistic;
+export { Statistic as QmStatistic };

package/es/components/statistic/index.mjs

@@ -0,0 +1,8 @@
+import { S as Statistic } from '../../shared/components.Be0We_QJ.mjs';
+export { f as formatStatisticValue, s as statisticProps } from '../../shared/components.Be0We_QJ.mjs';
+import 'vue';
+import '../../shared/components.pcqpp-6-.mjs';
+
+
+
+export { Statistic as QmStatistic, Statistic as default };

package/es/components/statistic/style/index.js

@@ -0,0 +1,4 @@
+// 样式入口（组件体系设计 §6.4）：import 编译产物 CSS。
+// 发布形态：与 es/components/statistic/style.css 同目录，由 resolver 按需注入；
+// 源码开发场景由 Vite 直接编译 index.scss（play 沙箱）。
+import './style.css'

package/es/components/statistic/style.css

@@ -0,0 +1,30 @@
+.qm-statistic {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--qm-statistic-gap);
+}
+.qm-statistic__title {
+  font-size: var(--qm-statistic-title-font-size);
+  color: var(--qm-statistic-title-color);
+}
+.qm-statistic__content {
+  display: inline-flex;
+  gap: var(--qm-statistic-gap);
+  align-items: baseline;
+}
+.qm-statistic__value {
+  font-family: var(--qm-statistic-value-font-family);
+  font-size: var(--qm-statistic-value-font-size);
+  font-weight: var(--qm-statistic-value-font-weight);
+  font-variant-numeric: tabular-nums;
+  line-height: 1.2;
+  color: var(--qm-statistic-value-color);
+}
+.qm-statistic__prefix {
+  font-size: var(--qm-statistic-value-font-size);
+  color: var(--qm-statistic-prefix-color);
+}
+.qm-statistic__suffix {
+  font-size: var(--qm-statistic-value-font-size);
+  color: var(--qm-statistic-suffix-color);
+}

package/es/components/steps/index.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const step = require('../../shared/components.CBELcqkf.cjs');
+require('vue');
+require('../../shared/components.DUidQ77e.cjs');
+require('../../shared/components.CRtd1JMp.cjs');
+require('@qingmingmu/icons');
+
+
+
+exports.QmStep = step.step;
+exports.QmSteps = step.Steps;
+exports.STEPS_CONTEXT_KEY = step.STEPS_CONTEXT_KEY;
+exports.default = step.Steps;
+exports.stepProps = step.stepProps;
+exports.stepsProps = step.stepsProps;

package/es/components/steps/index.d.cts

@@ -0,0 +1,12 @@
+import { S as Steps } from '../../shared/components.DPGfB1k8.cjs';
+export { s as QmStep, a as STEPS_CONTEXT_KEY, b as StepStatus, c as StepsContext, d as StepsDirection, e as StepsEmits, f as stepProps, g as stepsProps } from '../../shared/components.DPGfB1k8.cjs';
+import 'vue';
+import '../../shared/components.OJRSZE6i.cjs';
+import '../../shared/components.b5GjJzDh.cjs';
+import '@qingmingmu/icons';
+
+
+
+// @ts-ignore
+export = Steps;
+export { Steps as QmSteps };

package/es/components/steps/index.d.mts

@@ -0,0 +1,10 @@
+import { S as Steps } from '../../shared/components.D3HPYZ31.mjs';
+export { s as QmStep, a as STEPS_CONTEXT_KEY, b as StepStatus, c as StepsContext, d as StepsDirection, e as StepsEmits, f as stepProps, g as stepsProps } from '../../shared/components.D3HPYZ31.mjs';
+import 'vue';
+import '../../shared/components.OJRSZE6i.mjs';
+import '../../shared/components.DCuPins-.mjs';
+import '@qingmingmu/icons';
+
+
+
+export { Steps as QmSteps, Steps as default };

package/es/components/steps/index.d.ts

@@ -0,0 +1,12 @@
+import { S as Steps } from '../../shared/components.Bo3WVnTy.js';
+export { s as QmStep, a as STEPS_CONTEXT_KEY, b as StepStatus, c as StepsContext, d as StepsDirection, e as StepsEmits, f as stepProps, g as stepsProps } from '../../shared/components.Bo3WVnTy.js';
+import 'vue';
+import '../../shared/components.OJRSZE6i.js';
+import '../../shared/components.C6sLxXPo.js';
+import '@qingmingmu/icons';
+
+
+
+// @ts-ignore
+export = Steps;
+export { Steps as QmSteps };

package/es/components/steps/index.mjs

@@ -0,0 +1,10 @@
+import { S as Steps } from '../../shared/components.aEHtkYll.mjs';
+export { s as QmStep, a as STEPS_CONTEXT_KEY, b as stepProps, c as stepsProps } from '../../shared/components.aEHtkYll.mjs';
+import 'vue';
+import '../../shared/components.pcqpp-6-.mjs';
+import '../../shared/components.D3on6_fI.mjs';
+import '@qingmingmu/icons';
+
+
+
+export { Steps as QmSteps, Steps as default };

package/es/components/steps/style/index.js

@@ -0,0 +1,4 @@
+// QmSteps 样式入口（导航 + 桌面端 task）：import 编译产物 CSS。
+// 发布形态：与 es/components/steps/style.css 同目录，由 resolver 按需注入；
+// 源码开发场景由 Vite 直接编译 index.scss（play 沙箱 / 命令式入口自引入）。
+import './style.css'

package/es/components/steps/style.css

@@ -0,0 +1,123 @@
+@charset "UTF-8";
+.qm-steps {
+  display: flex;
+  width: 100%;
+}
+.qm-steps--horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+}
+.qm-steps--vertical {
+  flex-direction: column;
+}
+
+.qm-step {
+  position: relative;
+  display: flex;
+  flex: 1;
+  color: var(--qm-steps-color);
+  cursor: pointer;
+  outline: none;
+  transition: color var(--qm-steps-transition) ease;
+}
+.qm-step:focus-visible .qm-step__icon {
+  box-shadow: inset 0 0 0 2px var(--qm-steps-process-color);
+}
+.qm-step--horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+}
+.qm-step--vertical {
+  flex-direction: column;
+}
+.qm-step__header {
+  display: flex;
+  gap: var(--qm-steps-gap);
+  align-items: flex-start;
+}
+.qm-step--vertical .qm-step__header {
+  flex-direction: row;
+}
+.qm-step__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--qm-steps-icon-size);
+  height: var(--qm-steps-icon-size);
+  font-size: var(--qm-steps-icon-font-size);
+  color: var(--qm-steps-color);
+  background-color: var(--qm-steps-line-color);
+  border-radius: var(--qm-steps-icon-border-radius);
+  transition: color var(--qm-steps-transition) ease, background-color var(--qm-steps-transition) ease, box-shadow var(--qm-steps-transition) ease;
+  /* 统一走 QmIcon：1em 随容器字号，颜色随状态 */
+}
+.qm-step__icon .qm-icon {
+  font-size: 1em;
+  color: inherit;
+}
+.qm-step__index {
+  font-weight: 600;
+}
+.qm-step__body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding-top: 4px;
+}
+.qm-step__title {
+  font-size: var(--qm-steps-title-font-size);
+  font-weight: var(--qm-steps-title-font-weight);
+  color: inherit;
+  white-space: nowrap;
+}
+.qm-step__description {
+  font-size: var(--qm-steps-description-font-size);
+  color: var(--qm-steps-description-color);
+}
+.qm-step__line {
+  height: var(--qm-steps-line-height);
+  background-color: var(--qm-steps-line-color);
+  transition: background-color var(--qm-steps-transition) ease;
+}
+.qm-step--horizontal .qm-step__line {
+  flex: 1;
+  align-self: flex-start;
+  margin-top: calc(var(--qm-steps-icon-size) / 2 - var(--qm-steps-line-height) / 2);
+  margin-left: var(--qm-steps-gap);
+}
+.qm-step--vertical .qm-step__line {
+  width: var(--qm-steps-line-height);
+  min-height: calc(var(--qm-steps-gap) * 2);
+  margin-left: calc(var(--qm-steps-icon-size) / 2 - var(--qm-steps-line-height) / 2);
+}
+.qm-step--process {
+  color: var(--qm-steps-process-color);
+}
+.qm-step--process .qm-step__icon {
+  color: var(--qm-steps-process-color);
+  background-color: transparent;
+  box-shadow: inset 0 0 0 2px var(--qm-steps-process-color);
+}
+.qm-step--finish {
+  color: var(--qm-steps-finish-color);
+}
+.qm-step--finish .qm-step__icon {
+  color: var(--qm-steps-finish-color);
+  background-color: color-mix(in srgb, var(--qm-steps-finish-color) 18%, transparent);
+  box-shadow: inset 0 0 0 2px var(--qm-steps-finish-color);
+}
+.qm-step--finish .qm-step__line {
+  background-color: var(--qm-steps-finish-color);
+}
+.qm-step--error {
+  color: var(--qm-steps-error-color);
+}
+.qm-step--error .qm-step__icon {
+  color: var(--qm-steps-error-color);
+  background-color: transparent;
+  box-shadow: inset 0 0 0 2px var(--qm-steps-error-color);
+}
+.qm-step--error .qm-step__line {
+  background-color: var(--qm-steps-error-color);
+}

package/es/components/switch/index.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const _switch = require('../../shared/components.6EXCNxk1.cjs');
+require('vue');
+require('../../shared/components.CRtd1JMp.cjs');
+require('@qingmingmu/icons');
+require('../../shared/components.DUidQ77e.cjs');
+
+
+
+exports.QmSwitch = _switch.Switch;
+exports.default = _switch.Switch;
+exports.switchProps = _switch.switchProps;
+exports.useSwitch = _switch.useSwitch;

package/es/components/switch/index.d.cts

@@ -0,0 +1,12 @@
+import { S as Switch } from '../../shared/components.BGcESMXM.cjs';
+export { a as SwitchEmits, b as SwitchSize, c as SwitchValue, U as UseSwitchOptions, d as UseSwitchReturn, s as switchProps, u as useSwitch } from '../../shared/components.BGcESMXM.cjs';
+import 'vue';
+import '../../shared/components.b5GjJzDh.cjs';
+import '@qingmingmu/icons';
+import '../../shared/components.OJRSZE6i.cjs';
+
+
+
+// @ts-ignore
+export = Switch;
+export { Switch as QmSwitch };

package/es/components/switch/index.d.mts

@@ -0,0 +1,10 @@
+import { S as Switch } from '../../shared/components.BRK5jSxk.mjs';
+export { a as SwitchEmits, b as SwitchSize, c as SwitchValue, U as UseSwitchOptions, d as UseSwitchReturn, s as switchProps, u as useSwitch } from '../../shared/components.BRK5jSxk.mjs';
+import 'vue';
+import '../../shared/components.DCuPins-.mjs';
+import '@qingmingmu/icons';
+import '../../shared/components.OJRSZE6i.mjs';
+
+
+
+export { Switch as QmSwitch, Switch as default };

package/es/components/switch/index.d.ts

@@ -0,0 +1,12 @@
+import { S as Switch } from '../../shared/components.CerI7DmE.js';
+export { a as SwitchEmits, b as SwitchSize, c as SwitchValue, U as UseSwitchOptions, d as UseSwitchReturn, s as switchProps, u as useSwitch } from '../../shared/components.CerI7DmE.js';
+import 'vue';
+import '../../shared/components.C6sLxXPo.js';
+import '@qingmingmu/icons';
+import '../../shared/components.OJRSZE6i.js';
+
+
+
+// @ts-ignore
+export = Switch;
+export { Switch as QmSwitch };

package/es/components/switch/index.mjs

@@ -0,0 +1,10 @@
+import { S as Switch } from '../../shared/components.54wxKDZE.mjs';
+export { s as switchProps, u as useSwitch } from '../../shared/components.54wxKDZE.mjs';
+import 'vue';
+import '../../shared/components.D3on6_fI.mjs';
+import '@qingmingmu/icons';
+import '../../shared/components.pcqpp-6-.mjs';
+
+
+
+export { Switch as QmSwitch, Switch as default };

package/es/components/switch/style/index.js

@@ -0,0 +1,4 @@
+// 样式入口（组件体系设计 §6.4）：import 编译产物 CSS。
+// 发布形态：与 es/components/switch/style.css 同目录，由 resolver 按需注入；
+// 源码开发场景由 Vite 直接编译 index.scss（play 沙箱）。
+import './style.css'

package/es/components/switch/style.css

@@ -0,0 +1,128 @@
+@charset "UTF-8";
+.qm-switch {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--qm-switch-width-medium);
+  min-width: var(--qm-switch-width-medium);
+  height: var(--qm-switch-height-medium);
+  font-size: var(--qm-switch-text-font-size);
+  line-height: 1;
+  color: var(--qm-switch-text-color);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  background-color: var(--qm-switch-bg);
+  border-radius: var(--qm-switch-border-radius);
+  transition: background-color var(--qm-switch-transition) ease;
+}
+.qm-switch--small {
+  width: var(--qm-switch-width-small);
+  min-width: var(--qm-switch-width-small);
+  height: var(--qm-switch-height-small);
+  font-size: var(--qm-switch-text-font-size-small);
+}
+.qm-switch--medium {
+  font-size: var(--qm-switch-text-font-size-medium);
+}
+.qm-switch--large {
+  width: var(--qm-switch-width-large);
+  min-width: var(--qm-switch-width-large);
+  height: var(--qm-switch-height-large);
+  font-size: var(--qm-switch-text-font-size-large);
+}
+.qm-switch--text {
+  width: auto;
+  max-width: var(--qm-switch-text-max-width-medium);
+  padding: var(--qm-switch-text-padding-vertical) calc(var(--qm-switch-knob-size-medium) + var(--qm-switch-gap) * 2);
+}
+.qm-switch.qm-switch--small.qm-switch--text {
+  max-width: var(--qm-switch-text-max-width-small);
+  padding: var(--qm-switch-text-padding-vertical) calc(var(--qm-switch-knob-size-small) + var(--qm-switch-gap) * 2);
+}
+.qm-switch.qm-switch--large.qm-switch--text {
+  max-width: var(--qm-switch-text-max-width-large);
+  padding: var(--qm-switch-text-padding-vertical) calc(var(--qm-switch-knob-size-large) + var(--qm-switch-gap) * 2);
+}
+.qm-switch--checked {
+  background-color: var(--qm-switch-checked-bg);
+}
+.qm-switch--disabled {
+  cursor: not-allowed;
+  background-color: var(--qm-switch-disabled-bg);
+}
+.qm-switch.qm-switch--disabled.qm-switch--checked {
+  background-color: var(--qm-switch-disabled-checked-bg);
+}
+.qm-switch:focus-visible {
+  box-shadow: var(--qm-switch-focus-ring);
+}
+.qm-switch__knob {
+  position: absolute;
+  top: 50%;
+  left: var(--qm-switch-gap);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--qm-switch-knob-size-medium);
+  height: var(--qm-switch-knob-size-medium);
+  background-color: var(--qm-switch-knob-bg);
+  border-radius: var(--qm-switch-border-radius);
+  box-shadow: var(--qm-switch-knob-shadow);
+  transform: translateY(-50%);
+  transition: left var(--qm-switch-transition) ease, background-color var(--qm-switch-transition) ease;
+}
+.qm-switch--small .qm-switch__knob {
+  width: var(--qm-switch-knob-size-small);
+  height: var(--qm-switch-knob-size-small);
+}
+.qm-switch--large .qm-switch__knob {
+  width: var(--qm-switch-knob-size-large);
+  height: var(--qm-switch-knob-size-large);
+}
+.qm-switch--checked .qm-switch__knob {
+  left: calc(100% - var(--qm-switch-knob-size-medium) - var(--qm-switch-gap));
+}
+.qm-switch.qm-switch--small.qm-switch--checked .qm-switch__knob {
+  left: calc(100% - var(--qm-switch-knob-size-small) - var(--qm-switch-gap));
+}
+.qm-switch.qm-switch--large.qm-switch--checked .qm-switch__knob {
+  left: calc(100% - var(--qm-switch-knob-size-large) - var(--qm-switch-gap));
+}
+.qm-switch--loading {
+  cursor: progress;
+}
+.qm-switch--loading .qm-switch__knob {
+  color: var(--qm-switch-loading-color);
+  background-color: var(--qm-switch-checked-bg);
+}
+.qm-switch__loading-icon {
+  display: inline-flex;
+  animation: qm-switch-spin 0.8s linear infinite;
+  /* 统一走 QmIcon：颜色随滑块 loading 色 */
+}
+.qm-switch__loading-icon .qm-icon {
+  color: inherit;
+}
+.qm-switch__text {
+  position: relative;
+  z-index: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1;
+  color: var(--qm-switch-text-color);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+@keyframes qm-switch-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/es/components/table/index.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const tableColumn = require('../../shared/components.BMUce5Uz.cjs');
+require('vue');
+require('../../shared/components.DUidQ77e.cjs');
+
+
+
+exports.QmTable = tableColumn.Table;
+exports.QmTableColumn = tableColumn.tableColumn;
+exports.default = tableColumn.Table;
+exports.tableColumnContextKey = tableColumn.tableColumnContextKey;
+exports.tableProps = tableColumn.tableProps;

package/es/components/table/index.d.cts

@@ -0,0 +1,10 @@
+import { T as Table } from '../../shared/components.DNZ8j6Sz.cjs';
+export { t as QmTableColumn, a as TableColumnConfig, b as TableColumnContext, c as TableEmits, d as tableColumnContextKey, e as tableProps } from '../../shared/components.DNZ8j6Sz.cjs';
+import 'vue';
+import '../../shared/components.OJRSZE6i.cjs';
+
+
+
+// @ts-ignore
+export = Table;
+export { Table as QmTable };

package/es/components/table/index.d.mts

@@ -0,0 +1,8 @@
+import { T as Table } from '../../shared/components.BNXBaiBD.mjs';
+export { t as QmTableColumn, a as TableColumnConfig, b as TableColumnContext, c as TableEmits, d as tableColumnContextKey, e as tableProps } from '../../shared/components.BNXBaiBD.mjs';
+import 'vue';
+import '../../shared/components.OJRSZE6i.mjs';
+
+
+
+export { Table as QmTable, Table as default };

package/es/components/table/index.d.ts

@@ -0,0 +1,10 @@
+import { T as Table } from '../../shared/components.FNPonG8w.js';
+export { t as QmTableColumn, a as TableColumnConfig, b as TableColumnContext, c as TableEmits, d as tableColumnContextKey, e as tableProps } from '../../shared/components.FNPonG8w.js';
+import 'vue';
+import '../../shared/components.OJRSZE6i.js';
+
+
+
+// @ts-ignore
+export = Table;
+export { Table as QmTable };

package/es/components/table/index.mjs

@@ -0,0 +1,8 @@
+import { T as Table } from '../../shared/components.CKbZKaMO.mjs';
+export { t as QmTableColumn, a as tableColumnContextKey, b as tableProps } from '../../shared/components.CKbZKaMO.mjs';
+import 'vue';
+import '../../shared/components.pcqpp-6-.mjs';
+
+
+
+export { Table as QmTable, Table as default };

package/es/components/table/style/index.js

@@ -0,0 +1,4 @@
+// 样式入口（组件体系设计 §6.4）：import 编译产物 CSS。
+// 发布形态：与 es/components/table/style.css 同目录，由 resolver 按需注入；
+// 源码开发场景由 Vite 直接编译 index.scss（play 沙箱）。
+import './style.css'

package/es/components/table/style.css

@@ -0,0 +1,52 @@
+.qm-table {
+  box-sizing: border-box;
+  width: 100%;
+  overflow: hidden;
+  color: var(--qm-table-color);
+  background-color: var(--qm-table-bg);
+  border-radius: var(--qm-table-border-radius);
+}
+.qm-table__inner {
+  width: 100%;
+  font-size: var(--qm-table-cell-font-size);
+  border-collapse: collapse;
+}
+.qm-table__cell {
+  padding: var(--qm-table-cell-padding);
+  font-size: var(--qm-table-cell-font-size);
+  text-align: left;
+}
+.qm-table__cell--head {
+  font-size: var(--qm-table-header-font-size);
+  font-weight: var(--qm-table-header-font-weight);
+  color: var(--qm-table-header-color);
+  background-color: var(--qm-table-header-bg);
+}
+.qm-table__row {
+  transition: background-color var(--qm-table-transition) ease;
+}
+.qm-table--border {
+  border: 1px solid var(--qm-table-border);
+}
+.qm-table--border .qm-table__cell {
+  border-right: 1px solid var(--qm-table-border);
+  border-bottom: 1px solid var(--qm-table-border);
+}
+.qm-table--border .qm-table__cell:last-child {
+  border-right: none;
+}
+.qm-table--border .qm-table__body .qm-table__row:last-child .qm-table__cell {
+  border-bottom: none;
+}
+.qm-table--stripe .qm-table__body .qm-table__row:nth-child(even) {
+  background-color: var(--qm-table-row-stripe-bg);
+}
+.qm-table--hover .qm-table__body .qm-table__row:hover {
+  background-color: var(--qm-table-row-hover-bg);
+}
+.qm-table__empty {
+  padding: var(--qm-table-empty-padding);
+  font-size: var(--qm-table-cell-font-size);
+  color: var(--qm-table-empty-color);
+  text-align: center;
+}