temp

packages/site-home/lib/main.css

@@ -6,15 +6,24 @@
   flex-direction: column;
   overflow: hidden;
   padding-bottom: 140px;
-  padding-top: var(--base-size-112);
+  padding-top: var(--base-size-64);
+
+  @media (--size-viewport-width-large) {
+    padding-top: var(--base-size-112);
+  }
 }
 
 .home__hero {
   margin-left: auto;
   margin-right: auto;
   max-width: var(--temp-home-breakpoint-xlarge);
+  padding-inline: var(--base-size-24);
   text-align: center;
   width: 100%;
+
+  @media (--size-viewport-width-medium) {
+    padding-inline: var(--base-size-32);
+  }
 }
 
 .home__hero h1 {
@@ -27,7 +36,9 @@
 }
 
 .home__hero + .home__part {
-  margin-top: 100px;
+  @media (--size-viewport-width-large) {
+    margin-top: 100px;
+  }
 }
 
 .home__part {
@@ -37,7 +48,7 @@
   justify-content: space-between;
   margin-left: auto;
   margin-right: auto;
-  margin-top: 32px;
+  margin-top: var(--base-size-32);
   max-width: var(--temp-home-breakpoint-xlarge);
   width: 100%;
 
@@ -53,10 +64,13 @@
 }
 
 .home__part::after {
-  content: "";
   display: block;
   grid-column: 1;
   grid-row: 3;
+
+  @media (--size-viewport-width-large) {
+    content: "";
+  }
 }
 
 .home__part_reverse {
@@ -288,14 +302,37 @@
 
 /* Integration with @onlyoffice/site-search */
 
-.home__hero search-container {
-  display: block;
+.home__hero .search {
   margin-left: auto;
   margin-right: auto;
   margin-top: var(--base-size-48);
 }
 
-.home__hero .search {
+.home__hero .search .text-input {
+  --text-input-size-is-default: var(--false);
+  --text-input-size-is-small: var(--false);
+  --text-input-size-is-medium: var(--false);
+  --text-input-size-is-large: var(--true);
+  --text-input-size-is-xlarge: var(--false);
+
+  font-size: var(--text-body-font-size-medium);
+  line-height: var(--text-body-line-height-medium);
   max-width: 736px;
   width: 100%;
+
+  @media (--size-viewport-width-large) {
+    --text-input-size-is-default: var(--false);
+    --text-input-size-is-small: var(--false);
+    --text-input-size-is-medium: var(--false);
+    --text-input-size-is-large: var(--false);
+    --text-input-size-is-xlarge: var(--true);
+
+    font-size: var(--text-body-font-size-large);
+    line-height: var(--text-body-line-height-large);
+  }
+}
+
+.home__hero .search .text-input svg {
+  width: 1.25em;
+  height: 1.25em;
 }

packages/site-home/lib/main.story.tsx

@@ -13,7 +13,7 @@ export function Default(): JSX.Element {
   return <Home>
     <HomeHero>
       <h1>Welcome to ONLYOFFICE API</h1>
-      <SearchStory size="large" />
+      <SearchStory />
     </HomeHero>
     <HomePart>
       <HomeIn>

packages/site-page/lib/main.css

@@ -17,19 +17,21 @@
   grid-template-rows: min-content 1fr min-content;
   min-height: 100vh;
 
-  @media (--size-viewport-width-large) {
-    --temp-page-header-height: 72px;
+  @media (--size-viewport-width-medium) {
     --page-header-logo-padding-inline: var(--base-size-32);
     --page-header-menu-padding-inline: var(--base-size-40);
   }
+
+  @media (--size-viewport-width-large) {
+    --temp-page-header-height: 72px;
+  }
 }
 
 .page__header {
   background-color: var(--color-page-header-default-background);
   border-bottom-color: var(--color-page-header-default-border);
   border-bottom-style: solid;
   border-bottom-width: var(--page-header-border-width);
-  color: var(--color-page-header-default-foreground);
   position: sticky;
   top: 0;
   z-index: 2;

packages/site-search/lib/main.css

@@ -1,56 +1,23 @@
 .search {
-  align-items: center;
-  background-color: var(--color-background-default);
-  border-color: var(--color-control-default-border-rest);
-  border-radius: var(--size-border-radius-small);
-  border-style: solid;
-  border-width: var(--size-border-width-thin);
-  column-gap: var(--size-control-gap-medium);
-  display: inline-grid;
-  font-size: var(--text-body-font-size-small);
-  grid-template-columns: min-content 1fr;
-  line-height: var(--text-body-line-height-small);
-  min-width: 264px;
-  padding-block: var(--size-control-padding-block-medium);
-  padding-inline: var(--size-control-padding-inline-medium);
-  text-align: start;
+  display: block;
 }
 
-.search_large {
+/* .search_large {
   font-size: 16px;
   padding: 20px 22px;
-}
+} */
 
-search-container[filled] .search {
-  grid-template-columns: min-content 1fr min-content;
-}
-
-search-container[focused] .search {
-  border-color: transparent;
-  outline-color: var(--color-focus-default-outline);
-  outline-offset: calc(var(--size-border-width-thin) * -1);
-  outline-style: solid;
-  outline-width: var(--side-outline-width-default);
+.search .text-input {
+  background-color: var(--color-background-default);
+  /* font-size: var(--text-body-font-size-small); */
+  /* line-height: var(--text-body-line-height-small); */
 }
 
-.search__glass {
+/* .search .text-input__leading {
   color: var(--color-foreground-muted);
-  display: block;
-  grid-column: 1;
-  grid-row: 1;
-}
-
-.search__placeholder {
-  grid-column: 2;
-  grid-row: 1;
-}
+} */
 
-search-container[filled] .search__placeholder,
-search-container[focused] .search__placeholder {
-  display: none;
-}
-
-.search__placeholder kbd {
+.search .text-input__placeholder kbd {
   border-color: var(--color-control-default-border-rest);
   border-radius: var(--size-border-radius-small);
   border-style: solid;
@@ -59,40 +26,11 @@ search-container[focused] .search__placeholder {
   padding: 0.2em;
 }
 
-.search input[name="q"] {
-  appearance: textfield;
-  background-color: transparent;
-  border: none;
-  grid-column: 2;
-  grid-row: 1;
-  min-width: 0;
-  padding: 0;
-}
-
-.search input[name="q"]:focus {
-  outline: none;
-}
-
-.search input[name="q"]::-webkit-search-cancel-button {
-  -webkit-appearance: none;
-}
-
-.search__clear {
-  background-color: transparent;
-  border: none;
-  color: var(--color-foreground-muted);
-  cursor: pointer;
+.search .text-input__trailing button {
   display: none;
-  grid-column: 3;
-  grid-row: 1;
-  padding: 0;
-}
-
-search-container[filled] .search__clear {
-  display: block;
 }
 
-.search__clear svg {
+.search .text-input[state-filled] .text-input__trailing button,
+.search .text-input:state(filled) .text-input__trailing button {
   display: block;
-  pointer-events: none;
 }

packages/site-search/lib/main.tsx

@@ -2,49 +2,58 @@ import {type PagefindSearchOptions} from "@onlyoffice/pagefind-types"
 import {type ChildrenIncludable} from "@onlyoffice/preact-types"
 import {useSlots} from "@onlyoffice/preact-slots"
 import {CancelIcon, MagnifyingGlassIcon} from "@onlyoffice/ui-icons/poor/24.tsx"
-import {Template} from "@onlyoffice/ui-kit"
+import {
+  Template,
+  TextInput,
+  TextInputAction,
+  TextInputControl,
+  TextInputLeading,
+  TextInputPlaceholder,
+  TextInputTrailing,
+} from "@onlyoffice/ui-kit"
 import {type JSX, h} from "preact"
 
 export interface SearchContainerProperties extends ChildrenIncludable {
   "search-options"?: PagefindSearchOptions
-  "size"?: "default" | "large"
 }
 
 export function SearchContainer(p: SearchContainerProperties): JSX.Element {
   const [slots] = useSlots(p.children, {
     placeholder: SearchPlaceholder,
     field: SearchField,
     clear: SearchClear,
-    template: SearchTemplate
+    template: SearchTemplate,
   })
 
   const o: Record<string, string> = {}
   if (p["search-options"]) {
     o["search-options"] = JSON.stringify(p["search-options"])
   }
 
-  return <search-container {...o}>
-    <form class={cls()} id="search" action="https://duckduckgo.com/" method="get">
-      <MagnifyingGlassIcon class="search__glass" width={18} height={18} />
-      {slots.placeholder}
-      {slots.field}
-      <input name="sites" aria-hidden="true" hidden />
-      {slots.clear}
+  return <search-container class="search" {...o}>
+    <form id="search" action="https://duckduckgo.com/" method="get">
+      <TextInput>
+        <TextInputLeading>
+          <MagnifyingGlassIcon class="search__glass" />
+        </TextInputLeading>
+        <TextInputPlaceholder>
+          {slots.placeholder}
+        </TextInputPlaceholder>
+        <TextInputControl>
+          {slots.field}
+        </TextInputControl>
+        <TextInputTrailing>
+          <TextInputAction>
+            {slots.clear}
+          </TextInputAction>
+        </TextInputTrailing>
+      </TextInput>
     </form>
-    {slots.template}
   </search-container>
-
-  function cls(): string {
-    let s = "search"
-    if (p.size === "large") {
-      s += " search_large"
-    }
-    return s
-  }
 }
 
 export function SearchPlaceholder({children}: ChildrenIncludable): JSX.Element {
-  return <span class="search__placeholder">{children}</span>
+  return children
 }
 
 export interface SearchFieldProperties {
@@ -60,7 +69,7 @@ export interface SearchClearProperties {
 }
 
 export function SearchClear({label}: SearchClearProperties): JSX.Element {
-  return <button class="search__clear" type="button" value="clear" aria-label={label}>
+  return <button type="button" value="clear" aria-label={label}>
     <CancelIcon width={16} height={16} />
   </button>
 }

packages/ui-kit/lib/client.ts

@@ -1,3 +1,4 @@
+import "@onlyoffice/ui-text-input/client.ts"
 import "@onlyoffice/ui-code-listing/client.ts"
 import "@onlyoffice/ui-select/client.ts"
 import "@onlyoffice/ui-content/client.ts"

packages/ui-kit/lib/main.css

@@ -2,6 +2,7 @@
 @import "../node_modules/@onlyoffice/ui-primitives/dist/main.css";
 
 @import "../node_modules/@onlyoffice/ui-sr-only/lib/main.css";
+@import "../node_modules/@onlyoffice/ui-text-input/lib/main.css";
 @import "../node_modules/@onlyoffice/ui-form-control/lib/main.css";
 @import "../node_modules/@onlyoffice/ui-select/lib/main.css";
 @import "../node_modules/@onlyoffice/ui-button/lib/main.css";

packages/ui-kit/lib/main.ts

@@ -11,3 +11,4 @@ export * from "@onlyoffice/ui-logos"
 export * from "@onlyoffice/ui-select"
 export * from "@onlyoffice/ui-sr-only"
 export * from "@onlyoffice/ui-template"
+export * from "@onlyoffice/ui-text-input"

packages/ui-kit/package.json

@@ -28,6 +28,7 @@
     "@onlyoffice/ui-select": "workspace:^",
     "@onlyoffice/ui-sr-only": "workspace:^",
     "@onlyoffice/ui-template": "workspace:^",
+    "@onlyoffice/ui-text-input": "workspace:^",
     "preact": "^10.22.0",
     "typescript": "^5.4.5"
   }

packages/ui-primitives/lib/main.css

@@ -143,12 +143,18 @@
   /* prefix: size, variant: control, property: padding-block */
   --size-control-padding-block-small: var(--base-size-4);
   --size-control-padding-block-medium: var(--base-size-8);
+  --size-control-padding-block-large: var(--base-size-12);
+  --size-control-padding-block-xlarge: var(--base-size-16);
 
   /* prefix: size, variant: control, property: padding-inline */
   --size-control-padding-inline-small: var(--base-size-12);
   --size-control-padding-inline-medium: var(--base-size-12);
+  --size-control-padding-inline-large: var(--base-size-16);
+  --size-control-padding-inline-xlarge: var(--base-size-20);
 
   /* prefix: size, variant: control, property: gap */
   --size-control-gap-small: var(--base-size-4);
   --size-control-gap-medium: var(--base-size-8);
+  --size-control-gap-large: var(--base-size-12);
+  --size-control-gap-xlarge: var(--base-size-16);
 }

packages/ui-text-input/index.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/ui-text-input/lib/client.ts

@@ -0,0 +1,4 @@
+import {define} from "./client/define.ts"
+export * from "./client/element.ts"
+
+define()