New data table

apps/kitchensink/main.css

@@ -63,7 +63,7 @@
 
 #main {
   min-block-size: 100vh;
-  min-block-size: 100lvh;
+  min-block-size: 100dvh;
 }
 
 #settings-aside {

apps/kitchensink/partials/topNav.hbs

@@ -1,10 +1,12 @@
-<header class="main-header u-padding-inline-end-0">
+<header class="main-header">
     <button id="menuButton" class="icon-button is-not-desktop u-position-relative u-padding-inline-8" aria-label="Open Menu">
         <span class="icon-menu" aria-hidden="true"></span>
         <span class="notification u-position-absolute u-inset-block-start-0 u-inset-inline-end-4"></span>
     </button>
     <a class="logo">
-        <img src="/images/appwrite-gray-light.svg" width="132" height="34" alt="Appwrite">
+        <!--<img src="/images/appwrite-gray-light.svg" width="132" height="34" alt="Appwrite">-->
+        <img class="u-only-light" src="data:image/svg+xml,%3csvg%20width='160'%20height='29'%20viewBox='0%200%20160%2029'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M46.7351%2023.5567C49.352%2023.5567%2050.6748%2022.2115%2051.25%2021.2957H51.5088C51.6238%2022.2688%2052.314%2023.1846%2053.6656%2023.1846H56.2249V20.3226H55.5635C55.1034%2020.3226%2054.8734%2020.065%2054.8734%2019.6643V8.18751H51.48V10.0192H51.2212C50.5598%209.10336%2049.1794%207.81544%2046.6488%207.81544C42.6228%207.81544%2039.6321%2011.1354%2039.6321%2015.6861C39.6321%2020.2367%2042.6803%2023.5567%2046.7351%2023.5567ZM47.339%2020.294C44.9522%2020.294%2043.0829%2018.5481%2043.0829%2015.7147C43.0829%2012.9385%2044.8946%2011.0496%2047.3102%2011.0496C49.6108%2011.0496%2051.5375%2012.7382%2051.5375%2015.7147C51.5375%2018.2619%2049.8984%2020.294%2047.339%2020.294Z'%20fill='%2319191D'/%3e%3cpath%20d='M58.2284%2029H61.6217V21.2957H61.8805C62.5132%2022.2115%2063.8648%2023.5567%2066.5392%2023.5567C70.5652%2023.5567%2073.4984%2020.1795%2073.4984%2015.6861C73.4984%2011.164%2070.3639%207.81544%2066.3091%207.81544C63.721%207.81544%2062.4557%209.21785%2061.8518%209.9906H61.593V8.18751H58.2284V29ZM65.8203%2020.3798C63.4909%2020.3798%2061.5642%2018.6626%2061.5642%2015.6861C61.5642%2013.1389%2063.2034%2010.9923%2065.7628%2010.9923C68.1496%2010.9923%2070.0188%2012.8526%2070.0188%2015.6861C70.0188%2018.4623%2068.2071%2020.3798%2065.8203%2020.3798Z'%20fill='%2319191D'/%3e%3cpath%20d='M75.2494%2029H78.6428V21.2957H78.9016C79.5342%2022.2115%2080.8858%2023.5567%2083.5602%2023.5567C87.5862%2023.5567%2090.2399%2020.1795%2090.2399%2015.6861C90.2399%2011.164%2087.3849%207.81544%2083.3302%207.81544C80.742%207.81544%2079.4767%209.21785%2078.8728%209.9906H78.614V8.18751H75.2494V29ZM82.8413%2020.3798C80.512%2020.3798%2078.5852%2018.6626%2078.5852%2015.6861C78.5852%2013.1389%2080.2244%2010.9923%2082.7838%2010.9923C85.1706%2010.9923%2087.0398%2012.8526%2087.0398%2015.6861C87.0398%2018.4623%2085.2281%2020.3798%2082.8413%2020.3798Z'%20fill='%2319191D'/%3e%3cpath%20d='M94.7255%2023.5329H99.528L102.26%2011.7699H102.432L105.164%2023.5329H109.938L113.761%208.53576H110.341L107.609%2020.3274H107.35L104.618%208.53576H100.103L97.3424%2020.3274H97.0836L94.3804%208.53576H90.757L94.7255%2023.5329Z'%20fill='%2319191D'/%3e%3cpath%20d='M115.48%2023.5329H118.873V16.1202C118.873%2013.2868%20120.196%2011.5409%20122.669%2011.5409H124.164V8.1637H123.043C121.116%208.1637%20119.65%209.48024%20119.074%2010.7395H118.844V8.53576H115.48V23.5329Z'%20fill='%2319191D'/%3e%3cpath%20d='M141.004%2023.5329H143.65V20.5277H141.033C139.997%2020.5277%20139.566%2020.0698%20139.566%2019.0109V11.5123H143.822V8.53576H139.566V4.32855H136.345V8.53576H133.527V11.5123H136.144V19.0395C136.144%2022.2164%20138.071%2023.5329%20141.004%2023.5329Z'%20fill='%2319191D'/%3e%3cpath%20d='M152.753%2023.5567C155.888%2023.5567%20158.649%2022.0112%20159.626%2018.8916L156.521%2018.1474C155.974%2019.8074%20154.392%2020.666%20152.725%2020.666C150.251%2020.666%20148.612%2019.0633%20148.584%2016.5447H160V15.6002C160%2011.1354%20157.211%207.81544%20152.61%207.81544C148.555%207.81544%20145.075%2010.9923%20145.075%2015.7147C145.075%2020.294%20148.152%2023.5567%20152.753%2023.5567ZM148.612%2014.0833C148.814%2012.2802%20150.453%2010.7634%20152.61%2010.7634C154.68%2010.7634%20156.377%2012.0513%20156.549%2014.0833H148.612Z'%20fill='%2319191D'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M132.018%2023.5329H128.625V11.5123H125.979V8.53576H132.018V23.5329Z'%20fill='%2319191D'/%3e%3cpath%20d='M130.069%206.45459C131.306%206.45459%20132.226%205.53873%20132.226%204.33667C132.226%203.16323%20131.306%202.24738%20130.069%202.24738C128.833%202.24738%20127.912%203.16323%20127.912%204.33667C127.912%205.53873%20128.833%206.45459%20130.069%206.45459Z'%20fill='%2319191D'/%3e%3cpath%20d='M29.6277%2019.8556V26.4741H13.0326C8.19779%2026.4741%203.97629%2023.8122%201.71769%2019.8556C1.38936%2019.2803%201.10198%2018.6769%200.860926%2018.0505C0.387713%2016.8231%200.0902487%2015.506%200%2014.1317V12.3423C0.0195935%2012.0361%200.050468%2011.7322%200.0908425%2011.432C0.173373%2010.8159%200.298058%2010.213%200.461931%209.62693C2.01219%204.07099%207.05306%200%2013.0326%200C19.0122%200%2024.0525%204.07099%2025.6027%209.62693H18.5069C17.342%207.81587%2015.3257%206.61852%2013.0326%206.61852C10.7396%206.61852%208.72326%207.81587%207.55833%209.62693C7.20328%2010.1775%206.92778%2010.7846%206.74728%2011.432C6.58697%2012.006%206.50147%2012.6113%206.50147%2013.237C6.50147%2015.1341%207.28877%2016.8441%208.55107%2018.0505C9.72074%2019.1702%2011.2977%2019.8556%2013.0326%2019.8556H29.6277Z'%20fill='%23FD366E'/%3e%3cpath%20d='M29.6277%2011.432V18.0505H17.5142C18.7765%2016.8442%2019.5638%2015.1342%2019.5638%2013.2371C19.5638%2012.6113%2019.4783%2012.006%2019.3179%2011.432H29.6277Z'%20fill='%23FD366E'/%3e%3c/svg%3e" width="120" height="22" alt="Appwrite">
+        <img class="u-only-dark" src="data:image/svg+xml,%3csvg%20width='160'%20height='29'%20viewBox='0%200%20160%2029'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M46.7348%2023.5568C49.3517%2023.5568%2050.6746%2022.2116%2051.2497%2021.2957H51.5085C51.6236%2022.2688%2052.3137%2023.1847%2053.6653%2023.1847H56.2247V20.3226H55.5633C55.1032%2020.3226%2054.8731%2020.0651%2054.8731%2019.6644V8.18757H51.4798V10.0193H51.221C50.5595%209.10343%2049.1792%207.8155%2046.6486%207.8155C42.6226%207.8155%2039.6318%2011.1355%2039.6318%2015.6861C39.6318%2020.2368%2042.6801%2023.5568%2046.7348%2023.5568ZM47.3387%2020.294C44.9519%2020.294%2043.0827%2018.5482%2043.0827%2015.7148C43.0827%2012.9386%2044.8944%2011.0496%2047.31%2011.0496C49.6106%2011.0496%2051.5373%2012.7382%2051.5373%2015.7148C51.5373%2018.262%2049.8981%2020.294%2047.3387%2020.294Z'%20fill='%23EDEDF0'/%3e%3cpath%20d='M58.2281%2029H61.6215V21.2957H61.8803C62.513%2022.2116%2063.8645%2023.5568%2066.539%2023.5568C70.565%2023.5568%2073.4982%2020.1796%2073.4982%2015.6861C73.4982%2011.1641%2070.3637%207.8155%2066.3089%207.8155C63.7208%207.8155%2062.4554%209.21791%2061.8515%209.99066H61.5927V8.18757H58.2281V29ZM65.82%2020.3799C63.4907%2020.3799%2061.564%2018.6627%2061.564%2015.6861C61.564%2013.1389%2063.2031%2010.9924%2065.7625%2010.9924C68.1494%2010.9924%2070.0186%2012.8527%2070.0186%2015.6861C70.0186%2018.4623%2068.2069%2020.3799%2065.82%2020.3799Z'%20fill='%23EDEDF0'/%3e%3cpath%20d='M75.2492%2029H78.6425V21.2957H78.9013C79.534%2022.2116%2080.8856%2023.5568%2083.56%2023.5568C87.586%2023.5568%2090.2396%2020.1796%2090.2396%2015.6861C90.2396%2011.1641%2087.3847%207.8155%2083.3299%207.8155C80.7418%207.8155%2079.4765%209.21791%2078.8726%209.99066H78.6137V8.18757H75.2492V29ZM82.841%2020.3799C80.5117%2020.3799%2078.585%2018.6627%2078.585%2015.6861C78.585%2013.1389%2080.2242%2010.9924%2082.7835%2010.9924C85.1704%2010.9924%2087.0396%2012.8527%2087.0396%2015.6861C87.0396%2018.4623%2085.2279%2020.3799%2082.841%2020.3799Z'%20fill='%23EDEDF0'/%3e%3cpath%20d='M94.7253%2023.5329H99.5277L102.26%2011.7699H102.432L105.164%2023.5329H109.938L113.76%208.53582H110.34L107.608%2020.3275H107.35L104.618%208.53582H100.103L97.3422%2020.3275H97.0834L94.3802%208.53582H90.7568L94.7253%2023.5329Z'%20fill='%23EDEDF0'/%3e%3cpath%20d='M115.48%2023.5329H118.873V16.1202C118.873%2013.2868%20120.196%2011.541%20122.669%2011.541H124.164V8.16376H123.043C121.116%208.16376%20119.649%209.4803%20119.074%2010.7396H118.844V8.53582H115.48V23.5329Z'%20fill='%23EDEDF0'/%3e%3cpath%20d='M141.004%2023.5329H143.649V20.5278H141.032C139.997%2020.5278%20139.566%2020.0699%20139.566%2019.0109V11.5124H143.822V8.53582H139.566V4.32861H136.345V8.53582H133.527V11.5124H136.144V19.0395C136.144%2022.2164%20138.07%2023.5329%20141.004%2023.5329Z'%20fill='%23EDEDF0'/%3e%3cpath%20d='M152.753%2023.5568C155.888%2023.5568%20158.648%2022.0113%20159.626%2018.8916L156.52%2018.1475C155.974%2019.8075%20154.392%2020.6661%20152.724%2020.6661C150.251%2020.6661%20148.612%2019.0634%20148.583%2016.5447H160V15.6003C160%2011.1355%20157.21%207.8155%20152.609%207.8155C148.555%207.8155%20145.075%2010.9924%20145.075%2015.7148C145.075%2020.294%20148.152%2023.5568%20152.753%2023.5568ZM148.612%2014.0834C148.813%2012.2803%20150.452%2010.7634%20152.609%2010.7634C154.68%2010.7634%20156.376%2012.0513%20156.549%2014.0834H148.612Z'%20fill='%23EDEDF0'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M132.018%2023.5329H128.625V11.5124H125.979V8.53582H132.018V23.5329Z'%20fill='%23EDEDF0'/%3e%3cpath%20d='M130.069%206.45465C131.306%206.45465%20132.226%205.53879%20132.226%204.33673C132.226%203.16329%20131.306%202.24744%20130.069%202.24744C128.833%202.24744%20127.912%203.16329%20127.912%204.33673C127.912%205.53879%20128.833%206.45465%20130.069%206.45465Z'%20fill='%23EDEDF0'/%3e%3cpath%20d='M29.6277%2019.8556V26.4741H13.0326C8.19779%2026.4741%203.97629%2023.8122%201.71769%2019.8556C1.38936%2019.2803%201.10198%2018.6769%200.860926%2018.0505C0.387713%2016.8231%200.0902487%2015.506%200%2014.1317V12.3423C0.0195935%2012.0361%200.050468%2011.7322%200.0908425%2011.432C0.173373%2010.8159%200.298058%2010.213%200.461931%209.62693C2.01219%204.07098%207.05306%200%2013.0326%200C19.0122%200%2024.0525%204.07098%2025.6027%209.62693H18.5069C17.342%207.81586%2015.3257%206.61852%2013.0326%206.61852C10.7396%206.61852%208.72325%207.81586%207.55833%209.62693C7.20328%2010.1775%206.92778%2010.7846%206.74728%2011.432C6.58697%2012.006%206.50147%2012.6113%206.50147%2013.237C6.50147%2015.1341%207.28877%2016.8441%208.55107%2018.0505C9.72074%2019.1702%2011.2977%2019.8556%2013.0326%2019.8556H29.6277Z'%20fill='%23FD366E'/%3e%3cpath%20d='M29.6277%2011.432V18.0505H17.5142C18.7765%2016.8442%2019.5638%2015.1342%2019.5638%2013.2371C19.5638%2012.6113%2019.4783%2012.006%2019.3179%2011.432H29.6277Z'%20fill='%23FD366E'/%3e%3c/svg%3e" width="120" height="22" alt="Appwrite">
     </a>
     <nav class="breadcrumbs is-only-desktop" aria-label="breadcrumb" role="navigation">
         <ol class="breadcrumbs-list">
@@ -15,12 +17,12 @@
 
     <div class="main-header-end">
         <nav class="u-flex u-cross-center">
-            <section class="drop-wrapper">
-                <button class="button is-only-desktop"><span class="text">Upgrade</span></button>
-            </section>
+<!--            <section class="drop-wrapper">-->
+<!--                <button class="button is-only-desktop"><span class="text">Upgrade</span></button>-->
+<!--            </section>-->
             <div class="drop-wrapper">
                 <button class="button is-text is-only-desktop">
-                    <span class="notification u-position-absolute u-inset-block-start-8 u-inset-inline-end-8"></span>
+<!--                    <span class="notification u-position-absolute u-inset-block-start-8 u-inset-inline-end-2"></span>-->
                     <span class="text">Feedback</span>
                 </button>
                 <div class="drop is-block-end u-hide" style="--drop-width-size-desktop:20rem; --section-padding-horizontal:1.5rem; --section-padding-vertical:1.5rem;">
@@ -189,23 +191,25 @@
                     </section>
                 </section>
             </div>
-            <button class="button is-text is-small" type="button" aria-label="search"> <i class="icon-search"></i></button>
+        </nav>
+        <nav class="u-flex u-gap-24 u-cross-center u-height-100-percent">
+            <button class="button is-text is-small u-padding-inline-0" type="button" aria-label="search">
+                <span class="icon-search" aria-hidden="true"></span>
+            </button>
             <div class="drop-wrapper">
-                <button class="button is-text is-small u-position-relative" type="button" aria-label="notifications">
+                <button class="button is-text is-small u-position-relative u-padding-inline-0" type="button" aria-label="notifications">
                     <span class="notification u-position-absolute u-inset-block-start-4 u-inset-inline-end-16"></span>
-                    <i class="icon-bell"></i>
+                    <span class="icon-bell" aria-hidden="true"></span>
                 </button>
             </div>
-        </nav>
-        <nav class="u-flex u-height-100-percent u-sep-inline-start">
             <div class="drop-wrapper">
-                <button id="dropdownBtn" class="user-profile-button">
-                    <span class="avatar">IM</span>
-                    <span class="user-profile-info is-only-desktop">
-                        <span class="name">Walter O’brien</span>
-                        <span class="title">Acme Corp</span>
-                    </span>
-                    <span class="icon-cheveron-down is-only-desktop" aria-hidden="true"></span>
+                <button id="dropdownBtn" class="user-profile-button u-padding-inline-0">
+                    <span class="avatar is-size-small">IM</span>
+<!--                    <span class="user-profile-info is-only-desktop">-->
+<!--                        <span class="name">Walter O’brien</span>-->
+<!--                        <span class="title">Acme Corp</span>-->
+<!--                    </span>-->
+<!--                    <span class="icon-cheveron-down is-only-desktop" aria-hidden="true"></span>-->
                 </button>
                 <div id="dropdown" class="drop is-block-end is-no-arrow u-hide">
                     <section class="drop-section">

apps/kitchensink/vite.config.js

@@ -44,6 +44,7 @@ const config = {
         errorConsolePage: new URL("./error-console-page.html", import.meta.url).pathname,
         wizardWithModal: new URL("./wizard-with-modal.html", import.meta.url).pathname,
         wizardWithModalEmpty: new URL("./wizard-with-modal-empty.html", import.meta.url).pathname,
+        dataTable: new URL("./data-table.html", import.meta.url).pathname,
       },
     },
   },

apps/pink/src/pages/elements/mark.mdx

@@ -0,0 +1,12 @@
+---
+title: Mark
+description: Mark text. It can used for searched text..
+---
+
+| Class         | Type        |                                     |
+| ------------- | ----------- | ----------------------------------- |
+| `mark`        | Mark text   | A class representing mark text      |
+
+<Preview>
+    <div>This is <mark class="mark">marked</mark> text</div>
+</Preview>

packages/ui/src/6-elements/_button.scss

@@ -1,10 +1,10 @@
 @use '../abstract' as *;
 
 .button {
-    $button-size: pxToRem(40);
+    $button-size: pxToRem(32);
     --p-button-size: var(--button-size, #{$button-size});
 
-    $padding-horizontal: pxToRem(16);
+    $padding-horizontal: pxToRem(8);
     --padding-horizontal: #{$padding-horizontal};
 
     $font-size: pxToRem(14);
@@ -38,7 +38,7 @@
     /* End Light theme variables */
 
     @include trim();
-    display:flex; gap:pxToRem(8); align-items:center; inline-size:fit-content; block-size:var(--p-button-size);
+    display:flex; gap:pxToRem(12); align-items:center; inline-size:fit-content; block-size:var(--p-button-size);
     padding-inline:var(--padding-horizontal); cursor:pointer; font-size:var(--p-font-size); font-weight:600;
     color:hsl(var(--p-text-color)); background-color:hsl(var(--p-button-color)); text-align:center;
     border:solid pxToRem(1) hsl(var(--p-border-color)); border-radius:var(--border-radius-xsmall); flex-shrink:0;
@@ -222,4 +222,21 @@
             --p-border-color-disabled: var(--p-border-color-default);
         }
     }
+}
+
+
+
+
+.button-2 {
+    padding-inline: pxToRem(6);
+    background-color: hsl(var(--color-neutral-5));
+    border: solid pxToRem(1) #D8D8DB;
+    border-radius: var(--border-radius-small);
+    block-size: pxToRem(32);
+    line-height: 1;
+    [class*="icon"] { color:hsl(var(--color-neutral-20)); }
+    &.is-only-icon {
+        padding-inline: pxToRem(7);
+        [class*="icon"] { color:hsl(var(--color-neutral-80)); }
+    }
 }

packages/ui/src/6-elements/_index.scss

@@ -1,5 +1,6 @@
 @forward "link";
 @forward "button";
+@forward "mark";
 @forward "kbd";
 @forward "image-item";
 @forward "form";

packages/ui/src/6-elements/_inline-tag.scss

@@ -15,7 +15,7 @@
   --p-inline-tag-text-color-info:     var(--color-neutral-0);
   --p-inline-tag-bg-color-info:       var(--color-information-100);
 
-  display:inline-grid; place-content:center; padding-inline:var(--p-inline-tag-padding-inline);
+  display:inline-grid; place-content:center; padding-inline:var(--p-inline-tag-padding-inline); line-height:1.5;
 
   background-color: hsl(var(--p-inline-tag-bg-color));
   color:            hsl(var(--p-inline-tag-text-color));

packages/ui/src/6-elements/_mark.scss

@@ -0,0 +1,6 @@
+@use '../abstract' as *;
+.mark {
+  display: inline;
+  background-color: hsl(var(--color-primary-hue) 98% 60% / 0.16);
+  border-radius: pxToRem(2);
+}