@q1travel/design-system 0.3.2 → 0.4.0

package/dist-pkg/style.css

@@ -202,6 +202,10 @@
   --q1-radius-3: 8px;
   --q1-radius-4: 12px;
   --q1-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--q1-color-primary-700) 22%, transparent);
+  /* 浮层阴影两档：popover=菜单/悬浮卡/小浮层，modal=模态级大浮层。方向性面板（drawer/sheet）例外，
+     在组件内自持。恒黑 shadow token 混色，暗色靠 --q1-color-border-overlay 发丝边保证清晰度。 */
+  --q1-shadow-popover: 0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 16%, transparent);
+  --q1-shadow-modal: 0 16px 48px color-mix(in srgb, var(--q1-color-shadow) 32%, transparent);
 }
 
 :root[data-theme='dark'] {
@@ -736,6 +740,74 @@
   padding: 12px 14px;
 }
 
+/* Textarea 字符计数外框（#22 决策 5，仿 input-control affix 先例）：maxLength 存在时才渲染，
+   外框承载边框/焦点环/校验/禁用皮肤，内部 textarea 去皮，计数器占真实布局空间、右下角对齐。 */
+.textarea-control {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--q1-color-border-strong);
+  border-radius: var(--q1-radius-2);
+  background: var(--q1-color-bg-panel);
+}
+
+.textarea-control:hover:not(:has(.form-control:disabled)) {
+  border-color: var(--q1-color-text-secondary);
+}
+
+.textarea-control:focus-within {
+  border-color: var(--q1-color-action-primary);
+  box-shadow: var(--q1-shadow-focus);
+}
+
+.form-field--error .textarea-control,
+.textarea-control:has(.form-control[aria-invalid='true']) {
+  border-color: var(--q1-color-status-danger);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
+}
+
+.textarea-control:has(.form-control:disabled) {
+  background: var(--q1-color-bg-subtle);
+}
+
+/* 尺寸档圆角随内部控件对齐（同 input-control 的 :has 尺寸档规则）。 */
+.textarea-control:has(.form-control--xs) {
+  border-radius: var(--q1-radius-1);
+}
+
+.textarea-control:has(.form-control--lg) {
+  border-radius: var(--q1-radius-3);
+}
+
+.textarea-control .form-control {
+  border: none;
+  border-radius: inherit;
+  background: transparent;
+}
+
+.textarea-control .form-control:focus,
+.textarea-control .form-control:focus-visible,
+.form-field--error .textarea-control .form-control,
+.textarea-control .form-control[aria-invalid='true'] {
+  box-shadow: none;
+}
+
+.textarea-control .form-control:disabled {
+  background: transparent;
+}
+
+.textarea-control__count {
+  align-self: flex-end;
+  padding: 0 12px 8px;
+  color: var(--q1-color-text-secondary);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.textarea-control:has(.form-control:disabled) .textarea-control__count {
+  color: var(--q1-color-text-muted);
+}
+
 .form-control::placeholder {
   color: var(--q1-color-text-muted);
 }
@@ -784,6 +856,16 @@
   opacity: 0;
 }
 
+/* 裸形态（#22 §1.3 / #45）：去文本 body 列、仅剩 16px 视觉盒；外层是 span 非 label
+   （业务 <label> 包裹时 label 套 label 非法），保留 .control-option 类复用全部状态选择器
+   （checked/indeterminate/disabled/focus-visible 均以其为父作用域）。inline-grid 便于
+   表格选择列/工具栏内联对齐。 */
+.control-option--bare {
+  display: inline-grid;
+  grid-template-columns: 16px;
+  vertical-align: middle;
+}
+
 .control-option__visual {
   position: relative;
   display: block;
@@ -1020,7 +1102,7 @@
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-4);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 16%, transparent);
+  box-shadow: var(--q1-shadow-popover);
 }
 .menu__popup--start {
   left: 0;
@@ -2505,10 +2587,10 @@ a.breadcrumb__link:hover {
   display: flex;
   gap: var(--q1-space-6);
   padding: var(--q1-space-4);
-  border: 1px solid var(--q1-color-border);
+  border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-3);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 8px 24px color-mix(in srgb, var(--q1-color-mask-opaque) 14%, transparent);
+  box-shadow: var(--q1-shadow-popover);
 }
 
 .cal-popover--vertical {
@@ -2784,10 +2866,10 @@ a.breadcrumb__link:hover {
   z-index: 20;
   display: flex;
   min-width: 380px;
-  border: 1px solid var(--q1-color-border);
+  border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-3);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 8px 24px color-mix(in srgb, var(--q1-color-mask-opaque) 14%, transparent);
+  box-shadow: var(--q1-shadow-popover);
   overflow: hidden;
 }
 
@@ -3992,10 +4074,10 @@ a.breadcrumb__link:hover {
   flex-direction: column;
   gap: var(--q1-space-1);
   padding: var(--q1-space-3) var(--q1-space-4);
-  border: 1px solid var(--q1-color-border);
+  border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-2);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 8px 24px color-mix(in srgb, var(--q1-color-mask-opaque) 14%, transparent);
+  box-shadow: var(--q1-shadow-popover);
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.12s ease, visibility 0.12s ease;
@@ -4133,7 +4215,7 @@ a.breadcrumb__link:hover {
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-2);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 8px 24px color-mix(in srgb, var(--q1-color-shadow) 14%, transparent);
+  box-shadow: var(--q1-shadow-popover);
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.12s ease, visibility 0.12s ease;
@@ -5176,7 +5258,7 @@ a.q1-card:focus-visible {
   z-index: 10;
   width: 336px;
   border-color: var(--q1-color-border-overlay);
-  box-shadow: 0 8px 24px color-mix(in srgb, var(--q1-color-shadow) 16%, transparent);
+  box-shadow: var(--q1-shadow-popover);
 }
 .feedback__head {
   display: flex;
@@ -6107,6 +6189,10 @@ a.q1-card:focus-visible {
 .combobox--disabled .combobox__control {
   opacity: 0.55;
 }
+.combobox--readonly .combobox__input {
+  caret-color: transparent;
+  cursor: default;
+}
 .combobox__leading {
   flex: none;
   color: var(--q1-color-text-secondary);
@@ -6143,7 +6229,7 @@ a.q1-card:focus-visible {
   outline: none;
   box-shadow: var(--q1-shadow-focus);
 }
-.combobox__listbox {
+.combobox__popup {
   position: absolute;
   top: calc(100% + var(--q1-space-1));
   left: 0;
@@ -6157,7 +6243,12 @@ a.q1-card:focus-visible {
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-3);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 16%, transparent);
+  box-shadow: var(--q1-shadow-popover);
+}
+.combobox__listbox {
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 .combobox__option {
   display: flex;
@@ -6186,15 +6277,31 @@ a.q1-card:focus-visible {
 .combobox__option--active {
   background: color-mix(in srgb, var(--q1-color-text-primary) 6%, transparent);
 }
+.combobox__option--disabled {
+  color: var(--q1-color-text-secondary);
+  opacity: 0.55;
+  cursor: not-allowed;
+}
 .combobox__option[aria-selected='true'] {
   color: var(--q1-color-action-primary);
   font-weight: 500;
 }
+/* 选中项对勾（对标 Geist 选中标记）：推到行尾，随选中色。 */
+.combobox__option-check {
+  flex: none;
+  margin-left: auto;
+  color: var(--q1-color-action-primary);
+}
 .combobox__empty {
   padding: var(--q1-space-3);
   font-size: 13px;
   color: var(--q1-color-text-secondary);
 }
+.combobox__empty :focus-visible {
+  outline: none;
+  border-radius: var(--q1-radius-1);
+  box-shadow: var(--q1-shadow-focus);
+}
 .combobox__error-text {
   margin: var(--q1-space-2) 0 0;
   font-size: 13px;
@@ -6242,7 +6349,7 @@ a.q1-card:focus-visible {
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-4);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 16%, transparent);
+  box-shadow: var(--q1-shadow-popover);
 }
 .multi-select__bulk {
   display: flex;
@@ -6407,7 +6514,7 @@ a.q1-card:focus-visible {
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-4);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 16px 48px color-mix(in srgb, var(--q1-color-shadow) 32%, transparent);
+  box-shadow: var(--q1-shadow-modal);
   overflow: hidden;
 }
 .command-palette__search {
@@ -6563,10 +6670,9 @@ a.q1-card:focus-visible {
 .modal-btn--primary:disabled:hover {
   background: var(--q1-color-bg-subtle);
 }
-/* fullWidth（对标 Geist Single button）：单按钮场景下让主操作铺满整行，而不是退回右对齐。 */
-.modal-btn--full-width {
+/* 单按钮场景铺满整行(对标 Geist Single button):布局属于模态框上下文,不进 Button 本体。 */
+.modal__action--full {
   width: 100%;
-  text-align: center;
 }
 .modal {
   position: fixed;
@@ -6592,7 +6698,7 @@ a.q1-card:focus-visible {
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-4);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 16px 48px color-mix(in srgb, var(--q1-color-shadow) 32%, transparent);
+  box-shadow: var(--q1-shadow-modal);
 }
 .modal__header {
   display: flex;

package/dist-pkg/tokens.css

@@ -198,6 +198,8 @@
   --q1-radius-3: 8px;
   --q1-radius-4: 12px;
   --q1-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--q1-color-primary-700) 22%, transparent);
+  --q1-shadow-popover: 0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 16%, transparent);
+  --q1-shadow-modal: 0 16px 48px color-mix(in srgb, var(--q1-color-shadow) 32%, transparent);
 }
 
 :root[data-theme='dark'] {
@@ -400,4 +402,6 @@
   --q1-radius-3: 8px;
   --q1-radius-4: 12px;
   --q1-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--q1-color-primary-700) 22%, transparent);
+  --q1-shadow-popover: 0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 16%, transparent);
+  --q1-shadow-modal: 0 16px 48px color-mix(in srgb, var(--q1-color-shadow) 32%, transparent);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q1travel/design-system",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "private": false,
   "type": "module",
   "main": "./dist-pkg/design-system.js",