@conscience-technology/ctds 0.1.14 → 0.2.0

package/assets/components/Modal/Modal.tsx

@@ -29,7 +29,16 @@ export interface ModalProps {
   disableEscape?: boolean;
 }
 
-export const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(
+/**
+ * 간편 모드 — 가장 흔한 "title + body + footer" 레이아웃을 flat prop으로 넘긴다.
+ * 커스터마이즈가 필요하면 compound 모드:
+ *   <Modal.Root open onOpenChange={set}>
+ *     <Modal.Header title="…" />
+ *     <Modal.Body>…</Modal.Body>
+ *     <Modal.Footer>…</Modal.Footer>
+ *   </Modal.Root>
+ */
+const ModalComponent = forwardRef<HTMLDivElement, ModalProps>(function Modal(
   {
     open,
     onOpenChange,
@@ -43,6 +52,38 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(
     disableEscape,
   },
   ref,
+) {
+  return (
+    <ModalRoot
+      open={open}
+      onOpenChange={onOpenChange}
+      disableEscape={disableEscape}
+      ref={ref}
+    >
+      <ModalHeader
+        title={title}
+        description={description}
+        titleSrOnly={titleSrOnly}
+        dismissible={dismissible}
+        dismissLabel={dismissLabel}
+      />
+      {children !== undefined && children !== null && <ModalBody>{children}</ModalBody>}
+      {footer && <ModalFooter>{footer}</ModalFooter>}
+    </ModalRoot>
+  );
+});
+
+export interface ModalRootProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: ReactNode;
+  /** ESC 키 닫힘 차단. 중요한 확인/저장 중엔 true. */
+  disableEscape?: boolean;
+}
+
+export const ModalRoot = forwardRef<HTMLDivElement, ModalRootProps>(function ModalRoot(
+  { open, onOpenChange, children, disableEscape },
+  ref,
 ) {
   return (
     <RadixDialog.Root open={open} onOpenChange={onOpenChange}>
@@ -59,40 +100,80 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(
             e.preventDefault();
           }}
         >
-          <div className={styles.header}>
-            <div className={styles.headerText}>
-              <RadixDialog.Title
-                className={[styles.title, titleSrOnly && "visually-hidden"]
-                  .filter(Boolean)
-                  .join(" ")}
-              >
-                {title}
-              </RadixDialog.Title>
-              {description && (
-                <RadixDialog.Description className={styles.description}>
-                  {description}
-                </RadixDialog.Description>
-              )}
-            </div>
-            {dismissible && (
-              <RadixDialog.Close asChild>
-                <IconButton
-                  className={styles.close}
-                  variant="ghost"
-                  icon={<Icon name="x" />}
-                  aria-label={dismissLabel}
-                />
-              </RadixDialog.Close>
-            )}
-          </div>
-          {children !== undefined && children !== null && (
-            <div className={styles.body}>
-              <div className={styles.bodyInner}>{children}</div>
-            </div>
-          )}
-          {footer && <div className={styles.footer}>{footer}</div>}
+          {children}
         </RadixDialog.Content>
       </RadixDialog.Portal>
     </RadixDialog.Root>
   );
 });
+
+export interface ModalHeaderProps {
+  title: ReactNode;
+  description?: ReactNode;
+  titleSrOnly?: boolean;
+  dismissible?: boolean;
+  dismissLabel?: string;
+}
+
+export function ModalHeader({
+  title,
+  description,
+  titleSrOnly,
+  dismissible = true,
+  dismissLabel,
+}: ModalHeaderProps) {
+  return (
+    <div className={styles.header}>
+      <div className={styles.headerText}>
+        <RadixDialog.Title
+          className={[styles.title, titleSrOnly && "visually-hidden"]
+            .filter(Boolean)
+            .join(" ")}
+        >
+          {title}
+        </RadixDialog.Title>
+        {description && (
+          <RadixDialog.Description className={styles.description}>
+            {description}
+          </RadixDialog.Description>
+        )}
+      </div>
+      {dismissible && (
+        <RadixDialog.Close asChild>
+          <IconButton
+            className={styles.close}
+            variant="ghost"
+            icon={<Icon name="x" />}
+            aria-label={dismissLabel}
+          />
+        </RadixDialog.Close>
+      )}
+    </div>
+  );
+}
+
+export function ModalBody({ children }: { children: ReactNode }) {
+  return (
+    <div className={styles.body}>
+      <div className={styles.bodyInner}>{children}</div>
+    </div>
+  );
+}
+
+export function ModalFooter({ children }: { children: ReactNode }) {
+  return <div className={styles.footer}>{children}</div>;
+}
+
+type ModalCompound = typeof ModalComponent & {
+  Root: typeof ModalRoot;
+  Header: typeof ModalHeader;
+  Body: typeof ModalBody;
+  Footer: typeof ModalFooter;
+};
+
+export const Modal = Object.assign(ModalComponent, {
+  Root: ModalRoot,
+  Header: ModalHeader,
+  Body: ModalBody,
+  Footer: ModalFooter,
+}) as ModalCompound;

package/assets/components/Modal/index.ts

@@ -1,2 +1,12 @@
-export { Modal } from "./Modal";
-export type { ModalProps } from "./Modal";
+export {
+  Modal,
+  ModalRoot,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+} from "./Modal";
+export type {
+  ModalProps,
+  ModalRootProps,
+  ModalHeaderProps,
+} from "./Modal";

package/assets/components/Spinner/lottieManifest.ts

@@ -42,21 +42,21 @@ export const LOTTIE_MANIFEST: Record<LottieName, LottieManifestEntry> = {
     name: "rabbit",
     path: "/lottie/rabbit.json",
     colorBind: true,
-    visualScale: 1.6,
+    visualScale: 1.4,
     description: "뛰어가는 토끼. 긴 작업·AI 생성 대기",
   },
   infiniti: {
     name: "infiniti",
     path: "/lottie/infiniti.json",
     colorBind: true,
-    visualScale: 3.6,
+    visualScale: 3.2,
     description: "무한 루프 선. 네트워크·동기화",
   },
   dots: {
     name: "dots",
     path: "/lottie/dots.json",
     colorBind: true,
-    visualScale: 1.08,
+    visualScale: 0.95,
     offsetY: 0.025,
     description: "그라데이션 dot 흐름. 포인트 로더",
   },
@@ -64,35 +64,35 @@ export const LOTTIE_MANIFEST: Record<LottieName, LottieManifestEntry> = {
     name: "spinner",
     path: "/lottie/spinner.json",
     colorBind: true,
-    visualScale: 2.25,
+    visualScale: 2,
     description: "표준 라인 스피너",
   },
   clock: {
     name: "clock",
     path: "/lottie/clock.json",
     colorBind: true,
-    visualScale: 4.25,
+    visualScale: 3.8,
     description: "회전 시계 바늘. 처리 대기·타임아웃",
   },
   cosmos: {
     name: "cosmos",
     path: "/lottie/cosmos.json",
     colorBind: true,
-    visualScale: 1.35,
+    visualScale: 1.2,
     description: "그라데이션 궤도. 몽환적·온보딩",
   },
   "image-gen": {
     name: "image-gen",
     path: "/lottie/image-gen.json",
     colorBind: true,
-    visualScale: 1.25,
+    visualScale: 1.1,
     description: "이미지 생성 대기. AI 이미지",
   },
   "loading-square": {
     name: "loading-square",
     path: "/lottie/loading-square.json",
     colorBind: true,
-    visualScale: 3.9,
+    visualScale: 3.5,
     description: "회전하는 사각형. 미니멀 처리 대기",
   },
 };

package/assets/components/Switch/Switch.tsx

@@ -16,6 +16,12 @@ export type SwitchProps = Omit<
   "type" | "size"
 > & {
   size?: SwitchSize;
+  /**
+   * 토글 변경 콜백. 공식 API — 대부분의 경우 이걸 쓴다.
+   * 네이티브 `onChange`도 받아낼 수 있는데, 둘 다 쓰면 호출 순서는:
+   *   1) onChange(e) — 호출자가 e.preventDefault() 할 수 있는 escape hatch.
+   *   2) onChange가 preventDefault 하지 않으면 onCheckedChange(checked).
+   */
   onCheckedChange?: (checked: boolean) => void;
 };
 

package/assets/components/TableHeader/TableHeader.module.css

@@ -92,16 +92,18 @@
   background: var(--bg);
 }
 
-/* pinned 경계 — hairline으로 "고정 영역" 분리. TableRow와 짝. */
+/* pinned 경계 — hairline으로 "고정 영역" 분리. TableRow와 짝.
+   border 대신 inset box-shadow로 그어 sticky 레이어 subpixel 겹침(두 줄처럼
+   보이는 Chrome 렌더 현상) 회피 + 셀 폭에 영향 안 줌. */
 .cellSlot[data-pinned="left"] {
-  border-right: var(--hairline) solid var(--border);
+  box-shadow: inset calc(var(--hairline) * -1) 0 0 var(--border);
 }
 .cellSlot[data-pinned="right"] {
-  border-left: var(--hairline) solid var(--border);
+  box-shadow: inset var(--hairline) 0 0 var(--border);
 }
 
 .selectCell {
-  border-right: var(--hairline) solid var(--border);
+  box-shadow: inset calc(var(--hairline) * -1) 0 0 var(--border);
 }
 
 /* Cell (columnheader) ─────────────────────────────────────── */
@@ -210,6 +212,15 @@
   display: none;
 }
 
+/* pinned 경계 hairline과 tick(cellSlot 좌측 세로선) 겹침 방지.
+   - pinned-left 셀의 바로 다음 cellSlot: pinned의 border-right와 다음 셀의
+     tick이 바로 붙어 두 줄처럼 보이는 현상 제거.
+   - pinned-right 셀 자신: border-left와 자기 tick이 같은 지점에 겹침. */
+.cellSlot[data-pinned="left"] + .cellSlot .tick,
+.cellSlot[data-pinned="right"] .tick {
+  display: none;
+}
+
 /* Resize handle ──────────────────────────────────────────────
    히트 영역은 셀 우측 경계에 걸쳐 있는 투명 버튼. 시각 세로선은 안쪽 .resizeLine이
    담당하고, 라인은 handle 폭 안에서 "우측 끝"이 아니라 "중앙"에 위치 →
@@ -217,11 +228,10 @@
 .resizeHandle {
   position: absolute;
   top: 0;
-  /* handle 중심을 다음 세로 구분선 위치에 정확히 맞춤.
-     - 데이터 row의 세로선: 다음 cellSlot의 좌측 경계(= 현재 셀 우측 + cellSlot gap).
-     - handle 중심이 그 지점에 오도록: right = -(gap + handleWidth/2).
-     cellSlot gap은 TableRow의 column-gap(--space-1). */
-  right: calc((var(--space-1) * -1) - (var(--space-3) * 0.5));
+  /* handle 중심을 셀 우측 경계(= 데이터 row의 세로 구분선)에 정확히 맞춤.
+     TableRow는 cellSlot 사이 column-gap을 쓰지 않으므로 추가 보정 없음.
+     right = -(handleWidth/2). */
+  right: calc(var(--space-3) * -0.5);
   bottom: 0;
   width: var(--space-3);
   padding: 0;
@@ -241,36 +251,35 @@
   border-radius: var(--radius-xs);
 }
 
-/* 시각 세로선 — plate에서만 hover 시 표시. line은 자체 tick으로 대체하므로 숨김.
-   색은 border-strong(살짝 밝은 hairline 톤) — fg-subtle은 너무 진해서 데이터 색과 경쟁함. */
 /* 둥근 pill 핸들 — 선이 아니라 떠있는 그립 느낌.
-   폭은 좁고 세로로 길쭉한 캡슐, 연한 중성 톤에 그림자로 "집어들 수 있는" 어포던스. */
+   흰(bg) 캡슐에 연한 hairline + 연한 그림자로 "집어들 수 있는" 어포던스.
+   hover 전엔 숨겨두고, 셀 hover 때 opacity로 올려 보여줌. */
 .resizeLine {
   display: block;
-  width: var(--space-1);
-  height: 60%;
-  background: var(--border-strong);
+  width: calc(var(--space-1) * 1.25);
+  height: 48%;
+  background: var(--bg);
+  border: var(--hairline) solid var(--border);
   border-radius: var(--radius-full);
   opacity: 0;
   box-shadow: var(--shadow-xs);
   transition:
     opacity var(--duration-fast) var(--ease-out),
-    background var(--duration-fast) var(--ease-out),
     height var(--duration-fast) var(--ease-out),
     box-shadow var(--duration-fast) var(--ease-out);
 }
 
 /* 셀 전체 hover: pill 연하게 노출. */
 .cell:hover .resizeLine {
-  opacity: 0.6;
+  opacity: 0.7;
 }
 
-/* handle hover/active: 더 또렷하게 + 길어지고 shadow 깊어짐 — "집은 상태". */
+/* handle hover/active: 또렷하게 + 길어지고 그림자 깊어짐 — "집은 상태".
+   색/스트로크는 유지, 변하는 건 opacity·height·shadow 뿐. */
 .resizeHandle:hover .resizeLine,
 .resizeHandle:active .resizeLine {
   opacity: 1;
-  background: var(--fg-muted);
-  height: 80%;
+  height: 64%;
   box-shadow: var(--shadow-sm);
 }
 

package/assets/components/TableRow/TableRow.module.css

@@ -146,18 +146,20 @@ a.root:not(.disabled):focus-visible,
 }
 
 /* pinned 경계 — scroll shadow 대신 상시 hairline으로 "여기까지 고정 영역"을 분명히.
-   좌측 pinned → 우측 경계에 세로 hairline. 우측 pinned → 좌측 경계. */
+   좌측 pinned → 우측 경계, 우측 pinned → 좌측 경계.
+   border 대신 inset box-shadow로 그어 sticky 레이어 subpixel 겹침(두 줄처럼
+   보이는 Chrome 렌더 현상) 회피 + 셀 폭에 영향 안 줌. */
 .cellSlot[data-pinned="left"] {
-  border-right: var(--hairline) solid var(--border);
+  box-shadow: inset calc(var(--hairline) * -1) 0 0 var(--border);
 }
 .cellSlot[data-pinned="right"] {
-  border-left: var(--hairline) solid var(--border);
+  box-shadow: inset var(--hairline) 0 0 var(--border);
 }
 
 /* selectable + pinned 조합일 때 selectCell이 "실질적 좌측 pinned의 선두" 역할이라
-   selectCell에도 우측 hairline을 그어 경계 톤 일치. */
+   selectCell에도 우측 경계를 그어 톤 일치. */
 .selectCell {
-  border-right: var(--hairline) solid var(--border);
+  box-shadow: inset calc(var(--hairline) * -1) 0 0 var(--border);
 }
 
 /* ── Cell ───────────────────────────────────────────────

package/assets/components/TableRowEdit/TableRowEdit.module.css

@@ -63,6 +63,7 @@
   pointer-events: none;
 }
 
+
 /* ── Edit cell ────────────────────────────────────────────
    클릭/포커스 타겟. 활성 상태엔 input/select가 셀을 꽉 채움. */
 .editCell {
@@ -102,11 +103,17 @@
   left: 0;
   right: 0;
   /* 1줄 상태엔 셀 높이에 딱 맞도록 min-height: 100%. textarea autosize가
-     여러 줄로 늘어나면 host는 content 높이를 따라감(아래로 확장). */
+     여러 줄로 늘어나면 host 자체가 scroll 컨테이너가 되고(max-height 도달 시),
+     textarea 전체(자기 padding 포함)가 host 안에서 위로 올라감 → 상·하 padding이
+     scroll content의 일부라 host border에서 자연스레 clip, 안쪽 여백 항상 보존.
+     scroll.md "textarea 특수 패턴" 규약. padding은 textarea가 책임. */
   min-height: 100%;
+  /* 3.5줄 × line-height + 상·하 padding(space-2 각각) — 그 이상은 host가 scroll. */
+  max-height: calc(var(--lh-sm) * 3.5 + var(--space-2) * 2);
   display: flex;
-  align-items: center;
-  padding-inline: var(--space-2);
+  align-items: stretch;
+  padding: 0;
+  overflow-y: auto;
   background: var(--bg);
   border: var(--hairline) solid var(--border-strong);
   border-radius: var(--radius-sm);

package/assets/components/TableRowEdit/TableRowEdit.tsx

@@ -179,8 +179,13 @@ function TableRowEditInner<T>(
         /* 세로 구분선은 editable 여부와 무관하게 모든 셀 사이에 균일하게.
            엑셀 톤 "셀 그리드" 신호는 일관성이 핵심 — read-only 셀만 선이 빠지면
            리듬이 깨져 보임. 첫 데이터 셀은 왼쪽에 선 없음(테이블 외곽).
-           selectable이면 체크박스 ↔ 첫 데이터 셀 사이에도 선. */
-        const showLeftDivider = idx > 0 || selectable;
+           selectable이면 체크박스 ↔ 첫 데이터 셀 사이에도 선.
+           pinned 경계는 cellSlot box-shadow가 담당 — pinned-right 셀 자신과
+           pinned-left 바로 다음 셀의 왼쪽 divider는 그으면 두 줄로 겹쳐 보임. */
+        const prevCol = idx > 0 ? columnMap.get(orderedKeys[idx - 1]) : undefined;
+        const skipDivider =
+          col.pinned === "right" || prevCol?.pinned === "left";
+        const showLeftDivider = (idx > 0 || selectable) && !skipDivider;
         return (
           <div
             key={col.key}

package/assets/components/Toast/Toast.tsx

@@ -27,7 +27,12 @@ export interface ToastOptions {
   tone?: ToastTone;
   surface?: ToastSurface;
   icon?: IconName;
+  /** 액션 요소(Button 등). `actionAltText`도 함께 넘겨야 렌더링된다 — 스크린리더용 라벨이 없으면 Radix가 action을 숨긴다. */
   action?: ReactNode;
+  /**
+   * action을 쓸 때 **필수** — 스크린리더가 action 버튼을 어떻게 안내할지. Toast 사라져도
+   * 사용자가 수행할 수 있는 대안 설명(예: "실행 취소", "설정 열기"). 생략 시 action 미렌더.
+   */
   actionAltText?: string;
   dismissible?: boolean;
   dismissLabel?: string;
@@ -227,6 +232,9 @@ export const Toast = forwardRef<HTMLLIElement, ToastProps>(function Toast(
           {action}
         </RadixToast.Action>
       )}
+      {action && !actionAltText && typeof window !== "undefined" && process.env.NODE_ENV !== "production" && (
+        <ToastActionWarning />
+      )}
       {dismissible && (
         <RadixToast.Close asChild>
           <IconButton
@@ -241,3 +249,14 @@ export const Toast = forwardRef<HTMLLIElement, ToastProps>(function Toast(
     </RadixToast.Root>
   );
 });
+
+/** dev-only. action은 주고 actionAltText를 빠뜨리면 Radix가 조용히 숨기므로 console로 경고. */
+function ToastActionWarning() {
+  if (typeof window !== "undefined") {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "[CTDS Toast] `action` prop을 넘겼는데 `actionAltText`가 비어있어요. 스크린리더용 라벨이 없으면 action이 렌더되지 않습니다.",
+    );
+  }
+  return null;
+}

package/assets/components/_data.ts

@@ -585,7 +585,6 @@ export const componentSlugs: Record<string, string> = {
   "Table Row": "data/table-row",
   "Table Row Select": "data/table-row-select",
   "Table Row Edit": "data/table-row-edit",
-  Calendar: "data/calendar",
   "Event Chip": "data/event-chip",
   "List Item": "data/list-item",
   "Metric Card": "data/metric-card",
@@ -595,7 +594,7 @@ export const componentSlugs: Record<string, string> = {
   Spinner: "feedback/spinner",
   "File Icon": "chat/file-icon",
   "Attachment Thumb": "chat/attachment-thumb",
-  "Attachment Chip": "chat/attachment-chip",
+  "Attachment Item": "data/attachment-item",
   "Quotation Bar": "chat/quotation-bar",
   "Chat Input": "chat/chat-input",
   "Bubble": "chat/bubble",
@@ -607,14 +606,13 @@ export const componentSlugs: Record<string, string> = {
   "Message Sources": "chat/message-sources",
   "Message Table": "chat/message-table",
   "Message State": "chat/message-state",
-  "Message Attachment": "chat/message-attachment",
+  "Generated Image": "chat/generated-image",
 };
 
-/** 작업중 — 사이드바에서 접근은 가능하지만 "작업중" 뱃지로 표시해 사용 자제 유도. */
-export const componentsInProgress: Set<string> = new Set([
-  "Drawer",
-  "Calendar",
-]);
+/** 작업중 — 사이드바에서 "작업중" 뱃지로 표시되고,
+ *  외부에서 import하면 pre-commit 훅(scripts/lint-wip.mjs)이 차단한다.
+ *  문서 라우트(web/app/components/**)와 컴포넌트 자신의 폴더는 허용. */
+export const componentsInProgress: Set<string> = new Set([]);
 
 export const components: { id: string; title: string; items: string[] }[] = [
   {
@@ -623,6 +621,7 @@ export const components: { id: string; title: string; items: string[] }[] = [
     items: [
       "Button", "Split Button", "Icon Button", "Menu Item", "Toolbar", "Badge", "Avatar",
       "Tooltip", "Shortcut", "Filter Button", "Chip", "Separator", "Skeleton", "Aspect Ratio",
+      "Code Block",
     ],
   },
   {
@@ -632,7 +631,7 @@ export const components: { id: string; title: string; items: string[] }[] = [
       "Input", "Input OTP", "Textarea", "Select", "Combobox", "Multi-Select",
       "Checkbox", "Radio Group", "Selectable Card", "Choice Card", "Switch", "Slider",
       "Date Picker", "Time Picker",
-      "File Upload", "Form",
+      "File Upload",
     ],
   },
   {
@@ -640,7 +639,7 @@ export const components: { id: string; title: string; items: string[] }[] = [
     title: "Data Display",
     items: [
       "Table Header", "Table Row", "Table Row Select", "Table Row Edit",
-      "List Item", "Metric Card", "Gallery Item", "Calendar", "Event Chip",
+      "List Item", "Metric Card", "Gallery Item", "Attachment Item", "Event Chip",
       "Empty State", "Description List", "Timeline",
     ],
   },
@@ -669,13 +668,37 @@ export const components: { id: string; title: string; items: string[] }[] = [
     ],
   },
   {
-    id: "chat",
-    title: "AI Chat",
+    id: "chat-input",
+    title: "AI Chat / 입력",
+    items: [
+      "Chat Input", "Quotation Bar",
+    ],
+  },
+  {
+    id: "chat-attachment",
+    title: "AI Chat / 첨부",
+    items: [
+      "File Icon", "Attachment Thumb", "Generated Image",
+    ],
+  },
+  {
+    id: "chat-message",
+    title: "AI Chat / 메시지",
+    items: [
+      "Bubble", "User Message", "AI Message", "Message State", "Message Actions",
+    ],
+  },
+  {
+    id: "chat-content",
+    title: "AI Chat / 메시지 콘텐츠",
+    items: [
+      "Message Quote", "Message Sources", "Message Table",
+    ],
+  },
+  {
+    id: "chat-shell",
+    title: "AI Chat / 쉘",
     items: [
-      "File Icon", "Attachment Thumb", "Attachment Chip", "Quotation Bar", "Chat Input",
-      "Bubble", "Message Actions", "User Message", "AI Message",
-      "Code Block", "Message Quote", "Message Sources", "Message Table", "Message State",
-      "Message Attachment",
       "Chat Sidebar",
     ],
   },

package/assets/components/app-shell.css

@@ -0,0 +1,17 @@
+/* ============================================================
+   CTDS app-shell — opt-in. AppFrame(100dvh overflow:hidden)을 쓰는
+   "앱 셸" 레이아웃 전제 스타일. 소비자 프로젝트가 일반 body-scroll
+   페이지라면 이 파일을 import하지 않는다. 데모 앱(web/app/globals.css)
+   과 ctds-cli init이 복사하는 앱 템플릿만 사용.
+
+   app-scroll 패러다임: AppFrame이 뷰포트 100dvh를 꽉 채우고 자기 overflow:hidden,
+   스크롤은 AppFrame 안의 .contentSlot만 담당 — html/body는 스크롤할 필요가 없다.
+   overflow:hidden으로 바깥 러버밴드/스크롤 체이닝 자체를 차단.
+   ============================================================ */
+
+html,
+body {
+  height: 100%;
+  overflow: hidden;
+  overscroll-behavior: none;
+}