Kobil Portal Web Components (Lit)

Reusable kb-* web components built with Lit.

Components

• kb-title: Tipografi başlık bileşeni; type ve aria-level destekler.
• kb-tabs / kb-tab: Sekmeli düzen; her sekmede başka kb-* bileşenleri render edilebilir.
• kb-sliderpack: Yatay kaydırılabilir uygulama kartları.
• kb-gridpack: Izgara görünümünde uygulama kartları.
• kb-listpack: Liste görünümünde uygulama satırları.
• kb-spotlight: Geniş banner + başlık/metin; haber/spotlight için uygundur.
• kb-apps: 2:3 oranlı (genişlik:yükseklik) uygulama kartları; mobilde 3 sütun, desktop’ta satırı eşit doldurur.

Install

npm i kobil-portal-web-components
npm i lit

lit bir peer dependency’dir; host uygulamanın ayrıca kurması gerekir.

Usage (Bundlers)

Vite/Webpack/Rollup/Next vb.

import 'kobil-portal-web-components/kb-title';
import 'kobil-portal-web-components/kb-tabs';
import 'kobil-portal-web-components/kb-sliderpack';
import 'kobil-portal-web-components/kb-gridpack';
import 'kobil-portal-web-components/kb-listpack';
import 'kobil-portal-web-components/kb-spotlight';
import 'kobil-portal-web-components/kb-apps';

<kb-title type="heading" aria-level="2">Başlık</kb-title>

<kb-tabs selected-index="0">
  <kb-tab label="Uygulamalar">
    <kb-sliderpack></kb-sliderpack>
  </kb-tab>
  <kb-tab label="Izgara">
    <kb-gridpack></kb-gridpack>
  </kb-tab>
  <kb-tab label="Liste">
    <kb-listpack></kb-listpack>
  </kb-tab>
</kb-tabs>

<kb-spotlight></kb-spotlight>

<kb-apps></kb-apps>

Props & API (özet)

• kb-title
  • type: title | heading | subheading
  • aria-level: 1..6
• kb-tabs
  • selected-index: Aktif sekme indeksi (0 tabanlı)
  • Slot: <kb-tab label="..."> ... </kb-tab>
• kb-sliderpack | kb-gridpack | kb-listpack
  • .items: { id?, title, description?, logo?, href? }[]
• kb-spotlight
  • .items: { id?, title, description?, href?, banner, logo? }[]
  • aspect-ratio: 1x1 | 16x9 | 4x3 | 2x1
  • detail-mode: none | inside | outside
• kb-apps
  • .items: { id?, title, logo?, href? }[] (Kart oranı sabit: 2 / 3)

Usage (Plain HTML via CDN)

Bu paket ESM ve dışa alınmış lit ile gelir; import map veya bağımlılıkları yeniden yazan bir CDN kullanın.

Option A — Import Map (jsDelivr):

<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
    }
  }
</script>
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/kobil-portal-web-components/dist/kb-title.js"
></script>
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/kobil-portal-web-components/dist/kb-tabs.js"
></script>
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/kobil-portal-web-components/dist/kb-sliderpack.js"
></script>
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/kobil-portal-web-components/dist/kb-gridpack.js"
></script>
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/kobil-portal-web-components/dist/kb-listpack.js"
></script>
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/kobil-portal-web-components/dist/kb-spotlight.js"
></script>
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/kobil-portal-web-components/dist/kb-apps.js"
></script>

Option B — esm.sh (auto rewrite):

<script type="module" src="https://esm.sh/kobil-portal-web-components/dist/kb-title.js"></script>
<script type="module" src="https://esm.sh/kobil-portal-web-components/dist/kb-tabs.js"></script>
<script
  type="module"
  src="https://esm.sh/kobil-portal-web-components/dist/kb-sliderpack.js"
></script>
<script type="module" src="https://esm.sh/kobil-portal-web-components/dist/kb-gridpack.js"></script>
<script type="module" src="https://esm.sh/kobil-portal-web-components/dist/kb-listpack.js"></script>
<script
  type="module"
  src="https://esm.sh/kobil-portal-web-components/dist/kb-spotlight.js"
></script>
<script type="module" src="https://esm.sh/kobil-portal-web-components/dist/kb-apps.js"></script>

Exports

• kobil-portal-web-components/kb-title
• kobil-portal-web-components/kb-tabs
• kobil-portal-web-components/kb-sliderpack
• kobil-portal-web-components/kb-gridpack
• kobil-portal-web-components/kb-listpack
• kobil-portal-web-components/kb-spotlight
• kobil-portal-web-components/kb-apps

Types are published under dist/types and referenced in package.json exports.

Build

npm run build

Outputs to dist/.

Publish Notes

• Ensure name in package.json is correct for npm.
• Consider adding license, author, and repository fields before publishing.
• prepublishOnly runs the build automatically.