kempo-ui 0.0.22 → 0.0.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +130 -0
- package/README.md +93 -0
- package/docs/components/tabs.html +115 -24
- package/docs/index.html +1 -1
- package/package.json +2 -2
package/LICENSE.md
ADDED
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
# Creative Commons Attribution-NonCommercial-ShareAlike 2.0
|
|
2
|
+
|
|
3
|
+
CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE LEGAL SERVICES. DISTRIBUTION OF THIS LICENSE DOES NOT CREATE AN ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES REGARDING THE INFORMATION PROVIDED, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM ITS USE.
|
|
4
|
+
|
|
5
|
+
## License
|
|
6
|
+
|
|
7
|
+
THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS CREATIVE COMMONS PUBLIC LICENSE ("CCPL" OR "LICENSE"). THE WORK IS PROTECTED BY COPYRIGHT AND/OR OTHER APPLICABLE LAW. ANY USE OF THE WORK OTHER THAN AS AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS PROHIBITED.
|
|
8
|
+
|
|
9
|
+
BY EXERCISING ANY RIGHTS TO THE WORK PROVIDED HERE, YOU ACCEPT AND AGREE TO BE BOUND BY THE TERMS OF THIS LICENSE. THE LICENSOR GRANTS YOU THE RIGHTS CONTAINED HERE IN CONSIDERATION OF YOUR ACCEPTANCE OF SUCH TERMS AND CONDITIONS.
|
|
10
|
+
|
|
11
|
+
### 1. Definitions
|
|
12
|
+
|
|
13
|
+
a. "Collective Work" means a work, such as a periodical issue, anthology or encyclopedia, in which the Work in its entirety in unmodified form, along with a number of other contributions, constituting separate and independent works in themselves, are assembled into a collective whole. A work that constitutes a Collective Work will not be considered a Derivative Work (as defined below) for the purposes of this License.
|
|
14
|
+
|
|
15
|
+
b. "Derivative Work" means a work based upon the Work or upon the Work and other pre-existing works, such as a translation, musical arrangement, dramatization, fictionalization, motion picture version, sound recording, art reproduction, abridgment, condensation, or any other form in which the Work may be recast, transformed, or adapted, except that a work that constitutes a Collective Work will not be considered a Derivative Work for the purpose of this License. For the avoidance of doubt, where the Work is a musical composition or sound recording, the synchronization of the Work in timed-relation with a moving image ("synching") will be considered a Derivative Work for the purpose of this License.
|
|
16
|
+
|
|
17
|
+
c. "Licensor" means the individual or entity that offers the Work under the terms of this License.
|
|
18
|
+
|
|
19
|
+
d. "Original Author" means the individual or entity who created the Work.
|
|
20
|
+
|
|
21
|
+
e. "Work" means the copyrightable work of authorship offered under the terms of this License.
|
|
22
|
+
|
|
23
|
+
f. "You" means an individual or entity exercising rights under this License who has not previously violated the terms of this License with respect to the Work, or who has received express permission from the Licensor to exercise rights under this License despite a previous violation.
|
|
24
|
+
|
|
25
|
+
### 2. Fair Use Rights
|
|
26
|
+
|
|
27
|
+
Nothing in this license is intended to reduce, limit, or restrict any rights arising from fair use, first sale or other limitations on the exclusive rights of the copyright owner under copyright law or other applicable laws.
|
|
28
|
+
|
|
29
|
+
### 3. License Grant
|
|
30
|
+
|
|
31
|
+
Subject to the terms and conditions of this License, Licensor hereby grants You a worldwide, royalty-free, non-exclusive, perpetual (for the duration of the applicable copyright) license to exercise the rights in the Work as stated below:
|
|
32
|
+
|
|
33
|
+
a. to reproduce the Work, to incorporate the Work into one or more Collective Works, and to reproduce the Work as incorporated in the Collective Works;
|
|
34
|
+
|
|
35
|
+
b. to create and reproduce Derivative Works;
|
|
36
|
+
|
|
37
|
+
c. to distribute copies or phonorecords of, display publicly, perform publicly, and perform publicly by means of a digital audio transmission the Work including as incorporated in Collective Works;
|
|
38
|
+
|
|
39
|
+
d. to distribute copies or phonorecords of, display publicly, perform publicly, and perform publicly by means of a digital audio transmission Derivative Works.
|
|
40
|
+
|
|
41
|
+
The above rights may be exercised in all media and formats whether now known or hereafter devised. The above rights include the right to make such modifications as are technically necessary to exercise the rights in other media and formats. All rights not expressly granted by Licensor are hereby reserved, including but not limited to the rights set forth in Section 4(d).
|
|
42
|
+
|
|
43
|
+
### 4. Restrictions
|
|
44
|
+
|
|
45
|
+
The license granted in Section 3 above is expressly made subject to and limited by the following restrictions:
|
|
46
|
+
|
|
47
|
+
a. You may distribute, publicly display, publicly perform, or publicly digitally perform the Work only under the terms of this License, and You must include a copy of, or the Uniform Resource Identifier for, this License with every copy or phonorecord of the Work You distribute, publicly display, publicly perform, or publicly digitally perform. You may not offer or impose any terms on the Work that alter or restrict the terms of this License or the recipients' exercise of the rights granted hereunder. You may not sublicense the Work. You must keep intact all notices that refer to this License and to the disclaimer of warranties. You may not distribute, publicly display, publicly perform, or publicly digitally perform the Work with any technological measures that control access or use of the Work in a manner inconsistent with the terms of this License Agreement. The above applies to the Work as incorporated in a Collective Work, but this does not require the Collective Work apart from the Work itself to be made subject to the terms of this License. If You create a Collective Work, upon notice from any Licensor You must, to the extent practicable, remove from the Collective Work any credit as required by clause 4(c), as requested. If You create a Derivative Work, upon notice from any Licensor You must, to the extent practicable, remove from the Derivative Work any credit as required by clause 4(c), as requested.
|
|
48
|
+
|
|
49
|
+
b. You may distribute, publicly display, publicly perform, or publicly digitally perform a Derivative Work only under the terms of this License, a later version of this License with the same License Elements as this License, or a Creative Commons iCommons license that contains the same License Elements as this License (e.g. Attribution-NonCommercial-ShareAlike 2.0 Japan). You must include a copy of, or the Uniform Resource Identifier for, this License or other license specified in the previous sentence with every copy or phonorecord of each Derivative Work You distribute, publicly display, publicly perform, or publicly digitally perform. You may not offer or impose any terms on the Derivative Works that alter or restrict the terms of this License or the recipients' exercise of the rights granted hereunder, and You must keep intact all notices that refer to this License and to the disclaimer of warranties. You may not distribute, publicly display, publicly perform, or publicly digitally perform the Derivative Work with any technological measures that control access or use of the Work in a manner inconsistent with the terms of this License Agreement. The above applies to the Derivative Work as incorporated in a Collective Work, but this does not require the Collective Work apart from the Derivative Work itself to be made subject to the terms of this License.
|
|
50
|
+
|
|
51
|
+
c. If you distribute, publicly display, publicly perform, or publicly digitally perform the Work or any Derivative Works or Collective Works, You must keep intact all copyright notices for the Work and provide, reasonable to the medium or means You are utilizing: (i) the name of the Original Author (or pseudonym, if applicable) if supplied, and/or (ii) if the Original Author and/or Licensor designate another party or parties (e.g. a sponsor institute, publishing entity, journal) for attribution in Licensor's copyright notice, terms of service or by other reasonable means, the name of such party or parties; (iii) the title of the Work if supplied; (iv) to the extent reasonably practicable, the Uniform Resource Identifier, if any, that Licensor specifies to be associated with the Work, unless such URI does not refer to the copyright notice or licensing information for the Work; and (v) consistent with Section 3(b), in the case of a Derivative Work, a credit identifying the use of the Work in the Derivative Work (e.g., "French translation of the Work by Original Author," or "Screenplay based on original Work by Original Author"). Such credit may be implemented in any reasonable manner; provided, however, that in the case of a Derivative Work or Collective Work, at a minimum such credit will appear where any other comparable authorship credit appears and in a manner at least as prominent as such other comparable authorship credit.
|
|
52
|
+
|
|
53
|
+
d. For the avoidance of doubt, where the Work is a musical composition:
|
|
54
|
+
|
|
55
|
+
i. Performance Royalties Under Blanket Licenses. Licensor reserves the exclusive right to collect, whether individually or via a performance rights society (e.g. ASCAP, BMI, SESAC), royalties for the public performance or public digital performance (e.g. webcast) of the Work if that performance is primarily intended for or directed toward commercial advantage or private monetary compensation.
|
|
56
|
+
|
|
57
|
+
ii. Mechanical Rights and Statutory Royalties. Licensor reserves the exclusive right to collect, whether individually or via a music rights agency or designated agent (e.g. Harry Fox Agency), royalties for any phonorecord You create from the Work ("cover song") and distribute, subject to the compulsory license created by 17 USC Section 115 of the US Copyright Act (or the equivalent in other jurisdictions), if Your distribution of such cover song is primarily intended for or directed toward commercial advantage or private monetary compensation.
|
|
58
|
+
|
|
59
|
+
e. Webcasting Rights and Statutory Royalties. For the avoidance of doubt, where the Work is a sound recording, Licensor reserves the exclusive right to collect, whether individually or via a performance-rights society (e.g. SoundExchange), royalties for the public digital performance (e.g. webcast) of the Work, subject to the compulsory license created by 17 USC Section 114 of the US Copyright Act (or the equivalent in other jurisdictions), if Your public digital performance is primarily intended for or directed toward commercial advantage or private monetary compensation.
|
|
60
|
+
|
|
61
|
+
### 5. Representations, Warranties and Disclaimer
|
|
62
|
+
|
|
63
|
+
UNLESS OTHERWISE MUTUALLY AGREED TO BY THE PARTIES IN WRITING, LICENSOR OFFERS THE WORK AS-IS AND MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY KIND CONCERNING THE WORK, EXPRESS, IMPLIED, STATUTORY OR OTHERWISE, INCLUDING, WITHOUT LIMITATION, WARRANTIES OF TITLE, MERCHANTIBILITY, FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE ABSENCE OF LATENT OR OTHER DEFECTS, ACCURACY, OR THE PRESENCE OF ABSENCE OF ERRORS, WHETHER OR NOT DISCOVERABLE. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION OF IMPLIED WARRANTIES, SO SUCH EXCLUSION MAY NOT APPLY TO YOU.
|
|
64
|
+
|
|
65
|
+
### 6. Limitation on Liability
|
|
66
|
+
|
|
67
|
+
EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE LAW, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
|
|
68
|
+
|
|
69
|
+
### 7. Termination
|
|
70
|
+
|
|
71
|
+
a. This License and the rights granted hereunder will terminate automatically upon any breach by You of the terms of this License. Individuals or entities who have received Derivative Works or Collective Works from You under this License, however, will not have their licenses terminated provided such individuals or entities remain in full compliance with those licenses. Sections 1, 2, 5, 6, 7, and 8 will survive any termination of this License.
|
|
72
|
+
|
|
73
|
+
b. Subject to the above terms and conditions, the license granted here is perpetual (for the duration of the applicable copyright in the Work). Notwithstanding the above, Licensor reserves the right to release the Work under different license terms or to stop distributing the Work at any time; provided, however that any such election will not serve to withdraw this License (or any other license that has been, or is required to be, granted under the terms of this License), and this License will continue in full force and effect unless terminated as stated above.
|
|
74
|
+
|
|
75
|
+
### 8. Miscellaneous
|
|
76
|
+
|
|
77
|
+
a. Each time You distribute or publicly digitally perform the Work or a Collective Work, the Licensor offers to the recipient a license to the Work on the same terms and conditions as the license granted to You under this License.
|
|
78
|
+
|
|
79
|
+
b. Each time You distribute or publicly digitally perform a Derivative Work, Licensor offers to the recipient a license to the Work on the same terms and conditions as the license granted to You under this License.
|
|
80
|
+
|
|
81
|
+
c. If any provision of this License is invalid or unenforceable under applicable law, it shall not affect the validity or enforceability of the remainder of the terms of this License, and without further action by the parties of this agreement, such provision shall be reformed to the minimum extent necessary to make such provision valid and enforceable.
|
|
82
|
+
|
|
83
|
+
d. No term or provision of this License shall be deemed waived and no breach consented to unless such waiver or consent shall be in writing and signed by the party to be charged with such waiver or consent.
|
|
84
|
+
|
|
85
|
+
e. This License constitutes the entire agreement between the parties with respect to the Work licensed here. There are no understandings, agreements or representations with respect to the Work not specified here. Licensor shall not be bound by any additional provisions that may appear in any communication from You. This License may not be modified without the mutual written agreement of the Licensor and You.
|
|
86
|
+
|
|
87
|
+
Creative Commons is not a party to this License, and makes no warranty whatsoever in connection with the Work. Creative Commons will not be liable to You or any party on any legal theory for any damages whatsoever, including without limitation any general, special, incidental or consequential damages arising in connection to this or any use of the Work. Notwithstanding the foregoing two (2) sentences, if Creative Commons has expressly identified itself as the Licensor hereunder, it shall have all rights and obligations of Licensor.
|
|
88
|
+
|
|
89
|
+
Except for the limited purpose of indicating to the public that the Work is licensed under the CCPL, neither party will use the trademark "Creative Commons" or any related trademark or logo of Creative Commons without the prior written consent of Creative Commons. Any permitted use will be in compliance with Creative Commons' then-current trademark usage guidelines, as may be published on its website or otherwise made available upon request from time to time.
|
|
90
|
+
|
|
91
|
+
Creative Commons may be contacted at https://creativecommons.org/.
|
|
92
|
+
|
|
93
|
+
---
|
|
94
|
+
|
|
95
|
+
## Third-Party Licenses
|
|
96
|
+
|
|
97
|
+
This project includes third-party software. The following sections detail the licenses for these components:
|
|
98
|
+
|
|
99
|
+
### Lit
|
|
100
|
+
|
|
101
|
+
This project includes Lit, which is licensed under the BSD-3-Clause License:
|
|
102
|
+
|
|
103
|
+
```
|
|
104
|
+
Copyright 2017 Google LLC. All rights reserved.
|
|
105
|
+
|
|
106
|
+
Redistribution and use in source and binary forms, with or without
|
|
107
|
+
modification, are permitted provided that the following conditions are met:
|
|
108
|
+
|
|
109
|
+
1. Redistributions of source code must retain the above copyright notice, this
|
|
110
|
+
list of conditions and the following disclaimer.
|
|
111
|
+
|
|
112
|
+
2. Redistributions in binary form must reproduce the above copyright notice,
|
|
113
|
+
this list of conditions and the following disclaimer in the documentation
|
|
114
|
+
and/or other materials provided with the distribution.
|
|
115
|
+
|
|
116
|
+
3. Neither the name of the copyright holder nor the names of its
|
|
117
|
+
contributors may be used to endorse or promote products derived from
|
|
118
|
+
this software without specific prior written permission.
|
|
119
|
+
|
|
120
|
+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
|
|
121
|
+
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
|
122
|
+
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
|
123
|
+
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
|
|
124
|
+
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
|
|
125
|
+
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
|
|
126
|
+
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
|
|
127
|
+
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
|
|
128
|
+
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
|
129
|
+
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
130
|
+
```
|
package/README.md
CHANGED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
# Kempo UI
|
|
2
|
+
|
|
3
|
+
A modern, lightweight web component library built with Lit, providing accessible and customizable UI components for web applications.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Web Components**: Standards-based, framework-agnostic components
|
|
8
|
+
- **Accessible**: Built with accessibility best practices
|
|
9
|
+
- **Customizable**: Easy theming and styling
|
|
10
|
+
- **Lightweight**: Minimal bundle size with minimal dependecnies/
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install kempo-ui
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Quick Start
|
|
19
|
+
|
|
20
|
+
Import and use components in your HTML:
|
|
21
|
+
|
|
22
|
+
```html
|
|
23
|
+
<!DOCTYPE html>
|
|
24
|
+
<html lang="en">
|
|
25
|
+
<head>
|
|
26
|
+
<meta charset="UTF-8">
|
|
27
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
28
|
+
<title>My App</title>
|
|
29
|
+
<script type="module" src="node_modules/kempo-ui/index.js"></script>
|
|
30
|
+
</head>
|
|
31
|
+
<body>
|
|
32
|
+
<k-tabs>
|
|
33
|
+
<k-tab for="home">Home</k-tab>
|
|
34
|
+
<k-tab for="about">About</k-tab>
|
|
35
|
+
<k-tab-content name="home">
|
|
36
|
+
<h2>Welcome Home</h2>
|
|
37
|
+
<p>This is the home tab content.</p>
|
|
38
|
+
</k-tab-content>
|
|
39
|
+
<k-tab-content name="about">
|
|
40
|
+
<h2>About Us</h2>
|
|
41
|
+
<p>Learn more about our project.</p>
|
|
42
|
+
</k-tab-content>
|
|
43
|
+
</k-tabs>
|
|
44
|
+
</body>
|
|
45
|
+
</html>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
## Documentation
|
|
50
|
+
|
|
51
|
+
**Full Documentation**: [https://dustinpoissant.github.io/kempo-ui/](https://dustinpoissant.github.io/kempo-ui/)
|
|
52
|
+
|
|
53
|
+
The documentation includes:
|
|
54
|
+
- Component API references
|
|
55
|
+
- Interactive examples
|
|
56
|
+
- Usage guides
|
|
57
|
+
- Accessibility information
|
|
58
|
+
- Customization options
|
|
59
|
+
|
|
60
|
+
## Development
|
|
61
|
+
|
|
62
|
+
```bash
|
|
63
|
+
# Clone the repository
|
|
64
|
+
git clone https://github.com/dustinpoissant/kempo-ui.git
|
|
65
|
+
cd kempo-ui
|
|
66
|
+
|
|
67
|
+
# Install dependencies
|
|
68
|
+
npm install
|
|
69
|
+
|
|
70
|
+
# Start development server
|
|
71
|
+
npm run docs
|
|
72
|
+
|
|
73
|
+
# Run tests
|
|
74
|
+
npm test
|
|
75
|
+
|
|
76
|
+
# Build for production
|
|
77
|
+
npm run build
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## Contributing
|
|
81
|
+
|
|
82
|
+
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details on:
|
|
83
|
+
|
|
84
|
+
- Setting up your development environment
|
|
85
|
+
- Code style and conventions
|
|
86
|
+
- Testing guidelines
|
|
87
|
+
- Pull request process
|
|
88
|
+
|
|
89
|
+
## License
|
|
90
|
+
|
|
91
|
+
This work is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 2.0 Generic License](https://creativecommons.org/licenses/by-nc-sa/2.0/) - see the [LICENSE.md](LICENSE.md) file for details.
|
|
92
|
+
|
|
93
|
+
Built using [Lit](https://lit.dev/)
|
|
@@ -15,15 +15,16 @@
|
|
|
15
15
|
<k-import src="../nav-1.inc.html"></k-import>
|
|
16
16
|
<h1 class="ta-center">Tabs</h1>
|
|
17
17
|
<main>
|
|
18
|
-
<k-accordion class="mb">
|
|
19
|
-
<k-accordion-panel
|
|
20
|
-
|
|
18
|
+
<k-accordion persistent-id="toc" class="b r mb">
|
|
19
|
+
<k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
|
|
20
|
+
<k-accordion-panel name="toc-panel">
|
|
21
|
+
<div class="m">
|
|
21
22
|
<h6>Examples</h6>
|
|
22
23
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
23
24
|
<a href="#tabSpacers">Tab Spacers</a><br />
|
|
24
25
|
<a href="#scrollingTabs">Scrolling Tabs</a><br />
|
|
25
26
|
<a href="#fixedHeight">Fixed Height</a><br />
|
|
26
|
-
<h6 class="mt">JavaScript Reference</h6>
|
|
27
|
+
<h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
|
|
27
28
|
<a href="#constructor">Constructor</a><br />
|
|
28
29
|
<a href="#requirements">Requirements</a><br />
|
|
29
30
|
<a href="#properties">Properties</a><br />
|
|
@@ -56,30 +57,120 @@
|
|
|
56
57
|
</k-card>
|
|
57
58
|
</div>
|
|
58
59
|
</div>
|
|
59
|
-
|
|
60
|
+
|
|
61
|
+
<h3 id="tabSpacers"><a href="#tabSpacers" class="no-link">Tab Spacers</a></h3>
|
|
62
|
+
<p>Use the <code>k-tab-spacer</code> component to create flexible spacing between tabs. This is useful for creating layouts where some tabs are grouped on the left and others on the right.</p>
|
|
63
|
+
<div class="row -mx mb">
|
|
64
|
+
<div class="col d-span-6 m-span-12 px">
|
|
65
|
+
<k-card label="HTML">
|
|
66
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tabs</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"left1"</span>></span>Home<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"left2"</span>></span>About<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-spacer</span>></span><span class="hljs-tag"></<span class="hljs-name">k-tab-spacer</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"right1"</span>></span>Settings<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"right2"</span>></span>Profile<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"left1"</span>></span><br /> Home Content<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"left2"</span>></span><br /> About Content<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"right1"</span>></span><br /> Settings Content<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"right2"</span>></span><br /> Profile Content<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-tabs</span>></span></code></pre>
|
|
67
|
+
</k-card>
|
|
68
|
+
</div>
|
|
69
|
+
<div class="col d-span-6 m-span-12 px">
|
|
70
|
+
<k-card label="Results">
|
|
71
|
+
<k-tabs>
|
|
72
|
+
<k-tab for="left1">Home</k-tab>
|
|
73
|
+
<k-tab for="left2">About</k-tab>
|
|
74
|
+
<k-tab-spacer></k-tab-spacer>
|
|
75
|
+
<k-tab for="right1">Settings</k-tab>
|
|
76
|
+
<k-tab for="right2">Profile</k-tab>
|
|
77
|
+
<k-tab-content name="left1">
|
|
78
|
+
<p>Home Content</p>
|
|
79
|
+
</k-tab-content>
|
|
80
|
+
<k-tab-content name="left2">
|
|
81
|
+
<p>About Content</p>
|
|
82
|
+
</k-tab-content>
|
|
83
|
+
<k-tab-content name="right1">
|
|
84
|
+
<p>Settings Content</p>
|
|
85
|
+
</k-tab-content>
|
|
86
|
+
<k-tab-content name="right2">
|
|
87
|
+
<p>Profile Content</p>
|
|
88
|
+
</k-tab-content>
|
|
89
|
+
</k-tabs>
|
|
90
|
+
</k-card>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<h3 id="scrollingTabs"><a href="#scrollingTabs" class="no-link">Scrolling Tabs</a></h3>
|
|
95
|
+
<p>When there are many tabs that don't fit in the available space, the tabs will automatically become scrollable with left/right scroll indicators.</p>
|
|
96
|
+
<div class="row -mx mb">
|
|
97
|
+
<div class="col d-span-6 m-span-12 px">
|
|
98
|
+
<k-card label="HTML">
|
|
99
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tabs</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab1"</span>></span>Tab 1<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab2"</span>></span>Tab 2<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab3"</span>></span>Tab 3<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab4"</span>></span>Tab 4<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab5"</span>></span>Tab 5<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab6"</span>></span>Tab 6<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab7"</span>></span>Tab 7<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab8"</span>></span>Tab 8<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab1"</span>></span><br /> Content for Tab 1<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab2"</span>></span><br /> Content for Tab 2<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab3"</span>></span><br /> Content for Tab 3<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab4"</span>></span><br /> Content for Tab 4<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab5"</span>></span><br /> Content for Tab 5<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab6"</span>></span><br /> Content for Tab 6<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab7"</span>></span><br /> Content for Tab 7<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab8"</span>></span><br /> Content for Tab 8<br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-tabs</span>></span></code></pre>
|
|
100
|
+
</k-card>
|
|
101
|
+
</div>
|
|
102
|
+
<div class="col d-span-6 m-span-12 px">
|
|
103
|
+
<k-card label="Results" style="max-width: 400px;">
|
|
104
|
+
<k-tabs>
|
|
105
|
+
<k-tab for="tab1">Tab 1</k-tab>
|
|
106
|
+
<k-tab for="tab2">Tab 2</k-tab>
|
|
107
|
+
<k-tab for="tab3">Tab 3</k-tab>
|
|
108
|
+
<k-tab for="tab4">Tab 4</k-tab>
|
|
109
|
+
<k-tab for="tab5">Tab 5</k-tab>
|
|
110
|
+
<k-tab for="tab6">Tab 6</k-tab>
|
|
111
|
+
<k-tab for="tab7">Tab 7</k-tab>
|
|
112
|
+
<k-tab for="tab8">Tab 8</k-tab>
|
|
113
|
+
<k-tab-content name="tab1">
|
|
114
|
+
<p>Content for Tab 1</p>
|
|
115
|
+
</k-tab-content>
|
|
116
|
+
<k-tab-content name="tab2">
|
|
117
|
+
<p>Content for Tab 2</p>
|
|
118
|
+
</k-tab-content>
|
|
119
|
+
<k-tab-content name="tab3">
|
|
120
|
+
<p>Content for Tab 3</p>
|
|
121
|
+
</k-tab-content>
|
|
122
|
+
<k-tab-content name="tab4">
|
|
123
|
+
<p>Content for Tab 4</p>
|
|
124
|
+
</k-tab-content>
|
|
125
|
+
<k-tab-content name="tab5">
|
|
126
|
+
<p>Content for Tab 5</p>
|
|
127
|
+
</k-tab-content>
|
|
128
|
+
<k-tab-content name="tab6">
|
|
129
|
+
<p>Content for Tab 6</p>
|
|
130
|
+
</k-tab-content>
|
|
131
|
+
<k-tab-content name="tab7">
|
|
132
|
+
<p>Content for Tab 7</p>
|
|
133
|
+
</k-tab-content>
|
|
134
|
+
<k-tab-content name="tab8">
|
|
135
|
+
<p>Content for Tab 8</p>
|
|
136
|
+
</k-tab-content>
|
|
137
|
+
</k-tabs>
|
|
138
|
+
</k-card>
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
60
141
|
|
|
61
142
|
<h3 id="fixedHeight"><a href="#fixedHeight" class="no-link">Fixed Height</a></h3>
|
|
62
143
|
<p>Use the <code>fixed-height</code> attribute to make the tabs component fill its container height and enable content scrolling.</p>
|
|
63
|
-
<
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
<
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
144
|
+
<div class="row -mx mb">
|
|
145
|
+
<div class="col d-span-6 m-span-12 px">
|
|
146
|
+
<k-card label="HTML">
|
|
147
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tabs</span> <span class="hljs-attr">fixed-height</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 200px"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"fixed1"</span>></span>Tab 1<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"fixed2"</span>></span>Tab 2<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fixed1"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>This content will scroll if it's too long.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"fixed2"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Another tab that is not tall enough.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-tabs</span>></span></code></pre>
|
|
148
|
+
</k-card>
|
|
149
|
+
</div>
|
|
150
|
+
<div class="col d-span-6 m-span-12 px">
|
|
151
|
+
<k-card label="Results">
|
|
152
|
+
<k-tabs fixed-height="true" style="height: 200px">
|
|
153
|
+
<k-tab for="fixed1">Tab 1</k-tab>
|
|
154
|
+
<k-tab for="fixed2">Tab 2</k-tab>
|
|
155
|
+
<k-tab-content name="fixed1">
|
|
156
|
+
<p>This content will scroll if it's too long.</p>
|
|
157
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
158
|
+
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
159
|
+
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
|
|
160
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
161
|
+
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
162
|
+
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
|
|
163
|
+
</k-tab-content>
|
|
164
|
+
<k-tab-content name="fixed2">
|
|
165
|
+
<p>Another tab that is not tall enough.</p>
|
|
166
|
+
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
|
|
167
|
+
</k-tab-content>
|
|
168
|
+
</k-tabs>
|
|
169
|
+
</k-card>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
81
172
|
|
|
82
|
-
<h2 id="jsRef">JavaScript Reference</h2>
|
|
173
|
+
<h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
|
|
83
174
|
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
84
175
|
<h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
|
|
85
176
|
<h5><code>new Tabs()</code></h5>
|
package/docs/index.html
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "kempo-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.24",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A Lit based web-component library",
|
|
6
6
|
"main": "index.js",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"url": "git+https://github.com/dustinpoissant/kempo-ui.git"
|
|
20
20
|
},
|
|
21
21
|
"author": "Dustin Poissant",
|
|
22
|
-
"license": "
|
|
22
|
+
"license": "CC-BY-NC-SA-2.0",
|
|
23
23
|
"bugs": {
|
|
24
24
|
"url": "https://github.com/dustinpoissant/issues"
|
|
25
25
|
},
|